@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-latin-opsz-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-latin-opsz-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jost-latin-500-normal.woff2) format('woff2')}

/* Layout : vitrine éditoriale, colonnes larges, bandeaux pleine largeur ; chaque page mène au rendez-vous */
:root{
  /* Blanc, champagne, taupe */
  --bg:#FFFFFF; --bg-alt:#F5EDE0; --ink:#2E2621; --muted:#6B5F55; --line:#E7DCCB;
  --accent:#7E6340; --panel:#5E5248; --on-panel:#FFFFFF; --on-panel-muted:#EADFD0;
  --panel-accent:#EBD7B4; --panel-line:rgba(255,255,255,.2); --panel-deep:#4C4239;
  --tone1:#EFE4D2; --tone2:#E2D3BE; --tone3:#7A6A5D; --tone-ink:#6B5F55; --tone3-ink:#FFFFFF;
  --ok:#2F6B4F; --warn:#A35B1F; --off:#BBB0A4;
  --display:'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --body:'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --gut-l:max(16px, env(safe-area-inset-left, 0px)); --gut-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1A1714; --bg-alt:#241F1B; --ink:#F3EADB; --muted:#BFB2A3; --line:#3A322C;
  --accent:#D9BE8E; --panel:#2C2520; --on-panel:#F3EADB; --on-panel-muted:#C9BBA9;
  --panel-accent:#D9BE8E; --panel-line:rgba(255,255,255,.14); --panel-deep:#221C18;
  --tone1:#2C2620; --tone2:#362E27; --tone3:#4A3F36; --tone-ink:#BFB2A3; --tone3-ink:#F3EADB;
  --ok:#6FB38F; --warn:#E0A064; --off:#5E564F; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#1A1714; --bg-alt:#241F1B; --ink:#F3EADB; --muted:#BFB2A3; --line:#3A322C;
  --accent:#D9BE8E; --panel:#2C2520; --on-panel:#F3EADB; --on-panel-muted:#C9BBA9;
  --panel-accent:#D9BE8E; --panel-line:rgba(255,255,255,.14); --panel-deep:#221C18;
  --tone1:#2C2620; --tone2:#362E27; --tone3:#4A3F36; --tone-ink:#BFB2A3; --tone3-ink:#F3EADB;
  --ok:#6FB38F; --warn:#E0A064; --off:#5E564F; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
a{color:inherit}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
h1,h2,h3{font-family:var(--display); font-weight:400; text-wrap:balance; margin:0; line-height:1.08}
p{margin:0}
.wrap{max-width:1320px; margin:0 auto; padding-left:var(--gut-l); padding-right:var(--gut-r)}
.eyebrow{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); font-weight:500}
.lede{font-size:18px; font-weight:300; color:var(--muted); max-width:58ch}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px; font-family:var(--body); font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer; font-weight:500; transition:background .2s, color .2s}
.btn:hover{background:transparent; color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--bg)}
.btn.light{background:var(--on-panel); color:var(--panel); border-color:var(--on-panel)}
.btn.light:hover{background:transparent; color:var(--on-panel)}
.btn.line-light{background:transparent; color:var(--on-panel); border-color:var(--on-panel)}
.btn:disabled{background:var(--line); border-color:var(--line); color:var(--muted); cursor:not-allowed}
.link{font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-underline-offset:5px; font-weight:500; background:none; border:0; padding:0; cursor:pointer; color:inherit; font-family:var(--body); text-decoration:underline}
.link.accent{color:var(--accent)}

