/* =============================================================================
   GS VISION — Design System (style.css)
   Agence créative pour clubs de sport · Style Premium & élégant
   Version 1.0 · 2026-06-21
   -----------------------------------------------------------------------------
   MODE D'EMPLOI
   • Tout est piloté par des "tokens" (variables CSS) définis dans :root.
   • Ne jamais écrire une couleur/espacement/ombre en dur dans un composant :
     toujours passer par var(--token).
   • --accent est ROI : pour re-thémer une page, surcharger --accent sur .p-xxx.
   • Architecture ITCSS (du moins spécifique au plus spécifique) :
       01 SETTINGS · 02 GENERIC · 03 ELEMENTS · 04 OBJECTS
       05 COMPONENTS · 06 SECTIONS · 07 PAGES · 08 UTILITIES · 09 RESPONSIVE
   • Un seul breakpoint : @media (max-width: 1023.98px).
   ============================================================================= */

/* =============================================================================
   01 · SETTINGS — TOKENS
   ============================================================================= */
:root {
  /* --- Couleur de marque + dérivés --- */
  --brand:        #4895FA;            /* hsl(214 95% 63%) */
  --brand-fonce:  #1366D6;            /* AA avec texte blanc */
  --brand-pale:   #EAF3FE;            /* fond très clair */

  /* --- Alias accent (utilisés partout dans les composants) --- */
  --accent:           var(--brand);
  --accent-fonce:     var(--brand-fonce);
  --accent-pale:      var(--brand-pale);
  --accent-strong:    var(--brand-fonce);  /* aplats nécessitant un texte blanc AA */
  --accent-text:      var(--brand-fonce);  /* liens texte sur fond clair (AA) */
  --accent-contraste: #ffffff;             /* texte lisible posé sur --accent-strong */

  /* --- Neutres / gris (légèrement bleutés, hue 214) --- */
  --gris-0:    #ffffff;
  --gris-50:   #f7f9fc;
  --gris-100:  #eef2f7;
  --gris-200:  #e2e8f0;
  --gris-300:  #cbd5e1;
  --gris-400:  #94a3b8;
  --gris-500:  #64748b;
  --gris-600:  #475569;
  --gris-700:  #334155;
  --gris-800:  #1e293b;
  --gris-900:  #0f172a;
  --gris-1000: #080c14;

  /* --- États sémantiques --- */
  --success:       #16a34a;  --success-fonce: #15803d;  --success-pale: #dcfce7;
  --warning:       #d97706;  --warning-fonce: #b45309;  --warning-pale: #fef3c7;
  --danger:        #dc2626;  --danger-fonce:  #b91c1c;  --danger-pale:  #fee2e2;
  --info:          #0ea5e9;  --info-fonce:    #0284c7;  --info-pale:    #e0f2fe;

  /* --- Surfaces / texte / bordures --- */
  --bg:              var(--gris-50);
  --surface:         var(--gris-0);
  --surface-2:       var(--gris-100);
  --surface-inverse: var(--gris-900);

  --text:         var(--gris-900);
  --text-muted:   var(--gris-600);
  --text-subtle:  var(--gris-400);
  --text-inverse: var(--gris-0);
  --text-on-accent: #ffffff;

  --border:        var(--gris-200);
  --border-strong: var(--gris-300);
  --ring:          var(--accent);

  /* --- Typographie --- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --fs-300: clamp(0.78rem, 0.76rem + 0.10vw, 0.85rem);
  --fs-400: clamp(0.92rem, 0.89rem + 0.15vw, 1.00rem);
  --fs-500: clamp(1.05rem, 1.00rem + 0.30vw, 1.20rem);
  --fs-600: clamp(1.30rem, 1.18rem + 0.60vw, 1.65rem);
  --fs-700: clamp(1.70rem, 1.45rem + 1.10vw, 2.40rem);
  --fs-800: clamp(2.20rem, 1.75rem + 2.20vw, 3.50rem);
  --fs-900: clamp(2.80rem, 1.95rem + 4.00vw, 5.25rem);

  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-normal: 1.55;  --lh-relaxed: 1.75;
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;  --fw-black: 800;
  --tracking-tight: -0.02em;  --tracking-normal: 0;  --tracking-wide: 0.06em;
  --measure: 65ch;

  /* --- Espacement (base 4px) --- */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;  --s4: 1rem;   --s5: 1.25rem;
  --s6: 1.5rem;   --s8: 2rem;    --s10: 2.5rem;  --s12: 3rem;  --s16: 4rem;
  --s20: 5rem;    --s24: 6rem;
  --space-section: clamp(4rem, 8vw, 9rem);   /* premium = très aéré */
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radius (premium = petits) --- */
  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --radius-round: 50%;

  /* --- Ombres (subtiles, longues, teintées hue 214) --- */
  --shadow-xs: 0 1px 2px hsl(214 30% 20% / 0.05);
  --shadow-sm: 0 2px 8px -2px hsl(214 30% 20% / 0.08);
  --shadow-md: 0 10px 28px -10px hsl(214 30% 20% / 0.12);
  --shadow-lg: 0 24px 56px -18px hsl(214 30% 20% / 0.16);
  --shadow-xl: 0 44px 90px -28px hsl(214 30% 20% / 0.20);
  --shadow-focus: 0 0 0 3px var(--accent-pale), 0 0 0 1px var(--accent);

  /* --- Transitions --- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;  --dur: 220ms;  --dur-slow: 420ms;

  /* --- Révélations au scroll (v4.8) --- */
  --reveal-y:       48px;    /* montée du bloc qui apparaît */
  --reveal-x:       40px;    /* décalage des apparitions latérales */
  --reveal-dur:     0.9s;    /* durée d'une apparition */
  --reveal-zoom:    1.14;    /* dézoom des photos pendant leur apparition */
  --reveal-media-dur: 1.4s;  /* durée du dézoom (plus lent que le bloc) */
  --hero-bg-scale:  1.08;    /* zoom de départ du fond plein cadre du héros */
  --hero-bg-dur:    2.6s;    /* durée de son ouverture */
  --ease-reveal:    cubic-bezier(0.16, 1, 0.3, 1);  /* sortie très douce, « premium » */
  --reveal-tilt:    -2deg;   /* inclinaison de la carte qui se pose */
  --reveal-stagger: 100ms;    /* écart entre deux enfants d'une cascade */
  --transition: var(--dur) var(--ease-out);

  /* --- Z-index nommés --- */
  --z-base: 1;  --z-dropdown: 1000;  --z-sticky: 1100;  --z-drawer: 1200;
  --z-modal: 1300;  --z-toast: 1500;  --z-max: 9999;

  /* --- Layout --- */
  --container: 1200px;  --container-narrow: 780px;  --container-wide: 1400px;
  --header-h: 72px;

  color-scheme: light;
}

/* =============================================================================
   02 · GENERIC — reset
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
/* [hidden] gagne TOUJOURS — sinon un display:flex/grid posé par une classe le neutralise. */
[hidden] { display: none !important; }
:where(p, li) { overflow-wrap: anywhere; }
:where(h1, h2, h3, h4) { overflow-wrap: normal; hyphens: auto; }
:where(a) { color: inherit; text-decoration: none; }
::selection { background: var(--accent-pale); color: var(--accent-text); }

/* =============================================================================
   03 · ELEMENTS — balises nues
   ============================================================================= */
html { font-size: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;            /* garde-fou anti-débordement */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
h5 { font-size: var(--fs-500); }
h6 { font-size: var(--fs-400); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

p { line-height: var(--lh-normal); }
p, ul, ol, figure { max-width: var(--measure); }

a { color: var(--accent-text); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-fonce); }

strong, b { font-weight: var(--fw-bold); }
small { font-size: var(--fs-300); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: none; border-top: 1px solid var(--border); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
th { font-weight: var(--fw-semibold); color: var(--text); }

:focus-visible { outline: 2px solid transparent; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* =============================================================================
   04 · OBJECTS — layout (zéro skin)
   ============================================================================= */
.o-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.o-container--narrow { max-width: var(--container-narrow); }
/* Rythme vertical du contenu éditorial en colonne étroite : un titre ne touche
   jamais le paragraphe voisin. (Les composants n'utilisent pas cette classe.) */
.o-container--narrow > * + * { margin-top: var(--s5); }
.o-container--narrow > * + :is(h2, h3, h4) { margin-top: var(--s10); }
.o-container--wide   { max-width: var(--container-wide); }

.o-section { padding-block: var(--space-section); }

.o-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.o-grid--2 { grid-template-columns: repeat(2, 1fr); }
.o-grid--3 { grid-template-columns: repeat(3, 1fr); }
.o-grid--4 { grid-template-columns: repeat(4, 1fr); }
.o-grid > * { min-width: 0; }

.o-stack { display: flex; flex-direction: column; gap: var(--s4); }
.o-stack > * { min-width: 0; }
.o-stack--lg { gap: var(--s8); }
.o-stack--sm { gap: var(--s2); }

.o-cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.o-cluster--between { justify-content: space-between; }
.o-cluster--center  { justify-content: center; }

.o-split { display: grid; gap: var(--gutter); grid-template-columns: 1fr 1fr; align-items: center; }
.o-split > * { min-width: 0; }
.o-split--media { grid-template-columns: 1.1fr 0.9fr; }

/* =============================================================================
   05 · COMPONENTS
   ============================================================================= */

/* --- Alert ------------------------------------------------------------------ */
.c-alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.c-alert__icon { flex: none; width: 1.25rem; height: 1.25rem; }
.c-alert__title { font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.c-alert--success { background: var(--success-pale); border-color: var(--success); color: var(--success-fonce); }
.c-alert--warning { background: var(--warning-pale); border-color: var(--warning); color: var(--warning-fonce); }
.c-alert--danger  { background: var(--danger-pale);  border-color: var(--danger);  color: var(--danger-fonce); }
.c-alert--info    { background: var(--info-pale);    border-color: var(--info);    color: var(--info-fonce); }

/* --- Avatar ----------------------------------------------------------------- */
.c-avatar {
  display: inline-grid; place-items: center; overflow: hidden;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-round);
  background: var(--surface-2); color: var(--text-muted);
  font-weight: var(--fw-semibold); font-family: var(--font-sans);
  border: 2px solid var(--surface);
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-300); }
.c-avatar--lg { width: 4rem; height: 4rem; font-size: var(--fs-600); }
.c-avatar-group { display: flex; }
.c-avatar-group .c-avatar { margin-left: -0.6rem; }
.c-avatar-group .c-avatar:first-child { margin-left: 0; }

/* --- Badge ------------------------------------------------------------------ */
.c-badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 0.2em 0.7em; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold);
  line-height: 1.4; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted);
}
.c-badge--accent  { background: var(--accent-pale);  color: var(--accent-text); }
.c-badge--success { background: var(--success-pale); color: var(--success-fonce); }
.c-badge--warning { background: var(--warning-pale); color: var(--warning-fonce); }
.c-badge--danger  { background: var(--danger-pale);  color: var(--danger-fonce); }
.c-badge--info    { background: var(--info-pale);    color: var(--info-fonce); }
.c-badge--solid.c-badge--accent  { background: var(--accent-strong);  color: var(--accent-contraste); }
.c-badge--solid.c-badge--success { background: var(--success); color: #fff; }
.c-badge--solid.c-badge--warning { background: var(--warning); color: #fff; }
.c-badge--solid.c-badge--danger  { background: var(--danger);  color: #fff; }
.c-badge--solid.c-badge--info    { background: var(--info);    color: #fff; }

/* --- Breadcrumb ------------------------------------------------------------- */
.c-breadcrumb { font-size: var(--fs-300); font-family: var(--font-sans); color: var(--text-muted); }
.c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; list-style: none; padding: 0; }
.c-breadcrumb li { display: flex; gap: var(--s2); align-items: center; }
.c-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--text-subtle); }
.c-breadcrumb a { color: var(--text-muted); }
.c-breadcrumb a:hover { color: var(--accent-text); }
.c-breadcrumb [aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); }

/* --- Button ----------------------------------------------------------------- */
.c-btn {
  --_bg: var(--accent-strong); --_fg: var(--accent-contraste); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0.7em 1.4em;
  font-family: var(--font-sans); font-size: var(--fs-400); font-weight: var(--fw-semibold);
  line-height: 1.2; text-align: center; white-space: nowrap;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--transition), box-shadow var(--transition), color var(--transition);
}
.c-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.c-btn:hover, .c-btn:focus-visible { color: var(--_fg); /* v3.15 : le a:hover générique ne décolore plus le texte des boutons */ }
.c-btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.c-btn:focus-visible { box-shadow: var(--shadow-focus); }
.c-btn:disabled, .c-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.c-btn--primary   { --_bg: var(--accent-strong); --_fg: var(--accent-contraste); }
.c-btn--secondary { --_bg: var(--surface-2); --_fg: var(--text); --_bd: var(--border); }
.c-btn--outline   { --_bg: transparent; --_fg: var(--accent-text); --_bd: var(--accent); }
.c-btn--ghost     { --_bg: transparent; --_fg: var(--text); --_bd: transparent; }
.c-btn--ghost:hover { background: var(--surface-2); box-shadow: none; }
.c-btn--danger    { --_bg: var(--danger); --_fg: #fff; }
.c-btn--link      { --_bg: transparent; --_fg: var(--accent-text); --_bd: transparent; min-height: auto; padding: 0.2em 0; text-decoration: underline; text-underline-offset: 3px; }
.c-btn--link:hover { box-shadow: none; transform: none; color: var(--accent-fonce); }

.c-btn--sm { min-height: 36px; padding: 0.5em 1em; font-size: var(--fs-300); }
.c-btn--lg { min-height: 52px; padding: 0.85em 1.8em; font-size: var(--fs-500); }
.c-btn--block { display: flex; width: 100%; }
.c-btn--icon  { padding: 0; width: 44px; height: 44px; min-height: 44px; }
.c-btn--with-icon .c-icon { width: 1.1em; height: 1.1em; }

.c-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.c-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: var(--_fg);
  color: color-mix(in srgb, var(--_fg) 40%, transparent);
  animation: c-spin 0.7s linear infinite;
}

/* --- Card ------------------------------------------------------------------- */
.c-card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.c-card__title { font-family: var(--font-display); font-size: var(--fs-600); }
.c-card__text  { color: var(--text-muted); }
.c-card--interactive { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.c-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.c-card--interactive:focus-within { box-shadow: var(--shadow-focus); }

.c-card--feature .c-card__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--radius-md); background: var(--accent-pale); color: var(--accent-text);
}
.c-card--feature .c-card__icon .c-icon { width: 1.5rem; height: 1.5rem; }

.c-card--testimonial { gap: var(--s4); }
.c-card--testimonial .c-card__quote { font-family: var(--font-display); font-size: var(--fs-500); line-height: var(--lh-snug); color: var(--text); }
.c-card--testimonial .c-card__author { display: flex; gap: var(--s3); align-items: center; margin-top: auto; }
.c-card--testimonial .c-card__name { font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.c-card--testimonial .c-card__role { font-size: var(--fs-300); color: var(--text-muted); }

.c-card--pricing { gap: var(--s5); text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.c-card--pricing h3 { font-size: var(--fs-600); } /* v3.9 : un h3 nu de carte tarif ne prend plus la taille des titres de page (fs-700) */
.c-card--pricing:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--accent); }
.c-card--pricing .c-btn { margin-top: auto; } /* boutons alignés en bas quelle que soit la hauteur */
.c-card--pricing .c-card__price { font-family: var(--font-display); font-size: var(--fs-800); line-height: 1; }
.c-card--pricing .c-card__price small { font-size: var(--fs-400); color: var(--text-muted); font-family: var(--font-sans); }
.c-card--pricing .c-card__list { list-style: none; padding: 0; display: grid; gap: var(--s2); align-content: start; text-align: left; color: var(--text-muted); flex: 1; } /* align-content: start = les puces restent compactes même quand la carte s'étire (hauteurs égales) */
.c-card--pricing .c-card__list li { display: flex; gap: var(--s2); }
.c-card--pricing .c-card__list li::before { content: "\2713"; font-weight: var(--fw-bold); color: var(--accent-text); flex: 0 0 auto; }

/* Tarifs complexes : lignes heures creuses / heures pleines dans la carte. */
.c-card__rates { list-style: none; padding: 0; margin: 0; display: grid; text-align: left; }
.c-card__rates li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding-block: var(--s2); border-bottom: 1px dashed var(--border);
}
.c-card__rates li:last-child { border-bottom: 0; }
.c-card__rates span { color: var(--text-muted); }
.c-card__rates strong { font-family: var(--font-display); font-size: var(--fs-500); color: var(--accent-text); white-space: nowrap; }

/* Note tarifaire : produits sur place en pastilles centrées, sous la grille. */
.c-pricenote {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  margin-top: var(--s8); padding: var(--s5) var(--s6);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); text-align: center;
}
.c-pricenote__title {
  font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle);
}
.c-pricenote__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.c-pricenote__item {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s5); background: var(--surface-2);
  border-radius: var(--radius-pill); color: var(--text-muted);
}
.c-pricenote__item strong { font-family: var(--font-display); font-size: var(--fs-500); color: var(--accent-text); }
.c-pricelegend { text-align: center; margin-top: var(--s4); margin-inline: auto; color: var(--text-subtle); font-size: var(--fs-300); }
.c-card--pricing.c-card--featured { border-color: var(--accent); box-shadow: var(--shadow-lg); position: relative; }
.c-card--pricing.c-card--featured::before {
  content: "Recommandé"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--accent-strong); color: var(--accent-contraste);
  font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold);
  padding: 0.2em 0.9em; border-radius: var(--radius-pill);
}

.c-card--team { text-align: center; align-items: center; gap: var(--s3); }
.c-card--team .c-card__name { font-weight: var(--fw-semibold); font-family: var(--font-sans); }
.c-card--team .c-card__role { font-size: var(--fs-300); color: var(--accent-text); }

.c-card--article { padding: 0; overflow: hidden; gap: 0; }
.c-card--article .c-card__media { aspect-ratio: 16 / 10; background: var(--surface-2); }
.c-card--article .c-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-card--article .c-card__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); }
.c-card--article .c-card__meta { font-size: var(--fs-300); color: var(--text-muted); }
/* Carte article horizontale (photo à gauche, texte à droite) — idéal en 1 colonne */
.c-card--horizontal { flex-direction: row; align-items: stretch; }
.c-card--horizontal .c-card__media { flex: 0 0 42%; aspect-ratio: auto; }
/* Quinconce : photo à droite une ligne sur deux (FACIL-03 alterné). */
.c-card--horizontal.c-card--reverse { flex-direction: row-reverse; }

/* Carte à révélation (FACIL-05) : au survol, toute la carte bascule en sombre
   translucide (photo en transparence) et le texte apparaît centré au milieu.
   Le repli mobile (texte statique sous le titre) est dans le bloc RESPONSIVE. */
.c-card--peek { position: relative; transition: transform var(--transition), box-shadow var(--transition); }
.c-card--peek:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.c-card--peek .c-card__body { text-align: center; }
.c-card--peek .c-card__media img { transition: transform var(--transition); }
.c-card--peek:hover .c-card__media img { transform: scale(1.06); }
.c-card--peek .c-card__reveal {
  position: absolute; inset: 0; z-index: 1; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--s6); color: #fff; background: rgb(10 10 12 / 0.8);
  opacity: 0; transition: opacity var(--transition);
}
.c-card--peek:hover .c-card__reveal,
.c-card--peek:focus-within .c-card__reveal { opacity: 1; }
.c-card--horizontal .c-card__body { flex: 1; justify-content: center; padding: var(--s6); }

.c-card--stat { gap: var(--s1); text-align: center; align-items: center; }
.c-card--stat .c-card__value { font-family: var(--font-display); font-size: var(--fs-800); line-height: 1; color: var(--accent-text); }
.c-card--stat .c-card__label { color: var(--text-muted); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.c-card--service { position: relative; overflow: hidden; isolation: isolate; gap: var(--s4); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.c-card--service::after { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: 160px; height: 160px; background: radial-gradient(circle at top right, var(--accent-pale), transparent 72%); pointer-events: none; }
.c-card--service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.c-card--service .c-card__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-contraste); box-shadow: 0 8px 20px -6px var(--accent); }
.c-card--service .c-card__icon .c-icon { width: 1.6rem; height: 1.6rem; }
.c-card--service .c-card__title { font-size: var(--fs-600); }
.c-card--service .c-btn { margin-top: auto; }

/* --- Product (proshop) ------------------------------------------------------ */
.c-product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.c-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.c-product__media { aspect-ratio: 1 / 1; background: var(--surface-2); }
.c-product__media img { width: 100%; height: 100%; object-fit: cover; }
.c-product__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; }
.c-product__body .c-tag { align-self: flex-start; }
.c-product__name { font-family: var(--font-display); font-size: var(--fs-500); }
.c-product__price { font-weight: var(--fw-bold); color: var(--accent-text); font-size: var(--fs-500); }
.c-product__body .c-btn { margin-top: auto; }

/* --- Checkbox / Radio / Switch --------------------------------------------- */
.c-checkbox, .c-radio { display: inline-flex; gap: var(--s2); align-items: flex-start; cursor: pointer; font-family: var(--font-sans); }
.c-checkbox input, .c-radio input { flex: none; width: 1.2rem; height: 1.2rem; accent-color: var(--accent); margin-top: 0.15em; }
.c-switch { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-family: var(--font-sans); }
.c-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-switch__track {
  position: relative; width: 2.6rem; height: 1.5rem; border-radius: var(--radius-pill);
  background: var(--gris-300); transition: background var(--transition);
}
.c-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--transition);
}
.c-switch input:checked + .c-switch__track { background: var(--accent); }
.c-switch input:checked + .c-switch__track::after { transform: translateX(1.1rem); }
.c-switch input:focus-visible + .c-switch__track { box-shadow: var(--shadow-focus); }

/* --- Checklist (liste à coches) --------------------------------------------- */
.c-checklist { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.c-checklist li { display: flex; gap: var(--s2); align-items: flex-start; color: var(--text-muted); }
.c-checklist li::before { content: "\2713"; color: var(--accent-text); font-weight: var(--fw-bold); flex: none; line-height: var(--lh-normal); }

/* --- Compare (tableau comparatif) ------------------------------------------- */
.c-compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.c-compare { width: 100%; border-collapse: collapse; min-width: 38rem; }
.c-compare th, .c-compare td { text-align: left; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); vertical-align: top; }
.c-compare tr:last-child th, .c-compare tr:last-child td { border-bottom: none; }
.c-compare thead th { font-family: var(--font-sans); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); background: var(--surface-2); }
.c-compare tbody th { font-weight: var(--fw-semibold); color: var(--text); width: 28%; }
.c-compare__col-accent { background: var(--accent-pale); }
.c-compare thead .c-compare__col-accent { background: var(--accent-strong); color: var(--accent-contraste); }

/* --- Cookie banner ---------------------------------------------------------- */
.c-cookie-banner {
  position: fixed; inset-inline: var(--gutter); bottom: var(--gutter); z-index: var(--z-toast);
  max-width: 38rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between;
  padding: var(--s5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.c-cookie-banner__text { font-size: var(--fs-300); color: var(--text-muted); flex: 1 1 16rem; }

/* --- Divider ---------------------------------------------------------------- */
.c-divider { border: none; border-top: 1px solid var(--border); margin-block: var(--s6); }
.c-divider--with-label { display: flex; align-items: center; gap: var(--s4); border: none; color: var(--text-subtle); font-size: var(--fs-300); }
.c-divider--with-label::before, .c-divider--with-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Field (formulaires) ---------------------------------------------------- */
.c-field { display: flex; flex-direction: column; gap: var(--s2); font-family: var(--font-sans); }
.c-label { font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--text); }
.c-label__opt { font-weight: var(--fw-regular); color: var(--text-subtle); }

.c-input, .c-textarea, .c-select {
  width: 100%; min-height: 44px; padding: 0.6em 0.9em;
  font-family: var(--font-sans); font-size: var(--fs-400); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.c-textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-normal); }
.c-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 1.1em) center, calc(100% - 0.75em) center; background-size: 0.4em 0.4em, 0.4em 0.4em; background-repeat: no-repeat; padding-right: 2.5em; }
.c-input::placeholder, .c-textarea::placeholder { color: var(--text-subtle); }
.c-input:focus-visible, .c-textarea:focus-visible, .c-select:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.c-input:disabled, .c-textarea:disabled, .c-select:disabled { background: var(--surface-2); cursor: not-allowed; opacity: 0.7; }

.c-field.is-invalid .c-input, .c-field.is-invalid .c-textarea, .c-field.is-invalid .c-select,
[aria-invalid="true"] { border-color: var(--danger); }
.c-field.is-valid .c-input, .c-field.is-valid .c-textarea, .c-field.is-valid .c-select { border-color: var(--success); }

.c-field__help { font-size: var(--fs-300); color: var(--text-muted); }
.c-field__error { font-size: var(--fs-300); color: var(--danger-fonce); font-weight: var(--fw-medium); }

.c-input-group { display: flex; }
.c-input-group .c-input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.c-input-group .c-btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Honeypot anti-spam (à inclure caché dans chaque formulaire) */
.c-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Icon ------------------------------------------------------------------- */
.c-icon { display: inline-block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* --- Link ------------------------------------------------------------------- */
.c-link { color: var(--accent-text); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: var(--s1); }
.c-link:hover { color: var(--accent-fonce); }
.c-link--arrow::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease-out); }
.c-link--arrow:hover::after { transform: translateX(3px); }

/* --- Modal ------------------------------------------------------------------ */
.c-modal { width: min(92vw, 32rem); margin: auto; padding: 0; border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); background: var(--surface); color: var(--text); }
.c-modal::backdrop { background: hsl(214 40% 12% / 0.55); backdrop-filter: blur(2px); }
.c-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--border); }
.c-modal__title { font-size: var(--fs-600); }
.c-modal__body { padding: var(--s6); }
.c-modal__foot { display: flex; gap: var(--s3); justify-content: flex-end; padding: var(--s5) var(--s6); border-top: 1px solid var(--border); }
/* Positions (sur <dialog open>) */
.c-modal--top-left[open]     { margin: 0; inset: var(--gutter) auto auto var(--gutter); }
.c-modal--top-right[open]    { margin: 0; inset: var(--gutter) var(--gutter) auto auto; }
.c-modal--bottom-left[open]  { margin: 0; inset: auto auto var(--gutter) var(--gutter); }
.c-modal--bottom-right[open] { margin: 0; inset: auto var(--gutter) var(--gutter) auto; }
.c-modal--top[open]          { margin-inline: auto; inset: var(--gutter) 0 auto 0; }
.c-modal--bottom[open]       { margin-inline: auto; inset: auto 0 var(--gutter) 0; }
/* Tailles */
.c-modal--sm { width: min(92vw, 24rem); }
.c-modal--lg { width: min(94vw, 50rem); }
.c-modal--fullscreen[open] { inset: var(--gutter); width: auto; height: auto; max-width: none; max-height: none; margin: 0; overflow: auto; }

