/* ==========================================
   VARIABLES GLOBALES
   ========================================== */
:root {
    --cplus-jaune: #ffcb08;
    --cplus-rouge: #ed1c24;
    --cplus-mauve: #b369aa;
    --dark-bg: #0f172a;
    --light-bg: #F8FAFC;
    --text-dark: #1E293B;
    --border-color: #E2E8F0;
    --sidebar-width: 248px;
    --header-height: 69px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ==========================================
   CLASSES UTILITAIRES INDISPENSABLES
   ========================================== */
.hidden { display: none !important; }
.screen { display: none !important; }

#mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
#mobile-menu-overlay.active {
    display: block;
}

/* ==========================================
   L'ARCHITECTURE BLINDÉE (CSS GRID)
   ========================================== */
body { 
    background-color: var(--light-bg); 
    color: var(--text-dark); 
    overflow: hidden; 
    height: 100vh;
    width: 100vw;
}

.screen { display: none !important; }

/* 1. Écrans Connexion & Pending */
#login-screen.active,
#pending-screen.active { 
    display: flex !important; 
    justify-content: center; 
    align-items: center; 
    background: white; 
    height: 100vh;
    width: 100vw;
}

/* Écran principal Agora */
#app-screen.active {
    display: contents !important;
}

/* 2. Écran Agora & El-learning (La Grille) */
body.app-screen-force {
    display: grid !important; 
    grid-template-columns: var(--sidebar-width) 1fr !important;
    grid-template-rows: var(--header-height) 1fr !important;
    height: 100vh;
    width: 100vw;
    background-color: var(--light-bg);
}

/* LE HEADER BLANC (Haut, toute la largeur) — coque v3 : fil d'Ariane + cluster droit.
   Anciennement barre mauve de nav ; la nav inter-espaces vit désormais dans la sidebar. */
.global-header {
    grid-column: 1 / 3 !important;
    grid-row: 1 / 2 !important;
    background-color: #fff;
    border-bottom: 1px solid #EAE8EC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    flex-shrink: 0;
    padding: 0 24px;
    z-index: 1000;
    box-shadow: none;
}

/* LE MENU DE GAUCHE (Sous la barre, à gauche) */
.global-sidebar {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: white;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    z-index: 10;
}

/* LE CONTENU CENTRAL (Sous la barre, à droite) */
.global-content {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    height: 100%;
    overflow-y: auto !important; /* Le scroll est activé ici */
    overflow-x: hidden;
    padding: 28px;
    background-color: var(--light-bg);
}

/* ==========================================
   ROTATOR — window.createRotator (helpers.js)
   Fait défiler des éléments un par un, à hauteur constante (widget agenda du hero,
   sur l'accueil comme sur le portail partenaire). Les slides sont SUPERPOSÉES : la
   carte garde la hauteur de la plus haute et ne saute jamais d'une rotation à l'autre.
   ========================================== */
