/* ==========================================================================
   article.css — les pages de « Comprendre », le contenu de lecture longue.

   Charge APRES assets/pages.css, qui apporte deja le theme clair/sombre, les
   barres de defilement et --lecture. Ce fichier n ajoute que ce qui est propre
   a un article : la chrome de tete, la mise en page du texte long, les images
   et le maillage de fin. Rien de duplique.

   ⚠ Ces pages sont AUTONOMES et indexables — contrairement aux documents
   legaux, elles ne vivent pas dans une iframe et chaque langue a sa propre
   adresse. Le mecanisme bilingue de pages.css (data-l) ne sert donc pas ici.

   ⚠ LARGEUR : ces pages ont leur propre mesure, --a-lecture, PLUS ETROITE que
   le --lecture du site. Ce n est pas une divergence de confort, c est une
   mesure : a 760 px et 17 px de corps, une ligne portait 94 caracteres — tres
   au-dessus de la fourchette lisible (45-75), et ici la capacite est vraiment
   atteinte, un paragraphe faisant quatre lignes pleines. Sur les phrases
   courtes du site, la largeur ne decide de rien ; sur 1500 mots lus d un
   trait, elle decide de tout.
   Le reglage retenu — corps a 19 px, mesure a 41rem — a ete VERIFIE sur le
   rendu, pas calcule : ~72 caracteres. Ne pas modifier l un sans remesurer
   l autre, les deux se compensent.
   ========================================================================== */

/* --- ECHELLE ------------------------------------------------------------
   En rem avec plancher absolu, comme tout le site : le texte peut grossir
   avec le reglage du navigateur, jamais retrecir en dessous du dessin.
   ------------------------------------------------------------------------ */
:root {
  --a-xs:   max(0.8125rem, 13px);
  --a-sm:   max(0.9375rem, 15px);
  --a-base: max(1.1875rem, 19px);   /* le corps */
  --a-md:   max(1.3125rem, 21px);   /* l exergue */
  --a-lg:   max(1.5rem,    24px);
  --a-xl:   max(1.875rem,  30px);
  --a-h1:   clamp(max(2rem, 32px), 5.2vw, max(3.25rem, 52px));

  /* La mesure de lecture des articles. Voir l avertissement en tete : elle
     est plus etroite que le --lecture du site, et le couple 19 px / 41rem a
     ete verifie sur le rendu. */
  --a-lecture: min(41rem, 100%);

  --a-rythme: clamp(28px, 4.4vmin, 46px);   /* entre deux sections */
  --a-rond: 20px;

  /* ⚠ ACCENT LISIBLE — ne pas remplacer par --terracotta.
     Le terracotta de marque (#C8553D) ne donne que 3,4:1 sur le creme : il
     tient pour un aplat ou un liseré, pas pour du texte. Le site avait deja
     resolu le probleme en fonçant l accent (#A8412A, 4,8:1) ; on reprend
     exactement ses valeurs plutot que d en inventer.
     En sombre, le rapport s inverse : l accent s eclaircit et l encre du
     bouton devient foncee, sans quoi du creme sur terracotta clair tombe a
     2,5:1 — c est le defaut qui a ete trouve sur ce gabarit. */
  --a-accent:   #A8412A;
  --a-cta-fond: #A8412A;
  --a-cta-ink:  #FFF7EA;
}
html.dark {
  --a-accent:   #E08A6F;
  --a-cta-fond: #E08A6F;
  --a-cta-ink:  #2A1608;
}

/* --- PAGE ---------------------------------------------------------------
   Fond uni plutot que les galets de l accueil : en lecture longue, un fond
   dessine derriere 1500 mots fatigue. Une seule lueur, tres diluee, en haut,
   pour que la page appartienne quand meme au meme monde.
   ------------------------------------------------------------------------ */
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charbon);
  font-family: var(--font-body);
  font-size: var(--a-base);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(229, 160, 44, .13), transparent 70%),
    radial-gradient(50% 60% at 88% 4%, rgba(200, 85, 61, .10), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
html.dark body::before {
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(240, 182, 90, .10), transparent 70%),
    radial-gradient(50% 60% at 88% 4%, rgba(224, 138, 111, .09), transparent 72%);
}
.page-article { position: relative; z-index: 1; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--a-cta-fond); color: var(--a-cta-ink);
  padding: 10px 18px; border-radius: 0 0 12px 0; z-index: 50;
}
.skip-link:focus { left: 0; }

