:root{
  /* Palette Maison Yokō */
  --my-forest:#0E1238;
  --my-terracotta:#E8783A;
  --my-ivory:#F4ECE3;
  --my-ivory-50:#FBF6EF;
  --my-ivory-200:#ECDFD2;
  --my-clay:#E8C9B5;
  --my-sand:#E0CDBC;
  --my-stone:#8A8395;
  --my-ink-soft:#2A2F55;
  --my-bordeaux:#5E1320;       /* bordeaux profond, presque sang — état "faux" */
  --my-bordeaux-rose:#E7B4A8;  /* rosé clair pour labels sur fond bordeaux */

  /* Typos : stand-ins web (Wulkan→Cormorant, Gotham→Manrope). Voir assets/fonts/README. */
  --serif:'Cormorant', Georgia, serif;
  --sans:'Manrope', system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--sans);
  color:var(--my-forest);
  background:var(--my-ivory);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Canvas fond génératif + grain */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#app{position:relative;z-index:2;height:100%;}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;width:100%;overflow-y:auto;
}
.hidden{display:none!important;}
.spacer{flex:1;}

.eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--my-ink-soft);}
.picto{
  width:34px;height:34px;border-radius:16%;background:var(--my-forest);color:var(--my-ivory);
  display:grid;place-items:center;flex:none;padding:0;
}
/* Logo Yokō : même proportions que l'icône de marque (le logo occupe la moitié de la hauteur) */
.picto svg{width:13px;height:17px;display:block;fill:currentColor;}
.title{font-family:var(--serif);font-style:italic;font-weight:500;line-height:.98;letter-spacing:-.01em;}
.accent{color:var(--my-terracotta);font-style:italic;}
.top{display:flex;align-items:center;gap:12px;}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:50;background:var(--my-forest);color:var(--my-ivory);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
}
#loader .picto{width:64px;height:64px;background:var(--my-ivory);color:var(--my-forest);}
#loader .picto svg{width:24px;height:32px;}
#loader .lbl{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;}
.count{font-family:var(--serif);font-style:italic;font-size:88px;line-height:1;font-weight:500;}
.loadbar{width:160px;height:2px;background:rgba(244,236,227,.18);border-radius:2px;overflow:hidden;}
.loadbar i{display:block;height:100%;width:0;background:var(--my-terracotta);}

/* ---------- BUTTONS ---------- */
.btn{
  appearance:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;
  font-size:15px;letter-spacing:.02em;padding:18px 26px;border-radius:100px;
  background:var(--my-forest);color:var(--my-ivory);transition:transform .25s var(--ease),background .25s,opacity .25s;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
}
.btn:active{transform:scale(.97);}
.btn.ghost{background:transparent;color:var(--my-forest);border:1.5px solid var(--my-sand);}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-row{display:flex;flex-direction:column;gap:12px;}

/* ---------- HOME ---------- */
#home .lead{font-size:16px;line-height:1.5;color:var(--my-ink-soft);max-width:34ch;margin-top:14px;}
#home .title{font-size:clamp(46px,14vw,68px);margin-top:6px;}
.cards{display:flex;flex-direction:column;gap:13px;margin-top:26px;}
.card{
  text-align:left;cursor:pointer;background:var(--my-ivory-50);border:1px solid rgba(14,18,56,.07);border-radius:20px;
  padding:20px;display:flex;align-items:center;gap:18px;
  box-shadow:0 1px 0 rgba(14,18,56,.03);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.card:active{transform:scale(.985);}
.card.feature{background:var(--my-forest);color:var(--my-ivory);border-color:transparent;box-shadow:0 18px 40px -22px rgba(14,18,56,.5);}
/* Monogramme serif (langage de marque, remplace les emojis) */
.card .c-mark{
  flex:none;width:50px;height:50px;border-radius:50%;border:1px solid rgba(14,18,56,.16);
  display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:24px;font-weight:600;color:var(--my-forest);
}
.card.feature .c-mark{border-color:rgba(244,236,227,.28);color:var(--my-ivory);}
.card .c-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.card .c-badge,.card .c-title,.card .c-meta{display:block;}
.card .c-badge{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--my-terracotta);}
.card.feature .c-badge{color:var(--my-clay);}
.card .c-title{font-family:var(--serif);font-style:italic;font-size:23px;font-weight:600;line-height:1.05;}
.card .c-meta{font-size:12px;letter-spacing:.02em;color:var(--my-stone);}
.card.feature .c-meta{color:rgba(244,236,227,.55);}
.card .c-go{flex:none;width:18px;height:18px;color:var(--my-stone);transition:transform .35s var(--ease);}
.card.feature .c-go{color:var(--my-ivory);}
.card:hover .c-go{transform:translateX(4px);}

