/* Satoshi (Fontshare, Indian Type Foundry, licence ITF Free Font License : usage commercial autorisé). En production : servir le fichier .woff2 séparément. */
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
/* =========================================================
   TOKENS
   Papier   #F2EEE4  fond principal
   Papier 2 #E8E2D4  sections alternées, placeholders photo
   Encre    #1B1A17  texte, footer (noir du logo, adouci)
   Noir     #1B1A17  sections fortes, CTA principal sur papier (noir du logo)
   Ocre     #C98A1B  CTA sur fond vert, point signature, accents
   Ocre fonc#9C6A12  accents texte sur papier (contraste AA gros texte)
   ========================================================= */
:root{
  --paper:#F2EEE4; --paper-2:#E8E2D4; --card:#FBF9F4;
  --ink:#1B1A17; --ink-2:#56524A; --line:rgba(27,26,23,.14);
  --green:#1B1A17; --green-2:#34322C; --on-green:#F2EEE4; --on-green-2:rgba(242,238,228,.72);
  --ocre:#E8AE3F; --ocre-deep:#9C6A12; --ocre-soft:#F6DFAE;
  --mustard:#E8AE3F; --rose:#F3CDC2; --sky:#C8DBEA; --brick:#A2361F; --navy:#1F4E8C;
  --btn-bg:var(--green); --btn-fg:#F2EEE4; --btn-bg-h:var(--green-2);
  --foot:#1B1A17; --on-foot:#F2EEE4;
  --display:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px; --gut:clamp(1.25rem,5vw,3rem);
  --sec:clamp(3.5rem,8.5vw,6.5rem);
  --hdr:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141311; --paper-2:#1C1B18; --card:#24221E;
    --ink:#ECE7DA; --ink-2:#B2AC9E; --line:rgba(236,231,218,.16);
    --green:#0B0A09; --green-2:#2A2824;
    --ocre:#E8AE3F; --ocre-deep:#E2B45C; --ocre-soft:#3A2F19;
    --btn-bg:#D9A441; --btn-fg:#1B1A17; --btn-bg-h:#E6B75B;
    --foot:#0B0A09; --on-foot:#ECE7DA; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141311; --paper-2:#1C1B18; --card:#24221E;
  --ink:#ECE7DA; --ink-2:#B2AC9E; --line:rgba(236,231,218,.16);
  --green:#0B0A09; --green-2:#2A2824;
  --ocre:#E8AE3F; --ocre-deep:#E2B45C; --ocre-soft:#3A2F19;
  --btn-bg:#D9A441; --btn-fg:#1B1A17; --btn-bg-h:#E6B75B;
  --foot:#0B0A09; --on-foot:#ECE7DA; color-scheme:dark;
}

/* ---------- base ---------- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.6rem,8.4vw,5.6rem);line-height:.96}
h2{font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1}
h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.015em;font-weight:700}
p{margin:0;text-wrap:pretty}
em{font-style:normal;color:var(--em,var(--ocre-deep))}
.pt{color:var(--dot,var(--ocre))}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec-head{display:grid;gap:1.1rem;max-width:44rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
.sec-head p{color:var(--ink-2);font-size:1.125rem;max-width:36rem}
.muted{color:var(--ink-2)}
.todo{display:inline-block;font:600 .78em/1.3 var(--body);letter-spacing:0;background:var(--ocre-soft);color:var(--ink);padding:.12em .45em;border-radius:6px;border:1px dashed var(--ocre-deep);vertical-align:.08em}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:calc(env(safe-area-inset-top,0px) + .5rem);z-index:100;background:var(--ink);color:var(--paper);padding:.6rem 1rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:0 1.4rem;border-radius:14px;background:var(--btn-bg);color:var(--btn-fg);font:600 1rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background-color .15s}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,var(--ocre));border-radius:inherit;transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.btn:hover{color:#1B1A17;transform:translateY(-2px)}
.btn:hover::before{transform:none}
.btn-ocre{background:var(--ocre);color:#1B1A17}
.btn-ocre::before{background:#F2EEE4}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--paper)}
.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-color:var(--ocre)}
.tlink:hover{text-decoration-color:currentColor}

/* ---------- photo placeholders ----------
   Remplacer chaque .ph par : <img src="fichier.webp" width="…" height="…" alt="…" loading="lazy" decoding="async">
   (hero : fetchpriority="high" et pas de loading="lazy") */
.ph{position:relative;display:grid;place-items:center;background:var(--paper-2);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(128,112,80,.08) 14px 15px);color:var(--ink-2);text-align:center;overflow:hidden;aspect-ratio:var(--r,4/5)}
.ph span{font:500 .8rem/1.45 var(--body);padding:.5rem .7rem;background:var(--card);border-radius:8px;max-width:88%}
.ph b{display:block;color:var(--ink);font-weight:600}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:transparent;border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.hdr:not(.scrolled){--ink:#1B1A17;--line:rgba(27,26,23,.16);--btn-bg:#1B1A17;--btn-fg:#F2EEE4;--btn-bg-h:#34322C}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdr);gap:1rem}
.hdr-l{justify-self:start;display:flex;gap:1.6rem}
.hl-more{display:none}
@media (min-width:1000px){.hl-more{display:inline}}
.hdr-r{justify-self:end;display:flex;align-items:center}
.hlink{font-size:.95rem;font-weight:600;text-decoration:none;color:var(--ink);padding:.6rem 0}
.hlink:hover{text-decoration:underline;text-decoration-color:var(--navy);text-underline-offset:.35em;text-decoration-thickness:2px}
.logo{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none}
.logo .mk{height:34px;width:auto}
.logo .wm{height:21px;width:auto;margin-top:2px}
.nav{display:none}
.menu-btn{display:inline-grid;place-items:center;width:48px;height:48px;margin-right:-12px;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:12px}
.menu-btn svg{width:26px;height:26px}
.drawer{position:fixed;inset:calc(env(safe-area-inset-top,0px) + var(--hdr)) 0 0 0;z-index:49;background:var(--paper);padding:1.5rem var(--gut) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s .18s}
.drawer.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.drawer a:not(.btn){font:700 1.75rem/1.2 var(--display);letter-spacing:-.03em;text-decoration:none;padding:.55rem 0;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:1.5rem;width:100%}
@media (min-width:1000px){
  .menu-btn,.drawer{display:none}
  .nav{display:flex;align-items:center;gap:1.6rem}
  .nav a{font-size:.95rem;font-weight:500;text-decoration:none}
  .nav a:not(.btn){color:var(--ink)}
  .nav a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:.35em;text-decoration-thickness:2px}
  .nav .sep{width:1px;height:20px;background:var(--line)}
  .nav .btn{min-height:44px;padding:0 1.1rem;font-size:.95rem}
  .logo .mk{height:38px}.logo .wm{height:24px}
}


/* =========================================================
   FONDS COLORÉS
   Moutarde #E8AE3F  Rose #F3CDC2  Bleu ciel #C8DBEA  Brique #A2361F  Marine #1F4E8C
   Les sections .tone gardent un texte foncé, y compris en mode sombre.
   ========================================================= */
