/* ============================================================
   SNAP STORY — prototype de site (6 pages + brief créatif)
   Palette PROVISOIRE : à caler sur le logo officiel.
   ============================================================ */
:root{
  /* couleurs relevées sur le logo Snap Story */
  --navy:#0E2A52;
  --bg:#F4F6F9;
  --bg-alt:#E7EDF5;
  --fg:#0E2A52;
  --muted:#546983;
  --line:#D3DDEA;
  --card:#FFFFFF;
  --deep-bg:#0E2A52;
  --deep-fg:#F1F6FC;
  --deep-muted:#9DB3CE;
  --deep-line:rgba(255,255,255,.16);
  --flash:#FCDE5A;
  --flash-deep:#F6C600;
  --snap:#0CBADE; --snap-ink:#0A6E87; --snap-titre:#0A8FB0;
  --danger:#C42D19; --danger-soft:#FDECE9;
  --shadow:0 18px 40px -24px rgba(14,42,82,.42);
  --r-s:6px; --r-m:14px; --r-l:26px;
  --maxw:1180px;
  --pad:clamp(18px,4vw,44px);
  --gap:clamp(18px,3vw,32px);
  --sec:clamp(64px,9vw,132px);
  --d-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --d-disp:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --d-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#081A31; --bg-alt:#0C2343; --fg:#EDF3FA; --muted:#9DB3CE;
    --line:rgba(255,255,255,.14); --card:#0E2A52;
    --deep-bg:#123262; --deep-line:rgba(255,255,255,.18);
    --snap:#2ACDEE; --snap-ink:#6FE0F7; --snap-titre:#2ACDEE;
    --danger:#FF8778; --danger-soft:rgba(255,135,120,.14);
    --shadow:0 18px 44px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#081A31; --bg-alt:#0C2343; --fg:#EDF3FA; --muted:#9DB3CE;
  --line:rgba(255,255,255,.14); --card:#0E2A52;
  --deep-bg:#123262; --deep-line:rgba(255,255,255,.18);
  --snap:#2ACDEE; --snap-ink:#6FE0F7; --snap-titre:#2ACDEE;
  --danger:#FF8778; --danger-soft:rgba(255,135,120,.14);
  --shadow:0 18px 44px -26px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--d-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--d-disp);font-weight:800;line-height:.94;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--snap);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--d-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--muted);max-width:60ch}
.h1{font-size:clamp(2.6rem,8.4vw,6rem)}
.h2{font-size:clamp(2rem,5vw,3.4rem)}
.h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.015em}
.up{text-transform:uppercase}
.sec{padding-block:var(--sec)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:10px;z-index:80;background:var(--flash);color:var(--navy);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
.ferr{display:none;color:var(--danger);font-size:.86rem;line-height:1.4}
.ferr.on{display:block}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-soft)}
.field abbr{color:var(--danger);text-decoration:none}
.hint{font-size:.84rem;color:var(--muted)}
.summary{display:none;border:1px solid var(--danger);border-left-width:4px;border-radius:10px;padding:14px 16px;margin-bottom:18px;background:var(--danger-soft)}
.summary.on{display:block}
.summary b{display:block;margin-bottom:6px}
.summary .jump{background:none;border:0;padding:0 2px;color:var(--danger);font:inherit;text-decoration:underline;cursor:pointer}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}

/* ---------- grain + viseur ---------- */
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.12;mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grain{mix-blend-mode:screen;opacity:.1}}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.1}
.viewfinder{position:fixed;inset:12px;pointer-events:none;z-index:58}
.vf-c{position:absolute;width:26px;height:26px;border:2px solid var(--snap);opacity:.55}
.vf-c.tl{top:0;left:0;border-right:0;border-bottom:0}
.vf-c.tr{top:0;right:0;border-left:0;border-bottom:0}
.vf-c.bl{bottom:0;left:0;border-right:0;border-top:0}
.vf-c.br{bottom:0;right:0;border-left:0;border-top:0}
.vf-stamp{position:absolute;right:34px;bottom:-2px;color:var(--snap-ink);font-family:var(--d-mono);font-size:.68rem;letter-spacing:.1em}
.vf-rec{position:absolute;left:34px;bottom:-2px;color:var(--snap-ink);font-family:var(--d-mono);font-size:.68rem;letter-spacing:.16em;display:flex;align-items:center;gap:7px}
.vf-rec i{width:7px;height:7px;border-radius:50%;background:var(--snap);box-shadow:0 0 0 3px color-mix(in srgb,var(--snap) 26%,transparent)}
@media (max-width:860px){.viewfinder{display:none}}

