/* ─────────────────────────────────────────────────────────────────────────────
   Les maquettes (maquettes.js), reprises de journey.css.
   Tout est rangé sous .mq : aucune règle ne déborde sur le reste de la page.
   Les tailles suivent le cadre (cqw = 1 % de sa largeur) avec un plancher :
   aucun libellé sous 12px. Mêmes jetons que la page (ivoire, encre, orange ;
   Instrument Sans et JetBrains Mono).
   ───────────────────────────────────────────────────────────────────────────── */
.mq{position:absolute;inset:0;overflow:hidden;container-type:size;font-family:var(--s,'Instrument Sans',system-ui,sans-serif);color:var(--ink,#1A1510);font-size:max(12px,min(1.9cqw,16px));line-height:1.35;letter-spacing:-.01em;text-align:left;-webkit-font-smoothing:antialiased;transition:background .35s}
.mq *,.mq *::before,.mq *::after{box-sizing:border-box}
.mq p{margin:0}
.mq__vue,.mq__sous,.mq__sur,.mq__ctl{position:absolute;inset:0}
.mq__vue{-webkit-user-select:none;user-select:none}
.mq__sous{z-index:1;overflow:hidden}
.mq-photo{position:absolute;z-index:2;left:0;top:0;width:0;height:0;max-width:none;display:block;object-fit:cover;pointer-events:none;opacity:0}
.mq__sur{z-index:3;pointer-events:none}
.mq__ctl{z-index:4;pointer-events:none}
.mq__ctl>*{pointer-events:auto}
.mq button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mq button:focus-visible{outline:2px solid var(--acc,#F97708);outline-offset:2px}
.mq [hidden]{display:none!important}
/* Anneau de clic : il part du centre de l'élément et s'efface (piloté par maquettes.js). */
.mq .anneau{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--acc,#F97708);opacity:0;pointer-events:none}
/* Pastille de note, comme dans l'application. */
.mq .bd{position:absolute;display:flex;align-items:center;justify-content:center;height:28px;padding:0 9px;border-radius:8px;font:600 max(12px,min(1.8cqw,15px))/1 var(--m,'JetBrains Mono',monospace);color:#fff;white-space:nowrap}

/* ── 1. Analyse ───────────────────────────────────────────────────────────── */
.mq.s1 .anl,.mq.s1 .lbs{position:absolute;overflow:hidden;pointer-events:none}
.mq.s1 .scan{position:absolute;left:0;right:0;height:3px;background:var(--acc);box-shadow:0 0 24px 6px rgba(249,119,8,.55);opacity:0}
.mq.s1 .fb{position:absolute;border:2px solid var(--acc);border-radius:5px;opacity:0;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 14px rgba(249,119,8,.45)}
.mq.s1 .fb.c{border-width:3px;border-radius:8px}
.mq.s1 .lb{position:absolute;left:0;top:0;white-space:nowrap;background:rgba(20,17,15,.86);color:#fff;font:600 12px/1.2 var(--m);letter-spacing:.01em;padding:3px 7px;border-radius:6px;opacity:0}
.mq.s1 .lb.c{background:var(--acc);font:600 max(12px,min(1.9cqw,15px))/1.2 var(--s);letter-spacing:-.01em;padding:5px 10px;border-radius:8px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.mq.s1 .lb .car{display:inline-block;width:2px;height:1em;background:#fff;margin-left:2px;vertical-align:-2px;opacity:0}
.mq.s1 .fs{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:100px;background:rgba(20,17,15,.84);color:#fff;font:600 max(12px,min(1.7cqw,14px))/1 var(--s);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 26px -12px rgba(0,0,0,.6);transition:transform .15s,background .3s}
.mq.s1 .fs svg{width:1.2em;height:1.2em;fill:var(--acc);transition:fill .3s}
.mq.s1 .fs b{color:#5BE39A;font-weight:700;opacity:0}
.mq.s1 .fs.pr{transform:scale(.93)}
.mq.s1 .fs.on{background:#D96200}.mq.s1 .fs.on svg{fill:#fff}
.mq.s1 .puces{position:absolute;display:flex;flex-wrap:wrap;gap:8px}
.mq.s1 .puces.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mq.s1 .puces span{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:max(12px,min(1.9cqw,15px));line-height:1.2;padding:.62em .95em;border-radius:100px;opacity:0;box-shadow:0 10px 24px -18px rgba(43,24,16,.5)}
.mq.s1 .puces span::before{content:'✓';color:var(--acc);font-weight:700}
.mq.s1 .puces.g2 span{border-radius:12px;padding:.6em .75em}

/* ── 2. Notation ──────────────────────────────────────────────────────────── */
.mq.s2 .hd2{position:absolute;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.mq.s2 .pl{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:#fff;font-weight:600;font-size:max(12px,min(1.9cqw,16px));padding:.5em 1em;border-radius:100px;transition:transform .15s}
.mq.s2 .pl__i{font-style:normal}
.mq.s2 .pl.pr{transform:scale(.93)}
.mq.s2 .nn{font-size:max(20px,min(3.6cqw,30px));font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1;min-width:3em}
.mq.s2 .lt{font-size:max(12px,min(1.9cqw,16px));color:var(--soft)}
.mq.s2 .lg{margin-left:auto;display:flex;align-items:center;gap:6px;font:500 12px var(--m);color:var(--soft)}
.mq.s2 .lg i{width:9px;height:9px;border-radius:50%;margin-left:8px}
.mq.s2 .lg i.b{background:#D64545}.mq.s2 .lg i.m{background:#9C907F}.mq.s2 .lg i.g{background:var(--acc)}
.mq--etroit.s2 .lg{display:none}
.mq.s2 .ng{position:absolute;display:grid}
.mq.s2 .cd{position:relative;min-width:0;border-radius:8px;opacity:0}
.mq.s2 .cd .im{position:absolute;inset:0;border-radius:8px;background-color:#EDE8DD;background-size:cover;background-position:center;transition:opacity .3s,box-shadow .3s}
.mq.s2 .cd b{position:absolute;top:6px;right:6px;z-index:2;font:600 max(12px,min(1.6cqw,14px))/1 var(--m);color:#fff;padding:4px 6px;border-radius:6px;opacity:0;background:rgba(26,21,16,.75)}
.mq.s2 .cd.g b{background:#D96200}.mq.s2 .cd.b b{background:#C93C3C}.mq.s2 .cd.m b{background:#6E6355}
.mq.s2 .cd em{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);font:600 12px/1.15 var(--s);font-style:normal;color:#fff;padding:3px 7px;border-radius:6px;opacity:0;transition:opacity .3s;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mq.s2 .cd.b em{background:#C93C3C}.mq.s2 .cd.m em{background:rgba(26,21,16,.74)}
.mq.s2 .cd.on em{opacity:1}
.mq.s2 .cd.b.on .im{box-shadow:inset 0 0 0 3px #D64545}
.mq.s2 .cd.g.on:not(.hero) .im{box-shadow:inset 0 0 0 3px var(--acc)}
.mq.s2 .cd.hero b{display:none}
.mq.s2 .b5{background:var(--acc);box-shadow:0 8px 18px -8px rgba(249,119,8,.9)}
.mq.s2 .ft2{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:0}
.mq.s2 .cnt{font-size:max(12px,min(1.9cqw,16px));color:var(--soft);font-weight:500;font-variant-numeric:tabular-nums}
.mq.s2 .cnt.ok{color:#0F7D46;font-weight:600;font-size:max(14px,min(2.4cqw,20px))}
.mq.s2 .sup{position:relative;flex:none;background:#fff;color:#B42323;border:1px solid #F0B4B4;font-weight:600;font-size:max(12px,min(1.8cqw,15px));padding:.7em 1.1em;border-radius:12px;white-space:nowrap;transition:transform .15s,opacity .3s}
.mq.s2 .sup.pr{transform:scale(.95)}
.mq.s2 .sup .anneau{border-color:#D64545}
.mq.s2 .cf{position:absolute;width:min(340px,calc(100% - 24px));background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 30px 60px -20px rgba(43,24,16,.55),0 0 0 1px rgba(43,24,16,.07);opacity:0}
.mq.s2 .cf p{font-size:max(12px,min(1.8cqw,15px));line-height:1.4;color:var(--ink)}
.mq.s2 .cf.dur p{color:#9E1F1F;font-weight:500}
.mq.s2 .cf__b{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.mq.s2 .cf__b>span{position:relative;font-weight:600;font-size:max(12px,min(1.7cqw,14px));padding:.55em .9em;border-radius:9px;white-space:nowrap}
.mq.s2 .cf__non{background:#F2EEE6;color:var(--soft)}
.mq.s2 .cf__oui{background:#C93C3C;color:#fff;transition:transform .15s}
.mq.s2 .cf__oui.pr{transform:scale(.94)}
.mq.s2 .cf__oui .anneau{border-color:#C93C3C}
/* « Pourquoi ? » : trois vignettes portent un « ? », la carte donne les vrais poids. */
.mq.s2 .q{position:absolute;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);font:700 14px/1 var(--s);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.55),0 0 0 2px var(--acc)}
.mq.s2 .q::before{content:'';position:absolute;inset:-8px}
.mq.s2 .q[aria-pressed="true"]{background:var(--acc);color:#fff}
.mq-why{position:absolute;z-index:6;width:260px;max-width:calc(100% - 20px);background:#fff;border-radius:16px;padding:14px 16px 12px;box-shadow:0 30px 60px -24px rgba(43,24,16,.55),0 0 0 1px rgba(43,24,16,.07);font-family:var(--s,'Instrument Sans',system-ui,sans-serif);color:var(--ink,#1A1510);line-height:1.35;text-align:left}
.mq-why--libre{position:relative;max-width:100%}
.mq-why[hidden]{display:none}
.mq-why__t{font:600 12px/1 var(--m,'JetBrains Mono',monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--soft,#6E665B);margin-bottom:9px}
.mq-why ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.mq-why li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--soft,#6E665B)}
.mq-why li b{font:600 14px var(--m,'JetBrains Mono',monospace);color:var(--ink,#1A1510)}
.mq-why li.p b{color:#0F7D46}.mq-why li.m b{color:#B42323}
.mq-why__n{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line,#E6E0D4);margin-top:9px;padding-top:8px;font-weight:600;font-size:14px}
.mq-why__n b{font-size:26px;letter-spacing:-.04em;line-height:1;color:#D96200}

/* ── 3. Sélection ─────────────────────────────────────────────────────────── */
.mq.s3 .rh{position:absolute;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.mq.s3 .rh b{font-size:max(17px,min(3.2cqw,28px));font-weight:600;letter-spacing:-.04em;line-height:1.1}
.mq.s3 .rh .rn{font-size:max(13px,min(2cqw,18px));color:var(--soft);font-variant-numeric:tabular-nums}
.mq.s3 .rh em{margin-left:auto;font:500 12px var(--m);font-style:normal;color:var(--soft)}
.mq--etroit.s3 .rh em{display:none}
.mq.s3 .s3b{position:absolute;border-radius:12px;background:#EDE8DD}
.mq.s3 .d3{position:absolute;opacity:0}
.mq.s3 .sc{display:flex;align-items:baseline;gap:10px}
.mq.s3 .sc span{font:600 12px var(--m);letter-spacing:.18em;color:#C45A00}
.mq.s3 .sc b{font-size:max(24px,min(4.4cqw,40px));font-weight:600;letter-spacing:-.05em;line-height:1}
.mq.s3 .bn{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.mq.s3 .bn span{font-size:max(12px,min(1.6cqw,14px));font-weight:500;color:#0E6E3E;background:rgba(22,179,100,.13);padding:.4em .85em;border-radius:100px;opacity:0}
.mq.s3 .ai{font-size:max(12px,min(1.8cqw,15px));line-height:1.45;color:var(--soft);min-height:2.9em}
.mq.s3 .g3{position:absolute;display:grid}
.mq.s3 .c3{position:relative;min-width:0;border-radius:10px;background-color:#EDE8DD;background-size:cover;background-position:center;opacity:0;overflow:hidden}
.mq.s3 .c3 b{position:absolute;left:5px;bottom:5px;font:600 12px/1 var(--m);color:#fff;background:rgba(26,21,16,.8);padding:4px 6px;border-radius:6px;white-space:nowrap}
.mq.s3 .c3.sw{box-shadow:inset 0 0 0 3px #16B364}.mq.s3 .c3.sw b{background:#0F7D46}
.mq.s3 .rj{position:absolute;inset:0;background:rgba(180,35,35,.66);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:max(12px,min(1.8cqw,15px));opacity:0}
.mq.s3 .rj span{transition:transform .15s}
.mq.s3 .rj.pr span{transform:scale(.9)}
.mq.s3 .rj .anneau{border-color:#fff}
.mq.s3 .toast{position:absolute;background:var(--ink);color:#fff;font-size:max(12px,min(1.8cqw,15px));font-weight:500;padding:.65em 1.1em;border-radius:100px;opacity:0;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.mq.s3 .rk{position:absolute;display:flex;gap:6px;opacity:0}
.mq.s3 .rk b{background:var(--ink);color:#fff;font:700 max(12px,min(1.7cqw,15px))/1 var(--m);padding:6px 9px;border-radius:8px}
.mq.s3 .rk span{background:var(--acc);color:#fff;font:600 max(12px,min(1.7cqw,15px))/1 var(--m);padding:6px 9px;border-radius:8px}
/* La carte de commande vit hors du cadre (opts.carte) : flottante sur ordinateur, en ligne sur téléphone. */
.mq-cmd{background:#fff;border:1px solid var(--line,#E6E0D4);border-radius:20px;padding:18px;box-shadow:0 30px 60px -30px rgba(43,24,16,.5);font-family:var(--s,'Instrument Sans',system-ui,sans-serif);color:var(--ink,#1A1510);text-align:left}
.mq-cmd__q{font-size:14px;line-height:1.35;color:var(--soft,#6E665B);margin:0 0 10px}
.mq-cmd__p{display:flex;flex-wrap:wrap;gap:6px}
.mq-cmd__p button{flex:1 0 auto;min-height:44px;min-width:48px;padding:0 10px;border-radius:100px;border:1px solid var(--line,#E6E0D4);background:#fff;font:600 14px var(--m,'JetBrains Mono',monospace);color:var(--soft,#6E665B);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mq-cmd__p button:hover{border-color:var(--ink,#1A1510);color:var(--ink,#1A1510)}
.mq-cmd__p button[aria-pressed="true"]{background:var(--ink,#1A1510);border-color:var(--ink,#1A1510);color:#fff}
.mq-cmd__go{display:block;width:100%;margin-top:12px;min-height:48px;padding:10px 14px;border:0;border-radius:14px;background:var(--acc,#F97708);color:#fff;font:700 16px/1.2 var(--s,'Instrument Sans',system-ui,sans-serif);cursor:pointer;box-shadow:0 16px 32px -18px rgba(249,119,8,.9);transition:background .2s}
.mq-cmd__go:hover{background:var(--acc-d,#D96200)}
.mq-cmd button:focus-visible{outline:2px solid var(--acc,#F97708);outline-offset:2px}

/* ── 4. Galerie ───────────────────────────────────────────────────────────── */
.mq.s4 .br{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:7px;padding:0 14px;background:#FAF8F3;border-bottom:1px solid var(--line)}
.mq.s4 .br>i{flex:none;width:10px;height:10px;border-radius:50%;background:#E0D9CC}
.mq.s4 .adr{display:flex;align-items:center;gap:5px;min-width:0;margin-left:8px;overflow:hidden;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:100px;padding:5px 12px;font:500 12px var(--m);color:var(--soft)}
.mq.s4 .adr b{color:var(--ink);font-weight:600}
.mq.s4 .adr svg{flex:none;width:12px;height:12px;fill:#0F7D46;color:#0F7D46}
.mq--etroit.s4 .br>i{display:none}
.mq--etroit.s4 .adr{margin-left:0}
.mq.s4 .s4c{position:absolute;left:0;right:0}
.mq.s4 .s4o{position:absolute;overflow:hidden}
.mq.s4 .band{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--g-tete);display:none;transition:background .35s}
.mq.s4 .scrim{position:absolute;inset:0;background:linear-gradient(rgba(10,8,6,0) 32%,rgba(10,8,6,.74));opacity:0}
.mq.s4 .txt{position:absolute;left:6%;right:6%;bottom:9%;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.mq.s4 .acc{display:block;width:clamp(36px,8cqw,70px);height:3px;border-radius:2px;margin-bottom:12px;background:var(--g-acc);transition:background .35s}
.mq.s4 .ttl{display:flex;align-items:center;flex-wrap:wrap;min-height:1.05em;font-size:max(26px,min(6cqw,58px));line-height:1.05}
.mq.s4 .ttl u{display:inline-block;width:3px;height:.9em;margin-left:4px;background:var(--acc);text-decoration:none}
.mq.s4 .dt{margin-top:10px;font:500 max(12px,min(1.7cqw,14px)) var(--m);letter-spacing:.2em;opacity:0}
.mq.s4 .cta{display:inline-flex;margin-top:14px;padding:.7em 1.25em;border-radius:10px;font-weight:600;font-size:max(12px,min(1.9cqw,16px));text-shadow:none;background:var(--g-acc);color:var(--g-cta);opacity:0;transition:background .35s,color .35s}
.mq.s4 .m-centree .scrim{background:radial-gradient(70% 60% at 50% 55%,rgba(10,8,6,.5),rgba(10,8,6,.18))}
.mq.s4 .m-centree .txt{left:8%;right:8%;top:50%;bottom:auto;translate:0 -50%;display:flex;flex-direction:column;align-items:center;text-align:center}
.mq.s4 .m-centree .ttl{justify-content:center}
.mq.s4 .m-edito .band{display:block}
.mq.s4 .m-edito .scrim{display:none}
.mq.s4 .m-edito .txt{left:4%;right:auto;width:30%;top:50%;bottom:auto;translate:0 -50%;color:var(--g-band-txt);text-shadow:none}
.mq.s4 .m-edito .ttl{font-size:max(20px,min(3.6cqw,38px))}
.mq.s4 .m-edito .dt{letter-spacing:.14em}
.mq.s4 .pan{position:absolute;background:#fff;border-radius:18px;padding:16px;box-shadow:0 30px 60px -30px rgba(43,24,16,.5);color:var(--ink);opacity:0}
.mq.s4 .pan.inerte{pointer-events:none}
.mq.s4 .pan .l{font:600 12px/1 var(--m);letter-spacing:.14em;color:var(--soft);margin:0 0 9px}
.mq.s4 .pan .grp+.grp{margin-top:14px}
.mq.s4 .sw,.mq.s4 .ly,.mq.s4 .ft{display:flex;gap:8px}
.mq.s4 .sw button{position:relative;flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(26,21,16,.16);background:linear-gradient(135deg,var(--c) 52%,var(--a) 52%);transition:box-shadow .3s,transform .15s}
.mq.s4 .sw button::before{content:'';position:absolute;inset:-7px}
.mq.s4 .sw button.pr{transform:scale(.88)}
.mq.s4 .sw button[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.mq.s4 .ly button{position:relative;flex:1;min-width:0;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff}
.mq.s4 .ly i{position:absolute;inset:5px;border-radius:4px;background:#D9D1C3;overflow:hidden}
.mq.s4 .ly i::after{content:'';position:absolute;height:4px;border-radius:2px;background:#fff}
.mq.s4 .ly .m-centree::after{left:30%;right:30%;top:calc(50% - 2px)}
.mq.s4 .ly .m-gauche::after{left:12%;width:42%;bottom:18%}
.mq.s4 .ly .m-edito::before{content:'';position:absolute;left:0;top:0;bottom:0;width:40%;background:#F2EEE6}
.mq.s4 .ly .m-edito::after{left:8%;width:24%;top:calc(50% - 2px);background:#9C907F}
.mq.s4 .ft button{flex:1;min-width:44px;min-height:36px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:18px}
.mq.s4 .ly button[aria-pressed="true"],.mq.s4 .ft button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mq.s4 .pan.rang{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:10px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;box-shadow:none}
.mq.s4 .pan.rang .grp+.grp{margin-top:0}
.mq.s4 .pan.rang .g-m{grid-column:1 / -1}
.mq.s4 .pan.rang .l{margin-bottom:7px}
.mq.s4 .pan.rang .sw{gap:7px}
.mq.s4 .pan.rang .sw button{width:32px;height:32px}
.mq.s4 .pan.rang .ly button{flex:0 0 64px;height:36px}
.mq.s4 .s4b{position:absolute;display:flex;flex-direction:column;gap:10px;opacity:0}
.mq.s4 .tabs{flex:none;display:flex;gap:max(12px,2.4cqw);overflow:hidden;white-space:nowrap;font-size:max(12px,min(1.8cqw,15px));color:var(--g-sous,var(--soft));-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent);transition:color .35s}
.mq.s4 .tabs .on{color:var(--g-txt,var(--ink));font-weight:600;border-bottom:2px solid var(--g-acc);padding-bottom:3px}
.mq.s4 .th{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.mq--etroit.s4 .th{grid-template-columns:repeat(3,1fr)}
.mq.s4 .th i{border-radius:8px;background-color:#EDE8DD;background-size:cover;background-position:center;opacity:0}

/* ── Téléphone (5 livraison, 6 selfie) : --pu = un centième de sa largeur ─── */
.mq .ph{position:absolute;border-radius:calc(var(--pu) * 14);background:#0E0C0A;padding:calc(var(--pu) * 2.3);box-shadow:0 50px 90px -40px rgba(43,24,16,.6),inset 0 0 0 2px #2a2622}
.mq .ph .scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--pu) * 11.8);background:#F2EFE8}
.mq .ph .scr::before{content:'';position:absolute;left:50%;top:1.5%;z-index:9;width:30%;height:3.5%;border-radius:40px;background:#000;transform:translateX(-50%)}
.mq .ph.plat{padding:0;border-radius:0;background:none;box-shadow:none}
.mq .ph.plat .scr{border-radius:0;background:var(--paper,#FAF8F3)}
.mq .ph.plat .scr::before{display:none}

/* ── 5. Livraison ─────────────────────────────────────────────────────────── */
.mq.s5 .chd{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:calc(var(--pu) * 3.4);padding:calc(var(--pu) * 13) calc(var(--pu) * 5) calc(var(--pu) * 3.4);background:#FAF8F3;border-bottom:1px solid var(--line)}
.mq.s5 .ph.plat .chd{padding:16px 18px 12px;background:#fff}
.mq.s5 .chd i{flex:none;width:max(30px,calc(var(--pu) * 11));height:max(30px,calc(var(--pu) * 11));border-radius:50%;background-color:#EDE8DD;background-size:cover;background-position:center}
.mq.s5 .chd b{display:block;font-size:max(13px,calc(var(--pu) * 5));font-weight:600;line-height:1.2}
.mq.s5 .chd span{display:block;font-size:12px;color:#0F7D46}
.mq.s5 .fil{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:calc(var(--pu) * 3);padding:calc(var(--pu) * 5) calc(var(--pu) * 4)}
.mq.s5 .ph.plat .fil{gap:12px;padding:16px 16px}
.mq.s5 .bub{font-size:max(12px,calc(var(--pu) * 4.4));line-height:1.35;opacity:0;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.mq.s5 .ph.plat .bub{font-size:15px}
.mq.s5 .bub.out{align-self:flex-end;width:min(100%,calc(var(--pu) * 80));overflow:hidden;background:#fff;border-radius:calc(var(--pu) * 5) calc(var(--pu) * 5) calc(var(--pu) * 1.4) calc(var(--pu) * 5);transform-origin:bottom right}
.mq.s5 .ph.plat .bub.out{width:86%;border-radius:18px 18px 6px 18px}
.mq.s5 .s5s{width:100%;aspect-ratio:3/2;background:#EDE8DD}
.mq.s5 .bt{padding:calc(var(--pu) * 3) calc(var(--pu) * 4) calc(var(--pu) * 1)}
.mq.s5 .ph.plat .bt{padding:10px 14px 4px}
.mq.s5 .bt em{display:block;margin-top:4px;font:400 12px/1.3 var(--m);font-style:normal;color:#B04E00;overflow-wrap:anywhere}
.mq.s5 .bt em b{font-weight:600}
.mq.s5 .bt small{display:block;margin-top:3px;font:400 12px/1.3 var(--m);color:var(--soft)}
.mq.s5 .tm{display:block;text-align:right;font-size:12px;color:#0F7D46;padding:0 calc(var(--pu) * 4) calc(var(--pu) * 2.4)}
.mq.s5 .ph.plat .tm{padding:0 14px 8px}
.mq.s5 .bub.in{align-self:flex-start;max-width:86%;background:#fff;border-radius:calc(var(--pu) * 5) calc(var(--pu) * 5) calc(var(--pu) * 5) calc(var(--pu) * 1.4);padding:calc(var(--pu) * 3) calc(var(--pu) * 4.2)}
.mq.s5 .ph.plat .bub.in{border-radius:18px 18px 18px 6px;padding:10px 14px}
.mq.s5 .saisie{position:absolute;display:flex;align-items:center;gap:4px;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.35);opacity:0}
.mq.s5 .saisie i{width:6px;height:6px;border-radius:50%;background:#A09789;animation:mq-pt 1s ease-in-out infinite}
.mq.s5 .saisie i:nth-child(2){animation-delay:.15s}.mq.s5 .saisie i:nth-child(3){animation-delay:.3s}
@keyframes mq-pt{50%{opacity:.3;transform:translateY(-2px)}}

/* ── 6. Selfie ────────────────────────────────────────────────────────────── */
.mq .ph.dk{box-shadow:0 60px 120px -40px rgba(0,0,0,.9),inset 0 0 0 2px #2a2622}
.mq.s6 .scr>div{position:absolute;inset:0}
.mq.s6 .cv{display:flex;flex-direction:column;align-items:center;padding:calc(var(--pu) * 14) calc(var(--pu) * 5) calc(var(--pu) * 7);background:#FAF8F3}
.mq.s6 .s6c{position:relative;flex:0 0 44%;width:100%;border-radius:calc(var(--pu) * 4);background:#EDE8DD}
.mq.s6 .cvt{margin-top:calc(var(--pu) * 6);text-align:center}
.mq.s6 .cvt b{display:block;font-size:max(17px,calc(var(--pu) * 8.4));font-weight:500;letter-spacing:-.045em;line-height:1.05}
.mq.s6 .cvt span{display:block;margin-top:6px;font:500 12px var(--m);letter-spacing:.14em;color:var(--soft)}
.mq.s6 .cvb{position:relative;width:100%;margin-top:auto;padding:calc(var(--pu) * 4) 4px;border-radius:calc(var(--pu) * 4);background:var(--acc);color:#fff;text-align:center;font-weight:600;font-size:max(12px,calc(var(--pu) * 4.6));transition:transform .15s}
.mq.s6 .cvb.pr{transform:scale(.95)}
.mq.s6 .tap{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;pointer-events:none}
.mq.s6 .cvn{margin-top:calc(var(--pu) * 3);font-size:12px;color:var(--soft)}
.mq.s6 .cam{overflow:hidden;background:#000;transform:translateY(100%)}
.mq.s6 .sf{position:absolute;inset:0;background-size:cover;background-position:52% 40%;transform:scaleX(-1)}
.mq.s6 .md{position:absolute;left:0;right:0;top:calc(var(--pu) * 14);z-index:2;display:flex;justify-content:center;gap:6px;font:600 12px var(--m);letter-spacing:.04em;color:rgba(255,255,255,.88)}
.mq.s6 .md span{padding:3px 7px;border:1px solid rgba(255,255,255,.35);border-radius:6px;background:rgba(0,0,0,.25)}
.mq.s6 .md .on{background:var(--acc);border-color:var(--acc);color:#fff}
.mq.s6 .ov{position:absolute;left:21%;right:17%;top:26%;bottom:31%;overflow:hidden;border-radius:50%;box-shadow:0 0 0 calc(var(--pu) * .9) rgba(255,255,255,.75),0 0 0 999px rgba(0,0,0,.5);transition:box-shadow .4s}
.mq.s6 .ov.ok{box-shadow:0 0 0 calc(var(--pu) * 1.2) var(--acc),0 0 0 999px rgba(0,0,0,.5)}
.mq.s6 .ov svg{position:absolute;inset:8% 10%;width:80%;height:84%;overflow:visible;opacity:0}
.mq.s6 .ov circle{fill:var(--acc)}
.mq.s6 .ov polyline{fill:none;stroke:var(--acc);stroke-width:.5;opacity:.75;stroke-dasharray:100;stroke-dashoffset:calc(var(--dl,100) * 1)}
.mq.s6 .sl{position:absolute;left:0;right:0;height:3px;background:var(--acc);box-shadow:0 0 18px 4px rgba(249,119,8,.6)}
.mq.s6 .etat{position:absolute;left:0;right:0;top:72%;text-align:center;color:#fff}
.mq.s6 .etat b{display:block;font:700 12px var(--m);letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.mq.s6 .etat.ok b{color:#FF9A3D}
.mq.s6 .shb{position:absolute;left:50%;bottom:5%;width:calc(var(--pu) * 17);height:calc(var(--pu) * 17);margin-left:calc(var(--pu) * -8.5);border-radius:50%;border:calc(var(--pu) * 1.2) solid #fff;background:rgba(255,255,255,.25);transition:transform .15s}
.mq.s6 .shb.pr{transform:scale(.85)}
.mq.s6 .fls{position:absolute;inset:0;background:#fff;opacity:0}
.mq.s6 .mt{display:flex;flex-direction:column;align-items:center;padding:calc(var(--pu) * 22) calc(var(--pu) * 6) 0;background:#14110F;color:#F0EDE4;opacity:0}
.mq.s6 .mc{text-align:center}
.mq.s6 .mc b{display:block;font-size:max(40px,calc(var(--pu) * 26));font-weight:600;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.mq.s6 .mc span{font-size:max(12px,calc(var(--pu) * 4.4));color:rgba(240,237,228,.66)}
.mq.s6 .mg{width:100%;margin-top:calc(var(--pu) * 10);display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--pu) * 1.6)}
.mq.s6 .mg i{aspect-ratio:1;border-radius:calc(var(--pu) * 1.8);background-color:#2A231E;background-size:cover;background-position:center 30%;opacity:0}
.mq.s6 .res{display:flex;flex-direction:column;overflow:hidden;padding:calc(var(--pu) * 13) calc(var(--pu) * 4) 0;background:#FAF8F3;transform:translateY(100%)}
.mq.s6 .s6s{position:relative;flex:0 0 calc(var(--pu) * 30);border-radius:calc(var(--pu) * 3);background:#EDE8DD}
.mq.s6 .rh{position:relative;display:flex;align-items:flex-end;gap:calc(var(--pu) * 3);margin-top:calc(var(--pu) * -6);padding:0 calc(var(--pu) * 1.5)}
.mq.s6 .rh i{flex:none;width:max(30px,calc(var(--pu) * 13));aspect-ratio:1;border-radius:50%;background-color:#EDE8DD;background-size:cover;background-position:center 40%;box-shadow:0 0 0 3px #FAF8F3,0 0 0 5px var(--acc)}
.mq.s6 .rh b{display:block;font-size:max(14px,calc(var(--pu) * 6));font-weight:600;letter-spacing:-.04em;line-height:1.1}
.mq.s6 .rh span{font:500 12px var(--m);letter-spacing:.08em;color:var(--soft)}
.mq.s6 .lk{margin-top:calc(var(--pu) * 3);padding:4px 10px;border-radius:12px;background:rgba(22,179,100,.13);color:#0E6E3E;font-size:12px;font-weight:500;line-height:1.3;text-align:center}
.mq.s6 .tb{display:flex;gap:6px;margin-top:calc(var(--pu) * 3);overflow:hidden;white-space:nowrap;font-size:12px;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.mq.s6 .tb span{flex:none;padding:3px 8px;border-radius:100px;border:1px solid var(--line);color:var(--soft)}
.mq.s6 .tb .on{background:#D96200;border-color:#D96200;color:#fff}
.mq.s6 .rgw{flex:1;min-height:0;margin-top:calc(var(--pu) * 3);overflow:hidden}
.mq.s6 .rg{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--pu) * 1.4)}
.mq.s6 .rg i{position:relative;aspect-ratio:1;border-radius:calc(var(--pu) * 2);background-color:#EDE8DD;background-size:cover;background-position:center 30%}
.mq.s6 .rg em{position:absolute;left:4px;bottom:4px;font:700 12px/1 var(--m);font-style:normal;color:#fff;background:rgba(15,125,70,.94);padding:2px 4px;border-radius:4px}
.mq.s6 .buy{position:absolute;left:4%;right:4%;bottom:3%;display:flex;gap:calc(var(--pu) * 2);transform:translateY(140%)}
.mq.s6 .buy span,.mq.s6 .buy b{flex:1;padding:calc(var(--pu) * 3.4) 4px;border-radius:calc(var(--pu) * 3.4);text-align:center;font-size:12px;font-weight:600;white-space:nowrap}
.mq.s6 .buy span{background:#fff;border:1px solid var(--line);color:var(--ink)}
.mq.s6 .buy b{background:var(--ink);color:#fff}
.mq.s6 .fondu{position:absolute;pointer-events:none;background:linear-gradient(rgba(28,22,18,0),#1C1612 82%)}
.mq.s6 .etapes{position:absolute;display:grid;gap:8px}
.mq.s6 .etapes.g2{grid-template-columns:1fr 1fr}
.mq.s6 .etapes button{min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid rgba(240,237,228,.18);background:rgba(255,255,255,.04);color:rgba(240,237,228,.82);font:600 13px/1.25 var(--s);text-align:left;transition:background .25s,border-color .25s,color .25s}
.mq.s6 .etapes button:hover{border-color:rgba(240,237,228,.4)}
.mq.s6 .etapes button[aria-pressed="true"]{background:rgba(22,179,100,.16);border-color:#16B364;color:#F0EDE4}
.mq.s6 .lecture{position:absolute;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px 0 16px;border-radius:100px;border:1px solid rgba(240,237,228,.22);background:rgba(20,17,15,.78);color:#F0EDE4;font:600 13px var(--s)}
.mq.s6 .lecture i{position:relative;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.mq.s6 .lecture.en-pause i{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ── 7. Mur des invités ───────────────────────────────────────────────────── */
.mq.s7{color:#F0EDE4}
.mq.s7 .wh{position:absolute;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.mq.s7 .live{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:100px;background:rgba(22,179,100,.15);color:#6EE7A8;font:700 12px var(--m);letter-spacing:.14em}
.mq.s7 .live i{width:7px;height:7px;border-radius:50%;background:#16B364;box-shadow:0 0 0 3px rgba(22,179,100,.25)}
.mq.s7 .wn{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.mq.s7 .wc{font-size:max(20px,min(3.4cqw,30px));font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.mq.s7 .wt{font-size:max(12px,min(1.9cqw,16px));color:rgba(240,237,228,.7)}
.mq.s7 .wg{position:absolute;display:grid}
.mq.s7 .s7s{min-height:0;border-radius:10px;background:#2A231E}
.mq.s7 .w{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:10px;background-color:#2A231E;background-size:cover;background-position:center;opacity:0;transition:box-shadow .35s}
.mq.s7 .w span{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 5px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.74));font:500 12px var(--m);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq.s7 .w.nn span{display:none}
.mq.s7 .w em{position:absolute;top:6px;left:6px;padding:3px 6px;border-radius:5px;background:#D96200;color:#fff;font:700 12px/1 var(--m);font-style:normal;letter-spacing:.08em;opacity:0;transition:opacity .3s}
.mq.s7 .w.me{box-shadow:inset 0 0 0 3px var(--acc)}
.mq.s7 .w.me em{opacity:1}
.mq.s7 .carton{position:absolute;overflow:hidden;padding:14px 12px 12px;border-radius:14px;background:#F0EDE4;color:var(--ink);text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);opacity:0;transform-origin:30% 100%}
.mq.s7 .carton .tb{font:700 12px var(--m);letter-spacing:.2em;color:#B04E00}
.mq.s7 .carton .nm{margin:6px 0 10px;font-size:max(13px,min(1.9cqw,16px));font-weight:500;letter-spacing:-.02em;line-height:1.2}
.mq.s7 .carton .qr{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:min(62%,110px);margin:0 auto}
.mq.s7 .carton .qr i{aspect-ratio:1;border-radius:1.5px;background:var(--ink)}
.mq.s7 .carton .qr i.v{background:transparent}
.mq.s7 .carton .cd{margin-top:10px;font:700 max(16px,min(2.6cqw,22px))/1 var(--m);letter-spacing:.2em}

/* Avec « réduire les animations » : aucun mouvement, la maquette est posée sur sa fin. */
@media (prefers-reduced-motion: reduce){
  .mq *,.mq-cmd *{transition:none!important;animation:none!important}
  .mq.s6 .lecture{display:none}
}