.rot-view { position: relative; transition: height .2s ease; }
.rot-slide {
    position: absolute; top: 0; left: 0; width: 100%;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s ease;
}
.rot-slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.rot-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.rot-dot {
    width: 6px; height: 6px; border-radius: 999px; border: none; padding: 0;
    background: #D9D4DE; cursor: pointer; transition: background .2s, width .2s;
}
.rot-dot.is-on { background: #ED1C24; width: 16px; }

/* ==========================================
   COQUE SANS SIDEBAR — body.no-sidebar
   Pour une page dont la nav vit DANS le contenu (le portail partenaire : ses
   outils sont des tuiles du hero, une sidebar ne ferait que les répéter). La
   grille passe à une seule colonne, et le burger mobile disparaît avec elle.
   ⚠️ index.html a son équivalent LOCAL (body.accueil-no-sidebar, injecté en CSS
   dynamique) — à faire converger ici (cf. « Doublons » du COMPENDIUM).
   ========================================== */
body.no-sidebar .global-sidebar,
body.no-sidebar .sidebar-mobile-overlay,
body.no-sidebar .header-burger { display: none !important; }
body.app-screen-force.no-sidebar { grid-template-columns: 1fr !important; }
body.no-sidebar .global-header,
body.no-sidebar .global-content { grid-column: 1 / 2 !important; }

/* ==========================================
   FLOW+ & RH — Sidebar couleurs overridées
   ========================================== */
#sidebar .nav-item.active { background: #fdf4ff; color: #b369aa; }
#sidebar .nav-item:hover { background: #fdf4ff; color: #b369aa; }

/* ==========================================
   ÉLÉMENTS D'INTERFACE (Boutons, Tuiles, etc.)
   ========================================== */
.btn-primary { background: var(--cplus-rouge); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%; transition: 0.2s; }
.btn-primary:hover { filter: brightness(0.9); }

.sidebar-header { padding: 20px; text-align: center; border-bottom: 1px solid var(--border-color); }
.sidebar-header img { max-width: 180px; height: auto; }

.top-tabs { display: flex; background: #F1F5F9; margin: 15px; border-radius: 8px; padding: 4px; }
.top-tab { flex: 1; text-align: center; padding: 8px 0; font-size: 0.8rem; font-weight: 600; cursor: pointer; border-radius: 6px; color: #64748B; transition: 0.2s; }
.top-tab.active { background: white; color: var(--cplus-rouge); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.nav-menu { flex: 1; overflow-y: auto; padding: 10px; margin-bottom: 10px; }
.nav-menu::-webkit-scrollbar { width: 4px; }
.nav-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.nav-item { display: flex; align-items: center; gap: 12px; padding: 8px 15px; margin-bottom: 2px; border-radius: 8px; cursor: pointer; color: #475569; font-weight: 500; font-size: 0.9rem; transition: 0.2s; }
.nav-item:hover { background: #F1F5F9; color: var(--text-dark); }
.nav-item.active { background: #FEF2F2; color: var(--cplus-rouge); }

.view-section { display: none; animation: fadeIn 0.3s ease; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;}
.page-title h1 { font-size: 1.8rem; color: var(--text-dark); margin-bottom: 5px; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.tile { background: white; border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 12px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 15px; border-top: 4px solid var(--cplus-jaune); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

/* ==========================================
   MODE SOMBRE GLOBAL 🌙
   ========================================== */
body.dark-mode { background-color: var(--dark-bg) !important; color: #f1f5f9 !important; }
body.dark-mode .global-sidebar { background-color: #0f172a !important; border-right: 1px solid #1e293b !important; }
body.dark-mode .global-content { background-color: var(--dark-bg) !important; }
body.dark-mode .nav-item { color: #cbd5e1 !important; }
body.dark-mode .nav-item:hover, body.dark-mode .nav-item.active { background-color: #1e293b !important; color: #ffffff !important; }
body.dark-mode .sidebar-header img { filter: brightness(0) invert(1); }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #ffffff !important; }
body.dark-mode p { color: #cbd5e1 !important; }
body.dark-mode div[style*="background: white"], body.dark-mode .tile { background-color: #0f172a !important; border-color: #1e293b !important; color: #cbd5e1 !important; }
body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background-color: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important; }

/* ==========================================
   SIDEBAR UNIFIÉE — Coalition PLUS
   ========================================== */
.global-sidebar {
    --sidebar-accent: #b369aa;
    --sidebar-accent-bg: color-mix(in srgb, var(--sidebar-accent) 10%, white);
    --sidebar-text: #475569;
    --sidebar-text-muted: #94a3b8;
    padding: 0;
}

.global-sidebar .sidebar-header {
    padding: 32px 16px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.global-sidebar .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.global-sidebar .sidebar-nav::-webkit-scrollbar { width: 4px; }
.global-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.global-sidebar .sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

/* Groupe marqué `separated: true` : un filet le détache du groupe précédent.
   Sert aux sous-parties d'un même module (ex. Collecte / Communication dans
   Com'Collecte) et au bloc utilitaire du bas de la nav globale. */
.global-sidebar .sidebar-section-sep {
    border-top: 1px solid #e2e8f0;
    padding-top: 6px;
}

.global-sidebar .sidebar-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 14px 6px;
    margin: 0;
}

.global-sidebar .sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
    position: relative;
}

.global-sidebar .sidebar-item-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.global-sidebar .sidebar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--sidebar-text-muted);
    transition: color 0.15s;
}

.global-sidebar .sidebar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar .sidebar-item:hover {
    background: #f8fafc;
    color: #1e293b;
}
.global-sidebar .sidebar-item:hover .sidebar-icon { color: #1e293b; }

.global-sidebar .sidebar-item.active {
    background: var(--sidebar-accent-bg);
    color: var(--sidebar-accent);
    font-weight: 600;
}
.global-sidebar .sidebar-item.active .sidebar-icon {
    color: var(--sidebar-accent);
}

.global-sidebar .sidebar-badge {
    background: var(--sidebar-accent);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.global-sidebar .sidebar-badge.hidden { display: none; }

.global-sidebar .sidebar-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.global-sidebar .sidebar-user-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 0;
    transition: background 0.15s;
    text-align: left;
}
.global-sidebar .sidebar-user-btn:hover {
    background: #f8fafc;
}

.global-sidebar .sidebar-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sidebar-accent-bg);
    color: var(--sidebar-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
}

.global-sidebar .sidebar-user-info {
    flex: 1;
    min-width: 0;
}
.global-sidebar .sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-sidebar .sidebar-user-org {
    font-size: 0.68rem;
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-sidebar .sidebar-logout-btn {
    background: none; 
    border: none;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.global-sidebar .sidebar-logout-btn:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ==========================================
   RAIL RÉTRACTABLE — modernisation nav (Direction A)
   Repli opt-in (body.sidebar-collapsed) : la grille rétrécit via
   --sidebar-width, les libellés sont masqués, les icônes centrées.
   Tooltip natif (title) sur chaque item quand replié.
   ========================================== */
.global-sidebar { position: relative; transition: width 0.18s ease; }
.sidebar-collapse-btn {
    position: absolute; top: 12px; right: 12px; z-index: 20;
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--border-color); background: #fff;
    color: #94a3b8; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.sidebar-collapse-btn:hover { color: #b369aa; background: #faf5fb; }
.sidebar-collapse-btn i { width: 16px; height: 16px; }
body.dark-mode .sidebar-collapse-btn { background: #1e293b; border-color: #334155; }

body.sidebar-collapsed { --sidebar-width: 68px; }
/* Repliée : on masque le logo (rogné à 40px, il faisait bizarre) et on réserve
   juste l'espace du chevron centré en haut de la nav. */
body.sidebar-collapsed .global-sidebar .sidebar-header { display: none; }
body.sidebar-collapsed .global-sidebar .sidebar-nav { padding-top: 52px; }
body.sidebar-collapsed .global-sidebar .sidebar-top-slot,
body.sidebar-collapsed .global-sidebar .sidebar-section-label,
body.sidebar-collapsed .global-sidebar .sidebar-label,
body.sidebar-collapsed .global-sidebar .sidebar-badge,
body.sidebar-collapsed .global-sidebar .sidebar-user-info { display: none; }
body.sidebar-collapsed .global-sidebar .sidebar-item,
body.sidebar-collapsed .global-sidebar .sidebar-user-btn { justify-content: center; }
body.sidebar-collapsed .global-sidebar .sidebar-item-inner { gap: 0; flex: none; }
body.sidebar-collapsed .global-sidebar .sidebar-footer { justify-content: center; flex-wrap: wrap; gap: 8px; }
body.sidebar-collapsed .sidebar-collapse-btn { right: 50%; transform: translateX(50%); }

/* ==========================================
   RESPONSIVE — petit écran (< 900px)
   La grille passe en 1 colonne, la sidebar devient un tiroir
   off-canvas (position:fixed) ouvert via le bouton ☰ du header
   (window.toggleMobileSidebar → body.sidebar-mobile-open).
   ========================================== */
.sidebar-mobile-overlay { display: none; }
.header-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin: 0 2px 0 0;
    border: 1px solid #EAE8EC;
    background: #fff;
    color: #6E6975;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.header-burger:hover { background: #F4F3F5; }
body.dark-mode .header-burger { background: #1d1a24; border-color: #2a2632; color: #b6b0bf; }
.header-burger .material-symbols-outlined { font-size: 22px; }

/* ==========================================
   ESPACE DÉTENTE — cartes du hub (#view-detente)
   ========================================== */
.detente-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 16px; text-align: left;
    background: #fff; border: 1px solid var(--border-color);
    border-radius: 16px; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.detente-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(179,105,170,0.45); border-color: #e9d5e6; }
.detente-card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(179,105,170,0.12); color: #8A3F80;
}
.detente-card-icon .material-symbols-outlined { font-size: 22px; }
.detente-card-title { font-weight: 700; font-size: 0.95rem; color: #1e293b; line-height: 1.2; }
.detente-card-desc { font-size: 0.78rem; color: #94a3b8; line-height: 1.35; }
body.dark-mode .detente-card { background: #0f172a; border-color: #1e293b; }
body.dark-mode .detente-card-title { color: #f1f5f9; }
body.dark-mode .detente-card-icon { background: rgba(179,105,170,0.20); color: #d8a9d2; }

@media (max-width: 1024px) {
    body.app-screen-force { grid-template-columns: 1fr !important; }
    .global-content { grid-column: 1 / 2 !important; padding: 16px !important; }
    /* Les pastilles stats (km / niveau / en ligne / coût) sont masquées sous
       768px par header.js (règle .hdr-stats) — l'ancien id #header-stats-pill
       visé ici a disparu au passage aux classes (2026-09-03). */

    .global-sidebar {
        position: fixed !important;
        top: var(--header-height); left: 0; bottom: 0;
        width: 270px !important;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1200;
        box-shadow: 6px 0 28px rgba(15,23,42,0.18);
    }
    body.sidebar-mobile-open .global-sidebar { transform: translateX(0); }

    .sidebar-mobile-overlay {
        display: block;
        position: fixed;
        top: var(--header-height); left: 0; right: 0; bottom: 0;
        background: rgba(15,23,42,0.45);
        opacity: 0; visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 1150;
    }
    body.sidebar-mobile-open .sidebar-mobile-overlay { opacity: 1; visibility: visible; }

    .header-burger { display: inline-flex; }
    .sidebar-collapse-btn { display: none !important; }

    /* Neutralise l'état "replié" desktop quand on bascule en tiroir mobile */
    body.sidebar-collapsed { --sidebar-width: 270px; }
    body.sidebar-collapsed .global-sidebar .sidebar-top-slot,
    body.sidebar-collapsed .global-sidebar .sidebar-section-label,
    body.sidebar-collapsed .global-sidebar .sidebar-user-info { display: block; }
    body.sidebar-collapsed .global-sidebar .sidebar-label { display: inline; }
    body.sidebar-collapsed .global-sidebar .sidebar-item,
    body.sidebar-collapsed .global-sidebar .sidebar-user-btn { justify-content: flex-start; }
    body.sidebar-collapsed .global-sidebar .sidebar-item-inner { gap: 12px; flex: 1; }
    /* Tiroir mobile = état "plein" : on réaffiche le logo masqué par le repli desktop
       et on annule l'espace réservé au chevron. */
    body.sidebar-collapsed .global-sidebar .sidebar-header { display: block; padding: 24px 16px; }
    body.sidebar-collapsed .global-sidebar .sidebar-nav { padding-top: 12px; }
}

/* Slot libre en haut de sidebar (ex: recherche globale) */
.global-sidebar .sidebar-top-slot {
    padding: 0 12px 8px;
    flex-shrink: 0;
}
.sidebar-search-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sidebar-search-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.sidebar-search-btn .kbd {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    color: #94a3b8;
}

/* ============================================================
   HERO CARROUSEL — Accueil Agora (style moderne CP)
   ============================================================ */
:root {
    --cp-jaune: #ffcb08;
    --cp-rouge: #ed1c24;
    --cp-mauve: #b369aa;
    --hero-shadow-lg: 0 12px 32px rgba(26,26,46,0.18), 0 4px 8px rgba(26,26,46,0.08);
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #1A1A2E 0%, #2D1B4E 50%, #6B2B5C 100%);
    box-shadow: var(--hero-shadow-lg);
}

/* Halos décoratifs */
.hero-carousel::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,203,8,0.18) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.hero-carousel::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(237,28,36,0.15) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transform: scale(1.02);
}

.hero-slide.active {
    opacity: 1;
    z-index: 3;
    transform: scale(1);
}

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.55) 45%, rgba(15,23,42,0.1) 100%);
}

.hero-slide-content {
    position: relative;
    z-index: 2;
    padding: 44px 52px;
    color: white;
    max-width: 68%;
}

.hero-slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--cp-rouge) 0%, #C8102E 100%);
    color: white;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(237,28,36,0.35);
}

.hero-slide-badge .material-symbols-outlined {
    font-size: 14px;
}

.hero-slide-title {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 14px 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.hero-slide-excerpt {
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 22px 0;
    opacity: 0.96;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-slide-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.85rem;
}

.hero-slide-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    transition: all 0.2s;
}

.hero-slide-meta-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

.hero-slide-meta-item .material-symbols-outlined {
    font-size: 16px;
}

/* Boutons navigation */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    color: #1A1A2E;
}

.hero-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.hero-prev { left: 22px; }
.hero-next { right: 22px; }

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 4;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    padding: 0;
}

.hero-dot:hover { background: rgba(255,255,255,0.7); }

.hero-dot.active {
    background: var(--cp-jaune);
    width: 32px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(255,203,8,0.5);
}

/* États vides/chargement */
.hero-loading, .hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
}

.hero-empty { font-style: italic; }

/* Responsive */
@media (max-width: 768px) {
    .hero-carousel { height: 360px; border-radius: 16px; }
    .hero-slide-content { padding: 28px 32px; max-width: 92%; }
    .hero-slide-title { font-size: 1.55rem; }
    .hero-slide-excerpt { font-size: 0.92rem; }
    .hero-nav { width: 38px; height: 38px; }
    .hero-prev { left: 12px; }
    .hero-next { right: 12px; }
}

/* ============================================================
   MODAL AJOUT RACCOURCI
   (le widget "Mes raccourcis" a été supprimé en 2026-05-03 — sa
   donnée alimente désormais le bandeau hero perso ; la modal
   d'édition est conservée car réutilisée par le bouton "+ Ajouter"
   du bandeau)
   ============================================================ */
.shortcut-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 16px;
    animation: fadeIn 0.15s ease-out;
}

.shortcut-modal-overlay.hidden {
    display: none;
}

.shortcut-modal-box {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    overflow: hidden;
    animation: slideUp 0.2s ease-out;
}

.shortcut-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--cp-mauve, #b369aa) 0%, var(--cp-rouge, #ed1c24) 100%);
    color: white;
}

.shortcut-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shortcut-modal-header .material-symbols-outlined {
    font-size: 24px;
}

.shortcut-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.shortcut-modal-close:hover {
    background: rgba(255,255,255,0.35);
}

.shortcut-modal-close .material-symbols-outlined {
    font-size: 18px;
}

.shortcut-modal-body {
    padding: 24px;
}

.shortcut-modal-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-top: 16px;
}

.shortcut-modal-label:first-child,
.shortcut-modal-body > .shortcut-modal-label:first-of-type {
    margin-top: 0;
}

.shortcut-modal-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.shortcut-modal-input:focus {
    border-color: var(--cp-mauve, #b369aa);
}

.shortcut-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 24px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}

.shortcut-btn-cancel {
    padding: 10px 20px;
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
}

.shortcut-btn-cancel:hover {
    background: #e2e8f0;
}

.shortcut-btn-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--cp-mauve, #b369aa) 0%, var(--cp-rouge, #ed1c24) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(179,105,170,0.3);
}

.shortcut-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(179,105,170,0.45);
}

.shortcut-btn-save .material-symbols-outlined {
    font-size: 18px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   ÉCRAN « PERSONNALISER MON ACCUEIL » (home-bricks.js, 2026-08-06)
   Une ligne = une brique. Vit ici et non dans index.html parce que le
   même écran s'ouvrira depuis le profil, et côté admin pour régler
   l'accueil de quelqu'un d'autre. L'habillage de la modale, lui, est
   emprunté aux classes .shortcut-modal-* juste au-dessus.
   ============================================================ */
.hb-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #E5DDE9;
          border-radius: 14px; background: #fff; margin-bottom: 9px; }
.hb-row.hb-off { opacity: .55; }
/* [2026-08-06] Le texte de la brique DOIT garder de la largeur : la 1re
   version alignait DEUX séries de boutons (zone + colonne) sur la même ligne
   et écrasait la description dans une colonne de trois mots, illisible.
   Un seul menu « Emplacement » désormais, et une description sur 2 lignes. */
.hb-txt { min-width: 0; }
.hb-ds { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-place { flex: none; max-width: 215px; border: 1px solid #E5DDE9; border-radius: 9px; background: #fff;
            font: inherit; font-size: 12px; font-weight: 700; color: #211E26; padding: 7px 9px; cursor: pointer; }
.hb-place:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
    .hb-row { flex-wrap: wrap; }
    .hb-txt { flex: 1 1 100%; order: -1; }
    .hb-place { max-width: none; flex: 1; }
}
.hb-grip { color: #C9C4D0; cursor: grab; flex: none; }
.hb-row.hb-off .hb-grip { cursor: grab; }
.hb-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: inline-flex; align-items: center;
         justify-content: center; background: #FDECEC; color: #ED1C24; }
.hb-ic .material-symbols-outlined { font-size: 18px; }
.hb-txt { flex: 1; min-width: 0; }
.hb-nm { font-size: 14px; font-weight: 800; color: #211E26; }
.hb-ds { font-size: 12.5px; color: #6E6975; font-weight: 500; margin-top: 2px; line-height: 1.4; }
.hb-badge { display: inline-block; background: #FFF6D9; color: #9A7B0A; border-radius: 999px;
            padding: 2px 9px; font-size: 10.5px; font-weight: 800; vertical-align: middle; }
.hb-badge.hb-new { background: #e8f7ee; color: #15803d; }
.hb-seg { display: inline-flex; border: 1px solid #E5DDE9; border-radius: 9px; overflow: hidden; flex: none; }
.hb-seg.hb-dim { opacity: .4; pointer-events: none; }
.hb-seg button { border: none; background: #fff; font: inherit; font-size: 11.5px; font-weight: 800;
                 color: #6E6975; padding: 6px 10px; cursor: pointer; }
.hb-seg button.on { background: #211E26; color: #fff; }
/* L'interrupteur : vert = allumé, grisé barré = verrouillé (noyau ou épinglé).
   Un cadenas visuel plutôt qu'un interrupteur qui ne répond pas sans rien dire. */
.hb-sw { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #DCD7E0;
         flex: none; cursor: pointer; transition: background .2s; }
.hb-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
                border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.hb-sw.on { background: #16a34a; }
.hb-sw.on::after { left: 21px; }
.hb-sw.lock { background: #CFC9D6; cursor: not-allowed; }
.hb-sw.lock::after { left: 21px; }
@media (max-width: 640px) {
    .hb-seg { display: none; }   /* une seule colonne sur mobile : la largeur n'a plus de sens */
}

/* Questionnaire de première connexion (home-bricks.js → wizardHTML).
   Réutilise .hb-row / .hb-sw de l'écran de réglage : c'est le même objet,
   présenté avec plus d'explications. Seuls les titres de zone et les cases
   compactes du 3e bloc lui sont propres. */
.hb-wz-h { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
           color: #9A95A1; margin: 22px 0 10px; }
.hb-wz-h:first-child { margin-top: 0; }
.hb-wz-p { font-size: 13px; color: #6E6975; margin: -4px 0 12px; }
.hb-cbs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 700px) { .hb-cbs { grid-template-columns: 1fr; } }
.hb-cb { display: flex; align-items: center; gap: 9px; border: 1px solid #E5DDE9; border-radius: 11px;
         padding: 10px 12px; background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.hb-cb.on { border-color: #ED1C24; background: #FDECEC; }
.hb-cb-k { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #D6D1DC; flex: none;
           display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.hb-cb.on .hb-cb-k { background: #ED1C24; border-color: #ED1C24; }

/* ============================================================
   LE COCKPIT — MISE EN COLONNES (home-bricks.js)
   ⚠️ Ces règles MANQUAIENT (posées le 2026-08-07). home-bricks.js produisait
   .av-hero-cols / .hero-col / .av-brick depuis le 06/08, mais aucune feuille
   ne les décrivait : les trois colonnes du hero s'empilaient donc les unes
   sous les autres, et la page était deux fois trop haute — exactement le
   défaut que le découpage en colonnes devait corriger.
   ============================================================ */
.av-hero-cols { display: flex; gap: 22px; align-items: stretch; }
.av-hero-cols > * { min-width: 0; }

/* ── LA HAUTEUR DU HERO ───────────────────────────────────────────────
   Demande de Thomas, 2026-08-07 : « beaucoup trop haut ». Le hero mangeait
   l'écran et repoussait « Tes espaces » sous la ligne de flottaison.
   Deux leviers, et UN SEUL CHIFFRE à régler (--hero-list-max) :
     · les espacements, resserrés ;
     · les blocs de LISTE, qui DÉFILENT à l'intérieur au lieu d'allonger la
       page. Ce sont eux, et eux seuls, qui grandissent sans limite (fil
       rouge, à traiter, agenda, nuage d'humeur) — la salutation et le mot du
       directeur ont une hauteur bornée par nature.
   ⚠️ La hauteur du hero est celle de sa colonne LA PLUS HAUTE : borner un
   seul bloc ne sert à rien si son voisin de colonne n'est pas borné aussi.
   C'est pourquoi la règle vise les quatre d'un coup. */
.av-hero-cols { --hero-list-max: 200px; }
.av-hero-card.av-card-pad { padding: 16px 20px; }

/* ── LES BLOCS D'UNE MÊME COLONNE, AU PRORATA ─────────────────────────
   Demande de Thomas, 2026-08-07 : « chaque brique n'a pas la même taille,
   du coup des trucs marchent pas ». Deux défauts, mesurés au banc
   (tests/hero-hauteurs.test.html) sur un accueil réaliste :
     · ESCALIER — les colonnes sont étirées à la plus haute, mais les blocs
       gardaient leur hauteur de contenu : 151 px de vide s'accumulaient au
       bas des colonnes courtes ;
     · CONTENU COUPÉ — les listes étaient plafonnées à 138 px, ce qui cachait
       264 px de contenu sur deux d'entre elles.

   La règle retenue : chaque bloc PART de son contenu (flex-basis: auto) et
   seul le RESTE de la colonne se partage à égalité. Un bloc bavard garde donc
   son avantage sur un bloc court — c'est ce qui distingue le prorata du
   partage à parts égales, qui donnait autant de place à l'Humeur (2 lignes)
   qu'au Fil rouge (12). Mesuré : zéro vide, et 160 px de contenu caché au
   lieu de 264.

   ⚠️ LE PIÈGE, vérifié au banc : donner `flex: 1 1 0` à TOUS les blocs fait
   tomber le hero à 58 px. Plus personne ne réclame de hauteur, donc il n'y en
   a plus. D'où les deux garde-fous, indissociables : une base `auto`, et une
   hauteur minimale sur le conteneur. (Même piège que le 06/08, dans l'autre
   sens : là c'était UN bloc en base `auto` qui poussait le hero.)

   ⚠️ La base doit rester BORNÉE (--hero-list-max), sinon un fil rouge à
   trente entrées fixe à lui seul la hauteur de tout le hero. */
.av-hero-cols { min-height: 320px; }
.hero-col > .av-brick { flex: 1 1 auto; min-height: 0; }
/* L'étirement doit traverser les enveloppes, et elles ne sont PAS les mêmes
   d'une brique à l'autre : `.av-card` pour la plupart, un `slot` intermédiaire
   pour Humeur / Agenda / Mot du directeur (mountSlot), `.hero-block` pour
   « À traiter » (mountTodeal). Une seule de ces lignes qui manque, et le bloc
   concerné redevient le seul à ne pas suivre — l'escalier revient pour lui. */
.hero-col > .av-brick > .av-card,
.hero-col > .av-brick > .hero-block,
.hero-col > .av-brick > .av-card > #mood-slot,
.hero-col > .av-brick > .av-card > #agenda-slot,
.hero-col > .av-brick > .av-card > #director-slot,
.hero-col > .av-brick > .av-card > #brick-ded-slot {
    height: 100%; display: flex; flex-direction: column; min-height: 0;
}
/* « À traiter » a une enveloppe de plus, et elle porte un display INLINE que
   le JS bascule quand la file est vide (roleWrap.style.display). L'inline
   l'emporte sur la feuille : quand il vaut 'none' la règle ci-dessous est
   ignorée — c'est exactement ce qu'on veut — et quand il est remis à ''
   c'est elle qui reprend la main. */
.hero-col > .av-brick > .hero-block > #role-dashboard {
    height: 100%; display: flex; flex-direction: column; min-height: 0;
}
.hero-col #role-dashboard-grid,
.hero-col #activity-feed-container,
.hero-col #home-agenda-container,
.hero-col #mood-cloud-display {
    max-height: var(--hero-list-max);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* C'est la LISTE qui absorbe la place gagnée par le prorata, pas un vide
       sous elle : sans ces deux lignes, le bloc s'étirerait et son contenu
       resterait collé en haut — l'escalier partirait de l'œil mais pas la
       troncature. `min-height:0` est indispensable dans un conteneur flex,
       sinon la liste refuse de descendre sous la hauteur de son contenu. */
    flex: 1 1 auto;
    min-height: 0;
}
/* « Ma To-Do » porte DEUX listes (du jour, en retard) et son en-tête est dans
   le même conteneur : on borne donc le bloc entier, en-tête compris, avec la
   place de ce dernier en plus. Sans lui, il restait le seul bloc sans limite
   du hero — et comme la hauteur du hero est celle de sa colonne la plus
   haute, il annulait à lui seul tout le reste du réglage. */
.hero-col #brick-todos-slot {
    max-height: calc(var(--hero-list-max) + 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* L'en-tête d'un bloc du hero n'a pas besoin de respirer autant que dans une
   vraie carte : il est déjà séparé de son voisin par un filet. */
.hero-col .av-card-h { margin-bottom: 8px; }
.av-hero-band-row { margin-top: 12px; }
.av-hero-band-row .av-hero-rail { margin-top: 0; padding-top: 12px; }
/* Une colonne vide n'est plus RETIRÉE du DOM (elle sert de cible de dépôt en
   mode réorganiser) : elle est masquée. Les autres se répartissent la largeur
   exactement comme avant. */
.hero-col:empty { display: none; }
.hero-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; }
.av-hero-cols > .hero-col + .hero-col:not(:empty) { border-left: 1px solid rgba(30,25,40,.09); padding-left: 18px; }
/* Une colonne qui ne porte qu'UN bloc le laisse s'étirer sur toute la hauteur
   du hero, plutôt que de laisser un grand vide en dessous (demande du 06/08). */
.hero-col[data-count="1"] > .av-brick { flex: 1; }
.av-brick { min-width: 0; }
/* Dans le hero, les cartes des briques s'aplatissent pour se fondre dans la
   carte unique — même parti pris que l'ancien .av-hero3. */
.hero-col .av-brick > .av-card, .av-hero-band-row .av-brick > .av-card {
    border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.hero-col .av-brick + .av-brick > .av-card, .hero-col .av-brick + .av-brick > .hero-block {
    border-top: 1px solid rgba(30,25,40,.09); padding-top: 12px !important; }
.av-hero-band-row:empty { display: none; }
.av-hero-band-row { margin-top: 18px; }
.av-hero-card-empty { display: none; }
/* La grille du bas : une brique `full` prend la ligne, deux `half` se rangent
   côte à côte. C'est le CSS qui aligne — aucun trou n'est fabricable. */
#home-bricks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#home-bricks:empty { display: none; }
.av-brick-full { grid-column: 1 / -1; }
.av-brick-half { grid-column: span 1; }
@media (max-width: 1024px) {
    .av-hero-cols { flex-direction: column; }
    .av-hero-cols > .hero-col + .hero-col:not(:empty) {
        border-left: none; padding-left: 0; border-top: 1px solid rgba(30,25,40,.09); padding-top: 18px; }
    #home-bricks { grid-template-columns: minmax(0, 1fr); }
    .av-brick-half { grid-column: 1 / -1; }
}

/* ============================================================
   MODE « RÉORGANISER MON ACCUEIL » (home-arrange.js, 2026-08-07)
   On règle son accueil SUR son accueil : pas de maquette, pas de modale.
   Tout ce qui suit ne s'applique que sous body.ha-on — hors du mode, la
   page ne doit pas porter la moindre trace de ces règles.
   ============================================================ */
.ha-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
          background: #211E26; color: #fff; box-shadow: 0 -14px 34px rgba(0,0,0,.22); }
.ha-bar-in { max-width: 1400px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 14px; }
.ha-bar-ic { color: #FFCB08; }
.ha-bar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ha-bar-txt b { font-size: 14px; font-weight: 800; }
.ha-bar-txt span { font-size: 12.5px; color: #C9C4D0; }
.ha-bar-btn { border: none; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800;
              padding: 9px 16px; cursor: pointer; flex: none; }
.ha-bar-reset { background: transparent; color: #C9C4D0; border: 1px solid #4A4552; }
.ha-bar-done { background: #16a34a; color: #fff; }
@media (max-width: 700px) {
    .ha-bar-in { flex-wrap: wrap; padding: 10px 14px; gap: 9px; }
    .ha-bar-txt { flex: 1 1 100%; }
    .ha-bar-btn { flex: 1; }
}
/* La barre est fixée en bas : sans cette réserve, elle couvrirait la fin de
   la page — c'est-à-dire justement la réserve des liens. */
body.ha-on { padding-bottom: 120px; }

/* Ce qu'on manipule prend un cadre, et son contenu cesse de répondre : sans
   le voile, prendre un bloc en main déclencherait le bouton qui est dessous. */
body.ha-on .av-brick, body.ha-on #accueil-portail .av-mod { position: relative; outline: 2px dashed #CFC9D6; outline-offset: 4px; border-radius: 12px; }
body.ha-on .av-brick[data-brick="noyau"] { outline-color: #E5DDE9; }
.ha-veil { position: absolute; inset: 0; z-index: 4; background: transparent; cursor: default; }
body.ha-on .hero-col:empty, body.ha-on .av-hero-band-row:empty, body.ha-on #home-bricks:empty {
    display: block; min-height: 74px; border: 2px dashed #DCD7E0; border-radius: 12px; background: #FBFAFC; }
body.ha-on .hero-col:empty { display: flex; }
body.ha-on .av-hero-card-empty { display: block; }

/* La palette d'outils d'un bloc ou d'une tuile. Au-dessus du voile (z-index),
   sinon elle serait le seul endroit de la carte qu'on ne pourrait pas cliquer. */
.ha-tools { position: absolute; top: 6px; right: 6px; z-index: 6; display: inline-flex; gap: 1px;
            background: #fff; border: 1px solid #E5DDE9; border-radius: 10px; padding: 2px;
            box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.ha-tool { border: none; background: none; color: #6E6975; cursor: pointer; padding: 3px;
           display: inline-flex; align-items: center; border-radius: 7px; }
.ha-tool:hover { background: #F4F3F5; color: #211E26; }
.ha-tool .material-symbols-outlined { font-size: 18px; }
.ha-tool[data-ha="hide"], .ha-tool[data-ha="tdel"] { color: #ED1C24; }
.ha-tool-lock { color: #C9C4D0; cursor: not-allowed; }
.ha-grip { cursor: grab; color: #B369AA; }
.ha-grip:active { cursor: grabbing; }
.ha-ghost { opacity: .35; }
.ha-chosen { box-shadow: 0 18px 36px -12px rgba(0,0,0,.30); }

/* Les liens d'une tuile : leurs trois boutons n'apparaissent qu'en mode
   réorganiser, et ils poussent le chevron de navigation dehors. */
body.ha-on .av-mod-link { position: relative; padding-right: 96px; cursor: default; }
body.ha-on .av-mod-link .ch { display: none; }
.ha-lk { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 1px; }
.ha-lk .ha-tool { padding: 2px; }
.ha-lk .ha-tool .material-symbols-outlined { font-size: 17px; }
/* Le titre et le sous-titre s'écrivent sur place. Le pointillé DIT que c'est
   un champ — sans lui, personne ne devine qu'on peut cliquer dedans. */
.ha-edit { outline: 1px dashed #B369AA; outline-offset: 3px; border-radius: 5px; min-height: 1em; min-width: 40px; }
.ha-edit:focus { outline: 2px solid #B369AA; background: #FBF6FA; }
.ha-edit:empty::before { content: attr(data-ph); color: #C9C4D0; }
body.ha-on .av-mod-title, body.ha-on .av-mod-desc { position: relative; z-index: 6; }
body.ha-on .av-mod-links { position: relative; z-index: 6; }

/* La carte « ajouter une tuile », en fin de grille. */
.ha-addtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
              min-height: 150px; border: 2px dashed #DCD7E0; border-radius: 16px; background: #FBFAFC;
              color: #6E6975; font: inherit; cursor: pointer; padding: 12px; text-align: center; }
.ha-addtile:hover { border-color: #B369AA; color: #211E26; }
.ha-addtile .material-symbols-outlined { font-size: 32px; color: #B369AA; }
.ha-addtile b { font-size: 13.5px; font-weight: 800; }
.ha-addtile span { font-size: 11.5px; }

/* La réserve, sous les tuiles. */
.ha-reserve { margin-top: 20px; border: 2px dashed #DCD7E0; border-radius: 18px; background: #FBFAFC; padding: 14px 16px; }
.ha-res-h { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.ha-res-h .material-symbols-outlined { color: #B369AA; }
.ha-res-h b { display: block; font-size: 14px; font-weight: 800; color: #211E26; }
.ha-res-h span { font-size: 12.5px; color: #6E6975; }
.ha-res-t { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
            color: #9A95A1; margin: 12px 0 7px; }
.ha-res-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 38px; align-content: flex-start; }
.ha-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E5DDE9;
           border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: #211E26; cursor: grab; }
.ha-chip:hover, .ha-chip:focus { border-color: #B369AA; background: #FBF6FA; outline: none; }
.ha-chip .material-symbols-outlined { font-size: 16px; color: #9A95A1; }
.ha-chip i { font-style: normal; font-size: 11px; font-weight: 600; color: #9A95A1; }
.ha-chip-brick { border-style: dashed; }
.ha-res-empty { font-size: 12.5px; color: #9A95A1; font-style: italic; }
.ha-res-url { margin-top: 12px; border: 1px solid #E0DCE4; border-radius: 10px; background: #fff;
              font: inherit; font-size: 12.5px; font-weight: 800; color: #211E26; padding: 7px 13px; cursor: pointer; }

/* Les deux petits choix contextuels : icône d'une tuile, tuile de destination
   d'un lien de la réserve. Posés SOUS l'objet qu'ils modifient — dans une
   modale, on perdrait de vue ce qu'on est en train de changer. */
.ha-iconpick { position: absolute; z-index: 9; left: 8px; right: 8px; top: 46px; background: #fff;
               border: 1px solid #E5DDE9; border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.16);
               padding: 7px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 190px; overflow: auto; }
.ha-iconpick button { border: none; background: none; cursor: pointer; padding: 5px; border-radius: 8px; color: #6E6975; }
.ha-iconpick button:hover { background: #FDECEC; color: #ED1C24; }
.ha-tilepick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 7px 0;
               background: #fff; border: 1px solid #E5DDE9; border-radius: 12px; padding: 8px; }
.ha-tilepick > span { font-size: 12px; font-weight: 800; color: #6E6975; }
.ha-tilepick button { border: 1px solid #E5DDE9; background: #fff; border-radius: 999px; font: inherit;
                      font-size: 12px; font-weight: 700; padding: 5px 11px; cursor: pointer; }
.ha-tilepick button:hover { border-color: #ED1C24; background: #FDECEC; }

.ha-toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 1300;
            background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 12px;
            font-size: 13px; font-weight: 600; box-shadow: 0 18px 40px rgba(0,0,0,.25);
            opacity: 0; transition: opacity .2s; pointer-events: none; }
.ha-toast.on { opacity: 1; }

/* ============================================================
   (L'écran modal « Composer mes tuiles » a été SUPPRIMÉ le 2026-08-07 : la
   composition se fait en place, dans le mode ci-dessus. Toutes ses classes
   .ht-* sont parties avec lui — plus rien ne les portait.)
   ============================================================ */

/* ============================================================
   WIDGET MOT DU DIRECTEUR
   ============================================================ */
.director-widget {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26,26,46,0.06));
}

.director-widget.hidden {
    display: none;
}

.director-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, #1A1A2E 0%, #2D1B4E 50%, #6B2B5C 100%);
    position: relative;
}

.director-widget-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--cp-jaune, #ffcb08) 0%, var(--cp-rouge, #ed1c24) 100%);
}

.director-widget-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.director-widget-badge .material-symbols-outlined {
    color: var(--cp-jaune, #ffcb08);
    font-size: 20px;
}

.director-widget-archive-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.director-widget-archive-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.director-widget-archive-btn .material-symbols-outlined {
    font-size: 18px;
}

.director-widget-body {
    padding: 18px;
    display: flex;
    gap: 14px;
}

.director-widget-photo-wrap {
    flex-shrink: 0;
}

.director-widget-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(107,43,92,0.3);
}

.director-widget-content {
    flex: 1;
    min-width: 0;
}

.director-widget-date {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cp-mauve, #b369aa);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.director-widget-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 6px 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.director-widget-excerpt {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.director-widget-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--cp-rouge, #ed1c24);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: gap 0.2s;
}

.director-widget-read-btn:hover {
    gap: 8px;
}

.director-widget-read-btn .material-symbols-outlined {
    font-size: 16px;
}

/* ============================================================
   OVERLAY LECTURE MOT DU DIRECTEUR
   ============================================================ */
.director-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
    animation: fadeIn 0.15s ease-out;
}

.director-viewer-overlay.hidden {
    display: none;
}

.director-viewer-box {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    animation: slideUp 0.25s ease-out;
}

.director-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 26px;
    background: linear-gradient(135deg, #f7ecf5 0%, #f2e2ef 100%);
    color: #8a3f80;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--cp-jaune, #ffcb08), var(--cp-rouge, #ed1c24)) 1;
}

.director-viewer-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.director-viewer-header-left .material-symbols-outlined {
    color: #c79a1f;
}

.director-viewer-header-right {
    display: flex;
    gap: 6px;
}

.director-viewer-nav, .director-viewer-close {
    background: rgba(179,105,170,0.12);
    border: 1px solid rgba(179,105,170,0.28);
    color: #8a3f80;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.director-viewer-nav:hover, .director-viewer-close:hover {
    background: rgba(179,105,170,0.22);
    transform: translateY(-1px);
}

.director-viewer-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.director-viewer-nav .material-symbols-outlined,
.director-viewer-close .material-symbols-outlined {
    font-size: 20px;
}

.director-viewer-body {
    padding: 32px 40px;
    overflow-y: auto;
    flex: 1;
}

.director-viewer-meta {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.director-viewer-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 16px rgba(107,43,92,0.25);
    flex-shrink: 0;
}

.director-viewer-date {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cp-mauve, #b369aa);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.director-viewer-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.director-viewer-content {
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
}

.director-viewer-content p {
    margin: 0 0 16px 0;
}

.director-viewer-content h2, .director-viewer-content h3 {
    color: #1e293b;
    margin: 24px 0 12px;
}

.director-viewer-content img {
    max-width: 100%;
    border-radius: 12px;
    margin: 16px 0;
}

.director-viewer-content a {
    color: var(--cp-rouge, #ed1c24);
    font-weight: 600;
}

@media (max-width: 640px) {
    .director-widget-body { flex-direction: column; align-items: center; text-align: center; }
    .director-viewer-body { padding: 20px; }
    .director-viewer-meta { flex-direction: column; text-align: center; }
    .director-viewer-title { font-size: 1.3rem; }
}

/* === LE FIL ROUGE — Feed d'activité === */
.fil-rouge-ribbon {
    filter: drop-shadow(0 1px 2px rgba(237,28,36,0.25));
    flex-shrink: 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: #f8fafc; }

.activity-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
}

.activity-body { flex: 1; min-width: 0; }

.activity-text {
    font-size: 0.85rem;
    color: #1e293b;
    line-height: 1.3;
    margin: 0 0 2px 0;
}
.activity-text strong { color: #0f172a; }

.activity-target {
    color: var(--cplus-rouge);
    font-weight: 500;
}

.activity-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.activity-icon {
    font-size: 14px !important;
    color: #cbd5e1;
}

.activity-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* ============================================================
   CADRES D'AVATAR — Trophée gamifié (Phase A — 2026-05-07)

   Design inspiré des badges Discord / Steam / Pokémon GO.
   Hiérarchie : bronze → argent → or → diamant → légende.
   Chaque cadre = anneau coloré (box-shadow) + badge thématique
   (::after avec Material Symbols / contenu textuel).

   ARCHITECTURE :
   • .avatar-frame : règle commune (position relative, transition)
   • .frame-XXX    : variante spécifique
   • ::after       : badge icône en bas-droite (clipping-safe)
   • ::before      : décoration secondaire (corner top-right ou halo)

   ÉCHELLES SUPPORTÉES :
   • 128×128 (profile.html — line 86)
   • 40×40   (modal customize — line 1210, 1217+)
   Tailles définies en unités relatives au conteneur via clamp().

   CONTRAINTE OVERFLOW :
   La modale preview a `overflow-hidden` — donc tout pseudo-élément
   reste dans les bounds. Les box-shadow extérieurs ne sont PAS
   clippés (rendu hors conteneur).
   ============================================================ */

.avatar-frame {
    position: relative;
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
}

/* Badge générique : pastille en bas-droite */
.avatar-frame::after {
    position: absolute;
    bottom: 6%;
    right: 6%;
    min-width: 28%;
    height: 28%;
    padding: 0 4%;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: 900;
    font-size: clamp(10px, 18%, 18px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: white;
    background: var(--badge-bg, #64748b);
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* ============================================================
   DISTANCE — progression métallique
   ============================================================ */

/* MARCHEUR — bronze pâle, débuter (≥10 km) */
.avatar-frame.frame-marcheur {
    box-shadow: 0 0 0 3px #65a30d, 0 0 0 5px rgba(132, 204, 22, 0.25);
}
.avatar-frame.frame-marcheur::after {
    content: 'directions_walk';
    --badge-bg: linear-gradient(145deg, #84cc16, #4d7c0f);
    background: var(--badge-bg);
}

/* BRONZE — médaille de bronze (≥50 km) */
.avatar-frame.frame-bronze {
    box-shadow:
        0 0 0 3px #92400e,
        0 0 0 6px #d97706,
        0 0 0 8px #92400e,
        inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.avatar-frame.frame-bronze::after {
    content: '3';
    --badge-bg: linear-gradient(145deg, #fdba74, #c2410c);
    background: var(--badge-bg);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 900;
}

/* EXPLORATEUR — turquoise, en chemin (≥100 km) */
.avatar-frame.frame-explorateur {
    box-shadow: 0 0 0 3px #0d9488, 0 0 0 5px rgba(20, 184, 166, 0.3), 0 0 12px rgba(20, 184, 166, 0.4);
}
.avatar-frame.frame-explorateur::after {
    content: 'explore';
    --badge-bg: linear-gradient(145deg, #5eead4, #0f766e);
    background: var(--badge-bg);
}

/* SILVER — médaille d'argent (≥200 km) */
.avatar-frame.frame-silver {
    box-shadow:
        0 0 0 3px #94a3b8,
        0 0 0 6px #e2e8f0,
        0 0 0 8px #64748b,
        0 0 16px rgba(148, 163, 184, 0.5),
        inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.avatar-frame.frame-silver::after {
    content: '2';
    --badge-bg: linear-gradient(145deg, #f1f5f9, #64748b);
    background: var(--badge-bg);
    color: #334155;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 900;
}

/* GOLD — médaille d'or (≥500 km) */
.avatar-frame.frame-gold {
    box-shadow:
        0 0 0 3px #b45309,
        0 0 0 6px #fbbf24,
        0 0 0 8px #b45309,
        0 0 22px rgba(251, 191, 36, 0.6),
        inset 0 0 0 2px rgba(255, 255, 255, 0.4);
    animation: frameGoldGlow 3.2s ease-in-out infinite;
}
.avatar-frame.frame-gold::after {
    content: '1';
    --badge-bg: linear-gradient(145deg, #fde68a, #b45309);
    background: var(--badge-bg);
    color: #78350f;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 900;
}
@keyframes frameGoldGlow {
    0%, 100% { box-shadow: 0 0 0 3px #b45309, 0 0 0 6px #fbbf24, 0 0 0 8px #b45309, 0 0 18px rgba(251, 191, 36, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
    50%      { box-shadow: 0 0 0 3px #b45309, 0 0 0 6px #fcd34d, 0 0 0 8px #b45309, 0 0 28px rgba(251, 191, 36, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
}

/* DIAMOND — bleu prismatique (≥1000 km) */
.avatar-frame.frame-diamond {
    box-shadow:
        0 0 0 3px #1e40af,
        0 0 0 6px #60a5fa,
        0 0 0 9px #1e40af,
        0 0 26px rgba(96, 165, 250, 0.65),
        inset 0 0 0 2px rgba(219, 234, 254, 0.6);
}
.avatar-frame.frame-diamond::after {
    content: 'diamond';
    --badge-bg: linear-gradient(145deg, #93c5fd, #1d4ed8);
    background: var(--badge-bg);
}
.avatar-frame.frame-diamond::before {
    content: '';
    position: absolute;
    top: -10%; left: -10%; right: -10%; bottom: -10%;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0%, rgba(147, 197, 253, 0.4) 25%, transparent 50%, rgba(96, 165, 250, 0.3) 75%, transparent 100%);
    animation: frameRotate 6s linear infinite;
    z-index: -1;
    filter: blur(8px);
    pointer-events: none;
}
@keyframes frameRotate { to { transform: rotate(360deg); } }

/* LEGEND — pourpre légendaire (≥2000 km) */
.avatar-frame.frame-legend {
    box-shadow:
        0 0 0 3px #6b21a8,
        0 0 0 6px #c084fc,
        0 0 0 9px #6b21a8,
        0 0 32px rgba(192, 132, 252, 0.75),
        inset 0 0 0 2px rgba(243, 232, 255, 0.5);
}
.avatar-frame.frame-legend::after {
    content: 'auto_awesome';
    --badge-bg: linear-gradient(145deg, #e9d5ff, #6b21a8);
    background: var(--badge-bg);
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.7), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.avatar-frame.frame-legend::before {
    content: '';
    position: absolute;
    top: -12%; left: -12%; right: -12%; bottom: -12%;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #fbbf24, #ec4899, #8b5cf6, #06b6d4, #fbbf24);
    animation: frameRotate 8s linear infinite;
    z-index: -1;
    filter: blur(10px);
    opacity: 0.55;
    pointer-events: none;
}

/* ============================================================
   FIDÉLITÉ — connexions répétées
   ============================================================ */

/* LOGIN 7 — gris-bleu doux (1 semaine) */
.avatar-frame.frame-login7 {
    box-shadow: 0 0 0 3px #94a3b8;
}
.avatar-frame.frame-login7::after {
    content: 'mood';
    --badge-bg: linear-gradient(145deg, #cbd5e1, #475569);
    background: var(--badge-bg);
}

/* LOGIN 30 — bleu ciel (1 mois) */
.avatar-frame.frame-login30 {
    box-shadow: 0 0 0 3px #0284c7, 0 0 0 5px rgba(56, 189, 248, 0.3);
}
.avatar-frame.frame-login30::after {
    content: 'star';
    --badge-bg: linear-gradient(145deg, #7dd3fc, #0369a1);
    background: var(--badge-bg);
}

/* LOGIN 100 — indigo flamboyant */
.avatar-frame.frame-login100 {
    box-shadow: 0 0 0 3px #4338ca, 0 0 0 6px #818cf8, 0 0 16px rgba(99, 102, 241, 0.55);
}
.avatar-frame.frame-login100::after {
    content: 'local_fire_department';
    --badge-bg: linear-gradient(145deg, #f97316, #b91c1c);
    background: var(--badge-bg);
}

/* LOGIN 200 — fuchsia, presque légendaire */
.avatar-frame.frame-login200 {
    box-shadow: 0 0 0 3px #86198f, 0 0 0 6px #e879f9, 0 0 22px rgba(217, 70, 239, 0.6);
}
.avatar-frame.frame-login200::after {
    content: 'rocket_launch';
    --badge-bg: linear-gradient(145deg, #f0abfc, #86198f);
    background: var(--badge-bg);
}

/* LOGIN 365 — couronne 1 an, pulse animé */
.avatar-frame.frame-login365 {
    box-shadow:
        0 0 0 3px #be185d,
        0 0 0 6px #f9a8d4,
        0 0 0 9px #be185d,
        0 0 26px rgba(244, 114, 182, 0.7);
    animation: framePulse 2.4s ease-in-out infinite;
}
.avatar-frame.frame-login365::after {
    content: 'workspace_premium';
    --badge-bg: linear-gradient(145deg, #fbcfe8, #831843);
    background: var(--badge-bg);
}
@keyframes framePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

/* ============================================================
   SPÉCIAL — accomplissements
   ============================================================ */

/* TEAM (esprit équipe) — guirlande multicolore */
.avatar-frame.frame-team {
    box-shadow:
        0 0 0 3px #0ea5e9,
        2px -2px 0 5px #ec4899,
        -2px 2px 0 5px #fbbf24,
        2px 2px 0 5px #10b981,
        -2px -2px 0 5px #a855f7,
        0 0 14px rgba(14, 165, 233, 0.4);
}
.avatar-frame.frame-team::after {
    content: 'celebration';
    --badge-bg: linear-gradient(145deg, #fde047, #ec4899);
    background: var(--badge-bg);
}

/* COLLECTOR — orange ambré, gemmes */
.avatar-frame.frame-collector {
    box-shadow:
        0 0 0 3px #d97706,
        0 0 0 6px #fbbf24,
        0 0 18px rgba(245, 158, 11, 0.55);
}
.avatar-frame.frame-collector::after {
    content: 'diamond';
    --badge-bg: linear-gradient(145deg, #fde68a, #c2410c);
    background: var(--badge-bg);
}

/* HERO — rouge héros */
.avatar-frame.frame-hero {
    box-shadow:
        0 0 0 3px #991b1b,
        0 0 0 6px #ef4444,
        0 0 0 9px #991b1b,
        0 0 24px rgba(239, 68, 68, 0.6);
}
.avatar-frame.frame-hero::after {
    content: 'shield';
    --badge-bg: linear-gradient(145deg, #fecaca, #991b1b);
    background: var(--badge-bg);
}

/* ADMIN (gourou) — double anneau or + violet, halo animé */
.avatar-frame.frame-admin {
    box-shadow:
        0 0 0 3px #ffcb08,
        0 0 0 6px #b369aa,
        0 0 0 9px #ffcb08,
        0 0 30px rgba(179, 105, 170, 0.65),
        inset 0 0 0 2px rgba(255, 247, 213, 0.5);
    animation: frameAdminBreathe 3.6s ease-in-out infinite;
}
.avatar-frame.frame-admin::after {
    content: 'verified';
    --badge-bg: linear-gradient(145deg, #fde68a, #b369aa);
    background: var(--badge-bg);
    box-shadow: 0 0 10px rgba(255, 203, 8, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.avatar-frame.frame-admin::before {
    content: '';
    position: absolute;
    top: -15%; left: -15%; right: -15%; bottom: -15%;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #ffcb08, #b369aa, #ed1c24, #ffcb08);
    animation: frameRotate 5s linear infinite;
    z-index: -1;
    filter: blur(12px);
    opacity: 0.5;
    pointer-events: none;
}
@keyframes frameAdminBreathe {
    0%, 100% { box-shadow: 0 0 0 3px #ffcb08, 0 0 0 6px #b369aa, 0 0 0 9px #ffcb08, 0 0 24px rgba(179, 105, 170, 0.55), inset 0 0 0 2px rgba(255, 247, 213, 0.4); }
    50%      { box-shadow: 0 0 0 3px #ffcb08, 0 0 0 6px #b369aa, 0 0 0 9px #ffcb08, 0 0 38px rgba(179, 105, 170, 0.85), inset 0 0 0 2px rgba(255, 247, 213, 0.6); }
}
/* ============================================================
   SIGNATURE (signature.js) — le paraphe déposé.
   Dans style.css et non dans une page : le bloc est monté par
   profile.html ET rh.html, et le sera ailleurs dès qu'un autre
   document se signera. Un style scopé par page l'aurait laissé nu
   au deuxième montage, sans la moindre erreur en console.
   ============================================================ */
.sig-bloc { font-family: inherit; }
.sig-t { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #6B7280; margin-bottom: 10px; }
.sig-s { display: block; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #9CA3AF; margin-top: 2px; }
/* Fond quadrillé : une signature a souvent un fond transparent, et sur blanc
   pur on ne voit pas si l'image est bien là ou si le dépôt a échoué. */
.sig-zone { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 10px;
    border: 1px dashed #e5e7eb; border-radius: 14px; background-color: #fff;
    background-image: linear-gradient(45deg, #f8fafc 25%, transparent 25%), linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8fafc 75%), linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
    background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; }
.sig-img { max-height: 84px; max-width: 100%; object-fit: contain; }
.sig-vide { font-size: 12px; font-style: italic; color: #CBD5E1; }
.sig-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.sig-btn { display: inline-block; background: linear-gradient(135deg, #b369aa, #ed1c24); color: #fff; border: none;
    border-radius: 10px; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sig-btn:hover { filter: brightness(1.05); }
.sig-btn-ghost { background: #fff; border: 1px solid #e5e7eb; color: #6B7280; border-radius: 10px;
    padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sig-btn-ghost:hover { background: #F9FAFB; color: #b91c1c; }
.sig-aide { font-size: 10.5px; color: #9CA3AF; margin-top: 8px; line-height: 1.5; }
/* La portée juridique se lit sans cliquer : c'est le compte et l'horodatage
   qui engagent, pas l'image. */
.sig-legal { font-size: 10.5px; color: #78350f; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; padding: 7px 10px; margin-top: 8px; line-height: 1.5; }
.sig-trace { font-size: 10.5px; color: #6B7280; margin-top: 8px; font-style: italic; }

/* ==========================================
   LA CHARTE COALITION PLUS — trois couleurs
   ==========================================
   Posé le 2026-08-30 (demande de Thomas : « que l'Agora respecte partout les
   trois couleurs de base »).

   ⚠️ POURQUOI DES CLASSES ICI, ET PAS DU TAILWIND. `tailwind.css` est un BUILD
      FIGÉ : `text-[#ffcb08]` et `border-[#ffcb08]` y sont, mais `bg-[#ffcb08]`
      et `bg-[#ed1c24]` NON. Une classe absente du build est inerte, sans la
      moindre erreur — un fond simplement transparent. Ce fichier-ci, lui,
      s'écrit à la main : c'est le seul endroit où la charte peut être complète.

   ⚠️ LES FONDS PLEINS NE SERVENT QU'AUX BOUTONS. #ffcb08 et #ed1c24 en aplat
      derrière du texte sont illisibles ou agressifs sur une page entière : les
      encarts utilisent une teinte pâle de la même couleur, avec un texte sombre
      dérivé d'elle. C'est la charte, à une opacité lisible.

   Le sens des trois couleurs, tel qu'il est appliqué :
     · MAUVE  — l'identité, l'action principale, ce qui est en cours ;
     · JAUNE  — l'attention : provisoire, en attente, à regarder ;
     · ROUGE  — ce qui bloque ou dépasse.
   Le gris reste pour le neutre : ce n'est pas une couleur de marque, c'est du
   texte et des bordures. */

.cp-encart        { border-width: 1px; border-style: solid; }
.cp-encart-mauve  { background-color: #f7f0f6; border-color: #e2c9de; color: #7d4876; }
.cp-encart-jaune  { background-color: #fff9e6; border-color: #f5dc8a; color: #7a5c00; }
.cp-encart-rouge  { background-color: #fdeaeb; border-color: #f5b3b6; color: #a8161c; }
.cp-encart-neutre { background-color: #f8fafc; border-color: #e2e8f0; color: #475569; }

/* Le titre d'un encart : la couleur pleine, qui reste lisible sur le fond pâle. */
.cp-titre-mauve   { color: #8c4d85; }
.cp-titre-jaune   { color: #6b5000; }
.cp-titre-rouge   { color: #ed1c24; }

/* Les pastilles d'état (une marque posée sur une ligne de tableau). */
.cp-puce          { display: inline-block; padding: 2px 8px; border-radius: 9999px;
                    font-size: 10px; font-weight: 700; line-height: 1.4; }
.cp-puce-mauve    { background-color: #f0e2ee; color: #7d4876; }
.cp-puce-jaune    { background-color: #fff3c9; color: #7a5c00; }
.cp-puce-rouge    { background-color: #fbd9db; color: #a8161c; }
.cp-puce-neutre   { background-color: #f1f5f9; color: #475569; }

/* Les boutons : là, le fond plein a du sens. */
.cp-btn-mauve     { background-color: #b369aa; color: #fff; border: 1px solid #b369aa; }
.cp-btn-mauve:hover:not(:disabled)  { background-color: #9d5694; border-color: #9d5694; }
.cp-btn-jaune     { background-color: #ffcb08; color: #3f2f00; border: 1px solid #ffcb08; }
.cp-btn-jaune:hover:not(:disabled)  { background-color: #e6b607; border-color: #e6b607; }
.cp-btn-rouge     { background-color: #ed1c24; color: #fff; border: 1px solid #ed1c24; }
.cp-btn-rouge:hover:not(:disabled)  { background-color: #c8151c; border-color: #c8151c; }
/* Le bouton secondaire : blanc bordé, qui prend la couleur au survol. */
.cp-btn-neutre    { background-color: #fff; color: #475569; border: 1px solid #cbd5e1; }
.cp-btn-neutre:hover:not(:disabled) { background-color: #faf5fb; border-color: #b369aa; color: #7d4876; }
/* ⚠️ Un bouton désactivé ne doit RIEN promettre : ni couleur de marque, ni
   survol. Sans cette règle il gardait le mauve plein et l'air cliquable. */
.cp-btn-mauve:disabled, .cp-btn-jaune:disabled,
.cp-btn-rouge:disabled, .cp-btn-neutre:disabled {
    background-color: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; cursor: not-allowed;
}

/* L'onglet actif d'une barre secondaire. */
.cp-onglet        { background-color: #fff; color: #64748b; border: 1px solid #cbd5e1; }
.cp-onglet:hover  { background-color: #faf5fb; }
.cp-onglet-actif  { background-color: #b369aa; color: #fff; border: 1px solid #b369aa; }

/* ── Les utilitaires de charte, pour traduire les palettes Tailwind ──────────
   Posés le 2026-08-30 en même temps que la reprise des écrans budgétaires.
   Ils remplacent une classe Tailwind par son équivalent dans la charte, sans
   changer la grammaire du HTML : `text-indigo-700` devient `cp-txt-mauve`,
   `bg-amber-50` devient `cp-fond-jaune-pale`, etc.

   ⚠️ LE VERT RESTE. La charte n'en a pas, et repeindre « il reste de l'argent »
      en mauve le rendrait indiscernable des titres. Le vert dit une bonne
      nouvelle ; c'est une information, pas une décoration. */
.cp-fond-mauve        { background-color: #b369aa; color: #fff; }
.cp-fond-mauve-fonce  { background-color: #9d5694; color: #fff; }
.cp-fond-mauve-pale   { background-color: #f7f0f6; }
.cp-fond-jaune        { background-color: #ffcb08; color: #3f2f00; }
.cp-fond-jaune-pale   { background-color: #fff9e6; }
.cp-fond-rouge        { background-color: #ed1c24; color: #fff; }
.cp-fond-rouge-pale   { background-color: #fdeaeb; }

.cp-txt-mauve         { color: #8c4d85; }
.cp-txt-mauve-fonce   { color: #6d3f68; }
.cp-txt-jaune         { color: #7a5c00; }
.cp-txt-jaune-fonce   { color: #5c4500; }
.cp-txt-rouge         { color: #ed1c24; }
.cp-txt-rouge-fonce   { color: #a8161c; }

.cp-bord-mauve        { border-color: #e2c9de; }
.cp-bord-jaune        { border-color: #f5dc8a; }
.cp-bord-rouge        { border-color: #f5b3b6; }

/* Les anneaux (`ring-*` de Tailwind) : une ombre portée sans décalage. */
.cp-anneau-mauve      { box-shadow: 0 0 0 2px #e2c9de; }
.cp-anneau-jaune      { box-shadow: 0 0 0 2px #f5dc8a; }
.cp-anneau-rouge      { box-shadow: 0 0 0 2px #f5b3b6; }

/* ⚠️ Un survol qui gardait sa teinte Tailwind sauterait à l'œil à côté d'un
   fond de charte : on aligne les deux les plus courants. */
.cp-fond-mauve:hover:not(:disabled)       { background-color: #9d5694; }
.cp-fond-mauve-fonce:hover:not(:disabled) { background-color: #8c4d85; }
.cp-fond-jaune:hover:not(:disabled)       { background-color: #e6b607; }
.cp-fond-rouge:hover:not(:disabled)       { background-color: #c8151c; }
/* Les teintes CLAIRES : une icône décorative posée sur un fond sombre, où la
   couleur pleine crierait. */
.cp-txt-mauve-clair   { color: #d7b3d1; }
.cp-txt-jaune-clair   { color: #ffe28a; }
.cp-txt-rouge-clair   { color: #f7a8ab; }

/* Le TOTAL GÉNÉRAL d'un tableau budgétaire.
   ⚠️ Il était en bleu marine plein (`bg-slate-800`) : une barre sombre qui
   pesait plus lourd que les chiffres qu'elle porte, et hors charte. Le mauve
   PÂLE avec un filet plein au-dessus dit la même chose — « ceci est le total »
   — sans écraser la lecture du tableau. */
.cp-total-general       { background-color: #f7f0f6; color: #4a2b46; border-top: 2px solid #b369aa; }
.cp-total-general td    { padding-top: 12px; padding-bottom: 12px; }

/* Le VERT du disponible. La charte n'en a pas, et c'est assumé : « il reste de
   l'argent » est une bonne nouvelle, et la repeindre en mauve la rendrait
   indiscernable des titres. On fixe simplement la teinte pour qu'elle cohabite
   avec le mauve au lieu de jurer avec. */
.cp-txt-vert  { color: #0f7a5a; }
.cp-fond-vert { background-color: #12996f; }

/* ===== Socle responsive téléphone (2026-09-03) ==============================
   Décision de cadrage : sur téléphone, TOUT tableau devient consultable par
   défilement horizontal — on ne redessine pas les 45 fichiers qui fabriquent
   des tableaux. `display:block` sur <table> en fait son propre conteneur à
   défilement (les lignes se réenveloppent dans une boîte de tableau anonyme,
   le rendu interne ne change pas) ; seul effet de bord : un petit tableau ne
   s'étire plus sur 100 % — acceptable sous 768px, et corrigeable écran par
   écran lors de la tournée responsive.
   Opt-out ponctuel : class="no-scroll-x" sur le <table>.
   `screen` : une impression (elearning-print, A4 ≈ 794px) n'est pas touchée. */
@media screen and (max-width: 767px) {
    .global-content table:not(.no-scroll-x) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Un <select> se dimensionne à sa plus longue <option> : sur la vue Mécénat
       il poussait la page à 2 000px. ⚠️ max-width:100% ne suffit PAS : dans une
       rangée flex auto-dimensionnée le % se résout contre un parent que le
       select a lui-même gonflé (cycle). On borne donc contre la FENÊTRE (100vw,
       mesure définie qui casse le cycle) ; min-width:0 autorise en plus le
       rétrécissement en rangée flex. Le texte élu est tronqué, c'est voulu. */
    .global-content select { max-width: calc(100vw - 48px); min-width: 0; }
    /* Grille Tailwind SANS colonne de base (`grid lg:grid-cols-2`) : sous le
       breakpoint, la colonne unique se dimensionne au max-content (une carte
       de 600px débordait sous le bord masqué). On lui donne le minmax(0,1fr)
       que `grid-cols-1` aurait posé. Les grilles qui déclarent une base
       (`grid grid-cols-2 …`) ou les grilles maison (.chrono-*) ne matchent pas. */
    .global-content .grid:not([class*=" grid-cols-"]):not([class^="grid-cols-"]) {
        grid-template-columns: minmax(0, 1fr);
    }
}