/* =====================================================================
   frankefeedcut.art — base.css
   Feuille partagée par toutes les pages, chargée depuis header.php.

   Contenu :
     1. Variables (:root) — mode sombre, le mode de référence
     2. Réinitialisation et typographie de base
     3. Liens
     4. Transition de page (view-transition)
     5. Liens lexique (magenta)
     6. Modale d'inscription au recueil
     7. Pied de page

   Règle de nommage : une variable porte le nom de son RÔLE, jamais
   celui de sa couleur ni de la page qui l'utilise. C'est ce qui permet
   au mode clair de fonctionner sans réécrire une seule règle.

   Variables « -rgb » : canaux séparés, pour les valeurs translucides.
   Écrire  rgba(var(--or-rgb), .5)  au lieu de  rgba(227,192,86,.5).

   Ombres : toute ombre portée s'écrit
       rgba(var(--ombre-rgb), calc(.55 * var(--ombre-k)))
   --ombre-k vaut 1 en sombre ; le mode clair l'abaisse pour adoucir
   toutes les ombres d'un coup.
   ===================================================================== */

/* ---------- 1. Variables — mode sombre (référence) ---------- */
:root{
  /* fonds */
  --fond-haut: #010a16;                 /* dégradé, extrémité haute */
  --fond-bas: #0b0b0b;                  /* dégradé, extrémité basse */
  --fond-haut-rgb: 1,10,22;
  --panneau: rgba(255,255,255,0.03);    /* léger relief : cartes du carnet, sommaire */
  --panneau-plein: rgba(0,0,0,0.72);    /* grands panneaux de contenu (aide, méthode, bio, lexique…) */
  --panneau-opaque: #0b0b0b;            /* fond solide : infobulles, popovers */
  --panneau-eleve: #1e1e1e;             /* étiquette posée sur un panneau */
  --verre: rgba(255,255,255,0.06);      /* surfaces translucides */
  --carte-image: #000000;               /* fond des cartes qui portent une miniature */
  --carte-image-rgb: 0,0,0;
  --carte-image-plein: #0c1018;         /* dégradé de raccord miniature → carte */
  --carte-image-plein-rgb: 12,16,24;
  --modale: rgba(8,10,16,0.96);         /* fond de la modale */
  --modale-voile: rgba(1,10,22,0.82);   /* voile derrière la modale */
  --champ-liste: #12141c;               /* options d'un <select> */
  --pied-rgb: 10,10,12;                 /* dégradé du pied de page */
  --pied-a1: 0.52;                      /* ses trois opacités, du haut vers le bas */
  --pied-a2: 0.72;
  --pied-a3: 0.86;

  /* surfaces translucides qui s'inversent avec le thème */
  --surface-rgb: 255,255,255;           /* reflets, filets, fonds légers posés SUR la page */
  --voile-rgb: 0,0,0;                   /* voiles qui fondent une image DANS la page */

  /* constantes — identiques dans les deux modes ; réservées aux
     éléments posés sur un média (vidéo, photo) ou sur un aplat fixe */
  --noir-media: #000000;                /* letterbox derrière une vidéo, un iframe */
  --noir-rgb: 0,0,0;
  --blanc-rgb: 255,255,255;
  --reflet-rgb: 255,255,255;            /* reflets internes (inset) : un reflet est toujours clair */

  /* images qui changent avec le thème */
  --affiche-sombre: inline;             /* display de la variante sombre d'une image */
  --affiche-clair: none;                /* display de la variante claire */
  /* Bascule de thème : les deux icônes restent visibles. Celle du mode
     en cours s'éteint, celle du mode où l'on irait en cliquant s'allume. */
  --icone-soleil: 1;                    /* en sombre, le soleil est la destination */
  --icone-lune: 0.3;
  --media-inversion: invert(0);         /* filter appliqué à la signature vidéo (blanche sur noir) */
  --media-fusion: screen;               /* mix-blend-mode de cette même signature */
  /* La grande signature animée de l'accueil est une vidéo H.264, donc un
     rectangle opaque : sa transparence n'est qu'une illusion de fond noir
     sur fond noir. En mode clair, l'illusion ne tient pas (Safari ignore le
     mix-blend-mode sur cette vidéo).

     Depuis le 14 septembre 2026, elle est masquée dans les DEUX thèmes :
     l'accueil porte désormais une photographie de fond, et l'illusion ne
     tiendrait pas davantage sur une ruelle que sur du papier clair.
     Remettre « block » ici la ramène en mode sombre. */
  --media-signature: none;

  /* texte */
  --texte: #f2f2f2;                     /* texte principal */
  --texte-rgb: 242,242,242;
  --texte-attenue: #cccccc;             /* légendes, métadonnées, pied de page */
  --texte-faible: #888888;              /* mentions discrètes */
  --texte-fort: #ffffff;                /* survols, titres mis en avant */
  --texte-chaud: #fff5d7;               /* <strong> dans les textes longs */
  --texte-chaud-2: #ffdcb2;             /* <em> dans les textes longs */
  --texte-sur-or: #1c1c1c;              /* texte posé sur un aplat d'or */

  /* Texte atténué écrit en translucide : color: rgba(var(--encre-rgb), calc(A * var(--encre-k)))
     Sur fond sombre, une opacité de 42 % reste lisible ; sur fond clair, non —
     aucune encre, même noire, n'y atteint le seuil. Le mode clair remonte donc
     les opacités (--encre-k) au lieu de changer chaque règle : la hiérarchie se
     resserre, ce qui est normal, le contraste montant plus vite sur du clair. */
  --encre-rgb: 242,242,242;
  --encre-k: 1;
  --encre-or-rgb: 227,192,86;           /* même chose pour l'or atténué */
  --encre-or-k: 1;
  --opacite-attenuee: 0.7;              /* sous-titres et légendes en retrait */
  --opacite-discrete: 0.85;             /* petits liens de service */

  /* traits */
  --trait: rgba(255,255,255,0.12);      /* filets et bordures */
  --ombre-rgb: 0,0,0;
  --ombre-k: 1;                         /* facteur d'adoucissement des ombres */
  --halo-k: 1;                          /* facteur des halos décoratifs (radial-gradient) */
  --ombre: 0 16px 50px rgba(var(--ombre-rgb), calc(0.35 * var(--ombre-k)));

  /* identité */
  --or: #e3c056;                        /* l'or du site : titres, liens, accents */
  /* Deux accents tires des images d'accueil, poses ici pour que toutes les
     pages puissent s'en servir. --braise : l'orange de la ruelle, eclairci.
     --vertbleu : les eclats froids du portrait de face. Leurs contreparties
     en mode clair sont plus sombres et moins saturees, sans quoi elles
     disparaitraient sur le fond ivoire. */
  --braise: #ff6a2a;
  --vertbleu: #8ec4bb;

  /* --violet : le quatrieme accent, ajoute le 19 septembre 2026.
     Contrairement aux trois autres, il ne vient PAS d'une image — la photo
     de la ruelle ne contient aucun pixel entre 240 et 320 degres. Il vient
     de la roue : braise 18, or 45 et vert-bleu 170 laissent un vide de 208
     degres dont le milieu tombe a 274. C'est un choix chromatique assume,
     pas une extraction. Contraste 7,8 sur le fond sombre. */
  --violet: #b99cd3;

  /* Le papier decoupe. Contrairement a tout le reste, ses couleurs ne
     suivent pas le theme : un papier journal est un objet physique, il ne
     devient pas noir parce que la piece s'assombrit. Memes valeurs que les
     papiers de l'animation d'accueil. */
  --papier-1: #f3f0e7;
  --papier-2: #efe9db;
  --papier-encre: rgba(0,0,0,.86);
  --or-rgb: 227,192,86;
  --surligneur-rgb: 227,192,86;        /* le trait de surligneur : l'or, qui éclaire le fond sombre */
  --surligneur-a: 0.30;
  --surligneur-fusion: normal;         /* sur fond sombre, le trait éclaire : un simple lavis suffit */
  --or-eclat: #ffd95a;                  /* doré vif, décoratif — jamais du texte courant en clair */
  --or-eclat-rgb: 255,217,90;
  --or-texte: var(--or-eclat);          /* or qui porte du texte : vif en sombre, redevient --or en clair */
  --or-fond: var(--or-eclat);           /* or en aplat sous un texte foncé (bouton Ko-fi) */
  --magenta: #c9468d;                   /* extraits roses de bio.php ; les
                                           liens de lexique n'en dependent
                                           plus depuis le 19 sept. 2026 */
  --magenta-rgb: 201,70,141;
  --magenta-clair: #e06aa6;             /* survol des liens lexique */
  --poudre: #a9c3d6;                    /* bleu poudre, accents froids */
  --poudre-rgb: 169,195,214;
  --bleu: #4da3ff;                      /* liens secondaires, survols du pied de page */
  --bleu-rgb: 77,163,255;
  --rose: #e08a8a;                      /* erreurs, champs requis */
  --rose-rgb: 224,138,138;
  --vert: #8fd19e;                      /* succès */
  --brique: #c74027;                    /* « lire la suite » des vidéopoèmes */

  /* liens — chaque page peut redéfinir --lien dans son :root */
  --lien: var(--or);
  --lien-survol: var(--texte-fort);
}


