* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #7C5CFC;
  --primary-dark: #5A3DD6;
  --primary-light: #A78BFA;
  --primary-glow: rgba(124, 92, 252, 0.3);
  --green: #10B981;
  --green-dark: #059669;
  --red: #EF4444;
  --orange: #F59E0B;
  --blue: #38BDF8;
  --bg: #0F0F1A;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --text: #F1F1F6;
  --text-secondary: #9292A8;
  --text-muted: #6B6B80;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
  --radius: 16px;
  --radius-sm: 10px;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  /* Landing v3 (voir memoire "project_landing_redesign_direction") — tokens dedies au systeme de
     panels/cartes imbriquees + nav flottante de la landing publique. Distincts de --bg-card/--glass
     ci-dessus pour ne rien changer ailleurs (dashboard, admin...) ; surcharges localement sur
     #landing-visual via --bg-card, voir styles landing plus bas. */
  --indigo: #4C3BCF;
  --panel: rgba(18,18,28,0.74);
  --landing-card: rgba(255,255,255,0.045);
  --landing-card-hover: rgba(255,255,255,0.08);
  --nav-glass: rgba(11,11,20,0.55);
  --nav-glass-scrolled: rgba(11,11,20,0.88);
  --landing-radius: 26px;
  --landing-radius-card: 15px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F4F4F9;
    --bg-card: rgba(255,255,255,0.8);
    --bg-card-hover: #FFFFFF;
    --glass: rgba(255,255,255,0.7);
    --glass-border: rgba(0,0,0,0.06);
    --text: #1A1A2E;
    --text-secondary: #5A5A72;
    --text-muted: #8E8EA0;
    --border: rgba(0,0,0,0.07);
    --shadow: 0 8px 32px rgba(0,0,0,0.06);
    --panel: rgba(255,255,255,0.78);
    --landing-card: rgba(0,0,0,0.035);
    --landing-card-hover: rgba(0,0,0,0.06);
    --nav-glass: rgba(244,244,249,0.65);
    --nav-glass-scrolled: rgba(244,244,249,0.92);
  }
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--primary); color: white; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
a { color: var(--primary-light); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; text-decoration: none; }

/* ─── HEADER ─── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 26, 0.8);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (prefers-color-scheme: light) {
  .header { background: rgba(244, 244, 249, 0.85); }
}
.header .logo { font-size: 22px; font-weight: 800; letter-spacing: -1px; background: linear-gradient(135deg, var(--primary-light), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header .logo span { -webkit-text-fill-color: var(--primary); }
.header nav { display: flex; gap: 20px; align-items: center; }
.header nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.header nav a:hover { color: var(--text); }
.header .user-badge { display: flex; align-items: center; gap: 10px; }
.header .user-badge .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: white;
  box-shadow: 0 0 20px var(--primary-glow);
}

/* ─── LANDING ───
   max-width fluide (clamp) : la colonne de contenu s'élargit progressivement avec la fenêtre
   entre 1100px et 1600px, au lieu de rester figée ou de sauter par paliers brusques. */
.landing {
  /* min(..., 100%) empêche le plancher de 1100px du clamp de dépasser la largeur réelle de
     l'écran en dessous de 1410px (1100/0.78vw) — sans ça, tout mobile/tablette hérite d'une
     largeur de contenu figée à 1100px, plus large que l'écran, et déborde horizontalement
     (bug trouvé le 2026-07-14, iPhone 12, remonté par Axel). Le comportement desktop fluide
     décrit ci-dessous est inchangé au-dessus de 1410px. */
  max-width: min(clamp(1100px, 78vw, 1600px), 100%);
  margin: 0 auto;
  padding: 0 24px 40px;
  animation: fadeIn 0.6s ease-out;
  /* Landing v3 : passe au-dessus de #landing-ambient (canvas position:absolute, z-index:0) —
     sans ce z-index explicite, un descendant position:static peint AVANT un descendant positionne
     z-index:0 dans le meme contexte d'empilement, meme s'il vient plus tard dans le DOM. */
  position: relative;
  z-index: 2;
}
/* Desktop large : plus de respiration (tailles/espacements), pas de restructuration —
   les grilles .features/.plans s'adaptent déjà seules via grid-template-columns: auto-fit. */
@media (min-width: 1440px) {
  .landing .hero h1 { font-size: clamp(36px, 4.5vw, 64px); }
  .landing h2.section-title { font-size: 32px; }
  .landing .feature { padding: 36px; }
  .landing .plan { padding: 44px 36px; }
}
@media (min-width: 1920px) {
  .landing .hero h1 { font-size: clamp(36px, 4vw, 72px); }
  .landing h2.section-title { font-size: 36px; }
  .landing .features { gap: 24px; }
  .landing .plans { gap: 28px; }
}

/* ─── LANDING HEADER / FOOTER (full-bleed) ───
   Header et footer sont désormais des barres pleine largeur (fond/bordure sur 100% de l'écran,
   voir renderLanding() dans app.js — header/footer sortis du conteneur .landing) contenant une
   colonne intérieure alignée sur la même largeur fluide que .landing. Avant, tout — y compris
   header/footer — vivait dans .landing, ce qui limitait aussi leur bordure à sa largeur max. */
