/* MAMMA LAB design system v3 - "the video kitchen"
   Bold Italian surface, production-line substance.
   Rules kept from v2: zero radius, zero shadow, 1px rules, tabular figures,
   accent reserved for annotation, live data and action. */
:root{
  --paper:#FBF2E2; --paper-2:#F4E8D2; --paper-3:#EBDCC0;
  --ink:#16100C; --ink-2:#1F1712; --ink-3:#2B211A;
  --grey:#756751; --grey-2:#675947; --signal-light:#E85941;
  --signal:#D22B1E; --signal-ink:#A81D0F;
  --basil:#14563A; --gold:#B98A2E;
  --rule:#D8C6A6; --rule-dark:rgba(251,242,226,.22);
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1320px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-sans);font-size:16px;line-height:1.55;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---- type ---- */
h1,h2{font-family:var(--f-display);font-weight:700;font-stretch:100%;
  letter-spacing:-.012em;line-height:1.0;margin:0 0 18px;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 60,"WONK" 1}
h1{font-size:clamp(35px,4.4vw,60px)}
h2{font-size:clamp(27px,3.4vw,44px)}
h1 em,h2 em,h1 i,h2 i{font-style:italic;color:var(--signal);font-weight:700;font-variation-settings:"SOFT" 60,"WONK" 1}
.dark h1 em,.dark h2 em,.dark h1 i,.dark h2 i{color:var(--signal)}
h3{font-family:var(--f-sans);font-weight:800;font-stretch:100%;letter-spacing:-.02em;
  font-size:clamp(18px,1.7vw,22px);line-height:1.15;margin:0 0 18px}
.serif-it{font-family:var(--f-display);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 60,"WONK" 1}
p{margin:0 0 16px}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:60ch;color:var(--ink)}
.sub{color:var(--grey-2);font-size:15px}
.hl{color:var(--signal)}
.eyebrow{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--signal-ink);margin:0 0 16px;font-stretch:87.5%}
.eyebrow.mute{color:var(--grey)}
.mono{font-family:var(--f-mono);font-stretch:87.5%;font-size:11px;letter-spacing:.02em}

section{padding:clamp(46px,5vw,78px) 0;position:relative}
.pad-s{padding:clamp(38px,4.2vw,64px) 0}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---- dark inversion ---- */
.dark{background:var(--ink);color:var(--paper)}
.dark .sub{color:#A5A29B}
.dark .lead{color:var(--paper)}
.dark .rule{background:var(--rule-dark)}
.dark .eyebrow{color:var(--signal)}
.dark .eyebrow.mute{color:var(--grey)}
.dark th{color:var(--grey)}
.dark th,.dark td{border-color:var(--rule-dark)}
.dark .card{background:var(--ink-2);border-color:var(--rule-dark)}
.dark input,.dark select,.dark textarea{background:var(--ink-2);border-color:var(--rule-dark);color:var(--paper)}
.dark details{border-color:var(--rule-dark)}
.dark .chip{border-color:var(--rule-dark)}
.dark .stat{border-top-color:var(--signal)}
.dark .badge{border-color:var(--rule-dark);color:var(--grey)}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;gap:22px;height:58px}
.nav a.link{text-decoration:none;font-size:13.5px;font-weight:600;color:var(--ink);opacity:.72}
.nav a.link:hover{opacity:1;color:var(--signal-ink)}
.nav .spacer{margin-left:auto}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;color:var(--ink)}
.logo svg{height:22px;width:auto;display:block}
.logo-txt{font-family:var(--f-display);white-space:nowrap;font-weight:700;font-size:19px;letter-spacing:.01em;text-transform:uppercase;line-height:1;font-variation-settings:"SOFT" 60,"WONK" 0}
.logo-sub{font-family:var(--f-mono);font-size:8.5px;font-stretch:87.5%;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);display:block;margin-top:3px;line-height:1}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;font-weight:700;font-size:14px;
  text-decoration:none;border:1px solid transparent;transition:background .12s,color .12s,border-color .12s;cursor:pointer;
  font-family:inherit;letter-spacing:-.01em}
