/* ============================================================================
   Systeme de design partage par toutes les pages de l'application (pas la
   landing page publique, qui a son propre fichier landing.css pour ses
   sections plus elaborees - mais les deux partagent les memes tokens de
   couleur/typo definis ici pour rester coherents visuellement).
   ============================================================================ */

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

:root {
  /* Marque - eclaircie par rapport au theme clair d'origine pour rester lisible/vive sur fond
     sombre (l'inversion claire/sombre ne se limite pas a echanger bg/text, chaque teinte doit
     regagner du contraste). */
  --color-primary: #6366f1;
  --color-primary-dark: #818cf8;
  --color-primary-light: rgba(99, 102, 241, 0.16);
  --color-violet: #a78bfa;
  --color-accent: #34d399;
  --color-accent-dark: #10b981;
  --color-danger: #f87171;
  --color-danger-light: rgba(248, 113, 113, 0.14);
  --color-warning: #fbbf24;

  /* Neutres - theme sombre par defaut sur tout le site (voir ARCHITECTURE.md "Refonte visuelle") */
  --color-bg: #05070d;
  --color-surface: rgba(255, 255, 255, 0.035);
  --color-surface-solid: #10131f; /* pour les elements qui ne peuvent pas etre transparents (menus, modales au-dessus d'autre contenu) */
  --color-border: rgba(255, 255, 255, 0.09);
  --color-text: #f1f5f9;
  --color-text-secondary: #98a2c0;
  --color-text-muted: #626b8a;

  /* Fond "encore plus sombre" (hero, panneau debug, sections premium) */
  --color-dark-bg: #05070d;
  --color-dark-surface: #10131f;
  --color-dark-border: rgba(255, 255, 255, 0.1);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.35);
  --shadow-glow-accent: 0 0 26px rgba(52, 211, 153, 0.4), 0 0 64px rgba(52, 211, 153, 0.12);
  --glow-ring-color: rgba(52, 211, 153, 0.55);

  --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-violet) 100%);
  --gradient-accent: linear-gradient(135deg, #34d399 0%, #10b981 100%);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--color-bg);
  /* Pas de "background-attachment: fixed" ici : sur une page longue (la landing), ca force le
     navigateur a repeindre tout le degrade a chaque frame de scroll - source reelle de
     saccades/latence pendant le defilement, pas juste en theorie (constate au scroll sur la
     landing une fois les nouvelles sections ajoutees). Le degrade defile avec le contenu a la
     place - visuellement quasi identique sur une page de cette longueur, sans le cout. */
  background-image: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(52, 211, 153, 0.08), transparent 55%);
  color: var(--color-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.app-shell.narrow {
  max-width: 440px;
}

/* --- Navigation --- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.topnav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.topnav-brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Symbole M8Call (public/logo.svg) dans la barre de navigation. Il remplace l'ancienne pastille
   verte generique. Charge en <img> plutot qu'en SVG inline : le meme fichier sert de favicon et
   apparait sur 11 pages - l'inliner obligerait a le recopier partout, et a le recopier a chaque
   retouche du trace. */
.topnav-brand .brand-logo {
  width: 22px;
  height: 22px;
  display: block;
  /* Reserve la place AVANT le chargement du fichier : sans cette hauteur fixe, le titre
     sursaute lateralement quand l'image arrive. */
  flex-shrink: 0;
}

.topnav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}

.topnav-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.topnav-links a:hover,
.topnav-links a.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.topnav-links a.logout {
  color: var(--color-text-muted);
}

/* Le coeur du produit (l'appel en direct) reste repérable en un coup d'oeil dans la nav, sans
   être un gros badge criard : juste un point lumineux + une teinte accent, et le plein traitement
   pilule uniquement au survol/sur la page active (comme les autres liens). */
.topnav-links a.nav-appel {
  color: var(--color-accent);
  font-weight: 700;
}

.topnav-links a.nav-appel::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  vertical-align: middle;
}

.topnav-links a.nav-appel:hover,
.topnav-links a.nav-appel.active {
  background: var(--gradient-accent);
  color: #04150f;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.4);
}

.topnav-links a.nav-appel:hover::before,
.topnav-links a.nav-appel.active::before {
  background: #04150f;
  box-shadow: none;
}

/* --- Typographie --- */
h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.page-subtitle {
  color: var(--color-text-secondary);
  font-size: 14.5px;
  margin: 0 0 28px;
  line-height: 1.5;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--gradient-brand);
  color: white;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 10px 36px rgba(99, 102, 241, 0.38);
}

.btn-accent {
  background: var(--gradient-accent);
  color: white;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.25);
}

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

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

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

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn-small {
  padding: 7px 13px;
  font-size: 13px;
}
.btn-block {
  width: 100%;
}