/* ---------- 1b. Variables — mode clair ----------
   Déclinaison de l'identité, pas un remplacement : l'or et le magenta
   gardent leur teinte et leur saturation, seule la luminosité descend.
   Le thème est posé par header.php sur <html> : data-theme="clair" ou
   "sombre". Sans JavaScript, on suit la préférence du système.
   Les deux blocs ci-dessous doivent rester identiques. */
:root[data-theme="clair"]{
  /* fonds — blanc cassé chaud, la lumière vient d'en haut */
  --fond-haut: #faf8f4;
  --fond-bas: #efece5;
  --fond-haut-rgb: 250,248,244;
  --panneau: #fdfcfa;
  --panneau-plein: #fdfcfa;
  --panneau-opaque: #fdfcfa;
  --panneau-eleve: #ffffff;
  --verre: rgba(20,22,26,0.05);
  --carte-image: #fdfcfa;
  --carte-image-rgb: 253,252,250;
  --carte-image-plein: #fdfcfa;
  --carte-image-plein-rgb: 253,252,250;
  --modale: rgba(253,252,250,0.98);
  --modale-voile: rgba(42,45,49,0.45);
  --champ-liste: #fdfcfa;
  --pied-rgb: 250,248,244;
  --pied-a1: 0.64;                      /* verre depoli, comme en sombre. Le flou de
                                           12 px fait l'essentiel du travail : il
                                           brouille le texte qui passe dessous, et
                                           l'opacite n'a plus a tout porter.
                                           Valeurs d'avant, plus opaques : .86 / .93 / .97 */
  --pied-a2: 0.80;
  --pied-a3: 0.90;

  --surface-rgb: 20,22,26;              /* les surfaces claires translucides deviennent sombres */
  --voile-rgb: 253,252,250;             /* les voiles sombres deviennent clairs */

  --affiche-sombre: none;
  --affiche-clair: inline;
  --icone-soleil: 0.45;                 /* sur fond clair, 0,3 efface presque tout :
                                           0,45 donne la même pâleur perçue qu'en sombre */
  --icone-lune: 1;
  --media-inversion: invert(1);
  --media-fusion: multiply;
  --media-signature: none;       /* voir la note dans :root */

  /* texte — contrastes mesurés sur #efece5, le bas du dégradé */
  --texte: #2a2d31;                     /* 11,72 */
  --texte-rgb: 42,45,49;
  --texte-attenue: #585d63;             /* 5,63 */
  --texte-faible: #656a6f;              /* 4,63 — voir la note de livraison : le cahier
                                           prévoyait #7e848a (3,20), réservé au non-texte,
                                           mais le carnet s'en sert pour des légendes */
  --texte-fort: #111111;
  --texte-chaud: #7a5b00;               /* 5,36 */
  --texte-chaud-2: #944f00;             /* 5,27 */
  --texte-sur-or: #1c1c1c;              /* 9,69 sur --or-fond */

  --encre-rgb: 42,45,49;
  --encre-k: 2;                         /* 0,34 → 0,68 (4,59) ; au-delà de 0,5 : opaque */
  --encre-or-rgb: 125,99,20;
  --encre-or-k: 1.8;
  --opacite-attenuee: 1;                /* l'opacité CSS s'ajoute au contraste : on la retire */
  --opacite-discrete: 1;

  /* traits et ombres — fortement adoucies */
  --trait: rgba(20,22,26,0.12);
  --ombre-rgb: 45,38,25;
  --ombre-k: 0.35;
  --halo-k: 0.4;                        /* les halos colorés teintent trop un fond clair */
  --ombre: 0 16px 50px rgba(var(--ombre-rgb), calc(0.35 * var(--ombre-k)));

  /* identité — même teinte, même saturation, luminosité abaissée */
  --or: #7d6314;                        /* 4,85 — laiton ancien */
  --braise: #b8380f;
  --vertbleu: #3c7a70;
  --violet: #642f93;                    /* 8,00 */
  --or-rgb: 125,99,20;
  --surligneur-rgb: 246,206,60;         /* en clair, un vrai jaune de surligneur : l'or du site est
                                           un laiton foncé, il salirait le papier au lieu de le marquer */
  --surligneur-a: 0.75;
  --surligneur-fusion: multiply;        /* sur papier, un surligneur MULTIPLIE : il teinte le blanc
                                           sans éclaircir l'encre. Un lavis opaque, lui, délaverait
                                           le texte — mesuré à 3,59 de contraste, sous le seuil. */
  --or-eclat: #a17c00;                  /* 3,30 — décoratif seulement */
  --or-eclat-rgb: 161,124,0;
  --or-texte: var(--or);                /* l'or vif ne porte plus de texte */
  --or-fond: #e3c056;                   /* aplat d'or sous texte foncé */
  --magenta: #b23378;                   /* 4,89 */
  --magenta-rgb: 178,51,120;
  --magenta-clair: #c42978;             /* 4,52 */
  --poudre: #416a89;                    /* 4,88 */
  --poudre-rgb: 65,106,137;
  --bleu: #005fc7;                      /* 5,14 */
  --bleu-rgb: 0,95,199;
  --rose: #b83030;                      /* 5,08 */
  --rose-rgb: 184,48,48;
  --vert: #2e6f3d;                      /* 5,15 */
  --brique: #b03820;                    /* 5,19 */

  --lien: var(--or);
  --lien-survol: var(--texte-fort);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="sombre"]){
  /* fonds — blanc cassé chaud, la lumière vient d'en haut */
  --fond-haut: #faf8f4;
  --fond-bas: #efece5;
  --fond-haut-rgb: 250,248,244;
  --panneau: #fdfcfa;
  --panneau-plein: #fdfcfa;
  --panneau-opaque: #fdfcfa;
  --panneau-eleve: #ffffff;
  --verre: rgba(20,22,26,0.05);
  --carte-image: #fdfcfa;
  --carte-image-rgb: 253,252,250;
  --carte-image-plein: #fdfcfa;
  --carte-image-plein-rgb: 253,252,250;
  --modale: rgba(253,252,250,0.98);
  --modale-voile: rgba(42,45,49,0.45);
  --champ-liste: #fdfcfa;
  --pied-rgb: 250,248,244;
  --pied-a1: 0.64;                      /* verre depoli, comme en sombre. Le flou de
                                           12 px fait l'essentiel du travail : il
                                           brouille le texte qui passe dessous, et
                                           l'opacite n'a plus a tout porter.
                                           Valeurs d'avant, plus opaques : .86 / .93 / .97 */
  --pied-a2: 0.80;
  --pied-a3: 0.90;

  --surface-rgb: 20,22,26;              /* les surfaces claires translucides deviennent sombres */
  --voile-rgb: 253,252,250;             /* les voiles sombres deviennent clairs */

  --affiche-sombre: none;
  --affiche-clair: inline;
  --icone-soleil: 0.45;                 /* sur fond clair, 0,3 efface presque tout :
                                           0,45 donne la même pâleur perçue qu'en sombre */
  --icone-lune: 1;
  --media-inversion: invert(1);
  --media-fusion: multiply;
  --media-signature: none;       /* voir la note dans :root */

  /* texte — contrastes mesurés sur #efece5, le bas du dégradé */
  --texte: #2a2d31;                     /* 11,72 */
  --texte-rgb: 42,45,49;
  --texte-attenue: #585d63;             /* 5,63 */
  --texte-faible: #656a6f;              /* 4,63 — voir la note de livraison : le cahier
                                           prévoyait #7e848a (3,20), réservé au non-texte,
                                           mais le carnet s'en sert pour des légendes */
  --texte-fort: #111111;
  --texte-chaud: #7a5b00;               /* 5,36 */
  --texte-chaud-2: #944f00;             /* 5,27 */
  --texte-sur-or: #1c1c1c;              /* 9,69 sur --or-fond */

  --encre-rgb: 42,45,49;
  --encre-k: 2;                         /* 0,34 → 0,68 (4,59) ; au-delà de 0,5 : opaque */
  --encre-or-rgb: 125,99,20;
  --encre-or-k: 1.8;
  --opacite-attenuee: 1;                /* l'opacité CSS s'ajoute au contraste : on la retire */
  --opacite-discrete: 1;

  /* traits et ombres — fortement adoucies */
  --trait: rgba(20,22,26,0.12);
  --ombre-rgb: 45,38,25;
  --ombre-k: 0.35;
  --halo-k: 0.4;                        /* les halos colorés teintent trop un fond clair */
  --ombre: 0 16px 50px rgba(var(--ombre-rgb), calc(0.35 * var(--ombre-k)));

  /* identité — même teinte, même saturation, luminosité abaissée */
  --or: #7d6314;                        /* 4,85 — laiton ancien */
  --braise: #b8380f;
  --vertbleu: #3c7a70;
  --violet: #642f93;                    /* 8,00 */
  --or-rgb: 125,99,20;
  --surligneur-rgb: 246,206,60;         /* en clair, un vrai jaune de surligneur : l'or du site est
                                           un laiton foncé, il salirait le papier au lieu de le marquer */
  --surligneur-a: 0.75;
  --surligneur-fusion: multiply;        /* sur papier, un surligneur MULTIPLIE : il teinte le blanc
                                           sans éclaircir l'encre. Un lavis opaque, lui, délaverait
                                           le texte — mesuré à 3,59 de contraste, sous le seuil. */
  --or-eclat: #a17c00;                  /* 3,30 — décoratif seulement */
  --or-eclat-rgb: 161,124,0;
  --or-texte: var(--or);                /* l'or vif ne porte plus de texte */
  --or-fond: #e3c056;                   /* aplat d'or sous texte foncé */
  --magenta: #b23378;                   /* 4,89 */
  --magenta-rgb: 178,51,120;
  --magenta-clair: #c42978;             /* 4,52 */
  --poudre: #416a89;                    /* 4,88 */
  --poudre-rgb: 65,106,137;
  --bleu: #005fc7;                      /* 5,14 */
  --bleu-rgb: 0,95,199;
  --rose: #b83030;                      /* 5,08 */
  --rose-rgb: 184,48,48;
  --vert: #2e6f3d;                      /* 5,15 */
  --brique: #b03820;                    /* 5,19 */

  --lien: var(--or);
  --lien-survol: var(--texte-fort);
  }
}

