/* ═══════════════════════════════════════════════════════════════
   L'HÉLICE — Grignan
   Style « bistrot de place » : bicolore franc vert store / crème,
   textures tirées du vrai décor (mur chaulé, boiseries de pin, rayures
   du store), laiton en accent.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Vert du store de la façade */
  --vert:        #174A3B;
  --vert-fonce:  #0E2E25;
  --vert-nuit:   #081C17;
  --vert-clair:  #6FAE93;
  --menthe:      #9CCFB6;   /* les tabourets Tolix de la salle */

  /* Laiton — les liserés, les chiffres */
  --laiton:       #C99A3E;
  --laiton-clair: #E7C271;

  /* Crème calcaire — jamais de blanc pur */
  --creme:    #F4EEE1;
  --creme-2:  #E7DEC9;
  --creme-3:  #D9CDB2;

  /* Noir doux de l'ardoise */
  --ardoise-noir: #1C1F1C;

  --texte:       #22271F;
  --texte-doux:  #6A705F;
  --texte-clair: #EDE7DA;
  --texte-clair-2: #A9B8AC;

  --ombre-vert:  rgba(14, 46, 37, .30);
  --ombre-douce: rgba(28, 31, 28, .10);

  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease-smooth:   cubic-bezier(.25,.46,.45,.94);
  --ease-elastic:  cubic-bezier(.68,-.55,.265,1.55);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-ressort:  cubic-bezier(.34,1.56,.64,1);   /* rebond court, au relâchement */
  --ease-doux:     cubic-bezier(.23,1,.32,1);      /* sortie très amortie */

  --radius: 6px;
  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 10vw, 132px);
  --nav-h: 68px;
}

/* ─────────── Base ─────────── */
*,*::before,*::after{ box-sizing:border-box; }
/* Pas de scroll-behavior:smooth ici : sur un saut de 8000 px le
   défilement natif dure plusieurs secondes. La durée est bornée en JS. */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height:1.72;
  color:var(--texte);
  background:var(--vert-nuit);
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.06; margin:0; letter-spacing:-.01em;
  font-variation-settings:'opsz' 20; }
p{ margin:0 0 1.15em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(100% - 2*var(--pad), var(--wrap)); margin-inline:auto; }
.section{ padding-block:var(--sec-y); position:relative; }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:2000;
  background:var(--laiton); color:var(--vert-nuit);
  padding:.7rem 1.1rem; border-radius:var(--radius); font-weight:600;
  transition:top .25s var(--ease-out-expo);
}
.skip-link:focus{ top:12px; }

::selection{ background:var(--laiton); color:var(--vert-nuit); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--vert-nuit); }
::-webkit-scrollbar-thumb{ background:var(--vert); border-radius:9px; border:3px solid var(--vert-nuit); }
::-webkit-scrollbar-thumb:hover{ background:var(--vert-clair); }

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

/* Grain cinéma */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px; opacity:.035;
}

/* ─────────── Typographie partagée ─────────── */
.label{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--vert); margin:0 0 1.1rem;
}
.label--clair{ color:var(--laiton-clair); }
.label::before{
  content:''; display:inline-block; width:26px; height:1px; margin-right:.7rem;
  vertical-align:.28em; background:currentColor; opacity:.6;
}
.titre{ font-size:clamp(2rem, 1.2rem + 3.6vw, 3.65rem); margin-bottom:1.1rem; }
.titre em{ font-style:italic; color:var(--vert); }
.titre--clair{ color:var(--creme); }
.titre--clair em{ color:var(--laiton-clair); }
.chapeau{
  font-size:clamp(1.05rem, 1rem + .4vw, 1.22rem);
  color:var(--texte-doux); max-width:56ch;
}
.chapeau--clair{ color:var(--texte-clair-2); }
.entete{ margin-bottom:clamp(2.4rem, 5vw, 3.6rem); }
.entete--centre{ text-align:center; }
.entete--centre .label::before{ display:none; }
.entete--centre .chapeau{ margin-inline:auto; }

.lien-souligne{
  text-decoration:none; border-bottom:1px solid var(--laiton);
  padding-bottom:2px; font-weight:500;
  transition:border-color .3s var(--ease-smooth), color .3s var(--ease-smooth);
}
.lien-souligne:hover,.lien-souligne:focus-visible{ color:var(--vert); border-color:currentColor; }

/* ─────────── Boutons ─────────── */
.btn{
  --x:50%; --y:50%;
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.5rem; border:1px solid transparent; border-radius:var(--radius);
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease-ressort), box-shadow .3s var(--ease-doux), background-color .2s var(--ease-doux);
}
.btn:active{ transform:scale(.955); transition-duration:.09s; }
.btn--primary{ background:var(--laiton); color:var(--vert-nuit); box-shadow:0 6px 20px -8px rgba(201,154,62,.7); }
.btn--primary:hover,.btn--primary:focus-visible{ background:var(--laiton-clair); transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(201,154,62,.85); }
.btn--outline{ background:transparent; border-color:rgba(244,238,225,.42); color:var(--creme); }
.btn--outline:hover,.btn--outline:focus-visible{ border-color:var(--creme); background:rgba(244,238,225,.09); }
.btn--glow::before{
  content:''; position:absolute; inset:-40%; z-index:-1; opacity:0;
  background:radial-gradient(160px circle at var(--x) var(--y), rgba(255,255,255,.55), transparent 60%);
  transition:opacity .35s var(--ease-smooth);
}
.btn--glow:hover::before{ opacity:1; }

