/* ==========================================================================
   Mental de Combat - CSS commun
   Direction artistique : noir / blanc / bordeaux désaturé (60/30/10)
   Verrouillage user 2026-05-15 : rouges saturés #c1121f et #e63946 bannis.
   ========================================================================== */

/* --- 0. Inter Variable (self-hosted, 1 fichier pour tous weights 100-900) --- */
@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
    /* Palette - direction "Carnet de coin" : noir/blanc/rouge JJB IBJJF architectural */
    --noir-paper:   #080808;     /* fond édito ultra-sombre (un cran sous --noir) */
    --noir:         #0a0a0a;     /* charbon principal */
    --noir-2:       #141414;     /* surface élevée */
    --noir-3:       #1f1f1f;     /* surface 2 / bordures */
    --gris-encre:   #3a3a3a;     /* séparateurs internes nets (cards, faq) */
    --gris:         #8a8a8a;     /* texte secondaire */
    --gris-clair:   #c9c9c9;
    --blanc:        #ffffff;
    --blanc-casse:  #f5f5f4;
    --blanc-papier: #ebe7e0;     /* off-white légèrement chaud, titres bicolores */
    --bordeaux-deep:#3a0610;     /* fond pivot rouge profond (sections pivot) */
    --bordeaux:     #7a0a14;     /* accent sombre - borders, fills */
    --bordeaux-2:   #c8102e;     /* rouge JJB IBJJF - texte d'accent, prix, hover */
    --bordeaux-3:   #4a0610;     /* accent pressed / ombre */

    /* Notes du quiz (signal fonctionnel, desature pour rester dans la DA sombre) */
    --note-vert:    #5fa777;     /* >= 8 : atout */
    --note-jaune:   #cda434;     /* 5-7 : a consolider */
    --note-rouge:   #c8102e;     /* 0-4 : faible (rouge de marque) */

    /* Typo - Inter Variable self-hostée (1 fichier weights 100-900 + slant axis) */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                 Helvetica, Arial, "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Echelle modulaire */
    --fs-xs:  0.8125rem;
    --fs-sm:  0.9375rem;
    --fs-md:  1rem;
    --fs-lg:  1.125rem;
    --fs-xl:  1.375rem;
    --fs-2xl: clamp(1.75rem, 3.5vw, 2.5rem);
    --fs-3xl: clamp(2.25rem, 6vw, 4rem);
    --fs-4xl: clamp(2.75rem, 8vw, 5.5rem);
    --fs-5xl: clamp(3.5rem, 10vw, 7rem);    /* titre édito plein écran */
    --fs-display: clamp(4rem, 14vw, 9rem);   /* chiffres signature filigrane */
    --fw-display: 900;                        /* Inter Variable supporte */

    /* Rythme vertical */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-24: 6rem;
    --sp-32: 8rem;               /* gap sections édito plein cadre */

    /* Layout */
    --container: 1200px;
    --container-wide: 1400px;    /* sections édito dépassant le 1200 */
    --gutter-edito: clamp(2rem, 8vw, 6rem);
    --nav-h: 64px;
    --radius: 2px;
    --radius-lg: 6px;

    /* Motion */
    --t-fast: 120ms cubic-bezier(.2,.7,.2,1);
    --t-med:  200ms cubic-bezier(.2,.7,.2,1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* L'attribut hidden doit toujours l'emporter (sinon display:flex/grid l'ecrase) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--blanc-casse);
    background-color: var(--noir);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--bordeaux-2); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
:focus-visible {
    outline: 2px solid var(--bordeaux-2);
    outline-offset: 3px;
}
::selection { background: var(--bordeaux); color: var(--blanc); }

/* --- 3. Typo ------------------------------------------------------------ */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl); font-weight: 600; }
p  { text-wrap: pretty; }

.eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--gris-clair);
    font-weight: 500;
}

/* --- 4. Layout primitives ---------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.section {
    padding-block: clamp(4rem, 10vw, 8rem);
    position: relative;
}
.section--dark   { background: var(--noir-2); }
.section--darker { background: var(--noir); }
.section--paper  { background: var(--noir-paper); }

/* Section pivot : fond bordeaux profond, contenu blanc.
   Reservee au CTA final + 1 section pivot maxi par page. Pas de separateur rouge
   (la rupture de fond suffit, le rouge devient agressif sinon). */
.section--pivot {
    background: var(--bordeaux-deep);
    color: var(--blanc);
}
.section--pivot .section__h2 { color: var(--blanc); }
.section--pivot .section__lead,
.section--pivot .lead,
.section--pivot p { color: var(--blanc-papier); }
.section--pivot .btn--primary {
    background: var(--blanc);
    color: var(--bordeaux-deep);
}
.section--pivot .btn--primary:hover {
    background: var(--blanc-papier);
    color: var(--bordeaux-deep);
}
.section--pivot .btn--ghost {
    border-color: rgba(255,255,255,0.4);
    color: var(--blanc);
}
.section--pivot .btn--ghost:hover {
    border-color: var(--blanc);
    color: var(--blanc);
}

/* Section feature : image plein cadre en fond + overlay sombre + contenu superpose.
   Pour respirer entre les murs de cartes. */
.section--feature {
    background: var(--noir);
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(380px, 55vh, 560px);
    display: grid;
    align-items: center;
}
.section--feature .section__feature-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.section--feature .section__feature-media img,
.section--feature .section__feature-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section--feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.25) 100%);
    pointer-events: none;
}
.section--feature .container { max-width: var(--container); }

/* ----- Page-menu home : cards bordees (image de page contenue + 2 CTA) -----
   Contenues dans le .container (pas plein cadre = pas un look hero), avec pourtour
   et coins arrondis pour bien lire le menu. Image clippee dans la carte + degrade. */
.menu-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 30px);
}
.menu-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    min-height: 360px;
    padding: clamp(2rem, 4.5vw, 3.5rem);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-lg);
    background: var(--noir-2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color var(--t-fast);
}
.menu-card:hover { border-color: var(--bordeaux-2); }
.menu-card__media { position: absolute; inset: 0; z-index: -2; }
.menu-card__media img { width: 100%; height: 100%; object-fit: cover; }
.menu-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.2) 100%);
    pointer-events: none;
}
.menu-card__body { max-width: 46ch; position: relative; }
.menu-card__eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bordeaux-2);
    font-weight: 600;
    margin: 0 0 var(--sp-2);
}
.menu-card__title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--blanc);
    margin: 0 0 var(--sp-3);
    letter-spacing: -0.01em;
}
.menu-card__lead {
    color: var(--blanc-casse);
    line-height: 1.55;
    margin: 0 0 var(--sp-6);
}
.menu-card__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Carte Contact : hero panoramique (palindrome). On cale sur la partie gauche. */
#menu-contact .menu-card__media img { object-position: left center; }

/* Carte Le coach : bandeau 16:9 (sujet a gauche, zone sombre etiree a droite).
   La card est basse : on cale en haut pour garder le visage dans le cadre. */
#menu-coach .menu-card__media img { object-position: center 18%; }

/* Carte Partenaires : rangee de combattants, tetes dans le tiers haut.
   On cale vers le haut pour ne pas cropper les visages. */
#menu-partenariat .menu-card__media img { object-position: center 28%; }

/* Variante miroir : degrade et contenu pousses a droite (rythme visuel). */
.menu-card--flip::after {
    background: linear-gradient(270deg, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.2) 100%);
}
.menu-card--flip .menu-card__body { margin-left: auto; text-align: right; }
.menu-card--flip .menu-card__cta { justify-content: flex-end; }

/* Mobile : degrade vertical (lecture par-dessus une image plus haute) + tout a gauche. */
@media (max-width: 768px) {
    .menu-card::after,
    .menu-card--flip::after {
        background: linear-gradient(0deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.62) 55%, rgba(10,10,10,0.38) 100%);
    }
    .menu-card { align-items: end; min-height: 320px; }
    .menu-card__body,
    .menu-card--flip .menu-card__body { max-width: none; margin-left: 0; text-align: left; }
    .menu-card--flip .menu-card__cta { justify-content: flex-start; }
    /* Carte Le coach : Pao est cale a gauche de l'image -> on pousse le texte a droite
       pour ne pas masquer son visage (le degrade vertical bas est deja applique). */
    #menu-coach .menu-card__media img { object-position: left center; }
    #menu-coach .menu-card__body { margin-left: auto; text-align: right; }
    #menu-coach .menu-card__cta { justify-content: flex-end; }
}

/* Section editorial : grille asymetrique 7/5 (image+texte) ou 5/7. Casse le mur de cards. */
.section--editorial .container { max-width: var(--container-wide); }
.grid-7-5,
.grid-5-7 {
    display: grid;
    gap: var(--gutter-edito);
    align-items: center;
}
.grid-7-5 { grid-template-columns: 1fr; }
.grid-5-7 { grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .grid-7-5 { grid-template-columns: 7fr 5fr; }
    .grid-5-7 { grid-template-columns: 5fr 7fr; }
}

/* Section__number : chiffre filigrane signature derriere le titre (sans bruit, structural) */
.section__head {
    max-width: 72ch;
    margin: 0 auto var(--sp-16);
    text-align: center;
    position: relative;
}
.section__head--align-left {
    margin-inline: 0;
    text-align: left;
    max-width: none;
}
.section__number {
    position: absolute;
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    color: var(--blanc-papier);
    opacity: 0.06;
    line-height: 0.85;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    top: -0.15em;
    left: 50%;
    transform: translateX(-50%);
}
.section__head--align-left .section__number {
    left: 0;
    transform: none;
}
.section__head > .eyebrow,
.section__head > .section__h2,
.section__head > .section__lead { position: relative; z-index: 1; }

.section__h2 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-4);
    color: var(--blanc);
}
.section__h2--accent { color: var(--bordeaux); }
/* Titre bicolore : ligne 1 blanche bold + ligne 2 rouge italique (slant axis Inter Variable) */
.section__h2--bicolor {
    color: var(--blanc);
}
.section__h2--bicolor .accent {
    display: block;
    color: var(--bordeaux-2);
    font-weight: 600;
    font-variation-settings: "slnt" -8;
}
.section__lead,
.lead {
    font-size: var(--fs-lg);
    color: var(--gris-clair);
    line-height: 1.6;
}

/* Grilles */
.grid-3,
.grid-4 {
    display: grid;
    gap: var(--sp-8);
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Portrait du coach + intro (page le-coach, section pitch) - cote a cote */
.coach-intro {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin: 0 auto var(--sp-16);
}
.coach-intro__text { flex: 1 1 auto; }
.coach-intro__text .section__h2 { margin-top: 0; }
.coach-portrait {
    flex: 0 0 320px;
    max-width: 320px;
    margin: 0;
}
.coach-portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 767px) {
    .coach-intro { flex-direction: column; text-align: center; gap: var(--sp-6); }
    .coach-portrait { flex-basis: auto; margin: 0 auto; max-width: 300px; }
    /* Verbatim : garder la citation alignee a gauche (le guillemet centre perd son sens) */
    .coach-verbatim { text-align: left; }
}

