/* ═══════════════════════════════════════════════════════════════════
   CTRL — Interfaces applicatives
   Tunnel de souscription · espace client · administration
   Repose sur les mêmes jetons que style.css, redéclarés ici pour que ces
   pages n'aient jamais à charger la feuille de la page d'accueil.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --vert-900: #23261A;
    --vert-800: #2F3324;
    --vert-700: #3A3E2E;
    --vert-600: #545A3B;
    --vert-500: #6E7550;
    --vert-400: #8B9270;
    --vert-300: #B6BF98;
    --vert-200: #D8DEBC;
    --vert-100: #E9EDD8;
    --vert-050: #F3F5EA;

    --terre-700: #9E5544;
    --terre-600: #B4614F;
    --terre-500: #C97868;
    --terre-100: #F6E4DE;
    --terre-050: #FBF2EF;

    --creme:   #F5F3EA;
    --creme-2: #FAF9F3;
    --blanc:   #FFFFFF;

    --texte:       #23261A;
    --texte-doux:  #6B6F5C;
    --texte-clair: #71745F;
    --bordure:     #E4E2D6;
    --bordure-forte: #D2D0C0;

    --succes:  #4B7B4B;
    --succes-fond: #EDF4EC;
    --alerte:  #B4442E;
    --alerte-fond: #FBEEEA;
    --info:    #4A6B84;
    --info-fond: #EDF3F7;
    --attente: #A97A22;
    --attente-fond: #FBF3E3;

    --grad-cta: linear-gradient(118deg, #545A3B 0%, #6E7550 42%, #C97868 100%);

    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

    --ombre-1: 0 1px 2px rgba(35,38,26,.05), 0 2px 8px rgba(35,38,26,.04);
    --ombre-2: 0 4px 12px rgba(35,38,26,.06), 0 12px 32px rgba(35,38,26,.07);
    --ombre-3: 0 8px 24px rgba(35,38,26,.09), 0 28px 64px rgba(35,38,26,.10);

    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px;
    --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

    --t-rapide: 160ms cubic-bezier(.4,0,.2,1);
    --t-normal: 240ms cubic-bezier(.4,0,.2,1);
}

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

body {
    margin: 0;
    background: var(--creme);
    color: var(--texte);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Outfit', 'Inter', sans-serif; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 var(--e-4); font-weight: 700; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--vert-600); text-underline-offset: 3px; }
a:hover { color: var(--terre-600); }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 650; color: var(--vert-800); }
img, svg { max-width: 100%; }

:focus-visible { outline: 3px solid var(--terre-500); outline-offset: 2px; border-radius: 6px; }

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

/* ── Marque ────────────────────────────────────────────────────── */
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.marque__mot { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: .16em; color: var(--vert-700); line-height: 1; }
.marque__baseline { display: block; font-size: .55rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-clair); margin-top: 3px; }
.marque--clair .marque__mot { color: #fff; }
.marque--clair .marque__baseline { color: rgba(255,255,255,.55); }
.touche { flex: none; }

/* ── Coque applicative ─────────────────────────────────────────── */
.coque { min-height: 100vh; display: flex; flex-direction: column; }

.barre-appli {
    background: var(--blanc); border-bottom: 1px solid var(--bordure);
    position: sticky; top: 0; z-index: 50;
}
.barre-appli__interieur {
    max-width: 1240px; margin: 0 auto; padding: 0 var(--e-5);
    display: flex; align-items: center; gap: var(--e-5); min-height: 70px;
}
.barre-appli--admin { background: var(--vert-900); border-bottom-color: var(--vert-800); }
.barre-appli--admin .onglet { color: rgba(255,255,255,.66); }
.barre-appli--admin .onglet:hover { color: #fff; background: rgba(255,255,255,.07); }
.barre-appli--admin .onglet.actif { color: #fff; background: rgba(216,222,188,.14); }

.onglets { display: flex; gap: var(--e-1); margin-left: var(--e-6); flex: 1; flex-wrap: wrap; }
.onglet {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; min-height: 42px;
    border-radius: var(--r-sm); text-decoration: none;
    font-size: .94rem; font-weight: 550; color: var(--texte-doux);
    transition: background-color var(--t-rapide), color var(--t-rapide);
}
.onglet:hover { background: var(--vert-050); color: var(--vert-700); }
.onglet.actif { background: var(--vert-050); color: var(--vert-700); font-weight: 650; }
.onglet svg { width: 18px; height: 18px; }
.onglet__pastille {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
    background: var(--terre-500); color: #fff; font-size: .72rem; font-weight: 700;
    display: inline-grid; place-items: center;
}

.barre-appli__profil { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; }
.profil-nom { font-size: .88rem; color: var(--texte-doux); text-align: right; line-height: 1.35; }
.profil-nom strong { display: block; color: var(--vert-800); }
.barre-appli--admin .profil-nom { color: rgba(255,255,255,.6); }
.barre-appli--admin .profil-nom strong { color: #fff; }

.contenu { flex: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: var(--e-7) var(--e-5) var(--e-8); }
.contenu--etroit { max-width: 820px; }
.contenu--tunnel { max-width: 1080px; }

.pied-appli {
    border-top: 1px solid var(--bordure); padding: var(--e-5);
    text-align: center; font-size: .84rem; color: var(--texte-clair);
}
.pied-appli a { color: var(--texte-clair); }

/* ── En-tête de page ───────────────────────────────────────────── */
.entete-page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4); margin-bottom: var(--e-6); }
.entete-page h1 { margin: 0; }
.entete-page p { color: var(--texte-doux); margin: 6px 0 0; }
.entete-page__actions { margin-left: auto; display: flex; gap: var(--e-3); flex-wrap: wrap; }

.fil { font-size: .86rem; color: var(--texte-clair); margin-bottom: var(--e-3); }
.fil a { color: var(--texte-clair); text-decoration: none; }
.fil a:hover { color: var(--vert-600); text-decoration: underline; }

/* ── Cartes ────────────────────────────────────────────────────── */
.bloc {
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-lg);
    padding: var(--e-6); box-shadow: var(--ombre-1);
}
.bloc + .bloc { margin-top: var(--e-5); }
.bloc__entete { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-5); }
.bloc__entete h2, .bloc__entete h3 { margin: 0; }
.bloc__entete .btn { margin-left: auto; }
.bloc--plat { box-shadow: none; }
.bloc--accent { border-color: var(--vert-300); background: var(--vert-050); }

