/* V6.5-fix-49 — Accessibilité a11y : focus visible global + corrections.
 *
 * Conformité visée : RGAA 10.7 (focus visible), WCAG 2.4.7 (Focus Visible AA),
 * WCAG 2.1.1 (Keyboard Accessible).
 *
 * Stratégie :
 *   - :focus-visible (pas :focus seul) → focus stylé UNIQUEMENT au clavier,
 *     pas au clic souris. Évite la sur-stylisation visuelle à la souris.
 *   - Outline 2px orange charte par défaut. Variante bleu sur fonds orange
 *     pour préserver le contraste.
 *   - Correction des outline:none résiduels du thème (portail.css:694,
 *     portail-carrieres.css:191) : ajout d'un box-shadow pour focus visible.
 *
 * Charge en dépendance de almaviva-custom (cf functions.php).
 */

/* ============================================================
   Focus visible global — orange charte, 2px, offset 2px
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--alm-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Variante bleu pour les éléments sur fond orange (lisibilité). */
.alm-btn-primary:focus-visible,
.alm-btn--p:focus-visible,
.alm-v-btn--p:focus-visible,
.alm-cta:focus-visible,
.almaviva-cta:focus-visible,
.alm-rgpd-form__submit:focus-visible {
  outline-color: var(--alm-blue);
  outline-offset: 3px;
}

/* Texte/lien sur fond bleu (header sticky, footer) → outline orange OK
   sauf si la couleur n'a pas assez de contraste. Override fin si besoin. */

/* ============================================================
   Correction des outline:none thème front (fix-49)
   Ces sélecteurs annulaient l'outline natif sans fournir d'alternative
   visible suffisante. On rajoute un box-shadow + on garde la border-color
   change qui était déjà en place.
   ============================================================ */
.alm-field input:focus,
.alm-field select:focus,
.alm-field textarea:focus,
.alm-carriere-field input:focus,
.alm-carriere-field select:focus,
.alm-carriere-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 72, 153, 0.15);
}

/* ============================================================
   Skip-link Hello Elementor (parent étab) — alignement visuel
   sur celui du portail (.alm-skip-link).
   Cible la classe parent .skip-link.screen-reader-text quand focus.
   ============================================================ */
.skip-link.screen-reader-text:focus,
.alm-skip-link:focus {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--alm-blue);
  color: #fff;
  padding: 10px 18px;
  z-index: 99999;
  font-family: 'Manrope', 'Jost', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  outline: 2px solid var(--alm-orange);
  outline-offset: -2px;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================================
   Désactivation focus visible sur éléments non interactifs
   (au cas où certains composants reçoivent un focus involontaire)
   ============================================================ */
[tabindex="-1"]:focus,
main:focus,
main[tabindex="-1"]:focus {
  outline: none;
}

/* ============================================================
   Neutralisation du rose #CC3366 (#c36) hérité de hello-elementor
   (parent) reset.css — règles button / [type=button] / [type=submit]
   + :hover + :focus. Le parent applique color/border/background rose
   sur tous les <button> nus du frontend, ce qui :
     1) colorait le texte des boutons nus en rose,
     2) faisait paraître "actif rose plein" tout chip cliqué qui
        gardait le :focus (cf alm/annuaire).
   Spécificité (0,1,2) via préfixe `body` pour battre reset.css du
   parent (0,1,1) indépendamment de l'ordre d'enqueue — le parent
   attache son hook wp_enqueue_scripts en priorité 10 mais le handler
   s'exécute APRÈS celui de l'enfant, donc reset.css est imprimé après
   accessibility.css ; sans le préfixe `body`, la cascade laisserait
   gagner le parent. Aucun !important : sélecteur minimal qui domine.
   Les boutons stylés (.alm-btn*, .alm-block-annuaire__chip, etc.) ont
   une spécificité ≥ (0,2,0) et conservent leurs couleurs DA.
   ============================================================ */
body button,
body [type="button"],
body [type="submit"] {
  color: inherit;
  border-color: currentColor;
}
body button:hover,
body button:focus,
body [type="button"]:hover,
body [type="button"]:focus,
body [type="submit"]:hover,
body [type="submit"]:focus {
  background-color: transparent;
  color: inherit;
  border-color: currentColor;
  text-decoration: none;
}

