/* Hors fil — accueil : le slogan, le compteur, les étapes, le résumé par plateforme. */

/* ---- Haut de page ---- */
.hero { display: grid; gap: 2.5rem; padding: clamp(2rem, 5vw, 3.5rem) 0 0; align-items: start; }
@media (min-width: 60rem) { .hero__texte { padding-top: 1.5rem; } }
@media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); gap: 3rem; } }
.hero h1 { line-height: 1.04; margin-bottom: .45em; }
.hero__fin { color: var(--accent); }
@media (min-width: 75rem) { .hero__fin { display: block; } }
.hero__sous-titre { font-size: clamp(1.2rem, 2.2vw, 1.4rem); color: var(--encre-2); max-width: 34rem; margin-bottom: 1.75rem; }
.hero .actions { margin: 0 0 1.25rem; }
.hero__suivre { margin: 0; font-weight: 700; font-size: 1rem; }
.hero__suivre a { display: inline-flex; align-items: center; min-height: 44px; }
.hero__suivre a::after { content: "↗"; content: "↗" / ""; margin-left: .35rem; text-decoration: none; display: inline-block; }

/* Le fil sous le haut de page : le morceau se soulève à l'arrivée, un peu plus au survol. */
.fil-sep--hero { margin: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); --x: 58%; }
.hero:hover + .fil-sep--hero > span { transform: translateY(-8px); }
@media (max-width: 40rem) { .fil-sep--hero { --x: 70%; } }

/* ---- Encadré « Outils de blocage » (à droite du titre) ---- */
.masse {
  background: var(--accent); color: var(--blanc); border-radius: var(--rayon-grand);
  padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--ombre-haute); position: relative;
}
.masse :focus-visible { outline-color: var(--blanc); }
.masse__surtitre { font-family: var(--police-titre); font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-pale); margin: 0 0 .4rem; }
.masse__titre { color: var(--blanc); font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 .6rem; }
.masse__texte { color: var(--blanc); margin: 0 0 1.1rem; }
.masse__plateformes { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.masse__plateforme {
  display: flex; flex-direction: column; gap: .1rem; padding: .65rem .85rem; border-radius: 14px;
  background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.masse__nom { font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; color: var(--bleu-pale); }
.masse__nombre { font-family: var(--police-titre); font-weight: 500; font-size: 1rem; color: var(--blanc); }
.masse__nombre .nb-direct { display: block; font-weight: 700; font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.masse__bouton { width: 100%; background: var(--blanc); border-color: var(--blanc); color: var(--accent); }
.masse__bouton:hover { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.masse__note { margin: 1rem 0 0; font-size: .95rem; color: var(--bleu-pale); line-height: 1.45; }

/* ---- Compteur collectif en direct : le premier encadré de la page, sous l'en-tête ---- */
.compteur {
  margin-top: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--nuit); color: var(--fond); border-radius: var(--rayon-grand);
  padding: clamp(1.4rem, 4vw, 2.25rem); box-shadow: var(--ombre-haute); position: relative;
  display: grid; gap: 1.5rem 3.5rem; align-items: center;
}
@media (min-width: 60rem) { .compteur { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); } }
.compteur :focus-visible { outline-color: var(--accent-vif); }
.compteur__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; }
.compteur__libelle { font-family: var(--police-titre); font-weight: 600; font-size: 1.35rem; margin: 0; }
.compteur__etat { color: var(--encre-doux); font-size: 1rem; margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.compteur.est-direct .compteur__etat::before {
  content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent-vif);
  animation: hf-pouls 2.4s ease-out infinite;
}
.compteur__valeur {
  margin: 1rem 0 0; font-family: var(--police-titre); font-weight: 700; font-size: clamp(3.2rem, 10vw, 5.75rem);
  line-height: 1; letter-spacing: -0.01em; color: var(--accent-vif); font-variant-numeric: tabular-nums;
}
.compteur__paliers { container-type: inline-size; }
.compteur__prochain { margin: 1.1rem 0 0; color: var(--encre-doux); font-size: 1rem; }
.compteur__note { color: var(--encre-doux); font-size: .95rem; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--fil-sombre); }

/* Les paliers, sur un fil : la partie atteinte est en accent. */
.paliers-fil { position: relative; height: 4px; border-radius: 4px; background: var(--fil-sombre); margin: 0 7px; }
.paliers-fil__atteint {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--progression, 0%); max-width: 100%;
  background: var(--accent-vif); border-radius: 4px; transition: width 900ms cubic-bezier(.2, .8, .2, 1);
}
.paliers-fil__noeud {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--nuit); border: 3px solid var(--fil-sombre);
}
.paliers-fil__noeud:nth-of-type(2) { left: 25%; }
.paliers-fil__noeud:nth-of-type(3) { left: 50%; }
.paliers-fil__noeud:nth-of-type(4) { left: 75%; }
.paliers-fil__noeud:nth-of-type(5) { left: 100%; }
.paliers-fil__noeud.atteint { background: var(--accent-vif); border-color: var(--accent-vif); }

