/* ============================================================
   EAT — Site one-page
   Section 1 : Hero plein écran avec slider de fond
   Section 2 : Services + Agence + Contact + Carte
   ============================================================ */

:root{
  --char:        #ece5d8;   /* panneau clair : Agence, footer, clients */
  --char-2:      #f5f1ea;   /* fond principal clair */
  --char-3:      #e4ddcf;
  --gold:        #b78a35;   /* doré profond, lisible sur fond clair */
  --gold-light:  #e8d88f;
  --gold-dark:   #ac9865;
  --bone:        #1a1714;   /* texte principal : anthracite/noir */
  --bone-dim:    #524d46;   /* texte secondaire */
  --ash:         #6f675e;   /* gris doux (footer) */
  --line:        rgba(26,20,16,.12);
  --line-strong: rgba(26,20,16,.20);
  --ease:        cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
html,body{ height:100%; overflow-x:hidden; max-width:100vw; }

body{
  background:var(--char-2);
  color:var(--bone);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* sécurité globale anti-débordement */
img,iframe,svg{ max-width:100%; }
*{ word-wrap:break-word; }

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; border-radius:4px; }

/* compense la topbar quand on cible une ancre */
section[id]{ scroll-margin-top:80px; }

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}

/* ============================================================
   TOPBAR FLOTTANTE (apparaît au scroll)
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,4vw,40px);
  background:rgba(11,8,7,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  opacity:0;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
body.is-scrolled .topbar{ transform:translateY(0); opacity:1; }

.topbar__brand img{
  height:32px; width:auto; display:block;
  user-select:none; -webkit-user-drag:none;
}

.topbar__nav{
  display:flex; align-items:center; gap:8px;
}
.topbar__nav a{
  font-family:"Oswald",sans-serif;
  text-transform:uppercase; letter-spacing:.18em;
  font-size:.78rem; font-weight:500;
  padding:8px 14px; border-radius:8px;
  color:var(--bone-dim);
  transition:color .25s, background .25s;
}
.topbar__nav a:hover{ color:var(--bone); background:rgba(244,239,231,.05); }

.topbar__cta{
  background:linear-gradient(150deg, var(--gold-light), var(--gold-dark)) !important;
  color:#1a140e !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
}
.topbar__cta:hover{
  background:linear-gradient(150deg, var(--gold-light), var(--gold)) !important;
}

/* ============================================================
   SECTION 1 : HERO
   ============================================================ */
.hero{
  position:relative;
  height:100svh; min-height:100svh;
  overflow:hidden;
  background:#000;
}

/* halo noir diffus derrière le contenu — concentre l'ombre sous le texte
   pour libérer le reste de l'image */
.hero::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:min(94vw, 980px);
  height:min(76vh, 640px);
  transform:translate(-50%,-50%);
  z-index:2;
  background:radial-gradient(
    ellipse at center,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.52) 38%,
    rgba(0,0,0,.22) 70%,
    rgba(0,0,0,0)   100%
  );
  filter:blur(42px);
  pointer-events:none;
}

.bgslider{ position:absolute; inset:0; z-index:0; background:#000; }
.bgslide{
  position:absolute; inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.6s var(--ease);
  will-change:opacity,transform;
}
.bgslide.is-active{
  opacity:1;
  animation:kenburns 11s linear forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.04) translate(0,0); }
  to  { transform:scale(1.14) translate(-1.2%,-0.8%); }
}

/* scrim allégé : on garde un dégradé haut/bas pour la marque et le foot,
   et on laisse l'image bien visible au centre (le halo prend le relais) */
.scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(11,8,7,.42) 0%, transparent 22% 65%, rgba(11,8,7,.85) 100%);
}
.grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__stage{
  position:relative; z-index:4;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  align-items:center; justify-items:center;
  padding:clamp(16px,3vw,40px) clamp(20px,5vw,56px) clamp(12px,2vh,24px);
  gap:clamp(12px,2.4vh,32px);
  min-height:0;
}
.hero__stage > *{ min-width:0; }

