/* ============================================================
   LE CLOS DE PROVENCE — v2 "Or & Pierre"
   Palette dérivée du sceau doré du domaine (#dfd083 → #988156)
   Display : HV Clio · UI : Futura PT   (DA d'après restaurantonyx.com)
   Effets repris du catalogue local ~/Desktop/Bibliotheque-Sites/_outils/catalogue
   ============================================================ */

:root{
  /* Noir */
  --ink:        #000000;
  --ink-2:      #000000;
  --ink-3:      #000000;
  /* Blanc */
  --stone:      #ffffff;
  --stone-2:    #f2f2f2;
  --stone-ink:  #0a0a0a;
  /* Or du logo */
  --gold-lt:    #dfd083;
  --gold:       #bca96d;
  --gold-dp:    #988156;
  /* Textes */
  --cream:      #f4f4f3;
  --muted:      #8e8e8b;
  --muted-dark: #6a6a67;
  --line:       rgba(255,255,255,.14);
  --line-dark:  rgba(0,0,0,.13);

  --f-display: "HV Clio", "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --f-ui:      "Futura PT", "Avenir Next", -apple-system, "Helvetica Neue", sans-serif;

  --pad:  clamp(1.25rem, 5vw, 5.5rem);
  --gap:  clamp(4.5rem, 12vh, 11rem);
  --e:    cubic-bezier(.16,1,.3,1);
  --maxw: 1440px;
}

*{box-sizing:border-box;margin:0;padding:0}
em,i,cite,address{font-style:normal}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-ui);
  font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- A1 · Grain animé — overlay sur tout le site ---------- */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none}
/* couche 1 : grain fin qui bouge, la texture argentique */
.grain::before{
  content:"";position:absolute;inset:-150%;width:400%;height:400%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.15;animation:grain 8s steps(10) infinite}
/* couche 2 : grain plus large et fixe, pour que le bruit se lise aussi sur les aplats */
.grain::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  opacity:.07}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-8%)}30%{transform:translate(3%,-12%)}
  50%{transform:translate(-8%,4%)}70%{transform:translate(7%,-3%)}90%{transform:translate(-2%,9%)}}

/* ---------- Texture papier (surfaces claires) ---------- */
.paper{position:relative;isolation:isolate}
.paper::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  mix-blend-mode:multiply;opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.1'/%3E%3C/svg%3E")}
.paper > *{position:relative;z-index:1}

/* ---------- D1/D4 · Curseur custom, contextuel, en difference ---------- */
.cursor{
  position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--gold);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);opacity:0;
  transition:width .35s var(--e),height .35s var(--e),background .35s,opacity .3s;
  display:grid;place-items:center;mix-blend-mode:difference}
.cursor.is-active{width:78px;height:78px;background:rgba(188,169,109,.16)}
.cursor-label{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .25s;white-space:nowrap;color:var(--gold-lt)}
.cursor.is-active .cursor-label{opacity:1}
@media (hover:hover) and (pointer:fine){ body{cursor:none} a,button,input,select,textarea,label{cursor:none} }
@media (hover:none){ .cursor{display:none} }

/* ---------- Typo commune ---------- */
.h2{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.9vw,4.4rem);line-height:1.08;letter-spacing:.015em}
.h2 em{font-style:normal;color:var(--gold)}
.kicker{
  display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.kicker.gold{color:var(--gold)}
.section-label{
  display:flex;gap:1.6rem;align-items:baseline;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark);
  padding-bottom:clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--line-dark);margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.section-label.light-label{color:var(--muted);border-color:var(--line)}
.drag-hint{margin-left:auto}

