/* ============================================================
   TRANSFERT VIP - feuille de style
   ============================================================ */

/* --- Jetons ------------------------------------------------ */
:root{
  --noir:#0B0B0C;
  --noir-2:#131316;
  --noir-3:#1C1C20;
  --creme:#F7F4EF;
  --creme-2:#EDE7DD;
  --or:#C9A961;
  --or-clair:#E6D2A4;
  --or-fonce:#8E7237;
  --or-sur-clair:#6E5726;
  --texte-clair:#E9E5DF;
  --texte-doux:#C8C3BB;
  --texte-sombre:#16161A;
  --texte-sombre-doux:#454239;
  --trait:rgba(201,169,97,.28);
  --trait-sombre:rgba(20,20,22,.12);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --gouttiere:clamp(20px,5vw,64px);
  --large:1320px;
  --etroit:820px;
  --section:clamp(72px,9vw,132px);

  --ease:cubic-bezier(.16,.84,.44,1);
}

/* --- Base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--noir);color:var(--texte-clair);
  font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;font-variant-numeric:lining-nums}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}

/* --- Utilitaires ------------------------------------------- */
.enveloppe{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}
.enveloppe--etroite{max-width:var(--etroit)}
.section{padding-block:var(--section)}
.section--clair{background:var(--creme);color:var(--texte-sombre)}
.section--clair .surtitre{color:var(--or-fonce)}
.section--clair .plomb,.section--clair .prose{color:var(--texte-sombre-doux)}
.section--noir2{background:var(--noir-2)}
.centre{text-align:center}
.saut-lien{position:absolute;left:-9999px;top:0;background:var(--or);color:#111;padding:12px 20px;z-index:200}
.saut-lien:focus{left:12px;top:12px}

.surtitre{
  display:block;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin:0 0 22px;
}
.surtitre--trait{display:flex;align-items:center;gap:14px}
.surtitre--trait::after{content:"";height:1px;flex:1;max-width:90px;background:var(--trait)}
.centre .surtitre--trait{justify-content:center}
.centre .surtitre--trait::before{content:"";height:1px;flex:1;max-width:90px;background:var(--trait)}

.titre-xl{font-size:clamp(2.6rem,7vw,5.2rem)}
.titre-l{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.titre-m{font-size:clamp(1.7rem,3vw,2.5rem)}
.titre-s{font-size:clamp(1.35rem,2vw,1.75rem)}

.plomb{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.75;color:var(--texte-clair);font-weight:400}
.prose{color:var(--texte-doux);max-width:68ch}
.prose strong{color:var(--texte-clair);font-weight:500}
.section--clair .prose strong{color:var(--texte-sombre)}
.prose em{color:var(--or);font-style:normal}
.section--clair .prose em{color:var(--or-fonce)}

.mesure{max-width:64ch}
.centre .mesure,.mesure.centre{margin-inline:auto}

/* --- Boutons ----------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid transparent;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  white-space:nowrap;
}
.bouton--or{background:var(--or);color:#14120C;border-color:var(--or)}
.bouton--or:hover{background:var(--or-clair);border-color:var(--or-clair)}
.bouton--fantome{border-color:rgba(233,229,223,.35);color:var(--texte-clair)}
.bouton--fantome:hover{border-color:var(--or);color:var(--or)}
.section--clair .bouton--fantome{border-color:rgba(20,20,22,.28);color:var(--texte-sombre)}
.section--clair .bouton--fantome:hover{border-color:var(--or-fonce);color:var(--or-fonce)}
.bouton--petit{padding:11px 22px;font-size:11px}
.boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.centre .boutons{justify-content:center}

.lien-fleche{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);
  border-bottom:1px solid var(--trait);padding-bottom:5px;transition:gap .3s var(--ease),border-color .3s var(--ease);
}
.lien-fleche::after{content:"→";transition:transform .3s var(--ease)}
.lien-fleche:hover{border-color:var(--or)}
.lien-fleche:hover::after{transform:translateX(5px)}

/* --- En-tête ----------------------------------------------- */
.entete{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.entete__barre{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  height:var(--h-entete,104px);transition:height .4s var(--ease);
}
.entete.est-collee,.entete.est-ouverte{
  background:rgba(11,11,12,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(201,169,97,.18);
}
.entete.est-collee .entete__barre{--h-entete:76px}
.entete--opaque{background:rgba(11,11,12,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(201,169,97,.18)}

.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:clamp(46px,5.4vw,62px);width:auto;transition:height .4s var(--ease)}
.entete.est-collee .logo img{height:46px}

.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-left:auto}
.nav__lien{
  position:relative;font-size:12px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texte-clair);padding:8px 0;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__lien::before{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--or);transition:right .35s var(--ease);
}
.nav__lien:hover,.nav__lien[aria-current="page"]{color:var(--or)}
.nav__lien:hover::before,.nav__lien[aria-current="page"]::before{right:0}

.menu{position:relative}
.menu__bouton{display:flex;align-items:center;gap:6px}
.menu__bouton::after{
  content:"";position:static;width:5px;height:5px;background:none;flex:0 0 auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.menu.est-ouvert .menu__bouton::after{transform:rotate(225deg) translateY(1px)}
@media (hover:hover) and (pointer:fine){.menu:hover .menu__bouton::after{transform:rotate(225deg) translateY(1px)}}
.menu__tiroir{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  min-width:270px;padding:14px 0;background:rgba(15,15,17,.98);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(201,169,97,.2);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.menu.est-ouvert .menu__tiroir{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover) and (pointer:fine){.menu:hover .menu__tiroir{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.menu__tiroir a{
  display:block;padding:9px 24px;font-size:13px;letter-spacing:.04em;
  color:var(--texte-doux);transition:color .25s var(--ease),background .25s var(--ease);
}
.menu__tiroir a:hover{color:var(--or);background:rgba(201,169,97,.07)}
.menu__titre{
  display:block;padding:14px 24px 7px;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);
}
.menu__titre:first-child{padding-top:4px}
.menu__separateur{height:1px;margin:10px 24px;background:rgba(201,169,97,.16)}

.entete__actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.entete__tel{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.05em;
  color:var(--texte-clair);transition:color .3s var(--ease);white-space:nowrap;
}
.entete__tel:hover{color:var(--or)}
.entete__tel svg{width:15px;height:15px;fill:var(--or);flex:0 0 auto}

/* Burger */
.burger{display:none;width:38px;height:38px;position:relative;margin-left:auto;flex:0 0 auto}
.burger span{
  position:absolute;left:8px;right:8px;height:1.5px;background:var(--texte-clair);
  transition:transform .35s var(--ease),opacity .25s var(--ease),background .3s;
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
.entete.est-ouverte .burger span:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--or)}
.entete.est-ouverte .burger span:nth-child(2){opacity:0}
.entete.est-ouverte .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--or)}

/* Tiroir mobile */
.mobile{
  position:fixed;inset:var(--h-mobile,88px) 0 0;z-index:99;background:var(--noir);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  padding:28px var(--gouttiere) 64px;
}
.mobile.est-ouvert{opacity:1;visibility:visible;transform:none}
.mobile__groupe{border-bottom:1px solid rgba(201,169,97,.14)}
.mobile__lien{
  display:block;padding:18px 0;font-family:var(--serif);font-size:1.6rem;
  color:var(--texte-clair);transition:color .25s var(--ease);
}
.mobile__lien:hover{color:var(--or)}
.mobile__bascule{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left}
.mobile__bascule::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--or);
  border-bottom:1.5px solid var(--or);transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .3s var(--ease);flex:0 0 auto}