/* Bandeau + en-tête */
.topbar{background:var(--panel); color:var(--on-panel); font-size:13px; letter-spacing:.05em}
.topbar .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 24px; padding-block:9px; text-align:center}
.topbar strong{color:var(--panel-accent); font-weight:500}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--bg); border-bottom:1px solid var(--line)}
header.site > .wrap:not(.mobile-nav){display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.logo{text-decoration:none; display:flex; flex-direction:column; line-height:1}
.logo b{font-family:var(--display); font-weight:400; font-size:28px}
.logo span{font-size:9px; letter-spacing:.44em; color:var(--muted); margin-top:6px}
nav.main{display:flex; gap:26px; font-size:13px; letter-spacing:.1em; text-transform:uppercase}
nav.main a{text-decoration:none; padding:6px 0; border-bottom:1px solid transparent}
nav.main a[aria-current="page"], nav.main a:hover{border-color:var(--ink)}
.hdr-actions{display:flex; align-items:center; gap:10px}
.icon-btn{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:var(--ink); cursor:pointer; position:relative; text-decoration:none}
.icon-btn svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.4}
.count{position:absolute; top:4px; right:2px; min-width:18px; height:18px; border-radius:9px; background:var(--accent); color:var(--bg); font-size:11px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-variant-numeric:tabular-nums}
.menu-btn{display:none}
.mobile-nav{display:none; border-top:1px solid var(--line); padding-block:12px}
.mobile-nav a{display:block; padding:12px 0; text-decoration:none; font-size:15px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line)}
@media (max-width:1060px){ nav.main{display:none} .menu-btn{display:inline-flex} .hdr-actions .btn{display:none} .mobile-nav.open{display:block} }

/* Visuels : fiches lookbook en attente des photos officielles */
.ph{position:relative; background:var(--tone1); color:var(--tone-ink); display:flex; flex-direction:column; justify-content:space-between; padding:18px; max-width:100%; overflow:hidden}
.ph.t2{background:var(--tone2)} .ph.t3{background:var(--tone3); color:var(--tone3-ink)}
.ph.has-img{padding:0; background:var(--tone1)}
.ph.has-img::after{display:none}
.hero-media,.univ-media{position:relative; display:block}
.tag27{position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); color:#3d342c; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:8px 12px}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block}
.ph .ph-ref{font-family:var(--display); font-size:clamp(34px,4vw,56px); line-height:1; opacity:.55; font-style:italic}
.ph .ph-note{font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.ph::after{content:""; position:absolute; inset:14px; border:1px solid currentColor; opacity:.18; pointer-events:none}

/* Héro */
.hero{background:var(--panel); color:var(--on-panel); position:relative}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:end; padding-block:88px 120px}
.hero h1{font-size:clamp(46px,6.6vw,96px); line-height:1}
.hero h1 em{display:block}
.hero .lede{color:var(--on-panel-muted); margin:26px 0 34px}
.hero .ph{aspect-ratio:4/5; background:var(--panel-deep); color:var(--on-panel-muted)}
.trust{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:34px; font-size:14px; color:var(--on-panel-muted)}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr; padding-block:56px 110px} .hero .hero-media{margin-top:8px} }

.quick{position:relative; margin-top:-64px; z-index:2}
.quick form{background:var(--bg); border:1px solid var(--line); box-shadow:0 24px 60px rgba(20,16,12,.14); padding:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; align-items:end}
label.f{display:flex; flex-direction:column; gap:7px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.f input, .f select, .f textarea{font-family:var(--body); font-size:16px; letter-spacing:0; text-transform:none; color:var(--ink); background:var(--bg); border:1px solid var(--line); min-height:48px; padding:10px 12px; border-radius:0; width:100%}
.f textarea{min-height:90px; resize:vertical}
.next-slot{font-size:14px; color:var(--muted); display:flex; flex-direction:column}
.next-slot strong{color:var(--accent); font-weight:500; font-size:16px}

section.blk{padding-block:96px}
section.blk.alt{background:var(--bg-alt)}
section.blk.dark{background:var(--panel); color:var(--on-panel)}
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:44px}
.sec-head h2{font-size:clamp(32px,3.8vw,52px); margin-top:12px}
.center{text-align:center} .center .lede{margin-inline:auto}

/* Univers */
.univers{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px}
.univ{display:flex; flex-direction:column; gap:14px}
.univ .ph{aspect-ratio:3/4}
.univ h3{font-size:30px}
.univ .meta{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.univ p{color:var(--muted)}
.row-links{display:flex; flex-wrap:wrap; gap:22px; margin-top:4px}

/* Maisons */
.maisons{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); border-top:1px solid var(--line)}
.maison{padding:30px 26px 30px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; text-decoration:none}
.maison b{font-family:var(--display); font-weight:400; font-size:28px; line-height:1.1}
.maison span{color:var(--muted); font-size:15px}
.maison:hover b{color:var(--accent)}