.light{background:var(--stone);color:var(--stone-ink)}
.light .kicker{color:var(--muted-dark)}
.light .h2 em{color:var(--gold-dp)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 2.2rem;border-radius:100px;border:1px solid currentColor;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
.btn-solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.light .btn-solid{background:var(--stone-ink);color:var(--stone);border-color:var(--stone-ink)}
.light .btn-solid:hover{background:var(--gold-dp);border-color:var(--gold-dp);color:var(--stone)}
.btn-ghost{color:var(--cream);border-color:rgba(244,244,243,.4)}
.btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.text-link{
  display:inline-flex;align-items:center;gap:.5rem;padding-bottom:.35rem;
  border-bottom:1px solid currentColor;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  transition:gap .35s var(--e),color .35s}
.text-link:hover{gap:1rem;color:var(--gold-dp)}
.light .text-link{color:var(--stone-ink)}

/* ============================================================
   OPENER DE CHARGEMENT
   d'après « Aurela Loader » — pack local +16 Hero Animations / 1
   Le mot s'ouvre en son milieu, une image y grandit puis prend l'écran
   ============================================================ */
.opener{
  position:fixed;inset:0;z-index:9997;background:var(--stone);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.opener-word{
  display:flex;flex-direction:column;align-items:center;position:relative;white-space:nowrap;
  font-family:var(--f-display);font-weight:400;color:var(--stone-ink);
  text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(3rem, min(11vw, 17vh), 11rem);line-height:.78}
.opener-line1{
  display:flex;overflow:hidden;color:var(--gold-dp);
  font-size:.3em;letter-spacing:.18em;line-height:1;margin-bottom:.18em;padding-bottom:.06em}
.ol1{display:block;position:relative}
.opener-line2{display:flex;justify-content:center;position:relative}
.opener-half{display:flex;overflow:hidden}
.opener-half--start{justify-content:flex-end}
.opener-half--end{justify-content:flex-start}
.ol{display:block;position:relative}

.opener-box{
  display:flex;flex-flow:column;align-items:center;justify-content:center;
  width:0;position:relative}
.opener-box-in{
  display:flex;align-items:center;justify-content:center;
  min-width:1em;height:95%;position:relative}
.opener-grow{
  display:flex;align-items:center;justify-content:center;
  width:0%;height:100%;position:absolute;overflow:hidden}
.opener-grow-wrap{width:100%;min-width:1em;height:100%;position:absolute}
.opener-img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;user-select:none}
.opener-img.is--1{z-index:3}
.opener-img.is--2{z-index:2}
.opener-img.is--3{z-index:1}
.opener-img.is--base{z-index:0;filter:saturate(.86) contrast(1.04) brightness(.76)}
body.is-loading{overflow:hidden}

/* ============================================================
   sec-1 · NAV qui se solidifie
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:920;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.5rem var(--pad);
  transition:background .5s var(--e),padding .5s var(--e),border-color .5s;
  border-bottom:1px solid transparent}
.nav.is-stuck{
  background:rgba(0,0,0,.86);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line)}
/* emplacement de mesure dans la barre : le vrai logo est en position fixe */
.nav-brand-slot{display:block;width:clamp(115px,11vw,165px);aspect-ratio:3.447}
.brandmark svg{shape-rendering:geometricPrecision}
/* le logo voyage du hero jusqu'à la barre au fil du scroll */
.brandmark{
  position:fixed;top:0;left:0;z-index:930;display:block;
  /* taille de rendu = la plus grande (le hero). Le transform ne fait que RÉDUIRE :
     agrandir un SVG déjà rastérisé en petit le rend pixelisé. */
  width:min(38rem,72vw);transform-origin:0 0;
  opacity:1;color:var(--gold);transition:color .4s var(--e),opacity .45s var(--e) .25s;will-change:transform}
/* il s'efface quand le menu s'ouvre : sinon il flotte par-dessus l'overlay */
body.menu-open .brandmark{opacity:0;pointer-events:none;transition:opacity .12s linear}
.brandmark:hover{color:var(--gold-lt)}
.brandmark svg{width:100%;aspect-ratio:3.447;display:block}
.nav.menu-open{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.nav-right{display:flex;align-items:center;gap:1.4rem}

/* ---------- HAMBURGER ---------- */
.burger{
  position:fixed;z-index:960;top:0;right:var(--pad);height:calc(1.5rem * 2 + 44px);
  background:none;border:0;display:flex;align-items:center;gap:.85rem;padding:.35rem;
  transition:height .5s var(--e)}
.burger-box{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none}
/* l'anneau est centré sur la boîte, quelle que soit la largeur du bouton */
.burger-ring{
  position:absolute;left:50%;top:50%;width:44px;height:44px;translate:-50% -50%;
  border:1px solid var(--gold);border-radius:50%;
  transform:scale(.45);opacity:0;transition:transform .55s var(--e),opacity .4s var(--e)}
.burger:hover .burger-ring{transform:scale(1);opacity:.55}
.burger-lines{position:relative;display:block;width:30px;height:14px}
.burger-lines i{
  position:absolute;left:0;height:1.5px;background:var(--cream);border-radius:2px;
  transition:width .45s var(--e),transform .55s var(--e),opacity .3s var(--e),background .3s}
.burger-lines i:nth-child(1){top:0;width:30px}
.burger-lines i:nth-child(2){top:6px;width:20px}
.burger-lines i:nth-child(3){top:12px;width:30px}
.burger:hover .burger-lines i:nth-child(2){width:30px}
.burger:hover .burger-lines i{background:var(--gold-lt)}
.burger-label{display:block;height:1.15em;overflow:hidden;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.burger-label-track{display:block;transition:transform .5s var(--e)}
.burger-label-track em{display:block;font-style:normal;line-height:1.15}
.burger.is-open .burger-lines i:nth-child(1){transform:translateY(6px) rotate(45deg);width:30px}
.burger.is-open .burger-lines i:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.is-open .burger-lines i:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:30px}
.burger.is-open .burger-lines i{background:var(--gold-lt)}
.burger.is-open .burger-label-track{transform:translateY(-1.15em)}
.burger.is-open .burger-ring{transform:scale(1);opacity:.35}
@media(max-width:520px){ .burger-label{display:none} }

/* ---------- E1/E3 · Overlay rideau + chorégraphie ---------- */
.overlay{position:fixed;inset:0;z-index:950;pointer-events:none;visibility:hidden}
.overlay.is-open{pointer-events:auto;visibility:visible}
.overlay-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(160deg,rgba(188,169,109,.10),transparent 45%),
    rgba(0,0,0,.80);
  backdrop-filter:blur(42px) saturate(1.4);
  -webkit-backdrop-filter:blur(42px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.overlay-inner{
  opacity:0; /* indispensable : le contenu ne doit rien peindre avant le voile */
  position:relative;height:100%;overflow-y:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2.5rem,8vh,5rem);
  padding:clamp(5.5rem,14vh,9rem) var(--pad) clamp(2rem,5vw,3.5rem)}
.overlay-nav{display:flex;flex-direction:column;align-items:center;gap:.35rem}
/* texte lisible par-dessus le flou */
.overlay-nav a{text-shadow:0 2px 24px rgba(0,0,0,.55);
  position:relative;display:block;width:min(680px,92vw);text-align:center;padding:.45rem 0;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.3rem,3.2vw,2.4rem);line-height:1.2;
  color:var(--cream);transition:color .4s;perspective:900px}
.overlay-nav a>*{will-change:transform}

.overlay-nav a span{display:inline-block}
.overlay-nav a:hover{color:var(--gold-lt)}

/* mot + clone empilés, chars retournés en 3D */
.hv-word{position:relative;display:inline-block;overflow:hidden;padding-block:.06em}
.hv-word .hv-clone{position:absolute;top:.06em;left:0;white-space:nowrap}
.hv-word .char{display:inline-block;transform-style:preserve-3d;will-change:transform,opacity}

/* image révélée qui suit le curseur */
.hover-reveal{
  position:absolute;top:0;left:0;z-index:-1;pointer-events:none;opacity:0;
  width:clamp(170px,15vw,240px);aspect-ratio:3/4}
.hover-reveal__inner{width:100%;height:100%;overflow:hidden}
.hover-reveal__img{width:100%;height:100%;background-size:cover;background-position:50% 50%;
  filter:saturate(.7) brightness(.95)}
@media(max-width:900px){ .hover-reveal{display:none} }
.overlay-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem 3.5rem;
  border-top:1px solid var(--line);padding-top:1.8rem;width:min(900px,100%)}
