/* ============================================
   Démo pages internes - Camping Montpellier Plage
   S'appuie sur ../assets/css/style.css (design system live).
   Ne contient que le spécifique aux pages internes + les effets démo.
   ============================================ */

/* ---- Nav multi-pages : fixe, transparente sur le hero, solide au scroll ---- */
.demo-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    color: #fff;
    transition: background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.demo-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    bottom: -46px;
    transform: translateZ(0);
    background: linear-gradient(180deg, rgba(8,22,29,0.82) 0%, rgba(8,22,29,0.45) 46%, rgba(8,22,29,0) 100%);
    opacity: 1;
    transition: opacity 0.5s var(--ease-out);
    pointer-events: none;
}
/* Fond opaque, sans flou.
   Le flou etait un piege : sur une barre en position fixe, le navigateur
   redecoupe le fond floute en tuiles de 256 px et il arrive qu'une tuile
   garde un vieil instantane. C'est exactement ce que montre la video du
   01/09 : les 256 premiers pixels de la barre restent blanc opaque pendant
   que le reste laisse voir la page, avec une cassure verticale nette.
   Le promouvoir sur sa propre couche (translateZ, will-change) calmait le
   scintillement de fin aout mais figeait la tuile : le remede a fait le mal.
   A 90 % d'opacite, le flou ne pesait que pour un dixieme du pixel : on perd
   une decoration et on gagne une barre qui ne peut plus se casser. */
.demo-nav.scrolled {
    background: rgba(255,255,255,0.97);
    box-shadow: 0 6px 30px rgba(20,48,61,0.10);
    color: var(--color-dark);
}
.demo-nav.scrolled::before { opacity: 0; }

/* Lisibilité du texte clair sur les héros clairs (état transparent) */
.demo-nav:not(.scrolled) .demo-nav-links > a:not(.btn),
.demo-nav:not(.scrolled) .demo-nav-badge {
    text-shadow: 0 1px 14px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.45);
}

.demo-nav-inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: opacity .3s;
}
/* 9,5 px et non 11 : le logo rétréci en scale occupe toujours ses 46 px de
   layout, la barre gagnait donc 3 px. Le padding, lui, bascule d'un coup (aucune
   transition dessus), donc le compenser ici ne coûte aucun reflow animé. */
.demo-nav.scrolled .demo-nav-inner { padding: 9.5px 32px; }

.demo-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.demo-nav-brand img {
    height: 46px;
    width: auto;
    /* Le rétrécissement au scroll se joue en transform, pas en height : animer une
       propriété de layout impose un reflow à chaque frame, et cela tombait pile
       pendant que le visiteur fait défiler la page. scale ne touche qu'à la
       composition. transform-origin à gauche parce que le logo y est aligné.
       (« transition: 0.4s » sans propriété nommée animait aussi le passage de la
       taille intrinsèque 345x146 à 46 px au premier rendu : le logo traversait
       l'écran à chaque changement de page, signalé au recettage iOS du 27/08.) */
    transform-origin: left center;
    transition: transform 0.4s var(--ease-out), filter 0.5s var(--ease-out);
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45));
}
.demo-nav.scrolled .demo-nav-brand img { transform: scale(0.826); filter: none; }
.demo-nav-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    opacity: 0.75;
}

.demo-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* liens + soulignement animé */
.demo-nav-links > a:not(.btn) {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    padding: 4px 0;
    letter-spacing: 0.005em;
}
.demo-nav-links > a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background: var(--color-cta);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease-spring);
}
.demo-nav-links > a:not(.btn):hover::after,
.demo-nav-links > a.active:not(.btn)::after { transform: scaleX(1); }
.demo-nav-links > a.active:not(.btn) { color: var(--color-cta); }
/* Sur le hero, le corail clair se lit tres bien sur le voile sombre. Une fois
   la barre devenue blanche, il tombe a 2,70:1 (mesure du 01/09) : l'onglet
   courant et son trait passent alors a la declinaison encre, 5,3:1. La regle
   existait deja mais reprenait la meme couleur, elle ne servait a rien. */
.demo-nav.scrolled .demo-nav-links > a.active:not(.btn),
.demo-nav.scrolled .nav-drop.active-parent .nav-drop-btn { color: var(--color-cta-ink); }
.demo-nav.scrolled .demo-nav-links > a:not(.btn)::after,
.demo-nav.scrolled .nav-drop-btn::after { background: var(--color-cta-ink); }

.demo-nav-cta {
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(254,114,89,0.35);
}
.demo-nav-cta:hover { transform: translateY(-2px); }

/* ---- Menus déroulants de la nav ---- */
.nav-drop { position: relative; }
.nav-drop-btn {
    position: relative;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.nav-drop-btn .chev { font-size: 0.58rem; transition: transform 0.4s var(--ease-spring); }
.nav-drop:hover .chev, .nav-drop:focus-within .chev { transform: rotate(180deg); }
.nav-drop-btn::after {
    content: '';
    position: absolute; left: 0; bottom: -2px; height: 2px; width: calc(100% - 14px);
    background: var(--color-cta); border-radius: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.5s var(--ease-spring);
}
.nav-drop:hover .nav-drop-btn::after,
.nav-drop.active-parent .nav-drop-btn::after { transform: scaleX(1); }
.nav-drop.active-parent .nav-drop-btn { color: var(--color-cta); }
.nav-drop-menu {
    position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 234px;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 20px 46px rgba(20,48,61,0.18);
    border: 1px solid var(--color-hairline);
    padding: 8px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.42s var(--ease-spring);
}
.nav-drop-menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a {
    display: block; padding: 9px 14px; border-radius: var(--radius-sm);
    color: var(--color-dark) !important;
    font-size: 0.86rem; font-weight: 600; white-space: nowrap; text-decoration: none;
 min-height: 44px; display: flex; align-items: center;}
.nav-drop-menu a::after { display: none !important; }
.nav-drop-menu a:hover { background: var(--color-bg-alt); color: var(--color-cta) !important; }
/* Sur tactile, le flash de tap natif + le :hover/:active collant déclenchent un
   bug de repaint iOS (les liens voisins disparaissent). On supprime le flash et
   tout changement de fond au tap. */
.demo-nav-links a, .demo-nav-links button, .nav-drop-btn { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
    .nav-drop-menu a:hover, .nav-drop-menu a:active { background: transparent; color: var(--color-dark) !important; }
}

/* Menu mobile : rubriques toujours dépliées, dans un conteneur défilant.
   (Un accordéon CSS collapse/reveal est ingérable sur iOS Safari : il ne
   repeint pas fiablement un sous-menu révélé depuis display:none ou max-height,
   même avec animation. On garde donc tout affiché, ce qui est 100% robuste.) */
@media (max-width: 940px) {
    /* Le centrage du menu de bureau (translateX(-50%) au survol et au focus)
       est plus spécifique que le transform:none ci-dessous : un tap sur une
       rubrique décalait la liste de 175 px hors de l'écran (audit du 09/10). */
    .nav-drop:hover .nav-drop-menu,
    .nav-drop:focus-within .nav-drop-menu { transform: none; }
    /* Dans le tiroir blanc, l'ombre prévue pour le héros bave et le corail
       clair tombe à 2,7:1 : encre et pas d'ombre. */
    .demo-nav:not(.scrolled) .demo-nav-links > a:not(.btn) { text-shadow: none; }
    .demo-nav:not(.scrolled) .demo-nav-links > a.active:not(.btn) { color: var(--color-cta-ink); }
    .nav-drop { width: 100%; border-top: 1px solid var(--color-hairline); }
    /* Parent = en-tête de rubrique, non interactif */
    .nav-drop-btn { width: 100%; justify-content: flex-start; padding: 15px 14px 4px; color: var(--color-dark); font-weight: 700; cursor: default; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.08em; opacity: 0.65; }
    .nav-drop-btn::after { display: none; }
    .nav-drop-btn .chev { display: none; }
    .nav-drop-menu {
        position: static; transform: none; opacity: 1;
        box-shadow: none; border: none; min-width: 0;
        display: block;
        padding: 0 0 8px 8px;
        /* Surtout PAS de pointer-events:auto ici. Le panneau ferme porte
           pointer-events:none, mais un descendant repassé à auto redevient
           cliquable malgre l'ancetre : les liens des sous-menus captaient donc
           les taps sur presque tout l'ecran, panneau ferme. Un appui sur une
           carte de la page d'accueil ouvrait /mobil-home/ ou /emplacements/.
           On ne les rend cliquables qu'a l'ouverture, ci-dessous. */
        pointer-events: inherit;
    }
    .demo-nav-toggle:checked ~ .demo-nav-links .nav-drop-menu { pointer-events: auto; }
    .nav-drop-menu::before { display: none; }
    .nav-drop-menu a { color: var(--color-dark) !important; padding: 10px 14px; font-weight: 600; }
}


/* ---- Hamburger animé ---- */
.demo-nav-toggle { display: none; }
@media (max-width: 940px) {
    /* La case pilote le tiroir : cachée à l'œil mais atteignable au clavier
       (display: none la rendait inaccessible, audit du 26/09/2026). */
    .demo-nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
    .demo-nav-toggle:focus-visible + .demo-nav-burger { outline: 3px solid currentColor; outline-offset: 2px; border-radius: 6px; }
}
.demo-nav-burger { display: none; }

@media (max-width: 940px) {
    .demo-nav-inner { padding: 14px 18px; }
    .demo-nav.scrolled .demo-nav-inner { padding: 10px 18px; }
    /* Zone tactile de 44x44 (le trait reste dessiné sur 26x20 au centre) : à
       26x20, le bouton le plus utilisé du site en mobile était le plus dur à
       viser. La marge négative compense pour ne pas décaler l'alignement. */
    .demo-nav-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 44px;
        height: 44px;
        margin: -12px -9px;
        cursor: pointer;
        color: inherit;
        z-index: 2;
    }

    .demo-nav-burger span,
    .demo-nav-burger span::before,
    .demo-nav-burger span::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }
    /* Le span porte les trois traits : il garde sa largeur de 26 px au centre
       de la zone tactile de 44 px (la règle groupée ci-dessus le met à 100 %). */
    .demo-nav-burger span { position: relative; top: auto; width: 26px; transform: none; transition: background 0.2s; }
    .demo-nav-burger span::before,
    .demo-nav-burger span::after { transition: top 0.3s ease 0.1s, transform 0.3s var(--ease-spring); }
    .demo-nav-burger span::before { top: -7px; }
    .demo-nav-burger span::after { top: 7px; }
    .demo-nav-toggle:checked + .demo-nav-burger span { background: transparent; }
    .demo-nav-toggle:checked + .demo-nav-burger span::before { top: 0; transform: rotate(45deg); transition: top 0.3s ease, transform 0.3s var(--ease-spring) 0.1s; }
    .demo-nav-toggle:checked + .demo-nav-burger span::after { top: 0; transform: rotate(-45deg); transition: top 0.3s ease, transform 0.3s var(--ease-spring) 0.1s; }

    /* Tiroir mobile : position fixe + hauteur définie (top/bottom) = conteneur
       de défilement fiable sur iOS Safari (max-height + position:absolute ne s'y
       défile pas au toucher). touch-action + overscroll-behavior isolent le geste
       au menu, sans avoir à figer le scroll du body (ce qui bloquait le défilement
       interne sur iOS). */
    .demo-nav-links {
        position: fixed;
        top: 60px;
        /* iOS Safari : « bottom » se cale sur le layout viewport, qui passe SOUS
           la barre d'outils. Le panneau débordait donc de l'écran, et le bouton
           « Réserver » collé en bas de panneau se retrouvait au milieu de la
           liste, masquant deux liens. dvh suit la hauteur réellement visible. */
        bottom: auto;
        height: calc(100vh - 74px);
        height: calc(100dvh - 74px);
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: 0 20px 50px rgba(20,48,61,0.20);
        padding: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        opacity: 0;
        /* translate3d et non translateY : force une couche de composition stable.
           Sans elle, WebKit ouvrait parfois le tiroir sans peindre ses liens
           (menu blanc au deuxième appui, filmé par Charles le 27/08). */
        transform: translate3d(0, -16px, 0);
        backface-visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-spring);
    }
    /* Le transform au reveal EST nécessaire : sans lui, iOS Safari n'ouvre le
       tiroir qu'en cadre blanc et ne repeint pas son contenu (bug de repaint
       WebKit sur un passage opacity 0->1). Le transform force la couche + le repaint. */
    .demo-nav-toggle:checked ~ .demo-nav-links { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; }
    .demo-nav-links > a:not(.btn) { display: flex; align-items: center; min-height: 44px; color: var(--color-dark); padding: 12px 14px; border-radius: var(--radius-sm); }
    .demo-nav-links > a:not(.btn)::after { display: none; }
    .demo-nav-links > a:not(.btn):hover { background: var(--color-bg-alt); }
    /* Réserver collé en bas du tiroir : toujours accessible, même si la liste
       dépasse la hauteur (le défilement de l'overflow imbriqué n'est pas garanti
       sur tous les WebView). Un léger dégradé blanc isole le bouton de la liste. */
    .demo-nav-cta {
        min-height: 44px;
        position: sticky;
        bottom: 0;
        margin: 10px 6px 0;
        justify-content: center;
        /* Cadre blanc opaque autour du bouton : le contenu qui défile dessous
           restait lisible en transparence (« Vue étang », « Emplacements »).
           Une ombre floue ne suffisait pas, il faut une surface pleine. */
        box-shadow: 0 0 0 9px #fff, 0 -10px 12px 9px #fff, 0 10px 22px rgba(254,114,89,.35);
    }
}