/* Pouls discret sur l'appel à l'action principal */
@keyframes pouls{
  0%,100%{ box-shadow:0 6px 20px -8px rgba(201,154,62,.7), 0 0 0 0 rgba(201,154,62,.42); }
  60%    { box-shadow:0 6px 20px -8px rgba(201,154,62,.7), 0 0 0 12px rgba(201,154,62,0); }
}
.nav__actions .btn--primary{ animation:pouls 3s cubic-bezier(.4,0,.6,1) 2.4s infinite; }
.nav__actions .btn--primary:hover,
.nav__actions .btn--primary:focus-visible{ animation-play-state:paused; }

/* ═══════════════════ NAVIGATION ═══════════════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--nav-h);
  transition:background-color .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}
/* Une fois le hero passé, la barre se contracte en pilule flottante */
.nav__inner{
  width:min(100% - 2*var(--pad), 1320px); margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:1.4rem;
  border-radius:0; padding-inline:0;
  background:transparent;
  transition:background-color .45s var(--ease-doux), box-shadow .45s var(--ease-doux),
             border-radius .45s var(--ease-doux), transform .45s var(--ease-doux);
  will-change:transform;
}
.nav--scrolled .nav__inner{
  transform:scale(.955) translateY(.4rem);
  border-radius:100px;
  background:rgba(8,28,23,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(244,238,225,.10) inset, 0 16px 34px -20px rgba(0,0,0,.85);
}
.nav--scrolled{ height:calc(var(--nav-h) + .55rem); }
/* la pilule a une respiration interne sans toucher a la boite */
.nav--scrolled .nav__logo{ padding-left:1.1rem; }
.nav--scrolled .nav__actions{ padding-right:.6rem; }
.nav__logo,.nav__actions{ transition:padding .45s var(--ease-doux); }

/* L'étiquette prend la place du nom : elle annonce la section en cours */
.nav__section{
  display:inline-block; max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--laiton-clair);
  opacity:0; transform:translateY(6px);
  transition:max-width .5s var(--ease-doux), opacity .3s var(--ease-doux),
             transform .4s var(--ease-ressort), margin-left .5s var(--ease-doux);
}
.nav--section .nav__section{ max-width:22ch; opacity:1; transform:none; margin-left:.7rem; }
.nav__section::before{
  content:''; display:inline-block; width:16px; height:1px; margin-right:.6rem;
  vertical-align:.3em; background:currentColor; opacity:.5;
}
.nav--section .nav__nom{ opacity:.45; transition:opacity .4s var(--ease-doux); }
.nav__logo{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--creme); margin-right:auto;
}
.nav__helice{ width:30px; height:27px; flex:none; }
.nav__pales{ transform-box:fill-box; transform-origin:50% 50%; }
.nav__logo:hover .nav__pales{ animation:tourne 2.6s linear infinite; }
.nav__helice.tourne-vite .nav__pales{ animation:tourne .38s linear 10; }
@keyframes tourne{ to{ transform:rotate(360deg); } }
.nav__nom{
  font-family:var(--serif); font-size:1.28rem; font-weight:600;
  letter-spacing:.02em; white-space:nowrap;
}
.nav__links{ display:flex; gap:1.6rem; }
.nav__links a{
  position:relative; text-decoration:none; color:var(--texte-clair);
  font-size:.79rem; font-weight:500; text-transform:uppercase; letter-spacing:.11em;
  transition:color .3s var(--ease-smooth);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--laiton); transition:width .35s var(--ease-out-expo);
}
.nav__links a:hover,.nav__links a:focus-visible{ color:var(--laiton-clair); }
.nav__links a:hover::after,.nav__links a:focus-visible::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:.85rem; }
.nav__ico{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--texte-clair); border:1px solid rgba(244,238,225,.22);
  transition:color .3s, border-color .3s, transform .3s var(--ease-out-expo);
}
.nav__ico svg{ width:17px; height:17px; }
.nav__ico:hover,.nav__ico:focus-visible{ color:var(--laiton-clair); border-color:var(--laiton); transform:translateY(-2px); }

.nav__burger{
  display:none; width:42px; height:42px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:0;
}
.nav__burger span{
  display:block; width:22px; height:2px; background:var(--creme); border-radius:2px;
  transition:transform .4s var(--ease-out-expo), opacity .25s;
}
.nav__burger.ouvert span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.ouvert span:nth-child(2){ opacity:0; }
.nav__burger.ouvert span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__menu-mobile{ display:none; }

