/* ==========================================================================
   site.css — composants des pages internes de toolpilot.fr
   Complète style.css (variables, navbar, hero, cta, footer, price-card).
   Aucune redéfinition des variables : la charte reste dans style.css.
   ========================================================================== */

/* ── Accessibilité ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--primary);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Fil d'Ariane ──────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 104px 24px 0;
  font-size: .85rem;
  color: var(--gray-400);
}
.breadcrumb a { color: var(--gray-300); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-light); text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: var(--gray-600); }
.breadcrumb span[aria-current] { color: var(--gray-100); }

/* ── En-tête de page interne ───────────────────────────────────────────── */
.page-head { padding: 32px 0 8px; }
.page-head h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.12;
  color: var(--white);
  margin: 14px 0 0;
  letter-spacing: -.02em;
}
.lead {
  color: var(--gray-200);
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 68ch;
  margin-top: 18px;
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.section { padding: 56px 0; }
.section.alt { background: var(--dark-2); border-block: 1px solid rgba(255,255,255,.05); }
.section h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.section h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 8px; }

/* ── Grilles de cartes ─────────────────────────────────────────────────── */
.grid-2, .grid-3 { display: grid; gap: 20px; margin-top: 28px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 24px;
}
.card p { color: var(--gray-200); font-size: .95rem; line-height: 1.65; margin: 0; }

/* ── Alternance texte / capture ────────────────────────────────────────── */
.feature-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.35fr);
  gap: 40px;
  align-items: center;
  margin-top: 48px;
}
.feature-row.reverse .feature-copy { order: 2; }
.feature-copy h3 { font-size: 1.5rem; color: var(--white); margin-bottom: 12px; }
.feature-copy p { color: var(--gray-200); line-height: 1.7; }

/* ── Captures d'écran ──────────────────────────────────────────────────── */
.shot { margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg);
  background: var(--dark-2);
}
.shot figcaption {
  margin-top: 10px;
  font-size: .82rem;
  color: var(--gray-400);
  line-height: 1.5;
}
.section > .container > .shot { max-width: 1100px; margin-inline: auto; }

/* ── Liens et CTA ──────────────────────────────────────────────────────── */
.link-arrow {
  display: inline-block;
  margin-top: 14px;
  color: var(--primary-light);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after { content: " →"; transition: transform .15s ease; display: inline-block; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

.cta-inline { margin-top: 28px; text-align: center; }

/* ── Tarifs ────────────────────────────────────────────────────────────── */
.pricing-single {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}
.price-alt { color: var(--gray-300); font-size: .9rem; margin-top: 6px; }
.price-side h2 { margin-bottom: 12px; }
.price-side h3 { margin-top: 26px; }
.price-side p { color: var(--gray-200); line-height: 1.7; }

/* ── Étapes numérotées ─────────────────────────────────────────────────── */
.steps { counter-reset: step; list-style: none; padding: 0; margin-top: 24px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 22px;
  color: var(--gray-200);
  line-height: 1.7;
}
.steps li strong { color: var(--white); }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(37,99,235,.16);
  border: 1px solid rgba(59,130,246,.4);
  color: var(--primary-light);
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-list { max-width: 820px; }
.faq-item {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  background: var(--dark-3);
  margin-bottom: 12px;
  padding: 0 20px;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2 { font-size: 1.02rem; color: var(--white); margin: 0; font-weight: 600; }
.faq-item summary::after {
  content: "+";
  color: var(--primary-light);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--gray-200); line-height: 1.7; padding-bottom: 20px; margin: 0; }

/* ── Formulaire de démo ────────────────────────────────────────────────── */
.form-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(260px, 1fr);
  gap: 44px;
  align-items: start;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: .85rem; color: var(--gray-300); font-weight: 500; }
.form-group input, .form-group textarea {
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--white);
  font: inherit;
  font-size: .95rem;
  width: 100%;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-light); }
