/* ============================================
   Camping Montpellier Plage — V2 Premium CSS
   Vibe: Editorial Luxury
   Fonts: DM Serif Display (headings) + Plus Jakarta Sans (body)
   Palette: warm cream #FDFBF7, teal #1d4354, turquoise #47b0b3, coral #fe7259
   ============================================ */

/* ---- Custom properties ---- */
:root {
    --color-bg: #FDFBF7;
    --color-bg-alt: #f0ebe3;
    --color-dark: #1d4354;
    --color-darker: #14303d;
    --color-accent: #47b0b3;
    --color-cta: #fe7259;
    --color-cta-hover: #e5604a;
    /* Déclinaisons lisibles des deux couleurs d'identité : le teal et le corail
       d'origine plafonnent à 2,5:1 sur nos fonds clairs, sous le seuil de 4,5:1.
       Ces variantes gardent la teinte et passent partout (mesuré le 27/08). */
    --color-accent-ink: #236b6e;   /* teal texte  : 5,2 à 6,2:1 */
    --color-cta-ink: #bd4029;      /* corail texte : 4,5 à 5,3:1 */
    /* Corail de fond des boutons. Etait a #e04d31, ou le blanc ne tient que
       3,98:1 : sous le seuil AA pour du texte de moins de 18,66 px en gras,
       c'est-a-dire la quasi-totalite des boutons du site, donc toute la chaine
       de conversion. Assombri d'un cran, le blanc y tient 5,34:1. */
    --color-cta-solid: #bd4029;    /* corail fond bouton, blanc dessus : 5,34:1 */
    --color-text: #3a3a3a;
    --color-text-muted: #696969;
    --color-card: #ffffff;
    --color-hairline: rgba(0,0,0,0.06);
    --font-heading: 'DM Serif Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-lg: 1.5rem;
    --radius-md: 1rem;
    --radius-sm: 0.5rem;
    --radius-pill: 50px;
    --shadow-soft: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-hover: 0 16px 48px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-deep: 0 24px 64px rgba(0,0,0,0.1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.7;
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    /* Pas d'overflow-x ici : clip comme hidden sur body casse toute
       position: sticky de la page (constaté sur le récapitulatif des fiches
       modèle, 27/08). Le débordement horizontal est traité à la source, et
       bin/audit.py le vérifie sur chaque page. */
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: var(--color-dark);
    font-weight: 400;
}

a { color: var(--color-accent-ink); text-decoration: none; transition: color 0.4s var(--ease-spring); }
a:hover { color: var(--color-cta-ink); }
img { max-width: 100%; height: auto; display: block; }
/* Le build enveloppe les photos dans <picture> pour servir leur webp : la boite
   du <picture> s'efface pour que l'image reste l'enfant direct de sa figure,
   comme l'ecrivent les feuilles (hauteur en %, grilles, survols). */
picture { display: contents; }
/* Le <source> d'un <picture> ne doit produire AUCUNE boite. Sans cela, la
   boite du picture etant effacee, il devient lui-meme une case de la grille
   qui l'entoure : sur /espace-aquatique/, les deux <source> prenaient la
   premiere colonne et les deux photos se retrouvaient l'une sous l'autre au
   lieu d'etre cote a cote (signale par Charles le 02/09). */
picture > source { display: none; }
/* Une image contenue dans un lien navigue : elle n'ouvre pas la visionneuse
   (site.js l'ecarte explicitement) et son curseur doit dire « on va quelque
   part », pas « on agrandit ». Les curseurs zoom-in des galeries sont ecrits
   dans :where(), de specificite nulle : cette regle passe donc devant sans
   avoir a la surenchere. Signale par Charles le 02/09 sur les photos de
   l'accueil, ou .v2-trio figure img (0,1,2) battait .v2-photo-lien img. */
a img { cursor: pointer; }
ul { list-style: none; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s var(--ease-spring);
    border: 2px solid transparent;
    letter-spacing: -0.01em;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--color-cta-solid);
    color: #fff;
    border-color: var(--color-cta-solid);
}
.btn-primary:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(254, 114, 89, 0.3);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.btn-outline:hover {
    background: #fff;
    color: var(--color-dark);
    border-color: #fff;
}