/* ═══════════════════ HERO — rideau sticky ═══════════════════ */
.hero{
  position:sticky; top:0; z-index:0;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 42%, rgba(23,74,59,.9), transparent 70%),
    linear-gradient(180deg, #0B241D 0%, var(--vert-nuit) 60%, #061511 100%);
  overflow:hidden; padding:var(--nav-h) var(--pad) clamp(40px,8vh,90px);
  text-align:center;
}
.hero__halos{ position:absolute; inset:0; pointer-events:none; }
.halo{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--laiton) 0%, transparent 70%);
  mix-blend-mode:screen;
}
.halo--1{ width:60vmin; height:60vmin; left:8%; top:12%; opacity:.13; animation:halo-drift 26s var(--ease-smooth) infinite alternate; }
.halo--2{ width:48vmin; height:48vmin; right:6%; bottom:8%; opacity:.10;
  background:radial-gradient(circle, var(--vert-clair) 0%, transparent 70%);
  animation:halo-drift 34s var(--ease-smooth) 2s infinite alternate-reverse; }
.halo--3{ width:70vmin; height:70vmin; left:50%; top:-14%; transform:translateX(-50%); opacity:.09;
  animation:halo-drift 30s var(--ease-smooth) infinite alternate; }
@keyframes halo-drift{
  from{ transform:translate(-8%,-4%) scale(1); }
  to{ transform:translate(10%,6%) scale(1.18); }
}

.hero__inner{ position:relative; z-index:1; will-change:transform,opacity; }
.hero__visual{ display:flex; justify-content:center; }
/* le logo de la maison, seul, au centre */
.hero__svg{ width:clamp(230px, 38vw, 420px); height:auto; overflow:visible;
}
.hero__nom{ margin:0; }
.hero__place{
  font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.28em;
  color:var(--texte-clair-2); margin:clamp(1.8rem,4.5vh,3rem) 0 0;
}

/* Entrée : le logo monte depuis le bas, puis la ligne de lieu */
.js .hero__visual{ opacity:0; transform:translateY(90px); animation:monte 1.3s var(--ease-out-expo) .15s forwards; }
.js .hero__place{ opacity:0; transform:translateY(24px); animation:monte .9s var(--ease-out-expo) .95s forwards; }
@keyframes monte{ to{ opacity:1; transform:none; } }

/* main = le rideau qui recouvre le hero */
main{
  position:relative; z-index:1;
  background:var(--creme);
  border-radius:28px 28px 0 0;
  box-shadow:0 -24px 60px rgba(6,21,17,.5);
}

/* ═══════════════════ RÉVÉLATION MOT À MOT ═══════════════════ */
/* Le texte s'éclaire mot par mot au fil du défilement. */
.mots{ --avancee:0; }
.js .mot{
  display:inline-block;
  opacity:.26;
  transition:opacity .32s var(--ease-doux);
}
.js .mot.allume{ opacity:1; }
.section--carte .js .mot,
.section--avis  .js .mot{ opacity:.22; }

/* ═══════════════════ LA MAISON ═══════════════════ */
.section--maison{ background:var(--creme); border-radius:28px 28px 0 0; }
/* texture : le grain du mur chaulé, pas de damier */
.section--maison::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(0deg,
    rgba(28,31,28,.035) 0 1px, transparent 1px 7px);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 55%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 55%);
}
.maison__grid{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:clamp(2.4rem,5vw,4.5rem); align-items:center;
}
@media (min-width:920px){ .maison__grid{ grid-template-columns:1.05fr .95fr; } }

.badges{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2rem; }
.badges li{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .95rem; border:1px solid var(--creme-3); border-radius:100px;
  background:rgba(255,255,255,.55);
  font-size:.78rem; font-weight:500; letter-spacing:.03em; color:var(--vert);
  transition:transform .3s var(--ease-elastic), border-color .3s, background-color .3s;
}
.badges li:hover{ transform:translateY(-3px); border-color:var(--laiton); background:#fff; }
.badges li:active{ transform:scale(.96); transition-duration:.09s; }
.badges svg{ width:16px; height:16px; flex:none; }

.maison__media{ position:relative; }
.cadre{ margin:0; overflow:hidden; border-radius:var(--radius); background:var(--creme-2); }
.cadre--haut{ box-shadow:0 30px 70px -34px var(--ombre-vert); }
.cadre--haut img{ aspect-ratio:4/5; object-fit:cover; object-position:50% 42%; }
.cadre--bas{
  width:44%; position:relative; margin-top:-18%; margin-left:auto; margin-right:6%;
  border:6px solid var(--creme); box-shadow:0 24px 50px -26px var(--ombre-vert);
}
.cadre img{ width:100%; }
.cadre__note{
  position:absolute; left:0; bottom:-6px; margin:0;
  font-family:var(--serif); font-style:italic; font-size:1.02rem; line-height:1.35;
  color:var(--texte-doux);
}
@media (max-width:560px){
  .cadre--bas{ width:56%; margin-top:-22%; }
  .cadre__note{ position:static; margin-top:1.1rem; }
}

/* ═══════════════════ LA CARTE — l'ardoise ═══════════════════ */
.section--carte{
  background:
    linear-gradient(180deg, var(--vert-fonce), #0B2921 60%, var(--vert-fonce));
  color:var(--texte-clair);
  overflow:hidden;
}
/* rayures de store, très discrètes */
.section--carte::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    rgba(244,238,225,.032) 0 34px, transparent 34px 68px);
}
.carte__halos{ position:absolute; inset:0; pointer-events:none; }

