/* =====================================================================
   Gabarit d'article — damien-hernandez.com

   PREFIXE `art-`. Les autres sont pris : `lex-`, `lexh-`, `pc-`, `ann-`,
   `annf-`, `itw-`, `blg-`, `edc-`, `ct-`, `ap-`, `aud-`, `geo-`, `tec-`,
   `con-`, `cs-`, `fs-`, `ase-`, `ctg-`, `chp-`, `maj-`, `pln-`, `dh-`,
   `dhf-`/`dhz-`. Verifie libre le 13/08/2026 dans les feuilles du theme, dans
   le `style.css` de l'enfant et dans les 60 Ko de CSS du Customizer.

   ⚠️ CETTE FEUILLE A DEUX MOITIES, ET LA SECONDE EST LA PLUS DELICATE
   -------------------------------------------------------------------
   1. LE CHROME (`.art-hero`, `.art-side`, `.art-cta`…) : du balisage que le
      gabarit ecrit, donc des classes a lui.
   2. LA PROSE (`.art-corps h2`, `.art-corps table`…) : le corps de l'article,
      dont le gabarit NE MAITRISE PAS le balisage. Vingt-deux articles sont un
      bloc HTML ecrit a la main avec leurs propres classes, trente-neuf sont en
      blocs Gutenberg. La seule prise commune est la BALISE.

   D'ou des selecteurs d'element dans la seconde moitie, ce qui est interdit
   partout ailleurs sur ce site. Ils sont tous confines sous `.art-corps` : ils
   ne peuvent donc pas fuir vers le chrome ni vers une autre page.

   Ne definit AUCUN token : le conteneur porte `lex pc art`.

   CONTRASTE — calcule avec `engine/tools/contraste.py`, jamais estime
   (WCAG 2.x, seuil 4,5:1 sous 24px) :
     #F4F2EC sur #101A1C 15,81  titre du heros et numero du code
     #A9B6B2 sur #101A1C  8,45  chapeau, fil d'Ariane, signature
     #7FC9B8 sur #101A1C  9,23  intitules et lien de signature
     #A9B6B2 sur #21302D  6,57  intitules de la carte d'identite
     #F4F2EC sur #21302D 12,30  valeurs de la carte d'identite
     #FFFFFF sur #B4532A  4,66  badge « erreurs serveur »
     #06231D sur #14A88C  5,54  bouton d'action
     #21302D sur #FFFFFF 13,77  texte courant de l'article
     #46534F sur #FFFFFF  8,04  textes secondaires
     #101A1C sur #FFFFFF 17,70  titres de l'article
     #576260 sur #FFFFFF  6,32  legendes et dates
     #21302D sur #FBFAF7 13,19  corps de l'article
     #46534F sur #FBFAF7  7,71  sommaire au repos
     #0B6E5F sur #FBFAF7  5,90  sommaire actif
     #3D2B22 sur #FCF6F2 12,51  encadres d'alerte du corps
   ===================================================================== */

.art :where(li, figure, time, dd, pre) { margin: 0; }

/* ---------------------------------------------------------------- jauge --- */
/* Elle est purement indicative : `aria-hidden` dans le gabarit, et aucune
   information n'y est portee que le defilement ne donne deja. */
.art-jauge { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.art-jauge span { display: block; height: 100%; width: 0; background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .art-jauge { display: none; }
}

/* ---------------------------------------------------------------- heros --- */
.art .art-hero { background: var(--ink); padding: 40px 0 48px; }
.art .art-crumbs { color: var(--on-dark-muted); }
.art .art-crumbs a { color: var(--on-dark-muted); border-bottom: 0; }
.art .art-crumbs a:hover { color: var(--teal-light); }
.art .art-crumbs .current { color: var(--on-dark); }

.art-hero-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; margin-top: 28px; }
.art-hero-main { flex: 1 1 560px; min-width: 0; }
.art .art-title { color: var(--on-dark); font-size: 46px; margin-top: 20px; max-width: 18em; }
.art .art-lead { font-size: 18.5px; line-height: 1.66; color: var(--on-dark-muted); margin-top: 18px; max-width: 34em; text-wrap: pretty; }