.form-note { margin-top: 14px; font-size: .9rem; min-height: 1.2em; }
.form-note.ok { color: var(--green); }
.form-note.err { color: var(--red); }
.form-legal { margin-top: 12px; font-size: .78rem; color: var(--gray-400); line-height: 1.6; }
.form-legal a { color: var(--primary-light); }

.demo-side h2 { font-size: 1.2rem; }
.demo-side h3 { margin-top: 24px; }
.demo-side ul { padding-left: 18px; color: var(--gray-200); line-height: 1.8; }
.demo-side p { color: var(--gray-200); }

/* ── Accueil : hero ────────────────────────────────────────────────────── */
.hero-copy { max-width: 760px; }
.hero-sub { color: var(--gray-200); font-size: 1.15rem; line-height: 1.7; margin-top: 20px; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-note { margin-top: 22px; font-size: .88rem; color: var(--gray-400); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .feature-row, .pricing-single, .form-wrap { grid-template-columns: 1fr; gap: 28px; }
  .feature-row.reverse .feature-copy { order: 0; }
  .breadcrumb { padding-top: 92px; }
  .section { padding: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow::after { transition: none; }
}

/* ── Surcharges de style.css ───────────────────────────────────────────── */

/* .btn-outline n'existait pas : sans règle, le bouton secondaire du hero
   était invisible sur fond sombre. Alias de la variante sombre existante. */
.btn-outline {
  background: transparent;
  color: var(--gray-100);
  border: 1px solid rgba(255,255,255,.22);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--white);
  background: rgba(37,99,235,.1);
}

/* Les lignes d'offre n'ont pas de <svg> : on dessine la coche en CSS
   et on remonte le contraste (rgba .55 passait sous le seuil WCAG AA). */
.price-features li {
  align-items: flex-start;
  color: var(--gray-100);
  line-height: 1.55;
}
.price-features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background: var(--green);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Les sections enchaînaient deux paddings pleins : trop d'air mort entre
   le contenu et le bloc d'appel à l'action final. */
.section + .cta, .pricing-single + .cta { padding-top: 72px; }
.cta { padding: 72px 0; }
.cta h2 { margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   MANUEL D'ATELIER
   Le contenu éditorial : colonne de lecture étroite, réponse en tête,
   schémas dessinés, tables denses. Rien de décoratif qui ne porte pas
   d'information.
   ══════════════════════════════════════════════════════════════════════ */

.container.narrow { max-width: 760px; }

.page-intro { padding: 8px 0 4px; }
.page-intro p, .page-body p {
  color: var(--gray-200);
  line-height: 1.75;
  font-size: 1.02rem;
  margin: 0 0 18px;
}
.page-body { padding: 8px 0 56px; }
.page-body h2 {
  color: var(--white);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -.01em;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.page-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 8px; }
.page-body h3 { color: var(--white); font-size: 1.08rem; margin: 26px 0 8px; }

/* ── Réponse en tête (AEO) ──────────────────────────────────────────────
   Le passage que les moteurs de réponse citent. Il est visible, pas caché
   dans un attribut : ce qui est bon pour la machine l'est pour le lecteur
   pressé qui veut la réponse sans dérouler la page. */
.answer-first {
  margin: 22px 0 6px;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(6,182,212,.09), transparent 70%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.answer-first p {
  margin: 0;
  color: var(--gray-100);
  font-size: 1.06rem;
  line-height: 1.65;
}

/* ── Formule ───────────────────────────────────────────────────────────── */
.formule {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.12rem;
  color: var(--white);
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 18px 0 22px;
  text-align: center;
  letter-spacing: .01em;
}

/* ── Listes à puces ────────────────────────────────────────────────────── */
.bullets { list-style: none; padding: 0; margin: 20px 0; }
.bullets li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--gray-200);
  line-height: 1.7;
}
.bullets li strong { color: var(--white); }
.bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── Encadré « à retenir » ─────────────────────────────────────────────── */
.retenir {
  margin: 30px 0;
  padding: 22px 24px;
  background: var(--dark-3);
  border: 1px solid rgba(6,182,212,.22);
  border-radius: var(--radius);
}
.retenir h3 {
  margin: 0 0 10px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent);
}
.retenir p { margin: 0; color: var(--gray-100); line-height: 1.7; }