.onglets{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; position:relative; }
.onglet{
  padding:.62rem 1.15rem; border:1px solid rgba(244,238,225,.22); border-radius:100px;
  background:transparent; color:var(--texte-clair-2); cursor:pointer;
  font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  transition:color .3s, border-color .3s, background-color .3s, transform .25s var(--ease-out-expo);
}
.onglet:hover,.onglet:focus-visible{ color:var(--creme); border-color:rgba(244,238,225,.5); transform:translateY(-2px); }
.onglet:active{ transform:scale(.95); transition-duration:.09s; }
.onglet.actif{ background:var(--laiton); border-color:var(--laiton); color:var(--vert-nuit); }

.ardoise{
  position:relative;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255,255,255,.035), transparent 60%),
    var(--ardoise-noir);
  border:1px solid rgba(244,238,225,.16);
  border-radius:10px;
  padding:clamp(1.6rem, 4vw, 3rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.9);
}
.ardoise::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(201,154,62,.30);
  border-radius:5px; pointer-events:none;
}
.ardoise__coin{
  position:absolute; width:16px; height:16px; border:2px solid var(--laiton);
  opacity:.75; pointer-events:none;
}
.ardoise__coin--tl{ top:22px; left:22px; border-right:0; border-bottom:0; }
.ardoise__coin--tr{ top:22px; right:22px; border-left:0; border-bottom:0; }
.ardoise__coin--bl{ bottom:22px; left:22px; border-right:0; border-top:0; }
.ardoise__coin--br{ bottom:22px; right:22px; border-left:0; border-top:0; }

.panneau{ display:none; }
.panneau.actif{ display:block; animation:apparait .5s var(--ease-out-expo); }
@keyframes apparait{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.plats{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:780px){ .plats{ grid-template-columns:repeat(2,1fr); } }
.plat{
  padding:1.25rem 1.35rem;
  border:1px solid rgba(244,238,225,.13); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(244,238,225,.045), rgba(244,238,225,.015));
  transition:border-color .35s var(--ease-smooth), background-color .35s, box-shadow .35s, transform .3s var(--ease-smooth);
}
.plat:hover,.plat:focus-within{
  border-color:rgba(201,154,62,.55);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.9);
}
.plat h3{
  font-size:1.28rem; color:var(--creme); margin-bottom:.45rem;
  display:flex; align-items:baseline; gap:.6rem;
}
.plat p{ margin:0; font-size:.93rem; line-height:1.66; color:var(--texte-clair-2); }
.plat em{ color:var(--menthe); font-style:italic; }
.prix{
  font-family:var(--serif); font-weight:600; color:var(--laiton-clair);
  white-space:nowrap;
}

.panneau__intro{ font-size:1.1rem; color:var(--creme); margin-bottom:1.4rem; }
.panneau__intro strong{ color:var(--laiton-clair); font-weight:600; }
.parfums{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.9rem; }
.parfums li{
  padding:.42rem .9rem; border:1px solid rgba(244,238,225,.2); border-radius:100px;
  font-size:.83rem; color:var(--texte-clair);
  transition:border-color .3s, color .3s, transform .3s var(--ease-elastic);
}
.parfums li:hover{ border-color:var(--menthe); color:var(--menthe); transform:translateY(-3px); }
.parfums li:active{ transform:scale(.94); transition-duration:.09s; }
.tarifs{ display:grid; gap:.1rem; max-width:420px; }
.tarifs li{
  display:flex; align-items:baseline; gap:.8rem; padding:.55rem 0;
  border-bottom:1px dashed rgba(244,238,225,.18);
}
.tarifs li span:first-child{ color:var(--texte-clair); }
.tarifs li::before{ content:''; order:2; flex:1; }
.tarifs .prix{ order:3; }
.panneau__note{ margin:1.4rem 0 0; font-size:.88rem; font-style:italic; color:var(--texte-clair-2); }

