/* Couche de design posee sur tout le reste : matiere, mouvement, etats,
   echelle typographique appliquee, en-tete collant. Elle surcharge
   volontairement les fichiers precedents et doit rester chargee en dernier.
   Extrait de theme.css sans modification. */

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}

/* Grain fixe qui casse la platitude du numérique, sans coût réseau. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Les chiffres qui se comparent ou se mettent à jour ne doivent pas danser. */
.product-info__price,.product-info__facts strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.rte p,.article-page__body p,.product-info__lead{text-wrap:pretty}

/* ---- Interaction ---- */

.button{transition:transform var(--dur) var(--ease-out-quint),background var(--dur) var(--ease-out-quart),color var(--dur) var(--ease-out-quart),border-color var(--dur) var(--ease-out-quart),box-shadow var(--dur) var(--ease-out-quint)}
.button--accent:hover{box-shadow:var(--shadow-key)}
.button--ink:hover,.button--outline:hover{box-shadow:var(--shadow-2)}
/* Retour physique à l'appui, sans déplacer les voisins. */
.button:active{transform:translateY(0) scale(.985)}
.button[aria-busy="true"]{pointer-events:none;opacity:.72}
.button[aria-busy="true"] span{visibility:hidden}
.button[aria-busy="true"]::after{
  content:"";width:17px;height:17px;margin-left:auto;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite;
}
.product-form__submit[data-added="true"],
[data-mobile-add][data-added="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
.pcard__add[data-added="true"] > span,
.product-form__submit[data-added="true"] > span{visibility:hidden}
.pcard__add[data-added="true"]::after,
.product-form__submit[data-added="true"]::after,
[data-mobile-add][data-added="true"]::after{content:"✓";font-size:1rem;line-height:1}

.text-link{transition:opacity var(--dur-fast) var(--ease-out-quart),border-color var(--dur) var(--ease-out-quart)}

.club-tile{transition:transform var(--dur) var(--ease-out-quint),box-shadow var(--dur) var(--ease-out-quint)}
.club-tile:hover{box-shadow:var(--shadow-3)}
.club-tile:focus-within{box-shadow:var(--shadow-3)}

/* Le survol ne doit pas être le seul chemin : le clavier ouvre la même bande. */

/* ---- Révélations au défilement ----
   Par défaut tout est visible. Le JS ne pose data-motion que s'il peut
   observer et animer, donc une page sans JS, un rendu headless ou un
   onglet en arrière-plan affichent le contenu, jamais du vide. */
[data-reveal]{opacity:1;transform:none}
html[data-motion="on"] [data-reveal]{opacity:0;transform:translateY(18px)}
html[data-motion="on"] [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease-out-quart),transform var(--dur-slow) var(--ease-out-quint);
  transition-delay:var(--reveal-delay,0ms);
}

/* ---- États : chargement, vide, erreur ---- */

.skeleton{position:relative;overflow:hidden;background:var(--surface-sunken)}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:sheen 1.25s var(--ease-out-quart) infinite;
}

.state-empty{display:grid;justify-items:start;gap:14px;max-width:52ch;padding:clamp(28px,5vw,56px) 0}
.state-empty h2{margin:0;font-size:var(--fs-h3);font-weight:800;line-height:1;text-transform:uppercase}
.state-empty p{margin:0;color:var(--muted);font-size:1.06rem}

.form-error{display:flex;gap:9px;align-items:flex-start;margin-top:7px;color:#8f1d1d;font-size:.86rem;font-weight:700}
.form-error::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:50%;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8v5m0 3h.01M12 3l9 16H3z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M12 8v5m0 3h.01M12 3l9 16H3z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
[aria-invalid="true"]{border-color:#8f1d1d}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{to{transform:translateX(100%)}}

/* ---- Mouvement réduit : on coupe, on ne cache rien ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  html[data-motion="on"] [data-reveal]{opacity:1;transform:none}

  .button:hover,.club-tile:hover{transform:none}
}

/* Les deux seules lignes de service conservées portent une information
   réelle, le fournisseur et la date, et non un surtitre décoratif. */
.meta-line{margin:0 0 14px;color:var(--ink-70);font-size:.86rem;font-weight:700;letter-spacing:.02em}
.product-info .meta-line{text-transform:uppercase;letter-spacing:.09em;font-size:.74rem}


.club-tile__bottom strong{font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.02em}

/* Texte réservé aux lecteurs d'écran, sans le retirer de l'ordre de lecture. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   En-tête collant
   L'en-tête suit le visiteur sans occuper l'écran : il se retire quand on
   descend, revient dès qu'on remonte, et ne prend son fond opaque qu'une
   fois le hero dépassé. La navigation et le panier restent donc toujours
   à une remontée de distance.
   ============================================================ */

/* Un menu ouvert ou un focus clavier dans l'en-tête le ramène toujours. */

/* ============================================================
   Carte produit
   Le casque occupe la carte. Au survol, la seconde vue prend la place de
   la première et la plage de tailles apparaît : les deux questions que se
   pose l'acheteur, à quoi il ressemble de l'autre côté et s'il ira.
   ============================================================ */

/* Sans seconde vue, la première garde son agrandissement d'origine. */

/* La plage de tailles est le premier filtre mental de l'acheteur : elle
   s'affiche sur l'image, pas seulement dans le texte sous la carte. */