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

:root {
    --color-primary: #1e3a5f;
    --color-accent:  #e63946;
    --grey-50:  #f9fafb; --grey-100: #f3f4f6; --grey-200: #e5e7eb;
    --grey-300: #d1d5db; --grey-400: #9ca3af; --grey-500: #6b7280;
    --grey-700: #374151; --grey-900: #111827;  --white: #ffffff;
    --green: #059669; --green-bg: #d1fae5;
    --orange:#d97706; --orange-bg:#fef3c7;
    --red:   #dc2626; --red-bg:   #fee2e2;
    --blue:  #2563eb; --blue-bg:  #eff6ff;
    --radius: 10px; --radius-sm: 6px; --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow:    0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
    --nav-h: 60px; --bottom-h: 66px; --sidebar-w: 250px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.55;color:var(--grey-900);background:var(--grey-50);min-height:100vh}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── TOPBAR MOBILE ── */
.topbar-mobile{position:fixed;top:0;left:0;right:0;height:var(--nav-h);background:var(--color-primary);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:200;gap:12px}
.topbar-mobile .brand{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-mobile .brand img{height:34px;width:auto;border-radius:4px;flex-shrink:0}
.topbar-mobile .brand-text{min-width:0}
.topbar-mobile .brand-name{color:rgba(255,255,255,.9);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-mobile .brand-sub{color:rgba(255,255,255,.45);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-pills{display:flex;gap:4px;flex-shrink:0}
.lang-pill{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;border:none;cursor:pointer;background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);text-decoration:none;transition:all .15s}
.lang-pill.active{background:rgba(255,255,255,.22);color:#fff}
.lang-pill:hover{text-decoration:none}

/* ── PAGE WRAP MOBILE ── */
.page-wrap{padding:calc(var(--nav-h) + 16px) 16px calc(var(--bottom-h) + 16px)}

/* ── BOTTOM NAV ── */
/* ── MENU : GROUPES, BADGES, POINT « NOUVEAU » (10.07.2026) ──────────── */

/* Intitulé de groupe. Discret : il structure, il ne se lit pas. */
/* Titre de groupe. Le contraste était de 2,78:1 sur le fond #1e3a5f, sous le
   minimum WCAG AA de 4,5:1 pour un petit texte — mesuré, pas supposé. Porté à
   0,62 d'opacité (5,47:1), taille 11px, et séparé par un filet : un intitulé
   qui structure doit se voir, même s'il ne se lit pas. */
/* Champ en lecture seule (10.07.2026). `readonly` plutôt que `disabled` : le
   texte reste sélectionnable et copiable — on veut pouvoir prendre un numéro de
   téléphone. `disabled` grise le texte et le rend illisible sur un écran de
   téléphone en plein soleil. Fond neutre, curseur par défaut : rien n'invite au
   clic. */
input[readonly], textarea[readonly]{
  background:var(--grey-50);
  border-color:var(--grey-200);
  color:var(--grey-700);
  cursor:default;
}
input[readonly]:focus, textarea[readonly]:focus{
  outline:none;
  border-color:var(--grey-200);
  box-shadow:none;
}

.nav-grp{padding:16px 20px 6px;margin-top:6px;font-size:11px;font-weight:700;
         letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.62);
         border-top:1px solid rgba(255,255,255,.10)}
.nav-grp:first-child{padding-top:6px;margin-top:0;border-top:none}

/* Le lien devient un conteneur flex : icône, libellé extensible, puis badge
   et point poussés à droite. `position:relative` n'est pas nécessaire — rien
   n'est positionné en absolu, tout est dans le flux. */
.sidebar-nav a{display:flex;align-items:center;gap:10px}
.sidebar-nav a .nav-lbl{flex:1;min-width:0}

/* Badge : un chiffre dans un DISQUE. Fond accent, comme les compteurs
   d'onglets.

   CORRIGÉ 17.07.2026 : le badge était OVALE, pas rond. « min-width:19px »
   plus « padding:0 5px » donnaient 29px de large pour 19 de haut — le
   border-radius:10px arrondissait les angles d'un rectangle, il ne faisait
   pas un cercle.

   Désormais : width = height = 20px, padding retiré. Un chiffre y tient
   largement à 11px. Le padding ne servait qu'aux nombres à 3 chiffres — cas
   inexistant ici (le plus gros compteur observé est 9) ; s'il survenait, le
   chiffre déborderait proprement plutôt que d'étirer la pastille de toutes
   les autres entrées. */
.nav-badge{flex-shrink:0;width:20px;height:20px;border-radius:50%;
           background:var(--color-accent);color:#fff;font-size:11px;font-weight:700;
           display:flex;align-items:center;justify-content:center;line-height:1}

/* Point « nouveau » : un disque bleu, ancré EN HAUT À DROITE du badge
   (17.07.2026, demande explicite).

   AVANT : le point était un élément du flux, posé À DROITE du badge. Il
   consommait sa propre largeur plus le gap du conteneur — soit ~14px pris
   sur le libellé, pour un point de 8px. Sur « Problème de distribution »,
   déjà sur deux lignes, c'était visible.

   MAINTENANT : même principe que la barre mobile (.bottom-nav plus bas), qui
   résolvait déjà ce problème de place. Le point est en position absolue,
   calé sur le coin haut-droit du badge et débordant à moitié : il ne prend
   plus AUCUNE place dans le flux, et le badge peut aller au bout de la ligne.

   Le décalage place le point à cheval sur l'angle haut-droit : sur un
   disque, ce coin est vide (l'arrondi laisse de la place), donc le chiffre
   centré reste entièrement lisible. Valeurs ajustées au badge circulaire de
   20px : -2px suffisent, le point mord légèrement sur le bord sans jamais
   toucher le chiffre.

   Bleu et non rouge : « il y a du neuf » n'est pas « c'est urgent »,
   l'urgence est déjà portée par la couleur des cartes. */
.nav-badge{position:relative;overflow:visible}
.nav-dot{position:absolute;top:-2px;right:-2px;
         width:9px;height:9px;border-radius:50%;background:#3b82f6;
         box-shadow:0 0 0 2px var(--color-primary,#2c3e50)}

/* Repli : sans badge, le point n'a aucun ancrage. Il reprend sa place dans
   le flux, à droite du libellé — cas d'un module « du neuf » mais sans
   compteur (module_vu sans restriction active, par exemple). */
.nav-dot-seul{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#3b82f6;
              box-shadow:0 0 0 2px rgba(59,130,246,.25)}

/* Même chose dans la barre mobile, où la place manque : le badge se superpose
   à l'icône, en haut à droite. */
.bottom-nav a{position:relative}
/* CORRIGÉ (16.07.2026) : le badge (min 16px de large) démarrait à +4px et le
   point « nouveau » à +10px — ils se chevauchaient, et c'était pire avec un
   nombre à deux chiffres. En barre mobile, la place manque horizontalement :
   on empile plutôt le point AU-DESSUS du badge, décalé vers la droite. Les
   deux restent lisibles et distincts.

   MIS À JOUR 17.07.2026 : le point est désormais imbriqué DANS le badge (même
   HTML pour la sidebar et la barre mobile, voir menuLien()). Il s'ancre donc
   sur le badge et non plus sur le lien — le positionnement de .nav-dot est
   commun aux deux contextes, seule l'ombre change pour se détacher du fond
   clair de la barre mobile.
   Le badge y devient rond lui aussi (17x17, sans padding) : il était ovale
   pour la même raison que celui de la sidebar. */
.bottom-nav .nav-badge{position:absolute;top:4px;left:50%;margin-left:2px;
                       width:17px;height:17px;font-size:10px}
.bottom-nav .nav-dot{box-shadow:0 0 0 2px #fff}
.bottom-nav .nav-dot-seul{position:absolute;top:4px;left:50%;margin-left:2px;
                          box-shadow:0 0 0 2px #fff}
.bottom-nav .nav-lbl{flex:none}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-h);background:var(--white);border-top:1px solid var(--grey-200);display:flex;
    /* CORRIGÉ 21.08.2026 : sur admin/rr_carte.php, la carte Leaflet passait
       PAR-DESSUS le menu du bas sur mobile — les panneaux internes de
       Leaflet (tuiles, marqueurs, contrôles) montent jusqu'à z-index:1000
       dans sa propre feuille de style, largement au-dessus des 200 fixés
       ici. 5000 les dépasse tous largement tout en restant sous les vraies
       modales de l'appli (z-index:9000, ex. .modal-overlay, #edit-modal) —
       le menu doit rester cliquable même carte affichée, mais une modale
       doit pouvoir le recouvrir. */
    z-index:5000;padding-bottom:env(safe-area-inset-bottom,0px);
    /* CORRIGÉ 20.08.2026 : sur certains navigateurs mobiles (constaté sur
       la page Infrastructure), un élément position:fixed n'est parfois pas
       peint sur son propre calque au premier rendu — il reste invisible
       tant qu'aucun scroll n'a déclenché un repaint. translateZ(0) force le
       navigateur à composer cette barre comme un calque GPU séparé dès le
       chargement, sans attendre un scroll pour la « découvrir ». Coûte
       rien visuellement (translation nulle), aucun autre effet de bord. */
    transform:translateZ(0);-webkit-transform:translateZ(0);}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--grey-400);font-size:10px;font-weight:500;text-decoration:none;transition:color .15s;padding:6px 2px}
.bottom-nav a.active{color:var(--color-accent)}
.bottom-nav a svg{width:22px;height:22px;stroke-width:1.8}
.bottom-nav a span{line-height:1}
.bottom-nav-more{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--grey-400);font-size:10px;font-weight:500;background:none;border:none;padding:6px 2px;font-family:inherit;cursor:pointer}
.bottom-nav-more.active{color:var(--color-accent)}
.bottom-nav-more svg{width:22px;height:22px;stroke-width:1.8}
.bottom-nav-more span{line-height:1}
#bottom-more-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:5099}
#bottom-more-overlay.open{display:block}
#bottom-more-panel{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;z-index:5100;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .2s ease;box-shadow:0 -8px 30px rgba(0,0,0,.15)}
#bottom-more-panel.open{transform:translateY(0)}
#bottom-more-panel a{display:flex;align-items:center;gap:12px;padding:13px 20px;color:var(--grey-700);text-decoration:none;font-size:15px}
#bottom-more-panel a.active{color:var(--color-accent);font-weight:600}
#bottom-more-panel a svg{width:20px;height:20px;stroke-width:1.8;flex-shrink:0}
.bottom-more-compte{padding:6px 20px 14px;margin-bottom:6px;border-bottom:1px solid var(--grey-100)}
.bottom-more-compte .lbl{font-size:10px;color:var(--grey-400);text-transform:uppercase;letter-spacing:.06em}
.bottom-more-compte .name{font-size:16px;font-weight:700;color:var(--color-primary);margin:2px 0 3px}
@media(min-width:768px){#bottom-more-overlay,#bottom-more-panel{display:none !important}}

/* ── DESKTOP ── */
@media(min-width:768px){
    .topbar-mobile{display:none}
    .bottom-nav{display:none}
    .sidebar{width:var(--sidebar-w);background:var(--color-primary);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
    .sidebar-brand{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
    .sidebar-brand img{height:44px;width:auto;margin-bottom:10px;border-radius:6px}
    /* Ajouté 09.07.2026 : deux logos distincts (paysage normal / carré
       mobile). Contraintes de taille EXPLICITES, pas héritées de la
       règle générique ci-dessus qui ne s'applique que dans ce bloc
       desktop — sans ça, le logo mobile n'aurait aucune limite de
       taille du tout en dehors de ce media query. */
    .logo-mobile-only{display:none}
    .sidebar-brand .assoc{font-size:10px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
    .sidebar-brand .appname{font-size:13px;color:#fff;font-weight:600}
    .sidebar-commune{padding:12px 20px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.08)}
    .sidebar-commune .lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
    .sidebar-commune .name{font-size:13px;color:#fff;font-weight:500}
    .sidebar-nav{flex:1;padding:6px 0}
    .sidebar-nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:rgba(255,255,255,.6);font-size:13px;transition:all .15s;text-decoration:none;border-left:3px solid transparent}
    .sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
    .sidebar-nav a.active{background:rgba(255,255,255,.1);color:#fff;font-weight:500;border-left-color:var(--color-accent)}
    .sidebar-nav a svg{width:17px;height:17px;flex-shrink:0;stroke-width:1.8;opacity:.75}
    .sidebar-nav a.active svg{opacity:1}
    .sidebar-footer{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08)}
    .sidebar-lang{display:flex;gap:6px;margin-bottom:12px}
    .sidebar-lang a{flex:1;text-align:center;padding:6px;border-radius:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);text-decoration:none;transition:all .15s}
    .sidebar-lang a.active{background:rgba(255,255,255,.18);color:#fff}
    .sidebar-lang a:hover{text-decoration:none}
    .sidebar-logout{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.4);font-size:12px;text-decoration:none;transition:color .15s}
    .sidebar-logout:hover{color:rgba(255,255,255,.7);text-decoration:none}
    .sidebar-logout svg{width:15px;height:15px}
    .main-desktop{margin-left:var(--sidebar-w);min-height:100vh;display:flex}
    .main-desktop > div:last-child{flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0}
    .page-wrap{flex:1}
    .main-topbar{background:var(--white);border-bottom:1px solid var(--grey-200);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:50}
    .main-topbar h1{font-size:19px;font-weight:700}
    .page-wrap{padding:24px 28px}

/* Largeur maximale d'une page à contenu empilé (10.07.2026). 1280px : au-delà,
   une ligne de texte dépasse les ~100 caractères, seuil au-delà duquel l'œil
   perd le début de la ligne suivante. Centré, avec les marges latérales
   d'origine. Ne s'applique qu'aux pages qui le demandent : carte.php doit
   rester en pleine largeur. */
.page-etroite{max-width:1280px;margin-left:auto;margin-right:auto;width:100%}
}

/* ── CARDS ── */
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--grey-200);box-shadow:var(--shadow-sm);overflow:hidden}
.card+.card{margin-top:12px}
.card-header{padding:13px 16px;border-bottom:1px solid var(--grey-100);display:flex;align-items:center;justify-content:space-between}
.card-header h2{font-size:13px;font-weight:600;color:var(--grey-700);display:flex;align-items:center;gap:7px}
.card-header h2 svg{width:15px;height:15px;opacity:.7}
.card-body{padding:16px}
/* Ajoutée 09.07.2026 : classe utilisée dans admin/settings.php depuis le
   début (logoHtml('logo-preview')) mais jamais définie ici — oubli pur et
   simple, pas un choix voulu. Sans contrainte, l'image s'affichait à sa
   taille native (souvent un fichier haute résolution), d'où un logo
   occupant tout l'écran dans l'aperçu au lieu d'un simple aperçu. */
.logo-preview{max-width:280px;max-height:120px;width:auto;height:auto;object-fit:contain}

/* ── GRILLES ── */
.grid-2{display:grid;grid-template-columns:1fr;gap:12px}
/* Ajouté 09.07.2026 : un enfant direct de grid a par défaut une largeur
   minimale égale à son contenu (min-width:auto), même si la colonne est
   déclarée en 1fr — exactement le même piège que min-width:auto sur un
   enfant flex. Résultat concret : une case avec du texte un peu long
   (ex: "4 HS · 4 à valider") forçait toute la grille à déborder du cadre,
   même en plein écran desktop, pas seulement en mobile. Règle générique
   plutôt que corrigée grille par grille, pour ne pas devoir chercher
   chaque cas un par un à travers le projet. */
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
.grid-4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:600px){.grid-2{grid-template-columns:1fr 1fr;gap:16px}.grid-4{grid-template-columns:repeat(4,1fr);gap:14px}}

/* ── STAT BOXES ── */
.stat-box{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px;min-width:0}
/* Ajouté 09.07.2026 : min-width:0 sur .stat-box elle-même ne suffisait
   pas — SES enfants directs (l'icône, et le div texte contenant
   label+valeur, parfois un bouton comme "Synchroniser maintenant") sont
   CHACUN leur propre enfant flex avec min-width:auto par défaut, non
   neutralisé automatiquement par le min-width:0 du parent. Un bouton
   avec du texte assez long dans ce div texte (white-space:nowrap sur
   .btn) suffisait à faire déborder toute la case, même en 1 colonne
   pleine largeur sur mobile. */
.stat-box > div:last-child{min-width:0}
.stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon svg{width:20px;height:20px;stroke-width:1.8}
.stat-label{font-size:11px;color:var(--grey-400);margin-bottom:2px;text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:22px;font-weight:700;line-height:1}
.stat-sub{font-size:12px;color:var(--grey-400);margin-top:2px;overflow-wrap:break-word}
.sb-blue  .stat-icon{background:var(--blue-bg);color:var(--blue)}   .sb-blue  .stat-value{color:var(--blue)}
.sb-green .stat-icon{background:var(--green-bg);color:var(--green)} .sb-green .stat-value{color:var(--green)}
.sb-red   .stat-icon{background:var(--red-bg);color:var(--red)}     .sb-red   .stat-value{color:var(--red)}
.sb-orange.stat-icon{background:var(--orange-bg);color:var(--orange)}.sb-orange.stat-value{color:var(--orange)}
.sb-orange .stat-icon{background:var(--orange-bg);color:var(--orange)}.sb-orange .stat-value{color:var(--orange)}
.sb-grey  .stat-icon{background:var(--grey-100);color:var(--grey-500)}.sb-grey .stat-value{color:var(--grey-700)}

/* ── BOUTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;border:none;transition:opacity .15s,transform .1s;text-decoration:none;font-family:inherit;line-height:1;white-space:nowrap}
.btn svg{width:15px;height:15px;stroke-width:2;flex-shrink:0}
.btn:hover{opacity:.88;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-primary  {background:var(--color-accent);color:#fff}
.btn-secondary{background:var(--color-primary);color:#fff}
.btn-success  {background:var(--green);color:#fff}
.btn-warning  {background:var(--orange);color:#fff}
.btn-danger   {background:var(--red);color:#fff}
.btn-ghost    {background:var(--white);color:var(--grey-700);border:1px solid var(--grey-200)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-xs{padding:4px 9px;font-size:11px}
.btn-lg{padding:14px 24px;font-size:16px}
.btn-full{width:100%}

/* ── FORMS ── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--grey-700);margin-bottom:6px}
.form-label .req{color:var(--red);margin-left:2px}
.form-hint{font-size:12px;color:var(--grey-400);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{width:100%;padding:11px 14px;border:1.5px solid var(--grey-200);border-radius:var(--radius-sm);font-size:15px;color:var(--grey-900);background:var(--white);transition:border-color .15s,box-shadow .15s;font-family:inherit;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(230,57,70,.12)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
textarea{min-height:90px;resize:vertical}

/* Toggle Oui/Non */
.yn-wrap{display:inline-flex;border:1.5px solid var(--grey-200);border-radius:8px;overflow:hidden}
.yn-wrap input{display:none}
.yn-wrap label{padding:10px 22px;font-size:14px;font-weight:500;cursor:pointer;color:var(--grey-400);transition:all .15s;margin:0;user-select:none;background:var(--grey-50)}
.yn-wrap input:checked+label.yn-oui{background:var(--green);color:#fff;border-color:var(--green)}
.yn-wrap input:checked+label.yn-non{background:var(--red);color:#fff}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:500}
/* Ajouté 09.07.2026 : white-space:nowrap forçait TOUT badge à rester sur
   une seule ligne, peu importe la longueur de son contenu. Inoffensif
   pour un badge de statut court ("Actif", "3"), mais catastrophique pour
   un badge de niveau/motif de restriction — ces libellés sont configurés
   librement par l'admin (Listes de choix), donc de longueur arbitraire.
   Un badge de ce type forçait tout son tableau, et potentiellement toute
   la page, à déborder horizontalement plutôt que de tronquer ou wrapper.
   Retirer nowrap ne change rien pour les badges déjà courts (ils tiennent
   naturellement sur une ligne), mais permet aux badges longs de wrapper
   proprement au lieu de déborder. Trouvé sur au moins 8 fichiers
   différents utilisant ce même pattern badge+niveau/motif — corrigé une
   fois pour toutes ici plutôt que fichier par fichier. */
.badge svg{width:11px;height:11px}
.badge-green {background:var(--green-bg);color:#065f46}
.badge-red   {background:var(--red-bg);color:#991b1b}
.badge-orange{background:var(--orange-bg);color:#92400e}
.badge-blue  {background:var(--blue-bg);color:#1d4ed8}
.badge-grey  {background:var(--grey-100);color:var(--grey-700)}

/* ── ALERTES SYSTÈME ── */
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.alert svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.alert-success{background:var(--green-bg);color:#065f46}
.alert-error  {background:var(--red-bg);color:#991b1b}
.alert-warning{background:var(--orange-bg);color:#92400e}
.alert-info   {background:var(--blue-bg);color:#1d4ed8}

/* ── TABLES ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--grey-50);padding:9px 14px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey-400);font-weight:600;border-bottom:1px solid var(--grey-200);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--grey-100);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--grey-50)}

/* ── THÉMATIQUES ── */
.theme-block{margin-bottom:16px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--grey-200)}
.theme-header{padding:12px 16px;color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.theme-header svg{width:16px;height:16px}
.theme-body{padding:16px;background:#fff}

/* ── CARTE ── */
.page-map{display:flex;flex-direction:column;padding:0 !important}
#map{height:420px;flex:1;min-height:420px}
@media(min-width:768px){.page-map{min-height:calc(100vh - var(--nav-h))}}
/* BUG CORRIGÉ (10.07.2026), signalé : sur mobile, la carte s'étendait
   jusqu'au tout bas de l'écran, recouvrant la barre de navigation fixe
   — un clic dessus était en réalité capté par la carte (Leaflet occupe
   toute sa zone pour les interactions tactiles), donnant l'impression
   que le menu du bas avait disparu, alors qu'il était juste caché
   derrière. Même cause que le bug déjà corrigé sur "Mon compte" (un
   padding:0 !important qui écrasait l'espace réservé), ici sur une
   règle différente jamais reliée à celle-là. */
@media(max-width:767px){.page-map{padding-bottom:var(--bottom-h) !important}}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 14px;background:#fff;font-size:13px;border-top:1px solid var(--grey-100)}
.leg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.map-legend-item{display:flex;align-items:center;gap:6px}

/* Carte + panneau latéral compact de validation (remplace l'ancien
   tableau pleine largeur sous la carte, qui devenait ingérable avec
   plusieurs dizaines d'hydrantes en attente). */
.map-with-panel{display:flex;flex-direction:column;flex:1;min-height:0}
#flags-section{background:#fff;border-top:1px solid var(--grey-100);max-height:220px;overflow-y:auto}
@media(min-width:768px){
    .map-with-panel{flex-direction:row}
    #map{height:auto}
    #flags-section{width:260px;flex-shrink:0;max-height:none;border-top:none;border-left:1px solid var(--grey-100);overflow-y:auto}
}
.flags-panel-header{position:sticky;top:0;background:var(--grey-50);padding:9px 12px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--grey-700);border-bottom:1px solid var(--grey-100);display:flex;align-items:center;gap:6px;z-index:1}
.flag-item{padding:9px 12px;border-bottom:1px solid var(--grey-100);font-size:13px;cursor:pointer;transition:background .1s}
.flag-item:hover{background:var(--grey-50)}
.flag-item-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px}
.flag-item-num{font-weight:600}
.flag-type-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600;white-space:nowrap}
.flag-type-ajout{background:#dbeafe;color:#1d4ed8}
.flag-type-modif{background:#fef3c7;color:#92400e}
.flag-type-hs{background:#fee2e2;color:#991b1b}
.flag-type-suppr{background:#ede9fe;color:#7c3aed}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:flex-end;justify-content:center}
.modal-overlay.open{display:flex}
@media(min-width:640px){.modal-overlay{align-items:center;padding:20px}}
.modal-box{background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:24px 20px;width:100%;max-width:500px;max-height:92vh;overflow-y:auto}
@media(min-width:640px){.modal-box{border-radius:var(--radius-lg)}}
.modal-handle{width:36px;height:4px;background:var(--grey-200);border-radius:2px;margin:0 auto 16px}
.modal-title{font-size:16px;font-weight:700;margin-bottom:18px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--grey-100)}

/* ── LOGIN ── */
.login-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-primary);padding:24px 16px}
.login-box{background:#fff;border-radius:var(--radius-lg);padding:24px 28px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3);position:relative}
.login-logo{text-align:center;margin-bottom:8px}
.login-logo img{height:48px;margin:0 auto;border-radius:8px}
.login-org{font-size:11px;color:var(--grey-400);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.login-title{font-size:18px;font-weight:700;color:var(--color-primary);margin-bottom:14px}
.login-lang-row{position:absolute;top:16px;right:16px;display:flex;gap:4px}
.login-lang-row a{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid var(--grey-200);color:var(--grey-500);text-decoration:none;transition:all .15s}
.login-lang-row a.active{border-color:var(--color-accent);color:var(--color-accent);background:rgba(230,57,70,.06)}
.login-lang-row a:hover{text-decoration:none}

/* ── CHECKLIST ── */
.check-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--grey-100);gap:12px}
.check-item:last-child{border-bottom:none}
.check-lbl{display:flex;align-items:center;gap:8px;font-size:14px}
.check-lbl svg{width:15px;height:15px;color:var(--grey-400)}
.check-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── POPUP CARTE ── */
.popup-inner{min-width:230px;font-family:'Inter',sans-serif}
.popup-title{font-size:14px;font-weight:700;margin-bottom:8px}
.popup-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--grey-100);font-size:13px}
.popup-row:last-of-type{border:none}
.popup-lbl{color:var(--grey-400)}
.popup-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pop-btn{padding:6px 11px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.pop-edit{background:var(--blue-bg);color:var(--blue)}
/* Ajouté 10.07.2026, demande explicite : le bouton "Proposer une
   modification" utilisait .pop-edit (bleu), incohérent avec l'orange
   utilisé PARTOUT ailleurs pour "à modifier" (légende, marqueurs,
   badges). .pop-edit reste bleu pour le vrai bouton "Modifier" (sur une
   création du distributeur lui-même, pas une proposition), qui n'a pas
   la même signification. */
.pop-propose-modif{background:#fef3c7;color:#92400e}
.pop-hs  {background:var(--red-bg);color:var(--red)}
.pop-ok  {background:var(--green-bg);color:var(--green)}

/* ── FLAG QGIS ── */
.flag-qgis{display:inline-flex;align-items:center;gap:4px;background:var(--orange-bg);color:#92400e;padding:3px 8px;border-radius:5px;font-size:12px;font-weight:500}

/* ── UTILITAIRES ── */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.justify-between{justify-content:space-between}.gap-1{gap:8px}.gap-2{gap:16px}
.text-sm{font-size:13px}.text-xs{font-size:12px}.text-muted{color:var(--grey-400)}
.text-center{text-align:center}.font-medium{font-weight:500}.font-bold{font-weight:700}
.w-full{width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── BOUTON AIDE ─────────────────────────────────────────────── */
.btn-aide {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: transform .15s, opacity .15s;
    font-family: 'Inter', serif;
    line-height: 1;
}
.btn-aide:hover { opacity: .88; transform: scale(1.08); }

/* Variante carrée bleue, réservée au bouton d'aide à côté de la
   connexion par empreinte — demande explicite du 10.07.2026 : le rond
   rouge standard jurait visuellement à côté du bouton bleu de
   connexion. Le bouton d'aide standard (.btn-aide, rond rouge) reste
   inchangé partout ailleurs dans l'application. */
.btn-aide-carre {
    width: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s;
    font-family: 'Inter', serif;
    line-height: 1;
}
.btn-aide-carre:hover { opacity: .85; }

/* ── TABLEAUX TRIABLES ───────────────────────────────────────── */
.sortable-wrapper { position: relative; }

.sortable-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-100);
}

.sortable-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 340px;
    background: var(--white);
    border: 1.5px solid var(--grey-200);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    transition: border-color .15s;
}
.sortable-search-inner:focus-within {
    border-color: var(--color-accent);
}
.sortable-search-inner svg { color: var(--grey-400); flex-shrink:0; }

.sortable-search-input {
    border: none !important;
    padding: 0 !important;
    font-size: 14px;
    width: 100%;
    background: transparent;
    outline: none !important;
    box-shadow: none !important;
}

.sortable-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey-400);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.sortable-clear:hover { color: var(--grey-700); }

.sortable-count {
    font-size: 12px;
    color: var(--grey-400);
    white-space: nowrap;
}

table[data-sortable] th {
    position: relative;
    transition: background .15s;
}
table[data-sortable] th:hover {
    background: var(--grey-100) !important;
}
table[data-sortable] .sort-arrow {
    display: inline-block;
    transition: opacity .15s;
}

/* Ligne invisible (filtre recherche) */
table[data-sortable] tbody tr[style*="display: none"] { display: none !important; }

/* ── MENU HAMBURGER MOBILE ────────────────────────────────────── */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1050;
}
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {
    /* CORRIGÉ 20.08.2026 : depuis l'ajout de adminBottomNav() (18.08.2026),
       ce bouton fait doublon en admin — la barre du bas donne déjà accès à
       tout (4 icônes + panneau « Plus »), exactement comme layoutHead()
       (commune/compagnie) qui n'a JAMAIS eu ce bouton sur mobile. On le
       masque désormais au lieu de display:flex — inutile de toucher les
       20 fichiers admin qui l'affichent encore via adminLayoutHead(),
       cette seule ligne suffit à le rendre inerte (le sidebar-overlay qu'il
       ouvrait ne peut plus jamais s'activer, donc pas de comportement à
       gérer non plus). */
    .hamburger-btn { display: none; }
    .sidebar {
        position: fixed !important;
        left: -280px;
        top: 0;
        height: 100vh;
        z-index: 1060;
        transition: left .25s ease;
        width: 260px !important;
        overflow-y: auto;
    }
    .sidebar.open { left: 0; }
    /* Ajouté 09.07.2026 : bascule vers le logo carré mobile s'il existe
       (logoResponsiveHtml() génère toujours les deux <img>, le CSS
       décide laquelle afficher selon la largeur d'écran réelle). Taille
       plafonnée explicitement à 40x40px — un logo carré n'a pas besoin
       d'être plus grand dans un menu mobile déjà étroit. */
    .logo-desktop-only{display:none}
    .logo-mobile-only{display:inline-block;height:40px;width:40px;max-width:40px;object-fit:contain;margin-bottom:10px;border-radius:6px}
    .main-desktop { flex-direction: column; }
    /* CORRIGÉ 20.08.2026 : ce padding-top:60px réservait la place du bouton
       hamburger (position:fixed, top:12px, 44px de haut). Maintenant qu'il
       est masqué (.hamburger-btn{display:none} ci-dessus), cet espace vide
       ne sert plus à rien — c'était justement le « espace toujours présent »
       signalé après la disparition du bouton. */
    .main-desktop > div:last-child { padding-top: 0; }
    .main-topbar {
        /* CORRIGÉ (16.07.2026) : le titre restait décalé de la gauche à cause
           d'un padding-left de 64px, réservé pour éviter le bouton menu.
           Ce padding est inutile : le bouton est en position:fixed et le
           conteneur parent applique déjà « padding-top:60px » (règle
           ci-dessus) qui pousse toute la topbar SOUS le bouton. Le titre peut
           donc démarrer au bord gauche. */
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }
    /* CORRIGÉ (16.07.2026) : le titre était coupé (nowrap + ellipsis). Il
       passe désormais à la ligne s'il est long, et reste collé à gauche. */
    .main-topbar h1 { font-size: 16px; flex: 1; min-width: 0; white-space: normal; line-height: 1.25; text-align: left; }
    .page-wrap { padding: 12px 16px calc(var(--bottom-h) + 16px); }
    .grid-2 { grid-template-columns: 1fr !important; }
    /* Demande explicite du 09.07.2026 : 2×2 plutôt qu'empilé en 1 colonne
       — les stat-box (Total/Hors service/À valider/etc.) restent lisibles
       à 2 par ligne sur mobile, sans avoir besoin de scroller autant
       verticalement qu'avec 4 lignes empilées. */
    .grid-4 { grid-template-columns: 1fr 1fr !important; }
    .grid-3 { grid-template-columns: 1fr !important; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Ajouté 09.07.2026 : tableaux à 5 colonnes ou plus (voir
       responsive-tables.js) transformés en liste de cartes empilées,
       plutôt qu'un tableau illisible en scroll horizontal. Chaque
       cellule affiche son étiquette de colonne via data-label. */
    table.table-responsive-cards thead { display: none; }
    table.table-responsive-cards, table.table-responsive-cards tbody, table.table-responsive-cards tr, table.table-responsive-cards td {
        display: block; width: 100%;
    }
    table.table-responsive-cards tr {
        background: #fff; border: 1px solid var(--grey-200); border-radius: 10px;
        margin-bottom: 10px; padding: 4px 0; box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    table.table-responsive-cards td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 10px; padding: 8px 14px; border: none; text-align: right;
        border-bottom: 1px solid var(--grey-100);
        /* Ajouté 09.07.2026 : au moins 10 fichiers différents mettent
           white-space:nowrap en style inline sur des <td> contenant
           plusieurs boutons d'action, pour les garder alignés proprement
           SUR UNE LIGNE en tableau desktop classique. Ce nowrap continue
           de s'appliquer même une fois basculé en mode carte empilée,
           empêchant les boutons de wrapper correctement — !important
           nécessaire pour annuler un style inline, qui a normalement une
           spécificité plus forte qu'une règle de classe. */
        white-space: normal !important;
        flex-wrap: wrap;
    }
    table.table-responsive-cards td:last-child { border-bottom: none; }
    table.table-responsive-cards td[data-label]::before {
        content: attr(data-label); font-weight: 600; font-size: 12px;
        color: var(--grey-500); text-align: left; flex-shrink: 0; margin-right: 10px;
    }
    /* Ajouté 09.07.2026 : cible le span injecté par responsive-tables.js
       autour du contenu réel de la cellule. flex:1 + min-width:0 permet
       au texte de rétrécir dans le conteneur flex (sans min-width:0, un
       enfant flex ne rétrécit jamais sous sa largeur naturelle, quel que
       soit flex-shrink) ; overflow-wrap:break-word permet la césure d'un
       mot trop long pour tenir même sur une ligne complète. */
    table.table-responsive-cards td .tcard-val {
        flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word;
    }
    /* Cellule vraiment vide : pas d'étiquette affichée, pour ne pas
       montrer "Téléphone : " sans valeur sur chaque ligne. */
    table.table-responsive-cards td:empty { display: none; }
    .btn-lg { padding: 14px 20px; font-size: 16px; }
    .card { border-radius: 8px; }
    .stat-box { padding: 14px; }
    .stat-value { font-size: 24px; }
    /* Login */
    .login-box { margin: 16px; padding: 24px 20px; }
    /* Formulaires mobile */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], select, textarea {
        font-size: 16px !important; /* Évite le zoom iOS */
        padding: 12px !important;
    }
    /* Bottom nav mobile */
    .bottom-nav { display: flex !important; }
    .main-desktop > .sidebar { display: none; }
    /* CORRIGÉ 20.08.2026 : page Infrastructure (et toute case stat-box
       contenant un bouton, ex. « Synchroniser maintenant ») débordait à
       droite sur mobile. Cause réelle : .btn a white-space:nowrap (global,
       volontaire — la plupart des boutons doivent rester sur une ligne).
       Le min-width:0 déjà en place sur .stat-box > div:last-child (voir
       plus haut, 09.07.2026) empêche bien la GRILLE de s'élargir, mais le
       TEXTE du bouton, lui, continue de refuser de passer à la ligne et
       déborde visuellement de sa case — exactement ce que montrait la
       capture d'écran. Seuls les boutons DANS une stat-box sont concernés :
       on n'enlève pas nowrap globalement, ça casserait des boutons ailleurs
       qui doivent rester compacts (ex. barres d'actions de tableau). */
    /* CORRECTIF INSUFFISANT LA FOIS PRÉCÉDENTE (20.08.2026, confirmé par
       test navigateur réel mobile 375px) : white-space:normal seul ne
       suffit pas — un enfant flex reste libre de choisir sa propre largeur
       de contenu tant qu'aucune limite explicite ne l'empêche, wrap ou pas.
       max-width:100% force le bouton à respecter la largeur de sa case, ce
       qui déclenche enfin le retour à la ligne du texte. */
    .stat-box .btn { white-space: normal; text-align: center; max-width: 100%; }
    /* CORRIGÉ 20.08.2026 : barre de filtres de la carte RR (admin/rr_carte.php)
       plus large que l'écran sur mobile. Cause : un <select> HTML n'a par
       défaut aucune limite de largeur — avec un nom de commune/compagnie
       long dans ses <option>, certains navigateurs mobiles dimensionnent le
       select fermé sur son option la plus longue, indépendamment de
       flex-wrap sur son conteneur (.rr-bar a déjà flex-wrap:wrap : le
       wrap fonctionne très bien SI chaque élément individuel tient dans la
       largeur de l'écran — le problème ne venait pas de l'absence de wrap,
       mais d'UN SEUL select plus large que l'écran entier). Règle globale
       plutôt que ciblée à rr_carte.php : le même piège existe partout où
       un select liste des communes/compagnies. */
    select { max-width: 100%; }
}

/* ── VALIDATION TÉLÉPHONE ─────────────────────────────────────── */
input[type="tel"].invalid { border-color: var(--red) !important; }
input[type="tel"].valid   { border-color: var(--green) !important; }
.tel-hint {
    font-size: 11px;
    color: var(--grey-400);
    margin-top: 3px;
    display: none;
}
input[type="tel"].invalid ~ .tel-hint { display: block; color: var(--red); }

/* ── COMPAGNIES 2 COLONNES ────────────────────────────────────── */
.compagnies-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .compagnies-grid { grid-template-columns: 1fr; }
}

.sb-purple { background: linear-gradient(135deg,#faf5ff,#e9d5ff); border-left-color: #7c3aed; }

/* ── FONTAINIERS COMPAGNIE ───────────────────────────────────── */

.font-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:20px;
}

.font-stat{
    background:var(--white);
    border:1px solid var(--grey-200);
    border-radius:16px;
    padding:18px;
    box-shadow:var(--shadow-sm);
}

.font-stat-value{
    font-size:30px;
    font-weight:700;
    line-height:1;
    color:var(--color-primary);
    margin-bottom:6px;
}

.font-stat-label{
    font-size:12px;
    color:var(--grey-400);
    text-transform:uppercase;
    letter-spacing:.05em;
}

.font-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(500px,1fr));
    gap:18px;
}

.font-card{
    background:var(--white);
    border:1px solid var(--grey-200);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:all .2s ease;
}

.font-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.font-head{
    background:linear-gradient(
        135deg,
        var(--color-primary),
        #34507a
    );
    color:#fff;
    padding:16px 20px;
    display:flex;
    align-items:center;
    gap:10px;
}

.font-head svg{
    width:18px;
    height:18px;
}

.font-head h3{
    margin:0;
    font-size:16px;
    font-weight:700;
}

.font-body{
    padding:18px;
}

.font-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.font-role{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--grey-400);
    font-weight:700;
    margin-bottom:10px;
}

.font-role svg{
    width:14px;
    height:14px;
}

.font-name{
    font-size:18px;
    font-weight:700;
    color:var(--grey-900);
    margin-bottom:12px;
}

.font-contact{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
    font-size:14px;
}

.font-contact svg{
    width:14px;
    height:14px;
    color:var(--grey-400);
    flex-shrink:0;
}

.font-contact a{
    color:var(--color-accent);
    font-weight:500;
}

.font-contact a:hover{
    text-decoration:none;
}

.font-empty{
    color:var(--grey-400);
    font-style:italic;
}

.font-person{
    padding:12px;
    border-radius:12px;
    background:var(--grey-50);
    border:1px solid var(--grey-100);
}

.font-principal{
    border-left:4px solid var(--blue);
}

.font-remplacant{
    border-left:4px solid var(--green);
}

/* Mobile */

@media (max-width:900px){

    .font-stats{
        grid-template-columns:1fr;
    }

    .font-grid{
        grid-template-columns:1fr;
    }

    .font-cols{
        grid-template-columns:1fr;
    }
}