/* ============================================================================
   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 */
}