.btn-p{background:var(--signal);color:#fff}
.btn-p:hover{background:var(--ink)}
.btn-s{border-color:var(--ink);color:var(--ink);background:none}
.btn-s:hover{background:var(--ink);color:var(--paper)}
.dark .btn-s{border-color:var(--paper);color:var(--paper)}
.dark .btn-s:hover{background:var(--paper);color:var(--ink)}
.btn-sm{padding:9px 14px;font-size:13px}
.btn-lg{padding:15px 24px;font-size:15px}

/* ---- doors (two labelled entries) ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);margin-top:26px}
.door{padding:18px 20px;text-decoration:none;display:block;transition:background .12s,color .12s}
.door + .door{border-left:1px solid var(--ink)}
.door:hover{background:var(--ink);color:var(--paper)}
.door .k{font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-ink);display:block;margin-bottom:7px}
.door:hover .k{color:var(--signal)}
.door .t{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.01em;display:block;margin-bottom:5px;line-height:1.1;font-variation-settings:"SOFT" 60,"WONK" 1}
.door .d{font-size:13px;color:var(--grey-2)}
.door:hover .d{color:#B8B5AE}
@media(max-width:700px){.doors{grid-template-columns:1fr}.door + .door{border-left:0;border-top:1px solid var(--ink)}}

/* ---- grid helpers ---- */
.g,.g2,.g3,.g4{display:grid;gap:1px;background:var(--rule)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g>*,.g2>*,.g3>*,.g4>*{background:var(--paper)}
.dark .g,.dark .g2,.dark .g3,.dark .g4{background:var(--rule-dark)}
.dark .g>*,.dark .g2>*,.dark .g3>*,.dark .g4>*{background:var(--ink)}
.g-loose{gap:24px;background:none}
.g-loose>*{background:none}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---- hero ---- */
.hero{padding-top:clamp(30px,3.4vw,48px);padding-bottom:0}
.hero-grid>div:last-child{align-self:start}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:start}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:30px}}
.hero h1{margin-bottom:16px}
.priceline{font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;letter-spacing:.01em;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:22px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr)}
.priceline span{padding:11px 8px;border-right:1px solid var(--rule);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:center}
.priceline span:first-child{padding-left:10px}
.priceline span:last-child{border-right:0}
@media(max-width:640px){.priceline{grid-template-columns:repeat(2,1fr)}
 .priceline span:nth-child(2n){border-right:0}
 .priceline span:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.priceline b{color:var(--signal-ink);font-weight:700}
.dark .priceline{border-color:var(--rule-dark)}
.dark .priceline b{color:var(--signal)}

/* ---- contact sheet ---- */
.sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:none;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media(max-width:1100px){.sheet{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.sheet{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){.sheet{grid-template-columns:repeat(2,1fr)}}
.sheet.s3{grid-template-columns:repeat(3,1fr)}
.card,.tbl-wrap,input,select,textarea,.doors,.sheet,.cell,.filters,.specstrip,.priceline{border-radius:0}
.cell{background:var(--paper);position:relative;display:block;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cell .fr{aspect-ratio:9/16;overflow:hidden;background:var(--paper-3);position:relative}
.cell video{width:100%;height:100%;object-fit:cover}
.sheet.wide{grid-template-columns:repeat(3,1fr)}
.sheet.wide .cell .fr{aspect-ratio:16/9}
.sheet.s4{grid-template-columns:repeat(4,1fr)}
.sheet.s2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.sheet.wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sheet.s2{grid-template-columns:1fr}}
@media(max-width:560px){.sheet.wide{grid-template-columns:1fr}}
.cell .cart{display:flex;justify-content:space-between;gap:6px;padding:5px 6px;
  font-family:var(--f-mono);font-size:8.5px;font-stretch:87.5%;letter-spacing:.02em;
  text-transform:uppercase;color:var(--grey-2);border-top:1px solid var(--rule);line-height:1.3}
.cell .cart b{color:var(--signal-ink);font-weight:600}
.dark .sheet{border-color:var(--rule-dark)}
.dark .cell{border-color:var(--rule-dark)}
.dark .cell{background:var(--ink)}
.dark .cell .fr{background:var(--ink-3)}
.dark .cell .cart{color:var(--grey);border-color:var(--rule-dark)}
.dark .cell .cart b{color:var(--signal)}

/* ---- spec strip (replaces marquee) ---- */
.specstrip{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--f-mono);
  font-size:10px;font-stretch:87.5%;letter-spacing:.05em;text-transform:uppercase;margin-top:clamp(40px,5vw,72px)}
.specstrip span{padding:10px 14px;border-right:1px solid var(--rule);color:var(--grey-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.specstrip span:nth-child(4n){border-right:0}
@media(max-width:760px){.specstrip{grid-template-columns:repeat(2,1fr)}.specstrip span:nth-child(4n){border-right:1px solid var(--rule)}.specstrip span:nth-child(2n){border-right:0}}
.dark .specstrip{border-color:var(--rule-dark)}
.dark .specstrip span{border-color:var(--rule-dark);color:var(--grey)}

/* ---- stats ---- */
.stat{border-top:2px solid var(--signal);padding:16px 20px 22px}
.stat .n{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.015em;font-variation-settings:"SOFT" 60,"WONK" 1}
.stat .l{font-size:13px;color:var(--grey-2);margin-top:7px;max-width:28ch}
.dark .stat .l{color:#A5A29B}

/* ---- cards ---- */
.card{background:var(--paper);border:1px solid var(--rule);padding:24px}
.g .card,.g2 .card,.g3 .card,.g4 .card{border:0}
.card .num{font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;color:var(--signal-ink);
  letter-spacing:.08em;margin-bottom:12px;text-transform:uppercase}
.dark .card .num{color:var(--signal)}
.feature{outline:2px solid var(--signal);outline-offset:-2px}

/* ---- filters ---- */
.filters{display:flex;gap:0;flex-wrap:wrap;margin-bottom:20px;border:1px solid var(--ink);width:max-content;max-width:100%}
.chip{padding:8px 14px;border:0;border-right:1px solid var(--rule);font-size:12px;font-weight:600;
  cursor:pointer;background:none;color:inherit;font-family:var(--f-mono);font-stretch:87.5%;
  text-transform:uppercase;letter-spacing:.04em;transition:background .12s,color .12s}
.chip:last-child{border-right:0}
.chip[aria-pressed="true"]{background:var(--signal);color:#fff}

/* ---- tables ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
thead th{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.07em;
  text-transform:uppercase;color:var(--grey-2);font-weight:600;background:var(--paper-2)}
.dark thead th{background:var(--ink-2)}
tbody th{font-weight:700;font-size:14.5px}
td strong{color:var(--signal-ink)}
.dark td strong{color:var(--signal)}

/* ---- pricing ---- */
.price{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,3.4vw,42px);letter-spacing:-.015em;line-height:1;font-variation-settings:"SOFT" 60,"WONK" 1}
.price small{font-family:var(--f-mono);font-size:11px;font-weight:400;font-stretch:87.5%;
  color:var(--grey-2);letter-spacing:.02em}
.dark .price small{color:var(--grey)}
.tick{list-style:none;padding:0;margin:18px 0 0}
.tick li{padding-left:20px;position:relative;margin-bottom:8px;font-size:14.5px;line-height:1.45}
.tick li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--signal)}

/* ---- faq ---- */
details{border-bottom:1px solid var(--rule);padding:16px 0}
summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.01em;font-variation-settings:"SOFT" 60,"WONK" 1;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-family:var(--f-mono);color:var(--signal-ink);font-size:16px;flex:0 0 auto}
.dark summary:after{color:var(--signal)}
details[open] summary:after{content:"\2013"}
details p{margin:12px 0 0;max-width:80ch;color:var(--grey-2);font-size:15px}
.dark details p{color:#A5A29B}

/* ---- forms ---- */
form.lead-form{display:grid;gap:12px}
label{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.07em;
  text-transform:uppercase;font-weight:600;color:var(--grey-2);display:block;margin-bottom:6px}
.dark label{color:var(--grey)}
input,select,textarea{width:100%;padding:11px 13px;background:var(--paper);border:1px solid var(--ink);
  color:var(--ink);font-family:inherit;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:-1px}
.full{grid-column:1/-1}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--paper);padding:52px 0 34px;font-size:13.5px}
footer a{text-decoration:none;color:#A5A29B;display:block;padding:5px 0}
footer a:hover{color:var(--signal)}
footer .fcol{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper);margin:0 0 10px;font-weight:600}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr;gap:26px}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
footer .rule{background:var(--rule-dark)}