/* MARQUE */
.brand{ position:relative; }
.brand__logo{
  display:block;
  height: clamp(68px, 14vh, 110px);
  width:auto;
  filter:drop-shadow(0 8px 28px rgba(0,0,0,.6));
  user-select:none; -webkit-user-drag:none;
}

/* HERO CENTRAL */
.hero__center{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; max-width:960px; width:100%;
}

.hero__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.42em; font-size:clamp(.62rem,1vw + .4rem,.75rem);
  font-weight:500; color:var(--gold);
  margin-bottom:clamp(14px,2.5vh,26px);
}
.hero__line{ display:inline-block; width:clamp(28px,5vw,56px); height:1px;
  background:linear-gradient(to right, transparent, var(--gold-dark), transparent); }

.phrases{
  position:relative; width:100%;
  display:grid;            /* empilement par grille, hauteur auto */
}
.phrase{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  opacity:0; transform:translateY(10px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
.phrase.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }

.phrase__top{
  font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.025em;
  font-size:clamp(1.5rem,3.4vw + .4rem,2.8rem);
  color:var(--bone); line-height:1.05;
}
.phrase__bot{
  font-family:"Caveat", cursive; font-weight:700;
  font-size:clamp(2.6rem,5.8vw + .8rem,5.6rem);
  line-height:1.5; margin-top:-3%;
  background:linear-gradient(180deg,var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  /* le brush a un texte transparent : on passe par filter pour l'ombre */
  filter:
    drop-shadow(0 3px 10px rgba(0,0,0,.85))
    drop-shadow(0 0 22px rgba(0,0,0,.6))
    drop-shadow(0 6px 30px rgba(219,197,130,.35));
}
.phrase__sub{
  color:var(--bone-dim); font-size:clamp(.92rem,.55vw + .8rem,1.04rem);
  max-width:58ch; margin-top:clamp(10px,1.6vh,18px);
  line-height:1.55; font-family:"Oswald",sans-serif; text-transform: uppercase; font-weight: bold;
}

/* ombre portée renforcée pour mieux ressortir sur l'image */
.hero__eyebrow,
.phrase__top,
.phrase__sub{
  text-shadow:
    0 2px 8px  rgba(0,0,0,.92),
    0 0 20px   rgba(0,0,0,.72),
    0 0 40px   rgba(0,0,0,.50);
}

/* CTA */
.cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 24px; min-width:240px;
  border-radius:14px; cursor:pointer; border:0;
  font-family:"Inter",sans-serif;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s, border-color .25s;
}
.btn__ico{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.btn__label{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.btn__kicker{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.22em; font-size:.66rem; font-weight:500;
  opacity:.78; margin-bottom:3px;
}
.btn__main{ font-weight:600; font-size:1.02rem; letter-spacing:.01em; }

.btn--mail{
  background:linear-gradient(150deg, var(--gold-light), var(--gold-dark));
  color:#1a140e;
  box-shadow:0 16px 40px -16px rgba(219,197,130,.55),
             inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--mail:hover{ transform:translateY(-3px);
  box-shadow:0 24px 52px -16px rgba(219,197,130,.75),
             inset 0 1px 0 rgba(255,255,255,.5); }

.btn--tel{
  background:rgba(244,239,231,.06); color:var(--bone);
  border:1px solid var(--line); backdrop-filter:blur(8px);
}
.btn--tel:hover{ transform:translateY(-3px);
  border-color:rgba(219,197,130,.55); background:rgba(244,239,231,.10); }
.btn--tel .btn__ico{ stroke:var(--gold-light); }

/* HERO FOOT (catégorie + dots + scroll-cue) */
.hero__foot{
  width:100%; max-width:1280px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end; gap:18px;
  color:var(--ash);
}

.foot__cat{
  justify-self:start;
  display:flex; align-items:baseline; gap:12px;
  font-family:"Oswald",sans-serif;
}
.foot__catnum{
  font-size:.84rem; font-weight:600; letter-spacing:.1em;
  color:var(--gold);
}
.foot__catname{
  text-transform:uppercase; letter-spacing:.32em; font-size:.78rem;
  font-weight:500; color:var(--bone);
  position:relative; padding-left:16px;
}
.foot__catname::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:1px; background:var(--gold-dark);
}

.dots{
  justify-self:center;
  display:flex; gap:10px;
  align-self:center;
}
.dot{
  width:9px; height:9px; border-radius:50%; cursor:pointer; border:0; padding:0;
  background:rgba(244,239,231,.28); transition:all .35s var(--ease);
}
.dot:hover{ background:rgba(244,239,231,.55); }
.dot.is-active{ width:30px; border-radius:5px; background:var(--gold-light); }

/* SCROLL CUE (souris animée) */
.scroll-cue{
  justify-self:end;
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--bone-dim);
  cursor:pointer;
  transition:color .25s, transform .25s;
}
.scroll-cue:hover{ color:var(--gold-light); transform:translateY(-2px); }

.scroll-cue__mouse{
  position:relative;
  width:22px; height:36px;
  border:1.5px solid currentColor;
  border-radius:12px;
}
.scroll-cue__dot{
  position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:6px;
  background:var(--gold-light); border-radius:3px;
  animation:scrollDot 1.7s ease-in-out infinite;
}
@keyframes scrollDot{
  0%   { transform:translate(-50%, 0);    opacity:0; }
  30%  { opacity:1; }
  70%  { transform:translate(-50%, 16px); opacity:0; }
  100% { transform:translate(-50%, 16px); opacity:0; }
}
.scroll-cue__label{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.32em; font-size:.62rem; font-weight:500;
}

/* ============================================================
   BLOCS COMMUNS (Section 2)
   ============================================================ */
.block{
  position:relative;
  padding:clamp(70px,9vw,140px) 0;
  background:var(--char-2);
}
.block + .block{ padding-top:clamp(20px,3vw,60px); }

.block__head{ text-align:center; max-width:880px; margin:0 auto clamp(40px,5vw,70px); }
.block__head--left{ text-align:left; margin:0 0 clamp(28px,3vw,44px); }

.block__eyebrow{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.42em; font-size:clamp(.62rem,1vw + .4rem,.74rem);
  font-weight:500; color:var(--gold);
  margin-bottom:18px;
}

.block__title{
  display:flex; flex-direction:column; align-items:center;
  font-weight:500;
}
.block__head--left .block__title{ align-items:flex-start; }

.block__title-top{
  font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.025em;
  font-size:clamp(1.4rem,2.4vw + .4rem,2.3rem);
  color:var(--bone); line-height:1.05;
}
.block__title-bot{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:clamp(2.6rem,5vw + .8rem,4.8rem);
  line-height:1.2; margin-top:.04em;
  background:linear-gradient(180deg,var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 4px 22px rgba(219,197,130,.25));
}

.block__intro{
  color:var(--bone-dim); font-size:clamp(.96rem,.6vw + .85rem,1.08rem);
  max-width:80ch; margin:clamp(20px,2.4vw,30px) auto 0;
  line-height:1.65; text-align: justify;
}
.block__intro em{ color:var(--gold); font-style:normal; font-weight:bold; }

/* ============================================================
   SERVICES — 4 cartes
   ============================================================ */
.services{
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(219,197,130,.04) 0%, transparent 60%),
    var(--char-2);
}

.cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}

