/* ==========================================================================
   COSAM PHOTOBOOTH — « Confettis »
   Mise en page inspirée de la référence Dribbble (landing photobooth) ;
   couleurs et logo : charte COSAM (taupe / noir / blanc).
   Clair uniquement, par choix — la référence l'est aussi.
   L'accent est UNE variable : --accent. Le passer au rose de la référence
   (#E83E8C) change tout le site.
   ========================================================================== */

/* --- 0. POLICES, hébergées sur le site (aucun appel à Google, conforme nLPD) --- */
@font-face{font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/jost-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/jost-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --- 1. JETONS ---------------------------------------------------------- */
:root{
  color-scheme:light;
  /* charte */
  --taupe:#8D7C71; --taupe-fonce:#6B5C53; --taupe-clair:#EFE8E3; --sable:#F7F3EF;
  --encre:#1A1512; --encre-700:#3A302A; --encre-500:#6E625B; --encre-300:#B3A79E; --encre-100:#E4DCD6;
  --blanc:#FFFFFF;
  /* rôle */
  --accent:var(--taupe-fonce);          /* ← une seule variable pour changer d'accent */
  --accent-survol:var(--encre);
  --accent-texte:#FFFFFF;
  --accent-doux:var(--taupe-clair);
  --fond-page:var(--blanc);
  --fond-alt:var(--sable);
  --fond-carte:var(--blanc);
  --fond-sombre:var(--encre);
  --texte:var(--encre);
  --texte-doux:var(--encre-700);
  --texte-tres-doux:var(--encre-500);
  --filet:var(--encre-100);
  /* états */
  --libre:#2F6B4F; --tension:#8A6420; --complet:#9C3A2E;
  /* confettis : taupe, sable, encre — jamais de couleur hors charte */
  --c1:rgba(141,124,113,.9); --c2:rgba(107,92,83,.75); --c3:rgba(26,21,18,.55); --c4:rgba(228,220,214,1);
  /* espacement */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;
  /* rayons : la référence arrondit tout */
  --r-pill:999px; --r-carte:20px; --r-img:28px; --r-petit:10px;
  --ombre:0 10px 30px -12px rgba(26,21,18,.18), 0 2px 6px rgba(26,21,18,.06);
  --ombre-forte:0 24px 60px -24px rgba(26,21,18,.28), 0 4px 12px rgba(26,21,18,.06);
  --t:180ms cubic-bezier(.2,.6,.3,1);
  --police:"Jost","Futura","Century Gothic",Avenir,sans-serif;
  --police-fleur:"Bodoni Moda","Didot",Georgia,serif;
}

/* --- 2. BASE ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond-page);color:var(--texte);font-family:var(--police);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--police);font-weight:700;letter-spacing:-.015em;text-wrap:balance;line-height:1.1}
h1{font-size:clamp(36px,5.4vw,64px);letter-spacing:-.02em}
.h-mega{margin:0;font-size:clamp(44px,7.6vw,96px);line-height:.94;text-transform:uppercase;letter-spacing:-.03em}
h2{font-size:clamp(28px,3.8vw,44px)}
h3{font-size:20px;font-weight:600;line-height:1.25}
p{margin:0 0 var(--e4);text-wrap:pretty}
a{color:var(--accent);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-petit)}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:300}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:720px){.wrap{padding:0 32px}}
@media(min-width:1024px){.wrap{padding:0 56px}}
.lecture{max-width:660px}
.lecture p{font-size:17px;color:var(--texte-doux)}

/* mot en script : la fioriture de la référence, dans la voix du logo */
.fleur{font-family:var(--police-fleur);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:-.01em;color:var(--accent);font-size:1.18em;line-height:.8;display:inline-block;
  transform:translateY(.06em) rotate(-4deg);padding:0 .06em}
.h-mega .fleur{font-size:1.02em;margin-left:-.12em}
.mot-entier{white-space:nowrap}

.lbl{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}
.lbl.mut{color:var(--texte-tres-doux)}
.prix{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.big{font-size:19px;color:var(--texte-doux);line-height:1.6}
.small{font-size:14.5px;color:var(--texte-tres-doux)}
.tbc{border-bottom:1.5px dotted var(--tension);cursor:help}
.centre{text-align:center}
.centre .sec-head{margin-left:auto;margin-right:auto}

section{padding:var(--e8) 0}
@media(min-width:720px){section{padding:var(--e9) 0}}
section.alt{background:var(--fond-alt)}
.sec-head{margin-bottom:var(--e6);max-width:none}
.sec-head p{max-width:62ch}
.centre .sec-head p,.texte .sec-head p{margin-left:auto;margin-right:auto}
.sec-head h2{margin-top:var(--e3)}
.sec-head p{margin-top:var(--e3);color:var(--texte-doux);font-size:18px}
.sec-head:has(.une-ligne){max-width:none}
@media(min-width:720px){.une-ligne{white-space:nowrap}}
.sous-titre{color:var(--texte-tres-doux);font-size:17px;letter-spacing:.02em}

/* --- 3. BANDEAU PROTOTYPE + ANNONCE ----------------------------------- */
.proto{background:#2E2724;color:#EFE8E3;font-family:var(--police);font-size:11px;letter-spacing:.04em;
  padding:5px 16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;text-align:center}
.proto b{color:#C9B8AC}
.annonce{background:var(--fond-sombre);color:#fff;font-size:13.5px;letter-spacing:.01em;text-align:center;
  padding:10px 16px;line-height:1.4}
.annonce b{font-weight:600}

/* --- 4. EN-TÊTE --------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--filet)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);height:76px}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--texte)}
.logo img{height:40px;width:auto;display:block}
.logo .mot{font-family:var(--police-fleur);font-style:italic;font-weight:400;font-size:30px;letter-spacing:.005em}
.logo .sous{font-family:var(--police);font-weight:300;font-size:11px;letter-spacing:.22em;color:var(--texte-doux);align-self:flex-end}
nav.main{display:none}
@media(min-width:1024px){
  nav.main{display:flex;gap:var(--e6);align-items:center}
  nav.main a{font-size:15px;font-weight:500;color:var(--texte-doux);text-decoration:none;padding:26px 0;
    border-bottom:3px solid transparent;transition:color var(--t),border-color var(--t)}
  nav.main a:hover{color:var(--texte)}
  nav.main a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
}
.hd-act{display:flex;gap:var(--e2);align-items:center}
.tel{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--filet);
  border-radius:var(--r-pill);text-decoration:none;color:var(--texte);font-size:17px}
.hd-act .btn-hd{display:none}
@media(min-width:1024px){.hd-act .btn-hd{display:inline-flex}.tel{display:none}}
.logo{flex-shrink:0}
.burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--filet);
  border-radius:var(--r-pill);background:transparent;color:var(--texte);cursor:pointer;font-size:17px}
@media(min-width:1024px){.burger{display:none}}
#menu{display:none;border-top:1px solid var(--filet);padding:var(--e4) 0 var(--e5)}
#menu.open{display:block}
@media(min-width:1024px){#menu{display:none !important}}
#menu a{display:block;padding:12px 0;font-size:17px;font-weight:500;color:var(--texte);text-decoration:none;border-bottom:1px solid var(--filet)}

/* --- 5. BOUTONS PILULES ------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  background:var(--accent);color:var(--accent-texte);border:1.5px solid var(--accent);
  font-family:var(--police);font-size:16px;font-weight:500;padding:14px 28px;min-height:50px;
  border-radius:var(--r-pill);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.btn:hover{background:var(--accent-survol);border-color:var(--accent-survol)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.ghost:hover{background:var(--accent);color:var(--accent-texte)}
.btn.sm{padding:10px 20px;font-size:14.5px;min-height:42px}
.btn.full{width:100%}
.actions{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e6)}

/* --- 6. FIL D'ARIANE ---------------------------------------------------- */
.fil{font-size:13px;letter-spacing:.02em;color:var(--texte-tres-doux);padding-top:var(--e5)}
.fil a{color:var(--texte-tres-doux);text-decoration:none}
.fil a:hover{color:var(--accent)}

/* --- 7. HERO ------------------------------------------------------------ */
.hero{position:relative;padding:var(--e7) 0 var(--e9);overflow:hidden;isolation:isolate}
/* rayures verticales très légères, comme la référence */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:repeating-linear-gradient(90deg,rgba(141,124,113,.055) 0 22px,transparent 22px 44px)}
/* confettis : deux calques de dégradés radiaux, aucun fichier */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(circle at 6% 22%, var(--c1) 0 5px, transparent 6px),
   radial-gradient(circle at 9% 30%, var(--c3) 0 3px, transparent 4px),
   radial-gradient(circle at 14% 18%, var(--c2) 0 7px, transparent 8px),
   radial-gradient(circle at 4% 62%, var(--c2) 0 6px, transparent 7px),
   radial-gradient(circle at 11% 72%, var(--c3) 0 3px, transparent 4px),
   radial-gradient(circle at 22% 64%, var(--c1) 0 4px, transparent 5px),
   radial-gradient(circle at 48% 14%, var(--c2) 0 5px, transparent 6px),
   radial-gradient(circle at 52% 20%, var(--c3) 0 3px, transparent 4px),
   radial-gradient(circle at 44% 70%, var(--c1) 0 7px, transparent 8px),
   radial-gradient(circle at 60% 86%, var(--c2) 0 5px, transparent 6px),
   radial-gradient(circle at 86% 14%, var(--c1) 0 7px, transparent 8px),
   radial-gradient(circle at 91% 20%, var(--c2) 0 4px, transparent 5px),
   radial-gradient(circle at 96% 58%, var(--c3) 0 3px, transparent 4px),
   radial-gradient(circle at 93% 36%, var(--c1) 0 6px, transparent 7px),
   radial-gradient(circle at 84% 78%, var(--c2) 0 5px, transparent 6px),
   radial-gradient(circle at 90% 88%, var(--c3) 0 3px, transparent 4px)}
.hero-grid{display:grid;gap:var(--e7);align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.25fr 1fr;gap:var(--e8)}}
.hero .lbl{margin-bottom:var(--e4)}
.hero h1{max-width:22ch}
.hero-grid h1{max-width:none}
.hero .big{margin-top:var(--e5);max-width:46ch}
.faits{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e5)}
.fait{background:var(--fond-carte);border:1.5px solid var(--filet);border-radius:var(--r-pill);padding:10px 18px;
  display:flex;align-items:baseline;gap:10px}
.fait{line-height:1.3}
.fait .lbl{font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:500;margin:0}
.fait .prix small{font-size:13.5px;font-weight:500;color:var(--texte-doux);letter-spacing:0}
.fait .v,.fait .prix{font-size:15.5px;font-weight:600;white-space:nowrap}
.fait .prix{font-size:17px}

/* visuel : photo en arche sur un grand cercle, l'idée du détouré de la référence */
.hero-visu{position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:4/5}
.hero-visu::before{content:"";position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;
  transform:translate(-50%,-46%);border-radius:50%;background:var(--accent-doux);z-index:-1}
