/* ===========================================================================
   PIED DE PAGE WEB IAV — structure de reference
   ===========================================================================

   Deux choses independantes, a reprendre ensemble sur tout site ou application
   web IAV :
     1. l'ANCRAGE du pied en bas de l'ecran (« sticky footer ») ;
     2. le CONTENU et le style du pied lui-meme, aligne sur le pied du courriel
        (voir ../mail/template-courriel.html).

   Lire `README.md` du meme dossier avant de l'adapter — il porte les pieges.

   Les couleurs viennent de `tokens.css`. Les trois teintes propres au pied
   restent DÉFINIES ici, en plus d'y être reprises : cette feuille doit tenir
   seule, collee dans un projet qui n'a pas encore importe les jetons. Et
   chaque `var()` de ce fichier porte sa valeur de repli, pour la meme raison.

   Le balisage attendu, dans cet ordre, en enfants directs de <body> :

     <body>
       <header>…</header>              (facultatif)
       <main class="contenu">…</main>
       <footer class="pied">
         <div class="pied-signature">…</div>
         <div class="pied-mentions">…</div>
       </footer>
     </body>

   Voir `pied-de-page.html` pour le contenu exact des deux lignes.
   =========================================================================== */

:root {
  /* LES TROIS TEINTES DU PIED DÉRIVENT DES JETONS, elles ne sont plus figées.
     ------------------------------------------------------------------------
     Corrigé le 23/08/2026, et c'est le défaut le plus coûteux qu'ait révélé la
     mise en place du mode sombre.

     Ces trois lignes portaient des valeurs FIXES. Comme cette feuille est
     chargée APRÈS `tokens.css` — elle doit l'être, voir le piège du `.pied a`
     plus bas —, ses valeurs fixes gagnaient sur celles des jetons. Résultat :
     le fond du pied restait CLAIR en mode sombre pendant que son texte, lui,
     basculait. Le pied sortait à 1,12:1 sur le nom de la société. Illisible, et
     invisible tant qu'on ne regardait pas la page en sombre.

     La forme `var(jeton, valeur)` règle les deux besoins d'un coup :
       • les jetons sont là          -> le pied suit la charte et les deux thèmes ;
       • la feuille est collée seule -> la valeur de repli tient, et le pied
                                        reste exactement ce qu'il était.

     Le rouge d'accent ne porte QUE « depuis 2008 », sur le web comme dans les
     courriels. Teinte MESURÉE et non choisie à l'œil : 4,94:1 en clair, 5,50:1
     en sombre. Un #E53E3E, envisagé un temps, ne donnait que 3,91:1 — plus vif
     à l'écran, et sous le seuil. Ne pas le « raviver ». */
  --iav-rouge-accent: var(--iav-accent-rouge, #DA081C);

  /* Le pied se détache du fond de page par une teinte à peine différente et un
     filet fin. Mêmes valeurs que le pied du courriel, en mode clair. */
  --iav-pied-fond: var(--iav-fond-bloc, #F7F9FC);
  --iav-pied-filet: var(--iav-bordure, #E3E9F0);
}

/* ---------------------------------------------------------------------------
   1. ANCRAGE — le pied en bas de l'ecran, quel que soit le contenu
   ---------------------------------------------------------------------------
   Sans ceci, sur une page a contenu court (un formulaire de connexion, une
   page d'erreur), le pied s'arrete ou le contenu s'arrete : au milieu de
   l'ecran, avec du vide dessous. Le defaut ne se voit pas sur les pages
   longues, ce qui le fait survivre longtemps.

   La page est une colonne haute d'au moins un ecran, le contenu prend ce qui
   reste, le pied est POUSSE en bas.

   POUSSE, ET JAMAIS POSITIONNE. Ni `position: fixed`, ni `position: absolute` :
   un pied positionne reste colle a la fenetre et passe PAR-DESSUS le contenu
   des pages longues, qui se lit alors sous le pied. C'est l'erreur classique,
   et elle ne se voit qu'une fois la page remplie.
   --------------------------------------------------------------------------- */

body {
  margin: 0;
  min-height: 100vh;
  /* `dvh` ENSUITE, et non a la place : sur mobile, `100vh` compte la barre
     d'adresse meme retractee, la page depasse d'autant et un filet de pied
     glisse sous le bord de l'ecran. `dvh` suit la hauteur reellement visible.
     Les navigateurs qui ne connaissent pas l'unite ignorent la ligne et
     gardent celle du dessus — d'ou l'ordre, qui n'est pas decoratif. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.contenu {
  /* `1 0 auto`, et non le raccourci `1` : `flex: 1` pose `flex-basis: 0`, et le
     contenu se laisse alors comprimer sous sa hauteur reelle sur une page
     longue. Le 0 du milieu (flex-shrink) l'interdit. */
  flex: 1 0 auto;
  width: 100%;
  /* Largeur de lecture et centrage horizontal. `margin: 0 auto` fonctionne
     bien sur un enfant de colonne flex : les marges auto sont sur l'axe
     transversal. A adapter au projet. */
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 12px 96px;
}

/* ---------------------------------------------------------------------------
   1 bis. ANCRAGE INDÉPENDANT DU NOM DE LA ZONE DE CONTENU (ajout du 30/09/2026)
   ---------------------------------------------------------------------------
   La règle ci-dessus ne pousse le pied que si la zone de contenu s'appelle
   EXACTEMENT « .contenu ». Chaque projet nomme la sienne à sa façon
   (« bib-contenu », « page », « principal »…) : la règle ne s'applique plus,
   sans la moindre erreur, et le pied remonte au milieu de l'écran sur une
   page courte. Signalé CINQ fois par David, projet après projet (BIBLIOTHECA
   le 30/09/2026 était le cinquième).

   Le pied se pousse désormais LUI-MÊME : dans la colonne flex de <body>, une
   marge haute automatique prend tout l'espace libre au-dessus de lui. Ça
   marche quel que soit le nom du contenu, avec ou sans en-tête, et ça ne
   change rien là où « .contenu » s'appliquait déjà (il n'y reste aucun
   espace libre à prendre). Toujours POUSSÉ, jamais positionné.

   Condition, et elle suffit : le pied est un ENFANT DIRECT de <body>. Un pied
   emballé dans un conteneur échappe à la colonne flex ; le banc de contrôle
   (README, « Vérifier avant de considérer une page terminée ») l'attrape. */
body > .pied {
  margin-top: auto;
}

/* Une page qui pose une barre d'actions FIXE en bas d'ecran doit le declarer,
   sinon cette barre recouvre le pied une fois la page defilee jusqu'en bas.
   Le pied lui rend alors la place qu'elle occupe.

   Declare par une classe sur <body>, plutot que devine par `body:has(...)` :
   `:has()` ferait le meme travail sans toucher au balisage, mais son absence
   sur un vieux navigateur se verrait par un pied recouvert — et un defaut
   silencieux est le pire des deux. Ajuster la valeur a la hauteur reelle. */
.avec-barre-actions .pied {
  padding-bottom: calc(24px + 66px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------------------
   2. LE PIED — meme signature que le courriel
   --------------------------------------------------------------------------- */

.pied {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--iav-pied-fond, #F7F9FC);
  border-top: 1px solid var(--iav-pied-filet, #E3E9F0);
  padding: 12px 12px 24px;
  /* Rappelee ici plutot qu'heritee : le pied doit rester juste meme colle dans
     un projet qui n'a pas encore pose sa typographie sur <body>. */
  font-family: var(--iav-police-texte, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif);
  font-size: 10px;
  line-height: 1.6;
  color: var(--iav-gris-pied, #5A6B7F);

  /* UN SEUL reglage pour l'espace entre les deux lignes. Le repartir entre un
     `gap` ici et un `padding-top` sur la seconde ligne rend l'ensemble
     impossible a regler : deux moities ne s'ajustent pas a l'oeil.

     9 et non 12 : le blanc que l'oeil voit n'est pas la valeur CSS. Chaque
     ligne porte son interligne, qui ajoute du vide en haut ET en bas ; entre
     les deux lignes ces deux moities s'additionnent, au-dessus de la premiere
     il n'y en a qu'une. Le `gap` vaut donc MOINS que le remplissage du haut
     pour un blanc egal. Verifier sur les pixels d'une capture, pas sur la
     feuille : ~15 px entre les lignes pour ~16 px au-dessus. */
  gap: 9px;
}

/* LE PIEGE A CONNAITRE — voir README.md.
   Ces deux regles doivent vivre dans la feuille chargee EN DERNIER. Une
   feuille de composants chargee apres, qui poserait un innocent
   `.pied a { color: inherit }`, gagnerait a specificite egale et rendrait
   tous les liens du pied gris sans qu'aucune erreur ne soit signalee. */
.pied a { color: var(--iav-bleu-lien, #2B6CB0); text-decoration: none; }
/* Un lien de pied reste un lien : il se souligne des qu'on le vise. */
.pied a:hover, .pied a:focus { text-decoration: underline; }

/* Ligne 1 — la signature de maison. Legerement plus grande que la seconde :
   c'est elle qu'on lit. */
.pied-signature { font-size: 11px; }

/* ---------------------------------------------------------------------------
   LES PARTIES ET LEURS SEPARATEURS — ajoute le 24/08/2026
   ---------------------------------------------------------------------------
   Le separateur qui precede une partie est DESSINE ICI, a partir de son
   attribut `data-sep`. Il n'est jamais ecrit dans le balisage.

   C'est ce qui permet de vider une valeur sans reliquat : la partie retiree
   emporte son separateur avec elle. Avant, vider `signature` laissait
   « IAV S.a r.l. - , depuis 2008 » — un tiret orphelin et une virgule en l'air,
   parce que la ponctuation vivait dans le texte.

   `.pied-part + .pied-part` et non `.pied-part:not(:first-child)` : le
   selecteur frere ne regarde que ce qui est REELLEMENT dans le document. Une
   partie retiree n'y est plus, donc la suivante devient bien la premiere et ne
   porte aucun separateur.

   `white-space: pre` sur le separateur : sans lui, les espaces de « - » sont
   avales et les mots se collent au tiret. */
.pied-part + .pied-part::before {
  content: attr(data-sep);
  white-space: pre;
  /* Le separateur est une liaison, pas un mot : il garde la couleur du texte
     courant meme quand la partie qu'il precede en a une autre — sans quoi le
     tiret devant « depuis 2008 » virerait au rouge d'accent. */
  color: var(--iav-gris-pied, #5A6B7F);
  font-weight: 400;
}

/* Filet de secours, et il ne rattrape que le cas le plus simple : un module qui
   laisse dans le document un span vide au lieu de le retirer. Il ne couvre PAS
   une partie contenant un lien — un `<span>` portant un `<a>` vide n'est pas
   `:empty`. Retirer du document reste la bonne facon. */
.pied-part:empty { display: none; }

/* Le logo de signature. Hauteur PILOTEE PAR UN JETON et alignee sur la ligne
   de texte : une image plus haute que l'interligne ferait sauter la ligne du
   pied d'un pixel a chaque fois qu'elle apparait. `vertical-align: middle`
   plutot que baseline : le logo n'a pas de jambage, la baseline le percherait
   trop haut. */
.pied-logo-signature img {
  height: var(--iav-pied-logo-hauteur, 14px);
  width: auto;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   LE LOGO DE SIGNATURE A DEUX VARIANTES — 25/08/2026
   ---------------------------------------------------------------------------
   Il n'en avait qu'une, en tracé foncé. Lisible sur le pied clair, elle
   disparaît presque entièrement sur le pied sombre : le dessin est un contour,
   et un contour noir sur #131A22 ne se voit pas. Le logo de SOCIÉTÉ, lui, avait
   ses deux variantes depuis toujours.

   LES TROIS ÉTATS DU THÈME, comme partout dans le référentiel : la valeur par
   défaut sur `:root` nu, la préférence système sous `prefers-color-scheme` et
   gardée par `:not([data-theme="light"])`, puis le choix explicite qui gagne
   dans les deux sens. Une bascule qui n'en couvrirait que deux laisserait le
   mauvais logo dans le troisième cas.

   EN CSS ET NON EN JAVASCRIPT : le pied doit rester juste sur une page qui
   n'exécute rien. C'est un fragment recopiable, pas un composant. */

.pied-logo-clair { display: none; }
.pied-logo-sombre { display: inline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .pied-logo-clair { display: inline; }
  :root:not([data-theme="clair"]) .pied-logo-sombre { display: none; }
}

:root[data-theme="sombre"] .pied-logo-clair { display: inline; }
:root[data-theme="sombre"] .pied-logo-sombre { display: none; }
:root[data-theme="clair"] .pied-logo-clair { display: none; }
:root[data-theme="clair"] .pied-logo-sombre { display: inline; }

.pied-societe { color: var(--iav-pied-fort, #1B2733); font-weight: 700; }
.depuis { color: var(--iav-rouge-accent, #DA081C); font-weight: 700; }

/* Conserve : un module qui aurait deja colle l'ancien balisage, avec son
   `<strong>` a l'interieur, garde le meme rendu. La regle ne coute rien et
   evite une regression silencieuse chez qui a copie avant le 24/08/2026. */
.pied-signature strong { color: var(--iav-pied-fort, #1B2733); }

/* Ligne 2 — la mention legale et le nom du projet. Discrete par la TAILLE et
   le POIDS, jamais par un gris delave : le #8A97A6 de la sous-ligne du
   courriel ne donne que 2,82:1 sur ce fond, tres en dessous des 4,5:1, et ici
   cette ligne porte l'annee et le nom du projet. Elle garde donc la couleur du
   reste du pied (5,18:1) et se distingue par sa taille seule. */
.pied-mentions { /* pas de couleur propre : c'est volontaire */ }