/* ---- misc ---- */
.note{font-size:12.5px;color:var(--grey-2);max-width:74ch;line-height:1.5}
.dark .note{color:var(--grey)}
.badge{display:inline-block;padding:5px 10px;border:1px solid var(--rule);font-family:var(--f-mono);
  font-size:9.5px;font-stretch:87.5%;letter-spacing:.07em;text-transform:uppercase;color:var(--grey-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.crumbs{font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;letter-spacing:.05em;
  text-transform:uppercase;color:var(--grey);padding:18px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--signal-ink)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px}

/* ---- prose ---- */
.prose h2{margin-top:48px}
.prose h3{margin-top:30px;font-weight:800;font-size:18px}
.prose p,.prose li{max-width:78ch;font-size:15.5px}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin-bottom:8px}
.answer{border-left:3px solid var(--signal);padding:2px 0 2px 18px;margin:0 0 22px;
  font-size:18px;font-weight:600;line-height:1.45;max-width:72ch}
.basil{color:var(--basil)}
.dark .basil{color:#7BC79A}

/* ---- a11y ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:#fff;padding:9px 15px;z-index:200}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:900px){
 .nav-in{flex-wrap:wrap;height:auto;gap:10px 16px;padding:10px 0}
 .nav-in .spacer{display:none}
 .nav a.link{font-size:13px;padding:9px 0;display:inline-block}
 .nav .btn-sm{flex:1 0 100%;justify-content:center;padding:13px 14px}
 footer a{padding:11px 0}
 .menu li{padding:15px 0}
 .chip{padding:11px 14px}
}

@media(max-width:760px){h1 br,h2 br{display:inline;font-size:0;line-height:0}h1 br::after,h2 br::after{content:"\00a0";font-size:1rem}}


/* ================= ITALIAN MENU LAYER (v4) ================= */

/* double rule, the classic menu divider */
.drule{border:0;height:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);
  padding-top:3px;margin:0}
.dark .drule{border-color:var(--paper)}

/* ornament */
.orn{display:flex;align-items:center;gap:14px;color:var(--signal);margin:0 0 26px}
.orn:before,.orn:after{content:"";flex:1;height:0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding-top:2px}
.orn svg{flex:0 0 auto}
.dark .orn:before,.dark .orn:after{border-color:var(--rule-dark)}

