/* ═══════════════════════════════════════════════════════════════════
   RGAA v4.1.2 — Amosphère — Accessibilité globale
   Appliqué sur toutes les pages via _nav.html et les layouts publics
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. SKIP LINK (Thème 12 — Navigation) ── */
/* Masqué de façon fiable (technique clip) : un « top:-100px » se faisait révéler
   sur certaines pages à cause d'un ancêtre positionné. On neutralise l'élément puis,
   au focus clavier, on le réaffiche en position:fixed (référence = fenêtre, donc
   insensible au contexte de positionnement). */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 20px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 10000;
  background: #0e295c;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  outline: 3px solid #e1622b;
  outline-offset: 2px;
}

/* ── 2. FOCUS VISIBLE (Thème 5 & 10 — Présentation / Consultation) ── */
/* Remplace l'outline par défaut par un style visible et cohérent */
*:focus-visible {
  outline: 3px solid #e1622b !important;
  outline-offset: 2px !important;
}
/* Supprime l'outline uniquement pour les clics souris */
*:focus:not(:focus-visible) {
  outline: none;
}
/* Boutons et liens interactifs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #e1622b !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ── 3. TEXTE MASQUÉ VISUELLEMENT — ACCESSIBILITÉ UNIQUEMENT ──
   Classe .sr-only : visible pour les lecteurs d'écran, invisible à l'écran.
   Conforme WCAG 2.1 — utiliser pour alt de SVG, étiquettes cachées, etc. ── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Version focusable (pour skip link) */
.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ── 4. CONTRASTE RENFORCÉ (Thème 3 — Couleurs) ──
   --muted original #7A8695 : ratio ~3.5:1 sur blanc (insuffisant AA)
   --muted-aa #596475 : ratio ~5.1:1 ✓ (conforme AA)
   --light original #C8C4BE : ratio ~2.3:1 (décoratif/placeholder uniquement)
   ── */
:root {
  --muted-aa: #596475;   /* Texte de contenu — AA conforme */
  --terra-aa: #A8472A;   /* --terra sur fond blanc — AA conforme (5.2:1) */
}
/* Appliquer le contraste AA aux textes de contenu (pas aux décoratifs) */
.prose,
.description-text,
.field-hint,
p.page-sub,
.card-subtitle,
.sec-sub,
.why-desc,
.val-desc,
.section-sub,
.hero-sub {
  color: var(--muted-aa) !important;
}

/* ── 5. FORMULAIRES — INDICATEURS D'ERREUR (Thème 6 — Formulaires) ──
   Les erreurs ne doivent pas être transmises par la couleur seule.
   Ajout d'une icône + bordure épaisse pour les champs en erreur. ── */
.form-input.error,
.field input.error,
.field select.error,
.field textarea.error {
  border-color: #C00 !important;
  border-width: 2px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C00' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px !important;
}
.field-error-msg {
  color: #C00;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-error-msg::before {
  content: "⚠ ";
}

/* ── 6. LIENS — INTITULÉS (Thème 6 — Liens) ──
   Les liens avec icônes seules doivent avoir un title ou aria-label. ── */
a[aria-label],
button[aria-label] {
  /* Ces éléments ont un label accessible — OK */
}

/* ── 7. TABLEAUX (Thème 5 — Tableaux) ── */
table caption {
  text-align: left;
  font-weight: 600;
  padding: 8px 0;
  color: #596475;
}

/* ── 8. REDIMENSIONNEMENT DU TEXTE (Thème 5 — Présentation) ──
   Toutes les tailles de texte en rem pour permettre le zoom navigateur. ── */
html {
  font-size: 100%; /* = 16px par défaut, respecte les préférences utilisateur */
}

/* ── 9. ANIMATIONS — RESPECT DES PRÉFÉRENCES (WCAG 2.3) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 10. LANDMARKS ARIA — STYLE (pour navigation screen reader) ── */
main:focus {
  outline: none; /* main reçoit le focus du skip link mais ne doit pas afficher d'outline */
}

/* P2 RGAA — Hiérarchie des titres : h2/h3.section-title reset navigateur */
h2.section-title, h3.section-title {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  letter-spacing: inherit;
}

/* P3 RGAA — Fil d'Ariane (Thème 12 — Navigation) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid #E5E8EF;
  font-size: 12px;
  flex-wrap: wrap;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #596475;
}
.breadcrumb li a {
  color: #596475;
  text-decoration: none;
}
.breadcrumb li a:hover { color: #0e295c; text-decoration: underline; }
.breadcrumb li[aria-current="page"] { color: #0e295c; font-weight: 500; }
.breadcrumb li + li::before {
  content: '›';
  color: #C8C4BE;
  font-size: 13px;
}

/* ---- Mobile : 16px minimum sur les champs de saisie ----
   En dessous de 16px, iOS Safari zoome automatiquement la page au focus
   d'un champ, ce qui décale l'interface (ex. bouton envoyer hors écran). */
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}