/* ---------- Polices auto-hébergées (SIL Open Font License) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format("woff2")}
/* Direction « Boudoir cinéma » : papier rosé, encre aubergine, bordeaux pour l'action, champagne pour les filets.
   Mise en page : colonne unique sur mobile, galerie collée à gauche + achat à droite à partir de 900px. */
:root{
  --paper:#FBF4F1;      /* fond rosé très pâle */
  --paper-2:#F3E6E1;    /* bandes et encadrés */
  --ink:#2A191E;        /* texte principal, aubergine profond */
  --ink-soft:#6E5A5F;   /* texte secondaire */
  --rose:#B9787E;       /* vieux rose : ornements, badges */
  --bordeaux:#6B1C2A;   /* action principale */
  --bordeaux-dark:#521421;
  --champagne:#D9C3A0;  /* filets, liserés */
  --line:#E6D3CC;
  --white:#FFFDFC;
  --f-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --f-text:"Jost","Futura","Avenir Next","Segoe UI",system-ui,sans-serif;
  --step--1:.8125rem; --step-0:1rem; --step-1:1.1875rem; --step-2:1.5rem; --step-3:2rem; --step-4:2.5rem;
  --radius:4px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--f-text);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block;height:auto}
a{color:var(--bordeaux);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.12;text-wrap:balance;margin:0}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0}
.eyebrow{font:500 var(--step--1)/1.3 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- En-tête ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.logo img{height:38px;width:auto}
.nav{margin-left:auto}
.nav-toggle{background:none;border:0;cursor:pointer;font:500 var(--step--1)/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;padding:10px 0;color:var(--ink)}
.nav-toggle::before{content:"";display:inline-block;width:18px;height:10px;margin-right:8px;vertical-align:-1px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.nav ul{list-style:none;margin:0;padding:8px 0 16px;display:none}
.nav.open ul{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nav li a{display:block;padding:12px 0;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-size:var(--step-1);border-bottom:1px solid var(--line)}
.nav li a[aria-current]{color:var(--bordeaux)}
@media (min-width:1000px){
  .nav-toggle{display:none}
  .nav ul,.nav.open ul{position:static;display:flex;gap:22px;padding:0;border:0;background:none}
  .nav li a{border:0;padding:6px 0;font:500 var(--step--1)/1 var(--f-text);letter-spacing:.1em;text-transform:uppercase}
  .nav li a:hover{color:var(--bordeaux)}
}
.ribbon{background:var(--bordeaux);color:var(--white);font-size:var(--step--1);text-align:center;padding-block:7px;letter-spacing:.04em}

/* ---------- Fil d'Ariane ---------- */
.crumbs{font-size:var(--step--1);color:var(--ink-soft);padding-block:14px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--rose)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--bordeaux);text-decoration:underline}

/* ---------- Bloc produit ---------- */
.product{display:grid;gap:24px;padding-bottom:40px}
@media (min-width:900px){.product{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}}
.gallery{min-width:0}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;scrollbar-width:none;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
.slides::-webkit-scrollbar{display:none}
.slides figure{flex:0 0 88%;margin:0;scroll-snap-align:center;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.slides figure:first-child{margin-left:max(16px,env(safe-area-inset-left,0px))}
.slides figure:last-child{margin-right:max(16px,env(safe-area-inset-right,0px))}
.slides img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .slides{margin-inline:0;display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:10px}
  .slides figure{flex:none;margin:0!important}
  .slides figure:first-child{grid-column:1 / -1}
}
.dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.dots span.on{background:var(--bordeaux)}
@media (min-width:900px){.dots{display:none}}

.buy{display:grid;gap:18px;min-width:0}
@media (min-width:900px){.buy{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)}}
.buy h1{font-size:var(--step-4);font-weight:500}
.buy h1 em{font-style:italic;color:var(--bordeaux)}
.price{display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
.price strong{font:600 var(--step-3)/1 var(--f-display)}
.price span{font-size:var(--step--1);color:var(--ink-soft)}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{font-size:var(--step--1);border:1px solid var(--champagne);padding:5px 10px;border-radius:999px;background:var(--white)}
.opt{display:grid;gap:8px}
.opt-label{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.swatches,.sizes{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.swatches li{display:flex;align-items:center;gap:7px;font-size:var(--step--1);padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.swatches i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(42,25,30,.15)}
.sizes li{min-width:52px;text-align:center;font-size:var(--step--1);padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:14px 20px;border-radius:var(--radius);background:var(--bordeaux);color:var(--white);text-decoration:none;font:600 var(--step-0)/1.2 var(--f-text);letter-spacing:.04em;transition:background .2s}
.cta:hover{background:var(--bordeaux-dark)}
.cta svg{width:16px;height:16px}
.reassure{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:var(--step--1)}
.reassure li{display:flex;gap:10px;align-items:flex-start}
.reassure svg{flex:0 0 18px;width:18px;height:18px;color:var(--rose);margin-top:1px}
.reassure strong{font-weight:600}

/* ---------- Sections éditoriales ---------- */
.band{background:var(--white);border-block:1px solid var(--line)}
.section{padding-block:44px;display:grid;gap:18px}
.section > p,.section .prose{max-width:66ch}
.prose{display:grid;gap:14px}
.essentiel{border-left:2px solid var(--champagne);padding:4px 0 4px 18px;font-size:var(--step-1);line-height:1.55;max-width:62ch}
.table-wrap{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:var(--step--1);font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:38%;font-weight:500;color:var(--ink-soft)}
.sizes-table thead th{font-weight:600;background:var(--paper-2)}
.note{font-size:var(--step--1);color:var(--ink-soft)}
.two{display:grid;gap:32px}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;gap:56px}}
.quote{font:italic 500 var(--step-2)/1.35 var(--f-display);color:var(--bordeaux);max-width:30ch}
.watch{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.watch li{padding-left:18px;position:relative}
.watch li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--rose)}

