/* ══════════════════════════════════════════════════════════════
   ZILMOOVE VTC — page de vente
   Page créée par Adamkom by JJP · https://adamkom.com
   ══════════════════════════════════════════════════════════════ */

/* ─── Polices (sous-ensemble latin, servies en local) ─── */
@font-face{
  font-family:'Anton';
  src:url('../fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:block;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─── Jetons ─── */
:root{
  --nuit:#070C16;
  --nuit-2:#0B1322;
  --nuit-3:#111C31;
  --nuit-4:#17253E;
  --marine:#16294F;

  --txt:#F4F6FA;
  --txt-2:#B4C0D2;
  --txt-3:#8492A9;
  --ligne:rgba(255,255,255,.10);
  --ligne-f:rgba(255,255,255,.18);

  --or:#F26B0A;
  --or-cl:#FFB253;
  --or-f:#D24E02;
  --or-voile:rgba(242,107,10,.14);

  --wa:#25D366;
  --wa-f:#128C4B;

  --creme:#FAF7F3;
  --creme-2:#F1EBE2;
  --encre:#0E1117;
  --encre-2:#39424F;
  --or-t:#B8460A;

  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --cage:1240px;
  --pad:clamp(1.1rem,4vw,2.6rem);
  --r:14px;
  --r-lg:22px;
  --h-tete:72px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ─── Base ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--h-tete) + 14px)}
body{
  margin:0;
  overflow-x:clip;
  background:var(--nuit);
  color:var(--txt);
  font:400 clamp(1rem,.97rem + .2vw,1.09rem)/1.66 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;line-height:1;letter-spacing:.005em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}