/* --- Pagination ------------------------------------------------------------- */
.c-pagination { display: flex; gap: var(--s1); flex-wrap: wrap; font-family: var(--font-sans); }
.c-pagination a, .c-pagination span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 0.6em;
  border-radius: var(--radius-sm); color: var(--text-muted); border: 1px solid transparent;
}
.c-pagination a:hover { background: var(--surface-2); color: var(--text); }
.c-pagination [aria-current="page"] { background: var(--accent-strong); color: var(--accent-contraste); }

/* --- Pill / Tag ------------------------------------------------------------- */
.c-pill { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.35em 0.9em; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-300); }
.c-pill__remove { display: grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--gris-300); color: var(--gris-700); font-size: 0.8em; }
.c-pill__remove:hover { background: var(--danger); color: #fff; }
.c-tag { display: inline-flex; padding: 0.15em 0.6em; border-radius: var(--radius-xs); background: var(--accent-pale); color: var(--accent-text); font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-medium); }

/* --- Skeleton / Spinner ----------------------------------------------------- */
.c-skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--gris-200) 37%, var(--surface-2) 63%); background-size: 400% 100%; border-radius: var(--radius-sm); animation: c-shimmer 1.4s ease infinite; min-height: 1em; }
.c-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: c-spin 0.7s linear infinite; }

/* --- Skiplink --------------------------------------------------------------- */
.c-skiplink { position: absolute; left: var(--s4); top: -3rem; z-index: var(--z-max); background: var(--accent-strong); color: var(--accent-contraste); padding: var(--s2) var(--s4); border-radius: var(--radius-sm); transition: top var(--transition); }
.c-skiplink:focus { top: var(--s4); color: var(--accent-contraste); }

/* --- Tabs ------------------------------------------------------------------- */
.c-tabs__list { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); }
.c-tabs__tab { padding: var(--s3) var(--s4); font-family: var(--font-sans); font-weight: var(--fw-medium); color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.c-tabs__tab:hover { color: var(--text); }
.c-tabs__tab[aria-selected="true"], .c-tabs__tab.is-selected { color: var(--accent-text); border-bottom-color: var(--accent); }
.c-tabs__panel { padding-block: var(--s5); }
.c-tabs__panel[hidden] { display: none; }

/* --- Toast ------------------------------------------------------------------ */
.c-toast-region { position: fixed; bottom: var(--gutter); right: var(--gutter); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s3); max-width: min(92vw, 24rem); }
.c-toast { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.c-toast--success { background: var(--success-fonce); }
.c-toast--danger  { background: var(--danger-fonce); }

/* --- Back to top ------------------------------------------------------------ */
.c-backtotop { position: fixed; bottom: var(--gutter); left: var(--gutter); z-index: var(--z-sticky); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-round); background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.c-backtotop:hover { background: var(--accent-strong); color: var(--accent-contraste); border-color: transparent; }
.c-backtotop[hidden] { display: none; }

/* =============================================================================
   06 · SECTIONS — catalogue codé (NAV…FOOT)
   ============================================================================= */

/* --- NAV (NAV-01..04) ------------------------------------------------------- */
/* v4.4 : la barre de nav respire sur le conteneur LARGE (1400 px) — logo,
   items et bouton Réserver cessent d'être à l'étroit sur les menus fournis. */
.c-nav > .o-container { max-width: var(--container-wide); }
.c-nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); border-bottom: 1px solid var(--border); }
.c-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: var(--header-h); }
.c-nav__logo { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-500); color: var(--text); letter-spacing: var(--tracking-tight); white-space: nowrap; }
.c-nav__menu { display: flex; flex-wrap: nowrap; gap: var(--s5); align-items: center; list-style: none; padding: 0; }
.c-nav__menu li { overflow-wrap: normal; }
.c-nav__link { color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--fw-medium); white-space: nowrap; }
.c-nav__link:hover, .c-nav__link[aria-current="page"] { color: var(--text); }
.c-nav__actions { display: flex; gap: var(--s3); align-items: center; }
.c-nav__burger { display: none; }
.c-nav--centered .c-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.c-nav--centered .c-nav__menu { justify-content: flex-end; }

/* --- Sous-menu de navigation (v3.8) : <li class="c-nav__dropdown"> -----------
   Lien parent + panneau déroulant au survol / focus clavier. Sur mobile
   (drawer), le panneau s'affiche à plat sous son parent (règles responsive). */
.c-nav__dropdown { position: relative; }
.c-nav__dropdown > .c-nav__link::after { content: " \25BE"; font-size: 0.72em; }
.c-nav__panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 13rem; padding: var(--s2); display: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; z-index: var(--z-dropdown);
}
.c-nav__dropdown.is-open > .c-nav__panel,
.c-nav__dropdown:focus-within > .c-nav__panel { display: grid; } /* v3.15 : ouverture pilotée par script.js (délai de grâce) */
.c-nav__panel a { display: block; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); color: var(--text); white-space: nowrap; }
.c-nav__panel a:hover, .c-nav__panel a[aria-current="page"] { background: var(--surface-2); color: var(--accent-text); }

.c-nav--centered .c-nav__logo { text-align: center; }
/* --- NAV, trois personnalités (v3.14) — logo à gauche + bouton à droite TOUJOURS ---
   A. .c-nav--underline : liens SOULIGNÉS au survol (trait accent animé)
   B. .c-nav--dark : barre pleine couleur du thème, liens clairs, survol = changement
      de couleur ; sous-menu en VOLET pleine largeur
   C. .c-nav--hide : la barre se MASQUE en défilant vers le bas et réapparaît
      en remontant (classe .is-nav-hidden posée par script.js) */
.c-nav--underline .c-nav__link { position: relative; }
.c-nav--underline .c-nav__link::before { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--accent); transition: right var(--dur) var(--ease-out); }
.c-nav--underline .c-nav__link:hover::before, .c-nav--underline .c-nav__link[aria-current="page"]::before { right: 0; }

.c-nav--dark { background: var(--accent-strong); border-bottom-color: transparent; }
.c-nav--dark .c-nav__logo, .c-nav--dark .c-nav__link, .c-nav--dark .c-nav__burger { color: var(--accent-contraste); }
/* v4.12 : la barre foncée est déjà peinte en --accent-strong ; marquer le lien
   actif en --brand donnait la couleur de marque SUR la couleur de marque — le
   lien de la page courante devenait invisible (1,78:1 avec le bleu d'origine,
   pire encore avec une palette chaude). Le lien reste en pleine lisibilité et
   l'état se signale par un SOULIGNEMENT : l'information ne repose plus sur la
   seule couleur, ce qui est aussi meilleur en accessibilité.

   Scopé au DESKTOP et porté à un poids supérieur (.c-nav__menu en plus) : la
   barre foncée n'existe qu'au-dessus de 1024 px, et en dessous le menu devient
   un tiroir CLAIR dont le traitement tactile du kit (fond surface + accent)
   reste le bon. Sans ce scope, la règle du tiroir — de même poids mais écrite
   plus loin dans la feuille — écrasait celle-ci. */
@media (min-width: 1024px) {
  .c-nav--dark .c-nav__menu .c-nav__link:hover,
  .c-nav--dark .c-nav__menu .c-nav__link[aria-current="page"] {
    color: var(--accent-contraste);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}
.c-nav--dark .c-nav__dropdown { position: relative; } /* v3.16 : volet centré sous son item */
.c-nav--dark .c-nav__panel {
  position: absolute; left: 50%; top: 100%; right: auto; transform: translateX(-50%);
  min-width: max-content; display: none; grid-auto-flow: column; gap: var(--s2);
  background: var(--accent-strong); border: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--s3) var(--s4);
}
.c-nav--dark .c-nav__dropdown.is-open > .c-nav__panel,
.c-nav--dark .c-nav__dropdown:focus-within > .c-nav__panel { display: grid; }
.c-nav--dark .c-nav__panel a { color: var(--accent-contraste); }
.c-nav--dark .c-nav__panel a:hover, .c-nav--dark .c-nav__panel a[aria-current="page"] { background: hsl(0 0% 100% / 0.14); color: #fff; }

.c-nav--hide { transition: transform var(--dur-slow) var(--ease-out); }
.c-nav--hide.is-nav-hidden { transform: translateY(-100%); }
/* Tiroir mobile (v3.25) : bouton de fermeture (injecté par script.js) +
   la nav dont le tiroir est OUVERT passe au-dessus de tout le reste. */
.c-nav__close { display: none; }
/* v4.3 : le <li> qui porte le ✕ restait un élément flex en desktop (gap en trop,
   ligne décalée). On masque l'item entier, pas seulement le bouton. */
.c-nav__close-item { display: none; }
.c-nav:has(.c-nav__menu[data-open="true"]) { z-index: calc(var(--z-drawer) + 1); }


/* Séparateurs d'items de menu (v3.15) — combinables avec toute personnalité */
.c-nav--sep-dots .c-nav__menu > li:not(.c-nav__close-item) + li::before { content: "\00B7"; margin-right: var(--s4); color: var(--text-subtle); font-weight: var(--fw-bold); }
.c-nav--sep-bars .c-nav__menu > li:not(.c-nav__close-item) + li::before { content: ""; display: inline-block; width: 1px; height: 1em; margin-right: var(--s4); background: currentColor; opacity: 0.35; vertical-align: -0.15em; }
.c-nav--dark.c-nav--sep-dots .c-nav__menu > li:not(.c-nav__close-item) + li::before { color: var(--accent-contraste); opacity: 0.55; }

.c-nav--transparent { position: absolute; inset-inline: 0; background: transparent; border-bottom-color: transparent; }
.c-nav--transparent .c-nav__logo, .c-nav--transparent .c-nav__link { color: #fff; }
.c-nav__panel { /* méga-menu */ }
.c-nav--mega .c-nav__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--s8) 0; }
.c-nav--mega .c-nav__panel[hidden] { display: none; }

/* --- HERO (HERO-01..05) ----------------------------------------------------- */
.c-hero { padding-block: var(--space-section); }
.c-hero__eyebrow { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--accent-text); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-300); }
/* Clamp plafonné : le H1 doit tenir en 2 lignes max sur un écran 15" (~1440px). */
.c-hero__title { font-size: clamp(2.3rem, 1.5rem + 2.3vw, 3.4rem); }
.c-hero__lead { font-size: var(--fs-500); color: var(--text-muted); max-width: 48ch; }
.c-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.c-hero__visual img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.c-hero--center { text-align: center; }
.c-hero--center .c-hero__inner { display: grid; gap: var(--s6); justify-items: center; max-width: var(--container-narrow); margin-inline: auto; }
.c-hero--center .c-hero__lead { margin-inline: auto; }
.c-hero--center .c-hero__actions { justify-content: center; }

.c-hero--split { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.c-hero--split .c-hero__inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: calc(var(--gutter) * 1.8); align-items: center; }
.c-hero--split .c-hero__content { display: grid; gap: var(--s6); align-content: center; }
/* Photo mise en valeur : recadrage 5/4, ombre profonde + cadre accent décalé. */
.c-hero--split .c-hero__visual { position: relative; }
.c-hero--split .c-hero__visual::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--s6) calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s6);
  border-radius: var(--radius-xl); background: var(--accent-pale);
}
.c-hero--split .c-hero__visual img {
  aspect-ratio: 5 / 4; object-fit: cover;
  box-shadow: 0 32px 64px -28px rgb(10 10 12 / 0.45), var(--shadow-md);
}

.c-hero--image { position: relative; color: #fff; isolation: isolate; }
.c-hero--image .c-hero__bg { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; }
.c-hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsl(214 40% 10% / 0.45), hsl(214 40% 10% / 0.75)); }
.c-hero--image .c-hero__title, .c-hero--image .c-hero__eyebrow { color: #fff; }
.c-hero--image .c-hero__lead { color: hsl(0 0% 100% / 0.85); }
.c-hero--image .c-hero__inner { display: grid; gap: var(--s6); max-width: var(--container-narrow); }
/* Retours terrain (v3.3) : si un hero combine par erreur --split ET --image,
   la disposition split reprend toute la largeur (pas de plafond "narrow" qui
   compacterait le contenu). Garde-fou : le split reste prioritaire. */
.c-hero--split.c-hero--image .c-hero__inner { max-width: none; }
/* Un groupe de boutons (c-hero__actions) dans un bloc centré se centre aussi. */
.u-text-center .c-hero__actions { justify-content: center; }

.c-hero--form .c-hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gutter); align-items: center; }
.c-hero--form .c-hero__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--s8); display: grid; gap: var(--s4); }

.c-hero--minimal .c-hero__inner { display: grid; gap: var(--s5); max-width: var(--container-narrow); }
.c-hero--minimal .c-hero__title { font-size: var(--fs-800); }

/* --- LOGOS (LOGOS-01..02) --------------------------------------------------- */
.c-logos__title { text-align: center; color: var(--text-muted); font-family: var(--font-sans); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--s6); }
.c-logos__grid { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; justify-content: center; }
.c-logos__item { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-600); color: var(--text-subtle); filter: grayscale(1); opacity: 0.7; transition: opacity var(--transition), filter var(--transition); }
.c-logos__item:hover { opacity: 1; filter: grayscale(0); color: var(--text); }
.c-logos--marquee { overflow: hidden; }
.c-logos--marquee .c-logos__track { display: flex; gap: var(--s10); width: max-content; animation: c-marquee 24s linear infinite; }

/* --- FEAT (FEAT-01..04) ----------------------------------------------------- */
.c-features__head { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--s12); display: grid; gap: var(--s3); }
.c-features__grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.c-features--zigzag .c-features__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; margin-bottom: var(--s16); }
.c-features--zigzag .c-features__row:nth-child(even) .c-features__media { order: -1; }
.c-features--zigzag .c-features__media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.c-features--bento .c-features__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.c-features--bento .c-features__cell--wide { grid-column: span 2; }
.c-features--bento .c-features__cell--tall { grid-row: span 2; }
.c-features--list .c-features__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s8); }

/* FEAT-05 · cartes centrées, icône à cheval sur le bord haut (effet 3D). */
.c-features--centered .c-features__grid { padding-top: 2rem; } /* place pour l'icône qui dépasse */
.c-features--centered .c-card--feature { text-align: center; overflow: visible; }
.c-features--centered .c-card__icon {
  margin-inline: auto;
  margin-top: calc(-1 * (var(--s6) + 2rem)); /* la moitié de l'icône sort de la carte */
  margin-bottom: var(--s3); /* + gap s3 de la carte = s6 : même respiration icône→titre que texte→bord bas */
  width: 4rem; height: 4rem; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-fonce));
  color: var(--accent-contraste);
  box-shadow: 0 14px 28px -10px var(--accent);
}
.c-features--centered .c-card__icon .c-icon { width: 1.75rem; height: 1.75rem; }
/* Phrase de conclusion sous la grille (les p ont une largeur max : margin auto obligatoire). */
.c-features__foot {
  display: block; width: 100%; text-align: center;
  margin-top: var(--s8); margin-inline: auto; color: var(--text-muted);
}
.c-features--list .c-feature-item { display: flex; gap: var(--s4); align-items: flex-start; }
.c-features--list .c-feature-item__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--accent-pale); color: var(--accent-text); }

/* --- STEPS (STEPS-01..03) --------------------------------------------------- */
.c-steps { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.c-step { display: grid; gap: var(--s3); }
.c-step__num { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-round); background: var(--accent-strong); color: var(--accent-contraste); font-family: var(--font-display); font-size: var(--fs-600); }
.c-steps--timeline { display: grid; grid-template-columns: 1fr; gap: 0; }
.c-steps--timeline .c-step { grid-template-columns: 3rem 1fr; gap: var(--s5); padding-bottom: var(--s8); border-left: 2px solid var(--border); margin-left: 1.5rem; padding-left: var(--s8); position: relative; }
.c-steps--timeline .c-step__num { position: absolute; left: -1.5rem; }
.c-steps--slider { grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; }
.c-steps--slider .c-step { scroll-snap-align: start; }

/* --- STATS (STATS-01..02) --------------------------------------------------- */
.c-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); text-align: center; }
.c-stat__value { font-family: var(--font-display); font-size: var(--fs-800); line-height: 1; color: var(--accent-text); }
.c-stat__label { color: var(--text-muted); font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
/* STATS-02 · bandeau fin : chiffres + libellés sur une ligne, liserés haut/bas.
   À poser dans une <section class="c-statsband"> SANS o-section (bande fine). */
.c-statsband { border-block: 1px solid var(--border); }
.c-stats--band {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2) var(--s12); padding-block: var(--s5); text-align: left;
}
.c-stats--band > div { display: flex; align-items: baseline; gap: var(--s2); }
.c-stats--band .c-stat__value { font-size: var(--fs-600); }
.c-stats--band .c-stat__label { text-transform: none; letter-spacing: 0; font-size: var(--fs-300); }

.c-stats--marquee { display: block; overflow: hidden; }
.c-stats--marquee .c-stats__track { display: flex; gap: var(--s16); width: max-content; animation: c-marquee 28s linear infinite; }

/* --- TEMO (TEMO-01..03) ----------------------------------------------------- */
.c-temo__grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
.c-temo--duo .c-temo__grid { grid-template-columns: repeat(2, 1fr); } /* v3.12 : 2 avis côte à côte (data-pager-per="2") */
.c-temo--slider .c-temo__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--gutter); }
.c-temo--slider .c-card { flex: 0 0 min(85%, 24rem); scroll-snap-align: center; }
.c-temo--featured { text-align: center; max-width: var(--container-narrow); margin-inline: auto; }
.c-temo--featured .c-temo__quote { font-family: var(--font-display); font-size: var(--fs-700); line-height: var(--lh-snug); }
.c-temo--featured .c-temo__author { margin-top: var(--s6); display: flex; gap: var(--s3); align-items: center; justify-content: center; }

/* --- PRICE (PRICE-01..03) --------------------------------------------------- */
.c-pricing { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); align-items: start; }
.c-pricing__toggle { display: flex; gap: var(--s3); align-items: center; justify-content: center; margin-bottom: var(--s10); }
.c-pricing-table { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.c-pricing-table th { background: var(--surface-2); }
.c-pricing-table td, .c-pricing-table th { text-align: center; }
.c-pricing-table td:first-child, .c-pricing-table th:first-child { text-align: left; }

/* Tableau de tarifs premium (OFFERS-02 / PRICE-02) */
.c-pricetable-wrap { overflow-x: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.c-pricetable { width: 100%; min-width: 44rem; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.c-pricetable th, .c-pricetable td { padding: var(--s4) var(--s5); text-align: center; border-bottom: 1px solid var(--border); }
.c-pricetable thead th { background: transparent; /* v3.12 — règle O : lecture par colonne */ color: var(--text); font-family: var(--font-sans); vertical-align: bottom; border-bottom: 2px solid var(--border); }
.c-pricetable tbody th[scope="row"], .c-pricetable td:first-child { text-align: left; font-weight: var(--fw-medium); color: var(--text); }
/* v3.12 — règle O : zébrage de lignes supprimé (une seule logique : la colonne) */
.c-pricetable tbody tr:hover td, .c-pricetable tbody tr:hover th { background: transparent; }
.c-pricetable tbody tr:hover td:nth-child(2) { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.c-pricetable tbody tr:hover td:nth-child(3) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.c-pricetable__plan { font-family: var(--font-display); font-size: var(--fs-500); display: block; }
.c-pricetable__price { font-family: var(--font-display); font-size: var(--fs-700); color: var(--accent-text); line-height: 1; }
.c-pricetable__price small { display: block; font-family: var(--font-sans); font-size: var(--fs-300); color: var(--text-muted); font-weight: var(--fw-regular); }
.c-pricetable__check { color: var(--accent-text); font-weight: var(--fw-bold); }
.c-pricetable__no { color: var(--text-subtle); }
.c-pricetable__col-featured { background: transparent; } /* la mise en avant vient des teintes de colonne */
.c-pricetable thead tr th:nth-child(2), .c-pricetable tbody tr td:nth-child(2) { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.c-pricetable thead tr th:nth-child(3), .c-pricetable tbody tr td:nth-child(3) { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.c-pricetable thead .c-pricetable__col-featured { background: transparent; border-bottom-color: var(--accent); }
.c-pricetable__badge { display: inline-block; margin-bottom: var(--s2); padding: 0.15em 0.7em; border-radius: var(--radius-pill); background: var(--accent-strong); color: #fff; font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold); }
.c-pricetable tbody tr:last-child td, .c-pricetable tbody tr:last-child th { border-bottom: none; }
/* v3.12 — règle O, homogénéité : colonnes strictement égales, lignes de même hauteur */
@media (min-width: 1024px) {
  .c-pricetable { table-layout: fixed; }
  .c-pricetable tbody th, .c-pricetable tbody td { height: 4.25rem; vertical-align: middle; }
}

/* Frise chronologique élégante (STORY-01) */
.c-timeline { display: grid; gap: var(--s10); max-width: 46rem; margin-inline: auto; }
.c-timeline__item { position: relative; padding-left: var(--s10); }
.c-timeline__item::before { content: ""; position: absolute; left: 6px; top: 0.7rem; bottom: calc(-1 * var(--s10)); width: 2px; background: var(--border); }
.c-timeline__item:last-child::before { display: none; }
.c-timeline__item::after { content: ""; position: absolute; left: 0; top: 0.4rem; width: 14px; height: 14px; border-radius: var(--radius-round); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale); }
.c-timeline__year { font-family: var(--font-display); font-size: var(--fs-700); color: var(--accent-text); line-height: 1; }
/* Apparition progressive au scroll (script.js pose .is-visible en cascade).
   Scopé .has-reveal (classe posée par le JS) : sans JS, tout reste visible. */
.has-reveal .c-timeline__item { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.has-reveal .c-timeline__item.is-visible { opacity: 1; transform: none; }
.c-timeline__title { font-size: var(--fs-500); margin-top: var(--s2); }
.c-timeline__text { color: var(--text-muted); margin-top: var(--s2); }

/* --- TEAM (TEAM-01) --------------------------------------------------------- */
.c-team { display: grid; gap: var(--gutter); grid-template-columns: repeat(4, 1fr); }
/* Équipe centrée (v3.9) : 1 colonne par personne, 3 max par rangée, toujours
   centré — 1 coach = carte centrée, 2 = côte à côte, 4+ = rangées centrées. */
.c-team--center { display: flex; flex-wrap: wrap; justify-content: center; }
.c-team--center .c-card { flex: 0 1 clamp(14rem, 26vw, 18rem); }
.c-team--3 { grid-template-columns: repeat(3, 1fr); } /* 6 membres = 2 rangées propres */

/* TEAM-02 · organigramme : niveaux hiérarchiques reliés par un trait vertical. */
.c-orga { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s10); justify-items: center; }
.c-orga__level { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s3); width: 100%; }
.c-orga__level + .c-orga__level::before {
  content: ""; position: absolute; top: calc(-1 * var(--s10)); left: 50%;
  width: 2px; height: var(--s10); background: var(--border-strong);
}
.c-orga__label {
  width: 100%; text-align: center; font-family: var(--font-sans);
  font-size: var(--fs-300); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle);
}
.c-orga .c-card--team { flex: 0 1 13rem; }

/* --- GALLERY (GALLERY-01..02) ----------------------------------------------- */
.c-gallery { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.c-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.c-gallery__item { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; background: var(--surface-2); }
.c-gallery--masonry { display: block; columns: 3; column-gap: var(--s4); }
.c-gallery--masonry .c-gallery__item { aspect-ratio: auto; margin-bottom: var(--s4); break-inside: avoid; }
.c-gallery__item img { transition: transform var(--transition); }
.c-gallery__item:hover img { transform: scale(1.04); }

/* Galerie cliquable : chaque photo ouvre la lightbox (#lightbox + script.js). */
.c-gallery__btn { padding: 0; border: 0; background: none; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.c-gallery__btn img { display: block; }

/* Flèches de navigation (avis, sliders, lightbox). */
.c-arrows { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s6); }
.c-arrow {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-round);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--accent-text); font-size: var(--fs-500); line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.c-arrow:hover { background: var(--accent-strong, var(--accent)); color: var(--accent-contraste); border-color: var(--accent-strong, var(--accent)); }

/* Lightbox : modale photo plein écran avec flèches ◀ ▶ et fermeture. */
.c-modal--lightbox { padding: var(--s3); max-width: min(92vw, 56rem); background: var(--surface); }
.c-modal--lightbox img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.c-modal--lightbox .c-arrow--close { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; }
.c-modal--lightbox .c-arrows { margin-top: var(--s3); }

/* Carrousel générique (défilement horizontal, scroll-snap) */
.c-carousel { display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: var(--s4); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.c-carousel > * { flex: 0 0 min(82%, 22rem); scroll-snap-align: start; }
.c-carousel::-webkit-scrollbar { height: 8px; }
.c-carousel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

/* --- CONTENT (CONTENT-01..03) ----------------------------------------------- */
.c-content--prose { max-width: var(--measure); margin-inline: auto; }
.c-content--prose > * + * { margin-top: var(--s5); }
.c-content--prose h2, .c-content--prose h3 { margin-top: var(--s10); }
.c-content--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; }
.c-content--split > div > * + * { margin-top: var(--s4); } /* titre + paragraphes de la colonne texte espacés */
.c-content--split img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.c-content--cols { columns: 2; column-gap: var(--s10); max-width: var(--container); margin-inline: auto; }
/* CONTENT-02 --reverse : photo à gauche, texte à droite (alterner le côté photo
   par rapport au hero de la page pour éviter deux sections jumelles). */
.c-content--split.c-content--reverse img { order: -1; }

/* --- CONTENT-03 · Éditorial sur photo : carte de contenu posée sur une image
   plein fond (blocs « bon à savoir », récits, visions…). La classe se pose sur
   la <section> (composant plein écran, même logique que .c-hero--image). --- */
.c-bgsection { position: relative; isolation: isolate; }
.c-bgsection__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.c-bgsection::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsl(214 40% 10% / 0.50), hsl(214 40% 10% / 0.72)); }
.c-bgsection__card {
  max-width: var(--container-narrow); margin-inline: auto;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 4vw, 3rem);
}
.c-bgsection__card > * + * { margin-top: var(--s4); }
.c-bgsection__card > * + :is(h2, h3) { margin-top: var(--s8); }

/* --- APP (APP-01..03) — téléchargement appli -------------------------------- */
.c-appdl { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.c-appdl > * { min-width: 0; }
.c-appdl__media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.c-appdl__content { display: grid; gap: var(--s5); align-content: center; }
.c-appdl__title { font-size: var(--fs-700); }
.c-appdl__lead { color: var(--text-muted); font-size: var(--fs-500); }
.c-appdl__store { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Badges stores (Google Play / App Store) : fond sombre, logo + double ligne. */
.c-storebtn {
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s5); min-height: 3.25rem;
  background: var(--gris-1000); color: #fff; border-radius: var(--radius-md);
  text-decoration: none; line-height: 1.15;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-storebtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.c-storebtn__icon { width: 1.6rem; height: 1.6rem; fill: currentColor; flex: 0 0 auto; }
.c-storebtn__text { display: grid; text-align: left; }
.c-storebtn__text small { font-size: 0.68rem; opacity: 0.75; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.c-storebtn__text strong { font-size: var(--fs-400); color: inherit; }
/* APP-02 : photo à droite */
.c-appdl--reverse .c-appdl__media { order: 2; }
/* APP-03 : centré, photo au-dessus, avantages dessous */
.c-appdl--center { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: var(--container-narrow); margin-inline: auto; }
.c-appdl--center .c-appdl__media { max-width: 22rem; }
.c-appdl--center .c-checklist { width: fit-content; margin-inline: auto; }
.c-appdl--center .c-appdl__store { justify-content: center; }

/* --- FAQ (FAQ-01..02) ------------------------------------------------------- */
.c-faq { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--s3); }
.c-faq__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.c-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); cursor: pointer; font-family: var(--font-sans); font-weight: var(--fw-semibold); list-style: none; }
.c-faq__item summary::-webkit-details-marker { display: none; }
.c-faq__item summary::after { content: "+"; font-size: 1.4em; color: var(--accent-text); transition: transform var(--transition); }
.c-faq__item[open] summary::after { transform: rotate(45deg); }
.c-faq__answer { padding: 0 var(--s5) var(--s5); color: var(--text-muted); }
.c-faq--cols { max-width: var(--container); grid-template-columns: 1fr 1fr; }

/* --- CTA (CTA-01..03) ------------------------------------------------------- */
.c-cta { background: var(--accent-strong); color: var(--accent-contraste); border-radius: var(--radius-xl); padding: var(--space-section) var(--gutter); text-align: center; display: grid; gap: var(--s6); justify-items: center; }
.c-cta__title { color: var(--accent-contraste); }
.c-cta__lead { color: hsl(0 0% 100% / 0.85); max-width: 50ch; }
.c-cta .c-btn--primary { --_bg: #fff; --_fg: var(--accent-fonce); }
/* v4.23 : sur la variante SUR PHOTO, le bouton reprend l'accent et un texte BLANC —
   il devient identique à tous les autres boutons du site. Le bandeau plein accent
   (CTA-01) garde son bouton blanc : un bouton d'accent y disparaîtrait. */
.c-cta--photo .c-btn--primary { --_bg: var(--accent-strong); --_fg: #fff; }
.c-cta .c-btn--outline { --_bd: hsl(0 0% 100% / 0.6); --_fg: #fff; }
.c-cta--card { max-width: var(--container-narrow); margin-inline: auto; box-shadow: var(--shadow-xl); }
.c-cta--split { text-align: left; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }

/* --- NEWS (NEWS-01..02) ----------------------------------------------------- */
.c-news { display: grid; gap: var(--s5); max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.c-news__form { display: flex; gap: var(--s3); }
.c-news__form .c-input { flex: 1; }
.c-news--card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-section) var(--gutter); }

/* --- CONTACT (CONTACT-01..02) ----------------------------------------------- */
.c-contact { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gutter); align-items: start; }
.c-contact__form { display: grid; gap: var(--s4); }
.c-contact__coords { display: grid; gap: var(--s5); }
.c-contact__coord { display: flex; gap: var(--s3); align-items: flex-start; }
.c-contact__coord .c-icon { color: var(--accent-text); flex: none; margin-top: 0.2em; }
.c-contact--coords { grid-template-columns: 1fr; max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.c-contact--coords .c-contact__coord { justify-content: center; }

/* Carte Google Maps (iframe) : pleine hauteur de la colonne (repli mobile dans RESPONSIVE). */
.c-map { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* Horaires détaillés été / hiver. Le JS affiche la saison en cours ([data-season])
   + bouton de bascule ; sans JS, les deux colonnes restent visibles. */
.c-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s6); margin-top: var(--s2); }  /* v4.23 : une seule liste occupe toute la largeur ; deux listes (été/hiver) se partagent la place. Avant, une liste unique laissait une colonne vide et les horaires paraissaient tassés. */
.c-hours[data-season] { grid-template-columns: 1fr; }
.c-hours[data-season="ete"] [data-season-col="hiver"],
.c-hours[data-season="hiver"] [data-season-col="ete"] { display: none; }
.c-hours h4 {
  font-family: var(--font-sans); font-size: var(--fs-300); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--accent-text); margin-bottom: var(--s2);
}
.c-hours ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.c-hours li { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--fs-300); color: var(--text-muted); }
.c-hours__toggle {
  margin-top: var(--s2); padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--accent-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.c-hours__toggle:hover { color: var(--accent-fonce); }

/* --- FOOT (FOOT-01..04) ----------------------------------------------------- */
.c-footer { background: var(--surface-inverse); color: hsl(0 0% 100% / 0.7); padding-block: var(--s16) var(--s8); }
.c-footer a { color: hsl(0 0% 100% / 0.7); }
.c-footer a:hover { color: #fff; }
.c-footer__brand { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-600); color: #fff; }
.c-footer__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--gutter); }
.c-footer__col h3 { color: #fff; font-size: var(--fs-400); font-family: var(--font-sans); margin-bottom: var(--s4); }
.c-footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.c-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid hsl(0 0% 100% / 0.12); font-size: var(--fs-300); }
.c-footer__social { display: flex; gap: var(--s3); }
.c-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-round); background: hsl(0 0% 100% / 0.08); }
.c-footer__social a:hover { background: var(--accent); color: #fff; }
.c-footer--minimal { padding-block: var(--s8); }
.c-footer--minimal .c-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; }
.c-footer--large .c-footer__newsletter { background: hsl(0 0% 100% / 0.05); border-radius: var(--radius-lg); padding: var(--s8); margin-bottom: var(--s12); }

