/* ============================================================================
   Correctifs RGAA (a porter en SCSS source cote integrateur)
   ============================================================================ */

/* 3.2 / 3.3 - Contraste : core.css l.77 colore en rouge primaire TOUS les liens
   RTE (.rte a:not([data-fancybox]):not(.is-rte):not(.glossary-term), specificite
   0-0-4-1). Dans le bloc .location (fond = var(--color-1--1)), un lien-bouton RTE
   devient rouge sur rouge = invisible. On retablit un contraste lisible au repos,
   scope strict au bloc .location, avec une specificite superieure a la regle fautive. */
.location .rte a.btn:not([data-fancybox]):not(.is-rte):not(.glossary-term),
.location .btn-secondary {
    color: #fff !important;
    border-color: #fff !important;
}

/* ============================================================================
   RGAA 10.7 — Indicateur de focus visible (clavier)
   Le theme pose des `outline:0` / `.btn:focus{outline:currentColor}` qui
   masquent ou rendent peu lisible le focus. On force un focus clavier visible
   et contraste (>=3:1), sans l'afficher au clic, avec outline (non rogne par
   overflow) et une couleur adaptee aux zones sombres.
   ============================================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
}
/* Zones sombres (footer inverse, sections .is-inverted) : focus clair */
.is-inverted a:focus-visible,
.is-inverted button:focus-visible,
.is-inverted .btn:focus-visible,
.is-inverted [tabindex]:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
    outline-color: #fff !important;
}

/* ============================================================================
   RGAA 3.2 — Confort de contraste du carrousel "TOUS NOS SITES" (.ontheweb)
   En survol/focus, le titre passe en blanc sur la pastille rouge --color-1--1
   (#ce3b2b) = 4.9:1 (juste). On utilise la teinte foncee de la charte
   (--color-1--4, #953025) -> blanc ~7.7:1, sans toucher au rouge global.
   ============================================================================ */
.ontheweb-item:hover .ontheweb-item__content,
.ontheweb-item:focus .ontheweb-item__content,
.ontheweb-item:focus-within .ontheweb-item__content {
    background-color: #953025 !important;
    background-color: var(--color-1--4) !important;
    border-color: #953025 !important;
    border-color: var(--color-1--4) !important;
}

/* ============================================================================
   RGAA 3.2 — carrousel "TOUS NOS SITES" (.ontheweb) : AU REPOS le titre est
   blanc sur le fond clair (illisible) ; il n'etait lisible qu'au survol.
   On force le titre en sombre au repos (lisible sur la pastille claire) ; il
   repasse en blanc au survol/focus (pastille rouge foncee --color-1--4).
   ============================================================================ */
.ontheweb-item__title,
.ontheweb-item__title a {
    color: #010101 !important;
    color: var(--color-1--2) !important;
}
.ontheweb-item:hover .ontheweb-item__title,
.ontheweb-item:focus .ontheweb-item__title,
.ontheweb-item:focus-within .ontheweb-item__title,
.ontheweb-item:hover .ontheweb-item__title a,
.ontheweb-item:focus .ontheweb-item__title a,
.ontheweb-item:focus-within .ontheweb-item__title a {
    color: #fff !important;
}

/* ============================================================================
   RGAA 3.2 — Header fixe "darkheader" en DESKTOP (>=1280px)
   Bug : `.header.js-fixed-el{background:#fff}` (header fixe blanc) + la regle
   `.darkheader … .main-nav__nav-toggle-text{color:#fff!important}` -> le parent
   a sous-pages (« Les piscines ») etait blanc sur blanc = illisible.
   Choix : header fixe = couleur 1 (comme le mobile, deja bleu) + TOUS les
   libelles de la BARRE top-niveau en blanc + logo en blanc.
   Scope strict desktop (>=1280px) : en tablette/mobile le menu est un panneau
   clair a texte fonce -> on n'y touche pas (pas de blanc-sur-blanc). Les
   combinateurs `>` excluent les sous-menus deroules (qui restent fonces).
   ============================================================================ */
