/* ============================================================================
   LE BOUTON DU CODE PROMO — « l éclair »

   PREFIXE `cpz`, ET SURTOUT PAS `dsc`. `dsc` est deja celui du BANDEAU DE CONSENTEMENT
   (`inc/consent.php`, `ds-consent.css` : .dsc, .dsc-b, .dsc-l, .dsc-t, .dsc-a, .dsc-x).
   Mesure du 26/08 sur telephone, cette feuille chargee par-dessus : la racine du bandeau
   passait de 386x123 a 491x150 — 89 px de debord sur un ecran de 402 — et SES DEUX BOUTONS
   « Tout refuser » et « Tout accepter » devenaient deux blocs encre identiques.
   Sur un composant legalement obligatoire, et sans la moindre erreur levee.
   Le volt ne tient QUE sur fond sombre : 16,33:1 sur l encre, 1,07:1 sur l os.
   Ce bouton est donc encre, et le volt n y est jamais qu une couleur de texte SUR
   du sombre, ou un aplat portant de l encre.
   ============================================================================ */

.cpz{position:relative;display:inline-flex;vertical-align:middle}

.cpz-b{position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(22px,3vw,34px);letter-spacing:.05em;line-height:1.05;
  padding:14px 24px;background:var(--ink2,#181818);color:#fff;border:0;cursor:pointer;
  overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.cpz-b:focus-visible{outline:3px solid var(--volt);outline-offset:3px}

/* LA DOUBLURE. Elle est peinte PAR-DESSUS et decouverte par le masque. `user-select:none`
   n est pas un detail : sans lui une selection rend le code DEUX FOIS et le copier-coller
   donne un code faux. Mesure du 26/08 : « DIX2026 DIX2026 ». */
.cpz-l{position:relative;z-index:2;display:block;user-select:text;-webkit-user-select:text}
.cpz-sur{position:absolute;inset:0;display:grid;place-items:center;color:var(--volt);
  padding:inherit;user-select:none;-webkit-user-select:none;
  clip-path:inset(0 100% 0 0)}

/* LE BALAYAGE EST LINEAIRE. Avec `--ease` (decelere) l eclair faisait 90 % de sa course en
   300 ms puis stationnait a droite : un flash, pas un passage. Mesure : 126, 207, 231, 237
   contre 10, 58, 106, 154 en lineaire. */
.cpz-bolt{position:absolute;top:50%;left:-14%;width:30px;height:30px;z-index:3;
  fill:var(--volt);opacity:0;pointer-events:none;
  transform:translateY(-50%) skewX(-10deg) scale(.7);
  filter:drop-shadow(0 0 10px rgba(200,255,0,.7))}

/* LE SOULEVEMENT ET LE BALAYAGE SONT RESERVES AUX POINTEURS. Sur tactile `:hover` reste
   COLLE apres le tap ; `:active` rejoue le meme etat, le temps de l appui. */
@media(hover:hover){
  .cpz-b:hover .cpz-sur,.cpz-b:focus-visible .cpz-sur{clip-path:inset(0 0 0 0)}
  .cpz-b:hover .cpz-bolt,.cpz-b:focus-visible .cpz-bolt{animation:cpzBolt .56s linear both}
}
/* AU DOIGT, `:active` NE SUFFIT PAS — il tombe quand le doigt se leve. Mesure du 26/08 sur
   un vrai tap : le balayage atteignait 24 % de sa course (100 % → 76 %) puis revenait a
   100 %, et l eclair etait annule en plein vol. On garde `:active` pour que quelque chose
   parte immediatement, mais c est l etat `data-joue` pose par le script qui TIENT
   l animation jusqu au bout. */
.cpz-b:active .cpz-sur{clip-path:inset(0 0 0 0)}
.cpz-b:active .cpz-bolt{animation:cpzBolt .56s linear both}
.cpz[data-joue="1"] .cpz-sur{clip-path:inset(0 0 0 0)}
.cpz[data-joue="1"] .cpz-bolt{animation:cpzBolt .56s linear both}
.cpz-sur{transition:clip-path .56s linear}

@keyframes cpzBolt{
  0%{opacity:0;left:-14%;transform:translateY(-50%) skewX(-10deg) scale(.7)}
  18%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;left:104%;transform:translateY(-50%) skewX(-10deg) scale(1.1)}}

/* LA CONFIRMATION VIT HORS DU BOUTON : `.cpz-b` porte `overflow:hidden` pour decouper
   l eclair, et rognait donc sa propre pastille. `getBoundingClientRect` la donnait pour
   bien placee — il ignore le rognage d un ancetre. Seule la capture l a dit. */
.cpz-ok{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);
  background:var(--volt);color:var(--ink);font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:6;
  transition:opacity .2s linear,transform .3s cubic-bezier(.34,1.56,.64,1)}
.cpz[data-copie="1"] .cpz-ok{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .cpz-sur,.cpz-bolt,.cpz-ok{transition:none !important;animation:none !important}
}

/* ---------- LE BANDEAU DE L OPERATION ----------
   Pleine largeur comme la vitrine et la rangee : `.pz` vit dans `main.wrap`, deja rentre,
   d ou le `margin-inline` negatif. Le rembourrage interieur reprend l expression de marge
   de la couture volt, pour que le texte s aligne sur le meme bord que le reste. */
