/* =====================================================================
   LAYOUT.CSS — Optinova CRM
   L'ossature de navigation de l'app : écran de connexion, header,
   menu latéral (mobile + sidebar desktop), footer, titres de page,
   grilles de statistiques.
   Dépend de variables.css, base.css et composants.css.

   Deux modes responsive :
   - Mobile (par défaut) : header fixe + menu plein écran en glissement
   - Desktop (min-width: 900px) : vraie sidebar fixe, repliable en mode icônes
   ===================================================================== */

/* =====================================================================
   SPLASH DE DÉMARRAGE
   Plein écran, peint dès le 1er rendu (statique dans le <body> de
   index.html). Couvre la fenêtre « fetch de auth.html + restauration de
   session + chargement compagnie/modules ». Retiré par masquerSplash()
   (index.html) : instantané si le démarrage a pris < 150 ms, sinon gardé
   au moins jusqu'à ~550 ms pour éviter le clignotement.
   ===================================================================== */
#app-splash{
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  background: var(--bg);
  transition: opacity .25s ease, visibility .25s ease;
}
#app-splash.parti{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.app-splash-logo{ width: 120px; height: auto; }
.app-splash-titre{
  font-family: 'Space Grotesk';
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text);
}
.app-splash-spinner{
  width: 26px;
  height: 26px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-circle);
  animation: appSplashSpin .7s linear infinite;
}
@keyframes appSplashSpin{ to { transform: rotate(360deg); } }

/* Loader de navigation entre écrans — même visuel que le splash, plus
   petit. Affiché par allerVers() (index.html) seulement si le fetch du
   fragment dépasse ~130 ms ; sinon la navigation reste instantanée. */
#nav-loader{
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
#nav-loader.actif{ display: flex; }
.nav-loader-logo{ width: 78px; height: auto; opacity: .9; }

/* =====================================================================
   ÉCRAN DE CONNEXION
   Note : plusieurs valeurs ici sont volontairement hors de l'échelle
   standard (border-radius 18px, padding 28px 22px) — l'écran de
   connexion a toujours été un peu plus généreux que le reste de l'app,
   décision déjà prise le 5 sept.
   ===================================================================== */
.login-screen{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
  gap: 24px;
}
.brandmark{ width: 72px; height: 72px; object-fit: contain; }
.login-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;              /* cas unique, plus généreux que --radius */
  padding: 28px 22px;                /* cas unique */
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.login-box h2{
  font-size: var(--font-xl);         /* 20px — fusionné depuis 19px */
  font-weight: 600;
  margin-bottom: var(--space-1);
  font-family: 'Space Grotesk';
}
.login-box p{
  font-size: var(--font-base);
  color: var(--text-muted);
  margin-bottom: var(--space-7);
}
/* Uniformisé 2026-09-17 avec .field (styles/composants.css) — même
   espacement partout dans l'app, plus d'exception pour l'écran de connexion. */
.login-field{ text-align: left; margin-bottom: var(--space-4); }
.login-field label{
  display: block;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.login-box input,
.login-box select{
  width: 100%;
  padding: var(--space-5) var(--space-6);   /* 12px 14px */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  background: var(--surface-2);
  color: var(--text);
}
.login-box input:focus,
.login-box select:focus{ outline: none; border-color: var(--accent); }
/* Même flèche personnalisée que .field select (styles/composants.css) —
   sans ça le select garde l'apparence par défaut du navigateur, étroite
   et pas alignée avec les autres champs du formulaire. */
.login-box select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: var(--icon-chevron-select);
  background-repeat: no-repeat;
  background-position: right var(--space-5) center;
  background-size: 14px;
}

/* Code de vérification 2FA — une case par chiffre plutôt qu'un seul champ
   texte, avance automatique + collage du code complet géré en JS (login
   dans modules/auth.html, désactivation dans modules/parametres.html).
   Spécificité (.otp-boites .otp-boite, deux classes) volontairement plus
   haute que .login-box input / .field input pour gagner peu importe où
   ces cases sont utilisées, sans dépendre de l'ordre dans le fichier. */