/* section header, centred like a menu course */
.course{text-align:center;margin-bottom:34px}
.course .no{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--signal-ink);display:block;margin-bottom:12px}
.dark .course .no{color:var(--signal)}
.course h2{margin-bottom:12px}
.course p{margin:0 auto;max-width:56ch;color:var(--grey-2)}
.dark .course p{color:#B7A992}

/* menu list with dotted price leaders */
.menu{margin:0;padding:0;list-style:none}
.menu li{display:flex;align-items:baseline;gap:0;padding:13px 0;border-bottom:1px dotted var(--rule);flex-wrap:wrap}
.menu li:last-child{border-bottom:0;padding-bottom:0}
.menu .d{font-family:var(--f-display);font-weight:600;font-size:18.5px;letter-spacing:-.005em;flex:0 1 auto;min-width:0;font-variation-settings:"SOFT" 60,"WONK" 1}
.menu .dot{flex:1 1 auto;border-bottom:2px dotted var(--rule);margin:0 10px 5px}
.menu .p{font-family:var(--f-mono);font-size:12px;color:var(--signal-ink);flex:0 0 auto;font-weight:600;white-space:nowrap}
.menu .sub2{flex:1 0 100%;width:100%;min-width:0;font-size:13.5px;color:var(--grey-2);margin-top:4px}
.dark .menu li{border-color:var(--rule-dark)}
.dark .menu .dot{border-color:var(--rule-dark)}
.dark .menu .p{color:var(--signal)}
.dark .menu .sub2{color:#B7A992}

/* plaque / roundel */
.roundel{width:132px;height:132px;flex:0 0 auto}
.roundel text{font-family:var(--f-mono);font-size:8.1px;letter-spacing:.16em;fill:currentColor;text-transform:uppercase}
.plaque{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border:2px solid currentColor;
  border-radius:999px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}

/* framed block, like a bordered menu panel */
.frame{border:3px double var(--ink);padding:clamp(22px,3vw,38px);position:relative;background:var(--paper)}
.dark .frame{border-color:var(--paper);background:var(--ink-2)}
.frame-tag{position:absolute;top:-11px;left:26px;background:var(--paper);padding:0 12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink)}
.dark .frame-tag{background:var(--ink-2);color:var(--signal)}

/* big display quote / claim slab */
.slab{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4.8vw,64px);line-height:1.0;
  letter-spacing:-.012em;text-align:center;max-width:20ch;margin:0 auto;font-variation-settings:"SOFT" 60,"WONK" 1}
.slab em{font-style:italic;color:var(--signal)}

/* small caps label */
.smallcaps{font-variant:small-caps;letter-spacing:.08em;font-weight:700}

/* swatch chips get a hairline, not a hard box */
.chipcol{border:1px solid var(--rule)}

/* AA on espresso: small tomato text uses the lighter tone */
.dark .eyebrow,.dark .menu .p,.dark .cell .cart b,.dark .card .num,.dark .course .no,
.dark .frame-tag,.dark td strong,.dark summary:after,.dark .priceline b,.dark .door .k{color:var(--signal-light)}
.dark .orn{color:var(--signal-light)}


/* ---- client logo wall ---- */
.logowall-sec{padding-top:clamp(26px,3vw,44px);padding-bottom:clamp(26px,3vw,44px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
/* Bandeau defilant. La piste contient deux copies identiques de la liste et se
   translate de -50 % : a la fin du cycle la seconde copie occupe exactement la
   position de depart de la premiere, la boucle ne se voit pas. Le masque en
   degrade aux deux bords evite que les logos apparaissent et disparaissent net. */
.logowall{margin-top:18px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;width:max-content;animation:logo-slide var(--logo-dur,42s) linear infinite}
.logowall:hover .logo-track{animation-play-state:paused}
.logo-run{display:flex}
.logo-cell{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:clamp(150px,15vw,220px);min-height:92px;padding:14px 18px;
  border-right:1px solid var(--rule)}
.logo-cell img{width:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;
  opacity:.62;transition:opacity .15s}
.logo-cell img:hover{opacity:1}
@keyframes logo-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Sans animation, la piste reste une bande que l'on fait defiler a la main :
   on ne cache pas la moitie des marques a ceux qui coupent le mouvement. */
@media(prefers-reduced-motion:reduce){
 .logo-track{animation:none}
 .logowall{overflow-x:auto;scrollbar-width:none}
 .logowall::-webkit-scrollbar{display:none}
 .logo-run[aria-hidden="true"]{display:none}}
.dark .logowall-sec,.dark .logo-cell{border-color:var(--rule-dark)}
.dark .logo-cell img{filter:invert(1);opacity:.62}
.dark .logo-cell img:hover{filter:invert(1);opacity:1}

/* ---- platform proof grid ---- */
.plat{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--rule)}
.plat > div{padding:22px 20px;border-right:1px solid var(--rule)}
.plat > div:last-child{border-right:0}
.plat .p-name{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal-ink);margin-bottom:14px}
.plat .p-fig{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.5vw,34px);line-height:1;
  letter-spacing:-.015em;font-variation-settings:"SOFT" 60,"WONK" 1;margin-bottom:10px}