.tone{background:var(--bg,var(--paper));transition:background-color .4s;
  --ink:#1B1A17;--ink-2:#4A463E;--line:rgba(27,26,23,.16);--card:#FBF9F4;--paper:#F7F3EA;--paper-2:rgba(255,255,255,.4);
  --btn-bg:#1B1A17;--btn-fg:#F2EEE4;--btn-bg-h:#34322C;--ocre-deep:var(--em);color:#1B1A17}
/* Palette retenue : bleu ciel, moutarde, marine */
.hero.tone{--bg:var(--sky);--em:var(--navy);--dot:var(--navy);--disc:var(--mustard)}
.brands.tone{--bg:#F2EEE4;--em:var(--navy);--dot:var(--mustard);--paper-2:#E4DCCB}
.social.tone{--bg:var(--mustard);--em:var(--navy);--dot:var(--navy);--fill:#F2EEE4}
.social .reel:nth-child(2) .ph{box-shadow:0 0 0 3px var(--navy)}
.faq.tone{--bg:var(--sky);--em:var(--navy);--dot:var(--navy)}
.pp.tone{--bg:var(--sky);--em:var(--navy);--dot:var(--navy)}
.faq.tone summary::after{background-color:rgba(255,255,255,.55)}
.faq.tone details[open] summary::after{background-color:var(--ocre)}

/* ---------- hero : slogan + produit au centre ---------- */
.hero{margin-top:calc(var(--hdr) * -1);padding-block:calc(var(--hdr) + clamp(1.5rem,4vw,3rem)) clamp(3rem,7vw,5rem);overflow:hidden}
.hero-stage{display:grid;justify-items:center;text-align:center}
.hero h1{display:grid;justify-items:center;font-size:clamp(2.7rem,min(8.4vw,10.5svh),6.9rem);line-height:.94;letter-spacing:-.032em}
.hero h1 .l1,.hero h1 .l2{position:relative;z-index:1;max-width:100%;text-wrap:balance}
/* le produit passe toujours au-dessus du texte, et un espace les sépare : aucun chevauchement au scroll */
.hero-chart{position:relative;z-index:4;display:block;width:clamp(280px,min(80vw,58svh),560px);aspect-ratio:3/2;margin-block:clamp(1.2rem,3vw,2.2rem)}
.chart-card{position:absolute;inset:14% 6% 0 2%}
.bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12%;padding-inline:4%}
.bar{position:relative;border-radius:999px;background:rgba(31,78,140,.12);overflow:hidden}
.grow{position:absolute;inset:0}
.fill{position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg,#FFE58F 0%,#F9C77E 55%,#F6B79C 100%);transform:translateY(calc((1 - min(1, var(--h) + var(--p,0) * .2)) * 100%))}
.chart-badge{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:.45em;padding:.6em .9em;border-radius:14px;background:#1B1A17;color:#FFE58F;font:700 clamp(.95rem,2.4vw,1.3rem)/1 var(--display);letter-spacing:-.02em;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.chart-badge svg{width:1.05em;height:1.05em}
.chart-badge small{font:600 .68em/1 var(--body);letter-spacing:0;opacity:.75;margin-left:.15em}
.chart-badge--orders{top:auto;right:auto;left:-2%;bottom:30%}
@media (min-width:700px){.chart-badge--orders{left:-8%}}
.hero-cta{display:grid;justify-items:center;gap:.8rem;margin-top:clamp(1.4rem,3svh,2.4rem)}
.hero-cta .btn{min-width:240px}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:34rem}
@media (min-width:900px){.hero{min-height:100svh;display:grid;align-content:center}}

/* ---------- on s’occupe de tout ---------- */
.svc-row{display:grid;gap:2.5rem}
.svc-row+.svc-row{margin-top:clamp(3.5rem,8vw,6rem)}
.channels{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.channels li{padding:1.2rem 0;border-top:1px solid var(--line);display:grid;gap:.3rem}
.channels li:last-child{border-bottom:1px solid var(--line)}
.channels p{color:var(--ink-2)}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;align-items:center}
.reel{position:relative}
.reel .ph{--r:9/16;border-radius:22px;background-color:var(--card)}
.reel .ph span{font-size:.68rem;max-width:92%}
.reel:nth-child(2) .ph{box-shadow:0 0 0 3px var(--ocre)}
.reel .tag{position:absolute;left:10px;bottom:10px;font-size:.72rem;font-weight:600;background:var(--green);color:var(--on-green);padding:.25rem .55rem;border-radius:999px}
/* maquette de l’espace client (illustration, sans chiffres) */
.ui2{background:var(--card);border-radius:20px;box-shadow:0 30px 60px -30px rgba(27,26,23,.45),0 0 0 1px var(--line);overflow:hidden;font-size:.82rem}
.ui2-top{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-weight:600}
.ui2-top svg{height:18px;width:auto}
.ui2-top .av{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--ocre)}
.ui2-body{display:grid}
.ui2-side{display:none;list-style:none;margin:0;padding:.8rem;border-right:1px solid var(--line)}
.ui2-side li{padding:.5rem .7rem;border-radius:9px;color:var(--ink-2);white-space:nowrap}
.ui2-side li.on{background:var(--green);color:var(--on-green);font-weight:600}
.ui2-main{padding:1rem;display:grid;gap:.9rem}
.ui2-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.ui2-kpis div{background:var(--paper);border-radius:12px;padding:.7rem;display:grid;gap:.45rem}
.ui2-kpis small{font-size:.72rem;color:var(--ink-2)}
.ui2 i{display:block;height:10px;border-radius:99px;background:color-mix(in srgb,var(--ink) 16%,transparent);width:var(--w,70%)}
.ui2-kpis i{height:14px;width:80%}
.ui2-rows{display:grid;gap:.55rem;padding:.8rem;border-radius:12px;background:var(--paper)}
.ui2-rows div{display:grid;grid-template-columns:7.5rem 1fr;align-items:center;gap:.6rem}
.ui2-rows i{background:var(--ocre);height:12px}
.ui2-docs{display:grid}
.ui2-docs div{display:flex;justify-content:space-between;padding:.55rem 0;border-top:1px solid var(--line)}
.ui2-docs span:last-child{color:var(--ink-2);font-size:.75rem}
.ui2-cap{font-size:.8rem;color:var(--ink-2);margin-top:.8rem}
@media (min-width:600px){.ui2-body{grid-template-columns:auto 1fr}.ui2-side{display:block}}
@media (min-width:900px){
  .svc-row{grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center}
  .svc-row--rev{grid-template-columns:1.2fr .8fr}
  .reels{gap:1rem}.reel .ph{border-radius:28px}.reel .ph span{font-size:.78rem}
}

/* ---------- marques : défilement continu, cliquable et déplaçable ---------- */
.brands{overflow:hidden}
.marquee{margin-inline:calc(var(--gut) * -1);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.marquee::-webkit-scrollbar{display:none}
.marquee.dragging{cursor:grabbing}
.marquee.dragging a{pointer-events:none}
.track{display:flex;width:max-content;list-style:none;margin:0;padding:0;user-select:none;-webkit-user-select:none}
.brand{flex:none;width:clamp(270px,72vw,360px);margin-right:1rem}
.brand a{display:grid;gap:.85rem;color:inherit;text-decoration:none;-webkit-user-drag:none}
.brand .ph{--r:2800/2300;border-radius:44px 14px 14px 14px}
.brand h3{font-size:1.35rem}
.brand p{color:var(--ink-2);font-size:.97rem;margin-top:-.55rem}
@media (min-width:1300px){.marquee{margin-inline:calc((100vw - var(--wrap))/-2 - var(--gut))}}
.mq-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.6rem}
.mq-nav{display:flex;gap:.6rem}
.mq-nav button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.mq-nav button:hover{background:var(--ink);color:var(--paper)}
.mq-nav svg{width:20px;height:20px}
.mq-hint{font-size:.9rem;color:var(--ink-2)}

/* ---------- page « Nos marques » : rectangles photo ---------- */
[hidden]{display:none!important}
.bl-sec{margin-top:calc(var(--hdr) * -1);padding-block:calc(var(--hdr) + clamp(1.5rem,4vw,3rem)) clamp(4rem,8vw,6rem);--bg:#F2EEE4;--em:var(--navy);--dot:var(--mustard)}
.bl-title{font-size:clamp(2.6rem,8vw,5.6rem);line-height:.95;letter-spacing:-.032em;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.bl{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
.bcard{position:relative;display:block;overflow:hidden;border-radius:28px;aspect-ratio:2800/2300;background:#2A2824;color:#fff;text-decoration:none;isolation:isolate}
.bimg{position:absolute;inset:0;background:var(--img) center/cover no-repeat;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.bcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.35));z-index:0}
.bname{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;padding:1rem;font:700 clamp(2.6rem,9vw,6.2rem)/.9 var(--display);letter-spacing:-.035em;text-shadow:0 8px 40px rgba(0,0,0,.45)}
.dispo{position:absolute;z-index:2;right:clamp(.75rem,2vw,1.5rem);bottom:clamp(.75rem,2vw,1.5rem);display:grid;justify-items:center;gap:.55rem;padding:.9rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#1B1A17;min-width:160px}
.dispo b{font:700 1rem/1 var(--display);letter-spacing:-.01em}
.dispo .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.dispo .tags span{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .65rem;border-radius:999px;background:#1B1A17;color:#F2EEE4;font:600 .8rem/1 var(--body)}
.dispo .tags svg{width:15px;height:15px}
@media (hover:hover){.bcard:hover .bimg{transform:scale(1.05)}}
@media (min-width:700px){.dispo{min-width:190px;padding:1rem 1.3rem}.dispo b{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.bimg{transition:none}}

/* ---------- fiche marque ---------- */
.bd-top{margin-top:calc(var(--hdr) * -1);padding-block:calc(var(--hdr) + clamp(1rem,3vw,2rem)) clamp(2rem,5vw,3.5rem);--bg:#F2EEE4}
.bd-back{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;text-decoration:none;margin-bottom:1rem}
.bd-back svg{width:18px;height:18px}
.bd-back:hover{text-decoration:underline;text-underline-offset:.3em}
.bcard--hero{aspect-ratio:2800/2300}
@media (min-width:700px){.bcard--hero{aspect-ratio:16/8}}
.bd-body{background:var(--bb);color:var(--bf);padding-block:clamp(3rem,7vw,5.5rem);--ink:var(--bf);--ink-2:color-mix(in srgb,var(--bf) 76%,transparent);--line:color-mix(in srgb,var(--bf) 22%,transparent);--btn-bg:var(--bf);--btn-fg:var(--bb);--fill:var(--ba);--dot:var(--ba)}
.bd-grid{display:grid;gap:3rem}
.bd-cat{font-weight:600;color:var(--ba);display:flex;align-items:center;gap:.55rem}
.bd-cat::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ba)}
.bd-name{font-size:clamp(3rem,9vw,6.4rem);line-height:.92;letter-spacing:-.035em;margin-top:.7rem}
.bd-lead{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;margin-top:1.4rem;max-width:36rem}
.bd-story{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.bd-story h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.03em}
.bd-story p{font-size:1.08rem;line-height:1.75;color:var(--ink-2);max-width:38rem;margin-top:1.1rem}
.bd-aside{display:grid;gap:1.6rem;align-content:start;padding:clamp(1.4rem,3vw,2rem);border-radius:28px;background:color-mix(in srgb,var(--bf) 7%,transparent);border:1px solid var(--line)}
.bd-aside h3{font-size:1.05rem;margin-bottom:.7rem}
.bd-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.bd-chips li{padding:.45rem .85rem;border-radius:999px;border:1.5px solid var(--line);font-size:.93rem;font-weight:500}
.bd-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.bd-list li{display:flex;gap:.6rem;align-items:baseline;color:var(--ink-2)}
.bd-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ba);transform:translateY(-1px)}
.bd-proof{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-weight:700}
.bd-proof span::before{content:"★ ";color:var(--ba)}
.bd-aside .btn{width:100%}
.bd-join{font-size:clamp(1.6rem,3vw,2.1rem)!important;letter-spacing:-.035em;margin-bottom:.6rem!important}
.bd-join-p{color:var(--ink-2);line-height:1.55}
.bd-ctas{display:grid;gap:.6rem}
.bd-ctas .btn svg{width:20px;height:20px}
.btn-off{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line);opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-off::before{display:none}
.btn-off small{font:600 .72rem/1 var(--body);padding:.3rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);margin-left:.2rem}
.bd-store{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.bd-store h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.03em;margin-bottom:1.2rem}
.bd-store-ph{--r:16/9;border-radius:24px;background-color:color-mix(in srgb,var(--bf) 10%,transparent);background-image:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--bf) 8%,transparent) 14px 15px)}
.bd-aside .btn:hover{color:var(--bb)}
.bd-more{--bg:#F2EEE4;--em:var(--navy);--dot:var(--mustard);padding-block:clamp(3rem,6.5vw,5rem)}
.bd-more-title{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.028em;margin-bottom:1.6rem}
.bd-others{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.bd-others .bcard{aspect-ratio:2800/2300;border-radius:22px}
.bd-others .bname{font-size:clamp(1.4rem,4vw,2rem)}
.bd-others .dispo{display:none}
.bd-in{animation:fade .6s ease both}
@media (min-width:900px){
  .bd-grid{grid-template-columns:1.35fr .85fr;gap:5rem;align-items:start}
  .bd-aside{position:sticky;top:calc(var(--hdr) + 1.5rem)}
  .bd-others{grid-template-columns:repeat(4,1fr);gap:1rem}
}

/* ---------- créateurs ---------- */
.creators{background:var(--green);color:var(--on-green);padding-bottom:var(--sec)}
.creators .ph{--r:4/3;background-color:#2A2824;background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(242,238,228,.06) 14px 15px);color:var(--on-green-2)}
.creators .ph span{background:rgba(0,0,0,.35);color:var(--on-green)}
.creators .ph b{color:var(--on-green)}
.cr-grid{display:grid;gap:2.5rem;padding-top:clamp(3rem,8vw,5.5rem)}
.cr-grid h2 em,.contact h2 em{color:var(--ocre)}
.cr-lead{color:var(--on-green-2);font-size:1.125rem;margin-top:1.1rem;max-width:34rem}
.cr-points{list-style:none;margin:0;padding:0;display:grid}
.cr-points li{padding:1.2rem 0;border-top:1px solid rgba(242,238,228,.18);display:grid;gap:.3rem}
.cr-points li:last-child{border-bottom:1px solid rgba(242,238,228,.18)}
.cr-points p{color:var(--on-green-2)}
.creators .btn{margin-top:1.8rem}
@media (min-width:900px){
  .creators .ph{--r:21/8}
  .cr-grid{grid-template-columns:1fr 1fr;gap:5rem}
}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;font:700 1.12rem/1.3 var(--display);letter-spacing:-.01em;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231B1A17' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--ocre)}
.faq details p{color:var(--ink-2);padding:0 2.5rem 1.4rem 0;max-width:40rem}
@media (min-width:900px){.faq-grid{grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:start}}

/* ---------- contact ---------- */
.contact{background:var(--green);color:var(--on-green)}
.ct-grid{display:grid;gap:2.5rem}
.ct-grid .lead{color:var(--on-green-2);margin-top:1.2rem}
.ct-direct{margin-top:2rem;display:grid;gap:.4rem;font-size:.97rem;color:var(--on-green-2)}
.ct-direct a{color:var(--on-green)}
.form{background:var(--card);color:var(--ink);border-radius:44px 22px 22px 22px;padding:1.5rem;display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label,.field legend{font-size:.9rem;font-weight:600}
.field .opt{font-weight:400;color:var(--ink-2)}
.field input:not([type=radio]),.field select{width:100%;min-height:52px;padding:0 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:400 1rem var(--body)}
.field input:not([type=radio]):focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--ocre) 45%,transparent)}
fieldset.field{border:0;padding:0;margin:0}
.chips{display:grid;gap:.5rem}
.chips label{position:relative;display:flex;align-items:center;gap:.7rem;min-height:52px;padding:0 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);font-weight:500;cursor:pointer}
.chips input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-2);margin:0;flex:none;display:grid;place-items:center}
.chips input:checked{border-color:var(--green);background:radial-gradient(circle,var(--green) 0 5px,transparent 5.5px)}
.chips label:has(input:checked){border-color:var(--green);background:color-mix(in srgb,var(--ocre-soft) 60%,var(--paper))}
.chips input:focus-visible{outline:3px solid var(--ocre);outline-offset:2px}
.two{display:grid;gap:1rem}
.form .btn{width:100%;margin-top:.3rem}
.legal{font-size:.8rem;color:var(--ink-2)}
.status{font-size:.95rem;font-weight:500;padding:.8rem 1rem;border-radius:12px;background:var(--ocre-soft);display:none}
.status.show{display:block}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}.chips{grid-template-columns:1fr}}
@media (min-width:900px){.ct-grid{grid-template-columns:1fr 1.05fr;gap:5rem;align-items:start}.form{padding:2.2rem}}

