/* ===== 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-text-black-rgb: 0, 0, 0; /* canaux RGB du noir (Figma « Black 70% » : rgba(var(--color-text-black-rgb), .7)) */
    --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-primary-disabled-bg: #F0F0F0; /* fond .btn--primary désactivé (maquette Figma « Disabled ») */
    --btn-faded-disabled-opacity: 0.6; /* variante .btn--faded désactivée : fond primaire à 60 % d'opacité (maquette Figma « Primary / Disabled », #1434CB 60 %) */
    --color-btn-primary-disabled-text: #999999; /* texte .btn--primary désactivé (Figma) — composant inactif : exempté du contraste WCAG 1.4.3 */
    --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 */
}

/* ===== Styles typographiques globaux ===== */

/* Police Inter (variable, poids 400-700 — couvre --font-weight-normal/medium/semibold/bold).
   Auto-hébergée (cf. Content/themes/Visa/fonts/) plutôt que Google Fonts CDN : évite une
   dépendance réseau externe (RGPD — pas d'IP visiteur envoyée à un tiers) et une requête
   supplémentaire, cohérent avec le précédent déjà établi (SourceSansPro auto-hébergée dans
   Visa2017/fonts/). Sous-ensemble latin (couvre les caractères accentués français). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/Content/themes/Visa/fonts/Inter-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Police Open Sans (variable, poids 400-700) — boutons/liens primary et secondary
   uniquement (voir --font-family-btn, Visa/css/base/variables.css), auto-hébergée pour
   les mêmes raisons que Inter ci-dessus (pas de dépendance Google Fonts). */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/Content/themes/Visa/fonts/OpenSans-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Police Source Sans Pro (poids 400 uniquement — seul poids utilisé actuellement) — footer
   uniquement (voir --font-family-footer, Visa/css/base/variables.css). Auto-hébergée pour les
   mêmes raisons que ci-dessus. L'ancienne référence dans Visa2017/less/_variables.less pointe
   vers des .ttf qui n'existent plus dans le repo (référence morte) — nouveau fichier ici. */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/Content/themes/Visa/fonts/SourceSansPro-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1 {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xl); /* 32px (1rem = 16px, cf. Default/css/base/variables.css) */
}

h2 {
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    font-size: var(--font-size-base); /* 16px (1rem = 16px) */
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);

    & p {
        margin: 0;
    }
}

/* Liens texte sans classe (contenu CMS, bannières…) — underline par défaut, retiré au survol.
   Les composants avec classe (.btn--link, nav, footer…) conservent leur propre style ;
   les contextes à fond sombre (footer) re-déclarent leur couleur avec une spécificité plus haute. */
a:not([class]) {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Survol réservé aux pointeurs qui survolent (sur tactile, :hover reste « collé » après un tap). */
@media (hover: hover) {
    a:not([class]):hover {
        text-decoration: none;
    }
}

/* Header Visa — les styles communs sont dans Default/css/layout/header.css */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm2);
    background-color: var(--color-info-bg);

    /* Rogne le contenu pendant la réduction de hauteur à la fermeture (animée en JS : info-banner.js). */
    overflow: hidden;

    .info-banner__content {
        flex: 1;
        min-width: 0;
    }

    .info-banner__close {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xs4);
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }

    .info-banner__close-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Reste à 16px (12pt) aussi en dessous de 50em : le thème Default repasse à --font-size-sm (14px = 10,5pt) en mobile,
       ce que le scan SortSite signale (texte < 12pt). Chargé après Default : cette règle l'emporte à spécificité égale. */
    font-size: var(--font-size-base);

    /* 1200px ÷ 16 = 75em */
    @media (max-width: 75em) {
        padding: var(--spacing-sm2) var(--spacing-lg2);
    }

    /* 620px ÷ 16 = 38.75em */
    @media (max-width: 38.75em) {
        padding: var(--spacing-sm2) var(--layout-gutter-x-sm);
    }
}
/* ===== Main de page ===== */

#content {
    padding: 0 var(--spacing-sm4);
}

/* GTM noscript iframe — caché visuellement, la requête de tracking passe quand même */
.gtm-noscript-iframe {
    display: none;
    visibility: hidden;
}

/* Sprite SVG — conteneur des <symbol>, jamais affiché */
#svg-sprites { display: none; }

/* Widget Kiamo — z-index et mise en page de la liste de messages */
#kiamo-chat { z-index: 10003; }
#kc-message-list { width: 100%; }

/* Bandeau TrustArc — ancré en bas de page, au-dessus de tout */
#consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; }

/* ===== Mise en page partagée : pages d'authentification (connexion, inscription, erreur) =====
   Layout 2 colonnes (formulaire + photo) et footer communs aux pages LogOn et
   RegisterUnknownCustomerNew ; colonnes, photo et titre aussi réutilisés par Error/Index
   (le conteneur .error-page est défini dans error.css : pas de fondu, pas de JS). Les styles propres à chaque page restent dans
   login.css / register.css. */

/* ----- Conteneur principal ----- */
/* position/flex/background/overflow/opacity/transition identiques sur les deux pages.
   Les différences (min-height pour login, align-items pour register, modificateur
   visible spécifique) restent dans login.css / register.css. */
.login,
.register {
    position: relative;
    flex: 1;
    display: flex;
    background: var(--color-hero-bg);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-page-fade);
}

/* ----- Colonne gauche : formulaire ----- */
/* flex-grow:1 => quand la photo passe en display:none (≤75em), cette colonne
   reprend automatiquement toute la largeur. */
.login__inner,
.register__inner,
.error-page__inner {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl5) var(--spacing-xxl);

    @media (max-width: 75em) {
        padding: var(--spacing-xxl) var(--spacing-lg2);
    }

    @media (max-width: 48em) {
        padding: var(--spacing-xl4) var(--spacing-lg);
    }

    @media (max-width: 38.75em) {
        padding: var(--spacing-xl3) var(--spacing-md2);
    }
}

/* ----- Panneau formulaire ----- */
/* Largeur max par défaut (442px) posée dans login.css / register.css respectivement.
   Seul le dépassement responsive (70rem, ≤75em où l'inner reprend 100% de la page) est partagé. */
.login__panel,
.register__panel,
.error-page__panel {
    width: 100%;

    @media (max-width: 75em) {
        max-width: 70rem;
    }
}

/* ----- Colonne droite : photo en background-image ----- */
/* En background plutôt qu'en <img> => non téléchargée quand display:none (mobile).
   register__photo ajoute aspect-ratio et align-self dans register.css. */
.login__photo,
.register__photo,
.error-page__photo {
    flex: 1 1 50%;
    min-width: 0;
    background-color: var(--color-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Charge l'image uniquement au-dessus de 75em : display:none seul ne bloque pas le téléchargement. */
    @media (min-width: 75.0625em) {
        background-image: url('/Content/themes/Visa/images/img-logon.webp');
    }

    @media (max-width: 75em) {
        display: none;
    }
}

/* ----- Titre principal (h1) ----- */
.login__title,
.register__title,
.error-page__title {
    line-height: 1.2;
    margin: 0 0 var(--spacing-lg2);

    @media (max-width: 48em) {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    @media (max-width: 38.75em) {
        font-size: var(--font-size-xl);
        margin: 0 0 var(--spacing-md3);
    }
}

/* ===== Footer d'authentification ===== */
/* Barre identique pour « Pas de compte ? » (connexion) et « Déjà un compte ? » (inscription).
   Le groupe occupe 50 % de la largeur pour s'aligner sous le formulaire ; quand la photo
   disparaît (≤75em), il reprend 100 % automatiquement. */
.login-footer,
.register-footer {
    background: var(--color-white);
    border-top: 0.1rem solid var(--color-border);
    padding: var(--spacing-md) 0;
}

.login-footer__inner,
.register-footer__inner {
    display: flex;
}

.login-footer__group,
.register-footer__group {
    flex: 0 0 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md2);
    padding: 0 var(--spacing-xxl);

    @media (max-width: 75em) {
        flex-basis: 100%;
        padding: 0 var(--spacing-lg2);
    }

    @media (max-width: 38.75em) {
        flex-direction: column;
        gap: var(--spacing-sm2);
        padding: 0 var(--spacing-md2);
    }
}

.login-footer__text,
.register-footer__text {
    color: var(--color-text-muted-hero);
}

@media (max-width: 38.75em) {
    .login-footer,
    .register-footer {
        padding: var(--spacing-sm3) 0;
    }

    .login-footer__group .btn,
    .register-footer__group .btn {
        width: 100%;
    }
}

/* ===================================================================
   Composant générique : page avec carte blanche centrée
   Bloc    : .page-card  — section plein fond gris (flex: 1 pour occuper la hauteur disponible)
   Éléments: __inner     — conteneur max-width
             __body      — carte blanche (fond, ombre, border-radius, padding)
             __title     — titre H1 en couleur primaire
   Utilisé par : Root/Contact, …
   =================================================================== */

.page-card {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--color-bg-light);
    padding: var(--spacing-xxl) var(--layout-gutter-x);
}

/* Priorité sur le user-agent : display:flex surcharge sinon [hidden] */
.page-card[hidden] {
    display: none;
}

.page-card__inner {
    width: 100%;
    max-width: 56.5625rem; /* 905px (1rem = 16px) — largeur de carte par défaut (maquette) */
}

.page-card__body {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-md2) var(--spacing-md3);
}

/* Texte d'introduction sous le titre (CardChoice, FillInOccurenceDate, Telecharger…) */
.page-card__lead {
    font-size: var(--font-size-base);
    color: var(--color-overlay-dark); /* #000000B2 (noir 70 %) */
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--spacing-lg);
}

/* Titre de section (h2) en couleur primaire (ClaimAttachmentsNextStep, LinkedClaimAttachments…) */
.page-card__section-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm);
}

/* Règle globale : aucun champ (input/select/textarea, .form-control) ne dépasse la
   moitié de la largeur de la carte, quelle que soit la page utilisant ce layout.
   Contraint .field__control (le wrapper), pas .form-control directement : le chevron
   des select (.field__chevron) est positionné en absolu par rapport à ce wrapper — si
   seul le form-control rétrécissait, le chevron resterait collé au bord du wrapper
   plein, donc visuellement détaché de la boîte réellement rétrécie. */
.page-card__inner .field__control {
    max-width: 50%;

    /* 620px ÷ 16 = 38.75em — même seuil que la bascule mobile de .page-card ci-dessous :
       un champ à 50 % d'un écran déjà étroit devient illisible, il doit remplir la carte. */
    @media (max-width: 38.75em) {
        max-width: 100%;
    }
}

@media (max-width: 38.75em) {
    /* Carte plein écran : la section perd son gutter latéral pour que
       page-card__body puisse aller bord à bord. Le body reprend lui-même
       le gutter pour l'indentation du contenu. */
    .page-card {
        padding: var(--spacing-lg2) 0;
    }

    .page-card__body {
        padding: var(--spacing-lg2) var(--layout-gutter-x-sm);
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- Modificateur : demi-largeur — max-width 50 % desktop, 100 % mobile (SavePersonIdentity) --- */
.page-card--half {
    & .page-card__inner {
        max-width: 50%;
    }

    @media (max-width: 62em) {
        & .page-card__inner {
            max-width: 100%;
        }
    }
}

/* --- Modificateur : max-width 1140px (plus large que le défaut 905px) — ClaimsList --- */
.page-card--wide {
    & .page-card__inner {
        max-width: var(--page-card-max-width-wide);
    }
}

/* --- Modificateur : max-width 64rem (1024px, plus large que le défaut 905px), plein écran
   mobile (MFA ; CardChoice/CardInformation le réduisent à 905px via .page-card--bin-card) --- */
.page-card--narrow {    @media (max-width: 48em) {
        padding: var(--spacing-lg2) var(--layout-gutter-x-sm);
    }

    @media (max-width: 38.75em) {
        padding: 0;
    }

    & .page-card__inner {
        max-width: 64rem;
    }

    & .page-card__body {
        @media (max-width: 38.75em) {
            padding: var(--spacing-lg2) var(--layout-gutter-x-sm);
            border-radius: 0;
            box-shadow: none;
        }
    }

    & .page-card__title {
        margin-bottom: var(--spacing-lg2);

        @media (max-width: 48em) {
            font-size: clamp(2rem, 4vw, 2.8rem);
        }

        @media (max-width: 38.75em) {
            font-size: var(--font-size-xl);
            margin-bottom: var(--spacing-md3);
        }
    }
}

/* ===================================================================
   Layout deux colonnes — partagé entre FAQ et Télécharger
   Grille : colonne intro (28 %, plancher 16 rem) + colonne contenu (1fr).

   Nouveaux usages : .two-col-layout
   Alias rétrocompatibles : .faq-layout, .download-layout
   (les vues existantes n'ont pas besoin d'être modifiées)
   =================================================================== */

.two-col-layout,
.faq-layout,
.download-layout {
    width: 100%;
    max-width: var(--content-max-width);
    display: grid;
    grid-template-columns: minmax(16rem, 22.5rem) 1fr;
    gap: var(--spacing-xl5);
    align-items: start;
}

/* Colonne intro (contenu CMS) : Open Sans 16px, gris ardoise */
.two-col-layout__intro,
.faq-layout__intro,
.download-layout__intro {
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    color: var(--color-text-body);
}

/* Titre de la colonne intro : grand, noir, graisse normale (maquette) — prime sur le h1
   global (typography.css : primaire 32px) et sur .page-card__title. h2 inclus : le CMS
   peut générer un <h2> pour le titre de cellule (FAQ). Règle unique pour les 3 pages
   (ex-doublon faq.css / telecharger.css). */
.two-col-layout__intro h1,
.two-col-layout__intro h2,
.faq-layout__intro h1,
.faq-layout__intro h2,
.download-layout__intro h1 {
    font-size: 3rem; /* 48px (1rem = 16px) */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-dark);
    line-height: 1.2;
    margin: 0 0 var(--spacing-lg);
}

/* Filet séparateur sous le titre de l'intro */
.two-col-layout__divider,
.faq-layout__divider,
.download-layout__divider {
    width: 50%;
    border: none;
    border-top: 0.0625rem solid var(--color-divider); /* 1px */
    margin: var(--spacing-md) 0;
}

/* Carte de contenu : sans ombre, même typographie que l'intro */
.two-col-layout .page-card__body,
.faq-layout .page-card__body,
.download-layout .page-card__body {
    box-shadow: none;
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    color: var(--color-text-body);
}

/* Liens du contenu CMS : pas de soulignement par défaut, souligné au survol
   (inverse de la règle globale a:not([class]) — typography.css). Spécificité
   (0,2,1) : prime sur la règle globale (0,1,1) quel que soit l'ordre des bundles. */
.two-col-layout .page-card__body a,
.faq-layout .page-card__body a,
.download-layout .page-card__body a {
    text-decoration: none;
}

.two-col-layout .page-card__body a:hover,
.faq-layout .page-card__body a:hover,
.download-layout .page-card__body a:hover {
    text-decoration: underline;
}

/* ===================================================================
   Responsive — tablette (≤ 768 px)
   Passe en colonne unique ; carte pleine largeur sans bord arrondi.
   =================================================================== */
@media (max-width: 48em) {
    .two-col-layout,
    .faq-layout,
    .download-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .two-col-layout__intro,
    .faq-layout__intro,
    .download-layout__intro {
        padding: 0 var(--layout-gutter-x-sm) var(--spacing-lg2);
    }

    .two-col-layout .page-card__body,
    .faq-layout .page-card__body,
    .download-layout .page-card__body {
        border-radius: 0;
        box-shadow: none;
        padding-left: var(--layout-gutter-x-sm);
        padding-right: var(--layout-gutter-x-sm);
    }
}

/* ===================================================================
   Responsive — mobile (≤ 620 px)
   =================================================================== */
@media (max-width: 38.75em) {
    .two-col-layout__intro,
    .faq-layout__intro,
    .download-layout__intro {
        padding-left: var(--layout-gutter-x-sm);
        padding-right: var(--layout-gutter-x-sm);
    }
}

/* ===== Design System — Boutons =====
   BEM : .btn (base) + .btn--{variante} + .btn--{modificateur}

   Variantes :
     .btn--primary    → action principale (fond primaire)
     .btn--secondary  → action secondaire (contour primaire)
     .btn--link       → lien-bouton (texte uniquement)

   Modificateurs de taille (hauteur fixe + centrage flex, comme la base) :
     .btn--block      → pleine largeur
     .btn--sm         → taille compacte (modales, listes) — 2.1rem
     .btn--md         → taille intermédiaire (actions secondaires en liste) — 3rem
     .btn--lg         → taille large (footers, actions principales de page) — 3.5rem
     (base, sans modificateur de taille) → 2.75rem — action principale de page (CTA de tunnel)
     Rayon (0.375rem), bordure (0.0625rem) et graisse (bold) sont hérités de la base par toutes
     les tailles — une seule source de vérité, pas de redéfinition par taille.

   Modificateur de variante :
     .btn--error      → action destructive/critique, se combine avec .btn--primary ou .btn--secondary
                         (ex. class="btn btn--primary btn--error")

   États :
     :hover                  → géré par variante (voir .btn--primary / .btn--secondary / .btn--error)
     :focus-visible          → anneau de focus uniforme, géré globalement (Default/css/base/utilities.css)
     :disabled               → bloqué (pointer-events: none), rendu neutre gris (--color-disabled)
     [aria-disabled="true"]  → désactivé sémantique (reste cliquable, relance la validation), même rendu que :disabled

   Toutes les pages/vues Visa utilisent ce système — pas de classe legacy .btn-primary/
   .btn-secondary conservée (migré/nettoyé — cf. mémoire projet_button_states_redesign).
*/

/* ===== Base =====
   Dimensions converties depuis la maquette (1rem = 16px, cf. Default/css/base/variables.css) :
   padding 24px → 1.5rem ; hauteur 44px → 2.75rem ;
   rayon 6px → 0.375rem ; bordure 1px → 0.0625rem ; police 16px → 1rem. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs3);
    padding: 0 var(--spacing-md);
    height: var(--control-height);
    font-family: var(--font-family-btn);
    font-size: var(--font-size-base); /* explicite, pas d'hériter de body — nécessaire hors du flux normal (ex. modale) */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border-radius: 0.375rem;
    border: 0.0625rem solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);

    &:active:not(:disabled):not([aria-disabled="true"]) {
        transform: scale(0.98);
    }
}

/* ===== Modificateurs de mise en forme ===== */
.btn--block {
    display: flex;
    width: 100%;
}

.btn--sm {
    padding: 0 var(--spacing-xs6);
    height: 2.1rem;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.btn--md {
    padding: 0 var(--spacing-md);
    height: 3rem;
    font-size: var(--font-size-base);
    line-height: 1;
}

.btn--lg {
    padding: 0 var(--spacing-lg);
    height: 3.5rem;
    font-size: var(--font-size-base);
    line-height: 1;
}

/* ===== Modificateur — action destructive/critique =====
   Se combine avec .btn--primary ou .btn--secondary (ex. bouton de suppression/annulation).
   Couleurs dédiées --color-btn-error* (Visa/css/base/variables.css) — distinctes de
   --color-error/--color-error-text utilisés ailleurs (formulaires, callouts…).
   ⚠️ Doit être défini AVANT .btn--primary / .btn--secondary : à spécificité égale,
   ceci garantit que leur état :disabled (gris neutre) reste prioritaire sur l'erreur. */
.btn--error {
    &.btn--primary {
        background: var(--color-btn-error);
        border-color: var(--color-btn-error);

        &:not(:disabled):not([aria-disabled="true"]):hover {
            background: var(--color-btn-error-hover);
            border-color: var(--color-btn-error-hover);
        }
    }

    &.btn--secondary {
        background: var(--color-btn-secondary-error-bg);
        color: var(--color-btn-error);
        border-color: var(--color-btn-error);

        &:not(:disabled):not([aria-disabled="true"]):hover {
            background: var(--color-error-bg-subtle);
        }
    }
}

/* ===== Variante primaire — action principale (fond rempli) ===== */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);

    &:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--color-btn-primary-hover);
        border-color: var(--color-btn-primary-hover);
    }

    /* État désactivé = maquette Figma « Primary Button / Disabled » : fond #F0F0F0, texte #999999
       (Open Sans 700 16px, 44px de haut, rayon 6px, padding 24px — hérités de .btn). */
    &:disabled,
    &[aria-disabled="true"] {
        cursor: not-allowed;
        background: var(--color-btn-primary-disabled-bg);
        border-color: var(--color-btn-primary-disabled-bg);
        color: var(--color-btn-primary-disabled-text);
    }

    &:disabled {
        pointer-events: none;
    }
}

/* ===== Variante désactivée « estompée » — à combiner avec .btn--primary (class="btn btn--primary btn--faded") =====
   Maquette Figma « Primary / Disabled » (Suivant, Réinitialiser le mot de passe, Envoyer mes documents) : le bouton
   garde son fond primaire (#1434CB) et son texte blanc, estompés à 60 % d'opacité (Open Sans 700 16px, 44px de haut,
   rayon 6px, padding 24px — hérités de .btn). Remplace le gris neutre de .btn--primary:disabled pour ces boutons. */
.btn--primary.btn--faded {
    &:disabled,
    &[aria-disabled="true"] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
        opacity: var(--btn-faded-disabled-opacity);
    }
}

/* ===== Variante secondaire — action alternative (contour) =====
   Fond par défaut légèrement teinté (≈ 2 % de --color-primary sur blanc, maquette #FAFCFF) :
   --color-btn-secondary-bg (Visa/css/base/variables.css). */
.btn--secondary {
    background: var(--color-btn-secondary-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);

    &:not(:disabled):not([aria-disabled="true"]):hover {
        background: var(--color-btn-secondary-hover-bg);
        color: var(--color-btn-primary-hover); /* #0E2594 */
        border-color: var(--color-btn-primary-hover);
    }

    &:disabled,
    &[aria-disabled="true"] {
        cursor: not-allowed;
        background: var(--color-white);
        border-color: var(--color-disabled-border);
        color: var(--color-disabled);
    }

    &:disabled {
        pointer-events: none;
    }
}

/* ===== Lien-bouton ===== */
/* Action de style « lien » : « Mot de passe oublié », « Retour à la connexion »… */
.btn--link {
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family-btn);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition: none;

    &:hover {
        text-decoration: underline;
    }

    &:active {
        transform: none;
    }
}

/* Design inversé de .btn--link : souligné par défaut, non souligné au survol
   (ex. cartes .contact-action). Se combine avec .btn--link (class="btn btn--link btn--underline"). */
.btn--underline {
    text-decoration: underline;

    /* Survol réservé aux pointeurs qui survolent (sur tactile, :hover reste « collé » après un tap). */
    @media (hover: hover) {
        &:hover {
            text-decoration: none;
        }
    }
}

/* ===== .answer-card — bouton « carte » de réponse/choix =====
   Design de référence : Root/Notice (boutons de langue). Repris par
   Process/ClaimDeclarationGlobalWarranty (.claim-warranty__answer-btn),
   Process/ClaimDeclaration (.claim-declaration__answer-btn, formats BIT/LIST simple) et
   Process/CreerSinistreLie (.creer-sinistre-lie__option-btn) — chaque page ne garde que sa
   propre largeur/disposition (voir notice.css / claim-declaration-global-warranty.css /
   claim-declaration.css / creer-sinistre-lie.css). */
.answer-card {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm); /* 16px */
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    background: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md); /* 8px */
    box-shadow: var(--shadow-lang-card); /* 0 3px 14px 0 #D8DDEA 75% */
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);

    &:hover {
        background: var(--color-btn-secondary-hover-bg);
        color: var(--color-btn-primary-hover); /* #0E2594 */
        box-shadow: var(--shadow-card-hover);
    }
}

/* Libellé du bouton (span interne) — un seul point de contrôle de line-height, partagé par
   toutes les pages listées ci-dessus. */
.answer-card__title {
    line-height: var(--line-height-snug);
}

/* Aperçu de description (max 80 caractères, cf. _AnswerCard.cshtml) sous le titre — le lien
   « voir plus » (.answer-card__see-more) termine ce texte en ligne (« … voir plus »). */
.answer-card__desc {
    margin: 0;
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-xs); /* 12px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body); /* #3D515A */
}

/* Lien « voir plus » inline en fin de .answer-card__desc — pas de chrome bouton, pas de
   soulignement par défaut (souligné au survol/focus, inverse de .radio-info-link). */
.answer-card__see-more {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:focus-visible {
        text-decoration: underline;
    }
}

/* ===== .question-label — titre au-dessus d'une liste .answer-list =====
   Déroge à la règle « pas de bold sur les titres » (base/typography.css) : identité
   typographique dédiée aux questions de questionnaire (demande explicite), distincte des
   titres de page (.page-card__title, h1). */
.question-label {
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-h2); /* 24px */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-label); /* #706D6E */
    margin: 0 0 var(--spacing-md);
    line-height: var(--line-height-snug);
}

/* ===== .answer-list — <ul> de boutons .answer-card ===== */
.answer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm2);
}

/* ===== .answer-wrapper — bouton .answer-card + lien « En savoir plus » côte à côte ===== */
.answer-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Lien « En savoir plus » — largeur fixe, jamais rétréci (voisin de .answer-card en flex).
   Styles visuels fournis par .btn.btn--link (buttons.css). */
.answer-info-btn {
    flex-shrink: 0;
    white-space: nowrap;
    height: 2rem;
    padding: 0 var(--spacing-sm);

    /* .btn pose display:inline-flex (buttons.css) qui prime sinon sur [hidden] (règle UA) */
    &[hidden] { display: none; }
}

/* Bouton de sélection (« Sélectionner »/« Choisir ») d'une .answer-card--split — plus compact
   que le .btn.btn--primary par défaut. */
.answer-select-btn {
    height: 2rem;
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-semibold); /* 600 */
}

/* ===== .answer-card--split — variante non cliquable de .answer-card =====
   Le conteneur n'est plus un <button> (réponse avec description) : titre sur sa propre
   ligne, description (avec lien « voir plus » inline) puis bouton de sélection sur la ligne
   suivante via .answer-card__actions. Repris par Process/ClaimDeclaration et
   Process/ClaimDeclarationGlobalWarranty (réponses avec description). */
.answer-card--split {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    cursor: default;

    &:hover {
        background: var(--color-white);
        color: var(--color-heading);
        box-shadow: var(--shadow-lang-card);
    }
}

.answer-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

@media (max-width: 38.75em) {
    .answer-card {
        padding: var(--spacing-sm3) var(--spacing-md2);
    }

    .answer-wrapper {
        flex-wrap: wrap;
    }
}

/* ===== Composant « callout » : encadré d'information / alerte réutilisable =====
   Rendu par Views/Visa/Shared/_Callout.cshtml. Variantes info (bleu) / error (rouge) /
   success (vert), toutes sur le même schéma de contraste (fond pâle + bordure saturée fine). */

.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm2);
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-sm2);
    border: 0.1rem solid;
    /* 8px (maquette Figma) = var(--border-radius-md) — pas var(--border-radius-lg) qui vaut
       1.2rem (19.2px) et reste partagée par page-card/error/contact/etc. */
    border-radius: var(--border-radius-md);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    /* Un callout peut être masqué/affiché dynamiquement (ex. erreur BIN). */
    &[hidden] {
        display: none;
    }
}

.callout__icon {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
}

/* Titre + texte optionnels (pattern : Title + Content passés au CalloutModel) */
.callout__content {
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    color: var(--color-text-body);
}

.callout__title {
    margin: 0 0 0.2rem;
    font-weight: var(--font-weight-bold);
}

/* Soulignement permanent (pas seulement au survol) : un lien inline dans le texte du callout
   ne doit pas reposer uniquement sur la couleur pour être distingué (WCAG 1.4.1 / audit
   Lighthouse link-in-text-block). */
.callout__content a {
    text-decoration: underline;
}

.callout__text {
    margin: 0;
    font-size: var(--font-size-base); /* 16px = 12pt (scan SortSite : texte < 12pt signalé, priorité 3) */
}

/* Action optionnelle (ex. bouton « Voir plus ») affichée sous le texte du callout — toujours
   sur sa propre ligne (display: block), quelle que soit la longueur du texte qui précède.
   Annule le padding horizontal de .answer-info-btn (answer-card.css) pour aligner le texte du
   bouton avec le texte du callout au-dessus (le padding sert au voisinage avec .answer-select-btn
   dans .answer-card__actions, pas d'usage ici). */
.callout__action {
    display: block;
    width: fit-content;
    margin-top: var(--spacing-xs2);
    padding-left: 0;
    padding-right: 0;
}

/* Variante information (bleu de marque) */
.callout--info {
    background: var(--color-callout-info-bg);
    border-color: var(--color-primary);

    & .callout__icon {
        color: var(--color-primary);
    }
}

/* Variante erreur (rouge) */
.callout--error {
    background: var(--color-error-bg-subtle);
    border-color: var(--color-error);

    & .callout__icon {
        color: var(--color-error);
    }

    & .callout__content a {
        color: var(--color-error);
    }
}

/* Variante succès (vert) */
.callout--success {
    background: var(--color-success-light);
    border-color: var(--color-success);

    & .callout__icon {
        color: var(--color-success2);
    }

    & .callout__content a {
        color: var(--color-success2);
    }
}

/* Variante « document envoyé » (titre en gras 18px, sous-texte 14px normal) — Process/LinkedClaimAttachments
   (groupe de documents entièrement transmis) et Claim/DetailsVisa (bannière "documents reçus"). À combiner
   avec .callout--success (ex. CssClass = "callout--doc-sent" sur le CalloutModel). */
.callout--doc-sent {
    & .callout__title {
        font-size: var(--font-size-md); /* 18px */
        font-weight: var(--font-weight-bold);
    }

    & .callout__text {
        font-weight: var(--font-weight-normal);
    }
}

.callout--success.callout--doc-sent {
    background: var(--color-callout-doc-sent-bg);
    border-color: var(--color-success2); /* #047D26 */

    & .callout__title,
    & .callout__text {
        color: var(--color-success2); /* #047D26 */
    }
}

/* Variante avertissement (ambre) — ex. bannière conflit/voyage sur la home (home-hero__notice). */
.callout--warning {
    background: var(--color-callout-warning-bg);
    border-color: var(--color-callout-warning-border);

    & .callout__icon {
        color: var(--color-icon-warning);
    }
}

/* Variante refermable : bouton × positionné en haut à droite. */
.callout--dismissible {
    position: relative;
    padding-right: calc(var(--spacing-md3) + var(--spacing-xl));
}

.callout__close {
    position: absolute;
    top: var(--spacing-xs2);
    right: var(--spacing-xs2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: none;
    border: none;
    color: currentColor;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    padding: 0;
    line-height: 0;
    opacity: 0.7;

    & svg {
        width: 1.6rem;
        height: 1.6rem;
    }

    &:hover {
        opacity: 1;
        background: var(--color-hover-overlay);
    }

    &:focus-visible {
        outline: 0.2rem solid currentColor;
        outline-offset: 0.2rem;
        opacity: 1;
    }
}

/* ===== Composant case à cocher personnalisée =====
   Boîte visuelle partagée entre le formulaire de connexion (.login-checkbox)
   et la case CGU de l'inscription (.register-consent).
   Le wrapper (.login-checkbox / .register-consent) reste dans login.css / register.css
   car les valeurs de display, gap et margin diffèrent.

   La boîte dessinée elle-même (slot 24px, carré visible 18px, .form__consent-box /
   .person-identity__checkbox-box / .claim-declaration__check-box / .claim-warranty__check-box /
   .acnm-warranty-box) est centralisée plus bas (.checkbox-box) — chaque page ne garde que son
   wrapper (display, gap, margin) et son label. Reste dupliqué (dette connue, hors périmètre) :
   .login-checkbox__box / .register-consent__box ci-dessus (slot 1.15rem, patron distinct). */

/* Input natif masqué mais accessible (focus/tab/espace fonctionnels). */
.login-checkbox input,
.register-consent__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* Boîte visuelle carrée (remplace l'apparence native du checkbox).
   margin-top : décale légèrement la boîte vers le bas pour l'aligner
   avec la première ligne d'un label multi-lignes. */
.login-checkbox__box,
.register-consent__box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    background: var(--color-white);
    border: 0.15rem solid var(--color-text-body);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);

    & svg {
        width: 1.1rem;
        height: 1.1rem;
        color: var(--color-white);
        opacity: 0;
    }
}

