/* =====================================================================
   CHOKAR — Back-office (DA de la maquette v7)
   Composants : layout, menu, formulaires, switchs, select personnalisé,
   DataTables, SweetAlert2, CKEditor, cartes, badges, page de connexion.
   Documentation : docs/rapports/ADM-00.md
   ===================================================================== */

:root {
    --papier: #F6F4EE; --blanc: #FFFFFF; --encre: #161A17;
    --sapin: #1F4A37; --sapin-clair: #2F6C51; --mousse: #E6EFE7; --mousse-2: #D3E4D7;
    --bec: #F5C21B; --bec-doux: #FDF0C4; --brume: #8B918A;
    --ligne: rgba(22, 26, 23, .09); --ligne-forte: rgba(22, 26, 23, .16);
    --sang: #C4492E; --sang-doux: #FBEAE5; --ok: #39B36A;
    --texte-2: #4B524C;
    --display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
    --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --r-xl: 30px; --r-l: 24px; --r-m: 18px; --r-s: 14px;
    --ombre: 0 2px 3px rgba(22, 26, 23, .03), 0 10px 24px -12px rgba(22, 26, 23, .16);
    --ombre-flottante: 0 18px 40px -16px rgba(22, 26, 23, .35), 0 2px 6px rgba(22, 26, 23, .05);
    --anneau: 0 0 0 4px rgba(245, 194, 27, .35);
    --barre: 264px; --barre-repliee: 76px; --haut: 68px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 14.5px; line-height: 1.5; color: var(--encre); background: var(--papier); -webkit-font-smoothing: antialiased; }
a { color: var(--sapin-clair); text-decoration: none; }
a:hover { color: var(--sapin); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.03em; margin: 0; }
p { margin: 0 0 12px; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bec); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
svg.icone { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.lien-evitement { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--encre); color: var(--bec); padding: 10px 14px; border-radius: 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lien-evitement:focus { left: 10px; }
@keyframes apparition { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Layout
   ===================================================================== */
.barre-laterale { position: fixed; inset: 0 auto 0 0; width: var(--barre); background: var(--encre); color: var(--papier); display: flex; flex-direction: column; z-index: 50; transition: width .22s ease, transform .28s cubic-bezier(.32, .72, 0, 1); }
.admin-principal { margin-left: var(--barre); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .22s ease; }

.barre-laterale-tete { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 22px 16px 18px 22px; }
.logotype { grid-column: 1; grid-row: 1; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.045em; color: var(--papier); line-height: 1; }
.logotype:hover { color: var(--blanc); }
.logotype-plein span, .logotype-court span { color: var(--bec); }
.logotype-court { display: none; }
.logotype-sous { grid-column: 1; grid-row: 2; margin-top: 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bec); }
.bouton-replier, .bouton-fermer-menu { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #A8B3AA; background: transparent; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.bouton-replier:hover, .bouton-fermer-menu:hover { background: rgba(255, 255, 255, .07); color: var(--papier); }
.bouton-fermer-menu { display: none; }

.menu { flex: 1; overflow-y: auto; padding: 6px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.menu-lien { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin: 2px 0; border-radius: var(--r-s); color: #C9D1CB; font-family: var(--body); font-size: 14px; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.menu-lien:hover { background: rgba(255, 255, 255, .06); color: var(--papier); }
.menu-lien.actif, .menu-groupe.actif > .menu-groupe-bouton { color: var(--bec); }
.menu-lien.actif { background: rgba(245, 194, 27, .1); }
.menu-lien.actif::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bec); }
.menu-libelle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; background: var(--sang); color: #fff; border-radius: 999px; padding: 2px 7px; line-height: 1.4; }
.menu-chevron { transition: transform .2s; opacity: .7; }
.menu-groupe.ouvert .menu-chevron { transform: rotate(180deg); }
.menu-sous-liens { display: none; padding: 2px 0 6px 44px; }
.menu-groupe.ouvert .menu-sous-liens { display: block; }
.menu-sous-lien { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; margin: 1px 0; border-radius: 11px; color: #A8B3AA; font-size: 13.5px; font-weight: 500; }
.menu-sous-lien:hover { color: var(--papier); background: rgba(255, 255, 255, .05); }
.menu-sous-lien.actif { color: var(--bec); background: rgba(245, 194, 27, .1); font-weight: 600; }
.barre-laterale-pied { padding: 16px 22px 22px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #6F786F; border-top: 1px solid rgba(255, 255, 255, .07); }

/* Menu replié (bureau uniquement) */
@media (min-width: 992px) {
    .menu-replie .barre-laterale { width: var(--barre-repliee); }
    .menu-replie .admin-principal { margin-left: var(--barre-repliee); }
    .menu-replie .barre-laterale-tete { grid-template-columns: 1fr; justify-items: center; padding: 22px 10px 18px; row-gap: 12px; }
    .menu-replie .bouton-replier { grid-column: 1; grid-row: 2; }
    .menu-replie .bouton-replier svg { transform: scaleX(-1); }
    .menu-replie .logotype-plein, .menu-replie .logotype-sous, .menu-replie .menu-libelle, .menu-replie .menu-chevron, .menu-replie .menu-sous-liens, .menu-replie .barre-laterale-pied { display: none; }
    .menu-replie .logotype-court { display: inline; }
    .menu-replie .menu-lien { justify-content: center; padding: 12px; }
    .menu-replie .menu-lien .menu-badge { position: absolute; top: 7px; right: 10px; width: 9px; height: 9px; padding: 0; font-size: 0; border: 2px solid var(--encre); }
}

/* ---------- Barre supérieure ---------- */
.barre-haute { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; min-height: var(--haut); padding: 12px 32px; background: rgba(246, 244, 238, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.bouton-burger { display: none; width: 42px; height: 42px; border-radius: 50%; place-items: center; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre); color: var(--encre); cursor: pointer; flex: 0 0 auto; }
.barre-haute-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); }
.fil a { color: var(--brume); }
.fil a:hover { color: var(--sapin); }
.fil [aria-current] { color: var(--encre); }
.fil-separateur { opacity: .45; }
.barre-haute-page { display: none; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.compte { position: relative; flex: 0 0 auto; }
.compte-bouton { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre); cursor: pointer; color: var(--encre); transition: border-color .15s; }
.compte-bouton:hover { border-color: var(--ligne-forte); }
.compte-nom { font-weight: 600; font-size: 13.5px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-chevron { color: var(--brume); transition: transform .2s; }
.compte-bouton[aria-expanded="true"] .compte-chevron { transform: rotate(180deg); }
.compte-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); box-shadow: var(--ombre-flottante); padding: 8px; z-index: 60; animation: apparition .16s ease; }
.compte-menu-tete { padding: 10px 12px 12px; border-bottom: 1px solid var(--ligne); margin-bottom: 6px; }
.compte-menu-tete b { display: block; font-size: 14px; }
.compte-menu-tete span { display: block; font-family: var(--mono); font-size: 11px; color: var(--brume); word-break: break-all; }
.compte-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; color: var(--encre); font-weight: 500; font-size: 14px; }
.compte-menu a:hover, .compte-menu a:focus-visible { background: var(--mousse); color: var(--sapin); outline: none; }
.compte-menu a.danger { color: var(--sang); }
.compte-menu a.danger:hover, .compte-menu a.danger:focus-visible { background: var(--sang-doux); color: var(--sang); }

.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mousse); color: var(--sapin); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; flex: 0 0 auto; }
.avatar.petit { width: 32px; height: 32px; font-size: 12px; }

/* ---------- Contenu ---------- */
.contenu { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 28px 32px 56px; outline: none; }
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 22px; }
.entete-page-textes { min-width: 0; }
.titre-page { font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.sous-titre { margin: 6px 0 0; font-size: 14px; color: var(--brume); font-weight: 500; }
.entete-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.titre-section { font-size: 19px; font-weight: 800; margin: 30px 0 14px; }
.titre-bloc { font-size: 17px; font-weight: 800; margin: 0 0 16px; }
.titre-bloc:not(:first-child) { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.texte-aide { color: var(--brume); font-size: 13px; margin: -8px 0 16px; }

/* ---------- Cartes ---------- */
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-l); box-shadow: var(--ombre); margin: 0 0 20px; min-width: 0; }
.carte-tete { display: flex; align-items: baseline; gap: 10px; padding: 20px 24px 0; }
.carte-tete h2 { font-size: 19px; font-weight: 800; }
.compte-mono { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brume); letter-spacing: .04em; }
.carte-corps { padding: 22px 24px; }
.carte-pied { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--ligne); background: #FCFBF8; border-radius: 0 0 var(--r-l) var(--r-l); }
.carte-formulaire { max-width: 920px; }
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.liste-infos { margin: 0 0 18px; display: flex; flex-direction: column; gap: 14px; }
.liste-infos div { display: flex; flex-direction: column; gap: 2px; }
.liste-infos dt { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }
.liste-infos dd { margin: 0; font-size: 14px; font-weight: 600; }
.cellule-personne { display: inline-flex; align-items: center; gap: 10px; }

