/* ==========================================================
Le Mardi des Copines — feuille de style (lifting 2026)
Charte : bonbon #F9D3E0 · rose #C4717A · rose profond #9E3D57 · rose vif #E07A9B · nude #F2C4B8 · crème #FFF7FA · nuit #16100F · or #C9A96E
Polices : Fraunces en version douce (titres) + Montserrat (texte)
========================================================== */
:root{
--bonbon:#F9D3E0; --bonbon-2:#FCE7EF; --rose:#C4717A; --rose-deep:#9E3D57; --rose-vif:#E07A9B;
--nude:#F2C4B8; --creme:#FFF7FA; --nuit:#16100F; --or:#C9A96E; --vert:#3D6B5C;
--muted:#6E5458; --line:#F3D6E0;
--radius:24px; --max:1140px;
--shadow:0 20px 50px rgba(196,113,122,.22);
--serif:"Fraunces",Georgia,serif; --serif-w:440; --serif-k:.96;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--nuit);background:var(--creme);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rose-deep);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--nuit);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:104px 0;scroll-margin-top:90px}
.section-tight{padding:64px 0}
.bridge{background:var(--bonbon-2)}
h1,h2{font-family:var(--serif);font-weight:var(--serif-w);line-height:1.06;letter-spacing:-.01em}
h1{font-size:calc(clamp(2.5rem,6vw,4.6rem) * var(--serif-k))}
h2{font-size:calc(clamp(1.9rem,3.6vw,2.8rem) * var(--serif-k))}
h3{font-size:1.02rem;font-weight:600;line-height:1.3}
h2 .t2{display:block;color:var(--rose)}
p{max-width:62ch}
em{font-style:italic;color:var(--rose)}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:1.5px;background:currentColor;border-radius:2px}
.eyebrow-light{color:var(--bonbon)}
.lead{font-size:1.06rem;color:var(--muted);margin-top:18px}
.section-head{max-width:760px;margin-bottom:48px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center p{margin-left:auto;margin-right:auto}

/* Pictogrammes (masques Lucide, la couleur suit color) */
[data-ico]::before{content:"";display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.tile{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--bonbon-2);color:var(--rose-deep);box-shadow:inset 0 0 0 1px var(--line)}
.tile::before{width:22px;height:22px}
.tile.on{background:var(--rose-deep);color:#fff;box-shadow:0 10px 24px rgba(158,61,87,.28)}
.ico-s{display:inline-block;width:15px;height:15px;flex:none}

/* Boutons : pilule, flèche dans une pastille nuit, toujours sur une ligne */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:inherit;font-weight:600;font-size:.95rem;text-decoration:none;padding:9px 9px 9px 24px;min-height:52px;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn .dot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--nuit);color:#fff;transition:transform .2s}
.btn .dot::before{width:16px;height:16px}
.btn:hover .dot{transform:translateX(3px)}
.btn-bonbon{background:linear-gradient(135deg,#FCE7EF 0%,#F9D3E0 45%,#F2C4B8 100%);color:var(--nuit);box-shadow:0 12px 30px rgba(224,122,155,.35)}
.btn-bonbon:hover{box-shadow:0 16px 36px rgba(224,122,155,.45)}
.btn-verre{padding:0 26px;color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.btn-verre:hover{background:rgba(255,255,255,.18)}
.btn-sm{min-height:44px;padding:6px 6px 6px 20px;font-size:.88rem}
.btn-sm .dot{width:30px;height:30px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* En-tête : pilule flottante, en verre sur le héros */
.site-header{position:fixed;top:26px;left:0;right:0;z-index:50;padding:0 20px;transition:top .3s}
.nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 10px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(22,16,15,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.scrolled .site-header{top:12px}
.scrolled .nav{background:rgba(255,247,250,.9);color:var(--nuit);border-color:var(--line);box-shadow:0 12px 34px rgba(158,61,87,.12)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:1.1}
.mono{flex:none;width:42px;height:42px;border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-style:italic;font-size:.95rem;letter-spacing:.02em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.brand b{display:block;font-family:var(--serif);font-weight:var(--serif-w);font-size:1.12rem}
.brand small{display:block;font-size:.68rem;opacity:.75;font-weight:500;margin-top:2px}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu a:not(.btn){text-decoration:none;font-size:.88rem;font-weight:500;padding:8px 13px;border-radius:999px;transition:background .2s}
.menu a:not(.btn):hover{background:rgba(255,255,255,.16)}
.scrolled .menu a:not(.btn):hover{background:var(--bonbon-2);color:var(--rose-deep)}
.menu .btn{margin-left:8px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px 12px;color:inherit}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;border-radius:2px}
@media (max-width:960px){
.site-header{top:14px;padding:0 12px}
.nav{height:58px;padding:0 6px 0 8px}
.burger{display:block}
.menu{position:absolute;top:66px;left:12px;right:12px;flex-direction:column;align-items:stretch;background:#fff;color:var(--nuit);padding:12px;border-radius:24px;box-shadow:0 24px 50px rgba(22,16,15,.18);display:none}
.menu.open{display:flex}
.menu a:not(.btn){padding:13px 16px;font-size:1rem}
.menu a:not(.btn):hover{background:var(--bonbon-2)}
.menu .btn{justify-content:space-between;margin:8px 0 0}
}

/* Héros : carte arrondie, photo de groupe, voile nuit/lie-de-rose à gauche */
.hero{padding:14px 14px 0}
.hero-card{position:relative;min-height:min(820px,94vh);border-radius:30px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;background:var(--nuit)}
.hero-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(22,16,15,.86) 0%,rgba(74,26,42,.62) 36%,rgba(22,16,15,0) 66%),linear-gradient(0deg,rgba(22,16,15,.5) 0%,rgba(0,0,0,0) 38%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:150px 20px 84px}
.hero h1{max-width:18ch;color:#fff}
.hero h1 .t2{display:block;color:var(--bonbon)}
.hero p{color:#F7E4EA;font-size:1.14rem;margin-top:20px;max-width:40ch}
@media (max-width:700px){
.hero{padding:8px 8px 0}
.hero-card{min-height:92svh;border-radius:24px}
.hero-card>img{object-position:62% center}
.hero-card::before{background:linear-gradient(0deg,rgba(22,16,15,.92) 0%,rgba(74,26,42,.62) 50%,rgba(22,16,15,.05) 80%)}
.hero-in{padding:120px 18px 30px}
.hero p{font-size:1.02rem}
.hero .actions{flex-direction:column;align-items:stretch}
.hero .btn{justify-content:space-between}
.hero .btn-verre{justify-content:center;min-height:52px}
}

/* Notre histoire */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.story-photo{position:relative}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.tag{position:absolute;right:-18px;bottom:28px;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:10px 18px 10px 12px;font-size:.84rem;box-shadow:0 14px 34px rgba(22,16,15,.12);color:var(--nuit);font-weight:600}
.tag .ico-s{width:26px;height:26px;padding:6px;border-radius:50%;background:var(--bonbon);color:var(--rose-deep)}
.chapter{display:grid;gap:22px;margin-top:30px}
.chapter>div{display:flex;gap:18px;align-items:flex-start}
.chapter p{color:var(--muted);padding-top:2px}
.story blockquote{font-family:var(--serif);font-style:italic;font-weight:var(--serif-w);font-size:calc(1.7rem * var(--serif-k));color:var(--rose-deep);margin-top:34px}
.feutre{background:linear-gradient(transparent 56%,var(--bonbon) 56%,var(--bonbon) 92%,transparent 92%);padding:0 4px}
@media (max-width:860px){.story{grid-template-columns:1fr;gap:40px}.story-photo{max-width:440px}.tag{right:12px}}

/* Chiffres */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:28px;box-shadow:0 18px 44px rgba(196,113,122,.12)}
.numbers>div{padding:30px 22px;text-align:center;position:relative}
.numbers>div+div::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)}
.numbers strong{display:block;font-family:var(--serif);font-weight:var(--serif-w);font-size:calc(2.5rem * var(--serif-k));color:var(--rose-deep);line-height:1.1;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.numbers span{display:block;font-size:.84rem;color:var(--muted);margin-top:6px}
.reflet{background:linear-gradient(100deg,var(--rose-deep) 40%,#E9A5BC 50%,var(--rose-deep) 60%) 120% 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:reflet 4.5s ease-in-out infinite}
@keyframes reflet{0%,70%{background-position:120% 0}100%{background-position:-20% 0}}
@media (max-width:760px){.numbers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.numbers>div{padding:24px 12px}.numbers strong{font-size:calc(1.9rem * var(--serif-k));white-space:normal}.numbers>div:nth-child(3)::before{display:none}.numbers>div:nth-child(n+3){border-top:1px solid var(--line)}}

/* Concept */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px}}
.values{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.value{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:22px;padding:20px;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.value:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(196,113,122,.14)}
.value .tile{width:44px;height:44px;border-radius:14px}
.value p{font-size:.88rem;color:var(--muted);margin-top:4px}
@media (max-width:520px){.values{grid-template-columns:1fr}}
.photo{position:relative;border-radius:28px;overflow:hidden;background:var(--bonbon);aspect-ratio:4/3;box-shadow:var(--shadow)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95);color:var(--nuit);font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px}

/* Engagements */
.commit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.commit li{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;transition:transform .2s,box-shadow .2s}
.commit li:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(196,113,122,.16)}
.commit li:hover .tile{background:var(--rose-deep);color:#fff}
.commit .tile{margin-bottom:18px;transition:background .2s,color .2s}
.commit p{font-size:.9rem;color:var(--muted);margin-top:6px}
@media (max-width:900px){.commit{grid-template-columns:1fr 1fr}}

/* Rendez-vous */
.ev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ev{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.ev:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(196,113,122,.16)}
.ev-img{overflow:hidden;aspect-ratio:4/3}
.ev-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ev:hover .ev-img img{transform:scale(1.04)}
.ev .b{padding:20px 22px 24px}
.date{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-deep);background:var(--bonbon-2);border-radius:999px;padding:6px 12px 6px 10px}
.ev h3{font-family:var(--serif);font-weight:var(--serif-w);font-size:calc(1.45rem * var(--serif-k));line-height:1.15;margin-top:12px}
.ev p{font-size:.88rem;color:var(--muted);margin-top:8px}
.follow{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:.94rem;color:var(--muted)}
.follow a{color:var(--rose-deep);font-weight:600}
@media (max-width:900px){.ev-cards{grid-template-columns:1fr 1fr}}

/* Moyens de contact aux couleurs des vraies applis */
.app{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff}
.app::before{width:19px;height:19px}
.app-mail{background:linear-gradient(180deg,#1E9BFF,#0A6CFF)}
.app-insta{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}

/* Galerie en accordéon (PC) */
.accordion{display:flex;gap:10px;height:480px}
.accordion figure{position:relative;flex:1;min-width:0;border-radius:22px;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(.3,.7,.2,1)}
.accordion figure.on{flex:5}
.accordion img{width:100%;height:100%;object-fit:cover}
.accordion figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,16,15,.38) 0%,rgba(22,16,15,0) 40%);opacity:0;transition:opacity .4s}
.accordion figure.on::after{opacity:1}
.accordion figcaption{position:absolute;left:16px;bottom:16px;z-index:1;background:rgba(255,255,255,.95);color:var(--nuit);font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.accordion figure.on figcaption{opacity:1;transform:none;transition-delay:.25s}

/* Équipe : rôles en pictogrammes sur la photo */
.roles{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;background:rgba(255,255,255,.95);padding:8px;border-radius:18px;box-shadow:0 10px 26px rgba(22,16,15,.14)}
.roles i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--bonbon-2);color:var(--rose-deep)}
.roles i::before{width:17px;height:17px}

/* Partenaires */
.partners{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:center;align-items:center;list-style:none}
.partners li{font-family:var(--serif);font-weight:var(--serif-w);font-size:calc(1.5rem * var(--serif-k));color:#8E7479;transition:color .2s}
.partners li:hover{color:var(--rose-deep)}
.partners a{text-decoration:none}

/* Nous rejoindre */
.pink-band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--rose-deep) 0%,var(--rose) 55%,var(--rose-vif) 100%);color:#fff;border-radius:32px;padding:64px 56px}
.pink-band h2{color:#fff;text-align:center}
.pink-band>p{color:#FCE7EF;margin:14px auto 0;text-align:center}
.join{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.join a{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:24px;padding:24px;text-decoration:none;color:#fff;transition:background .2s,transform .2s}
.join a:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.join .tile{background:#fff;color:var(--rose-deep);box-shadow:none;margin-bottom:10px}
.join strong{font-family:var(--serif);font-weight:var(--serif-w);font-size:calc(1.6rem * var(--serif-k));line-height:1.1}
.join span:not(.tile){font-size:.9rem;color:#FCE7EF}
.join em{color:#fff;font-style:normal;font-weight:600;font-size:.86rem;margin-top:auto;padding-top:10px;white-space:nowrap}
.pink-band .actions{justify-content:center}
.btn-app{background:#fff;color:var(--nuit);padding:8px 22px 8px 9px;box-shadow:0 10px 26px rgba(22,16,15,.16)}
@media (max-width:860px){.join{grid-template-columns:1fr}.pink-band{padding:44px 18px;border-radius:28px}.pink-band .actions{flex-direction:column;align-items:stretch}.btn-app{font-size:.88rem}}

/* Pied de page */
.site-footer{background:var(--nuit);color:#D9C7CB;padding:72px 0 30px;font-size:.9rem;margin-top:104px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.site-footer h3{color:#fff;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.site-footer ul{list-style:none;display:grid;gap:9px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .brand b{color:#fff}
.site-footer .brand small{color:#BFA9AE}
.site-footer .about{margin-top:16px;font-size:.86rem;max-width:40ch}
.site-footer .legal{margin-top:44px;padding-top:22px;border-top:1px solid #3A2A2C;font-size:.76rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:#A8949A}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
#rejoindre{padding-bottom:0}

/* Mobile : cartes en carrousel horizontal + points de pagination */
.dots{display:none}
@media (max-width:700px){
section{padding:76px 0}
.rail{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 6px;scrollbar-width:none;height:auto}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 84%;scroll-snap-align:center}
.accordion figure,.accordion figure.on{flex:0 0 78%;height:420px}
.accordion figure::after,.accordion figcaption{opacity:1;transform:none}
.dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
.dots i{width:7px;height:7px;border-radius:99px;background:#E7BFCB;transition:width .3s,background .3s}
.dots i.on{width:22px;background:var(--rose-deep)}
.follow{align-items:flex-start}
}

/* Apparition douce */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn,.join a,.accordion figure{transition:none}.reflet{animation:none}}
.split>*,.story>*{min-width:0}

/* ==========================================================
v2 — l'expérience : doodles, polaroïds, stories, mouvements
========================================================== */
/* Titres dévoilés mot à mot */
.mots .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em 0;margin:0 -.06em -.14em 0}
.mots .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 55ms)}
.mots.vu .w>span{transform:none}
.js-off .mots .w>span{transform:none}

/* Doodles tracés à la main qui se dessinent */
.doodle{position:absolute;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.doodle path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.3,1) .5s}
.doodle path+path{transition-delay:.85s}
.vu .doodle path,.in .doodle path,.doodle.vu path{stroke-dashoffset:0}
.souligne{position:relative;display:inline-block}
.trait{left:-2%;bottom:-.12em;width:104%;height:.36em;stroke:var(--rose-vif);stroke-width:3.2}
.hero .trait{stroke:var(--bonbon);bottom:-.08em}
.hero h1.vu .trait path{transition-delay:1.1s}.hero h1.vu .trait path+path{transition-delay:1.45s}
.coeur-trace{width:46px;height:42px;stroke:var(--rose-vif);stroke-width:2.4;margin-left:8px;position:relative;vertical-align:-6px;transform:rotate(-8deg)}
.coeur-trace path{transition-duration:1.6s;transition-delay:.9s}
.etoile{fill:var(--or);stroke:none;animation:scintille 3.2s ease-in-out infinite}
.etoile.e1{position:absolute;width:22px;height:22px;margin:-22px 0 0 6px;animation-delay:.4s}
.etoile.e2{position:absolute;width:13px;height:13px;margin:16px 0 0 -10px;fill:#fff;animation-delay:1.6s}
.hero-in{position:relative}
.hero .etoile.e1{left:100%;top:-.2em;margin:0 0 0 .12em;width:.38em;height:.38em}.hero .etoile.e2{left:100%;top:.3em;margin:0 0 0 .5em;width:.2em;height:.2em}
.pink-band .etoile.e3{position:absolute;width:30px;height:30px;left:7%;top:46px;fill:#FFE3EC}
.pink-band .etoile.e4{position:absolute;width:18px;height:18px;right:9%;top:70px;fill:var(--or);animation-delay:1.2s}
@keyframes scintille{0%,100%{transform:scale(.6) rotate(0);opacity:.55}50%{transform:scale(1) rotate(90deg);opacity:1}}

/* Héros : lent zoom d'arrivée */
.hero-card>img{animation:arrivee 2.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrivee{from{transform:scale(1.12)}to{transform:none}}
.hero-in>.eyebrow,.hero-in>p,.hero-in>.actions{animation:monte 1s cubic-bezier(.2,.8,.2,1) both}
.hero-in>.eyebrow{animation-delay:.15s}.hero-in>p{animation-delay:.75s}.hero-in>.actions{animation-delay:.95s}
@keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Ruban de polaroïds qui défile */
.ruban{overflow:hidden;padding:34px 0 8px;margin:0 -14px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ruban-in{display:flex;gap:26px;width:max-content;animation:ruban 70s linear infinite;padding:10px 0}
.ruban:hover .ruban-in{animation-play-state:paused}
.pola{flex:none;background:#fff;padding:9px 9px 30px;border-radius:6px;box-shadow:0 14px 30px rgba(22,16,15,.12),0 2px 6px rgba(22,16,15,.06);transform:rotate(var(--r,-2deg));transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pola:nth-child(3n+1){--r:-3deg}.pola:nth-child(3n+2){--r:2deg;margin-top:14px}.pola:nth-child(3n){--r:-1deg;margin-top:-6px}
.pola:hover{transform:rotate(0) scale(1.08);z-index:1}
.pola img{height:170px;width:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
@keyframes ruban{to{transform:translateX(-50%)}}

/* Histoire : pile de polaroïds + scotch */
.story-photo{isolation:isolate}
.story-photo>img{border:10px solid #fff;border-bottom-width:44px;border-radius:8px;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.pola-fond{position:absolute;inset:6% 4% 8% 4%;z-index:-1;background:#fff;padding:9px 9px 34px;border-radius:8px;box-shadow:0 16px 34px rgba(22,16,15,.12);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.pola-fond img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:2px;box-shadow:none}
.pola-fond.f1{transform:rotate(-9deg) translate(-8%,2%)}
.pola-fond.f2{transform:rotate(7deg) translate(9%,-3%)}
.story-photo:hover .pola-fond.f1{transform:rotate(-14deg) translate(-20%,0)}
.story-photo:hover .pola-fond.f2{transform:rotate(12deg) translate(20%,-4%)}
.story-photo:hover>img{transform:rotate(0)}
.scotch{position:absolute;z-index:2;top:-12px;left:50%;width:110px;height:30px;margin-left:-55px;transform:rotate(-4deg);background:rgba(249,211,224,.82);box-shadow:0 2px 6px rgba(22,16,15,.08);-webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0),repeating-linear-gradient(0deg,#000 0 4px,transparent 4px 6px);mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0)}
.story-photo .tag{z-index:3;transform:rotate(3deg)}
.pola-photo{overflow:visible;background:#fff;padding:10px 10px 42px;border-radius:8px;transform:rotate(1.5deg);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.pola-photo:hover{transform:rotate(0) scale(1.01)}
.pola-photo img{border-radius:3px}
.pola-photo figcaption{left:22px;bottom:56px}
.pola-photo .scotch{top:-14px;left:auto;right:30px;margin:0;transform:rotate(8deg)}

/* Pictogrammes vivants */
.value:hover .tile,.join a:hover .tile{animation:frétille .6s ease}
@keyframes frétille{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}
.commit li{position:relative;overflow:hidden;isolation:isolate}
.commit li::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 0% 0%,var(--bonbon-2) 0%,#fff 60%);opacity:0;transition:opacity .35s}
.commit li:hover::after{opacity:1}
.commit li:hover .tile{transform:rotate(-6deg) scale(1.06)}
.commit .tile{transition:background .25s,color .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}

/* Rendez-vous façon story Instagram */
.ev-img{position:relative}
.story-ui{position:absolute;inset:0;z-index:1;padding:10px 12px;background:linear-gradient(180deg,rgba(22,16,15,.35),rgba(22,16,15,0) 30%);pointer-events:none}
.barres{display:flex;gap:4px}
.barres i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4);overflow:hidden;position:relative}
.barres i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.barres i:first-child::after{transform:none}
.ev:hover .barres i:nth-child(2)::after,.in .barres i:nth-child(2)::after{animation:barre 5s linear infinite}
@keyframes barre{to{transform:scaleX(1)}}
.avatar{display:grid;place-items:center;width:34px;height:34px;margin-top:10px;border-radius:50%;padding:2px;background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.avatar i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--rose);color:#fff;border:2px solid #fff}
.avatar i::before{width:13px;height:13px}

/* Partenaires qui défilent */
.defile{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.defile-in{display:flex;width:max-content;animation:ruban 32s linear infinite}
.defile:hover .defile-in{animation-play-state:paused}
.defile .partners{flex-wrap:nowrap;gap:0;padding-right:0}
.defile .partners li{white-space:nowrap;display:flex;align-items:center;gap:44px;padding-right:44px}
.defile .partners li::after{content:"";width:13px;height:13px;background:var(--rose-vif);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12 9 15 12 23 12C15 12 12 15 12 23C12 15 9 12 1 12C9 12 12 9 12 1Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12 9 15 12 23 12C15 12 12 15 12 23C12 15 9 12 1 12C9 12 12 9 12 1Z'/%3E%3C/svg%3E") center/contain no-repeat;flex:none}

/* Rejoindre : cœurs façon live Instagram, avion en papier */
.pink-band{isolation:isolate}
.btn-app{position:relative;overflow:visible}
.envol{position:absolute;left:24px;bottom:60%;width:18px;height:18px;pointer-events:none;color:#fff;animation:envol 1.6s ease-out forwards}
.envol::before{width:100%;height:100%}
@keyframes envol{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,10px),-120px) scale(1.15) rotate(var(--rt,12deg))}}
.btn-mail:hover .app::before{animation:avion .9s ease}
@keyframes avion{0%{transform:none}45%{transform:translate(14px,-12px) rotate(-12deg);opacity:0}55%{transform:translate(-14px,10px);opacity:0}100%{transform:none;opacity:1}}

@media (max-width:700px){
.pola img{height:120px}.ruban{padding-top:24px;margin:0 -8px}.ruban-in{gap:16px}
.hero .etoile{display:none}
.pola-fond.f1{transform:rotate(-7deg) translate(-5%,2%)}.pola-fond.f2{transform:rotate(6deg) translate(6%,-3%)}
.story-photo{margin:10px 18px 0}
.coeur-trace{width:36px;height:32px}
}
@media (prefers-reduced-motion:reduce){
.mots .w>span{transform:none;transition:none}.doodle path{stroke-dashoffset:0;transition:none}
.ruban-in,.defile-in,.etoile,.hero-card>img,.hero-in>*,.barres i::after{animation:none!important}
}

/* Citation isolée, en grand, lettre par lettre */
#histoire{padding-bottom:0}
.citation-scene{min-height:78vh;display:grid;place-items:center;padding:80px 20px 110px;text-align:center}
.story blockquote{margin:0}
.citation{position:relative;font-family:var(--serif);font-style:italic;font-weight:var(--serif-w);font-size:calc(clamp(2.8rem,8.4vw,7.4rem) * var(--serif-k));line-height:1.08;letter-spacing:-.015em;color:var(--rose-deep);max-width:13ch;text-wrap:balance}
.citation .feutre{padding:0 .08em;background:linear-gradient(transparent 58%,var(--bonbon) 58%,var(--bonbon) 90%,transparent 90%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.3s cubic-bezier(.6,.1,.3,1)}
.citation.vu .feutre{background-size:100% 100%;transition-delay:var(--fin,1.6s)}
.lettres .mot{display:inline-block;white-space:nowrap}
.lettres .l{display:inline-block;opacity:0;transform:translateY(.35em) rotate(6deg);filter:blur(8px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s ease;transition-delay:calc(var(--c) * 55ms)}
.lettres.vu .l{opacity:1;transform:none;filter:none}
.citation .coeur-trace{position:relative;display:inline-block;width:.5em;height:.45em;vertical-align:.55em;margin:0 0 0 .06em;stroke-width:2;transform:rotate(10deg)}
.citation.vu .coeur-trace path{stroke-dashoffset:0;transition-delay:calc(var(--fin,1.6s) + .4s)}
.citation .etoile-c{position:absolute;fill:var(--or);animation:scintille 3.2s ease-in-out infinite}
@media (max-width:700px){.citation-scene{min-height:52svh;padding:40px 18px 64px}}
@media (prefers-reduced-motion:reduce){.lettres .l{opacity:1;transform:none;filter:none;transition:none}.citation .feutre{background-size:100% 100%;transition:none}}

/* Engagements : un safe space illustré, aéré, vivant */
.engage{padding:150px 0 170px;background:linear-gradient(180deg,var(--creme) 0%,#FFF1F6 50%,var(--creme) 100%)}
.engage .section-head{margin-bottom:90px}
.engage .commit{grid-template-columns:repeat(3,1fr);gap:90px 64px;counter-reset:none}
.engage .commit li{background:none;border:0;padding:0;text-align:center;overflow:visible;isolation:auto;border-radius:0}
.engage .commit li::after{display:none}
.engage .commit li:hover{transform:none;box-shadow:none}
.engage .commit li:nth-child(3n+2){margin-top:70px}
.illu{position:relative;display:grid;place-items:center;aspect-ratio:1/0.86;margin:0 auto 30px;max-width:330px}
.illu::before{content:"";position:absolute;inset:4% 2% 0;background:var(--bonbon-2);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;animation:blob 14s ease-in-out infinite alternate;transition:background .5s}
.commit li:nth-child(2n) .illu::before{animation-duration:17s;animation-direction:alternate-reverse;background:#FDEDF2}
.illu img{position:relative;width:84%;height:84%;object-fit:contain;animation:flotte 6s ease-in-out infinite;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.commit li:nth-child(2) .illu img{animation-delay:-1.5s}.commit li:nth-child(3) .illu img{animation-delay:-3s}.commit li:nth-child(4) .illu img{animation-delay:-2.2s}.commit li:nth-child(5) .illu img{animation-delay:-4s}.commit li:nth-child(6) .illu img{animation-delay:-.7s}
.commit li:hover .illu::before{background:var(--bonbon)}
.commit li:hover .illu img{transform:scale(1.05)}
.engage .commit h3{text-wrap:balance;font-family:var(--serif);font-weight:var(--serif-w);font-size:calc(1.75rem * var(--serif-k));line-height:1.1;color:var(--nuit)}
.engage .commit p{font-size:.95rem;max-width:30ch;margin:10px auto 0;line-height:1.7}
.engage .commit li.reveal{transform:translateY(40px) scale(.96);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.engage .commit li.reveal.in{transform:none}
.engage .commit li:nth-child(3n+2).reveal{transition-delay:.15s}.engage .commit li:nth-child(3n).reveal{transition-delay:.3s}
@keyframes blob{0%{border-radius:58% 42% 52% 48%/48% 56% 44% 52%}50%{border-radius:42% 58% 38% 62%/58% 40% 60% 42%}100%{border-radius:50% 50% 62% 38%/40% 62% 38% 60%}}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:900px){.engage .commit{grid-template-columns:1fr 1fr;gap:70px 36px}.engage .commit li:nth-child(3n+2){margin-top:0}.engage .commit li:nth-child(2n){margin-top:60px}}
@media (max-width:700px){
.engage{padding:96px 0 110px}.engage .section-head{margin-bottom:44px}
.engage .commit{gap:14px}
.engage .commit li,.engage .commit li:nth-child(2n),.engage .commit li:nth-child(3n+2){margin-top:0;padding:0 6px}
.illu{max-width:250px;margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){.illu::before,.illu img{animation:none}}

/* ==========================================================
v3 — safe space : illustrations humaines, formes douces, de l'air partout
========================================================== */
section{padding:136px 0}
.section-tight{padding:80px 0}

/* Variantes d'illustrations dans leur forme douce */
.illu-ch,.illu-v,.illu-j{margin:0;max-width:none}
.illu-ch{flex:none;width:112px}
.illu-ch img,.illu-v img,.illu-j img{animation:flotte 6s ease-in-out infinite}
.illu-ch.on::before{background:var(--bonbon)}
.chapter{gap:30px;margin-top:38px}
.chapter>div{align-items:center;gap:26px}
.chapter>div:nth-child(2) .illu img{animation-delay:-2s}.chapter>div:nth-child(3) .illu img{animation-delay:-4s}
.chapter>div:nth-child(2) .illu::before{animation-direction:alternate-reverse}

/* Chiffres : plus de cadre, des nombres qui respirent */
.numbers{background:none;box-shadow:none;border-radius:0}
.numbers>div{padding:10px 18px}
.numbers>div+div::before{display:none}
.numbers strong{font-size:calc(clamp(2.6rem,4.6vw,3.8rem) * var(--serif-k))}
.numbers span{font-size:.9rem;margin-top:10px}

/* Concept : texte et photo, puis les quatre valeurs illustrées en frise */
.concept{grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;column-gap:80px;row-gap:0;align-items:start}
.concept>div:first-child{display:contents}
.concept .eyebrow{grid-column:1;grid-row:1;justify-self:start;align-self:end}
.concept h2{grid-column:1;grid-row:2}
.concept .lead{grid-column:1;grid-row:3}
.concept figure{grid-column:2;grid-row:1/4;align-self:center}
.concept .values{grid-column:1/-1;grid-row:4;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:120px}
.concept .value{flex-direction:column;align-items:center;text-align:center;background:none;border:0;padding:0;border-radius:0}
.concept .value:hover{transform:none;box-shadow:none}
.concept .value:hover .illu::before{background:var(--bonbon)}
.illu-v{width:100%;max-width:230px;margin:0 auto 22px}
.concept .value:nth-child(2) .illu img{animation-delay:-1.5s}.concept .value:nth-child(3) .illu img{animation-delay:-3s}.concept .value:nth-child(4) .illu img{animation-delay:-4.5s}
.concept .value:nth-child(2n) .illu::before{animation-direction:alternate-reverse;background:#FDEDF2}
.concept .value h3{font-family:var(--serif);font-weight:var(--serif-w);font-size:calc(1.6rem * var(--serif-k));line-height:1.1}
.concept .value p{font-size:.92rem;max-width:24ch;margin:8px auto 0}
.concept .value:hover .tile{animation:none}

/* Rendez-vous : des stories, sans cadre */
.ev-cards{gap:40px}
.ev{background:none;border:0;border-radius:0;overflow:visible}
.ev:hover{transform:none;box-shadow:none}
.ev-img{aspect-ratio:4/5;border-radius:30px;box-shadow:0 22px 46px rgba(158,61,87,.18);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.ev:hover .ev-img{transform:translateY(-6px) rotate(-1deg)}
.ev:nth-child(2):hover .ev-img{transform:translateY(-6px) rotate(1deg)}
.ev .b{padding:26px 6px 0}
.ev h3{font-size:calc(1.7rem * var(--serif-k))}
.ev p{font-size:.92rem}
.follow{margin-top:56px;justify-content:center}

/* Rejoindre : une grande bulle douce, des portes d'entrée illustrées */
.pink-band{background:linear-gradient(160deg,#FFF1F6 0%,#FCE7EF 35%,#F9D3E0 75%,#F6CDC2 100%);color:var(--nuit);border-radius:48px;padding:96px 64px 88px}
.pink-band h2{color:var(--nuit)}
.pink-band>p{color:var(--muted)}
.join{gap:40px;margin-top:70px}
.join a{background:none;border:0;border-radius:0;padding:0;align-items:center;text-align:center;color:var(--nuit)}
.join a:hover{background:none;transform:none}
.join a:hover .illu::before{background:#fff}
.illu-j{width:100%;max-width:240px;margin:0 auto 20px}
.illu-j::before{background:rgba(255,255,255,.7)}
.join a:nth-child(2) .illu img{animation-delay:-2s}.join a:nth-child(3) .illu img{animation-delay:-4s}
.join strong{color:var(--rose-deep);font-size:calc(1.9rem * var(--serif-k))}
.join span:not(.illu){color:var(--muted);max-width:28ch}
.join em{color:var(--rose-deep);padding-top:14px;transition:letter-spacing .3s}
.join a:hover em{letter-spacing:.02em}
.pink-band .actions{margin-top:64px}
.pink-band .etoile.e3{fill:#fff}
.btn-app{box-shadow:0 12px 30px rgba(158,61,87,.14)}

@media (max-width:900px){
.concept{grid-template-columns:1fr;grid-template-rows:none}
.concept .eyebrow,.concept h2,.concept .lead,.concept figure,.concept .values{grid-column:1;grid-row:auto}
.concept figure{margin-top:40px}
.concept .values{grid-template-columns:1fr 1fr;gap:44px 20px;margin-top:80px}
}
@media (max-width:700px){
section{padding:96px 0}.section-tight{padding:64px 0}
.illu-ch{width:88px}.chapter>div{gap:16px}
.numbers>div{padding:18px 8px}
.numbers>div:nth-child(n+3){border-top:0}
.illu-v{max-width:160px}
.concept .value h3{font-size:calc(1.35rem * var(--serif-k))}
.ev-cards{gap:14px}
.pink-band{padding:64px 18px 56px;border-radius:36px}
.join{gap:56px;margin-top:48px}
.illu-j{max-width:210px}
}
@media (prefers-reduced-motion:reduce){.illu-ch img,.illu-v img,.illu-j img{animation:none}}
.follow{max-width:none;margin-left:auto;margin-right:auto}
.engage{padding-bottom:110px}
#rendez-vous{padding-top:110px}

/* ==========================================================
Chiffres vivants : chaque nombre a sa petite scène
========================================================== */
.numbers{gap:22px}
.numbers>div{display:flex;flex-direction:column;align-items:center;padding:34px 18px 36px;border-radius:42px;background:rgba(255,255,255,.5)}
.numbers>div:nth-child(2){background:rgba(255,255,255,.72)}
.numbers>div:nth-child(3){background:rgba(255,241,246,.9)}
.numbers>div:nth-child(4){background:rgba(246,205,194,.32)}
.numbers strong{margin-top:auto}
.vis{position:relative;width:100%;max-width:240px;height:172px;margin:0 auto 22px}
.vis b,.vis i{display:block}

/* 50 copines : une grappe de visages qui arrivent une à une */
.vis-foule{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;padding:0 22px}
.vis-foule i{width:58px;height:58px;margin:-5px -6px;border-radius:50%;border:3px solid #fff;overflow:hidden;background:var(--bonbon);box-shadow:0 8px 18px rgba(158,61,87,.18);transform:scale(0);transition:transform .6s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--k) * 90ms)}
.vis-foule img{width:100%;height:100%;object-fit:cover;animation:flotte 4.5s ease-in-out infinite;animation-delay:calc(var(--k) * -.45s)}
.vis-foule .bulle{display:grid;place-items:center;background:var(--rose-vif);color:#fff}
.vis-foule .bulle b{width:24px;height:24px;animation:bat 1.4s ease-in-out infinite}
.vis-foule .bulle b::before{width:100%;height:100%}
.in .vis-foule i{transform:none}
.vis-foule i:hover{transform:scale(1.15);z-index:2}
@keyframes bat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}

/* 88 000 vues : un reel, une courbe qui monte, des cœurs */
.vis-vues .courbe{position:absolute;left:0;right:0;bottom:6px;width:100%;height:62%;overflow:visible}
.vis-vues .ligne{fill:none;stroke:var(--rose-deep);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 2s cubic-bezier(.6,.1,.3,1) .3s}
.vis-vues .aire{opacity:0;transition:opacity 1.2s ease 1.4s}
.in .vis-vues .ligne{stroke-dashoffset:0}.in .vis-vues .aire{opacity:1}
.reel{position:absolute;left:50%;top:0;width:98px;height:150px;margin-left:-49px;border-radius:18px;overflow:hidden;border:3px solid #fff;box-shadow:0 16px 34px rgba(22,16,15,.2);transform:rotate(-5deg);animation:penche 6s ease-in-out infinite}
.reel>img{width:100%;height:100%;object-fit:cover}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,15,.25),transparent 35%,transparent 65%,rgba(22,16,15,.35))}
.r-avatar{position:absolute;z-index:1;left:7px;top:7px;width:24px;height:24px;border-radius:50%;padding:2px;background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.r-avatar img{width:100%;height:100%;border-radius:50%;border:1.5px solid #fff;object-fit:cover}
.r-play{position:absolute;z-index:1;left:50%;top:50%;width:30px;height:30px;margin:-15px;color:#fff;opacity:.92}
.r-vues{position:absolute;z-index:1;left:8px;bottom:8px;width:16px;height:16px;color:#fff}
.r-play::before,.r-vues::before,.flotte-coeur::before{width:100%;height:100%}
.flotte-coeur{position:absolute;width:18px;height:18px;color:var(--rose-vif);right:22%;bottom:30%;opacity:0;animation:envol 3.2s ease-out infinite}
.flotte-coeur.c2{right:16%;animation-delay:1.1s;color:#FD5949;width:14px;height:14px}
.flotte-coeur.c3{right:27%;animation-delay:2.1s;color:var(--bonbon);width:16px;height:16px}
@keyframes penche{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(-2deg) translateY(-4px)}}

/* 440 abonnées : un profil, des copines qui gravitent */
.vis-abo .orbite{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border-radius:50%;border:1.5px dashed #E9B9C8;animation:tourne 22s linear infinite}
.vis-abo .orbite i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;overflow:hidden;border:2.5px solid #fff;box-shadow:0 6px 14px rgba(158,61,87,.18);transform:rotate(var(--a)) translateX(80px) rotate(calc(var(--a) * -1))}
.vis-abo .orbite img{width:100%;height:100%;object-fit:cover;animation:tourne 22s linear infinite reverse}
.vis-abo .profil{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px;border-radius:50%;padding:3px;background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.vis-abo .profil img{width:100%;height:100%;border-radius:50%;border:3px solid #fff;object-fit:cover}
.vis-abo .plus{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:14px 0 0 16px;border-radius:50%;background:var(--rose-deep);color:#fff;padding:6px;box-shadow:0 6px 14px rgba(158,61,87,.3);animation:pulse 2.4s ease-in-out infinite}
.vis-abo .plus::before{width:100%;height:100%}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,122,155,.55)}60%{box-shadow:0 0 0 12px rgba(224,122,155,0)}}

/* Toute l'année : douze mois qui s'allument tour à tour */
.vis-annee .cadran{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle,#FFF7FA 0 46%,transparent 47%)}
.vis-annee .cadran i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#F3D6E0;transform:rotate(calc(var(--m) * 30deg)) translateY(-68px);animation:mois 6s ease-in-out infinite;animation-delay:calc(var(--m) * .5s)}
.vis-annee .cadran i:nth-child(3n){width:18px;height:18px;margin:-9px}
.vis-annee .soleil{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;color:var(--or);animation:tourne 24s linear infinite}
.vis-annee .soleil::before{width:100%;height:100%}
@keyframes mois{0%,100%{background:#F3D6E0}8%,22%{background:var(--rose-vif);box-shadow:0 0 0 5px rgba(224,122,155,.18)}30%{background:var(--bonbon)}}

@media (max-width:760px){
.numbers{gap:12px}
.numbers>div{padding:18px 6px 24px;border-radius:30px}
.vis{transform:scale(.68);transform-origin:center top;height:172px;margin-bottom:-38px}
}
@media (prefers-reduced-motion:reduce){
.vis *,.vis img{animation:none!important;transition:none!important}.vis-foule i{transform:none}.vis-vues .ligne{stroke-dashoffset:0}.vis-vues .aire{opacity:1}
}
/* ajustements : colonnes égales, grappe placée à la main, mobile en zoom */
.numbers{grid-template-columns:repeat(4,minmax(0,1fr))}
.numbers strong{white-space:normal;font-size:calc(clamp(2.4rem,4vw,3.3rem) * var(--serif-k))}
.vis{width:240px;max-width:none}
.vis-foule{display:block;padding:0}
.vis-foule i{position:absolute;margin:0;width:54px;height:54px;left:calc(var(--x) * 1px - 27px);top:calc(var(--y) * 1px - 27px)}
.vis-foule i:nth-child(1){--x:48;--y:36}.vis-foule i:nth-child(2){--x:96;--y:36}.vis-foule i:nth-child(3){--x:144;--y:36}.vis-foule i:nth-child(4){--x:192;--y:36}
.vis-foule i:nth-child(5){--x:72;--y:84}.vis-foule i:nth-child(6){--x:120;--y:84}.vis-foule i:nth-child(7){--x:168;--y:84}
.vis-foule i:nth-child(8){--x:48;--y:132}.vis-foule i:nth-child(9){--x:96;--y:132}.vis-foule i:nth-child(10){--x:144;--y:132}.vis-foule i:nth-child(11){--x:192;--y:132}
@media (max-width:1100px){.vis{zoom:.85}}
@media (max-width:760px){.vis{transform:none;margin-bottom:16px;zoom:.62}}
.numbers strong{margin-top:0}
@media (max-width:760px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}.numbers strong{font-size:calc(2.2rem * var(--serif-k))}}
.numbers>div:nth-child(4) strong{font-size:calc(clamp(2rem,2.9vw,2.5rem) * var(--serif-k));padding:.2em 0}
@media (max-width:760px){.numbers>div:nth-child(4) strong{font-size:calc(1.75rem * var(--serif-k));padding:.15em 0}}

/* Fraunces en version douce (axe SOFT) pour tout ce qui utilise la serif */
h1,h2,h3,blockquote,.numbers strong,.brand b,.mono,.partners li,.join strong{font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 96}
h1,h2,.citation{letter-spacing:0}