.rappel{
  margin-top:clamp(2.4rem,5vw,3.4rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.rappel p{
  margin:0; max-width:46ch;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1rem+.6vw,1.4rem);
  color:var(--creme);
}

/* Provenance des produits, sous le chapeau de la carte */
.engagements{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem;
}
.engagements li{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1rem; border-radius:100px;
  border:1px solid rgba(156,207,182,.34);
  background:rgba(156,207,182,.07);
  font-size:.79rem; font-weight:500; letter-spacing:.02em; color:var(--menthe);
  transition:border-color .3s var(--ease-doux), background-color .3s var(--ease-doux),
             transform .3s var(--ease-ressort);
}
.engagements li:hover{ border-color:var(--menthe); background:rgba(156,207,182,.14); transform:translateY(-2px); }
.engagements svg{ width:16px; height:16px; flex:none; }

/* ═══════════════════ LE NOM — l'hélice des enchères ═══════════════════ */
.section--nom{
  background:
    linear-gradient(180deg, var(--vert-nuit), #0A241D 45%, var(--vert-fonce));
  color:var(--texte-clair);
  overflow:hidden;
}
.nom__halos{ position:absolute; inset:0; pointer-events:none; }
.halo--4{
  width:64vmin; height:64vmin; left:2%; top:12%; opacity:.14;
  background:radial-gradient(circle, var(--laiton) 0%, transparent 70%);
  animation:halo-drift 30s var(--ease-smooth) infinite alternate;
}
.section--nom > *{ position:relative; }

.nom__grid{
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (min-width:900px){ .nom__grid{ grid-template-columns:.85fr 1.15fr; } }

.nom__visuel{ display:flex; justify-content:center; }
.nom__helice{
  width:clamp(190px, 30vw, 330px); height:auto; color:var(--laiton-clair);
  overflow:visible;
}
/* Ici la rotation a un sens : c'est une hélice. Très lente, elle tourne
   comme celle qu'ils n'ont jamais rapportée de la salle des ventes. */
.nom__pales{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:tourne 26s linear infinite;
}
.nom__texte p{ color:var(--texte-clair-2); }
.nom__signature{
  margin-top:1.8rem; padding-top:1.4rem;
  border-top:1px solid rgba(244,238,225,.16);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1rem+.5vw,1.3rem);
  color:var(--creme)!important;
}

/* ═══════════════════ LA PLACE ═══════════════════ */
.section--place{ background:var(--creme-2); }
/* PAS d'overflow:hidden ici : il ferait un conteneur de defilement et
   neutraliserait le position:sticky des cartes de la pile. La bande
   photo a deja son propre overflow:hidden. */
.section--place::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(23,74,59,.10) 1.4px, transparent 1.4px);
  background-size:12px 12px; opacity:.55;
}
.section--place > *{ position:relative; }

.bande{
  margin:clamp(2rem,5vw,3.4rem) 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bande__piste{ display:flex; width:max-content; animation:defile 62s linear infinite; }
.bande:hover .bande__piste,
.bande:focus-within .bande__piste{ animation-play-state:paused; }
@keyframes defile{ to{ transform:translateX(-50%); } }
.bande__double{ display:contents; }
.bande__item{
  margin:0 14px 0 0; flex:none; overflow:hidden; border-radius:var(--radius);
  cursor:zoom-in; position:relative; background:var(--creme-3);
  box-shadow:0 18px 40px -26px var(--ombre-vert);
}
.bande__item img{
  max-width:none; height:clamp(190px, 26vw, 300px); width:auto;
  transition:transform .7s var(--ease-smooth), filter .5s var(--ease-smooth);
}
.bande__item:hover img,.bande__item:focus-visible img{ transform:scale(1.06); }
.bande__item::after{
  content:''; position:absolute; inset:0; border:1px solid rgba(244,238,225,.35);
  border-radius:var(--radius); pointer-events:none;
}

/* ─── Pile de cartes : chacune se cale sous la précédente ─── */
.pile{ margin-top:clamp(1.4rem,4vw,2.6rem); }
.pile__carte{
  margin:0 auto; position:relative; overflow:hidden;
  max-width:760px; border-radius:14px;
  background:var(--creme-3);
  border:1px solid rgba(244,238,225,.5);
  box-shadow:0 34px 70px -34px var(--ombre-vert);
  transform-origin:50% 0%;
}
.pile__carte + .pile__carte{ margin-top:clamp(1.2rem,3vw,2rem); }
/* voile qui assombrit la carte recouverte (opacite = peu couteux a peindre) */
.pile__carte::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--vert-nuit); opacity:var(--voile,0);
}
.pile__carte img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.pile__carte figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:3.4rem 1.4rem 1.15rem;
  background:linear-gradient(transparent, rgba(8,28,23,.9));
  color:var(--creme); font-size:.9rem; font-weight:500; letter-spacing:.01em;
  display:flex; align-items:baseline; gap:.8rem;
}
.pile__no{
  font-family:var(--serif); font-size:1.1rem; font-weight:600;
  color:var(--laiton-clair); flex:none;
}
@media (min-width:760px){
  /* au-dessus de 760px la pile s'active : sticky + décalage progressif */
  .pile__carte{
    position:sticky;
    top:calc(var(--nav-h) + 18px + var(--i) * 22px);
  }
  .pile__carte + .pile__carte{ margin-top:clamp(2rem,5vw,4rem); }
  /* respiration en fin de conteneur : la pile assemblee tient a l'ecran
     un moment avant de repartir d'un bloc */
  .pile{ padding-bottom:clamp(90px, 20vh, 220px); }
}
.photo-duotone img{ filter:saturate(.82) contrast(1.04); transition:filter .55s var(--ease-smooth), transform .7s var(--ease-smooth); }
.photo-duotone:hover img,.photo-duotone:focus-within img{ filter:none; transform:scale(1.04); }

/* ═══════════════════ AVIS ═══════════════════ */
.section--avis{
  --lueur:0;                    /* 0 → 1, piloté au scroll */
  background:
    radial-gradient(ellipse 80% 60% at 50% calc(6% + var(--lueur) * 34%),
      rgba(23,74,59,calc(.35 + var(--lueur) * .75)), transparent 72%),
    var(--vert-nuit);
  color:var(--texte-clair);
}
/* texture : les lattes verticales des boiseries de la salle */
.section--avis::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    rgba(244,238,225,.05) 0 1px, transparent 1px 26px);
}
.section--avis > *{ position:relative; }