/* ---------- header ---------- */
.univers-bar{background:var(--navy);color:#fff;font-size:.86rem;border-bottom:1px solid rgba(255,255,255,.12)}
.univers-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.univers-back{display:inline-flex;align-items:center;gap:.45em;min-height:44px;color:#fff;text-decoration:none;touch-action:manipulation}
.univers-back:hover{text-decoration:underline}
.univers-back:focus-visible{outline:3px solid var(--flash);outline-offset:2px;border-radius:4px}
.univers-now{margin:0;color:#C9D7E8;display:flex;align-items:center;gap:.5em}
.univers-now strong{color:var(--flash)}
.univers-dot{width:8px;height:8px;border-radius:50%;background:var(--snap)}
@media (max-width:640px){.univers-now{display:none}}
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);height:74px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.logo img{width:46px;height:46px;border-radius:10px;box-shadow:0 6px 18px -10px rgba(14,42,82,.7)}
footer .logo img{width:88px;height:88px;border-radius:16px}
.nav-links{display:flex;gap:clamp(10px,1.4vw,20px);margin-left:auto}
.nav-links a{text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted);padding:13px 0;position:relative;white-space:nowrap;touch-action:manipulation}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--snap);transition:right .28s ease}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--fg)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;min-height:44px;padding:10px 16px;cursor:pointer;touch-action:manipulation}
.nav .btn-p{padding:13px 20px;font-size:.88rem}
@media (max-width:1280px){.nav .btn-ghost{display:none}}
@media (max-width:1140px){
  .nav-links{position:fixed;inset:74px 0 auto;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:14px var(--pad) 22px;gap:2px;margin:0;transform:translateY(-125%);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
  .nav-links:not(.open){visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.3,1),visibility 0s .35s}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.35rem;font-family:var(--d-disp);font-weight:600;padding:10px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .nav .btn-p{display:none}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 22px;white-space:nowrap;touch-action:manipulation;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.01em;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .22s ease,background .2s ease;text-transform:uppercase;font-family:var(--d-body)}
