/* ==========================================================================
   Reverse Bank — feuille de style de base
   Contrastes vérifiés (RGAA 3.2 / 3.3) :
   - texte #1a1a1a sur #ffffff  : 17.4:1
   - lien  #0b57d0 sur #ffffff  : 6.4:1
   - texte #ffffff sur #0a3f75 (bleu marine du logo) : 10.6:1, et inversement
   - indicateur de focus #c2410c sur #fff : 5.2:1 (> 3:1 requis pour un composant)
   Le bleu clair du logo (#2297b8, 3.4:1 sur blanc) est réservé aux éléments
   décoratifs ou aux textes de grande taille (≥ 24px, ou 18,5px gras) : jamais
   pour du texte courant ni pour un lien.
   Le texte inclus dans le logo est exempté des critères 1.8 et 3.2.
   Unités relatives (rem/em) pour permettre l'agrandissement à 200 % (RGAA 10.4)
   et la modification des espacements de texte (RGAA 10.12).
   ========================================================================== */

:root {
    --color-text: #1a1a1a;
    --color-bg: #ffffff;
    --color-link: #0b57d0;
    --color-primary: #0a3f75;      /* bleu marine du logo */
    --color-accent: #2297b8;       /* bleu clair du logo : décoratif / grand texte uniquement */
    --color-on-primary: #ffffff;
    --color-focus: #c2410c;
    --color-border: #6b6b6b;
    --color-border-light: #c9d3de; /* séparateurs décoratifs uniquement */
    --color-tint: #eef5fb;         /* fond de section clair */
    --color-muted: #4d4d4d;        /* texte secondaire : 8.4:1 sur blanc, 7.8:1 sur #eef5fb */
    --color-success: #1d6f8c;      /* coches : 5.7:1 sur blanc */
    --color-credit: #146c2e;       /* montants crédités : 6.5:1 sur blanc */
    --color-debit: #1a1a1a;        /* montants débités : couleur du texte */
    --color-negative: #b3261e;     /* soldes négatifs, erreurs : 6.3:1 sur blanc */
    --color-error-bg: #fdecea;
    --color-warning-bg: #fff4e5;
    --color-warning-border: #a15c00;  /* 4.9:1 sur blanc */
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --container: 70rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%; /* respecte la taille définie par l'utilisateur */
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;
}

/* L'attribut hidden doit toujours l'emporter (sinon un display:flex le neutralise) */
[hidden] {
    display: none !important;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-link);
    text-decoration: underline; /* lien identifiable autrement que par la couleur (RGAA 10.6) */
}

/* Focus visible sur tous les éléments interactifs (RGAA 10.7) */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Cibles de prise de focus programmatique : pas de contour inutile */
main:focus,
nav:focus {
    outline: none;
}

/* Masquage accessible : lu par les lecteurs d'écran, invisible à l'écran */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Liens d'évitement (RGAA 12.7) : visibles à la prise de focus */
.skip-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.skip-links a {
    position: absolute;
    left: -9999rem;
    top: 0.5rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
}

.skip-links a:focus {
    left: 0.5rem;
}

/* En-tête : fond blanc (le logo est sur fond blanc opaque), filet marine en pied */
.site-header {
    position: relative; /* référence du panneau du menu mobile */
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 0.25rem solid var(--color-primary);
}

.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
}

.site-header a {
    color: var(--color-primary);
}

.site-logo {
    margin: 0;
}

.site-logo a {
    display: inline-block;
}

/* Hauteur en rem : le logo suit l'agrandissement des caractères (RGAA 10.4) */
.site-logo img {
    display: block;
    height: 4rem;
    width: auto;
    max-width: 100%;
}

.main-nav,
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a[aria-current="page"] {
    font-weight: 700;
    text-decoration-thickness: 0.2em;
}

/* Zone cliquable confortable (≥ 44 × 44 px) pour les liens du menu */
.main-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.5rem;
}

/* --------------------------------------------------------------------------
   Bouton burger — visible uniquement quand app.js le révèle (< 64em)
   Couleurs : #0a3f75 sur #fff = 10.6:1 (texte et bordure du composant)
   -------------------------------------------------------------------------- */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.375rem;
    background: var(--color-bg);
    color: var(--color-primary);
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.nav-toggle:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Icône : 3 traits dessinés en bordure (restent visibles en mode contraste élevé
   de Windows, contrairement à un background) */