.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A17' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px}
.field .hint{font-size:.82rem;color:var(--ink-2)}
.field input[aria-invalid="true"]{border-color:#B3261E}

/* ---------- page « Devenir partenaire » ---------- */
.pp{margin-top:calc(var(--hdr) * -1);padding-block:calc(var(--hdr) + clamp(2rem,6vw,4.5rem)) clamp(4rem,9vw,7rem);min-height:100svh}
.pp-grid{display:grid;gap:2.5rem}
.pp h1{font-size:clamp(3rem,9vw,6.4rem);line-height:.92;letter-spacing:-.032em}
.pp .lead{color:var(--ink-2);margin-top:1.3rem}
.pp-steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.pp-steps li{display:grid;grid-template-columns:40px 1fr;gap:1rem;align-items:start;padding:1rem 0;border-top:1px solid var(--line)}
.pp-steps li:last-child{border-bottom:1px solid var(--line)}
.pp-steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#F2EEE4;font:700 1rem/1 var(--display)}
.pp-steps b{display:block;font-weight:700}
.pp-steps span{color:var(--ink-2);font-size:.97rem}
.pp .ct-direct{color:var(--ink-2)}
.pp .ct-direct a{color:var(--ink)}
.pp .form{box-shadow:0 30px 60px -34px rgba(27,26,23,.45)}
@media (min-width:900px){.pp-grid{grid-template-columns:1fr 1.05fr;gap:5rem;align-items:start}.pp .form{padding:2.2rem}}

/* ---------- images génériques (Unsplash, licence libre) : à remplacer par vos photos ---------- */
.ph.img{background:var(--img) center/cover no-repeat!important}
.ph.img>span{display:none}
.img-chicken-shack{--img:url("../img/chicken-shack.webp")}
.img-beef-shack{--img:url("../img/beef-shack.webp")}
.img-greedy{--img:url("../img/greedy.webp")}
.img-kroustyz{--img:url("../img/kroustyz.webp")}
.img-reel1{--img:url("../img/reel1.webp")}
.img-reel2{--img:url("../img/reel2.webp")}
.img-reel3{--img:url("../img/reel3.webp")}

/* ---------- pages créateurs et franchise ---------- */
.xp-hero{margin-top:calc(var(--hdr) * -1);padding-block:calc(var(--hdr) + clamp(1.5rem,5vw,3.5rem)) clamp(3.5rem,8vw,6rem)}
.xp-hero-grid{display:grid;gap:2.5rem;align-items:center}
.xp-hero h1{font-size:clamp(3rem,9vw,6.6rem);line-height:.92;letter-spacing:-.035em;margin-top:.8rem}
.xp-hero .lead{color:var(--ink-2);margin-top:1.3rem}
.xp-hero .btn{margin-top:1.8rem}
.xp-kick{font-weight:600;color:var(--navy);display:flex;align-items:center;gap:.55rem}
.xp-kick::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mustard)}
.xp-photo{aspect-ratio:4/5;border-radius:48px 20px 20px 20px;background:var(--img) center/cover no-repeat;box-shadow:0 30px 60px -34px rgba(27,26,23,.5)}
.xp-photo--wide{aspect-ratio:4/3}
.xp-split{display:grid;gap:2.5rem;align-items:center}
.xp-p{font-size:1.1rem;line-height:1.7;color:var(--ink-2);max-width:36rem;margin-top:1.1rem}
.xp-roles{display:grid;gap:1rem}
.xp-role{padding:clamp(1.4rem,3vw,2.2rem);border-radius:28px;background:rgba(255,255,255,.5)}
.xp-role h3{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.028em;margin-bottom:1.1rem}
.xp-role--dark{background:#1B1A17;color:#F2EEE4;--ink-2:rgba(242,238,228,.78);--ba:var(--mustard)}
.xp-role .bd-list li{font-size:1.02rem}
.xp-role .bd-list li::before{background:var(--ba,var(--navy))}
.xp-steps{max-width:44rem}
.xp-why{max-width:52rem}
.xp-grid4{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.xp-card{padding:1.6rem;border-radius:24px;background:var(--card);border:1px solid var(--line);display:grid;gap:.5rem;align-content:start}
.xp-card p{color:var(--ink-2)}
.xp-figs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border-top:1.5px solid rgba(27,26,23,.2)}
.xp-figs>div{padding:1.3rem 1rem 1.3rem 0;border-bottom:1.5px solid rgba(27,26,23,.2);display:grid;gap:.4rem}
.xp-figs dt{font-weight:600;color:var(--ink-2);font-size:.95rem}
.xp-figs dd{margin:0;font:700 1.3rem/1.2 var(--display)}
.xp-top{margin-top:calc(var(--hdr) * -1);padding-block:calc(var(--hdr) + clamp(1rem,3vw,2rem)) 0}
.fr-hero{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:4/5;background:var(--img) center/cover no-repeat;display:grid;align-items:end}
.fr-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 20%,rgba(0,0,0,.72))}
.fr-hero-in{position:relative;padding:clamp(1.5rem,5vw,3.5rem);color:#F2EEE4;max-width:44rem}
.fr-hero h1{font-size:clamp(3rem,9vw,6.6rem);line-height:.92;letter-spacing:-.035em}
.fr-hero p{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5;margin-top:1rem;color:rgba(242,238,228,.88)}
.fr-hero .btn{margin-top:1.6rem}
.field textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:400 1rem/1.5 var(--body);resize:vertical}
.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--ocre) 45%,transparent)}
.field input[type=email],.field input[type=url]{width:100%;min-height:52px;padding:0 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:400 1rem var(--body)}
.xform{box-shadow:0 30px 60px -34px rgba(27,26,23,.35)}
@media (min-width:700px){.fr-hero{aspect-ratio:16/8}.xp-grid4{grid-template-columns:1fr 1fr}.xp-figs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){
  .xp-hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem}
  .xp-split{grid-template-columns:1fr 1fr;gap:5rem}
  .xp-roles{grid-template-columns:1fr 1fr}
  .xp-grid4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- page connexion ---------- */