/* =============================================================================
   07 · PAGES — surcharges d'accent par page (re-theming)
   ============================================================================= */
.p-home    { /* accent par défaut (bleu marque) */ }
.p-services { --accent: #0ea5e9; --accent-strong: #0284c7; --accent-text: #0369a1; --accent-pale: #e0f2fe; }
.p-contact  { --accent: #16a34a; --accent-strong: #15803d; --accent-text: #15803d; --accent-pale: #dcfce7; }

/* =============================================================================
   08 · UTILITIES (mono-rôle, !important assumé)
   ============================================================================= */
.u-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.u-text-center { text-align: center !important; }
.u-text-left   { text-align: left !important; }
.u-text-muted  { color: var(--text-muted) !important; }
.u-text-accent { color: var(--accent-text) !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-6 { margin-top: var(--s6) !important; }
.u-flex-center { display: flex !important; justify-content: center !important; max-width: none !important; } /* centrage GARANTI d'un lien/bouton de fin de section — max-width:none neutralise le plafond de lisibilité des <p> (var(--measure)) qui décalait le bloc à gauche de la grille */
.u-mb-6 { margin-bottom: var(--s6) !important; }
.u-mx-auto { margin-inline: auto !important; }
.u-w-full { width: 100% !important; }
.u-measure { max-width: var(--measure) !important; }
.u-no-wrap { white-space: nowrap !important; }
.u-bg-surface { background: var(--surface) !important; }
.u-bg-pale { background: var(--accent-pale) !important; }
.u-radius-lg { border-radius: var(--radius-lg) !important; }
.u-shadow { box-shadow: var(--shadow-md) !important; }
.u-hide { display: none !important; }

/* Animations partagées */
@keyframes c-spin { to { transform: rotate(360deg); } }
@keyframes c-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes c-marquee { to { transform: translateX(-50%); } }
/* --- STATS-03 (v3.16) : bandeau de chiffres DÉFILANT — pause au survol ------ */
.c-statsmarquee { overflow: hidden; border-block: 1px solid var(--border); padding-block: var(--s4); }
.c-statsmarquee__track { display: flex; align-items: center; gap: clamp(3rem, 8vw, 6rem); width: max-content; animation: c-marquee 26s linear infinite; }
.c-statsmarquee:hover .c-statsmarquee__track,
.c-statsmarquee:focus-within .c-statsmarquee__track { animation-play-state: paused; }
.c-statsmarquee .c-stat__value { font-size: var(--fs-600); display: inline; }
.c-statsmarquee .c-stat__label { display: inline; margin-left: var(--s2); color: var(--text-muted); }
.c-statsmarquee__item { white-space: nowrap; font-family: var(--font-display); }
@media (prefers-reduced-motion: reduce) { .c-statsmarquee__track { animation: none; flex-wrap: wrap; } }

/* --- Mur des partenaires (v3.16) : mosaïque de tuiles encadrées 3 × N ------- */
.c-partnerwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.c-partnerwall__item {
  display: grid; place-items: center; gap: var(--s2); min-height: 7.5rem; padding: var(--s6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--fw-semibold); text-align: center;
  filter: grayscale(1); opacity: 0.82;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), filter var(--transition), opacity var(--transition), color var(--transition);
}
.c-partnerwall__item:hover, .c-partnerwall__item:focus-visible {
  filter: none; opacity: 1; transform: translateY(-3px);
  box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--text);
}
.c-partnerwall__mark { width: 2.4rem; height: 2.4rem; }

/* --- Section compacte (v3.16) : padding vertical réduit --------------------- */
.o-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
/* --- FEAT-07 (v3.17) : FIL D'ATOUTS DÉFILANT — les avantages circulent ------ */

/* --- FEAT-08 (v3.18) : ATOUTS EN ALTERNANCE, cartes DÉSTRUCTURÉES ----------
   Une carte par avantage, décalée gauche/droite ; le grand numéro accent
   DÉBORDE de la carte (moitié dedans, moitié dehors) + barre accent sur le
   bord extérieur. Combinable data-reveal="left|right". */
.c-featflow { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.c-featflow__item {
  position: relative; max-width: 46rem; display: grid; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--s8) var(--s8) var(--s8) calc(var(--s8) + 2.2rem);
  margin-left: 3rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.c-featflow__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.c-featflow__item::before { content: ""; position: absolute; inset-block: var(--s6); left: 0; width: 4px; border-radius: var(--radius-pill); background: var(--accent); }
.c-featflow__num {
  position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 5.2rem); line-height: 1;
  font-weight: var(--fw-bold); color: var(--accent);
}
.c-featflow__item:nth-child(even) { margin-left: auto; margin-right: 3rem; text-align: right; padding: var(--s8) calc(var(--s8) + 2.2rem) var(--s8) var(--s8); }
.c-featflow__item:nth-child(even)::before { left: auto; right: 0; }
.c-featflow__item:nth-child(even) .c-featflow__num { left: auto; right: 0; transform: translate(50%, -50%); }
.c-featflow__item h3 { font-size: var(--fs-600); }
.c-featflow__item p { color: var(--text-muted); }

/* --- Titre de section XL (v3.18) : l'en-tête s'étale sur ~60 % de l'écran --- */
.c-features__head--wide h2 { font-size: var(--fs-800); max-width: 60vw; margin-inline: auto; }
/* --- OFFERS-04 (v3.19) : SÉLECTEUR DE TARIFS — grande carte horizontale avec
   bascule « Je joue un peu / beaucoup » ; le panneau de prix change au clic.
   Fonctionne avec la mécanique .c-tabs de script.js (role="tab" + aria-controls). */
.c-offerswitch {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: clamp(2rem, 4vw, 3rem);
}
.c-offerswitch__intro { display: grid; gap: var(--s4); justify-items: start; }
.c-offerswitch__toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-pill); }
.c-offerswitch__toggle [role="tab"] { border-radius: var(--radius-pill); padding: 0.6em 1.4em; font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--text-muted); transition: background var(--transition), color var(--transition); }
.c-offerswitch__toggle [role="tab"][aria-selected="true"] { background: var(--accent-strong); color: var(--accent-contraste); box-shadow: var(--shadow-sm); }
.c-offerswitch__panel { min-height: 14rem; }
/* --- OFFERS-01 (v3.20) : la carte RECOMMANDÉE est légèrement plus grande ---- */
.c-card--pricing.c-card--featured { transform: scale(1.045); z-index: 1; }
.c-card--pricing.c-card--featured:hover { transform: scale(1.045) translateY(-6px); }

/* --- OFFERS-02 (v3.20) : tableau habillé — en-têtes généreux, libellés de
   lignes en petites capitales, respiration accrue ---------------------------- */
.c-pricetable th, .c-pricetable td { padding: var(--s5) var(--s6); }
.c-pricetable thead th { padding-block: var(--s6) var(--s4); }
.c-pricetable__plan { font-size: var(--fs-600); }
.c-pricetable tbody th[scope="row"] { font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }

/* --- OFFERS-05 (v3.20) : sélecteur en TÊTE (heures creuses / pleines) ------- */
.c-offerswitch--top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.c-offerswitch--top .c-offerswitch__intro { justify-items: center; }
.c-offerswitch--top .c-offerswitch__panel { width: 100%; max-width: 46rem; min-height: 0; text-align: left; }

/* --- OFFERS-06 (v3.20) : ONGLETS PAR SPORT — barre soulignée accent --------- */
.c-offertabs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); border-bottom: 2px solid var(--border); margin-bottom: var(--s8); }
.c-offertabs__bar [role="tab"] { padding: 0.7em 1.3em; margin-bottom: -2px; font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--text-muted); border-bottom: 3px solid transparent; transition: color var(--transition), border-color var(--transition); }
.c-offertabs__bar [role="tab"][aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.c-offertabs__panel { max-width: var(--container-narrow); margin-inline: auto; }
/* --- Flèches LATÉRALES (v3.21) : à poser sur un conteneur [data-pager] ------
   Les flèches se placent au milieu, à gauche et à droite du contenu. */
/* v4.3 : les flèches ENCADRENT le contenu — une gouttière leur est réservée de
   chaque côté, au lieu de les poser en négatif par-dessus les cartes. */
.c-pagerside { position: relative; padding-inline: calc(var(--s12) + var(--s2)); }
.c-pagerside [data-pager-prev], .c-pagerside [data-pager-next] {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  box-shadow: var(--shadow-md);
}
.c-pagerside [data-pager-prev] { left: 0; }
.c-pagerside [data-pager-next] { right: 0; }
/* --- GALLERY-02 (v3.22) : filmstrip CROISÉ — 2e ligne en sens inverse ------- */
.c-filmstrip__track.c-filmstrip__track--reverse { animation-direction: reverse; } /* v3.24 : double classe — le shorthand animation du track ne réécrase plus la direction */
.c-filmstrip__track + .c-filmstrip__track { margin-top: var(--s4); }

/* --- TEMO (v3.22) : trois dispositions, trois touches -----------------------
   base (3 col) : auteur en BAS (existant) · --duo (2 col) : photo en HAUT ·
   --solo (1 col) : citation vedette, avatar À CHEVAL sur le cadre */
.c-temo--duo .c-card--testimonial { text-align: center; }
.c-temo--duo .c-card__author { flex-direction: column; align-items: center; order: -1; }
.c-temo--solo { max-width: var(--container-narrow); margin-inline: auto; }
.c-temo--solo .c-temo__grid { grid-template-columns: 1fr; }
.c-temo--solo .c-card--testimonial { position: relative; overflow: visible; text-align: center; margin-top: 2.4rem; padding-top: calc(var(--s8) + 2.4rem); }
.c-temo--solo .c-card__quote { font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-snug); }
.c-temo--solo .c-card__author { flex-direction: column; align-items: center; }
.c-temo--solo .c-avatar--lg { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); box-shadow: var(--shadow-md); }

/* --- APP-04 (v3.22) : ORBITE — photo centrale flottante, pastilles qui
   gravitent autour (flottement doux, coupé si mouvement réduit) ------------- */
@keyframes c-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.c-appdl--orbit { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; }
.c-appdl--orbit .c-appdl__content { display: contents; }
.c-appdl--orbit .c-appdl__stage { position: relative; width: min(100%, 34rem); margin-block: var(--s6); }
.c-appdl--orbit .c-appdl__media { max-width: 15rem; margin-inline: auto; animation: c-float 6s var(--ease-in-out) infinite; }
.c-appdl--orbit .c-featpills { position: static; }
.c-appdl--orbit .c-featpills li { position: absolute; margin: 0; box-shadow: var(--shadow-md); animation: c-float 5s var(--ease-in-out) infinite; }
.c-appdl--orbit .c-featpills li:nth-child(1) { top: 6%;  left: 0;   animation-delay: 0s; }
.c-appdl--orbit .c-featpills li:nth-child(2) { top: 10%; right: 0;  animation-delay: 0.7s; }
.c-appdl--orbit .c-featpills li:nth-child(3) { top: 42%; left: -2%; animation-delay: 1.4s; }
.c-appdl--orbit .c-featpills li:nth-child(4) { top: 48%; right: -2%; animation-delay: 2.1s; }
.c-appdl--orbit .c-featpills li:nth-child(5) { bottom: 12%; left: 4%;  animation-delay: 2.8s; }
.c-appdl--orbit .c-featpills li:nth-child(6) { bottom: 6%;  right: 4%; animation-delay: 3.5s; }
@media (prefers-reduced-motion: reduce) { .c-appdl--orbit .c-appdl__media, .c-appdl--orbit .c-featpills li { animation: none; } }

/* --- TEAM (v3.22) : largeurs 1 et 2 colonnes, centrées ----------------------- */
.c-team--1 { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.c-team--2 { grid-template-columns: repeat(2, minmax(0, 20rem)); justify-content: center; }

/* --- STORY-02 (v3.22) : frise HORIZONTALE navigable (flèches → années
   suivantes, via [data-pager] + .c-pagerside) -------------------------------- */
.c-timeline--h { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); max-width: none; }
.c-timeline--h .c-timeline__item { padding-left: 0; padding-top: var(--s8); }
.c-timeline--h .c-timeline__item::before { left: 8px; right: calc(-1 * var(--gutter)); top: 8px; bottom: auto; width: auto; height: 2px; }
.c-timeline--h .c-timeline__item:last-child::before { right: 0; }
/* --- FAQ-02 (v3.23) : une question à la fois, flèches latérales ------------- */
.c-faqslide { max-width: var(--container-narrow); margin-inline: auto; padding: clamp(2rem, 4vw, 3rem); }
.c-faqslide h3 { font-size: var(--fs-600); margin-bottom: var(--s4); }
.c-faqslide p { color: var(--text-muted); }
.c-faqslide p + p { margin-top: var(--s3); }
.c-faqslide__count { font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--accent-text); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--s3); display: block; }

/* --- CTA-02 (v3.23) : bandeau sur PHOTO (voile sombre, texte blanc) --------- */
.c-cta--photo { position: relative; isolation: isolate; overflow: hidden; background: transparent; }
.c-cta--photo .c-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.c-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsl(214 40% 10% / 0.55), hsl(214 40% 10% / 0.78)); }
.c-cta--photo .c-cta__title, .c-cta--photo .c-cta__lead { color: #fff; }

/* --- CONTACT-02 (v3.23) : carte immersive — coordonnées posées SUR la map --- */
.o-section:has(> .c-contactmap) { padding-bottom: 0; } /* v3.24 : la carte colle à la section suivante */
.c-contactmap { position: relative; }
.c-contactmap .c-map { width: 100%; min-height: 30rem; display: block; }
.c-contactmap__card {
  position: absolute; top: 50%; left: var(--gutter); transform: translateY(-50%);
  width: min(24rem, calc(100% - 2 * var(--gutter)));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); padding: var(--s8);
}

/* --- FOOT-05 (v3.23) : pied de page CENTRÉ — logo, liens en ligne, réseaux -- */
.c-footer--centered { text-align: center; }
.c-footer--centered .c-footer__cols { grid-template-columns: 1fr; justify-items: center; gap: var(--s6); }
.c-footer__inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); list-style: none; padding: 0; margin: 0; }
.c-footer--centered .c-footer__social { justify-content: center; }
.c-footer--centered .c-footer__bottom { justify-content: center; gap: var(--s4); }









/* =============================================================================
   08b · FONDS DE SECTION & EFFETS (variations claires/foncées, dynamisme)
   ============================================================================= */
/* Alternance automatique des fonds (rythme visuel clair / gris doux) */
main > section:nth-child(odd):not(.o-section--dark):not(.o-section--accent):not(.o-section--surface) { background: var(--surface-2); } /* v3.12 — règle N : les rayures (--surface-2/--bg) ne valent JAMAIS la couleur des cartes (--surface) */
main > section:nth-child(even):not(.o-section--dark):not(.o-section--accent):not(.o-section--surface) { background: var(--bg); }
/* Hero : léger halo d'accent (touche premium) */
main > section.c-hero { background: radial-gradient(120% 120% at 85% -12%, var(--accent-pale), transparent 46%), var(--surface); }