.overlay-foot a,.overlay-foot span:not(.kicker){font-size:.98rem;color:var(--cream)}
.overlay-foot .kicker{margin-bottom:.35rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(1.5rem,4vh,2.5rem);overflow:hidden}
.hero-media{position:absolute;inset:-12% 0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.04) brightness(.76)}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.24) 38%,rgba(0,0,0,.93) 100%)}
.hero-content{max-width:min(60rem,92vw);padding-bottom:clamp(3rem,9vh,7rem)}
.hero-kicker{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:clamp(1.2rem,3vh,2rem)}
/* le titre reste dans le DOM pour le référencement, mais c'est le logo qu'on voit */
.hero-title-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-mark-slot{width:min(38rem,72vw);aspect-ratio:3.447;margin-bottom:1.6rem}
.hero-sub{max-width:34rem;color:rgba(244,244,243,.84);margin-bottom:2.4rem}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.2rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,243,.7)}
.hero-foot-mid{color:var(--gold-lt)}
@media(max-width:640px){ .hero-foot span:last-child{display:none} }

/* ---------- B5 · Badge kinetic sur chemin SVG ---------- */
.badge{
  position:absolute;right:clamp(1.25rem,5vw,5.5rem);bottom:clamp(5rem,14vh,9rem);
  width:clamp(96px,11vw,146px);aspect-ratio:1;display:grid;place-items:center}
.badge > *{grid-area:1/1}
.badge::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.55) 40%,transparent 72%)}
.badge svg{position:relative;width:100%;height:100%;animation:badge-spin 22s linear infinite;color:var(--gold-lt)}
.badge text{font-family:var(--f-ui);font-size:13px;letter-spacing:.2em;fill:currentColor}
.badge-arrow{position:relative;font-size:1.1rem;color:var(--gold-lt);animation:badge-bob 2.6s var(--e) infinite}
@keyframes badge-spin{to{transform:rotate(360deg)}}
@keyframes badge-bob{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(4px);opacity:1}}
@media(max-width:900px){ .badge{display:none} }

/* ============================================================
   MANIFESTE — texte épinglé au centre, révélé mot à mot
   ============================================================ */
.manifesto{padding:0 var(--pad) var(--gap)}
.manifesto-pin{
  min-height:100svh;display:grid;place-items:center;
  padding-block:clamp(5.5rem,11vh,8rem) clamp(3rem,7vh,5rem)}
.manifesto-text{
  font-family:var(--f-display);font-weight:400;text-align:center;
  /* borné par la hauteur autant que par la largeur : la phrase entière
     doit tenir dans l'écran pendant qu'elle est épinglée */
  font-size:clamp(1.7rem, min(4.9vw, 8.4vh), 4.9rem);
  line-height:1.12;letter-spacing:-.005em;
  max-width:min(1340px,96vw);margin:0 auto}
.manifesto-text em{font-style:normal;color:var(--gold-dp)}
/* masque partagé par toutes les révélations mot à mot */
.w-mask{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}
.w{display:inline-block;will-change:transform,opacity}
.manifesto-text .w-mask{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.14em;margin-bottom:-.14em}
.manifesto-text .w{display:inline-block;will-change:transform,opacity}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:end;
  padding-top:clamp(3rem,8vh,7rem)}
.manifesto-figure{overflow:hidden;aspect-ratio:3/4;position:relative}
.manifesto-figure img{
  position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;
  transform:scale(1.14);will-change:transform}
.manifesto-side{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start;max-width:44ch}
.olive{width:clamp(110px,12vw,168px);opacity:.85;margin-bottom:.4rem}
@media(max-width:860px){ .manifesto-grid{grid-template-columns:1fr} }

.stats{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(3.5rem,9vw,7rem);border-top:1px solid var(--line-dark);padding-top:2.8rem}
.stats li{display:flex;flex-direction:column;gap:.4rem}
.stats li p{margin-top:.9rem;font-size:.9rem;line-height:1.55;color:var(--muted-dark);max-width:26ch}
.stats strong{font-family:var(--f-display);font-weight:400;font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1}
.stats small{font-size:.36em;margin-left:.15em}
.stats sup{font-size:.45em;vertical-align:super}
.stats span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
@media(max-width:760px){ .stats{grid-template-columns:1fr 1fr;gap:2.4rem 1.5rem} .stats li p{font-size:.82rem} }