.nav-toggle__icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.25rem;
    height: 0.875rem;
}

.nav-toggle__icon span {
    display: block;
    height: 0;
    border-top: 0.1875rem solid currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Ouvert : l'icône devient une croix (l'état est porté par aria-expanded) */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) {
    transform: translateY(0.34rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) {
    transform: translateY(-0.34rem) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Tablette et mobile : < 64em (≈ 1024px à taille de texte par défaut)
   Breakpoint en em : il suit l'agrandissement du texte (RGAA 10.4 / 10.11).
   Même valeur que BREAKPOINT dans app.js.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99em) {
    .site-header .container {
        flex-wrap: nowrap;
    }

    /* Panneau du menu, déroulé sous l'en-tête sur toute la largeur.
       Positionné dans le flux de la page (absolute, pas fixed) :
       il défile avec la page même si son contenu dépasse l'écran. */
    .site-nav.is-open .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
        background: var(--color-bg);
        border-bottom: 0.25rem solid var(--color-primary);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .site-nav.is-open .main-nav li + li {
        border-top: 1px solid var(--color-border);
    }

    .site-nav.is-open .main-nav a {
        display: flex;
        width: 100%;
        padding: 0.75rem 0.5rem;
    }
}

/* Petits mobiles : logo réduit pour laisser la place au bouton (largeur 320px) */
@media (max-width: 30em) {
    .site-logo img {
        height: 3rem;
    }
}

/* Mode contraste élevé (Windows) : le bouton garde une bordure visible */
@media (forced-colors: active) {
    .nav-toggle {
        border-color: ButtonText;
    }
}

/* Contenu principal */
main {
    display: block;
    padding-block: 2rem;
    min-height: 60vh;
}

/* ==========================================================================
   Composants communs
   ========================================================================== */
.container--narrow {
    max-width: 48rem;
}

/* Liens présentés comme des boutons (ce sont des liens : ils mènent ailleurs) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.375rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.btn--primary:hover {
    background: #072c52;            /* blanc sur #072c52 : 14.2:1 */
    border-color: #072c52;
}

.btn--secondary {
    background: var(--color-bg);
    color: var(--color-primary);
}

.btn--secondary:hover,
.btn--inverse:hover {
    text-decoration: underline;
}

.btn--inverse {
    background: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-primary);
}

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

.section {
    padding-block: 3.5rem;
}

.section--tinted {
    background: var(--color-tint);
}

.section h2,
.cta h2 {
    margin-top: 0;
    font-size: 1.75rem;
    line-height: 1.25;
    color: var(--color-primary);
}

.section__intro {
    max-width: 48rem;
    margin-top: -0.25rem;
    font-size: 1.125rem;
}

.note {
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* Fond sombre : l'indicateur de focus devient blanc pour garder un contraste ≥ 3:1 */
.figures :focus-visible,
.cta :focus-visible {
    outline-color: var(--color-on-primary);
}

/* ==========================================================================
   Page d'accueil
   ========================================================================== */
main.page-home {
    padding-block: 0;
}

/* Hero */
.hero {
    background: var(--color-tint);
    padding-block: 3rem;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}

.hero h1 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    line-height: 1.15;
    color: var(--color-primary);
}