.plat .p-txt{font-size:13.5px;color:var(--grey-2);line-height:1.45}
.plat .p-src{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--grey);margin-top:12px;display:block}
.dark .plat,.dark .plat > div{border-color:var(--rule-dark)}
.dark .plat .p-name{color:var(--signal-light)}
.dark .plat .p-txt{color:#B7A992}
.dark .plat .p-src{color:var(--grey)}
@media(max-width:1000px){.plat{grid-template-columns:repeat(2,1fr)}
 .plat > div:nth-child(2n){border-right:0}
 .plat > div{border-bottom:1px solid var(--rule)}}
@media(max-width:560px){.plat{grid-template-columns:1fr}.plat > div{border-right:0}}

.hero-split{align-items:center}
.hero-split .sheet{margin-top:0}
@media(max-width:900px){.hero-split{gap:34px}}

/* Demonstration "une photo en entree, une annee de creative en sortie" */
.season-proof{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--rule);padding-top:26px;
  display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:clamp(20px,3vw,38px);align-items:start}
.season-in img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.season-proof .mono{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);margin:8px 0 0}
.season-out .mono{margin:0 0 10px}
.dark .season-proof{border-color:var(--rule-dark)}
.dark .season-in img{border-color:var(--rule-dark)}
@media(max-width:760px){.season-proof{grid-template-columns:1fr}
 .season-in img{max-width:220px}}

/* ============================================================
   RESPONSIVE v9
   Deux defauts corriges ici.
   1. Sous 560px, .sheet.s4 gardait 4 colonnes en dur : la home
      debordait a 431px pour un viewport de 360. body{overflow-x:hidden}
      masquait le symptome sans corriger la cause.
   2. Au dela de 1600px la mise en page restait bloquee a 1320px,
      ce qui donnait une colonne etroite perdue dans le vide sur un
      27 pouces ou un ultrawide. Le conteneur et la typo montent
      maintenant par paliers.
   ============================================================ */

/* 1. planches a 4 colonnes : 4 -> 3 -> 2 -> 1 */
@media(max-width:1100px){.sheet.s4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sheet.s4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.sheet.s4,.sheet.s3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:360px){.sheet.s4,.sheet.s3,.sheet{grid-template-columns:1fr}}
.sheet{min-width:0}
.cell{min-width:0}

/* le bloc de preuve saisonniere ne doit jamais imposer sa largeur */
.season-proof{min-width:0}
.season-out{min-width:0}
@media(max-width:760px){.season-proof .sheet.s4{grid-template-columns:repeat(2,1fr)}}

/* 2. grands ecrans : le conteneur et la typo montent par paliers */
@media(min-width:1700px){
  :root{--w:1480px}
  body{font-size:16.5px}
  h1{font-size:clamp(35px,4.4vw,66px)}
}
@media(min-width:2000px){
  :root{--w:1660px}
  body{font-size:17px}
  h1{font-size:clamp(35px,4.4vw,72px)}
  .sheet{grid-template-columns:repeat(7,1fr)}
}
@media(min-width:2400px){
  :root{--w:1840px}
  body{font-size:17.5px}
  h1{font-size:clamp(35px,4.4vw,78px)}
  .sheet{grid-template-columns:repeat(8,1fr)}
}
@media(min-width:3000px){
  :root{--w:2040px}
  body{font-size:18px}
}
/* les planches a nombre de colonnes impose ne suivent pas l'elargissement */
@media(min-width:2000px){.sheet.s2{grid-template-columns:repeat(2,1fr)}
 .sheet.s3{grid-template-columns:repeat(3,1fr)}
 .sheet.s4{grid-template-columns:repeat(4,1fr)}
 .sheet.wide{grid-template-columns:repeat(3,1fr)}}

/* la colonne de lecture ne doit pas s'etirer indefiniment */
@media(min-width:1700px){.lead{max-width:62ch}.prose{max-width:78ch!important}}

/* fond d'attente des vignettes, le temps que le poster paresseux arrive */
.fr{background:var(--paper-2)}
.dark .fr{background:var(--ink-2)}

/* cartes cliquables : sans le lien souligne herite de a{} */
a.card{text-decoration:none;display:block;transition:background .15s,border-color .15s}
a.card h3,a.card p{text-decoration:none}
a.card:hover{background:var(--paper-2);border-color:var(--ink)}
.dark a.card:hover{background:var(--ink-2)}
.src-list{margin:10px 0 0;padding-left:18px}
.src-list li{margin:6px 0;font-size:14px;color:var(--grey-2)}

/* ---- outil : calculateur de video gap ---- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  border:1px solid var(--rule);background:var(--paper-2)}
.calc-in{padding:clamp(20px,2.4vw,34px);border-right:1px solid var(--rule)}
.calc-out{padding:clamp(20px,2.4vw,34px);background:var(--ink);color:var(--paper)}
.calc-f{display:block;margin-bottom:20px}
.calc-f>span:first-child{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;line-height:1.3;
  letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.calc-f input[type=number],.calc-f select{font:400 20px/1.2 inherit;padding:10px 12px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);width:100%;border-radius:0}
.calc-cur{display:flex;gap:8px}
.calc-cur select{width:auto;flex:0 0 auto}
.calc-range{display:flex;align-items:center;gap:14px}
.calc-range input[type=range]{flex:1;accent-color:var(--signal)}
.calc-range b{font:700 20px/1 inherit;min-width:3.4em;text-align:right}
.calc-big{font-family:var(--f-display);font-weight:700;font-size:clamp(38px,5.4vw,64px);line-height:1;
  margin:6px 0 22px;color:var(--signal-light);word-break:break-word}
.calc-rows>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule-dark)}
.calc-rows>div span{font-size:14px;opacity:.72}
.calc-rows>div b{font-size:17px;white-space:nowrap}
.calc-form{margin-top:24px;display:grid;gap:10px}
.calc-form input[type=email],.calc-form input[type=text]{font:400 16px/1.2 inherit;padding:12px;
  border:1px solid var(--rule-dark);background:var(--ink-2);color:var(--paper);width:100%;border-radius:0}
.calc-form input::placeholder{color:rgba(251,242,226,.45)}
.calc-form .note{color:rgba(251,242,226,.6)}
.calc-form .note a{color:var(--signal-light)}
.calc-out .eyebrow.mute{color:rgba(251,242,226,.6)}
@media(max-width:860px){.calc{grid-template-columns:1fr}
 .calc-in{border-right:0;border-bottom:1px solid var(--rule)}}

/* Compteur du filtre : element separe pour que le libelle reste une chaine
   traduisible entiere, un nombre colle dedans casse la cle de traduction. */
