:root { 
    --primary: #8e44ad; --success: #27ae60; --warning: #f39c12; --danger: #e74c3c;
    /* Teintes du degrade d'accent. Injectees cote serveur par
       includes/user_settings.php pour suivre le reglage 'accent' de l'utilisateur.
       Les defauts reproduisent a l'identique les degrades codes en dur avant. */
    --primary-2: #3498db; --primary-3: #e74c3c;
    /* Fonds et surfaces, meme mecanisme. Le theme d'origine. */
    --bg-1: #231d5b; --bg-2: #0e0a33; --bg-3: #050510;
    --panel: #24243e;
    --dark: #0f0c29; --darker: #050510; --accent: #302b63; --purple: #24243e;
    /* --panel en alpha, pour les barres fixes qui ont un backdrop-filter :
       un fond opaque y neutraliserait le flou. */
    --panel-glass: rgba(36, 36, 62, 0.88);
    /* Voile des modales, derive du fond le plus profond du theme. */
    --scrim: #0d0d22b8;
    --text: #e0e0e0; --text-dim: #a0a0a0;
    --shadow: 0 4px 15px rgba(0,0,0,0.5);
    --status-planifie: #3498db;
    --status-reserve: #f39c12;
    --status-paye-place: #e67e22;
    --status-confirme: #9b59b6;
    --status-paye: #27ae60;
    --status-gratuit: #2ecc71;
    --status-annule: #e74c3c;
    --status-backlog: #ff9f43;

    /* Bandeau "voyage partagé" sur les cartes de la page d'accueil.
       Volontairement hors du jeu de teintes du thème : l'accent reste
       réservé aux voyages qui nous appartiennent, et un simple décalage de
       nuance (primary / primary-2) se lisait comme deux verts interchangeables
       au lieu de deux catégories. Fixe, donc lisible quel que soit l'accent
       choisi par l'utilisateur. */
    --trip-band-shared: #f0a020;

    /* Surfaces & traits (blanc translucide, suffixe = pourcentage d'opacité) */
    --white-02: rgba(255,255,255,0.02);
    --white-03: rgba(255,255,255,0.03);
    --white-04: rgba(255,255,255,0.04);
    --white-05: rgba(255,255,255,0.05);
    --white-06: rgba(255,255,255,0.06);
    --white-07: rgba(255,255,255,0.07);
    --white-08: rgba(255,255,255,0.08);
    --white-10: rgba(255,255,255,0.1);
    --white-15: rgba(255,255,255,0.15);
    --white-20: rgba(255,255,255,0.2);

    /* Overlays (noir translucide) */
    --black-20: rgba(0,0,0,0.2);
    --black-25: rgba(0,0,0,0.25);
    --black-30: rgba(0,0,0,0.3);
    --black-40: rgba(0,0,0,0.4);
    --black-50: rgba(0,0,0,0.5);

    /* Déclinaisons du violet primaire (suffixe = pourcentage d'opacité) */
    --primary-10: rgba(142,68,173,0.1);
    --primary-15: rgba(142,68,173,0.15);
    --primary-20: rgba(142,68,173,0.2);
    --primary-25: rgba(142,68,173,0.25);
    --primary-30: rgba(142,68,173,0.3);
    --primary-35: rgba(142,68,173,0.35);
    --primary-40: rgba(142,68,173,0.4);
    --primary-50: rgba(142,68,173,0.5);

    /* Déclinaisons du vert succès (suffixe = pourcentage d'opacité) */
    --success-10: rgba(39,174,96,0.1);
    --success-15: rgba(39,174,96,0.15);
    --success-20: rgba(39,174,96,0.2);
    --success-30: rgba(39,174,96,0.3);
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: var(--white-03);
}
::-webkit-scrollbar-thumb {
    background: var(--primary-35);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(142,68,173,0.55);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-35) var(--white-03);
}

* {box-sizing: border-box;margin: 0;padding: 0px;}
body { font-family: 'Segoe UI', Roboto, sans-serif; background: var(--darker); color: var(--text); line-height: 1.6; overflow: hidden; height: 100vh; height: 100dvh; }

.app-layout {display: flex;flex-direction: column;/* height: 100vh; */height: 100dvh;}

