/* ═══════════════════════════════════════════════════════════
   PRESTIGE AUTO ECOSERVICE — Casablanca
   Mouvement : image de hero fixe + parallax au scroll.
   Palette dérivée du logo (navy / bleu / rouge).
   ═══════════════════════════════════════════════════════════ */

:root{
  /* couleur */
  --ink:        #0B0E24;
  --ink-2:      #101538;
  --navy:       #281E5A;
  --navy-deep:  #15113A;
  --blue:       #2E7BC4;
  --blue-lt:    #6EBEE6;
  --red:        #E0000A;
  --paper:      #F3F5FA;
  --steel:      #96A0C2;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.16);

  /* type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Public Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rythme */
  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 11vw, 148px);

  /* motion */
  --ease: cubic-bezier(.22,.61,.24,1);
  --door: cubic-bezier(.76,0,.24,1);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html:focus-within{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture{ max-width:100%; display:block }
img{ height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3,p,ul,figure,table{ margin:0 }
ul{ padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

:focus-visible{
  outline:2px solid var(--blue-lt);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:8px; left:8px; z-index:999;
  padding:10px 16px; background:var(--red); color:#fff;
  font:600 14px/1 var(--body); border-radius:6px;
  transform:translateY(-160%);
}
.skip:focus{ transform:none }

.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto }

/* ── typographie ───────────────────────────────────────── */
.h2,.hero__title,.svc__title{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:'wdth' 112;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.94;
  text-wrap:balance;
}
.hero__title{ font-size:clamp(2.7rem,8.6vw,6.4rem); font-weight:900 }
.h2{ font-size:clamp(1.9rem,4.4vw,3.4rem) }
.h2--big{ font-size:clamp(2.2rem,6vw,4.6rem) }
.h2--sm{ font-size:clamp(1.6rem,3.2vw,2.4rem) }

.tag,.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-lt);
}
.tag{ margin-bottom:1.1rem }

/* ── boutons ───────────────────────────────────────────── */
.btn{
  --bg:var(--red); --fg:#fff;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6em;
  padding:1.05em 1.7em;
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:.86rem; font-weight:500;
  letter-spacing:.06em; white-space:nowrap;
  border-radius:3px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-110%);
  transition:transform .55s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(224,0,10,.7) }
.btn:hover::before{ transform:translateX(110%) }
.btn__ico{ font-size:1.05em; transform:translateY(-.03em) }
.btn--sm{ padding:.82em 1.35em; font-size:.86rem }
.btn--ghost{
  --bg:transparent; --fg:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--blue-lt); transform:translateY(-2px) }

/* ── bande tricolore (le mur de l'atelier) ─────────────── */
.stripe{ display:flex; height:6px; width:100% }
.stripe i{ display:block; height:100% }
.stripe i:first-child{ flex:1 0 66%; background:linear-gradient(90deg,var(--navy),var(--blue)) }
.stripe i:last-child{ flex:1 0 34%; background:var(--red) }

/* ═══ NAV ═══════════════════════════════════════════════ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:200;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
/* voile de lisibilité tant que la barre n'est pas figée */
.nav::before{
  content:''; position:absolute; inset:-1px 0 auto; height:130%; z-index:-1;
  background:linear-gradient(180deg, rgba(11,14,36,.72), transparent);
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(11,14,36,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line);
}
.nav.is-stuck::before{ opacity:0 }
.nav__inner{
  width:min(100% - var(--gut)*2, var(--wrap));
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:14px 0;
}
.nav__logo img{
  width:clamp(126px,13vw,168px);
  filter:brightness(0) invert(1);
  opacity:.96;
  transition:opacity .3s var(--ease);
}
.nav__logo:hover img{ opacity:1 }
.nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-inline-start:auto }
.nav__links a{
  position:relative;
  font-family:var(--mono); font-size:.95rem; font-weight:500; letter-spacing:.04em;
  color:#C4CBE2;
  padding:8px 0;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--red);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--paper) }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }
.burger{ display:none }