.hero-visu::after{content:"";position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;
  transform:translate(-50%,-46%);border-radius:50%;border:2px solid var(--accent);opacity:.35;z-index:-1}
.hero-visu picture,.hero-visu .ph{position:absolute;inset:0}
.hero-visu img,.hero-visu .ph{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  border-radius:260px 260px var(--r-img) var(--r-img);box-shadow:var(--ombre-forte)}

/* carte d'avis flottante, à cheval sur le bas du hero */
.flottant{position:relative;z-index:2;margin:calc(-1 * var(--e7)) auto 0;max-width:980px;
  background:var(--fond-carte);border-radius:var(--r-pill);box-shadow:var(--ombre-forte);
  padding:18px 28px;display:flex;align-items:center;justify-content:center;gap:var(--e4);flex-wrap:wrap;font-size:16px}
.flottant .quoi{color:var(--texte-tres-doux)}
.flottant .excellent{font-weight:600;font-size:19px}
.flottant .etoiles{color:var(--accent);letter-spacing:.12em;font-size:18px}
.flottant .src{font-weight:600}
.flottant a{color:var(--texte);text-decoration:none;border-bottom:1.5px solid var(--filet)}
.flottant a:hover{border-bottom-color:var(--accent)}

/* --- 8. PLACEHOLDERS ---------------------------------------------------- */
.ph{background:repeating-linear-gradient(45deg,var(--encre-100),var(--encre-100) 8px,var(--sable) 8px,var(--sable) 16px);
  border:1px solid var(--filet);display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-tres-doux);
  border-radius:var(--r-img);padding:12px;min-height:120px}
picture img{border-radius:var(--r-img)}
.cadre{box-shadow:var(--ombre)}
.strip4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:640px){.strip4{grid-template-columns:repeat(4,1fr)}}
.strip4 .ph,.strip4 img{aspect-ratio:1/1;min-height:0;border-radius:var(--r-carte);object-fit:cover}

/* --- 9. ATOUTS (rangée à icônes) ---------------------------------------- */
.atouts{display:grid;gap:var(--e6)}
@media(min-width:720px){.atouts{grid-template-columns:repeat(3,1fr);gap:var(--e7)}}
.atout .ico{width:52px;height:52px;border-radius:var(--r-pill);background:var(--accent-doux);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--e3)}
.atout .ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.atout h3{font-size:21px;margin-bottom:var(--e2)}
.atout p{font-size:16px;color:var(--texte-doux);margin:0}
.atout a{color:var(--accent)}

/* --- 10. RÉPONSE DIRECTE ------------------------------------------------ */
.reponse{background:var(--fond-alt);border-radius:var(--r-carte);padding:var(--e5) var(--e6);max-width:70ch;margin:0 auto}
.reponse.au-centre{margin:0 auto}
.reponse p{margin:0;font-size:17px;color:var(--texte-doux)}

/* --- 11. GRILLES & CARTES ---------------------------------------------- */
.grid{display:grid;gap:var(--e4)}
.g2,.g3{grid-template-columns:1fr}
@media(min-width:640px){.g2,.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}}
/* 2 colonnes : la carte orpheline d'une grille à 3 se centre au lieu de laisser un trou */
@media(min-width:640px) and (max-width:959px){.g3>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--e4)/2)}}
.carte{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);padding:var(--e5) var(--e5)}
.carte h3{margin-bottom:var(--e2)}
.carte p{font-size:15.5px;color:var(--texte-doux);margin:0}
.carte.lien{text-decoration:none;color:inherit;display:block;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.carte.lien:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:transparent}
.carte.lien .plus{color:var(--accent);font-size:14.5px;font-weight:600;margin-top:var(--e3);display:block}

.formule{background:var(--fond-carte);border:1.5px solid var(--filet);border-radius:var(--r-carte);padding:var(--e6) var(--e5);
  position:relative;display:flex;flex-direction:column}
.formule.vedette{border-color:var(--accent);box-shadow:var(--ombre)}
.formule .tag{position:absolute;top:-14px;left:24px;background:var(--accent);color:var(--accent-texte);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:var(--r-pill)}
.formule ul{list-style:none;padding:0;margin:var(--e4) 0 var(--e5);font-size:15px;color:var(--texte-doux);flex:1}
.formule li{padding:6px 0 6px 26px;position:relative}
.formule li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:600}

.lieu{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);overflow:hidden;
  text-decoration:none;color:inherit;display:block;transition:transform var(--t),box-shadow var(--t)}
a.lieu:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.lieu .ph,.lieu img{border-radius:0;height:190px;min-height:0;width:100%;object-fit:cover}
.lieu .txt{padding:var(--e4) var(--e5) var(--e5)}
.lieu h3{font-size:17px}
.lieu .meta{font-size:13px;color:var(--texte-tres-doux);margin-top:var(--e1)}

/* --- 12. DISPONIBILITÉ -------------------------------------------------- */
.dispo{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);padding:var(--e6);box-shadow:var(--ombre);max-width:560px}
.champ{margin-bottom:var(--e4)}
.champ label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.champ input,.champ select{width:100%;padding:13px 18px;min-height:50px;border:1.5px solid var(--encre-300);border-radius:var(--r-pill);
  background:var(--fond-page);color:var(--texte);font-family:var(--police);font-size:16px}
.champ input:focus,.champ select:focus{outline:3px solid var(--accent-doux);border-color:var(--accent)}
.etat{border:1.5px solid var(--filet);border-radius:var(--r-carte);padding:var(--e4) var(--e5);margin-top:var(--e4)}
.etat .t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.etat p{font-size:15px;margin:6px 0 0}
.etat.libre{border-color:var(--libre)} .etat.libre .t{color:var(--libre)}
.etat.tension{border-color:var(--tension)} .etat.tension .t{color:var(--tension)}
.etat.complet{border-color:var(--complet)} .etat.complet .t{color:var(--complet)}
.etat[hidden]{display:none}

/* --- 13. FAQ ------------------------------------------------------------ */
.faq{max-width:780px;display:flex;flex-direction:column;gap:var(--e3)}
.faq details{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);padding:0 var(--e5)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-size:17px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;color:var(--accent);font-size:24px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;margin:0;font-size:16px;color:var(--texte-doux);max-width:66ch}

/* --- 14. TABLEAU -------------------------------------------------------- */
.tw{overflow-x:auto;border:1px solid var(--filet);border-radius:var(--r-carte);background:var(--fond-carte)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th{background:var(--fond-alt);text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-doux);font-weight:600;padding:14px 16px;border-bottom:1px solid var(--filet)}
td{padding:13px 16px;border-bottom:1px solid var(--filet);color:var(--texte-doux);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td b{color:var(--texte)}

/* --- 15. PREUVE / LOGOS / AVIS ----------------------------------------- */
.logos{display:flex;flex-wrap:wrap;gap:var(--e3);justify-content:center}
.logos div{border:1.5px solid var(--filet);border-radius:var(--r-pill);padding:10px 20px;font-size:13px;
  font-weight:600;letter-spacing:.08em;color:var(--texte-tres-doux)}
.avis-note{text-align:center;font-size:16px;color:var(--texte-doux);margin-bottom:var(--e5)}
.avis-note strong{font-size:26px;color:var(--texte)}
figure.avis{margin:0;background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);padding:var(--e5)}
figure.avis .etoiles{color:var(--accent);letter-spacing:.12em;font-size:16px}
figure.avis blockquote{margin:var(--e3) 0 0;font-size:16.5px;color:var(--texte-doux);quotes:"« " " »"}
figure.avis blockquote::before{content:open-quote} figure.avis blockquote::after{content:close-quote}
figure.avis figcaption{margin-top:var(--e4);font-size:13px;color:var(--texte-tres-doux)}
figure.avis cite{font-style:normal;font-weight:600;color:var(--texte)}

/* --- 16. VIDÉO : poster + clic, jamais d'autoplay ---------------------- */
figure.video{margin:0}
figure.video video{width:100%;height:auto;display:block;background:var(--encre);border-radius:var(--r-carte);aspect-ratio:3/4;object-fit:cover}
figure.video figcaption{font-size:14px;color:var(--texte-tres-doux);margin-top:8px}

/* --- 17. COVERFLOW ------------------------------------------------------ */
.coverflow{--cf-card:clamp(160px,24vw,280px);--cf-ratio:3/4;--cf-persp:3;width:100%}
.cf-frame{overflow-x:auto;overflow-y:hidden;outline:none;padding:var(--e5) 0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cf-frame:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cf-track{display:flex;gap:var(--e3);padding:0 var(--e4)}
.cf-card{flex:0 0 var(--cf-card);width:var(--cf-card);margin:0;scroll-snap-align:center;aspect-ratio:var(--cf-ratio);
  overflow:hidden;border-radius:var(--r-carte);background:var(--sable);box-shadow:var(--ombre-forte)}
.cf-card picture,.cf-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.coverflow.cf-on .cf-frame{overflow:hidden;cursor:grab;scroll-snap-type:none;perspective:calc(var(--cf-card) * var(--cf-persp));touch-action:pan-y;padding:var(--e7) 0}
.coverflow.cf-on .cf-frame:active{cursor:grabbing}
.coverflow.cf-on .cf-track{display:block;position:relative;padding:0;height:calc(var(--cf-card) / (var(--cf-ratio)));transform-style:preserve-3d;user-select:none}
.coverflow.cf-on .cf-card{position:absolute;left:50%;top:0;flex:none;will-change:transform,opacity}
.coverflow.cf-on .cf-card img{pointer-events:none}
.cf-zone{position:relative}
.cf-nav{position:absolute;top:50%;z-index:200;transform:translateY(-50%);display:none;align-items:center;justify-content:center;
  width:48px;height:48px;border:1.5px solid var(--filet);border-radius:var(--r-pill);cursor:pointer;font-size:20px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--texte);transition:background var(--t),color var(--t)}
.coverflow.cf-on .cf-nav{display:inline-flex}
.cf-nav:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.cf-prev{left:var(--e3)} .cf-next{right:var(--e3)}
.cf-caption{text-align:center;margin:var(--e4) auto 0;max-width:52ch;font-size:15px;color:var(--texte-doux);min-height:1.6em}
.cf-dots{display:flex;justify-content:center;gap:var(--e2);margin-top:var(--e4);flex-wrap:wrap}
.cf-dot{width:9px;height:9px;padding:0;border:0;border-radius:var(--r-pill);background:var(--texte);opacity:.22;cursor:pointer;transition:opacity var(--t)}
.cf-dot[aria-current="true"]{opacity:1;background:var(--accent)}