.art-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.art-badge, .art-badge-ghost {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px;
}
/* Le badge plein dit la famille du code, et sa couleur dit si c'est un
   probleme. Le blanc sur terre est verifie a 4,66 : au-dessus du seuil, mais
   c'est le plus juste des couples du site, il ne faut pas l'eclaircir. */
.art-badge-mal { background: var(--terra); color: #FFFFFF; }
.art-badge-ok { background: var(--accent); color: #06231D; }
.art-badge-ghost { border: 1px solid var(--muted); color: var(--on-dark-muted); }

.art .art-signature {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 13.5px; line-height: 1.6; color: var(--on-dark-muted); margin-top: 24px;
}
.art .art-signature strong { color: var(--on-dark); font-weight: 500; }
.art .art-signature a { color: var(--teal-light); border-bottom: 0; }
.art .art-signature a:hover { color: var(--on-dark); }
.art-sep { color: var(--muted); }

/* -------------------------------------------------- carte d'identite --- */
.art-identite { flex: 0 0 292px; background: #21302D; box-shadow: 0 0 0 1px #22302D; padding: 24px 26px; }
.art .art-identite-code { font-family: var(--mono); font-size: 46px; line-height: 1; color: var(--on-dark); margin-top: 14px; }
.art .art-identite-nom { font-size: 15px; line-height: 1.4; color: var(--on-dark-muted); margin-top: 6px; }
.art-identite-liste {
  display: flex; flex-direction: column; gap: 11px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--def-border);
}
/* `flex-wrap` est le filet : « Criticité SEO » et sa valeur ne tiennent pas
   toujours cote a cote dans 240px utiles. */
.art-identite-liste > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; }
.art .art-identite-liste dt { font-size: 13.5px; line-height: 1.5; color: var(--on-dark-muted); }
.art .art-identite-liste dd { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--on-dark); margin: 0; text-align: right; }

/* ------------------------------------------------------------- sommaire --- */
/* ⚠️ La bascule sous 1024px est `display: block` et NON un flex en colonne :
   en colonne, l'axe transversal devient l'horizontale et `.art-main` heriterait
   du `min-width` des tableaux du corps, ce qui deborde en silence sous
   `overflow: clip`. */
.art-grille { display: flex; align-items: flex-start; gap: 56px; padding: 44px 0 0; }
.art-main { flex: 1 1 680px; min-width: 0; padding-bottom: 90px; }
.art-side { flex: 0 0 214px; position: sticky; top: 118px; align-self: flex-start; padding-bottom: 40px; }
.art-toc { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; box-shadow: inset 1px 0 0 var(--line); }
.art .art-toc a {
  font-size: 13.5px; line-height: 1.45; color: var(--muted);
  padding: 7px 0 7px 14px; border-bottom: 0;
  transition: color .15s ease, box-shadow .15s ease;
}
.art .art-toc a:hover { color: var(--primary); }
.art .art-toc a.est-actif { color: var(--primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--primary); }
.art-urgence { background: var(--surface); box-shadow: 0 0 0 1px var(--line); border-left: 3px solid var(--terra); padding: 18px; margin-top: 24px; }
.art .art-urgence p:not(.pc-kicker) { font-size: 14px; line-height: 1.6; color: var(--body); margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .art .art-toc a { transition: none; }
}

@media (max-width: 1024px) {
  .art-side { display: none; }
  .art-grille { display: block; padding-top: 34px; }
}

/* =====================================================================
   LE CORPS DE L'ARTICLE
   ---------------------------------------------------------------------
   Tout ce qui suit vise des BALISES et non des classes, parce que le gabarit
   ne maitrise pas le balisage du contenu. Chaque regle est confinee sous
   `.art-corps` : hors de l'article, aucune ne s'applique.

   Les valeurs sont celles du systeme `.pc-` pour que le corps d'un article
   ressemble au corps d'une page : meme serif pour les titres, memes graisses,
   memes interlignes.
   ===================================================================== */