.btn-p{background:var(--flash);color:var(--navy);box-shadow:0 0 0 0 rgba(255,216,61,.55)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 0 -6px var(--flash-deep),0 0 34px -6px rgba(255,216,61,.8)}
.btn-s{border-color:currentColor;background:transparent}
.btn-s:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btn:active{transform:translateY(0) scale(.985)}
.card:active{transform:translateY(-2px) scale(.995)}
.btn-ghost{padding-inline:0;border:0;border-bottom:2px solid var(--snap);border-radius:0;background:none}
.btn .dot{width:8px;height:8px;border-radius:50%;background:var(--navy);opacity:.55}
.btn-s .dot{background:currentColor}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- photo placeholders ---------- */
.ph{position:relative;overflow:hidden;background:var(--bg-alt);isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;z-index:0}
.ph::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 50% 50%,transparent 55%,rgba(14,42,82,.4));z-index:1}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph img.top{object-position:50% 26%}
.ph.shot::after{background-image:linear-gradient(to top,rgba(10,28,54,.62),rgba(10,28,54,0) 45%);z-index:2}
.ph .tag{position:absolute;left:10px;bottom:10px;z-index:4;font-family:var(--d-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(14,42,82,.78);padding:5px 8px;border-radius:4px;backdrop-filter:blur(4px)}
.ph .slot{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center;gap:6px;color:rgba(255,255,255,.9);font-family:var(--d-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;padding:12px}
.ph .slot i{display:block;width:30px;height:30px;margin:0 auto 4px;border:2px solid rgba(255,255,255,.8);border-radius:50%;position:relative}
.ph .slot i::after{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.55);border-radius:50%}
.p1::before{background:linear-gradient(140deg,#0CBADE,#0E2A52 62%,#FCDE5A)}
.p2::before{background:linear-gradient(200deg,#FCDE5A,#0CBADE 55%,#0E2A52)}
.p3::before{background:linear-gradient(30deg,#0E2A52,#2E6E9E 48%,#FCDE5A)}
.p4::before{background:linear-gradient(160deg,#0E2A52,#0CBADE 70%,#FCDE5A)}
.p5::before{background:linear-gradient(320deg,#0E2A52,#0CBADE 75%)}
.p6::before{background:linear-gradient(70deg,#0E2A52,#FCDE5A 90%)}
.p7::before{background:linear-gradient(215deg,#0CBADE,#FCDE5A 85%)}
.p8::before{background:linear-gradient(115deg,#0E2A52 20%,#2E6E9E 70%,#FCDE5A)}
.ph.zoom{transition:transform .42s cubic-bezier(.2,.8,.3,1)}
a:hover .ph.zoom,.card:hover .ph.zoom{transform:scale(1.05)}
.flashable{position:relative}
.flashable::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4;transition:opacity .5s ease}
.flashable:hover::after{opacity:.22;transition:opacity .06s ease}

/* ---------- bande photo ---------- */
.strip{background:#fff;padding:9px 9px 34px;border-radius:4px;box-shadow:0 26px 50px -26px rgba(14,42,82,.6);display:grid;gap:7px;position:relative}
.strip .ph{aspect-ratio:4/3;border-radius:2px}
.strip .cap{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:var(--d-mono);font-size:.56rem;letter-spacing:.16em;color:#5A6B82;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{padding-top:clamp(34px,6vw,72px);padding-bottom:clamp(40px,7vw,90px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,5vw,60px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--d-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--snap-ink);border:1px solid currentColor;padding:6px 12px;border-radius:999px;margin-bottom:22px}
.hero h1 span{display:block}
.h1 .y{color:var(--snap-titre)}
.hero .lead{margin-top:20px;font-size:clamp(1.05rem,1.8vw,1.22rem)}
.hero .cta-row{margin-top:30px}
.hero-art{position:relative;min-height:clamp(320px,46vw,470px)}
.hero-art .strip{position:absolute;width:40%;top:0;left:4%;transform:rotate(-6deg)}
.hero-art .pol{position:absolute;width:52%;right:0;top:16%;background:#fff;padding:11px 11px 44px;border-radius:4px;transform:rotate(4.5deg);box-shadow:0 30px 60px -30px rgba(14,42,82,.78)}
.hero-art .pol .ph{aspect-ratio:5/4;border-radius:2px}
.hero-art .pol .cap{position:absolute;bottom:13px;left:14px;font-family:var(--d-mono);font-size:.58rem;letter-spacing:.1em;color:#5A6B82;text-transform:uppercase}
.hero-art .pol2{position:absolute;width:44%;left:0;bottom:0;background:#fff;padding:10px 10px 38px;border-radius:4px;transform:rotate(-2deg);box-shadow:0 30px 60px -30px rgba(14,42,82,.78)}
.hero-art .pol2 .ph{aspect-ratio:1;border-radius:2px}
.burst{position:absolute;right:8%;top:6%;width:70px;height:70px;pointer-events:none}
.burst span{position:absolute;left:50%;top:50%;width:2px;height:26px;background:var(--flash);transform-origin:50% 0;border-radius:2px}
.proof{border-block:1px solid var(--line);background:var(--bg-alt)}
.proof-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,4vw,48px);padding-block:22px}
.stars{color:var(--flash-deep);letter-spacing:.16em;font-size:1.15rem}
.proof b{font-family:var(--d-disp);font-size:1.7rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof .sep{width:1px;height:30px;background:var(--line)}

/* ---------- sections sombres ---------- */
.deep{background:var(--deep-bg);color:var(--deep-fg)}
.deep .lead,.deep .muted{color:var(--deep-muted)}
.deep .btn-s{border-color:rgba(255,255,255,.5)}
.deep hr,.deep .rule{border-color:var(--deep-line)}

/* ---------- grilles ---------- */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr}}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head .mono{color:var(--snap-ink);display:block;margin-bottom:14px}
.deep .sec-head .mono,.deep .benefit .n{color:var(--snap)}

/* bénéfices */
.benefit{display:grid;gap:12px;padding-top:22px;border-top:2px solid var(--fg)}
.deep .benefit{border-color:var(--deep-fg)}
.benefit .n{font-family:var(--d-mono);font-size:.7rem;letter-spacing:.14em;color:var(--snap-ink)}
.benefit p{color:var(--muted);font-size:.97rem}
.deep .benefit p{color:var(--deep-muted)}

/* timeline */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:96px 1fr 34%;gap:clamp(16px,3vw,40px);align-items:center;padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--deep-line)}
.step:last-child{border-bottom:1px solid var(--deep-line)}
.step .num{font-family:var(--d-disp);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--deep-fg);opacity:.65}
.step:hover .num{color:var(--flash);-webkit-text-stroke:1.5px var(--flash);opacity:1}
.step .ph{aspect-ratio:16/10;border-radius:var(--r-s)}
@media (max-width:780px){.step{grid-template-columns:64px 1fr}.step .ph{display:none}}

/* cartes événements */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .25s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ph{aspect-ratio:4/3}
.card .body{padding:20px 20px 24px;display:grid;gap:8px}
.card .body p{color:var(--muted);font-size:.95rem}
.card .go{margin-top:6px;font-family:var(--d-mono);font-size:.68rem;letter-spacing:.14em;color:var(--snap-ink);text-transform:uppercase}

/* galerie */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filters button{background:transparent;border:1px solid var(--line);border-radius:999px;min-height:44px;padding:10px 18px;touch-action:manipulation;font-family:var(--d-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:.2s}
.filters button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.masonry{columns:3;column-gap:var(--gap)}
@media (max-width:860px){.masonry{columns:2}}
@media (max-width:520px){.masonry{columns:1}}
.masonry .tile{break-inside:avoid;margin-bottom:var(--gap);border-radius:var(--r-m);overflow:hidden}
.tile.t-tall .ph{aspect-ratio:3/4}
.tile.t-wide .ph{aspect-ratio:4/3}
.tile.t-sq .ph{aspect-ratio:1}

/* avis */
.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:26px;display:grid;gap:14px;align-content:start}
.quote p{font-size:.96rem;line-height:1.62;border-left:3px solid var(--flash);padding-left:15px;color:var(--fg)}
.deep .quote p{color:var(--deep-fg)}
.quote .stars{font-size:1rem}
.quote .who{font-family:var(--d-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:none;padding:0}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,4vw,56px)}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.portrait{display:grid;gap:20px;align-content:start}
.portrait .ph{aspect-ratio:4/5;border-radius:var(--r-l)}
.portrait h3{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.portrait .role{font-family:var(--d-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--snap-ink)}
.mini{border-left:3px solid var(--flash);padding-left:14px;font-size:.93rem;color:var(--muted);font-style:italic}
.deep .mini{color:var(--deep-muted)}
.values{display:grid;gap:0}
.value{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);padding-block:clamp(20px,3vw,30px);border-top:1px solid var(--line)}
.value:last-child{border-bottom:1px solid var(--line)}
.value .k{font-family:var(--d-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--snap-ink);width:9ch}
@media (max-width:640px){.value{grid-template-columns:1fr;gap:10px}.value .k{width:auto}}

/* cta final */
.bigcta{text-align:center;position:relative;overflow:hidden}
.bigcta h2{font-size:clamp(2.4rem,9vw,6.4rem)}
.bigcta .lead{margin:22px auto 32px;text-align:center}

/* formules */
.plan{border:1px solid var(--line);border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;gap:18px;background:var(--card)}
.plan.feature{background:var(--deep-bg);color:var(--deep-fg);border-color:transparent;position:relative}
.plan.feature .muted,.plan.feature li{color:var(--deep-muted)}
.plan .price{font-family:var(--d-disp);font-size:1.5rem;letter-spacing:-.02em}
.plan .price small{display:block;font-family:var(--d-mono);font-size:.64rem;letter-spacing:.12em;color:var(--snap-ink);text-transform:uppercase;margin-top:6px}
.plan ul{display:grid;gap:9px;font-size:.93rem;color:var(--muted)}
.plan li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start}
.plan li::before{content:"";width:9px;height:9px;margin-top:8px;background:var(--flash);border-radius:2px}
.plan .btn{margin-top:auto;justify-content:center}
.plan .impress{font-family:var(--d-disp);font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .impress small{display:block;font-family:var(--d-mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.plan .euro{font-family:var(--d-disp);font-weight:800;font-size:2rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--snap-ink)}
.plan .euro span{font-family:var(--d-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:6px}
.plan .rule{height:1px;background:var(--line);margin:2px 0}
.cond{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,36px);padding-block:22px;border-top:1px solid var(--line)}
.cond:last-child{border-bottom:1px solid var(--line)}
.cond .k{font-family:var(--d-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--snap-ink);width:12ch}
@media (max-width:640px){.cond{grid-template-columns:1fr;gap:8px}.cond .k{width:auto}}
.ribbon{position:absolute;top:18px;right:-34px;background:var(--flash);color:var(--navy);font-family:var(--d-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 40px;transform:rotate(38deg)}

/* formulaire */
.form-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-family:var(--d-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--snap);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--snap) 22%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:.88rem;transition:.18s}
.chips input:checked+span{background:var(--flash);border-color:var(--flash);color:var(--navy);font-weight:600}
.chips input:focus-visible+span{outline:3px solid var(--snap);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.aside{background:var(--bg-alt);border-radius:var(--r-l);padding:26px;display:grid;gap:18px;border:1px solid var(--line)}
.aside .row{display:grid;gap:4px}
.aside .row b{font-size:.95rem}
.aside .row span{color:var(--muted);font-size:.9rem}
.reassure{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--d-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.sent{display:none;border:2px solid var(--flash);border-radius:var(--r-l);padding:34px;text-align:center;background:var(--card)}
.sent.on{display:block}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{cursor:pointer;font-family:var(--d-disp);font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--snap);font-family:var(--d-mono);font-size:1.3rem}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--muted);max-width:70ch}

/* footer */
footer{background:var(--deep-bg);color:var(--deep-fg);padding-block:clamp(48px,7vw,80px) 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--gap)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--d-mono);font-weight:400;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--deep-muted);margin-bottom:14px}
footer a{text-decoration:none;color:var(--deep-fg);opacity:.82;font-size:.94rem;display:block;padding:4px 0}
footer a:hover{opacity:1;color:var(--flash)}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid var(--deep-line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--d-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-muted)}
.todo{display:inline-block;font-family:var(--d-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--snap-ink);border:1px dashed currentColor;padding:3px 7px;border-radius:4px}

/* sticky mobile */
.sticky-cta{position:fixed;left:10px;right:10px;bottom:10px;z-index:55;display:none;gap:8px}
.sticky-cta .btn{flex:1;justify-content:center;box-shadow:0 14px 30px -12px rgba(14,42,82,.6)}
.sticky-cta .tel{flex:0 0 auto;background:var(--deep-bg);color:var(--deep-fg);box-shadow:0 14px 30px -12px rgba(14,42,82,.6)}
@media (max-width:1140px){.sticky-cta{display:flex}body{padding-bottom:84px}}

/* flash de transition */
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:70}
#flash.go{animation:pop .34s ease-out}
@keyframes pop{0%{opacity:.95}100%{opacity:0}}

/* reveal */
.js .rv:not(.in){opacity:0;transform:translateY(18px)}
.rv{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.grid.rv.late.in>*,.masonry.rv.late.in>*{animation:rise .48s both cubic-bezier(.2,.8,.3,1)}
.grid.rv.late.in>:nth-child(2),.masonry.rv.late.in>:nth-child(2){animation-delay:.06s}
.grid.rv.late.in>:nth-child(3),.masonry.rv.late.in>:nth-child(3){animation-delay:.12s}
.grid.rv.late.in>:nth-child(4),.masonry.rv.late.in>:nth-child(4){animation-delay:.18s}
.grid.rv.late.in>:nth-child(5),.masonry.rv.late.in>:nth-child(5){animation-delay:.24s}
.grid.rv.late.in>:nth-child(6),.masonry.rv.late.in>:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv:not(.in){opacity:1;transform:none}
}

/* brief */
.tok{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tok div{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.tok i{display:block;height:64px}
.tok p{padding:10px 12px;font-family:var(--d-mono);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
pre{background:var(--deep-bg);color:var(--deep-fg);padding:18px;border-radius:var(--r-m);overflow-x:auto;font-family:var(--d-mono);font-size:.78rem;line-height:1.55}
.route{display:none}
.route.on{display:block}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--d-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tablewrap{overflow-x:auto}
.tablewrap:focus-visible{outline:3px solid var(--snap);outline-offset:4px}

/* ============================================================
   L'ÂME « PÊLE-MÊLE » : écriture à la main, scotch, autocollants,
   décompte, confettis et photothèque
   ============================================================ */
:root{--hand:'Caveat','Segoe Print','Bradley Hand',cursive;--pink:#FF5FA2;--paper:#FBFAF6}
.scribble{font-family:var(--hand);font-weight:700;letter-spacing:0;line-height:1.05;text-transform:none}

/* scotch : bouts déchirés */
.tape{position:absolute;top:-11px;left:50%;width:76px;height:22px;z-index:4;pointer-events:none;transform:translateX(var(--tx,-50%)) rotate(var(--tr,-4deg));
  background-image:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%);
  clip-path:polygon(4% 0,96% 0,100% 18%,96% 36%,100% 54%,96% 72%,100% 90%,96% 100%,4% 100%,0 82%,4% 64%,0 46%,4% 28%,0 10%)}
.tape-j{background-color:rgba(252,222,90,.8)}
.tape-c{background-color:rgba(12,186,222,.6)}
.tape-r{background-color:rgba(255,95,162,.62)}

/* bandeau qui défile avec la page */
.defile{background:var(--navy);overflow:hidden;padding-block:14px;border-block:1px solid rgba(255,255,255,.08)}
.defile-in{display:flex;width:max-content;will-change:transform;transform:translate3d(var(--defile,0px),0,0)}
.defile span{display:inline-flex;align-items:center;gap:.55em;padding-inline:.55em;white-space:nowrap;font-family:var(--hand);font-weight:700;font-size:clamp(1.55rem,3vw,2.15rem);line-height:1;color:var(--flash)}
.defile span:nth-child(3n+2){color:var(--snap)}
.defile span:nth-child(3n){color:#fff}
.defile i{width:.48em;height:.48em;background:currentColor;opacity:.75;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* hero : décompte, bande qui s'imprime, autocollants */
.hero-art .cap.scribble{font-family:var(--hand);font-weight:700;font-size:clamp(1.02rem,1.6vw,1.22rem);letter-spacing:0;text-transform:none;color:#22324F}
.hero-art .strip .cap.scribble{bottom:6px}
.hero-art .burst{right:calc(2% + 16px);top:calc(-1% + 16px);z-index:5;opacity:0}
.hero-art.clic .burst{animation:burst .75s ease-out}
@keyframes burst{0%{opacity:1;scale:.7}100%{opacity:0;scale:2.6}}
.decompte{position:absolute;right:2%;top:-1%;z-index:6;width:clamp(78px,8.6vw,102px);aspect-ratio:1;border-radius:50%;border:3px solid var(--flash);background:var(--navy);color:var(--flash);display:grid;place-items:center;padding:0;cursor:pointer;rotate:8deg;box-shadow:0 16px 30px -14px rgba(14,42,82,.85);transition:rotate .25s ease,scale .25s ease;touch-action:manipulation}
.decompte:hover{rotate:0deg;scale:1.06}
.decompte:focus-visible{outline:3px solid var(--snap);outline-offset:4px;border-radius:50%}
.dc-n{font-family:var(--hand);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:.95;text-align:center;padding:0 8px}
.dc-n.chiffre{font-family:var(--d-disp);font-weight:800;font-size:clamp(2.2rem,3.6vw,2.8rem)}
.decompte.tic{animation:tic .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes tic{0%{scale:1.28}100%{scale:1}}
.bande-hero.attend{clip-path:inset(0 0 100% 0)}
.bande-hero.imprime{animation:imprime 1.25s cubic-bezier(.2,.8,.3,1) both}
@keyframes imprime{from{clip-path:inset(0 0 100% 0);translate:0 -22px}to{clip-path:inset(0 0 0 0);translate:0 0}}
.hero-art .eclair{position:absolute;inset:-8%;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(circle at 62% 38%,#fff,rgba(255,255,255,.7) 38%,rgba(255,255,255,0) 72%)}
.hero-art.clic .eclair{animation:eclair .6s ease-out}
@keyframes eclair{0%{opacity:.92}100%{opacity:0}}
.sticker{position:absolute;pointer-events:none;z-index:6;filter:drop-shadow(0 6px 10px rgba(14,42,82,.32))}
.st-coeur{width:clamp(36px,4.6vw,52px);left:39%;bottom:31%;fill:var(--pink);stroke:#fff;stroke-width:3;rotate:-14deg}
.st-eclat{width:clamp(28px,3.6vw,42px);left:45%;top:2%;fill:var(--flash);rotate:12deg}
.note-main{position:absolute;left:47%;bottom:2%;z-index:6;display:flex;align-items:flex-start;gap:2px;font-size:clamp(1.3rem,2.3vw,1.75rem);color:var(--snap-ink);rotate:-5deg;white-space:nowrap}
.note-main svg{width:46px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-top:-10px}
@media (max-width:460px){.note-main{display:none}}

/* bas de section : petite phrase manuscrite et confettis */
.bigcta .wrap{position:relative;z-index:1}
.bigcta-note{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--flash);margin:14px 0 4px}
.sec.bigcta:not(.deep) .bigcta-note{color:var(--snap-ink)}
.confettis{position:absolute;inset:0;z-index:0;pointer-events:none}
.confettis i{position:absolute;width:var(--w);height:var(--h);background:var(--c);border-radius:1px;transform:rotate(var(--a));opacity:.85;transition:transform 1.4s cubic-bezier(.2,.8,.3,1) var(--cd),opacity .7s ease var(--cd)}
.js .bigcta:not(.fete) .confettis i{opacity:0;transform:translateY(-110px) rotate(calc(var(--a) - 200deg))}

/* cartes : léger mouvement de tirage au survol */
@media (hover:hover){.card:hover .ph.zoom{transform:scale(1.05) rotate(-1deg)}}

/* avis épinglés */
.notes .quote{position:relative}
.notes .quote::before{content:"";position:absolute;top:-11px;left:50%;width:72px;height:21px;transform:translateX(-50%) rotate(-3deg);background:rgba(252,222,90,.72);clip-path:polygon(4% 0,96% 0,100% 18%,96% 36%,100% 54%,96% 72%,100% 90%,96% 100%,4% 100%,0 82%,4% 64%,0 46%,4% 28%,0 10%)}
.notes .quote:nth-child(even)::before{background:rgba(12,186,222,.6);transform:translateX(-50%) rotate(4deg)}

/* ---------- tirages en vrac (accueil + photothèque) ---------- */
.pp{position:relative;display:block;z-index:var(--z,1);transform:translateX(var(--dx,0)) rotate(var(--r,0deg));transition:transform .8s cubic-bezier(.2,1.3,.45,1) var(--d,0s),opacity .3s ease var(--d,0s)}
.pp-btn{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:zoom-in;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pp-btn:focus-visible{outline:3px solid var(--flash);outline-offset:5px;border-radius:2px}
.pp-cadre{position:relative;display:block;overflow:hidden;background:var(--paper);box-shadow:0 1px 0 rgba(0,0,0,.05),0 24px 40px -24px rgba(5,14,30,.8),0 6px 14px -8px rgba(5,14,30,.4)}
.pp img{display:block;width:100%;height:auto;transition:filter 1.6s ease calc(var(--d,0s) + .35s)}
.pp-polaroid .pp-cadre{padding:7% 7% 25%}
.pp-polaroid img{aspect-ratio:1;object-fit:cover}
.pp-tirage .pp-cadre{padding:5%}
.pp-bande .pp-cadre{display:grid;gap:5px;padding:7% 7% 17%}
.pp-bande img{aspect-ratio:4/3;object-fit:cover}
.pp-legende{position:absolute;left:0;right:0;bottom:4.5%;padding:0 8%;font-family:var(--hand);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1;color:#22324F;pointer-events:none}
.pp-pied{position:absolute;left:0;right:0;bottom:5%;font-family:var(--d-mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:#5A6B82;pointer-events:none}
.pp:hover,.pp:focus-within{z-index:40}
@media (hover:hover){.pp.posee:hover{transform:translateX(var(--dx,0)) rotate(0deg) scale(1.05);transition-delay:0s}}
.js .pp:not(.posee){opacity:0;transform:translate(calc(var(--dx,0px) + var(--fx,0px)),-120px) rotate(calc(var(--r,0deg) * 5)) scale(1.18)}
.js .pp:not(.posee) img{filter:brightness(1.85) contrast(.5) saturate(0)}
.pp-mot{padding:clamp(14px,2.4vw,28px) 0;text-align:center;font-family:var(--hand);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1}
.mot-jaune{color:var(--flash)}
.mot-cyan{color:var(--snap)}
.mot-rose{color:var(--pink)}
.mot-eclat{position:absolute;right:6%;top:0;width:clamp(24px,3vw,34px);height:clamp(24px,3vw,34px);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.8}

/* accueil : extrait en pêle-mêle */
.pele{list-style:none;margin:0;padding:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.pele .pp{width:clamp(138px,23%,250px);margin:0 -.6% 6px}
.pele .pp:nth-child(even){margin-top:38px}
.pele-sec{overflow:hidden}
#r-brief .wrap>div{min-width:0}
.pele-suite{text-align:right;font-size:clamp(1.4rem,2.6vw,1.8rem);margin-top:6px}
.pele-suite a{color:var(--snap-ink);text-decoration:none;display:inline-block;padding:8px 0;rotate:-2deg}
.pele-suite a:hover{text-decoration:underline;text-decoration-thickness:2px}
@media (max-width:560px){.pele .pp{width:47%;margin:0 1% 14px}.pele .pp:nth-child(n+7){display:none}}

/* ---------- page Photothèque ---------- */
.mur-page{position:relative;isolation:isolate;overflow:hidden;background:#0A1F3D;color:var(--deep-fg);padding-bottom:clamp(64px,9vw,120px)}
.mur-page::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 10% 6%,rgba(12,186,222,.3),transparent 26%),
  radial-gradient(circle at 90% 12%,rgba(252,222,90,.2),transparent 24%),
  radial-gradient(circle at 72% 38%,rgba(255,95,162,.15),transparent 26%),
  radial-gradient(circle at 16% 54%,rgba(12,186,222,.18),transparent 26%),
  radial-gradient(circle at 86% 72%,rgba(252,222,90,.13),transparent 26%),
  radial-gradient(circle at 28% 92%,rgba(255,95,162,.14),transparent 26%)}
.mur-tete{position:relative;text-align:center;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(30px,4.6vw,56px)}
.mur-page .eyebrow{color:var(--snap)}
.mur-titre{font-family:var(--d-disp);font-weight:800;font-size:clamp(3rem,14.5vw,11rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.mur-titre b{display:inline-block;font-weight:800;rotate:var(--lr,0deg);color:#fff}
.mur-titre b:nth-child(4n+1){--lr:-6deg;color:var(--flash)}
.mur-titre b:nth-child(4n+2){--lr:4deg}
.mur-titre b:nth-child(4n+3){--lr:-3deg;color:var(--snap)}
.mur-titre b:nth-child(4n){--lr:7deg;color:var(--pink)}
.mur-titre b.tiret{color:#fff;--lr:0deg}
.route.on .mur-titre b{animation:lettre .8s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes lettre{from{opacity:0;translate:0 -70px;scale:1.4}to{opacity:1;translate:0 0;scale:1}}
.mur-sous{font-size:clamp(1.6rem,3.6vw,2.5rem);margin-top:16px;color:var(--deep-fg)}
.mur-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 20px;margin-top:26px}
.mur-actions .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mur-indice{font-size:1.45rem;color:var(--deep-muted)}
.mur-deco{position:absolute;pointer-events:none;fill:var(--flash)}
.mur-deco.d1{width:clamp(30px,4vw,54px);left:7%;top:24%;rotate:-10deg}
.mur-deco.d2{width:clamp(22px,3vw,40px);right:9%;top:16%;fill:var(--snap);rotate:16deg}
.mur-deco.d3{width:clamp(26px,3.2vw,44px);right:16%;bottom:16%;fill:var(--pink);rotate:-8deg}
@media (max-width:640px){.mur-deco.d3{display:none}}
.mur{list-style:none;max-width:1520px;margin:0 auto;padding:16px clamp(14px,3vw,44px) 0;columns:2;column-gap:clamp(12px,2.2vw,30px)}
@media (min-width:640px){.mur{columns:3}}
@media (min-width:1000px){.mur{columns:4}}
@media (min-width:1420px){.mur{columns:5}}
.mur .pp{break-inside:avoid;margin:0 0 clamp(18px,2.6vw,34px)}
.mur-fin{text-align:center;padding-top:clamp(40px,6vw,84px)}
.mur-fin .scribble{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1;color:var(--flash)}
.mur-fin .btn{margin-top:26px}
.mur-note{max-width:62ch;margin:34px auto 0;color:var(--deep-muted);line-height:1.8}
.mur-page .todo{color:var(--snap)}


/* ---------- options (livre d'or, enceinte) ---------- */
.upsell{background:var(--flash);color:var(--navy)}
.upsell-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-block:22px}
.upsell-ico{display:flex;gap:6px}
.upsell-ico svg,.opt-plus svg{width:42px;height:42px;padding:10px;border-radius:50%;background:var(--navy);color:var(--flash);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.upsell-ico svg:nth-child(2){rotate:-8deg}
.upsell-ico svg:nth-child(3){rotate:6deg}
.upsell p{flex:1 1 300px;margin:0;font-size:1rem;line-height:1.5}
.upsell strong{display:block;font-family:var(--d-disp);font-weight:800;font-size:1.18rem;letter-spacing:-.01em}
.upsell .scribble{font-size:1.65rem;white-space:nowrap}
.upsell .btn{border-color:var(--navy);color:var(--navy)}
.upsell .btn:hover{background:rgba(14,42,82,.08)}
.plan.feature .impress{color:var(--flash)}
.plan.feature .impress small{color:var(--deep-muted)}
.plan.feature .rule{background:var(--deep-line)}
.plan.feature h3{color:var(--deep-fg)}
.lo-fond{border:1px solid rgba(255,255,255,.14)}
.lo-fond::before{background:radial-gradient(circle at 16% 18%,rgba(12,186,222,.55),transparent 42%),radial-gradient(circle at 88% 84%,rgba(252,222,90,.42),transparent 44%),radial-gradient(circle at 80% 12%,rgba(255,95,162,.3),transparent 34%),linear-gradient(150deg,#1A4C8C,#0E2A52)}
.lo-illu{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px)}
.lo-bulles{display:flex;gap:clamp(12px,3vw,30px)}
.lo-b{display:grid;justify-items:center;gap:8px;rotate:var(--rb,0deg)}
.lo-b svg{width:clamp(60px,8vw,86px);height:clamp(60px,8vw,86px);padding:clamp(15px,2vw,21px);border-radius:50%;background:#fff;color:var(--navy);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 16px 30px -14px rgba(5,14,30,.75)}
.lo-b span{font-family:var(--hand);font-weight:700;font-size:1.35rem;line-height:1;color:#fff;text-shadow:0 2px 8px rgba(14,42,82,.45)}
.lo-mot{font-family:var(--hand);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1;color:var(--flash);rotate:-4deg;text-shadow:0 2px 12px rgba(14,42,82,.5)}
.opt-plus{display:flex;align-items:flex-start;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--deep-line);color:var(--deep-muted)}
.opt-plus svg{flex:0 0 auto;background:rgba(255,255,255,.1);color:var(--flash)}
.opt-plus b{display:block;color:var(--deep-fg);font-size:1.02rem;margin-bottom:2px}
.opt-plus a{color:var(--flash);font-weight:600}
.ph-mot{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px;text-align:center;font-family:var(--hand);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;color:#fff;rotate:-5deg;text-shadow:0 2px 14px rgba(14,42,82,.5)}

.lo-prix{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.lo-prix p{display:grid;gap:4px}
.lo-prix .euro{color:var(--flash)}
.lo-prix .mono{color:var(--deep-muted)}
.lo-photos{position:relative;min-height:clamp(400px,44vw,580px)}
.lo-t{position:absolute;margin:0;padding:10px 10px 42px;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
.lo-t img{display:block;width:100%;height:auto;object-fit:cover}
.lo-t figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:clamp(1.05rem,1.6vw,1.3rem);color:#22324F}
.lo-t1{width:60%;left:0;top:7%;rotate:-3deg;z-index:2}
.lo-t1 img{aspect-ratio:1}
.lo-t2{width:52%;right:1%;bottom:0;rotate:-4deg;z-index:3}
.lo-t2 img{aspect-ratio:4/3}
.lo-t3{width:44%;right:0;top:0;rotate:5deg;z-index:1}
.lo-t3 img{aspect-ratio:1}

/* formulaire : options et envoi */
.options{border:0;padding:0;margin:0 0 22px}
.options legend{margin-bottom:12px}
.opt-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.opt-card:hover{border-color:var(--snap)}
.opt-card input{width:22px;height:22px;margin:0;accent-color:var(--snap)}
.opt-card b{display:block;font-family:var(--d-disp);font-size:1.04rem;letter-spacing:-.01em}
.opt-card small{display:block;color:var(--muted);font-size:.88rem;line-height:1.45;margin-top:2px}
.opt-card .prix{font-family:var(--d-disp);font-weight:800;color:var(--snap-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.opt-card:has(input:checked){border-color:var(--flash-deep);box-shadow:0 0 0 2px var(--flash)}
.opt-card:has(input:focus-visible){outline:3px solid var(--snap);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rgpd{font-size:.86rem;color:var(--muted);line-height:1.55;margin-top:16px}
.rgpd a{color:var(--snap-ink)}

/* visionneuse */
.visionneuse{width:min(94vw,1080px);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:#fff;overflow:visible}
.visionneuse::backdrop{background:rgba(4,12,26,.9);backdrop-filter:blur(6px)}
.vis-haut,.vis-barre{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vis-haut{margin-bottom:12px}
.vis-barre{margin-top:16px}
.vis-cadre{position:relative;width:fit-content;max-width:100%;margin:0 auto;padding:clamp(8px,1.4vw,14px) clamp(8px,1.4vw,14px) clamp(42px,6vw,64px);background:var(--paper);rotate:-1deg;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.vis-cadre img{display:block;max-width:100%;max-height:min(70vh,calc(100dvh - 230px));width:auto;height:auto;margin:0 auto}
.vis-legende{position:absolute;left:0;right:0;bottom:clamp(8px,1.6vw,16px);text-align:center;font-family:var(--hand);font-weight:700;font-size:clamp(1.3rem,3vw,2rem);line-height:1;color:#22324F}
.vis-btn{display:inline-flex;align-items:center;gap:8px;min-width:48px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;font:600 .9rem var(--d-body);cursor:pointer;touch-action:manipulation}
.vis-btn:hover{background:rgba(255,255,255,.18)}
.vis-btn:focus-visible{outline:3px solid var(--flash);outline-offset:3px}
.vis-compteur{font-family:var(--d-mono);font-size:.74rem;letter-spacing:.14em;color:#C9D7E8}
@media (max-width:480px){.vis-txt{display:none}}