.note{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:1.6rem; }
.note__chiffre{
  font-family:var(--serif); font-size:clamp(3.2rem,2rem+4vw,4.6rem); font-weight:700;
  font-variation-settings:'opsz' 20;
  line-height:1; color:var(--creme);
  font-variant-numeric:tabular-nums;   /* pas de sautillement pendant le comptage */
}
.note__source [data-compteur]{ font-variant-numeric:tabular-nums; }
.note__etoiles svg{ width:132px; height:24px; }
.note__source{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:var(--texte-clair-2);
}

.carousel{ overflow:hidden; touch-action:pan-y; cursor:grab; }
.carousel.drag{ cursor:grabbing; }
.carousel__piste{ display:flex; transition:transform .6s var(--ease-out-expo); }
.carousel__piste.sans-transition{ transition:none; }
.carousel__slide{ flex:0 0 100%; padding:0 .55rem; box-sizing:border-box; }
@media (min-width:720px){ .carousel__slide{ flex-basis:50%; } }
@media (min-width:1080px){ .carousel__slide{ flex-basis:33.3333%; } }

.avis{
  margin:0; height:100%; display:flex; flex-direction:column;
  padding:1.9rem 1.7rem;
  border:1px solid rgba(244,238,225,.16); border-radius:var(--radius);
  background:linear-gradient(155deg, rgba(244,238,225,.075), rgba(244,238,225,.025));
  position:relative;
}
.avis::before{
  content:'\201C'; position:absolute; top:-.3em; left:.7rem;
  font-family:Georgia, "Times New Roman", serif; font-size:5.4rem; line-height:1;
  color:var(--laiton); opacity:.3; pointer-events:none;
}
.avis blockquote{ margin:0; }
.avis blockquote p{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:1.06rem; line-height:1.6; color:var(--creme);
}
.avis figcaption{
  position:static; background:none; padding:0; margin-top:auto; padding-top:1.2rem;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em;
  color:var(--laiton-clair);
}

.carousel__nav{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:2rem; }
.carousel__fleche{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(244,238,225,.26); border-radius:50%; background:transparent;
  color:var(--creme);
  transition:border-color .3s, background-color .3s, transform .3s var(--ease-out-expo);
}
.carousel__fleche svg{ width:19px; height:19px; }
.carousel__fleche:hover,.carousel__fleche:focus-visible{ border-color:var(--laiton); background:rgba(201,154,62,.14); transform:translateY(-2px); }
.carousel__dots{ display:flex; gap:.55rem; }
.carousel__dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(244,238,225,.28); transition:background-color .3s, transform .3s var(--ease-elastic);
}
.carousel__dots button[aria-current="true"]{ background:var(--laiton); transform:scale(1.45); }

.avis__lien{ text-align:center; margin-top:1.9rem; }
.avis__lien a{
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em;
  color:var(--laiton-clair); text-decoration:none;
  border-bottom:1px solid rgba(201,154,62,.5); padding-bottom:3px;
  transition:color .3s, border-color .3s;
}
.avis__lien a:hover,.avis__lien a:focus-visible{ color:var(--creme); border-color:var(--creme); }

/* ═══════════════════ FACEBOOK — le mur en direct ═══════════════════ */
.section--fb{ background:var(--creme-2); overflow:hidden; }
/* rayures de store, version claire — contraste avec la section infos, unie */
.section--fb::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:repeating-linear-gradient(90deg,
    rgba(23,74,59,.05) 0 30px, transparent 30px 60px);
}
.section--fb > *{ position:relative; }
.fb{
  width:min(100% - 2*var(--pad), 500px); margin:0 auto;
  overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--creme-3); background:var(--creme);
  box-shadow:0 24px 54px -34px var(--ombre-vert);
}
.fb iframe{ width:100%; min-height:620px; border:0; display:block; }
.fb__lien{ text-align:center; margin:1.8rem 0 0; }
.btn--fb{ border-color:var(--vert); color:var(--vert); }
.btn--fb:hover,.btn--fb:focus-visible{ background:var(--vert); color:var(--creme); border-color:var(--vert); }
.btn--fb svg{ width:17px; height:17px; }