/* Modifieurs de fond explicites */
.o-section--surface { background: var(--surface); }
.o-section--alt     { background: var(--surface-2); }
.o-section--accent  { background: var(--accent-pale); }
.o-section--dark    { background: var(--surface-inverse); color: hsl(0 0% 100% / 0.82); }
.o-section--dark h1, .o-section--dark h2, .o-section--dark h3, .o-section--dark h4 { color: #fff; }
.o-section--dark .u-text-muted, .o-section--dark .c-stat__label { color: hsl(0 0% 100% / 0.6); }
.o-section--dark .c-stat__value, .o-section--dark .c-card__value { color: #fff; }
.o-section--dark .c-hero__eyebrow { color: var(--accent); }

/* En-tête : ombre qui apparaît au défilement */
.c-nav.is-scrolled { box-shadow: var(--shadow-md); }

/* Apparition des sections au scroll (activée par JS si le mouvement est permis) */
/* v4.9 : la section ne se fond PLUS en bloc — sinon tous ses composants
   apparaîtraient ensemble et la cascade ne se verrait pas. La classe .is-in
   reste posée (elle déclenche les compteurs), mais sans effet visuel : chaque
   composant de la section a désormais sa propre entrée. */

/* =============================================================================
   08c · COMPOSANTS v3.1 — validés sur index-2 (Fanny Padel Club)
   ============================================================================= */

/* Hero photo plein fond : lien flèche lisible sur sombre (HERO-03 + --center). */
.c-hero--image .c-link--arrow { color: #fff; }
.c-hero--image .c-link--arrow:hover { color: #fff; opacity: 0.85; }

/* FEAT-06 · atouts en mosaïque pleine largeur : rangées 2/3 + 1/3, photo en
   filigrane (10%) révélée au survol. Repli mobile dans le bloc RESPONSIVE. */
.c-features--mosaic .c-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.c-features--mosaic .c-features__cell--wide { grid-column: span 2; }
.c-features--mosaic .c-features__cell--full { grid-column: 1 / -1; }
.c-features--mosaic .c-card { position: relative; overflow: hidden; min-height: 13rem; justify-content: flex-end; }
.c-features--mosaic .c-card__title { font-size: var(--fs-500); position: relative; z-index: 2; transition: color var(--transition); }
.c-features--mosaic .c-card__text { position: relative; z-index: 2; transition: opacity var(--transition); }
.c-features--mosaic .c-card__photo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.1; /* la photo se devine en filigrane, se révèle au survol */
  transform: scale(1.06); transition: opacity var(--transition), transform var(--transition);
}
.c-features--mosaic .c-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(180deg, rgb(10 10 12 / 0.1) 30%, rgb(10 10 12 / 0.8));
  transition: opacity var(--transition);
}
.c-features--mosaic .c-card:hover .c-card__photo,
.c-features--mosaic .c-card:focus-within .c-card__photo { opacity: 1; transform: scale(1); }
.c-features--mosaic .c-card:hover::after,
.c-features--mosaic .c-card:focus-within::after { opacity: 1; }
.c-features--mosaic .c-card:hover .c-card__title,
.c-features--mosaic .c-card:focus-within .c-card__title { color: #fff; }
.c-features--mosaic .c-card:hover .c-card__text,
.c-features--mosaic .c-card:focus-within .c-card__text { opacity: 0; }

/* Groupes de tarifs : plusieurs tableaux thématiques dans la même section
   (OFFERS-02 : location / cartes / abonnements). */
.c-pricegroup { margin-top: var(--s12); }
.c-pricegroup:first-of-type { margin-top: 0; }
.c-pricegroup__title { text-align: center; font-size: var(--fs-600); margin-bottom: var(--s5); }
/* Prix d'en-tête discrets, mention (/ an…) sur la même ligne que le prix. */
.c-pricetable__price { font-size: var(--fs-600); }
.c-pricetable__price small { display: inline; font-size: var(--fs-300); margin-left: var(--s1); }

/* GALLERY-02 · filmstrip : grandes images pleine largeur, défilement continu.
   Le track contient les images EN DOUBLE (2e série aria-hidden) pour la boucle. */
.c-filmstrip { overflow: hidden; width: 100%; }
.c-filmstrip__track { display: flex; gap: var(--s4); width: max-content; animation: c-marquee 45s linear infinite; }
.c-filmstrip:hover .c-filmstrip__track { animation-play-state: paused; }
.c-filmstrip img { height: clamp(15rem, 32vw, 24rem); width: auto; border-radius: var(--radius-lg); display: block; }
@media (prefers-reduced-motion: reduce) { .c-filmstrip__track { animation: none; } }

/* Utilitaires de mise au point éditoriale. */
.u-title-md { font-size: var(--fs-700) !important; }   /* titre de section réduit */
.u-mt-section { margin-top: var(--s16) !important; }   /* grande respiration entre deux blocs d'une section */
.c-content--split .u-title-md { margin-bottom: var(--s4); } /* air entre titre et récit */

/* =============================================================================
   08d · COMPOSANTS v3.2 — validés sur index-3 (Fanny Padel Club)
   ============================================================================= */

/* Bouton clair : le secondaire qui ressort sur un hero photo sombre. */
.c-btn--light { background: #fff; color: var(--gris-1000); border: 1px solid #fff; }
.c-btn--light:hover { background: var(--gris-100); border-color: var(--gris-100); color: var(--gris-1000); }

/* Quinconce vivant : zoom photo au survol + apparition au scroll [data-reveal].
   Scopé .has-reveal (posé par le JS) : sans JS, tout reste visible. */
.c-card--horizontal .c-card__media { overflow: hidden; }
.c-card--horizontal .c-card__media img { transition: transform var(--transition); }
.c-card--horizontal:hover .c-card__media img { transform: scale(1.05); }
/* --- La brique : un élément qui apparaît ------------------------------------- */
/* v4.12 : les blocs qui attendent leur révélation sont décalés hors cadre
   (translateX pour les apparitions latérales, rotation pour les cartes qui se
   posent). Sur un écran étroit, leur bord droit dépasse et la page se met à
   glisser horizontalement tant qu'ils ne sont pas révélés. On clippe l'axe
   horizontal du contenu : `clip` et NON `hidden`, pour ne pas créer de
   conteneur de défilement (le sticky de la nav et le tiroir mobile continuent
   de fonctionner). `.cat-main` couvre la maquette, qui n'a pas de <main>. */
main, .cat-main { overflow-x: clip; }

.has-reveal [data-reveal] {
  opacity: 0;
  transition: opacity var(--reveal-dur) var(--ease-reveal),
              transform var(--reveal-dur) var(--ease-reveal);
}
.has-reveal [data-reveal="up"]    { transform: translateY(var(--reveal-y)); }
.has-reveal [data-reveal="left"]  { transform: translateX(calc(-1 * var(--reveal-x))); }
.has-reveal [data-reveal="right"] { transform: translateX(var(--reveal-x)); }
.has-reveal [data-reveal="zoom"]  { transform: translateY(var(--reveal-y)) scale(1.05); }
.has-reveal [data-reveal="tilt"]  { transform: translateY(var(--reveal-y)) scale(0.96) rotate(var(--reveal-tilt)); }
.has-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* --- La CASCADE : les enfants d'un conteneur arrivent l'un après l'autre -----
   C'est le cœur de l'effet : chaque composant d'une section entre à son tour,
   pas la section en bloc. Les délais sont en CSS pur (nth-child) : le JS ne
   pose aucun style inline. Les enfants qui ont déjà leur propre animation
   (data-reveal, titre découpé) sont exclus pour ne pas être animés deux fois. */
.has-reveal [data-stagger] > *:not([data-reveal]):not([data-splitlines]) {
  opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease-reveal),
              transform var(--reveal-dur) var(--ease-reveal);
}
.has-reveal [data-stagger].is-visible > *:not([data-reveal]):not([data-splitlines]) {
  opacity: 1; transform: none;
}
/* --- LES PHOTOS : le mouvement qui fait tout ---------------------------------
   Une image qui se contente d'apparaître reste plate. Ici elle DÉZOOME dans
   son cadre pendant que le bloc monte : c'est ce décalage entre le cadre qui
   arrive et l'image qui se pose qui donne la sensation « moderne ». Le cadre
   masque le débordement, donc rien ne dépasse. */
.has-reveal .c-card__media,
.has-reveal .c-gallery__item,
.has-reveal .c-gallery__btn,
.has-reveal .c-hero__visual,
.has-reveal .c-appdl__media { overflow: hidden; }

.has-reveal .c-card__media > img,
.has-reveal .c-gallery__btn > img,
.has-reveal .c-hero__visual > img,
.has-reveal .c-appdl__media > img,
.has-reveal [data-stagger] > img,
.has-reveal [data-stagger] > picture {
  transform: scale(var(--reveal-zoom));
  transition: transform var(--reveal-media-dur) var(--ease-reveal);
}
.has-reveal .is-visible .c-card__media > img,
.has-reveal .is-visible .c-gallery__btn > img,
.has-reveal .is-visible .c-hero__visual > img,
.has-reveal .is-visible .c-appdl__media > img,
.has-reveal [data-stagger].is-visible > img,
.has-reveal [data-stagger].is-visible > picture,
.has-reveal [data-reveal].is-visible .c-card__media > img {
  transform: none;
}
/* Les fonds de section et les photos en filigrane ne sont JAMAIS touchés :
   ils sont positionnés en absolu, un dézoom les décadrerait. */
.has-reveal .c-cta__bg,
.has-reveal .c-bgsection__bg,
.has-reveal .c-card__photo { transform: none !important; transition: none; }

/* Le cadre lui-même arrive en montant, comme les autres composants. */
.has-reveal [data-stagger] > .c-card__media,
.has-reveal [data-stagger] > .c-hero__visual,
.has-reveal [data-stagger] > .c-appdl__media,
.has-reveal [data-stagger] > iframe {
  transform: translateY(var(--reveal-y));
}
.has-reveal [data-stagger].is-visible > *:nth-child(1)   { transition-delay: calc(0 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(2)   { transition-delay: calc(1 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(3)   { transition-delay: calc(2 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(4)   { transition-delay: calc(3 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(5)   { transition-delay: calc(4 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(6)   { transition-delay: calc(5 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(7)   { transition-delay: calc(6 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(8)   { transition-delay: calc(7 * var(--reveal-stagger)); }
.has-reveal [data-stagger].is-visible > *:nth-child(n+9) { transition-delay: calc(8 * var(--reveal-stagger)); }

/* --- L'ENTRÉE DU HÉROS ------------------------------------------------------
   Le héros est déjà à l'écran au chargement : c'est la première chose qu'on
   voit, elle doit se jouer comme une ouverture, pas apparaître d'un bloc.
   L'ordre : le surtitre, puis le titre ligne par ligne, l'accroche, les
   boutons, et la photo qui se pose. Le fond plein cadre, lui, s'ouvre sur un
   zoom arrière lent — le seul mouvement qui ne dépend pas du scroll. */
@keyframes c-hero-bg-in {
  from { transform: scale(var(--hero-bg-scale)); }
  to   { transform: scale(1); }
}
.has-reveal .c-hero--image .c-hero__bg {
  animation: c-hero-bg-in var(--hero-bg-dur) var(--ease-reveal) both;
}

/* Le titre attend que le surtitre soit lancé : sans ce décalage les deux
   partent ensemble et l'entrée perd son enchaînement. */
.has-reveal .c-hero [data-splitlines].is-visible .c-splitline:nth-child(1) > span   { transition-delay: calc(1 * var(--reveal-stagger)); }
.has-reveal .c-hero [data-splitlines].is-visible .c-splitline:nth-child(2) > span   { transition-delay: calc(2 * var(--reveal-stagger)); }
.has-reveal .c-hero [data-splitlines].is-visible .c-splitline:nth-child(3) > span   { transition-delay: calc(3 * var(--reveal-stagger)); }
.has-reveal .c-hero [data-splitlines].is-visible .c-splitline:nth-child(n+4) > span { transition-delay: calc(4 * var(--reveal-stagger)); }

/* La photo du héros se pose plus lentement et de plus loin que le reste. */
.has-reveal .c-hero__inner > .c-hero__visual {
  transform: translateY(calc(var(--reveal-y) * 1.4));
}
.has-reveal .c-hero__visual > img { transform: scale(calc(var(--reveal-zoom) + 0.04)); }

@media (prefers-reduced-motion: reduce) {
  .has-reveal .c-hero--image .c-hero__bg { animation: none; }
}

/* --- Titre révélé LIGNE PAR LIGNE -------------------------------------------
   script.js découpe le titre : chaque ligne est un masque (overflow hidden)
   dont le contenu monte depuis le bas. */
.c-splitline { display: block; overflow: hidden; }
.c-splitline > span { display: block; will-change: transform; }
.c-splitmeasure { display: inline-block; }   /* transitoire, le temps de mesurer */
.has-reveal [data-splitlines] .c-splitline > span {
  transform: translateY(105%);
  transition: transform calc(var(--reveal-dur) + 0.1s) var(--ease-reveal);
}
.has-reveal [data-splitlines].is-visible .c-splitline > span { transform: none; }
.has-reveal [data-splitlines].is-visible .c-splitline:nth-child(1) > span   { transition-delay: calc(0 * var(--reveal-stagger)); }
.has-reveal [data-splitlines].is-visible .c-splitline:nth-child(2) > span   { transition-delay: calc(1 * var(--reveal-stagger)); }
.has-reveal [data-splitlines].is-visible .c-splitline:nth-child(3) > span   { transition-delay: calc(2 * var(--reveal-stagger)); }
.has-reveal [data-splitlines].is-visible .c-splitline:nth-child(n+4) > span { transition-delay: calc(3 * var(--reveal-stagger)); }

/* =============================================================================
   LES TROIS PERSONNALITÉS D'ANIMATION (v4.14)
   -----------------------------------------------------------------------------
   Comme il existe plusieurs variantes par famille de sections, il existe
   plusieurs façons d'animer un site. On en choisit UNE par client, d'après la
   question « dynamisme » du brief, en posant la classe sur la balise <html> :

     ANIM-01 · Épurée       <html class="anim-epure">        sobre, presque rien
     ANIM-02 · Fluide       <html>  (aucune classe)          le défaut du kit
     ANIM-03 · Éclatante    <html class="anim-eclatante">    spectaculaire

   Chaque personnalité n'est qu'un jeu de tokens : le markup ne change jamais,
   et `client.css` peut toujours retoucher un token isolé par-dessus.
   ============================================================================= */

/* --- ANIM-01 · ÉPURÉE — « ça se pose » --------------------------------------
   Un FONDU SEUL : rien ne se déplace, les photos ne dézooment pas, les titres
   ne montent pas ligne par ligne. Les éléments apparaissent, point. C'est le
   caractère le plus discret possible sans supprimer toute animation. */
.anim-epure {
  --reveal-y:         0px;     /* aucun déplacement : le fondu suffit */
  --reveal-x:         0px;
  --reveal-dur:       0.4s;
  --reveal-stagger:   30ms;
  --reveal-zoom:      1;       /* les photos ne bougent pas du tout */
  --reveal-media-dur: 0.4s;
  --reveal-tilt:      0deg;
  --hero-bg-scale:    1;       /* pas d'ouverture du fond du héros */
  --hero-bg-dur:      0.4s;
}
.anim-epure.has-reveal [data-splitlines] .c-splitline > span { transform: none; transition: none; }

/* --- ANIM-03 · ÉCLATANTE — « ça se déploie » --------------------------------
   Ce qui la distingue n'est pas l'amplitude (12 px de plus, personne ne les
   voit) mais le RYTHME et la VIE DES PHOTOS :
     · la cascade passe à 200 ms — on voit les cartes arriver une par une ;
     · le dézoom des photos est franc (1,30) et DEUX FOIS plus long que le
       mouvement du bloc : l'image continue de se poser bien après que la carte
       est arrivée. C'est ce décalage qui fait le côté cinématographique ;
     · le fond du héros s'ouvre très lentement, sur 4,5 s.
   PAS de rotation généralisée : tout faire arriver de travers donne un site
   « tordu », pas un site vivant. L'inclinaison reste réservée aux blocs qui la
   demandent explicitement (data-reveal="tilt"). */
.anim-eclatante {
  --reveal-y:         64px;
  --reveal-x:         56px;
  --reveal-dur:       1.1s;
  --reveal-stagger:   200ms;   /* le vrai marqueur : la cascade se LIT */
  --reveal-zoom:      1.30;    /* dézoom franc… */
  --reveal-media-dur: 2.6s;    /* …et deux fois plus long que le bloc */
  --reveal-tilt:      -2deg;
  --hero-bg-scale:    1.18;
  --hero-bg-dur:      4.5s;
}
/* ⚠️ Toute règle de personnalité qui redéfinit un état de DÉPART doit être
   scopée `:not(.is-visible)`. Sans ça elle a le même poids que la règle de
   révélation mais s'applique plus loin dans la feuille : elle gagne, et
   l'élément reste bloqué dans sa position de départ — titres jamais affichés,
   cartes définitivement de travers. C'est le bug de la v4.14. */
.anim-eclatante.has-reveal [data-splitlines]:not(.is-visible) .c-splitline > span {
  transform: translateY(112%);
}

/* --- Jamais de contenu bloqué, jamais d'animation imposée ------------------- */
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal],
  .has-reveal [data-stagger] > *,
  .has-reveal [data-splitlines] .c-splitline > span,
  .has-reveal .c-card__media > img,
  .has-reveal .c-gallery__btn > img,
  .has-reveal .c-hero__visual > img,
  .has-reveal .c-appdl__media > img {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* OFFERS-03 · tarifs façon « menu de restaurant » : nom + pointillés + prix,
   description dessous, groupes avec titre encadré de filets. */
.c-pricemenu { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--s10); }
.c-pricemenu__title {
  text-align: center; font-size: var(--fs-600); margin-bottom: var(--s5);
  display: flex; align-items: center; gap: var(--s4);
}
.c-pricemenu__title::before, .c-pricemenu__title::after { content: ""; flex: 1; border-top: 1px solid var(--border-strong); }
.c-pricemenu__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.c-pricemenu__row { display: flex; align-items: baseline; gap: var(--s3); }
.c-pricemenu__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-500); white-space: nowrap; }
.c-pricemenu__dots { flex: 1; border-bottom: 2px dotted var(--border-strong); transform: translateY(-0.35em); }
.c-pricemenu__price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-500); color: var(--accent-text); white-space: nowrap; }
.c-pricemenu__desc { margin: var(--s1) 0 0; color: var(--text-muted); font-size: var(--fs-300); max-width: none; }
.c-pricemenu__cta { display: flex; justify-content: center; margin-top: var(--s2); }

/* Pastilles de fonctionnalités (app du club) : fond accent, arrondies. */
.c-featpills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.c-featpills li {
  background: var(--accent); color: var(--accent-contraste);
  padding: var(--s2) var(--s5); border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold); font-size: var(--fs-300);
}

/* Organigramme à branches (TEAM-02) : pôles de tailles différentes sous la présidence. */
.c-orga__branches { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--gutter); width: 100%; position: relative; }
.c-orga__branches::before {
  content: ""; position: absolute; top: calc(-1 * var(--s10)); left: 50%;
  width: 2px; height: var(--s10); background: var(--border-strong);
}
.c-orga__branch { flex: 1 1 14rem; max-width: 18rem; display: grid; gap: var(--s3); justify-items: center; }
.c-orga__branch .c-orga__label { width: auto; }
.c-orga__branch .c-card--team { width: 100%; }

/* GALLERY-03 · mur d'images : pleine largeur d'écran, bords francs, 2 lignes. */
.c-gallery--wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); width: 100%; }
.o-section:has(> .c-gallery--wall) { padding-bottom: 0; } /* v3.12 : pas de bandeau de fond sous le mur */
.c-gallery--wall .c-gallery__item { border-radius: 0; aspect-ratio: 4 / 3; margin: 0; }
.c-gallery--wall .c-gallery__item img, .c-gallery--wall .c-gallery__btn { border-radius: 0; }

/* LOGOS-02 · marquee de sponsors : logos qui défilent de droite à gauche,
   cliquables (site du sponsor), pause au survol + logo qui reprend ses couleurs.
   Le track contient les logos EN DOUBLE (2e série aria-hidden) pour la boucle. */
.c-logos--marquee .c-logos__track { align-items: center; }
.c-logos--marquee:hover .c-logos__track,
.c-logos--marquee:focus-within .c-logos__track { animation-play-state: paused; }
a.c-logos__item { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; white-space: nowrap; }
.c-logos__mark { width: 2rem; height: 2rem; flex: none; }

/* Bande sponsors : section compacte, titre centré net et bien détaché du
   défilement (les logos ne touchent jamais le titre). */
.c-sponsors { padding-block: clamp(2rem, 4vw, 3.25rem); }
.c-sponsors__title {
  text-align: center; font-size: var(--fs-600); line-height: var(--lh-snug);
  margin: 0 auto var(--s8); max-width: none;
}
.c-logos--marquee .c-logos__track { padding-block: var(--s2); }

/* Carte horizontale avec CTA (PARTNER-01) : bouton à sa taille, calé à gauche. */
.c-card--horizontal .c-card__body .c-btn { align-self: flex-start; margin-top: var(--s2); }

/* Carte-lien : toute la carte est cliquable (formules gamifiées, aperçus…).
   Survol : soulèvement + zoom photo + bordure accent — on comprend qu'on peut
   cliquer pour en savoir plus. S'utilise sur un <a class="c-card …"> entier. */
.c-card--link { cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.c-card--link:hover, .c-card--link:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.c-card--link .c-card__media img { transition: transform var(--transition); }
.c-card--link:hover .c-card__media img { transform: scale(1.05); }
.c-card--link .c-link--arrow { margin-top: var(--s2); }
/* Prix plancher des formules gamifiées (« dès 6€ », « 300€/an », « sur mesure ») :
   lisible d'un coup d'œil, sans écraser le titre. */
.c-card--link .c-card__price { font-family: var(--font-display); font-size: var(--fs-600); color: var(--accent-text); line-height: 1; }
.c-card--link .c-card__price small { font-size: var(--fs-300); font-family: var(--font-sans); color: var(--text-muted); font-weight: var(--fw-regular); }

/* Logo du club : image dans la nav (hauteur fixe) et dans le footer.
   S'il n'y a pas de fichier logo, le nom du club en texte reste le repli. */
.c-nav__logo { display: inline-flex; align-items: center; gap: var(--s2); }
/* Le logo s'affiche à HAUTEUR FIXE quelle que soit sa proportion (carré, icône,
   horizontal ou vertical) : largeur auto plafonnée, ratio toujours préservé. */
.c-nav__logo img { height: 2.25rem; width: auto; max-width: 11rem; object-fit: contain; display: block; }
.c-footer__brand { display: inline-flex; align-items: center; gap: var(--s2); }
.c-footer__brand img { height: 2.5rem; width: auto; max-width: 12rem; object-fit: contain; display: block; }

/* Icônes des réseaux sociaux (SVG inline, colorées par currentColor). */
.c-footer__social a { color: #fff; }
.c-footer__social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; display: block; }

/* =============================================================================
   09 · RESPONSIVE — un seul breakpoint
   ============================================================================= */
@media (max-width: 1023.98px) {
  /* Layout : tout repasse en 1 colonne centrée */
  .o-grid--2, .o-grid--3, .o-grid--4 { grid-template-columns: 1fr; }
  .o-split, .o-split--media { grid-template-columns: 1fr; }

  .c-hero--split .c-hero__inner,
  .c-hero--form .c-hero__inner { grid-template-columns: 1fr; gap: var(--gutter); text-align: center; }
  .c-hero--split .c-hero__actions, .c-hero--form .c-hero__actions { justify-content: center; }
  .c-hero--split .c-hero__visual, .c-hero--form .c-hero__card { order: 2; }
  .c-hero--split .c-hero__visual::before { display: none; }

  .c-features__grid,
  .c-features--bento .c-features__grid,
  .c-features--list .c-features__grid,
  .c-steps, .c-stats, .c-temo__grid, .c-pricing, .c-team,
  .c-gallery, .c-content--split, .c-faq--cols, .c-contact, .c-appdl { grid-template-columns: 1fr; }
  .c-appdl--reverse .c-appdl__media { order: 0; }
  .c-card--horizontal { flex-direction: column; }
  .c-card--horizontal .c-card__media { flex: auto; aspect-ratio: 16 / 10; }
  .c-features--bento .c-features__cell--wide,
  .c-features--bento .c-features__cell--tall { grid-column: auto; grid-row: auto; }
  .c-features--zigzag .c-features__row { grid-template-columns: 1fr; }
  .c-features--zigzag .c-features__row:nth-child(even) .c-features__media { order: 0; }
  .c-content--cols, .c-gallery--masonry { columns: 1; }

  /* Cartes atouts centrées : place pour les icônes à cheval quand tout s'empile */
  .c-features--centered .c-features__grid { row-gap: calc(var(--gutter) + 2.25rem); }

  /* Mosaïque : une colonne, plus de spans */
  .c-features--mosaic .c-features__grid { grid-template-columns: 1fr; }
  .c-features--mosaic .c-features__cell--wide,
  .c-features--mosaic .c-features__cell--full { grid-column: auto; }

  /* Carte à révélation : sur mobile le texte redevient statique sous le titre */
  .c-card--peek .c-card__reveal {
    position: static; inset: auto; z-index: auto; order: 3;
    display: block; opacity: 1; background: none; color: var(--text-muted);
    padding: 0 var(--s5) var(--s5); transition: none;
  }
  .c-card--peek .c-card__body { order: 2; }
  .c-card--peek:hover .c-card__media img { transform: none; }

  /* Bandeau stats : espacement resserré */
  .c-stats--band { gap: var(--s2) var(--s6); }

  /* Map : format bandeau sous les coordonnées */
  .c-map { height: auto; min-height: 0; aspect-ratio: 16 / 7; }

  /* Horaires : une colonne, lignes alignées à gauche */
  .c-hours { grid-template-columns: 1fr; }
  .c-hours li { text-align: left; }

  /* Hero image plein fond : tout centré sur mobile */
  .c-hero--image .c-hero__inner { justify-items: center; text-align: center; }
  .c-hero--image .c-hero__actions { justify-content: center; }

  /* Stats empilées : plus d'air entre les chiffres */
  .c-stats { gap: var(--s6); }

  /* Cartes tarifs empilées : place pour la pastille « Populaire » qui dépasse */
  .c-pricing, .o-grid:has(> .c-card--pricing) { row-gap: calc(var(--gutter) + var(--s4)); }

  /* Organigramme : les branches s'empilent, centrées */
  .c-orga__branch { flex-basis: 100%; max-width: 24rem; }

  /* Menu de tarifs : libellés/prix lisibles, descriptions à gauche */
  .c-pricemenu__name, .c-pricemenu__price { font-size: var(--fs-400); white-space: normal; }
  .c-pricemenu__desc { text-align: left; }

  /* Galerie mur : 2 colonnes */
  .c-gallery--wall { grid-template-columns: repeat(2, 1fr); }


  .c-cta--split { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .c-footer__cols { grid-template-columns: 1fr; }
  .c-news__form { flex-direction: column; }

  /* Mobile : composants centrés (préférence de marque) */
  .c-features__head, .c-content, .c-content--split > *, .c-card,
  .c-news, .c-contact, .c-contact__form, .c-temo--featured,
  .c-faq, .c-appdl__content, .c-product__body, .o-section > .o-container > .o-stack { text-align: center; }
  .o-stack, .c-card, .c-product__body { align-items: center; }
  .c-product__body .c-tag { align-self: center; }
  .c-checklist { width: fit-content; margin-inline: auto; }
  .c-checklist li { text-align: left; } /* un item sur 2 lignes reste lisible */
  .c-hero__lead { margin-inline: auto; }
  .c-temo__author, .c-card__author, .c-hero .o-cluster,
  .c-news__form, .c-faq__item summary, .c-appdl__store { justify-content: center; }
  .c-footer { text-align: center; }
  .c-footer__col ul { justify-items: center; }
  .c-footer__social, .c-footer__bottom { justify-content: center; }
  .c-timeline__item { padding-left: 0; text-align: center; }
  .c-timeline__item::before, .c-timeline__item::after { display: none; }

  /* Nav : burger + drawer mobile */
  .c-nav__burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--text); }
  .c-nav__menu {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    height: calc(100dvh - var(--header-h)); z-index: var(--z-drawer);
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s6); padding: var(--s12) var(--gutter);
    background: var(--surface); border-top: 1px solid var(--border);
    transform: translateX(100%); transition: transform var(--transition); overflow-y: auto;
  }
  .c-nav__menu[data-open="true"] { transform: translateX(0); }
  .c-nav__menu .c-nav__link { font-family: var(--font-display); font-size: var(--fs-600); color: var(--text); }
  .c-nav__menu .c-nav__link:hover, .c-nav__menu .c-nav__link[aria-current="page"] { color: var(--accent-text); }
  .c-nav__menu .c-btn { margin-top: var(--s4); min-height: 52px; padding: 0.85em 2em; font-size: var(--fs-500); }
  /* Sous-menu à plat dans le drawer mobile */
  .c-nav__dropdown > .c-nav__link::after { content: ""; }
  .c-nav__panel { position: static; transform: none; display: grid; min-width: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
  .c-nav__panel a { text-align: center; color: var(--text-muted); }
  /* NAV v3.14 — resets du drawer mobile : les trois personnalités retombent sur le burger */
  .c-nav--sep-dots .c-nav__menu > li:not(.c-nav__close-item) + li::before, .c-nav--sep-bars .c-nav__menu > li:not(.c-nav__close-item) + li::before { content: none; } /* séparateurs coupés dans le drawer */
  .c-partnerwall { grid-template-columns: repeat(2, 1fr); } /* v3.16 : mur 2 colonnes en mobile */
  /* v3.18 : atouts en mobile */
  .c-featflow__item, .c-featflow__item:nth-child(even) { margin: 0 0 0 1.6rem; text-align: left; max-width: none; padding: var(--s6) var(--s6) var(--s6) calc(var(--s6) + 1.6rem); }
  .c-featflow__item:nth-child(even)::before { left: 0; right: auto; }
  .c-featflow__item:nth-child(even) .c-featflow__num { left: 0; right: auto; transform: translate(-50%, -50%); }
  .c-featflow__num { font-size: var(--fs-700); }
  .c-features__head--wide h2 { max-width: none; }
  .c-offerswitch { grid-template-columns: 1fr; } /* v3.19 : sélecteur de tarifs empilé */
  .c-offerswitch__intro { justify-items: stretch; }
  .c-offerswitch__toggle { justify-content: center; }
  .c-card--pricing.c-card--featured { transform: none; } /* v3.20 : pas de zoom vedette en pile mobile */
  .c-card--pricing.c-card--featured:hover { transform: translateY(-6px); }
  .c-pagerside [data-pager-prev], .c-pagerside [data-pager-next] { display: none; }
  .c-pagerside { padding-inline: 0; } /* v4.3 : plus de flèches, plus de gouttière */
  .c-nav__menu .c-nav__close-item { display: block; } /* le ✕ revient dans le tiroir */ /* v3.24 : pas de flèches latérales au doigt — autoplay ou affichage complet */
  /* v3.22 : app orbite + frise horizontale + solo en mobile */
  .c-appdl--orbit .c-featpills { display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--s4); }
  .c-appdl--orbit .c-featpills li { position: static; animation: none; }
  .c-timeline--h { grid-template-columns: 1fr; }
  .c-timeline--h .c-timeline__item { padding-top: var(--s6); }
  /* v3.23 : contact immersif empilé en mobile */
  .c-contactmap__card { position: static; transform: none; width: 100%; margin-top: var(--s4); }
  .c-contactmap .c-map { min-height: 20rem; }
  .c-nav--underline .c-nav__link::before { display: none; }
  .c-nav--dark .c-nav__menu .c-nav__link { color: var(--text); }
  .c-nav--dark .c-nav__dropdown { position: relative; }
  .c-nav--dark .c-nav__panel { position: static; display: grid; grid-auto-flow: row; background: transparent; box-shadow: none; padding: 0; left: auto; right: auto; transform: none; min-width: 0; border-radius: 0; } /* v3.27 : plus de translateX résiduel — les sous-items restent à l'écran, identiques à NAV-01 */
  .c-nav--dark .c-nav__panel a { color: var(--text-muted); }
  /* v3.26 : tiroir mobile CENTRÉ et TACTILE ---------------------------------
     ✕ centré au-dessus du premier item · items en pastilles appuyables ·
     sous-menus plus petits · survol = fond + soulignement (jamais de blanc) */
  .c-nav__menu .c-nav__close {
    display: grid; place-items: center; position: static;
    width: 48px; height: 48px; border-radius: var(--radius-round);
    background: var(--surface-2); color: var(--text); font-size: 1.25rem;
    box-shadow: var(--shadow-sm); margin: var(--s4) auto var(--s2);
  }
  .c-nav__menu > li { width: 100%; text-align: center; }
  .c-nav__menu .c-nav__link {
    display: inline-block; padding: 0.4em 1.3em; border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .c-nav__menu .c-nav__link:hover,
  .c-nav__menu .c-nav__link[aria-current="page"] {
    background: var(--surface-2); color: var(--accent-text);
    text-decoration: underline; text-underline-offset: 6px;
  }
  .c-nav__menu .c-nav__link:active { background: var(--surface-2); transform: scale(0.96); }
  .c-nav__menu .c-nav__panel { justify-items: center; gap: var(--s1); }
  .c-nav__menu .c-nav__panel a {
    display: inline-block; font-size: var(--fs-500); padding: 0.35em 1.1em;
    border-radius: var(--radius-pill); text-align: center; color: var(--text-muted);
  }
  .c-nav__menu .c-nav__panel a:hover,
  .c-nav__menu .c-nav__panel a[aria-current="page"] {
    background: var(--surface-2); color: var(--text);
    text-decoration: underline; text-underline-offset: 5px;
  }
  .c-nav__menu .c-nav__panel a:active { background: var(--surface-2); transform: scale(0.96); }
  .c-nav--dark .c-nav__menu .c-nav__link:hover,
  .c-nav--dark .c-nav__menu .c-nav__panel a:hover { color: var(--accent-text); }

  .c-nav--centered .c-nav__inner { grid-template-columns: auto 1fr auto; }

  /* Équipe : les variantes de grille repassent en 1 colonne */
  .c-team--3 { grid-template-columns: 1fr; }

  /* Tableau d'offres : JAMAIS de scroll horizontal sur mobile.
     Chaque ligne devient un bloc ; les <td> portent data-label="Nom de l'offre". */
  .c-pricetable-wrap { overflow-x: visible; border: 0; box-shadow: none; }
  .c-pricetable { min-width: 0; }
  .c-pricetable, .c-pricetable thead, .c-pricetable tbody,
  .c-pricetable tr, .c-pricetable th, .c-pricetable td { display: block; width: 100%; }
  .c-pricetable thead th:first-child { display: none; }
  .c-pricetable thead th {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    margin-bottom: var(--s3); text-align: center;
  }
  .c-pricetable tbody tr {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--s3) var(--s4); margin-top: var(--s3); background: var(--surface);
  }
  .c-pricetable tbody th[scope="row"] { border: 0; padding: 0 0 var(--s2); text-align: left; }
  .c-pricetable tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
    border: 0; padding: var(--s1) 0; text-align: right;
  }
  .c-pricetable tbody td::before {
    content: attr(data-label);
    font-family: var(--font-sans); font-weight: var(--fw-medium);
    color: var(--text-muted); text-align: left;
  }
  /* v3.24 : tableau au doigt — cartes plus présentes, boutons pleine largeur */
  .c-pricetable tbody tr { padding: var(--s5); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
  .c-pricetable thead th { padding: var(--s4); box-shadow: var(--shadow-sm); }
  .c-pricetable thead .c-pricetable__col-featured { border-color: var(--accent); }
  .c-pricetable tbody td .c-btn { width: 100%; }
  .c-pricetable tbody tr:nth-child(even) td,
  .c-pricetable tbody tr:nth-child(even) th,
  .c-pricetable tbody tr:hover td,
  .c-pricetable tbody tr:hover th,
  .c-pricetable .c-pricetable__col-featured { background: transparent; }
}

/* Préférence mouvement réduit : on coupe tout */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   10 · CORRECTIFS v2 (retours terrain) — priment sur les règles ci-dessus
   ============================================================================= */
/* Titres de section plus mesurés (les héros gardent leur classe dédiée .c-hero__title) */
h2 { font-size: var(--fs-700); }
/* FAQ : réponses justifiées (desktop + mobile) */
.c-faq__answer { text-align: justify; }
/* Nav : le bouton « Réserver » est intégré au menu (dernier <li class="c-nav__cta">) :
   il s'aligne à droite en desktop et tombe dans le drawer en mobile. */
.c-nav__cta { display: flex; align-items: center; }

@media (max-width: 1023.98px) {
  /* Cartes horizontales : la variante --reverse s'empile AUSSI (photo au-dessus du texte) */
  .c-card--horizontal.c-card--reverse { flex-direction: column; }
  /* Cartes horizontales : contenu et boutons centrés sur mobile */
  .c-card--horizontal .c-card__body { text-align: center; }
  .c-card--horizontal .c-card__body .c-btn { align-self: center; }
  .c-card--horizontal .c-card__body .o-cluster { justify-content: center; }
  /* Retours terrain (v3.3) : sur mobile, les paires de boutons (email + tel) des
     blocs partenaires/CE se centrent sous le texte de la carte. */
  .c-card--horizontal .c-card__body .c-hero__actions { justify-content: center; }
  /* CTA bandeau : boutons centrés et repliables */
  .c-cta .c-hero__actions { justify-content: center; flex-wrap: wrap; }
  /* Nav mobile : logo compact — le nom du club ne pousse plus rien hors écran */
  .c-nav__logo { font-size: var(--fs-400); }
  .c-nav__logo img { height: 2rem; }
  /* Contenu éditorial étroit : titres centrés, paragraphes à gauche (lisibilité, y compris pages légales) */
  .o-container--narrow > :is(h2, h3, h4) { text-align: center; }
  /* FAQ : reste alignée à gauche (question) + réponse justifiée, jamais centrée */
  .c-faq { text-align: left; }
  .c-faq__item summary { justify-content: space-between; }
}

/* =============================================================================
   10 · NOUVELLES SECTIONS (v4.19) — d'après des références apportées par le
   propriétaire du kit. Quatre modules, entièrement pilotés par les tokens : ils
   suivent donc l'univers de chaque client, thème clair comme thème sombre.
   -----------------------------------------------------------------------------
   Ce bloc est volontairement placé en DERNIER dans la feuille : il contient sa
   propre requête mobile en fin de bloc. Ne rien insérer entre les deux.
   ============================================================================= */

/* --- SPORTS-01 · Sélecteur de discipline en tuiles ---------------------------
   Un titre, puis des tuiles CARRÉES icône + libellé. Au repos : un simple filet.
   Au survol et au focus : la tuile se remplit et le texte s'inverse.           */
.c-sportpick {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.c-sportpick__item {
  display: grid; place-content: center; justify-items: center; gap: var(--s4);
  width: clamp(9rem, 22vw, 13rem); aspect-ratio: 1 / 1;
  padding: var(--s5);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: transparent; color: var(--text);
  text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.c-sportpick__item:hover,
.c-sportpick__item:focus-visible {
  background: var(--surface); border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.c-sportpick__icon { width: clamp(3rem, 7vw, 4.5rem); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.c-sportpick__label {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-500); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; line-height: 1;
}

/* --- HERO-06 · Héros scindé par discipline -----------------------------------
   Deux (ou trois) volets plein cadre côte à côte. Au repos, chaque volet est
   voilé et porte son libellé. Au survol ou au focus, le volet s'élargit, son
   voile se lève et son bouton apparaît : on choisit sa discipline à la souris.
   Le « pivot » central porte le surtitre et le H1 de la page.                  */
.c-herosplit {
  position: relative; display: flex; isolation: isolate;
  min-height: min(78vh, 46rem);
  background: var(--surface-inverse);
}
.c-herosplit__panel {
  position: relative; flex: 1 1 0; min-width: 0;
  display: grid; align-content: center; justify-items: center; gap: var(--s6);
  padding: var(--s12) var(--gutter);
  overflow: hidden; isolation: isolate;
  transition: flex-grow var(--dur-slow) var(--ease-out);
}
/* Chaque volet décale son contenu vers l'EXTÉRIEUR : sans ça, les libellés se
   plaçaient au centre du volet, c'est-à-dire pile derrière le pivot central. */
.c-herosplit__panel:first-child { padding-right: calc(13rem + var(--gutter)); }
.c-herosplit__panel:last-child  { padding-left:  calc(13rem + var(--gutter)); }
.c-herosplit__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--reveal-media-dur) var(--ease-reveal);
}
.c-herosplit__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--accent-strong) 78%, hsl(212 60% 8%));
  opacity: 0.78; /* la photo se DEVINE au repos — un voile opaque la ferait disparaître */
  transition: opacity var(--dur-slow) var(--ease-out);
}
.c-herosplit__panel + .c-herosplit__panel { border-left: 1px solid hsl(0 0% 100% / 0.25); }
.c-herosplit__label {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1;
  letter-spacing: var(--tracking-tight); text-transform: uppercase;
  color: #fff;
}
.c-herosplit__cta {
  opacity: 0; transform: translateY(var(--s3));
  transition: opacity var(--transition), transform var(--transition);
}
/* le volet visé passe en couleur, s'élargit et sort son bouton */
.c-herosplit__panel:hover,
.c-herosplit__panel:focus-visible { flex-grow: 1.7; }
.c-herosplit__panel:hover::after,
.c-herosplit__panel:focus-visible::after { opacity: 0.18; }
.c-herosplit__panel:hover .c-herosplit__bg,
.c-herosplit__panel:focus-visible .c-herosplit__bg { transform: scale(1.05); }
.c-herosplit__panel:hover .c-herosplit__cta,
.c-herosplit__panel:focus-visible .c-herosplit__cta { opacity: 1; transform: none; }
/* le pivot central : surtitre + H1, posé à cheval sur la césure */
.c-herosplit__pivot {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(25rem, 76vw); padding: var(--s8) var(--s6);
  display: grid; gap: var(--s3); justify-items: center; text-align: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  pointer-events: none; /* ne bloque jamais le survol des volets */
}
.c-herosplit__title { font-family: var(--font-display); font-size: var(--fs-700); line-height: var(--lh-tight); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .c-herosplit__panel, .c-herosplit__bg, .c-herosplit__cta { transition: none; }
  .c-herosplit__panel:hover, .c-herosplit__panel:focus-visible { flex-grow: 1; }
  .c-herosplit__cta { opacity: 1; transform: none; }
}

/* --- GALLERY-04 · Grande photo + bande de vignettes --------------------------
   Une photo en grand, des vignettes dessous, des flèches sur les côtés.
   Piloté par script.js (data-photoset).                                        */
.c-photoset { display: grid; gap: var(--s4); }
.c-photoset__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-2); }
.c-photoset__main { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.c-photoset__prev,
.c-photoset__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  /* v4.22 : fond OPAQUE. En translucide, la flèche tombait à 3,9:1 sur la photo. */
  background: var(--surface);
}
.c-photoset__prev { left: var(--s4); }
.c-photoset__next { right: var(--s4); }
.c-photoset__thumbs {
  display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s2);
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.c-photoset__thumb {
  flex: 0 0 auto; width: clamp(5rem, 11vw, 8.5rem); padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; scroll-snap-align: start; cursor: pointer;
  opacity: 0.55; transition: opacity var(--transition), border-color var(--transition);
}
.c-photoset__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.c-photoset__thumb:hover { opacity: 0.85; }
.c-photoset__thumb[aria-selected="true"] { opacity: 1; border-color: var(--accent); }

/* --- BADGE-01 · Écusson à cheval entre deux sections -------------------------
   Un écusson circulaire posé sur la césure de deux sections : il coud les deux
   fonds et sert de respiration. À poser sur la section du BAS.                 */
.o-section--badged { position: relative; padding-top: calc(var(--space-section) + 3.5rem); }
.c-sectionbadge {
  position: absolute; z-index: 3; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(6.5rem, 13vw, 9.5rem); aspect-ratio: 1 / 1; padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-round); box-shadow: var(--shadow-lg);
}
.c-sectionbadge img { width: 100%; height: auto; }

/* --- Mobile : un seul point de rupture, comme le reste du kit --------------- */
@media (max-width: 1023.98px) {
  /* Tuiles de discipline : deux par ligne, jamais écrasées. */
  .c-sportpick__item { width: min(42vw, 11rem); }

  /* Héros scindé : les volets s'empilent, le survol n'existant pas au doigt les
     photos sont d'emblée en couleur et les boutons visibles. Le pivot reprend sa
     place dans le flux, au-dessus des volets. */
  .c-herosplit { flex-direction: column; min-height: 0; }
  .c-herosplit__panel { min-height: 16rem; padding: var(--s10) var(--gutter); }
  .c-herosplit__panel:first-child, .c-herosplit__panel:last-child { padding-inline: var(--gutter); }
  .c-herosplit__panel + .c-herosplit__panel { border-left: 0; border-top: 1px solid hsl(0 0% 100% / 0.25); }
  .c-herosplit__panel::after { opacity: 0.42; }
  .c-herosplit__cta { opacity: 1; transform: none; }
  .c-herosplit__pivot {
    position: static; transform: none; width: auto;
    margin: 0; border-radius: 0; border-inline: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--surface); pointer-events: auto;
  }

  /* Grande photo : les flèches se rapprochent, la photo se resserre. */
  .c-photoset__main { aspect-ratio: 4 / 3; }
  .c-photoset__prev { left: var(--s2); }
  .c-photoset__next { right: var(--s2); }

  /* Écusson : un peu moins de réserve au-dessus. */
  .o-section--badged { padding-top: calc(var(--space-section) + 2.5rem); }
}

/* =============================================================================
   11 · NOUVELLES SECTIONS (v4.20) — deuxième lot de références apportées par le
   propriétaire du kit. Toujours pilotées par les tokens : elles suivent
   l'univers de chaque client, thème clair comme thème sombre.
   -----------------------------------------------------------------------------
   Requête mobile propre à ce bloc en fin de bloc. Ne rien insérer entre les deux.
   ============================================================================= */

/* --- Dégradé « nappe » réutilisable ------------------------------------------
   Les références montraient de grandes cartes sombres à fond dégradé abstrait.
   On le fabrique avec les tokens du client plutôt qu'avec une image : il suit
   donc sa couleur, et il DÉRIVE très lentement pour que la carte respire.     */
.c-nappe {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background-color: var(--gris-1000);
  background-image:
    radial-gradient(80% 70% at 18% 82%, color-mix(in srgb, var(--rouge-mas, var(--accent)) 62%, transparent) 0%, transparent 62%),
    radial-gradient(70% 60% at 82% 26%, color-mix(in srgb, var(--accent) 58%, transparent) 0%, transparent 60%),
    radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--accent-strong) 42%, transparent) 0%, transparent 72%);
  background-size: 180% 180%, 170% 170%, 200% 200%;
  background-position: 20% 80%, 80% 20%, 50% 50%;
  animation: c-nappe-derive 26s var(--ease-in-out) infinite alternate;
}
.c-nappe::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, hsl(220 40% 4% / 0.35), hsl(220 40% 4% / 0.62));
}
.c-nappe > * { position: relative; z-index: 1; }
@keyframes c-nappe-derive {
  to { background-position: 34% 62%, 62% 38%, 44% 58%; }
}
@media (prefers-reduced-motion: reduce) { .c-nappe { animation: none; } }

