/* ============================================================
   Instrument.

   Le langage du guide des tailles (« Quel modèle pour cette mesure ? »),
   rendu réutilisable. On manipule, on voit, on choisit : ce que l'on
   touche est doux (capsules, boutons ronds, cartes arrondies), ce qui
   porte la marque ou l'achat reste franc et anguleux, et les grands titres
   restent en capitales condensées.

   Les primitives, dans l'ordre où un instrument se lit :
   .instrument          portée de l'état de mesure : data-measured quand
                        une mesure a été réglée, data-dragging pendant un
                        glissé. Porte --p et --pos, posés par le script.
   .instrument-surface  le papier teinté sur lequel l'instrument est posé
   .measure             libellé, capsule et règle (snippet instrument-measure)
   .stepper             la capsule moins, valeur, plus
   .ruler               la règle graduée, au curseur natif
   .measure-verdict     la réponse courte, puis le conseil
   .range-bar           la plage d'un modèle, sur l'échelle de la règle
                        (snippet range-bar). Son état vient de l'élément
                        parent : data-fit « in » ou « out », data-edge
                        « low » ou « high », data-measured.
   .model-row           la ligne d'un modèle, dépliable
   .helmet-tiles        les tuiles de club d'un modèle (snippet helmet-tile)
   .capsule             lien, filtre ou dépli en capsule

   Puis les pièces que toutes les pages partagent, chargées partout par
   layout/theme.liquid :
   .sheet               la feuille blanche décollée (formulaire, carte
                        retenue) ; .sheet--soft, la carte souple posée sur
                        le papier, qui devient feuille quand on l'ouvre
   .fold                l'accordéon souple : une carte souple dépliable
   .field               le champ arrondi (texte, liste, zone de message)
   .field-capsule       le champ en capsule, son icône, son bouton rond
   .choice              la capsule à case (case à cocher ou bouton radio)

   Une feuille de section n'y ajoute que sa géométrie (marges, retraits,
   taille de texte) : la matière, les bords et les états viennent d'ici.

   Mêmes états partout : repos, survol, focus visible (anneau --focus de
   3 px), actif (pressé, déplié ou courant), désactivé. Toute commande
   offre au moins 44 px de prise. Aucune couleur, durée ni ombre n'est
   écrite ici sans venir des jetons, sauf les transparences propres à
   l'instrument, qui laissent passer le papier teinté.
   ============================================================ */

.instrument{
  /* Demi-largeur de l'aiguille : la règle et les plages s'alignent sur la
     course réelle du curseur natif, qui s'arrête à cette distance des bords. */
  --needle:40px;
  --inset:calc(var(--needle) / 2);
  color:var(--ink);
}
.instrument-surface{background:var(--surface-sunken)}

/* ---------- La mesure : libellé, capsule, règle ---------- */

.measure__label{
  display:block;
  font-weight:700;
  font-size:.95rem;
  color:var(--ink-70);
  letter-spacing:.02em;
  text-align:center;
}

/* Moins, valeur et plus forment un seul groupe : les boutons restent sous
   le pouce de la valeur qu'ils changent. Centré sur téléphone et tablette,
   où l'instrument occupe toute la largeur ; aligné à gauche sur grand
   écran, au-dessus de la règle. */
.stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  margin:8px auto 0;
  padding:6px;
  border:1px solid var(--ink-12);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow-1);
}
.stepper__readout{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  min-width:5.6rem;
  padding-inline:8px;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  line-height:.84;
}
.stepper__value{
  display:inline-block;
  min-width:2ch;
  font-size:var(--fs-measure);
  font-weight:800;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  transition:color var(--motion-state);
}
.instrument:not([data-measured]) .stepper__value{color:var(--ink-70)}
.stepper__unit{
  font-size:1.25rem;
  font-weight:700;
  color:var(--ink-70);
}
.stepper__step{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--surface-sunken);
  color:var(--ink);
  cursor:pointer;
  touch-action:manipulation;
}
.stepper__step:hover{background:var(--ink);color:var(--surface);transform:scale(1.04)}
.stepper__step:active{transform:scale(.96)}
.stepper__step:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.stepper__step:disabled{background:var(--surface-sunken);color:var(--ink-70);opacity:.5;transform:none;cursor:not-allowed}