.mobile__groupe.est-ouvert .mobile__bascule::after{transform:rotate(225deg) translate(-1px,-1px)}
.mobile__sous{display:none;padding:0 0 20px 4px}
.mobile__groupe.est-ouvert .mobile__sous{display:block}
.mobile__sous a{display:block;padding:9px 0;font-size:14px;letter-spacing:.05em;color:var(--texte-doux)}
.mobile__sous a:hover{color:var(--or)}
.mobile__sous-titre{display:block;margin:16px 0 4px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.mobile__pied{margin-top:34px;display:flex;flex-direction:column;gap:14px}

@media (max-width:1120px){
  .nav{display:none}
  .entete__actions .entete__tel{display:none}
  .burger{display:block}
  .entete__actions{margin-left:auto}
}
@media (max-width:520px){
  .entete__actions .bouton{display:none}
}

/* --- Héros ------------------------------------------------- */
.heros{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.heros--page{min-height:min(72svh,660px)}
.heros__fond{position:absolute;inset:0}
.heros__fond img{width:100%;height:100%;object-fit:cover}
.heros__fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.78) 0%,rgba(11,11,12,.46) 30%,
              rgba(11,11,12,.7) 62%,rgba(11,11,12,.9) 86%,var(--noir) 100%);
}
.heros__contenu{position:relative;z-index:2;width:100%;padding-block:clamp(64px,11vh,132px)}
.heros--accueil .heros__contenu{padding-bottom:clamp(72px,12vh,150px)}
.heros h1{margin-bottom:26px;max-width:16ch}
.heros .plomb{max-width:56ch;color:rgba(233,229,223,.86)}
.heros__fil{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,229,223,.82);text-shadow:0 1px 14px rgba(0,0,0,.75);
}
.heros__fil a{color:rgba(233,229,223,.82);transition:color .25s}
.heros__fil a:hover{color:var(--or)}
.heros__fil span{color:var(--or)}