/* =====================================================================
   Boutons
   ===================================================================== */
.bouton { display: block; width: 100%; text-align: center; background: var(--encre); color: var(--bec); padding: 15px; border-radius: 15px; border: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .14s, box-shadow .14s; }
.bouton:hover { color: var(--bec); box-shadow: 0 12px 24px -12px rgba(22, 26, 23, .7); }
.bouton:active { transform: scale(.985); }
.bouton-min { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--encre); color: var(--bec); padding: 11px 15px; border-radius: 12px; border: 0; cursor: pointer; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: transform .14s, background .14s, color .14s; }
.bouton-min:hover { color: var(--bec); background: #2A302B; }
.bouton-min:active { transform: scale(.97); }
.bouton-min.creux { background: var(--mousse); color: var(--sapin); }
.bouton-min.creux:hover { background: var(--mousse-2); color: var(--sapin); }
.bouton-min.jaune { background: var(--bec); color: var(--encre); }
.bouton-min.jaune:hover { background: #E9B710; color: var(--encre); }
.bouton-min.danger { background: var(--sang); color: #fff; }
.bouton-min.danger:hover { background: #AE3E26; color: #fff; }
.bouton-icone { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--encre); background: transparent; border: 0; cursor: pointer; transition: background .14s, color .14s; }
.bouton-icone:hover { background: var(--mousse); color: var(--sapin); }
.bouton-icone.sapin { color: var(--sapin-clair); }
.bouton-icone.danger { color: var(--sang); }
.bouton-icone.danger:hover { background: var(--sang-doux); color: var(--sang); }
.bouton-icone.petit { width: 28px; height: 28px; border-radius: 9px; }
.bouton-icone.desactive { opacity: .3; cursor: not-allowed; }
.bouton-icone.desactive:hover { background: transparent; color: var(--encre); }
.lien { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sapin-clair); }
.actions-ligne { display: inline-flex; gap: 2px; justify-content: flex-end; flex-wrap: nowrap; }
.boutons-ordre { display: inline-flex; gap: 2px; }

/* ---------- Badges, macaron ---------- */
.badge-statut { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: var(--mousse); color: var(--sapin); white-space: nowrap; line-height: 1.2; vertical-align: middle; }
.badge-statut::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-statut.sapin { background: var(--mousse); color: var(--sapin); }
.badge-statut.bec { background: var(--bec-doux); color: #7A5C00; }
.badge-statut.sang { background: var(--sang-doux); color: var(--sang); }
.badge-statut.brume { background: #EEEEEA; color: #6B716A; }
.macaron { display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; margin-left: 5px; vertical-align: -3px; }
.macaron.grand { width: 22px; height: 22px; margin-left: 7px; vertical-align: -4px; }
.macaron svg { display: block; }

/* =====================================================================
   Formulaires
   ===================================================================== */
.grille-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.grille-formulaire .pleine-largeur { grid-column: 1 / -1; }
.champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.champ > label, .champ-libelle { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.champ.required > label::after { content: ' *'; color: var(--sang); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="url"], input[type="tel"], textarea {
    width: 100%; min-height: 46px; font-family: var(--body); font-size: 14.5px; color: var(--encre); background: var(--blanc);
    border: 1px solid var(--ligne-forte); border-radius: var(--r-s); padding: 11px 14px; outline: none; -webkit-appearance: none; appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="date"]:hover, textarea:hover { border-color: rgba(22, 26, 23, .28); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus {
    border-color: var(--bec); box-shadow: var(--anneau);
}
input::placeholder, textarea::placeholder { color: #A9AEA8; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:disabled, textarea:disabled { background: #F1F0EB; color: var(--brume); cursor: not-allowed; }
.a-erreur input, .a-erreur textarea, .a-erreur .selecteur-bouton { border-color: var(--sang); }
.a-erreur > label { color: var(--sang); }
.champ-erreur { color: var(--sang); font-size: 12.5px; font-weight: 600; }
.champ-erreur-liste { margin: 0; padding-left: 18px; }
.champ-aide { margin: 0; color: var(--brume); font-size: 12.5px; line-height: 1.4; }
.champ-envoi { margin-top: 6px; }

/* ---------- Switchs (remplacent toutes les cases à cocher) ---------- */
.champ.champ-switch > label, .switch-option > label, .radio-option > label, label.switch {
    position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none;
    font-family: var(--body); font-size: 14.5px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--encre);
}
label > input[type="checkbox"], label > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.switch-piste { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--mousse-2); flex: 0 0 auto; transition: background .18s, box-shadow .18s; }
.switch-pastille { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22, 26, 23, .25); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
label:hover > .switch-piste { background: #C3D8C8; }
input[type="checkbox"]:checked + .switch-piste { background: var(--sapin); }
input[type="checkbox"]:checked + .switch-piste .switch-pastille { transform: translateX(18px); }
input:focus-visible + .switch-piste { box-shadow: 0 0 0 3px var(--bec); }
input:disabled + .switch-piste { opacity: .5; cursor: not-allowed; }
input:disabled + .switch-piste + .switch-texte { color: var(--brume); }
input[type="radio"] + .switch-piste { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--ligne-forte); }
input[type="radio"] + .switch-piste .switch-pastille { top: 4px; left: 4px; width: 10px; height: 10px; background: var(--sapin); box-shadow: none; transform: scale(0); }
input[type="radio"]:checked + .switch-piste { border-color: var(--sapin); background: #fff; }
input[type="radio"]:checked + .switch-piste .switch-pastille { transform: scale(1); }
.switch-texte { line-height: 1.3; }
.groupe-switchs { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.groupe-switchs legend { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 8px; padding: 0; }

/* ---------- Select personnalisé ---------- */
.selecteur { position: relative; width: 100%; min-width: 0; }
.selecteur-natif { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none; margin: 0; padding: 0; border: 0; }
.selecteur-bouton { position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; width: 100%; padding: 7px 12px 7px 14px; background: var(--blanc); border: 1px solid var(--ligne-forte); border-radius: var(--r-s); cursor: pointer; font-size: 14.5px; color: var(--encre); text-align: left; user-select: none; outline: none; transition: border-color .15s, box-shadow .15s; }
.selecteur-bouton:hover { border-color: rgba(22, 26, 23, .28); }
.selecteur.ouvert .selecteur-bouton, .selecteur-bouton:focus-visible { border-color: var(--bec); box-shadow: var(--anneau); }
.selecteur-valeur { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selecteur-valeur.est-vide { color: #A9AEA8; }
.selecteur-fleche { display: grid; color: var(--brume); transition: transform .2s; }
.selecteur.ouvert .selecteur-fleche { transform: rotate(180deg); }
.selecteur.desactive .selecteur-bouton { background: #F1F0EB; color: var(--brume); cursor: not-allowed; }
.selecteur.invalide .selecteur-bouton { border-color: var(--sang); }
.selecteur-multiple .selecteur-valeur { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.selecteur-etiquette { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; background: var(--mousse); color: var(--sapin); border-radius: 8px; padding: 3px 3px 3px 9px; font-size: 13px; font-weight: 600; }
.selecteur-etiquette > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur-etiquette button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 0; background: none; color: var(--sapin); cursor: pointer; }
.selecteur-etiquette button:hover { background: var(--mousse-2); }
.selecteur-panneau { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 200px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 16px; box-shadow: var(--ombre-flottante); padding: 6px; animation: apparition .14s ease; }
.selecteur.vers-le-haut .selecteur-panneau { top: auto; bottom: calc(100% + 6px); }
.selecteur-recherche { position: relative; margin: 2px 2px 6px; color: var(--brume); }
.selecteur-recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.selecteur-recherche input[type="text"] { min-height: 40px; padding: 8px 12px 8px 36px; border-radius: 11px; background: var(--papier); border-color: var(--ligne); font-size: 14px; }
.selecteur-liste { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; scrollbar-width: thin; }
.selecteur-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.selecteur-option.actif { background: var(--mousse); }
.selecteur-option[aria-selected="true"] { font-weight: 600; color: var(--sapin); }
.selecteur-option-texte { flex: 1; min-width: 0; }
.selecteur-coche { display: grid; color: var(--sapin); opacity: 0; }
.selecteur-option[aria-selected="true"] .selecteur-coche { opacity: 1; }
.selecteur-option[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.selecteur-option.est-vide { color: var(--brume); }
.selecteur-option.dans-groupe { padding-left: 20px; }
.selecteur-groupe { padding: 10px 12px 4px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }
.selecteur-aucun { padding: 14px 12px; text-align: center; color: var(--brume); font-size: 13px; }
.selecteur-compact { width: auto; min-width: 86px; }
.selecteur-compact .selecteur-bouton { min-height: 38px; padding: 6px 10px 6px 12px; border-radius: 11px; font-size: 13px; }
.selecteur-compact .selecteur-panneau { min-width: 110px; }

/* ---------- Champ image ---------- */
.champ-image-corps { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.champ-image-apercu { width: 168px; height: 126px; border-radius: 16px; background: var(--papier); border: 1px dashed var(--ligne-forte); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.champ-image-apercu img { width: 100%; height: 100%; object-fit: contain; background: repeating-conic-gradient(#F1F0EB 0 25%, #fff 0 50%) 50% / 16px 16px; transition: opacity .2s, filter .2s; }
.champ-image-apercu.retiree img { opacity: .25; filter: grayscale(1); }
.champ-image-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); }
.champ-image-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: 1; min-width: 200px; }
.champ-image-choisir { position: relative; overflow: hidden; }
.champ-image-choisir input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.champ-image-choisir:focus-within { box-shadow: 0 0 0 3px var(--bec); }
.champ-image-nom { font-family: var(--mono); font-size: 11px; color: var(--sapin); word-break: break-all; }
.champ-image-nom:empty { display: none; }

/* =====================================================================
   Onglets, filtres, statistiques, état vide
   ===================================================================== */
.onglets { display: inline-flex; gap: 4px; padding: 4px; background: var(--mousse); border-radius: 999px; margin: 0 0 16px; max-width: 100%; }
.onglet { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sapin); white-space: nowrap; }
.onglet:hover { color: var(--encre); }
.onglet.actif { background: var(--blanc); box-shadow: var(--ombre); color: var(--encre); }
.onglet-compteur { background: rgba(31, 74, 55, .1); border-radius: 999px; padding: 2px 7px; font-size: 10px; }
.onglet.actif .onglet-compteur { background: var(--encre); color: var(--bec); }

.filtres { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m); box-shadow: var(--ombre); margin: 0 0 16px; }
.filtres summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-m); }
.filtres summary::-webkit-details-marker { display: none; }
.filtres-chevron { margin-left: auto; color: var(--brume); transition: transform .2s; }
.filtres[open] .filtres-chevron { transform: rotate(180deg); }
.filtres-compteur { background: var(--encre); color: var(--bec); border-radius: 999px; padding: 2px 8px; font-size: 10px; }
.filtres-formulaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; padding: 4px 18px 18px; align-items: end; }
.filtres-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.grille-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0 0 20px; }
.carte-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-l); box-shadow: var(--ombre); padding: 18px 20px; color: var(--encre); transition: transform .16s, box-shadow .16s; }
a.carte-stat:hover { transform: translateY(-2px); color: var(--encre); box-shadow: var(--ombre-flottante); }
.carte-stat-tete { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.carte-stat-libelle { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }
.carte-stat-icone { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--mousse); color: var(--sapin); flex: 0 0 auto; }
.carte-stat-valeur { position: relative; margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 38px; line-height: .95; letter-spacing: -.045em; }
.carte-stat-valeur em { font-style: normal; font-size: 17px; margin-left: 5px; color: var(--sapin-clair); }
.carte-stat-sous { position: relative; margin: 0; font-size: 12.5px; color: var(--brume); }
.carte-stat.sapin { background: var(--sapin); border-color: var(--sapin); color: #EAF2EC; }
.carte-stat.sapin .carte-stat-libelle { color: var(--bec); }
.carte-stat.sapin .carte-stat-valeur { color: #fff; }
.carte-stat.sapin .carte-stat-valeur em { color: var(--bec); }
.carte-stat.sapin .carte-stat-sous { color: #BFD3C6; }
.carte-stat.sapin .carte-stat-icone { background: rgba(255, 255, 255, .1); color: var(--bec); }
.carte-stat.alerte { background: var(--bec-doux); border-color: rgba(245, 194, 27, .45); }
.carte-stat.alerte .carte-stat-libelle { color: #7A5C00; }
.carte-stat.alerte .carte-stat-icone { background: var(--bec); color: var(--encre); }
.tendance { font-family: var(--mono); font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 6px; margin-right: 4px; }
.tendance.hausse { background: var(--mousse); color: var(--sapin); }
.tendance.baisse { background: var(--sang-doux); color: var(--sang); }
.tendance.neutre { background: #EEEEEA; color: #6B716A; }
.carte-stat.sapin .tendance.hausse { background: rgba(245, 194, 27, .18); color: var(--bec); }
.fond-courbes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 24px; color: var(--brume); }
.vide-icone { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--mousse); color: var(--sapin); }
.vide p { margin: 0; max-width: 44ch; font-size: 14px; }

/* =====================================================================
   Messages flash
   ===================================================================== */
.flashs { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.flashs:empty { display: none; }
.flash { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 16px; border-radius: 16px; font-size: 14px; font-weight: 500; line-height: 1.45; box-shadow: var(--ombre); animation: apparition .2s ease; transition: opacity .25s, transform .25s; }
.flash-succes { background: var(--sapin); color: #EAF2EC; }
.flash-succes .flash-icone { color: var(--bec); }
.flash-erreur { background: var(--sang); color: #fff; }
.flash-info { background: var(--bec-doux); color: #5E4700; border: 1px solid rgba(245, 194, 27, .45); }
.flash-icone { flex: 0 0 auto; margin-top: 1px; }
.flash-texte { flex: 1; min-width: 0; }
.flash-fermer { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin: -2px 0; border-radius: 8px; border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.flash-fermer:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.flash-info .flash-fermer:hover { background: rgba(122, 92, 0, .1); }
.flash.disparait { opacity: 0; transform: translateY(-6px); }

/* =====================================================================
   DataTables 2 — thème Chokar
   ===================================================================== */
div.dt-container { font-size: 14px; }
div.dt-container div.dt-layout-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; }
div.dt-container div.dt-layout-row.dt-layout-table { display: block; margin: 0; }
div.dt-container div.dt-layout-row:last-child { margin: 16px 0 0; }
div.dt-container div.dt-layout-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0; }
div.dt-container div.dt-layout-cell.dt-layout-full { display: block; }
div.dt-container .dt-length { display: flex; align-items: center; gap: 8px; }
div.dt-container .dt-length label, div.dt-container .dt-info { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
div.dt-container .dt-search label { display: none; }
div.dt-container .dt-search input { min-width: 260px; min-height: 42px; margin: 0; padding: 9px 14px 9px 38px; border: 1px solid var(--ligne-forte); border-radius: 999px; color: var(--encre);
    background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B918A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 14px center / 16px 16px; }
div.dt-container .dt-search input:focus { background-color: var(--blanc); border-color: var(--bec); box-shadow: var(--anneau); }

table.dataTable { width: 100% !important; border-collapse: separate; border-spacing: 0; margin: 0 !important; }
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { padding: 0 12px 12px; border-bottom: 1px solid var(--ligne) !important; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); text-align: left; white-space: nowrap; }
table.dataTable > thead > tr > th.dt-ordering-asc, table.dataTable > thead > tr > th.dt-ordering-desc { color: var(--encre); }
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: .3; }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after { opacity: 1; color: var(--sapin); }
table.dataTable > tbody > tr > td, table.dataTable > tbody > tr > th { padding: 13px 12px; border-top: 1px solid var(--ligne); vertical-align: middle; box-shadow: none !important; }
table.dataTable > tbody > tr:first-child > td { border-top: 0; }
table.dataTable > tbody > tr > td:first-child { border-radius: 12px 0 0 12px; }
table.dataTable > tbody > tr > td:last-child { border-radius: 0 12px 12px 0; }
table.dataTable > tbody > tr:hover > td { background: var(--mousse); }
table.dataTable > tbody > tr:hover + tr > td { border-top-color: transparent; }
table.dataTable > tbody > tr > td.dt-empty { padding: 36px 12px; text-align: center; color: var(--brume); background: none; }
table.dataTable th.dt-right, table.dataTable td.dt-right, .dt-right { text-align: right !important; }
table.dataTable td.mono { white-space: nowrap; }

div.dt-container .dt-paging .dt-paging-button { min-width: 36px; height: 36px; padding: 0 11px; margin: 0 2px; border-radius: 999px !important; border: 1px solid var(--ligne) !important; background: var(--blanc) !important; color: var(--encre) !important; font-family: var(--mono); font-size: 12px; font-weight: 700; box-shadow: none !important; }
div.dt-container .dt-paging .dt-paging-button:hover { background: var(--mousse) !important; border-color: var(--mousse-2) !important; color: var(--sapin) !important; }
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: var(--encre) !important; border-color: var(--encre) !important; color: var(--bec) !important; }
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover { opacity: .35; background: var(--blanc) !important; border-color: var(--ligne) !important; color: var(--brume) !important; cursor: default; }
div.dt-container .dt-paging .ellipsis { padding: 0 6px; color: var(--brume); }

/* Mode responsive : lignes repliées */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control { padding-left: 42px; position: relative; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    content: '+'; position: absolute; left: 12px; top: 50%; margin: -11px 0 0; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%;
    background: var(--mousse); color: var(--sapin); font-family: var(--mono); font-weight: 700; font-size: 14px; line-height: 1; box-shadow: none; transform: none;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before { content: '−'; background: var(--encre); color: var(--bec); border: 0; transform: none; }
table.dataTable > tbody > tr.child > td.child { padding: 4px 12px 12px; background: #FCFBF8; }
table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; margin: 0; padding: 0; list-style: none; }
table.dataTable > tbody > tr.child ul.dtr-details > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
table.dataTable > tbody > tr.child span.dtr-title { min-width: 0; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }

/* =====================================================================
   SweetAlert2 — thème Chokar
   ===================================================================== */
.swal2-container.swal2-backdrop-show { background: rgba(22, 26, 23, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.swal2-popup.alerte { width: min(440px, calc(100vw - 32px)); padding: 30px 26px 24px; border-radius: 26px; background: var(--papier); font-family: var(--body); color: var(--encre); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); }
.alerte .swal2-title { padding: 0; margin: 0; font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.035em; line-height: 1.15; color: var(--encre); }
.alerte .swal2-html-container { margin: 10px 0 0; padding: 0; font-size: 14.5px; line-height: 1.5; color: var(--texte-2); }
.alerte .swal2-icon { margin: 0 auto 18px; border-width: 3px; }
.alerte .swal2-icon.swal2-warning { border-color: var(--sang); color: var(--sang); }
.alerte .swal2-icon.swal2-question { border-color: var(--sapin-clair); color: var(--sapin-clair); }
.alerte .swal2-icon.swal2-info { border-color: var(--bec); color: #B38600; }
.alerte .swal2-icon.swal2-error { border-color: var(--sang); }
.alerte .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--sang); }
.alerte .swal2-icon.swal2-success { border-color: var(--sapin); color: var(--sapin); }
.alerte .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--sapin); }
.alerte .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(31, 74, 55, .3); }
.alerte .swal2-icon.swal2-success [class^="swal2-success-circular-line"], .alerte .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--papier); }
.alerte .swal2-actions { width: 100%; gap: 10px; margin: 24px 0 0; flex-wrap: nowrap; }
.alerte .swal2-actions .bouton-min { flex: 1; margin: 0; padding: 14px 16px; font-size: 11px; }
.alerte .swal2-actions .bouton-min:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bec); }
.alerte.alerte-danger .swal2-actions .bouton-min.danger:focus-visible { box-shadow: 0 0 0 3px rgba(196, 73, 46, .35); }

/* =====================================================================
   CKEditor 5
   ===================================================================== */
:root {
    --ck-border-radius: 14px; --ck-font-face: var(--body); --ck-font-size-base: 14px;
    --ck-color-base-border: rgba(22, 26, 23, .16); --ck-color-focus-border: var(--bec);
    --ck-focus-ring: 1px solid var(--bec); --ck-inner-shadow: 0 0 0 3px rgba(245, 194, 27, .3);
    --ck-color-toolbar-background: #FCFBF8; --ck-color-toolbar-border: rgba(22, 26, 23, .16);
    --ck-color-button-on-background: var(--mousse); --ck-color-button-on-color: var(--sapin);
    --ck-color-button-on-hover-background: var(--mousse-2); --ck-color-button-default-hover-background: var(--mousse);
    --ck-color-link-default: var(--sapin-clair);
}
.ck.ck-editor { width: 100%; }
.ck.ck-editor__editable_inline { min-height: 160px; padding: 0 16px !important; }
.editeur-complet .ck-editor__editable_inline { min-height: 360px; }
.ck-content { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--encre); }
.ck-content h2, .ck-content h3, .ck-content h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; margin: 1.2em 0 .4em; }
.ck-content a { color: var(--sapin-clair); text-decoration: underline; }
.ck-content blockquote { margin: 1em 0; padding: 12px 18px; border-left: 4px solid var(--bec); background: var(--papier); border-radius: 0 12px 12px 0; font-style: normal; }
.editeur-indisponible { border-color: var(--bec) !important; }