.btn-lg { padding: 16px 40px; font-size: 1rem; }
.btn-sm { padding: 8px 20px; font-size: 0.85rem; }
.btn-block { display: block; width: 100%; justify-content: center; }

/* ---- Barre switch campings ---- */
.camping-switch {
    display: flex;
    justify-content: center;
    background: var(--color-darker);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 200;
}

.switch-btn {
    flex: 1;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.5s var(--ease-spring);
    border-bottom: 2px solid transparent;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.switch-btn small {
    font-weight: 400;
    font-size: 0.65rem;
    opacity: 0.6;
    text-transform: none;
    letter-spacing: 0;
}

.switch-arrow {
    font-size: 1.4rem;
    color: var(--color-accent);
    opacity: 0.8;
    user-select: none;
    flex-shrink: 0;
    margin: 0 4px;
}

.switch-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.switch-btn.switch-active {
    color: #fff;
    border-bottom-color: var(--color-accent);
}

/* ---- Hero ---- */
.hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #000;
    color: #fff;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, transparent 55%, rgba(20,48,61,0.85) 100%);
    z-index: 1;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Poster local affiché derrière l'iframe le temps que le player YouTube charge (anti-écran noir) */
    background: #000 url(../img/hero-poster.jpg) center / cover no-repeat;
    container-type: size;
}

.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
}
/* Le couple 177.78vh / 56.25vw dimensionne la vidéo d'après le viewport. Dès que
   le hero est plus court que l'écran (mobile : 585 px de haut pour 844 de viewport),
   l'iframe est calculée 47 % trop large et on ne voit qu'un centre très zoomé.
   Les unités de conteneur la calent sur le hero lui-même. */
@supports (width: 1cqh) {
    .hero-video iframe { width: 177.78cqh; height: 56.25cqw; }
}

/* Nav overlay */
.hero-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
}

.hero-nav-left {
    display: flex;
    gap: 10px;
}

.hero-nav-logo {
    height: 50px;
    width: auto;
    filter: brightness(1.1) drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.hero-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
}

.hero-nav-rating { color: #f5c518; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero-nav-phone { color: #fff; font-weight: 600; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero-nav-phone:hover { color: var(--color-cta); }

/* Hero bottom text */
.hero-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.hero-bottom h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    text-shadow: 0 3px 16px rgba(0,0,0,0.4);
    margin-bottom: 0;
    padding: 0 20px;
    font-style: italic;
}

.hero-bottom h1 strong {
    color: var(--color-cta);
    font-style: normal;
}

.hero-sub-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    background: rgba(20, 48, 61, 0.6);
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.hero-sub-line strong {
    color: #fff;
    background: var(--color-cta);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

/* ---- Social Proof Bar ---- */
.social-proof-bar {
    background: var(--color-card);
    padding: 28px 0;
    border-bottom: 1px solid var(--color-hairline);
}

.proof-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.proof-score {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--color-dark);
    line-height: 1;
}
.proof-score small {
    font-size: 1rem;
    color: var(--color-text-muted);
}