/* État coché : fond bleu primaire, coche blanche visible. */
.login-checkbox input:checked + .login-checkbox__box,
.register-consent__input:checked + .register-consent__box {
    background: var(--color-primary);
    border-color: var(--color-primary);

    & svg {
        opacity: 1;
    }
}

/* Focus visible : anneau de focus standard. */
.login-checkbox input:focus-visible + .login-checkbox__box,
.register-consent__input:focus-visible + .register-consent__box {
    outline: 0.2rem solid var(--color-primary);
    outline-offset: 0.2rem;
}

/* ===== .checkbox-box — slot case à cocher custom-dessinée (24x24, carré visible 18x18) =====
   Partagé par les questionnaires LIST multiple (.claim-declaration__check-box /
   .claim-warranty__check-box), le consentement des formulaires dématérialisés
   (.form__consent-box), l'attestation d'identité (.person-identity__checkbox-box) et les
   garanties d'AssurancesCumulativesNMForm (.acnm-warranty-box — ex-checkbox native, migrée ici
   pour profiter de la bordure ::before stylable, impossible à rougir sur un input natif).
   Même patron que .radio-box (components/radio-group.css) mais carré, pas cercle. */
.claim-declaration__check-input,
.claim-warranty__check-input,
.form__consent-input,
.person-identity__checkbox-input,
.acnm-warranty-cb,
.form__file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.claim-declaration__check-box,
.claim-warranty__check-box,
.form__consent-box,
.person-identity__checkbox-box,
.acnm-warranty-box {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    cursor: pointer;

    &::before {
        content: '';
        flex-shrink: 0;
        width: 1.125rem; /* 18px */
        height: 1.125rem;
        background: var(--color-white);
        border: 0.1rem solid var(--color-heading);
        border-radius: var(--border-radius-sm);
        transition: background var(--transition-fast), border-color var(--transition-fast);
    }

    & svg {
        position: absolute;
        width: 1rem;
        height: 1rem;
        color: var(--color-white);
        opacity: 0;
    }
}

.claim-declaration__check-input:checked + .claim-declaration__check-box,
.claim-warranty__check-input:checked + .claim-warranty__check-box,
.form__consent-input:checked + .form__consent-box,
.person-identity__checkbox-input:checked + .person-identity__checkbox-box,
.acnm-warranty-cb:checked + .acnm-warranty-box {
    &::before {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    & svg { opacity: 1; }
}

.claim-declaration__check-input:focus-visible + .claim-declaration__check-box,
.claim-warranty__check-input:focus-visible + .claim-warranty__check-box,
.form__consent-input:focus-visible + .form__consent-box,
.person-identity__checkbox-input:focus-visible + .person-identity__checkbox-box,
.acnm-warranty-cb:focus-visible + .acnm-warranty-box {
    outline: 0.2rem solid var(--color-primary);
    outline-offset: 0.2rem;
}

/* .form__consent-box a en plus une marge de calage (labels multi-lignes) et un repli ::after
   (coche dessinée en CSS pur) pour les formulaires Form/* dont le markup n'a pas encore l'icône
   <svg> interne (dette connue) — :empty ne s'applique qu'en l'absence de tout enfant. */
.form__consent-box {
    margin-top: 0.1rem;

    &:empty::after {
        content: '';
        position: absolute;
        width: 0.5rem;
        height: 0.85rem;
        border-right: 0.2rem solid var(--color-white);
        border-bottom: 0.2rem solid var(--color-white);
        transform: rotate(45deg) translate(-0.05rem, -0.15rem);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }
}

.form__consent-input:checked + .form__consent-box:empty::after {
    opacity: 1;
}

/* ===== Typographie commune aux libellés de case à cocher =====
   Une seule règle pour toutes les checkboxes personnalisées du site ; chaque page ne garde
   que sa mise en page propre (marges, line-height, cursor). Généralisation de la valeur
   posée initialement sur .person-identity__radio-group (person-identity.css).
   Exclus : les libellés déjà dans un état d'erreur (--color-error-text — cf.
   .claim-declaration__checkgroup--invalid .claim-declaration__check-label, claim-declaration.css). */
:is(
    .login-checkbox,
    .register-consent__text,
    .person-identity__checkbox-label,
    .form__consent-label,
    .acnm-warranty-item label,
    .claim-declaration__check-label,
    .claim-warranty__check-label
) {
    font-family: var(--font-family-label); /* Open Sans */
    font-size: var(--font-size-base); /* 16px */
    color: var(--color-text-body); /* #3D515A */
}

/* ===== Case à cocher personnalisée — questionnaires (LIST multiple) =====
   .claim-declaration__check-box / .claim-warranty__check-box partagent désormais le patron
   .checkbox-box ci-dessus (input masqué + boîte + coche SVG #icon-check-mark) — rien de plus
   à définir ici. Slot 1.5rem = line-height (1.5 × 1rem du label, règle ci-dessus) : centré sur
   la 1re ligne de texte sans marge de calage supplémentaire. */

/* ===== Typographie commune aux groupes de questions radio (légende + options) =====
   Une seule règle pour toutes les pages ; chaque page ne garde que sa mise en page propre
   (espacements, disposition, poids de police du libellé le cas échéant). Généralisation de
   la valeur posée initialement sur .person-identity__radio-group (person-identity.css).

   Le sélecteur cible le CONTENEUR de chaque groupe (légende + options) : la légende et les
   labels d'option héritent (color/font-family/font-size sont des propriétés héritées),
   pas besoin de les lister individuellement — sauf s'ils portent déjà une règle explicite,
   qui doit alors être retirée côté page (voir les fichiers listés ci-dessous).
     .person-identity__radio-group      (person-identity.css   — référence)
     .attestation-radio__group          (attestation.css)
     .address-detail__radio-group       (saisie-information-detail.css)
     .form__field-group                 (form.css — PPEForm, VehiculeLocationForm)
     .my-account__radio-group           (my-account.css)

   Hors périmètre (raison fonctionnelle) : Process/ClaimDeclaration et
   Process/ClaimDeclarationGlobalWarranty (claim-declaration.css /
   claim-declaration-global-warranty.css) — ces questionnaires plein écran utilisent une
   identité typographique dédiée (--color-text-label, Inter, pas Open Sans) partagée par
   leurs boutons-cartes de réponse ET leurs listes de cases à cocher (choix multiple) ;
   n'aligner que la liste de cases créerait une incohérence à l'intérieur de la même page. */
:is(
    .person-identity__radio-group,
    .attestation-radio__group,
    .address-detail__radio-group,
    .form__field-group,
    .my-account__radio-group
) {
    font-family: var(--font-family-label); /* Open Sans */
    font-size: var(--font-size-base); /* 16px */
    color: var(--color-text-body); /* #3D515A */
}

/* ===== .radio-options / .radio-option — liste d'options empilées (case + libellé) =====
   Généralisé depuis .person-identity__radio-options/-label ; partagé avec address-detail
   (saisie-information-detail.css). Rendu du bouton : .radio-box ci-dessous. */
.radio-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs2);
    align-items: flex-start;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);
    cursor: pointer;
    line-height: var(--line-height-base);
    color: var(--color-text-body); /* #3D515A — explicite : un <label> n'hérite pas de la couleur du groupe */
}

/* ===== .radio-box — slot radio custom-dessiné (24x24, cercle visible 20x20) =====
   Partagé par person-identity et address-detail (saisie-information-detail). Le rendu
   natif accent-color ne permet pas de fixer la couleur/épaisseur du contour non cochée
   (propre au navigateur) — d'où un rendu ::before/::after. Le radio natif reste dans le
   DOM (masqué visuellement) pour l'interaction/a11y ; :has() pilote cochée/focus. */
.radio-box {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    cursor: pointer;

    & > input {
        position: absolute;
        width: 0;
        height: 0;
        margin: 0;
        opacity: 0;
    }

    &::before {
        content: '';
        width: 1.25rem; /* 20px */
        height: 1.25rem;
        border-radius: 50%;
        border: 0.1rem solid var(--color-heading); /* #3C4D6A */
        background: var(--color-white);
        transition: border-color var(--transition-fast);
    }

    &::after {
        content: '';
        position: absolute;
        /* Sans top/left, un élément absolute retombe sur sa "static position" (haut-gauche du
           conteneur) au lieu d'être centré par le align-items/justify-content du flex parent
           (qui ne s'applique qu'aux éléments en flux normal) — d'où le point mal centré. */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        background: var(--color-radio-accent); /* #0066CC */
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    &:has(input:checked) {
        &::before { border-color: var(--color-radio-accent); }
        &::after { opacity: 1; }
    }

    &:has(input:focus-visible) {
        outline: 0.2rem solid var(--color-radio-accent);
        outline-offset: 0.2rem;
        border-radius: 50%;
    }
}

/* ===== État invalide (groupe radio obligatoire non répondu) =====
   La bordure du radio-box passe au rouge — miroir de .field.is-invalid (field.css, bordure
   de l'input) et .person-identity__attest.is-invalid (checkbox-box, person-identity.css).
   Le libellé/question de la question (.form__field-group-label etc.) reste en couleur neutre :
   l'erreur se lit sur le CONTRÔLE, pas sur le texte de la question. Classe is-invalid posée
   par les scripts de page sur le même conteneur que la liste ci-dessus (base du fichier). */
:is(
    .person-identity__radio-group,
    .attestation-radio__group,
    .address-detail__radio-group,
    .form__field-group,
    .my-account__radio-group
).is-invalid .radio-box::before {
    border-color: var(--color-error);
}

/* ===== .radio-info-link — lien/bouton « En savoir plus » d'un groupe radio =====
   Ouvre la modale de définition partagée #dlg-warranty-desc (data-desc-target + <template>).
   Partagé par person-identity et address-detail (saisie-information-detail). */
.radio-info-link {
    display: block;
    margin: var(--spacing-xs4) 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    text-decoration: underline;
    cursor: pointer;

    /* Survol réservé aux pointeurs qui survolent (sur tactile, :hover reste « collé » après un tap). */
    @media (hover: hover) {
        &:hover {
            text-decoration: none;
        }
    }

    /* Anneau : règle globale :focus-visible (Default/base/utilities.css) ; seul le rayon est spécifique (bouton, pas <a>) */
    &:focus-visible {
        border-radius: 0.2rem;
    }
}

/* ===== Composant « field » : champ de formulaire partagé =====
   Design unique pour tous les inputs (login, création de compte, saisie carte).
   Repris du design de la page de connexion. État invalide piloté par la classe
   .is-invalid posée sur le conteneur .field (par les scripts de page). */

.field {
    margin-bottom: var(--spacing-sm);

    /* Repli pour les pages qui écrivent leur champ en `.field > input.form-control` direct,
       sans le wrapper .field__control de _Field.cshtml (ex. Form/VehiculeLocationForm,
       Form/PPEForm — voir commentaire vehicule-location-form.css). .form-control (forms.css)
       lit --field-border-color : sans cette déclaration ici, ces champs restaient toujours
       sur le fallback var(--color-input-border), focus ET erreur confondus. Même variable que
       .field__control ci-dessous : pour un champ AVEC wrapper, la déclaration plus profonde sur
       .field__control prend le relais sans rien changer (héritage CSS normal, pas de conflit). */
    --field-border-color: var(--color-input-border);

    &:focus-within {
        --field-border-color: var(--color-primary);
    }

    &.is-invalid {
        --field-border-color: var(--color-error);
    }
}

/* Modificateur générique : neutralise la règle globale .page-card__inner .field__control
   (max-width: 50%, layout/page-card.css) pour un champ isolé qui doit occuper toute la
   largeur de la carte. */
.field--full .field__control {
    max-width: 100%;
}

/* Modificateur select : dimensionné à son contenu (texte + chevron) plutôt qu'étiré sur
   toute la largeur, avec un plancher de 50% de la carte (zone cliquable confortable même
   pour une valeur courte — ex. AssuranceCumulativesForm_DropdownList_Role/IndemniseAssurance).
   width: fit-content sur le wrapper calcule sa taille sur le select (form-control ci-dessous
   compte comme 'auto' dans ce calcul, cf. spec CSS shrink-to-fit) puis min/max-width la bornent
   par rapport à .field (largeur stable) ; le form-control remplit ensuite ce wrapper résolu. */
.field--select-fit .field__control {
    width: fit-content;
    min-width: 50%;
    max-width: 100%;
}

.field--select-fit .form-control {
    width: 100%;
    /* réserve la place du chevron : var(--spacing-sm2) = son offset (right, ci-dessous),
       var(--spacing-md) = sa largeur d'icône, var(--spacing-xs6) = respiration avant le texte */
    padding-right: calc(var(--spacing-sm2) + var(--spacing-md) + var(--spacing-xs6));
}

/* Modificateurs d'espacement génériques — à utiliser via CssClass plutôt que de cibler un champ
   précis par id dans une page (ex. plusieurs formulaires Form/* partagent le même champ "Rôle"
   sous des id différents mais avec le même besoin d'espacement). */
.field--flush-bottom {
    margin-bottom: 0;
}

.field--spaced-top {
    margin-top: var(--spacing-sm);
}

.field__label {
    display: block;
    margin-bottom: var(--spacing-xs4);
    font-family: var(--font-family-label);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-label);
}

.field__control {
    position: relative;
    display: block;
    /* Source unique de la couleur de bordure du champ : .form-control (border-color) et
       .field__chevron (color) lisent tous les deux cette variable héritée — jamais de
       valeur dupliquée entre les deux. :focus-within et .is-invalid (ci-dessous) la
       réassignent, ce qui fait suivre le chevron automatiquement (focus bleu, erreur rouge). */
    --field-border-color: var(--color-input-border);

    &:focus-within {
        --field-border-color: var(--color-primary);
    }

    /* place pour l'œil (toujours visible) + l'icône d'erreur */
    &.field__control--has-toggle .form-control {
        padding-right: 7.2rem;
    }
}

/* Spécificité (0,2,0) > (0,1,0) de .field__control : garantit que [hidden]
   masque le wrapper même si display:block est posé par la règle ci-dessus.
   Nécessaire car les feuilles author priment sur le UA stylesheet ([hidden] natif). */
.field__control[hidden] {
    display: none;
}

/* Variante select : flèche native masquée (chevron custom via .field__chevron).
   display:flex + align-items:center : avec appearance:none, Chrome rogne le texte de
   l'option sélectionnée à la hauteur fixe de .form-control (44px) dès que line-height
   dépasse l'espace restant après padding/bordure (cas de --font-size-input, 18px) —
   le centrage flex évite ce rognage indépendamment de la taille de police. */
.field__control--select .form-control {
    display: flex;
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.field__icons {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);
}

/* Masque le bouton œil natif d'Edge sur les champs password pour éviter le doublon avec .field__toggle */
input[type="password"]::-ms-reveal { display: none; }

.field__toggle {
    display: inline-flex;
    /* Zone tactile WCAG 2.5.5 : padding + marge négative agrandissent la zone cliquable
       sans déplacer les éléments voisins (1.5rem SVG + 2×var(--spacing-xs4) = 2.7rem ≈ 43px). */
    padding: var(--spacing-xs4);
    margin: calc(-1 * var(--spacing-xs4));
    background: none;
    border: none;
    color: var(--color-input-icon);
    cursor: pointer;
    line-height: 0;
    border-radius: var(--border-radius-sm);

    & svg {
        width: 1.5rem; /* 24px (1rem = 16px) */
        height: 1.5rem;
    }

    & .field__toggle-eye-off { display: none; }

    &[aria-pressed="true"] .field__toggle-eye     { display: none; }
    &[aria-pressed="true"] .field__toggle-eye-off { display: inline; }
}

.field__chevron {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--field-border-color, var(--color-input-border)); /* même variable que la bordure de .form-control (.field__control) */
    pointer-events: none;
    line-height: 0;

    & svg {
        width: 1.5rem; /* 24px (1rem = 16px) */
        height: 1.5rem;
    }
}

/* Icône d'erreur : ancrée à droite de l'input par défaut (champs simples). */
.field__error-icon {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: none;
    color: var(--color-error);
    line-height: 0;

    & svg {
        width: 1.2rem;
        height: 1.2rem;
    }
}

/* Quand elle est groupée avec d'autres icônes (œil), elle suit le flux du conteneur flex. */
.field__icons .field__error-icon {
    position: static;
    transform: none;
}

/* Cadenas d'un champ en lecture seule (décoratif : l'état est porté par l'attribut readonly + le hint). */
.field__lock-icon {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    color: var(--color-text-muted-hero);
    line-height: 0;
    pointer-events: none;

    & svg {
        width: 1.6rem;
        height: 1.6rem;
    }
}

.field__hint {
    display: block;
    margin-bottom: var(--spacing-xs4);
    color: var(--color-text-muted);
}

/* Indication autonome (non rattachée à un champ) — ex. rappel sous l'étape email. */
.field__hint--block {
    margin: calc(-1 * var(--spacing-xs3)) 0 var(--spacing-lg);
}

.field__error {
    display: none;
    margin-top: var(--spacing-xs4);
    color: var(--color-error-text); /* #c0392b — 5.5:1 sur blanc, 4.8:1 sur fond héros (WCAG AA) */
}

/* Le focus (bordure bleue, donc aussi le chevron via --field-border-color) est déjà géré
   par .field__control:focus-within ci-dessus. L'anneau visuel reste sous la règle globale
   :focus-visible (utilities.css). */

/* Neutralise :invalid (navigateur) et .input-validation-error (MVC/jQuery Validate).
   Dans les composants .field, l'état d'erreur est géré exclusivement par
   .field.is-invalid posé par les scripts natifs — jamais par CSS seul.
   Note : pas de outline:none ici — la règle globale :focus-visible (utilities.css)
   gère le focus ring naturellement sans conflit. */
.field .form-control:invalid,
.field .form-control.input-validation-error {
    border-color: var(--field-border-color, var(--color-input-border));
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    color: var(--color-input-text);
}

/* État invalide (posé par les scripts de page).
   Même spécificité (0,3,0) que la neutralisation :invalid ci-dessus, mais apparaît
   APRÈS dans la source → gagne par cascade sans !important. Le sélecteur &:focus
   atteint (0,4,0) > (0,3,0) de la neutralisation.
   --field-border-color réassignée ici (et sur :focus-within, plus bas) : la bordure ET
   le chevron passent au rouge ensemble, y compris pendant le focus. */
.field.is-invalid {
    & .field__control {
        --field-border-color: var(--color-error);

        &:focus-within {
            --field-border-color: var(--color-error);
        }
    }

    & .form-control {
        padding-right: 4.4rem; /* réserve la place pour l'icône d'erreur */
        border-color: var(--field-border-color);
        border-radius: var(--border-radius-sm);

        /* La bordure reste rouge même en focus ; pas d'anneau :focus-visible (retiré,
           cf. forms.css) — le rouge suffit déjà comme indicateur de focus. */
        &:focus,
        &:focus-visible {
            outline: none;
            border-color: var(--field-border-color);
        }
    }

    & .field__error-icon {
        display: inline-flex;
    }

    /* Select : l'icône d'erreur reste masquée — le chevron occupe la droite.
       Spécificité (0,4,0) > (0,3,0) de & .field__error-icon ci-dessus. */
    & .field__control--select .field__error-icon {
        display: none;
    }

    & .field__error {
        display: block;
    }
}

/* ===== .form__checkbox-group — groupe de cases à cocher « au moins une requise » (composant
   générique) =====
   Marqueur posé en plus de la classe de mise en page propre à la page (ex. .acnm-warranties,
   AssurancesCumulativesNMForm). État géré par window.Validators.validateCheckboxGroup
   (Scripts/Visa/utils/validators.js), qui pose/retire is-invalid sur le groupe LUI-MÊME selon
   qu'au moins une de ses input[type="checkbox"] est cochée. Révèle ici le message d'erreur
   (.field__error, même contrat que les champs) ; la bordure rouge de chaque case reste à la
   charge de la page consommatrice (nom de classe de la boîte custom non unifié site-wide —
   voir ex. .acnm-warranties.is-invalid .acnm-warranty-box::before,
   pages/assurances-cumulatives-nm-form.css). */
.form__checkbox-group.is-invalid .field__error {
    display: block;
}

/* Textarea : redimensionnement vertical uniquement (largeur fixée par le layout).
   L'icône d'erreur est ancrée en haut à droite au lieu du centre (50%). */
.field__control--textarea .form-control {
    height: auto; /* la hauteur fixe de .form-control (forms.css) ne doit pas écraser le sizing par "rows" */
    resize: vertical;
}

.field__control--textarea .field__error-icon {
    top: 1.2rem;
    transform: none;
}

/* ===== Composant « bin-card-fill » : bloc de saisie du numéro de carte (BIN) =====
   Rendu par Views/Visa/Shared/_BinCardFill.cshtml, piloté par components/bin-card-fill.js.
   Les champs utilisent le composant partagé « field » (components/field.css).
   Réutilise le composant .callout (variante error) pour le rejet BIN serveur. */

.bin-card-fill__intro {
    line-height: var(--line-height-relaxed);
    color: var(--color-overlay-dark); /* #000000B2 — même couleur que .page-card__lead */
}

/* Encadré d'erreur BIN : titre en gras + sous-texte, dans un .callout--error. */

.bin-card-fill__error .callout__title {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.bin-card-fill__error .callout__text {
    margin: var(--spacing-xs3) 0 0;
    font-size: var(--font-size-sm);

    &:empty {
        display: none;
    }
}

/* ===== Composant « phone-input » : saisie de téléphone international (100 % natif) =====
   Rendu/piloté par Scripts/Visa/components/phone-input.js. Remplace l'ancien plugin
   jQuery intl-tel-input. Le champ national utilise le composant .field / .form-control ;
   ce fichier ajoute le sélecteur de pays (drapeau + indicatif) et la liste déroulante. */

.phone-input {
    position: relative;
    display: block;
}

/* Le champ national laisse de la place à gauche pour le bouton pays. */
.phone-input .form-control {
    padding-left: 4.2rem;
}

/* Bouton d'ouverture du sélecteur de pays (drapeau + chevron), ancré à gauche. */
.phone-input__toggle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs3);
    padding: 0 var(--spacing-xs2) 0 var(--spacing-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);

    &:focus-visible {
        outline: 0.2rem solid var(--color-primary);
        outline-offset: -0.2rem;
    }
}

.phone-input__arrow {
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.5rem solid var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.phone-input.is-open .phone-input__arrow {
    transform: rotate(180deg);
}

/* Pays unique (onlyCountries) : drapeau seul, ni chevron ni liste. */
.phone-input--single .phone-input__toggle {
    cursor: default;
    pointer-events: none;
}

.phone-input--single .phone-input__arrow {
    display: none;
}

/* Liste déroulante des pays.
   position:fixed → échappe tout stacking context et overflow parent ;
   top/left/width sont posés en inline style par phone-input.js (_positionDropdown). */
.phone-input__dropdown {
    position: fixed;
    z-index: var(--z-index-dropdown);
    background: var(--color-white);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;

    &[hidden] {
        display: none;
    }
}

.phone-input__search {
    display: block;
    width: 100%;
    padding: var(--spacing-xs2) var(--spacing-sm);
    font-size: var(--font-size-base);
    border: none;
    border-bottom: 0.1rem solid var(--color-border);

    &:focus {
        outline: none;
        border-bottom-color: var(--color-primary);
    }
}

.phone-input__list {
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs3) 0;
    max-height: 24rem;
    overflow-y: auto;
}

.phone-input__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);
    padding: var(--spacing-xs5) var(--spacing-sm2);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);

    &.is-active,
    &:hover {
        background: var(--color-primary-light);
    }

    &.is-selected {
        font-weight: var(--font-weight-semibold);
    }

    &[hidden] {
        display: none;
    }
}

.phone-input__name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-input__dial {
    color: var(--color-text-muted);
}

.phone-input__empty {
    padding: var(--spacing-sm) var(--spacing-sm2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);

    &[hidden] {
        display: none;
    }
}

/* ===== Drapeaux (sprite WebP) =====
   Sprite repris d'intl-tel-input, converti en WebP. URL isolée sur une seule ligne.
   Les positions par pays sont générées plus bas. */
.phone-input__flag {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 15px;
    box-shadow: 0 0 1px 0 var(--color-flag-border);
    background-repeat: no-repeat;
    background-color: var(--color-flag-bg);
    background-image: url("/Content/themes/Visa/images/flags@2x.webp");
    background-size: 5652px 15px;
    background-position: 20px 0;
}

