/* =============================================================
   Frames de section (sélecteur "Couleur de fond" du Frame BE)
   -------------------------------------------------------------
   Active les classes frame-background-* déjà émises par le layout
   bootstrap_package surchargé (Resources/Private/Extension/bootstrap/Layout/Default.html).

   Contraintes accessibilité (WCAG 2.1 AA, viser AAA quand possible) :
   - Texte courant : ratio de contraste >= 4.5:1
   - Texte large (>= 18pt ou >= 14pt gras) : >= 3:1
   - Liens visiblement distincts (couleur + soulignement)
   - Outline de focus visible sur tous les fonds

   Palette du gabarit (rappel) :
     --color-1--1: #005373  (bleu Niort)
     --color-1--2: #002a3a  (navy sombre)
     --color-1--3: #b3ccd5  (bleu clair)
     --color-2--1: #00b8c2  (cyan)
     --color-2--3: #b3eaed  (cyan très clair)
   ============================================================= */

/* ---------- Comportement commun : full-bleed + padding ---------- */
.frame-background-light,
.frame-background-soft,
.frame-background-primary,
.frame-background-dark {
    /* casse le wrapper local 1280px pour s'étendre de bord à bord */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 50px calc(50vw - 50%);
}

@media screen and (max-width: 1279px) {
    .frame-background-light,
    .frame-background-soft,
    .frame-background-primary,
    .frame-background-dark {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 767px) {
    .frame-background-light,
    .frame-background-soft,
    .frame-background-primary,
    .frame-background-dark {
        padding: 30px 20px;
    }
}


/* ============================================================
   FOND CLAIR — frame-background-light
   #ecf1f3  (= color-1--3 à 25% sur blanc, aplati pour éviter
              les problèmes de transparence sur images/PDF)
   ------------------------------------------------------------
   Contrastes vérifiés sur ce fond :
     #000        -> 18.7:1  (AAA)
     #002a3a     -> 14.6:1  (AAA, texte courant + titres)
     #005373     -> 7.6:1   (AAA, liens)
     #707070     -> 4.4:1   (AA large only — la classe .teaser est
                              en 2.4rem bold = large -> OK)
   ============================================================ */
.frame-background-light {
    background-color: #ecf1f3;
    color: #002a3a;
}


/* ============================================================
   FOND CYAN TRES CLAIR — frame-background-soft
   #ecf8f9  (= color-2--3 à 25% sur blanc)
   ------------------------------------------------------------
   Contrastes vérifiés :
     #000        -> 18.5:1  (AAA)
     #002a3a     -> 14.4:1  (AAA)
     #005373     -> 7.5:1   (AAA)
   ============================================================ */
.frame-background-soft {
    background-color: #ecf8f9;
    color: #002a3a;
}


/* ============================================================
   FOND PRIMAIRE BLEU — frame-background-primary
   #005373  (color-1--1)
   ------------------------------------------------------------
   Contrastes vérifiés sur ce fond :
     #fff        -> 8.5:1   (AAA)
     #b3eaed     -> 6.7:1   (AAA, hover de lien)
     #00b8c2     -> 3.9:1   (AA large only -> btn.is-ternary
                              autorisé car .btn est gras + 1.4rem+)
   ============================================================ */
.frame-background-primary {
    background-color: var(--color-1--1);
    color: #fff;
}

.frame-background-primary,
.frame-background-primary .title:not(.rte),
.frame-background-primary .title__text,
.frame-background-primary h1,
.frame-background-primary h2,
.frame-background-primary h3,
.frame-background-primary h4,
.frame-background-primary h5,
.frame-background-primary h6,
.frame-background-primary p,
.frame-background-primary li,
.frame-background-primary dt,
.frame-background-primary dd,
.frame-background-primary .lead,
.frame-background-primary .teaser,
.frame-background-primary .theme,
.frame-background-primary strong,
.frame-background-primary b {
    color: #fff;
}

.frame-background-primary svg,
.frame-background-primary [class*="fa-"] {
    fill: #fff;
    color: #fff;
}

/* Liens : couleur claire + soulignement obligatoire (pas que la couleur) */
.frame-background-primary a:not(.btn) {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.frame-background-primary a:not(.btn):hover,
.frame-background-primary a:not(.btn):focus,
.frame-background-primary a:not(.btn):focus-within {
    background-color: #fff;
    color: var(--color-1--2);   /* navy sombre sur blanc -> 14:1 AAA */
    text-decoration: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* ============================================================
   FOND SOMBRE — frame-background-dark
   #002a3a  (color-1--2)
   ------------------------------------------------------------
   Contrastes vérifiés sur ce fond :
     #fff        -> 16.0:1  (AAA)
     #b3eaed     -> 12.6:1  (AAA, liens)
     #00b8c2     -> 7.4:1   (AAA)
   ============================================================ */
.frame-background-dark {
    background-color: var(--color-1--2);
    color: #fff;
}

.frame-background-dark,
.frame-background-dark .title:not(.rte),
.frame-background-dark .title__text,
.frame-background-dark h1,
.frame-background-dark h2,
.frame-background-dark h3,
.frame-background-dark h4,
.frame-background-dark h5,
.frame-background-dark h6,
.frame-background-dark p,
.frame-background-dark li,
.frame-background-dark dt,
.frame-background-dark dd,
.frame-background-dark .lead,
.frame-background-dark .teaser,
.frame-background-dark .theme,
.frame-background-dark strong,
.frame-background-dark b {
    color: #fff;
}

.frame-background-dark svg,
.frame-background-dark [class*="fa-"] {
    fill: #fff;
    color: #fff;
}

.frame-background-dark a:not(.btn) {
    color: var(--color-2--3);   /* #b3eaed sur #002a3a -> 12.6:1 */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.frame-background-dark a:not(.btn):hover,
.frame-background-dark a:not(.btn):focus,
.frame-background-dark a:not(.btn):focus-within {
    background-color: var(--color-2--3);
    color: var(--color-1--2);
    text-decoration: none;
    outline: 2px solid var(--color-2--3);
    outline-offset: 2px;
}


/* ============================================================
   FOCUS VISIBLE renforcé sur fonds colorés
   Le body a outline:2px solid currentColor;outline-offset:-3px
   -> sur fond bleu/noir, currentColor = blanc, mais l'offset
      négatif rend le focus quasi invisible. On inverse l'offset
      pour ces contextes.
   ============================================================ */
.frame-background-primary :focus,
.frame-background-primary :focus-visible,
.frame-background-dark :focus,
.frame-background-dark :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.frame-background-light :focus,
.frame-background-light :focus-visible,
.frame-background-soft :focus,
.frame-background-soft :focus-visible {
    outline: 2px solid var(--color-1--2);
    outline-offset: 3px;
}


/* ============================================================
   A11Y — Signalement "nouvelle fenêtre" pour les liens externes
   ------------------------------------------------------------
   RGAA 13.2 : prévenir l'utilisateur qu'un lien ouvre une
   nouvelle fenêtre.

   Stratégie en 2 couches :
   1. CSS (cette feuille) : pictogramme ↗ visuel pour les
      utilisateurs voyants (souris + clavier).
   2. HTML/Fluid (templates) : <span class="sr-only">
      (nouvelle fenêtre)</span> pour les lecteurs d'écran.

   Les deux couches sont nécessaires pour la conformité RGAA
   pleine (le contenu généré par CSS::after n'est pas
   fiablement annoncé par les AT).

   Classe d'opt-out : .no-external-icon (à mettre sur l'<a>
   si on ne veut pas du picto, ex. lien déjà décoré).
   ============================================================ */

a[target="_blank"]:not(.no-external-icon)::after {
    content: " \2197";              /* flèche ↗ U+2197 */
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.85em;
    color: inherit;
    vertical-align: baseline;
    text-decoration: none;
    /* aria : on évite la double-annonce avec la sr-only span */
    speak: never;
}

/* Si le lien contient déjà sa propre icône externe (FA),
   pas la peine d'en rajouter une */
a[target="_blank"]:has([class*="fa-external"])::after,
a[target="_blank"]:has([class*="fa-arrow-up-right"])::after {
    content: none;
}

/* Sur les boutons stylés (.btn), placer le picto "à l'intérieur"
   du padding pour éviter qu'il dépasse */
a.btn[target="_blank"]:not(.no-external-icon)::after {
    margin-left: 0.4em;
}

/* Quand le lien n'a aucun texte visible (icône ou image seule),
   ne pas ajouter le picto (sinon on l'aligne à côté d'un img) */
a[target="_blank"]:has(>img:only-child)::after,
a[target="_blank"]:has(>picture:only-child)::after,
a[target="_blank"][aria-label]:not(:has(.btn__text))::after {
    content: none;
}


/* ============================================================
   Compatibilité avec les composants existants
   ------------------------------------------------------------
   - .infowidget conserve son fond cyan clair (color-2--3) même
     placé dans un frame coloré (sinon double fond illisible).
   - .btn garde ses couleurs propres (les variantes is-primary /
     is-ternary restent contrastées sur tous les fonds proposés).
   ============================================================ */
.frame-background-primary .infowidget,
.frame-background-dark .infowidget {
    background-color: #fff;
    color: #002a3a;
}

.frame-background-primary .infowidget *,
.frame-background-dark .infowidget * {
    color: inherit;
}

.frame-background-primary .infowidget a:not(.btn),
.frame-background-dark .infowidget a:not(.btn) {
    color: var(--color-1--1);
}