/* ---- Hero de page interne (image de fond) ---- */
.page-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--color-dark);
    color: #fff;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Le milieu n'est plus transparent : le fil d'Ariane s'y pose et tombait
       à 1,1:1 sur les photos claires (audit du 09/10/2026). */
    background: linear-gradient(180deg, rgba(20,48,61,0.45) 0%, rgba(20,48,61,0.22) 42%, rgba(20,48,61,0.86) 100%);
}
.page-hero .container {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 48px;
}
.page-hero .breadcrumb { font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 2px 16px rgba(0,0,0,0.45); }
.page-hero .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: #fff; text-decoration: none; }
.page-hero .breadcrumb a:hover { opacity: 1; color: var(--color-cta); }
.page-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    color: #fff;
    font-style: italic;
    text-shadow: 0 3px 20px rgba(0,0,0,0.4);
}
.page-hero-tag {
    display: inline-block;
    background: var(--color-cta-solid, #bd4029);
    color: #fff;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}

/* ---- Hero vidéo de la home démo ---- */
.demo-hero { height: 100svh; }
.demo-hero .hero-bottom { padding-bottom: 8px; }
/* Agrandit l'iframe pour pousser l'UI YouTube (titre en haut, contrôles) hors du cadre
   visible, rogné par overflow:hidden. Couplé au pointer-events:none (aucun contrôle au survol). */
.demo-hero .hero-video iframe {
    transform: translate(-50%, -50%) scale(1.35);
    pointer-events: none;
}
.demo-hero .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,0.85);
    font-size: 1.4rem;
    animation: demo-fade-cue 3.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes demo-fade-cue { 0%,100%{ opacity: .5; transform: translate(-50%,0);} 50%{ opacity: 1; transform: translate(-50%,5px);} }

/* ---- Cartes atouts : pictos SVG + survol premium ---- */
.features .feature-card {
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
.features .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px -16px rgba(20,48,61,0.26);
    border-color: rgba(71,176,179,0.35);
}
.feature-card h3 { transition: color 0.5s var(--ease-out); }
.feature-card:hover h3 { color: var(--color-accent-ink); }

.feature-icon:has(svg) {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(71,176,179,0.16), rgba(71,176,179,0.05));
    color: var(--color-accent-ink);
    transition: color 0.45s var(--ease-out) 0.08s, box-shadow 0.6s var(--ease-out);
}
/* Remplissage teal qui monte en douceur au survol */
.feature-icon:has(svg)::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(150deg, var(--color-accent), #5bc0c3);
    transform: scale(0.25);
    opacity: 0;
    transition: transform 0.6s var(--ease-spring), opacity 0.4s var(--ease-out);
}
.feature-icon svg {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    transition: transform 0.6s var(--ease-spring);
}
.feature-card:hover .feature-icon:has(svg) {
    color: #fff;
    box-shadow: 0 16px 32px -8px rgba(71,176,179,0.5);
}
.feature-card:hover .feature-icon:has(svg)::before { transform: scale(1); opacity: 1; }
.feature-card:hover .feature-icon svg { transform: scale(1.08); }

/* ---- Intro texte de page ---- */
.page-intro { padding: 72px 0 24px; background: var(--color-bg); }
.page-intro .lead {
    max-width: 68ch;
    margin: 0 auto;
    text-align: center;
    font-size: 1.12rem;
    color: var(--color-text);
    line-height: 1.85;
}

/* ---- Hub d'accueil (cartes vers les pages) ---- */
.hub { padding: 96px 0; background: var(--color-bg-alt); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; margin-top: 48px; }
/* Six cartes en auto-fit donnaient une rangee de quatre puis une de deux, bancale.
   Trois colonnes fixes les repartissent en deux rangees pleines. */
.hub-grid.hub-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .hub-grid.hub-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hub-grid.hub-grid-3 { grid-template-columns: 1fr; } }
.hub-card {
    position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-soft); border: 1px solid var(--color-hairline);
    text-decoration: none; aspect-ratio: 4 / 3;
    transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}
.hub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-spring); }
.hub-card:hover img { transform: scale(1.07); }
.hub-card-label { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: linear-gradient(transparent 38%, rgba(20,48,61,0.88)); color: #fff; }
.hub-card-label h3 { color: #fff; font-size: 1.35rem; }
.hub-card-label span { font-size: 0.85rem; opacity: 0.92; font-weight: 500; }
.hub-card-label span::after { content: ' →'; color: var(--color-cta); font-weight: 700; display: inline-block; transition: transform 0.4s var(--ease-spring); }
.hub-card:hover .hub-card-label span::after { transform: translateX(5px); }

/* Mobile : les 6 cartes "avantages" en 1 seule colonne (pleine largeur, plus lisibles). */
@media (max-width: 768px) {
    .features-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Fiche hébergement ---- */
.fiche-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.fiche-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fiche-gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-soft); }
:where(.fiche-gallery figure) { cursor: zoom-in; }
.fiche-gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.fiche-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-spring); }
.fiche-gallery figure:hover img { transform: scale(1.05); }
/* Avec un nombre pair de photos, la dernière restait seule sur sa ligne :
   elle prend toute la largeur (audit du 09/10/2026). */
.fiche-gallery figure:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16/9; }
/* Galeries d'une ou deux photos : pas de case vide dans une grille de trois */
@media (min-width: 641px) {
    .gallery-grid:has(> :only-child) { grid-template-columns: minmax(0, 760px); justify-content: center; grid-auto-rows: 400px; }
    .gallery-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; }
}

