/* XQV9 — famille /challenge/* (style 2 « OBJECTIF CHALLENGE »). Complète style.css (jamais modifié
   par une famille) avec les seuls blocs propres au challenge : timeline de progression, pastilles de
   taille, blocs de règles sourcées, portes, CTA collant mobile. Palette : variables --xqv9-* de
   style.css uniquement, aucune teinte nouvelle (brief design XQV9 §3 : le bleu marque l'état actif,
   la progression, les données importantes et le CTA). Aucun script : le choix de taille est un
   groupe de boutons radio stylé (onglets CSS), lisible et utilisable sans JavaScript. */

.chl-main { padding-bottom: var(--gap-md); }
.chl-section { padding: var(--gap-lg) 0 0; scroll-margin-top: 88px; }
.chl-section-compacte { padding-top: var(--gap-md); }
.chl-h2 { margin: 0 0 var(--gap-xs); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--xqv9-silver); font-weight: 650; max-width: 860px; }
.chl-h3 { margin: 0 0 var(--gap-2xs); font-size: 1rem; line-height: 1.35; color: var(--xqv9-silver); }
.chl-note, .chl-legende { margin: var(--gap-xs) 0 0; font-size: 0.85rem; color: var(--xqv9-text-secondary); max-width: 860px; }
.chl-legende { margin-top: var(--gap-sm); font-size: 0.78rem; }
.chl-muted { color: var(--xqv9-text-secondary); }
.chl-section a { color: var(--xqv9-blue-bright); }
.chl-section .btn-cta { color: var(--xqv9-bg); }
.chl-bandeau-fixture { margin: 0; padding: 0.6rem var(--gap-sm); text-align: center; font-weight: 700; letter-spacing: 0.06em; color: var(--xqv9-bg); background: var(--xqv9-silver); }

/* ---------- Hero + timeline de progression ---------- */

.chl-hero { position: relative; overflow: hidden; padding: var(--gap-xl) 0 var(--gap-md); }
.chl-hero::before {
  content: ""; position: absolute; z-index: -1; top: -180px; left: 50%; width: 720px; height: 720px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.12), transparent 70%);
}
.chl-h1 { max-width: 760px; }

.chl-timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--gap-xs); margin: var(--gap-lg) 0 0; padding: 0 0 var(--gap-2xs); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.chl-timeline::before { content: ""; position: absolute; top: 7px; left: 7px; right: 7px; height: 2px; background: linear-gradient(90deg, var(--xqv9-blue) 0%, var(--xqv9-blue) 75%, var(--xqv9-border) 100%); }
.chl-etape { position: relative; display: grid; align-content: start; gap: 0.25rem; padding-top: 1.6rem; scroll-snap-align: start; }
.chl-etape-point { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--xqv9-blue); box-shadow: 0 0 0 4px var(--xqv9-bg), 0 0 12px rgba(77, 163, 255, 0.55); }
.chl-etape-avenir .chl-etape-point { background: var(--xqv9-bg); border: 2px solid var(--xqv9-steel); box-shadow: 0 0 0 4px var(--xqv9-bg); }
.chl-etape-titre { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xqv9-silver); }
.chl-etape-texte { font-size: 0.82rem; color: var(--xqv9-text-secondary); }

/* ---------- Pastilles de taille (onglets CSS, sans script) ---------- */
/* Structure : input radio, puis son label (pastille), puis son panneau — répété par taille. Les
   pastilles restent en ligne (order 0), les panneaux passent dessous en pleine largeur (order 1) ;
   seul le panneau qui suit la pastille cochée est affiché. Sans CSS, tout reste lisible. */

.chl-tailles { display: flex; flex-wrap: wrap; gap: var(--gap-2xs); margin-top: var(--gap-md); scroll-margin-top: 88px; }
.chl-taille-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chl-taille-pastille { order: 0; display: inline-flex; align-items: center; min-width: 4.2rem; justify-content: center; padding: 0.55rem 1.1rem; border: 1px solid var(--xqv9-border); border-radius: var(--radius-pill); background: var(--xqv9-bg-secondary); color: var(--xqv9-text-secondary); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.chl-taille-pastille:hover { border-color: var(--xqv9-border-blue); color: var(--xqv9-silver); }
.chl-taille-input:checked + .chl-taille-pastille { border-color: var(--xqv9-blue); background: rgba(77, 163, 255, 0.14); color: var(--xqv9-blue-bright); box-shadow: 0 0 14px rgba(77, 163, 255, 0.25); }
.chl-taille-input:focus-visible + .chl-taille-pastille { outline: 2px solid var(--xqv9-blue-bright); outline-offset: 2px; }
.chl-taille-panneau { order: 1; flex-basis: 100%; display: none; margin-top: var(--gap-sm); }
.chl-taille-input:checked + .chl-taille-pastille + .chl-taille-panneau { display: block; }
.chl-taille-titre { margin: 0 0 var(--gap-sm); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xqv9-blue-bright); }

/* ---------- Blocs de règles : une règle par bloc ---------- */

