/* ============================================================================
   MOULOUDIA MARKET — styles.css
   Boutique officielle du Mouloudia Club d'Oran — site statique.
   ----------------------------------------------------------------------------
   Sommaire
     1. Polices (locales, aucun appel réseau)
     2. Tokens : couleurs, typo, rythme
     3. Base & utilitaires
     4. En-tête, navigation, tiroir panier
     5. Accueil : hero « Sangre roja / Alma blanca », marquee, vedettes,
        catégories, galerie, le club, comment commander
     6. Cartes produit
     7. Boutique : filtres + grille
     8. Fiche produit : galerie, tailles, guide des tailles
     9. Panier & commande
    10. Composants : boutons, badges, modales, lightbox, toast
    11. Motion : apparitions au scroll, micro-interactions, reduced-motion
    12. Pied de page
    13. Responsive
   ============================================================================ */

/* ------------------------------------------------------------ 1. POLICES */
@font-face { font-family: 'Tanker'; src: url('../assets/fonts/Tanker-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../assets/fonts/IBMPlexSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../assets/fonts/IBMPlexSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lalezar'; src: url('../assets/fonts/Lalezar-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('../assets/fonts/Tajawal-400-arabic.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Tajawal'; src: url('../assets/fonts/Tajawal-500-arabic.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Tajawal'; src: url('../assets/fonts/Tajawal-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ------------------------------------------------------------ 2. TOKENS */
:root {
  /* Charte Mouloudia Market (brand/tokens.json + identité du 01/09/2026) */
  --rouge: #C41814;          /* rouge de marque : boutons, prix, accents */
  --rouge-vif: #E50F2E;      /* rouge de l'écusson : survols, lueurs */
  --rouge-profond: #8E1B1B;  /* fonds de bandeau, ombres colorées */
  --rouge-lavis: #FBECEB;    /* fond très léger derrière un badge, une pastille */
  --blanc: #FFFFFF;
  --craie: #F6F3F1;          /* panneaux, cartes, fonds de section légers */
  --encre: #140C0D;          /* texte, pied de page */
  --encre-2: #4A3B3B;
  --gris: #8C7F7F;
  --ligne: #E7E1DE;
  --ligne-forte: #CFC4C0;
  --dore: #D9BE94;           /* liseré de l'écusson — jamais en aplat */
  --ok: #2E6B45;
  --ok-lavis: #E8F2EC;

  --display: 'Tanker', 'Arial Narrow', Impact, sans-serif;
  --texte: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --arabe-display: 'Lalezar', 'Tajawal', sans-serif;
  --arabe: 'Tajawal', sans-serif;

  --max: 1280px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --rayon: 6px;
  --rayon-lg: 14px;
  --ombre: 0 1px 2px rgba(20,12,13,.06), 0 12px 32px -12px rgba(20,12,13,.18);
  --ombre-rouge: 0 14px 36px -14px rgba(196,24,20,.55);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --vite: .22s;
  --moyen: .5s;
  --lent: .9s;

  --h-entete: 72px;
}

/* ------------------------------------------------------------ 3. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.verrou { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }   /* 18/09/2026 : l'enveloppe <picture> (WebP + tailles) ne change rien à la mise en page */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--rouge); color: #fff; }

.conteneur { max-width: var(--max); margin: 0 auto; padding: 0 var(--gouttiere); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typographie d'affichage — Tanker, capitales serrées */
.display { font-family: var(--display); text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
.ar { font-family: var(--arabe); direction: rtl; }
.ar-display { font-family: var(--arabe-display); direction: rtl; line-height: 1.25; }
.tnum { font-variant-numeric: tabular-nums; }

/* Surtitre : petit losange rouge (la forme de l'écusson) + capitales espacées */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--rouge);
}
.surtitre::before { content: ''; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); flex: none; }
.surtitre.blanc { color: #fff; }

.titre-section { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: .92; margin-top: 12px; }
.titre-section em { font-style: normal; color: var(--rouge); }
.entete-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.entete-section p { max-width: 46ch; color: var(--encre-2); }

.section { padding: clamp(56px, 8vw, 110px) 0; }
.section.craie { background: var(--craie); }

/* ------------------------------------------------------------ 4. EN-TÊTE */
.bandeau-preprod {
  background: var(--encre); color: #fff; font-size: 12px; letter-spacing: .04em; text-align: center; padding: 7px 16px;
}
.bandeau-preprod b { color: var(--dore); font-weight: 600; }

.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--ligne);
  transition: transform var(--moyen) var(--ease-out), box-shadow var(--moyen);
}
.entete::before { content: ''; display: block; height: 3px; background: var(--rouge); }
.entete.cache { transform: translateY(-100%); }
.entete.ombre { box-shadow: 0 8px 30px -18px rgba(20,12,13,.35); }
.entete-inner { height: var(--h-entete); display: flex; align-items: center; gap: 32px; }

.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo img { width: auto; transition: transform var(--vite) var(--ease-out); }
.logo .monogramme { height: 44px; }
.logo .wordmark { height: 30px; margin-top: 4px; }
.logo:hover .monogramme { transform: translateY(-2px); }

.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  position: relative; padding: 10px 14px; font-weight: 500; font-size: 15px; color: var(--encre-2);
  transition: color var(--vite);
}
.nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--rouge);
  transform: scaleX(0); transform-origin: left; transition: transform var(--moyen) var(--ease-out);
}
.nav a:hover, .nav a.actif { color: var(--encre); }
.nav a:hover::after, .nav a.actif::after { transform: scaleX(1); }

.entete-actions { display: flex; align-items: center; gap: 8px; }
.btn-panier {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 16px;
  background: var(--encre); color: #fff; border-radius: 999px; font-weight: 600; font-size: 14px;
  transition: background var(--vite), transform var(--vite) var(--ease-out);
}
.btn-panier:hover { background: var(--rouge); transform: translateY(-1px); }
.btn-panier svg { width: 18px; height: 18px; }
.btn-panier .compteur {
  min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  background: var(--rouge); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700;
  transition: transform var(--moyen) var(--ease-out);
}
.btn-panier.pulse .compteur { animation: pulse .5s var(--ease-out); }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.burger { display: none; width: 44px; height: 44px; place-items: center; border-radius: 999px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--encre); position: relative; transition: background var(--vite); }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--encre); transition: transform var(--moyen) var(--ease-out), top var(--moyen); }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Menu mobile */
.menu-mobile {
  position: fixed; inset: 0; z-index: 55; background: var(--blanc); padding: calc(var(--h-entete) + 84px) var(--gouttiere) 40px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--moyen), transform var(--moyen) var(--ease-out);
}
.menu-mobile.ouvert { opacity: 1; transform: none; pointer-events: auto; }
.menu-mobile a { font-family: var(--display); text-transform: uppercase; font-size: 44px; line-height: 1.05; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.menu-mobile a:hover { color: var(--rouge); }
.menu-mobile .ar-display { font-size: 28px; color: var(--rouge); margin-top: auto; text-align: left; }

/* Tiroir panier */
.voile { position: fixed; inset: 0; z-index: 70; background: rgba(20,12,13,.5); opacity: 0; pointer-events: none; transition: opacity var(--moyen); }
.voile.visible { opacity: 1; pointer-events: auto; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(440px, 100%); background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--moyen) var(--ease-out);
  box-shadow: -20px 0 60px -30px rgba(20,12,13,.4);
}
.tiroir.ouvert { transform: none; }
.tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--ligne); }
.tiroir-entete h2 { font-family: var(--display); text-transform: uppercase; font-size: 28px; }
.tiroir-corps { flex: 1; overflow: auto; padding: 8px 24px; }
.tiroir-pied { padding: 20px 24px 24px; border-top: 1px solid var(--ligne); background: var(--craie); }
.tiroir-pied .ligne-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.tiroir-pied .ligne-total b { font-family: var(--display); font-size: 28px; color: var(--rouge); }
.tiroir-pied .btn { width: 100%; }
.tiroir-pied small { display: block; text-align: center; margin-top: 10px; color: var(--gris); font-size: 12px; }
.fermer {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--craie);
  transition: background var(--vite), transform var(--moyen) var(--ease-out);
}
.fermer:hover { background: var(--rouge-lavis); color: var(--rouge); transform: rotate(90deg); }
.fermer svg { width: 16px; height: 16px; }