.card{
  position:relative;
  padding:clamp(24px,2vw,36px);
  background:linear-gradient(160deg, rgba(244,239,231,.04), rgba(244,239,231,.015));
  border:1px solid var(--line);
  border-radius:18px;
  transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(219,197,130,.40);
  background:linear-gradient(160deg, rgba(219,197,130,.07), rgba(244,239,231,.02));
}
.card:hover .card__ico{ color:var(--gold-light); }

.card__num{
  position:absolute; top:24px; right:28px;
  font-family:"Oswald",sans-serif; font-weight:600;
  font-size:.88rem; letter-spacing:.1em;
  color:var(--gold);
}

.card__ico{
  display:inline-flex;
  width:56px; height:56px;
  align-items:center; justify-content:center;
  color:var(--gold);
  margin-bottom:18px;
  transition:color .35s;
}
.card__ico svg{ width:100%; height:100%; }

.card__title{
  font-family:"Oswald",sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:1.32rem;
  color:var(--bone);
  margin-bottom:12px;
}

.card__desc{
  text-align: justify;
  color:var(--bone-dim);
  font-size:.96rem; line-height:1.6;
  margin-bottom:18px;
}

.card__tags{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
}
.card__tags li{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.18em; font-size:.66rem; font-weight:500;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--bone-dim);
}
.card__tags li.is-accent{
  border-color:rgba(219,197,130,.45);
  color:var(--gold);
}

