/* app.css — styles applicatifs DEMATRUST Light / ICD International */
/* Importe les tokens ; ce fichier ne définit que des composants UI  */

@import "tokens.css";

/* ------------------------------------------------------------------ */
/* Reset minimal                                                       */
/* ------------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

a:hover,
a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header compact DS (T-HEADER-001) :
 * fond blanc translucide + backdrop-blur, sticky top:0,
 * bordure inférieure subtile. 3 zones sur une rangée :
 * logo | identité offre | stepper intégré.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-1);
    padding: var(--space-2) var(--space-6);
}

.site-header__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-header__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-header__logo-img {
    display: block;
    height: 36px;
    width: auto;
}

/* Zone identité offre : DEMATRUST / Light / SOUSCRIPTION */
.site-header__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
}

.site-header__product-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.site-header__product-variant {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--icd-blue-700);
    line-height: 1.1;
}

.site-header__product-type {
    font-size: 9px;
    font-weight: var(--font-weight-medium);
    color: var(--fg-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

/* Stepper intégré dans le header — overrides pour compacité */
.site-header .stepper {
    margin-bottom: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.site-header .stepper__badge {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.site-header .stepper__item::before {
    top: 12px;
}

.site-header .stepper__label {
    font-size: 10px;
    max-width: 60px;
}

/* T-OFFRES-049 (CA-1, CA-4) — lien « Déjà client ? », sibling de .stepper dans header.php (Zone 3),
   hors du conteneur overflow-x:auto du stepper (.stepper, app.css:311) : ne peut donc jamais être
   poussé hors champ quand la piste d'étapes déborde. flex-shrink:0 le protège symétriquement du
   rétrécissement imposé par la règle .site-header .stepper juste au-dessus (flex:1, min-width:0). */
.login-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: inherit;
    text-decoration: none;
}

.login-hint__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.login-hint__label {
    color: var(--icd-blue-700);
    font-weight: var(--font-weight-bold);
}

.login-hint:hover .login-hint__label {
    text-decoration: underline;
}

/* Avatar + dropdown compte (T-UX-043a) — transposition du design code project/ressources/compte/profil.md */
.site-header__account {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.site-header__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid var(--icd-blue-200);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #0F50D2 0%, #2B4BEE 100%);
    color: #fff;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: pointer;
    text-transform: uppercase;
}

.site-header__avatar:focus-visible {
    outline: 2px solid var(--icd-blue-600);
    outline-offset: 2px;
}

.site-header__dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 60;
    width: 220px;
    padding: var(--space-2);
    background: #fff;
    border: 1px solid var(--border-1);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(10, 31, 79, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-header__dropdown[hidden] {
    display: none;
}

.site-header__dropdown-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-1);
    margin-bottom: var(--space-1);
}

.site-header__dropdown-name {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
}

.site-header__dropdown-email {
    font-size: 12px;
    color: var(--fg-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__dropdown-form {
    margin: 0;
}

.site-header__dropdown-item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    color: var(--fg-1);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.site-header__dropdown-item:hover {
    background: var(--icd-blue-50, #EEF3FE);
}

.site-header__dropdown-item--danger {
    color: #DC2626;
}

/* Responsive CA-6 : < 768px — labels masqués, badges seuls visibles */
@media (max-width: 767px) {
    .site-header__product-type { display: none; }
    .site-header .stepper__label { display: none; }
}

.site-main {
    flex: 1;
    padding: var(--space-8) var(--space-4);
}

.site-main__inner {
    max-width: 960px;
    margin: 0 auto;
}

/* T-OFFRES-024 (CA-5) : élargissement scopé à la seule page /offres (1180px), posé par
   OffresController::renderLayout() via `$mainInnerClass` (src/front/vue/layout.php) — la règle
   de base .site-main__inner ci-dessus (960px, partagée par tout le tunnel) n'est jamais modifiée. */
.site-main__inner--offres {
    max-width: 1180px;
}

.site-footer {
    background-color: var(--color-navy);
    color: rgba(255, 255, 255, 0.6);
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-sm);
    text-align: center;
}

.site-footer__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.7);
}

.site-footer a:hover {
    color: var(--color-text-light);
}

/* ------------------------------------------------------------------ */
/* Stepper — refonte DS ICD (T-UX-004, lot L11)                        */
/*                                                                     */
/* Arbitrage Q3 (plan sprint 04-bis, tranché 2026-06-13 → option A) :  */
/*   stepper SANS surface dédiée — conserve le fond --bg-1 hérité de   */
/*   la page, pas de bande --bg-2 séparatrice sous le header sticky.   */
/*                                                                     */
/* Cohérence visuelle :                                                */
/*   - done    : badge + connecteur + label en --icd-success           */
/*   - active  : badge + connecteur + label en --icd-blue-700          */
/*   - à venir : badge fond --bg-1, bordure --border-1, label --fg-3   */
/*                                                                     */
/* HTML inchangé (cf. src/front/vue/partials/stepper.php) — seules les */
/* valeurs CSS évoluent : aucun changement de hauteur/largeur/position.*/
/* ------------------------------------------------------------------ */
.stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-8);
    padding: var(--space-4) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stepper__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 0;
}

/* Connecteur horizontal entre les items (état "à venir" par défaut) */
.stepper__item::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 50%;
    left: -50%;
    height: 2px;
    background-color: var(--border-1);
    z-index: 0;
}

.stepper__item:first-child::before {
    display: none;
}

/* Connecteur coloré pour les étapes terminées (vert succès DS) */
.stepper__item--done::before {
    background-color: var(--icd-success);
}

/* Connecteur coloré pour l'étape active (bleu primaire DS) */
.stepper__item--active::before {
    background-color: var(--icd-blue-700);
}

/* CA-3 — badge état "à venir" : fond --bg-3 (gris chip visible), bordure --border-1, texte --fg-3 */
.stepper__badge {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 2px solid var(--border-1);
    background-color: var(--bg-3);
    color: var(--fg-3);
    transition:
        background-color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
    flex-shrink: 0;
}

/* CA-2 — badge étape done : fond + bordure --icd-success, texte blanc */
.stepper__item--done .stepper__badge {
    background-color: var(--icd-success);
    border-color: var(--icd-success);
    color: var(--icd-neutral-0);
}

/* Icone de validation pour étapes terminées (la couleur est portée par le badge) */
.stepper__item--done .stepper__badge::after {
    content: "✓";
    font-size: 14px;
    line-height: 1;
}