/* Grille 2 colonnes (utile pour temoignages quand on en a 2 ou 4) */
.grid-2 {
    display: grid;
    gap: var(--sp-8);
    grid-template-columns: 1fr;
    max-width: 880px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ----- Carousel mobile : UNE carte a la fois, navigation par fleches (PAS de swipe natif).
   Tague une grille existante (.grid-2 / .grid-3 / .grid-4) avec .cards-carousel.
   Le JS (mental.js) enrobe le track dans .carousel et injecte les 2 fleches.
   Desktop : grille normale (fleches masquees, le decalage --i n'est lu qu'en mobile).
   Mobile : track en flex, chaque carte pleine largeur (aucun peek), deplacement par
   transform translateX(-i*100%). overflow:hidden sur le wrapper = pas de scroll/swipe
   horizontal -> plus de navigation de page parasite ; le scroll vertical passe normalement. */
.carousel { position: relative; }
.carousel__arrow { display: none; }   /* desktop : pas de fleches */

@media (max-width: 768px) {
    .carousel { overflow: hidden; }
    .cards-carousel {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        max-width: none;
        transform: translateX(calc(var(--i, 0) * -100%));
        transition: transform 0.35s ease;
        touch-action: pan-y;   /* swipe horizontal inactif, scroll vertical OK */
    }
    .cards-carousel > * {
        flex: 0 0 100%;
        max-width: none;
        margin: 0;
    }
    /* degage le texte des fleches laterales (zone fleche ~46px) ; selecteur plus
       specifique que .card pour gagner sur le padding de base. */
    .cards-carousel > .card { padding-inline: 3rem; }
    .cards-carousel > .card:hover {   /* pas de lift/flash sur tactile */
        transform: none;
        border-color: rgba(255, 255, 255, 0.10);
    }
    .carousel__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(10, 10, 10, 0.5);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        color: var(--blanc);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    }
    .carousel__arrow:hover { background: rgba(10, 10, 10, 0.72); border-color: var(--blanc); }
    .carousel__arrow--prev { left: 6px; }
    .carousel__arrow--next { right: 6px; }
    .carousel__arrow[disabled] { opacity: 0.2; pointer-events: none; }
}

/* Locaux : 2 visuels full-responsive, cote a cote sur PC, empiles sur mobile */
.locaux-grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
    max-width: var(--container);
    margin: 0 auto;
}
@media (min-width: 768px) {
    .locaux-grid { grid-template-columns: 1fr 1fr; }
}
.locaux-grid figure { margin: 0; }
.locaux-grid .locaux__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
}
.locaux-grid figcaption {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--gris-clair);
    line-height: 1.5;
}

/* Grid masonry : CSS columns avec hauteurs variables pour temoignages mosaique */
.grid-masonry {
    column-count: 1;
    column-gap: var(--sp-8);
    max-width: var(--container);
    margin: 0 auto;
}
@media (min-width: 720px) {
    .grid-masonry { column-count: 2; }
}
.grid-masonry > * {
    break-inside: avoid;
    margin-bottom: var(--sp-8);
    display: block;
}

/* Cards - dark surface, hairline border, accent bordeaux ponctuel.
   Signature dark moderne (Linear/Vercel/Stripe) : surface peu elevee, border rgba,
   pas d'ombre portee, inset highlight subtil. Le rouge reste rare = accent. */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-8);
    background: var(--noir-3);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    color: var(--blanc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}
/* Card mise en avant + ruban "Recommandé" en biais dans le coin haut-droit */
.card--featured {
    position: relative;
    overflow: hidden;
    border-color: var(--bordeaux);
}
.card--featured:hover { border-color: var(--bordeaux-2); }
.card__ribbon {
    position: absolute;
    top: 26px;
    right: -40px;
    width: 150px;
    text-align: center;
    transform: rotate(45deg);
    background: var(--bordeaux);
    color: var(--blanc-casse);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 0;
    pointer-events: none;
}
/* Card tag : etiquette categorie en mini-caps rouge IBJJF au-dessus du titre.
   Classe semantiquement la card (Stress, Routine, Focus), pas un eyebrow decoratif. */
.card__tag {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bordeaux-2);
    font-weight: 700;
    margin-bottom: -2px;
}
.card__title {
    font-size: var(--fs-xl);
    color: var(--blanc);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: var(--sp-2);
}
.card__title + p,
.card__title + ul {
    margin-top: 0;
}
.card p { color: var(--gris-clair); line-height: 1.6; }

/* Card entirely clickable (anchor wrapping the card content) */
a.card--link {
    text-decoration: none;
    color: inherit;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.card--link:hover,
a.card--link:focus-visible {
    border-color: var(--bordeaux-2);
    transform: translateY(-2px);
    color: inherit;
}
a.card--link .card__link-text {
    margin-top: auto;
    color: var(--bordeaux-2);
    font-weight: 600;
    letter-spacing: 0.02em;
}
a.card--link:hover .card__link-text { letter-spacing: 0.04em; }
.card__price {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--bordeaux-2);
    letter-spacing: -0.01em;
    display: inline-block;
    align-self: flex-start;
    border-bottom: 2px solid var(--gris-encre);
    padding-bottom: var(--sp-1);
}
.card__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    color: var(--gris-clair);
    font-size: var(--fs-sm);
}
.card__list li {
    position: relative;
    padding-left: 1.2em;
}
.card__list li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: -0.15em;
    color: var(--bordeaux-2);
    font-size: 1.4em;
    font-weight: 700;
}
.card .btn { margin-top: auto; align-self: flex-start; }

/* Card desactivee (ex: Coaching jour J indispo en visio ; Renfo solo only sur page partenariat) */
.card--disabled { opacity: 0.55; }
.card--disabled .card__price { color: var(--gris); border-bottom-color: var(--gris-encre); }
/* Petit drapeau "En solo uniquement" sur la card Renfo (offre equipe) */
.card__solo-flag {
    align-self: flex-start;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blanc-casse);
    background: var(--gris-encre);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 9px;
    border-radius: 4px;
}

/* Bandeau "Tarifs equipe" en tete de la zone tarifs (page partenariat).
   Le rouge se merite : badge ponctuel, pas d'aplat dominant (Direction A). */
.tarifs-equipe__badge {
    display: inline-block;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blanc);
    background: var(--bordeaux);
    border: 1px solid var(--bordeaux-2);
    padding: 6px 14px;
    border-radius: 4px;
}

/* Rythme texte/titres */
h2 + p, h3 + p { margin-top: var(--sp-3); }

.card__meta {
    font-size: var(--fs-xs);
    color: var(--gris);
    letter-spacing: 0.05em;
}

/* Cards "A qui s'adresse" : lisere gauche vert/bordeaux + puces a icone.
   Reste austere (pas d'aplat) ; couleur = signal de qualification, pas deco. */
.qualif-card {
    border-left: 3px solid var(--gris-encre);
}
.qualif-card--oui { border-left-color: var(--note-vert); }
.qualif-card--non { border-left-color: var(--bordeaux-2); }
.qualif-card__eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: var(--sp-2);
}
.qualif-card--oui .qualif-card__eyebrow { color: var(--note-vert); }
.qualif-card--non .qualif-card__eyebrow { color: var(--bordeaux-2); }
.qualif-list { gap: var(--sp-3); }
.qualif-list li { padding-left: 1.8em; }
.qualif-list li::before {
    top: 0;
    font-size: 1em;
    font-weight: 700;
}
.qualif-card--oui .qualif-list li::before { content: "\2713"; color: var(--note-vert); }
.qualif-card--non .qualif-list li::before { content: "\2717"; color: var(--bordeaux-2); }
.qualif-conclusion {
    text-align: center;
    margin-top: var(--sp-8);
    color: var(--blanc-casse);
    font-weight: 600;
}

/* Tag list (disciplines, communes...) */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}
.tag-list li {
    padding: var(--sp-2) var(--sp-4);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    color: var(--gris-clair);
}

/* Cal.com placeholder (V1 avant embed reel) */
.calcom-wrapper {
    max-width: 800px;
    margin: 0 auto;
}
.calcom-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-12);
    background: var(--noir-3);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--gris-clair);
}

/* FAQ accordion (details/summary) - presence augmentee : numero mono a gauche, fs-lg */
.faq {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: faq-counter;
}
.faq__item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--gris-encre);
    border-radius: 0;
    overflow: hidden;
    counter-increment: faq-counter;
}
.faq__item:last-child { border-bottom: 1px solid var(--gris-encre); }
.faq__q {
    list-style: none;
    cursor: pointer;
    padding: var(--sp-6) 0;
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--blanc);
    display: grid;
    grid-template-columns: 2.5em 1fr auto;
    align-items: baseline;
    gap: var(--sp-4);
    transition: color var(--t-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
    content: counter(faq-counter, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--gris);
    letter-spacing: 0.08em;
    align-self: center;
}
.faq__q::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--bordeaux-2);
    transition: transform var(--t-med);
    flex-shrink: 0;
    line-height: 1;
}
.faq__q:hover { color: var(--bordeaux-2); }
.faq__item[open] .faq__q { color: var(--bordeaux-2); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
    padding: 0 0 var(--sp-6) calc(2.5em + var(--sp-4));
    color: var(--gris-clair);
    line-height: 1.65;
}
.faq__a p + p { margin-top: var(--sp-3); }
.faq__a a { color: var(--bordeaux-2); text-decoration: underline; text-underline-offset: 3px; }

/* Contact direct (tel, email) */
.contact__line {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--blanc);
    word-break: break-word;
}
.contact__line:hover { color: var(--bordeaux-2); }

/* Parcours - storytelling /le-coach (timeline verticale) */
/* Parcours legacy (gardee pour compat) */
.parcours {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    max-width: 880px;
    margin: 0 auto;
}
.parcours__bloc {
    background: rgba(255,255,255,0.025);
    padding: var(--sp-8);
    border-radius: var(--radius-lg);
}
.parcours__year {
    font-size: var(--fs-sm);
    letter-spacing: 0.08em;
    color: var(--gris-clair);
    margin-bottom: var(--sp-2);
    font-weight: 600;
}
.parcours__title {
    font-size: var(--fs-2xl);
    color: var(--bordeaux);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-4);
}
.parcours__bloc p {
    margin-bottom: var(--sp-3);
    color: var(--gris-clair);
    line-height: 1.65;
}
.parcours__bloc p:last-child { margin-bottom: 0; }
.parcours__bloc ul {
    padding-left: var(--sp-6);
    color: var(--gris-clair);
    margin-bottom: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.parcours__bloc ul:not(.parcours__quotes) li { list-style: disc; }
.parcours__bloc ul:not(.parcours__quotes) li::marker { color: var(--gris); }
.parcours__bloc strong { color: var(--blanc); }
.parcours__bloc .media-placeholder {
    margin-top: var(--sp-6);
    aspect-ratio: 16 / 9;
    max-width: 100%;
}

/* ==========================================================================
   Parcours timeline ferraille - ligne verticale rouge IBJJF + points,
   blocs alternes gauche/droite en desktop, colonne unique mobile.
   Effet biographique magazine, casse le mur de boites empilees.
   ========================================================================== */
.parcours--timeline {
    max-width: var(--container-wide);
    margin: 0 auto;
    gap: 0;
    position: relative;
    padding: var(--sp-12) 0;
}
/* Ligne verticale neutre (gris-encre) : centre desktop, gauche mobile.
   Le rouge reste reserve aux points (signaux ponctuels). */
.parcours--timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.25rem;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--gris-encre) 8%,
        var(--gris-encre) 92%,
        transparent 100%);
    z-index: 0;
}
@media (min-width: 900px) {
    .parcours--timeline::before { left: 50%; transform: translateX(-50%); }
}

.parcours--timeline .parcours__bloc {
    background: transparent;
    border-radius: 0;
    padding: var(--sp-8) 0 var(--sp-8) var(--sp-12);
    position: relative;
    margin-bottom: var(--sp-24);
}
.parcours--timeline .parcours__bloc:last-child { margin-bottom: 0; }

/* Point rouge sur la ligne */
.parcours--timeline .parcours__bloc::before {
    content: "";
    position: absolute;
    top: var(--sp-8);
    left: 1.25rem;
    transform: translate(-50%, 0);
    width: 14px;
    height: 14px;
    background: var(--bordeaux-2);
    border: 3px solid var(--noir);
    border-radius: 50%;
    z-index: 2;
}

/* Annee : sortie du bloc, position absolue de cote */
.parcours--timeline .parcours__year {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--blanc);
    margin: 0 0 var(--sp-2) 0;
    letter-spacing: -0.01em;
    line-height: 1;
}
.parcours--timeline .parcours__title {
    margin-bottom: var(--sp-3);
}

