/* ==================== VARIABLES ET BASE ==================== */
:root {
    --primary-color: #4da3ff;
    --primary-hover: #3391ff;
    --danger-color: #e05563;
    --danger-hover: #d63c4c;
    --warning-color: #e0a800;
    --warning-hover: #c99700;
    --success-color: #3cb371;
    --success-hover: #2d9d5f;
    --info-color: #17a2b8;
    --info-hover: #138496;
    --secondary-color: #a0aab4;
    --secondary-hover: #88929b;
    --light-color: #2a2d35;
    --dark-color: #e0e0e0;
    --border-color: #3a3d45;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    
    --bg-color: #1a1c22;
    --bg-card: #24262e;
    --bg-input: #2a2d35;
    --bg-hover: #30333c;
    --bg-zebra: rgba(77,163,255,0.06);
    --bg-warning: rgba(255,99,132,0.10);
    --bg-warning-even: rgba(255,99,132,0.18);
    --text-color: #d0d4dc;
    --text-muted: #88929b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    /* Désactivé : avec une sidebar + main-content en overflow interne,
       le scroll-behavior:smooth provoque une animation de restauration
       au chargement (la colonne "monte et descend"). */
    scroll-behavior: auto;
    /* IMPORTANT : empêcher tout scroll du document HTML.
       Le scroll doit se faire UNIQUEMENT dans .main-content.
       Sans cela, le navigateur restaure window.scrollY à la navigation
       (le document dépasse à cause du footer) => la sidebar fixed
       "monte et descend" à chaque clic. */
    overflow: hidden;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow: hidden;
    /* ⚠️⚠️ `clip` ET PAS SEULEMENT `hidden`.
       `overflow: hidden` interdit le défilement à l'utilisateur, mais laisse
       la boîte DÉFILABLE par le code : le navigateur peut y écrire un
       `scrollTop`. C'est exactement ce que fait un clic sur un lien d'ancre
       (`#contratsSection`) : il fait défiler TOUS les ancêtres défilables, y
       compris ceux en `overflow: hidden`. Le <body> se retrouvait décalé de
       137 px, la barre de navigation et le haut de la page sortaient de
       l'écran, et la barre de repères collante glissait sous la barre de
       navigation — d'où l'impression que « l'affichage se casse » dès qu'on
       utilise un lien interne.
       `clip` rend la boîte NON DÉFILABLE : plus aucun script ni saut d'ancre
       ne peut la décaler. `hidden` reste au-dessus pour les navigateurs qui
       ignorent `clip` (aucune régression, on retrouve l'ancien comportement). */
    overflow: clip;
    height: 100%;
    margin: 0;
}

/* ==================== NAVBAR 3D ==================== */
.navbar {
    background: linear-gradient(135deg, #1a2a4a 0%, #1a3a5f 30%, #1e4a6e 60%, #1a5276 100%);
    color: white;
    padding: 0.6rem 0;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.4),
        0 1px 3px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar-container {
    /*
      ⚠️ BARRE FLUIDE, PAS DE LARGEUR PLAFONNÉE

      `max-width: 1300px` + `margin: 0 auto` centrait le contenu : sur un
      écran de 1993 px, 346 px restaient vides de CHAQUE côté, et le bloc
      utilisateur s'arrêtait donc bien avant le bord droit de la page —
      alors qu'il était correctement aligné… sur un conteneur trop étroit.

      Pour que le bloc utilisateur touche le bord droit, il faut d'abord que
      la barre y aille. On la rend donc fluide, et ce sont les entrées de
      navigation qui cessent de s'étirer (voir plus bas) : sans cela, elles
      se répartiraient sur toute la largeur en laissant de grands trous.
    */
    max-width: none;
    padding: 0 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.navbar-brand .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
    color: #fff;
    flex-shrink: 0;
}

.navbar-brand h1 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

/* Lu par les lecteurs d'écran, invisible à l'œil.
   ⚠️ `position: absolute` LE SORT DU FLUX : sans cela, le texte masqué
   compterait dans la largeur du badge et déclencherait un défilement. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================== IDENTITÉ DE LA SOCIÉTÉ ====================
   ⚠️ POURQUOI CE BADGE EXISTE

   Le projet contient deux sociétés, chacune dans sa propre base
   (LJInformatic et FRAME), et RIEN ne les distinguait à l'écran : même titre
   d'onglet, même en-tête, même libellé écrit en dur dans 25 gabarits.

   La conséquence a été bien réelle : un mot de passe refusé par la mauvaise
   base fait croire à un mot de passe erroné. L'utilisateur cherche la cause au
   mauvais endroit, parce que l'écran ne dit pas quelle société est ouverte.

   ⚠️ LA COULEUR VIENT D'UNE VARIABLE CSS POSÉE PAR LE GABARIT.
   Elle n'est pas écrite dans la feuille : chaque société a la sienne, et
   l'imposer ici obligerait à modifier ce fichier pour chaque installation.

   ⚠️ SUR UNE INSTALLATION SANS REGISTRE, tout retombe sur le bleu historique
   (`--primary-color`) : l'apparence est donc IDENTIQUE à ce qu'elle était.
   ------------------------------------------------------------------ */
.navbar-brand .badge-societe {
    --societe-couleur: var(--primary-color);

    /* ⚠️ AUCUN CADRE, AUCUN FOND PLEIN — ET C'EST TOUT L'ENJEU.
       La version précédente dessinait une plaque translucide bordée. Malgré le
       soin apporté aux dégradés, elle continuait de se lire comme un BOUTON :
       un rectangle fermé dans une barre d'outils est un contrôle, quoi qu'on
       fasse de sa texture.

       Ici, la boîte disparaît. Il ne reste que le nom, posé à même la barre,
       et un rayon de lumière qui court sous lui. L'identité est portée par la
       typographie et la lueur — pas par un contenant. Rien à cliquer.

       `padding-bottom` réserve la gouttière du rayon : sans elle, le trait
       viendrait mordre la ligne de base du texte. */
    position: relative;
    display: inline-flex;
    align-items: baseline;
    margin-left: 0.8rem;
    padding: 0 0 0.45rem;
    max-width: 210px;
}

/* Rayon lumineux qui court sous le nom.
   ⚠️ LE DÉGRADÉ EST PLUS LARGE QUE LE BADGE (`background-size: 240%`) : c'est
   ce qui permet de le faire défiler sans jamais voir ses extrémités. Un
   dégradé à 100 % laisserait apparaître un bord net en fin de course. */
.navbar-brand .badge-societe::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background-image: linear-gradient(90deg,
                transparent 0%,
                color-mix(in srgb, var(--societe-couleur) 60%, transparent) 14%,
                var(--societe-couleur) 32%,
                #ffffff 50%,
                var(--societe-couleur) 68%,
                color-mix(in srgb, var(--societe-couleur) 60%, transparent) 86%,
                transparent 100%);
    background-size: 240% 100%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--societe-couleur) 70%, transparent);
    /* ⚠️ CADENCE LENTE ET RESPIRÉE (7 s), choisie « discrète ».
       Le rayon ne balaie pas en continu : il traverse, puis le filet reste
       éteint une bonne partie du cycle. Un défilement permanent attire l'œil
       toutes les quatre secondes sur un élément qui n'est PAS actionnable. */
    animation: societeRayon 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes societeRayon {
    0%   { background-position: 240% 50%; }
    45%  { background-position: -140% 50%; }
    100% { background-position: -140% 50%; }
}