/* --- 18. CTA FINAL ------------------------------------------------------ */
.cta-fin{background:var(--fond-sombre);color:#fff;padding:var(--e9) 0;text-align:center}
.cta-fin .wrap{max-width:820px}
.cta-fin h2{color:inherit;font-size:clamp(30px,4.2vw,48px)}
.cta-fin p{color:rgba(255,255,255,.8);font-size:18px;max-width:52ch;margin:var(--e4) auto 0}
.cta-fin .actions{justify-content:center}
.cta-fin .btn{background:#fff;border-color:#fff;color:var(--encre)}
.cta-fin .btn:hover{background:var(--accent-doux);border-color:var(--accent-doux)}
.cta-fin .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta-fin .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* --- 19. PIED DE PAGE --------------------------------------------------- */
footer.site{border-top:1px solid var(--filet);padding:var(--e8) 0 var(--e8);background:var(--fond-alt)}
.foot{display:grid;gap:var(--e6)}
@media(min-width:720px){.foot{grid-template-columns:repeat(4,1fr)}}
.foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-tres-doux);margin-bottom:var(--e3);font-weight:600}
.foot a{display:block;padding:5px 0;font-size:15px;color:var(--texte-doux);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot-nap{border-top:1px solid var(--filet);margin-top:var(--e6);padding-top:var(--e5)}
.foot-nap p{margin:0 0 4px}
.nap-nom{font-weight:600;font-size:15px;color:var(--texte)}
.nap-ligne{font-size:14px;color:var(--texte-doux)}
.nap-ligne a{color:var(--texte-doux);text-decoration:none;border-bottom:1px solid var(--filet)}
.nap-ligne a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-bas{border-top:1px solid var(--filet);margin-top:var(--e6);padding-top:var(--e4);font-size:12.5px;color:var(--texte-tres-doux);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--e3)}

/* --- 20. BARRE D'ACTION MOBILE ----------------------------------------- */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;gap:var(--e2);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--filet);transition:transform var(--t)}
.barre.cachee{transform:translateY(110%)}
.barre .btn{flex:1}
.barre .btn:first-child{flex:1.5}
@media(min-width:1024px){.barre{display:none}}
@media(max-width:1023px){body{padding-bottom:80px}}

/* --- 21. MOUVEMENT ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms !important;animation-duration:0ms !important}
  html{scroll-behavior:auto}
  .revele{opacity:1 !important;transform:none !important}
  .coverflow.cf-on .cf-card{will-change:auto}
}
@media (prefers-reduced-motion:no-preference){
  .revele{opacity:0;transform:translateY(12px);transition:opacity 300ms ease-out,transform 300ms ease-out}
  .revele.vu{opacity:1;transform:none}
}

/* ==========================================================================
   MOTION — « Éditorial argentique »
   Rien ici ne modifie une règle existante : uniquement des calques, des
   états et des keyframes. transform / opacity / clip-path, et c'est tout.
   ========================================================================== */
.m-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:400}

/* --- développement : le voile se rétracte comme un tirage sort du bain ---- */
[data-dev]{position:relative}
[data-dev]::after{content:"";position:absolute;inset:-2px;background:var(--fond-page);pointer-events:none;
  transition:clip-path 900ms cubic-bezier(.2,.8,.2,1),opacity 900ms ease;clip-path:inset(0 0 0 0)}
.m-anime [data-dev]:not(.m-dev-ok)>*{opacity:.001}
.m-anime [data-dev].m-dev-ok::after{clip-path:inset(0 0 100% 0);opacity:0}
.m-anime [data-dev].m-dev-ok>*{opacity:1;transition:opacity 500ms ease 150ms}
.m-reduit [data-dev]::after{display:none}
section.alt [data-dev]::after{background:var(--fond-alt)}

/* --- intro ---------------------------------------------------------------- */
.intro{position:fixed;inset:0;z-index:390;pointer-events:none;background:var(--fond-page);display:grid;place-items:center}
.intro-passer{position:absolute;right:20px;bottom:20px;pointer-events:auto;background:rgba(255,255,255,.92);color:var(--texte);
  border:1.5px solid var(--filet);border-radius:var(--r-pill);padding:10px 18px;font:500 14px var(--police);cursor:pointer}
.intro-viseur{position:relative;grid-area:1/1;width:min(38vw,300px);aspect-ratio:1;opacity:.7}
.intro-viseur i{position:absolute;width:26px;height:26px;border:2px solid var(--accent)}
.intro-viseur i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.intro-viseur i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.intro-viseur i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.intro-viseur i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.intro-compte{grid-area:1/1;display:grid;place-items:center;width:min(38vw,300px);aspect-ratio:1;font:700 clamp(72px,14vw,160px)/1 var(--police);color:var(--accent);opacity:0;font-variant-numeric:tabular-nums;text-box:trim-both cap alphabetic}
.intro-lame{position:absolute;left:0;right:0;height:50%;background:var(--encre);transform:scaleY(0);transform-origin:top}
.intro-lame.bas{top:50%;transform-origin:bottom}.intro-lame.haut{top:0}
.intro.obturateur .intro-lame{animation:obturateur 260ms cubic-bezier(.6,0,.2,1) both}
@keyframes obturateur{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* le titre : peint dès le départ, mais voilé tant que l'intro n'a pas capturé */
.hero.intro-en-cours h1,.hero.intro-en-cours .big,.hero.intro-en-cours .faits,.hero.intro-en-cours .actions{opacity:.001}
.hero.intro-faite h1{animation:developper 900ms cubic-bezier(.2,.8,.2,1) both}
.hero.intro-faite .big{animation:apparaitre 600ms ease 250ms both}
.hero.intro-faite .faits{animation:apparaitre 600ms ease 400ms both}
.hero.intro-faite .actions{animation:apparaitre 600ms ease 520ms both}
@keyframes developper{0%{clip-path:inset(100% 0 0 0);opacity:.4}100%{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes apparaitre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-reduit .hero h1,.m-reduit .hero .big,.m-reduit .hero .faits,.m-reduit .hero .actions{animation:none !important;opacity:1 !important}

/* confettis du hero suivent la souris (variables posées par le script) */
.hero::after{transform:translate(var(--conf-x,0),var(--conf-y,0));transition:transform 400ms ease-out}
.hero-visu{transition:transform 400ms ease-out;will-change:transform}

/* --- bandelette du hero : sort du bord inférieur droit ------------------- */
.bande-hero{position:absolute;right:max(20px,4vw);bottom:-8px;width:120px;padding:8px 8px 22px;background:#fff;
  box-shadow:var(--ombre-forte);border-radius:6px;transform:translateY(110%) rotate(4deg);z-index:3;pointer-events:none}
.bande-hero.posee{transform:translateY(0) rotate(4deg);transition:transform 1100ms cubic-bezier(.2,.8,.2,1)}
.m-reduit .bande-hero{transform:translateY(0) rotate(4deg);transition:none}
.bande-hero img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;margin-bottom:6px;filter:saturate(.9) contrast(1.05)}
.bande-hero small{display:block;text-align:center;font:400 9px/1.2 var(--police);letter-spacing:.14em;color:var(--texte-tres-doux)}
@media(max-width:899px){.bande-hero{display:none}}

/* --- curseur viseur ------------------------------------------------------- */
.m-cur-on,.m-cur-on a,.m-cur-on button,.m-cur-on summary{cursor:none}
.m-cur{position:fixed;left:0;top:0;z-index:500;pointer-events:none;width:0;height:0;will-change:transform}
.m-cur-anneau{position:absolute;left:0;top:0;width:var(--cur,28px);height:var(--cur,28px);transform:translate(-50%,-50%);
  border:1.5px solid var(--accent);border-radius:50%;transition:width 160ms cubic-bezier(.2,.6,.3,1),height 160ms cubic-bezier(.2,.6,.3,1),opacity 160ms,border-color 160ms;
  background:rgba(255,255,255,.06)}
.m-cur-anneau::before,.m-cur-anneau::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);opacity:.7}
.m-cur-anneau::before{width:6px;height:1.5px;transform:translate(-50%,-50%)}.m-cur-anneau::after{width:1.5px;height:6px;transform:translate(-50%,-50%)}
.m-cur.actif{--cur:56px}
.m-cur.actif .m-cur-anneau{background:rgba(107,92,83,.12)}
.m-cur-txt{position:absolute;left:0;top:34px;transform:translateX(-50%);font:600 10px/1 var(--police);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;opacity:0;transition:opacity 200ms}
.m-cur.actif .m-cur-txt:not(:empty){opacity:1}
.m-cur.clic .m-cur-anneau{animation:clignement 120ms ease both}
@keyframes clignement{50%{transform:translate(-50%,-50%) scaleY(.08)}}