/* --- OFFERS-07 · Formule unique + ce qui est inclus --------------------------
   À gauche la carte de l'offre (nappe + prix + bouton), à droite le détail de
   ce qu'elle contient, puis la preuve sociale (visages, étoiles, note).       */
.c-soloffer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.c-soloffer__card {
  display: grid; align-content: start; gap: var(--s4);
  min-height: 28rem; padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
}
.c-soloffer__plan { font-family: var(--font-display); font-size: var(--fs-700); line-height: var(--lh-tight); color: #fff; }
.c-soloffer__lead { color: hsl(0 0% 100% / 0.82); }
.c-soloffer__price {
  margin-top: auto; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--font-display); font-size: clamp(3rem, 7vw, 4.75rem); line-height: 1; color: #fff;
}
.c-soloffer__price small { font-family: var(--font-sans); font-size: var(--fs-500); font-weight: var(--fw-medium); color: hsl(0 0% 100% / 0.78); }
.c-soloffer__card .c-btn { justify-self: start; }
.c-soloffer__detail { display: grid; align-content: start; gap: var(--s6); }
.c-soloffer__title { font-family: var(--font-sans); font-size: var(--fs-500); font-weight: var(--fw-semibold); }
/* la liste de ce qui est inclus : coche + intitulé fort + explication */
.c-inclus { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.c-inclus li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s3) var(--s3); align-items: start; }
.c-inclus li::before { content: "\2713"; color: var(--accent-text); font-weight: var(--fw-bold); line-height: var(--lh-normal); }
.c-inclus strong { font-weight: var(--fw-semibold); }
.c-inclus span { grid-column: 2; color: var(--text-muted); font-size: var(--fs-300); }
/* la preuve sociale : visages qui se chevauchent, étoiles, note */
.c-proof { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s2); }
.c-proof__faces { display: flex; }
.c-proof__faces .c-avatar + .c-avatar { margin-left: -0.7rem; }
.c-proof__stars { color: var(--accent-text); letter-spacing: 0.12em; font-size: var(--fs-500); }
.c-proof__note { font-family: var(--font-display); font-size: var(--fs-500); }

/* --- LOGOS-03 · Éditorial + tuiles de logos en quinconce ---------------------
   À gauche le discours et les étapes numérotées, à droite les tuiles de logos
   en deux colonnes décalées, qui flottent doucement.                          */
.c-logogrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.c-logogrid__content { display: grid; gap: var(--s6); justify-items: start; }
.c-logogrid__content h2 { font-size: var(--fs-800); line-height: var(--lh-tight); }
.c-logogrid__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); }
/* la seconde colonne descend d'une demi-tuile : c'est le quinconce */
.c-logogrid__tiles > :nth-child(even) { transform: translateY(38%); }
.c-logogrid__tile {
  /* v4.21 : tuiles RÉDUITES — à 230 px de côté elles écrasaient le discours. */
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  width: 100%; max-width: clamp(4.5rem, 9vw, 6.5rem); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  animation: c-float 7s var(--ease-in-out) infinite;
  transition: transform var(--transition), box-shadow var(--transition);
}
.c-logogrid__tile:nth-child(1) { animation-delay: 0s; }
.c-logogrid__tile:nth-child(2) { animation-delay: 0.9s; }
.c-logogrid__tile:nth-child(3) { animation-delay: 1.8s; }
.c-logogrid__tile:nth-child(4) { animation-delay: 2.7s; }
.c-logogrid__tile:nth-child(5) { animation-delay: 3.6s; }
.c-logogrid__tile:nth-child(6) { animation-delay: 4.5s; }
.c-logogrid__tile:nth-child(7) { animation-delay: 5.4s; }
.c-logogrid__tile:nth-child(8) { animation-delay: 6.3s; }
.c-logogrid__tile:hover { box-shadow: var(--shadow-lg); }
.c-logogrid__tile svg, .c-logogrid__tile img { width: 60%; height: auto; }
@media (prefers-reduced-motion: reduce) { .c-logogrid__tile { animation: none; } }
/* --- LOGOS-04 · Colonnes de logos qui SE CROISENT (v4.21) --------------------
   Deux colonnes de logos qui défilent verticalement en sens inverse : celle de
   gauche monte, celle de droite descend. Chaque colonne contient ses logos EN
   DOUBLE pour que la boucle soit invisible. Les extrémités s'effacent dans un
   dégradé (masque) : les logos apparaissent et disparaissent sans bord net.
   Pause au survol, comme tous les défilements du kit.                         */
.c-logocross {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  height: clamp(20rem, 34vw, 28rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.c-logocross__col {
  display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); align-content: start;
  animation: c-logocross 26s linear infinite;
  will-change: transform;
}
.c-logocross__col--down { animation-direction: reverse; }
.c-logocross:hover .c-logocross__col,
.c-logocross:focus-within .c-logocross__col { animation-play-state: paused; }
.c-logocross__tile {
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  width: 100%; max-width: clamp(4rem, 8vw, 5.75rem); margin-inline: auto; padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.c-logocross__tile svg, .c-logocross__tile img { width: 62%; height: auto; }
@keyframes c-logocross { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* rien ne défile, et on retire le masque : aucun logo ne doit rester invisible */
  .c-logocross { height: auto; -webkit-mask-image: none; mask-image: none; }
  .c-logocross__col { animation: none; }
}

/* liste numérotée compacte : 01 · 02 · 03 */
.c-numlist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.c-numlist li { display: flex; align-items: center; gap: var(--s4); }
.c-numlist__num {
  flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
  border-radius: var(--radius-round); background: var(--surface-inverse); color: #fff;
  font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* --- STATS-04 · Carte manifeste + bento de chiffres --------------------------
   À gauche une carte-manifeste haute (nappe, icône, titre, texte, photo posée
   en médaillon), à droite quatre chiffres en bento. Les chiffres sont animés
   par script.js grâce à la classe c-stat__value.                              */
.c-manifest { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: stretch; }
.c-manifest__card {
  display: grid; align-content: start; gap: var(--s5);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
}
.c-manifest__head { display: flex; align-items: center; gap: var(--s4); }
.c-manifest__icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-round); border: 1px solid hsl(0 0% 100% / 0.4); }
.c-manifest__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: #fff; stroke-width: 1.6; }
.c-manifest__title { font-family: var(--font-display); font-size: var(--fs-700); line-height: var(--lh-tight); color: #fff; }
.c-manifest__card p { color: hsl(0 0% 100% / 0.86); }
.c-manifest__card strong { color: #fff; }
.c-manifest__inset {
  justify-self: end; margin-top: var(--s6);
  width: clamp(6rem, 11vw, 9rem); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.c-manifest__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.c-manifest__cell {
  display: grid; align-content: start; gap: var(--s2);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.c-manifest__cell .c-stat__value { font-size: var(--fs-800); }
.c-manifest__cell .c-stat__label { font-family: var(--font-sans); font-size: var(--fs-500); font-weight: var(--fw-semibold); color: var(--text); text-transform: none; letter-spacing: 0; }
.c-manifest__cell p { margin-top: var(--s5); color: var(--text-muted); font-size: var(--fs-300); }

/* --- Mobile : un seul point de rupture, comme le reste du kit --------------- */
@media (max-width: 1023.98px) {
  .c-soloffer { grid-template-columns: 1fr; }
  .c-soloffer__card { min-height: 0; }
  .c-soloffer__price { margin-top: var(--s6); }
  .c-inclus li { grid-template-columns: 1.25rem 1fr; }

  .c-logogrid { grid-template-columns: 1fr; }
  .c-logogrid__content { justify-items: center; text-align: center; }
  .c-logogrid__content h2 { font-size: var(--fs-700); }
  .c-numlist { justify-self: center; text-align: left; }
  /* pas de quinconce en mobile : la colonne décalée creusait un trou en bas */
  .c-logogrid__tiles > :nth-child(even) { transform: none; }
  /* Logos croisés : colonnes plus courtes, tuiles plus petites. */
  .c-logocross { height: clamp(16rem, 52vw, 20rem); }

  .c-manifest { grid-template-columns: 1fr; }
  .c-manifest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-manifest__inset { justify-self: center; }
}

/* =============================================================================
   12 · NOUVELLES SECTIONS (v4.22) — troisième lot de références apportées par le
   propriétaire du kit (16 captures → 14 modules). Toujours pilotées par les
   tokens : elles suivent l'univers de chaque client, clair comme sombre.
   -----------------------------------------------------------------------------
   Requête mobile propre à ce bloc en fin de bloc. Ne rien insérer entre les deux.
   ============================================================================= */

/* --- BRIQUES PARTAGÉES -------------------------------------------------------
   Trois motifs revenaient dans presque toutes les références : un en-tête
   « scindé » (gros titre à gauche, chapeau et bouton à droite), un surtitre
   précédé d'un tiret, et une checklist à coches en pastille.                  */
.c-splithead {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 5vw, 4rem); align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.c-splithead__title { font-family: var(--font-display); font-size: var(--fs-800); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.c-splithead__aside { display: grid; gap: var(--s6); justify-items: start; }
.c-splithead__aside p { color: var(--text-muted); }

.c-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-300);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent-text);
}
.c-eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: currentColor; border-radius: var(--radius-pill); }
.c-eyebrow--center { justify-content: center; }

.c-checkround { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.c-checkround li { display: flex; align-items: flex-start; gap: var(--s3); }
.c-checkround li::before {
  content: "\2713"; flex: none; display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: var(--radius-round);
  background: var(--accent-pale); color: var(--accent-text);
  font-size: var(--fs-300); font-weight: var(--fw-bold);
}

/* --- FEAT-05 · En-tête scindé + trio de cartes à grand visuel ---------------
   Le visuel occupe le haut, sans cadre de carte : le titre et le texte vivent
   dessous, à même le fond de section.                                         */
.c-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.c-showcase__item { display: grid; gap: var(--s5); align-content: start; }
.c-showcase__media { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.c-showcase__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--reveal-media-dur) var(--ease-reveal); }
.c-showcase__item:hover .c-showcase__media img { transform: scale(1.04); }
.c-showcase__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-snug); }
.c-showcase__text { color: var(--text-muted); }