.chip .cnt{margin-left:7px;font-size:11px;opacity:.55;font-variant-numeric:tabular-nums}

/* ---- CONVERSION v12 : l'en-tete collant mobile ---- */
/* Mesure avant correction : 165px de haut sur un ecran de 844, soit 19,6 % de
   chaque ecran consommes en permanence par sept liens qui passaient a la ligne
   plus un bouton pleine largeur. Sur mobile l'en-tete se reduit au logo et au
   seul CTA, sur une ligne. La navigation reste accessible par le pied de page,
   qui la porte en entier sur toutes les pages. */
@media(max-width:760px){
  .nav-in{flex-wrap:nowrap;height:56px;gap:12px;padding:0}
  .nav a.link{display:none}
  .nav .spacer{display:block;margin-left:auto}
  .nav .btn-sm{flex:0 0 auto;width:auto;padding:11px 16px;font-size:14px}
  .logo-sub{display:none}
}
/* Cibles tactiles : 44px est le minimum exploitable au pouce. Les chips de
   filtre et les liens de pied de page passaient sous 40. */
@media(max-width:760px){
  .chip{min-height:44px;padding-top:11px;padding-bottom:11px}
  footer a{display:inline-block;min-height:44px;line-height:44px}
  footer .note a{min-height:0;line-height:inherit}
}
/* Les portes sont sorties de la colonne de gauche pour qu'en pile mobile la
   preuve video arrive AVANT elles : au deuxieme ecran on doit voir le travail,
   pas un menu. Sur grand ecran elles reprennent leur place sous la colonne de
   gauche, sinon le hero laisse un demi-ecran vide. */
.hero-doors{grid-column:1/-1}
.hero-doors .doors{margin-top:0}
@media(min-width:981px){
 /* La colonne video enjambe les deux rangees, les portes reprennent donc
    leur place directement sous le texte et le hero ne se vide plus. */
 .hero-grid>div:nth-child(2){grid-row:1/span 2}
 .hero-doors{grid-column:1;grid-row:2;margin-top:-10px}}
/* Le bandeau de specs coupait deux libelles a l'ellipse sur mobile, faute de
   pouvoir passer a la ligne dans une colonne de 195px. */
@media(max-width:760px){.specstrip span{white-space:normal;line-height:1.3}}

/* =====================================================================
   Audit E2E, septembre 2026
   ===================================================================== */

/* 1. Navigation mobile. L'en-tete mobile ne portait que le logo et le CTA :
   les six destinations du site etaient inaccessibles autrement que par le pied
   de page, donc invisibles pour un visiteur qui ne descend pas jusqu'en bas.
   <details> donne un tiroir sans une ligne de JavaScript, focusable au clavier
   et ferme par defaut. Le declencheur est un mot, pas trois barres : une icone
   hamburger animee est une piece a deboguer pour zero gain de clarte. */
.lbl-s{display:none}
.mnav{display:none;position:relative}
.mnav>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;
  align-items:center;justify-content:center;padding:0 14px;min-width:92px;position:relative;border:1px solid var(--ink);border-radius:3px;
  background:transparent;font-family:var(--mono,ui-monospace,monospace);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary::marker{content:""}
details.mnav[open] summary:after,details.mnav summary:after{content:none;display:none}
.mnav-close{display:none}
.mnav[open]>summary .mnav-lbl{display:none}
.mnav[open]>summary .mnav-close{display:inline}
.mnav-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;
  min-width:230px;background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 18px 40px rgba(0,0,0,.14);padding:6px 0}
.mnav-panel a{display:block;padding:13px 18px;min-height:44px;line-height:1.3;
  text-decoration:none;color:var(--ink);font-size:15px;font-weight:600}
