/* Polices du site — Bodoni Moda (titres) et Jost (texte) */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bodoni-moda-400.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/bodoni-moda-500.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/bodoni-moda-400-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/jost-300.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-400.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-500.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-400.woff2) format("woff2")}

/* =====================================================================
   Marine B. Makeup — feuille de style
   Charte : blanc laque / charbon / rose poudre / taupe du logo
   Titres : Bodoni Moda en petites majuscules · Texte : Jost
   ===================================================================== */
:root{
  /* Palette tiree du logo « Marine — Les Ateliers MakeUp ».
     Valeurs officielles du kit : blanc #FFFFFF, rose poudre #EFDED7,
     charbon #2C2C2C, encre taupe #62574F. */
  --noir:#1A1918;        /* aplats sombres, plus profond que le charbon */
  --encre:#2C2C2C;       /* charbon du kit */
  --platre:#F3F0ED;      /* texte sur fond sombre, surfaces secondaires */
  --papier:#FFFFFF;      /* blanc laque : le fond du site */
  --chair:#EFDED7;       /* rose poudre du kit */
  --or:#62574F;          /* encre du logo : accent principal */
  --or-clair:#CBBFB5;    /* taupe clair : accents sur fond sombre */
  --or-fonce:#443C36;
  --texte:#2C2C2C;
  --texte-doux:#6C615C;  /* moyenne reelle de l encre du logo */
  --filet:#E7E1DB;
  --display:"Bodoni Moda",'Didot','Bodoni MT','Times New Roman',serif;
  --ui:"Jost",'Futura','Avenir Next',system-ui,-apple-system,sans-serif;
  --pad:clamp(22px,6vw,104px);
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Pas d'overflow-x sur <html> : la specification CSS force alors l'autre
   axe a « auto », <html> devient une zone de defilement et macOS affiche
   une barre verticale permanente au lieu de la barre flottante.
   Le masquage horizontal reste sur <body>, ou il n'a pas cet effet. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--texte);font-family:var(--ui);font-weight:300;font-size:17px;line-height:1.75;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
[id]{scroll-margin-top:96px}
@media(max-width:900px){[id]{scroll-margin-top:78px}}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;font-variant-caps:small-caps;letter-spacing:.012em;text-wrap:balance}
h2 .thin,h1 .thin{display:block;font-style:italic;font-weight:400;color:var(--or)}
.wrap{max-width:1240px;margin:0 auto}