/* --- CHROME DE TETE -----------------------------------------------------
   Volontairement legere : un retour au site, le fil d Ariane, et les deux
   commandes (theme, langue). Rien d autre — la page est faite pour etre lue,
   pas pour naviguer.
   ------------------------------------------------------------------------ */
.a-tete {
  max-width: var(--a-lecture);
  margin: 0 auto;
  padding: clamp(18px, 3vmin, 30px) 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.a-marque {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: var(--a-md);
  color: var(--charbon); text-decoration: none; letter-spacing: -.01em;
}
.a-marque .pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--terracotta);
}
.a-marque:hover { color: var(--a-accent); }
.a-outils { display: flex; align-items: center; gap: 10px; }

.a-lang { display: flex; border: 1.5px solid var(--rule); border-radius: 999px; overflow: hidden; }
.a-lang > * {
  border: none; background: none; font-family: inherit;
  font-size: var(--a-xs); font-weight: 700; letter-spacing: .06em;
  padding: 7px 12px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted); text-decoration: none; cursor: pointer;
}
.a-lang > a:hover { color: var(--a-accent); }
.a-lang > .on { background: var(--a-cta-fond); color: var(--a-cta-ink); cursor: default; }

.a-theme {
  border: 1.5px solid var(--rule); background: none; border-radius: 999px;
  width: 36px; height: 36px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--fg-muted); padding: 0;
}
.a-theme:hover { color: var(--a-accent); border-color: var(--a-accent); }
.a-theme svg { width: 17px; height: 17px; }
html:not(.dark) .a-theme .ic-soleil,
html.dark .a-theme .ic-lune { display: none; }

/* --- FIL D ARIANE -------------------------------------------------------- */
.a-fil {
  max-width: var(--a-lecture);
  margin: clamp(20px, 3.4vmin, 34px) auto 0;
  padding: 0 20px;
  font-size: var(--a-sm);
  color: var(--fg-muted);
}
.a-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.a-fil li { display: inline-flex; align-items: center; gap: 6px; }
.a-fil li + li::before { content: "/"; color: var(--rule); }
.a-fil a { color: var(--fg-muted); text-decoration: none; }
.a-fil a:hover { color: var(--a-accent); text-decoration: underline; text-underline-offset: 3px; }
.a-fil [aria-current] { color: var(--charbon); }

/* --- CORPS --------------------------------------------------------------- */
.a-corps {
  max-width: var(--a-lecture);
  margin: 0 auto;
  padding: 0 20px clamp(56px, 9vmin, 96px);
}

.a-corps h1 {
  font-family: var(--font-display);
  font-size: var(--a-h1);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 800;
  margin: clamp(12px, 2vmin, 20px) 0 0;
  text-wrap: balance;
}

/* Plus d espace AU-DESSUS d un titre qu en dessous : c est ce qui rattache
   visuellement un titre a ce qui le suit plutot qu a ce qui le precede. */
.a-corps h2 {
  font-family: var(--font-display);
  font-size: var(--a-xl);
  line-height: 1.2;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: var(--a-rythme) 0 .5em;
  text-wrap: balance;
}
.a-corps h3 {
  font-size: var(--a-lg); font-weight: 700; line-height: 1.3;
  margin: calc(var(--a-rythme) * .62) 0 .4em;
}
.a-corps p { margin: 0 0 1.15em; }
.a-corps strong { font-weight: 700; color: var(--charbon); }

/* ⚠ Cibler le texte courant, PAS « .a-corps a » : cette forme-la attrapait
   aussi les deux boutons de l appel final, qui vivent dans le corps. Ils
   recevaient alors la couleur terracotta SUR un fond terracotta — un texte
   parfaitement invisible, et une regle plus specifique qu eux. */
