/* public/espace.css — Shell de l'espace gérant et onglet Accueil, d'après les
   maquettes validées de docs/maquettes/espace.
   Tout est rangé sous #app-section.esp : les onglets pas encore refaits gardent
   leur style, la caisse garde le sien (caisse.css).

   Navigation :
   - 769 px et plus : barre latérale, « Ouvrir la caisse » en tête ;
   - 768 px et moins : 5 onglets en bas, bouton Caisse flottant au-dessus.
   L'accès équipe ne voit aucune navigation : la caisse seule. */

/* ── Socle de la page ────────────────────────────────────────────────────────
   index.html charge trois feuilles : celle-ci, connexion.css et caisse.css.
   Les remises à zéro qui valent pour la page entière — et
   non pour un écran — vivent ici, puisque espace.css est sa feuille principale.
   Elles étaient dans style.css, supprimé avec l'ancien design. */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: #FBFAF7;
    color: #17150F;
    font-family: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body { background: #0E0F11; color: #F3F1EB; }

h1, h2, h3 { margin-top: 0; }

[hidden] { display: none !important; }

/* Les listes déroulantes natives : Chrome peint le menu avec le fond du système,
   pas celui de la page. On le force, sinon le texte disparaît en thème sombre. */
select option { background: #FFFFFF; color: #17150F; }
html[data-theme="dark"] select option { background: #1D1F23; color: #F3F1EB; }

/* L'espace est caché jusqu'à la connexion ; auth.js le passe en flex. */
#app-section { display: none; }

.main-content { flex: 1; min-width: 0; overflow-y: auto; scroll-behavior: smooth; }

/* Un seul onglet visible à la fois. */
.tab-content { display: none; margin: 0 auto; }
/* La caisse sur grand écran prend tout l'écran (maquette OrdiCaisse) : ni
   barre latérale, ni marges. La croix de sa bande ramène à l'accueil. */
@media (min-width: 900px) {
    #app-section.esp:has(#tab-scanner.active) .esp-nav { display: none; }
    #app-section.esp:has(#tab-scanner.active) .main-content { padding: 0; }
    #tab-scanner.tab-content { max-width: none; }
    #app-section.esp-equipe .c-fermer { display: none; }
}

/* « backwards » et non « both » : une fois jouée, l'animation ne laisse pas de
   transform, qui ferait de l'onglet le repère des éléments fixes (fiche client). */
.tab-content.active { display: block; animation: esp-onglet-entre 0.32s ease-out backwards; }

@keyframes esp-onglet-entre {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tab-content.active { animation: none; }
}

#app-section.esp {
    --fond: #FBFAF7;
    --surface: #FFFFFF;
    --surface-2: #F3F1EC;
    --bordure: #E6E2D9;
    --bordure-forte: #D3CEC2;
    --encre: #17150F;
    --encre-2: #57534A;
    --encre-3: #6F6A5F;
    --em: #0F7A55;
    --em-survol: #0B6647;
    --em-doux: #E3F2EB;
    --em-texte: #0B6647;
    --sur-em: #FFFFFF;
    --ambre: #D39317;
    --ambre-doux: #FBF0D8;
    --ambre-texte: #85570A;
    --attention: #B4540A;
    --attention-doux: #FCEDE0;
    --danger: #C23B2E;
    --danger-doux: #FBE9E6;
    --ambre-vif: #EBAA2C;
    --carte: #1F3B33;
    --carte-texte: #F6F3EA;
    --anneau: rgb(15 122 85 / 0.32);
    --ombre-1: 0 1px 2px rgb(23 21 15 / 0.06), 0 1px 1px rgb(23 21 15 / 0.04);
    --ombre-2: 0 6px 16px -4px rgb(23 21 15 / 0.18), 0 2px 4px rgb(23 21 15 / 0.08);
    --police: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Échelle des titres. Le texte courant fait 15 px : chaque niveau doit s'en
       détacher d'au moins un tiers, sinon l'œil ne voit qu'un texte un peu gras.
       Le défaut d'avant : une section à 17 px au milieu d'un corps à 15-16. */
    --t-ecran:   1.75rem;     /* le nom de l'écran : Revenus, Clients, Caisse */
    --t-section: 1.25rem;     /* une section dedans : Meilleurs clients */
    --police-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --barre-bas: calc(64px + env(safe-area-inset-bottom));

    padding: 0;
    gap: 0;
    background: var(--fond);
    color: var(--encre);
}

html[data-theme="dark"] #app-section.esp {
    --fond: #0E0F11;
    --surface: #16171A;
    --surface-2: #1D1F23;
    --bordure: #2A2C31;
    --bordure-forte: #3A3D43;
    --encre: #F3F1EB;
    --encre-2: #B3AFA6;
    --encre-3: #8F8B81;
    --em: #2FBF86;
    --em-survol: #47D29B;
    --em-doux: rgb(47 191 134 / 0.14);
    --em-texte: #5AD9A3;
    --sur-em: #04160E;
    --ambre: #F0B23A;
    --ambre-doux: #33260C;
    --ambre-texte: #F4C467;
    --attention: #F09A4A;
    --attention-doux: rgb(240 154 74 / 0.14);
    --danger: #F0776A;
    --danger-doux: rgb(240 119 106 / 0.14);
    --ambre-vif: #FFC65A;
    --carte: #24463C;
    --anneau: rgb(47 191 134 / 0.36);
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.45);
    --ombre-2: 0 8px 20px -6px rgb(0 0 0 / 0.55), 0 2px 4px rgb(0 0 0 / 0.35);
}

/* Remises à zéro faibles (:where) : elles ne doivent jamais battre les classes. */
:where(.esp-nav, .esp-accueil, .esp-clients, .esp-revenir, .esp-revenus, .esp-reglages, .esp-equipe-barre, .esp-compte) :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
:where(.esp-accueil, .esp-clients, .esp-revenir, .esp-revenus, .esp-reglages) :where(h2, h3, p) { margin: 0; }
.esp :where(.esp-nav, .esp-accueil, .esp-clients, .esp-revenir, .esp-revenus, .esp-reglages, .esp-equipe-barre, .esp-compte) :focus-visible {
    outline: 2px solid var(--em);
    outline-offset: 2px;
}

.esp .main-content { font-family: var(--police); }

/* ── Navigation ──────────────────────────────────────────────────────────── */

.esp-nav {
    width: 248px;
    flex: none;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px;
    background: var(--surface);
    border-right: 1px solid var(--bordure);
    font: 400 0.9375rem/1.55 var(--police);
    color: var(--encre);
    overflow-y: auto;
    z-index: 10;
}

.esp-marque { display: flex; align-items: center; gap: 10px; padding: 4px 8px; min-width: 0; }
.esp-marque-logo {
    width: 36px; height: 36px; flex: none;
    border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--carte); color: var(--carte-texte);
}
.esp-marque-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-marque-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.esp-marque-nom { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp-marque-sous { font-size: 0.75rem; color: var(--encre-3); }

.esp-caisse {
    height: 44px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--em) !important;
    color: var(--sur-em) !important;
    font-size: 0.9375rem; font-weight: 550;
    box-shadow: var(--ombre-1), inset 0 1px 0 rgb(255 255 255 / 0.16);
    transition: background-color 120ms ease;
}
.esp-caisse:hover { background: var(--em-survol) !important; }
.esp-caisse.active { box-shadow: 0 0 0 3px var(--anneau); }
.esp-caisse-court { display: none; }

.esp-onglets { display: flex; flex-direction: column; gap: 2px; }
.esp-onglet {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 10px !important;
    color: var(--encre-2);
    font-weight: 500;
    text-align: left;
    transition: background-color 120ms ease, color 120ms ease;
}
.esp-onglet:hover { background: var(--surface-2); color: var(--encre); }
.esp-onglet.active { background: var(--surface-2); color: var(--encre); font-weight: 600; }
.esp-onglet svg { flex: none; display: block; }
/* L'icône de « Réglages / Plus » change selon la largeur : ses deux enveloppes
   sont des boîtes, sinon le libellé retombe sur la ligne de base du texte. */
.esp-icone-long, .esp-icone-court { display: flex; align-items: center; }
.esp-onglet-libelle { flex: 1; }
.esp-onglet-court, .esp-icone-court { display: none; }

.esp-pastille {
    min-width: 22px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--attention-doux); color: var(--attention);
    font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.esp-pastille-point { min-width: 0; width: 8px; height: 8px; padding: 0; margin-right: 7px; background: var(--attention); }

.esp-sep { height: 1px; background: var(--bordure); margin: 0 8px; flex: none; }

.esp-porte, .esp-retour, .esp-commerce { display: none; }

.esp-pied { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

.esp-demarrage {
    width: 100%;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px !important;
    border-radius: 12px;
    border: 1px solid var(--bordure) !important;
    background: var(--surface-2) !important;
    text-align: left;
}
.esp-demarrage-haut { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; }
.esp-demarrage-haut strong { font-weight: 600; }
.esp-demarrage-haut span { color: var(--encre-2); font-variant-numeric: tabular-nums; }
.esp-barre { height: 6px; border-radius: 999px; background: var(--bordure); overflow: hidden; }
.esp-barre span { display: block; height: 100%; border-radius: 999px; background: var(--em); transition: width 300ms ease; }
.esp-demarrage-suite { font-size: 0.8125rem; color: var(--encre-2); line-height: 1.4; }

/* L'identité du gérant, en bas de la barre (maquette) : un bouton qui ouvre
   le menu du compte — thème, verrou de la caisse, déconnexion. */
.esp-moi { position: relative; }
.esp-moi-bouton {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px !important;
    border-radius: 10px; text-align: left; color: var(--encre);
}
.esp-moi-bouton:hover, .esp-moi-bouton[aria-expanded="true"] { background: var(--surface-2) !important; }
.esp-moi-av {
    flex: none; width: 32px; height: 32px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--encre-2); font-size: 0.75rem; font-weight: 600;
}
.esp-moi-bouton:hover .esp-moi-av { background: var(--bordure); }
.esp-moi-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.esp-moi-nom { font-size: 0.8125rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp-moi-role { font-size: 0.75rem; color: var(--encre-3); }
.esp-moi-chevron { flex: none; color: var(--encre-3); }
.esp-moi-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20;
    display: flex; flex-direction: column; padding: 6px;
    border-radius: 12px; border: 1px solid var(--bordure); background: var(--surface); box-shadow: var(--ombre-2);
}
.esp-moi-menu[hidden] { display: none; }
.esp-moi-menu button {
    display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px !important;
    border-radius: 8px; font-size: 0.875rem; color: var(--encre); text-align: left;
}
.esp-moi-menu button:hover { background: var(--surface-2) !important; }
.esp-moi-menu svg { color: var(--encre-2); flex: none; }

/* Écran de l'équipe : pas de navigation, un bouton pour verrouiller. */
.esp-equipe-barre, .esp-compte { display: none; }
/* L'équipe voit la caisse et les campagnes (auth.js masque le reste). Sur
   ordinateur, la barre latérale porte déjà le verrou : la barre du haut n'y
   sert qu'au téléphone. */
#app-section.esp-equipe .esp-equipe-barre {
    display: flex; align-items: center; justify-content: flex-end;
    max-width: 1100px; margin: 0 auto 12px;
    font: 400 0.9375rem/1.55 var(--police);
}
@media (min-width: 769px) {
    #app-section.esp-equipe .esp-equipe-barre { display: none; }
}
.esp-equipe-verrou {
    height: 40px; padding: 0 14px !important;
    border-radius: 8px;
    border: 1px solid var(--bordure-forte) !important;
    background: var(--surface) !important;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--encre); font-weight: 550;
}

@media (min-width: 769px) {
    .esp .main-content { height: 100vh; height: 100dvh; padding: 28px 40px 48px; }
}

