:root{
  --cream:#FBF7EC; --cream-2:#F4ECDA; --ink:#152219; --mut:#6a6152; --line:#E7E1D0;
  --green:#1F7A54; --green-2:#155e40; --green-3:#0f4531; --olive:#6E7E38;
  --persimmon:#FF7A45; --gold:#FFC93C; --gold-soft:#FFD98A; --amber:#C98A34;
  --dusk-a:#243b6b; --dusk-b:#3a2b57; --dusk-c:#5b2f52;
  --hallo-1:#221635; --hallo-2:#A855F7; --hallo-3:#FF7518;
  --sky-1:#16303A; --sky-2:#2A5C48; --sky-3:#6E7E38; --sky-4:#C98A34;
  --font-display: ui-rounded,'SF Pro Rounded','Fredoka',system-ui,sans-serif;
  --font-serif: ui-serif,'New York',Georgia,'Times New Roman',serif;
  --font-body: system-ui,-apple-system,'Nunito Sans','Segoe UI',sans-serif;
  --wrap:1140px; --r-btn:15px; --r-card:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.1;text-wrap:balance}
h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px}
.btn{font-family:var(--font-display);font-weight:600;font-size:16px;border-radius:var(--r-btn);padding:14px 22px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;white-space:nowrap;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--persimmon);color:#fff;box-shadow:0 10px 24px -8px rgba(255,122,69,.55)}
.btn-gold{background:linear-gradient(120deg,var(--gold),#ffb638);color:#3a2a08;box-shadow:0 10px 24px -9px rgba(255,180,56,.7)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 10px 24px -10px rgba(31,122,84,.6)}
.btn-pink{background:linear-gradient(120deg,#ff7eb3,#ff4f81);color:#fff;box-shadow:0 12px 26px -10px rgba(255,79,129,.6)}
.btn-mini-pink{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:800;font-size:14px;padding:11px 20px;border-radius:999px;color:#fff;text-decoration:none;background:linear-gradient(120deg,#ff7eb3,#ff4f81);box-shadow:0 12px 24px -12px rgba(220,50,110,.6);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.btn-mini-pink:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(220,50,110,.72)}
.btn-outline{background:transparent;color:var(--green);border:1.6px solid var(--green)}
.btn-outline-l{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.55)}
.section{padding:clamp(56px,8vw,104px) 0}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:13px;padding:6px 13px;border-radius:999px}

.logo-chip{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,var(--sky-2),var(--sky-1));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.logo-chip img{width:32px;height:32px}
.logo-chip.sm{width:38px;height:38px;border-radius:10px}.logo-chip.sm img{width:29px;height:29px}

/* Bandeau saisonnier Halloween : ambiance violet → orange */
.sbanner{background:linear-gradient(90deg,#2b1450 0%,#6b2fa0 46%,#E4772A 100%);color:#fdeede;font-family:var(--font-display);font-weight:600;font-size:13.5px;text-align:center;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.sbanner a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.sbanner .npill{background:var(--gold);color:#3a2a08;font-weight:700;font-size:11px;padding:2px 8px;border-radius:6px}
.sbanner .sb-sm{display:none}
@media(max-width:640px){.sbanner{font-size:12.5px;padding:8px 12px;gap:8px}.sbanner .sb-lg{display:none}.sbanner .sb-sm{display:inline}}
.sbanner{position:relative;padding-right:40px}
.sbanner .sbx{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fdeede;opacity:.72;font-size:13px;line-height:1;cursor:pointer;padding:6px 9px;border-radius:6px}
.sbanner .sbx:hover{opacity:1;background:rgba(255,255,255,.16)}

.nav{position:sticky;top:0;z-index:50;background:rgba(251,247,236,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.nav-links{display:flex;gap:20px;margin-left:auto;font-family:var(--font-display);font-weight:500;font-size:14.5px}
.nav-links a{color:#4a4436;padding:6px 2px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--green);border-color:var(--gold)}
@media(max-width:980px){.nav-links{display:none}}

.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(178deg,var(--sky-1) 0%,var(--sky-2) 36%,var(--sky-3) 64%,var(--sky-4) 100%);padding:clamp(46px,7vw,80px) 0 clamp(80px,10vw,120px)}
.sun{position:absolute;width:320px;height:320px;border-radius:50%;left:44%;top:56%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,235,180,.9),rgba(255,201,60,.35) 42%,transparent 70%);filter:blur(6px);opacity:.8;pointer-events:none;animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translateX(-50%) scale(1.08);opacity:1}}
.aur{position:absolute;border-radius:50%;filter:blur(75px);opacity:.4;pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
.aur.a{width:420px;height:420px;background:#3fae7e;top:-140px;left:-90px}
.aur.b{width:360px;height:360px;background:var(--gold);bottom:-150px;right:-60px;animation-delay:-6s}
@keyframes drift{to{transform:translate(30px,24px) scale(1.1)}}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:160px;opacity:.95;z-index:3;pointer-events:none}
.trail{position:absolute;left:0;right:0;bottom:12px;width:100%;height:110px;pointer-events:none;z-index:3}
.hero-decor{position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;z-index:3}
.hero-decor .deco{position:absolute;bottom:24px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.28))}
.hero-decor .tree{bottom:26px}
.hero-decor .tree.sm{bottom:24px}
.hero-decor .bush{bottom:20px}
.hero-decor .bike{bottom:22px;opacity:.9}
@media(max-width:720px){.hero-decor .hide-sm,.hero-decor .bike{display:none}}
.particle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold-soft);opacity:.7;box-shadow:0 0 8px 2px rgba(255,217,138,.6);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-16px);opacity:.9}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.18fr .82fr;gap:40px;align-items:center;z-index:2}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:48px;text-align:center}}
/* Bloc gauche — modèle 6 « sections très espacées » + bandeau drapeau (image via hero.flag) */
.hero-left{display:flex;flex-direction:column;gap:34px;align-items:flex-start}
@media(max-width:920px){.hero-left{align-items:center;text-align:center;gap:26px}}
.hero-flag{display:inline-flex;flex-direction:column;gap:9px;align-items:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);border-radius:15px;padding:13px 16px;max-width:430px;box-shadow:0 12px 28px -18px rgba(0,0,0,.5)}
@media(max-width:920px){.hero-flag{align-items:center;text-align:center}}
.hero-flag .hf-flag{width:44px;height:30px;border-radius:6px;flex:0 0 auto;background:linear-gradient(90deg,#0055A4 0 33.3%,#fff 33.3% 66.6%,#EF4135 66.6%);box-shadow:0 3px 8px rgba(0,0,0,.35);background-size:cover;background-position:center}
.hero-flag .hf-tx{font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.42;color:#fff}
.hero-flag .hf-tx b{color:var(--gold-soft)}
.hero-left h1{margin-top:0}
.hero-left .slogan{margin:0;padding-left:16px;border-left:2.5px solid rgba(255,201,60,.55)}
.hero-left .slogan .q{display:inline-block;margin-bottom:4px;font-family:var(--font-display);font-weight:800;font-size:1.28em;line-height:1.15;color:var(--gold-soft);text-shadow:0 2px 20px rgba(255,178,64,.4)}
@media(max-width:920px){.hero-left .slogan{padding-left:0;border-left:0}}
.hero-left .stores{margin-top:0}
.hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,3.6vw,44px);line-height:1.12;letter-spacing:-.015em;margin-top:16px;color:#F7EAD0;text-shadow:0 2px 26px rgba(0,0,0,.28);white-space:nowrap}
@media(max-width:920px){.hero h1{white-space:normal;font-size:clamp(28px,7.6vw,40px)}}
.hero h1 .hl{color:#FFC65A;font-style:normal;text-shadow:0 2px 22px rgba(255,178,64,.32)}
@keyframes shimmerText{to{background-position:220% center}}
.hero .slogan{margin-top:16px;font-size:clamp(15px,1.9vw,18px);color:#e9e0cd;max-width:38ch;font-weight:600}
@media(max-width:920px){.hero .slogan{margin-inline:auto}}
.hero-ctas{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:920px){.hero-ctas{justify-content:center}}
.stores{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:920px){.stores{justify-content:center}}
.storebadge{display:inline-flex;align-items:center;gap:9px;background:#0b0b0d;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 14px;position:relative;transition:transform .2s}
.storebadge:hover{transform:translateY(-2px)}
.storebadge svg{width:22px;height:22px;flex:0 0 auto}
.storebadge .tx{line-height:1.15}.storebadge .tx .s{font-size:9.5px;opacity:.8;text-transform:uppercase;letter-spacing:.06em}.storebadge .tx .b{font-family:var(--font-display);font-weight:600;font-size:14px}
.storebadge .soon{position:absolute;top:-8px;right:-8px;background:var(--gold);color:#3a2a08;font-family:var(--font-display);font-weight:700;font-size:10px;padding:2px 7px;border-radius:6px}
/* icône remplacée par une image (logo store officiel = tout le bouton) */
.icon-img{width:1em;height:1em;object-fit:contain;vertical-align:middle}
.storebadge.has-icon-img{background:transparent;border:0;padding:0;box-shadow:none;overflow:visible}
.storebadge.has-icon-img .icon-img{width:auto;height:46px}
/* ruban rouge « Bientôt » par-dessus les badges stores importés (app pas encore publiée) */
.storebadge.has-icon-img::after{content:"Bientôt";position:absolute;top:-9px;right:-9px;background:#E5484D;color:#fff;font-family:var(--font-display);font-weight:700;font-size:10px;line-height:1;padding:4px 8px;border-radius:999px;box-shadow:0 3px 9px rgba(0,0,0,.4);letter-spacing:.03em;z-index:3;transform:rotate(4deg);pointer-events:none}
.soc-ico .icon-img{width:26px;height:26px}
.soc-pill .icon-img{width:20px;height:20px}
.chip .dico .icon-img{width:30px;height:30px}
.move-pts .ic .icon-img,.safe-list .si .icon-img{width:22px;height:22px}

.hero-visual{position:relative;min-height:420px;display:flex;justify-content:flex-end;align-items:center}
.photo-wrap{position:relative;display:inline-block;line-height:0}
/* Héro : téléphone en grand (l'écran = image téléchargeable via hero.phone) */
/* aspect-ratio 9:16 = format iPhone réaliste (photo à générer en 1080×1920) */
.hero-phone{position:relative;width:min(256px,36vw);aspect-ratio:9/16;background:#0b0c10;border-radius:42px;padding:8px;box-shadow:0 50px 90px -32px rgba(0,0,0,.72),inset 0 0 0 2px #2a2c31;flex:0 0 auto;margin-right:-4px}
.hero-phone .scr{border-radius:34px}
.hero-phone .scr .up{border-radius:30px}
.hero-phone .sbtn.pwr{top:150px;height:66px}
.hero-phone .sbtn.v1{top:108px;height:34px}
.hero-phone .sbtn.v2{top:150px;height:52px}
.hero-phone .island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:30%;height:16px;background:#000;border-radius:12px;z-index:6}
.hero-phone .sbtn{position:absolute;background:#2b2d33;border-radius:2px;width:3px;z-index:1}
.hero-phone .sbtn.pwr{right:-3px;top:118px;height:58px}
.hero-phone .sbtn.v1{left:-3px;top:92px;height:28px}
.hero-phone .sbtn.v2{left:-3px;top:128px;height:44px}
.hero-phone .scr{width:100%;height:100%;border-radius:27px;overflow:hidden;background:linear-gradient(180deg,#16281f,#0b1712);position:relative;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.hero-phone .scr .up{position:absolute;inset:14px;border:2px dashed rgba(255,201,60,.5);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:#dce9e0;padding:16px}
.hero-phone .scr .up .upic{font-size:34px}
.hero-phone .scr .up .upt{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff}
.hero-phone .scr .up .upd{font-size:11px;color:#9fb8ab;line-height:1.4}
.hero-phone .scr.has-img .up{display:none}
/* l'encadré « Défi photo » : un peu plus sur le téléphone, remonté (desktop) */
.hero-visual .glass-chip.game{left:auto;right:206px;top:14px}
.photo{width:min(390px,86vw);aspect-ratio:4/5;border-radius:26px;position:relative;overflow:hidden;background:linear-gradient(160deg,#cf9d54,#a8722f 55%,#5b4a2a);background-size:cover;background-position:center;border:5px solid rgba(255,255,255,.9);box-shadow:0 40px 80px -30px rgba(20,10,0,.6);transform:rotate(-3deg);margin-right:-16px}
.photo .frame{position:absolute;inset:12px;border:1.6px dashed rgba(255,255,255,.6);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:18px}
.photo .frame .em{font-size:50px}
.photo .frame .t{font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff}
.photo .frame .d{font-size:12.5px;color:rgba(255,255,255,.85);max-width:22ch}
.photo .eiffel{position:absolute;right:22px;bottom:18px;opacity:.5}
.photo.has-img .frame{display:none}
.glass-chip{position:absolute;left:-30px;top:30px;background:rgba(20,26,20,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:12px 15px;color:#fff;box-shadow:0 16px 34px -14px rgba(0,0,0,.6);transform:rotate(3deg);max-width:238px;z-index:3;overflow:visible}
.glass-chip.game{border-color:rgba(255,201,60,.5);animation:pulseGlow 2.6s ease-in-out infinite}
.glass-chip .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.glass-chip b{font-family:var(--font-display);font-size:13.5px;display:inline-flex;align-items:center;gap:5px}
.glass-chip .pts{font-family:var(--font-display);font-weight:700;font-size:12px;background:var(--gold);color:#2a2005;padding:3px 9px;border-radius:999px}
.glass-chip .s{font-size:12px;opacity:.92;margin-top:6px;line-height:1.42}
.glass-chip .gc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.16)}
.glass-chip .gc-like{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.glass-chip .gc-go{font-family:var(--font-display);font-weight:700;font-size:11px;background:var(--gold);color:#2a2005;padding:4px 11px;border-radius:999px;animation:floaty 2.2s ease-in-out infinite}
.glass-chip .floatheart{bottom:32px;font-size:15px}
.phone-mini{position:absolute;right:-90px;bottom:-16px;width:116px;aspect-ratio:1/2.06;background:#0c0c0f;border-radius:24px;border:2px solid #34363c;box-shadow:0 26px 54px -20px rgba(0,0,0,.8),inset 0 0 0 3px #000;padding:5px;z-index:4}
.phone-mini .scr{width:100%;height:100%;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#14261f,#0c1913);display:flex;flex-direction:column;position:relative}
.phone-mini .scr.has-img{background-size:cover;background-position:center}
.phone-mini .scr.has-img>*{display:none}
.phone-mini .pt{padding:24px 10px 6px;color:#dff0e6}
.phone-mini .pt .k{font-size:8px;letter-spacing:.1em;opacity:.6;font-family:var(--font-display);text-transform:uppercase}
.phone-mini .pt .t{font-family:var(--font-display);font-weight:700;font-size:12px;margin-top:2px}
.phone-mini .pmap{flex:1;margin:4px 8px;border-radius:11px;background:radial-gradient(circle at 30% 30%,rgba(22,183,154,.28),transparent 42%),radial-gradient(circle at 75% 72%,rgba(123,212,75,.24),transparent 42%),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px),#0e1c16;position:relative}
.phone-mini .pin{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--persimmon);box-shadow:0 0 0 3px rgba(255,122,69,.3);left:22%;bottom:26%}
.phone-mini .pc{margin:0 8px 10px;background:rgba(255,255,255,.1);border-radius:10px;padding:7px 8px;color:#eaf5ee;font-size:8.5px;font-family:var(--font-display);display:flex;justify-content:space-between;align-items:center}
.phone-mini .pc .pp{background:var(--gold);color:#241c05;font-weight:700;padding:2px 5px;border-radius:5px}
.phone-mini .island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:48px;height:15px;background:#000;border-radius:10px;z-index:6;box-shadow:0 0 0 1px #17181c}
.pm-btn{position:absolute;background:#2b2d33;border-radius:2px;z-index:1}
.pm-btn.pwr{right:-4px;top:60px;width:3px;height:32px}
.pm-btn.v1{left:-4px;top:46px;width:3px;height:16px}
.pm-btn.v2{left:-4px;top:68px;width:3px;height:24px}
.pm-btn.v3{left:-4px;top:98px;width:3px;height:24px}
.mini-label{position:absolute;right:-4px;bottom:-44px;font-family:var(--font-display);font-weight:600;font-size:11px;color:#e7ddc4;z-index:4}
/* Mobile : on empile verticalement — l'encadré « Défi photo » EN HAUT, puis
   la photo plus bas (sans se toucher), et le téléphone dans l'angle bas-droit
   de la photo (comme le mur de photos : encadré au-dessus, visuel en dessous). */
@media(max-width:920px){
  /* Mobile : encadré « Défi photo » en haut, téléphone en dessous.
     padding-bottom ≥ hauteur des collines (160px) pour que le téléphone
     finisse AU-DESSUS de la bande verte. */
  .hero{padding-bottom:clamp(172px,34vw,200px)}
  .hero-visual{flex-direction:column;align-items:center;justify-content:flex-start;gap:22px;min-height:0}
  /* mobile : l'encadré passe SOUS le téléphone (order:1), remonté un peu dessus */
  .hero-visual .glass-chip.game{position:relative;left:auto;top:auto;right:auto;bottom:auto;order:1;margin:-40px 0 0;z-index:5;max-width:300px;transform:rotate(-2deg)}
  .hero-phone{width:min(228px,62vw);margin:0;order:0}
}
@media(max-width:420px){.hero-phone{width:66vw}}

/* aperçu app : cadres iPhone (captures éditables via data-img) */
.shots{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.shot{width:190px;aspect-ratio:9/19;border-radius:26px;border:6px solid #05100c;background:linear-gradient(180deg,#16261f,#0c1913);background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 30px 60px -26px rgba(0,0,0,.7)}
.shot .ph{color:#8ba396;font-family:var(--font-display);font-weight:600;font-size:13px;padding:0 18px;line-height:1.4}
.shot.has-img .ph{display:none}
/* Mobile : regrouper les 4 écrans 2 par 2 (au lieu d'une colonne) */
@media(max-width:560px){.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;justify-items:center}.shot{width:100%;max-width:190px}}

.head{max-width:680px;margin:0 auto 44px}
.head.center{text-align:center}
.head .eyebrow{color:var(--persimmon)}
.head h1,.head h2{font-size:clamp(27px,3.7vw,42px);margin-top:12px;color:var(--green-2)}
.head p{margin-top:14px;color:var(--mut);font-size:18px}
.head.onDark .eyebrow{color:var(--gold-soft)}.head.onDark h1,.head.onDark h2{color:#fff}.head.onDark p{color:#cfe0d6}

.band-pine{background:linear-gradient(160deg,var(--green-2),var(--green-3));color:#eaf5ee}
.band-sky{background:linear-gradient(160deg,var(--sky-1),var(--sky-2));color:#eaf5ee}
.band-night{background:radial-gradient(120% 100% at 50% 0,#173026,#0e1c15);color:#eaf5ee}

.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin:0 auto}
@media(max-width:680px){.why-grid{grid-template-columns:1fr}}
.wcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px}
.wcard .e{width:62px;height:62px;border-radius:17px;background:linear-gradient(150deg,var(--gold-soft),var(--gold));display:flex;align-items:center;justify-content:center;font-size:31px;box-shadow:0 12px 26px -12px rgba(200,138,52,.7)}
.wcard h3{font-size:19px;margin-top:16px;color:#fff}
.wcard p{margin-top:7px;color:#cfe0d6;font-size:15px}
.uniq{max-width:820px;margin:0 auto;text-align:center;background:rgba(255,201,60,.12);border:1px solid rgba(255,217,138,.4);border-radius:18px;padding:22px}
.uniq b{color:var(--gold-soft);font-family:var(--font-display)}
.uniq .small{color:#9bb6a8;font-size:10.5px;margin-top:8px}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin:0 auto 24px}
@media(max-width:640px){.statrow{grid-template-columns:1fr}}
.statc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:24px 16px;text-align:center;transition:transform .2s,background .2s}
.statc:hover{transform:translateY(-4px);background:rgba(255,201,60,.12)}
.statc .num{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.4vw,40px);color:var(--gold-soft);font-variant-numeric:tabular-nums;line-height:1}
.statc .lab{color:#cfe0d6;font-size:14px;margin-top:8px}
/* trio de stats : coloriage progressif gauche→droite (comme les autres trios) */
.statrow .statc:nth-child(1){background:rgba(255,201,60,.07);border-color:rgba(255,217,138,.22)}
.statrow .statc:nth-child(2){background:rgba(255,178,88,.12);border-color:rgba(255,196,120,.3)}
.statrow .statc:nth-child(3){background:rgba(255,122,69,.17);border-color:rgba(255,150,95,.38)}
.statrow .statc:hover{background:rgba(255,201,60,.2)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
/* --- Trios : SOMBRE PREMIUM + icône dorée flottante (halo pulsé, reliefs, hover) --- */
.steps,.souv{margin-top:58px}
.step,.souvcard{position:relative;border-radius:22px;padding:54px 24px 26px;text-align:center;overflow:visible;isolation:isolate;background:linear-gradient(168deg,#1b3529 0%,#12241b 55%,#0d1c14 100%);border:1px solid rgba(246,196,83,.22);box-shadow:0 34px 64px -26px rgba(0,0,0,.7),0 6px 18px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);transition:transform .28s cubic-bezier(.34,1.4,.64,1),box-shadow .3s}
.step::before,.souvcard::before{content:"";position:absolute;left:0;right:0;top:0;height:60%;border-radius:22px 22px 40px 40px;pointer-events:none;background:radial-gradient(120% 80% at 50% -15%,rgba(246,196,83,.2),transparent 62%)}
.step::after,.souvcard::after{content:"";position:absolute;left:16%;right:16%;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(246,196,83,.85),transparent)}
.step:hover,.souvcard:hover{transform:translateY(-8px);box-shadow:0 44px 80px -26px rgba(0,0,0,.8),0 8px 22px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.step .ico,.souvcard .e{position:absolute;z-index:3;top:-36px;left:50%;transform:translateX(-50%);width:74px;height:74px;border-radius:21px;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0;background:radial-gradient(circle at 36% 28%,#FFE9A8,#F5B301 72%);border:1px solid rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(246,196,83,.45),0 0 34px 2px rgba(246,196,83,.5),0 18px 32px -8px rgba(150,100,10,.8),inset 0 2px 4px rgba(255,255,255,.6),inset 0 -3px 6px rgba(150,90,0,.5);animation:glowPulse 3.2s ease-in-out infinite}
.step .ico .icon-img,.souvcard .e .icon-img{width:34px;height:34px}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 1px rgba(246,196,83,.45),0 0 30px 1px rgba(246,196,83,.42),0 18px 32px -8px rgba(150,100,10,.8),inset 0 2px 4px rgba(255,255,255,.6),inset 0 -3px 6px rgba(150,90,0,.5)}50%{box-shadow:0 0 0 1px rgba(246,196,83,.45),0 0 48px 7px rgba(246,196,83,.85),0 20px 36px -8px rgba(150,100,10,.85),inset 0 2px 4px rgba(255,255,255,.7),inset 0 -3px 6px rgba(150,90,0,.5)}}
.step h3,.souvcard h3{font-family:var(--font-display);font-weight:700;font-size:19.5px;color:#fff;margin:2px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.step p,.souvcard p{color:#a9c2b5;font-size:14px;margin:9px 0 0;line-height:1.55}
.step .n{position:absolute;top:16px;right:16px;font-family:var(--font-display);font-weight:800;font-size:13px;width:28px;height:28px;border-radius:9px;background:rgba(246,196,83,.16);color:var(--gold-soft);border:1px solid rgba(246,196,83,.35);display:flex;align-items:center;justify-content:center;margin:0}

.hero-mode{background:linear-gradient(168deg,#173F31 0%,#2A5C48 32%,#6E7E38 60%,#C97A34 90%,#E7A34E 100%);color:#fff;border-radius:var(--r-card);padding:clamp(30px,4vw,46px);position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
@media(max-width:820px){.hero-mode{grid-template-columns:1fr}}
.hero-mode>div,.hero-mode>.submodes{position:relative;z-index:2}
.hero-mode .tag{background:rgba(255,255,255,.2);color:#fff;margin-bottom:14px;backdrop-filter:blur(6px)}
.hero-mode h3{font-size:clamp(28px,3.6vw,40px);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.32)}
.hero-mode .d{margin-top:12px;font-size:16.5px;max-width:44ch;color:#f3ede1}
.submodes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
@media(max-width:520px){.submodes{grid-template-columns:1fr}}
.sm2{background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:14px;padding:14px 16px}
.sm2 .h{font-family:var(--font-display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px;color:#fff}
.sm2 .p{font-size:13px;color:rgba(255,255,255,.9);margin-top:3px}
.sm2.zen{background:rgba(18,58,44,.6);border-color:rgba(255,255,255,.28)}
.grouprow{margin-top:16px;font-family:var(--font-display);font-weight:600;font-size:14px;color:#fde6cf}
.hm-sun{position:absolute;width:240px;height:240px;border-radius:50%;left:32%;bottom:-92px;background:radial-gradient(circle,rgba(255,236,182,.92),rgba(255,201,60,.32) 46%,transparent 72%);filter:blur(4px);animation:breathe 9s ease-in-out infinite alternate;pointer-events:none;z-index:0}
.hm-hills{position:absolute;left:0;right:0;bottom:0;height:78px;opacity:.8;z-index:0}
.hm-p{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 8px 2px rgba(255,217,138,.7);animation:float 7s ease-in-out infinite;z-index:1}
.live-strip{margin-top:22px;background:linear-gradient(150deg,var(--dusk-a),var(--dusk-c));color:#efe9f5;border-radius:18px;padding:20px 24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.live-strip .badge2{background:rgba(255,255,255,.18);font-family:var(--font-display);font-weight:700;font-size:11px;padding:4px 10px;border-radius:8px}
.live-strip h4{font-size:18px;color:#fff}
.live-strip p{color:#cfc6e0;font-size:14px;margin-top:3px}

.chips{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;max-width:692px;margin:0 auto}
.chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:7px;width:160px;min-height:202px;transition:transform .2s,background .2s}
.chip:hover{transform:translateY(-4px);background:rgba(255,201,60,.16)}
.chip .ico{font-size:26px}
.chip:hover .ico{animation:bob .6s ease-in-out}
.chip .dico{width:50px;height:50px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.55)}
.chip .dico svg{width:27px;height:27px;fill:#fff}
.chip:hover .dico{animation:bob .6s ease-in-out}
.chip .l{font-family:var(--font-display);font-weight:700;font-size:14.5px}
.chip .s{font-size:12px;opacity:.8;text-align:center}
.chip .badge3{margin-top:auto;font-size:11px;background:rgba(255,201,60,.16);border:1px solid rgba(255,201,60,.34);color:#F6C453;padding:3px 12px;border-radius:999px;font-family:var(--font-display);font-weight:700;letter-spacing:.02em;text-align:center}
.unlock-note{text-align:center;margin-top:28px}
.unlock-note .ul-pill{display:inline-flex;align-items:center;gap:12px;padding:9px 22px 9px 9px;border-radius:999px;background:linear-gradient(120deg,rgba(255,201,60,.16),rgba(255,255,255,.05));border:1px solid rgba(255,201,60,.32);box-shadow:0 14px 32px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);font-family:var(--font-display);font-weight:600;font-size:14px;color:#f3e9d0;backdrop-filter:blur(6px)}
.unlock-note .ul-lock{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,201,60,.07);border:1.5px dashed rgba(255,201,60,.5);color:var(--gold);flex:0 0 auto}
.unlock-note .ul-lock svg{width:15px;height:15px}
/* Variante sur fond clair (ex. sous les badges « moments forts ») */
.unlock-note.on-light .ul-pill{position:relative;overflow:hidden;color:var(--gold-soft);background:linear-gradient(150deg,#1c5138,#0f2f21 55%,#0b241a);border:1px dashed rgba(255,201,60,.38);box-shadow:none;font-weight:600;font-size:13.5px;padding:8px 20px 8px 8px;opacity:.92}
/* Voile « à débloquer » léger : fin hachurage diagonal (texture verrouillé), discret. */
.unlock-note.on-light .ul-pill::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 5px,transparent 5px 11px)}

.pk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.pk-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pk-grid{grid-template-columns:1fr}}
.pk{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s}
.pk:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(200,138,52,.4)}
.pk.hl{border:2px solid var(--hallo-3);box-shadow:0 18px 40px -20px rgba(255,117,24,.5)}
.pk-img{aspect-ratio:16/9;position:relative;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px}
.pk-img .theme{font-family:var(--font-display);font-weight:700;font-size:12px;color:#fff;background:rgba(0,0,0,.28);padding:4px 10px;border-radius:8px;transition:transform .25s}
.pk:hover .pk-img .theme{transform:translateY(-2px)}
.pk-img .st{position:absolute;top:12px;right:12px;font-family:var(--font-display);font-weight:700;font-size:11px;padding:5px 11px;border-radius:8px;text-transform:uppercase;letter-spacing:.04em}
.st-test{background:var(--gold);color:#2a2005}.st-prep{background:#fff;color:var(--green)}.st-soon{background:rgba(255,255,255,.9);color:var(--mut)}.st-hallo{background:var(--hallo-3);color:#fff}
.st-theme{background:var(--gold);color:#2a2005}.st-live{background:#6b2fa0;color:#fff}
/* Cartes « événements spéciaux » — ça bouge */
/* Halloween : flicker de lumière sur l'image */
.pk-hallo .pk-img{animation:halloflicker 4.5s ease-in-out infinite}
@keyframes halloflicker{0%,46%,54%,100%{filter:brightness(1)}48%{filter:brightness(1.18)}50%{filter:brightness(.9)}52%{filter:brightness(1.12)}}
/* Pulsation sur la carte ENTIÈRE — Halloween (orange) & Live/Vincennes (violet) */
.pk-hallo{animation:cardpulseHallo 1.9s ease-out infinite}
@keyframes cardpulseHallo{0%{box-shadow:0 0 0 0 rgba(255,117,24,.5),0 18px 40px -22px rgba(255,117,24,.5)}70%{box-shadow:0 0 0 13px rgba(255,117,24,0),0 18px 40px -22px rgba(255,117,24,.45)}100%{box-shadow:0 0 0 0 rgba(255,117,24,0),0 18px 40px -22px rgba(255,117,24,.45)}}
.pk-live{border:2px solid #6b2fa0;animation:cardpulseLive 1.9s ease-out infinite}
@keyframes cardpulseLive{0%{box-shadow:0 0 0 0 rgba(107,47,160,.55),0 18px 40px -22px rgba(107,47,160,.5)}70%{box-shadow:0 0 0 13px rgba(107,47,160,0),0 18px 40px -22px rgba(107,47,160,.45)}100%{box-shadow:0 0 0 0 rgba(107,47,160,0),0 18px 40px -22px rgba(107,47,160,.45)}}
@media(prefers-reduced-motion:reduce){.pk-hallo,.pk-live,.pk-hallo .pk-img{animation:none}}
.pk-body{padding:16px 18px}
.pk-body h3{font-size:18px;color:var(--ink)}
.pk-body p{margin-top:6px;color:var(--mut);font-size:14.5px}
/* Carte « Proposez un quartier » : liseré doré qui tourne pour donner envie de cliquer */
@property --dqang{syntax:'<angle>';initial-value:0deg;inherits:false}
.pk-cta{border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--dqang),#F5B301,#FFE7A8,#E79340,#FFD86B,#F5B301) border-box;animation:dqspin 4.5s linear infinite;box-shadow:0 20px 44px -22px rgba(245,179,1,.55)}
.pk-cta:hover{transform:translateY(-4px);box-shadow:0 26px 50px -20px rgba(245,179,1,.7)}
@keyframes dqspin{to{--dqang:360deg}}
@media(prefers-reduced-motion:reduce){.pk-cta{animation:none;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#F5B301,#E79340) border-box}}
.pk-cta .pk-body h3{color:var(--green-2)}
.pk-cta .pk-body p{color:#C8892C;font-weight:600}

.dog-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center}
@media(max-width:820px){.dog-grid{grid-template-columns:1fr}}
.dogcard{position:relative;border-radius:var(--r-card);padding:26px 24px 24px;box-shadow:0 20px 44px -26px rgba(200,138,52,.6);max-width:340px;margin:0 auto;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#F6D18C,#F5B301 55%,#E79340) border-box}
.dogcard .dogcard-av{position:relative;width:110px;margin:2px auto 0}
.dogcard .av{width:110px;height:110px;border-radius:50%;background:linear-gradient(160deg,var(--gold-soft),var(--gold));display:flex;align-items:center;justify-content:center;font-size:52px;border:4px solid #fff;box-shadow:0 12px 26px -10px rgba(200,138,52,.7),0 0 0 3px #F5B301;background-size:cover;background-position:center;overflow:hidden}
.dogcard .av.has-img .ph{display:none}
.dogcard .pts-pop{position:absolute;top:92px;font-family:var(--font-display);font-weight:800;font-size:15px;white-space:nowrap;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.14);opacity:0;animation:pointsrise 3.4s ease-out infinite}
.dogcard .pts-pop.p1{left:18px;color:#2FB86B}
.dogcard .pts-pop.p2{left:24px;color:#F5A201;animation-delay:.3s}
.dogcard .pts-pop.p3{left:14px;color:#F65C9C;animation-delay:.6s}
.dogcard .pts-pop.p4{left:26px;color:#4FA8FF;animation-delay:.9s}
@keyframes pointsrise{0%{opacity:0;transform:translateY(12px) scale(.8)}11%{opacity:1;transform:translateY(0) scale(1)}74%{opacity:1}100%{opacity:0;transform:translateY(-192px) scale(1.12)}}
/* Variante « mockup téléphone » : vraie capture de l'app à la place de la carte. */
.dogcard.is-phone{padding:0;border:none;background:none;box-shadow:none;max-width:222px}
.dogcard.is-phone .dogshot{width:100%;height:auto;display:block;border-radius:32px;box-shadow:0 26px 56px -26px rgba(0,0,0,.55),0 0 0 7px #0c1a13,0 0 0 8px rgba(255,255,255,.06)}
.dogcard.is-phone .pts-pop{top:96px;z-index:2}

/* ===== Profil du chien CODÉ, FIDÈLE au code Flutter (_DogProfilePreview) =====
   Valeurs de l'app mises à l'échelle ~0.617 (écran app 402pt → écran mock 248px). */
.dphone{position:relative;width:100%;max-width:264px;margin:0 auto;border-radius:40px;
  background:linear-gradient(#161d1a,#0a120e);padding:8px;
  box-shadow:0 34px 66px -26px rgba(0,0,0,.6),inset 0 0 0 2px #202b26,0 0 0 1px rgba(255,255,255,.04)}
.dphone .dp-scr{position:relative;width:100%;border-radius:32px;overflow:hidden;color:#ECF4EE;isolation:isolate;
  background:linear-gradient(180deg,#123448,#0E241A 46%,#081711);display:flex;flex-direction:column}
/* halos aurora atténués (green .34 / teal .28 / doré .12) */
.dphone .dp-scr::before,.dphone .dp-scr::after,.dphone .dp-blob{content:"";position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.dphone .dp-scr::before{width:142px;height:142px;left:-52px;bottom:68px;background:radial-gradient(circle,rgba(37,192,138,.34),transparent 70%)}
.dphone .dp-scr::after{width:148px;height:148px;right:-59px;bottom:22px;background:radial-gradient(circle,rgba(26,166,201,.28),transparent 70%)}
.dphone .dp-blob{width:130px;height:130px;left:32%;bottom:-47px;background:radial-gradient(circle,rgba(231,154,43,.12),transparent 70%)}
.dphone .dp-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:74px;height:15px;border-radius:11px;background:#0a120e;z-index:6}
.dphone .dp-hero{position:relative;z-index:1;width:100%;aspect-ratio:5/6;flex:0 0 auto;overflow:hidden}
.dphone .dp-photo{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.dphone .dp-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,23,15,0) 18%,rgba(10,23,15,.49) 50%,rgba(8,21,17,.97) 90%,#081711 100%)}
.dphone .dp-cap{position:absolute;left:12px;right:12px;bottom:4px;z-index:2}
.dphone .dp-name{font-family:var(--font-display);font-weight:800;font-size:23px;line-height:.92;color:#fff;letter-spacing:-.8px;text-shadow:0 1px 11px rgba(0,0,0,.6)}
.dphone .dp-tag{display:inline-flex;flex-direction:column;align-items:center;margin-top:3px}
.dphone .dp-conq{display:flex;align-items:center;gap:5px;line-height:1;font-family:var(--font-display);font-weight:800;letter-spacing:1.5px;font-size:9.3px;background:linear-gradient(to top right,#FFE9A8,#FFC93C,#E79A2B);-webkit-background-clip:text;background-clip:text;color:transparent}
.dphone .dp-conq i{width:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#FFC93C)}
.dphone .dp-conq i:last-child{background:linear-gradient(90deg,#FFC93C,transparent)}
.dphone .dp-kick{margin-top:4px;line-height:1;font-family:var(--font-display);font-weight:800;letter-spacing:1px;font-size:6.8px;color:#7FF0C2;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.dphone .dp-medal{position:absolute;right:9px;bottom:11px;z-index:3;width:32px;height:32px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3A2A08;
  background:radial-gradient(circle at 35% 30%,#FFEEB0,#FFC93C 50%,#E79A2B);border:2px solid rgba(255,255,255,.7);box-shadow:0 4px 9px -3px rgba(0,0,0,.6)}
.dphone .dp-medal::before{content:"";position:absolute;inset:2px;border-radius:50%;opacity:.5;pointer-events:none;
  background:conic-gradient(rgba(255,255,255,.6),transparent 12%,rgba(0,0,0,.12) 22%,transparent 32%,rgba(255,255,255,.6) 50%,transparent 62%,rgba(0,0,0,.12) 72%,transparent 82%,rgba(255,255,255,.6))}
.dphone .dp-medal .dp-ring{position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #FFC93C;opacity:0;animation:dpPulse 2.4s ease-out infinite}
.dphone .dp-medal b{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;font-size:12.3px;line-height:.8}
.dphone .dp-medal b sup{font-size:6px}
.dphone .dp-medal span{position:relative;z-index:1;font-weight:800;font-size:5px;margin-top:1px}
@keyframes dpPulse{0%{transform:scale(1);opacity:.55}70%{opacity:0}100%{transform:scale(1.42);opacity:0}}
.dphone .dp-body{position:relative;z-index:1;flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;padding:8px 10px 13px}
.dphone .dp-chips{display:flex;gap:5px}
.dphone .dp-chip{flex:0 0 auto;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,201,60,.25);font-size:7.8px;font-weight:700;color:#F5F1E6}
.dphone .dp-tiles{display:flex;gap:5.5px}
.dphone .dp-tile{flex:1;text-align:center;padding:8px 3px 6px;border-radius:10px;background:linear-gradient(135deg,rgba(27,62,44,.85),rgba(13,37,25,.85));border:1px solid rgba(255,255,255,.16);position:relative}
.dphone .dp-tile::before{content:"";position:absolute;top:0;left:29%;right:29%;height:2px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,#FFC93C,transparent)}
.dphone .dp-tile b{display:block;font-family:var(--font-display);font-weight:800;font-size:12.3px;line-height:1;margin-bottom:2px;
  background:linear-gradient(180deg,#fff,#FFE9BF);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.dphone .dp-tile span{display:block;font-size:5.9px;line-height:1;font-weight:800;letter-spacing:.6px;color:#AFC3B7}
.dphone .dp-bcard{padding:6px 7px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.024));border:1px solid rgba(255,255,255,.11)}
.dphone .dp-bh{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.dphone .dp-bh b{font-family:var(--font-display);font-weight:800;font-size:8.6px;color:#ECF4EE}
.dphone .dp-prog{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.dphone .dp-prog i{display:block;height:100%;width:33%;border-radius:3px;background:linear-gradient(90deg,#FFC93C,#E79A2B);box-shadow:0 0 6px rgba(255,201,60,.5)}
.dphone .dp-bh em{font-style:normal;font-weight:800;font-size:7.1px;color:#FFC93C;font-variant-numeric:tabular-nums}
.dphone .dp-coins{display:flex;justify-content:space-between;gap:3px}
.dphone .dp-coin{flex:1 1 0;min-width:0;text-align:center}
.dphone .dp-disc{width:28px;height:28px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;
  background:radial-gradient(circle at 33% 28%,#1c5138,#12402c 52%,#0b241a);border:1.6px solid #FFC93C;box-shadow:0 4px 8px -4px rgba(0,0,0,.65)}
.dphone .dp-coin.lock .dp-disc{background:rgba(255,255,255,.05);border:1.6px dashed rgba(255,255,255,.2);color:rgba(255,255,255,.35);font-size:10px;box-shadow:none}
.dphone .dp-disc svg{width:56%;height:56%}
.dphone .dp-bn{margin-top:2px;font-size:5px;line-height:1.05;font-weight:700;color:#AFC3B7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:9px}
.dphone .dp-coin.lock .dp-bn{color:#7E958A}
.dphone .dp-cta{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:11px;background:linear-gradient(180deg,#123c2a,#0b241a);border:1px solid rgba(255,201,60,.33);color:#FFC93C;box-shadow:0 10px 20px -12px rgba(0,0,0,.8)}
.dphone .dp-ico{font-size:14px}
.dphone .dp-cta b{font-family:var(--font-display);font-weight:800;font-size:8.3px;display:block;line-height:1.05}
.dphone .dp-cta em{font-style:normal;font-size:6.8px;color:#C9A45A;display:block;line-height:1.05;margin-top:2px}
.dphone .dp-go{margin-left:auto;font-size:13.5px}
.dogcard .nm{text-align:center;font-family:var(--font-display);font-weight:700;font-size:22px;margin-top:12px;color:var(--ink)}
.dogcard .meta{display:flex;justify-content:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.dogcard .meta span{background:var(--cream-2);color:var(--mut);font-size:12.5px;font-family:var(--font-display);font-weight:600;padding:4px 10px;border-radius:8px}
.rankpill{display:inline-block;background:linear-gradient(120deg,#FFE79A,#F5B301);color:#3a2a08;font-family:var(--font-display);font-weight:700;font-size:13px;padding:5px 13px;border-radius:999px;animation:pulseGlow 2.6s ease-in-out infinite}
.bdg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:520px){.bdg{grid-template-columns:repeat(2,1fr)}}
.badge{text-align:center}
/* Médaille au langage de l'app : face vert-nuit + anneau doré + reflet au survol. */
.badge .disc{position:relative;overflow:hidden;width:66px;height:66px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,#1c5138,#12402c 52%,#0b241a);
  border:2px solid var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.5),inset 0 1px 3px rgba(255,255,255,.28),0 0 0 4px rgba(255,201,60,.08);
  transition:transform .2s}
.badge:hover .disc{transform:translateY(-5px)}
.badge .disc .bi{width:30px;height:30px;display:block}
.badge .disc::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:44%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg)}
.badge:hover .disc::after{animation:badgeshine .75s ease}
@keyframes badgeshine{to{left:120%}}
.badge:nth-child(2) .disc{animation-delay:.35s}.badge:nth-child(3) .disc{animation-delay:.7s}.badge:nth-child(4) .disc{animation-delay:1.05s}.badge:nth-child(5) .disc{animation-delay:.2s}.badge:nth-child(6) .disc{animation-delay:.55s}.badge:nth-child(7) .disc{animation-delay:.9s}.badge:nth-child(8) .disc{animation-delay:1.25s}
.badge .bn{margin-top:8px;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink)}

.feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;align-items:start}
.feed-photo{grid-column:1;grid-row:1;display:flex;justify-content:center;align-items:flex-start}
.feed-extra{grid-column:1;grid-row:2;align-self:start}
.glass-chip.feed-chip{position:relative;left:auto;top:auto;bottom:auto;margin:0;max-width:300px;transform:rotate(-2deg) scale(1.05);transform-origin:center top}
.feedmock{grid-column:2;grid-row:1 / span 2;align-self:start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Mobile : la media query DOIT venir après la règle de base .feedmock ci-dessus,
   sinon (ordre source égal) le grid-column:2 l'emporte et le mur s'écrase à ~46px. */
@media(max-width:820px){.feed-grid{grid-template-columns:1fr}.feed-photo,.feedmock,.feed-extra{grid-column:1;grid-row:auto}.feedmock{grid-row:auto}.feed-photo{justify-content:center}}
.fcell{border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#26301f,#171b12);aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.fcell .e{font-size:34px}
.fcell .rx{position:absolute;bottom:7px;left:7px;display:flex;gap:6px;font-family:var(--font-display);font-weight:700;font-size:10.5px;z-index:4}
.fcell .rx span{background:rgba(0,0,0,.5);color:#fff;padding:2px 6px;border-radius:6px}
.share-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.soc-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;border-radius:13px;padding:11px 17px;font-family:var(--font-display);font-weight:700;font-size:14px;box-shadow:0 12px 26px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(7px);transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s;cursor:pointer}
.soc-pill:hover{transform:translateY(-3px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
/* Mobile : les 3 réseaux tiennent sur une seule ligne */
@media(max-width:520px){.share-row{flex-wrap:nowrap;gap:8px}.soc-pill{flex:1 1 0;min-width:0;justify-content:center;padding:11px 4px;font-size:12px;gap:6px}.soc-pill svg{width:18px;height:18px}}
.soc-pill svg{width:22px;height:22px}
.feat-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.feat-list li{display:flex;gap:10px;align-items:flex-start;color:#cfe0d6;font-size:15.5px}
.feat-list .i{font-size:18px}
.floatheart{position:absolute;font-size:17px;animation:riseheart 3.2s ease-in infinite;pointer-events:none;z-index:3}
/* essaim de réactions qui montent (❤️🏆💬⭐) — « tout le monde clique » */
.freact{position:absolute;pointer-events:none;z-index:2;opacity:0;animation:risereact 3.6s ease-in infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
@keyframes risereact{0%{opacity:0;transform:translateY(10px) scale(.4)}14%{opacity:1;transform:translateY(0) scale(1)}72%{opacity:.95}100%{opacity:0;transform:translateY(-94px) scale(1.22)}}
.likeval{display:inline-block}
.likeval.bump{animation:likebump .45s ease}
@keyframes likebump{0%{transform:scale(1)}40%{transform:scale(1.5);color:#ff5a5f}100%{transform:scale(1)}}

.souv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:800px){.souv{grid-template-columns:1fr}}
/* .souvcard : voir « Trios premium » plus haut (carte + pastille partagées) */
.loyalty{display:flex;justify-content:center;gap:8px;margin-top:14px}
.loyalty .st{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:1.5px dashed var(--line)}
.loyalty .st.on{background:var(--gold);border:0;color:#3a2a08}
.loyalty .st.logo{background:linear-gradient(150deg,var(--sky-2),var(--sky-1));border:0;padding:4px;width:28px;height:28px}
.loyalty .st.logo img{width:100%;height:100%;object-fit:contain}

.safe{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:end}
@media(max-width:820px){.safe{grid-template-columns:1fr}}
.safe-list{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.safe-list{grid-template-columns:1fr}}
.safe-list li{display:flex;gap:12px;align-items:center;font-size:14.5px;font-weight:600;color:#fff;background:linear-gradient(168deg,#1b3529 0%,#12241b 55%,#0d1c14 100%);border:1px solid rgba(246,196,83,.22);border-radius:14px;padding:12px 14px;box-shadow:0 18px 34px -20px rgba(0,0,0,.6);transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .2s}
.safe-list li:hover{transform:translateY(-3px);box-shadow:0 24px 40px -18px rgba(0,0,0,.65)}
.safe-list li .si{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE79A,#F5B301);border:1px solid rgba(255,201,60,.65);display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;box-shadow:0 5px 12px -4px rgba(200,138,52,.65),inset 0 1px 0 rgba(255,255,255,.4)}
.paw-card{background:linear-gradient(160deg,#FBEFD3,#F3E0BC);border:1px solid #ecdcbb;border-radius:var(--r-card);padding:34px;text-align:center;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;margin-top:34px}
/* Juste l'image, angles arrondis, aucun encadré derrière.
   Desktop : s'étire à la hauteur de la colonne de gauche → bas aligné aux 6 encadrés.
   Mobile : format paysage pleine largeur. */
.paw-card.has-img{background-size:cover;background-position:center;border:0;padding:0;min-height:0;margin-top:0;align-self:stretch;box-shadow:0 24px 50px -30px rgba(20,40,30,.5)}
.paw-card.has-img>*{display:none}
@media(max-width:820px){.paw-card.has-img{align-self:auto;aspect-ratio:16/10}}
.paw-card .big{font-size:60px}
.paw-card p{margin-top:10px;color:#6b5330;font-weight:600;font-family:var(--font-display)}
/* bloc « Télécharger l'app » (accueil) : badges centrés */
.dl-stores{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:24px}
/* Bandeau de consentement (Microsoft Clarity — heatmaps). Refuser = aussi simple qu'Accepter. */
.dq-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#16303A;color:#eaf3ee;padding:14px 18px;box-shadow:0 -8px 24px rgba(0,0,0,.32);display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;font-size:13.5px;animation:consentUp .35s ease}
@keyframes consentUp{from{transform:translateY(100%)}to{transform:none}}
.dq-consent p{margin:0;max-width:660px;line-height:1.45}
.dq-consent a{color:var(--gold-soft);text-decoration:underline}
.dq-consent .cbtns{display:flex;gap:10px;flex-shrink:0}
.dq-consent button{border:0;border-radius:10px;padding:9px 20px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.dq-consent .acc{background:var(--gold);color:#3a2a08}
.dq-consent .ref{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
@media(prefers-reduced-motion:reduce){.dq-consent{animation:none}}
/* --- Notifications bien-être flottantes (page ton-chien) — sans téléphone, décalées + mouvement --- */
.notif-slot{align-self:center;width:100%;transform:translateY(46px)}
.nfeed{display:flex;flex-direction:column;gap:16px;max-width:430px;margin:0 auto}
.nwrap{width:min(300px,88%)}
.nwrap.off1{margin-left:0;margin-right:auto;position:relative}
.nwrap.off2{margin-left:auto;margin-right:0}
.nwrap.off3{margin-left:11%;margin-right:auto}
/* entrée « depuis le haut » (surcharge du reveal générique bas→haut) */
.nwrap.reveal{transform:translateY(-26px)}
.nwrap.reveal.in{transform:none}
/* la carte flotte en continu, chacune à son propre rythme */
.nnote{display:flex;align-items:stretch;background:#fff;border:1px solid #E1EAE1;border-radius:16px;box-shadow:0 16px 34px -14px rgba(20,40,30,.45);overflow:hidden;animation:nfloat 4.8s ease-in-out infinite}
.nwrap.off2 .nnote{animation-duration:5.4s;animation-delay:-1.7s}
.nwrap.off3 .nnote{animation-duration:5.1s;animation-delay:-3.1s}
@keyframes nfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.nnote .nbar{width:4px;flex:0 0 4px}
.nnote .nin{display:flex;gap:10px;padding:11px 11px 12px 12px;flex:1;align-items:flex-start}
.nnote .nic{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.nnote .nbd{flex:1;min-width:0}
.nnote .nhead{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.nnote .nhead .app{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9AA69E}
.nnote .nhead .when{font-size:10px;color:#9AA69E;margin-left:auto}
.nnote .nt{font-size:14px;font-weight:800;color:#1B241F;line-height:1.2;letter-spacing:-.01em}
.nnote .nb{font-size:12.5px;color:#566159;line-height:1.32;margin-top:2px}
.nnote .nx{flex:0 0 auto;color:#9AA69E;font-size:15px;line-height:1;padding:1px}
.nnote.k-info .nbar,.nnote.k-info .nic{background:#1E6E4C}
.nnote.k-warning .nbar,.nnote.k-warning .nic{background:#D6A32E}
.nnote.k-success .nbar,.nnote.k-success .nic{background:#2E9E5E}
/* cloche « nouvelle notif » sur la 1re carte : elle sonne (tilt) + petites ondes sonores */
.nbell{position:absolute;top:-15px;left:-13px;z-index:5;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #E1EAE1;box-shadow:0 10px 20px -8px rgba(20,40,30,.55);display:flex;align-items:center;justify-content:center;font-size:18px;transform-origin:50% 7px;animation:nbellring 3.4s ease-in-out infinite}
.nbell::before,.nbell::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(30,110,76,.55);opacity:0;animation:nbellwave 3.4s ease-out infinite}
.nbell::after{animation-delay:.18s}
@keyframes nbellring{0%,66%,100%{transform:rotate(0)}70%{transform:rotate(17deg)}74%{transform:rotate(-14deg)}78%{transform:rotate(11deg)}82%{transform:rotate(-8deg)}86%{transform:rotate(5deg)}90%{transform:rotate(-3deg)}94%{transform:rotate(1deg)}}
@keyframes nbellwave{0%,66%{opacity:0;transform:scale(.55)}72%{opacity:.75;transform:scale(.95)}100%{opacity:0;transform:scale(1.7)}}
@media(max-width:820px){.nfeed{max-width:none}.nwrap{width:min(340px,94%)}.nwrap.off3{margin-left:7%}.notif-slot{transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.nnote,.nbell,.nbell::before,.nbell::after{animation:none}}

.partners{background:linear-gradient(150deg,#2c2415,#3a2c17);color:#f3ecdb;border-radius:var(--r-card);padding:clamp(36px,5vw,56px);display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"text img" "cta img";gap:14px 36px;align-items:start}
.partners-text{grid-area:text}
.partners .pbox{grid-area:img;align-self:center}
.partners-cta{grid-area:cta;justify-self:start;align-self:end;margin-top:8px}
@media(max-width:820px){.partners{grid-template-columns:1fr;grid-template-areas:"text" "img" "cta";gap:22px}.partners-cta{justify-self:center}}
.partners h2{font-size:clamp(26px,3.4vw,36px);color:#fff}
.partners p{margin-top:14px;color:#ddd0b8}
.pl{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pl span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:9px 14px;font-family:var(--font-display);font-weight:600;font-size:13.5px}
.pbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,217,138,.22);border-radius:18px;padding:24px;overflow:hidden;min-height:230px}
.pbox .qr{width:88px;height:88px;border-radius:14px;background:conic-gradient(var(--gold-soft) 0 25%,#0000 0 50%,var(--gold-soft) 0 75%,#0000 0) 0 0/22px 22px,#1a140a;margin-bottom:14px}
.pbox.has-img{background-size:cover;background-position:center;border-color:rgba(255,255,255,.14);aspect-ratio:4/5;min-height:0;padding:0;box-shadow:0 26px 54px -28px rgba(0,0,0,.7)}
.pbox.has-img>*{display:none}
@media(max-width:820px){.pbox.has-img{width:min(340px,100%);justify-self:center}}

.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:stretch}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about-copy p{color:var(--mut);margin-top:12px;line-height:1.62}
.about-copy .lead{font-size:clamp(16px,2vw,18.5px);color:var(--ink);font-weight:600;margin-top:16px}
.about-copy .about-quote{margin-top:24px;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.1vw,20px);color:var(--green-2);line-height:1.42;background:linear-gradient(135deg,rgba(245,179,1,.14),rgba(47,158,138,.08));border-left:4px solid var(--gold);border-radius:12px;padding:16px 20px}
.about .portrait{border-radius:var(--r-card);background:linear-gradient(160deg,#eef3ee,#dde8e0);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;max-width:360px;align-self:stretch;min-height:420px;background-size:cover;background-position:center;box-shadow:0 26px 54px -30px rgba(20,40,30,.5)}
@media(max-width:760px){.about .portrait{align-self:auto;aspect-ratio:4/5;min-height:0;width:min(360px,100%);justify-self:center}}
.about .portrait .frame{position:absolute;inset:14px;border:1.6px dashed rgba(30,70,50,.32);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;color:#33564a}
.about .portrait .frame .em{font-size:46px}
.about .portrait .frame .t{font-family:var(--font-display);font-weight:700;font-size:14.5px}
.about .portrait .frame .d{font-size:12.5px;color:#5a7568;max-width:22ch}
.about .portrait.has-img>*{display:none}
.about .portrait .logo-disc-big{width:118px;height:118px;border-radius:28px;background:linear-gradient(150deg,var(--sky-2),var(--sky-1));display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 16px 34px -14px rgba(0,0,0,.5)}
/* cadres concentriques fins autour du logo (crème, opacité dégressive) */
.about .portrait .ring{display:flex;align-items:center;justify-content:center;padding:22px;border:1.5px solid rgba(255,250,238,.42)}
.about .portrait .ring.r1{border-radius:48px;border-color:rgba(255,250,238,.55)}
.about .portrait .ring.r2{border-radius:70px;border-color:rgba(255,250,238,.36)}
.about .portrait .ring.r3{border-radius:92px;border-color:rgba(255,250,238,.23)}
.about .portrait .ring.r4{border-radius:114px;border-color:rgba(255,250,238,.13)}
.about .portrait .logo-disc-big img{width:86px;height:86px}

.beta{background:linear-gradient(120deg,var(--persimmon),var(--gold));border-radius:var(--r-card);padding:clamp(34px,5vw,54px);text-align:center;color:#3a2410;position:relative;overflow:hidden;box-shadow:0 34px 70px -34px rgba(200,110,40,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.beta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 320px at 12% -25%,rgba(255,255,255,.3),transparent 58%)}
.beta>*{position:relative;z-index:1}
.beta h2{font-size:clamp(26px,3.6vw,38px);color:#2c1c0c}
.beta p{margin:12px auto 0;max-width:48ch;color:#59391f}
/* Page bénévole : carte du formulaire en dégradé ROSE (distincte de l'orange /rejoindre) */
body[data-page="contribuer"] .beta{background:linear-gradient(120deg,#ff7eb3,#ff4f81);color:#fff;box-shadow:0 34px 70px -34px rgba(220,50,110,.6),inset 0 1px 0 rgba(255,255,255,.4)}
body[data-page="contribuer"] .beta h2{color:#fff}
body[data-page="contribuer"] .beta p{color:#ffe1ec}
body[data-page="contribuer"] .beta .eyebrow{color:#fff2f8}
body[data-page="contribuer"] .beta .note{color:#ffe1ec}
/* Mise en valeur « Balayage satiné » : un reflet diagonal glisse sur la carte */
body[data-page="contribuer"] .beta::after{content:"";position:absolute;top:-40%;left:-60%;width:55%;height:180%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);filter:blur(6px);z-index:2;pointer-events:none;animation:betaSweep 4.6s ease-in-out infinite}
@keyframes betaSweep{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){body[data-page="contribuer"] .beta::after{animation:none;opacity:0}}
.form{margin:24px auto 0;max-width:580px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.form input,.form select,.form textarea{font-family:var(--font-body);font-size:15px;padding:14px 16px;border-radius:13px;border:1.5px solid rgba(0,0,0,.08);background:#fffdf7;min-width:150px;flex:1;box-shadow:0 12px 22px -14px rgba(120,60,0,.5),inset 0 1px 0 rgba(255,255,255,.9);transition:box-shadow .2s,transform .15s,border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:rgba(31,111,92,.55);box-shadow:0 0 0 3px rgba(31,111,92,.4),0 16px 28px -14px rgba(120,60,0,.55);transform:translateY(-1px)}
.form input::placeholder,.form textarea::placeholder{color:#8a7a63}
.form textarea{flex-basis:100%;width:100%;resize:vertical;min-height:96px;line-height:1.5}
.form .btn{flex:0 0 auto}
.note{margin-top:12px;font-size:12.5px;color:#6b4a2c}
.form-ok{margin:18px auto 0;max-width:520px;background:rgba(255,255,255,.85);border-radius:14px;padding:18px;font-family:var(--font-display);font-weight:600;color:var(--green-2);display:none}

.foot{background:#12160f;color:#bdb491;padding:56px 0 30px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot .brand2{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;margin-bottom:12px}
.foot h4{font-family:var(--font-display);color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.foot a{display:block;padding:5px 0;color:#bdb491}
.foot a:hover{color:var(--gold)}
/* logos réseaux SANS cadre : posés directement sur le fond sombre du footer */
.soc-ico{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:transparent;transition:transform .2s}
.soc-ico:hover{transform:translateY(-3px) scale(1.08)}
.soc-ico svg{width:32px;height:32px;display:block}
.soc-ico[data-icon="social.instagram"] svg{width:31px;height:31px}
.soc-ico[data-icon="social.facebook"] svg{width:31px;height:31px}
.soc-ico[data-icon="social.tiktok"] svg{width:31px;height:31px}
.soc-ico .icon-img{width:32px;height:32px;object-fit:contain}
.soc-ico.link-off{opacity:.45;pointer-events:none}
.foot .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;font-size:12.5px;color:#8f8767;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.move{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
@media(max-width:840px){.move{grid-template-columns:1fr;gap:30px}}
.move-pts{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:14px}
.move-pts li{display:flex;gap:13px;align-items:flex-start}
.move-pts .ic{width:42px;height:42px;flex:0 0 auto;border-radius:12px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;font-size:20px}
.move-pts h4{font-size:17px;color:var(--ink)}
.move-pts p{color:var(--mut);font-size:14.5px;margin-top:3px}
.bigmap{border-radius:var(--r-card);overflow:hidden;position:relative;aspect-ratio:5/4;border:1px solid var(--line);box-shadow:0 26px 50px -30px rgba(20,40,30,.6);background:radial-gradient(circle at 26% 24%,rgba(22,183,154,.18),transparent 45%),radial-gradient(circle at 78% 74%,rgba(255,201,60,.16),transparent 45%),#f0ead9}
.bigmap .streets{position:absolute;inset:0}
.bigmap .youare{position:absolute;left:19%;top:70%;width:18px;height:18px;border-radius:50%;background:var(--persimmon);box-shadow:0 0 0 6px rgba(255,122,69,.28);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,122,69,.4)}100%{box-shadow:0 0 0 16px rgba(255,122,69,0)}}
.bigmap .mpin{position:absolute;transform:translate(-50%,-100%);font-size:22px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:floaty 3s ease-in-out infinite}
.bigmap .callout{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 11px;font-family:var(--font-display);font-weight:600;font-size:12px;box-shadow:0 10px 24px -12px rgba(0,0,0,.4);display:flex;gap:7px;align-items:center}
.bigmap .callout .qr{width:22px;height:22px;border-radius:5px;background:conic-gradient(#152219 0 25%,#0000 0 50%,#152219 0 75%,#0000 0) 0 0/6px 6px,#fff;border:1px solid #152219}
/* image perso déposée via l'admin : elle recouvre le dessin (rues, épingles, callout masqués) */
.bigmap.has-img{background-size:cover;background-position:center}
.bigmap.has-img>*{display:none}
/* « Un jeu qui vous fait bouger » : map centrée au-dessus du trio */
.move-map{max-width:600px;margin:34px auto 0}

/* --- Duo de modes premium (Exploration jour / Live nuit) --- */
.modes-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
@media(max-width:820px){.modes-duo{grid-template-columns:1fr}}
.mode-card{position:relative;overflow:hidden;border-radius:26px;padding:30px;min-height:376px;display:flex;flex-direction:column;color:#fff;isolation:isolate;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s ease}
.mode-card.day{background:#0b1712}
.mode-card.night{background:#0b0920}
/* bord lumineux edge-lit */
.mode-card::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;z-index:3;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mode-card.day::before{background:linear-gradient(135deg,#5FE3C0,rgba(95,227,192,0) 42%,rgba(255,201,60,0) 58%,#FFC93C)}
.mode-card.night::before{background:linear-gradient(135deg,#C9A9FF,rgba(201,169,255,0) 42%,rgba(255,110,168,0) 58%,#FF6EA8)}
/* halo aurora principal (haut-gauche, dérive lente) */
.mode-card::after{content:"";position:absolute;left:-80px;top:-80px;width:300px;height:300px;border-radius:50%;filter:blur(58px);z-index:0;opacity:.8;pointer-events:none;animation:mcDrift 15s ease-in-out infinite alternate}
.mode-card.day::after{background:#2EC9A0}
.mode-card.night::after{background:#9B5CF0}
@keyframes mcDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(28px,22px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.mode-card::after{animation:none}}
.mode-card:hover{transform:translateY(-5px)}
.mode-card.day:hover{box-shadow:0 44px 74px -30px rgba(0,0,0,.65),0 0 44px -6px rgba(47,201,160,.42)}
.mode-card.night:hover{box-shadow:0 44px 74px -30px rgba(0,0,0,.65),0 0 44px -6px rgba(155,92,240,.42)}
.mode-card .mc-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:15px;height:100%}
.mode-card h3{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.01em;line-height:1.05}
.mode-card p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9)}
.mc-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.mc-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}
@media(max-width:440px){.mc-modes{grid-template-columns:1fr}}
.mc-mode{display:flex;gap:11px;align-items:center;border-radius:14px;padding:13px 14px;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);border-left:3px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.mode-card.day .mc-mode{border-left-color:#5FE3C0}
.mode-card.night .mc-mode{border-left-color:#C9A9FF}
.mc-mode .mm-ic{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.mc-mode .mm-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-card.day .mm-ic{color:#5FE3C0}
.mode-card.night .mm-ic{color:#C9A9FF}
.mc-mode b{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;margin-bottom:3px}
.mc-mode span{font-size:12px;color:rgba(255,255,255,.82);line-height:1.4}
.mc-foot{margin-top:13px;font-size:13px;color:rgba(255,255,255,.9);font-weight:600}
/* halos secondaires (réutilise sun/moon) ; hills + étoiles masqués */
.mc-sun{position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;background:#FFC93C;filter:blur(64px);opacity:.4;z-index:0;pointer-events:none;animation:none}
.mc-moon{position:absolute;right:-60px;bottom:-60px;top:auto;width:240px;height:240px;border-radius:50%;background:#FF6EA8;filter:blur(64px);opacity:.34;z-index:0;pointer-events:none;box-shadow:none}
.mc-hills,.mc-star{display:none}

/* motion */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes pulseGlow{0%,100%{box-shadow:0 10px 24px -9px rgba(255,180,56,.6)}50%{box-shadow:0 12px 30px -6px rgba(255,180,56,.95),0 0 0 6px rgba(255,201,60,.16)}}
.btn-gold{animation:pulseGlow 2.6s ease-in-out infinite}
@keyframes pulseGreen{0%,100%{box-shadow:0 10px 24px -10px rgba(31,122,84,.6)}50%{box-shadow:0 12px 28px -6px rgba(31,122,84,.85),0 0 0 6px rgba(31,122,84,.15)}}
.btn-green{animation:pulseGreen 2.8s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.32)}24%{transform:scale(1)}36%{transform:scale(1.16)}48%{transform:scale(1)}}
.beat{display:inline-block;animation:beat 2s ease-in-out infinite;transform-origin:center}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes riseheart{0%{opacity:0;transform:translateY(4px) scale(.5)}18%{opacity:1}100%{opacity:0;transform:translateY(-54px) scale(1.15)}}
@keyframes march{to{stroke-dashoffset:-64}}
.dashmove{animation:march 1.5s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* next page CTA */
.nextcta{background:var(--cream-2);border-top:1px solid var(--line)}
.nextcta .in{max-width:var(--wrap);margin:0 auto;padding:clamp(44px,7vw,76px) 22px;text-align:center}
.nextcta .k{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--persimmon)}
.nextcta h3{font-size:clamp(22px,3vw,30px);color:var(--green-2);margin-top:10px}
.nextcta .btn{margin-top:20px}
.pageprog{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:28px}
.pageprog .d{width:9px;height:9px;border-radius:50%;background:var(--line);transition:all .3s}
.pageprog .d.on{background:var(--persimmon);width:26px;border-radius:6px}
.imgfill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lottie-icon{display:inline-block}

/* nav : toutes les pages accessibles en un clic + menu mobile */
.nav-burger{display:none;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--green-2);margin-left:auto;padding:6px 12px;border-radius:10px}
.nav-cta{flex:0 0 auto}
@media(max-width:980px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(251,247,236,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:6px 22px 14px;margin-left:0;box-shadow:0 24px 44px -26px rgba(0,0,0,.35)}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 2px;border-bottom:1px solid var(--line);border-radius:0;font-size:16px}
  .nav-links a:last-child{border-bottom:0}
  .nav-burger{display:inline-flex;align-items:center}
}
@media(max-width:520px){.nav-cta{display:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

/* --- FAQ (accordéon) --- */
.faq-wrap{max-width:840px;margin:0 auto}
.faq-item{background:#fffdf7;border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;transition:box-shadow .2s ease}
.faq-item[open]{box-shadow:0 12px 30px rgba(22,48,58,.09)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:flex-start;gap:14px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--green-2);line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-left:auto;font-size:26px;font-weight:400;color:var(--gold);transition:transform .2s ease;line-height:1;flex:0 0 auto}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:16px}
.faq-item .fa{padding:0 22px 20px 22px;color:var(--mut);font-size:15.5px;line-height:1.62}
.faq-item .fa a{color:var(--persimmon);font-weight:600}
.faq-cta{text-align:center;margin-top:28px;color:var(--mut);font-size:15px}
.faq-cta a{color:var(--green-2);font-weight:700}
.en-note{background:#14261f;color:#bcd3c4;font-size:12.5px;text-align:center;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.nav-lang{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--green-2,#2e8b57);text-decoration:none;padding:6px 8px;border-radius:8px;margin-left:6px}
.nav-lang:hover{background:rgba(0,0,0,.06)}
@media(max-width:520px){.nav-lang{order:1;margin-left:auto}.nav-burger{order:2;margin-left:8px}}

/* 3 temps : numéro centré dans la pastille dorée (plus d'emoji, plus de badge coin) */
.step .ico.ico-num{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--green-2);line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.45)}
/* Encadré « nouveauté » : filet tricolore en tête + chip aéré en majuscules (info clé : 1re appli en France) */
.uniq.uniq-hl{position:relative;overflow:hidden;max-width:880px;background:linear-gradient(150deg,#12291d,#0d2016);border:1px solid rgba(255,255,255,.1);border-top:none;box-shadow:0 24px 54px -28px rgba(0,0,0,.55)}
.uniq.uniq-hl .uniq-flagline{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0B4DA2 0 33.3%,#ffffff 33.3% 66.6%,#E4384A 66.6% 100%)}
.uniq.uniq-hl .uniq-pill{display:table;margin:2px auto 16px;padding:6px 15px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.17);color:#eaf3ec;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:1.3px;text-transform:uppercase}
.uniq.uniq-hl b{font-size:19px;line-height:1.36}

/* Anti-flash « qui te fait bouger » : le plan de rue placeholder (SVG pointillé)
   reste caché au chargement et n'apparaît qu'après un court délai — le temps que
   l'image de config se charge et pose .has-img (qui masque définitivement le
   placeholder). Fini le flash de lignes oranges au rechargement. */
.bigmap:not(.has-img)>*{opacity:0;animation:dqBigmapReveal .35s ease .5s forwards}
@keyframes dqBigmapReveal{to{opacity:1}}

/* Sources sous les 3 stats (déplacées hors de l'encadré « 1re en France ») */
.stat-sources{text-align:center;color:#9bb6a8;font-size:10.5px;margin-top:16px;line-height:1.4}

/* Flèches « donc → donc » entre les 3 stats (→ en ligne, ↓ en empilé mobile) */
.statrow .statc{position:relative}
.statrow .statc:not(:last-child)::after{content:"→";position:absolute;top:50%;right:-9px;transform:translate(50%,-50%);color:var(--gold);font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;text-shadow:0 2px 7px rgba(0,0,0,.5);z-index:3;pointer-events:none}
@media(max-width:640px){.statrow .statc:not(:last-child)::after{content:"↓";top:auto;right:auto;left:50%;bottom:-9px;transform:translate(-50%,50%)}}



/* ============================================================
   BLOC « L'app pense à toi » (page Le jeu) — carte Nouveauté à GAUCHE
   + encadrés-boutons thémés à DROITE (fond thémé + effets derrière +
   carte de verre translucide par-dessus) + flèches explicatives.
   ============================================================ */
.gs-grid{display:flex;gap:42px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* GAUCHE : carte Nouveauté */
.gs-novelty{flex:0 1 360px;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:28px 24px 22px;box-shadow:0 22px 46px -26px rgba(0,0,0,.3);position:relative}
.gs-nbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;background:linear-gradient(90deg,#FFD98A,var(--gold));color:#3a2c05;font-weight:900;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;padding:6px 16px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(224,152,15,.6)}
.gs-nbadge::before,.gs-nbadge::after{content:"";width:16px;height:2px;border-radius:2px;background:#3a2c05;opacity:.5}
.gs-novelty h3{margin:8px 0 6px;font-size:20px;letter-spacing:-.3px;color:var(--green-2)}
.gs-novelty>p{margin:0 auto 16px;font-size:13.5px;color:var(--mut);max-width:320px}
.gs-theme-btn{cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border:none;background:linear-gradient(135deg,#1f7a54,#155e40);color:#fff;border-radius:999px;padding:13px 22px;font-family:inherit;font-weight:800;font-size:15px;box-shadow:0 12px 26px -10px rgba(21,94,64,.7);transition:transform .12s;animation:gsGlow 2.2s ease-in-out infinite}
.gs-theme-btn>*{position:relative;z-index:1}
.gs-theme-btn:active{transform:scale(.96)}
.gs-theme-btn:hover{animation-play-state:paused}
/* reflet qui balaie la surface pour attirer le clic */
.gs-theme-btn::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:gsShine 2.8s ease-in-out infinite}
@keyframes gsGlow{0%,100%{box-shadow:0 12px 26px -10px rgba(21,94,64,.7)}50%{box-shadow:0 14px 30px -8px rgba(21,94,64,.9),0 0 0 6px rgba(255,201,60,.18),0 0 30px 2px rgba(255,201,60,.5)}}
@keyframes gsShine{0%{left:-70%}22%{left:135%}100%{left:135%}}
@media (prefers-reduced-motion:reduce){.gs-theme-btn{animation:none}.gs-theme-btn::after{display:none}}
.gs-theme-btn .sw{display:inline-flex;gap:3px}.gs-theme-btn .sw i{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.gs-theme-btn .tn{min-width:86px;text-align:left}
.gs-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px}
.gs-chip{font-size:11.5px;font-weight:700;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.gs-chip.on{color:#3a2c05;background:linear-gradient(90deg,#FFE6A6,var(--gold));border-color:transparent}
.gs-more{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#9a6a00;border:1px dashed rgba(224,152,15,.5);border-radius:999px;padding:7px 14px;background:rgba(255,201,60,.10);margin-top:16px}

/* DROITE : liste des encadrés-boutons */
.gs-blist{flex:1 1 440px;display:flex;flex-direction:column;gap:14px;min-width:300px}
.gs-brow{display:flex;align-items:center}
.gs-bcard{--gbg:linear-gradient(140deg,#153a34,#0f251c);--gacc:#35D0B0;position:relative;width:274px;flex:0 0 auto;height:96px;border-radius:22px;overflow:hidden;padding:17px;background:var(--gbg);box-shadow:0 12px 28px -14px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--gacc) 45%,transparent),0 0 22px -6px color-mix(in srgb,var(--gacc) 45%,transparent);transition:background .5s ease,box-shadow .3s ease,transform .2s cubic-bezier(.34,1.56,.64,1)}
.gs-bcard canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
/* survol : SEUL le bouton (carte de verre) réagit — le cadre thémé ne bouge pas */
.gs-binner{transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease}
.gs-brow:hover .gs-binner{transform:scale(1.04);background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.74));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px -8px rgba(0,0,0,.45)}
.gs-bic{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.gs-brow:hover .gs-bic{transform:scale(1.08)}
.gs-arrow svg{transition:transform .2s ease}
.gs-brow:hover .gs-arrow svg{transform:translateX(4px)}
/* « Appuie pour essayer » mis en valeur sous le texte */
.gs-try{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--persimmon);margin:0 0 13px;padding:6px 13px;border:1px dashed color-mix(in srgb,var(--persimmon) 55%,transparent);border-radius:999px;background:rgba(255,122,69,.08)}
.gs-try .h{font-size:15px;animation:gstap 1.4s ease-in-out infinite}
@keyframes gstap{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.gs-binner{position:relative;z-index:2;height:100%;border-radius:13px;display:flex;align-items:center;gap:12px;padding:0 13px;overflow:hidden;background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(255,255,255,.48));border:1px solid rgba(255,255,255,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.gs-bic{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);font-size:24px;line-height:1}
.gs-bic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-btxt b{display:block;font-size:16px;font-weight:800;color:#17231d;letter-spacing:-.2px}
.gs-btxt span{display:block;font-size:10.5px;font-weight:700;color:#55655b;margin-top:1px}
.gs-arrow{flex:0 0 auto;width:58px;display:flex;align-items:center;justify-content:center}
.gs-arrow svg{width:54px;height:30px;overflow:visible}
.gs-exp{flex:1;min-width:0}
.gs-exp b{font-size:14.5px;font-weight:800;color:var(--ink)}
.gs-exp p{margin:2px 0 0;font-size:13px;color:var(--mut);line-height:1.4}

@media(max-width:820px){
  /* empilé : boutons d'abord, encadré Nouveauté en dessous (desktop inchangé) */
  .gs-grid{flex-direction:column;align-items:stretch;gap:26px}
  .gs-blist{flex:1 1 auto;order:1}
  .gs-novelty{flex:1 1 auto;max-width:520px;margin:0 auto;width:100%;order:2}
}
@media(max-width:640px){
  /* mobile : la question (centrée) AU-DESSUS, le bouton EN DESSOUS */
  .gs-brow{flex-direction:column;align-items:center;text-align:center;gap:11px;margin-bottom:8px}
  .gs-arrow{display:none}
  .gs-exp{order:1;width:100%;padding:0 8px}
  .gs-bcard{order:2;width:100%;max-width:340px}
  /* mais DANS le bouton, titre + sous-titre restent alignés à gauche */
  .gs-binner{justify-content:flex-start;text-align:left}
}

/* « Contribuer » mis en valeur (rose) dans le menu */
a.nav-contribuer{color:#ff4f81;font-weight:800}
a.nav-contribuer:hover{color:#ff2f6a}