/* --- visionneuse ---------------------------------------------------------- */
.m-vue{position:fixed;inset:0;z-index:450;background:rgba(26,21,18,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.m-vue figure{margin:0;max-width:min(92vw,1100px);max-height:88vh;display:flex;flex-direction:column;gap:12px;align-items:center}
.m-vue img{max-width:100%;max-height:78vh;border-radius:var(--r-carte);box-shadow:var(--ombre-forte);background:#fff;padding:8px}
.m-vue figcaption{color:#fff;font:400 15px var(--police);opacity:.85;text-align:center}
.m-vue-fermer{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  background:transparent;color:#fff;font-size:20px;cursor:pointer}
body.m-vue-ouverte{overflow:hidden}

/* --- polaroids ------------------------------------------------------------ */
.polaroids{position:relative;min-height:420px;overflow:hidden;border-radius:var(--r-carte);
  background:linear-gradient(180deg,var(--sable) 0%,#EBE3DC 100%)}
.polaroids::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,rgba(107,92,83,.12))}
.pol{position:absolute;left:0;top:0;width:clamp(120px,16vw,190px);margin:0;padding:8px 8px 34px;background:#fff;border-radius:3px;
  box-shadow:0 14px 30px -14px rgba(26,21,18,.45),0 1px 2px rgba(26,21,18,.08);cursor:grab;touch-action:none;will-change:transform;
  transform:translate(var(--x,0),calc(var(--y,-120%) + var(--lift,0px))) rotate(var(--r,0deg));clip-path:inset(0 0 var(--coupe,0%) 0)}
.pol.posee{transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
.pol.haut{--lift:-24px}
.pol:active{cursor:grabbing}.pol img{width:100%;aspect-ratio:1;object-fit:cover;display:block;filter:saturate(.92) contrast(1.04)}
.pol figcaption{position:absolute;left:8px;right:8px;bottom:9px;font:400 11px/1.3 var(--police-fleur);font-style:italic;color:var(--texte-doux);
  text-align:center;opacity:0;transition:opacity 250ms}
.pol.haut{z-index:20;box-shadow:0 30px 60px -22px rgba(26,21,18,.5)}.pol.haut figcaption{opacity:1}
.m-reduit .polaroids{height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;padding:24px;overflow:visible}
.m-reduit .pol{position:static;transform:rotate(var(--r,0deg));width:auto}.m-reduit .pol figcaption{opacity:1}

/* --- galerie « freeze » ---------------------------------------------------- */
.freeze{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);align-items:start}
@media(max-width:719px){.freeze{grid-template-columns:repeat(2,1fr)}.freeze .fz-col:nth-child(3){display:none}}
.fz-col{will-change:transform}
.fz{position:relative;margin:0 0 var(--e4);border-radius:var(--r-carte);overflow:hidden;background:var(--sable);cursor:pointer;
  box-shadow:var(--ombre);transition:transform 300ms cubic-bezier(.2,.8,.2,1)}
.fz img{width:100%;display:block;border-radius:0;transition:opacity 350ms ease}
.fz .fz-2{position:absolute;inset:0;object-fit:cover;height:100%;opacity:0}
.m-pointeur .fz:hover .fz-2,.fz:focus-visible .fz-2{opacity:1}
.fz.gel{transform:scale(1.015)}
.fz .fz-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font:500 13px var(--police);color:#fff;
  background:linear-gradient(transparent,rgba(26,21,18,.65));opacity:0;transition:opacity 250ms}
.fz:hover .fz-cap,.fz:focus-visible .fz-cap{opacity:1}

/* --- avant / après --------------------------------------------------------- */
.aa{position:relative;border-radius:var(--r-carte);overflow:hidden;aspect-ratio:16/10;background:var(--sable);box-shadow:var(--ombre-forte);--p:50%}
.aa picture,.aa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.aa .aa-apres{clip-path:inset(0 0 0 var(--p))}
.aa .aa-lumiere{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,rgba(255,220,180,.35),transparent 60%);
  clip-path:inset(0 0 0 var(--p));pointer-events:none}
.aa .aa-conf{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p));pointer-events:none;opacity:.85;
  background:radial-gradient(circle at 78% 22%,var(--c1) 0 5px,transparent 6px),radial-gradient(circle at 88% 48%,var(--c2) 0 4px,transparent 5px),
  radial-gradient(circle at 66% 70%,var(--c1) 0 6px,transparent 7px),radial-gradient(circle at 92% 82%,var(--c3) 0 3px,transparent 4px)}
.aa .aa-tirage{position:absolute;bottom:6%;width:11%;aspect-ratio:3/4;background:#fff;padding:3%;border-radius:2px;box-shadow:var(--ombre);
  transform:translateY(140%) rotate(-6deg);transition:transform 700ms cubic-bezier(.2,.8,.2,1)}
.aa .aa-tirage img{position:static;height:auto;aspect-ratio:1;object-fit:cover}
.aa .aa-tirage.t1{left:62%}.aa .aa-tirage.t2{left:76%;transition-delay:120ms}
.aa.revele .aa-tirage{transform:translateY(0) rotate(-6deg)}
.aa .aa-barre{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(26,21,18,.15)}
.aa .aa-poignee{position:absolute;top:50%;left:var(--p);width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:var(--ombre);display:flex;align-items:center;justify-content:center;font:600 14px var(--police);color:var(--accent);pointer-events:none}
.aa input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.aa .aa-lbl{position:absolute;top:14px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.9);font:600 11px var(--police);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.aa .aa-lbl.g{left:14px}.aa .aa-lbl.d{right:14px}

/* --- configurateur -------------------------------------------------------- */
.conf{display:grid;gap:var(--e6)}@media(min-width:960px){.conf{grid-template-columns:1fr 1.15fr;align-items:start}}
.conf fieldset{border:0;padding:0;margin:0 0 var(--e5)}.conf legend{font:600 13px var(--police);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.conf .opts{display:flex;flex-wrap:wrap;gap:8px}
.conf .opt{position:relative}.conf .opt input{position:absolute;inset:0;opacity:0;cursor:pointer}
.conf .opt span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--filet);border-radius:var(--r-pill);font:500 14px var(--police);background:#fff;transition:border-color var(--t),background var(--t)}
.conf .opt input:checked+span{border-color:var(--accent);background:var(--accent-doux)}
.conf .opt input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.conf .opt.decor img{width:34px;height:34px;object-fit:cover;border-radius:6px}
.conf .opt.couleur i{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.conf input[type=text]{width:100%;padding:12px 16px;border:1.5px solid var(--encre-300);border-radius:var(--r-pill);font:400 16px var(--police);margin-top:6px}
.conf-apercu{position:relative;background:var(--sable);border-radius:var(--r-carte);padding:var(--e6);display:flex;flex-direction:column;align-items:center;gap:var(--e4);overflow:hidden}
.tirage{--teinte:var(--accent);width:min(100%,300px);background:#fff;padding:12px 12px 44px;border-radius:3px;box-shadow:var(--ombre-forte);position:relative;transition:transform 400ms}
.tirage.bande{padding:10px 10px 28px;width:min(100%,160px)}
.tirage .t-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sable)}
.tirage.bande .t-img{aspect-ratio:3/4}
.tirage .t-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 350ms}
.tirage .t-cadre{position:absolute;inset:0;border:0 solid var(--teinte);pointer-events:none;transition:border-width 300ms}
.tirage.carre .t-cadre{border-width:10px}
.tirage .t-txt{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;font:italic 400 18px var(--police-fleur);color:var(--teinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tirage .t-date{position:absolute;right:14px;top:14px;font:600 10px var(--police);letter-spacing:.12em;color:#fff;background:rgba(26,21,18,.55);padding:3px 7px;border-radius:3px}
.conf-fente{width:min(100%,340px);height:14px;border-radius:7px;background:linear-gradient(180deg,#2E2724,#1A1512);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.conf-apercu.impression .tirage{animation:imprimer 1400ms cubic-bezier(.2,.8,.2,1) both}
@keyframes imprimer{0%{transform:translateY(-105%);clip-path:inset(0 0 100% 0)}100%{transform:none;clip-path:inset(0)}}
.conf-compte{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 120px/1 var(--police);color:var(--accent);opacity:0;pointer-events:none}
.conf-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.m-reduit .conf-apercu.impression .tirage{animation:none}

/* --- bandelette latérale au scroll ---------------------------------------- */
.bandelette{position:fixed;right:24px;top:110px;width:96px;z-index:90;background:#fff;padding:8px 8px 14px;border-radius:6px;box-shadow:var(--ombre-forte);
  transform:rotate(3deg);transition:transform 700ms cubic-bezier(.2,.8,.2,1),opacity 400ms;pointer-events:none}
.bandelette .b-logo{font:italic 400 14px var(--police-fleur);text-align:center;color:var(--texte);margin-bottom:6px}
.bandelette .b-pose{height:0;overflow:hidden;transition:height 700ms cubic-bezier(.2,.8,.2,1);position:relative}
.bandelette .b-pose img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;display:block;margin-bottom:6px;filter:saturate(.9) contrast(1.05)}
.bandelette .b-pose::after{content:"";position:absolute;inset:0 0 6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E");mix-blend-mode:multiply;pointer-events:none}
.bandelette .b-pose.imprimee{height:calc(80px + 6px)}
.bandelette .b-date{font:400 9px var(--police);letter-spacing:.16em;color:var(--texte-tres-doux);text-align:center}
.bandelette.detachee{pointer-events:auto;transform:rotate(-6deg) translateY(-10px)}
.bandelette.detachee .b-cta{display:block}
.bandelette .b-cta{display:none;margin-top:8px;font:600 11px var(--police);text-align:center;text-decoration:none;color:#fff;background:var(--accent);border-radius:var(--r-pill);padding:8px 6px;letter-spacing:.06em}
.bandelette.cachee{opacity:0;transform:translateY(20px) rotate(3deg)}
@media(max-width:1199px){.bandelette{display:none}}

/* --- témoignages en instantanés ------------------------------------------- */
.instants{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e5)}
.instants>.instant{flex:1 1 280px;max-width:360px}
.instant{perspective:1200px;min-height:340px;container-type:inline-size}
.instant button{all:unset;display:block;width:100%;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform 700ms cubic-bezier(.2,.8,.2,1)}
.instant button:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
.instant.retourne button,.m-pointeur .instant:hover button{transform:rotateY(180deg)}
.instant .face{background:#fff;padding:12px 12px 40px;border-radius:3px;box-shadow:var(--ombre-forte);backface-visibility:hidden}
.instant .face .cadre{display:block;aspect-ratio:2/3;overflow:hidden}
.instant .face img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.04)}
.instant .face .etoiles{position:absolute;left:12px;bottom:12px;color:var(--accent);letter-spacing:.1em;font-size:15px}
.instant .verso{position:absolute;inset:0;transform:rotateY(180deg);padding:22px 20px;display:flex;flex-direction:column;gap:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23E4DCD6'/%3E%3C/svg%3E")}
.instant .verso .txt{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:.6em;scrollbar-width:thin}
.instant .verso p{font:italic 400 19px/1.4 var(--police-fleur);color:var(--texte);margin:0}
.instant .verso.long{padding:18px 18px 16px;gap:8px}
.instant .verso.long .txt{gap:.45em}
.instant .verso.long p{font-size:clamp(12px,4.2cqi,17px);line-height:1.36}
.instant .verso cite{font:500 13px var(--police);font-style:normal;color:var(--texte-doux)}
.instant .verso cite span{display:block;font-weight:400;margin-top:2px}
.m-reduit .instant button{transition:none}

/* --- mur de souvenirs : polaroids posés en fond, appel à réserver au centre --- */
.mur-sec{background:var(--fond-sombre);color:#fff;text-align:center;position:relative;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;min-height:clamp(560px,78vh,760px);padding:var(--e9) 0}
.mur-sec::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 46% 58% at 50% 50%,rgba(26,21,18,.97) 0%,rgba(26,21,18,.82) 55%,rgba(26,21,18,0) 100%)}
.mur-sec .wrap{position:relative;z-index:2}
.mur-polas{position:absolute;inset:0;z-index:0}
.pola{--pw:clamp(104px,15vw,220px);position:absolute;left:var(--x);top:var(--y);rotate:var(--r,0deg);width:var(--pw);margin:0;
  background:#FBF8F4;padding:calc(var(--pw)*.06) calc(var(--pw)*.06) calc(var(--pw)*.22);
  box-shadow:0 2px 6px rgba(0,0,0,.35),0 24px 48px -20px rgba(0,0,0,.9);opacity:.94}
.pola picture,.pola img{display:block;width:100%}
.pola img{aspect-ratio:4/5;object-fit:cover;background:#2a2320;border-radius:0}
/* cinq à gauche, cinq à droite, deux qui dépassent en haut et en bas */
.p1{--x:2%;--y:6%;--r:-7deg}    .p2{--x:15%;--y:16%;--r:5deg}   .p3{--x:4%;--y:44%;--r:3deg}
.p4{--x:14%;--y:64%;--r:-5deg}  .p5{--x:1%;--y:80%;--r:6deg}
.p6{--x:84%;--y:8%;--r:6deg}    .p7{--x:71%;--y:20%;--r:-4deg}  .p8{--x:83%;--y:46%;--r:-6deg}
.p9{--x:72%;--y:66%;--r:4deg}   .p10{--x:86%;--y:80%;--r:-7deg}
.p11{--x:41%;--y:-16%;--r:-3deg} .p12{--x:52%;--y:86%;--r:4deg}
@media(max-width:719px){
  .mur-sec{min-height:600px}
  .pola{--pw:100px}
  .p4,.p5,.p9,.p10,.p11,.p12{display:none}
  .p1{--x:-5%;--y:-6%;--r:-8deg}  .p2{--x:60%;--y:-8%;--r:6deg}   .p7{--x:27%;--y:-14%;--r:2deg}
  .p3{--x:-6%;--y:78%;--r:5deg}   .p6{--x:68%;--y:76%;--r:-6deg}  .p8{--x:30%;--y:88%;--r:-3deg}
}
.mur-cta{width:min(92vw,640px);margin:0 auto}
.mur-sec .mur-cta h2{color:#fff;font-size:clamp(28px,4vw,46px)}
.mur-logo{height:34px;width:auto;margin:0 auto var(--e5);display:block;opacity:.9}
.mur-sec .mur-cta p{color:rgba(255,255,255,.8);margin:var(--e4) auto 0;max-width:46ch}
.mur-sec .mur-cta .actions{justify-content:center}
.mur-sec .btn{background:#fff;border-color:#fff;color:var(--encre)}

/* intro : le bouton « Passer » ne doit jamais chevaucher la barre d'action mobile */
@media(max-width:1023px){.intro-passer{bottom:96px}}

/* --- l'imprimante des polaroids : corps sombre, fente, diode ------------- */
.pol-imprimante{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:25;width:min(60%,280px);pointer-events:none}
.pol-imprimante .corps{height:44px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#3A302A,#1A1512);box-shadow:var(--ombre-forte);
  display:flex;align-items:center;justify-content:center;gap:10px;color:#EFE8E3;font:italic 400 14px var(--police-fleur);letter-spacing:.06em}
.pol-imprimante .corps i{width:7px;height:7px;border-radius:50%;background:#6E625B;transition:background 300ms}
.pol-imprimante.active .corps i{background:#7BC49B;box-shadow:0 0 8px #7BC49B;animation:diode 1.1s ease-in-out infinite}
@keyframes diode{50%{opacity:.35}}
.pol-imprimante .fente{height:9px;margin:0 8%;border-radius:0 0 6px 6px;background:#0F0C0A;box-shadow:inset 0 3px 5px rgba(0,0,0,.7)}
.pol.sortie{z-index:5}
.m-reduit .pol-imprimante{display:none}

/* --- 21. DEVIS ---------------------------------------------------------- */
.devis-grid{display:grid;gap:var(--e6);align-items:start}
@media(min-width:960px){.devis-grid{grid-template-columns:minmax(0,1fr) 360px}}
.devis-form{min-width:0}
.bloc{border:1px solid var(--filet);border-radius:var(--r-carte);background:var(--fond-carte);padding:var(--e5) var(--e5) var(--e4);margin:0 0 var(--e5);min-width:0}
.bloc legend{font-weight:600;font-size:17px;padding:0 8px;margin-left:-8px}
.bloc legend .opt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-tres-doux);font-weight:600;margin-left:8px;vertical-align:middle}
.choix-grille{display:grid;gap:var(--e3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.choix{position:relative;display:flex;cursor:pointer}
.choix>span{flex:1}
.choix input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choix span{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--encre-100);border-radius:var(--r-carte);padding:14px 16px;min-height:88px;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.choix b{font-weight:600;font-size:16px}
.choix small{font-size:13.5px;color:var(--texte-tres-doux)}
.choix em{font-style:normal;font-weight:600;margin-top:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.choix:hover span{border-color:var(--encre-300)}
.choix input:checked+span{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent) inset;background:var(--accent-doux)}
.choix input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.choix.compris span{opacity:.55}
.choix.compris em::after{content:" · compris";font-weight:500;color:var(--libre)}
.curseur{display:flex;align-items:center;gap:var(--e4)}
.curseur input[type=range]{flex:1;accent-color:var(--accent);height:36px;cursor:pointer}
.curseur output{min-width:92px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.deux-col{display:grid;gap:0 var(--e4)}
@media(min-width:640px){.deux-col{grid-template-columns:1fr 1fr}}
.champ textarea{width:100%;padding:13px 18px;border:1.5px solid var(--encre-300);border-radius:var(--r-carte);background:var(--fond-page);color:var(--texte);font-family:var(--police);font-size:16px;resize:vertical}
.champ textarea:focus{outline:3px solid var(--accent-doux);border-color:var(--accent)}
.champ .req{color:var(--complet)}
.label-libre{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.pills{display:flex;gap:var(--e2);flex-wrap:wrap}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;border:1.5px solid var(--encre-300);border-radius:var(--r-pill);font-weight:500;transition:background var(--t),color var(--t),border-color var(--t)}
.pill input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-texte)}
.pill input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.heures{display:flex;align-items:center;gap:var(--e2)}
.heures input{flex:1;min-width:0;padding:13px 14px;min-height:50px;border:1.5px solid var(--encre-300);border-radius:var(--r-pill);background:var(--fond-page);color:var(--texte);font-family:var(--police);font-size:16px}
.heures input:focus{outline:3px solid var(--accent-doux);border-color:var(--accent)}
.miel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.invalide input,.invalide select,.invalide textarea,.pills.invalide span{border-color:var(--complet)}
.erreur{color:var(--complet);font-weight:500;margin:0 0 var(--e3)}
.erreur[hidden]{display:none}
.resume{background:var(--fond-carte);border:1.5px solid var(--filet);border-radius:var(--r-carte);padding:var(--e5);box-shadow:var(--ombre);position:sticky;top:96px}
.resume-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--e3)}
.recap{margin:0;display:flex;flex-direction:column}
.recap>div{display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;padding:10px 0;border-bottom:1px solid var(--filet);font-size:15px}
.recap>div[hidden]{display:none}
.recap dt{color:var(--texte-tres-doux);font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;align-self:center}
.recap dd{margin:0;color:var(--texte-doux)}
.recap dd.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--texte)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--e4);font-size:15px;color:var(--texte-doux)}
.total strong{font-size:26px;letter-spacing:-.02em;color:var(--texte);font-variant-numeric:tabular-nums;white-space:nowrap}
.resume-contact{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--filet);font-size:14.5px;color:var(--texte-tres-doux)}
.merci{grid-column:1/-1;background:var(--fond-carte);border:1.5px solid var(--libre);border-radius:var(--r-carte);padding:var(--e6)}
.merci[hidden]{display:none}

.cta-devis{display:grid;gap:var(--e5);align-items:center;background:var(--fond-alt);border-radius:var(--r-carte);padding:var(--e6)}
@media(min-width:900px){.cta-devis{grid-template-columns:1fr auto}}
.cta-devis h2{margin:var(--e2) 0 var(--e3)}
.cta-devis p{margin:0;color:var(--texte-doux);max-width:60ch}

.devis-form{counter-reset:etape}
.bloc legend::before{counter-increment:etape;content:counter(etape) " · "}
.bloc[hidden]{display:none}
.produits .choix span{min-height:104px}
.choix.combo em::after{content:" · prix combo";font-weight:500;color:var(--libre)}

.choix em s,.recap s{color:var(--texte-tres-doux);font-weight:400;text-decoration:line-through;margin-right:6px}
.choix em i{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--libre);margin-top:2px}
.economie{color:var(--libre);font-weight:500}
.economie[hidden]{display:none}

/* nuancier du fond pailleté */
.nuancier{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--filet)}
.nuancier[hidden]{display:none}
.teintes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--e3)}
.teinte{position:relative;cursor:pointer;text-align:center}
.teinte input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.teinte small{display:block;font-size:12.5px;color:var(--texte-doux);margin-top:6px}
.pastille{display:block;aspect-ratio:1;border-radius:14px;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--encre-100),var(--ombre);overflow:hidden;
  background:
    radial-gradient(circle at 40% 40%,rgba(255,255,255,.55) 0 30%,transparent 34%) 0 0/6px 6px,
    radial-gradient(circle at 60% 60%,rgba(0,0,0,.22) 0 30%,transparent 34%) 3px 3px/6px 6px,
    linear-gradient(90deg,rgba(255,255,255,.12) 50%,transparent 50%) 0 0/6px 6px,
    linear-gradient(135deg,var(--a),var(--b));
  transition:transform var(--t),box-shadow var(--t)}