.landing-bar-inner {
  /* Même correctif que .landing ci-dessus (voir commentaire) — même clamp partagé, même bug. */
  max-width: min(clamp(1100px, 78vw, 1600px), 100%);
  margin: 0 auto;
  padding: 0 24px;
}
.landing-bar--header { border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.landing-bar--footer { border-top: 1px solid var(--border); margin-top: 80px; position: relative; z-index: 2; }

/* ─── LANDING HEADER ─── */
.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  --header-height: 68px;
  min-height: var(--header-height);
}
.landing-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.landing-header nav a {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  padding: 11px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.landing-header nav a:hover { color: var(--primary-light); }
.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-text {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}
@media (max-width: 480px) {
  .logo-text { display: none; }
}
/* Cible uniquement le bouton "Essai gratuit" du header landing (44px = cible tactile) sans
   toucher .btn-sm ailleurs sur le site (dashboard, admin...). */
.landing-header nav .btn-sm { padding: 11px 16px; min-height: 44px; }

/* ─── LANDING FOOTER ─── */
.landing-footer {
  padding-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-grid a {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-grid a:hover { color: var(--primary-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.footer-made { color: var(--text-muted); font-size: 12px; }

/* Fonds de bouton retires (retour Axel 2026-07-28) : icones nues, sans cercle visible.
   Icones a viewBox variable (LinkedIn 24x24, Facebook/TikTok 320-448x512) donc on ne fixe
   qu'une hauteur et on laisse la largeur en auto — fixer width ET height ecrasait le ratio
   natif de chaque logo et les rendait visuellement incoherents entre eux. */
.footer-social { display: flex; gap: 16px; margin-top: 4px; align-items: center; }
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color 0.2s, transform 0.2s;
}
.footer-social-icon svg { height: 18px; width: auto; fill: currentColor; }
.footer-social-icon:hover {
  color: var(--primary-light);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-grid .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}
.landing .hero {
  text-align: center;
  padding: 80px 0 60px;
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.landing .hero::before {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  width: min(600px, 100vw); height: min(600px, 100vw);
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
.landing .hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
  position: relative;
}
.landing .hero h1 span {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.landing .hero p {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 36px;
}
.landing .hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.hero-demo-call {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: rgba(124, 58, 237, 0.08);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.hero-demo-call:hover { background: rgba(124, 58, 237, 0.16); transform: translateY(-1px); }
.hero-demo-call strong { color: var(--primary-light); }
/* Pas de white-space:nowrap : la phrase doit pouvoir passer sur 2 lignes sur petit ecran plutot
   que deborder du cadre (bug remonte par Axel, 2026-07-15 — figee sur une ligne, ca "tenait pas"
   sur mobile). */
.hero-guarantee { margin-top: 16px; font-size: 13px; color: var(--text-secondary); }
.btn-ghost {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 16px;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--text); }

/* ─── AURORA (fond animé de marque, inspiré du ruban dégradé de stripe.com) ───
   v2 — la v1 (3 blobs radiaux qui "respirent") ne rendait pas le bon effet : trop discret,
   ressemblait à des taches qui pulsent plutôt qu'à un flux. Stripe utilise un large ruban
   dégradé qui COULE en continu (le dégradé lui-même se déplace, pas juste sa position/échelle),
   aux bords adoucis par un masque plutôt que par un flou uniforme — d'où le rendu "propre" et
   pas flou-cheap. Reproduit ici avec :
   - un dégradé linéaire large (background-size 220%) dont on anime background-position → effet
     "liquide" qui coule lentement dans le ruban, pas juste une forme qui bouge ;
   - un masque radial (mask-image) qui fait disparaître les bords en douceur, sans le halo flou
     visible d'un simple filter:blur() sur les contours ;
   - .landing-aurora (fixe, très discret, tourne en fond pendant tout le scroll) et .hero-aurora
     (le ruban visible, positionné comme celui de Stripe : penché, débordant en haut à droite).
   Toujours z-index:-1 dans un ancêtre position:relative/fixed pour ne jamais passer devant le
   texte ou les CTA. Uniquement background-position/transform animés (compositing GPU). */
.landing-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.landing-aurora::before {
  content: "";
  position: absolute;
  top: -45%;
  right: -25%;
  width: 85vw;
  height: 85vw;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--primary-dark), var(--primary), var(--blue), var(--primary-light), var(--primary), var(--primary-dark));
  filter: blur(110px);
  opacity: 0.14;
  animation: auroraSpin 90s linear infinite;
}
.hero-aurora {
  position: absolute;
  inset: -25% -15%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-aurora::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -25%;
  width: 100%;
  height: 150%;
  transform: rotate(-16deg);
  transform-origin: center;
  background: linear-gradient(100deg,
    transparent 0%,
    var(--primary-dark) 14%,
    var(--primary) 32%,
    var(--blue) 48%,
    var(--primary-light) 62%,
    var(--primary) 78%,
    transparent 96%);
  background-size: 240% 240%;
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 68% 42%, black 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 55% at 68% 42%, black 45%, transparent 78%);
  opacity: 0.75;
  animation: ribbonFlow 20s ease-in-out infinite;
  will-change: background-position;
}
@keyframes auroraSpin {
  to { transform: rotate(360deg); }
}
@keyframes ribbonFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-aurora::before, .hero-aurora::before { animation: none !important; }
}
@media (max-width: 768px) {
  .landing-aurora { display: none; } /* évite le coût d'un blur 85vw fixe sur mobile bas de gamme */
  .hero-aurora::before { opacity: 0.5; }
}

/* ─── LANDING V3 — vague ambiante + panels vitrés ───
   Maquette validée le 2026-07-15 (voir memoire project_landing_redesign_direction), portée ici
   avec les tokens theme-aware ci-dessus au lieu des couleurs fixes de la maquette — la landing
   continue de s'adapter a prefers-color-scheme comme avant (demande explicite d'Axel : pas de
   dark-only pour l'instant, le reste du site sera aligne dans une prochaine passe). Remplace
   .hero-aurora/.landing-aurora UNIQUEMENT sur la landing (voir render() dans app.js, la vue
   "landing" est exclue de l'injection generique .landing-aurora) — les autres pages "site"
   (login/register/onboarding...) gardent l'aurora existante inchangee. */
#landing-visual { position: relative; }
#landing-ambient {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; width: 100%; display: block;
}
#landing-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
}
#landing-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, transparent 55%, rgba(0,0,0,0.28) 100%);
}
@media (prefers-color-scheme: light) {
  #landing-grain { opacity: 0.03; }
  #landing-vignette { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  #landing-ambient { opacity: 0.6; }
}

/* Nav flottante en pilule (remplace la barre pleine largeur bordee) — memes classes/markup que
   l'ancien header (logo-link, nav a, hamburger-btn) pour zero risque JS, uniquement restyle. */
.landing-bar--header {
  position: sticky;
  top: 14px;
  z-index: 40;
  border-bottom: none;
  margin-bottom: 40px;
  /* Insere la pilule elle-meme (pas juste son contenu) depuis les bords de l'ecran — sans ce
     padding sur le wrapper, .landing-bar-inner passe a max-width:100% en dessous de ~1123px
     (voir clamp() sur .landing) et la pilule touche les deux bords de l'ecran sur mobile, logo et
     hamburger collés aux coins (retour d'Axel, 2026-07-15). */
  padding: 0 14px;
}
.landing-header {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--nav-glass);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  padding: 12px 20px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.landing-header.scrolled {
  background: var(--nav-glass-scrolled);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,0.45);
}
@media (max-width: 900px) {
  .landing-bar--header { top: 10px; margin-bottom: 24px; padding: 0 16px; }
  .landing-header { padding: 10px 18px; }
}

/* Panels vitres — chaque section majeure (ROI, demo, features, cas d'usage, offres, FAQ) est
   enveloppee dans .landing-panel. La surcharge locale de --bg-card/--border fait que TOUT ce qui
   est deja stylé avec ces tokens (.feature, .review-card, .plan, .roi-calc, .demo-phone,
   .demo-dashboard, .demo-tab, .faq-item...) herite automatiquement du tiers "carte imbriquee"
   sans toucher a une seule de leurs regles existantes. */
