/* CRM Promethiq · feuille de style (direction artistique : voir DESIGN.md) */

/* ------------------------------------------------------------ Thème clair */
:root {
  color-scheme: light;
  --fond: #f7f3fb;
  --fond-degrade:
    radial-gradient(60vw 60vw at 0% 0%, #ffe3d3 0%, transparent 55%),
    radial-gradient(55vw 55vw at 100% 0%, #dcecff 0%, transparent 55%),
    radial-gradient(60vw 60vw at 100% 100%, #efe1ff 0%, transparent 60%),
    radial-gradient(50vw 50vw at 0% 100%, #ffdcec 0%, transparent 55%),
    #f7f3fb;
  --carte: rgba(255, 255, 255, .78);
  --carte-pleine: #ffffff;
  --carte-2: rgba(245, 241, 252, .85);
  --texte: #1b1631;
  --texte-doux: #6a6583;
  --bord: rgba(27, 22, 49, .08);
  --bord-fort: rgba(27, 22, 49, .14);
  --bord-champ: #8a859c;
  --primaire: #6b46f0;
  --primaire-survol: #5a35e0;
  --primaire-doux: #efe9ff;
  --sur-primaire: #ffffff;
  --degrade-primaire: linear-gradient(135deg, #7350f4 0%, #6338ee 45%, #4b2fc4 100%);
  --encre: #17132b;
  --sur-encre: #ffffff;
  --danger: #c92a30;
  --sur-danger: #ffffff;
  --violet: #b15cf5;

  --succes-fond: #e4f7ec; --succes-texte: #137a3f;
  --info-fond: #ece8ff;   --info-texte: #5836d9;
  --erreur-fond: #fdebec; --erreur-texte: #b4232a;
  --gris-fond: rgba(27, 22, 49, .06); --gris-texte: #4b4663;
  --orange-fond: #fff1de; --orange-texte: #975100;

  --rayon: 20px;
  --rayon-moyen: 14px;
  --ombre: 0 1px 2px rgba(60, 40, 140, .04), 0 12px 32px rgba(60, 40, 140, .08);
  --ombre-forte: 0 2px 6px rgba(60, 40, 140, .06), 0 22px 48px rgba(60, 40, 140, .16);
  --flou: saturate(160%) blur(18px);
  --largeur-barre: 248px;
  --ressort: cubic-bezier(.2, .8, .2, 1);
  --transition: 180ms var(--ressort);
}

/* ------------------------------------------------------------ Thème sombre */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #0d0a18;
  --fond-degrade:
    radial-gradient(55vw 55vw at 0% 0%, rgba(124, 92, 250, .22) 0%, transparent 60%),
    radial-gradient(50vw 50vw at 100% 10%, rgba(64, 120, 255, .14) 0%, transparent 60%),
    radial-gradient(60vw 60vw at 100% 100%, rgba(214, 60, 160, .16) 0%, transparent 60%),
    radial-gradient(45vw 45vw at 0% 100%, rgba(255, 120, 90, .08) 0%, transparent 60%),
    #0d0a18;
  --carte: rgba(26, 21, 44, .72);
  --carte-pleine: #1a152c;
  --carte-2: rgba(38, 32, 62, .72);
  --texte: #f3f1fb;
  --texte-doux: #aaa4c6;
  --bord: rgba(255, 255, 255, .08);
  --bord-fort: rgba(255, 255, 255, .16);
  --bord-champ: #8f89ad;
  --primaire: #9b84ff;
  --primaire-survol: #b6a5ff;
  --primaire-doux: rgba(155, 132, 255, .16);
  --sur-primaire: #120d26;
  --encre: #f3f1fb;
  --sur-encre: #17132b;
  --danger: #ff6b70;
  --sur-danger: #2a0709;
  --violet: #d08bff;

  --succes-fond: rgba(52, 199, 110, .14); --succes-texte: #7fe0a6;
  --info-fond: rgba(155, 132, 255, .16); --info-texte: #c7bbff;
  --erreur-fond: rgba(255, 107, 112, .14); --erreur-texte: #ffabae;
  --gris-fond: rgba(255, 255, 255, .07); --gris-texte: #cfcae6;
  --orange-fond: rgba(255, 170, 60, .14); --orange-texte: #ffcb85;

  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .28);
  --ombre-forte: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 48px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texte); line-height: 1.55;
  background: var(--fond-degrade); background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primaire); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primaire-survol); }
h1 { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
     font-size: 1.75rem; line-height: 1.2; margin: 0 0 .2rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 1.4rem 0 .7rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; font-weight: 650; }