/* ============================================================
   AGENCE
   ============================================================ */
.agency{
  background:var(--char);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.agency__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(40px, 6vw, 80px);
  align-items:start;
}

.agency__text p{
  text-align: justify;
  color:var(--bone-dim);
  font-size:clamp(1rem,.6vw + .9rem,1.1rem);
  line-height:1.75;
  margin-bottom:18px;
}
.agency__text p em{
  color:var(--gold);
  font-style:normal; font-weight:600;
}

.agency__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.stat{
  padding:24px;
  background:rgba(244,239,231,.03);
  border:1px solid var(--line);
  border-radius:14px;
}
.stat strong{
  display:block;
  font-family:"Oswald",sans-serif; font-weight:600;
  font-size:clamp(2rem,3vw + .6rem,2.8rem);
  background:linear-gradient(180deg,var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:6px;
  line-height:1;
}
.stat span{
  font-family:"Oswald",sans-serif; text-transform:uppercase;
  letter-spacing:.22em; font-size:.7rem; font-weight:500;
  color:var(--bone-dim);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 70px);
  align-items:stretch;
}

.contact__list{
  list-style:none;
  margin:clamp(16px,2vw,28px) 0 clamp(28px,3.5vw,40px);
}
.contact__list li{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:1.02rem;
  color:var(--bone);
  line-height:1.5;
}
.contact__list li:last-child{ border-bottom:0; }
.contact__list a{
  color:var(--bone);
  transition:color .25s;
}
.contact__list a:hover{ color:var(--gold-light); }
.contact__ico{
  width:22px; height:22px; flex:none;
  color:var(--gold);
  margin-top:2px;
}

.cta--inline{ justify-content:flex-start; }
.cta--inline .btn{ min-width:0; flex:1; }

.contact__map{
  position:relative;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  min-height:380px;
}
.contact__map iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  /* style sombre simulé */
  filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.95) saturate(.85);
}

/* ============================================================
   PAGE FOOTER
   ============================================================ */