/* Desktop : alternance gauche/droite, blocs sur 50% largeur, point sur la ligne centrale */
@media (min-width: 900px) {
    .parcours--timeline .parcours__bloc {
        width: calc(50% - var(--sp-12));
        padding: var(--sp-8) 0;
    }
    .parcours--timeline .parcours__bloc:nth-child(odd) {
        margin-left: 0;
        margin-right: auto;
        padding-right: var(--sp-12);
        text-align: right;
    }
    .parcours--timeline .parcours__bloc:nth-child(odd) .parcours__bloc-inner {
        margin-left: auto;
    }
    .parcours--timeline .parcours__bloc:nth-child(even) {
        margin-left: auto;
        margin-right: 0;
        padding-left: var(--sp-12);
        text-align: left;
    }
    .parcours--timeline .parcours__bloc::before {
        top: calc(var(--sp-8) + 0.4em);
        left: auto;
    }
    .parcours--timeline .parcours__bloc:nth-child(odd)::before {
        right: calc(-1 * var(--sp-12) - 1px);
        transform: translate(50%, 0);
    }
    .parcours--timeline .parcours__bloc:nth-child(even)::before {
        left: calc(-1 * var(--sp-12) - 1px);
        transform: translate(-50%, 0);
    }
    /* Listes restent left-aligned meme dans bloc text-align:right (lisibilite) */
    .parcours--timeline .parcours__bloc:nth-child(odd) ul,
    .parcours--timeline .parcours__bloc:nth-child(odd) .parcours__portraits {
        text-align: left;
    }
}

/* Variante simple : timeline alignee a gauche pour parcours d'etapes courts (preparation #logique) */
.parcours--timeline.parcours--steps .parcours__bloc {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--sp-16);
    padding: var(--sp-6) 0 var(--sp-6) var(--sp-12);
    text-align: left;
}
.parcours--timeline.parcours--steps .parcours__bloc:last-child { margin-bottom: 0; }
.parcours--timeline.parcours--steps::before { left: 1.25rem; transform: none; }
.parcours--timeline.parcours--steps .parcours__bloc::before {
    top: var(--sp-6);
    left: 1.25rem;
    transform: translate(-50%, 0);
    right: auto;
}

/* Portraits (maitres, mentors) */
.parcours__portraits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-6);
}
.parcours__portraits .media-placeholder {
    margin: 0;
    max-width: none;
    padding: var(--sp-4);
}
.parcours__portraits .media-placeholder__desc { font-size: var(--fs-xs); }
@media (max-width: 640px) {
    .parcours__portraits { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.portrait {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.portrait--inline {
    max-width: 320px;
    margin: var(--sp-6) 0 0;
}
.portrait__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gris-clair);
    text-align: center;
    letter-spacing: 0.04em;
}
.portrait img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}
.portrait__credit {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--gris-clair);
    opacity: 0.65;
    text-align: center;
    font-style: italic;
}
.portrait--jaquette { max-width: 380px; }

/* Mur de photos parcours - vignettes carrees, legende sous chaque, hover couleur */
/* Accordeon checkbox hack : grille toujours rendue (SEO), clipping CSS uniquement.
   Pourquoi pas <details> : Chrome utilise ::details-content avec content-visibility:hidden
   en interne, ce qui empeche le contenu d'etre peint meme avec display:grid override. */
.parcours__wall-intro {
    color: var(--gris-clair);
    line-height: 1.65;
    margin-bottom: var(--sp-6);
}
/* Sous-section "Continuer d'apprendre" a l'interieur du meme article que "Retour au combat" */
.parcours__subtitle {
    font-size: var(--fs-xl);
    color: var(--bordeaux);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
}
.wall {
    display: flex;
    flex-direction: column;
}
.wall__toggle {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    border: 0;
    padding: 0;
    margin: -1px;
    white-space: nowrap;
}
.wall__more {
    order: 3;
    cursor: pointer;
    text-align: center;
    color: var(--bordeaux-2);
    font-weight: 600;
    border: 1px solid var(--bordeaux);
    padding: var(--sp-3) var(--sp-6);
    margin: var(--sp-4) auto 0;
    width: max-content;
    transition: background .25s ease, color .25s ease;
    user-select: none;
}
.wall__more:hover {
    background: var(--bordeaux);
    color: var(--blanc);
}
.wall__toggle:focus-visible ~ .wall__more {
    outline: 2px solid var(--bordeaux-2);
    outline-offset: 3px;
}
.wall__more-close { display: none; }
.wall__toggle:checked ~ .wall__more .wall__more-open { display: none; }
.wall__toggle:checked ~ .wall__more .wall__more-close { display: inline; }
.wall__title {
    font-size: var(--fs-2xl);
    color: var(--bordeaux);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: var(--sp-10) 0 var(--sp-6) 0;
    text-align: center;
}
.wall .wall__grid {
    order: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-1);
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 120px;
    overflow: hidden;
    position: relative;
    transition: max-height .6s ease;
}
/* Demi-ligne visible, flou progressif + fondu vers noir, accordeon ferme uniquement */
.wall .wall__grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.95) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 35%, black 70%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 35%, black 70%);
    transition: opacity .3s ease;
}
.wall__toggle:checked ~ .wall__grid {
    max-height: 5000px;
    overflow: visible;
}
.wall__toggle:checked ~ .wall__grid::after {
    opacity: 0;
    pointer-events: none;
}
.wall .wall__item {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none !important;
    display: block;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s linear .35s;
}
.wall .wall__item::marker { content: '' !important; color: transparent !important; }
.wall .wall__item figure {
    margin: 0;
    position: relative;
}
.wall .wall__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: outline-color .35s ease, box-shadow .35s ease;
    outline: 1px solid transparent;
    outline-offset: -1px;
}
.wall .wall__item:hover,
.wall .wall__item:focus-within {
    transform: scale(1.05);
    z-index: 2;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), z-index 0s linear;
}
.wall .wall__item:hover img,
.wall .wall__item:focus-within img {
    outline-color: var(--blanc);
    box-shadow: 0 10px 30px rgba(0,0,0,0.65);
}
/* Caption en overlay : cachee par defaut desktop, apparait au hover.
   Sur mobile : toujours visible (pas de hover sur touch). */
.wall .wall__item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.72);
    color: var(--blanc);
    padding: 0.35rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.wall .wall__item:hover figcaption,
.wall .wall__item:focus-within figcaption {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 768px) {
    /* Mobile : tap focusse l'item (tabindex injecte par JS), la regle
       generique :focus-within affiche la caption. Pas de scale sur touch. */
    .wall .wall__item:hover,
    .wall .wall__item:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wall .wall__item,
    .wall .wall__item:hover,
    .wall .wall__item:focus-within { transform: none; }
    .wall .wall__item:hover img,
    .wall .wall__item:focus-within img { box-shadow: none; }
}
@media (max-width: 1024px) { .wall .wall__grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px)  { .wall .wall__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .wall .wall__grid { grid-template-columns: repeat(3, 1fr); } }

/* Diptyque Panza : portrait + jaquette en biais miroir subtil */
.portrait-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: end;
    justify-items: center;
    margin: var(--sp-8) 0;
}
.portrait-pair .portrait { max-width: 320px; margin: 0; }
.portrait--tilt-l { transform: rotate(-1.5deg); transform-origin: bottom right; }
.portrait--tilt-r { transform: rotate(1.5deg); transform-origin: bottom left; }
@media (max-width: 640px) {
    .portrait-pair { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
    .portrait--tilt-l, .portrait--tilt-r { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .portrait--tilt-l, .portrait--tilt-r { transform: none; }
}

/* Temoignages : variantes carte (default) + cinema (hero pleine largeur) */
.temoignage {
    position: relative;
    padding: var(--sp-8);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.temoignage:hover {
    border-color: var(--gris);
    background: rgba(255,255,255,0.07);
}
/* Accessibilite clavier : la card depliable est focusable (role=button en JS) */
.temoignage:focus-visible,
.parcours__quotes li:focus-visible {
    outline: 2px solid var(--blanc);
    outline-offset: 2px;
}
.temoignage::before {
    content: "\201C"; /* guillemet ouvrant typographique */
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-4);
    font-size: 4rem;
    line-height: 1;
    color: var(--bordeaux-2);
    opacity: 0.4;
    pointer-events: none;
    font-family: Georgia, serif;
}
.temoignage__quote {
    color: var(--blanc-casse);
    font-size: var(--fs-md);
    line-height: 1.6;
    font-style: italic;
    padding-top: var(--sp-6);
}
.temoignage__author {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: var(--fs-sm);
    color: var(--gris-clair);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.temoignages__note {
    max-width: 56ch;
    margin: var(--sp-12) auto 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--gris);
    font-style: italic;
}

/* Verbatim complet d'un temoignage : ecrit en dur dans le HTML et RENDU - jamais
   display:none, attribut hidden ni opacity:0 - pour un poids SEO maximal. Simple
   accordeon CSS (max-height + overflow:hidden), motif indexe normalement par
   Google. La bulle bascule l'etat .is-open ; la hauteur reelle est pilotee en JS
   (scrollHeight) pour une ouverture fluide sans clipping. */
.temoignage__short {
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.temoignage__full {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    color: var(--blanc-casse);
    font-size: var(--fs-md);
    line-height: 1.6;
    font-style: italic;
    transition: max-height 0.45s ease;
}
.temoignage__full p {
    margin: 0 0 0.7em;
}
.temoignage__full p:last-child {
    margin-bottom: 0;
}
.temoignage.is-open .temoignage__full,
.parcours__quotes li.is-open .temoignage__full {
    padding-top: var(--sp-2);
}
/* Toggle pilote desormais par un clic sur la card entiere (cf. mental.js) ;
   l'ancienne pastille bulle est masquee (lue comme un bullet, inutile). */
.temoignage__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    vertical-align: -0.18em;
    margin-right: 0.5em;
    padding: 0;
    width: 1.4em;
    height: 1.4em;
    background: none;
    border: 0;
    color: var(--gris-clair);
    cursor: pointer;
    transition: color 0.15s ease;
}
.temoignage__toggle:hover,
.temoignage__toggle:focus-visible {
    color: var(--bordeaux-2);
}
.temoignage__toggle svg {
    width: 1em;
    height: 1em;
    display: block;
}
/* La bulle affiche un + (replie) ; ouverte, le trait vertical disparait -> - */
.temoignage__plus-v {
    transition: opacity 0.2s ease;
}
.temoignage.is-open .temoignage__plus-v,
.parcours__quotes li.is-open .temoignage__plus-v {
    opacity: 0;
}
/* Variante dans la timeline de parcours (Nicolas sur /le-coach) */
.parcours__quotes .temoignage__full {
    font-size: inherit;
}
.parcours__quotes li.is-open .temoignage__full {
    padding-top: var(--sp-2);
}

/* Mini-citations de temoignages integrees a un bloc de parcours */
.parcours__quotes {
    list-style: none;
    margin: var(--sp-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
}
.parcours__quotes li {
    width: 100%;
    max-width: 58ch;
    list-style: none;
    padding: var(--sp-4) var(--sp-6);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.parcours__quotes li:hover {
    border-color: var(--gris);
    background: rgba(255,255,255,0.07);
}
.parcours__quotes p {
    margin: 0 0 var(--sp-1);
    color: var(--blanc-casse);
    font-style: italic;
    line-height: 1.55;
}
/* Guillemet inline = indicateur, colle au texte, present ferme ET ouvert
   (sur la ligne condensee ET sur le 1er paragraphe deplie, jamais sur chaque p) */
.parcours__quotes .temoignage__short::before,
.parcours__quotes .temoignage__full p:first-child::before {
    content: "\201C";
    color: var(--bordeaux-2);
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.32em;
    margin-right: 0.06em;
}
.parcours__quotes cite {
    display: block;
    margin-top: var(--sp-4);
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--gris-clair);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Badge "Verifie sur Google" : pose sur un temoignage dont l'auteur a aussi
   publie un avis sur la fiche Google. Lien sortant vers l'avis reel = preuve de
   confiance verifiable. Pas de JSON-LD Review (avis self-serving interdit par Google). */
.temoignage__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-left: 0.6em;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gris);
    text-decoration: none;
    vertical-align: middle;
    transition: color 0.15s ease;
}
.temoignage__verified svg {
    width: 1em;
    height: 1em;
    color: var(--bordeaux-2);
    flex-shrink: 0;
}
.temoignage__verified:hover,
.temoignage__verified:focus-visible {
    color: var(--blanc-casse);
    text-decoration: underline;
}

/* ============================================================
   Page Avis & temoignages (/avis-prepa-mentale)
   DA "tres Google" : cartes blanches sur fond sombre, etoiles or,
   lien sortant verifiable. Texte integral (pas d'accordeon ici).
   ============================================================ */
.avis-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--bordeaux-2);
    margin: 0 0 var(--sp-3);
}
.avis-hero__title {
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 var(--sp-6);
}
.avis-hero__intro {
    max-width: 52ch;
    margin: var(--sp-6) auto 0;
    color: var(--gris-clair);
    font-size: var(--fs-lg);
    line-height: 1.55;
}