.art-corps { color: var(--body); font-size: 17px; line-height: 1.75; }
.art-corps > :first-child { margin-top: 0; }

.art-corps h2 {
  font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.18;
  letter-spacing: -.01em; color: var(--ink);
  margin: 56px 0 0; scroll-margin-top: 110px; text-wrap: pretty;
}
.art-corps h3 {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.26;
  letter-spacing: -.01em; color: var(--ink); margin: 34px 0 0;
}
.art-corps h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 26px 0 0; }
.art-corps p { margin-top: 16px; max-width: 42em; text-wrap: pretty; }
.art-corps a { border-bottom: 1px solid var(--teal-border); }

.art-corps ul, .art-corps ol { margin-top: 16px; padding-left: 22px; max-width: 42em; }
.art-corps li { margin-top: 8px; }
.art-corps li::marker { color: var(--primary); }

.art-corps strong { font-weight: 600; color: var(--ink); }
.art-corps blockquote {
  margin-top: 22px; border-left: 3px solid var(--primary);
  background: var(--teal-tint); padding: 18px 22px; max-width: 44em;
}
.art-corps blockquote p { margin-top: 0; }

/* Les tableaux du corps reprennent l'habillage du systeme, sans en porter les
   classes : c'est le seul moyen d'obtenir le meme rendu sur un tableau ecrit a
   la main dans un bloc HTML. */