@media (max-width: 768px) {
    /* La barre du bas, plus un souffle. Les 88 px d'avant réservaient la place du
       bouton flottant « Caisse », devenu un onglet de la barre. */
    /* 24 px en haut : à 16, les titres collaient à l'heure du téléphone. */
    .esp .main-content { padding: 24px 16px calc(var(--barre-bas) + 16px); }

    .esp-nav {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 1000;
        width: auto; height: var(--barre-bas);
        flex-direction: row; gap: 0;
        padding: 4px 4px env(safe-area-inset-bottom);
        border-right: 0; border-top: 1px solid var(--bordure);
        overflow: visible;
    }
    .esp-marque, .esp-sep, .esp-pied { display: none; }
    .esp-onglets { display: contents; }

    .esp-onglet {
        flex: 1; min-width: 0;
        height: 58px;
        flex-direction: column; justify-content: center; gap: 3px;
        padding: 0 2px !important;
        position: relative;
        background: none !important;
        color: var(--encre-3);
        font-size: 0.75rem; font-weight: 550;
        text-align: center;
    }
    .esp-onglet.active { color: var(--em-texte); font-weight: 600; }
    .esp-onglet svg { width: 22px; height: 22px; }
    .esp-onglet-libelle { flex: none; white-space: nowrap; }
    .esp-onglet-long, .esp-icone-long { display: none; }
    .esp-onglet-court { display: inline; }
    .esp-icone-court { display: flex; }
    .esp-pastille {
        position: absolute; top: 4px; left: calc(50% + 6px);
        min-width: 18px; height: 18px; padding: 0 5px;
        background: var(--attention); color: var(--fond);
        font-size: 0.75rem;
    }

    /* Le téléphone est le comptoir : deux entrées, la caisse et les campagnes.
       Accueil, Clients, Revenus et Réglages sont rangés derrière « Mon commerce »,
       en haut à droite — pas supprimés. */
    #tab-btn-accueil, #tab-btn-crm, #tab-btn-finances, #tab-btn-parametres { display: none !important; }

    .esp-caisse {
        flex: 1; min-width: 0;
        height: 58px; padding: 0 2px;
        flex-direction: column; justify-content: center; gap: 3px;
        border-radius: 0;
        background: none !important;
        color: var(--encre-3) !important;
        box-shadow: none;
        font-size: 0.75rem; font-weight: 550;
    }
    .esp-caisse:hover { background: none !important; }
    .esp-caisse.active { color: var(--em-texte) !important; font-weight: 600; box-shadow: none; }
    .esp-caisse svg { width: 22px; height: 22px; }
    .esp-caisse-long { display: none; }
    .esp-caisse-court { display: inline; }

    /* Au bureau (Revenus, Clients, Réglages), l'écran est plein : une flèche
       ramène au comptoir, la barre du bas n'a rien à y faire. */
    #app-section.esp-au-bureau .esp-nav { display: none; }
    #app-section.esp-au-bureau .main-content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .esp-retour {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 38px; height: 38px; margin-right: 10px;
        border-radius: 10px; border: 1px solid var(--bordure-forte) !important;
        background: var(--surface) !important; color: var(--encre-2);
    }
    /* Préfixés par .esp : les règles de base de ces en-têtes sont déclarées
       plus bas dans la feuille et gagneraient à spécificité égale. */
    .esp .rvn-entete, .esp .rev-entete { justify-content: flex-start; }
    .esp .rvn-entete .acc-titre, .esp .cli-titre .acc-titre, .esp .rev-entete .acc-titre { display: inline-flex; align-items: center; }
    .esp .cli-titre { align-items: center; }
    /* La marge basse par défaut d'un h2 (0,83 em) décalait le titre au-dessus
       de la flèche de retour. */
    .esp .rvn-entete .acc-titre, .esp .cli-titre .acc-titre, .esp .rev-entete .acc-titre { margin: 0; }

    /* Pour l'équipe, le verrou prend la place de « Mon commerce », dans la
       rangée du titre : sur sa propre ligne, il poussait la recherche de la
       caisse sous la barre du bas. */
    .esp .main-content { position: relative; }
    #app-section.esp-equipe .esp-equipe-barre {
        position: absolute; top: 24px; right: 16px; z-index: 6;
        margin: 0; max-width: none;
    }
    #app-section.esp-equipe .esp-equipe-verrou { height: 36px; border-radius: 999px; font-size: 0.8125rem; }

    /* La porte du bureau, à droite du titre de la caisse et des campagnes. */
    #app-section.esp:not(.esp-equipe) .esp-porte {
        display: inline-flex; align-items: center; gap: 7px; flex: none;
        height: 36px; padding: 0 12px 0 10px; margin-left: auto;
        border-radius: 999px; border: 1px solid var(--bordure-forte) !important;
        background: var(--surface) !important; color: var(--encre);
        font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
        box-shadow: var(--ombre-1);
    }
    .esp-porte svg { color: var(--em-texte); }
    /* Dans la caisse, « En ligne » se réduit à un point à côté du titre pour
       laisser la place à la porte. Hors ligne, le mot revient : ça compte. */
    .c-entete { justify-content: flex-start; gap: 10px; }
    .c-entete .c-etat-ok { font-size: 0; gap: 0; padding: 4px; }
    .c-entete .c-etat-ok::before { width: 8px; height: 8px; }
    /* Sur l'onglet Campagnes, l'écran d'entrée a son propre bouton et remplace
       les sous-onglets : chaque vue y ramène par une flèche. */
    #rev-nouvelle { display: none !important; }
    .esp #tab-promos .rev-sousnav { display: none; }
    /* L'écriture d'une campagne : sur téléphone, le résumé répétait ce que les
       puces (à qui) et le bouton (« Envoyer à 28 clients ») disent déjà. On
       garde l'aperçu de la notification, c'est lui qui rassure. */
    /* L'écriture d'une campagne occupe tout l'écran : ni barre du bas, ni
       en-tête de l'onglet (maquette 3). Elle a son propre titre et sa flèche. */
    #app-section.esp:has(#tab-promos.active #rev-composer:not([hidden])) .esp-nav { display: none; }
    /* Hors de l'écran d'entrée (écrire, déjà envoyées, qui s'éloignent,
       messages automatiques), l'écran a son propre titre et sa flèche. */
    .esp #tab-promos:has(#rev-accueil[hidden]) .rev-entete { display: none; }

}

/* ── Accueil ─────────────────────────────────────────────────────────────── */

#tab-accueil.tab-content { max-width: 1152px; }

.esp-accueil {
    display: flex; flex-direction: column; gap: 24px;
    color: var(--encre);
    font: 400 0.9375rem/1.55 var(--police);
}

.acc-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acc-titre { font-size: var(--t-ecran); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--encre); }
.acc-date { color: var(--encre-2); }

.acc-btn {
    height: 40px; padding: 0 14px !important;
    border-radius: 8px;
    border: 1px solid var(--bordure-forte) !important;
    background: var(--surface) !important;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--encre);
    font-weight: 550;
    white-space: nowrap;
    transition: background-color 120ms ease;
}
.acc-btn:hover { background: var(--surface-2) !important; }
.acc-btn-principal { background: var(--em) !important; border-color: var(--em) !important; color: var(--sur-em) !important; }
.acc-btn-principal:hover { background: var(--em-survol) !important; }
.acc-btn-petit { height: 36px; font-size: 0.8125rem; }
.acc-lien { height: 36px; padding: 0 4px !important; font-size: 0.8125rem; font-weight: 550; color: var(--encre-2); }
.acc-lien:hover { color: var(--encre); }

.acc-section { display: flex; flex-direction: column; gap: 12px; }
.acc-section-titre { display: flex; align-items: center; gap: 8px; font-size: var(--t-section); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--encre); }
.acc-compte {
    height: 22px; min-width: 22px; padding: 0 7px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--encre-2);
    font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Chiffres du jour */
.acc-chiffres {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--bordure); border-radius: 12px;
    background: var(--surface); box-shadow: var(--ombre-1);
}
.acc-chiffre { display: flex; align-items: center; gap: 24px; padding: 18px 24px; min-width: 0; }
.acc-chiffre + .acc-chiffre { border-left: 1px solid var(--bordure); }
.acc-chiffre-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acc-chiffre-libelle { font-size: 0.8125rem; color: var(--encre-2); }
.acc-chiffre-ligne { display: flex; align-items: center; gap: 10px; }
.acc-chiffre-valeur { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acc-evolution {
    height: 24px; padding: 0 8px;
    border-radius: 999px;
    display: inline-flex; align-items: center;
    background: var(--surface-2); color: var(--encre-2);
    font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.acc-evolution.hausse { background: var(--em-doux); color: var(--em-texte); }
.acc-chiffre-note, .acc-chiffres-note { font-size: 0.8125rem; color: var(--encre-3); }
.acc-chiffres-note { display: none; }
.acc-courbe { width: 180px; height: 48px; flex: none; }
.acc-courbe .ref { stroke: var(--encre-3); opacity: 0.6; }
.acc-courbe .jour { stroke: var(--em); }
.acc-courbe .point { fill: var(--em); stroke: var(--surface); }

/* Fil d'activité */
.acc-fil-entete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-filtres { display: flex; gap: 6px; }
.acc-filtre {
    height: 32px; padding: 0 12px !important;
    border-radius: 999px;
    border: 1px solid var(--bordure-forte) !important;
    color: var(--encre-2);
    font-size: 0.8125rem; font-weight: 550;
}
.acc-filtre[aria-pressed="true"] { background: var(--encre) !important; border-color: var(--encre) !important; color: var(--fond); }

.acc-fil { border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); overflow: hidden; }
.acc-jour {
    padding: 10px 20px;
    background: var(--surface-2); border-bottom: 1px solid var(--bordure);
    font-size: 0.8125rem; font-weight: 600; color: var(--encre-2);
}
.acc-evt { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--bordure); }
.acc-fil > :last-child, .acc-fil > .acc-evt-bloc:last-child .acc-evt, .acc-fil > .acc-evt-bloc:last-child .acc-evt-liste { border-bottom: 0; }
.acc-evt-heure { width: 44px; flex: none; font-family: var(--police-code); font-size: 0.8125rem; color: var(--encre-3); }
.acc-evt-avatar {
    width: 32px; height: 32px; flex: none;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--encre-2);
}
.acc-evt-avatar.auto { background: var(--em-doux); color: var(--em-texte); }
.acc-evt-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-evt-titre { font-weight: 550; }
.acc-evt-detail { font-size: 0.8125rem; color: var(--encre-2); }
/* Les lignes groupées se déplient sur la liste des clients concernés. */
.acc-evt-depliable { cursor: pointer; }
.acc-evt-depliable:hover { background: var(--surface-2); }
.acc-evt-bascule {
    flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--encre-3); transition: transform 160ms ease;
}
.acc-evt-bloc.ouvert .acc-evt-bascule { transform: rotate(180deg); }
.acc-evt-liste { list-style: none; margin: 0; padding: 0 20px 14px 124px; border-bottom: 1px solid var(--bordure); display: flex; flex-direction: column; gap: 6px; }
.acc-evt-liste li { display: flex; gap: 10px; align-items: baseline; font-size: 0.8125rem; }
.acc-evt-liste-nom { font-weight: 550; }
.acc-evt-liste-num { font-family: var(--police-code); font-size: 0.75rem; color: var(--encre-3); }
.acc-evt-bloc.ouvert .acc-evt { border-bottom: 0; }
.acc-type {
    height: 24px; padding: 0 8px; flex: none;
    border-radius: 999px;
    display: inline-flex; align-items: center;
    background: var(--surface-2); color: var(--encre-2);
    font-size: 0.75rem; font-weight: 550;
}
.acc-type.anniversaire { background: var(--ambre-doux); color: var(--ambre-texte); }
.acc-type.relance { background: var(--em-doux); color: var(--em-texte); }
.acc-type.expiration { background: var(--attention-doux); color: var(--attention); }
.acc-type.campagne { background: none; box-shadow: inset 0 0 0 1px var(--bordure-forte); }
.acc-fil-vide { padding: 20px; color: var(--encre-2); }
.acc-plus { align-self: flex-start; }