.carte > h2:first-child { margin-top: 0; }
::selection { background: var(--primaire-doux); }
:focus-visible { outline: 2.5px solid var(--primaire); outline-offset: 2px; }
[hidden] { display: none !important; }
.icone { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.visuellement-cache:focus { position: fixed !important; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto;
  clip: auto; padding: .7rem 1.1rem; background: var(--carte-pleine); color: var(--texte); border-radius: 12px; box-shadow: var(--ombre-forte); }
code { font-family: "Cascadia Code", Consolas, monospace; font-size: .86em; padding: .05rem .4rem;
       border-radius: 6px; background: var(--gris-fond); }

/* ------------------------------------------------------------ Mouvement */
@view-transition { navigation: auto; }
.barre { view-transition-name: barre-laterale; }
.haut { view-transition-name: barre-haut; }
::view-transition-old(root) { animation: 120ms ease-out both page-sortie; }
::view-transition-new(root) { animation: 260ms var(--ressort) both page-entree; }
@keyframes page-sortie { to { opacity: 0; } }
@keyframes page-entree { from { opacity: 0; transform: translateY(8px); } }
.contenu > * { animation: apparition .5s var(--ressort) both; }
.contenu > :nth-child(2) { animation-delay: 40ms; }
.contenu > :nth-child(3) { animation-delay: 80ms; }
.contenu > :nth-child(4) { animation-delay: 120ms; }
.contenu > :nth-child(n+5) { animation-delay: 160ms; }
@keyframes apparition { from { opacity: 0; transform: translateY(10px) scale(.995); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; transition: none !important;
  }
  .graphique .serie .courbe { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------ Verre */
.carte, .chiffre-cle, .tableau, .barre, .recherche-bouton, .panneau-droit, .vide, .toast {
  background: var(--carte);
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  border: 1px solid var(--bord);
}

/* ------------------------------------------------------------ Structure */
.app { display: flex; min-height: 100vh; }

.barre {
  position: sticky; top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px;
  width: var(--largeur-barre); flex-shrink: 0; display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem .8rem .9rem; border-radius: 24px; box-shadow: var(--ombre);
  overflow-y: auto; overflow-x: hidden; z-index: 30;
  transition: width 260ms var(--ressort);
}
.marque {
  display: flex; align-items: center; gap: .75rem; padding: .2rem .5rem 1.1rem;
  color: var(--texte); font-weight: 750; font-size: 1.05rem; letter-spacing: -.01em;
}
.marque:hover { color: var(--texte); }
.marque-logo {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  background: var(--degrade-primaire); color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 6px 16px rgba(124, 92, 250, .35);
}
.marque-image { background: #fff; box-shadow: 0 4px 14px rgba(60, 40, 140, .14); overflow: hidden; }
.marque-image img { width: 78%; height: 78%; object-fit: contain; }
.marque-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titre { font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
             color: var(--texte-doux); padding: .9rem .75rem .35rem; white-space: nowrap; }
.nav-lien {
  position: relative; display: flex; align-items: center; gap: .8rem;
  padding: .6rem .75rem; border-radius: 12px; min-height: 42px;
  color: var(--texte-doux); font-weight: 560; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav-lien:hover { background: var(--gris-fond); color: var(--texte); }
.nav-lien.actif { background: var(--primaire-doux); color: var(--primaire); font-weight: 650; }
.nav-lien.actif::before {
  content: ""; position: absolute; left: -.8rem; top: 22%; bottom: 22%; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--primaire);
}
.nav-pastille {
  margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--danger); color: var(--sur-danger);
  font-size: .72rem; font-weight: 750;
}
.barre-pied { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: .6rem; border-top: 1px solid var(--bord); }
.bouton-replier { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left; }

/* Barre repliée : uniquement les icônes */
.barre-repliee { --largeur-barre: 76px; }
.barre-repliee .marque-nom, .barre-repliee .nav-lien span:not(.nav-pastille),
.barre-repliee .nav-titre { display: none; }
.barre-repliee .nav-lien { justify-content: center; padding: .6rem; }
.barre-repliee .nav-pastille { position: absolute; top: 3px; right: 3px; min-width: 1.05rem; height: 1.05rem; font-size: .62rem; }
.barre-repliee .marque { justify-content: center; padding-inline: 0; }
.barre-repliee .bouton-replier .icone { transform: scaleX(-1); }

.zone-principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.haut {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .7rem;
  padding: 1rem clamp(1rem, 2.4vw, 2rem) .6rem;
}
.recherche-bouton {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: .6rem;
  min-height: 46px; padding: 0 .6rem 0 1rem; border-radius: 999px; cursor: text;
  color: var(--texte-doux); font: inherit; box-shadow: var(--ombre);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.recherche-bouton:hover { border-color: var(--bord-fort); }
.recherche-bouton span { flex: 1; text-align: left; }
kbd {
  font: 600 .72rem/1 "Segoe UI", sans-serif; padding: .3rem .45rem; border-radius: 7px;
  background: var(--gris-fond); color: var(--texte-doux); border: 1px solid var(--bord);
}
.outils-haut { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.bouton-icone {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--carte); border: 1px solid var(--bord); color: var(--texte-doux); cursor: pointer;
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); box-shadow: var(--ombre);
  transition: transform var(--transition), color var(--transition);
}
.bouton-icone:hover { transform: translateY(-2px); color: var(--primaire); }
.pastille {
  position: absolute; top: -3px; right: -3px; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--danger); color: var(--sur-danger);
  font-size: .68rem; font-weight: 750; display: grid; place-items: center; border: 2px solid var(--carte-pleine);
}
:root[data-theme="sombre"] .theme-clair-seul, :root:not([data-theme="sombre"]) .theme-sombre-seul { display: none; }
.profil { display: flex; align-items: center; gap: .6rem; color: var(--texte); padding: .25rem .8rem .25rem .25rem;
          border-radius: 999px; background: var(--carte); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.profil:hover { color: var(--texte); }
.avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--degrade-primaire); color: #fff; font-weight: 750; font-size: .9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.avatar-grand { width: 56px; height: 56px; font-size: 1.15rem; }
.avatar-petit { width: 34px; height: 34px; font-size: .78rem; }
.profil-texte { display: flex; flex-direction: column; line-height: 1.2; }
.profil-texte strong { font-size: .88rem; }
.profil-texte small { color: var(--texte-doux); font-size: .74rem; }
.bouton-menu { display: none; }
.voile { position: fixed; inset: 0; background: rgba(10, 6, 25, .4); z-index: 25; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.contenu { width: 100%; max-width: 1440px; margin: 0 auto; padding: .8rem clamp(1rem, 2.4vw, 2rem) 4rem; }

/* ------------------------------------------------------------ Titres */
.titre-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.sous-titre { margin: 0; color: var(--texte-doux); font-size: .98rem; }
.fil { margin: 0 0 .6rem; font-size: .92rem; }
.fil a { font-weight: 600; color: var(--texte-doux); }
.fil a:hover { color: var(--primaire); }
.compteur {
  display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.5rem; padding: 0 .5rem;
  border-radius: 999px; background: var(--gris-fond); color: var(--gris-texte);
  font-size: .78rem; font-weight: 650; vertical-align: middle;
}

/* ------------------------------------------------------------ Cartes */
.carte { border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.4rem; margin-bottom: 1.1rem; }
.carte-lien { transition: transform var(--transition), box-shadow var(--transition); }
.carte-lien:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.aide { color: var(--texte-doux); font-size: .9rem; }
.vide { text-align: center; padding: 3rem 1rem; border-radius: var(--rayon); border-style: dashed; color: var(--texte-doux); }
.vide-petit { padding: 1rem 0; color: var(--texte-doux); text-align: center; font-size: .94rem; }
.chemin { font-family: "Cascadia Code", Consolas, monospace; font-size: .86rem; background: var(--gris-fond);
          padding: .5rem .75rem; border-radius: 10px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1.2rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--primaire); color: var(--sur-primaire);
  font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primaire) 28%, transparent);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
}
.bouton:hover { background: var(--primaire-survol); color: var(--sur-primaire); transform: translateY(-1px);
                box-shadow: 0 10px 24px color-mix(in srgb, var(--primaire) 34%, transparent); }