/* ---------- utilitaires ---------- */
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--or);font-weight:500;margin-bottom:18px}
.kicker::before{content:'';width:34px;height:1px;background:var(--or)}
.kicker.pale{color:var(--or)}.kicker.pale::before{background:var(--or)}
.kicker.clair{color:rgba(255,255,255,.85)}.kicker.clair::before{background:rgba(255,255,255,.6)}
.just{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.lead{font-size:clamp(17px,1.9vw,20px);line-height:1.7;color:var(--texte-doux);max-width:66ch}
section{padding:clamp(80px,10vw,150px) var(--pad)}
.sec-titre{font-size:clamp(34px,5.4vw,74px);margin-bottom:18px}
.filet{height:1px;background:var(--filet);border:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:2px;font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .3s,box-shadow .3s}
.btn:active{transform:scale(.98)}
.btn-plein{background:var(--noir);color:var(--papier)}
.btn-plein:hover{background:var(--or);transform:translateY(-2px);box-shadow:0 14px 34px rgba(138,107,65,.34)}
.btn-blanc{background:#fff;color:var(--noir)}
.btn-blanc:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.btn-ligne{border:1px solid rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px)}
.btn-ligne:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-sombre-ligne{border:1px solid var(--noir);color:var(--noir)}
.btn-sombre-ligne:hover{background:var(--noir);color:var(--papier)}
.btn-or{background:var(--or-fonce);color:#fff}
.btn-or:hover{background:var(--noir);transform:translateY(-2px)}

.rv{opacity:0;transform:translateY(48px) scale(.982);transition:opacity .95s cubic-bezier(.16,.7,.3,1),transform .95s cubic-bezier(.16,.7,.3,1)}
.rv.on{opacity:1;transform:none}
@media(max-width:900px){.rv{transform:translateY(56px) scale(.965)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---------- logo ---------- */
.mm-eti{flex:none;width:17px;display:block;color:currentColor}
  /* Le bandeau fait 92 px : a 70 px le logo laisse 11 px de respiration
     de chaque cote. Au-dela il touche les bords et ca se voit. */
  .hd-logo{flex:none;display:block;width:auto;height:70px;transition:height .3s ease}
  .hd-logo-taupe{display:none}
  .hd.dur .hd-logo{height:56px}
  .hd.dur .hd-logo-blanc,.hd.ouvert .hd-logo-blanc{display:none}
  .hd.dur .hd-logo-taupe,.hd.ouvert .hd-logo-taupe{display:block}
  @media (max-width:860px){.hd-logo{height:62px}.hd.dur .hd-logo{height:51px}}
  @media (max-width:420px){.hd-logo{height:54px}}
.mm-eti svg{width:100%;display:block}
.marque{display:flex;align-items:center;gap:12px}
.mm-logo{display:inline-block;position:relative;width:clamp(210px,22vw,268px);font-size:clamp(210px,22vw,268px);color:var(--or)}
.mm-logo svg{width:100%;display:block}
.mm-logo .mm-txt{position:absolute;left:0;right:0;top:29.5%;text-align:center;line-height:1}
.mm-logo .mm-nom{display:block;font-family:"Playfair Display",'Didot',Georgia,serif;font-weight:400;
  font-size:.163em;letter-spacing:.135em;text-indent:.135em;text-transform:uppercase;color:var(--or)}
.mm-logo .mm-sous{display:block;margin-top:.045em;font-family:var(--ui);font-weight:400;
  font-size:.0355em;letter-spacing:.30em;line-height:2;text-transform:uppercase;color:var(--or);opacity:.9}
.mm-logo img{width:100%;height:auto;display:block}
.mm-logo.a-image{width:200px;font-size:0}
footer .mm-logo.a-image{width:200px;margin-bottom:12px}
footer .mm-logo{color:var(--or);width:272px;font-size:272px;margin-bottom:4px}
footer .mm-logo .mm-nom{color:var(--noir)}
footer .mm-logo .mm-sous{color:var(--or);opacity:.85}
footer .mm-logo .mm-lavis{display:none}
footer .fm-sous{font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--texte-doux);margin-top:14px}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:300;height:92px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(to bottom,rgba(12,10,9,.6),rgba(12,10,9,0));transition:height .35s,background .35s,color .35s,box-shadow .35s}
.hd.dur{height:74px;background:rgba(247,245,243,.94);backdrop-filter:blur(18px);color:var(--texte);box-shadow:0 1px 0 var(--filet)}
.marque{font-family:var(--display);font-size:20px;line-height:1.12;font-variant-caps:small-caps;letter-spacing:.03em}
.marque b{display:block;font-weight:400;font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.03em;font-size:20px;line-height:1.12}
.marque .mm-sig{display:block;font-family:var(--ui);font-size:10px;font-variant-caps:normal;font-weight:400;letter-spacing:.22em;text-transform:uppercase;opacity:.78;margin-top:2px}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .35s}
.nav a:hover::after{right:0}
.nav .pill{border:1px solid currentColor;padding:12px 20px;border-radius:2px}
.nav .pill::after{display:none}
.nav .pill:hover{background:var(--or);border-color:var(--or);color:#fff}
.burger{display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:50%;align-items:center;justify-content:center;font-size:15px;transition:.3s;flex:none}
.hd.ouvert{background:transparent;color:var(--texte);box-shadow:none;height:92px}
.hd.ouvert .marque{opacity:0;pointer-events:none}
.hd.ouvert .burger{border-color:rgba(44,44,44,.32);color:var(--texte)}
.hd.dur .burger{border-color:rgba(42,35,32,.3)}
.burger:hover{border-color:currentColor}

/* ---------- menu mobile ---------- */
.mnav{position:fixed;inset:0;z-index:200;background:var(--papier);display:flex;flex-direction:column;justify-content:center;padding:110px var(--pad) 40px;color:var(--texte);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav.open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
.mnav a{display:block;font-family:var(--display);font-variant-caps:small-caps;font-size:clamp(28px,8vw,40px);padding:15px 0;border-bottom:1px solid var(--filet);opacity:0;transform:translateY(24px);transition:opacity .5s cubic-bezier(.16,.7,.3,1),transform .5s cubic-bezier(.16,.7,.3,1),color .3s,padding-left .3s}
.mnav.open a{opacity:1;transform:none}
.mnav a:active{color:var(--or);padding-left:10px}
.mnav .mini{font-family:var(--ui);font-variant-caps:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);border:0;margin-top:28px}

/* ---------- hero ---------- */
.hero{padding:0;position:relative;min-height:640px;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--noir)}
.scene{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1.8s ease}
.slide.on{opacity:1}
.slide.on .kb{animation:kb 9s ease-out forwards}
.slide i{position:absolute;inset:0;background:inherit;background-position:inherit;background-size:cover}
.slide.on{animation:kb 9s ease-out forwards}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1.0)}}
.voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,7,.9) 0%,rgba(10,8,7,.45) 34%,rgba(10,8,7,.1) 62%,rgba(10,8,7,.55) 100%)}
.hero-in{position:relative;z-index:3;color:#fff;padding:120px var(--pad) clamp(70px,8vw,104px);width:100%}
.hero h1{font-size:clamp(44px,7.6vw,116px);letter-spacing:.005em;margin-bottom:20px}
.hero h1 .thin{color:#fff;opacity:.95}
.hero .sous{max-width:54ch;font-size:clamp(15px,1.5vw,18px);color:rgba(255,255,255,.85)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.puces{display:flex;gap:8px;margin-top:30px}
.puce{width:34px;height:2px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;cursor:pointer;border-radius:2px}
.puce em{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;display:block}
.puce.on em{animation:remplir 6.4s linear forwards}
@keyframes remplir{to{transform:scaleX(1)}}
.rail{position:absolute;left:clamp(12px,2vw,36px);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:3}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);animation:bob 2.4s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media(max-width:1200px){.rail{display:none}}

/* ---------- bandeau défilant : blanc nacré laqué ---------- */
/* Le bandeau est incliné. Un rectangle tourné de 1,1° est plus haut que sa
   boîte d'environ (largeur x sin 1,1°), soit ~1,9 % de la largeur de l'écran :
   sur 1900 px cela fait 37 px de plus. Sans cette réserve, overflow:hidden
   rogne les extrémités — c'est ce qui coupait le texte à droite.
   La marge négative annule la réserve dans le flux : rien ne bouge. */
.mq-wrap{overflow:hidden;padding:max(24px,2.05vw) 0;margin:calc(-1 * max(24px,2.05vw)) 0;position:relative;z-index:4}
.marquee{
  background:linear-gradient(180deg,#fffdfb 0%,#f7f2ec 26%,#ffffff 46%,
             #f1e9e1 58%,#f8f2ec 78%,#fffdfa 100%);
  color:var(--encre);overflow:hidden;padding:24px 0;
  transform:rotate(-1.1deg);margin:-20px -14px 0;
  font-size:13.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  position:relative;isolation:isolate;z-index:4;display:flex;align-items:center;min-height:68px;
  border-top:1px solid rgba(255,255,255,.95);
  border-bottom:1px solid rgba(98,87,79,.20);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -2px 4px rgba(98,87,79,.07);
}
.marquee::before,.marquee::after{content:'';position:absolute;pointer-events:none;z-index:0}
/* La nacre ne varie pas qu'en clarté : elle change de teinte. Du blanc seul
   sur un fond blanc ne donne que des taches grises. On fait donc passer le
   rose poudré et le taupe clair de la charte dans le reflet fixe. */
.marquee::before{
  inset:0;
  background:linear-gradient(112deg,transparent 4%,rgba(255,255,255,.92) 15%,
    rgba(203,191,181,.20) 26%,transparent 38%,rgba(255,255,255,.95) 51%,
    rgba(239,222,215,.42) 61%,transparent 72%,rgba(255,255,255,.85) 84%,transparent 96%);
}
/* Un large reflet glisse sur la laque, derrière le texte. */
.marquee::after{
  top:0;bottom:0;left:0;width:55%;
  background:linear-gradient(110deg,transparent 12%,rgba(255,255,255,.25) 28%,
    rgba(255,255,255,.95) 42%,rgba(239,222,215,.5) 49%,transparent 57%,
    rgba(255,255,255,.8) 64%,transparent 76%);
  transform:translateX(65%);opacity:.85;
  animation:reflet-laque 11s ease-in-out infinite;
}
.mq-track{position:relative;z-index:1;display:flex;align-items:center;width:max-content;
  animation:glisse 42s linear infinite;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.mq-track span{display:flex;align-items:center;gap:34px;padding-right:34px;white-space:nowrap}
@keyframes glisse{to{transform:translateX(-50%)}}
@keyframes reflet-laque{
  0%,12%{transform:translateX(-120%);opacity:0}
  22%{opacity:.95}
  70%{opacity:.95}
  82%,100%{transform:translateX(300%);opacity:0}
}
@media (prefers-reduced-motion:reduce){.marquee::after{animation:none;opacity:.5}}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,6vw,90px);align-items:start}
.intro h2{font-size:clamp(30px,4vw,54px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filet);border:1px solid var(--filet);margin-top:clamp(50px,7vw,86px)}
.stat{background:var(--papier);padding:30px 20px;text-align:center}
.stat b{display:block;font-family:var(--display);font-variant-caps:small-caps;font-size:30px;font-weight:400;color:var(--noir);letter-spacing:.02em}
.stat span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-doux)}