.defilement{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);
}
.defilement::after{content:"";width:1px;height:40px;background:linear-gradient(180deg,var(--or),transparent);
  animation:coule 2.4s var(--ease) infinite}
@keyframes coule{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.defilement{display:none}}

/* --- Bandeau de réassurance -------------------------------- */
.reassurance{border-block:1px solid rgba(201,169,97,.16);background:var(--noir-2)}
.reassurance__grille{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.reassurance__item{
  padding:34px 26px;text-align:center;border-left:1px solid rgba(201,169,97,.13);
}
.reassurance__item:first-child{border-left:0}
.reassurance__item strong{
  display:block;font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--or);
  margin-bottom:6px;font-variant-numeric:lining-nums;
}
.reassurance__item span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux)}
@media (max-width:820px){
  .reassurance__grille{grid-template-columns:repeat(2,1fr)}
  .reassurance__item:nth-child(3){border-left:0}
  .reassurance__item:nth-child(n+3){border-top:1px solid rgba(201,169,97,.13)}
}

/* --- Bloc média + texte ------------------------------------ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,86px);align-items:center}
.duo--inverse .duo__media{order:2}
.duo__media{position:relative}
.duo__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duo__media--haut img{aspect-ratio:3/4}
.duo__media--large img{aspect-ratio:16/10}
.duo__cadre{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--trait);z-index:-1}
.duo__texte h2{margin-bottom:24px}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:38px}
  .duo--inverse .duo__media{order:0}
  .duo__cadre{inset:12px -12px -12px 12px}
}

/* --- Grille de prestations --------------------------------- */
.entete-section{margin-bottom:clamp(40px,5vw,68px);max-width:70ch}
.entete-section.centre{margin-inline:auto}

.cartes{display:grid;gap:clamp(18px,2.4vw,30px)}
.cartes--2{grid-template-columns:repeat(2,1fr)}
.cartes--3{grid-template-columns:repeat(3,1fr)}
.cartes--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cartes--4{grid-template-columns:repeat(2,1fr)}
  .cartes--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.cartes--2,.cartes--3,.cartes--4{grid-template-columns:1fr}}

.carte{
  position:relative;display:block;overflow:hidden;background:var(--noir-3);
  isolation:isolate;
}
.carte img{width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s var(--ease);filter:saturate(.9) brightness(.88)}
.carte--paysage img{aspect-ratio:4/3}
.carte--large img{aspect-ratio:16/10}
.carte::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,12,.04) 0%,rgba(11,11,12,.12) 45%,rgba(11,11,12,.42) 100%);
  transition:opacity .5s var(--ease);
}
.carte:hover img{transform:scale(1.055);filter:saturate(1) brightness(.98)}
.carte__texte{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(52px,6vw,74px) clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px);
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.62) 20%,
             rgba(11,11,12,.9) 42%,rgba(11,11,12,.97) 100%);
}
.carte__surtitre{
  display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);margin-bottom:9px;
}
.carte__titre{font-family:var(--serif);font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.14;margin:0}
.carte__note{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.carte__lien{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--or);opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.carte__lien::after{content:"→"}
.carte:hover .carte__lien,.carte:focus-visible .carte__lien{opacity:1;transform:none}
@media (hover:none){.carte__lien{opacity:1;transform:none}}

/* Carte texte (sans image) */
.carte-texte{
  padding:clamp(28px,3vw,42px);background:var(--noir-2);border:1px solid rgba(201,169,97,.14);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.carte-texte:hover{border-color:var(--trait);transform:translateY(-3px)}
.section--clair .carte-texte{background:#fff;border-color:var(--trait-sombre)}
.carte-texte__num{
  display:block;font-family:var(--serif);font-size:2.4rem;color:var(--or);line-height:1;margin-bottom:16px;
}
.carte-texte h3{margin-bottom:12px}
.carte-texte p{font-size:16px;line-height:1.66;color:var(--texte-doux)}
.section--clair .carte-texte p{color:var(--texte-sombre-doux)}

/* --- Liste "C'est..." -------------------------------------- */
.liste-vip{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,60px)}
.liste-vip li{
  position:relative;padding:15px 0 15px 30px;font-size:15.5px;line-height:1.55;
  border-bottom:1px solid rgba(201,169,97,.13);color:var(--texte-doux);
}
.liste-vip li::before{
  content:"";position:absolute;left:0;top:24px;width:12px;height:1px;background:var(--or);
}
.section--clair .liste-vip li{border-color:var(--trait-sombre);color:var(--texte-sombre-doux)}
@media (max-width:760px){.liste-vip{grid-template-columns:1fr}}

/* --- Véhicules --------------------------------------------- */
.vehicule{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:center;
  padding-block:clamp(46px,6vw,84px);border-top:1px solid rgba(201,169,97,.15);
}
.vehicule:first-of-type{border-top:0;padding-top:0}
.vehicule--inverse .vehicule__media{order:2}
.vehicule__media img{width:100%;aspect-ratio:16/11;object-fit:cover}
.vehicule__capacite{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:7px 16px;
  border:1px solid var(--trait);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);
}
.vehicule h3{margin-bottom:16px}
.vehicule__equipements{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.vehicule__equipements li{
  padding:6px 14px;border:1px solid rgba(201,169,97,.2);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux);
}
@media (max-width:900px){
  .vehicule{grid-template-columns:1fr;gap:28px}
  .vehicule--inverse .vehicule__media{order:0}
}

/* --- Devise / citation ------------------------------------- */
.devise{position:relative;text-align:center;padding-block:clamp(70px,9vw,120px)}
.devise blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(1.65rem,3.4vw,2.9rem);
  line-height:1.28;font-weight:300;max-width:22ch;margin-inline:auto;
}
.devise blockquote em{color:var(--or);font-style:italic}
.devise__signature{margin-top:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux)}