/* ---------- FLEUR SIGNATURE (.bloom) — line-art sur-mesure, se dessine à l'entrée ---------- */
.bloom{color:var(--my-terracotta);overflow:visible;display:block;}
.bloom--cover{width:74px;height:74px;margin-bottom:16px;}
.bloom--seal{width:88px;height:88px;margin:0 auto;}
.bloom--home{width:44px;height:44px;margin-bottom:14px;}
.bloom .petal,.bloom .pistil{stroke-dasharray:1;stroke-dashoffset:0;}
.screen.is-entering .bloom .petal,.screen.is-entering .bloom .pistil{animation:drawFrom 1s var(--ease) both;}
.screen.is-entering .bloom .petal:nth-of-type(1){animation-delay:.20s;}
.screen.is-entering .bloom .petal:nth-of-type(2){animation-delay:.31s;}
.screen.is-entering .bloom .petal:nth-of-type(3){animation-delay:.42s;}
.screen.is-entering .bloom .petal:nth-of-type(4){animation-delay:.53s;}
.screen.is-entering .bloom .petal:nth-of-type(5){animation-delay:.64s;}
.screen.is-entering .bloom .pistil{animation-delay:.80s;}

/* ---------- COVER (intro quizz) ---------- */
#cover .cover-badge{color:var(--my-terracotta);}
#cover .title{font-size:clamp(40px,12.5vw,62px);margin-top:10px;}
#cover .cover-intro{font-size:16px;line-height:1.55;color:var(--my-ink-soft);max-width:32ch;margin-top:16px;}
#cover .cover-meta{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:22px;
  background:var(--my-ivory-200);color:var(--my-ink-soft);border-radius:100px;
  padding:9px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
#cover #startBtn{margin-top:8px;}

/* ---------- QUESTION ---------- */
.qhead{display:flex;align-items:center;gap:14px;}
.progress{flex:1;height:4px;background:var(--my-ivory-200);border-radius:4px;overflow:hidden;}
.progress i{display:block;height:100%;width:0;background:var(--my-forest);border-radius:4px;transition:width .5s var(--ease);}
.qcount{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--my-stone);font-variant-numeric:tabular-nums;}
/* Ne rétrécit jamais sous son contenu : sur petit écran, c'est l'écran qui défile
   (sinon le contenu centré déborde sous l'en-tête et sous le bouton). */
.qbody{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;}
.question{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(26px,6.6vw,35px);line-height:1.14;letter-spacing:-.015em;}
.answers{display:flex;flex-direction:column;gap:12px;margin-top:34px;}
/* Cartes réponses — retenue « Apple » : surface claire, filet fin, définies par le trait, pas par l'aplat */
.answer{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;background:var(--my-ivory-50);border:1px solid rgba(14,18,56,.11);border-radius:16px;
  padding:18px 20px;font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--my-forest);
  display:flex;align-items:center;gap:14px;line-height:1.35;
  box-shadow:0 1px 2px rgba(14,18,56,.03);transition:transform .2s var(--ease),border-color .25s,background .25s,box-shadow .25s,opacity .25s;
}
.answer:not([disabled]):hover{border-color:rgba(14,18,56,.22);box-shadow:0 6px 18px -12px rgba(14,18,56,.35);}
/* Éclat : un reflet chaud balaie la bonne réponse à la révélation (une fois) */
.answer.correct::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(232,201,181,.5),transparent);
  transform:translateX(-180%);animation:sheen 1.15s var(--ease) .18s both;
}
.answer:active{transform:scale(.985);}
.answer .key{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(14,18,56,.055);color:var(--my-ink-soft);display:grid;place-items:center;font-weight:700;font-size:13px;transition:.25s;}
.answer .key svg{width:16px;height:16px;}
/* Révélation « Apple » : teinte légère + filet coloré + pastille pleine. La bonne
   réponse gagne une élévation douce ; le mauvais choix reste discret ; le reste s'efface. */