.otp-boites{ display: flex; gap: var(--space-3); margin: var(--space-3) 0; }
.otp-boites .otp-boite{
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: var(--space-4) 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Version plus petite — popups d'activation/désactivation 2FA dans
   modules/parametres.html (le login garde la taille normale ci-dessus). */
.otp-boites.otp-petit{ gap: var(--space-2); }
.otp-boites.otp-petit .otp-boite{ padding: var(--space-2) 0; font-size: 17px; }

.password-wrap{ position: relative; }
.password-wrap input{ padding-right: 42px !important; } /* cas unique — espace pour l'icône œil */
.password-toggle{
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: var(--space-3);
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.password-toggle:hover{ color: var(--text); }
.password-toggle svg{ width: 18px; height: 18px; }
.login-err{
  color: var(--danger);
  font-size: var(--font-base);
  margin-top: var(--space-4);
  min-height: 20px;
}
.login-err.ok{ color: var(--accent); }
.login-foot{ font-size: var(--font-sm); color: var(--text-muted); }
.login-foot a{ color: inherit; text-decoration: underline; }
.login-foot a:hover{ color: var(--text); }
.login-box.centre{ text-align: center; }

/* Case « Rester connecté sur cet appareil » sous le mot de passe */
.login-rester{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  cursor: pointer;
  text-align: left;
}
.login-rester input{ width: auto; }

/* Inscription : assistant en 3 étapes — ligne du temps 1—2—3 */
.su-etapes{ display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-7); margin-bottom: var(--space-6); }
.su-pastille{
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.su-pastille.fait{ border-color: var(--accent); color: var(--accent); cursor: pointer; }
.su-pastille.fait:hover{ background: var(--accent-tint); }
.su-pastille.actif{ background: var(--accent); border-color: var(--accent); color: var(--bg); }
.su-trait{ flex: 1; height: 1px; background: var(--border); transition: background .2s ease; }
.su-trait.fait{ background: var(--accent); }
.su-etape-titre{
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
  margin-bottom: var(--space-4);
}

/* Inscription : 2 champs côte à côte, sélecteur de couleur, case conditions */
.login-row2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.login-couleur{ height: 40px; padding: var(--space-1); cursor: pointer; }
.login-conditions{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--font-sm);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
.login-conditions input{ width: auto; margin-top: 2px; flex-shrink: 0; }
.login-conditions a{ color: var(--accent); text-decoration: underline; }
/* Mention légale sous « Créer un compte » — fine print discrète (vibe Supabase :
   petite, gris atténué, liens soulignés dans la même couleur que le texte). */
.login-legal{
  margin-top: var(--space-6);
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.55;
  opacity: .85;
}
.login-legal a{ color: inherit; text-decoration: underline; }
.login-legal a:hover{ color: var(--text); }

/* Liens texte sous les boutons d'auth (« Retour », « Créer un compte »,
   « Se connecter ») + « Mot de passe oublié? » sur la ligne du label.
   Style sobre façon Supabase : blanc cassé, non gras, souligné. */
.login-lien-rangee{ margin-top: var(--space-6); font-size: var(--font-sm); color: var(--text-muted); }
.login-lien{
  color: var(--text);
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}
.login-lien:hover{ color: var(--accent); }
.login-field-tete{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}
.login-field-tete label{ margin-bottom: 0; }
.login-field-tete .login-lien{ font-size: var(--font-sm); text-transform: none; letter-spacing: normal; }

/* Pastille verte de succès (écran « Compte confirmé ») */
.auth-badge-ok{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--success-tint);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-7);
}
.auth-badge-ok svg{ width: 26px; height: 26px; }

/* =====================================================================
   ÉCRAN DE MAINTENANCE (plein écran) + compte à rebours de sauvegarde
   Les deux conteneurs démarrent masqués ici ; shared/maintenance.js bascule
   leur .style.display à l'affichage — ne pas toucher à cette mécanique.
   ===================================================================== */
