/* ===== Variables spécifiques Visa ===== */

/* Breakpoints officiels (var() est impossible dans une media query — valeurs à recopier telles quelles) :
     29.9375em = 479px  (mobile étroit : modales plein écran)
     36em      = 576px  (mobile : modales, pieds d'actions)
     38.75em   = 620px  (mobile ≤ 620px : seuil principal — formulaires, grilles, navs)
     48em      = 768px  (tablette portrait)
     62em      = 992px  (tablette paysage : contenus demi-largeur → pleine largeur)
     75em      = 1200px (desktop : header/hero)
   Tout autre seuil est une exception à justifier dans le fichier concerné. */

:root {
    /* Couleurs de marque Visa */
    --color-primary: #1434CB;
    --color-primary-rgb: 20, 52, 203; /* canaux RGB de --color-primary (pour rgba() à opacité variable) */
    --color-primary-hover: #0f28a3;
    --color-primary-light: #EFF8FF;
    --color-primary-tint: #A3D4FF; /* teinte claire OPAQUE (spec Figma) — icônes duoton (--icon-bg) : une
       rgba() semi-transparente laisserait transparaître les tracés dessinés dessous (chevauchements de tracés). */
    --color-secondary: #0097d8;
    --color-secondary-rgb: 0, 151, 216; /* canaux RGB de --color-secondary pour rgba() à opacité variable */
    --color-secondary-hover: #007bb5;
    --color-secondary-light: #f0f8fd;
    --color-footer-link: #BAE3F5;
    /* Couleurs de page */
    --color-hero-bg: var(--color-bg-light); /* alias : fond héros = fond neutre commun (#F7F7F7) */
    --color-table-bg: #f9f9f9; /* fond de tableau récapitulatif */
    --color-bg-subtle: var(--color-bg-light); /* alias : fond de carte neutre (doc-group…) = #F7F7F7 */
    --color-page-bg-alt: #EDEDED; /* fond de page alternatif (FAQ, Télécharger — colonne intro) */
    --color-divider: #DBE1E2; /* filet séparateur fin (FAQ, Télécharger) */
    --color-border-medium: #C6C6C6; /* séparateur plus marqué que --color-border (Contact, boutons d'action) */
    /* Couleurs de texte maquette (Open Sans) */
    --color-text-body: #3D515A; /* texte courant des encarts/intros/contenus CMS — 8.2:1 sur blanc */
    --color-heading: #3C4D6A; /* titres h2, triggers FAQ, boutons notice — bleu ardoise */
    --color-label: #596981; /* libellés de champ (.field__label), textes d'aide MFA */
    --color-text-meta: #71787E; /* texte méta secondaire (ex. .claim-declaration__recap-meta) */
    --color-text-placeholder: var(--color-disabled-border); /* alias : même gris #999 (Dusty Gray, spec Figma) — réservé au placeholder natif ::placeholder (exempté WCAG 1.4.3), PAS à du texte visible réel */
    --color-text-hint: #707070; /* variante accessible de --color-text-placeholder pour du texte visible (span, etc.) : ~4.8:1 sur --color-input-bg (#FCFCFC), au plus proche du gris Figma tout en passant WCAG AA — ex. .form__file-picker-name */
    --color-recap-question-mobile: #13223C; /* .claim-declaration__recap-question en mobile (≤ 620px) */
    --color-linked-lead: #111827; /* .page-card__lead (Process/LinkedClaimAttachments) */
    /* Couleurs WCAG AA — texte d'erreur et texte secondaire.
       --color-error (#B90000, Default/variables.css) = 6.9:1 sur blanc → conforme WCAG AA pour le texte ;
       --color-error-text reste un alias sémantique (point d'entrée unique pour le texte d'erreur).
       --color-text-muted (#6c757d) = 4.13:1 sur blanc et 3.72:1 sur --color-hero-bg (#F7F7F7) → échoue WCAG AA.
       --color-text-muted-hero garantit un ratio ≥ 4.5:1 sur blanc ET sur fond héros (luminance relative sRGB,
       formule WCAG 2.x) :
         #5a6268 (90,98,104)  → 5.79:1 sur #F7F7F7, 6.21:1 sur blanc  → PASSE dans les deux contextes
         #68758B (104,117,139) → 4.35:1 sur #F7F7F7, 4.66:1 sur blanc → ÉCHOUE sur fond héros (< 4.5:1)
       #68758B (candidat créé pour tokeniser auth-layout.css/register.css) est donc écarté ; #5a6268
       (déjà utilisé ailleurs sous l'ancien nom --color-text-muted-on-hero) est conservé comme valeur unique. */
    --color-error-text: var(--color-error); /* texte d'erreur — 6.9:1 sur blanc */
    --color-text-muted-hero: #5a6268; /* 5.79:1 sur #F7F7F7 (--color-hero-bg), 6.21:1 sur blanc — WCAG AA */
    --color-text-label: #706D6E; /* libellés question/fieldset — gris chaud 5.1:1 sur blanc */
    /* Header */
    --color-user-menu-bg: var(--color-heading); /* alias : fond du menu utilisateur = bleu ardoise */
    /* Boutons (buttons.css) — valeurs propres au composant, distinctes de --color-primary-hover/-light
       (utilisées ailleurs : header, modales, callout…) pour ne pas impacter ces usages partagés. */
    --color-btn-primary-hover: #0E2594; /* survol .btn--primary */
    --color-btn-secondary-bg: #FAFCFF; /* fond .btn--secondary au repos (≈ 2 % de --color-primary sur blanc) */
    --color-btn-secondary-hover-bg: #F0F5FF; /* survol .btn--secondary (fond) */
    --color-btn-error: #D62626; /* .btn--error : fond (primary) / texte+bordure (secondary) — 5.04:1 sur blanc, WCAG AA */
    --color-btn-error-hover: #981B1B; /* survol .btn--error.btn--primary — même ratio d'assombrissement (~0.71) que --color-primary → --color-btn-primary-hover */
    --color-btn-secondary-error-bg: #FFEDED; /* fond .btn--error.btn--secondary */
    /* Icônes SVG (sprite) */
    --color-icon-gold: #D8C083; /* glyphe des cartes accueil */
    --color-icon-danger: var(--color-error); /* alias : avertissement danger = rouge d'erreur (#B90000) */
    --color-icon-warning: #E16D01; /* avertissement : attention */
    /* Fond pâle succès — cercle d'icône modale (dlg-success) ET fond .callout--success.
       Dérivé de --color-success (#035E1D, Default/variables.css) : c'est ce vert qui sert de
       primitif « texte/icône/bordure succès » dans tout Visa (register, verify-mfa, my-claim,
       callout border, icône de la modale succès) — --color-status-success-bg (#059C2F) est un
       token distinct réservé aux statuts de document, pas à ce rôle.
       Opacité choisie par comparaison visuelle : blend sur blanc de rgba(3,94,29,.07) = rgb(237,244,239),
       la meilleure approximation de l'ancien --color-success-light (#edf7f0 = rgb(237,247,240),
       écart ≤ 3 par canal) — plus fidèle que .05 (rgb(240,245,241), écart ≤ 3 mais moins bon sur R). */
    --color-success-light: rgba(var(--color-success-rgb), 0.07);
    --color-error-light: rgba(var(--color-error-rgb), 0.05); /* #B900000D — fond du cercle d'icône (dlg-upload-error) */
    --color-status-success-bg: #059C2F; /* statut document : complété */
    --color-status-success-fg: #00B22D;
    --color-status-pending-bg: #6480C8; /* statut document : en attente */
    --color-status-pending-fg: var(--color-heading); /* alias : bleu ardoise */
    --color-status-uploaded-bg: #005CB3; /* statut document : fichier uploadé */
    --color-status-uploaded-fg: #0066CC;
    --color-radio-accent: var(--color-status-uploaded-fg); /* alias : accent-color des radios PPE (person-identity) — #0066CC */
    /* Callout (callout.css) — fonds à opacité variable sur bordure saturée.
       --color-callout-success-bg fusionné dans --color-success-light (ci-dessus, même rôle). */
    --color-callout-warning-bg: #FDF7F2;
    --color-callout-warning-border: #E18801;
    --color-callout-info-bg: #2490EE0D; /* #2490EE à 5 % */
    --color-outcome-box-bg: #F7F8F9; /* fond des encarts d'action de Claim/DetailsVisa (claim-outcome__box, maquette Figma « Body BG ») */
    --color-icon-badge-bg: #E9EAEB; /* fond gris pâle des icônes rondes duoton (claim-outcome__step-icon) */
    --color-table-border: #DBE1E2; /* bordures/lignes/colonnes des tableaux (claims-list.css) */
    --color-table-header-bg: #F8FAFB; /* fond des <th> (claims-list.css) */
    --color-exchange-icon: #0070B9; /* icône enveloppe + lien «Consulter» (colonne Mes échanges) */
    --color-exchange-icon-hover: #095C9B; /* survol */
    --color-exchange-message-link: #0066CC; /* message/pièce jointe cliquable (Exchange/myExchange, maquette Figma) */
    --color-exchange-message-text: #021E4C; /* message non cliquable (Exchange/myExchange, maquette Figma) */
    --color-exchange-empty-icon: #444A60; /* icône "aucun échange" (Exchange/myExchange, maquette Figma) */
    --color-claims-empty-link: #2972C8; /* lien "déclarer un sinistre" de l'état vide (Claim/ClaimsList, maquette Figma) */
    --color-callout-doc-sent-bg: #E8FAE145; /* #E8FAE1 à ~27 % (0x45/255) — callout--doc-sent */
    /* Statuts métier des sinistres (claims-list.css) */
    --color-claim-initial: #B2C2CB; /* gris — création/constitution/déclaration/annulé */
    --color-claim-ongoing: #2490EE; /* bleu — en cours (pastille claim-status--ongoing) */
    --color-claim-waiting: var(--color-callout-warning-border); /* orange #E18801 — en attente de documents */
    --color-claim-contact: var(--color-callout-warning-border); /* orange #E18801 — nous contacter */
    --color-claim-accepted: var(--color-success2); /* vert #047D26 — indemnisé / en cours d'indemnisation */
    /* Drapeaux du sélecteur téléphone (phone-input.css) */
    --color-flag-bg: #dbdbdb; /* fond derrière le sprite */
    --color-flag-border: #888; /* liseré 1px */
    /* Widget tiers BotDetect (contact.css) — couleur de leur lien de licence, pas du design system */
    --color-captcha-license: #606060;
    /* Voiles */
    --color-overlay-dark: rgba(0, 0, 0, 0.7); /* #000000B2 — texte d'aide MFA, .page-card__lead (noir 70 %) */
    --color-hover-overlay: rgba(0, 0, 0, 0.07); /* survol des boutons « fermer » sur fond coloré (callout) */
    /* Ombres */
    --shadow-card: 0 0.4rem 2rem rgba(0, 0, 0, 0.08); /* carte standard */
    --shadow-card-hover: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12); /* carte au survol */
    --shadow-card-subtle: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.08); /* encarts légers */
    --shadow-tooltip: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.18); /* bulles, popovers */
    --shadow-popover: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.12); /* menus contextuels (actions fichier) */
    --shadow-modal: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.3); /* .modal-content */
    --shadow-document: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.1), 0 0.4rem 1.4rem rgba(0, 0, 0, 0.1); /* carte .document-item */
    --shadow-sticky: 0 -0.1rem 0.7rem rgba(0, 0, 0, 0.05); /* barre d'actions collante (footer-actions) */
    --shadow-lang-card: 0 0.1875rem 0.875rem 0 rgba(216, 221, 234, 0.75); /* boutons langue de la notice — 0 3px 14px #D8DDEA 75 % */
    --shadow-focus-ring: 0 0 0 0.1875rem rgba(var(--color-primary-rgb), 0.18); /* halo 3px des étapes sinistre (my-claim) */
    /* Overlays : --color-overlay-bg est défini dans Default/css/base/variables.css (partagé avec Default/layout/header.css) */
    /* Typographie — surcharge les piles système/tailles de Default/css/base/variables.css pour
       la marque Visa (polices auto-hébergées, cf. base/typography.css). N'affecte pas les
       autres marques (Chubb/Default), qui ne chargent pas VisaCSS. */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-family-semibold: var(--font-family-base); /* alias : Inter variable couvre 400-700 */
    --font-family-btn: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* pile Open Sans primitive : boutons .btn, labels, consentement, modales, h2 */
    --font-family-footer: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* pile Source Sans Pro primitive : footer (Default/css/layout/footer.css) + champs */
    /* Échelle typographique Visa — remplace intégralement l'échelle héritée de Default/variables.css
       (xs 1.2rem/sm 1.3rem/md 1.5rem/lg 1.6rem), incohérente sous Visa car --font-size-base y est
       redéfini à 1rem alors que Default vaut 1.4rem : « sm » (petit texte) s'y retrouvait PLUS GRAND
       que le texte courant. Échelle finale (1rem = 16px) : xs 12 < sm 14 < base 16 < md 18 < lg 20 < xl 32. */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px (1rem = 16px) — taille de base des textes, remplace 1.4rem (22.4px) */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-h2: 1.5rem; /* 24px — titres de modales et d'encarts */
    --font-size-hero: clamp(2.4rem, 3vw, 3.6rem); /* titre principal des pages auth */
    /* Géométrie */
    --border-radius-lg: 1.2rem;
    --page-card-max-width-wide: 71.25rem; /* 1140px (1rem = 16px) — variante large de .page-card__inner (ex. ClaimsList) */
    --border-radius-sm2: 0.375rem; /* 6px — trigger .form__data-protection (spec Figma) */
    --size-progress-circle: 1.625rem; /* 26px (1rem = 16px) — diamètre du cercle de progression (upload-summary) */
    /* Modales (modal.css) */
    --modal-width: 35.7rem; /* largeur max .modal-dialog (571px) */
    --modal-padding: var(--spacing-sm3); /* header/body/footer — 1.4rem */
    --modal-padding-sm: var(--spacing-sm4); /* idem ≤ 576px — 1.1rem */
    /* Indicateur d'étapes (register-steps, register.css) — couleurs dédiées maquette */
    --color-step-gray: #BDC4C7; /* cercle "à faire" / anneau intérieur du step courant */
    --color-step-line: #F2F2F2; /* trait de liaison entre les cercles */
    /* Champs de formulaire (field.css / forms.css) — valeurs maquette dédiées, distinctes des
       tokens partagés (--color-border, --color-text-primary, --font-family-btn/-footer…). */
    --font-family-label: var(--font-family-btn); /* alias Open Sans : .field__label, intros, encarts, modales */
    --font-family-consent: var(--font-family-btn); /* alias Open Sans : .register-consent__text (register.css) */
    --font-size-label: var(--font-size-sm); /* alias : 14px, même valeur que --font-size-sm */
    --font-family-input: var(--font-family-footer); /* alias Source Sans Pro : .form-control */
    --font-size-input: var(--font-size-md); /* alias : 18px, même valeur que --font-size-md */
    --color-input-bg: #FCFCFC; /* fond .form-control */
    --color-input-border: #7D898D; /* bordure .form-control (repos) */
    --color-input-text: #303340; /* texte saisi .form-control */
    --color-input-icon: var(--color-heading); /* alias : icône œil (.field__toggle) dans .form-control */
    /* Transitions */
    --transition-page-fade: 0.5s ease; /* fondu d'entrée des pages auth */
    --transition-accordion: 0.3s ease-out; /* dépliage grid-template-rows (accordion, document-item, login « en savoir plus ») */
    --modal-anim-duration: 300ms; /* durée animation ouverture/fermeture modales — doit rester en sync avec MODAL_ANIM_MS dans modal-manager.js */
}