.answer.correct{border-color:var(--my-forest);border-width:1.5px;background:rgba(14,18,56,.055);color:var(--my-forest);box-shadow:0 10px 26px -14px rgba(14,18,56,.5);}
.answer.correct .key{background:var(--my-forest);color:var(--my-ivory);}
.answer.chosen-wrong{border-color:rgba(94,19,32,.5);background:rgba(94,19,32,.045);color:var(--my-forest);}
.answer.chosen-wrong .key{background:var(--my-bordeaux);color:var(--my-ivory);}
.answer.picked{border-color:var(--my-forest);border-width:1.5px;background:rgba(14,18,56,.055);color:var(--my-forest);box-shadow:0 10px 26px -14px rgba(14,18,56,.5);}
.answer.picked .key{background:var(--my-forest);color:var(--my-ivory);}
.answer.dim{opacity:.4;}
.answer[disabled]{cursor:default;}

/* Feedback « Apple » : panneau clair, filet fin, label éditorial coloré — plus d'aplat lourd */
.feedback{margin-top:26px;border-radius:16px;padding:18px 20px;background:rgba(14,18,56,.05);color:var(--my-forest);border:1px solid rgba(14,18,56,.09);display:flex;flex-direction:column;gap:8px;}
.feedback .fb-label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--my-terracotta);}
.feedback .fb-text{font-size:14.5px;line-height:1.55;color:var(--my-ink-soft);}
.feedback.fb-ko{background:rgba(94,19,32,.05);border-color:rgba(94,19,32,.13);}
.feedback.fb-ko .fb-label{color:var(--my-bordeaux);}
.qfoot{padding-top:22px;}

/* ---------- RESULT ---------- */
/* Centrage assuré par les .spacer : si le résultat dépasse l'écran, il part du haut et défile. */
#result{justify-content:flex-start;text-align:center;align-items:center;}
.res-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--my-stone);margin-bottom:10px;}
.score{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(64px,20vw,112px);line-height:1;}
.score small{font-size:.4em;color:var(--my-stone);font-style:normal;font-weight:600;}
.verdict{font-family:var(--serif);font-style:italic;font-size:clamp(27px,7vw,36px);line-height:1.08;margin-top:10px;max-width:18ch;}
.result-msg{font-size:15px;line-height:1.55;color:var(--my-ink-soft);max-width:32ch;margin:16px auto 0;}
/* Récapitulatif du parcours — bilan sobre, une pastille par question */
.parcours{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.parcours-label{margin-bottom:0;}
.pips{display:flex;gap:11px;align-items:center;justify-content:center;}
.pip{
  width:13px;height:13px;border-radius:50%;flex:none;
  transform-origin:center;transition:none;
}
.pip-ok{background:var(--my-forest);}
.pip-ko{background:transparent;border:1.5px solid var(--my-sand);}
.pip{animation:pipIn .5s var(--ease) both;}

.cta-card{margin-top:26px;width:100%;background:var(--my-forest);color:var(--my-ivory);border-radius:22px;padding:22px 20px;text-align:left;}
.cta-card .eyebrow{color:var(--my-clay);}
.cta-card p{font-size:15px;line-height:1.5;margin:8px 0 16px;}
.cta-card .btn{background:var(--my-terracotta);color:#fff;}
.secondary-row{display:flex;gap:10px;margin-top:12px;width:100%;}
.secondary-row .btn{font-size:13.5px;padding:14px 16px;border-color:rgba(244,236,227,.3);color:var(--my-ivory);}

.footer-note{font-size:10.5px;color:var(--my-stone);letter-spacing:.04em;margin-top:auto;padding-top:18px;text-align:center;}
.meta-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--my-ivory-200);color:var(--my-ink-soft);border-radius:100px;padding:8px 14px;font-size:12px;font-weight:600;letter-spacing:.02em;}

.backlink{align-self:flex-start;background:none;border:none;cursor:pointer;color:var(--my-stone);font-family:var(--sans);font-size:13px;font-weight:600;padding:6px 0;display:inline-flex;gap:7px;align-items:center;}