.phone-input__flag.be { width: 18px; }
.phone-input__flag.ch { width: 15px; }
.phone-input__flag.mc { width: 19px; }
.phone-input__flag.ne { width: 18px; }
.phone-input__flag.np { width: 13px; }
.phone-input__flag.va { width: 15px; }
.phone-input__flag.ac { height: 10px; background-position: 0px 0px; }
.phone-input__flag.ad { height: 14px; background-position: -22px 0px; }
.phone-input__flag.ae { height: 10px; background-position: -44px 0px; }
.phone-input__flag.af { height: 14px; background-position: -66px 0px; }
.phone-input__flag.ag { height: 14px; background-position: -88px 0px; }
.phone-input__flag.ai { height: 10px; background-position: -110px 0px; }
.phone-input__flag.al { height: 15px; background-position: -132px 0px; }
.phone-input__flag.am { height: 10px; background-position: -154px 0px; }
.phone-input__flag.ao { height: 14px; background-position: -176px 0px; }
.phone-input__flag.aq { height: 14px; background-position: -198px 0px; }
.phone-input__flag.ar { height: 13px; background-position: -220px 0px; }
.phone-input__flag.as { height: 10px; background-position: -242px 0px; }
.phone-input__flag.at { height: 14px; background-position: -264px 0px; }
.phone-input__flag.au { height: 10px; background-position: -286px 0px; }
.phone-input__flag.aw { height: 14px; background-position: -308px 0px; }
.phone-input__flag.ax { height: 13px; background-position: -330px 0px; }
.phone-input__flag.az { height: 10px; background-position: -352px 0px; }
.phone-input__flag.ba { height: 10px; background-position: -374px 0px; }
.phone-input__flag.bb { height: 14px; background-position: -396px 0px; }
.phone-input__flag.bd { height: 12px; background-position: -418px 0px; }
.phone-input__flag.be { height: 15px; background-position: -440px 0px; }
.phone-input__flag.bf { height: 14px; background-position: -460px 0px; }
.phone-input__flag.bg { height: 12px; background-position: -482px 0px; }
.phone-input__flag.bh { height: 12px; background-position: -504px 0px; }
.phone-input__flag.bi { height: 12px; background-position: -526px 0px; }
.phone-input__flag.bj { height: 14px; background-position: -548px 0px; }
.phone-input__flag.bl { height: 14px; background-position: -570px 0px; }
.phone-input__flag.bm { height: 10px; background-position: -592px 0px; }
.phone-input__flag.bn { height: 10px; background-position: -614px 0px; }
.phone-input__flag.bo { height: 14px; background-position: -636px 0px; }
.phone-input__flag.bq { height: 14px; background-position: -658px 0px; }
.phone-input__flag.br { height: 14px; background-position: -680px 0px; }
.phone-input__flag.bs { height: 10px; background-position: -702px 0px; }
.phone-input__flag.bt { height: 14px; background-position: -724px 0px; }
.phone-input__flag.bv { height: 15px; background-position: -746px 0px; }
.phone-input__flag.bw { height: 14px; background-position: -768px 0px; }
.phone-input__flag.by { height: 10px; background-position: -790px 0px; }
.phone-input__flag.bz { height: 14px; background-position: -812px 0px; }
.phone-input__flag.ca { height: 10px; background-position: -834px 0px; }
.phone-input__flag.cc { height: 10px; background-position: -856px 0px; }
.phone-input__flag.cd { height: 15px; background-position: -878px 0px; }
.phone-input__flag.cf { height: 14px; background-position: -900px 0px; }
.phone-input__flag.cg { height: 14px; background-position: -922px 0px; }
.phone-input__flag.ch { height: 15px; background-position: -944px 0px; }
.phone-input__flag.ci { height: 14px; background-position: -961px 0px; }
.phone-input__flag.ck { height: 10px; background-position: -983px 0px; }
.phone-input__flag.cl { height: 14px; background-position: -1005px 0px; }
.phone-input__flag.cm { height: 14px; background-position: -1027px 0px; }
.phone-input__flag.cn { height: 14px; background-position: -1049px 0px; }
.phone-input__flag.co { height: 14px; background-position: -1071px 0px; }
.phone-input__flag.cp { height: 14px; background-position: -1093px 0px; }
.phone-input__flag.cr { height: 12px; background-position: -1115px 0px; }
.phone-input__flag.cu { height: 10px; background-position: -1137px 0px; }
.phone-input__flag.cv { height: 12px; background-position: -1159px 0px; }
.phone-input__flag.cw { height: 14px; background-position: -1181px 0px; }
.phone-input__flag.cx { height: 10px; background-position: -1203px 0px; }
.phone-input__flag.cy { height: 14px; background-position: -1225px 0px; }
.phone-input__flag.cz { height: 14px; background-position: -1247px 0px; }
.phone-input__flag.de { height: 12px; background-position: -1269px 0px; }
.phone-input__flag.dg { height: 10px; background-position: -1291px 0px; }
.phone-input__flag.dj { height: 14px; background-position: -1313px 0px; }
.phone-input__flag.dk { height: 15px; background-position: -1335px 0px; }
.phone-input__flag.dm { height: 10px; background-position: -1357px 0px; }
.phone-input__flag.do { height: 14px; background-position: -1379px 0px; }
.phone-input__flag.dz { height: 14px; background-position: -1401px 0px; }
.phone-input__flag.ea { height: 14px; background-position: -1423px 0px; }
.phone-input__flag.ec { height: 14px; background-position: -1445px 0px; }
.phone-input__flag.ee { height: 13px; background-position: -1467px 0px; }
.phone-input__flag.eg { height: 14px; background-position: -1489px 0px; }
.phone-input__flag.eh { height: 10px; background-position: -1511px 0px; }
.phone-input__flag.er { height: 10px; background-position: -1533px 0px; }
.phone-input__flag.es { height: 14px; background-position: -1555px 0px; }
.phone-input__flag.et { height: 10px; background-position: -1577px 0px; }
.phone-input__flag.eu { height: 14px; background-position: -1599px 0px; }
.phone-input__flag.fi { height: 12px; background-position: -1621px 0px; }
.phone-input__flag.fj { height: 10px; background-position: -1643px 0px; }
.phone-input__flag.fk { height: 10px; background-position: -1665px 0px; }
.phone-input__flag.fm { height: 11px; background-position: -1687px 0px; }
.phone-input__flag.fo { height: 15px; background-position: -1709px 0px; }
.phone-input__flag.fr { height: 14px; background-position: -1731px 0px; }
.phone-input__flag.ga { height: 15px; background-position: -1753px 0px; }
.phone-input__flag.gb { height: 10px; background-position: -1775px 0px; }
.phone-input__flag.gd { height: 12px; background-position: -1797px 0px; }
.phone-input__flag.ge { height: 14px; background-position: -1819px 0px; }
.phone-input__flag.gf { height: 14px; background-position: -1841px 0px; }
.phone-input__flag.gg { height: 14px; background-position: -1863px 0px; }
.phone-input__flag.gh { height: 14px; background-position: -1885px 0px; }
.phone-input__flag.gi { height: 10px; background-position: -1907px 0px; }
.phone-input__flag.gl { height: 14px; background-position: -1929px 0px; }
.phone-input__flag.gm { height: 14px; background-position: -1951px 0px; }
.phone-input__flag.gn { height: 14px; background-position: -1973px 0px; }
.phone-input__flag.gp { height: 14px; background-position: -1995px 0px; }
.phone-input__flag.gq { height: 14px; background-position: -2017px 0px; }
.phone-input__flag.gr { height: 14px; background-position: -2039px 0px; }
.phone-input__flag.gs { height: 10px; background-position: -2061px 0px; }
.phone-input__flag.gt { height: 13px; background-position: -2083px 0px; }
.phone-input__flag.gu { height: 11px; background-position: -2105px 0px; }
.phone-input__flag.gw { height: 10px; background-position: -2127px 0px; }
.phone-input__flag.gy { height: 12px; background-position: -2149px 0px; }
.phone-input__flag.hk { height: 14px; background-position: -2171px 0px; }
.phone-input__flag.hm { height: 10px; background-position: -2193px 0px; }
.phone-input__flag.hn { height: 10px; background-position: -2215px 0px; }
.phone-input__flag.hr { height: 10px; background-position: -2237px 0px; }
.phone-input__flag.ht { height: 12px; background-position: -2259px 0px; }
.phone-input__flag.hu { height: 10px; background-position: -2281px 0px; }
.phone-input__flag.ic { height: 14px; background-position: -2303px 0px; }
.phone-input__flag.id { height: 14px; background-position: -2325px 0px; }
.phone-input__flag.ie { height: 10px; background-position: -2347px 0px; }
.phone-input__flag.il { height: 15px; background-position: -2369px 0px; }
.phone-input__flag.im { height: 10px; background-position: -2391px 0px; }
.phone-input__flag.in { height: 14px; background-position: -2413px 0px; }
.phone-input__flag.io { height: 10px; background-position: -2435px 0px; }
.phone-input__flag.iq { height: 14px; background-position: -2457px 0px; }
.phone-input__flag.ir { height: 12px; background-position: -2479px 0px; }
.phone-input__flag.is { height: 15px; background-position: -2501px 0px; }
.phone-input__flag.it { height: 14px; background-position: -2523px 0px; }
.phone-input__flag.je { height: 12px; background-position: -2545px 0px; }
.phone-input__flag.jm { height: 10px; background-position: -2567px 0px; }
.phone-input__flag.jo { height: 10px; background-position: -2589px 0px; }
.phone-input__flag.jp { height: 14px; background-position: -2611px 0px; }
.phone-input__flag.ke { height: 14px; background-position: -2633px 0px; }
.phone-input__flag.kg { height: 12px; background-position: -2655px 0px; }
.phone-input__flag.kh { height: 13px; background-position: -2677px 0px; }
.phone-input__flag.ki { height: 10px; background-position: -2699px 0px; }
.phone-input__flag.km { height: 12px; background-position: -2721px 0px; }
.phone-input__flag.kn { height: 14px; background-position: -2743px 0px; }
.phone-input__flag.kp { height: 10px; background-position: -2765px 0px; }
.phone-input__flag.kr { height: 14px; background-position: -2787px 0px; }
.phone-input__flag.kw { height: 10px; background-position: -2809px 0px; }
.phone-input__flag.ky { height: 10px; background-position: -2831px 0px; }
.phone-input__flag.kz { height: 10px; background-position: -2853px 0px; }
.phone-input__flag.la { height: 14px; background-position: -2875px 0px; }
.phone-input__flag.lb { height: 14px; background-position: -2897px 0px; }
.phone-input__flag.lc { height: 10px; background-position: -2919px 0px; }
.phone-input__flag.li { height: 12px; background-position: -2941px 0px; }
.phone-input__flag.lk { height: 10px; background-position: -2963px 0px; }
.phone-input__flag.lr { height: 11px; background-position: -2985px 0px; }
.phone-input__flag.ls { height: 14px; background-position: -3007px 0px; }
.phone-input__flag.lt { height: 12px; background-position: -3029px 0px; }
.phone-input__flag.lu { height: 12px; background-position: -3051px 0px; }
.phone-input__flag.lv { height: 10px; background-position: -3073px 0px; }
.phone-input__flag.ly { height: 10px; background-position: -3095px 0px; }
.phone-input__flag.ma { height: 14px; background-position: -3117px 0px; }
.phone-input__flag.mc { height: 15px; background-position: -3139px 0px; }
.phone-input__flag.md { height: 10px; background-position: -3160px 0px; }
.phone-input__flag.me { height: 10px; background-position: -3182px 0px; }
.phone-input__flag.mf { height: 14px; background-position: -3204px 0px; }
.phone-input__flag.mg { height: 14px; background-position: -3226px 0px; }
.phone-input__flag.mh { height: 11px; background-position: -3248px 0px; }
.phone-input__flag.mk { height: 10px; background-position: -3270px 0px; }
.phone-input__flag.ml { height: 14px; background-position: -3292px 0px; }
.phone-input__flag.mm { height: 14px; background-position: -3314px 0px; }
.phone-input__flag.mn { height: 10px; background-position: -3336px 0px; }
.phone-input__flag.mo { height: 14px; background-position: -3358px 0px; }
.phone-input__flag.mp { height: 10px; background-position: -3380px 0px; }
.phone-input__flag.mq { height: 14px; background-position: -3402px 0px; }
.phone-input__flag.mr { height: 14px; background-position: -3424px 0px; }
.phone-input__flag.ms { height: 10px; background-position: -3446px 0px; }
.phone-input__flag.mt { height: 14px; background-position: -3468px 0px; }
.phone-input__flag.mu { height: 14px; background-position: -3490px 0px; }
.phone-input__flag.mv { height: 14px; background-position: -3512px 0px; }
.phone-input__flag.mw { height: 14px; background-position: -3534px 0px; }
.phone-input__flag.mx { height: 12px; background-position: -3556px 0px; }
.phone-input__flag.my { height: 10px; background-position: -3578px 0px; }
.phone-input__flag.mz { height: 14px; background-position: -3600px 0px; }
.phone-input__flag.na { height: 14px; background-position: -3622px 0px; }
.phone-input__flag.nc { height: 10px; background-position: -3644px 0px; }
.phone-input__flag.ne { height: 15px; background-position: -3666px 0px; }
.phone-input__flag.nf { height: 10px; background-position: -3686px 0px; }
.phone-input__flag.ng { height: 10px; background-position: -3708px 0px; }
.phone-input__flag.ni { height: 12px; background-position: -3730px 0px; }
.phone-input__flag.nl { height: 14px; background-position: -3752px 0px; }
.phone-input__flag.no { height: 15px; background-position: -3774px 0px; }
.phone-input__flag.np { height: 15px; background-position: -3796px 0px; }
.phone-input__flag.nr { height: 10px; background-position: -3811px 0px; }
.phone-input__flag.nu { height: 10px; background-position: -3833px 0px; }
.phone-input__flag.nz { height: 10px; background-position: -3855px 0px; }
.phone-input__flag.om { height: 10px; background-position: -3877px 0px; }
.phone-input__flag.pa { height: 14px; background-position: -3899px 0px; }
.phone-input__flag.pe { height: 14px; background-position: -3921px 0px; }
.phone-input__flag.pf { height: 14px; background-position: -3943px 0px; }
.phone-input__flag.pg { height: 15px; background-position: -3965px 0px; }
.phone-input__flag.ph { height: 10px; background-position: -3987px 0px; }
.phone-input__flag.pk { height: 14px; background-position: -4009px 0px; }
.phone-input__flag.pl { height: 13px; background-position: -4031px 0px; }
.phone-input__flag.pm { height: 14px; background-position: -4053px 0px; }
.phone-input__flag.pn { height: 10px; background-position: -4075px 0px; }
.phone-input__flag.pr { height: 14px; background-position: -4097px 0px; }
.phone-input__flag.ps { height: 10px; background-position: -4119px 0px; }
.phone-input__flag.pt { height: 14px; background-position: -4141px 0px; }
.phone-input__flag.pw { height: 13px; background-position: -4163px 0px; }
.phone-input__flag.py { height: 11px; background-position: -4185px 0px; }
.phone-input__flag.qa { height: 8px; background-position: -4207px 0px; }
.phone-input__flag.re { height: 14px; background-position: -4229px 0px; }
.phone-input__flag.ro { height: 14px; background-position: -4251px 0px; }
.phone-input__flag.rs { height: 14px; background-position: -4273px 0px; }
.phone-input__flag.ru { height: 14px; background-position: -4295px 0px; }
.phone-input__flag.rw { height: 14px; background-position: -4317px 0px; }
.phone-input__flag.sa { height: 14px; background-position: -4339px 0px; }
.phone-input__flag.sb { height: 10px; background-position: -4361px 0px; }
.phone-input__flag.sc { height: 10px; background-position: -4383px 0px; }
.phone-input__flag.sd { height: 10px; background-position: -4405px 0px; }
.phone-input__flag.se { height: 13px; background-position: -4427px 0px; }
.phone-input__flag.sg { height: 14px; background-position: -4449px 0px; }
.phone-input__flag.sh { height: 10px; background-position: -4471px 0px; }
.phone-input__flag.si { height: 10px; background-position: -4493px 0px; }
.phone-input__flag.sj { height: 15px; background-position: -4515px 0px; }
.phone-input__flag.sk { height: 14px; background-position: -4537px 0px; }
.phone-input__flag.sl { height: 14px; background-position: -4559px 0px; }
.phone-input__flag.sm { height: 15px; background-position: -4581px 0px; }
.phone-input__flag.sn { height: 14px; background-position: -4603px 0px; }
.phone-input__flag.so { height: 14px; background-position: -4625px 0px; }
.phone-input__flag.sr { height: 14px; background-position: -4647px 0px; }
.phone-input__flag.ss { height: 10px; background-position: -4669px 0px; }
.phone-input__flag.st { height: 10px; background-position: -4691px 0px; }
.phone-input__flag.sv { height: 12px; background-position: -4713px 0px; }
.phone-input__flag.sx { height: 14px; background-position: -4735px 0px; }
.phone-input__flag.sy { height: 14px; background-position: -4757px 0px; }
.phone-input__flag.sz { height: 14px; background-position: -4779px 0px; }
.phone-input__flag.ta { height: 10px; background-position: -4801px 0px; }
.phone-input__flag.tc { height: 10px; background-position: -4823px 0px; }
.phone-input__flag.td { height: 14px; background-position: -4845px 0px; }
.phone-input__flag.tf { height: 14px; background-position: -4867px 0px; }
.phone-input__flag.tg { height: 13px; background-position: -4889px 0px; }
.phone-input__flag.th { height: 14px; background-position: -4911px 0px; }
.phone-input__flag.tj { height: 10px; background-position: -4933px 0px; }
.phone-input__flag.tk { height: 10px; background-position: -4955px 0px; }
.phone-input__flag.tl { height: 10px; background-position: -4977px 0px; }
.phone-input__flag.tm { height: 14px; background-position: -4999px 0px; }
.phone-input__flag.tn { height: 14px; background-position: -5021px 0px; }
.phone-input__flag.to { height: 10px; background-position: -5043px 0px; }
.phone-input__flag.tr { height: 14px; background-position: -5065px 0px; }
.phone-input__flag.tt { height: 12px; background-position: -5087px 0px; }
.phone-input__flag.tv { height: 10px; background-position: -5109px 0px; }
.phone-input__flag.tw { height: 14px; background-position: -5131px 0px; }
.phone-input__flag.tz { height: 14px; background-position: -5153px 0px; }
.phone-input__flag.ua { height: 14px; background-position: -5175px 0px; }
.phone-input__flag.ug { height: 14px; background-position: -5197px 0px; }
.phone-input__flag.um { height: 11px; background-position: -5219px 0px; }
.phone-input__flag.un { height: 14px; background-position: -5241px 0px; }
.phone-input__flag.us { height: 11px; background-position: -5263px 0px; }
.phone-input__flag.uy { height: 14px; background-position: -5285px 0px; }
.phone-input__flag.uz { height: 10px; background-position: -5307px 0px; }
.phone-input__flag.va { height: 15px; background-position: -5329px 0px; }
.phone-input__flag.vc { height: 14px; background-position: -5346px 0px; }
.phone-input__flag.ve { height: 14px; background-position: -5368px 0px; }
.phone-input__flag.vg { height: 10px; background-position: -5390px 0px; }
.phone-input__flag.vi { height: 14px; background-position: -5412px 0px; }
.phone-input__flag.vn { height: 14px; background-position: -5434px 0px; }
.phone-input__flag.vu { height: 12px; background-position: -5456px 0px; }
.phone-input__flag.wf { height: 14px; background-position: -5478px 0px; }
.phone-input__flag.ws { height: 10px; background-position: -5500px 0px; }
.phone-input__flag.xk { height: 15px; background-position: -5522px 0px; }
.phone-input__flag.ye { height: 14px; background-position: -5544px 0px; }
.phone-input__flag.yt { height: 14px; background-position: -5566px 0px; }
.phone-input__flag.za { height: 14px; background-position: -5588px 0px; }
.phone-input__flag.zm { height: 14px; background-position: -5610px 0px; }
.phone-input__flag.zw { height: 10px; background-position: -5632px 0px; }
.phone-input__flag.np { background-color: transparent; }

/* ===== Styles des formulaires ===== */

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);

    &-required::after {
        content: " *";
        color: var(--color-error);
    }
}

.form-control {
    display: block;
    width: 100%;
    height: var(--control-height); /* aligné sur .btn (buttons.css) */
    /* Padding vertical réduit (pas var(--spacing-sm) = 16px) : avec --font-size-input (18px)
       et line-height 1.2 (21.6px), le texte + bordure (3.2px) doivent tenir dans les 44px
       de hauteur fixe. Un select (appearance:none) ROGNE son contenu si ça dépasse — un
       input se contente de déborder visuellement, mais les deux doivent respecter la marge. */
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-family-input);
    font-size: var(--font-size-input);
    line-height: 1.2;
    color: var(--color-input-text);
    background-color: var(--color-input-bg);
    /* var(--field-border-color) : héritée de .field__control (field.css), qui la
       réassigne selon l'état (focus, .is-invalid) — .form-control et .field__chevron
       suivent alors la même couleur sans la dupliquer. Repli sur le token par défaut
       pour les .form-control utilisés hors d'un .field__control. */
    border: 0.1rem solid var(--field-border-color, var(--color-input-border));
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast);

    /* Pas d'anneau :focus-visible (supprimé ci-dessous) sur les champs : le changement de
       couleur de bordure suffit à indiquer le focus, sans le double cadre de la bague globale. */
    &:focus {
        border-color: var(--color-primary);
    }

    &:focus-visible {
        outline: none;
    }

    /* Lecture seule : reste focusable et annoncé (aria implicite) ; fond neutre + pas de bordure
       d'accent au focus pour signaler « non éditable » sans réduire le contraste du texte. */
    &[readonly] {
        background-color: var(--color-bg-light);
        cursor: default;
        padding-right: 3.6rem; /* place pour le cadenas .field__lock-icon */

        &:focus {
            border-color: var(--field-border-color, var(--color-input-border));
        }
    }

    &:disabled {
        background-color: var(--color-bg-light);
        cursor: not-allowed;
        opacity: 0.6;
    }

    &.is-invalid {
        border-color: var(--color-error);

        &:focus,
        &:focus-visible {
            border-color: var(--color-error);
        }
    }
}

.form-text {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.form-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

/* Cases à cocher / boutons radio natifs (accent-color) — taille unifiée 1.25rem (20px).
   Les sélecteurs de pages sont regroupés ici en attendant une classe générique (ex. .choice-input)
   posée dans les vues ; chaque page ne garde que ses ajustements d'alignement vertical.
   Exclus : .claim-declaration__check-input / .claim-warranty__check-input / .acnm-warranty-cb —
   cases personnalisées (input masqué + boîte SVG, design partagé components/checkbox.css) ;
   .form__radio-option — migré vers le même composant custom .radio-box/.radio-option
   (components/radio-group.css). */
.attestation-radio__option input[type="radio"] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ===================================================================
   .form-actions — barre d'actions de formulaire (Valider / Retour…)
   Composant générique BEM, partagé avec .form__nav (pages/form.css — Form/*, même
   gabarit : la navigation bas de page des formulaires dématérialisés EST un .form-actions
   toujours en variante --split, regroupé ici pour éviter toute divergence de spacing/bordure).
   Reste à terme à remplacer, en phase 2 (après renommage dans les vues), les classes de
   navigation propres à chaque page (*__form-nav, register-actions, mfa-actions, bin-card__actions…).

   Base : ligne flex (retour à la ligne autorisé), séparateur haut, gap/padding-top compacts
   (ex-.form-actions--compact, fusionné dans la base — tous les usages doivent avoir le même
   gabarit compact, plus besoin de modificateur pour ça).
   Modificateurs cumulables :
     .form-actions--split    Retour à gauche / action principale à droite (space-between)
     .form-actions--end      actions alignées à droite
     .form-actions--plain    sans séparateur ni padding-top, marge haute réduite
   Mobile (≤ 620px) : empilement en colonne inversée — action principale en haut,
   lien Retour dessous — bouton principal pleine largeur, lien centré.
   =================================================================== */
.form-actions,
.form__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-medium);

    @media (max-width: 38.75em) {
        flex-direction: column-reverse;
        align-items: stretch;

        & .btn--primary { width: 100%; }
        & .btn--link { text-align: center; }
    }
}

.form-actions--split {
    justify-content: space-between;
}

.form-actions--end {
    justify-content: flex-end;
}

.form-actions--plain {
    margin-top: var(--spacing-lg);
    padding-top: 0;
    border-top: 0;
}

/* Boutons d'action Contact / Attestation — [Valider][Retour] avec row-reverse.
   DOM : l'action principale est en premier dans le HTML (tab order naturel) ;
   le CSS bascule visuellement Retour à gauche / Valider à droite.
   Mobile : empile en colonne (Valider en haut, Retour en bas).
   Règle groupée ici pour éviter la duplication dans contact.css / attestation.css.
   Phase 2 : migrer vers .form-actions.form-actions--split (écarts : row-reverse,
   gap var(--spacing-lg2), pas de séparateur haut, tous les .btn pleine largeur en mobile). */
.contact-form__actions,
.attestation-form__actions,
.my-account__actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-lg2);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg2);
}

@media (max-width: 38.75em) {
    .contact-form__actions,
    .attestation-form__actions,
    .my-account__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-form__actions .btn,
    .attestation-form__actions .btn,
    .my-account__actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* File Input */
.file-input {
    display: none;
}
/* ===== Boite de dialogue ===== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;

    /* flex + centrage vertical : le pattern précédent (display:block, ancré en haut via
       margin-top fixe sur .modal-dialog) ne centrait jamais verticalement — correct pour un
       contenu très variable en hauteur, mais visuellement flottant sur les modales courtes. */
    &.show {
        display: flex;
        align-items: center;
        justify-content: center;

        & .modal-dialog {
            animation: slideDown var(--modal-anim-duration) ease-out;
        }
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-bg);
    animation: fadeIn var(--modal-anim-duration) ease-in-out;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: var(--modal-width);
    margin: 1.75rem auto;
    pointer-events: none;

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) {
        max-width: calc(100% - 1rem);
        margin: var(--spacing-xs);
    }

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) {
        max-width: 100%;
        margin: 0;
        /*min-height: 100dvh;*/
        display: flex;
        flex-direction: column;
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-modal);
    pointer-events: auto;
    max-height: calc(100vh - 2.5rem);

    /* Typographie propre aux modales (maquette) : Open Sans 16px. Posée ici explicitement — les
       modales vivent hors du flux des pages et ne doivent pas dépendre de l'héritage (body = Inter). */
    font-family: var(--font-family-label); /* Open Sans (variables.css) */
    font-size: var(--font-size-base);      /* 16px */
    line-height: var(--line-height-base);
    color: var(--color-text-primary);

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) {
        border-radius: 0;
        max-height: 100dvh;
        flex: 1;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--modal-padding);
    border-bottom: 0.1rem solid var(--color-border);

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) { padding: var(--modal-padding-sm); }
}

.modal-title {
    flex-grow: 1;
    margin: 0;
    font-size: var(--font-size-h2); /* 24px — titre de modale, toutes variantes */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);

    & svg {
        width: 1.125rem; /* 18px */
        height: 1.125rem;
    }

    &:hover { background-color: var(--color-bg-hover-light); color: var(--color-text-primary); }
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--modal-padding);
    overflow-y: auto;

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) { padding: var(--modal-padding-sm); }

    & .errors {
        list-style: none;
        padding: 0;
        margin: var(--spacing-sm4) 0 0 0;

        & li {
            padding: var(--spacing-xs5);
            margin-bottom: var(--spacing-xs4);
            background-color: var(--color-error-bg);
            border-left: 0.2rem solid var(--color-error);
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-base);

            &:last-child { margin-bottom: 0; }
        }
    }
}

/* ===== Modale dlg-success / dlg-form-result (succès) — spécifique ===== */

#dlg-success,
#dlg-form-result,
#dlg-claim-confirm {
    /* Cercle vert pâle (dimensions : bloc « cercles d'icône » ci-dessous). */
    & .success-modal__icon-wrap { background: var(--color-success-light); }

    /* Icône check-circle : stroke="currentColor" → contrôlé par color. */
    & .upload-error-icon { color: var(--color-success); }

    & .upload-error-title { color: var(--color-primary); }
}

/* dlg-form-result couvre aussi l'état erreur (même cercle rouge que dlg-upload-error) —
   icon-warning est coloré via --icon-fg (défaut rouge danger), pas .upload-error-icon/color. */
#dlg-form-result .upload-error-icon-wrap {
    background: var(--color-error-light);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs5);
    padding: var(--modal-padding);
    border-top: 0.1rem solid var(--color-border);

    /* 576px ÷ 16 = 36em */
    @media (max-width: 36em) { padding: var(--modal-padding-sm); }
}

body.modal-open,
body.menu-open {
    overflow: hidden;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-3.6rem); opacity: 0; }
    to   { transform: translateY(0);       opacity: 1; }
}

/* ===== Modales d'alerte — layout centré : × flottant, icône, titre, message, boutons empilés =====
   Trois familles de classes historiques partagent désormais les mêmes règles :
     .upload-error-*      (dlg-upload-error, general-error, duplicate-file, consent-deposit, mfa-cooldown,
                           success, claim-confirm, warranty-desc)
     .session-timeout-*   (dlg-session-timeout)
     .modal-warning-*     (dlg-confirm-warning)
   Elles sont référencées par _Modals.cshtml / CreerSinistreLie.cshtml / modal-manager.js : conservées
   telles quelles comme alias d'un futur composant BEM .modal-alert (renommage hors périmètre). */

/* Bouton × flottant en haut à droite (hors flux du body) */
:is(#dlg-upload-error, #dlg-general-error, #dlg-duplicate-file, #dlg-consent-deposit,
    #dlg-mfa-cooldown, #dlg-success, #dlg-claim-confirm, #dlg-warranty-desc, #dlg-radio-info,
    #dlg-form-result, #dlg-confirm-sending) .modal-close,
.modal-warning-close {
    position: absolute;
    top: var(--spacing-xs6);
    right: var(--spacing-xs6);
    left: auto;
    z-index: 1;
}

/* Corps centré (surcharge le padding de .modal-body : même spécificité, déclaré après) */
.upload-error-body,
.session-timeout-body,
.modal-warning-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xs6);
    padding: 2.3rem var(--spacing-md4) var(--spacing-sm4);

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) { padding-left: var(--modal-padding-sm); padding-right: var(--modal-padding-sm); }
}

/* Icône « nue » en tête (sans cercle : dlg-upload-error, general-error, duplicate-file,
   consent-deposit, claim-confirm) : 48px, même taille que le SVG dans un cercle (bloc
   « cercles d'icône » ci-dessous) — un seul gabarit d'icône pour toutes les modales.
   Sélecteur gardé sous les ids (spécificité avec id) : prime aussi sur le « > svg » du bloc
   cercles quand l'icône est DANS un cercle (dlg-success, dlg-mfa-cooldown) — sans effet
   puisque les deux valent désormais 3rem. */
:is(#dlg-upload-error, #dlg-general-error, #dlg-duplicate-file, #dlg-consent-deposit,
    #dlg-mfa-cooldown, #dlg-success, #dlg-claim-confirm, #dlg-warranty-desc, #dlg-form-result,
    #dlg-confirm-sending) .upload-error-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}

/* Titre 24px gras centré — couleur texte par défaut, primaire pour certaines modales (ci-dessous) */
.upload-error-title,
.session-timeout-title,
.modal-warning-title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    color: var(--color-text-primary);
}

.session-timeout-title,
.modal-warning-title {
    color: var(--color-primary);
}

/* Message centré pleine largeur (la couleur suit .modal-content, sauf exceptions ci-dessous) */
.upload-warning-description,
.session-timeout-message,
.modal-warning-message,
#dlg-general-error .upload-error-description {
    width: 100%;
    text-align: center;
}

/* Écarts conservés : marge externe nulle (les .upload-warning-description gardent la marge UA du <p>)
   et couleur secondaire (MFA, session, avertissement). */
.session-timeout-message,
.modal-warning-message,
#dlg-general-error .upload-error-description {
    margin: 0;
}

#dlg-mfa-cooldown .upload-warning-description,
.session-timeout-message,
.modal-warning-message {
    color: var(--color-text-secondary);
}

/* ===== Cercles d'icône des modales d'alerte — 64 × 64px, SVG 48px centré =====
   Un seul bloc pour les 4 variantes (succès, MFA, avertissement, session) ; chaque modale
   ne pose plus que la couleur de fond du cercle et la couleur de l'icône. */
.success-modal__icon-wrap,
.mfa-cooldown-icon,
.session-timeout-icon-wrap,
.modal-warning-icon-wrap,
.upload-error-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;  /* 64px (1rem = 16px) */
    height: 4rem;
    border-radius: 50%;

    & > svg {
        width: 3rem; /* 48px — même gabarit que l'icône « nue » (voir bloc au-dessus) */
        height: 3rem;
    }
}

/* .success-modal__icon-wrap/.upload-error-icon-wrap pose display:inline-flex : règle auteur qui
   écrase silencieusement [hidden] (règle UA, display:none) malgré une spécificité comparable —
   nécessaire dès qu'un même wrapper est basculé entre icône succès/erreur (#dlg-form-result). */
.success-modal__icon-wrap[hidden],
.upload-error-icon-wrap[hidden] {
    display: none;
}

/* ===== Pieds de modales d'alerte — boutons empilés pleine largeur =====
   Les boutons gardent le design .btn--primary / .btn--secondary (buttons.css) ; seule la
   largeur est forcée à 100 %. */
.upload-error-footer,
.modal-warning-footer,
.session-timeout-footer {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-xs5);
    padding: var(--spacing-sm4) var(--spacing-md4) var(--spacing-md4);
    border-top: none;

    /* 479px ÷ 16 = 29.9375em */
    @media (max-width: 29.9375em) { padding-left: var(--modal-padding-sm); padding-right: var(--modal-padding-sm); }

    /* Largeur dédiée des modales (342px, voir plus bas) : libellés longs (ex. "Non, je choisis
       un autre document") passent sur 2 lignes plutôt que déborder — hauteur mini au lieu de
       fixe, mais padding horizontal conservé (buttons.css). */
    & .btn {
        width: 100%;
        height: auto;
        min-height: var(--control-height);
        padding-top: var(--spacing-xs4);
        padding-bottom: var(--spacing-xs4);
        white-space: normal;
        text-align: center;
    }

    /* .btn pose display:inline-flex (buttons.css) : règle auteur qui écrase silencieusement
       [hidden] (règle UA, display:none) malgré une spécificité comparable — le second bouton
       (ex. #dlg-confirm-warning-cancel masqué via ModalManager.showConfirmWarning({hideCancel})
       ne disparaît pas sans cette redéclaration explicite. */
    & .btn[hidden] { display: none; }
}

/* ===== Modale dlg-mfa-cooldown — spécifique ===== */

#dlg-mfa-cooldown {
    /* Cercle pâle porté par le CONTENEUR (pas le SVG) pour ne pas rogner le triangle. */
    & .mfa-cooldown-icon { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }

    /* .upload-warning-description : couleur secondaire — bloc « Message centré » plus haut. */

    /* Largeur dédiée (342px) — même pattern que .modal-dialog--lg (repli mobile). */
    & .modal-dialog {
        max-width: 21.375rem; /* 342px (1rem = 16px) */

        @media (max-width: 36em) { max-width: calc(100% - 1rem); }
    }
}

/* ===== Modale dlg-confirm-warning (ClaimDeclaration, CreerSinistreLie),
   dlg-upload-error, dlg-session-timeout, dlg-consent-deposit et dlg-claim-confirm — même largeur dédiée ===== */

:is(#dlg-confirm-warning, #dlg-upload-error, #dlg-session-timeout, #dlg-consent-deposit, #dlg-duplicate-file, #dlg-claim-confirm) {
    /* Largeur dédiée (342px) — même pattern que #dlg-mfa-cooldown / .modal-dialog--lg (repli mobile). */
    & .modal-dialog {
        max-width: 21.375rem; /* 342px (1rem = 16px) */

        @media (max-width: 36em) { max-width: calc(100% - 1rem); }
    }
}

/* ===== Modale dlg-consent-deposit — même rendu que dlg-confirm-warning (cercle + titre bleu) ===== */

#dlg-consent-deposit {
    & .upload-error-icon-wrap { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }
}

/* ===== Modale dlg-duplicate-file — même rendu que dlg-confirm-warning (cercle + titre bleu) ===== */

#dlg-duplicate-file {
    & .upload-error-icon-wrap { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }
}

/* ===== Modale dlg-upload-confirm (Process/LinkedClaimAttachments) — header/corps/footer standard,
   titre centré bleu (même rendu que #dlg-cookie-politic), largeur généreuse (805px, comme
   #dlg-confirm-sending) et corps de texte aligné à gauche (contenu multi-lignes) ===== */

#dlg-upload-confirm {
    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) — même gabarit que #dlg-confirm-sending */

        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    & .modal-header {
        justify-content: center;
        position: relative;
        padding: var(--spacing-md2) 4.5rem;
    }

    & .modal-title {
        text-align: center;
        color: var(--color-primary); /* #1434CB */
        font-weight: var(--font-weight-bold);
    }

    & .modal-close {
        position: absolute;
        top: 50%;
        right: var(--modal-padding-sm);
        transform: translateY(-50%);
    }

    & .modal-body ul {
        margin: var(--spacing-xs4) 0 0 0;
        padding-left: var(--spacing-sm3);

        & li { margin-bottom: 0.3rem; }
    }

    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Compte à rebours (MFA cooldown, expiration de session) — 24px, unités 16px ===== */
.mfa-cooldown-timer,
.session-timeout-timer {
    margin: 0;
    font-size: var(--font-size-h2); /* 24px */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-primary);
}

.mfa-cooldown-unit,
.session-timeout-unit {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
    margin: 0 var(--spacing-xs) 0 0.2rem;
    vertical-align: middle;
}

/* ===== Modale info bleue : dlg-warranty-desc (« En savoir plus », infos PPE, personne de confiance —
   contenu injecté via data-desc-target + <template>) ===== */

#dlg-warranty-desc {
    /* Largeur dédiée (805px, contenu riche PPE) — même pattern que .modal-dialog--lg (repli mobile). */
    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) */

        /* Spécificité ID > .modal-dialog de base : sans cette règle, le palier intermédiaire
           de la règle de base (36em → calc(100% - 1rem) + margin: var(--spacing-xs)) resterait
           actif jusqu'à 479px — on veut le plein écran (100%, sans marge) dès 36em ici, pas
           de palier intermédiaire avec un filet de marge. */
        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    /* Contenu HTML riche : aligné à gauche, largeur totale */
    & .warranty-desc__content {
        width: 100%;
        text-align: left;
        color: var(--color-text-body); /* #3D515A */
        line-height: 1.65;

        & p { margin: 0 0 var(--spacing-xs2); &:last-child { margin-bottom: 0; } }
        & ul, & ol { padding-left: var(--spacing-sm3); margin: 0 0 var(--spacing-xs2); }
        & li { margin-bottom: 0.3rem; }
        & :is(strong, b) { color: var(--color-heading); } /* #3C4D6A */

        /* Espacement dédié : sans ça, la liste qui suit un <b> (contenu resx, ex. PPEFamilyModalContent)
           colle directement dessous (margin-top:0 posé par la règle ul/ol ci-dessus). */
        & :is(strong, b) + :is(ul, ol) { margin-top: var(--spacing-sm); }
    }

    /* Même padding vertical de footer que #dlg-cookie-politic / #dlg-cookie-consent / #dlg-radio-info */
    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Modale info bleue : dlg-radio-info (définitions .radio-info-link — PPE, PPE famille,
   personne de confiance). Même gabarit que #dlg-warranty-desc, footer distinct (bouton unique). ===== */

