/* 🌙 dream.css — la porte Dream Ton Run (v177). Ne s'applique qu'aux éléments Dream :
   rien ici ne touche un écran existant. */
.dcard{position:relative;border-radius:22px;padding:16px 16px 14px;margin-bottom:16px;background:#fff;overflow:hidden;cursor:pointer;
  box-shadow:0 12px 34px rgba(22,22,29,.09);border:1px solid rgba(22,22,29,.05)}
.dcard::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 12% 15%,rgba(214,230,247,.95) 0%,transparent 48%),
  radial-gradient(circle at 92% 12%,rgba(251,216,228,.9) 0%,transparent 50%),
  radial-gradient(circle at 15% 95%,rgba(210,245,227,.95) 0%,transparent 50%),
  radial-gradient(circle at 92% 92%,rgba(255,217,196,.95) 0%,transparent 55%)}
.dcard>*{position:relative}
.dcard .dlogo svg{width:126px;display:block}
.dcard .dtxt{font-size:14px;font-weight:700;color:#16161d;letter-spacing:-.01em;margin:10px 0 12px;max-width:26ch;line-height:1.35}
.dfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dchip{background:#fff;border:1px solid rgba(22,22,29,.08);border-radius:999px;padding:6px 11px;font-size:11px;font-weight:600;color:rgba(22,22,29,.6);box-shadow:0 2px 10px rgba(22,22,29,.05);white-space:nowrap}
.dbtn{display:inline-flex;align-items:center;gap:6px;background:#16161d;color:#fff;border-radius:999px;padding:10px 16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;box-shadow:0 10px 22px rgba(22,22,29,.2)}

/* derrière la porte : la barre Turtle s'efface, et c'est l'écran ENTIER (l'overlay, collé aux
   bords du téléphone, sous la barre de l'heure comprise) qui prend le fond Dream. v178 : avant,
   c'était une boîte à marges négatives, et sur l'iPhone de Laurane il restait du gris en haut
   et à droite. */
body.dream-open .nav{display:none}
body.dream-open .overlay{background-color:#faf6f1;background-image:
    radial-gradient(circle at 15% 10%,rgba(214,230,247,.9) 0%,transparent 45%),
    radial-gradient(circle at 88% 18%,rgba(251,216,228,.85) 0%,transparent 50%),
    radial-gradient(circle at 18% 88%,rgba(210,245,227,.9) 0%,transparent 50%),
    radial-gradient(circle at 90% 90%,rgba(255,217,196,.95) 0%,transparent 55%)}
body.dream-open .overlay .opad{padding:0;min-height:100%}
.dworld{position:relative;min-height:100vh;min-height:100dvh;
  padding:max(52px,calc(env(safe-area-inset-top) + 34px)) 24px calc(36px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px;color:#16161d}
.dtop{display:flex;align-items:center;justify-content:space-between}
.dback{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:700;color:#16161d;background:#fff;border-radius:999px;padding:7px 12px;border:1px solid rgba(22,22,29,.08);box-shadow:0 2px 10px rgba(22,22,29,.05);cursor:pointer}
.dhero svg{width:82%;display:block;margin:10px 0 0}
.dh1{font-size:29px;line-height:1.12;font-weight:900;letter-spacing:-.03em;margin:0}
.dcard-in{background:#fff;border-radius:26px;border:1px solid rgba(22,22,29,.05);box-shadow:0 12px 34px rgba(22,22,29,.07);padding:18px}
.dinput{width:100%;border:none;outline:none;resize:none;font:inherit;font-size:16px;line-height:1.5;color:#16161d;background:transparent;min-height:96px}
.dinput::placeholder{color:rgba(22,22,29,.38)}
.dbig{margin-top:auto;width:100%;border:none;cursor:pointer;font:inherit;background:#16161d;color:#fff;border-radius:999px;padding:19px 24px;font-size:16px;font-weight:700;letter-spacing:.06em;box-shadow:0 14px 30px rgba(22,22,29,.22)}
.dbig:active{transform:scale(.985)}
.dghost{background:none;border:none;cursor:pointer;font:inherit;width:100%;padding:12px 10px;font-size:14px;font-weight:500;color:rgba(22,22,29,.55);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(22,22,29,.25)}

/* le rappel « reconnecte-toi », pour Laurane seulement */
.dcoach{background:#FFF6F0;border:1.5px solid #F4D5C6;border-radius:16px;padding:12px 14px;font-size:13px;font-weight:700;color:#8A3B28;line-height:1.5;margin-bottom:16px}

/* ---- v178 : la première entrée (ouverture + questionnaire + « Enchantée. ») ---- */
.dturtle{width:60px;height:30px;object-fit:contain;display:block}
.dhero-big svg{width:100% !important;margin:6px 0 0}
.dsoft-lg{font-size:17px}
.dbig-cache{opacity:0;pointer-events:none}
.dbig{transition:opacity .6s ease}
.dcaret{display:inline-block;width:0;overflow:visible;animation:dblink .75s step-end infinite;font-weight:400;color:rgba(22,22,29,.5)}
@keyframes dblink{50%{opacity:0}}
.ddot{color:#c9603a;display:inline-block}
.dfade{animation:dfade .5s ease-out}
@keyframes dfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dfade-in{opacity:0;transition:opacity .9s ease}
.dfade-in.on{opacity:1}
.dtext{width:100%;border:none;outline:none;font:inherit;font-size:18px;color:#16161d;background:transparent;padding:4px 0}
.dtext::placeholder{color:rgba(22,22,29,.38)}
.dnudge{font-size:13.5px;color:#c9603a;font-weight:600;margin-top:10px}
.dpillrow{display:flex;gap:10px}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dpill{flex:1;cursor:pointer;font:inherit;background:#fff;border:1px solid rgba(22,22,29,.12);border-radius:999px;padding:15px 10px;font-size:14px;font-weight:600;color:#16161d}
.dpill.sel{background:#16161d;color:#fff;border-color:#16161d}
.dtrack{position:relative;height:44px;margin-top:-6px}
.dtrack-line{position:absolute;left:0;right:0;top:30px;height:2px;border-radius:2px;background:rgba(22,22,29,.15)}
.dtrack-fill{position:absolute;left:0;top:30px;height:2px;border-radius:2px;background:#16161d;transition:width .7s cubic-bezier(.3,.8,.3,1)}
.dtrack-turtle{position:absolute;top:6px;left:0;width:46px;height:23px;object-fit:contain;transition:left .7s cubic-bezier(.3,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.dfade,.dcaret{animation:none}.dbig,.dfade-in,.dtrack-fill,.dtrack-turtle{transition:none}}

/* ---- v179 : le rituel (roue, révélation, dés, retour) ---- */
.dstack-sm{display:flex;flex-direction:column;gap:12px}
.dcenter{text-align:center}
.dwheelzone{display:flex;flex-direction:column;align-items:center;gap:26px;justify-content:space-evenly;flex:1}
.dneedle{width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:26px solid #16161d;margin:0 auto -8px;z-index:3;position:relative}
.dwheel{position:relative;width:300px;height:300px}
.ddisc{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:6px solid #fff;background:#fff;box-shadow:0 18px 48px rgba(22,22,29,.14),0 0 0 1px rgba(22,22,29,.06)}
.dspinner{position:absolute;inset:0;will-change:transform}
.dspun{transition:transform 3.4s cubic-bezier(.12,.75,.15,1)}
.dblob{position:absolute;width:190px;height:190px;border-radius:50%;filter:blur(34px)}
.db1{background:#ffd9c4;left:130px;top:10px}.db2{background:#d2f5e3;left:130px;top:130px}.db3{background:#fbd8e4;left:-10px;top:110px}.db4{background:#d6e6f7;left:0;top:-10px}
.dspoke{position:absolute;left:calc(50% - 1px);top:50%;width:2px;height:144px;transform-origin:top center;background:linear-gradient(transparent 0 34%,rgba(255,255,255,.9) 34%)}
.dhub{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.dhub img{width:76px;display:block}
#dreamDash{transition:transform .55s cubic-bezier(.45,0,.65,1)}
#dreamDash.ddash{transform:translateY(-96px) scale(1.05)}
.dtrot{animation:dtrot .32s ease-in-out infinite}
@keyframes dtrot{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-7px) rotate(2.5deg)}}
.dbadge{align-self:flex-start;background:rgba(210,245,227,.85);border:1px solid rgba(22,22,29,.06);border-radius:999px;padding:8px 16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-block}
.dinvite{font-size:17px;line-height:1.6;padding:24px;min-height:5em}
.ddicezone{display:flex;gap:26px;justify-content:center;padding:10px 0}
.ddie{cursor:pointer;width:106px;height:106px;background:#fff;border-radius:24px;box-shadow:0 14px 30px rgba(22,22,29,.16),inset 0 -4px 10px rgba(22,22,29,.06);border:1px solid rgba(22,22,29,.06);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:16px;box-sizing:border-box}
.ddie.dd1{transform:rotate(-7deg)}.ddie.dd2{transform:rotate(5deg)}
.dpip{width:17px;height:17px;border-radius:50%;background:#16161d;align-self:center;justify-self:center}
.dd2 .dpip{background:#c9603a}
.drolling.dd1{animation:droll1 .98s ease-out}.drolling.dd2{animation:droll2 .98s ease-out}
@keyframes droll1{0%{transform:rotate(-7deg) translateY(0)}20%{transform:rotate(140deg) translateY(-46px)}45%{transform:rotate(300deg) translateY(6px)}70%{transform:rotate(380deg) translateY(-18px)}100%{transform:rotate(353deg) translateY(0)}}
@keyframes droll2{0%{transform:rotate(5deg) translateY(0)}22%{transform:rotate(-150deg) translateY(-52px)}50%{transform:rotate(-290deg) translateY(8px)}75%{transform:rotate(-350deg) translateY(-14px)}100%{transform:rotate(-355deg) translateY(0)}}
.dkm{font-size:66px;font-weight:900;letter-spacing:-.03em;color:#16161d}
.dkmpop{animation:dkmpop .65s cubic-bezier(.2,1.35,.4,1) both}
@keyframes dkmpop{from{opacity:0;transform:scale(.35) translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dspun{transition:transform .4s ease-out}.dtrot,.drolling.dd1,.drolling.dd2,.dkmpop{animation:none}#dreamDash{transition:none}}

/* v184 : les dés affichent un « ? » tant qu'ils ne sont pas lancés */
.ddie .dq{grid-column:1/4;grid-row:1/4;align-self:center;justify-self:center;font-size:44px;font-weight:900;color:rgba(22,22,29,.28);line-height:1}
.dd2 .dq{color:rgba(201,96,58,.45)}

/* ---- v188 : le fil des tortues de Dream ---- */
.dsec{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(22,22,29,.55);margin-top:8px;display:flex;justify-content:space-between;align-items:baseline}
.dsec span{text-transform:none;letter-spacing:0;font-weight:600;font-size:11.5px}
.dpost{background:#fff;border-radius:18px;border:1px solid rgba(22,22,29,.05);box-shadow:0 8px 24px rgba(22,22,29,.06);padding:14px 14px 12px;margin-top:10px}
.dpost.dmoi{border:1.5px solid rgba(201,96,58,.35)}
.dpost-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:rgba(22,22,29,.6)}
.dpost-h b{color:#16161d;font-weight:800}.dpost-h span{flex:none;font-size:11px;font-weight:600;color:rgba(22,22,29,.45)}
.dpost-nom{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#16161d;margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dpost-al{font-size:12px;font-weight:700;background:#fff4c2;border-radius:999px;padding:4px 9px;white-space:nowrap}.dpost-al.bof{background:#eeeae4}
.dpost-pq{font-size:12.5px;color:rgba(22,22,29,.65);font-style:italic;margin-top:5px}
.dpost-q{font-size:11.5px;font-weight:600;color:rgba(22,22,29,.5);margin-top:10px}
.dpost-tot{font-size:12px;font-weight:600;color:rgba(22,22,29,.55);margin-top:9px;border-top:1px solid rgba(22,22,29,.06);padding-top:8px}
.dpost-r{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.dreact{font:inherit;font-size:12.5px;font-weight:700;background:#faf6f1;border:1px solid rgba(22,22,29,.08);border-radius:999px;padding:7px 12px;color:#16161d;white-space:nowrap;cursor:pointer;line-height:1.2}
.dreact em{font-style:normal;color:rgba(22,22,29,.45);margin-left:5px}
.dreact.on{background:#16161d;color:#fff;border-color:#16161d}.dreact.on em{color:rgba(255,255,255,.7)}
.dcheck{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#16161d;cursor:pointer;margin-top:-4px}
.dcheck input{position:absolute;opacity:0;width:0;height:0}
.dbox{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(22,22,29,.3);background:#fff;flex:none;display:inline-block}
.dcheck input:checked + .dbox{background:#16161d;border-color:#16161d;box-shadow:inset 0 0 0 3px #fff}
.dsoft-xs{font-size:12.5px;margin-top:-8px}

/* ---- v198 : la fin des 21 (maquette du 6/09) ---- */
.dh1-md{font-size:26px}.dh1-sm{font-size:23px}
.darc{background:#fff;border-radius:26px;padding:20px 20px 18px;box-shadow:0 12px 34px rgba(22,22,29,.07);font-size:15.5px;line-height:1.55;color:#16161d}
.darc p{margin:0 0 12px}.darc p:last-child{margin:0}.darc .dsig{font-weight:800;margin-top:4px}
.dalbum{background:#fff;border-radius:22px;padding:6px 16px;box-shadow:0 8px 24px rgba(22,22,29,.06)}
.dal{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(22,22,29,.06)}.dal:last-of-type{border-bottom:none}
.dal-n{flex:none;width:22px;height:22px;border-radius:50%;background:#16161d;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.dal-t{font-size:13.5px;line-height:1.35;color:#16161d}.dal-t b{font-weight:800}.dal-t>span{margin-left:4px}.dal-t i{display:block;color:rgba(22,22,29,.6);font-size:12.5px}
.dal-pager{display:flex;justify-content:space-between;align-items:center;padding:12px 2px 8px;border-top:1px solid rgba(22,22,29,.06)}
.dal-nav{font:inherit;font-size:13px;font-weight:700;color:#16161d;background:none;border:none;padding:6px 0;cursor:pointer}
.dal-pts{display:flex;gap:5px}.dal-pts i{width:7px;height:7px;border-radius:50%;background:rgba(22,22,29,.18)}.dal-pts i.on{background:#16161d}
.dmini{width:100%;font:inherit;text-align:left;cursor:pointer;background:#fff;border:1px solid rgba(22,22,29,.05);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(22,22,29,.06);display:flex;justify-content:space-between;align-items:center;color:#16161d}
.dmini b{font-size:15px;font-weight:800;display:block}.dmini small{display:block;font-weight:600;color:rgba(22,22,29,.5);font-size:12px;margin-top:2px}.dmini-fl{font-size:16px}
.dupsell{background:#16161d;color:#fff;border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(22,22,29,.12)}
.dupsell b{font-size:15px;font-weight:800;display:block}.dupsell small{display:block;color:rgba(255,255,255,.7);font-size:12px;margin-top:2px;line-height:1.4}
.dupsell-b{margin-top:10px;font:inherit;font-size:12.5px;font-weight:700;background:#fff;color:#16161d;border:none;border-radius:999px;padding:8px 14px;cursor:pointer}
.dreco{padding:14px 18px}.dreco-q{font-size:14px;font-weight:700;color:#16161d;margin-bottom:10px}
.dinput-sm{min-height:56px;border-top:1px solid rgba(22,22,29,.08);border-radius:0;padding-top:8px}