/* --- Avis -------------------------------------------------- */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
@media (max-width:900px){.avis{grid-template-columns:1fr}}
.avis__carte{
  padding:clamp(26px,3vw,38px);background:var(--noir-2);border:1px solid rgba(201,169,97,.14);
  display:flex;flex-direction:column;
}
.avis__etoiles{color:var(--or);font-size:13px;letter-spacing:.16em;margin-bottom:18px}
.avis__texte{font-size:15.5px;line-height:1.7;color:var(--texte-doux);flex:1}
.avis__personne{display:flex;align-items:center;gap:14px;margin-top:24px;
  padding-top:20px;border-top:1px solid rgba(201,169,97,.14)}
.avis__personne img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.avis__personne span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-clair)}

/* --- Labels ------------------------------------------------ */
.labels{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,64px);margin-top:clamp(34px,4vw,52px)}
.labels li{
  display:grid;place-items:center;padding:18px 22px;background:#fff;border-radius:3px;
  width:clamp(150px,17vw,186px);height:clamp(110px,12vw,130px);
  transition:transform .4s var(--ease);
}
.labels li.li--sombre{background:var(--noir);border:1px solid rgba(201,169,97,.3)}
.labels li:hover{transform:translateY(-3px)}
.labels img{max-height:clamp(58px,7vw,80px);max-width:100%;width:auto;height:auto;object-fit:contain}

/* --- Bandeau d'appel --------------------------------------- */
.appel{position:relative;overflow:hidden;isolation:isolate}
.appel__fond{position:absolute;inset:0;z-index:-1}
.appel__fond img{width:100%;height:100%;object-fit:cover}
.appel__fond::after{content:"";position:absolute;inset:0;background:rgba(11,11,12,.76)}
.appel .enveloppe{position:relative;z-index:1;text-align:center;padding-block:clamp(74px,9vw,124px)}
.appel h2{margin-bottom:20px}

/* --- Programme (road trip) --------------------------------- */
.programme{display:grid;gap:0}
.programme__jour{
  display:grid;grid-template-columns:180px 1fr;gap:clamp(20px,3vw,48px);
  padding-block:26px;border-top:1px solid rgba(201,169,97,.15);
}
.programme__jour:first-child{border-top:0}
.programme__num{
  font-family:var(--serif);font-size:1.2rem;color:var(--or);letter-spacing:.02em;
}
.programme__num small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texte-doux);margin-top:4px}
.programme__etapes li{
  display:grid;grid-template-columns:74px 1fr;gap:16px;padding:5px 0;font-size:15px;color:var(--texte-doux);
}
.programme__etapes b{color:var(--or);font-weight:400;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .programme__jour{grid-template-columns:1fr;gap:12px}
  .programme__etapes li{grid-template-columns:64px 1fr;gap:12px;font-size:14px}
}

