/* LinkReport, INAH Group / Tech. Hani Walakiyim (HLB). 11/09/2026. */
/* HABILLAGE COMMUN À TOUTES LES PAGES DU SITE (10/09/2026).

   POURQUOI CE FICHIER EXISTE, ET CE QU'IL FAUT NE PLUS JAMAIS REFAIRE.
   Signalé par l'utilisateur avec des captures : le mode administrateur de la
   page du groupe ne ressemblait pas du tout à celui de l'accueil. Boutons
   plats et gris au lieu des gélules de la marque, barre du bas différente,
   fond noir au lieu du dégradé, boîtes système blanches pour le mot de passe
   et les confirmations. La cause était bête : `index.html` portait tout son
   habillage dans sa propre balise de style, et `legal.css`, que chargent les
   autres pages, n'avait ni `.bouton`, ni barre d'administration, ni fenêtre
   modale. Chaque page réinventait donc son apparence.

   RÈGLE : tout ce qui doit se ressembler d'une page à l'autre vit ICI, une
   seule fois, et chaque page charge ce fichier. Rien de ce qui est écrit ici
   ne doit être recopié dans une page.

   Il ne dépend d'aucune couleur écrite en dur : tout passe par les variables
   déjà définies par `index.html` ou `legal.css`, avec une valeur de repli
   pour les pages dont la feuille n'a pas la variable. */

/* BANDE BLANCHE AU BOUT DU DÉFILEMENT, signalée le 10/09/2026. La zone de
   rebond, en haut et en bas, montre le fond de la RACINE du document, pas
   celui du corps. Sans cette ligne, c'est le blanc du navigateur qui
   apparaît. `theme.js` remplace ensuite ce fond par celui choisi dans
   l'administration, sur la racine elle aussi. NE PAS RETIRER.
   La COULEUR compte autant que le fond : un fond posé avec
   `background-attachment:fixed` n'est peint que dans l'écran, et seule la
   couleur de fond de la racine couvre la zone de rebond. */
html { background-color: #1a0c2e; }

/* Variables de repli, pour les pages qui chargent `legal.css`, laquelle ne
   déclare ni le vert ni les teintes d'accent. */
:root {
  --vert: #22C55E;
  --ambre: #FFC24B;
  --ciel: #38BDF8;
  --nuit-2: #1d0f2b;
}

/* ---- Boutons ---------------------------------------------------------
   Exactement ceux de l'accueil : gélule, ombre portée discrète, léger
   soulèvement au survol. Pas de néon, retiré le 09/09/2026 à la demande
   de l'utilisateur. */
.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: var(--corps);
}
.bouton:hover { transform: translateY(-2px); }
.bouton.plein { background: var(--vert); color: #06210f; box-shadow: 0 8px 22px rgba(0, 0, 0, .38); }
.bouton.contour { border-color: var(--bord); background: var(--verre); color: var(--texte); }
.bouton.contour:hover { border-color: rgba(255, 255, 255, .32); }

/* LE FOCUS SUIT LA GELULE, IL NE DESSINE PAS UN RECTANGLE (22/09/2026,
   remarque de HLB devant la fenetre « Essayer LinkReport » : « pourquoi il est
   encadre avec un rectangle alors que les boutons sont des gelules ? »). Le
   cadre par defaut du navigateur, en couleur du systeme, ignore l'arrondi.
   On le remplace par un anneau qui epouse la forme du bouton, et qui reste
   bien visible au clavier. */
.bouton:focus-visible,
a.bouton:focus-visible,
button.bouton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 0 0 6px rgba(0, 0, 0, .45);
}


/* ---- Barre d'administration ------------------------------------------
   Une seule barre pour tout le site. Une page qui ajoute son mode
   administrateur pose ce balisage et n'écrit aucun style. */