.stepper__item--done .stepper__badge-number {
    /* Le numéro est masqué visuellement mais reste accessible */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* CA-1 — badge étape active : fond + bordure --icd-blue-700, texte blanc */
.stepper__item--active .stepper__badge {
    background-color: var(--icd-blue-700);
    border-color: var(--icd-blue-700);
    color: var(--icd-neutral-0);
}

.stepper__label {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    text-align: center;
    color: var(--fg-3);
    line-height: 1.3;
    max-width: 80px;
    word-break: break-word;
    hyphens: auto;
}

.stepper__item--active .stepper__label {
    color: var(--icd-blue-700);
    font-weight: var(--font-weight-semibold);
}

.stepper__item--done .stepper__label {
    color: var(--icd-success);
}

/* Accessibilité (§11) : le statut est porté par aria + texte, pas seulement la couleur */
.stepper__status {
    /* Masqué visuellement, lu par les lecteurs d'écran */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Carte de contenu — DS ICD (T-UX-002, CA-3)                          */
/* radius 24px + ombre bleutée douce (resting --shadow-sm,             */
/* hover --shadow-md + translateY -2px). Aucune rgba(0,0,0,...).       */
/* ------------------------------------------------------------------ */
.card {
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Cartes empilées en frères directs (T-BUG-060) — sélecteur adjacent      */
/* volontaire : ne modifie aucun écran existant à une seule .card.        */
.card + .card {
    margin-top: var(--space-6);
}

/* T-BUG-064 : la règle .card + .card ci-dessus a été conçue et vérifiée pour /entreprise (2 .card
   empilées verticalement) — hypothèse "aucun impact sur les écrans à une seule carte" ne couvrant
   pas le cas d'une GRILLE (.offres-grid, display: grid) où plusieurs .card sont frères directs :
   chaque carte catalogue sauf la 1ʳᵉ hérite alors de margin-top: 24px, décalant son bord supérieur
   et sa hauteur par rapport aux autres. Neutralise .card + .card exclusivement pour les cartes de
   .offres-grid, sans jamais modifier la règle .card + .card elle-même (CA-2, /entreprise
   inchangé). Spécificité (3 classes) délibérément supérieure à .card + .card (2 classes) pour
   primer sans dépendre de l'ordre des règles dans le fichier. Ne cible jamais #surMesureCard :
   cet élément n'est pas un descendant de .offres-grid (frère direct de #offresResult, jamais
   déplacé en JS) et n'est de toute façon pas affecté par .card + .card — son margin-top:
   var(--space-8) (.offre-card--sur-mesure) reste l'espacement intentionnel avec la grille
   au-dessus (T-OFFRES-033), hors périmètre de ce correctif. */
.offres-grid .card.offre-card {
    margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Boutons — alignés DS ICD (T-UX-002, arbitrages L11.d & Q1)          */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 22px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}

/* CA-1 — primary : gradient brand direct (valeurs en dur, pas via CSS var pour éviter IACVT) + shadow-brand-glow */
.btn--primary {
    background: #0F50D2;
    background: linear-gradient(135deg, #0F50D2 0%, #2B4BEE 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: var(--shadow-brand-glow);
}

.btn--primary:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(43, 75, 238, 0.36);
}

.btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-brand-glow);
}

/* CA-2 — secondary : fond blanc opaque + bordure --border-1 + texte --icd-blue-700 (arbitrage Q1 tranchée 2026-06-13 → option A) */
.btn--secondary {
    background: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    color: var(--icd-blue-700);
}

.btn--secondary:hover {
    background: var(--icd-blue-50);
    border-color: var(--icd-blue-200);
    color: var(--icd-blue-700);
    text-decoration: none;
}

.btn--secondary:active {
    background: var(--icd-blue-100);
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                         */
/* ------------------------------------------------------------------ */
.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-2);
    margin-bottom: var(--space-1);
}

/* T-BACK-059 — .form-input (jamais utilisée par les templates) retirée de cette
 * règle (T-BACK-055 §4.1) ; seule .form-control reste consommée.
 */
.form-control {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--fg-1);
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.form-control:focus {
    border-color: var(--icd-blue-600);
    box-shadow: 0 0 0 3px rgba(43, 75, 238, 0.15);
}

/* Variante textarea (utilisée par sur-mesure/index.php) */
.form-input--textarea {
    min-height: 120px;
    resize: vertical;
}

.form-error {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--icd-danger);
}

.form-hint {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--fg-3);
}

/* ------------------------------------------------------------------ */
/* Navigation wizard — T-UX-018                                        */
/* Wrapper flex pour les boutons retour (gauche) / avancer (droite).  */
/* Remplace les styles inline justify-content sur .form-actions.       */
/* ------------------------------------------------------------------ */
.wizard-nav {
    display: flex;
    justify-content: flex-end; /* T-UNIF-012 : nouveau défaut — ancré à droite */
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* T-UNIF-012 : réservé au couple retour/avancer, préserve la répartition aux
   deux extrémités opposées sur les 3 usages existants. */
.wizard-nav--split {
    justify-content: space-between;
}

@media (max-width: 767px) {
    .wizard-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .wizard-nav .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Alertes                                                             */
/* ------------------------------------------------------------------ */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.alert--success {
    background-color: var(--icd-success-bg);
    border-color: var(--icd-success);
    color: #15803D;
}

.alert--warning {
    background-color: var(--icd-warning-bg);
    border-color: var(--icd-warning);
    color: #A16207;
}

.alert--danger {
    background-color: var(--icd-danger-bg);
    border-color: var(--icd-danger);
    color: #B91C1C;
}

/* ------------------------------------------------------------------ */
/* Page titres                                                         */
/* ------------------------------------------------------------------ */
.page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    margin-bottom: var(--space-2);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

/* ------------------------------------------------------------------ */
/* Hero — titre/sous-titre + illustration décorative (T-OFFRES-024)    */
/* Reprend à l'identique .hero/.hero__visual/.doc/.hero__badge-check/  */
/* .hero__ring du prototype (demo-offres-evolution.html:41-56/211-216).*/
/* Scopé au sein de .hero (jamais une modification de la règle de base */
/* .page-subtitle, partagée par ~20 autres gabarits front/admin).      */
/* ------------------------------------------------------------------ */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
    align-items: center;
    margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
    }
}

.hero .page-subtitle {
    margin-bottom: 0;
    max-width: 52ch;
}

.hero__visual {
    position: relative;
    height: 220px;
}

@media (max-width: 900px) {
    .hero__visual {
        height: 180px;
        margin-top: var(--space-4);
    }
}

.doc {
    position: absolute;
    width: 150px;
    height: 190px;
    background: var(--bg-1);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
}

.doc--back {
    left: 8%;
    top: 6%;
    transform: rotate(-7deg);
    background: var(--icd-blue-50);
}

.doc--front {
    left: 26%;
    top: 18%;
    transform: rotate(5deg);
}

.doc__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--icd-blue-100);
    margin-bottom: var(--space-2);
}

.doc--front .doc__bar {
    background: #E3EBFB;
}

.doc__bar:nth-child(1) {
    width: 60%;
    height: 9px;
    background: var(--icd-blue-700);
}

.doc__bar:nth-child(4) {
    width: 40%;
}