/* ---------- Trois photos sous les chiffres ---------- */
.mf-photos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2.2rem);
  align-items:start;margin-top:clamp(3.5rem,9vw,7rem)}
.mf-photo{overflow:hidden}
.mf-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--e),filter .8s var(--e);filter:saturate(.85)}
.mf-photo:hover img{transform:scale(1.05);filter:saturate(1)}
.mf-photo--1{aspect-ratio:3/4}
.mf-photo--2{aspect-ratio:4/5;margin-top:clamp(2rem,6vw,5rem)}
.mf-photo--3{aspect-ratio:3/4;margin-top:clamp(1rem,3vw,2.5rem)}
@media(max-width:760px){
  .mf-photos{grid-template-columns:1fr 1fr;gap:.8rem}
  .mf-photo--3{grid-column:1/-1;aspect-ratio:16/10;margin-top:.8rem}
  .mf-photo--2{margin-top:1.6rem}
}

/* ============================================================
   MARQUEE EN ARC — texte sur chemin SVG + bascule blanc → noir
   Mécanique reprise de melinegobet.fr : le texte suit un arc,
   le bord courbe est le sommet d'un cercle géant rempli de la couleur suivante
   ============================================================ */
.arc{
  position:relative;overflow:hidden;background:var(--stone);
  padding-top:clamp(3rem,9vh,7rem)}
.arc-text{
  position:relative;display:block;width:100%;
  color:var(--gold-dp);text-decoration:none;
  font-family:var(--f-display);text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;user-select:none;
  font-size:clamp(2.6rem,9.6vw,8.6rem);line-height:1}
.arc-text svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;display:block}
.arc-text [data-arc-src]{opacity:0;display:block}
.arc-text:hover{color:var(--gold)}

/* le cercle géant : seul son sommet est visible, il forme le bord courbe */
.arc-circle-wrap{
  display:flex;justify-content:center;width:100%;height:12vh;
  transform:translateY(-6vh);pointer-events:none}
.arc-circle{
  width:600vw;min-width:600vw;height:600vw;min-height:600vw;
  border-radius:9999rem;background:var(--ink)}

@media(max-width:760px){
  .arc{padding-top:clamp(2rem,6vh,4rem)}
  .arc-circle-wrap{height:8vh;transform:translateY(-4vh)}
  .arc-circle{width:900vw;min-width:900vw;height:900vw;min-height:900vw}
}

/* ============================================================
   F2 · ESPACES — scroll horizontal pinné sur grille blueprint (A4)
   ============================================================ */
.spaces{background:var(--ink-2)}
.spaces-intro{padding:clamp(5rem,12vh,9rem) var(--pad) clamp(2.5rem,6vw,4rem)}
.h2-center{
  text-align:center;margin:0 auto;max-width:min(1280px,94vw);
  font-size:clamp(2.4rem, min(6.4vw, 11vh), 6rem);line-height:1.04}
.spaces-pin{
  overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(6rem,12vh,9rem) clamp(3rem,7vh,5rem)}
.spaces-track{display:flex;align-items:stretch;gap:clamp(9rem,32vw,500px);padding-inline:var(--pad);width:max-content;will-change:transform}
.space{
  flex:0 0 min(78vw,620px);display:grid;grid-template-rows:auto 1fr;gap:1.8rem;
  border-top:1px solid var(--line);padding-top:1.6rem}
.space-media{overflow:hidden;aspect-ratio:4/3}
.space-media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  transition:filter .7s var(--e);filter:saturate(.82) brightness(.92);will-change:object-position}
.space:hover .space-media img{filter:saturate(1) brightness(1)}
.space-index{font-size:.68rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:.8rem}
.space h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.55rem,2.7vw,2.25rem);line-height:1.12;margin-bottom:.6rem}
.space-size{color:var(--gold-lt);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.space-body p{color:rgba(244,244,243,.78);max-width:42ch}
.space-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.space-tags li{
  border:1px solid var(--line);border-radius:100px;padding:.42rem 1rem;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* ---------- Équipements : bloc épinglé, tout doit tenir dans l'écran ---------- */
.equip-sec{background:var(--ink)}
.equip-pin{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(.6rem,1.6vh,1.4rem);
  padding:clamp(5.5rem,11vh,8rem) var(--pad) clamp(3rem,6vh,4.5rem)}
.equip-title{
  text-align:center;
  font-size:clamp(1.7rem, min(4.6vw, 6.4vh), 3.6rem);line-height:1.06}
.equip-lead{max-width:46ch;color:rgba(244,244,243,.75);font-size:clamp(.9rem,1.6vh,1.05rem)}
.equip-list{
  list-style:none;display:flex;flex-direction:column;align-items:center;
  gap:clamp(.05rem,.35vh,.35rem);margin:clamp(.8rem,2.4vh,2rem) 0 clamp(1rem,2.8vh,2.2rem)}
.equip-list li{
  overflow:hidden;
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.05rem, min(2.7vw, 4.1vh), 2.4rem);line-height:1.14;
  color:var(--cream)}
.equip-list li span{display:block}
.equip-list li:nth-child(2n) span{color:var(--gold-lt)}
.equip-cta{align-self:center}
@media(max-width:760px){
  .equip-pin{min-height:0;gap:.5rem;padding-block:var(--gap)}
  .equip-list li{font-size:clamp(1.05rem,5.4vw,1.6rem)}
  .equip-list{gap:.15rem;margin:1.8rem 0 2.2rem}
}

/* sec-7 · sur mobile les espaces deviennent des cartes empilées collantes */
@media(max-width:860px){
  .spaces-pin{overflow:visible;display:block;min-height:0;padding-block:0 2rem}
  .spaces-track{display:block;width:auto;padding-bottom:2rem}
  .space{
    position:sticky;top:11vh;display:block;margin-bottom:1.2rem;
    background:var(--ink-3);border:1px solid var(--line);border-radius:4px;
    padding:1.4rem;box-shadow:0 -14px 40px rgba(0,0,0,.55)}
  .space-media{aspect-ratio:16/10;margin-bottom:1.4rem}
  .space-equip{padding-block:2rem}
}

/* ============================================================
   C7 · PANORAMA — mot masqué par la photo
   ============================================================ */
.panorama{position:relative;height:min(84vh,780px);overflow:hidden;display:grid;place-items:center}
.panorama-img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;filter:brightness(.6) saturate(.85)}
.panorama-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 18%,rgba(0,0,0,.86) 100%)}
.panorama-masked{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  font-family:var(--f-display);font-size:clamp(4rem,22vw,19rem);line-height:1;letter-spacing:.01em;
  background-image:url("assets/photo-8.webp");background-size:180% auto;background-position:center 28%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.9;pointer-events:none;white-space:nowrap}