/* Transition douce lors d'une bascule manuelle (classe posée 400 ms par
   footer.php). Jamais pour qui demande moins d'animations. */
@media (prefers-reduced-motion: no-preference){
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after{
    transition: background-color .35s ease, color .35s ease,
                border-color .35s ease, box-shadow .35s ease !important;
  }
}

/* ---------- 2. Réinitialisation et base ---------- */
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

body{
  font-family: 'Alegreya Sans', sans-serif;
  background: linear-gradient(to bottom, var(--fond-haut), var(--fond-bas));
  color: var(--texte);
}

/* ---------- 3. Liens ---------- */
a{ color: var(--lien); text-decoration: none; }
a:hover{ color: var(--lien-survol); text-decoration: underline; }

/* ---------- 4. Transition de page ---------- */
/* Glissement latéral façon tourne-page + mise au point : la page sortante
   glisse vers la gauche en s'estompant, la nouvelle entre par la droite,
   d'abord floue puis nette. CSS pur, repli silencieux si non supporté. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }

  ::view-transition-old(root){
    animation: fc-page-out .38s cubic-bezier(.4,0,.6,1) both;
  }
  ::view-transition-new(root){
    animation: fc-page-in .5s cubic-bezier(.16,1,.3,1) both,
               fc-page-focus 1.25s ease both;
  }
  @keyframes fc-page-out{
    from{ opacity:1; transform:translateX(0); }
    to  { opacity:0; transform:translateX(-48px); }
  }
  @keyframes fc-page-in{
    from{ opacity:0; transform:translateX(48px); }
    to  { opacity:1; transform:translateX(0); }
  }
  @keyframes fc-page-focus{
    from{ filter: blur(16px); }
    to  { filter: blur(0); }
  }
}

/* ---------- 5. Liens lexique ---------- */
/* Refonte du 19 septembre 2026. Ces liens etaient en magenta ; le probleme
   n'etait pas la teinte mais la DENSITE. methode.php en compte 34, soit un
   toutes les deux lignes : a cette frequence, n'importe quelle couleur
   saturee cesse d'etre un repere et devient du bruit, et l'oeil compte les
   taches au lieu de lire la phrase.

   Le mot garde donc la couleur du texte courant, avec un fin pointille
   dessous — la convention savante pour un terme de glossaire. La couleur
   reste alors disponible pour ce qu'elle sait faire : les sur-titres, et
   les vrais liens de navigation en or. L'oeil distingue enfin « ouvrir une
   definition » de « aller ailleurs ».

   Le survol allume la braise : discret a la lecture, vivant a
   l'exploration. */