.hero__lead {
    max-width: 36rem;
    font-size: 1.25rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.hero__media {
    text-align: center;
}

.hero__media img {
    width: 16rem;
    height: auto;
}

/* Chiffres clés */
.figures {
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding-block: 2rem;
}

.figures__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.figures__value {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.figures__label {
    display: block;
    margin-top: 0.25rem;
}

/* Cartes de services */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.card {
    padding: 1.5rem;
    border: 1px solid var(--color-border-light);
    border-radius: 0.75rem;
    background: var(--color-bg);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-tint);
    color: var(--color-primary);
}

.card__title {
    margin: 1rem 0 0.5rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

.card p {
    margin: 0;
}

/* Vidéo */
.video {
    max-width: 56rem;
    margin: 1.5rem 0 1rem;
}

.video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 0.5rem;
}

.video figcaption {
    margin-top: 0.5rem;
    color: var(--color-muted);
}

.transcript {
    max-width: 56rem;
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    background: var(--color-bg);
}

.transcript summary,
.faq__item summary {
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
}

.transcript__body {
    padding: 0 1rem 0.5rem;
}

.video__download {
    margin-top: 1rem;
}

/* Tableau comparatif */
.table-scroll {
    position: relative;   /* contient les textes masqués (.visually-hidden, en position absolue) */
    margin-top: 1.5rem;
    overflow-x: auto;
}

.offers {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.offers caption {
    margin-bottom: 0.75rem;
    text-align: left;
    font-weight: 700;
}

.offers th,
.offers td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: top;
}

.offers thead th {
    font-size: 1.125rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.offers tbody th {
    font-weight: 600;
}

.offers__price td {
    font-weight: 700;
}

.offers .is-recommended {
    background: var(--color-tint);
}

.badge {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Sécurité */
.split {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
}

.icon--xl {
    width: 6rem;
    height: 6rem;
    color: var(--color-primary);
}

.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.icon--check {
    color: var(--color-success);
    margin-top: 0.05rem;
}

/* Témoignages */
.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.testimonial {
    height: 100%;
    margin: 0;
    padding: 1.5rem;
    border-left: 0.25rem solid var(--color-primary);
    background: var(--color-tint);
    border-radius: 0 0.5rem 0.5rem 0;
}

.testimonial blockquote {
    margin: 0;
    font-size: 1.0625rem;
    font-style: italic;
}

.testimonial blockquote p {
    margin: 0;
}

.testimonial figcaption {
    margin-top: 1rem;
    font-weight: 700;
}

/* FAQ */
.faq__item {
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 0.5rem;
    background: var(--color-bg);
}

.faq__item p {
    margin: 0;
    padding: 0 1rem 1rem;
}

/* Appel à l'action */
.cta {
    padding-block: 3rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    text-align: center;
}

.cta h2 {
    color: var(--color-on-primary);
}

/* Responsive page d'accueil */
@media (max-width: 47.99em) {
    .hero__inner,
    .split {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero__media img {
        width: 12rem;
    }

    .icon--xl {
        width: 4rem;
        height: 4rem;
    }

    .section {
        padding-block: 2.5rem;
    }
}

@media (max-width: 30em) {
    .hero__actions .btn {
        width: 100%;
    }
}

/* Tableau comparatif : indication de défilement + colonne d'intitulés figée */
.table-hint {
    display: none;
    margin-bottom: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

@media (max-width: 47.99em) {
    .table-hint {
        display: block;
    }

    .offers {
        min-width: 34rem;
    }

    /* La légende reste lisible en entier sans défilement */
    .offers caption {
        position: sticky;
        left: 0;
        max-width: calc(100vw - 2rem);
    }

    .offers tbody th,
    .offers thead td {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 9rem;
        background: var(--color-bg);
        box-shadow: 1px 0 0 var(--color-border-light);
    }
}

/* Pied de page */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: 1.5rem;
    font-size: 0.875rem;
}


/* ==========================================================================
   Authentification et espace client
   ========================================================================== */
.btn--small {
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.9375rem;
}

.btn--block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

button.btn {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Liens-boutons dans l'en-tête : le style « lien » de .site-header ne doit pas s'appliquer */
.site-header .btn--primary {
    color: var(--color-on-primary);
}

.main-nav__user {
    display: flex;
    align-items: center;
}

.logout-form {
    margin: 0;
}

/* Messages flash */
.flash-container {
    padding-top: 1.5rem;
}

.flash {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 0.375rem solid var(--color-primary);
    border-radius: 0.25rem;
    background: var(--color-tint);
}

.flash p {
    margin: 0;
}

.flash--success {
    border-left-color: var(--color-credit);
}

.flash--error {
    border-left-color: var(--color-negative);
    background: var(--color-error-bg);
}

/* Page de connexion */
.auth-page {
    display: flex;
    justify-content: center;
    padding-block: 1rem 2rem;
}

.auth-card {
    width: 100%;
    max-width: 30rem;
    padding: 2rem;
    border: 1px solid var(--color-border-light);
    border-radius: 0.75rem;
    background: var(--color-bg);
    box-shadow: 0 0.25rem 1rem rgba(10, 63, 117, 0.08);
}

.auth-card h1 {
    margin-top: 0;
    font-size: 1.75rem;
    line-height: 1.25;
    color: var(--color-primary);
}

.form-intro {
    color: var(--color-muted);
}

.form-field {
    margin-bottom: 1.25rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.form-hint {
    margin: 0 0 0.375rem;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.form-field input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-border);   /* 5.3:1 : bordure de champ perceptible (RGAA 3.3) */
    border-radius: 0.375rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
}

.form-field.has-error input {
    border-color: var(--color-negative);
    border-width: 3px;
}

.field-error {
    margin: 0 0 0.375rem;
    color: var(--color-negative);
    font-weight: 600;
}

.password-field {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.password-field input {
    flex: 1 1 12rem;
}

.password-toggle {
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.375rem;
    background: var(--color-bg);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.password-toggle[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Récapitulatif des erreurs */
.error-summary {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 3px solid var(--color-negative);
    border-radius: 0.5rem;
    background: var(--color-error-bg);
}

.error-summary:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.error-summary h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--color-negative);
}

.error-summary p,
.error-summary ul {
    margin: 0.25rem 0 0;
}

.error-summary a {
    color: var(--color-negative);
    font-weight: 600;
}

.auth-notes {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
    font-size: 0.9375rem;
}

/* Espace client */
.customer-area h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    color: var(--color-primary);
}

.customer-area h2 {
    font-size: 1.375rem;
    color: var(--color-primary);
}

.lead {
    margin-top: 0;
    font-size: 1.125rem;
}

.section-block {
    margin-top: 2.5rem;
}

.summary {
    display: inline-block;
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.summary__label {
    margin: 0;
}

.summary__amount {
    margin: 0.25rem 0 0;
    font-size: 2rem;
    font-weight: 800;
}

.account-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-card {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border-light);
    border-left: 0.375rem solid var(--color-primary);
    border-radius: 0.5rem;
    background: var(--color-bg);
}

.account-card__title {
    margin: 0;
    font-size: 1.25rem;
}

.account-card__title a {
    color: var(--color-primary);
}

.account-card__meta {
    margin: 0.25rem 0 0.75rem;
    color: var(--color-muted);
}

.account-card__figures,
.figures-grid {
    margin: 0;
}

.account-card__figures div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.25rem;
}

.account-card__figures dt {
    color: var(--color-muted);
}

.account-card__figures dd {
    margin: 0;
    font-weight: 700;
}

.badge-status {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.125rem 0.625rem;
    border: 2px solid currentColor;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
}

.badge-status--blocked {
    color: var(--color-warning-border);
}

.badge-status--closed {
    color: var(--color-muted);
}

.amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amount--credit {
    color: var(--color-credit);
}

.is-negative {
    color: var(--color-negative);
}

.summary .is-negative,
.summary__amount.is-negative {
    color: var(--color-on-primary);   /* sur fond marine, le signe « − » porte l'information */
}

.figures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.figure-box {
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--color-tint);
}

.figure-box dt {
    color: var(--color-muted);
}

.figure-box dd {
    margin: 0.25rem 0 0;
}

.amount--large {
    font-size: 1.5rem;
    font-weight: 800;
}

.details-list {
    margin: 0;
}

.details-list div {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 1rem;
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--color-border-light);
}

.details-list dt {
    font-weight: 600;
}

.details-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.mono {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

/* Tableaux de données */
.data-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
}

.data-table caption {
    margin-bottom: 0.75rem;
    text-align: left;
    font-weight: 700;
}

.data-table th,
.data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.data-table .num {
    text-align: right;
    white-space: nowrap;
}

.op-label {
    display: block;
    font-weight: 600;
}

.op-nature,
.op-comment {
    display: block;
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* Fil d'Ariane */
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--color-muted);
}

.breadcrumb [aria-current="page"] {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}

/* Encadrés */
.notice {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-left: 0.375rem solid var(--color-primary);
    border-radius: 0.25rem;
    background: var(--color-tint);
}

.notice p {
    margin: 0;
}

.notice--warning {
    border-left-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

/* Pagination */
.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

.pagination a[aria-current="page"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    text-decoration: none;
}

.pagination__gap {
    align-self: center;
}

/* Fenêtre d'expiration de session */
.session-dialog {
    max-width: min(32rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 3px solid var(--color-primary);
    border-radius: 0.75rem;
    color: var(--color-text);
    background: var(--color-bg);
}

.session-dialog::backdrop {
    background: rgba(13, 27, 42, 0.6);
}

.session-dialog h2 {
    margin-top: 0;
    font-size: 1.375rem;
    color: var(--color-primary);
}

.session-dialog__error {
    color: var(--color-negative);
}

.session-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.session-dialog__actions form {
    margin: 0;
}

@media (max-width: 63.99em) {
    .site-nav.is-open .main-nav__user {
        padding-block: 0.75rem;
    }
}

@media (max-width: 47.99em) {
    /* La légende reste lisible pendant le défilement horizontal du tableau */
    .data-table caption {
        position: sticky;
        left: 0;
        max-width: calc(100vw - 2rem);
    }

    .auth-card {
        padding: 1.25rem;
        border: 0;
        box-shadow: none;
    }

    .details-list div {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .summary {
        display: block;
    }

    .customer-area h1 {
        font-size: 1.75rem;
    }
}


/* ==========================================================================
   Démarches du compte, formulaire de contact
   ========================================================================== */
.action-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.action-link {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    height: 100%;
    min-height: 2.75rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.5rem;
    background: var(--color-bg);
    text-decoration: none;
}

.action-link__title {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

.action-link__meta {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.action-link:hover {
    background: var(--color-tint);
}

.action-link:hover .action-link__title {
    text-decoration-thickness: 0.15em;
}

.form-layout {
    max-width: 44rem;
    margin-top: 1.5rem;
}

.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: 0.375rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
}

.form-field textarea {
    resize: vertical;
    line-height: 1.5;
}

.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--color-negative);
    border-width: 3px;
}

.form-fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.form-fieldset legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 700;
}

.radio {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.radio input {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.125rem 0 0;
    accent-color: var(--color-primary);
}

.form-field .radio label {
    display: inline;
    font-weight: 400;
}

.char-counter {
    margin: 0.375rem 0 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.char-counter.is-over {
    color: var(--color-negative);
    font-weight: 700;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.confirmation {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    border-left: 0.375rem solid var(--color-credit);
    border-radius: 0.25rem;
    background: var(--color-tint);
}

.confirmation h1 {
    margin-top: 0;
}

.confirmation__reference {
    font-size: 1.125rem;
}

.message-text {
    white-space: normal;
}

.link-list {
    padding-left: 1.25rem;
}

.link-list li {
    margin-bottom: 0.5rem;
}


/* ==========================================================================
   Bénéficiaires et virements
   ========================================================================== */
.btn--danger {
    background: var(--color-negative);
    border-color: var(--color-negative);
    color: var(--color-on-primary);   /* blanc sur #b3261e : 6.5:1 */
}

.btn--danger:hover {
    background: #8c1d17;
    border-color: #8c1d17;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.h1-sub {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.beneficiary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.beneficiary-card {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border-light);
    border-left: 0.375rem solid var(--color-primary);
    border-radius: 0.5rem;
}

.beneficiary-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    color: var(--color-primary);
    overflow-wrap: anywhere;
}

.beneficiary-card__details {
    margin: 0;
}

.beneficiary-card__details div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

.beneficiary-card__details dt {
    font-weight: 600;
}

.beneficiary-card__details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.beneficiary-card__tag {
    margin: 0.5rem 0 0;
    color: var(--color-credit);
    font-size: 0.875rem;
    font-weight: 600;
}

.beneficiary-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.beneficiary-card__actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.security-box {
    padding: 1rem 1.25rem 0.25rem;
    border: 2px solid var(--color-primary);
    border-radius: 0.5rem;
    background: var(--color-tint);
}

.security-box legend {
    padding: 0 0.5rem;
    color: var(--color-primary);
}

.input-suffix {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 16rem;
}

.input-suffix span {
    font-weight: 700;
}

.figures-grid--compact {
    margin: 1.5rem 0;
}

.figures-grid--compact dd {
    overflow-wrap: anywhere;
}

/* Étapes du parcours */
.steps ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-muted);
}

.steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-weight: 700;
}

.steps__item.is-current {
    color: var(--color-primary);
    font-weight: 700;
}

.steps__item.is-current .steps__number {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.steps__item.is-current .steps__label {
    text-decoration: underline;
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.25em;
}

.steps__item.is-done {
    color: var(--color-credit);
}

.review-amount {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--color-tint);
    font-size: 1.25rem;
}

.review-amount p {
    margin: 0;
}

/* Respect de la préférence de réduction des animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}