/* ============================================================
   TROT — "Focus-style" system
   Deep-green canvas · bold grotesque · vibrant annonce tiles
   ============================================================ */
@font-face{
  font-family:"Petit Cochon";
  src:url("assets/petit-cochon.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:#2c3830;            /* soft charcoal-green text on beige (not harsh black) */
  --ink-soft:rgba(44,56,48,.7);
  --green-deep:#013318;
  --green:#014421;          /* OFFICIAL TROT green */
  --green-600:#014421;
  --green-500:#014421;
  --green-400:#014421;
  --green-300:#014421;
  --gold:#FFC53D;

  --orange:#C85000;
  --orange-300:#C85000;

  --cream:#f4eee0;          /* light text on green sections + cards */
  --cream-2:#ece4d2;
  --cream-dim:rgba(44,56,48,.72);   /* body text on beige */
  --cream-faint:rgba(44,56,48,.5);
  --line:rgba(22,36,27,.14);
  --line-strong:rgba(22,36,27,.24);
  --surface:#fbf8f0;        /* white card on beige */
  --surface-2:#f3eee1;

  --r-lg:30px;
  --r-md:20px;
  --r-sm:13px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1080px;
  --pad:clamp(20px,5vw,68px);

  --font-wordmark:"Kaushan Script",cursive;
  --font-script:"Kaushan Script",cursive;
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-text:"Hanken Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box}
/* Le fond du `body` (beige) se propageait au canvas, donc l'élastique de
   défilement sur mobile laissait voir du beige au-dessus de la page. En posant
   un fond sur `html`, c'est lui que le navigateur utilise pour cette zone :
   vert Trot en haut comme demandé, et en bas ça tombe juste puisque le pied de
   page est déjà de ce vert-là. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;width:100%;
  background:var(--green)}
body{
  margin:0;font-family:var(--font-text);position:relative;
  background-color:#e4e0d5;background-image:url("assets/bg/bg-05.png");background-size:620px 620px;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;width:100%;max-width:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}

/* ---------- Scattered equestrian icons (decorative watermark layer) ---------- */
.bg-icons{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-icons img{position:absolute;display:block;opacity:.15;filter:saturate(.78);
  -webkit-user-drag:none;user-select:none;will-change:transform}
@media (max-width:1180px){.bg-icons{display:none}}
@media (prefers-reduced-motion:no-preference){
  .bg-icons img{animation:bgFloat 13s ease-in-out infinite}
}
@keyframes bgFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display);font-weight:800;
  line-height:.94;letter-spacing:-.04em;text-wrap:pretty;margin:0;
}
.eyebrow{
  font-family:var(--font-text);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-300);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:20px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.c::before{display:none}
.wordmark{font-family:var(--font-script);font-weight:400;letter-spacing:0;line-height:1;display:inline-block}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative;z-index:2}
.hero{z-index:2}
.footer{position:relative;z-index:2}
.section-pad{padding-block:clamp(26px,3.6vw,50px)}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-display);font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:100px;cursor:pointer;border:none;
  transition:transform .35s var(--ease-out),background .3s,color .3s;will-change:transform;
}
.btn .arrow{transition:transform .4s var(--ease-out)}
.btn:hover .arrow{transform:translateX(5px)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-300)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#fff}
.btn-outline{background:transparent;color:var(--cream);border:1.5px solid var(--line-strong)}
.btn-outline:hover{border-color:var(--cream);background:rgba(242,236,220,.06)}

/* App store badges (white, official look) */
.stores{display:flex;gap:11px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:9px;padding:9px 17px 9px 14px;border-radius:11px;
  background:#fff;color:#0a0a0a;border:1px solid rgba(22,36,27,.12);transition:transform .4s var(--ease-out),box-shadow .4s;will-change:transform}
.store:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.3)}
.store svg{width:20px;height:20px;flex:none}
.store>div{display:flex;flex-direction:column;line-height:1}
.store .s-top{font-size:9px;opacity:.66;font-weight:600;white-space:nowrap;letter-spacing:.02em;text-transform:uppercase}
.store .s-big{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.1;white-space:nowrap;letter-spacing:-.01em}

/* ---------- Nav (transparent over beige, hides on scroll down) ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(28px,4vw,64px)}
.nav-logo{height:74px;display:flex;align-items:center}
.nav-logo img{height:100%;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-weight:600;font-size:15px;padding:9px 15px;border-radius:100px;color:var(--cream);opacity:.82;transition:.3s}
.nav-links a:not(.nav-cta):hover{opacity:1;background:rgba(255,255,255,.1)}
.nav-cta{margin-left:14px;background:transparent;color:#fff;font-family:var(--font-text);font-weight:700;
  font-size:14px;padding:7px 7px 7px 16px;border-radius:100px;opacity:1;border:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:10px;
  transition:gap .35s var(--ease-out),color .3s}
.nav-cta .arrow{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#fff;color:var(--green);transition:transform .4s var(--ease-out),background .3s,color .3s}
.nav-cta .arrow svg{width:15px;height:15px}
.nav-links a.nav-cta{color:#fff;opacity:1}
.nav-links a.nav-cta:hover{background:transparent;gap:13px;color:#fff}
.nav-cta:hover .arrow{background:var(--orange);color:#fff;transform:translateX(2px)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{width:26px;height:2.5px;background:var(--cream);border-radius:2px;transition:.3s}

/* ---------- Reveal ---------- */
/* Reveal: base state is VISIBLE; the entrance animates FROM hidden as an
   enhancement. If the animation timeline is frozen (capture/print/reduced
   motion), content still shows instead of staying invisible. */
/* L'élément était VISIBLE par défaut (`opacity:1`) alors que l'animation
   d'entrée démarre à `opacity:0` et 22 px plus bas. Au scroll, on le voyait donc
   en place, puis disparaître et remonter en fondu — le défaut signalé par
   Fabien le 2026-08-21.
   On le masque désormais avant révélation, mais UNIQUEMENT quand le script est
   là pour le révéler : `js` est posée sur <html> par trot-app.js. Sans
   JavaScript, ou si le script échoue, tout reste visible. */
[data-reveal]{opacity:1}
html.js [data-reveal]:not(.in){opacity:0}
[data-reveal].in{opacity:1;animation:revIn .7s var(--ease-out) both}
/* `opacity:1` explicite en plus de l'animation : si celle-ci ne s'exécute pas —
   onglet en arrière-plan, mouvement réduit, moteur qui la refuse — l'élément
   resterait bloqué sur l'état de départ, donc invisible. Pendant l'animation
   c'est la keyframe qui gagne, le rendu ne change pas. */