#barre-admin {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  background: rgba(12, 7, 20, .94); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--bord);
  padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
}
.admin-actif #barre-admin { display: block; }
.barre-admin-i {
  max-width: var(--large, 1180px); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.barre-admin-i .info { font-size: 13px; color: var(--texte-doux); flex: 1 1 200px; min-width: 0; }

/* ---- Fenêtre modale ---------------------------------------------------
   PLUS AUCUNE BOÎTE SYSTÈME. Les `prompt`, `confirm` et `alert` du
   navigateur s'affichent sur fond blanc, avec la police du système : sur un
   site entièrement sombre, c'est une rupture visuelle brutale, et
   l'utilisateur l'a signalée. Toute demande de mot de passe, toute
   confirmation et tout message passent par cette fenêtre. */
#voile {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(6, 3, 10, .72); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none; place-items: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
#voile.on { display: grid; opacity: 1; }
.fenetre {
  background: #1a0f26; border: 1px solid var(--bord); border-radius: 20px;
  padding: 26px; width: 100%; max-width: 420px;
  max-height: 86vh; overflow-y: auto; box-sizing: border-box;
}
/* LE TABLEAU DE BORD PREND TOUT L'ÉCRAN (10/09/2026, demandé explicitement :
   "la page est grande, elle est large, pourquoi tu l'as affiché comme ça,
   étale-le sur tout l'écran"). Une fenêtre centrée de 800 pixels laissait
   les graphiques serrés au milieu d'un écran vide. Le tableau de bord se
   comporte donc comme une page à part entière : plein écran, défilement
   normal, aucun arrondi. Les autres fenêtres, elles, restent centrées et
   étroites, c'est ce qui convient à une question courte. */
#voile.plein { padding: 0; place-items: stretch; }
.fenetre.plein {
  max-width: none; width: 100%; height: 100%; max-height: none;
  border-radius: 0; border: none; padding: 26px clamp(16px, 4vw, 48px) 40px;
  background: rgba(10, 6, 18, .96);
}
.fenetre h3 { font-family: var(--display); margin: 0 0 6px; font-size: 20px; }
.fenetre p { margin: 0 0 16px; font-size: 14px; color: var(--texte-doux); }
.champ {
  width: 100%; box-sizing: border-box;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--bord); border-radius: 11px;
  padding: 12px 14px; color: var(--texte); font-size: 15px; font-family: var(--corps);
  margin-bottom: 12px;
}
.rangee { display: flex; gap: 10px; }
.rangee > * { flex: 1; }

/* Bulles de chiffres, partagées par la fréquentation du site et par celle
   de la page du groupe. */
#stats-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.bulle { background: rgba(255, 255, 255, .05); border: 1px solid var(--bord); border-radius: 13px; padding: 12px; }
.bulle b { display: block; font-family: var(--display); font-size: 21px; }
.bulle span { font-size: 12.5px; color: var(--texte-doux); }

/* ---- Commandes de formulaire -----------------------------------------
   DEUXIÈME DÉFAUT SIGNALÉ AVEC CAPTURES : les curseurs s'affichaient en
   BLEU système, les sélecteurs de couleur dans un cadre BLANC, et les
   listes déroulantes avec le fond clair du système. Rien de tout ça
   n'existe nulle part ailleurs dans le produit. Ces trois commandes sont
   donc redessinées ici, une fois, pour tout le site. */

/* Curseurs. `accent-color` suffit sur les navigateurs récents ; le dessin
   complet en dessous couvre les autres et donne la pastille de la marque. */
input[type="range"] {
  accent-color: var(--vert);
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%;
  background: var(--vert); border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vert); border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* Sélecteurs de couleur : le navigateur dessine un cadre blanc autour de la
   pastille. On le retire pour ne garder que la couleur, dans un contour de
   la marque. */
input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 30px; padding: 2px; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bord); border-radius: 9px;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 7px; }

/* Listes déroulantes : fond du site, texte du site, et SANS FLECHE
   (22/09/2026, HLB : « pourquoi tu mets une flèche ? Quand quelqu'un voit un
   titre comme ça, il sait que quand il clique dessus, il y a quelque chose qui
   s'affiche »). La liste qui s'ouvre reste dessinée par le navigateur. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: rgba(255, 255, 255, .06);
  background-image: none;
  color: var(--texte); font-family: var(--corps); font-size: 13.5px;
  border: 1px solid var(--bord); border-radius: 10px;
  padding: 9px 12px; cursor: pointer;
}
select::-ms-expand { display: none; }
select option { background: #1a0f26; color: var(--texte); }

/* Déclencheur des cinq appuis, en bas de chaque page. */
.declencheur { cursor: default; user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .bouton, #voile { transition: none; }
  .bouton:hover { transform: none; }
}

/* SIGNATURE DU PIED DE PAGE EN DEUX LIENS (10/09/2026, demandé
   explicitement). `footer.pied a` pose 18 px de marge à droite de chaque
   lien, ce qui convient à la rangée de liens du dessus mais creusait un
   trou au milieu de « INAH Group / Tech ». Ces deux noms forment une seule
   ligne de texte : la marge n'a rien à y faire. */