@media screen and (min-width: 1280px) {
  .darkheader .header.js-fixed-el {
    background-color: #133D68 !important;
    background-color: var(--color-1--1) !important;
  }
  /* Libelles top-niveau (liens sans ET avec sous-pages) en blanc */
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item > .main-nav__nav-item-actions .main-nav__nav-link-text,
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item > .main-nav__nav-item-actions .main-nav__nav-toggle-text,
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item > .main-nav__nav-item-actions > .main-nav__nav-link {
    color: #fff !important;
  }
  /* survol/focus/ouvert : rester blanc (soulignement = affordance) */
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item > .main-nav__nav-item-actions .main-nav__nav-link[href]:hover,
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item > .main-nav__nav-item-actions .main-nav__nav-link[href]:focus,
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item.is-open > .main-nav__nav-item-actions .main-nav__nav-link-text,
  .darkheader .header.js-fixed-el .main-nav__nav-list > .main-nav__nav-item.is-open > .main-nav__nav-item-actions .main-nav__nav-toggle-text {
    color: #fff !important;
  }
  /* Actions (recherche…) en blanc */
  .darkheader .header.js-fixed-el .header__actions,
  .darkheader .header.js-fixed-el .header__actions a,
  .darkheader .header.js-fixed-el .header__actions button {
    color: #fff !important;
  }
  /* Logo piscine (.websitelogo) est deja blanc -> on n'y touche pas ;
     seul le logo agglo (.is-second, fonce) est inverse pour passer en blanc */
  .darkheader .header.js-fixed-el .header__logo .logo.is-second img {
    filter: brightness(0) invert(1);
  }
}

/* ============================================================================
   RGAA 3.x — Menu en SURIMPRESSION sur l'image d'en-tete (.has-page-image,
   etat non-fixe). Probleme : texte blanc sur image a contraste variable
   (lisibilite aleatoire), et SURTOUT le survol/focus qui vire au bleu
   (var(--color-1--1), fonce) -> illisible sur l'image. General a tous les
   sites avec une image d'en-tete.
   (A) Voile degrade sombre derriere le header -> le blanc repose toujours sur
       une zone assombrie = contraste garanti, quelle que soit l'image.
   (B) Survol/focus/ouvert : le texte RESTE blanc (le soulignement assure
       l'affordance) au lieu de passer en bleu.
   ============================================================================ */
.has-page-image .header-wrapper::before,
body.home-page .header-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280px;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0.7) 0%,
              rgba(0, 0, 0, 0.55) 55%,
              rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.has-page-image .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-link[href]:hover,
