/* ═══════════════════════════════════════════════════════════════════════════
AIMER CAMPER — DESIGN SYSTEM PARTAGÉ (portails)
Inclure :
Décliner un portail = surcharger --portail-accent / --portail-accent-rgb dans la page.
Nature #2C8D05 · Exception #A7856A · Bord de l'eau #100684 · Petit prix #FD682E · Parc aquatique #2397FF
═══════════════════════════════════════════════════════════════════════════ */
:root{
--portail-accent:#2397FF; --portail-accent-rgb:35,151,255;
--ac-black:#0a0a0a; --ac-graphite:#2a2a2a; --ac-stone:#6b6b6b;
--ac-paper:#F5F5F7; --ac-paper-dark:#e8e8ea; --ac-white:#fff;
/* Retour maquette 30/07/2026 : les panneaux/chips gris clair (F5F5F7) passent en foncé.
--ac-paper reste tel quel : encore utilisé comme couleur de TEXTE clair sur fond sombre
(boutons, footer...) - ne pas le rediriger vers --ac-ink, ça rendrait ce texte illisible. */
--ac-ink:#1B1B1B;
--ac-line:#e6e2d8; --ac-highlight:#e8e8ea; --ac-sky:rgba(var(--portail-accent-rgb),.05);
--ac-font-display:"Red Hat Display",system-ui,sans-serif;
--ac-font-body:"Inter",system-ui,sans-serif; --ac-font-ui:"DM Sans",system-ui,sans-serif;
--r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:28px;
--sh-sm:0 1px 2px rgba(10,10,10,.05);
--sh-md:0 4px 16px rgba(10,10,10,.06),0 2px 4px rgba(10,10,10,.04);
--sh-lg:0 24px 64px -12px rgba(10,10,10,.18),0 8px 16px rgba(10,10,10,.06);
--ease:cubic-bezier(.2,.6,.2,1); --dur:.22s; --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Titre accessible, hors flux visuel - pour corriger une hiérarchie Hn sans changer le rendu
(retour Théo 26/08/2026, audit Hn : "ne pas changer le visuel du contenu"). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
body{font-family:var(--ac-font-body);font-size:16px;line-height:1.55;color:var(--ac-black);background:var(--ac-white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ac-black);color:var(--ac-paper)}
:focus-visible{outline:2px solid var(--portail-accent);outline-offset:2px;border-radius:3px}
[id]{scroll-margin-top:88px}
h1,h2,h3,h4{font-family:var(--ac-font-display);font-style:normal;font-weight:800;letter-spacing:-.018em;color:var(--ac-black)}
h1::first-letter,h2::first-letter,h3::first-letter,h4::first-letter{text-transform:uppercase}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.06}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.12}
h3{font-size:1.12rem;font-weight:700}
p{line-height:1.65;color:var(--ac-graphite)}
.hl{background:linear-gradient(180deg,transparent 62%,rgba(var(--portail-accent-rgb),.24) 62%);padding:0 .06em}
.hl-accent{color:var(--portail-accent)}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.container.narrow{max-width:820px}
.section{padding:clamp(46px,6vw,74px) 0}
.section-alt{border-top:1px solid var(--ac-line);border-bottom:1px solid var(--ac-line)}
.section-dark{background:var(--ac-black)}
.section-dark .sec-head p{color:rgba(243,243,241,.7)}
.sec-head{max-width:660px;margin-bottom:34px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.sec-sub-head{margin-top:44px;padding-top:36px;border-top:1px solid var(--ac-line)}
.sec-head h2{margin:14px 0 12px}
.sec-head p{font-size:1.05rem;color:var(--ac-graphite)}
/* Simple libellé texte (pas de pastille/badge : la maquette n'en a nulle part) */
.eyebrow{display:inline-block;font-family:var(--ac-font-ui);font-size:.75rem;font-weight:500;letter-spacing:.09em;color:var(--ac-graphite);text-transform:uppercase}
.eyebrow.dark{color:rgba(255,255,255,.7)}
/* BOUTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;font-family:var(--ac-font-ui);font-size:.94rem;font-weight:600;line-height:1;border:1px solid var(--ac-black);border-radius:999px;cursor:pointer;transition:transform var(--dur),background var(--dur),color var(--dur),box-shadow var(--dur)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--portail-accent);color:#fff;border-color:var(--portail-accent)}
.btn-primary:hover{filter:brightness(.93);box-shadow:var(--sh-md)}
.btn-dark{background:var(--ac-black);color:var(--ac-paper)}
.btn-dark:hover{background:var(--ac-graphite)}
.btn-secondary{background:var(--ac-white);color:var(--ac-black)}
.btn-secondary:hover{background:var(--ac-black);color:var(--ac-paper)}
.btn-ghost{background:transparent;color:var(--ac-paper);border-color:rgba(243,243,241,.4)}
.btn-ghost:hover{background:var(--ac-paper);color:var(--ac-black)}
.btn-lg{padding:16px 26px;font-size:1rem}.btn-sm{padding:9px 15px;font-size:.84rem}
.btn .arr{transition:transform var(--dur)}.btn:hover .arr{transform:translateX(3px)}
/* NET BAR */
.net-bar{background:var(--ac-white);color:var(--ac-graphite);border-bottom:1px solid var(--ac-line)}
.net-inner{display:flex;align-items:center;gap:18px;height:38px;font-family:var(--ac-font-ui);font-size:.78rem}
.net-label{color:var(--ac-stone);letter-spacing:.04em;text-transform:uppercase;font-size:.68rem}
.net-links{display:flex;gap:16px;flex-wrap:wrap}
.net-links a{display:inline-flex;align-items:center;gap:6px;color:var(--ac-graphite);transition:color var(--dur)}.net-links a:hover{color:var(--ac-black)}
.net-links a .dot{width:7px;height:7px;border-radius:50%}
.net-links a.current{color:var(--ac-black);font-weight:600}
/* Retour Théo 20/08/2026 : les liens du réseau ("le réseau aimer camper") disparaissaient
* totalement sous 820px (display:none), plus aucun item visible/accessible sur mobile. Repli
* en scroll horizontal (largeur du bandeau fixe à 38px, pas de place pour empiler) plutôt que
* masquer - scrollbar cachée, le survol/tap fonctionne comme au clavier/souris. */
@media(max-width:820px){
.net-inner{gap:10px}
.net-label{flex-shrink:0}
.net-links{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;scrollbar-width:none;-ms-overflow-style:none}
.net-links::-webkit-scrollbar{display:none}
.net-links a{white-space:nowrap;flex-shrink:0}
}
/* NAV + MEGA */
.nav{position:sticky;top:0;z-index:100;background:rgba(243,243,241,.92);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--ac-line)}
.nav-inner{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:inline-flex;align-items:center;height:45px}
.brand-logo-real{display:inline-flex;align-items:center;color:var(--ac-black)}
.brand-logo-real svg,.brand-logo-real img{height:45px;width:auto;display:block}
.brand-word{font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:1.32rem;letter-spacing:-.01em;color:var(--ac-black)}
.brand-word sup{vertical-align:super;line-height:0;display:inline-flex}
.brand-word sup svg{width:.56em;height:.56em;display:inline-block}
.nav-menu{display:flex;flex:1;align-items:center;gap:24px}
/* gap 2px -> 10px (retour Théo 24/08/2026, persistant apres le 1er correctif transition-delay) :
* le vrai probleme n'etait pas un trajet de souris en diagonale vers le contenu du popover, mais
* la zone morte entre les DECLENCHEURS eux-memes ("Destinations"/"Thématiques") beaucoup trop
* fine (2px de gap flex + 12px de padding de chaque cote, mais la frontiere entre les 2
reste
* nette au pixel pres) - un simple survol du bord droit de "Destinations" tombait deja sur le
*
"Thématiques" voisin. Combine au padding existant (12px de chaque a), 10px de gap porte la
* zone tampon reelle a ~34px entre les 2 textes visibles - marge de securite bien plus genereuse
* sans elargissement visuel choquant. Le delai de 150ms (cf .mega plus bas) reste en complement
* pour les cas de trajet rapide qui traverserait quand meme. */
.nav-links{display:flex;gap:10px;flex:1;justify-content:center;align-items:stretch;list-style:none}
.nav-li{position:static;display:flex;align-items:center}
.nav-li>a,.nav-top{display:inline-flex;align-items:center;gap:7px;background:none;border:0;font-family:var(--ac-font-ui);font-size:.93rem;font-weight:500;color:var(--ac-graphite);padding:23px 12px;border-bottom:1.5px solid transparent;cursor:pointer;transition:color var(--dur),border-color var(--dur)}
.nav-li>a:hover,.nav-li>a.active,.nav-li.has-mega:hover .nav-top{color:var(--ac-black);border-bottom-color:var(--ac-black)}
.chev{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);position:relative;top:-2px;transition:transform var(--dur)}
.nav-li.has-mega:hover .chev{transform:rotate(-135deg);top:1px}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ac-white);border-top:1px solid var(--ac-line);border-bottom:1px solid var(--ac-line);box-shadow:0 24px 40px -16px rgba(10,10,10,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur);z-index:99}
/* Delai a l'ouverture uniquement (retour Théo 24/08/2026, remonte de .15s a .22s le meme jour -
* insuffisant seul). Complement du fix principal ci-dessus (.nav-links gap 2px->10px) : ce delai
* couvre les cas ou le curseur reste quand meme un instant sur le mauvais declencheur malgre la
* zone tampon elargie. transition-delay ici (uniquement sur la regle :hover, pas sur .mega de
* base) exige ~220ms de survol continu avant l'ouverture. Fermeture non affectee (reste immediate,
* la regle de fermeture est celle de .mega ci-dessus, sans delai). */
/* pointer-events:none par defaut / auto seulement ouvert (retour Théo 24/08/2026, 3e signalement -
* "je scrolle, je survole un camping du listing, Thématiques pop sans lien avec la nav") : la
* fermeture de .mega garde visibility:visible pendant tout le fondu de sortie (transition sur
* opacity/visibility, meme duree que l'ouverture) - le popover reste donc REELLEMENT survolable
* quelques centaines de ms apres l'avoir quitte. Le nav etant sticky, sa boite pleine-largeur
* occupe toujours le meme rectangle ecran pres du haut du viewport quel que soit le scroll - un
* simple frolement du declencheur "Thématiques" en scrollant (assez long pour lancer l'ouverture,
* .22s) suivi d'un atterrissage sur une carte camping situee dans ce meme rectangle pouvait
* "rattraper" le popover encore techniquement survolable en plein fondu de fermeture, le
* rouvrant. pointer-events:none rend la boite fermee non interactive INSTANTANEMENT (binaire, pas
* de transition), independamment du fondu visuel encore en cours - plus de piege. */
.nav-li.has-mega:hover .mega,.nav-li.has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:.22s}
/* .mega-switch-hold : force la fermeture pendant le delai JS de "switch" entre 2 declencheurs
* deja ouverts (cf ac-portail.js) - !important necessaire pour battre la regle :hover ci-dessus
* qui matcherait sinon instantanement des l'entree sur le declencheur voisin. */
.nav-li.has-mega.mega-switch-hold .mega{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}
.mega-dest-top{padding:18px 24px 0}
.mega-dest-all{display:inline-flex;align-items:center;gap:6px;font-family:var(--ac-font-ui);font-size:.9rem;font-weight:700;color:var(--portail-accent)}
.mega-dest-all:hover{text-decoration:underline}
.mega-dest-all .arr{transition:transform var(--dur)}
.mega-dest-all:hover .arr{transform:translateX(3px)}
.mega-grid{display:grid;gap:26px;padding:30px 24px;grid-template-columns:repeat(3,1fr) 1.15fr}
@media(max-width:1040px){.mega-grid{grid-template-columns:repeat(3,1fr)}.mega-feature{display:none}}
.mega-col-title{font-family:var(--ac-font-ui);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ac-stone);margin-bottom:12px}
.mega-col a{display:block;font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-graphite);padding:5px 0}.mega-col a:hover{color:var(--portail-accent)}
.mega-count{font-size:.76rem;color:var(--ac-stone)}
.mega-col a.mega-dest-all{margin-top:6px;padding-top:6px;border-top:1px solid var(--ac-line);font-size:.82rem}
/* Destinations sur une page region/departement/ville : mega-grid-geo (demande Théo 24/08/2026,
* 3e passage). 1er passage : mega par defaut reutilise tel quel (grid-template-columns 1fr,
* pistes vides etirees) -> "trop de vide". 2e passage : popover compact ancre sous le
* declencheur (position:absolute + width:max-content) -> resolvait le vide mais collision de
* survol avec le declencheur voisin "Thématiques" (retour Theo persistant malgre gap+delai
* elargis, cf .nav-links plus haut). Ce 3e passage revient a .mega standard (left:0;right:0,
* EXACTEMENT la meme mecanique de survol que Thématiques et le mega par defaut - plus de risque
* de collision) et regle le vide autrement : colonnes a largeur FIXE (flex, pas grid 1fr) plutot
* que plein-largeur ancre etroit. .mega-feature (image "voir la carte", flex:1) absorbe l'espace
* restant a droite des 1-2 mega-col, remplit la boite au lieu de laisser du blanc. */
.mega-grid-geo{display:flex;align-items:flex-start;gap:32px;padding:30px 24px}
.mega-grid-geo .mega-col{flex:0 0 200px}
.mega-grid-geo .mega-feature{flex:1;max-width:480px}
@media(max-width:1040px){.mega-grid-geo .mega-feature{display:none}}
/* Thématiques : panneau 2 colonnes titres/liens (demande Théo 24/08/2026), remplace l'ancienne
* grille a 6 colonnes de taxonomie (ac_thema_menu_categories(), 11/08/2026) toutes affichees en
* meme temps - jugee trop dense une fois les categories remplies. Colonne gauche = titres
* (mega-thema-list, largeur = repere Bootstrap col-4/12), colonne droite = liens de la categorie
* survolee (mega-thema-panel, positionnee en absolu sur le reste du panneau, repere col-8/12).
* mega-thema-panel n'est pas un enfant direct de la grille .mega-thema (imbriquee dans
* .mega-thema-item) - CSS Grid ignore grid-column/-row sur un non-enfant-direct, d'ou le
* positionnement absolu plutot qu'une grille pour aligner les 2 colonnes. Categorie par defaut
* = la 1re (regle :not(:hover):not(:focus-within) plus bas), pour eviter une colonne droite vide
* tant qu'aucun titre n'a ete survole. */
.mega-thema{position:relative;display:block;padding:0}
.mega-thema-list{width:33.3333%;padding:14px 0;border-right:1px solid var(--ac-line)}
/* .mega-thema-item volontairement SANS position:relative : un item positionne aurait capture le
* bloc conteneur du panneau absolu ci-dessous (position:absolute se cale alors sur la largeur de
* l'item ~col-4, pas sur .mega-thema ~col-12 - bug constate en QA navigateur le 24/08/2026,
* panneau colle contre la liste au lieu d'occuper la colonne de droite). */
.mega-thema-trigger{display:flex;align-items:center;gap:10px;padding:11px 24px;font-family:var(--ac-font-ui);font-size:.86rem;font-weight:600;color:var(--ac-graphite);cursor:pointer}
.mega-thema-item:hover .mega-thema-trigger,.mega-thema-item:focus-within .mega-thema-trigger{background:rgba(var(--portail-accent-rgb),.06);color:var(--portail-accent)}
.mega-thema-arrow{margin-left:auto;font-size:.72rem;opacity:.35}
.mega-ic{width:24px;height:24px;border-radius:7px;background:rgba(var(--portail-accent-rgb),.12);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.mega-thema-panel{position:absolute;top:0;bottom:0;left:33.3333%;right:0;padding:22px 28px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:0 22px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--dur),visibility var(--dur)}
.mega-thema-panel a{display:block;font-family:var(--ac-font-ui);font-size:.84rem;color:var(--ac-graphite);padding:6px 10px;margin:0 -10px;border-radius:var(--r-md);width:fit-content;max-width:100%}
.mega-thema-panel a:hover{background:rgba(var(--portail-accent-rgb),.08);color:var(--portail-accent)}
.mega-thema-more{margin-top:6px;font-weight:700;color:var(--portail-accent)}
.mega-thema-item:hover .mega-thema-panel,.mega-thema-item:focus-within .mega-thema-panel{opacity:1;visibility:visible;z-index:2}
.mega-thema-list:not(:hover):not(:focus-within) .mega-thema-item:first-child .mega-thema-panel{opacity:1;visibility:visible;z-index:1}
.mega-feature{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:180px;display:flex;align-items:flex-end;padding:18px}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mega-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.62))}
.mega-feature .mf-t{position:relative;z-index:2;color:#fff;font-family:var(--ac-font-display);font-style:italic;font-weight:800}
.nav-cta{display:flex;gap:10px;align-items:center}
/* Selecteur de langue (demande Theo 11/08/2026) : reutilise .nav-li/.has-mega/.mega pour le
* hover/positionnement, mais une liste compacte a la place d'une grille de colonnes. */
.lang-switch{position:relative;padding:0}
.lang-switch .nav-top{padding:0 4px}
.lang-switch-mega{left:auto;right:0;width:auto;min-width:140px;border-radius:var(--r-lg)}
.lang-switch-list{display:flex;flex-direction:column;padding:8px}
.lang-switch-list a{display:block;padding:8px 14px;border-radius:var(--r-md);font-family:var(--ac-font-ui);font-size:.86rem;color:var(--ac-graphite);white-space:nowrap}
.lang-switch-list a:hover{background:var(--ac-sand,#F4F1EA)}
.lang-switch-list a.current{font-weight:700;color:var(--portail-accent)}
.flag-ic{border-radius:2px;vertical-align:middle;margin-right:2px}
@media(max-width:900px){.lang-switch{display:none}}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:40px;border:1px solid var(--ac-line);border-radius:var(--r-md);background:var(--ac-white);cursor:pointer;flex-shrink:0}
.nav-burger span{position:relative;display:block;width:18px;height:2px;background:var(--ac-black);border-radius:2px}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ac-black);border-radius:2px;transition:transform var(--dur)}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}
.nav.open .nav-burger span{background:transparent}
.nav.open .nav-burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .nav-burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){.nav-menu{display:none}.nav-burger{display:inline-flex;margin-left:auto}
/* margin-left:auto (retour Théo 20/08/2026, "collé après le logo") : .nav-menu portait le
* flex:1 qui écartait naturellement le burger du logo en desktop - masqué en mobile
* (.nav-menu{display:none} ci-dessus), il ne restait plus rien pour occuper l'espace entre
* les deux, le burger se retrouvait collé juste après .brand au lieu d'être aligné à droite. */
/* Menu burger plein écran (demande Théo 20/08/2026) : l'ancien dropdown (position:absolute,
* max-height:80vh) laissait voir/scroller le contenu de la page derrière lui. On couvre
* maintenant tout le viewport sous le bandeau - le body est verrouillé en scroll pendant
* l'ouverture, cf ac-portail.js (classe .nav-lock) pour que seul le menu défile si son
* contenu dépasse l'écran.
* Round 1 (--ac-nav-h calculé en JS) : correction jugée insuffisante par Théo (20/08/2026,
* "encore full buggé"). Round 2 : valeurs fixes fournies telles quelles par Théo - top:67px
* (hauteur de la nav seule) + height:calc(100vh - 105px) (105 = net-bar 38px + nav 67px,
* budget retiré en bas plutôt qu'en haut) au lieu de bottom:0 seul. */
.nav.open .nav-menu{display:flex;flex-direction:column;align-items:stretch;position:fixed;top:67px;left:0;right:0;bottom:0;z-index:90;gap:6px;background:var(--ac-paper);padding:16px 24px 22px;overflow-y:auto;height:calc(100vh - 105px)}
.nav.open .nav-links{display:flex;flex-direction:column;gap:2px}.nav.open .nav-li{display:block}.nav.open .nav-li>a,.nav.open .nav-top{padding:11px 0}
.nav.open .nav-cta{flex-direction:column;gap:8px;margin-top:6px}.nav.open .nav-cta .nav-btn{width:100%}
/* Sous-menus (Destinations/Thématiques) en accordéon (demande Théo 20/08/2026) : le hover
* desktop n'existe pas au doigt, et .mega/.chev étaient auparavant masqués en dur sur mobile
* (display:none!important) - le contenu de ces sous-menus était donc totalement inaccessible
* au clic. Le chevron réapparaît comme indicateur d'état, .mega repasse en bloc statique
* empilé sous l'item plutôt qu'en dropdown absolu, replié par défaut (cf .mega-open, toggle JS
* dans ac-portail.js) - accordéons indépendants, plusieurs peuvent être ouverts à la fois. */
.nav-li.has-mega{flex-direction:column;align-items:stretch}
.nav-li.has-mega .nav-top{width:100%;justify-content:space-between}
.chev{display:inline-block}
.nav-li.has-mega .mega{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;left:auto;right:auto;top:auto;z-index:auto}
.nav-li.has-mega.mega-open .mega{display:block}
.nav-li.has-mega.mega-open .chev{transform:rotate(-135deg);top:1px}
.nav-li.has-mega .mega-grid,.nav-li.has-mega .mega-grid-geo{display:block;padding:2px 0 14px 12px}
.nav-li.has-mega .mega-col{margin-bottom:14px}
.nav-li.has-mega .mega-feature{display:none}
/* Thématiques (panneau 2 colonnes desktop, 24/08/2026) : pas de survol au doigt, on aplatit
* en liste empilee - chaque titre suivi directement de ses liens, meme esprit que l'ancien
* comportement mobile de la grille a 6 colonnes qu'il remplace. */
.nav-li.has-mega .mega-thema{display:block;padding:2px 0 14px 12px}
.mega-thema-list{width:100%;padding:0;border:0}
.mega-thema-item{margin-bottom:10px}
.mega-thema-trigger{padding:6px 0;pointer-events:none}
.mega-thema-arrow{display:none}
.mega-thema-panel{position:static;inset:auto;padding:0 0 0 10px;display:block;overflow:visible;opacity:1;visibility:visible}
.lang-switch.has-mega .mega{display:none!important} /* .lang-switch reste masqué en bloc sur mobile (@media 900px .lang-switch{display:none} plus bas), règle défensive si cet ordre changeait un jour */
}
body.nav-lock{overflow:hidden}
/* Boutons du header (cf maquette Figma "Header - NAV") : pilule fine "Votre camping ?" +
* pilule pleine sombre "Trouver un camping". Distincts de .btn (composants de page). */
.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:100px;font-family:"DM Sans",var(--ac-font-ui),system-ui,sans-serif;font-weight:500;font-size:13px;line-height:13px;white-space:nowrap;cursor:pointer;transition:opacity var(--dur),background var(--dur),color var(--dur),border-color var(--dur)}
.nav-btn:hover{opacity:.85}
.nav-btn-ghost{background:transparent;border:1px solid var(--ac-black);color:var(--ac-black)}
.nav-btn-dark{background:#1d1d1f;border:1px solid #1d1d1f;color:#fff}
body.home .nav:not(.scrolled) .nav-btn-ghost{border-color:#fff;color:#fff}
@media(max-width:900px){.nav.open .nav-btn-ghost{border-color:var(--ac-black);color:var(--ac-black)}}
/* NAV transparente sur la photo du hero (home uniquement, cf .hero{margin-top} dans home.css) :
* le menu flotte par-dessus l'image tant qu'on n'a pas scrollé, puis redevient un bandeau
* classique (fond clair, texte sombre) via .scrolled, ajoutée/retirée en JS (ac-portail.js). */
body.home .nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background var(--dur),border-color var(--dur)}
body.home .nav .brand-word,body.home .nav .brand-logo-real,body.home .nav-li>a,body.home .nav-top,body.home .chev{color:#fff}
body.home .nav-burger{border-color:rgba(255,255,255,.4);background:transparent}
body.home .nav-burger span,body.home .nav-burger span::before,body.home .nav-burger span::after{background:#fff}
body.home .nav.scrolled{background:rgba(243,243,241,.92);backdrop-filter:saturate(1.6) blur(12px);border-bottom-color:var(--ac-line)}
body.home .nav.scrolled .brand-word,body.home .nav.scrolled .brand-logo-real{color:var(--ac-black)}
body.home .nav.scrolled .nav-li>a,body.home .nav.scrolled .nav-top,body.home .nav.scrolled .chev{color:var(--ac-graphite)}
body.home .nav.scrolled .nav-li>a:hover,body.home .nav.scrolled .nav-li>a.active,body.home .nav.scrolled .nav-li.has-mega:hover .nav-top{color:var(--ac-black);border-bottom-color:var(--ac-black)}
body.home .nav.scrolled .nav-burger{border-color:var(--ac-line);background:var(--ac-white)}
body.home .nav.scrolled .nav-burger span,body.home .nav.scrolled .nav-burger span::before,body.home .nav.scrolled .nav-burger span::after{background:var(--ac-black)}
/* Mobile étroit : le contenu du hero (formulaire empilé, tags/stats qui wrappent) dépasse
* souvent 90vh, laissant peu ou pas de marge sous la nav flottante - l'eyebrow finit collé
* dans la zone de chevauchement transparente. On désactive le chevauchement en dessous de
* 900px : la nav redevient un bandeau opaque classique (comme .scrolled) et le hero reprend
* sa place normale en dessous, plutôt que de risquer un texte illisible sur l'image.
* [PP] 20/08/2026 : seuil remonté de 640px à 900px pour matcher le seuil où le nav bascule en
* mode burger (cf @media(max-width:900px) plus haut, .nav-menu{display:none}) - entre 641px et
* 900px, la nav passait déjà en mode mobile (menu caché derrière le burger) mais gardait son
* chevauchement transparent desktop, ce qui masquait H1/eyebrow du hero sur cette plage de
* largeurs (tablettes/phablettes portrait) derrière le bandeau flottant. Signalé par Théo comme
* "header qui recouvre le H1 sur mobile" - reproductible précisément sur cette plage. */
@media(max-width:900px){
body.home .hero{margin-top:0}
body.home .nav{background:rgba(243,243,241,.92);backdrop-filter:saturate(1.6) blur(12px);border-bottom-color:var(--ac-line)}
body.home .nav .brand-word,body.home .nav .brand-logo-real{color:var(--ac-black)}
body.home .nav-burger{border-color:var(--ac-line);background:var(--ac-white)}
body.home .nav-burger span,body.home .nav-burger span::before,body.home .nav-burger span::after{background:var(--ac-black)}
}
@media(max-width:900px){body.home .nav.open{background:rgba(243,243,241,.92);backdrop-filter:saturate(1.6) blur(12px)}
body.home .nav.open .brand-word,body.home .nav.open .brand-logo-real{color:var(--ac-black)}
body.home .nav.open .nav-burger span,body.home .nav.open .nav-burger span::before,body.home .nav.open .nav-burger span::after{background:var(--ac-black)}
}
/* Texte du menu burger illisible sur la home (retour Théo 20/08/2026) : body.home force le
* texte du bandeau en blanc (nav transparente sur la photo du hero, cf plus haut), mais cette
* regle ne se desactivait jamais a l'ouverture du menu plein ecran mobile - texte blanc sur
* fond clair (var(--ac-paper)), items illisibles. Place apres la regle "color:#fff" (meme
* specificite, doit etre plus tard dans la cascade pour l'emporter) et sans prefixe body.home
* pour couvrir aussi les autres pages. */
@media(max-width:900px){.nav.open .nav-li>a,.nav.open .nav-top,.nav.open .chev{color:#1d1d1f}}
/* FIL D'ARIANE */
.crumb{background:var(--ac-white);border-bottom:1px solid var(--ac-line)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;font-family:var(--ac-font-ui);font-size:.8rem;color:var(--ac-stone)}
.crumb a:hover{color:var(--ac-black)}.crumb li[aria-current]{color:var(--ac-black);font-weight:600}.crumb .sep{opacity:.5}
/* HEADER DE PAGE (compact, sur photo) */
.phead{position:relative;color:#fff;overflow:hidden}
.phead-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.phead-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.78) 8%,rgba(10,10,10,.35) 55%,rgba(10,10,10,.2))}
.phead-in{position:relative;z-index:2;padding:clamp(36px,6vw,60px) 0}
.phead h1{color:#fff;max-width:22ch;margin-bottom:12px;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.phead .eyebrow{margin-bottom:16px}
.phead p{color:rgba(255,255,255,.92);max-width:62ch;font-family:var(--ac-font-ui);font-size:1.05rem;line-height:1.6}
/* header clair (pages texte) */
.thead{padding:clamp(34px,5vw,54px) 0 8px}
.thead .eyebrow{margin-bottom:14px}
.thead p{max-width:64ch;color:var(--ac-graphite);font-size:1.08rem;margin-top:12px}
/* PROSE */
.prose h2{margin:30px 0 12px}.prose h3{margin:22px 0 8px}
.prose p{margin-bottom:14px}
.prose a{color:var(--ac-black);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--portail-accent);font-weight:500}
.prose ul{margin:0 0 16px;padding-left:22px}.prose li{margin-bottom:6px;color:var(--ac-graphite)}
/* Tableaux WYSIWYG (26/08/2026, demande Théo) : aucun style n'existait, rendu HTML brut du
* navigateur (ex. tableau "en un coup d'œil" des articles blog). Le
lui-même passe en
* display:block + overflow-x:auto sur mobile plutôt qu'un wrapper
- le contenu vient du
* WYSIWYG (post_content), pas de point d'injection PHP pratique pour envelopper chaque tableau. */
.prose table{width:100%;border-collapse:collapse;margin:4px 0 20px;font-size:.92rem}
.prose th,.prose td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--ac-line)}
.prose th{font-family:var(--ac-font-ui);font-weight:700;color:var(--ac-black);background:var(--ac-paper);white-space:nowrap}
.prose td{color:var(--ac-graphite)}
.prose tr:last-child td{border-bottom:0}
@media(max-width:640px){.prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}}
/* Premier paragraphe d'un bloc éditorial mis en avant (chapô) - casse la monotonie d'un bloc
de texte plat, cohérent sur "le guide" comme "à découvrir" sans dupliquer la règle. */
.prose > p:first-of-type{font-size:1.13rem;line-height:1.6;color:var(--ac-black)}
/* GUIDE : refonte complète 31/07/2026 (v2 rejetée par Théo, "rien de beau"). Le texte seul
noyé dans le padding standard paraissait vide -> mise en page 2 colonnes texte + carte de
chiffres clés (remplit l'espace avec de la vraie donnée plutôt qu'avec du vide). */
.guide-grid{display:grid;grid-template-columns:1fr 272px;gap:44px;align-items:start}
@media(max-width:860px){.guide-grid{grid-template-columns:1fr}}
.guide-card{background:var(--ac-highlight);border-radius:var(--r-lg);padding:26px}
@media(min-width:861px){.guide-card{position:sticky;top:126px}}
.guide-card-label{display:block;font-family:var(--ac-font-ui);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ac-graphite);margin-bottom:6px}
.guide-row{padding:14px 0;border-top:1px solid rgba(10,10,10,.1)}
.guide-row:first-of-type{border-top:0}
.guide-row strong{display:block;font-family:var(--ac-font-display);font-weight:800;font-size:1.55rem;color:var(--ac-black);line-height:1.1}
.guide-row span{display:block;font-family:var(--ac-font-ui);font-size:.74rem;color:var(--ac-graphite);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
/* "à découvrir" : bloc simple colonne, padding resserré (texte plus court que le guide) -
retour Théo 31/07/2026 (du texte court sous le padding standard de 74px paraissait vide). */
#s-decouvrir{padding:clamp(32px,4.5vw,50px) 0}
/* CARTES DESTINATIONS / SIMILAIRES */
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dest-grid{grid-template-columns:1fr}}
.dest-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2.6;box-shadow:var(--sh-sm);transition:transform var(--dur)}
.dest-card:hover{transform:translateY(-3px)}
.dest-card img{width:100%;height:100%;object-fit:cover}
.dest-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.66))}
.dest-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px}
.dest-name{font-family:var(--ac-font-display);font-style:italic;font-weight:800;font-size:1.15rem;color:#fff}
.dest-cnt{font-family:var(--ac-font-ui);font-size:.76rem;color:rgba(255,255,255,.82);margin-top:2px}
/* FAQ */
.faq{max-width:860px}
.faq.center{margin:0 auto}
.faq-item{border-bottom:1px solid var(--ac-line)}.faq-item:first-child{border-top:1px solid var(--ac-line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:19px 2px;cursor:pointer;list-style:none;font-family:var(--ac-font-ui);font-size:.98rem;font-weight:600;color:var(--ac-black)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--portail-accent)}
/* Chevron en CSS pur (pas de