/*
Theme Name: Location Voiture Réunion
Theme URI: https://locationvoiture-reunion.fr/
Author: Location Voiture Réunion
Description: Thème sur mesure pour la location de véhicules à La Réunion. Direction « Tropical » : vert profond, flamboyant, lagon et vanille, formes arrondies, illustrations vectorielles de l'île. Aucun constructeur de page, aucune dépendance externe.
Version: 10.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: lvr
Tags: business, custom-menu, custom-logo, translation-ready, accessibility-ready
*/

/* ═══════════════════════════════════════════════════════════
   1. JETONS — la palette de l'île
   ═══════════════════════════════════════════════════════════ */
:root{
  --encre:#0B2430;        /* texte */
  --vert:#0A3C4C;         /* bleu profond, identique au pied de page */
  --vert-2:#14788C;
  --feuille:#1E8FA3;      /* bleu clair : ce qui est inclus */
  --vert-c:#E2F0F3;
  --ocean:#14788C;        /* mer */
  --lagon:#2A9AB0;        /* lagon, baleines */
  --lagon-c:#E2F0F3;
  --flamboyant:#E8442F;   /* action, volcan */
  --flam-f:#C8341F;
  --hibiscus:#E8628A;     /* accents rares */
  --vanille:#F6D77A;      /* soleil, prix */
  --vanille-f:#E7C255;
  --sable:#F8EEDC;
  --fond:#FFFCF8;
  --gris:#647E8A;
  --ligne:#DDE9ED;

  /* Alias consommés par l'extension */
  --marine:var(--vert);--marine-2:var(--vert-2);--marine-3:#082C38;
  --soleil:var(--vanille);--soleil-p:var(--vanille-f);--soleil-c:#FDF6E2;
  --lagon-p:#17808F;--sable-2:#EFE0C4;--blanc:#fff;--filet:var(--ligne);--filet-f:#CBDDE4;

  --disp:"Outfit",system-ui,-apple-system,sans-serif;
  --txt:"Instrument Sans",system-ui,sans-serif;
  --mo:"JetBrains Mono",ui-monospace,monospace;
  --serif:var(--disp);--sans:var(--txt);--mono:var(--mo);

  /* Pied de page, ambiance « Lagon » */
  --p-haut:#14788C;
  --p-bas:#0A3C4C;
  --p-crete:#1E6A80;
  --p-mont:#12556A;
  --p-terre:#0A3C4C;
  --p-txt:#A9CEDA;
  --p-filet:rgba(255,255,255,.16);

  --r:24px;
  --rp:99px;
  --max:1220px;
  --lecture:860px;
  --e2:16px;--e3:26px;--e4:44px;--e5:72px;--e6:96px;
  --ez:cubic-bezier(.22,.9,.3,1);
}

/* ═══════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:104px}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--txt);
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--vert-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--flamboyant)}

h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--disp);font-weight:700;
  letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.045em}
h2{font-size:clamp(1.85rem,3.5vw,2.7rem);margin-top:1.8em}
h3{font-size:1.24rem;font-weight:600;letter-spacing:-.025em;margin-top:2em}
h4{font-size:1.06rem;font-weight:600}
p{margin:0 0 1.12em;text-wrap:pretty}
ul,ol{margin:0 0 1.3em;padding-left:1.3em}
li{margin-bottom:.45em}
li::marker{color:var(--feuille)}
strong,b{font-weight:600}

blockquote{margin:2em 0;padding:24px 28px;background:var(--vert-c);border-radius:var(--r);
  font-family:var(--disp);font-weight:500;font-size:1.08rem;line-height:1.5}
blockquote p:last-child{margin:0}

table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:2px solid var(--ligne);border-radius:var(--r);overflow:hidden;margin:2em 0;font-size:.94rem}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ligne);vertical-align:top}
th{font-family:var(--mo);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);font-weight:400;background:var(--vert-c)}
tr:last-child td{border-bottom:none}

hr{border:none;border-top:2px dashed var(--ligne);margin:var(--e5) 0}
::selection{background:var(--vanille);color:var(--encre)}
:focus-visible{outline:3px solid var(--flamboyant);outline-offset:3px;border-radius:6px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:999;background:var(--vert);
  color:#fff;padding:13px 22px;border-radius:var(--rp);width:auto;height:auto;clip:auto}

/* ═══════════════════════════════════════════════════════════
   3. UTILITAIRES
   ═══════════════════════════════════════════════════════════ */
.w{max-width:var(--max);margin:0 auto;padding:0 30px}
.w-lecture{max-width:var(--lecture);margin:0 auto;padding:0 30px}
@media(max-width:600px){.w,.w-lecture{padding:0 20px}}

.sf{font-family:var(--disp);font-style:normal;font-weight:700;color:var(--flamboyant)}
.lab{display:inline-flex;align-items:center;gap:9px;font-family:var(--mo);font-size:.65rem;
  letter-spacing:.2em;text-transform:uppercase;background:var(--vanille);color:var(--encre);
  padding:8px 16px;border-radius:var(--rp);margin-bottom:20px}
.ld{color:var(--gris);font-size:1.06rem;max-width:56ch;margin:20px 0 0}
.tt{max-width:46em;margin-bottom:var(--e4)}
.tt h2{margin-top:0}