.mnav-panel a+a{border-top:1px solid var(--rule)}
.mnav-panel a:hover,.mnav-panel a:focus{background:rgba(0,0,0,.05)}
@media(max-width:760px){
  .mnav{display:block;flex:0 0 auto}
  /* A 390 px, logo + CTA + Menu ne tenaient pas sur une ligne : le bouton Menu
     sortait de l'ecran de 3 px en anglais et de 54 px en allemand, ou le CTA
     est plus long. On resserre les trois, et le logo cede en premier. */
  .mnav>summary{min-width:0;padding:0 11px;font-size:11px;letter-spacing:.1em}
  .nav-in{gap:8px}
  .nav .btn-sm{padding:11px 12px;font-size:13.5px;white-space:nowrap}
  /* Le libelle long du CTA faisait deborder l'en-tete en allemand. On garde le
     bouton au premier plan et on raccourcit le mot, plutot que de tronquer le
     logo en "OGAM". */
  .nav .btn-sm .lbl-l{display:none}
  .nav .btn-sm .lbl-s{display:inline}
  .nav .logo{flex:0 1 auto;min-width:0}
  .nav .logo-txt{font-size:18px}
}

/* 2. Lisibilite. Les libelles mono descendaient a 8,1 px, sous le seuil ou un
   pouce a bout de bras lit encore. On remonte le plancher a 10 px sur mobile
   sans toucher au desktop, ou la distance de lecture est plus courte. */
@media(max-width:760px){
  .cart span,.cart b,.tile .cart span,.tile .cart b{font-size:10px}
  .logo-sub{font-size:10px}
  .eyebrow,.k{font-size:11px}
  .note,.sub2{font-size:12.5px}
  .plat .p-src,.p-src{font-size:10.5px}
  .badge{font-size:10.5px}
  thead th,.full label{font-size:10.5px}
}

/* 3. Longueur de ligne. Le corps de texte atteignait 96 caracteres par ligne
   sur 1440 px, la ou l'oeil decroche au-dela de 75. On plafonne la prose sans
   toucher aux titres ni aux grilles. */
@media(min-width:981px){
  .prose p,.prose li{max-width:72ch}
  /* Les reponses de FAQ occupaient toute la largeur de la colonne, soit 96 a 98
     caracteres par ligne MESURES (longueur du texte divisee par le nombre de
     lignes rendues, pas une estimation). L'oeil perd la ligne suivante au-dela
     de 80. La borne est en px : l'unite ch depend de la chasse du zero, qui
     dans ce serif vaut 9 px, si bien que 74ch valait deja 666 px. */
  details p,details li{max-width:548px}
  .note{max-width:548px}
}

/* 4. Le tableau des tarifs defile horizontalement sur mobile mais rien ne le
   disait : on ajoute un degrade au bord droit tant qu'il reste a faire defiler. */
.tbl-wrap{position:relative}
@media(max-width:760px){
  .tbl-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
    pointer-events:none;background:linear-gradient(to right,transparent,var(--paper))}
}

/* 5. Sous-menus Industries et Channels. Desktop : panneau au survol et au
   focus clavier (focus-within), le lien parent reste un lien vers le hub.
   Mobile : les groupes sont a plat dans le tiroir, enfants indentes, pour
   que chaque landing soit a un tap. Aucun JavaScript. */
.dd{position:relative;display:flex;align-items:center;height:58px}
.dd>a.link{display:inline-flex;align-items:center;gap:6px}
.dd-caret{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.dd-panel{position:absolute;left:-14px;top:100%;min-width:250px;background:var(--paper);
  border:1px solid var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.14);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;z-index:70}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-panel a{display:block;padding:11px 16px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.dd-panel a+a{border-top:1px solid var(--rule)}
.dd-panel a:hover,.dd-panel a:focus{background:rgba(0,0,0,.05);color:var(--signal-ink)}
.dd-panel .dd-all{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700}
@media(max-width:760px){
  .dd{display:none}
  .mnav-panel{min-width:260px;max-height:calc(100vh - 90px);overflow-y:auto}
  .mgrp{border-top:1px solid var(--rule)}
  .mgrp>a:first-child{font-weight:700}
  .mnav-panel .mgrp a.sub{padding-left:32px;font-weight:500;font-size:14px;color:var(--ink);opacity:.85;border-top:1px solid var(--rule)}
  .mnav-panel a+.mgrp,.mnav-panel .mgrp+a{border-top:1px solid var(--rule)}
  .mnav-panel .mgrp>a.sub+a.sub{border-top:1px solid var(--rule)}
}

/* 6. Selecteur de langue en haut a droite : drapeau + abreviation, tiroir
   <details> sans JavaScript. Sur mobile on ne garde que le drapeau et
   l'abreviation, le nom natif de la langue reste dans le panneau. */
.lang{position:relative;flex:0 0 auto}
.lang>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 10px;border:1px solid var(--rule);border-radius:3px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;font-weight:700;color:var(--ink)}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:""}
details.lang summary:after,details.lang[open] summary:after{content:none;display:none}
.lang .lf{font-size:15px;line-height:1}
.lang-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:190px;
  background:var(--paper);border:1px solid var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.14);padding:4px 0}
.lang-panel a{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:42px;
  text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.lang-panel a+a{border-top:1px solid var(--rule)}
.lang-panel a:hover,.lang-panel a:focus{background:rgba(0,0,0,.05)}
.lang-panel a[aria-current]{color:var(--signal-ink)}
.lang-panel .la{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--grey);width:26px}
@media(max-width:760px){
  .lang>summary{padding:0 8px;min-height:44px;font-size:11px;gap:5px}
  .lang-panel{min-width:200px}
}