/* ── Liens en ligne dans le contenu ────────────────────────────────────
   Une seule règle, pour une raison mesurée : jusqu'au 4 août 2026, seuls
   trois sélecteurs coloraient des liens (.source a, .cocon-list a,
   .cocon-up .cocon-intro a). Tous les autres tombaient sur le bleu par
   défaut du navigateur, #0000ee, soit un contraste de 1,81:1 sur fond
   sombre — illisible. Vingt-et-un liens étaient dans ce cas, dont six sur
   la page d'accueil, et l'œil ne les avait pas attrapés en quatre relectures.

   D'où le choix de cibler large plutôt que d'ajouter une quatrième rustine :
   tout lien de contenu hérite d'ici, et un nouveau bloc ne peut plus naître
   invisible. Le soulignement n'est pas décoratif : c'est le seul indice qui
   survit à un daltonisme.
   Garde : node check-contraste.mjs — refuse tout lien sous 4,5:1 (WCAG AA). */
main a:not(.btn):not(.link-arrow):not(.cocon-card):not(.faq-item a) {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(59,130,246,.45);
}
main a:not(.btn):not(.link-arrow):not(.cocon-card):hover {
  text-decoration-color: currentColor;
}
/* Les cartes de cocon sont des blocs cliquables : leur couleur vient du
   h3 et du p qu'elles contiennent, pas de l'ancre. */
main a.cocon-card { text-decoration: none; }

/* ── Source visible ────────────────────────────────────────────────────── */
.source {
  font-size: .87rem;
  color: var(--gray-400);
  border-left: 2px solid rgba(255,255,255,.12);
  padding-left: 14px;
  margin: 8px 0 24px;
  line-height: 1.6;
}
.source a { color: var(--primary-light); }

/* ── Bloc d'autorité (pied des pages éditoriales) ───────────────────────
   Qui publie, comment c'est vérifié, où signaler une erreur. Volontairement
   discret : c'est une mention de rédaction, pas un encart promotionnel. Il ne
   doit jamais peser plus que le contenu qu'il signe. */