.grille { display: grid; gap: var(--e-5); }
.grille--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grille--tunnel { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: start; }

/* ── Statistiques ──────────────────────────────────────────────── */
.stat {
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-md);
    padding: var(--e-5); box-shadow: var(--ombre-1);
}
.stat__valeur {
    font-family: 'Outfit', sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1.05;
    color: var(--vert-700); font-variant-numeric: tabular-nums; display: block;
}
.stat__libelle { font-size: .84rem; color: var(--texte-clair); margin-top: 5px; display: block; }
.stat--alerte .stat__valeur { color: var(--alerte); }
.stat--succes .stat__valeur { color: var(--succes); }

/* ── Boutons ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 12px 22px;
    font-family: 'Outfit', sans-serif; font-size: .97rem; font-weight: 700; line-height: 1;
    border: 0; border-radius: var(--r-full); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform var(--t-rapide), box-shadow var(--t-rapide), background-color var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.btn:active { transform: scale(.985); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primaire { background: var(--grad-cta); color: #fff; box-shadow: 0 6px 18px rgba(84,90,59,.26); }
.btn--primaire:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(84,90,59,.32); }

.btn--secondaire { background: var(--blanc); color: var(--vert-700); border: 1.5px solid var(--bordure-forte); }
.btn--secondaire:hover { border-color: var(--vert-500); color: var(--vert-700); }

.btn--fantome { background: transparent; color: var(--texte-doux); border: 1.5px solid transparent; }
.btn--fantome:hover { background: var(--vert-050); color: var(--vert-700); }

.btn--danger { background: var(--blanc); color: var(--alerte); border: 1.5px solid rgba(180,68,46,.3); }
.btn--danger:hover { background: var(--alerte); color: #fff; border-color: var(--alerte); }

.btn--large { width: 100%; }
.btn--grand { min-height: 54px; font-size: 1.04rem; padding: 16px 30px; }
.btn--petit { min-height: 38px; padding: 9px 16px; font-size: .87rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── Formulaires ───────────────────────────────────────────────── */
.champ { margin-bottom: var(--e-5); }
.champ:last-child { margin-bottom: 0; }