/* 7. Japonais et coreen : la police d'affichage n'a pas de glyphes CJK, le
   navigateur retombe sur une sans systeme. On declare un serif CJK pour que
   les titres gardent le caractere editorial du site, et un sans lisible pour
   le corps. L'italique n'existe pas en CJK : l'emphase reste par la couleur. */
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] .logo-txt{font-family:var(--f-display),"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif;letter-spacing:0}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] .logo-txt{font-family:var(--f-display),"Apple SD Gothic Neo","Noto Serif KR","Noto Serif CJK KR",serif;letter-spacing:0}
html[lang="ja"] body,html[lang="ja"] p,html[lang="ja"] a,html[lang="ja"] li,html[lang="ja"] td,html[lang="ja"] th{font-family:var(--f-sans),"Hiragino Sans","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",sans-serif}
html[lang="ko"] body,html[lang="ko"] p,html[lang="ko"] a,html[lang="ko"] li,html[lang="ko"] td,html[lang="ko"] th{font-family:var(--f-sans),"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif}
html[lang="ja"] h1 em,html[lang="ko"] h1 em,html[lang="ja"] h2 em,html[lang="ko"] h2 em{font-style:normal}
html[lang="ja"],html[lang="ko"]{word-break:keep-all;overflow-wrap:anywhere}

/* 8. Stories. Pastilles rondes comme Instagram, TikTok ou un widget stories
   Shopify, et lecteur au format telephone. C'est le livrable montre dans
   son format, pas une capture d'ecran du livrable. */
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:84px;background:none;border:0;padding:0;cursor:pointer;text-align:center;font:inherit;color:var(--ink)}
.story .ring{display:block;width:76px;height:76px;margin:0 auto;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg,var(--signal),#f2a54a,var(--signal))}
.story .ring img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:2.5px solid var(--paper)}
.story .slab{display:block;margin-top:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75}
.story:hover .ring,.story:focus-visible .ring{transform:scale(1.05)}
.story .ring{transition:transform .15s ease}
.story.seen .ring{background:var(--rule)}
.dark .story{color:var(--paper)}
.dark .story .ring img{border-color:var(--ink)}

/* Lecteur */
.story-dlg{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(12,10,8,.92);padding:16px}
.story-dlg[open]{display:flex}
.story-dlg .phone-vw{position:relative;width:min(390px,100%);aspect-ratio:9/16;max-height:calc(100vh - 32px);
  border-radius:28px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.story-dlg video{width:100%;height:100%;object-fit:cover;display:block}
.story-dlg .segs{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.story-dlg .segs i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.story-dlg .segs i b{display:block;height:100%;width:0;background:#fff}
.story-dlg .segs i.done b{width:100%}
.story-dlg .who{position:absolute;top:22px;left:14px;right:56px;z-index:3;color:#fff;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-dlg .x,.story-dlg .snd{position:absolute;z-index:4;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;font:700 18px/40px var(--f-sans);cursor:pointer;text-align:center}
.story-dlg .x{top:14px;right:12px}
.story-dlg .snd{bottom:16px;right:12px;font-size:14px}
.story-dlg .tap{position:absolute;top:60px;bottom:70px;width:35%;z-index:2;background:transparent;border:0;cursor:pointer}
.story-dlg .tap.l{left:0}.story-dlg .tap.r{right:0}
.story-dlg .cta{position:absolute;left:12px;right:60px;bottom:16px;z-index:3;text-align:center}
.story-dlg .cta a{display:inline-block;padding:10px 16px;border-radius:999px;background:#fff;color:#111;text-decoration:none;
  font-weight:700;font-size:13px}
body.story-open{overflow:hidden}

/* Maquette de fiche produit au format telephone */
.phone{width:min(360px,100%);margin:0 auto;border-radius:34px;background:#111;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.phone-top{height:22px;display:flex;justify-content:center;align-items:center}
.phone-top span{width:90px;height:6px;border-radius:3px;background:#2a2a2a}
.pdp-body{background:#fff;color:#111;border-radius:26px;padding:14px 14px 18px;font-family:var(--f-sans)}
.pdp-img{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f4f1ec}
.pdp-img img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-brand{margin:12px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#777}
.pdp-name{margin:2px 0 6px;font-weight:700;font-size:17px;line-height:1.2}
.pdp-row{display:flex;gap:8px;align-items:center;font-size:12px;color:#555}
.pdp-stars{color:#e0a020;letter-spacing:1px}
.pdp-buy{margin:12px 0 14px;background:#111;color:#fff;text-align:center;padding:12px;border-radius:8px;font-weight:700;font-size:14px}
.pdp-lbl{margin:0 0 8px;font-size:12px;font-weight:700}
.pdp .stories{gap:10px}
.pdp .story{width:66px;color:#111}
.pdp .story .ring{width:60px;height:60px;padding:2.5px}
.pdp .story .ring img{border-color:#fff}
.pdp .story .slab{font-size:9px;opacity:.7}
.pdp-desc{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#444}
.pdp-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media(max-width:860px){.pdp-wrap{grid-template-columns:minmax(0,1fr)}}

/* honeypot v2 : champ hors ecran, invisible mais present dans le DOM */
.lf-x{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}