.has-page-image .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-link[href]:focus,
.has-page-image .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-item.is-open > .main-nav__nav-item-actions .main-nav__nav-link-text,
.has-page-image .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-item.is-open > .main-nav__nav-item-actions .main-nav__nav-toggle-text,
body.home-page .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-link[href]:hover,
body.home-page .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-link[href]:focus,
body.home-page .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-item.is-open > .main-nav__nav-item-actions .main-nav__nav-link-text,
body.home-page .header:not(.js-fixed-el) .main-nav__nav-list .main-nav__nav-item.is-open > .main-nav__nav-item-actions .main-nav__nav-toggle-text {
  color: #fff !important;
}
/* Legere ombre : fait ressortir le blanc sans assombrir davantage l'image */
.has-page-image .header:not(.js-fixed-el) .main-nav__nav-link-text,
.has-page-image .header:not(.js-fixed-el) .main-nav__nav-toggle-text,
body.home-page .header:not(.js-fixed-el) .main-nav__nav-link-text,
body.home-page .header:not(.js-fixed-el) .main-nav__nav-toggle-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* RGAA 3.2 — Boutons du bloc contact (.contact-item, carte claire) dans un footer
   inverse (.is-inverted) : .is-inverted .btn{color:#fff} -> blanc sur #f7f7f7 (1.07).
   On retablit la couleur 1 (lisible ~11:1), scope au bloc contact. */
.is-inverted .contact-item .btn,
.is-inverted .contact-item .btn .btn__text,
.is-inverted .contact-item .btn__text { color: var(--color-1--1) !important; }

/* ============================================================================
   RGAA 3.2 — Couleur des liens RTE & textes secondaires selon le CONTEXTE de
   cadre (frames.css). CAUSE : core.css
   `.rte a:not([data-fancybox]):not(.is-rte):not(.glossary-term)` (specificite
   0-0-4-1) BAT les regles de frames.css `.frame-background-* a:not(.btn)`
   (0-0-2-1). Resultat : dans un cadre colore/sombre les liens RTE gardent le
   rouge #ce3b2b -> sur fond sombre #010101 = 4.26:1 (echec), sur panneau clair
   #ecf1f3 = 4.30:1 (echec), sur fond primaire = rouge-sur-rouge (musees). On
   rescope par contexte avec une specificite superieure, en REUTILISANT les
   tokens de la charte (aucune couleur inventee). Ratios verifies sur palette
   rouge (musees) ET navy (vivreaniort). Pas de !important sur les liens : on
   laisse vivre les etats :hover/:focus de frames.css.
   ============================================================================ */

/* Cadre SOMBRE (bg = var(--color-1--2)) : liens RTE en clair + gris eclaircis */
.frame-background-dark .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term) {
    color: var(--color-2--3);          /* musees #fbdfcf=16.5:1 ; navy #b3eaed=11.4:1 */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.frame-background-dark .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):hover,
.frame-background-dark .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):focus {
    background-color: #fff;
    color: var(--color-1--2);
    text-decoration: none;
}

/* Cadre PRIMAIRE (bg = var(--color-1--1)) : liens RTE en blanc (evite rouge/rouge) */
.frame-background-primary .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term) {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.frame-background-primary .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):hover,
.frame-background-primary .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):focus {
    background-color: #fff;
    color: var(--color-1--2);
    text-decoration: none;
}

/* Cadres CLAIRS (bg pale #ecf1f3 / #ecf8f9) : liens RTE en variante foncee charte */
.frame-background-light .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term),
.frame-background-soft .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term) {
    color: var(--color-1--4);          /* musees #953025=6.8:1 ; navy #003a50=10.7:1 */
}
.frame-background-light .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):hover,
.frame-background-light .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):focus,
.frame-background-soft .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):hover,
.frame-background-soft .rte a:not(.btn):not([data-fancybox]):not(.is-rte):not(.glossary-term):focus {
    color: var(--color-1--4);
    text-decoration: underline;
}

/* Textes secondaires (legendes, taille de fichier) selon le contexte */
.frame-background-dark .caption,
.frame-background-dark figcaption,
.frame-background-dark .publications-content-item__size {
    color: #e6e6e6 !important;         /* #010101 16.7:1 ; #002a3a 12.1:1 */
}
.frame-background-light .caption,
.frame-background-light figcaption,
.frame-background-light .publications-content-item__size,
.frame-background-soft .caption,
.frame-background-soft figcaption,
.frame-background-soft .publications-content-item__size {
    color: #5e5e5e !important;         /* #ecf1f3 5.7:1 ; blanc 6.5:1 */
}

/* .btn-primary (Bootstrap : texte rouge var(--color-1--1), fond transparent —
   souvent des liens "link-page" inseres en RTE). Exclu des regles ci-dessus par
   :not(.btn), il garde le rouge -> #ce3b2b sur #ecf1f3 (4.30) / sur #010101
   (4.26) / rouge-sur-rouge en cadre primaire. On le traite a part. NB : au
   survol, core.css `.rte a:hover` pose un FOND rouge plein + texte blanc
   (4.9:1) -> on aligne donc tous les survols sur blanc. Ne concerne PAS
   `.btn.is-primary` (fond rouge plein/texte blanc, classe distincte). */