.pastille.fleuri{background:none}
.pastille picture,.pastille img{display:block;width:100%;height:100%}
.pastille img{object-fit:cover;object-position:50% 50%;border-radius:0}
.teinte.apercu{cursor:default}
.teinte.apercu:hover .pastille{transform:none}
.teinte:hover .pastille{transform:translateY(-2px)}
.teinte input:checked+.pastille{box-shadow:0 0 0 3px var(--accent),var(--ombre)}
.teinte input:checked~small{color:var(--texte);font-weight:600}
.teinte input:focus-visible+.pastille{outline:3px solid var(--accent);outline-offset:3px}
.nuancier.invalide .pastille{box-shadow:0 0 0 1.5px var(--complet),var(--ombre)}

/* --- 22. RAIL PRODUITS : cartes portrait, défilement horizontal ------------ */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e5);margin-bottom:var(--e6)}
.rail-nav{display:none;gap:var(--e2)}
@media(min-width:720px){.rail-nav{display:flex}}
.rail-btn{width:46px;height:46px;border-radius:var(--r-pill);border:1.5px solid var(--filet);background:var(--fond-carte);color:var(--texte);
  font-size:18px;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
.rail-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-texte)}
.rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:var(--e3);outline:none}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible .rail-piste{outline:3px solid var(--accent);outline-offset:6px;border-radius:var(--r-img)}
/* la piste commence au bord du contenu (.wrap) et laisse dépasser la carte suivante */
.rail-piste{display:flex;gap:var(--e4);width:max-content;padding:0 20px;
  scroll-padding-left:20px}
@media(min-width:720px){.rail-piste{padding:0 32px}}
@media(min-width:1024px){.rail-piste{padding:0 max(56px,calc((100vw - 1280px)/2 + 56px))}}
.rail{scroll-padding-left:20px}
@media(min-width:720px){.rail{scroll-padding-left:32px}}
@media(min-width:1024px){.rail{scroll-padding-left:max(56px,calc((100vw - 1280px)/2 + 56px))}}
.prod{position:relative;flex:0 0 min(76vw,300px);aspect-ratio:5/7;border-radius:var(--r-img);overflow:hidden;scroll-snap-align:start;
  color:#fff;text-decoration:none;background:var(--encre-700);isolation:isolate;box-shadow:var(--ombre);
  transition:transform 400ms cubic-bezier(.2,.6,.3,1),box-shadow 400ms}
