/* Barre d'onglets « Infos pratiques » — mutualisée : page-infos-pratiques.html,
   page-argeles-alentours.html (Découvrir la région), pages Actualités (modèle traduction/actualites-modele.html).
   Une seule ligne qui défile au doigt (jamais la page entière), dégradés sur les bords
   tant qu'il reste des onglets à voir (classes posées par onglets-infos.js). Couleurs de l'onglet actif : theme.css. */
.onglets-infos{position:relative;display:flex;flex-wrap:nowrap;gap:0;padding:20px 60px 0;
  box-shadow:inset 0 -1px rgba(var(--or-rgb),.2);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.onglets-infos::-webkit-scrollbar{display:none;}
.onglets-infos .subtab{flex:0 0 auto;white-space:nowrap;padding:14px 20px;font-size:12.5px;text-decoration:none;color:var(--gris);
  letter-spacing:.03em;border-bottom:2px solid transparent;}
.onglets-infos .subtab:hover{color:var(--or-clair);}
.onglets-infos .subtab.active{color:var(--or);border-bottom-color:var(--or);}
.onglets-infos.fade-d{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);}
.onglets-infos.fade-g{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px);mask-image:linear-gradient(to right,transparent,#000 56px);}
.onglets-infos.fade-g.fade-d{-webkit-mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 56px,#000 calc(100% - 56px),transparent);}
@media(max-width:1500px){.onglets-infos{padding:20px 40px 0;}.onglets-infos .subtab{padding:14px 16px;}}
@media(max-width:900px){.onglets-infos{padding:16px 22px 0;}.onglets-infos .subtab{padding:14px 16px;}}

/* ---------- Bandeaux de titre des onglets (2026-10-11) ----------
   Onglets avec photo : Idées de sorties, Marchés locaux (page-infos-pratiques.html), Découvrir la région.
   Onglets sans photo (Actualités, Webcam, Plan, Brochure, Recrutement, Infos PDF) : bandeau sobre identique,
   fond or du thème, petit titre + titre + sous-titre, même hauteur partout.
   Sur Infos pratiques, un seul bandeau visible à la fois : attribut data-bandeau="<id de l'onglet>" (showTab). */
[data-bandeau][hidden]{display:none !important;}
.bandeau-titre{position:relative;isolation:isolate;box-sizing:border-box;height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 28px;overflow:hidden;
  background:linear-gradient(115deg,#A27A30 0%,#C9A45C 24%,#EBD196 50%,#C9A45C 76%,#A27A30 100%);
  box-shadow:inset 0 -1px rgba(var(--or-rgb),.35);}
.bandeau-titre::before{content:"";position:absolute;inset:16px;border:1px solid rgba(var(--or-rgb),.38);pointer-events:none;}
.bandeau-titre .bandeau-titre-nom{font-family:'Marcellus',serif;font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.15;color:var(--titre);
  text-transform:uppercase;letter-spacing:.05em;margin:10px 0 0;text-shadow:var(--titre-reflet);}
.bandeau-titre-sous{font-size:15px;line-height:1.6;color:var(--gris);margin:14px 0 0;max-width:640px;}
.bandeau-titre-sous::before{content:"✦";display:block;font-size:12px;line-height:1;color:var(--or);margin:0 auto 10px;}
.bandeau-credit{margin:0;padding:6px 60px 0;font-size:12px;color:var(--gris);text-align:right;}
.bandeau-credit a{color:inherit;}
@media(max-width:900px){
  .bandeau-titre{height:200px;padding:0 26px;}
  .bandeau-titre::before{inset:10px;}
  .bandeau-titre-sous{font-size:14px;margin-top:10px;}
  .bandeau-titre-sous::before{margin-bottom:8px;}
  .bandeau-credit{padding:6px 22px 0;}
}