/* Grille modèles */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:30px 22px}
.card{display:flex; flex-direction:column; gap:10px}
.card .ph{aspect-ratio:4/5; text-decoration:none}
.card .heart{position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; border-radius:50%; background:var(--bg); border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink)}
.card .heart svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.4; fill:none}
.card .heart[aria-pressed="true"] svg{fill:currentColor}
.card .badge{position:absolute; left:12px; bottom:12px; z-index:2; background:var(--bg); color:var(--ink); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px}
.card h3{font-size:22px}
.card .sub{font-size:14px; color:var(--muted)}
.card-wrap{position:relative}
.card.more .ph{background:transparent; border:1px dashed var(--line); color:var(--muted); justify-content:center; align-items:flex-start; gap:12px}
.card.more .ph::after{display:none}
.card.more b{font-family:var(--display); font-weight:400; font-size:24px; color:var(--ink)}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px}
.chip{min-height:44px; padding:0 18px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:var(--body); font-size:14px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* Collections d'une maison */
.coll{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:40px; padding-block:56px; border-top:1px solid var(--line)}
.coll-head{display:flex; flex-direction:column; gap:10px; align-self:start; position:sticky; top:110px}
.coll-head h2{font-size:clamp(34px,3.6vw,48px)}
.season{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}
@media (max-width:860px){ .coll{grid-template-columns:1fr} .coll-head{position:static} }

.brand-hero{padding-block:80px 40px}
.brand-hero h1{font-size:clamp(48px,7vw,104px); margin:14px 0 22px}
.brand-meta{display:flex; flex-wrap:wrap; gap:10px 36px; margin-top:28px; font-size:14px; color:var(--muted)}
.brand-meta b{display:block; font-family:var(--display); font-weight:400; font-size:30px; color:var(--ink); font-variant-numeric:tabular-nums}

/* Fiche modèle */
.pdp{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; padding-block:48px 96px}
.pdp-gal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.pdp-gal .ph{aspect-ratio:3/4}
.pdp-gal .ph:first-child{grid-column:1/-1; aspect-ratio:4/5}
.pdp-info{display:flex; flex-direction:column; gap:20px; align-self:start; position:sticky; top:110px}
.pdp-info h1{font-size:clamp(40px,4.4vw,62px)}
.spec{border-top:1px solid var(--line)}
.spec div{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px}
.spec dt{color:var(--muted)} .spec dd{margin:0; text-align:right}
.crumbs{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; padding-top:28px}
.crumbs a{text-underline-offset:4px}
@media (max-width:860px){ .pdp{grid-template-columns:1fr} .pdp-info{position:static} }

/* Expérience */
.exp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center}
.exp h2{font-size:clamp(36px,4.2vw,58px); margin:14px 0 22px}
.exp .lede{color:var(--on-panel-muted); margin-bottom:34px}
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{display:grid; grid-template-columns:64px 1fr; gap:18px; padding:26px 0; border-top:1px solid var(--panel-line)}
.steps li:last-child{border-bottom:1px solid var(--panel-line)}
.steps li::before{counter-increment:s; content:counter(s, decimal-leading-zero); font-family:var(--display); font-size:40px; line-height:1; color:var(--panel-accent)}
.steps h3{font-family:var(--body); font-weight:500; font-size:18px; margin-bottom:4px}
.steps p{color:var(--on-panel-muted)}
@media (max-width:860px){ .exp{grid-template-columns:1fr; gap:40px} }