a.lexique-link{
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--encre-rgb), calc(0.42 * var(--encre-k)));
  text-underline-offset: .24em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
a.lexique-link:hover{
  color: var(--braise);
  text-decoration-color: var(--braise);
}
a.lexique-link:focus-visible{
  outline: 2px solid var(--braise);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
  a.lexique-link{ transition: none; }
}

/* ---------- 6. Modale d'inscription au recueil ---------- */
.recueil-cta-btn{
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--or-rgb), 0.45);
  background: rgba(var(--or-rgb), 0.10);
  color: var(--or-texte);
  font-family: 'Special Elite', serif;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.recueil-cta-btn:hover{
  background: rgba(var(--or-rgb), 0.18);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(var(--or-rgb), 0.30);
}

.recueil-modal-overlay{
  position: fixed;
  inset: 0;
  background: var(--modale-voile);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 200;
}
.recueil-modal-overlay[hidden]{ display: none; }

.recueil-modal{
  position: relative;
  width: min(92vw, 480px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--modale);
  border: 1px solid rgba(var(--or-rgb), 0.30);
  border-radius: 18px;
  padding: 2.2rem 1.9rem 1.9rem;
  box-shadow: 0 20px 60px rgba(var(--ombre-rgb), calc(0.6 * var(--ombre-k)));
}
.recueil-modal-close{
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: rgba(var(--encre-rgb), calc(0.6 * var(--encre-k)));
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.3rem;
}
.recueil-modal-close:hover{ color: var(--texte-fort); }