#dlg-radio-info {
    /* Largeur dédiée (805px, contenu riche PPE) — même pattern que #dlg-warranty-desc. */
    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) */

        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    /* Contenu HTML riche : aligné à gauche, largeur totale (mêmes règles que .warranty-desc__content) */
    & .radio-info__content {
        width: 100%;
        text-align: left;
        color: var(--color-text-body); /* #3D515A */
        line-height: 1.65;

        & p { margin: 0 0 var(--spacing-xs2); &:last-child { margin-bottom: 0; } }
        & ul, & ol { padding-left: var(--spacing-sm3); margin: 0 0 var(--spacing-xs2); }
        & li { margin-bottom: 0.3rem; }
        & :is(strong, b) { color: var(--color-heading); } /* #3C4D6A */
        & :is(strong, b) + :is(ul, ol) { margin-top: var(--spacing-sm); }
    }

    /* Même padding vertical de footer que #dlg-cookie-politic / #dlg-cookie-consent */
    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Modale dlg-upload-error — spécifique ===== */

#dlg-upload-error {
    /* Cercle rouge pâle + titre bleu — mêmes couleurs que .modal-warning-icon-wrap / .modal-warning-title (dlg-confirm-warning). */
    & .upload-error-icon-wrap { background: var(--color-error-light); }

    & .upload-error-title { color: var(--color-primary); }

    & .upload-error-description {
        width: 100%;

        & .errors {
            list-style: none;
            padding: 0;
            margin: 0;

            & li {
                font-size: var(--font-size-base);
                color: var(--color-text-primary);
                text-align: left;
                padding: 0;
                margin: 0 0 0.3rem 0;
                background: none;
                border: none;
                border-radius: 0;
            }
        }
    }

    & .upload-error-rules {
        width: 100%;
        padding: var(--spacing-xs6) var(--spacing-xs6) var(--spacing-xs6) 2.3rem;
        margin: 0;
        background-color: var(--color-bg-light);
        border-radius: var(--border-radius-sm);
        text-align: left; /* le corps centre le texte ; la liste de règles reste alignée à gauche */

        & li {
            font-size: var(--font-size-sm);
            color: var(--color-text-primary);
            margin-bottom: var(--spacing-xs3);
            line-height: var(--line-height-base);

            &:last-child { margin-bottom: 0; }
        }
    }
}

/* #dlg-general-error .upload-error-description : bloc « Message centré » plus haut. */

/* ===== Modale dlg-duplicate-file ===== */

#dlg-duplicate-file {
    & .duplicate-file-list {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;

        & li {
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            padding: var(--spacing-xs4) var(--spacing-xs6);
            margin-bottom: 0.3rem;
            background-color: var(--color-bg-light);
            border-left: 0.2rem solid var(--color-warning);
            border-radius: var(--border-radius-sm);
            text-align: left;
            word-break: break-word;

            &:last-child { margin-bottom: 0; }
        }
    }
}

/* ===== #dlg-session-timeout ===== */

/* .session-timeout-body / -title / -message : bloc « Modales d'alerte » plus haut ;
   .session-timeout-timer / -unit : bloc « Compte à rebours » ; cercle : bloc « cercles d'icône ». */
#dlg-session-timeout {
    & .session-timeout-icon-wrap { background: var(--color-warning-bg); }

    & .session-timeout-icon { --icon-fg: var(--color-icon-warning); }
}

/* ===== .modal-dialog--lg (politique cookies, consentement) ===== */

.modal-dialog--lg {
    max-width: 65rem;

    @media (max-width: 36em) { max-width: calc(100% - 1rem); }
}

/* ===== #dlg-cookie-politic ===== */

#dlg-cookie-politic,
#dlg-cookie-consent {
    & .modal-dialog {
        max-width: 70.0625rem; /* 1121px (1rem = 16px) */
    }

    & .modal-header {
        justify-content: center;
        position: relative;
        padding: var(--spacing-md2) 4.5rem;
    }

    & .modal-title {
        text-align: center;
        color: var(--color-primary); /* #1434CB */
        font-weight: var(--font-weight-bold);
    }

    & .modal-close {
        position: absolute;
        top: 50%;
        right: var(--modal-padding-sm);
        transform: translateY(-50%);
    }

    & .modal-body {
        max-height: 65vh;
        /* Police/taille : héritées de .modal-content (Open Sans 16px) */
        color: var(--color-text-body);
        line-height: 1.7;

        & h4 {
            font-size: 1.2rem;
            font-weight: var(--font-weight-medium);
            color: var(--color-text-primary);
            margin: var(--spacing-sm2) 0 var(--spacing-xs4);
        }

        & p { margin: 0 0 var(--spacing-xs2); }

        & a {
            color: var(--color-primary);
            text-decoration: underline;
        }
    }

    & .modal-footer {
        padding-top: var(--spacing-xs5);
        padding-bottom: var(--spacing-xs5);
    }
}

/* ===== Contenu _CookiesPoliticPopupBody ===== */

.cookie-politic-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs2);
}

.cookie-politic-subtitle {
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-xs4);
}

.cookie-politic-description {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* ===== Modales d'avertissement — layout centré icône warning (dlg-confirm-warning) =====
   .modal-warning-close / -body / -title / -message / -footer : blocs « Modales d'alerte » et
   « Pieds de modales d'alerte » plus haut. Dimensions du cercle : bloc « cercles d'icône ». */
.modal-warning-icon-wrap { background: var(--color-warning-bg); }

.modal-warning-icon { --icon-fg: var(--color-icon-warning); }

/* Variante "download-error" (échec de téléchargement) : icône rouge danger, même cercle/couleur
   que #dlg-upload-error, au lieu de l'orange par défaut des autres variantes de dlg-confirm-warning. */
#dlg-confirm-warning[data-variant="download-error"] {
    & .modal-warning-icon-wrap { background: var(--color-error-light); }
    & .modal-warning-icon { --icon-fg: var(--color-icon-danger); }
}

/* ===== Modale dlg-confirm-sending — même design que dlg-confirm-warning
   (icône cercle centrée, titre bleu), mais largeur dédiée plus généreuse (805px) vu le
   contenu plus long (paragraphes + liste) ===== */

#dlg-confirm-sending {
    & .upload-error-icon-wrap { background: var(--color-warning-bg); }

    & .upload-error-title { color: var(--color-primary); }

    & .modal-dialog {
        max-width: 50.3125rem; /* 805px (1rem = 16px) — même gabarit que #dlg-warranty-desc */

        @media (max-width: 36em) {
            max-width: 100%;
            margin: 0;
        }
    }

    /* Icône + titre restent centrés (famille .upload-error-body) ; le corps du texte, plus
       long, repasse en aligné à gauche (lisibilité). */
    & .confirm-sending-body {
        text-align: left;

        & p {
            margin: 0 0 var(--spacing-sm4) 0;
            &:last-child { margin-bottom: 0; }
        }

        & ul {
            margin: var(--spacing-xs4) 0 0 0;
            padding-left: var(--spacing-sm3);

            & li { margin-bottom: 0.3rem; }
        }

        /* Icône avertissement inline devant le paragraphe fraude — plus petite que le
           triangle 48px du haut de modale (règle partagée .upload-error-icon). */
        & .confirm-sending-warning {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-xs3);

            & .upload-error-icon {
                flex-shrink: 0;
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }

    /* Footer par défaut (.modal-footer, pas .upload-error-footer) : boutons taille normale,
       côte à côte alignés à droite — comme #dlg-radio-info / #dlg-warranty-desc. */
}

/* ===== Modale dlg-form-result (Form/*) ===== */

/* Bouton « Télécharger » affiché uniquement en cas de succès (form.js bascule [hidden]) —
   .btn pose display:inline-flex (buttons.css) qui prime sinon sur [hidden] (règle UA). */
#btn-form-download[hidden] { display: none; }

/* ===================================================================
   Visionneuse de document — #dlg-file-viewer (Views/Visa/Shared/_Modals.cshtml, modale
   statique comme les autres dlg-*, rendue une fois par le layout). La page appelante pose
   juste le src de #dlg-file-viewer-embed et le titre de #dlg-file-viewer-title avant
   d'appeler ModalManager.show('dlg-file-viewer') — cf. Exchange/myExchange
   (Scripts/Visa/pages/my-exchange.js).

   Reprise du panneau docké à gauche/droite de l'écran de l'ancien _FileView.cshtml
   (#pdf_content / #moveLeft / #moveRight, jQuery, retiré lors de la refonte) plutôt qu'une
   modale centrée classique : le panneau (max 1280px) se cale contre un bord de l'écran,
   laissant voir le reste de la page de l'autre côté ; deux flèches (.file-viewer__nav)
   permettent de le faire glisser d'un bord à l'autre. data-dock="left"|"right" sur la racine
   (posé par Scripts/Visa/pages/my-exchange.js, initFileViewerDock) pilote à la fois la
   position du panneau, le bouton Fermer (toujours au bord qui fait face à l'espace libre,
   comme avant) et la flèche visible (celle qui pointe vers l'espace libre ; l'autre est
   masquée via [hidden], inutile puisqu'il n'y a nulle part où aller de ce côté). Un seul
   mécanisme (transform + transition) sert à la fois pour l'ouverture et pour le glissement
   gauche/droite — remplace le slideDown générique de modal.css (animation: none ci-dessous).

   ⚠️ Ouverture = animation (@keyframes), pas seulement une transition : Modal.show() (modal.js)
   ajoute .show au même tick que le display:none → flex (modal.css, .modal.show) ; une
   transition n'a alors aucune frame "avant" sur laquelle s'appuyer et saute directement à
   l'état final (c'est d'ailleurs pourquoi le slideDown générique utilise déjà @keyframes).
   Un seul @keyframes (fileViewerOpen), piloté par deux custom properties (--file-viewer-*-x)
   plutôt que deux animations nommées différemment selon data-dock : changer le NOM d'une
   animation (animation-name) la rejoue depuis son "from", ce qui aurait rejoué l'ouverture à
   chaque clic sur une flèche (data-dock change alors que .show est déjà posé depuis longtemps).
   En gardant le même nom et en ne faisant varier que les custom properties qu'il référence,
   seule l'ouverture initiale est animée par @keyframes ; une fois l'animation terminée
   (fill-mode none, ~300ms après l'ouverture), c'est la transition ci-dessous qui prend le
   relais pour le glissement gauche/droite — la valeur cascade (transform) suit alors
   normalement les custom properties, qui ont elles bien changé.
   =================================================================== */

#dlg-file-viewer {
    /* --file-viewer-*-x : position ouverte/fermée du panneau, selon le bord docké — voir
       commentaire ci-dessus sur l'intérêt des custom properties plutôt que deux animations. */
    --file-viewer-open-x: 0px;
    --file-viewer-closed-x: -100%;

    /* Docké à droite : gap = largeur dispo au-delà de 1280px (0 si l'écran est plus étroit —
       le panneau colle alors à l'écran quel que soit le bord « choisi », ce qui neutralise de
       fait le glissement sur petit écran). */
    &[data-dock="right"] {
        --file-viewer-open-x: max(0px, 100vw - 80rem);
        --file-viewer-closed-x: calc(100% + max(0px, 100vw - 80rem));
    }

    /* Panneau plein hauteur ancré à gauche (left:0 — le déplacement entre les deux bords se
       fait uniquement via transform, cf. custom properties ci-dessus), jamais recentré par le
       flex du .modal.show générique (modal.css) : position:fixed sort l'élément du flux flex,
       donc justify-content/align-items du parent n'ont plus d'effet — inutile de les neutraliser. */
    & .modal-dialog {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: min(100%, 80rem); /* 1280px (1rem = 16px) */
        max-width: none;
        height: 100%;
        margin: 0;
        transform: translateX(var(--file-viewer-closed-x));
        transition: transform var(--modal-anim-duration) ease-out;
        animation: none; /* neutralise le slideDown générique (modal.css, & .modal-dialog) */
    }

    &.show .modal-dialog {
        transform: translateX(var(--file-viewer-open-x));
        animation: fileViewerOpen var(--modal-anim-duration) ease-out;
    }

    & .modal-content {
        height: 100%;
        max-height: none;
        border-radius: 0; /* panneau accolé à un bord d'écran — pas d'arrondi qui mordrait dans le bord */
    }

    & .modal-header {
        /* Espace réservé aux deux côtés pour le bouton Fermer flottant (.file-viewer__close,
           ~8rem) quel que soit le bord où il se trouve actuellement (data-dock). */
        padding: var(--spacing-md3) 9rem;
    }

    & .modal-title {
        text-align: center;
        color: var(--color-primary);
        font-weight: var(--font-weight-bold);
    }

    /* Bouton Fermer : toujours au bord qui fait face à l'espace libre (même comportement que
       l'ancien #close qui suivait le panneau), pas dans le flux du header — superposé en haut,
       comme les flèches de navigation ci-dessous. pointer-events:auto nécessaire : .modal-dialog
       (modal.css, générique) pose pointer-events:none, et ce bouton est un enfant direct de
       .modal-dialog (pas de .modal-content, qui remet pointer-events:auto pour lui-même) — sans
       ça il reste visible mais ne reçoit plus aucun clic. */
    & .file-viewer__close {
        position: absolute;
        top: var(--spacing-xs);
        z-index: 1;
        pointer-events: auto;
    }

    &[data-dock="left"] .file-viewer__close {
        right: var(--spacing-md2);
        left: auto;
    }

    &[data-dock="right"] .file-viewer__close {
        left: var(--spacing-md2);
        right: auto;
    }
}

/* Icône "X" cachée par défaut (bouton Fermer en pleine largeur, libellé visible) — bascule en
   mobile ci-dessous (icône seule, libellé toujours présent pour les lecteurs d'écran). */
.file-viewer__close-icon {
    display: none;
    width: 1.125rem;
    height: 1.125rem;
}

@keyframes fileViewerOpen {
    from { transform: translateX(var(--file-viewer-closed-x)); }
    to   { transform: translateX(var(--file-viewer-open-x)); }
}

/* ===== Flèches de glissement gauche/droite =====
   Enfants directs de #dlg-file-viewer (pas de .modal-dialog) : positionnées par rapport à
   tout l'écran (#dlg-file-viewer est position:fixed plein écran, modal.css), dans la zone
   grisée au-delà du panneau — jamais par-dessus #dlg-file-viewer-embed (_Modals.cshtml), qui
   capterait sinon le survol/clic même si la flèche est peinte visuellement au-dessus. */

.file-viewer__nav {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-card-subtle);
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);

    & svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    &:hover { background-color: var(--color-bg-hover-light); }
}

/* À côté du bord du panneau, sans le chevaucher (pas collé au bord de l'écran) : .modal-dialog
   et ces flèches partagent le même référentiel de pourcentage (#dlg-file-viewer, position:fixed
   plein écran) — la largeur du panneau (min(100%, 80rem), même formule que .modal-dialog) donne
   directement la position de son bord droit ; le complément (max(0px, 100vw - 80rem)) donne
   celle de son bord gauche quand il est docké à droite. Le transform pousse le rond entièrement
   de l'autre côté de ce bord (avec un petit espace, 0.8rem) plutôt que de le centrer dessus. */
.file-viewer__nav--left {
    left: max(0px, 100vw - 80rem); /* bord gauche du panneau docké à droite */
    transform: translate(calc(-100% - 0.8rem), -50%);
}

.file-viewer__nav--right {
    left: min(100%, 80rem); /* bord droit du panneau docké à gauche */
    transform: translate(0.8rem, -50%);
}

/* .file-viewer__nav pose display:flex : règle auteur qui écrase silencieusement [hidden]
   (règle UA, display:none) malgré une spécificité comparable — même piège que .btn[hidden]
   documenté dans modal.css. Sans ceci, la flèche masquée (bord déjà docké) resterait visible
   ET cliquable. */
.file-viewer__nav[hidden] {
    display: none;
}

/* Au-delà de 1280px (largeur du panneau) seulement : en dessous, le panneau occupe tout
   l'écran quel que soit le bord, glisser n'aurait aucun effet visible. */
@media (max-width: 80rem) {
    .file-viewer__nav {
        display: none;
    }
}

.file-viewer__body {
    display: flex;
    padding: 0;
}

.file-viewer__embed {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== Mobile : bouton Fermer réduit à une icône =====
   Le header réserve 9rem de chaque côté pour la pastille "Fermer" en texte (desktop) — bien
   trop sur un petit écran. Padding asymétrique (le bouton Fermer n'est que d'un seul côté sur
   mobile, les flèches de dock étant déjà masquées en dessous de 1280px — cf. @media plus haut).
   Le libellé reste dans le DOM (nom accessible du bouton pour les lecteurs d'écran) mais masqué
   visuellement via la même technique que .visually-hidden (utilities.css) plutôt que
   display:none (qui retirerait le texte du nom accessible). Style repris de .modal-close
   générique (modal.css, ex. #dlg-cookie-politic) — pas de pastille bleue .btn--primary ici,
   override scopé par #dlg-file-viewer (ID) pour primer sur .btn--primary (4 classes dont 2
   :not(), donc plus spécifique qu'une simple classe mais pas qu'un ID). */
@media (max-width: 38.75em) {
    #dlg-file-viewer .modal-header {
        padding: var(--spacing-md) 4.5rem;
    }

    #dlg-file-viewer .file-viewer__close {
        width: 2.3rem;
        height: 2.3rem;
        padding: 0;
        background: none;
        border: none;
        border-radius: var(--border-radius-sm);
        color: var(--color-text-secondary);
    }

    #dlg-file-viewer .file-viewer__close:hover {
        background-color: var(--color-bg-hover-light);
        color: var(--color-text-primary);
    }

    .file-viewer__close-icon {
        display: block;
    }

    .file-viewer__close-label {
        position: absolute;
        width: 0.1rem;
        height: 0.1rem;
        margin: -0.1rem;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ===== Cercle de progression ===== */

.progress-circle {
    flex-shrink: 0;
    width: var(--size-progress-circle); /* 26px */
    height: var(--size-progress-circle); /* 26px */
}

.progress-circle-bg {
    stroke: var(--color-border);
}

.progress-circle-fill {
    stroke: var(--color-primary);
    transition: stroke-dashoffset var(--transition-slow);
}

.upload-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.summary-text {
    font-family: var(--font-family-label); /* alias Open Sans */
    font-size: var(--font-size-sm); /* 14px */
    font-weight: var(--font-weight-normal);
    color: var(--color-text-dark); /* #000000 */
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

/* ===== Overlay de chargement (#loading) =====
   État initial : invisible + non-interactif, sans inline style (CSP safe).
   Visa.css (legacy, chargé après) fournit position/size/background/z-index.
   Transition : opacity + visibility — la classe .is-visible pilote l'affichage.
   • Sur affichage : visibility passe immédiatement (delay 0s) → opacity 200ms.
   • Sur masquage  : opacity 200ms → visibility après 200ms (delay = durée).    */
#loading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms, visibility 0s 200ms;
}
#loading.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms, visibility 0s;
}

/* ===== Spinner de chargement (panneau #loading) ===== */
/* Conteneur centré (taille-agnostique, remplace l'ancien .contentLoading) */
.loading-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Cercle (anneau + arc 25% définis dans le sprite #icon-spinner) en rotation continue */
.loading-spinner {
    width: 4.8rem;
    height: 4.8rem;
    transform-origin: center;
    animation: loading-spin 0.9s linear infinite;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}
/* ===== Composant « progress-bar » : barre de progression linéaire partagée =====
   Rendu par le partial Views/Visa/Shared/_ProgressBar.cshtml (ProgressBarModel).
   La largeur du remplissage est pilotée par un modificateur BEM par pas de 5 %
   (.progress-bar__fill--0 … --100) — jamais par un style inline (CSP style-src 'self').
   Markup : <div class="progress-bar" role="progressbar" aria-label="…"
                 aria-valuenow="X" aria-valuemin="0" aria-valuemax="100">
               <div class="progress-bar__fill progress-bar__fill--X"></div>
            </div>                                                                    */

.progress-bar {
    width: 100%;
    height: 0.3rem;
    background: var(--color-border);
    border-radius: 0.15rem;
    margin: var(--spacing-sm) 0 var(--spacing-lg2);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 0.15rem;
}

/* Remplissage par pas de 5 % */
.progress-bar__fill--0   { width: 0; }
.progress-bar__fill--5   { width: 5%; }
.progress-bar__fill--10  { width: 10%; }
.progress-bar__fill--15  { width: 15%; }
.progress-bar__fill--20  { width: 20%; }
.progress-bar__fill--25  { width: 25%; }
.progress-bar__fill--30  { width: 30%; }
.progress-bar__fill--35  { width: 35%; }
.progress-bar__fill--40  { width: 40%; }
.progress-bar__fill--45  { width: 45%; }
.progress-bar__fill--50  { width: 50%; }
.progress-bar__fill--55  { width: 55%; }
.progress-bar__fill--60  { width: 60%; }
.progress-bar__fill--65  { width: 65%; }
.progress-bar__fill--70  { width: 70%; }
.progress-bar__fill--75  { width: 75%; }
.progress-bar__fill--80  { width: 80%; }
.progress-bar__fill--85  { width: 85%; }
.progress-bar__fill--90  { width: 90%; }
.progress-bar__fill--95  { width: 95%; }
.progress-bar__fill--100,
.progress-bar__fill--full { width: 100%; } /* --full : alias historique (claim-declaration.js) */

/* ===== Footer Actions ===== */

.footer-sentinel {
    height: 0.1rem;
    margin-bottom: -0.1rem;
    visibility: hidden;
    pointer-events: none;
}

.footer-actions {
    position: sticky;
    bottom: 0;
    background: var(--color-white);
    padding: var(--spacing-md) var(--spacing-sm);
    margin-top: var(--spacing-xl);
    z-index: var(--z-index-sticky);
    min-height: 3.6rem;
    border: 0.1rem solid transparent;
    box-shadow: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);

    &.is-stuck {
        border-top-color: var(--color-border);
        box-shadow: var(--shadow-sticky);
    }

}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: space-between;
}

.footer-actions-buttons {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);

    & #btn-validate {
        min-width: 20rem;
    }
}

.back-link {
    font-size: var(--font-size-md);
    text-decoration: underline;
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-fast);

    &:hover { color: var(--color-secondary-hover); }
}

/* ===================================================================
   Composant Accordion — animation générique (grid trick)

   Structure injectée par window.Accordion :
     .accordion-panel        = grid container (0fr → 1fr via .is-open)
     .accordion-panel__inner = grid item, overflow:hidden SANS padding
                               (le padding sur cet élément empêcherait
                               0fr d'atteindre 0 px)
     .accordion-panel__body  = wrapper de contenu : padding, fond, etc.
                               (styles définis par le CSS page/composant
                               consommateur)

   L'accessibilité (aria-expanded, aria-controls, role, tabindex) et
   le toggle .is-open sont pilotés par window.Accordion.
   =================================================================== */

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-accordion);
}

.accordion-panel.is-open {
    grid-template-rows: 1fr;
}

/* Aucun padding — overflow:hidden seul donne min-height 0 au grid item */
.accordion-panel__inner {
    overflow: hidden;
}

/* .accordion-panel__body : pas de styles ici — chaque page définit
   padding, fond, border-radius, etc. en surchargeant ce sélecteur
   dans son propre fichier CSS. */

/* ===================================================================
   Trigger — style partagé (+/− icône, focus, hover), commun à tous les
   accordéons du site (FAQ .faq__trigger/.faq-header, formulaires
   .form__accordion-trigger…). Un contexte au visuel encadré (boîte
   bordée) peut surcharger le padding horizontal dans son propre CSS
   page (ex. form.css, .form__data-protection .form__accordion-trigger).
   =================================================================== */

.faq__trigger,
.faq-header,
.form__accordion-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm3) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    line-height: var(--line-height-snug);
    background: transparent;
    border: none;
    text-align: left;
    margin: 0;
    cursor: pointer;
    user-select: none;
    color: var(--color-heading);

    &::before {
        content: "+";
        flex-shrink: 0;
        width: 1.6rem;
        font-size: 1.8rem;
        font-weight: var(--font-weight-normal);
        line-height: 1;
        text-align: center;
        transition: color var(--transition-fast);
    }

    &[aria-expanded="true"]::before {
        content: "\2212"; /* signe moins (U+2212) en échappement CSS : évite la corruption d'encodage */
    }

    &:hover {
        color: var(--color-primary);

        &::before { color: var(--color-primary-hover); }
    }

    /* Anneau : règle globale :focus-visible (Default/base/utilities.css) ; seul le rayon est spécifique */
    &:focus-visible {
        border-radius: var(--border-radius-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion-panel {
        transition: none;
    }
}

/* ===================================================================
   Composant doc-group — carte accordéon « groupe de sections »
   Utilisé par Process/LinkedClaimAttachments (groupes de documents) et
   Form/VehiculeLocationForm (sections du questionnaire).

   Markup :
     .doc-group
       .doc-group__header                 rangée titre (+ bouton d'action optionnel)
         h2|h3.doc-group__heading
           button.doc-group__toggle[aria-expanded]
             span.doc-group__dash         icône +/− (::before)
             span.doc-group__title
       .accordion-panel(.doc-group__body) > .accordion-panel__inner > .accordion-panel__body
         ul.doc-group__list               liste de cartes (LinkedClaimAttachments)

   Le corps hérite du grid trick de accordion.css (.accordion-panel).
   Le padding de .accordion-panel__body peut être surchargé par page
   (ex. vehicule-location-form.css).
   =================================================================== */

.doc-group {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

/* Rangée titre + bouton action */
.doc-group__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm2);
    padding: var(--spacing-sm3) var(--spacing-md3);
}

/* Heading h2/h3 — occupe l'espace restant, margin reset */
.doc-group__heading {
    flex: 1;
    margin: 0;
}

/* Bouton toggle de l'accordéon — pleine largeur dans le heading */
.doc-group__toggle {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--spacing-sm2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    font-family: var(--font-family-base);
    color: var(--color-text-primary);

    /* Anneau : règle globale :focus-visible (Default/base/utilities.css) ; seul le rayon est spécifique */
    &:focus-visible {
        border-radius: var(--border-radius-sm);
    }
}

.doc-group__dash {
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    line-height: 1;
}

.doc-group__toggle[aria-expanded="false"] .doc-group__dash::before {
    content: "+";
}

.doc-group__toggle[aria-expanded="true"] .doc-group__dash::before {
    content: "\2212"; /* signe moins − */
}

.doc-group__title {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

/* Corps accordéon — padding autour du contenu (liste de cartes ou champs) */
.doc-group .accordion-panel__body {
    padding: var(--spacing-sm);
}

/* Liste de documents */
.doc-group__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===================================================================
   Responsive
   =================================================================== */

/* Breakpoint intermédiaire : header en colonne dès 56em (896px).
   Au-dessous de cette largeur, un bouton d'action (ex. « Transmettre »)
   n'a plus la place de rester sur la même ligne que le titre de groupe. */
@media (max-width: 56em) {
    .doc-group__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm3) var(--spacing-md2);
    }
}

/* ===== Composant document ===== */

.document-item {
    margin: var(--spacing-sm3) 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-document);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xs);
}

.document-item:first-child {
    margin-top: 0;
}

/* Document Header - mobile-first
   _DocumentsListToUpload (<480px) :
     ligne 1 : status-icon | title (flex:1) | collapse-document-info
     ligne 2 : document-actions (btn-file-trigger, pleine largeur)
   _DigitizedDocumentsList - cas non complete (<480px) :
     ligne 1 : status-icon | title (flex:1) | collapse-document-info
     ligne 2 : btn-file-trigger (pleine largeur)
   _DigitizedDocumentsList - cas complete (<480px) :
     ligne 1 : status-icon | title (flex:1) | digitized-menu-trigger | collapse-document-info
   >= 480px (tous les cas) :
     ligne unique : status-icon | title (flex:1) | btn-file-trigger ou file-actions inline | collapse-document-info
*/
.document-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacing-xs);
    row-gap: var(--spacing-xs4);
    max-width: 100%;
    position: relative;
    cursor: pointer; /* toute la ligne bascule l'accordéon (collapse.js), sauf boutons/liens */
}

/* Composant du bundle core ~/Content/VisaCSS (chargé sur toutes les pages Visa) : la taille
   (2.25rem, 2.857rem ≤ 38.75em) s'applique donc aussi à Process/LinkedClaimAttachments
   (.doc-item__icon document-status-icon, design de référence), qui ne redéclare plus
   width/height pour rester identique à Process/ClaimAttachmentsNextStep. */
.document-status-icon {
    order: 1;
    flex-shrink: 0;
    margin: var(--spacing-xs3);
    width: 2.25rem;
    height: 2.25rem;
}

@media (max-width: 38.75em) {
    .document-status-icon {
        width: 2.857rem;
        height: 2.857rem;
    }
}

.document-header .document-title {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-family: var(--font-family-label); /* Open Sans (alias) — même famille que .answer-card__title/.question-label */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    line-height: 1.1;
    text-align: left;
}

/* Mobile : btn-file-trigger sur ligne 2, pleine largeur (enfants directs uniquement) */
.document-header > .btn-file-trigger {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
}

/* Mobile : burger sur ligne 1, avant collapse */
.document-header .digitized-menu-trigger {
    order: 3;
    flex-shrink: 0;
}

/* Mobile : popup ancre sur le header */
.document-header .digitized-file-actions {
    top: calc(100% + 0.3rem);
    right: 2.9rem;
}

/* collapse toujours en dernier sur ligne 1 */
.collapse-document-info {
    order: 4;
    flex-shrink: 0;
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    margin: var(--spacing-xs3);
    color: var(--color-heading); /* #3C4D6A */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* _DocumentsListToUpload : document-actions sur ligne 2 en mobile */
.document-actions {
    order: 5;
    flex: 0 0 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.document-actions button:not(.file-menu-trigger) {
    width: 100%;
}

.document-actions .file-menu-trigger {
    display: flex;
    margin-left: auto;
}

.document-actions .file-actions {
    right: 0;
    left: auto;
    top: calc(100% + 0.3rem);
}
/* Collapse Toggle */
.collapse-toggle {
    display: none;
}

.collapse-toggle:checked ~ .document-header .collapse-document-info .chevron {
    transform: rotate(180deg);
}

.collapse-toggle:checked ~ .document-info {
    grid-template-rows: 1fr;
}

/* Collapse Button */
.collapse-document-info:hover {
    background-color: rgba(var(--color-primary-rgb), 0.1);
}

.collapse-document-info:focus {
    outline: 0.1rem solid var(--color-primary);
    outline-offset: 0.1rem;
    background-color: rgba(var(--color-primary-rgb), 0.15);
}

.collapse-document-info:active {
    background-color: rgba(var(--color-primary-rgb), 0.2);
}

/* Chevron collapse — design partagé avec .doc-item__chevron (Process/LinkedClaimAttachments,
   pages/linked-claim-attachments.css) : taille/transition factorisées ici (bundle core
   VisaCSS) pour éviter la duplication. Couleur non fixée ici : héritée du conteneur
   (.collapse-document-info → --color-heading) ; .doc-item__chevron garde la sienne
   (--color-text-secondary), propre à cette page. */
.collapse-document-info .chevron,
.doc-item__chevron {
    flex-shrink: 0;
    margin: 0;
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-base);
}

/* Document Info Panel */
.document-info {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-accordion);
    text-align: left;
    color: var(--color-text-dark);
}

.document-info-content {
    overflow: hidden;
}

.document-info-content hr {
    margin-top: var(--spacing-sm);
    border: none;
    border-top: 0.1rem solid var(--color-divider); /* #DBE1E2 */
    margin-bottom: var(--spacing-xs5);
}

/* Typographie label/texte de description — partagée avec .doc-item__desc-label/-text
   (Process/LinkedClaimAttachments, pages/linked-claim-attachments.css), factorisée ici
   (bundle core VisaCSS) pour éviter la duplication. Marge propre à chaque page : gap flex
   sur .doc-item__body/__desc-section là-bas, margin ici (pas de wrapper flex par section). */
.document-info-content h4,
.doc-item__desc-label {
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-sm); /* 14px */
    color: var(--color-text-body); /* #3D515A */
    font-weight: var(--font-weight-bold);
}

.document-info-content p,
.doc-item__desc-text {
    font-family: var(--font-family-label); /* Open Sans (alias) */
    font-size: var(--font-size-sm); /* 14px */
    color: var(--color-text-body); /* #3D515A */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
}

.document-info-content h4,
.document-info-content p {
    /* Aligne le texte sur le bord gauche visible de .document-status-icon, qui a sa propre
       marge (--spacing-xs3) en plus du padding de la carte (.document-item, --spacing-xs) —
       contrairement à .document-info-content hr, qui reste bord à bord. */
    padding-left: var(--spacing-xs3);
}