/* ═══ HERO ══════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:150px 0 0;
  isolation:isolate;
  overflow:hidden;
}
/* l'image reste fixe : le JS la décale de scrollY, .hero la clippe */
.hero__media{ position:absolute; inset:0; z-index:-2; will-change:transform }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 62% }
/* Le voile est solidaire de l'image (il suit le même translate) :
   sinon il glisse dessus au scroll et assombrit progressivement. */
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,14,36,.72) 0%, rgba(11,14,36,.20) 32%, rgba(11,14,36,.80) 88%, rgba(11,14,36,.94) 100%),
    linear-gradient(90deg, rgba(21,17,58,.70), transparent 60%);
}
.hero__body{
  width:min(100% - var(--gut)*2, var(--wrap));
  margin-inline:auto;
  padding-bottom:clamp(46px,7vw,86px);
}
.eyebrow{ display:flex; align-items:center; gap:.7em; margin-bottom:1.4rem }
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(224,0,10,.6);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 12px rgba(224,0,10,0) } 100%{ box-shadow:0 0 0 0 rgba(224,0,10,0) } }

.hero__title{ margin-bottom:1.5rem }
.hero__lede{
  max-width:44ch;
  font-size:clamp(1rem,1.5vw,1.2rem);
  color:#D6DCEF;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2.1rem }
.hero__status{
  display:flex; align-items:center; gap:.6em; margin-top:1.6rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--steel);
}
.dot{ width:8px; height:8px; border-radius:50%; background:var(--steel); flex:none }
.is-open .dot{ background:#28D07A; box-shadow:0 0 12px rgba(40,208,122,.8) }
.is-closed .dot{ background:var(--red) }

/* ═══ BANDEAU DÉFILANT ══════════════════════════════════ */
.ticker{
  position:relative; z-index:1;
  overflow:hidden;
  background:var(--navy-deep);
  border-block:1px solid var(--line);
  padding:9px 0;
}
/* --shift et --dur sont calculés en JS d'après le nombre de jeux
   clonés, pour que la boucle soit continue quelle que soit la largeur. */
.ticker__track{
  display:flex; width:max-content;
  --shift:-50%; --dur:34s;
  animation:slide var(--dur) linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker__set{ display:flex; align-items:center; gap:1.6rem; padding-inline-end:1.6rem; flex:none }
.ticker__set b{
  font-family:var(--display); font-weight:700; font-variation-settings:'wdth' 106;
  text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(.8rem,1.15vw,.95rem);
  color:rgba(243,245,250,.66);
  white-space:nowrap;
}
.ticker__set i{ color:var(--red); font-size:.48rem; font-style:normal }
@keyframes slide{ to{ transform:translateX(var(--shift)) } }

/* ═══ INTRO ═════════════════════════════════════════════ */
.intro{ padding:var(--sec) 0 0 }
.intro__grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,5vw,72px); align-items:end;
}
.intro__text p{ color:#C4CBE2; max-width:52ch }
.intro__text p + p{ margin-top:1rem }
.intro__text strong{ color:var(--paper); font-weight:600 }

.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin-top:clamp(44px,7vw,90px);
  background:var(--line);
  border-block:1px solid var(--line);
}
.fact{
  background:var(--ink);
  padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,30px);
  display:flex; flex-direction:column; gap:.35rem;
}
.fact__k{
  font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 110;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  color:var(--blue-lt);
}
.fact__v{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--steel); text-transform:uppercase }

/* ═══ PIÈCES & ATELIER MOBILE ═══════════════════════════ */
/* Prolonge la section prestations : pas de padding haut. */
.extra{ padding:0 0 var(--sec) }
.extra .h2{ margin-bottom:clamp(28px,4vw,44px) }
.extra__grid{
  display:grid; grid-template-columns:1.08fr 1fr;
  gap:clamp(30px,4.4vw,70px); align-items:center;
}
.extra__media{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  overflow:hidden;
}
.extra__media img{
  width:100%; height:auto; display:block;
  filter:saturate(.96);
}
.extra__list{
  display:grid; grid-template-columns:1fr;
  gap:clamp(24px,3.2vw,40px);
  width:100%;
}
.extra__item{
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);
}
.extra__t{
  font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 110;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
  font-size:clamp(1.3rem,2.2vw,1.75rem);
  margin-bottom:.9rem;
}
.extra__list p{ color:#C4CBE2; max-width:44ch }

/* ═══ PRESTATIONS ═══════════════════════════════════════ */
.services{ padding:var(--sec) 0 }
.services > .wrap:first-child{ margin-bottom:clamp(44px,6vw,80px) }

.svc{
  display:grid; grid-template-columns:1.08fr 1fr;
  gap:clamp(26px,4.4vw,70px); align-items:center;
  padding-block:clamp(34px,5vw,58px);
  border-top:1px solid var(--line);
}
.svc--flip .svc__media{ order:2 }
.svc__media{
  position:relative; overflow:hidden; border-radius:4px;
  aspect-ratio:3/2;
  background:var(--ink-2);
}
/* l'image est plus haute que son cadre : le surplus est la course du parallax */
.svc__media picture{
  position:absolute; inset:-11% 0;
  will-change:transform;
}
.svc__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9);
  transition:filter .6s var(--ease), transform 1.2s var(--ease);
}
.svc:hover .svc__media img{ filter:saturate(1.06); transform:scale(1.03) }
.svc__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(46,123,196,.16), transparent 55%);
}