.pz{width:100vw;margin-inline:calc(50% - 50vw);background:var(--ink);color:#fff;
  position:relative;overflow:hidden}
.pz-in{max-width:1240px;margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:22px 30px;flex-wrap:wrap;
  padding:26px max(var(--gut,16px),calc((100vw - 1240px)/2 + var(--gut,16px)))}
.pz-k{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--volt);margin:0}
.pz-t{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.6vw,42px);
  line-height:.92;margin:9px 0 0;word-spacing:.1em}
.pz-t em{font-style:normal;color:var(--volt)}
.pz-s{font-family:var(--body);font-size:13px;color:var(--mute);margin:9px 0 0;max-width:44ch}
@media(max-width:700px){.pz-in{padding:20px var(--gut,16px);gap:16px}.pz-t{font-size:26px}}

/* ---------- LA LIGNE « AVEC LE CODE » SUR LA CARTE ----------
   Volt sur encre : sur fond clair le volt fait 1,07:1, il n y est jamais un texte. */
.rpz-code{display:block;margin-top:7px;width:max-content;position:relative;overflow:hidden;
  background:var(--ink);color:var(--volt);
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 7px}

/* LES PASTILLES D UN MEME RAIL SE LISENT SUR UNE LIGNE COMMUNE.
   Mesure du 27/08 sur l accueil, haut de la pastille compte depuis le haut de sa carte :
   Air Max Plus 337 / 355 / 373 / 380 / 398 — 61 px d ecart d une carte a l autre ;
   ProGrid Omni 9, 25 px. Deux causes qui s additionnent, toutes deux en AMONT de la
   pastille : le titre prend 18, 36 ou 54 px selon qu il tient sur une, deux ou trois
   lignes, et le bloc prix prend 39 ou 64 px selon qu il porte ou non la ligne
   « ailleurs ». La pastille suivait le flux, donc elle heritait des deux.

   `margin-top:auto` sur le bloc prix pousse prix + pastille CONTRE LE BAS de `.pinfo`,
   qui est deja `flex:1` dans une `.pcard` en colonne. Les cartes d un rail ont toutes la
   meme hauteur (`.rail` est un flex, `align-items:stretch` par defaut — mesure : 438 px
   pour les dix cartes du premier rail, ecart 0), donc « contre le bas » est la meme
   ligne pour toutes. Le titre reste en haut, la ou on le lit ; l ecart variable passe
   entre le titre et le prix, ou il ne se voit pas.

   PORTEE VOLONTAIREMENT ETROITE. `.pcard` sert aussi les pages de liste et le reste de
   l accueil : la regle ne vaut que dans `.rpz`, la ou la pastille existe. Une carte du
   rail SANS pastille (article deja en promo, ou sous le plancher) pose alors son prix
   sur la ligne des pastilles et non sur celle des prix — c est le seul cas ou les deux
   familles ne peuvent pas etre alignees en meme temps, et il n y en avait aucune le
   27/08 sur les vingt cartes en ligne. */
.rpz .rail > .pcard .pprice{margin-top:auto}

/* ---------- L ECLAIR SUR LA PASTILLE ----------
   Le meme dispositif que le bouton du code, en miniature : c est ce qui relie la carte a
   l operation. Choix owner du 26/08.

   RIEN N EST MASQUE AU DEPART. Seul le `::before` bouge ; la pastille et son texte sont
   peints des le premier rendu. C est ce qui la rend inoffensive pour le LCP — mesure du
   26/08 : l element LCP de l accueil est `img.pimg`, la premiere image du rail, et aucune
   des cinq variantes essayees ne l a deplace.

   NE JAMAIS PORTER CETTE ANIMATION SUR `.pcard` : c est l ancetre de l image, donc de
   l element LCP. Un contre-exemple qui la retenait 2,6 s a fait TOMBER le LCP a 1 016 ms
   en le reportant sur le titre du bandeau — un chiffre qui s ameliore parce qu on a cache
   son meilleur contenu.

   `vu` est pose par ds-code-promo.js, jamais au survol : 85,5 % des sessions arrivent au
   doigt. Sans JS la pastille reste lisible, l eclair ne joue simplement pas. */
.rpz-code::before{content:'';position:absolute;top:50%;left:-18%;width:13px;height:13px;
  background:var(--volt);opacity:0;pointer-events:none;
  clip-path:polygon(59% 0,23% 56%,45% 56%,39% 100%,74% 43%,52% 43%);
  transform:translateY(-50%) skewX(-10deg)}
.rpz-code.vu::before{animation:rpzBolt .5s linear both}
@keyframes rpzBolt{
  0%{opacity:0;left:-18%}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;left:106%}}
@media (prefers-reduced-motion:reduce){
  .rpz-code::before{animation:none !important;opacity:0 !important}
}

/* ---------- LE TITRE D UN RAIL D OPERATION ----------
   Meme famille que `.rg-t`, la tete des rangees de marque : Clash Display en capitales, a
   la meme echelle. `word-spacing` EST NECESSAIRE : en capitales serrees Clash avale
   l espace et « Nike Air Max Plus » se lit « NIKEAIRMAXPLUS ». */
.rpz{margin-top:clamp(22px,3vw,36px)}
.rpz-t{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.4vw,42px);
  line-height:.98;margin:0;letter-spacing:.004em;word-spacing:.1em;color:var(--ink);
  text-wrap:balance}