/* ═══════════════════════════════════════════════════════════
   4. BOUTONS — pastilles à ombre pleine
   ═══════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--flamboyant);color:#fff;border:none;border-radius:var(--rp);
  padding:16px 32px;font-family:var(--txt);font-weight:600;font-size:.98rem;
  cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--flam-f);
  transition:transform .16s var(--ez),box-shadow .16s var(--ez),background .2s}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--flam-f);color:#fff}
.btn--sol{background:var(--vanille);color:var(--encre);box-shadow:0 5px 0 var(--vanille-f)}
.btn--sol:hover{box-shadow:0 2px 0 var(--vanille-f);color:var(--encre)}
.btn--o{background:var(--ocean);box-shadow:0 5px 0 #0E5C6C}
.btn--o:hover{box-shadow:0 2px 0 #0E5C6C}
.btn--v{background:#fff;color:var(--encre);box-shadow:0 5px 0 var(--ligne)}
.btn--v:hover{box-shadow:0 2px 0 var(--ligne);color:var(--encre)}
.s-marine .btn--v{background:rgba(255,255,255,.14);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.22)}

/* ═══════════════════════════════════════════════════════════
   5. BANDEAU ET NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.top{background:var(--vert);color:#A9CEDA;font-size:.8rem}
.top .w{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:22px}
.top b{color:var(--vanille);font-weight:600}
.top .d{display:none}
@media(min-width:900px){.top .d{display:flex;gap:26px;align-items:center}}

/* Frise de feuilles sous le bandeau */
.frise{height:20px;width:100%;color:var(--feuille);
  background:radial-gradient(circle at 50% 0,transparent 10px,currentColor 10.5px) repeat-x 0 0/20px 20px}


.entete--flottante{position:fixed;top:0;left:0;right:0;z-index:200;
  background:transparent;border:none;transition:background .34s var(--ez),box-shadow .34s var(--ez)}
.entete--flottante .w{display:flex;align-items:center;gap:30px;min-height:88px;
  transition:min-height .3s var(--ez)}
/* Au repos, la navigation est blanche sur le paysage. */
.entete--flottante .mk b,.entete--flottante .menu-principal a{color:#fff}
.entete--flottante .mk small{color:var(--vanille)}
.entete--flottante .menu-principal a:hover,
.entete--flottante .menu-principal .current-menu-item>a{border-color:var(--vanille)}
.entete--flottante .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff}
/* Posée : bleu profond translucide, et plus compacte. */
.entete--flottante.pose{background:rgba(10,60,76,.94);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.entete--flottante.pose .w{min-height:70px}

.mk{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--encre)}
.mk svg{width:50px;height:50px;flex:none}
.mk b{font-family:var(--disp);font-weight:800;font-size:1.06rem;letter-spacing:-.04em;
  line-height:1.14;display:block;max-width:13ch}
.mk small{display:block;font-family:var(--mo);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--feuille);margin-top:4px}

.menu-principal{margin-left:auto;display:none}
.menu-principal ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-size:.93rem;font-weight:500}
.menu-principal li{margin:0;position:relative}
.menu-principal a{color:var(--encre);text-decoration:none;padding:7px 0;display:block;
  border-bottom:2px solid transparent;transition:border-color .18s,color .18s}
.menu-principal a:hover,.menu-principal .current-menu-item>a{border-color:var(--flamboyant)}
.menu-principal .sub-menu{display:none;position:absolute;top:calc(100% + 14px);left:-18px;
  background:#fff;border:2px solid var(--ligne);border-radius:var(--r);padding:10px;min-width:268px;
  flex-direction:column;box-shadow:0 20px 40px -24px rgba(18,36,30,.3)}
.menu-principal li:hover>.sub-menu,.menu-principal li:focus-within>.sub-menu{display:flex}
.menu-principal .sub-menu a{padding:11px 15px;border:none;border-radius:14px}
.menu-principal .sub-menu a:hover{background:var(--vert-c);border:none}
@media(min-width:1080px){.menu-principal{display:block}}

.tel-entete{display:none;align-items:center;gap:8px;font-family:var(--mo);font-size:.85rem;
  color:#fff;text-decoration:none;background:var(--vert-2);padding:11px 20px;
  border-radius:var(--rp);box-shadow:0 4px 0 var(--vert);white-space:nowrap;transition:.16s var(--ez)}
.tel-entete:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--vert);color:#fff}
@media(min-width:790px){.tel-entete{display:inline-flex}}
@media(max-width:1079px){.tel-entete{margin-left:auto}}

.burger{margin-left:auto;background:#fff;border:2px solid var(--ligne);color:var(--encre);
  border-radius:var(--rp);padding:11px 18px;font:inherit;font-size:.85rem;cursor:pointer}
.burger:hover{border-color:var(--encre)}
@media(min-width:1080px){.burger{display:none}}
.menu-mobile{display:none;background:#fff;border-top:2px solid var(--ligne)}
.menu-mobile.ouvert{display:block}
.menu-mobile ul{list-style:none;margin:0;padding:0}
.menu-mobile li{margin:0}
.menu-mobile a{display:block;padding:16px 30px;color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--ligne);font-weight:500}
.menu-mobile .sub-menu a{padding-left:48px;color:var(--gris);font-weight:400}