/* Journal */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:32px}
.post{display:flex; flex-direction:column; gap:12px}
.post .ph{aspect-ratio:16/10} .post .ph img{object-position:center 30%}
.post h3{font-size:26px; line-height:1.18}
.post p{color:var(--muted)}
.article{max-width:720px; margin:0 auto; padding-block:56px 96px; display:flex; flex-direction:column; gap:22px}
.article h1{font-size:clamp(38px,5vw,64px)}
.article h2{font-size:30px; margin-top:16px}
.article h3{font-family:var(--display); font-weight:400; font-size:23px; margin-top:6px}
.article .art-meta{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:-8px}
.article .art-list{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; font-size:17px; line-height:1.7}
.article .art-faq details{border-top:1px solid var(--line); padding:14px 0}
.article .art-faq summary{cursor:pointer; font-weight:500; font-size:17px}
.article .art-faq p{margin:10px 0 0}
.article .art-more ul{padding-left:20px; display:flex; flex-direction:column; gap:8px}
.article .art-more h2{font-size:24px}
.article p{font-size:18px; line-height:1.75}

/* Avis */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px}
.review{margin:0; background:var(--bg); padding:30px; display:flex; flex-direction:column; gap:18px; border:1px solid var(--line)}
.review blockquote{margin:0; font-family:var(--display); font-size:21px; line-height:1.45}
.review figcaption{font-size:14px; color:var(--muted)}
.rating{font-family:var(--display); font-size:clamp(40px,5vw,64px)}

/* Boutique + FAQ */
.visit{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px}
.visit .ph{min-height:380px}
.visit dl{margin:0; display:flex; flex-direction:column; gap:14px}
.visit dt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.visit dd{margin:2px 0 0}
@media (max-width:860px){ .visit{grid-template-columns:1fr} }
details.faq{border-top:1px solid var(--line); padding:20px 0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer; list-style:none; font-size:18px; font-weight:500; display:flex; justify-content:space-between; gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-weight:300; font-size:22px; line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:12px; color:var(--muted); max-width:62ch}

/* Rendez-vous */
.rdv{display:grid; grid-template-columns:340px minmax(0,1fr); min-height:640px; border:1px solid var(--line); margin-block:40px 96px}
.rdv aside{background:var(--panel); color:var(--on-panel); padding:36px 30px; display:flex; flex-direction:column; gap:28px}
.rdv main{padding:40px 44px; min-width:0}
.prog{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.prog li{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--on-panel-muted)}
.prog li span{width:28px; height:28px; border-radius:50%; border:1px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0}
.prog li.cur{color:var(--on-panel)} .prog li.cur span{background:var(--on-panel); color:var(--panel); border-color:var(--on-panel)}
.prog li.done{color:var(--on-panel)}
.recap{border-top:1px solid var(--panel-line); padding-top:22px; display:flex; flex-direction:column; gap:12px; font-size:15px}
.recap small{display:block; font-size:12px; color:var(--on-panel-muted)}
.reassure{margin-top:auto; list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--on-panel-muted)}
.types{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.type{display:flex; flex-direction:column; gap:8px; text-align:left; padding:22px; background:var(--bg); border:1px solid var(--line); color:var(--ink); cursor:pointer; font-family:var(--body); min-height:118px}
.type b{font-family:var(--display); font-weight:400; font-size:23px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; width:100%}
.type b small{font-family:var(--body); font-size:13px; color:var(--muted)}
.type span{font-size:14px; color:var(--muted)}
.type[aria-pressed="true"]{border:2px solid var(--ink); padding:21px; background:var(--bg-alt)}
.cal-wrap{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:32px}
.cal-nav{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.cal-nav button{width:44px; height:44px; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; font-size:18px}
.cal-nav button:disabled{opacity:.35; cursor:not-allowed}
.dow, .cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.dow{font-size:11px; letter-spacing:.12em; color:var(--muted); text-align:center; margin-bottom:6px}
.day{height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; cursor:pointer; font-variant-numeric:tabular-nums}
.day i{width:5px; height:5px; border-radius:50%; background:var(--ok)}
.day i.few{background:var(--warn)}
.day:disabled{color:var(--off); cursor:not-allowed; text-decoration:line-through; border-color:transparent}
.day:disabled i{background:transparent}
.day[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.day[aria-pressed="true"] i{background:var(--bg)}
.slots{display:flex; flex-direction:column; gap:8px}
.slot{min-height:46px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; cursor:pointer; font-variant-numeric:tabular-nums}
.slot:disabled{color:var(--off); text-decoration:line-through; cursor:not-allowed}
.slot[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:13px; color:var(--muted)}
.legend span{display:flex; align-items:center; gap:6px}
.legend i{width:6px; height:6px; border-radius:50%; display:inline-block}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.step-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap}
.check{display:flex; gap:10px; align-items:center; min-height:44px; font-size:15px}
.check input{width:20px; height:20px; accent-color:var(--ink)}
.note{background:var(--bg-alt); padding:16px 18px; font-size:14px; color:var(--muted)}
.sel-chips{display:flex; flex-wrap:wrap; gap:8px}
.sel-chips span{border:1px solid var(--line); padding:6px 12px; font-size:13px}
@media (max-width:900px){ .rdv{grid-template-columns:1fr} .rdv aside .reassure{margin-top:0} .rdv main{padding:28px 18px} .cal-wrap{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} }

/* Final + pied */
.final{text-align:center; padding-block:110px}
.final h2{font-size:clamp(40px,5.4vw,74px); margin-bottom:18px}
.final p{color:var(--muted); margin:0 auto 34px; max-width:52ch}
footer{background:var(--panel); color:var(--on-panel-muted); font-size:14px}
footer .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:32px; padding-block:64px 40px}
footer b{color:var(--on-panel); font-weight:500; display:block; margin-bottom:10px}
footer a{display:block; text-decoration:none; padding:4px 0}
footer a:hover{color:var(--on-panel)}
footer .legal{border-top:1px solid var(--panel-line); padding-block:20px; font-size:12px; text-align:center}
.f-dark input{background:var(--panel-deep); border-color:var(--panel-line); color:var(--on-panel)}
.f-dark input::placeholder{color:var(--on-panel-muted)}

.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--bg); border-top:1px solid var(--line); padding:10px var(--gut-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut-l)}
  .sticky-cta .btn{flex:1}
  body{padding-bottom:84px}
  section.blk{padding-block:64px}
}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:12px 20px; font-size:14px; z-index:70}