/* Hero /avis : on REUTILISE le hero de /le-coach (photo medailles IBJJF) avec le
   bloc note Google pose par-dessus. Meme image (hero-le-coach.*) et meme cadrage
   que le-coach : medailles en bas de cadre (object-position center 65%), intro
   push-in assombrie (hero-coach-intro) pour garder eyebrow/titre/blanc lisibles. */
.hero--avis .hero__media--single .hero__still {
    object-position: center 65%;
    transform-origin: center 65%;
    animation-name: hero-coach-intro;
}
/* Aligne a gauche comme les autres hero (le titre/intro avis sont centres en dehors du hero). */
.hero--avis .avis-hero__title { max-width: 22ch; }
.hero--avis .avis-hero__intro { max-width: 56ch; margin-left: 0; margin-right: 0; }
/* Bloc agregat pose sur une photo : fond opacifie + leger flou pour garder le contraste. */
.hero--avis .avis-aggregate {
    justify-self: start;
    background: rgba(10, 10, 10, 0.58);
    border-color: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
@media (max-width: 768px) {
    .hero--avis .avis-aggregate { justify-self: center; }
    .hero--avis .avis-hero__intro { margin-left: auto; margin-right: auto; }
}
/* Bloc agregat : note 5,0 + 5 etoiles or + compteur dynamique */
.avis-aggregate {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3) var(--sp-6);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius-lg);
}
.avis-aggregate__score {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--blanc);
    line-height: 1;
}
.avis-aggregate__count {
    font-size: var(--fs-sm);
    color: var(--gris-clair);
    font-weight: 600;
}
.avis-stars { display: inline-flex; gap: 0.1em; }
.avis-star {
    width: 1.15em;
    height: 1.15em;
    fill: #fbbc04;            /* or Google */
    display: block;
}

.avis-list__head { margin-bottom: var(--sp-12); }
.avis-list__head .section__lead { max-width: 64ch; }
.avis-list__outro {
    max-width: 64ch;
    margin: var(--sp-12) auto 0;
    text-align: center;
    color: var(--gris-clair);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
/* Bloc E-E-A-T : relie les avis (experience client) aux credentials de Pao (expertise) */
.avis-eeat {
    max-width: 64ch;
    margin: var(--sp-8) auto 0;
    padding: var(--sp-6);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius-lg);
    text-align: center;
}
.avis-eeat p { margin: 0; color: var(--gris-clair); font-size: var(--fs-sm); line-height: 1.6; }
.avis-aggregate__sep { color: var(--gris); }
/* Liens internes vers la page avis (maillage) */
.temoignages__more,
.parcours__quotes-more,
.section__proof { text-align: center; margin-top: var(--sp-6); }
.section__proof { margin-top: var(--sp-4); font-size: var(--fs-sm); }

/* Liste : avis (card blanche) + CTA cyclique, empiles */
.avis-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    max-width: 720px;
    margin-inline: auto;
}
.avis-item { display: flex; flex-direction: column; gap: var(--sp-4); }

.avis {
    background: var(--blanc);
    color: #1f1f1f;
    border-radius: 12px;
    padding: var(--sp-6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.25);
}
.avis__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.avis__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}
.avis__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.avis__name { font-weight: 600; color: #202124; font-size: var(--fs-md); }
.avis__meta { font-size: var(--fs-xs); color: #5f6368; }
.avis__gicon { width: 20px; height: 20px; margin-left: auto; flex-shrink: 0; }

.avis__stars { display: flex; gap: 0.1em; margin-bottom: var(--sp-3); }
.avis__body {
    margin: 0;
    color: #3c4043;
    font-size: var(--fs-md);
    line-height: 1.6;
}
.avis__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1a73e8;          /* bleu lien Google */
    text-decoration: none;
}
.avis__verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    color: #1e8e3e;          /* vert "verifie" */
}
.avis__verified-icon svg { width: 100%; height: 100%; }
.avis__verified:hover,
.avis__verified:focus-visible { text-decoration: underline; }

/* CTA cyclique sous chaque avis : bande sobre, discrete */
.avis-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-6);
    padding: var(--sp-4) var(--sp-6);
    background: rgba(200,16,46,0.06);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius-lg);
}
.avis-cta__text {
    margin: 0;
    color: var(--blanc-casse);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.avis-cta .btn { flex-shrink: 0; }

@media (max-width: 560px) {
    .avis-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .avis-cta .btn { width: 100%; }
}

/* Badge avis Google dans le footer (look Google : logo G + etoiles or) */
.footer__google a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none;
    color: inherit;
}
.footer__google-g { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.footer__google-score { font-weight: 700; }
.footer__google-stars { display: inline-flex; gap: 0.05em; }
.footer__google-stars svg { width: 0.95em; height: 0.95em; fill: #fbbc04; display: block; }
.footer__google-label { opacity: 0.85; }
.footer__google a:hover .footer__google-label,
.footer__google a:focus-visible .footer__google-label { text-decoration: underline; opacity: 1; }

/* Container etroit (pages legales, contenu textuel) */
.container--narrow {
    max-width: 760px;
}

/* Pages legales - typo de lecture */
.legal h2 {
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xl);
    color: var(--blanc);
    border-bottom: 1px solid var(--noir-3);
    padding-bottom: var(--sp-2);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal ul {
    color: var(--gris-clair);
    line-height: 1.7;
    margin-bottom: var(--sp-4);
}
.legal ul {
    padding-left: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.legal ul li { list-style: disc; }
.legal ul li::marker { color: var(--gris); }
.legal strong { color: var(--blanc); }
.legal a {
    color: var(--bordeaux-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal a:hover { color: var(--blanc); }
.legal--draft .legal__notice {
    padding: var(--sp-4) var(--sp-6);
    background: rgba(122, 10, 20, 0.12);
    border-radius: var(--radius);
    margin-bottom: var(--sp-12);
}

/* ==========================================================================
   Formulaire de contact V1.x
   ========================================================================== */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    max-width: 640px;
    margin: 0 auto;
}
.form__row { display: flex; flex-direction: column; gap: var(--sp-2); }
.form__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--blanc-casse);
    letter-spacing: 0.02em;
}
.form__req { color: var(--bordeaux-2); }
.form__input {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    font: inherit;
    font-size: var(--fs-md);
    color: var(--blanc);
    background: var(--noir-3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.form__input:focus {
    outline: none;
    border-color: var(--bordeaux-2);
    background: var(--noir-2);
}
.form__input::placeholder { color: var(--gris); }
.form__textarea { resize: vertical; min-height: 140px; font-family: inherit; }

/* Honeypot : cache visuellement et a11y mais le bot ne sait pas */
.form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__rgpd {
    font-size: var(--fs-xs);
    color: var(--gris);
    line-height: 1.5;
}
.form__rgpd a { color: var(--bordeaux-2); text-decoration: underline; }

.form__actions { display: flex; }

.form__status {
    font-size: var(--fs-sm);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    min-height: 1.5em;
    color: transparent;
    background: transparent;
    transition: color var(--t-fast), background var(--t-fast);
}
.form__status.is-pending { color: var(--gris-clair); background: rgba(255,255,255,0.04); }
.form__status.is-success { color: var(--blanc); background: rgba(50, 130, 50, 0.18); border-left: 3px solid #4caf50; }
.form__status.is-error   { color: var(--blanc); background: rgba(193, 18, 31, 0.18); border-left: 3px solid var(--bordeaux); }

/* Cloudflare Turnstile (le widget est cree par leur JS, on cale juste la marge) */
.cf-turnstile { min-height: 65px; }

/* ==========================================================================
   Quiz 8 sliders + form RDV light (/optimiser #rdv)
   - Sliders non touches : thumb visible mais valeur affichee "Non repondu"
   - Reveal progressif : sliders -> resultat -> identite
   ========================================================================== */
.form.rdv {
    max-width: 760px; /* un peu plus large que .form standard pour que les sliders respirent */
    gap: var(--sp-8);
}

.quiz {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    transition: opacity var(--t-fast);
}
.quiz--collapsed {
    opacity: 0.35;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Sections du quiz : avant / pendant / apres le combat (chaque section = une carte) */
.quiz__section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-8);
    background: var(--noir-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.quiz__section-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--bordeaux-2);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.quiz__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--noir-3);
}
.quiz__item:last-of-type { border-bottom: 0; }

.quiz__label {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--blanc-casse);
    line-height: 1.45;
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
}
.quiz__num {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bordeaux-2);
    min-width: 2.5em;
}

.quiz__slider-wrap {
    display: grid;
    grid-template-columns: 5.5rem 1fr 5.5rem; /* largeur fixe des legendes = rail aligne sur les 12 lignes */
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
@media (max-width: 540px) {
    .quiz__slider-wrap {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }
}

.quiz__pole {
    font-size: var(--fs-xs);
    color: var(--gris);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.quiz__pole--low  { text-align: right; }
.quiz__pole--high { text-align: left;  }
@media (max-width: 540px) {
    .quiz__pole--low,
    .quiz__pole--high { text-align: center; }
}

.quiz__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--noir-3);
    border-radius: 999px;
    outline: none;
    accent-color: var(--bordeaux-2);
    opacity: 0.65;
    transition: opacity var(--t-fast);
    cursor: pointer;
}
.quiz__slider:focus,
.quiz__slider:hover,
.quiz__slider--touched { opacity: 1; }

/* Thumb visuel (-webkit pour Chrome/Safari, -moz pour Firefox) */
.quiz__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gris-clair);
    border: 2px solid var(--noir);
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}
.quiz__slider--touched::-webkit-slider-thumb { background: var(--bordeaux-2); }
.quiz__slider:active::-webkit-slider-thumb   { transform: scale(1.1); }

.quiz__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gris-clair);
    border: 2px solid var(--noir);
    cursor: pointer;
    transition: background var(--t-fast);
}
.quiz__slider--touched::-moz-range-thumb { background: var(--bordeaux-2); }

.quiz__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
}

/* ----- Note de saut : le form de RDV est toujours ouvert plus bas ----- */
.quiz__rdv-skip {
    margin: var(--sp-6) auto 0;
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255,255,255,0.08);
    color: var(--gris-clair);
    max-width: 56ch;
    line-height: 1.5;
    text-align: center;
}

/* ----- Resultat du quiz ----- */
.quiz__result {
    background: var(--noir-2);
    border-left: 3px solid var(--bordeaux);
    padding: var(--sp-8);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.quiz__result-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--blanc);
    margin: 0;
    letter-spacing: -0.01em;
}
.quiz__result-subtitle {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--bordeaux-2);
    margin: 0;
}

/* ----- Profil : 3 cartes (avant / combat / apres), une moyenne en gros ----- */
.quiz__profil {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 540px) {
    .quiz__profil { grid-template-columns: 1fr; }
}
.quiz__profil-card {
    background: var(--noir-3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    padding: var(--sp-6) var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
    container-type: inline-size; /* etoiles dimensionnees a la largeur de la carte */
}
.quiz__profil-card-title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--gris-clair);
    margin: 0;
}
.quiz__profil-empty {
    font-size: var(--fs-sm);
    color: var(--gris);
    font-style: italic;
    padding: var(--sp-3) 0;
}
.quiz__profil-card .stars { font-size: 15cqi; } /* ~90% de la largeur de carte, responsive */