.hero__badge-check {
    position: absolute;
    right: 6%;
    top: 8%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--icd-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.hero__badge-check svg {
    width: 26px;
    height: 26px;
}

.hero__ring {
    position: absolute;
    left: 2%;
    bottom: 2%;
    width: 80px;
    height: 80px;
    border: 2px solid var(--icd-blue-200);
    border-radius: 50%;
}

/* ------------------------------------------------------------------ */
/* Réassurance — 4 tuiles additives sous le hero (T-OFFRES-024)        */
/* N'affecte jamais .trust-badges (panneau existant, bas de page).     */
/* ------------------------------------------------------------------ */
.reassurance {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
    .reassurance {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .reassurance {
        grid-template-columns: 1fr;
    }
}

.reassurance__item {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.reassurance__num {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--icd-blue-700);
}

.reassurance__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.cert-logos {
    display: flex;
    gap: 10px;
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.cert-logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    color: var(--fg-1);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
}

.cert-logo svg {
    width: 13px;
    height: 19px;
    flex-shrink: 0;
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Grille des offres                                                   */
/* ------------------------------------------------------------------ */
/* T-OFFRES-026 (CA-4) : largeur fixée à 4 colonnes (au lieu d'un nombre variable selon la
   largeur disponible), avec points de rupture explicites du prototype (2 colonnes sous 900px,
   1 colonne sous 640px, cf. demo-offres-evolution.html:124-126). */
.offres-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

@media (max-width: 900px) {
    .offres-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .offres-grid {
        grid-template-columns: 1fr;
    }
}

/* Bannière règle de dépassement intégrée au résultat du calculateur (T-OFFRES-028, CDC §5-É1/§6) —
   texte simple sans icône, remplace l'ancien composant .banniere-depassement (icône + carte
   bordée), fidèle au prototype (demo-offres-evolution.html:139-141). */
.overage-note {
    margin-top: var(--space-5);
    background: var(--icd-neutral-50, #F8FAFC);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.overage-note strong {
    display: block;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
    color: var(--fg-1);
}

.overage-note p {
    font-size: var(--font-size-xs);
    color: var(--fg-3);
    line-height: 1.55;
    margin: 0;
}

.offre-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Tuile "Sur mesure" — pleine largeur, gradient ICD foncé, colonne unique alignée à gauche
   (T-OFFRES-003, correctif de fidélité prototype T-OFFRES-027 CA-1/CA-2 : `--icd-gradient-dark`
   remplace `--icd-gradient-primary` — mauvais jeton de couleur — et la disposition 2 colonnes est
   remplacée par un empilement vertical label/titre/description/bouton, cf.
   demo-offres-evolution.html:142). `margin-top: var(--space-8)` restauré par T-OFFRES-033 (marge
   manquante avec le bloc `.overage-note` au-dessus, écart introduit par T-OFFRES-027 qui ne
   portait pas sur le rythme vertical). */
.offre-card--sur-mesure {
    grid-column: 1 / -1;
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--icd-gradient-dark);
    border: none;
    padding: var(--space-8) var(--space-10);
    color: #ffffff;
    box-shadow: var(--shadow-lg);
}

.offre-card--sur-mesure:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

/* Reprise de main explicite sur [hidden] (T-OFFRES-017, défaut QA CA-1) : le
   `display: flex` d'auteur ci-dessus (T-OFFRES-027 CA-2, ex `display: grid`) l'emporte sinon sur
   le `display: none` UA implicite associé à l'attribut hidden posé sur #surMesureCard
   (src/front/vue/offres/index.php), la spécificité classe+attribut assure
   que cette règle gagne quel que soit l'ordre des sources. */
.offre-card--sur-mesure[hidden] {
    display: none;
}

.offre-sur-mesure__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.offre-sur-mesure__titre {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.offre-sur-mesure__description {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

.offre-sur-mesure__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: flex-start;
}

.offre-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.offre-card__titre {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy);
}

.offre-card__prix {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.offre-card__montant {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.offre-card__unite {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.offre-card__volume {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Carte sélectionnée : liseré bleu ICD (T-OFFRES-001) */
.offre-card--selected {
    border: 2px solid var(--icd-blue-700);
    box-shadow: 0 0 0 3px rgba(15, 80, 210, 0.12), var(--shadow-sm);
}

/* T-UNIF-001 — Option de paiement sélectionnée, même motif que .offre-card--selected */
.payment-method--selected {
    background: var(--icd-blue-50);
    border-color: var(--icd-blue-700);
}

/* Bouton blanc sur fond bleu (T-OFFRES-003) */
.btn--white {
    background: #ffffff;
    color: var(--icd-blue-700);
    border: none;
}

.btn--white:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--icd-blue-700);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn--white:active {
    transform: translateY(0);
}

/* Boutons dans les cartes offres : pleine largeur (T-OFFRES-001) */
.offre-card .btn {
    width: 100%;
}

/* CTA "Continuer avec ce pack" — bas de page, aligné à droite (T-OFFRES-005) */
.offres-cta-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-6);
}

.offres-cta-bar__btn {
    min-width: 240px;
}

/* ------------------------------------------------------------------ */
/* Calculateur d'orientation (T-OFFRES-017) — jetons/composants        */
/* réutilisés tels quels, aucun nouveau jeton (notice d'intégration    */
/* § Jetons/Composants).                                               */
/* ------------------------------------------------------------------ */
.calc-card {
    margin-bottom: var(--space-8);
}

.calc-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.calc-card__head p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

/* T-OFFRES-048 (CA-1) : regroupe la bascule Mensuel/Annuel et le bouton "Nouvelle simulation"
   à droite de l'en-tête, cf. demo-offres-evolution.html:88 (jetons du prototype déjà tous
   présents dans ce projet — aucun nouveau jeton). */
.calc-card__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* T-OFFRES-048 (CA-1) : bascule d'affichage Mensuel/Annuel — pilule à deux positions, même
   patron que .btn-reset ci-dessous (fond neutre clair, coins arrondis complets), cf.
   demo-offres-evolution.html:89-91. */
.periodicity-switch {
    display: inline-flex;
    background: var(--icd-neutral-100, #F1F5F9);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 2px;
}

.periodicity-switch__btn {
    border: none;
    background: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.periodicity-switch__btn--active {
    background: var(--icd-neutral-0, #ffffff);
    color: var(--icd-blue-700);
    box-shadow: var(--shadow-sm);
}

/* Bouton "Nouvelle simulation" (T-OFFRES-024 CA-4) — même patron que .badge/.trust-chip
   (pastille pleine, coins arrondis complets). */
.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--icd-blue-50);
    color: var(--icd-blue-700);
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    white-space: nowrap;
    border: none;
}

.btn-reset:hover {
    background: var(--icd-blue-100);
}

.calc-step {
    margin-bottom: var(--space-8);
}

.calc-step:last-child {
    margin-bottom: 0;
}

.calc-step__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: calc(var(--space-2) * -1) 0 var(--space-4);
}

.besoin-grid,
.volume-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.volume-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .besoin-grid,
    .volume-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .besoin-grid,
    .volume-grid {
        grid-template-columns: 1fr;
    }
}

/* .besoin-option / .volume-option — reprend le motif visuel de .offre-card--selected
 * (bordure + fond --icd-blue-50 + ombre), cf. notice d'intégration § Composants. */
.besoin-option,
.volume-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
    background-color: var(--icd-neutral-0);
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition:
        border-color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.besoin-option__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--icd-blue-50);
    color: var(--icd-blue-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.besoin-option__icon svg {
    width: 20px;
    height: 20px;
}

.besoin-option--selected .besoin-option__icon {
    background: var(--icd-blue-700);
    color: #ffffff;
}

.besoin-option:hover,
.volume-option:hover {
    border-color: var(--icd-blue-300);
}

.besoin-option--selected,
.volume-option--selected {
    border-color: var(--icd-blue-700);
    background: var(--icd-blue-50);
    box-shadow: 0 0 0 3px rgba(15, 80, 210, 0.12);
}

.besoin-option__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.besoin-option__desc,
.volume-option__range {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.volume-option__tier {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* .recommandation-bandeau — même famille visuelle que .alert/.trust-badge (fond
 * --icd-blue-50, bordure --icd-blue-200), cf. notice d'intégration § Composants. */
.recommandation-bandeau {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    background: var(--icd-blue-50);
    border: 1px solid var(--icd-blue-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.recommandation-bandeau__badge {
    background: var(--icd-blue-700);
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.recommandation-bandeau p {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.recommandation-bandeau strong {
    color: var(--icd-blue-800);
}

/* .promo-bandeau — bandeau promotionnel permanent sous l'étape 1 du calculateur (T-OFFRES-023,
 * CA-1 à CA-3) : visible dès l'arrivée sur /offres, indépendamment de tout choix de besoin.
 * Fond --icd-gradient-dark — même jeton que .offre-card--sur-mesure (T-OFFRES-027 CA-1),
 * cohérent avec la référence de rendu (capture 02-besoin-seul-aucune-reponse.png). */
.promo-bandeau {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--icd-gradient-dark);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-5);
}

.promo-bandeau__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

.promo-bandeau__icon svg {
    width: 100%;
    height: 100%;
}

.promo-bandeau__text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin: 0;
}

.promo-bandeau__code {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    padding: 1px 8px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
}

/* .offre-card__badge-recommande — ruban positionné comme la surcouche .offre-card--selected
 * (surcouche, pas de remplacement), cf. notice d'intégration § Composants. */
.offre-card__badge-recommande {
    position: absolute;
    top: -11px;
    left: var(--space-5);
    background: var(--icd-blue-700);
    color: #ffffff;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

#calcCard .offres-grid .offre-card {
    position: relative;
}

/* T-OFFRES-031 (CA-1) : triptyque prix remisé sur carte catalogue Duo — étend .offre-card__prix
 * existant (T-OFFRES-017) sans le remplacer, mêmes tokens typographiques que le reste de la carte
 * (cf. notice d'intégration § Composants, .offre-card__reduction). Valeurs de font-size non issues
 * de l'échelle --font-size-* : mêmes valeurs que .offre-card__badge-recommande ci-dessus, reprises
 * telles quelles du prototype (aucun nouveau jeton introduit). */
.offre-card__prix-catalogue {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.offre-card__economie {
    align-self: flex-start;
    background: var(--icd-blue-50);
    color: var(--icd-blue-800);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.offre-card__promo-label {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* T-OFFRES-048 (CA-5) : mention de rappel du montant annuel contractuel — cartes de la grille
   uniquement, visible en vue mensuelle seulement (posée/retirée par le script client, jamais par
   CSS). Même patron typographique que .offre-card__promo-label ci-dessus (aucun nouveau jeton),
   cf. demo-offres-evolution.html:141. */
.offre-card__prix-note {
    font-size: 11px;
    color: var(--color-text-muted);
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Encart "Ce que comprend DEMATRUST Light" — T-OFFRES-004             */
/* ------------------------------------------------------------------ */
.perimetre-card {
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-10);
}

.perimetre-card__header {
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.perimetre-card__titre {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    margin-bottom: var(--space-2);
}

.perimetre-card__sous-titre {
    font-size: var(--font-size-sm);
    color: var(--fg-3);
    margin: 0;
}

.perimetre-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.perimetre-col__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}

.perimetre-col--inclus .perimetre-col__header {
    color: var(--icd-success);
}

.perimetre-col--hors .perimetre-col__header {
    color: var(--icd-danger);
}

.perimetre-col__liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.perimetre-col__liste li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--fg-2);
}

.perimetre-col__check {
    color: var(--icd-success);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    line-height: 1.5;
}

.perimetre-col__cross {
    color: var(--icd-danger);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .perimetre-card__grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* Bannière dépassement — T-OFFRES-005                                 */
/* ------------------------------------------------------------------ */
/* Bannière dépassement — T-OFFRES-005 */
.banniere-depassement {
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.banniere-depassement__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--icd-gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.banniere-depassement__titre {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-1);
    margin: 0 0 var(--space-1) 0;
}

.banniere-depassement__texte {
    font-size: var(--font-size-sm);
    color: var(--fg-2);
    margin: 0;
    line-height: 1.6;
}

/* T-UNIF-001 — Bandeau hero plein-largeur en dégradé foncé (écran /activation) */
.activation-banner {
    background: var(--icd-gradient-dark);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.activation-banner__badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius-pill, 9999px);
    color: #ffffff;
    padding: 2px var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Trust badges                                                        */
/* ------------------------------------------------------------------ */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

/* CA-5 — Trust badges bleutés (DS ICD) :
 * bordure --icd-blue-200 + texte --icd-blue-700 + ombre --shadow-xs.
 */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--icd-blue-200);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--icd-blue-700);
    box-shadow: var(--shadow-xs);
}

.trust-badge__icon {
    color: var(--icd-success);
    font-weight: var(--font-weight-bold);
}

/* ------------------------------------------------------------------ */
/* Focus visible (T-UX-002, CA-S1 — CDC §11 a11y)                      */
/* outline 2px var(--icd-blue-600) + offset 2px, statut non porté      */
/* uniquement par la couleur, contraste AA.                            */
/* ------------------------------------------------------------------ */
.btn:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid var(--icd-blue-600);
    outline-offset: 2px;
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Récap commande — T-COMMANDE-001                                     */
/* (suppression des règles .bdc-header/.bdc-section/.bdc-table/        */
/*  .bdc-duree/.bdc-accept/.bdc-check — remplacées par .recap-*)       */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Pictogrammes-tuiles ICD (T-UX-005, lot L11.e)                       */
/*                                                                     */
/* Tuile 56×56 avec gradient brand + radius lg (16px). Le glyphe est   */
/* un SVG inline 24×24, blanc, stroke-style Lucide centré dans la      */
/* tuile via flex. Utilisé dans :                                      */
/*   - `/offres`   : 3 cartes pack standard (Essentiel/Confort/Perf)   */
/*   - `/commande` : 4 sections récap (Proposition, Offre, Périmètre,  */
/*                   Facturation)                                      */
/*                                                                     */
/* Arbitrage Q2 (plan sprint 04-bis, tranché 2026-06-13 → option A) :  */
/*   SVG inline — pas de CDN externe, conformité RGPD.                 */
/*                                                                     */
/* L'attribut aria-hidden="true" est posé sur chaque SVG : les pictos  */
/* sont décoratifs, l'info est portée par le titre adjacent (§11 a11y).*/
/* ------------------------------------------------------------------ */
.bdc-picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--icd-gradient-primary);
    color: var(--icd-neutral-0);
    flex-shrink: 0;
}

.bdc-picto svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Bloc périmètre SIRET — T-PERIMETRE-001                              */
/* ------------------------------------------------------------------ */
.perimetre-bloc {
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--space-8);
}

.perimetre-bloc__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-5);
}