#maintenanceScreen{ display: none; }
#maintenanceCompteARebourOverlay{ display: none; }
#maintenanceCompteARebourOverlay .popup-box{ text-align: center; }
.mcar-statut{ font-size: var(--font-md); color: var(--text-muted); margin-bottom: 20px; }  /* 20px, cas unique */
.mcar-compteur{ font-size: 44px; font-weight: 700; color: var(--accent); }                 /* cas unique — gros chiffre de compte à rebours */
.mcar-sub{ font-size: var(--font-base); color: var(--text-muted); margin-top: var(--space-3); }

/* =====================================================================
   HEADER (barre du haut, fixe)
   ===================================================================== */
.app-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;                      /* constante structurelle */
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  z-index: 1100;
}
#mainApp{ display: none; padding-top: 76px; }   /* display : JS bascule à "block" une fois connecté (index.html) */

/* Compte en attente de paiement (modules/dashboard.html) : le menu latéral
   n'a de toute façon aucun item (tous les modules sont désactivés), donc on
   le masque au complet plutôt que de laisser une colonne vide — y compris
   sur ordinateur où #menuOverlay est normalement forcé visible plus bas. */
#mainApp.compte-en-attente #menuOverlay{ display: none !important; }
#mainApp.compte-en-attente{ margin-left: 0 !important; max-width: 100%; }
/* Spécificité supérieure à #mainApp.menu-collapsed (plus bas, sidebar
   repliée) au cas où cette préférence était déjà enregistrée. */
#mainApp.menu-collapsed.compte-en-attente{ margin-left: 0 !important; }
/* Plus rien à replier/ouvrir tant que le menu est masqué — et Centre
   d'aide fermé pour ne pas se faire écrire par des comptes qui ne
   paient pas encore. */
#mainApp.compte-en-attente .btn-sidebar-toggle,
#mainApp.compte-en-attente .btn-menu,
#mainApp.compte-en-attente #accountDropdownAide,
#mainApp.compte-en-attente #accountDropdownParametres{ display: none !important; }

