:root{
    /* Riviera 76 — rétro californien / Côte d'Azur seventies */
    --sable:#F2E7D2; --surface:#FBF4E6; --sand:#EBDABA;
    --brique:#3A2218; --ink:#3A2218;
    /* --muted assombri : AA ≥4,5:1 sur crème/sable (5,68:1 sur #F2E7D2), reste un brun noyer RIVIERA */
    --muted:#735335;
    --rouille:#C4572E; --rouille-deep:#A8441F;
    /* --rouille-text : rouille assombri RÉSERVÉ AU TEXTE sur fonds clairs (eyebrows, tags, prix,
       sig, liens) — AA ≥4,5:1 (5,54:1 sur crème #F2E7D2, 4,93:1 sur sable #EBDABA). Reste un
       terracotta RIVIERA. Le --rouille d'origine reste pour les remplissages (puces, bordures). */
    --rouille-text:#9C3D1A;
    --moutarde:#DFA63A; --sauge:#7FA9A6; --sauge-deep:#1F3A38; --cream:#FFF6E8;
    /* Sous-palette mauve Académie (charte RIVIERA 76) — appliquée via [data-facet="academie"] / .is-academie */
    --aca-peche:#E6A98F; --aca-rose:#C06E82; --aca-prune:#6E4368; --aca-mauve:#A85E78;
    /* --aca-mauve-text : mauve assombri pour le TEXTE sur crème (5,17:1) — AA. */
    --aca-mauve-text:#9C4E6A;
    --aca-soleil:linear-gradient(118deg,var(--aca-peche) 0%,var(--aca-rose) 52%,var(--aca-prune) 100%);
    --serif:'DM Serif Display', Georgia, serif;
    --sans:'Outfit','Helvetica Neue',Arial,sans-serif;
    --line:rgba(58,34,24,.16);
    --rad:30px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
  body{font-family:var(--sans); color:var(--ink); background:var(--sable);
       -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden;}
  h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:0;}
  a{color:inherit; text-decoration:none;}
  /* a11y : liens en ligne dans un bloc de texte distingués autrement que par la couleur (WCAG 1.4.1) */
  .prose a:not(.btn):not(.pill):not(.sig), p a:not(.btn):not(.pill):not(.sig){text-decoration:underline; text-underline-offset:.18em;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,32px);}
  .eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.24em;
           font-size:11px; font-weight:600; color:var(--rouille-text);}
  .lead{font-size:clamp(16px,1.3vw,19px); color:var(--muted); line-height:1.7; font-weight:400;}
  .sig{font-family:var(--serif); font-style:italic; color:var(--rouille-text);}

  /* sun mark (logo) */
  .sunmark circle{fill:currentColor;}
  .sunmark g line{stroke:currentColor; stroke-width:2.6; stroke-linecap:round;}
  /* logo validé : soleil couchant rayé (rayures transparentes) + wordmark Righteous */
  .logo-sun{flex:none;}
  .logo-name{font-family:'Righteous',var(--sans); color:var(--brique); line-height:1; white-space:nowrap;}

  /* buttons — gélule (pill) */
  /* fond rouille assombri (--rouille-deep) : texte crème AA 5,58:1 (vs 4,13:1 sur --rouille) */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--rouille-deep); color:var(--cream);
       padding:15px 30px; border-radius:999px; font-family:var(--sans); font-weight:600;
       font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; transition:.25s;}
  .btn:hover{background:#8F3517;}
  .btn.ghost{background:transparent; color:var(--brique); border:1.5px solid var(--rouille);}
  .btn.ghost:hover{background:var(--rouille); color:var(--cream);}
  .btn.moutarde{background:var(--moutarde); color:var(--brique);} .btn.moutarde:hover{background:#cf9226;}

  /* ============ NAV ============ */
  header{position:sticky; top:0; z-index:50; background:rgba(242,231,210,.86);
         backdrop-filter:saturate(130%) blur(10px); border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; justify-content:space-between; height:78px; gap:16px;}
  .brand{display:flex; align-items:center; gap:13px; min-width:0;}
  .brand .logo-sun{width:42px; height:42px;}
  .brand .logo-name{font-size:clamp(18px,4.2vw,21px); letter-spacing:.01em;}
  .brand .sunmark{width:40px; height:40px; color:var(--rouille); flex:none;}
  .brand .lock{display:flex; flex-direction:column; line-height:1; min-width:0;}
  .brand .name{font-family:var(--serif); font-size:clamp(19px,4.4vw,22px); color:var(--brique); letter-spacing:.01em; white-space:nowrap;}
  .brand .sub{font-family:var(--sans); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
        color:var(--muted); font-weight:600; margin-top:5px; white-space:nowrap;}
  .navlinks{display:flex; gap:32px; align-items:center;}
  .navlinks a{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--muted); transition:.2s;}
  .navlinks a:hover{color:var(--rouille);}
  /* pill nav : fond rouille assombri → texte blanc AA 5,98:1 */
  .navlinks .pill{background:var(--rouille-deep); border:1.5px solid var(--rouille-deep); padding:10px 22px; border-radius:999px; color:#fff; font-weight:600; white-space:nowrap; box-shadow:0 5px 16px rgba(168,68,31,.34);}
  .navlinks .pill:hover{background:#8A4A2C; border-color:#8A4A2C; color:#fff;}

  /* ============ HERO ============ */
  /* Le héros d'accueil est désormais une bannière pleine largeur (.hcar) :
     ses styles sont définis plus bas (« Carrousel héros — BANNIÈRE PLEINE LARGEUR »).
     Les anciennes règles du split 2 colonnes (.hero .grid / .hero .meta / .portrait)
     ont été retirées car plus utilisées sur l'accueil. */

  .portrait{position:relative; width:100%;}
  .portrait .frame{aspect-ratio:4/5; overflow:hidden;
        border-radius:42% 58% 53% 47% / 60% 55% 45% 40%;
        background:var(--moutarde); box-shadow:0 30px 70px -32px rgba(58,34,24,.55);}
  .portrait .frame img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}

  /* ============ MARQUES ============ */
  .marks{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0;}
  .marks .wrap{display:flex; gap:clamp(28px,5vw,54px); align-items:center; justify-content:center; flex-wrap:wrap;}
  .marks .lbl{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .marks img{height:24px; width:auto; opacity:.65; filter:saturate(0); transition:.25s;}
  .marks img.om{height:38px;}
  .marks img:hover{opacity:1; filter:none;}
  /* Une fois la cascade d'apparition jouée, on rend au logo sa transition de survol nette
     (sinon il hériterait du transition-delay du stagger → survol paresseux). */
  .reveal-ready .marks [data-reveal].in-view{transition:opacity .25s, filter .25s; transition-delay:0s;}

  /* ============ DEUX FACETTES ============ */
  .facets{padding:clamp(58px,9vw,100px) 0;}
  .sec-head{text-align:center; max-width:660px; margin:0 auto clamp(40px,6vw,58px);}
  .sec-head h2{font-size:clamp(32px,6vw,50px); margin:14px 0 0; color:var(--brique);}
  .sec-head .lead{margin-top:18px;}
  .two{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
  /* hauteurs égales des facettes jumelles (consolidé : était dupliqué page par page). */
  .two .facet{height:100%;}
  .facet{border-radius:var(--rad); padding:clamp(34px,4vw,48px) clamp(28px,3.5vw,44px); position:relative; overflow:hidden;
         border:1px solid var(--line); display:flex; flex-direction:column;}
  .facet.salon{background:var(--surface);}
  .facet.acad{color:var(--cream); border:none;
        background:linear-gradient(165deg,rgba(58,34,24,.76),rgba(58,34,24,.92)), url('masterclass.jpg');
        background-size:cover; background-position:center;}
  .facet .tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; margin-bottom:8px;}
  .facet.salon .tag{color:var(--rouille-text);} .facet.acad .tag{color:var(--moutarde);}
  .facet h3,.facet h2{font-size:clamp(30px,4.5vw,42px); margin:0 0 14px; color:var(--brique);}
  .facet.acad h3,.facet.acad h2{color:var(--cream);}
  .facet p{font-size:15.5px; color:var(--muted);}
  .facet.acad p{color:#EAD9C0;}
  .facet ul{list-style:none; margin:22px 0 0; display:flex; flex-direction:column; gap:11px;}
  .facet li{font-size:14px; display:flex; gap:11px; align-items:center; color:var(--brique); font-weight:500;}
  .facet.acad li{color:var(--sable);}
  .facet li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--rouille); flex:none;}
  .facet.acad li::before{background:var(--moutarde);}
  .facet .go{margin-top:auto; padding-top:30px; display:flex; flex-direction:column; gap:15px; align-items:flex-start;}
  .facet .sublink{font-size:13px; letter-spacing:.03em; font-weight:500; padding-bottom:2px; transition:.2s;}
  .facet.salon .sublink{color:var(--rouille-text); border-bottom:1px solid rgba(196,87,46,.4);}
  .facet.salon .sublink:hover{color:var(--rouille-deep); border-color:var(--rouille);}
  .facet.acad .sublink{color:var(--moutarde); border-bottom:1px solid rgba(223,166,58,.45);}
  .facet.acad .sublink:hover{color:var(--cream); border-color:var(--cream);}

  /* ============ SIGNATURE / GESTE — moment "sauge ciel" ============ */
  .signature{padding:clamp(58px,9vw,100px) 0; background:var(--sauge);}
  .signature .grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,58px); align-items:center;}
  .signature .eyebrow{color:var(--sauge-deep);}
  .ba{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .ba figure{border-radius:20px; overflow:hidden; aspect-ratio:3/4; position:relative;
        border:1px solid rgba(46,77,74,.2); margin:0; background:var(--moutarde);}
  .ba figure img{width:100%; height:100%; object-fit:cover; display:block;}
  .ba figcaption{position:absolute; left:12px; bottom:12px; font-size:10px; letter-spacing:.16em;
        text-transform:uppercase; font-weight:600; color:var(--cream); background:rgba(58,34,24,.6);
        padding:6px 13px; border-radius:999px; backdrop-filter:blur(3px);}
  .signature h2{font-size:clamp(30px,5.5vw,48px); margin:14px 0 0; color:var(--brique);}
  .signature .lead{margin:20px 0 26px; color:var(--sauge-deep);}
  .pillars{display:grid; grid-template-columns:1fr 1fr; gap:20px 34px; margin-top:26px;}
  .pillar .k{font-family:var(--serif); font-size:clamp(21px,2.6vw,24px); color:var(--brique);}
  .pillar p{font-size:13.5px; color:var(--sauge-deep); margin-top:3px;}

  /* ============ TÉMOIGNAGES ============ */
  .voices{padding:clamp(58px,9vw,100px) 0;}
  .vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .vcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:34px 30px;
         display:flex; flex-direction:column; gap:18px;}
  /* harmonisé avec les cartes du ruban d'avis (accueil) : fond crème, citation serif italique */
  .vcard{background:var(--cream);}
  .vcard .q{font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.2vw,21px); line-height:1.42; color:var(--ink);}
  .vcard .who{display:flex; align-items:center; gap:13px; margin-top:auto;}
  .vcard .av{width:44px; height:44px; border-radius:50%; flex:none;
        background:var(--rouille); color:var(--cream);
        display:grid; place-items:center; font-family:var(--serif); font-size:17px;}
  .vcard .who b{font-family:var(--sans); font-weight:600; font-size:14px; display:block;}
  .vcard .who span{font-size:11.5px; color:var(--muted); letter-spacing:.03em;}
  .stars{color:var(--moutarde); font-size:14px; letter-spacing:3px;}

  /* ============ CTA ACADÉMIE ============ */
  .promo{padding:0 0 clamp(58px,9vw,100px);}
  .promo .box{color:var(--cream);
        background:linear-gradient(118deg, rgba(196,87,46,.95) 36%, rgba(223,166,58,.58) 100%), url('masterclass.jpg');
        background-size:cover; background-position:center 26%;
        border-radius:34px; padding:clamp(40px,5vw,62px) clamp(30px,4.5vw,58px); position:relative; overflow:hidden;
        display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(28px,4vw,40px); align-items:center;}
  .promo .tag{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,246,232,.92); font-weight:600;}
  .promo h2{color:var(--cream); font-size:clamp(30px,5.5vw,46px); margin:12px 0 16px; line-height:1.02;}
  .promo p{color:rgba(255,246,232,.94); font-size:16px; max-width:34em;}
  .promo .right{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
  .promo .btn{background:var(--cream); color:var(--rouille-deep);} .promo .btn:hover{background:#fff;}
  .promo .note{font-size:12px; color:rgba(255,246,232,.88); letter-spacing:.03em; font-weight:500;}

  /* ============ FOOTER ============ */
  footer{background:var(--brique); color:#C7A98A; padding:clamp(54px,7vw,70px) 0 34px;}
  .fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:42px; border-bottom:1px solid rgba(242,231,210,.14);}
  footer .brand .name{color:var(--cream);}
  footer .brand .sub{color:#C2A684;}
  footer .brand .sunmark{color:var(--moutarde);}
  footer .brand .logo-name{color:var(--cream); font-size:20px;}
  footer .brand .logo-sun{width:36px; height:36px;}
  footer p{font-size:13.5px; color:#C2A684; margin-top:16px; max-width:22em;}
  footer .fcol-h{font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.18em;
        text-transform:uppercase; color:var(--moutarde); margin-bottom:16px; line-height:inherit;}
  footer ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
  footer ul a{font-size:13.5px; color:#C7A98A; transition:.2s;}
  footer ul a:hover{color:var(--cream);}
  footer .fnap{margin-top:16px;}
  footer .fnap a{font-size:13px; color:#C2A684;}
  .fbot{display:flex; justify-content:space-between; align-items:center;
        margin-top:clamp(18px,3vw,34px); padding-top:24px;
        font-size:11.5px; letter-spacing:.06em; color:#C2A684; flex-wrap:wrap; gap:12px;}

  /* shape-label (page de comparaison des formes) */
  .shape-label{display:inline-block; background:var(--rouille); color:var(--cream); font-family:var(--sans);
        font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
        padding:7px 16px; border-radius:999px; margin-bottom:18px;}

  /* ============ RESPONSIVE ============ */
  @media(max-width:860px){
    .nav{height:66px;}
    .navlinks a:not(.pill){display:none;}
    .portrait{max-width:380px; margin:0 auto;}
    .facets .two{grid-template-columns:1fr;}
    .signature .grid{grid-template-columns:1fr;}
    .ba{max-width:460px;}
    /* mobile : cadre or à fleur du slider (aucun décalage → aucun débordement horizontal) */
    .signature .ba::before{transform:none;border-color:rgba(240,194,94,.6)}
    .promo .box{grid-template-columns:1fr;}
    .vgrid{grid-template-columns:1fr 1fr;}
    .fgrid{grid-template-columns:1fr 1fr; gap:34px;}
    .fgrid>div:first-child{grid-column:1 / -1;}
  }
  @media(max-width:560px){
    .navlinks .pill{display:none;}   /* trop étroit → CTA assuré par le menu burger */
    .brand .sub{display:none;}
    /* Footer accordéon mobile : chaque colonne repliée, clic sur le titre = ouvre/ferme */
    .fgrid{grid-template-columns:1fr; gap:0;}
    .fgrid>div:first-child{grid-column:auto; margin-bottom:14px;}
    /* menus repliés centrés : titre + signe centrés ensemble, liens centrés */
    .fcol-h{cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
            margin:0; padding:15px 2px; font-size:15px; text-align:center; border-top:1px solid rgba(199,169,138,.22);}
    .fcol-h::after{content:"+"; color:var(--moutarde); font-size:22px; font-weight:400; line-height:1;}
    .fgrid>div.fcol-open .fcol-h::after{content:"\2013";}  /* – */
    .fcol-h + ul{max-height:0; overflow:hidden; opacity:0; margin:0; align-items:center; text-align:center;
            transition:max-height .3s ease, opacity .2s ease;}
    .fgrid>div.fcol-open .fcol-h + ul{max-height:480px; opacity:1; padding:4px 0 14px;}
    .pillars{grid-template-columns:1fr;}
    .vgrid{grid-template-columns:1fr;}
    .fbot{justify-content:center; text-align:center;}
  }
  @media(max-width:380px){
    .fgrid{grid-template-columns:1fr;}
    .marks .wrap{gap:22px;}
  }

  /* ============ V2 multi-pages — composants partagés ============ */
  /* menu déroulant (avatar-first) */
  .navitem{position:relative;}
  .navitem>a::after{content:"▾"; font-size:9px; margin-left:5px; opacity:.6;}
  .dropdown{position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--line);
        border-radius:18px; padding:10px; min-width:250px; display:flex; flex-direction:column; gap:2px;
        opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s; z-index:60;
        box-shadow:0 24px 60px -24px rgba(58,34,24,.45);}
  .navitem:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
  .dropdown a{padding:9px 14px; border-radius:11px; font-size:13px; text-transform:none; letter-spacing:0;
        color:var(--ink); font-weight:500;}
  .dropdown a:hover{background:var(--sable); color:var(--rouille);}
  @media(max-width:860px){ .navitem .dropdown{display:none;} }

  /* fil d'ariane */
  .crumb{padding:18px 0 0; font-size:12px; letter-spacing:.04em; color:var(--muted);}
  .crumb a{color:var(--muted);} .crumb a:hover{color:var(--rouille);} .crumb b{color:var(--brique); font-weight:600;}

  /* hero de page intérieure */
  .phero{padding:clamp(34px,5vw,60px) 0 clamp(26px,4vw,40px);}
  .phero h1{font-size:clamp(34px,6.5vw,60px); color:var(--brique); max-width:16ch;}
  .phero .lead{margin-top:18px; max-width:46ch;}
  .phero .cta{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}

  /* prose (articles, paragraphes longs) */
  .prose{max-width:68ch;} .prose h2{font-size:clamp(24px,3.5vw,34px); color:var(--brique); margin:clamp(34px,4vw,46px) 0 14px;}
  .prose h3{font-family:var(--serif); font-size:22px; color:var(--brique); margin:28px 0 10px;}
  .prose p{margin:0 0 16px; color:var(--ink);} .prose ul{margin:0 0 18px 20px;} .prose li{margin:6px 0;}

  /* grille tarifs */
  .ptable{border-top:1px solid var(--line); margin-top:18px;}
  .prow{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:16px 0; border-bottom:1px solid var(--line);}
  .prow .nm{font-weight:600; color:var(--brique);} .prow .ds{font-size:12.5px; color:var(--muted); margin-top:3px;}
  .prow .pr{font-family:var(--serif); font-size:20px; color:var(--rouille-text); white-space:nowrap;}

  /* FAQ */
  .faq details{border-bottom:1px solid var(--line); padding:18px 0;}
  .faq summary{font-family:var(--serif); font-size:19px; color:var(--brique); cursor:pointer; list-style:none;}
  .faq summary::-webkit-details-marker{display:none;}
  /* le "+/–" prend la couleur du texte de la FAQ (brique sur fond clair, sauge-deep sur académie) */
  .faq summary::after{content:"+"; float:right; color:inherit; font-weight:700;}
  .faq details[open] summary::after{content:"–";}
  .faq p{margin-top:12px; color:var(--muted); max-width:62ch;}

  /* bande CTA */
  .ctaband{background:var(--brique); color:var(--cream); border-radius:34px; padding:clamp(36px,5vw,56px);
        text-align:center; margin:clamp(40px,6vw,64px) 0;}
  .ctaband h2{color:var(--cream); font-size:clamp(28px,4.5vw,40px);} .ctaband p{color:rgba(255,246,232,.9); margin:14px auto 24px; max-width:46ch;}

  /* grille cartes génériques */
  /* align-items:stretch + cartes en flex-colonne 100% → hauteurs égales par rangée
     (consolidé : était dupliqué page par page en .iter2). */
  .cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
  .cards3 > .card{display:flex; flex-direction:column; height:100%;}
  /* Variante « 2 items dans une grille pensée pour 3 » : on resserre à 2 colonnes
     et on centre, pour éviter la 3ᵉ colonne vide. Réutilisable (.cards3.cards-2 / .vgrid.cards-2). */
  .cards3.cards-2,.vgrid.cards-2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; margin-left:auto; margin-right:auto;}
  @media(max-width:860px){ .cards3{grid-template-columns:1fr;} .cards3.cards-2,.vgrid.cards-2{grid-template-columns:1fr; max-width:480px;} }
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:30px 26px;}
  .card h3{font-size:24px; color:var(--brique); margin-bottom:8px;} .card p{font-size:14.5px; color:var(--muted);}

/* ---- pages réservation (widget) ---- */
.booking{min-height:520px;background:var(--creme,#FBF4E6);border:1px solid rgba(58,34,24,.08);border-radius:var(--rad,30px);padding:14px;overflow:hidden}
.bnote{margin-top:14px;font-size:.9rem;color:var(--brique,#3A2218);opacity:.7;text-align:center}

/* ---- galerie preuve sociale (résultats élèves) ---- */
.gallery{column-count:4;column-gap:14px}
.gallery img{width:100%;margin:0 0 14px;border-radius:18px;display:block;break-inside:avoid;box-shadow:0 6px 22px rgba(58,34,24,.12)}
@media(max-width:1000px){.gallery{column-count:3}}
@media(max-width:680px){.gallery{column-count:2;column-gap:10px}.gallery img{margin-bottom:10px;border-radius:14px}}
/* galerie 4 photos égales côte à côte (résultats) */
.gallery4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery4 img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%;border-radius:18px;display:block;box-shadow:0 6px 22px rgba(58,34,24,.12)}
@media(max-width:680px){.gallery4{grid-template-columns:repeat(2,1fr);gap:10px}.gallery4 img{border-radius:14px}}
/* bandeau atelier dense (infos clés visibles d'emblée) */
.factbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.factbar .fact{flex:1 1 150px;background:var(--creme,#FBF4E6);border:1px solid rgba(58,34,24,.1);border-radius:16px;padding:14px 16px;text-align:center}
.factbar .fact b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--rouille,#C4572E);line-height:1.1}
.factbar .fact.acad b{color:var(--aca-prune,#6E4368)}
/* étiquette fact : couleur conforme AA au lieu d'opacity:.75 (qui délavait --muted/prune sous 4,5:1) */
.factbar .fact span{font-size:.85rem;color:var(--muted)}

/* badge "Bientôt" (sous-menu) */
.badge{display:inline-block;background:var(--moutarde,#DFA63A);color:#3A2218;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:6px}

/* ---- mur de vidéos témoignages (portrait) ---- */
.vidwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:18px}
.vidwall video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;background:var(--brique,#3A2218);box-shadow:0 6px 22px rgba(58,34,24,.14)}
@media(max-width:680px){.vidwall{grid-template-columns:1fr 1fr;gap:10px}}

/* ============ COMPOSANTS V2.1 (slider BA · bannière média · carrousel · marques) ============ */
/* Slider avant/après dynamique */
.baslider{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:4/5;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(58,34,24,.18);user-select:none;touch-action:none;background:var(--brique,#3A2218)}
.baslider.wide{max-width:820px;aspect-ratio:3/2}
.baslider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.baslider .ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.baslider .ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.baslider .ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#FFF6E8;transform:translateX(-1.5px);box-shadow:0 0 0 1px rgba(58,34,24,.25);pointer-events:none}
/* Poignée : disque crème (pas blanc pur) cerclé d'un filet or, plus généreux (48px) */
.baslider .ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:#FFF6E8;box-shadow:0 4px 16px rgba(58,34,24,.32),0 0 0 1.5px rgba(240,194,94,.75)}
.baslider .ba-handle::before{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;color:var(--rouille,#C4572E);font-size:19px;font-weight:700}
/* Pilules floutées, tracking élargi ; « Après » en terracotta pour orienter l'œil vers le résultat */
.baslider .ba-lab{position:absolute;bottom:14px;z-index:2;background:rgba(58,34,24,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#FFF6E8;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:5px 13px;border-radius:999px;pointer-events:none}
.baslider .ba-lab-a{left:14px}
.baslider .ba-lab-b{right:14px;background:rgba(196,87,46,.82)}
/* Cadre or décalé derrière le slider de la SIGNATURE (éditorial). Porté par le conteneur .ba
   (le slider est en overflow:hidden) ; DESKTOP UNIQUEMENT : sur mobile le décalage déborderait
   la colonne pleine largeur → neutralisé sous 861px (cf. media query). */
.signature .ba{position:relative}
.signature .ba::before{content:"";position:absolute;inset:0;transform:translate(13px,13px);
  border:1.5px solid rgba(240,194,94,.85);border-radius:22px;z-index:0;pointer-events:none}
.signature .ba .baslider{position:relative;z-index:1}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;align-items:start}
@media(max-width:680px){.baslider{aspect-ratio:3/4}
  /* cadrage têtes : en pleine largeur empilée le ratio change et coupait les visages →
     on remonte le point de cadrage (consolidé : était dupliqué page par page). */
  .baslider img,.gallery img{object-position:center 22%}}

/* Bannière à média (overlay) — remplace les ctaband un peu vides */
.banner{position:relative;border-radius:var(--rad,30px);overflow:hidden;padding:clamp(40px,7vw,84px) clamp(24px,5vw,60px);margin:clamp(40px,6vw,64px) 0;text-align:center;color:#FFF6E8;isolation:isolate}
.banner::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--bg);background-size:cover;background-position:center}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(58,34,24,.55),rgba(58,34,24,.72))}
/* Promo Académie : le voile vire au PRUNE (#6E4368) en pied de carte → la bannière se lit comme
   un territoire distinct du Salon (rouille), sans toucher au CTA qui reste moutarde. Haut assez
   sombre pour garder le contraste AA du titre/chapô. Le prune est ici de l'ATMOSPHÈRE (voile),
   pas de l'UI → conforme à la charte (mauve = logo/soleil/signature/ambiance). */
.banner.acad::after{background:linear-gradient(180deg,rgba(58,34,24,.72) 0%,rgba(72,44,58,.78) 54%,rgba(110,67,104,.85) 100%)}
/* Carte plus haute et centrée (respiration cinématique plutôt qu'ourlet de bas de page) */
.banner.acad{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(280px,34vw,400px)}
.banner h2{color:#FFF6E8;font-size:clamp(28px,4.4vw,46px);margin:0 0 12px}
.banner p{color:#F2E7D2;max-width:40em;margin:0 auto 22px;font-size:16px}

/* En-tête de page « titre + image » (anti grand blanc) */
.phead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center}
/* Héros utilisé seul comme <section class="phead wrap"> : même respiration verticale que .phero
   (sinon le héros est collé au menu en haut et à la section suivante en bas). */
.phead.wrap{padding-top:clamp(34px,5vw,60px);padding-bottom:clamp(34px,5vw,56px)}
.phead .pimg{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;max-height:clamp(380px,52vh,560px);box-shadow:0 14px 40px rgba(58,34,24,.16)}
.phead .pimg img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.phead{grid-template-columns:1fr}.phead .pimg{aspect-ratio:16/10;max-height:clamp(240px,44vh,360px)}}

/* ============ Bannière hero RÉSERVATION (pages B2C) — FULL-BLEED COURT ============ */
/* Bandeau pleine largeur (edge-to-edge) : photo en fond + scrim + titre/sous-titre superposés.
   Volontairement PLUS BAS que le carrousel d'accueil (.hcar ≈ 70-78vh) : ici ≈ 40vh / 360px max,
   pour que le widget de réservation (#booking) reste immédiatement visible dessous.
   La section .resa-hero remplace le .phero/.phead sur les 6 pages /reserver/. */
.resa-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;isolation:isolate;
      min-height:clamp(34vh,40vh,360px);display:flex;align-items:flex-end;
      background-size:cover;background-position:center 30%;background-repeat:no-repeat;background-color:#2A1710}
/* Scrim : voile sombre garantissant la lisibilité AA du texte crème sur la photo.
   Renfort latéral (lecture du contenu aligné à gauche) + renfort bas (titre ancré en bas). */
.resa-hero::after{content:"";position:absolute;inset:0;z-index:0;
      background:linear-gradient(90deg,rgba(40,23,16,.80) 0%,rgba(40,23,16,.58) 46%,rgba(40,23,16,.28) 100%),
                 linear-gradient(0deg,rgba(40,23,16,.74) 0%,rgba(40,23,16,0) 55%)}
.resa-hero .wrap{position:relative;z-index:1;width:100%;
      padding-top:clamp(26px,5vw,44px);padding-bottom:clamp(26px,5vw,44px)}
.resa-hero .rh-in{max-width:640px;color:#FFF6E8}
.resa-hero h1{font-family:var(--serif);font-weight:400;letter-spacing:0;color:#FFF6E8;
      font-size:clamp(30px,5.2vw,52px);line-height:1.04;margin:0;
      text-shadow:0 2px 18px rgba(40,23,16,.45)}
.resa-hero .lead{color:#F7EFE0;font-size:clamp(15px,2vw,18px);max-width:42ch;margin:14px 0 0;line-height:1.6;
      text-shadow:0 1px 10px rgba(40,23,16,.5)}
.resa-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.resa-hero .btn.ghost-light{background:transparent;color:#FFF6E8;border:1.5px solid rgba(255,246,232,.7)}
.resa-hero .btn.ghost-light:hover{background:rgba(255,246,232,.14);border-color:#FFF6E8}
 /* eyebrow + chips lisibles sur la bannière sombre (pages converties depuis .phead) */
 .resa-hero .eyebrow{color:#F4DCAE;margin:0 0 10px}
 .resa-hero .tarif-intro{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
 .resa-hero .tarif-intro .chip{background:rgba(255,246,232,.14);border:1px solid rgba(255,246,232,.34);
       color:#FFF6E8;padding:7px 14px;border-radius:999px;font-size:12.5px;line-height:1}
@media(max-width:560px){
  .resa-hero{min-height:clamp(30vh,38vh,300px)}
  .resa-hero .rh-in{max-width:100%}
  .resa-hero .cta{flex-direction:column;align-items:stretch}
  .resa-hero .cta .btn{width:100%}
}

/* ============ Carrousel héros (home) — BANNIÈRE PLEINE LARGEUR (full-bleed) ============ */
/* La section .hero n'a plus de padding ni de .wrap : la bannière .hcar occupe toute la
   largeur du viewport, edge-to-edge. Le contenu (.hwrap) et les chiffres (.hmeta) restent
   alignés sur la grille via leur propre .wrap interne. */
.hero{position:relative;padding:0;}
.hcar{position:relative;width:100%;overflow:hidden;isolation:isolate;
      min-height:clamp(70vh,78vh,760px);display:flex;align-items:center}
.hcar .hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;
      background-size:cover;background-position:center;will-change:opacity}
.hcar .hslide.on{opacity:1}
/* Les slides empilées en absolu restaient CLIQUABLES même invisibles : la slide 3 (dernière
   du DOM) recouvrait les CTA des slides 1-2 → « Découvrir l'Académie » ne répondait pas.
   Seule la slide active reçoit les événements ; le drag reste géré par .hcar lui-même. */
.hcar .hslide{pointer-events:none}
.hcar .hslide.on{pointer-events:auto}
/* Scrim : dégradé CHAUD et LUMINEUX (et non un voile plat) — garantit la lisibilité AA du texte
   clair à gauche tout en laissant la photo respirer à droite, où il s'efface complètement.
   Trois couches : brun latéral (lecture du contenu aligné à gauche) + renfort bas pour la rangée
   de chiffres + une touche ambrée chaude en bas à droite qui réchauffe la lumière de l'image. */
.hcar .hslide::after{content:"";position:absolute;inset:0;z-index:0;
      background:linear-gradient(90deg,rgba(40,23,16,.88) 0%,rgba(40,23,16,.78) 34%,rgba(40,23,16,.30) 66%,rgba(40,23,16,.04) 100%),
                 linear-gradient(0deg,rgba(40,23,16,.72) 0%,rgba(40,23,16,.10) 36%,rgba(40,23,16,0) 54%),
                 radial-gradient(80% 62% at 88% 92%,rgba(196,87,46,.18) 0%,rgba(196,87,46,0) 100%)}
.hcar .hwrap{position:relative;z-index:1;width:100%;color:#FFF6E8;
      padding-top:clamp(72px,9vw,104px);padding-bottom:clamp(110px,11vw,150px)}
.hcar .hwrap>*{max-width:640px}
.hcar .hwrap .tagline{font-family:var(--serif);font-style:italic;color:#F0C25E;font-size:clamp(18px,2.4vw,22px);margin-bottom:8px;
      text-shadow:0 1px 10px rgba(40,23,16,.5)}
/* .hh : slides 2/3 du carrousel — rendu typo IDENTIQUE au h1 de la 1ʳᵉ slide
   (un seul h1 sur l'accueil, a11y heading-order) tout en gardant l'aspect visuel. */
.hcar .hwrap h1,.hcar .hwrap .hh{font-family:var(--serif);font-weight:400;letter-spacing:0;color:#FFF6E8;font-size:clamp(36px,6vw,66px);line-height:1.04;margin:0 0 16px;
      text-shadow:0 2px 18px rgba(40,23,16,.45)}
.hcar .hwrap p{color:#F7EFE0;font-size:clamp(15px,2vw,18px);max-width:34em;margin:0 0 26px;line-height:1.6;
      text-shadow:0 1px 10px rgba(40,23,16,.5)}
.hcar .hwrap .cta{display:flex;gap:14px;flex-wrap:wrap}
/* CTA secondaire clair, lisible sur le scrim sombre */
.hcar .hwrap .btn.ghost-light{background:transparent;color:#FFF6E8;border:1.5px solid rgba(255,246,232,.7)}
.hcar .hwrap .btn.ghost-light:hover{background:rgba(255,246,232,.14);border-color:#FFF6E8}

/* Rangée de chiffres intégrée en bas de la bannière (présente sur toutes les slides) */
.hcar .hmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;
      padding:clamp(12px,1.6vw,16px) 0;
      background:linear-gradient(0deg,rgba(40,23,16,.58),rgba(40,23,16,.06));
      border-top:1px solid rgba(240,194,94,.30)}
.hcar .hmeta .meta{display:flex;gap:clamp(18px,3vw,40px);align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto}
.hcar .hmeta .stat{text-align:center}
.hcar .hmeta .stat b{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);display:block;line-height:1;color:#F0C25E}
.hcar .hmeta .stat span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#F2E7D2;font-weight:500}
/* Séparateurs : filets dorés dégradés (nets au centre, fondus aux extrémités) plutôt qu'un trait plat */
.hcar .hmeta .vline{width:1px;height:34px;background:linear-gradient(0deg,rgba(240,194,94,0),rgba(240,194,94,.55),rgba(240,194,94,0))}


/* Contrôles : dots dorés avec état actif allongé (barre de progression) + flèches en cercles
   filaires dorés. Repères discrets, dans la charte — pas des pastilles blanches génériques. */
.hcar .hdots{position:absolute;z-index:3;bottom:calc(clamp(12px,1.6vw,16px) + 56px);left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center}
.hcar .hdots button{width:9px;height:9px;border-radius:999px;border:0;padding:0;cursor:pointer;
      background:rgba(242,231,210,.42);transition:width .45s ease,background .45s ease}
.hcar .hdots button:hover{background:rgba(240,194,94,.7)}
.hcar .hdots button.on{width:30px;background:linear-gradient(90deg,var(--rouille,#C4572E),#F0C25E)}
.hcar .hdots button:focus-visible{outline:2px solid #F0C25E;outline-offset:3px}

.hcar .harrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
      width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      background:transparent;border:1px solid rgba(240,194,94,.55);color:#F0C25E;
      transition:background .3s ease,border-color .3s ease,color .3s ease}
.hcar .harrow:hover{background:rgba(240,194,94,.16);border-color:#F0C25E}
.hcar .harrow:focus-visible{outline:2px solid #F0C25E;outline-offset:3px}
.hcar .harrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hcar .harrow.prev{left:clamp(10px,2vw,26px)}
.hcar .harrow.next{right:clamp(10px,2vw,26px)}
/* Sous 980px : la place manque à côté du texte → on s'appuie sur les dots + le glissé tactile. */
@media(max-width:980px){.hcar .harrow{display:none}}

/* Mobile : bannière un peu moins haute, titre/CTA/chiffres compacts, pas de débordement */
@media(max-width:860px){
  .hcar{min-height:clamp(64vh,70vh,640px)}
  .hcar .hwrap{padding-bottom:clamp(120px,16vw,150px)}
  .hcar .hwrap>*{max-width:100%}
}
@media(max-width:560px){
  .hcar .hwrap .cta{flex-direction:column;align-items:stretch}
  .hcar .hwrap .cta .btn{width:100%}
  .hcar .hmeta .meta{gap:10px 18px}
  .hcar .hmeta .vline{display:none}
  .hcar .hmeta .stat span{font-size:9.5px;letter-spacing:.1em}
  .hcar .hdots{display:none}
}

/* Bandeau logos marques */
.brands{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,46px);align-items:center;justify-content:center;opacity:.85}
.brands img{height:30px;width:auto;object-fit:contain;filter:saturate(.2) opacity(.9)}
.brands .with-label{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}

/* ============ A11Y · FOCUS VISIBLE ============ */
/* Anneau de focus net (rouille marque), visible uniquement au clavier */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--rouille);
  outline-offset:2px;
  border-radius:4px;
}
/* sur fonds bruns/sombres (footer, héros carrousel, bannières), anneau crème pour le contraste */
footer a:focus-visible, .hcar :focus-visible, .banner a:focus-visible,
.promo a:focus-visible, .facet.acad a:focus-visible, .ctaband a:focus-visible{
  outline-color:var(--cream);
}

/* ============ ACADÉMIE · identité mauve/prune (scope) ============ */
/* Charte RIVIERA 76 (l.102) : facette Académie = accent UI/CTA **moutarde** (palette de base).
   Le mauve/prune (--aca-*) est l'identité **logo / soleil / signature** UNIQUEMENT — on ne
   remappe donc PAS les accents UI (boutons, eyebrow, puces) en mauve, sinon hors-charte. */
[data-facet="academie"] .sig, .is-academie .sig{color:var(--aca-mauve-text)}
[data-facet="academie"] .soleil, .is-academie .soleil{background:var(--aca-soleil)}

/* ============ MOTION · reveal au scroll ============ */
/* État caché posé UNIQUEMENT quand JS a ajouté .reveal-ready → sans JS, tout reste visible. */
.reveal-ready [data-reveal],
.reveal-ready .facet,
.reveal-ready .cards3 > *,
.reveal-ready .gallery4 > *,
.reveal-ready .gallery > *,
.reveal-ready .ba-grid > *,
.reveal-ready section > .lead{
  opacity:0;
  transform:translateY(20px) scale(.985);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:transform,opacity;
}
.reveal-ready [data-reveal].in-view,
.reveal-ready .facet.in-view,
.reveal-ready .cards3 > *.in-view,
.reveal-ready .gallery4 > *.in-view,
.reveal-ready .gallery > *.in-view,
.reveal-ready .ba-grid > *.in-view,
.reveal-ready section > .lead.in-view{
  opacity:1;
  transform:none;
}

/* ============ MOTION · ken-burns & lift ============ */
/* Ken-burns lent (transform only) — l'image interne zoome doucement */
.kenburns{overflow:hidden}
.kenburns > img, .kenburns .kb-img{
  transform-origin:center;
  animation:kb 12s ease-in-out forwards;
}
@keyframes kb{from{transform:scale(1)} to{transform:scale(1.06)}}

/* Lift au survol : carte s'élève + ombre, image interne légèrement zoomée */
.lift{transition:transform .35s ease, box-shadow .35s ease}
.lift:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(58,34,24,.5)}
.lift img{transition:transform .5s ease}
.lift:hover img{transform:scale(1.04)}

/* ===== #2 · Zoom doux des photos au survol (transform only, conteneur clippé) ===== */
.gallery picture,.gallery4 picture,.salon-shot,.scrolly-media{overflow:hidden}
.gallery picture img,.gallery4 picture img,.salon-shot img,.scrolly-media img{
  transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.gallery picture:hover img,.gallery4 picture:hover img,.salon-shot:hover img,.scrolly-media:hover img{transform:scale(1.06)}

/* ===== #3 · Hover homogène cartes + boutons ===== */
.facet,.card{transition:transform .35s ease, box-shadow .35s ease}
.facet:hover,.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(58,34,24,.46)}
.btn{transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(58,34,24,.45)}

/* ===== #5 · Header : condense au scroll + se cache en descendant, réapparaît au scroll-up ===== */
header{transition:transform .35s ease, background-color .3s ease, box-shadow .3s ease;}
header .nav{transition:height .3s ease}
header .brand .logo-sun,header .brand .sunmark{transition:width .3s ease, height .3s ease}
header.nav-shrink{background:rgba(242,231,210,.96);box-shadow:0 8px 24px -16px rgba(58,34,24,.5)}
header.nav-shrink .nav{height:60px}
header.nav-shrink .brand .logo-sun,header.nav-shrink .brand .sunmark{width:34px;height:34px}
header.nav-hidden{transform:translateY(-100%)}

/* ===== #8 · Indice de glissement (nudge) sur les sliders avant/après ===== */
.baslider.ba-hint .ba-before{transition:clip-path .45s cubic-bezier(.45,.05,.3,1)}
.baslider.ba-hint .ba-handle{transition:left .45s cubic-bezier(.45,.05,.3,1)}

/* ===== #7 · Halo "soleil" qui pulse doucement sur le logo (header) ===== */
@media (prefers-reduced-motion: no-preference){
  header .brand .logo-sun, header .brand .sunmark{
    animation: sunGlow 4.6s ease-in-out infinite;
    will-change: filter;
  }
  @keyframes sunGlow{
    0%,100%{ filter: drop-shadow(0 0 0 rgba(223,166,58,0)); }
    50%    { filter: drop-shadow(0 0 5px rgba(223,166,58,.55)); }
  }
}

/* ===== #9 · Parallaxe légère des héros de page (.phead .pimg) — CSS scroll-driven, 0 JS ===== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .phead .pimg img{
      height:118%;                 /* marge pour le déplacement, conteneur en overflow:hidden */
      animation: heroParallax linear both;
      animation-timeline: view();
      animation-range: entry cover;
      will-change: transform;
    }
    @keyframes heroParallax{ from{ transform: translateY(-9%); } to{ transform: translateY(9%); } }
  }
}

/* ============ A11Y · MOUVEMENT RÉDUIT (obligatoire WCAG 2.2) ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* reveal : état final immédiat, aucune translation (ceinture+bretelles, le JS ne pose pas .reveal-ready) */
  [data-reveal], .facet, .cards3 > *, section > .lead{
    opacity:1 !important;
    transform:none !important;
  }
  /* ken-burns off */
  .kenburns > img, .kenburns .kb-img{animation:none !important;transform:none !important}
  /* lift : pas de translation/zoom au survol */
  .lift:hover{transform:none !important}
  .lift:hover img{transform:none !important}
  /* nouveaux effets : pas de zoom/lift/cache-header en mouvement réduit */
  .gallery picture:hover img,.gallery4 picture:hover img,.salon-shot:hover img,.scrolly-media:hover img,
  .facet:hover,.card:hover,.btn:hover{transform:none !important}
  header.nav-hidden{transform:none !important}
  /* carrousel : figé sur la 1ʳᵉ slide (le JS ne lance pas l'auto-rotation non plus) */
  .hcar .hslide{transition:none !important}
  /* menu mobile : ouverture/fermeture instantanée, sans glissement */
  .navmobile{transition:none !important}
}

/* ============ MENU BURGER MOBILE (≤860px) ============ */
/* Bouton burger : masqué par défaut (desktop ET sans JS). Visible uniquement
   quand le JS a posé html[data-nav="on"] ET sous 860px → progressive enhancement. */
.navtoggle{display:none}
.navmobile{display:none}
@media(max-width:860px){
  html[data-nav="on"] .navtoggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:11px; margin-left:auto;
    background:transparent; border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
  }
  html[data-nav="on"] .navtoggle .navtoggle-bar{
    display:block; height:2px; width:100%; background:var(--brique); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  html[data-nav="on"] .navtoggle.is-open .navtoggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html[data-nav="on"] .navtoggle.is-open .navtoggle-bar:nth-child(2){opacity:0}
  html[data-nav="on"] .navtoggle.is-open .navtoggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ===== FIX header mobile : logo complet + pastille compacte + burger, sans chevauchement =====
     (audit) la pastille « Réserver un rendez-vous » écrasait/tronquait le logo. Ordre logo › pastille › burger ;
     pastille compacte ; masquée < 560px (le menu burger contient déjà le CTA Réserver). */
  .nav{gap:10px}
  .brand{order:1; min-width:0; flex:1 1 auto}
  .brand .logo-name{font-size:clamp(15px,4.4vw,19px); white-space:nowrap; overflow:hidden; text-overflow:clip}
  .navlinks{order:2; margin-left:auto; gap:8px; flex:0 0 auto}
  .navlinks .pill{padding:9px 15px; font-size:11px; letter-spacing:.05em; box-shadow:none}
  html[data-nav="on"] .navtoggle{order:3; margin-left:8px}

  /* Panneau mobile : déroule sous le header, liens à plat. */
  html[data-nav="on"] .navmobile{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-top:1px solid var(--line);
    padding:14px clamp(16px,5vw,24px) 20px;
    box-shadow:0 24px 60px -24px rgba(58,34,24,.45);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .28s ease, opacity .2s ease;
  }
  html[data-nav="on"] .navmobile.open{max-height:85vh; overflow:auto; opacity:1;}
  /* Tiroir mobile : TOUT déplié, hiérarchie typographique claire.
     Rubriques (liens vers les hubs) en SERIF & grandes ; sous-pages en SANS, petites, indentées (puce dorée). */
  .navmobile .nm-grp{padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--line)}
  .navmobile .nm-head, .navmobile .nm-link{
    display:block; font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.12;
    color:var(--ink); padding:12px 6px 6px; letter-spacing:0; text-transform:none;
  }
  .navmobile .nm-link{border-bottom:1px solid var(--line); padding:14px 6px;}
  .navmobile .nm-head:hover, .navmobile .nm-link:hover{color:var(--rouille)}
  .navmobile .nm-grp > a:not(.nm-head){
    display:block; font-family:var(--sans); font-size:14px; font-weight:500;
    color:var(--muted); padding:8px 6px 8px 24px; position:relative;
  }
  .navmobile .nm-grp > a:not(.nm-head)::before{
    content:""; position:absolute; left:8px; top:50%; width:8px; height:1.5px;
    background:var(--moutarde); transform:translateY(-50%); border-radius:2px;
  }
  .navmobile .nm-grp > a:not(.nm-head):hover{color:var(--rouille)}
  .navmobile .pill{
    margin-top:16px; background:var(--rouille); color:#fff; text-align:center; font-family:var(--sans);
    border:0; border-radius:999px; padding:14px 22px; font-weight:600;
    box-shadow:0 5px 16px rgba(196,87,46,.34);
  }
  .navmobile .pill:hover{background:#8A4A2C; color:#fff}
  /* le header doit ancrer le panneau en absolu */
  header .nav{position:relative}
}

/* ============================================================================
   POLISH GLOBAL — finitions visuelles (priorité MOBILE)
   Bloc ajouté en fin de fichier : ajustements chirurgicaux réutilisant les
   tokens/sélecteurs existants. Aucune réécriture des règles d'origine.
   Sections : A espacements mobile · B contraste · C largeurs de ligne ·
   D hauteurs de cartes · E finitions (veuves, footer, reveal de sécurité).
   ============================================================================ */

/* ----- E. ROBUSTESSE REVEAL (filet de sécurité) -----------------------------
   Si l'IntersectionObserver tarde/échoue, rien ne doit rester invisible.
   1) Filet temps : après 2,2s, tout élément encore caché redevient visible.
   2) Filet "no-JS observer" déjà couvert par .reveal-ready (posé par le JS).
   On ré-affiche aussi tout enfant resté caché si sa section est .in-view. */
.reveal-ready.reveal-safe [data-reveal],
.reveal-ready.reveal-safe .facet,
.reveal-ready.reveal-safe .cards3 > *,
.reveal-ready.reveal-safe .gallery4 > *,
.reveal-ready.reveal-safe .gallery > *,
.reveal-ready.reveal-safe .ba-grid > *,
.reveal-ready.reveal-safe section > .lead{opacity:1; transform:none;}

/* Filet PUR CSS (sans dépendre d'une classe JS) : une animation de secours
   restaure opacity:1 après 2,6s. .in-view (transition) prime visuellement avant ;
   si l'observer n'arme jamais l'élément (cas limite 390px signalé par l'agent HTML),
   l'animation garantit l'affichage. animation-fill-mode:forwards fige l'état final. */
@media (prefers-reduced-motion: no-preference){
  .reveal-ready [data-reveal],
  .reveal-ready .facet,
  .reveal-ready .cards3 > *,
  .reveal-ready .gallery4 > *,
  .reveal-ready .gallery > *,
  .reveal-ready .ba-grid > *,
  .reveal-ready section > .lead{
    animation:revealFailsafe 0s linear 2.6s forwards;
  }
  /* dès que .in-view est posé, l'animation de secours est neutralisée
     (la transition opacity/transform reprend la main, rendu identique à l'origine). */
  .reveal-ready .in-view{animation:none;}
}
@keyframes revealFailsafe{to{opacity:1; transform:none;}}

/* ----- E. VEUVES / ORPHELINES DE TITRES -------------------------------------
   Équilibre les retours à la ligne des grands titres. */
h1, h2, .hcar .hwrap .hh{text-wrap:balance;}
.lead, .prose p, .phero .lead, .resa-hero .lead{text-wrap:pretty;}

/* ----- B. CONTRASTE — liens dorés sur fonds clairs --------------------------
   Les liens "or" (email/tel/Insta) sur crème passent en ambre sombre + souligné.
   On cible les liens en ligne dans la prose/paragraphes portant un style doré
   inline ; pour ne pas dépendre d'inline, on durcit aussi le token visuel. */
.prose a:not(.btn):not(.pill):not(.sig),
p a:not(.btn):not(.pill):not(.sig){color:var(--rouille-text);}
/* eyebrows : déjà --rouille-text (AA). Onglets/inactifs : voir réservation plus bas. */

/* ----- B. CONTRASTE — durées/sous-libellés tarifs ---------------------------
   .ds (durées 5h15/5h30, descriptions) en --muted (AA) plutôt qu'en gris pâle. */
.prow .ds, .factbar .fact span, .vcard .who span, .brands .with-label,
.crumb, .marks .lbl{color:var(--muted);}

/* ----- C. LARGEURS DE LIGNE / CONTENEURS ARTICLE ----------------------------
   Prose blog + pages légales : colonne ~720px centrée (anti grand-blanc droite).
   On cible la prose dans .wrap qui n'est PAS dans un hero. */
.prose{margin-left:auto; margin-right:auto;}
main .wrap > .prose,
article .prose,
.legal .prose{max-width:720px; margin-left:auto; margin-right:auto;}

/* ----- C. LISTES PRIX / PRESTATIONS — rapprocher libellé↔prix ----------------
   Évite l'étirement pleine largeur : conteneur centré + leader léger. */
.ptable{max-width:760px; margin-left:auto; margin-right:auto;}
.prow{gap:clamp(16px,4vw,32px);}
.prow .pr{margin-left:auto;}

/* ----- D. HAUTEURS DE CARTES ÉGALES -----------------------------------------
   Témoignages, grilles génériques, ba-grid : stretch + CTA poussé en bas. */
.vgrid{align-items:stretch;}
.vcard{height:100%;}
.ba-grid{align-items:stretch;}
.cards3 > .card .btn,
.cards3 > .card .sublink,
.card .go{margin-top:auto;}
.factbar{align-items:stretch;}
.factbar .fact{display:flex; flex-direction:column; justify-content:center;}

/* ----- A. ESPACEMENTS MOBILE (priorité n°1) ---------------------------------
   Gouttières latérales garanties + rythme vertical homogène en clamp(). */
@media(max-width:560px){
  /* Gouttière latérale minimale : rien ne touche le bord. */
  .wrap{padding-left:clamp(16px,5vw,24px); padding-right:clamp(16px,5vw,24px);}

  /* Rythme vertical : compacte les grandes sections, évite les vides béants
     tout en gardant une respiration nette entre blocs clairs/sombres. */
  .facets, .signature, .voices{padding-top:clamp(40px,11vw,58px); padding-bottom:clamp(40px,11vw,58px);}
  .promo{padding-bottom:clamp(40px,11vw,58px);}
  .sec-head{margin-bottom:clamp(26px,7vw,40px);}

  /* Hero intérieur : resserre l'interligne/marges pour garder le CTA au-dessus du fold. */
  .phero{padding-top:clamp(24px,6vw,40px); padding-bottom:clamp(20px,5vw,32px);}
  .phero h1{font-size:clamp(30px,8.5vw,40px); line-height:1.06;}
  .phero .lead{margin-top:14px;}
  .phero .cta{margin-top:20px;}

  /* Cibles tactiles ≥44px : boutons, accordéons FAQ, titres footer, liens nav. */
  .btn{min-height:44px;}
  .faq summary{min-height:44px; display:flex; align-items:center; justify-content:space-between; padding-right:2px;}
  .faq summary::after{float:none; margin-left:12px;}
  .navmobile .nm-link, .navmobile .nm-head{min-height:44px; display:flex; align-items:center;}
  .navmobile .pill{min-height:48px;}
  .fcol-h{min-height:48px;}

  /* fact-bars : déjà flex-wrap ; on garantit ≥2 par ligne avec interligne suffisant. */
  .factbar{gap:12px;}
  .factbar .fact{flex:1 1 calc(50% - 6px); padding:14px 14px;}
}

/* fact-bars très étroits (<360px) : empile en 1 colonne, interligne aéré. */
@media(max-width:360px){
  .factbar{gap:10px;}
  .factbar .fact{flex:1 1 100%;}
  /* marques : évite tout débordement / collage au bord. */
  .marks .wrap{gap:18px;}
  .brand .logo-name{font-size:clamp(14px,4vw,17px);}
}

/* ----- A. SÉCURITÉ ESPACEMENT — bannières/CTA edge-to-edge -------------------
   La bande CTA brune et les bannières gardent une marge latérale en mobile. */
@media(max-width:560px){
  .ctaband{padding:clamp(28px,8vw,40px) clamp(20px,6vw,28px);}
  .banner{padding:clamp(36px,10vw,56px) clamp(20px,6vw,32px);}
}

/* ----- B. CONTRASTE — overlay texte sur photos (renfort mobile) -------------
   Sur petits écrans le crop peut éclaircir : on renforce le scrim sous le texte. */
@media(max-width:560px){
  /* Mobile : le texte est empilé SUR la photo (plus de colonne libre à droite) → le renfort
     devient vertical, dense sous le texte et s'allégeant vers le haut, pour que le visuel
     reste lumineux en haut de bannière au lieu d'être noyé sous un voile latéral. */
  .hcar .hslide::after{
    background:linear-gradient(0deg,rgba(40,23,16,.88) 0%,rgba(40,23,16,.78) 44%,rgba(40,23,16,.62) 74%,rgba(40,23,16,.46) 100%),
               linear-gradient(90deg,rgba(40,23,16,.26) 0%,rgba(40,23,16,.08) 100%);
  }
  .resa-hero::after{
    background:linear-gradient(90deg,rgba(40,23,16,.86) 0%,rgba(40,23,16,.66) 55%,rgba(40,23,16,.40) 100%),
               linear-gradient(0deg,rgba(40,23,16,.82) 0%,rgba(40,23,16,0) 55%);
  }
}

/* ----- B. ONGLETS RÉSERVATION / "Offrir" / "Mon compte" — inactifs lisibles -
   Cibles tactiles + contraste des onglets inactifs (gris pâle → muted). */
.tab, [role="tab"], .resa-tab{min-height:44px;}
.tab[aria-selected="false"], [role="tab"][aria-selected="false"]{color:var(--muted);}

/* ----- E. FOOTER — équilibre + cibles -----------------------------------------
   Liens footer : zone cliquable confortable, titres colonnes lisibles. */
footer ul a{display:inline-block; padding:3px 0;}
@media(max-width:560px){
  .fgrid>div.fcol-open .fcol-h + ul a{padding:8px 0; min-height:40px;}
}

/* ----- A11Y — focus-visible renforcé sur les onglets/accordéons --------------*/
.faq summary:focus-visible, .fcol-h:focus-visible, .tab:focus-visible{outline-offset:3px;}

/* ============================================================
   HEADER MOBILE 3 ZONES + ANIMATIONS (ajout — burger gauche / logo centré / icône Réserver droite)
   CSS pur, 0 requête réseau, respecte prefers-reduced-motion. Cascade : placé en fin de fichier
   → surcharge les règles header mobile précédentes (même spécificité, plus tardif).
   ============================================================ */
.navbook{display:none}
@media(max-width:860px){
  .nav{gap:8px}
  /* burger À GAUCHE */
  html[data-nav="on"] .navtoggle{order:1; margin:0 auto 0 0}
  /* logo CENTRÉ */
  .brand{order:2; flex:1 1 auto; justify-content:center; min-width:0; gap:10px}
  .brand .logo-name{font-size:clamp(15px,4.3vw,19px); white-space:nowrap}
  /* nav desktop masquée sur mobile (le CTA passe par l'icône + le burger) */
  .navlinks{display:none}
  /* icône RÉSERVER À DROITE — pastille dorée ronde, pendant visuel du burger (46px) */
  .navbook{order:3; display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; flex:0 0 auto; border-radius:50%;
    background:var(--rouille-deep); color:var(--cream); position:relative;
    box-shadow:0 6px 16px rgba(168,68,31,.34); -webkit-tap-highlight-color:transparent;}
  .navbook svg{position:relative; z-index:2}
  .navbook:hover{background:#8A4A2C}
  /* sans JS, le burger reste masqué : on garde le logo centré + icône à droite */
}
/* Animation élégante de l'icône Réserver : halo qui respire (attire l'œil sans agresser) */
@media(max-width:860px) and (prefers-reduced-motion:no-preference){
  .navbook::after{content:""; position:absolute; inset:0; border-radius:50%; z-index:1;
    border:2px solid var(--rouille-deep); animation:navbookHalo 2.6s cubic-bezier(.4,0,.2,1) infinite;}
  @keyframes navbookHalo{0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.55);opacity:0} 100%{opacity:0}}
  /* l'icône calendrier respire doucement */
  .navbook svg{animation:navbookBreath 2.6s ease-in-out infinite}
  @keyframes navbookBreath{0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}}
}

/* ===== Micro-interactions tactiles mobile (dynamisme, 0 coût réseau) ===== */
@media(hover:none){
  .btn:active,.pill:active,.navbook:active{transform:scale(.95)}
  .facet:active,.two .facet:active{transform:translateY(1px)}
  a,.btn,.pill,.navtoggle,.navbook{-webkit-tap-highlight-color:transparent}
}
.btn,.pill,.navbook,.facet{transition:transform .18s ease, background-color .25s ease, box-shadow .25s ease}
@media(max-width:860px) and (prefers-reduced-motion:no-preference){
  /* le soleil du logo tourne très lentement = vie discrète, premium */
  .brand .logo-sun{animation:logoSun 26s linear infinite}
  @keyframes logoSun{to{transform:rotate(360deg)}}
}

/* ===== Vignettes photo sur les cartes prestations (page /salon/prestations/) ===== */
.card.has-thumb{padding:0; overflow:hidden;}
.card.has-thumb > .card-thumb{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--sand);}
.card.has-thumb > .card-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.card.has-thumb:hover > .card-thumb img{transform:scale(1.04);}
.card.has-thumb > h3{margin:20px 24px 8px;}
.card.has-thumb > p{margin:0 24px 24px;}

/* ===== Hero « salon » (page L'Espace) : laisser voir le salon (overlay allégé, plus haut) ===== */
.resa-hero.salon-hero{min-height:clamp(46vh,56vh,520px); background-position:center 26%;}
.resa-hero.salon-hero::after{
  background:linear-gradient(90deg,rgba(40,23,16,.60) 0%,rgba(40,23,16,.30) 48%,rgba(40,23,16,.06) 100%),
             linear-gradient(0deg,rgba(40,23,16,.55) 0%,rgba(40,23,16,0) 52%);
}

/* ===== Page Prestations : sections dédiées (photo 2/3 + texte 1/3) ===== */
.prestas{padding:clamp(40px,6vw,72px) 0 clamp(16px,3vw,28px);}
.presta-rows{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,32px);}
.presta-row{display:grid; grid-template-columns:1fr 2fr; gap:clamp(28px,4vw,56px); align-items:center; padding:clamp(34px,5vw,58px) 0;}
.presta-row + .presta-row{border-top:1px solid var(--line);}
.presta-row__photo{border-radius:var(--rad); overflow:hidden; box-shadow:0 18px 48px rgba(58,34,24,.12); background:var(--sand);}
.presta-row__photo img{width:100%; height:auto; display:block; max-height:680px; object-fit:cover; object-position:center top;}
.presta-row__txt .eyebrow{margin-bottom:10px;}
.presta-row__txt h2{font-size:clamp(28px,3.4vw,40px); color:var(--brique); margin-bottom:14px;}
.presta-row__txt p{color:var(--muted); margin-bottom:14px;}
.presta-row__price{font-weight:600; color:var(--rouille-text);}
/* alterne le CÔTÉ sans changer la proportion : photo TOUJOURS 2/3, texte 1/3 */
.presta-row:nth-child(even){grid-template-columns:2fr 1fr;}
.presta-row:nth-child(even) .presta-row__txt{order:1;}
.presta-row:nth-child(even) .presta-row__photo{order:2;}
@media(max-width:860px){
  .presta-row, .presta-row:nth-child(even){grid-template-columns:1fr; gap:16px; padding:clamp(26px,7vw,38px) 0;}
  .presta-row:nth-child(even) .presta-row__photo{order:0;}
  .presta-row:nth-child(even) .presta-row__txt{order:0;}
  .presta-row__photo img{max-height:560px;}
}
/* ===== Restyle DESKTOP des prestations (maquette Stitch validée par Alex) — ≥861px UNIQUEMENT.
   Consigne explicite : NE RIEN CHANGER à l'affichage mobile → tout le delta vit dans ce bloc,
   sous 861px le rendu existant reste identique au pixel. 6 rangées à poids strictement égal. ===== */
@media(min-width:861px){
  .presta-row, .presta-row:nth-child(even){grid-template-columns:1fr 1.15fr; gap:clamp(28px,5vw,76px);
        padding:clamp(36px,5vw,60px) 0;}
  .presta-row__photo{aspect-ratio:4/5; max-height:520px; box-shadow:0 20px 52px rgba(58,34,24,.14);}
  .presta-row__photo img{height:100%; max-height:none;}
  .presta-row__txt h2{font-size:clamp(28px,3.2vw,38px);}
  /* tarif en pastille sable (au lieu d'une ligne de texte) */
  .presta-row__price{display:inline-block; background:rgba(242,231,210,.55); border:1px solid var(--line);
        border-radius:10px; padding:11px 16px; color:#3A2218; margin-bottom:16px;}
}


/* ===== Galerie ambiance salon (page L'Espace) — plus agréable à parcourir ===== */
.salon-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.5vw,16px); margin:clamp(28px,4vw,46px) 0;}
.salon-gallery figure{margin:0; border-radius:var(--rad); overflow:hidden; aspect-ratio:4/3; box-shadow:0 12px 32px rgba(58,34,24,.10);}
.salon-gallery img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease;}
.salon-gallery figure:hover img{transform:scale(1.05);}
@media(max-width:680px){
  .salon-gallery{grid-template-columns:1fr 1fr; gap:8px;}
  .salon-gallery figure:first-child{grid-column:1 / -1; aspect-ratio:16/9;}
}

/* ===== Widget Planity (#booking) : boutons aux couleurs de la charte =====
   Le widget rend des boutons NOIRS (rgb(32,32,32), classes button-module_primary-*) et GRIS
   (button-module_secondary-* fond gris clair / service-module_toggle-* texte gris) que la
   config primaryColor ne recolore pas. Hashs de classes instables entre versions du widget
   → ciblage par PRÉFIXE d'attribut, scopé #booking (s'applique aux 6 pages réservation). */
#booking [class*="button-module_primary"],
#booking [class*="planity_ui_button_root"],
#booking [class*="planity_ui_action_button_root"]{background:#C4572E !important;color:#FBF4E6 !important;border-color:#C4572E !important;}
#booking [class*="button-module_primary"]:hover,
#booking [class*="planity_ui_button_root"]:hover,
#booking [class*="planity_ui_action_button_root"]:hover{background:#A8441F !important;}
#booking [class*="button-module_secondary"]{background:#F2E7D2 !important;color:#3A2218 !important;}
#booking [class*="button-module_secondary"]:hover{background:#E9DABE !important;}
#booking [class*="button-module_tertiary"]{color:#9C3D1A !important;}
#booking [class*="service-module_toggle"]{color:#8A6F5C !important;}

/* ===== Pastille Académie (dégradé charte) devant les titres des cartes pilier ===== */
.aca-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:2px;
  background:linear-gradient(118deg,#E6A98F 0%,#C06E82 52%,#6E4368 100%)}

/* ===== RUBAN D'AVIS partagé (.tribbon) — même style que l'accueil, une ligne, défilement continu.
   Opt-in par la classe tribbon sur la section qui contient le .tcar. Sans JS ou en reduced-motion :
   rangée scrollable à la main, pas d'animation. ===== */
.tribbon .tcar{position:relative;margin:0 auto;max-width:none}
.tribbon .tcar__viewport{overflow-x:auto;border-radius:var(--rad);outline:none;scrollbar-width:none;touch-action:pan-y pan-x}
.tribbon .tcar__viewport::-webkit-scrollbar{display:none}
.tribbon .tcar--marq .tcar__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tribbon .tcar__viewport:focus-visible{box-shadow:0 0 0 2px var(--cream,#FFF6E8),0 0 0 4px var(--moutarde)}
.tribbon .tcar__track{display:flex;width:max-content;list-style:none;margin:0;padding:0;align-items:stretch}
.tribbon .tcar--marq .tcar__track{animation:vmarq var(--marq-dur,54s) linear infinite;will-change:transform}
@keyframes vmarq{to{transform:translateX(-50%)}}
.tribbon .tcar:hover .tcar__track,
.tribbon .tcar:focus-within .tcar__track,
.tribbon .tcar.is-paused .tcar__track{animation-play-state:paused}
.tribbon .tcar__slide{flex:0 0 clamp(280px,26.5vw,372px);min-width:0;box-sizing:border-box;padding:6px 10px}
@media(max-width:560px){.tribbon .tcar__slide{flex:0 0 85vw}}
.tribbon .tcar__card{background:var(--cream,#FFF6E8);border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(18px,2.6vw,30px);margin:0;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  box-shadow:0 18px 40px -28px rgba(74,53,40,.45)}
.tribbon .tcar__card .stars{color:#DFA63A;margin:0 0 12px;letter-spacing:.06em}
.tribbon .tcar__quote{margin:0 0 16px;font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.5;font-style:italic;color:var(--ink)}
.tribbon .tcar__mark{color:var(--moutarde);font-style:normal;font-weight:400;padding:0 .12em}
.tribbon .tcar__who{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted)}
.tribbon .tcar__name{font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--rouille-text,#9C3D1A)}
.tribbon .tcar__date{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:500}
.tribbon .vscore{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.tribbon .vscore .stars{color:#DFA63A;letter-spacing:.08em}
.tribbon .vscore b{font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .tribbon .tcar__track{animation:none !important;transform:none !important}
  .tribbon .tcar__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:none;mask-image:none}
  .tribbon .tcar__slide{scroll-snap-align:center}
}