.landing-panel {
  --bg-card: var(--landing-card);
  --bg-card-hover: var(--landing-card-hover);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--landing-radius);
  /* blur(26px) dans la maquette d'origine — reduit ici : 7 panels vitres empiles sur la meme
     page derriere une vague animee en continu font que chaque flou est recompose a chaque frame
     (voir commentaire sur VIEWPORT_MARGIN dans initLandingVisuals()), 18px reste tres "verre" a
     l'oeil pour un cout GPU nettement moindre. */
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 52px 44px;
  margin: 36px 0;
}
.landing-panel .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-light);
  text-align: center;
  margin-bottom: 10px;
}
.landing-panel h2.section-title, .landing-panel .section-sub { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Carte "demandez a l'assistant" — juste avant la FAQ, invite a appeler la ligne de demo pour les
   questions non couvertes sur la page (voir renderLanding()). La rangee d'icones (LANDING_ICONS,
   SVG pro depuis le 2026-07-15, remplace les emoji d'origine) reprend le meme langage visuel que
   .feature .icon plus haut sur la page, lisible d'un coup d'oeil sans illustration dediee. */
.ask-bot-card {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 36px 24px; margin-top: 8px;
  border-radius: var(--landing-radius-card);
  background: linear-gradient(160deg, rgba(124,92,252,0.14), var(--bg-card) 60%);
  border: 1px solid var(--glass-border);
  text-align: center;
}
.ask-bot-icons {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  font-size: 28px; color: var(--primary-light);
}
@media (max-width: 480px) {
  .ask-bot-card { padding: 28px 18px; gap: 18px; }
  .ask-bot-icons { font-size: 22px; gap: 14px; }
}
@media (max-width: 768px) {
  .landing-panel { padding: 32px 20px; border-radius: 20px; margin: 24px 0; }
}
@media (max-width: 480px) {
  .landing-panel { padding: 24px 16px; border-radius: 16px; }
}

/* Reveal au scroll supprimé (2026-07-23, retour Axel : bugs d'affichage, cartes qui n'apparaissent
   qu'au défilement) — .reveal reste posé dans le HTML/JS comme accroche neutre, sans effet
   visuel : tout le contenu est visible dès l'arrivée sur la page. Seule la vague ambiante en
   arrière-plan (canvas, voir initLandingVisuals()) reste animée. */
.reveal { opacity: 1; transform: none; }

/* ─── DEMO CAROUSEL ─── */
.demo-carousel { margin: 0 0 48px; animation: fadeIn 0.35s ease-out; }
.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.demo-tab {
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.demo-tab:hover {
  border-color: var(--primary-glow);
  color: var(--text);
}
.demo-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px var(--primary-glow);
}
.demo-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.3;
  cursor: pointer;
  transition: all 0.3s;
}
.demo-dot.active {
  opacity: 1;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  width: 28px;
  border-radius: 5px;
}

/* ─── DEMO SECTION ─── */
.demo-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 80px 0;
  align-items: stretch;
}
.demo-phone, .demo-dashboard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.demo-phone:hover, .demo-dashboard:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary-glow);
}
.demo-phone-header, .demo-dash-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.demo-phone-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.demo-phone-dot, .demo-dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
}
.demo-phone-status {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
  background: rgba(34,197,94,0.06);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.3px;
}
.demo-phone-end {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
  background: rgba(239,68,68,0.06);
  border-top: 1px solid var(--border);
  letter-spacing: 0.3px;
}
.demo-conversation {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
}
.demo-conversation .msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  animation: msgIn 0.3s ease-out both;
}
.demo-conversation .msg.client {
  align-self: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}
.demo-conversation .msg.agent {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  border-bottom-right-radius: 4px;
}
.demo-conversation .msg:nth-child(1) { animation-delay: 0s; }
.demo-conversation .msg:nth-child(2) { animation-delay: 0.8s; }
.demo-conversation .msg:nth-child(3) { animation-delay: 1.6s; }
.demo-conversation .msg:nth-child(4) { animation-delay: 2.4s; }
.demo-conversation .msg:nth-child(5) { animation-delay: 3.2s; }
.demo-conversation .msg:nth-child(6) { animation-delay: 4s; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.demo-dash-header .demo-dash-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.demo-dash-body { padding: 16px; }
.demo-dash-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 10px;
  margin-bottom: 14px;
  animation: pulseAlert 2s ease-in-out infinite;
}
@keyframes pulseAlert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.demo-dash-bell { font-size: 18px; animation: bellRing 2s ease-in-out infinite; }
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}
.demo-dash-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.demo-dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.demo-dash-row:last-of-type { border-bottom: none; }
.demo-dash-row span:first-child { color: var(--text-muted); }
.demo-dash-row span:last-child { color: var(--text); font-weight: 500; }
.demo-dash-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  .demo-section { grid-template-columns: 1fr; }
  .demo-conversation { min-height: 240px; }
}

