/* Trouver sa taille.
   Le tour de tête est le premier motif d'abandon du parent. L'outil se lit
   comme un mètre : une grande valeur, une règle graduée, et sous elle les
   plages des trois modèles tracées sur la même échelle. L'aiguille verte est
   la mesure, partout où elle apparaît.

   Les pièces de l'instrument (capsule, règle, verdict, plage, ligne de
   modèle, tuiles de club, capsules) vivent dans instrument.css, partagées
   avec la page de tous les casques et la fiche produit. Cette feuille ne
   garde que la mise en page propre au guide. */

.size-finder{padding-block:var(--space-section-tight)}
.size-finder__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}

/* Les colonnes du balisage ne servent qu'à l'ordre de lecture, qui est
   aussi l'ordre d'affichage sur téléphone : titre, outil, verdict,
   modèles, puis le geste de mesure. Leurs éléments se placent directement
   dans la grille. */
.size-finder__intro,.size-finder__tool{display:contents}

.size-finder__intro h2{
  margin:0;
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.03em;
  text-transform:uppercase;
  text-wrap:balance;
}
.size-finder__lead{
  max-width:44ch;
  margin:-6px 0 0;
  color:var(--ink-70);
  font-size:1rem;
  line-height:1.5;
  text-wrap:pretty;
}

/* ---- Les modèles, sur la même échelle que la règle ---- */

.size-finder__models{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
/* Un modèle retenu le dit par ses casques qui apparaissent ; le mot reste
   pour les lecteurs d'écran. */
.size-finder__model[data-fit="in"] .model-row__state{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.size-finder .size-finder__clubs{margin-top:6px}
/* Hors plage, les casques restent lisibles (contraste intact) mais perdent
   leur couleur : ils ne sont plus la réponse. */
.size-finder__model[data-fit="out"] .helmet-tile__image{filter:grayscale(1);opacity:.6}

.size-finder__compare-row{border:0}
.size-finder .size-finder__compare{min-height:48px;line-height:1.2}

.size-finder__contact{
  margin:0;
  color:var(--ink-70);
  font-size:.95rem;
}
.size-finder__contact a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---- Le geste de mesure ---- */

.size-finder__how-body{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin-top:10px;
}
.size-finder__diagram{width:100%;height:auto;color:var(--ink);overflow:visible}
.size-finder__diagram-back{color:var(--ink-70)}
.size-finder__diagram-ticks{color:var(--surface-sunken)}
.size-finder__diagram-marks circle{fill:var(--ink)}
.size-finder__diagram-marks text{
  fill:var(--surface);
  font:800 11px 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  text-anchor:middle;
}
.size-finder__steps{
  margin:0;
  padding-left:1.3em;
  font-size:.95rem;
  line-height:1.45;
}
.size-finder__steps li{padding-left:.2em}
.size-finder__steps li + li{margin-top:8px}
.size-finder__steps li::marker{font-weight:800}

/* Variante complète (guide des tailles) : le schéma prend sa place. */
.size-finder--complete .size-finder__how-body{grid-template-columns:minmax(0,200px)}

@media(min-width:951px){
  .size-finder{padding-block:var(--space-section)}
  /* Deux colonnes. À gauche l'instrument : la règle et les pistes des
     modèles partagent la même largeur, donc la même échelle. À droite, le
     geste de mesure en haut, puis les casques de chaque modèle, sur une
     largeur fixe pour que rien ne bouge au premier réglage. */
  .size-finder__grid{
    grid-template-columns:minmax(0,1fr) 21.5rem;
    column-gap:clamp(40px,4vw,64px);
    row-gap:20px;
  }
  .size-finder__intro h2,.size-finder__lead,.size-finder__measure,.size-finder__verdict,.size-finder__contact{grid-column:1}
  .size-finder__how{grid-column:2;grid-row:1 / span 3;align-self:start}
  .size-finder--lead .size-finder__how{grid-row:1 / span 4}
  .size-finder__lead{margin:0}
  .size-finder__how-body{grid-template-columns:112px minmax(0,1fr);gap:18px}
  .size-finder--complete .size-finder__how-body{grid-template-columns:minmax(0,220px)}
  .size-finder__models{
    grid-column:1 / -1;
    grid-template-columns:subgrid;
    margin-top:4px;
  }
  .size-finder .size-finder__model{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:subgrid;
    align-items:center;
    padding-block:16px;
  }
  .size-finder__model > :not(.size-finder__clubs){grid-column:1}
  .size-finder .size-finder__clubs{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .size-finder .size-finder__clubs[hidden]{display:grid;visibility:hidden;height:0;align-self:start}
  .size-finder__compare-row{display:none}
}

@media(max-width:950px){
  .size-finder__grid{gap:14px}
  .size-finder__intro h2{font-size:clamp(2.15rem,9.5vw,2.7rem)}
  .size-finder[data-measured] .size-finder__model[data-secondary]{display:none}
  .size-finder[data-measured][data-compare-open] .size-finder__model[data-secondary]{display:block}
  .size-finder .size-finder__clubs{margin-top:12px}
}