/* --- Formules / tarifs ------------------------------------- */
.formules{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)}
@media (max-width:760px){.formules{grid-template-columns:1fr}}
.formule{
  padding:clamp(30px,3.4vw,46px);border:1px solid rgba(201,169,97,.2);background:var(--noir-2);
  display:flex;flex-direction:column;
}
.formule--phare{border-color:var(--or);background:linear-gradient(180deg,rgba(201,169,97,.07),transparent 60%),var(--noir-2)}
.formule__nom{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
.formule__prix{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1;margin-bottom:6px}
.formule__unite{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);margin-bottom:24px}
.formule__inclus li{
  position:relative;padding:9px 0 9px 24px;font-size:14.5px;color:var(--texte-doux);
  border-bottom:1px solid rgba(201,169,97,.1);
}
.formule__inclus li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:1px;background:var(--or)}
.formule__note{margin-top:20px;font-size:12.5px;letter-spacing:.04em;color:var(--or)}

/* --- Grille de destinations (index) ------------------------ */
.villes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  border-top:1px solid rgba(201,169,97,.15);border-left:1px solid rgba(201,169,97,.15)}
.villes a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;font-size:14px;letter-spacing:.05em;color:var(--texte-doux);
  border-right:1px solid rgba(201,169,97,.15);border-bottom:1px solid rgba(201,169,97,.15);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.villes a::after{content:"→";color:var(--or-fonce);transition:transform .3s var(--ease),color .3s}
.villes a:hover{background:var(--noir-3);color:var(--or)}
.villes a:hover::after{transform:translateX(4px);color:var(--or)}
.section--clair .villes{border-color:var(--trait-sombre)}
.section--clair .villes a{border-color:var(--trait-sombre);color:var(--texte-sombre-doux)}
.section--clair .villes a:hover{background:#fff;color:var(--or-fonce)}

/* --- Texte long (CGV, société) ----------------------------- */
.texte-long h2{margin:clamp(38px,4vw,58px) 0 18px;font-size:clamp(1.5rem,2.4vw,2rem)}
.texte-long h2:first-child{margin-top:0}
.texte-long h3{margin:30px 0 12px;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.texte-long p,.texte-long li{font-size:15.5px;line-height:1.75;color:var(--texte-doux)}
.texte-long ol{margin:0 0 1.15em;padding-left:20px;color:var(--texte-doux)}
.texte-long ol li{padding:4px 0}
.texte-long strong{color:var(--texte-clair);font-weight:500}
.texte-long .avertissement{
  padding:24px 28px;border-left:2px solid var(--or);background:var(--noir-2);margin-block:26px;
}

/* --- Contact ----------------------------------------------- */
.contact-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(201,169,97,.16);border:1px solid rgba(201,169,97,.16)}
@media (max-width:820px){.contact-grille{grid-template-columns:1fr}}
.contact-bloc{background:var(--noir);padding:clamp(28px,3.4vw,44px);text-align:center}
.contact-bloc svg{width:26px;height:26px;fill:var(--or);margin-bottom:18px}
.contact-bloc h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin-bottom:14px}
.contact-bloc a,.contact-bloc p{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);
  color:var(--texte-clair);line-height:1.3;transition:color .3s}
.contact-bloc a:hover{color:var(--or)}
.contact-bloc small{display:block;margin-top:12px;font-family:var(--sans);font-size:12.5px;color:var(--texte-doux)}

/* --- Agences ----------------------------------------------- */
.agences{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border-top:1px solid rgba(201,169,97,.15);border-left:1px solid rgba(201,169,97,.15)}
.agences a{display:block;padding:20px 24px;transition:background .3s var(--ease);
  border-right:1px solid rgba(201,169,97,.15);border-bottom:1px solid rgba(201,169,97,.15)}
.agences a:hover{background:var(--noir-3)}
.agences strong{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400;
  color:var(--texte-clair);margin-bottom:4px}
.agences span{font-size:12.5px;color:var(--or);word-break:break-all}
.agences a:hover span{color:var(--or)}

/* --- Hôtels ------------------------------------------------ */
.hotels{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(16px,2vw,26px)}
.hotel{background:var(--noir-2);border:1px solid rgba(201,169,97,.13);overflow:hidden}
.hotel img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--ease)}
.hotel:hover img{transform:scale(1.05)}
.hotel__corps{padding:22px 24px 26px}
.hotel h3{font-family:var(--serif);font-size:1.22rem;margin-bottom:8px}
.hotel p{font-size:13.5px;color:var(--texte-doux);margin:0}

/* --- Pied de page ------------------------------------------ */
.pied{background:var(--noir-2);border-top:1px solid rgba(201,169,97,.16);
  padding-block:clamp(52px,6vw,82px) 0}