.svc__title{ font-size:clamp(1.5rem,3vw,2.3rem); margin-bottom:.9rem }
.svc__txt{ color:#C4CBE2; max-width:46ch }
.svc__list{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.55rem }
.svc__list li{
  position:relative; padding-inline-start:1.5em;
  font-family:var(--mono); font-size:.79rem; letter-spacing:.03em; color:var(--steel);
}
.svc__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:9px; height:2px; background:var(--red);
}

/* ═══ AVIS GOOGLE ═══════════════════════════════════════ */
.avis{ padding:var(--sec) 0; background:linear-gradient(180deg, var(--ink), rgba(40,30,90,.28), var(--ink)) }
.avis__head{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,48px);
  align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(34px,5vw,60px);
}
.score{ display:grid; gap:.25rem; justify-items:start }
.score__n{
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 112;
  font-size:clamp(2.6rem,6vw,4.2rem); line-height:.9;
  color:var(--paper);
}
.score__stars{ color:#F5B301; font-size:1.15rem; letter-spacing:.16em }
.score__c{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--steel) }

.avis__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px) }
.avis__card{
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--line); border-radius:5px;
  background:rgba(11,14,36,.55);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.avis__card:hover{ border-color:var(--line-2); transform:translateY(-3px) }
.avis__stars{ color:#F5B301; font-size:.9rem; letter-spacing:.14em }
.avis__txt{ margin:0; color:#C4CBE2; font-size:.96rem; flex:1 }
.avis__who{
  display:flex; flex-wrap:wrap; gap:.2rem 1rem; align-items:baseline;
  padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
}
.avis__when{ color:#5D668A; font-size:.72rem }
.avis__more{ margin-top:clamp(24px,3vw,36px) }
.avis__more a{
  font-family:var(--mono); font-size:.84rem; letter-spacing:.05em;
  border-bottom:1px solid var(--line-2); padding-bottom:.3em;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.avis__more a:hover{ color:var(--blue-lt); border-color:var(--blue-lt) }

/* ═══ PRISE EN CHARGE ═══════════════════════════════════ */
.care{ position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; padding:var(--sec) var(--gut) }
.care__media{ position:absolute; inset:-12% 0; z-index:-2; will-change:transform }
.care__media img{ width:100%; height:100%; object-fit:cover }
.care::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(11,14,36,.96) 0%, rgba(21,17,58,.86) 46%, rgba(11,14,36,.35) 100%);
}
.care__panel{
  width:min(100%, 620px); margin-inline-end:auto;
  padding:clamp(26px,4vw,48px);
  background:rgba(21,17,58,.62);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-2);
  border-radius:5px;
}
.care__panel .h2{ margin-bottom:1.1rem }
.care__panel p{ color:#C4CBE2; margin-bottom:1.9rem; max-width:44ch }

/* ═══ HORAIRES + CONTACT ════════════════════════════════ */
.info{ padding:var(--sec) 0 }
.info__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(20px,2.6vw,34px) }
.card{
  padding:clamp(26px,3.6vw,46px);
  border:1px solid var(--line);
  border-radius:5px;
  background:linear-gradient(160deg, rgba(40,30,90,.42), rgba(11,14,36,.2));
}
.card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.status{ display:flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--steel) }