::selection{background:var(--or);color:#fff}
:focus-visible{outline:3px solid var(--or-cl);outline-offset:3px;border-radius:4px}

.saut{position:fixed;left:12px;top:-100px;z-index:999;background:var(--or);color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-weight:700;transition:top .2s}
.saut:focus{top:12px}

.cage{width:100%;max-width:var(--cage);margin-inline:auto;padding-inline:var(--pad)}
.cage--fin{max-width:920px}
.or{
  background:linear-gradient(92deg,var(--or-cl),var(--or) 58%,var(--or-f));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bar{text-decoration:line-through;text-decoration-color:rgba(244,246,250,.35);text-decoration-thickness:.06em;color:var(--txt-3)}

/* ─── Icônes ─── */
.ic{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.ic--ok,.ic--tr,.pq__c h3 .ic{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tar__pic svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ─── Boutons ─── */
.btn{
  --bg:var(--or);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  background:var(--bg);color:var(--fg);
  border:0;border-radius:999px;
  font:700 1rem/1 var(--sans);letter-spacing:.005em;
  padding:1rem 1.6rem;cursor:pointer;
  text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.9);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.62rem 1.05rem;font-size:.9rem}
.btn--md{padding:.85rem 1.35rem;font-size:.96rem}
.btn--xl{padding:1.12rem 1.9rem;font-size:1.08rem}
.btn--wa{--bg:var(--wa);--fg:#05310F;font-weight:800}
.btn--wa:hover{--bg:#2FE875;box-shadow:0 14px 40px -14px rgba(37,211,102,.8)}
.btn--wa .ic{width:1.35em;height:1.35em}
.btn--fant{--bg:transparent;--fg:var(--txt);box-shadow:inset 0 0 0 1.6px var(--ligne-f)}
.btn--fant:hover{--bg:rgba(255,255,255,.07);--fg:#fff}
.btn--or{--bg:var(--or);--fg:#fff;font-weight:800}
.btn--or:hover{--bg:#FF7E1E}
/* Le bouton vers le site officiel : rempli, et cerclé d'une onde discrète. */
.btn--phare{position:relative;box-shadow:0 10px 32px -12px rgba(242,107,10,.9)}
.btn--phare::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  border:2px solid var(--or);opacity:.6;pointer-events:none;
  animation:phare 2.8s var(--ease) infinite;
}
@keyframes phare{0%{transform:scale(.97);opacity:.55}70%{transform:scale(1.16);opacity:0}100%{opacity:0}}
.btn__court{display:none}

/* ─── Pastille ─── */
.pastille{
  display:inline-flex;align-items:center;gap:.6em;
  font:700 .74rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-2);
  background:rgba(255,255,255,.05);
  border:1px solid var(--ligne);
  border-radius:999px;padding:.62em 1em;
  backdrop-filter:blur(8px);
}
.pastille--c{margin-inline:auto}
.pastille__p{width:8px;height:8px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pouls 2.4s infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ─── Titres de section ─── */
.tt{margin-bottom:clamp(2rem,4vw,3.2rem)}
.tt--c{text-align:center;max-width:760px;margin-inline:auto}
.tt__oeil{
  font:700 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--or-cl);margin-bottom:1rem;
}
.tt__h{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.05rem,1.2rem + 3.6vw,4.1rem);line-height:.95;
}
.tt__s{margin-top:1.1rem;color:var(--txt-2);font-size:1.03rem}

/* ─── Apparitions (armées par le JS) ─── */
.js-rev [data-rev]{opacity:0;transform:translateY(26px)}
.js-rev [data-rev].vu{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ══════════════ Bandeau haut ══════════════ */
.tete{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--h-tete);
  display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(7,12,22,.88),rgba(7,12,22,0));
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.tete.dur{
  background:rgba(7,12,22,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--ligne),0 18px 40px -30px #000;
}
.tete__in{width:100%;max-width:var(--cage);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tete__d{display:flex;align-items:center;gap:.6rem}
.tete__tel{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.95rem;color:var(--txt-2);padding:.5rem .4rem;white-space:nowrap}
.tete__tel:hover{color:#fff}
.tete__tel .ic{color:var(--or-cl)}

.logo{display:inline-flex;align-items:center;gap:.62rem}
.logo__m{height:46px;width:auto;flex:none}
.logo__w{height:26px;width:auto;flex:none}
.logo--pied img{height:120px;width:auto}

/* ══════════════ 1 · Hero ══════════════ */
.hero{
  position:relative;isolation:isolate;
  min-height:min(980px,100svh);
  display:flex;align-items:center;
  padding:calc(var(--h-tete) + clamp(2rem,5vh,4rem)) 0 clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.hero__fond{position:absolute;inset:0;z-index:-1;background:#05080F}
.hero__video{width:100%;height:100%;object-fit:cover;opacity:.9;transform:scale(1.06);animation:zoomLent 26s ease-in-out infinite alternate}
@keyframes zoomLent{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero__voile{
  position:absolute;inset:0;
  background:
    linear-gradient(102deg,rgba(5,8,15,.95) 0%,rgba(5,8,15,.86) 34%,rgba(6,10,20,.45) 62%,rgba(6,10,20,.5) 100%),
    linear-gradient(to top,var(--nuit) 2%,rgba(7,12,22,.2) 34%,rgba(7,12,22,.5) 100%);
}
.hero__rayons{
  position:absolute;inset:0;
  background:radial-gradient(58% 42% at 14% 72%,rgba(255,150,50,.24),transparent 70%);
  mix-blend-mode:screen;
}
.hero__grain{
  position:absolute;inset:0;opacity:.5;
  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='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.hero__in{
  width:100%;max-width:var(--cage);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero__h1{
  font-family:var(--display);text-transform:uppercase;
  /* Interligne 1 : plus serré, l'accent de « PRIVÉ » se perd dans la ligne du dessus. */
  font-size:clamp(2.5rem,1.1rem + 5.9vw,5.2rem);line-height:1;
  margin:1.3rem 0 1.35rem;
  text-wrap:balance;
}
.hero__or{display:block;color:var(--or-cl)}
.mot--fin{position:relative}
.hero__or .mot{
  background:linear-gradient(92deg,var(--or-cl),var(--or) 62%,var(--or-f));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__trait{
  position:absolute;left:-.4%;bottom:-.16em;width:100.8%;height:.2em;
  color:var(--or);opacity:.9;overflow:visible;
}
.hero__trait path{stroke-dasharray:430;stroke-dashoffset:430}
/* Le titre s'anime en CSS pur : une animation se termine toujours,
   là où un JS en panne laisserait le titre invisible pour de bon. */
.hero__h1 .mot{display:inline-block;animation:motIn .7s var(--ease) backwards}
.hero__h1 .mot:nth-child(2){animation-delay:.05s}
.hero__h1 .mot:nth-child(3){animation-delay:.1s}
.hero__h1 .mot:nth-child(4){animation-delay:.15s}
.hero__or .mot:nth-child(1){animation-delay:.22s}
.hero__or .mot:nth-child(2){animation-delay:.27s}
.hero__or .mot:nth-child(3){animation-delay:.32s}
.hero__or .mot:nth-child(4){animation-delay:.37s}
.hero__trait path{animation:traitIn .85s var(--ease) .85s forwards}
@keyframes motIn{from{opacity:0;transform:translateY(.42em) rotate(1.6deg)}to{opacity:1;transform:none}}
@keyframes traitIn{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .hero__h1 .mot{animation:none}
  .hero__trait path{stroke-dashoffset:0;animation:none}
}

.hero__sub{color:var(--txt-2);font-size:clamp(1rem,.95rem + .3vw,1.16rem);max-width:44ch}
.hero__sub strong{color:#fff;font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin:1.8rem 0 1.5rem}
.hero__gages{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;color:var(--txt-2);font-size:.92rem;font-weight:600}
.hero__gages li{display:flex;align-items:center;gap:.45em}
.hero__gages .ic{color:var(--wa);width:1.05em;height:1.05em}

.hero__fleche{
  position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid var(--ligne-f);border-radius:14px;z-index:2;
}
.hero__fleche span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--or-cl);animation:souris 1.9s infinite}
@keyframes souris{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ─── Démo WhatsApp ─── */
.tel{position:relative;justify-self:center;width:min(100%,362px)}
.tel__cadre{
  background:linear-gradient(170deg,#0F1A2C,#0A1220);
  border:1px solid var(--ligne-f);
  border-radius:26px;padding:.55rem;
  box-shadow:0 40px 80px -40px #000,0 0 0 8px rgba(255,255,255,.028);
  overflow:hidden;
}
.tel__tete{display:flex;align-items:center;gap:.65rem;padding:.55rem .55rem .7rem;border-bottom:1px solid var(--ligne)}
.tel__logo{height:30px;width:auto}
.tel__qui{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.tel__qui strong{font-size:.94rem}
.tel__qui span{font-size:.76rem;color:var(--wa);font-weight:700}
.tel__ic{color:var(--txt-3);width:1.15rem;height:1.15rem}
.tel__fil{
  display:flex;flex-direction:column;gap:.5rem;
  padding:.9rem .55rem .4rem;justify-content:flex-end;
  height:300px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 42px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 42px);
}
.bul{
  max-width:86%;padding:.6rem .8rem;border-radius:15px;font-size:.9rem;line-height:1.45;
  animation:bulIn .42s var(--ease) backwards;
}
.bul b{font-weight:800}
.bul--moi{align-self:flex-end;background:#154D33;border-bottom-right-radius:5px;color:#EAFFF3}
.bul--lui{align-self:flex-start;background:#1B283F;border-bottom-left-radius:5px;color:var(--txt)}
.bul--prix{background:linear-gradient(135deg,#1E3A2B,#16482E);border:1px solid rgba(37,211,102,.34)}
.bul__h{display:block;font:800 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--wa);margin-bottom:.35rem}
.bul__p{display:block;font-family:var(--display);font-size:1.9rem;line-height:1;color:#fff;letter-spacing:.01em;margin-bottom:.3rem}
.bul--prix span:last-child{font-size:.78rem;color:var(--txt-2)}
.bul--tape{display:flex;gap:4px;align-items:center;padding:.75rem .85rem}
.bul--tape i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);animation:tape 1.1s infinite}
.bul--tape i:nth-child(2){animation-delay:.16s}
.bul--tape i:nth-child(3){animation-delay:.32s}
@keyframes tape{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes bulIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.tel__pied{padding:.55rem .7rem .3rem;font-size:.7rem;color:var(--txt-3);text-align:center;border-top:1px solid var(--ligne);margin-top:.6rem}
.tel__etiq{
  position:absolute;z-index:2;
  font:800 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  background:var(--or);color:#fff;padding:.55em .8em;border-radius:8px;
  box-shadow:0 14px 30px -14px rgba(242,107,10,.9);
  animation:flotte 5s ease-in-out infinite;
}
.tel__etiq--1{left:-16px;top:34%;transform:rotate(-7deg)}
.tel__etiq--2{right:-12px;bottom:18%;transform:rotate(6deg);background:#fff;color:var(--encre);animation-delay:1.4s}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ══════════════ Bandeau défilant ══════════════ */
.ruban{
  background:var(--or);color:#fff;overflow:hidden;
  border-block:1px solid rgba(0,0,0,.14);
  padding:.62rem 0;
  --sens:-50%;
}
.ruban__v{display:flex;align-items:center;gap:1.4rem;width:max-content;animation:defile 34s linear infinite}
.ruban__g{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;white-space:nowrap}
.ruban i{font-style:normal;font-size:.6rem;opacity:.6}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(var(--sens))}}

/* ══════════════ 2 · Le bon à gratter ══════════════ */
.gr{
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.6rem,6vw,4.2rem);
  background:radial-gradient(74% 90% at 50% 0%,rgba(242,107,10,.13),transparent 62%),var(--nuit);
}
.gr .tt{margin-bottom:0}
.tik{
  position:relative;max-width:640px;
  margin:clamp(1.8rem,4vw,2.6rem) auto 0;
  background:linear-gradient(168deg,var(--nuit-3),var(--nuit-2));
  border:1px solid var(--ligne-f);border-radius:var(--r-lg);
  box-shadow:0 46px 92px -52px #000,0 0 0 6px rgba(255,255,255,.022);
}
.tik__h{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.2rem}
.tik__logo{height:34px;width:auto;flex:none}
.tik__t{font-family:var(--display);text-transform:uppercase;font-size:1.06rem;letter-spacing:.02em}
.tik__n{margin-left:auto;font:800 .76rem/1 var(--sans);letter-spacing:.13em;color:var(--or-cl);white-space:nowrap}

.tik__zone{
  position:relative;height:196px;margin:0 1.1rem;border-radius:14px;overflow:hidden;
  background:radial-gradient(130% 130% at 50% 0%,#1D3055,#0B1424);
  display:grid;place-items:center;touch-action:none;
}
.tik__lot{text-align:center;padding:1rem}
.tik__l{display:block;font:700 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.55rem}
.tik__g{
  display:block;font-family:var(--display);line-height:1;
  font-size:clamp(2.3rem,1.3rem + 3.4vw,3.5rem);
  background:linear-gradient(92deg,var(--or-cl),var(--or) 58%,var(--or-f));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tik__d{display:block;margin-top:.55rem;color:var(--txt-2);font-size:.97rem}
.tik__c{position:absolute;inset:0;width:100%;height:100%;cursor:grab;transition:opacity .5s var(--ease)}
.tik__c:active{cursor:grabbing}
.tik__main{
  position:absolute;left:50%;top:50%;margin:24px 0 0 -26px;
  width:52px;height:52px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.75);box-shadow:0 0 0 6px rgba(255,255,255,.14);
  animation:gratte 2.6s var(--ease) infinite;
}
@keyframes gratte{0%,100%{transform:translateX(-58px) scale(.96)}50%{transform:translateX(58px) scale(1)}}
.tik.est-gagne .tik__c{opacity:0;pointer-events:none}
.tik.est-gagne .tik__main,.tik.a-gratte .tik__main{display:none}
.tik.est-gagne .tik__lot{animation:lotIn .62s var(--ease)}
@keyframes lotIn{0%{transform:scale(.84)}58%{transform:scale(1.07)}100%{transform:scale(1)}}
.conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.conf i{position:absolute;left:50%;top:50%;width:7px;height:11px;border-radius:2px;opacity:0;animation:conf 1.1s var(--ease) forwards}
@keyframes conf{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rz))}}

.tik__p{
  position:relative;margin-top:1.15rem;padding:1.15rem 1.2rem 1.35rem;
  text-align:center;border-top:1px dashed var(--ligne-f);
}
.tik__p::before,.tik__p::after{
  content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;
  background:var(--nuit);border:1px solid var(--ligne-f);
}
.tik__p::before{left:-12px}
.tik__p::after{right:-12px}
.tik__etat{font-size:.9rem;color:var(--txt-2);margin-bottom:.9rem}
.tik.est-gagne .tik__etat{color:var(--wa);font-weight:700}
.tik__b{
  background:transparent;border:1.6px solid var(--ligne-f);color:var(--txt);
  border-radius:999px;padding:.62rem 1.25rem;font:700 .9rem/1 var(--sans);cursor:pointer;
  transition:background .2s,border-color .2s;
}
.tik__b:hover{background:rgba(255,255,255,.07);border-color:var(--or)}
.tik.est-gagne .tik__b{display:none}
.tik__wa{display:none}
.tik.est-gagne .tik__wa{display:inline-flex}
.tik__c2{margin-top:.95rem;font-size:.78rem;color:var(--txt-3)}

/* ══════════════ 3 · Sans / Avec ══════════════ */
.pq{padding:clamp(3.6rem,9vw,7rem) 0}
.pq__duo{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,2.6vw,2rem);align-items:stretch}
.pq__c{
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--ligne);background:var(--nuit-2);
}
.pq__c h3{
  display:flex;align-items:center;gap:.55em;
  font-family:var(--display);text-transform:uppercase;font-size:1.32rem;
  margin-bottom:1.2rem;
}
.pq__c ul{display:flex;flex-direction:column;gap:.85rem}
.pq__c li{position:relative;padding-left:1.3rem;color:var(--txt-2);font-size:.99rem;line-height:1.5}
.pq__c li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%}
.pq__c--non{background:#0A101C;color:var(--txt-3)}
.pq__c--non h3{color:#E2E8F2}
.pq__c--non h3 .ic{color:#D1495B}
.pq__c--non li::before{background:#D1495B;opacity:.75}
.pq__c--oui{
  background:linear-gradient(165deg,rgba(242,107,10,.13),rgba(242,107,10,.03) 52%),var(--nuit-3);
  border-color:rgba(242,107,10,.34);
  box-shadow:0 34px 70px -46px rgba(242,107,10,.75);
}
.pq__c--oui h3{color:#fff}
.pq__c--oui h3 .ic{color:var(--wa)}
.pq__c--oui li{color:var(--txt)}
.pq__c--oui li::before{background:var(--or)}
.pq__c--oui .btn{margin-top:1.5rem;width:100%}
.pq__fleche{display:flex;align-items:center;color:var(--or);opacity:.8}
.pq__fleche svg{width:60px;height:24px}

/* ══════════════ 3 · L'itinéraire ══════════════ */
.iti{padding:clamp(3rem,7vw,5rem) 0 0;position:relative;background:linear-gradient(to bottom,var(--nuit),#050910 45%,var(--nuit))}
.iti__piste{position:relative}
.iti__colle{position:relative}
.iti__dedans{width:100%}
.iti__intro{
  width:100%;max-width:var(--cage);margin:0 auto clamp(1rem,2.2vw,1.7rem);padding-inline:var(--pad);
}
.iti__intro .tt__oeil{margin-bottom:.6rem}
.iti__h{
  font-family:var(--display);text-transform:uppercase;line-height:1;
  font-size:clamp(1.55rem,1rem + 2.1vw,2.6rem);
}
.iti__panneau{
  width:100%;max-width:var(--cage);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(1.2rem,3.4vw,3rem);align-items:center;
}

/* Sans JS : la section reste une simple liste, tout est lisible. */
.js-iti .iti__piste{height:420vh}
.js-iti .iti__colle{position:sticky;top:0;height:100svh;padding-top:var(--h-tete);display:flex;align-items:center}
.js-iti .iti__panneau{height:min(68svh,578px)}
.js-iti .iti__cartes{position:relative;height:100%}
.js-iti .pr{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:translateY(30px) scale(.985);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js-iti .pr.est{opacity:1;transform:none;pointer-events:auto}

.iti__carte{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:.9rem;min-width:0}
.carte{width:100%;height:auto;max-height:100%;flex:0 1 auto}
.pt__halo{fill:var(--or);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .45s,transform .45s var(--ease)}
.pt__o{fill:#0B1322;stroke:#3C5178;stroke-width:3.4;transition:fill .35s,stroke .35s}
.pt text{
  font:800 25px/1 var(--sans);fill:var(--txt-3);letter-spacing:.01em;
  transition:fill .35s,font-size .3s;
}
.pt.est .pt__halo{opacity:.2;transform:scale(1)}
.pt.est .pt__o{fill:var(--or);stroke:#FFD6AE}
.pt.est text{fill:#fff}
.pt.fait .pt__o{fill:#A85F17;stroke:#E09B4E}
.pt.fait text{fill:var(--txt-2)}
.iti__jauge{height:4px;border-radius:4px;background:var(--ligne);overflow:hidden;flex:none}
.iti__jauge i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--or-cl),var(--or))}

.iti__cartes{min-width:0;display:flex;flex-direction:column;gap:1.4rem}
.pr{
  display:flex;flex-direction:column;
  background:linear-gradient(168deg,var(--nuit-3),var(--nuit-2));
  border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.9rem);
  box-shadow:0 40px 80px -50px #000;
  overflow:hidden;
}
.pr__n{
  font-family:var(--display);font-size:.95rem;letter-spacing:.14em;
  color:var(--or-cl);margin-bottom:.7rem;
}
.pr__img{border-radius:12px;overflow:hidden;margin-bottom:1.1rem;flex:1 1 auto;min-height:0}
.pr__img img{width:100%;height:100%;min-height:130px;object-fit:cover}
.pr__h{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,1.1rem + 1.5vw,2.4rem);margin-bottom:.6rem}
.pr__p{color:var(--txt-2);font-size:1rem}
.pr__p strong{color:#fff;font-weight:700}
.pr__prix{
  margin-top:.9rem;font-size:.92rem;color:var(--txt-2);
  border-top:1px dashed var(--ligne);padding-top:.8rem;
}
.pr__prix b{color:var(--or-cl);font-family:var(--display);font-weight:400;font-size:1.28rem;letter-spacing:.01em}
.pr__cta{
  margin-top:1rem;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:800;color:var(--or-cl);font-size:.95rem;
  border-bottom:2px solid rgba(242,107,10,.4);padding-bottom:.15rem;
  transition:color .2s,border-color .2s,gap .2s;
}
.pr__cta:hover{color:#fff;border-color:#fff;gap:.7em}

/* ══════════════ 4 · Le véhicule ══════════════ */
.veh{padding:clamp(3.6rem,9vw,7rem) 0}
.veh__g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.veh__p{color:var(--txt-2);margin-top:1.2rem;max-width:42ch}
.veh__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.veh__chips li{
  font:700 .82rem/1 var(--sans);color:var(--txt-2);
  border:1px solid var(--ligne);border-radius:999px;padding:.62em .95em;
  background:rgba(255,255,255,.03);
}
.veh__grand{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ligne);box-shadow:0 50px 90px -50px #000}
.veh__grand img{width:100%;height:auto}
.veh__petits{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.7rem}
.veh__petits img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;border:1px solid var(--ligne)}

/* ══════════════ 5 · Tarifs (panneau clair) ══════════════ */
.tar{
  background:var(--creme);color:var(--encre);
  padding:clamp(3.6rem,9vw,7rem) 0;
}
.tar .tt__oeil{color:var(--or-t)}
.tar .tt__s{color:var(--encre-2)}
.tar .or{background:linear-gradient(92deg,var(--or),var(--or-t));-webkit-background-clip:text;background-clip:text;color:transparent}
.tar__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.4vw,1.6rem);align-items:start}
.tar__c{
  background:#fff;border:1px solid var(--creme-2);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,1.9rem);
  box-shadow:0 2px 4px rgba(14,17,23,.03),0 26px 54px -30px rgba(14,17,23,.22);
}
.tar__c--mise{background:linear-gradient(168deg,#FFF6EE,#fff 55%);border-color:#F6DCC4}
.tar__h{
  display:flex;align-items:center;gap:.6em;
  font-family:var(--display);text-transform:uppercase;font-size:1.2rem;
  padding-bottom:1rem;margin-bottom:.5rem;border-bottom:2px solid var(--creme-2);
}
.tar__pic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:9px;background:var(--or);color:#fff;flex:none}
.tar__pic svg{width:1.1rem;height:1.1rem}
.tar__l div{display:flex;align-items:baseline;gap:.6rem;padding:.6rem 0;border-bottom:1px dashed var(--creme-2)}
.tar__l div:last-child{border-bottom:0}
.tar__l dt{flex:1;color:var(--encre-2);font-size:.96rem}
.tar__l dd{font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--encre);white-space:nowrap}
.tar__l .est dt{color:var(--encre);font-weight:700}
.tar__l .est dd{color:var(--or-t)}
.tar__note{margin:1.1rem 0 1.2rem;color:var(--encre-2);font-size:.94rem}
.tar__c--mise .btn{width:100%}

/* ══════════════ 6 · Compris ══════════════ */
.inc{padding:clamp(3.6rem,9vw,6.5rem) 0;background:var(--nuit-2);border-block:1px solid var(--ligne)}
.inc__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(.9rem,2vw,1.3rem)}
.inc__g li{
  position:relative;padding:1.3rem 1.3rem 1.3rem 3.3rem;
  border:1px solid var(--ligne);border-radius:var(--r);
  background:rgba(255,255,255,.025);color:var(--txt-2);font-size:.95rem;line-height:1.5;
}
.inc__g li b{display:block;color:#fff;font-size:1.02rem;font-weight:800;margin-bottom:.25rem}
.inc__g li::before{
  content:"";position:absolute;left:1.2rem;top:1.45rem;width:1.25rem;height:1.25rem;
  background:var(--or);border-radius:50%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/68% no-repeat,linear-gradient(#000,#000);
  mask-composite:exclude;-webkit-mask-composite:xor;
}

/* ══════════════ 7 · Avis ══════════════ */
.av{padding:clamp(3.6rem,9vw,6.5rem) 0;overflow:hidden}
.av__piste{margin-top:clamp(1.4rem,3vw,2.4rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.av__v{display:flex;gap:1.1rem;width:max-content;animation:defile 58s linear infinite}
.av__piste:hover .av__v{animation-play-state:paused}
.avis{
  width:330px;flex:none;
  background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r-lg);
  padding:1.5rem;
}
.avis__e{color:var(--or-cl);letter-spacing:.14em;font-size:.95rem;margin-bottom:.7rem}
.avis__t{color:var(--txt-2);font-size:.97rem;line-height:1.55}
.avis__q{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--ligne)}
.avis__i{
  width:2.2rem;height:2.2rem;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--or),var(--or-f));color:#fff;font-weight:800;font-size:.9rem;
}
.avis__n{font-weight:800;font-size:.92rem;line-height:1.3}
.avis__n span{display:block;font-weight:500;font-size:.8rem;color:var(--txt-3)}

/* ══════════════ 8 · FAQ ══════════════ */
.faq{padding:clamp(3.6rem,9vw,6.5rem) 0;background:var(--nuit-2);border-top:1px solid var(--ligne)}
.faq__l{display:flex;flex-direction:column;gap:.7rem}
.faq details{border:1px solid var(--ligne);border-radius:var(--r);background:rgba(255,255,255,.025);overflow:hidden}
.faq details[open]{border-color:rgba(242,107,10,.4);background:rgba(242,107,10,.05)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 3.2rem 1.15rem 1.3rem;position:relative;
  font-weight:700;font-size:1.03rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.3rem;top:50%;width:14px;height:14px;margin-top:-7px;
  background:var(--or-cl);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details div{padding:0 1.3rem 1.3rem;color:var(--txt-2);font-size:.99rem}

/* ══════════════ 9 · Appel final ══════════════ */
.fin{position:relative;isolation:isolate;padding:clamp(4rem,10vw,7.5rem) 0;text-align:center;overflow:hidden}
.fin__fond{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 100% at 50% 108%,rgba(242,107,10,.34),transparent 66%),
    radial-gradient(50% 70% at 12% 0%,rgba(22,41,79,.8),transparent 70%),
    var(--nuit);
}
.fin__fond::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--ligne) 1px,transparent 1px),linear-gradient(90deg,var(--ligne) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 60%,#000,transparent);
  mask-image:radial-gradient(60% 60% at 50% 60%,#000,transparent);
  opacity:.55;
}
.fin__in{display:flex;flex-direction:column;align-items:center}
.fin__h{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.2rem,1.1rem + 4.4vw,4.6rem);line-height:.95;
  margin:1.3rem 0 1.1rem;text-wrap:balance;
}
.fin__s{color:var(--txt-2);max-width:52ch;font-size:1.06rem}
.fin__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2rem;margin-top:2.2rem}
.fin__tel{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.fin__tel span{font-size:.82rem;color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.fin__tel strong{font-family:var(--display);font-size:2rem;letter-spacing:.02em;color:#fff}
.fin__tel:hover strong{color:var(--or-cl)}

/* ══════════════ Pied ══════════════ */
.pied{background:#05080F;border-top:1px solid var(--ligne);padding:clamp(2.4rem,5vw,3.4rem) 0 1.6rem}
.pied__in{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;justify-content:space-between;align-items:flex-start}
.pied__a p{margin-top:.9rem;color:var(--txt-3);font-size:.9rem;line-height:1.6}
.pied__b{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.pied__l{display:inline-flex;align-items:center;gap:.4em;color:var(--txt-2);font-weight:700;font-size:.95rem}
.pied__l:hover{color:var(--or-cl)}
.pied__c{
  max-width:var(--cage);margin:2rem auto 0;padding-inline:var(--pad);
  color:var(--txt-3);font-size:.8rem;border-top:1px solid var(--ligne);padding-top:1.4rem;
}
.pied__c a{color:var(--txt-2);text-decoration:underline;text-underline-offset:2px}

/* ══════════════ Notifications ══════════════ */
.notifs{
  position:fixed;left:clamp(.8rem,2vw,1.4rem);bottom:clamp(.8rem,2vw,1.4rem);z-index:55;
  display:flex;flex-direction:column-reverse;gap:.6rem;
  width:min(320px,calc(100vw - 1.8rem));pointer-events:none;
}
.notif{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(12,20,34,.94);
  border:1px solid var(--ligne-f);border-left:3px solid var(--or);
  border-radius:13px;padding:.75rem .9rem;
  box-shadow:0 26px 50px -26px #000;
  backdrop-filter:blur(12px);
  opacity:0;transform:translateX(-22px) scale(.96);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:auto;
}
.notif.vu{opacity:1;transform:none}
.notif__i{
  width:2.15rem;height:2.15rem;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--or-voile);color:var(--or-cl);
}
.notif__i svg{width:1.25rem;height:1.25rem;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notif__c{min-width:0;line-height:1.35}
.notif__t{font-size:.87rem;color:var(--txt);display:block}
.notif__t b{font-weight:800}
.notif__q{font-size:.74rem;color:var(--txt-3);font-weight:700}
.notif__x{
  margin-left:auto;flex:none;width:1.5rem;height:1.5rem;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--txt-3);font-size:1rem;line-height:1;display:grid;place-items:center;
}
.notif__x:hover{background:rgba(255,255,255,.08);color:#fff}

/* ══════════════ Barre mobile ══════════════ */
.barre{
  position:fixed;inset:auto 0 0;z-index:58;display:none;gap:.6rem;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(7,12,22,.94);backdrop-filter:blur(14px);border-top:1px solid var(--ligne);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.barre.vu{transform:none}
.barre__t{
  display:grid;place-items:center;width:52px;flex:none;border-radius:13px;
  background:rgba(255,255,255,.08);color:#fff;
}
.barre__t .ic{width:1.35rem;height:1.35rem}
.barre__w{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.55em;
  background:var(--wa);color:#05310F;font-weight:800;border-radius:13px;padding:.95rem 1rem;
}
.barre__w .ic{width:1.35rem;height:1.35rem}

/* ══════════════ Adaptations ══════════════ */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:2.4rem}
  .tel{justify-self:start;width:min(100%,400px)}
  .hero{min-height:auto}
}
@media (max-width:980px){
  .pq__duo{grid-template-columns:1fr}
  .pq__fleche{justify-self:center;transform:rotate(90deg)}
  .veh__g{grid-template-columns:1fr}
  .iti__intro{margin-bottom:.9rem}
  .iti__h{font-size:clamp(1.25rem,.9rem + 1.8vw,1.9rem)}
  .iti__panneau{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:1rem}
  .js-iti .iti__panneau{height:min(74svh,660px)}
  .iti__carte{height:auto;gap:.7rem}
  .carte{max-height:30svh}
  .pt text{font-size:27px}
  .js-iti .iti__cartes{height:100%;min-height:200px}
  .pr{justify-content:center}
  .pr__img{display:none}
  .pr__h{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)}
}
@media (max-width:820px){
  .tete__tel span{display:none}
  .tete__tel{padding:.5rem}
  .tete__d .btn--wa{display:none}
  .logo__m{height:40px}
  .logo__w{height:22px}
  .logo__mot{font-size:1.2rem}
  .barre{display:flex}
  .notifs{bottom:calc(4.9rem + env(safe-area-inset-bottom))}
  /* En portrait, le dégradé latéral couvrirait toute l'image : on repasse
     à un voile vertical, assez dense pour le texte, assez clair pour la route. */
  .hero__voile{background:linear-gradient(to bottom,rgba(5,8,15,.93) 0%,rgba(5,8,15,.76) 46%,rgba(5,8,15,.88) 80%,var(--nuit) 100%)}
  .hero__rayons{background:radial-gradient(64% 30% at 24% 78%,rgba(255,150,50,.22),transparent 72%)}
  .hero__fleche{display:none}
  .fin__cta{flex-direction:column;gap:1.4rem}
  .fin__tel{align-items:center}
}
@media (max-width:560px){
  .btn--xl{width:100%;padding:1.05rem 1.2rem}
  .pastille{font-size:.68rem;letter-spacing:.08em;padding:.55em .85em}
  .logo__w{display:none}
  .btn__long{display:none}
  .btn__court{display:inline}
  .tik__t{font-size:.95rem}
  .tik__n{font-size:.7rem;letter-spacing:.1em}
  .tik__zone{height:172px}
  .tik__wa{width:100%}
  .hero__cta{gap:.7rem}
  .tel__etiq--1{left:-6px}
  .tel__etiq--2{right:-4px}
    .notifs{width:calc(100vw - 1.6rem)}
}

/* ─── Confort & impression ─── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero__video{animation:none;transform:none}
}
@media print{
  .js-rev [data-rev]{opacity:1!important;transform:none!important}
  .tete,.barre,.notifs,.hero__fond,.hero__fleche,.ruban{display:none!important}
  body{background:#fff;color:#000}
  .js-iti .iti__piste{height:auto}
  .js-iti .iti__colle{position:static;height:auto}
  .js-iti .pr{position:static;opacity:1!important;transform:none!important;page-break-inside:avoid}
  .tik__c,.tik__main{display:none!important}
}