.chl-blocs { display: grid; grid-template-columns: 1fr; gap: var(--gap-sm); align-items: start; }
.chl-bloc { padding: var(--gap-sm); border: 1px solid var(--xqv9-border); border-top: 2px solid var(--xqv9-blue); border-radius: var(--radius-md); background: var(--xqv9-card); }
.chl-bloc-sous-titre { display: block; font-size: 0.8rem; font-weight: 500; color: var(--xqv9-text-secondary); }
.chl-bloc-court { margin: 0 0 var(--gap-xs); font-size: 0.85rem; color: var(--xqv9-text-secondary); }
.chl-bloc-court a { white-space: nowrap; }
.chl-lignes { display: grid; gap: var(--gap-2xs); margin: 0; padding: 0; list-style: none; }
.chl-ligne { display: grid; gap: 0.2rem; padding: 0.7rem 0.75rem; border: 1px solid var(--xqv9-border); border-radius: 10px; background: var(--xqv9-bg-secondary); font-size: 0.82rem; }
.chl-ligne-programme { font-weight: 650; color: var(--xqv9-silver); }
.chl-ligne-valeur { font-size: 0.95rem; color: var(--xqv9-text); }
.chl-chiffre, .chl-montant { font-weight: 750; color: var(--xqv9-silver); font-variant-numeric: tabular-nums; }
.chl-ligne-valeur .chl-chiffre { font-size: 1.15rem; color: var(--xqv9-blue-bright); }
.chl-ligne-precisions, .chl-ligne-note { color: var(--xqv9-text-secondary); }
.chl-sources { font-size: 0.74rem; color: var(--xqv9-text-secondary); overflow-wrap: anywhere; }
.chl-sources a { color: var(--xqv9-text-secondary); text-decoration-color: var(--xqv9-border-blue); }
.chl-sources a:hover { color: var(--xqv9-blue-bright); }
.chl-version { display: grid; gap: 0.1rem; padding-left: 0.6rem; border-left: 2px solid rgba(232, 235, 239, 0.3); }
.chl-version-titre { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--xqv9-silver); }
.chl-detail { margin-top: 0.15rem; font-size: 0.76rem; color: var(--xqv9-text-secondary); }
.chl-detail > summary { cursor: pointer; color: var(--xqv9-text-secondary); list-style: none; }
.chl-detail > summary::-webkit-details-marker { display: none; }
.chl-detail > summary::before { content: "+ "; color: var(--xqv9-blue-bright); font-weight: 700; }
.chl-detail[open] > summary::before { content: "− "; }
.chl-detail-texte, .chl-detail-sources { display: block; margin-top: 0.35rem; overflow-wrap: anywhere; }

.chl-statut { justify-self: start; display: inline-flex; align-items: center; padding: 0.08rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.chl-statut-sourced { color: var(--xqv9-blue-bright); border: 1px solid var(--xqv9-border-blue); background: rgba(77, 163, 255, 0.1); }
.chl-statut-conflict { color: var(--xqv9-silver); border: 1px solid rgba(232, 235, 239, 0.45); background: rgba(232, 235, 239, 0.1); }
.chl-statut-unknown { color: var(--xqv9-text-secondary); border: 1px dashed var(--xqv9-border); }
.chl-statut-not-applicable { color: var(--xqv9-steel); border: 1px solid var(--xqv9-border); }

.chl-exemple { margin: var(--gap-xs) 0 0; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px dashed var(--xqv9-border-blue); font-size: 0.84rem; color: var(--xqv9-text); }
.chl-exemple .chl-sources { display: block; margin-top: 0.3rem; }
.chl-exemple-absent { border-color: var(--xqv9-border); color: var(--xqv9-text-secondary); }

/* ---------- Mécanique, portes, accompagnement, jamais ---------- */

.chl-cartes, .chl-portes { display: grid; grid-template-columns: 1fr; gap: var(--gap-sm); margin-top: var(--gap-sm); }
.chl-carte, .chl-porte { padding: var(--gap-sm); border: 1px solid var(--xqv9-border); border-radius: var(--radius-md); background: var(--xqv9-card); scroll-margin-top: 88px; }
.chl-carte p, .chl-porte p { margin: 0 0 var(--gap-2xs); font-size: 0.88rem; color: var(--xqv9-text-secondary); }
.chl-surveille { padding-top: var(--gap-2xs); border-top: 1px solid var(--xqv9-border); }
.chl-surveille-titre { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xqv9-blue-bright); }
.chl-carte:target { border-color: var(--xqv9-border-blue); }
.chl-porte-liens { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--gap-xs) 0 0; padding: 0; list-style: none; font-size: 0.82rem; }
.chl-porte-liens a { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--xqv9-border-blue); border-radius: var(--radius-pill); text-decoration: none; }
.chl-porte-liens a:hover { background: rgba(77, 163, 255, 0.1); }
.chl-porte-liens .chl-muted { display: inline-block; padding: 0.3rem 0.75rem; border: 1px dashed var(--xqv9-border); border-radius: var(--radius-pill); }

