@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --cyan:#00B8AC;
  --violet:#6E5CE6;
}

html[data-theme="night"]{
  --bg:#0a0e14;
  --panel:#1a1f28;
  --panel-2:#252d38;
  --text:#e0e6ed;
  --text-secondary:#b0b7c6;
  --muted:#7a8199;
  --line:#2a3542;
  --accent1:#5AD1E6;
  --accent2:#8B7CFF;
  --danger:#FF6B6B;
  --shadow:0 8px 30px rgba(0,0,0,0.35);
  /* Version transparente de --panel (effet vitre dépolie sur les blocs
     principaux) en rgba() littéral plutôt qu'en color-mix() : un navigateur
     un peu ancien comprend rgba() depuis toujours, alors que color-mix() est
     assez récent (2023) pour ne pas être garanti partout. */
  --panel-glass:rgba(26,31,40,0.62);
  /* Nettement plus sombre que le fond d'une case ordinaire (--panel) : à
     #181D2C, seul le bleu variait de quatre points et les week-ends ne se
     distinguaient plus des jours de semaine. */
  --weekend-bg:#0f141d;
  --holiday-bg:rgba(255,107,107,0.10);
  --holiday-border:rgba(255,107,107,0.35);
  /* Actions : bleu = consulter/télécharger, orange = modifier, rouge = supprimer */
  --action-view:#5AD1E6;
  --action-edit:#FFB84D;
  --action-delete:#FF6B6B;
  --action-on:#000; /* texte posé sur une de ces couleurs */
}

html[data-theme="day"]{
  --bg:#EEF0F6;
  --panel:#FFFFFF;
  --panel-2:#E7E9F1;
  --text:#10121C;
  --text-secondary:#464B5F;
  --muted:#464B5F;
  --line:#CDD1DE;
  --accent1:#0B8F84;
  --accent2:#5A46D6;
  --danger:#C6304A;
  --shadow:0 8px 24px rgba(20,20,40,0.09);
  --panel-glass:rgba(255,255,255,0.62);
  --weekend-bg:#E1E4EE;
  --holiday-bg:rgba(198,48,74,0.08);
  --holiday-border:rgba(198,48,74,0.35);
  /* Teintes assombries : les tons du mode nuit sont illisibles sur fond clair */
  --action-view:#0B8F84;
  --action-edit:#B36A00;
  --action-delete:#C6304A;
  --action-on:#FFFFFF;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  position:relative;
  font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); display:flex;
  /* Sur mobile, 100vh désigne la fenêtre barre d'URL rétractée : le bas de la
     page passe alors sous la barre d'outils du navigateur. 100dvh suit la
     hauteur réellement disponible, barre affichée ou non. La ligne en vh sert
     de repli aux navigateurs qui ignorent dvh. */
  min-height:100vh; min-height:100dvh;
  transition:background .3s ease, color .3s ease;
}
a{color:inherit; text-decoration:none;}

/* Fond d'écran de l'appli : voir body::before/::after, définis en ligne dans
   layout_header.php (pas ici). Une URL relative dans une variable CSS se
   résout par rapport à la feuille de style qui l'UTILISE, pas à celle qui la
   déclare — définie ici mais utilisée dans ce fichier externe, elle aurait
   pointé vers assets/css/assets/img/... au lieu de assets/img/... (testé,
   confirmé en double "assets/assets/" dans l'URL calculée). Tout reste donc
   dans le même <style> en ligne que la page de connexion, qui n'a jamais eu
   ce problème pour la même raison. */

/* ===== BARRES DE DÉFILEMENT ===== */
/* Firefox : ni rayon ni dégradé possibles, on se limite à la couleur du thème. */
html{scrollbar-width:thin; scrollbar-color:var(--accent1) transparent;}

/* WebKit : la bordure transparente + background-clip amincissent le pouce sans
   réduire la zone cliquable, et laissent le rayon bien visible. */
::-webkit-scrollbar{width:12px; height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent1),var(--accent2));
  background-clip:content-box;
  border:3px solid transparent;
  border-radius:20px;
}
::-webkit-scrollbar-thumb:hover{border-width:2px;}
::-webkit-scrollbar-corner{background:transparent;}

/* ===== SIDEBAR ===== */
.sidebar{
  width:260px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; flex-shrink:0; transition:background .3s ease, border-color .3s ease;
  /* Repli d'abord (navigateur sans color-mix/backdrop-filter : garde l'aplat
     plein d'origine), puis la version vitre dépolie qui le remplace si le
     navigateur la comprend — jamais l'inverse, sous peine de perdre tout
     fond sur un navigateur qui ignore color-mix(). */
  background:var(--panel);
  background:var(--panel-glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.brand{padding:26px 22px; border-bottom:1px solid var(--line);}
.brand-mark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;}

/* Marque : une image par thème, le logotype texte prenant le relais tant qu'un
   fichier manque. La hauteur est portée par le conteneur (.brand-mark,
   .cx-marque) pour que le logo suive la taille prévue à chaque endroit. */
.marque{display:inline-flex; align-items:center; line-height:1;}
.marque-logo, .marque-texte{display:none;}
.marque-logo{height:1.5em; width:auto;}
html[data-theme="night"] .marque-logo-nuit{display:block;}
html[data-theme="day"]   .marque-logo-jour{display:block;}
html[data-theme="night"] .marque-texte-nuit{display:inline;}
html[data-theme="day"]   .marque-texte-jour{display:inline;}
.marque-texte span{color:var(--accent1);}

.nav{padding:16px 0; flex:1; overflow-y:auto;}
/* Un filet ouvre chaque zone : à 10 px sans séparation, les titres se noyaient
   dans la suite des entrées et la navigation se lisait comme une liste unique. */
.nav-group{
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted);
  padding:16px 22px 8px; margin-top:8px; font-weight:700;
  border-top:1px solid var(--line);
}
.nav-group:first-child{border-top:none; margin-top:0; padding-top:4px;}
.nav-item{padding:11px 22px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:11px; cursor:pointer; border-left:2px solid transparent; font-weight:500; transition:color .2s;}
.nav-item.active{color:var(--text); border-left-color:var(--accent1); background:linear-gradient(90deg, rgba(0,184,172,0.10), transparent);}
.nav-item:hover{color:var(--text);}
.sidebar-foot{padding:18px 22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px;}

/* ===== Bascule Liste/Grille du menu bureau =====
   Un seul bouton, même schéma que .theme-toggle (jour/nuit) : il porte le
   libellé du mode courant, le clic bascule — voir basculerDispositionMenu()
   dans app.js. L'affichage liste/grille lui-même se pilote par l'attribut
   data-menu-disposition posé sur <html> (appliqué avant le rendu pour
   éviter le clignotement — script en tête de layout_header.php), pas par
   une classe sur .nav : évite tout flash de la mauvaise disposition à
   l'ouverture. */
.nav-disposition-rangee{display:flex; align-items:center; justify-content:space-between; padding:0 22px; margin-top:14px;}
.nav-disposition-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted); font-weight:700;}
.nav-disposition-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; font-size:13px; line-height:1;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  color:var(--text-secondary); cursor:pointer; user-select:none; transition:border-color .2s ease;
}
.nav-disposition-toggle:hover{border-color:var(--accent1);}
.nav-disposition-icon{display:none;}
html[data-menu-disposition="liste"] .nav-disposition-icon-liste{display:inline;}
html[data-menu-disposition="grille"] .nav-disposition-icon-grille{display:inline;}
html[data-menu-disposition="liste"] #navGrille{display:none;}
html[data-menu-disposition="grille"] #navListe{display:none;}

/* Grille : même langage visuel que le panneau « Plus » mobile (.mm-grille),
   mais toujours actif (pas gardé par une media query — .mm-grille ne l'est
   que sous 900 px, réservé au panneau mobile). */
.sidebar-grille-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 8px; padding:4px 14px 8px;}
.sidebar-grille-item{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; cursor:pointer;}
.sidebar-grille-icone{
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:20px; position:relative; transition:transform .12s ease;
}
.sidebar-grille-item:active .sidebar-grille-icone{transform:scale(.92);}
.sidebar-grille-item.on .sidebar-grille-icone{box-shadow:inset 0 0 0 2px var(--accent1);}
.sidebar-grille-c-cyan{background:color-mix(in srgb, var(--accent1) 16%, var(--panel));}
.sidebar-grille-c-violet{background:color-mix(in srgb, var(--accent2) 16%, var(--panel));}
.sidebar-grille-libelle{font-size:10.5px; font-weight:600; line-height:1.25; color:var(--muted);}
.sidebar-grille-item.on .sidebar-grille-libelle{color:var(--accent1);}
.sidebar-grille-icone .nav-pastille{
  position:absolute; top:-4px; right:-4px; margin-left:0;
  min-width:16px; height:16px; line-height:16px; font-size:9.5px; padding:0 3px;
  box-shadow:0 0 0 2px var(--panel);
}

.role-switch{border-top:1px solid var(--line); padding-top:12px;}
.role-switch-label{font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin-bottom:8px; font-weight:700;}
.role-switch-options{display:flex; gap:4px;}
.role-switch-opt{flex:1; text-align:center; font-size:10px; font-weight:700; padding:6px 4px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); text-decoration:none;}
.role-switch-opt.active{background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#0A0C12; border-color:transparent;}
.role-switch-opt:hover:not(.active){color:var(--text);}
.avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent1),var(--accent2)); display:flex;align-items:center;justify-content:center;font-weight:700;color:#0A0C12;font-size:13px;}
img.avatar{object-fit:cover;}
.u-name{font-size:12.5px; font-weight:600;} .u-role{font-size:10.5px; color:var(--muted);}
.logout-link{margin-top:10px; display:block; font-size:11.5px; color:var(--danger); font-weight:600;}

/* ===== MAIN ===== */
.main{flex:1; overflow-y:auto; min-width:0;}
.topbar{
  padding:26px 36px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line); flex-wrap:wrap; gap:14px; max-width:1400px;
  margin-inline:auto; box-sizing:border-box;
  /* Reste visible au défilement de .main (le vrai conteneur de scroll de
     l'appli, pas la fenêtre) : logo, titre de page et cloche de
     notifications à portée quel que soit l'endroit de la page. */
  position:sticky; top:0; z-index:30; background:var(--bg); width:100%;
}
.topbar-left{display:flex; align-items:center; gap:14px; min-width:0;}
/* Marque et groupe actif dans la barre du haut : affichés sur mobile seulement,
   où la barre latérale est fermée (voir la requête média plus bas). */
.topbar-brand{display:none; align-items:baseline; gap:8px; min-width:0;}
.topbar-groupe{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.hamburger{display:none; background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:8px; width:38px;height:38px; font-size:16px; cursor:pointer;}
.page-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px;}
.page-sub{font-size:12.5px; color:var(--muted); margin-top:3px;}
.topbar-right{display:flex; align-items:center; gap:14px;}

.btn{border:none; padding:11px 20px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;}
.btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#0A0C12;}
.btn-secondary{background:var(--panel-2); color:var(--text); border:1px solid var(--line);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-sm{padding:7px 12px; font-size:12px; border-radius:8px;}

/* ===== BOUTONS D'ACTION (convention de couleur) =====
   À utiliser pour les actions portant sur une ligne / un élément.
   .btn-primary et .btn-secondary restent réservés aux formulaires
   (créer, enregistrer, annuler). */
.btn-view, .btn-edit, .btn-delete{background:transparent; border:1.5px solid;}
.btn-view{border-color:var(--action-view); color:var(--action-view);}
.btn-view:hover{background:var(--action-view); color:var(--action-on);}
.btn-edit{border-color:var(--action-edit); color:var(--action-edit);}
.btn-edit:hover{background:var(--action-edit); color:var(--action-on);}
.btn-delete{border-color:var(--action-delete); color:var(--action-delete);}
.btn-delete:hover{background:var(--action-delete); color:var(--action-on);}

/* Bascule jour/nuit : un seul bouton, qui porte le logo du mode courant. */
.theme-toggle{display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; font-size:16px; line-height:1;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; user-select:none; transition:border-color .2s ease, background .2s ease;}
.theme-toggle:hover{border-color:var(--accent1);}
.theme-icon{display:none;}
html[data-theme="day"] .theme-icon-jour{display:inline;}
html[data-theme="night"] .theme-icon-nuit{display:inline;}

/* Au-delà d'une certaine largeur, les blocs s'étirent sans rien gagner et les
   lignes deviennent pénibles à suivre : le contenu est borné et centré. */
.content{padding:32px 36px; max-width:1400px; margin-inline:auto; width:100%; box-sizing:border-box;}

/* ===== STATS ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px;}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow);}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat-label{font-size:11.5px; color:var(--muted); margin-top:4px; font-weight:500;}

.section-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; margin-bottom:16px; color:var(--text); display:flex; align-items:center; justify-content:space-between;}

/* ===== RÉCAP PAR GROUPE (dashboard) ===== */
.groupe-recap-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;}
.groupe-recap-col{background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--accent1); border-radius:12px; padding:18px;}
.groupe-recap-header{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:12px;}
.groupe-recap-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.groupe-recap-count{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:32px; line-height:1;}
.groupe-recap-label{font-size:11px; color:var(--muted); margin-bottom:4px;}
.groupe-recap-list{margin-top:12px; border-top:1px solid var(--line); padding-top:10px; max-height:160px; overflow-y:auto;}
.groupe-recap-item{display:flex; gap:8px; font-size:12px; padding:4px 0; align-items:baseline;}
.groupe-recap-item-date{color:var(--accent1); font-weight:700; flex-shrink:0;}
.groupe-recap-item-name{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ===== CARDS GRID ===== */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; transition:border-color .2s;}
.card:hover{border-color:var(--accent1);}
.card-date{font-size:11px; color:var(--accent1); font-weight:600; letter-spacing:0.5px;}
.card-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16.5px; margin:6px 0 8px;}
.card-meta{font-size:12.5px; color:var(--muted); line-height:1.7;}
.card-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.badge{display:inline-block; margin-top:12px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; background:rgba(0,184,172,0.15); color:var(--accent1);}
.badge.pending{background:rgba(110,92,230,0.18); color:var(--accent2);}
.badge.cancelled{background:rgba(255,107,107,0.18); color:var(--danger);}
.badge.option{background:rgba(255,184,77,0.18); color:#FFB84D;}

.card-urgent{border-color:var(--danger); background:rgba(224,69,90,0.1);}
.card-urgent:hover{border-color:var(--danger);}
.card-urgent .card-name{color:var(--danger);}
.card-muted{opacity:0.75;}

/* ===== TABLE ===== */
.table-wrap{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--panel);
  background:var(--panel-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); padding:14px 16px; border-bottom:1px solid var(--line); font-weight:600;}
td{padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px;}
tr:last-child td{border-bottom:none;}
/* surbrillance au survol des tableaux de l'application — jamais dans une zone d'édition (le contenu d'un e-mail doit garder son rendu d'origine) */
tr:not([contenteditable] *):hover td{background:var(--panel-2);}

/* ===== FORMS ===== */
.form-group{margin-bottom:16px;}
label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--muted);}
input, select, textarea{
  width:100%; padding:11px 14px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent1); border-color:var(--accent1);}
input[type="color"]{padding:4px; height:44px; cursor:pointer;}
input[readonly]{opacity:0.6; cursor:not-allowed; background:var(--bg);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-actions{display:flex; gap:10px; margin-top:20px;}

/* Dans une popup (création/modification) : les boutons restent accessibles
   sans avoir à dérouler tout le formulaire jusqu'en bas — collés au bas de la
   fenêtre de la popup pendant que le reste défile derrière eux.
   Le padding bas de .fr-modal-body est retiré (via :has ci-dessous) plutôt que
   compensé par une marge négative : combinée à position:sticky, une marge
   négative ne comble pas l'écart de façon fiable et laissait un vide visible
   entre les boutons et le bas de la popup sur téléphone. */
.fr-modal-body:has(.form-actions){ padding-bottom:0; }
/* Popup notes de frais à étapes (#nfModal) : .form-actions n'existe que dans
   l'étape 3 (toujours dans le DOM, juste masquée ailleurs), donc le :has()
   ci-dessus matche même sur les étapes 1/2/recadrage sans barre collée —
   classe posée par nfEtape() (notes_frais.php) pour rétablir la marge basse. */
.fr-modal-body.fr-modal-body-sans-actions{ padding-bottom:28px; }
@media (max-width:900px){
  .fr-modal-body.fr-modal-body-sans-actions{ padding-bottom:18px; }
}
.fr-modal .form-actions{
  position:sticky; bottom:0; z-index:3;
  margin:20px -28px 0; padding:14px 28px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line);
  /* Une règle générique (.form-actions en dessous de 768px) empile les
     formulaires en colonne, boutons pleine largeur — pensée pour un
     formulaire de page classique. Dans une popup, toujours une seule ligne. */
  flex-direction:row !important; flex-wrap:nowrap;
}
.fr-modal .form-actions .btn,
.fr-modal .form-actions button{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  width:auto !important;
}
@media (max-width:900px){
  .fr-modal .form-actions{ margin:20px -18px 0; padding:12px 18px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); gap:8px; }
  .fr-modal .form-actions .btn,
  .fr-modal .form-actions button{ padding:10px 12px; font-size:12px; }
}

/* ===== FILTERS ===== */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.filter-chip{padding:8px 16px; background:var(--panel-2); border:1px solid var(--line); border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--muted);}
.filter-chip.active{background:var(--accent1); color:#0A0C12; border-color:var(--accent1);}
.search-box{flex:1; min-width:200px;}

/* Membres (contacts.php) : avatar + badge de rôle + ligne fonction, réservés
   à la carte mobile (voir la media query plus bas) — sur ordinateur le
   tableau classique (colonnes Fonction/Rôle séparées) suffit déjà. */
.ctm-membre-cell{display:contents;}
.ctm-avatar-zone{display:none;}
.ctm-fonction-mobile{display:none;}
/* Actions de la ligne Membres : boutons séparés sur ordinateur (assez de
   place), un seul "⋯" replié sur mobile (voir la media query plus bas). */
.ctm-actions-desktop{display:flex; gap:6px; justify-content:flex-end;}
.ctm-actions-mobile{display:none;}

/* Organisateurs : même principe — département/type/historique répétés à
   côté du nom, coordonnées + menu "⋯" réservés à la carte mobile. */
.orga-ligne-haut-mobile{display:none;}
.orga-ligne-bas-mobile{display:none;}

/* Ligne dépliable (adresse, notes...) — sur toutes les tailles d'écran, pas
   seulement mobile : ces champs n'ont de colonne dédiée nulle part.
   max-height animée par JS (posée sur scrollHeight, voir orgaBasculerDetail
   dans organisateurs.php) : ni display ni la hauteur d'une <tr> ne
   s'animent proprement tout seuls. */
.orga-detail-wrap{
  max-height:0; overflow:hidden;
  transition:max-height .25s ease, padding .25s ease;
  padding:0 20px;
}
.orga-detail-wrap.open{padding:12px 20px;}
.orga-detail-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:8px 18px;
}
.orga-detail-grid > div span{
  display:block; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted);
}
.orga-detail-grid > div strong{font-size:12.5px; font-weight:600; color:var(--text); line-height:1.4;}
.orga-detail-full{grid-column:1 / -1;}
/* Champs à copier/ouvrir en un clic (e-mail, téléphone, adresse → Maps) —
   distincts visuellement des champs simplement informatifs (contact, type). */
.orga-detail-copiable{cursor:pointer; border-radius:6px; margin:-3px -6px; padding:3px 6px;}
.orga-detail-copiable:hover{background:var(--panel-2);}
.orga-detail-copiable strong{color:var(--accent1) !important;}
/* Contact/Type/E-mail/Téléphone du dépliant : déjà visibles tels quels dans
   les colonnes du tableau à partir de 901px (voir organisateurs.php) —
   masqués ici pour ne pas les répéter. Gardés en dessous, où seule une partie
   figure déjà dans la carte de base. */
@media (min-width:901px){
  .orga-detail-doublon-pc{display:none;}
}

/* Bouton "✕" dans les champs de recherche — voir champRechercheEffacer()
   dans app.js. N'importe quel champ de recherche existant (.search-box,
   .evt-barre-input...) s'y adapte en s'entourant simplement de ce wrapper,
   sans rien changer à sa propre classe : le champ garde son flex:1 habituel,
   c'est le wrapper (lui-même flex:1) qui le porte désormais. Le bouton natif
   des <input type="search"> est masqué pour n'avoir jamais les deux à la fois. */
.champ-recherche{position:relative; display:flex; flex:1; min-width:0; align-items:center;}
.champ-recherche input{padding-right:28px !important;}
.champ-recherche-x{
  display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center;
  background:none; border:none; color:var(--muted); font-size:12px; line-height:1; cursor:pointer;
}
.champ-recherche-x:hover{background:var(--panel-2); color:var(--text);}
.champ-recherche input:not(:placeholder-shown) ~ .champ-recherche-x{display:flex;}
input[type="search"]::-webkit-search-cancel-button{display:none;}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center; padding:60px 20px; color:var(--muted);}
.empty-state .icon{font-size:40px; margin-bottom:12px;}

/* ===== ALERTS ===== */
.alert{padding:12px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:18px;}
.alert-success{background:rgba(0,229,214,0.12); color:var(--accent1); border:1px solid var(--accent1);}
.alert-error{background:rgba(255,107,107,0.12); color:var(--danger); border:1px solid var(--danger);}

/* ===== CALENDRIER ===== */
.cal-header-centered{display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:32px; padding:20px 0;}
.cal-header-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:32px; color:var(--text);}
.cal-nav-arrow{width:44px; height:44px; border-radius:12px; background:var(--panel); border:1px solid var(--line); color:var(--accent1); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; transition:all .2s; font-weight:700;}
.cal-nav-arrow:hover{background:var(--accent1); color:var(--bg); border-color:var(--accent1);}

/* ===== FILTRE À BASCULE (composant commun) =====
   Une seule apparence pour tous les filtres — statuts de la carte, groupes du
   calendrier : pastille arrondie qui porte sa couleur en --chip, allumée quand
   le filtre est actif (.on), éteinte sinon. Les deux familles avaient chacune
   leur style et, pire, des conventions inverses (.on ici, .inactive là). */