/* ═══════════════════ INFOS ═══════════════════ */
.section--infos{ background:var(--creme); }
.infos__grid{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media (min-width:820px){ .infos__grid{ grid-template-columns:repeat(3,1fr); } }
.info{
  padding:1.9rem 1.7rem; border:1px solid var(--creme-3); border-radius:var(--radius);
  background:linear-gradient(165deg, #fff, var(--creme));
  box-shadow:0 18px 44px -34px var(--ombre-vert);
  transition:border-color .35s, box-shadow .35s, transform .35s var(--ease-out-expo);
}
.info:hover{ border-color:var(--laiton); transform:translateY(-3px); box-shadow:0 26px 54px -30px var(--ombre-vert); }
.info h3{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.17em; color:var(--vert); margin-bottom:1.1rem;
}
.info p{ font-size:.94rem; color:var(--texte-doux); }
.info__fort{
  font-family:var(--serif); font-size:1.3rem; line-height:1.35; color:var(--texte)!important;
}
.info__fort a{ text-decoration:none; border-bottom:1px solid var(--laiton); }
.info__petit{ font-size:.82rem!important; margin-bottom:0; }
.info__cta{ width:100%; }
.horaires{ margin-bottom:1.2rem; }
.horaires li{
  display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0;
  border-bottom:1px dashed var(--creme-3); font-size:.9rem; color:var(--texte-doux);
}
.horaires li.aujourdhui{ color:var(--vert); font-weight:600; }
.horaires li.aujourdhui span:first-child::after{ content:' · aujourd’hui'; font-weight:400; font-size:.76rem; color:var(--laiton); }

.carte-maps{
  margin:clamp(2.2rem,5vw,3.2rem) auto 0; max-width:820px;
  aspect-ratio:21/9; max-height:380px;
  overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--creme-3); box-shadow:0 24px 54px -34px var(--ombre-vert);
}
.carte-maps iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(1.05); transition:filter .6s var(--ease-smooth);
}
.carte-maps:hover iframe{ filter:none; }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer{ background:var(--vert-nuit); color:var(--texte-clair-2); padding:2.2rem 0; position:relative; z-index:1; }
.footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.6rem 1.6rem; font-size:.78rem;
}
.footer p{ margin:0; }
.footer nav{ display:flex; gap:1.4rem; }
.footer a{ text-decoration:none; transition:color .3s; }
.footer a:hover,.footer a:focus-visible{ color:var(--laiton-clair); }
.footer__egg{
  background:none; border:0; padding:4px; cursor:pointer; color:var(--texte-clair-2); opacity:.45;
  transition:opacity .3s, color .3s;
}
.footer__egg svg{ width:18px; height:18px; display:block; transform-origin:50% 50%; }
.footer__egg:hover{ opacity:1; color:var(--laiton); }
.footer__egg.tourne svg{ animation:tourne .5s linear 8; }

/* ═══════════════════ OVERLAY TÉLÉPHONE ═══════════════════ */
.phone-overlay{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  background:var(--vert-nuit);   /* masque le site même si la scène SVG tarde à peindre */
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease-smooth), visibility 0s linear .45s;
}
.phone-overlay.ouvert{ opacity:1; visibility:visible; transition:opacity .45s var(--ease-smooth); }
.phone-overlay__scene{ position:absolute; inset:0; cursor:pointer; }
.phone-overlay__scene .scene{ width:100%; height:100%; display:block; }
.scene__helice{ transform-box:fill-box; transform-origin:50% 50%; animation:tourne 14s linear infinite; }
.feuille{ animation:vole 16s linear infinite; animation-delay:var(--d,0s); transform-box:fill-box; }
@keyframes vole{
  0%{ transform:translate(0,0) rotate(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.4; }
  100%{ transform:translate(90px,420px) rotate(220deg); opacity:0; }
}
.phone-overlay__veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 52% at 50% 50%, rgba(6,21,17,.9) 0%, rgba(6,21,17,.55) 55%, transparent 78%);
}
.phone-overlay__close{
  position:absolute; top:18px; right:22px; z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(244,238,225,.08); border:1px solid rgba(244,238,225,.28);
  color:var(--creme); font-size:1.7rem; line-height:1;
  transition:background-color .3s, transform .3s var(--ease-out-expo);
}
.phone-overlay__close:hover{ background:rgba(244,238,225,.18); transform:rotate(90deg); }
.phone-overlay__content{
  position:relative; z-index:2; text-align:center; padding:var(--pad); max-width:min(96vw, 980px);
}
.phone-overlay__kicker{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.28em;
  color:var(--laiton-clair); margin-bottom:1.1rem;
}
.phone-overlay__number{
  font-family:var(--serif); font-weight:700; line-height:1;
  font-variation-settings:'opsz' 22;
  font-size:clamp(1.9rem, .5rem + 5.6vw, 5.2rem); margin:0 0 1rem;
  letter-spacing:-.02em;
  display:flex; justify-content:center; align-items:baseline; flex-wrap:nowrap;
}
.phone-overlay__digit{
  color:var(--creme);
  text-shadow:0 0 46px rgba(201,154,62,.45), 0 2px 30px rgba(6,21,17,.85);
}
.phone-overlay__sep{ display:inline-block; width:.26em; }
.js .phone-overlay__digit,
.js .phone-overlay__sep{ opacity:0; transform:translateY(28px); }
.phone-overlay.ouvert .phone-overlay__digit,
.phone-overlay.ouvert .phone-overlay__sep{
  animation:digit .6s var(--ease-elastic) forwards;
  animation-delay:calc(.18s + var(--i) * .045s);
}
@keyframes digit{ to{ opacity:1; transform:none; } }
.phone-overlay__sous{
  font-size:.82rem; letter-spacing:.06em; color:var(--texte-clair-2); margin-bottom:2rem;
}
.phone-overlay__actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.phone-overlay__toast{
  margin-top:1.3rem; min-height:1.3em;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--menthe); opacity:0; transition:opacity .3s;
}
.phone-overlay__toast.visible{ opacity:1; }

