/* =========================================================
   Julie Dugardin — Photographe
   Style inspiré de landonorris.com, identité cuivre/cream/noir chaud
   Serif display (Cormorant) + grotesque lourd (Archivo)
   ========================================================= */

:root{
  --cream:#f4f1ea;
  --cream-2:#ece5d8;
  --dark:#1a1714;          /* noir chaud (≈ sections sombres) */
  --dark-2:#24201b;
  --ink:#1d1a16;           /* texte sur clair */
  --ink-soft:#6f655a;
  --cuivre:#b08d57;        /* accent (remplace le vert citron) */
  --cuivre-clair:#c9a978;
  --line-dark:rgba(176,141,87,.28);   /* contours sur fond sombre */
  --line-light:rgba(29,26,22,.13);    /* contours sur fond clair */
  --bord:rgba(29,26,22,.12);

  --serif:'Cormorant Garamond', Georgia, serif;
  --grotesk:'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --max:1320px;
  --pad:clamp(1.2rem,4vw,4rem);
  --t:.6s cubic-bezier(.22,.61,.36,1);
  --t2:.9s cubic-bezier(.76,0,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--grotesk);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---- Typo ---- */
h1,h2,h3,h4{line-height:.98;font-weight:700}
.display{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.grotesk{font-family:var(--grotesk);font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
h2{font-size:clamp(2.2rem,6vw,5rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.eyebrow{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.35em;font-size:.66rem;font-weight:600;color:var(--cuivre);display:inline-block;margin-bottom:1.1rem}
p{color:var(--ink-soft);font-weight:400}
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(4rem,9vw,8.5rem);position:relative}
.center{text-align:center}
.lead{font-size:1.1rem;max-width:60ch;margin-inline:auto}

/* =======================================================
   Fond animé (contours topographiques + blobs) — façon Rive
   ======================================================= */
.bg-anim{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-anim .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7;mix-blend-mode:multiply}
.bg-anim .b1{width:42vw;height:42vw;left:-8vw;top:8vh;background:radial-gradient(circle,#e4d8c2,transparent 70%);animation:float1 22s ease-in-out infinite}
.bg-anim .b2{width:34vw;height:34vw;right:-6vw;bottom:-6vh;background:radial-gradient(circle,#e9dcc6,transparent 70%);animation:float2 27s ease-in-out infinite}
.bg-anim .lines{position:absolute;inset:-15% -10%;width:120%;height:130%;opacity:1;animation:drift 40s linear infinite}
.bg-anim .lines path{fill:none;stroke:var(--line-light);stroke-width:1.6}
/* variante sombre */
.is-dark .bg-anim .blob{mix-blend-mode:screen;opacity:.32}
.is-dark .bg-anim .b1{background:radial-gradient(circle,#3a3020,transparent 70%)}
.is-dark .bg-anim .b2{background:radial-gradient(circle,#2e2a20,transparent 70%)}
.is-dark .bg-anim .lines path{stroke:var(--line-dark)}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-5vh) scale(1.12)}}
@keyframes drift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(-3%,2%) rotate(2deg)}}
.section > .container,.hero > *,.page-banner > *{position:relative;z-index:1}
.page-banner .bg-anim,.hero .bg-anim{z-index:0}

/* =======================================================
   Header minimal (nom à gauche · logo centre · actions droite)
   ======================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;justify-content:space-between;align-items:start;
  padding:1.5rem var(--pad);transition:var(--t);}
.site-header.scrolled{padding-block:.9rem;background:rgba(244,241,234,.86);backdrop-filter:blur(12px);align-items:center}
.theme-dark .site-header.scrolled{background:rgba(26,23,20,.86)}

/* Nom géant haut-gauche (se réduit au scroll) */
.brand-name{font-family:var(--serif);line-height:.82;color:var(--ink);transition:var(--t);text-transform:uppercase}
.brand-name .l1{display:block;font-weight:500;font-size:clamp(1.6rem,3.4vw,3rem);letter-spacing:.01em}
.brand-name .l2{display:block;font-family:var(--grotesk);font-weight:800;font-size:clamp(1.3rem,2.8vw,2.4rem);letter-spacing:-.02em}
.scrolled .brand-name .l1{font-size:clamp(1.1rem,1.6vw,1.3rem)}
.scrolled .brand-name .l2{font-size:clamp(.95rem,1.4vw,1.15rem)}
.theme-dark .brand-name{color:var(--cream)}

/* Logo centre */
.brand-mark{justify-self:center}
.brand-mark img{height:54px;width:54px;transition:var(--t)}
.scrolled .brand-mark img{height:40px;width:40px}

/* Actions droite */
.header-actions{justify-self:end;display:flex;align-items:center;gap:.7rem}
.pill{font-family:var(--grotesk);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  background:var(--cuivre);color:var(--dark);padding:.85em 1.5em;border-radius:10px;transition:var(--t);display:inline-flex;align-items:center;gap:.5em}
.pill:hover{background:var(--ink);color:var(--cream)}
.theme-dark .pill:hover{background:var(--cream);color:var(--dark)}
.pill--ghost{background:transparent;color:var(--cuivre);border:1px solid rgba(176,141,87,.45)}
.pill--ghost:hover{background:rgba(176,141,87,.12);color:var(--cuivre)}
.theme-dark .pill--ghost{color:var(--cuivre-clair);border-color:rgba(176,141,87,.35)}
.theme-dark .pill--ghost:hover{background:rgba(176,141,87,.12);color:var(--cuivre-clair)}
.menu-toggle{width:48px;height:48px;border:1px solid var(--bord);border-radius:10px;background:rgba(255,255,255,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:var(--t)}
.theme-dark .menu-toggle{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.menu-toggle span{width:20px;height:2px;background:currentColor;color:var(--ink);transition:var(--t)}
.theme-dark .menu-toggle span{color:var(--cream)}
.menu-toggle:hover{background:var(--cuivre);border-color:var(--cuivre)}
.menu-toggle:hover span{color:var(--dark)}

/* =======================================================
   Menu overlay plein écran (façon Lando)
   ======================================================= */
.overlay-menu{position:fixed;inset:0;z-index:200;background:var(--dark);color:var(--cream);
  display:grid;grid-template-columns:1.3fr 1fr;align-items:center;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.76,0,.24,1);visibility:hidden}
body.menu-open .overlay-menu{clip-path:inset(0 0 0% 0);visibility:visible}
.overlay-menu .om-close{position:absolute;top:1.5rem;right:var(--pad);width:48px;height:48px;border:1px solid rgba(255,255,255,.2);
  border-radius:10px;background:none;color:var(--cream);font-size:1.3rem;cursor:pointer;transition:var(--t)}
.overlay-menu .om-close:hover{background:var(--cuivre);color:var(--dark);border-color:var(--cuivre)}
.om-links{padding:0 var(--pad)}
.om-links a{display:block;font-family:var(--serif);font-size:clamp(2.4rem,6vw,4.6rem);font-weight:500;line-height:1.18;color:var(--cream);
  text-transform:uppercase;letter-spacing:-.01em;transition:var(--t);opacity:.85}
.om-links a:hover{color:var(--cuivre-clair);padding-left:1.2rem;opacity:1}
.om-side{padding:0 var(--pad);border-left:1px solid rgba(255,255,255,.1);align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.om-side .eyebrow{color:var(--cuivre-clair)}
.om-side a.txt{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;color:#cfc6ba;display:block;padding:.3rem 0}
.om-side a.txt:hover{color:var(--cuivre-clair)}
@media(max-width:760px){.overlay-menu{grid-template-columns:1fr}.om-side{display:none}}

/* =======================================================
   HERO (clair, sans photo : logo au centre)
   ======================================================= */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;
  background:var(--cream);overflow:hidden;padding:6rem var(--pad)}
.hero-center{position:relative;z-index:1;text-align:center}
.hero-center .logo-big{width:clamp(220px,30vw,360px);height:auto;aspect-ratio:1/1;filter:drop-shadow(0 20px 50px rgba(26,23,20,.12));
  animation:heroPop 1.3s var(--t) both}
.hero-center .hero-word{font-family:var(--serif);text-transform:uppercase;letter-spacing:.5em;font-size:.8rem;color:var(--cuivre);
  margin-top:1.4rem;margin-bottom:0;font-weight:600;line-height:1.4;animation:fadeUp 1.2s .3s var(--t) both}
@keyframes heroPop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}

/* Carte info bas-gauche (façon NEXT RACE) */
.hero-card{position:absolute;left:var(--pad);bottom:2rem;z-index:2;width:150px;
  border:1px solid var(--bord);border-radius:14px;padding:1rem .9rem;text-align:center;background:rgba(255,255,255,.45);backdrop-filter:blur(4px);
  animation:fadeUp 1.2s .5s var(--t) both}
.hero-card .cap{font-family:var(--grotesk);font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-soft)}
.hero-card .pin{margin:.6rem auto;width:36px;height:36px;color:var(--cuivre)}
.hero-card .big{font-family:var(--serif);font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin-top:.2rem}
.hero-card .small{font-family:var(--grotesk);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;line-height:1.5}
@media(max-width:680px){.hero-card{display:none}}

/* Indice de scroll */
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--grotesk);font-size:.58rem;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scroll-hint::after{content:"";width:1px;height:38px;background:linear-gradient(var(--cuivre),transparent);animation:scrollLine 2s infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =======================================================
   Boutons
   ======================================================= */
.btn{display:inline-block;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;
  padding:1.05em 2.4em;border:1px solid var(--cuivre);color:var(--cuivre);background:transparent;cursor:pointer;
  position:relative;overflow:hidden;transition:var(--t);border-radius:10px}
.btn::after{content:"";position:absolute;inset:0;background:var(--cuivre);transform:scaleX(0);transform-origin:left;transition:var(--t);z-index:-1}
.btn:hover{color:var(--cream)}
.btn:hover::after{transform:scaleX(1)}
.btn--solid{background:var(--cuivre);color:var(--dark)}
.btn--solid::after{background:var(--ink)}
.btn--solid:hover{color:var(--cream)}
.btn--light{border-color:var(--cream);color:var(--cream)}
.btn--light::after{background:var(--cream)}
.btn--light:hover{color:var(--dark)}

/* =======================================================
   Sections sombres
   ======================================================= */
.dark{background:var(--dark);color:var(--cream)}
.dark .eyebrow{color:var(--cuivre-clair)}
.dark h2,.dark h3{color:var(--cream)}
.dark p{color:#cfc6ba}

/* Grandes catégories empilées */
.bigcats .lead-head{margin-bottom:1.5rem}
.bigcat{display:flex;align-items:center;gap:1rem;padding:clamp(1.4rem,3.6vw,2.6rem) 0;border-bottom:1px solid rgba(255,255,255,.12);transition:var(--t);position:relative}
.bigcats .bigcat:first-of-type{border-top:1px solid rgba(255,255,255,.12)}
.bigcat .idx{font-family:var(--grotesk);font-size:.68rem;letter-spacing:.3em;color:var(--cuivre);width:3rem;flex:none}
.bigcat .title{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,7vw,5rem);line-height:.9;color:var(--cream);transition:var(--t);flex:1;text-transform:uppercase}
.bigcat .arrow{color:var(--cuivre);font-size:1.5rem;opacity:.4;transition:var(--t)}
.bigcat:hover{padding-inline:clamp(.4rem,1.6vw,1.4rem)}
.bigcat:hover .title{color:var(--cuivre-clair)}
.bigcat:hover .arrow{opacity:1;transform:translateX(8px)}

/* =======================================================
   Grilles & cartes
   ======================================================= */
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{border:1px solid var(--bord);border-radius:14px;padding:2.6rem 2rem;background:rgba(255,255,255,.4);transition:var(--t)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(26,23,20,.35);border-color:var(--cuivre)}
.card .num{font-family:var(--serif);font-size:2.4rem;color:var(--cuivre);opacity:.55;display:block;margin-bottom:.5rem}
.card h3{margin-bottom:.6rem}
.card p{font-size:.95rem}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
@media(max-width:850px){.split{grid-template-columns:1fr}}
.split .media{aspect-ratio:4/5;background:var(--cream-2);border-radius:14px;position:relative;overflow:hidden}
.media-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:var(--grotesk);font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;text-align:center;padding:1rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);color:var(--cuivre);line-height:1}
.stat .l{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.22em;font-size:.62rem;color:var(--ink-soft);margin-top:.6rem}
.dark .stat .l{color:#cfc6ba}

/* =======================================================
   Portfolio
   ======================================================= */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:3rem}
.filters button{font-family:var(--grotesk);font-weight:600;background:none;border:1px solid var(--bord);border-radius:10px;
  padding:.7em 1.5em;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;cursor:pointer;color:var(--ink-soft);transition:var(--t)}
.filters button.active,.filters button:hover{background:var(--cuivre);color:var(--dark);border-color:var(--cuivre)}
.gallery{columns:3;column-gap:1rem}
@media(max-width:900px){.gallery{columns:2}}
@media(max-width:560px){.gallery{columns:1}}
.gallery .tile{break-inside:avoid;margin-bottom:1rem;position:relative;overflow:hidden;border-radius:12px}
.gallery .tile .ph{aspect-ratio:var(--ar,3/4);width:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#d8c6ab,#b08d57);font-family:var(--grotesk);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:#fff8ee;transition:var(--t)}
.gallery .tile::after{content:attr(data-cat);position:absolute;inset:auto 0 0 0;padding:.8rem 1rem;background:linear-gradient(transparent,rgba(26,23,20,.7));color:#fff;font-family:var(--grotesk);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;opacity:0;transition:var(--t)}
.gallery .tile:hover::after{opacity:1}
.gallery .tile:hover .ph{transform:scale(1.06)}
/* Vraies photos dans la galerie portfolio teaser */
/* height:auto est indispensable dès qu'une image porte des attributs
   width/height : sans lui, la hauteur de l'attribut est appliquée telle
   quelle et la photo est étirée. */
.gallery .tile img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.gallery .tile:hover img{transform:scale(1.06)}
.gallery .tile a{display:block;overflow:hidden}

/* =======================================================
   Marquee serif (façon "WE DID IT")
   ======================================================= */
.marquee{overflow:hidden;background:var(--dark);padding:2.6rem 0;position:relative}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-track .item{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;white-space:nowrap}
.marquee-track .serif{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(2.2rem,6vw,4.5rem);color:var(--cuivre-clair);text-transform:uppercase}
.marquee-track .grot{font-family:var(--grotesk);font-weight:800;font-size:clamp(2rem,5.5vw,4rem);color:var(--cream);text-transform:uppercase;letter-spacing:-.02em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =======================================================
   Prestations
   ======================================================= */
.price{border:1px solid var(--bord);border-radius:14px;padding:2.6rem 2rem;background:rgba(255,255,255,.5);transition:var(--t);display:flex;flex-direction:column}
.price.featured{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.price.featured h3,.price.featured .amount{color:var(--cream)}
.price.featured p,.price.featured li{color:#cfc6ba}
.price:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(26,23,20,.4)}
.price .tag{font-family:var(--grotesk);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--cuivre);margin-bottom:1rem}
.price .amount{font-family:var(--serif);font-size:2.6rem;margin:.3rem 0 1.4rem}
.price .amount small{font-size:.85rem;color:var(--ink-soft)}
.price ul{list-style:none;margin:0 0 2rem;flex:1}
.price li{padding:.55rem 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:.9rem;display:flex;gap:.6rem;align-items:flex-start}
.price.featured li{border-color:rgba(255,255,255,.1)}
.price li::before{content:"—";color:var(--cuivre)}

/* =======================================================
   Formulaires
   ======================================================= */
.form{display:grid;gap:1.3rem;max-width:640px;margin-inline:auto}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--grotesk);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:var(--grotesk);font-size:.95rem;padding:.9rem 1rem;border:1px solid var(--bord);border-radius:10px;background:rgba(255,255,255,.6);color:var(--ink);transition:var(--t)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cuivre)}
.field textarea{min-height:140px;resize:vertical}

/* Espace client */
.login-wrap{max-width:440px;margin:0 auto;text-align:center}
.login-card{border:1px solid var(--bord);border-radius:16px;padding:3rem 2.4rem;background:rgba(255,255,255,.5)}
.login-card .lock{width:52px;height:52px;margin:0 auto 1.4rem;color:var(--cuivre)}
.hidden{display:none}
.note{font-family:var(--grotesk);font-size:.78rem;color:var(--ink-soft);margin-top:1.2rem}

/* Réseaux */
.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:3rem}
@media(max-width:800px){.insta-grid{grid-template-columns:repeat(2,1fr)}}
.insta-grid a{position:relative;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#24201b;display:block}
.insta-grid .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2520,#3a322a);color:#7d7568;font-family:var(--grotesk);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;transition:var(--t)}
.insta-grid a:hover .ph{transform:scale(1.06);color:var(--cuivre-clair)}
.insta-grid a::before{content:"";position:absolute;inset:0;background:rgba(176,141,87,0);transition:var(--t);z-index:1}
.insta-grid a:hover::before{background:rgba(176,141,87,.16)}
.social-handles{display:flex;gap:2rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap}
.social-handles a{display:flex;align-items:center;gap:.6rem;color:#cfc6ba;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;transition:var(--t)}
.social-handles a:hover{color:var(--cuivre-clair)}
.social-handles svg{width:20px;height:20px;fill:currentColor}

/* Réseaux — éventail (façon "What's up on socials") */
.social-fan{display:flex;justify-content:center;align-items:flex-end;margin:.5rem auto 0;min-height:clamp(220px,28vw,380px);max-width:1100px}
.fan-card{position:relative;flex:0 0 auto;width:clamp(96px,13vw,180px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  margin-inline:clamp(-26px,-2vw,-14px);transform-origin:bottom center;cursor:pointer;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.65);outline:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(80px) rotate(0deg) scale(.9);transition:transform 1s var(--t2),opacity .8s ease,filter .4s ease}
.social-fan.in .fan-card{opacity:1;transform:rotate(var(--rot,0deg)) translateY(var(--ty,0))}
.social-fan.in .fan-card.center{transform:rotate(0deg) translateY(-14px) scale(1.18)}
.social-fan.in .fan-card:nth-child(1){transition-delay:.04s}
.social-fan.in .fan-card:nth-child(2){transition-delay:.10s}
.social-fan.in .fan-card:nth-child(3){transition-delay:.16s}
.social-fan.in .fan-card:nth-child(4){transition-delay:.22s}
.social-fan.in .fan-card:nth-child(5){transition-delay:.16s}
.social-fan.in .fan-card:nth-child(6){transition-delay:.10s}
.social-fan.in .fan-card:nth-child(7){transition-delay:.04s}
.fan-card:nth-child(1),.fan-card:nth-child(7){z-index:1}
.fan-card:nth-child(2),.fan-card:nth-child(6){z-index:2}
.fan-card:nth-child(3),.fan-card:nth-child(5){z-index:3}
.fan-card.center{z-index:4}
.fan-card .ph{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:.8rem;
  background:linear-gradient(160deg,#2a2520,#6f5631 60%,#c9a978);color:#fff8ee;font-family:var(--grotesk);font-size:.55rem;
  letter-spacing:.18em;text-transform:uppercase;transition:transform .5s var(--t)}
.fan-card::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(176,141,87,0);transition:var(--t)}
.social-fan.in .fan-card:hover{transform:rotate(var(--rot,0deg)) translateY(-22px) scale(1.06);z-index:20;filter:brightness(1.08)}
.social-fan.in .fan-card.center:hover{transform:rotate(0deg) translateY(-26px) scale(1.22);z-index:20}
.fan-card:hover::before{background:rgba(176,141,87,.16)}
.fan-card:hover .ph{transform:scale(1.05)}
@media(max-width:560px){
  .social-fan{flex-wrap:wrap;justify-content:center;gap:.6rem;min-height:0}
  .fan-card{width:30%;margin-inline:0;opacity:1!important}
  .social-fan .fan-card,.social-fan.in .fan-card,.social-fan.in .fan-card.center{transform:none!important}
}

/* Témoignage (legacy) */
.quote{max-width:52ch;margin:0 auto;text-align:center}
.quote p{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.2rem);color:var(--ink);font-style:italic;line-height:1.4}
.dark .quote p{color:var(--cream)}
.quote .who{margin-top:1.4rem;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.25em;font-size:.68rem;color:var(--cuivre)}

/* ---- Avis Google ---- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
@media(max-width:900px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reviews-grid{grid-template-columns:1fr}}
.review-card{background:rgba(255,255,255,.55);border:1px solid var(--bord);border-radius:14px;
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:1rem;transition:var(--t)}
.review-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px -20px rgba(26,23,20,.2)}
.review-stars{color:var(--cuivre);font-size:1rem;letter-spacing:.05em}
.review-text{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--ink);
  line-height:1.55;flex:1}
.review-text::before{content:'\201C';margin-right:.15em}
.review-text::after{content:'\201D';margin-left:.15em}
.review-author{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.review-author img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(176,141,87,.3)}
.review-author-info{display:flex;flex-direction:column;gap:.1rem}
.review-author-name{font-family:var(--grotesk);font-size:.78rem;font-weight:700;color:var(--ink)}
.review-author-time{font-family:var(--grotesk);font-size:.65rem;color:var(--ink-soft)}
.reviews-source{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1.8rem;font-family:var(--grotesk);font-size:.68rem;color:var(--ink-soft)}
.reviews-source svg{flex-shrink:0}

/* Bannière pages internes */
.page-banner{position:relative;overflow:hidden;background:var(--dark);color:var(--cream);text-align:center;padding:12rem var(--pad) 6rem}
.page-banner h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,8vw,6rem);text-transform:uppercase;color:var(--cream);letter-spacing:-.01em}
.page-banner p{color:#cfc6ba;max-width:54ch;margin:1.2rem auto 0}
.page-banner .eyebrow{color:var(--cuivre-clair)}

h1.hero-h1{font-family:var(--serif)}

/* =======================================================
   Footer
   ======================================================= */
.site-footer{background:var(--dark);color:#cfc6ba;padding:5rem var(--pad) 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;max-width:var(--max);margin:0 auto}
@media(max-width:750px){.footer-grid{grid-template-columns:1fr;gap:2rem}}
.site-footer h4{color:var(--cream);font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;margin-bottom:1.2rem;font-weight:600}
.site-footer a{color:#cfc6ba;font-size:.9rem;display:block;padding:.3rem 0;transition:var(--t)}
.site-footer a:hover{color:var(--cuivre-clair)}
.footer-brand .fb-name{font-family:var(--serif);font-size:1.8rem;text-transform:uppercase;color:var(--cream);line-height:.9;margin-bottom:1rem}
.footer-brand .fb-name b{display:block;font-family:var(--grotesk);font-weight:800;font-size:1.4rem;letter-spacing:-.02em}
.footer-brand p{font-size:.9rem;max-width:34ch}
.footer-bottom{max-width:var(--max);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--grotesk);font-size:.7rem;color:#8a8076;letter-spacing:.08em}

/* =======================================================
   Couche premium : loader, curseur, transitions, reveals
   ======================================================= */
.loader{position:fixed;inset:0;z-index:1000;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;transition:opacity .8s ease,visibility .8s ease}
/* height:auto est indispensable des que l'image porte des attributs
   width/height : sans lui la hauteur de l'attribut s'applique telle
   quelle et le logo est etire. */
.loader img{width:110px;height:auto;aspect-ratio:1/1;animation:pulse 2s ease-in-out infinite}
.loader .loader-name{font-family:var(--serif);color:var(--ink);letter-spacing:.4em;font-size:1rem;text-transform:uppercase}
.loader .bar{width:160px;height:1px;background:rgba(29,26,22,.12);position:relative;overflow:hidden}
.loader .bar::after{content:"";position:absolute;inset:0;background:var(--cuivre);transform:translateX(-100%);animation:load 1.6s ease forwards}
.loader .count{position:absolute;bottom:2.2rem;right:2.4rem;font-family:var(--serif);font-size:clamp(3rem,12vw,7rem);color:var(--cuivre);line-height:1}
.loader .count::after{content:"%";font-size:.4em;vertical-align:super;margin-left:.1em;color:var(--ink)}
@keyframes load{to{transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
body.loaded .loader{opacity:0;visibility:hidden}

.hero-center .logo-big,.hero-center .hero-word,.hero-card{animation-play-state:paused}
body.loaded .hero-center .logo-big,body.loaded .hero-center .hero-word,body.loaded .hero-card{animation-play-state:running}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--t),transform .9s var(--t)}
.reveal.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* Curseur */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:difference;will-change:transform}
.cursor-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px}
.cursor-ring{width:40px;height:40px;border:1px solid rgba(255,255,255,.7);margin:-20px 0 0 -20px;transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s}
.cursor-ring.grow{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(176,141,87,.2);border-color:transparent}
body.cursor-on,body.cursor-on a,body.cursor-on button{cursor:none}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}body.cursor-on{cursor:auto}}

/* Aperçu catégories */
.cat-preview{position:fixed;top:0;left:0;width:260px;height:330px;z-index:60;pointer-events:none;opacity:0;border-radius:12px;
  transform:translate(-50%,-50%) scale(.82) rotate(-3deg);transition:opacity .45s var(--t),transform .55s var(--t);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.cat-preview .pv{position:absolute;inset:0;background:linear-gradient(160deg,#24201b,#8a6a3f 55%,#c9a978)}
.cat-preview .pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.cat-preview .pv-label{position:absolute;bottom:0;left:0;right:0;padding:.9rem 1.2rem;background:linear-gradient(transparent,rgba(26,20,12,.75));color:#fff8ee;font-family:var(--serif);font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase}
.cat-preview.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}

/* Transition de page */
.page-transition{position:fixed;inset:0;z-index:1500;background:var(--dark);display:flex;align-items:center;justify-content:center;transform:translateY(100%);pointer-events:none;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.page-transition img{width:84px;opacity:0;transition:opacity .4s ease}
.page-transition.cover{transform:translateY(0)}
.page-transition.cover img{opacity:1}
.page-transition.out{transform:translateY(-100%)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero-center .logo-big,.hero-center .hero-word,.hero-card{opacity:1!important}
  .bg-anim,.cursor-dot,.cursor-ring,.cat-preview,.page-transition{display:none!important}
  body.cursor-on{cursor:auto}}

/* Spécialités cliquables dans la colonne du menu.
   La couleur est posée en ligne dans le HTML pour que l'apparence reste
   identique même si cette feuille est encore en cache : le !important
   n'est là que pour permettre au survol de reprendre la main. */
.om-side .om-spe:hover{color:var(--cuivre-clair)!important}