.document-info-content h4 {
    margin: 0 0 var(--spacing-xs) 0;
}

.document-info-content p {
    margin: 0 0 var(--spacing-sm) 0;
}

.document-info-content p:last-child {
    margin: 0;
}

/* ===== Liste fichiers uploadés - mobile-first ===== */

.uploaded-files-list {
    text-align: left;

    & hr {
        border: none;
        border-top: 0.1rem solid var(--color-border);
        margin: var(--spacing-xs5) 0;
    }
}

/* -----------------------------------------------
   uploaded-file-item
   Mobile  : [icon] [file-name flex:1] [burger]
   >= 480px: [icon] [file-name flex:1] [file-actions] (burger masqué)
----------------------------------------------- */
.uploaded-file-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs4);
    margin: var(--spacing-xs3) 0;

    &:hover { background-color: var(--color-bg-hover); }

    & .document-status-icon {
        order: -1;
        flex-shrink: 0;
        display: block;
        width: var(--spacing-lg); /* 32px */
        height: var(--spacing-lg); /* 32px */
        object-fit: contain;
    }
}

.file-name {
    flex: 1 1 0;
    font-family: var(--font-family-label); /* alias Open Sans */
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Burger (mobile uniquement) ---- */
.file-menu-trigger {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);

    &:hover { background-color: rgba(var(--color-primary-rgb), 0.1); }
    &:focus { outline: 0.1rem solid var(--color-primary); outline-offset: 0.1rem; }
}

/* ---- Popup actions (mobile) ---- */
.file-actions {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% - 0.3rem);
    right: 0.6rem;
    z-index: 100;
    background: var(--color-white);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-popover);
    min-width: 10rem;
    padding: 0.3rem 0;

    &.is-open { display: flex; }
}

/* Même famille/poids que .btn--link (buttons.css) — reste un menuitem (fond au survol,
   pas de soulignement) plutôt qu'un vrai .btn--link, mais garde la même identité texte. */
.file-action-link {
    display: block;
    width: 100%;
    padding: var(--spacing-xs5) var(--spacing-sm4);
    font-family: var(--font-family-btn); /* Open Sans (alias) */
    font-size: var(--font-size-base); /* 16px */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-quick), color var(--transition-quick);

    &:hover { background-color: var(--color-primary-light); color: var(--color-btn-primary-hover); }
    &:focus { outline: 0.1rem solid var(--color-primary); outline-offset: -0.1rem; border-radius: var(--border-radius-xs); }
}

/* ---- Input file : masqué visuellement, accessible au clic via le label/bouton ---- */
.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Couleurs des icônes SVG (sprite : Views/Shared/_SvgSprites.cshtml) =====
   La géométrie reste dans le sprite ; le design (couleurs) est défini ici via les
   variables --icon-bg (fond) et --icon-fg (glyphe), qui héritent jusqu'au <use>.
   Les valeurs proviennent des tokens de variables.css (thème Visa). */

/* Cartes accueil : notice / attestation / faq (fond bleu + glyphe doré) */
.home-card__icon {
    --icon-bg: var(--color-primary);
    --icon-fg: var(--color-icon-gold);
}

/* Avertissement (modales) : rouge danger par défaut, orange en variante */
.upload-error-icon {
    --icon-fg: var(--color-icon-danger);
}

.upload-error-icon--warning {
    --icon-fg: var(--color-icon-warning);
}

/* Statut de document — en attente (carré bleu-gris + fichier) */
.document-status-icon[data-status="pending"] {
    --icon-bg: var(--color-status-pending-bg);
    --icon-fg: var(--color-status-pending-fg);
}

/* Statut de document — complété (carré vert + coche) */
.document-status-icon[data-status="complete"] {
    --icon-bg: var(--color-status-success-bg);
    --icon-fg: var(--color-status-success-fg);
}

/* Statut de document — fichier uploadé (carré bleu + fichier) */
.uploaded-file-item .document-status-icon {
    --icon-bg: var(--color-status-uploaded-bg);
    --icon-fg: var(--color-status-uploaded-fg);
}

/* Spinner de chargement (#loading) : anneau gris + arc bleu */
.loading-spinner {
    --icon-bg: var(--color-border);
    --icon-fg: var(--color-primary);
}

/* ===== Contenu de la popup préférences cookies ===== *
 * Styles chargés dans #dlg-cookie-consent .modal-body via AJAX
 * (Views/Default/Consent/_CookiesPopupBody + _CookiesContainer + _CookiesBoard).
 * Les classes Bootstrap (.row, .col-*, .pull-*, .btn-group, .hidden-*)
 * sont restyled ICI, scopées au contexte consent — Bootstrap n'est pas chargé.
 */

/* ── Conteneur principal ──────────────────────────────────────────────── */

#formCookiesConsent {
    width: 100%;
}

.bordurePopup {
    padding: var(--spacing-sm) 0;
}

/* ── Titre et description ─────────────────────────────────────────────── */

.bordurePopup .titre {
    margin-bottom: var(--spacing-sm);
}

.bordurePopup .titre h4 {
    font-size: 1.14rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
}

.bordurePopup .description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.bordurePopup .description + .description {
    margin-top: var(--spacing-sm);
}

.bordurePopup .consent-section--first {
    margin-top: var(--spacing-sm);
}

/* ── Utilitaires Bootstrap replacés (scope strict) ───────────────────── */

.bordurePopup .row,
.panelCookieList .row {
    display: flex;
    flex-wrap: wrap;
}

.bordurePopup .col-xs-12,
.panelCookieList .col-xs-12 {
    flex: 0 0 100%;
    min-width: 0;
}

.bordurePopup .pull-left  { margin-right: auto; }
.bordurePopup .pull-right { margin-left: auto; }

/* ── Panneaux de catégories cookie ───────────────────────────────────── */

.panelCookie {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.panelCookie > .panel-heading {
    background: var(--color-primary-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.panel-title-consent {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin: 0;
}

.panelCookie > .panel-body {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* ── Bouton expand/collapse ───────────────────────────────────────────── */

.cookie-toggle-btn,
.cookie-toggle-btn-2 {
    display: inline-block;
    font-size: 0.93rem;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition-quick);
}

.cookie-toggle-btn:hover,
.cookie-toggle-btn-2:hover {
    color: var(--color-primary-hover);
}

/* ── Boutons de consentement par groupe ──────────────────────────────── */

.bordurePopup .btn-group,
.panelCookieList .btn-group {
    display: inline-flex;
    gap: var(--spacing-xs4);
}

.btnGrpConsent,
.btnConsent {
    padding: var(--spacing-xs4) var(--spacing-sm);
    font-size: 0.93rem;
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-light);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-quick), color var(--transition-quick), border-color var(--transition-quick);
}

.btnGrpConsent:hover,
.btnConsent:hover {
    background: var(--color-bg-hover);
}

/* État actif : acceptation */
.acceptGroupConsent.active,
.btnConsent.active:has(.acceptConsent) {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* État actif : refus */
.rejectGroupConsent.active,
.btnConsent.active:has(.rejectConsent) {
    background: var(--color-error-text);
    color: var(--color-white);
    border-color: var(--color-error-text);
}

/* Masquer les radio buttons natifs (labels stylisés) */
.btnConsent input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ── Liste de cookies (_CookiesBoard) ────────────────────────────────── */

.panelCookieList {
    width: 100%;
}

.tableBorderBottom {
    position: relative;
    padding-bottom: var(--spacing-xs4);
    margin-bottom: var(--spacing-xs4);
    border-bottom: 1px solid var(--color-border);
}

.consentLine {
    padding: var(--spacing-xs4) 0;
    font-size: 0.93rem;
    color: var(--color-text-primary);
    align-items: flex-start;
    gap: var(--spacing-xs4);
}

.panelCookieList .col-xs-12 { flex: 0 0 100%; }

/* Colonnes responsive (md = ≥ 62em ≈ 992px) */
@media (min-width: 62em) {
    .panelCookieList .col-md-3 { flex: 0 0 25%; }
    .panelCookieList .col-md-4 { flex: 0 0 33.333%; }
    .panelCookieList .col-md-6 { flex: 0 0 50%; }
    .panelCookieList .col-md-8 { flex: 0 0 66.666%; }
    .panelCookieList .hidden-md { display: none; }
    .panelCookieList .hidden-lg { display: none; }
    .panelCookieList .col-xs-8.col-md-12 { flex: 0 0 100%; }
}

@media (max-width: 61.9375em) {
    .panelCookieList .hidden-xs { display: none; }
    .panelCookieList .col-xs-4 { flex: 0 0 33.333%; }
    .panelCookieList .col-xs-8 { flex: 0 0 66.666%; }
    .panelCookieList label {
        font-size: 0.86rem;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
    }
}

/* ── Contenu collapsible ─────────────────────────────────────────────── */

.collapse {
    display: none;
}

.collapse.in {
    display: block;
}

/* ===== Composant « claim-status » : pastille de statut colorée + libellé =====
   Utilisé en lien inline dans Claim/ClaimsList (colonne Statut) et en bloc d'en-tête
   dans Claim/DetailsVisa (claim-status-header, pages/details-visa.css).
   Couleurs d'état définies localement (pas de tokens globaux — états métier). */

.claim-status {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-xs4);
    text-decoration: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    transition: opacity var(--transition-fast);
}

/* Usage lien (ClaimsList, <a class="claim-status">) : lien classique (souligné, se comporte comme
   n'importe quel lien de base) — la couleur d'état reste portée par la pastille, pas par le texte.
   Le <span> de DetailsVisa n'est pas concerné (voir .claim-outcome__header .claim-status__label,
   pages/details-visa.css). */
a.claim-status {
    color: var(--color-status-uploaded-fg); /* #0066CC */
    text-decoration: underline;
}

/* Survol : lien de base, pas d'effet spécifique (juste le retrait du soulignement). */
/* Survol réservé aux pointeurs qui survolent (sur tactile, :hover reste « collé » après un tap). */
@media (hover: hover) {
    a.claim-status:hover {
        text-decoration: none;
    }
}

/* Anneau : règle globale :focus-visible (Default/base/utilities.css) ; seul le rayon est spécifique */
a.claim-status:focus-visible {
    border-radius: var(--border-radius-xs);
}

.claim-status__dot {
    display: inline-block;
    width: 0.875rem; /* 14px */
    height: 0.875rem; /* 14px */
    border-radius: 50%;
    background-color: var(--_status-color);
    flex-shrink: 0;
    /* Aligne la pastille sur la 1re ligne quand le libellé passe sur 2 lignes (align-items: flex-start). */
    margin-top: 0.1875rem;
}

/* Valeurs des couleurs d'état (définies localement — états métier) */
.claim-status--initial  { --_status-color: var(--color-claim-initial); } /* gris #B2C2CB */
.claim-status--ongoing  { --_status-color: var(--color-claim-ongoing); } /* bleu #2490EE */
.claim-status--waiting  { --_status-color: var(--color-claim-waiting); } /* orange #E18801 — en attente de docs */
.claim-status--contact  { --_status-color: var(--color-claim-contact); } /* orange #E18801 — nous contacter */
.claim-status--refused  { --_status-color: var(--color-error); }         /* rouge #B90000 */
.claim-status--accepted { --_status-color: var(--color-claim-accepted); } /* vert #047D26 — indemnisé */

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* ===== MOBILE FIRST APPROACH =====  */

/* Extra Small devices (phones, less than 576px) */
/* Styles par défaut - mobile first */

/* Extra small devices (480px and up) — document-header une seule ligne */
/* 480px ÷ 16 = 30em */
@media (min-width: 30em) {
    /* Ligne unique pour tous les cas */
    .document-header {
        flex-wrap: nowrap;
    }

    /* _DocumentsListToUpload : document-actions inline, avant le chevron (order: 3) */
    .document-actions {
        order: 3;
        flex: 0 0 auto;
        flex-direction: row;
        width: auto;
        position: static;
    }

    .document-actions button:not(.file-menu-trigger) {
        width: auto;
    }

    .document-actions .file-menu-trigger {
        display: none;
    }

    .document-actions .file-actions {
        display: flex;
        flex-direction: row;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        padding: 0;
        min-width: 0;
        gap: var(--spacing-xs6);
    }

    /* _DigitizedDocumentsList : btn-file-trigger inline, avant le chevron (order: 3), burger masqué */
    .document-header > .btn-file-trigger {
        order: 3;
        flex: 0 0 auto;
        width: auto;
    }

    .document-header .digitized-menu-trigger {
        display: none;
    }

    .document-header .digitized-file-actions {
        display: flex;
        flex-direction: row;
        order: 3;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        padding: 0;
        min-width: 0;
        gap: var(--spacing-xs6);
    }

    .collapse-document-info {
        order: 4;
    }

    /* uploaded-file-item : burger masqué, file-actions inline */
    .uploaded-file-item .document-status-icon {
        order: -1;
    }

    .file-menu-trigger {
        display: none;
    }

    .file-actions {
        display: flex;
        flex-direction: row;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: none;
        padding: 0;
        min-width: 0;
        gap: var(--spacing-xs6);
        flex-shrink: 0;
    }

    /* Aligne "Supprimer" avec le bord droit de .document-actions/.btn-file-trigger : le
       document-header réserve à droite la colonne .collapse-document-info (gap + marges +
       largeur), absente sur .uploaded-file-item (pas de chevron). Ne PAS appliquer à
       .digitized-file-actions : ces lignes ont déjà leur propre .collapse-document-info,
       ce margin-right les décalait en trop (double compensation). */
    .uploaded-file-item .file-actions {
        margin-right: calc(var(--spacing-xs) + var(--spacing-xs3) * 2 + 1.5rem);
    }

    .file-action-link {
        padding: var(--spacing-xs3);
        width: auto;
    }
}

/* Small devices (landscape phones, 576px and up) */
/* 576px ÷ 16 = 36em */
@media (min-width: 36em) {
    /* Une seule ligne : boutons à gauche, upload-summary à droite */
    .footer-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--spacing-md);
    }

    /* upload-summary poussé à droite (inversé par rapport au DOM) */
    .footer-row .upload-summary {
        order: 4;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* Les 3 boutons sur une seule ligne, poussés en premier */
    .footer-actions-buttons {
        order: 1;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* Désactive le wrapper mobile : btnReturnTo, btn-save s'intègrent dans la ligne */
    .footer-actions-buttons .footer-row-bottom {
        display: contents;
    }

    /* Ordre ≥576px : btnReturnTo → btn-save → btn-validate */
    .footer-actions-buttons #btnReturnTo  { order: 1; }
    .footer-actions-buttons #btn-save     { order: 2; }
    .footer-actions-buttons #btn-validate { order: 3; width: auto; }
}

/* ===== RESPONSIVE UTILITIES ===== */


/* NOTE: les @import ont été déplacés dans BundleConfig.cs (bundle ~/Content/DefaultCSS)
   pour éliminer 22 requêtes CSS render-blocking en série. Ne pas les remettre ici. */

/* #consent-banner : règle déplacée dans themes/Visa/css/layout/main.css (doublon supprimé). */
@-moz-keyframes ahoverAfter {
  0% {
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
  70% {
    -moz-transform: scale(1.1, 1);
    -ms-transform: scale(1.1, 1);
    -o-transform: scale(1.1, 1);
    -webkit-transform: scale(1.1, 1);
    transform: scale(1.1, 1);
  }
  100% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-webkit-keyframes ahoverAfter {
  0% {
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
  70% {
    -moz-transform: scale(1.1, 1);
    -ms-transform: scale(1.1, 1);
    -o-transform: scale(1.1, 1);
    -webkit-transform: scale(1.1, 1);
    transform: scale(1.1, 1);
  }
  100% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes ahoverAfter {
  0% {
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
  70% {
    -moz-transform: scale(1.1, 1);
    -ms-transform: scale(1.1, 1);
    -o-transform: scale(1.1, 1);
    -webkit-transform: scale(1.1, 1);
    transform: scale(1.1, 1);
  }
  100% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
.masterBtn {
  border: white solid 1px;
  font-family: var(--font-family-semibold);
  font-size: 16px;
  line-height: 24px;
  color: white;
  background: #0097D8;
}
.masterBtn:disabled {
  opacity: 0.4;
}
.masterBtn:hover {
  color: #0097D8;
  box-shadow: white 0 80px 0 2px inset;
  border: #0097D8 solid 1px;
}
.masterBtn:hover a {
  color: #0097D8;
}
.minorBtn {
  border: #0097D8 solid 1px;
  font-family: var(--font-family-semibold);
  font-size: 16px;
  line-height: 24px;
  color: #0097D8;
  background: white;
}
.minorBtn:disabled {
  opacity: 0.4;
}
.minorBtn:hover {
  color: white;
  box-shadow: #0097D8 0 80px 0 2px inset;
  border: white solid 1px;
}
.minorBtn:hover a {
  color: white;
}
.yellowBtn {
  border: #f7b600 solid 1px;
  font-family: var(--font-family-semibold);
  font-size: 16px;
  line-height: 24px;
  color: #393C3E;
  background: #f7b600;
}
.yellowBtn:disabled {
  opacity: 0.4;
}
.yellowBtn:hover {
  color: #393C3E;
  box-shadow: #f6d476 0 80px 0 2px inset;
  border: #f7b600 solid 1px;
}
.yellowBtn:hover a {
  color: #393C3E;
}
.greyBtn {
  border: #C6C6C6 solid 1px;
  font-family: var(--font-family-semibold);
  font-size: 16px;
  line-height: 24px;
  color: #71787E;
  background: white;
}
.greyBtn:disabled {
  opacity: 0.4;
}
.greyBtn:hover {
  color: #393C3E;
  box-shadow: #C6C6C6 0 80px 0 2px inset;
  border: rgba(0, 0, 0, 0) solid 1px;
}
.greyBtn:hover a {
  color: #393C3E;
}
.whiteBtn {
  border: #C6C6C6 solid 1px;
  font-family: var(--font-family-semibold);
  font-size: 16px;
  line-height: 24px;
  color: #1A1E5A;
  background: white;
  text-align: center;
  margin: 0;
}
.whiteBtn:disabled {
  opacity: 0.4;
}
.whiteBtn:hover {
  color: white;
  box-shadow: #0097D8 0 80px 0 2px inset;
  border: #0097D8 solid 1px;
}
.whiteBtn:hover a {
  color: white;
}
.whiteBtn .svg {
  float: left;
  margin-left: 20px;
}
.whiteBtn:hover path,
.whiteBtn:hover polygon,
.whiteBtn:hover circle {
  fill: white;
}
.button-max {
  width: 100%;
  min-height: 60px;
  margin: 15px 0 0 0;
  border-radius: 5px;
  z-index: 5;
}
.button-xs {
  margin: 0;
  width: 200px;
  min-height: 50px;
  border-radius: 5px;
  z-index: 5;
}
.button-min {
  margin: 0;
  min-width: 70px;
  height: 25px;
  border-radius: 5px;
  z-index: 5;
  padding: 0px 6px !important;
  font-size: 13px;
}
#BinCard button {
  margin: 20px 20px 0 0;
}
.iconBtn {
  font-family: var(--font-family-semibold);
  font-size: 18px;
  line-height: 44px;
  color: #1A1E5A;
  background-color: white;
  border: solid 1px #C6C6C6;
  text-align: center;
  height: 50px;
}
.iconBtn:hover {
  color: white;
  box-shadow: #0097D8 0 50px 0 2px inset;
}
.buttonFake {
  display: inline-block;
  padding: 12px;
  text-decoration: none;
}
.buttonFake:hover {
  text-decoration: none;
}
.simpleTextLink {
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.simpleTextLink:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.simpleTextLink:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.doubleLigneLinkText {
  text-decoration: none;
  display: inline-block;
  position: relative;
  text-align: center;
}
.doubleLigneLinkText:before,
.doubleLigneLinkText:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0097D8;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -o-transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.doubleLigneLinkText:before {
  top: 0;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
}
.doubleLigneLinkText:after {
  bottom: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
}
.doubleLigneLinkText:hover::before,
.doubleLigneLinkText:focus::before {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.doubleLigneLinkText:hover::after,
.doubleLigneLinkText:focus::after {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.Process_PreviousStep {
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.Process_PreviousStep:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.Process_PreviousStep:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.Process_PreviousStep:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.Process_PreviousStep:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.Process_PreviousStep:after {
  height: 25px;
}
.Process_PreviousStep .btn-back {
  height: 50px;
  margin-bottom: 15px;
}
.Process_PreviousStep .btn-back:hover {
  color: #1A1E5A;
}
.label-doc-download {
  display: inline-block;
  background-color: #0097D8;
  height: 40px;
  padding-top: 10px;
  margin: 15px;
}
.label-doc-download a {
  color: white;
  font-size: 14px;
}
.label-doc-download a img {
  margin-right: 15px;
  color: white;
}
#idDivButton {
  margin-top: 15px;
  min-height: 60px;
  background-image: none;
  background-color: #f6d476;
  margin-bottom: 0;
}
#idDivButton .centerText {
  min-height: 60px;
  text-align: center;
}
#idDivButton .centerText #idTextButton {
  padding: 0 15px 0 15px;
  margin-top: 21px;
  font-size: 18px;
}
#idDivButton #IdProgressBar {
  min-height: 60px;
  background-color: #f7b600;
  background-image: none;
}
#idDivButton .progress-bar-striped {
  background-repeat: repeat;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
}
.upload-file-mobile-sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1040;
}
.btnReturnMyClaims {
  border-radius: 40px;
  padding: 5px 20px;
  border: #337ab7 solid;
  margin: 13px;
  background-color: transparent;
  width: 145px;
  display: flex;
  color: #337ab7;
}
.btnReturnMyClaims:hover {
  color: white;
  background-color: #337ab7;
  text-decoration: none;
}
.btnPopupMedicalConsentOk {
  color: white;
  background-color: #337ab7;
}
.btnPopupMedicalConsentOk:hover {
  color: white;
}
footer {
  bottom: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
  font-family: var(--font-family-base);
  font-size: 14px;
  line-height: 22px;
  color: #71787E;
  min-height: 100px;
  border-top: 1px solid #C6C6C6;
  -moz-transition: all ease-in 1s;
  -o-transition: all ease-in 1s;
  -webkit-transition: all ease-in 1s;
  transition: all ease-in 1s;
}
footer .logoXS {
  margin-bottom: 15px;
}
footer ul {
  list-style: none;
  margin-top: 15px;
}
footer ul .visa {
  margin-top: 5px;
  height: 25px;
}
footer ul .assurant {
  height: 35px;
}
@media screen and (max-width: 600px) {
  footer ul {
    margin: 5px 5px 15px 5px;
  }
  footer ul .visa {
    height: 20px;
  }
}
footer ul li {
  float: right;
}
footer ul .listContact {
  background-color: white;
  height: 100%;
}
footer ul .listContact li {
  list-style: none;
  font-size: medium;
  margin-bottom: 5px;
  float: none;
}
footer ul .listContact li a {
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
footer ul .listContact li a:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
footer ul .listContact li a:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
footer ul .listContact li a:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
footer ul .listContact li a:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
footer ul .listContact .titleF {
  list-style: none;
  font-size: medium;
  margin-bottom: 15px;
  float: none;
}
footer ul .listJuridique,
footer ul .listSecurite {
  background-color: white;
  height: 100%;
}
footer ul .listJuridique li,
footer ul .listSecurite li {
  list-style: none;
  font-size: medium;
  margin-bottom: 5px;
  float: none;
}
footer ul .listJuridique li a,
footer ul .listSecurite li a {
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
footer ul .listJuridique li a:after,
footer ul .listSecurite li a:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
footer ul .listJuridique li a:hover:after,
footer ul .listSecurite li a:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
footer ul .listJuridique li a:after,
footer ul .listSecurite li a:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
footer ul .listJuridique li a:hover:after,
footer ul .listSecurite li a:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
footer ul .listJuridique .titleF,
footer ul .listSecurite .titleF {
  list-style: none;
  font-size: medium;
  margin-bottom: 15px;
  float: none;
}
html body {
  margin-top: 0;
  padding-top: 0;
  width: 100%;
  font-family: var(--font-family-base);
  margin: 0;
}
html {
  overflow-y: auto;
  overflow-x: hidden;
}
/* Legacy Bootstrap (.form-group encore présent dans ~148 occurrences des vues Views/Default et
   Views/Visa/Account historiques) : surcharge components/forms.css (margin-bottom: var(--spacing-md)).
   Aucune vue neuve n'utilise .form-group ; à supprimer avec la migration des dernières vues Bootstrap. */
.form-group {
  margin-bottom: 0;
}
/* body { display:flex; flex-direction:column; min-height:100vh } : doublon de Default/css/base/reset.css, supprimé. */
body header,
body footer,
body main {
  width: 100%;
}
body main {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
}
body .masterContent {
  padding: 0 5px 0 5px;
}
.warningTxt {
  color: #f7b600;
}
.container-fluid {
  padding: 0;
}
.SubTitle {
  font-size: 20px;
  line-height: 44px;
  color: #393C3E;
  text-decoration: solid;
}
.withNoMarginBottom {
  margin-bottom: 0;
}
.row {
  margin: 0;
}
.div-btn-continue-row {
  margin-bottom: 15px;
}
.BlueTitle {
  font-family: var(--font-family-semibold);
  font-size: 25px;
  line-height: 44px;
  color: #1A1E5A;
}
article .Title {
  font-family: var(--font-family-semibold);
  font-size: 32px;
  line-height: 44px;
  color: #393C3E;
}
article .contentText {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 24px;
  color: #71787E;
}
/* Modales Bootstrap legacy (.modal.fade — RegisterUnknownCustomer, FindExistingCustomer, _FileToDocDialog,
   IndemnisationCB, Views/Default/*) : scopées sur .fade pour ne plus écraser components/modal.css
   (.modal-title, .form-control) utilisé par les modales natives (_Modals.cshtml). */
.modal.fade input,
.modal.fade select {
  height: 50px;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  text-align: center;
  font-size: 18px;
}
.modal.fade textarea {
  height: 50px;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  text-align: center;
  font-size: 18px;
  min-height: 200px;
}
.modal.fade .modal-title {
  font-family: var(--font-family-base);
  font-size: 22px;
  line-height: 32px;
  color: #71787E;
}
/* Couleur des labels legacy (Bootstrap : .control-label, labels sans classe des vues historiques).
   :where() garde la spécificité (0,0,1) ; les labels BEM (classe contenant "__" : .field__label,
   .form__consent-label…) sont exclus pour que la couleur ne fuie plus sur les composants neufs. */
label:where(:not([class*="__"])) {
  color: #1A1E5A;
}
.hiddenClass {
  visibility: hidden;
}
.MovingPage {
  display: none;
}
.has-error .control-label {
  color: #EF233C;
}
.validation-summary-errors {
  background-color: #EF233C;
  color: white;
  font-size: 14px;
  line-height: 22px;
  width: 100%;
  display: block;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
}
.validation-summary-errors ul {
  padding: 0;
  list-style: none;
}
.validation-summary-errors ul li {
  list-style: none;
}
.text-danger {
  background-color: #EF233C;
  text-align: center;
  color: white;
  font-size: 14px;
  line-height: 22px;
  width: 100%;
  display: block;
  border-radius: 0 0 4px 4px;
}
.input-validation-error {
  border: 1px solid #EF233C;
  border-radius: 4px 4px 0 0;
}
/* .valid (retour vert « OK » de jQuery Validate) supprimé : plus d'indicateur de succès,
   seul l'état d'erreur est signalé. */
.container {
  width: 100%;
}
.forgetContent {
  text-align: center;
}
.forgetContent .textLink {
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  margin: 15px;
}
.forgetContent .textLink:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.forgetContent .textLink:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.forgetContent .textLink:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.forgetContent .textLink:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.textLink {
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  margin: 15px;
}
.textLink:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.textLink:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.textLink:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.textLink:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.body-content {
  margin-bottom: 10px;
  min-height: 500px;
  margin-top: 2%;
}
.body-content .image img {
  margin-top: 1%;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: rgba(139, 152, 180, 0.5) 0 0 5px 2px;
}
.body-content #content {
  z-index: 1;
  position: relative;
  padding: 0;
  margin: 0;
}
.body-content #content .subContent {
  display: inline-block;
  width: 100%;
  padding: 10px 0 10px 0;
  z-index: 5;
}
.body-content #content .subContent .subContentInput select {
  height: 50px;
  width: 100%;
  max-width: 100%;
  padding: 5px;
}
.body-content #content .subContent .subContentInput input {
  height: 50px;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  text-align: center;
  font-size: 18px;
}
.body-content #content .subContent .subContentInput input[type="button"],
.body-content #content .subContent .subContentInput input[type="submit"] {
  white-space: normal;
  height: auto;
}
.info {
  font-family: var(--font-family-semibold);
  font-size: 14px;
  line-height: 44px;
  color: #0097D8;
}
.dropzone {
  margin-top: 20px;
  border: 2px dashed #C6C6C6;
  border-radius: 5px;
  background: white;
}
.dropzone .dz-image {
  width: 100px;
  height: 100px;
}
.dropzone .dz-message {
  font-family: var(--font-family-base);
  font-size: 22px;
  line-height: 32px;
  color: #393C3E;
}
.dropzone .dz-message .note {
  font-size: 0.8em;
  font-weight: 200;
  display: block;
  margin-top: 1.4rem;
}
.dropzone .dz-error-message {
  width: 500px;
}
.dropzone .dz-error-mark g {
  stroke: #EF233C;
  fill: #EF233C;
}
.dropzone .dz-error-mark #Check- + -Oval-2 {
  stroke: #EF233C !important;
  fill: #EF233C !important;
}
.dropzone .dz-success-mark g {
  stroke: #1BB934;
  fill: #1BB934;
}
.dropzone .dz-success-mark #Oval-2 {
  stroke: #1BB934 !important;
  fill: #1BB934 !important;
}
.dropzone img {
  padding: 0;
  margin-top: 0;
  opacity: 0.8;
}
.dropzone .dz-preview .dz-error-message {
  width: auto !important;
  min-width: 300px;
  top: -50%;
  bottom: 105%;
  left: -25px;
  min-height: 100px;
  max-height: 100px;
  max-width: 100%;
}
@media (max-width: 991px) {
  .dropzone .dz-preview .dz-error-message {
    opacity: 1;
  }
}
.dropzone .dz-preview .dz-error-message:after {
  top: 100%;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: 80px;
}
.glyphicon-list {
  margin-right: 20px;
}
#imgAcc {
  border-radius: 15px;
  margin-top: 5%;
  height: auto;
  max-width: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.3);
}
.ErrorBloc {
  text-align: center;
}
.SubPageContainer {
  margin-bottom: 15px;
}
.SubPageContainer a {
  /*&:hover {
            color: @colorVisaBlue;
        }*/
}
.ui-widget-header {
  color: #1A1E5A;
  background: white;
}
#myModal {
  height: 100%;
}
#DateInvalid {
  display: none;
}
.UpArrow {
  background-position: 100% center;
  background-repeat: no-repeat;
  background-image: url("themes/Visa2017/images/logo/arrowright.svg");
}
.DownArrow {
  background-image: url("themes/Visa2017/images/logo/arrow_down.svg");
  background-position: 100% center;
  background-repeat: no-repeat;
}
.CheckInfo {
  color: #0097D8;
  border-bottom: solid 1px #0097D8;
  border-left: solid 1px #0097D8;
  border-right: solid 1px #0097D8;
  padding: 15px;
  display: none;
}
.checkInfoZone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.nopadding {
  padding: 0;
}
.warningContent {
  background-color: #f7b600;
  text-align: center;
  color: white;
  padding: 20px;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
.inner-div-col {
  padding-left: 0px;
}
.inner-div-col h2 {
  margin-top: 0px;
  margin-bottom: 15px;
}
#myModalContent {
  font-size: 18px;
}
.titleClaim {
  font-family: var(--font-family-base);
  font-size: 22px;
  line-height: 32px;
  color: #393C3E;
  margin: 15px;
}
#ClaimListGroup a h4 {
  color: #1A1E5A;
  font-size: 18px;
}
.badgeBtn {
  color: white !important;
  border: solid 1px white !important;
}
.docBadge,
.docBadgeMed {
  background-color: red;
  color: white !important;
  /*border:solid 1px #337ab7;*/
  margin-right: 8px;
}
.explainTitle {
  font-size: 15px;
}
.claimList {
  margin-top: 20px;
}
.claimList .titleClaim {
  font-family: var(--font-family-base);
  font-size: 22px;
  line-height: 32px;
  color: #393C3E;
  margin: 15px;
}
.claimList ul {
  margin-top: 15px;
  padding: 0;
}
.claimList ul li {
  display: inline-block;
  padding-top: 10px;
  list-style: none;
  border: 1px solid #C6C6C6;
}
.claimList ul li ul li {
  cursor: pointer;
  list-style-type: disc;
  display: list-item;
  margin-left: 20px;
}
.claimList ul li ul li:hover {
  box-shadow: #BAE3F5 0 70px 0 0 inset;
  color: #1A1E5A;
}
.claimList ul li p {
  display: inline-block;
  font-size: 14px;
  text-decoration: underline;
  padding: 0;
}
.claimList ul li span {
  color: #0097D8;
  display: inline-block;
  padding: 5px 0 0 20px;
  font-size: 12px;
}
.claimList ul .listcontent .glyphicon {
  left: 85%;
}
.claimList ul .lastList {
  text-align: center;
  color: #0097D8;
  display: flow-root;
  height: 60px;
  padding-top: 15px;
}
.claimList ul .lastList:hover {
  cursor: pointer;
  box-shadow: #BAE3F5 1000px 0 1px 0 inset;
}
.ul-doctype-selector {
  list-style-type: none;
  padding-left: 15px;
}
.list-doc {
  border-collapse: collapse;
  border: solid 1px #c6c6c6;
}
.list-doc .doc-div-icon {
  margin-top: 7px;
  padding: 0px;
}
.list-doc .doc-div-icon .doc-icon {
  font-size: 24px;
}
.doc-download-icon {
  margin-left: 10px;
}
.doc-download-icon:hover {
  background-color: cornflowerblue;
}
.list-doc .panel-default {
  background-color: white;
}
.list-doc .panel-default > .panel-heading {
  background: none;
}
.list-doc .checkbox-visa {
  width: 70px;
  text-align: center;
  display: inline-block;
  padding: 0;
  background: white;
}
.list-doc .checkbox-visa label {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  left: 30px;
  top: 15px;
  background: white;
}
.list-doc .checkbox-visa.disable label {
  cursor: pointer;
  pointer-events: none;
}
.list-doc .checkbox-visa label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 3px solid #0097D8;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.list-doc .checkbox-visa.disable label:after {
  border-color: #0097d8a3;
}
.list-doc .checkbox-visa label:hover::after {
  opacity: 0.3;
}
.list-doc .checkbox-visa input[type=checkbox] {
  visibility: hidden;
}
.list-doc .checkbox-visa input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.list-doc .panel-button {
  margin: 10px;
  display: block;
  width: 100%;
  height: 50px;
}
.list-doc .panel-button span {
  position: absolute;
  right: 0;
  color: #0097D8;
}
.list-doc > .panel {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: white;
  margin: 0;
  border-bottom: 1px solid #C6C6C6;
  white-space: normal;
}
.list-doc .panel .panel-body,
.list-doc .panel .collapse,
.list-doc .panel panel-collapse {
  border: none;
  box-shadow: none;
}
.list-doc .panel .panel-body {
  margin-left: 60px;
  border-left: 1px solid #C6C6C6;
  box-shadow: none;
}
.list-doc .panel .panel-heading {
  margin: 0;
  height: 50px;
  border-radius: 0;
  padding: 0;
  border: none;
}
.list-doc .panel .panel-heading .input-group-addon {
  border-radius: 0;
  width: 80px;
  background: white;
  border: none;
}
.list-doc .panel .panel-heading .panel-title {
  border-left: 1px solid #C6C6C6;
  box-shadow: none;
  border-bottom: none;
  border-top: none;
  border-right: none;
  float: none;
  border-radius: 0;
  color: #0097D8;
  cursor: pointer;
}
.list-doc .panel .panel-heading .panel-title .inner-panel-title {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}
.list-doc .panel .panel-heading .panel-title span {
  font-size: 14px;
}
.list-doc .panel .panel-heading .input-group {
  border: none;
}
.list-doc .rotate90 {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.list-doc .norotate {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.list-doc-header {
  display: -webkit-inline-box;
  color: gray !important;
}
.list-doc-header-cell {
  padding: 15px 6px 15px 10px;
}
.list-doc-header-cell-form {
  padding: 15px 20px 15px 10px;
}
.list-doc-area {
  border: solid 1px #c6c6c6;
  padding: 10px;
}
/* Legacy : _ListDoc.cshtml (panel Bootstrap) — scopé sur .panel pour ne plus toucher
   components/document-item.css (.document-item .document-header, max-width: 100%). */
.panel .document-header {
  max-width: 80%;
}
.document-description {
  font-size: 12px;
  color: black;
}
.document-description-secondary {
  font-size: 12px;
  color: #959595;
}
.description-retard-bagages {
  color: #959595;
  font-size: 15px;
}
.description-perte-bagages {
  color: #959595;
  font-size: 15px;
}
.document-description-title {
  font-weight: bold;
  margin-top: 7px;
}
document-description-content {
  white-space: pre-line;
}
.chevron {
  margin-top: 10px;
}
.chevron-area {
  position: absolute;
  right: 25px;
}
.panel-heading.collapsed .fa-chevron-down,
.panel-heading .fa-chevron-up {
  display: inline-block;
}
.panel-heading.collapsed .fa-chevron-up,
.panel-heading .fa-chevron-down {
  display: none;
}
#checkbox-column-header {
  border-right: 1px solid #c6c6c6;
}
#checkbox-column-header-form {
  border-right: 1px solid #c6c6c6;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #0097D8;
  border-bottom: solid #0097D8 3px;
}
.nav-tabs > li.active > a .docBadge,
.nav-tabs > li.active > a:hover .docBadge,
.nav-tabs > li.active > a:focus .docBadge {
  color: #0097D8;
  border: solid 1px #0097D8;
}
.tab-pane #accordion {
  position: relative;
  margin-top: 15px;
}
.tab-pane #accordion .panel-button {
  margin: 10px;
  display: block;
  width: 100%;
  height: 50px;
}
.tab-pane #accordion .panel-button button {
  position: absolute;
  right: 0;
}
.tab-pane #accordion .panel {
  cursor: pointer;
  border: 1px solid #C6C6C6;
}
.tab-pane #accordion .panel .panel-heading {
  padding: 0;
  height: 40px;
  border: none;
  background-color: white;
}
.tab-pane #accordion .panel .panel-heading .input-group {
  height: 40px;
}
.tab-pane #accordion .panel .panel-heading .input-group .input-group-addon {
  background: #0097D8;
  border: none;
}
.tab-pane #accordion .panel .panel-heading .panel-title {
  border: none;
  height: 40px;
}
.tab-pane #accordion .panel .panel-heading .panel-title h4 {
  height: 40px;
  margin: 0;
  border: none;
}
.tab-pane #accordion .panel .panel-heading .panel-title .textTitle {
  position: relative;
  font-size: 12px;
  width: 50px;
  text-align: left;
  border: none;
}
.tab-pane #accordion .panel .panel-heading .panel-title .imgTitle {
  width: 10%;
}
.tab-pane #accordion .panel .panel-body {
  width: 100%;
}
.tab-pane #accordion .rotate90 {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.tab-pane #accordion .norotate {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.tab-pane #accordionDoc .panel-default {
  background-color: white;
}
.tab-pane #accordionDoc .panel-default > .panel-heading {
  background-color: white;
}
.tab-pane #accordionDoc .checkbox-visa {
  width: 60px;
  text-align: center;
  display: inline-block;
  padding: 0;
  background: white;
}
.tab-pane #accordionDoc .checkbox-visa label {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  left: 17.5px;
  top: 15px;
  background: white;
  border: solid 1px #C6C6C6;
}
.tab-pane #accordionDoc .checkbox-visa label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 3px solid #0097D8;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tab-pane #accordionDoc .checkbox-visa label:hover::after {
  opacity: 0.3;
}
.tab-pane #accordionDoc .checkbox-visa input[type=checkbox] {
  visibility: hidden;
}
.tab-pane #accordionDoc .checkbox-visa input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.tab-pane #accordionDoc .panel-button {
  margin: 10px;
  display: block;
  width: 100%;
  height: 50px;
}
.tab-pane #accordionDoc .panel-button span {
  position: absolute;
  right: 0;
  color: #0097D8;
}
.tab-pane #accordionDoc .panel {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: white;
  margin: 0;
  border-bottom: 1px solid #C6C6C6;
  white-space: normal;
}
.tab-pane #accordionDoc .panel .panel-body,
.tab-pane #accordionDoc .panel .collapse,
.tab-pane #accordionDoc .panel panel-collapse {
  border: none;
  box-shadow: none;
}
.tab-pane #accordionDoc .panel .panel-body {
  margin-left: 60px;
  border-left: 1px solid #C6C6C6;
  box-shadow: none;
}
.tab-pane #accordionDoc .panel .panel-heading {
  margin: 0;
  height: 50px;
  border-radius: 0;
  padding: 0;
  border: none;
}
.tab-pane #accordionDoc .panel .panel-heading .input-group-addon {
  border-radius: 0;
  width: 60px;
  background: white;
  border: none;
}
.tab-pane #accordionDoc .panel .panel-heading .panel-title {
  cursor: pointer;
  border-left: 1px solid #C6C6C6;
  box-shadow: none;
  border-bottom: none;
  border-top: none;
  border-right: none;
  float: none;
  border-radius: 0;
  color: #0097D8;
}
.tab-pane #accordionDoc .panel .panel-heading .panel-title span {
  font-size: 14px;
}
.tab-pane #accordionDoc .panel .panel-heading .input-group {
  border: none;
}
.tab-pane #accordionDoc .rotate90 {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.tab-pane #accordionDoc .norotate {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
#docListMobileFond {
  background-color: rgba(225, 229, 239, 0.79);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
  top: 0;
}
#docListMobile {
  position: fixed;
  overflow-y: auto;
  box-shadow: rgba(0, 0, 0, 0.42) 0 0 25px;
  right: -100%;
  padding: 15px 15px 30px 15px;
  z-index: 10000;
  background-color: white;
  width: 90%;
  height: 90%;
}
#docListMobile #accordion {
  position: relative;
  margin-top: 15px;
}
#docListMobile #accordion .panel-button {
  margin: 10px;
  display: block;
  width: 100%;
  height: 50px;
}
#docListMobile #accordion .panel-button button {
  position: absolute;
  right: 0;
}
#docListMobile #accordion .panel {
  cursor: pointer;
  border: 1px solid #C6C6C6;
}
#docListMobile #accordion .panel .panel-heading {
  padding: 0;
  height: 40px;
  border: none;
  background-color: white;
}
#docListMobile #accordion .panel .panel-heading .input-group {
  height: 40px;
}
#docListMobile #accordion .panel .panel-heading .input-group .input-group-addon {
  background: #0097D8;
  border: none;
}
#docListMobile #accordion .panel .panel-heading .panel-title {
  border: none;
  height: 40px;
}
#docListMobile #accordion .panel .panel-heading .panel-title h4 {
  height: 40px;
  margin: 0;
  border: none;
}
#docListMobile #accordion .panel .panel-heading .panel-title .textTitle {
  position: relative;
  font-size: 12px;
  width: 50px;
  text-align: left;
  border: none;
}
#docListMobile #accordion .panel .panel-heading .panel-title .imgTitle {
  width: 10%;
}
#docListMobile #accordion .panel .panel-body {
  width: 100%;
}
#docListMobile #accordion .rotate90 {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
#docListMobile #accordion .norotate {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
#docListMobile #accordionDoc .panel-default {
  background-color: white;
}
#docListMobile #accordionDoc .panel-default > .panel-heading {
  background-color: white;
}
#docListMobile #accordionDoc .checkbox-visa {
  width: 60px;
  text-align: center;
  display: inline-block;
  padding: 0;
  background: white;
}
#docListMobile #accordionDoc .checkbox-visa label {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  left: 17.5px;
  top: 15px;
  background: white;
  border: solid 1px #C6C6C6;
}
#docListMobile #accordionDoc .checkbox-visa label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 3px solid #0097D8;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#docListMobile #accordionDoc .checkbox-visa label:hover::after {
  opacity: 0.3;
}
#docListMobile #accordionDoc .checkbox-visa input[type=checkbox] {
  visibility: hidden;
}
#docListMobile #accordionDoc .checkbox-visa input[type=checkbox]:checked + label:after {
  opacity: 1;
}
#docListMobile #accordionDoc .panel-button {
  margin: 10px;
  display: block;
  width: 100%;
  height: 50px;
}
#docListMobile #accordionDoc .panel-button span {
  position: absolute;
  right: 0;
  color: #0097D8;
}
#docListMobile #accordionDoc .panel {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: white;
  margin: 0;
  border-bottom: 1px solid #C6C6C6;
  white-space: normal;
}
#docListMobile #accordionDoc .panel .panel-body,
#docListMobile #accordionDoc .panel .collapse,
#docListMobile #accordionDoc .panel panel-collapse {
  border: none;
  box-shadow: none;
}
#docListMobile #accordionDoc .panel .panel-body {
  margin-left: 60px;
  border-left: 1px solid #C6C6C6;
  box-shadow: none;
}
#docListMobile #accordionDoc .panel .panel-heading {
  margin: 0;
  height: 50px;
  border-radius: 0;
  padding: 0;
  border: none;
}
#docListMobile #accordionDoc .panel .panel-heading .input-group-addon {
  border-radius: 0;
  width: 60px;
  background: white;
  border: none;
}
#docListMobile #accordionDoc .panel .panel-heading .panel-title {
  cursor: pointer;
  border-left: 1px solid #C6C6C6;
  box-shadow: none;
  border-bottom: none;
  border-top: none;
  border-right: none;
  float: none;
  border-radius: 0;
  color: #0097D8;
}
#docListMobile #accordionDoc .panel .panel-heading .panel-title span {
  font-size: 14px;
}
#docListMobile #accordionDoc .panel .panel-heading .input-group {
  border: none;
}
#docListMobile #accordionDoc .rotate90 {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
#docListMobile #accordionDoc .norotate {
  -moz-transition: all ease-in-out 300ms;
  -o-transition: all ease-in-out 300ms;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