/* Ligne de panier (tiroir + page) */
.ligne-panier { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ligne); align-items: start; }
.ligne-panier img { width: 84px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--rayon); background: var(--craie); }
.ligne-panier .nom { font-weight: 600; line-height: 1.3; }
.ligne-panier .meta { font-size: 12.5px; color: var(--gris); margin-top: 4px; letter-spacing: .02em; }
.ligne-panier .meta b { color: var(--encre-2); font-weight: 600; }
.ligne-panier .prix { font-family: var(--display); font-size: 20px; text-align: right; }
.ligne-panier .supprimer { font-size: 12px; color: var(--gris); text-decoration: underline; text-underline-offset: 3px; margin-top: 8px; display: block; }
.ligne-panier .supprimer:hover { color: var(--rouge); }
.qte { display: inline-flex; align-items: center; border: 1px solid var(--ligne-forte); border-radius: 999px; height: 34px; margin-top: 10px; }
.qte button { width: 34px; height: 34px; font-size: 18px; line-height: 1; display: grid; place-items: center; border-radius: 999px; transition: background var(--vite); }
.qte button:hover { background: var(--craie); }
.qte output { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.panier-vide { text-align: center; padding: 60px 20px; color: var(--gris); }
.panier-vide .display { font-size: 32px; color: var(--encre); margin-bottom: 8px; }
.panier-vide .btn { margin-top: 20px; }

/* ------------------------------------------------------------ 5. ACCUEIL */
/* Hero « Sangre roja, alma blanca » : la devise du club, en deux tenues.
   L'état bascule tout le bloc : fond, titre, image. */
.hero {
  position: relative; overflow: hidden;
  background: var(--blanc); color: var(--encre);
  transition: background-color var(--lent) var(--ease-in-out), color var(--lent) var(--ease-in-out);
  min-height: calc(100vh - var(--h-entete) - 3px);
  display: flex; align-items: center;
}
.hero[data-kit="away"] { background: var(--rouge); color: #fff; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; width: 100%; padding-top: 40px; padding-bottom: 40px; }
.hero-texte { position: relative; z-index: 2; }
.hero-titre { font-family: var(--display); text-transform: uppercase; font-size: clamp(4.2rem, 11.5vw, 11.5rem); line-height: .86; letter-spacing: -.005em; }
.hero-titre .l { display: block; overflow: hidden; }
.hero-titre .l > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease-out), color var(--lent) var(--ease-in-out), -webkit-text-stroke-color var(--lent); }
.hero.pret .hero-titre .l > span { transform: none; }
.hero-titre .l:nth-child(2) > span { transition-delay: .08s; }
/* ligne pleine = la tenue affichée ; ligne creuse = l'autre */
.hero-titre .roja { color: var(--rouge); }
.hero-titre .blanca { color: transparent; -webkit-text-stroke: 2px var(--encre); }
.hero[data-kit="away"] .hero-titre .roja { color: transparent; -webkit-text-stroke: 2px #fff; }
.hero[data-kit="away"] .hero-titre .blanca { color: #fff; -webkit-text-stroke: 2px #fff; }
.hero-sous { margin-top: 28px; max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--encre-2); transition: color var(--lent); }
.hero[data-kit="away"] .hero-sous { color: rgba(255,255,255,.85); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero[data-kit="away"] .btn.plein { background: #fff; color: var(--rouge); }
.hero[data-kit="away"] .btn.plein::before { background: var(--encre); }
.hero[data-kit="away"] .btn.plein:hover { color: #fff; }
.hero[data-kit="away"] .btn.contour { border-color: rgba(255,255,255,.6); color: #fff; }
.hero[data-kit="away"] .btn.contour:hover { background: #fff; color: var(--rouge); border-color: #fff; }

.hero-surtitre { opacity: 0; transform: translateY(10px); transition: opacity var(--lent) var(--ease-out), transform var(--lent) var(--ease-out), color var(--lent); }
.hero.pret .hero-surtitre { opacity: 1; transform: none; transition-delay: .15s; }
.hero[data-kit="away"] .hero-surtitre { color: #fff; }
.hero-sous, .hero-cta, .hero-bascule { opacity: 0; transform: translateY(14px); }
.hero.pret .hero-sous { opacity: 1; transform: none; transition: opacity var(--lent) var(--ease-out) .35s, transform var(--lent) var(--ease-out) .35s, color var(--lent); }
.hero.pret .hero-cta { opacity: 1; transform: none; transition: opacity var(--lent) var(--ease-out) .5s, transform var(--lent) var(--ease-out) .5s; }
.hero.pret .hero-bascule { opacity: 1; transform: none; transition: opacity var(--lent) var(--ease-out) .7s, transform var(--lent) var(--ease-out) .7s; }

/* Interrupteur Domicile / Extérieur */
.hero-bascule { display: inline-flex; align-items: center; gap: 6px; margin-top: 40px; padding: 5px; border-radius: 999px; background: rgba(20,12,13,.06); position: relative; transition: background var(--lent); }
.hero[data-kit="away"] .hero-bascule { background: rgba(255,255,255,.14); }
.hero-bascule button { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: inherit; transition: color var(--moyen); }
.hero-bascule .curseur { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 8px); border-radius: 999px; background: var(--encre); transition: transform var(--moyen) var(--ease-out), background var(--lent); }
.hero-bascule button[aria-pressed="true"] { color: #fff; }
.hero[data-kit="away"] .hero-bascule .curseur { transform: translateX(calc(100% + 6px)); background: #fff; }
.hero[data-kit="away"] .hero-bascule button[aria-pressed="true"] { color: var(--rouge); }
.hero-bascule .barre { position: absolute; left: 14px; right: 14px; bottom: -8px; height: 2px; background: currentColor; opacity: .25; transform-origin: left; transform: scaleX(0); }
.hero.auto .hero-bascule .barre { animation: compte 5.2s linear infinite; }
@keyframes compte { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Visuel : deux images appariées, fondu enchaîné */
.hero-visuel { position: relative; aspect-ratio: 4/5; max-height: 78vh; margin: 0 auto; width: 100%; max-width: 520px; z-index: 1;
  opacity: 0; transform: translateY(30px) scale(.98); transition: opacity 1.2s var(--ease-out) .2s, transform 1.2s var(--ease-out) .2s; }
.hero.pret .hero-visuel { opacity: 1; transform: none; }
.hero-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon-lg); transition: opacity var(--lent) var(--ease-in-out); }
.hero-visuel .away { opacity: 0; }
.hero[data-kit="away"] .hero-visuel .home { opacity: 0; }
.hero[data-kit="away"] .hero-visuel .away { opacity: 1; }
.hero-visuel .etiquette {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; padding: 10px 14px; border-radius: var(--rayon);
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px); color: var(--encre); font-size: 12px; line-height: 1.3;
  box-shadow: var(--ombre); transition: transform var(--moyen) var(--ease-out);
}
.hero-visuel .etiquette b { display: block; font-weight: 600; }
.hero-visuel .etiquette .ref { color: var(--gris); letter-spacing: .06em; font-size: 11px; }
.hero-visuel .etiquette:hover { transform: translateY(-3px); }
/* grand mot en arrière-plan : le monogramme ouvert « 1917 » */
.hero-fond { position: absolute; right: -2vw; bottom: -4vw; font-family: var(--display); font-size: clamp(10rem, 28vw, 30rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(20,12,13,.08); pointer-events: none; user-select: none; z-index: 0; transition: -webkit-text-stroke-color var(--lent); }
.hero[data-kit="away"] .hero-fond { -webkit-text-stroke-color: rgba(255,255,255,.14); }

/* Hero photo : la même scène au Stade Miloud Hadefi, en maillot domicile puis extérieur.
   La photo occupe tout le bloc ; le texte vit sur la partie calme, à gauche. */
.hero-photo { background: var(--encre); color: #fff; min-height: min(92vh, 860px); }
.hero-photo[data-kit="away"] { background: var(--encre); color: #fff; }
.hero-fond-photo { position: absolute; inset: 0; z-index: 0; }
.hero-fond-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; transition: opacity var(--lent) var(--ease-in-out), transform 8s linear; transform: scale(1.02); }
.hero-fond-photo .away { opacity: 0; }
.hero-photo[data-kit="away"] .hero-fond-photo .home { opacity: 0; }
.hero-photo[data-kit="away"] .hero-fond-photo .away { opacity: 1; }
.hero-photo.pret .hero-fond-photo img { transform: scale(1); }
/* voile : lisible à gauche, la photo intacte à droite */
.hero-fond-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,13,.86) 0%, rgba(20,12,13,.62) 34%, rgba(20,12,13,.18) 58%, rgba(20,12,13,0) 74%), linear-gradient(0deg, rgba(20,12,13,.55) 0%, rgba(20,12,13,0) 36%); }
.hero-photo .hero-inner { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 72px; }
.hero-photo .hero-texte { max-width: 640px; }
.hero-photo .hero-titre .roja { color: var(--rouge-vif); }
.hero-photo .hero-titre .blanca { color: transparent; -webkit-text-stroke: 2px #fff; }
.hero-photo[data-kit="away"] .hero-titre .roja { color: transparent; -webkit-text-stroke: 2px var(--rouge-vif); }
.hero-photo[data-kit="away"] .hero-titre .blanca { color: #fff; -webkit-text-stroke: 2px #fff; }
.hero-photo .hero-surtitre, .hero-photo[data-kit="away"] .hero-surtitre { color: #fff; }
.hero-photo .hero-sous, .hero-photo[data-kit="away"] .hero-sous { color: rgba(255,255,255,.82); }
.hero-photo .btn.plein, .hero-photo[data-kit="away"] .btn.plein { background: var(--rouge); color: #fff; }
.hero-photo .btn.plein::before, .hero-photo[data-kit="away"] .btn.plein::before { background: #fff; }
.hero-photo .btn.plein:hover, .hero-photo[data-kit="away"] .btn.plein:hover { color: var(--rouge); }
.hero-photo .btn.contour, .hero-photo[data-kit="away"] .btn.contour { border-color: rgba(255,255,255,.55); color: #fff; }
.hero-photo .btn.contour:hover, .hero-photo[data-kit="away"] .btn.contour:hover { background: #fff; color: var(--encre); border-color: #fff; }
.hero-photo .hero-bascule, .hero-photo[data-kit="away"] .hero-bascule { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
.hero-photo .hero-bascule .curseur, .hero-photo[data-kit="away"] .hero-bascule .curseur { background: #fff; }
.hero-photo .hero-bascule button { color: rgba(255,255,255,.85); }
.hero-photo .hero-bascule button[aria-pressed="true"], .hero-photo[data-kit="away"] .hero-bascule button[aria-pressed="true"] { color: var(--encre); }
.hero-visuel-etiquette { position: absolute; right: var(--gouttiere); bottom: 28px; max-width: none; width: auto; aspect-ratio: auto; max-height: none; margin: 0; z-index: 2; opacity: 1; transform: none; }
.hero-visuel-etiquette .etiquette { position: static; display: block; transition: opacity var(--lent) var(--ease-in-out), transform var(--moyen) var(--ease-out); }
.hero-visuel-etiquette .etiquette.away { position: absolute; right: 0; bottom: 0; opacity: 0; pointer-events: none; }
.hero-photo[data-kit="away"] .hero-visuel-etiquette .etiquette.home { opacity: 0; pointer-events: none; }
.hero-photo[data-kit="away"] .hero-visuel-etiquette .etiquette.away { opacity: 1; pointer-events: auto; }

/* Bande défilante — les cris de tribune */
.marquee { background: var(--encre); color: #fff; overflow: hidden; padding: 16px 0; border-top: 3px solid var(--rouge); }
.marquee-piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.marquee:hover .marquee-piste { animation-play-state: paused; }
.marquee-piste span { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: 1; padding: 0 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 28px; }
.marquee-piste span::after { content: ''; width: 9px; height: 9px; background: var(--rouge); transform: rotate(45deg); }
.marquee-piste .ar-display { font-size: 28px; padding-top: 2px; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Réassurance sous le hero */
.reassurance { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ligne); }
.reassurance div { display: flex; gap: 14px; align-items: center; padding: 22px var(--gouttiere); border-right: 1px solid var(--ligne); font-size: 14px; }
.reassurance div:last-child { border-right: 0; }
.reassurance svg { width: 28px; height: 28px; flex: none; color: var(--rouge); }
.reassurance b { display: block; font-weight: 600; }
.reassurance small { color: var(--gris); }

/* Tuiles catégories — apparition en balayage, photos qui respirent, inclinaison à la souris */
.tuiles { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 240px; gap: 14px; perspective: 1200px; }
.tuile { position: relative; overflow: hidden; border-radius: var(--rayon-lg); background: var(--craie); display: block; transform-style: preserve-3d; will-change: transform;
  transition: transform .5s var(--ease-out), box-shadow .5s, clip-path 1s var(--ease-out), opacity 1s var(--ease-out); box-shadow: 0 0 0 rgba(20,12,13,0); }
.tuile:hover { box-shadow: 0 30px 60px -30px rgba(20,12,13,.55); }
/* apparition : un rideau couleur craie glisse vers la droite et dévoile la photo, chaque tuile un cran après la précédente
   (un rideau plutôt qu'un clip-path : l'IntersectionObserver ne « voit » pas un élément entièrement clippé) */
.tuile.reveal { transform: translateY(16px); opacity: 1; }
.tuile.reveal.vu { transform: none; }
.tuile-rideau { position: absolute; inset: 0; z-index: 3; background: var(--craie); pointer-events: none; transition: transform 1s var(--ease-out); }
.tuile.vu .tuile-rideau { transform: translateX(101%); }
.tuile.d1.vu .tuile-rideau { transition-delay: .1s; } .tuile.d2.vu .tuile-rideau { transition-delay: .2s; } .tuile.d3.vu .tuile-rideau { transition-delay: .3s; } .tuile.d4.vu .tuile-rideau { transition-delay: .4s; }
.tuile.d1.vu { transition-delay: .1s; } .tuile.d2.vu { transition-delay: .2s; } .tuile.d3.vu { transition-delay: .3s; } .tuile.d4.vu { transition-delay: .4s; }
.tuile:hover { transition-delay: 0s !important; }
.tuile-img { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); }
.tuile-img img { width: 100%; height: 100%; object-fit: cover; animation: respire 16s ease-in-out infinite alternate; }
.tuile:nth-child(even) .tuile-img img { animation-delay: -8s; }
@keyframes respire { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.5%, 1%); } }
.tuile:hover .tuile-img img { animation-play-state: paused; }
/* voile sombre en bas + teinte rouge qui monte au survol, centrée sur la souris */
.tuile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,12,13,.78), rgba(20,12,13,0) 55%); pointer-events: none; }
.tuile-teinte { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out);
  background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 50%), rgba(229,15,46,.28), rgba(196,24,20,0) 70%), linear-gradient(to top, rgba(196,24,20,.55), rgba(196,24,20,0) 60%); }
.tuile:hover .tuile-teinte { opacity: 1; }
/* reflet qui traverse la tuile une fois au survol */
.tuile-reflet { position: absolute; inset: -20% -40%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform: translateX(-70%) skewX(-12deg); transition: none; }
.tuile:hover .tuile-reflet { transform: translateX(70%) skewX(-12deg); transition: transform 1.1s var(--ease-out); }
.tuile-texte { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; color: #fff; }
.tuile-texte h3 { font-family: var(--display); text-transform: uppercase; font-size: 36px; line-height: .95; transform: translateY(8px); transition: transform .5s var(--ease-out); position: relative; display: inline-block; }
.tuile-texte h3::after { content: ''; display: block; height: 3px; width: 0; margin-top: 8px; background: var(--rouge-vif); transition: width .5s var(--ease-out); }
.tuile:hover .tuile-texte h3 { transform: none; }
.tuile:hover .tuile-texte h3::after { width: 48px; }
.tuile-nb { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); margin-bottom: 6px; }
.tuile:hover .tuile-nb { opacity: .9; transform: none; transition-delay: .08s; }
.tuile-texte .fleche { position: absolute; right: 0; bottom: 4px; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--encre); display: grid; place-items: center; transform: translateX(14px) rotate(-30deg); opacity: 0; transition: transform .55s var(--ease-out), opacity .4s, background .3s; }
.tuile:hover .fleche { transform: none; opacity: 1; }
.tuile:hover .fleche:hover { background: var(--rouge); color: #fff; }
.tuile-texte .fleche svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .tuile-img img { animation: none; } .tuile-rideau { display: none; } }
.tuile-1 { grid-column: span 7; grid-row: span 2; }
.tuile-2 { grid-column: span 5; }
.tuile-3 { grid-column: span 5; }
.tuile-4 { grid-column: span 6; }
.tuile-5 { grid-column: span 6; }
.tuile-1 .tuile-texte h3 { font-size: 56px; }

/* Galerie — mosaïque en colonnes */
.mosaique { columns: 4; column-gap: 14px; }
.mosaique figure { margin: 0 0 14px; break-inside: avoid; position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--craie); cursor: zoom-in; }
.mosaique img { width: 100%; transition: transform 1.2s var(--ease-out); }
.mosaique figure:hover img { transform: scale(1.04); }
.mosaique figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; color: #fff; font-size: 12.5px; background: linear-gradient(to top, rgba(20,12,13,.7), transparent); opacity: 0; transform: translateY(6px); transition: opacity var(--moyen), transform var(--moyen) var(--ease-out); }
.mosaique figure:hover figcaption { opacity: 1; transform: none; }
.mosaique .tag { position: absolute; top: 10px; left: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 5px 8px; background: rgba(255,255,255,.9); border-radius: 3px; color: var(--encre); }

/* Le club */
.club { background: var(--encre); color: #fff; overflow: hidden; }
.club-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.club h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.6rem, 5.4vw, 4.8rem); line-height: .92; margin-top: 14px; }
.club h2 em { font-style: normal; color: var(--rouge-vif); }
.club .ar-display { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: #fff; margin-top: 24px; text-align: right; }
.club .ar-display span { display: block; }
.club .ar-display span:nth-child(2) { color: var(--rouge-vif); }
.club p.texte { margin-top: 22px; max-width: 52ch; color: rgba(255,255,255,.78); }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.chiffres b { display: block; font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; color: var(--rouge-vif); }
.chiffres small { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.7); }
.club-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.club-photos figure { margin: 0; overflow: hidden; border-radius: var(--rayon); }
.club-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform 1.4s var(--ease-out); }
.club-photos figure:hover img { transform: scale(1.04); }
.club-photos figure:nth-child(1) { grid-column: span 2; }
.club-photos figure:nth-child(1) img { aspect-ratio: 16/9; }
.club-photos .liseré { position: absolute; inset: -14px; border: 1px solid var(--dore); border-radius: var(--rayon-lg); opacity: .35; pointer-events: none; }


/* Le club → site officiel : un seul bloc, pas de récit */
.club-lien-inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 48px); align-items: center; }
.club-ecusson { height: 128px; width: auto; }
.club-lien h2 { margin-top: 10px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.club-lien .texte { margin-top: 12px; }
@media (max-width: 700px) { .club-lien-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } .club-ecusson { height: 96px; } }