.champ label, .legende {
    display: block; font-size: .88rem; font-weight: 600; color: var(--vert-800); margin-bottom: 7px;
}
.champ .obligatoire { color: var(--terre-600); }

.champ input[type=text], .champ input[type=email], .champ input[type=tel],
.champ input[type=password], .champ input[type=search], .champ input[type=number],
.champ select, .champ textarea {
    width: 100%; min-height: 50px; padding: 13px 15px;
    font-family: inherit; font-size: 1rem; color: var(--texte);
    background: var(--blanc); border: 1.5px solid var(--bordure-forte); border-radius: var(--r-sm);
    transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.champ select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6F5C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }

.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none; border-color: var(--vert-500); box-shadow: 0 0 0 4px rgba(84,90,59,.12);
}
.champ input::placeholder, .champ textarea::placeholder { color: #A9AB99; }

.champ__aide { display: block; font-size: .82rem; color: var(--texte-clair); margin-top: 6px; }
.champ__erreur { display: block; font-size: .84rem; color: var(--alerte); margin-top: 6px; font-weight: 550; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--alerte); }

.paire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }

/* Cases et boutons radio : la cible cliquable est la carte entière */
.choix { display: grid; gap: var(--e-3); }
.choix__option {
    display: flex; align-items: flex-start; gap: var(--e-3);
    padding: 14px 16px; min-height: 56px;
    background: var(--blanc); border: 1.5px solid var(--bordure-forte); border-radius: var(--r-md);
    cursor: pointer; transition: border-color var(--t-rapide), background-color var(--t-rapide);
}
.choix__option:hover { border-color: var(--vert-400); background: var(--vert-050); }
.choix__option input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--vert-600); flex: none; }
.choix__option strong { display: block; font-size: .95rem; }
.choix__option span { font-size: .85rem; color: var(--texte-clair); }
.choix__option:has(input:checked) { border-color: var(--vert-600); background: var(--vert-050); box-shadow: 0 0 0 3px rgba(84,90,59,.1); }

.case { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--texte-doux); cursor: pointer; }
.case input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--vert-600); flex: none; }