#docListMobile .openAll {
  margin-right: 15px;
}
#docListMobile .label-doc-download {
  max-width: 100%;
  height: auto;
}
#docListMobile .label-doc-download a {
  max-width: 100%;
  white-space: normal;
}
#docListMobile #closeList {
  color: #0097D8;
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#docListMobile #closeList:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
#docListMobile #closeList:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
#docListMobile #closeList:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
#docListMobile #closeList:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.ListRecap {
  font-family: var(--font-family-semibold);
  font-size: 18px;
  line-height: 44px;
  color: #1A1E5A;
  font-size: 14px;
  font-weight: normal;
  color: #393C3E;
}
.ListRecap b {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 24px;
  color: #71787E;
  font-weight: normal;
  font-size: 14px;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.exchange-timeline-inner-col {
  padding: 0px;
}
.exchange-timeline-right-dl-icon {
  font-size: 18px;
  text-align: right;
}
.exchange-timeline-left-dl-icon {
  font-size: 18px;
  text-align: left;
}
.exchange-timeline {
  list-style: none;
  padding: 20px 0 20px;
}
.exchange-timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}
.exchange-timeline > div {
  margin-bottom: 20px;
  position: relative;
}
.exchange-timeline > div:before,
.exchange-timeline > div:after {
  content: " ";
  display: table;
}
.exchange-timeline > div:after {
  clear: both;
}
.exchange-timeline > div:before,
.exchange-timeline > div:after {
  content: " ";
  display: table;
}
.exchange-timeline > div:after {
  clear: both;
}
.exchange-timeline > div > .exchange-timeline-panel {
  width: 46%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  background-color: white;
}
.exchange-timeline-open-document {
  color: #337ab7;
  text-decoration: none;
  cursor: pointer;
}
.exchange-timeline-open-document:hover {
  text-decoration: underline;
}
.exchange-timeline > div > .exchange-timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.exchange-timeline > div > .exchange-timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.exchange-timeline-left-data {
  text-align: right;
}
.exchange-timeline > div > .exchange-timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: white;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.exchange-timeline > div > .exchange-timeline-badge > img {
  width: 48px;
}
.exchange-timeline > div.exchange-timeline-inverted > .exchange-timeline-panel {
  float: right;
}
.exchange-timeline > div.exchange-timeline-inverted > .exchange-timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.exchange-timeline > div.exchange-timeline-inverted > .exchange-timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.exchange-timeline-non-vu {
  font-weight: bold;
}
.exchange-timeline-badge.primary {
  background-color: #2e6da4 !important;
}
.exchange-timeline-badge.success {
  background-color: #3f903f !important;
}
.exchange-timeline-badge.warning {
  background-color: #f0ad4e !important;
}
.exchange-timeline-badge.danger {
  background-color: #d9534f !important;
}
.exchange-timeline-badge.info {
  background-color: #5bc0de !important;
}
.exchange-timeline-title {
  margin-top: 0;
  color: inherit;
}
.exchange-timeline-body > p,
.exchange-timeline-body > div {
  margin-bottom: 0;
}
.exchange-timeline-body > p + p {
  margin-top: 5px;
}
@media (max-width: 767px) {
  /*div.exchange-timeline:before {
        left: 40px;
    }*/
  /*div.exchange-timeline > div > .exchange-timeline-panel {
        width: calc(100% - 74px);
        width: -moz-calc(100% - 74px);
        width: -webkit-calc(100% - 74px);
    }*/
  div.exchange-timeline > div > .exchange-timeline-panel {
    width: calc(100% - 60px);
  }
  div.exchange-timeline > .exchange-timeline-inverted > .exchange-timeline-panel {
    width: calc(100% - 74px);
    /*width: -webkit-calc(100% - 74px);*/
  }
  div.exchange-timeline > div > .exchange-timeline-badge {
    left: auto;
    right: 0px;
    margin-right: 0;
    top: 16px;
  }
  div.exchange-timeline > .exchange-timeline-inverted > .exchange-timeline-badge {
    left: 15px;
    margin-left: 0;
    top: 16px;
  }
  div.exchange-timeline > .exchange-timeline-inverted > .exchange-timeline-panel {
    float: right;
  }
  div.exchange-timeline > div > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }
  div.exchange-timeline > .exchange-timeline-inverted > .exchange-timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
}
.exchange-chat {
  list-style: none;
  margin: 0;
  padding: 0;
}
.exchange-chat div {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #B3A9A9;
}
.exchange-chat div.left .exchange-chat-body {
  margin-left: 60px;
}
.exchange-chat div.right .exchange-chat-body {
  margin-right: 60px;
}
.exchange-chat div .exchange-chat-body p {
  margin: 0;
  color: #777777;
}
.panel .slidedown .glyphicon,
.exchange-chat .glyphicon {
  margin-right: 5px;
}
.exchange-panel-body {
  overflow-y: scroll;
  height: 250px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}
::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
#menuTitleLG {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: var(--font-family-semibold);
  font-size: 25px;
  line-height: 44px;
  color: #1A1E5A;
}
nav {
  padding: 0;
}
#closeMenu {
  text-align: right;
}
#closeMenu img {
  cursor: pointer;
  margin: 15px 15px 0 0;
  color: white;
  width: 20px;
}
.LeftSideBarContainer {
  min-height: 500px;
  padding: 0;
}
#menuContainer {
  margin-left: 10px;
  z-index: 100;
  width: 100%;
  position: relative;
  margin-top: 70px;
  top: 0;
}
#menuContainer ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#menuContainer ul.menu li.infoMenu {
  padding: 15px;
}
#menuContainer ul.menu li.infoMenu span {
  font-size: x-large;
  text-align: center;
  border-bottom: none;
  color: #393C3E;
}
@media only screen and (max-width: 992px) {
  #menuContainer ul.menu li.infoMenu span {
    color: white;
  }
}
#menuContainer ul.menu hr {
  border: none;
}
#menuContainer ul.menu .Last {
  border-bottom: solid 1px #C6C6C6;
}
#menuContainer ul.menu li {
  width: 100%;
  border-top: solid 1px #C6C6C6;
  border-right: solid 1px #C6C6C6;
}
#menuContainer ul.menu li a {
  font-size: 1em;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  padding: 0 15px 10px 15px;
  width: 100%;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  color: #393C3E;
  height: 60px;
  /*span{
                        display:none;
                    }
                    &:after {
                        content: '';
                        display: block;
                        margin: auto;
                        height: 1.5px;
                        width: 0;
                        background: transparent;
                        -moz-transition: width .5s ease, background-color .5s ease;
                        -o-transition: width .5s ease, background-color .5s ease;
                        -webkit-transition: width .5s ease, background-color .5s ease;
                        transition: width .5s ease, background-color .5s ease;
                    }

                    &:hover {
                        background-color: transparent;

                        &:after {
                            width: 100%;
                            background-color: @colorVisaDarkGrey;
                        }
                    }*/
}
#menuContainer ul.menu li a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  background: #C6C6C6;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: -1;
}
#menuContainer ul.menu li a:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  background: #1A1E5A;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  z-index: 10;
}
#menuContainer ul.menu li a:hover {
  background: none;
}
#menuContainer ul.menu li a:hover:before {
  top: 0;
  opacity: 0.3;
  height: 100%;
  width: 100%;
}
#menuContainer ul.menu li a:hover:after {
  top: 0;
  height: 100%;
}
#menuContainer ul.menu li a span {
  padding-top: 8px;
  padding-right: 25px;
}
#menuContainer ul.menu li a p {
  display: inline-block;
  margin: 15px 0 0 25px;
}
@media (max-width: 285px) {
  #menuContainer ul.menu li a p {
    max-width: 160px;
  }
}
#menuContainer ul.menu li a .ico {
  height: 10px;
  width: 10px;
  margin: 0 15px 0 15px;
}
#menuContainer ul.menu li a svg {
  height: 25px;
  width: 25px;
  margin: 10px 0 0 0;
}
#menuContainer ul.menu li a .arrowRight {
  height: 20px;
  width: 20px;
}
@media only screen and (min-width: 992px) {
  #menuContainer {
    margin-left: 10px;
    z-index: 100;
    width: 100%;
    position: relative;
    margin-top: 70px;
    top: 0 !important;
  }
}
@media only screen and (max-width: 991px) {
  #surMenu #menuTitleXS {
    font-size: medium;
  }
  #surMenu #logo {
    margin: 0;
    padding: 0;
  }
  #surMenu #logo #logoImg {
    width: 50px;
    margin-top: 15px;
  }
  .menuContener {
    position: static;
  }
  .navbar-nav {
    float: none;
  }
  #icon {
    margin-top: 20px;
    border: none;
    cursor: pointer;
  }
  #icon .svg {
    width: 60px;
    height: 60px;
  }
  #icon:hover {
    background-color: transparent;
  }
  #menuContainer {
    position: absolute;
    top: -900px;
    left: 0;
    z-index: 10010;
    width: 100%;
    margin: 0;
  }
  #menuContainer #icon {
    display: inline-block;
  }
  #menuContainer ul.menu {
    background-color: #0097D8;
  }
  #menuContainer ul.menu .infoMenu {
    font-size: x-large;
    color: white;
  }
  #menuContainer ul.menu li {
    cursor: pointer;
    border: none;
  }
  #menuContainer ul.menu li a {
    text-align: left;
    color: white !important;
    background-color: transparent;
    width: 100%;
    /*&:hover {
                        
                        background-color: none;

                        &:after {
                            width: 100%;
                            background-color: white !important;
                        }
                    }*/
  }
  #menuContainer ul.menu li a span {
    font-size: 25px;
    padding-right: 0;
  }
  #menuContainer ul.menu li a span .arrowRight {
    margin: 0;
    width: 30px;
  }
  #menuContainer ul.menu li a svg {
    fill: white;
  }
  #menuContainer ul.menu li a svg g {
    fill: white;
  }
  #menuContainer ul.menu li a svg polygon {
    stroke: white;
  }
  #menuContainer ul.menu li a svg path {
    fill: white;
  }
}
.navbar-default:hover,
.navbar-toggle:hover:hover {
  background: none;
}
#binNav {
  background: none;
  min-height: 100px;
}
#binNav div {
  padding: 0;
}
#binNav .img-assurant {
  height: 100%;
  width: auto;
  max-height: 60px;
  margin-top: 20px;
  margin-bottom: 15px;
  max-width: 150px;
}
#binNav .img-card {
  height: 100%;
  max-height: 40px;
  margin-bottom: 15px;
}
#principalNav {
  background-color: white;
  background: none;
  height: auto;
}
#principalNav #navbar .navigation-link li {
  height: 100%;
}
@media only screen and (min-width: 769px) {
  #principalNav #navbar .navigation-link li {
    text-decoration: none;
    display: inline-block;
    position: relative;
    text-align: center;
  }
  #principalNav #navbar .navigation-link li:before,
  #principalNav #navbar .navigation-link li:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0097D8;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #principalNav #navbar .navigation-link li:before {
    top: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  #principalNav #navbar .navigation-link li:after {
    bottom: 0;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
  #principalNav #navbar .navigation-link li:hover::before,
  #principalNav #navbar .navigation-link li:focus::before {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #principalNav #navbar .navigation-link li:hover::after,
  #principalNav #navbar .navigation-link li:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #principalNav #navbar .navigation-link li:before,
  #principalNav #navbar .navigation-link li:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0097D8;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #principalNav #navbar .navigation-link li:before {
    top: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  #principalNav #navbar .navigation-link li:after {
    bottom: 0;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
  #principalNav #navbar .navigation-link li:hover::before,
  #principalNav #navbar .navigation-link li:focus::before {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #principalNav #navbar .navigation-link li:hover::after,
  #principalNav #navbar .navigation-link li:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