@media (max-width: 768px) {
    .esp-accueil { gap: 20px; }
    .acc-entete .acc-btn { display: none; }

    .acc-chiffres { grid-template-columns: 1fr; box-shadow: none; }
    .acc-chiffre { padding: 14px 16px; gap: 10px; }
    .acc-chiffre + .acc-chiffre { border-left: 0; border-top: 1px solid var(--bordure); }
    .acc-chiffre-corps { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
    .acc-chiffre-libelle { font-size: 0.9375rem; }
    .acc-chiffre-valeur { font-size: 1.0625rem; letter-spacing: 0; }
    .acc-courbe, .acc-chiffre-note { display: none; }
    .acc-chiffres-note { display: block; margin-top: -12px; }

    .acc-evt { padding: 12px 16px; }
    .acc-evt-heure, .acc-type { display: none; }
    .acc-jour { padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .esp-barre span, .esp-onglet, .esp-caisse, .acc-btn { transition: none; }
}

/* ── Clients : liste, catégories et fiche ────────────────────────────────── */

#tab-crm.tab-content { max-width: 1400px; }

.cli-zone {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start;
    font: 400 0.9375rem/1.55 var(--police); color: var(--encre);
}
.cli-zone.avec-fiche { grid-template-columns: minmax(0, 1fr) 380px; }
.cli-zone :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.cli-zone :focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }

.cli-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cli-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cli-titre { display: flex; align-items: baseline; gap: 10px; }
.cli-total { font-size: 1.0625rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }

.cli-alerte {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--bordure); border-radius: 12px;
    background: var(--surface);
}
.cli-alerte-icone {
    width: 32px; height: 32px; flex: none;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--attention-doux); color: var(--attention);
}
.cli-alerte-texte { flex: 1; min-width: 0; text-wrap: pretty; }
.cli-alerte-texte strong { font-weight: 600; }
.cli-alerte-texte span { color: var(--encre-2); }

.cli-onglets { display: flex; gap: 24px; border-bottom: 1px solid var(--bordure); overflow-x: auto; scrollbar-width: none; }
.cli-onglets::-webkit-scrollbar { display: none; }
.cli-onglet {
    padding: 8px 0 10px !important;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: flex; align-items: baseline; gap: 6px;
    color: var(--encre-2); font-weight: 500; white-space: nowrap;
}
.cli-onglet[aria-pressed="true"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--encre); }
.cli-onglet-nombre { font-size: 0.8125rem; font-weight: 500; color: var(--encre-3); font-variant-numeric: tabular-nums; }

.cli-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cli-recherche {
    flex: 1; min-width: 200px; max-width: 340px; height: 40px;
    display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border: 1px solid var(--bordure-forte); border-radius: 8px;
    background: var(--surface); color: var(--encre-3);
}
.cli-recherche:focus-within { border-color: var(--em); box-shadow: 0 0 0 3px var(--anneau); }
.cli-recherche input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--encre); font: inherit; outline: none; }
.cli-tri {
    margin-left: auto; height: 40px;
    display: flex; align-items: center; gap: 6px; padding: 0 12px;
    border: 1px solid var(--bordure-forte); border-radius: 8px;
    background: var(--surface); color: var(--encre-2); font-size: 0.8125rem;
}
.cli-tri select { border: 0; background: none; color: var(--encre); font: inherit; font-weight: 550; cursor: pointer; outline: none; }
.cli-tri:focus-within { border-color: var(--em); box-shadow: 0 0 0 3px var(--anneau); }

.cli-colonnes, .cli-ligne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) 96px 104px; gap: 16px; align-items: center; }
.cli-colonnes {
    padding: 10px 16px;
    background: var(--surface-2);
    border: 1px solid var(--bordure); border-bottom: 0; border-radius: 12px 12px 0 0;
    font-size: 0.8125rem; font-weight: 550; color: var(--encre-3);
}
.cli-liste { border: 1px solid var(--bordure); border-radius: 0 0 12px 12px; background: var(--surface); overflow: hidden; }
.cli-ligne { width: 100%; height: 60px; padding: 0 16px !important; text-align: left; border-bottom: 1px solid var(--bordure); }
.cli-liste > :last-child { border-bottom: 0; }
.cli-ligne:hover, .cli-ligne.active { background: var(--surface-2); }

.cli-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cli-avatar {
    width: 36px; height: 36px; flex: none;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--encre-2);
    font-size: 0.75rem; font-weight: 600;
}
.cli-avatar.fidele { background: var(--em-doux); color: var(--em-texte); }
.cli-avatar.nouveau { background: var(--ambre-doux); color: var(--ambre-texte); }
.cli-nom { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cli-nom strong { font-weight: 550; }
.cli-sous { font-size: 0.75rem; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-visite { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--encre-2); }
.cli-relancer {
    height: 22px; padding: 0 7px; flex: none;
    border-radius: 999px;
    display: inline-flex; align-items: center;
    background: var(--attention-doux); color: var(--attention);
    font-size: 0.75rem; font-weight: 550; white-space: nowrap;
}
.cli-depense { text-align: right; font-variant-numeric: tabular-nums; }
/* L'en-tête suit sa colonne : « Dépensé » à droite, comme les montants. */
.cli-colonnes span:nth-child(3) { text-align: right; }
.cli-carte { display: flex; align-items: center; gap: 8px; }
.cli-jauge { width: 48px; height: 4px; flex: none; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cli-ligne:hover .cli-jauge, .cli-ligne.active .cli-jauge { background: var(--bordure); }
.cli-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--ambre); }
.cli-points { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.cli-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--encre-2); }
.cli-plage { font-variant-numeric: tabular-nums; }
.cli-pages { display: flex; gap: 8px; }

.cli-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 20px; text-align: center; color: var(--encre-2); text-wrap: pretty; }
.cli-vide strong { color: var(--encre); font-weight: 600; }
.cli-squelette { height: 60px; border-bottom: 1px solid var(--bordure); background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: cli-brille 1.4s linear infinite; }
@keyframes cli-brille { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Fiche client : panneau à droite sur ordinateur, feuille basse sur téléphone. */
.cli-fiche {
    position: sticky; top: 0;
    display: flex; flex-direction: column; gap: 16px;
    padding: 20px;
    border: 1px solid var(--bordure); border-radius: 12px;
    background: var(--surface);
}
.cli-voile { display: none; }

.fic-haut { display: flex; align-items: flex-start; gap: 12px; }
.fic-avatar { width: 48px; height: 48px; font-size: 0.875rem; }
.fic-identite { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fic-nom { font-size: var(--t-section); font-weight: 600; letter-spacing: -0.02em; }
.fic-sous { font-size: 0.8125rem; color: var(--encre-2); }
.fic-fermer { width: 36px; height: 36px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--encre-2); }
.fic-fermer:hover { background: var(--surface-2); }

.fic-alerte { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--attention-doux); }
.fic-alerte-texte { display: flex; align-items: flex-start; gap: 10px; font-weight: 550; text-wrap: pretty; }
.fic-alerte-texte svg { flex: none; margin-top: 2px; }

.fic-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden; }
.fic-chiffre { display: flex; flex-direction: column; padding: 12px 14px; border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.fic-chiffre:nth-child(2n) { border-right: 0; }
.fic-chiffre:nth-last-child(-n+2) { border-bottom: 0; }
.fic-chiffre-libelle { font-size: 0.75rem; color: var(--encre-3); }
.fic-chiffre-valeur { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.fic-bloc { display: flex; flex-direction: column; gap: 8px; }
.fic-titre { font-size: 0.8125rem; font-weight: 600; color: var(--encre-2); }
.fic-tampons { display: flex; flex-wrap: wrap; gap: 7px; }
.fic-tampon { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px dashed var(--bordure-forte); }
.fic-tampon.plein { border: 0; background: radial-gradient(circle at 35% 30%, var(--ambre-vif), var(--ambre) 70%); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12); }
.fic-aide { font-size: 0.8125rem; color: var(--encre-2); }

.fic-infos { display: flex; flex-direction: column; border-top: 1px solid var(--bordure); }
.fic-info { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--bordure); color: var(--encre-2); }
.fic-info svg { flex: none; }
.fic-info strong { color: var(--encre); font-weight: 550; }

.fic-historique { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; }
.fic-jour { font-size: 0.75rem; color: var(--encre-3); }
.fic-evt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fic-evt span:last-child { font-size: 0.8125rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }

.fic-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-btn-danger { color: var(--danger) !important; }

/* ── Clients sur ordinateur (maquette 2) ─────────────────────────────────── */
@media (min-width: 769px) { .cli-code { font-family: var(--police-code); font-size: 0.75rem; } }
.cli-alerte-voir { gap: 4px; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--em-texte) !important; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.cli-alerte-fleche { flex: none; }

.cli-filtres-zone { position: relative; }
.cli-filtres-bouton {
    height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px !important;
    border: 1px solid var(--bordure-forte) !important; border-radius: 8px;
    background: var(--surface) !important; font-size: 0.8125rem; font-weight: 550;
}
.cli-filtres-bouton.actif { border-color: var(--em) !important; color: var(--em-texte) !important; }
.cli-filtres {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px;
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
    border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-2);
}
.cli-filtres[hidden] { display: none; }
.cli-filtre-champ { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 550; color: var(--encre-2); }
.cli-filtre-champ select { height: 36px; padding: 0 8px; border: 1px solid var(--bordure-forte); border-radius: 8px; background: var(--surface); color: var(--encre); font: inherit; font-weight: 400; }
.cli-filtre-case { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; cursor: pointer; }
.cli-filtre-case input { width: 16px; height: 16px; margin: 0; accent-color: var(--em); }
.cli-filtres-effacer { align-self: flex-start; font-size: 0.8125rem !important; color: var(--encre-2) !important; text-decoration: underline; text-underline-offset: 3px; }

.fic-ordi { gap: 18px; }
.fic-barre { display: flex; justify-content: space-between; align-items: center; }
.fic-ordi .fic-haut { align-items: center; gap: 14px; }
.fic-ordi .fic-avatar { width: 56px; height: 56px; font-size: 1rem; }
.fic-ordi .fic-nom { font-size: 1.5rem; line-height: 1.2; }
.fic-ordi .fic-sous { margin-top: 2px; }
.fic-ordi .fic-chiffre-valeur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fic-relancer { align-self: flex-start; gap: 8px; }
.fic-statut.champion, .fic-statut.regulier { color: var(--em-texte); }
.fic-statut.endormi { color: var(--attention); }
.fic-actions-menu { position: relative; }
.fic-actions-bouton {
    height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 12px !important;
    border: 1px solid var(--bordure-forte) !important; border-radius: 8px; font-size: 0.8125rem; font-weight: 550;
}
.fic-actions-liste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
    display: flex; flex-direction: column; padding: 6px;
    border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-2);
}
.fic-actions-liste[hidden] { display: none; }
.fic-actions-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px !important; border-radius: 8px; font-size: 0.875rem; text-align: left; }
.fic-actions-item:hover { background: var(--surface-2) !important; }
.fic-actions-item.danger { color: var(--danger) !important; }
.fic-lignes { display: flex; flex-direction: column; border-top: 1px solid var(--bordure); }
.fic-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 42px; padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.fic-ligne-libelle { color: var(--encre-2); flex: none; }
.fic-ligne-valeur { display: flex; align-items: center; gap: 10px; text-align: right; }

/* Grand écran : la fiche est une colonne collée au bord droit, sur toute la
   hauteur ; la liste se resserre à sa gauche. */
@media (min-width: 1100px) {
    .cli-zone.avec-fiche { grid-template-columns: minmax(0, 1fr); margin-right: 412px; }
    .cli-fiche.fic-ordi {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: 420px;
        padding: 20px 24px; overflow-y: auto;
        border: 0; border-left: 1px solid var(--bordure); border-radius: 0;
    }
    .fic-ordi .fic-historique { max-height: none; overflow: visible; }
}

@media (max-width: 900px) {
    .cli-zone.avec-fiche { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .cli-colonnes { display: none; }
    .cli-liste { border-radius: 12px; }
    .cli-ligne {
        height: auto; padding: 12px 16px !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "client carte" "visite carte";
        row-gap: 2px;
    }
    .cli-client { grid-area: client; }
    .cli-visite { grid-area: visite; font-size: 0.8125rem; }
    .cli-carte { grid-area: carte; flex-direction: column; align-items: flex-end; gap: 4px; }
    .cli-depense { display: none; }
    .cli-tri { margin-left: 0; }
    .cli-filtres-zone { display: none; }

    .cli-fiche {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        z-index: 1100;
        max-height: 88dvh; overflow-y: auto;
        border: 0; border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 32px -12px rgb(23 21 15 / 0.22);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .cli-voile { display: block; position: fixed; inset: 0; z-index: 1090; background: rgb(23 21 15 / 0.32); }
    .cli-voile[hidden] { display: none; }
}

/* ── Faire revenir : radar, campagnes, relances automatiques ─────────────── */

#tab-promos.tab-content { max-width: 1400px; }

.esp-revenir {
    display: flex; flex-direction: column; gap: 20px;
    font: 400 0.9375rem/1.55 var(--police); color: var(--encre);
}
.esp-revenir :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.rev-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.rev-sousnav { display: flex; gap: 24px; border-bottom: 1px solid var(--bordure); overflow-x: auto; scrollbar-width: none; }
.rev-sousnav::-webkit-scrollbar { display: none; }
.rev-sousonglet {
    padding: 6px 0 10px !important;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--encre-2); font-weight: 500; white-space: nowrap;
}
.rev-sousonglet[aria-pressed="true"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--encre); }