@media(min-width:1024px){.prod{flex-basis:320px}}
.prod picture,.prod img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:0;display:block}
.prod img{transition:transform 900ms cubic-bezier(.2,.6,.3,1)}
/* dégradé de lisibilité sur ::before (::after est pris par l'animation d'apparition data-dev) */
.prod::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,21,18,.18) 0%,rgba(26,21,18,0) 22%,rgba(26,21,18,0) 42%,rgba(26,21,18,.55) 66%,rgba(26,21,18,.86) 100%)}
.prod:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte)}
.prod:hover img{transform:scale(1.06)}
.prod-num{position:absolute;z-index:2;top:18px;left:20px;font-size:12px;letter-spacing:.2em;font-weight:600;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.prod-plus{position:absolute;z-index:2;top:14px;right:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;font-weight:400;line-height:1;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);transition:background var(--t),transform 400ms cubic-bezier(.2,.6,.3,1)}
.prod:hover .prod-plus{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
.prod-txt{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;height:122px;display:flex;flex-direction:column;justify-content:flex-start}  /* zone de texte de hauteur fixe : les titres commencent tous à la même hauteur */
.prod h3{color:#fff;font-size:21px;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.prod p{margin:6px 0 0;font-size:14px;line-height:1.4;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.45);max-width:30ch;
  opacity:0;transform:translateY(8px);transition:opacity 300ms,transform 400ms cubic-bezier(.2,.6,.3,1)}
.prod:hover p,.prod:focus-visible p{opacity:1;transform:none}
@media(hover:none){.prod p{opacity:1;transform:none}}
.prod:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.prod,.prod img,.prod-plus,.prod p{transition:none}.prod:hover{transform:none}.prod:hover img{transform:none}}

/* --- 23. DUO texte + visuel (sections de lecture) ------------------------- */
.duo{display:grid;gap:var(--e6);align-items:start}
@media(min-width:960px){.duo{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:var(--e8)}}
.duo .lecture{max-width:66ch}
.duo-visu{position:relative;margin:0;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/5;background:var(--encre-100);box-shadow:var(--ombre)}
@media(min-width:960px){.duo-visu{position:sticky;top:110px}}
.duo-visu picture,.duo-visu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;border-radius:0}
.duo-visu figcaption{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-radius:var(--r-carte);padding:12px 16px;font-size:14px;line-height:1.4;color:var(--texte-doux)}
.duo-visu figcaption::before{content:"Ce que nous louons";display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:2px}

/* --- 24. COHÉRENCE DE MISE EN PAGE ---------------------------------------- */
/* titres des pages intérieures : deux lignes maximum dans la colonne du hero */
.hero-grid h1:not(.h-mega):not(.hero-h1){font-size:clamp(34px,4.2vw,52px)}
.hero h1.hero-h1{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;max-width:none;margin:0 0 var(--e4)}
.hero .h-mega{font-weight:700}
/* sections « texte seul » : colonne de lecture centrée, titre et boutons centrés */
section.texte .sec-head{text-align:center;margin-left:auto;margin-right:auto}
section.texte .lecture{margin-left:auto;margin-right:auto}
section.texte .actions{justify-content:center}
/* paragraphe qui suit une grille ou un tableau : encart pleine largeur, pas une colonne orpheline */
.grid + .lecture,.tw + .lecture{max-width:none;margin-top:var(--e6);background:var(--fond-carte);border:1px solid var(--filet);
  border-radius:var(--r-carte);padding:var(--e5) var(--e6)}
.grid + .lecture p,.tw + .lecture p{max-width:none}
@media(min-width:960px){.grid + .lecture,.tw + .lecture{column-count:2;column-gap:var(--e8);column-fill:balance}
  .grid + .lecture p,.tw + .lecture p{orphans:3;widows:3}}
.grid + .lecture p:last-child,.tw + .lecture p:last-child{margin-bottom:0}
/* un seul paragraphe : pas de colonnes, texte centré sur toute la largeur de la boîte */
.grid + .lecture:has(> p:only-child),.tw + .lecture:has(> p:only-child){column-count:1;text-align:center}
/* sections centrées : FAQ et grilles suivent le titre */
.centre .faq{margin-left:auto;margin-right:auto}
.centre .actions{justify-content:center}
/* rail produits : titre centré, flèches à droite sur la même ligne */
.rail-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.rail-head .sec-head{grid-column:2;text-align:center}
.rail-head .rail-nav{grid-column:3;justify-self:end}
@media(max-width:719px){.rail-head{grid-template-columns:1fr}.rail-head .sec-head{grid-column:1}}

/* heros sans visuel (tarifs, galerie, avis, devis) : composition centrée, pas de colonne orpheline */
.hero:not(:has(.hero-grid)) .wrap{text-align:center}
.hero:not(:has(.hero-grid)) h1{margin-left:auto;margin-right:auto;max-width:22ch}
.hero:not(:has(.hero-grid)) .big,.hero:not(:has(.hero-grid)) .lecture{margin-left:auto;margin-right:auto}
.hero:not(:has(.hero-grid)) .actions,.hero:not(:has(.hero-grid)) .faits{justify-content:center}

/* ==========================================================================
   25. MOTION NATIVE — Opus pass
   Règles : compositeur uniquement (opacity, translate, scale, clip-path),
   timelines CSS de défilement (aucun JS, aucun écouteur de scroll),
   amélioration progressive (@supports), mouvement réduit respecté,
   jamais d'état initial masqué sur l'image LCP.
   ========================================================================== */

/* --- 25.1 Transitions entre pages (Chrome 126+, Safari 18.2+) ------------- */
@view-transition{navigation:auto}
header.site{view-transition-name:entete}
.barre{view-transition-name:barre}
::view-transition-old(root){animation:vt-sortie 200ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entree 420ms cubic-bezier(.16,1,.3,1) both}
@keyframes vt-sortie{to{opacity:0;translate:0 -10px}}
@keyframes vt-entree{from{opacity:0;translate:0 16px}}

/* --- 25.2 Micro-interactions (sans timeline, partout) -------------------- */
.btn:not(.ghost){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);
  translate:-130% 0;transition:translate 750ms cubic-bezier(.16,1,.3,1)}
.btn:not(.ghost):hover::after,.btn:not(.ghost):focus-visible::after{translate:130% 0}
.btn:active{scale:.97}
.btn{transition:background var(--t),border-color var(--t),color var(--t),transform var(--t),scale 120ms}
.carte.lien .plus{transition:translate 300ms cubic-bezier(.16,1,.3,1)}
.carte.lien:hover .plus,.carte.lien:focus-visible .plus{translate:6px 0}
.carte.lien{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.carte.lien:hover{box-shadow:var(--ombre);border-color:var(--encre-300)}

/* FAQ : ouverture fluide (Chrome 131+), repli instantané ailleurs */
.faq summary::after{content:"+";transition:rotate 320ms cubic-bezier(.16,1,.3,1)}
.faq details[open] summary::after{content:"+";rotate:45deg}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;
    transition:block-size 420ms cubic-bezier(.16,1,.3,1),content-visibility 420ms allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* Images différées : fondu à l'arrivée (classe posée par app.js, dimensions déjà réservées) */
.img-attente{opacity:0}
img[loading="lazy"]{transition:opacity 600ms ease}
.prod img{transition:transform 900ms cubic-bezier(.2,.6,.3,1),opacity 600ms ease}

/* Références : bande qui défile (deux lots identiques, le second masqué aux lecteurs d'écran) */
.logos.defile{display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos.defile .piste{display:flex;width:max-content;animation:defiler 42s linear infinite}
.logos.defile .lot{display:flex;gap:var(--e3);padding-right:var(--e3)}
.logos.defile .piste,.logos.defile .lot{border:0;padding-top:0;padding-bottom:0;padding-left:0;border-radius:0;font-size:inherit;letter-spacing:normal}
.logos.defile:hover .piste{animation-play-state:paused}
@keyframes defiler{to{translate:-50% 0}}

/* --- 25.3 Timelines de défilement ---------------------------------------- */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:scroll()){

  /* barre de progression de lecture + en-tête qui se pose */
  header.site::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
    transform-origin:0 50%;scale:0 1;animation:progression linear both;animation-timeline:scroll(root)}
  @keyframes progression{to{scale:1 1}}
  header.site::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    box-shadow:0 10px 30px -18px rgba(26,21,18,.35);opacity:0;
    animation:ombre-entete linear both;animation-timeline:scroll(root);animation-range:0 140px}
  @keyframes ombre-entete{to{opacity:1}}

  .bande-hero{animation:bande-plx linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes bande-plx{to{translate:0 -14%;rotate:2deg}}
}

@supports (animation-timeline:view()){

  /* apparition au défilement : montée + fondu, en cascade dans les grilles */
  .sec-head,.carte,.lieu:not([data-dev]),.formule,.faq details,.tw,.reponse,.duo .lecture,
  .regles li,.versus > div,.calcul,.chiffre-cle,.a-retenir,
  .grid + .lecture,.tw + .lecture,.cta-devis,.logos,.grid > figure,.choix-grille > .choix,.duo-visu,
  .cta-fin h2,.cta-fin p,.cta-fin .actions{
    animation:surgir linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes surgir{from{opacity:0;translate:0 36px;scale:.98;animation-timing-function:cubic-bezier(.16,1,.3,1)}}
  .grid > :nth-child(3n+2),.choix-grille > :nth-child(3n+2){animation-range:entry 8% entry 78%}
  .grid > :nth-child(3n+3),.choix-grille > :nth-child(3n+3){animation-range:entry 16% entry 86%}
  .faq details:nth-child(even){animation-range:entry 6% entry 76%}

  /* rail produits : profondeur (cartes en bord de rail plus petites) + parallaxe de la photo */
  .rail .prod{animation:rail-profondeur linear both;animation-timeline:view(inline);transform-origin:50% 66%}  /* l'échelle pivote sur la ligne des titres : ils restent alignés */
  @keyframes rail-profondeur{
    entry 0%{opacity:.4;scale:.88} entry 100%{opacity:1;scale:1}
    exit 0%{opacity:1;scale:1} exit 100%{opacity:.4;scale:.88}}
  .rail .prod picture{scale:1.16;animation:rail-plx linear both;animation-timeline:view(inline)}
  @keyframes rail-plx{from{translate:7% 0}to{translate:-7% 0}}

  /* photo du vocabulaire : parallaxe verticale dans son cadre */
  .duo-visu picture{scale:1.14;animation:plx-y linear both;animation-timeline:view()}
  @keyframes plx-y{from{translate:0 -6%}to{translate:0 6%}}
}
}

/* mouvement réduit (système ou réglage du site) : rien ne bouge, tout est visible */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .logos.defile .piste{animation:none}
  .logos.defile .lot[aria-hidden]{display:none}
  .logos.defile .lot{flex-wrap:wrap;justify-content:center}
  .faq details::details-content{transition:none}
}
.m-reduit *,.m-reduit *::before,.m-reduit *::after{animation-timeline:auto}
.m-reduit .sec-head,.m-reduit .carte,.m-reduit .formule{animation:none}