/* --- FEAT-06 · Trio de cartes sombres à icône, pastille et surtitre ---------- */
.c-featdark { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.c-featdark__item {
  display: grid; gap: var(--s4); align-content: start;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface-inverse); color: hsl(0 0% 100% / 0.82);
  border: 1px solid hsl(0 0% 100% / 0.14); border-radius: var(--radius-xl);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.c-featdark__item:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-xl); }
.c-featdark__icon {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border-radius: var(--radius-md); background: hsl(0 0% 100% / 0.08);
  border: 1px solid hsl(0 0% 100% / 0.2);
}
.c-featdark__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--accent-clair, #fff); stroke-width: 1.7; }
.c-featdark__eyebrow { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-300); color: var(--accent-clair, #fff); }
.c-featdark__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-snug); color: #fff; }
.c-featdark__badge { justify-self: start; padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--accent-strong); color: var(--accent-contraste); font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold); }

/* --- FEAT-07 · Quatre cartes à icône colorée + lien ------------------------- */
.c-iconcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.c-iconcards__item {
  display: grid; gap: var(--s4); align-content: start;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.c-iconcards__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.c-iconcards__icon {
  display: grid; place-items: center; width: 3.1rem; height: 3.1rem;
  border-radius: var(--radius-md); background: var(--accent-strong); color: var(--accent-contraste);
}
.c-iconcards__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.c-iconcards__title { font-family: var(--font-display); font-size: var(--fs-500); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.c-iconcards__text { color: var(--text-muted); font-size: var(--fs-300); }
.c-iconcards__item .c-link { margin-top: auto; }

/* --- FEAT-08 · Sélecteur vertical à très grands mots ------------------------
   À gauche la liste des thèmes en très gros : celui qui est actif est net, les
   autres sont estompés. À droite le panneau illustré correspondant. Piloté par
   la mécanique d'onglets DÉJÀ présente dans script.js (role="tab").           */
.c-vertpick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.c-vertpick__list { display: grid; gap: var(--s4); align-content: center; justify-items: start; }
.c-vertpick__tab {
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  /* v4.22 : l'inactif reste LISIBLE. En --text-subtle à 0,55 d'opacité il tombait
     à 2,4:1, sous le seuil des grands textes (3:1). La hiérarchie se fait
     désormais par la couleur et la graisse, pas par l'effacement. */
  color: var(--text-muted); opacity: 0.85; font-weight: var(--fw-regular);
  transition: color var(--transition), opacity var(--transition), transform var(--transition);
}
.c-vertpick__tab:hover { opacity: 1; transform: translateX(4px); }
.c-vertpick__tab[aria-selected="true"],
.c-vertpick__tab.is-selected { color: var(--text); opacity: 1; font-weight: var(--fw-bold); }
.c-vertpick__panel { display: grid; gap: var(--s5); }
.c-vertpick__panel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.c-vertpick__title { font-family: var(--font-display); font-size: var(--fs-600); }
.c-vertpick__panel p { color: var(--text-muted); }

/* --- FAQ-03 · Titre géant à gauche, accordéon à droite ---------------------- */
.c-faqsplit { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.c-faqsplit__aside { display: grid; gap: var(--s5); align-content: start; }
.c-faqsplit__word { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.95; letter-spacing: var(--tracking-tight); }
.c-faqsplit__aside p { color: var(--text-muted); }
/* variante d'accordéon sans cadre : de simples filets, comme la référence */
.c-faq--lines .c-faq__item { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.c-faq--lines .c-faq__item:last-child { border-bottom: 1px solid var(--border); }
.c-faq--lines .c-faq__item summary { padding-inline: 0; font-family: var(--font-display); font-size: var(--fs-500); }
.c-faq--lines .c-faq__answer { padding-inline: 0; }

/* --- STATS-05 · Trois grandes cartes de chiffres ---------------------------- */
.c-statcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.c-statcards__item {
  display: grid; align-content: space-between; gap: var(--s8);
  min-height: 22rem; padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--surface-inverse); border-radius: var(--radius-xl);
  color: hsl(0 0% 100% / 0.82);
}
.c-statcards__value { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 4.75rem); line-height: 1; color: #fff; }
.c-statcards__value small { font-size: 0.45em; font-weight: var(--fw-medium); }
.c-statcards__foot { display: grid; gap: var(--s4); }
.c-statcards__label { font-family: var(--font-sans); font-weight: var(--fw-bold); color: #fff; }
.c-statcards__text { font-size: var(--fs-300); }

/* --- CONTENT-04 · Split éditorial + pile d'images superposées --------------- */
.c-stackshots { position: relative; min-height: clamp(18rem, 32vw, 26rem); }
.c-stackshots img {
  position: absolute; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  object-fit: cover; transition: transform var(--dur-slow) var(--ease-out);
}
.c-stackshots img:nth-child(1) { top: 0;    right: 0;   width: 68%; aspect-ratio: 4 / 3; z-index: 1; transform: rotate(2deg); }
.c-stackshots img:nth-child(2) { bottom: 6%; left: 0;   width: 56%; aspect-ratio: 1 / 1; z-index: 3; transform: rotate(-3deg); }
.c-stackshots img:nth-child(3) { bottom: 0;  right: 8%; width: 40%; aspect-ratio: 4 / 5; z-index: 2; transform: rotate(4deg); }
.c-stackshots:hover img:nth-child(1) { transform: rotate(1deg) translateY(-6px); }
.c-stackshots:hover img:nth-child(2) { transform: rotate(-2deg) translateY(-10px); }
.c-stackshots:hover img:nth-child(3) { transform: rotate(3deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .c-stackshots img { transition: none; } }

/* --- CONTENT-06 · Photo + carte d'accent flottante -------------------------- */
.c-figbadge { position: relative; }
.c-figbadge > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.c-figbadge__card {
  position: absolute; left: -1.5rem; bottom: 1.75rem; z-index: 2;
  display: grid; gap: var(--s1); max-width: 14rem;
  padding: var(--s5); border-radius: var(--radius-lg);
  background: var(--accent-strong); color: var(--accent-contraste);
  box-shadow: var(--shadow-xl);
}
.c-figbadge__card svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.c-figbadge__title { font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-400); }
.c-figbadge__text { font-size: var(--fs-300); opacity: 0.9; }
/* rangée d'étiquettes sous un texte éditorial */
.c-taglist { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --- GALLERY-05 · Mur de colonnes de photos, sens alternés ------------------ */
.c-photowall {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1rem);
  height: clamp(24rem, 46vw, 40rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.c-photowall__col { display: grid; gap: clamp(0.5rem, 1.5vw, 1rem); align-content: start; animation: c-logocross 34s linear infinite; will-change: transform; }
.c-photowall__col:nth-child(even) { animation-direction: reverse; }
.c-photowall__col:nth-child(3) { animation-duration: 42s; }
.c-photowall:hover .c-photowall__col,
.c-photowall:focus-within .c-photowall__col { animation-play-state: paused; }
.c-photowall__col img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) {
  .c-photowall { height: auto; -webkit-mask-image: none; mask-image: none; }
  .c-photowall__col { animation: none; }
}

/* --- GALLERY-06 · Bento photo ---------------------------------------------- */
.c-photobento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 14vw, 12rem); gap: clamp(0.75rem, 2vw, 1.25rem); }
.c-photobento img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition); }
.c-photobento img:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.c-photobento__tall { grid-row: span 2; }
.c-photobento__wide { grid-column: span 2; }
.c-photobento__big  { grid-column: span 2; grid-row: span 2; }

/* --- HERO-07 · Héros éditorial + grande capture flottante ------------------- */
.c-herowide { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.c-herowide__stage { position: relative; }
.c-herowide__shot { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
.c-herowide__float {
  position: absolute; z-index: 2; display: grid; gap: var(--s2);
  max-width: 15rem; padding: var(--s5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  animation: c-float 7s var(--ease-in-out) infinite;
}
.c-herowide__float--a { left: 4%;  bottom: 12%; }
.c-herowide__float--b { right: 4%; top: 14%; animation-delay: 1.6s; }
.c-herowide__float strong { font-family: var(--font-display); font-size: var(--fs-500); }
.c-herowide__float span { color: var(--text-muted); font-size: var(--fs-300); }
@media (prefers-reduced-motion: reduce) { .c-herowide__float { animation: none; } }

/* --- FEAT-09 · Carrousel de grandes cartes (le kit avait déjà `c-carousel`) -- */
.c-carousel--showcase > * { flex: 0 0 min(84%, 30rem); }
.c-carousel--showcase .c-showcase__media img { aspect-ratio: 16 / 10; }

/* --- Mobile : un seul point de rupture, comme le reste du kit --------------- */
@media (max-width: 1023.98px) {
  .c-splithead { grid-template-columns: 1fr; }
  .c-splithead__title { font-size: var(--fs-700); }

  .c-showcase,
  .c-featdark,
  .c-statcards { grid-template-columns: 1fr; }
  .c-iconcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-statcards__item { min-height: 0; gap: var(--s6); }

  /* Sélecteur vertical : la liste passe au-dessus, en ligne et défilante. */
  .c-vertpick { grid-template-columns: 1fr; }
  .c-vertpick__list { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s6); overflow-x: auto; padding-bottom: var(--s3); justify-items: stretch; }
  .c-vertpick__tab { font-size: var(--fs-600); white-space: nowrap; }

  .c-faqsplit { grid-template-columns: 1fr; }
  .c-faqsplit__word { font-size: clamp(2.5rem, 14vw, 4rem); }

  /* Pile d'images : on repasse en colonne, sans superposition ni rotation. */
  .c-stackshots { min-height: 0; display: grid; gap: var(--s4); }
  .c-stackshots img { position: static; width: 100%; transform: none; aspect-ratio: 4 / 3; }
  .c-stackshots:hover img { transform: none; }

  /* Carte flottante : elle rentre dans le cadre de la photo. */
  .c-figbadge__card { left: var(--s4); right: var(--s4); bottom: var(--s4); max-width: none; }

  /* Mur de photos : deux colonnes suffisent. */
  .c-photowall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: clamp(20rem, 70vw, 28rem); }

  /* Bento : deux colonnes, plus de cellule pleine largeur double. */
  .c-photobento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-photobento__big { grid-column: span 2; grid-row: span 2; }
  .c-photobento__wide { grid-column: span 2; }

  /* Héros large : les cartes flottantes reviennent dans le flux. */
  .c-herowide__float { position: static; max-width: none; animation: none; }
  .c-herowide__stage { display: grid; gap: var(--s4); }
}

/* =============================================================================
   13 · RETOURS DE REVUE DU CATALOGUE (v4.24)
   Douze correctifs et deux nouveautés, d'après la relecture complète du
   catalogue par le propriétaire du kit.
   -----------------------------------------------------------------------------
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* --- ① ARRONDIS : tout le kit d'un cran plus rond ---------------------------
   Demande : « toutes les cartes plus arrondies, et les boutons aussi ». On
   remonte les tokens : chaque composant suit, sans toucher un seul composant. */
:root {
  --radius-xs: 8px;   --radius-sm: 12px;  --radius-md: 16px;
  --radius-lg: 22px;  --radius-xl: 30px;
}

/* --- ② BOUTONS PLEINE LARGEUR : un libellé long passe à la ligne ------------
   Le kit force `white-space: nowrap` sur tous les boutons, si bien que les
   libellés longs de FORMULES-02 sortaient de leur cadre.                     */
.c-btn--block { white-space: normal; padding-inline: var(--s4); }

/* --- ③ NAV-04 · Barre TRANSPARENTE qui se fond dans le héros ----------------
   `.c-nav--transparent` existait sans être montrée ni terminée. On la complète :
   au repos aucun bandeau, la barre se fond dans le héros ; dès qu'on défile
   (classe `is-scrolled` posée par script.js) elle prend un fond translucide
   flouté, pour rester lisible au-dessus du contenu.                          */
.c-nav--transparent {
  position: absolute; inset-inline: 0; z-index: var(--z-sticky);
  background: transparent; border-bottom-color: transparent;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
}
.c-nav--transparent .c-nav__logo,
.c-nav--transparent .c-nav__link,
.c-nav--transparent .c-nav__burger { color: #fff; }
.c-nav--transparent.c-nav--sep-dots .c-nav__menu > li:not(.c-nav__close-item) + li::before { color: hsl(0 0% 100% / 0.6); }
.c-nav--transparent .c-nav__link::before { background: #fff; }
.c-nav--transparent.is-scrolled {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
.c-nav--transparent.is-scrolled .c-nav__logo,
.c-nav--transparent.is-scrolled .c-nav__link,
.c-nav--transparent.is-scrolled .c-nav__burger { color: var(--text); }
.c-nav--transparent.is-scrolled .c-nav__link::before { background: var(--accent); }
.c-nav--transparent.is-scrolled.c-nav--sep-dots .c-nav__menu > li:not(.c-nav__close-item) + li::before { color: var(--text-subtle); }

/* --- ④ HERO-07 : l'image se rapproche du texte ------------------------------ */
.c-herowide { gap: clamp(1rem, 2vw, 1.75rem); }
.c-herowide .c-splithead { margin-bottom: 0; }

/* --- ⑤ STATS-05 : le paragraphe REMONTE au survol --------------------------
   Au repos on ne voit que le chiffre et son libellé. Au survol (ou au focus
   clavier) le paragraphe monte et apparaît.                                   */
.c-statcards__item { position: relative; overflow: hidden; }
.c-statcards__text {
  max-height: 0; opacity: 0; transform: translateY(var(--s6));
  transition: max-height var(--dur-slow) var(--ease-out),
              opacity var(--transition), transform var(--dur-slow) var(--ease-out);
}
.c-statcards__item:hover .c-statcards__text,
.c-statcards__item:focus-within .c-statcards__text { max-height: 12rem; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .c-statcards__text { max-height: none; opacity: 1; transform: none; transition: none; }
}

/* --- ⑥ FEAT-08 : la variante MIROIR (panneau à gauche, mots à droite) ------- */
.c-vertpick--reverse .c-vertpick__list { order: 2; justify-items: end; text-align: right; }
.c-vertpick--reverse .c-vertpick__tab:hover { transform: translateX(-4px); }

/* --- ⑦ FEAT-09 : plus d'ascenseur, des flèches et un défilement autonome ---- */
.c-carousel { scrollbar-width: none; -ms-overflow-style: none; }
.c-carousel::-webkit-scrollbar { display: none; height: 0; }
/* ⚠️ PAS de `scroll-behavior: smooth` ici : mesuré, sur certains moteurs il fige
   complètement le défilement programmé (rien ne bouge, sans erreur). Le lissage
   est fait en JS, image par image, ce qui marche partout et se coupe sous
   prefers-reduced-motion. */

/* --- ⑧ GALLERY-04 : plus d'ascenseur sous la bande de vignettes ------------- */
.c-photoset__thumbs { scrollbar-width: none; -ms-overflow-style: none; }
.c-photoset__thumbs::-webkit-scrollbar { display: none; height: 0; }

/* --- ⑨ GALLERY-05 : le mur NE S'ARRÊTE PLUS au survol ---------------------- */
.c-photowall:hover .c-photowall__col,
.c-photowall:focus-within .c-photowall__col { animation-play-state: running; }

/* --- ⑩ OFFERS-02 : le tableau de tarifs, plus travaillé --------------------
   La colonne vedette se détache franchement et se soulève, ses boutons passent
   pleine largeur et le survol d'une ligne se voit mieux.                      */
.c-pricetable-wrap { box-shadow: var(--shadow-md); }
.c-pricetable__col-featured { position: relative; }
.c-pricetable thead .c-pricetable__col-featured {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  box-shadow: inset 0 3px 0 0 var(--accent-strong);
}
.c-pricetable td .c-btn { width: 100%; }
.c-pricetable tbody tr { transition: background var(--transition); }
.c-pricetable__plan { letter-spacing: var(--tracking-tight); }

/* --- ⑪ CONTENT-06 : la carte flottante côté MIROIR -------------------------
   En version inversée, la photo est à gauche : la carte doit déborder par la
   droite, sinon elle sort de la grille.                                       */
.c-content--reverse .c-figbadge__card { left: auto; right: -1.5rem; }

/* --- ⑫ TRANSITIONS : deux façons de plus de coudre deux sections -----------
   BADGE-02 · un bandeau de TITRE à cheval sur la césure.
   BADGE-03 · une COURBE de jonction : la section du bas mord sur celle du haut. */
.o-section--titled { position: relative; padding-top: calc(var(--space-section) + 2.5rem); }
.c-sectiontitle {
  position: absolute; z-index: 3; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s8);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  font-family: var(--font-display); font-size: var(--fs-500);
  white-space: nowrap; max-width: calc(100% - 2 * var(--gutter));
}
.c-sectiontitle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--accent-text); stroke-width: 1.8; }

.o-section--curved { position: relative; border-start-start-radius: clamp(2rem, 6vw, 5rem); border-start-end-radius: clamp(2rem, 6vw, 5rem); margin-top: calc(-1 * clamp(1.5rem, 4vw, 3.5rem)); z-index: 1; }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Chiffres : pas de survol au doigt, le paragraphe est visible d'emblée. */
  .c-statcards__text { max-height: none; opacity: 1; transform: none; }

  /* Sélecteur vertical miroir : on revient à l'ordre naturel, aligné à gauche. */
  .c-vertpick--reverse .c-vertpick__list { order: 0; justify-items: stretch; text-align: left; }

  /* Bandeau de titre à cheval : il peut passer sur deux lignes. */
  .c-sectiontitle { white-space: normal; text-align: center; }
}

/* =============================================================================
   14 · DEUXIÈME REVUE DU CATALOGUE (v4.25) — retours de Loïc, desktop ET mobile.
   ============================================================================= */

/* --- ① STATS-05 : les trois cartes ALIGNÉES entre elles --------------------
   Chiffre sur la même ligne, libellé sur la même ligne (même s'il tient sur
   deux), texte sur la même ligne. On y arrive avec une sous-grille : les cartes
   partagent les rangées de la grille parente au lieu de se caler chacune pour
   soi. Sans prise en charge de `subgrid`, on garde la mise en page actuelle.  */
@supports (grid-template-rows: subgrid) {
  .c-statcards { grid-template-rows: auto auto 1fr; }
  .c-statcards__item { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: stretch; gap: var(--s3); }
  .c-statcards__value { align-self: start; }
  .c-statcards__label { align-self: start; }
}

/* --- ② STATS-04 : la photo prend TOUTE la largeur de la carte --------------- */
.c-manifest__inset {
  justify-self: stretch; width: 100%; max-width: none;
  aspect-ratio: 16 / 9; margin-top: var(--s6);
}

/* --- ③ HERO-07 : les pastilles DÉBORDENT de la photo -----------------------
   Elles mordent sur le bord pour donner la sensation de superposition.       */
.c-herowide__float--a { left: -2.5%;  bottom: 8%;  }
.c-herowide__float--b { right: -2.5%; top: 10%;    }
.c-herowide__stage { padding-inline: 2.5%; }
.c-herowide__float { border-radius: var(--radius-xl); }

/* --- ④ NAV-04 : le menu respire, et le héros ne lui est plus collé ---------
   Le menu se colle au haut de page avec une marge courte, et le contenu du
   héros descend franchement pour laisser voir la photo entre les deux.       */
.c-nav--transparent { padding-block: var(--s2); }
/* ⚠️ L'air se met sur le CONTENU du héros, pas sur la section : ainsi le menu
   reste collé en haut de page — qu'il soit en position absolue (page réelle) ou
   dans le flux (démonstration du catalogue) — et seul le texte du héros descend
   pour laisser voir la photo entre les deux. */
.c-hero--withnav .c-hero__inner { padding-top: calc(var(--header-h) + var(--s12)); }

/* --- ⑤ SPORTS-02 · Boutons horizontaux ------------------------------------- */
.c-sportbar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }
.c-sportbar__item {
  display: inline-flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s8);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-400);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.c-sportbar__item svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.c-sportbar__item:hover, .c-sportbar__item:focus-visible {
  background: var(--accent-strong); color: var(--accent-contraste); border-color: var(--accent-strong);
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
}

/* --- ⑥ SPORTS-03 · Cartes RONDES ------------------------------------------- */
.c-sportround { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); }
.c-sportround__item { display: grid; justify-items: center; gap: var(--s4); text-align: center; }
.c-sportround__disc {
  display: grid; place-items: center;
  width: clamp(6.5rem, 14vw, 9.5rem); aspect-ratio: 1 / 1;
  border-radius: var(--radius-round);
  background: var(--surface); border: 1px solid var(--border-strong);
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.c-sportround__disc svg { width: 45%; height: auto; fill: none; stroke: var(--text); stroke-width: 1.5; transition: stroke var(--transition); }
.c-sportround__item:hover .c-sportround__disc,
.c-sportround__item:focus-visible .c-sportround__disc {
  background: var(--accent-strong); border-color: var(--accent-strong);
  transform: translateY(-5px) scale(1.04); box-shadow: var(--shadow-lg);
}
.c-sportround__item:hover .c-sportround__disc svg,
.c-sportround__item:focus-visible .c-sportround__disc svg { stroke: var(--accent-contraste); }
.c-sportround__label {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-400);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text);
}

/* --- ⑦ CONTENT-04 : les images restent SUPERPOSÉES sur mobile -------------- */
/* (traité dans la requête mobile en fin de bloc) */

/* --- Mobile : tout le lot de retours « responsive » ------------------------- */
@media (max-width: 1023.98px) {

  /* NAV-04 : le héros garde de l'air sous le menu. */
  .c-hero--withnav .c-hero__inner { padding-top: calc(var(--header-h) + var(--s8)); }

  /* HERO-07 : la capture n'est plus presque carrée, et les pastilles reviennent
     dans le flux, centrées. */
  .c-herowide__shot { aspect-ratio: 4 / 3; }
  .c-herowide__stage { padding-inline: 0; }
  .c-herowide__float { text-align: center; justify-items: center; }

  /* SPORTS-01/02/03 : nombre PAIR de tuiles → 2 colonnes ; nombre IMPAIR → 3.
     `:has()` permet de compter : si le dernier enfant est en position impaire,
     le total est impair. */
  .c-sportpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .c-sportpick:has(> :last-child:nth-child(odd)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-sportpick__item { width: 100%; max-width: 11rem; gap: var(--s3); padding: var(--s4); }
  .c-sportpick:has(> :last-child:nth-child(odd)) .c-sportpick__icon { width: clamp(2rem, 9vw, 3rem); }
  .c-sportround { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .c-sportround:has(> :last-child:nth-child(odd)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-sportround__disc { width: min(100%, 7rem); }
  .c-sportbar__item { padding: var(--s3) var(--s5); font-size: var(--fs-300); }

  /* FEAT-08 : les titres passent en COLONNE. La bande défilante horizontale
     était illisible et sortait un ascenseur. */
  .c-vertpick__list {
    grid-auto-flow: row; grid-auto-columns: auto;
    gap: var(--s3); overflow: visible; padding-bottom: 0;
    justify-items: start;
  }
  .c-vertpick__tab { font-size: clamp(1.4rem, 6vw, 2rem); white-space: normal; }

  /* LOGOS-03 : trois colonnes centrées — deux colonnes laissaient les logos
     décalés sur la gauche. */
  .c-logogrid__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .c-logogrid__tile { max-width: none; }

  /* GALLERY-06 : plus aucun trou. Toutes les cellules reprennent une taille
     normale, seule la grande reste sur deux colonnes, et la grille se remplit
     en mode dense. */
  /* Toutes les cellules reprennent la MÊME taille : avec un nombre pair de
     photos, deux colonnes se remplissent alors sans le moindre trou. Garder une
     grande cellule laissait forcément une case vide en bas. */
  .c-photobento { grid-auto-flow: dense; grid-auto-rows: clamp(7rem, 26vw, 10rem); }
  .c-photobento__tall,
  .c-photobento__wide,
  .c-photobento__big { grid-row: span 1; grid-column: span 1; }

  /* CONTENT-04 : les images restent SUPERPOSÉES et centrées, au lieu de
     s'empiler platement les unes sous les autres. */
  .c-stackshots { display: grid; justify-items: center; gap: 0; min-height: 0; }
  .c-stackshots img { position: relative; width: 78%; aspect-ratio: 4 / 3; transform: none; }
  .c-stackshots img:nth-child(1) { z-index: 1; rotate: -2deg; }
  .c-stackshots img:nth-child(2) { z-index: 3; margin-top: -14%; rotate: 2.5deg; width: 70%; }
  .c-stackshots img:nth-child(3) { z-index: 2; margin-top: -14%; rotate: -1.5deg; width: 62%; }
  .c-stackshots:hover img { transform: none; }

  /* BADGE-02 : le bandeau prend 86 % de l'écran, pour porter un vrai titre. */
  /* Le bandeau prend vraiment 86 % de l'écran : en `inline-flex` il se
     contentait de la largeur de son texte, soit moitié moins. */
  .c-sectiontitle { display: flex; justify-content: center; width: 86%; max-width: 86%; padding: var(--s4) var(--s5); font-size: var(--fs-400); }
}

/* =============================================================================
   15 · LOT EN REVUE (v4.26) — cinq modules d'après un nouveau jeu de références.
   Ils vivent pour l'instant dans `nouveautes.html` ; ils rejoindront le
   catalogue après validation.
   ============================================================================= */

/* --- GAMME-01 · Rangée de grandes cartes portrait ---------------------------
   En-tête scindé avec un lien à droite, puis une rangée de cartes hautes : la
   photo remplit la carte, le libellé se pose en bas. Au survol la photo dézoome
   et la carte se soulève.                                                     */
.c-rangehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s6); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.c-rangehead__title { font-family: var(--font-display); font-size: var(--fs-800); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.c-rangecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); }
.c-rangecards__item {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 5; border-radius: var(--radius-lg);
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.c-rangecards__item:hover, .c-rangecards__item:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.c-rangecards__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--reveal-media-dur) var(--ease-reveal); }
.c-rangecards__item:hover img { transform: scale(1.06); }
.c-rangecards__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, hsl(220 40% 6% / 0.78)); }
.c-rangecards__label {
  position: absolute; z-index: 2; inset-inline: var(--s5); bottom: var(--s5);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-400);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: #fff;   /* posé sur le dégradé sombre du bas de carte, pas sur --surface */
}