.bouton:active { transform: translateY(0) scale(.98); }
.bouton .icone { width: 1.1em; height: 1.1em; }
.bouton.secondaire { background: var(--carte); color: var(--texte); border-color: var(--bord-fort); box-shadow: none;
                     -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
.bouton.secondaire:hover { border-color: var(--primaire); color: var(--primaire); background: var(--primaire-doux); }
.bouton.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); box-shadow: none; }
.bouton.danger:hover { background: var(--danger); color: var(--sur-danger); }
.bouton-encre { background: var(--encre); color: var(--sur-encre); box-shadow: 0 8px 20px rgba(23, 19, 43, .22); }
.bouton-encre:hover { background: var(--encre); color: var(--sur-encre); filter: brightness(1.15); }
.bouton-succes { background: var(--succes-texte); color: #fff; box-shadow: none; }
.bouton-succes:hover { background: var(--succes-texte); color: #fff; filter: brightness(1.1); }
:root[data-theme="sombre"] .bouton-succes { color: #06240f; }
.bouton-ia { background: var(--degrade-primaire); }
.bouton-ia:hover { background: var(--degrade-primaire); filter: brightness(1.08); }
.bouton-petit { min-height: 36px; padding: .3rem .9rem; font-size: .86rem; }
.bouton[disabled] { opacity: .55; cursor: wait; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.2rem; }
.actions form, form.en-ligne { margin: 0; display: inline-flex; }
.lien-discret { color: var(--texte-doux); font-size: .92rem; }

/* ------------------------------------------------------------ Messages (toasts) */
.alerte { padding: .85rem 1.1rem; margin-bottom: 1.1rem; border-radius: var(--rayon-moyen); font-weight: 560; }
.alerte-succes { background: var(--succes-fond); color: var(--succes-texte); }
.alerte-info { background: var(--info-fond); color: var(--info-texte); }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.toasts { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .6rem; width: min(400px, calc(100vw - 2rem)); }
.toast {
  display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .9rem .85rem 1rem;
  border-radius: 16px; box-shadow: var(--ombre-forte); font-size: .94rem; font-weight: 560;
  background: var(--carte-pleine); animation: toast-entree .35s var(--ressort) both;
}
.toast.sortie { animation: toast-sortie .25s ease-in both; }
.toast-pastille { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.toast-succes .toast-pastille { background: var(--succes-fond); color: var(--succes-texte); }
.toast-info .toast-pastille { background: var(--info-fond); color: var(--info-texte); }
.toast-erreur .toast-pastille { background: var(--erreur-fond); color: var(--erreur-texte); }
.toast p { margin: .2rem 0 0; flex: 1; }
.toast button { background: none; border: 0; color: var(--texte-doux); cursor: pointer; padding: .2rem; border-radius: 8px; }
@keyframes toast-entree { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes toast-sortie { to { opacity: 0; transform: translateX(16px); } }

/* ------------------------------------------------------------ Pastilles de statut */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .7rem; border-radius: 999px;
         font-size: .8rem; font-weight: 650; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-grand { font-size: .92rem; padding: .32rem .95rem; }
.badge-prospect, .badge-devis, .badge-moyenne { background: var(--orange-fond); color: var(--orange-texte); }
.badge-actif, .badge-livre, .badge-payee { background: var(--succes-fond); color: var(--succes-texte); }
.badge-termine, .badge-basse { background: var(--gris-fond); color: var(--gris-texte); }
.badge-en_cours, .badge-envoyee { background: var(--info-fond); color: var(--info-texte); }
.badge-annule, .badge-annulee { background: var(--gris-fond); color: var(--gris-texte); text-decoration: line-through; }
.badge-en_retard, .badge-haute { background: var(--erreur-fond); color: var(--erreur-texte); }
/* Statuts des posts (Marketing) */
.badge-pub-idee { background: var(--gris-fond); color: var(--gris-texte); }
.badge-pub-a_valider { background: var(--orange-fond); color: var(--orange-texte); }
.badge-pub-valide { background: var(--info-fond); color: var(--info-texte); }
.badge-pub-publie { background: var(--succes-fond); color: var(--succes-texte); }
.badge-pub-annule { background: var(--gris-fond); color: var(--gris-texte); text-decoration: line-through; }

/* ------------------------------------------------------------ Calendrier éditorial */
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.calendrier .entete-jour { font-size: .8rem; font-weight: 650; color: var(--texte-doux); text-align: center; padding: .2rem 0; }
.case-jour { min-height: 7.5rem; padding: .5rem; border-radius: 14px; background: var(--carte); border: 1px solid var(--bord);
             display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.case-jour.hors-mois { opacity: .5; }
.case-jour.aujourdhui { border-color: var(--primaire); box-shadow: inset 0 0 0 1px var(--primaire); }
.case-jour .numero { display: flex; justify-content: space-between; align-items: center; font-weight: 650; font-size: .9rem; }
.case-jour .numero a { text-decoration: none; color: var(--texte-doux); font-size: 1.1rem; min-width: 32px; text-align: center; }
.puce-post { display: block; padding: .3rem .5rem; border-radius: 10px; font-size: .82rem; line-height: 1.3; text-decoration: none;
             color: var(--texte); background: var(--carte-2); border-left: 3px solid var(--bord-fort); overflow-wrap: anywhere; }
.puce-post.pub-a_valider { border-left-color: var(--orange-texte); }
.puce-post.pub-valide { border-left-color: var(--info-texte); }
.puce-post.pub-publie { border-left-color: var(--succes-texte); }
.puce-post.pub-annule { text-decoration: line-through; opacity: .7; }
.puce-post small { display: block; color: var(--texte-doux); }
.vue-semaine .case-jour { min-height: 14rem; }
/* Agenda : un liseré par type, ce qui est fait est atténué */
.puce-post.agenda-rdv { border-left-color: var(--primaire); }
.puce-post.agenda-tache { border-left-color: var(--info-texte); }
.puce-post.agenda-post { border-left-color: var(--succes-texte); }
.puce-post.agenda-relance { border-left-color: var(--orange-texte); }
.puce-post.agenda-echeance { border-left-color: var(--danger); }
.puce-post.est-fait, .ligne-agenda.est-fait .ligne-titre { opacity: .6; }
.ligne-agenda.est-fait .lien-principal { text-decoration: line-through; }
.case-jour .numero a.lien-jour { color: var(--texte); font-size: .9rem; min-width: 0; }
.form-publie { display: flex; gap: .4rem; flex-wrap: wrap; }
.form-publie input[type="url"] { width: 15rem; max-width: 100%; }
.texte-post { margin-top: .4rem; }
.texte-post textarea { width: 100%; margin-top: .4rem; }
.carte-retard { border-color: var(--danger); }
.barre-stat { height: 10px; border-radius: 999px; background: var(--primaire); min-width: 2px; }
.visuel-post { max-width: 100%; max-height: 22rem; border-radius: 14px; border: 1px solid var(--bord); }
@media (max-width: 900px) {
  .calendrier { grid-template-columns: minmax(0, 1fr); }
  .calendrier .entete-jour { display: none; }
  .case-jour { min-height: 0; }
  .case-jour.hors-mois:not(:has(.puce-post)) { display: none; }
}

.texte-alerte { color: var(--danger); font-weight: 650; font-size: .88rem; }
.texte-succes { color: var(--succes-texte); font-weight: 650; }
.montant, .nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau th.nombre, .tableau td.nombre { text-align: right; }
.total { text-align: right; margin: .9rem 0 0; }

/* ------------------------------------------------------------ Formulaires */
input, select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .9rem; font: inherit; color: var(--texte);
  background: var(--carte-pleine); border: 1px solid var(--bord-champ); border-radius: var(--rayon-moyen);
  transition: border-color var(--transition), box-shadow var(--transition);
}
:root[data-theme="sombre"] input, :root[data-theme="sombre"] select, :root[data-theme="sombre"] textarea { background: rgba(255, 255, 255, .04); }
/* Liste déroulante : fond plein (sinon Windows l'affiche blanche avec le texte clair du mode sombre) */
option, optgroup { background: var(--carte-pleine); color: var(--texte); }
input::placeholder, textarea::placeholder { color: var(--texte-doux); }
input:focus, select:focus, textarea:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 4px var(--primaire-doux); }
textarea { resize: vertical; }
input[type="color"] { padding: .3rem; height: 46px; cursor: pointer; }
input[type="file"] { padding: .55rem; cursor: pointer; }
input[type="checkbox"] { width: 1.3rem; height: 1.3rem; min-height: 0; margin: 0; accent-color: var(--primaire); cursor: pointer; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.3rem; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.champ label { display: inline-block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.champ.pleine-largeur { grid-column: 1 / -1; }
.requis { color: var(--danger); }
.en-erreur input, .en-erreur select, .en-erreur textarea { border-color: var(--danger); }
.msg-erreur { color: var(--danger); font-weight: 600; margin: .3rem 0 0; font-size: .88rem; }
.champ label.case { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 1.6rem 0 0; cursor: pointer; font-weight: 560; }
.specifique { margin: 1.4rem 0 0; padding: 1rem 1.2rem 1.2rem; border: 1px solid var(--bord); border-radius: var(--rayon-moyen); background: var(--carte-2); }
.specifique legend { font-weight: 700; padding: 0 .4rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.2rem; }
.filtres input[type="search"] { flex: 1 1 280px; width: auto; border-radius: 999px; padding-left: 1.1rem; }
.filtres select { flex: 0 1 220px; width: auto; border-radius: 999px; }

/* ------------------------------------------------------------ Fiches */
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.infos dt { font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
.infos dd { margin: .2rem 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.infos dd.montant { font-size: 1.3rem; font-weight: 700; }
.infos.bilan { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.notes { white-space: pre-line; margin: 0; }
.titre-section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .6rem; }
.titre-section h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.liste-lignes { list-style: none; margin: 0; padding: 0; }
.liste-lignes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
                   padding: .75rem 0; border-top: 1px solid var(--bord); }
.liste-lignes li:first-child { border-top: none; }
.ligne-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ligne-titre { display: flex; flex-direction: column; min-width: 0; }
.ligne-titre small { color: var(--texte-doux); font-size: .84rem; }
.ligne-gauche { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.bloc-paiement { border: 1.5px solid color-mix(in srgb, var(--succes-texte) 45%, transparent); }
.ligne-paiement { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.ligne-paiement .champ { flex: 0 1 260px; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.pictogramme { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
               background: var(--primaire-doux); color: var(--primaire); }
.pictogramme.rouge { background: var(--erreur-fond); color: var(--danger); }
.pictogramme.orange { background: var(--orange-fond); color: var(--orange-texte); }
.pictogramme.vert { background: var(--succes-fond); color: var(--succes-texte); }
.type-fichier { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
                background: var(--erreur-fond); color: var(--erreur-texte); font-size: .68rem; font-weight: 800; }
.depot { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--bord-fort); }
.depot .champ { flex: 1 1 220px; }
.apercu-logo { max-height: 70px; max-width: 220px; border-radius: 10px; background: #fff; padding: .3rem; border: 1px solid var(--bord); }
.liste-controles { margin: 0; padding: 0; list-style: none; }
.liste-controles li { display: flex; gap: .6rem; align-items: flex-start; margin: .55rem 0; }
.liste-controles .icone { color: var(--succes-texte); margin-top: .15rem; }

/* ------------------------------------------------------------ Tableaux */
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.tableau th { text-align: left; padding: .85rem 1rem; color: var(--texte-doux); font-size: .74rem; font-weight: 650;
              text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--bord); }
.tableau td { padding: .85rem 1rem; border-top: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr:first-child td { border-top: 0; }
.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: var(--primaire-doux); }
.lien-principal { font-weight: 650; color: var(--texte); }
.lien-principal:hover { color: var(--primaire); }
.sans-coupure { white-space: nowrap; }
.tableau td > span { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ Chiffres clés */
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.chiffre-cle { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.2rem;
               border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--texte);
               transition: transform var(--transition), box-shadow var(--transition); }
a.chiffre-cle:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); color: var(--texte); }
.chiffre-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-bottom: .5rem;
                 background: var(--primaire-doux); color: var(--primaire); }
.chiffre-alerte .chiffre-icone { background: var(--erreur-fond); color: var(--danger); }
.chiffre-succes .chiffre-icone { background: var(--succes-fond); color: var(--succes-texte); }
.chiffre-orange .chiffre-icone { background: var(--orange-fond); color: var(--orange-texte); }
.chiffre-libelle { display: flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; color: var(--texte-doux); }
.chiffre-valeur { font-size: 1.65rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.chiffre-alerte .chiffre-valeur { color: var(--danger); }
.chiffre-detail { font-size: .84rem; color: var(--texte-doux); }

/* ------------------------------------------------------------ Tableau de bord */
.accueil { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 330px; gap: 1.2rem; align-items: start; }
.accueil .carte { margin-bottom: 0; }
.colonne { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.entete-colonne { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; min-height: 3.4rem; }
.entete-colonne h1 { font-size: 1.5rem; }
.entete-colonne h2 { margin: 0; font-size: 1.2rem; }
.stat-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat { padding: 1rem 1.1rem; color: var(--texte); }
a.stat:hover { color: var(--texte); }
.stat-libelle { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--texte-doux); }
.stat-libelle::before { content: ""; width: 4px; height: 1.05rem; border-radius: 4px; background: var(--couleur, var(--primaire)); }
.stat-valeur { font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; margin: .45rem 0 .25rem; font-variant-numeric: tabular-nums; }
.stat-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--texte-doux); }

.segment { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--gris-fond); gap: 2px; }
.segment button { border: 0; background: transparent; font: inherit; font-size: .84rem; font-weight: 600; color: var(--texte-doux);
                  padding: .35rem .9rem; border-radius: 999px; cursor: pointer; transition: background var(--transition), color var(--transition); }
.segment button[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); box-shadow: 0 4px 12px color-mix(in srgb, var(--primaire) 30%, transparent); }

.graphique { position: relative; margin-top: .8rem; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .grille line { stroke: var(--bord-fort); stroke-dasharray: 3 5; }
.graphique .axe text { fill: var(--texte-doux); font-size: 18px; font-family: inherit; }
.graphique .courbe { fill: none; stroke: var(--primaire); stroke-width: 4; stroke-linecap: round; }
.graphique .serie { transition: opacity 300ms var(--ressort); }
.graphique .serie.masquee { opacity: 0; pointer-events: none; }
.graphique .serie .courbe { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: trace 1.2s var(--ressort) .15s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.graphique .point { cursor: pointer; outline: none; }
.graphique .point .cible { fill: transparent; }
.graphique .point .repere, .graphique .point .guide, .graphique .point .bulle-point { opacity: 0; transition: opacity 150ms ease; }
.graphique .point:hover .repere, .graphique .point:hover .guide, .graphique .point:hover .bulle-point,
.graphique .point:focus .repere, .graphique .point:focus .guide, .graphique .point:focus .bulle-point { opacity: 1; }
.graphique .point.courant .repere { opacity: 1; }
.graphique .guide { stroke: var(--texte-doux); stroke-dasharray: 3 4; }
.graphique .repere { fill: var(--carte-pleine); stroke: var(--primaire); stroke-width: 4; }
.graphique .bulle-point rect { fill: var(--carte-pleine); stroke: var(--bord-fort); }
.graphique .bulle-point text { fill: var(--texte); font-size: 18px; font-weight: 650; font-family: inherit; }

/* Carte « plafond », inspirée d'une carte bancaire */
.pile-carte { position: relative; isolation: isolate; margin: 0 12px 12px 0; }
.carte-plafond-derriere { position: absolute; inset: 12px -12px -12px 12px; border-radius: 22px; z-index: -1;
                          background: linear-gradient(135deg, #ffb27a, #ff7a8a); transform: rotate(3deg); opacity: .9; }
.carte-plafond {
  position: relative; overflow: hidden; color: #fff; padding: 1.4rem 1.5rem 1.3rem;
  background: var(--degrade-primaire); box-shadow: 0 18px 40px rgba(92, 62, 224, .35);
  border-radius: 22px; min-height: 214px; display: flex; flex-direction: column;
}
.carte-plafond::before, .carte-plafond::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.carte-plafond::before { width: 260px; height: 260px; right: -80px; top: -110px; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 70%); }
.carte-plafond::after { width: 320px; height: 320px; left: -120px; bottom: -200px; border: 44px solid rgba(255, 255, 255, .07); }
.carte-plafond .etiquette { font-size: .88rem; opacity: .88; font-weight: 600; }
.carte-plafond .valeur { font-size: 2.1rem; font-weight: 750; letter-spacing: -.02em; margin: .25rem 0 0; font-variant-numeric: tabular-nums; }
.carte-plafond .pied { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; font-size: .86rem; }
.carte-plafond .jauge-piste { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; margin: 1rem 0 .7rem; }
.carte-plafond .jauge-remplissage { height: 100%; border-radius: 999px; background: #fff; transform-origin: left; animation: jauge 1.1s var(--ressort) both .25s; }
.carte-plafond.attention .jauge-remplissage { background: #ffd27a; }
.carte-plafond.depasse .jauge-remplissage { background: #ff9ea2; }
@keyframes jauge { from { transform: scaleX(0); } }
.puce-carte { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px;
              background: rgba(255, 255, 255, .2); font-size: .78rem; font-weight: 650; }

.info-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; margin: 0; }
.info-grille dt { font-size: .8rem; color: var(--texte-doux); }
.info-grille dd { margin: .15rem 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }

.onglets { display: flex; gap: 1.3rem; border-bottom: 1px solid var(--bord); margin-bottom: .3rem; }
.onglets button { border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--texte-doux);
                  padding: .5rem 0; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets button[aria-selected="true"] { color: var(--primaire); border-bottom-color: var(--primaire); }
.onglets-pages { margin-bottom: 1.1rem; }
.onglets-pages a { white-space: nowrap; flex-shrink: 0; }
.nav-periode { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nav-periode .bouton { width: auto; }
.onglets-pages a { font-weight: 600; color: var(--texte-doux); text-decoration: none; padding: .6rem 0; min-height: 44px;
                   display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets-pages a[aria-current="page"] { color: var(--primaire); border-bottom-color: var(--primaire); }
.mail-cite { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 12px; background: var(--carte-2); border: 1px solid var(--bord); }
.mail-cite summary { cursor: pointer; font-weight: 600; }
.mail-texte { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texte-doux); font-size: .94rem; margin-top: .5rem;
              max-height: 16rem; overflow-y: auto; }
.mail-recu { border-left: 4px solid var(--bord-fort); }
.mail-recu.urgence-haute { border-left-color: var(--danger); }
.mail-recu.urgence-moyenne { border-left-color: var(--orange-texte); }
.mail-recu.est-traite { opacity: .7; }
.mail-recu h3 { margin: 0; font-size: 1.05rem; }
.mail-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; color: var(--texte-doux); font-size: .9rem; }

.panneau-droit { position: sticky; top: 76px; border-radius: 24px; box-shadow: var(--ombre); padding: 1.2rem; display: flex; flex-direction: column; gap: 1.3rem; }
.carte-profil { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 16px; background: var(--carte-pleine); border: 1px solid var(--bord); color: var(--texte); }
.carte-profil:hover { color: var(--texte); border-color: var(--bord-fort); }
:root[data-theme="sombre"] .carte-profil { background: var(--carte-2); }
.carte-profil div { min-width: 0; flex: 1; }
.carte-profil strong { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-profil small { display: block; color: var(--texte-doux); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.solde { text-align: center; }
.solde .etiquette { color: var(--texte-doux); font-size: .88rem; font-weight: 600; }
.solde .valeur { font-size: 2rem; font-weight: 750; letter-spacing: -.02em; margin: .15rem 0 .35rem; font-variant-numeric: tabular-nums; }
.duo-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.duo-boutons .bouton { width: 100%; }
.avatars-rapides { display: flex; gap: .55rem; flex-wrap: wrap; }
.avatars-rapides a { transition: transform var(--transition); }
.avatars-rapides a:hover { transform: translateY(-3px); }
.avatar-ajout { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--bord-fort); color: var(--texte-doux); }
.avatar-ajout:hover { color: var(--primaire); border-color: var(--primaire); }
.titre-panneau { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; font-size: .95rem; font-weight: 650; }
.notification { display: flex; gap: .75rem; padding: .85rem 0; border-top: 1px solid var(--bord); }
.notification:first-of-type { border-top: 0; padding-top: 0; }
.notification .corps { flex: 1; min-width: 0; }
.notification strong { display: block; font-size: .92rem; }
.notification small { display: block; color: var(--texte-doux); font-size: .8rem; }
.notification .quand { font-size: .74rem; color: var(--texte-doux); white-space: nowrap; }
.notification .actions { margin-top: .55rem; gap: .4rem; }

/* Carte assistant */
.carte-ia { background: var(--degrade-primaire); color: #fff; border: 0; }
.carte-ia h2 { color: #fff; margin: 0; display: flex; align-items: center; gap: .5rem; }
.carte-ia p { margin: .4rem 0 0; opacity: .92; }
.carte-ia .bouton { background: #fff; color: #3b2596; box-shadow: none; margin-top: 1rem; }

/* ------------------------------------------------------------ Assistant IA */
.ia-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: var(--rayon);
             color: #fff; margin-bottom: 1.2rem; background: var(--degrade-primaire); box-shadow: 0 18px 40px rgba(92, 62, 224, .3); }
.ia-entete h1 { color: #fff; }
.ia-entete p { margin: 0; opacity: .92; }
.ia-entete .bouton { background: #fff; color: #3b2596; margin-left: auto; box-shadow: none; }
.promo-illustration { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .2); color: #fff; }
.promo-illustration .icone { width: 1.6rem; height: 1.6rem; }
.reco { border-left: 4px solid var(--bord-fort); }
.reco-haute { border-left-color: var(--danger); }
.reco-moyenne { border-left-color: #f59e0b; }
.reco-basse { border-left-color: var(--texte-doux); }
.reco h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.reco p { margin: .5rem 0 0; }
.chargement { display: flex; align-items: center; gap: .8rem; color: var(--texte-doux); padding: 1rem 0; }
.roue { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 3px solid var(--primaire-doux); border-top-color: var(--primaire); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.discussion { display: flex; flex-direction: column; gap: .7rem; max-height: 520px; overflow-y: auto; padding: .2rem; }
.bulle { max-width: 85%; padding: .75rem 1rem; border-radius: 18px; animation: apparition .3s var(--ressort) both; }
.bulle p { margin: 0 0 .5rem; } .bulle p:last-child { margin: 0; }
.bulle ul { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
.bulle-moi { align-self: flex-end; background: var(--primaire); color: var(--sur-primaire); border-bottom-right-radius: 6px; }
.bulle-ia { align-self: flex-start; background: var(--carte-2); border: 1px solid var(--bord); border-bottom-left-radius: 6px; }
.bulle-erreur { align-self: flex-start; background: var(--erreur-fond); color: var(--erreur-texte); }
.zone-question { display: flex; gap: .6rem; margin-top: 1rem; }
.zone-question textarea { min-height: 50px; border-radius: 18px; }
.suggestions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.suggestion { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--bord-fort); background: var(--carte);
              color: var(--texte); font: inherit; font-size: .86rem; cursor: pointer; transition: border-color var(--transition), color var(--transition); }
.suggestion:hover { border-color: var(--primaire); color: var(--primaire); }
.resume-ia { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--carte-2); border: 1px solid var(--bord); }
.resume-ia ul { margin: .3rem 0; padding-left: 1.2rem; } .resume-ia p { margin: .3rem 0; }
.bloc-ia-redaction { margin: 0 0 1.2rem; padding: 1rem 1.1rem; border-radius: var(--rayon-moyen);
                     border: 1.5px dashed color-mix(in srgb, var(--primaire) 45%, var(--bord));
                     background: color-mix(in srgb, var(--primaire) 6%, transparent); }
.bloc-ia-redaction .alerte { margin: .8rem 0 0; }

/* ------------------------------------------------------------ Mails */
.mails { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(220px, 290px); gap: 1.1rem; align-items: start; }
.mails > .carte { margin: 0; }
.mails-clients { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.mails-clients input[type="search"] { margin-bottom: .6rem; }
.lien-client { flex: 1; padding: .35rem .6rem; border-radius: 12px; color: var(--texte); text-decoration: none; }
.lien-client:hover { background: var(--primaire-doux); }
.lien-client.actif { background: var(--primaire-doux); box-shadow: inset 3px 0 0 var(--primaire); }
.mails-pieces label.case span { overflow-wrap: anywhere; font-weight: 500; }

/* ------------------------------------------------------------ Palette de commandes */
.palette-fond { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding-top: 12vh;
                background: rgba(12, 8, 30, .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.palette { width: min(640px, calc(100vw - 2rem)); border-radius: 22px; box-shadow: var(--ombre-forte); overflow: hidden;
           background: var(--carte-pleine); border: 1px solid var(--bord); animation: palette-entree .22s var(--ressort) both; }
@keyframes palette-entree { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.palette-saisie { display: flex; align-items: center; gap: .7rem; padding: .3rem 1.1rem; border-bottom: 1px solid var(--bord); color: var(--texte-doux); }
.palette-saisie input { border: 0; background: transparent !important; box-shadow: none; min-height: 56px; padding: 0; font-size: 1.05rem; }
.palette-saisie input:focus { box-shadow: none; }
.palette ul { list-style: none; margin: 0; padding: .5rem; max-height: 52vh; overflow-y: auto; }
.palette-groupe { font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); padding: .6rem .7rem .3rem; }
.palette-option { display: flex; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: 12px; cursor: pointer; color: var(--texte); }
.palette-option small { display: block; color: var(--texte-doux); font-size: .8rem; }
.palette-option[aria-selected="true"] { background: var(--primaire-doux); }
.palette-option .pictogramme { width: 34px; height: 34px; border-radius: 10px; }
.palette-pied { display: flex; flex-wrap: wrap; gap: 1rem; padding: .6rem 1.1rem; border-top: 1px solid var(--bord); font-size: .78rem; color: var(--texte-doux); }

/* ------------------------------------------------------------ Connexion */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.boite-connexion { width: min(440px, 100%); background: var(--carte); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
                   border: 1px solid var(--bord); border-radius: 26px; box-shadow: var(--ombre-forte); padding: 2rem 1.8rem;
                   animation: apparition .45s var(--ressort) both; }
.boite-connexion h1 { font-size: 1.6rem; }
.formulaire-connexion { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.barre-enregistrer { position: sticky; bottom: 1rem; z-index: 5; display: flex; justify-content: flex-end; margin: 0 0 2rem; pointer-events: none; }
.barre-enregistrer .bouton { pointer-events: auto; box-shadow: var(--ombre-forte); }
section[id] { scroll-margin-top: 90px; }

/* ------------------------------------------------------------ Adaptation écran */
@media (max-width: 1320px) {
  .accueil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panneau-droit { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@media (max-width: 1320px) {
  .mails { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
  .mails-pieces { grid-column: 2; }
}
@media (max-width: 1080px) {
  .deux-colonnes, .accueil, .mails { grid-template-columns: minmax(0, 1fr); }
  .mails-pieces { grid-column: auto; }
  .mails-clients { position: static; max-height: 260px; }
}
@media (max-width: 900px) {
  .barre { position: fixed; left: 0; top: 0; height: 100vh; margin: 0; border-radius: 0 24px 24px 0;
           transform: translateX(-105%); transition: transform 240ms var(--ressort); }
  .barre { visibility: hidden; }
  .menu-ouvert .barre { transform: none; visibility: visible; }
  .barre-repliee { --largeur-barre: 248px; }
  .bouton-menu { display: grid; }
  .profil-texte, .recherche-bouton kbd { display: none; }
  .bouton-replier { display: none; }
}
@media (max-width: 720px) {
  h1 { font-size: 1.45rem; }
  .carte { padding: 1.1rem; }
  .grille-champs, .grille-3, .stat-duo, .info-grille { grid-template-columns: 1fr; }
  .actions .bouton, .actions form, .actions form .bouton { width: 100%; }
  .champ label.case { margin-top: 0; }
  .ligne-paiement .champ, .ligne-paiement .bouton { flex: 1 1 100%; }
  .haut { gap: .45rem; }
  .profil { padding: .2rem; }
  .bulle { max-width: 95%; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; }
  .tableau { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tableau thead { display: none; }
  .tableau tr { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon-moyen); margin-bottom: .7rem; padding: .4rem 0; box-shadow: var(--ombre); }
  .tableau td { border: 0; padding: .35rem 1rem; display: flex; gap: 1rem; justify-content: space-between; text-align: right; }
  .tableau td::before { content: attr(data-label); font-weight: 650; color: var(--texte-doux); text-align: left; flex-shrink: 0; }
  .tableau td:first-child { text-align: left; }
  .tableau td:first-child::before { display: none; }
}

/* Tableau de bord : lignes compactes, action toujours à droite */
.accueil .liste-lignes li { flex-wrap: nowrap; }
.accueil .ligne-gauche { flex: 1; }
.accueil .ligne-titre { min-width: 0; }
.accueil .ligne-titre small, .accueil .ligne-titre .lien-principal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accueil .liste-lignes .bouton { flex-shrink: 0; }
.onglets { overflow-x: auto; scrollbar-width: none; gap: 1rem; }
.onglets button { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }

/* Téléphone : barre du haut allégée, chiffres clés côte à côte */
@media (max-width: 720px) {
  .recherche-bouton { flex: 0 0 44px; min-height: 44px; padding: 0; justify-content: center; }
  .recherche-bouton span { display: none; }
  .outils-haut { gap: .35rem; }
  .profil { box-shadow: none; }
  .stat-duo { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .stat { padding: .9rem; }
  .stat-valeur { font-size: 1.3rem; }
  .carte-plafond .valeur { font-size: 1.8rem; }
}

/* Logo : monogramme blanc net sur la tuile violette */
.marque-logo img { width: 26px; height: 26px; object-fit: contain; display: block; }
.avatar-logo img { width: 24px; height: 24px; object-fit: contain; display: block; }