.frame-background-dark .btn.btn-primary,
.frame-background-primary .btn.btn-primary {
    color: #fff !important;
}
.frame-background-light .btn.btn-primary,
.frame-background-soft .btn.btn-primary {
    color: var(--color-1--4) !important;   /* musees #953025=6.8:1 ; navy #003a50=10.7:1 */
}
.frame-background-dark .btn.btn-primary:hover,
.frame-background-dark .btn.btn-primary:focus,
.frame-background-primary .btn.btn-primary:hover,
.frame-background-primary .btn.btn-primary:focus,
.frame-background-light .btn.btn-primary:hover,
.frame-background-light .btn.btn-primary:focus,
.frame-background-soft .btn.btn-primary:hover,
.frame-background-soft .btn.btn-primary:focus {
    color: #fff !important;            /* survol = fond rouge plein -> blanc 4.9:1 */
}

/* Fix bloc news : en contexte grille (.news-home .news-list, desktop >=1280px),
   is-columns-4 imposait width:25% aux .list__item -> 25% de la CELLULE de grille
   (~67px) au lieu de la remplir. On rend la largeur au grid (width:auto). Scope
   >=1280px pour ne pas toucher le flex tablette/mobile (is-columns-md-3/sm-1). */
@media screen and (min-width: 1280px) {
  .news-home .news-list.is-columns-4 .list__item { width: auto; }
}

/* Régression fe493be (« WCAG-AAA color frames », frames.css) : le rendu « fond
   sombre » (fond noir + texte blanc + liens roses var(--color-2--3)) casse les
   blocs NEWS réglés sur « fond sombre » (liens roses illisibles, cartes qui
   débordent). Avant ce commit, « fond sombre » n'avait aucun effet sur les news
   (rendu clair). On neutralise donc ce traitement UNIQUEMENT pour les blocs
   contenant une liste news (.news-home) -> rendu clair/lisible, contenu inchangé. */
.frame-background-dark:has(.news-home){background:transparent !important}
.frame-background-dark:has(.news-home),
.frame-background-dark:has(.news-home) :is(.title,.title__text,h1,h2,h3,h4,h5,h6,p,li,dt,dd,.lead,.teaser,.theme,strong,b,time,.news-item__title,.news-item__publication,.news-item__category){color:#1a1a1a !important}
.frame-background-dark:has(.news-home) a:not(.btn){color:#1d3078 !important}

/* ===== Carrousel/galerie d'images dans un RTE (textmedia) — parité usine_sites ===== */
/* Slides clippées : la règle générique .rte ul{overflow:hidden} coupe le swiper
   (fix usine_sites c1efac9 ; !important ici car rgaa-fixes charge avant core.css). */
.rte ul.nagallerie.swiper-wrapper,.rte ul.gallery-block__wrapper.swiper-wrapper,.rte ul.swiper-wrapper{overflow:visible !important}
.rte ul.swiper-wrapper>li.gallery-block__item{padding:12px}
@media screen and (max-width:767px){.rte ul.swiper-wrapper>li.gallery-block__item{padding:0}}
/* Puce fléchée ::before inutile devant les images de galerie (structure <ul><li>). */
.rte ul.swiper-wrapper>li::before,.rte ul.nagallerie>li::before,.rte ul.gallery-block__wrapper>li::before{content:none !important;display:none !important}
.rte ul.swiper-wrapper>li{list-style:none}

/* ===== Titres RTE lisibles sur fond de couleur (générique) ===== */
/* frames.css whitit .title:not(.rte) mais PAS les titres tapés dans l'éditeur
   (.rte h2/h3…) : ils gardent la couleur d'accent -> illisibles sur un fond de
   cette couleur (titre rouge sur fond rouge). On les force en blanc sur les fonds
   sombres/colorés (primary/dark) -> plus besoin de corriger à la main. */
.frame-background-primary .rte :is(h1,h2,h3,h4,h5,h6),.frame-background-primary .rte :is(h1,h2,h3,h4,h5,h6) *,
.frame-background-dark .rte :is(h1,h2,h3,h4,h5,h6),.frame-background-dark .rte :is(h1,h2,h3,h4,h5,h6) *{color:#fff !important}