/* ----- Etoiles /5 (demi-precision par clip de largeur) ----- */
.stars {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0.12em;
}
.stars__gap  { color: var(--star-gap, var(--gris-encre)); }
.stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--star-val, 0%);
    overflow: hidden;
    color: var(--star-fill, var(--blanc));
}

/* Analyse : base grise + remplissage qui grandit (acquis -> 5) et fond
   orange -> jaune -> vert (vert plein a 5), maintien, puis reset en boucle. */
.stars--anim .stars__gain {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    width: var(--star-acq, 0%);
    color: var(--note-col, var(--note-rouge));
    animation: gainfill 3.8s ease-in-out infinite;
}
@keyframes gainfill {
    /* Phase 1 : la note s'affiche, glow dans sa couleur, petite attente */
    0%,  18% { width: var(--star-acq, 0%); color: var(--note-col); text-shadow: 0 0 9px var(--note-col); }
    /* Phase 2 : progression + fade vers le vert (glow eteint pendant la montee) */
    24%      { width: var(--star-acq, 0%); color: var(--note-col); text-shadow: none; }
    45%      { color: var(--note-jaune); }
    65%      { width: 100%; color: var(--note-vert); text-shadow: none; }
    /* Phase 3 : plein vert, glow vert, petite attente, puis loop */
    74%, 100% { width: 100%; color: var(--note-vert); text-shadow: 0 0 9px rgba(95, 167, 119, 0.65); }
}
@media (prefers-reduced-motion: reduce) {
    .stars--anim .stars__gain { animation: none; }
}

/* Intro constat sous "Votre profil" (le travail vient apres, dans Analyse) */
.quiz__profil-intro {
    font-size: var(--fs-md);
    color: var(--blanc-casse);
    margin: 0;
    line-height: 1.55;
    text-align: center;
}

/* ----- Analyse : paragraphes (alignes a gauche) dans un cadre ----- */
.quiz__analyse {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--noir-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
}
.quiz__analyse p {
    font-size: var(--fs-md);
    color: var(--blanc-casse);
    margin: 0;
    line-height: 1.55;
}
.quiz__analyse-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.quiz__analyse-item .stars { font-size: 1.3rem; align-self: flex-start; }
.quiz__analyse-text {
    font-size: var(--fs-md);
    color: var(--blanc-casse);
    margin: 0;
    line-height: 1.55;
}

/* ----- Recommandations : lead + 2 cards (mental / physio) + RDV optionnel ----- */
.quiz__reco-lead {
    font-size: var(--fs-md);
    color: var(--blanc-casse);
    margin: 0;
}
.quiz__reco {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.quiz__reco-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 540px) {
    .quiz__reco-cards { grid-template-columns: 1fr; }
}
/* Cartes reco : fond blanc pour qu'elles ressortent fort sur le bloc resultat sombre. */
.quiz__reco-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--blanc);
    border: 1px solid var(--blanc-papier);
    border-top: 4px solid var(--bordeaux-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.quiz__reco-card-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--noir);
    margin: 0;
}
.quiz__reco-card-text {
    flex: 1; /* pousse le bouton en bas */
    font-size: var(--fs-sm);
    color: var(--gris-encre);
    margin: 0;
    line-height: 1.5;
}
.quiz__reco-card .btn {
    width: 100%;
    margin-top: var(--sp-2);
}
.quiz__reco-note {
    text-align: center;
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--gris);
}

/* ----- Partage : QR + boutons ----- */
.quiz__share-lead {
    font-size: var(--fs-md);
    color: var(--blanc-casse);
    margin: 0;
}
.quiz__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6);
}
.quiz__share-qr { flex-shrink: 0; }
.quiz__share-qr-canvas {
    display: block;
    width: 190px;
    height: auto;
    max-width: 100%;
    border-radius: var(--radius);
}
.quiz__share-actions {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.quiz__share-note {
    font-size: var(--fs-xs);
    color: var(--gris);
    min-height: 1.2em;
    word-break: break-all;
}

/* ----- Bloc identite (form RDV light) ----- */
.rdv__identity {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-8);
    background: var(--noir-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid var(--bordeaux-2);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    scroll-margin-top: var(--sp-8);
}
.rdv__identity-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--blanc);
    margin: 0;
    letter-spacing: -0.01em;
}
.rdv__identity-lead {
    font-size: var(--fs-md);
    color: var(--gris-clair);
    margin: 0;
    line-height: 1.5;
}

/* Variants form additionnelles */
.form__row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.form__row--two > div { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (max-width: 540px) {
    .form__row--two { grid-template-columns: 1fr; }
}
.form__opt {
    font-weight: 400;
    color: var(--gris);
    font-size: var(--fs-xs);
    margin-left: var(--sp-2);
}
.form__hint {
    font-size: var(--fs-sm);
    color: var(--gris-clair);
    margin: 0;
    line-height: 1.5;
}

.form__radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.form__radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--noir-3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--blanc-casse);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.form__radio:hover { border-color: var(--bordeaux-2); }
.form__radio input { accent-color: var(--bordeaux-2); }
.form__radio:has(input:checked) {
    border-color: var(--bordeaux-2);
    background: rgba(122, 10, 20, 0.18);
}

/* ==========================================================================
   Packs detailles (/preparation #packs) - fiche produit editoriale
   Header : titre enorme + prix encadre rouge + chiffre filigrane derriere
   Body : split 5/7 (lead+format+CTA / check-list) en desktop
   ========================================================================== */
.pack {
    max-width: var(--container-wide);
    margin: 0 auto var(--sp-32);
    padding: var(--sp-12) 0 0 0;
    background: transparent;
    border-radius: 0;
    border-top: 1px solid var(--gris-encre);
    position: relative;
}
.pack:first-of-type { border-top: 0; padding-top: 0; }
.pack:last-child { margin-bottom: 0; }

.pack__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    align-items: end;
    margin-bottom: var(--sp-12);
    position: relative;
}
@media (min-width: 800px) {
    .pack__head { grid-template-columns: 7fr 5fr; align-items: end; }
}

/* Chiffre filigrane (data-number="01") derriere le titre */
.pack__head::before {
    content: attr(data-number);
    position: absolute;
    top: -0.45em;
    right: -0.05em;
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    color: var(--blanc-papier);
    opacity: 0.05;
    line-height: 0.85;
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.pack__title {
    font-size: var(--fs-3xl);
    color: var(--blanc);
    margin: 0;
    line-height: 1.05;
    position: relative;
    z-index: 1;
    max-width: 14ch;
}

.pack__price-block {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    background: var(--bordeaux-deep);
    border: 1px solid var(--bordeaux-2);
    border-radius: var(--radius);
    justify-self: start;
    position: relative;
    z-index: 1;
}
@media (min-width: 800px) {
    .pack__price-block { justify-self: end; }
}
.pack__price-tag {
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bordeaux-2);
    font-weight: 700;
}
.pack__price {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--blanc);
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    align-self: flex-start;
}

.pack__body {
    display: grid;
    gap: var(--gutter-edito);
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .pack__body { grid-template-columns: 5fr 7fr; }
}
.pack__body-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.pack__lead {
    font-size: var(--fs-lg);
    color: var(--blanc-papier);
    line-height: 1.55;
    margin: 0;
}
.pack__sub {
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bordeaux);
    margin: 0 0 var(--sp-3) 0;
}
.pack__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    color: var(--gris-clair);
    line-height: 1.55;
    padding: 0;
    margin: 0;
}
.pack__list li {
    list-style: none;
    padding-left: 1.5em;
    position: relative;
}
.pack__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.7em;
    height: 2px;
    background: var(--gris);
}
.pack__list--sources li { font-size: var(--fs-sm); }
.pack__list--sources em { color: var(--blanc); font-style: italic; }
.pack__note {
    padding: var(--sp-4) var(--sp-6);
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--gris-encre);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--gris-clair);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}
.pack__cta {
    margin: 0;
    padding-top: var(--sp-2);
}
/* CTA Commander en pied de pack (enfant direct de .pack, sous les colonnes) :
   tout en bas sur mobile (colonnes empilees) comme sur PC. */
.pack > .pack__cta { margin-top: var(--sp-8); padding-top: 0; }
/* Idem pour le tunnel Coaching (bouton "Valider les details" + formulaire) :
   meme traitement, en pied de pack sous les colonnes. */
.pack > .pack__checkout { margin-top: var(--sp-8); }
.pack > .pack__checkout .pack__checkout-form { max-width: 520px; }

/* Deux cartes par pack : Format / Leviers (ou Tarif / Cadre pour Coaching) */
.pack__cols {
    display: grid;
    gap: var(--gutter-edito);
    grid-template-columns: 1fr;
    margin-top: var(--sp-8);
    align-items: start;
}
@media (min-width: 900px) {
    .pack__cols { grid-template-columns: 5fr 7fr; }
    /* Le bouton Commander vit DANS la carte Format (colonne gauche). La carte
       epouse son contenu (align-self: start) : elle ne s'etire pas a la hauteur
       de la carte Objectifs, donc le bouton reste colle a la liste sans flotter. */
    .pack__cols > .pack__card:has(> .pack__cta) { align-self: start; }
}
/* CTA Commander en pied de carte Format : seul le gap flex de .pack__card gere
   la distance avec la liste (pas de padding additionnel). */
.pack__card > .pack__cta { margin: 0; padding-top: 0; }
.pack__card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-8);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius);
}

/* Leviers : 3 moments empiles, separes par un filet, mot du moment (2 lignes) en filigrane subtil */
.pack__chrono {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}
.chrono-step {
    position: relative;
    overflow: hidden;
}
.chrono-step + .chrono-step {
    border-top: 1px solid var(--gris-encre);
    padding-top: var(--sp-8);
}
/* Mot du moment, sur 2 lignes, filigrane subtil derriere le texte */
.chrono-step::before {
    content: attr(data-w1) "\A" attr(data-w2);
    white-space: pre;
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-display);
    color: var(--blanc-papier);
    opacity: 0.05;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.chrono-step__ux {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--blanc);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.35;
    max-width: 34ch;
}
.chrono-step__how {
    position: relative;
    z-index: 1;
    margin: var(--sp-2) 0 0 0;
    color: var(--gris-clair);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* Tunnel paiement Coaching : revele les champs en place avant le paiement */
.pack__checkout { margin-top: var(--sp-2); }
.pack__checkout-form {
    margin-top: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-6);
    background: var(--noir);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius);
}
.pack__checkout-form[hidden] { display: none; }
.checkout-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.checkout-field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.checkout-field--row > div { display: flex; flex-direction: column; gap: var(--sp-2); }
.pack__checkout-form label {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--blanc-papier);
}
.pack__checkout-form select,
.pack__checkout-form input[type="date"],
.pack__checkout-form input[type="text"] {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--noir-2);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius);
    color: var(--blanc-casse);
    font: inherit;
}
.pack__checkout-form select:focus,
.pack__checkout-form input:focus {
    outline: none;
    border-color: var(--blanc);
}
.checkout-check {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--gris-clair);
    line-height: 1.5;
    cursor: pointer;
}
.checkout-check input { margin-top: 0.2em; flex-shrink: 0; }
.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--gris-encre);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gris-clair);
}
.checkout-total strong {
    font-size: var(--fs-xl);
    color: var(--blanc);
    letter-spacing: 0;
}
.btn[data-checkout-pay][disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.checkout-note {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--gris);
}

/* Sources scientifiques : repliees, discretes */
.pack__sources {
    margin-top: var(--sp-6);
    border: 1px solid var(--gris-encre);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
}
.pack__sources > summary {
    cursor: pointer;
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bordeaux-2);
    list-style: none;
}
.pack__sources > summary::-webkit-details-marker { display: none; }
.pack__sources > summary::after { content: " +"; }
.pack__sources[open] > summary::after { content: " -"; }
.pack__sources .pack__list {
    padding: 0 var(--sp-6) var(--sp-6) var(--sp-6);
}