.art-corps table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  margin-top: 22px; border: 1px solid var(--line);
}
.art-corps thead tr { background: var(--ink); color: var(--on-dark); }
.art-corps th {
  text-align: left; padding: 13px 18px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
.art-corps tbody tr { background: var(--surface); border-top: 1px solid var(--line); }
.art-corps tbody tr:nth-child(even) { background: var(--stripe); }
.art-corps tbody th { font-family: inherit; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.art-corps td { padding: 13px 18px; color: var(--muted); }

/* ⚠️ LE BLOC DE CODE DOIT DEFILER, PAS DEBORDER. Plusieurs articles montrent
   des reponses HTTP brutes : sans `overflow-x`, une ligne longue pousse toute
   la colonne et la page entiere deborde a droite. Le `.pc` porte
   `overflow: clip`, donc le debordement serait invisible aux mesures tout en
   coupant le texte a l'ecran. */
.art-corps pre {
  margin-top: 20px; background: var(--ink); color: var(--on-dark);
  padding: 18px 20px; overflow-x: auto; font-family: var(--mono);
  font-size: 13.5px; line-height: 1.6;
}
.art-corps pre code { background: none; padding: 0; color: inherit; }
.art-corps code {
  font-family: var(--mono); font-size: .92em;
  background: var(--teal-tint); border: 1px solid var(--teal-border); padding: 1px 5px;
}

.art-corps img { max-width: 100%; height: auto; display: block; margin-top: 22px; }
.art-corps figure { margin-top: 22px; }
.art-corps figcaption { font-size: 13.5px; line-height: 1.55; color: var(--faint); margin-top: 8px; }
.art-corps hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 0; }

/* ----------------------------------------------------- appel a l'action --- */
.art-cta {
  margin-top: 48px; background: var(--ink); padding: 32px 34px; scroll-margin-top: 100px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.art-cta > div { flex: 1 1 300px; min-width: 0; }
.art .art-cta-titre { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.34; letter-spacing: -.01em; color: var(--on-dark); margin-top: 12px; max-width: 24em; }
.art .art-cta-txt { font-size: 14.5px; line-height: 1.62; color: var(--on-dark-muted); margin-top: 10px; max-width: 40em; }
.art .art-btn-accent {
  flex: 0 0 auto; display: inline-block; background: var(--accent); color: #06231D;
  font-weight: 600; font-size: 15px; padding: 16px 26px; border-radius: 2px; border-bottom: 0;
}
.art .art-btn-accent:hover { background: var(--teal-light); color: #06231D; }

/* ------------------------------------------------------------- voisins --- */
.art-voisins { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.art .art-voisin {
  display: block; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  padding: 18px 20px; border-bottom: 0;
}
.art .art-voisin:hover { background: var(--teal-tint); }
.art .art-voisin .pc-kicker { display: block; }
.art-voisin-fin { text-align: right; }
.art-voisin-nom { display: block; font-size: 16px; font-weight: 500; color: var(--ink); margin-top: 8px; }

/* -------------------------------------------------------------- auteur --- */
.art-auteur {
  margin-top: 32px; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  padding: 26px 28px; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
}
.art-auteur-portrait { flex: 0 0 76px; }
.art-auteur-portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 8%; background: var(--line);
}
.art-auteur-txt { flex: 1 1 320px; min-width: 0; }
.art .art-auteur-nom { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.art .art-auteur-bio { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-top: 8px; max-width: 46em; }
.art-auteur-liens { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 14px; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .art .art-title { font-size: 38px; }
  .art-identite { flex: 0 0 260px; }
}

@media (max-width: 900px) {
  .art .art-hero { padding: 28px 0 34px; }
  .art-hero-grid { gap: 28px; margin-top: 22px; }
  .art .art-title { font-size: 32px; max-width: none; }
  .art .art-lead { font-size: 17px; }
  /* La carte d'identite passe SOUS le texte, jamais devant le titre : l'ordre
     du DOM l'impose deja, la mise en page ne doit pas le contredire. */
  .art-identite { flex: 1 1 100%; }
  .art-main { padding-bottom: 70px; }
  .art-corps h2 { font-size: 27px; margin-top: 44px; }
  .art-corps h3 { font-size: 20px; }
  .art-cta { padding: 26px 22px; }
  .art-auteur { padding: 22px 20px; }
  /* Sur mobile, la carte « suivant » alignee a droite se lit mal une fois
     empilee sous la precedente. */
  .art-voisin-fin { text-align: left; }
}

@media (max-width: 560px) {
  .art .art-title { font-size: 28px; }
  .art-corps { font-size: 16.5px; }
  .art-corps h2 { font-size: 24px; }
  .art .art-btn-accent { display: block; text-align: center; flex: 1 1 100%; }
  .art-auteur-portrait { flex: 0 0 64px; }
}

/* =====================================================================
   LES COMPOSANTS DU CORPS
   ---------------------------------------------------------------------
   Le corps de l'article 4988 a ete reecrit au vocabulaire du site : il porte
   desormais ces classes-la et non plus `dh-http-article`. Les 36 Ko de CSS
   herites injectes par `functions.php` n'ont donc plus rien a habiller sur
   cette page. Ils ne sont PAS supprimes : les vingt et un autres articles de
   la serie les utilisent encore, jusqu'a leur propre refonte.

   Ces regles vivent sous `.art-corps` comme le reste de la prose : elles ne
   peuvent pas fuir vers le chrome ni vers une autre page.
   ===================================================================== */

/* ------------------------------------------------------- reponse courte --- */
.art-corps .art-reponse { background: var(--ink); padding: 32px 34px; }
.art-reponse-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; }
.art-corps .art-reponse h2 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-light); font-weight: 500; margin: 0; }
.art-corps .art-reponse-txt { font-family: var(--serif); font-size: 25px; line-height: 1.45; color: var(--on-dark); margin-top: 18px; max-width: none; text-wrap: pretty; }
.art-corps .art-reponse-txt strong { color: #FFFFFF; font-weight: 600; }
.art-corps .art-reponse-note { font-size: 14.5px; line-height: 1.62; color: var(--on-dark-muted); margin-top: 18px; max-width: 46em; }
.art-corps .art-copier {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--on-dark); border: 1px solid var(--muted);
  border-radius: 0; padding: 7px 12px; cursor: pointer; flex: 0 0 auto;
  transition: border-color .15s ease, color .15s ease;
}
.art-corps .art-copier:hover { border-color: var(--teal-light); color: var(--teal-light); }
.art-corps .art-copier:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .art-corps .art-copier { transition: none; }
}

