/* ⭐ LA PAGE « BREVET 2027 » (2026-09-21).
   Une seule idée de mise en forme : le lecteur doit distinguer d'un coup d'œil CE QUE DISENT LES
   TEXTES de CE QU'AZULMA RECOMMANDE. Tout le reste découle de là — deux blocs, deux couleurs, deux
   étiquettes. Mélanger les deux serait le défaut le plus grave possible ici : une famille prendrait
   notre avis pédagogique pour une règle d'examen. */

.chapo { font-size: 18px; line-height: 1.62; max-width: 68ch; }
.verif { font-size: 14.5px; color: var(--ink-500); max-width: 72ch; }
.nondit { font-size: 14.5px; color: var(--ink-500); max-width: 72ch; border-left: 3px solid var(--line); padding-left: 14px; }

/* Les appels de note. Discrets : ils ne doivent pas hacher la lecture, mais rester cliquables
   au doigt — d'où la zone de 20 px, plus grande que le chiffre. */
.srcref { font-size: 11px; line-height: 0; }
.srcref a {
  display: inline-block; min-width: 20px; text-align: center;
  color: var(--accent, #3f7d52); text-decoration: none; font-weight: 700;
}
.srcref a:hover, .srcref a:focus { text-decoration: underline; }

/* Les deux blocs. `.officiel` = le texte ; `.azulma` = notre lecture. */
.bloc { border-radius: 14px; padding: 18px 20px; margin: 18px 0 0; max-width: calc(72ch + 40px); }
.bloc > h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: .01em; }
.bloc.officiel { background: var(--card); border: 1px solid var(--line); }
.bloc.officiel > h3 .etiq { color: var(--ink-500); font-weight: 600; }
.bloc.azulma { background: rgba(214, 158, 46, .08); border: 1px solid rgba(214, 158, 46, .32); }
.bloc.azulma > h3 .etiq { color: #8a6118; font-weight: 600; }
/* ⚠️ L'étiquette n'est plus un `::before` : elle est dans le HTML. Le mode Lecture de Safari — que
   cette page déclenche, contrairement au reste du site — supprime tout le CSS, et la distinction
   entre règle d'examen et conseil Azulma disparaissait avec lui. Cf. generate-brevet-2027.mjs. */

aside.azulma {
  margin: 14px 0 0; padding: 14px 18px; max-width: calc(72ch + 36px);
  background: rgba(214, 158, 46, .08); border-left: 3px solid rgba(214, 158, 46, .55); border-radius: 0 12px 12px 0;
}
aside.azulma p { margin: 0; line-height: 1.6; }
aside.azulma .liens { margin-top: 8px; font-size: 14.5px; }

/* Les tableaux. `overflow-x: auto` sur un conteneur PROPRE : sans lui, un tableau de trois
   colonnes pousserait la page entière à défiler latéralement sur un téléphone.

   ⚠️⚠️ `touch-action: pan-y` N'EST PAS UN ORNEMENT — c'est le correctif d'un défaut signalé par Max
   au doigt, sur téléphone : « le scroll est cassé ».
   🔴 LA CAUSE, mesurée. En CSS, `overflow-x: auto` force `overflow-y` à calculer `auto` lui aussi
   (une valeur `visible` ne survit pas en face d'une valeur non-`visible`). Ces deux conteneurs
   étaient donc AUSSI des conteneurs de défilement VERTICAL — sans jamais rien avoir à y faire
   défiler (mesuré : `scrollWidth === clientWidth`, ils ne débordent pas). Un geste vertical qui
   commence sur le tableau est remis à cet élément, qui ne peut pas bouger : le doigt glisse et la
   page reste immobile. Et le tableau des dates est le PREMIER gros bloc de la page — précisément
   là où tombe le pouce de quelqu'un qui vient chercher les dates.
   ⭐ `pan-y` rend le geste vertical à la PAGE. On perd le glissement horizontal à l'intérieur du
   tableau — sans conséquence tant qu'il ne déborde pas, et c'est le cas ; le jour où un tableau
   déborderait vraiment, c'est le tableau qu'il faudrait revoir, pas ce réglage. */
.tablewrap { overflow-x: auto; touch-action: pan-y; max-width: calc(72ch + 40px); margin: 16px 0 0; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tablewrap thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
.dates td.h { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.dates tbody tr:first-child td, .avantapres tbody tr td { line-height: 1.5; }
.avantapres tr.stable td { background: rgba(63, 125, 82, .06); }

.badge {
  display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: rgba(63, 125, 82, .12); color: #2f5f3e; vertical-align: middle; margin-left: 6px;
}
.badge.duree { background: var(--line); color: var(--ink-700); font-weight: 600; }
.cle { background: rgba(214, 158, 46, .25); padding: 0 3px; border-radius: 3px; }

.details { max-width: 72ch; line-height: 1.6; }
.details li { margin-bottom: 8px; }

/* La FAQ : des <details> natifs, zéro JavaScript. */
.faq { max-width: calc(72ch + 8px); margin-top: 14px; display: grid; gap: 8px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.faq summary { padding: 13px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--ink-500); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .rep { padding: 0 18px 14px; }
.faq .rep p { margin: 0; line-height: 1.62; }

.sources { max-width: 72ch; line-height: 1.55; padding-left: 22px; }
.sources li { margin-bottom: 12px; }
.sources .ref { display: block; font-size: 13.5px; color: var(--ink-500); margin-top: 2px; }

@media (max-width: 560px) { .chapo { font-size: 17px; } .bloc { padding: 15px 16px; } }

/* Le complément de libellé dans le tableau des dates : présent pour qui lit, effacé pour qui scanne. */
.dates .sub { display: block; font-size: 13.5px; color: var(--ink-500); line-height: 1.4; margin-top: 2px; }
/* ⚠️ PAS de `white-space: nowrap` sur la colonne des dates. Essayé, puis retiré à la capture : la
   date tenait sur une ligne, mais le tableau débordait et c'est l'HORAIRE — l'information qu'on
   vient chercher — qui se retrouvait coupé hors cadre. Une date qui passe à la ligne est un moindre
   mal ; une heure invisible ne l'est pas. */
.dates td:first-child { font-weight: 600; }