.chl-statut-cockpit { display: inline-block; margin: 0 0 var(--gap-sm); padding: 0.45rem 0.8rem; border: 1px solid var(--xqv9-border-blue); border-radius: var(--radius-pill); font-size: 0.82rem; color: var(--xqv9-blue-bright); }
.chl-parcours { display: grid; grid-template-columns: 1fr; gap: var(--gap-2xs); margin: 0; padding: 0; list-style: none; counter-reset: chl-parcours; }
.chl-parcours li { position: relative; padding: 0.75rem 0.9rem 0.75rem 3.1rem; border: 1px solid var(--xqv9-border); border-radius: 10px; background: var(--xqv9-card); counter-increment: chl-parcours; font-size: 0.86rem; }
.chl-parcours li::before { content: counter(chl-parcours); position: absolute; left: 0.9rem; top: 0.7rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--xqv9-border-blue); color: var(--xqv9-blue-bright); font-size: 0.75rem; font-weight: 700; }
.chl-parcours li:last-child { border-color: var(--xqv9-border-blue); }
.chl-parcours-titre { display: block; font-weight: 650; color: var(--xqv9-silver); }
.chl-parcours-texte { color: var(--xqv9-text-secondary); }
.chl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs) var(--gap-sm); margin-top: var(--gap-sm); }
.chl-actions .chl-note { margin: 0; }

.chl-jamais { padding: var(--gap-sm) var(--gap-md); border: 1px solid var(--xqv9-border); border-left: 3px solid var(--xqv9-silver); border-radius: var(--radius-md); background: var(--xqv9-bg-secondary); }
.chl-jamais ul { display: grid; grid-template-columns: 1fr; gap: 0.35rem var(--gap-md); margin: var(--gap-xs) 0 0; padding: 0; list-style: none; }
.chl-jamais li { position: relative; padding-left: 1.4rem; color: var(--xqv9-text); font-size: 0.9rem; }
.chl-jamais li::before { content: "×"; position: absolute; left: 0; top: -0.05rem; color: var(--xqv9-silver); font-weight: 700; }

/* ---------- Chiffres publics ---------- */

.chl-faits-acteur { margin-top: var(--gap-sm); padding: var(--gap-sm); border: 1px solid var(--xqv9-border); border-radius: var(--radius-md); background: var(--xqv9-card); }
.chl-faits { display: grid; grid-template-columns: 1fr; gap: var(--gap-xs); margin: var(--gap-xs) 0 0; padding: 0; list-style: none; }
.chl-fait { display: grid; align-content: start; gap: 0.3rem; padding: 0.8rem; border: 1px solid var(--xqv9-border); border-radius: 10px; background: var(--xqv9-bg-secondary); font-size: 0.85rem; }
.chl-fait .chl-chiffre { font-size: 1.6rem; line-height: 1.1; color: var(--xqv9-blue-bright); }
.chl-fait-libelle { color: var(--xqv9-text); }
.chl-extrait { display: block; font-size: 0.74rem; font-style: italic; color: var(--xqv9-text-secondary); quotes: "« " " »"; }
.chl-fait-contexte { margin: var(--gap-xs) 0 0; font-size: 0.8rem; color: var(--xqv9-text-secondary); }
.chl-avertissements { margin: 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--xqv9-text-secondary); }
.chl-avertissements li { margin-bottom: 0.3rem; }
.chl-pied-registre { font-size: 0.72rem; }

/* ---------- CTA collant (mobile) ---------- */

.chl-cta-collant { position: sticky; bottom: 0; z-index: 40; margin-top: var(--gap-md); padding: 0.7rem var(--gap-sm) calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: rgba(7, 9, 13, 0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--xqv9-border-blue); }
.chl-cta-collant .btn { width: 100%; }

@media (min-width: 760px) {
  .chl-cartes, .chl-portes { grid-template-columns: repeat(3, 1fr); }
  .chl-faits { grid-template-columns: repeat(2, 1fr); }
  .chl-parcours { grid-template-columns: repeat(5, 1fr); }
  .chl-parcours li { padding: 2.6rem 0.9rem 0.9rem; }
  .chl-parcours li::before { top: 0.8rem; }
  .chl-jamais ul { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .chl-cta-collant { display: none; }
}

/* Sous 860 px, le CTA collant remplace celui de la barre (un seul bouton fixe à l'écran). */
@media (max-width: 859px) {
  .chl-body .xqv9-topbar .btn-cta { display: none; }
}

@media (min-width: 1100px) {
  .chl-blocs { grid-template-columns: repeat(3, 1fr); }
  .chl-faits { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .chl-hero { padding: var(--gap-lg) 0 var(--gap-sm); }
  .chl-hero::before { width: 440px; height: 440px; top: -140px; }
  .chl-timeline { grid-auto-columns: 62%; }
  .chl-section { padding-top: var(--gap-md); }
  .chl-jamais { padding: var(--gap-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .chl-taille-pastille { transition: none; }
}