/* Quote cinema : bande pleine largeur photo+citation, remplace .pack__quote en pleine echelle.
   Pour temoignages poids lourd integres au pack. */
.quote--cinema {
    margin: var(--sp-12) calc(-1 * var(--gutter-edito)) var(--sp-6);
    padding: var(--sp-12) var(--gutter-edito);
    background: var(--noir-paper);
    border-top: 1px solid var(--gris-encre);
    border-bottom: 1px solid var(--gris-encre);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: center;
}
@media (min-width: 720px) {
    .quote--cinema { grid-template-columns: 200px 1fr; }
}
.quote--cinema .quote__media {
    aspect-ratio: 1 / 1;
    max-width: 200px;
}
.quote--cinema blockquote p {
    color: var(--blanc);
    font-size: var(--fs-xl);
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 var(--sp-4) 0;
}
.quote--cinema figcaption {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--blanc);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quote--cinema .quote__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Verbatim intro home : mise en page coach-intro (portrait a gauche + citation) */
/* Portrait reduit pour le verbatim intro (thumb 400px) */
.coach-portrait--sm { flex-basis: 200px; max-width: 200px; }
@media (max-width: 767px) {
    .coach-portrait--sm { max-width: 180px; }
}
.coach-verbatim { margin: 0; position: relative; }
.coach-verbatim::before {
    content: "\201C"; /* guillemet ouvrant typographique, comme .temoignage */
    display: block;
    font-size: 4rem;
    line-height: 0.7;
    color: var(--bordeaux);
    opacity: 0.35;
    margin-bottom: var(--sp-2);
}
.coach-verbatim blockquote { margin: 0; }
.coach-verbatim blockquote p {
    font-size: var(--fs-lg);
    line-height: 1.5;
    font-style: italic;
    color: var(--blanc-casse);
    margin: 0 0 var(--sp-4);
    text-wrap: balance;
}
.coach-verbatim blockquote p:last-child { margin-bottom: 0; }
.coach-verbatim figcaption {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gris-clair);
    letter-spacing: 0.04em;
}

/* Citation legacy dans un pack (conserve pour fallback, sera deprecated) */
.pack__quote {
    margin: var(--sp-8) 0 var(--sp-6);
    padding: var(--sp-6) var(--sp-8);
    background: var(--noir-2);
    border-radius: var(--radius-lg);
    position: relative;
}
.pack__quote::before {
    content: "\201C";
    position: absolute;
    top: 0;
    left: var(--sp-4);
    font-size: 3rem;
    line-height: 1;
    color: var(--bordeaux);
    opacity: 0.4;
    font-family: Georgia, serif;
}
.pack__quote blockquote p {
    color: var(--blanc-casse);
    font-style: italic;
    line-height: 1.65;
    margin: 0;
}
.pack__quote figcaption {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gris-clair);
    letter-spacing: 0.04em;
}

/* Texte d'ancrage local SEO (sous les cards zone, avant le pivot) */
.zone__ancrage {
    max-width: 800px;
    margin: var(--sp-12) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    color: var(--gris-clair);
    line-height: 1.7;
    font-size: var(--fs-md);
}

/* Pivot inter-pages (renvoi vers /le-coach, /preparation) */
.zone__pivot {
    max-width: 720px;
    margin: var(--sp-16) auto 0;
    text-align: center;
    padding-top: var(--sp-8);
    border-top: 1px solid var(--noir-3);
}
.zone__pivot a {
    color: var(--bordeaux-2);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.zone__pivot a:hover { color: var(--blanc); }

/* Hero media : still cinema avec animation CSS push-in + intensity ramp + vignette */
.hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -2;
    background: var(--noir);
}
.hero__media img,
.hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Hero home : video desktop + image portrait mobile (toggle CSS pour eviter
   le hyper-crop sur viewport portrait avec une video landscape 1152x618) */
.hero__media-mobile { display: none; }
.hero__media-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 768px) {
    .hero__media-desktop { display: none; }
    .hero__media-mobile { display: block; position: absolute; inset: 0; }
}

/* Slideshow hero /preparation : 4 stills statiques en stack, anime PAR CSS
   (opacite + transform scale + filter blur+brightness = effet focus rack).
   Aucun mp4, aucun baked zoom. Cycle 24s : 4 images x 6s avec crossfade 1s superpose.
   Mobile : crops portrait 768x1024 servis via picture media queries */
.hero__media--slideshow .hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    animation: hero-prep-cycle 24s ease-in-out infinite;
    transform-origin: center center;
    will-change: opacity, transform, filter;
}
.hero__media--slideshow .hero__slide--1 { animation-delay: 0s; }
.hero__media--slideshow .hero__slide--2 { animation-delay: 6s; }
.hero__media--slideshow .hero__slide--3 { animation-delay: 12s; }
.hero__media--slideshow .hero__slide--4 { animation-delay: 18s; }

@keyframes hero-prep-cycle {
    0%    { opacity: 0; transform: scale(1.00); filter: blur(6px) brightness(0.65); }
    4%    { opacity: 1; }
    15%   { filter: blur(0) brightness(1.00); }
    25%   { opacity: 1; transform: scale(1.04); filter: blur(0) brightness(1.05); }
    29%   { opacity: 0; transform: scale(1.04); filter: blur(0) brightness(1.00); }
    100%  { opacity: 0; transform: scale(1.04); filter: blur(0) brightness(1.00); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__media--slideshow .hero__slide { animation: none; opacity: 0; }
    .hero__media--slideshow .hero__slide:nth-child(1) { opacity: 1; }
}

/* Hero /optimiser : single still, focus rack one-shot (pas de loop, on fige a la fin).
   Le zoom (scale 1.00 -> 1.12) se resout EN MEME TEMPS que le defloutage (~18%) : punch-in
   net qui "claque" en place, puis on tient. Ratio zoom/flou repris du hero /partenariat.
   Depart a scale 1.00 pour eviter de laisser apparaitre le fond noir aux bords. */
.hero__media--single .hero__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transform-origin: center top;
    animation: hero-optimiser-intro 12s ease-out forwards;
    will-change: transform, filter;
}
/* Zoom et defloutage SYNCHRONES sur toute la duree (pas de "claque" en 1,8s puis gel) :
   un seul mouvement lent et continu, zoom doux (1.06) pour eviter le flou de mouvement. */