/* ═══════════════════ LIGHTBOX ═══════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:2100; display:grid; place-items:center;
  background:rgba(6,21,17,.95); padding:clamp(20px,5vw,60px);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease-smooth), visibility 0s linear .4s;
}
.lightbox.ouvert{ opacity:1; visibility:visible; transition:opacity .4s var(--ease-smooth); }
.lightbox__img{
  max-width:100%; max-height:86vh; border-radius:var(--radius);
  box-shadow:0 40px 90px -40px #000;
}
.lightbox__close{
  position:absolute; top:18px; right:22px;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(244,238,225,.08); border:1px solid rgba(244,238,225,.28);
  color:var(--creme); font-size:1.7rem; line-height:1;
  transition:background-color .3s, transform .3s var(--ease-out-expo);
}
.lightbox__close:hover{ background:rgba(244,238,225,.18); transform:rotate(90deg); }

/* ═══════════════════ TOAST easter egg ═══════════════════ */
.egg-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:2200;
  padding:.8rem 1.4rem; border-radius:100px;
  background:var(--vert-nuit); color:var(--creme); border:1px solid var(--laiton);
  font-size:.83rem; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease-smooth), transform .45s var(--ease-out-expo);
}
.egg-toast.visible{ opacity:1; transform:translate(-50%, 0); }

/* ═══════════════════ REVEAL ═══════════════════ */
.js .reveal,.js .reveal-left,.js .reveal-right{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
.js .reveal-left{ transform:translateX(-40px); }
.js .reveal-right{ transform:translateX(40px); }
.js .reveal.visible,.js .reveal-left.visible,.js .reveal-right.visible{ opacity:1; transform:none; }

.js .reveal-mask img{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease-out-expo); }
.js .reveal-mask.visible img{ clip-path:inset(0); }
.js .reveal-zoom img{
  transform:scale(1.14); filter:blur(9px); opacity:0;
  transition:transform 1.2s var(--ease-out-expo), filter 1.1s ease, opacity .6s ease;
}
.js .reveal-zoom.visible img{ transform:scale(1); filter:none; opacity:1; }
/* le duotone reprend la main une fois la révélation finie */
.js .photo-duotone.visible img{ filter:saturate(.82) contrast(1.04); }
.js .photo-duotone.visible:hover img,
.js .photo-duotone.visible:focus-within img{ filter:none; transform:scale(1.04); }

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:940px){
  .nav__links{ display:none; }
  .nav__actions .btn{ display:none; }
  .nav__burger{ display:flex; }

  .nav__menu-mobile{
    position:fixed; inset:0 0 0 auto; z-index:999;
    width:min(78%, 340px);
    display:flex; flex-direction:column; gap:1.4rem;
    padding:calc(var(--nav-h) + 2rem) var(--pad) var(--pad);
    background:rgba(8,28,23,.97);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-left:1px solid rgba(244,238,225,.14);
    transform:translateX(100%); visibility:hidden;
    transition:transform .5s var(--ease-out-expo), visibility 0s linear .5s;
  }
  .nav__menu-mobile.ouvert{ transform:none; visibility:visible; transition:transform .5s var(--ease-out-expo); }
  .nav__menu-mobile a{
    text-decoration:none; color:var(--creme);
    font-family:var(--serif); font-size:1.5rem;
  }
  .nav__menu-mobile .btn{ margin-top:1rem; }
  .menu-mobile__fb{
    display:inline-flex!important; align-items:center; gap:.6rem;
    font-family:var(--sans)!important; font-size:.78rem!important;
    font-weight:600; text-transform:uppercase; letter-spacing:.12em;
    color:var(--texte-clair-2)!important; margin-top:.4rem;
  }
  .menu-mobile__fb svg{ width:19px; height:19px; flex:none; }
  .menu-mobile__fb:hover,.menu-mobile__fb:focus-visible{ color:var(--laiton-clair)!important; }

  /* Pages légales : pas de burger, on garde les liens visibles */
  .nav--solide .nav__links{ display:flex; gap:1rem; }
  .nav--solide .nav__links a{ font-size:.7rem; letter-spacing:.08em; }
  .nav--solide .nav__actions .btn{ display:inline-flex; padding:.6rem 1rem; font-size:.74rem; }
  .nav--solide .nav__burger{ display:none; }
}
@media (max-width:600px){
  .nav--solide .nav__links a:nth-child(n+3){ display:none; }
  .nav--solide .nav__nom{ display:none; }
}
@media (max-width:600px){
  .nav__nom{ font-size:1.1rem; }
  .plat h3{ font-size:1.15rem; }
  .ardoise__coin{ display:none; }
  .ardoise::before{ inset:9px; }
}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js .hero__visual,.js .hero__place{ opacity:1; transform:none; animation:none; }
  .js .reveal,.js .reveal-left,.js .reveal-right{ opacity:1; transform:none; }
  .js .reveal-mask img{ clip-path:none; }
  .js .reveal-zoom img{ transform:none; filter:none; opacity:1; }
  .js .phone-overlay__digit,.js .phone-overlay__sep{ opacity:1; transform:none; }
  .bande__piste{ animation:none; }
  .hero{ position:relative; }
  .js .mot{ opacity:1; }
  .nav__actions .btn--primary{ animation:none; }
  .pile__carte{ position:relative; top:auto; }
  .section--avis{ --lueur:.6; }
  .nom__pales{ animation:none; }
}