/* --- Cartes --- */
.card {
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Pas de "transform: translateY(...)" au survol : sur une page qui scrolle, le curseur reste
   immobile a l'ecran pendant que le contenu defile en-dessous, donc une carte peut entrer/sortir
   du survol plusieurs fois PENDANT le scroll - avec un transform, ca fait visuellement "sauter"
   la carte (constate sur la grille de fonctionnalites). Un simple changement d'ombre/bordure
   donne le meme effet "vivant" sans deplacer quoi que ce soit. */
.card-hover:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(52, 211, 153, 0.25);
  border-color: rgba(52, 211, 153, 0.3);
}

/* --- Formulaires --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.field-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.field-hint {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select {
  font-family: inherit;
  font-size: 14.5px;
  padding: 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

/* Import de fiche produit PDF (questionnaire de setup, voir public/setup.js). Le selecteur
   de fichier natif est gris et minuscule sur fond sombre : on ne restyle que son bouton, sans
   le remplacer par un faux bouton qui perdrait l'accessibilite clavier. */
.field input[type="file"] {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}

.field input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  margin-right: 12px;
  padding: 9px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.field input[type="file"]::file-selector-button:hover {
  border-color: var(--color-primary);
}

.pdf-status {
  color: var(--color-accent);
}

.pdf-status-error {
  color: var(--color-danger);
}

.radio-fieldset {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 6px;
}

.radio-fieldset legend {
  padding: 0 6px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  padding: 7px 0;
  cursor: pointer;
}