.login{display:grid;align-content:center}
.login-card{max-width:440px;margin-inline:auto;background:var(--card);border-radius:44px 22px 22px 22px;padding:clamp(1.6rem,5vw,2.6rem);box-shadow:0 30px 60px -34px rgba(27,26,23,.45);display:grid;gap:1rem}
.login-mk{height:40px;width:auto;color:var(--ink)}
.login-card h1{font-size:clamp(2.3rem,7vw,3.2rem);line-height:.95;letter-spacing:-.032em;margin-top:.4rem}
.login-card form{display:grid;gap:1rem;margin-top:.6rem}
.login-card .btn{width:100%}
.pw-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.pw-top .tlink{font-size:.85rem;font-weight:500}
.pw{position:relative}
.pw input{padding-right:5.5rem!important}
.pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);min-height:40px;padding:0 .7rem;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:600 .85rem var(--body);cursor:pointer}
.pw-toggle:hover{background:var(--paper-2);color:var(--ink)}
.login-foot{font-size:.9rem;color:var(--ink-2);line-height:1.7;border-top:1px solid var(--line);padding-top:1rem}
.field input[type=email],.field input[type=password]{width:100%;min-height:52px;padding:0 1rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:400 1rem var(--body)}

/* images paysage pour les rectangles (≥ 700 px) */
:root{--img-chicken-shack-w:url("../img/chicken-shack-w.webp");--img-beef-shack-w:url("../img/beef-shack-w.webp");--img-greedy-w:url("../img/greedy-w.webp");--img-kroustyz-w:url("../img/kroustyz-w.webp");}
@media (min-width:700px){.bl .img-chicken-shack,.bcard--hero .img-chicken-shack{--img:var(--img-chicken-shack-w)}.bl .img-beef-shack,.bcard--hero .img-beef-shack{--img:var(--img-beef-shack-w)}.bl .img-greedy,.bcard--hero .img-greedy{--img:var(--img-greedy-w)}.bl .img-kroustyz,.bcard--hero .img-kroustyz{--img:var(--img-kroustyz-w)}}