.app-header {
    background: linear-gradient(to right, var(--panel), var(--accent), var(--dark));
    color: white;
    padding: 2px 8px 2px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px var(--black-30);
    border-bottom: 1px solid var(--white-10);
    /* Pas de z-index ici, volontairement. .app-header est un flex item de
       .app-layout, donc tout z-index non-auto y cree un contexte
       d'empilement : le menu compte (.user-menu-panel) en serait piege et
       ne pourrait plus jamais depasser les controles Leaflet (1000) ni le
       tiroir (3000/5000) avec son propre z-index. Le header se peint
       simplement avant #map, qui est un flex item non positionne et ne le
       recouvre pas. */
}

.back-link {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Bouton de retour explicite. Le globe du logo menait a la liste des voyages,
   mais rien n'indiquait qu'il etait cliquable, et il ne ramenait pas a la
   page d'origine. Ce bouton nomme la destination. */
.back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 36px; padding: 8px 14px; border-radius: 10px;
    background: var(--white-08); border: 1px solid var(--white-15);
    color: #fff; font-size: 0.85rem; font-weight: 600; text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.back-btn:hover { background: var(--white-15); border-color: var(--primary); }
.back-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.back-btn svg { flex: none; }

.header-content {
    flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center;
}

.trip-title-wrapper { transition: all 0.2s; padding: 5px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.trip-name {font-size: 1.1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-left: 0.6em;}
.trip-name-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; flex-shrink: 0; }
.trip-chevron { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; }

.header-stats-all { display: flex; gap: 20px; align-items: center; font-size: 0.85rem; flex-shrink: 0; }
.header-stats-all svg.lucide { vertical-align: -3px; }
.header-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.budget-total { font-weight: bold; display: inline-flex; align-items: center; gap: 5px; }
.budget-per-person { font-weight: bold; display: inline-flex; align-items: center; gap: 5px; }
.stat-item { display: inline-flex; align-items: center; gap: 4px; }
/* Wordmark Mapify a droite de l'app-header. .header-content est en flex:1,
   donc ce dernier enfant se colle au bord droit sans avoir a marginer.
   Le style est celui de la landing, en plus petit : l'app-header est dense. */
.app-logo-text {
    flex-shrink: 0;
    margin: 0 12px;
    text-align: right;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    font-weight: 900;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, var(--primary-2), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 1024px) {
    html { font-size: 110%; }
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-left: 6px;
        line-height: 1.3em;
    }
    .trip-title-wrapper {
        padding: 0;
    }
    .header-stats-all {
        gap: 12px; font-size: 0.75rem; width: 100%;
        overflow-x: auto; white-space: nowrap;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .header-stats-all::-webkit-scrollbar { display: none; }
    .header-action-btn {
        width: 32px; height: 32px; font-size: 0.85rem;
    }
}

.main-container { display: flex; flex: 1; overflow: hidden; position: relative; }
#map {flex: 1;background: #d5e8eb;}

/* ---------- Avatar (pastille a initiales) ---------- */
/* La taille vient de data-size : une seule regle pour toutes les tailles,
   les couleurs par classe modificatrice (voir avatar_html()). */
.user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 50%;
    width: var(--av-base, 34px); height: var(--av-base, 34px);
    font-size: calc(var(--av-base, 34px) * 0.38);
    font-weight: 700; letter-spacing: 0.3px; line-height: 1;
    color: #fff; text-transform: uppercase; user-select: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.user-avatar[data-size="24"] { --av-base: 24px; }
.user-avatar[data-size="28"] { --av-base: 28px; }
.user-avatar[data-size="34"] { --av-base: 34px; }
.user-avatar[data-size="40"] { --av-base: 40px; }
.user-avatar[data-size="52"] { --av-base: 52px; }
.user-avatar--c0 { background: #8e44ad; }
.user-avatar--c1 { background: #3498db; }
.user-avatar--c2 { background: #1abc9c; }
.user-avatar--c3 { background: #e67e22; }
.user-avatar--c4 { background: #d63384; }
.user-avatar--c5 { background: #16a085; }
.user-avatar--c6 { background: #f39c12; }
.user-avatar--c7 { background: #2980b9; }

/* Menu compte du header. La puce est un <button> et non un <a> : elle
   ouvre un menu, elle ne navigate pas. */
.user-menu { position: relative; flex: none; }
.user-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 5px 13px 5px 5px; border-radius: 999px;
    background: var(--white-05); border: 1px solid var(--white-10);
    color: var(--text); text-decoration: none;
    /* <button> : on herite la police du parent, sinon le navigateur
       applique sa police par defaut et la puce change d'aspect. */
    font-family: inherit; cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.user-chip:hover { background: var(--white-08); border-color: var(--primary); transform: translateY(-1px); }
.user-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.user-chip-name { font-size: 0.85rem; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-chevron {
    width: 14px; height: 14px; flex: none;
    color: var(--text-dim);
    transition: transform 0.2s;
}
.user-chip[aria-expanded="true"] .user-chip-chevron { transform: rotate(180deg); }

/* Panel aligne sur le modele du menu "..." des voyages (home.css).
   9000 : au-dessus du contenu et des panneaux flottants (3000 a 6000),
   en dessous des modales (9999 et 10000) et du menu des notes (11000),
   qui doivent pouvoir le recouvrir. */
.user-menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 9000;
    min-width: 196px; padding: 5px;
    background: var(--darker); border: 1px solid var(--white-10);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.user-menu-item {
    display: flex; align-items: center; gap: 9px;
    min-height: 38px; padding: 8px 10px; border-radius: 8px;
    color: var(--text); font-size: 0.88rem; text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--white-05); }
.user-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.user-menu-item svg { flex: none; color: var(--text-dim); transition: color 0.2s; }
.user-menu-sep { height: 1px; margin: 5px 8px; background: var(--white-10); }
/* La deconnexion prend la teinte d'alerte au survol, comme le lien
   equivalent du header le faisait avant. */
.user-menu-item--logout:hover, .user-menu-item--logout:focus-visible { background: rgba(231, 76, 60, 0.14); color: var(--danger); }
.user-menu-item--logout:hover svg, .user-menu-item--logout:focus-visible svg { color: var(--danger); }

/* ---------- Toasts ----------
   Ici et plus dans modals.css : un toast n'appartient pas aux modales, et
   settings.php n'importe pas cette feuille-la. Le composant est dans
   assets/js/toast.js, charge par toutes les pages ; le conteneur est cree par
   le script, jamais ecrit en dur dans une page.

   En haut a gauche : c'est la seule zone de l'ecran que rien n'occupe en
   permanence -- le haut est barre par le header, la bas par la barre de
   navigation mobile et, sur les reglages, par le bouton de sortie. Un retour
   temporaire en bas serait lu apres le doigt, donc trop tard. */
.toast-container {
    position: fixed; top: 130px; left: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
    /* Le conteneur traverse une bande entiere de l'ecran : il ne doit pas
       intercepter un clic sur la page. Les .toast, eux, restent cliquables
       pour etre fermes. */
    pointer-events: none;
}
@media (max-width: 1024px) {
    .toast-container { top: 80px; }
}

.toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 12px;
    background: var(--panel-glass); border: 1px solid var(--white-10);
    border-left: 4px solid var(--primary);
    color: var(--text); font-size: 0.85rem; line-height: 1.45;
    box-shadow: 0 8px 24px var(--black-40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: slideInLeft 0.28s ease-out;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto; cursor: pointer;
}
/* La couleur porte deux fois : le filet de gauche, large, pour le coup d'oeil
   perifherique, et l'icone, pour le message long qu'on lit de loin. */
.toast--success { border-left-color: var(--success); }
.toast--success .toast-icon { color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--error .toast-icon { color: var(--danger); }
.toast--info .toast-icon { color: var(--primary); }

.toast-icon { flex: none; margin-top: 1px; }
.toast-text { min-width: 0; overflow-wrap: anywhere; }
.toast.is-out { opacity: 0; transform: translateX(-14px); }

@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Le toast porte une information qu'on attend (une confirmation, une erreur) :
   son deplacement est un decor, pas le message. */
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .toast.is-out { transform: none; transition: opacity 0.2s; }
}