@keyframes hero-optimiser-intro {
    0%   { transform: scale(1.00); filter: blur(6px) brightness(0.78); }
    100% { transform: scale(1.06); filter: blur(0)   brightness(1.00); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__media--single .hero__still { animation: none; transform: none; filter: none; }
}
/* Hero /optimiser : le sujet (combattant de dos, casque) est a droite, l'arene
   eclairee occupe la gauche. Le texte du hero etant aligne a gauche, on ajoute
   un scrim horizontal (sombre a gauche -> transparent a droite) PAR-DESSUS le
   voile vertical, pour garder le blanc lisible sans assombrir le sujet. */
.hero--optimiser .hero__overlay {
    background:
        linear-gradient(90deg,
            rgba(10,10,10,0.92) 0%,
            rgba(10,10,10,0.74) 28%,
            rgba(10,10,10,0.30) 52%,
            rgba(10,10,10,0.04) 100%),
        linear-gradient(180deg,
            rgba(10,10,10,0.80) 0%,
            rgba(10,10,10,0.40) 28%,
            rgba(10,10,10,0.40) 62%,
            rgba(10,10,10,0.90) 100%);
}

/* Heros pages discipline (JJB, MMA, boxe...) : image FIXE, AUCUNE animation post-load
   (pas de zoom/defloutage). Voile leger pour que l'image reste bien visible,
   juste assez de scrim haut/bas pour garder le texte lisible. */
.hero--jjb .hero__media--single .hero__still,
.hero--mma .hero__media--single .hero__still,
.hero--boxe .hero__media--single .hero__still {
    animation: none;
    transform: none;
    filter: none;
    object-position: center center;
}
.hero--jjb .hero__overlay,
.hero--mma .hero__overlay,
.hero--boxe .hero__overlay {
    background:
        linear-gradient(180deg,
            rgba(10,10,10,0.58) 0%,
            rgba(10,10,10,0.30) 30%,
            rgba(10,10,10,0.30) 60%,
            rgba(10,10,10,0.82) 100%);
}

/* Hero /le-coach : medailles IBJJF en compo horizontale, le sujet est dans la moitie basse.
   Override object-position + transform-origin pour que le push-in pousse vers la rangee de
   medailles. Override aussi la keyframe pour assombrir la photo (brightness 0.85 en final)
   sans toucher a la source : on garde de la matiere si on veut iterer plus tard. */
.hero--coach .hero__media--single .hero__still {
    object-position: center 65%;
    transform-origin: center 65%;
    /* Intro one-shot seule : la "vie" du hero coach vient desormais du balayage de
       lumiere (signature) + de la parallaxe scroll (couche commune), plus d'une
       boucle de zoom (respiration deplacee sur la home). */
    animation-name: hero-coach-intro;
}
@keyframes hero-coach-intro {
    0%   { transform: scale(1.00); filter: blur(8px) brightness(0.55); }
    20%  { filter: blur(0)   brightness(0.65); }
    100% { transform: scale(1.12); filter: blur(0)   brightness(0.65); }
}
@keyframes hero-coach-sheen {
    0%, 72% { background-position: 165% 0; }
    100%    { background-position: -65% 0; }
}
/* Balayage de lumiere sur la rangee de medailles (signature temps de /le-coach). Pose
   sur l'overlay (au-dessus du voile sombre, sous le texte), blend screen = glint qui
   passe sur les medailles. Bande basse (~48%), passage bref toutes les ~11s. Desktop
   seul (mobile : on verra plus tard). */
@media (min-width: 769px) {
    .hero--coach .hero__overlay::after {
        content: "";
        position: absolute;
        inset: 0;                              /* toute la hauteur */
        background: linear-gradient(100deg,
            transparent 46%,
            rgba(255,255,255,0.04) 49%,
            rgba(255,255,255,0.18) 50%,
            rgba(255,255,255,0.04) 51%,
            transparent 54%);
        background-size: 260% 100%;
        background-repeat: no-repeat;
        background-position: 165% 0;
        /* fondu vertical : bords (haut/bas) quasi invisibles, max au centre */
        -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 50%, transparent 96%);
                mask-image: linear-gradient(180deg, transparent 4%, #000 50%, transparent 96%);
        mix-blend-mode: overlay;
        pointer-events: none;
        animation: hero-coach-sheen 13s ease-in-out 14s infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero--coach .hero__overlay::after { animation: none; opacity: 0; }
}

/* ============================================================================
   Parallaxe scroll UNIVERSELLE (.hero--parallax) : couche commune a tous les heros.
   Liee a l'ACTION (scroll), pas a un timer -> legere et "gratuite". Sur le CONTENEUR
   .hero__media (translateY) = element distinct des anims internes (intro/scale des
   stills, scroll horizontal du panorama, slideshow, rack focus) -> aucun conflit.
   Conteneur sur-dimensionne (120%, top -10%) pour le mou vertical = jamais de bord noir.
   @supports : sans scroll-timeline on n'applique RIEN (sinon boucle de temps parasite).
   Desktop seul ; reduced-motion coupe.
   ============================================================================ */
@keyframes hero-parallax {
    from { transform: translateY(0); }
    to   { transform: translateY(-6%); }
}
@media (min-width: 769px) {
    @supports (animation-timeline: scroll()) {
        .hero--parallax .hero__media {
            top: -10%;
            height: 120%;
            bottom: auto;
            animation: hero-parallax linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 100vh;
            will-change: transform;
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero--parallax .hero__media {
        animation: none;
        transform: none;
        top: 0;
        height: 100%;
    }
}

/* Respiration discrete = signature temps de la home (sur la video desktop, desktop-only).
   Cycle naturel (10s) : inspiration 3s (0-30%), blocage haut 1s (30-40%), expiration 5s
   (40-90%), blocage bas 1s (90-100%). ease-in-out = chaque phase est une courbe douce. */
@keyframes hero-home-breathe {
    0%   { transform: scale(1.000); }
    30%  { transform: scale(1.022); }
    40%  { transform: scale(1.022); }
    90%  { transform: scale(1.000); }
    100% { transform: scale(1.000); }
}
@media (min-width: 769px) {
    /* La respiration ne demarre QU'APRES la fin de la video : JS ajoute .is-breathing
       sur l'evenement 'ended' (cf. mental.js). Avant : aucune anim, la video joue seule. */
    .hero--home .hero__media-desktop.is-breathing {
        transform-origin: center center;
        animation: hero-home-breathe 10s ease-in-out infinite;
        will-change: transform;
        /* force un calque GPU : scaler une <video> sans ca = repaint main-thread = saccades */
        backface-visibility: hidden;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero--home .hero__media-desktop { animation: none; transform: none; }
}

/* Home : NOIR au depart, puis la video fait un FADE-IN quand elle joue (JS ajoute
   .video-ready sur 'playing'). On ne montre PAS le poster avant la video. Le poster
   (.hero__poster) ne sert que de FALLBACK si la video ne peut pas jouer : JS ajoute
   .video-failed (erreur ou pas de demarrage) et l'image apparait alors en fondu. */
@media (min-width: 769px) {
    .hero--home .hero__media-desktop {
        opacity: 0;
        transition: opacity 0.8s ease;
    }
    .hero--home .hero__media.video-ready .hero__media-desktop { opacity: 1; }
}
.hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
    opacity: 0;                 /* cache par defaut : noir avant la video, pas l'image */
    transition: opacity 0.8s ease;
}
.hero--home .hero__media.video-failed .hero__poster { opacity: 1; }
@media (max-width: 768px) {
    .hero__poster { display: none; }
}

/* Signature temps /optimiser : petites LUMIERES ROUGES LOINTAINES (arene), chacune un
   ELEMENT distinct (.hero-light) avec son PROPRE comportement et timing (autonomie) :
   certaines derivent un peu, une fait un glow rapide, d'autres scintillent lentement.
   Posees dans l'overlay (au-dessus du voile, sous le texte), blend screen. Tailles en vw
   (scalent avec l'image), pas de scale (lointaines = pas de zoom). Desktop seul. */
.hero-lights { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 768px) { .hero-lights { display: none; } }
.hero-light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: opacity, transform;
    background: radial-gradient(circle, rgba(220,30,52,0.58) 0%, rgba(220,30,52,0) 70%);
}
/* derive douce (deux variantes de direction) + scintillement */
@keyframes opt-drift  { 0%,100% { opacity: 0.55; transform: translate(0,0); }      50% { opacity: 0.92; transform: translate(0.5vw, -0.6vw); } }
@keyframes opt-drift2 { 0%,100% { opacity: 0.55; transform: translate(0,0); }      50% { opacity: 0.85; transform: translate(-0.6vw, 0.45vw); } }
@keyframes opt-twinkle{ 0%,100% { opacity: 0.45; }                                  50% { opacity: 0.95; } }
/* glow rapide : long repos bas, bref pic d'intensite */
@keyframes opt-glow   { 0%,66%,100% { opacity: 0.35; }                              80% { opacity: 1; } }
@media (min-width: 769px) {
    /* centre, au-dessus du sujet (perso en bas-droite) */
    .hero--optimiser .hl1 { left: 47%; top: 70%; width: 6.4vw; height: 6.4vw; margin: -3.2vw 0 0 -3.2vw; animation: opt-drift   9s  ease-in-out infinite; }
    .hero--optimiser .hl2 { left: 53%; top: 68%; width: 4.4vw; height: 4.4vw; margin: -2.2vw 0 0 -2.2vw; animation: opt-glow    4s  ease-in-out infinite; }
    .hero--optimiser .hl3 { left: 42%; top: 73%; width: 5.4vw; height: 5.4vw; margin: -2.7vw 0 0 -2.7vw; animation: opt-twinkle 7s  ease-in-out -0.5s infinite; }
    .hero--optimiser .hl4 { left: 49%; top: 72%; width: 4.0vw; height: 4.0vw; margin: -2.0vw 0 0 -2.0vw; animation: opt-drift2  12s ease-in-out -1s infinite; }
    /* zone libre a gauche (sous le texte) */
    .hero--optimiser .hl5 { left: 22%; top: 74%; width: 5.4vw; height: 5.4vw; margin: -2.7vw 0 0 -2.7vw; animation: opt-twinkle 6s  ease-in-out infinite; }
    .hero--optimiser .hl6 { left: 13%; top: 81%; width: 4.0vw; height: 4.0vw; margin: -2.0vw 0 0 -2.0vw; animation: opt-drift   10s ease-in-out -2s infinite; }
    .hero--optimiser .hl7 { left: 30%; top: 71%; width: 6.4vw; height: 6.4vw; margin: -3.2vw 0 0 -3.2vw; animation: opt-twinkle 8s  ease-in-out -1.5s infinite; }
    .hero--optimiser .hl8 { left: 18%; top: 78%; width: 4.4vw; height: 4.4vw; margin: -2.2vw 0 0 -2.2vw; animation: opt-glow    6.5s ease-in-out -3s infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--optimiser .hero-light { animation: none; opacity: 0.5; }
}

/* Signature temps /avis (distincte de le-coach) : respiration de LUMINOSITE lente
   (la photo s'eclaire puis se repose) au lieu du balayage medailles. Registre calme
   "preuve/confiance". Intro one-shot PUIS breathe sur le filter seul ; le transform
   (scale 1.12) reste tenu par le forwards de l'intro. Desktop seul. */
@keyframes hero-avis-breathe {
    from { filter: brightness(0.65); }
    to   { filter: brightness(0.74); }
}
@media (min-width: 769px) {
    .hero--avis .hero__media--single .hero__still {
        animation:
            hero-coach-intro 12s ease-out forwards,
            hero-avis-breathe 17s ease-in-out 12s infinite alternate;
    }
}

/* Signature temps /partenariat : leger battement de vignette (les bords sombres
   respirent) par-dessus le rack focus, qui garde son intro. Pseudo radial sur
   l'overlay, on anime juste l'opacite (cheap). Lent et faible. Desktop seul. */
/* Signature temps /partenariat : effet vignette inadapte (bords deja noirs / hors
   cadre). Revise en PROJECTEUR CENTRAL qui respire : un halo de lumiere doux sur la
   ligne de combattants, qui pulse (opacite + leger scale). Blend screen = la lumiere
   s'ajoute sans toucher la source. Desktop seul. */
/* Signature temps /partenariat : MISE AU POINT discrete (pas de lumiere). L'image perd
   un peu sa nettete puis la retrouve, comme un objectif qui refait le point. Espace et
   leger : net au repos, bref defocus, refocus. backdrop-filter sur un calque plein cadre
   (le texte, au-dessus, reste net). Desktop seul. */
@keyframes hero-partenariat-focus {
    0%, 70%  { -webkit-backdrop-filter: blur(0);    backdrop-filter: blur(0); }
    78%      { -webkit-backdrop-filter: blur(2.6px); backdrop-filter: blur(2.6px); }
    83%      { -webkit-backdrop-filter: blur(0.4px); backdrop-filter: blur(0.4px); }
    88%      { -webkit-backdrop-filter: blur(1.7px); backdrop-filter: blur(1.7px); }
    95%, 100%{ -webkit-backdrop-filter: blur(0);    backdrop-filter: blur(0); }
}
@media (min-width: 769px) {
    .hero--partenariat .hero__overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        will-change: backdrop-filter;
        /* delai 12s = on attend la fin du rack-focus d'intro avant de relancer la map */
        animation: hero-partenariat-focus 20s ease-in-out 12s infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero--partenariat .hero__overlay::after { animation: none; opacity: 0; }
}
/* Micro-zoom synchro sur le defocus (focus breathing realiste : la map qui bouge fait
   varier un peu le cadrage). Sur le conteneur -> ne touche pas au rack-focus des calques.
   Memes timings/duree/delai que le blur. */
@keyframes hero-partenariat-microzoom {
    0%, 70%  { transform: scale(1.000); }
    78%      { transform: scale(1.012); }
    83%      { transform: scale(1.004); }
    88%      { transform: scale(1.009); }
    95%, 100%{ transform: scale(1.000); }
}
@media (min-width: 769px) {
    .hero--partenariat .hero__media--focusband {
        transform-origin: center 30%;
        will-change: transform;
        animation: hero-partenariat-microzoom 20s ease-in-out 12s infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero--partenariat .hero__media--focusband { animation: none; transform: none; }
}


/* @property : position du plan focal (point net) pour pouvoir l'animer dans le gradient. */
@property --focal {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%;
}

/* Hero /partenariat-club-sport-combat : PROFONDEUR DE CHAMP liee au zoom (rack focus).
   La file de combattants s'eloigne vers la droite -> au depart le plan net est sur le
   combattant proche (gauche) et c'est de plus en plus flou vers la droite (plus loin).
   Quand le zoom avance, le plan focal (--focal) glisse vers la DROITE : le combattant de
   gauche passe devant le plan et floute, celui de droite "se rapproche" et devient net.
   En toute fin, le calque flou s'efface -> image entierement nette.
   2 calques de la meme image :
     - .hero__still--sharp : net, base plein cadre (jamais masquee)
     - .hero__still--blur  : flou par-dessus, masque par une FENETRE NETTE ETROITE centree
       sur --focal (transparent = net dessous ; opaque = flou). Fenetre serree -> fort
       contraste net/flou au bord. Falloff plus court a droite (+11%) qu'a gauche (-16%)
       -> le cote lointain (droite) floute plus vite = profondeur.
   Le plan focal et le zoom partagent la MEME duree + le MEME easing -> parfaitement synchros.
   Fallback @property : plan focal fige a gauche, mais la mise au point finale joue quand meme.
   Reglages : flou = blur(8px) ; largeur fenetre nette = -16%/+11% ; course = 8% -> 92% ; vitesse = 12s. */
.hero--partenariat .hero__media--focusband { overflow: hidden; }
.hero--partenariat .hero__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform-origin: center center;
    animation: hero-club-zoom 12s ease-out forwards;   /* zoom identique sur les 2 calques */
    will-change: transform;
}
.hero--partenariat .hero__still--blur {
    filter: blur(8px) brightness(0.88);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--focal) - 16%), transparent var(--focal), #000 calc(var(--focal) + 11%));
            mask-image: linear-gradient(90deg, #000 calc(var(--focal) - 16%), transparent var(--focal), #000 calc(var(--focal) + 11%));
    animation: hero-club-zoom    12s ease-out forwards,
               hero-club-focal   12s ease-out forwards,
               hero-club-resolve 12s ease-in  forwards;
}
@keyframes hero-club-zoom {
    0%   { transform: scale(1.00); }
    100% { transform: scale(1.10); }
}
@keyframes hero-club-focal {     /* le plan net glisse du proche (gauche) au lointain (droite) */
    0%   { --focal: 8%; }
    100% { --focal: 92%; }
}
@keyframes hero-club-resolve {   /* mise au point finale : le calque flou s'efface */
    0%, 70% { opacity: 1; }
    100%    { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--partenariat .hero__still { animation: none; transform: none; }
    .hero--partenariat .hero__still--blur { opacity: 0; }
}
/* Mobile : image dediee portrait (hero-club-sport-combat-mob), STATIQUE.
   Pas de profondeur de champ ni de zoom -> on coupe l'animation et on masque le calque flou. */
@media (max-width: 768px) {
    .hero--partenariat .hero__still { animation: none; transform: none; filter: none; }
    .hero--partenariat .hero__still--blur { display: none; }
}

/* Hero /contact : panorama Bordeaux mirror-palindrome, scroll horizontal infini sans zoom.
   2 copies cote-a-cote, translateX 0 -> -50% en linear : la couture entre les 2 copies est invisible
   (le palindrome a son edge droit = son edge gauche). Pas de zoom, pas de filtre. */
.hero__media--scroll { overflow: hidden; }
.hero__scroller {
    position: absolute;
    inset: 0;
    display: flex;
    width: max-content;
    height: 100%;
    animation: hero-contact-scroll 540s linear infinite;
    will-change: transform;
}
.hero__scroller picture,
.hero__scroller img {
    display: block;
    height: 100%;
    width: auto;
    flex-shrink: 0;
}
@keyframes hero-contact-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__scroller { animation: none; }
}

/* Vignette dynamique discrete : les bords se ferment legerement, pas de tunnel brutal */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,0.40) 100%);
    opacity: 0;
    animation: hero-vignette 18s linear 0.3s 1 forwards;
    pointer-events: none;
    z-index: 2;
    will-change: opacity;
}
@keyframes hero-vignette {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__media::after { animation: none; opacity: 0.4; }
}