.perimetre-bloc__heading {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.perimetre-bloc__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--icd-gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.perimetre-bloc__titre {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    margin: 0 0 var(--space-1) 0;
}

.perimetre-bloc__sous-titre {
    font-size: var(--font-size-sm);
    color: var(--fg-3);
    margin: 0;
}

.perimetre-bloc__add-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Tableau interne */
.perimetre-table-wrapper {
    border-top: 1px solid var(--icd-neutral-200);
    overflow-x: auto;
}

.perimetre-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.perimetre-table thead th {
    background-color: var(--icd-neutral-50, #F8FAFC);
    color: var(--fg-3);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--icd-neutral-200);
}

.perimetre-table tbody td {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--icd-neutral-100, #F1F5F9);
    vertical-align: middle;
    color: var(--fg-2);
}

.perimetre-table__row--principal td {
    color: var(--fg-1);
    font-weight: var(--font-weight-semibold);
}

.perimetre-table__raison {
    min-width: 160px;
}

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

.perimetre-table__actions {
    width: 48px;
    text-align: right;
}

.text-muted {
    color: var(--fg-4, #94A3B8);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold);
}

.badge--active {
    background-color: var(--icd-success-bg);
    color: var(--icd-success);
}

.badge--principal {
    background-color: var(--icd-blue-50, #EFF6FF);
    color: var(--icd-blue-700);
}

/* Bouton lien "Marquer" */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.btn-link--blue {
    color: var(--icd-blue-700);
}

.btn-link--blue:hover {
    text-decoration: underline;
}

/* Bouton icône poubelle */
.btn-icon {
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.btn-icon--danger {
    color: var(--icd-danger);
}

.btn-icon--danger:hover {
    background-color: #FEF2F2;
}

/* Compteur pied de tableau */
.perimetre-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--fg-3);
    border-top: 1px solid var(--icd-neutral-100, #F1F5F9);
}

/* Carte formulaire ajout */
.perimetre-form-card {
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.perimetre-form-card__titre {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-1);
    margin: 0 0 var(--space-5) 0;
}

@media (max-width: 767px) {
    .perimetre-bloc__top {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------ */
/* Utilitaires                                                         */
/* ------------------------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Récapitulatif commande — T-COMMANDE-001                             */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Panneau document généré — T-COMMANDE-002                            */
/* ------------------------------------------------------------------ */
.recap-doc__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--icd-neutral-50, #F8FAFC);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.recap-doc__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--icd-neutral-100, #F1F5F9);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icd-blue-700);
}

.recap-doc__info {
    flex: 1;
    min-width: 0;
}

.recap-doc__nom {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-1);
    margin: 0 0 var(--space-1) 0;
}

.recap-doc__meta {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--fg-3);
    margin: 0;
}

.recap-doc__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.recap-doc__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icd-blue-700);
    text-decoration: none;
    padding: var(--space-1);
    border-radius: var(--radius-sm, 4px);
    transition: background-color 0.15s;
}