.chip-filtre{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  flex:0 1 auto; min-width:0;
  border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; font-weight:600; font-family:inherit;
  color:var(--muted); background:var(--panel);
  cursor:pointer; user-select:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.chip-filtre:hover{color:var(--text);}
.chip-filtre:focus-visible{outline:2px solid var(--accent1); outline-offset:2px;}
.chip-filtre-pastille{width:10px; height:10px; border-radius:50%; background:var(--chip); opacity:.3; flex-shrink:0;}
.chip-filtre-nom{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Actif : la couleur du filtre teinte le fond et la bordure. */
.chip-filtre.on{color:var(--text); border-color:var(--chip); background:color-mix(in srgb, var(--chip) 18%, transparent);}
.chip-filtre.on .chip-filtre-pastille{opacity:1;}
/* La case cochée reste dans le flux mais invisible : c'est l'étiquette qui se
   voit, et le clavier atteint quand même la case. */
.chip-filtre input{position:absolute; width:1px; height:1px; opacity:0;}

/* Filtres de groupe : alignés à gauche comme le reste de la page et tenus sur
   une seule ligne — les pastilles se resserrent plutôt que de passer à la ligne,
   et un nom trop long s'abrège, l'infobulle le donnant en entier. */
.cal-groupe-filters{display:flex; gap:8px; flex-wrap:nowrap; margin-bottom:20px;}

@media (max-width:900px){
  /* Au doigt, une pastille de 30 px de haut se rate : hauteur portée à la cible
     tactile minimale. Les filtres se partagent la ligne à parts égales — une
     seule ligne, quel que soit le nombre de groupes. */
  .cal-groupe-filters{gap:6px; margin-bottom:16px;}
  .cal-groupe-filters .chip-filtre{
    flex:1 1 0; min-height:44px; padding:8px 10px;
    justify-content:center; border-radius:12px;
  }
}

.cal-view-toggle{display:flex; gap:12px; background:var(--panel); padding:16px; border-radius:12px; border:1px solid var(--line); width:fit-content; margin:0 auto 32px;}
.cal-view-toggle > a{padding:10px 20px; border-radius:10px; font-weight:600; font-size:14px; transition:all .2s; border:none; background:transparent; color:var(--muted); text-decoration:none;}
.cal-view-toggle > a.active{background:var(--accent1); color:var(--bg);}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; max-width:1400px; margin-left:auto; margin-right:auto;}
.cal-weekday-label{text-align:center; font-size:12px; font-weight:700; color:var(--accent1); text-transform:uppercase; padding:8px;}

.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-width:1400px; margin:0 auto;}
.cal-day{background-color:var(--panel); border:1px solid var(--line); border-radius:10px; height:130px; overflow:hidden; padding:8px; transition:background .3s ease, border-color .2s ease, transform .15s ease; cursor:pointer; position:relative; display:flex; flex-direction:column;}
/* Au-delà de l'espace visible, les événements du jour défilent dans leur
   propre zone plutôt que d'être tronqués avec un "+N autres" — la case
   entière (numéro du jour, badge indispo) reste fixe pendant le défilement. */
.cal-day-events{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;}
.cal-day-events::-webkit-scrollbar{width:4px;}
.cal-day-events::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px;}
.cal-day-msg-icon{position:absolute; top:4px; right:4px; font-size:13px;}
/* En mobile, le format de case change (plus compact) : l'enveloppe descend
   en bas à gauche pour ne pas gêner le numéro du jour ni l'indicateur d'indispo. */
@media (max-width:900px){.cal-day-msg-icon{top:auto; right:auto; bottom:4px; left:4px;}}
.cal-mobile-view{display:none;}
.cal-desktop-view{display:block;}
.calendar-popup{position:fixed; top:100px; right:20px; width:400px; max-height:600px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); z-index:10000; display:flex; flex-direction:column; opacity:1; transition:opacity 0.3s ease-out, max-height 0.3s ease-out; overflow:hidden;}
.calendar-popup.minimized{max-height:40px;}
.calendar-popup.minimized .calendar-popup-content{display:none;}
.calendar-popup-header{padding:12px 16px; border-bottom:1px solid var(--line); cursor:move; display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--text);}
.calendar-popup-content{flex:1; min-height:0; overflow-y:auto; padding:12px; font-size:12px;}
@media (max-width:900px){.calendar-popup-btn{display:none !important;}}
@media (max-width:900px){.tasks-popup-btn{display:none !important;}}
@media (max-width:900px){
  .cal-desktop-view{display:none;}
  .cal-mobile-view{display:block;}
  .cal-mobile-view .mini-month-large{max-width:100%; margin:0;}
  .cal-mobile-view .mini-grid{gap:2px;}
}
/* ===== BARRE DE NAVIGATION DU CALENDRIER ===== */
/* Sur ordinateur : période à gauche, mode à droite, sur une ligne au-dessus du
   calendrier. */
.cal-barre{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px; padding:10px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.cal-barre-periode{display:flex; align-items:center; gap:6px; min-width:0;}
.cal-barre-titre{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px;
  min-width:9ch; text-align:center; white-space:nowrap;
}
.cal-nav-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0; border-radius:9px; font-size:19px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  transition:border-color .15s ease, color .15s ease;
}
.cal-nav-arrow:hover{border-color:var(--accent1); color:var(--accent1);}

/* Bascule mois/année : deux segments d'un même bouton, plutôt que deux pastilles
   indépendantes — l'un des deux est toujours actif. */