.paliers { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); font-size: 1rem; }
.paliers li { text-align: right; color: var(--encre-doux); line-height: 1.35; }
.paliers strong { display: block; color: var(--fond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paliers li.atteint .etat { color: var(--accent-vif); font-weight: 700; }
/* Panneau étroit : la légende des paliers passe sur deux colonnes, avec une pastille par palier. */
@container (max-width: 24rem) {
  .paliers { grid-template-columns: repeat(2, 1fr); gap: .9rem 1rem; }
  .paliers li { text-align: left; padding-left: 1.4rem; position: relative; }
  .paliers li::before {
    content: ""; position: absolute; left: 0; top: .3rem; width: .8rem; height: .8rem; border-radius: 50%;
    border: 3px solid var(--fil-sombre); background: var(--nuit);
  }
  .paliers li.atteint::before { background: var(--accent-vif); border-color: var(--accent-vif); }
}

/* ---- Étapes : trois points sur un fil, le dernier soulevé ---- */
.section-etapes h2 { margin-top: 0; }
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 2rem; }
.etapes li { counter-increment: etape; position: relative; padding-left: 4.75rem; min-height: 3.5rem; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--fond); border: 3px solid var(--encre); font-weight: 700; font-size: 1.35rem;
}
.etapes li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.75rem - 1.5px); top: 4.25rem; bottom: -1.25rem; width: 3px; border-radius: 3px; background: var(--trait);
}
.etapes li:last-child::before { background: var(--accent); border-color: var(--accent); color: var(--fond); translate: -10px 0; }
.etapes h3 { margin: .55rem 0 .35rem; font-size: 1.3rem; }
.etapes p { margin: 0; color: var(--encre-2); }
@media (min-width: 56rem) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .etapes li { padding-left: 0; padding-top: 5rem; }
  .etapes li:not(:last-child)::after { left: 4.5rem; right: -1.75rem; top: calc(1.75rem - 1.5px); bottom: auto; width: auto; height: 3px; }
  .etapes li:last-child::before { translate: 0 -14px; }
  .etapes h3 { margin-top: 0; }
}

/* ---- Fait / ne fait pas ---- */
.fait-pas { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 48rem) { .fait-pas { grid-template-columns: 1fr 1fr; } }
.fait-pas__bloc { border-radius: var(--rayon-grand); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.fait-pas__bloc--fait { background: var(--teinte); }
.fait-pas__bloc--pas { background: var(--blanc); border: 2px solid var(--encre); }
.fait-pas h3 { margin: 0 0 1.25rem; font-size: 1.45rem; }
.fait-pas ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.fait-pas li { position: relative; padding-left: 2.1rem; line-height: 1.5; }
.fait-pas__bloc--fait li::before {
  content: ""; position: absolute; left: .4rem; top: .2em; width: .5rem; height: .95rem;
  border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.fait-pas__bloc--pas li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 1.2rem; height: 3px; border-radius: 3px; background: var(--encre-2);
}

/* ---- Résumé par plateforme ---- */
.lien-fleche { font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.lien-fleche .fleche { display: inline-block; transition: transform var(--duree) ease; text-decoration: none; }
.plateformes { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.plateformes li {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon-grand); box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.35rem;
}
.plateformes li > span:first-child { font-weight: 700; font-size: 1.2rem; }
.plateformes .nombre { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Version enrichie par accueil.js : chaque carte mène à la liste filtrée. */
.plateformes li.plateforme-carte { padding: 0; }
.plateforme-carte a {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom fleche" "nombre nombre" "unite unite";
  padding: 1.25rem 1.35rem 1.35rem; color: var(--encre); text-decoration: none; border-radius: inherit; height: 100%;
}
.plateforme-carte { transition: transform var(--duree) ease, box-shadow var(--duree) ease, border-color var(--duree) ease; }
.plateforme-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); border-color: var(--accent); }
.plateforme-carte:focus-within { border-color: var(--accent); }
.plateforme-carte a:focus-visible { outline-offset: 3px; border-radius: var(--rayon-grand); }
.plateforme-carte__nom { grid-area: nom; font-weight: 700; font-size: 1.2rem; }
.plateforme-carte__fleche { grid-area: fleche; color: var(--accent); font-weight: 700; transition: transform var(--duree) ease; }
.plateforme-carte:hover .plateforme-carte__fleche { transform: translateX(3px); }
.plateforme-carte__nombre { grid-area: nombre; font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: .75rem; letter-spacing: -0.02em; }
.plateforme-carte__unite { grid-area: unite; color: var(--encre-2); font-size: 1rem; }
@media (max-width: 34rem) {
  .plateformes { grid-template-columns: 1fr; gap: .5rem; }
  .plateforme-carte a { grid-template-columns: 1fr auto auto; grid-template-areas: "nom nombre fleche" "nom unite fleche"; align-items: center; column-gap: 1rem; padding: .9rem 1.1rem; }
  .plateforme-carte__nombre { margin: 0; font-size: 1.6rem; text-align: right; }
  .plateforme-carte__unite { text-align: right; line-height: 1.2; }
}

/* ---- Suivre la campagne ---- */
.suivre {
  display: grid; gap: 1.25rem; align-items: center; background: var(--teinte);
  border-radius: var(--rayon-grand); padding: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 48rem) { .suivre { grid-template-columns: auto 1fr auto; gap: 2rem; } }
.suivre__signe { width: 3.5rem; height: 3.5rem; display: block; }
.suivre h2 { margin: 0 0 .3rem; }
.suivre p { margin: 0; color: var(--encre-2); }

/* Le mot de l'éditeur (v1.2) */
.mot__citation { margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--blanc); border: 2px solid var(--encre); border-left-width: 10px; border-left-color: var(--accent); border-radius: var(--rayon); }
.mot__citation blockquote { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.55; }
.mot__citation blockquote p { margin: 0 0 1em; max-width: 46rem; }
.mot__citation blockquote p:last-child { margin-bottom: 0; }
.mot__citation strong { color: var(--accent); }
.mot__citation figcaption { margin-top: 1.25rem; font-weight: 700; color: var(--encre-2); }
.mot__citation figcaption::before { content: "— "; }
.ailleurs .plateforme-carte__unite { display: block; margin-top: .35rem; font-size: 1rem; }