.page-foot{
  background:#000;
  border-top:1px solid var(--line);
  padding:clamp(28px,3vw,40px) 0;
  color:var(--ash);
  font-size:.78rem;
  text-align:center;
}
.page-foot .container{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.page-foot__brand img{
  height:34px; width:auto; display:block;
  opacity:.9;
}
.page-foot__copy{ letter-spacing:.04em; }
.page-foot__addr{
  color:var(--bone-dim); letter-spacing:.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .topbar__nav a{ padding:7px 10px; font-size:.72rem; letter-spacing:.14em; }
  .topbar__brand img{ height:28px; }

  .cards{ gap:18px; }
  .agency__grid{ grid-template-columns:1fr; gap:36px; }
  .contact__grid{ grid-template-columns:1fr; gap:36px; }
  .contact__map{ min-height:340px; }
}

@media (max-width:760px){
  .topbar{ padding:10px 16px; }
  .topbar__nav{ gap:4px; }
  .topbar__nav a:not(.topbar__cta){ display:none; }
  .topbar__cta{ font-size:.7rem !important; padding:7px 12px !important; }

  .cards{ grid-template-columns:1fr; }
  .agency__stats{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat{ padding:18px; }
}

@media (max-width:680px){
  /* foot du hero : on garde une grille horizontale compacte
     (pas d'empilement vertical pour préserver la hauteur) */
  .hero__foot{
    grid-template-columns:auto 1fr auto;
    gap:10px;
  }
  .foot__catname{ letter-spacing:.22em; font-size:.66rem; }
  .foot__catname::before{ width:6px; }
  .scroll-cue__label{ display:none; }
}

@media (max-width:520px){
  .btn{ width:100%; min-width:0; }
  .cta{ width:100%; max-width:340px; flex-direction:column; }
  .cta--inline{ max-width:none; }
  .brand__logo{ height:80px; margin-top: 2em;}
  .hero__eyebrow{ letter-spacing:.28em; font-size:.72rem; margin-bottom: 8em; margin-top: 2em; text-shadow: none !important;}
  .hero__line{ width:20px; }
  .phrase__sub{ font-size:.95rem; max-width:34ch; margin-top: 3em; text-shadow: none !important;}
  .foot__catnum{ font-size:.74rem; }
  .foot__catname{ font-size:.6rem; padding-left:10px; }
  .phrase__top { font-size: clamp(1.8rem, 3.4vw + .4rem, 2.8rem); text-shadow: none !important;}
  .phrase__bot { font-size: clamp(3.8rem, 3.4vw + .4rem, 2.8rem); margin-top: -0.6em; text-shadow: none !important;}
}

/* === Hauteurs courtes (paysage mobile, mini écrans) === */
@media (max-height:780px){
  .hero__stage{ gap:clamp(10px,2vh,22px); padding-top:14px; padding-bottom:14px; }
  .brand__logo{ height:clamp(46px,7vh,72px); }
  .phrase__top{ font-size:clamp(1.3rem,2.8vw + .4rem,2.2rem); }
  .phrase__bot{ font-size:clamp(2.2rem,5vw + .6rem,4.4rem); }
  .phrase__sub{ font-size:clamp(.85rem,.4vw + .75rem,.96rem); margin-top:8px; }
  .hero__eyebrow{ margin-bottom:8px; }
  .btn{ padding:11px 18px; min-width:210px; }
  .btn__main{ font-size:.94rem; }
}

@media (max-height:620px){
  .hero__stage{ gap:8px; padding-top:10px; padding-bottom:10px; }
  .brand__logo{ height:90px; }
  .hero__eyebrow{ margin-bottom:4px; font-size:.58rem; letter-spacing:.28em; }
  .hero__line{ width:18px; }
  .phrase__top{ font-size:clamp(1.1rem,2.5vw,1.6rem); }
  .phrase__bot{ font-size:clamp(1.8rem,4.5vw,3rem); }
  .phrase__sub{ display:none; }       /* on libère de la hauteur */
  .btn{ padding:9px 14px; }
  .btn__kicker{ font-size:.58rem; margin-bottom:1px; }
  .btn__main{ font-size:.88rem; }
  .scroll-cue__mouse{ width:18px; height:28px; }
  @keyframes scrollDot{
    0%{ transform:translate(-50%,0); opacity:0; }
    30%{ opacity:1; }
    70%{ transform:translate(-50%,12px); opacity:0; }
    100%{ transform:translate(-50%,12px); opacity:0; }
  }
}

@media (max-height:480px){
  .hero__eyebrow{ display:none; }
  .brand__logo{ height:32px; }
  .phrase__top{ font-size:1rem; }
  .phrase__bot{ font-size:1.7rem; }
  .hero__stage{ gap:6px; padding-top:6px; padding-bottom:6px; }
  .cta{ gap:8px; }
  .btn{ padding:7px 12px; min-width:180px; }
  .scroll-cue{ gap:4px; }
  .scroll-cue__mouse{ width:16px; height:24px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .bgslide.is-active{ animation:none; transform:scale(1); }
  html{ scroll-behavior:auto; }
}

.hero__center{
  position:relative;
}

.hero__center::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:min(900px, 90vw);
  height:min(500px, 65vh);
  transform:translate(-50%,-50%);
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,.45) 30%,
    rgba(0,0,0,.25) 60%,
    rgba(0,0,0,0) 100%
  );
  filter:blur(20px);
}