/* Le curseur reste un input range natif : clavier, lecteurs d'écran,
   toucher et valeur annoncée viennent du navigateur. Sa poignée invisible
   pilote le repère circulaire dessiné au-dessus du rail. */
.ruler{
  position:relative;
  margin-top:18px;
  padding-bottom:22px;
}
.ruler__input{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:44px;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  touch-action:pan-y;
}
.ruler__input::-webkit-slider-runnable-track{height:44px;background:transparent}
.ruler__input::-moz-range-track{height:44px;background:transparent}
.ruler__input::-webkit-slider-thumb{
  width:var(--needle);height:44px;
  border:0;background:transparent;
  -webkit-appearance:none;appearance:none;
}
.ruler__input::-moz-range-thumb{width:var(--needle);height:44px;border:0;background:transparent}
/* L'anneau de focus entoure toute la règle, graduation comprise. */
.ruler__input:focus-visible{outline:none}
.ruler:has(.ruler__input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
@supports not selector(:has(*)){
  .ruler__input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
}

.ruler__rail{
  position:absolute;
  top:0;
  left:var(--inset);
  right:var(--inset);
  height:44px;
  container-type:inline-size;
  pointer-events:none;
}
/* Rail épais : fond creux, puis un segment par zone de couverture, plus
   dense quand plus de modèles couvrent la mesure (encre à 35, 65 et
   100 %). */
.ruler__coverage{
  position:absolute;
  inset-inline:0;
  top:17px;
  height:10px;
  border-radius:999px;
  background:rgba(16,43,63,.1);
  overflow:hidden;
}
.ruler__coverage span{
  position:absolute;
  inset-block:0;
  left:var(--from);
  width:calc(var(--to) - var(--from));
  background:var(--ink);
}
.ruler__coverage span[data-count="1"]{opacity:.35}
.ruler__coverage span[data-count="2"]{opacity:.65}
/* Repère circulaire : sa cible native conserve 40 px de prise et son point
   central indique la mesure. Il se déplace par transform seulement. */
.ruler__needle{
  position:absolute;
  top:2px;
  left:0;
  width:40px;
  height:40px;
  margin-left:-20px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 4px 14px rgba(16,43,63,.18);
  transform:translateX(calc(var(--p,.5) * 100cqw));
}
.ruler__needle::before{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
}
.ruler__head{display:none}
.instrument:not([data-measured]) .ruler__needle::before{background:var(--ink-12)}
/* Pendant le glissement, la tête grossit sous le doigt. */
.instrument[data-dragging] .ruler__needle{scale:1.08}

.ruler__ticks{
  position:absolute;
  top:39px;
  left:var(--inset);
  right:var(--inset);
  height:8px;
  pointer-events:none;
  /* Un trait fin par centimètre, un trait long et plein tous les deux. */
  background:linear-gradient(to right,var(--ink-70) 0 1px,transparent 1px) 0 0/calc(100% / var(--steps,18)) 6px repeat-x;
}
.ruler__ticks::after{
  content:"";position:absolute;right:-1px;top:0;width:1px;height:6px;background:var(--ink-70);
}
.ruler__ticks span{
  position:absolute;
  top:14px;
  left:var(--at);
  transform:translateX(-50%);
  color:var(--ink);
  font:700 .82rem/1 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ---------- Le verdict ---------- */

/* Deux niveaux : la réponse, courte et forte, puis le conseil qui aide à
   choisir, en texte courant. */
.measure-verdict{
  max-width:52ch;
  margin:0;
  line-height:1.45;
  text-wrap:pretty;
}
.measure-verdict__answer{
  display:block;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:var(--fs-h3);
  font-weight:800;
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-wrap:balance;
}
.measure-verdict__answer:empty{display:none}
.measure-verdict__advice{
  display:block;
  margin-top:4px;
  color:var(--ink-70);
  font-size:.95rem;
}
.instrument:not([data-measured]) .measure-verdict__advice{margin-top:0;font-size:1rem}

/* ---------- La plage d'un modèle ---------- */

/* Une piste sur la même échelle que la règle : la plage se lit sans
   mesure, c'est une information. La pastille verte n'apparaît qu'avec une
   mesure réglée (data-measured sur un parent). */
.range-bar{
  position:relative;
  height:8px;
  margin:6px var(--inset,0px) 0;
  border-radius:999px;
  background:var(--ink-12);
  overflow:visible;
}
.range-bar__band{
  position:absolute;
  inset-block:0;
  left:var(--from,0%);
  width:calc(var(--to,100%) - var(--from,0%));
  border-radius:999px;
  background:var(--ink);
}
[data-fit="in"] .range-bar__band{opacity:1}
[data-fit="out"] .range-bar__band{opacity:.16}
.range-bar__mark{
  position:absolute;
  top:-6px;
  left:var(--pos,50%);
  width:20px;
  height:20px;
  margin-left:-10px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--range-ring,var(--surface-sunken));
  visibility:hidden;
}
[data-measured] .range-bar__mark{visibility:visible}

/* Limite de plage, sans texte : quand la mesure tombe pile sur une borne,
   la barre du modèle s'atténue (encre à 60 %, 3,9:1 sur le fond) et un
   trait de borne plein, plus haut que la pastille, dépasse au-dessus et
   au-dessous d'elle (encre, 12,9:1). */
.range-bar__bound{
  position:absolute;
  top:-9px;
  width:2px;
  height:28px;
  margin-left:-1px;
  background:var(--ink);
  display:none;
}
[data-edge="low"] .range-bar__bound{display:block;left:var(--from)}
[data-edge="high"] .range-bar__bound{display:block;left:var(--to)}
[data-edge="low"] .range-bar__band,
[data-edge="high"] .range-bar__band{opacity:.6}

/* ---------- La ligne d'un modèle ---------- */

/* Une ligne nue au repos, une feuille blanche quand elle est dépliée : le
   contraste entre les deux fait la hiérarchie. */
.model-row{
  position:relative;
  isolation:isolate;
  padding:8px 14px 14px;
  border:1px solid var(--ink-12);
  border-radius:16px;
  background:rgba(255,255,255,.44);
  overflow:hidden;
}
.model-row[data-open]{background:var(--surface);border-color:transparent;box-shadow:var(--shadow-2)}
.model-row__head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0;
  font:inherit;
}
/* La ligne entière se touche pour la déplier : le bouton porte le nom,
   l'âge et la plage, sa zone s'étend sur toute la ligne. */