.recap-doc__download:hover {
    background-color: var(--icd-blue-50, #EFF6FF);
}

.badge--pret {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-bold);
    color: var(--icd-blue-700);
    background-color: var(--icd-blue-50, #EFF6FF);
    border: 1px solid var(--icd-blue-200);
    border-radius: var(--radius-sm, 4px);
    padding: 2px var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* T-SIG-007 — Badge "À SIGNER" (écran /mandat), même style visuel que .badge--pret,
   nom distinct pour ne pas réutiliser sémantiquement un badge "signé". */
.badge--a-signer {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-bold);
    color: var(--icd-blue-700);
    background-color: var(--icd-blue-50, #EFF6FF);
    border: 1px solid var(--icd-blue-200);
    border-radius: var(--radius-sm, 4px);
    padding: 2px var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* T-UX-025 — Badge outlined "IDENTITÉ VÉRIFIÉE" : fond blanc, bordure verte, texte vert.
 * Distinct de .badge--active (fond vert plein) utilisé par le panneau PPF "VALIDÉ". */
.badge--kyc-verified {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-bold);
    color: var(--icd-success, #16A34A);
    background-color: #fff;
    border: 1.5px solid var(--icd-success, #16A34A);
    border-radius: var(--radius-sm, 4px);
    padding: 2px var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* T-UNIF-001 — Famille de badges "erreur/blocage" : plein et contour, symétrique
 * de .badge--kyc-verified (contour) et .badge--active (plein). */
.badge--erreur {
    background: var(--icd-danger-bg);
    color: var(--icd-danger);
}

.badge--erreur-outline {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-bold);
    color: var(--icd-danger);
    background-color: #fff;
    border: 1.5px solid var(--icd-danger);
    border-radius: var(--radius-sm, 4px);
    padding: 2px var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* T-UX-035 — Formulaire KYC : rangée identité 3 colonnes (prénom, nom, type de document) */
.kyc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: var(--space-4, 1rem);
}

/* T-UX-035 — Rangée photos : recto et verso côte à côte */
.kyc-file-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
}

/* T-UX-035 — Rangée footer : hint à gauche, bouton à droite */
.kyc-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4, 1rem);
}

/* T-UX-035 — Badge OPTIONNEL sur le label verso */
.badge-optionnel {
    display: inline-block;
    padding: 1px var(--space-2, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-3);
    background-color: var(--icd-neutral-100);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-left: var(--space-1, 0.25rem);
}

/* T-UX-025 — Input file stylisé : conteneur bordé, icône caméra, texte placeholder */
/* T-UX-050 — bouton « œil » afficher/masquer sur les champs mot de passe (front + admin,
 * feuille partagée). Wrapper positionné en relative pour ancrer le bouton en absolute dans le
 * champ, sans chevaucher le texte saisi (padding-right compensé sur .form-control).
 */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: calc(var(--space-4) + 28px);
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-3);
}

.password-toggle:hover {
    color: var(--icd-blue-600);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--icd-blue-600);
    outline-offset: 2px;
}

.password-toggle__icon-hide {
    display: none;
}

.password-toggle--visible .password-toggle__icon-show {
    display: none;
}

.password-toggle--visible .password-toggle__icon-hide {
    display: block;
}

.kyc-file-label {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    color: var(--fg-3);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.kyc-file-label:hover {
    border-color: var(--icd-blue-600);
}

.kyc-file-label svg {
    flex-shrink: 0;
    color: var(--fg-3);
}

.recap-card {
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.recap-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.recap-card__titre {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    margin: 0 0 var(--space-1) 0;
}

.recap-card__sous-titre {
    font-size: var(--font-size-sm);
    color: var(--fg-3);
    margin: 0;
}

.recap-card__modifier {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--icd-blue-700);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.recap-card__modifier:hover {
    text-decoration: underline;
}

/* --- Panneau informations contractuelles --- */
.recap-info__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-8);
    margin-bottom: var(--space-5);
}

.recap-info__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.recap-info__label {
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-4, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.recap-info__value {
    font-size: var(--font-size-sm);
    color: var(--fg-1);
}

.recap-info__fonction {
    font-size: var(--font-size-sm);
    color: var(--fg-3);
}

.recap-code-chip {
    display: inline-block;
    background-color: var(--icd-neutral-50, #F8FAFC);
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-sm, 4px);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    font-family: ui-monospace, 'Courier New', monospace;
    color: var(--fg-2);
}

/* --- Périmètre en lecture seule dans le panneau infos --- */
.recap-perimetre__separator {
    border-top: 1px solid var(--icd-neutral-200);
    margin: var(--space-5) 0 var(--space-4);
}

.recap-perimetre__titre {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--fg-1);
    margin: 0 0 var(--space-3) 0;
}

/* --- Panneau acceptations --- */
.recap-accept__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.recap-accept__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border: 1.5px solid var(--icd-blue-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background-color: var(--icd-blue-50, #EFF6FF);
}

.recap-accept__item input[type=checkbox] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--icd-blue-700);
}

.recap-accept__item label {
    font-size: var(--font-size-sm);
    color: var(--fg-2);
    line-height: 1.5;
    cursor: pointer;
}

.link {
    color: var(--icd-blue-700);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .recap-info__grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ */
/* T-SIGNER-001 — Écran /signer-payer                                  */
/* ------------------------------------------------------------------ */

.badge--ongoing { background: var(--icd-blue-100, #dbeafe); color: var(--icd-blue-700); }
.badge--expired { background: var(--icd-neutral-100); color: var(--icd-neutral-600, #6b7280); }

/* =========================================================================
   T-SIG-010 — Panneau adresses électroniques PPF (écran mandat) : correctif
   visuel/ergonomique. Classes dédiées, distinctes de .perimetre-table (non
   modifiée — cf. CA-7, partagée avec src/front/vue/perimetre/index.php).
   ========================================================================= */

/* Pastilles SIRET connus (remplace la liste à puces) */
.chip-siret-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.chip-siret {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--icd-blue-50, #EFF6FF);
    color: var(--icd-blue-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: default;
}

/* Actions du tableau (Créer une ligne pour chaque SIRET / Valider), regroupées avant le tableau */
.adresses-actions-ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.adresses-actions-ligne form {
    margin: 0;
}

/* Tableau des adresses déclarées : panneau à coins arrondis, en-tête bleu officiel */
.adresses-table-wrapper {
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-y: hidden;
}

.adresses-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.adresses-table thead th {
    background-color: var(--icd-blue-700, #3535EB);
    color: #FFFFFF;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.adresses-table tbody td {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--icd-neutral-100, #F1F5F9);
    vertical-align: middle;
    color: var(--fg-2);
}

.adresses-table tbody tr:last-child td {
    border-bottom: none;
}

/* ------------------------------------------------------------------ */
/* Sidebar récapitulatif latéral (T-UX-019)                           */
/*                                                                     */
/* Layout : grille 2 colonnes sur .site-main__inner--with-sidebar.    */
/* La sidebar est sticky sous le header + stepper.                    */
/* Fidélité design : docs/design/recap/recap.png + recap2.png.        */
/* ------------------------------------------------------------------ */
.site-main__inner--with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
    align-items: start;
}

.site-main__content {
    min-width: 0; /* évite débordement grid */
}

.site-main__sidebar {
    position: sticky;
    top: calc(60px + var(--space-4)); /* sous le header sticky */
}

/* Conteneur principal de la sidebar */
.sidebar-recap {
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* Label "RÉCAPITULATIF" */
.sidebar-recap__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--icd-blue-700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

/* Bloc offre — en-tête avec nom et prix */
.sidebar-recap__offre {
    margin-bottom: var(--space-4);
}

.sidebar-recap__offre-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
}

.sidebar-recap__offre-nom {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    line-height: 1.2;
}

.sidebar-recap__offre-produit {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--fg-3);
    margin-top: var(--space-1);
}

.sidebar-recap__offre-vide {
    font-size: var(--font-size-sm);
    color: var(--fg-4);
    font-style: italic;
}

/* Séparateur */
.sidebar-recap__sep {
    border: none;
    border-top: 1px solid var(--border-1);
    margin: var(--space-4) 0;
}

/* Bloc métadonnées (dl/dt/dd) */
.sidebar-recap__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.sidebar-recap__meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-recap__meta-label {
    font-size: var(--font-size-sm);
    color: var(--fg-3);
    flex-shrink: 0;
}

.sidebar-recap__meta-value {
    font-size: var(--font-size-sm);
    color: var(--fg-2);
    text-align: right;
}

.sidebar-recap__meta-value--strong {
    font-weight: var(--font-weight-semibold);
    color: var(--fg-1);
}

/* Chip SIREN monospace — T-UX-024 CA-5 : bordure visible (capsule) */
.sidebar-recap__chip {
    display: inline-block;
    background: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--fg-2);
    letter-spacing: 0.04em;
}

/* Bloc tarifaire HT/TVA/TTC — T-UX-024 CA-2/CA-3 */
.sidebar-recap__pricing {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Rangée tarifaire : libellé à gauche, montant à droite */
.sidebar-recap__pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--fg-2);
}

/* Montant tarifaire : non coupable à la ligne — T-UX-024 CA-3 */
.sidebar-recap__pricing-amount {
    white-space: nowrap;
    text-align: right;
    flex-shrink: 0;
}

/* Libellé et montant TVA en couleur muted */
.sidebar-recap__pricing-label--muted,
.sidebar-recap__pricing-amount--muted {
    color: var(--fg-3);
}

/* Total TTC en gras — T-UX-024 CA-3 : font-weight ≥ 600 côté libellé ET montant */
.sidebar-recap__pricing-row--ttc {
    font-weight: var(--font-weight-semibold);
    color: var(--fg-1);
    font-size: var(--font-size-base);
}

/* Bouton toggle "Changer d'offre" / "Annuler" */
.sidebar-recap__switcher-wrapper {
    margin-bottom: var(--space-2);
    text-align: center;
}

.sidebar-recap__toggle {
    background: none;
    border: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--icd-blue-700);
    cursor: pointer;
    text-decoration: none;
}

.sidebar-recap__toggle:hover,
.sidebar-recap__toggle:focus-visible {
    text-decoration: underline;
}

/* Panneau liste des offres (état toggle ouvert) */
.sidebar-recap__offres-list {
    margin-top: var(--space-3);
    overflow: hidden; /* T-UX-020 CA-1 : garantit le confinement dans la carte */
}

/* Overrides switcher-inline dans le contexte sidebar — badges "actuel" */
.sidebar-recap__offres-list .switcher-inline__item {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
}

.sidebar-recap__offres-list .switcher-inline__item--active {
    border-color: var(--icd-blue-700);
    background: var(--icd-blue-50);
}

.sidebar-recap__offres-list .switcher-inline__badge {
    font-size: var(--font-size-xs);
    background: var(--icd-blue-700);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 2px var(--space-2);
    margin-left: var(--space-1);
}

/* T-UX-020 CA-2 : item actif — layout flex (libellé gauche, prix droite) */
.sidebar-recap__offres-list .switcher-inline__item--active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* T-UX-020 CA-2 : bouton-ligne pour les offres non courantes — reset complet + full-width flex */
.sidebar-recap__offres-list .switcher-inline__row-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

/* Barre de progression (CA-6) */
.sidebar-recap__progress {}

.sidebar-recap__progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.sidebar-recap__progress-pct {
    font-size: var(--font-size-sm);
    color: var(--fg-3);
}

.sidebar-recap__progress-bar {
    height: 4px;
    background: var(--bg-3);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sidebar-recap__progress-fill {
    height: 100%;
    background: var(--icd-blue-700);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

/* Responsive : sidebar en colonne sous le contenu sur mobile */
@media (max-width: 767px) {
    .site-main__inner--with-sidebar {
        grid-template-columns: 1fr;
    }

    .site-main__sidebar {
        position: static;
    }
}

/* ------------------------------------------------------------------ */
/* Icône d'info de champ + tooltip stylé — T-UNIF-011                  */
/*                                                                     */
/* Remplace le motif emoji + tooltip natif navigateur (attribut        */
/* `title`) par un déclencheur focusable et une bulle stylée cohérente */
/* avec la charte (jetons existants uniquement, aucun nouveau jeton).  */
/* ------------------------------------------------------------------ */
.field-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    color: var(--icd-warning);
}

.field-hint__icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-hint__tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    background: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--fg-2);
    font-size: var(--font-size-xs);
    font-weight: normal;
    text-align: left;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-out);
    z-index: 10;
}

.field-hint:hover .field-hint__tooltip,
.field-hint:focus .field-hint__tooltip,
.field-hint:focus-visible .field-hint__tooltip {
    opacity: 1;
    visibility: visible;
}

/* =========================================================================
   T-UX-057, CA-4 — Popup de confirmation « Continuer vers la signature »
   Premier composant modal du front (piste « bandeau icône teinté » retenue,
   project/tampon/livrable-popup-confirmation-signature/) — HTML/CSS natif,
   <dialog>, aucune dépendance JS tierce.
   ========================================================================= */
.signature-confirm-dialog {
    margin: auto;
    padding: 0;
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: min(380px, calc(100% - 32px));
    overflow: hidden;
    text-align: center;
}

.signature-confirm-dialog::backdrop {
    background: rgba(10, 31, 79, 0.45);
    animation: signature-confirm-overlay var(--duration-base) var(--ease-out);
}

.signature-confirm-dialog[open] {
    animation: signature-confirm-fade-up var(--duration-slow) var(--ease-out);
}

@keyframes signature-confirm-overlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes signature-confirm-fade-up {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.signature-confirm-dialog__icon-zone {
    background: var(--icd-gradient-soft);
    padding: var(--space-6) var(--space-6) var(--space-5);
}

.signature-confirm-dialog__icon-tile {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--icd-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.signature-confirm-dialog__icon-tile svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.signature-confirm-dialog__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.signature-confirm-dialog__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    margin: 0 0 var(--space-3);
}

.signature-confirm-dialog__chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.signature-confirm-dialog__chip {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--icd-blue-700);
    background: var(--icd-blue-50);
    border: 1px solid var(--icd-blue-200);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}

.signature-confirm-dialog__text {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--fg-2);
    margin: 0 0 var(--space-6);
}

.signature-confirm-dialog__actions {
    display: flex;
    gap: var(--space-3);
}

.signature-confirm-dialog__actions .btn {
    flex: 1;
}

.signature-confirm-dialog__actions form {
    margin: 0;
    flex: 1;
    display: flex;
}

.signature-confirm-dialog__actions form .btn {
    width: 100%;
}

@media (max-width: 767px) {
    .signature-confirm-dialog {
        width: calc(100% - 24px);
    }
    .signature-confirm-dialog__actions {
        flex-direction: column-reverse;
    }
}

/* =========================================================================
   T-OFFRES-023, CA-4 à CA-6 — Popup commerciale « Et si vous profitiez de
   l'offre Duo ? » (/offres, sélection du besoin « Émettre »).
   Même patron `<dialog>`/`showModal()` que .signature-confirm-dialog
   ci-dessus (T-UX-057) — mêmes jetons de design (--icd-*, --radius-*,
   --space-*, --shadow-xl), contenu et disposition propres à ce ticket
   (bouton de fermeture ×, encart mis en avant, 2 actions alignées à droite).
   ========================================================================= */
.promo-duo-dialog {
    position: relative;
    margin: auto;
    padding: 0;
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: min(420px, calc(100% - 32px));
    overflow: hidden;
}

.promo-duo-dialog::backdrop {
    background: rgba(10, 31, 79, 0.45);
    animation: signature-confirm-overlay var(--duration-base) var(--ease-out);
}

.promo-duo-dialog[open] {
    animation: signature-confirm-fade-up var(--duration-slow) var(--ease-out);
}

.promo-duo-dialog__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--fg-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.promo-duo-dialog__close:hover,
.promo-duo-dialog__close:focus-visible {
    background: var(--icd-neutral-100);
    color: var(--fg-1);
}

.promo-duo-dialog__body {
    padding: var(--space-6);
}

.promo-duo-dialog__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    margin: 0 var(--space-6) var(--space-3) 0;
}

.promo-duo-dialog__text {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--fg-2);
    margin: 0 0 var(--space-5);
}

.promo-duo-dialog__highlight {
    background: var(--icd-blue-50);
    border: 1px solid var(--icd-blue-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.promo-duo-dialog__highlight-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--icd-blue-800);
    margin: 0 0 var(--space-2);
}

.promo-duo-dialog__highlight-text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

.promo-duo-dialog__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.promo-duo-dialog__actions .btn {
    flex: 1;
}