.hours{ width:100%; border-collapse:collapse; margin-top:.4rem }
.hours th,.hours td{
  padding:.72em 0; text-align:start; font-weight:400;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.82rem; letter-spacing:.02em;
}
.hours th{ color:#C4CBE2 }
.hours td{ text-align:end; color:var(--steel); font-variant-numeric:tabular-nums }
.hours tr:last-child th,.hours tr:last-child td{ border-bottom:0 }
.hours tr.is-off th,.hours tr.is-off td{ color:#5D668A }
.hours tr.is-today th{ color:var(--blue-lt) }
.hours tr.is-today td{ color:var(--paper) }
.hours tr.is-today th::before{
  content:''; display:inline-block; width:8px; height:2px;
  background:var(--red); vertical-align:middle; margin-inline-end:.7em;
}
.card__note{ margin-top:1.2rem; font-size:.78rem; color:#5D668A }

.card--contact .h2{ margin-bottom:2rem }
.contacts{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line) }
.contacts li{ background:var(--ink); padding:1.1rem .2rem; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center }
.contacts__k{
  flex:0 0 8.5rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.contacts__v{
  font-family:var(--display); font-weight:700; font-variation-settings:'wdth' 106;
  font-size:clamp(1rem,1.7vw,1.28rem);
  transition:color .25s var(--ease);
}
.contacts__v:hover{ color:var(--blue-lt) }
.arrow{ display:inline-block; margin-inline-start:.45em; font-size:.8em; color:var(--red) }

.socials{ display:flex; gap:10px; margin-top:1.8rem; flex-wrap:wrap }
.socials a{
  padding:.66em 1.15em;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  border:1px solid var(--line-2); border-radius:3px;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover{ border-color:var(--blue-lt); color:var(--blue-lt); transform:translateY(-2px) }

/* ═══ CARTE ═════════════════════════════════════════════
   Pleine largeur juste au-dessus du footer. Le filtre aligne
   la tuile Google (claire) sur le fond sombre du site. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.map{ position:relative; border-top:1px solid var(--line) }
.map__frame{
  display:block; width:100%; height:clamp(300px,40vw,460px); border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.75) contrast(.92);
}
.map__link{
  position:absolute; z-index:2;
  inset-block-start:clamp(16px,2.2vw,26px);
  inset-inline-start:clamp(16px,2.2vw,26px);
  padding:.72em 1.15em;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  border:1px solid var(--line-2); border-radius:3px;
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.map__link:hover{ border-color:var(--blue-lt); color:var(--blue-lt); transform:translateY(-2px) }

/* ═══ FOOTER ════════════════════════════════════════════ */
.foot{ background:var(--navy-deep) }
.foot__inner{ padding:clamp(38px,5vw,64px) 0; display:grid; gap:1.4rem }
.foot__logo{ width:150px; filter:brightness(0) invert(1); opacity:.8 }
.foot__meta{ color:var(--steel); font-size:.88rem }
.foot__copy{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:#5D668A }

/* ═══ WHATSAPP FLOTTANT ═════════════════════════════════
   Sous la barre de navigation (z-index 200) pour ne jamais
   passer au-dessus du menu mobile ouvert. */
.wa{
  position:fixed; z-index:190;
  right:clamp(16px,2.4vw,28px);
  bottom:clamp(16px,2.4vw,28px);
  display:grid; place-items:center;
  width:58px; height:58px;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.8);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:pulse 3.2s ease-out infinite;
}
.wa:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -12px rgba(37,211,102,.6) }
.wa__ico{ width:29px; height:29px; fill:currentColor }
.wa__label{
  position:absolute; right:calc(100% + 12px); top:50%;
  translate:0 -50%;
  padding:.6em .95em;
  background:var(--navy-deep); color:var(--paper);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em; white-space:nowrap;
  border:1px solid var(--line-2); border-radius:3px;
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wa:hover .wa__label,
.wa:focus-visible .wa__label{ opacity:1; transform:none }

/* ═══ ANIMATIONS AU SCROLL ══════════════════════════════
   Tous les états cachés sont préfixés .js : sans JavaScript
   la page reste entièrement lisible.                       */
.js .reveal-up{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal-up.is-in{ opacity:1; transform:none }

.line{ display:block; overflow:hidden; padding-bottom:.06em }
.js .line__in{
  display:block;
  transform:translateY(112%);
  transition:transform .95s var(--door);
}
.js .line.is-in .line__in{ transform:none }

/* médias : arrivée douce, le mouvement vient ensuite du parallax */
.js .reveal-media{
  opacity:0; transform:scale(1.04);
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
.js .reveal-media.is-in{ opacity:1; transform:none }

/* ═══ PARALLAX ══════════════════════════════════════════
   JS écrit --py (en px) ; le rendu reste purement CSS. */
.px{ transform:translate3d(0, var(--py,0px), 0) }

/* étages de décalage */
[data-d="1"]{ transition-delay:.09s }
[data-d="2"]{ transition-delay:.18s }
[data-d="3"]{ transition-delay:.27s }
[data-d="4"]{ transition-delay:.36s }
[data-d="5"]{ transition-delay:.45s }

/* le hero se joue au chargement, pas au scroll */
.js.is-ready .hero .reveal-up{ opacity:1; transform:none }
.js.is-ready .hero .line__in{ transform:none }

/* le contenu du hero s'estompe quand on descend */
.hero__body{ opacity:var(--fade,1) }

/* pendant un redimensionnement : on coupe les transitions pour
   éviter qu'un changement de breakpoint ne déclenche une animation */
.is-resizing *,.is-resizing *::before,.is-resizing *::after{
  transition:none !important;
}

/* ═══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1000px){
  .facts{ grid-template-columns:repeat(2,1fr) }
  .intro__grid{ grid-template-columns:1fr; align-items:start }
  .info__grid{ grid-template-columns:1fr }
  .svc{ grid-template-columns:1fr; gap:24px }
  .svc--flip .svc__media{ order:0 }
  .extra__grid{ grid-template-columns:1fr; gap:clamp(30px,4.6vw,48px) }
  .extra__media{ max-width:clamp(340px,58vw,520px); margin-inline:auto }
  .extra__list{ grid-template-columns:repeat(2,1fr); max-width:820px; margin-inline:auto }
  .avis__list{ grid-template-columns:repeat(2,1fr) }
}

/* La barre passe en menu plus tôt que le reste de la mise en page :
   logo + 5 liens + bouton saturent la ligne dès ~800px. */
@media (max-width:880px){
  .nav__links{
    position:fixed; inset:0 0 auto; top:0;
    flex-direction:column; gap:0;
    padding:96px var(--gut) 34px;
    background:var(--navy-deep);
    border-bottom:1px solid var(--line-2);
    box-shadow:0 26px 50px -22px rgba(0,0,0,.9);
    /* visibility garantit que le panneau fermé n'est jamais visible,
       même pendant une transition ou un changement de largeur */
    visibility:hidden;
    transform:translateY(-101%);
    transition:transform .55s var(--door), visibility 0s .55s;
    margin:0;
  }
  .nav__links.is-open{
    visibility:visible;
    transform:none;
    transition:transform .55s var(--door), visibility 0s;
  }
  .nav__links a{ font-size:1rem; padding:16px 0; border-bottom:1px solid var(--line) }
  .nav__cta{ margin-inline-start:auto }
  .burger{
    display:grid; gap:5px; width:34px; padding:6px 0; z-index:210;
  }
  .burger span{
    display:block; height:2px; width:100%; background:var(--paper);
    transition:transform .4s var(--door), opacity .25s linear;
  }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

}

@media (max-width:760px){
  .facts{ grid-template-columns:1fr }
  .extra__list{ grid-template-columns:1fr; gap:clamp(24px,6vw,32px) }
  .avis__list{ grid-template-columns:1fr }
  /* le bouton flottant ne doit pas recouvrir la mention légale */
  .foot__inner{ padding-bottom:calc(clamp(38px,5vw,64px) + 62px) }
  /* le cadrage vertical serré demande un voile plus franc */
  .hero__media img{ object-position:center 58% }
  .hero__media::after{
    background:linear-gradient(180deg,
      rgba(11,14,36,.80) 0%, rgba(11,14,36,.42) 28%,
      rgba(11,14,36,.88) 76%, rgba(11,14,36,.96) 100%);
  }
  .hero{ padding-top:120px }
  .contacts__k{ flex:1 0 100% }
  .care{ padding-inline:var(--gut) }
}

@media (max-width:420px){
  .nav__cta{ padding:.7em 1em; font-size:.72rem }
}

/* ═══ MOUVEMENT RÉDUIT ══════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto }
  .js .shutter{ display:none }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .js .reveal-up{ opacity:1; transform:none }
  .js .line__in{ transform:none }
  .js .wipe{ clip-path:none }
  .ticker__track{ animation:none }
}