/* images des pages créateurs et franchise */
.img-createurs{--img:url("../img/createurs.webp")}
.img-createurs-2{--img:url("../img/createurs-2.webp")}
.img-franchise{--img:url("../img/franchise.webp")}
.img-franchise-2{--img:url("../img/franchise-2.webp")}

/* logos des marques (fond transparent) et photo Compozza fournies par Foodsy */
.logo-chicken-shack{background-image:url("../logos/chicken-shack.webp");--ar:1000/363}
.logo-kroustyz{background-image:url("../logos/kroustyz.webp");--ar:1000/414}
.logo-greedy{background-image:url("../logos/greedy.webp");--ar:1919/460}
.logo-beef-shack{background-image:url("../logos/beef-shack.webp");--ar:1000/508}
.img-compozza{--img:url("../img/compozza.webp")}
.logo-compozza{background-image:url("../logos/compozza.webp");--ar:1000/236}
@media (min-width:700px){.bl .img-compozza,.bcard--hero .img-compozza{--img:url("../img/compozza-w.webp")}}
.bname .blogo{display:block;width:min(64%,560px);aspect-ratio:var(--ar);background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.logo-greedy.blogo{width:min(56%,460px)}
.logo-beef-shack.blogo{width:min(54%,460px)}
.bd-others .logo-beef-shack.blogo{width:70%}
.bd-others .bname .blogo{width:78%}
.bname--none{display:none}

/* ---------- footer ---------- */
.foot{background:var(--foot);color:var(--on-foot);border-top:1px solid rgba(242,238,228,.14);padding-block:3.5rem calc(3rem + 72px)}
.foot .logo{color:var(--on-foot)}
.foot-grid{display:grid;gap:2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.foot a{text-decoration:none;opacity:.85}.foot a:hover{opacity:1;text-decoration:underline}
.foot small{display:block;opacity:.65;font-size:.85rem;line-height:1.6}
@media (min-width:900px){.foot{padding-bottom:3.5rem}.foot-grid{grid-template-columns:auto 1fr auto;align-items:center;gap:3rem}.foot nav{justify-content:center}}

/* ---------- barre CTA mobile ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.mbar.show{transform:none}
.mbar .btn{width:100%}
@media (min-width:1000px){.mbar{display:none}}

/* ---------- apparition au scroll (titres de section uniquement) ---------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mbar,.drawer{transition:none}}
/* =========================================================
   ANIMATIONS : transform et opacity uniquement, coupées si « réduire les animations »
   ========================================================= */
.hero{--p:0}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero .wd{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:top;padding:0 .02em .14em;margin-bottom:-.14em}
.hero .ch{display:inline-block}
.hero .l1{--d:.15s}.hero .l2{--d:.95s}
.hero h1 .l1{transform:translateX(calc(var(--p) * -14%))}
.hero h1 .l2{transform:translateX(calc(var(--p) * 14%))}
.hero-chart{transform:scale(calc(1 + var(--p) * .06))}
.rise{display:inline-block}
.js .hero .ch{animation:chIn .8s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--d) + var(--c) * 32ms)}
.js .hero .chart-card{animation:cardIn .8s cubic-bezier(.2,.9,.25,1) .4s both}
.js .hero .bar{animation:trackIn .9s cubic-bezier(.45,0,.2,1) both;animation-delay:calc(.45s + var(--i) * 90ms)}
.js .hero .grow{animation:barUp 1.1s cubic-bezier(.2,.9,.25,1) both,breathe calc(2.4s + var(--i) * .35s) ease-in-out infinite alternate;animation-delay:calc(.75s + var(--i) * 110ms),calc(1.9s + var(--i) * 110ms)}
.js .hero .chart-badge--orders{animation:pop .32s cubic-bezier(.3,1.6,.5,1) 1.45s both,badgeFloat2 4.4s ease-in-out 1.8s infinite alternate}
.js .hero .chart-badge:not(.chart-badge--orders){animation:pop .32s cubic-bezier(.3,1.6,.5,1) 1.75s both,badgeFloat 3.8s ease-in-out 2.1s infinite alternate}
.js .hero-cta{animation:fade .7s ease 1.35s both}
@keyframes chIn{from{transform:translateY(115%) rotate(14deg);opacity:0}60%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.9)}}
@keyframes cardIn{from{transform:translateY(24px) scale(.94);opacity:0}}
@keyframes barUp{from{transform:translateY(100%)}}
@keyframes trackIn{from{clip-path:inset(0 0 100% 0 round 999px);opacity:.2}to{clip-path:inset(0 0 0 0 round 999px);opacity:1}}
@keyframes breathe{from{transform:translateY(0)}to{transform:translateY(calc(4% + var(--i) * 1.2%))}}
@keyframes dropOld{from{transform:translateY(-38%) rotate(-24deg) scale(.7);opacity:0}}
@keyframes float{to{transform:translateY(-3%) rotate(4deg)}}
@keyframes badgeFloat{to{transform:translateY(-14px) rotate(6deg)}}
@keyframes badgeFloat2{to{transform:translateY(-14px) rotate(-6deg)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}

/* titres : mots qui montent un à un */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}
.js .rv h1 .w>span,.js .rv h2 .w>span{transform:translateY(108%);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms)}
.js .rv.in h1 .w>span,.js .rv.in h2 .w>span{transform:none}
.js .rv p,.js .rv .btn,.js .rv .bp-menu,.js .rv .bp-index{opacity:0;transform:translateY(12px);transition:opacity .6s ease .35s,transform .6s ease .35s,color .3s}
.js .rv.in p,.js .rv.in .btn,.js .rv.in .bp-menu,.js .rv.in .bp-index{opacity:1;transform:none}
.js .stagger>li{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 90ms)}
.js .stagger.in>li{opacity:1;transform:none}

/* cartes marques */
.brand .ph{transition:border-radius .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.brand:hover .ph{border-radius:14px 14px 44px 14px;transform:translateY(-6px) rotate(-1.2deg)}}

/* services : parallaxe des vidéos et de l’interface */
.social{--p:.5}
.reel:nth-child(1){transform:translateY(calc((var(--p) - .5) * 70px))}
.reel:nth-child(2){transform:translateY(calc((var(--p) - .5) * -90px))}
.reel:nth-child(3){transform:translateY(calc((var(--p) - .5) * 40px))}
.ui2{transform:translateY(calc((var(--p) - .5) * -50px)) rotate(calc((.5 - var(--p)) * 3deg))}

/* bandeau typographique lié au scroll */
.band{--p:.5;overflow:hidden;padding-block:clamp(2.2rem,6vw,4.5rem) 0}
.band-track{display:flex;gap:.35em;width:max-content;white-space:nowrap;font:700 clamp(3rem,11vw,9rem)/1 var(--display);letter-spacing:-.032em;color:var(--on-green);transform:translateX(calc(var(--p) * -40% - 5%))}
.band-track i{font-style:normal;color:var(--ocre)}
.band-track .o{color:transparent;-webkit-text-stroke:1.5px rgba(242,238,228,.55)}
.band-track .o i{-webkit-text-stroke:0;color:var(--ocre)}