/* ---------- portfolio ---------- */
.pf-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:42px}
/* ---------- galeries du portfolio ---------- */
  .galeries{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
    margin-top:clamp(40px,4.6vw,60px)}
  .galerie{background:var(--papier);border:1px solid var(--filet);overflow:hidden}
  .gal-ouvre{display:flex;flex-direction:column;width:100%;padding:0;border:0;
    background:transparent;cursor:pointer;text-align:left;font:inherit;color:inherit}
  /* Plein cadre. Les deux couches du fondu occupent exactement la meme
     surface : quel que soit le format de la photo entrante, on ne voit
     jamais la precedente depasser sur les cotes. Le 4/5 est le format le
     plus proche des photos du fonds, donc celui qui rogne le moins. */
  .gal-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
    background:var(--platre)}
  .gal-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center;
    opacity:0;z-index:0;
    transition:opacity 2200ms cubic-bezier(.37,0,.24,1)}
  .gal-img.sortante{opacity:1;z-index:1;transition:none}
  .gal-img.on{opacity:1;z-index:2}
  .gal-voile{position:absolute;inset:0;pointer-events:none;z-index:3;
    background:linear-gradient(to top,rgba(26,25,24,.10),transparent 30%)}
  .gal-compte{position:absolute;top:14px;right:14px;z-index:4;
    min-width:30px;height:30px;padding:0 9px;border-radius:15px;
    background:rgba(255,255,255,.94);color:var(--noir);
    display:grid;place-items:center;font-size:11.5px;letter-spacing:.06em}
  .gal-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:clamp(16px,1.8vw,22px) clamp(18px,1.8vw,24px);
    border-top:1px solid var(--filet)}
  .gal-titre{font-family:var(--display);font-variant-caps:small-caps;font-weight:400;
    font-size:clamp(19px,2.1vw,24px);letter-spacing:.02em;line-height:1.15;
    color:var(--noir);transition:color .3s}
  .gal-ouvre:hover .gal-titre,.gal-ouvre:focus-visible .gal-titre{color:var(--or)}
  .gal-fleche{position:relative;flex:none;width:20px;height:10px;color:var(--or)}
  .gal-fleche::before{content:'';position:absolute;left:0;right:2px;top:4px;height:1.5px;
    background:currentColor;transition:transform .35s cubic-bezier(.16,.7,.3,1)}
  .gal-fleche::after{content:'';position:absolute;right:2px;top:1px;width:7px;height:7px;
    border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
    transform:rotate(45deg);transition:transform .35s cubic-bezier(.16,.7,.3,1)}
  .gal-ouvre:hover .gal-fleche::before{transform:translateX(4px)}
  .gal-ouvre:hover .gal-fleche::after{transform:rotate(45deg) translate(3px,-3px)}


  @media (max-width:900px){.galeries{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){
    .galeries{grid-template-columns:1fr;gap:18px}
    /* Sur une seule colonne la carte est large : le carre garde la photo
       lisible sans allonger la page autant qu'un 4/5. */
    .gal-media{aspect-ratio:1/1}
  }
  @media (prefers-reduced-motion:reduce){
    .gal-img{transition:none}
    .grille-zone{animation:none}
  }

  .fond-neutre{background:var(--papier)!important}
  .filtres{display:flex;flex-wrap:wrap;gap:8px}
.filtres button{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:11px 17px;border:1px solid var(--filet);border-radius:2px;color:var(--texte-doux);transition:.3s}
.filtres button:hover{border-color:var(--noir);color:var(--noir)}
.filtres button[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:var(--papier)}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.tuile{position:relative;overflow:hidden;background:var(--platre);aspect-ratio:4/5;display:block}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,.7,.3,1)}
.tuile:hover img{transform:scale(1.06)}
.tuile::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,7,.72),rgba(10,8,7,0) 52%);opacity:0;transition:opacity .4s}
.tuile:hover::after,.tuile:focus-within::after{opacity:1}
.tuile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 18px;color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:.4s}
.tuile:hover figcaption,.tuile:focus-within figcaption{opacity:1;transform:none}
.tuile .go{position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(247,245,243,.9);color:var(--noir);display:grid;place-items:center;font-size:15px;opacity:0;transform:scale(.8);transition:.4s}
.tuile:hover .go{opacity:1;transform:scale(1) rotate(45deg)}
.tuile.off{display:none}
@keyframes apparait{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
/* Sans survol — c'est-a-dire sur la majorite des visites — la pastille
   « ↗ » restait invisible sur les cartes de prestations : rien n'indiquait
   qu'on pouvait cliquer. Elle etait deja corrigee pour les tuiles du
   portfolio, pas pour les cartes. */
@media(hover:none){
  .tuile::after{opacity:1}.tuile figcaption{opacity:1;transform:none}.tuile .go{opacity:1;transform:scale(1)}
  .carte.a-lien .carte-media .go{opacity:1;transform:scale(1);background:var(--noir);color:#fff}
}

/* ---------- citation ---------- */
.bande{position:relative;height:min(52vw,520px);overflow:hidden;background:var(--noir)}
.bande .bg{position:absolute;inset:0;background-size:cover;background-position:center 42%;transform:scale(1.02)}
.bande::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,7,.8),rgba(10,8,7,.25))}
.bande p{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(34px,5vw,70px);color:#fff;font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.02em;font-size:clamp(22px,3.4vw,46px);line-height:1.16;max-width:24ch}

/* ---------- prestations ---------- */
.presta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);margin-top:52px}
.carte{position:relative;display:flex;flex-direction:column;border-top:1px solid var(--noir);padding-top:22px}
.carte-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--platre);margin-bottom:18px}
.carte-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,.7,.3,1)}
.carte:hover .carte-media img{transform:scale(1.06)}
/* Carte qui mene quelque part : on le fait comprendre sans ombre portee.
   Le filet du haut s'epaissit, la carte monte de trois pixels, la pastille
   passe du contour au plein. Rien d'autre — le site tient sa tenue de ses
   aplats blancs, une ombre au repos le ferait basculer dans le gabarit. */
.carte.a-lien{transition:transform .35s cubic-bezier(.16,.7,.3,1)}
.carte.a-lien .carte-lien{color:inherit;text-decoration:none;display:block}
.carte.a-lien:hover{transform:translateY(-3px)}
.carte.a-lien::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--noir);transform:scaleY(1);transform-origin:top;transition:transform .35s}
.carte.a-lien:hover::before{transform:scaleY(3)}
.carte.a-lien:hover .carte-media .go{background:var(--noir);color:#fff}
.carte.a-lien:focus-within{transform:translateY(-3px)}
.carte.a-lien:focus-within .carte-media .go{background:var(--noir);color:#fff}
.carte.a-lien .carte-lien:focus-visible{outline:2px solid var(--noir);outline-offset:4px}
.carte-media .go{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:rgba(247,245,243,.92);display:grid;place-items:center;font-size:14px;opacity:0;transform:scale(.8);transition:.4s}
.carte:hover .carte-media .go{opacity:1;transform:scale(1) rotate(45deg)}
.carte h3{font-size:27px;margin-bottom:10px}
.carte p{font-size:15px;color:var(--texte-doux);line-height:1.62}
.carte .accroche-prix{margin:26px 0 0;font-family:var(--display);font-variant-caps:small-caps;
    font-size:clamp(19px,2.4vw,24px);letter-spacing:.02em;color:var(--or);line-height:1.3}
  .accroche-prix:empty{display:none}
  .prix{margin-top:auto;padding-top:16px;border-top:1px solid var(--filet);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.carte .prix b{font-family:var(--display);font-size:23px;font-weight:400;font-variant-caps:small-caps;letter-spacing:.02em}
.carte .prix small{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-doux)}

/* ---------- mariage ---------- */
.mariage{background:var(--chair);position:relative;overflow:hidden}
.mariage::before{content:'';position:absolute;top:-160px;left:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(138,107,65,.16),transparent 70%);pointer-events:none}
.mar-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,84px);align-items:center;position:relative}
.mar-photo{overflow:hidden;transform:rotate(-2.2deg);box-shadow:0 34px 80px rgba(56,40,32,.32);border:6px solid #fff}
.mar-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.mariage h2{font-size:clamp(32px,4.6vw,64px);margin-bottom:20px}
.mariage .lead{color:#5B4F47}
.etapes{list-style:none;margin:36px 0 30px}
.etapes li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;padding:17px 0;border-top:1px solid rgba(42,35,32,.16);transition:padding-left .3s}
.etapes li:last-child{border-bottom:1px solid rgba(42,35,32,.16)}
.etapes li:hover{padding-left:8px}
.etapes .num{font-family:var(--display);font-size:13px;color:var(--or)}
.etapes .lib{font-size:16px}
.etapes .val{font-family:var(--display);font-size:20px;white-space:nowrap;font-variant-caps:small-caps;letter-spacing:.02em}
/* Les deux boutons du bloc mariage. L'accroche de prix les touchait :
   on lui laisse respirer, et les boutons se rangent sur une meme ligne
   qui se replie d'elle-meme quand la place manque.
   Un bouton dont la cellule du tableur est vide disparait : c'est ainsi
   qu'on retire « En savoir plus » sans toucher au code. */
.mariage .accroche-prix{margin:0}
.mar-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.mar-actions .btn:empty{display:none}

/* ---------- passerelle ---------- */
.passerelle{background:var(--platre)}
.pass-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:center}
.passerelle h2{font-size:clamp(26px,3.4vw,44px);margin-bottom:16px}

/* ---------- ateliers ---------- */
.pro{background:var(--chair);color:var(--texte);position:relative;overflow:hidden}
.pro::before{content:'';position:absolute;top:-180px;right:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(98,87,79,.10),transparent 70%);pointer-events:none}
.pro *{position:relative}
.pro h2,.pro h3{color:var(--noir)}
.pro h2 .thin{color:var(--or)}
.pro .lead{color:rgba(44,44,44,.74)}
/* le bouton ligne etait blanc sur fond sombre : sur le rose poudre il
   devient invisible, on le repasse sur l encre du logo */
.pro .btn-ligne{border:1px solid var(--or);color:var(--or);backdrop-filter:none}
.pro .btn-ligne:hover{background:var(--or);border-color:var(--or);color:#fff}
.pro-tete{max-width:78ch}
.publics{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.publics span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(44,44,44,.22);padding:10px 14px;border-radius:2px;color:rgba(44,44,44,.82);transition:.3s}
.publics span:hover{border-color:var(--or);color:var(--noir)}
  @media (max-width:700px){
    .publics{display:block;margin-top:30px;font-size:13px;line-height:2;
      color:var(--texte-doux);max-width:46ch}
    .publics span{display:inline;border:0;padding:0;font-size:inherit;letter-spacing:.02em;
      text-transform:none;color:inherit}
    .publics span:not(:last-child)::after{content:' · ';color:var(--or)}
  }
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(44,44,44,.16);border:1px solid rgba(44,44,44,.16);margin-top:60px}
.format{background:#FFFFFF;transition:background .35s}
  .format>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:clamp(22px,2.4vw,32px) clamp(24px,2.6vw,38px)}
  .format>summary::-webkit-details-marker{display:none}
  .format>summary:hover .format-titre,.format>summary:focus-visible .format-titre{color:var(--or)}
  .format-titre{font-family:var(--display);font-variant-caps:small-caps;font-weight:400;
    font-size:clamp(19px,2.1vw,23px);letter-spacing:.02em;line-height:1.2;color:var(--noir);
    transition:color .3s}
  .chev{flex:none;width:11px;height:11px;border-right:1.5px solid var(--or);
    border-bottom:1.5px solid var(--or);transform:rotate(45deg);margin-top:-4px;
    transition:transform .35s cubic-bezier(.16,.7,.3,1)}
  .format[open] .chev{transform:rotate(-135deg);margin-top:3px}
  .format-corps{padding:0 clamp(24px,2.6vw,38px) clamp(24px,2.6vw,36px);
    display:flex;flex-direction:column;gap:12px;
    animation:deplie .35s cubic-bezier(.16,.7,.3,1)}
  @keyframes deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.chev{transition:none}.format-corps{animation:none}}
.format:hover{background:#FBF7F4}
.format h3{font-size:24px}
.format p{font-size:14.5px;color:rgba(44,44,44,.68);line-height:1.68}
.format .meta{margin-top:auto;padding-top:18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.parcours{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px}
.parcours div{position:relative;padding:34px clamp(20px,3vw,46px) 0 0}
.parcours div::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(44,44,44,.22)}
.parcours div::after{content:'';position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--or)}
.parcours div:last-child::before{right:0}
.parcours b{display:block;font-family:var(--display);font-size:13px;font-weight:400;letter-spacing:.22em;color:var(--or);margin-bottom:12px;line-height:1}
.parcours p{font-size:15.5px;color:rgba(44,44,44,.82);line-height:1.6}
.criteres-tete{margin-top:76px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.criteres{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,88px);margin-top:14px}
.criteres span{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid rgba(44,44,44,.13);font-size:15.5px;color:rgba(44,44,44,.8)}
.criteres i{font-style:normal;font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--or);min-width:20px}
.pro-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px);margin-top:58px}
.pro-photos figure{overflow:hidden;aspect-ratio:3/2;background:#E4D6CE}
.pro-photos img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .4s,transform .9s cubic-bezier(.16,.7,.3,1)}
.pro-photos figure:hover img{opacity:1;transform:scale(1.06)}

/* ---------- à propos ---------- */
.ap-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6.5vw,104px);align-items:start}
  .ap-photo{position:sticky;top:120px}
  .ap-txt .lead{max-width:56ch;margin-bottom:clamp(30px,4vw,46px)}
  .ap-recit{max-width:62ch}
  .ap-chapo{font-size:clamp(18px,2.1vw,21px);line-height:1.78;color:var(--texte);
    padding-bottom:clamp(24px,3vw,32px);border-bottom:1px solid var(--filet)}
  .ap-para{font-size:clamp(15.5px,1.75vw,17px);line-height:1.92;color:var(--texte-doux);
    margin-top:clamp(22px,2.8vw,30px)}
  .ap-citation{margin:clamp(34px,4.6vw,52px) 0;padding:0 0 0 clamp(20px,2.6vw,30px);
    border-left:2px solid var(--or);font-family:var(--display);font-variant-caps:small-caps;
    font-size:clamp(22px,3vw,30px);line-height:1.32;letter-spacing:.02em;color:var(--or);max-width:22ch}
  .ap-citation:empty{display:none}
  .ap-signature{margin-top:clamp(30px,4vw,44px);font-size:11px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--texte-doux)}
  .ap-signature:empty{display:none}
  /* Formation. Discrete, sous la signature : on vient ici pour savoir qui
     elle est, la credibilite arrive en appui du recit, pas en argument.
     Cellule vide dans le tableur = ligne absente de la page. */
  .ap-formation{margin-top:10px;font-size:13px;line-height:1.6;color:var(--texte-doux);
    max-width:34ch}
  .ap-formation:empty{display:none}
  .ap-suite{display:none}
  .ap-suite.on{display:block;animation:deplie .4s cubic-bezier(.16,.7,.3,1)}
  .ap-plus{margin-top:clamp(22px,2.8vw,30px);background:transparent;border:0;padding:0;
    cursor:pointer;font-family:var(--ui);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--or);display:inline-flex;align-items:center;gap:10px;
    transition:gap .3s}
  .ap-plus::after{content:'';width:22px;height:1px;background:var(--or);transition:width .3s}
  .ap-plus:hover{gap:14px}
  .ap-plus:hover::after{width:30px}
  @media (max-width:900px){
    .ap-photo{position:static}
    .ap-recit,.ap-txt .lead{max-width:none}
    .ap-citation{max-width:none}
  }
.ap-photo{overflow:hidden;transform:rotate(1.8deg);box-shadow:0 30px 70px rgba(42,35,32,.2);border:6px solid #fff}
.ap-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ap-txt h2{font-size:clamp(34px,4.6vw,64px);margin-bottom:20px}
.ap-txt p+p{margin-top:16px}
.ap-txt .corps{color:var(--texte-doux);max-width:64ch}

/* ---------- instagram ---------- */
.insta{text-align:center;background:var(--platre)}
.insta .kicker{margin-left:auto;margin-right:auto}
.insta h2{font-size:clamp(30px,4.4vw,58px);margin-bottom:18px}
.insta .lead{margin:0 auto 26px;text-align:center}
.insta .handle{font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.04em;font-size:clamp(22px,2.8vw,34px);color:var(--or)}
/* Le pseudo Instagram est un seul mot insecable : sur les tres petits
   ecrans il depassait de la page. On le laisse se reduire jusqu'a tenir,
   plutot que de le couper au milieu ou de le masquer. */
@media (max-width:400px){.insta .handle{letter-spacing:0;font-size:clamp(15px,5.6vw,22px);word-break:normal;overflow-wrap:normal}}

/* ---------- contact ---------- */
.contact{background:var(--papier);color:var(--texte)}
.contact h2{color:var(--noir);font-size:clamp(32px,4.6vw,60px);margin-bottom:18px}
.contact h2 .thin{color:var(--or)}
.contact .lead{color:rgba(44,44,44,.7)}
.appel{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);flex-wrap:wrap;
    margin-top:clamp(26px,3.4vw,38px)}
  .appel-lien{display:inline-flex;align-items:center;gap:15px;padding:16px 26px;
    background:var(--or);color:#fff;text-decoration:none;border-radius:2px;
    transition:background .3s,transform .3s}
  .appel-lien:hover,.appel-lien:focus-visible{background:var(--or-fonce);transform:translateY(-2px)}
  .appel-icone{font-size:20px;line-height:1;flex:none}
  .appel-txt{display:flex;flex-direction:column;gap:3px}
  .appel-txt b{font-family:var(--display);font-variant-caps:small-caps;font-weight:400;
    font-size:clamp(20px,2.4vw,25px);letter-spacing:.03em;line-height:1}
  .appel-txt small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
  .appel-ou{font-size:13.5px;color:var(--texte-doux);max-width:30ch;line-height:1.6}
  .appel-ou:empty{display:none}
  @media (max-width:520px){.appel-lien{width:100%;justify-content:center}}
  .onglets{display:flex;margin:40px 0 32px;border-bottom:1px solid rgba(44,44,44,.2)}
.onglets button{padding:15px 24px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.3s}
.onglets button[aria-selected="true"]{color:var(--noir);border-bottom-color:var(--or)}
form{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px;max-width:1000px}
.f-full{grid-column:1/-1}
.champ{position:relative}
label{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:9px}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(44,44,44,.28);color:var(--noir);font:inherit;font-size:16px;padding:11px 2px;border-radius:0;transition:border-color .3s}
input::placeholder,textarea::placeholder{color:#767070}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--or)}
select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,rgba(44,44,44,.6) 50%),linear-gradient(135deg,rgba(44,44,44,.6) 50%,transparent 50%);background-position:calc(100% - 14px) 22px,calc(100% - 9px) 22px;background-size:5px 5px;background-repeat:no-repeat}
select option{background:#FFFFFF;color:var(--texte)}
textarea{resize:vertical;min-height:120px}
.sous-titre{grid-column:1/-1;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);padding-top:10px}
.bloc-mariage{grid-column:1/-1;display:none;grid-template-columns:repeat(2,1fr);gap:20px 24px;padding:24px 0 4px;border-top:1px solid rgba(44,44,44,.2)}
.bloc-mariage.on{display:grid}
.panneau{display:none}.panneau.on{display:block}
.aide{font-size:13px;color:var(--texte-doux);grid-column:1/-1;line-height:1.6}

/* --- champ date + calendrier --- */
.dtwrap{position:relative}
.dt{cursor:pointer;padding-right:30px}
.dtwrap .cal-ico{position:absolute;right:2px;bottom:13px;font-size:14px;color:var(--or);pointer-events:none}
.cal{position:absolute;z-index:60;top:calc(100% + 10px);left:0;width:302px;background:#fff;color:var(--texte);box-shadow:0 26px 60px rgba(44,44,44,.18);padding:16px;display:none}
.cal.on{display:block}
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-tete b{font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.03em;font-size:18px;font-weight:400}
.cal-tete button{width:30px;height:30px;border:1px solid var(--filet);display:grid;place-items:center;font-size:13px;transition:.25s}
.cal-tete button:hover{background:var(--noir);color:#fff;border-color:var(--noir)}
.cal-jours,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-jours span{text-align:center;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux);padding:6px 0}
.cal-grid button{height:36px;font-size:14px;color:var(--texte);transition:.2s;font-family:var(--ui)}
.cal-grid button:hover:not(:disabled){background:var(--platre)}
.cal-grid button.sel{background:var(--noir);color:#fff}
.cal-grid button:disabled{color:#CFC8C0;cursor:default}
.cal-grid .vide{height:36px}

/* ---------- footer ---------- */
footer{background:var(--platre);color:var(--texte-doux);padding:clamp(56px,7vw,86px) var(--pad) 120px}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px}
/* Niveau h3 et non h4 : le dernier titre avant le pied de page est un
   h2, et sauter un niveau gene la navigation au clavier et au lecteur
   d ecran. L aspect, lui, ne change pas : il vient d ici. */
footer h3{font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:16px}
footer .fm{font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.03em;font-size:28px;color:var(--noir);line-height:1.1;margin-bottom:6px}
footer .fm b{display:block;font-weight:400}
footer .fm span{display:block;font-family:var(--ui);font-variant-caps:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-doux);margin-top:4px}
footer ul{list-style:none;display:grid;gap:10px;font-size:14.5px}
  @media (max-width:560px){footer ul{gap:7px;font-size:14px}
    footer{padding:42px var(--pad) 88px}
    footer h3{margin-bottom:11px}
    .ft-bas{margin-top:30px;padding-top:18px;gap:12px}
    #logoPied{width:150px!important;font-size:150px!important}
    footer .just{text-align:left;hyphens:none}}
footer a:hover{color:var(--noir)}
.ft-bas{margin-top:46px;padding-top:22px;border-top:1px solid rgba(44,44,44,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--texte-doux)}
.ft-bas div{display:flex;gap:20px;flex-wrap:wrap}
.ft-bas a{cursor:pointer}
.ft-bas .signature a{color:var(--or);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
.ft-bas .signature a:hover{color:var(--noir)}

/* ============================================================ page mariage
   Une page interieure, servie a son adresse. Elle reprend tout le
   vocabulaire de l'accueil — meme grille, memes boutons, memes titres,
   meme feuille de style — et n'ajoute ici que ce qui lui est propre.
   Rien de ce qui suit ne s'applique a l'accueil : tout est prefixe. */

/* bandeau de tete : une photo fixe, pas de diaporama */
.pm-hero{position:relative;min-height:clamp(420px,58vh,620px);display:flex;align-items:flex-end;
  padding:0;background:var(--noir) center 32%/cover no-repeat;overflow:hidden}
.pm-hero-voile{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,10,9,.62),rgba(12,10,9,.34) 40%,rgba(12,10,9,.86))}
.pm-hero-in{position:relative;z-index:2;color:#fff;padding:132px var(--pad) clamp(46px,6vw,74px);width:100%}
.pm-hero h1{font-size:clamp(34px,6.2vw,80px);line-height:1.04;margin:14px 0 0}
/* La seconde ligne du titre est taupe partout ailleurs. Sur une photo
   claire elle devient illisible : ici elle passe au blanc, comme sur le
   grand titre de l'accueil, qui a le meme probleme et la meme solution. */
.pm-hero h1 .thin{display:block;color:#fff;opacity:.95}
.pm-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,40px)}
.pm-hero-actions .btn:empty{display:none}

/* fil d'Ariane : il dit ou l'on est, et ramene a l'accueil */
.pm-fil{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.78);flex-wrap:wrap}
.pm-fil a{color:inherit;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:.3s}
.pm-fil a:hover{color:#fff;border-color:#fff}
.pm-fil b{font-weight:400;color:#fff}

.pm-intro .lead{max-width:78ch;font-size:clamp(17.5px,2vw,21px)}

/* les trois blocs illustres */
.pm-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,5.4vw,78px);align-items:center}
.pm-inverse .pm-grid{grid-template-columns:1.22fr .78fr}
.pm-inverse .pm-media{order:2}
.pm-figure{overflow:hidden;border:6px solid #fff;box-shadow:0 30px 70px rgba(56,40,32,.22)}
.pm-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pm-bloc h2{font-size:clamp(30px,4.2vw,56px);margin:10px 0 20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
/* La duree se lit a cote du titre, dans la typographie de l'interface :
   c'est une information pratique, pas un titre. Vide, elle disparait. */
.pm-duree{font-family:var(--ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);border:1px solid var(--filet);padding:5px 12px;white-space:nowrap;line-height:1.4}
.pm-duree:empty{display:none}
.pm-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:38px;padding-top:30px;border-top:1px solid var(--filet)}
.pm-notes h3{font-family:var(--display);font-variant-caps:small-caps;font-weight:400;font-size:21px;letter-spacing:.02em;margin-bottom:8px}
.pm-notes p{font-size:15px;color:var(--texte-doux);line-height:1.66}

/* retouches : l'aplat rose du bloc mariage de l'accueil */
.pm-relief{background:var(--chair);padding:clamp(56px,7vw,96px) var(--pad)}
.pm-relief h2{font-size:clamp(26px,3.4vw,44px);margin-bottom:16px}
.pm-relief .lead{color:#5B4F47;max-width:80ch}

/* formules */
.pm-tarifs{background:var(--platre)}
.pm-formules{margin-top:44px;border-top:1px solid var(--filet)}
.pm-formule{display:grid;grid-template-columns:1.5fr .8fr .7fr;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--filet)}
.pm-f-nom{font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.02em;font-size:clamp(19px,2.2vw,24px);line-height:1.25}
.pm-f-duree{font-size:14px;color:var(--texte-doux)}
.pm-f-tarif{font-family:var(--display);font-variant-caps:small-caps;letter-spacing:.02em;font-size:clamp(18px,2vw,22px);color:var(--or);text-align:right}
.pm-note{margin-top:22px;font-size:15px;color:var(--texte-doux);max-width:72ch}

.pm-deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,70px);align-items:start}
.pm-deux h2{font-size:clamp(26px,3.2vw,40px);margin-bottom:16px}

/* questions : une seule colonne. Un accordeon range en trois colonnes
   oblige l'oeil a chercher ou le volet s'est ouvert. */
.pm-faq .formats{grid-template-columns:1fr;margin-top:44px}

.pm-cta{background:var(--noir);color:var(--platre);text-align:center}
.pm-cta h2{font-size:clamp(30px,4.4vw,58px);margin-bottom:16px;color:#fff}
.pm-cta .lead{color:rgba(243,240,237,.76);margin:0 auto;max-width:56ch}
.pm-cta .btn-sombre-ligne{border-color:rgba(255,255,255,.45);color:#fff}
.pm-cta .btn-sombre-ligne:hover{background:#fff;color:var(--noir);border-color:#fff}

@media(max-width:980px){
  .pm-grid,.pm-inverse .pm-grid{grid-template-columns:1fr}
  .pm-inverse .pm-media{order:0}
  .pm-media{max-width:440px}
  .pm-deux{grid-template-columns:1fr}
}
@media(max-width:620px){
  .pm-notes{grid-template-columns:1fr}
  /* Trois colonnes de tarif ne tiennent pas : la duree passe sous le nom
     et le tarif garde sa colonne, ce qui laisse les prix alignes. */
  .pm-formule{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .pm-f-duree{grid-column:1}
  .pm-f-tarif{grid-column:2;grid-row:1 / span 2;align-self:center}
}

/* ---------- sticky CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid rgba(44,44,44,.12);transform:translateY(110%);transition:transform .45s cubic-bezier(.16,.7,.3,1)}
.sticky.on{transform:none}
.sticky .btn{flex:1;min-height:52px;padding:0 16px}
.sticky .tel{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--or);color:var(--or);display:grid;place-items:center;font-size:17px}

/* ---------- transitions de navigation ---------- */
.trans{position:fixed;inset:0;z-index:400;pointer-events:none;visibility:hidden}
.trans.on{visibility:visible;pointer-events:auto}
.trans i{position:absolute;display:block;background:var(--noir);transition:transform .42s cubic-bezier(.76,0,.24,1),opacity .42s ease}
.trans .lueur{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(199,169,122,.16),transparent 60%);opacity:0;transition:opacity .42s ease}
.trans.actif .lueur{opacity:1}

/* ---------- modale (pages légales) ---------- */
.modale{position:fixed;inset:0;z-index:350;display:none}
.modale.on{display:block}
.modale-fond{position:absolute;inset:0;background:rgba(10,8,7,.72);backdrop-filter:blur(6px)}
.modale-boite{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(740px,92vw);max-height:84vh;overflow-y:auto;background:var(--papier);padding:clamp(28px,4vw,52px);box-shadow:0 40px 100px rgba(0,0,0,.5);animation:monte .45s cubic-bezier(.16,.7,.3,1)}
@keyframes monte{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modale-boite h3{font-size:clamp(26px,3.4vw,40px);margin-bottom:8px}
.modale-boite .maj{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:26px;display:block}
.modale-boite h4{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--texte);margin:26px 0 10px}
.modale-boite p{font-size:15.5px;color:var(--texte-doux);line-height:1.72;text-align:justify;hyphens:auto}
/* La croix suit le defilement.
     Elle etait en position absolue dans .modale-boite — or c'est .modale-boite
     qui defile : passe la premiere hauteur d'ecran, la croix etait hors de vue
     et il fallait remonter tout en haut pour fermer. Sur un telephone, avec
     quatorze photos, cela faisait beaucoup de chemin.
     « sticky » la maintient en haut de la zone qui defile. « fixed » ne
     conviendrait pas : .modale-boite porte un transform de centrage, ce qui
     en fait le bloc de reference des elements fixes — ils defilent alors
     avec elle, exactement comme avant. Verifie sur telephone et sur ecran
     large, galerie comme pages legales. */
  .modale-fermer{position:sticky;top:0;float:right;margin:0 0 -42px 0;width:42px;height:42px;
    border:1px solid var(--filet);border-radius:50%;font-size:15px;background:var(--papier);
    box-shadow:0 2px 10px rgba(0,0,0,.10);z-index:5;transition:.25s}
  /* le titre ne doit pas passer sous la croix */
  .modale-boite h3,.modale-boite .maj{padding-right:54px}
.modale-fermer:hover{background:var(--noir);color:#fff;border-color:var(--noir)}
  .modale-galerie .modale-boite{width:min(1140px,94vw);max-height:88vh}
  /* Mosaique : chaque photo garde ses proportions, rien n'est recadre
     et il ne reste aucune bande vide. */
  .modale-galerie .modale-boite .grille{display:block;margin-top:8px;
    columns:3;column-gap:12px}
  .modale-galerie .modale-boite .tuile{display:block;break-inside:avoid;
    -webkit-column-break-inside:avoid;page-break-inside:avoid;
    aspect-ratio:auto;height:auto;margin:0 0 12px;background:var(--platre)}
  .modale-galerie .modale-boite .tuile img{width:100%;height:auto;display:block;
    object-fit:fill}
  .modale-galerie .modale-boite .tuile figcaption{opacity:1;transform:none;
    background:linear-gradient(to top,rgba(26,25,24,.72),transparent)}
  /* Sans legende, le voile sombre au survol n'aurait rien a eclairer. */
  .modale-galerie .modale-boite .tuile.sans-legende::after{content:none}
  @media (max-width:900px){.modale-galerie .modale-boite .grille{columns:2}}
  @media (max-width:560px){.modale-galerie .modale-boite .grille{columns:1}}
  @media (max-width:560px){
    .modale-galerie .modale-boite{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
      top:0;left:0;transform:none;padding:18px 14px 24px}
  }

/* ---------- avis ---------- */
/* Meme grammaire que le reste : du blanc, un filet, la serif pour la parole
   et la sans pour tout ce qui l'entoure. Pas d'encadre colore, pas de
   guillemets geants — la citation se tient toute seule. */
.avis{background:var(--platre)}
.avis-grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);margin-top:clamp(38px,4.6vw,60px)}
.avis-carte{background:var(--papier);padding:clamp(26px,2.6vw,38px);
  display:flex;flex-direction:column;border-top:1px solid var(--noir)}
.avis-note{display:flex;gap:3px;margin-bottom:18px}
.avis-note i{font-style:normal;font-size:13px;line-height:1;color:var(--or)}
.avis-note i.vide{color:var(--filet)}
.avis-texte{font-family:var(--display);font-size:clamp(17px,1.35vw,20px);line-height:1.62;
  color:var(--noir);letter-spacing:.005em;flex:1}
.avis-auteur{margin-top:clamp(20px,2.2vw,28px);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-doux)}
.avis-source{display:block;margin-top:5px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or)}
.avis-pied{margin-top:clamp(34px,4vw,52px);text-align:center}
.avis-pied a:empty{display:none}
/* Le nombre d'avis decide de la grille : a trois colonnes, quatre avis
   laissent un trou disgracieux sur la seconde ligne. Deux ou quatre se
   rangent en carre, le reste sur trois colonnes. */
.avis-grille[data-n="1"]{grid-template-columns:minmax(0,520px);justify-content:center}
.avis-grille[data-n="2"],.avis-grille[data-n="4"]{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.avis-grille,.avis-grille[data-n="4"]{grid-template-columns:repeat(2,1fr)}}
/* Le selecteur d'attribut ci-dessus l'emporte sur un selecteur de classe
   seul, quel que soit l'ordre : il faut donc la meme specificite ici, sinon
   la grille reste a deux colonnes sur telephone et le texte devient illisible. */
@media(max-width:620px){.avis-grille,.avis-grille[data-n]{grid-template-columns:1fr}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:96px;z-index:300;transform:translate(-50%,22px);background:var(--or);color:#fff;font-size:13.5px;letter-spacing:.04em;padding:14px 24px;opacity:0;pointer-events:none;transition:.4s;box-shadow:0 14px 40px rgba(0,0,0,.35);max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .presta{grid-template-columns:repeat(2,1fr)}
  .formats{grid-template-columns:repeat(2,1fr)}
  .parcours{grid-template-columns:repeat(2,1fr)}
  /* Colonnes de chiffres : minmax(0,1fr) et non 1fr.
     « 1fr » vaut « minmax(auto,1fr) », et ce minimum « auto » est la largeur
     du plus long mot insecable de la cellule. « Déplacement », en Bodoni
     petites capitales a 30 px, mesure a lui seul 165 px : la premiere
     colonne se bloquait a 212 px et la seconde se contentait du reste,
     146 px. D'ou un cadre visiblement de travers entre 361 et 490 px de
     large, et des sous-titres renvoyes a la ligne d'un cote seulement.
     minmax(0,...) supprime ce plancher ; le titre et les marges sont
     reduits en consequence pour que le mot continue de tenir. */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:26px 10px}
  .stat b{font-size:clamp(22px,6.4vw,26px)}
  @media (max-width:360px){.stats{grid-template-columns:1fr}}
  .grille{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .burger{display:grid}
  .hd .nav{display:none}
  .intro,.mar-grid,.ap-grid,.pass-grid{grid-template-columns:1fr}
  .mar-photo,.ap-photo{transform:none;max-width:520px;margin:0 auto}
  .grille{grid-template-columns:repeat(3,1fr)}
  .sticky{display:flex}
  .pro-photos{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  body{font-size:16px}
  .hero{min-height:600px;height:94svh}
  .hero-actions .btn{width:100%}
  .presta,.formats{grid-template-columns:1fr}
  .parcours{grid-template-columns:1fr}
  .parcours div{padding:0 0 30px 30px}
  .parcours div::before{top:6px;bottom:0;left:4px;right:auto;width:1px;height:auto}
  .parcours div:last-child::before{display:none}
  .parcours div::after{top:4px;left:0}
  .criteres{grid-template-columns:1fr}
  .grille{grid-template-columns:repeat(2,1fr);gap:8px}
  form,.bloc-mariage.on{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:26px 24px}
  .ft-grid>:first-child{grid-column:1/-1}
  .bande{height:80vw}
  .cal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(330px,90vw);z-index:260;box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .cal-fond{position:fixed;inset:0;background:rgba(10,8,7,.6);z-index:250;display:none}
  .cal-fond.on{display:block}
}

  /* ---- formulaire : preference de contact, pot de miel, etat d'envoi ---- */
  .pot-de-miel{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
  .pref{border:0;padding:0;margin:0}
  .pref legend{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:11px;padding:0}
  .pref .radio{display:inline-flex;align-items:center;gap:9px;margin-right:26px;cursor:pointer;font-size:14.5px}
  .pref .radio input{width:auto;accent-color:var(--or);margin:0;padding:0}
  .pref .radio span{color:var(--texte)}
  .champ-tel label::after{content:' — le plus simple';text-transform:none;letter-spacing:0;color:var(--or);font-size:10px}
  .etat-envoi{margin-top:14px;font-size:14.5px;line-height:1.6}
  .etat-envoi.ok{color:#2F6B4F}
  .etat-envoi.ko{color:#9B3B2E}
  button[disabled]{opacity:.6;cursor:progress}