/* Cartes produits */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.cards.look{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.cards.look{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:grid;gap:8px;text-decoration:none;color:var(--ink)}
.card figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover img{transform:scale(1.03)}
.card .k{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose)}
.card .n{font-family:var(--f-display);font-size:var(--step-1);line-height:1.2}
.card .p{font-size:var(--step--1);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.links a{display:inline-block;padding:8px 14px;border:1px solid var(--champagne);border-radius:999px;text-decoration:none;color:var(--ink);font-size:var(--step--1);background:var(--white)}
.links a:hover{border-color:var(--bordeaux);color:var(--bordeaux)}

/* FAQ */
.faq{display:grid;max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;font:600 var(--step-1)/1.3 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 1.5rem/1 var(--f-text);color:var(--rose)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;max-width:66ch}

/* Pied de page */
.site-footer{background:var(--ink);color:#EBDCD7;padding-block:40px 110px;font-size:var(--step--1)}
.site-footer .wrap{display:grid;gap:20px}
.site-footer a{color:#EBDCD7}
.site-footer .legal{border-top:1px solid rgba(235,220,215,.2);padding-top:16px;color:#C9B5AF}
@media (min-width:900px){.site-footer{padding-bottom:40px}}

/* Barre d'achat collante (mobile) */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(42,25,30,.08);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:14px;transform:translateY(110%);transition:transform .25s}
.sticky-buy.show{transform:none}
.sticky-buy .t{min-width:0;flex:1;display:grid}
.sticky-buy .t span{font-size:.75rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .t strong{font:600 var(--step-1)/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.sticky-buy .cta{width:auto;min-height:46px;padding:10px 18px;font-size:var(--step--1)}
@media (min-width:900px){.sticky-buy{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Page catégorie ---------- */
.hero{display:grid;gap:14px;padding-block:8px 28px;max-width:760px}
.hero h1{font-size:var(--step-4);font-weight:500}
.hero h1 em{font-style:italic;color:var(--bordeaux)}
.hero .lead{font-size:var(--step-1);line-height:1.55;max-width:62ch}
.subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0 0 8px;padding:0}
@media (min-width:900px){.subs{grid-template-columns:repeat(5,minmax(0,1fr))}}
.subs a{display:grid;gap:2px;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);text-decoration:none;color:var(--ink)}
.subs a:hover{border-color:var(--bordeaux)}
.subs b{font:600 var(--step-1)/1.2 var(--f-display)}
.subs span{font-size:var(--step--1);color:var(--ink-soft)}
.subs .insp b{color:var(--bordeaux)}
.toolbar{border-block:1px solid var(--line);padding-block:10px}
.sort{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--step--1);color:var(--ink-soft)}
.sort select{font:500 var(--step--1)/1 var(--f-text);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px}
.grid{list-style:none;margin:0;padding:22px 0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 20px}}
.pcard{display:grid;grid-template-rows:1fr auto;gap:10px}
.pcard .fiche{display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--ink)}
.pcard figure{margin:0 0 4px;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard .fiche:hover img{transform:scale(1.03)}
.pcard .k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.pcard .n{font:600 var(--step-1)/1.2 var(--f-display)}
.pcard .m{font-size:.8rem;color:var(--ink-soft)}
.pcard .p{font-weight:600;font-variant-numeric:tabular-nums}
.pcard .go{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 12px;border:1px solid var(--bordeaux);border-radius:var(--radius);color:var(--bordeaux);text-decoration:none;font:600 var(--step--1)/1.2 var(--f-text);letter-spacing:.03em;transition:background .2s,color .2s}
.pcard .go:hover{background:var(--bordeaux);color:var(--white)}
.pcard .go svg{width:13px;height:13px}
.hero .lead strong{font-weight:600;color:var(--ink)}
.keyfacts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.keyfacts li{font-size:var(--step--1);border:1px solid var(--champagne);padding:5px 10px;border-radius:999px;background:var(--white)}
.prose{display:grid;gap:14px;max-width:70ch}
.prose h3{font-size:var(--step-2);margin-top:10px}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.longform{display:grid;gap:48px}
@media (min-width:900px){.longform .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}}
.guide{display:grid;gap:26px}
@media (min-width:900px){.guide{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}}
.guide article{display:grid;gap:10px;align-content:start}
.guide h3{font-size:var(--step-2)}

/* ---------- Page hub ---------- */
.tiles{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
@media (min-width:900px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}}
.tiles a{display:grid;gap:4px;align-content:start;text-decoration:none;color:var(--ink)}
.tiles figure{margin:0 0 6px;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.tiles img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tiles a:hover img{transform:scale(1.03)}
.tiles b{font:600 var(--step-1)/1.2 var(--f-display)}
.tiles a:hover b{color:var(--bordeaux)}
.tiles span{font-size:var(--step--1);color:var(--ink-soft);line-height:1.45}
.sec-head{display:grid;gap:6px;margin-bottom:18px}
.insp{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:700px){.insp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.insp{grid-template-columns:repeat(3,minmax(0,1fr))}}
.insp a{display:grid;gap:2px;height:100%;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--champagne);border-radius:var(--radius);background:var(--white);text-decoration:none;color:var(--ink)}
.insp a:hover{border-left-color:var(--bordeaux)}
.insp b{font:600 var(--step-1)/1.2 var(--f-display);color:var(--bordeaux)}
.insp span{font-size:var(--step--1);color:var(--ink-soft)}
.gloss{display:grid;gap:14px;margin:0}
@media (min-width:900px){.gloss{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 48px}}
.gloss div{border-top:1px solid var(--line);padding-top:12px}
.gloss dt{font:600 var(--step-1)/1.2 var(--f-display);margin-bottom:4px}
.gloss dd{margin:0}
/* ---------- Page inspiration ---------- */
.codes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.codes{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.codes li{padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--champagne);border-radius:var(--radius);background:var(--white);display:grid;gap:4px}
.codes b{font:600 var(--step-1)/1.2 var(--f-display);color:var(--bordeaux)}
.codes span{font-size:var(--step--1);line-height:1.5}
.links-title{font:600 var(--step-1)/1.2 var(--f-display);margin:28px 0 10px}

/* ---------- Bandeau cookies (CMP maison) ---------- */
.cmp{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--white);border-top:2px solid var(--bordeaux);box-shadow:0 -8px 24px rgba(42,25,30,.12);padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.cmp[hidden]{display:none}
.cmp .in{max-width:1180px;margin-inline:auto;display:grid;gap:12px}
@media (min-width:900px){.cmp .in{grid-template-columns:1fr auto;align-items:center;gap:24px}}
.cmp p{font-size:var(--step--1);line-height:1.5}
.cmp .btns{display:flex;gap:10px;flex-wrap:wrap}
.cmp button{flex:1 1 140px;min-height:44px;padding:10px 18px;border-radius:var(--radius);font:600 var(--step--1)/1.2 var(--f-text);letter-spacing:.03em;cursor:pointer;border:1px solid var(--bordeaux)}
.cmp .ok{background:var(--bordeaux);color:var(--white)}
.cmp .no{background:var(--white);color:var(--bordeaux)}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
/* ---------- Accueil ---------- */
.home-hero{display:grid;gap:16px;padding-block:20px 32px;max-width:780px}
.home-hero h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:500}
.home-hero h1 em{font-style:italic;color:var(--bordeaux)}
.home-hero .lead{font-size:var(--step-1);line-height:1.55;max-width:62ch}