/* ===== Slider logos clients (EAT) ===== */
.eat-clients {
  /* Reprend le fond sombre de la section "L'agence".
     Ajustez cette valeur si votre section #agence utilise une autre nuance. */
  --eat-bg: #0b0807;
  --eat-muted: #8a8580;        /* couleur du label "— ..." */
  --eat-speed: 38s;            /* durée du défilement (plus grand = plus lent) */
  --eat-logo-h: 44px;          /* hauteur des logos sur desktop */

  background: var(--eat-bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.eat-clients__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.eat-clients__label {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--eat-muted);
  text-transform: lowercase;
}

/* Conteneur masqué + fondus sur les bords */
.eat-marquee {
  margin-top: 2em;
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* La piste qui défile : 2 groupes côte à côte */
.eat-marquee__track {
  display: flex;
  width: max-content;
  animation: eat-scroll var(--eat-speed) linear infinite;
}

.eat-marquee:hover .eat-marquee__track {
  animation-play-state: paused; /* pause au survol */
}

.eat-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  margin: 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem) 0 0;
  list-style: none;
  flex-shrink: 0;
}

.eat-marquee__group li {
  display: flex;
  align-items: center;
}

.eat-marquee__group img {
  height: 8em;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  /* Logos uniformisés en clair sur fond sombre.
     Retirez ces 2 lignes si vos logos sont déjà en couleur/blanc. */
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.eat-marquee__group img:hover {
  opacity: 1;
  filter: none; /* couleur d'origine au survol */
}

/* Animation : on translate de la largeur d'un seul groupe (-50% du track) */
@keyframes eat-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Accessibilité : on coupe l'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .eat-marquee__track {
    animation: none;
  }
  .eat-marquee {
    overflow-x: auto;
  }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .eat-clients {
    --eat-logo-h: 32px;
    --eat-speed: 26s; /* défilement un peu plus rapide sur mobile */
  }
  .eat-marquee__group img {
  height: 5em;
}
}

@media (max-width: 480px) {
  .eat-clients {
    --eat-logo-h: 28px;
  }
}
@media (max-width:580px){
  .bgslide {
    background-color: #212120;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
    background-image: var(--img);
    background-size: 48em;
    background-position: center center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.6s var(--ease);
    will-change: opacity, transform;
  }
  .hero__center::before {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, 0) 100%);
  }
  .block__intro {
      font-size: 12px;
      line-height: 1.35;
  }
  .agency__text p {
      font-size: 12px;
      line-height: 1.35;
  }
  .card__desc {
    line-height: 1.3;
  }
  .card__tags {
    gap: 6px;
  }
}
/* ── Trait doré « crayon » sur l'en-tête de la section Agence ── */
#agence{ --pencil-gold:#C9A24B; }   /* ← remplacez par le doré EXACT de votre site */

#agence .block__head{ position:relative; }            /* repère pour le canvas */
#agence .block__head > *:not(.pencil-canvas){
  position:relative;
  z-index:1;                                          /* le texte reste au-dessus */
}
#agence .block__head .pencil-canvas{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;                                /* ne bloque jamais les clics */
}

/* ── Paragraphes d'intro ── */
#services .block__intro{
  opacity:0;
  transform: translate3d(0,26px,0);
  transition: opacity .7s ease, transform .7s ease;
  backface-visibility: hidden;
}
#services .block__intro.in-view{
  opacity:1;
  transform: translate3d(0,0,0);
}

/* ── Cartes : entrée gauche/droite ── */
#services .cards .card{
  opacity:0;
  transform: translate3d(var(--from, -48px),0,0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  backface-visibility: hidden;
}
#services .cards .card.in-view{
  opacity:1;
  transform: translate3d(0,0,0);
}
#services .cards{ overflow: clip; }