/* carte « fond pailleté » : visuel provisoire en paillettes CSS (à remplacer par la photo du client) */
.prod-paillettes .paillettes{position:absolute;inset:0;display:block;
  background:
    radial-gradient(circle at 38% 38%,rgba(255,255,255,.7) 0 26%,transparent 30%) 0 0/14px 14px,
    radial-gradient(circle at 62% 62%,rgba(90,64,20,.28) 0 26%,transparent 30%) 7px 7px/14px 14px,
    linear-gradient(90deg,rgba(255,255,255,.14) 50%,transparent 50%) 0 0/14px 14px,
    radial-gradient(120% 90% at 30% 20%,#F4E7BD 0%,#D9BE7A 45%,#A8833F 100%)}
.prod-paillettes .paillettes::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%) 0 0/250% 100%;
  animation:scintille 5s ease-in-out infinite}
@keyframes scintille{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@media(prefers-reduced-motion:reduce){.prod-paillettes .paillettes::after{animation:none}}

.modele{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--filet)}

/* --- 26. DEVIS : vignettes des modèles + photo agrandie --------------------- */
.modeles{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:var(--e3)}
.modele-choix{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:center}
.modele-choix input{position:absolute;opacity:0;width:1px;height:1px}
.m-visuel{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--fond-alt);
  box-shadow:0 0 0 1.5px var(--encre-100);transition:box-shadow var(--t),transform var(--t)}
.m-visuel img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.m-libre{display:grid;place-items:center;color:var(--texte-tres-doux)}
.modele-choix:hover .m-visuel{transform:translateY(-2px)}
.modele-choix input:checked + .m-visuel{box-shadow:0 0 0 3px var(--accent),var(--ombre)}
.modele-choix input:focus-visible + .m-visuel{outline:3px solid var(--accent);outline-offset:3px}
.modele-choix input:checked ~ .m-nom{color:var(--texte);font-weight:600}
.m-nom{font-size:13.5px;color:var(--texte-doux)}
.m-zoom{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:zoom-in;
  background:rgba(255,255,255,.92);color:var(--texte);box-shadow:0 2px 10px rgba(26,21,18,.25);transition:scale 200ms,background var(--t)}