/* ============================================================
   Widget a11y — taille du texte (A- / défaut / A+)
   ------------------------------------------------------------
   Le widget pose data-fontsize=85|115 sur <html> (cf a11y-toolbar.js).
   On scale le ROOT (pas body em) : seul le root fait cascader les rem,
   et le thème utilise massivement rem pour la typo. Règle GLOBALE
   (accessibility.css chargé sur les 44 sites) ; remplace l'ancienne
   règle maternité-only body.subbrand-maternite (retirée). Les unités px
   ne scalent pas (limite a11y standard, acceptée).
   ============================================================ */
html[data-fontsize="85"]  { font-size: 85%; }
html[data-fontsize="115"] { font-size: 115%; }

/* ============================================================
   Widget a11y — contraste élevé (RGAA, 44 sites) — Axe B
   ------------------------------------------------------------
   On PRÉSERVE les fonds de marque (bordeaux/bleu, déjà sombres et
   contrastés) au lieu de tout repasser en noir/blanc. L'ancien remap
   maternité (--alm-blue->#000 + color:#000 global) cassait les sections
   sombres en noir-sur-noir. Ici on renforce la lisibilité sans toucher
   aux fonds :
   - texte courant en noir pur sur fonds clairs (annule les gris doux) ;
   - liens toujours soulignés + épais (distinguables sans la couleur) ;
   - focus visible renforcé.
   Les sections à fond de marque gardent leur texte blanc natif
   (#fff / --on-blue) -> restent lisibles. data-contrast=high posé sur
   <html> par a11y-toolbar.js.
   ============================================================ */
html[data-contrast="high"] body {
  --alm-text:      #000000;
  --alm-text-soft: #000000;
  /* Orange CTA : en défaut #EE7203 (2.98:1) / #D96502 ne passent pas AA sur
     texte blanc. En contraste élevé UNIQUEMENT, on assombrit l'orange à
     #b35402 (~5.0:1 vs #fff, AA OK, teinte préservée) ; hover/dark plus sombre
     #8f4402 (~7.0:1). L'orange reste #EE7203/#D96502 en mode défaut. */
  --alm-orange:       #b35402;
  --alm-orange-2:     #b35402;
  --alm-orange-dark:  #8f4402;
  --alm-orange-light: #b35402;
  --cta-bg:           #b35402;
  --cta-bg-hover:     #8f4402;
  --av-o:             #b35402;
  --av-o2:            #b35402;
  /* Aliases figés au :root (var(--alm-orange) y est résolu une fois) : il faut
     les ré-assigner EN DUR ici, sinon l'override de --alm-orange ne se propage
     pas (bug systémique d'indirection CSS var documenté dans le thème). */
  --almaviva-orange:  #b35402;
}
/* CTA legacy header : hover en orange hardcodé (#d96503) -> assombri en contraste. */
html[data-contrast="high"] .almaviva-menu .almaviva-cta:hover {
  background: #8f4402;
}
html[data-contrast="high"] a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
html[data-contrast="high"] :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* ============================================================
   Widget a11y — anti-overflow du panneau de réglage
   ------------------------------------------------------------
   Le panneau est l'OUTIL de contrôle : il doit rester stable et ne jamais
   couper ses boutons. Il est déjà dimensionné en px (donc immunisé du
   scaling html[data-fontsize]) ; on garantit en plus, en CSS visuel pur
   (aucune logique JS touchée) :
     1. font-size figée même sous data-fontsize (le widget ne grossit pas
        avec A+ — sinon débordement + non-sens UX) ;
     2. box-sizing border-box (le padding des boutons n'élargit pas la boîte) ;
     3. rangées de boutons en flex-wrap + min-width:max-content -> les
        libellés (« Par défaut », « Dyslexique »…) ne sont jamais tronqués,
        et passent à la ligne si l'espace manque au lieu d'être coupés.
   a11y-toolbar.css charge APRÈS accessibility.css : on monte la spécificité
   (sélecteurs à 2 classes / attribut) pour gagner la cascade.
   ============================================================ */
html[data-fontsize="85"]  .alm-a11y-toolbar,
html[data-fontsize="115"] .alm-a11y-toolbar { font-size: 14px; }

.alm-a11y-toolbar__panel,
.alm-a11y-toolbar__panel * { box-sizing: border-box; }

.alm-a11y-toolbar__group .alm-a11y-toolbar__row { flex-wrap: wrap; }

.alm-a11y-toolbar__row .alm-a11y-toolbar__btn {
  flex: 1 1 auto;
  min-width: max-content; /* le libellé prime : jamais tronqué */
}

html[data-linespacing="large"] body { line-height: 1.9; }
html[data-linespacing="large"] p,
html[data-linespacing="large"] li,
html[data-linespacing="large"] dd { line-height: 1.9; }

html[data-links="underline"] a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}