/* ------------------------------------------------------------- chiffres --- */
.art-corps .art-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin-top: 28px; }
.art-corps .art-chiffres > div { background: var(--surface); box-shadow: 0 0 0 1px var(--line); padding: 22px 24px; }
.art-corps .art-chiffre { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--primary); margin-top: 0; }
.art-corps .art-chiffre-mal { color: var(--terra); }
.art-corps .art-chiffres p + p { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 10px; }

/* --------------------------------------------------------------- etapes --- */
.art-corps .art-etapes { display: flex; flex-direction: column; gap: 1px; margin-top: 26px; padding: 0; list-style: none; }
.art-corps .art-etapes li {
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  padding: 22px 26px; display: flex; gap: 20px; margin-top: 0;
  font-size: 15.5px; line-height: 1.62; color: var(--muted);
}
.art-etape-n { font-family: var(--mono); font-size: 12px; color: var(--primary); flex: 0 0 28px; padding-top: 3px; }
.art-corps .art-etapes strong { font-size: 17px; }

/* -------------------------------------------------------------- alerte --- */
.art-corps .art-alerte {
  margin-top: 22px; border: 1px solid var(--line); border-left: 3px solid var(--terra);
  background: var(--terra-tint); padding: 20px 24px; max-width: 44em;
}
.art-corps .art-alerte p { font-size: 15.5px; line-height: 1.65; color: var(--terra-ink); margin-top: 0; }

/* ------------------------------------------------------------- tableau --- */
/* `.art-table` reprend l'habillage du systeme sans en porter les classes : le
   tableau est ecrit dans le contenu, il ne peut pas dependre de `.pc-table`. */