.proof-source {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.proof-source small { font-weight: 400; }


/* ---- Promo Banner ---- */
/* Programmation des reclames : le script de tete pose « promo-finie » sur
   <html> quand la date de fin est passee, et tout ce qui porte data-promo-fin
   disparait, meme si le site n'a pas ete redeploye depuis. On masque
   seulement : sans JavaScript, la promotion reste visible comme avant. */
.promo-finie [data-promo-fin] { display: none !important; }

.promo-banner {
    /* Le degrade partait de #fe7259, ou du blanc ne tient que 2,70:1 : les
       dates et les taux de remise etaient illisibles. Fond assombri, le blanc
       y tient 5,3:1 au point le plus clair. */
    /* Le degrade se decline par site : Montpellier Plage garde son corail,
       Saint-Maurice le reprend en bleu profond dans sa feuille d'identite. */
    background: linear-gradient(135deg, var(--promo-fond-1, #a83520), var(--promo-fond-2, #c4472a));
    padding: 18px 0;
    color: #fff;
}

.promo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
}

.promo-tag {
    background: var(--color-dark);
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.promo-content p { font-size: 0.95rem; font-weight: 500; }

.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 8px 0;
    text-align: left;
}

.promo-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promo-col strong {
    font-size: 0.95rem;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.promo-col span {
    font-size: 0.85rem;
    /* Plus d'opacite : elle retirait encore du contraste a un texte qui en
       manquait deja. */
}

.promo-note {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    opacity: 0.92;
    margin-top: 2px;
}

.promo-content .btn {
    padding: 10px 24px;
    background: #fff;
    color: var(--color-cta);
    border-color: #fff;
    font-size: 0.85rem;
}
.promo-content .btn:hover {
    background: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
}

/* ---- Section Titles ---- */
.section-title {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--color-dark);
    margin-bottom: 12px;
}

.section-desc {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-bottom: 56px;
    font-weight: 500;
}

.section-tag {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}

/* ---- Gallery (Bento Asymmetric) ---- */
.gallery {
    padding: 96px 0;
    background: var(--color-bg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 12px;
    margin-top: 48px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}

.gallery-item-large {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-spring), filter 0.8s var(--ease-spring);
    filter: saturate(1.1) brightness(1.02);
}

.gallery-item:hover img {
    transform: scale(1.06);
    filter: saturate(1.2) brightness(1.06);
}

.gallery-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 16px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Lightbox ---- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.94);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.lightbox.active { display: flex; }

.lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--radius-md);
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.3s;
}
.lightbox-close:hover { color: var(--color-cta); }

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 1.5rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    padding: 16px 20px;
    border-radius: 50%;
    transition: all 0.5s var(--ease-spring);
    backdrop-filter: blur(8px);
}
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.9rem;
    background: rgba(0,0,0,0.5);
    padding: 8px 24px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
}

/* ---- Features ---- */
.features {
    padding: 96px 0;
    background: var(--color-bg-alt);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
    margin-top: 56px;
}

.feature-card {
    background: var(--color-card);
    padding: 36px 28px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-hairline);
    transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.feature-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
    display: block;
}

.feature-card h3 {
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ---- Aquatic ---- */
.aquatic {
    padding: 96px 0;
    background: var(--color-bg);
}

.aquatic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.aquatic-images { display: flex; flex-direction: column; gap: 16px; }

.aquatic-img-main {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep);
    filter: saturate(1.1) brightness(1.03);
}

.aquatic-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.aquatic-secondary img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 4/3;
    object-fit: cover;
}

.aquatic-text h2 {
    font-size: 2.2rem;
    color: var(--color-dark);
    margin-bottom: 16px;
}

.aquatic-text p {
    color: var(--color-text-muted);
    margin-bottom: 24px;
    font-size: 1rem;
}

.check-list li {
    padding: 8px 0 8px 28px;
    position: relative;
    color: var(--color-text);
    font-weight: 500;
}
.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ---- Accommodations ---- */
.accommodations {
    padding: 96px 0;
    background: var(--color-bg-alt);
}

/* Filters */
.accom-filters {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    position: sticky;
    top: 38px;
    z-index: 50;
    background: var(--color-bg-alt);
    padding: 16px 0;
}

.accom-filter {
    padding: 10px 24px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-pill);
    background: var(--color-card);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.5s var(--ease-spring);
    letter-spacing: 0.01em;
}
.accom-filter:hover {
    border-color: var(--color-accent);
    color: var(--color-dark);
}
.accom-filter.active {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}

.accom-card[data-category].accom-hidden { display: none; }

.accom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 20px;
    margin-top: 32px;
}

/* Double-Bezel Accommodation Card */
.accom-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-hairline);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}
.accom-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.accom-card-featured {
    border: 2px solid var(--color-accent);
}

.accom-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-accent);
    color: #fff;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.accom-badge-view { background: #e8a838; }

.accom-img {
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}
.accom-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-spring), filter 0.8s var(--ease-spring);
    filter: saturate(1.1) brightness(1.03);
}
.accom-card:hover .accom-img img {
    transform: scale(1.06);
    filter: saturate(1.2) brightness(1.06);
}

.accom-detail-btn { display: none; }

.accom-header {
    background: var(--color-dark);
    color: #fff;
    padding: 14px 24px;
    text-align: center;
}

.accom-header-empl { background: #2a6b7c; }

.accom-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    font-weight: 700;
}

.accom-header h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-top: 2px;
    color: #fff;
}

.accom-body {
    padding: 20px 24px;
    min-height: 200px;
}

.accom-capacity {
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-dark);
    font-size: 0.88rem;
}

.accom-body ul { margin-bottom: 14px; }

.accom-body li {
    padding: 3px 0 3px 20px;
    position: relative;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}
.accom-body li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

.accom-options { color: var(--color-text-muted); font-size: 0.82rem; }
.accom-promo { color: var(--color-cta); font-weight: 700; font-size: 0.88rem; }

/* Detail panel */
.accom-details {
    padding: 16px 24px;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-hairline);
    flex-grow: 1;
}

.accom-details p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

.accom-equip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.accom-equip span {
    background: var(--color-card);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    color: var(--color-dark);
    border: 1px solid var(--color-hairline);
}

.accom-card .btn {
    margin: 12px 16px 16px;
    border-radius: var(--radius-pill);
    padding: 12px 24px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}
.accom-card .btn::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.5s var(--ease-spring);
}
.accom-card .btn:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(254, 114, 89, 0.3);
}
.accom-card .btn:hover::after {
    transform: translateX(4px);
}

/* ---- Services Detail ---- */
.services-detail {
    padding: 96px 0;
    background: var(--color-bg);
}

.services-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px;
    margin-bottom: 56px;
}

.service-detail-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-hairline);
    transition: transform 0.6s var(--ease-spring);
}
.service-detail-card:hover { transform: translateY(-4px); }

.service-detail-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    filter: saturate(1.1) brightness(1.03);
    transition: filter 0.6s var(--ease-spring);
}
.service-detail-card:hover img {
    filter: saturate(1.2) brightness(1.06);
}

.service-detail-body {
    padding: 24px;
}

.service-detail-body h3 {
    font-family: var(--font-heading);
    color: var(--color-dark);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.service-detail-body p {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}

.services-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: 12px;
    text-align: center;
}

.service-item {
    padding: 20px 12px;
    border-radius: var(--radius-md);
    background: var(--color-card);
    border: 1px solid var(--color-hairline);
    transition: all 0.5s var(--ease-spring);
}
.service-item:hover {
    background: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
    transform: translateY(-2px);
}

.service-icon { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.service-name { font-size: 0.78rem; font-weight: 600; line-height: 1.3; }

/* ---- Restaurant Showcase (galerie 2 colonnes) ---- */
.restaurant-showcase {
    padding: 96px 0;
    background: var(--color-bg-alt);
}

.restaurant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
}

.resto-photo {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-hairline);
}

.resto-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-spring), filter 0.8s var(--ease-spring);
    filter: saturate(1.05) brightness(1.02);
}

.resto-photo:hover img {
    transform: scale(1.05);
    filter: saturate(1.15) brightness(1.05);
}

@media (max-width: 768px) {
    .restaurant-showcase { padding: 56px 0; }
    .restaurant-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
    .resto-photo { aspect-ratio: 4 / 3; }
}

/* ---- Reviews ---- */
.reviews {
    padding: 96px 0;
    background: var(--color-bg-alt);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 20px;
}

.review-card {
    background: var(--color-card);
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-hairline);
    position: relative;
}

/* #f5c518 ne tenait que 1,63:1 sur blanc : l'or est assombri pour rester
   lisible tout en gardant sa teinte. */
.review-stars { color: #a3760a; font-size: 1rem; margin-bottom: 8px; letter-spacing: 2px; }

.review-score {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--color-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.82rem;
}

.review-text {
    color: var(--color-text);
    font-style: italic;
    margin-bottom: 12px;
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Le nom rend l'avis attribuable : sans lui, une citation flotte sans auteur. */
.review-author { font-weight: 700; color: var(--color-dark); font-size: .9rem; margin: 0 0 2px; }
.review-source { color: var(--color-text-muted); font-size: 0.78rem; }

/* ---- Team ---- */
.team-section {
    padding: 72px 0;
    background: var(--color-dark);
    color: #fff;
}

.team-block {
    display: flex;
    align-items: center;
    gap: 56px;
}

.team-photo {
    width: 55%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep);
    filter: saturate(1.1) brightness(1.03);
}

.team-text h2 {
    font-size: 2rem;
    margin-bottom: 16px;
    color: #fff;
}

.team-text p {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    line-height: 1.8;
}

/* ---- Instagram Feed ---- */
.instagram-section {
    padding: 72px 0;
    background: var(--color-bg);
}

.instagram-feed {
    margin-top: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.instagram-feed-reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.instagram-reel {
    display: flex;
    justify-content: center;
}

.instagram-reel .instagram-media {
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 280px !important;
}

.instagram-feed iframe {
    width: 100%;
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.instagram-link {
    color: #e1306c;
    font-weight: 600;
}
.instagram-link:hover { color: var(--color-dark); }

/* ---- Semainier ---- */
.semainier {
    padding: 96px 0;
    background: var(--color-bg);
}

.semainier-grid {
    margin-top: 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force le web-component Thélis et ses enfants à prendre toute la largeur dispo */
.semainier-grid thr-simpleblock,
.semainier-grid thr-simpleblock > * {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Mobile : pleine largeur, padding minimal pour maximiser le widget */
@media (max-width: 768px) {
    .semainier { padding: 48px 0; }
    .semainier > .container { padding: 0 4px; }
    .semainier .section-title,
    .semainier .section-desc { padding: 0 16px; }
    .semainier-grid { margin-top: 16px; }
}

/* CTA tracké sous le widget — capte le clic hors Shadow DOM pour préserver l'attribution */
.semainier-cta {
    margin-top: 32px;
    padding: 28px 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,138,101,.08), rgba(255,154,118,.08));
    border: 2px solid var(--color-cta);
    border-radius: var(--radius-lg);
}

.semainier-cta-prompt {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-dark);
    margin-bottom: 16px;
}

.semainier-cta .btn {
    margin: 0 auto;
}

.semainier-cta-note {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .semainier-cta { margin: 24px 16px 0; padding: 20px 16px; }
    .semainier-cta-prompt { font-size: 1.15rem; }
}

/* ---- Camping Map ---- */
.campmap {
    padding: 72px 0 0;
    background: var(--color-bg-alt);
}

.campmap-img {
    margin-top: 32px;
    width: 100%;
}

.campmap-img img {
    width: 100%;
    display: block;
}

.campmap-pdf-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- CTA Final ---- */
.cta-final {
    padding: 96px 0;
    background: linear-gradient(135deg, var(--color-dark), #2a6b7c);
    text-align: center;
    color: #fff;
}

.cta-final h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: #fff;
    margin-bottom: 16px;
}

.cta-final p {
    font-size: 1.05rem;
    opacity: 0.85;
    margin-bottom: 36px;
    font-weight: 500;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- SEO Content (Ads Quality Score) ---- */
.seo-content {
    padding: 48px 0 32px;
    background: var(--color-bg-alt);
    border-top: 1px solid rgba(0,0,0,.06);
}

.seo-content h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-bottom: 12px;
}

.seo-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.seo-columns p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

/* ---- Footer ---- */
.footer {
    background: var(--color-darker);
    color: rgba(255,255,255,0.6);
    padding: 56px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 36px;
    margin-bottom: 36px;
}

.footer-logo { margin-bottom: 12px; filter: brightness(0.9); }
.footer h4 { color: #fff; margin-bottom: 14px; font-size: 1rem; }
.footer p { font-size: 0.88rem; line-height: 1.7; }
.footer a { color: rgba(255,255,255,0.6); }
.footer a:hover { color: var(--color-cta); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    text-align: center;
    font-size: 0.78rem;
}

.footer-legal {
    margin-top: 8px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
}
.footer-legal a { color: rgba(255,255,255,0.4); }
.footer-legal a:hover { color: var(--color-cta); }
.footer-legal span { margin: 0 4px; opacity: 0.3; }

/* ---- Booking Search Form ---- */
.booking-search-form-wrapper {
    max-width: 1100px;
    margin: -44px auto 0;
    position: relative;
    z-index: 10;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep);
    padding: 24px 32px;
    border: 1px solid var(--color-hairline);
}

.booking-search {
    display: flex;
    align-items: flex-end;
    gap: 0;
}

.booking-search fieldset {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 0 20px;
    border: none;
}

.booking-search fieldset:not(:first-of-type) {
    border-left: 1px solid var(--color-hairline);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.form-field input[type="date"],
.form-field select {
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 1rem; /* 16 px : en dessous, iOS zoome sur le champ */
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.4s var(--ease-spring);
    min-width: 150px;
}

.form-field input[type="date"]:focus,
.form-field select:focus {
    outline: none; /* le focus se lit au changement de bordure ci-dessous */
    border-color: var(--color-accent);
    background: var(--color-card);
}

.form-field-people .people-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg);
}

.people-controls .ctrl {
    width: 36px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--color-accent-ink);
    cursor: pointer;
    font-weight: 700;
    transition: background 0.3s var(--ease-spring);
    min-width: 44px;
    min-height: 44px;
}
.people-controls .ctrl:hover { background: rgba(71,176,179,0.1); }

.people-controls input[type="number"] {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    -moz-appearance: textfield;
    padding: 8px 0;
}
.people-controls input[type="number"]::-webkit-inner-spin-button,
.people-controls input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.btn-search {
    white-space: nowrap;
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    letter-spacing: 1px;
}

.fieldset-actions {
    display: flex;
    gap: 8px;
}

.btn-tarifs-inline {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.82rem;
    background: var(--color-accent-ink);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.5s var(--ease-spring);
    border: 2px solid var(--color-accent-ink);
}
.btn-tarifs-inline:hover {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}

/* ---- Sticky Booking Bar ---- */
.booking-sticky-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--color-card);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.1);
    transition: transform 0.5s var(--ease-spring);
}

@media (min-width: 993px) {
    /* Masquée tant que le visiteur n'a pas commencé à lire : elle est révélée
       par .sticky-visible (tracking.js, au-delà de 420 px de défilement, ou
       quand le formulaire principal sort de l'écran sur la page tarifs).
       Sans cela elle rognait le bas du héros plein écran de l'accueil. */
    .booking-sticky-wrapper { padding: 10px 0; transform: translateY(100%); }
    .booking-sticky-wrapper.sticky-visible { transform: translateY(0); }
    .sticky-mobile-header { display: none; }
    .sticky-mobile-buttons { display: none; }

    .sticky-form-container .booking-search {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    .booking-search-form-wrapper {
        margin: 0 16px;
        padding: 20px;
        border-radius: var(--radius-md);
        margin-top: -30px;
    }

    .booking-search { flex-direction: column; gap: 12px; }
    .booking-search fieldset { width: 100%; padding: 0; gap: 12px; }
    .booking-search fieldset:not(:first-of-type) {
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid var(--color-hairline);
    }
    .form-field { width: 100%; }
    .form-field input[type="date"], .form-field select { width: 100%; }
    .btn-search { width: 100%; }

    .booking-sticky-wrapper { height: auto; max-height: 100vh; overflow-y: auto; }

    .sticky-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--color-dark);
        padding: 0;
        position: relative;
    }

    .sticky-mobile-buttons { display: flex; width: 100%; }

    /* Deux actions nommees en toutes lettres, aucun picto systeme : les emojis
       (graphique, loupe, combine) se rendaient differemment selon l'OS et
       n'aidaient pas a comprendre ce qui allait se passer. L'appel a quitte la
       barre pour l'en-tete, ou il reste disponible en permanence. */
    .sticky-btn-search,
    .sticky-btn-tarifs {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 14px 12px;
        font-family: var(--font-body);
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        line-height: 1.2;
    }
    /* L'action principale prend les deux tiers : ouvrir le calendrier est ce que
       le visiteur vient faire, consulter la grille tarifaire vient apres. */
    .sticky-btn-search {
        flex: 1 1 62%;
        background: var(--color-cta-solid, #e04d31);
        color: #fff;
        font-size: 0.95rem;
    }
    .sticky-btn-tarifs {
        flex: 1 1 38%;
        background: var(--color-dark);
        color: #fff;
        font-size: 0.86rem;
        border-left: 1px solid rgba(255,255,255,.16);
    }

    .sticky-mobile-close {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 1.4rem;
        text-decoration: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    /* Une fois le formulaire déplié, la rangée de boutons disparaît : le bandeau
       n'avait plus de contenu dans le flux, sa hauteur tombait à zéro et le ✕
       (en absolu) devenait invisible. On se retrouvait avec un panneau de dates
       impossible à refermer (signalé par Charles au recettage du 27/08).
       Le bandeau garde donc une hauteur propre et porte son intitulé. */
    .booking-sticky-wrapper.sticky-open .sticky-mobile-header {
        min-height: 52px;
        padding: 0 4px 0 18px;
        background: var(--color-darker, #14303d);
    }
    .booking-sticky-wrapper.sticky-open .sticky-mobile-header::before {
        content: 'Vos dates de séjour';
        color: #fff;
        font-weight: 600;
        font-size: .95rem;
        letter-spacing: .01em;
    }
    .booking-sticky-wrapper.sticky-open .sticky-mobile-close {
        opacity: 1;
        pointer-events: auto;
        position: static;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        line-height: 1;
    }
    .booking-sticky-wrapper.sticky-open .sticky-mobile-buttons { display: none; }
    /* Une fois le calendrier ouvert, le visiteur cherche a valider ses dates :
       « Voir les tarifs » a cote du bouton GO detournait le geste, teste par
       Charles qui s'est trompe de bouton. Le formulaire ne garde que son action.
       La page des tarifs reste atteignable par le menu et par le bandeau. */
    .booking-sticky-wrapper.sticky-open .btn-tarifs-inline { display: none; }
    .booking-sticky-wrapper.sticky-open .fieldset-actions { justify-content: stretch; }
    .booking-sticky-wrapper.sticky-open .btn-search { width: 100%; }

    .sticky-form-container { display: none; padding: 20px; }
    .booking-sticky-wrapper.sticky-open .sticky-form-container { display: block; }

    /* Entièrement hors écran par défaut ; .sticky-visible fait apparaître la
       rangée de boutons, .sticky-open déplie le formulaire complet. */
    .booking-sticky-wrapper { transform: translateY(100%); }
    .booking-sticky-wrapper.sticky-visible:not(.sticky-open) { transform: translateY(calc(100% - 48px)); }
    .booking-sticky-wrapper.sticky-visible.sticky-open { transform: translateY(0); }

    .footer { padding-bottom: 64px; }
}

/* ---- Animations ---- */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ---- Mobile Responsive ---- */
@media (max-width: 768px) {
    .switch-btn { font-size: 0.7rem; padding: 8px 10px; }
    .switch-btn small { display: none; }

    .hero { height: calc(100svh - 48px); }
    .hero-nav { padding: 8px 12px; }
    .hero-nav-logo { height: 35px; }
    .hero-nav-right { display: none; }
    .hero-nav .btn-sm { padding: 6px 12px; font-size: 0.72rem; }

    .hero-bottom h1 { font-size: 1.4rem; }
    .hero-sub-line { font-size: 0.78rem; gap: 6px; padding: 8px 10px; }

    .proof-items {
        display: flex;
        justify-content: space-around;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .proof-item { flex-direction: column; text-align: center; gap: 2px; }
    .proof-score { font-size: 1.2rem; }
    .proof-source { font-size: 0.75rem; }
    .proof-source small { display: none; }
    .social-proof-bar { padding: 10px 0; }

    .promo-content { flex-direction: column; gap: 10px; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .gallery-item-large { grid-column: 1 / -1; grid-row: auto; }

    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .feature-card { padding: 18px 14px; }
    .feature-icon { font-size: 1.8rem; margin-bottom: 8px; }
    .feature-card h3 { font-size: 1.05rem; }
    .feature-card p { font-size: 0.9rem; }

    .aquatic-grid { grid-template-columns: 1fr; gap: 32px; }

    .accom-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .accom-img { aspect-ratio: 4/3; }
    .accom-header { padding: 10px 12px; }
    .accom-header h3 { font-size: 1.05rem; }
    .accom-type { font-size: 0.7rem; }
    .accom-body { padding: 12px; min-height: 150px; }
    .accom-capacity { font-size: 0.9rem; }
    .accom-body li { font-size: 0.88rem; }
    .accom-options, .accom-promo { font-size: 0.85rem; }
    .accom-card .btn { margin: 0 10px 10px; padding: 10px; font-size: 0.88rem; }
    .accom-badge { font-size: 0.7rem; padding: 4px 10px; }
    .accom-card { height: 100%; }

    .accom-detail-btn {
        display: flex !important;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        position: absolute;
        bottom: 10px;
        right: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.92);
        border: 1px solid var(--color-hairline);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        z-index: 3;
        transition: all 0.4s var(--ease-spring);
    }
    .accom-detail-btn:hover {
        background: var(--color-accent);
        color: #fff;
        transform: scale(1.1);
    }
    /* grid-template-rows anime la hauteur sans recalculer la mise en page
       à chaque image, contrairement à max-height plus padding. */
    .accom-details { display: grid; grid-template-rows: 0fr; overflow: hidden;
        transition: grid-template-rows 0.4s var(--ease-out); flex-grow: 0;
    }
    .accom-details > * { min-height: 0; }
    .accom-details.open { grid-template-rows: 1fr; }
    .accom-details p { font-size: 0.88rem; }
    .accom-equip span { font-size: 0.72rem; padding: 3px 8px; }
    .accom-fiche-link { font-size: 0.85rem; }

    .services-detail-grid { grid-template-columns: 1fr; }
    .services-icons-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }

    .reviews-grid { grid-template-columns: 1fr; }

    .team-block { flex-direction: column; gap: 24px; }
    .team-photo { width: 100%; }

    .instagram-feed-reels {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .services-icons-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: 1fr; }
}

/* ---- Google Translate widget ---- */
.goog-te-banner-frame,
.skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.lang-switcher {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
}
.lang-switcher .goog-te-gadget { font-size: 0 !important; color: transparent !important; }
.lang-switcher .goog-te-gadget > span { display: none !important; }
.lang-switcher .goog-te-gadget .goog-te-combo {
    margin: 0 !important;
    padding: 8px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #222;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    /* Le selecteur de langue est en position fixe au-dessus de la page qui
       defile : un fond floute y perime ses tuiles comme ailleurs, et il etait
       deja opaque a 96 %. */
    transition: all 0.3s ease;
}
.lang-switcher .goog-te-gadget .goog-te-combo:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
@media (max-width: 768px) {
    .lang-switcher { top: 10px; right: 10px; }
    .lang-switcher .goog-te-gadget .goog-te-combo { padding: 6px 10px; font-size: 0.74rem; }
}