/* ══════════════════════════════════════════════════════════════════
   LES VARIANTES À DEUX AXES — boutique/variantes.css
   La feuille du bloc posé par boutique/variantes.js : une rangée de
   coloris, une rangée de tailles, et la version choisie écrite en
   toutes lettres juste avant le bouton de précommande.

   ELLE NE DÉFINIT AUCUNE COULEUR EN DUR. Tout passe par les jetons du
   socle, que presse.css retourne vers le papier :
     --nuit   le fond de page (nuit sombre, ou papier #F2ECE0)
     --encre  le texte (blanc, ou encre noire)
     --b20    le filet, l'échelle de gris du support
     --u2     l'encre de l'univers du rayon (vêtements compris)
     --f-titre / --f-corps / --f-mono
   Chargée sans presse.css, elle s'imprime en clair sur la peau
   sombre : moche mais entière, comme le reste de la boutique.

   MOUVEMENT : transform et opacity, rien d'autre. Aucun filter,
   aucune ombre douce, aucun dégradé. L'unique interrupteur du
   mouvement dans tout le projet est :root[data-calme="1"] ; la
   requête média de réduction du mouvement y est volontairement
   désarmée, on n'en écrit donc aucune ici.
   ══════════════════════════════════════════════════════════════════ */

/* ══ ① LA LISTE PLATE SE REPLIE ══
   variantes.js pose aussi `display:none` en ligne, parce que la règle
   `.choix__pastilles{display:flex}` de socle.css l'emporte sur le
   `[hidden]` du navigateur. Cette règle-ci est la ceinture : si un
   jour le style en ligne saute, la liste plate reste repliée tant que
   la grille est là. Sans JavaScript, aucune classe n'est posée et la
   liste plate s'affiche normalement — la fiche reste commandable. */
.choix--deuxaxes .choix__pastilles{ display:none }

/* ══ ② LE BLOC ══ */
.vx{
  margin:0 0 18px;
  border-top:1px solid var(--b20);      /* un filet, comme partout dans le journal */
  padding-top:14px;
}
.vx__axe{ margin:0 0 16px }
.vx__axe:last-of-type{ margin-bottom:12px }

/* L'étiquette d'axe : « COULEUR   BEIGE ». Le mot de gauche est le
   nom de l'axe (mono, espacé) ; celui de droite est le choix courant,
   pour qu'on n'ait jamais à chercher où on en est. */
.vx__t{
  display:flex; align-items:baseline; gap:.7em;
  margin:0 0 8px; min-height:1.2em;
}
.vx__et{
  font-family:var(--f-mono);
  font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  opacity:.6;
}
.vx__val{
  font-family:var(--f-mono);
  font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  /* 17/08 : --u2 mesurée à ~2,9:1 sur papier pour ce corps de .68rem ;
     --u1, l'encre sombre du rayon, tient 5,7:1 à 10:1 partout. */
  color:var(--u1);
}

.vx__rang{ display:flex; flex-wrap:wrap; gap:8px }

/* Les deux rangées portent en plus une classe qui dit LAQUELLE elles
   sont — .vx__axe--c / .vx__rang--c pour les coloris, --t pour les
   tailles. Rien ne s'y accroche aujourd'hui : ce sont des prises
   laissées ouvertes, pour le jour où une rangée devra se ranger
   autrement que l'autre (une grille de tailles à quinze cases, par
   exemple) sans avoir à retoucher le JavaScript. */
.vx__rang--t{ gap:6px }                 /* les tailles sont étroites : elles se serrent */

/* ══ ③ LES COLORIS ══
   Pastille ronde teintée + NOM ÉCRIT. Jamais la couleur seule : un
   client daltonien, et un client qui hésite entre deux bruns, lisent
   le mot. C'est aussi le critère 1.4.1 des WCAG.
   Le bouton, lui, est carré : c'est un caractère mobile posé sur la
   ligne, pas une bulle. */
.vx__c{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 14px 0 9px;
  border:1px solid var(--b20); border-radius:0;
  background:none; color:var(--encre);
  font-family:var(--f-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
}
.vx__n{ white-space:nowrap }

/* La pastille. --c est écrite par le JS quand le nom du coloris est
   reconnu ; sinon la classe --x prend le relais avec un aplat neutre
   tiré du support. On ne devine JAMAIS une teinte : un coloris
   inconnu se montre gris et se lit par son nom. */
.vx__pt{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--c, var(--b20));
  border:1px solid var(--b20);          /* le blanc et la crème ont besoin d'un bord */
  transition:transform .16s var(--e-sortie, ease);
}
.vx__pt--x{ background:var(--b20) }