.art-corps .art-table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--line); }
.art-corps .art-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 660px; margin-top: 0; border: 0; }
.art-corps .art-table th[scope="col"] {
  background: var(--ink); color: var(--on-dark); text-align: left; padding: 13px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
.art-corps .art-table tbody tr { background: var(--surface); border-top: 1px solid var(--line); }
.art-corps .art-table tbody tr:nth-child(even) { background: var(--stripe); }
.art-corps .art-table th[scope="row"] { text-align: left; padding: 13px 18px; color: var(--ink); font-weight: 500; font-family: inherit; font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.art-corps .art-table td { padding: 13px 18px; color: var(--muted); }
/* ⚠️ Trois classes : `.art-table td` pese (0,2,1) et battrait `.art-td-fort`
   a (0,2,0). Meme piege que sur la page de reference des codes, section 43. */
.art-corps .art-table .art-td-fort { color: var(--primary); }

/* --------------------------------------------------------------- cartes --- */
.art-corps .art-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-top: 26px; }
.art-corps .art-cartes > div { background: var(--surface); box-shadow: 0 0 0 1px var(--line); padding: 22px 24px; }
/* `:not(.pc-kicker)` : sans lui, ce selecteur (0,2,0) bat `.pc-kicker-teal`
   (0,1,0) et les intitules sortent en gris. Section 25. */
.art-corps .art-cartes p:not(.pc-kicker) { font-size: 15px; line-height: 1.62; color: var(--body); margin-top: 10px; }

/* ------------------------------------------------------------- a retenir --- */
.art-corps .art-retenir { margin-top: 22px; border: 1px solid var(--teal-border); background: var(--teal-tint); padding: 24px 26px; max-width: 44em; }
.art-corps .art-retenir ol { margin-top: 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: none; }
.art-corps .art-retenir li { display: flex; gap: 14px; font-size: 15.5px; line-height: 1.62; color: var(--body); margin-top: 0; }
.art-retenir-n { font-family: var(--mono); font-size: 13px; color: var(--primary); flex: 0 0 auto; }

/* ------------------------------------------------- appel a l'action du corps --- */
.art-corps .art-cta-corps {
  margin-top: 48px; background: var(--ink); padding: 32px 34px; scroll-margin-top: 100px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.art-corps .art-cta-corps > div { flex: 1 1 300px; min-width: 0; }
.art-corps .art-cta-corps .art-cta-titre { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.34; letter-spacing: -.01em; color: var(--on-dark); margin-top: 12px; max-width: 24em; }
.art-corps .art-cta-corps .art-cta-txt { font-size: 14.5px; line-height: 1.62; color: var(--on-dark-muted); margin-top: 10px; max-width: 40em; }
.art-corps .art-cta-corps a.art-btn-accent {
  flex: 0 0 auto; background: var(--accent); color: #06231D; font-weight: 600; font-size: 15px;
  padding: 16px 26px; border-radius: 2px; border-bottom: 0;
}
.art-corps .art-cta-corps a.art-btn-accent:hover { background: var(--teal-light); color: #06231D; }

/* --------------------------------------------------------------- coches --- */
.art-corps .art-coches { margin-top: 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 44em; }
.art-corps .art-coches li {
  position: relative; padding-left: 22px; margin-top: 0;
  font-size: 15.5px; line-height: 1.62; color: var(--body);
}
.art-corps .art-coches li::before {
  content: ""; position: absolute; left: 1px; top: .7em;
  width: 8px; height: 1px; background: var(--primary);
}

/* ------------------------------------------------------- codes voisins --- */
.art-corps .art-voisins-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-top: 24px; }
.art-corps .art-voisins-grille a {
  display: block; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  padding: 22px 24px; border-bottom: 0;
}
.art-corps .art-voisins-grille a:hover { background: var(--teal-tint); }
.art-voisin-tete { display: flex; align-items: baseline; gap: 12px; }
.art-voisin-code { font-family: var(--mono); font-size: 22px; color: var(--primary); }
.art-corps .art-code-mal { color: var(--terra); }
.art-voisin-txt { display: block; font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 10px; }
.art-voisin-lire { display: block; font-size: 14px; font-weight: 500; color: var(--primary); margin-top: 12px; }

/* ------------------------------------------------------------------ FAQ --- */
/* `<details>` natif : la FAQ reste lisible et depliable sans JavaScript. */
.art-corps .art-faq { margin-top: 22px; border-top: 1px solid var(--line); }
.art-corps .art-faq details { border-bottom: 1px solid var(--line); }
.art-corps .art-faq summary {
  cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between;
  gap: 20px; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink); list-style: none;
}
.art-corps .art-faq summary::-webkit-details-marker { display: none; }
.art-corps .art-faq summary:hover { color: var(--primary); }
.art-corps .art-faq summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.art-faq-signe { color: var(--primary); flex: 0 0 auto; font-family: var(--mono); }
.art-faq-signe::before { content: "+"; }
.art-corps .art-faq details[open] .art-faq-signe::before { content: "−"; }
.art-corps .art-faq p { font-size: 15.5px; line-height: 1.7; color: var(--muted); padding-bottom: 22px; margin-top: 0; max-width: 42em; }

/* --------------------------------------------------------------- sources --- */
.art-corps .art-sources { margin-top: 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 46em; }
.art-corps .art-sources li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 0; }
.art-source-n { font-family: var(--mono); color: var(--faint); flex: 0 0 auto; }

@media (max-width: 900px) {
  .art-corps .art-reponse { padding: 24px 22px; }
  .art-corps .art-reponse-txt { font-size: 21px; }
  .art-corps .art-etapes li { padding: 20px 22px; gap: 14px; }
  .art-corps .art-cta-corps { padding: 26px 22px; }
  .art-corps .art-retenir { padding: 20px 22px; }
}

@media (max-width: 560px) {
  .art-corps .art-cta-corps a.art-btn-accent { display: block; text-align: center; flex: 1 1 100%; }
}