@keyframes revIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
[data-reveal-d="1"]{animation-delay:.08s}[data-reveal-d="2"]{animation-delay:.16s}
[data-reveal-d="3"]{animation-delay:.24s}[data-reveal-d="4"]{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){[data-reveal].in{animation:none}}
/* word-by-word reveal (premium paragraph entrance) */
[data-words] .aw-i{display:inline-block;will-change:transform}
[data-words].in .aw-i{animation:wordIn .6s var(--ease-out) both;animation-delay:calc(var(--wi) * .035s)}
.hero-headline[data-words].in .aw-i{animation:heroWordNet .64s ease both;animation-delay:calc(.45s + var(--wi) * .085s)}
@keyframes wordIn{from{opacity:0;transform:translateY(0.4em)}to{opacity:1;transform:translateY(0)}}
@keyframes heroWordNet{from{opacity:0;filter:blur(11px);transform:translateY(.12em)}to{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion:reduce){[data-words].in .aw-i{animation:none}}

/* ============================================================
   PAGE MAZE — full-page "parcours" background
   ============================================================ */
.page-maze{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.page-maze svg{position:absolute;top:0;left:0}
.mz-icons{position:absolute;inset:0}
.mz-ico{position:absolute;transform:translate(-50%,-50%) scale(.6);width:clamp(96px,9vw,150px);height:clamp(96px,9vw,150px);line-height:1;opacity:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  filter:drop-shadow(0 10px 22px rgba(1,44,22,.16))}
.mz-ico img{width:100%;height:100%;object-fit:contain;display:block}
.mz-ico.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:820px){.page-maze{display:none}}

/* ============================================================
   HERO — beige · framed by the maze
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--green);
  padding-top:clamp(120px,15vh,170px);padding-bottom:clamp(56px,7vw,100px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:1;
  background:radial-gradient(120% 100% at 50% 100%,rgba(0,0,0,.18),transparent 70%)}
.hero .wrap.hero-top{max-width:1180px;margin:0 auto;position:relative;z-index:2}
/* horizontal: copy left, phone right */
.hero-stage{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(32px,5vw,76px)}
.hero-copy{max-width:600px}
.hero-headline{font-family:var(--font-display);font-weight:900;color:#fff;
  font-size:clamp(40px,5.6vw,82px);line-height:.98;letter-spacing:-.035em;margin:0;text-wrap:balance}
.hero-headline .hl{color:#fff}
.hero-headline[data-words]{visibility:hidden}
.hero-headline[data-words].in{visibility:visible}
.hero-headline .w-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero-headline .w-in{display:inline-block;animation:heroWordUp .72s cubic-bezier(.18,.9,.22,1) both}
@keyframes heroWordUp{from{transform:translateY(110%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-headline .w-in{animation:none}}
.hero-sub{margin:clamp(20px,2.6vw,30px) 0 0;color:rgba(255,255,255,.82);font-size:clamp(16px,1.4vw,19px);
  line-height:1.55;max-width:40ch;font-weight:500}
.hero-phone{position:relative;display:flex;justify-content:center}
.hero-phone .phone{box-shadow:0 50px 90px -44px rgba(1,44,22,.5);animation:heroRise 1s var(--ease-out) both}
@keyframes heroRise{from{transform:translateY(38px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-phone .phone{animation:none}}
.hero-cta{width:fit-content;max-width:100%;margin-top:clamp(22px,3vw,32px)}
.hero-stores{display:flex}
.hero-geo-row{margin-top:clamp(13px,1.7vw,20px)}
/* social-proof bar */
.hero-proof{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:clamp(28px,3.4vw,38px);
  padding-top:clamp(24px,3vw,32px);border-top:1px solid rgba(255,255,255,.18)}
.hp-stats{display:flex;align-items:flex-start;gap:clamp(20px,3vw,40px)}
.hp-item{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.hp-n{font-family:"Fredoka",var(--font-display);font-weight:600;font-size:clamp(28px,3.4vw,44px);color:#fff;letter-spacing:-.01em;white-space:nowrap;height:clamp(30px,3.6vw,46px);display:flex;align-items:center}
.hp-item:nth-child(3){justify-content:flex-start}
.hp-item .stars5{height:clamp(30px,3.6vw,46px);display:flex;align-items:center}
.hp-rate-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.hp-rate-num{font-family:"Fredoka",var(--font-display);font-weight:600;font-size:clamp(28px,3.4vw,44px);color:#fff;letter-spacing:-.01em;line-height:1}
.stars5{position:relative;display:inline-block;font-size:clamp(19px,2vw,27px);line-height:1;letter-spacing:2px}
.stars5-bg{color:rgba(255,255,255,.28)}
.stars5-fg{position:absolute;top:50%;left:0;transform:translateY(-50%);color:var(--gold);overflow:hidden;width:var(--fill);white-space:nowrap}
.hp-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.6);margin-top:10px;white-space:nowrap}
.hp-div{width:1px;align-self:stretch;min-height:40px;background:rgba(255,255,255,.2)}
.hp-geo{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;color:rgba(255,255,255,.8);font-size:13px;font-weight:600}
.hp-flags{display:flex;align-items:center;gap:7px}
.hp-geo .cc{display:inline-block;width:23px;height:16px;border-radius:3px;overflow:hidden;padding:0;border:none;
  font-size:0;line-height:0;vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.cc-fr{background:linear-gradient(90deg,#0055A4 0 33.33%,#fff 33.33% 66.66%,#EF4135 66.66% 100%)}
.cc-be{background:linear-gradient(90deg,#1a1a1a 0 33.33%,#FAE042 33.33% 66.66%,#ED2939 66.66% 100%)}
.cc-lu{background:linear-gradient(180deg,#ED2939 0 33.33%,#fff 33.33% 66.66%,#00A1DE 66.66% 100%)}
.cc-ch{background:linear-gradient(#fff,#fff) center/46% 14% no-repeat,linear-gradient(#fff,#fff) center/14% 46% no-repeat,#D52B1E}
.hp-geo-t{margin-right:6px;color:rgba(255,255,255,.62)}
@media (max-width:860px){
  .hero-stage{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-copy{max-width:none;display:flex;flex-direction:column;align-items:center}
  .hero-headline{font-size:clamp(40px,11vw,60px)}
  .hero-sub{max-width:42ch}
  .hero-proof{align-items:center}
  .hero-phone{order:0;margin-top:6px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================================
   ANNONCE TILES + MARQUEE GALLERY
   ============================================================ */
.tile{position:relative;flex:none;width:224px;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:#fff;isolation:isolate;
  transition:transform .5s var(--ease-out)}
.tile:hover{transform:translateY(-6px)}
.tile--green{background:var(--green)}
.tile--orange{background:var(--orange)}
.tile--cream{background:var(--cream-2);color:var(--ink)}
.tile--ink{background:#012a14}
.tile .t-img{position:absolute;inset:0;z-index:0;opacity:.9;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 13px,transparent 13px 26px)}
.tile--cream .t-img{background:repeating-linear-gradient(135deg,rgba(1,44,22,.06) 0 13px,transparent 13px 26px)}
.tile .t-img .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-text);
  font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.32);
  padding:5px 9px;border-radius:7px;white-space:nowrap}
.tile--cream .t-img .lbl{color:rgba(1,44,22,.5);border-color:rgba(1,44,22,.28)}
.tile .t-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.tile .chip{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(0,0,0,.28);backdrop-filter:blur(4px);padding:5px 9px;border-radius:7px}
.tile--cream .chip{background:var(--green);color:#fff}
.tile .price{font-family:var(--font-display);font-weight:700;font-size:15px;background:rgba(0,0,0,.3);
  backdrop-filter:blur(4px);padding:5px 10px;border-radius:7px}
.tile--cream .price{background:var(--green);color:#fff}
.tile .t-bot{position:relative;z-index:2}
.tile h4{font-family:var(--font-display);font-weight:700;font-size:17px;margin:0 0 3px;letter-spacing:-.01em;line-height:1.05}
.tile .loc{font-size:12px;opacity:.82;font-weight:500}
.tile .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(5px);border:1.5px solid rgba(255,255,255,.45)}
.tile .play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tile--cream .play{background:rgba(1,44,22,.12);border-color:rgba(1,44,22,.4)}
.tile--cream .play::after{border-left-color:var(--green)}

.gallery{overflow:hidden;padding-top:clamp(58px,7vw,110px)}
#row2{display:none}
.gal-rows{display:flex;flex-direction:column;gap:18px}
.trow{display:flex;gap:30px;width:max-content;animation:scrollx 42s linear infinite}
.trow.dragging{cursor:grabbing}
.trow.js-marquee{animation:none!important}
.trow img,.trow .gphone{-webkit-user-drag:none;user-select:none}
.trow.rev{animation-direction:reverse;animation-duration:72s}
.gallery .gphone{flex:none}
.gallery .phone{width:208px;box-shadow:none;border-radius:34px}
.gallery .phone .phone-screen{border-radius:35px}
.phone-photo .phone-screen{background:#15161a}
.phone-photo .pf-shot{width:100%;height:100%;object-fit:cover;display:block}

/* Hero phone: dark graphite frame; the screen-recording status bar baked into the
   video is masked by a clean status-bar overlay (see .hsb-* below) — no crop.
   The feed photo is also set as a background so the screen is NEVER black even
   if the video can't autoplay (e.g. inside an iframe on iOS). */
#heroPhone .phone-screen{background:#15161a center/cover no-repeat url("assets/feed-emploi-alexis.jpg")}
#heroPhone .pf-shot{position:relative;z-index:1}
/* Scrim behind the app's own tab labels ("Chevaux / Marketplace", "Feed / Likes")
   baked into the video, just below the .hsb status bar — those go unreadable on
   bright footage without it. */
#heroPhone .phone-screen::after{content:"";position:absolute;top:0;left:0;right:0;height:26%;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.24) 55%,rgba(0,0,0,0) 100%)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* Clean status-bar overlay that masks the screen-recording / share / low-battery
   indicators baked into the top of the hero video. Matches the app's dark top
   (~rgb 22,22,21) so it reads as the status-bar area, not an added strip. */
.hsb{position:absolute;top:0;left:0;right:0;height:8.4%;z-index:12;
  background:linear-gradient(180deg,#15150f 0%,#15150f 64%,rgba(21,21,15,0) 100%);
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:3.4% 7% 0;color:#fff;pointer-events:none;font-family:var(--font-text)}
.hsb-time{display:block;font-weight:700;font-size:clamp(11px,3.4%,15px);letter-spacing:.01em;line-height:1}
.hsb-island{position:absolute;top:9%;left:50%;transform:translateX(-50%);
  width:30%;height:42%;background:#000;border-radius:999px}
.hsb-right{display:flex;align-items:center;gap:5px}
.hsb-right svg{display:block;height:11px;width:auto;fill:#fff}
.hsb-batt{width:23px;height:11px;border:1.4px solid rgba(255,255,255,.85);border-radius:3px;position:relative;display:inline-block}
.hsb-batt::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:1.6px;height:4px;background:rgba(255,255,255,.85);border-radius:0 1px 1px 0}
.hsb-batt::before{content:"";position:absolute;left:1.4px;top:1.4px;bottom:1.4px;width:72%;background:#fff;border-radius:1px}

.gal-head{margin-bottom:clamp(34px,4.5vw,60px)}
.gal-title{white-space:nowrap}
.gal-br{display:none}
.gal-sub{margin:16px 0 0;max-width:56ch;color:var(--cream-dim);font-size:clamp(15px,1.4vw,18px);font-weight:500;line-height:1.55;text-wrap:pretty}
@media (max-width:600px){.gal-title{white-space:normal}.gal-br{display:inline}}
.tw{border-right:.07em solid currentColor;padding-right:.03em;animation:caretBlink 1.05s steps(1) infinite}
@keyframes caretBlink{50%{border-color:transparent}}

/* section heading block */
.head{max-width:920px}
.head.center{margin:0 auto;text-align:center}
.head h2{font-size:clamp(30px,4.6vw,58px);color:var(--ink);margin:16px 0 0}
.head .lead{font-size:clamp(16px,1.4vw,20px);color:var(--cream-dim);line-height:1.55;margin:22px 0 0;max-width:58ch}
.faq-contact-inline{margin:0 0 20px;font-size:13px;font-style:italic;color:var(--cream-dim)}
.faq-contact-inline a{color:var(--green);font-weight:600}
.head.center .lead{margin-inline:auto}

/* ============================================================
   UNIVERS — split editorial (oversized category names)
   ============================================================ */
.uni-grid{display:grid;grid-template-columns:1fr clamp(260px,30vw,320px);gap:clamp(40px,7vw,96px);align-items:center;margin-top:clamp(26px,3.4vw,44px)}
.uni-tabs{display:flex;flex-direction:column;gap:clamp(4px,1vw,12px);align-self:start}
.uni-tab{cursor:pointer;padding:4px 0;display:block;text-decoration:none;color:inherit}
.uni-tab .ut-h{display:flex;align-items:center;gap:16px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,3.4vw,44px);letter-spacing:-.025em;line-height:1.05;color:var(--cream-faint);
  transition:color .3s var(--ease-out),transform .3s var(--ease-out)}
.uni-tab .ut-h::before{content:"";width:0;height:3px;background:var(--green);border-radius:3px;transition:width .35s var(--ease-out);flex:none}
.uni-tab:hover .ut-h{color:var(--ink)}
.uni-tab.act .ut-h{color:var(--orange)}
.uni-tab.act .ut-h::before{width:clamp(26px,4vw,58px)}
.uni-tab .ut-desc{max-height:0;overflow:hidden;margin-top:0;
  transition:opacity .3s var(--ease-out),max-height .45s var(--ease-out),margin-top .45s var(--ease-out);
  opacity:0;color:var(--cream-dim);font-size:clamp(14px,1.2vw,16px);line-height:1.55;max-width:52ch}
.uni-tab.act .ut-desc{max-height:160px;opacity:1;margin-top:14px;margin-left:clamp(44px,6vw,76px);
  transition:opacity .45s var(--ease-out) .1s,max-height .45s var(--ease-out),margin-top .45s var(--ease-out)}
.uni-stage{display:flex;justify-content:center;position:relative;align-self:start;margin-top:clamp(-20px,-2vw,-40px)}
.uni-stage .phone{width:330px}
.phone-stack{display:grid}
.phone-stack .phone-swap{grid-area:1/1;opacity:0;pointer-events:none;
  transition:opacity .8s ease}
.phone-stack .phone-swap.act{opacity:1;pointer-events:auto}
@media (max-width:840px){.uni-grid{grid-template-columns:1fr;gap:40px}.uni-stage{order:-1}.uni-tab.act .ut-desc{margin-left:0}}

/* ============================================================
   IMMERSIVE video moment
   ============================================================ */
.immersive{background:transparent;overflow:visible;position:relative;z-index:2}
.imm-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:center}
.imm-phone{order:-1;padding-bottom:clamp(28px,4vw,56px)}
.imm-phone .phone{width:330px}
.immersive .eyebrow{color:var(--orange)}
.imm-grid h2{font-size:clamp(32px,4.6vw,60px);color:var(--ink);margin:18px 0 0;min-height:1.9em}
.imm-grid .lead{color:var(--cream-dim);font-size:clamp(16px,1.4vw,19px);line-height:1.55;margin:22px 0 0;max-width:46ch;min-height:5.5em}
.imm-nav{display:flex;align-items:center;gap:14px;margin-top:34px}
.imm-dots{display:flex;gap:6px}
.imm-dot{position:relative;width:18px;height:6px;border-radius:3px;border:none;background:var(--line-strong);cursor:pointer;padding:0;transition:background .35s var(--ease-out),width .35s var(--ease-out)}
.imm-dot::before{content:"";position:absolute;inset:-10px}
.imm-dot.act{background:var(--green);width:32px}
.imm-phone{display:flex;justify-content:center;opacity:1}
@keyframes featSwap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:860px){.imm-grid{grid-template-columns:1fr;gap:36px}}

/* ============================================================
   PHONE FEED (vertical iPhone — matches app mock)
   ============================================================ */
.phone{position:relative;width:300px;max-width:80vw;aspect-ratio:47/100;border-radius:40px;background:linear-gradient(150deg,#54565b 0%,#26272b 46%,#1b1c1f 70%,#3c3d42 100%);padding:5px;
  box-shadow:0 60px 110px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.16) inset,0 1px 3px rgba(255,255,255,.24) inset;flex:none}
.phone-screen{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;background:linear-gradient(170deg,#10301d 0%,#06150d 55%,#020a06 100%);isolation:isolate;-webkit-transform:translateZ(0);transform:translateZ(0)}
.phone-island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:30%;height:24px;background:#000;border-radius:14px;z-index:9;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
/* ---- Messagerie animée : VRAIE capture (design exact + photo réelle de Caroline),
       découpée en 3 zones ; la zone messages (car-mid) est révélée par paliers ---- */
.chat-phone.phone{aspect-ratio:589/1280}
.car-screen{background:#fff;display:block;overflow:hidden}
.car-seg{display:block;width:100%}
.car-msgs{display:block}
.car-msg{opacity:0;transform:translateY(18px) scale(.975);transform-origin:left center;will-change:transform,opacity;transition:opacity .5s ease,transform .68s cubic-bezier(.16,1,.3,1)}
.car-msg.in{opacity:1;transform:none}
/* Fil de transaction reconstruit en HTML (design app exact, texte natif uniforme).
   Tailles en cqw : l'écran est le conteneur, tout scale avec la largeur du téléphone. */
.car2{container-type:inline-size;height:100%;display:flex;flex-direction:column;background:#fff;
  font-family:'Inter','Inter var',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.car2-head{position:relative;display:flex;align-items:center;justify-content:center;
  padding:6.2cqw 4cqw 3.4cqw;border-bottom:.18cqw solid #ececec}
.car2-back{position:absolute;left:3.2cqw;font-size:5.6cqw;line-height:1;color:#1c1c1c;font-weight:400}
.car2-title{font-weight:600;font-size:3.5cqw;color:#161616;letter-spacing:-.02cqw}
.car2-dots{position:absolute;right:3.4cqw;font-size:3.1cqw;letter-spacing:.35cqw;color:#0c5a2f}
.car2-ad{display:flex;align-items:center;gap:2.6cqw;padding:2.6cqw 4cqw;border-bottom:.18cqw solid #f1f1f1}
.car2-thumb{width:9cqw;height:9cqw;border-radius:2cqw;object-fit:cover;flex:none}
.car2-adtxt{min-width:0}
.car2-adt{font-weight:600;font-size:3.05cqw;color:#1a1a1a;line-height:1.25}
.car2-ads{font-size:2.75cqw;color:#9a9a9a;margin-top:.5cqw;line-height:1.2}
.car2-msgs{flex:1 1 auto;overflow:hidden;padding:1.4cqw 0}
.car2-msg{display:flex;align-items:flex-end;gap:2cqw;padding:1cqw 4cqw}
.car2-av{width:8cqw;height:8cqw;border-radius:50%;object-fit:cover;flex:none;background:#f0f0f0}
.car2-body{flex:none;min-width:0;max-width:79cqw;padding:1.7cqw 2.8cqw;border-radius:.7cqw 3cqw 3cqw 3cqw;background:#f0f0f0}
.car2-meta{display:none}
.car2-name{font-weight:600;font-size:2.7cqw;color:#999;letter-spacing:-.02cqw}
.car2-time{font-size:2.4cqw;color:#a2a2a2;flex:none}
.car2-text{font-size:3cqw;line-height:1.4;color:#1a1a1a;margin-top:0}
/* Bulle "me" : neutre comme dans l'app réelle (pas de vert), à droite, pas d'avatar */
.car2-msg[data-who="me"]{flex-direction:row-reverse}
.car2-msg[data-who="me"] .car2-av{display:none}
.car2-msg[data-who="me"] .car2-body{background:#f0f0f0;border-radius:3cqw .7cqw 3cqw 3cqw}
.car2-msg[data-who="me"] .car2-text{color:#1a1a1a}
/* Bulle "trot" : neutre, comme dans l'app réelle. Le vert pâle #e8f5e9 avec
   texte vert n'existe pas dans l'app — les messages automatiques y sont sur
   fond gris clair (theme.color.surfaceMuted) avec le texte standard, comme
   ceux des utilisateurs. La maquette montrait un écran qui n'existait pas. */
.car2-msg[data-who="trot"] .car2-body{background:#f0f0f0;border-radius:.7cqw 3cqw 3cqw 3cqw}
.car2-msg[data-who="trot"] .car2-text{color:#1a1a1a;font-size:2.75cqw}
.car2-bot{width:100%;display:block;margin-top:auto}
.pf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
/* iOS Safari ne clippe pas <video>/<img> aux coins arrondis du parent (coins carrés
   visibles sur mobile) : on applique le rayon directement sur le média. */
.pf-shot,.pf-video{border-radius:inherit}
.pf-sweep{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 48%,transparent 64%);transform:translateX(-100%);animation:sweep 4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.pf-status{position:absolute;top:15px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 26px;z-index:7;color:#fff;font-size:13px;font-weight:700}
.pf-status .sig{display:flex;align-items:center;gap:5px;font-size:11px}
.pf-chip{position:absolute;top:52px;left:18px;z-index:6;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;padding:6px 12px;border-radius:9px}
.pf-creative{position:absolute;inset:0 0 92px 0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.pf-creative .ct{font-family:var(--font-script);color:#fff;font-size:clamp(26px,7vw,36px);line-height:1.18;white-space:nowrap;transform:rotate(-90deg);text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.pf-rail{position:absolute;right:13px;bottom:108px;display:flex;flex-direction:column;gap:13px;z-index:6}
.pf-rail .ri{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.34);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;color:#fff}
.pf-rail .ri svg{width:19px;height:19px}
.pf-info{position:absolute;left:17px;right:64px;bottom:78px;z-index:6;color:#fff;text-align:left}
.pf-src{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pf-src .ava{width:30px;height:30px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.pf-src b{font-size:13px;display:block;line-height:1.15;white-space:nowrap}
.pf-src span{font-size:11px;opacity:.78;display:block}
.pf-info h5{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 5px;letter-spacing:-.01em}
.pf-info .meta{font-size:11.5px;opacity:.74;margin:0 0 5px;line-height:1.35}
.pf-info .pr{color:var(--orange-300);font-weight:700;font-size:13.5px}
.pf-tabs{position:absolute;bottom:0;left:0;right:0;height:62px;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-around;z-index:7;padding-bottom:6px;border-top:1px solid rgba(255,255,255,.08)}
.pf-tabs .tb{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.55);font-size:8.5px;font-weight:600}
.pf-tabs .tb svg{width:19px;height:19px}
.pf-tabs .tb.act{color:var(--orange-300)}

/* ============================================================
   STATS — slim band of numbers (no title)
   ============================================================ */
.stats.stats-band{background:var(--green);position:relative;z-index:2;padding-block:clamp(24px,2.8vw,38px);margin-block:clamp(46px,6.5vw,104px)}
.stats{color:#fff;overflow:hidden}
.stats-band .stat .n{color:#fff}
.stats-band .stat .l{color:rgba(255,255,255,.62)}
.stats-band .stat:not(:last-child)::after{background:rgba(255,255,255,.2)}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;justify-items:center}
.stat{padding:clamp(6px,1vw,14px) clamp(10px,1.6vw,24px);text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:0}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:48%;width:1px;background:var(--line-strong)}
.stat .n{font-family:"Fredoka",var(--font-display);font-weight:600;font-size:clamp(30px,3.3vw,54px);color:var(--green);line-height:1;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.stat .l{font-size:11px;color:var(--cream-faint);font-weight:700;margin-top:10px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.stat-foot{text-align:center;margin-top:44px;color:rgba(255,255,255,.6);font-size:14px;font-weight:500;letter-spacing:.02em}
.stat-foot b{color:#fff;font-weight:700}
/* Sur deux colonnes, les libellés longs débordaient de leur colonne : en
   `nowrap`, « d'opportunités disponibles » fait 186 px pour une colonne d'à
   peine 165, donc il mordait sur la colonne voisine d'un côté et sur le bord de
   l'écran de l'autre. Le chiffre restait pourtant parfaitement centré — c'est
   ce débordement asymétrique à l'œil qui donnait l'impression d'un décalage.
   On les laisse donc passer à la ligne, et on resserre un peu l'interlettrage. */
@media (max-width:640px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .stat:nth-child(2)::after{display:none}
  .stat{padding-inline:6px}
  .stat .l{white-space:normal;letter-spacing:.06em;line-height:1.35;text-wrap:balance}
}

/* ============================================================
   PROCESS — modern steps (no boxes)
   ============================================================ */
.proc-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid var(--line-strong)}
.pstep{position:relative;padding:40px 36px 10px 0;border-right:1px solid var(--line)}
.pstep:last-child{border-right:none;padding-right:0}
.pstep .pdot{position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--orange)}
.pstep .pn{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--orange);letter-spacing:.14em;margin-bottom:20px}
.pstep h4{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);line-height:1.05}
.pstep p{font-size:15px;color:var(--cream-dim);line-height:1.55;margin:0;max-width:34ch}
@media (max-width:780px){.proc-steps{grid-template-columns:1fr}.pstep{border-right:none;border-bottom:1px solid var(--line);padding:30px 0 28px}.pstep:last-child{border-bottom:none}}

/* ============================================================
   TRANSACTIONS
   ============================================================ */
.trans-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:start}
.trans-head{position:sticky;top:40px}
.trans-lead{margin-top:20px;color:var(--cream-dim);font-size:clamp(15px,1.3vw,18px);line-height:1.55;max-width:34ch}
.trans-feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px) clamp(28px,4vw,56px)}
.tfeat{position:relative;padding-top:20px;border-top:2px solid var(--ink)}
.tfeat b{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.7vw,22px);display:block;margin-bottom:9px;color:var(--ink);letter-spacing:-.01em}
.tfeat p{margin:0;font-size:14.5px;color:var(--cream-dim);line-height:1.55}
@media (max-width:860px){.trans-grid{grid-template-columns:1fr;gap:30px}.trans-head{position:static}}
@media (max-width:520px){.trans-feats{grid-template-columns:1fr;gap:24px}}

/* ============================================================
   PARRAINS — cutout + orange bar + quote
   ============================================================ */
.parrains-band{background:transparent;position:relative;z-index:2;padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(16px,2vw,28px)}
.parrains-band .head .eyebrow{color:var(--orange)}
.parrains-band .head h2{color:var(--ink)}
.parr2{display:flex;flex-direction:column;gap:clamp(10px,2vw,30px);margin-top:clamp(20px,3vw,40px)}
.parr2-row{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0}
.parr2-row.rev{grid-template-columns:1fr 1fr}
.parr2-row.rev .parr2-ph{order:2}
.parr2-ph{position:relative;max-width:340px;justify-self:end}
.parr2-row.rev .parr2-ph{justify-self:start}
.parr2-ph img{width:100%;height:auto;display:block}
.parr2-row.in .parr2-ph img{animation:parrPhIn .9s var(--ease-out)}
@keyframes parrPhIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.parr2-quote{position:relative;padding:clamp(10px,1.3vw,16px) 0 clamp(10px,1.3vw,16px) clamp(18px,2vw,28px);
  margin-bottom:0;align-self:end}
.parr2-quote::before{content:"";position:absolute;left:0;bottom:0;width:5px;height:clamp(110px,15vw,160px);
  background:var(--orange);border-radius:3px}
.parr2-row.in .parr2-quote{animation:parrQIn .8s var(--ease-out) .18s both}
@keyframes parrQIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.parr2-row.in .parr2-ph img,.parr2-row.in .parr2-quote{animation:none}}
.parr2-row.rev .parr2-quote{padding:clamp(10px,1.3vw,16px) clamp(18px,2vw,28px) clamp(10px,1.3vw,16px) 0;
  text-align:right}
.parr2-row.rev .parr2-quote::before{left:auto;right:0}
.parr2-quote blockquote{margin:0 0 14px;font-family:var(--font-text);font-weight:450;
  font-size:clamp(13px,1.15vw,15px);line-height:1.5;letter-spacing:-.005em;color:var(--cream-dim);text-wrap:pretty;position:relative;min-height:4.5em}
.parr2-quote blockquote::before{content:"";display:none}
.parr2-quote blockquote::after{content:""}
.parr2-n{font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.7vw,21px);color:var(--orange);letter-spacing:-.02em;line-height:1.05}
.parr2-r{font-size:12px;color:var(--cream-dim);font-weight:600;margin-top:6px}
@media (max-width:760px){
  .parr2-row,.parr2-row.rev{grid-template-columns:1fr;gap:0}
  .parr2-row.rev .parr2-ph{order:0}
  .parr2-quote,.parr2-row.rev .parr2-quote{text-align:left;
    padding:clamp(16px,4vw,24px) 0 clamp(16px,4vw,24px) 22px;margin-top:-6px}
  .parr2-quote::before,.parr2-row.rev .parr2-quote::before{left:0;right:auto}
}


/* face-to-face layout */
.parrains-band .wrap{max-width:1280px}
.parr2-f2f{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.4vw,18px);align-items:start;
  margin-top:clamp(20px,3vw,40px);width:100%;max-width:1280px;margin-left:auto;margin-right:auto;transform:none}
.parr2-col{display:flex;flex-direction:column}
.parr2-col .parr2-ph{position:relative;max-width:none;width:100%;justify-self:auto;display:flex}
.parr2-col:first-child .parr2-ph{justify-content:flex-end}
.parr2-col:last-child .parr2-ph{justify-content:flex-start}
.parr2-col .parr2-ph img{width:auto;height:clamp(280px,30vw,430px);max-width:100%;
  filter:grayscale(1) brightness(1.09) contrast(.8);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:mask-position,filter,opacity}
/* drawn-in reveal: soft edge starts at the inner (centre) edge and sweeps OUTWARD */
.parr2-col:first-child .parr2-ph img{
  -webkit-mask-image:linear-gradient(96deg,rgba(0,0,0,0) 40%,#000 64%);
  mask-image:linear-gradient(96deg,rgba(0,0,0,0) 40%,#000 64%);
  -webkit-mask-position:100% 0;mask-position:100% 0}
.parr2-col:last-child .parr2-ph img{
  -webkit-mask-image:linear-gradient(96deg,#000 36%,rgba(0,0,0,0) 60%);
  mask-image:linear-gradient(96deg,#000 36%,rgba(0,0,0,0) 60%);
  -webkit-mask-position:0 0;mask-position:0 0}
.parr2-col.in:nth-child(1) .parr2-ph img{animation:parrDrawL 1.9s cubic-bezier(.4,.02,.2,1) .4s both}
.parr2-col.in:nth-child(2) .parr2-ph img{animation:parrDrawR 1.9s cubic-bezier(.4,.02,.2,1) .4s both}
/* orange vertical bars at the inner edges, drawn upward */
.parr2-col .parr2-ph::after{content:"";position:absolute;bottom:13%;width:5px;height:clamp(116px,15vw,172px);
  background:var(--orange);border-radius:3px;z-index:4;transform-origin:bottom}
.parr2-col:first-child .parr2-ph::after{right:0}
.parr2-col:last-child .parr2-ph::after{left:0}
.parr2-col.in .parr2-ph::after{animation:parrBar .8s cubic-bezier(.2,.8,.2,1) 1.45s both}
@keyframes parrBar{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.parr2-col.in .parr2-ph::after{animation:none}}
@keyframes parrDrawR{
  0%{-webkit-mask-position:100% 0;mask-position:100% 0;filter:grayscale(1) brightness(1.22) contrast(.55) blur(4px);opacity:0}
  14%{opacity:1}
  100%{-webkit-mask-position:0 0;mask-position:0 0;filter:grayscale(1) brightness(1.09) contrast(.8) blur(0);opacity:1}}
@keyframes parrDrawL{
  0%{-webkit-mask-position:0 0;mask-position:0 0;filter:grayscale(1) brightness(1.22) contrast(.55) blur(4px);opacity:0}
  14%{opacity:1}
  100%{-webkit-mask-position:100% 0;mask-position:100% 0;filter:grayscale(1) brightness(1.09) contrast(.8) blur(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.parr2-col.in .parr2-ph img{animation:none}}
.parr2-quote blockquote{quotes:"\201C" "\201D"}
.parr2-quote blockquote q,.parr2-quote blockquote{}
.parr2-col .parr2-quote blockquote::after{content:"\201D";color:var(--cream-faint);font-weight:600;margin-left:1px}
.parr2-col .parr2-quote blockquote .oq{color:var(--cream-faint);font-weight:600;margin-right:1px}
.parr2-col:last-child .parr2-ph img{}
.parr2-col .parr2-quote{align-self:auto;margin:clamp(-10px,-0.5vw,-2px) 0 0;padding:0;max-width:none;width:100%}
.parr2-col:first-child .parr2-quote{margin-left:auto;margin-right:0;text-align:right;padding-right:20px}
.parr2-col:first-child .parr2-quote blockquote::before{left:auto;right:0}
.parr2-col:last-child .parr2-quote{text-align:left;margin-right:auto;margin-left:0;padding-left:20px}
.parr2-col:first-child .parr2-quote blockquote{margin-left:auto}
.parr2-col:last-child .parr2-quote blockquote{margin-right:auto}
.parr2-col .parr2-quote::before{display:none}
.parr2-col.in .parr2-quote{animation:parrQRise 1s cubic-bezier(.2,.8,.2,1) 1.25s both}
@keyframes parrQRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.parrains-band .head h2[data-words].in .aw-i{animation-delay:calc(.25s + var(--wi) * .04s)}

/* Parrain "draw-in" videos: pure-white-bg drawing animations, played ONCE on
   scroll. The white video bg merges with the white section; object-fit:cover in a
   near-square box zooms the centred rider in (cropped white margins are invisible). */
.parr2-f2f--gif .parr2-ph{display:flex;background:none;overflow:hidden;
  width:min(620px,100%);aspect-ratio:360/300;border-radius:6px}
.parr2-f2f--gif{gap:0}
.parr2-f2f--gif .parr2-col:first-child .parr2-ph{margin-left:auto;margin-right:0}
.parr2-f2f--gif .parr2-col:last-child .parr2-ph{margin-right:auto;margin-left:0}
.parr2-f2f--gif .parr2-ph::after{display:none}
.parr2-vid{width:100%;height:100%;object-fit:cover;display:block;background:transparent;mix-blend-mode:multiply}
/* glue the two riders at the centre: shift each video so its orange bar lands on
   the inner (centre) edge of its box — bar positions detected at 67% / 32.7%. */
.parr2-f2f--gif .parr2-col:first-child .parr2-vid{object-position:33.5% 50%}
.parr2-f2f--gif .parr2-col:last-child .parr2-vid{object-position:65.9% 50%}
@media (prefers-reduced-motion:reduce){.parr2-vid{}}
@media (max-width:760px){.parr2-f2f{grid-template-columns:1fr;gap:34px}
  .parr2-col:first-child .parr2-ph{margin-left:0}
  .parr2-col:last-child .parr2-ph{margin-right:auto}
  .parr2-f2f--gif .parr2-col:first-child .parr2-vid,
  .parr2-f2f--gif .parr2-col:last-child .parr2-vid{object-position:center}
  .parr2-col:first-child .parr2-ph::after{right:auto;left:0}
  .parr2-col:last-child .parr2-ph::after{left:0}
  .parr2-col:first-child .parr2-quote{margin-left:0;margin-right:auto;text-align:left}
  .parr2-col:last-child .parr2-quote{text-align:left}}

/* ---- split-from-the-middle parrain image ---- */
.parr2-split{display:flex;flex-direction:column;gap:clamp(2px,0.6vw,12px);
  margin-top:clamp(28px,4vw,56px);width:100%;max-width:1180px;margin-left:auto;margin-right:auto}
.parr2-splitimg{position:relative;width:100%;margin:0 auto;aspect-ratio:3240/950}
.parr2-srcimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.parr2-shalf{position:absolute;top:0;bottom:0;width:50%;
  background-size:200% 100%;background-repeat:no-repeat;
  filter:contrast(.95);
  opacity:0;will-change:transform,opacity}
/* the heavy duo PNG only loads when the section approaches the viewport
   (.media-in is added by trot-app.js via IntersectionObserver, large rootMargin) */
.parr2-splitimg.media-in .parr2-shalf{background-image:url(assets/parrains-duo.png)}
.parr2-shalf--l{left:0;background-position:left center;transform:translateX(7%)}
.parr2-shalf--r{right:0;background-position:right center;transform:translateX(-7%)}
.parr2-splitimg.in .parr2-shalf--l{animation:parrSplitL 1.25s cubic-bezier(.16,.74,.18,1) .12s both}
.parr2-splitimg.in .parr2-shalf--r{animation:parrSplitR 1.25s cubic-bezier(.16,.74,.18,1) .12s both}
@keyframes parrSplitL{0%{opacity:0;transform:translateX(9%) scale(.985)}
  18%{opacity:1}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes parrSplitR{0%{opacity:0;transform:translateX(-9%) scale(.985)}
  18%{opacity:1}100%{opacity:1;transform:translateX(0) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .parr2-shalf{opacity:1!important;transform:none!important;animation:none!important}}
.parr2-quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.parr2-quotes .parr2-col{display:flex;flex-direction:column}
@media (max-width:760px){
  .parr2-quotes{grid-template-columns:1fr;gap:30px}
  .parr2-quotes .parr2-col:first-child .parr2-quote{margin-left:0;margin-right:auto;text-align:left;padding-right:0;padding-left:20px}
  .parr2-quotes .parr2-col:first-child .parr2-quote blockquote::before{left:0;right:auto}}

/* ---- refined parrain quotes ---- */
.parr2-quotes{align-items:start;margin-top:clamp(22px,3.4vw,46px)}
.parr2-quotes .parr2-col{padding:0 clamp(8px,2.4vw,40px)}
.parr2-quotes .parr2-col .parr2-quote{align-self:auto;max-width:36ch;padding:0 !important;width:100%}
.parr2-quotes .parr2-col:first-child .parr2-quote{margin-left:auto !important;margin-right:0 !important;text-align:right !important}
.parr2-quotes .parr2-col:last-child .parr2-quote{margin-right:auto !important;margin-left:0 !important;text-align:left !important}
.parr2-quotes .parr2-quote .oq{display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,3vw,42px);line-height:.5;color:var(--orange) !important;margin:0 0 clamp(6px,1vw,12px)}
.parr2-quotes .parr2-quote blockquote{font-family:var(--font-text);font-weight:500;
  font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);margin:0;text-wrap:balance;min-height:4.5em;max-width:360px}
.parr2-quotes .parr2-col .parr2-quote blockquote::after{content:"" !important}
.parr2-quotes .parr2-n{margin-top:clamp(16px,2vw,22px);font-family:var(--font-text);font-weight:700;font-size:13px;text-transform:uppercase;color:var(--orange) !important;letter-spacing:.16em}
.parr2-quotes .parr2-r{color:var(--cream-dim) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important;font-size:12.5px;margin-top:3px}
@media(min-width:761px){
  .parr2-quotes{grid-template-columns:1fr 1fr;gap:0}
  .parr2-quotes .parr2-col:nth-child(2){border-left:1px solid var(--line)}}
.parr2-col.in .parr2-quote{animation:parrQRise .9s cubic-bezier(.2,.8,.2,1) .3s both}
.parr2-quotes .parr2-col:nth-child(2).in .parr2-quote{animation-delay:.55s}

/* ============================================================
   TESTIMONIALS marquee
   ============================================================ */
.testi{overflow:hidden}
.tmar{display:flex;gap:20px;width:max-content;animation:scrollx 70s linear infinite;margin-top:50px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.testi:hover .tmar{animation-play-state:paused}
.tcard{flex:none;width:340px;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:26px;background:var(--surface)}
.tcard .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.tcard p{font-size:15px;line-height:1.55;margin:0 0 18px;color:var(--cream)}
.tcard .who{display:flex;align-items:center;gap:11px}
.tcard .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--green-400));flex:none}
.tcard .who b{font-size:14px;display:block;color:var(--cream);line-height:1.25}
.tcard .who span{font-size:12px;color:var(--cream-faint)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{background:transparent;position:relative;z-index:2;padding-top:clamp(44px,6vw,90px);padding-bottom:clamp(18px,2.4vw,34px)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.faq-grid .head{position:sticky;top:clamp(40px,12vh,120px);align-self:start}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line);padding:6px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.5vw,21px);color:var(--ink);transition:color .3s}
.faq-q:hover{color:var(--orange)}
.faq-item.open .faq-q{color:var(--orange)}
.faq-ic{width:30px;height:30px;flex:none;position:relative}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:2px}
.faq-ic::before{width:15px;height:2px}.faq-ic::after{width:2px;height:15px;transition:transform .4s var(--ease-out)}
.faq-item.open .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.faq-a p{margin:0 0 24px;font-size:15.5px;line-height:1.6;color:var(--cream-dim);max-width:56ch}

/* ============================================================
   HOOFPRINT TRAIL — section separator
   ============================================================ */
.trail-sep{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:clamp(18px,3vw,34px) var(--pad);
  color:var(--green);opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.trail-sep svg{display:block;width:100%;height:auto}

/* ============================================================
   REVIEWS — scattered cut-out pile (speech-bubble cards)
   ============================================================ */
.reviews{position:relative;z-index:2;overflow:hidden;padding-bottom:0;padding-top:clamp(2px,0.6vw,8px);background:transparent}
.reviews.section-pad{padding-block:clamp(2px,0.6vw,8px) 0}
.rev-img-wrap{margin:clamp(2px,0.6vw,10px) auto 0;max-width:720px}
.rev-img{width:100%;height:auto;display:block;margin-bottom:-2px}
.rev-cut{break-inside:avoid;position:relative;background:#fff;border-radius:20px 20px 20px 4px;
  padding:22px 24px 18px;margin:0 0 -10px;
  transform:rotate(var(--rot)) translateX(var(--nudge));
  box-shadow:0 18px 34px -20px rgba(1,28,12,.4),0 2px 6px rgba(1,28,12,.08);
  transition:transform .35s var(--ease-out),box-shadow .35s,z-index 0s;z-index:1}
.rev-cut::after{content:"";position:absolute;left:24px;bottom:-11px;width:24px;height:18px;background:#fff;
  border-bottom-left-radius:14px;clip-path:polygon(0 0,100% 0,0 100%)}
.rev-cut:hover{transform:rotate(0deg) translateX(var(--nudge)) translateY(-6px) scale(1.03);
  box-shadow:0 30px 50px -22px rgba(1,28,12,.5);z-index:20}
.rev-cut blockquote{margin:0 0 16px;font-size:15.5px;line-height:1.46;color:#1a2b20;font-weight:600;
  letter-spacing:-.01em;text-wrap:pretty}
.rev-cut figcaption{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.rev-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:#e8e2d6}
.rev-who{display:flex;flex-direction:column;gap:3px;line-height:1}
.rev-name{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
.rev-stars{color:var(--gold);font-size:11px;letter-spacing:1.5px}
@media (max-width:680px){.rev-pile{columns:1 100%;max-width:420px}.rev-cut{transform:rotate(var(--rot))}}

/* ============================================================
   CLOSING CTA — green card
   ============================================================ */
.closing{padding-block:clamp(48px,7vw,92px) clamp(20px,3vw,40px);background:transparent;position:relative;z-index:2}
.closing-card{max-width:760px;margin:0 auto;background:var(--green);border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(34px,4.4vw,56px) var(--pad) clamp(20px,2.6vw,32px);text-align:center;position:relative;overflow:hidden}
.closing-glow{position:absolute;left:50%;top:-30%;width:120%;height:90%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0,rgba(255,255,255,.14),transparent 62%)}
.clogo{height:clamp(40px,4.6vw,56px);width:auto;margin:0 auto 24px;position:relative;z-index:2;display:block}
.closing-h{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,38px);color:#fff;margin:0 0 clamp(22px,3vw,30px);
  letter-spacing:-.03em;line-height:1.05;position:relative;z-index:2}
.closing-sub{max-width:42ch;margin:20px auto 30px;color:rgba(255,255,255,.8);font-size:clamp(15px,1.3vw,18px);
  line-height:1.5;position:relative;z-index:2}
.closing-stores{display:flex;justify-content:center;position:relative;z-index:2}
.ctrust{margin-top:22px;color:rgba(255,255,255,.78);font-size:14px;font-weight:500;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.ctrust .stars{color:var(--gold);letter-spacing:1px}
.ctrust-rate{white-space:nowrap}
.ctrust-countries{margin-left:6px}
.ctrust-countries::before{content:"\00B7\0020"}
@media(max-width:820px){
  .ctrust-countries{display:none}
}


/* ============================================================
   BLOG band
   ============================================================ */
.blog-band{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;
  min-height:clamp(92px,10vw,132px);padding:clamp(48px,6.5vw,86px) var(--pad) clamp(6px,1vw,12px);background:transparent;position:relative;z-index:2}
.blog-title{font-family:"Petit Cochon","Baloo 2",var(--font-display);font-weight:400;color:var(--orange);text-transform:uppercase;
  font-size:clamp(28px,4.4vw,58px);line-height:1;letter-spacing:-.04em;display:block}
.blog-title{font-family:"Petit Cochon","Baloo 2",var(--font-display);font-weight:400;color:var(--orange);text-transform:uppercase;
  font-size:clamp(28px,4.4vw,58px);line-height:1;letter-spacing:-.04em;display:block;transform:translateY(.005em)}
.blog-after{height:0;background:transparent;position:relative;z-index:2}
.blog-eyebrow{font-family:var(--font-text);font-weight:700;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);opacity:.7}
.blog-title-dup-removed{display:none}
.blog-arrow{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  border:2px solid var(--orange);color:var(--orange);margin-top:14px;transition:transform .4s var(--ease-out),background .3s,color .3s}
.blog-arrow svg{width:22px;height:22px}
.blog-band:hover .blog-arrow{background:var(--orange);color:#fff;transform:translateX(5px)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--green);padding:clamp(112px,11vw,140px) var(--pad) clamp(28px,3.4vw,42px);margin-top:0}
.foot-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(4px,0.6vw,10px) clamp(28px,5vw,70px);align-items:start;max-width:1500px;margin:0 auto;position:relative}
.foot-center{align-self:center}
.foot-links{display:flex;flex-direction:column;gap:18px}
.foot-links.left{position:relative}
.foot-links a{color:var(--cream);font-size:15px;opacity:.92;transition:.3s}
.foot-links a:hover{color:#fff}
.foot-links.right{align-items:flex-end;text-align:right;align-self:stretch}
/* remonte le bloc haut (Blog/email/adresse) vers le niveau du badge « Fièrement »,
   les réseaux restant collés en bas (margin-top:auto) pour s'aligner sur la CGV. */
.foot-links.right > a:first-child{margin-top:clamp(-58px,-4.5vw,-42px)}
.foot-links.right .socials{margin-top:auto}
.foot-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.foot-center .foot-logo{height:150px;width:auto;display:block;margin-top:-58px;margin-bottom:-18px}
.foot-ft{display:block;margin-top:22px;opacity:.85;transition:opacity .3s,transform .3s}
.foot-ft:hover{opacity:1;transform:translateY(-2px)}
.foot-ft img{height:74px;width:auto;display:block}
.foot-ft-badge{position:absolute;left:0;bottom:calc(100% + 26px);top:auto;
  display:flex;flex-direction:row;gap:14px;align-items:center;margin:0;z-index:3}
.foot-ft-badge .ft-label{font-family:var(--font-text);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;line-height:1}
.foot-ft-badge img{height:clamp(70px,8.2vw,82px);width:auto;display:block;transition:transform .35s var(--ease-out),filter .3s}
.foot-ft-badge:hover img{transform:translateY(-2px)}
.foot-links.right .foot-ft-badge{align-items:flex-end}
@media (max-width:820px){.foot-ft-badge,.foot-links.right .foot-ft-badge{align-items:center}}
.foot-center .stores{justify-content:center}
.foot-copy{grid-column:1 / -1;text-align:center;font-size:12px;color:rgba(255,255,255,.72);margin-top:0}
.foot-copy a{color:rgba(255,255,255,.72);text-decoration:none}
.foot-copy a:hover{color:#fff}
.socials{display:flex;gap:14px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:50%;background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;transition:.3s}
.socials a:hover{background:#fff;color:var(--green);border-color:#fff;transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;text-align:center;gap:38px;justify-items:center}.foot-links{align-items:center}.foot-links.right{align-items:center;text-align:center}.faq-grid{grid-template-columns:1fr;gap:24px}.faq-grid .head{position:static;top:auto}
  .foot-ft-badge{position:static;align-items:center;margin:8px auto 0}
  /* la marge négative de .foot-links.right>a:first-child n'a de sens que dans la
     grille desktop 3 colonnes (aligne "Blog" sur le logo) ; en colonne unique
     mobile elle fait remonter "Blog" dans la rangée des boutons stores au-dessus */
  .foot-links.right>a:first-child{margin-top:0}}

/* ---------- Mobile nav ---------- */
/* Menu ouvert : verrou du scroll d'arriere-plan (classe posee par trot-app.js) */
body.menu-open{overflow:hidden}
@media (max-width:880px){
  .nav-links{position:fixed;inset:0;background:var(--green-deep);flex-direction:column;justify-content:center;gap:14px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:99;overflow-y:auto;padding:70px 0 30px}
  .nav-links.open{transform:none}
  .nav-links a{font-size:26px;font-family:var(--font-display);font-weight:700}
  .nav-burger{display:flex;z-index:100}.nav-cta{display:none}
  /* le CTA reste accessible dans le menu ouvert */
  .nav-links.open a.nav-cta{display:inline-flex;margin:14px 0 0;font-size:22px;color:#fff;opacity:1}
  .nav-links.open a.nav-cta .arrow{background:#fff;color:var(--green);width:34px;height:34px}
}
/* Category subpages carry 4 sibling-category links + 3 section links, so the
   inline row is wider — fold it into the burger menu earlier to avoid overflow. */
@media (max-width:1120px){
  .nav-sub .nav-links{position:fixed;inset:0;background:var(--green-deep);flex-direction:column;justify-content:center;gap:14px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:99;overflow-y:auto;padding:70px 0 30px}
  .nav-sub .nav-links.open{transform:none}
  .nav-sub .nav-links a{font-size:26px;font-family:var(--font-display);font-weight:700;color:var(--cream)}
  .nav-sub .nav-burger{display:flex;z-index:100}
  .nav-sub .nav-cta{display:none}
  .nav-sub .nav-links.open a.nav-cta{display:inline-flex;margin:14px 0 0;font-size:22px;color:#fff;opacity:1}
  .nav-sub .nav-links.open a.nav-cta .arrow{background:#fff;color:var(--green);width:34px;height:34px}
}
/* Ecrans peu hauts (telephone en paysage) : le menu part du haut et scrolle,
   sinon le centrage flex rend les premiers liens inatteignables */
@media (max-height:540px){
  .nav-links,.nav-sub .nav-links{justify-content:flex-start}
}
/* Burger -> croix quand le menu est ouvert (toujours lisible sur l'overlay vert,
   y compris sur les sous-pages ou le burger est encre sur fond beige) */
.nav-burger.open span{background:var(--cream)}
.nav-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============================================================
   MAZE EDITOR
   ============================================================ */
#mzEnter{position:fixed;left:18px;bottom:18px;z-index:9990;background:var(--green);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:14px;border:none;cursor:pointer;
  padding:11px 18px;border-radius:100px;box-shadow:0 12px 30px -10px rgba(1,44,22,.6);transition:transform .3s,background .3s}
#mzEnter:hover{transform:translateY(-2px);background:var(--green-deep)}
body.mz-editing{cursor:crosshair}
body.mz-editing #mzEnter{display:none}
#mzEditSvg{position:absolute;top:0;left:0;z-index:9000;touch-action:none}
#mzEditSvg .mzh{cursor:grab}
#mzBar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9995;display:flex;align-items:center;gap:8px;
  background:rgba(16,28,21,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:9px 11px;border-radius:14px;box-shadow:0 18px 50px -16px rgba(0,0,0,.6);max-width:94vw;flex-wrap:wrap;justify-content:center}
#mzBar .mzb{font-family:var(--font-text);font-weight:600;font-size:13px;color:#eee;background:rgba(255,255,255,.08);
  border:none;cursor:pointer;padding:8px 12px;border-radius:9px;transition:background .2s,color .2s;white-space:nowrap}
#mzBar .mzb:hover{background:rgba(255,255,255,.18)}
#mzBar .mzseg{display:flex;background:rgba(255,255,255,.06);border-radius:10px;padding:2px}
#mzBar .mzb.seg{background:transparent;padding:7px 12px}
#mzBar .mzb.seg.on{background:var(--orange);color:#fff}
#mzBar .mzemoji{display:flex;gap:2px;transition:opacity .2s}
#mzBar .mze{font-size:17px;line-height:1;background:rgba(255,255,255,.06);border:none;cursor:pointer;
  width:34px;height:34px;border-radius:8px;transition:background .2s,transform .2s}
#mzBar .mze:hover{transform:scale(1.12)}
#mzBar .mze.on{background:var(--orange);box-shadow:0 0 0 2px rgba(255,255,255,.3) inset}
#mzBar .mzb.save{background:var(--green-400,#1f8a4d);color:#fff}
#mzBar .mzb.save:hover{filter:brightness(1.1)}
#mzBar .mzb.x{background:rgba(255,255,255,.06);width:34px;padding:8px 0}
#mzBar .mzb.ghost{color:#cfc}
#mzBar .mzchk{display:flex;align-items:center;gap:6px;color:#dcd;font-size:13px;font-weight:600;cursor:pointer;padding:0 4px}
#mzBar .mzspring{flex:1;min-width:6px}
#mzHint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9995;max-width:90vw;
  background:rgba(16,28,21,.94);color:#f3eee0;font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:11px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.6);transition:opacity .5s;text-align:center}
#mzHint b{color:#fff}
#mzExport{position:fixed;inset:0;z-index:9999;background:rgba(8,16,11,.6);display:flex;align-items:center;justify-content:center}
#mzExport .mzx-card{background:#16241b;color:#f3eee0;border-radius:16px;padding:26px;max-width:540px;width:90vw;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
#mzExport h3{font-family:var(--font-display);font-weight:800;margin:0 0 8px;font-size:20px}
#mzExport p{margin:0 0 14px;font-size:14px;color:rgba(243,238,224,.7);line-height:1.5}
#mzExport textarea{width:100%;height:120px;background:#0d1611;color:#bfe;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px;font-family:monospace;font-size:12px;resize:vertical}
#mzExport .mzx-row{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}
#mzExport .mzb{font-family:var(--font-text);font-weight:600;font-size:14px;border:none;cursor:pointer;padding:10px 18px;border-radius:9px}
#mzExport .mzb.save{background:#1f8a4d;color:#fff}
#mzExport .mzb.x{background:rgba(255,255,255,.1);color:#eee}

/* ============================================================
   MOBILE REFINEMENTS (phones, sections, footer)
   ============================================================ */
/* Height-measurement helper for "Tout l'écosystème" (freezes section height) */
.uni-tabs.measuring .ut-desc{transition:none !important}
.uni-tabs.measuring .uni-tab.act .ut-desc{max-height:500px}
@media (max-width:600px){
  /* --- Smaller iPhones across the site --- */
  .hero-phone .phone,
  .uni-stage .phone,
  .imm-phone .phone{width:min(58vw,228px)}
  /* subpage carousels + IA phones: identical size to the hero phone */
  .ccar-phone .phone,
  .chev-ai-vid .phone,
  .mat-ai-vid .phone,
  .cfeat-ph .phone{width:min(58vw,228px) !important}
  /* rayon écran aligné sur l'intérieur du bezel (bezel 40px - padding 5px ≈ 35) :
     à 30px, l'écran laissait un liseré de coin désaligné → « angles cropés » iOS. */
  .hero-phone .phone .phone-screen,
  .phone-photo .phone-screen{border-radius:34px}
  /* the scrolling phones/tiles in "Un seul feed pour…" */
  .gallery .phone{width:148px;border-radius:26px}
  .gallery .phone .phone-screen{border-radius:20px}
  .gallery .tile{width:148px}
  .gal-rows{gap:13px}
  .trow{gap:20px}

  /* --- Hero: headline, then phone, then stats / stores / countries below it --- */
  .hero{padding-bottom:clamp(74px,16vw,100px)}
  .hero-stage{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
  .hero-copy{display:contents}
  .hero-headline{order:1;font-size:clamp(40px,11vw,60px);margin:0}
  .hero-phone{order:2;margin:2px 0 0}
  .hero-proof{order:3;align-items:center;margin-top:20px;padding-top:0;border-top:none}
  .hero-proof .hp-stats{justify-content:center;gap:16px 20px;flex-wrap:wrap}
  .hero-proof .hp-stats > span.hp-div:last-of-type{display:none}
  .hero-proof .hp-item{align-items:center;text-align:center}
  /* equal-width flanking items so the divider sits at the exact centre (= phone centre) */
  .hero-proof .hp-item:nth-child(1),
  .hero-proof .hp-item:nth-child(3){flex:1 1 0;min-width:0;max-width:140px}
  .hero-proof .hp-item:last-child{flex-basis:100%;align-items:center;margin-top:4px}
  .hero-cta{order:4;margin-top:8px;margin-bottom:6px}

  /* --- Subpages: hero order = eyebrow → title → text → phone (stores last) --- */
  .chev-sub{order:2}
  /* --- Subpage category rows: text first, phone below --- */
  .ccar-stage{order:1 !important}
  /* --- Breathing room between the last subpage section and the green footer --- */
  .chev-band,.mat-band,.ccar-sec:last-of-type{padding-bottom:clamp(72px,16vw,112px)}

  /* --- "Une app, tous les besoins": editorial list, phone below --- */
  .uni-grid{margin-top:28px;gap:26px}
  .uni-stage{order:1;margin-top:6px;margin-bottom:22px}
  .uni-tab .ut-h{font-size:clamp(30px,9vw,42px)}
  /* On mobile, only the SELECTED category shows its subtitle (matches desktop).
     The list height is frozen by JS (--uni-desc-h) so the phone below never
     jumps as the active subtitle changes while cycling. */
  .uni-tabs{order:0;position:static;padding-bottom:0}
  .uni-tab{padding:9px 0}
  .uni-tab .ut-desc{position:static;left:auto;right:auto;bottom:auto;top:auto;
    height:0;max-height:0;overflow:hidden;opacity:0;margin:0 !important;
    transition:opacity .35s var(--ease-out),max-height .4s var(--ease-out),margin .4s var(--ease-out)}
  .uni-tab.act .ut-desc{height:auto;max-height:var(--uni-desc-h,160px);overflow:hidden;opacity:1;
    margin:8px 0 0 !important}

  /* --- "Vidéo plein écran" feed: linked phone goes below its text; fix clipped shadow --- */
  .immersive{overflow:visible}
  .imm-grid{gap:26px}
  .imm-phone{order:1;padding:6px 0 0;overflow:visible}

  /* --- Parrains: bigger + truly centered image; quotes side-by-side (Philippe left, Rodrigo right) --- */
  .parr2-split{max-width:none}
  .parr2-splitimg{width:122vw;margin-left:calc(50% - 61vw);margin-right:calc(50% - 61vw)}
  .parr2-quotes{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
  .parr2-quotes .parr2-col{padding:0 4px}
  .parr2-quotes .parr2-col .parr2-quote{max-width:none}
  .parr2-quotes .parr2-col:first-child .parr2-quote{margin-left:auto !important;margin-right:0 !important;text-align:right !important;padding:0 !important}
  .parr2-quotes .parr2-col:first-child .parr2-quote blockquote::before{left:auto;right:0}
  .parr2-quotes .parr2-col:last-child .parr2-quote{margin-right:auto !important;margin-left:0 !important;text-align:left !important;padding:0 !important}
  .parr2-quotes .parr2-quote blockquote{font-size:13px;min-height:0}
  .parr2-quotes .parr2-quote .oq{font-size:clamp(24px,7vw,32px)}
  .parr2-quotes .parr2-n{font-size:11px}
  .parr2-quotes .parr2-r{font-size:11px}

  /* --- FAQ: title no longer sticky (was overlapping the questions) --- */
  .faq-grid{grid-template-columns:1fr;gap:18px}
  .faq-grid .head{position:static;top:auto}
  .faq-grid .head h2{font-size:clamp(28px,7vw,38px)}

  /* --- Footer: compact, smaller download buttons, brand block pinned to bottom --- */
  .footer{padding:34px var(--pad) 26px}
  .foot-grid{gap:22px}
  .foot-center{order:1}
  .foot-links.right{order:2}
  .foot-links.left{order:3}
  /* legal notices: smaller + pinned to the very bottom, under the socials */
  .foot-links.left a{font-size:11px;opacity:.78}
  /* French Tech badge drops below the legal links so the socials (end of the
     contact block) sit immediately above the legal mentions */
  .foot-links.left .foot-ft-badge{order:1;margin-top:12px}
  .foot-center{gap:6px}
  .foot-center .foot-logo{height:84px;margin-top:-14px;margin-bottom:-4px}
  .foot-center .stores{gap:8px}
  .foot-center .store{padding:5px 11px 5px 9px;gap:7px}
  .foot-center .store svg{width:14px;height:14px}
  .foot-center .store .s-top{font-size:7.5px}
  .foot-center .store .s-big{font-size:11px}
  .foot-links{gap:10px}
  /* address + email match the legal-link size exactly */
  .foot-links a{font-size:11px;opacity:.78}
  .foot-ft-badge{margin:4px auto 0}
  .foot-ft-badge img{height:48px}
  .foot-ft-badge .ft-label{font-size:9.5px}
  .socials{margin-top:10px;gap:11px}
  .socials a{width:36px;height:36px}
  .foot-copy{margin-top:7px;font-size:10px;order:4}
}

/* ============================================================
   REDUCED MOTION — global neutralisation of continuous/large motion
   (individual entrance animations are already disabled next to their
   own rules; this block covers marquees, sweeps, carets, parallax…)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .trow,.trow.rev,.tmar{animation:none}
  .pf-sweep{animation:none;transform:none;opacity:0}
  .tw{animation:none;border-right-color:transparent}
  .hero-phone{transform:none !important}
  .rev-cut,.rev-cut:hover{transition:none;transform:rotate(var(--rot)) translateX(var(--nudge))}
  .phone-stack .phone-swap{transition:opacity .3s ease;transform:none}
  .ccar-stage .ccar-phone,.ccar-stage .ccar-phone.act{transition:opacity .3s ease;transform:none}
  .uni-tab .ut-desc,.uni-tab.act .ut-desc{transition:opacity .25s ease}
  .btn,.store,.socials a,.foot-ft-badge img,.blog-arrow,.tile,.nav-cta{transition-property:background,color,border-color,box-shadow,opacity}
}

/* ============================================================
   SCROLL REVEAL (.scroll-reveal)
   Complément à data-reveal — pour les grilles/cartes avec
   entrée échelonnée. JS ajoute .sr-ready avant l'observation
   et .sr-in quand l'élément entre dans le viewport.
   ============================================================ */
.scroll-reveal{opacity:1}
.scroll-reveal.sr-ready{opacity:0;transform:translateY(30px);
  transition:opacity 600ms cubic-bezier(0.4,0,0.2,1),transform 600ms cubic-bezier(0.4,0,0.2,1)}
.scroll-reveal.sr-ready.sr-in{opacity:1;transform:none}
.scroll-reveal.sr-ready[data-sr-d="1"]{transition-delay:100ms}
.scroll-reveal.sr-ready[data-sr-d="2"]{transition-delay:200ms}
.scroll-reveal.sr-ready[data-sr-d="3"]{transition-delay:300ms}
@media(prefers-reduced-motion:reduce){.scroll-reveal.sr-ready{opacity:1;transform:none;transition:none}}

/* ============================================================
   INTER-CTA — bande CTA compacte en milieu de page (sous-pages)
   ============================================================ */
.inter-cta{position:relative;z-index:2;padding-block:clamp(24px,3.4vw,48px)}
.inter-cta-card{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,60px);
  background:var(--green);border-radius:clamp(16px,2vw,26px);
  padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,56px);
  position:relative;overflow:hidden}
.inter-cta-card::before{content:"";position:absolute;left:50%;top:-30%;width:100%;height:90%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0,rgba(255,255,255,.13),transparent 65%)}
.inter-cta-text{flex:1 1 auto;min-width:0;position:relative;z-index:2}
.inter-cta-text .eyebrow{color:rgba(255,255,255,.65)}
.inter-cta-text .eyebrow::before{background:rgba(255,255,255,.65)}
.inter-cta-h{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,32px);
  color:#fff;margin:10px 0 0;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.inter-cta-sub{color:rgba(255,255,255,.76);font-size:clamp(14px,1.2vw,16px);margin:10px 0 0;
  line-height:1.5;max-width:44ch}
.inter-cta-stores{flex:none;position:relative;z-index:2}
.inter-cta-stores .store{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.22)}
.inter-cta-stores .store:hover{background:#fff;color:var(--green)}
@media(max-width:700px){
  .inter-cta-card{flex-direction:column;align-items:flex-start;gap:clamp(18px,3vw,28px)}
  .inter-cta-stores{margin-top:2px}
}

/* ============================================================
   BLOG — page liste + page article
   ============================================================ */
.blog-hero{padding-top:clamp(120px,15vh,170px);
  padding-bottom:clamp(16px,2vw,28px);position:relative;z-index:2}
.blog-hero-text{max-width:680px;position:relative;z-index:2}
.blog-hero h1{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,5.6vw,72px);
  color:var(--ink);letter-spacing:-.04em;line-height:.96;margin:14px 0 0}
.blog-hero p{color:var(--cream-dim);font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  margin:18px 0 0;max-width:48ch}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(40px,5vw,72px)}
.blog-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--line);
  transition:transform .35s var(--ease-out),box-shadow .35s;text-decoration:none;color:inherit}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -18px rgba(1,44,22,.22)}
.blog-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--green);position:relative}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out)}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-card-img-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#013a1c,#012a14);color:rgba(255,255,255,.25);
  font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.03em}
.blog-card-body{padding:clamp(16px,2vw,24px);flex:1 1 auto;display:flex;flex-direction:column}
.blog-card-date{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);margin-bottom:10px}
.blog-card-title{font-family:var(--font-display);font-weight:800;font-size:clamp(17px,1.5vw,21px);
  color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
.blog-card-excerpt{color:var(--cream-dim);font-size:14px;line-height:1.55;margin:10px 0 0;flex:1 1 auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--orange)}
.blog-card-more svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
.blog-card:hover .blog-card-more svg{transform:translateX(4px)}
.blog-empty{text-align:center;padding:clamp(60px,8vw,100px) 0;color:var(--cream-dim)}
.blog-empty p{font-size:16px;line-height:1.55;margin:12px auto 0;max-width:44ch}
.blog-loading{display:flex;justify-content:center;align-items:center;padding:80px 0}
.blog-spinner{width:44px;height:44px;border:3px solid var(--line-strong);
  border-top-color:var(--green);border-radius:50%;animation:blogSpin .9s linear infinite}
@keyframes blogSpin{to{transform:rotate(360deg)}}

/* ---- blog article ----
   Refonte du 2026-08-27, demandée par Miss : le bandeau de titre quitte le
   fond vert pour le beige de la page, le titre passe en Petit Cochon (la
   police du logo) et le texte s'élargit à la largeur des pages juridiques.
   Le dégradé de bas de bandeau disparaît avec le vert : il servait à
   raccorder deux fonds différents, il n'y a plus de raccord. */
.blog-art-hero{background:transparent;padding-top:clamp(34px,5vw,72px);
  padding-bottom:clamp(18px,2.4vw,30px);position:relative;z-index:2}
.blog-back{display:inline-flex;align-items:center;gap:8px;color:var(--cream-dim);
  font-size:13px;font-weight:600;margin-bottom:clamp(18px,2.6vw,28px);
  transition:color .3s;position:relative;z-index:2}
.blog-back:hover{color:var(--green)}
.blog-back svg{width:15px;height:15px;transition:transform .35s var(--ease-out)}
.blog-back:hover svg{transform:translateX(-3px)}
.blog-art-eyebrow{position:relative;z-index:2}
.blog-art-eyebrow .eyebrow{color:var(--orange)}
.blog-art-eyebrow .eyebrow::before{background:var(--orange)}
/* Titre d'article : même traitement que le titre de la liste du blog — Petit
   Cochon, capitales, orange TROT, lettres resserrées (demande de Miss,
   2026-08-27). La marge haute donne l'air demandé sous « BLOG TROT ». */
.blog-art-title{font-family:"Petit Cochon","Baloo 2",var(--font-display);font-weight:400;
  font-size:clamp(30px,4.8vw,62px);color:var(--orange);text-transform:uppercase;
  letter-spacing:-.04em;line-height:1.02;
  margin:clamp(34px,4.6vw,62px) 0 0;max-width:940px;text-wrap:balance;
  position:relative;z-index:2}
.blog-art-meta{color:var(--cream-faint);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  margin:16px 0 0;text-transform:uppercase;position:relative;z-index:2}
.blog-art-hero .wrap{max-width:940px}
.blog-art-cover{width:100%;max-width:860px;margin:clamp(28px,4vw,56px) auto 0;
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--green-deep)}
.blog-art-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* Marge basse : elle avait été réduite pour coller à l'encadré de fin, puis
   l'encadré a été retiré — le texte se retrouvait à toucher le pied de page
   vert. On rend l'air, cette fois sans rien en dessous pour l'absorber. */
.blog-art-body{max-width:940px;margin:clamp(30px,4vw,56px) auto clamp(64px,8vw,110px);
  padding-inline:var(--pad)}
/* Interligne resserré le 2026-08-27 : à 1,72 sur une colonne désormais large
   de 940 px, le texte respirait trop et se lisait en escalier. On réduit aussi
   l'écart entre paragraphes, qui doublait l'effet. */
.blog-art-body p{font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--ink);margin:0 0 1.05em}
.blog-art-body h2{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.2vw,28px);
  color:var(--ink);letter-spacing:-.025em;line-height:1.05;margin:1.8em 0 .55em}
.blog-art-body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.8vw,22px);
  color:var(--ink);letter-spacing:-.02em;line-height:1.05;margin:1.5em 0 .5em}
.blog-art-body blockquote{border-left:4px solid var(--orange);padding:4px 0 4px 20px;
  margin:1.6em 0;color:var(--cream-dim);font-size:clamp(15px,1.3vw,17px);line-height:1.6;
  font-style:italic}
.blog-art-body img{width:100%;border-radius:var(--r-sm);margin:1.2em 0;display:block}
.blog-art-body a{color:var(--orange);text-underline-offset:3px}
.blog-art-body a:hover{color:var(--orange-300)}
.blog-art-body ul,.blog-art-body ol{padding-left:1.5em;margin:0 0 1.05em;color:var(--ink);
  font-size:clamp(16px,1.4vw,18px);line-height:1.72}
.blog-art-body li{margin-bottom:.32em;line-height:1.55}
/* Tableau comparatif « Avant / Maintenant ». Deux colonnes face à face : c'est
   l'opposition qui porte le propos, une liste à plat la détruit. Sur mobile on
   garde les deux colonnes plutôt que d'empiler — empiler reviendrait au défaut
   qu'on corrige. On réduit la taille à la place. */
.blog-compare{width:100%;border-collapse:collapse;margin:1.8em 0 2.2em;
  font-size:clamp(14px,1.3vw,17px);line-height:1.5;table-layout:fixed}
.blog-compare th{font-family:var(--font-display);font-weight:800;text-align:left;
  color:var(--orange);text-transform:uppercase;letter-spacing:.06em;font-size:.82em;
  padding:0 14px 10px;border-bottom:2px solid var(--line-strong);width:50%}
.blog-compare td{padding:12px 14px;color:var(--ink);border-bottom:1px solid var(--line);
  vertical-align:top}
.blog-compare tbody tr:last-child td{border-bottom:0}
.blog-compare td:first-child{color:var(--cream-dim)}
.blog-compare td:last-child{font-weight:600}
@media(max-width:560px){
  .blog-compare th,.blog-compare td{padding-left:8px;padding-right:8px}
}
.blog-art-loading{text-align:center;padding:100px var(--pad);color:var(--cream-dim)}
.blog-art-error{text-align:center;padding:80px var(--pad)}

/* Sélecteur de langue, posé dans la barre de navigation par trot-i18n.js.
   Volontairement discret : c'est un basculement, pas un appel à l'action. */
/* Sélecteur de langue.
   Deux versions ont précédé celle-ci : la première héritait ses couleurs de la
   barre de navigation, qui n'en définit aucune, et sortait donc en noir sur le
   vert foncé ; la deuxième, en contour clair sur fond translucide, restait
   discrète au point que Miss ne la trouvait pas.
   Celle-ci est pleine et contrastée : fond crème, texte vert foncé, comme un
   vrai bouton. Elle se lit d'un coup d'œil sans concurrencer « Télécharger
   l'app », qui reste l'action principale par sa taille et sa position. */
.lang-switch{appearance:none;background:var(--cream);border:none;
  color:var(--green);font-family:var(--font-text);font-size:13px;font-weight:800;
  letter-spacing:.08em;padding:8px 14px;border-radius:999px;cursor:pointer;line-height:1;
  margin-left:auto;margin-right:14px;box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:transform .18s ease,box-shadow .18s ease}
/* Le bouton contient désormais un drapeau, plus deux lettres : on retire le
   remplissage horizontal prévu pour du texte et on le rend circulaire. */
.lang-switch{padding:5px !important;border-radius:50% !important;line-height:0}
.lang-flag{display:block;width:22px;height:22px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang-switch:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.26)}
.lang-switch:active{transform:none}
@media(max-width:880px){.lang-switch{font-size:12.5px;padding:7px 12px;margin-right:16px;z-index:101}}