.rev-vue { display: flex; flex-direction: column; gap: 16px; }
.rev-repere { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.rev-note { font-size: 0.8125rem; color: var(--encre-3); text-wrap: pretty; }

.rev-groupes { display: flex; gap: 8px; flex-wrap: wrap; }
.rev-groupe {
    height: 36px; padding: 0 14px !important;
    border-radius: 999px; border: 1px solid var(--bordure-forte) !important;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--encre-2); font-size: 0.8125rem; font-weight: 550;
}
.rev-groupe[aria-pressed="true"] { background: var(--encre); border-color: var(--encre) !important; color: var(--fond); }
.rev-groupe-nombre { opacity: 0.7; font-variant-numeric: tabular-nums; }

.rev-liste { border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rev-ligne { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--bordure); }
.rev-liste > :last-child { border-bottom: 0; }
.rev-ligne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rev-ligne-nom { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rev-ligne-raison { font-size: 0.8125rem; color: var(--encre-2); text-wrap: pretty; }
.rev-mention {
    height: 22px; padding: 0 7px;
    border-radius: 999px; background: var(--surface-2); color: var(--encre-2);
    font-size: 0.75rem; font-weight: 550; display: inline-flex; align-items: center;
}
.rev-valeur { font-size: 0.8125rem; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.rev-anciens { border: 1px dashed var(--bordure-forte); border-radius: 12px; padding: 14px 20px; }
.rev-anciens summary { display: flex; flex-direction: column; cursor: pointer; }
.rev-anciens[open] summary { margin-bottom: 12px; }
.rev-anciens .rev-liste { border-radius: 12px; }

/* ── Faire revenir sur ordinateur (maquette 3) ────────────────────────────
   La liste à gauche ; à droite, la relance automatique et les résultats du
   mois. Les anciens clients s'ouvrent par un chevron. */
.rev-radar-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.rev-radar-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rev-colonne { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.rev-carte-cote { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-1); }
.rev-carte-cote-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rev-carte-cote-titre { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.rev-carte-cote-texte { margin: 0; font-size: 0.8125rem; color: var(--encre-2); text-wrap: pretty; }
.rev-carte-cote-etat { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--encre-3); }
.rev-carte-cote-etat.actif { color: var(--em-texte); }
.rev-carte-cote-etat.actif::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--em); }
.rev-carte-cote-note { margin: 4px 0 0; font-size: 0.75rem; color: var(--encre-3); text-wrap: pretty; }
.rev-interrupteur { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--bordure-forte); cursor: help; }
.rev-interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--surface); box-shadow: var(--ombre-1); transition: left 160ms ease; }
.rev-interrupteur.actif { background: var(--em); }
.rev-interrupteur.actif::after { left: 21px; }
.rev-res-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 0.875rem; color: var(--encre-2); }
.rev-res-ligne strong { font-size: 1.25rem; font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.rev-res-total { padding-top: 10px; }
.rev-res-total span { color: var(--encre); font-weight: 550; }
.rev-res-jauge { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rev-res-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--em); }
.rev-pourquoi { position: relative; margin-left: auto; align-self: center; }
.rev-pourquoi-lien { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem !important; color: var(--em-texte) !important; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.rev-pourquoi-bulle {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; margin: 0; padding: 12px 14px;
    border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-2);
    font-size: 0.8125rem; color: var(--encre-2); text-wrap: pretty;
}
.rev-pourquoi-bulle[hidden] { display: none; }
.rev-relancee { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 0.8125rem; font-weight: 600; color: var(--em-texte); white-space: nowrap; }
@media (min-width: 769px) {
    .rev-anciens summary { position: relative; padding-left: 28px; list-style: none; }
    .rev-anciens summary::-webkit-details-marker { display: none; }
    .rev-anciens summary::before {
        content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
        border-right: 2px solid var(--encre-2); border-bottom: 2px solid var(--encre-2);
        transform: rotate(-45deg); transition: transform 160ms ease;
    }
    .rev-anciens[open] summary::before { transform: rotate(45deg); }
}
@media (max-width: 1100px) {
    .rev-radar-grille { grid-template-columns: minmax(0, 1fr); }
    .rev-colonne { position: static; }
}

/* Campagnes */
.rev-campagne { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); }
.rev-campagne.annulee { opacity: 0.6; }
.rev-campagne-haut { display: flex; align-items: flex-start; gap: 12px; }
.rev-campagne-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rev-statut {
    height: 24px; padding: 0 8px; flex: none;
    border-radius: 999px; display: inline-flex; align-items: center;
    font-size: 0.75rem; font-weight: 550;
    background: var(--surface-2); color: var(--encre-2);
}
.rev-statut.envoyee { background: var(--em-doux); color: var(--em-texte); }
.rev-statut.planifiee { background: var(--ambre-doux); color: var(--ambre-texte); }
.rev-statut.annulee { background: var(--surface-2); color: var(--encre-3); }
.rev-resultats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rev-resultat { display: flex; flex-direction: column; }

.rev-encart { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); }
.rev-encart strong { font-weight: 600; }
.rev-encart span { color: var(--encre-2); text-wrap: pretty; }
.rev-encart button { align-self: flex-start; }

/* Composeur */
#rev-composer { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.rev-composer-gauche { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.rev-composer-gauche > .acc-lien { align-self: flex-start; }
.rev-bloc { display: flex; flex-direction: column; gap: 12px; }

.rev-cibles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rev-cible {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px !important; text-align: left;
    border: 1px solid var(--bordure-forte) !important; border-radius: 12px;
    background: var(--surface) !important;
}
.rev-cible.active { border-color: var(--em) !important; box-shadow: 0 0 0 3px var(--anneau); }
.rev-cible strong { font-weight: 550; }
.rev-cible-nombre { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.rev-outils { display: flex; gap: 8px; flex-wrap: wrap; }
.rev-langues { display: flex; gap: 6px; flex-wrap: wrap; }
.rev-langue {
    height: 34px; padding: 0 12px !important;
    border-radius: 999px; border: 1px solid var(--bordure-forte) !important;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--encre-2); font-size: 0.8125rem; font-weight: 550;
}
.rev-langue[aria-pressed="true"] { background: var(--surface-2); color: var(--encre); border-color: var(--bordure-forte) !important; }
.rev-langue-nombre { color: var(--encre-3); font-variant-numeric: tabular-nums; }

.rev-champ { display: flex; flex-direction: column; gap: 6px; }
.rev-champ-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rev-compteur { font-size: 0.75rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.rev-saisie {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--bordure-forte); border-radius: 8px;
    background: var(--surface); color: var(--encre);
    font: inherit; resize: vertical;
}
.rev-saisie:focus { outline: none; border-color: var(--em); box-shadow: 0 0 0 3px var(--anneau); }

.rev-choix { display: flex; gap: 8px; }
.rev-choix-bouton {
    height: 40px; padding: 0 14px !important;
    border-radius: 8px; border: 1px solid var(--bordure-forte) !important;
    background: var(--surface) !important; color: var(--encre-2); font-weight: 550;
}
.rev-choix-bouton[aria-pressed="true"] { border-color: var(--em) !important; color: var(--encre); box-shadow: 0 0 0 3px var(--anneau); }
.rev-dates { display: flex; gap: 8px; }
.rev-validite { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--encre-2); }
.rev-validite select {
    height: 36px; padding: 0 8px;
    border: 1px solid var(--bordure-forte); border-radius: 8px;
    background: var(--surface); color: var(--encre); font: inherit; cursor: pointer;
}