/* Comment commander — une vraie séquence, donc numérotée */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.etape { padding: 28px 26px 30px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon-lg); position: relative; transition: transform var(--moyen) var(--ease-out), box-shadow var(--moyen); }
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.etape .num { font-family: var(--display); font-size: 56px; line-height: 1; color: var(--rouge); }
.etape h3 { font-size: 19px; font-weight: 600; margin-top: 12px; }
.etape p { color: var(--encre-2); margin-top: 8px; font-size: 15px; }
.etape .mail { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--rouge); border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------ 6. CARTES PRODUIT */
.grille-produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
.carte { display: block; position: relative; }
.carte-visuel { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--rayon-lg); background: var(--craie); }
.carte-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--moyen) var(--ease-in-out), transform 1.2s var(--ease-out); }
.carte-visuel .alt { opacity: 0; }
.carte:hover .carte-visuel .principale { transform: scale(1.03); }
.carte:hover .carte-visuel .alt { opacity: 1; }
.carte-visuel .placeholder-note { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.carte-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.carte-action {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  transform: translateY(12px); opacity: 0; transition: transform var(--moyen) var(--ease-out), opacity var(--moyen);
}
.carte:hover .carte-action { transform: none; opacity: 1; }
.carte-action .btn { width: 100%; height: 44px; font-size: 13px; }
.carte-info { padding: 14px 4px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.carte-info .cat { grid-column: 1 / -1; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.carte-info h3 { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.carte-info .prix { font-family: var(--display); font-size: 22px; line-height: 1; white-space: nowrap; }
.carte-info .ref { grid-column: 1 / -1; font-size: 11px; color: var(--gris); letter-spacing: .06em; }
.carte-info .pastilles { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 2px; }
.pastille { width: 14px; height: 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); box-shadow: inset 0 0 0 2px #fff; }

/* ------------------------------------------------------------ 7. BOUTIQUE */
.page-titre { padding: clamp(36px, 6vw, 72px) 0 28px; border-bottom: 1px solid var(--ligne); }
.page-titre h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .9; margin-top: 12px; }
.page-titre p { margin-top: 14px; color: var(--encre-2); max-width: 56ch; }
.fil { font-size: 12.5px; color: var(--gris); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fil a:hover { color: var(--rouge); }
.fil span::before { content: '/'; margin-right: 8px; opacity: .5; }

.boutique { display: grid; grid-template-columns: 260px 1fr; gap: 40px; padding: 36px 0 80px; align-items: start; }
.filtres { position: sticky; top: calc(var(--h-entete) + 20px); display: flex; flex-direction: column; gap: 26px; }
.filtre h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gris); margin-bottom: 12px; display: flex; justify-content: space-between; }
.filtre h4 button { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--rouge); font-weight: 500; }
.filtre-liste { display: flex; flex-direction: column; gap: 4px; }
.filtre-liste label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: var(--rayon); cursor: pointer; font-size: 15px; transition: background var(--vite); }
.filtre-liste label:hover { background: var(--craie); }
.filtre-liste input { accent-color: var(--rouge); width: 16px; height: 16px; }
.filtre-liste .n { margin-left: auto; font-size: 12px; color: var(--gris); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; min-width: 44px; padding: 0 12px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); font-size: 13px; font-weight: 600; display: grid; place-items: center; transition: all var(--vite); }
.chip:hover { border-color: var(--encre); }
.chip[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.chip.couleur { padding: 0 10px 0 8px; display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.prix-range { display: flex; flex-direction: column; gap: 8px; }
.prix-range input[type="range"] { width: 100%; accent-color: var(--rouge); }
.prix-range output { font-family: var(--display); font-size: 22px; }

.boutique-barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.boutique-barre .resultat { font-size: 14px; color: var(--gris); }
.boutique-barre .resultat b { color: var(--encre); font-weight: 600; }
.select {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 40px 0 14px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: #fff; font-size: 14px;
}
.select select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; font-weight: 500; cursor: pointer; }
.select::after { content: ''; position: absolute; right: 14px; width: 8px; height: 8px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(45deg) translateY(-3px); pointer-events: none; }
.boutique-barre .btn-filtres { display: none; }
.boutique .grille-produits { grid-template-columns: repeat(3, 1fr); }
.boutique .grille-produits .carte { animation: apparait .6s var(--ease-out) both; }
.boutique .grille-produits .carte:nth-child(2) { animation-delay: .05s; }
.boutique .grille-produits .carte:nth-child(3) { animation-delay: .1s; }
.boutique .grille-produits .carte:nth-child(4) { animation-delay: .15s; }
.boutique .grille-produits .carte:nth-child(5) { animation-delay: .2s; }
.boutique .grille-produits .carte:nth-child(6) { animation-delay: .25s; }
.boutique .grille-produits .carte:nth-child(n+7) { animation-delay: .3s; }
@keyframes apparait { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.aucun-resultat { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--gris); }
.aucun-resultat .display { font-size: 40px; color: var(--encre); }

/* ------------------------------------------------------------ 8. FICHE PRODUIT */
.produit { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); padding: 28px 0 80px; align-items: start; }
.galerie { position: sticky; top: calc(var(--h-entete) + 16px); display: grid; grid-template-columns: 76px 1fr; gap: 14px; }
.vignettes { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow: auto; scrollbar-width: none; }
.vignettes::-webkit-scrollbar { display: none; }
.vignettes button { aspect-ratio: 4/5; border-radius: var(--rayon); overflow: hidden; border: 2px solid transparent; background: var(--craie); transition: border-color var(--vite), opacity var(--vite); opacity: .6; }
.vignettes button img { width: 100%; height: 100%; object-fit: cover; }
.vignettes button:hover { opacity: 1; }
.vignettes button[aria-current="true"] { border-color: var(--rouge); opacity: 1; }
.scene { position: relative; aspect-ratio: 4/5; border-radius: var(--rayon-lg); overflow: hidden; background: var(--craie); cursor: crosshair; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--moyen) var(--ease-in-out); }
.scene img.sortante { opacity: 0; }
.scene .loupe { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 220%; opacity: 0; transition: opacity var(--vite); pointer-events: none; }
.scene:hover .loupe { opacity: 1; }
.scene .badges { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.scene .note-visuel { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; font-size: 12px; padding: 8px 12px; border-radius: var(--rayon); background: rgba(255,255,255,.92); color: var(--encre-2); backdrop-filter: blur(6px); }
.scene .nav-scene { position: absolute; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--encre); display: grid; place-items: center; box-shadow: var(--ombre); opacity: 0; transition: opacity var(--vite), transform var(--vite) var(--ease-out); z-index: 2; }
.scene:hover .nav-scene { opacity: 1; }
.scene .nav-scene:hover { transform: scale(1.08); }
.scene .prec { left: 12px; } .scene .suiv { right: 12px; }
.scene .nav-scene svg { width: 16px; height: 16px; }