@media (max-width: 767px) {
    .promo-duo-dialog {
        width: calc(100% - 24px);
    }
    .promo-duo-dialog__actions {
        flex-direction: column-reverse;
    }
    .promo-duo-dialog__actions .btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* Écran « Mes dossiers » — T-DOS-006 (ADR-010)                        */
/* Réutilisation stricte des jetons existants (aucun nouveau jeton,    */
/* spec archivée §1) : uniquement de nouveaux composants de mise en    */
/* page/carte, cf. spec §2.                                            */
/* ------------------------------------------------------------------ */
.dossier-page-intro {
    margin-bottom: var(--space-6);
}

.dossier-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

/* Carte = <button> pleine largeur dans un <form> (pas de <a> — mutation de session protégée par
   CSRF, cf. MesDossiersController). Réinitialise les styles natifs de bouton. */
.dossier-card {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}

.dossier-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.dossier-card:focus-visible {
    outline: 2px solid var(--icd-blue-600);
    outline-offset: 2px;
}

.dossier-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.dossier-card__company {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--fg-1);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dossier-card__siren {
    font-size: var(--font-size-xs);
    color: var(--fg-3);
    letter-spacing: .02em;
    margin-top: var(--space-1);
}

.dossier-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--fg-3);
    margin-top: var(--space-4);
}

.dossier-card__progress {
    margin-top: var(--space-4);
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--bg-3);
    overflow: hidden;
}

.dossier-card__progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--icd-gradient-primary);
}

.dossier-card__cta {
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-1);
    color: var(--icd-blue-700);
    background-color: var(--icd-neutral-0);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.dossier-card:hover .dossier-card__cta {
    background-color: var(--icd-blue-50);
    border-color: var(--icd-blue-200);
}

/* Badge d'étape compact — familles de couleur (spec §3.3). Étapes 1-3 (neutre) et 7 (« en
   préparation ») sont nouvelles ; étapes 4-6 réutilisent .badge--a-signer, étape 8 .badge--pret,
   Actif .badge--active — toutes trois déjà existantes, inchangées. */
.badge--etape-neutre {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-bold);
    color: var(--fg-3);
    background-color: var(--bg-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm, 4px);
    padding: 2px var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--en-preparation {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-xs, 0.7rem);
    font-weight: var(--font-weight-bold);
    color: var(--icd-warning-text);
    background-color: var(--icd-warning-bg);
    border: 1px solid var(--icd-warning);
    border-radius: var(--radius-sm, 4px);
    padding: 2px var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Suppression de dossier self-service — T-DOS-014 (CA-2)              */
/* Livrable Claude Design (project/tampon/dossier-suppression-         */
/* confirmation/retour/) — repris tel quel, aucun jeton nouveau.       */
/* ------------------------------------------------------------------ */

/* Nouveau conteneur de grille (remplace le <form> nu comme enfant direct
   de .dossier-list) — permet de superposer le déclencheur de suppression
   sans imbriquer un <button> dans le <button> pleine carte existant. */
.dossier-card-cell {
    position: relative;
}

/* Formulaire de suppression positionné en superposition, coin haut-droit
   de la carte — sibling du <form> de reprise, jamais imbriqué dedans. */
.dossier-card-cell__delete-form {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    margin: 0;
    z-index: 2;
}

/* Réserve la place du déclencheur superposé : évite qu'il chevauche le
   badge d'étape (coin haut-droit également) sur les cartes supprimables. */
.dossier-card-cell--deletable .dossier-card {
    padding-right: calc(var(--space-6) + 34px);
}

/* Déclencheur : réutilise .btn-icon/.btn-icon--danger déjà existants
   (même composant que la poubelle du tableau périmètre) — aucune
   nouvelle classe de bouton icône introduite. */
.dossier-card-cell__delete-form .btn-icon {
    background: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-xs);
}

.dossier-card-cell__delete-form .btn-icon--danger:hover {
    border-color: var(--icd-danger);
}

/* Nouvelle variante de bouton — pas de style "danger" existant dans .btn
   (seuls primary/secondary/white). Ton volontairement sobre (fond teinté
   --icd-danger-bg, pas de rouge plein) : l'action destructive ne doit pas
   être visuellement plus forte que .btn--secondary (Annuler). */
.btn--danger {
    background: var(--icd-danger-bg);
    border: 1px solid var(--icd-danger);
    color: var(--icd-danger);
}

.btn--danger:hover {
    background: #FBD5D5;
    border-color: var(--icd-danger);
    color: #B91C1C;
}

.btn--danger:active {
    background: #F7C6C6;
}

.btn--danger:disabled,
.btn--danger.is-loading {
    opacity: .7;
    cursor: default;
    pointer-events: none;
}

.btn--danger:focus-visible {
    outline: 2px solid var(--icd-danger);
    outline-offset: 2px;
}

/* margin:auto explicite : le reset universel du projet (*,*::before,*::after{margin:0})
   annule le centrage par défaut du <dialog> natif — sans cette règle la fenêtre colle en
   haut/gauche au lieu d'être centrée à l'écran. Correctif propre à cette classe, aucune
   modification du reset global ni de .signature-confirm-dialog existant. */
.delete-confirm-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: 1px solid var(--icd-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: min(400px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow: hidden;
    text-align: center;
}

.delete-confirm-dialog::backdrop {
    background: rgba(10, 31, 79, .45);
    animation: delete-confirm-overlay var(--duration-base) var(--ease-out);
}

.delete-confirm-dialog[open] {
    animation: delete-confirm-fade-up var(--duration-slow) var(--ease-out);
}

@keyframes delete-confirm-overlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes delete-confirm-fade-up {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Zone icône : fond --icd-danger-bg uni (pas de gradient brand — ton
   factuel, non festif, distinct du popup de confirmation signature). */
.delete-confirm-dialog__icon-zone {
    background: var(--icd-danger-bg);
    padding: var(--space-6) var(--space-6) var(--space-5);
}

.delete-confirm-dialog__icon-tile {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--icd-neutral-0);
    border: 1px solid #F5B5B5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.delete-confirm-dialog__icon-tile svg {
    width: 26px;
    height: 26px;
    stroke: var(--icd-danger);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.delete-confirm-dialog__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.delete-confirm-dialog__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--fg-1);
    margin: 0 0 var(--space-3);
}

.delete-confirm-dialog__text {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--fg-2);
    margin: 0 0 var(--space-3);
    word-break: break-word;
}

.delete-confirm-dialog__company {
    color: var(--fg-1);
}

.delete-confirm-dialog__hint {
    font-size: var(--font-size-xs);
    color: var(--fg-3);
    margin: 0 0 var(--space-6);
}

.delete-confirm-dialog__actions {
    display: flex;
    gap: var(--space-3);
}

.delete-confirm-dialog__actions .btn {
    flex: 1;
    width: 100%;
}

/* T-DOS-014 (CA-5) : état « 0 dossier », minimal — pas de composant dédié fourni par le livrable
   de design (hors périmètre CA-2), réutilise uniquement les jetons de typographie existants. */
.dossier-empty-state {
    padding: var(--space-6);
    text-align: center;
    color: var(--fg-3);
    background-color: var(--icd-neutral-0);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl);
}

@media (max-width: 767px) {
    .delete-confirm-dialog {
        width: calc(100% - 24px);
    }
    .delete-confirm-dialog__actions {
        flex-direction: column;
    }
}