.rev-resume {
    position: sticky; top: 0;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px; border: 1px solid var(--bordure); border-radius: 12px;
    background: var(--surface); box-shadow: var(--ombre-1);
}
.rev-resume-lignes { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; }
.rev-resume-ligne { display: flex; justify-content: space-between; gap: 12px; }
.rev-resume-ligne span { color: var(--encre-2); }
.rev-resume-ligne strong { font-weight: 550; text-align: right; }
.rev-apercu { border-radius: 16px; padding: 16px 12px; background: linear-gradient(170deg, #3B4A44 0%, #1E2724 100%); }
.rev-bulle { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgb(246 243 234 / 0.88); color: #17150F; }
.rev-bulle-logo {
    width: 32px; height: 32px; flex: none;
    border-radius: 8px; background: var(--carte); color: var(--carte-texte);
    display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.rev-bulle-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.35; }
.rev-bulle-haut { display: flex; justify-content: space-between; gap: 8px; }
.rev-bulle-haut strong { font-size: 0.8125rem; font-weight: 600; }
.rev-bulle-haut span { color: #57534A; font-size: 0.75rem; }
.rev-envoyer { height: 48px; justify-content: center; }

/* ── Nouvelle campagne sur ordinateur (maquette 4) ────────────────────────
   Ni onglets ni en-tête : un fil d'Ariane et le titre. À gauche les trois
   questions, à droite le résumé, l'aperçu et le bouton. */
@media (min-width: 769px) {
    #tab-promos:has(#rev-composer:not([hidden])) .rev-entete,
    #tab-promos:has(#rev-composer:not([hidden])) .rev-sousnav { display: none; }
    #rev-composer { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
}
.rev-compo-ordi-entete { display: flex; flex-direction: column; gap: 2px; }
.rev-compo-ordi-entete .acc-titre { margin: 0; }
.rev-fil { align-self: flex-start; font-size: 0.8125rem !important; color: var(--encre-2) !important; }
.rev-fil:hover { color: var(--encre) !important; text-decoration: underline; text-underline-offset: 3px; }
.rev-compo-ordi-titre { margin: 0; font-size: 1.0625rem; font-weight: 600; }

.rev-cartes-public { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rev-carte-public {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px !important; text-align: left;
    border: 1px solid var(--bordure-forte) !important; border-radius: 12px; background: var(--surface) !important;
}
.rev-carte-public:hover { border-color: var(--encre-3) !important; }
.rev-carte-public[aria-pressed="true"] { border-color: var(--em) !important; box-shadow: 0 0 0 3px var(--anneau); }
.rev-carte-public-nom { font-weight: 550; padding-right: 26px; }
.rev-carte-public-nombre { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rev-carte-public-aide { font-size: 0.8125rem; color: var(--encre-2); }
.rev-carte-public-coche {
    position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; background: var(--em); color: var(--sur-em);
}
.rev-affiner-lien { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem !important; font-weight: 550; color: var(--em-texte) !important; text-decoration: underline; text-underline-offset: 3px; }
.rev-affiner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 14px 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface-2); }
.rev-affiner-champ { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 550; color: var(--encre-2); }
.rev-affiner-champ select { height: 36px; min-width: 180px; padding: 0 8px; border: 1px solid var(--bordure-forte); border-radius: 8px; background: var(--surface); color: var(--encre); font: inherit; font-weight: 400; }
.rev-affiner-case { display: flex; align-items: center; gap: 8px; height: 36px; font-size: 0.875rem; cursor: pointer; }
.rev-affiner-case input { width: 16px; height: 16px; margin: 0; accent-color: var(--em); }
.rev-affiner-note { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--encre-3); }

.rev-outils-ordi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-proposer {
    height: 34px; padding: 0 12px !important; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
    background: var(--em-doux) !important; color: var(--em-texte) !important; font-size: 0.8125rem; font-weight: 550;
}
.rev-outils-sep { width: 1px; height: 20px; background: var(--bordure); }
.rev-ton {
    height: 34px; padding: 0 12px !important; border-radius: 999px; border: 1px solid var(--bordure-forte) !important;
    color: var(--encre-2); font-size: 0.8125rem; font-weight: 550;
}
.rev-ton[aria-pressed="true"] { background: var(--encre) !important; border-color: var(--encre) !important; color: var(--fond); }
.rev-proposer:disabled, .rev-ton:disabled { opacity: 0.6; cursor: progress; }

.rev-editeur { border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rev-editeur-onglets { display: flex; gap: 4px; padding: 6px 6px 0; border-bottom: 1px solid var(--bordure); background: var(--surface-2); }
.rev-editeur-onglet {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px !important; margin-bottom: -1px;
    border: 1px solid transparent !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0;
    font-size: 0.8125rem; font-weight: 550; color: var(--encre-2);
}
.rev-editeur-onglet[aria-pressed="true"] { background: var(--surface) !important; border-color: var(--bordure) !important; color: var(--encre); font-weight: 600; }
.rev-editeur-nombre { color: var(--encre-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.rev-a-relire { height: 20px; background: var(--attention-doux); color: var(--attention); }
.rev-editeur-champs { display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.rev-quand-ligne { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); }
.rev-quand-icone { display: flex; color: var(--encre-2); }
.rev-quand-texte { flex: 1; }
.rev-quand-modifier { font-size: 0.8125rem !important; font-weight: 550; color: var(--em-texte) !important; text-decoration: underline; text-underline-offset: 3px; }
.rev-quand-edition { display: flex; flex-direction: column; gap: 12px; }

.rev-resume-colonne { display: flex; flex-direction: column; gap: 14px; padding-top: 44px; position: sticky; top: 0; }
.rev-resume-colonne .rev-resume { position: static; }
.rev-resume-titre { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.rev-apercu-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 550; color: var(--encre-2); }
.rev-appareils { display: flex; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.rev-appareil { padding: 4px 10px !important; border-radius: 6px; font-size: 0.75rem; font-weight: 550; color: var(--encre-2); }
.rev-appareil[aria-pressed="true"] { background: var(--surface) !important; color: var(--encre); box-shadow: var(--ombre-1); }
.rev-ecran { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 196px; padding: 18px 14px; border-radius: 16px; }
.rev-ecran-iphone { background: linear-gradient(170deg, #3B4A44 0%, #1E2724 100%); }
.rev-ecran-android { justify-content: flex-start; padding-top: 22px; background: linear-gradient(180deg, #2A2D31 0%, #17191C 100%); }
.rev-ecran-heure { font-size: 2.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: #F6F3EA; font-variant-numeric: tabular-nums; }
.rev-ecran-bulle { width: 100%; display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgb(246 243 234 / 0.84); color: #17150F; }
.rev-ecran-android .rev-ecran-bulle { border-radius: 20px; background: #F1F1F3; }
.rev-ecran-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--carte); color: var(--carte-texte); font-weight: 600; }
.rev-ecran-android .rev-ecran-logo { border-radius: 999px; }
.rev-ecran-logo img { width: 100%; height: 100%; object-fit: cover; }
.rev-ecran-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.35; }
.rev-ecran-haut { display: flex; justify-content: space-between; gap: 8px; }
.rev-ecran-haut strong { font-weight: 600; }
.rev-ecran-haut span { color: #57534A; font-size: 0.75rem; }
.rev-ecran-titre { font-weight: 600; }
.rev-ecran-message { overflow-wrap: anywhere; }
.rev-test {
    height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--bordure-forte) !important; border-radius: 8px; font-size: 0.8125rem; font-weight: 550;
}
.rev-test:hover { background: var(--surface-2) !important; }
.rev-alerte-relire { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--attention-doux); color: var(--attention); }
.rev-alerte-relire span { font-size: 0.8125rem; color: var(--encre); text-wrap: pretty; }
.rev-alerte-relire svg { flex: none; margin-top: 1px; }
.rev-envoyer-grand { height: 56px; border-radius: 12px; font-size: 1.0625rem; }

/* Relances automatiques */
.rev-auto-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rev-auto-carte { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); }
.rev-auto-haut { display: flex; align-items: center; gap: 12px; }
.rev-auto-haut strong { flex: 1; min-width: 0; font-weight: 600; }

@media (max-width: 900px) {
    #rev-composer { grid-template-columns: minmax(0, 1fr); }
    .rev-cibles { grid-template-columns: minmax(0, 1fr); }
    .rev-auto-liste { grid-template-columns: minmax(0, 1fr); }
    .rev-resume { position: static; }
}

@media (max-width: 768px) {
    .rev-ligne { flex-wrap: wrap; padding: 12px 16px; }
    .rev-ligne-corps { flex: 1 1 60%; }
    .rev-valeur { order: 4; flex: 1 1 100%; }
    .rev-resultats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rev-entete .acc-btn { width: 100%; justify-content: center; }
}

/* ── Revenus ─────────────────────────────────────────────────────────────── */

#tab-finances.tab-content { max-width: 1400px; }

.esp-revenus {
    display: flex; flex-direction: column; gap: 18px;
    font: 400 0.9375rem/1.55 var(--police); color: var(--encre);
}
.esp-revenus :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }

.rvn-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rvn-periodes { display: flex; gap: 6px; flex-wrap: wrap; }
.rvn-periode {
    height: 32px; padding: 0 12px !important;
    border-radius: 999px; border: 1px solid var(--bordure-forte) !important;
    color: var(--encre-2); font-size: 0.8125rem; font-weight: 550;
}
.rvn-periode[aria-pressed="true"] { background: var(--encre); border-color: var(--encre) !important; color: var(--fond); }

.rvn-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rvn-chiffre {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 20px !important; text-align: left;
    border-right: 1px solid var(--bordure);
}
.rvn-chiffre:last-child { border-right: 0; }
.rvn-chiffre.actif { box-shadow: inset 0 -2px 0 var(--em); }
.rvn-chiffre:disabled { cursor: default; }
.rvn-chiffre-libelle { font-size: 0.8125rem; color: var(--encre-2); }
.rvn-chiffre-ligne { display: flex; align-items: center; gap: 8px; }
.rvn-chiffre-valeur { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rvn-squelette { height: 68px; border-right: 1px solid var(--bordure); }

.rvn-carte { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); }
.rvn-carte-entete { display: flex; flex-direction: column; }
.rvn-graphique-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Une phrase, pas un nom de section : elle raconte le graphique. Elle garde
   donc sa taille de texte, sinon elle se met à concurrencer les vrais titres. */
.rvn-phrase { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.rvn-legende { display: flex; gap: 16px; flex-wrap: wrap; }
.rvn-legende-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--encre-2); }
.rvn-trait { width: 18px; height: 2px; border-radius: 2px; background: var(--em); }
.rvn-trait.ref { height: 0; background: none; border-top: 2px dashed var(--encre-3); }

.rvn-svg-cadre { position: relative; touch-action: pan-y; }
.rvn-svg { display: block; width: 100%; height: auto; }
.rvn-grille { stroke: var(--bordure); stroke-width: 1; }
.rvn-axe { stroke: var(--bordure-forte); stroke-width: 1; }
.rvn-echelle, .rvn-date { fill: var(--encre-3); font-size: 12px; font-family: var(--police); }
.rvn-ligne { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rvn-ligne.jour { stroke: var(--em); stroke-width: 2; }
.rvn-ligne.ref { stroke: var(--encre-3); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.7; }
.rvn-curseur { stroke: var(--encre-2); stroke-width: 1; opacity: 0.4; }
.rvn-point { fill: var(--em); stroke: var(--surface); stroke-width: 2; }
.rvn-bulle-graph {
    position: absolute; top: 0;
    display: flex; flex-direction: column;
    min-width: 150px; padding: 8px 10px;
    border: 1px solid var(--bordure); border-radius: 8px;
    background: var(--surface); box-shadow: var(--ombre-2);
    font-size: 0.8125rem; pointer-events: none;
}
.rvn-bulle-graph strong { font-weight: 600; margin-bottom: 4px; }
.rvn-bulle-ref { color: var(--encre-2); }
/* Maquette « Revenus » : bulle à puces, bascule euros / passages, repère
   « Comparé aux… » à gauche des périodes. */
.rvn-bulle-graph { min-width: 170px; gap: 3px; padding: 10px 12px; }
.rvn-bulle-ligne { display: flex; align-items: center; gap: 8px; color: var(--encre-2); }
.rvn-bulle-ligne i { width: 8px; height: 8px; border-radius: 999px; background: var(--em); flex: none; }
.rvn-bulle-ligne.ref i { background: var(--encre-3); }
.rvn-bulle-ligne b { margin-left: auto; color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.rvn-mesures { display: flex; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.rvn-mesure { padding: 4px 10px !important; border-radius: 6px; font-size: 0.75rem; font-weight: 550; color: var(--encre-2); }
.rvn-mesure[aria-pressed="true"] { background: var(--surface) !important; color: var(--encre); box-shadow: var(--ombre-1); }
.rvn-legende { align-items: center; }
.rvn-compare { align-self: center; margin-right: 6px; font-size: 0.8125rem; color: var(--encre-2); }
.rvn-lien-clients { align-self: flex-start; padding: 0 !important; color: var(--em-texte) !important; text-decoration: underline; text-underline-offset: 3px; }
.rvn-ages-vide { display: block; padding: 20px 0; }

.rvn-bas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rvn-barres { display: grid; grid-template-columns: 84px minmax(0, 1fr) 72px; gap: 8px 10px; align-items: center; font-size: 0.8125rem; }
.rvn-piste { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rvn-piste span { display: block; height: 100%; border-radius: 4px; background: var(--em); }
.rvn-barre-valeur { text-align: right; font-variant-numeric: tabular-nums; }

.rvn-client { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; }
.rvn-client .cli-avatar { width: 28px; height: 28px; font-size: 0.6875rem; }
.rvn-client-nom { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvn-client-total { font-variant-numeric: tabular-nums; }

.rvn-ages { display: flex; align-items: flex-end; gap: 14px; height: 140px; padding: 0 4px; }
.rvn-age { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.rvn-age-barre { width: 100%; border-radius: 4px 4px 0 0; background: var(--em); }
.rvn-age-libelle { font-size: 0.75rem; color: var(--encre-3); white-space: nowrap; }
.rvn-age-nombre { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rvn-ages.floutees { filter: blur(4px); opacity: 0.45; height: 110px; }
.rvn-encart { border: 0; padding: 0; background: none; }

@media (max-width: 1100px) {
    .rvn-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rvn-chiffre:nth-child(2n) { border-right: 0; }
    .rvn-chiffre:nth-child(-n+2) { border-bottom: 1px solid var(--bordure); }
    .rvn-bas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .rvn-chiffres { grid-template-columns: minmax(0, 1fr); }
    .rvn-chiffre { border-right: 0; border-bottom: 1px solid var(--bordure); flex-direction: row; align-items: center; justify-content: space-between; }
    .rvn-chiffre:last-child { border-bottom: 0; }
    .rvn-chiffre-valeur { font-size: 1.0625rem; }
    .rvn-bas { grid-template-columns: minmax(0, 1fr); }
    .rvn-echelle, .rvn-date { font-size: 16px; }
    .rvn-periodes { width: 100%; }
}

/* ══ Réglages ════════════════════════════════════════════════════════════════
   Six vues sous une même sous-navigation : votre carte (avec l'aperçu wallet),
   votre programme, équipe, langue, documents, abonnement. */

#tab-parametres.tab-content { max-width: 1400px; }

.esp-reglages {
    display: flex; flex-direction: column; gap: 20px;
    font: 400 0.9375rem/1.55 var(--police); color: var(--encre);
}
.esp-reglages :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
/* Les remises à zéro des boutons (ci-dessus et dans .esp-revenir) effaçaient
   la couleur ET le soulignement des sous-onglets : toutes les sous-catégories
   se ressemblaient, on ne voyait plus où l'on était. */
.esp :where(.esp-reglages, .esp-revenir) .rev-sousonglet {
    color: var(--encre-2); font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.esp :where(.esp-reglages, .esp-revenir) .rev-sousonglet:hover { color: var(--encre); }
.esp :where(.esp-reglages, .esp-revenir) .rev-sousonglet[aria-pressed="true"] {
    color: var(--encre); font-weight: 600; border-bottom-color: var(--encre);
}

.reg-vue { display: flex; flex-direction: column; gap: 20px; }

.reg-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.reg-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.reg-champ { display: flex; flex-direction: column; gap: 8px; }

.reg-fichier {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface);
}
.reg-fichier-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.reg-fichier-texte span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-fichier label.acc-btn { flex-shrink: 0; cursor: pointer; }

.reg-logo-apercu {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    border: 1px solid var(--bordure); background: var(--surface-2) center / cover no-repeat;
}
.reg-logo-apercu.reg-logo-vide { background-image: none; }

.reg-couleurs { display: flex; gap: 10px; flex-wrap: wrap; }
.reg-pastille {
    width: 32px; height: 32px; border-radius: 999px; background: var(--pastille);
    border: 1px solid rgb(23 21 15 / 0.14) !important; position: relative;
}
.reg-pastille-active { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--encre); }
.reg-pastille-perso {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: conic-gradient(#e2725b, #c4952a, #2e7d5b, #5ab4d1, #7a5cc0, #e2725b);
}
.reg-pastille-perso input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Roue arc-en-ciel tant qu'on n'a rien choisi ; la couleur elle-même ensuite. */
.reg-pastille-perso.reg-pastille-active { background: var(--pastille); }

.reg-alerte { color: var(--attention); }

.reg-apercu { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.reg-apercu .rev-sousonglet { padding: 4px 0 8px !important; }
.reg-bascule { display: flex; gap: 20px; border-bottom: 1px solid var(--bordure); }
.reg-carte-apercu {
    border: 1px solid var(--bordure); border-radius: 16px; background: var(--surface-2);
    padding: 12px; min-height: 180px; display: flex; align-items: center; justify-content: center;
}
.reg-carte-apercu img { width: 100%; border-radius: 12px; display: block; }
.reg-apercu-attente {
    width: 100%; height: 160px; border-radius: 12px;
    background: linear-gradient(90deg, var(--surface) 25%, var(--bordure) 50%, var(--surface) 75%) 0 / 300% 100%;
    animation: reg-scintille 1.4s ease-in-out infinite;
}
@keyframes reg-scintille { to { background-position: -300% 0; } }

.reg-barre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.reg-barre > .fic-aide { margin-right: auto; }

/* ── Votre carte sur ordinateur (maquette 6) ──────────────────────────────
   Couleurs tirées du logo, tampons Ambre / Couleur de la carte, photo en zone
   de dépôt, grand aperçu du passe, barre d'enregistrement collée en bas. */
.reg-ordi { display: none; }
@media (min-width: 769px) {
    .reg-ordi { display: revert; }
    .reg-tel, #reg-tampons { display: none !important; }
    #reg-carte .reg-colonnes { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 32px; }
    #reg-carte .reg-form { gap: 26px; }
    #reg-carte .reg-champ > .fic-aide { margin-top: -6px; }
    #reg-carte .reg-logo-apercu { width: 56px; height: 56px; }
    #reg-logo-nom { color: var(--encre); font-weight: 600; font-size: 0.9375rem; }
    .reg-autre-couleur {
        position: relative; height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
        border: 1px dashed var(--bordure-forte); border-radius: 999px; font-size: 0.8125rem; font-weight: 550; cursor: pointer;
    }
    .reg-autre-couleur:hover { background: var(--surface-2); }
    .reg-autre-couleur input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    #reg-carte .reg-pastille { width: 38px; height: 38px; }
    .reg-lisible { display: flex; align-items: center; gap: 6px; color: var(--em-texte); }
    .reg-tampons-choix { display: flex; gap: 10px; flex-wrap: wrap; }
    .reg-tampons-choix[hidden] { display: none; }
    .reg-tampon-choix {
        height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 8px !important;
        border: 1px solid var(--bordure-forte) !important; border-radius: 999px; font-size: 0.875rem; font-weight: 550;
    }
    .reg-tampon-choix[aria-pressed="true"] { border-color: var(--em) !important; box-shadow: 0 0 0 3px var(--anneau); }
    .reg-tampon-rond { width: 24px; height: 24px; border-radius: 999px; background: var(--pastille); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12); }
    .reg-facultatif { font-weight: 400; color: var(--encre-3); }
    .reg-depot {
        display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px;
        border: 1.5px dashed var(--bordure-forte); border-radius: 12px; background: var(--surface-2); cursor: pointer; text-align: center;
    }
    .reg-depot:hover { border-color: var(--encre-3); }
    .reg-depot-titre { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

    #reg-carte .reg-apercu {
        top: 0; min-height: 640px; padding: 20px 24px 28px; align-items: center; gap: 22px;
        border: 1px solid var(--bordure); border-radius: 16px; background: var(--surface-2);
    }
    .reg-bascules { display: flex; gap: 12px; justify-content: center; }
    #reg-carte .reg-bascule { gap: 0; padding: 3px; border: 0; border-radius: 10px; background: var(--bordure); }
    .reg-bascule-bouton { padding: 6px 12px !important; border-radius: 8px; font-size: 0.8125rem; font-weight: 550; color: var(--encre-2); }
    .reg-bascule-bouton[aria-pressed="true"] { background: var(--surface) !important; color: var(--encre); box-shadow: var(--ombre-1); }
    #reg-carte .reg-carte-apercu { width: 350px; max-width: 100%; min-height: 0; padding: 0; border: 0; background: none; }
    #reg-apercu-legende { max-width: 380px; text-align: center; }

    .reg-passe {
        width: 100%; overflow: hidden; border-radius: 14px; background: var(--fond-passe, var(--fond));
        color: #fff; box-shadow: 0 18px 40px -18px rgb(23 21 15 / 0.45), 0 2px 6px rgb(23 21 15 / 0.08);
    }
    .reg-passe.clair { color: #17150f; }
    .reg-passe-tete { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; }
    .reg-passe-logo { width: 30px; height: 30px; flex: none; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / 0.16); font-weight: 600; }
    .reg-passe-logo img { width: 100%; height: 100%; object-fit: cover; }
    .reg-passe-nom { flex: 1; min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .reg-passe-champ { display: flex; flex-direction: column; padding: 12px 14px 0; line-height: 1.2; }
    .reg-passe-champ small { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
    .reg-passe-champ b { font-size: 1.0625rem; font-weight: 500; }
    .reg-passe-champ.droite { padding: 0; text-align: right; }
    .reg-passe-champ.droite b { font-size: 1.25rem; }
    .reg-passe-bande { display: block; width: 100%; }
    .reg-passe-code { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px auto 18px; padding: 10px 16px 6px; width: 72%; border-radius: 6px; background: #fff; color: #17150f; }
    .reg-passe-barres { display: flex; gap: 1.5px; height: 58px; }
    .reg-passe-barres i { display: block; height: 100%; background: #17150f; }
    .reg-passe-num { font-size: 0.6875rem; }
    .reg-inscription { width: 350px; height: 560px; overflow: hidden; border-radius: 22px; border: 6px solid #17150f; background: #fff; }
    .reg-inscription iframe { width: 390px; height: 622px; border: 0; transform: scale(0.8667); transform-origin: 0 0; pointer-events: none; }

    /* La barre d'enregistrement se pose à la fin de l'écran : flottante, elle
       passait par-dessus les réglages du bas (« Couleur des tampons »). */
    #reg-carte .reg-barre {
        max-width: none; margin-top: 8px; padding: 16px 0 0;
        border-top: 1px solid var(--bordure); background: none;
    }
    #reg-carte .reg-barre > .fic-aide { font-size: 0.9375rem; color: var(--encre-2); }
}

.reg-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }

.reg-lignes { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.reg-lignes > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.reg-lignes dt { font-size: 0.8125rem; color: var(--encre-2); }
.reg-lignes dd { margin: 0; font-weight: 600; text-align: right; }

.reg-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-etiquette {
    padding: 4px 10px; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--bordure); font-size: 0.75rem; font-weight: 550; color: var(--encre-2);
}

.reg-bascule-ligne { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }

/* Réglages : la règle du programme près de l'aperçu, et l'état des messages
   automatiques dans l'onglet Messages. */
.reg-programme-encart { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface-2); }
.reg-programme-encart .reg-lignes { gap: 6px; }
.reg-demander { align-self: flex-start; padding: 0 !important; color: var(--em-texte) !important; font-size: 0.8125rem !important; text-decoration: underline; text-underline-offset: 3px; }
.reg-auto { display: flex; flex-direction: column; }
.reg-auto-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bordure); }
.reg-auto-ligne:first-child { border-top: 0; }
.reg-auto-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--encre-3); }
.reg-auto-etat::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--bordure-forte); }
.reg-auto-etat.actif { color: var(--em-texte); }
.reg-auto-etat.actif::before { background: var(--em); }
.reg-bascule-ligne input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--em); }
.reg-bascule-ligne > span { display: flex; flex-direction: column; gap: 2px; }

.reg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reg-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; }
.reg-liste li::before { font-weight: 700; line-height: 1.5; }
.reg-oui::before { content: "✓"; color: var(--em-texte); }
.reg-non::before { content: "×"; color: var(--encre-3); }
.reg-non { color: var(--encre-2); }
/* Trait entre ce que l'équipe peut faire et ce qu'elle ne peut pas. */
.reg-oui + .reg-non { border-top: 1px solid var(--bordure); padding-top: 10px; margin-top: 2px; }

.reg-pin { display: flex; gap: 10px; }
.reg-pin .rev-saisie { width: 120px; letter-spacing: 0.3em; text-align: center; }
.reg-pin .rev-saisie::placeholder { letter-spacing: normal; }
#reg-pin-enregistrer { align-self: flex-start; }

.reg-langues { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; max-width: 760px; }
.reg-langue {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px !important; border: 1px solid var(--bordure) !important; border-radius: 12px;
    background: var(--surface) !important; text-align: left;
}
.reg-langue:hover { background: var(--surface-2) !important; }
.reg-langue-nom { font-weight: 550; }
.reg-langue-code { font-size: 0.75rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.reg-langue-active { border-color: var(--em) !important; box-shadow: 0 0 0 1px var(--em); }
.reg-langue-active .reg-langue-code { color: var(--em-texte); }

.reg-qr { display: flex; justify-content: center; padding: 12px; background: #FFFFFF; border: 1px solid var(--bordure); border-radius: 12px; }
.reg-qr img { width: 180px; height: 180px; display: block; }
.reg-lien { display: flex; gap: 8px; }
.reg-lien .rev-saisie { flex: 1; min-width: 0; font-size: 0.8125rem; }
.reg-documents { display: flex; gap: 10px; flex-wrap: wrap; }
/* Les boutons d'une carte gardent leur largeur naturelle. */
.reg-vue .rvn-carte > .acc-btn { align-self: flex-start; }
#reg-abonnement .rvn-carte { max-width: 560px; }

@media (max-width: 1100px) {
    .reg-colonnes { grid-template-columns: minmax(0, 1fr); }
    .reg-apercu { position: static; max-width: 420px; }
}

@media (max-width: 768px) {
    .reg-form { max-width: none; }
    .reg-barre { flex-direction: column-reverse; align-items: stretch; }
    .reg-barre .acc-btn { width: 100%; justify-content: center; }
    .reg-barre > .fic-aide { margin-right: 0; text-align: center; }
    .reg-pin { flex-direction: column; }
    .reg-pin .rev-saisie { width: 100%; }
    .reg-lien { flex-direction: column; }
    .reg-lien .acc-btn { width: 100%; justify-content: center; }
}

/* ── Compte suspendu ─────────────────────────────────────────────────────────
   Recouvre tout, y compris la caisse. Posé hors de #app-section, il porte donc
   ses propres jetons. Le ton reste calme : le commerçant n'a rien perdu, il a
   un paiement à régler. */

.esp-susp {
    --susp-fond: #FFFFFF;
    --susp-encre: #17150F;
    --susp-encre-2: #57534A;
    --susp-bordure: #E6E2D9;
    --susp-em: #0F7A55;
    --susp-attention: #B4540A;
    --susp-attention-doux: #FCEDE0;
    --susp-voile: rgb(23 21 15 / 0.42);

    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: var(--susp-voile);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font: 400 0.9375rem/1.55 Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--susp-encre);
    animation: esp-susp-apparait 0.3s ease both;
}

@media (prefers-color-scheme: dark) {
    .esp-susp {
        --susp-fond: #16171A;
        --susp-encre: #F3F1EB;
        --susp-encre-2: #B3AFA6;
        --susp-bordure: #2A2C31;
        --susp-em: #2FBF86;
        --susp-attention: #F09A4A;
        --susp-attention-doux: rgb(240 154 74 / 0.14);
        --susp-voile: rgb(0 0 0 / 0.66);
    }
}

@keyframes esp-susp-apparait { from { opacity: 0 } to { opacity: 1 } }
@keyframes esp-susp-monte { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

.esp-susp-carte {
    width: 100%; max-width: 440px;
    background: var(--susp-fond);
    border: 1px solid var(--susp-bordure);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 24px 60px -18px rgb(23 21 15 / 0.42);
    animation: esp-susp-monte 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.esp-susp-cadenas {
    width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--susp-attention-doux); color: var(--susp-attention);
}

.esp-susp-etiquette {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
    background: var(--susp-attention-doux); color: var(--susp-attention);
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}

.esp-susp-titre { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 10px; text-wrap: balance; }
.esp-susp-texte { font-size: 0.9375rem; color: var(--susp-encre-2); margin: 0 0 22px; text-wrap: pretty; }

.esp-susp-principal {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 48px; padding: 0 20px; margin-bottom: 10px;
    border: 0; border-radius: 14px; cursor: pointer;
    background: var(--susp-em); color: #FFFFFF;
    font: inherit; font-size: 0.9375rem; font-weight: 600;
}
.esp-susp-principal:hover { filter: brightness(1.06); }

.esp-susp-aide {
    display: block; margin-bottom: 22px;
    font-size: 0.8125rem; color: var(--susp-encre-2); text-decoration: underline;
}
.esp-susp-aide:hover { color: var(--susp-encre); }

.esp-susp-garanties { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.esp-susp-garanties li { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--susp-encre-2); }
.esp-susp-garanties li > span:first-child { flex: none; display: flex; color: var(--susp-em); }

.esp-susp-sortir {
    border: 0; background: none; cursor: pointer; padding: 6px 12px;
    font: inherit; font-size: 0.8125rem; color: var(--susp-encre-2);
}
.esp-susp-sortir:hover { color: var(--susp-encre); }

@media (prefers-reduced-motion: reduce) {
    .esp-susp, .esp-susp-carte { animation: none; }
}

/* ── Bandeaux ────────────────────────────────────────────────────────────────
   Deux messages en haut du contenu : la bienvenue d'un nouveau commerce, et
   l'état de son abonnement quand quelque chose cloche. Le ton se donne par
   data-ton ; billing.js ne peint plus rien à la main. */

.esp-bandeau {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 18px; margin-bottom: 20px;
    border: 1px solid var(--bordure); border-radius: 16px;
    background: var(--surface-2);
}
.esp-bandeau[hidden] { display: none; }

.esp-bandeau[data-ton="bien"]      { background: var(--em-doux);        border-color: transparent; }
.esp-bandeau[data-ton="attention"] { background: var(--ambre-doux);     border-color: transparent; }
.esp-bandeau[data-ton="souci"]     { background: var(--danger-doux);    border-color: transparent; }

.esp-bandeau-signe { flex: none; display: flex; align-items: center; font-size: 1.25rem; line-height: 1; }
.esp-bandeau[data-ton="bien"]      .esp-bandeau-signe { color: var(--em-texte); }
.esp-bandeau[data-ton="attention"] .esp-bandeau-signe { color: var(--ambre-texte); }
.esp-bandeau[data-ton="souci"]     .esp-bandeau-signe { color: var(--danger); }

.esp-bandeau-texte { flex: 1; min-width: 180px; font-size: 0.875rem; font-weight: 550; color: var(--encre); text-wrap: pretty; }

.esp-bandeau-action {
    flex: none; min-height: 38px; padding: 0 16px;
    border: 0; border-radius: 10px; cursor: pointer;
    background: var(--encre); color: var(--fond);
    font: inherit; font-size: 0.875rem; font-weight: 600;
}
.esp-bandeau-action:hover { filter: brightness(1.15); }
.esp-bandeau[data-ton="souci"] .esp-bandeau-action { background: var(--danger); color: #FFFFFF; }
.esp-bandeau[data-ton="attention"] .esp-bandeau-action { background: var(--ambre-texte); color: #FFFFFF; }

.esp-bandeau-fermer {
    flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: transparent; color: var(--encre-3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.esp-bandeau-fermer:hover { background: rgb(23 21 15 / 0.06); color: var(--encre); }
html[data-theme="dark"] .esp-bandeau-fermer:hover { background: rgb(243 241 235 / 0.10); }

/* ── Dialogues ───────────────────────────────────────────────────────────────
   L'espace confirme et prévient avec SweetAlert2. La bibliothèque arrive avec
   son propre look ; ces règles le remplacent par le nôtre. Les modules ne
   passent plus aucune couleur : ils disent quoi dire, le style se décide ici.

   Le conteneur est ajouté à <body>, donc hors de #app-section.esp : il porte
   ses propres jetons. */

.swal2-container {
    --dlg-surface: #FFFFFF;
    --dlg-surface-2: #F3F1EC;
    --dlg-bordure: #E6E2D9;
    --dlg-bordure-forte: #D3CEC2;
    --dlg-encre: #17150F;
    --dlg-encre-2: #57534A;
    --dlg-em: #0F7A55;
    --dlg-em-survol: #0B6647;
    --dlg-em-doux: #E3F2EB;
    --dlg-ambre: #D39317;
    --dlg-ambre-doux: #FBF0D8;
    --dlg-danger: #C23B2E;
    --dlg-danger-doux: #FBE9E6;
    --dlg-sur-em: #FFFFFF;
    --dlg-voile: rgb(23 21 15 / 0.34);
    --dlg-police: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    background: var(--dlg-voile) !important;
    /* Un voile, pas un brouillard : l'écran derrière reste lisible. */
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

html[data-theme="dark"] .swal2-container {
    --dlg-surface: #16171A;
    --dlg-surface-2: #1D1F23;
    --dlg-bordure: #2A2C31;
    --dlg-bordure-forte: #3A3D43;
    --dlg-encre: #F3F1EB;
    --dlg-encre-2: #B3AFA6;
    --dlg-em: #2FBF86;
    --dlg-em-survol: #47D29B;
    --dlg-em-doux: rgb(47 191 134 / 0.14);
    --dlg-ambre: #F4C467;
    --dlg-ambre-doux: #33260C;
    --dlg-danger: #F0776A;
    --dlg-danger-doux: rgb(240 119 106 / 0.14);
    --dlg-sur-em: #04160E;
    --dlg-voile: rgb(0 0 0 / 0.56);
}

/* Tout est aligné à gauche, comme le reste de l'espace : une boîte centrée au
   milieu de l'écran, mais qui se lit de gauche à droite. */
.swal2-popup {
    width: 100%; max-width: 440px; padding: 24px 24px 20px;
    border-radius: 18px;
    border: 1px solid var(--dlg-bordure);
    background: var(--dlg-surface);
    color: var(--dlg-encre);
    font-family: var(--dlg-police);
    text-align: left;
    box-shadow: 0 24px 60px -18px rgb(23 21 15 / 0.38);
}

.swal2-title {
    padding: 0; margin: 0 0 6px;
    font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3;
    color: var(--dlg-encre); text-align: left; text-wrap: balance;
}

.swal2-html-container {
    margin: 0; padding: 0;
    font-size: 0.9375rem; line-height: 1.55; color: var(--dlg-encre-2);
    text-align: left; text-wrap: pretty;
}

/* ── Le pictogramme ──
   SweetAlert dessine des icônes au trait, calées pour une pastille de 80 px.
   On les remplace par les nôtres : un carré de 38 px posé à gauche, au-dessus
   du titre, avec le même dessin que partout ailleurs. */

/* SweetAlert garde en place les pictogrammes qu'il n'utilise pas, masqués :
   sans ce garde, ils réapparaissaient en carrés noirs. */
.swal2-icon:not([style*="none"]) {
    position: relative;
    width: 38px; height: 38px; min-height: 38px; margin: 0 0 14px;
    border: 0; border-radius: 11px;
    display: grid !important; place-items: center;
}
.swal2-icon > * { display: none !important; }
.swal2-icon:not([style*="none"])::before {
    content: ""; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: var(--dlg-glyphe) center / contain no-repeat;
    mask: var(--dlg-glyphe) center / contain no-repeat;
}
.swal2-icon.swal2-success {
    background: var(--dlg-em-doux); color: var(--dlg-em);
    --dlg-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>');
}
.swal2-icon.swal2-error {
    background: var(--dlg-danger-doux); color: var(--dlg-danger);
    --dlg-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>');
}
.swal2-icon.swal2-warning {
    background: var(--dlg-ambre-doux); color: var(--dlg-ambre);
    --dlg-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.4" stroke-linecap="round"><path d="M12 5.5v8.5M12 18.5h.01"/></svg>');
}
.swal2-icon.swal2-info {
    background: var(--dlg-em-doux); color: var(--dlg-em);
    --dlg-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.4" stroke-linecap="round"><path d="M12 10.5v8M12 6h.01"/></svg>');
}
.swal2-icon.swal2-question {
    background: var(--dlg-surface-2); color: var(--dlg-encre-2);
    --dlg-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.2 9.2a3 3 0 1 1 3.6 3.4c-.7.2-.8.8-.8 1.4v.6"/><path d="M12 18h.01"/></svg>');
}

/* ── Les boutons ──
   À droite, comme dans les formulaires de l'espace : ce qui engage en
   dernier, sous la main, et « Annuler » à sa gauche. */

.swal2-actions {
    margin: 22px 0 0; gap: 10px; flex-wrap: wrap;
    width: 100%; justify-content: flex-end; flex-direction: row-reverse;
}

.swal2-styled { margin: 0; }
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-deny,
.swal2-styled.swal2-cancel {
    min-height: 44px; padding: 0 20px;
    border-radius: 12px; border: 1px solid transparent;
    font-family: var(--dlg-police); font-size: 0.9375rem; font-weight: 600;
    box-shadow: none;
}
.swal2-styled.swal2-confirm { background: var(--dlg-em); color: var(--dlg-sur-em); }
.swal2-styled.swal2-confirm:hover { background: var(--dlg-em-survol); }
.swal2-styled.swal2-cancel {
    background: var(--dlg-surface); color: var(--dlg-encre-2);
    border-color: var(--dlg-bordure-forte);
}
.swal2-styled.swal2-cancel:hover { background: var(--dlg-surface-2); color: var(--dlg-encre); }
.swal2-styled.swal2-deny { background: var(--dlg-danger); color: #FFFFFF; }

/* Supprimer, annuler une campagne : ce qui ne se défait pas est rouge.
   En thème sombre, le rouge s'éclaircit : le texte y passe à l'encre foncée,
   sinon le libellé se perd. */
.swal2-styled.swal2-confirm.swal-destructif { background: var(--dlg-danger); color: #FFFFFF; }
html[data-theme="dark"] .swal2-styled.swal2-confirm.swal-destructif,
html[data-theme="dark"] .swal2-styled.swal2-deny { color: #2A0B07; }
.swal2-styled.swal2-confirm.swal-destructif:hover { filter: brightness(0.94); }

/* Le liseré de focus prend la teinte du bouton : vert pour confirmer, rouge
   pour ce qui ne se défait pas. */
.swal2-styled:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(15 122 85 / 0.32); }
.swal2-styled.swal2-cancel:focus-visible { box-shadow: 0 0 0 3px rgb(23 21 15 / 0.16); }
.swal2-styled.swal-destructif:focus-visible,
.swal2-styled.swal2-deny:focus-visible { box-shadow: 0 0 0 3px rgb(194 59 46 / 0.30); }
html[data-theme="dark"] .swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgb(47 191 134 / 0.36); }
html[data-theme="dark"] .swal2-styled.swal2-cancel:focus-visible { box-shadow: 0 0 0 3px rgb(243 241 235 / 0.20); }
html[data-theme="dark"] .swal2-styled.swal-destructif:focus-visible,
html[data-theme="dark"] .swal2-styled.swal2-deny:focus-visible { box-shadow: 0 0 0 3px rgb(240 119 106 / 0.34); }

/* ── Les champs ── */

.swal2-input, .swal2-select, .swal2-textarea, .swal2-file {
    margin: 0; box-sizing: border-box; width: 100%;
    min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--dlg-bordure-forte); border-radius: 12px;
    background: var(--dlg-surface); color: var(--dlg-encre);
    font-family: var(--dlg-police); font-size: 16px; box-shadow: none;
}
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
    border-color: var(--dlg-em); box-shadow: 0 0 0 3px rgb(15 122 85 / 0.22); outline: none;
}
.swal2-textarea { min-height: 88px; resize: vertical; }
.swal2-checkbox { background: transparent; color: var(--dlg-encre); }
.swal2-label { color: var(--dlg-encre-2); }

.swal2-validation-message {
    margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
    background: var(--dlg-danger-doux); color: var(--dlg-danger);
    font-family: var(--dlg-police); font-size: 0.875rem;
}
.swal2-validation-message::before { display: none; }

.swal2-loader { border-color: var(--dlg-em) transparent var(--dlg-em) transparent; }
.swal2-close { color: var(--dlg-encre-2); box-shadow: none; }
.swal2-close:hover { color: var(--dlg-encre); background: var(--dlg-surface-2); }

/* ── Les petits messages en coin ──
   Ils confirment sans interrompre : pas de voile, pas de pictogramme géant. */

.swal2-container.swal2-backdrop-hide,
.swal2-container:has(.swal2-toast) { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; }

.swal2-popup.swal2-toast {
    max-width: 380px; padding: 14px 16px;
    border-radius: 14px; box-shadow: 0 10px 28px -10px rgb(23 21 15 / 0.32);
    align-items: center;
    /* SweetAlert peint ses propres toasts en blanc : on redit le fond, sinon
       une boîte claire apparaît par-dessus l'espace sombre. */
    background: var(--dlg-surface);
    border: 1px solid var(--dlg-bordure);
    color: var(--dlg-encre);
}
.swal2-popup.swal2-toast .swal2-title { margin: 0; font-size: 0.9375rem; font-weight: 550; text-align: left; }
.swal2-popup.swal2-toast .swal2-icon { width: 26px; height: 26px; margin: 0 12px 0 0; border-width: 2px; }
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: 1rem; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { height: 2px; background: color-mix(in srgb, currentColor 40%, transparent); }

/* Le message en coin reprend la pastille sombre de la caisse : il passe
   au-dessus de l'écran sans le voiler. */
.swal2-popup.swal2-toast {
    background: #17150F; border-color: transparent; color: #FBFAF7;
    box-shadow: 0 14px 32px -12px rgb(23 21 15 / 0.45);
}
html[data-theme="dark"] .swal2-popup.swal2-toast { background: #F3F1EB; color: #17150F; }
.swal2-popup.swal2-toast .swal2-title { color: inherit; }
.swal2-popup.swal2-toast .swal2-icon { width: 24px; height: 24px; min-height: 24px; margin: 0 12px 0 0; border-radius: 999px; }
.swal2-popup.swal2-toast .swal2-icon::before { width: 14px; height: 14px; }
.swal2-popup.swal2-toast .swal2-icon.swal2-success { background: var(--dlg-em); color: #FFFFFF; }
.swal2-popup.swal2-toast .swal2-icon.swal2-error { background: var(--dlg-danger); color: #FFFFFF; }
.swal2-popup.swal2-toast .swal2-icon.swal2-info,
.swal2-popup.swal2-toast .swal2-icon.swal2-question { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }
.swal2-popup.swal2-toast .swal2-icon.swal2-warning { background: var(--dlg-ambre); color: #17150F; }
/* La coche se pose sans rebondir : un souffle, pas un ressort. */
.swal2-toast .swal2-icon:not([style*="none"]) { animation: dlg-pastille 240ms 60ms ease-out both; }
@keyframes dlg-pastille { from { transform: scale(0.88); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── L'entrée et la sortie ──
   SweetAlert arrive en rebond. On le remplace par le geste de la maison :
   la boîte monte de quelques pixels et se pose. */

.swal2-show { animation: dlg-entre 200ms cubic-bezier(.22, 1, .36, 1) both; }
.swal2-hide { animation: dlg-sort 140ms ease-in both; }
.swal2-toast.swal2-show { animation: dlg-toast-entre 300ms cubic-bezier(.32, .72, 0, 1) both; }
.swal2-toast.swal2-hide { animation: dlg-toast-sort 220ms cubic-bezier(.4, 0, 1, 1) both; }
.swal2-container.swal2-backdrop-show { animation: dlg-voile 180ms ease-out both; }

@keyframes dlg-entre { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes dlg-sort  { to { opacity: 0; transform: translateY(6px) scale(0.99); } }
@keyframes dlg-toast-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dlg-toast-sort { to { opacity: 0; transform: translateY(4px); } }
@keyframes dlg-voile { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .swal2-show, .swal2-hide, .swal2-toast.swal2-show, .swal2-toast.swal2-hide,
    .swal2-toast .swal2-icon, .swal2-container.swal2-backdrop-show { animation-duration: 1ms !important; }
}

@media (prefers-reduced-motion: reduce) {
    .swal2-popup, .swal2-icon, .swal2-icon [class^="swal2-success-line"] { animation: none !important; }
}


/* ── Mon commerce (téléphone) ────────────────────────────────────────────────
   La porte du bureau : les deux chiffres du jour d'abord, puis les trois
   endroits où l'on va et d'où l'on revient. */

@media (max-width: 768px) {
    .esp-commerce:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1200; }
}
.esp-commerce-voile { position: absolute; inset: 0; background: rgb(23 21 15 / 0.36); animation: esp-voile-entre 0.2s ease both; }
.esp-commerce-feuille {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); color: var(--encre);
    border-radius: 22px 22px 0 0;
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 40px -16px rgb(23 21 15 / 0.4);
    font: 400 0.9375rem/1.55 var(--police);
    animation: esp-feuille-monte 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.esp-commerce-poignee { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--bordure-forte); margin: 0 auto 16px; }
.esp-commerce-tete { padding: 0 20px 16px; border-bottom: 1px solid var(--bordure); }
.esp-commerce-tete strong { display: block; font-size: var(--t-section); font-weight: 600; letter-spacing: -0.02em; }
.esp-commerce-jour { display: flex; gap: 24px; margin-top: 10px; }
.esp-commerce-jour div { display: flex; flex-direction: column; }
.esp-commerce-jour span { font-size: 0.75rem; color: var(--encre-3); }
.esp-commerce-jour b { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.esp-commerce-entree {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 15px 20px !important; border: 0; border-bottom: 1px solid var(--bordure) !important;
    background: none !important; color: var(--encre);
    font-size: 1rem; font-weight: 550; text-align: left;
}
.esp-commerce-entree svg { color: var(--encre-2); flex: none; }
.esp-commerce-entree:active { background: var(--surface-2) !important; }
.esp-commerce-discret { border-bottom: 0 !important; color: var(--encre-2); font-weight: 400; font-size: 0.9375rem; }
@keyframes esp-voile-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes esp-feuille-monte { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .esp-commerce-voile, .esp-commerce-feuille { animation: none; }
}

/* ── Campagnes, l'écran d'entrée (téléphone) ─────────────────────────────── */

.rev-entree { display: flex; flex-direction: column; gap: 22px; }
.rev-entree-ecrire {
    height: 54px; width: 100%; border: 0; border-radius: 14px;
    background: var(--em) !important; color: var(--sur-em);
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 0.9375rem; font-weight: 600;
}
.rev-suggestion {
    display: grid; grid-template-columns: auto 1fr; gap: 12px;
    padding: 16px; border: 1px solid var(--bordure); border-radius: 16px;
    background: var(--surface); box-shadow: var(--ombre-1);
}
.rev-suggestion-icone {
    width: 36px; height: 36px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--attention-doux); color: var(--attention);
}
.rev-suggestion-texte strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.rev-suggestion-texte span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--encre-2); text-wrap: pretty; }
.rev-suggestion-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.rev-suggestion-relancer {
    flex: 1; height: 44px; border: 0; border-radius: 12px;
    background: var(--encre) !important; color: var(--fond);
    font-size: 0.875rem; font-weight: 600;
}
.rev-suggestion-voir { height: 44px; padding: 0 14px !important; background: none !important; border: 0; color: var(--encre-2); font-size: 0.875rem; font-weight: 550; }
.rev-envoyees { display: flex; flex-direction: column; }
.rev-envoyees .acc-section-titre { margin-bottom: 10px; }
.rev-envoyee {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 0 !important; border: 0; border-top: 1px solid var(--bordure) !important;
    background: none !important; color: var(--encre); text-align: left;
}
.rev-envoyee:first-of-type { border-top: 0 !important; }
.rev-envoyee-texte { flex: 1; min-width: 0; }
.rev-envoyee-texte strong { display: block; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-envoyee-texte span { font-size: 0.75rem; color: var(--encre-3); }
.rev-envoyee-badge { flex: none; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--em-doux); color: var(--em-texte); white-space: nowrap; }
.rev-envoyee-badge.prevue { background: var(--ambre-doux); color: var(--ambre-texte); }
.rev-envoyee-badge.annulee { background: var(--surface-2); color: var(--encre-3); }
.rev-envoyee svg { flex: none; color: var(--bordure-forte); }
.rev-lien-auto {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 14px 0 !important; border: 0; border-top: 1px solid var(--bordure) !important;
    background: none !important; color: var(--encre-2); font-size: 0.875rem; font-weight: 550;
}

/* Un public, une puce : Tous, Réguliers, Nouveaux, Endormis. */
.rev-publics { display: flex; flex-wrap: wrap; gap: 8px; }
.rev-public {
    height: 38px; padding: 0 14px !important;
    border-radius: 999px; border: 1px solid var(--bordure-forte) !important;
    background: var(--surface) !important; color: var(--encre);
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.875rem; font-weight: 550;
}
.rev-public b { font-weight: 700; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.rev-public[aria-pressed="true"] { background: var(--encre) !important; border-color: var(--encre) !important; color: var(--fond); }
.rev-public[aria-pressed="true"] b { color: var(--fond); opacity: 0.7; }

/* L'avertissement de l'écran qui passe un appareil au comptoir. */
.esp-previent {
    margin: 4px 0 0; padding: 12px 14px; border-radius: 12px;
    background: var(--ambre-doux); color: var(--ambre-texte);
    font-size: 0.8125rem; text-wrap: pretty;
}

/* ── Écrire une campagne, sur téléphone (maquette 3) ──────────────────────── */

.rev-compo { display: flex; flex-direction: column; gap: 22px; }
.rev-compo-tete { display: flex; align-items: center; gap: 12px; }
.rev-compo-tete .acc-titre { margin: 0; font-size: 1.5rem; }
.rev-compo-bloc { display: flex; flex-direction: column; gap: 8px; }
.rev-etiquette { font-size: 0.8125rem; font-weight: 600; color: var(--encre-2); }
.rev-compo .rev-saisie { width: 100%; font-size: 1rem; }
.rev-compo .rev-saisie-titre { font-weight: 600; }
.rev-compo-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: var(--encre-3); }
.rev-compo-proposer {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 0 !important; border: 0; background: none !important;
    color: var(--em-texte); font-size: 0.8125rem; font-weight: 600;
}
.rev-compo-quand { display: flex; gap: 8px; }
.rev-compo-quand .rev-choix-bouton { flex: 1; height: 46px; }
.rev-compo-envoyer { width: 100%; height: 54px; justify-content: center; border-radius: 14px; font-size: 0.9375rem; font-weight: 600; margin-top: 4px; }
.rev-compo-note { margin: -10px 0 0; font-size: 0.75rem; color: var(--encre-3); text-align: center; }

/* Lien d’évitement : invisible jusqu’au premier Tab, puis en haut à gauche. */
.lien-saut { position: absolute; left: -9999px; top: 0; }
.lien-saut:focus { left: 16px; top: 16px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: #fff; color: #17150F; font-weight: 600; box-shadow: 0 0 0 3px rgb(15 122 85 / 0.45); }
.lecteur-seul { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }