/* =====================================================================
   theme.css — THÈME DU SITE : « Or massif » (choisi par Laurent, oct. 2026)
   ---------------------------------------------------------------------
   Seul fichier de couleurs du site. Chargé par toutes les pages APRÈS
   leur CSS propre (dernier <link> avant </head>).
   Changer les couleurs du site entier = modifier CE fichier uniquement.

   Variables :
     --noir / --noir-2      fond de page / fond des cartes et encadrés
     --blanc / --gris       texte principal / texte secondaire
     --or / --or-clair      accents (liens, petits titres, filets)
     --or-rgb               même accent en r,g,b → rgba(var(--or-rgb),x)
     --fond-rgb             fond en r,g,b (barres, menus) → rgba(var(--fond-rgb),x)
     --voile-rgb            voiles posés sur les photos : TOUJOURS sombres
     --sur-photo            texte posé sur une photo
     --bouton / --sur-or    fond des boutons / texte sur bouton ou pastille
     --titre                titres h2/h3 des sections
   Modèle : ambiance-21-or-massif.html (D:\Téléchargements\ambiances-serie4-folle.zip)
   ===================================================================== */

/* ---------- 1. Corps du site ---------- */
:root{
  /* Valeurs du modèle, textes un peu foncés pour rester lisibles sur les zones
     sombres du dégradé (#A27A30) : modèle --blanc #2A1A05, --gris #4E3A18,
     --or #5A3A0A, --or-clair #4A3008, --titre #3B2508 */
  --noir:#C9A45C; --noir-2:rgba(255,250,232,.55); --blanc:#1E1203; --gris:#33240A;
  --or:#3D2604; --or-clair:#36230A; --or-rgb:90,58,10;
  --bouton:#1E1405; --sur-or:#F3E0A8;
  --fond-rgb:30,20,5; --voile-rgb:30,20,5; --sur-photo:#FFFFFF; --titre:#2A1A04;
  --titre-reflet:0 1px 0 rgba(255,245,210,.6);
  --erreur:#5E0F08;                              /* messages d'erreur (rouge très foncé, lisible sur l'or) */
  --badge-texte:#2A1A05; --badge-fond:rgba(255,250,232,.88);
  /* Boutons : brun très foncé, texte or, éclat lumineux qui traverse */
  --bouton-texte:#F6E7B5; --bouton-bord:rgba(232,199,126,.55);
  --bouton-fond:linear-gradient(110deg,#1E1405 40%,#6A4A12 50%,#1E1405 60%);
  --bouton-anim:eclat 3s linear infinite;
  /* Fond or métallique des sections */
  /* Vitesse du reflet : aller-retour doux, 20 s par passage (ralenti à la demande
     de Steve, ex-10 s en boucle avec retour brusque) */
  --or-metal-anim:brille 20s ease-in-out infinite alternate;
  /* Lettres « couleur or » sur le fond or (petits titres de Services) */
  --or-lettres:linear-gradient(180deg,#9A6A10 0%,#7A4E06 45%,#B07A18 70%,#6A4304 100%);
  --or-metal:linear-gradient(135deg,#8A6626 0%,#C9A45C 18%,#F6E7B5 36%,#B88A3A 52%,#EBD39A 70%,#A27A30 86%,#D9B56C 100%);
}

/* ---------- 2. Zones sombres : header, menu mobile, barre de raccourcis,
               bandeau final, pied de page (brun très foncé, textes or clair) */
:is(nav,.mobile-menu,.sticky-quicklinks,.cta-band,footer,body > header){
  --noir:#1E1405; --noir-2:#2E2008; --blanc:#F6E7B5; --gris:#D9C08A;
  --or:#E8C77E; --or-clair:#F3E0A8; --or-rgb:232,199,126; --fond-rgb:30,20,5;
  --titre:#F3E0A8; --titre-reflet:none; --erreur:#FF9C8A;
}
:is(nav,.cta-band,footer,body > header){background-color:#1E1405;}
/* Accueil : le header reste translucide, posé sur la photo de l'intro */
body:has(.hero-anime) > nav{background-color:rgba(var(--fond-rgb),.52);}
/* Onglet de la page en cours (menu desktop) : pastille or pleine, texte foncé.
   Le parent d'un menu déroulant est marqué aussi quand on est sur une de ses sous-pages. */
.nav-item > a.active,.nav-item:has(.dropdown a.active) > a{
  background:var(--or);color:#1E1405 !important;opacity:1;font-weight:700;
  padding:5px 10px;margin:-5px 0;border-radius:999px;
  box-shadow:0 0 0 1px rgba(var(--or-rgb),.5),0 0 14px rgba(var(--or-rgb),.45);
}
.dropdown a.active{color:var(--or);opacity:1;font-weight:700;background:rgba(var(--or-rgb),.14);}
/* La pastille élargit le menu : entre 1241 et 1500 px (déjà serré), espacement réduit pour garder de la marge */
@media(max-width:1500px){.nav-links:has(.active){gap:9px;}}
/* Liens du menu desktop : or du logo, pleins et demi-gras (choix Steve 2026-10-08, option « or du logo ») */
.nav-item:not(:has(.dropdown a.active)) > a:not(.active){color:#E8C77E;opacity:1;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.45);}
.nav-item:not(:has(.dropdown a.active)) > a:not(.active):hover{color:#FFF3CF;}
/* Sélecteur de langue FR · EN · NL (header : sous le logo, dans .brand — aucune largeur en plus
   pour le menu ; menu burger : en haut). Langue en cours = même pastille or que l'onglet actif. */
.lang-switch{display:flex;align-items:center;gap:2px;font-family:'Manrope',sans-serif;}
.brand .lang-switch{margin:5px 0 0 -6px;}
.lang-switch a{color:#E8C77E;text-decoration:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:4px 6px;border-radius:999px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.45);}
.lang-switch a:hover{color:#FFF3CF;}
.lang-switch a.active{background:var(--or);color:#1E1405;text-shadow:none;}
.mobile-menu .lang-switch{display:none;}
@media(max-width:1240px){
  .mobile-menu .lang-switch{display:flex;gap:8px;margin:-60px 0 28px;}
  .mobile-menu .lang-switch a{font-size:14px;padding:9px 14px;border:1px solid rgba(var(--or-rgb),.35);}
  .mobile-menu .lang-switch a.active{border-color:var(--or);}
}
@media(max-width:900px){.brand .lang-switch{display:none;}}
/* Sous-onglets (Infos pratiques, Hébergements) : onglet en cours = pastille brun foncé, texte or, gras
   (même principe que le menu, couleurs inversées car la barre est posée sur le fond or) */
.subtab{border-radius:999px 999px 0 0;transition:background .2s,color .2s;}
.subtab.active{background:#1E1405;color:#F3E0A8 !important;font-weight:700;border-bottom-color:#1E1405 !important;}

/* ---------- 3. Zones photo : textes clairs, accents or clair, voile sombre */
:is(.page-hero,.hero-quicklinks,.teaser-text,.pmr-slide figcaption,.duo-media-grid figcaption,
    .lightbox,.checklist-lightbox,.zoom-backdrop,.badge-saison--hero){
  --blanc:var(--sur-photo); --gris:#EADBB8; --or:#E8C77E; --or-clair:#F3E0A8; --or-rgb:232,199,126;
  --noir:rgb(var(--voile-rgb)); --noir-2:#2E2008;
  --titre:var(--sur-photo); --titre-reflet:0 2px 10px rgba(0,0,0,.55);
  --badge-texte:#F3E0A8; --badge-fond:rgba(var(--voile-rgb),.72);
}
/* Intro animée de l'accueil : couleurs d'origine conservées à l'identique */
.hero-anime{
  --noir:#0A0E12; --noir-2:#12181F; --blanc:#F3F1EC; --gris:#8B93A0;
  --or:#C9A45C; --or-clair:#E8CE9C; --or-rgb:201,164,92;
}

/* ---------- 4. Sections de contenu : fond or métallique pleine largeur ---------- */
html,body{overflow-x:clip;}
:is(section.section,.loc-intro,.legal-hero,.legal-content,.divider-strip,.weather,.intro,.reviews,.po-back,body > main){
  position:relative; isolation:isolate; border-bottom:none !important;
}
/* Les marges des enfants restent dans la zone → pas de bande unie entre deux sections.
   :where() = priorité nulle : un display défini par la page (flex, none…) l'emporte. */
:where(section.section,.loc-intro,.legal-hero,.legal-content,.weather,.intro,.reviews,.po-back){display:flow-root;}
:is(section.section,.loc-intro,.legal-hero,.legal-content,.divider-strip,.weather,.intro,.reviews,.po-back,body > main)::before{
  content:""; position:absolute; inset:0 -100vmax; z-index:-1; pointer-events:none;
  background:var(--or-metal); background-size:200% 200%;
  animation:var(--or-metal-anim);
}
@keyframes brille{0%{background-position:0% 0%}100%{background-position:100% 100%}}

/* Titres des sections : brun profond + léger reflet clair */
/* h3.h-niv4 = ancien h4 renuméroté (audit GEO) : garde son rendu d'origine */
:is(section.section,.loc-intro,.legal-hero,.legal-content,.intro,.reviews,body > main) :is(h2,h3:where(:not(.h-niv4))),
.cta-band h2{color:var(--titre) !important; text-shadow:var(--titre-reflet);}

/* Cartes et encadrés : crème semi-transparent + flou */
:is(.perk-card,.simple-card,.chip,.hours-box,.ph-box,.activity-card,.advice-card,.ambiance-chip,
    .attire-col,.card,.cross-card,.doc-card,.event-form,.form-success,.formule-card,.legal-note,
    .listing-card,.market-note,.model-card,.opt-col,.plan-item,.plan-preview,.po-callout,
    .po-surprise-card,.pool-card,.price-cta,.reason-card,.rec-card,.region-card,.split,
    .vibe-card,.wf-day,.emo-ph,.situation-dist li,.rec-jobs li){
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.split-text p,.sec-head p{color:var(--gris);}
/* Formulaires : texte indicatif lisible sur fond crème */
:is(input,textarea)::placeholder{color:var(--gris);opacity:.8;}

/* ---------- 4 bis. Petits titres (surtitres) : lettres couleur or, un peu plus grands
               (Steve, 2026-10-07). Pas de fond autour. Exclus : zones sombres et zones photo,
               où le petit titre garde son or clair. */
:is(.eyebrow,.sec-tag,.weather-eyebrow,.model-body .tag):not(:is(.page-hero,.po-hero,.hero-quicklinks,.teaser-text,.lightbox,.checklist-lightbox,.zoom-backdrop,.hero-anime,nav,.mobile-menu,.sticky-quicklinks,.cta-band,footer,body > header) *){
  background:var(--or-lettres);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  font-size:15px;font-weight:800;letter-spacing:.14em;
}
/* Émoji dans un petit titre : gardé en couleurs (sinon rempli par le dégradé) */
:is(.eyebrow,.sec-tag,.model-body .tag) .emoji{-webkit-text-fill-color:var(--titre);color:var(--titre);}
@media(max-width:900px){
  :is(.eyebrow,.sec-tag,.weather-eyebrow,.model-body .tag):not(:is(.page-hero,.po-hero,.hero-quicklinks,.teaser-text,.lightbox,.checklist-lightbox,.zoom-backdrop,.hero-anime,nav,.mobile-menu,.sticky-quicklinks,.cta-band,footer,body > header) *){font-size:13.5px;}
}

/* ---------- 5. Boutons (Réserver, Réserver un séjour, bouton flottant…) ---------- */
:is(.btn-or,.cta-nav,.formule-btn,.doc-btn,.btn-sm,.listing-cta,.event-form button,
    .contact-form button,.resa-float){
  /* Pas de raccourci « background » en !important : il bloquerait la position
     animée par « eclat » (un !important l'emporte sur une animation) */
  background-color:var(--bouton) !important; background-image:var(--bouton-fond) !important;
  background-size:250% 100% !important; background-repeat:no-repeat !important;
  color:var(--bouton-texte) !important;
  border:1px solid var(--bouton-bord) !important; animation:var(--bouton-anim);
}
:is(.btn-or,.cta-nav,.formule-btn,.doc-btn,.btn-sm,.listing-cta,.event-form button,
    .contact-form button,.resa-float):hover{filter:brightness(1.25);}
@keyframes eclat{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- 6. Confort : mouvement réduit → animations du thème coupées ---------- */
@media (prefers-reduced-motion:reduce){
  :is(section.section,.loc-intro,.legal-hero,.legal-content,.divider-strip,.weather,.intro,.reviews,.po-back,body > main)::before,
  :is(.btn-or,.cta-nav,.formule-btn,.doc-btn,.btn-sm,.listing-cta,.event-form button,.contact-form button,.resa-float){
    animation:none !important;
  }
}

/* Pied de page : période d'ouverture (audit GEO, 2026-10-10) */
footer .footer-ouverture{margin-top:6px;}

/* ---------- 7. Barre de recherche « maison » (recherche-sejour.css/.js, 2026-10-13)
               et avis recopiés (avis-clients.css/.js) ---------- */
:root{
  --rs-fond:#FFFBEF; --rs-texte:#1E1203; --rs-gris:#5A4520; --rs-eteint:#B9AA88;
  --rs-bord:rgba(90,58,10,.22); --rs-accent:#8A5E10; --rs-survol:rgba(201,164,92,.18);
  --rs-survol-doux:rgba(201,164,92,.10); --rs-plage:rgba(201,164,92,.30);
  --rs-actif:#1E1405; --rs-sur-actif:#F3E0A8; --rs-mention:#F3E0A8;
  --avis-etoile:#8A5E10;
}
/* Sur fond or (pages Locatif / Emplacements), la mention passe en brun */
:is(.loc-intro,section.section) .rs-mention{--rs-mention:var(--gris);}
/* Passages « [À COMPLÉTER] » des pages en préparation (page-devenir-proprietaire.html, masquée) */
:root{--a-completer-fond:#FFE45C; --a-completer-texte:#1E1203;}

/* ---------- 8. Accessibilité : un lien placé dans un texte se repère aussi sans la couleur
   (Lighthouse « link-in-text-block », 2026-10-14) : e-mail et « Devenir propriétaire » du pied de page,
   numéros de téléphone et adresses e-mail cités dans un paragraphe. !important : ces liens ont un
   text-decoration:none en ligne dans les pages. ---------- */
footer p a, p a[href^="tel:"], p a[href^="mailto:"]{
  text-decoration:underline !important; text-underline-offset:3px; text-decoration-thickness:1px;
}