/* ═══════════════════════════════════════════════════════════
   6. HERO IMMERSIF
   Le paysage commence au premier pixel et passe sous la
   navigation. Le tiers supérieur du panorama est volontairement
   sombre : c'est là que se posent le logo et le menu.
   ═══════════════════════════════════════════════════════════ */
.hero--immersif{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate}
@media(max-width:760px){.hero--immersif{min-height:92svh}}
.hero__sc{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__sc>svg,.hero__sc>img{display:block;width:100%;height:100%;
  max-width:none;object-fit:cover}
/* Aucun élément décoratif ne peut sortir du hero. */
.hero--immersif{contain:paint}
.hero__voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,39,54,.62) 0%,rgba(6,39,54,.12) 26%,
    rgba(6,39,54,0) 46%,rgba(6,39,54,.55) 100%)}
/* La navigation est fixe : le texte doit réserver sa hauteur, sinon il
   passe dessous sur les écrans courts ou avec la barre d'administration. */
.hero__tx{position:relative;z-index:2;width:100%;
  padding-top:calc(88px + clamp(20px,4vh,48px));
  padding-bottom:clamp(56px,8vh,96px)}
.admin-bar .hero__tx{padding-top:calc(120px + clamp(24px,6vh,64px))}
.admin-bar .entete--flottante{top:32px}
@media(max-width:782px){.admin-bar .entete--flottante{top:46px}}

.hero__kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--mo);font-size:.65rem;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);
  padding:9px 18px;border-radius:var(--rp);margin-bottom:24px}
.hero__kick i{width:7px;height:7px;border-radius:50%;background:var(--vanille);
  box-shadow:0 0 0 0 rgba(246,215,122,.7);animation:lvr-pulse 2.4s infinite}
@keyframes lvr-pulse{70%{box-shadow:0 0 0 11px rgba(246,215,122,0)}100%{box-shadow:0 0 0 0 rgba(246,215,122,0)}}

.hero--immersif h1{color:#fff;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:.96;
  letter-spacing:-.05em;margin:0;max-width:15ch;text-shadow:0 4px 34px rgba(6,39,54,.5)}
.hero--immersif h1 em{display:block;font-style:normal;font-weight:400;font-size:.5em;
  letter-spacing:-.035em;color:var(--vanille);margin-top:.14em}
.hero__sous{color:rgba(255,255,255,.9);font-size:1.02rem;max-width:52ch;margin:18px 0 0;
  text-shadow:0 2px 16px rgba(6,39,54,.55)}
.pts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:var(--e3) 0 0;padding:0;
  align-items:center}
.pts li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 17px;
  width:auto;flex:0 0 auto;
  background:var(--vert-c);border:1px solid var(--ligne);border-radius:var(--rp);
  font-size:.87rem;font-weight:500;white-space:nowrap}
.pts svg{width:15px;height:15px;flex:none;color:var(--feuille)}
@media(max-width:600px){.pts li{font-size:.8rem;padding:9px 14px}}

.pts--clair li{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(8px)}
.pts--clair svg{color:var(--vanille)}

/* Version resserrée du hero : les garanties accompagnent le
   formulaire sans lui disputer l'attention. */
.pts--serre{gap:8px;margin-top:var(--e2)}
.pts--serre li{padding:7px 14px;font-size:.8rem;font-weight:500;border-radius:var(--rp)}
.pts--serre svg{width:14px;height:14px}
@media(max-width:600px){
  .pts--serre li{padding:6px 12px;font-size:.75rem}
}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin:var(--e3) 0 0}

