/* Composants éditoriaux — deuxième vague de guides.
 *
 * Feuille séparée, et pas un ajout aux feuilles de guides existantes : ces
 * dernières sont servies avec un cache d'une semaine et référencées par des
 * pages en production. Y toucher obligerait à changer leur jeton sur toutes
 * ces pages, pour des composants qu'elles n'utilisent pas. Un fichier à part
 * ne coûte qu'une requête et laisse les pages publiées strictement intactes.
 *
 * Rien ici ne redéfinit une règle existante. Tous les sélecteurs sont
 * nouveaux, à l'exception de ceux repris tels quels du guide Sécurité pour
 * que Maintenance dispose des mêmes tableaux et du même appel à l'action.
 */

/* ── Liste de contrôle ────────────────────────────────────────────────
   Une vraie liste à cocher, utilisable telle quelle par le lecteur. La case
   est décorative : elle n'est pas un input, parce que rien n'est soumis et
   qu'un état non persistant tromperait plus qu'il n'aiderait. */
.liste-controle {
  margin: clamp(24px, 2.6vw, 32px) 0;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
}

.liste-controle > p:first-child {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.liste-controle ul { margin: 0; padding: 0; list-style: none; }

.liste-controle li {
  position: relative;
  padding: 0 0 12px 30px;
  line-height: 1.6;
}

.liste-controle li:last-child { padding-bottom: 0; }

.liste-controle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--green);
  border-radius: 3px;
}

.liste-controle li b {
  display: block;
  color: var(--ink);
  font-weight: 640;
}

/* ── Garde-fou ────────────────────────────────────────────────────────
   Réservé aux gestes qui peuvent détruire quelque chose. Il ne sert pas à
   attirer l'œil sur un conseil ordinaire : s'il apparaît partout, il ne
   signale plus rien. */
.garde-fou {
  /* Ces trois valeurs sont locales au composant plutôt que globales : aucune
     des deux vitrines n'a de jeton d'alerte, et en ajouter un au :root
     obligerait à toucher « home-v2.css », servi avec un cache d'une semaine
     sur des pages en production.
     Contrastes mesurés : l'étiquette #7a4713 sur le voile #faf1e3 donne
     8,4:1, le texte courant hérité 11,2:1. Les deux passent AA largement. */
  --attention: #a2601c;
  --attention-fonce: #7a4713;
  --attention-voile: #faf1e3;

  margin: clamp(24px, 2.6vw, 32px) 0;
  padding: clamp(20px, 2.2vw, 26px);
  border-left: 3px solid var(--attention);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--attention-voile);
}

.garde-fou > p:first-child {
  margin: 0 0 8px;
  color: var(--attention-fonce);
  font-family: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.garde-fou p:last-child { margin-bottom: 0; }

/* ── Note technique ───────────────────────────────────────────────────
   Le passage que le dirigeant peut sauter et que le développeur cherche.
   Le repli est natif : pas de script, et la recherche dans la page continue
   de fonctionner sur le contenu fermé dans les navigateurs récents. */
.note-technique {
  margin: clamp(22px, 2.4vw, 30px) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
}

.note-technique > summary {
  padding: 14px 18px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 640;
  cursor: pointer;
  list-style: none;
}

.note-technique > summary::-webkit-details-marker { display: none; }
.note-technique > summary::before { content: "+ "; font-family: var(--mono); color: var(--green); }
.note-technique[open] > summary::before { content: "– "; }

.note-technique > div {
  padding: 0 18px 16px;
  font-size: 0.95rem;
}

.note-technique p:last-child { margin-bottom: 0; }

.note-technique code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: 0.88em;
}

/* ── Tableau comparatif et appel à l'action ───────────────────────────
   Repris à l'identique de « guide-securite.css », que Maintenance
   n'importe pas. Mêmes règles, mêmes jetons : les deux clusters de guides
   se comportent pareil. */
.scroll-tableau {
  overflow-x: auto;
  margin: clamp(26px, 3vw, 36px) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
}

.tableau-comparaison { width: 100%; border-collapse: collapse; font-size: 0.94rem; }

.tableau-comparaison th,
.tableau-comparaison td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tableau-comparaison thead th {
  color: var(--ink);
  font-family: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tableau-comparaison tbody th { color: var(--ink); font-weight: 640; }
.tableau-comparaison tbody tr:last-child th,
.tableau-comparaison tbody tr:last-child td { border-bottom: 0; }

.guide-cta { margin: clamp(28px, 3.2vw, 40px) 0 0; }

/* ── Réponse directe ──────────────────────────────────────────────────
   Le bloc le plus important de la page. Il porte la question telle qu'elle
   est posée et sa réponse en deux ou trois phrases, avant toute explication.
   Un lecteur pressé s'arrête là ; un moteur génératif y trouve un passage
   autonome à citer sans avoir à recomposer le sens depuis trois paragraphes.

   Il est marqué en HTML par un <section> avec son propre titre, pas par un
   simple encadré décoratif : la structure doit survivre à l'extraction. */
.reponse-directe {
  margin: clamp(28px, 3vw, 38px) 0;
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--white);
}

.reponse-directe > p:first-child {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reponse-question {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.42rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.reponse-texte {
  margin: 0;
  color: var(--body);
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  line-height: 1.62;
}

.reponse-texte + .reponse-texte { margin-top: 12px; }

/* ── Sortie secondaire de l'appel ─────────────────────────────────────────
   Un guide propose deux suites : confier le travail, ou le faire soi-même.
   La seconde est un lien, pas un bouton : elle existe sans concurrencer la
   première. Sur un fond sombre, elle reprend le filet clair. */
.appel-carte .appel-secondaire {
  display: inline-block;
  margin-top: 14px;
  color: var(--white);
  border-bottom-color: var(--line-light);
}

.appel-carte .appel-secondaire:hover { border-bottom-color: var(--white); }

@media (max-width: 640px) {
  .appel-carte .appel-secondaire { margin-top: 16px; }
}