.landing .features {
  display: grid;
  /* Fixe à 3 colonnes (au lieu d'auto-fit) : demande explicite d'Axel — avec auto-fit, le nombre
     de colonnes changeait selon la largeur d'écran ou le niveau de zoom du navigateur, donnant
     l'impression qu'il manquait des cartes. Les lignes s'adaptent (grid crée autant de lignes
     que nécessaire), seul le nombre de colonnes reste figé. Cassé uniquement sur les breakpoints
     mobile explicites ci-dessous (768px / 480px), pas par la largeur de fenêtre en continu. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 80px 0;
}
.landing .feature {
  --accent: 124,92,252; /* fallback si pas de nuance par carte (voir renderLanding()) */
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  padding: 32px;
  border-radius: var(--radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing .feature:hover {
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(var(--accent),0.55);
  border-color: rgba(var(--accent),0.4);
}
.landing .feature .icon { font-size: 36px; margin-bottom: 16px; color: rgb(var(--accent)); }
/* Icones SVG inline (LANDING_ICONS, voir app.js) : suivent le font-size du conteneur (width/height
   "1em" sur chaque svg) donc aucune des media queries .feature .icon ci-dessous n'a besoin d'etre
   dupliquee pour elles. Seul l'alignement vertical avec le texte a besoin d'un ajustement generique. */
svg.i { display: inline-block; vertical-align: -0.15em; }
.landing .feature h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.landing .feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
.landing h2.section-title { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.landing .section-sub { text-align: center; color: var(--text-secondary); margin-bottom: 48px; }
.plans-note { text-align: center; font-size: 13px; color: var(--text-secondary); margin: 40px 0 0; }
.landing .plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 60px 0;
}
.landing .plan {
  --accent: 124,92,252; /* fallback pour le fragment de vague decoratif ajoute plus bas, la carte
    n'a pas de nuance par carte comme .feature/.review-card (voir cette section pour le detail) */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.landing .plan.pro {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--bg-card), rgba(124, 92, 252, 0.06));
}
.landing .plan .badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  padding: 4px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 16px var(--primary-glow);
}
.landing .plan h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.landing .plan .price { font-size: 44px; font-weight: 800; background: linear-gradient(135deg, var(--primary-light), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; }
.landing .plan .price span { font-size: 16px; font-weight: 400; -webkit-text-fill-color: var(--text-secondary); }
.landing .plan ul { list-style: none; margin: 24px 0; text-align: left; }
.landing .plan ul li { padding: 8px 0; font-size: 14px; color: var(--text-secondary); }
.landing .plan ul li::before { content: "✓ "; color: var(--green); font-weight: 700; }

/* ─── REVIEWS (cas d'usage) ─── */
.reviews {
  display: grid;
  /* Même fix que .landing .features : 3 colonnes figées, pas d'auto-fit — voir commentaire
     au-dessus de .landing .features pour le détail (demande explicite d'Axel, 2026-07-12). */
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 48px 0 56px;
}
.review-card {
  --accent: 124,92,252; /* fallback si pas de nuance par carte (voir renderLanding()) */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(var(--accent),0.5);
  border-color: rgba(var(--accent),0.35);
}
.review-stars { font-size: 16px; margin-bottom: 10px; letter-spacing: 2px; }
.review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
  flex: 1;
  margin-bottom: 14px;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}
.review-author strong { color: var(--text); }
.review-author div { display: flex; flex-direction: column; gap: 1px; }
.review-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--accent)), var(--indigo));
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-badge {
  font-size: 10px;
  color: var(--green);
  font-weight: 600;
}

/* ─── Fragments de vague dans les coins de carte ───
   Reprend le motif de la vague ambiante de fond (initLandingVisuals(), voir app.js) en miniature,
   plaqué en decoration dans un coin de chaque carte (feature/cas d'usage/offre) pour que le motif
   se retrouve jusque dans le detail plutot que de rester cantonne au fond de page. Technique CSS
   pure (mask-image), pas de canvas/JS supplementaire : pas de risque de reproduire le freeze
   documente sur la vague de fond (voir memoire perf-canvas-backdrop-filter-landing). Inset depuis
   le coin (jamais 0) pour rester sous le rayon de bordure (var(--radius): 16px) sans avoir besoin
   de overflow:hidden sur la carte — important pour .plan, dont le badge "Populaire" deborde deja
   du haut de la carte (position:absolute; top:-12px) et serait rogne par un overflow:hidden.
   Couleur = --accent de la carte (deja pose par carte, voir renderLanding()) a faible opacite :
   visible comme texture, jamais assez fort pour gener la lecture du texte au-dessus. */
:root {
  --wave-fragment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M10 110 C30 90 20 60 45 45 C65 33 60 15 95 8' stroke='white' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 115 C40 95 28 65 52 50 C72 38 66 18 100 12' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.75'/%3E%3Cpath d='M30 118 C48 100 36 70 58 55 C76 44 70 22 105 16' stroke='white' stroke-width='1.4' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
}
.landing .feature,
.review-card,
.landing .plan {
  position: relative;
}
.landing .feature::before,
.review-card::before,
.landing .plan::before {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  opacity: 0.16;
  background-color: rgb(var(--accent));
  -webkit-mask-image: var(--wave-fragment);
  mask-image: var(--wave-fragment);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}
/* Coin haut-droit sur les 3 types de carte : l'icone/les etoiles/le badge "Populaire" occupent
   deja respectivement le coin haut-gauche ou le centre du haut, jamais le coin haut-droit. Le
   texte des listes .plan (largeur pleine, aligne a gauche) reste donc lui aussi hors de portee.
   Variante miroir sur les cartes paires pour eviter un motif trop identique carte apres carte
   (impression de "bouts" distincts de la meme vague, pas un tampon repete). */
.landing .feature::before,
.review-card::before,
.landing .plan::before {
  top: 10px;
  right: 10px;
  transform: rotate(180deg);
}
.landing .feature:nth-child(even)::before,
.review-card:nth-child(even)::before,
.landing .plan:nth-child(even)::before {
  transform: rotate(180deg) scaleX(-1);
}
@media (max-width: 480px) {
  .landing .feature::before,
  .review-card::before,
  .landing .plan::before {
    width: 44px;
    height: 44px;
    opacity: 0.13;
  }
}

/* ─── ROI CALCULATOR (landing) ─── */
.roi-calc {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 48px 0 56px;
}
.roi-calc__inputs {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid var(--border);
}
.roi-calc__field label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.roi-calc__field label strong { color: var(--primary-light); }
.roi-calc__field input[type="number"] {
  width: 100%;
  padding: 10px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.roi-calc__field input[type="number"]:focus { outline: none; border-color: var(--primary); }
.roi-calc__field input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}
.roi-calc__result {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(124,92,252,0.08), rgba(124,92,252,0.02));
}
.roi-calc__amount { display: flex; flex-direction: column; gap: 2px; }
.roi-calc__label { font-size: 13px; color: var(--text-secondary); }
.roi-calc__value { font-size: 34px; font-weight: 800; color: var(--primary-light); }
.roi-calc__amount--secondary { margin-top: 4px; margin-bottom: 10px; }
.roi-calc__amount--secondary .roi-calc__value { font-size: 20px; color: var(--text); }
.roi-calc__note {
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 16px;
  max-width: 260px;
}
@media (max-width: 860px) {
  .roi-calc { grid-template-columns: 1fr; }
  .roi-calc__inputs { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 20px; }
  .roi-calc__result { padding: 24px 20px; }
  .roi-calc__value { font-size: 28px; }
}

/* ─── AUTH ─── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.auth-page::before {
  content: "";
  position: absolute;
  top: -40%; left: -20%;
  width: 80%; height: 80%;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  pointer-events: none;
}
.auth-page::after {
  content: "";
  position: absolute;
  bottom: -30%; right: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.auth-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  animation: slideUp 0.5s ease-out;
}
.auth-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 28px; text-align: center; }
.auth-card .logo-text { text-align: center; font-size: 30px; font-weight: 800; margin-bottom: 12px; background: linear-gradient(135deg, var(--primary-light), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── TYPE SELECT (searchable) ─── */
.type-select-group { position: relative; }
.type-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.type-select-wrapper input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: all 0.25s;
}
/* Retour Axel (2026-07-30) : l'icône loupe recouvrait le texte saisi dans ce champ — la règle
   ci-dessus perdait systématiquement contre .form-group input (même spécificité 0-1-1, déclarée
   plus bas dans ce fichier, donc gagnante par ordre de cascade), qui remet padding-left à 16px
   alors que l'icône occupe l'espace jusqu'à ~32px. Cette règle cible directement la classe portée
   par l'input (spécificité 0-2-1) pour gagner dans tous les cas, sans dépendre de l'ordre du
   fichier ni d'un !important. */
.type-select-wrapper input.type-select-input { padding-left: 44px; }
.type-select-wrapper input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.type-select-wrapper input::placeholder { color: var(--text-muted); }
.type-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 40;
  display: none;
}
.type-select-dropdown.open { display: block; }
.type-select-option {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.type-select-option:hover,
.type-select-option.active { background: var(--bg-card-hover); }
.type-select-empty { padding: 10px 16px; font-size: 13px; color: var(--text-muted); }
.type-select-wrapper .search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

/* ─── FORMS ─── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); letter-spacing: 0.2px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: all 0.25s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea { min-height: 80px; resize: vertical; }
.form-group .help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ─── INLINE INPUTS (quick-add, etc.) ─── */
.input {
  padding: 8px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  transition: all 0.2s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.input::placeholder { color: var(--text-muted); }

/* ─── SELECT DROPDOWN CONTRAST ─── */
select { cursor: pointer; appearance: auto; }
select option {
  background: #1a1a2e;
  color: #f1f1f6;
  padding: 6px 10px;
}
@media (prefers-color-scheme: light) {
  select option {
    background: #ffffff;
    color: #1a1a2e;
  }
}
.config-section select {
  min-height: 38px;
  padding: 8px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}
.config-section select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  box-shadow: 0 4px 16px var(--primary-glow);
}
.btn-primary:hover { box-shadow: 0 6px 24px var(--primary-glow); transform: translateY(-1px); }
.btn-green { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: white; }
.btn-green:hover { box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); transform: translateY(-1px); }
.btn-red { background: linear-gradient(135deg, var(--red), #DC2626); color: white; }
.btn-red:hover { box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary-light); background: rgba(124, 92, 252, 0.05); }
.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 16px 36px; font-size: 16px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ─── DASHBOARD ─── */
.dashboard {
  display: flex;
  min-height: calc(100vh - 64px);
  animation: fadeIn 0.4s ease-out;
}
.dashboard .sidebar {
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  flex-shrink: 0;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}
.dashboard .sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s;
  text-decoration: none;
  margin-bottom: 4px;
}
.dashboard .sidebar a:hover { background: var(--glass); color: var(--text); }
.dashboard .sidebar a.active {
  background: rgba(124, 92, 252, 0.1);
  color: var(--primary-light);
  font-weight: 600;
}

/* Menu replié par l'utilisateur (préférence mémorisée, voir toggleSidebar() dans app.js) —
   ne cache jamais les onglets, seulement leur libellé texte : le rail d'icônes reste cliquable.
   Bouton simple icône seule, aligné à droite du menu quand déplié (retour Axel 2026-07-21). */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  margin-left: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.sidebar-toggle:hover { background: var(--bg-card); color: var(--text); }
.dashboard .sidebar.collapsed { width: 68px; padding-left: 8px; padding-right: 8px; }
.dashboard .sidebar.collapsed .sidebar-toggle { margin-left: auto; margin-right: auto; }
.dashboard .sidebar.collapsed .branch-selector,
.dashboard .sidebar.collapsed .tab-label { display: none; }
.dashboard .sidebar.collapsed a { justify-content: center; padding: 12px 8px; }
.tab-icon { flex-shrink: 0; }
.branch-selector {
  padding: 8px 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.branch-selector label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.branch-selector select {
  width: 100%;
  padding: 8px 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.branch-filter-select {
  padding: 8px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.dashboard .main {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
  max-width: 100%;
}

/* ─── STATS ─── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 24px;
  border-radius: var(--radius);
  transition: all 0.3s;
}
.stat-card:hover { border-color: var(--primary-glow); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card h3 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.stat-card .value { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.stat-card .value.pending { color: var(--orange); }
.stat-card .value.validated { color: var(--green); }

/* ─── KPI DASHBOARD SECTORIEL (§3/§4 spec KPI par secteur) ─── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: border-color 0.3s; }
.kpi-card:hover { border-color: var(--primary-glow); }
.kpi-card-lg { grid-column: span 2; }
.kpi-card-sm { padding: 14px; }
.kpi-card-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; }
.kpi-card-value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--primary); }
.kpi-card-sm .kpi-card-value { font-size: 20px; }
.kpi-card-empty { font-size: 14px; color: var(--text-muted); }
.kpi-card-invitation { border-style: dashed; background: transparent; }
.kpi-card-invitation-text { font-size: 13px; color: var(--text-secondary); }
.kpi-list { display: flex; flex-direction: column; gap: 6px; }
.kpi-list-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kpi-list-rank { width: 20px; font-weight: 700; color: var(--text-muted); }
.kpi-list-name { flex: 1; }
.kpi-list-count { font-weight: 600; color: var(--primary); }
.kpi-heatmap { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
.kpi-heatmap-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; min-height: 2px; }
/* §7 : ton sobre (funéraire, urgences médicales) — pas de couleur d'alerte/accent vive */
.tone-sober .kpi-card-value, .tone-sober .kpi-list-count { color: var(--text); }
.tone-sober .kpi-heatmap-bar { background: var(--text-muted); }

/* ─── ORDERS ─── */
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  border-left: 4px solid var(--orange);
  transition: all 0.3s;
}
.order-card:hover { border-color: var(--primary-glow); }
.order-card.status-validated { border-left-color: var(--green); }
.order-card.status-cancelled { border-left-color: var(--red); opacity: 0.7; }
.order-card.new-order { animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
.order-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; }
.order-header .customer { font-weight: 600; font-size: 16px; }
.order-header .time { font-size: 12px; color: var(--text-muted); }
.order-item { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: var(--text-secondary); }
.order-total { font-weight: 700; text-align: right; margin: 12px 0; font-size: 15px; }
.order-notes {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--orange);
  margin-bottom: 12px;
}
.order-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.order-card.status-ready { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow); }
.order-card.status-preparing { border-color: #3b82f6; }
.order-card.status-confirmed { border-color: var(--green); }

/* ─── BADGES ─── */
.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.badge-pending,
.badge-cancelled { background: rgba(239, 68, 68, 0.12); color: var(--red); }
.badge-confirmed,
.badge-validated { background: rgba(16, 185, 129, 0.12); color: var(--green); }
.badge-preparing { background: rgba(59, 130, 246, 0.12); color: #60A5FA; }
.badge-ready { background: rgba(16, 185, 129, 0.2); color: var(--green); font-weight: 700; }
.badge-completed { background: rgba(107, 114, 128, 0.12); color: var(--text-muted); }

/* ─── CONFIG ─── */
.config-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
  transition: border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.config-section:hover { border-color: var(--primary-glow); }
.config-section h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.config-section .section-body { flex: 1; }
.config-section .section-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.config-section .section-footer .btn { margin-left: auto; }
/* ─── AIDE / FAQ ─── */
.faq-group { margin-bottom: 24px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__title { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.faq-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-item summary {
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 18px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; margin-left: 12px; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item__answer { padding: 4px 16px 16px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.faq-item__answer strong { color: var(--text); }
.faq-item__answer a { color: var(--primary-light); }
.landing-faq { max-width: 720px; margin: 0 auto 60px; }

/* Carte réseau dépliable (siège + vue lecture seule franchisé) — même logique que .faq-item
   ci-dessus mais réutilisée hors landing (dashboard commerçant/réseau). */
.network-catalog-toggle summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.network-catalog-toggle summary::-webkit-details-marker { display: none; }
.network-catalog-toggle summary h3 { margin: 0; }
.network-catalog-toggle-icon { font-size: 18px; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; margin-left: 12px; }
.network-catalog-toggle[open] .network-catalog-toggle-icon { transform: rotate(45deg); }
.network-catalog-toggle[open] summary { margin-bottom: 14px; }

/* Guide d'onboarding interactif (retour Axel 2026-07-24) — "curseur" qui surligne le champ à
   remplir et affiche une bulle d'instruction juste à côté, en plus de la checklist persistante
   (widget #onboarding-progress-container). Se déclenche automatiquement dès la première connexion
   tant que la configuration n'est pas terminée, voir maybeStartOnboardingTour() dans app.js. */
.onboarding-tour-highlight {
  position: relative;
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px;
  border-radius: 6px;
  animation: onboarding-tour-pulse 1.6s ease-in-out infinite;
  scroll-margin: 120px;
}
@keyframes onboarding-tour-pulse {
  0%, 100% { outline-color: var(--primary); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.35); }
  50% { outline-color: var(--primary-light, #9f7aea); box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}
.onboarding-tour-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  background: var(--primary);
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 13px;
  line-height: 1.5;
  animation: onboarding-tour-fade-in 0.25s ease-out;
}
.onboarding-tour-tooltip::before {
  content: "👉";
  font-size: 20px;
  margin-right: 6px;
}
.onboarding-tour-tooltip .tour-close {
  position: absolute;
  top: 6px;
  right: 10px;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  font-size: 12px;
}
.onboarding-tour-tooltip .tour-close:hover { color: #fff; }
@keyframes onboarding-tour-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .faq-item summary { padding: 12px 14px; font-size: 13px; }
  .faq-item__answer { padding: 4px 14px 14px; }
}
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apt-slot-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.apt-slot-row > * { min-width: 0; }
.menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.menu-item:focus-within { border-color: var(--primary); }
.menu-item input {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  transition: all 0.2s;
}
.menu-item input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-card);
}
.menu-item .btn { flex-shrink: 0; }

/* ─── SUBSCRIPTION ─── */
.subscription-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  transition: all 0.3s;
}
.subscription-card:hover { border-color: var(--primary-glow); box-shadow: var(--shadow); }
.subscription-card .plan-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.subscription-card .plan-price { font-size: 40px; font-weight: 800; background: linear-gradient(135deg, var(--primary-light), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subscription-card .plan-price span { font-size: 16px; font-weight: 400; -webkit-text-fill-color: var(--text-secondary); }

/* ─── EMPTY STATE ─── */
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text); }

/* ─── TOAST ─── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.3);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  font-weight: 500;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ─── ANIMATIONS ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── HAMBURGER MENU ─── */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  z-index: 101;
  transition: opacity 0.2s;
}
.hamburger-btn:hover { opacity: 0.7; }

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0,0,0,0.5);
}
.mobile-menu-overlay.open { display: block; }

.mobile-menu {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  z-index: 99;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu .mobile-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu .mobile-user .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: white;
  flex-shrink: 0;
}
.mobile-menu .mobile-user span {
  font-weight: 600;
  font-size: 15px;
}
.mobile-menu .branch-selector {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s;
  text-decoration: none;
}
.mobile-menu a:hover { background: var(--glass); color: var(--text); }
.mobile-menu a.active {
  background: rgba(124, 92, 252, 0.1);
  color: var(--primary-light);
  font-weight: 600;
}
.mobile-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

@media (max-width: 900px) {
  .header nav { display: none; }
  .hamburger-btn { display: block; }
  .dashboard .sidebar { display: none; }
  .landing-header nav { display: none; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .landing { padding: 0 16px 32px; }
  .landing .hero { padding: 48px 0 40px; }
  .landing .hero h1 { font-size: 30px; letter-spacing: -1px; }
  /* Les boutons du .cta passent en pleine largeur empilée sur mobile (règle plus bas) et
     prennent donc bien plus de hauteur que la version desktop côte à côte — le lien "Testez
     l'IA" juste en dessous n'avait que 20px d'écart (pensé pour le layout desktop), ce qui le
     collait visuellement aux boutons Commencer/Se connecter (remonté par Axel le 2026-07-14,
     iPhone 12). */
  .hero-demo-call { margin-top: 28px; }
  .hero-guarantee { margin-top: 14px; font-size: 12.5px; }
  .landing .hero p { font-size: 16px; }
  .landing .hero .cta { flex-direction: column; align-items: stretch; }
  .landing .hero .cta .btn { width: 100%; }
  .landing-header { padding: 14px 0; margin-bottom: 24px; }
  .landing .features { grid-template-columns: repeat(2, 1fr); margin: 48px 0; gap: 14px; }
  .landing .feature { padding: 24px 20px; }
  .landing .feature .icon { font-size: 30px; margin-bottom: 12px; }
  .landing .feature h3 { font-size: 16px; }
  .landing h2.section-title { font-size: 22px; }
  .landing .section-sub { font-size: 14px; margin-bottom: 32px; }
  .landing .plans { grid-template-columns: 1fr; margin: 40px 0; }
  .landing .plan { padding: 32px 24px; }
  .landing .plan .price { font-size: 36px; }
  .reviews { grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 32px 0 40px; }
  .review-card { padding: 20px 18px; }
  .landing-footer { margin-top: 48px; padding-top: 28px; }
  .config-grid { grid-template-columns: 1fr; }
  .apt-grid { grid-template-columns: 1fr; }
  .apt-slot-row > * { flex: 1; }
  .auth-card { padding: 32px 24px; }
  .header { padding: 0 16px; height: 56px; }
  .mobile-menu { top: 56px; }
  .dashboard .main { padding: 16px; }
  .config-section { padding: 20px 16px; }
  .order-card { padding: 16px; }
  .subscription-card { padding: 28px 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 18px 16px; }
  .stat-card .value { font-size: 24px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card-value { font-size: 22px; }
}
@media (max-width: 480px) {
  .landing { padding: 0 12px 24px; }
  .landing .hero { padding: 36px 0 32px; }
  .landing .hero h1 { font-size: 26px; }
  .landing .hero p { font-size: 15px; }
  .landing-header { padding: 12px 0; margin-bottom: 16px; }
  .landing .features { grid-template-columns: 1fr; margin: 36px 0; gap: 12px; }
  .landing .feature { padding: 20px 16px; border-radius: 12px; }
  .landing .feature .icon { font-size: 26px; }
  .landing h2.section-title { font-size: 20px; }
  .landing .plan { padding: 28px 20px; }
  .landing .plan .price { font-size: 32px; }
  .reviews { grid-template-columns: 1fr; gap: 12px; }
  .review-card { padding: 18px 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 12px; }
  .stat-card .value { font-size: 22px; }
  .stat-card h3 { font-size: 11px; }
  .dashboard .main { padding: 12px; }
  .config-section { padding: 16px 12px; }
  .config-grid { gap: 12px; }
  .auth-card { padding: 28px 20px; }
  .auth-card h2 { font-size: 20px; }
  .modal-box { padding: 20px 16px; }
  .modal-box h3 { font-size: 16px; }
  .order-card { padding: 14px 12px; }
  .btn-lg { padding: 14px 24px; font-size: 15px; }
  .header { padding: 0 12px; height: 52px; }
  .notif-panel { right: 4px; left: 4px; }
}
@media (max-width: 360px) {
  .landing .hero h1 { font-size: 22px; }
  .landing .hero p { font-size: 14px; }
  .landing .features { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card .value { font-size: 20px; }
}

/* ─── MOBILE TOUCH IMPROVEMENTS ─── */
@media (hover: none) and (pointer: coarse) {
  .btn, .order-card, .stat-card, .feature, .review-card, .plan, .landing-header nav a,
  .sidebar a, .config-section, .menu-item { cursor: default; }
  .btn:active { transform: scale(0.97); }
  .feature:active, .stat-card:active, .order-card:active { transform: translateY(-2px); }
  input, select, textarea, button, a { font-size: 16px; }
}
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; }
}

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
  overflow-y: auto;
  padding: 20px;
}
.modal-box {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%; max-width: 440px;
  max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow);
  animation: slideUp .25s ease;
  margin: auto;
}
.modal-box h3 { margin-bottom: 16px; }
.modal-box .form-group { margin-bottom: 14px; }
.modal-box .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.modal-box .form-group input,
.modal-box .form-group select {
  width: 100%; padding: 10px 14px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  color: var(--text); transition: all 0.2s;
}
.modal-box .form-group input:focus,
.modal-box .form-group select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ─── STAT INFO ICON ─── */
.stat-card { position: relative; }
.stat-info-icon {
  position: absolute; top: 10px; right: 12px;
  cursor: pointer; font-size: 16px; opacity: 0.5;
  transition: opacity 0.2s; z-index: 2;
  color: var(--text-muted);
}
.stat-info-icon:hover { opacity: 1; color: var(--primary-light); }