.m-zoom:hover{scale:1.08;background:#fff}
.m-zoom:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.zoom-photo{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.zoom-photo::backdrop{background:rgba(26,21,18,.78);backdrop-filter:blur(3px)}
.zoom-photo figure{margin:0}
.zoom-photo img{display:block;width:100%;max-height:84vh;object-fit:contain;border-radius:var(--r-carte);background:var(--encre-700)}
.zoom-photo figcaption{color:#fff;text-align:center;font-weight:600;margin-top:10px}
.zoom-fermer{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--texte);
  font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--ombre)}
@media(max-width:520px){.zoom-fermer{top:8px;right:8px}}
@media (prefers-reduced-motion:no-preference){
  .zoom-photo[open]{animation:zoom-entree 260ms cubic-bezier(.16,1,.3,1)}
  .zoom-photo[open]::backdrop{animation:zoom-fond 260ms ease}
  @keyframes zoom-entree{from{opacity:0;scale:.94}}
  @keyframes zoom-fond{from{opacity:0}}
}

/* photobooth néon : pas encore de photo, un visuel lumineux neutre en attendant */
.prod-neon .neon-fond,.m-neon{background:radial-gradient(90% 70% at 30% 25%,#3a2350 0%,#1a1220 55%,#0f0b12 100%)}
.prod-neon .neon-fond{position:absolute;inset:0;display:grid;place-items:center}
.neon-fond span,.m-neon span{font:italic 400 clamp(38px,5vw,56px)/1 var(--police-fleur);color:#fff;letter-spacing:.01em;
  text-shadow:0 0 6px #fff,0 0 14px #ff5fd2,0 0 30px #ff5fd2,0 0 54px #b04dff}
.m-neon{display:grid;place-items:center}
.m-neon span{font-size:26px}
@media (prefers-reduced-motion:no-preference){.neon-fond span{animation:neon-vacille 6s ease-in-out infinite}}
@keyframes neon-vacille{0%,92%,100%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
@media(max-width:520px){.modeles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* devis : « sur devis » bien visible */
.badge-devis{display:inline-block;background:var(--accent);color:var(--accent-texte);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.sur-devis{margin:10px 0 0;display:flex;align-items:center;gap:10px;background:var(--accent-doux);border:1.5px solid var(--accent);
  border-radius:var(--r-carte);padding:10px 14px;font-size:14.5px;font-weight:600;color:var(--texte);line-height:1.35}
.sur-devis span{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-texte);font-size:17px}
.sur-devis[hidden]{display:none}

/* --- 27. ÉDITO : sections de lecture (titre collant à gauche, contenu à droite) --- */
.edito{display:grid;gap:var(--e6)}
.edito .sec-head{margin-bottom:0;text-align:left}
.edito .sec-head p{max-width:42ch}
.edito-corps{max-width:68ch;min-width:0}
.edito-corps > p{font-size:17px;color:var(--texte-doux)}
.edito-corps > :last-child{margin-bottom:0}
@media(min-width:960px){
  .edito{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e8);align-items:start}
  .edito-tete{position:sticky;top:110px}
}
/* chiffre clé : le nombre qui résume la section (Bodoni : chiffres sans 4, dont le dessin ressemble à un 1) */
.chiffre-cle{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--filet)}
.chiffre-cle b{font:italic 400 clamp(64px,8vw,104px)/.85 var(--police-fleur);color:var(--accent);letter-spacing:-.02em}
.chiffre-cle span{font-size:15px;line-height:1.45;color:var(--texte-doux);max-width:22ch}
/* phrase à retenir */
.a-retenir{position:relative;background:var(--fond-carte);border:1px solid var(--filet);border-left:3px solid var(--accent);
  border-radius:var(--r-petit);padding:var(--e4) var(--e5);color:var(--texte) !important}
section:not(.alt) .a-retenir{background:var(--fond-alt);border-color:transparent;border-left-color:var(--accent)}
/* règles numérotées */
.regles{list-style:none;margin:0 0 var(--e6);padding:0;display:grid;gap:var(--e4);counter-reset:regle}
@media(min-width:640px){.regles{grid-template-columns:1fr 1fr}}
.regles li{counter-increment:regle;background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);padding:var(--e5)}
.regles li::before{content:counter(regle,decimal-leading-zero);display:block;font:300 30px/1 var(--police);letter-spacing:-.02em;color:var(--accent);margin-bottom:var(--e3);font-variant-numeric:tabular-nums}
.regles h3{font-size:18px;margin-bottom:var(--e2)}
.regles p{font-size:15.5px;color:var(--texte-doux);margin:0}
/* deux colonnes comparées */
.versus{display:grid;gap:var(--e4);margin-bottom:var(--e5)}
@media(min-width:640px){.versus{grid-template-columns:1fr 1fr}}
.versus > div{background:var(--fond-alt);border-radius:var(--r-carte);padding:var(--e5)}
.versus > div:last-child{background:var(--encre);color:#fff}
.versus > div:last-child .lbl{color:var(--encre-300)}
.versus > div:last-child p{color:rgba(255,255,255,.82)}
.versus h3{font-size:22px;margin:var(--e2) 0}
.versus p{font-size:15.5px;color:var(--texte-doux);margin:0}
/* calcul des tirages */
.calcul{margin-top:var(--e6);background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-carte);padding:var(--e5);box-shadow:var(--ombre)}
section:not(.alt) .calcul{background:var(--fond-alt);border-color:transparent;box-shadow:none}
.calcul-regle{font-size:15.5px;color:var(--texte-doux);margin-bottom:var(--e4)}
.calcul-champ{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:var(--e2) var(--e3);font-size:14.5px;font-weight:600}
.calcul-champ output{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.calcul-champ input{grid-column:1/-1;width:100%;accent-color:var(--accent);margin:var(--e2) 0 0;cursor:pointer}
.calcul-res{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--e2) var(--e3);margin:var(--e4) 0 0;padding-top:var(--e4);border-top:1px solid var(--filet)}
.calcul-res b{font:300 clamp(36px,4vw,48px)/1 var(--police);letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.calcul-res span{font-size:15px;color:var(--texte-doux)}
.calcul-note{font-size:13.5px;color:var(--texte-tres-doux);margin:var(--e3) 0 0}
.calcul.actif .calcul-note{display:none}
.calcul-conseil{font-size:14.5px;color:var(--texte-doux);margin:var(--e3) 0 0}
.calcul-conseil b{color:var(--texte)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .regles li:nth-child(even),.versus > div:last-child{animation-range:entry 8% entry 78%}
}}
/* cartes photo : cadrage sur les visages ; plus hautes quand elles sont deux par ligne */
.lieu img{object-position:var(--pos,50% 30%)}
@media(min-width:640px){.g2 > .lieu img{height:280px}}
section.alt .versus > div:first-child{background:var(--fond-carte);border:1px solid var(--filet)}
/* grille à quatre : 2 × 2 dès la tablette (choix client) */
.g4{grid-template-columns:1fr}
@media(min-width:640px){.g4{grid-template-columns:repeat(2,1fr)}}
/* cartes-liens : le lien « → » toujours aligné en bas, quelle que soit la longueur du texte */
.carte.lien{display:flex;flex-direction:column}
.carte.lien .plus{margin-top:auto;padding-top:var(--e3)}
@media(min-width:640px){.g4{max-width:960px;margin-left:auto;margin-right:auto;grid-auto-rows:1fr}}

/* --- 28. FAQ : titre + contact à gauche, questions numérotées à droite --- */
.faq-bloc{display:grid;gap:var(--e6);text-align:left}
.faq-tete{display:contents}
.faq-tete .sec-head{order:1;margin:0;text-align:left}
.faq-bloc .faq{order:2;max-width:none;margin:0;counter-reset:q}
.faq-aide{order:3}
@media(min-width:960px){
  .faq-bloc{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--e8);row-gap:var(--e6);align-items:start}
  .faq-tete .sec-head{grid-column:1/-1}
  .faq-aide{grid-column:1;grid-row:2;position:sticky;top:110px}
  .faq-bloc .faq{grid-column:2;grid-row:2}
}
/* carte contact */
.faq-aide{background:var(--encre);color:#fff;border-radius:var(--r-carte);padding:var(--e6) var(--e5);position:relative;overflow:hidden}
.faq-aide::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.faq-aide-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--taupe);font:italic 400 26px/1 var(--police-fleur);margin-bottom:var(--e4)}
.faq-aide h3{font-size:22px;color:#fff;margin-bottom:var(--e2)}
.faq-aide p{font-size:15.5px;color:rgba(255,255,255,.78);margin-bottom:var(--e5)}
.faq-aide-liens{display:flex;flex-wrap:wrap;gap:var(--e3)}
.faq-aide .btn{background:#fff;color:var(--encre);border-color:#fff}
.faq-aide .btn:hover{background:var(--taupe-clair);border-color:var(--taupe-clair)}
.faq-aide .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.faq-aide .btn.ghost:hover{background:#fff;color:var(--encre);border-color:#fff}
.faq-aide-mail{display:inline-block;margin-top:var(--e4);font-size:14.5px;color:rgba(255,255,255,.78)}
.faq-aide-mail:hover{color:#fff}
/* questions */
.faq-bloc .faq details{counter-increment:q;border-radius:var(--r-carte);padding:0 var(--e5);transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.faq-bloc .faq details:hover{border-color:var(--encre-300)}
.faq-bloc .faq details[open]{border-color:transparent;box-shadow:var(--ombre)}
.faq-bloc .faq summary{display:block;position:relative;padding:22px 52px 22px calc(24px + var(--e4));font-size:17.5px;line-height:1.35}
.faq-bloc .faq summary::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:25px;width:24px;font:300 15px/1 var(--police);color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.faq-bloc .faq summary::after{position:absolute;right:0;top:50%;translate:0 -50%;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--filet);font-size:20px;line-height:1;color:var(--accent);transition:rotate 320ms cubic-bezier(.16,1,.3,1),background var(--t),color var(--t),border-color var(--t)}
.faq-bloc .faq details[open] summary::after{background:var(--accent);border-color:var(--accent);color:#fff}
.faq-bloc .faq details p{padding:0 50px var(--e5) calc(24px + var(--e4));max-width:none;font-size:16px;line-height:1.7}
@media(max-width:639px){.faq-bloc .faq details p{padding-left:0;padding-right:0}.faq-bloc .faq summary{font-size:16.5px}}
@media(min-width:960px){.faq-bloc .faq-aide{position:sticky}}

/* --- 29. PAGES PRODUIT : liste cochée, citation client --- */
.coche{list-style:none;margin:var(--e5) 0;padding:0;display:grid;gap:var(--e3)}
.coche li{position:relative;padding-left:34px;font-size:16.5px;color:var(--texte-doux);line-height:1.5}
.coche li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--accent)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.coche li strong{color:var(--texte)}
.citation{margin:0 auto;max-width:860px;text-align:center}
.citation blockquote{margin:0}
.citation blockquote p{font:italic 400 clamp(22px,2.6vw,32px)/1.4 var(--police-fleur);color:var(--texte);margin:0;text-wrap:balance}
.citation blockquote p::before{content:"« "}.citation blockquote p::after{content:" »"}
.citation figcaption{margin-top:var(--e5);font-size:14.5px;color:var(--texte-tres-doux)}
.citation .etoiles{color:var(--accent);letter-spacing:.12em;margin-right:8px}
.lieu[id]{scroll-margin-top:110px}
section[id]{scroll-margin-top:80px}
/* habillages du photobooth (page /photobooth/) : photos presque carrées, la borne entière à l'image */
.habillages > .lieu img{height:clamp(320px,38vw,500px);object-position:50% 70%}

/* --- 30. OFFRE MARIAGE : bloc sombre, trio photobooth + cabine + mur de roses --- */
.offre-sec{background:var(--fond-sombre);color:#fff;padding:var(--e8) 0}
.offre{display:grid;gap:var(--e6);align-items:center}
@media(min-width:900px){.offre{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e8)}}
.offre-visu{border-radius:var(--r-carte);overflow:hidden;aspect-ratio:4/5;max-width:460px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.offre-visu picture,.offre-visu img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.offre-visu img{object-position:50% 42%}
.offre-tag{display:inline-block;background:#fff;color:var(--encre);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.offre-txt h2{color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.08;margin:var(--e4) 0 var(--e3);max-width:20ch}
.offre-txt > p{color:rgba(255,255,255,.78);max-width:56ch}
.offre-liste{list-style:none;margin:var(--e5) 0 0;padding:0}
.offre-liste li{display:grid;grid-template-columns:26px 1fr auto;column-gap:var(--e3);align-items:start;padding:var(--e3) 0;border-top:1px solid rgba(255,255,255,.14)}
.offre-liste em{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;font-weight:600;font-size:17px;white-space:nowrap;color:rgba(255,255,255,.9)}
.offre-valeur{display:block;width:100%;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.offre-valeur s{color:rgba(255,255,255,.55);font-size:16px;letter-spacing:0;text-transform:none;margin-left:6px}
.offre-liste li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--encre);font-size:13px;font-weight:700;margin-top:2px}
.offre-liste b{display:block;font-size:17px;font-weight:600}
.offre-liste span{grid-column:2;color:rgba(255,255,255,.7);font-size:15px}
.offre-prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--e3) var(--e4);margin:var(--e5) 0 var(--e3)}
.offre-prix strong{font-size:clamp(40px,5vw,58px);font-weight:600;letter-spacing:-.02em;line-height:1}
.offre-prix em{font-style:normal;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:5px 12px}
.offre-note{color:rgba(255,255,255,.65);font-size:14.5px;margin:0 0 var(--e5)}
.offre-sec .btn{background:#fff;border-color:#fff;color:var(--encre)}
.offre-sec .btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

/* ---- Cosam-Box : mosaïque d'ambiances (images seules) ---- */
.mosaique{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:var(--e3)}
.mosaique figure{margin:0;border-radius:var(--r-carte);overflow:hidden;aspect-ratio:1;background:var(--encre-100)}
.mosaique picture,.mosaique img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
@media(min-width:720px){.mosaique{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4)} .mosaique figure.haut{grid-row:span 2;aspect-ratio:auto}}


/* ===== MOBILE (≤ 719 px) : rythme, alignement, rails ===================== */
.cta-mobile{display:none}
@media (max-width:719px){
  body{font-size:16px}
  section{padding:var(--e7) 0}
  .wrap{padding:0 18px}
  h2{font-size:clamp(26px,7.2vw,30px);line-height:1.1}
  h3{font-size:18px}
  .sec-head{margin-bottom:var(--e5)}
  .sec-head p{font-size:15.5px;margin-top:var(--e2)}
  .lbl{font-size:12px;letter-spacing:.18em}
  .annonce{font-size:12.5px;padding-left:16px;padding-right:16px}
  /* un seul alignement : tout à gauche, sauf les bandeaux d'appel */
  .centre,.centre .sec-head,.rail-head .sec-head,.sec-head.centre{text-align:left}
  .centre .sec-head,.sec-head.centre,.centre .sec-head p,.texte .sec-head p{margin-left:0;margin-right:0}
  .une-ligne{white-space:normal}
  .cta-fin,.mur-sec{text-align:center}
  /* boutons pleine largeur, empilés */
  .actions{gap:10px}
  .actions .btn{width:100%}
  /* puces de faits : une seule ligne, défilante */
  .faits{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:var(--e4) -18px 0;padding:4px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .faits::-webkit-scrollbar{display:none}
  .fait{flex:0 0 auto;padding:8px 14px;font-size:14px;white-space:nowrap}
  /* hero : compact, photo en arche basse, sans le grand disque */
  .hero{padding:var(--e5) 0 var(--e7)}
  .hero-grid{gap:var(--e6);grid-template-columns:minmax(0,1fr)}
  .hero-grid > *{min-width:0;max-width:100%}
  .faits{max-width:none}
  .h-mega{font-size:clamp(40px,11.5vw,56px)}
  .hero-grid h1:not(.h-mega):not(.hero-h1){font-size:clamp(30px,8.6vw,38px)}
  .hero .big{font-size:16px;margin-top:var(--e4)}
  .hero .actions{margin-top:var(--e5)}
  .hero-visu{width:100%;max-width:none;aspect-ratio:5/4;justify-self:stretch}
  .hero-visu::before,.hero-visu::after{display:none}
  .hero-visu img,.hero-visu .ph{border-radius:120px 120px var(--r-img) var(--r-img);box-shadow:var(--ombre);object-position:50% 35%}
  .fil{padding-top:var(--e4)}
  /* atouts : icône à gauche, texte à droite */
  .atouts{gap:var(--e5)}
  .atout{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start}
  .atout .ico{width:44px;height:44px;margin:0;grid-row:1/3}
  .atout h3,.atout p{grid-column:2}
  .atout .ico svg{width:22px;height:22px}
  .atout h3{font-size:17px;margin-bottom:4px}
  .atout p{font-size:15px}
  /* réponse directe */
  .reponse,.reponse.au-centre{padding:var(--e4) var(--e5);text-align:left;margin:0}
  .reponse p{font-size:15px}
  /* cartes : plus denses */
  .grid{gap:10px}
  .carte{padding:var(--e4) var(--e5)}
  .carte h3{font-size:17px;margin-bottom:4px}
  .carte p{font-size:14.5px}
  .carte.lien .plus{margin-top:var(--e2);font-size:14px}
  .regles li{padding:var(--e4) var(--e5)}
  .regles li::before{font-size:24px;margin-bottom:var(--e2)}
  /* rails défilants : formules, vidéos, lieux, avis (une carte et demie visible) */
  .grid.g3:has(> .formule),.grid.g3:has(> .video),.grid:has(> .lieu),.instants{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 -18px;padding:18px 18px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 18px}
  .grid.g3:has(> .formule)::-webkit-scrollbar,.grid.g3:has(> .video)::-webkit-scrollbar,.grid:has(> .lieu)::-webkit-scrollbar,.instants::-webkit-scrollbar{display:none}
  .grid.g3 > .formule{flex:0 0 82%;scroll-snap-align:center;text-align:left;padding:var(--e5)}
  .formule .prix{font-size:28px}
  .formule ul{font-size:14.5px;margin-bottom:var(--e4)}
  .formule .btn{width:100%}
  .grid.g3 > .video{flex:0 0 80%;scroll-snap-align:center}
  .grid > .lieu{flex:0 0 78%;scroll-snap-align:start}
  .lieu img,.lieu .ph,.g2 > .lieu img{height:170px}
  .instants>.instant{flex:0 0 76%;max-width:none;scroll-snap-align:center}
  /* tableaux de prix régionaux : prix et formule seulement */
  table{min-width:0;font-size:14.5px}
  th,td{padding:12px 14px}
  .tw table:has(th:nth-child(4)) :is(th,td):nth-child(n+3){display:none}
  /* pages régionales : le formulaire complet reste sur /devis/, ici un bouton */
  section#devis.alt .devis-grid{display:none}
  .cta-mobile{display:block;margin:0}
  /* bandeau final */
  .cta-fin{padding:var(--e8) 0}
  .cta-fin h2{font-size:28px}
  .cta-fin p{font-size:16px}
  /* pied de page : deux colonnes */
  .foot{grid-template-columns:1fr 1fr;gap:var(--e5) var(--e4)}
  .foot-nap,.foot-bas{grid-column:1/-1}
  .foot a{font-size:14.5px;padding:4px 0}
  .foot-bas{display:flex;flex-direction:column;gap:6px}
}