.a-corps :where(p, li, dd) > a,
.a-corps :where(p, li, dd) a {
  color: var(--a-accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(200,85,61,.4);
}
.a-corps :where(p, li, dd) a:hover { text-decoration-color: currentColor; }
html.dark .a-corps :where(p, li, dd) a { text-decoration-color: rgba(224,138,111,.45); }

.a-corps ul { margin: 0 0 1.3em; padding-left: 1.1em; }
.a-corps li { margin-bottom: .5em; }
.a-corps li::marker { color: var(--a-accent); }

/* --- L EXERGUE : la reponse courte --------------------------------------
   Le bloc que les moteurs et les IA reprennent. Il doit se comprendre seul,
   donc se voir seul : plus grand que le corps, sur un aplat tiede.
   Pas de barre laterale coloree — c est le reflexe paresseux, et il ferait
   ressembler cet encadre a l avertissement plus bas, qui dit autre chose.
   ------------------------------------------------------------------------ */
.a-reponse {
  margin: clamp(22px, 3.4vmin, 34px) 0 0;
  padding: clamp(20px, 3.2vmin, 30px) clamp(20px, 3.4vmin, 32px);
  background: rgba(229, 160, 44, .13);
  border: 1px solid rgba(229, 160, 44, .34);
  border-radius: var(--a-rond);
  font-size: var(--a-md);
  line-height: 1.62;
}
.a-reponse p { margin: 0 0 .7em; }
.a-reponse p:last-child { margin: 0; }
html.dark .a-reponse {
  background: rgba(240, 182, 90, .10);
  border-color: rgba(240, 182, 90, .28);
}

/* --- LA QUESTION QUI DEMASQUE -------------------------------------------
   Un moment typographique, pas un second encadre : deux cadres qui se
   suivent se neutralisent. Ici le poids vient de la taille et du filet.
   ------------------------------------------------------------------------ */
.a-corps blockquote {
  margin: clamp(22px, 3.4vmin, 32px) 0;
  padding: 0 0 0 clamp(16px, 2.4vmin, 24px);
  border-left: 1px solid var(--terracotta);
  font-family: var(--font-display);
  font-size: var(--a-lg);
  line-height: 1.38;
  font-weight: 600;
  color: var(--a-accent);
  letter-spacing: -.012em;
}
.a-corps blockquote p { margin: 0; }

/* --- IMAGES -------------------------------------------------------------
   Dessinees en SVG et posees dans le document : elles heritent ainsi du
   theme, ne coutent aucune requete, et ne peuvent pas decaler la page.
   ------------------------------------------------------------------------ */
.a-figure {
  margin: clamp(26px, 4vmin, 40px) 0;
}
.a-figure svg { width: 100%; height: auto; display: block; border-radius: 14px; }

/* --- LES SCHEMAS SUR TELEPHONE ------------------------------------------
   ⚠ MESURE, pas impression : un schema dessine dans un viewBox de 720 unites
   et rendu sur 315 px se reduit d un facteur 0,44. Ses etiquettes de 12,5 px
   arrivent alors a 5,5 px a l ecran, et le plus gros titre a 7,4 px. Le seuil
   de lisibilite est autour de 9 : sur un telephone, ces dessins n etaient pas
   petits, ils etaient illisibles. Le defaut existait des le premier article,
   et rien ne le signalait — la page ne debordait pas, aucun controle
   n echouait.
   On garde donc une largeur minimale qui tient le texte au-dessus du seuil
   (la plus petite etiquette fait 12 px : 720 x 0,78 = 560) et on laisse le dessin glisser sous le
   doigt. Le rembourrage lateral compense la gouttiere du corps de texte, pour
   que le schema parte bien du bord.
   ⚠ Seul le SVG porte la largeur minimale : la legende, elle, reste sur la
   largeur du texte et ne glisse pas. C est elle qui porte le propos en toutes
   lettres — un lecteur qui ne fait pas glisser ne perd donc pas l idee.
   ⚠ Et le lien d un mot voisin passe a 44 px : c est un lien de navigation
   dans une liste, pas un lien glisse au fil d une phrase. */
@media (max-width: 620px) {
  .a-voisins dt a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 620px) {
  .a-figure {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .a-figure svg { min-width: 560px; }
  .a-figure figcaption { min-width: 0; position: sticky; left: 0; }
}
.a-figure figcaption {
  margin-top: 10px;
  font-size: var(--a-sm);
  color: var(--fg-muted);
  line-height: 1.5;
}

/* --- LES MOTS QUI VONT AVEC --------------------------------------------
   Le moteur du referencement d un lexique : ce qui relie les articles entre
   eux. Une liste de definitions, pas des cartes — des cartes de meme taille
   feraient croire que ces mots sont interchangeables.
   ------------------------------------------------------------------------ */
.a-voisins { margin-top: var(--a-rythme); }
.a-voisins dl { margin: 0; }
.a-voisins div + div { margin-top: 1.05em; padding-top: 1.05em; border-top: 1px solid var(--rule); }
.a-voisins dt { font-weight: 700; font-size: var(--a-md); margin-bottom: .12em; }
.a-voisins dt a { text-decoration: none; color: var(--a-accent); }
.a-voisins dt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.a-voisins dd { margin: 0; color: var(--fg-muted); }
.a-voisins .a-bientot { color: var(--fg-muted); }

/* --- APPEL FINAL --------------------------------------------------------- */
.a-fin {
  margin-top: var(--a-rythme);
  padding: clamp(22px, 3.6vmin, 34px);
  background: rgba(200, 85, 61, .09);
  border: 1px solid rgba(200, 85, 61, .26);
  border-radius: var(--a-rond);
}
html.dark .a-fin {
  background: rgba(224, 138, 111, .10);
  border-color: rgba(224, 138, 111, .26);
}
.a-fin h2 { margin-top: 0; }
.a-fin-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.a-fin-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  font-weight: 700; text-decoration: none; font-size: var(--a-sm);
}
.a-wa { background: var(--a-cta-fond); color: var(--a-cta-ink); }
.a-wa:hover { filter: brightness(1.07); }
.a-rdv {
  /* Fond opaque, et non le fond teinte de l appel final : pose dessus, le
     texte tombait a 4,34:1. Sur son propre fond il remonte a 4,79 — et le
     bouton secondaire se detache mieux du bloc. */
  background: var(--ivory);
  border: 1.5px solid var(--a-accent); color: var(--a-accent);
}
.a-rdv:hover { background: rgba(200, 85, 61, .1); }

/* --- INFORMATIONS LEGALES ------------------------------------------------
   ⚠ Pose DANS le contenu, pas dans la chrome : ouvert par son adresse, un
   article n'offrait aucun chemin vers les mentions legales (son .a-pied ne
   porte que « Retour au site », et html.sc le masque). Ici, le bloc survit
   sans JavaScript, survit dans le panneau du site, et reste dans le HTML
   servi — donc suivable par un robot.
   Cible tactile : 44 px de haut, comme les liens de « Les mots qui vont
   avec » depuis le 2026-08-27. */
.a-legal {
  max-width: var(--a-lecture);
  margin: clamp(28px, 5vmin, 48px) auto 0;
  padding-top: clamp(16px, 2.5vmin, 24px);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 2px 20px;
  font-size: var(--a-sm);
}
.a-legal a {
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.a-legal a:hover { color: var(--a-accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- PIED --------------------------------------------------------------- */
.a-pied {
  max-width: var(--a-lecture);
  margin: 0 auto;
  padding: clamp(24px, 4vmin, 40px) 20px clamp(30px, 5vmin, 52px);
  border-top: 1px solid var(--rule);
  font-size: var(--a-sm);
  color: var(--fg-muted);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}
.a-pied a { color: var(--fg-muted); }
.a-pied a:hover { color: var(--a-accent); }

/* --- FOCUS -------------------------------------------------------------- */
:where(a, button):focus-visible {
  outline: 2.5px solid var(--ochre);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- MOUVEMENT ----------------------------------------------------------
   Un seul moment : l article se pose en arrivant. Rien d autre ne bouge — en
   lecture longue, chaque animation supplementaire est une interruption.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .a-corps > * { animation: a-pose .5s cubic-bezier(.16,1,.3,1) backwards; }
  .a-corps > *:nth-child(2) { animation-delay: .04s; }
  .a-corps > *:nth-child(3) { animation-delay: .08s; }
}
@keyframes a-pose {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  body { line-height: 1.68; }
  .a-tete { padding-top: 14px; }
  .a-fin-actions a { width: 100%; }

  /* Cibles tactiles : au doigt, la chrome et la navigation atteignent 44 px.
     La zone cliquable grandit, le texte ne bouge pas — il reste centre dans
     sa boite. Les liens DANS un paragraphe sont volontairement exclus : la
     regle ne vise pas le texte courant, et les grossir casserait l interligne. */
  .a-marque, .a-theme, .a-fil a, .a-pied a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .a-theme { width: 44px; }
  .a-fil li { min-height: 44px; }
}

/* --- DANS LE PANNEAU DU SITE --------------------------------------------
   Un article garde sa propre adresse — c est ce qui le rend indexable — mais
   depuis le site il s ouvre dans le meme panneau que les documents legaux,
   sans qu on quitte la page. Meme mecanique : la page se detecte en iframe et
   efface sa propre chrome, puisque le panneau porte deja le titre, le theme
   et le bouton de fermeture. Deux en-tetes a l ecran se contrediraient.
   ------------------------------------------------------------------------ */
.embedded .a-tete,
.embedded .a-fil,
.embedded .a-pied { display: none; }

/* Le panneau apporte son propre fond : la lueur ferait un deuxieme voile. */
.embedded body::before { display: none; }

.embedded body { background: transparent; }
.embedded .a-corps { padding-top: 4px; padding-bottom: clamp(24px, 5vmin, 44px); }
.embedded .a-corps h1 { margin-top: 0; }