/* ─── STAT INFO MODAL ─── */
.stat-info-modal {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s ease;
}
.stat-info-box {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  width: 90%; max-width: 380px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  animation: slideUp .25s ease;
}
.stat-info-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer;
  padding: 4px; line-height: 1;
  transition: color 0.2s;
}
.stat-info-close:hover { color: var(--text); }

/* ─── NOTIFICATION BELL ─── */
.notif-bell {
  position: relative;
  cursor: pointer;
  font-size: 18px;
  padding: 6px;
  transition: transform 0.2s;
}
.notif-bell:hover { transform: scale(1.15); }
.notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

/* ─── NOTIFICATION PANEL ─── */
.notif-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  width: 380px;
  max-height: 500px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
}
.notif-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notif-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
}
.notif-panel-close:hover { color: var(--text); }
.notif-panel-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.notif-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.notif-item {
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--glass-border);
}
.notif-item:hover { background: var(--glass); }
.notif-item.unread { background: rgba(124, 92, 252, 0.06); }
.notif-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.notif-item-msg {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.notif-item-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.notif-item-action {
  font-size: 11px;
  color: var(--primary-light);
  margin-top: 4px;
  font-weight: 600;
}
.notif-item.has-action {
  border-left: 3px solid var(--primary);
}
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.notif-overlay.open { display: block; }

/* ─── TOGGLE ROW ─── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.toggle-row input[type="checkbox"].toggle {
  appearance: none;
  width: 44px;
  height: 24px;
  background: var(--border);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
  margin: 0;
}
.toggle-row input[type="checkbox"].toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s;
}
.toggle-row input[type="checkbox"].toggle:checked {
  background: var(--primary);
}
.toggle-row input[type="checkbox"].toggle:checked::after {
  transform: translateX(20px);
  background: #fff;
}

@media (max-width: 600px) {
  .notif-panel {
    right: 8px;
    left: 8px;
    width: auto;
    top: 56px;
    max-height: calc(100vh - 80px);
  }
}

/* ─── APPOINTMENTS BENTO GRID ─── */
.apt-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.apt-bento-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color .3s, box-shadow .3s;
}
.apt-bento-card:hover {
  border-color: var(--primary-glow);
  box-shadow: 0 4px 24px rgba(124,92,252,.08);
}
.apt-bento-card--wide { grid-column: 1 / -1; }
.apt-bento-card-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.apt-bento-card-header svg {
  width: 20px; height: 20px;
  stroke: var(--primary-light);
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.apt-bento-card-header--toggle {
  cursor: pointer;
  user-select: none;
}
.apt-bento-card-header--toggle .apt-chevron {
  margin-left: auto;
  display: flex;
  transition: transform .2s;
}
.apt-bento-card-header--toggle .apt-chevron svg {
  width: 16px; height: 16px;
}
.apt-bento-card-header--toggle.apt-collapsed .apt-chevron {
  transform: rotate(-90deg);
}
.apt-slots-config.apt-collapsed { display: none; }
.apt-card-body.apt-collapsed { display: none; }
.apt-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.apt-date-filter {
  padding: 6px 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px; font-family: inherit;
  color: var(--text);
  outline: none;
  transition: all .2s;
}
.apt-date-filter:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.apt-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 11px;
  margin-left: auto;
}
/* Week Grid */
.apt-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.apt-week-day {
  text-align: center;
  padding: 12px 6px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: default;
  transition: all .2s;
}
.apt-week-day:hover {
  border-color: var(--primary-glow);
  background: var(--bg-card-hover);
}
.apt-week-day--today {
  border-color: var(--primary);
  background: rgba(124,92,252,.1);
}
.apt-week-day__name {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px;
}
.apt-week-day__count {
  font-size: 22px; font-weight: 700; color: var(--text);
}
.apt-week-day--today .apt-week-day__count { color: var(--primary-light); }
/* Link bar */
.apt-link-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.apt-link-bar code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px; padding: 6px 10px;
  background: var(--bg); border-radius: 4px;
  word-break: break-all;
  color: var(--text-secondary);
}
.apt-link-bar .apt-btn-icon { color: var(--text-muted); }
.apt-link-bar .apt-btn-icon:hover { color: var(--primary-light); border-color: var(--primary-glow); }
/* Form */
.apt-form { display: flex; flex-direction: column; gap: 10px; }
.apt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apt-form input, .apt-form select {
  padding: 10px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit;
  color: var(--text);
  transition: all .2s; outline: none;
}
.apt-form input:focus, .apt-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.apt-form input::placeholder, .apt-form select::placeholder { color: var(--text-muted); }
.apt-form .btn { margin-top: 4px; }
.apt-bento .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.apt-bento .btn { gap: 4px; }
.apt-bento .btn svg { width: 14px; height: 14px; }
.apt-form .btn-primary.btn-sm { padding: 8px 14px; font-size: 13px; }
/* Slots */
.apt-slots-config { display: flex; flex-direction: column; gap: 10px; }
.apt-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.apt-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.apt-toggle input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px; height: 16px; cursor: pointer;
}
.apt-slots-actions { display: flex; gap: 8px; margin-top: 4px; }
.apt-slot-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px; transition: border-color .2s;
}
.apt-slot-item:hover { border-color: var(--primary-glow); }
.apt-slot-item select, .apt-slot-item input[type="time"] {
  padding: 6px 8px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-family: inherit;
  color: var(--text); outline: none; transition: border-color .2s;
}
.apt-slot-item select:focus, .apt-slot-item input[type="time"]:focus { border-color: var(--primary); }
.apt-slot-item select { min-width: 70px; }
.apt-slot-item input[type="time"] { min-width: 90px; }
.apt-slot-arrow { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.apt-slot-remove {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-muted);
  cursor: pointer; transition: all .2s;
  margin-left: auto; flex-shrink: 0;
}
.apt-slot-remove:hover {
  background: rgba(239,68,68,.15);
  border-color: var(--red); color: var(--red);
}
.apt-slot-remove svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Appointment List */
.apt-list { display: flex; flex-direction: column; gap: 8px; }
.apt-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.apt-item:hover { border-color: var(--primary-glow); background: var(--bg-card-hover); }
.apt-item--cancelled { opacity: .6; }
.apt-item--cancelled:hover { opacity: .8; }
.apt-item--completed { border-left: 3px solid var(--green); }
.apt-item--confirmed { border-left: 3px solid var(--primary); }
.apt-item--cancelled { border-left: 3px solid var(--red); }
.apt-item__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.apt-item--cancelled .apt-item__avatar { background: var(--text-muted); }
.apt-item__body { flex: 1; min-width: 0; }
.apt-item__name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.apt-item__meta {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.apt-dot { color: var(--text-muted); opacity: .4; }
.apt-item__reason {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}
.apt-item__status {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;
}
.apt-item__source { font-size: 10px; color: var(--text-muted); }
.apt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.apt-badge--confirmed { background: rgba(16,185,129,.12); color: var(--green); border: 1px solid rgba(16,185,129,.25); }
.apt-badge--completed { background: rgba(56,189,248,.12); color: var(--blue); border: 1px solid rgba(56,189,248,.25); }
.apt-badge--cancelled { background: rgba(239,68,68,.12); color: var(--red); border: 1px solid rgba(239,68,68,.25); }
.apt-item__actions { display: flex; gap: 6px; flex-shrink: 0; }
.apt-btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  cursor: pointer; transition: all .2s; padding: 0;
}
.apt-btn-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apt-btn-icon--green { color: var(--green); }
.apt-btn-icon--green:hover { background: rgba(16,185,129,.15); border-color: var(--green); }
.apt-btn-icon--red { color: var(--red); }
.apt-btn-icon--red:hover { background: rgba(239,68,68,.15); border-color: var(--red); }
.apt-empty { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 14px; }
/* Notes row inside apt-item */
.apt-item__notes { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* Notes input inline */
.apt-notes-inline {
  width: 100%; font-size: 11px; padding: 4px 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-family: inherit;
  outline: none; transition: border-color .2s;
}
.apt-notes-inline:focus { border-color: var(--primary); }
/* History button */
.apt-btn-history {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  cursor: pointer; transition: all .2s; padding: 0;
  color: var(--text-muted);
}
.apt-btn-history:hover { color: var(--primary-light); border-color: var(--primary-glow); }
.apt-btn-history svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Responsive */
@media (max-width: 860px) {
  .apt-bento { grid-template-columns: 1fr; }
  .apt-form-row { grid-template-columns: 1fr; }
  .apt-item { flex-wrap: wrap; }
  .apt-item__status { flex-direction: row; align-items: center; }
  .apt-item__actions { width: 100%; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
  .apt-item__notes { width: 100%; order: 10; }
  .apt-item__reason { max-width: 100%; white-space: normal; }
  /* Cibles tactiles portées à ~40px (sous le minimum recommandé de 28px en desktop) */
  .apt-btn-icon { width: 40px; height: 40px; }
  .apt-btn-history { width: 40px; height: 40px; }
  /* 16px minimum pour éviter le zoom auto au focus sur iOS Safari */
  .apt-notes-inline { font-size: 16px; padding: 8px 10px; }
}
@media (max-width: 480px) {
  .apt-bento-card { padding: 16px; }
  .apt-week-grid { gap: 4px; }
  .apt-week-day { padding: 8px 4px; }
  .apt-week-day__count { font-size: 18px; }
  .apt-link-bar { flex-direction: column; align-items: stretch; }
  .apt-link-bar code { font-size: 11px; }
}