.cal-barre-mode{
  display:inline-flex; flex-shrink:0; padding:3px; gap:3px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
.cal-mode-opt{
  padding:6px 16px; border-radius:7px; font-size:13px; font-weight:600;
  color:var(--muted); white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.cal-mode-opt:hover{color:var(--text);}
.cal-mode-opt.on{background:var(--accent1); color:#06222a;}

/* Bouton "trois points" de la barre de nav : replie le filtre groupe et la
   légende, qui prendraient sinon trop de place au-dessus des onglets.
   Masqué par défaut — n'existe que sur téléphone (media query ci-dessous). */
.cal-barre-more{
  display:none; flex-shrink:0; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; font-size:20px; line-height:1;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
}

/* Panneau replié : caché par défaut sur toutes les tailles d'écran, ne
   s'affiche que sur téléphone et seulement une fois ouvert (voir plus bas). */
.cal-barre-extra{display:none;}

/* Bouton pleine largeur "Ajouter / voir mon agenda Google" en bas du
   calendrier — display:flex nécessaire : un <a class="btn"> reste "inline"
   par défaut, où width:100% n'a aucun effet. */
.cal-google-agenda-btn{ display:flex; width:100%; justify-content:center; margin:18px 0; }

@media (max-width:900px){
  /* Valeur de départ (barre d'onglets sur une ligne) : app.js la remplace par la mesure réelle, mais sans elle la barre flottante
     s'afficherait un instant collée au bas de l'écran puis remonterait. */
  :root{ --tabbar-h:76px; }
  /* Sur téléphone la barre quitte le haut de page pour se poser au-dessus des
     onglets, là où le pouce l'atteint sans remonter tout le calendrier. */
  .cal-barre{
    position:fixed; left:8px; right:8px; z-index:59; margin:0;
    bottom:calc(8px + var(--tabbar-h, 0px));
    padding:8px 10px; gap:10px; flex-wrap:nowrap;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    background:color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter:blur(6px);
  }
  /* Pendant un balayage des mois (classe posée par le script de calendrier.php), les barres du bas perdent leur flou d'arrière-plan :
     avec des mois qui glissent dessous, les navigateurs mobiles font disparaître un instant les éléments fixes munis de backdrop-filter.
     Le fond devient plein (même couleur) le temps du geste ; le flou revient ensuite. */
  html.cal-balayage .cal-barre, html.cal-balayage .cal-barre-extra, html.cal-balayage .tabbar-mobile{
    -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--panel);
  }
  .cal-barre-periode{flex:1; justify-content:space-between;}
  .cal-barre-titre{font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .cal-nav-arrow{width:32px; height:32px;}
  .cal-mode-opt{padding:6px 12px; font-size:12px;}
  .cal-barre-more{display:inline-flex; width:32px; height:32px;}

  /* La barre de mois devient fixe par-dessus le bas de page (règle
     ci-dessus) : sans cette marge, le dernier bloc de contenu (le bouton
     agenda Google) se retrouverait masqué dessous une fois la page scrollée
     jusqu'en bas. */
  .cal-google-agenda-btn{ margin-bottom:calc(8px + var(--tabbar-h, 0px) + 60px); }

  /* Le filtre groupe et la légende "normaux" laissent place au panneau replié. */
  #calGroupeFilters, .cal-legende-standard{display:none;}

  .cal-barre-extra{
    position:fixed; left:8px; right:8px; z-index:58;
    bottom:calc(8px + var(--tabbar-h, 0px) + 58px);
    max-height:60vh; overflow-y:auto;
    padding:14px; border-radius:12px;
    background:color-mix(in srgb, var(--panel) 96%, transparent);
    border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
  }
  .cal-barre-extra:not(.open){display:none;}
  .cal-barre-extra.open{display:block;}
  .cal-barre-extra .cal-groupe-filters{flex-wrap:wrap; margin-bottom:14px;}
}

/* ===== BARRE DE MENU (recherche/filtres/ajout) — TOUTES TAILLES D'ÉCRAN =====
   Composant partagé par événements, fiches de route, messagerie, devis,
   organisateurs, production, notes de frais, corbeille, tâches : remplace
   partout l'ancien en-tête (.page-toolbar + rangées de pastilles .filters),
   dont l'affichage est maintenant désactivé en permanence ci-dessous — plus
   seulement sur mobile. Même composant visuel des deux côtés, seule la
   position change : ligne normale en haut de page sur ordinateur, carte
   flottante au-dessus de la barre d'onglets sur téléphone (media query plus
   bas). Classes partagées entre pages/evenements.php (id evtBarreMobile),
   pages/fiches_route.php (id frBarreMobile), etc. */
#evtToolbarDesktop, #evtGroupeFiltersDesktop, #evtTabs,
#frToolbarDesktop, #frGroupeFiltersDesktop, #frTabs,
#msgToolbarDesktop, #msgGroupeTabs, #msgTabs,
#devisToolbarDesktop, #devisTabs, #orgaToolbarDesktop, #prodToolbarDesktop,
#nfToolbarDesktop, #tachToolbarDesktop, #tachGroupeFiltersDesktop,
#corbeilleGroupeFilters, #indispoToolbarDesktop, #groupesToolbarDesktop{display:none;}

/* Corbeille : le type (9 catégories) reste un bouton par onglet plutôt qu'un
   select — trop pour une liste déroulante confortable — mais intégré dans la
   barre de menu comme le reste (#corbeilleTypeTabs déplacé dans
   #corbeilleBarreMobile, pas laissé à part), avec un fond propre à chaque
   bouton puisqu'il ne vit plus dans .evt-barre-mode. */
#corbeilleBarreMobile #corbeilleTypeTabs{display:flex; flex-wrap:wrap; gap:6px;}
#corbeilleBarreMobile #corbeilleTypeTabs .filter-chip{
  padding:6px 10px; border-radius:7px; font-size:12px; font-weight:600;
  background:var(--panel-2); border:1px solid var(--line); color:var(--muted);
  cursor:pointer; white-space:nowrap;
}
#corbeilleBarreMobile #corbeilleTypeTabs .filter-chip.active{background:var(--accent1); border-color:var(--accent1); color:#06222a;}
/* Sur mobile en revanche, pas la place pour 9 boutons : select compact à la
   place (media query plus bas), donc masqué par défaut ici. */
.corbeille-type-select-mobile{display:none;}
/* Recherche corbeille : champ direct sur ordinateur (assez de place), loupe +
   panneau replié sur mobile (voir la media query plus bas pour l'inverse). */
.corbeille-recherche-mobile-btn{display:none;}

.evt-barre-mobile{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:16px; padding:10px 12px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);
}
.evt-barre-select{
  flex:1; min-width:160px; height:34px; padding:0 8px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-size:12.5px; font-weight:600; font-family:inherit;
}
/* Recherche affichée directement dans la barre (pas de loupe repliable) —
   pages qui n'ont que ça et le bouton d'ajout : organisateurs, production,
   devis. */
.evt-barre-input{
  flex:1; min-width:160px; height:34px; padding:0 10px; border-radius:9px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  font-size:12.5px; font-family:inherit;
}
.evt-barre-input::placeholder{color:var(--muted);}
.evt-barre-mode{
  display:inline-flex; flex-shrink:0; padding:3px; gap:3px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
.evt-mode-opt{
  padding:6px 10px; border-radius:7px; font-size:12px; font-weight:600;
  color:var(--muted); white-space:nowrap; background:none; border:none; font-family:inherit;
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.evt-mode-opt.on{background:var(--accent1); color:#06222a;}
.evt-barre-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:9px; font-size:16px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
}
/* Bouton d'ajout : carré 34×34 avec juste "➕" sur mobile (espace compté),
   mais élargi avec son libellé ("+ Ajouter", "+ Nouvel événement"...) sur
   ordinateur où la place ne manque pas — voir evt-barre-texte-desktop,
   masqué par la media query mobile plus bas. */
.evt-barre-icon-accent{
  background:var(--accent1); border-color:var(--accent1); color:#06222a;
  width:auto; padding:0 16px; gap:6px; font-size:13px; font-weight:700;
}
.evt-barre-texte-desktop{display:inline;}
/* Variante avec libellé (ex. "▤ Filtres") — largeur libre au lieu du carré
   34×34 fixe des icônes seules. */
.evt-barre-icon-texte{width:auto; padding:0 12px; gap:6px; font-size:12.5px; font-weight:600;}
/* Pas :disabled (bloquerait le clic) — le bouton reste cliquable pour
   pouvoir afficher un message explicatif (ex. "sélectionne d'abord..."),
   voir nfMajSelection()/nfTelechargerSelectionPdf() dans notes_frais.php. */
.evt-barre-icon.evt-barre-icon-desactive{
  opacity:.35; cursor:pointer;
  background:transparent; border-style:dashed; color:var(--muted); filter:grayscale(1);
}

/* Panneau replié (recherche seule, ou filtres complets pour notes de frais) :
   masqué tant qu'on ne l'a pas ouvert, apparaît ensuite en carte juste sous
   la barre — même sur ordinateur, pour rester cohérent avec le mobile
   plutôt que d'y garder l'ancien bloc de filtres toujours visible. */
.evt-barre-recherche, .nf-filtres-panel{
  display:none; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-6px 0 16px; padding:12px; border-radius:12px;
  background:var(--panel); border:1px solid var(--line);
}
.evt-barre-recherche.open, .nf-filtres-panel.open{display:flex;}

/* Bouton d'action contextuelle flottant (télécharger le PDF de la sélection,
   notes de frais) : sur ordinateur, #nfBtnPdf (dans le panneau de filtres,
   toujours affiché quand la sélection existe) suffit — celui-ci reste donc
   masqué, quoi qu'en dise son style inline (nfMajSelection() en JS), d'où le
   !important. La media query mobile plus bas le réactive, seul repère
   d'action utile là où le panneau de filtres est replié. */
.nf-fab-pdf{display:none !important; position:relative;}
.nf-fab-pdf .nav-pastille{position:absolute; top:-6px; right:-6px; margin-left:0;}

/* Case "tout cocher ce mois" dupliquée dans le titre de section pour mobile
   (le thead qui la porte normalement est masqué en mode carte) — cachée par
   défaut, réactivée par la media query mobile ci-dessous. */
.nf-select-mois-mobile{display:none;}

@media (max-width:900px){
  /* Corbeille sur mobile : select compact plutôt que 9 boutons, pas la place. */
  #corbeilleBarreMobile #corbeilleTypeTabs{display:none;}
  .corbeille-type-select-mobile{display:block;}

  /* Recherche corbeille : sur mobile, loupe + panneau replié plutôt que le
     champ direct (pas la place à côté des boutons de type/groupe) — le
     wrapper .champ-recherche est masqué avec lui, sinon il resterait un
     encart vide (flex:1 sur un enfant display:none). */
  .champ-recherche:has(.corbeille-recherche-desktop){display:none;}
  .corbeille-recherche-mobile-btn{display:flex;}

  /* Sur téléphone, la barre et ses panneaux quittent le fil de la page pour
     flotter au-dessus de la barre d'onglets, à portée du pouce — même
     principe que .cal-barre du calendrier. */
  .evt-barre-mobile{
    position:fixed; left:8px; right:8px; z-index:59;
    bottom:calc(8px + var(--tabbar-h, 0px));
    margin-bottom:0; padding:8px 10px;
    background:color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter:blur(6px);
    box-shadow:0 6px 20px rgba(0,0,0,.35);
  }
  .evt-barre-select, .evt-barre-input{min-width:0;}
  .evt-barre-icon-accent{width:34px; padding:0; gap:0;}
  .evt-barre-texte-desktop{display:none;}

  .evt-barre-recherche, .nf-filtres-panel{
    flex-direction:column; align-items:stretch;
    position:fixed; left:8px; right:8px; z-index:58;
    bottom:calc(8px + var(--tabbar-h, 0px) + 50px);
    margin:0; max-height:60vh; overflow-y:auto;
    background:color-mix(in srgb, var(--panel) 96%, transparent);
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
  }
  .nf-filtres-panel select, .nf-filtres-panel input[type="date"]{width:100%;}

  /* display piloté en JS via l'attribut style (nfMajSelection()), pas ici —
     seule la position change entre carré posé dans la barre (ordinateur) et
     bouton flottant au-dessus d'elle (téléphone). */
  .nf-fab-pdf{
    position:fixed; right:8px; z-index:59; margin-left:0;
    bottom:calc(8px + var(--tabbar-h, 0px) + 50px);
    box-shadow:0 6px 16px rgba(0,0,0,.35);
  }
}

/* ===== LÉGENDE DU CALENDRIER ===== */
/* Chaque repère reprend les couleurs de la case qu'il décrit : une teinte
   modifiée plus haut se propage ici sans retouche. */
.cal-legende{margin-top:20px; display:flex; flex-direction:column; gap:10px;}
.cal-legende-ligne{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;}
.cal-legende-item{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted);}
.cal-legende-case{width:13px; height:13px; border-radius:4px; flex-shrink:0;
                  background:var(--panel); border:1px solid var(--line);}
.cal-legende-weekend{background:var(--weekend-bg);}
.cal-legende-today{border:2px solid var(--accent1);}
.cal-legende-indispo{background:var(--danger);}
/* Même rayon que les pastilles de date posées dans les cases (.cal-evt). */
.cal-legende-pastille{width:11px; height:11px; border-radius:5px; flex-shrink:0; display:inline-block;}
.cal-legende-annule{background:#E0455A;}
.cal-legende-groupe{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
                    padding-top:8px; border-top:1px solid var(--line);}
.cal-legende-groupe-nom{font-size:11px; font-weight:700;}

.cal-day:hover{border-color:var(--accent1); transform:translateY(-2px); box-shadow:var(--shadow);}
.cal-day.weekend{background-color:var(--weekend-bg);}
.cal-day.weekend .cal-day-num{color:var(--text-secondary);}
/* Un férié se lit comme un week-end : même fond, il s'en distingue par son
   libellé (.cal-holiday-label) et non par la couleur. */
.cal-day.holiday{background-color:var(--weekend-bg);}
.cal-day.holiday .cal-day-num{color:var(--text-secondary);}
.cal-day.has-indispo{}
.cal-day.today{border-color:var(--accent1); border-width:2px;}
/* Jour survolé depuis la liste des événements du mois. Contour en var(--text)
   plutôt que var(--accent1) : accent1 est aussi la couleur de fond par défaut
   des jours à événement (--dot-color) et le contour de "today", donc un
   contour accent1 devenait invisible pile sur les jours qui nous intéressent.
   var(--text) contraste toujours, quelle que soit la couleur du groupe. */
.cal-day.is-highlighted{border-color:var(--text); box-shadow:inset 0 0 0 2px var(--text), var(--shadow); transform:translateY(-2px);}
/* Pas d'ombre : dans cette vue le numéro est posé sur le fond de la case, jamais
   sur une couleur — les dates ont leur propre pastille (.cal-evt), et le cas de
   l'indisponibilité est traité plus bas. */
.cal-day-num{font-size:14px; font-weight:800; color:var(--text); display:flex; align-items:center; justify-content:flex-start; gap:4px;}
.cal-indispo-indicator{font-size:9px; font-weight:600; opacity:0.9; display:flex; align-items:center; gap:3px;}
.cal-indispo-indicator .indispo-text{display:inline;}
.cal-indispo-indicator .indispo-icon{display:none;}
@media (max-width:900px){.cal-indispo-indicator .indispo-text{display:none;} .cal-indispo-indicator .indispo-icon{display:inline;}}
.cal-indispo-count{font-size:8px; font-weight:600; opacity:0.9; display:inline-flex; align-items:baseline; gap:3px;}
.cal-indispo-count .indispo-chiffre{font-size:13px; font-weight:800;}
.cal-indispo-count .indispo-text{display:inline;}
.cal-indispo-count .indispo-icon{display:none; font-size:9px;}
/* Seuil différent des 900px du reste de la page : en dessous de 900px la
   grille desktop (.cal-desktop-view) disparaît déjà au profit de la vue
   mobile, donc ce texte ne serait jamais vu en mode "petit". La grille
   desktop reste elle-même affichée jusqu'à 900px et peut y être étroite. */
@media (max-width:1100px){.cal-indispo-count .indispo-text{display:none;} .cal-indispo-count .indispo-icon{display:inline;}}
.cal-day.has-indispo .cal-day-num{background-color:#E0455A; padding:6px 10px; border-radius:4px; border:none; outline:none; text-shadow:0 0 2px rgba(0,0,0,0.4), 0 0 4px rgba(0,0,0,0.3); color:#fff; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,0.25);}
@media (max-width:900px){.cal-day.has-indispo{background-color:#E0455A; color:#fff;} .cal-day.has-indispo .cal-day-num{color:#fff; background-color:transparent; padding:0; text-shadow:none; box-shadow:none; font-weight:700; font-size:14px;} .cal-day.has-indispo .cal-day-num::after{display:none;} .cal-day.has-indispo .cal-day-num br{display:none;}}
.mini-day.has-indispo{font-weight:900;}
.mini-day.has-indispo::after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px; height:20px; background-color:#E0455A; border-radius:3px; z-index:-1; pointer-events:none;}
.mini-day.has-indispo {z-index:1;}
.cal-day.today .cal-day-num{color:var(--accent1);}
.cal-day.holiday .cal-day-num{color:var(--text-secondary);}
.cal-holiday-label{font-size:9.5px; color:var(--text); font-weight:700; text-transform:uppercase; letter-spacing:0.3px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0.85;}
.cal-evt{display:block; font-size:11px; font-weight:700; margin-top:4px; padding:4px 7px; border-radius:5px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5); overflow:hidden;}
.cal-evt-groupe{display:block; font-size:8.5px; font-weight:600; opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;}
.cal-evt-nom{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;}

/* Liste des événements du mois */
.cal-month-events-section{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin-top:28px;}
.cal-month-events-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--accent1); margin-bottom:16px;}
/* Bloc "Restreints — vous n'êtes pas concerné(e)" : rétractable, triangle de
   décoration natif de <summary> gardé (léger, cohérent entre navigateurs). */
.cal-month-restreints{margin-bottom:24px;}
.cal-month-restreints summary::-webkit-details-marker{margin-right:4px;}
.cal-month-restreints summary:hover{color:var(--text);}
.cal-month-evt-card{background:var(--panel-2); border-left:4px solid var(--accent1); border-radius:8px; padding:14px 16px; margin-bottom:10px;}
.cal-month-evt-date{font-size:11.5px; color:var(--muted); margin-bottom:4px;}
.cal-month-evt-name{font-weight:700; font-size:14.5px; margin-bottom:4px;}
.cal-month-evt-meta{font-size:12px; color:var(--muted);}
.cal-month-evt-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}

.cal-month-evt-card-mini{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--panel); border-left:4px solid var(--accent1); border-radius:8px; padding:12px 16px; margin-bottom:10px; flex-wrap:wrap; border:1px solid var(--line); border-left:4px solid var(--accent1); transition:all .2s;}
/* Pas de :hover sur le fond : la carte porte une teinte inline (couleur du
   groupe pour ce statut/type, voir calendrier.php) qu'un survol écraserait sinon. */
.cal-month-evt-card-mini:hover{border-color:var(--accent1);}
.cal-month-evt-mini-main{cursor:pointer; display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;}
.cal-month-evt-mini-title{font-weight:600; font-size:14px; white-space:normal; overflow:hidden; text-overflow:ellipsis; line-height:1.3;}
.cal-month-evt-mini-meta{font-size:12px; color:var(--text-secondary); white-space:normal; overflow:hidden; text-overflow:ellipsis;}
.meteo-chip.meteo-ok{display:inline-flex; cursor:pointer;}
.meteo-chip{display:none; align-items:center; gap:4px; font-size:11px; color:var(--muted); white-space:nowrap;}
/* Pastille météo à cheval sur le coin haut gauche du bloc date (calendrier + liste Événements) */
.date-chip{position:relative;}
.date-chip .meteo-chip{position:absolute; top:-9px; left:-14px; z-index:1; justify-content:center; min-width:22px; height:22px; box-sizing:border-box; padding:0 4px; border-radius:999px; font-size:12px; background:var(--panel); border:1px solid var(--line); line-height:1; box-shadow:0 1px 3px rgba(0,0,0,.18);}
.meteo-chip .mt-long{display:none;}
/* Pastille météo dans l'entête du popup jour, après la date */
.meteo-chip.meteo-entete.meteo-ok{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0; font-size:17px; line-height:1; border:1px solid var(--line); border-radius:999px; background:var(--panel);}
/* Mini pastille météo dans le coin bas gauche d'une case de jour du calendrier */
.meteo-chip.meteo-jour-mini{pointer-events:none; cursor:inherit; position:absolute; bottom:6px; left:3px; font-size:11px; line-height:1; z-index:2;}
.mini-month-large .meteo-chip.meteo-jour-mini{font-size:10px; bottom:4px; left:2px;}
/* Carré collé au bord droit d'une carte, sous le liseré dégradé de 3 px (carte « Prochain événement » du dashboard) */
.meteo-chip.meteo-carre.meteo-ok{display:flex !important; position:absolute; top:3px; right:0; width:36px; height:36px; box-sizing:border-box; padding:0; align-items:center; justify-content:center; font-size:19px; line-height:1; background:rgba(0,0,0,.18); border:0; border-left:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 0 0 10px; z-index:2;}
/* Liste Événements en affichage mobile : carré météo collé à l'angle haut droit de la ligne (clic : tableau heure par heure) */
@media (max-width:900px){
  .tableau-evenements .date-chip{position:static;}
  .tableau-evenements .date-chip .meteo-chip.meteo-ok{display:flex; position:absolute; top:0; right:0; left:auto; transform:none; width:32px; height:32px; min-width:0; box-sizing:border-box; padding:0; align-items:center; justify-content:center; font-size:17px; line-height:1; background:rgba(0,0,0,.18); border:0; border-left:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 9px 0 10px; box-shadow:none; z-index:2;}
}
/* Mobile : titre seul sur une ligne pleine largeur (rognée avec « … »), puis bloc date à gauche, type au-dessus de l'adresse, bouton à droite (carte du calendrier) */
.evt-type-badge-mobile{display:none;}
.meteo-chip.meteo-titre{display:none !important;}   /* ordinateur : la pastille reste sur le coin du bloc date */
@media (max-width:768px){
  .cal-month-evt-card-mini{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:4px;}
  .cal-month-evt-card-mini .cal-month-evt-mini-main, .cal-month-evt-card-mini .cal-month-evt-mini-main > div{display:contents !important;}   /* !important : la div porte un display:flex en style inline */
  .cal-month-evt-card-mini .cal-month-evt-mini-title{display:block; grid-column:1 / -1; grid-row:1; min-width:0; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cal-month-evt-card-mini .meteo-titre.meteo-ok + .cal-month-evt-mini-title{grid-column:1 / 3;}   /* le titre s'arrête avant la pastille météo, en haut à droite */
  .cal-month-evt-card-mini .evt-type-badge, .cal-month-evt-card-mini .evt-prod-nom{display:none;}   /* type + production passent au-dessus de l'adresse */
  .cal-month-evt-card-mini .date-chip .meteo-chip{display:none !important;}
  .cal-month-evt-card-mini .meteo-chip.meteo-titre.meteo-ok{display:flex !important; position:absolute; top:0; right:0; width:36px; height:36px; min-width:0; box-sizing:border-box; padding:0; align-items:center; justify-content:center; font-size:19px; line-height:1; background:rgba(0,0,0,.18); border:0; border-left:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0 7px 0 10px; box-shadow:none;}   /* carré collé au coin haut droit de la carte */
  .cal-month-evt-card-mini .evt-type-badge-mobile{display:flex; align-items:center; gap:6px; min-width:0; grid-column:2; grid-row:2; align-self:end; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cal-month-evt-card-mini .date-chip{grid-column:1; grid-row:2 / span 2;}
  .cal-month-evt-card-mini .cal-month-evt-mini-meta{grid-column:2; grid-row:3; min-width:0; align-self:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cal-month-evt-card-mini .cal-month-evt-mini-actions{grid-column:3; grid-row:2 / span 2;}
}
.cal-month-evt-mini-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.cal-month-evt-mini-actions .btn{padding:6px 12px; font-size:11px; border-radius:6px;}

/* Vue Année */
.year-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
.mini-month{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;}
.mini-month-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px; margin-bottom:10px; text-transform:capitalize; display:flex; justify-content:space-between; align-items:center; position:relative;}
.mini-month-title a{font-size:14px; font-weight:700; color:var(--accent1); text-decoration:none; transition:all .2s; position:absolute; right:0; top:0;}
.mini-month-title a:hover{color:var(--fill-accent); font-size:15px;}
.mini-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.mini-weekday{font-size:8px; text-align:center; color:var(--muted); font-weight:700; padding:2px 0;}
.mini-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:9.5px; border-radius:4px; color:var(--text); position:relative; cursor:pointer;}
.mini-day.has-event {text-shadow:0 0 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.4);}
.mini-day:hover{outline:1.5px solid var(--accent1);}
.mini-day.weekend{background:var(--weekend-bg); color:var(--text-secondary);}
.mini-day.holiday{background:var(--weekend-bg); color:var(--text-secondary);}
.mini-day.has-event{background-color:var(--dot-color, var(--accent1)); color:#fff; font-weight:700;}
.mini-day.has-event.weekend{background-color:var(--dot-color, var(--accent1)); color:#fff;}
.mini-day.has-event.holiday{background-color:var(--dot-color, var(--accent1)); color:#fff;}
.mini-day.has-indispo{font-weight:700; color:#fff;}
.mini-day.has-indispo.weekend{color:#fff;}
.mini-day.has-indispo.holiday{color:#fff;}
.mini-day.has-event.has-indispo{background-color:var(--dot-color, var(--accent1)); color:#fff; font-weight:700;}
.mini-day.has-event.has-indispo.weekend{background-color:var(--dot-color, var(--accent1)); color:#fff;}
.mini-day.has-event.has-indispo.holiday{background-color:var(--dot-color, var(--accent1)); color:#fff;}
/* Le pavé rouge de l'indisponibilité couvre toute la case : le numéro doit
   rester lisible dessus. Sans le préfixe .mini-month-large, la couleur grise du
   week-end l'emportait ici — sélecteur plus spécifique — et le numéro
   disparaissait sur le rouge. */
.mini-month-large .mini-day.has-indispo,
.mini-month-large .mini-day.has-indispo.weekend,
.mini-month-large .mini-day.has-indispo.holiday{color:#fff; font-weight:700;}

/* Pastilles avec un chiffre, coin de la case — calendrier année et vue
   mobile (mini_month). Toujours contenues DANS le carré de la date (pas de
   décalage négatif qui déborderait de la case). */
.mini-indispo-badge,
.mini-evt-badge{position:absolute; right:1px; border-radius:50%; color:#fff; font-weight:800; text-align:center; z-index:2;}
.mini-evt-badge{top:1px; background:none; min-width:11px; height:11px; padding:0 2px; font-size:7px; line-height:11px;}
.mini-indispo-badge{min-width:8px; height:8px; padding:0 1px; font-size:5.5px; line-height:8px;}
/* Le carré rouge d'indispo est le ::after ci-dessous (20x20px, centré dans
   la case, indépendant de la taille de la case) — la pastille se cale sur
   SON coin bas-droit à lui, pas sur celui de la case entière. */
.mini-indispo-badge{top:50%; left:50%; right:auto; bottom:auto; transform:translate(calc(-50% + 10px), calc(-50% + 10px)); background:#E0455A;}
.mini-month-large .mini-evt-badge{min-width:15px; height:15px; font-size:9.5px; line-height:15px;}
.mini-month-large .mini-indispo-badge{min-width:11px; height:11px; font-size:7px; line-height:11px;}

/* Enveloppe "messages disponibles" — coin bas-gauche, symétrique aux
   pastilles nombre d'événements/indispo qui occupent déjà le coin haut. */
.mini-msg-icon{position:absolute; left:1px; bottom:1px; font-size:7px; line-height:1; z-index:2;}
.mini-month-large .mini-msg-icon{font-size:11px;}

.mini-day.today{outline:1.5px solid var(--text);}
.mini-day.holiday::before{content:"🎌"; position:absolute; top:1px; left:1px; font-size:9px; line-height:1;}
.mini-day.empty{visibility:hidden; cursor:default;}
/* Jour survolé depuis une liste d'événements à côté (tableau de bord). Contour
   en var(--text) (pas accent1, déjà pris par --dot-color et "today" — voir
   .cal-day.is-highlighted) + agrandissement : reste visible même si une
   couleur venait à coïncider malgré tout. */
.mini-day.is-highlighted{outline:2px solid var(--text); outline-offset:-2px; transform:scale(1.18); z-index:2; box-shadow:0 3px 10px rgba(0,0,0,0.4);}

/* Mini-calendrier agrandi (tableau de bord) : mêmes classes .mini-* que la vue
   Année du calendrier, mais celle-ci n'affiche qu'un seul mois — on peut donc
   se permettre plus grand sans casser la grille de 12 mois de l'autre page. */
.mini-month-large{max-width:400px; width:100%;}
.mini-month-large .mini-month{padding:20px; position:relative;}
.mini-month-large .mini-month-title{font-size:17px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; position:absolute; top:-60px; left:0; right:0; margin:0; width:100%;}
.mini-month-large .mini-month-label{display:none;} /* Masquer le mois : redondant avec le titre affiché ailleurs (dashboard, en-tête du mois) */
.mini-month-large .mini-month-title a{font-size:16px; font-weight:700; color:var(--accent1);}
/* Vue Année, et vue Mois sur mobile : contrairement au dashboard (où le mois
   est déjà affiché ailleurs sur la page), rien d'autre ne nomme le mois ici —
   le nom doit rester visible. */
.year-grid .mini-month-title,
.cal-mobile-view .mini-month-title{position:relative; top:auto; margin:0 0 10px;}
.year-grid .mini-month-label,
.cal-mobile-view .mini-month-label{display:inline;}
.mini-month-large .mini-grid{gap:5px;}
.mini-month-large .mini-weekday{font-size:11px; padding:4px 0;}
.mini-month-large .mini-day{font-size:16px; border-radius:6px;}
/* L'ombre ne sert qu'à détacher le numéro d'un fond coloré — date ou
   indisponibilité. Sur une case vide ou un week-end, elle ne faisait que salir
   le chiffre. */
.mini-month-large .mini-day.has-event,
.mini-month-large .mini-day.has-indispo{text-shadow:0 0 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.4);}
.mini-month-large .mini-day.weekend{background:var(--weekend-bg); color:var(--text-secondary);}
.mini-month-large .mini-day.holiday{background:var(--weekend-bg); color:var(--text-secondary);}
.mini-month-large .mini-day.has-event{background-color:var(--dot-color, var(--accent1)); color:#fff; font-weight:700;}
.mini-month-large .mini-day.has-event.weekend{background-color:var(--dot-color, var(--accent1)); color:#fff;}
.mini-month-large .mini-day.has-event.holiday{background-color:var(--dot-color, var(--accent1)); color:#fff;}
.mini-month-large .mini-day.holiday::before{font-size:12px;}

/* Amélioration de la légende */
.groupe-color-legend{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; font-size:12px; color:var(--text-secondary); padding:8px 0; border-top:0.5px solid var(--border);}
.groupe-color-legend span{display:flex; align-items:center; gap:6px;}
.groupe-color-legend .dot{width:10px; height:10px; border-radius:0px; flex-shrink:0;} /* Carré au lieu de point */

/* ===== FICHE DE ROUTE (popup réutilisable) ===== */
.fr-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:100;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:30px 16px;
}
.fr-overlay.open{display:flex;}
/* Plafonné à la fenêtre moins le padding de l'overlay (30px en haut et en bas).
   C'est la modale qui défile, pas la page : l'en-tête sticky reste ainsi visible. */
.fr-modal{background:var(--bg); border:1px solid var(--line); border-radius:16px; max-width:900px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.5); max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); overflow-y:auto;}
.fr-modal-header{flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:22px 28px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); border-radius:16px 16px 0 0; z-index:2;}
.fr-modal-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;}
.fr-modal-close{background:var(--panel-2); border:1px solid var(--line); color:var(--text); width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:16px;}
.fr-modal-body{padding:24px 28px 28px;}

.fr-section{
  border:1px solid var(--line); border-left:4px solid var(--accent1); border-radius:8px; padding:24px 26px; margin-bottom:28px;
  background:var(--panel);
  background:var(--panel-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.fr-section.c-danger{border-left-color:var(--danger);}
.fr-section.c-accent2{border-left-color:var(--accent2);}
.fr-section.c-amber{border-left-color:#FFB84D;}
/* Champ obligatoire manquant à la validation : le bloc/sous-bloc concerné est
   déplié automatiquement (voir evenement.js, événement "invalid") et surligné
   en rouge le temps d'être corrigé. */
.fr-section.fr-section-erreur{border-color:var(--danger); box-shadow:0 0 0 1px var(--danger);}
.fr-subblock.fr-subblock-erreur{outline:1.5px solid var(--danger);}
.fr-section-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:8px; letter-spacing:0.3px;}

/* Bouton crayon replier/déplier un bloc (Créer événement) : affiche un résumé
   texte du contenu quand il est replié, plutôt que les champs de saisie. */
.fr-toggle-btn{
  margin-left:auto; background:none; border:1px solid var(--line); color:var(--accent1);
  font-size:11.5px; font-weight:600; font-family:inherit; letter-spacing:0; text-transform:none;
  padding:4px 10px; border-radius:20px; cursor:pointer; flex-shrink:0;
}
.fr-toggle-btn:hover{background:var(--panel-2);}
.fr-section-summary, .fr-subblock-summary{
  display:none; font-size:12.5px; color:var(--muted); line-height:1.6;
  background:var(--panel-2); border-radius:8px; padding:10px 12px; margin:0 0 14px;
}
/* Une information par ligne — lisible avant compact, quitte à prendre plus de
   hauteur qu'un paragraphe dense séparé par des points. */
.fr-resume-ligne{padding:3px 0;}
.fr-resume-ligne + .fr-resume-ligne{border-top:1px solid var(--line);}
.fr-resume-ligne strong{color:var(--text); font-weight:700;}
.fr-resume-vide{font-style:italic;}
.fr-resume-vide-inline{opacity:.5;}
.fr-resume-detail{opacity:.75; font-size:.95em;}
.fr-resume-montant{color:var(--accent1);}
.fr-subblock-montant-titre{margin-left:10px; font-size:13px;}
/* Total en bas du résumé de la Calculette — repris en grand, comme le total
   du sous-bloc "Total" déplié (même famille de police/couleur). */
.fr-resume-total{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px;
  color:var(--accent1); text-align:center; margin-top:8px; padding-top:10px;
  border-top:1px solid var(--line);
}
.fr-section.fr-section-collapsed .fr-section-body{display:none;}
.fr-section.fr-section-collapsed .fr-section-summary{display:block;}
.fr-section.fr-section-collapsed .fr-section-title{margin-bottom:10px;}
.fr-subblock.fr-subblock-collapsed .fr-subblock-body{display:none;}
.fr-subblock.fr-subblock-collapsed .fr-subblock-summary{display:block;}
.fr-subblock.fr-subblock-collapsed .fr-subblock-title{margin-bottom:8px;}

.fr-subblock{background:var(--panel-2); border-radius:10px; padding:14px 16px; margin-bottom:14px;}
.fr-subblock-title{font-size:12.5px; font-weight:700; margin-bottom:10px; color:var(--accent1); display:flex; align-items:center; justify-content:space-between; gap:8px;}
.fr-subblock .fr-subblock-summary{background:var(--panel);}
.fr-checkbox-label{display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; margin-bottom:10px;}
.fr-checkbox-label input{width:auto;}
/* Sélecteur de couleur façon Google Agenda : un bouton rond montrant la
   couleur actuelle, qui ouvre un mini popup avec les pastilles de la palette
   officielle Google Calendar (11 couleurs) — aucun choix libre. */
.color-swatch-picker{display:flex; align-items:center; gap:10px; margin-top:4px;}
.color-swatch-nom{font-size:13px; color:var(--muted);}
.color-swatch-trigger{width:30px; height:30px; border-radius:50%; border:2px solid var(--line); padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink:0;}
.color-swatch-trigger:hover{border-color:var(--accent1);}
/* position:fixed (et non absolute) : le popup est déplacé dans <body> en JS
   pour échapper au contexte d'empilement de .fr-section (backdrop-filter),
   donc ses coordonnées top/left sont calculées en JS par rapport au
   viewport (getBoundingClientRect), pas au document. */
.color-swatch-popup{display:none; position:fixed; z-index:1000; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.28); flex-wrap:wrap; gap:8px; width:216px;}
.color-swatch-popup.open{display:flex;}
.color-swatch{width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); position:relative;}
.color-swatch.selected{border-color:var(--accent1); box-shadow:0 0 0 2px var(--panel), 0 0 0 3px var(--accent1);}
.color-swatch.selected::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; text-shadow:0 0 2px rgba(0,0,0,.6);}
.fr-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.fr-grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.fr-hidden{display:none;}

/* ===== GROS ENCART EN-TÊTE FICHE DE ROUTE ===== */
.fr-fiche-hero{background:linear-gradient(135deg, var(--panel), var(--panel-2)); border:2px solid var(--accent1); border-radius:16px; padding:28px 32px; margin-bottom:24px; max-width:820px; text-align:center;}
.fr-fiche-hero-date{font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin-bottom:6px;}
.fr-fiche-hero-nom{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px; color:var(--text); margin-bottom:8px;}
.fr-fiche-hero-groupe{font-size:15px; font-weight:700;}

/* ===== DÉBRIEF RAPIDE FICHE DE ROUTE ===== */
.fr-debrief{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin-bottom:20px; max-width:820px;}
.fr-debrief-item{background:var(--panel); border:1px solid var(--accent1); border-radius:10px; padding:12px 10px; text-align:center;}
.fr-debrief-label{font-size:10px; text-transform:uppercase; letter-spacing:0.3px; color:var(--muted); font-weight:700; margin-bottom:4px;}
.fr-debrief-value{font-size:14px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:900px){ .fr-debrief{grid-template-columns:repeat(2,1fr);} }

/* ===== LIENS MAPS + LISIBILITÉ CONTACTS (fiche de route) ===== */
.fr-map-link{color:var(--accent1); text-decoration:none; border-bottom:1px dashed var(--accent1); display:inline-block; margin-top:2px;}
.fr-map-link:hover{border-bottom-style:solid;}

.fr-contact-card{display:flex; align-items:center; gap:12px; background:var(--panel-2); border-radius:10px; padding:12px 14px; margin-bottom:8px;}
.fr-contact-icon{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.fr-contact-info{flex:1; min-width:0;}
.fr-contact-role{font-size:10.5px; text-transform:uppercase; letter-spacing:0.4px; color:var(--muted); font-weight:700;}
.fr-contact-nom{font-size:14px; font-weight:700; margin:2px 0;}
.fr-contact-tel{font-size:12.5px; color:var(--accent1); text-decoration:none;}
.fr-contact-tel:hover{text-decoration:underline;}

/* Hero section pour fiches de route */
.fr-fiche-hero{padding:20px; background:var(--panel); border-radius:12px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,0.05); border:1px solid var(--line);}
.fr-fiche-hero-date{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;}
.fr-fiche-hero-nom{font-size:22px; font-weight:700; color:var(--text); margin:8px 0;}
.fr-fiche-hero-groupe{font-size:13px; margin-top:8px; font-weight:600;}

.fr-info-row{display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
.fr-info-row:last-child{border-bottom:none;}
.fr-info-icon{font-size:16px; flex-shrink:0; width:22px; text-align:center;}
.fr-info-text{font-size:13.5px; line-height:1.6; flex:1;}
.fr-info-text .muted-note{color:var(--muted); font-size:12.5px; display:block; margin-top:2px;}

/* Contact card pour fiches de route */
.fr-contact-card{background:var(--panel-2); padding:12px; margin-bottom:12px; border-radius:8px; border:1px solid var(--line); display:flex; gap:12px;}
.fr-contact-icon{font-size:20px; flex-shrink:0;}
.fr-contact-info{flex:1;}
.fr-contact-role{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px;}
.fr-contact-nom{font-size:13px; font-weight:600; margin-bottom:4px;}
.fr-contact-tel{display:inline-block; font-size:12px; margin-top:2px;}

/* ===== AUTOCOMPLÉTION ADRESSE ===== */
.ev-address-suggestions{position:absolute; top:100%; left:0; right:0; background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-top:4px; max-height:220px; overflow-y:auto; z-index:20; box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.ev-address-suggestion{padding:10px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line);}
.ev-address-suggestion:last-child{border-bottom:none;}
.ev-address-suggestion:hover{background:var(--panel-2);}
.ev-address-suggestion .main{font-weight:600;}
.ev-address-suggestion .sub{font-size:11px; color:var(--muted);}
.ev-address-detail{font-size:11px; color:var(--muted); margin-top:4px; line-height:1.6;}

/* ===== STATUT ÉVÉNEMENT (pastilles) ===== */
.ev-statut-pills{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.ev-statut-pill{border:2px solid var(--line); border-radius:10px; padding:12px; text-align:center; font-weight:700; font-size:13px; cursor:pointer; color:var(--muted); transition:all .15s;}
.ev-statut-pill:hover{border-color:var(--pill-color);}
.ev-statut-pill.active{border-color:var(--pill-color); background:var(--pill-color); color:#0A0C12;}

.fr-preview{background:var(--panel-2); border-left:3px solid var(--accent1); border-radius:10px; padding:16px 18px; margin-top:14px; display:none;}
.fr-preview.show{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.fr-preview-label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;}
.fr-preview-value{font-size:13px; font-weight:700;}

.fr-remove-btn{background:var(--danger); color:#fff; border:none; padding:5px 10px; border-radius:6px; font-size:11px; cursor:pointer; font-weight:700;}

@media (max-width:900px){
  .fr-grid-2, .fr-grid-3, .fr-preview.show{grid-template-columns:1fr;}
  .fr-modal-body{padding:18px;}
  .fr-modal-header{padding:16px 18px;}
}

/* ===== POPUP JOUR (calendrier) ===== */
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes slideIn{from{opacity:0; transform:scale(0.95);} to{opacity:1; transform:scale(1);}}
.dp-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:100; align-items:center; justify-content:center; padding:20px; opacity:0; animation:fadeIn 0.3s ease-out forwards;}
.dp-overlay.open{display:flex;}
.dp-modal{background:var(--panel); border:1px solid var(--line); border-radius:12px; max-width:560px; width:100%; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5); animation:slideIn 0.3s ease-out forwards; opacity:0.95; backdrop-filter:blur(2px);}
.dp-header{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2;}
.dp-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--accent1); text-transform:capitalize;}
.dp-close{background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1;}
.dp-close:hover{color:var(--text);}
.dp-body{padding:20px 24px 24px;}
.dp-section-label{color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin:18px 0 8px; display:flex; align-items:center; gap:6px;}
.dp-section-label:first-child{margin-top:0;}
.dp-date-value{font-weight:700; font-size:15px; margin-bottom:6px;}
.dp-count-chip{background:var(--panel-2); border-radius:20px; padding:1px 8px; font-size:10px; color:var(--text);}

.dp-evt-card{background:var(--panel-2); border-left:4px solid var(--accent1); border-radius:6px; padding:12px 14px; margin-bottom:10px;}
.dp-evt-name{font-weight:700; font-size:14px; color:var(--text); margin-bottom:5px;}
.dp-evt-meta{font-size:11.5px; color:var(--muted); margin-bottom:10px;}
.dp-evt-range{color:var(--accent2); font-weight:600;}
.dp-evt-actions{display:flex; gap:8px; flex-wrap:wrap;}
/* Pas de background ici : il masquerait celui de .btn-view/.btn-edit/.btn-delete
   au survol, cette règle étant plus spécifique. */
.dp-evt-actions .btn{padding:9px 14px; font-size:11px; border-radius:6px; margin:0; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;}

.dp-indispo-item{display:flex; align-items:center; gap:10px; background:rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.25); border-radius:8px; padding:9px 12px; margin-bottom:6px;}
.dp-indispo-avatar{width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--danger),#FF9B7A); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:#fff; flex-shrink:0;}
img.dp-indispo-avatar{object-fit:cover;}
.dp-indispo-info{flex:1;}
.dp-indispo-info .name{font-weight:700; font-size:12.5px;}
.dp-indispo-info .reason{color:var(--muted); font-size:11.5px;}
.dp-indispo-remove{background:none; border:none; color:var(--danger); font-size:14px; cursor:pointer; padding:2px 6px; flex-shrink:0;}
.dp-empty-note{font-size:12.5px; color:var(--muted); font-style:italic;}
.dp-all-available{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#3DDC97; background:rgba(61,220,151,0.1); border-radius:8px; padding:10px 14px;}
.dp-indispo-form{background:var(--panel-2); border-radius:10px; padding:14px 16px; margin-top:10px;}
.dp-actions-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.dp-actions-row .btn{flex:1; min-width:220px; padding:13px 18px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; font-size:12.5px; border-radius:9px;}
.dp-btn-indispo-solid{background:linear-gradient(135deg,var(--accent1),var(--accent2)); border:none; color:#0A0C12;}
.dp-btn-create-outline{background:none; border:1.5px solid var(--accent1); color:var(--accent1);}
.dp-btn-create-outline:hover{background:var(--accent1); color:#0A0C12;}

/* ===== MASQUE DE CHARGEMENT — SYNCHRONISATION GOOGLE AGENDA ===== */
/* Couvre l'écran pendant un aller-retour avec l'API Google Calendar (création
   d'agenda, activation, changement d'adresse Google, toggles de l'onglet "Mon
   agenda Google personnel") — sans ça l'écran semble figé le temps que Google
   réponde. Voir gcalAfficherMasqueSync() dans assets/js/app.js. */
.gcal-sync-overlay{position:fixed; inset:0; z-index:9999; background:rgba(10,12,18,0.75); display:flex; align-items:center; justify-content:center; padding:20px;}
.gcal-sync-carte{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:280px; text-align:center;}
.gcal-sync-spinner{width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,0.15); border-top-color:var(--accent1); animation:gcal-spin 0.8s linear infinite;}
.gcal-sync-msg{font-size:13px; color:var(--text); font-weight:600;}
@keyframes gcal-spin{to{transform:rotate(360deg);}}

/* ===== CONFIRMATION SUPPRESSION ===== */
.del-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:110; align-items:center; justify-content:center; padding:16px;}
.del-overlay.open{display:flex;}
.del-modal{background:var(--panel); border:1px solid var(--danger); border-radius:14px; max-width:440px; width:100%; padding:24px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto;}
.del-modal-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--danger); margin-bottom:6px;}
.del-modal-text{font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.6;}
.del-evt-details{background:var(--panel-2); border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:12.5px; line-height:1.8;}
.del-evt-details .name{font-weight:700; font-size:14px; color:var(--text); margin-bottom:4px;}
.del-modal-input{margin-bottom:16px;}
.del-modal-actions{display:flex; gap:10px;}

/* ===== BARRE D'OUTILS DE PAGE (recherche + créer) — normalisée ===== */
.page-toolbar{display:flex; gap:12px; align-items:center; margin-bottom:24px; flex-wrap:wrap;}
.page-toolbar .search-box{flex:1; min-width:220px;}
.page-toolbar .btn-primary{flex-shrink:0; white-space:nowrap;}
.page-toolbar select{width:auto; flex:0 0 auto; min-width:170px; padding:11px 14px;}

/* ===== PAGE GROUPES ===== */
.groupe-color-legend{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; font-size:11px; color:var(--muted);}
.groupe-color-legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:middle;}
.groupe-membres-label{font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); font-weight:700; margin-top:14px; margin-bottom:8px;}
.groupe-membres-list{max-height:180px; overflow-y:auto;}
.groupe-membre-row{display:flex; align-items:center; gap:10px; background:var(--panel-2); border-radius:8px; padding:12px 14px; margin-bottom:8px;}
.groupe-membre-info{flex:1; min-width:0;}
.groupe-membre-nom{font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.groupe-membre-email{font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.groupe-role-select{font-size:10.5px; padding:4px 6px; width:auto; background:var(--panel); flex-shrink:0;}
/* Tarifs (tarifs.php) : variante de .groupe-membre-row avec menu "⋯" pour
   ✏️/🗑️ (garde ☆ "par défaut" visible directement, seul bouton qui compte
   vraiment au premier coup d'œil) — position:relative scopée ici plutôt que
   sur .groupe-membre-row pour ne pas toucher son usage ailleurs (groupes.php,
   tableau de bord). */
.tarif-row{position:relative; padding-right:44px;}
/* Le "⋯" prend toute la hauteur de la carte (même principe que sur
   Indisponibilités/Organisateurs) : sorti du flux, calé dans la marge
   réservée par le padding-right ci-dessus. */
.tarif-kebab-zone{position:absolute; top:0; right:0; bottom:0; display:flex;}
.tarif-kebab-zone .msg-kebab{height:100%; width:44px; margin-top:0; border-radius:0 8px 8px 0;}
/* Corbeille : date propre à l'élément (date de l'événement, du devis...),
   affichée à côté de son nom — distincte de sa date de suppression, dans la
   colonne voisine. */
.corbeille-date-badge{font-size:11px; color:var(--muted); margin-left:8px; white-space:nowrap;}
/* "Supprimé le" répété en toutes lettres dans la cellule : utile seulement
   sur mobile, où l'en-tête de colonne (qui porte déjà ce libellé) est masqué
   — voir .tableau-corbeille plus bas. Sur ordinateur l'en-tête suffit. */
.corbeille-label-mobile{display:none;}
/* Période fusionnée (Du → Au) affichée à côté de la raison sur la carte
   mobile des indisponibilités — superflue sur ordinateur, où Du et Au ont
   déjà chacun leur colonne. */
.indispo-periode-mobile{display:none;}
/* Actions (Modifier/Supprimer) : icônes séparées sur ordinateur, repliées
   dans un "⋯" sur mobile (voir .tableau-indispo plus bas) — même principe
   que .ctm-actions-desktop/mobile sur la page Membres. */
.indispo-actions-mobile{display:none;}
/* Fiches de route : Modifier/Créer + Supprimer en icônes séparées sur
   ordinateur, repliées dans un "⋯" sur mobile (même principe que
   .ctm-actions-desktop/mobile sur Membres) — "Voir"/"PDF" restent à part
   dans les deux cas (voir .tableau-fiches plus bas). */
/* "⋯" (Fiches de route) : visible sur ordinateur ET mobile désormais, pas
   seulement replié en mobile — position:relative sur la ligne entière
   (nécessaire pour l'ancrage du menu, y compris dans le tableau ordinateur
   classique, qui n'est pas la grille de la carte mobile). */
.tableau-fiches tr{position:relative;}
/* Puce date réutilisable (jour en grand, mois abrégé + année sur 2 chiffres
   en dessous, séparés d'un trait) — composant générique, pas spécifique aux
   fiches de route : née ici (repris du widget "Prochain événement" du
   tableau de bord), mais à réutiliser ailleurs plutôt que dupliquer/adapter.
   Prévoir .date-chip-jour sur 2 chiffres ET .date-chip-mois sur le mois le
   plus long ("AOÛT"/"JUIL" + espace + année) sans repasser par un correctif
   de largeur/retour à la ligne comme la première fois (voir width/nowrap
   ci-dessous, déjà réglés pour ce cas). */
.date-chip{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:50px; box-sizing:border-box; padding:4px 2px; border-radius:10px;
  /* --panel : blanc en mode jour, fond de panneau sombre en mode nuit — un
     blanc figé y détonnerait au lieu de faire cadre. */
  background:var(--panel); border:1px solid var(--line);
}
.date-chip-jour{
  font-size:17px; font-weight:800; line-height:1.1; color:var(--accent1);
  padding-bottom:3px; margin-bottom:2px; border-bottom:1px solid currentColor;
}
.date-chip-mois{
  font-size:8.5px; font-weight:700; letter-spacing:.01em; color:var(--accent1);
  text-transform:uppercase; white-space:nowrap;
}
.fr-col-date{vertical-align:middle;}
/* "⋯" sur toute la hauteur de la ligne/carte — ordinateur ET mobile — et
   "Voir"/"Créer" calé à sa hauteur. Ancré sur la cellule elle-même
   (position:relative sur le <td>, pas sur la ligne) : un <td> a déjà la
   bonne hauteur (celle de la ligne, table oblige), pas besoin de la lui
   transmettre — align-items:stretch en flex ne marchait pas de façon fiable
   dans une cellule de tableau (hauteur du conteneur flex indéterminée). */
.fr-col-actions{position:relative; padding-right:40px !important;}
/* flex-wrap:wrap : sur ordinateur, une ligne avec plusieurs boutons en texte
   plein (ex: "💬 Messagerie" + "👁️ Voir" sur Événements) peut dépasser la
   largeur de la colonne — surtout depuis que .table-wrap-popup passe
   overflow:visible (pour ne pas rogner le menu "⋯"), ce qui laissait les
   boutons déborder hors du cadre arrondi du tableau au lieu d'être coupés
   proprement. Passe à la ligne dans la cellule plutôt que déborder. */
.fr-actions-toujours{display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; align-items:center; height:100%; vertical-align:top;}
.fr-kebab{position:absolute; top:0; right:0; bottom:0; display:flex;}
.fr-kebab .msg-kebab{height:100%; margin-top:0; border-radius:0 8px 8px 0;}
/* Lieu et nom dans deux colonnes séparées (voir .tableau-fiches plus bas
   pour la carte mobile) — même ordre partout : date, lieu, nom, état. */
.fr-col-lieu{vertical-align:middle;}
/* Événements : fond de ligne/carte teinté selon le statut — ordinateur ET
   mobile désormais (pas de badge texte, retiré au profit de cette teinte).
   "" (Confirmé, cas normal) ne teinte rien. Mêmes teintes que
   .badge.pending/.cancelled/.option (theme.css) mais très allégées, pour
   rester lisible en fond de ligne plutôt qu'en pastille. */
.tableau-evenements tr[data-statut-classe="pending"]{background:rgba(110,92,230,0.14);}
.tableau-evenements tr[data-statut-classe="cancelled"]{background:rgba(255,107,107,0.14);}
.tableau-evenements tr[data-statut-classe="option"]{background:rgba(255,184,77,0.16);}
/* Type (Événements et Fiches de route) : pas de pastille/contour, texte
   coloré seul — ordinateur ET mobile. */
.tableau-evenements .evt-col-type .badge{background:none; padding:0; border-radius:0; margin-top:0;}
/* État (Validé/Option/Annulé/En attente) avant le type — mêmes couleurs que
   la teinte de fond de la ligne, en texte seul comme le badge Type voisin. */
.badge-statut-mini{font-size:10.5px; font-weight:700; color:var(--accent1);}
.badge-statut-mini[data-statut="option"]{color:#FFB84D;}
.badge-statut-mini[data-statut="cancelled"]{color:#FF6B6B;}
.badge-statut-mini[data-statut="pending"]{color:#6E5CE6;}
/* Groupe (colonne Événements, remplace Statut) : point de couleur + nom
   alignés, sur ordinateur comme sur mobile (voir la version repositionnée en
   grille dans le bloc mobile plus bas). */
/* justify-content:flex-start !important : la règle générique .table-wrap td
   (repli mobile) impose justify-content:space-between, qui écartait le type
   et le nom du groupe aux deux bouts de la case au lieu de les coller l'un à
   l'autre (même piège que lieu/nom sur .evt-col-nom). */
/* overflow:hidden sur le conteneur lui-même : sans ça, un nom de groupe trop
   long débordait de la cellule et passait visuellement sur les boutons
   d'actions voisins (max-width seul ne suffit pas à couper l'affichage).
   Pas de display:flex sur le <td> lui-même : ça lui fait perdre le
   comportement de cellule de tableau (vertical-align:middle "gratuit", et
   surtout l'étirement à la hauteur de la ligne quand une cellule voisine
   comme Nom passe sur plusieurs lignes) — le contenu se retrouvait plaqué en
   haut de la case au lieu d'être centré. La troncature se fait sur le span
   lui-même, la case reste une vraie cellule de tableau. */
.evt-col-groupe{min-width:0; max-width:130px; overflow:hidden;}
/* Nom du groupe trop long : coupé net (ellipsis), jamais de retour à la ligne. */
.evt-col-groupe span{display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* .table-wrap coupe tout débordement (overflow:hidden, pour arrondir
   proprement ses coins) — sans conséquence la plupart du temps, mais une
   page à peu de lignes (Indisponibilités...) ou dont le menu "⋯" est haut
   (icônes, voir .ctm-menu-icones) peut voir ce menu coupé net faute de place
   sous la carte. Chaque ligne a de toute façon son propre arrondi (voir
   .table-wrap tr), l'arrondi du conteneur ne sert donc à rien ici — à ajouter
   sur .table-wrap partout où un menu replié risque d'être rogné (inconditionnel :
   Membres et Tarifs affichent leur "⋯" à toutes les tailles d'écran). */
.table-wrap-popup{overflow:visible;}
/* Événements/Fiches de route : entre 901 et 1300px, la barre latérale (260px)
   laisse trop peu de place pour un tableau à 6-7 colonnes en plein texte —
   les boutons d'action ("💬 Messagerie"...) débordaient hors du cadre,
   nécessitant un défilement horizontal de toute la page. Icône seule dès
   1300px, comme sur mobile, plutôt que d'attendre le point de bascule en
   cartes (900px) pour alléger la ligne. */
@media (max-width:1300px){
  .tableau-evenements .fr-btn-texte, .tableau-fiches .fr-btn-texte{display:none;}
  /* Le padding standard des cellules (14px 16px, theme.css) coûte à lui seul
     ~30px par colonne — avec 6-7 colonnes ça suffit à faire déborder le
     tableau dans cette tranche de largeur, même une fois les boutons réduits
     en icônes ci-dessus. Resserré ici plutôt qu'universellement (les autres
     tableaux, avec moins de colonnes, n'en ont pas besoin). */
  .tableau-evenements th, .tableau-evenements td,
  .tableau-fiches th, .tableau-fiches td{padding-left:8px; padding-right:8px;}
}

/* Page Membres (contacts.php) : carte "carnet de contacts" reprise de la
   version mobile pour toutes les tailles d'écran (demandé) — avatar (photo ou
   initiales) avec le rôle en badge sur son coin bas-gauche (au lieu d'une
   colonne dédiée, qui coûtait toute une largeur de caractère rien que pour
   ça), nom + fonction à gauche, téléphone aligné à droite dans sa propre
   colonne, actions tout au bout. E-mail et le libellé "Fonction · Rôle" du
   tableau ordinateur classique sont masqués (déjà lisibles via 👁 Voir la
   fiche, et doublonnés par le badge + la ligne fonction sous le nom). */
/* Sélecteurs préfixés par .table-wrap (l'enveloppe qui porte déjà cette
   classe autour de <table>) : spécificité volontairement un cran au-dessus de
   .table-wrap tr/td (règles génériques de repli mobile, égalité de
   spécificité sinon — la dernière déclarée l'emporterait selon l'ordre du
   fichier, fragile). Ainsi ces règles gagnent à toutes les tailles d'écran. */
.table-wrap .tableau-membres{display:block; width:100%; border-collapse:separate;}
.table-wrap .tableau-membres thead{display:none;}
.table-wrap .tableau-membres tbody{display:block;}
.table-wrap .tableau-membres tr{
  display:grid; grid-template-columns:1fr auto auto;
  grid-template-areas:"nom tel actions";
  gap:8px; align-items:center; position:relative;
  margin-bottom:10px; padding:10px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
.table-wrap .tableau-membres td{display:block; padding:0;}
.table-wrap .tableau-membres td::before{display:none;}
.table-wrap .tableau-membres td:nth-child(1){grid-area:nom; min-width:0; font-size:13px;}
.table-wrap .tableau-membres td:nth-child(2){display:none;}
.table-wrap .tableau-membres td:nth-child(3){
  grid-area:tel; font-size:11px; color:var(--muted); text-align:right; white-space:nowrap;
}
.table-wrap .tableau-membres td:nth-child(4){display:none;}
/* align-self:stretch : la grille n'a qu'une seule ligne ici (pas de
   flex-wrap comme sur Indisponibilités/Organisateurs), donc stretch suffit
   à faire prendre au "⋯" toute la hauteur de la carte — pas besoin de le
   sortir du flux. */
.table-wrap .tableau-membres td:nth-child(5){grid-area:actions; align-self:stretch; display:flex;}
.table-wrap .tableau-membres td + td{border-top:none !important;}

.ctm-actions-desktop{display:none;}
.ctm-actions-mobile{display:flex; align-self:stretch; height:100%;}
.ctm-actions-mobile .msg-kebab{height:100%; width:32px; margin-top:0;}

/* En-tête de groupe (contacts.php) : le nom tronque au lieu de passer sur 3
   lignes, le compteur ne casse plus, et le bouton "Inviter" revient à
   l'icône seule (même principe que evt-barre-icon-accent ailleurs) — sinon
   son libellé complet le forçait sur sa propre ligne, doublant la hauteur
   du bandeau. */
.ctm-groupe-entete{padding:14px 16px 0 !important; gap:8px !important; flex-wrap:nowrap !important;}
.ctm-groupe-nom{
  font-size:15px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctm-groupe-count{font-size:11px !important; white-space:nowrap;}
.ctm-groupe-inviter{
  width:34px; height:34px; padding:0 !important; border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ctm-groupe-inviter-texte{display:none;}

.ctm-membre-cell{display:flex; align-items:center; gap:10px;}
.ctm-avatar-zone{position:relative; flex-shrink:0; display:block;}
.ctm-role-badge{
  position:absolute; left:-4px; bottom:-4px; width:15px; height:15px; border-radius:50%;
  background:var(--panel-2); border:1.5px solid var(--panel-2);
  display:flex; align-items:center; justify-content:center; font-size:9px; line-height:1;
}
.ctm-nom-fonction{flex:1; min-width:0;}
.ctm-nom-ligne{
  font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctm-fonction-mobile{
  display:block; font-size:10.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:600px){
  /* padding-top/bottom/left seulement : padding-right reste à 44px (voir
     .tarif-row plus haut), la marge réservée pour le "⋯" — sinon le texte
     replié juste en dessous (white-space:normal ici) passe derrière lui. */
  .tarif-row{padding-top:10px; padding-bottom:10px; padding-left:12px; gap:6px;}
  .tarif-row .groupe-membre-nom{font-size:14px;}
  .tarif-row .groupe-membre-email{font-size:12px; white-space:normal;}
}
.groupe-add-membre-form{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.groupe-add-membre-form input[type="email"]{flex:2; min-width:140px; padding:8px 10px; font-size:12px;}
.groupe-add-membre-form input[type="text"]{flex:1; min-width:100px; padding:8px 10px; font-size:12px;}
.groupe-add-membre-form select{flex:0 0 auto; width:auto; padding:8px 10px; font-size:12px;}

/* ===== GROUPE SELECTOR (INSTAGRAM STYLE) ===== */
.groupe-selector-top{display:none; padding:12px 22px; border-bottom:1px solid var(--line); position:relative;}
.groupe-selector-mobile{display:none; border-top:1px solid var(--line); padding-top:12px;}

.groupe-btn-main{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:12px; cursor:pointer; font-family:'Inter',sans-serif;
  font-size:13px; font-weight:600; color:var(--text); transition:all .2s;
}
.groupe-btn-main:hover{background:var(--line); border-color:var(--accent1);}
.groupe-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:12px;
}
.groupe-name{flex:1; text-align:left;}
.groupe-swap{font-size:14px; opacity:0.6;}

.groupe-menu{
  position:absolute; top:100%; left:22px; right:22px; margin-top:4px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.2);
  z-index:100; display:none; flex-direction:column;
}
.groupe-menu.open{display:flex;}

/* Le même sélecteur sert à trois endroits ; seul son ancrage change. */
.groupe-selector{position:relative;}
/* Dans le menu « Plus », il est déjà dans un panneau : il s'aligne sur ses
   marges plutôt que sur celles de la barre latérale. */
.groupe-selector-mm{padding:0 18px;}
.groupe-selector-mm .groupe-menu{left:18px; right:18px;}
/* Dans la barre du haut, le nom du groupe est lui-même le bouton : ni fond, ni
   cadre, ni avatar — la place manque et la marque est juste à côté. */
.groupe-selector-topbar{min-width:0;}
.groupe-selector-topbar .groupe-btn-main{
  padding:2px 4px; background:none; border:none; border-radius:6px; gap:5px;
  font-size:12.5px; font-weight:400; color:var(--muted); width:auto; min-width:0;
}
.groupe-selector-topbar .groupe-btn-main:hover{background:var(--panel-2); color:var(--text);}
.groupe-selector-topbar .groupe-avatar{display:none;}
.groupe-selector-topbar .groupe-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.groupe-selector-topbar .groupe-swap{font-size:11px;}
/* Ancré sous le bouton, à gauche, sans déborder de l'écran. */
.groupe-selector-topbar .groupe-menu{left:0; right:auto; min-width:220px; max-width:min(300px, calc(100vw - 24px));}

.groupe-menu-item{
  display:flex; align-items:center; gap:10px; padding:12px 14px; color:var(--text);
  text-decoration:none; font-size:13px; border-bottom:1px solid var(--line);
  transition:background .15s;
}
.groupe-menu-item:last-child{border-bottom:none;}
.groupe-menu-item:hover{background:var(--panel-2);}
.groupe-menu-item.active{background:linear-gradient(90deg,rgba(0,184,172,0.1),transparent); border-left:3px solid var(--accent1);}

.groupe-menu-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:12px;
}
.groupe-menu-name{flex:1;}
.groupe-menu-check{color:var(--accent1); font-weight:700;}

@media (min-width:769px){
  .groupe-selector-top{display:block;}
  .groupe-selector-mobile{display:none !important;}
}

/* Devis : nom du devis (collé au numéro) n'existe que pour la carte mobile —
   masqué par défaut ici, réaffiché dans le media query ci-dessous. Sans
   cette règle hors media query, cet élément (un span ordinaire) restait
   visible par défaut sur ordinateur, où il dupliquait la colonne "Nom"
   déjà affichée. */
.devis-col-nom-mobile{display:none;}
/* Menu kebab (actions Modifier/Créer l'événement/Voir/Supprimer) : un seul
   bouton "⋯" au lieu de boutons séparés, sur ordinateur comme sur mobile
   (comme partout ailleurs dans l'appli — voir .fr-kebab). Sur mobile, le
   media query plus bas le fait passer en colonne pleine hauteur. */
.devis-kebab-mobile{position:relative; display:inline-flex; align-items:center;}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .groupe-selector-top{display:none !important;}
  .groupe-selector-mobile{display:block;}
  /* L'ombre n'apparaît qu'une fois le panneau ouvert : repliée hors écran, elle
     restait projetée sur le bord et y laissait une bande sombre. */
  .sidebar{position:fixed; inset:0 auto 0 0; z-index:50; transform:translateX(-100%); transition:transform .25s ease;}
  .sidebar.open{transform:translateX(0); box-shadow:20px 0 40px rgba(0,0,0,.5);}
  .sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:40;}
  .sidebar-overlay.open{display:block;}
  .hamburger{display:none !important;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .content{padding:20px 16px;}
  /* La barre du haut reste en place : elle porte la cloche et le logo LaRégie
     (repère de marque, toujours utile) — mais plus le bouton jour/nuit,
     déplacé dans le panneau "Plus" (voir includes/menu_mobile.php) pour
     laisser plus de place au titre de page, qui l'emporte ici sur le groupe
     actif — déjà lisible ailleurs (menu "Plus", sélecteur de groupe). */
  .topbar{padding:12px 16px; gap:10px; flex-wrap:nowrap;}
  .topbar-page{display:block;}
  .topbar-brand{display:flex;}
  .topbar-brand .groupe-selector-topbar{display:none;}
  #themeToggleBtn{display:none;}
  .page-title{font-size:20px;}
  .form-row{grid-template-columns:1fr;}
  /* Les tableaux deviennent des cartes empilées : à 640 px de large minimum, ils
     imposaient un défilement latéral où l'on perdait de vue la première colonne,
     celle qui identifie la ligne. Chaque cellule porte ici son libellé, repris
     de l'en-tête par majEtiquettesTables() dans app.js. */
  .table-wrap{overflow-x:visible;}
  .table-wrap table{min-width:0; width:100%; display:block; border-collapse:separate;}
  .table-wrap thead{display:none;}
  .table-wrap tbody{display:block;}
  .table-wrap tr{
    display:block; margin-bottom:10px; padding:10px 14px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  }
  .table-wrap td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:6px 0; border:none !important; text-align:left !important;
    white-space:normal !important; font-size:13px;
  }
  .table-wrap td + td{border-top:1px solid var(--line) !important;}
  .table-wrap td::before{
    content:attr(data-col); flex-shrink:0;
    font-size:11px; font-weight:600; color:var(--muted);
  }
  /* Cellule d'actions : sans libellé, et ses boutons alignés à droite. */
  .table-wrap td:not([data-col])::before,
  .table-wrap td[data-col=""]::before{display:none;}
  .table-wrap td:not([data-col]),
  .table-wrap td[data-col=""]{justify-content:flex-end; gap:8px; flex-wrap:wrap;}
  .table-wrap td:empty{display:none;}
  /* Tableau Tâches : grille 2 colonnes au lieu de l'empilement générique
     (une ligne par cellule) — Échéance remonte au niveau d'Événement lié,
     Descriptif redescend au niveau des boutons d'action. Colonnes fixées par
     leur ordre réel : Tâche, Événement lié, Échéance, Descriptif, Actions. */
  .tableau-taches tr{
    display:grid; grid-template-columns:1fr 1fr;
    grid-template-areas:"tache echeance" "evenement evenement" "actions actions";
    gap:2px 12px;
  }
  .tableau-taches td{display:block; padding:4px 0;}
  .tableau-taches td::before{display:none;}
  .tableau-taches td:nth-child(1){grid-area:tache; padding-bottom:6px;}
  .tableau-taches td:nth-child(2){grid-area:evenement;}
  .tableau-taches td:nth-child(3){grid-area:echeance; text-align:right;}
  .tableau-taches td:nth-child(4){grid-area:actions; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
  .tableau-taches td + td{border-top:none !important;}

  /* Tableau Notes de frais : même esprit de carte compacte que Tâches —
     dépense + montant sur la même ligne, date en dessous. */
  .tableau-notes-frais tr{
    display:grid; grid-template-columns:auto auto 1fr auto;
    grid-template-areas:"check date depense montant";
    gap:4px 12px; align-items:center;
  }
  .tableau-notes-frais td{display:block; padding:2px 0;}
  .tableau-notes-frais td::before{display:none;}
  .tableau-notes-frais td:nth-child(1){grid-area:check;}
  .tableau-notes-frais td:nth-child(2){grid-area:date; font-size:12px; color:var(--muted);}
  .tableau-notes-frais td:nth-child(3){grid-area:depense;}
  .tableau-notes-frais td:nth-child(4){grid-area:montant; text-align:right;}
  .tableau-notes-frais td + td{border-top:none !important;}
  /* Liste des tickets : comme le tableau PC — un seul panneau, lignes sans fond gris séparées par un filet. */
  .table-wrap:has(> .tableau-notes-frais){background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
  .tableau-notes-frais tbody tr{background:transparent !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; margin:0 !important; padding:12px 14px !important;}
  .tableau-notes-frais tbody tr:last-child{border-bottom:0 !important;}

  /* Organisateurs : carte compacte sur 2 lignes — nom + département + type +
     historique en haut, contact + téléphone cliquable + menu "⋯" en bas
     (Modifier/Supprimer, et Voir l'historique en plus s'il y en a un).
     position:relative sur la ligne entière (pas sur la cellule, trop étroite)
     pour que le menu s'ancre correctement — même correctif que sur Membres. */
  .tableau-organisateurs tr{position:relative; padding-right:44px;}
  .tableau-organisateurs td{display:block; padding:0;}
  .tableau-organisateurs td::before{display:none;}
  .tableau-organisateurs td:nth-child(1){padding-bottom:4px; font-size:13.5px;}
  .tableau-organisateurs td:nth-child(2){display:none;}
  .tableau-organisateurs td:nth-child(4),
  .tableau-organisateurs td:nth-child(5),
  .tableau-organisateurs td:nth-child(6){display:none;}
  .tableau-organisateurs td + td{border-top:none !important;}

  /* Corbeille : au lieu d'empiler case à cocher / nom / date / boutons en
     texte plein (5-6 lignes très hautes par élément), une carte à 2 lignes —
     [case] Nom, puis date + boutons icône seule (texte masqué, voir
     .ctm-groupe-inviter-texte pour le même principe) alignés à droite sur la
     même ligne. */
  .tableau-corbeille tr{
    display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;
    padding:8px 12px; margin-bottom:6px;
  }
  .tableau-corbeille td{padding:2px 0;}
  .tableau-corbeille td::before{display:none;}
  .tableau-corbeille td + td{border-top:none !important;}
  /* "Supprimé le" seul en petit sur sa propre ligne, au-dessus du nom —
     plutôt qu'à côté des boutons ou en dessous (essayé, puis changé d'avis). */
  .tableau-corbeille .corbeille-col-date{order:1; flex:0 0 100%; font-size:10.5px; justify-content:flex-start;}
  .tableau-corbeille .corbeille-col-case{order:2; flex:0 0 auto;}
  .tableau-corbeille .corbeille-col-nom{order:3; flex:1 1 auto; min-width:0; justify-content:flex-start; gap:6px;}
  .tableau-corbeille .corbeille-col-nom strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0;}
  .tableau-corbeille .corbeille-col-nom .corbeille-date-badge{flex:0 0 auto; margin-left:0;}
  .tableau-corbeille .corbeille-col-actions{order:4; flex:0 0 auto; margin-left:auto; gap:6px;}
  .tableau-corbeille .corbeille-label-mobile{display:inline;}
  .tableau-corbeille .corbeille-btn-texte{display:none;}

  /* Devis : 1ère ligne façon en-tête (numéro à gauche + nom du devis en
     dessous, montant à droite), puis une 2e zone avec la puce date à gauche
     sur toute sa hauteur, organisateur et groupe empilés au milieu, menu "⋯"
     à droite — même schéma date-pleine-hauteur que Fiches de route/Événements. */
  .tableau-devis tr{
    display:grid; grid-template-columns:auto 1fr auto;
    grid-template-areas:"numero numero prix" "date organisateur menu" "date groupe menu";
    align-items:center; column-gap:10px; row-gap:4px;
    padding:8px 0 8px 12px; margin-bottom:8px; position:relative;
    border-left:4px solid var(--line);
  }
  .tableau-devis td{padding:2px 0;}
  .tableau-devis td::before{display:none;}
  .tableau-devis td + td{border-top:none !important;}
  /* Numéro + prix forment l'entête : un trait plein largeur les sépare du
     détail (date/organisateur/groupe) en dessous — bordure portée par les
     deux cellules de la 1ère ligne plutôt qu'un pseudo-élément positionné
     en dur, qui aurait fallu recaler à chaque fois que le nom du devis
     passe à la ligne. */
  .tableau-devis .devis-col-numero{grid-area:numero; align-self:stretch; padding-bottom:8px; border-bottom:1px solid var(--line) !important; display:flex; align-items:baseline; justify-content:flex-start; gap:10px;}
  .tableau-devis .devis-col-nom-mobile{display:inline; font-size:12px; color:var(--muted); font-weight:400;}
  .tableau-devis .devis-col-date{grid-area:date; align-self:center;}
  .tableau-devis .devis-col-nom{display:none;}
  .tableau-devis .devis-col-organisateur{grid-area:organisateur; font-size:13px;}
  .tableau-devis .devis-col-groupe{grid-area:groupe; font-size:12px; color:var(--muted);}
  .tableau-devis .devis-col-prix{grid-area:prix; align-self:stretch; text-align:right; padding-bottom:8px; padding-right:14px; margin-right:0; border-bottom:1px solid var(--line) !important;}
  /* Le bouton menu occupe toute la hauteur depuis le bas de l'entête
     jusqu'au bas de la carte (comme une colonne cliquable entière, pas
     juste une icône centrée). */
  .tableau-devis .devis-col-actions{grid-area:menu; align-self:stretch; padding:0; margin:0 -0px 0 0;}
  .tableau-devis .devis-kebab-mobile{display:flex; height:100%;}
  .tableau-devis .devis-kebab-mobile .msg-kebab{
    flex:1; display:flex; align-items:center; justify-content:center;
    height:100%; width:44px; padding:0 12px; margin:0; border-radius:0;
    font-size:18px;
  }

  /* Pop-up de prévisu du devis : tous les boutons du bas en icône seule sur téléphone
     (voir .fr-btn-texte) ; les libellés complets s'affichent sur ordinateur. */
  #devisViewFooter .fr-btn-texte{display:none;}

  /* Fiches de route : puce date (jour + mois/année) à gauche sur toute la
     hauteur, lieu dans sa colonne (2e), nom (3e) + état empilés dans une
     colonne, actions à droite — même ordre que sur ordinateur (date, lieu,
     nom, état). Grille plutôt que flex-wrap : nom et état doivent s'empiler
     dans UNE colonne pendant que la date et le lieu restent sur les deux
     lignes à la fois. */
  .tableau-fiches tr{
    display:grid; grid-template-columns:auto 1fr auto;
    grid-template-areas:"date nom actions" "date groupe actions" "date type actions";
    align-items:center; column-gap:10px; row-gap:2px;
    padding:8px 12px; margin-bottom:8px; position:relative;
  }
  .tableau-fiches td{padding:2px 0;}
  .tableau-fiches td::before{display:none;}
  .tableau-fiches td + td{border-top:none !important;}
  /* Taille naturelle et identique quelle que soit la hauteur de la carte
     (nom sur 1 ou 2 lignes) — un align-self:stretch calé sur les 2 lignes
     donnait des puces d'hauteurs différentes d'une carte à l'autre. */
  .tableau-fiches .fr-col-date{grid-area:date; align-self:center;}
  /* Colonne "Lieu" dédiée (tableau ordinateur) masquée sur mobile : son texte
     réapparaît devant le nom dans la même case (data-lieu, voir fiches_route.php)
     pour que ville/CP et nom événement soient une seule et même case, même
     taille/police, plutôt que deux colonnes séparées. */
  .tableau-fiches .fr-col-lieu{display:none;}
  .tableau-fiches .fr-col-nom{
    grid-area:nom; min-width:0; font-size:13.5px; font-weight:700;
    /* display:block !important : .table-wrap td (règle générique) impose
       display:flex; justify-content:space-between — avec le ::before ajouté
       ci-dessous, ça écartait lieu (premier item flex) et nom (dernier item
       flex) aux deux extrémités de la case au lieu de les coller l'un à
       l'autre. En bloc, ::before + texte du nom forment un seul flux en ligne. */
    display:block !important;
    /* !important : la règle générique .table-wrap td (repli mobile pour tous
       les tableaux) impose white-space:normal !important. */
    white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
  }
  .tableau-fiches .fr-col-nom[data-lieu]:not([data-lieu=""])::before{
    /* Même police/graisse/couleur que le nom (pas de color à part) —
       demandé explicitement : lieu et nom doivent être visuellement identiques. */
    display:inline; content:attr(data-lieu) " – ";
  }
  /* Type et Groupe (remplace la pastille d'état, retirée : le fond de la
     carte — vert/rouge selon que la FDR existe — suffit désormais) : deux
     lignes séparées, même présentation que sur Événements (pas de fusion). */
  .tableau-fiches .evt-col-groupe{grid-area:groupe; font-size:12px;}
  .tableau-fiches .evt-col-groupe .badge{margin-top:0;}
  .tableau-fiches .fr-col-type{grid-area:type; justify-self:start; min-width:0;}
  .tableau-fiches .fr-col-actions{grid-area:actions; align-self:stretch;}
  /* align-items:center, pas stretch : "Voir"/"Créer" gardent leur taille
     normale (bouton .btn-sm) quelle que soit la hauteur de la carte — un
     stretch les étirait à des hauteurs différentes d'une carte à l'autre. */
  .tableau-fiches .fr-actions-toujours{display:flex; align-items:center; gap:6px; min-width:0;}
  .tableau-fiches .fr-btn-texte{display:none;}
  /* Plus de place pour lieu + badge côte à côte que pour le texte du badge
     seul (voir juste au-dessus) : la ville disparaît en premier, le
     département (toujours devant, voir fiches_route.php) reste. */
  @media (max-width:400px){
    .tableau-fiches .fr-ville-texte{display:none;}
  }

  /* Événements : même présentation que Fiches de route — puce date à gauche
     (sur toute la hauteur des 3 lignes), lieu fusionné devant le nom (même
     case, même police, voir data-lieu) en haut, nom du groupe en ligne du
     milieu, Type + Production en ligne du bas. Actions à droite, sur toute la
     hauteur (icônes seules, voir .fr-btn-texte plus bas). Le statut n'est
     plus un badge texte ici : c'est le fond de la carte qui le porte (voir
     data-statut-classe plus bas). */
  .tableau-evenements tr{
    display:grid; grid-template-columns:auto 1fr auto;
    grid-template-areas:"date nom actions" "date groupe actions" "date type actions";
    align-items:center; column-gap:8px; row-gap:4px;
    padding:8px 12px; margin-bottom:8px; position:relative;
  }
  .tableau-evenements td{padding:2px 0;}
  .tableau-evenements td::before{display:none;}
  .tableau-evenements td + td{border-top:none !important;}
  .tableau-evenements .evt-col-date{grid-area:date; align-self:center;}
  .tableau-evenements .evt-col-lieu{display:none;}
  .tableau-evenements .evt-col-nom{
    grid-area:nom; min-width:0; font-size:13.5px; font-weight:700;
    display:block !important;
    white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
  }
  .tableau-evenements .evt-col-nom[data-lieu]:not([data-lieu=""])::before{
    display:inline; content:attr(data-lieu) " – ";
  }
  /* justify-self:start (au lieu du stretch par défaut) laissait la case
     s'élargir à la taille de son contenu SANS être bridée par la largeur
     réelle de sa colonne de grille — un nom de groupe long débordait alors
     visuellement sur la colonne actions/kebab voisine, malgré overflow:hidden
     (qui ne coupe qu'à max-width, pas à la largeur de la piste de grille).
     Stretch (par défaut) cale la case exactement sur sa colonne : l'ellipsis
     s'applique alors à la vraie largeur disponible. */
  .tableau-evenements .evt-col-groupe{
    grid-area:groupe; min-width:0; max-width:100%; font-size:12px;
    display:flex !important; align-items:center; gap:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Production masquée sur mobile (pas assez de place, garde le Type seul
     dans sa propre colonne plutôt que de partager sa case). */
  .tableau-evenements .evt-col-production{display:none;}
  .tableau-evenements .evt-col-type{
    grid-area:type; justify-self:start; min-width:0;
    display:inline-flex !important; align-items:center; flex-wrap:wrap;
  }
  .tableau-evenements .evt-col-actions{
    grid-area:actions; align-self:stretch; display:flex; flex-direction:column;
    align-items:flex-end; justify-content:center; gap:4px; flex-wrap:wrap;
  }
  /* Boutons toujours visibles (Messagerie, FDR) : icône seule sur mobile, le
     libellé ne réapparaît que sur ordinateur. */
  .tableau-evenements .fr-btn-texte{display:none;}

  /* Indisponibilités : au lieu d'empiler Personne / Du / Au / Raison / Notes /
     Actions (6 lignes très hautes), une carte compacte — nom + actions en
     haut, raison + période fusionnée en dessous, notes en dernier (repliées
     si absentes). */
  .tableau-indispo tr{
    display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;
    padding:8px 44px 8px 12px; margin-bottom:6px; position:relative;
  }
  .tableau-indispo td{padding:2px 0;}
  .tableau-indispo td::before{display:none;}
  .tableau-indispo td + td{border-top:none !important;}
  /* "Personne" n'apporte rien ici (cette page n'affiche que mes propres
     indisponibilités) : la période prend sa place en tête de carte — voir
     .indispo-periode-mobile ci-dessous, qui en tient le rôle visuel. */
  .tableau-indispo .indispo-col-personne,
  .tableau-indispo .indispo-col-du,
  .tableau-indispo .indispo-col-au{display:none;}
  .tableau-indispo .indispo-col-raison{
    order:1; flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:4px; font-size:11.5px;
  }
  /* .badge porte margin-top:12px, pensé pour un badge seul sous du texte
     empilé — collé contre la date ici, ce décalage vertical le désaligne. */
  .tableau-indispo .indispo-col-raison .badge{margin-top:0; white-space:nowrap;}
  .tableau-indispo .indispo-periode-mobile{
    display:inline-flex; align-items:center; gap:4px;
    font-size:13px; font-weight:600; color:var(--text); flex-shrink:0;
  }
  /* Le "⋯" prend toute la hauteur de la carte, notes comprises — un
     align-self:stretch ne suffit pas : la carte s'enroule sur plusieurs
     lignes (flex-wrap), et stretch ne remplit que la ligne du bouton, pas les
     lignes suivantes. Sorti du flux (position:absolute sur toute la hauteur
     de la <tr>, qui porte position:relative) et calé dans la marge réservée
     par le padding-right ci-dessus. */
  .tableau-indispo .indispo-col-actions{
    order:2; position:absolute; top:0; right:0; bottom:0; margin:0; padding:0;
  }
  .tableau-indispo .indispo-actions-desktop{display:none;}
  .tableau-indispo .indispo-actions-mobile{display:flex; height:100%;}
  .tableau-indispo .indispo-actions-mobile .msg-kebab{
    height:100%; width:44px; margin-top:0; border-radius:0 10px 10px 0;
  }
  /* Détail (notes) sous la date, sur sa propre ligne. */
  .tableau-indispo .indispo-col-notes{order:3; flex:1 1 100%; font-size:11px;}
  .tableau-indispo .indispo-col-notes:empty{display:none;}

  .orga-coord-desktop{display:none;}
  .orga-ligne-haut-mobile{display:flex; align-items:center; gap:6px; margin-top:4px;}
  .orga-badge-dept{
    font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; flex-shrink:1;
    background:rgba(90,209,230,.15); color:var(--accent1); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:130px; min-width:0;
  }
  .orga-badge-type{
    font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:20px; flex-shrink:0;
    background:rgba(139,124,255,.15); color:var(--accent2); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:110px;
  }
  .orga-historique-btn{margin-left:auto; font-size:10.5px !important; padding:4px 9px !important; flex-shrink:0;}
  .orga-ligne-bas-mobile{display:flex; align-items:center; gap:8px; margin-top:6px;}
  .orga-coord-mobile{
    flex:1; min-width:0; font-size:11px; color:var(--muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .orga-coord-mobile a{color:inherit;}
  /* Le "⋯" prend toute la hauteur de la carte (les deux lignes, nom compris),
     pas seulement celle de la ligne du bas où il vit dans le HTML — sorti du
     flux (position:absolute sur toute la hauteur de la <tr>, qui porte
     position:relative, marge réservée par le padding-right ci-dessus), même
     principe que sur Indisponibilités. */
  .orga-kebab-mobile{position:absolute; top:0; right:0; bottom:0; display:flex;}
  .orga-kebab-mobile .msg-kebab{height:100%; width:44px; margin-top:0; border-radius:0 10px 10px 0;}

  /* Fusion visuelle carte principale + ligne dépliée : au repos, la ligne
     détail (voir .orga-detail-wrap dans le bloc partagé plus haut) est déjà
     invisible (max-height:0) mais gardait son propre fond/bordure/marge de
     "carte" .table-wrap tr générique — d'où un rectangle vide flottant sous
     la carte. Repli à plat par défaut, "carte" recomposée uniquement une
     fois ouverte (classe posée par orgaBasculerDetail), avec le bas de la
     carte principale qui s'aplatit en retour pour souder les deux. */
  .tableau-organisateurs tr.orga-detail-row{
    background:transparent; border:none; margin:0; padding:0;
  }
  .tableau-organisateurs tr.orga-detail-row.orga-ouvert{
    background:var(--panel-2); border:1px solid var(--line); border-top:none;
    border-radius:0 0 10px 10px; margin-bottom:10px;
  }
  .tableau-organisateurs tr.orga-row-principale.orga-ouvert{
    border-radius:10px 10px 0 0; border-bottom-color:transparent; margin-bottom:0;
  }

  /* Case "tout cocher ce mois" : le thead qui la porte d'habitude est masqué
     en mode carte (règle .table-wrap thead ci-dessus), cette copie dans le
     titre de section prend le relais — voir nf-select-mois-mobile dans
     pages/notes_frais.php. */
  .nf-select-mois-mobile{display:inline-block;}
}

/* Popup flottant Tâches (#tasksPopup) : fenêtre étroite quel que soit la taille
   d'écran — même mise en cartes que sur mobile, indépendamment du viewport. */
#tasksPopupContent .table-wrap{overflow-x:visible;}
#tasksPopupContent .table-wrap table{min-width:0; width:100%; display:block; border-collapse:separate;}
#tasksPopupContent .table-wrap thead{display:none;}
#tasksPopupContent .table-wrap tbody{display:block;}
#tasksPopupContent .table-wrap tr{
  display:block; margin-bottom:10px; padding:10px 14px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
#tasksPopupContent .table-wrap td{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 0; border:none !important; text-align:left !important;
  white-space:normal !important; font-size:13px;
}
#tasksPopupContent .table-wrap td::before{
  content:attr(data-col); flex-shrink:0;
  font-size:11px; font-weight:600; color:var(--muted);
}
#tasksPopupContent .table-wrap td:not([data-col])::before,
#tasksPopupContent .table-wrap td[data-col=""]::before{display:none;}
#tasksPopupContent .table-wrap td:not([data-col]),
#tasksPopupContent .table-wrap td[data-col=""]{justify-content:flex-end; gap:8px; flex-wrap:wrap;}
#tasksPopupContent .table-wrap td:empty{display:none;}
#tasksPopupContent .tableau-taches tr{
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-areas:"tache echeance" "evenement evenement" "actions actions";
  gap:2px 12px;
}
#tasksPopupContent .tableau-taches td{display:block; padding:4px 0;}
#tasksPopupContent .tableau-taches td::before{display:none;}
#tasksPopupContent .tableau-taches td:nth-child(1){grid-area:tache; padding-bottom:6px;}
#tasksPopupContent .tableau-taches td:nth-child(2){grid-area:evenement;}
#tasksPopupContent .tableau-taches td:nth-child(3){grid-area:echeance; text-align:right;}
#tasksPopupContent .tableau-taches td:nth-child(4){grid-area:actions; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
#tasksPopupContent .tableau-taches td + td{border-top:none !important;}

/* Page Tâches en version ordinateur (table normale, hors popup) : Échéance +
   rappel repassent sous le type/nom de la tâche au lieu d'une colonne à part —
   la colonne dédiée ne sert qu'au mobile et au popup flottant (carte compacte). */
.tache-echeance-inline{display:none;}
@media (min-width:901px){
  .tableau-taches-actives:not(.tableau-taches-popup) .tache-echeance-inline{display:block;}
  .tableau-taches-actives:not(.tableau-taches-popup) td.td-echeance-col,
  .tableau-taches-actives:not(.tableau-taches-popup) th.th-echeance-col{display:none;}
  /* La colonne Échéance masquée ci-dessus laissait un flottement de largeur
     (colgroup à 4 colonnes, 3 cellules réelles) qui désalignait la colonne
     Actions par rapport au tableau Complétées (toujours 4 colonnes visibles) —
     largeur fixe identique pour Actions sur les deux tableaux (les boutons
     tombent au même endroit), Tâche/Événement gardent leur largeur d'origine. */
  .tableau-taches-actives:not(.tableau-taches-popup) colgroup col:nth-child(3){width:0;}
  .tableau-taches-actives:not(.tableau-taches-popup) colgroup col:nth-child(4),
  .tableau-taches-completees colgroup col:nth-child(4){width:135px;}
}

@media (max-width:900px){
  .table-wrap-placeholder-never-matches{display:none;}
  /* Dashboard mobile fixes */
  .dash-month-layout{gap:16px !important; flex-direction:column;}
  .dash-calendar-wrapper{width:100% !important; max-width:100% !important; overflow-x:hidden;}
  .mini-month-large{max-width:100% !important; width:100% !important; overflow:visible !important; max-height:none !important; height:auto !important;}
  .mini-month-large .mini-month{padding:12px; box-sizing:border-box; overflow:visible !important; height:auto !important; max-height:none !important;}
  .mini-month-large .mini-month-title{font-size:13px; margin-bottom:10px;}
  .mini-month-large .mini-grid{gap:3px; height:auto !important;}
  .mini-month-large .mini-weekday{font-size:9px; padding:2px 0;}
  .mini-month-large .mini-day{font-size:13px; border-radius:4px; aspect-ratio:1;}
  .mini-month-large .mini-day.holiday::before{font-size:10px;}

  /* Groupe color legend visible */
  .groupe-color-legend{overflow:visible !important; max-height:none !important;}
  .dash-month-item{flex-direction:column; gap:8px !important; padding:10px 12px !important;}
  .dash-month-item .groupe-membre-info{min-width:100% !important;}
  .dash-month-item .groupe-membre-nom{font-size:13px !important;}
  .dash-month-item .groupe-membre-email{font-size:11px !important;}
  .dash-month-item > div:last-child{width:100%; justify-content:flex-start !important; flex-wrap:wrap; gap:6px;}
  .dash-month-item .btn{font-size:9px; padding:6px 8px; white-space:nowrap;}

  /* Dashboard mobile optimisé */
  /* nowrap est indispensable ici : en colonne, un flex-wrap:wrap répartit les
     blocs en plusieurs colonnes et leur impose une hauteur, ce qui tronquait le
     bloc du calendrier au lieu de le laisser grandir avec la carte. */
  .dashboard-grid{gap:12px !important; flex-direction:column !important; flex-wrap:nowrap !important; padding:0 !important;}
  /* Empilés, chacun à sa hauteur naturelle. Ni hauteur de ligne partagée ni
     overflow:hidden : le bloc du calendrier contient la carte et doit pouvoir
     grandir avec elle. La largeur, elle, reste bornée. */
  .dashboard-grid > div{flex:0 0 auto !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box;}

  /* La carte "Prochain événement" a ses propres réglages mobile plus bas
     (dash-hero-*, dash-notification-horaires) — plus de grille 3 colonnes ici. */

  /* Les compteurs passent en bandeaux pleine largeur : voir .dash-stat-cards
     plus bas. Deux colonnes coupaient les libellés en deux ou trois lignes. */
  .dash-stat-cards{margin-bottom:16px !important;}

  /* La carte n'est plus une colonne de la grille mais un élément du bloc du
     calendrier, dont elle suit la taille : ces règles visaient la colonne
     disparue et touchaient désormais le bloc des dates. */

  /* Dates list mobile - éviter les débordements */
  .dash-month-item{word-break:break-word;}
  .dash-month-item .groupe-membre-nom{overflow:visible; text-overflow:clip; white-space:normal; word-break:break-word;}
  .dash-month-item .groupe-membre-email{overflow:visible; text-overflow:clip; white-space:normal; word-break:break-word; font-size:11px !important;}
}

/* ============================================================
   BARRE D'ONGLETS MOBILE
   Masquée sur ordinateur : le menu latéral y est déjà permanent.
   ============================================================ */
/* ===== MENU « PLUS » (tiroir droit, mobile) ===== */
/* Masqué par défaut : il n'existe que sous 900 px, où la barre latérale est
   fermée. Il s'ouvre à droite, du côté du pouce. */
.mm-voile, .mm-panneau{display:none;}
@media (max-width:900px){
  .mm-voile{display:block; position:fixed; inset:0; z-index:70;
    background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease;}
  .mm-voile.open{opacity:1; pointer-events:auto;}

  .mm-panneau{
    display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; z-index:71;
    width:min(86vw, 340px); background:var(--panel); border-left:1px solid var(--line);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); transition:transform .25s ease;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  /* Même raison que pour la barre latérale : replié, le panneau projetait son
     ombre sur le bord droit de l'écran. */
  .mm-panneau.open{transform:translateX(0); box-shadow:-20px 0 40px rgba(0,0,0,.45);}

  .mm-tete{display:flex; align-items:center; gap:12px; padding:18px 18px 14px;
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:1;}
  .mm-identite{display:flex; flex-direction:column; min-width:0; flex:1;}
  .mm-nom{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mm-role{font-size:12px; color:var(--muted);}
  /* Boutons de l'en-tête : profil, déconnexion, fermeture. Même gabarit, assez
     large pour le doigt. */
  .mm-fermer, .mm-tete-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; flex-shrink:0; border-radius:10px; cursor:pointer;
    background:var(--panel-2); border:1px solid var(--line); color:var(--text); font-size:15px;
  }
  .mm-tete-btn:hover{border-color:var(--accent1);}
  .mm-tete-btn-sortie{border-color:color-mix(in srgb, var(--danger) 45%, var(--line));}
  .mm-tete-btn-sortie:hover{border-color:var(--danger);}

  .mm-section-titre{font-size:10.5px; font-weight:700; letter-spacing:.4px;
    text-transform:uppercase; color:var(--muted); padding:16px 18px 6px;}
  /* Même filet que la barre latérale du bureau, pour que les deux menus se
     lisent de la même façon. Le premier titre suit déjà une bordure. */
  .mm-nav .mm-section-titre{border-top:1px solid var(--line); margin-top:6px; padding-top:14px;}
  .mm-nav .mm-section-titre:first-child{border-top:none; margin-top:0;}

  /* le sélecteur de groupe reste collé sous le cadre profil pendant le défilement du menu */
  .mm-groupes{border-bottom:1px solid var(--line); padding-bottom:10px; position:sticky; top:var(--mm-tete-h, 72px); background:var(--panel); z-index:1;}
  .mm-groupe{display:flex; align-items:center; gap:10px; padding:11px 18px; font-size:14px; color:var(--muted);}
  .mm-groupe.on{color:var(--text); font-weight:600;}
  .mm-pastille{width:9px; height:9px; border-radius:50%; flex-shrink:0;}

  .mm-nav{padding-bottom:6px;}
  /* Cibles tactiles franches : une ligne par entrée, toute la largeur. */
  .mm-item{display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:13px 18px; font-size:14.5px; color:var(--text); border-left:3px solid transparent;}
  .mm-item.on{border-left-color:var(--accent1); background:var(--panel-2); font-weight:600;}
  .mm-item:active{background:var(--panel-2);}

  .mm-item-sortie{color:var(--danger);}

  /* Section « Général » en grille d'icônes plutôt qu'en liste de texte —
     même langage visuel que la feuille d'ajout rapide (tabbar_mobile.php) :
     c'est la section la plus consultée du panneau, elle mérite de se
     repérer d'un coup d'œil plutôt qu'à la lecture. */
  .mm-grille{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px 8px; padding:4px 14px 8px;}
  .mm-grille-item{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    text-decoration:none; color:var(--text);
  }
  .mm-grille-icone{
    position:relative; width:50px; height:50px; border-radius:16px;
    display:flex; align-items:center; justify-content:center; font-size:21px;
    background:var(--panel-2);
    transition:transform .12s ease;
  }
  .mm-grille-item:active .mm-grille-icone{transform:scale(.92);}
  .mm-grille-item.on .mm-grille-icone{box-shadow:inset 0 0 0 2px var(--accent1);}
  .mm-grille-c-cyan{background:color-mix(in srgb, var(--accent1) 16%, var(--panel));}
  .mm-grille-c-violet{background:color-mix(in srgb, var(--accent2) 16%, var(--panel));}
  .mm-grille-libelle{font-size:11px; font-weight:600; text-align:center; line-height:1.25;}
  .mm-grille-item.on .mm-grille-libelle{color:var(--accent1);}
  .mm-grille-icone .nav-pastille{
    position:absolute; top:-4px; right:-4px; margin-left:0;
    min-width:16px; height:16px; line-height:16px; font-size:9.5px; padding:0 3px;
    box-shadow:0 0 0 2px var(--panel-2);
  }
}

.tabbar-mobile{display:none;}
.ajout-rapide,.ajout-rapide-overlay{display:none;}

@media (max-width:900px){
  .tabbar-mobile{
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:8px 6px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .tabm{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:9.5px; color:var(--muted); text-decoration:none;
    background:none; border:0; cursor:pointer; font-family:inherit; padding:2px 0;
  }
  .tabm-icone{
    width:38px; height:38px; border-radius:12px; display:flex; align-items:center;
    justify-content:center; background:var(--panel-2);
    transition:background .15s ease, transform .12s ease;
  }
  .tabm:active .tabm-icone{transform:scale(.92);}
  .tabm-icone{font-size:19px; line-height:1;}
  .tabm.on{color:var(--text); font-weight:600;}
  /* Couleur permanente (comme la grille du menu "Plus"), pas seulement à
     l'état actif : l'onglet en cours se distingue par un contour marqué
     plutôt que par une couleur qui n'apparaîtrait que là — plus lisible
     qu'un simple changement de teinte, et cohérent avec le reste du menu. */
  .tabm-c-cyan.tabm-icone{background:color-mix(in srgb, var(--accent1) 16%, var(--panel)); color:var(--accent1);}
  .tabm-c-violet.tabm-icone{background:color-mix(in srgb, var(--accent2) 16%, var(--panel)); color:var(--accent2);}
  .tabm.on .tabm-icone{box-shadow:inset 0 0 0 2px currentColor;}
  .tabm:focus-visible{outline:2px solid var(--accent1); outline-offset:3px; border-radius:8px;}
  /* Pastille de non-lus posée en badge sur l'icône (haut-droite), pas en ligne
     comme dans le menu latéral — .nav-pastille est ajoutée par la même
     fonction JS (majPastilleMessagerie) sur tout lien href="messagerie.php",
     seule sa position diffère ici selon le contexte. */
  .tabm .nav-pastille{
    position:absolute; top:-2px; left:calc(50% + 6px); margin-left:0;
    min-width:15px; height:15px; line-height:15px; font-size:9px; padding:0 3px;
    box-shadow:0 0 0 2px var(--panel);
  }

  /* align-self:center la recentre verticalement dans la barre — sans lui, le
     grid align-items:end (aligné sur le bas des autres onglets, texte compris)
     la collait plus bas que les icônes voisines, faute d'étiquette sous elle. */
  .tabm-fab-slot{padding:0; display:flex; align-items:center; justify-content:center; align-self:center;}
  .tabm-fab{
    width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
    background:var(--accent1); color:var(--action-on);
    font-size:26px; line-height:1; font-weight:700;
    display:flex; align-items:center; justify-content:center; padding:0;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
    transition:transform .15s ease;
  }
  .tabm-fab:active{transform:scale(.92);}
  .tabm-fab:focus-visible{outline:2px solid var(--text); outline-offset:3px;}

  /* La barre flotte au-dessus du contenu : on lui réserve sa hauteur, sinon
     le dernier bloc de chaque page reste caché dessous. */
  .content{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;}
  /* Pages avec la barre flottante (.evt-barre-mobile — événements, fiches de
     route, messagerie, devis, organisateurs, production) : elle se pose
     au-dessus de la barre d'onglets, il faut donc réserver sa hauteur en plus
     (≈ padding 8+8 + icônes 34px + 8px d'écart avec la barre d'onglets),
     sinon le dernier élément de la liste reste caché dessous. Plus spécifique
     que la règle générique juste au-dessus (classe + :has), donc gagne malgré
     le !important partagé. */
  .content:has(.evt-barre-mobile){padding-bottom:calc(84px + 58px + env(safe-area-inset-bottom)) !important;}

  /* Feuille d'ajout rapide */
  .ajout-rapide-overlay{
    display:block; position:fixed; inset:0; z-index:61;
    background:rgba(0,0,0,.5); opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .ajout-rapide-overlay.open{opacity:1; pointer-events:auto;}
  .ajout-rapide{
    display:block; position:fixed; left:12px; right:12px; z-index:62;
    bottom:calc(78px + env(safe-area-inset-bottom));
    background:var(--panel-2); border:1px solid var(--line);
    border-radius:16px; padding:14px 0 12px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    transform:translateY(14px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .ajout-rapide.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .ajout-rapide-titre{
    font-size:10px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); font-weight:600; padding:2px 14px 10px;
    text-align:center;
  }
  /* Ruban plutôt que liste verticale : un balayage horizontal suffit à
     parcourir les raccourcis, et un aperçu du suivant dépasse toujours à
     droite (bord-fondu) pour signaler qu'il y a plus à voir. */
  .ajout-rapide-bord-fondu{
    position:absolute; top:40px; bottom:26px; right:0; width:24px; z-index:1;
    background:linear-gradient(90deg, transparent, var(--panel-2)); pointer-events:none;
  }
  .ajout-rapide-ruban{
    display:flex; gap:16px; overflow-x:auto; padding:0 16px 4px;
    /* Pas de centrage par défaut : sur un ruban qui déborde, centrer coupe le
       premier ET le dernier item à l'ouverture (constaté), au lieu de partir
       du premier item entier avec juste un aperçu du suivant qui dépasse.
       Le centrage n'est ajouté (classe .centre, voir majPoints() dans
       tabbar_mobile.php) que quand tout tient déjà à l'écran. */
    justify-content:flex-start;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; cursor:grab;
  }
  .ajout-rapide-ruban.centre{justify-content:center;}
  .ajout-rapide-ruban::-webkit-scrollbar{display:none;}
  .ajout-rapide-ruban.saisi{cursor:grabbing; scroll-snap-type:none;}
  .ajout-rapide-item{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    flex:0 0 auto; width:64px; scroll-snap-align:start;
    text-decoration:none; color:var(--text); -webkit-user-select:none; user-select:none;
  }
  .ajout-rapide-icone{
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:21px; background:var(--panel);
    transition:transform .12s ease;
  }
  .ajout-rapide-item:active .ajout-rapide-icone{transform:scale(.92);}
  .ajout-rapide-c-cyan{background:color-mix(in srgb, var(--accent1) 16%, var(--panel));}
  .ajout-rapide-c-danger{background:color-mix(in srgb, var(--danger) 14%, var(--panel));}
  .ajout-rapide-c-violet{background:color-mix(in srgb, var(--accent2) 16%, var(--panel));}
  .ajout-rapide-libelle{font-size:11px; font-weight:600; text-align:center; line-height:1.2;}
  .ajout-rapide-points{display:flex; gap:5px; justify-content:center; margin-top:10px;}
  .ajout-rapide-point{width:5px; height:5px; border-radius:50%; background:var(--line); transition:background .15s ease, width .15s ease;}
  .ajout-rapide-point.actif{background:var(--accent1); width:14px; border-radius:3px;}
}

@media (prefers-reduced-motion:reduce){
  .ajout-rapide,.ajout-rapide-overlay,.tabm-fab{transition:none;}
}

/* ============================================================
   NOTIFICATIONS FLOTTANTES
   Les confirmations d'action s'affichent en haut de l'écran et
   s'effacent seules. Les notices marquées .alert-fixe restent
   dans la page : elles expliquent son état (lecture seule,
   profil à compléter) et doivent rester lisibles.
   ============================================================ */
.toast-zone{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:200; display:flex; flex-direction:column; gap:10px;
  width:min(440px, calc(100vw - 32px)); pointer-events:none;
}
.toast-zone .alert{
  margin:0; pointer-events:auto; cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  animation:toast-entree .25s ease;
  /* .alert-success/.alert-error n'ont que 12% d'opacité de fond : très bien
     posées dans la page, mais illisibles ici où elles flottent par-dessus
     n'importe quel contenu (texte, tableaux...) qui transparaîtrait sinon. */
  background:var(--panel) !important;
  backdrop-filter:blur(8px);
}
.toast-zone .alert.alert-success{ border-color:var(--accent1); }
.toast-zone .alert.alert-error{ border-color:var(--danger); }
.toast-zone .alert::after{
  content:"✕"; float:right; opacity:.45; font-size:12px; margin-left:10px;
}
.toast-zone .alert.toast-sortie{
  animation:toast-sortie .35s ease forwards;
}
@keyframes toast-entree{
  from{opacity:0; transform:translateY(-12px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes toast-sortie{
  to{opacity:0; transform:translateY(-12px);}
}
@media (max-width:900px){
  /* Au-dessus de la barre d'onglets, sous la barre de titre. */
  .toast-zone{top:12px; width:calc(100vw - 24px);}
}
@media (prefers-reduced-motion:reduce){
  .toast-zone .alert,.toast-zone .alert.toast-sortie{animation:none;}
}

/* Notification de suppression : rouge, avec possibilité d'annuler. */
.toast-zone .alert.alert-suppression{
  background:rgba(255,107,107,.14); color:var(--danger);
  border:1px solid rgba(255,107,107,.4);
}
/* Notification d'archivage : même mécanique (annulable) mais un archivage
   n'est pas destructeur — ambre plutôt que rouge, pour ne pas laisser croire
   à un problème. */
.toast-zone .alert.alert-archivage{
  background:rgba(255,184,77,.14); color:#FFB84D;
  border:1px solid rgba(255,184,77,.4);
}
.toast-zone .alert.alert-archivage .toast-annuler-archivage{
  background:#FFB84D; color:#0A0C12;
}
.toast-zone .alert .toast-actions{
  display:flex; gap:8px; align-items:center; margin-top:10px;
}
.toast-zone .alert .toast-annuler{
  display:inline-block; padding:5px 12px; border-radius:7px;
  background:var(--danger); color:#fff; text-decoration:none;
  font-size:12.5px; font-weight:600; border:0; cursor:pointer;
}
/* La croix devient un vrai bouton : la pastille ::after ne se visait pas bien. */
.toast-zone .alert::after{content:none;}
.toast-zone .alert{position:relative; padding-right:34px; cursor:default;}
.toast-fermer{
  position:absolute; top:8px; right:8px;
  width:22px; height:22px; border-radius:6px; border:0;
  background:transparent; color:inherit; opacity:.5;
  font-size:13px; line-height:1; cursor:pointer;
}
.toast-fermer:hover{opacity:1; background:rgba(128,128,128,.18);}
.toast-fermer:focus-visible{outline:2px solid currentColor; outline-offset:1px;}

/* ============================================================
   ONGLETS DE LA FICHE DE ROUTE
   La fiche est longue : on la parcourt selon le moment où l'on
   s'en sert, pas d'un bout à l'autre.
   ============================================================ */
.fr-onglets{
  display:flex; gap:4px; margin:0 0 18px;
  padding:4px; border-radius:11px;
  background:var(--panel-2); border:1px solid var(--line);
}
.fr-onglet{
  flex:1; padding:9px 10px; border:0; border-radius:8px;
  background:transparent; color:var(--muted);
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.fr-onglet:hover{ color:var(--text); background:rgba(128,128,128,.1); }
.fr-onglet.actif{
  background:var(--panel); color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.fr-onglet:focus-visible{ outline:2px solid var(--accent1); outline-offset:1px; }

/* Un panneau masqué reste dans le formulaire : ses champs sont envoyés. */
.fr-panneau[hidden]{ display:none; }

@media (max-width:520px){
  /* Plutôt que rogner les libellés, on laisse la barre défiler : masquer le
     texte derrière une seule icône rendrait les onglets illisibles. */
  .fr-onglets{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fr-onglet{ flex:0 0 auto; padding:9px 14px; font-size:12.5px; }
}

/* ============================================================
   NOTIFICATIONS : CLOCHE ET PASTILLES
   ============================================================ */
.cloche-zone{ position:relative; }
.cloche-btn{
  position:relative; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--text); font-size:16px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.cloche-btn:hover{ background:var(--panel); }
.cloche-btn:focus-visible{ outline:2px solid var(--accent1); outline-offset:1px; }
.cloche-pastille{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px;
  padding:0 4px; border-radius:9px; background:var(--danger); color:#fff;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
.cloche-texte-desktop{
  display:inline; font-size:12.5px; font-weight:700; color:var(--text);
  white-space:nowrap;
}
.cloche-btn:has(.cloche-texte-desktop){ width:auto; padding:0 14px 0 12px; }
@media (max-width:900px){
  .cloche-texte-desktop{ display:none; }
  .cloche-btn:has(.cloche-texte-desktop){ width:38px; padding:0; }
}

.cloche-menu{
  display:none; position:absolute; top:46px; right:0; z-index:150;
  width:min(360px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--line); border-radius:13px;
  box-shadow:0 18px 44px rgba(0,0,0,.4); overflow:hidden;
  max-height:min(70vh, 520px); overflow-y:auto;
}
.cloche-menu.ouvert{ display:block; }
@media (max-width:900px){
  /* Le menu s'alignait sur le bord droit de la cloche — qui n'est pas celui de
     l'écran, le bouton jour/nuit la suivant. Large de presque toute la fenêtre,
     il débordait donc à gauche. Ici il s'ancre à la fenêtre, pas au bouton. */
  .cloche-menu{
    position:fixed; top:calc(56px + env(safe-area-inset-top));
    left:12px; right:12px; width:auto;
    max-height:min(70vh, 70dvh);
  }
}
.cloche-entete{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted);
}
.cloche-entete a{ color:var(--accent1); text-decoration:none; font-weight:600; text-transform:none; letter-spacing:0; }
.cloche-vide{ padding:26px 14px; text-align:center; font-size:13px; color:var(--muted); }

.cloche-item{
  display:flex; gap:11px; padding:12px 14px; text-decoration:none;
  color:var(--text); border-bottom:1px solid var(--line);
}
.cloche-item:last-child{ border-bottom:0; }
a.cloche-item:hover{ background:var(--panel-2); }
.cloche-icone{ font-size:17px; line-height:1.3; flex-shrink:0; }
.cloche-corps{ min-width:0; flex:1; }
.cloche-titre{ font-size:13.5px; font-weight:600; line-height:1.4; }
.cloche-detail{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.cloche-action{ background:rgba(0,229,214,.06); }
/* Rouge pour ce qui signale un problème ou une perte (date supprimée, tâche
   déjà en retard) — à distinguer visuellement d'une simple nouveauté. */
.cloche-alerte{ background:rgba(224,69,90,.08); }
a.cloche-alerte:hover{ background:rgba(224,69,90,.15); }
.cloche-alerte .cloche-type{ color:var(--danger); }
.cloche-boutons{ margin-top:9px; }
.cloche-boutons form{ display:flex; gap:7px; margin:0; }

/* Pastille chiffrée dans le menu latéral. */
.nav-pastille{
  display:inline-block; min-width:17px; height:17px; margin-left:7px;
  padding:0 4px; border-radius:9px; background:var(--danger); color:#fff;
  font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
  vertical-align:middle;
}

/* Ligne montrée depuis une notification : un halo bref, puis retour au calme. */
.ligne-signalee > td{
  background:rgba(0,229,214,.14) !important;
  transition:background 1.2s ease;
}

/* ============================================================
   ZONE « NOUVEAU » EN TÊTE DE PAGE
   Ce qui est arrivé depuis la dernière visite de cette section.
   ============================================================ */
.zone-nouveau{
  margin:0 0 22px; border-radius:13px; overflow:hidden;
  border:1px solid rgba(0,229,214,.35);
  background:rgba(0,229,214,.07);
}
.zone-nouveau-titre{
  padding:11px 16px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--accent1);
  border-bottom:1px solid rgba(0,229,214,.22);
}
.zone-nouveau-liste{ display:flex; flex-direction:column; }
.zone-nouveau-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; text-decoration:none; color:var(--text);
  border-bottom:1px solid rgba(0,229,214,.14);
}
.zone-nouveau-item:last-child{ border-bottom:0; }
.zone-nouveau-item:hover{ background:rgba(0,229,214,.1); }
.zone-nouveau-icone{ font-size:16px; flex-shrink:0; }
.zone-nouveau-corps{ display:flex; flex-direction:column; min-width:0; flex:1; }
.zone-nouveau-nom{ font-size:13.5px; font-weight:600; }
.zone-nouveau-detail{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.zone-nouveau-quand{ font-size:11.5px; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.zone-nouveau-reste{ padding:9px 16px; font-size:12px; color:var(--muted); }

@media (max-width:560px){
  /* L'ancienneté passe sous le titre plutôt que d'écraser le nom. */
  .zone-nouveau-item{ flex-wrap:wrap; }
  .zone-nouveau-quand{ width:100%; padding-left:28px; }
}

/* Type de l'élément signalé, au-dessus de son nom. */
.zone-nouveau-type,
.cloche-type{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent1); margin-bottom:1px;
}

/* ============================================================
   PAGE PROFIL
   Deux cartes de même facture : les informations d'un côté,
   les identifiants de l'autre. La seconde était auparavant
   posée hors du cadre, d'où son aspect décalé.
   ============================================================ */
.pf-page{
  display:flex; flex-direction:column; gap:20px;
  max-width:720px;
}
.pf-carte{
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:26px 28px;
}
.pf-carte > .fr-section:last-child{ margin-bottom:0; }
.pf-carte .form-actions{ margin-bottom:0; }

/* Le mot de passe se lit comme une ligne d'information, pas comme un champ. */
.pf-identifiant{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 16px; border-radius:11px;
  background:var(--panel-2); border:1px solid var(--line);
}
.pf-identifiant-label{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:3px;
}
.pf-identifiant-valeur{ font-size:15px; letter-spacing:3px; line-height:1; }

@media (max-width:560px){
  .pf-carte{ padding:20px 18px; }
  /* Le bouton passe sous la ligne plutôt que de la comprimer. */
  .pf-identifiant{ align-items:flex-start; }
  .pf-identifiant .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   TABLEAU DE BORD : LES DATES DU MOIS EN TROIS COLONNES
   Calendrier, liste et carte répondent à la même question sous
   trois angles : quand, quoi, où.
   ============================================================ */
.dash-col-carte{ flex:1 1 300px; min-width:280px; align-self:stretch; }

@media (min-width:1150px){
  /* Assez de place pour les trois : on resserre le calendrier et l'écart,
     sinon la carte se replie dessous et rien ne semble avoir bougé.
     Le !important vise un max-width posé en style en ligne. */
  .dash-month-layout{ gap:20px !important; }
  .dash-calendar-wrapper{ max-width:330px !important; }
}

@media (max-width:1149px){
  /* Trois colonnes ne tiennent plus : la carte passe dessous, sur toute la
     largeur, où elle reste lisible. */
  .dash-col-carte{ flex:1 1 100%; }
}

/* Layout responsive du tableau de bord : Calendrier | Dates | Carte */
.dashboard-grid{ display:flex !important; flex-wrap:wrap; gap:32px; align-items:stretch; grid-template-columns:1fr !important; }
.dashboard-grid > div{ flex:1 1 calc(100% - 32px); min-width:150px; display:flex; flex-direction:column; }
.dashboard-grid > div:nth-child(2){ display:none; } /* Masquer colonne Dates */
@media (min-width:1200px){
  .dashboard-grid{ grid-template-columns:1.3fr 1.4fr 1.2fr !important; }
  .dashboard-grid > div:nth-child(1){ flex:1.3 1 auto; min-width:150px; }
  .dashboard-grid > div:nth-child(2){ flex:1.4 1 auto; min-width:150px; }
  .dashboard-grid > div:nth-child(3){ flex:1.2 1 auto; min-width:150px; }
}
@media (min-width:900px) and (max-width:1199px){
  .dashboard-grid{ grid-template-columns:1fr 1fr !important; }
  .dashboard-grid > div:nth-child(n+3){ flex:1 1 100%; min-width:0; }
}

/* Calendrier et carte du tableau de bord : deux colonnes de même largeur tant
   que la place le permet. En dessous, flex-wrap les empile chacun sur toute la
   largeur — la disposition du téléphone, sans requête média à accorder avec la
   largeur réelle du bloc. */
.dash-cal-carte{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start;}
.dash-cal-carte > *{flex:1 1 340px; min-width:0;}

/* Compteurs du tableau de bord : ce sont des liens vers le calendrier, et le
   survol doit le laisser voir. */
/* Cartes de compteurs, fondues en une seule bande (un objet, pas trois cartes
   qui se répètent) : un fond, une bordure, une ombre communs, avec un simple
   filet entre chaque tuile — plus lisible d'un coup d'œil que trois blocs
   séparés qui se ressemblent sans être reliés. */
.dash-stat-cards{
  display:flex; border:1px solid var(--line);
  border-radius:12px; margin-bottom:32px; overflow:hidden;
  background:var(--panel);
  background:var(--panel-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.dash-stat-carte{
  display:grid; flex:1; color:inherit; padding:18px 20px;
  grid-template-columns:auto 1fr; align-items:center; column-gap:14px; row-gap:2px;
  border-right:1px solid var(--line);
  transition:background .15s ease;
}
.dash-stat-carte:last-child{border-right:none;}
.dash-stat-carte:hover{background:var(--panel-2);}
.dash-stat-icone{
  grid-row:1 / span 2; font-size:22px; line-height:1;
  width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--muted) 20%, transparent);
}
/* Une couleur par nature d'indicateur (pas juste par urgence) : les
   événements restent neutres à annoncer, teintés dans l'accent du produit. */
.dash-stat-evenements .dash-stat-icone{
  background:color-mix(in srgb, var(--accent1) 18%, transparent); color:var(--accent1);
}
.dash-stat-libelle{
  font-size:11.5px; color:var(--muted); text-transform:uppercase;
  font-weight:600; letter-spacing:.4px;
}
.dash-stat-nombre{font-size:28px; font-weight:700; color:var(--text); line-height:1.1; font-variant-numeric:tabular-nums;}
.dash-stat-alerte{
  grid-column:2; font-size:12px; font-weight:700; color:var(--danger); margin-top:2px;
}
.dash-stat-urgente .dash-stat-nombre{color:var(--danger);}
.dash-stat-urgente .dash-stat-icone{
  background:rgba(255,107,107,.16); color:var(--danger);
}

/* Sur mobile, la bande passe à la verticale : le filet suit, en bas de
   chaque tuile plutôt qu'à droite. */
@media (max-width:560px){
  .dash-stat-cards{flex-direction:column; margin-bottom:24px;}
  .dash-stat-carte{
    grid-template-columns:auto 1fr auto; align-items:center;
    padding:14px 16px; column-gap:12px; row-gap:0;
    border-right:none; border-bottom:1px solid var(--line);
  }
  .dash-stat-carte:last-child{border-bottom:none;}
  .dash-stat-icone{grid-row:1 / span 2; width:38px; height:38px; font-size:20px;}
  .dash-stat-libelle{grid-column:2; grid-row:1; font-size:11px;}
  .dash-stat-nombre{grid-column:3; grid-row:1 / span 2; font-size:24px;}
  .dash-stat-alerte{grid-column:2; grid-row:2; margin-top:1px;}
  /* Sans alerte, le libellé occupe toute la hauteur et reste centré. */
  .dash-stat-carte:not(.dash-stat-urgente) .dash-stat-libelle{grid-row:1 / span 2;}
}

/* Tuile des tâches en retard : elle scintille pour se signaler au premier
   coup d'œil. Halo en creux (inset) plutôt qu'en débord : la bande fusionnée
   masque tout débordement (overflow:hidden), un halo extérieur y serait
   tronqué. Le clignotement reste doux (pas le texte) et s'arrête pour qui a
   demandé moins d'animations. */
.dash-stat-urgente{animation:dash-scintille 1.4s ease-in-out infinite;}
@keyframes dash-scintille{
  0%, 100%{box-shadow:inset 0 0 0 0 rgba(255,107,107,0);}
  50%{box-shadow:inset 0 0 0 3px rgba(255,107,107,.35);}
}
@media (prefers-reduced-motion: reduce){
  .dash-stat-urgente{animation:none; box-shadow:inset 0 0 0 2px rgba(255,107,107,.35);}
}

/* Carte "Prochain événement" : étiquette + ligne date/infos/messagerie, puis
   un pied séparé par un filet (horaires de la fiche de route, ou l'invitation
   à en créer une). Classes dédiées plutôt que des sélecteurs nth-child, pour
   que les réglages mobile ci-dessous visent des éléments nommés, pas "le 2e
   enfant" — fragile au moindre changement de structure. */
.dash-hero-eyebrow{
  font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; margin-bottom:14px;
}
.dash-hero-body{display:flex; gap:18px; align-items:center;}
.dash-hero-date{flex:0 0 auto; width:56px; text-align:center;}
.dash-hero-jour{font-size:34px; font-weight:700; color:var(--accent1); line-height:1;}
.dash-hero-mois{font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; font-weight:600;}
.dash-hero-info{flex:1; min-width:0;}
.dash-hero-meta{
  font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px;
  flex-wrap:wrap; word-break:break-word;
}
.dash-hero-mail{flex:0 0 auto;}
.dash-hero-footer{
  display:flex; align-items:center; justify-content:space-between; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted);
}
.dash-hero-footer a{color:var(--accent2); text-decoration:none; font-weight:500;}
.dash-notification-horaires{
  display:flex; gap:20px; text-align:center; flex-wrap:wrap; justify-content:flex-end;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.dash-horaire-lbl{font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:600; margin-bottom:4px;}
.dash-horaire-val{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;}
/* Toujours masqué (desktop et mobile) : le get-in ne s'affiche pas ici,
   seulement dans la fiche de route elle-même. */
.dash-getIn-mobile{display:none;}

@media (max-width:768px){
  .dash-hero-body{align-items:flex-start;}
  .dash-hero-jour{font-size:28px;}
  .dash-hero-info h3{font-size:14px !important;}
  .dash-notification-horaires{
    justify-content:flex-start; gap:14px; font-size:11px; overflow-x:auto;
  }
  .dash-notification-horaires > div{flex:0 0 auto;}
}

/* Bloc de la prochaine date : ouvre sa fiche de route. */
.dash-hero-cliquable{cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;}
.dash-hero-cliquable:hover{border-color:var(--accent1) !important; box-shadow:0 6px 20px rgba(0,0,0,.25);}
.dash-hero-cliquable:focus-visible{outline:2px solid var(--accent1); outline-offset:3px;}

/* Date mise en évidence par le survol ou par un clic (liste ↔ calendrier ↔ carte). */
.dash-month-item{ cursor:pointer; transition:background .15s ease, box-shadow .15s ease; }
.dash-month-item.est-liee{ background:rgba(0,229,214,.1); }
.dash-month-item.est-verrouillee{ box-shadow:inset 0 0 0 1px var(--accent1); }
#dashMiniMonth .mini-day{ cursor:default; }

/* ============================================================
   CASES À COCHER
   Le rendu natif du navigateur ignorait la palette et changeait
   d'aspect d'un système à l'autre. Redessinées ici, elles sont
   identiques partout et suivent le thème.
   ============================================================ */
.fr-checkbox-label{
  display:flex; align-items:center; gap:10px;
  font-size:13px; cursor:pointer; user-select:none;
  padding:7px 10px; margin:0; border-radius:9px;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease;
}
.fr-checkbox-label:hover{ background:var(--panel-2); }

.fr-checkbox-label input[type="checkbox"],
.fr-checkbox-label input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:19px; height:19px; flex-shrink:0; margin:0;
  border-radius:6px; cursor:pointer; position:relative;
  border:1.5px solid var(--line);
  background:var(--panel);
  transition:background .15s ease, border-color .15s ease;
}
.fr-checkbox-label:hover input[type="checkbox"],
.fr-checkbox-label:hover input[type="radio"]{ border-color:var(--accent1); }

/* La coche est tracée en CSS : pas d'image à charger, nette à toute taille.
   Même tracé pour une case et un bouton radio — un radio "coché carré avec
   coche" plutôt qu'un rond, pour rester visuellement identique aux cases. */
.fr-checkbox-label input[type="checkbox"]::after,
.fr-checkbox-label input[type="radio"]::after{
  content:""; position:absolute;
  left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(.4);
  opacity:0; transition:opacity .12s ease, transform .12s ease;
}
.fr-checkbox-label input[type="checkbox"]:checked,
.fr-checkbox-label input[type="radio"]:checked{
  background:var(--accent1); border-color:var(--accent1);
}
.fr-checkbox-label input[type="checkbox"]:checked::after,
.fr-checkbox-label input[type="radio"]:checked::after{
  opacity:1; transform:rotate(45deg) scale(1);
}
/* La case cochée teinte sa ligne : l'état se lit sans viser la case. */
.fr-checkbox-label:has(input[type="checkbox"]:checked),
.fr-checkbox-label:has(input[type="radio"]:checked){
  background:rgba(0,229,214,.08); border-color:rgba(0,229,214,.3);
}

.fr-checkbox-label input[type="checkbox"]:focus-visible,
.fr-checkbox-label input[type="radio"]:focus-visible{
  outline:2px solid var(--accent1); outline-offset:2px;
}
.fr-checkbox-label input[type="checkbox"]:disabled,
.fr-checkbox-label input[type="radio"]:disabled{
  opacity:.45; cursor:not-allowed;
}
.fr-checkbox-label:has(input:disabled){ cursor:not-allowed; opacity:.7; }

@media (prefers-reduced-motion:reduce){
  .fr-checkbox-label,
  .fr-checkbox-label input[type="checkbox"],
  .fr-checkbox-label input[type="radio"],
  .fr-checkbox-label input[type="checkbox"]::after,
  .fr-checkbox-label input[type="radio"]::after{ transition:none; }
}

/* Variante compacte de .fr-checkbox-label : sous-filtres nichés sous un
   réglage parent (ex : catégories d'événements d'un groupe sur l'agenda
   personnel, "Mon profil") — même comportement, texte et pastille réduits,
   posées en ligne plutôt qu'empilées, pour bien les distinguer visuellement
   du réglage parent qui les contient. */
.fr-checkbox-label-sm{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; cursor:pointer; user-select:none;
  padding:4px 9px; margin:0; border-radius:20px;
  border:1px solid var(--line); background:var(--panel);
  transition:background .15s ease, border-color .15s ease;
}
.fr-checkbox-label-sm:hover{ border-color:var(--accent1); }
.fr-checkbox-label-sm input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:14px; height:14px; flex-shrink:0; margin:0;
  border-radius:4px; cursor:pointer; position:relative;
  border:1.5px solid var(--line); background:var(--panel);
  transition:background .15s ease, border-color .15s ease;
}
.fr-checkbox-label-sm input[type="checkbox"]::after{
  content:""; position:absolute;
  left:4px; top:1px; width:4px; height:7px;
  border:solid #fff; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(.4);
  opacity:0; transition:opacity .12s ease, transform .12s ease;
}
.fr-checkbox-label-sm input[type="checkbox"]:checked{ background:var(--accent1); border-color:var(--accent1); }
.fr-checkbox-label-sm input[type="checkbox"]:checked::after{ opacity:1; transform:rotate(45deg) scale(1); }
.fr-checkbox-label-sm:has(input:checked){ background:rgba(0,229,214,.1); border-color:rgba(0,229,214,.4); }

/* Groupe décoché de l'agenda personnel ("Mon profil") : le bloc reste lisible
   mais s'efface visuellement, sans disparaître (on doit pouvoir le recocher). */
.pf-agenda-groupe-inactif{ opacity:.55; border-left-color:var(--line) !important; }

/* ============================================================
   MESSAGERIE — pastille d'initiales et marqueurs "vu par"
   ============================================================ */
.messagerie-avatar{
  flex-shrink:0; width:40px; height:40px; border-radius:11px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; cursor:default;
}
img.messagerie-avatar{object-fit:cover;}
.messagerie-vu-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:6px; margin:0 2px;
  background:var(--panel-2); border:1px solid var(--accent1); color:var(--accent1);
  font-size:8.5px; font-weight:700;
}
img.messagerie-vu-badge{object-fit:cover; border-color:var(--accent1);}

/* ============================================================
   LISTE DE CONVERSATIONS (messagerie.php) — avatar coloré par type
   d'icône, actions secondaires derrière un menu plutôt que toujours
   visibles à côté de chaque ligne.
   ============================================================ */
.msg-row{
  display:flex; align-items:flex-start; gap:12px; position:relative;
  padding:13px 8px; border-bottom:1px solid var(--line); cursor:pointer;
}
.msg-row:last-child{border-bottom:none;}
.msg-row:hover{background:var(--panel-2);}
.msg-avatar{
  position:relative; flex-shrink:0; width:44px; height:44px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.msg-c-cyan{background:color-mix(in srgb, var(--accent1) 16%, var(--panel));}
.msg-c-violet{background:color-mix(in srgb, var(--accent2) 16%, var(--panel));}
.msg-verrou{
  position:absolute; bottom:-3px; right:-3px; width:17px; height:17px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:9px;
}
.msg-corps{flex:1; min-width:0;}
.msg-tete{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.msg-nom{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.msg-heure{font-size:11px; color:var(--muted); flex-shrink:0;}
.msg-groupe{font-size:11.5px; color:var(--muted); margin-top:1px;}
.msg-ligne-apercu{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px;}
.msg-apercu{font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.msg-apercu strong{color:var(--text); font-weight:600;}
.msg-badge{
  flex-shrink:0; background:var(--accent1); color:var(--bg); font-size:11px; font-weight:700;
  min-width:19px; height:19px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.msg-kebab{
  flex-shrink:0; width:28px; height:28px; border-radius:8px; border:none; background:transparent;
  color:var(--muted); font-size:17px; line-height:1; cursor:pointer; margin-top:6px;
}
.msg-kebab:hover{background:var(--panel-2); color:var(--text);}
.msg-menu{
  display:none; position:absolute; top:38px; right:8px; z-index:20; min-width:220px;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 10px 28px rgba(0,0,0,.3); padding:6px; flex-direction:column; gap:2px;
}
.msg-menu.open{display:flex;}
.msg-menu button{
  display:block; width:100%; text-align:left; padding:10px 11px; border-radius:8px;
  border:none; background:none; color:var(--text); font-size:13.5px; cursor:pointer; font-family:inherit;
}
.msg-menu button:hover{background:var(--panel-2);}
.msg-menu-danger{color:var(--danger) !important;}
/* Membres (contacts.php) : le menu replié y loge les boutons ronds d'origine
   (icône seule) au lieu de la liste d'actions en texte plein — une seule
   ligne compacte plutôt que 3 lignes hautes de 40px. */
.ctm-menu-icones{flex-direction:row; min-width:0; padding:8px; gap:8px;}
.ctm-menu-icones .btn{display:inline-flex; align-items:center; justify-content:center;}
/* .msg-menu button{border:none; background:none;} (générique, pensé pour les
   lignes de texte du menu) écrase sinon la couleur/le contour propres à
   chaque bouton — restaurés ici explicitement. */
.ctm-menu-icones .btn-view{border:1.5px solid var(--action-view); background:transparent; color:var(--action-view);}
.ctm-menu-icones .btn-edit{border:1.5px solid var(--action-edit); background:transparent; color:var(--action-edit);}
.ctm-menu-icones .btn-delete{border:1.5px solid var(--action-delete); background:transparent; color:var(--action-delete);}

/* Filtres de groupe : pilules vitre dépolie, scopées à la messagerie pour ne
   pas changer .filter-chip ailleurs dans l'appli. */
.msg-pilules{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.msg-pilule{
  padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--text-secondary); background:var(--panel-2); border:1px solid var(--line);
}
.msg-pilule.active{background:var(--chip, var(--accent1)); border-color:var(--chip, var(--accent1)); color:#fff;}

/* Récentes/Archivé en bascule à deux segments plutôt qu'en pilules séparées :
   plus clair que c'est un choix binaire. */
.msg-segmente{display:flex; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:4px;}
.msg-segmente-item{
  flex:1; text-align:center; padding:9px; border-radius:9px; font-size:13px; font-weight:600;
  color:var(--muted); cursor:pointer;
}
.msg-segmente-item.active{background:var(--panel); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.18);}

/* La liste (récentes/archivées) se lit comme un seul bloc plutôt que de
   flotter directement sur le fond de page. */
.msg-liste-fond{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:6px 14px; margin-top:14px;
}
/* Même effet verre dépoli que .sidebar/.fr-section/.table-wrap/.dash-stat-cards —
   background plein d'abord (repli si backdrop-filter non supporté), puis
   l'amélioration en deux déclarations séparées pour garder l'ordre de cascade. */
.msg-liste-fond{background:var(--panel-glass); backdrop-filter:blur(16px);}
.msg-liste-fond .msg-row{padding-left:2px; padding-right:2px;}

/* Épinglées en petites cartes horizontales façon "stories", pas en liste. */
.msg-epingles-ruban{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none;}
.msg-epingles-ruban::-webkit-scrollbar{display:none;}
.msg-epingle-carte{
  flex:0 0 auto; width:150px; background:var(--panel); border:1px solid var(--line);
  border-radius:13px; padding:12px; position:relative; overflow:hidden; cursor:pointer;
}
.msg-epingle-carte::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent1),var(--accent2));}
.msg-epingle-icone{
  width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:16px; background:var(--panel-2); position:relative; margin-top:4px;
}
.msg-epingle-nom{font-size:13px; font-weight:700; margin:8px 0 3px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.msg-epingle-apercu{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.msg-epingle-badge{
  position:absolute; top:10px; right:10px; background:var(--danger); color:#fff; font-size:10px;
  font-weight:700; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ===== Cartes de dates (liste du bilan, historiques producteur/organisateur) ===== */
/* Une carte par date, sur deux lignes (date + nom / lieu + résultat) : lisible sur téléphone. */
.brt-liste{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.brt-ligne{display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; color:var(--text);}
.brt-l-corps{flex:1; min-width:0; display:block; color:inherit; text-decoration:none;}
.brt-l-crayon{flex-shrink:0; width:40px; height:40px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
/* Bouton « Bilan réel » : fond orange tant que le VHR de la date n'est pas validé, vert une fois validé. */
.btn.brt-vhr-non, .msg-kebab.brt-vhr-non{background:rgba(240,165,58,.14) !important; border-color:rgba(240,165,58,.55) !important; color:inherit !important;}
.btn.brt-vhr-ok, .msg-kebab.brt-vhr-ok{background:rgba(46,204,113,.14) !important; border-color:rgba(46,204,113,.55) !important; color:inherit !important;}
.brt-ligne:hover{border-color:var(--accent1);}
.brt-l-haut{display:flex; align-items:baseline; gap:10px; min-width:0;}
.brt-l-date{flex-shrink:0; font-size:17px; font-weight:800; color:var(--text);}
.brt-l-nom{font-weight:700; font-size:14.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.brt-l-statut{flex-shrink:0; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700; border:1px solid currentColor;}
.brt-st-ok{color:#2ecc71;}
.brt-st-opt{color:#FFB84D;}
.brt-st-ko{color:#ff6b6b;}
.brt-st-autre{color:var(--muted);}
.brt-l-orga{margin-top:4px; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.brt-l-bas{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; font-size:12.5px;}
.brt-l-gauche{display:flex; align-items:center; gap:8px; min-width:0;}
.brt-l-lieu{color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.brt-l-res{flex-shrink:0; font-weight:700; text-align:right;}
.brt-l-res small{display:block; font-size:9.5px; font-weight:400; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.brt-section-titre{margin:18px 0 0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.brt-section-titre:first-of-type{margin-top:12px;}
.brt-l-actions{display:flex; gap:6px; flex-shrink:0;}
.brt-l-prix{flex-shrink:0; margin-left:auto; text-align:right; font-weight:700; font-size:14px; line-height:1.25;}
.brt-l-prix small{display:block; font-size:10.5px; font-weight:400; color:var(--muted);}
/* Mobile : les boutons pièce + crayon d'une date se replient dans un menu "⋮". */
.brt-l-kebab{display:none; position:relative; flex-shrink:0;}
.brt-l-kebab .msg-kebab{width:36px; height:36px; margin-top:0; font-size:20px;}
.brt-l-kebab .msg-menu{top:40px; right:0;}
@media (max-width:900px){
  .brt-l-actions-pc{display:none !important;}
  .brt-l-kebab{display:block;}
}

/* Historique : tableau sur ordinateur, cartes de dates sur mobile. */
.brt-mobile-only{display:none;}
@media (max-width:900px){
  .brt-desktop-only{display:none;}
  .brt-mobile-only{display:block;}
}

/* Totaux de l'historique : trois cases toujours sur une ligne. */
.brt-totaux{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 14px;}
.brt-totaux .fr-debrief-item{padding:10px 6px; min-width:0;}
.brt-totaux-ttc{font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:900px){
  .brt-totaux{gap:6px;}
  .brt-totaux .fr-debrief-item{padding:8px 4px;}
  .brt-totaux .fr-debrief-label{font-size:9px; letter-spacing:0;}
  .brt-totaux .fr-debrief-value{font-size:12.5px;}
  .brt-totaux-ttc{font-size:10px;}
}

/* Compteur de dates dans l'en-tête d'un historique (après le nom et le crayon). */
.brt-histo-compte{font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap;}

/* Menu ⋮ des cartes de dates : deux boutons carrés côte à côte (la règle générique
   ".msg-menu button" les étirait à 100 % de largeur et sortait le crayon de la boîte). */
.brt-l-kebab .msg-menu{width:max-content; min-width:0; flex-direction:row; align-items:center; padding:8px; gap:8px;}
.brt-l-kebab .msg-menu .btn{width:40px !important; height:40px; padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center; text-align:center; flex:0 0 40px; margin:0;}

/* Puce date dans les cartes de dates (historiques, liste du bilan) : à gauche, centrée en hauteur. */
.brt-ligne .date-chip{flex-shrink:0; align-self:center;}

/* État d'une date : libellé complet sur ordinateur, réduit (Val., Opt., Ann., Att.) sur mobile. */
.statut-court{display:none;}
@media (max-width:900px){
  .statut-long{display:none;}
  .statut-court{display:inline;}
}

/* ===== Filtres des historiques (producteur / organisateur) =====
   Ordinateur : champs Du / Au / Recherche + boutons Validés / Options en haut.
   Mobile : même principe que la barre flottante des Événements — une barre
   d'icônes collée en bas de la fenêtre (🔍 📅 ✅ 🟠), dont la recherche et la
   période s'ouvrent en panneau juste au-dessus. */
#prodHistoCorps, #orgaHistoCorps{display:flex; flex-direction:column;}
.brt-filtres{order:-1; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:14px;}
.brt-filtres-panneau{display:flex; gap:12px; align-items:flex-end;}
.brt-filtres-recherche{flex:1; min-width:160px;}
.brt-filtres-barre{display:flex; gap:8px; align-items:center;}
.brt-f-mobile{display:none;}
.brt-f-bouton{width:auto; padding:0 12px; gap:4px; font-size:12.5px; font-weight:600;}
.evt-barre-icon.brt-f-bouton.active, .evt-barre-icon.brt-f-mobile.active{background:var(--accent1); border-color:var(--accent1); color:#06222a;}
@media (max-width:900px){
  .brt-filtres{order:2; position:sticky; bottom:8px; z-index:6; margin:12px 0 0; padding:8px 10px; gap:8px;
    border-radius:12px; background:color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter:blur(6px);
    border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,.35);}
  .brt-filtres-barre{width:100%; justify-content:space-between;}
  .brt-f-mobile{display:inline-flex;}
  .brt-f-bouton{width:34px; padding:0; gap:0;}
  .brt-f-texte{display:none;}
  .brt-filtres-panneau{display:none; position:absolute; left:0; right:0; bottom:calc(100% + 8px);
    flex-direction:column; align-items:stretch; padding:12px; border-radius:12px;
    background:var(--panel); border:1px solid var(--line); box-shadow:0 6px 20px rgba(0,0,0,.35);}
  .brt-filtres-panneau.open{display:flex;}
  .brt-filtres-panneau input{width:100%;}
}

/* Barre des historiques, réorganisée comme celle des Événements : champ de recherche
   qui prend la place restante, puis les boutons carrés alignés à droite. */
.brt-filtres-barre{flex:1; min-width:0; justify-content:flex-start;}
.brt-filtres-barre .evt-barre-input{flex:1; min-width:0;}
@media (max-width:900px){
  .brt-filtres-barre{width:100%; justify-content:flex-start;}
}

/* Historiques producteur / organisateur : fenêtre toujours de la même taille (hauteur de
   l'écran moins les marges), liste défilante au milieu, barre de filtres toujours
   collée en bas — quel que soit le nombre de dates. */
#prodHistoOverlay .fr-modal, #orgaHistoOverlay .fr-modal{
  display:flex; flex-direction:column; overflow:hidden;
  height:calc(100vh - 60px); height:calc(100dvh - 60px); max-height:calc(100dvh - 60px);
}
#prodHistoOverlay .fr-modal-body, #orgaHistoOverlay .fr-modal-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
#prodHistoContenu, #orgaHistoContenu{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.brt-filtres{position:relative !important; bottom:auto !important; flex-shrink:0; order:-1 !important; margin:0 0 14px !important;}
@media (max-width:900px){ .brt-filtres{order:2 !important; margin:10px 0 0 !important;} }

/* Tableaux de dates (ordinateur) : mêmes largeurs de colonnes dans « à venir » et « passées ». */
.brt-desktop-only table{table-layout:fixed; width:100%;}
.brt-desktop-only th:nth-child(1), .brt-desktop-only td:nth-child(1){width:84px;}
.brt-desktop-only th:nth-child(2), .brt-desktop-only td:nth-child(2){width:24%;}
.brt-desktop-only th:nth-child(3), .brt-desktop-only td:nth-child(3){width:22%;}
.brt-desktop-only th:nth-child(4), .brt-desktop-only td:nth-child(4){width:64px;}
.brt-desktop-only th:nth-child(5), .brt-desktop-only td:nth-child(5){width:130px;}
.brt-desktop-only th:nth-child(6), .brt-desktop-only td:nth-child(6){width:100px;}
.brt-desktop-only th:nth-child(7), .brt-desktop-only td:nth-child(7){width:96px;}

/* Recherche prédictive des historiques : propositions sous le champ (ordinateur, barre en haut)
   ou au-dessus (mobile, barre en bas). */
.brt-recherche{position:relative; flex:1; min-width:0;}
.brt-recherche .evt-barre-input{width:100%; box-sizing:border-box;}
.brt-suggest{display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:9; padding:4px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.28);
  max-height:250px; overflow-y:auto;}
.brt-suggest.open{display:block;}
.brt-suggest-item{display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 10px; border:none; background:none; border-radius:7px; color:var(--text); font-size:13px; font-family:inherit; cursor:pointer;}
.brt-suggest-item:hover, .brt-suggest-item:focus{background:var(--panel-2);}
.brt-suggest-item small{flex-shrink:0; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.03em;}
@media (max-width:900px){ .brt-suggest{top:auto; bottom:calc(100% + 6px);} }

/* Recherche prédictive générique (recherche_predictive.js) : liste flottante au-dessus de tout,
   mêmes lignes que les propositions des historiques. */
.rp-liste{display:none; position:fixed; z-index:1000; padding:4px; max-height:260px; overflow-y:auto; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.28);}
.rp-liste.open{display:block;}
.brt-suggest-item.active{background:var(--panel-2);}

/* La fenêtre « Créer une tâche » doit s'ouvrir AU-DESSUS des autres popups (créer un événement, devis, fiche…) :
   elle partageait le même niveau (100) et passait derrière celles ouvertes avant elle. */
#tachesOverlay { z-index: 1150; }   /* le sélecteur d élément (1200) reste au-dessus */

/* Cadre d'information : explication ou aide affichée dans une page, écriture fine, fond légèrement crème (reste lisible en mode nuit : teinte translucide). */
.cadre-info{display:block; margin:10px 0; padding:9px 13px; font-size:12px; line-height:1.5; font-weight:400; color:var(--text); opacity:.85; background:rgba(245,222,160,.22); border:1px solid rgba(214,178,92,.38); border-radius:10px;}
.cadre-info strong{font-weight:600;}
.cadre-info a{color:var(--accent1);}

/* Aide désactivée dans le profil : les cadres d'information sont masqués ; un petit ⓘ dans le coin du bloc permet de les afficher à la demande. */
html[data-aide-infos="non"] .cadre-info{display:none;}
html[data-aide-infos="non"] .cadre-info.cadre-info-ouvert{display:block;}
.aide-info-btn{display:none; position:absolute; top:8px; right:8px; z-index:6; width:22px; height:22px; padding:0; border-radius:50%; border:1px solid rgba(214,178,92,.65); background:rgba(245,222,160,.4); color:#8a6d1c; font:700 12px/1 Georgia,serif; font-style:italic; cursor:pointer; align-items:center; justify-content:center;}
.aide-info-btn:hover{background:rgba(245,222,160,.75);}
html[data-aide-infos="non"] .aide-info-btn{display:inline-flex;}
.aide-info-btn.actif{background:rgba(214,178,92,.55);}
/* blocs dont l'en-tête porte déjà un bouton à droite : l'ⓘ se place à sa gauche */
.pi-carte > .aide-info-btn{top:13px; right:112px;}
.aide-info-btn.aide-info-flottant{position:absolute; top:8px; right:8px; margin:0; z-index:6;}
.aide-info-btn.aide-info-titre{position:static !important; margin:0 8px 0 auto; flex-shrink:0; width:34px; height:34px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line); color:var(--text); font:italic 700 17px/1 Georgia,serif; display:none; align-items:center; justify-content:center;}
html[data-aide-infos="non"] .aide-info-btn.aide-info-titre{display:inline-flex;}
.aide-info-btn.aide-info-titre:hover{background:rgba(245,222,160,.55);}
.aide-info-btn.aide-info-titre.actif{background:rgba(214,178,92,.55); border-color:rgba(214,178,92,.8);}
.aide-info-btn.aide-info-titre{background:rgba(245,222,160,.55); border-color:rgba(214,178,92,.75); color:#8a6d1c;}
.aide-info-btn.aide-info-titre:hover{background:rgba(245,222,160,.85);}
.aide-info-btn.aide-info-titre.actif{background:rgba(214,178,92,.8); border-color:rgba(190,150,60,.95); color:#5f4a0f;}

/* ===== Profil : en-tête, onglets et deux colonnes ===== */
.pf-page.pf-page-large{ max-width:1000px; }
.pf-hero{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:24px 28px; background:var(--panel); border:1px solid var(--line); border-radius:16px; position:relative; overflow:hidden; }
.pf-hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); }
.pf-hero-photo{ flex-shrink:0; }
.pf-hero-infos{ flex:1; min-width:220px; }
.pf-hero-infos h2{ margin:0 0 2px; font-size:22px; }
.pf-hero-pseudo{ color:var(--muted); font-size:13.5px; margin-bottom:6px; }
.pf-hero-coord{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13.5px; color:var(--muted); }
.pf-hero-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pf-badge{ padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; background:var(--panel-2); border:1px solid var(--line); }
.pf-hero-actions{ display:flex; flex-direction:column; gap:8px; }
.pf-onglets{ display:flex; gap:4px; flex-wrap:wrap; padding:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; }
.pf-onglets button{ border:0; background:transparent; color:var(--muted); font:700 13.5px/1 inherit; padding:11px 18px; border-radius:10px; cursor:pointer; transition:background .15s,color .15s; }
.pf-onglets button:hover{ color:var(--text); background:var(--panel); }
.pf-onglets button.actif{ background:var(--accent1, #0B8F84); color:#fff; box-shadow:0 2px 8px rgba(11,143,132,.3); }
.pf-panneau{ display:flex; flex-direction:column; gap:20px; }
.pf-panneau[hidden]{ display:none; }
.pf-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.pf-col{ min-width:0; }
.pf-col > .fr-section:last-child{ margin-bottom:0; }
@media (max-width:820px){ .pf-cols{ grid-template-columns:1fr; } .pf-hero{ padding:20px 18px; } .pf-hero-actions{ flex-direction:row; flex-wrap:wrap; } .pf-onglets button{ padding:10px 12px; font-size:12.5px; flex:1 1 auto; } }
/* ===== Profil : blocs en lecture + ✏️ Modifier dans le coin ===== */
.pf-carte.pf-sans-cadre{ background:transparent; border:0; padding:0; border-radius:0; }
.pf-page .pi-carte{ border:1px solid var(--line); border-radius:14px; padding:14px 18px; background:var(--panel); margin:0 0 16px; }
.pf-page .pi-entete{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.pf-page .pi-entete h2{ margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.pf-page .pi-ligne{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.pf-page .pi-ligne:last-child{ border-bottom:0; }
.pf-page .pi-lib{ color:var(--muted); flex-shrink:0; }
.pf-page .pi-val{ text-align:right; font-weight:600; overflow-wrap:anywhere; }
.pf-page .pi-vide-val{ color:var(--muted); font-weight:400; opacity:.7; }
.pf-page .pi-form{ display:none; }
.pf-page .pi-carte.pi-edition .pi-lecture{ display:none; }
.pf-page .pi-carte.pi-edition .pi-form{ display:block; }
.pf-page .pi-carte.pi-edition .pi-modifier{ display:none; }
.pf-page .pi-form-actions{ display:flex; gap:8px; margin-top:12px; }