/* image créateurs : s’ouvre en plein cadre */
.cr-media{--p:0;margin-top:clamp(1.5rem,4vw,3rem)}
.cr-media .ph{clip-path:inset(0 calc((1 - var(--p)) * 9%) round calc((1 - var(--p)) * 48px))}

/* header qui se range au scroll */
.hdr{transition:border-color .2s,background-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.hdr.hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}

@media (prefers-reduced-motion:reduce){
  .js .hero .ch,.js .hero .chart-card,.js .hero .bar,.js .hero .grow,.js .hero .chart-badge,.js .hero-cta{animation:none}
  .hero h1 .l1,.hero h1 .l2,.hero-chart,.reel,.ui2,.band-track{transform:none!important}
  .js .rv h1 .w>span,.js .rv h2 .w>span,.js .rv p,.js .rv .btn,.js .rv .bp-menu,.js .rv .bp-index,.js .stagger>li{opacity:1;transform:none;transition:none}
  .cr-media .ph{clip-path:none}
  .brand .ph,.btn,.btn::before,.hdr{transition:none}
  .band-track{transform:translateX(-5%)!important}
}

/* ---------- le concept : fond papier, photos + textes en alternance ---------- */
.concept.tone{--bg:#F2EEE4;--em:var(--navy);--dot:var(--mustard)}
.concept+.brands{padding-top:0} /* même papier : on évite un double espace entre les deux sections */
.cp-row{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center}
.cp-row+.cp-row{margin-top:clamp(4.5rem,10vw,8rem)}
@media (min-width:900px){
  .cp-row{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem)}
  .cp-row--rev .cp-media{order:2}
}
.cp-media{--p:.5;overflow:hidden;border-radius:22px;aspect-ratio:4/5;background:#E4DCCB}
.cp-row--rev .cp-media{border-radius:22px 22px 22px 8px}
.cp-media img{width:100%;height:100%;object-fit:cover;transform:translateY(calc((var(--p) - .5) * -60px)) scale(1.1)}
.cp-media--bw img{filter:grayscale(1) contrast(1.05)}
.cp-body{display:grid;gap:1.1rem;max-width:34rem}
.cp-body h2{margin-bottom:.4rem}
.cp-body p{color:var(--ink-2);font-size:1.0625rem}
.cp-body .cp-lead{color:var(--ink);font-size:1.2rem}
.cp-link{display:inline-block;margin-top:.8rem;color:var(--ink);font-size:1.05rem;text-decoration-color:var(--navy)}
.cp-link span{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cp-link:hover span{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.cp-media img{transform:none}.cp-link span{transition:none}}

/* ---------- estimation : fond marine, chiffres moutarde ---------- */
.sim-sec{background:var(--navy);color:#F2EEE4;--em:var(--mustard);--dot:var(--mustard)}
.sim-sec .sec-head{max-width:none;grid-template-columns:1fr;align-items:end}
.sim-sec .sec-head p{color:rgba(242,238,228,.78)}
@media (min-width:900px){.sim-sec .sec-head{grid-template-columns:1.2fr 1fr}}
.sim{display:grid;gap:1rem}
@media (min-width:900px){.sim{grid-template-columns:1fr 1fr;gap:1.25rem}}
.sim-panel{display:grid;gap:clamp(1.6rem,4vw,2.4rem);padding:clamp(1.5rem,4vw,2.6rem);border-radius:22px;background:rgba(242,238,228,.07);box-shadow:inset 0 0 0 1px rgba(242,238,228,.14)}
.sim-field label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:600;margin-bottom:1rem}
.sim-field output{font:700 clamp(1.6rem,3.6vw,2.2rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sim input[type=range]{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.sim input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--mustard) var(--p),rgba(242,238,228,.22) var(--p))}
.sim input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(242,238,228,.22)}
.sim input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--mustard)}
.sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#F2EEE4;border:7px solid var(--mustard);transition:transform .15s}
.sim input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#F2EEE4;border:7px solid var(--mustard)}
.sim input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.sim input[type=range]:focus-visible{outline:3px solid var(--mustard);outline-offset:4px}
.sim-results{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (min-width:900px){.sim-results{gap:1.25rem;grid-template-rows:auto 1fr}}
.sim-kpi,.sim-total{display:grid;align-content:space-between;gap:1rem;padding:clamp(1.2rem,3vw,1.8rem);border-radius:22px}
.sim-kpi{background:rgba(242,238,228,.07);box-shadow:inset 0 0 0 1px rgba(242,238,228,.14)}
.sim-kpi span,.sim-total span{font-size:.92rem;opacity:.8}
.sim-kpi strong{font:700 clamp(1.5rem,3.4vw,2.4rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-total{grid-column:1/-1;background:var(--mustard);color:#1B1A17;border-radius:22px 22px 22px 8px;container-type:inline-size}
.sim-total strong{font:700 clamp(2.2rem,14cqi,5.4rem)/.95 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-note{margin-top:1.4rem;max-width:52rem;font-size:.85rem;color:rgba(242,238,228,.66)}
@media (prefers-reduced-motion:reduce){.sim input[type=range]::-webkit-slider-thumb{transition:none}}

/* ---------- bannière cookies (Google Analytics uniquement après accord) ---------- */
.cookie{position:fixed;z-index:60;left:var(--gut);right:var(--gut);bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:420px;padding:1.2rem;border-radius:22px 22px 22px 8px;background:var(--card);color:var(--ink);box-shadow:0 30px 60px -30px rgba(27,26,23,.55),0 0 0 1px var(--line);display:grid;gap:.9rem;font-size:.95rem}
.cookie[hidden]{display:none}
.cookie-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cookie .btn{min-height:44px;font-size:.92rem}
@media (min-width:1000px){.cookie{bottom:1.5rem;right:auto}}
.foot small a{opacity:1;text-decoration:underline}

/* ---------- pages légales ---------- */
.legal-page{min-height:70svh}
.legal-page h1{font-size:clamp(2.6rem,7vw,4.8rem);line-height:.95;letter-spacing:-.032em;margin-bottom:clamp(2rem,5vw,3rem)}
.legal-body{max-width:44rem;display:grid;gap:1rem}
.legal-body h2{font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:-.02em;margin-top:1.4rem}
.legal-body p{color:var(--ink-2);line-height:1.7}
.legal-body dl{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;margin:0;border-top:1px solid var(--line)}
.legal-body dt,.legal-body dd{margin:0;padding:.75rem 0;border-bottom:1px solid var(--line)}
.legal-body dt{color:var(--ink-2);font-weight:600}
@media (max-width:560px){.legal-body dl{grid-template-columns:1fr}.legal-body dt{border-bottom:0;padding-bottom:0}}

/* ---------- espace partenaire (accueil) ---------- */
.espace.tone{--bg:#F2EEE4;--em:var(--navy);--dot:var(--mustard)}
.espace{overflow:hidden}
.esp-grid{display:grid;gap:3.5rem;align-items:center}
.esp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2rem}
/* maquette agrandie, en biais, qui flotte */
.esp-visual{position:relative;perspective:1800px;padding-block:1.5rem}
.esp-glow{position:absolute;inset:8% -10% 0 12%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,174,63,.55),rgba(200,219,234,.45) 55%,transparent 75%);filter:blur(10px);pointer-events:none}
.esp-float{position:relative}
.espace .ui2{font-size:.92rem;border-radius:24px;transform-origin:center;transform:rotateY(10deg) rotateX(5deg) rotate(2.5deg) translateY(calc((var(--p,.5) - .5) * -40px));box-shadow:0 50px 90px -40px rgba(27,26,23,.55),0 18px 30px -18px rgba(27,26,23,.3),0 0 0 1px var(--line)}
.espace .ui2-main{gap:1.1rem;padding:1.3rem}
.espace .ui2-kpis i{height:18px}
.espace .ui2-rows i{height:14px}
.js .espace .esp-float{animation:espFloat 6s ease-in-out infinite alternate}
@keyframes espFloat{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@media (min-width:900px){
  .esp-grid{grid-template-columns:.8fr 1.2fr;gap:4rem}
  .esp-visual .ui2{width:calc(100% + 6vw);max-width:none;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.js .espace .esp-float{animation:none}.espace .ui2{transform:rotateY(10deg) rotateX(5deg) rotate(2.5deg)}}

/* ---------- rejoindre le réseau (bas de l'accueil) ---------- */
.join.tone{--bg:#F2EEE4;--em:var(--navy);--dot:var(--mustard)}
.join-card{position:relative;overflow:hidden;background:var(--sky);border-radius:48px 24px 24px 24px;padding:clamp(2.2rem,6vw,4.5rem);display:grid;gap:1.2rem;justify-items:start}
.join-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:clamp(160px,26vw,280px);aspect-ratio:1;border-radius:50%;background:var(--mustard);opacity:.9}
.join-card>*{position:relative;z-index:1}
.join-card h2{font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:.95;max-width:14ch}
.join-card p{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:36rem}
.join-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.8rem}

/* ---------- page FAQ ---------- */
.faq-page{margin-top:calc(var(--hdr) * -1);padding-top:calc(var(--hdr) + clamp(2rem,6vw,4.5rem));min-height:85svh}
.faq-page h1{font-size:clamp(2.4rem,5vw,4rem);line-height:.95;letter-spacing:-.032em}

/* maquette espace partenaire : total mensuel + ventes par marque */
.ui2-panels{display:grid;gap:.8rem}
.ui2-panel{background:var(--paper);border-radius:12px;padding:.9rem;display:grid;gap:.8rem;align-content:start}
.ui2-h{font-size:.82em;font-weight:600}
.ui2-month{display:grid;grid-template-columns:repeat(6,1fr);gap:8%;align-items:end;height:96px}
.ui2 .ui2-month i{width:auto;height:calc(var(--h) * 100%);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#FFE58F,#F6B79C)}
.ui2-rows--flat{padding:0;background:none}
.ui2-rows--flat div{grid-template-columns:auto 1fr;gap:.8rem}
.ui2-rows--flat b{white-space:nowrap;min-width:6.2em}
@media (min-width:600px){.ui2-panels{grid-template-columns:1fr 1.2fr}}

/* ===== mise à jour 03/10 ===== */
/* liste des marques : 2 par ligne pour garder le format 2800 × 2300 */
/* liste des marques : rectangles en long, pleine largeur (2:1 sur ordinateur) */
.bl .bcard{aspect-ratio:4/5}
@media (min-width:700px){.bl .bcard{aspect-ratio:2/1}}
/* simulateur : phrase sous le titre, montant annuel avec « / an » */
@media (min-width:900px){.sim-sec .sec-head{grid-template-columns:1fr}}
.sim-annual{margin:0;display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap}
.sim-per{font:600 clamp(1.1rem,4cqi,1.8rem)/1 var(--display);opacity:.75;letter-spacing:-.01em}
.sim-total{align-content:center}
/* créateurs : rôles et étapes dans la même section */
.xp-sub{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.028em;margin:clamp(2.5rem,6vw,4rem) 0 1.2rem}
.xp-steps--row{max-width:none}
.xp-steps--row li{border-color:rgba(27,26,23,.2)}
@media (min-width:900px){.xp-steps--row{grid-template-columns:repeat(3,1fr);gap:0 2rem}.xp-steps--row li,.xp-steps--row li:last-child{border-bottom:1px solid rgba(27,26,23,.2)}}
.sim-total .sim-per{font-size:clamp(1.3rem,5.5cqi,2.2rem);opacity:.7}


/* ===== mise à jour 09/10 ===== */
/* On s'occupe de tout : vidéos à gauche, texte à droite (quinconce avec « Un espace dédié ») */
@media (min-width:900px){.svc-row--flip{grid-template-columns:1.1fr .9fr}.svc-row--flip .reels{order:-1}}
/* créateurs : avantages dans « Un vrai partenariat » */
.xp-perks{list-style:none;margin:1.8rem 0 0;padding:0;display:grid}
.xp-perks li{display:grid;gap:.2rem;padding:.9rem 0;border-top:1px solid var(--line)}
.xp-perks li:last-child{border-bottom:1px solid var(--line)}
.xp-perks b{font-weight:700}
.xp-perks span{color:var(--ink-2);font-size:.97rem}
/* rôles Tu / On : 3 lignes chacun, cartes resserrées */
.xp-role{padding:clamp(1.3rem,2.6vw,1.9rem)}
.xp-role h3{margin-bottom:.8rem}
.xp-role .bd-list{gap:.65rem}
/* franchise : chiffres clés */
.fig-grid{display:grid;gap:1.2rem;align-items:stretch}
.fig-hero{display:grid;align-content:space-between;gap:1rem;padding:clamp(1.4rem,3vw,2rem);border-radius:28px 28px 28px 8px;background:var(--mustard);color:#1B1A17}
.fig-hero span{font-weight:600}
.fig-hero strong{font:700 clamp(2.6rem,5vw,3.8rem)/.95 var(--display);white-space:nowrap;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fig-hero small{font-size:.95rem;opacity:.75}
.fr-figs .xp-figs{align-self:center}
.fr-figs .xp-figs dd{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.fr-figs .xp-figs .fig-note{font:500 .85rem/1.3 var(--body);color:var(--ink-2)}
.fig-disc{margin-top:1.4rem;font-size:.85rem;color:var(--ink-2);max-width:48rem}
@media (min-width:900px){.fig-grid{grid-template-columns:.8fr 1.6fr;gap:2.5rem}}
.svc-text .sec-head{margin-bottom:1.8rem}
@media (min-width:900px){.svc-row--flip{align-items:center}}

/* ===== mise à jour 09/10 (2) ===== */
/* simulateur : mention dans le cadre jaune */
.sim-note--in{margin:0;max-width:none;font-size:.8rem;line-height:1.45;color:rgba(27,26,23,.72)}
/* franchise */
.fr-proof{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-weight:700;margin-top:1.2rem}
.fr-proof span::before{content:"★ ";color:var(--mustard)}

.fr-band-grid{display:grid;gap:2.5rem;align-items:center}
.fr-band h2{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.032em}
.fr-band .btn{margin-top:1.8rem}
.fr-band .xp-photo{aspect-ratio:4/3}
.fr-path{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:st}
.fr-path li{position:relative;display:grid;gap:.3rem;padding:0 0 1.6rem 3.4rem}
.fr-path li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:-.2rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#F2EEE4;font:700 1rem/1 var(--display)}
.fr-path li::after{content:"";position:absolute;left:19px;top:2.6rem;bottom:.3rem;border-left:2px dashed rgba(31,78,140,.35)}
.fr-path li:last-child::after{display:none}
.fr-path li:last-child::before{background:var(--mustard);color:#1B1A17}
.fr-path b{font-weight:700}
.fr-path span{color:var(--ink-2);font-size:.95rem}
.fr-acc .xp-role:not(.xp-role--dark){background:rgba(255,255,255,.55)}
@media (min-width:900px){
  .fr-band-grid{grid-template-columns:1fr 1fr;gap:5rem}
  .fr-path{grid-template-columns:repeat(6,1fr);gap:1.4rem}
  .fr-path li{padding:3.6rem 0 0}
  .fr-path li::after{left:48px;right:-1.4rem;top:19px;bottom:auto;border-left:0;border-top:2px dashed rgba(31,78,140,.35)}
}
.fr-band .fr-proof{margin-top:1.4rem}
.fr-path li::after{border-color:rgba(31,78,140,.4)}
.fr-figs .xp-figs>div{align-content:start}
.fr-path li{align-content:start}
.sim-total{align-content:space-between}

/* ===== page « Toutes nos marques » (10/10) ===== */
.all-link{display:flex;align-items:center;gap:1rem;margin-top:clamp(1rem,2.5vw,1.6rem);padding:1.3rem 1.4rem 1.3rem 1.6rem;border-radius:22px;background:#1B1A17;color:#F2EEE4;text-decoration:none;transition:background-color .2s}
.all-link:hover{background:#2A2824}
.all-link b{font:700 clamp(1.2rem,2.6vw,1.6rem)/1.1 var(--display);letter-spacing:-.02em}
.all-icons{display:none;gap:.4rem;margin-left:auto}
.all-icons span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(242,238,228,.1)}
.all-icons .cat-ic{width:20px;height:20px}
.all-arrow{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--mustard);color:#1B1A17;margin-left:auto}
.all-icons+.all-arrow{margin-left:0}
.all-arrow svg{width:22px;height:22px}
@media (min-width:900px){.all-icons{display:flex}}
.al-filters{display:grid;gap:.8rem;margin-bottom:1.4rem}
.al-chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.al-chips::-webkit-scrollbar{display:none}
.al-chip{flex:none;display:inline-flex;align-items:center;gap:.45rem;min-height:42px;padding:0 .95rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:600 .9rem var(--body);cursor:pointer;transition:background-color .15s,border-color .15s}
.al-chip span{font-weight:500;color:var(--ink-2);font-size:.8rem}
.al-chip .cat-ic{width:18px;height:18px}
.al-chip[aria-pressed="true"]{background:#1B1A17;border-color:#1B1A17;color:#F2EEE4}
.al-chip[aria-pressed="true"] span{color:rgba(242,238,228,.7)}
.al-seg{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;background:var(--card);border:1.5px solid var(--line);justify-self:start}
.al-seg button{min-height:36px;padding:0 .9rem;border-radius:999px;border:0;background:none;font:600 .85rem var(--body);color:var(--ink-2);cursor:pointer}
.al-seg button[aria-pressed="true"]{background:var(--mustard);color:#1B1A17}
.al-count{font-size:.9rem;color:var(--ink-2);margin-bottom:.6rem}
.al-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.al-list li{border-bottom:1px solid var(--line)}
.al-row{display:grid;grid-template-columns:64px 1fr auto;grid-template-areas:"t n g" "t c c" "t d d";align-items:center;gap:.35rem 1rem;padding:1rem .4rem;color:inherit;text-decoration:none;border-radius:16px;transition:background-color .15s}
a.al-row:hover{background:rgba(255,255,255,.6)}
.al-tile{grid-area:t;align-self:start;width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:var(--t);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(27,26,23,.08)}
.al-logo{width:82%;height:82%;background-position:center;background-size:contain;background-repeat:no-repeat}
.al-tile--photo{background:var(--img) center/cover no-repeat}
.al-tile--mono{font:700 1.2rem/1 var(--display);letter-spacing:-.02em}
.al-name{grid-area:n;font:700 1.2rem/1.15 var(--display);letter-spacing:-.015em}
.al-cat{grid-area:c;display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:600;color:var(--navy)}
.al-cat .cat-ic{width:18px;height:18px}
.al-dispo{grid-area:d;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
.al-b{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:999px;background:#1B1A17;color:#F2EEE4;font:600 .76rem/1 var(--body)}
.al-b svg{width:14px;height:14px}
.al-b--off{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.al-go{grid-area:g;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);transition:background-color .15s,color .15s}
.al-go svg{width:18px;height:18px}
a.al-row:hover .al-go{background:#1B1A17;color:#F2EEE4;box-shadow:none}
.al-soon{grid-area:g;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.al-empty{padding:2rem 0;color:var(--ink-2)}
@media (min-width:900px){
  .al-filters{grid-template-columns:1fr auto;align-items:center}
  .al-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .al-row{grid-template-columns:72px minmax(180px,1.2fr) 1fr 1.3fr 110px;grid-template-areas:"t n c d g";padding:1.1rem .8rem;gap:1.4rem}
  .al-tile{width:72px;height:72px;align-self:center}
  .al-dispo{margin-top:0}
  .al-go,.al-soon{justify-self:end}
}

/* photos « Les produits » des fiches marques (16:9) et logo Compozza */
.img-chicken-shack-p{--img:url("../img/chicken-shack-produits.webp")}
.img-beef-shack-p{--img:url("../img/beef-shack-produits.webp")}
.img-greedy-p{--img:url("../img/greedy-produits.webp")}
.img-compozza-p{--img:url("../img/compozza-produits.webp")}
.img-kroustyz-p{--img:url("../img/kroustyz-produits.webp")}
.logo-compozza.blogo{width:min(52%,440px)}

/* liens des visuels « On s'occupe de tout » (Instagram, TikTok, site de la marque) */
a.reel{display:block;color:inherit;text-decoration:none}
a.reel .tag{transition:transform .2s ease,background-color .2s ease}
@media (hover:hover){a.reel:hover .tag{transform:translateY(-2px)}}
a.reel:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:24px}

/* visuels « On s'occupe de tout » : au survol (et au clavier), le visuel se lève un peu et un contour bleu apparaît */
a.reel{transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.social .reel .ph,.social .reel:nth-child(2) .ph,.reel:nth-child(2) .ph{box-shadow:0 0 0 3px transparent;transition:box-shadow .25s ease}
@media (hover:hover){.social a.reel:hover{translate:0 -10px}}
.social a.reel:hover .ph,.social a.reel:focus-visible .ph{box-shadow:0 0 0 3px var(--navy)}
.social a.reel:focus-visible{translate:0 -10px}
@media (prefers-reduced-motion:reduce){a.reel{transition:none}.social a.reel:hover,.social a.reel:focus-visible{translate:none}}

/* visuels « On s'occupe de tout » : alignés sur une même ligne (pas de décalage au défilement) */
.social .reels .reel:nth-child(n){transform:none}
.social .reels{align-items:start}

/* photo du point de vente (marques en franchise) */
.img-chicken-shack-pdv{--img:url("../img/chicken-shack-point-de-vente.webp")}

/* Carrousel « Des marques prêtes à performer » : logo de la marque centré sur la photo */
.brand .ph .blogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:56%;aspect-ratio:var(--ar);background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45));pointer-events:none}
.brand .ph .logo-compozza{width:50%}
.brand .ph .logo-beef-shack{width:46%}
/* correctif : la règle générique « .ph span » (fond blanc, marges) écrasait le logo → on la neutralise pour ces logos */
.brand .ph>span.blogo{padding:0;border-radius:0;max-width:none;background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat}
.brand .ph>.logo-chicken-shack{background-image:url("../logos/chicken-shack.webp")}
.brand .ph>.logo-beef-shack{background-image:url("../logos/beef-shack.webp")}
.brand .ph>.logo-greedy{background-image:url("../logos/greedy.webp")}
.brand .ph>.logo-compozza{background-image:url("../logos/compozza.webp")}
.brand .ph>.logo-kroustyz{background-image:url("../logos/kroustyz.webp")}
/* Survol des marques du carrousel : la photo grossit et dépasse légèrement de son cadre */
.marquee{padding-block:22px;margin-block:-22px}
.brand .ph{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;position:relative;z-index:1}
.brand .ph>.blogo{transition:none}
@media (hover:hover){
  .brand:hover .ph{border-radius:44px 14px 14px 14px;transform:scale(1.08);box-shadow:0 24px 44px -22px rgba(27,26,23,.5);z-index:2}
}