/* =====================================================================
   Page de connexion
   ===================================================================== */
.page-connexion { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: var(--sapin); overflow-x: hidden; }
.page-connexion > .fond-courbes { position: fixed; inset: 0; }
.connexion { position: relative; width: 100%; max-width: 440px; }
.connexion-marque { text-align: center; margin: 0 0 22px; color: #fff; }
.connexion-marque .logotype-plein { display: block; font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.05em; }
.connexion-marque .logotype-sous { display: block; margin-top: 8px; }
.connexion-carte { background: var(--papier); border-radius: var(--r-xl); padding: 32px 30px 28px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); }
.connexion-titre { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.connexion-intro { margin: 8px 0 22px; color: var(--brume); font-size: 14px; }
.formulaire-connexion { display: flex; flex-direction: column; gap: 16px; }
.connexion-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.connexion-options .champ-switch > label { font-size: 13.5px; }
.formulaire-connexion .bouton { margin-top: 4px; }
.connexion-retour { text-align: center; margin: 18px 0 0; }
.connexion-pied { text-align: center; margin: 22px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9FB8A8; }
.connexion-pied a { color: var(--bec); }
.connexion-carte .flashs { margin-bottom: 18px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1199px) {
    .colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
    .barre-laterale { width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s; }
    .menu-ouvert .barre-laterale { transform: none; visibility: visible; box-shadow: 20px 0 60px -20px rgba(0, 0, 0, .5); }
    .admin-principal { margin-left: 0; }
    .bouton-replier { display: none; }
    .bouton-fermer-menu { display: grid; }
    .voile { position: fixed; inset: 0; z-index: 45; background: rgba(22, 26, 23, .5); animation: fondu .2s ease; }
    .bouton-burger { display: grid; }
    .fil { display: none; }
    .barre-haute-page { display: block; }
    .barre-haute { padding: 10px 16px; gap: 12px; }
    .contenu { padding: 20px 16px 48px; }
    .grille-formulaire { grid-template-columns: minmax(0, 1fr); }
    .titre-page { font-size: 28px; }
    .compte-nom, .compte-chevron { display: none; }
    .compte-bouton { padding: 3px; }
}
@media (max-width: 575px) {
    .entete-page-actions, .entete-page-actions .bouton-min { width: 100%; }
    .carte-corps { padding: 18px 16px; }
    .carte-tete { padding: 18px 16px 0; }
    .carte-pied { padding: 14px 16px; }
    .carte-pied .bouton-min { flex: 1; }
    div.dt-container div.dt-layout-cell, div.dt-container .dt-search { width: 100%; }
    div.dt-container .dt-search input { min-width: 0; width: 100%; }
    div.dt-container div.dt-layout-row:last-child { justify-content: center; }
    div.dt-container div.dt-layout-row:last-child div.dt-layout-cell { justify-content: center; }
    .grille-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .carte-stat { padding: 14px; }
    .carte-stat-valeur { font-size: 28px; }
    .carte-stat-icone { display: none; }
    .onglets { display: flex; }
    .onglet { flex: 1; justify-content: center; padding: 9px 10px; }
    .connexion-carte { padding: 26px 20px 22px; }
    .connexion-marque .logotype-plein { font-size: 38px; }
    .compte-menu { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; }
}
@media (max-width: 380px) {
    .grille-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Colonnes triées par une valeur numérique (horodatage) mais affichées comme du texte */
table.dataTable th.dt-left, table.dataTable td.dt-left, .dt-left { text-align: left !important; }

/* =====================================================================
   ADM-01 — Utilisateurs, contenus légaux, paramètres du jeu
   ===================================================================== */
.texte-discret { color: var(--brume); font-size: 12.5px; }
.texte-coupe { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avatars : photo, grand format, laurier Local Legend */
.avatar { position: relative; overflow: visible; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.geant { width: 88px; height: 88px; font-size: 30px; }
.avatar.laurier { box-shadow: 0 0 0 3px var(--papier), 0 0 0 6px var(--bec); }
.avatar-laurier { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bec); color: var(--encre); border: 3px solid var(--blanc); }
a.cellule-personne { color: var(--encre); }
a.cellule-personne:hover b { color: var(--sapin-clair); }
.personne-textes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.badge-fondateur { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; background: var(--encre); color: var(--bec); white-space: nowrap; line-height: 1.2; }

/* Score de confiance : < 30 sang, 30–60 bec, > 60 sapin */
.pastille-confiance { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 7px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; margin-right: 4px; }
.pastille-confiance.sang { background: var(--sang-doux); color: var(--sang); }
.pastille-confiance.bec { background: var(--bec-doux); color: #7A5C00; }
.pastille-confiance.sapin { background: var(--mousse); color: var(--sapin); }
.pastille-confiance.grande { min-width: 52px; height: 36px; font-size: 16px; }

/* Onglets à panneaux (boutons) : défilement horizontal si l'écran est étroit */
.onglets-panneaux { display: flex; width: fit-content; overflow-x: auto; scrollbar-width: none; }
.onglets-panneaux::-webkit-scrollbar { display: none; }
.onglets button.onglet { border: 0; background: transparent; cursor: pointer; font: inherit; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.onglets button.onglet.actif { background: var(--blanc); }

/* Bandeaux */
.bandeau { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; margin: 0 0 18px; border-radius: var(--r-m); background: var(--mousse); color: var(--sapin); }
.bandeau > .icone { flex: 0 0 auto; margin-top: 1px; }
.bandeau p { margin: 0; }
.bandeau ul { margin: 8px 0 0; padding-left: 18px; }
.bandeau-sang { background: var(--sang-doux); color: var(--sang); }
.bandeau-sang a { color: var(--sang); font-weight: 700; text-decoration: underline; }
.bandeau-info { background: var(--bec-doux); color: #6B5100; }
.bandeau-carte { margin: 18px 24px 0; }

/* Fiche utilisateur */
.fiche-entete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.fiche-nom { font-size: 26px; font-weight: 800; margin: 2px 0 8px; }
.fiche-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fiche-meta { color: var(--texte-2); font-size: 13.5px; margin: 0 0 14px; }
.fiche-meta-sep { margin: 0 6px; color: var(--brume); }
.fiche-entete-actions { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.liste-infos-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.liste-infos-grille .pleine-largeur { grid-column: 1 / -1; }
.etiquette-crew { display: inline-flex; align-items: baseline; gap: 6px; margin: 2px 6px 2px 0; padding: 4px 10px; border-radius: 10px; background: #F1F0EB; font-size: 13px; }
.etiquette-crew small { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brume); }
.etiquette-crew.principal { background: var(--mousse); }
.colonnes-egales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.totaux-types { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.totaux-types li { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 12px; background: #F4F3EE; font-size: 13px; }
.totaux-types b { font-family: var(--mono); font-size: 12px; }
.montant-positif { color: var(--sapin-clair); font-weight: 700; }
.montant-negatif { color: var(--sang); font-weight: 700; }

/* Formulaires ADM-01 */
.carte-large { max-width: 1100px; }
.champ-bouton-seul { justify-content: flex-end; }
.champ-bouton-seul .bouton-min { align-self: flex-start; margin-top: 23px; }
.champ-groupe { display: flex; flex-direction: column; gap: 14px; }
.valeur-fixe, .version-actuelle { margin: 0; min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: var(--r-s); background: #F1F0EB; color: var(--texte-2); }
.version-actuelle { font-size: 18px; font-weight: 700; color: var(--encre); }
.carte-pied-info { margin-right: auto; align-self: center; color: var(--brume); font-size: 12.5px; }
.cle-parametre { font-size: 11px; color: var(--texte-2); }
.texte-aide-bloc { margin: -6px 0 16px; }
.alerte .swal2-input.alerte-champ { width: 100%; margin: 18px 0 0; min-height: 46px; box-shadow: none; }
.alerte .swal2-input.alerte-champ:focus { border-color: var(--bec); box-shadow: var(--anneau); }
.alerte .swal2-validation-message { margin: 10px 0 0; background: var(--sang-doux); color: var(--sang); border-radius: 12px; font-size: 13px; }

/* Icônes de l'application (missions, trophées) */
.icone-app { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--mousse); color: var(--sapin); flex: 0 0 auto; }
.icone-app.grande { width: 46px; height: 46px; border-radius: 14px; }
.cellule-icone, .cellule-ordre { display: inline-flex; align-items: center; gap: 10px; }
.champ-select-icone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.champ-select-icone > .champ { min-width: 0; }
.champ-select-icone > .icone-app { margin-bottom: 0; }
.badge-famille { display: inline-flex; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: #EEEEEA; color: #4B524C; white-space: nowrap; }
.badge-famille.famille-terrain { background: var(--mousse); color: var(--sapin); }
.badge-famille.famille-regularite { background: var(--bec-doux); color: #7A5C00; }
.badge-famille.famille-impact { background: #E3EDF5; color: #2D5B85; }
.badge-famille.famille-collectif { background: #F3E6DE; color: #8A4B2E; }
.badge-famille.famille-communaute { background: #ECE6F3; color: #5C4585; }
.badge-famille.famille-saison { background: var(--sang-doux); color: var(--sang); }

/* Tableau des paliers d'un trophée */
.tableau-paliers-conteneur { overflow-x: auto; margin: 0 0 12px; }
.tableau-paliers { width: 100%; border-collapse: collapse; min-width: 420px; }
.tableau-paliers th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); padding: 8px 10px; border-bottom: 1px solid var(--ligne); }
.tableau-paliers td { padding: 8px 10px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tableau-paliers td input[type="number"] { min-height: 40px; padding: 8px 12px; max-width: 160px; }
.tableau-paliers tr[data-verrouille] td:first-child::after { content: ' · verrouillé'; color: var(--brume); font-size: 11px; }
.tableau-paliers tr.a-erreur input { border-color: var(--sang); }
.tableau-paliers tr.ligne-erreur td { padding-top: 0; border-bottom-color: transparent; }
.erreur-paliers { margin: 0 0 12px; }
.palier-verrou { color: var(--brume); }

@media (max-width: 1199px) {
    .fiche-entete { grid-template-columns: auto minmax(0, 1fr); }
    .fiche-entete-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .liste-infos-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .fiche-entete { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .avatar.geant { width: 72px; height: 72px; font-size: 24px; }
    .fiche-entete-actions .bouton-min { flex: 1 1 calc(50% - 8px); }
    .liste-infos-grille, .colonnes-egales { grid-template-columns: minmax(0, 1fr); }
    .onglets-panneaux { width: 100%; }
    .champ-bouton-seul .bouton-min { margin-top: 0; }
    .carte-pied-info { width: 100%; }
    .bandeau-carte { margin: 16px 16px 0; }
}

/* =====================================================================
   ADM-02 — Territoire, crews, événements : cartes Leaflet, QR de
   check-in, jauges de défi, bandeaux, impression
   ===================================================================== */
.carte-formulaire-large { max-width: 1120px; }
.grille-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.grille-cartes > .carte { margin: 0 0 20px; }
.carte-mise-en-avant { border-color: rgba(245, 194, 27, .6); box-shadow: 0 0 0 3px rgba(245, 194, 27, .25), var(--ombre); }
.texte-brume { color: var(--brume); }
.texte-aide-bloc { color: var(--brume); font-size: 13.5px; margin: 0 0 16px; }
.valeur-lecture { margin: 0; min-height: 46px; display: flex; align-items: center; font-weight: 600; }
.ligne-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ligne-aide { display: flex; justify-content: space-between; gap: 12px; }

/* Cartes Leaflet */
.champ-carte { gap: 10px; }
.carte-leaflet { position: relative; z-index: 0; width: 100%; height: 480px; border-radius: var(--r-m); border: 1px solid var(--ligne-forte); overflow: hidden; background: var(--mousse); }
.carte-leaflet.grande { height: 70vh; min-height: 440px; }
.a-erreur .carte-leaflet { border-color: var(--sang); box-shadow: 0 0 0 3px var(--sang-doux); }
.carte-indisponible { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--brume); font-size: 14px; }
.carte-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brume); }
.carte-legende > span { display: inline-flex; align-items: center; gap: 7px; }
.carte-legende i { display: inline-block; width: 16px; height: 11px; border-radius: 3px; }
.carte-legende i.rond { width: 13px; height: 13px; border-radius: 50%; }
.legende-edite { background: rgba(245, 194, 27, .35); border: 2px solid var(--sapin); }
.legende-voisin { background: rgba(139, 145, 138, .25); border: 1px solid var(--brume); }
.legende-commune { border: 2px dashed var(--sapin); }
.legende-tenue { background: rgba(31, 74, 55, .45); border: 2px solid var(--sapin); }
.carte-etat { margin-left: auto; color: var(--sapin); }
.carte-etat.modifie { color: #7A5C00; }
.coordonnees-point { margin-left: auto; color: var(--sapin); text-transform: none; letter-spacing: 0; font-size: 11px; }
.leaflet-container { font-family: var(--body); font-size: 13px; }
.leaflet-container a { color: var(--sapin-clair); }
.leaflet-bar { border: 0 !important; box-shadow: var(--ombre-flottante) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a, .leaflet-bar a:hover { width: 34px; height: 34px; line-height: 34px; color: var(--encre); border-bottom-color: var(--ligne); }
.leaflet-bar a:hover { background: var(--mousse); }
.leaflet-draw-actions a { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: var(--encre); color: var(--bec); border-left-color: rgba(255, 255, 255, .15); }
.leaflet-draw-actions a:hover { background: #2A302B; color: var(--bec); }
.leaflet-draw-tooltip { font-family: var(--body); font-size: 12px; background: rgba(22, 26, 23, .85); border-radius: 8px; }
.leaflet-tooltip.infobulle-carte { font-family: var(--body); font-size: 13px; line-height: 1.35; color: var(--encre); background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre-flottante); padding: 8px 12px; }
.infobulle-sous { font-family: var(--mono); font-size: 10px; color: var(--brume); text-transform: uppercase; letter-spacing: .06em; }
.repere-carte { background: none; border: 0; }
.repere-carte span { display: block; width: 26px; height: 26px; margin: 0 0 0 2px; border-radius: 50% 50% 50% 0; background: var(--encre); border: 4px solid var(--bec); transform: rotate(-45deg); box-shadow: 0 6px 14px -4px rgba(22, 26, 23, .6); }

/* Bandeaux d'information */
.bandeau { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; margin: 0 0 18px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.bandeau p { margin: 0; }
.bandeau > svg { flex: 0 0 auto; margin-top: 1px; }
.bandeau-alerte { background: var(--bec-doux); color: #5E4700; border: 1px solid rgba(245, 194, 27, .5); }
.bandeau-info { background: var(--mousse); color: var(--sapin); border: 1px solid var(--mousse-2); }

/* Vignettes, avatars avec photo */
.vignette { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--papier); border: 1px solid var(--ligne); color: var(--brume); vertical-align: middle; }
.vignette.logo { object-fit: contain; background: var(--blanc); padding: 3px; }
.vignette.large { width: 76px; height: 40px; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cellule-personne small { font-weight: 500; }
.date-evenement { white-space: nowrap; font-weight: 600; }

/* Jauge de défi */
.jauge { position: relative; display: block; width: 110px; height: 8px; border-radius: 999px; background: var(--mousse-2); overflow: hidden; }
.jauge.grande { width: 100%; height: 12px; }
.jauge > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--sapin), var(--sapin-clair)); }
.jauge-texte { display: block; margin-top: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--brume); white-space: nowrap; }

/* Code d'invitation, compteur de caractères, petit tableau */
.code-invitation { display: inline-block; font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: .14em; padding: 9px 16px; border-radius: 12px; background: var(--papier); border: 1px dashed var(--ligne-forte); }
.compteur-caracteres { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--brume); }
.compteur-caracteres.depasse { color: var(--sang); font-weight: 700; }
.tableau-simple { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.tableau-simple th { padding: 0 8px 10px; text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); border-bottom: 1px solid var(--ligne); }
.tableau-simple td { padding: 10px 8px; border-top: 1px solid var(--ligne); }
.tableau-simple tr:first-child td { border-top: 0; }

/* Page du QR code de check-in */
.page-qr { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.page-qr .carte-corps { padding: 34px 28px 30px; }
.page-qr-marque { margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.045em; }
.page-qr-marque span { color: var(--bec); }
.page-qr-titre { font-weight: 800; font-size: 38px; line-height: 1.05; letter-spacing: -.04em; margin: 0 0 10px; overflow-wrap: anywhere; }
.page-qr-date { margin: 0 0 18px; font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sapin); }
.page-qr-date span { font-size: 12px; color: var(--brume); letter-spacing: .04em; }
.page-qr-image { display: block; width: min(520px, 100%); height: auto; margin: 0 auto; image-rendering: pixelated; }
.page-qr-consigne { max-width: 30ch; margin: 18px auto 0; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.page-qr-contenu { margin: 16px 0 0; font-family: var(--mono); font-size: 11px; color: var(--brume); word-break: break-all; }

@media (max-width: 991px) {
    .grille-cartes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .carte-leaflet, .carte-leaflet.grande { height: 60vh; min-height: 300px; }
    .page-qr-titre { font-size: 28px; }
    .page-qr .carte-corps { padding: 24px 16px; }
    .coordonnees-point, .carte-etat { margin-left: 0; }
}

/* Impression (page du QR code) */
@media print {
    @page { margin: 12mm; }
    html, body.admin { background: #fff !important; }
    .barre-laterale, .barre-haute, .voile, .flashs, .entete-page, .lien-evitement, .non-imprimable { display: none !important; }
    .admin-principal { margin-left: 0 !important; min-height: 0; }
    .contenu { max-width: none; padding: 0; }
    .carte { border: 0; box-shadow: none; }
    .page-qr { max-width: none; }
    .page-qr .carte-corps { padding: 0; }
    .page-qr-titre { font-size: 30pt; }
    .page-qr-date { font-size: 14pt; }
    .page-qr-image { width: 125mm; }
    .page-qr-consigne { font-size: 17pt; }
}
/* =====================================================================
   ADM-04 — Modération et anti-triche : visuel avant/après, analyse,
   alertes, file de revue, grille de modération, carte des spots,
   visionneuse, motifs, ajustement de pierres
   ===================================================================== */

/* Visuel avant / après (couture jaune de la maquette) */
.visuel-avant-apres { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; border-radius: var(--r-m); overflow: hidden; background: var(--encre); aspect-ratio: 8 / 5; max-width: 100%; }
.visuel-avant-apres.grand { aspect-ratio: 4 / 3; }
.visuel-moitie { position: relative; display: block; min-width: 0; height: 100%; cursor: zoom-in; overflow: hidden; }
.visuel-moitie img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.visuel-moitie:hover img { transform: scale(1.03); }
.visuel-vide { display: grid; place-items: center; align-content: center; gap: 6px; color: #A8B3AA; background: #232823; cursor: default; font-size: 12px; }
.visuel-etiquette { position: absolute; left: 10px; top: 10px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: rgba(22, 26, 23, .78); color: var(--bec); }
.visuel-moitie + .visuel-couture + .visuel-moitie .visuel-etiquette { left: auto; right: 10px; }
.visuel-vide .visuel-etiquette { position: static; }
.visuel-couture { position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; background: var(--bec); box-shadow: 0 0 0 2px rgba(22, 26, 23, .25); pointer-events: none; z-index: 1; }
.visuel-couture::after { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--bec); border: 3px solid var(--encre); }
.liens-originaux { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; }
.liens-originaux .lien { display: inline-flex; align-items: center; gap: 6px; }

/* Page d'analyse */
.analyse-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.analyse-principale, .analyse-laterale { min-width: 0; }
.analyse-laterale > .carte:first-child { position: sticky; top: calc(var(--haut) + 16px); z-index: 2; }
.carte-analyse { height: 380px; }
.legende-avant { background: var(--encre); border: 2px solid var(--bec); }
.legende-apres { background: var(--sapin-clair); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sapin); }
.legende-spot { background: var(--bec); border: 2px solid var(--encre); }
.repere-analyse { background: none; border: 0; }
.repere-analyse span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 6px 14px -4px rgba(22, 26, 23, .55); }
.repere-avant span { background: var(--encre); color: var(--bec); border: 3px solid var(--bec); }
.repere-apres span { background: var(--sapin-clair); color: #fff; border: 3px solid #fff; }
.repere-spot span { background: var(--bec); color: var(--encre); border: 3px solid var(--encre); }
.repere-point span { background: var(--brume); color: #fff; border: 3px solid #fff; }
.leaflet-tooltip.infobulle-distance { font-family: var(--mono); font-weight: 700; color: var(--sang); padding: 4px 8px; }
.carte-alerte-doublon { border-color: rgba(196, 73, 46, .45); box-shadow: 0 0 0 3px var(--sang-doux), var(--ombre); }
.doublon-infos { margin: 14px 0 0; line-height: 1.7; }
.doublon-infos .badge-statut { margin-left: 6px; }
.legende-ramassage { margin: -8px 0 18px; font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--texte-2); }

/* Alertes lisibles */
.alertes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.alertes-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.alertes-liste .alerte-grave { background: var(--sang-doux); color: #7C2A18; }
.alertes-liste .alerte-moyenne { background: var(--bec-doux); color: #5E4700; }
.alertes-liste .alerte-info { background: #EEF1EE; color: var(--texte-2); }
.alerte-icone { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .7); }
.alertes-aucune { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sapin); font-weight: 600; }
.pastille-alertes { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; margin-right: 4px; }
.pastille-alertes.alerte-grave { background: var(--sang); color: #fff; }
.pastille-alertes.alerte-moyenne { background: var(--bec); color: var(--encre); }
.pastille-alertes.alerte-info { background: #E1E5E1; color: var(--texte-2); }

/* Chokar, décision */
.chokar-analyse { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.historique-chokar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 10px; }
.historique-chokar div { display: flex; flex-direction: column; gap: 2px; }
.historique-chokar dt { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }
.historique-chokar dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 700; }
.carte-decision { border-color: rgba(245, 194, 27, .55); }
.boutons-decision, .boutons-revue { display: flex; flex-wrap: wrap; gap: 8px; }
.boutons-decision .bouton-min, .boutons-revue .bouton-min { flex: 1 1 auto; }
.bouton-min.creux.danger-texte { color: var(--sang); }
.bouton-min.creux.danger-texte:hover { background: var(--sang-doux); color: var(--sang); }
.bouton-min.desactive { opacity: .45; cursor: not-allowed; }
.bouton-min kbd, .carte-moderation kbd { font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); line-height: 1.2; }
.bouton-min.creux kbd { background: rgba(31, 74, 55, .08); border-color: rgba(31, 74, 55, .2); }
.lien-file { margin: 14px 0 0; }
.carte-revue { box-shadow: 0 0 0 3px rgba(245, 194, 27, .3), var(--ombre); }
.tableau-conteneur { overflow-x: auto; }
.tableau-technique { margin-top: 0; }
.tableau-technique th[scope="row"] { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); text-align: left; padding: 10px 8px; border-top: 1px solid var(--ligne); white-space: nowrap; }

/* Grille de modération des photos */
.grille-moderation { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.carte-moderation { margin: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; transition: box-shadow .15s, border-color .15s; }
.carte-moderation:focus, .carte-moderation:focus-within { border-color: var(--bec); box-shadow: 0 0 0 4px rgba(245, 194, 27, .45), var(--ombre-flottante); }
.carte-moderation-photo { display: block; aspect-ratio: 4 / 3; background: var(--encre); cursor: zoom-in; }
.carte-moderation-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-moderation-corps { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.carte-moderation-corps p { margin: 0; }
.carte-moderation-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carte-moderation-texte { font-size: 13.5px; color: var(--texte-2); }
.carte-moderation-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.carte-moderation-actions .bouton-min { flex: 1; }

/* Collectes : point « en direct » ; signalements : compteur par cible */
.point-direct { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(57, 179, 106, .25); margin-right: 6px; vertical-align: middle; animation: pulsation 1.6s ease-in-out infinite; }
@keyframes pulsation { 50% { box-shadow: 0 0 0 6px rgba(57, 179, 106, 0); } }
.compteur-cible { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--sang); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.apercu-contenu > * + * { margin-top: 12px; }
.photo-spot { display: block; max-width: 420px; border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; margin: 0 0 12px; }
.photo-spot img { display: block; width: 100%; height: auto; }
.description-crew { color: var(--texte-2); font-size: 14px; }

/* Carte des spots */
.filtres-carte { display: flex; flex-wrap: wrap; gap: 10px 22px; border: 0; padding: 0; margin: 0 0 16px; }
.filtre-statut { font-size: 13.5px; }
.filtre-statut i.rond { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ligne-forte); }
.statut-signale { background: #F5C21B; }
.statut-confirme { background: #2F6C51; }
.statut-pris_en_charge { background: #1F4A37; }
.statut-nettoye { background: #8B918A; }
.statut-expire { background: #C9CCC6; }
.popup-spot { font-family: var(--body); font-size: 13px; line-height: 1.45; }
.popup-spot img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 10px; margin: 0 0 8px; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--ombre-flottante); }

/* Visionneuse plein écran */
dialog.visionneuse { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 20px; border: 0; background: rgba(22, 26, 23, .94); color: var(--papier); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
dialog.visionneuse[open] { display: flex; }
dialog.visionneuse::backdrop { background: rgba(22, 26, 23, .7); }
.visionneuse img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 12px; cursor: zoom-out; }
.visionneuse-legende { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #C9D1CB; text-align: center; }
.visionneuse-original { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bec); }
.visionneuse-fermer { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: var(--papier); font-size: 26px; line-height: 1; cursor: pointer; }
.visionneuse-fermer:hover { background: rgba(255, 255, 255, .2); }

/* SweetAlert2 : choix du motif */
.alerte-motif .motif-explication { margin: 0 0 14px; font-size: 14px; color: var(--texte-2); }
.motifs-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.motif-puce { border: 1px solid var(--ligne-forte); background: var(--blanc); color: var(--encre); border-radius: 999px; padding: 8px 14px; font-family: var(--body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.motif-puce:hover { border-color: var(--sapin); }
.motif-puce[aria-checked="true"] { background: var(--encre); border-color: var(--encre); color: var(--bec); }
.motif-texte { width: 100%; min-height: 84px; margin: 0; font-size: 14px; }

/* Ajustement de pierres */
.apercu-solde { margin: 0; padding: 14px 16px; border-radius: var(--r-s); background: var(--mousse); color: var(--sapin); font-family: var(--mono); font-size: 14px; font-weight: 700; }
.apercu-solde.negatif { background: var(--sang-doux); color: var(--sang); }

@media (max-width: 1199px) {
    .analyse-grille { grid-template-columns: minmax(0, 1fr); }
    .analyse-laterale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
    .analyse-laterale > .carte:first-child { position: static; grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .analyse-laterale { grid-template-columns: minmax(0, 1fr); }
    .visuel-avant-apres, .visuel-avant-apres.grand { aspect-ratio: 4 / 3; }
    .visuel-etiquette { font-size: 9px; padding: 4px 7px; }
    .carte-analyse { height: 300px; }
    .historique-chokar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grille-moderation { grid-template-columns: minmax(0, 1fr); }
    .bouton-min kbd, .carte-moderation kbd { display: none; }
}

/* =====================================================================
   ADM-03 — Le refuge : catégories, partenaires, récompenses (sections,
   conditions, aperçu de tuile, à la une), codes, échanges, tirages
   ===================================================================== */
[data-types][hidden], [data-masquer-palier][hidden] { display: none !important; }
.espace-haut { margin-top: 12px; }
.lien-a-droite { margin-left: auto; padding-left: 14px; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Bandeau d'exclusivité des partenaires */
.bandeau-exclusivite > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bandeau-exclusivite .bouton-min { margin-top: 4px; }

/* Formulaire d'une récompense : sections */
.section-recompense + .section-recompense { border-top: 1px solid var(--ligne); }
.section-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.section-titre .icone { color: var(--sapin-clair); }
.section-recompense > .bandeau { margin-bottom: 0; }
.champ-limite { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 12px; }
.champ-limite .champ { margin: 0; }

/* Conditions : liste dynamique */
.liste-conditions { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: condition; }
.liste-conditions:empty { display: none; }
.ligne-condition { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--r-s); background: var(--papier); border: 1px solid var(--ligne); counter-increment: condition; }
.ligne-condition::before { content: counter(condition); flex: 0 0 auto; min-width: 22px; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brume); }
.ligne-condition input[type="text"] { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 12px; }
.ligne-condition .bouton-icone:disabled { opacity: .35; cursor: default; }
.ligne-condition.en-deplacement { opacity: .5; border-style: dashed; border-color: var(--sapin); }
.poignee-condition { flex: 0 0 auto; cursor: grab; padding: 0 4px; color: var(--brume); font-weight: 700; letter-spacing: -2px; user-select: none; }
.poignee-condition:active { cursor: grabbing; }

/* Visuel : couleurs et aperçu de tuile façon maquette */
.grille-visuel { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.champ-couleurs { display: flex; flex-wrap: wrap; gap: 14px; }
.champ-couleurs .couleur { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); cursor: pointer; }
.champ-couleurs input[type="color"] { width: 54px; height: 42px; padding: 3px; border-radius: 12px; border: 1px solid var(--ligne-forte); background: var(--blanc); cursor: pointer; }
.champ-couleurs input[type="color"]:focus-visible { outline: none; box-shadow: var(--anneau); }
.apercu-tuile-conteneur { position: sticky; top: calc(var(--haut, 64px) + 16px); display: flex; flex-direction: column; gap: 8px; }
.apercu-tuile { border-radius: 22px; overflow: hidden; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.tuile-visuel { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: linear-gradient(160deg, #2F6C51 0%, #16321F 100%); color: var(--encre); }
.tuile-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile-icone { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: rgba(255, 255, 255, .72); box-shadow: 0 10px 24px -12px rgba(22, 26, 23, .5); }
.tuile-icone[hidden] { display: none; }
.tuile-visuel .etiquette-tuile { position: absolute; left: 10px; top: 10px; }
.tuile-textes { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.tuile-partenaire { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); }
.tuile-titre { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--encre); overflow-wrap: anywhere; }
.tuile-prix { font-size: 13px; font-weight: 700; color: var(--sapin); }

/* Étiquettes (Drop / Rare / Bientôt / Palier) et étoile « À la une » */
.etiquette-tuile { display: inline-flex; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; background: var(--encre); color: var(--bec); white-space: nowrap; line-height: 1.2; }
.etiquette-tuile[hidden] { display: none; }
.etiquette-tuile.etiquette-rare { background: var(--sang); color: #fff; }
.etiquette-tuile.etiquette-bientot { background: var(--blanc); color: var(--encre); box-shadow: 0 0 0 1px var(--ligne-forte); }
.etiquette-tuile.etiquette-palier { background: var(--bec); color: var(--encre); }
.etoile-une { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 20px; line-height: 1; color: var(--brume); text-decoration: none; transition: background .14s, color .14s; }
a.etoile-une:hover, a.etoile-une:focus-visible { background: var(--bec-doux); color: #7A5C00; }
.etoile-une.active { color: var(--bec); text-shadow: 0 1px 0 #7A5C00; }
.bandeau > .etoile-une { width: auto; height: auto; flex: 0 0 auto; }
.vignette-degrade { color: var(--encre); border: 0; }
.vignette-degrade .icone { background: rgba(255, 255, 255, .7); border-radius: 8px; padding: 2px; box-sizing: content-box; }
.badge-famille.type-code_local, .badge-famille.type-code_en_ligne { background: var(--bec-doux); color: #7A5C00; }
.badge-famille.type-produit_expedie { background: var(--mousse); color: var(--sapin); }
.badge-famille.type-tirage_au_sort { background: #ECE6F3; color: #5C4585; }
.badge-famille.type-palier { background: #E3EDF5; color: #2D5B85; }

/* Échange : statut, infos, adresse, historique */
.ligne-statut-echange { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ligne-statut-echange .ligne-actions { margin-left: auto; }
.badge-statut.grand { font-size: 12px; padding: 8px 12px; border-radius: 10px; }
.infos-refuge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.infos-refuge > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.infos-refuge .pleine-largeur { grid-column: 1 / -1; }
.infos-refuge dt { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }
.infos-refuge dd { margin: 0; overflow-wrap: anywhere; }
.adresse-livraison { font-style: normal; line-height: 1.6; margin: 0 0 10px; padding: 14px 16px; border-radius: var(--r-s); background: var(--papier); border: 1px dashed var(--ligne-forte); }
.historique-echange { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historique-echange li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--ligne); font-size: 14px; }
.historique-echange li:first-child { border-top: 0; }
.historique-date { font-size: 11.5px; color: var(--brume); padding-top: 2px; }
.sous-titre-carte { margin: 20px 0 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }

/* Tirage */
.tete-tirage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.compteur-gagnants { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--mousse); color: var(--sapin); font-size: 12px; font-weight: 700; }
.compteur-gagnants.depasse { background: var(--sang-doux); color: var(--sang); }
tr.ligne-proposee > td { background: var(--bec-doux) !important; }
.choix-gagnant { display: inline-flex; align-items: center; cursor: pointer; }

@media (max-width: 991px) {
    .grille-visuel { grid-template-columns: minmax(0, 1fr); }
    .apercu-tuile-conteneur { position: static; max-width: 300px; }
}
@media (max-width: 575px) {
    .champ-limite { grid-template-columns: minmax(0, 1fr); }
    .infos-refuge { grid-template-columns: minmax(0, 1fr); }
    .historique-echange li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ligne-statut-echange .ligne-actions { margin-left: 0; width: 100%; }
    .ligne-statut-echange .ligne-actions .bouton-min { flex: 1 1 auto; }
    .ligne-condition { flex-wrap: wrap; }
    .ligne-condition input[type="text"] { flex-basis: calc(100% - 40px); }
    .lien-a-droite { margin-left: 0; padding-left: 0; }
}

/* ADM-05 — Tableau de bord, exports communes, notifications push
   ===================================================================== */

/* Sélecteur de période */
.barre-periode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 16px 20px; margin: 0 0 8px; }
.barre-periode-champ { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.barre-periode-libelle { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }
.barre-periode-perso { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.barre-periode-perso label { display: flex; flex-direction: column; gap: 6px; }
.barre-periode-perso input[type="date"] { font: inherit; font-family: var(--mono); font-size: 13px; padding: 9px 12px; border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--blanc); color: var(--encre); }
.barre-periode-resume { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--texte-2); text-align: right; }
.barre-periode-cache { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--brume); margin-top: 2px; }
.aide-tableau { margin: -8px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--brume); max-width: 920px; }
.carte-corps .aide-tableau { margin: 0 0 16px; }
.aide-tableau code { font-family: var(--mono); font-size: 11.5px; background: var(--mousse); color: var(--sapin); padding: 1px 5px; border-radius: 5px; }

/* Grilles */
.grille-deux-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.grille-stats.compacte { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grille-graphiques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; }
.grille-graphiques > .carte { margin: 0; min-width: 0; }
.graphique { position: relative; height: 280px; }
.grille-tops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; }
.grille-tops > .carte { margin: 0; min-width: 0; }
.defilement-horizontal { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Rétention (heatmap mousse → sapin) */
.table-retention { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 4px; font-size: 13.5px; }
.table-retention th { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); text-align: left; padding: 4px 8px; }
.table-retention th.dt-center { text-align: center; }
.table-retention th.dt-right, .table-retention td.dt-right { text-align: right; }
.table-retention td { padding: 9px 10px; }
.retention-semaine { white-space: nowrap; font-weight: 600; }
.retention-cellule { width: 18%; text-align: center; font-family: var(--mono); font-size: 12.5px; font-weight: 700; border-radius: 10px; cursor: default; }
.retention-vide { color: var(--brume); background: transparent; font-weight: 400; }
.retention-niveau-0 { background: #F1F4F0; color: #6B716A; }
.retention-niveau-1 { background: var(--mousse); color: var(--sapin); }
.retention-niveau-2 { background: var(--mousse-2); color: var(--sapin); }
.retention-niveau-3 { background: #A9C9B3; color: var(--sapin); }
.retention-niveau-4 { background: var(--sapin-clair); color: #fff; }
.retention-niveau-5 { background: var(--sapin); color: var(--bec); }
.retention-cellule.partiel { font-style: italic; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(22, 26, 23, .12); }
.ligne-moyenne td { border-top: 2px solid var(--ligne-forte); font-weight: 700; padding-top: 12px; }
.ligne-moyenne td:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }

/* Tops */
.liste-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste-top li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.liste-top li:first-child { border-top: 0; padding-top: 0; }
.liste-top-rang { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: var(--mousse); color: var(--sapin); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.liste-top li:first-child .liste-top-rang { background: var(--bec); color: var(--encre); }
.liste-top-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.liste-top-valeur { flex: 0 0 auto; color: var(--sapin-clair); font-weight: 700; }

/* Exports */
.champ-libelle-groupe { display: block; font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.export-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.export-dates input[type="date"] { flex: 1 1 140px; font: inherit; font-family: var(--mono); font-size: 13px; padding: 10px 12px; border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--blanc); }
.aide-export { margin: 0; padding: 14px 16px 14px 32px; border-radius: var(--r-s); background: var(--papier); border: 1px dashed var(--ligne-forte); font-size: 13px; line-height: 1.55; color: var(--texte-2); }
.aide-export li + li { margin-top: 4px; }
.table-apercu { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.table-apercu th { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ligne-forte); }
.table-apercu td { padding: 9px 10px; border-bottom: 1px solid var(--ligne); }
.table-apercu .dt-right { text-align: right; }
.formulaire-telechargement { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; width: 100%; }
.nom-fichier { color: var(--brume); overflow-wrap: anywhere; }

/* Notifications push */
.grille-campagne { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.grille-campagne > .carte { margin: 0; }
.destinataires-campagne { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; padding: 12px 16px; border-radius: var(--r-s); background: var(--mousse); color: var(--sapin); font-weight: 600; }
.compteur-caracteres { text-align: right; font-family: var(--mono); font-size: 11px; }
.actions-ligne { display: inline-flex; gap: 6px; justify-content: flex-end; }
.actions-ligne .bouton-min { padding: 9px 11px; }
.texte-secondaire { font-size: 12.5px; color: var(--brume); }
.apercu-notification-conteneur { position: sticky; top: calc(var(--haut) + 20px); }
.apercu-ecran { border-radius: 34px; padding: 26px 14px 60px; background: linear-gradient(160deg, #2F6C51 0%, #1F4A37 55%, #16321F 100%); box-shadow: var(--ombre-flottante); }
.apercu-heure { display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, .92); margin: 0 0 22px; }
.apercu-heure-jour { font-size: 13px; font-weight: 600; }
.apercu-heure-valeur { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.apercu-notification { display: flex; gap: 10px; padding: 12px; border-radius: 20px; background: rgba(246, 244, 238, .9); backdrop-filter: blur(12px); color: var(--encre); }
.apercu-logo { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; background: var(--sapin); }
.apercu-contenu { flex: 1 1 auto; min-width: 0; }
.apercu-ligne-haut { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #6B716A; }
.apercu-app { font-weight: 600; letter-spacing: .02em; }
.apercu-titre { margin: 2px 0 0; font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.apercu-corps { margin: 1px 0 0; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1199px) {
    .grille-tops { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
    .grille-graphiques, .grille-deux-sections { grid-template-columns: minmax(0, 1fr); }
    .grille-campagne { grid-template-columns: minmax(0, 1fr); }
    .apercu-notification-conteneur { position: static; max-width: 360px; }
    .barre-periode-resume { text-align: left; }
}
@media (max-width: 575px) {
    .barre-periode { padding: 14px 16px; }
    .barre-periode-champ { min-width: 0; width: 100%; }
    .graphique { height: 230px; }
    .grille-stats.compacte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .formulaire-telechargement { justify-content: stretch; }
    .formulaire-telechargement .bouton-min { width: 100%; }
}