.panorama-quote{
  position:relative;text-align:center;font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.55rem,4.4vw,3.8rem);line-height:1.14;letter-spacing:.02em;padding-inline:var(--pad)}
.panorama-quote em{font-style:normal;color:var(--gold-lt)}

/* ============================================================
   sec-9 · ÉVÉNEMENTS — accordéon
   ============================================================ */
.events{padding:clamp(5rem,12vh,9rem) var(--pad) var(--gap)}
.events .h2{margin-bottom:clamp(3.5rem,9vh,7rem)}
.accordion{border-top:1px solid var(--line-dark)}
.acc-item{border-bottom:1px solid var(--line-dark)}
.acc-head{
  position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(1rem,3vw,2.5rem);background:none;border:0;text-align:left;
  padding:clamp(1.7rem,3.6vw,2.8rem) 0;transition:color .35s;perspective:900px}
/* filet doré qui balaie la ligne au survol */
.acc-head::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold-dp);
  transform:scaleX(0);transform-origin:right;transition:transform .7s var(--e)}
.acc-head:hover::after{transform:scaleX(1);transform-origin:left}
.acc-head:hover .acc-title,.acc-head:hover .acc-num,.acc-head:hover .acc-meta{color:var(--gold-dp)}
.acc-num,.acc-meta{transition:color .45s var(--e)}
.acc-num{font-size:.68rem;letter-spacing:.2em;color:var(--muted-dark)}
.acc-title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.2rem, min(6.4vw, 9vh), 5.6rem);line-height:1.02;color:inherit;transition:color .45s var(--e)}
.acc-meta{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.acc-sign{position:relative;width:16px;height:16px;flex:none}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;background:currentColor;transition:transform .45s var(--e)}
.acc-sign::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%)}
.acc-sign::after{left:50%;top:0;height:100%;width:1px;transform:translateX(-50%)}
.acc-item.is-open .acc-sign::after{transform:translateX(-50%) scaleY(0)}
.acc-panel{height:0;overflow:hidden}
.acc-panel-in{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-bottom:clamp(2rem,4vw,3rem)}
.acc-text{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;max-width:52ch}
.acc-panel-in figure{overflow:hidden}
.acc-panel-in img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transform:scale(1.12);will-change:transform}
@media(max-width:820px){
  .acc-head{grid-template-columns:auto 1fr auto;row-gap:.4rem}
  .acc-meta{grid-column:2;font-size:.64rem}
  .acc-panel-in{grid-template-columns:1fr}
}

/* ---------- C5 · Duotone au repos, couleur au survol ---------- */
.duo{position:relative;overflow:hidden}
.duo img{filter:saturate(.35) sepia(.22) brightness(.9);transition:filter .7s var(--e),transform 1.1s var(--e)}
.duo::after{
  content:"";position:absolute;inset:0;background:var(--gold-dp);mix-blend-mode:color;
  opacity:.42;transition:opacity .7s var(--e);pointer-events:none}
.duo:hover img{filter:saturate(1) sepia(0) brightness(1);transform:scale(1.04)}
.duo:hover::after{opacity:0}

/* ============================================================
   TRANSITION BLANC → NOIR
   Une courbe d'encre qui gonfle par le bas jusqu'à couvrir la bande
   ============================================================ */
.shift{position:relative;height:clamp(38vh,44vh,460px);background:var(--stone);overflow:hidden}
.shift-ink{
  position:absolute;inset:0;background:var(--ink);
  clip-path:ellipse(72% 0% at 50% 100%);will-change:clip-path}

/* ============================================================
   A5 · TARIFS — grille, spotlight au curseur
   ============================================================ */