.controls-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.badge-success { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
.badge-warning { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.badge-info { background: var(--color-primary-light); color: #a5b4fc; }
.badge-neutral { background: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); }
.badge-accent { background: rgba(52, 211, 153, 0.18); color: #34d399; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2) inset; }
.badge-danger { background: var(--color-danger-light); color: #fca5a5; }

/* --- Bannieres --- */
.banner {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}

.banner-error {
  background: var(--color-danger-light);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}

.banner-success {
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.35);
}

.banner-warning {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.35);
}
.banner-info {
  background: var(--color-primary-light);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.35);
}

.hidden {
  display: none !important;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-danger);
  animation: pulseDot 1.6s infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pulsation lumineuse generique - reutilisee par l'orbe d'ecoute de app.html (voir app.css) et
   tout autre indicateur "vivant" qui doit respirer sans etre alarmant (contrairement a pulseDot,
   pensee pour un signal d'alerte "en direct"). */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow-ring-color); opacity: 1; }
  50% { box-shadow: 0 0 0 18px rgba(52, 211, 153, 0); opacity: 0.85; }
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* --- Grille responsive utilitaire --- */
.grid-cols-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* ============================================================================
   Detail d'un appel (onglets Resume/Transcript/Conseils + confirmation de RDV) :
   partage entre le dashboard (historique) et le widget de fin d'appel sur
   app.html - voir public/callDetail.js. Ici plutot que dans une feuille de
   style specifique a une page, puisque desormais utilise par deux.
   ============================================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  z-index: 50;
  overflow-y: auto;
}

.overlay-panel {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 640px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.overlay-panel p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.summary-box {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}

.summary-box p {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.6;
}

.appointment-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 18px 0;
}

.appointment-mention {
  font-style: italic;
}

.appointment-box .field {
  margin: 12px 0;
}

.appointment-box input[type="datetime-local"] {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  color-scheme: dark;
  width: 100%;
}

.appt-yesno {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.appt-no-confirmation {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  font-style: italic;
  margin: 8px 0;
}

.appt-date-field {
  margin-top: 14px;
}

.appt-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.appt-edit-btn,
.appt-delete-btn {
  font-size: 12.5px;
  padding: 6px 10px;
}

.appt-delete-btn {
  color: var(--color-danger);
}

/* --- Numero de telephone du prospect (voir callDetail.js, phoneSectionHtml) --- */
.phone-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}

.phone-box-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.phone-box input[type="tel"] {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

/* --- En-tete du detail d'appel + marqueur "Closing" manuel (voir callDetail.js) --- */
.call-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.call-detail-header h2 {
  margin: 0;
}

/* Positionne juste a cote du bouton de fermeture (✕, .overlay-close est a right:16px/30px de
   large) plutot que dans l'en-tete a gauche - les deux actions "sur ce panneau" (fermer / marquer
   comme closing) regroupees au meme endroit. .overlay-panel est le premier ancetre positionne
   (position:relative), donc ce positionnement fonctionne meme si ce bouton reste imbrique plus
   profondement dans le HTML rendu par renderCallDetailHtml. */
.closing-toggle-btn {
  position: absolute;
  top: 16px;
  right: 54px;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.closing-toggle-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Marque : le rond (●) lui-meme devient vert plein - plus parlant qu'une fleche neutre pour
   representer "closing = reussite". */
.closing-toggle-btn-active {
  color: var(--color-accent);
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.1);
}

/* --- Notes libres (voir callDetail.js) --- */
.notes-textarea {
  width: 100%;
  min-height: 120px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  margin-bottom: 10px;
}

.transcript-lines {
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}

.transcript-line {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

/* --- Onglets Resume / Transcript / Conseils --- */
.detail-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 4px;
  border-bottom: 1px solid var(--color-border);
}

.detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 4px;
  margin-right: 16px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.detail-tab:hover {
  color: var(--color-text);
}

.detail-tab-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.detail-panel {
  padding-top: 12px;
}

.tips-box {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.tips-box p {
  margin: 0;
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.6;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .app-shell { padding: 20px 16px 48px; }
  .topnav-inner { padding: 12px 16px; flex-wrap: wrap; }
}

/* --- Selecteur de langue : bouton unique + menu deroulant (voir public/i18n.js) --- */
.lang-switch {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
}

.lang-switch-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 11px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lang-switch:hover .lang-switch-current,
.lang-switch:focus-within .lang-switch-current,
.lang-switch-open .lang-switch-current {
  color: var(--color-text);
  border-color: var(--color-primary);
}

.lang-switch-globe {
  font-size: 13px;
  line-height: 1;
}

.lang-switch-caret {
  font-size: 9px;
  transition: transform 0.15s ease;
}

.lang-switch:hover .lang-switch-caret,
.lang-switch:focus-within .lang-switch-caret,
.lang-switch-open .lang-switch-caret {
  transform: rotate(180deg);
}

/* Aligne a DROITE : le selecteur est toujours en bout de barre de navigation, un menu aligne a
   gauche deborderait hors de l'ecran. */
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 158px;
  padding: 6px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
  /* Cache par defaut sans display:none, pour garder la transition d'apparition. `visibility` est
     volontairement HORS de la transition : l'animer la rend dependante du rendu de la page (elle
     reste bloquee sur "hidden" si aucune frame n'est peinte). Seuls l'opacite et le deplacement
     sont animes ; pointer-events evite que le menu invisible ne capte les clics. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lang-switch:hover .lang-switch-menu,
.lang-switch:focus-within .lang-switch-menu,
.lang-switch-open .lang-switch-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Pont invisible entre le bouton et le menu : sans lui, les 6px d'ecart suffisent a perdre le
   survol et a refermer le menu avant qu'on l'atteigne. */
.lang-switch-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.lang-switch-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.lang-switch-option:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.lang-switch-option-active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.lang-switch-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.75;
  min-width: 20px;
}

.lang-switch-label {
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Menu "Profil" de la barre de navigation (voir public/accountMenu.js).

   Meme mecanique d'ouverture que le selecteur de langue ci-dessus : survol,
   focus clavier (:focus-within) et clic (classe .account-menu-open, seule voie
   possible au tactile). Comme pour lui, `visibility` reste HORS de la transition
   - l'animer rend l'ouverture dependante du rendu de frames.
--------------------------------------------------------------------------- */

.account-menu {
  position: relative;
  display: inline-flex;
  margin-left: 4px;
}

.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.account-menu:hover .account-menu-trigger,
.account-menu:focus-within .account-menu-trigger,
.account-menu-open .account-menu-trigger {
  color: var(--color-text);
  border-color: var(--color-primary);
}

.account-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.account-menu-caret {
  font-size: 10px;
  opacity: 0.7;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 244px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Passerelle invisible entre le bouton et le panneau : sans elle, le menu se refermerait des que
   la souris traverse l'espace qui les separe. */
.account-menu-panel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.account-menu:hover .account-menu-panel,
.account-menu:focus-within .account-menu-panel,
.account-menu-open .account-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.account-menu-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.account-menu-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.account-menu-plan {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* `.topnav-links a` impose ses propres couleurs/paddings a tous les liens de la barre : les
   entrees du menu doivent donc les reprendre explicitement, sinon elles heritent du style des
   onglets de navigation. */
.topnav-links .account-menu-item,
.account-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.topnav-links .account-menu-item:hover,
.account-menu-item:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Profil de vente : premiere entree et seule mise en avant - c'est le reglage qui conditionne
   toute la qualite des suggestions, il ne doit pas se confondre avec les autres. */
.topnav-links .account-menu-item-feature,
.account-menu-item-feature {
  background: var(--color-primary-light);
  color: var(--color-text);
  border: 1px solid rgba(99, 102, 241, 0.28);
  margin-bottom: 2px;
}

.topnav-links .account-menu-item-feature:hover,
.account-menu-item-feature:hover {
  background: rgba(99, 102, 241, 0.26);
  color: var(--color-text);
}

.account-menu-item-title {
  font-weight: 600;
}

.account-menu-item-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.account-menu-separator {
  height: 1px;
  background: var(--color-border);
  margin: 4px 6px;
}

.topnav-links .account-menu-item-danger,
.account-menu-item-danger {
  color: var(--color-text-muted);
}

.topnav-links .account-menu-item-danger:hover,
.account-menu-item-danger:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
}