/* Hero overlay : letterbox cinema symetrique (dark haut + bas, leger voile sur la bande yeux) */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,10,0.88) 0%,
        rgba(10,10,10,0.62) 22%,
        rgba(10,10,10,0.32) 42%,
        rgba(10,10,10,0.32) 55%,
        rgba(10,10,10,0.75) 78%,
        rgba(10,10,10,0.93) 100%);
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   Media placeholders - bloc visible pour reserver un emplacement video/image
   a produire. Remplacer par <video> ou <img> quand l'asset existe.
   ========================================================================== */
.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    text-align: center;
    padding: var(--sp-8);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.02) 0,
            rgba(255,255,255,0.02) 10px,
            transparent 10px,
            transparent 20px
        ),
        rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: var(--radius-lg);
    color: var(--gris-clair);
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 100%;
}
.media-placeholder--portrait { aspect-ratio: 3 / 4; max-width: 480px; margin: 0 auto; }
.media-placeholder--square   { aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; }
.media-placeholder--wide     { aspect-ratio: 21 / 9; }
.media-placeholder--banner   { aspect-ratio: 32 / 9; }

.media-placeholder__kind {
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--gris-clair);
    font-weight: 600;
}
.media-placeholder__desc {
    font-size: var(--fs-sm);
    max-width: 56ch;
    color: var(--blanc-casse);
    line-height: 1.5;
}
.media-placeholder__desc::before { content: "« "; opacity: 0.5; }
.media-placeholder__desc::after  { content: " »"; opacity: 0.5; }

/* Quand le placeholder occupe TOUTE la zone du hero */
.hero .media-placeholder {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
    z-index: -1;
    border-width: 0 0 2px 0;
}

/* --- 5. Buttons --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.85em 1.4em;
    font-weight: 500;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    border-radius: 100px;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn--primary {
    background: var(--bordeaux);
    color: var(--blanc);
}
.btn--primary:hover {
    background: var(--bordeaux-2);
    color: var(--blanc);
    transform: translateY(-1px);
}
.btn--ghost {
    background: transparent;
    color: var(--blanc-casse);
    border-color: rgba(255,255,255,0.25);
}
.btn--ghost:hover {
    border-color: var(--blanc);
    color: var(--blanc);
}
.btn--secondary {
    background: transparent;
    color: var(--blanc-casse);
    border-color: rgba(255,255,255,0.25);
}
.btn--secondary:hover {
    border-color: var(--blanc);
    color: var(--blanc);
}
.btn--lg { padding: 1em 1.8em; font-size: var(--fs-md); }
.btn__icon { flex: 0 0 auto; }

/* --- 6. Navbar ---------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    /* hauteur = barre + safe-area (encoche/barre d'etat iOS en mode standalone) ;
       le padding-top pousse logo + burger sous la barre d'etat (sinon ils sont rognes). */
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-inline: clamp(1rem, 4vw, 2rem);
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--t-med), border-color var(--t-med);
}
.nav.is-scrolled {
    background: rgba(10,10,10,0.96);
    border-bottom-color: var(--noir-3);
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    color: var(--blanc);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
}
.nav__brand:hover { color: var(--blanc); }
.nav__brand-mark {
    position: relative;
    isolation: isolate;
    display: inline-block;
    line-height: 1;
    color: var(--blanc);
}
.nav__brand-mark::before {
    content: "";
    position: absolute;
    width: 1.3em;
    height: 1.3em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bordeaux);
    border-radius: var(--radius);
    z-index: -1;
}
.nav__brand-rest { position: relative; z-index: 1; }
.nav__brand-text em { font-style: normal; font-weight: 400; opacity: 0.7; }

.nav__menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}
.nav__link {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--gris-clair);
    padding-block: 0.35em;
}
.nav__link:hover { color: var(--blanc); }
.nav__link.is-active { color: var(--blanc); }
.nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25em;
    height: 2px;
    background: var(--bordeaux-2);
}

.nav__cta { padding: 0.65em 1.1em; font-size: var(--fs-xs); }

.nav__toggle {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0;
}
.nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blanc);
    margin-inline: auto;
    transition: transform var(--t-med), opacity var(--t-fast);
}

@media (max-width: 820px) {
    .nav__toggle { display: flex; }
    .nav__menu {
        position: fixed;
        /* aligne le haut du menu sous la navbar safe-area incluse */
        inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sp-6) clamp(1rem, 4vw, 2rem);
        background: var(--noir);
        border-bottom: 1px solid var(--noir-3);
        /* ferme : on remonte de 100% de SA hauteur + son offset top (sinon le bas
           du menu reste visible et forme un cadre noir par-dessus la navbar). */
        transform: translateY(calc(-100% - var(--nav-h) - env(safe-area-inset-top, 0px) - 8px));
        transition: transform var(--t-med);
    }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__link {
        display: block;
        padding-block: var(--sp-4);
        border-bottom: 1px solid var(--noir-3);
        font-size: var(--fs-md);
    }
    .nav__link.is-active::after { display: none; }
    .nav__cta { margin-top: var(--sp-4); align-self: flex-start; }
    .nav.is-open .nav__menu { transform: translateY(0); }
    .nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
    .nav.is-open .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- 7. Footer --------------------------------------------------------- */
.footer {
    background: var(--noir-2);
    border-top: 1px solid var(--noir-3);
    margin-top: var(--sp-24);
}
.footer__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) var(--sp-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-8);
}
.footer__col--brand { grid-column: 1 / -1; max-width: 36ch; }
.footer__brand {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--blanc);
}
.footer__brand em { font-style: normal; font-weight: 400; opacity: 0.7; }
.footer__tag {
    margin-top: var(--sp-2);
    color: var(--gris-clair);
    font-size: var(--fs-sm);
}
.footer__tag a { color: inherit; text-decoration: none; }
.footer__tag a:hover { color: var(--blanc); text-decoration: underline; }
.footer__nav--brand { margin-top: var(--sp-4); }
.footer__nav--brand a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer__icon { flex-shrink: 0; color: var(--bordeaux-2); }
.footer__nav-inline { display: flex; align-items: center; gap: var(--sp-2); }
.footer__sep { color: var(--gris); }
.footer__title {
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    color: var(--blanc);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
.footer__address {
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--gris-clair);
    line-height: 1.6;
}
.footer__line {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--gris-clair);
}
.footer__nav { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.footer__nav a { color: var(--gris-clair); }
.footer__nav a:hover { color: var(--blanc); }

.footer__bottom {
    border-top: 1px solid var(--noir-3);
    padding: var(--sp-4) clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--gris);
}

@media (min-width: 720px) {
    .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .footer__col--brand { grid-column: auto; max-width: none; }
}

/* --- 8. Hero (utilisé sur /) ------------------------------------------- */
.hero {
    position: relative;
    min-height: clamp(560px, 88vh, 820px);
    display: grid;
    align-items: end;
    overflow: hidden;
    isolation: isolate;
    background: var(--noir);
}
@media (max-width: 768px) {
    .hero { align-items: center; }
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--noir);
    z-index: -2;
}
/* .hero::after retire : forme bordeaux qui bleed sur la video, plus pertinent maintenant */
.hero__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(3rem, 9vw, 7rem) clamp(1rem, 4vw, 2rem);
    display: grid;
    gap: var(--sp-6);
}
.hero__eyebrow { color: var(--gris-clair); }
.hero__title {
    font-size: var(--fs-4xl);
    text-transform: none;
    color: var(--blanc);
    max-width: 16ch;
}
.hero__title .accent { color: var(--bordeaux-2); }
.hero__sub {
    max-width: 56ch;
    font-size: var(--fs-lg);
    color: var(--gris-clair);
}
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}
/* Groupe de boutons hero (2 CTA cote a cote) */
.hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}
/* Bouton secondaire hero : fond image -> on renforce la lisibilite
   (fond translucide sombre + bordure blanche plus opaque). Le primary reste
   le seul bouton rouge. */
.hero .btn--secondary {
    background: rgba(10, 10, 10, 0.45);
    border-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.hero .btn--secondary:hover {
    background: rgba(10, 10, 10, 0.65);
    border-color: var(--blanc);
    color: var(--blanc);
}
.hero__creds {
    margin-top: var(--sp-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--gris);
    border-top: 1px solid var(--noir-3);
    padding-top: var(--sp-4);
    max-width: 720px;
}
.hero__creds li::before {
    content: "·";
    margin-right: 0.6em;
    color: var(--gris);
}

/* Hero markers : 4 micro-items E-E-A-T sous le titre, separes par "/".
   Autorite instantanee sans paraphraser un CV. Reservee aux hero. */
.hero__markers {
    margin-top: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blanc-papier);
    font-weight: 600;
}
.hero__markers li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}
.hero__markers li:not(:last-child)::after {
    content: "/";
    color: var(--gris);
    font-weight: 400;
    margin-left: var(--sp-3);
}
.hero__markers .marker--accent { color: var(--bordeaux-2); }
/* Mobile : hero entierement centre (coherence : tout centre, pas a moitie). PC inchange.
   markers empiles + sans separateur "/" (evite le "/" orphelin renvoye a droite au wrap).
   Place apres les regles de base pour les surcharger. */
@media (max-width: 768px) {
    .hero__inner { text-align: center; }
    .hero__sub { margin-inline: auto; }
    .hero__markers { flex-direction: column; align-items: center; gap: var(--sp-2); }
    .hero__markers li:not(:last-child)::after { content: none; }
    .hero__cta-group,
    .hero__cta { justify-content: center; }
}

/* --- 9. Utilities ------------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================================
   Page /preparation-mentale-goat : bandes sport (image + titre)
   Grid pur (pas de float), images ancrees dans la bande pleine
   largeur, radius austere, aucune ombre -> ne "flotte" pas.
   =========================================================== */
.goat-band{
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.goat-band__media{
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    background: var(--noir-2);
}
.goat-band__media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.goat-band__intro .eyebrow{ margin-bottom: var(--sp-3); }
/* Image a droite sur les bandes alternees (desktop) */
.goat-band--alt .goat-band__media{ order: 2; }

@media (max-width: 860px){
    .goat-band{ grid-template-columns: 1fr; gap: var(--sp-6); }
    .goat-band--alt .goat-band__media{ order: 0; } /* image toujours au-dessus du texte */
    .goat-band__media{ aspect-ratio: 16 / 8; }
}

/* Fils rouges : carte "L'accompagnement" pleine largeur, mise en avant
   (accent bordeaux a gauche, layout horizontal titre/texte sur desktop). */
.goat-keycard{
    max-width: 880px;          /* meme largeur que .grid-2 : ne depasse pas le bloc 2x2 */
    margin: var(--sp-6) auto 0;
    border-left: 3px solid var(--bordeaux-2);
}
.goat-keycard__body .card__meta{ margin-top: var(--sp-3); }
/* Texte de conclusion + CTA : meme largeur/alignement que le bloc de cards. */
.goat-outro{ max-width: 880px; margin-inline: auto; }
@media (min-width: 720px){
    .goat-keycard{
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
        gap: clamp(1.5rem, 4vw, 3rem);
        align-items: center;
    }
}