.pied__haut{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,60px)}
@media (max-width:960px){.pied__haut{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pied__haut{grid-template-columns:1fr;gap:34px}}
.pied__logo img{height:52px;width:auto;margin-bottom:20px}
.pied__intro{font-size:14px;line-height:1.7;color:var(--texte-doux);max-width:34ch}
.pied h4{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin-bottom:18px}
.pied li{margin-bottom:10px}
.pied li a{font-size:14px;color:var(--texte-doux);transition:color .25s var(--ease)}
.pied li a:hover{color:var(--or)}
.pied__contact a{display:block;font-size:15px;color:var(--texte-clair);margin-bottom:10px;transition:color .25s}
.pied__contact a:hover{color:var(--or)}
.reseaux{display:flex;gap:12px;margin-top:22px}
.reseaux a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(201,169,97,.24);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.reseaux a:hover{border-color:var(--or);background:rgba(201,169,97,.1)}
.reseaux svg{width:16px;height:16px;fill:var(--texte-doux);transition:fill .3s}
.reseaux a:hover svg{fill:var(--or)}

.pied__villes{padding-block:26px;border-top:1px solid rgba(201,169,97,.13);
  font-size:13px;color:var(--texte-doux);line-height:2}
.pied__villes a{color:var(--texte-doux);transition:color .25s}
.pied__villes a:hover{color:var(--or)}
.pied__villes span{color:var(--or);margin-inline:8px}

.pied__legal{padding-block:24px 30px;border-top:1px solid rgba(201,169,97,.13);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--texte-doux)}
.pied__legal a{transition:color .25s}
.pied__legal a:hover{color:var(--or)}
.pied__mentions{padding-bottom:34px;font-size:11.5px;line-height:1.9;color:#9A958E}

/* --- Barre mobile d'appel ---------------------------------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  grid-template-columns:1fr 1fr;border-top:1px solid rgba(201,169,97,.24);
  background:rgba(11,11,12,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.barre-mobile a{
  display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.barre-mobile a:first-child{color:var(--texte-clair);border-right:1px solid rgba(201,169,97,.2)}
.barre-mobile a:last-child{background:var(--or);color:#14120C}
.barre-mobile svg{width:14px;height:14px;fill:currentColor}
@media (max-width:760px){
  .barre-mobile{display:grid}
  body{padding-bottom:52px}
}

/* --- Apparition au défilement ------------------------------ */
.apparait{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.apparait{opacity:1;transform:none}}

/* --- Rythme entre sections de même fond -------------------- */
.section + .section{padding-top:calc(var(--section) * .56)}
.section--clair + .section:not(.section--clair),
.section:not(.section--clair) + .section--clair,
.section--noir2 + .section:not(.section--noir2):not(.section--clair),
.section:not(.section--noir2):not(.section--clair) + .section--noir2{padding-top:var(--section)}

/* --- Réglages fins ----------------------------------------- */
.labels{list-style:none}
.formule__prix{font-variant-numeric:lining-nums}
.programme__num{font-variant-numeric:lining-nums}
.carte__titre{text-wrap:balance}
.titre-xl,.titre-l,.titre-m{text-wrap:balance}
.heros h1{text-shadow:0 2px 30px rgba(0,0,0,.45)}
.heros .plomb{text-shadow:0 1px 18px rgba(0,0,0,.5)}

/* --- Carte à panneau (image + texte sur fond plein) --------- */
.carte--panneau{display:flex;flex-direction:column;background:var(--noir-3)}
.carte--panneau::after{display:none}
.carte--panneau img{aspect-ratio:4/3;filter:saturate(.95) brightness(.96)}
.carte--panneau .carte__texte{
  position:static;padding:clamp(22px,2.4vw,30px);background:none;flex:1;
  display:flex;flex-direction:column;
}
.carte--panneau .carte__note{flex:1}
.carte--panneau .carte__lien{margin-top:18px}
.section--clair .carte--panneau{background:#fff}
.section--clair .carte--panneau .carte__titre{color:var(--texte-sombre)}
.section--clair .carte--panneau .carte__note{color:var(--texte-sombre-doux)}

/* --- Corrections de lisibilité ----------------------------- */
.heros .surtitre{color:var(--or-clair);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.duo__texte .liste-vip{grid-template-columns:1fr}
.texte-long p,.texte-long li{color:var(--texte-doux)}
.texte-long ol{color:var(--texte-doux)}
.formule__inclus li,.programme__etapes li{color:var(--texte-doux)}
.prose{color:var(--texte-doux)}
.section--clair .prose{color:var(--texte-sombre-doux)}
.carte__note{color:var(--texte-doux)}
.avis__texte{color:var(--texte-doux)}


/* ------------------------------------------------------------------
   Lisibilité sur les sections claires.
   Le doré #C9A961 ne fait que 2,25:1 sur blanc : sur fond clair il cède
   la place à --or-sur-clair (6,9:1). Les cartes, elles, passent en blanc
   avec du texte sombre, sinon elles gardent un texte clair devenu
   invisible sur leur fond.
   ------------------------------------------------------------------ */
.section--clair .surtitre,
.section--clair .prose em,
.section--clair .lien-fleche,
.section--clair .etiquette,
.section--clair .villes a::after,
.section--clair .carte__surtitre,
.section--clair .carte__lien,
.section--clair .carte-texte > span,
.section--clair .reassurance__item strong{color:var(--or-sur-clair)}

.section--clair .bouton--fantome{border-color:rgba(110,87,38,.45);color:var(--texte-sombre)}
.section--clair .bouton--fantome:hover{border-color:var(--or-sur-clair);color:var(--or-sur-clair)}
.section--clair .lien-fleche:hover{border-color:var(--or-sur-clair)}

.section--clair .carte,
.section--clair .carte--panneau{background:#fff;border-color:var(--trait-sombre)}
.section--clair .carte__titre{color:var(--texte-sombre)}
.section--clair .carte__note,
.section--clair .carte-texte p{color:var(--texte-sombre-doux)}

/* Texte courant : même graisse partout, y compris dans les cartes. */
.carte__note,.carte-texte p,.prose p{font-weight:400}

/* Tous les encarts à fond sombre deviennent blancs dans une section claire,
   sinon leur texte, hérité de la section, devient illisible sur leur fond. */
.section--clair .hotel,
.section--clair .avis__carte,
.section--clair .formule,
.section--clair .contact-bloc,
.section--clair .carte-texte{background:#fff;border-color:var(--trait-sombre)}
.section--clair .formule--phare{
  background:linear-gradient(180deg,rgba(110,87,38,.07),transparent 60%),#fff;
  border-color:rgba(110,87,38,.35)}
.section--clair .hotel__corps h3,
.section--clair .avis__personne,
.section--clair .formule__prix{color:var(--texte-sombre)}
.section--clair .avis__texte,
.section--clair .formule__unite{color:var(--texte-sombre-doux)}
.section--clair .avis__etoiles,
.section--clair .formule__nom,
.section--clair .formule__note{color:var(--or-sur-clair)}
.section--clair .villes a:hover,
.section--clair .agences a:hover{background:#fff;color:var(--or-sur-clair)}
.section--clair .hotel p,
.section--clair .hotel li,
.section--clair .contact-bloc p,
.section--clair .formule__inclus li{color:var(--texte-sombre-doux)}
.section--clair .hotel h3{color:var(--texte-sombre)}

/* Texte des vignettes hôtels : 13,5px était trop petit à la lecture. */
.hotel p{font-size:15px;line-height:1.55}


/* Une section claire redéfinit les jetons pour tout ce qu'elle contient :
   les composants suivent sans qu'on ait à les énumérer un par un. */
.section--clair{
  --noir-2:#FFFFFF;
  --noir-3:#FFFFFF;
  --texte-clair:#16161A;
  --texte-doux:#454239;
  --trait:rgba(110,87,38,.22);
}
/* Le bandeau de réassurance reste un îlot sombre : son doré reste vif. */
.section--clair .contact-bloc h3{color:var(--or-sur-clair)}
/* --- Sélecteur de langue ------------------------------------- */
/* Même mécanisme que les menus de la navigation : ouverture au survol
   et au focus, chevron dessiné au trait, aucun script. */
.langues__bouton{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--texte-doux);padding:8px 0;white-space:nowrap;
  transition:color .3s var(--ease);
}
.menu--langue.est-ouvert .langues__bouton{color:var(--or)}
@media (hover:hover) and (pointer:fine){.menu--langue:hover .langues__bouton{color:var(--or)}}

/* Le tiroir s'aligne sur le bord droit : près du bord de l'écran, un
   tiroir centré déborderait. */
.menu__tiroir--langue{
  min-width:150px;left:auto;right:0;padding:8px 0;
  transform:translate(0,10px);
}
.menu--langue.est-ouvert .menu__tiroir--langue{opacity:1;visibility:visible;transform:translate(0,0)}
@media (hover:hover) and (pointer:fine){.menu--langue:hover .menu__tiroir--langue{opacity:1;visibility:visible;transform:translate(0,0)}}
.menu__tiroir--langue a,
.menu__tiroir--langue .langues__actif{
  display:block;padding:9px 20px;font-size:13px;letter-spacing:.04em;
}
.menu__tiroir--langue .langues__actif{color:var(--or);cursor:default}

/* Drapeaux : purement décoratifs, ils accompagnent un texte qui porte
   déjà le sens. Taille fixe pour éviter tout décalage au chargement. */
.langues__drapeau{
  width:20px;height:15px;flex:0 0 auto;object-fit:cover;
  border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.langues__bouton{display:inline-flex;align-items:center;gap:7px}
.menu__tiroir--langue a,
.menu__tiroir--langue .langues__actif{display:flex;align-items:center;gap:10px}


/* Accroche dorée : doré vif sur fond sombre, doré foncé sur fond clair. */
.accroche-or{color:var(--or)}
.section--clair .accroche-or{color:var(--or-sur-clair)}

/* Vignette d'hôtel devenue cliquable : même comportement que les cartes. */
a.hotel{display:block;color:inherit}
a.hotel:hover h3{color:var(--or)}
.section--clair a.hotel:hover h3{color:var(--or-sur-clair)}

/* --- Apparition des grilles de cartes ------------------------
   Les cartes d'une grille apparaissaient toutes ensemble, avec un
   glissement de 22 px : le bloc entier semblait sauter. On raccourcit
   le mouvement et on décale légèrement chaque carte, ce qui donne une
   arrivée en douceur plutôt qu'un à-coup.
   ------------------------------------------------------------- */
.cartes .apparait,
.hotels .apparait,
.avis .apparait{
  transform:translateY(9px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.cartes .apparait:nth-child(2),
.hotels .apparait:nth-child(2),
.avis .apparait:nth-child(2){transition-delay:.07s}
.cartes .apparait:nth-child(3),
.hotels .apparait:nth-child(3),
.avis .apparait:nth-child(3){transition-delay:.14s}
.cartes .apparait:nth-child(4),
.hotels .apparait:nth-child(4){transition-delay:.21s}
.cartes .apparait:nth-child(n+5),
.hotels .apparait:nth-child(n+5){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .cartes .apparait,.hotels .apparait,.avis .apparait{transition-delay:0s!important}
}

/* --- Cartes dont le texte est posé SUR la photo ---------------
   Trois assombrissements se cumulaient : l'image filtrée à 88 %, un
   voile à 42 % et un dégradé montant à 97 %. Le bas de la carte était
   quasiment noir : ni la photo ni le titre n'étaient lisibles.
   Et en section claire le titre passait en sombre sur ce noir.
   Le texte de ces cartes est toujours clair, quel que soit le fond de
   la section : il est posé sur la photo, pas sur la page.
   ------------------------------------------------------------- */
.carte:not(.carte--panneau) img{filter:saturate(.95) brightness(.97)}
.carte:not(.carte--panneau):hover img{filter:saturate(1) brightness(1)}
.carte:not(.carte--panneau)::after{
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.05) 55%,rgba(11,11,12,.18) 100%);
}
.carte:not(.carte--panneau) .carte__texte{
  background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.30) 28%,
             rgba(11,11,12,.68) 62%,rgba(11,11,12,.82) 100%);
}
.carte:not(.carte--panneau) .carte__titre{
  color:#E9E5DF;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.carte:not(.carte--panneau) .carte__note{color:#D6D1C9}
.carte:not(.carte--panneau) .carte__surtitre,
.carte:not(.carte--panneau) .carte__lien{
  color:var(--or-clair);text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* iOS agrandit la page dès qu'on touche un champ dont le texte fait moins
   de 16 px. Le site public n'a pas de formulaire aujourd'hui, mais la règle
   protège tout champ que le propriétaire ajouterait plus tard. */
input,select,textarea{font-size:max(16px,1rem)}

/* --- Confort au doigt ----------------------------------------
   Apple recommande 44 px de haut pour une cible tactile. Plusieurs
   liens n'en faisaient que 18 à 27 : on rate la cible, ou on touche
   le lien d'à côté. On agrandit la zone sensible sans changer ce qui
   est visible, en jouant sur le remplissage plutôt que sur le texte.
   ------------------------------------------------------------- */
.langues__bouton{padding-block:12px}
.heros__fil a,.heros__fil span{padding-block:10px}

@media (max-width:820px){
  .pied ul li a{display:block;padding-block:10px}
  .pied__contact a,.pied__mentions a,.pied__legal a{display:inline-block;padding-block:9px}
  .pied__villes a{display:inline-block;padding-block:7px}
  .lien-fleche{padding-block:9px}
  .contact-bloc a{display:inline-block;padding-block:8px}
}