/* --- FAQ-04 · Accordéon groupé en panneau -----------------------------------
   Toutes les questions dans UN seul panneau arrondi, séparées par des filets,
   avec un chevron rond à droite qui pivote à l'ouverture.                     */
.c-faqpanel {
  max-width: var(--container-narrow); margin-inline: auto;
  padding: var(--s6) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--surface-2); border-radius: var(--radius-xl);
}
.c-faqpanel .c-faq__item { background: none; border: 0; border-radius: 0; }
.c-faqpanel .c-faq__item + .c-faq__item { border-top: 1px solid var(--border); }
.c-faqpanel .c-faq__item summary {
  padding: var(--s5) 0; font-family: var(--font-display); font-size: var(--fs-400);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.c-faqpanel .c-faq__item summary::after {
  content: "";
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-round);
  background: var(--border) center / 0.8rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform var(--transition);
}
.c-faqpanel .c-faq__item[open] summary::after { transform: rotate(180deg); }
.c-faqpanel .c-faq__answer { padding: 0 0 var(--s5); }

/* --- FEAT-10 · Duo de grandes cartes ---------------------------------------- */
.c-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.c-duo__item {
  display: grid; align-content: start; gap: var(--s5);
  padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem) 0;
  background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); overflow: hidden; text-align: center;
}
.c-duo__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-snug); }
.c-duo__item p { color: var(--text-muted); max-width: 34ch; margin-inline: auto; }
.c-duo__item .c-link { justify-self: center; }
.c-duo__media { margin-top: auto; padding-top: var(--s8); }
.c-duo__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); }

/* --- FEAT-11 · Cartes à bouton « + » qui ouvre un panneau -------------------
   Un carrousel de cartes hautes et colorées. Le bouton « + » ouvre un panneau
   détaillé, qui porte lui-même des flèches vers la carte précédente/suivante. */
.c-pluscards { display: flex; gap: clamp(0.75rem, 2vw, 1.25rem); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s2); }
.c-pluscards::-webkit-scrollbar { display: none; }
.c-pluscards > * { flex: 0 0 min(74%, 19rem); }
.c-pluscard {
  position: relative; display: grid; align-content: start; gap: var(--s3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius-xl); background: var(--surface-2);
}
.c-pluscard--a { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.c-pluscard--b { background: color-mix(in srgb, var(--accent-strong) 82%, var(--gris-1000)); color: #fff; }
/* les titres du kit portent `color: var(--text)` : sur la carte foncée il faut le
   redire, sinon on écrit du bleu nuit sur du bleu nuit. */
.c-pluscard--b .c-pluscard__title { color: #fff; }
.c-pluscard--b .c-pluscard__eyebrow { opacity: 1; color: hsl(0 0% 100% / 0.82); }
.c-pluscard--c { background: var(--surface-2); }
.c-pluscard--d { background: color-mix(in srgb, var(--rouge-mas, var(--accent)) 24%, var(--surface)); }
.c-pluscard__eyebrow { font-family: var(--font-sans); font-size: var(--fs-300); color: inherit; opacity: 0.75; }
.c-pluscard__title { font-family: var(--font-display); font-size: var(--fs-500); line-height: var(--lh-snug); }
.c-pluscard__media { margin-top: auto; }
.c-pluscard__media img { width: 100%; border-radius: var(--radius-md); }
.c-pluscard__more {
  position: absolute; z-index: 2; right: var(--s5); bottom: var(--s5);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: var(--radius-round);
  background: var(--surface-inverse); color: #fff;
  font-size: var(--fs-500); line-height: 1; cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}
.c-pluscard__more:hover, .c-pluscard__more:focus-visible { transform: scale(1.12); background: var(--accent-strong); }
.c-pluscard__detail { display: none; }
/* le panneau détaillé */
.c-pluspanel {
  width: min(52rem, 92vw); max-height: 88vh; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-xl); overflow: auto;
}
.c-pluspanel::backdrop { background: hsl(220 30% 8% / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c-pluspanel__close {
  position: absolute; top: var(--s5); right: var(--s5);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: var(--radius-round);
  background: var(--surface-inverse); color: #fff; cursor: pointer;
}
.c-pluspanel__title { font-family: var(--font-display); font-size: var(--fs-700); margin-bottom: var(--s5); padding-right: var(--s10); }
/* le panneau reprend le surtitre de la carte, au-dessus du titre */
.c-pluspanel__eyebrow { margin-bottom: var(--s3); }
.c-pluspanel__body { display: grid; gap: var(--s4); }
.c-pluspanel__body p { color: var(--text-muted); }
.c-pluspanel__nav { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--border); }
.c-pluspanel__step { display: flex; align-items: center; gap: var(--s3); background: none; border: 0; cursor: pointer; color: var(--text); text-align: left; font: inherit; }
.c-pluspanel__step[hidden] { display: none; }
.c-pluspanel__step span:first-child {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--radius-round); background: var(--surface-inverse); color: #fff;
}
.c-pluspanel__step:last-child { flex-direction: row-reverse; text-align: right; }

/* --- STORY-03 · Diaporama « prompteur » ------------------------------------
   Le texte de la diapositive se dévoile mot à mot, à vitesse de lecture, puis
   on passe à la suivante. Pastilles de position et bouton pause.             */
.c-promptdeck { display: grid; gap: var(--s6); justify-items: center; }
.c-promptdeck__stage { position: relative; width: 100%; }
.c-promptslide {
  display: grid; align-content: center; justify-items: center; gap: var(--s6);
  min-height: clamp(20rem, 42vw, 32rem); padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-xl); background: var(--surface-inverse); color: #fff;
  text-align: center;
}
.c-promptslide[hidden] { display: none; }
.c-promptslide__visuel { display: grid; place-items: center; }
.c-promptslide__visuel svg { width: clamp(6rem, 16vw, 11rem); height: auto; }
.c-promptslide__texte { max-width: 46ch; font-size: var(--fs-500); line-height: var(--lh-normal); }
.c-promptslide__texte strong { color: #fff; }
.c-promptslide__texte .c-mot { opacity: 0.18; transition: opacity 240ms var(--ease-out); }
.c-promptslide__texte .c-mot.est-lu { opacity: 1; }
.c-promptdeck__barre { display: flex; align-items: center; gap: var(--s4); }
.c-promptdeck__points { display: flex; gap: var(--s3); }
.c-promptdeck__point {
  width: 0.55rem; height: 0.55rem; padding: 0; border: 0; border-radius: var(--radius-round);
  background: var(--border-strong); cursor: pointer; transition: width var(--transition), background var(--transition);
}
.c-promptdeck__point[aria-current="true"] { width: 1.75rem; border-radius: var(--radius-pill); background: var(--accent-strong); }
.c-promptdeck__pause {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-round);
  background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--fs-300);
}
@media (prefers-reduced-motion: reduce) {
  .c-promptslide__texte .c-mot { opacity: 1; transition: none; }
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .c-rangehead__title { font-size: var(--fs-700); }
  .c-rangecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-duo { grid-template-columns: 1fr; }
  .c-pluscards > * { flex: 0 0 min(82%, 17rem); }
  .c-pluspanel { width: 94vw; }
  .c-pluspanel__nav { flex-direction: column; }
  .c-pluspanel__step:last-child { flex-direction: row; text-align: left; }
  .c-promptslide { min-height: 0; }
  .c-promptslide__texte { font-size: var(--fs-400); }
}

/* =============================================================================
   16 · RETOURS SUR LE LOT EN REVUE (v4.27)
   Sept demandes de Loïc sur les cinq modules de la v4.26.
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* --- ① GAMME-01 · une SEULE ligne, qui déborde et défile lentement -----------
   Les cartes ne passent jamais à la ligne : elles sortent par la droite et la
   bande glisse vers la gauche « à deux à l'heure » (90 s pour un tour complet).
   La liste est écrite deux fois : la seconde moitié, muette pour les lecteurs
   d'écran, prend le relais pile au moment où la première sort du cadre, donc
   la boucle ne se voit pas. On décale d'un demi-écart en plus de la moitié de
   la piste, sinon la jointure sauterait d'un demi-espace.                     */
.c-rangeline { --rl-gap: clamp(0.75rem, 2vw, 1.25rem); overflow: hidden; }
.c-rangeline__track {
  display: flex; gap: var(--rl-gap); width: max-content;
  animation: c-rangeline-defile 90s linear infinite;
}
.c-rangeline__track > * { flex: 0 0 clamp(10rem, 14vw, 14rem); }
@keyframes c-rangeline-defile { to { transform: translateX(calc(-50% - var(--rl-gap) / 2)); } }
/* Sous « animations réduites » rien ne bouge tout seul : la bande devient un
   simple défilement à la main, sinon le contenu serait hors d'atteinte. */
@media (prefers-reduced-motion: reduce) {
  .c-rangeline { overflow-x: auto; scrollbar-width: thin; }
  .c-rangeline__track { animation: none; }
}

/* --- ② FAQ-04 · une seule question ouverte à la fois -------------------------
   Comportement piloté par script.js (`data-faq-solo`) : ouvrir une question
   referme les autres.                                                        */

/* --- ③ FEAT-10 · une photo dans CHAQUE carte, et deux mises en page ----------
   Le défaut corrigé : une carte sans photo n'avait plus de marge en bas, parce
   que le bas de carte était mis à zéro pour laisser la photo mordre le bord.
   Désormais le zéro n'est posé QUE sur les cartes qui portent une photo en bas.

   Deux modificateurs, à choisir selon la longueur du texte :
   · `--media-bas`  : photo collée au bas de la carte  → textes COURTS.
   · `--media-haut` : photo collée en haut de la carte → textes LONGS, qui ont
     alors toute la hauteur restante sous l'image sans étirer la carte.
   Ils se mélangent librement : en 2 × 2, une rangée de chaque tient debout,
   les photos d'une même rangée restant alignées entre elles.                  */
.c-duo__item { padding-bottom: clamp(1.75rem, 3vw, 3rem); }
.c-duo--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-duo__item--media-bas { padding-bottom: 0; }
.c-duo__item--media-haut { padding-top: 0; }
.c-duo__item--media-haut .c-duo__media {
  order: -1; margin-top: 0; margin-bottom: var(--s2); padding-top: 0;
  margin-inline: calc(-1 * clamp(1.5rem, 3vw, 3rem));
}
.c-duo__item--media-haut .c-duo__media img {
  aspect-ratio: 16 / 7;
  border-start-start-radius: 0; border-start-end-radius: 0;
}
.c-duo__item--media-bas .c-duo__media { margin-inline: calc(-1 * clamp(1.5rem, 3vw, 3rem)); }
.c-duo__item--media-bas .c-duo__media img { border-radius: 0; }

/* --- ④ FEAT-11 · la bande touche le bord de l'écran, et des flèches ----------
   Les cartes sortent du conteneur par la droite : on annule la gouttière de ce
   côté pour que la dernière carte visible soit coupée par le bord de l'écran —
   c'est ce qui dit au visiteur « il y en a d'autres ». Les flèches deviennent
   donc indispensables : sans elles, rien n'indique comment aller les chercher. */
.c-pluscards-wrap { position: relative; }
.c-pluscards {
  /* La bande sort du conteneur jusqu'au bord de l'écran : `50% - 50vw` vaut
     exactement la moitié de la marge restante à droite du conteneur, quelle que
     soit la largeur d'écran — la dernière carte visible est donc coupée par le
     bord, et non par une gouttière. Le garde-fou `overflow-x` du kit absorbe le
     débordement, il ne sort aucun ascenseur de page. */
  margin-right: calc(50% - 50vw);
  scroll-snap-type: x proximity;
}
.c-pluscards > * { scroll-snap-align: start; }
.c-pluscards-wrap .c-arrows { justify-content: flex-start; }
/* toute la carte est cliquable, pas seulement le « + » */
.c-pluscard { cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); }
.c-pluscard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.c-pluscard:hover .c-pluscard__more { transform: scale(1.12); background: var(--accent-strong); }

/* --- ⑤ Le panneau s'ouvre au MILIEU de l'écran, et le vide le referme --------
   Un <dialog> modal se centre tout seul… sauf si une règle du kit lui impose un
   placement. On le redit ici noir sur blanc. La fermeture au clic dans le vide
   est gérée par script.js (comparaison du clic au cadre du panneau).          */
.c-pluspanel {
  position: fixed; inset: 0; margin: auto;
  max-height: min(88vh, 52rem);
}
.c-pluspanel__body .c-checklist { gap: var(--s3); }
.c-pluspanel__body .c-checklist li { color: var(--text); }
.c-checklist--vert li::before { content: "\2714"; color: var(--success-fonce); }
/* mesuré : le vert clair du kit ne donne que 3,3:1 sur fond blanc — le vert
   foncé passe la barre des 4,5:1, la coche reste verte et devient lisible. */
.c-pluspanel__body .c-compare { min-width: 0; }
.c-pluspanel__body .c-compare th, .c-pluspanel__body .c-compare td { padding: var(--s3) var(--s4); }
.c-pluspanel__soustitre {
  margin-top: var(--s4);
  font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted);
}

/* --- ⑥ STORY-03 · lecture RALENTIE ------------------------------------------
   Le surlignage allait trois fois trop vite. La cadence est un attribut
   (`data-prompt-mot`), la valeur par défaut du script passe de 95 à 280 ms par
   mot — soit environ 210 mots par minute, le rythme d'une lecture à voix haute
   posée.                                                                      */

/* --- ⑦ STORY-04 · le prompteur sur une PHOTO de fond ------------------------
   Même mécanique, autre décor : la photo occupe la diapositive, un voile sombre
   garantit la lisibilité du texte, et le texte passe en gros titre puisqu'il n'a
   plus d'icône à côté de lui.                                                 */
.c-promptslide--photo { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); }
.c-promptslide__fond { position: absolute; inset: 0; z-index: 0; }
.c-promptslide__fond img { width: 100%; height: 100%; object-fit: cover; }
.c-promptslide__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(220 45% 6% / 0.62), hsl(220 45% 6% / 0.82));
}
.c-promptslide--photo > *:not(.c-promptslide__fond) { position: relative; z-index: 1; }
.c-promptslide--photo .c-promptslide__texte {
  max-width: 30ch;
  font-family: var(--font-display); font-size: var(--fs-700); line-height: var(--lh-snug);
}
.c-promptslide--photo .c-promptslide__texte .c-mot { opacity: 0.26; }
.c-promptslide--photo .c-promptslide__texte .c-mot.est-lu { opacity: 1; }
.c-promptslide__signature {
  font-family: var(--font-sans); font-size: var(--fs-300);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: hsl(0 0% 100% / 0.78);
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {

  /* GAMME-01 : on garde la MOSAÏQUE validée — deux colonnes, rien qui bouge.
     Les cartes en double n'ont plus lieu d'être, on les retire de l'affichage. */
  .c-rangeline { overflow: visible; }
  .c-rangeline__track {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rl-gap); width: auto; animation: none;
  }
  .c-rangeline__track > * { flex: none; }
  .c-rangeline__track > .is-clone { display: none; }

  /* FEAT-10 : une colonne, et la photo garde une hauteur raisonnable. */
  .c-duo--quatre { grid-template-columns: 1fr; }
  .c-duo__item--media-haut .c-duo__media img { aspect-ratio: 16 / 9; }

  /* FEAT-11 : la bande touche le bord de l'écran, et les flèches restent
     visibles — au doigt on peut faire glisser, mais rien ne le dit. */
  .c-pluscards-wrap .c-arrows { justify-content: center; }

  /* Le panneau devient une feuille qui monte du bas : sur un téléphone, une
     boîte centrée laisse deux bandes de vide inutiles et le pouce est loin. */
  .c-pluspanel {
    inset: auto 0 0; margin: 0; width: 100%; max-width: none;
    max-height: 90vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--s8) var(--s5) var(--s6);
  }
  .c-pluspanel__title { font-size: var(--fs-600); padding-right: var(--s8); }
  .c-pluspanel__nav { flex-direction: column; }
  .c-pluspanel__step:last-child { flex-direction: row; text-align: left; }

  /* STORY-04 : le texte reste un titre, mais à l'échelle du téléphone. */
  .c-promptslide--photo .c-promptslide__texte { font-size: var(--fs-500); max-width: none; }
  .c-promptslide--photo { min-height: 22rem; }
}

/* =============================================================================
   17 · FEAT-10 REPRIS À ZÉRO (v4.28)
   Deux retours : un bandeau de vide restait au bas des cartes courtes, et la
   grille ne montrait pas les quatre cas de figure. Réponse à « s'il y a plus de
   texte, que fait la photo ? » : c'est ELLE qui absorbe la différence. Elle
   s'amincit ou s'élargit, mais elle ne pousse jamais la carte et ne laisse
   jamais de vide. Deux cartes d'une même rangée finissent donc à la même
   hauteur, avec des photos de hauteurs différentes.
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* La carte passe en colonne flexible : en grille, `margin-top: auto` ne récupère
   pas l'espace restant quand le contenu est calé en haut — c'était l'origine du
   bandeau au bas des cartes les moins remplies. */
.c-duo__item {
  display: flex; flex-direction: column; align-content: initial;
  gap: var(--s5);
}
.c-duo__item > * { flex: none; }

/* La photo prend tout ce qui reste, avec un minimum garanti : plus le texte est
   long, plus elle s'amincit, sans jamais disparaître ni déborder. */
.c-duo__media {
  /* ⚠️ base à zéro, pas `auto` : avec `auto`, la photo part de sa hauteur
     naturelle (une image carrée de 1600 px imposait une carte de 1004 px de
     haut). À zéro, elle part du minimum garanti et ne prend QUE l'espace
     laissé par le texte. */
  flex: 1 1 0; min-height: clamp(8rem, 14vw, 12rem);
  margin-top: auto; padding-top: var(--s6);
  margin-inline: calc(-1 * clamp(1.5rem, 3vw, 3rem));
}
.c-duo__media img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  border-radius: 0;
}
/* Photo en haut : elle occupe la même place, à l'autre bout de la carte. */
.c-duo__item--media-haut .c-duo__media { order: -1; margin-top: 0; margin-bottom: auto; padding-top: 0; }
.c-duo__item--media-haut .c-duo__title { margin-top: var(--s2); }

/* Les textes ne s'étirent pas : ils gardent leur place, la photo fait le reste. */
.c-duo__item p { margin-inline: auto; }
.c-duo__item .c-link { justify-self: initial; align-self: center; }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Une seule colonne : les cartes ne se comparent plus deux à deux, la photo
     reprend une hauteur fixe et lisible plutôt que d'absorber du vide. */
  .c-duo__media { flex: none; min-height: 0; }
  .c-duo__media img { aspect-ratio: 16 / 9; height: auto; }
}

/* Étiquette de démonstration : elle nomme le cas de figure sur chaque carte du
   catalogue. Inutile sur un site client — on la retire à ce moment-là. */
.c-duo__cas {
  align-self: center; margin-bottom: var(--s2);
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--accent-text);
}

/* =============================================================================
   18 · FEAT-10, LA BONNE RÈGLE (v4.29)
   Reformulation du besoin, après un aller-retour de trop : la photo ne rétrécit
   PAS pour faire de la place au texte. Il n'y a que deux façons de poser une
   photo — en bas ou en haut — et au-delà d'une certaine quantité de texte, la
   carte se passe simplement de photo. C'est le texte qui remplit la carte.
   Trois cartes possibles, donc : photo en bas, photo en haut, sans photo.
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* La photo garde une hauteur nette, la même dans toute une rangée : elle ne
   s'étire plus pour combler le vide, et elle ne s'amincit plus quand le texte
   s'allonge. C'est le vide qui a disparu, pas la photo qui s'adapte. */
.c-duo__media { flex: none; min-height: 0; }
.c-duo__media img { aspect-ratio: 16 / 10; height: auto; }

/* Photo en bas : elle est le dernier élément et touche le bord — le `auto` sur
   le HAUT de la photo pousse tout l'espace restant au-dessus d'elle, jamais en
   dessous. C'est ce qui supprime le bandeau blanc. */
.c-duo__item--media-bas .c-duo__media { margin-top: auto; margin-bottom: 0; }
/* Photo en haut : le miroir exact. Le vide se met sous le texte, pas sous la
   photo, et le texte reste collé à son image. */
.c-duo__item--media-haut .c-duo__media { margin-top: 0; margin-bottom: 0; }
.c-duo__item--media-haut > *:last-child { margin-bottom: auto; }

/* Sans photo : la carte est pleine de texte, qui se centre dans la hauteur que
   sa voisine impose. Le `:has()` rattrape aussi les cartes où l'on aurait
   simplement oublié le modificateur. */
.c-duo__item--sans-photo,
.c-duo__item:not(:has(.c-duo__media)) { justify-content: center; }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Une seule colonne : plus de hauteur imposée par une voisine, donc rien à
     centrer — le texte reprend le haut de la carte. */
  .c-duo__item--sans-photo,
  .c-duo__item:not(:has(.c-duo__media)) { justify-content: flex-start; }
  .c-duo__media img { aspect-ratio: 16 / 9; }
}

/* =============================================================================
   19 · SIX SECTIONS D'APRÈS UN NOUVEAU JEU DE RÉFÉRENCES (v4.30)
   FEAT-12 · APP-05 · CONTENT-08 · CONTENT-09 · FACIL-06 · STATS-06 · CONTENT-10
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* --- FEAT-12 · Carrousel de valeurs à icônes --------------------------------
   Cartes claires à icône filaire, titre, texte et lien, qui défilent en une
   bande coupée par le bord de l'écran. Les flèches sont en BAS À DROITE, sous la
   bande : la lecture va de gauche à droite, la commande est au bout du geste.  */
.c-valuecards-wrap { position: relative; }
.c-valuecards {
  display: flex; gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin-right: calc(50% - 50vw); padding-right: var(--gutter); padding-bottom: var(--s2);
}
.c-valuecards::-webkit-scrollbar { display: none; }
.c-valuecards > * { flex: 0 0 min(78%, 20rem); scroll-snap-align: start; }
.c-valuecard {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface-2); border-radius: var(--radius-lg);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.c-valuecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.c-valuecard__icon { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--text); stroke-width: 1.4; }
.c-valuecard__title { font-family: var(--font-display); font-size: var(--fs-500); line-height: var(--lh-snug); }
.c-valuecard__text { color: var(--text-muted); }
.c-valuecard .c-link { margin-top: auto; align-self: flex-start; }
.c-valuecards-wrap .c-arrows { justify-content: flex-end; }

/* --- APP-05 · Titre empilé + éventail de téléphones -------------------------
   Le titre s'empile en trois mots, dont un CREUX (lettres évidées) : c'est ce
   contraste plein / creux qui donne le côté sportif. À droite, trois captures
   d'écran en éventail, celle du milieu devant, avec une respiration lente.    */
.c-appfan { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.c-appfan__title {
  font-family: var(--font-display); font-weight: var(--fw-black, 900);
  font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 0.92;
  letter-spacing: var(--tracking-tight); text-transform: uppercase;
  margin-bottom: var(--s6);
}
.c-appfan__title > span { display: block; }
.c-appfan__mot--accent { color: var(--accent-strong); }
.c-appfan__mot--creux {
  color: transparent; -webkit-text-stroke: 2px var(--text); text-stroke: 2px var(--text);
}
.c-appfan__text { color: var(--text-muted); max-width: 44ch; margin-bottom: var(--s8); }
.c-appfan__stores { display: flex; flex-wrap: wrap; gap: var(--s4); }
.c-appfan__stage { position: relative; min-height: clamp(22rem, 40vw, 34rem); }
.c-appfan__phone {
  position: absolute; top: 50%; left: 50%;
  width: clamp(11rem, 20vw, 17rem); border-radius: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden; background: var(--gris-1000, #0b1017);
  border: 6px solid var(--gris-1000, #0b1017); box-shadow: var(--shadow-xl);
}
.c-appfan__phone img { display: block; width: 100%; }
.c-appfan__phone--a { transform: translate(-88%, -50%) rotate(-9deg); z-index: 1; }
.c-appfan__phone--b { transform: translate(-50%, -52%); z-index: 3; }
.c-appfan__phone--c { transform: translate(-12%, -50%) rotate(9deg); z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .c-appfan__phone--b { animation: c-appfan-souffle 7s var(--ease-in-out, ease-in-out) infinite; }
}
@keyframes c-appfan-souffle {
  0%, 100% { transform: translate(-50%, -52%); }
  50%      { transform: translate(-50%, -57%); }
}

/* --- CONTENT-08 · Texte long + deux photos décalées -------------------------
   Deux photos carrées qui se chevauchent en diagonale, la seconde plus basse et
   plus à droite. Le texte long tient la colonne de gauche, aéré.              */
.c-longread { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.c-longread__title { font-family: var(--font-display); font-size: var(--fs-800); line-height: var(--lh-tight); margin-bottom: var(--s8); }
.c-longread__body { display: grid; gap: var(--s6); color: var(--text-muted); }
.c-longread__body p { max-width: 46ch; }
.c-offsetshots { position: relative; padding-bottom: 22%; }
.c-offsetshots img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }
.c-offsetshots__a { width: 68%; aspect-ratio: 1 / 1; object-fit: cover; }
.c-offsetshots__b {
  position: absolute; right: 0; bottom: 0;
  width: 54%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 6px solid var(--surface);
}

/* --- CONTENT-09 · Texte + photo à élément flottant --------------------------
   La photo porte un élément qui DÉBORDE : c'est là qu'on vient poser une
   animation de la famille ANIM (voir la catégorie ANIMATIONS).                */
.c-floatside { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.c-floatside__media { position: relative; }
.c-floatside__media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }

/* --- FACIL-06 · Trois cartes numérotées ------------------------------------
   Le numéro est CERCLÉ, discret : c'est le titre qui porte l'étape, pas un gros
   chiffre décoratif.                                                          */
.c-numcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.c-numcards__item {
  display: grid; align-content: start; gap: var(--s4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface-2); border-radius: var(--radius-lg);
}
.c-numcards__num {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-round);
  font-family: var(--font-sans); font-size: var(--fs-300); color: var(--text);
}
.c-numcards__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-snug); }
.c-numcards__text { color: var(--text-muted); }