.navbar-brand .badge-societe-nom {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.35px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Lueur très douce : elle détache le nom du dégradé bleu de la barre sans
       créer de halo visible. La respiration est calée sur la même période que
       le rayon pour que les deux effets semblent solidaires. */
    animation: societeLueur 7s ease-in-out infinite;
}

@keyframes societeLueur {
    0%, 100% {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
                     0 0 5px color-mix(in srgb, var(--societe-couleur) 20%, transparent);
    }
    50% {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
                     0 0 13px color-mix(in srgb, var(--societe-couleur) 55%, transparent);
    }
}

/* ⚠️ RESPECTER LE RÉGLAGE SYSTÈME « RÉDUIRE LES ANIMATIONS ».
   Une lumière qui respire en boucle peut déclencher un malaise chez les
   personnes sensibles au mouvement. On conserve alors l'apparence statique :
   le rayon reste visible, simplement figé au milieu de sa course. */
@media (prefers-reduced-motion: reduce) {
    .navbar-brand .badge-societe::after {
        animation: none;
        background-position: 50% 50%;
    }
    .navbar-brand .badge-societe-nom {
        animation: none;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
                     0 0 9px color-mix(in srgb, var(--societe-couleur) 40%, transparent);
    }
}

/* Survol : le rayon s'intensifie, sans que rien ne bouge ni ne se soulève.
   Un déplacement au survol trahirait à nouveau un contrôle cliquable. */
.navbar-brand .badge-societe:hover::after {
    box-shadow: 0 0 12px color-mix(in srgb, var(--societe-couleur) 95%, transparent);
}

.navbar-brand .badge-societe:hover .badge-societe-nom {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
                 0 0 16px color-mix(in srgb, var(--societe-couleur) 75%, transparent);
}

/* ==================== BANDEAU « SOCIÉTÉ DE TEST » ====================
   ⚠️ IL N'APPARAÎT QUE SI `production` VAUT EXPLICITEMENT `false`.
   Voir le commentaire du gabarit : `None` (registre illisible, cas de la
   production) n'affiche RIEN, pour ne pas crier à tort.

   ⚠️ IL EST REPLIÉ EN HAUTEUR (#9px) ET NON SUPPRIMÉ À L'IMPRESSION.
   Un bandeau orange consommé à chaque impression serait absurde ; mais le
   masquer complètement ferait disparaître l'avertissement d'un document
   destiné à circuler — précisément là où confondre les deux sociétés aurait
   les conséquences les plus graves.
   ------------------------------------------------------------------ */
.bandeau-essai {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.25rem;
    background: linear-gradient(90deg,
                rgba(255, 159, 64, 0.22) 0%,
                rgba(255, 159, 64, 0.10) 60%,
                rgba(255, 159, 64, 0.16) 100%);
    border-bottom: 1px solid rgba(255, 159, 64, 0.45);
    color: #ffcf9a;
    font-size: 0.78rem;
    letter-spacing: 0.2px;
}

.bandeau-essai-point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9f40;
    box-shadow: 0 0 6px rgba(255, 159, 64, 0.8);
    flex-shrink: 0;
}

.bandeau-essai-note {
    color: rgba(255, 207, 154, 0.75);
    font-size: 0.72rem;
}

@media print {
    .bandeau-essai { padding: 1px 0; font-size: 0; }
    .bandeau-essai-point { width: 100%; height: 3px; border-radius: 0; }
}


.navbar-menu {
    display: flex;
    list-style: none;
    gap: 0.15rem;
    align-items: center;
    /*
      ⚠️ `margin-left: auto` ET `flex: 0 1 auto` VONT ENSEMBLE.

      Le menu portait `flex: 1` : il s'ÉTIRAIT pour occuper tout l'espace
      laissé par le logo. Il n'y avait donc aucune place libre à absorber, et
      `margin-left: auto` restait sans effet — le groupe (Accueil, Clients,
      Recherche, Milow) demeurait collé à gauche, séparé du bloc utilisateur
      par un grand vide.

      En lui donnant sa largeur NATURELLE (`flex: 0 1 auto`), l'espace libre
      réapparaît, et c'est `margin-left: auto` qui le récupère : le groupe est
      repoussé contre le bord droit, juste avant le bloc utilisateur.

      ⚠️ `flex-shrink: 1` reste volontaire — sur un écran étroit, le menu peut
      se comprimer et défiler horizontalement (voir la règle média de 768 px)
      au lieu de déborder de la page.
    */
    margin: 0 0 0 auto;
    padding: 0;
    flex: 0 1 auto;
    min-width: 0;
}

/*
  Les entrées gardent leur TAILLE NATURELLE.

  ⚠️ Elles s'étiraient auparavant à parts égales (`flex: 1 1 0`) pour occuper
  la largeur d'un conteneur plafonné à 1300 px. La barre étant désormais
  fluide, ce même étirement répartirait quatre liens sur 1993 px : chacun
  ferait ~360 px de large, et les libellés se retrouveraient séparés par de
  grands vides. On rend donc à chaque entrée sa largeur, et l'espace libre se
  concentre là où il est utile — avant le bloc utilisateur.
*/
.navbar-menu > li:not(.nav-user):not(.nav-sep) {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

/* Le bloc utilisateur ne s'étire pas (reste compact à droite) */
.navbar-menu > li.nav-user,
.navbar-menu > li.nav-sep {
    flex: 0 0 auto;
}

/* Les liens de navigation occupent toute la largeur de leur li, centrés */
.navbar-menu > li:not(.nav-user):not(.nav-sep) > .nav-link {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/*
  Séparateurs verticaux de la barre.

  Deux usages, et il ne faut pas les confondre :
    - `.nav-sep` seul sépare deux entrées voisines (recherche / Milow) ;
    - `.nav-sep-fin` précède le bloc utilisateur et le POUSSE au bord droit.

  ⚠️ Pourquoi une classe distincte : `margin-left: auto` appliqué à TOUS les
  séparateurs écarterait aussi celui de gauche, et « Milow » se retrouverait
  collé à la recherche. Seul le dernier doit absorber l'espace libre.
*/
.navbar-menu .nav-sep {
    width: 1px;
    height: 26px;
    background: rgba(255,255,255,0.15);
    margin: 0 0.45rem;
    flex-shrink: 0;
}

.navbar-menu .nav-sep-fin {
    /* Absorbe tout l'espace libre : repousse le bloc utilisateur à droite. */
    margin-left: auto;
}

/* ========== Nav-Link ========== */
.nav-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 0.42rem 0.4rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.15px;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
    white-space: nowrap;
    height: 32px;
    box-sizing: border-box;
    /* Pas de transform au hover : évite de décaler la ligne du ruban */
}

.nav-link:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
}