.fiche .cat { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--rouge); display: flex; gap: 10px; align-items: center; }
.fiche .cat::before { content: ''; width: 8px; height: 8px; background: currentColor; transform: rotate(45deg); }
.fiche h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .95; margin-top: 12px; }
.fiche .ref { margin-top: 10px; font-size: 12.5px; color: var(--gris); letter-spacing: .08em; }
.fiche .ref b { color: var(--encre-2); font-weight: 600; }
.fiche .ref button { margin-left: 8px; color: var(--rouge); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.fiche .prix { font-family: var(--display); font-size: 40px; line-height: 1; margin-top: 18px; color: var(--rouge); }
.fiche .prix small { font-family: var(--texte); font-size: 12.5px; color: var(--gris); margin-left: 10px; letter-spacing: 0; text-transform: none; }
.fiche-bloc { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.fiche-bloc .libelle { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.fiche-bloc .libelle span { color: var(--gris); font-weight: 500; text-transform: none; letter-spacing: 0; }
.fiche-bloc .libelle a, .fiche-bloc .libelle button { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; }
.declinaisons { display: flex; gap: 10px; }
.declinaison { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--ligne-forte); border-radius: 999px; font-size: 14px; font-weight: 500; transition: border-color var(--vite), background var(--vite); }
.declinaison .pastille { width: 26px; height: 26px; }
.declinaison:hover { border-color: var(--encre); }
.declinaison[aria-current="true"] { border-color: var(--encre); background: var(--craie); }
.tailles { display: flex; flex-wrap: wrap; gap: 10px; }
.taille { height: 48px; min-width: 60px; padding: 0 16px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); font-weight: 600; font-size: 15px; display: grid; place-items: center; transition: all var(--vite) var(--ease-out); position: relative; }
.taille:hover { border-color: var(--encre); transform: translateY(-1px); }
.taille[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.tailles.erreur .taille { animation: secoue .4s var(--ease-out); border-color: var(--rouge); }
@keyframes secoue { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.aide-taille { margin-top: 10px; font-size: 13px; color: var(--rouge); min-height: 1.4em; opacity: 0; transition: opacity var(--vite); }
.aide-taille.visible { opacity: 1; }
.fiche-achat { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 26px; }
.fiche-achat .qte { margin: 0; height: 54px; }
.fiche-achat .qte button { width: 48px; height: 52px; }
.fiche-achat .btn { height: 54px; }
.fiche-achat .btn.contour { grid-column: 1 / -1; }
.fiche-reassurance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 24px; font-size: 13.5px; color: var(--encre-2); }
.fiche-reassurance li { display: flex; gap: 10px; align-items: flex-start; }
.fiche-reassurance svg { width: 18px; height: 18px; flex: none; color: var(--rouge); margin-top: 2px; }
.fiche .description { color: var(--encre-2); font-size: 15.5px; line-height: 1.65; }
.details { display: grid; grid-template-columns: 1fr; gap: 0; }
.details div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 14.5px; }
.details dt { color: var(--gris); }
.details dd { margin: 0; font-weight: 500; }
.details div:last-child { border-bottom: 0; }
.aussi { padding: 60px 0 80px; border-top: 1px solid var(--ligne); }

/* Guide des tailles (modale) */
.guide-tailles table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 16px; }
.guide-tailles th, .guide-tailles td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--ligne); }
.guide-tailles th { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.guide-tailles td:first-child { font-family: var(--display); font-size: 20px; }
.guide-tailles tr.reco td { background: var(--rouge-lavis); }
.guide-tailles tr.reco td:first-child { color: var(--rouge); }
.guide-tailles tbody tr { transition: background var(--vite); cursor: pointer; }
.guide-tailles tbody tr:hover td { background: var(--craie); }
.guide-tailles .conseil { margin-top: 14px; padding: 14px 16px; background: var(--craie); border-radius: var(--rayon); font-size: 14px; color: var(--encre-2); }
.ma-taille { display: flex; gap: 10px; align-items: end; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ligne); }
.ma-taille label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; flex: 1; }
.ma-taille input { height: 46px; padding: 0 14px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); }
.ma-taille .resultat { min-width: 160px; height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--rayon); background: var(--encre); color: #fff; font-weight: 600; }
.ma-taille .resultat b { font-family: var(--display); font-size: 24px; color: var(--rouge-vif); }
.guide-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.guide-onglets button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne-forte); font-size: 13px; font-weight: 500; }
.guide-onglets button[aria-selected="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }

/* ------------------------------------------------------------ 9. PANIER */
.panier { display: grid; grid-template-columns: 1fr 420px; gap: 48px; padding: 28px 0 80px; align-items: start; }
.panier .bloc { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon-lg); padding: 26px; }
.panier .bloc + .bloc { margin-top: 18px; }
.panier h2 { font-family: var(--display); text-transform: uppercase; font-size: 28px; display: flex; align-items: center; gap: 12px; }
.panier h2 .num { width: 30px; height: 30px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 16px; display: grid; place-items: center; }
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 13px; font-weight: 600; }
.champ label span { color: var(--rouge); }
.champ input, .champ select, .champ textarea { height: 48px; padding: 0 14px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); background: #fff; transition: border-color var(--vite), box-shadow var(--vite); }
.champ textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 80px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(20,12,13,.08); }
/* menu déroulant dans un champ : un seul cadre (celui de .select), le <select> natif est nu */
.champ .select { width: 100%; height: 48px; padding: 0 40px 0 14px; }
.champ .select select, .select select { height: 100%; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; border-radius: 0; font: inherit; font-weight: 500; color: var(--encre); }
.select:focus-within { border-color: var(--encre); box-shadow: 0 0 0 3px rgba(20,12,13,.08); }
.select select:focus { outline: 0; box-shadow: none; }
.select select:disabled { color: var(--gris); cursor: default; }
.champ.invalide input, .champ.invalide select { border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(196,24,20,.12); }
.champ .erreur { font-size: 12px; color: var(--rouge); display: none; }
.champ.invalide .erreur { display: block; }
.champ small { font-size: 12px; color: var(--gris); }
.modes { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.mode { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--ligne-forte); border-radius: var(--rayon); cursor: pointer; transition: border-color var(--vite), background var(--vite); }
.mode:hover { border-color: var(--encre); }
.mode input { accent-color: var(--rouge); width: 18px; height: 18px; }
.mode b { display: block; font-weight: 600; font-size: 15px; }
.mode small { color: var(--gris); font-size: 12.5px; }
h2.h1 { font-size: inherit; }   /* connexion.html : un titre par onglet, sans multiplier les H1 */
.mode.indisponible { cursor: not-allowed; background: var(--craie); border-style: dashed; }
.mode.indisponible:hover { border-color: var(--ligne-forte); }
.mode.indisponible b, .mode.indisponible small { color: var(--gris); }
.mode.indisponible .tarif { color: var(--gris); font-family: var(--texte); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.mode .tarif { font-family: var(--display); font-size: 20px; white-space: nowrap; }
.mode:has(input:checked) { border-color: var(--encre); background: var(--craie); }
.recap { position: sticky; top: calc(var(--h-entete) + 20px); }
.recap .lignes { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; font-size: 15px; }
.recap .lignes div { display: flex; justify-content: space-between; gap: 12px; }
.recap .lignes .offert { color: var(--ok); font-weight: 600; }
.recap .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 2px solid var(--encre); }
.recap .total b { font-family: var(--display); font-size: 36px; color: var(--rouge); }
.recap .btn { width: 100%; margin-top: 18px; height: 56px; font-size: 15px; }
.recap .btn + .btn { margin-top: 10px; }
.recap .note { margin-top: 14px; font-size: 12.5px; color: var(--gris); line-height: 1.5; }
.recap .note b { color: var(--encre-2); font-weight: 600; }
.progression { margin-top: 14px; font-size: 12.5px; color: var(--encre-2); }
.progression .barre { height: 6px; background: var(--ligne); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.progression .barre i { display: block; height: 100%; background: var(--rouge); transition: width var(--lent) var(--ease-out); }
.commande-ok { text-align: center; padding: 60px 20px; }
.commande-ok .display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.commande-ok .display em { font-style: normal; color: var(--rouge); }
.commande-ok p { margin-top: 14px; color: var(--encre-2); max-width: 52ch; margin-inline: auto; }
.commande-ok .num { display: inline-block; margin-top: 16px; padding: 8px 14px; background: var(--craie); border-radius: var(--rayon); font-weight: 600; letter-spacing: .06em; }
.recap-texte { margin-top: 20px; text-align: left; white-space: pre-wrap; font-family: var(--texte); font-size: 13px; line-height: 1.5; padding: 18px; background: var(--craie); border-radius: var(--rayon); max-height: 320px; overflow: auto; }

/* ------------------------------------------------------------ 10. COMPOSANTS */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: .02em;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--moyen), background var(--moyen), border-color var(--moyen), transform var(--vite) var(--ease-out), box-shadow var(--moyen);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.98); }
.btn.plein { background: var(--rouge); color: #fff; box-shadow: var(--ombre-rouge); }
.btn.plein::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--encre); transform: translateY(101%); transition: transform var(--moyen) var(--ease-out); border-radius: inherit; }
.btn.plein:hover::before { transform: none; }
.btn.plein:hover { box-shadow: 0 14px 30px -14px rgba(20,12,13,.5); }
.btn.sombre { background: var(--encre); color: #fff; }
.btn.sombre::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rouge); transform: translateY(101%); transition: transform var(--moyen) var(--ease-out); }
.btn.sombre:hover::before { transform: none; }
.btn.contour { border: 1.5px solid var(--ligne-forte); color: var(--encre); background: transparent; }
.btn.contour:hover { border-color: var(--encre); background: var(--encre); color: #fff; }
.btn.blanc { background: #fff; color: var(--encre); }
.btn.blanc:hover { background: var(--rouge); color: #fff; }
.btn.petit { height: 40px; padding: 0 18px; font-size: 13px; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn .fleche { transition: transform var(--moyen) var(--ease-out); }
.btn:hover .fleche { transform: translateX(4px); }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.badge.officiel { background: #fff; color: var(--encre); border: 1px solid var(--dore); }
.badge.officiel::before { content: ''; width: 6px; height: 6px; background: var(--rouge); transform: rotate(45deg); }
.badge.limitee { background: var(--encre); color: #fff; }
.badge.bientot { background: var(--craie); color: var(--encre-2); border: 1px dashed var(--ligne-forte); }
.badge.rupture { background: var(--rouge); color: #fff; }   /* 18/09/2026 : rupture de stock, en rouge */
.taille.rupture, .taille:disabled { text-decoration: line-through; opacity: .45; cursor: not-allowed; }
.taille.rupture:hover { border-color: var(--ligne-forte); }
#ajouter:disabled { background: var(--rouge); border-color: var(--rouge); opacity: .55; cursor: not-allowed; }
.fiche-achat.bientot { display: block; }
.bientot-note { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px dashed var(--ligne-forte); border-radius: var(--rayon); background: var(--craie); }
.bientot-note b { font-family: var(--display); text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }
.bientot-note span { font-size: 14px; color: var(--encre-2); }
.carte.bientot .carte-action .btn { background: var(--craie); color: var(--encre-2); border-color: var(--ligne-forte); }
.badge.nouveau { background: var(--rouge); color: #fff; }
.badge.info { background: var(--craie); color: var(--encre-2); }

/* Modale générique */
.modale { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--moyen); }
.modale.ouverte { opacity: 1; pointer-events: auto; }
.modale::before { content: ''; position: absolute; inset: 0; background: rgba(20,12,13,.55); }
.modale-boite { position: relative; width: min(680px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: var(--rayon-lg); padding: 28px; transform: translateY(16px) scale(.98); transition: transform var(--moyen) var(--ease-out); }
.modale.ouverte .modale-boite { transform: none; }
.modale-boite h2 { font-family: var(--display); text-transform: uppercase; font-size: 32px; line-height: 1; padding-right: 48px; }
.modale-boite > .fermer { position: absolute; top: 20px; right: 20px; }

/* Lightbox galerie */
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(20,12,13,.94); display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--moyen); }
.lightbox.ouverte { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(100%, 1200px); max-height: 82vh; border-radius: var(--rayon); transform: scale(.96); transition: transform var(--moyen) var(--ease-out), opacity var(--vite); box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); }
.lightbox.ouverte img { transform: none; }
.lightbox figcaption { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: rgba(255,255,255,.75); font-size: 13px; }
.lightbox .fermer { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.12); color: #fff; }
.lightbox .nav-scene { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background var(--vite); }
.lightbox .nav-scene:hover { background: var(--rouge); }
.lightbox .prec { left: 20px; } .lightbox .suiv { right: 20px; }
.lightbox .nav-scene svg { width: 18px; height: 18px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; background: var(--encre); color: #fff; padding: 12px 18px 12px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); transition: transform var(--moyen) var(--ease-out), opacity var(--moyen); pointer-events: none; white-space: nowrap; max-width: calc(100% - 40px); }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast i { width: 22px; height: 22px; border-radius: 999px; background: var(--rouge); display: grid; place-items: center; }
.toast i svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------ 11. MOTION */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--lent) var(--ease-out), transform var(--lent) var(--ease-out); }
.reveal.vu { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal-groupe > * { opacity: 0; transform: translateY(22px); transition: opacity var(--lent) var(--ease-out), transform var(--lent) var(--ease-out); }
.reveal-groupe.vu > * { opacity: 1; transform: none; }
.reveal-groupe.vu > *:nth-child(2) { transition-delay: .07s; }
.reveal-groupe.vu > *:nth-child(3) { transition-delay: .14s; }
.reveal-groupe.vu > *:nth-child(4) { transition-delay: .21s; }
.reveal-groupe.vu > *:nth-child(5) { transition-delay: .28s; }
.reveal-groupe.vu > *:nth-child(6) { transition-delay: .35s; }
.reveal-groupe.vu > *:nth-child(n+7) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal, .reveal-groupe > * { opacity: 1; transform: none; }
  .hero-titre .l > span, .hero-visuel, .hero-sous, .hero-cta, .hero-bascule, .hero-surtitre { opacity: 1; transform: none; }
  .marquee-piste { animation: none; }
}

/* ------------------------------------------------------------ 12. PIED DE PAGE */
.pied { background: var(--encre); color: #fff; padding: 64px 0 28px; margin-top: 0; }
.pied-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.pied .logo img { height: 150px; }
.pied p { color: rgba(255,255,255,.7); font-size: 14px; margin-top: 16px; max-width: 34ch; }
.pied h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 14px; }
.pied ul li { margin-bottom: 8px; font-size: 14.5px; }
.pied ul a { color: rgba(255,255,255,.85); transition: color var(--vite); }
.pied ul a:hover { color: var(--rouge-vif); }
.pied .contact a { display: inline-block; font-weight: 600; border-bottom: 1px solid var(--rouge-vif); }
.pied .ar-display { font-size: 24px; color: var(--rouge-vif); margin-top: 18px; text-align: left; }
.sponsors { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.sponsors img { height: 22px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity var(--vite); }
.sponsors img:hover { opacity: 1; }
.pied-bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.5); }
.pied-bas .display { color: rgba(255,255,255,.35); letter-spacing: .06em; }

/* ------------------------------------------------------------ 13. RESPONSIVE */
@media (max-width: 1100px) {
  .grille-produits { grid-template-columns: repeat(3, 1fr); }
  .mosaique { columns: 3; }
  .hero-titre { font-size: clamp(3.8rem, 10vw, 8rem); }
  .pied-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --h-entete: 64px; }
  .nav { display: none; }
  .burger { display: grid; }
  .btn-panier .libelle { display: none; }
  .btn-panier { padding: 0 12px 0 14px; }
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 48px; }
  .hero-visuel { max-width: 420px; max-height: none; order: -1; }
  .hero-titre { font-size: clamp(3.6rem, 16vw, 7rem); }
  .reassurance { grid-template-columns: 1fr 1fr; }
  .reassurance div:nth-child(2) { border-right: 0; }
  .reassurance div:nth-child(-n+2) { border-bottom: 1px solid var(--ligne); }
  .tuiles { grid-auto-rows: 200px; }
  .tuile-1, .tuile-2, .tuile-3, .tuile-4, .tuile-5 { grid-column: span 6; }
  .tuile-1 { grid-row: span 2; grid-column: span 12; }
  .club-inner { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; }
  .boutique { grid-template-columns: 1fr; gap: 20px; }
  .filtres { position: fixed; inset: 0; z-index: 85; background: #fff; padding: 20px var(--gouttiere) 100px; overflow: auto; transform: translateY(100%); transition: transform var(--moyen) var(--ease-out); }
  .filtres.ouvert { transform: none; }
  .filtres .fermer-filtres { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .boutique-barre .btn-filtres { display: inline-flex; }
  .filtres-appliquer { position: fixed; left: var(--gouttiere); right: var(--gouttiere); bottom: 20px; z-index: 86; display: none; }
  .filtres.ouvert ~ .filtres-appliquer { display: flex; }
  .boutique .grille-produits, .grille-produits { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .produit { grid-template-columns: 1fr; }
  .galerie { position: static; grid-template-columns: 1fr; }
  .vignettes { flex-direction: row; order: 2; max-height: none; overflow-x: auto; }
  .vignettes button { width: 64px; flex: none; }
  .panier { grid-template-columns: 1fr; }
  .recap { position: static; }
  .mosaique { columns: 2; }
  .pied-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (min-width: 901px) { .fermer-filtres, .filtres-appliquer { display: none; } }
@media (max-width: 560px) {
  .entete-section { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-cta .btn { width: 100%; }
  .hero-titre { font-size: clamp(3.4rem, 19vw, 5.8rem); }
  .hero-visuel-etiquette { display: none; }
  /* mobile : la photo au-dessus, le texte en dessous sur fond encre — rien ne recouvre le maillot */
  .hero-photo { min-height: 0; display: block; }
  .hero-fond-photo { position: relative; height: 62vh; min-height: 380px; }
  .hero-fond-photo img { object-position: 74% 8%; }
  .hero-fond-photo::after { background: linear-gradient(0deg, rgba(20,12,13,1) 0%, rgba(20,12,13,.35) 22%, rgba(20,12,13,0) 45%); }
  .hero-photo .hero-inner { padding-top: 8px; padding-bottom: 40px; }
  .marquee-piste span { font-size: 20px; padding: 0 18px; gap: 18px; }
  .reassurance { grid-template-columns: 1fr; }
  .reassurance div { border-right: 0; border-bottom: 1px solid var(--ligne); }
  .carte-action { display: none; }
  .carte-info h3 { font-size: 14px; }
  .carte-info .prix { font-size: 19px; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .fiche-achat { grid-template-columns: 1fr; }
  .fiche-reassurance { grid-template-columns: 1fr; }
  .ma-taille { flex-direction: column; align-items: stretch; }
  .details div { grid-template-columns: 1fr; gap: 2px; }
  .modale-boite { padding: 22px 18px; }
  .tuile-texte h3, .tuile-1 .tuile-texte h3 { font-size: 32px; }
}

/* ============================================================ VERSION ARABE (dir="rtl") */
.btn-langue { height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ligne-forte); font-weight: 700; font-size: 14px; font-family: var(--arabe); color: var(--encre); background: #fff; transition: border-color var(--vite); }
.btn-langue:hover { border-color: var(--encre); }
[dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] button { font-family: var(--arabe), var(--texte); }
[dir="rtl"] .btn-langue { font-family: var(--texte); }
[dir="rtl"] .display, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .titre-section, [dir="rtl"] .tiroir-entete h2, [dir="rtl"] .fiche .prix, [dir="rtl"] .ligne-panier .prix, [dir="rtl"] .carte-info .prix, [dir="rtl"] .recap .total b, [dir="rtl"] .prix-range output, [dir="rtl"] .tuile h3 { font-family: var(--arabe-display); letter-spacing: 0; text-transform: none; }
[dir="rtl"] .hero-titre, [dir="rtl"] .pied-bas .display, [dir="rtl"] .bandeau span { font-family: var(--display); }
[dir="rtl"] .surtitre, [dir="rtl"] .tuile-nb, [dir="rtl"] .carte-info .cat, [dir="rtl"] .fiche .cat, [dir="rtl"] .filtre h4, [dir="rtl"] .hero-bascule button, [dir="rtl"] .mosaique .tag, [dir="rtl"] .carte-visuel .placeholder-note, [dir="rtl"] .carte-info .ref, [dir="rtl"] .fiche .ref { letter-spacing: 0; }
[dir="rtl"] .tiroir { right: auto; left: 0; transform: translateX(-100%); box-shadow: 20px 0 60px -30px rgba(20,12,13,.4); }
[dir="rtl"] .tiroir.ouvert { transform: none; }
[dir="rtl"] .select { padding: 0 14px 0 40px; }
[dir="rtl"] .select::after { right: auto; left: 14px; }
[dir="rtl"] .champ .select { padding: 0 14px 0 40px; }
[dir="rtl"] .menu-mobile .ar-display { text-align: right; }
[dir="rtl"] .ligne-panier .prix { text-align: left; }
[dir="rtl"] .fiche .prix small { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .mosaique .tag { left: auto; right: 10px; }
[dir="rtl"] .cmd header .statut { margin-left: 0; margin-right: auto; }
[dir="rtl"] .btn svg, [dir="rtl"] .carte-action svg { transform: scaleX(-1); }
[dir="rtl"] .commande-ok .recap-texte { direction: ltr; text-align: left; }
[dir="rtl"] .hero-etiquette, [dir="rtl"] .hero-visuel .etiquette { direction: ltr; }
[dir="rtl"] .tnum, [dir="rtl"] .num, [dir="rtl"] .ref, [dir="rtl"] .carte-info .ref, [dir="rtl"] .fiche .ref, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir="rtl"] .champ input[type="tel"], [dir="rtl"] .champ input[type="email"] { display: block; width: 100%; text-align: right; }

/* ---- 18/09/2026 : en-tête sur téléphone. Mesuré avec Chromium en émulation 390 px : logo + compte + langue + panier
   + menu faisaient 425–437 px, la page débordait, le bouton menu était hors écran et le badge panier coupé. */
@media (max-width: 900px) {
  .entete-inner { gap: 12px; }
  .logo { flex: 0 1 auto; min-width: 0; gap: 8px; }
  .entete-actions { margin-left: auto; flex: none; gap: 6px; }
  .btn-compte .libelle { display: none; }
  .btn-langue { padding: 0 10px; }
}
@media (max-width: 560px) {
  .logo .monogramme { height: 38px; }
  .logo .wordmark { height: 24px; }
  .btn-langue { height: 40px; font-size: 13px; padding: 0 9px; }
  .btn-panier { padding: 0 10px 0 12px; }
}
@media (max-width: 560px) {
  /* le bouton compte passe dans le menu (api.js l'y ajoute) : la marque reste lisible, tout tient à 320 px */
  .btn-compte { display: none; }
}
/* cibles tactiles : les petits liens-boutons de la fiche (« copier », « Guide des tailles ») gardent leur aspect
   mais offrent une zone d'appui d'au moins 36 px de haut */
#copier-ref, #ouvrir-guide { min-height: 36px; min-width: 36px; justify-content: center; padding: 6px 0; margin: -6px 0; display: inline-flex; align-items: center; }   /* marge négative verticale seulement : horizontale, elle faisait déborder la page de 8 px */