.model-row__toggle{
  display:flex;
  flex:1;
  align-items:baseline;
  gap:12px;
  min-height:44px;
  padding:2px 0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.model-row__toggle::after{content:"";position:absolute;inset:0}
.model-row__toggle:focus-visible{outline:none}
.model-row:has(.model-row__toggle:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
@supports not selector(:has(*)){
  .model-row__toggle:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
}
.model-row__toggle:hover .model-row__name{opacity:.72}
.model-row__chevron{flex:none;align-self:center}
.model-row[data-open] .model-row__chevron{rotate:180deg}
.model-row__name{
  margin:0;
  font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  font-size:var(--fs-h3);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.model-row__age{
  margin-left:4px;
  font-family:Barlow,Arial,sans-serif;
  color:var(--ink-70);
  font-size:.88rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}
.model-row__range{
  flex:none;
  margin-left:auto;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.model-row__state{
  margin:8px 0 0;
  color:var(--ink-70);
  font-size:.88rem;
}

/* ---------- Les tuiles de club ---------- */

/* Le casque aux couleurs du club, et le nom du club. Jamais de blason ni
   de fond blanc derrière un blason : le casque suffit. */
.helmet-tiles{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0;
  list-style:none;
}
.helmet-tiles[hidden]{display:none}
.helmet-tiles__label{
  grid-column:1 / -1;
  margin:0 0 2px;
  color:var(--ink-70);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.helmet-tile{
  display:grid;
  justify-items:center;
  gap:4px;
  min-height:var(--button-h-compact);
  padding:10px 4px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--surface-sunken);
  color:var(--ink);
  font:700 1rem/1.1 'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  text-transform:uppercase;
  text-decoration:none;
}
.helmet-tile[hidden]{display:none}
.helmet-tile[data-club="om"]{--club:var(--club-om)}
.helmet-tile[data-club="psg"]{--club:var(--club-psg)}
.helmet-tile[data-club="lens"]{--club:var(--club-lens)}
@media(hover:hover){
  .helmet-tile:hover{border-color:var(--ink-12);background:var(--surface);box-shadow:var(--shadow-1)}
  .helmet-tile:hover .helmet-tile__image{translate:0 -3px}
}
.helmet-tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Le club de la page : la tuile est posée, cerclée d'encre, sans réagir. */
.helmet-tile[aria-current]{border-color:transparent;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.helmet-tile[aria-current]:hover .helmet-tile__image{translate:none}
/* Une tuile qui se choisit (un club parmi trois) : elle porte un vrai
   bouton radio qui la recouvre. Choisie, elle est posée et cerclée d'encre
   comme le club courant. */
.helmet-tile:has(> .helmet-tile__input){position:relative;cursor:pointer}
.helmet-tile__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.helmet-tile:has(> .helmet-tile__input:checked){border-color:transparent;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.helmet-tile:has(> .helmet-tile__input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.helmet-tile:has(> .helmet-tile__input:disabled){opacity:.5;cursor:not-allowed}
.helmet-tile__image{
  width:var(--tile-image,64px);
  height:var(--tile-image,64px);
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* Une tuile qui s'achète : le lien (casque et club) couvre la tuile, le
   bouton d'ajout reste un bouton d'achat, franc, en encre. */
.helmet-tile--buy{position:relative;align-content:start;padding:10px 8px 8px}
.helmet-tile__link{
  display:grid;
  justify-items:center;
  gap:4px;
  color:inherit;
  text-decoration:none;
}
.helmet-tile__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.helmet-tile__link:focus-visible{outline:none}
.helmet-tile--buy:has(.helmet-tile__link:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
@supports not selector(:has(*)){
  .helmet-tile__link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
}
.helmet-tile__form{position:relative;z-index:1;width:100%;margin:4px 0 0}
.helmet-tile__add{
  justify-content:center;
  width:100%;
  min-height:44px;
  padding-inline:8px;
}
.helmet-tile__add span{font-size:inherit;font-weight:inherit}
.helmet-tile__add:hover{transform:none}
.helmet-tile__add[aria-busy="true"]{opacity:.7;cursor:progress}
.helmet-tile__stock{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:100%;
  min-height:44px;
  margin:4px 0 0;
  color:var(--ink-70);
  font:700 .88rem/1.2 Barlow,Arial,sans-serif;
  text-transform:none;
}
.helmet-tile--sold .helmet-tile__image{opacity:.55}

/* ---------- Capsules ---------- */

/* Un dépli, un filtre, un lien d'outil : la même capsule. Pressée, elle
   passe à l'encre ; dépliée, son chevron se retourne. */
.capsule{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:var(--button-h-compact);
  padding:0 14px;
  border:1px solid var(--ink-12);
  border-radius:999px;
  background:rgba(255,255,255,.45);
  color:var(--ink);
  font:700 1rem/1.5 Barlow,Arial,sans-serif;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  list-style:none;
}
.capsule::-webkit-details-marker{display:none}
.capsule:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Survol : seulement avec une souris, sinon l'état reste collé au doigt. */
@media(hover:hover){
  .capsule:hover{border-color:var(--ink-70);background:var(--surface)}
}
/* Un filtre en cours, que la capsule retire d'un toucher, prend la même
   encre sans se dire bouton bascule. Le thème lu (aria-current) aussi. */
.capsule[aria-pressed="true"],.capsule[aria-current="true"],.capsule--active{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.capsule:disabled{opacity:.5;cursor:not-allowed}
.capsule--block{
  display:flex;
  width:100%;
  justify-content:space-between;
  gap:12px;
}
.capsule__chevron{flex:none}
/* L'entrée vers la mesure : une ligne pleine largeur, facile au pouce, avec
   l'icône du mètre et le chevron. Une seule par page. */
.capsule.capsule--quiet{display:flex;width:100%;justify-content:flex-start;gap:12px;min-height:56px;padding:0 2px;border:0;border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);border-radius:0;background:none;color:var(--ink);font-size:1rem;text-decoration:none}
.capsule.capsule--quiet::before{content:"";flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4.5M13.5 8v3M17 8v4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4.5M13.5 8v3M17 8v4.5'/%3E%3C/svg%3E") center/contain no-repeat}
.capsule.capsule--quiet > :is(.capsule__chevron,.icon-arrow){margin-left:auto}
@media(hover:hover){.capsule.capsule--quiet:hover{border-color:var(--ink-12);background:none;color:var(--ink)}.capsule.capsule--quiet:hover::after{content:none}}
.capsule.capsule--quiet[aria-expanded="true"]{background:none;color:var(--ink)}
[aria-expanded="true"] > .capsule__chevron,
[open] > summary > .capsule__chevron{rotate:180deg}

/* Une précision après le libellé, en encre secondaire : l'âge d'un profil,
   le nom d'un modèle. */
.capsule__detail{color:var(--ink-70);font-weight:400}

/* Un choix parmi plusieurs : la capsule porte un vrai bouton radio, qui
   la recouvre et garde clavier et lecteurs d'écran. Cochée, elle passe à
   l'encre comme une capsule pressée. */
.capsule:has(> .capsule__input){position:relative}
.capsule__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.capsule:has(> .capsule__input:checked){border-color:var(--ink);background:var(--ink);color:var(--surface)}
.capsule:has(> .capsule__input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.capsule:has(> .capsule__input:disabled){opacity:.5;cursor:not-allowed}
.capsule:is([aria-pressed="true"],[aria-current="true"],.capsule--active) .capsule__detail,
.capsule:has(> .capsule__input:checked) .capsule__detail{color:color-mix(in srgb,var(--surface) 80%,var(--ink))}

/* Sur l'encre : contour papier à 40 %, texte papier ; survolée, elle
   passe au papier. L'anneau de focus prend l'accent, lisible sur l'encre. */
.capsule--on-ink{
  border-color:color-mix(in srgb,var(--paper) 40%,transparent);
  background:color-mix(in srgb,var(--paper) 6%,transparent);
  color:var(--paper);
}
.capsule--on-ink:focus-visible{outline-color:var(--accent)}
@media(hover:hover){
  .capsule--on-ink:hover{border-color:var(--paper);background:var(--paper);color:var(--ink)}
}

/* ---------- Capsule à case ---------- */

/* Une case à cocher (plusieurs réponses) ou un bouton radio (une seule,
   .choice--radio) dans une capsule. La vraie case reste dans le flux
   d'accessibilité et recouvre toute la capsule. La case dessinée garde un
   contour à 3 contre 1 ; cochée, la capsule passe à l'encre. */
.choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:6px 16px 6px 10px;
  border:1px solid var(--ink-12);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink);
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
}
.choice input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.choice__box{
  position:relative;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border:1px solid var(--field-border,var(--ink-70));
  border-radius:7px;
  background:var(--surface);
}
.choice__box::after{
  content:"";
  position:absolute;
  left:7px;
  top:3px;
  width:7px;
  height:13px;
  border:solid var(--ink);
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
  opacity:0;
}
.choice--radio .choice__box{border-radius:50%}
.choice--radio .choice__box::after{
  inset:5px;
  width:auto;
  height:auto;
  border:0;
  border-radius:50%;
  background:var(--ink);
  transform:none;
}
/* Un club se reconnaît à son nom ; la pastille de couleur l'accompagne. */
.choice__club{
  flex:none;
  width:10px;
  height:10px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--club);
  box-shadow:0 0 0 1px var(--ink-12);
}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.choice:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--surface)}
.choice input:checked + .choice__box{border-color:var(--surface)}
.choice input:checked + .choice__box::after{opacity:1}
.choice [aria-invalid="true"] + .choice__box{border-color:var(--field-error,#8f1d1d);box-shadow:0 0 0 1px var(--field-error,#8f1d1d)}
.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
@media(hover:hover){
  .choice:not(:has(input:checked)):hover{border-color:var(--ink);box-shadow:var(--shadow-1)}
}

/* ---------- Feuilles et cartes souples ---------- */

/* La feuille : blanche, arrondie à 16 px, décollée du papier teinté. Un
   formulaire, une carte retenue. */
.sheet{
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow-2);
}
/* La carte souple : un filet, un blanc qui laisse passer le papier. Ouverte
   (accordéon, ligne dépliée), elle devient feuille ; le filet passe au
   transparent pour que rien ne bouge. */
.sheet--soft{
  border:1px solid var(--ink-12);
  background:rgba(255,255,255,.44);
  box-shadow:none;
}
.sheet--soft:is([open],[data-open]){border-color:transparent;background:var(--surface);box-shadow:var(--shadow-2)}

/* ---------- Accordéon souple ---------- */

/* Un <details> natif en carte souple : la question, un chevron dans un
   cercle de 40 px, la réponse. Ouvert, une feuille blanche. */
.fold__summary{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:64px;
  padding:10px 12px 10px 20px;
  border-radius:16px;
  font-size:1.06rem;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
}
.fold__summary::-webkit-details-marker{display:none}
.fold__summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fold__chevron{
  display:grid;
  flex:none;
  place-items:center;
  width:40px;
  height:40px;
  margin-left:auto;
  border-radius:50%;
  background:var(--surface-sunken);
  color:var(--ink);
}
.fold[open] > .fold__summary .fold__chevron svg{rotate:180deg}
.fold__body{padding:0 20px 20px}
.fold__body .rte{
  max-width:65ch;
  color:var(--ink-70);
  line-height:1.6;
}
.fold__body .rte > :last-child{margin-bottom:0}
.fold__body .rte a{
  color:var(--ink);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Le lien vers la politique Shopify liée, sous la réponse (snippet
   faq-policy-link), rendu seulement si elle est publiée. */
.fold__policy{margin:14px 0 0}
.fold__policy .text-link{min-height:24px;color:var(--ink)}
@media(hover:hover){
  .fold__summary:hover .fold__chevron{background:var(--ink);color:var(--surface)}
}

/* ---------- Champ arrondi ---------- */

/* Texte, liste ou zone de message : arrondi à 12 px, contour à l'encre à
   70 % (plus de 3 contre 1 sur le blanc et le papier), le champ se voit
   sans son libellé. */
.field{
  width:100%;
  min-height:52px;
  padding:12px 16px;
  border:1px solid var(--ink-70);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  font-size:1rem;
  line-height:1.4;
}
select.field{
  appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23102b3f' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
textarea.field{min-height:150px;resize:vertical}
.field:hover{border-color:var(--ink)}
.field:focus-visible{border-color:var(--ink);outline:3px solid var(--focus);outline-offset:2px}
.field:disabled{border-color:var(--ink-12);background:var(--surface-sunken);cursor:not-allowed}
.field[aria-invalid="true"]{border-color:var(--field-error,#8f1d1d);box-shadow:inset 0 0 0 1px var(--field-error,#8f1d1d)}

/* Le libellé d'un outil : même voix que celui de la règle, en encre
   secondaire, au-dessus du champ. */
.field-label{
  display:block;
  margin-bottom:8px;
  color:var(--ink-70);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.02em;
}

/* ---------- Champ en capsule ---------- */

/* Un champ et son action dans une même capsule : la recherche, l'e-mail.
   Tout le champ porte l'anneau de focus, pas le texte seul. */
.field-capsule{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:var(--button-h);
  padding:6px 6px 6px 22px;
  border:1px solid var(--ink-12);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow-1);
}
.field-capsule:focus-within{
  border-color:var(--ink);
  background:var(--surface);
  outline:3px solid var(--focus);
  outline-offset:3px;
}
.field-capsule__icon{
  flex:none;
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--ink-70);
  stroke-width:1.8;
}
.field-capsule__input{
  flex:1;
  min-width:0;
  min-height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:1.1rem;
  font-weight:700;
  -webkit-appearance:none;
  appearance:none;
}
.field-capsule__input::placeholder{color:var(--ink-70);font-weight:400;opacity:1}
.field-capsule__input::-webkit-search-cancel-button{display:none}
.field-capsule__input:focus-visible{outline:none}
/* L'action du champ, ronde et pleine, sous le pouce. */
.field-capsule__submit{
  display:grid;
  flex:none;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--ink);
  color:var(--surface);
  touch-action:manipulation;
}
.field-capsule__submit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9}
/* Effacer : un cercle creux de 44 px. */
.field-capsule__clear{
  display:grid;
  flex:none;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--surface-sunken);
  color:var(--ink);
  touch-action:manipulation;
}
.field-capsule__clear[hidden]{display:none}
.field-capsule__clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.field-capsule__submit:focus-visible,
.field-capsule__clear:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(hover:hover){
  .field-capsule__submit:hover{transform:scale(1.04)}
  .field-capsule__clear:hover{background:var(--ink);color:var(--surface)}
}
/* Sur l'encre (pied de page) : contour clair, sans fond ni ombre ; le
   texte passe au papier et l'anneau de focus à l'accent. */
.field-capsule--on-ink{
  border-color:var(--field-line,color-mix(in srgb,var(--paper) 72%,var(--ink)));
  background:transparent;
  box-shadow:none;
}
.field-capsule--on-ink:hover,
.field-capsule--on-ink:focus-within{border-color:var(--paper);background:transparent}
.field-capsule--on-ink:focus-within{outline-color:var(--accent)}
.field-capsule--on-ink .field-capsule__input{color:var(--paper)}

@media(min-width:951px){
  .stepper{justify-content:flex-start;margin-inline:0}
  .measure__label{text-align:left}
  .fold__summary{min-height:68px;padding-left:24px;font-size:1.1rem}
  .fold__body{padding:0 24px 24px}
}

@media(max-width:950px){
  .stepper__step{width:52px;height:52px}
  .stepper__readout{min-width:4.7ch}
  .ruler__tick--minor{display:none}
  .measure-verdict__answer{font-size:clamp(1.72rem,7.5vw,2.05rem)}
  .model-row__name{font-size:clamp(1.7rem,7vw,2rem)}
  .model-row[data-open]{padding-block:10px 16px}
  .helmet-tile{padding-block:8px}
}

@media(prefers-reduced-motion:no-preference){
  .stepper__step,.helmet-tile,.capsule,.choice,.sheet--soft,.fold__chevron,.field,.field-capsule,.field-capsule__submit,.field-capsule__clear{transition:background-color var(--motion-state),color var(--motion-state),border-color var(--motion-state),box-shadow var(--motion-state),transform var(--motion-state)}
  .capsule__chevron,.model-row__chevron,.fold__chevron svg{transition:rotate var(--motion-state)}
  .ruler__needle{transition:scale var(--motion-state),box-shadow var(--motion-state)}
  .helmet-tile__image{transition:translate var(--motion-state)}
  .range-bar__band{transition:opacity var(--motion-state)}
}

/* Liste de liens : des renvois, pas des choix. Un filet les sépare, une
   flèche les annonce, aucune capsule. */
.link-rows{display:grid;gap:0;margin:0;padding:0;list-style:none}
.link-rows > li + li{border-top:1px solid var(--ink-12)}
.link-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;color:var(--ink);font-weight:700;line-height:1.3;text-decoration:none}
.link-row .icon-arrow{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
@media(hover:hover){.link-row:hover span{text-decoration:underline;text-underline-offset:4px}}
.link-row:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Carte cliquable en entier : le lien du nom couvre toute la carte, les
   contrôles (achat, cadeau, mesure) passent au-dessus et gardent leur rôle.
   Pour un lecteur d'écran, le nom reste le seul lien. */
.card{position:relative}
.card-link{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card-link:focus-visible{outline:none}
.card:has(.card-link:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.card :is(button,form,input,label,select,textarea,.compare__buy,.vestiaire-look__decision,.vestiaire-look__actions,.vestiaire-look__note,.size-safety-net){position:relative;z-index:2}
/* Le signe que la carte s'ouvre : le casque grossit légèrement, sans cadre
   ni ombre autour de la carte. */
@media(prefers-reduced-motion:no-preference){
  .card :is(.vestiaire-look__image,.compare__image,.gift-card__image){transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .card:has(.card-link:hover) :is(.vestiaire-look__image,.compare__image,.gift-card__image),
  .card:has(.card-link:focus-visible) :is(.vestiaire-look__image,.compare__image,.gift-card__image){transform:scale(1.05)}
  .card:has(.card-link:active) :is(.vestiaire-look__image,.compare__image,.gift-card__image){transform:scale(1.02)}
}

/* Sur la fiche, le filet du formulaire d'achat ferme déjà la ligne de mesure. */
.product-fit > .capsule--quiet{border-bottom:0}