/* ── Messages ──────────────────────────────────────────────────── */
.message {
    display: flex; gap: var(--e-3); align-items: flex-start;
    padding: 14px 18px; border-radius: var(--r-md); margin-bottom: var(--e-5);
    font-size: .94rem; line-height: 1.6; border: 1px solid transparent;
}
.message svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.message p { margin: 0; }
.message--succes { background: var(--succes-fond); color: #2F5A2F; border-color: #C6DEC4; }
.message--erreur { background: var(--alerte-fond); color: #8E3323; border-color: #E8C4BA; }
.message--info   { background: var(--info-fond); color: #33546B; border-color: #C6D8E4; }
.message--alerte { background: var(--attente-fond); color: #7C5A15; border-color: #E8D6AE; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: var(--r-full);
    font-size: .78rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--actif     { background: var(--succes-fond); color: #2F5A2F; }
.badge--suspendu  { background: var(--alerte-fond); color: #8E3323; }
.badge--attente   { background: var(--attente-fond); color: #7C5A15; }
.badge--resilie   { background: #EFEEE6; color: #6B6F5C; }
.badge--neutre    { background: var(--vert-050); color: var(--vert-700); }
.badge--info      { background: var(--info-fond); color: #33546B; }

.badge--basse     { background: #EFEEE6; color: #6B6F5C; }
.badge--normale   { background: var(--info-fond); color: #33546B; }
.badge--haute     { background: var(--attente-fond); color: #7C5A15; }
.badge--critique  { background: var(--alerte-fond); color: #8E3323; }

/* ── Tableaux ──────────────────────────────────────────────────── */
.tableau-enveloppe { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--r-lg); background: var(--blanc); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
thead th {
    text-align: left; padding: 14px 18px; background: var(--vert-050);
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux);
    white-space: nowrap; border-bottom: 1px solid var(--bordure);
}
tbody td { padding: 15px 18px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--t-rapide); }
tbody tr:hover { background: var(--creme-2); }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.ligne-lien { text-decoration: none; color: var(--vert-800); font-weight: 600; }
.ligne-lien:hover { color: var(--terre-600); }
.discret { color: var(--texte-clair); font-size: .86rem; }
.non-lu { position: relative; }
.non-lu::before {
    content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--terre-500);
}

/* ── Vide ──────────────────────────────────────────────────────── */
.vide { text-align: center; padding: var(--e-8) var(--e-5); color: var(--texte-clair); }
.vide__icone {
    width: 64px; height: 64px; margin: 0 auto var(--e-4); border-radius: 20px;
    display: grid; place-items: center; background: var(--vert-050); color: var(--vert-400);
}
.vide__icone svg { width: 30px; height: 30px; }
.vide h3 { color: var(--vert-700); margin-bottom: 8px; }

/* ── Fil de discussion (support) ───────────────────────────────── */
.fil-messages { display: flex; flex-direction: column; gap: var(--e-5); }

.msg { display: flex; gap: var(--e-4); }
.msg__avatar {
    width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .9rem;
    background: var(--vert-200); color: var(--vert-700);
}
.msg--support .msg__avatar { background: var(--grad-cta); color: #fff; }
.msg--interne .msg__avatar { background: var(--attente-fond); color: #7C5A15; }

.msg__bulle {
    flex: 1; background: var(--blanc); border: 1px solid var(--bordure);
    border-radius: 4px var(--r-md) var(--r-md) var(--r-md); padding: var(--e-4) var(--e-5);
}
.msg--support .msg__bulle { background: var(--vert-050); border-color: var(--vert-100); }
.msg--interne .msg__bulle { background: var(--attente-fond); border-color: #E8D6AE; border-style: dashed; }
.msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .84rem; color: var(--texte-clair); }
.msg__meta strong { color: var(--vert-800); font-size: .92rem; }
.msg__corps { font-size: .97rem; line-height: 1.7; overflow-wrap: anywhere; }

.pieces { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.piece {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; min-height: 40px;
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-sm);
    font-size: .85rem; text-decoration: none; color: var(--vert-700);
    transition: border-color var(--t-rapide), background-color var(--t-rapide);
}
.piece:hover { border-color: var(--vert-500); background: var(--vert-050); color: var(--vert-800); }
.piece svg { width: 16px; height: 16px; color: var(--texte-clair); }
.piece span { color: var(--texte-clair); font-size: .78rem; }

/* Zone de dépôt de fichiers */
.depot {
    border: 1.5px dashed var(--bordure-forte); border-radius: var(--r-md);
    padding: var(--e-5); text-align: center; background: var(--creme-2);
    transition: border-color var(--t-rapide), background-color var(--t-rapide);
    cursor: pointer;
}
.depot:hover, .depot.survol { border-color: var(--vert-500); background: var(--vert-050); }
.depot input[type=file] { display: none; }
.depot__icone { color: var(--vert-500); margin-bottom: var(--e-2); }
.depot strong { display: block; font-size: .95rem; }
.depot span { font-size: .82rem; color: var(--texte-clair); }
.depot__liste { margin-top: var(--e-3); font-size: .85rem; color: var(--vert-700); text-align: left; }
.depot__liste li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }

/* ── Récapitulatif du tunnel ───────────────────────────────────── */
.recap {
    position: sticky; top: 92px;
    background: var(--blanc); border: 2px solid var(--vert-600); border-radius: var(--r-xl);
    padding: var(--e-6); box-shadow: var(--ombre-3); overflow: hidden;
}
.recap::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--grad-cta); }
.recap__prix { display: flex; align-items: baseline; gap: 8px; margin: var(--e-4) 0 var(--e-2); }
.recap__montant {
    font-family: 'Outfit', sans-serif; font-size: 3.1rem; font-weight: 800; line-height: .95; letter-spacing: -.03em;
    background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.recap__periode { font-size: 1rem; color: var(--texte-doux); }

.liste-check li { position: relative; padding: 9px 0 9px 30px; font-size: .93rem; border-bottom: 1px solid rgba(35,38,26,.06); }
.liste-check li:last-child { border-bottom: 0; }
.liste-check li::before {
    content: '✓'; position: absolute; left: 0; top: 10px;
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(75,123,75,.14); color: var(--succes); font-size: 11px; font-weight: 700;
}

.rassurance { display: flex; flex-direction: column; gap: 10px; margin-top: var(--e-5); font-size: .85rem; color: var(--texte-doux); }
.rassurance div { display: flex; align-items: center; gap: 9px; }
.rassurance svg { width: 16px; height: 16px; color: var(--vert-500); flex: none; }

/* ── Étapes du tunnel ──────────────────────────────────────────── */
.progression { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); font-size: .86rem; }
.progression__etape { display: inline-flex; align-items: center; gap: 9px; color: var(--texte-clair); }
.progression__etape.actif { color: var(--vert-700); font-weight: 650; }
.progression__etape.fait { color: var(--succes); }
.progression__num {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--vert-050); color: var(--texte-clair); font-size: .8rem; font-weight: 700; flex: none;
}
.progression__etape.actif .progression__num { background: var(--grad-cta); color: #fff; }
.progression__etape.fait .progression__num { background: var(--succes-fond); color: var(--succes); }
.progression__trait { flex: 1; height: 2px; background: var(--bordure); border-radius: 2px; max-width: 60px; }

/* ── Filtres ───────────────────────────────────────────────────── */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); align-items: center; }
.filtres form { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.filtres input[type=search], .filtres select {
    min-height: 42px; padding: 9px 14px; font-size: .92rem; font-family: inherit;
    border: 1.5px solid var(--bordure-forte); border-radius: var(--r-sm); background: var(--blanc);
}
.puce {
    display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
    padding: 8px 15px; border-radius: var(--r-full); text-decoration: none;
    font-size: .87rem; font-weight: 600; color: var(--texte-doux);
    background: var(--blanc); border: 1px solid var(--bordure);
    transition: all var(--t-rapide);
}
.puce:hover { border-color: var(--vert-400); color: var(--vert-700); }
.puce.actif { background: var(--vert-700); border-color: var(--vert-700); color: #fff; }
.puce__nb { font-size: .78rem; opacity: .75; }

/* ── Divers ────────────────────────────────────────────────────── */
.paires { display: grid; gap: var(--e-3); }
.paires div { display: flex; justify-content: space-between; gap: var(--e-4); padding: 9px 0; border-bottom: 1px solid var(--bordure); font-size: .93rem; }
.paires div:last-child { border-bottom: 0; }
.paires dt, .paires span:first-child { color: var(--texte-clair); }
.paires dd, .paires span:last-child { margin: 0; font-weight: 600; text-align: right; }

.separateur { height: 1px; background: var(--bordure); margin: var(--e-5) 0; border: 0; }

.carte-paiement {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 15px; background: var(--vert-050); border-radius: var(--r-sm);
    font-family: 'Outfit', sans-serif; font-weight: 700; letter-spacing: .08em; color: var(--vert-700);
}

/* ── Adaptatif ─────────────────────────────────────────────────── */
@media (max-width: 940px) {
    .grille--tunnel, .grille--3, .grille--4 { grid-template-columns: 1fr; }
    .recap { position: static; }
    .grille--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
    .contenu { padding: var(--e-5) var(--e-4) var(--e-7); }
    .barre-appli__interieur { flex-wrap: wrap; gap: var(--e-3); padding: var(--e-3) var(--e-4); min-height: 0; }
    .onglets { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .barre-appli__profil { margin-left: auto; }
    .profil-nom { display: none; }
    .grille--2, .grille--4, .paire { grid-template-columns: 1fr; }
    .bloc { padding: var(--e-5); }
    .entete-page__actions { margin-left: 0; width: 100%; }
    .entete-page__actions .btn { flex: 1; }
    .msg__avatar { width: 34px; height: 34px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}