.pricing{background:var(--ink);padding:var(--gap) var(--pad)}
.pricing .h2{margin-bottom:clamp(3rem,8vh,6rem)}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.price{position:relative;background:var(--ink);padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:.7rem;overflow:hidden;isolation:isolate;min-height:clamp(20rem,42vh,26rem)}
/* un aplat d'or qui monte du bas et fait basculer la carte en négatif */
.price::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .6s var(--e)}
.price:hover::before{transform:scaleY(1)}
.price > *{transition:color .45s var(--e)}
.price:hover h3,.price:hover .price-amount strong{color:var(--ink)}
.price:hover .price-tag{color:rgba(0,0,0,.7)}
.price:hover .price-amount,.price:hover .price-desc{color:rgba(0,0,0,.78)}
.price:hover .price-link{color:var(--ink)}
.price-tag{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.price h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.05rem,1.75vw,1.4rem);line-height:1.2}
.price-amount{font-size:.82rem;color:var(--muted);letter-spacing:.06em}
.price-amount strong{font-family:var(--f-display);font-weight:400;
  font-size:clamp(2rem,3.4vw,2.8rem);color:var(--gold-lt);display:inline-block;margin-inline:.18em;line-height:1}
.price-desc{font-size:.9rem;color:rgba(244,244,243,.66);margin-top:auto;padding-top:1rem}
.price-link{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;margin-top:1rem;
  padding-bottom:.3rem;border-bottom:1px solid currentColor;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);
  transition:gap .35s var(--e)}
.price-link:hover{gap:1rem}
.price-feature{background:var(--gold);color:var(--ink)}
.price-feature::before{background:var(--ink)}
.price-feature:hover h3,.price-feature:hover .price-amount strong{color:var(--gold-lt)}
.price-feature:hover .price-tag{color:var(--gold)}
.price-feature:hover .price-amount,.price-feature:hover .price-desc{color:rgba(244,244,243,.78)}
.price-feature:hover .price-link{color:var(--gold-lt)}
.price-feature .price-tag,.price-feature .price-amount{color:rgba(0,0,0,.72)}
.price-feature .price-amount strong{color:var(--ink)}
.price-feature .price-desc{color:rgba(0,0,0,.78)}
.price-feature .price-link{color:var(--ink)}
.price-foot{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.8rem;margin-top:clamp(2.5rem,6vh,4rem)}
.price-note{max-width:60ch;color:var(--muted);font-size:.94rem}
@media(max-width:1000px){ .price-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .price-grid{grid-template-columns:1fr} .price{min-height:0} }

/* ============================================================
   GALERIE · deux rangées infinies en sens opposés
   Source : pack local +31 Scroll Animation / 20 (LoopScrolling)
   ============================================================ */
.gallery{background:var(--ink);padding:var(--gap) 0;overflow:hidden}
.gv-head{text-align:center;padding-inline:var(--pad);margin-bottom:clamp(3rem,8vh,6rem)}
.gv-hint{margin-top:1.2rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.gv-rows{display:flex;flex-direction:column;gap:clamp(.8rem,1.6vw,1.4rem)}
.gv-row{overflow:hidden}
.gv-line{display:flex;gap:clamp(.8rem,1.6vw,1.4rem);width:max-content;will-change:transform}
.gv-open{
  position:relative;flex:none;display:block;padding:0;border:0;background:none;cursor:pointer;
  width:clamp(230px,26vw,400px);overflow:hidden}
.gv-open img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:saturate(.45) sepia(.1) brightness(.82);
  transition:filter .7s var(--e),transform 1.2s var(--e)}
.gv-open:hover img{filter:saturate(1) sepia(0) brightness(1);transform:scale(1.06)}
.gv-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);
  opacity:0;translate:0 .6rem;transition:opacity .5s var(--e),translate .5s var(--e)}
.gv-open:hover .gv-cap{opacity:1;translate:0 0}
@media(max-width:620px){ .gv-open{width:62vw} }

/* visionneuse */
.gv-viewer{position:fixed;inset:0;z-index:9500;pointer-events:none;visibility:hidden}
.gv-viewer.is-open{pointer-events:auto;visibility:visible}
.gv-viewer-bg{position:absolute;inset:0;background:var(--ink);opacity:0}
.gv-viewer-img{position:absolute;object-fit:cover;will-change:transform,width,height,top,left;opacity:0}
.gv-viewer-cap{
  position:absolute;left:50%;bottom:clamp(1.6rem,4vh,3rem);translate:-50% 0;opacity:0;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 2px 18px rgba(0,0,0,.8)}
.gv-count{
  position:absolute;left:clamp(1.25rem,4vw,3rem);bottom:clamp(1.6rem,4vh,3rem);opacity:0;
  font-family:var(--f-display);font-size:1.1rem;color:var(--gold-lt)}
.gv-close{
  position:absolute;right:clamp(1.25rem,4vw,3rem);top:clamp(1.4rem,4vh,2.4rem);opacity:0;
  background:none;border:0;color:var(--cream);display:flex;align-items:center;gap:.6rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.gv-close span{font-size:1.3rem;line-height:1}
.gv-nav{
  position:absolute;top:50%;translate:0 -50%;opacity:0;
  width:clamp(2.8rem,4vw,3.6rem);aspect-ratio:1;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.25);
  color:var(--cream);cursor:pointer;backdrop-filter:blur(6px);
  transition:background .35s,border-color .35s,color .35s}
.gv-nav svg{width:45%;height:45%}
.gv-nav:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.gv-prev{left:clamp(1rem,3vw,2.5rem)}
.gv-next{right:clamp(1rem,3vw,2.5rem)}
@media(max-width:620px){ .gv-nav{display:none} }

/* ============================================================
   LES VENDREDIS DU CLOS · ouverture en cercle sur fond noir
   ============================================================ */
.fridays{background:var(--ink);overflow:hidden}
.fridays-stage{
  position:relative;height:100svh;display:grid;place-items:center;
  padding:clamp(5.5rem,11vh,8rem) var(--pad) clamp(3rem,7vh,5rem)}
.fridays-circle{
  position:absolute;inset:0;z-index:0;
  /* part d'un cadre centré et s'ouvre jusqu'à la pleine largeur */
  clip-path:inset(24% 32% 24% 32% round 3px);will-change:clip-path}
.fridays-circle img{will-change:transform}
.fridays-circle img{width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.55) contrast(1.15)}
.fridays-circle::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.85) 100%)}
.fridays-inner{
  position:relative;z-index:1;text-align:center;max-width:52rem;
  display:flex;flex-direction:column;align-items:center;gap:1.3rem}
.fridays-title{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:1.04;margin:.3rem 0 .4rem}
.fridays-lead{max-width:46ch;color:rgba(244,244,243,.86)}
.fridays-facts{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 3rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.5rem 0;margin:.6rem 0 .4rem;width:min(760px,100%)}
.fridays-facts li{min-width:9rem}
.fridays-facts strong{display:block;font-weight:400;font-size:1.05rem;color:var(--gold-lt);margin-bottom:.2rem}
.fridays-facts span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,243,.72)}
@media(max-width:760px){
  .fridays-stage{height:auto;min-height:100svh;padding-block:var(--gap)}
  .fridays-facts{gap:1.2rem 2rem}
  .fridays-facts li{min-width:7.5rem}
}

/* ============================================================
   sec-16 · CONTACT
   ============================================================ */
.contact{padding:calc(var(--gap) * 1.1) var(--pad) var(--gap);background:var(--ink-2)}
.contact-title{
  color:var(--gold-lt);letter-spacing:.02em;
  font-size:clamp(3rem, min(11vw, 16vh), 10rem);line-height:.98;margin-bottom:.4rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact-lead{color:rgba(244,244,243,.78);max-width:38ch;margin:1.6rem 0 2.6rem}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:1.6rem;
  border-top:1px solid var(--line);padding-top:1.8rem}
.contact-list a,.contact-list li>span:not(.kicker){display:block;margin-top:.4rem;font-size:1.06rem}
.contact-list a{transition:color .3s}
.contact-list a:hover{color:var(--gold-lt)}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.5rem;grid-column:1/-1}
.field-half{grid-column:auto}
.field label{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem 0;font-size:1rem;font-weight:400;transition:border-color .35s}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.35rem,calc(100% - 7px) 1.35rem;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--ink-2)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field ::placeholder{color:var(--muted-dark)}
.contact-form .btn{grid-column:1/-1;justify-self:start;margin-top:.6rem}
.form-note{grid-column:1/-1;font-size:.82rem;color:var(--gold-lt);min-height:1.2em}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr} }
@media(max-width:520px){ .field-half{grid-column:1/-1} }

/* ============================================================
   FOOTER — carte encartée dans une bande noire
   (layout d'après la référence fournie)
   ============================================================ */
.footer{background:var(--ink);padding:clamp(2.5rem,6vw,5rem) clamp(1rem,3vw,2.5rem) clamp(1rem,3vw,2.5rem)}
.footer-card{
  position:relative;overflow:hidden;border-radius:clamp(10px,1.4vw,20px);
  background:var(--stone);color:var(--stone-ink);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);
  padding:clamp(2rem,4vw,3.6rem) clamp(1.6rem,3.4vw,3.4rem) clamp(8rem,15vw,13rem)}

.footer-lead{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:34ch}
.footer-lead h2{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.04}
.footer-lead p{color:rgba(0,0,0,.62);font-size:.98rem}

/* gros bouton contact */
.footer-cta{
  display:inline-flex;align-items:center;gap:1.4rem;margin-top:.8rem;
  padding:1.1rem 1.3rem 1.1rem 2.2rem;border-radius:100px;
  background:var(--ink);color:var(--stone);
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .45s var(--e),color .45s var(--e)}
.footer-cta i{
  display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--gold);color:var(--ink);transition:transform .5s var(--e)}
.footer-cta i svg{width:1.15rem;height:1.15rem}
.footer-cta:hover{background:var(--gold-dp);color:var(--stone)}
.footer-cta:hover i{transform:translateX(4px)}

.footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-content:start}
.footer-cols > div{display:flex;flex-direction:column;gap:.55rem}
.footer-cols .kicker{color:rgba(0,0,0,.45);margin-bottom:.5rem}
.footer-cols a{font-size:.95rem;color:rgba(0,0,0,.78);transition:color .3s}
.footer-cols a:hover{color:var(--gold-dp)}

/* réseaux, en gros */
.footer-social{grid-column:1;display:flex;gap:.9rem;align-self:end}
.footer-social a{
  display:grid;place-items:center;width:clamp(3.2rem,4.6vw,4.4rem);aspect-ratio:1;
  border:1px solid rgba(0,0,0,.18);border-radius:50%;color:var(--stone-ink);
  transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
.footer-social a svg{width:45%;height:45%}
.footer-social a:hover{background:var(--ink);color:var(--gold-lt);border-color:var(--ink)}

/* logo géant qui déborde dans l'angle */
/* logo géant : plus gros, en or, entièrement dans la carte */
.footer-mark{
  position:absolute;right:clamp(1.6rem,3.4vw,3.4rem);bottom:clamp(1.4rem,2.6vw,2.4rem);
  width:min(52vw,660px);aspect-ratio:3.447;
  color:var(--gold-dp);opacity:1;pointer-events:none;z-index:0}

.footer-legal{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;
  position:absolute;z-index:2;left:clamp(1.6rem,3.4vw,3.4rem);bottom:clamp(1.2rem,2.4vw,2.2rem);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.45)}