.fiche-aside {
    position: sticky; top: 92px; background: var(--color-card);
    border: 1px solid var(--color-hairline); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft); padding: 28px;
}
.fiche-aside .fiche-price { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-dark); }
.fiche-aside .fiche-price small { font-size: 0.9rem; color: var(--color-text-muted); font-family: var(--font-body); }
.fiche-aside .accom-promo { margin: 6px 0 16px; }
.spec-list { margin: 20px 0; }
.spec-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-hairline); font-size: 0.9rem; }
.spec-list li span:first-child { color: var(--color-text-muted); }
.spec-list li span:last-child { font-weight: 600; color: var(--color-dark); text-align: right; }
.equip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.equip-chips span { display: inline-flex; align-items: center; gap: 6px; background: var(--color-bg-alt); padding: 5px 12px 5px 10px; border-radius: var(--radius-pill); font-size: 0.78rem; color: var(--color-dark); border: 1px solid var(--color-hairline); transition: border-color 0.2s, background 0.2s; }
.equip-chips span:hover { border-color: var(--color-accent-ink); background: #fff; }
.equip-chips svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-accent-ink); }

/* ---- Liste d'équipements à pictos (remplace les puces emoji) ---- */
.amenity-list { list-style: none; margin: 20px 0 26px; display: grid; gap: 12px; }
.amenity-list li { display: flex; align-items: center; gap: 14px; font-size: 1rem; color: var(--color-text); line-height: 1.4; }
.amenity-list .am-ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(150deg, rgba(58,175,169,0.14), rgba(91,192,195,0.08));
    color: var(--color-accent-ink);
    box-shadow: inset 0 0 0 1px rgba(58,175,169,0.15);
}
.amenity-list .am-ico svg { width: 21px; height: 21px; }

/* ---- Recherche « intelligente » : suggestions rapides pré-remplissantes ---- */
.search-smart { margin-top: 20px; }
.search-smart-label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.search-smart-label svg { width: 16px; height: 16px; color: var(--color-accent-ink); }
.search-presets { display: flex; flex-wrap: wrap; gap: 10px; }
.search-preset {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 16px;
    border-radius: var(--radius-md, 14px);
    border: 1px solid var(--color-hairline);
    background: #fff;
    cursor: pointer;
    transition: transform 0.25s var(--ease-spring), border-color 0.2s, box-shadow 0.25s;
    text-align: left;
}
.search-preset:hover { transform: translateY(-3px); border-color: var(--color-accent-ink); box-shadow: 0 10px 24px rgba(20,48,61,0.10); }
.search-preset .sp-title { font-weight: 700; font-size: 0.9rem; color: var(--color-dark); }
.search-preset .sp-sub { font-size: 0.74rem; color: var(--color-text-muted); }
.search-preset.is-active { border-color: var(--color-accent-ink); background: linear-gradient(150deg, rgba(58,175,169,0.10), rgba(91,192,195,0.05)); }

/* ---- Galeries cliquables (zoom-in cursor) ---- */
:where(.gallery-item, .resto-photo, .aquatic-images img, .article-figure img) { cursor: zoom-in; }

/* ---- Lightbox popin ---- */
.demo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 4vw;
    background: rgba(10,24,31,0.6);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease-out);
}
.demo-lightbox.open { opacity: 1; pointer-events: auto; }
.demo-lightbox figure {
    margin: 0;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: scale(0.92);
    transition: transform 0.55s var(--ease-spring);
}
.demo-lightbox.open figure { transform: scale(1); }
.demo-lightbox img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.demo-lightbox figcaption { color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 500; }
.demo-lb-btn {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background 0.4s var(--ease-spring), transform 0.4s var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
    /* au-dessus de la figure, que sa transformation peint par-dessus */
    z-index: 2;
}
.demo-lb-btn:hover { background: rgba(255,255,255,0.28); transform: scale(1.08); }
.demo-lb-close { top: 22px; right: 26px; }
.demo-lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.demo-lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.demo-lb-prev:hover, .demo-lb-next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 640px) {
    .demo-lb-prev { left: 10px; } .demo-lb-next { right: 10px; }
    .demo-lb-btn { width: 48px; height: 48px; font-size: 1.3rem; background: rgba(20,48,61,0.78); border-color: rgba(255,255,255,0.4); }
    /* Croix bien visible et facile à viser au pouce (fond plein, coin dégagé) */
    .demo-lb-close { top: 14px; right: 14px; width: 54px; height: 54px; background: rgba(20,48,61,0.78); border-color: rgba(255,255,255,0.4); }
}

/* ---- Révélation au scroll ---- */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; filter: none; }
    .demo-hero .scroll-cue { animation: none; }
}

/* ---- Séparateurs vague entre sections (transition organique) ---- */
/* La vague coiffe le HAUT d'une section, remplie de la couleur de CETTE section,
   et déborde sur la section précédente → transition courbe, fini les bords plats. */
.wsep { position: relative; }
.wsep::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 46px;
    transform: translateY(-98%);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}
@media (max-width: 768px) { .wsep::before { height: 30px; } }
.wsep-cream::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 26 C210 4 430 6 620 22 C820 39 1010 40 1200 20 L1200 46 Z' fill='%23FDFBF7'/%3E%3C/svg%3E"); }
.wsep-alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 26 C210 4 430 6 620 22 C820 39 1010 40 1200 20 L1200 46 Z' fill='%23f0ebe3'/%3E%3C/svg%3E"); }
.wsep-dark::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 24 C230 46 470 8 700 22 C900 34 1050 40 1200 24 L1200 46 Z' fill='%231d4354'/%3E%3C/svg%3E"); }
.wsep-white::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46 L0 26 C210 4 430 6 620 22 C820 39 1010 40 1200 20 L1200 46 Z' fill='%23ffffff'/%3E%3C/svg%3E"); }

/* Petit séparateur ornemental centré (vague + soleil) pour les transitions douces */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 4px auto 0;
    color: var(--color-accent-ink);
    opacity: 0.7;
}
.ornament::before, .ornament::after {
    content: '';
    height: 2px;
    width: 54px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, currentColor);
}
.ornament::after { background: linear-gradient(90deg, currentColor, transparent); }
.ornament svg { width: 30px; height: 22px; }