/* ── Section Agence : paragraphes + stats ── */
#agence .agency__text > p{
  opacity:0;
  transform: translate3d(0,26px,0);
  transition: opacity .7s ease, transform .7s ease;
  backface-visibility: hidden;
}
#agence .agency__text > p.in-view{
  opacity:1;
  transform: translate3d(0,0,0);
}

#agence .agency__stats .stat{
  opacity:0;
  transform: translate3d(var(--from, -40px),0,0);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  backface-visibility: hidden;
}
#agence .agency__stats .stat.in-view{
  opacity:1;
  transform: translate3d(0,0,0);
}
#agence .agency__stats{ overflow: clip; }

section#contact {
    margin-top: -1em;
}


/* ================================================================
   THÈME CLAIR — surcharges des couleurs codées en dur
   (les couleurs basées sur var() ont déjà basculé via :root)
   ================================================================ */

/* Topbar translucide claire */
.topbar{ background:rgba(245,241,234,.82); }
.topbar__nav a:hover{ background:rgba(26,20,16,.06); }

/* Hero : fonds clairs */
.hero{ background:var(--char-2); }
.bgslider{ background:var(--char-2); }

/* Halos de lisibilite : blancs (au lieu de noirs) pour faire ressortir le texte sombre */
.hero::before{
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.50) 38%,
    rgba(255,255,255,.22) 70%, rgba(255,255,255,0) 100%);
}
.hero__center::before{
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.50) 30%,
    rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 100%);
}
.scrim{
  background:linear-gradient(to bottom,
    rgba(245,241,234,.55) 0%, transparent 22% 65%, rgba(245,241,234,.90) 100%);
}

/* Logo + textes du hero : ombres claires */
.brand__logo{ filter:drop-shadow(0 8px 24px rgba(255,255,255,.32)); }
.hero__eyebrow,
.phrase__top,
.phrase__sub{
  text-shadow:
    0 1px 2px rgba(255,255,255,.95),
    0 0 14px  rgba(255,255,255,.70),
    0 0 28px  rgba(255,255,255,.50);
}
.phrase__bot{
  filter:
    drop-shadow(0 2px 8px  rgba(255,255,255,.95))
    drop-shadow(0 0 18px   rgba(255,255,255,.70))
    drop-shadow(0 6px 26px rgba(183,138,53,.40));
}

/* Boutons */
.btn--tel{ background:rgba(26,20,16,.04); }
.btn--tel:hover{ background:rgba(26,20,16,.08); border-color:rgba(183,138,53,.55); }

/* Dots du hero */
.dot{ background:rgba(26,20,16,.22); }
.dot:hover{ background:rgba(26,20,16,.45); }

/* Cartes services : panneaux blancs surélevés */
.card{
  background:linear-gradient(160deg, #ffffff, #fbf8f2);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.25);
}
.card:hover{
  border-color:rgba(183,138,53,.45);
  background:linear-gradient(160deg, rgba(216,178,90,.12), #ffffff);
}
.card__tags li.is-accent{ border-color:rgba(183,138,53,.50); }

/* Stats Agence */
.stat{ background:#ffffff; box-shadow:0 8px 24px -18px rgba(0,0,0,.25); }

/* Carte Google : on retire le mode sombre simule */
.contact__map{ background:var(--char); }
.contact__map iframe{ filter:none; }

/* Footer clair */
.page-foot{ background:var(--char); }

/* Slider logos clients : logos sombres sur fond clair */
.eat-clients{ --eat-bg:var(--char); --eat-muted:#6f675e; }
.eat-marquee__group img{ filter:grayscale(100%) brightness(0); opacity:.50; }
.eat-marquee__group img:hover{ filter:none; opacity:1; }

/* Placeholder de slide sur petits ecrans */
@media (max-width:580px){
  .bgslide{ background-color:#F8F8F8; }
      .hero__center::before {
        background: radial-gradient(ellipse at center, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 15%) 30%, rgb(255 255 255 / 10%) 60%, rgba(255, 255, 255, 0) 100%);
    }
}