footer.pied .signature a { margin-right: 0; }
footer.pied .signature { white-space: normal; }

/* ---- LE HAUT DE PAGE DU SITE DU GROUPE (16/09/2026) -------------------
   Signalé par HLB : « sur le site INAH Group, je ne vois pas le haut de la
   page. Sur linkreport.fr nous avons un haut de page et un bas de page bien
   séparés. Sur l'autre, il n'y a absolument pas ça. »

   C'était exact : les treize pages n'avaient aucun en-tête. Celui-ci est
   posé par `entete.js`, comme le pied l'est par `pied.js`, et il reprend au
   pixel près celui de linkreport.fr : même hauteur, même verre dépoli, même
   comportement quand la fenêtre rétrécit.

   LA BARRE NE PASSE JAMAIS À LA LIGNE, règle posée le 11/09/2026 et qui vaut
   ici aussi : « ça ne doit pas revenir en ligne, parce que quand ça revient
   en ligne, ça monte tous les autres en haut, il y a un décalage et ça
   devient moche ». La police et les écarts se réduisent avec la largeur, et
   sous le plancher la navigation glisse au doigt comme les onglets d'un
   navigateur. Les liens ne disparaissent jamais. */
header.entete-maison {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(18px) saturate(150%);
  background: rgba(20, 10, 30, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
header.entete-maison .barre {
  display: flex; align-items: center; gap: 14px; height: 62px; flex-wrap: nowrap;
}
header.entete-maison .logo {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(14px, 1.4vw, 19px); text-decoration: none; white-space: nowrap;
}
/* LE NOM DE L'ENTITÉ, EN COULEURS (16/09/2026, demandé par HLB). Le dégradé
   est celui du titre de l'accueil de linkreport.fr, au caractère près :
   ambre, rose, ciel. Il est découpé sur le texte, donc il porte sur le nom
   seul et jamais sur le logo, qui garde ses propres couleurs.
   `background-clip:text` rend le texte transparent : une couleur de repli est
   posée avant, pour les navigateurs qui ne savent pas le faire, sans quoi le
   nom disparaîtrait purement et simplement. */
header.entete-maison .nom-entite {
  color: var(--texte);
  background: linear-gradient(100deg, #FFC24B, #FF83B0 55%, #7DD3FC);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
header.entete-maison .logo { gap: 10px; }
header.entete-maison .pastille {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
}
/* ET DÈS QU'ELLE PORTE UNE IMAGE, ELLE NE ROGNE PLUS RIEN (28/09/2026,
   signalé par HLB pour le grand logo, et la même faute était ici, en plus
   petit). Un arrondi avec `overflow: hidden` coupe les quatre coins de ce
   qu'il contient. Notre logo est dessiné dans un carré et se pose sans
   arrière-plan : ses coins sont du dessin, pas du vide. La pastille garde son
   arrondi tant qu'elle n'a pas d'image, parce qu'elle porte alors un dessin à
   nous, qui a le droit d'avoir la forme qu'on veut. */
header.entete-maison .pastille:has(img) {
  border-radius: 0; overflow: visible;
}
/* LE LOGO N'A PAS D'ARRIÈRE-PLAN (règle du 15/09/2026). La pastille ne peint
   aucun dégradé : le logo se pose sur la page, et le fond visible derrière
   est celui de la page. `contain` pour ne rien rogner. */
header.entete-maison .pastille img {
  width: 100%; height: 100%; object-fit: contain;
}
/* L'ÉCART ENTRE LE NOM DE L'ENTITÉ ET LE RESTE (16/09/2026, demandé par HLB :
   « il faut un vrai espace entre les deux, un espace raisonnable, il ne faut
   pas que ça soit collé »). Il prend l'espace disponible quand la barre est
   large, et garde un plancher quand elle ne l'est plus : un simple
   `margin-left:auto` tombe à zéro dès que les liens remplissent la ligne, et
   le premier lien vient alors se coller au nom. */
header.entete-maison .ecart { flex: 1 1 auto; min-width: clamp(22px, 4vw, 60px); }
header.entete-maison nav {
  display: flex; flex: 0 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  font-size: clamp(10.5px, 1.05vw, 14px); gap: clamp(9px, 1.5vw, 24px);
  padding-bottom: 1px;
}
header.entete-maison nav::-webkit-scrollbar { display: none; }
/* LES FONDUS DE BORD, DES DEUX CÔTÉS ET SELON LA POSITION RÉELLE. Quand la
   navigation glisse, elle se coupe net au bord, et un libellé tranché au
   milieu d'un mot se lit comme un défaut d'affichage plutôt que comme « il y
   a encore des liens par là ». Ces dégradés le disent sans ajouter ni flèche
   ni bouton, exactement comme la bande des logos du pied de page.
   Ils suivent la position : pas de fondu à gauche tant qu'on n'a rien fait
   glisser, pas de fondu à droite une fois arrivé au bout. Un fondu figé
   mentirait dans les deux cas. `entete.js` pose les deux classes. */
header.entete-maison nav.glisse-a-droite {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
header.entete-maison nav.glisse-a-gauche {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
}
header.entete-maison nav.glisse-a-gauche.glisse-a-droite {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
header.entete-maison nav a {
  color: var(--texte-doux); text-decoration: none; transition: color .2s;
  white-space: nowrap; flex: 0 0 auto;
}
header.entete-maison nav a:hover { color: var(--texte); }

/* LE MENU DÉROULANT DES FILIALES. Il s'ouvre au survol à la souris et au
   doigt sur écran tactile, où le survol n'existe pas : `:focus-within` le
   garde ouvert après une tape, sans quoi il serait inatteignable sur
   téléphone. */
header.entete-maison .menu-filiales { position: relative; flex: 0 0 auto; }
header.entete-maison .liste-filiales {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  display: none; min-width: 190px; padding: 6px 0;
  background: #1b0f28; border: 1px solid var(--bord); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
header.entete-maison .menu-filiales:hover .liste-filiales,
header.entete-maison .menu-filiales:focus-within .liste-filiales { display: block; }
header.entete-maison .liste-filiales a {
  display: block; padding: 9px 16px; font-size: 13.5px;
}
header.entete-maison .liste-filiales a:hover { background: rgba(255, 255, 255, .08); }

/* L'ENTRÉE DE L'ESPACE MEMBRES. Elle se distingue des liens de section par
   sa COULEUR, pas par une gélule (16/09/2026 : « pourquoi est-ce que tu as
   mis Espace membres dans une gélule ? Tu peux juste choisir une couleur pour
   ce texte spécifique, mais ne le mets pas dans une gélule. »). La gélule
   ajoutait un contour, un fond et du remplissage au milieu d'une ligne de
   liens nus : elle attirait l'oeil plus que le nom de l'entité.
   LA COULEUR EST CELLE DE LA MAISON, PAS UNE COULEUR NEUVE : le vert de
   `--vert` sert déjà aux boutons pleins et aux coches du site. Règle du
   11/09/2026, un élément ne prend jamais une couleur qui n'existe nulle part
   ailleurs. */
header.entete-maison .entree-membres {
  color: var(--vert); font-weight: 700;
}
header.entete-maison .entree-membres:hover { color: var(--vert); opacity: .82; }
/* « NOUS CONTACTER » EST UN LIEN COMME LES AUTRES (22/09/2026, HLB : « Nous
   contacter ne doit pas etre une gelule verte, juste du texte comme les
   autres »). La gelule verte posee le matin meme est retiree : il prend le
   style de la navigation, et `verifier-cadre-des-pages` refuse son retour. */

header.entete-maison #bouton-theme {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bord); background: var(--verre); transition: background .18s ease;
}
header.entete-maison #bouton-theme:hover { background: rgba(255, 255, 255, .1); }
header.entete-maison #bouton-theme[hidden] { display: none !important; }
header.entete-maison #bouton-theme .rond-theme {
  width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--texte);
  background: linear-gradient(90deg, var(--texte) 0 50%, transparent 50% 100%);
}

header.entete-maison .boite-recherche { position: relative; flex: 0 0 auto; margin-left: 4px; }
header.entete-maison .boite-recherche input {
  width: 170px; height: 36px; border-radius: 999px; padding: 0 16px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--bord);
  color: var(--texte); font-size: 14px; font-family: var(--corps);
  outline: none; transition: width .2s, border-color .2s;
}
header.entete-maison .boite-recherche input::placeholder { color: rgba(246, 241, 250, .5); }
header.entete-maison .boite-recherche input:focus { width: 240px; border-color: rgba(255, 255, 255, .36); }
header.entete-maison #recherche-resultats {
  position: absolute; top: 44px; right: 0; width: min(380px, 86vw); z-index: 60;
  background: #1b0f28; border: 1px solid var(--bord); border-radius: 16px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
header.entete-maison #recherche-resultats[hidden] { display: none !important; }
header.entete-maison #recherche-resultats a {
  display: block; padding: 11px 16px; text-decoration: none; color: var(--texte);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
header.entete-maison #recherche-resultats a:last-child { border-bottom: none; }
header.entete-maison #recherche-resultats a:hover,
header.entete-maison #recherche-resultats a.ici { background: rgba(255, 255, 255, .08); }
header.entete-maison #recherche-resultats a strong { display: block; font-size: 14.5px; font-weight: 700; }
header.entete-maison #recherche-resultats a span { display: block; font-size: 12px; color: var(--texte-doux); margin-top: 2px; }
header.entete-maison #recherche-resultats .rien { padding: 14px 16px; font-size: 13.5px; color: var(--texte-doux); }

/* Sur une fenêtre étroite, la recherche rétrécit encore d'un cran plutôt que
   de pousser le logo hors de l'écran. */
@media (max-width: 760px) {
  header.entete-maison .boite-recherche input { width: 110px; padding: 0 12px; }
  header.entete-maison .boite-recherche input:focus { width: 150px; }
  header.entete-maison .entree-membres { padding: 7px 10px; }
}
@media (max-width: 430px) {
  /* Le mot « Rechercher » ne tenait pas dans le champ à cette largeur et se
     coupait au milieu (mesuré à 430 pixels le 16/09/2026). On réduit la
     police plutôt que de raccourcir le mot : « Chercher » sonnerait comme un
     autre produit, et un champ vide sans mot ne dit plus à quoi il sert. */
  header.entete-maison .boite-recherche input { width: 108px; font-size: 12.5px; padding: 0 12px; }
  header.entete-maison .boite-recherche input:focus { width: 138px; }
}

/* LA BARRE EST COLLANTE, DONC ELLE RECOUVRE LA CIBLE D'UNE ANCRE. Sans ce
   décalage, cliquer « Nos secteurs » amène le titre juste SOUS la barre, et
   on croit que le lien a raté sa cible. */
html { scroll-padding-top: 74px; }

/* ---- « DISPONIBLE DEPUIS » SUR LES CARTES (16/09/2026) ----------------
   Demandé par HLB : « sur chaque carte, il y a un endroit qui dit depuis
   quand c'est disponible, et quand on se positionne dessus, ça affiche la
   date exacte ». Il a lui-même cité la signature du pied de page comme
   référence, donc la date réutilise sa classe `date-fondation` et son
   comportement, sans rien redéfinir ici.
   AUCUN SIGNE SOUS LA DATE, règle du 16/09/2026 : rien ne se souligne sur ce
   site, ni trait, ni pointillés. Ce qui réagit se découvre en passant
   dessus, il ne s'annonce pas. */
.depuis {
  margin: 8px 0 0; font-size: 12.5px; color: var(--texte-faible);
}
.depuis[hidden] { display: none !important; }
/* PIÈGE CSS DÉJÀ DOCUMENTÉ, ET IL SE SERAIT REPRODUIT ICI. L'attribut
   `hidden` n'est appliqué que par la feuille par défaut du navigateur, sur un
   sélecteur de nom de balise : n'importe quelle règle posant `display` le
   bat, et l'élément reste visible. Le champ brut de la date (« 2025-05-01 »)
   doit disparaître derrière sa version lisible, et cette règle explicite est
   le seul moyen de s'en assurer. */
.depuis span[hidden] { display: none !important; }
.depuis .date-fondation[hidden] { display: none !important; }

/* LE PIED DE PAGE D'UNE ENTITE (22/09/2026). La rangee de liens fixes est la
   meme sur toutes les pages de l'entite ; la ligne « Sur cette page » ne
   parait que sur la page d'un produit, avec ses rubriques. */
footer.pied .pied-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; order: 0; }
footer.pied .pied-sur-la-page {
  order: 1; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0;
  padding-top: 10px;
}
footer.pied .pied-sur-la-page .pied-titre { color: var(--texte-doux); font-weight: 700; margin-right: 18px; }