/* Le formulaire de recherche, posé dans le hero */
.hero__resa{margin:var(--e3) 0 0;max-width:920px}
.hero__resa .lvr-mini{box-shadow:0 10px 34px -14px rgba(6,39,54,.5),0 6px 0 var(--vanille)}
@media(min-width:900px){.hero__resa .lvr-mini{padding:20px}}
.hero__chif{display:flex;flex-wrap:wrap;gap:18px 36px;margin:var(--e3) 0 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.24)}
.hero__chif b{display:block;font-family:var(--disp);font-weight:800;font-size:1.7rem;
  letter-spacing:-.05em;line-height:1;color:#fff}
.hero__chif span{display:block;font-size:.76rem;color:rgba(255,255,255,.74);margin-top:5px}

.hero__desc{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  font-family:var(--mo);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.62);display:flex;flex-direction:column;align-items:center;gap:9px}
.hero__desc i{width:1px;height:32px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:lvr-desc 2s ease-in-out infinite}
@keyframes lvr-desc{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* Le moteur de réservation remonte sur le bas du hero. */
.section--moteur{padding:0 0 var(--e6);margin-top:-96px;position:relative;z-index:5}
@media(max-width:760px){.section--moteur{margin-top:-72px;padding-bottom:var(--e5)}}

/* Entête des pages intérieures.
   La navigation flotte aussi ici : il faut donc un fond sombre en haut,
   sinon le texte blanc du menu devient illisible. */
.hero-page{position:relative;overflow:hidden;padding:calc(88px + var(--e5)) 0 var(--e5);
  background:linear-gradient(176deg,#062736 0%,#0A3C4C 52%,#12556A 100%);color:#A9CEDA}
.hero-page__houle{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
.hero-page__houle svg{width:100%;height:clamp(46px,6vw,86px);display:block}
.hero-page .w{position:relative;z-index:2}
.hero-page h1{margin:0;max-width:20ch;color:#fff}
.hero-page p{color:#8FB6C6;margin:20px 0 0;max-width:58ch;font-size:1.06rem}
.hero-page .ariane,.hero-page .ariane a{color:rgba(255,255,255,.6)}
.hero-page .ariane a:hover{color:var(--vanille)}
.hero-page .lab{background:rgba(255,255,255,.16);color:#fff}

/* ═══════════════════════════════════════════════════════════
   7. FIL D'ARIANE
   ═══════════════════════════════════════════════════════════ */
.ariane{font-family:var(--mo);font-size:.67rem;letter-spacing:.08em;color:var(--gris);margin-bottom:22px}
.ariane a{color:var(--gris);text-decoration:none}
.ariane a:hover{color:var(--flamboyant)}
.ariane span{margin:0 9px;opacity:.5}

/* ═══════════════════════════════════════════════════════════
   8. SECTIONS
   ═══════════════════════════════════════════════════════════ */
.section{padding:var(--e6) 0}
@media(max-width:760px){.section{padding:var(--e5) 0}}
.s-sable{background:var(--sable)}
.s-marine{background:var(--vert);color:#A9CEDA;position:relative}
.s-marine h1,.s-marine h2,.s-marine h3{color:#fff}
.s-marine .lab{background:rgba(255,255,255,.18);color:#fff}
.s-marine .ld,.s-marine .tt p{color:#8FB6C6}
.s-marine a{color:#fff}
.s-marine table{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.s-marine table th{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.s-marine table th,.s-marine table td{border-color:rgba(255,255,255,.14)}

/* ═══════════════════════════════════════════════════════════
   9. CHIFFRES CLÉS
   ═══════════════════════════════════════════════════════════ */
.chif{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);list-style:none;padding:0;margin:0}
@media(min-width:760px){.chif{grid-template-columns:repeat(4,1fr)}}
.chif li{margin:0;background:#fff;border:2px solid var(--ligne);border-radius:var(--r);padding:24px 24px}
.chif b{display:block;font-family:var(--disp);font-weight:800;font-size:2.3rem;
  line-height:1;letter-spacing:-.05em;color:var(--flamboyant)}
.chif li:nth-child(2) b{color:var(--feuille)}
.chif li:nth-child(3) b{color:var(--lagon)}
.chif li:nth-child(4) b{color:var(--ocean)}
.chif span{display:block;font-size:.79rem;color:var(--gris);margin-top:11px}
.s-marine .chif li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.s-marine .chif span{color:#8FB6C6}

/* ═══════════════════════════════════════════════════════════
   10. GARANTIES
   ═══════════════════════════════════════════════════════════ */
.gars{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.gar-c{background:#fff;border:3px solid var(--encre);border-radius:var(--r);padding:26px 24px;
  box-shadow:0 6px 0 var(--o,var(--feuille));transition:.18s var(--ez)}
.gar-c:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--o,var(--feuille))}
.gar-c .ic{width:56px;height:56px;border-radius:50%;background:var(--f,var(--vert-c));
  display:grid;place-items:center;margin-bottom:18px}
.gar-c .ic svg{width:29px;height:29px;color:var(--o,var(--feuille))}
.gar-c h3{margin:0 0 9px;font-size:1.16rem}
.gar-c p{margin:0;color:var(--gris);font-size:.9rem}
.gar-c .pastille{display:inline-block;margin-top:13px;font-family:var(--mo);font-size:.66rem;
  background:var(--f,var(--vert-c));color:var(--o,var(--feuille));padding:5px 13px;border-radius:var(--rp)}

/* ═══════════════════════════════════════════════════════════
   11. QUATRE MONDES + DESTINATIONS
   ═══════════════════════════════════════════════════════════ */
.mondes,.dest{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(246px,1fr))}
.monde{background:var(--fond);border:3px solid var(--encre);border-radius:var(--r);overflow:hidden;
  box-shadow:0 7px 0 var(--o,var(--feuille));display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:.18s var(--ez)}
.monde:hover{transform:translateY(3px);box-shadow:0 4px 0 var(--o,var(--feuille));color:inherit}
.monde .ill{height:172px;position:relative;overflow:hidden;border-bottom:3px solid var(--encre)}
.monde .ill svg{position:absolute;inset:0;width:100%;height:100%}
.monde .c{padding:20px 22px 22px}
.monde .tag{display:inline-block;font-family:var(--mo);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;background:var(--o,var(--feuille));color:#fff;padding:5px 12px;border-radius:var(--rp)}
.monde h3{margin:11px 0 8px;font-size:1.22rem}
.monde p{margin:0;color:var(--gris);font-size:.89rem}

.dest a{position:relative;overflow:hidden;min-height:330px;display:flex;align-items:flex-end;
  padding:26px;color:#fff;text-decoration:none;background:var(--vert);
  border-radius:var(--r);border:3px solid var(--encre);box-shadow:0 7px 0 var(--feuille)}
.dest a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,77,60,0) 36%,rgba(14,77,60,.9) 100%)}
.dest a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ez)}
.dest a:hover img{transform:scale(1.05)}
.dest .tx{position:relative;z-index:2}
.dest h3{color:#fff;margin:0;font-size:1.32rem}
.dest .m{display:block;font-family:var(--mo);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vanille);margin-bottom:8px}

/* ═══════════════════════════════════════════════════════════
   12. PAGES INTÉRIEURES
   ═══════════════════════════════════════════════════════════ */
/* Sans entête de page, il faut dégager la navigation fixe. */
body:not(.home) main>.section:first-child,
body:not(.home) main>.w:first-child{padding-top:calc(88px + var(--e5))}

.page-grille{display:grid;gap:var(--e4);align-items:start}
@media(min-width:1000px){.page-grille{grid-template-columns:minmax(0,1fr) 316px;gap:64px}}
.contenu>*{max-width:44em}
.contenu>table,.contenu>.faits,.contenu>.lvr-grille,.contenu>.lvr-villes,.contenu>.lvr-faits,
.contenu>.lvr-ticket,.contenu>.lvr-faq,.contenu>.dest,.contenu>.mondes,.contenu>.lvr-autos,
.contenu>.lvr-carte,.contenu>.lvr-trajets,.contenu>.lvr-saisons,.contenu>.lvr-meteo,
.contenu>.lvr-carburant,.contenu>.lvr-paiements,.contenu>.lvr-sommaire,.contenu>.lvr-connexes,
.contenu>.gars,.contenu>.chif{max-width:none}
.contenu>h2:first-child,.contenu>p:first-child{margin-top:0}

.aside{background:#fff;border:3px solid var(--encre);border-radius:var(--r);padding:26px;
  position:sticky;top:108px;box-shadow:0 6px 0 var(--vanille)}
.aside h3{margin:0 0 10px;font-size:1.14rem}
.aside p{font-size:.9rem;color:var(--gris)}
.aside a[href^="tel:"]{white-space:nowrap}
.aside .btn{width:100%;margin-top:var(--e2)}
.aside__g{list-style:none;padding:0;margin:var(--e2) 0 0;font-size:.87rem;color:var(--gris)}
.aside__g li{display:flex;gap:11px;align-items:flex-start;margin:0;padding:10px 0;
  border-bottom:1px dashed var(--ligne);line-height:1.45}
.aside__g li:last-child{border-bottom:none}
.aside__g li::before{content:"";flex:none;width:15px;height:15px;margin-top:5px;background:var(--feuille);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3'/></svg>") center/contain no-repeat}

.faits{background:var(--vert-c);border-radius:var(--r);padding:26px;margin:0 0 var(--e4)}
.faits dl{display:grid;gap:22px;margin:0}
@media(min-width:640px){.faits dl{grid-template-columns:repeat(3,1fr);gap:24px 36px}}
.faits dt{font-family:var(--mo);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vert-2);margin-bottom:6px}
.faits dd{margin:0;font-size:.94rem;line-height:1.5;font-weight:500}

/* ═══════════════════════════════════════════════════════════
   13. ÉTAPES
   ═══════════════════════════════════════════════════════════ */
.etapes{display:grid;gap:24px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
@media(min-width:880px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etapes li{background:#fff;border:3px solid var(--encre);border-radius:var(--r);padding:28px 24px;
  margin:0;position:relative;box-shadow:0 6px 0 var(--vert-c)}
.etapes li::before{content:"";position:absolute;top:-20px;left:24px;width:42px;height:42px;
  border-radius:50%;background:var(--vanille);border:3px solid var(--encre)}
.etapes .n{position:relative;display:block;font-family:var(--mo);font-size:.62rem;
  letter-spacing:.2em;color:var(--vert-2);margin-top:14px}
.etapes h3{margin:12px 0 9px;font-size:1.16rem}
.etapes p{margin:0;color:var(--gris);font-size:.92rem}
.s-marine .etapes li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none}
.s-marine .etapes p{color:#8FB6C6}

/* ═══════════════════════════════════════════════════════════
   14. L'ADDITION
   ═══════════════════════════════════════════════════════════ */
.addition{display:grid;gap:var(--e5);align-items:center}
@media(min-width:1000px){.addition{grid-template-columns:1fr 396px;gap:76px}}
.addition h2{margin-top:0}
.sans-frais{list-style:none;padding:0;margin:var(--e3) 0 0}
.sans-frais li{display:flex;gap:15px;align-items:flex-start;margin:0;padding:14px 0;
  border-bottom:1px dashed rgba(255,255,255,.22);font-size:.95rem}
.sans-frais li:last-child{border-bottom:none}
.sans-frais .x{flex:none;width:22px;height:22px;border-radius:50%;background:var(--flamboyant);
  color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:700;margin-top:2px}
.section:not(.s-marine) .sans-frais li{border-color:var(--ligne)}

/* ═══════════════════════════════════════════════════════════
   15. AVIS — cartes postales
   ═══════════════════════════════════════════════════════════ */
.avis{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(282px,1fr))}
.avis figure{margin:0;background:#fff;border:3px solid var(--encre);border-radius:var(--r);
  padding:26px;position:relative;box-shadow:0 6px 0 var(--vert-c)}
.avis .etoiles{color:var(--vanille-f);letter-spacing:.2em;font-size:.9rem}
.avis blockquote{margin:14px 0 18px;background:none;padding:0;border-radius:0;
  font-family:var(--txt);font-weight:400;font-size:.99rem;line-height:1.58}
.avis figcaption{font-family:var(--mo);font-size:.72rem;color:var(--gris);
  display:flex;align-items:center;gap:11px}
.avis .av{width:34px;height:34px;border-radius:50%;background:var(--feuille);color:#fff;
  display:grid;place-items:center;font-family:var(--txt);font-size:.68rem;font-weight:600}

/* ═══════════════════════════════════════════════════════════
   16. BLOC RÉDACTIONNEL
   ═══════════════════════════════════════════════════════════ */
.bloc-seo{background:var(--sable);color:var(--gris);font-size:.93rem;padding:var(--e6) 0}
.bloc-seo h2{font-size:1.6rem;color:var(--encre);margin:0 0 var(--e3)}
.bloc-seo h3{color:var(--encre);font-size:1.06rem;margin:var(--e3) 0 8px}
.bloc-seo .colonnes{columns:2;column-gap:54px}
.bloc-seo .colonnes h3:first-child{margin-top:0}
@media(max-width:820px){.bloc-seo .colonnes{columns:1}}

/* ═══════════════════════════════════════════════════════════
   17. BLOC FINAL
   ═══════════════════════════════════════════════════════════ */
.final{background:var(--sable);text-align:center;padding:var(--e6) 0 calc(var(--e6) + 20px);
  position:relative;overflow:hidden}
.final h2{margin:0 0 16px}
.final p{color:var(--gris);max-width:46ch;margin:0 auto var(--e3)}

/* ═══════════════════════════════════════════════════════════
   18. LA CÔTE ET LE PIED DE PAGE
   La transition n'est pas une bordure : c'est un paysage qui
   descend de la montagne jusqu'à la mer, sans ligne de coupe.
   ═══════════════════════════════════════════════════════════ */
.cote{position:relative;line-height:0;margin-bottom:-1px}
.cote svg{width:100%;height:clamp(120px,15vw,260px);display:block}

.pied{position:relative;overflow:hidden;color:var(--p-txt);
  background:linear-gradient(178deg,var(--p-haut) 0%,var(--p-bas) 100%);
  padding:var(--e3) 0 34px}

.pied__vie{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pied__houle{position:absolute;top:0;left:0;width:100%;height:110px}
.pied__baleine{position:absolute;inset:0;width:100%;height:100%}
.pied__bulles{position:absolute;inset:0}
.pied__bulles i{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);
  animation:lvr-monte linear infinite}
@keyframes lvr-monte{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.7}
  100%{transform:translateY(-420px) translateX(24px);opacity:0}
}

.pied .w{position:relative;z-index:2}
.pied h2,.pied h4{font-family:var(--mo);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vanille);margin:0 0 18px;font-weight:400}
.pied-grille{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
@media(min-width:1080px){.pied-grille{grid-template-columns:1.5fr repeat(4,1fr);gap:40px}}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin:0}
.pied a{display:block;padding:6px 0;color:var(--p-txt);text-decoration:none;
  transition:color .18s,padding-left .18s}
.pied a:hover{color:#fff;padding-left:5px}
.pied p{font-size:.88rem;line-height:1.8}
.pied .mk{margin-bottom:var(--e2)}
.pied .mk b{color:#fff}
.pied .mk small{color:var(--vanille)}
.pied-paiements{margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--p-filet)}
.pied-label{display:inline-flex;align-items:center;gap:11px;margin:var(--e4) 0 0;padding:15px 22px;
  border:2px solid var(--p-filet);border-radius:var(--rp);font-size:.83rem;
  color:var(--p-txt);width:fit-content;max-width:100%}
.pied-label svg{width:20px;height:20px;color:var(--vanille);flex:none}
.pied-label strong{color:#fff;font-weight:600}
.pied-bas{border-top:1px solid var(--p-filet);margin-top:var(--e4);padding-top:var(--e3);
  font-size:.74rem;line-height:1.9;color:rgba(255,255,255,.44)}

/* ═══════════════════════════════════════════════════════════
   19. APPEL À L'ACTION MOBILE
   ═══════════════════════════════════════════════════════════ */
.cta-mobile{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;display:flex;align-items:center;
  gap:14px;padding:12px 16px;background:#fff;border:3px solid var(--encre);border-radius:var(--rp);
  box-shadow:0 6px 0 var(--flamboyant);transform:translateY(140%);transition:transform .35s var(--ez)}
.cta-mobile.on{transform:none}
.cta-mobile .p{flex:1;min-width:0;line-height:1.2;padding-left:6px}
.cta-mobile .p b{display:block;font-family:var(--disp);font-weight:800;font-size:1.2rem;letter-spacing:-.04em}
.cta-mobile .p span{font-size:.71rem;color:var(--gris)}
.cta-mobile .btn{padding:12px 22px;font-size:.88rem;box-shadow:none}
.cta-mobile .btn:hover{transform:none;box-shadow:none}
@media(min-width:1000px){.cta-mobile{display:none}}
@media(max-width:999px){body.a-cta{padding-bottom:84px}}

/* ═══════════════════════════════════════════════════════════
   20. DIVERS
   ═══════════════════════════════════════════════════════════ */
.pagination{display:flex;gap:8px;margin-top:var(--e4);flex-wrap:wrap}
.pagination .page-numbers{padding:12px 19px;background:#fff;border:2px solid var(--ligne);
  border-radius:var(--rp);text-decoration:none;color:var(--encre);font-size:.9rem}
.pagination .current{background:var(--encre);color:#fff;border-color:var(--encre)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rv.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

@media print{
  .entete,.top,.frise,.menu-mobile,.cta-mobile,.final,.dest,.lvr-resa,.lvr-connexes,.burger{display:none!important}
  body{font-size:11.5pt;color:#000;background:#fff}
  .w,.w-lecture{max-width:none;padding:0}
  .page-grille{display:block}.aside{display:none}
  a{color:#000;text-decoration:none}
  .contenu a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  h2,h3{page-break-after:avoid}
  table,.faits,.lvr-ticket,.gar-c{page-break-inside:avoid}
}

/* Label Qualité Tourisme, en pied de page */
.pied-label{display:flex;align-items:center;gap:11px;margin:var(--e4) 0 0;padding:16px 20px;
  border:2px solid rgba(255,255,255,.22);border-radius:var(--rp);font-size:.83rem;
  color:#BDD8E1;width:fit-content;max-width:100%}
.pied-label svg{width:20px;height:20px;color:var(--vanille);flex:none}
.pied-label strong{color:#fff;font-weight:600}

/* Message d'administration quand l'extension manque */
.lvr-manque{background:#fff;border:3px solid var(--flamboyant);border-radius:var(--r);
  padding:32px;max-width:620px;box-shadow:0 6px 0 var(--flam-f)}
.lvr-manque h2{margin:0 0 12px;font-size:1.4rem;color:var(--flamboyant)}
.lvr-manque p{margin:0 0 14px;color:var(--gris)}

/* Le margouillat cligne de l'œil toutes les six secondes */
.lvr-paupiere{transform-origin:29px 55px;transform:scaleY(0)}
@keyframes lvr-cligne{
  0%,92%,100%{transform:scaleY(0)}
  94%,96%{transform:scaleY(1)}
}
.margouillat .lvr-paupiere{animation:lvr-cligne 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.margouillat .lvr-paupiere{animation:none}}

/* ═══════════════════════════════════════════════════════════
   21. GARDE-FOUS CONTRE LE DÉBORDEMENT
   Un seul élément plus large que l'écran crée une barre de
   défilement horizontale, et toute la page se décale. Ces
   règles rattrapent le cas, y compris pour du contenu venu
   d'une extension tierce.
   ═══════════════════════════════════════════════════════════ */
html,body{max-width:100%;overflow-x:clip}

/* Aucun média ne dépasse son conteneur en largeur. On ne touche pas
   à la hauteur : les SVG de décor sont dimensionnés par leur classe,
   et une règle générale sur la hauteur les écraserait. */
img,video,iframe,table,pre{max-width:100%}
svg{max-width:100%}

/* Les grilles se replient plutôt que de forcer la largeur. */
.pied-grille,.gars,.mondes,.dest,.autos,.avis,.etapes,.chif,.lvr-autos{min-width:0}
.pied-grille>*,.gars>*,.mondes>*,.autos>*,.avis>*,.etapes>*,.chif>*{min-width:0}

/* Une URL ou un mot très long ne pousse plus la mise en page. */
/* La césure libre ne s'applique qu'au contenu rédactionnel : dans une
   navigation, elle replie les entrées lettre par lettre dès que la
   place manque. */
.contenu p,.contenu li,.contenu td,.contenu th,
.pied p,.tt,.ld,h1,h2,h3{overflow-wrap:anywhere}
.menu-principal a,.menu-mobile a,.pied-liens a,.entete-infos,
.mk,.btn,.tel-entete{overflow-wrap:normal;word-break:normal}
.menu-principal a{white-space:nowrap}

/* Les décors sont hors du flux et ne peuvent pas élargir la page. */
.cote,.lvr-vague,.pied__vie{max-width:100vw;overflow:hidden}

/* Bouton translucide, lisible sur le paysage du hero */
.btn--b{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);
  box-shadow:0 6px 0 rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.3)}
.btn--b:hover{background:rgba(255,255,255,.24);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.24)}


/* ═══════════════════════════════════════════════════════════
   22. HAUTEURS DES DÉCORS
   Déclarées en dernier pour rester prioritaires sur les
   garde-fous de la section précédente.
   ═══════════════════════════════════════════════════════════ */
.hero__sc>svg,.hero__sc>img{width:100%;height:100%;max-width:none;object-fit:cover}
.cote>svg{height:clamp(120px,15vw,260px)}
.hero-page__houle>svg{height:clamp(46px,6vw,86px)}
.pied__houle{height:110px}
.pied__baleine{height:100%}
.lvr-vague>svg{height:52px}
@media(max-width:600px){.lvr-vague>svg{height:32px}}
.monde .ill>svg{position:absolute;inset:0;width:100%;height:100%}
.lvr-navette .sc{height:auto}
.mk svg{width:50px;height:50px}
.pied .mk svg{width:50px;height:50px}


/* ═══════════════════════════════════════════════════════════
   23. FILET DE SÉCURITÉ SUR LES ICÔNES
   Un SVG en ligne sans dimension prend la largeur de son
   conteneur. Les icônes portent désormais leurs attributs,
   mais cette règle couvre le cas d'un contenu ajouté à la
   main dans l'éditeur.
   ═══════════════════════════════════════════════════════════ */
:where(p,li,td,th,figcaption,button,label,h1,h2,h3,h4,.lab,.tag,.cat,.pastille) > svg{
  width:1.1em;height:1.1em;flex:none;vertical-align:-.16em}
:where(.btn,.tel-entete,.lien-fleche) svg{width:1.05em;height:1.05em;flex:none}


/* ═══════════════════════════════════════════════════════════
   24. SOUS-MENUS DE LA NAVIGATION FLOTTANTE
   Déclarés en dernier : à spécificité égale, c'est la
   dernière règle qui s'applique. Les placer plus haut
   revenait à laisser du texte blanc sur fond blanc.
   ═══════════════════════════════════════════════════════════ */
.entete--flottante .menu-principal .sub-menu{
  background:var(--vert);
  border:2px solid rgba(255,255,255,.2);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.55)}
.entete--flottante .menu-principal .sub-menu a{
  color:#fff;border:none}
.entete--flottante .menu-principal .sub-menu a:hover,
.entete--flottante .menu-principal .sub-menu a:focus-visible{
  background:rgba(255,255,255,.14);color:var(--vanille)}

/* Une fois la barre posée sur son fond bleu, le sous-menu passe
   en clair pour se détacher de la barre. */
.entete--flottante.pose .menu-principal .sub-menu{
  background:#fff;border-color:var(--ligne)}
.entete--flottante.pose .menu-principal .sub-menu a{color:var(--encre)}
.entete--flottante.pose .menu-principal .sub-menu a:hover,
.entete--flottante.pose .menu-principal .sub-menu a:focus-visible{
  background:var(--vert-c);color:var(--encre)}

/* Le menu mobile s'ouvre sous une barre translucide : il lui faut
   un fond opaque, sinon le paysage transparaît sous le texte. */
.entete--flottante .menu-mobile{background:var(--vert);border-top-color:rgba(255,255,255,.2)}
.entete--flottante .menu-mobile a{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.entete--flottante .menu-mobile .sub-menu a{color:rgba(255,255,255,.72)}
.entete--flottante .menu-mobile a:hover{background:rgba(255,255,255,.1)}

/* Liens obligatoires du pied de page, indépendants des menus */
.pied-liens{display:flex;flex-wrap:wrap;gap:8px 26px;margin:var(--e4) 0 0;padding-top:var(--e3);
  border-top:1px solid var(--p-filet);font-size:.82rem}
.pied-liens a{display:inline;padding:0;color:var(--p-txt);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.pied-liens a:hover{color:#fff;padding-left:0}
.pied-liens + .pied-bas{border-top:none;margin-top:var(--e3);padding-top:0}

/* La barre d'informations suit la couleur du texte de la navigation */
.entete--flottante .entete-infos{color:#fff}
.entete--flottante .entete-infos .ei--saison{border-color:rgba(255,255,255,.4);color:var(--vanille)}
/* Le menu ne pousse plus la barre : c'est elle qui prend l'espace libre */
.entete--flottante .menu-principal{margin-left:0}
a.pied-label{text-decoration:none;transition:border-color .18s,color .18s}
a.pied-label:hover{border-color:var(--vanille);color:#fff;padding-left:22px}

/* ═══════════════════════════════════════════════════════════
   25. GARDE-FOUS DE LA NAVIGATION
   Le menu ne doit jamais se replier : mieux vaut masquer un
   élément accessoire que rendre la navigation illisible.
   ═══════════════════════════════════════════════════════════ */
.entete--flottante .w{flex-wrap:nowrap}
.entete--flottante .mk{flex:none;min-width:0}
.entete--flottante .menu-principal{flex:none}
.entete--flottante .menu-principal ul{flex-wrap:nowrap}
.entete--flottante .tel-entete{flex:none}

/* ═══════════════════════════════════════════════════════════
   26. LE MENU NE SE REPLIE JAMAIS
   Trois protections superposées. La césure libre est
   explicitement annulée, la ligne ne peut pas passer à la
   ligne, et chaque bloc garde sa largeur naturelle.
   ═══════════════════════════════════════════════════════════ */
.entete .w,.entete--flottante .w{flex-wrap:nowrap;align-items:center}
.menu-principal>ul,.menu-principal>div>ul{display:flex;flex-wrap:nowrap;align-items:center}
.menu-principal li,.menu-principal a{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none}
.mk b,.mk small{white-space:normal;overflow-wrap:normal;word-break:keep-all}
.tel-entete{white-space:nowrap;word-break:keep-all}

/* Au cas où la somme des éléments dépasserait malgré tout, c'est le
   nom de la marque qui cède, pas la navigation. */
.entete--flottante .mk b{max-width:15ch}
@media(max-width:1359px){.entete--flottante .mk b{font-size:.95rem}}