@media(max-width:900px){
  .footer-card{grid-template-columns:1fr;padding-bottom:clamp(2rem,5vw,3rem)}
  .footer-social{grid-column:1}
  .footer-mark{position:static;width:min(78vw,420px);margin:2.5rem 0 0 auto;display:block}
  .footer-legal{position:static;margin-top:1.2rem}
}
@media(max-width:520px){
  .footer-cols{grid-template-columns:1fr}
}

/* ---------- Reveals ---------- */
[data-fade]{opacity:0;transform:translateY(18px)}
.rv{opacity:0;transform:translateY(26px)}
.rv-img{clip-path:inset(0 0 100% 0)}
.rv-img > img,.rv-img img{will-change:transform}
.reveal-mask{display:block;overflow:hidden}
[data-reveal-img]{clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-fade]{opacity:1;transform:none}
  [data-reveal-img]{clip-path:none}
  .manifesto-text .w{opacity:1;transform:none}
  .grain::before,.badge svg,.badge-arrow{animation:none}
  .cursor{display:none}
  body{cursor:auto}
  .preloader-logo{opacity:1}
}

/* ============================================================
   VERSION MOBILE — pensée pour le pouce, pas rétrécie du desktop
   ============================================================ */

/* --- Barre d'action collante : le geste le plus rentable sur mobile --- */
.mbar{display:none}
@media(max-width:760px){
  .mbar{
    position:fixed;left:0;right:0;bottom:0;z-index:940;
    display:grid;grid-template-columns:auto 1fr;gap:.6rem;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(0,0,0,.88);backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    transform:translateY(120%);will-change:transform}
  .mbar.is-on{transform:translateY(0)}
  .mbar-btn{
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    min-height:52px;border-radius:100px;
    font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
  .mbar-call{
    width:52px;flex:none;border:1px solid var(--gold);color:var(--gold-lt);padding:0}
  .mbar-call svg{width:22px;height:22px}
  .mbar-call span{display:none}
  .mbar-book{background:var(--gold);color:var(--ink);font-weight:400}
  /* la barre ne doit jamais masquer le bas du footer */
  .footer{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}

@media(max-width:760px){
  /* --- Cibles tactiles : 48px minimum partout --- */
  .btn,.pr-cta,.footer-cta,.text-link,.price-link{min-height:48px}
  .btn,.pr-cta,.footer-cta{padding-inline:1.8rem}
  /* toute cible tactile atteint 44px : on gagne en padding, pas en taille de texte */
  .burger{min-height:48px;min-width:48px;padding:0;margin-right:-.2rem;gap:0;justify-content:center}
  .overlay-nav a{width:100%;justify-content:center}
  .overlay-inner{padding-top:clamp(6.5rem,16vh,9rem)}
  .footer-cols a,.contact-list a,.overlay-foot a,.footer-top a{
    display:inline-flex;align-items:center;min-height:48px}
  /* la liste du footer devient longue avec des cibles de 48px : on resserre l'interligne */
  .footer-cols > div{gap:0}
  .contact-list{gap:1rem}
  .gv-close,.gv-nav{min-height:44px;min-width:44px;padding:.6rem}
  .price-link,.text-link{align-items:center}
  .overlay-nav a{padding-block:.55rem}
  .footer-social a{width:56px}
  .acc-head{padding-block:1.3rem}
  .field input,.field select,.field textarea{padding:.9rem 0;font-size:16px} /* 16px : pas de zoom auto iOS */

  /* --- Respiration : moins de vide, plus de contenu à l'écran --- */
  :root{--gap:clamp(3.2rem,9vh,5rem);--pad:1.15rem}
  .hero-content{padding-bottom:clamp(2rem,6vh,4rem)}
  .hero-sub{font-size:.98rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-actions .btn{justify-content:center}

  /* --- Titres : plus compacts, jamais coupés --- */
  .h2,.h2-center{font-size:clamp(1.8rem,8.4vw,2.8rem);line-height:1.08}
  .manifesto-text{font-size:clamp(1.35rem,6.4vw,2.1rem);line-height:1.18}
  .contact-title{font-size:clamp(2.6rem,15vw,4rem)}
  .pr-title,.acc-title{font-size:clamp(1.5rem,7.4vw,2.4rem)}
  .fridays-title{font-size:clamp(1.9rem,9vw,3rem)}
  .gv-head .h2{font-size:clamp(1.8rem,8.4vw,2.8rem)}

  /* --- Le badge tournant et le curseur n'ont pas de sens au doigt --- */
  .badge,.cursor{display:none}

  /* --- Galerie : rangées plus serrées --- */
  .gv-open{width:66vw}
  .gv-hint{display:none}

  /* --- Formulaire : une colonne, champs confortables --- */
  .contact-form{grid-template-columns:1fr}
  .field-half{grid-column:1/-1}

  /* --- Grain allégé : c'est le plus coûteux au repaint sur mobile --- */
  .grain::before{animation:none;opacity:.11}
  .grain::after{opacity:.05}
}

/* --- Très petits écrans --- */
@media(max-width:380px){
  .mbar-book{font-size:.72rem;letter-spacing:.08em}
  .equip-list li{font-size:clamp(.9rem,4.6vw,1.2rem)}
}