/* Téléphone */
@media (max-width:640px){
  .topbar .wrap{font-size:12px; gap:2px 14px}
  .topbar .wrap span:first-child{display:none}
  header.site > .wrap:not(.mobile-nav){padding-block:8px; gap:8px}
  .logo b{font-size:21px} .logo span{font-size:8px; letter-spacing:.38em}
  .hero .wrap{padding-block:40px 96px}
  .hero h1{font-size:clamp(38px,11vw,48px)}
  .hero .lede{font-size:16px; margin:18px 0 26px}
  .hero .btn{flex:1 1 100%}
  .trust{gap:6px 18px; font-size:13px; margin-top:24px}
  .quick{margin-top:-56px}
  .quick form{padding:18px; gap:14px; grid-template-columns:1fr}
  section.blk{padding-block:56px}
  .sec-head{margin-bottom:26px}
  .sec-head h2, .center h2{font-size:30px}
  .univ h3{font-size:26px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px}
  .card h3{font-size:18px}
  .card .sub{font-size:12px; line-height:1.4}
  .card .badge{font-size:9px; letter-spacing:.08em; left:8px; bottom:8px; padding:4px 6px}
  .card .heart{top:6px; right:6px}
  .card.more b{font-size:19px} .card.more .ph{font-size:13px; padding:14px}
  .ph{padding:12px} .ph::after{inset:8px} .ph .ph-note{font-size:9px; letter-spacing:.1em}
  .filters{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-bottom:24px; scrollbar-width:none}
  .chip{flex:0 0 auto}
  .brand-hero{padding-block:36px 20px}
  .brand-hero h1{font-size:clamp(40px,12vw,52px); margin:10px 0 16px}
  .brand-meta{gap:10px 22px} .brand-meta b{font-size:22px}
  .lede{font-size:16px}
  .coll{padding-block:34px; gap:20px}
  .coll-head h2{font-size:32px}
  .maison{padding:18px 0; gap:4px} .maison b{font-size:23px} .maison span{font-size:14px}
  .exp h2{font-size:34px}
  .steps li{grid-template-columns:44px 1fr; gap:12px; padding:20px 0}
  .steps li::before{font-size:28px}
  .post h3{font-size:22px}
  .review{padding:22px} .review blockquote{font-size:18px}
  .visit{gap:28px} .visit .ph{min-height:220px}
  details.faq summary{font-size:16px}
  .pdp{padding-block:20px 56px; gap:28px}
  .pdp-gal{gap:6px}
  .pdp-info h1{font-size:38px}
  .rdv{margin-block:16px 40px}
  .rdv aside{padding:22px 18px; gap:18px}
  .rdv aside > span:first-child{font-size:22px !important}
  .prog{flex-direction:row; flex-wrap:wrap; gap:8px 14px}
  .prog li{font-size:12px; gap:6px}
  .prog li span{width:24px; height:24px; font-size:11px}
  .reassure{display:none}
  .rdv main{padding:24px 16px}
  .types{grid-template-columns:1fr}
  .type{min-height:0; padding:18px} .type[aria-pressed="true"]{padding:17px}
  .dow, .cal{gap:4px}
  .dow{font-size:10px; letter-spacing:.04em}
  .day{height:44px; font-size:14px}
  .step-foot .btn{flex:1 1 100%}
  .step-foot .link{order:2}
  .final{padding-block:64px}
  .final h2{font-size:38px}
  .article{padding-block:32px 64px} .article p{font-size:16px}
  .crumbs{padding-top:18px; font-size:12px}
  footer .cols{padding-block:44px 28px; gap:26px}
}
@media (max-width:360px){ .grid{grid-template-columns:1fr} }
/* Deux boutiques */
.shops{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px}
.shop{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line)}
.shop .ph{aspect-ratio:16/10}
.shop-body{padding:28px; display:flex; flex-direction:column; gap:18px; flex:1}
.shop-body h3{font-size:clamp(32px,3.4vw,44px)}
.shop dl{margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.shop dt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.shop dd{margin:2px 0 0}
.shop .slot-hint{background:var(--bg-alt); padding:12px 14px; font-size:14px; color:var(--muted)}
.shop .slot-hint strong{color:var(--accent); font-weight:500}
.shop-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto}
.shop-actions .btn{flex:1 1 auto}
.shop-pick{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:30px}
.shop-pick .type b{font-size:26px}
.step-label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:500}
.hp{position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden}
.err{color:var(--warn); font-size:14px; margin-top:12px}
.f input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--warn)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin-top:12px; line-height:1.5}
.consent input{width:20px; height:20px; flex-shrink:0; margin-top:1px; accent-color:var(--ink)}
@media (max-width:640px){ .shop-body{padding:20px} .shop-pick{grid-template-columns:1fr} }
.demo-flag{font-size:12px; color:var(--muted); margin-top:10px}
main#app{min-height:60vh}
@media (prefers-reduced-motion: no-preference){ #app > *{animation:rise .5s ease both} @keyframes rise{from{opacity:.4; transform:translateY(8px)} to{opacity:1; transform:none}} }

/* Pages légales */
.legal-page{max-width:820px}
.legal-page h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,30px);margin:40px 0 12px}
.legal-page p,.legal-page li{line-height:1.75;color:var(--ink-soft,inherit)}
.legal-page ul{padding-left:20px}
.legal-page .muted{margin-top:40px;font-size:13px;opacity:.75}
footer .legal a{color:inherit}
/* Bandeau cookies */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:720px;margin:0 auto;background:var(--bg,#fff);color:var(--ink,#3d342c);border:1px solid var(--line,#e6dccf);box-shadow:0 18px 48px rgba(40,30,20,.18);padding:20px 22px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cookie-bar p{margin:0;flex:1 1 320px;font-size:14px;line-height:1.6}
.cookie-bar a{color:inherit}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:860px){.cookie-bar{bottom:84px}}