.recueil-modal h2{
  margin: 0 0 0.7rem;
  font-family: 'Special Elite', serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--or);
  letter-spacing: 0.02em;
  padding-right: 1.6rem;
}
.recueil-modal-lead{
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
  color: rgba(var(--encre-rgb), calc(0.75 * var(--encre-k)));
  line-height: 1.6;
  font-weight: 300;
}

.recueil-tabs{
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.3rem;
}
.recueil-tab{
  flex: 1;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--surface-rgb), 0.14);
  background: rgba(var(--surface-rgb), 0.03);
  color: rgba(var(--encre-rgb), calc(0.6 * var(--encre-k)));
  font-family: 'Special Elite', serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.recueil-tab:hover{ color: rgba(var(--encre-rgb), calc(0.85 * var(--encre-k))); }
.recueil-tab.is-active{
  border-color: rgba(var(--encre-or-rgb), calc(0.5 * var(--encre-or-k)));
  background: rgba(var(--or-rgb), 0.10);
  color: var(--or-texte);
}

.recueil-modal form{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.recueil-modal label{
  font-size: 0.82rem;
  color: rgba(var(--encre-rgb), calc(0.7 * var(--encre-k)));
  margin-top: 0.7rem;
}

.field-badge{
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.08em 0.55em;
  border-radius: 999px;
  font-size: 0.62rem;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.6;
}
.field-badge--required{
  background: rgba(var(--rose-rgb), 0.16);
  color: var(--rose);
  border: 1px solid rgba(var(--rose-rgb), 0.45);
}
.field-badge--optional{
  background: rgba(var(--surface-rgb), 0.05);
  color: rgba(var(--encre-rgb), calc(0.5 * var(--encre-k)));
  border: 1px solid rgba(var(--surface-rgb), 0.14);
}

.recueil-conditional{
  margin-top: 0.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(var(--or-rgb), 0.25);
}
.recueil-conditional[hidden]{ display: none; }

.recueil-modal input[type="email"],
.recueil-modal input[type="text"],
.recueil-modal select,
.recueil-modal textarea{
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--surface-rgb), 0.15);
  background: rgba(var(--surface-rgb), 0.04);
  color: var(--texte);
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 0.95rem;
  resize: vertical;
}
.recueil-modal select{
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--texte-rgb), 0.55) 50%),
                    linear-gradient(135deg, rgba(var(--texte-rgb), 0.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.recueil-modal select option{
  background: var(--champ-liste);
  color: var(--texte);
}

.recueil-modal-row{
  display: flex;
  gap: 0.6rem;
}
.recueil-modal-row > div{
  flex: 1;
  min-width: 0;
}
@media (max-width: 480px){
  .recueil-modal-row{
    flex-direction: column;
    gap: 0.35rem;
  }
}

.recueil-modal input:focus,
.recueil-modal select:focus,
.recueil-modal textarea:focus{
  outline: 2px solid rgba(var(--or-rgb), 0.5);
  outline-offset: 1px;
}

.recueil-honeypot{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.recueil-modal button[type="submit"]{
  margin-top: 1.2rem;
  width: 100%;
  text-align: center;
}
.recueil-modal button[type="submit"]:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.recueil-modal-status{
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  text-align: center;
  min-height: 1.2em;
}
.recueil-modal-status[data-state="success"]{ color: var(--vert); }
.recueil-modal-status[data-state="error"]{ color: var(--rose); }

/* ---------- 7. Pied de page ---------- */
.site-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Deux blocs insecables se font face : le menu a gauche, les icones a
     droite. « space-between » les ecarte tant qu'il reste de la place, et
     les laisse se toucher des qu'il n'y en a plus : c'est ainsi que « Bio »
     venait heurter la tasse sur un ecran de portable.

     Trois garde-fous, du plus doux au plus ferme. Un ecart minimal garanti
     entre les deux blocs, quoi qu'il arrive. Des marges laterales fluides,
     qui rendent de la place quand l'ecran retrecit. Et plus bas, deux
     paliers ou le texte du menu maigrit avant que quoi que ce soit ne se
     cogne. L'ordre compte : on cede de l'espace, puis de la taille, puis
     seulement on replie.                                                  */
  gap: clamp(18px, 2.6vw, 44px);
  padding: 14px clamp(18px, 2.8vw, 42px);

  background: linear-gradient(
    180deg,
    rgba(var(--pied-rgb), var(--pied-a1)) 0%,
    rgba(var(--pied-rgb), var(--pied-a2)) 55%,
    rgba(var(--pied-rgb), var(--pied-a3)) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(10px);

  color: var(--texte-attenue);

  font-family: "Special Elite", serif;
  font-size: 14px;

  border-top: 1px solid rgba(var(--surface-rgb), 0.08);
  box-shadow: 0 -2px 10px rgba(var(--ombre-rgb), calc(0.45 * var(--ombre-k)));
  z-index: 50;
}

/* Barre de progression de lecture : combien il reste avant le footer.
   Posee sur le bord superieur du footer (deja position:fixed, donc deja
   le bloc de positionnement de cet enfant absolu) plutot qu'en haut de
   l'ecran -- c'est litteralement l'endroit ou le contenu rencontre le
   footer. Largeur pilotee par JS (voir footer.php) ; le CSS ne fait que
   la poser et l'habiller. */
.footer-barre-lecture{
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--braise);
  z-index: 51;
  transition: width 0.1s linear;
}

.footer-left{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.footer-signature{
  height: 48px;
  width: auto;
  opacity: 0.9;
}
/* deux fichiers, un par thème (la signature blanche disparaît sur fond clair) */
.footer-signature--sombre{ display: var(--affiche-sombre); }
.footer-signature--clair{ display: var(--affiche-clair); }

.footer-portrait{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-left a:hover .footer-portrait{
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(var(--or-rgb), 0.45);
}

/* La navigation du pied de page est faite de trois grappes séparées par
   un filet — l'action, la théorie, l'œuvre. Tout reste à plat : aucun
   déroulant, chaque page à un seul clic. Voir footer.php pour le détail
   du regroupement. */
/* Le bouton de menu n'apparaît que sur téléphone (voir plus bas). */
.footer-menu-btn{
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--or-rgb), 0.45);
  background: rgba(var(--or-rgb), 0.10);
  color: var(--or);
  font-family: "Special Elite", serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.footer-menu-btn:hover{ background: rgba(var(--or-rgb), 0.18); }
.footer-menu-btn:focus-visible{
  outline: 2px solid rgba(var(--or-rgb), 0.75);
  outline-offset: 3px;
}
.footer-menu-btn__fermer{ display: none; }

.footer-nav{
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-groupe{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Le filet entre deux grappes. Même trait que celui du bloc de droite,
   simplement un peu plus court : il sépare du texte, pas des icônes. */
.footer-separator--nav{
  height: 14px;
  margin: 0 2px;
}

.footer-nav a{
  color: var(--texte-attenue);
  text-decoration: none;
  /* réglages du soulignement de repli : il ne sert que lorsque le trait de
     surligneur ne peut pas être peint (voir plus bas) */
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color 0.25s ease;
}

.footer-nav a:hover,
.footer-nav a[aria-current="page"]{
  color: var(--or);
}

/* ── Marquage de la section courante ──────────────────────────────────
   La page ou se trouve le visiteur porte un papier decoupe, le meme que
   ceux de l'animation d'accueil : papier journal creme, encre noire,
   ombre portee, une inclinaison legere.

   Il remplace le coup de surligneur, abandonne le 19 septembre 2026. Le
   trait etait trace par une machine qui imitait une main, et cette
   imitation se voyait toujours. Un papier decoupe ne pretend rien : c'est
   un objet, et c'est deja le vocabulaire du site.

   Six inclinaisons, distribuees en boucle par footer.php via
   data-surlignement — une entree ajoutee au menu recoit donc la suivante
   sans qu'on touche a cette feuille. L'attribut garde son nom pour ne pas
   casser footer.php ; seul son effet a change.

   Le papier est peint DERRIERE le texte, en z-index negatif, dans le
   contexte d'empilement cree par isolation: isolate. Sans cette isolation,
   il passerait derriere le pied de page entier et disparaitrait. */
.footer-nav a[aria-current="page"]{
  position: relative;
  isolation: isolate;
  color: var(--papier-encre);
  text-decoration: none;
}

.footer-nav a[aria-current="page"][data-surlignement]::before{
  content: "";
  position: absolute;
  /* Le papier deborde le mot : une decoupe garde toujours une marge. */
  left: -0.42em;
  right: -0.44em;
  top: -0.24em;
  bottom: -0.28em;
  z-index: -1;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--papier-1), var(--papier-2));
  box-shadow:
    0 6px 14px rgba(var(--ombre-rgb), calc(0.34 * var(--ombre-k))),
    0 2px 0 rgba(var(--ombre-rgb), calc(0.20 * var(--ombre-k)));
  transform: rotate(var(--surligneur-angle, -1.2deg));
  pointer-events: none;
}

/* Contraste eleve : le systeme impose ses couleurs et efface les fonds.
   Le papier disparait, le soulignement reprend son role, et l'encre doit
   revenir a la couleur du systeme sans quoi elle resterait noire sur noir. */
@media (forced-colors: active){
  .footer-nav a[aria-current="page"][data-surlignement]::before{ display: none; }
  .footer-nav a[aria-current="page"]{ color: LinkText; text-decoration: underline; }
}

/* Les six inclinaisons. Toutes NEGATIVES, entre -1 et -2,8 degres : en CSS
   une rotation negative releve le cote droit, ce qui est le geste d'une
   main droitiere posant un bout de papier. */
.footer-nav a[data-surlignement="1"]{ --surligneur-angle: -1.0deg; }
.footer-nav a[data-surlignement="2"]{ --surligneur-angle: -1.7deg; }
.footer-nav a[data-surlignement="3"]{ --surligneur-angle: -2.4deg; }
.footer-nav a[data-surlignement="4"]{ --surligneur-angle: -1.3deg; }
.footer-nav a[data-surlignement="5"]{ --surligneur-angle: -2.1deg; }
.footer-nav a[data-surlignement="6"]{ --surligneur-angle: -2.8deg; }

@media (prefers-reduced-motion: reduce){
  .footer-nav a[aria-current="page"][data-surlignement]::before{ transform: none; }
}

/* Une seule entrée porte une couleur propre : l'action, en or.
   Le sélecteur est écrit « .footer-nav a.classe » pour passer devant
   « .footer-nav a » — une classe seule y perdrait.
   Au survol elle ne vire pas à l'or, elle s'éclaircit : virer à l'or
   lui ferait justement perdre sa distinction. */
.footer-nav a.footer-nav__action{ color: var(--or); }

.footer-nav a.footer-nav__action:hover{
  color: var(--texte-fort);
}

.footer-nav a.footer-nav__action[aria-current="page"]{
  color: var(--or);
}

/* Les puces qui séparent deux entrées d'une même grappe. La classe est
   nécessaire : viser « .footer-nav span » atteindrait aussi le conteneur
   de grappe, et estomperait toute la navigation. */
.footer-nav .footer-puce{ opacity: 0.4; }

.footer-right{
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-icon{
  color: var(--texte-attenue);
  font-size: 18px;
  transition: color 0.25s ease, transform 0.2s ease, text-shadow 0.25s ease;
}
.footer-icon:hover{ transform: scale(1.15); }

.footer-icon.coffee{ color: var(--or); }
.footer-icon.coffee:hover{
  color: var(--bleu);
  text-shadow: 0 0 12px rgba(var(--bleu-rgb), 0.6);
}
.footer-icon.facebook:hover{ color: var(--bleu); }
.footer-icon.vimeo:hover{
  color: #1ab7ea; /* bleu Vimeo — couleur de marque tierce, reste en dur */
  text-shadow: 0 0 10px rgba(26,183,234,0.6);
}
.footer-icon.email:hover,
.footer-icon.messenger:hover{
  color: var(--or);
  text-shadow: 0 0 10px rgba(var(--or-rgb), 0.5);
}

.footer-separator{
  width: 1px;
  height: 22px;
  background: rgba(var(--surface-rgb), 0.25);
}

/* bascule clair / sombre — un bouton habillé comme les icônes */
.theme-toggle{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.theme-toggle:hover{
  color: var(--or);
  text-shadow: 0 0 10px rgba(var(--or-rgb), 0.5);
}
.theme-toggle:focus-visible{
  outline: 2px solid rgba(var(--or-rgb), 0.75);
  outline-offset: 4px;
  border-radius: 6px;
}
/* Emblème jour/nuit — une boule fendue : croissant à gauche, soleil et
   ses rayons à droite. Les deux moitiés sont toujours dessinées ; celle
   du mode en cours s'éteint, celle du mode où mène le clic s'allume.
   Le dessin vit dans footer.php et dans feedcut-writer.php ; ces règles
   valent pour les deux, base.css étant chargée par header.php. */
.fc-embleme{ display: block; }
.fc-embleme__lune,
.fc-embleme__soleil{
  transition: opacity 0.25s ease;
}
.fc-embleme__soleil{ opacity: var(--icone-soleil); }
.fc-embleme__lune{ opacity: var(--icone-lune); }

@media (prefers-reduced-motion: reduce){
  .fc-embleme__lune,
  .fc-embleme__soleil{ transition: none; }
}

/* Paliers de respiration du menu, avant tout repliement. Le texte maigrit
   d'un demi-point puis d'un point : invisible a l'oeil, decisif pour la
   place. Les puces et les ecarts entre entrees suivent.                   */
@media (max-width: 1340px){
  .site-footer{ font-size: 13.5px; }
  .footer-nav, .footer-groupe{ gap: 7px; }
  .footer-right{ gap: 15px; }
}
@media (max-width: 1180px){
  .site-footer{ font-size: 12.5px; }
  .footer-nav, .footer-groupe{ gap: 6px; }
  .footer-right{ gap: 13px; }
  .footer-icon{ font-size: 16px; }
}

@media (max-width: 900px){
  .site-footer{ padding: 12px 22px; }
  .footer-left{ white-space: normal; }

  /* Entre 769 et 900 px (tablettes), chaque grappe prend sa ligne et les
     filets s'effacent : un filet vertical seul en début de ligne n'aurait
     aucun sens, et le retour à la ligne sépare déjà les grappes.
     Sous 768 px, tout ceci disparaît derrière le bouton de menu. */
  .footer-nav{
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-groupe{
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-separator--nav{ display: none; }
}

@media (max-width: 768px){
  .site-footer{
    flex-direction: column;
    gap: 10px;
    padding: 10px 18px;
  }
  .footer-left{
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ---- Téléphone : la navigation se replie derrière un bouton ----
     Sept liens sur trois lignes occupaient près du tiers de l'écran, en
     permanence, pour une barre fixe. Le panneau s'ouvre vers le haut et
     reste HORS DU FLUX : la barre garde sa hauteur, donc --footerH — dont
     dépend le padding bas de certaines pages — ne bouge pas. */
  .footer-menu-btn{ display: inline-flex; }

  .footer-nav{
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 60;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    max-height: 70vh;
    overflow-y: auto;
    padding: 10px 18px 14px;

    /* Opaque, contrairement à la barre : un menu qu'on lit par-dessus le
       texte de la page ne se lit pas. Même teinte que le bas de la barre,
       le raccord est donc invisible. */
    background: rgb(var(--pied-rgb));
    border-top: 1px solid rgba(var(--surface-rgb), 0.08);
    box-shadow: 0 -10px 30px rgba(var(--ombre-rgb), calc(0.45 * var(--ombre-k)));
  }

  .site-footer.menu-ouvert .footer-nav{ display: flex; }
  .site-footer.menu-ouvert .footer-menu-btn__ouvrir{ display: none; }
  .site-footer.menu-ouvert .footer-menu-btn__fermer{ display: inline; }

  /* Une entrée par ligne, en pleine largeur : la cible tactile fait toute
     la largeur du panneau, pas seulement la longueur du mot. */
  .footer-groupe{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .footer-nav a{
    display: block;
    padding: 11px 4px;
    text-align: center;
    font-size: 16px;
  }

  /* Les puces séparaient des mots sur une ligne ; en colonne, ce sont les
     filets entre grappes qui portent le regroupement. */
  .footer-nav .footer-puce{ display: none; }
  .footer-separator--nav{
    display: block;
    width: auto;
    height: 1px;
    margin: 6px 22px;
    background: rgba(var(--surface-rgb), 0.14);
  }

  @media (prefers-reduced-motion: no-preference){
    .site-footer.menu-ouvert .footer-nav{ animation: fc-menu-ouvre .22s ease both; }
    @keyframes fc-menu-ouvre{
      from{ opacity: 0; transform: translateY(10px); }
      to  { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ── pots de miel du formulaire d'infolettre ────────────────────────────
   Hors de l'ecran plutot que display:none ou visibility:hidden : un robot
   qui cherche ces deux mots-cles ne voit rien d'anormal ici. tabindex="-1"
   et aria-hidden, poses dans le HTML, les retirent du clavier et des
   lecteurs d'ecran — personne ne peut donc y tomber par accident. */
.recueil-garde{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------- 6. Les boutons, et les lucioles ----------
   Consolides ici le 19 septembre 2026. Ces regles existaient en double dans
   index.php et videopoemes.php, avec deja de petites divergences ; le bloc
   « infolettre » du carnet, puis la page aide, en auraient fait d'autres
   copies. Trois copies, c'est le moment de consolider.

   Un seul systeme, deux etats seulement : un bouton PLEIN pour l'action
   principale, un bouton de VERRE pour tout le reste.

   Le verre depoli n'est PAS pose sur le bouton plein. Il ternirait sa
   couleur, et surtout il mettrait les deux sur le meme plan alors que leur
   difference est justement ce qui indique ou cliquer en premier. Le verre
   est le materiau du secondaire ; la couleur, celui du premier.

   text-decoration est force a none : base.css souligne tous les liens au
   survol, ce qui donnait un souligne a certains boutons et pas aux autres,
   selon qu'ils etaient des <a> ou des <button>. C'etait la cause de
   l'incoherence. */
.btn-braise, .btn-creux{
  display: inline-block;
  font-family: 'Special Elite', serif;
  font-size: .94rem; letter-spacing: .06em; line-height: 1.25;
  padding: .82rem 1.45rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease,
              border-color .16s ease, color .16s ease, filter .16s ease;
}
.btn-braise:hover, .btn-creux:hover{ text-decoration: none; transform: translateY(-2px); }
.btn-braise:active, .btn-creux:active{ transform: translateY(0); }
.btn-braise:focus-visible, .btn-creux:focus-visible{
  outline: 2px solid var(--or); outline-offset: 3px; text-decoration: none;
}
@media (prefers-reduced-motion: reduce){
  .btn-braise, .btn-creux{ transition: none; }
  .btn-braise:hover, .btn-creux:hover{ transform: none; }
}

/* Le plein. Texte blanc : sur ce rouge-orange, le noir donnait un contraste
   plus eleve mais un aspect d'avertissement plutot que d'invitation. */
.btn-braise{
  background: var(--braise); border-color: var(--braise); color: #fff;
  box-shadow: 0 6px 18px rgba(196, 60, 20, .30);
}
.btn-braise:hover{
  color: #fff; filter: brightness(1.10);
  box-shadow: 0 12px 30px rgba(196, 60, 20, .44);
}

/* Le verre. Meme matiere que les fiches et les vitres, en plus fin. */
.btn-creux{
  color: var(--texte);
  border-color: rgba(var(--encre-or-rgb), calc(.45 * var(--encre-or-k)));
  background: linear-gradient(180deg,
    rgba(var(--encre-rgb), calc(.05 * var(--encre-k))),
    rgba(var(--encre-rgb), calc(.10 * var(--encre-k))));
  -webkit-backdrop-filter: blur(4px) saturate(.85);
          backdrop-filter: blur(4px) saturate(.85);
}
.btn-creux:hover{
  color: var(--texte);
  border-color: rgba(var(--encre-or-rgb), calc(.95 * var(--encre-or-k)));
  background: linear-gradient(180deg,
    rgba(var(--encre-rgb), calc(.10 * var(--encre-k))),
    rgba(var(--encre-rgb), calc(.17 * var(--encre-k))));
  box-shadow: 0 10px 26px rgba(var(--ombre-rgb), calc(.30 * var(--ombre-k)));
}

/* Une toile posee autour du bouton, plus large que lui, dans laquelle de
   petites lueurs s'echappent, derivent et s'eteignent. Elle n'intercepte
   aucun clic et ne dessine rien tant que le bouton n'est pas a l'ecran
   (voir assets/js/lucioles.js). */
.lucioles{ position: relative; display: inline-block; }
.lucioles__toile{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 94vw); height: 260px;
  pointer-events: none;
  z-index: 0;
}
.lucioles .btn-braise{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){ .lucioles__toile{ display: none; } }

/* Le bloc « infolettre » pose dans un article du carnet. */
.bloc-infolettre{
  margin: 2.2rem 0 .6rem;
  text-align: center;
}
.bloc-infolettre p{
  margin: 0 0 1rem;
  color: var(--texte-attenue);
}

/* Le credit sous une photographie. Discret : c'est une courtoisie, pas une
   mention legale, et il ne doit pas concurrencer l'image. */
.credit-photo{
  margin: .55rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  color: var(--texte-attenue);
}
.credit-photo a{ color: inherit; text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: rgba(var(--encre-rgb), calc(0.4 * var(--encre-k)));
  text-underline-offset: .2em; }
.credit-photo a:hover{ color: var(--braise); text-decoration-color: var(--braise); }