.signature {
  margin: 56px 0 8px;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.signature p {
  font-size: .87rem;
  color: var(--gray-400);
  line-height: 1.7;
  margin: 0 0 10px;
}
.signature p:last-child { margin-bottom: 0; }
.signature strong { color: var(--gray-100); font-weight: 600; }
.signature a { color: var(--primary-light); }

/* ── Tables de données ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  color: var(--gray-400);
  font-size: .85rem;
  padding-bottom: 10px;
}
.data-table th, .data-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--gray-200);
}
.data-table thead th {
  text-align: right;
  color: var(--gray-400);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.data-table tbody th[scope="row"] {
  text-align: left;
  color: var(--white);
  font-weight: 700;
}
/* L'en-tête de la colonne des libellés suit ses cellules : à gauche, pas à
   droite comme les colonnes de valeurs. */
.data-table thead th:first-child { text-align: left; }
.data-table tbody tr:hover td, .data-table tbody tr:hover th { background: rgba(255,255,255,.03); }
/* Un tableau de valeurs se compare en colonne, donc aligné à droite. Un tableau
   dont les cellules portent des phrases se lit de gauche à droite : le même
   alignement y rend le texte illisible en escalier. */
.data-table.texte th, .data-table.texte td { text-align: left; }
.data-table .num-fort { color: var(--white); font-weight: 700; }
.data-table abbr { text-decoration: none; border-bottom: 1px dotted var(--gray-500); }

/* ── Schémas dessinés ──────────────────────────────────────────────────── */
.schema { margin: 30px 0; }
.svg-schema {
  width: 100%;
  height: auto;
  color: var(--gray-300);
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px;
  --schema-bg: #0d1428;
}
.svg-label { fill: var(--gray-200); font-size: 14px; font-family: inherit; }
.svg-label-lg { fill: #fff; font-size: 18px; font-weight: 700; }
.schema figcaption {
  margin-top: 12px;
  font-size: .9rem;
  color: var(--gray-400);
  line-height: 1.6;
}

/* ── Cocon : maillage interne ──────────────────────────────────────────── */
.cocon { padding: 44px 0; border-top: 1px solid rgba(255,255,255,.07); }
.cocon h2 { color: var(--white); font-size: 1.5rem; margin: 0 0 6px; }
.cocon-intro { color: var(--gray-400); margin: 0 0 24px; max-width: 700px; }
.cocon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.cocon-card {
  display: block;
  padding: 22px;
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.cocon-card:hover { border-color: rgba(59,130,246,.45); transform: translateY(-2px); }
.cocon-card h3 { color: var(--white); margin: 0 0 8px; font-size: 1.05rem; }
.cocon-card p { color: var(--gray-400); margin: 0; font-size: .93rem; line-height: 1.6; }
.cocon-card .link-arrow { margin-top: 12px; font-size: .9rem; }
.cocon-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cocon-list a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--gray-200);
  text-decoration: none;
  font-size: .9rem;
}
.cocon-list a:hover { border-color: var(--primary-light); color: var(--white); }
.cocon-up .cocon-intro a { color: var(--primary-light); }

/* ── Pont vers le produit ──────────────────────────────────────────────
   Le site ne vend rien en direct. Ce bloc est le seul endroit qui bascule
   du savoir vers l'outil, et il se formule depuis le problème de la page. */
.pont { padding: 20px 0 60px; }
.pont-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(6,182,212,.07));
  border: 1px solid rgba(59,130,246,.28);
  border-radius: var(--radius);
}
.pont-inner p {
  flex: 1 1 380px;
  margin: 0;
  color: var(--gray-100);
  line-height: 1.65;
}
.pont-inner .btn { flex: 0 0 auto; }

/* ── Comparatif à colonnes ─────────────────────────────────────────────── */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.compare-col {
  padding: 20px;
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
}
.compare-col h3 { margin: 0 0 12px; color: var(--white); font-size: 1rem; }
.compare-col p { font-size: .92rem; margin: 0 0 10px; line-height: 1.6; }
.compare-col p:last-child { margin-bottom: 0; }
.compare-col strong { color: var(--gray-100); }