.header-actions{ display: flex; align-items: center; gap: var(--space-3); }
.app-brand{ display: flex; align-items: center; gap: 7px; overflow: hidden; }
.app-brand-logo{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.app-brand-name{
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-size: var(--font-base);
  white-space: nowrap;
  color: var(--text);
}
.co-name{ font-family: 'Space Grotesk'; font-weight: 600; font-size: var(--font-base); }
@media (max-width: 400px){
  .app-brand-name{ display: none; }
}

/* ---------- Bouton menu (hamburger, mobile) ---------- */
.btn-menu{
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-menu:hover{ color: var(--accent); }
.hamburger-bar{
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;                /* trop petit pour l'échelle, cas unique */
  position: relative;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.hamburger-bar + .hamburger-bar{ margin-top: var(--space-1); }
.btn-menu.is-open .hamburger-bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.btn-menu.is-open .hamburger-bar:nth-child(2){ opacity: 0; }
.btn-menu.is-open .hamburger-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Bouton hamburger dédié à l'ordinateur — replie/déplie la sidebar en mode icônes seules */
.btn-sidebar-toggle{
  display: none;                     /* activé en desktop, voir media query plus bas */
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-sidebar-toggle:hover{ color: var(--accent); }
.btn-sidebar-toggle svg{ width: 24px; height: 24px; shape-rendering: geometricPrecision; }

/* ---------- Cloche de notifications ---------- */
.notif-bell{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;                      /* cas unique, plus petit que l'échelle */
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.notif-bell:hover{ color: var(--accent); }
.notif-bell svg{ width: 20px; height: 20px; }
.notif-section-label{
  padding: var(--space-4) 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.notif-item{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.notif-item:last-child{ border-bottom: none; }
.notif-item-corps{ flex: 1; min-width: 0; }
.notif-item-titre{ font-size: var(--font-base); color: var(--text); }
.notif-item-sub{ font-size: var(--font-sm); color: var(--text-muted); margin-top: 2px; }
.notif-dot{ width: 7px; height: 7px; border-radius: var(--radius-circle); flex-shrink: 0; }
.notif-dot.danger{ background: var(--danger); }
.notif-dot.safety{ background: var(--safety); }
.notif-dot.accent{ background: var(--accent); }
.notif-dot.success{ background: var(--success); }
.notif-empty{ padding: var(--space-7) 0; font-size: var(--font-base); color: var(--text-muted); text-align: center; }

/* Bouton « marquer comme lu » d'une ligne (suivis en retard / employés en
   attente — les seuls types qui restent affichés après avoir été vus, voir
   shared/notifications.js). Séparé du clic sur la ligne (qui navigue). */
.notif-item-dismiss{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.notif-item-dismiss:hover{ background: var(--surface); color: var(--text); }
.notif-item--vue{ opacity: .55; }

/* En-tête du panneau — titre + « tout marquer comme lu ». */
.notif-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.notif-panel-head span{ font-size: var(--font-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.notif-tout-lu{
  background: none;
  border: none;
  padding: 0;
  font-size: var(--font-sm);
  color: var(--accent);
  cursor: pointer;
}
.notif-tout-lu:hover{ text-decoration: underline; }

/* ---------- Avatar de compte + menu déroulant ---------- */
.account-menu-wrap{ position: relative; }
.btn-compte{
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  border-radius: var(--radius-circle);
}
.avatar-initiales{
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--bg);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-size: var(--font-sm);
  transition: border-color .15s ease;
}
/* Même animation que l'ancien CRM : pas de halo, juste un contour qui
   apparaît au survol. */
.btn-compte:hover .avatar-initiales{ border-color: var(--accent-dim); }
.account-dropdown{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  width: 220px;
  overflow: hidden;
  z-index: 1100;
  display: none;
}
.account-dropdown.open{ display: block; }
.account-dropdown-head{ padding: var(--space-6); }
.account-dropdown-name{
  font-family: 'Space Grotesk';
  font-weight: 700;
  font-size: var(--font-base);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-dropdown-co{
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-dropdown-item{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  font-size: var(--font-base);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.account-dropdown-item:hover{ background: var(--surface); }
.account-dropdown-item svg{ width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.account-dropdown-item.danger{ color: var(--danger); }
.account-dropdown-item.danger svg{ color: var(--danger); }

/* Panneau de notifications — même langage visuel que le menu de compte,
   mais position fixe (pas de parent positionné à côté du bouton cloche). */
.notif-panel{
  display: none;
  position: fixed;
  top: 60px;                 /* = hauteur du header, constante structurelle */
  right: var(--space-5);
  width: 300px;               /* cas unique, largeur de panneau */
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--space-2) var(--space-6);   /* 6px 14px — que le contenu ne colle pas aux bords */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 1100;
}
.notif-panel.open{ display: block; }

/* =====================================================================
   ASSISTANT IA — bulle flottante bas droite + popup de conversation,
   visible sur tous les écrans (voir shared/assistant-ia.js).
   ===================================================================== */
.ia-bulle{
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 1100;
}
.ia-bulle:hover{ filter: brightness(1.08); }
.ia-bulle svg{ width: 26px; height: 26px; }

.ia-popup{
  position: fixed;
  right: var(--space-5);
  bottom: calc(56px + var(--space-5) + var(--space-3));
  width: 370px;                                    /* cas unique, largeur de panneau de chat */
  max-width: calc(100vw - var(--space-5) * 2);
  height: 500px;                                    /* cas unique, hauteur de panneau de chat */
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  z-index: 1100;
}
.ia-popup-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  flex-shrink: 0;
}
.ia-popup-head-titres{ display: flex; flex-direction: column; gap: 1px; }
.ia-popup-usage{ font-size: var(--font-xs); font-weight: 500; color: var(--text-muted); }
.ia-popup-head-actions{ display: flex; align-items: center; gap: var(--space-1); }
.ia-popup-aide,
.ia-popup-fermer{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: var(--text-muted);
  display: flex;
  padding: var(--space-1);
  cursor: pointer;
}
.ia-popup-aide:hover,
.ia-popup-fermer:hover{ color: var(--text); }
.ia-popup-fermer svg{ width: 18px; height: 18px; }
.ia-msgs{
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}
.ia-disclaimer{
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  padding: 0 var(--space-4);
}
.ia-msg{
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  line-height: 1.4;
  word-break: break-word;
}
.ia-msg-row{ display: flex; align-items: flex-end; gap: var(--space-2); align-self: flex-start; max-width: 100%; }
.ia-avatar{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ia-avatar svg{ width: 14px; height: 14px; }
.ia-msg-bot{ background: var(--surface-2); color: var(--text); }
.ia-msg-moi{ align-self: flex-end; background: var(--accent); color: #fff; }
.ia-msg-photo{ padding: 0; background: none; overflow: hidden; border-radius: var(--radius-md); }
.ia-msg-photo img{ display: block; width: 100%; max-height: 200px; object-fit: cover; }
.ia-msg-choix{ font-weight: 600; }
.ia-msg-erreur{ background: var(--danger-tint); color: var(--danger); }
.ia-msg-attente{ padding-top: var(--space-3); padding-bottom: var(--space-3); }

/* Indicateur "en cours" générique — 3 points qui rebondissent en boucle.
   Réutilisé par l'Assistant IA (attente d'une réponse) et l'écran de
   maintenance (voir index/index.html) — pas propre au chat malgré son
   origine, d'où le nom neutre. */
.points-rebond{ display: flex; align-items: center; justify-content: center; gap: 4px; }
.points-rebond span{
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--text-muted);
  animation: points-rebond-anim 1.2s infinite ease-in-out;
}
.points-rebond span:nth-child(2){ animation-delay: .15s; }
.points-rebond span:nth-child(3){ animation-delay: .3s; }
@keyframes points-rebond-anim{
  0%, 60%, 100%{ transform: translateY(0); opacity: .5; }
  30%{ transform: translateY(-4px); opacity: 1; }
}
/* Variante plus grosse + espacée — écran de maintenance (index/index.html),
   pas dans une bulle de chat étroite comme l'usage d'origine. */
.points-rebond-espace{ gap: 6px; margin: var(--space-4) 0 var(--space-7); }
.points-rebond-espace span{ width: 8px; height: 8px; }
.ia-type-choix{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ia-type-choix button{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
}
.ia-type-choix button:hover{ background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.ia-input-row{
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ia-photo-btn{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ia-photo-btn:hover{ color: var(--accent); border-color: var(--accent); }
.ia-photo-btn svg{ width: 18px; height: 18px; }
.ia-input{
  flex: 1;
  resize: none;
  max-height: 90px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  padding: var(--space-4) var(--space-5);   /* aligné sur .field input — même grosseur que les autres champs de l'app */
  font: inherit;
  font-size: var(--font-base);
}
.ia-envoyer{
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: var(--accent);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ia-envoyer:hover{ filter: brightness(1.08); }
.ia-envoyer svg{ width: 17px; height: 17px; }

@media (max-width: 720px){
  .ia-bulle{ right: var(--space-4); bottom: var(--space-4); }
  .ia-popup{
    right: var(--space-4);
    bottom: calc(56px + var(--space-4) + var(--space-3));
    width: calc(100vw - var(--space-4) * 2);
  }
}

/* =====================================================================
   MENU LATÉRAL (mobile : plein écran en glissement / desktop : sidebar fixe)
   ===================================================================== */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  padding: var(--space-7);
  overflow-y: auto;
}
.menu-overlay.open{ display: flex; }
.work-popup{ z-index: 2000; } /* les popups doivent toujours passer par-dessus le header fixe */

#menuOverlay{
  display: flex;
  top: 60px;                         /* = hauteur du header */
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
#menuOverlay.open{ transform: translateX(0); }

.menu-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-7); }
.menu-close{
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-close:hover{ color: var(--accent); }
.menu-close:active{ background: var(--surface-2); }
.menu-close.active{ border-color: var(--accent); color: var(--accent); }
.menu-close svg{ width: 18px; height: 18px; }

.menu-list{ display: flex; flex-direction: column; gap: var(--space-1); }
.menu-item{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}
.menu-item:not(.active):hover{ background: var(--surface-2); }
.menu-item:active{ background: var(--surface-2); }
.menu-item.active{ background: var(--surface); border-color: transparent; color: var(--accent); }
.menu-item svg{ width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); }
.menu-item.active svg{ color: var(--accent); }
/* Item « Admin », épinglé en bas du menu — display : JS bascule à "flex"
   pour un super admin (index.html, construireMenu). */
#menuItemAdmin{ display: none; color: var(--purple); margin-top: auto; }

/* =====================================================================
   SECTIONS DE PAGE / TITRES / GRILLES
   ===================================================================== */
.section{ display: none; padding-bottom: 36px; }
.section.active{ display: block; }
/* Filet de sécurité : écran demandé qui n'existe pas encore (allerVers) */
.section-non-construite{ padding: var(--space-7); }

.page-title{
  font-size: var(--font-xl);         /* 20px */
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-8);     /* standardisé 2026-09-17 : même espace que .page-title-row, seul ou pas */
}
.page-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.page-title-row .page-title{ margin-bottom: 0; }   /* la marge du titre est portée par la rangée */
.stats-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* =====================================================================
   MODE DESKTOP (min-width: 900px) — vraie sidebar fixe
   ===================================================================== */
@media (min-width: 900px){
  body{ display: block; }

  .app-header{
    padding: 0 20px;                  /* volontairement plus généreux qu'en mobile */
    margin-bottom: 0;
    z-index: 300;
  }
  #mainApp{
    max-width: 1100px;
    margin-left: max(280px, calc(280px + (100vw - 280px - 1100px) / 2));
    padding-top: 60px;
    box-sizing: border-box;
    transition: margin-left .25s cubic-bezier(.4,0,.2,1);
  }
  #menuOverlay{
    display: flex !important;
    transform: none !important;
    transition: width .25s cubic-bezier(.4,0,.2,1), padding .25s cubic-bezier(.4,0,.2,1);
    position: fixed;
    top: 60px; left: 0;
    height: calc(100vh - 60px);
    width: 280px;
    border-right: 1px solid var(--border);
    z-index: 100;
    padding: 20px 14px;
    overflow: hidden;
  }
  #menuOverlay .menu-item-label{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .15s ease, width .25s cubic-bezier(.4,0,.2,1);
  }
  .btn-menu{ display: none; }
  .btn-sidebar-toggle{ display: flex; }

  /* Sidebar repliée — icônes seules, façon rail Concur */
  #mainApp.menu-collapsed{ margin-left: max(64px, calc(64px + (100vw - 64px - 1100px) / 2)) !important; }
  #mainApp.menu-collapsed #menuOverlay{ width: 64px; padding: 20px 8px; }
  #mainApp.menu-collapsed #menuOverlay .menu-item-label{ opacity: 0; width: 0; margin: 0; }
  #mainApp.menu-collapsed #menuOverlay .menu-item{ justify-content: center; padding: 11px 0; gap: 0; }

  /* Menu desktop plus dense — la souris n'a pas besoin des cibles
     généreuses du doigt sur mobile (voir .menu-item de base) */
  #menuOverlay .menu-list{ gap: 2px; }
  #menuOverlay .menu-item{
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-md);        /* 14px — fusionné depuis 13.5px */
  }
  #menuOverlay .menu-item svg{ width: 16px; height: 16px; }

  /* Marque, plus grande en desktop */
  .app-brand-logo{ width: 32px; height: 32px; }
  .app-brand-name{ font-size: var(--font-lg); }  /* fusionné depuis 17px */
  .co-name{ font-size: var(--font-lg); }
  .btn-menu{ width: 40px; height: 40px; }
}