/* ---------- ANIMATIONS (CSS natif, robustes, état de repos visible) ---------- */
@keyframes riseIn{ from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes popIn{ 0%{transform:scale(.94);} 60%{transform:scale(1.02);} 100%{transform:scale(1);} }
@keyframes pipIn{ 0%{opacity:0;transform:scale(.2);} 60%{transform:scale(1.15);} 100%{opacity:1;transform:scale(1);} }
@keyframes sheen{ to{ transform:translateX(320%); } }
@keyframes drawFrom{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* L'écran qui entre : fade global + enfants qui montent en cascade */
.screen.is-entering{ animation:fadeIn .45s var(--ease) both; }
.screen.is-entering > *{ animation:riseIn .6s var(--ease) both; }
.screen.is-entering > *:nth-child(1){animation-delay:.02s;}
.screen.is-entering > *:nth-child(2){animation-delay:.08s;}
.screen.is-entering > *:nth-child(3){animation-delay:.14s;}
.screen.is-entering > *:nth-child(4){animation-delay:.20s;}
.screen.is-entering > *:nth-child(5){animation-delay:.26s;}
.screen.is-entering > *:nth-child(6){animation-delay:.32s;}
.screen.is-entering > *:nth-child(7){animation-delay:.38s;}
.screen.is-entering > *:nth-child(8){animation-delay:.44s;}
.screen.is-entering > *:nth-child(9){animation-delay:.50s;}

/* Question + réponses qui se rejouent à chaque question */
.q-anim #question{ animation:riseIn .5s var(--ease) both; }
.q-anim .answer{ animation:riseIn .5s var(--ease) both; }
.q-anim .answer:nth-child(1){animation-delay:.10s;}
.q-anim .answer:nth-child(2){animation-delay:.17s;}
.q-anim .answer:nth-child(3){animation-delay:.24s;}
.q-anim .answer:nth-child(4){animation-delay:.31s;}
.q-anim .answer:nth-child(5){animation-delay:.38s;}
.feedback.show-fb{ animation:riseIn .45s var(--ease) both; }
#nextBtn.show-next{ animation:riseIn .4s var(--ease) both; }
.answer.correct{ animation:popIn .5s var(--ease); }

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  /* les tracés dessinés restent visibles (pas d'animation de dessin) */
  .bloom .petal,.bloom .pistil{stroke-dashoffset:0!important;}
}

/* ============================================================
   THÈME SOMBRE + FOND VIDÉO — inspiré du hero maisonyoko.com
   Navy profond #02072D, vidéo ambiante, texte crème.
   ============================================================ */
:root{ --my-navy-deep:#02072D; }
body{ background:var(--my-navy-deep); color:var(--my-ivory); }

/* Fond vidéo plein écran + voile de lisibilité (scrim) */
.bgvid{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(125% 80% at 50% 0%, rgba(2,7,45,.5), rgba(2,7,45,.86) 72%),
    linear-gradient(180deg, rgba(2,7,45,.55), rgba(2,7,45,.9));
}
.grain{ mix-blend-mode:overlay; opacity:.06; }

/* Typo & pastilles */
.eyebrow{ color:var(--my-sand); }
/* Pastille = l'icône de marque : carré nuit, logo blanc (filet fin pour la détacher du fond sombre) */
.picto,#loader .picto{ background:#000210; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
#home .lead,#cover .cover-intro,.result-msg{ color:rgba(244,236,227,.72); }
.qcount{ color:rgba(224,205,188,.7); }
.res-eyebrow,.footer-note{ color:rgba(224,205,188,.55); }

/* Barre de progression */
.progress{ background:rgba(255,255,255,.14); }
.progress i{ background:var(--my-terracotta); }

/* Cartes d'accueil — verre dépoli */
.card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none; color:var(--my-ivory); }
.card.feature{ background:rgba(232,120,58,.13); border-color:rgba(232,120,58,.4); box-shadow:0 20px 50px -28px rgba(0,0,0,.75); }
.card .c-mark{ border-color:rgba(244,236,227,.26); color:var(--my-ivory); }
.card.feature .c-mark{ border-color:rgba(244,236,227,.42); }
.card .c-meta{ color:rgba(224,205,188,.55); }
.card.feature .c-meta{ color:rgba(244,236,227,.62); }
.card .c-go,.card.feature .c-go{ color:var(--my-sand); }

/* Pilule méta de la couverture */
#cover .cover-meta{ background:rgba(255,255,255,.08); color:var(--my-sand); border:1px solid rgba(255,255,255,.14); }

/* Réponses — verre dépoli sur navy */
.answer{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:var(--my-ivory); box-shadow:none; }
.answer:not([disabled]):hover{ border-color:rgba(255,255,255,.32); box-shadow:0 8px 22px -14px rgba(0,0,0,.6); }
.answer .key{ background:rgba(255,255,255,.1); color:var(--my-sand); }
/* Révélation : bonne réponse en crème lumineux + élévation ; mauvais choix rosé discret */
.answer.correct{ border-color:rgba(244,236,227,.85); background:rgba(244,236,227,.12); color:var(--my-ivory); box-shadow:0 14px 34px -16px rgba(0,0,0,.75); }
.answer.correct .key{ background:var(--my-ivory); color:var(--my-navy-deep); }
.answer.chosen-wrong{ border-color:rgba(231,180,168,.5); background:rgba(231,180,168,.07); color:var(--my-ivory); }
.answer.chosen-wrong .key{ background:var(--my-bordeaux-rose); color:var(--my-navy-deep); }
.answer.picked{ border-color:rgba(244,236,227,.85); background:rgba(244,236,227,.12); color:var(--my-ivory); box-shadow:0 14px 34px -16px rgba(0,0,0,.75); }
.answer.picked .key{ background:var(--my-ivory); color:var(--my-navy-deep); }
.answer.correct::after{ background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); }