/* ---- Décor silhouettes camping (sections) ---- */
.cta-final { position: relative; overflow: hidden; }
.cta-final .container { position: relative; z-index: 1; }
.camp-scene {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    max-height: 250px;
    pointer-events: none;
    z-index: 0;
}
.camp-scene svg { width: 100%; height: 100%; display: block; }
.camp-scene .s-dune-back { fill: #fff; opacity: 0.05; }
.camp-scene .s-dune-front { fill: #fff; opacity: 0.09; }
.camp-scene .s-sun { fill: #fff; opacity: 0.07; }
.camp-scene .s-obj { fill: #fff; opacity: 0.12; }

/* ---- Fonds photo très estompés derrière les sections ---- */
.sec-photo { position: relative; }
.sec-photo > .container { position: relative; z-index: 1; }
.sec-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    filter: blur(1px) saturate(1.05);
    pointer-events: none;
}
.sec-photo-etang::after { background-image: url(../img/camping-aerien-etang.jpg); }
.sec-photo-aqua::after  { background-image: url(../img/aquatique-aerienne-2.jpg); } /* l'autre porte le logo incrusté */
.sec-photo-mer::after   { background-image: url(../img/camping-aerien-mer.jpg); }
.sec-photo-plage::after { background-image: url(../img/plage-palavas.jpg); }
.sec-photo-resto::after { background-image: url(../img/resto-terrasse-bois.jpg); }

/* Silhouettes d'angle sur les sections claires */
.hub, .page-intro, .features { position: relative; }
.corner-palm {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    color: var(--color-accent-ink);
    opacity: 0.06;
}
.corner-palm svg { width: 100%; height: 100%; display: block; }
.hub .container, .page-intro .container, .features .container { position: relative; z-index: 1; }

@media (max-width: 768px) {
    .page-hero { min-height: 52vh; }
    .page-hero .container { padding-top: 96px; }
    .fiche-layout { grid-template-columns: 1fr; gap: 28px; }
    .fiche-aside { position: static; }
    .page-intro { padding: 48px 0 16px; }
    .hub { padding: 56px 0; }
    /* Mobile : l'embed YouTube fait surgir des contrôles play/pause impossibles à
       masquer proprement (overlay tactile natif). On coupe la vidéo et on révèle
       le poster statique déjà présent en fond de .hero-video → hero net et rapide. */
    /* Hero moins vertical sur mobile : ratio 2:3 au lieu du plein écran (≈9:19).
       On rogne beaucoup moins les côtés de la vidéo 16:9 → moins d'info perdue.
       Et comme on est en controls=0 (API), plus besoin du gros zoom anti-UI. */
    .demo-hero { height: auto; aspect-ratio: 2 / 3; min-height: 0; }
    .demo-hero .hero-video iframe { transform: translate(-50%, -50%) scale(1.02); }
    /* Vidéo hero pilotée par l'IFrame API (boucle sans contrôles). Poster
       camping + Méditerranée en fond : visible le temps du chargement et en repli. */
    .demo-hero .hero-video { background-image: url(../img/camping-aerien-mer.jpg); background-position: center; }
}

/* ==== Articles tourisme (refonte multi-pages) ==== */
.article-body { padding: 56px 0 32px; }
.article-body .container { max-width: 780px; }
.article-body p { margin: 0 0 1.25em; line-height: 1.75; color: var(--color-text); }
.article-body h2 { font-family: var(--font-heading); font-size: 1.65rem; color: var(--color-dark); margin: 1.5em 0 .55em; }
.article-body ul { margin: 0 0 1.25em 1.25em; line-height: 1.7; color: var(--color-text); }
.article-backlink { margin-top: 2.4em; }
.article-backlink a { color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.article-backlink a:hover { text-decoration: underline; }
/* Le hub tourisme réutilise .hub-grid : plusieurs groupes titrés à la suite */
.hub-group { margin-top: 40px; }
.hub-group h2 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-dark); margin-bottom: 18px; }

/* ==== FAQ (accordéon details, sans JS) ==== */
.faq-list h2 { margin-top: 1.8em; }
.faq-list details { border-bottom: 1px solid var(--color-hairline, #e5ded2); }
.faq-list summary { cursor: pointer; padding: 16px 28px 16px 0; font-weight: 600; color: var(--color-dark); list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--color-accent-ink); transition: transform .2s; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { padding: 0 0 16px; margin: 0; }

/* ==== Formulaire de contact (refonte) ==== */
.contact-form { max-width: 640px; margin-top: 8px; }
.contact-form label { display: block; margin-bottom: 16px; font-weight: 600; color: var(--color-dark); }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--color-hairline, #ddd5c8); border-radius: var(--radius-md); font: inherit; background: #fff; color: var(--color-text); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent-ink); }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .contact-row { grid-template-columns: 1fr; } }
.form-confirm { background: #e8f6ee; border: 1px solid #9ed8b5; border-radius: var(--radius-md); padding: 4px 18px; margin-bottom: 22px; color: #1d5c38; font-weight: 600; }
.form-erreur { background: #fdf0ec; border-color: #eab4a4; color: #7a2c17; }
.form-erreur a { color: inherit; }
.form-rgpd { font-size: .85rem; color: var(--color-text-muted); margin: 10px 0 0; }

/* ==== Pages modèle d'hébergement ==== */
.page-hero-sub { color: rgba(255,255,255,.92); font-size: 1.05rem; margin-top: 8px; max-width: 34ch; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.model-specs { padding: 40px 0 8px; }
.specs-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.spec-item { display: inline-flex; align-items: center; gap: 6px; background: var(--color-card, #fff); border: 1px solid var(--color-hairline, #e5ded2); border-radius: var(--radius-pill, 999px); padding: 8px 16px; font-size: .92rem; font-weight: 600; color: var(--color-dark); }
.model-intro { font-size: 1.08rem; line-height: 1.75; color: var(--color-text); max-width: 68ch; margin-bottom: 24px; }
.model-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.model-detail { padding: 48px 0; background: var(--color-bg-alt, #f0ebe3); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.detail-block { background: var(--color-card, #fff); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.05)); }
.detail-block h3 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-dark); margin-bottom: 10px;  display: flex; align-items: center; gap: 9px; }
.detail-block p { color: var(--color-text); line-height: 1.7; margin: 0; }
.model-equip { padding: 48px 0; }
.equip-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: start; }
.equip-layout h2 { font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-dark); margin-bottom: 16px; }
.equip-aside { background: var(--color-bg-alt, #f0ebe3); border-radius: var(--radius-lg); padding: 24px; }
.equip-aside h3 { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-dark); margin-bottom: 12px; }
.equip-aside ul { margin: 0 0 14px 1.1em; line-height: 1.75; color: var(--color-text); }
.equip-aside a { color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
@media (max-width: 860px) { .equip-layout { grid-template-columns: 1fr; gap: 24px; } }

/* ==== Grille des modèles (hub de gamme) ==== */
.model-list { padding: 48px 0; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-top: 28px; }
.model-card { display: flex; flex-direction: column; background: var(--color-card, #fff); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.06)); text-decoration: none; color: inherit; transition: transform .3s var(--ease-out, ease), box-shadow .3s; }
.model-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 12px 30px rgba(0,0,0,.12)); }
.model-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt, #f0ebe3); }
.model-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out, ease); }
.model-card:hover .model-card-img img { transform: scale(1.04); }
.model-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.model-card-body h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-dark); line-height: 1.25; margin: 0; }
.model-card-specs { font-size: .92rem; font-weight: 600; color: var(--color-accent-ink); margin: 0; }
.model-card-badges { font-size: .82rem; color: var(--color-text-muted); }
.model-card-teaser { color: var(--color-text); line-height: 1.6; margin: 4px 0 0; flex: 1; }
.model-card-link { font-weight: 700; color: var(--color-cta-ink, #bd4029); margin-top: 10px; }

/* ==== Hero vidéo : anti écran noir au chargement ====
   L'iframe YouTube peint un fond noir opaque avant la première image et masquait
   le poster. On la garde transparente jusqu'à l'événement PLAYING (site.js). */
.demo-hero .hero-video iframe,
.demo-hero .hero-video > div { opacity: 0; transition: opacity .6s ease; }
.demo-hero .hero-video.yt-playing iframe,
.demo-hero .hero-video.yt-playing > div { opacity: 1; }

/* ==== Recette mobile (audit iOS du 27/08) ==== */
@media (max-width: 640px) {
    /* Cartes d'atouts : une par écran, c'était 6 écrans de scroll pour 6 phrases.
       Icône à gauche, texte à droite : la section tient en 2 écrans. */
    .features-grid { gap: 12px; }
    .feature-card { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; text-align: left; padding: 18px 16px; }
    .feature-card .feature-icon, .feature-card svg, .feature-card .icon-wrap { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
    .feature-card h3 { font-size: 1.08rem; margin: 0 0 4px; text-align: left; }
    .feature-card p { font-size: .95rem; line-height: 1.55; margin: 0; text-align: left; }
    /* Grilles à 2 colonnes : les vignettes devenaient illisibles sur 375 px. */
    .hub-grid, .gallery-grid, .model-grid, .detail-grid { grid-template-columns: 1fr; }
    /* Respiration excessive entre les sections sur petit écran. */
    .features, .hub, .model-list, .model-equip, .model-detail, .gallery { padding-top: 40px; padding-bottom: 40px; }
    .article-body { padding: 36px 0 20px; }
    .section-title { margin-bottom: 6px; }
    /* Légende sous la vignette : elle répétait le même texte sur chaque photo.
       Conservée dans le DOM pour la visionneuse et les lecteurs d'écran. */
    .gallery-item .gallery-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Barre d'URL Safari : elle masquait le bas de page. */
    /* La barre de reservation fixe fait 52 px et recouvrait les 48 derniers
       pixels du pied de page, dont la ligne de signature. */
    .footer { padding-bottom: 144px; }
}

/* Le chevron de défilement tombait pile sur le badge de prix du hero : masqué
   sur mobile, où le hero est court et l'invitation à défiler inutile. */
@media (max-width: 640px) {
    .demo-hero .scroll-cue { display: none; }
    /* Le poster reste en fond de .hero-video : il couvre le temps du chargement,
       puis la classe yt-playing révèle la vidéo (site.js). Pas de opacity
       forcée ici, sinon la vidéo se charge sans jamais devenir visible. */
}

/* Crédit photo des illustrations sous licence libre (CC BY / CC BY-SA : attribution obligatoire) */
.photo-credit { font-size: .82rem; color: var(--color-text-muted); margin-top: 2.2em; padding-top: 12px; border-top: 1px solid var(--color-hairline, #e5ded2); }
.photo-credit a { color: inherit; text-decoration: underline; }

/* ==== Articles : mise en forme éditoriale ==== */
.article-body .chapo { font-size: 1.18rem; line-height: 1.7; color: var(--color-dark); font-weight: 500; margin-bottom: 1.6em; }
.article-body h2 { font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-dark); margin: 1.8em 0 .5em; line-height: 1.25; }
.article-body h2:first-of-type { margin-top: .6em; }
/* :not(.btn) : sans lui, cette regle (0,1,1) battait le blanc de .btn-primary
   (0,1,0) et rendait tout bouton pose dans un corps d'article illisible,
   texte teal sur fond corail a 1,16:1 (constate sur /reservations/). Meme
   piege de specificite que .article-body ul:not([class]). */
.article-body a:not(.btn) { color: var(--color-accent-ink); text-decoration: none; border-bottom: 1px solid rgba(71,176,179,.35); }
.article-body a:not(.btn):hover { border-bottom-color: var(--color-accent-ink); }
.article-body ul { margin: 0 0 1.4em 0; padding-left: 1.3em; line-height: 1.75; }
.article-body ul li { margin-bottom: .4em; }
/* base.css remet list-style à none pour tous les ul (menus, cartes, chips) : dans
   les zones de texte, une liste sans marqueur se confond avec des paragraphes,
   on la rétablit ici. Les listes qui portent une classe gardent leur propre style. */
.article-body ul:not([class]) { list-style: disc; }
.article-body ol:not([class]) { list-style: decimal; }
.seo-content ul:not([class]) { list-style: disc; }
.article-body ul:not([class]) li::marker,
.seo-content ul:not([class]) li::marker { color: var(--color-accent-ink); }
/* Les encadrés (« En bref », conversion) sont des blocs libellé-valeur : ils
   gardent leur présentation sans marqueur. */
.article-body aside ul:not([class]) { list-style: none; padding-left: 0; }
/* Encadré « En bref » : repère factuel en tête d'article */
.article-infos { float: right; width: 260px; margin: 0 0 24px 28px; background: var(--color-bg-alt, #f0ebe3); border-radius: var(--radius-lg); padding: 20px 22px; }
.article-infos h2 { font-size: 1.1rem; margin: 0 0 10px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; color: var(--color-accent-ink); }
.article-infos ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; line-height: 1.6; }
.article-infos li { margin-bottom: 8px; color: var(--color-text); }
/* Credit d'auteur en fin d'article : mention obligatoire, mais discrete. */
.article-body .credit-photo { font-size: .82rem; color: var(--color-text-muted); font-style: italic; }

/* Une adresse web collee dans le texte ne se coupe pas toute seule et
   elargit la page sur un petit ecran (constate a 320 px). */
.article-body p, .article-body li { overflow-wrap: anywhere; }

.article-figure { margin: 2em 0; }
.article-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.article-figure figcaption { font-size: .88rem; color: var(--color-text-muted); margin-top: 8px; text-align: center; }
@media (max-width: 700px) {
    .article-infos { float: none; width: auto; margin: 0 0 24px; }
    .article-body h2 { font-size: 1.4rem; }
    .article-body .chapo { font-size: 1.08rem; }
}

/* ==== Sélecteur visuel de modèles ====
   Une barre d'onglets textuels ne dit rien du produit : chaque entrée montre
   sa photo, sa capacité et ses équipements pour qu'on voie la différence
   avant de cliquer. */
.model-switch { padding: 44px 0 8px; background: var(--color-bg-alt, #f0ebe3); }
.ms-head { margin-bottom: 18px; }
.ms-head h2 { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-dark); margin: 0 0 4px; }
.ms-head p { color: var(--color-text-muted); margin: 0; font-size: .95rem; }
/* Grille plutôt que défilement horizontal : un carrousel cache la moitié des
   modèles, et rien n'indique qu'il faut pousser sur le côté. Tout est visible
   d'un coup, sur deux lignes au plus. */
.ms-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 4px 0 6px; }
.ms-card { background: var(--color-card, #fff); border-radius: var(--radius-lg); border: 2px solid transparent; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.ms-card:hover { transform: translateY(-3px); }
.ms-card.is-current { border-color: var(--color-accent-ink); }
.ms-card.is-picked { border-color: var(--color-cta-ink, #bd4029); }
.ms-link { display: flex; flex-direction: column; gap: 3px; padding: 0 0 10px; text-decoration: none; color: inherit; flex: 1; }
.ms-photo { display: block; aspect-ratio: 22 / 15; overflow: hidden; background: var(--color-bg-alt, #eee); }
.ms-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .ms-text enveloppe le nom et la capacité : sans display block, les deux
   spans restaient sur la même ligne et la capacité remontait à côté du nom. */
.ms-text { display: flex; flex-direction: column; }
.ms-name { display: block; font-weight: 700; color: var(--color-dark); padding: 10px 12px 0; line-height: 1.25; font-size: .97rem; }
.ms-meta { font-size: .85rem; color: var(--color-accent-ink); font-weight: 600; padding: 0 12px; }
.ms-badges { padding: 6px 12px 0; font-size: .8rem; min-height: 18px; margin-top: auto; }
.ms-b { margin-right: 4px; }
.ms-b-new { background: var(--color-cta, #fe7259); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.ms-card.is-current .ms-link::after { content: 'Vous consultez ce modèle'; display: block; font-size: .74rem; color: var(--color-accent-ink); padding: 4px 12px 0; font-weight: 600; }
.ms-compare { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--color-hairline, #e8e1d6); padding: 9px 12px; font-size: .84rem; color: var(--color-text-muted); cursor: pointer; user-select: none; }
.ms-compare input { width: 19px; height: 19px; accent-color: var(--color-cta-ink, #bd4029); cursor: pointer; }

/* ==== Barre de comparaison flottante ==== */
.cmp-bar { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 60; background: var(--color-darker, #14303d); color: #fff; border-radius: var(--radius-pill, 999px); padding: 10px 12px 10px 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.28); transition: transform .3s var(--ease-out, ease); max-width: calc(100vw - 24px); }
.cmp-bar.is-visible { transform: translate(-50%, 0); }
.cmp-bar.is-full { animation: cmp-shake .4s; }
@keyframes cmp-shake { 25% { transform: translate(-52%, 0); } 75% { transform: translate(-48%, 0); } }
.cmp-count { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.cmp-actions { display: flex; align-items: center; gap: 8px; }
.cmp-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; background: none; border: none; color: rgba(255,255,255,.75); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; }
.cmp-go.is-off { opacity: .45; pointer-events: none; }

/* ==== Tableau comparatif ==== */
.cmp-section { padding: 24px 0 56px; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cmp-table th, .cmp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-hairline, #e8e1d6); vertical-align: top; }
.cmp-table thead th { background: var(--color-bg-alt, #f0ebe3); position: relative; vertical-align: bottom; }
.cmp-table thead th a { display: block; text-decoration: none; color: var(--color-dark); font-weight: 700; line-height: 1.25; }
.cmp-table thead th img { width: 100%; max-width: 170px; aspect-ratio: 22/15; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 8px; display: block; }
.cmp-table tbody th { font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.cmp-table tr.cmp-diff td { background: rgba(254,114,89,.07); font-weight: 600; color: var(--color-dark); }
.cmp-table.hide-same tr.cmp-same { display: none; }
.cmp-oui { color: #1d7a4c; font-weight: 700; }
.cmp-non { color: var(--color-text-muted); }
.cmp-del { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,.9); border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: .9rem; color: var(--color-dark); }
.cmp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.cmp-toggle { display: flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--color-text); cursor: pointer; }
.cmp-toggle input { width: 16px; height: 16px; accent-color: var(--color-cta-ink, #bd4029); }
.cmp-vide { color: var(--color-text-muted); background: var(--color-bg-alt, #f0ebe3); padding: 22px; border-radius: var(--radius-lg); }
.page-hero-court { min-height: 34vh; }
@media (max-width: 640px) {
    .model-switch { padding-top: 32px; }
    .cmp-bar { left: 12px; right: 12px; transform: translateY(140%); max-width: none; padding-left: 16px; }
    .cmp-bar.is-visible { transform: translateY(0); }
    .cmp-count { font-size: .85rem; white-space: normal; }
    /* la barre fixe de réservation occupe déjà le bas de l'écran, mais
       seulement une fois révélée par le défilement */
    body:has(#booking-sticky.sticky-visible) .cmp-bar { bottom: 76px; }
    /* Deux barres pleine largeur empilées mangeaient 149 px sur 844. Dès que la
       barre de réservation est là, le comparatif se replie en pastille calée à
       droite : le compteur passe dans le bouton, « Vider » reste accessible
       depuis la page du comparatif. */
    .cmp-bar { padding: 7px 8px 7px 16px; gap: 10px; justify-content: flex-end; }
    /* Le compteur vit dans le bouton en mobile : l'afficher deux fois ne sert à rien. */
    .cmp-count { display: none; }
    .cmp-go { min-height: 44px; display: inline-flex; align-items: center; }
    body:has(#booking-sticky.sticky-visible) .cmp-bar {
        left: auto; right: 12px; bottom: 72px;
        transform: translateY(160%);
        padding: 0; gap: 0;
        background: none; box-shadow: none;
    }
    body:has(#booking-sticky.sticky-visible) .cmp-bar.is-visible { transform: translateY(0); }
    body:has(#booking-sticky.sticky-visible) .cmp-clear { display: none; }
    body:has(#booking-sticky.sticky-visible) .cmp-go { box-shadow: 0 6px 20px rgba(0,0,0,.3); }
}

/* ==== Carte OpenStreetMap en façade ==== */
.map-section { padding: 48px 0 56px; background: var(--color-bg-alt, #f0ebe3); }
/* max-height plafonne la hauteur, donc aspect-ratio reduit la largeur a 818 px
   dans un conteneur de 1200 : sans marge automatique le bloc restait cale a
   gauche, decentre de 167 px (signale le 28/08). */
.map-facade { position: relative; display: block; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; max-height: 460px; width: 100%; background: #dfd8cc; }
.map-facade img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) brightness(.82); transition: filter .3s; }
.map-facade:hover img { filter: saturate(1) brightness(.92); }
.map-facade-cta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; background: var(--color-cta-solid, #e04d31); color: #fff; font-weight: 700; padding: 14px 24px; border-radius: var(--radius-pill, 999px); box-shadow: 0 8px 26px rgba(0,0,0,.28); white-space: nowrap; }
.map-facade-cta svg { width: 19px; height: 19px; flex: none; }
.map-facade-note { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: linear-gradient(transparent, rgba(0,0,0,.62)); color: rgba(255,255,255,.92); font-size: .82rem; text-align: center; }
.map-facade.is-open { aspect-ratio: 16 / 9; cursor: default; }
.map-facade.is-open iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-links { text-align: center; margin-top: 14px; font-size: .93rem; color: var(--color-text-muted); }
.map-links a { color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.map-links a:hover { text-decoration: underline; }
@media (max-width: 640px) { .map-facade { aspect-ratio: 4 / 3; } .map-facade-note { font-size: .74rem; } }

/* Quand la barre de réservation est affichée, le comparatif se pose au-dessus.
   Tant qu'elle est masquée (haut de page), il reste en bas d'écran. */
@media (min-width: 641px) {
    body:has(#booking-sticky.sticky-visible) .cmp-bar { bottom: 92px; }
}
.cmp-bar:not(.is-visible) { visibility: hidden; transition: transform .3s var(--ease-out, ease), visibility 0s .3s; }

/* .btn-outline a été dessiné pour les fonds sombres (texte et bordure blancs) :
   posé sur une section claire il devient invisible (contraste mesuré 1.0:1 à
   l'audit croisé du 27/08, sur les 14 pages modèle). Version foncée partout,
   version blanche conservée dans les seules sections sombres. */
.model-actions .btn-outline,
.hub .btn-outline,
.article-body .btn-outline,
.map-links + * .btn-outline,
.cmp-foot .btn-outline {
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.model-actions .btn-outline:hover,
.hub .btn-outline:hover,
.article-body .btn-outline:hover {
    background: var(--color-dark);
    color: #fff;
}

/* Encart de conversion dans le corps des articles tourisme */
.article-conv { background: var(--color-dark); color: #fff; border-radius: var(--radius-lg); padding: 22px 26px; margin: 2.2em 0; }
.article-conv strong { color: #fff; }
.article-conv p { margin: 0; line-height: 1.7; color: rgba(255,255,255,.9); }
.article-conv a,
.article-body .article-conv a:not(.btn) { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.45); }

/* Lien vers les avis Google sous la section avis (arbitrage du 27/08 : pas de
   moyenne mise en avant, mais rien de caché non plus). */
.reviews-link { text-align: center; margin-top: 26px; }
.reviews-link a { color: var(--color-dark); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--color-cta, #fe7259); padding-bottom: 2px; }
.reviews-link a:hover { color: var(--color-cta-ink, #bd4029); }

/* Modèle non réservable en ligne : on le dit d'emblée plutôt que de laisser le
   visiteur chercher un semainier absent (arbitrage du 27/08). */
.avis-resa { background: #fdf1e4; border-bottom: 1px solid #efdcc7; }
.avis-resa p { margin: 0; padding: 14px 0; color: var(--color-dark); line-height: 1.6; }
.avis-resa a { color: var(--color-cta-ink); font-weight: 700; text-decoration: underline; }
.ms-b-tel { background: var(--color-dark); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: .68rem; font-weight: 700; }

/* Prix plancher sur les pages modèle (affiché seulement si renseigné) */
.model-prix { font-size: 1.15rem; color: var(--color-dark); margin: 0 0 20px; }
.model-prix strong { font-size: 1.5rem; color: var(--color-cta-ink, #bd4029); font-family: var(--font-heading); }
.model-prix-note { display: block; font-size: .82rem; color: var(--color-text-muted); font-weight: 400; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   FICHE MODÈLE : deux colonnes, récapitulatif qui suit le défilement
   Reprise du gabarit de la maquette d'origine (arbitrage du 27/08).
   ═══════════════════════════════════════════════════════════════════════ */
.fiche { padding: 52px 0 64px; }
.fiche-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(min(300px, 100%), 0.85fr); gap: 52px; align-items: start; }
.fiche-intro { font-size: 1.14rem; line-height: 1.7; color: var(--color-text); margin: 0 0 30px; max-width: 62ch; }
.fiche-photos-note { font-size: .82rem; color: var(--color-text-muted); margin: 12px 0 0; }
.fiche-detail { margin-top: 44px; }
.fiche-detail h2, .fiche-equip h2 { font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-dark); margin: 0 0 20px; }
.fiche-detail .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.fiche-detail .detail-block { background: var(--color-bg-alt, #f0ebe3); border-radius: var(--radius-md); padding: 20px 22px; box-shadow: none; }
.fiche-detail .detail-block h3 { font-family: var(--font-body); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--color-accent-ink); margin: 0 0 8px; font-weight: 700; }
.fiche-detail .detail-block p { font-size: .95rem; line-height: 1.65; color: var(--color-text); margin: 0; }
.fiche-equip { margin-top: 44px; }
.fiche-savoir { font-size: .9rem; line-height: 1.7; color: var(--color-text-muted); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-hairline, #e5ded2); }
.fiche-savoir a { color: var(--color-accent-ink); font-weight: 600; }

/* Le récapitulatif reste sous les yeux pendant la lecture de la fiche */
.fiche-aside { position: sticky; top: 96px; background: var(--color-card, #fff); border: 1px solid var(--color-hairline, #e5ded2); border-radius: var(--radius-lg); box-shadow: 0 10px 34px rgba(29, 67, 84, .07); padding: 26px 24px; }
.fiche-price { font-family: var(--font-body); font-size: .95rem; color: var(--color-text-muted); margin: 0 0 2px; }
.fiche-price strong { display: inline-block; font-family: var(--font-heading); font-size: 1.9rem; color: var(--color-dark); }
.fiche-price small { font-size: .9rem; }
.fiche-price-note { font-size: .78rem; color: var(--color-text-muted); margin: 0 0 18px; line-height: 1.5; }
.fiche-aside .spec-list { list-style: none; margin: 0 0 18px; padding: 0; }
.fiche-aside .spec-list li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--color-hairline, #e8e1d6); font-size: .92rem; }
.fiche-aside .spec-list li:last-child { border-bottom: none; }
.fiche-aside .spec-list span:first-child { color: var(--color-text-muted); }
.fiche-aside .spec-list span:last-child { font-weight: 600; color: var(--color-dark); text-align: right; }
.fiche-aside .equip-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.fiche-aside .equip-chips span { background: var(--color-bg-alt, #f0ebe3); padding: 5px 11px; border-radius: var(--radius-pill, 999px); font-size: .78rem; color: var(--color-dark); }
.fiche-aside .btn-block { display: block; width: 100%; text-align: center; }
.fiche-aside .fiche-tel { margin-top: 9px; color: var(--color-dark); border-color: var(--color-hairline, #ddd5c8); font-weight: 600; }
.fiche-aside .fiche-tel:hover { border-color: var(--color-dark); background: var(--color-dark); color: #fff; }

@media (max-width: 980px) {
    .fiche-layout { grid-template-columns: 1fr; gap: 32px; }
    /* Sur une colonne, le récapitulatif remonte juste sous l'intro : c'est là
       qu'on décide, pas après 15 photos. */
    .fiche-aside { position: static; order: -1; }
    .fiche-main { display: contents; }
    .fiche-intro { order: -2; }
    .fiche { padding-top: 34px; }
}

/* ═══ Sélecteur des autres modèles : compact, et posé en fin de page ═══ */
.model-switch { padding: 40px 0 44px; background: var(--color-bg-alt, #f0ebe3); }
.ms-head h2 { font-size: 1.35rem; }
.ms-track { gap: 10px; }
.ms-card { border-width: 1px; border-color: var(--color-hairline, #e5ded2); }
.ms-photo { aspect-ratio: 3 / 2; }
.ms-link { padding-bottom: 8px; gap: 0; }
.ms-name { font-size: .88rem; padding: 8px 10px 0; }
.ms-meta { font-size: .76rem; padding: 2px 10px 0; line-height: 1.35; font-weight: 500; color: var(--color-text-muted); }
.ms-compare { padding: 7px 10px; font-size: .78rem; }
.ms-card.is-current .ms-link::after { font-size: .7rem; padding: 3px 10px 0; }


/* Accès direct au comparatif depuis une page de gamme */
.model-list-compare { text-align: center; margin-top: 28px; }
.model-list-compare a { font-weight: 700; color: var(--color-dark); border-bottom: 2px solid var(--color-cta-solid); padding-bottom: 3px; }
.model-list-compare a:hover { color: var(--color-cta-ink); }

/* Nombre de colonnes du sélecteur de modèles, du plus large au plus étroit. */
@media (max-width: 1180px) { .ms-track { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .ms-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ms-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .ms-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

/* ═══════════════════════════════════════════════════════════════════════
   SEMAINIER THÉLIS : mise à la charte
   Le widget injecte son HTML en LIGHT DOM (vérifié : aucun shadow root sur la
   page), on peut donc le styler. Sa feuille (compiled/…style.min.css) est en
   revanche injectée par son script APRÈS la nôtre et son contenu est illisible
   (CORS) : à spécificité égale c'est elle qui gagne, et on ne peut pas viser
   juste au-dessus faute de connaître ses sélecteurs. D'où !important, limité
   aux couleurs et à la typographie.
   Aucune règle de position, display ou dimension : la mécanique de réservation
   reste intégralement celle de Thélis, seule sa peau change.
   Palette d'origine remplacée : rose #ff0099, violet #3333cc, Open Sans.
   ═══════════════════════════════════════════════════════════════════════ */
.semainier-grid .thr-simpleblock,
.semainier-grid .thr-simpleblock * {
    font-family: var(--font-body), system-ui, sans-serif !important;
}
.semainier-grid .thr-simpleblock { background: transparent !important; color: var(--color-text) !important; }
.semainier-grid .thr-simpleblock-engine,
.semainier-grid .thr-simpleblock-results { background: var(--color-card, #fff) !important; border-radius: var(--radius-lg); }

/* Étiquettes du moteur : rose fluo -> teal d'encre */
.semainier-grid .thr-simpleblock-engine-label {
    color: var(--color-accent-ink) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
}
.semainier-grid .thr-simpleblock .form-control {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-hairline, #ddd5c8) !important;
    color: var(--color-dark) !important;
    font-size: 1rem !important; /* 16 px : en dessous, iOS zoome sur le champ */
}
.semainier-grid .thr-simpleblock .form-control:focus {
    outline: 2px solid var(--color-accent);
    border-color: var(--color-accent) !important;
}

/* Onglets de mois : violet -> bleu profond de la charte */
.semainier-grid .thr-simpleblock-month {
    background: var(--color-dark) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.semainier-grid .thr-simpleblock-month-current,
.semainier-grid .thr-simpleblock-month.thr-simpleblock-month-current {
    background: var(--color-card, #fff) !important;
    color: var(--color-dark) !important;
}

/* Noms de catégorie : violet -> bleu profond, dans la police de titrage */
.semainier-grid .thr-simpleblock-category,
.semainier-grid .thr-simpleblock-category-name,
.semainier-grid .thr-promotion-description-name {
    color: var(--color-dark) !important;
    font-family: var(--font-heading), Georgia, serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.semainier-grid .thr-simpleblock-category-name { background: rgba(255, 255, 255, .9) !important; }

/* Badge de promotion : violet -> corail de la charte */
/* Cartouche de remise : le widget le plaque dans l'angle en absolu, sans rayon
   ni retrait, si bien qu'il mordait sur deux bords sans demarcation. On le pose
   a l'interieur de la cellule, arrondi et legerement ombre. */
.semainier-grid .thr-promotion-block {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: auto !important;
    /* Thelis impose une hauteur de 42px a la pastille alors que sa ligne de
       texte n'en fait que 26 : en display block, le pourcentage restait colle
       en haut avec 21px de vide dessous. On rend la hauteur au contenu et on
       centre sur les deux axes. */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 14px rgba(20, 48, 61, .22) !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
/* Liseres entre les semaines : les cellules n'avaient qu'une bordure droite,
   sans bordure haute ni gauche, ce qui faisait flotter les blocs de prix. */
.semainier-grid .thr-simpleblock-stay {
    border-left: 1px solid rgba(20, 48, 61, .08) !important;
    border-top: 1px solid rgba(20, 48, 61, .08) !important;
    border-right: 1px solid rgba(20, 48, 61, .08) !important;
}
.semainier-grid .thr-simpleblock-stays > *:first-child .thr-simpleblock-stay { border-left: 0 !important; }

.semainier-grid .thr-promotion-block {
    background: var(--color-cta-solid) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.semainier-grid .thr-promotion-description-thumbs,
.semainier-grid .thr-promotion-description-thumbs .far,
.semainier-grid .thr-promotion-description-thumbs i { color: var(--color-cta-ink) !important; }

/* Prix et périodes. Le montant lui-même vit dans .thr-simpleblock-price,
   enfant de .thr-simpleblock-stay-price : c'est lui qui portait le rose fluo. */
.semainier-grid .thr-simpleblock-stay-price { color: var(--color-dark) !important; font-weight: 600 !important; }
.semainier-grid .thr-simpleblock-price { color: var(--color-cta-ink) !important; font-weight: 700 !important; }
.semainier-grid .thr-simpleblock-price-old,
.semainier-grid .thr-simpleblock-stay-price del,
.semainier-grid .thr-simpleblock-stay-price s { color: var(--color-text-muted) !important; font-weight: 400 !important; }
.semainier-grid .thr-simpleblock-stay-period .label { color: var(--color-text-muted) !important; }
.semainier-grid .thr-simpleblock-stay.unavailable { background: var(--color-bg-alt, #f4f1ea) !important; }
.semainier-grid .thr-simpleblock-stay.unavailable .thr-simpleblock-stay-price { color: var(--color-text-muted) !important; font-weight: 400 !important; }

/* Boutons de réservation du widget */
.semainier-grid .thr-simpleblock a.btn,
.semainier-grid .thr-simpleblock button.btn,
.semainier-grid .thr-simpleblock .btn-primary {
    background: var(--color-cta-solid) !important;
    border-color: var(--color-cta-solid) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--radius-pill, 999px) !important;
}

/* Bloc éditorial de bas de page : un vrai texte, pas un pavé de mots-clés. */
.seo-content { padding: 56px 0 64px; background: var(--color-bg-alt, #f0ebe3); }
/* 780 px comme .article-body : ces blocs sont devenus du contenu qu'on lit
   vraiment, et 860 px poussaient la ligne à une centaine de caractères. */
.seo-content .container { max-width: 780px; }
.seo-content ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.seo-content li { line-height: 1.75; color: var(--color-text); margin-bottom: .5em; }
.seo-content h2 { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-dark); margin: 1.6em 0 .5em; line-height: 1.25; }
.seo-content h2:first-child { margin-top: 0; }
.seo-content p { line-height: 1.8; color: var(--color-text); margin: 0 0 1.1em; }
.seo-content a { color: var(--color-accent-ink); border-bottom: 1px solid rgba(35,107,110,.3); }
.seo-content a:hover { border-bottom-color: var(--color-accent-ink); }

/* ── Tableau de tarifs (services, hébergements) ─────────────────────── */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
.tarif-table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 30rem; }
.tarif-table th,
.tarif-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--color-hairline); }
.tarif-table thead th { background: var(--color-bg-alt); font-weight: 600; color: var(--color-text); }
.tarif-table tbody tr:last-child td { border-bottom: 0; }
.tarif-table td:last-child { white-space: nowrap; color: var(--color-text-muted); }
.tarif-note { display: block; font-size: .84rem; font-weight: 400; color: var(--color-text-muted); }
/* Sous 560 px, un tableau à deux colonnes se lit mieux empilé que scrollé :
   l'en-tête reste dans le flux pour les lecteurs d'écran, hors de vue seulement. */
@media (max-width: 560px) {
    .tarif-table { min-width: 0; font-size: .95rem; }
    .tarif-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tarif-table tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--color-hairline); }
    .tarif-table tr:last-child { border-bottom: 0; }
    .tarif-table td { display: block; padding: .1rem 0; border: 0; }
    .tarif-table td:last-child { white-space: normal; color: var(--color-text); font-weight: 600; }
    /* En pile, l'en-tête disparaît : chaque cellule porte le nom de sa
       colonne dans data-l (règle déplacée de v2.css, que /services/ ne
       charge pas : « Télévision 8 € 40 € 70 € » sans intitulé). */
    .tarif-table td[data-l]::before { content: attr(data-l) " : "; font-weight: 700; color: var(--color-text-muted); }
    .tarif-table td[data-l] { display: flex; gap: 6px; }
}

/* ── Préfooter de réassurance ────────────────────────────────────────────
   Les quatre arguments sont ceux du contrat de réservation, pas des formules :
   acompte de 30 %, garantie à 4 %, solde à l'arrivée, accueil au téléphone. */
/* Fond foncé, un cran au-dessus du footer : le préfooter prend --color-dark
   (#1d4354), le footer garde --color-darker (#14303d). La bande finit aussi la
   descente commencée par .cta-final, dont le dégradé se termine sur ce ton. */
.prefooter { padding: 56px 0 48px; background: var(--color-dark, #1d4354); border-top: 1px solid rgba(255,255,255,.10); }
.prefooter-titre { font-family: var(--font-heading); font-size: 1.75rem; color: #fff; text-align: center; margin: 0 0 34px; }
.prefooter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.prefooter-item { text-align: center; }
/* Teal éclairci pour le fond sombre : --color-accent (#47b0b3) tombe à 3,9:1 ici,
   celui-ci tient 6:1 et reste lisible pour le lien du téléphone. */
.prefooter-item svg { width: 34px; height: 34px; color: #7fd4d6; margin: 0 auto 14px; display: block; }
.prefooter-item h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.prefooter-item p { font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.85); margin: 0; }
.prefooter-item a { color: #7fd4d6; font-weight: 600; white-space: nowrap; }
.prefooter-faits { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; font-size: .9rem; color: rgba(255,255,255,.85); }
.prefooter-faits strong { color: #fff; }
/* Puce en absolu, pas en flex : un li flex traite chaque nœud comme une colonne
   et découpait « Carte bancaire, chèques vacances ANCV et chèques acceptés » en
   trois blocs de largeurs inégales dès que la phrase passait sur deux lignes. */
.prefooter-faits li { position: relative; padding-left: 15px; }
.prefooter-faits li::before { content: ''; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: #7fd4d6; }
.footer-signature { margin-top: 6px; font-size: .82rem; opacity: .9; }
.footer-signature a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .prefooter-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; } }
@media (max-width: 560px) {
    .prefooter { padding: 40px 0 36px; }
    .prefooter-titre { font-size: 1.4rem; margin-bottom: 26px; }
    /* Une colonne, tout centré : l'icône à gauche du titre avec le texte
       décalé dessous donnait un alignement bancal (retour de Charles). */
    .prefooter-grid { grid-template-columns: 1fr; gap: 28px; }
    .prefooter-item svg { width: 30px; height: 30px; margin-bottom: 10px; }
    .prefooter-faits { align-items: center; text-align: center; gap: 11px; margin-top: 26px; }
    .prefooter-faits li { padding-left: 0; }
    .prefooter-faits li::before { display: none; }
}

/* Appel direct dans l'en-tete
   Le numero a quitte la barre fixe du bas, ou il volait de la place aux deux
   actions de reservation, pour se poser a gauche du burger et rester
   atteignable a tout moment. Icone dessinee et non emoji : le rendu ne depend
   plus du systeme du visiteur. */
.nav-tel, .nav-tarifs { display: none; }
@media (max-width: 940px) {
    .nav-tel, .nav-tarifs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: 2px;
        color: inherit;
        border-radius: 50%;
        transition: background 0.25s var(--ease-out);
    }
    .nav-tel svg, .nav-tarifs svg { width: 21px; height: 21px; display: block; }
    .nav-tel:active, .nav-tarifs:active { background: rgba(255,255,255,.14); }
    .demo-nav.scrolled .nav-tel:active,
    .demo-nav.scrolled .nav-tarifs:active { background: rgba(20,48,61,.10); }
    .demo-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .demo-nav-brand { margin-right: auto; }
}

/* La photo n'apparait qu'une fois decodee : sans cela le cadre affichait la
   precedente pendant le chargement. */
.demo-lightbox figure img { opacity: 0; transition: opacity .28s var(--ease-out); }
.demo-lightbox figure img.is-ready { opacity: 1; }

/* Carte du restaurant : listes de plats avec prix alignes a droite, en colonnes
   qui se reorganisent selon la largeur. Le trait de conduite relie le plat a son
   prix sans avoir besoin d'un tableau. */
.menu-carte { padding: 56px 0 64px; background: var(--color-bg-alt, #f0ebe3); }
.carte-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 30px 44px; margin-top: 34px; }
.carte-bloc h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-dark); margin: 0 0 .5em; }
.carte-note { font-size: .84rem; color: var(--color-text-muted); font-style: italic; margin: -.3em 0 .9em; }
.carte-liste { list-style: none; margin: 0; padding: 0; }
.carte-liste li { display: flex; align-items: baseline; gap: 10px; padding: .5em 0; border-bottom: 1px dotted rgba(0,0,0,.14); }
.carte-liste li:last-child { border-bottom: 0; }
.carte-liste span { flex: 1; color: var(--color-text); line-height: 1.45; }
.carte-liste em { display: block; font-size: .84rem; color: var(--color-text-muted); font-style: normal; }
.carte-liste b { font-weight: 700; color: var(--color-dark); white-space: nowrap; }
.carte-allergenes { margin-top: 30px; font-size: .84rem; color: var(--color-text-muted); text-align: center; }
@media (max-width: 560px) { .menu-carte { padding: 40px 0 44px; } .carte-grid { gap: 26px; } }

/* Grille de pictos pour aerer les longues pages de texte : une icone dessinee
   plutot qu'un emoji, dont le rendu change d'un systeme a l'autre. */
.picto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 26px 30px; margin: 1.8em 0 2.2em; }
.picto-item svg { width: 30px; height: 30px; color: var(--color-accent-ink); display: block; margin-bottom: 10px; }
.picto-item h3 { font-size: 1rem; font-weight: 700; color: var(--color-dark); margin: 0 0 .35em; }
.picto-item p { font-size: .92rem; line-height: 1.6; color: var(--color-text); margin: 0; }
@media (max-width: 560px) { .picto-grid { gap: 22px; } }

/* Icones en ligne dans un texte ou un badge : calees sur la hauteur des lettres. */
svg.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.16em; flex: none; }
.model-card-badges svg.ico { opacity: .85; }

/* ── Notes de recette, version de travail uniquement ─────────────────────
   Points a trancher avec le camping, poses sous le bandeau de la page qu'ils
   concernent. Le bloc n'est pas genere en production : rien a retirer le jour
   de la bascule. Contour en pointille et fond ambre pour qu'on ne puisse pas
   le confondre avec le contenu du site. */
.note-client {
    margin: 22px auto 0;
    max-width: 1160px;
    padding: 0 20px;
}
.note-client .container {
    border: 2px dashed #b45309;
    border-radius: var(--radius-lg, 16px);
    background: #fffbeb;
    padding: 20px 24px 18px;
    max-width: none;
}
.note-client-titre {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #92400e;
}
.note-client ul { list-style: disc; margin: 0; padding-left: 1.25em; }
.note-client li { margin-bottom: .5em; line-height: 1.6; color: #4a3410; font-size: .94rem; }
.note-client li:last-child { margin-bottom: 0; }
.note-client li strong { color: #7c2d12; }
.note-client-pied {
    margin: 12px 0 0;
    font-size: .8rem;
    font-style: italic;
    color: #92400e;
    opacity: .85;
}
@media (max-width: 640px) {
    .note-client { padding: 0 14px; }
    .note-client .container { padding: 16px 16px 14px; }
    .note-client li { font-size: .9rem; }
}

/* Comptes officiels du camping, en pied de page. Icones dessinees, jamais des
   pictos systeme dont le rendu change d'un appareil a l'autre. */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.20);
    transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.footer-social svg { width: 19px; height: 19px; display: block; }

/* ── Bandeau de promotion, sur toutes les pages ──────────────────────────
   Les remises n'etaient annoncees que sur la page des tarifs, ou l'on
   n'arrive qu'en cherchant deja les prix. */
.promo-bar { background: var(--color-cta-solid, #e04d31); }
.promo-bar a {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px 14px;
    max-width: 1160px; margin: 0 auto; padding: 11px 20px;
    color: #fff; text-decoration: none; text-align: center;
}
.promo-bar-tag {
    font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: var(--radius-pill, 999px);
}
.promo-bar-txt { font-size: .95rem; font-weight: 600; }
.promo-bar-cta {
    font-size: .88rem; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 1px;
}
.promo-bar a:hover .promo-bar-cta { border-bottom-color: #fff; }
@media (max-width: 640px) {
    .promo-bar a { padding: 10px 14px; gap: 6px 10px; }
    .promo-bar-txt { font-size: .88rem; }
    .promo-bar-cta { font-size: .82rem; }
}

.lead-cta { margin: 1.6em 0 .4em; }

/* Liens du pied de page : 34 px de haut sur mobile, sous le seuil de confort
   au pouce. */
@media (max-width: 640px) {
    .footer-col p { margin: 0; }
    .footer-col p a { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-bottom a { display: inline-block; padding: 4px 0; }
}

/* Picto de rubrique : trait fin, taille de l'oeil du titre. Il ponctue la
   lecture des blocs sans transformer chacun en vignette. */
.detail-ico { width: 20px; height: 20px; flex: none; color: var(--color-accent-ink); opacity: .9; }
.detail-block h3 span { display: block; }

/* ── Le nom du lieu en fond du dernier appel a l'action ──────────────────
   textLength + lengthAdjust forcent le mot a occuper exactement la largeur du
   bloc quelle que soit la police reellement chargee, ce qu'un font-size en vw
   ne garantit pas. preserveAspectRatio="none" le laisse ensuite remplir sa
   boite : sans garde-fou l'etirement vertical suivrait la hauteur de la
   section et deformerait les lettres, d'ou l'aspect-ratio qui le fige. */
.cta-final { position: relative; overflow: hidden; }
.cta-final .container { position: relative; z-index: 1; }
.mot-fond {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1000 / 300;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.mot-fond svg { width: 100%; height: 100%; display: block; }
.mot-fond text {
    font-family: var(--font-body), sans-serif;
    font-weight: 800;
    font-size: 240px;
    letter-spacing: -0.03em;
    fill: #fff;
    opacity: .1;
}
/* Sur mobile la section est etroite et haute : un etirement un peu plus franc
   redonne de la presence au mot sans le rendre illisible. */
@media (max-width: 700px) {
    .mot-fond { aspect-ratio: 1000 / 430; }
    .mot-fond text { opacity: .12; }
}

/* La scene de camping suit le mot d'un cran vers le haut : elle decore
   desormais le prefooter, et non plus le seul appel a l'action de l'accueil. */
.prefooter { position: relative; overflow: hidden; }
.prefooter > .container { position: relative; z-index: 1; }

/* ── Cibles tactiles du bandeau et de la barre fixe (recette du 28/08) ─────
   Mesurees au simulateur et sur dix largeurs : les boutons de menu deroulant
   tombaient a 34 px de haut et la croix de fermeture de la barre fixe a 17 px
   de large, sous le seuil de 44 px. La zone cliquable est agrandie sans
   changer le dessin : padding pour les uns, boite fixe pour l'autre. */
@media (max-width: 940px) {
    .demo-nav-links .nav-drop-btn { min-height: 44px; }
}
@media (max-width: 900px) {
    .sticky-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        right: 6px;
    }
}

/* ── Arriere-plan verrouille pendant que le tiroir mobile est ouvert ───────
   overflow:hidden suffit a la souris ; touch-action:none bloque le geste tactile,
   qu'iOS laisse sinon passer outre. L'ensemble ne touche pas au flux : la page
   garde sa hauteur et sa position, et le tiroir se ferme la ou on l'a ouvert.
   Le tiroir lui-meme reste defilable, sa liste pouvant depasser l'ecran. */
body.nav-ouvert {
    overflow: hidden;
    touch-action: none;
}
body.nav-ouvert .demo-nav-links {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

/* ── Consentement aux traceurs (assets/js/consentement.js) ─────────────────
   Fixé en bas, opaque (pas de backdrop-filter sur un élément dont le fond
   défile, règle du projet). « Tout refuser » et « Tout accepter » ont
   exactement le même style : la CNIL exige que refuser soit aussi simple qu'accepter. */
.consentement {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    pointer-events: none;
}
.consentement-corps {
    pointer-events: auto;
    max-width: 760px; margin: 0 auto; padding: 20px 22px;
    background: var(--color-card, #fff); color: var(--color-text);
    border: 1px solid var(--color-hairline); border-radius: var(--radius-md);
    box-shadow: var(--shadow-deep);
    font-size: .95rem; line-height: 1.6;
}
.consentement-titre { font-family: var(--font-heading); font-size: 1.2rem; margin: 0 0 6px; }
.consentement-corps p { margin: 0 0 12px; }
.consentement-corps a { color: var(--color-accent-ink); text-decoration: underline; }
.consentement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consentement-btn {
    font: inherit; font-weight: 600; cursor: pointer;
    min-height: 44px; padding: 10px 20px; border-radius: var(--radius-pill);
    background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-text);
}
.consentement-btn:hover { background: transparent; color: var(--color-text); }
.consentement-lien {
    font: inherit; cursor: pointer; min-height: 44px; padding: 10px 8px;
    background: none; border: 0; color: var(--color-text); text-decoration: underline;
}
.consentement-btn:focus-visible, .consentement-lien:focus-visible,
.consentement-detail input:focus-visible { outline: 3px solid var(--color-accent-ink); outline-offset: 2px; }
.consentement-detail { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 0 0; border-top: 1px solid var(--color-hairline); }
.consentement-detail[hidden] { display: none; }
.consentement-detail label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consentement-detail input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--color-text); }
.consentement-detail .consentement-btn { justify-self: start; }
@media (max-width: 560px) {
    .consentement { padding: 0 0 env(safe-area-inset-bottom); }
    .consentement-corps { border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 16px; font-size: .9rem; }
    .consentement-actions .consentement-btn { flex: 1 1 40%; }
    .consentement-lien { order: 3; flex-basis: 100%; }
}
.lien-cookies {
    font: inherit; color: inherit; background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: underline;
}
.footer .lien-cookies { color: rgba(255,255,255,0.6); }
.footer .lien-cookies:hover { color: var(--color-cta); }

/* ── Accessibilité clavier ────────────────────────────────────────────────
   Lien d'évitement (premier arrêt de tabulation) et focus visible partout :
   seuls quelques composants en avaient un (audit du 26/09/2026). */
.lien-evitement {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--radius-sm);
    background: var(--color-card, #fff); color: var(--color-text);
    font-weight: 700; box-shadow: var(--shadow-deep);
}
.lien-evitement:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-accent-ink); outline-offset: 2px; }
.footer :focus-visible, .cta-final :focus-visible, .v2-recherche :focus-visible { outline-color: #fff; }
/* Mouvement réduit : ce que les blocs de chaque composant ne couvraient pas. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .v2-topbar-pastille, .cmp-bar.is-full { animation: none; }
}