#principalNav #navbar .navigation-link li a {
  /*height:50px;
                    padding-top:15px;
                    padding-bottom:15px;*/
  font-size: larger;
}
#principalNav #navbar #logonContainer {
  max-height: 50px;
}
#principalNav #navbar #logonContainer #SharedLogOnForm {
  padding: 0;
  margin: 0;
}
#principalNav #navbar #logonContainer #SharedLogOnForm .minorBtn {
  line-height: 0;
}
@media only screen and (max-width: 769px) {
  #principalNav #navbar {
    box-shadow: inset rgba(49, 49, 49, 0.5) 0 10px 5px;
    background-color: white;
    height: 100%;
    overflow: hidden;
    padding: 10px;
  }
  #principalNav #navbar li {
    border-bottom: solid 1px #71787E;
    display: block;
    height: 50px;
    text-align: center;
  }
  #principalNav #navbar li a {
    color: #71787E;
    width: 100%;
  }
  #principalNav #navbar #logonContainer {
    max-height: none;
  }
}
#principalNav .navbar-header {
  padding: 0;
}
#principalNav .img-assurant {
  height: auto;
  max-width: 80%;
  max-height: 70px;
  margin-top: 15px;
  margin-bottom: 15px;
}
#principalNav .cardInfo {
  line-height: 40px;
}
#principalNav .img-card {
  height: auto;
  max-width: 70%;
  max-height: 60px;
}
#principalNav #SharedLogOnForm {
  padding-top: 20px;
}
#principalNav #SharedLogOnForm .input-sm {
  height: 34px;
}
#principalNav .CustomerContratInfos {
  text-align: right;
}
.navbar-default .navbar-nav > .active {
  color: white;
}
.navbar-default .navbar-nav > .active > a {
  background-color: #0097D8;
  color: white !important;
}
.firstBlock h3 {
  color: #1A1E5A;
}
.firstBlock a {
  color: white;
}
.ListArrow li a {
  /* iOS Safari */
  /* Safari */
  /* Konqueror HTML */
  /* Firefox */
  /* Internet Explorer/Edge */
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  position: relative;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  font-size: 14px;
  color: #71787E;
  padding: 10px;
  vertical-align: middle;
}
.ListArrow li a:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.ListArrow li a:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.ListArrow li a:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 5px;
  opacity: 0;
}
.ListArrow li a:hover:after {
  opacity: 1;
  -moz-animation: ahoverAfter 0.35s ease-out;
  -o-animation: ahoverAfter 0.35s ease-out;
  -webkit-animation: ahoverAfter 0.35s ease-out;
  animation: ahoverAfter 0.35s ease-out;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.claimSubTitle {
  display: inline-block;
}
.claimAttachmentLink {
  margin: 0px;
  width: 100%;
}
.claimAttachmentLink a {
  cursor: pointer;
  display: inline-block;
  position: relative;
  padding-left: 8px;
  padding-right: 15px;
  text-decoration: none;
}
.claimAttachmentLink a div {
  color: #333;
  display: inline-block;
}
.claimAttachmentLink a h4 {
  display: inline-block;
}
.blockAcc {
  height: 200px;
}
.block-home {
  margin-top: 20px;
  max-width: 800px;
}
.block-home div {
  border: 1px solid #C6C6C6;
  padding: 0 15px 5px 15px;
}
.block-home div h4 {
  color: #1A1E5A;
  font-size: 20px;
}
.block-home div .Remark {
  border: none;
  color: #71787E;
  min-height: unset;
}
.block-home .btnLink {
  border: 1px solid #C6C6C6;
  background-color: white;
  position: relative;
  width: 100%;
  text-align: left;
  border-top: none;
  min-height: unset;
  height: 60px;
  padding: 20px 15px 15px 15px;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 15px;
  color: #0097D8;
}
.block-home .btnLink:hover {
  color: white;
  box-shadow: #0097D8 1100px 0 1px 0 inset;
  text-decoration: none;
}
.pchoice .btnLink {
  border: 1px solid #C6C6C6;
  background-color: white;
  position: relative;
  width: 100%;
  text-align: left;
  min-height: unset;
  height: 60px;
  padding: 5px 5px 5px 15px;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 15px;
  color: #0097D8;
  -moz-transition: all 350ms cubic-bezier(0.39, 0.5, 0.6, 1);
  -o-transition: all 350ms cubic-bezier(0.39, 0.5, 0.6, 1);
  -webkit-transition: all 350ms cubic-bezier(0.39, 0.5, 0.6, 1);
  transition: all 350ms cubic-bezier(0.39, 0.5, 0.6, 1);
}
.pchoice .btnLink:hover {
  color: white;
  box-shadow: #0097D8 1100px 0 0 0 inset;
  text-decoration: none;
}
.pchoice .btnLink a {
  color: #0097D8;
}
.pchoice .btnLink img {
  margin-top: 10px;
}
.contentContact,
.contentDownload {
  border: solid 1px #C6C6C6;
  padding: 15px;
}
.contentContact #contactForm:hover,
.contentDownload #contactForm:hover {
  text-decoration: none;
  color: #1A1E5A;
}
#myModal label {
  color: #393C3E;
}
.border-top-none {
  padding: 15px;
  border-bottom: solid 1px #C6C6C6;
  border-left: solid 1px #C6C6C6;
  border-right: solid 1px #C6C6C6;
}
.Choice {
  /*display: inline-block;*/
  cursor: pointer;
  font-weight: bold;
  padding: 4px 0 4px 25px;
  display: block;
}
#YourAnswers {
  margin-top: 15px;
  padding: 15px;
  border: solid 1px #C6C6C6;
}
#YourAnswers h5 {
  font-family: var(--font-family-semibold);
  font-size: 18px;
  line-height: 44px;
  color: #1A1E5A;
  line-height: 20px;
}
#YourAnswers #historicList {
  padding-left: 5px;
}
#YourAnswers #historicList .SubTitle {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 24px;
  color: #71787E;
  margin: 15px;
  font-size: 13px;
  line-height: 15px;
}
#YourAnswers #historicList .question-title {
  font-size: 15px;
  padding: 0;
  line-height: 18px;
  color: #393C3E;
}
#YourAnswers #historicList .StepLine a {
  padding: 0;
}
.LargeGrid {
  padding: 15px;
  margin-top: 20px;
}
/*#ClaimListTable{
    width:100%;
    thead{
        border:1px solid @colorVisaBlueLight;
        background-color:white;
        color:@colorVisaBlueLight;
        height:30px;
        th{
            padding:10px;
            min-width:150px;
            a{
                color:@colorVisaBlueLight;
            }
        }
        a{

        }
    }
    tbody{
        border:1px solid @colorVisaBlueLight;
    }
}*/
.vertical-align {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.vertical-horizontal-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.HugeBlock {
  background-color: white;
  border-radius: 10px;
  border: 2px solid #f7b600;
  z-index: 10000;
  padding: 15px;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.39), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
  text-align: center;
}
.HugeBlock input {
  margin: 15px;
}
.InfoBox {
  background-color: #1BB934;
  width: 100%;
  min-height: 50px;
  text-align: center;
  margin-top: 15px;
  padding-top: 15px;
  color: white;
  border-radius: 5px;
  display: none;
  font-size: large;
}
.InfoBox p {
  text-align: center;
}
.WarningBox {
  background-color: #f7b600;
  width: 100%;
  min-height: 50px;
  text-align: center;
  margin-top: 15px;
  padding-top: 15px;
  color: white;
  border-radius: 5px;
  display: none;
  font-size: large;
}
.AlertBox {
  background-color: #EF233C;
  width: 100%;
  min-height: 50px;
  text-align: center;
  margin: 15px 0;
  padding-top: 15px;
  color: white;
  border-radius: 5px;
  display: none;
  font-size: large;
  padding: 10px !important;
}
.LinkNotice_fr-FR {
  background: url(themes/Visa2017/images/arrow_fr.png) no-repeat 90%;
}
.LinkNotice_en-US {
  background: url(themes/Visa2017/images/arrow_en.png) no-repeat 90%;
}
.LinkNotice {
  display: inline-block;
  margin: 0;
  width: 250px;
  height: 60px;
  border-radius: 5px;
  background-color: white;
  border: #0097D8 solid 1px;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-family-semibold);
  font-size: 16px;
  line-height: 60px;
  color: #0097D8;
}
.LinkNotice :hover {
  color: white;
  background-color: #0097D8;
}
#headerProgress,
#headerShowExpectedDocuments,
#headerClaimDetail,
#headerShowDirectRefusals {
  border-bottom: 1px solid #1A1E5A;
  min-height: 35px;
  padding-top: 10px;
  color: #1A1E5A;
  font-size: 15px;
  line-height: 20px;
  padding-right: 50px;
}
.Step .CurrentStepLabel {
  color: #0097D8;
}
.Step .DisableStep {
  color: #C6C6C6;
}
.Step .StepLabel {
  color: #71787E;
}
.accordionGlobal .ui-accordion-header {
  background: white;
  border-color: #0097D8;
  color: #71787E;
}
.accordionGlobal .ui-accordion-header-active {
  background: #0097D8;
  border-color: #0097D8;
  color: white;
}
.block-title h2 {
  font-size: 22px;
}
.block-title #BlockTitleContent h2 {
  font-size: large;
}
@media (max-width: 768px) {
  .block-title h2 {
    float: none;
    text-align: center;
    margin-top: 0;
  }
  .block-title h4 {
    text-align: center;
  }
}
@media (max-width: 768px) {
  #BlockTitleContent {
    text-align: left;
  }
}
#BlockTitleContent h4 {
  margin: 25px 0 0 0;
}
#BlockTitleContent .decla-info,
#BlockTitleContent span {
  text-align: left;
}
#BlockTitleContent h2 {
  margin-top: 0;
  font-size: 24px;
  color: #393C3E;
  margin-bottom: 25px;
}
.block-content {
  margin-top: 20px;
}
.returnEtp:after {
  height: 10px;
}
.help-block {
  display: inline-block;
}
.no-padding {
  padding: 0;
}
#Activate .login {
  font-family: var(--font-family-semibold);
  font-size: 14px;
  line-height: 44px;
  color: #0097D8;
  font-size: 18px;
  text-align: center;
}
#Activate .textLink {
  color: #0097D8;
  font-weight: bold;
}
#Activate .onBack {
  margin-top: 50%;
}
.form-horizontal .form-group {
  margin-right: 0;
  margin-left: 0;
}
.opacity50 {
  opacity: 0.5;
}
img {
  vertical-align: middle;
}
.divGreen {
  background-color: #1BB934;
  color: white;
}
.svgGreen {
  fill: #1BB934;
}
.divBlue {
  background-color: #0097D8;
  color: white;
}
.svgBlue {
  fill: #0097D8;
}
.divGray {
  color: #C6C6C6;
}
.svgGray {
  fill: #C6C6C6;
}
.ToDoStep svg {
  fill: #C6C6C6;
}
.ToDoStep div .colored {
  background-color: #C6C6C6;
  color: black;
  opacity: 0.5;
}
.ToDoStep span {
  color: #C6C6C6;
}
.ToDoStep .pictureChecked {
  position: relative;
}
.ToDoStep .pictureChecked:before {
  color: #C6C6C6;
  content: "\f1db";
  background-color: white;
}
.ToDoStep a .svg {
  display: none;
}
.ToDoStep a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.ToDoStep .CurrentAndNextStepsText {
  display: none;
}
.ToDoStep .ClearedStepText {
  display: none;
}
.ClearedStep svg {
  fill: #1BB934;
}
.ClearedStep div .colored {
  background-color: #1BB934;
  color: white;
  opacity: 0.5;
}
.ClearedStep span {
  color: #1BB934;
}
.ClearedStep .pictureChecked {
  position: relative;
}
.ClearedStep .pictureChecked:before {
  color: #1BB934;
  content: "\f058";
}
.ClearedStep a .svg {
  display: none;
}
.ClearedStep a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.ClearedStep .CurrentAndNextStepsText {
  display: none;
}
.ClearedStep .ClearedStepText {
  display: block;
}
.CurrentStep svg {
  fill: #0097D8;
}
.CurrentStep div .colored {
  background-color: #0097D8;
  color: white;
  opacity: 1;
}
.CurrentStep span {
  color: #0097D8;
}
.CurrentStep .pictureChecked {
  position: relative;
}
.CurrentStep .pictureChecked:before {
  color: #0097D8;
  content: "\f111";
}
.CurrentStep .arrowRight {
  fill: white;
}
.CurrentStep .CurrentAndNextStepsText {
  display: block;
}
.CurrentStep .ClearedStepText {
  display: none;
}
.CurrentStep a {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}
.CurrentStep a .svg {
  display: block;
}
.NopeStep svg {
  fill: #EF233C;
}
.NopeStep div .colored {
  background-color: #EF233C;
  color: white;
}
.NopeStep span {
  color: #EF233C;
}
.NopeStep .pictureChecked {
  position: relative;
}
.NopeStep .pictureChecked:before {
  color: #EF233C;
  content: "\f057";
}
.NopeStep .arrowRight {
  fill: white;
}
.NopeStep .CurrentAndNextStepsText {
  display: block !important;
}
.NopeStep .ClearedStepText {
  display: none;
}
.NopeStep a .svg {
  display: none;
}
.NopeStep a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.objet-garantie {
  font-weight: bold !important;
}
.list-header-card {
  display: flow-root;
}
.border {
  border: solid 1px #C6C6C6;
}
.border .titleSinistre {
  color: white;
  font-weight: bold;
}
.border .header-item {
  margin-top: 27px;
}
.border .no-margin-top {
  margin-top: 0px;
}
.border .font-size-16 {
  font-size: 16px;
}
.border .margin-top-bot-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.border span {
  padding-left: 15px;
}
.border span span {
  font-size: 16px;
}
.borderTop {
  border-top: solid 1px #C6C6C6;
}
.blueText {
  color: #122D98;
  font-size: 18px;
}
a {
  cursor: pointer;
}
#myClaimContent article h2 {
  width: auto !important;
  margin-bottom: 18px;
}
#questConstitution > ul,
#questDecla > ul {
  list-style-type: square;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 20px;
  margin-top: 20px;
}
.underDocUpload {
  padding-left: 62px;
  padding-right: 55.33px;
}
.rectBtn {
  border-radius: 5px;
}
#listDocTemp .list-doc-area {
  margin-top: 25px;
}
#listDocTemp .list-doc-area .doc {
  margin-bottom: 30px;
}
#listDocTemp .input-group {
  border: none;
  display: inline-block;
  width: 100%;
}
#listDocTemp .input-group .showDoc {
  width: 50px;
  height: 50px;
  border: none;
  background-color: white;
  color: white;
  position: relative;
}
#listDocTemp .input-group .showDoc .svg {
  width: 50px;
  height: 50px;
}
#listDocTemp .input-group .showDoc img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#listDocTemp .input-group .showDoc img:hover {
  width: 60px;
  height: 60px;
  top: -5px;
  left: -5px;
}
#listDocTemp .input-group .nameDoc {
  width: auto;
  border: none;
  -webkit-box-shadow: none;
  height: 60px;
  font-weight: bold;
  font-size: 18px;
  padding-top: 12px;
  margin-bottom: 10px;
  line-height: 1.1;
  color: inherit;
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: 24px;
  color: #71787E;
}
#listDocTemp .input-group .deleteDoc {
  background-color: #EF233C;
  height: 40px;
  cursor: pointer;
  width: auto;
  border-radius: 5px;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
}
#listDocTemp .input-group .deleteDoc .svg {
  width: 30px;
  height: 30px;
}
.centerText {
  position: absolute;
  font-size: 17px;
  color: GrayText;
  text-align: center;
  width: 100%;
}
.centerText p {
  padding-top: 5px;
  text-align: center;
}
#overlay,
#overlayShoppingList {
  display: none;
  bottom: 0;
  z-index: 10002;
  text-align: center;
}
#overlay .overlayBtn,
#overlayShoppingList .overlayBtn {
  position: absolute;
  display: block;
  z-index: 100000;
  height: 50px;
  bottom: 20px;
  color: white;
  background: none;
  border: white solid 2px;
  margin-top: 100px;
}
#overlay .overlayBtn:hover,
#overlayShoppingList .overlayBtn:hover {
  color: #393C3E;
  box-shadow: #C6C6C6 0 80px 0 2px inset;
  border: none;
}
#overlay .overlay,
#overlayShoppingList .overlay {
  overflow: hidden;
}
#overlay .overlay #fond,
#overlayShoppingList .overlay #fond,
#overlay .overlay #fondShopping,
#overlayShoppingList .overlay #fondShopping {
  background-color: rgba(30, 40, 60, 0.79);
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
}
#overlay .explainText,
#overlayShoppingList .explainText {
  text-align: left;
  font-size: 14px;
  min-width: 200px;
  max-width: 400px;
  z-index: 10001;
  color: white;
  position: absolute;
  margin-right: 150px;
}
#overlay #svgOverlay,
#overlayShoppingList #svgOverlay,
#overlay #svgOverlayShopping,
#overlayShoppingList #svgOverlayShopping {
  z-index: 20000;
  stroke: none;
  position: absolute;
  top: 0;
  left: 0;
}
#overlay #svgOverlay marker path,
#overlayShoppingList #svgOverlay marker path,
#overlay #svgOverlayShopping marker path,
#overlayShoppingList #svgOverlayShopping marker path {
  fill: white;
}
#overlay #svgOverlay g,
#overlayShoppingList #svgOverlay g,
#overlay #svgOverlayShopping g,
#overlayShoppingList #svgOverlayShopping g {
  stroke: white;
}
@media screen and (max-width: 992px) {
  #overlay #btnUnderstand,
  #overlayShoppingList #btnUnderstand {
    left: 30%;
  }
  #overlay #btnUnderstandShopping,
  #overlayShoppingList #btnUnderstandShopping {
    display: block;
    position: absolute;
    z-index: 100000;
    bottom: 20px;
    color: white;
    background: none;
    border: white solid 2px;
    margin-top: 50px;
  }
  #overlay #btnUnderstandShopping:hover,
  #overlayShoppingList #btnUnderstandShopping:hover {
    color: #393C3E;
    box-shadow: #C6C6C6 0 80px 0 2px inset;
    border: none;
  }
}
.overlayBtn {
  /*display: block;
    margin: auto;
    width: 40%;



    position:absolute;   
   margin:auto;
   
    bottom : 15px;
    color: white;
    z-index:1000005 !important;
    border: white solid 2px;
    background: none;
   // .fontMasterBtn();   

    -moz-transition: all 300ms cubic-bezier(0.390, 0.500, 0.6, 1);
    -o-transition: all 300ms cubic-bezier(0.390, 0.500, 0.6, 1);
    -webkit-transition: all 300ms cubic-bezier(0.390, 0.500, 0.6, 1);
    transition: all 300ms cubic-bezier(0.390, 0.500, 0.6, 1);

    &:hover {
        color: @colorVisaDarkGrey;
        box-shadow: @colorVisaGreyLight 0 80px 0 2px inset;
        border: none;
        
    }*/
}
#idDownForMaintenance {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 1000;
}
.svg-arrow-right:after {
  content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4Ig0KCSBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9Ik91dGxpbmVfSWNvbnMiPg0KCTxwYXRoIGQ9Ik0xOC44MzEsMTEuNjI2bC0xMy0xMS41QzUuNjI2LTAuMDU4LDUuMzA5LTAuMDM5LDUuMTI1LDAuMTY5QzQuOTQyLDAuMzc2LDQuOTYyLDAuNjkxLDUuMTY5LDAuODc0TDE3Ljc0NiwxMkw1LjE2OSwyMy4xMjYNCgkJYy0wLjIwNywwLjE4My0wLjIyNywwLjQ5OC0wLjA0MywwLjcwNUM1LjIyNCwyMy45NDMsNS4zNjIsMjQsNS41LDI0YzAuMTE4LDAsMC4yMzYtMC4wNDEsMC4zMzEtMC4xMjZsMTMtMTEuNQ0KCQlDMTguOTM4LDEyLjI3OSwxOSwxMi4xNDQsMTksMTJTMTguOTM4LDExLjcyMSwxOC44MzEsMTEuNjI2eiIvPg0KPC9nPg0KPGcgaWQ9IkxheWVyXzIiPg0KCTxyZWN0IGZpbGw9Im5vbmUiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPg0KPC9nPg0KPC9zdmc+DQo=') /*../images/arrowright.svg*/;
  position: absolute;
  top: calc((100% - 24px)/2);
  right: 2%;
  max-width: 30px;
  max-height: 30px;
}
.svg-arrow-right-white:after {
  content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4Ig0KCSBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9Ik91dGxpbmVfSWNvbnMiPg0KCTxwYXRoIGQ9Ik0xOC44MzEsMTEuNjI2bC0xMy0xMS41QzUuNjI2LTAuMDU4LDUuMzA5LTAuMDM5LDUuMTI1LDAuMTY5QzQuOTQyLDAuMzc2LDQuOTYyLDAuNjkxLDUuMTY5LDAuODc0TDE3Ljc0NiwxMkw1LjE2OSwyMy4xMjYNCgkJYy0wLjIwNywwLjE4My0wLjIyNywwLjQ5OC0wLjA0MywwLjcwNUM1LjIyNCwyMy45NDMsNS4zNjIsMjQsNS41LDI0YzAuMTE4LDAsMC4yMzYtMC4wNDEsMC4zMzEtMC4xMjZsMTMtMTEuNQ0KCQlDMTguOTM4LDEyLjI3OSwxOSwxMi4xNDQsMTksMTJTMTguOTM4LDExLjcyMSwxOC44MzEsMTEuNjI2eiIgZmlsbD0id2hpdGUiLz4NCjwvZz4NCjxnIGlkPSJMYXllcl8yIj4NCgk8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4NCjwvZz4NCjwvc3ZnPg0K') /* ../images/arrowrightWhite.svg */;
  position: absolute;
  top: calc((100% - 24px)/2);
  right: 2%;
  max-width: 30px;
  max-height: 30px;
}
.svg-xs-arrow-right-white:after {
  max-width: 30px;
  max-height: 30px;
}
@media (max-width: 992px) {
  .svg-xs-arrow-right-white:after {
    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4Ig0KCSBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9Ik91dGxpbmVfSWNvbnMiPg0KCTxwYXRoIGQ9Ik0xOC44MzEsMTEuNjI2bC0xMy0xMS41QzUuNjI2LTAuMDU4LDUuMzA5LTAuMDM5LDUuMTI1LDAuMTY5QzQuOTQyLDAuMzc2LDQuOTYyLDAuNjkxLDUuMTY5LDAuODc0TDE3Ljc0NiwxMkw1LjE2OSwyMy4xMjYNCgkJYy0wLjIwNywwLjE4My0wLjIyNywwLjQ5OC0wLjA0MywwLjcwNUM1LjIyNCwyMy45NDMsNS4zNjIsMjQsNS41LDI0YzAuMTE4LDAsMC4yMzYtMC4wNDEsMC4zMzEtMC4xMjZsMTMtMTEuNQ0KCQlDMTguOTM4LDEyLjI3OSwxOSwxMi4xNDQsMTksMTJTMTguOTM4LDExLjcyMSwxOC44MzEsMTEuNjI2eiIgZmlsbD0id2hpdGUiLz4NCjwvZz4NCjxnIGlkPSJMYXllcl8yIj4NCgk8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4NCjwvZz4NCjwvc3ZnPg0K') /*../images/arrowrightWhite.svg */;
    position: absolute;
    top: calc((100% - 24px)/2);
    right: 2%;
  }
}
.svg-echange-lu,
.svg-echange-non-lu {
  width: 25px;
  background-repeat: no-repeat;
  border-image: none;
}
.svg-echange-lu {
  padding: 0px !important;
  margin: 10px 0px 0px 0px !important;
  height: 26px;
  background-size: 25px 26px;
  background-image: url('themes/Visa2017/images/logo/echange_lu.png');
}
.svg-echange-non-lu {
  padding: 0px !important;
  margin: 0px !important;
  height: 18px;
  background-size: 25px 18px;
  background-image: url('themes/Visa2017/images/logo/echange_non_lu.png');
}
@media (max-width: 768px) {
  .svg-echange-lu {
    background-image: url('themes/Visa2017/images/logo/echange_lu_white.png');
  }
  .svg-echange-non-lu {
    background-image: url('themes/Visa2017/images/logo/echange_non_lu_white.png');
  }
}
.linkButton {
  font-size: 17px;
  color: GrayText;
  text-align: center;
  width: 100%;
}
.error-msg {
  margin-top: 5px;
}
.error-msg > label {
  font-size: 15px;
  font-style: italic;
  color: #fa4251 !important;
}
.filetodocdialog .filename {
  color: #1A1E5A;
  font-weight: bold;
}
.filetodocdialog .prefix {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.filetodocdialog .title {
  white-space: nowrap;
  display: flex;
  font-weight: bold;
}
.filetodocdialog .title-panel {
  color: #71787E;
  font-weight: bold;
}
.filetodocdialog .checkbox-visa {
  width: 45px;
  text-align: center;
  display: inline-block;
  padding: 0;
  background: white;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  position: relative;
}
.filetodocdialog .checkbox-visa label {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  left: 10px;
  top: 12px;
  background: white;
  border: solid 1px #C6C6C6;
}
.filetodocdialog .checkbox-visa label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 3px solid #0097D8;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.filetodocdialog .checkbox-visa label:hover::after {
  opacity: 0.3;
}
.filetodocdialog .checkbox-visa input[type=checkbox] {
  height: 40px;
  visibility: hidden;
}
.filetodocdialog .checkbox-visa input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.filetodocdialog td label {
  color: #333;
  font-weight: inherit;
}
.return-to-claims-button {
  font-size: 15px;
  text-decoration: underline;
  font-weight: bold;
  margin-left: 30px;
}
.files-handler {
  margin-bottom: 30px;
  display: inline-flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0px;
}
.send-docs-button:enabled {
  background-color: orange;
  border: none;
  border-radius: 5px;
  color: black;
}
.send-docs-button:enabled:hover {
  background-color: white;
  border: 1px solid orange;
  border-radius: 5px;
  color: black;
}
.send-docs-button:disabled {
  background-color: orange;
  border: none;
  border-radius: 5px;
  color: black;
  opacity: 0.5;
  pointer-events: none;
}
#horizontal-timeline .timeline {
  list-style: none;
  padding: 20px;
  position: relative;
}
#horizontal-timeline .timeline .timeline-item {
  margin-bottom: 20px;
  position: relative;
  text-align: center;
}
#horizontal-timeline .timeline .timeline-item hr {
  margin-top: -27px;
  border-top: 5px solid #eee;
  position: absolute;
  left: 50%;
  margin-left: 10px;
  width: 94%;
}
#horizontal-timeline .timeline .timeline-item .timeline-badge {
  font-size: 30px;
}
#horizontal-timeline .timeline .timeline-item .timeline-badge .glyphicon {
  color: lightgray;
  background-color: white;
  z-index: 10;
}
#horizontal-timeline .timeline .timeline-item .timeline-badge .glyphicon-record {
  color: orange;
}
#horizontal-timeline .timeline .timeline-item .timeline-badge .glyphicon-ok-sign {
  color: green;
}
#horizontal-timeline .timeline .timeline-item .timeline-badge .glyphicon-remove-sign {
  background-color: lightgray;
  border-radius: 50px;
}
#horizontal-timeline .timeline .timeline-item:before,
#horizontal-timeline .timeline .timeline-item:after {
  content: "";
  display: table;
}
#horizontal-timeline .timeline .timeline-item:after {
  clear: both;
}
#horizontal-timeline .timeline .timeline-item .timeline-panel {
  position: relative;
  width: 46%;
  float: left;
  right: 16px;
  border-radius: 2px;
  padding: 20px;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
#horizontal-timeline .timeline .timeline-item .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -16px;
  display: inline-block;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  content: " ";
}
#horizontal-timeline .timeline .timeline-item .timeline-panel .timeline-title {
  margin-top: 0;
  color: inherit;
}
#horizontal-timeline .timeline .timeline-item .timeline-panel .timeline-body > p,
#horizontal-timeline .timeline .timeline-item .timeline-panel .timeline-body > ul {
  margin-bottom: 0;
}
#horizontal-timeline .timeline .timeline-item .timeline-panel .timeline-body > p + p {
  margin-top: 5px;
}
#horizontal-timeline .timeline .timeline-item:last-child:nth-child(even) {
  float: right;
}
#horizontal-timeline .timeline .timeline-item:nth-child(even) .timeline-panel {
  float: right;
  left: 16px;
}
#horizontal-timeline .timeline .timeline-item:nth-child(even) .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
#horizontal-timeline .timeline-horizontal {
  list-style: none;
  position: relative;
  display: inline-block;
}
#horizontal-timeline .timeline-horizontal:before {
  height: 3px;
  bottom: 26px;
  left: 56px;
  width: 93%;
  margin-bottom: 20px;
}
#horizontal-timeline .timeline-horizontal .timeline-item {
  display: inline-block;
}
#horizontal-timeline .timeline-horizontal .timeline-item:before,
#horizontal-timeline .timeline-horizontal .timeline-item:after {
  display: none;
}
#horizontal-timeline .tooltipLabel {
  font-family: var(--font-family-base);
  font-size: 12px;
  line-height: 22px;
  color: #71787E;
}
/* ETAT d'AVANCEMENT */
.block-step {
  border: solid 1px #C6C6C6;
}
.block-step .formActivate {
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.step-tracker {
  border: solid 1px #C6C6C6;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  background-color: #0097D8;
  position: relative;
  min-height: 46px;
}
@media (max-width: 768px) {
  .step-tracker {
    min-height: 92px;
  }
}
.step-tracker .steps-container {
  border-radius: 4px 4px 0 0;
  display: inline;
  overflow: hidden;
}
.step-tracker ul.steps-wrapper {
  list-style: none outside none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.step-tracker .steps-middle {
  border-left: 1px solid #0097D8;
  border-right: 1px solid #0097D8;
}
@media (max-width: 768px) {
  .step-tracker .steps-first .steps-title {
    left: 0;
  }
  .step-tracker .steps-middle .steps-title {
    left: -100%;
  }
  .step-tracker .steps-last .steps-title {
    right: 0;
  }
}
.step-tracker .steps {
  float: left;
  margin: 0;
  padding: 0 10px 0 10px;
  height: 46px;
  line-height: 46px;
  position: relative;
  background: #ffffff;
  font-size: 16px;
  cursor: not-allowed;
  /*@media (max-width: '720px') {
            position: absolute;
            top: 20%;            
            width: 100%;
        }*/
}
.step-tracker .steps.is-active {
  background: #0097D8;
  cursor: default;
}
.step-tracker .steps.is-active .steps-number {
  color: white;
}
.step-tracker .steps.is-active .steps-chevron {
  color: white;
}
.step-tracker .steps.is-active .steps-title {
  color: white;
}
@media (max-width: 768px) {
  .step-tracker .steps.is-active .steps-title {
    position: absolute;
    top: 125%;
    width: 300%;
  }
}
.step-tracker .steps.is-active .steps-separator {
  border-left-color: #0097D8;
}
.step-tracker .steps.is-active .steps-separator:before {
  border-left: 13px solid #0097D8;
}
.step-tracker .steps.is-active a {
  cursor: pointer;
  color: #1A1E5A;
  text-decoration: none;
}
.step-tracker .steps.is-active a:hover,
.step-tracker .steps.is-active a:visited,
.step-tracker .steps.is-active a:focus,
.step-tracker .steps.is-active a:active {
  color: #1A1E5A;
  text-decoration: none;
}
.step-tracker .steps.is-active a:hover {
  text-decoration: underline;
}
.step-tracker .steps.is-active:first-child {
  padding-left: 10px;
  border-top-left-radius: 2px;
}
.step-tracker .steps.is-active:last-child {
  border-top-right-radius: 2px;
}
.step-tracker .steps .steps-number {
  font-weight: bold;
  font-size: large;
  float: left;
  line-height: 46px;
  color: #0097D8;
  /*@media (min-width: @screen-md-min) {
            font-size: x-large;
        }*/
}
.step-tracker .steps .steps-chevron {
  padding: 0 5px;
  font-size: large;
  float: left;
  line-height: 46px;
  color: #0097D8;
  /*@media (min-width: @screen-md-min) {                
            font-size: x-large;
        }*/
}
.step-tracker .steps .steps-title {
  display: table-cell;
  float: none;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  height: 46px;
  max-height: 46px;
  line-height: 16px;
  vertical-align: middle;
  overflow: hidden;
  padding: 0;
  width: inherit;
  color: #0097D8;
}
.step-tracker .steps-separator {
  border: 24px solid transparent;
  border-left: 15px solid #0097D8;
  border-right: 0;
  display: block;
  position: absolute;
  right: -14px;
  top: -1px;
  z-index: 1;
}
.step-tracker .steps-separator:before {
  border: 23px solid transparent;
  border-left: 13px solid #ffffff;
  border-right: 0;
  content: "";
  display: block;
  position: absolute;
  right: 2px;
  top: -23px;
}
/* Retour en haut de page*/
.BackTop {
  position: fixed;
  bottom: 40px;
  right: 50px;
  z-index: 1000;
}
.BackTop a,
.BackTop span {
  width: 108px;
  display: block;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.BackTop span {
  opacity: 0.5;
  height: 108px;
  margin-bottom: 7px;
  background: lightgray url("themes/base/images/up-arrow.png") no-repeat center center;
  border-radius: 10px;
}
.BackTop span:hover {
  background-color: #BBB;
  opacity: 1;
}
.BackTop a {
  text-align: center;
  font: 11px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #BBB;
}
.BackTop a:hover {
  color: #777;
}
.BackTop a:hover span {
  color: #777;
}
/**/
header {
  border-bottom: 1px solid #C6C6C6;
}
header #headeContent {
  margin-bottom: 10px;
  height: 80px;
  margin-bottom: 1%;
}
header #headeContent button {
  margin: 0 0 0 15px;
}
header #headeContent a {
  cursor: pointer;
}
header #headeContent #menuTitleXS {
  text-align: center;
  margin-top: 25px;
  font-family: var(--font-family-base);
  font-size: 22px;
  line-height: 32px;
  color: #71787E;
  font-size: 18px;
}
header #headeContent #logo {
  padding: 0;
}
header #headeContent #logo #logoImg {
  width: auto;
  max-height: 60px;
  margin-top: 20px;
  margin-right: 0;
}
header #headeContent #logo #logoImg img {
  width: 100%;
  height: 100%;
}
header #headeContent .accountMenu {
  margin-top: 20px;
  padding: 0;
}
header #headeContent .accountMenu a {
  text-decoration: none;
  display: inline-block;
  position: relative;
  width: 150px;
  text-align: center;
}
header #headeContent .accountMenu a:before,
header #headeContent .accountMenu a:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0097D8;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -o-transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
}
header #headeContent .accountMenu a:before {
  top: 0;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
}
header #headeContent .accountMenu a:after {
  bottom: 0;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}