.nav-link:active {
    background: rgba(255,255,255,0.08);
    transition: background 0.05s ease;
}

/* ========== Bouton principal (Nouveau Client) ========== */
.nav-link.btn-primary {
    background: linear-gradient(180deg, #ff6b6b 0%, #e05563 100%);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 
        0 2px 8px rgba(224,85,99,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.nav-link.btn-primary:hover {
    background: linear-gradient(180deg, #ff7b7b 0%, #f06070 100%);
    border-color: rgba(255,255,255,0.3);
    box-shadow: 
        0 3px 10px rgba(224,85,99,0.5),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.nav-link.btn-primary:active {
    box-shadow: 
        0 1px 4px rgba(224,85,99,0.3),
        inset 0 2px 4px rgba(0,0,0,0.25);
}

/* ========== Nav-User ========== */
.nav-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.2rem;
    flex-shrink: 0;
}
.nav-user-info {
    color: rgba(255,255,255,0.9);
    font-size: 0.83rem;
    padding: 0 0.7rem;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    height: 32px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ========== Paramètres (engrenage) ========== */
.nav-settings {
    font-size: 1.25rem;
    padding: 0.35rem 0.55rem !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-settings:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.25) !important;
    transform: translateY(-2px) rotate(45deg);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========== Notifications (cloche) ========== */
.nav-notifications {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.nav-bell:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}

/*
  ⚠️⚠️ PRODUIT & VERSIONS PORTE UNE LETTRE, PAS UN PICTOGRAMME.

  L'assistance a reçu une bouée (c'est un recours : on la lance quand on
  coule) ; la fiche produit, elle, garde un « ? ». Les deux se distinguent donc
  d'un coup d'œil, alors que deux pictogrammes de plus se seraient fondus dans
  la série déjà présente dans la barre.

  ⚠️ LA GRAISSE ET LA TAILLE SONT POSÉES ICI, PAS DANS LE GABARIT.
  Un `font-weight` en style en ligne aurait été écrasé au premier changement
  de thème. La mesure vient de `.nav-bell` : 38 px de côté, donc une lettre de
  1rem reste petite au centre du cercle.
*/
.nav-bell-glyphe {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
}

/*
  ⚠️ L'ÉTAT ACTIF DOIT SE VOIR SANS ÊTRE UN BOUTON DIFFÉRENT.
  Une bordure plus franche et un fond à peine plus dense suffisent : c'est la
  même forme, simplement allumée. Un aplat de couleur en aurait fait un appel
  à l'action permanent, sur un écran où l'on travaille.
*/
.nav-bell-actif,
.nav-bell-actif:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.38);
}

.nav-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e05563;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    z-index: 300;
    overflow: hidden;
    animation: notifIn 0.16s ease-out;
}

@keyframes notifIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-panel-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
}

.notif-panel-titre {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

/* ⚠️ LES DEUX ACTIONS SONT GROUPÉES ET PEUVENT PASSER À LA LIGNE.
   Le panneau fait 360 px : « Supprimer les anciennes » et « Tout marquer lu »
   côte à côte y tiennent à peine, et la seconde sortait du cadre dès que la
   police du système était un peu plus large. */
.notif-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notif-tout-lire,
.notif-supprimer {
    background: none;
    border: none;
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
}

.notif-tout-lire {
    color: var(--primary-color);
}

.notif-tout-lire:hover {
    text-decoration: underline;
}

/* La suppression est une action destructrice : couleur d'alerte au survol,
   jamais dans le même ton que « Tout marquer lu ». */
.notif-supprimer {
    color: var(--text-muted);
}

.notif-supprimer:hover {
    color: var(--danger-color);
    text-decoration: underline;
}

/* ========== Boîte à outils (menu de la barre du haut) ========== */
/*
   ⚠️ MÊME GABARIT QUE LE PANNEAU DE NOTIFICATIONS, MAIS DES CLASSES DISTINCTES.
   Réutiliser `.notif-panel` aurait lié l'apparence des outils à celle des
   alertes : une retouche sur l'une se serait répercutée sur l'autre, sans que
   rien ne le signale.
*/
.outils-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    z-index: 300;
    overflow: hidden;
    padding: 0.3rem;
    animation: notifIn 0.16s ease-out;
}

.outils-panel-entete {
    padding: 0.5rem 0.6rem 0.4rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
}

.outils-panel-titre {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.outils-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: none;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.outils-item:hover,
.outils-item:focus-visible {
    background: rgba(77, 163, 255, 0.14);
    color: var(--primary-color);
    outline: none;
}

.outils-item-icone {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.outils-item:hover .outils-item-icone,
.outils-item:focus-visible .outils-item-icone {
    color: var(--primary-color);
}

.outils-item-libelle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-liste {
    max-height: 340px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    cursor: default;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item.non-lue {
    background: rgba(77,163,255,0.08);
}

.notif-item:hover {
    background: var(--bg-hover);
}

.notif-item-puce {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    flex-shrink: 0;
    margin-top: 0.4rem;
}

.notif-item.non-lue .notif-item-puce {
    box-shadow: 0 0 0 3px rgba(77,163,255,0.25);
}

.notif-item-corps {
    flex: 1;
    min-width: 0;
}

.notif-item-titre {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.15rem 0;
}

.notif-item-message {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.notif-item-date {
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    opacity: 0.7;
}

/* Lien « Ouvrir » d'une notification : mène à l'écran qui traite l'alerte. */
.notif-item-lien {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.notif-item-lien:hover {
    text-decoration: underline;
}

.notif-item-action {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.68rem;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    align-self: flex-start;
    flex-shrink: 0;
}

.notif-item-action:hover {
    color: var(--success-color);
    border-color: var(--success-color);
}

.notif-vide {
    padding: 1.2rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ==================== SIDEBAR ==================== */

.app-layout {
    display: flex;
    min-height: calc(100vh - 60px);
    overflow: hidden;
    /* ⚠️ Même raison que pour le <body> : `hidden` reste défilable par le
       code, et un saut d'ancre décalait tout le bloc application. `clip`
       supprime le défilement, y compris programmatique. */
    overflow: clip;
}

.main-content {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 250px;
    height: calc(100vh - 60px);
    background: var(--bg-color);
    /* Pas d'animation de restauration de scroll à la navigation */
    scroll-behavior: auto;
    overflow-anchor: none;
}

.sidebar {
    width: 250px;
    min-width: 250px;
    background: linear-gradient(180deg, #1a2a4a 0%, #1a3258 100%);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    z-index: 50;
}

.sidebar-header {
    padding: 1.25rem 1.25rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sidebar-logo {
    font-size: 1.4rem;
    display: inline-block;
    /* Animation retirée : la rotation continue (8s) créait une impression
       d'instabilité visuelle de la sidebar. On garde un simple hover. */
    transition: transform 0.3s ease;
}

.sidebar-logo:hover {
    transform: rotate(90deg);
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Empêcher le navigateur de restaurer/mémoriser la position de scroll
       entre les navigations : évite que la sidebar "monte et descende". */
    overflow-anchor: none;
    scroll-behavior: auto;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.25rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border-left: 3px solid transparent;
    margin: 0 0.5rem;
    border-radius: 0 8px 8px 0;
    flex-shrink: 0;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-left-color: rgba(255,255,255,0.3);
}

.sidebar-link.active {
    background: rgba(77,163,255,0.2);
    color: #fff;
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.sidebar-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-label {
    white-space: nowrap;
}

/*
  ⚠️ PASTILLE DE LA BARRE LATÉRALE, POUR UN COMPTEUR D'ACTIONS EN ATTENTE.

  Elle est poussée à droite par `margin-left: auto` : le libellé garde sa
  position, quel que soit le nombre affiché. Sans cela, la pastille collerait
  au texte et les deux entrées du menu ne s'aligneraient plus l'une sous
  l'autre.
*/
.sidebar-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #b42318;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/*
  ⚠️ « PARAMÈTRES » COLLÉ AU BAS DU MENU.

  La colonne est en `flex` ; `margin-top: auto` absorbe tout l'espace libre
  au-dessus de l'entrée et la fait descendre. Un simple `margin-top` en pixels
  laisserait un vide variable selon la hauteur de la fenêtre.

  Il reste utilisé même quand le contenu déborde : dans ce cas il n'y a plus
  d'espace libre à absorber, la règle est sans effet — c'est le comportement
  voulu, sinon l'entrée chevaucherait les précédentes.
*/
.sidebar-link-bas {
    margin-top: auto;
    /* Trait de séparation : sans lui, l'entrée semble appartenir au dernier groupe. */
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
    padding-top: 0.75rem;
}

/* L'indicateur d'état actif reste sur la gauche, on ne le déplace pas. */
.sidebar-link-bas.active {
    border-left-color: var(--primary-color);
}

.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 0.3rem 1rem;
    flex-shrink: 0;
}

/* ========== SIDEBAR GROUPES (accordéon) ========== */
.sidebar-group {
    flex-shrink: 0;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 1rem);
    margin: 0.4rem 0.5rem 0;
    padding: 0.45rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.58);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-group-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.sidebar-group-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-group-chevron {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.sidebar-group.open .sidebar-group-chevron {
    transform: rotate(90deg);
}

.sidebar-group-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.sidebar-group.open .sidebar-group-body {
    grid-template-rows: 1fr;
}

.sidebar-group-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Liens imbriqués : légère indentation sous le label du groupe. */
.sidebar-group .sidebar-link {
    padding-left: 1.6rem;
}

.sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    /* ⚠️ SUR UNE SEULE LIGNE, LE NOM POUSSANT LE BOUTON À DROITE.
       `space-between` et non `gap` : sans cela, un nom long collerait le bouton
       au bord, et le texte se retrouverait tronqué au milieu d'un mot. */
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sidebar-user {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    /* ⚠️ `min-width: 0` + `ellipsis` : sans eux, un nom très long élargirait
       la colonne ou pousserait le bouton hors de la sidebar. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠️ LA DÉCONNEXION EST UNE ICÔNE + UN TEXTE, PAS UNE PHRASE.
   Elle est alignée sur le nom, dans le même bloc, pour qu'on lise « qui est
   connecté » et « comment sortir » d'un seul regard. */
.sidebar-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.78rem;
    padding: 0.25rem 0.45rem;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

.sidebar-logout:hover {
    color: #ff8a8a;
    background: rgba(255,80,80,0.14);
}

.sidebar-logout svg { flex-shrink: 0; }

/* ========== MAIN CONTENT ========== */

.main-content .page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.main-content .page-header h2 {
    font-size: 2rem;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.main-content .page-header p {
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* ========== SIDEBAR RESPONSIVE ========== */
@media (max-width: 768px) {
    .sidebar {
        width: 60px;
        min-width: 60px;
    }
    .main-content {
        margin-left: 60px;
    }
    footer.footer {
        margin-left: 60px;
    }
    .sidebar-title,
    .sidebar-label,
    .sidebar-user,
    .sidebar-logout-texte,
    .sidebar-divider {
        display: none;
    }
    .sidebar-link {
        justify-content: center;
        padding: 0.7rem;
        margin: 0 0.3rem;
        border-radius: 8px;
        border-left: none;
    }
    .sidebar-icon {
        font-size: 1.3rem;
    }
    .sidebar-header {
        justify-content: center;
        padding: 1rem 0.5rem 0.5rem;
    }
    .sidebar-footer {
        align-items: center;
        /* ⚠️ EN 60 px DE LARGE, LE NOM EST MASQUÉ MAIS LA DÉCONNEXION RESTE :
           c'est la seule sortie de l'application, elle ne doit pas disparaître
           avec la place disponible. */
        justify-content: center;
        padding: 0.6rem 0.3rem;
    }
    .sidebar-footer .sidebar-icon {
        display: block;
    }
}

/* ==================== CONTAINER ET LAYOUT (legacy) ==================== */
.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
    min-height: 60vh;
}

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.page-header h2 {
    font-size: 2rem;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.page-header .subtitle {
    color: var(--secondary-color);
    font-size: 1rem;
}

.page-header p {
    color: var(--secondary-color);
    margin-top: 0.5rem;
}

.page-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.page-header-top h2 {
    margin-bottom: 0.3rem;
}

.page-header-top p {
    margin-top: 0.2rem;
}

/* ==================== ALERTES ==================== */
.alert {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-error {
    background-color: rgba(220,53,69,0.2);
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-warning {
    background-color: var(--bg-card)3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

.alert-close:hover {
    opacity: 1;
}

/* Bandeau d'alerte illustré (Stock & Achats, Produits).
   Ces règles vivaient dans un <style> de produits.html : la page Stock
   affichait donc le même balisage SANS aucun style — pas de padding, pas de
   marge basse — et les boutons se retrouvaient collés au panneau suivant. */
.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255,99,132,0.18), rgba(224,85,99,0.10));
    border: 1px solid rgba(255,99,132,0.35);
    border-left: 4px solid var(--danger-color);
    border-radius: 12px;
    animation: alertPulse 2s ease-in-out infinite;
}

/* La pulsation porte sur box-shadow, PAS sur border-color : animer
   border-color écrasait le liseré rouge de gauche et le faisait clignoter. */
@keyframes alertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224,85,99,0); }
    50% { box-shadow: 0 0 0 3px rgba(224,85,99,0.14); }
}

.alert-banner-icon {
    width: 42px;
    height: 42px;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #e05563, #d63c4c);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(224,85,99,0.3);
}

.alert-banner-content {
    flex: 1;
    min-width: 0;
}

.alert-banner-content strong {
    display: block;
    margin-bottom: 0.5rem;
    /* ⚠️ PAS DE ROUGE CLAIR ICI. Sur le fond rose du bandeau en mode clair
       (le mode par défaut), #ff6b7a ne donnait qu'un contraste de 2,2:1 —
       illisible. --text-color suit le thème : 12:1 en clair, 8,8:1 en sombre.
       L'identité « alerte » est portée par la bordure et l'icône, pas par
       un texte qu'on ne lit pas. */
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 700;
}

.alert-banner-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,99,132,0.25);
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--text-color);
}

.alert-chip em {
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: rgba(255,99,132,0.2);
    /* Même raison que le titre : le rouge clair ne se lit pas sur fond clair. */
    color: var(--text-color);
    font-style: normal;
    font-weight: 700;
}

/* Les boutons du bandeau : une ligne à part, nettement séparée des chips. */
.alert-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.alert-banner-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ==================== BOUTONS ==================== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.16s ease, box-shadow 0.16s ease,
                background-color 0.16s ease, border-color 0.16s ease,
                color 0.16s ease, background-position 0.35s ease;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
}

/* Variantes de couleur : dégradé animé + reflet, pour homogénéiser
   l'ensemble des boutons d'action de l'application. */
.btn-primary {
    background-image: linear-gradient(135deg, #4da3ff 0%, #2196F3 50%, #7c4dff 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 3px 12px rgba(77, 163, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    animation: btnGlobalGradient 4s ease infinite;
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(77, 163, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-secondary {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-color);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(77, 163, 255, 0.06);
}

.btn-danger {
    background-image: linear-gradient(135deg, #ff7a85 0%, #e05563 50%, #d63c4c 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 3px 12px rgba(224, 85, 99, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    animation: btnGlobalGradient 4s ease infinite;
}

.btn-danger:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(224, 85, 99, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-warning {
    background-image: linear-gradient(135deg, #ffc94d 0%, #e0a800 50%, #f59e0b 100%);
    background-size: 200% 200%;
    color: #1a1a1a;
    box-shadow: 0 3px 12px rgba(224, 168, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    animation: btnGlobalGradient 4s ease infinite;
}

.btn-warning:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(224, 168, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-info {
    background-image: linear-gradient(135deg, #22c1dc 0%, #17a2b8 50%, #0ea5e9 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 3px 12px rgba(23, 162, 184, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    animation: btnGlobalGradient 4s ease infinite;
}

.btn-info:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(23, 162, 184, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-success {
    background-image: linear-gradient(135deg, #34d399 0%, #10b981 50%, #0ea5e9 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    animation: btnGlobalGradient 4s ease infinite;
}

.btn-success:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Reflet qui balaie les boutons à dégradé. */
.btn-primary::after,
.btn-danger::after,
.btn-warning::after,
.btn-info::after,
.btn-success::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    animation: btnGlobalShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btnGlobalGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes btnGlobalShine {
    0% { left: -120%; }
    55%, 100% { left: 140%; }
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-active {
    background-color: var(--primary-color);
    color: white;
}

/* ========== INFO-BULLES (data-tooltip) ========== */
.tooltip {
    position: fixed;
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    padding: 0.38rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.14);
    animation: tooltipIn 0.12s ease-out;
}

@keyframes tooltipIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== FORMULAIRES ==================== */
.search-section {
    margin-bottom: 2rem;
}

.search-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 250px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.client-form {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.form-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

.form-section {
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 6px;
    background-color: var(--light-color);
}

.form-section h3 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: flex;
    gap: 1.5rem;
}

.form-row .form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-color);
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-control:invalid {
    border-color: var(--danger-color);
}

.form-hint {
    display: block;
    margin-top: 0.3rem;
    color: var(--secondary-color);
    font-size: 0.875rem;
}

/* Choix d'un modèle d'URL de recherche dans la fiche fournisseur. */
.recherche-modele {
    margin-top: 0.6rem;
}

.recherche-modele label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.recherche-modele select {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-input);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
}

.form-info {
    background-color: #e7f3ff;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* ==================== GRILLE DE CLIENTS ==================== */
.clients-sticky-header {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: var(--bg-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0;
}

.clients-sticky-header .page-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.clients-sticky-header .search-section {
    margin-bottom: 1rem;
}

.clients-scroll-area {
    overflow-y: visible;
}

/* ========== TOGGLE VUE TUILES / TABLEAU ========== */
.view-toggle {
    display: inline-flex;
    gap: 0;
    margin-left: auto;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.view-toggle-btn {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.82rem !important;
    border: none !important;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.view-toggle-btn.active {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.view-toggle-btn:first-child {
    border-right: 1px solid var(--border-color) !important;
}

/* ========== TABLEAU CLIENTS ========== */
.clients-table-container {
    margin-bottom: 2rem;
}

.table-responsive {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.clients-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    font-size: 0.9rem;
}

.clients-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.clients-table th {
    background: linear-gradient(135deg, #1a2a4a 0%, #1a3a5f 100%);
    color: white;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.clients-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.clients-table tbody tr:hover {
    background: var(--primary-color-hover, rgba(77, 163, 255, 0.12));
}

.clients-table tbody tr:last-child td {
    border-bottom: none;
}

.clients-table td a {
    color: var(--primary-color);
    text-decoration: none;
}

.clients-table td a:hover {
    text-decoration: underline;
}

.table-actions {
    white-space: nowrap;
    display: flex;
    gap: 0.35rem;
}

.table-actions .btn {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.8rem !important;
}

/* ========== DOCUMENTS TABLE ========== */
.client-detail-layout {
    display: grid;
    /* ⚠️⚠️ `minmax(0, 1fr)` ET NON `1fr`, SINON LA COLONNE GAUCHE EST ÉCRASÉE.
        `1fr` vaut `minmax(auto, 1fr)` : la piste ne descend pas sous la largeur
        MINIMALE de son contenu. La colonne de droite contient des champs de
        formulaire dont la largeur intrinsèque est grande ; elle refusait donc de
        rétrécir et prenait 712 px, ne laissant que 182 px à la fiche client sur
        un écran de 1100 px — les informations s'affichaient dans une bande
        étroite à gauche d'un formulaire énorme.
        `minmax(0, 1fr)` autorise les deux colonnes à se partager la largeur
        également, quel que soit le contenu. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.client-detail-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.client-detail-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.client-detail-left .actions-section {
    margin-top: 0.5rem;
}

.documents-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

#clientDocumentsActions {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.client-documents-pagination {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.client-documents-pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.client-documents-pagination button,
.client-documents-pagination select {
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-color);
}

.client-documents-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.client-documents-pagination label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 1100px) {
    /* ⚠️ 1100 px ET NON 900 px.
       Entre 900 et 1100 px, la fiche restait sur deux colonnes de 324 à 374 px :
       les champs de formulaire de la colonne de droite tombaient à trente
       caractères de large et la colonne de gauche n'affichait plus qu'un
       libellé par ligne. Une seule colonne de 713 px est plus lisible qu'un
       partage qui ne laisse de la place à personne. */
    .client-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.client-documents-section {
    margin-top: 1.5rem;
}

.client-documents-section h3 {
    color: var(--dark-color);
    margin-bottom: 0.75rem;
}

/* ===== Tuile « Interactions » de la fiche client =====
   ⚠️ Les couleurs de type et de statut reprennent les variables existantes
   plutôt que des valeurs en dur : la tuile doit s'adapter au thème clair comme
   au thème sombre, et une couleur figée deviendrait illisible dans l'un des
   deux. C'est le défaut déjà rencontré sur l'onglet actif de la
   super-administration, dont le contraste était tombé à 2,63. */

.inter-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    font-size: 0.8rem;
}

.inter-table thead th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.inter-table tbody td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    vertical-align: middle;
}

/* ⚠️ LA LIGNE EST CLIQUABLE : elle doit le MONTRER.
   Sans retour visuel au survol, personne ne devine qu'elle s'ouvre. */
.inter-table tbody tr.inter-ligne {
    cursor: pointer;
    transition: background 0.15s;
}

.inter-table tbody tr.inter-ligne:hover {
    background: rgba(77, 163, 255, 0.07);
}

/* ⚠️ Le focus clavier doit être AUSSI visible que le survol : la ligne est
   atteignable par Tab, et un utilisateur au clavier doit voir où il est. */
.inter-table tbody tr.inter-ligne:focus {
    outline: 2px solid var(--info-color);
    outline-offset: -2px;
}

/* ⚠️ La bordure gauche identifie le TYPE d'un coup d'œil : c'est le repère
   le plus rapide quand le tableau mêle emails et interventions. */
.inter-table tbody tr.inter-type-mail { border-left: 3px solid #4da3ff; }
.inter-table tbody tr.inter-type-intervention { border-left: 3px solid #ff9f40; }
.inter-table tbody tr.inter-type-autre { border-left: 3px solid var(--text-muted); }

/* ⚠️ Ligne ouverte : teinte légère, pour que le détail soit visiblement
   rattaché à SA ligne et pas à la précédente. */
.inter-table tbody tr.inter-ouverte {
    background: rgba(77, 163, 255, 0.1);
}

.inter-col-type { white-space: nowrap; }
.inter-col-objet { word-break: break-word; }
.inter-col-objet a { color: var(--info-color); text-decoration: none; }
.inter-col-objet a:hover { text-decoration: underline; }
.inter-col-date { white-space: nowrap; color: var(--text-muted); }
.inter-col-acteur { white-space: nowrap; }
.inter-col-statut { white-space: nowrap; }
.inter-col-chevron { width: 1.5rem; text-align: center; }

.inter-icone { flex-shrink: 0; }

.inter-type {
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ⚠️ Le chevron tourne : c'est le seul indicateur d'état VISIBLE en permanence. */
.inter-chevron {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: transform 0.15s;
}

.inter-numero {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: italic;
}

.inter-statut {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    border: 1px solid transparent;
}

.inter-statut-envoye,
.inter-statut-realisee {
    background: rgba(60, 179, 113, 0.15);
    color: #3cb371;
    border-color: rgba(60, 179, 113, 0.45);
}

.inter-statut-echec,
.inter-statut-annulee {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.45);
}

.inter-statut-planifiee,
.inter-statut-en-cours {
    background: rgba(255, 159, 64, 0.15);
    color: #ff9f40;
    border-color: rgba(255, 159, 64, 0.45);
}

.inter-statut-inconnu {
    background: var(--bg-input);
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* ===== Panneau de détail (ligne dépliée) ===== */
.inter-detail-ligne td {
    background: var(--bg-input);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.inter-detail-contenu { font-size: 0.76rem; }

.inter-detail-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.4rem 1rem;
    margin-bottom: 0.5rem;
}

.inter-detail-item { display: flex; gap: 0.4rem; }

.inter-detail-cle {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.inter-detail-valeur {
    color: var(--text-color);
    word-break: break-word;
}

.inter-detail-secteur { margin-top: 0.5rem; }

.inter-detail-secteur .inter-detail-cle {
    display: block;
    margin-bottom: 0.2rem;
}

/* ⚠️ `pre-wrap` CONSERVE LES RETOURS À LA LIGNE du message d'origine.
   Un email mis en page par paragraphes s'afficherait sinon en un seul bloc,
   et le texte perdrait sa structure — celle que le client a lue. */
.inter-description,
.inter-corps {
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.5rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    line-height: 1.5;
}

.inter-corps { font-family: inherit; }

.inter-note {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: #ff9f40;
}

.documents-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    font-size: 0.9rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.documents-table th {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a5276 100%);
    color: white;
    padding: 0.65rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
}

.documents-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.documents-table tbody tr:hover {
    background: var(--bg-hover);
}

.documents-table tbody tr:last-child td {
    border-bottom: none;
}

.documents-table a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.documents-table a:hover {
    text-decoration: underline;
}

/* ========== DOCUMENT TYPE BADGES ========== */
.doc-type-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.doc-type-facture {
    background: var(--bg-card)3cd;
    color: #856404;
}

.doc-type-devis {
    background: #d1ecf1;
    color: #0c5460;
}

.doc-type-devis_detail {
    background: rgba(60,179,113,0.18);
    color: var(--success-color);
}

.doc-type-nc {
    background: rgba(220,53,69,0.2);
    color: #721c24;
}

.doc-type-nb {
    background: #d4edda;
    color: #155724;
}

.doc-type-rappel {
    background: #e8daef;
    color: #6c3483;
}

/* ========== STATUS BADGES ========== */
.badge-status {
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-brouillon {
    background: #e2e3e5;
    color: #383d41;
}

.status-envoyé, .status-envoye {
    background: #d1ecf1;
    color: #0c5460;
}

.status-payé, .status-paye {
    background: #d4edda;
    color: #155724;
}

.status-a-payer {
    background: #fff3cd;
    color: #856404;
}

.status-retard {
    background: #f8d7da;
    color: #842029;
}

.status-annulé, .status-annule {
    background: rgba(220,53,69,0.2);
    color: #721c24;
}

.status-archive {
    background: #e2e3e5;
    color: #495057;
    border: 1px solid #adb5bd;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.client-card {
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.client-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.client-card-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a5276 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-card-header h3 {
    font-size: 1.2rem;
    margin: 0;
}

.badge {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.client-card-body {
    padding: 1.5rem;
    flex: 1;
}

.client-card-body p {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.client-card-body a {
    color: var(--primary-color);
    text-decoration: none;
}

.client-card-body a:hover {
    text-decoration: underline;
}

.date-small {
    color: var(--secondary-color);
    font-size: 0.85rem;
}

/* Mini carte dans les tuiles clients */
.mini-map-container {
    margin: 0.75rem 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.mini-map {
    width: 100%;
    height: 140px;
    border-radius: 6px;
}

.geo-placeholder {
    margin: 0.75rem 0;
    text-align: center;
}

.btn-geocode {
    background: var(--info-color);
    color: white;
    border: none;
    font-size: 0.85rem;
}

.btn-geocode:hover {
    background: var(--info-hover);
}

.btn-geocode:disabled {
    opacity: 0.6;    cursor: wait;
}

/* ==================== DIAGNOSTIC DE LOCALISATION ==================== */
/* Panneau affiché sous le bouton « Localiser » : explique pourquoi la
   localisation échoue et propose une correction de l'adresse. */

.geo-resultat {
    margin: 0.75rem 0;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: left;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
}
.geo-resultat.geo-ok { border-color: var(--success-color); }
.geo-resultat.geo-approche { border-color: var(--warning-color); }
.geo-resultat.geo-echec { border-color: var(--danger-color); }

.geo-titre { font-weight: 700; margin-bottom: 0.35rem; }
.geo-ok .geo-titre { color: var(--success-color); }
.geo-approche .geo-titre { color: var(--warning-color); }
.geo-echec .geo-titre { color: var(--danger-color); }

.geo-detail { color: var(--text-muted); font-size: 0.75rem; }
.geo-detail b { color: var(--text-color); }

/* Problèmes détectés dans l'adresse */
.geo-problemes { margin: 0.5rem 0 0 0; padding: 0; list-style: none; }
.geo-problemes li {
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.3rem;
    border-radius: 6px;
    background: var(--bg-color);
    border-left: 3px solid var(--warning-color);
}
.geo-problemes li.geo-bloquant { border-left-color: var(--danger-color); }
.geo-prob-message { display: block; }
.geo-prob-conseil {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Correction d'adresse proposée */
.geo-correction {
    margin-top: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: 6px;
    background: var(--bg-color);
    border: 1px dashed var(--primary-color);
}
.geo-corr-ligne { font-size: 0.76rem; margin-bottom: 0.25rem; }
.geo-corr-avant { color: var(--text-muted); text-decoration: line-through; }
.geo-corr-apres { color: var(--success-color); font-weight: 600; }
.geo-corr-actions {
    display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap;
}

/* Détail des tentatives (repliable) */
.geo-etapes { margin-top: 0.5rem; font-size: 0.72rem; }
.geo-etapes summary { cursor: pointer; color: var(--text-muted); outline: none; }
.geo-etapes ul { margin: 0.35rem 0 0 1rem; padding: 0; }
.geo-etapes li { margin-bottom: 0.15rem; color: var(--text-muted); }
.geo-etape-ok { color: var(--success-color); }

.distance-badge {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
    color: #2e7d32;
    display: inline-block;
}

.client-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.5rem 1.5rem;
}

.client-card-actions .btn {
    flex: 1;
    margin: 0;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
}

/* ==================== DÉTAILS DU CLIENT ==================== */
.client-detail-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .client-detail-container {
        grid-template-columns: 1fr;
    }
}

.client-detail-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.detail-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: var(--secondary-color);
    min-width: 120px;
}

.detail-value {
    color: var(--text-color);
    word-break: break-word;
    flex: 1;
    text-align: right;
}

.detail-value a {
    color: var(--primary-color);
    text-decoration: none;
}

.detail-value a:hover {
    text-decoration: underline;
}

.notes-text {
    background-color: var(--light-color);
    padding: 1rem;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.client-detail-map {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.client-detail-map h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.map-coordinates {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--secondary-color);
}

/* ==================== CARTES LEAFLET : EMPILEMENT ====================
   ⚠️⚠️ SANS CETTE RÈGLE, LA CARTE PASSE PAR-DESSUS TOUTE LA PAGE.

   Leaflet pose ses calques internes en `position: absolute` avec des
   `z-index` élevés (tuiles 200, marqueurs 600, info-bulles 700). Or
   `.leaflet-container` n'a que `position: relative` et `z-index: auto` :
   il n'ouvre AUCUN contexte d'empilement. Ces calques remontent donc
   jusqu'à la racine du document, où leurs `z-index` se comparent à ceux
   de la page entière — ils passent devant la barre de navigation (200) et
   devant les blocs collants (30), quel que soit l'endroit où la carte se
   trouve réellement.
   C'est le défaut constaté sur la fiche client : dès qu'on fait défiler
   la carte sous la barre de repères, l'info-bulle de la carte recouvre la
   barre, et l'on croit à une superposition d'écrans.
   `isolation: isolate` crée le contexte d'empilement manquant. Les calques
   restent empilés de la même façon les uns par rapport aux autres ; ils ne
   peuvent simplement plus sortir de la carte.
   ================================================================== */
.leaflet-container {
    isolation: isolate;
}

/* ==================== ACTIONS ==================== */
.actions-section {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* ==================== PAGINATION ==================== */
.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2rem;
    padding: 1rem;
}

.pagination .btn {
    margin: 0;
}

/* Repère « Page 2 / 209 ».
   En vue tableau, la barre de pagination est le seul élément qui indique où
   l'on se trouve dans l'ensemble des clients : la grille de tuiles, elle, se
   termine par cette même barre juste sous les cartes. */
.pagination-info {
    width: 100%;
    text-align: center;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--secondary-color);
    opacity: 0.85;
}

/* Cellule sans valeur (téléphone ou adresse absente).
   Afficher un tiret discret évite le « None » que produit Jinja sur une
   valeur nulle, et qui ressemble à un défaut du logiciel. */
.cell-vide {
    color: var(--secondary-color);
    opacity: 0.5;
}

/* ==================== BOUTON « FACTURER » ==================== */
/* Une facture n'est ni une validation ni une impression : la couleur or la
   distingue immédiatement des boutons voisins (vert/bleu), pour éviter une
   mauvaise manipulation sur une action comptable. */
.btn-facturer {
    background: linear-gradient(135deg, #c9a227, #a8801b);
    color: #fff;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(201, 162, 39, 0.35);
}

.btn-facturer:hover {
    background: linear-gradient(135deg, #d8b23a, #b88d20);
    box-shadow: 0 3px 10px rgba(201, 162, 39, 0.5);
}

/* ==================== ÉTAT VIDE ==================== */
.empty-state {
    background: var(--bg-card);
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--secondary-color);
}

.empty-state p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.empty-state a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.empty-state a:hover {
    text-decoration: underline;
}

/* ==================== FOOTER ==================== */
.footer {
    background-color: #1a1c22;
    color: var(--text-color);
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
    margin-left: 250px;
    border-top: 1px solid var(--border-color);
}

.footer p {
    margin: 0;
}

/* ==================== CHATBOT PANEL ==================== */
.chatbot-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: 550px;
    background: var(--bg-card);
    border: 2px solid var(--primary-color);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chatbot-header {
    background: linear-gradient(135deg, #1a2a4a, #1a3a5f);
    color: #fff;
    padding: 0.7rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.chatbot-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.3rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.chatbot-close:hover { opacity: 1; }

.chatbot-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 200px;
    max-height: 380px;
}

.chatbot-message {
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 90%;
    word-wrap: break-word;
}

.chatbot-message.assistant {
    background: var(--bg-input);
    color: var(--text-color);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}

.chatbot-message.user {
    background: var(--primary-color);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}

.chatbot-message a {
    color: var(--primary-color);
    text-decoration: underline;
}

.chatbot-message code {
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.chatbot-input-row {
    display: flex;
    border-top: 1px solid var(--border-color);
    padding: 0.5rem;
    gap: 0.4rem;
}

.chatbot-input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-color);
    font-size: 0.85rem;
    outline: none;
}
.chatbot-input:focus { border-color: var(--primary-color); }

.chatbot-send {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    transition: background 0.2s;
}
.chatbot-send:hover { background: var(--primary-hover); }

/* ==================== RESPONSIVE ==================== */
/*
  ⚠️ ENTRE 1100 ET 769 px : ON MASQUE LE LIBELLÉ « DÉCONNEXION ».

  Mesuré : à 900 px de large, le bloc utilisateur débordait de 76 px HORS de
  l'écran (`ecartDroit: -76`). La cause n'était pourtant pas sa largeur — 300 px,
  constante — mais celle des entrées voisines, qui ne se comprimaient pas assez.

  Le libellé « Déconnexion » occupe à lui seul environ 90 px. L'icône 🔓 le
  remplace sans ambiguïté, et c'est le seul texte qu'on puisse retirer sans
  perdre d'information : les entrées de navigation gardent leur intitulé.

  On ne masque PAS « Admin » (le nom de l'utilisateur connecté) : sur un poste
  partagé, savoir sous quel compte on travaille n'est pas un détail. Le réglage
  existant de 768 px s'en charge sur mobile, où la place manque vraiment.

  ⚠️ ON NE TOUCHE PAS À `.nav-sep-fin` ICI. Une première version de cette règle
  redéfinissait sa marge, ce qui écrasait `margin-left: auto` — l'unique
  propriété qui repousse le bloc utilisateur au bord droit. Résultat mesuré :
  à 1000 px, `ecartDroit` passait de 20 px à 309 px, et le timer revenait au
  milieu de la barre. C'est exactement ce qu'il fallait corriger.

  ⚠️ IL N'Y A PLUS DE RÈGLE 1100 px POUR LA DÉCONNEXION : le bouton a quitté
  la barre du haut pour le pied de la colonne. Son libellé est masqué à 768 px,
  là où la barre latérale tombe à 60 px — voir le bloc `@media` correspondant.
*/

/* ⚠️ LE NOM RÉTRÉCIT AVANT DE DISPARAÎTRE.
   Le nom est désormais le SEUL contenu du badge : le faire disparaître sous
   768 px supprimerait toute l'information. On réduit donc sa largeur
   maximale par paliers, et le rayon lumineux se raccourcit avec lui. */
@media (max-width: 1100px) {
    .navbar-brand .badge-societe { max-width: 150px; margin-left: 0.55rem; }
    .navbar-brand .badge-societe-nom { font-size: 0.92rem; }
}

@media (max-width: 768px) {
    .navbar-brand .badge-societe { max-width: 110px; margin-left: 0.4rem; }
    .navbar-brand .badge-societe-nom { font-size: 0.8rem; letter-spacing: 0.1px; }

    .navbar-container {
        /* Rester sur une ligne : navigation scrollable horizontalement */
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }

    .navbar-menu {
        gap: 0.15rem;
        width: auto;
        justify-content: flex-start;
        overflow-x: auto;
        max-width: 100%;
        margin-left: auto;
    }

    /* Sur mobile, alléger les libellés : on garde les icônes */
    .navbar-menu .nav-link svg { margin-right: 0 !important; }
    .navbar-menu li .nav-link-text { display: none; }
    .nav-user-info { font-size: 0.75rem; padding: 0 0.5rem; }
    .nav-user-info .nav-link-text { display: none; }

    .page-header h2 {
        font-size: 1.5rem;
    }

    .container {
        padding: 0 1rem;
    }

    .search-form {
        flex-direction: column;
    }

    .search-input {
        min-width: auto;
    }

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

    .form-row {
        flex-direction: column;
        gap: 1rem;
    }

    .form-row .form-group {
        flex: none;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .actions-section {
        flex-direction: column;
    }

    .actions-section .btn {
        width: 100%;
    }

    .client-card-actions {
        flex-direction: column;
    }

    .client-card-actions .btn {
        width: 100%;
    }
}

/* ==================== MA SOCIÉTÉ ==================== */
.societe-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.societe-container .detail-section {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.societe-container .data-table th {
    background: #1e3a5f;
    color: white;
}
.detail-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    min-width: 180px;
    color: var(--secondary-color);
}

.detail-value {
    flex: 1;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.data-table th {
    background: var(--primary-color);
    color: white;
    padding: 0.6rem 1rem;
    text-align: left;
    font-size: 0.9rem;
}

/* ==================== PRINT MODAL ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.modal-box h3 { margin: 0 0 0.8rem 0; font-size: 1rem; }
.modal-box .checkbox-label {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 1rem 0; cursor: pointer; user-select: none;
    font-size: 0.9rem;
}
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.2rem; }

/* ==================== PRINT STYLES ==================== */
@media print {
    body { background: var(--bg-card) !important; color: #000 !important; overflow: visible !important; }
    .navbar, .sidebar, .footer, .chatbot-panel, .soc-actions,
    .btn, .form-actions, button, .modal-overlay, .page-header-top .btn,
    .print-hide { display: none !important; }
    
    .app-layout { display: block !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
    
    .soc-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; break-inside: avoid; }
    .soc-card h3 { color: #1a2a4a !important; }
    .soc-row .lbl { color: #555 !important; }
    .soc-row .val { color: #000 !important; }
    .soc-grid { grid-template-columns: 1fr 1fr !important; }
    
    .data-table th { background: #1a2a4a !important; color: #fff !important; }
    .data-table td { border-bottom: 1px solid var(--border-color) !important; }
    
    /* Cacher la carte si l'option est désactivée */
    .no-print-map .soc-map, .no-print-map #societeMap, .no-print-map .soc-coord { display: none !important; }
}

.data-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.data-table tr:nth-child(even) td {
    background: var(--bg-input);
}

.text-muted {
    color: var(--secondary-color);
    font-style: italic;
}

.entrepot-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.entrepot-card h4 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
    color: var(--text-color);
}

.bank-account-row,
.entrepot-edit-row {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.societe-map-container {
    margin-top: 1rem;
}

.map-coordinates {
    font-size: 0.85rem;
    color: var(--secondary-color);
    margin-top: 0.5rem;
    text-align: center;
}

/* Inputs compacts dans les tableaux */
.data-table .form-control-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
}

.data-table .form-control-sm:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

.data-table .btn-small {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

/* ==================== PRINT ==================== */
@media print {
    body.no-print-map .societe-map-container,
    body.no-print-map .map-coordinates,
    body.no-print-map #map {
    .navbar, .footer, .search-section, .form-actions, .actions-section, 
    .modal-overlay, .btn, .sidebar, nav {
        display: none !important;
    }

    body {
        background: var(--bg-card);
        font-size: 12pt;
    }

    .container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }
    
    .societe-container .detail-section {
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid var(--border-color);
        padding: 0.8rem;
        margin-bottom: 0.5rem;
    }
    
    .page-header {
        border-bottom: 2px solid #000;
        margin-bottom: 1rem;
    }
    
    .page-header h2 { font-size: 18pt; }
    
    .detail-label { min-width: 130px; }
    
    .data-table th {
        background: #ddd !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Masquer la carte si l'option est décochée */
    .no-print-map .societe-map-container,
    .no-print-map #societeMap,
    .no-print-map .map-coordinates {
        display: none !important;
    }
}

/* ==================== MODAL D'IMPRESSION ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2rem;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: modalSlideIn 0.3s ease;
}

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

.modal-box h3 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.checkbox-label {
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}