/* ── Calculateur ───────────────────────────────────────────────────────── */
.calc {
  background: var(--dark-3);
  border: 1px solid rgba(6,182,212,.24);
  border-radius: var(--radius);
  padding: 26px;
  margin: 8px 0 30px;
}
.calc-row { margin-bottom: 18px; }
.calc-row:last-of-type { margin-bottom: 8px; }
.calc-row label {
  display: block;
  font-size: .88rem;
  color: var(--gray-300);
  margin-bottom: 7px;
}
.calc-row input,
.calc-row select {
  width: 100%;
  padding: 13px 16px;
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Le sélecteur reçoit du texte, pas des chiffres : la police du site s'y lit
   mieux que la chasse fixe réservée aux valeurs. */
.calc-row select {
  font-family: inherit;
  font-size: 1.02rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-400) 50%),
                    linear-gradient(135deg, var(--gray-400) 50%, transparent 50%);
  background-position: calc(100% - 21px) 22px, calc(100% - 15px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.calc-row input:focus,
.calc-row select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.calc-note { font-size: .86rem; color: var(--gray-400); margin: 0; }

/* Zone de résultat : elle porte le seul chiffre que l'atelier va recopier,
   elle doit se distinguer des champs de saisie au premier coup d'œil. */
.calc-sortie {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--dark-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.calc-sortie .calc-note { margin: 0; }
.calc-resultat {
  margin: 0 0 10px;
  font-size: 1.16rem;
  color: var(--gray-200);
}
.calc-resultat strong {
  color: var(--accent);
  font-size: 1.5rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.calc-detail {
  margin: 0 0 6px;
  font-size: .9rem;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}
.calc-detail:last-child { margin-bottom: 0; }
.calc-detail strong { color: var(--gray-200); }
/* Deux conversions indépendantes dans le même bloc : la ligne dit qu'elles
   ne se répondent pas. */
.calc-sep {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 26px 0 22px;
}

@media (max-width: 640px) {
  .pont-inner { padding: 22px; }
  .page-body h2 { margin-top: 34px; }
}
.svg-label-fort { fill: #fff; font-weight: 700; }
.svg-label-mute { fill: var(--gray-400); font-size: 13px; }
.svg-label-alerte { fill: #a78bfa; font-size: 13px; font-weight: 600; }
.svg-label-or { fill: #fbbf24; font-size: 13px; font-weight: 600; }

/* Une page sans fil d'Ariane (les hubs) n'a rien pour dégager la barre de
   navigation, qui est en position fixe : son H1 passait dessous. La garde
   d'espace ne doit pas dépendre de la présence du fil d'Ariane. */
.page-head--sous-nav { padding-top: 128px; }

/* ── Sommaire de page ──────────────────────────────────────────────────
   Sur une page de plusieurs milliers de mots, chercher une section en
   faisant défiler est un aveu d'échec. Sur grand écran le sommaire se cale
   dans la marge gauche et suit la lecture ; en dessous il se replie en tête
   de page, ouvert par défaut mais refermable. */
.sommaire {
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 0 24px;
}
.sommaire details {
  background: var(--dark-3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.sommaire summary {
  cursor: pointer;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  font-weight: 700;
  list-style: none;
}
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire summary::after {
  content: " ▾";
  color: var(--gray-500);
}
.sommaire details[open] summary::after { content: " ▴"; }
.sommaire ol {
  margin: 14px 0 4px;
  padding-left: 20px;
  counter-reset: som;
  list-style: none;
}
.sommaire li { counter-increment: som; margin-bottom: 7px; line-height: 1.45; }
.sommaire li::before {
  content: counter(som) ".";
  color: var(--gray-600);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.sommaire a { color: var(--gray-200); text-decoration: none; font-size: .93rem; }
.sommaire a:hover { color: var(--primary-light); text-decoration: underline; }

@media (min-width: 1280px) {
  .sommaire {
    position: sticky;
    top: 96px;
    float: left;
    width: 232px;
    max-width: none;
    margin: 0 0 0 calc(50vw - 620px);
    padding: 0;
    z-index: 5;
  }
  .sommaire details { background: transparent; border: 0; border-left: 2px solid rgba(255,255,255,.1); border-radius: 0; padding: 4px 0 4px 16px; }
  .sommaire summary { pointer-events: none; }
  .sommaire summary::after { display: none; }
}

/* Le titre visé par une ancre ne doit pas se retrouver sous la barre fixe. */
.page-body h2[id] { scroll-margin-top: 96px; }

/* ── Photos de contenu ─────────────────────────────────────────────────
   Une photo n'a pas à trancher avec le fond sombre : le liseré et le rayon
   la posent dans la page au lieu de la coller dessus. La légende est un
   contenu à part entière — elle dit ce que la photo APPREND, pas ce qu'elle
   montre (l'alt s'en charge). */
.photo { margin: 30px 0; }
.photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.09);
  background: var(--dark-2);
}
.photo figcaption {
  margin-top: 10px;
  font-size: .84rem;
  color: var(--gray-400);
  line-height: 1.6;
}
/* Vignette carrée : elle accompagne un paragraphe, elle ne l'écrase pas. */
.photo--carre { max-width: 420px; }
.photo--carre img { aspect-ratio: 1 / 1; object-fit: cover; }