header #headeContent .accountMenu a:hover::before,
header #headeContent .accountMenu a:focus::before {
  opacity: 1;
  -webkit-transform: translateY(-15px);
  -moz-transform: translateY(-15px);
  -ms-transform: translateY(-15px);
  -o-transform: translateY(-15px);
  transform: translateY(-15px);
}
header #headeContent .accountMenu a:hover::after,
header #headeContent .accountMenu a:focus::after {
  opacity: 1;
  -webkit-transform: translateY(15px);
  -moz-transform: translateY(15px);
  -ms-transform: translateY(15px);
  -o-transform: translateY(15px);
  transform: translateY(15px);
}
#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(225, 229, 239, 0.79);
  z-index: 10000;
}
#loading .contentLoading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -30px;
  text-align: center;
}
#loading .contentLoading .VisaLoad {
  position: relative;
  display: inline-block;
  width: 200px;
  height: auto;
  margin: auto;
  /*-moz-animation: logoVisaAnim ease-in-out 5s infinite;
            -o-animation: logoVisaAnim ease-in-out 5s infinite;
            -webkit-animation: logoVisaAnim ease-in-out 5s infinite;
            animation: logoVisaAnim ease-in-out 5s infinite;*/
  left: auto;
  right: auto;
  color: #1A1E5A;
  font-size: 20px;
  text-align: center;
}
#loading .contentLoading .VisaLoad i {
  font-size: 20px;
  text-align: center;
}
#loading .contentLoading .VisaLoad i b {
  font-size: 20px;
  text-align: center;
}
#loading .contentLoading .VisaLoad img {
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  -webkit-perspective: 600px;
  perspective: 600px;
}
@keyframes logoVisaAnim {
  0% {
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  20% {
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  80% {
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    -o-transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}
.cssload-squeeze {
  position: relative;
  display: block;
  margin: 15px auto auto 0;
  width: 200px;
}
.cssload-squeeze,
.cssload-squeeze {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cssload-squeeze span {
  border-radius: 15px;
  display: inline-block;
  height: 18px;
  width: 18px;
  margin: 0 12px 0 0;
  background: #1a1e5a;
}
.cssload-squeeze span:nth-child(1) {
  -o-animation: cssload-rotateX 2s 0.12s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -ms-animation: cssload-rotateX 2s 0.12s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -webkit-animation: cssload-rotateX 2s 0.12s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -moz-animation: cssload-rotateX 2s 0.12s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  animation: cssload-rotateX 2s 0.12s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
}
.cssload-squeeze span:nth-child(2) {
  -o-animation: cssload-rotateX 2s 0.23s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -ms-animation: cssload-rotateX 2s 0.23s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -webkit-animation: cssload-rotateX 2s 0.23s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -moz-animation: cssload-rotateX 2s 0.23s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  animation: cssload-rotateX 2s 0.23s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
}
.cssload-squeeze span:nth-child(3) {
  -o-animation: cssload-rotateX 2s 0.35s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -ms-animation: cssload-rotateX 2s 0.35s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -webkit-animation: cssload-rotateX 2s 0.35s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -moz-animation: cssload-rotateX 2s 0.35s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  animation: cssload-rotateX 2s 0.35s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
}
.cssload-squeeze span:nth-child(4) {
  -o-animation: cssload-rotateX 2s 0.46s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -ms-animation: cssload-rotateX 2s 0.46s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -webkit-animation: cssload-rotateX 2s 0.46s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -moz-animation: cssload-rotateX 2s 0.46s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  animation: cssload-rotateX 2s 0.46s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
}
.cssload-squeeze span:nth-child(5) {
  -o-animation: cssload-rotateX 2s 0.58s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -ms-animation: cssload-rotateX 2s 0.58s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -webkit-animation: cssload-rotateX 2s 0.58s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  -moz-animation: cssload-rotateX 2s 0.58s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
  animation: cssload-rotateX 2s 0.58s infinite cubic-bezier(0.65, 0.03, 0.735, 0.045);
}
@-moz-keyframes cssload-rotateX {
  0% {
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
  50% {
    -moz-transform: rotateX(90deg) scale(0.5, 0.5);
    -ms-transform: rotateX(90deg) scale(0.5, 0.5);
    -o-transform: rotateX(90deg) scale(0.5, 0.5);
    -webkit-transform: rotateX(90deg) scale(0.5, 0.5);
    transform: rotateX(90deg) scale(0.5, 0.5);
    background: #f7b500;
  }
  100% {
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@-webkit-keyframes cssload-rotateX {
  0% {
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
  50% {
    -moz-transform: rotateX(90deg) scale(0.5, 0.5);
    -ms-transform: rotateX(90deg) scale(0.5, 0.5);
    -o-transform: rotateX(90deg) scale(0.5, 0.5);
    -webkit-transform: rotateX(90deg) scale(0.5, 0.5);
    transform: rotateX(90deg) scale(0.5, 0.5);
    background: #f7b500;
  }
  100% {
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
@keyframes cssload-rotateX {
  0% {
    -moz-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    -o-transform: rotateZ(0);
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  50% {
    -moz-transform: rotateX(90deg) scale(0.5, 0.5);
    -ms-transform: rotateX(90deg) scale(0.5, 0.5);
    -o-transform: rotateX(90deg) scale(0.5, 0.5);
    -webkit-transform: rotateX(90deg) scale(0.5, 0.5);
    transform: rotateX(90deg) scale(0.5, 0.5);
    background: #f7b500;
  }
  100% {
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
.cardinfo {
  min-width: 220px;
}
.cardinfo.well {
  background: rgba(247, 247, 247, 0.8);
}
.cardinfo.well:hover {
  background: rgba(230, 230, 230, 0.8);
}
.cardinfo:hover {
  cursor: pointer;
}
.cardinfo-brand {
  padding: 5px;
  float: left;
  /*span.visa_premier {
            background-image: url("../images/card_visa_premier.png");
        }*/
}
.cardinfo-brand span {
  background-image: url("themes/Visa2017/images/visa.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 70px;
  height: 26px;
  display: block;
}
.cardinfo-header {
  height: 35px;
  display: block;
  overflow: hidden;
}
.cardinfo-content {
  font-family: var(--font-family-base);
  font-size: 22px;
  line-height: 32px;
  color: #393C3E;
  color: #C6C6C6;
  margin-left: 10px;
  margin-bottom: 15px;
}
.cardinfo-footer {
  color: #0097D8;
  margin-left: 10px;
}
.cardinfo-footer .cardinfo-data {
  position: relative;
}
.cardinfo-footer .cardinfo-data label {
  color: #C6C6C6;
}
.cardinfo-settings {
  float: right;
  font-size: larger;
  height: inherit;
  width: 30px;
  padding: 5px;
}
.manage-cardinfo .cardinfo.well:hover {
  cursor: default;
  background: rgba(247, 247, 247, 0.8);
}
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  border-radius: 3px;
}
.bs-callout + .bs-callout {
  margin-top: -5px;
}
.bs-callout-default {
  border-left-color: #777;
}
.bs-callout-default h4 {
  color: #777;
}
.bs-callout-primary {
  border-left-color: #428bca;
}
.bs-callout-primary h4 {
  color: #428bca;
}
.bs-callout-success {
  border-left-color: #5cb85c;
}
.bs-callout-success h4 {
  color: #5cb85c;
}
.bs-callout-danger {
  border-left-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  border-left-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}
#form0 .checkbox-visa,
#CreerSinistreLieForm .checkbox-visa {
  width: 60px;
  text-align: center;
  display: inline-block;
  padding: 0;
  background: white;
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  position: relative;
}
#form0 .checkbox-visa label,
#CreerSinistreLieForm .checkbox-visa label {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  left: 17.5px;
  top: 15px;
  background: white;
  border: solid 1px #C6C6C6;
}
#form0 .checkbox-visa label:after,
#CreerSinistreLieForm .checkbox-visa label:after {
  content: '';
  width: 15px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 3px solid #0097D8;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#form0 .checkbox-visa label:hover::after,
#CreerSinistreLieForm .checkbox-visa label:hover::after {
  opacity: 0.3;
}
#form0 .checkbox-visa input[type=checkbox],
#CreerSinistreLieForm .checkbox-visa input[type=checkbox] {
  visibility: hidden;
}
#form0 .checkbox-visa input[type=checkbox]:checked + label:after,
#CreerSinistreLieForm .checkbox-visa input[type=checkbox]:checked + label:after {
  opacity: 1;
}
#form0 td label,
#CreerSinistreLieForm td label {
  color: #71787E;
}
#form0 article #labelContent label,
#CreerSinistreLieForm article #labelContent label {
  font-size: 18px;
  text-decoration: underline;
}
#form0 .QuestionnaireContainer .QuestionnaireQuestion h5 label,
#CreerSinistreLieForm .QuestionnaireContainer .QuestionnaireQuestion h5 label {
  font-size: 18px;
  text-decoration: underline;
}
.Question .QuestionTitle {
  background-color: #0097D8;
  color: white;
  padding: 10px;
  font-size: 14px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.Question .QuestionTitle h5 {
  margin-bottom: 10px;
}
.Question .QuestionTitle span {
  margin-bottom: 1px;
}
.Question .QuestionResponse {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: white;
  color: #71787E;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.05);
}
.Question .QuestionResponse h5 {
  color: #0097D8;
  margin: 5px;
  margin-left: 10px;
}
.Question .QuestionResponse span {
  font-size: 15px;
  line-height: 20px;
}
.Question .QuestionResponse a {
  margin-left: 0;
  margin-top: 15px;
  border-top: 1px solid #C6C6C6;
  background-color: #BAE3F5;
}
.titleQuestion {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.titleQuestion span {
  font-size: 20px;
}
/*TimeLine Left*/
.timeline-left {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline-left:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 25px;
  margin-left: -1.5px;
}
.timeline-left .timeline-item {
  margin-bottom: 20px;
  position: relative;
}
.timeline-left .timeline-item:after,
.timeline-left .timeline-item:before {
  content: " ";
  display: table;
}
.timeline-left .timeline-item:after {
  clear: both;
}
.timeline-left .timeline-item > .timeline-panel {
  width: calc(100% - 75px);
  float: right;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline-left .timeline-item > .timeline-panel:before {
  position: absolute;
  top: 26px;
  left: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 0 solid #ccc;
  border-right: 15px solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline-left .timeline-item > .timeline-panel:after {
  position: absolute;
  top: 27px;
  left: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 0 solid #fff;
  border-right: 14px solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse {
  cursor: pointer;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse .timeline-body {
  padding-top: 15px;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse .timeline-heading {
  position: relative;
  border-bottom: 4px solid;
  border-bottom-color: white;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse .timeline-heading:after,
.timeline-left .timeline-item > .timeline-panel.timeline-collapse .timeline-heading:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse .timeline-heading:after {
  bottom: -19px;
  left: calc(50% - 30px);
  border-color: transparent transparent white transparent;
  border-width: 0 30px 15px 30px;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse .timeline-heading:before {
  bottom: -14px;
  left: calc(50% - 30px);
  border-color: transparent transparent #1BB934 transparent;
  border-width: 0 30px 15px 30px;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse.collapsed .timeline-heading {
  position: relative;
  border-bottom: 4px solid;
  border-bottom-color: white;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse.collapsed .timeline-heading:after,
.timeline-left .timeline-item > .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse.collapsed .timeline-heading:after {
  bottom: -14px;
  left: calc(50% - 30px);
  border-color: white transparent transparent transparent;
  border-width: 15px 30px 0 30px;
}
.timeline-left .timeline-item > .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  bottom: -19px;
  left: calc(50% - 30px);
  border-color: #1BB934 transparent transparent transparent;
  border-width: 15px 30px 0 30px;
}
.timeline-left .timeline-item > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 0px;
  margin-right: -25px;
  background-color: #999999;
  z-index: 100;
  border-radius: 50%;
}
.timeline-left .timeline-item.timeline-inverted > .timeline-panel {
  float: left;
}
.timeline-left .timeline-item.timeline-inverted > .timeline-panel:before {
  border-right-width: 0;
  border-left-width: 15px;
  right: -15px;
  left: auto;
}
.timeline-left .timeline-item.timeline-inverted > .timeline-panel:after {
  border-right-width: 0;
  border-left-width: 14px;
  right: -14px;
  left: auto;
}
/*TimeLine Right*/
.timeline-right {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline-right:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  right: 25px;
  margin-left: -1.5px;
}
.timeline-right .timeline-item {
  margin-bottom: 20px;
  position: relative;
}
.timeline-right .timeline-item:after,
.timeline-right .timeline-item:before {
  content: " ";
  display: table;
}
.timeline-right .timeline-item:after {
  clear: both;
}
.timeline-right .timeline-item > .timeline-panel {
  width: calc(100% - 75px);
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline-right .timeline-item > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline-right .timeline-item > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
.timeline-right .timeline-item > .timeline-badge {
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  right: 0px;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-radius: 50%;
}
.timeline-right .timeline-item.timeline-inverted > .timeline-panel {
  float: left;
}
.timeline-right .timeline-item.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline-right .timeline-item.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}
.timeline-badge svg polygon,
.timeline-badge svg path,
.timeline-badge svg circle {
  fill: white;
  /*stroke:white;*/
  /*stroke-width: 2px;*/
}
.timeline-badge.primary {
  background-color: #0097D8 !important;
}
.timeline-badge.primary + .timeline-panel.timeline-collapse.collapsed .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.primary + .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  border-top-color: #0097D8;
}
.timeline-badge.primary + .timeline-panel.timeline-collapse .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.primary + .timeline-panel.timeline-collapse .timeline-heading:before {
  border-bottom-color: #0097D8;
}
.timeline-badge.success {
  background-color: #7FB800 !important;
}
.timeline-badge.success + .timeline-panel.timeline-collapse.collapsed .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.success + .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  border-top-color: #7FB800;
}
.timeline-badge.success + .timeline-panel.timeline-collapse .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.success + .timeline-panel.timeline-collapse .timeline-heading:before {
  border-bottom-color: #7FB800;
}
.timeline-badge.warning {
  background-color: #f7b600 !important;
}
.timeline-badge.warning + .timeline-panel.timeline-collapse.collapsed .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.warning + .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  border-top-color: #f7b600;
}
.timeline-badge.warning + .timeline-panel.timeline-collapse .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.warning + .timeline-panel.timeline-collapse .timeline-heading:before {
  border-bottom-color: #f7b600;
}
.timeline-badge.danger {
  background-color: #EF233C !important;
}
.timeline-badge.danger + .timeline-panel.timeline-collapse.collapsed .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.danger + .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  border-top-color: #EF233C;
}
.timeline-badge.danger + .timeline-panel.timeline-collapse .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.danger + .timeline-panel.timeline-collapse .timeline-heading:before {
  border-bottom-color: #EF233C;
}
.timeline-badge.info {
  background-color: #BAE3F5 !important;
}
.timeline-badge.info + .timeline-panel.timeline-collapse.collapsed .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.info + .timeline-panel.timeline-collapse.collapsed .timeline-heading:before {
  border-top-color: #BAE3F5;
}
.timeline-badge.info + .timeline-panel.timeline-collapse .timeline-heading {
  /*border-bottom-color: @color;*/
}
.timeline-badge.info + .timeline-panel.timeline-collapse .timeline-heading:before {
  border-bottom-color: #BAE3F5;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}
.timeline-body > p + p {
  margin-top: 5px;
}
.card {
  font-size: 1em;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 0.28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, 0.1);
  box-shadow: none;
}
.card-img-top {
  display: block;
  width: 100%;
  height: auto;
}
.card-title {
  font-size: 1.28571429em;
  font-weight: 700;
  line-height: 1.2857em;
  color: #1A1E5A;
}
.card-text {
  clear: both;
  margin-top: 0.5em;
  color: rgba(0, 0, 0, 0.68);
}
.card-footer {
  font-size: 1em;
  position: static;
  top: 0;
  left: 0;
  max-width: 100%;
  padding: 0.75em 1em;
  color: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #fff;
}
.card-inverse .btn {
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.card .list-group .list-group-item {
  margin: 0;
  border: 0;
  border-top: 1px solid #ddd;
}
.card .list-group .list-group-item:first-child {
  border-radius: 0;
}
.card .list-group .list-group-item:last-child {
  border-radius: 0;
  border-bottom: 1px solid #ddd;
}
#pdf_content {
  z-index: 1100;
  position: fixed;
  top: 0;
  height: 100%;
  padding: 0;
  background-color: rgba(44, 44, 44, 0.36);
}
#pdf_content #pdf {
  width: 100%;
  /*height: 850px;*/
  height: 100%;
  top: 0;
  right: 0;
  display: inline-block;
  margin-top: 20px;
  background-color: white;
}
#pdf_content .move {
  top: 0;
  width: 30px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  cursor: pointer;
  -moz-transition: all linear 0.2s;
  -o-transition: all linear 0.2s;
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
}
#pdf_content .move:hover {
  background-color: rgba(238, 238, 238, 0.62);
}
#pdf_content .move:hover p {
  color: gray;
}
#pdf_content .move p {
  top: 50%;
  right: 25%;
  color: rgba(0, 0, 0, 0);
  font-size: large;
}
#pdf_content .pdf_menu {
  display: inline-block;
  padding-right: 0px;
  height: 100%;
}
#pdf_content .pdf-div-row {
  height: calc(100% - 3em);
}
#pdf_content #close {
  margin: 0 0 0 20px;
  position: absolute;
  width: 100px;
  background-color: #196bb7;
  border: none;
  -moz-transition: all ease-in-out 0.4s;
  -o-transition: all ease-in-out 0.4s;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}
#pdf_content #close:hover {
  background-color: #052333;
}
.cookieBar-messageColumn {
  font-size: 14px;
  color: #fff;
  float: left;
}
.cookieBar-buttonsColumn {
  float: right;
}
.cookieBar-button-accept,
.cookieBar-button-deny,
.cookieBar-button-param {
  background: #646569;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  cursor: pointer;
  margin-left: 5px;
  padding: 5px;
  border: 0px none;
}
.cookieBar-consent-text {
  text-align: justify;
}
.cookieBar-messageColumn,
.cookieBar-buttonsColumn {
  float: left;
  width: 100%;
}
#cookieBar-consent-title-text {
  font-size: 15px;
}
#cookieBar-consent-text {
  font-size: 13px;
}
.cookieBar-buttonsColumn {
  float: right;
}
.hidedesktop {
  display: inline;
  font-size: 14px;
  cursor: pointer;
  color: #00559c;
  text-decoration: none;
}
.cookieBar-messageColumn,
.cookieBar-buttonsColumn {
  float: left;
  width: 100%;
}
.cookieBar-button-accept,
.cookieBar-button-deny,
.cookieBar-button-param {
  margin: 5px;
  float: right;
}
.cookieBar-accept {
  margin-right: 5px;
}
#popupCookieConsent {
  padding-left: 0 !important;
}
#popupCookieConsent .btn.btnGrpConsent.active,
#popupCookieConsent .btn.btnConsent.active {
  background: #0097D8 repeat-x;
  color: #fff;
}
#popupCookieConsent .btn.btnGrpConsent input,
#popupCookieConsent .btn.btnConsent input {
  width: auto;
  height: auto;
}
#popupCookieConsent .panel {
  border-color: #0097D8;
}
#popupCookieConsent .panel-heading {
  /*background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
            background-repeat: repeat-x;*/
  color: #fff;
  background-color: #0097D8;
  border-color: #0097D8;
}
#popupCookieConsent .panel .consentLine .row {
  margin-left: -15px;
  margin-right: -15px;
}
#popupCookieConsent .consentLine {
  margin: 0;
  padding: 2px 0;
}
#popupCookieConsent .tableBorderBottom {
  position: relative;
}
#popupCookieConsent .tableBorderBottom:before {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 0;
  height: 1px;
  width: 96%;
  border-bottom: 1px solid lightgray;
}
#mandatoryConsent-modal {
  padding-left: 0 !important;
}
#mandatoryConsent-modal .btn.groupConsent.active,
#mandatoryConsent-modal .btn.groupConsent.active {
  background: #0097D8 repeat-x;
  color: #fff;
}
#mandatoryConsent-modal .btn.groupConsent input,
#mandatoryConsent-modal .btn.groupConsent input {
  width: auto;
  height: auto;
}
#mandatoryConsent-modal .panel {
  border-color: #0097D8;
}
#mandatoryConsent-modal .panel-heading {
  /*background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
            background-repeat: repeat-x;*/
  color: #fff;
  background-color: #0097D8;
  border-color: #0097D8;
}
.linkClaimAccordion {
  background-color: #FFFFFF;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 0.4s;
  margin-left: 30px;
  margin-right: 15px;
  border-radius: 5px 5px 5px 5px;
}
.linkClaimAccordion:hover {
  background-color: #ccc;
  /*lightgray*/
}
.linkClaimAccordion .accordionArrow {
  font-weight: bold;
  float: right;
  padding: 0;
  margin: 4px 10px 4px 10px;
  height: 18px;
  background-size: 16px 16px;
  background-image: url(themes/Visa2017/images/logo/arrow_down.svg);
  transform: rotate(180deg);
  width: 16px;
}
.linkClaimActive .accordionArrow {
  transform: rotate(0deg);
}
.linkClaimPanel {
  background-color: #FFFFFF;
  padding: 0 18px;
  transition: max-height 0.2s ease-out;
}
.linkClaim {
  color: #71787E;
  /*gray*/
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 5px;
}
.linkClaim:hover {
  color: #FFFFFF;
  background-color: #0097D8;
  /*blue*/
  border-radius: 5px 5px 5px 5px;
}
.bloc-doc {
  margin-bottom: 10px;
}
.bloc-doc .doc-label {
  color: #0097D8;
}
.bloc-doc .doc-icon {
  font-size: 14px;
  padding-top: 9px;
}
.bloc-doc h4 {
  margin-bottom: 5px;
  margin-top: 5px;
}
.bloc-doc .panel-heading {
  background: #337ab7;
  color: white;
}
.bloc-doc .bloc-doc-buttons a,
.bloc-doc .bloc-doc-buttons a:hover {
  text-decoration: none;
}
.bloc-doc .bloc-doc-buttons a:hover svg {
  fill: white;
}
.bloc-doc .bullet-list {
  font-size: 10px;
  margin-right: 20px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
iframe {
  /* This fixes a mobile Safari bug */
  height: 38px !important;
}
#payment-form {
  width: 300px;
  margin: 0 auto;
}
/*#payment-form label {
    display: block;
    height: 10px;
    color: #13395e;
    font-size: 14px;
    font-weight: 500;
    line-height: 10px;
    margin: 8px 0;
}*/
#payment-form .date-and-code {
  display: flex;
  margin-bottom: 8px;
}
#payment-form .date-and-code > div:nth-child(1) {
  width: 55.715%;
}
#payment-form .date-and-code > div:nth-child(2) {
  width: 45.719%;
}
#payment-form .frame--activated.frame--valid,
#payment-form .input-container-custom.valid {
  border: 1px solid #1BB934;
  color: #1BB934;
}
#payment-form .input-container-custom.input-validation-error {
  border: 1px solid #EF233C;
  border-radius: 4px 4px 0 0;
}
#payment-form .input-container-custom {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  opacity: 1;
  border: solid 1px #ccc;
  border-radius: 3px;
  outline: none;
}
#payment-form .input-container {
  position: relative;
  display: flex;
  height: 40px;
}
#payment-form .icon-container:last-child {
  right: 0;
}
#payment-form .icon-container.payment-method {
  right: 0;
}
#payment-form .card-holder-name-div,
#payment-form .card-number-div,
#payment-form .date-and-code {
  margin-top: 10px;
}
/*#payment-form .input-container.card-holder {
    margin-bottom: 8px;
}

#payment-form .input-container.card-number {
    margin-bottom: 8px;
}*/
#payment-form .expiry-date-div {
  margin-right: 8px;
}
#payment-form .card-holder-frame,
#payment-form .card-number-frame,
#payment-form .expiry-date-frame,
#payment-form .cvv-frame {
  flex: 1 1 auto;
  padding-left: 40px;
}
#payment-form div + button {
  margin-top: 8px;
}
#payment-form .icon-container {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 26px;
  margin: 0 7px;
}
#payment-form .icon-container.payment-method {
  transform: translateY(-50%) rotateY(90deg);
  transition: opacity 0.15s ease-out;
  opacity: 0;
  top: 50%;
}
#payment-form .icon-container.payment-method.show {
  opacity: 1;
  transition: all 0.4s ease-out;
  transform: translateY(-50%) rotateY(0deg);
}
#payment-form .icon-container.payment-method img {
  width: 100%;
}
#payment-form [id$="-error"] {
  display: none;
}
#payment-form .frame {
  opacity: 0;
}
#payment-form .frame--activated {
  opacity: 1;
  border: solid 1px #ccc;
  border-radius: 3px;
  /*box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2);*/
}
#payment-form .frame--activated.frame--invalid-ponctuel,
#payment-form .frame--activated.frame--invalid {
  border: solid 1px #ef233c;
  /*box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15);*/
}
#payment-form .input-container-custom.frame--focus,
#payment-form .frame--activated.frame--focus {
  /*border: solid 1px #ccc;*/
  /*box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15);*/
  box-shadow: 0 0 0.3em 0 #196bb7;
  border-color: #BAE3F5;
}
#payment-form .error-message {
  display: block;
  /*color: #c9501c;*/
  font-size: 0.9rem;
  margin: 8px 0 0 1px;
  font-weight: 300;
}
/*#payment-form #pay-button {
    border: none;
    border-radius: 3px;
    color: #fff;
    font-weight: 500;
    height: 40px;
    width: 100%;
    background-color: #13395e;
    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4);
}*/
/*#payment-form #pay-button:active {
    background-color: #0b2a49;
    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4);
}

#payment-form #pay-button:hover {
    background-color: #15406b;
    box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4);
}*/
#payment-form .field {
  color: #999;
  -webkit-text-fill-color: #999;
}
#payment-form #pay-button:disabled {
  background-color: #697887;
  /*box-shadow: none;*/
}
#payment-form #pay-button:not(:disabled) {
  cursor: pointer;
}
#payment-form .success-payment-message {
  color: #13395e;
  line-height: 1.4;
}
#payment-form .token {
  color: #b35e14;
  font-size: 0.9rem;
  font-family: monospace;
}
/**
IE11-targeted optimisations
 */
_:-ms-fullscreen,
:root .icon-container {
  display: block;
}
_:-ms-fullscreen,
:root .icon-container img {
  top: 50%;
  -ms-transform: translateY(-50%);
  position: absolute;
}
_:-ms-fullscreen,
#icon-card-number,
_:-ms-fullscreen,
#icon-expiry-date,
_:-ms-fullscreen,
#icon-cvv {
  left: 7px;
}
#checkout-frames-card-number::-ms-clear {
  display: none;
}
/*body {
    text-align: justify;
    -ms-text-justify: inter-word;
    text-justify: inter-word;
}

p{
    text-align: justify;
    -ms-text-justify: inter-word;
    text-justify: inter-word;
}*/
.visa-card {
  margin-top: 15px;
  max-width: 100px;
}
.Cartes_Visa {
  background: transparent url(../images/header_cartes-visa.png) no-repeat scroll left top;
  width: 344px;
  height: 85px;
  margin-left: 50px;
}
.Logon-logonContainer .glyphicon {
  /*color: @glyphicon-color;*/
}
.ui-datepicker {
  z-index: 1000 !important;
}
.ResponseDate {
  background-color: white !important;
}
.infoCNIL {
  background-color: #C6C6C6 !important;
  text-align: justify !important;
}
/* Hack for margin in form SavePersonIdentity*/
.row.no-gutters {
  margin-right: -15px;
  margin-left: -15px;
}
/* select 2 form identity informations fill*/
span.pidDropDownList {
  width: 100% !important;
}
span.pidDropDownList > span > span.select2-selection--single {
  height: 50px !important;
}
span.pidDropDownList > span > span > span.select2-selection__arrow {
  top: 11px !important;
}
.bordurePopup {
  border-color: #0097d8 !important;
  border: solid 1px;
  border-radius: 4px;
}
.bordurePopup .titre {
  color: #fff;
  background-color: #0097d8;
  padding-left: 10px;
  padding-top: 1px;
  padding-bottom: 1px;
}
.bordurePopup .description {
  text-align: justify;
  padding: 10px 15px;
}
#redirectionMessage {
  font-size: 15px;
  margin-top: 115px;
}
#ModalDescDocDmdTitle {
  font-size: 18px;
  padding-bottom: 3px;
  padding-top: 3px;
}
#ModalDescInfoPresentesTitle {
  font-size: 18px;
  padding-bottom: 3px;
  padding-top: 15px;
}
#ModalDescProcurDocsDemandesTitle {
  font-size: 18px;
  padding-bottom: 3px;
  padding-top: 15px;
}
#ModalDescDocDmdDesc {
  padding-left: 15px;
}
#ModalDescInfoPresentesDesc {
  padding-left: 15px;
}
#ModalDescProcurDocsDemandesDesc {
  padding-left: 15px;
}
.FirstLabel {
  color: #71787e;
}
/* =========================================================== */
/* ==================== SavePersonIdentity =================== */
/* =========================================================== */
.save-person-identity .single-checkbox label,
.save-person-identity .single-checkbox input {
  display: inline-block;
  height: 12.67px;
  vertical-align: middle;
}
.save-person-identity .single-checkbox input {
  width: 12.67px !important;
}
.save-person-identity .single-checkbox label {
  margin-left: 10px;
  margin-right: 30px;
}
.save-person-identity .infos {
  display: none;
  border: solid 1px #282828;
  border-radius: 8px;
  padding: 10px;
}
.save-person-identity .infos-header {
  width: 100%;
  border: solid 1px #0097d8;
  border-radius: 8px;
  background: #FFF;
  padding: 8px 0px;
  margin: 0;
  margin-top: 12px;
  text-align: left;
  user-select: none;
}
.save-person-identity .infos-header.expanded {
  color: #FFF;
  background: #0097d8;
}
.save-person-identity .infos-header:hover {
  cursor: pointer;
}
.save-person-identity .infos-header img {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
.save-person-identity .infos-header.expanded img {
  transform: rotateZ(90deg);
  -webkit-filter: invert(1);
  filter: invert(1);
}
.save-person-identity .infos-header input {
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  background: inherit;
}
.save-person-identity input[type="radio"] {
  margin-left: 8px;
  margin-right: 20px;
  margin-top: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
}
.save-person-identity label + input[type="radio"] {
  user-select: none;
  vertical-align: middle;
  display: inline-block;
  height: 20px;
}
.save-person-identity .radio-buttons {
  margin-top: 14px;
  margin-bottom: 6px;
}
.save-person-identity .radio-buttons label {
  text-align: center;
  margin-left: 20%;
}
.save-person-identity input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
.save-person-identity .radio-buttons.invalid label,
.save-person-identity .radio-buttons.invalid .error-message {
  color: red;
}
.save-person-identity .form-group .error-message {
  display: none;
}
.save-person-identity .form-group .error-message:not(.field-validation-error) {
  color: red;
}
.save-person-identity .form-group.invalid .error-message {
  display: block;
}
.save-person-identity .form-group.invalid input[type="text"] {
  border-color: red;
}
@media only screen and (max-width: 768px) {
  .floating-chat {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 2147483647;
    background-color: #0097d8;
    border: none;
    opacity: 0.8;
  }
  .chat-text-button {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .floating-chat {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 120px;
    height: 60px;
    border-radius: 100px;
    z-index: 2147483647;
    background-color: #0097d8;
    border: none;
    opacity: 0.8;
  }
  .chat-text-button {
    vertical-align: middle;
    margin-right: 10px;
  }
}
.icon-chat-button {
  filter: invert(1);
}
/*============= TrustArc for VISA ================*/
.truste_box_overlay_inner iframe {
  height: 100% !important;
}
#myModalSessionTimeoutWarning {
  text-align: center;
}
#myModalSessionTimeoutWarning .modal-header {
  background-color: #0097d8;
}
#myModalSessionTimeoutWarning .modal-header .modal-title {
  color: white;
}
#myModalSessionTimeoutWarning .modal-logo {
  margin: 15px 0 0 0;
}
#myModalSessionTimeoutWarning .modal-body {
  font-size: 30px;
  color: #0097d8;
}
#myModalSessionTimeoutWarning .modal-body .time-unit {
  font-size: 15px;
}
#myModalSessionTimeoutWarning .modal-footer {
  text-align: center;
  border: none;
}
#myModalSessionTimeoutWarning .modal-footer button {
  color: white;
  background-color: #0097d8;
  border-radius: 25px;
}
.category {
  border-radius: 10px;
  text-decoration: none !important;
  color: #0097D8;
  margin-left: 10px;
  font-weight: bold;
}
.category .chevron {
  margin-top: 0px;
  float: right;
}
.category:hover {
  text-decoration: none;
  color: #0097D8;
}
.category:focus {
  text-decoration: none;
  color: #0097D8;
}
.border-category {
  border-radius: 10px;
  border: 1px solid lightgray;
  padding: 5px 15px;
  margin-bottom: 10px;
}
.border-category .control-label {
  color: darkblue;
}
.border-category .sub-control-label {
  color: gray;
  font-weight: normal;
}
#liste-achats .control-label {
  color: darkblue;
}
#liste-achats .delete-button {
  margin-top: 20px;
  color: red;
}
#liste-inventaire .control-label {
  color: darkblue;
}
#liste-inventaire .delete-button {
  cursor: pointer;
  margin-top: 20px;
  color: red;
}
#file-list .delete-button {
  color: red;
}
.add-row-button {
  font-weight: bold;
  text-decoration: underline;
  font-size: 15px;
  color: #00008b;
}
#maximum-purchase-row-alert-message,
#maximum-personal-belongings-row-alert-message,
#maximum-purchase-proof-alert-message,
#no-purchase-proof-alert-message,
#file-name-already-exist-alert-message {
  color: red;
}
#button-add-file {
  text-decoration: none;
  font-size: 16px;
  border-radius: 10px;
  border: solid 0.5px;
  text-align: center;
}
.plus-button {
  color: #00008b;
  margin-right: 5px;
}
.form-body {
  margin-left: 20px !important;
}
.form-horizontal .control-label {
  text-align: left;
}
.vehicule-location-form .subContentInput {
  padding: 0;
}
.dotInformation {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #337ab7;
  font-style: oblique;
  font-family: Didot, serif;
  font-weight: bold;
  font-size: 28px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dotDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  height: 100%;
}
.row-flex {
  display: flex;
  flex-wrap: wrap;
}
.scrollbox {
  overflow-y: auto;
  max-height: calc(80vh - 300px);
}
.assureurFormAssCumulCkb {
  color: deeppink;
}
.checkboxAssCumulNM {
  position: relative;
  vertical-align: middle;
  bottom: 3px;
  margin-left: 10px;
  margin-right: 10px;
}
.labelCheckboxAssCumul {
  color: #71787e;
}
.flexRowAssureur {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
.assureurOptions {
  padding: 0px;
  margin: auto;
}
.subContent .radio-buttons label {
  text-align: center;
  margin-left: 20%;
}
.subContent .radio-buttons span {
  font-weight: 700;
  max-width: 100%;
  display: inline-block;
  margin-bottom: 5px;
  color: #1a1e5a;
}
#infoConsentMedical {
  padding-top: 10%;
}
/* MFA css */
#myModalMfaCooldown {
  text-align: center;
}
#myModalMfaCooldown .content {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 25px;
}
#myModalMfaCooldown .modal-header {
  background-color: #0097d8;
}
#myModalMfaCooldown .modal-header .modal-title {
  color: white;
}
#myModalMfaCooldown .modal-logo {
  margin: 15px 0 0 0;
}
#myModalMfaCooldown .modal-body {
  font-size: 30px;
  color: #0097d8;
}
#myModalMfaCooldown .modal-body .time-unit {
  font-size: 15px;
}
#myModalMfaCooldown .modal-footer {
  text-align: center;
  border: none;
}
#myModalMfaCooldown .modal-footer button {
  color: white;
  background-color: #0097d8;
  border-radius: 25px;
}