/* --- STATS-06 · Cartes photo à chiffre incrusté -----------------------------
   Le chiffre est POSÉ sur la photo, et une pastille de détail se glisse en bas
   de carte. La carte du milieu est un cran plus haute : elle attire l'œil sans
   qu'on ait besoin d'une couleur en plus.                                     */
.c-amountcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: center; }
.c-amountcards__item {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); background: var(--surface-2);
}
.c-amountcards__item--vedette { aspect-ratio: 3 / 4.5; }
.c-amountcards__item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-amountcards__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(220 40% 6% / 0.32) 0 40%, hsl(220 40% 6% / 0.72));
}
.c-amountcards__value {
  position: absolute; z-index: 2; inset-inline: 0; top: 46%;
  transform: translateY(-50%); text-align: center;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); color: #fff;
}
.c-amountcards__legende {
  position: absolute; z-index: 2; inset-inline: 0; top: 46%;
  margin-top: 1.4em; text-align: center;
  font-size: var(--fs-300); color: hsl(0 0% 100% / 0.82);
}
.c-amountcards__chip {
  position: absolute; z-index: 2; inset-inline: var(--s4); bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.c-amountcards__chip svg { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--accent-text); stroke-width: 1.6; }
.c-amountcards__chip small { display: block; font-size: var(--fs-200); color: var(--text-subtle); }
.c-amountcards__chip strong { font-size: var(--fs-300); }

/* --- CONTENT-10 · Sommaire vertical + panneau -------------------------------
   Un sommaire à gauche, le contenu à droite, séparés par un filet. L'entrée
   active est en gras et en pleine couleur, les autres en gris : la hiérarchie
   se lit sans avoir à survoler.                                               */
.c-docsplit { display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: clamp(2rem, 5vw, 4rem); }
.c-docsplit__list { display: grid; align-content: start; gap: var(--s5); }
.c-docsplit__tab {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-400); line-height: var(--lh-snug);
  color: var(--text-subtle); transition: color var(--transition);
}
.c-docsplit__tab:hover { color: var(--text); }
.c-docsplit__tab.is-selected { color: var(--text); font-weight: var(--fw-bold); }
.c-docsplit__panels { border-left: 1px solid var(--border); padding-left: clamp(1.5rem, 4vw, 3rem); }
.c-docsplit__panel { display: grid; gap: var(--s5); color: var(--text-muted); }
.c-docsplit__panel[hidden] { display: none; }
.c-docsplit__panel strong { color: var(--text); }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .c-valuecards { margin-right: calc(-1 * var(--gutter)); }
  .c-valuecards > * { flex: 0 0 min(86%, 18rem); }
  .c-valuecards-wrap .c-arrows { justify-content: center; }

  .c-appfan { grid-template-columns: 1fr; }
  .c-appfan__title { font-size: clamp(2.5rem, 14vw, 4rem); }
  .c-appfan__mot--creux { -webkit-text-stroke-width: 1.5px; }
  .c-appfan__stage { min-height: 24rem; }
  .c-appfan__phone { width: 58%; }
  .c-appfan__phone--a { transform: translate(-92%, -50%) rotate(-8deg); }
  .c-appfan__phone--c { transform: translate(-8%, -50%) rotate(8deg); }

  .c-longread, .c-floatside { grid-template-columns: 1fr; }
  .c-longread__body p { max-width: none; }
  .c-offsetshots { padding-bottom: 26%; }

  .c-numcards { grid-template-columns: 1fr; }
  /* Trois cartes photo côte à côte deviennent illisibles : on garde deux
     colonnes et la vedette prend toute la largeur, en tête. */
  .c-amountcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-amountcards__item--vedette { grid-column: 1 / -1; aspect-ratio: 16 / 10; order: -1; }

  /* Le sommaire passe au-dessus, en bande défilante : sur un téléphone une
     colonne de 18 rem à côté du texte ne tient pas. */
  .c-docsplit { grid-template-columns: 1fr; gap: var(--s6); }
  .c-docsplit__list {
    grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s5);
    overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s3);
  }
  .c-docsplit__list::-webkit-scrollbar { display: none; }
  .c-docsplit__tab { white-space: nowrap; }
  .c-docsplit__panels { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s6); }
}

/* =============================================================================
   20 · FAMILLE ANIM (v4.31) — les éléments qui se posent SUR une photo
   -----------------------------------------------------------------------------
   Ce ne sont pas des sections : ce sont des PIÈCES à poser dans le cadre photo
   d'une section existante. Chacune porte un numéro (ANIM-01 → ANIM-10), pour
   pouvoir dire « ANIM-08 sur CONTENT-09 » sans autre explication.

   Comment on s'en sert, en trois règles :
   ① le cadre photo doit être en position relative — tous les cadres du kit le
     sont déjà (`.c-content__media`, `.c-floatside__media`, `.c-hero__visual`…) ;
   ② on colle la pièce dans le cadre, après l'image ;
   ③ on choisit son coin avec un modificateur de place : `--hg` `--hd` `--bg`
     `--bd` (haut-gauche, haut-droite, bas-gauche, bas-droite) ou `--centre`.

   Les pièces DÉBORDENT volontairement du cadre : c'est ce dépassement, plus
   l'ombre portée, qui donne l'effet de relief. Les animations ne démarrent
   qu'une fois la section arrivée à l'écran (classe `is-in` posée par script.js)
   et restent à leur état final si l'utilisateur préfère moins d'animations.
   ============================================================================= */

/* --- Le socle commun -------------------------------------------------------- */
.c-anim {
  position: absolute; z-index: 4;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -18px hsl(220 40% 10% / 0.45), 0 2px 8px hsl(220 40% 10% / 0.08);
  padding: var(--s4) var(--s5);
}
.c-anim--hg { top: -1.25rem; left: -1.25rem; }
.c-anim--hd { top: -1.25rem; right: -1.25rem; }
.c-anim--bg { bottom: -1.25rem; left: -1.25rem; }
.c-anim--bd { bottom: -1.25rem; right: -1.25rem; }
.c-anim--centre { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.c-anim--sombre { background: var(--surface-inverse); color: #fff; }
.c-anim--accent { background: var(--accent-strong); color: var(--accent-contraste); }
.c-anim__libelle {
  display: block; font-family: var(--font-sans); font-size: var(--fs-200);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  /* mesuré : --text-subtle ne donne que 2,56:1 sur blanc — sous la barre. */
  color: var(--text-muted);
}
.c-anim--sombre .c-anim__libelle, .c-anim--accent .c-anim__libelle { color: hsl(0 0% 100% / 0.72); }
/* Respiration lente, à ajouter à n'importe quelle pièce. */
@media (prefers-reduced-motion: no-preference) {
  .c-anim--flotte { animation: c-anim-flotte 6s ease-in-out infinite; }
  .c-anim--flotte.c-anim--centre { animation-name: c-anim-flotte-centre; }
}
@keyframes c-anim-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* ⚠️ le centrage est porté par `transform`, le flottement par `translate` :
   les deux se composent. Il ne faut donc PAS re-décaler de -50 % ici, sinon la
   pièce part deux fois plus loin que prévu. */
@keyframes c-anim-flotte-centre { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* Entrée de la pièce quand la section arrive. */
/* ⚠️ v4.33 : la pièce est VISIBLE au repos, et l'animation ne fait que
   l'introduire. L'état « caché au repos » d'avant reposait entièrement sur la
   classe `is-in` : si elle n'arrivait pas — observateur en échec, JS en retard,
   section très haute — la pièce restait invisible pour toujours. C'est ce qui
   faisait disparaître le score d'ANIM-06 en vue responsive. Désormais le pire
   des cas est une pièce simplement statique. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim { animation: c-anim-entree var(--dur-slow, 600ms) var(--ease-out, ease-out) both; }
  .has-reveal .is-in .c-anim--flotte { animation: c-anim-entree var(--dur-slow, 600ms) var(--ease-out, ease-out) both, c-anim-flotte 6s ease-in-out 700ms infinite; }
}
@keyframes c-anim-entree { from { opacity: 0; scale: 0.92; } to { opacity: 1; scale: 1; } }

/* --- ANIM-01 · Compteur ----------------------------------------------------
   Un chiffre qui grimpe jusqu'à sa valeur quand la section arrive. La valeur
   d'arrivée est dans `data-compteur` ; le texte affiché sert de gabarit.      */
.c-anim__chiffre {
  display: block; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.c-anim__unite { font-size: 0.5em; margin-left: 0.15em; color: var(--text-muted); }
.c-anim--sombre .c-anim__unite, .c-anim--accent .c-anim__unite { color: hsl(0 0% 100% / 0.72); }

/* --- ANIM-02 · Anneau de progression ---------------------------------------
   Un anneau qui se remplit jusqu'au pourcentage voulu, chiffre au centre. Le
   pourcentage se règle par la variable `--part` (0 à 100).                    */
.c-anim--anneau { display: grid; place-items: center; gap: var(--s2); padding: var(--s4); }
.c-anim__anneau { position: relative; width: 5.5rem; height: 5.5rem; }
.c-anim__anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.c-anim__anneau circle { fill: none; stroke-width: 7; }
.c-anim__anneau .piste { stroke: var(--border); }
.c-anim__anneau .part {
  stroke: var(--accent-strong); stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: calc(264 - 264 * var(--part, 70) / 100);
}
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim__anneau .part { animation: c-anim-anneau 1.4s var(--ease-out, ease-out) 250ms both; }
}
@keyframes c-anim-anneau {
  from { stroke-dashoffset: 264; }
  to   { stroke-dashoffset: calc(264 - 264 * var(--part, 70) / 100); }
}
.c-anim__anneau b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-500); font-variant-numeric: tabular-nums;
}

/* --- ANIM-03 · Barres de statistiques -------------------------------------
   Quatre barres qui poussent du bas, décalées dans le temps. La hauteur de
   chaque barre est portée par `--h` (en pourcentage).                        */
.c-anim--barres { display: grid; gap: var(--s3); }
.c-anim__barres { display: flex; align-items: flex-end; gap: var(--s2); height: 4.5rem; }
.c-anim__barre { width: 0.75rem; border-radius: var(--radius-pill); background: var(--accent-strong); height: calc(var(--h, 50) * 1%); transform-origin: bottom; }
.c-anim__barre:nth-child(even) { background: color-mix(in srgb, var(--accent-strong) 45%, var(--surface-2)); }
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim__barre { animation: c-anim-pousse 900ms var(--ease-out, ease-out) both; }
  .has-reveal .is-in .c-anim__barre:nth-child(2) { animation-delay: 120ms; }
  .has-reveal .is-in .c-anim__barre:nth-child(3) { animation-delay: 240ms; }
  .has-reveal .is-in .c-anim__barre:nth-child(4) { animation-delay: 360ms; }
}
@keyframes c-anim-pousse { from { scale: 1 0; } to { scale: 1 1; } }   /* repos = barre entière */

/* --- ANIM-04 · Courbe qui se dessine --------------------------------------- */
.c-anim--courbe { display: grid; gap: var(--s2); min-width: 11rem; }
.c-anim__courbe { width: 100%; height: 3.25rem; overflow: visible; }
.c-anim__courbe path { fill: none; stroke: var(--accent-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.c-anim__courbe circle { fill: var(--accent-strong); }
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim__courbe path { stroke-dasharray: 240; animation: c-anim-trace 1.6s var(--ease-out, ease-out) 200ms both; }
  .has-reveal .is-in .c-anim__courbe circle { animation: c-anim-point 300ms ease-out 1.6s both; }
}
@keyframes c-anim-trace { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
@keyframes c-anim-point { from { opacity: 0; } to { opacity: 1; } }
.c-anim__hausse { display: inline-flex; align-items: center; gap: var(--s2); color: var(--success-fonce); font-weight: var(--fw-bold); font-size: var(--fs-300); }
.c-anim--sombre .c-anim__hausse { color: var(--success); }

/* --- ANIM-05 · Notification ------------------------------------------------
   La pastille d'application qui glisse depuis le bord, comme une notification
   qui vient d'arriver.                                                        */
.c-anim--notif { display: flex; align-items: center; gap: var(--s4); min-width: min(20rem, 76vw); }
.c-anim__app { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--accent-strong); color: var(--accent-contraste); font-family: var(--font-display); font-size: var(--fs-400); }
.c-anim__notif-corps { display: grid; gap: 0.1rem; }
.c-anim__notif-titre { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-300); font-weight: var(--fw-bold); }
.c-anim__notif-texte { font-size: var(--fs-300); color: var(--text-muted); }
.c-anim__quand { margin-left: auto; align-self: flex-start; font-size: var(--fs-200); color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim--notif { animation: c-anim-glisse 700ms var(--ease-out, ease-out) 350ms both; }
}
@keyframes c-anim-glisse { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }

/* --- ANIM-06 · Résultat de match ------------------------------------------
   Le score arrive ligne par ligne, comme une feuille de match qu'on remplit.  */
.c-anim--match { display: grid; gap: var(--s3); min-width: 13rem; }
.c-anim__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); font-size: var(--fs-300); }
.c-anim__ligne strong { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-wide); }
.c-anim__ligne--gagnant { font-weight: var(--fw-bold); }
.c-anim__ligne--gagnant::after { content: "▲"; font-size: 0.6em; color: var(--success-fonce); }
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim__ligne { animation: c-anim-ligne 500ms var(--ease-out, ease-out) both; }
  .has-reveal .is-in .c-anim__ligne:nth-child(2) { animation-delay: 200ms; }
  .has-reveal .is-in .c-anim__ligne:nth-child(3) { animation-delay: 400ms; }
}
@keyframes c-anim-ligne { from { opacity: 0; translate: -0.75rem 0; } to { opacity: 1; translate: 0 0; } }

/* --- ANIM-07 · Note et visages -------------------------------------------- */
.c-anim--note { display: flex; align-items: center; gap: var(--s4); }
.c-anim__visages { display: flex; }
.c-anim__visages img {
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-round);
  object-fit: cover; border: 2px solid var(--surface);
}
.c-anim__visages img + img { margin-left: -0.75rem; }
.c-anim__etoiles { display: flex; gap: 0.1rem; color: #f59e0b; font-size: var(--fs-300); }
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .is-in .c-anim__visages img { animation: c-anim-visage 400ms var(--ease-out, ease-out) both; }
  .has-reveal .is-in .c-anim__visages img:nth-child(2) { animation-delay: 120ms; }
  .has-reveal .is-in .c-anim__visages img:nth-child(3) { animation-delay: 240ms; }
  .has-reveal .is-in .c-anim__visages img:nth-child(4) { animation-delay: 360ms; }
}
@keyframes c-anim-visage { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }

/* --- ANIM-08 · Disponibilité en direct ------------------------------------
   Un point qui bat et un texte qui tourne (`data-anim-cycle`) : « 3 créneaux
   libres ce soir », puis « 2 pistes libres demain ». On ne promet rien de faux :
   les phrases sont écrites en dur dans la page.                              */
.c-anim--direct { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-300); }
.c-anim__pouls { flex: none; position: relative; width: 0.6rem; height: 0.6rem; border-radius: var(--radius-round); background: var(--success); }
.c-anim__pouls::after {
  content: ""; position: absolute; inset: -0.35rem; border-radius: var(--radius-round);
  border: 2px solid var(--success); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .c-anim__pouls::after { animation: c-anim-pouls 2.2s ease-out infinite; }
}
@keyframes c-anim-pouls { 0% { opacity: 0.7; scale: 0.6; } 70%, 100% { opacity: 0; scale: 1.4; } }
.c-anim__cycle { position: relative; }
.c-anim__cycle > span { transition: opacity 300ms var(--ease-out, ease-out); }
.c-anim__cycle > span[hidden] { display: none; }



/* --- ANIM-10 · Icônes en orbite -------------------------------------------
   Trois icônes de sport tournent autour d'une pastille centrale. Chaque icône
   tourne en sens inverse sur elle-même, pour rester droite.                   */
.c-anim--orbite { background: none; box-shadow: none; padding: 0; width: 11rem; height: 11rem; }
.c-anim__noyau {
  position: absolute; inset: 28%; display: grid; place-items: center;
  padding: var(--s2); text-align: center; white-space: nowrap;
  border-radius: var(--radius-round); background: var(--surface);
  box-shadow: 0 12px 28px -12px hsl(220 40% 10% / 0.45);
  font-family: var(--font-display); font-size: var(--fs-300);
}
.c-anim__orbite { position: absolute; inset: 0; }
.c-anim__satellite {
  position: absolute; top: 50%; left: 50%; margin: -1.4rem;
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem;
  border-radius: var(--radius-round); background: var(--surface);
  box-shadow: 0 10px 22px -10px hsl(220 40% 10% / 0.4);
  transform: rotate(var(--a, 0deg)) translateX(4.6rem) rotate(calc(-1 * var(--a, 0deg)));
}
.c-anim__satellite svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--accent-text); stroke-width: 1.7; }
@media (prefers-reduced-motion: no-preference) {
  .c-anim__orbite { animation: c-anim-orbite 18s linear infinite; }
  .c-anim__satellite svg { animation: c-anim-orbite-inverse 18s linear infinite; }
}
@keyframes c-anim-orbite { to { rotate: 360deg; } }
@keyframes c-anim-orbite-inverse { to { rotate: -360deg; } }

/* --- Mobile ---------------------------------------------------------------
   Sur un téléphone, une pièce qui déborde de 1,25 rem sort de l'écran : on
   réduit le dépassement et on rétrécit les pièces les plus grandes.          */
@media (max-width: 1023.98px) {
  .c-anim { padding: var(--s3) var(--s4); }
  .c-anim--hg, .c-anim--hd { top: -0.75rem; }
  .c-anim--bg, .c-anim--bd { bottom: -0.75rem; }
  .c-anim--hg, .c-anim--bg { left: -0.5rem; }
  .c-anim--hd, .c-anim--bd { right: -0.5rem; }
  .c-anim__chiffre { font-size: var(--fs-600); }
  .c-anim__anneau { width: 4.25rem; height: 4.25rem; }
  .c-anim--notif { min-width: 0; max-width: calc(100vw - 3rem); }
  .c-anim--orbite { width: 8.5rem; height: 8.5rem; }
  .c-anim__satellite { width: 2.2rem; height: 2.2rem; margin: -1.1rem; transform: rotate(var(--a, 0deg)) translateX(3.4rem) rotate(calc(-1 * var(--a, 0deg))); }
  .c-anim__barres { height: 3.5rem; }
}

/* =============================================================================
   21 · CINQ RETOURS SUR LE CATALOGUE (v4.32)
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* --- ① La variante MIROIR ne miroitait pas --------------------------------
   La règle d'origine du kit ne déplaçait qu'une image enfant DIRECTE :
   `.c-content--split.c-content--reverse img { order: -1 }`. Dès que la photo est
   dans un conteneur — la pile de CONTENT-04, un cadre, une figure — plus rien ne
   bougeait, et les deux démos étaient identiques à l'écran. On nomme donc tous
   les porteurs de visuel du kit, sans jamais toucher au bloc de texte.        */
.c-content--split.c-content--reverse > .c-stackshots,
.c-content--split.c-content--reverse > .c-content__media,
.c-content--split.c-content--reverse > .c-offsetshots,
.c-content--split.c-content--reverse > figure,
.c-content--split.c-content--reverse > picture { order: -1; }

/* --- ② CONTENT-08 · la photo SUIT le texte pendant qu'on défile -------------
   Le texte est long par nature : sans cela, la colonne de droite se vide et la
   moitié de l'écran reste blanche pendant deux paragraphes. La photo se cale
   sous la barre de nav et accompagne la lecture.                              */
.c-longread__media {
  position: sticky; top: calc(var(--header-h, 4.5rem) + var(--s6));
  align-self: start;
}
.c-longread__cta { margin-top: var(--s8); }



/* --- ④ Deux photos côte à côte qui portent chacune leur pastille ------------
   `o-grid` n'est pas un cadre positionné : une pièce ANIM posée dedans se
   calerait sur la section entière. On donne donc un cadre à chaque photo.     */
.c-shotframe { position: relative; }
.c-shotframe > img { display: block; width: 100%; border-radius: var(--radius-lg); }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Rien ne colle en mobile : la photo est sous le texte, elle n'a plus rien à
     accompagner, et une photo collante y mangerait la moitié de l'écran. */
  .c-longread__media { position: static; }
}

/* =============================================================================
   22 · RETOURS DE LA VUE RESPONSIVE + ANIM-09 REPENSÉE (v4.33)
   Requête mobile propre à ce bloc en fin de bloc.
   ============================================================================= */

/* --- ① Deux places de plus pour une pièce : le MILIEU d'un bord --------------
   `--hc` et `--bc` posent la pièce à cheval sur le bord haut ou bas de la photo,
   centrée horizontalement. Le centrage est porté par `transform`, jamais par
   `translate` : c'est `translate` qui sert au flottement, et les deux doivent
   pouvoir se composer.                                                        */
.c-anim--hc { top: 0; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.c-anim--bc { bottom: 0; left: 50%; right: auto; top: auto; transform: translate(-50%, 50%); }

/* --- ② ANIM-09 · Pastille ronde du logo, à cheval sur la photo ---------------
   La version à texte tournant est abandonnée : trop bavarde, et elle tirait l'œil
   sans rien dire. Ici, une pastille ronde et calme porte le logo du club, posée
   au milieu du bord haut ou bas de la photo. C'est la signature du club sur son
   image — l'équivalent de l'écusson BADGE-01, mais sur une photo au lieu d'une
   césure de section.                                                          */
.c-anim--logo {
  display: grid; place-items: center;
  width: clamp(5rem, 8vw, 7rem); aspect-ratio: 1 / 1; padding: clamp(0.75rem, 1.5vw, 1.25rem);
  border-radius: var(--radius-round);
  background: var(--surface);
  /* le liseré de la couleur du fond détache la pastille de la photo, même sur
     une image claire — sans lui, le blanc sur blanc se perd. */
  box-shadow: 0 0 0 5px var(--bg), 0 18px 40px -18px hsl(220 40% 10% / 0.5);
}
.c-anim--logo img, .c-anim--logo svg { display: block; width: 100%; height: auto; }
.c-anim--logo.c-anim--sombre { background: var(--surface-inverse); box-shadow: 0 0 0 5px var(--bg), 0 18px 40px -18px hsl(220 40% 10% / 0.55); }
.c-anim--logo.c-anim--accent { background: var(--accent-strong); }

/* --- ③ CONTENT-10 · le sommaire reste VERTICAL en mobile --------------------
   La bande horizontale défilante obligeait à balayer pour découvrir les sujets,
   et deux entrées sur trois restaient hors champ. En colonne, on voit tout.   */

/* --- ④ STATS-06 · les cartes en deux colonnes se passent de pastille --------
   À 167 px de large, la pastille de détail écrasait la carte : deux lignes de
   texte dans un cadre de la largeur d'un pouce. On la retire, et le chiffre
   reprend sa place au centre, avec une vraie marge intérieure.                */

/* --- ⑤ ANIM-10 · un noyau qui porte enfin quelque chose de lisible ---------- */
.c-anim__noyau { inset: 24%; gap: 0.05rem; }
.c-anim__noyau svg {
  width: 60%; height: auto; fill: none; stroke: var(--accent-text); stroke-width: 1.7;
}
.c-anim__noyau img { width: 74%; height: auto; }
.c-anim__noyau small { font-size: 0.55em; }

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {

  /* ③ Le sommaire de CONTENT-10 : une entrée par ligne, comme sur ordinateur. */
  .c-docsplit__list {
    grid-auto-flow: row; grid-auto-columns: auto;
    gap: var(--s4); overflow: visible; padding-bottom: 0;
  }
  .c-docsplit__tab { white-space: normal; }

  /* ④ STATS-06 : la pastille disparaît sur les cartes en deux colonnes, garde
     sa place sur la carte pleine largeur. Le contenu respire enfin. */
  .c-amountcards__item:not(.c-amountcards__item--vedette) .c-amountcards__chip { display: none; }
  .c-amountcards__item { padding: var(--s5); }
  .c-amountcards__item:not(.c-amountcards__item--vedette) .c-amountcards__value { top: 50%; font-size: clamp(1.5rem, 8vw, 2.25rem); }
  .c-amountcards__item:not(.c-amountcards__item--vedette) .c-amountcards__legende { top: 50%; margin-top: 1.6em; padding-inline: var(--s4); }
  /* la carte vedette est courte en mobile : si le chiffre reste au milieu, la
     pastille de détail lui passe dessus. On remonte le chiffre et on donne un
     peu plus de hauteur à la carte. */
  .c-amountcards__item--vedette { aspect-ratio: 16 / 11; }
  .c-amountcards__item--vedette .c-amountcards__value { top: 32%; }
  .c-amountcards__item--vedette .c-amountcards__legende { top: 32%; }
  .c-amountcards__item--vedette .c-amountcards__chip { inset-inline: var(--s5); bottom: var(--s5); }

  /* ⑤ ANIM-10 : l'orbite reste assez grande pour que le noyau soit lisible. */
  .c-anim--orbite { width: 10rem; height: 10rem; }
  .c-anim__satellite { width: 2.4rem; height: 2.4rem; margin: -1.2rem; transform: rotate(var(--a, 0deg)) translateX(4.1rem) rotate(calc(-1 * var(--a, 0deg))); }

  /* ② La pastille du logo garde un débordement raisonnable. */
  .c-anim--logo { width: 5rem; box-shadow: 0 0 0 4px var(--bg), 0 14px 30px -14px hsl(220 40% 10% / 0.5); }
}