/* Feedback — panneau dépoli */
.feedback{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--my-ivory); }
.feedback .fb-label{ color:var(--my-terracotta); }
.feedback .fb-text{ color:rgba(244,236,227,.82); }
.feedback.fb-ko{ background:rgba(231,180,168,.08); border-color:rgba(231,180,168,.2); }
.feedback.fb-ko .fb-label{ color:var(--my-bordeaux-rose); }

/* Boutons — crème sur sombre (façon hero Yokō) */
.btn{ background:var(--my-ivory); color:var(--my-navy-deep); }
.btn.ghost{ background:transparent; color:var(--my-ivory); border:1.5px solid rgba(244,236,227,.4); }

/* Carte CTA du résultat */
.cta-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.cta-card p{ color:rgba(244,236,227,.85); }
.cta-card .btn{ background:var(--my-terracotta); color:#fff; }
.secondary-row .btn{ background:transparent; border-color:rgba(244,236,227,.32); color:var(--my-ivory); }

/* Score & parcours */
.score small{ color:rgba(224,205,188,.6); }
.pip-ok{ background:var(--my-ivory); }
.pip-ko{ background:transparent; border:1.5px solid rgba(224,205,188,.5); }

/* Loader assorti */
#loader{ background:var(--my-navy-deep); }

@media (prefers-reduced-motion: reduce){
  .bgvid{ display:none; } /* fond statique : navy + scrim */
}

/* ============================================================
   HABILLAGE — photos du LIEU Maison Yokō (sans personne) sur les
   écrans vitrine, sous un voile navy pour garder le texte lisible.
   L'écran questions garde la vidéo (fond le plus calme).
   ============================================================ */
#home::before,#cover::before,#result::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
#home::before{background-image:linear-gradient(180deg,rgba(2,7,45,.78),rgba(2,7,45,.8) 45%,rgba(2,7,45,.93)),url('../photos/salon.jpg?v=10');}
#cover::before{background-image:linear-gradient(180deg,rgba(2,7,45,.76),rgba(2,7,45,.8) 45%,rgba(2,7,45,.93)),url('../photos/corridor.jpg?v=10');}
#result::before{background-image:linear-gradient(180deg,rgba(2,7,45,.82),rgba(2,7,45,.82) 45%,rgba(2,7,45,.95)),url('../photos/table.jpg?v=10');}
/* le contenu de l'écran passe au-dessus du voile */
#home>*,#cover>*,#result>*{position:relative;z-index:1;}

/* ---------- BANDEAU CONSENTEMENT (RGPD) ---------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  width:100%; max-width:560px; margin:0 auto;
  background:rgba(2,7,45,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.14);
  padding:16px 22px calc(16px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  animation:riseIn .45s var(--ease) both;
}
.consent-txt{ font-size:12.5px; line-height:1.5; color:rgba(244,236,227,.82); }
.consent-txt strong{ color:var(--my-ivory); font-weight:600; }
.consent-btns{ display:flex; gap:10px; }
.consent .consent-btn{ width:auto; flex:1; padding:12px 18px; font-size:13.5px; }