.vx__c[aria-pressed="true"]{
  box-shadow:inset 0 0 0 2px var(--u2); /* un cerne net, pas une ombre */
  border-color:var(--u2);
}
.vx__c[aria-pressed="true"] .vx__pt{ transform:scale(1.12) }

/* ══ ④ LES TAILLES ══
   Rectangles. Une taille est un nombre ou une lettre : elle se lit
   mieux dans une case que dans une gélule. */
.vx__s{
  min-width:52px; min-height:44px; padding:0 12px;
  border:1px solid var(--b20); border-radius:0;
  background:none; color:var(--encre);
  font-family:var(--f-mono); font-size:.74rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
  font-variant-numeric:tabular-nums;    /* « 54/24 » et « 56/26 » alignés */
}
.vx__s[aria-pressed="true"]{
  background:var(--u2); border-color:var(--u2);
  /* 17/08 : var(--nuit) était un pari perdu — la rotative la retourne
     en crème, mesurée 2,9:1 sur l'encre d'univers. La leçon des îlots :
     sur un fond connu (les --u2 sont moyennes à claires), encre EN DUR. */
  color:#141210;
}

/* ══ ⑤ CE QUI EST ÉPUISÉ ══
   Barré, pâli, et toujours atteignable au clavier : le JS pose
   aria-disabled plutôt que disabled, pour qu'un lecteur d'écran
   annonce que cette taille existe et qu'elle est épuisée. */
.vx__s.est-epuise,
.vx__c.est-epuise{
  opacity:.42; cursor:default;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.vx__c.est-epuise{ text-decoration:none }
.vx__c.est-epuise .vx__n{ text-decoration:line-through }
/* La barre en travers de la pastille : deux traits croisés feraient
   un signe, un seul suffit à dire « plus disponible ». */
.vx__c.est-epuise .vx__pt{ position:relative; overflow:hidden }
.vx__c.est-epuise .vx__pt::after{
  content:''; position:absolute; left:-20%; top:50%; width:140%; height:1px;
  background:var(--encre); transform:rotate(-45deg);
}

.vx__epuise{
  margin:8px 0 0;
  font-family:var(--f-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:.55;
}

/* ══ ⑥ LA VERSION CHOISIE, EN TOUTES LETTRES ══
   La dernière chose lue avant le bouton de précommande. Grande, dans
   la police du journal, pour qu'on parte au paiement en sachant
   exactement ce qu'on emporte. */
.vx__somme{
  margin:0;
  font-family:var(--f-titre);
  font-weight:800; font-size:clamp(1.05rem,2.6vw,1.5rem);
  line-height:1.05; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--encre);
}

/* ══ ⑦ LE SURVOL, LA CIBLE, LE FOCUS ══ */
@media (hover:hover) and (pointer:fine){
  .vx__c:hover:not(.est-epuise) .vx__pt{ transform:scale(1.12) }
  .vx__c:hover:not(.est-epuise),
  .vx__s:hover:not(.est-epuise){ border-color:var(--u2) }
}
/* Le contour de clavier ne se confond pas avec l'état choisi :
   celui-ci cerne l'intérieur (box-shadow inset), celui-là se pose à
   l'extérieur. On peut donc être « au clavier sur une case » sans
   l'avoir choisie, et le voir. */
.vx__c:focus-visible,
.vx__s:focus-visible{
  outline:2px solid var(--encre); outline-offset:2px;
}

/* ══ ⑧ L'INTERRUPTEUR DE MOUVEMENT ══
   Une seule adresse dans tout le projet. Il coupe le mouvement, pas
   le contenu : la pastille choisie reste reconnaissable à son cerne. */
:root[data-calme="1"] .vx__pt{ transition:none }
:root[data-calme="1"] .vx__c[aria-pressed="true"] .vx__pt,
:root[data-calme="1"] .vx__c:hover .vx__pt{ transform:none }

/* ══ ⑨ LE TÉLÉPHONE ══
   375 px de large : les rangées respirent moins, les cibles ne
   rétrécissent pas. 44 px reste 44 px — c'est le doigt qui commande. */
@media (max-width:480px){
  .vx__rang{ gap:6px }
  .vx__c{ padding:0 11px 0 8px; font-size:.64rem }
  .vx__s{ min-width:48px; padding:0 10px }
}