:root {
  --fond: #f2f5f3; --carte: #fff; --bord: #e3e8e5; --texte: #17211d; --doux: #6b7a74;
  --accent: #0e8a62; --accent-fonce: #0a6b4c; --accent-clair: #e2f5ed; --danger: #c0362c;
  --ombre: 0 1px 2px rgba(16, 32, 26, .05), 0 10px 28px -14px rgba(16, 32, 26, .18);
  --ombre-forte: 0 2px 4px rgba(16, 32, 26, .06), 0 18px 40px -16px rgba(16, 32, 26, .28);
  --rayon: 14px; --vite: .18s cubic-bezier(.2, .8, .2, 1); --doucement: .32s cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 12px; }
h3 { font-size: 12px; margin: 20px 0 8px; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; }
a { color: var(--accent); }
.chargement { padding: 40px; text-align: center; color: var(--doux); }
.ico { width: 18px; height: 18px; flex: none; }

@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes grandit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* Champs et boutons */
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { border: 1px solid var(--bord); border-radius: 9px; padding: 8px 11px; background: #fff; max-width: 100%; transition: border-color var(--vite), box-shadow var(--vite); }
textarea { width: 100%; min-height: 72px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #c6d0cb; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 138, 98, .16); }
button, .bouton { border: 1px solid var(--bord); background: #fff; border-radius: 9px; padding: 8px 14px; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; color: inherit; transition: background var(--vite), border-color var(--vite), transform var(--vite), box-shadow var(--vite); }
button:hover, .bouton:hover { background: #f4f7f5; border-color: #c6d0cb; }
button:active { transform: scale(.97); }
button:focus-visible, .bouton:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(14, 138, 98, .28); }
button.primaire, .bouton.primaire { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(14, 138, 98, .9); }
button.primaire:hover, .bouton.primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
button.danger { color: var(--danger); }
button.lien { border: 0; background: none; color: var(--accent); padding: 4px 6px; box-shadow: none; }
button.lien:hover { background: var(--accent-clair); }
button.lien.danger { color: var(--danger); } button.lien.danger:hover { background: #fde7e4; }
button:disabled { opacity: .45; cursor: not-allowed; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--doux); margin-bottom: 4px; }

/* Structure */
#app.coque { display: grid; grid-template-columns: 252px 1fr; min-height: calc(100vh / var(--z, 1)); }
/* Fond : halos de couleur fixes, pour que le verre du menu ait quelque chose a flouter. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(520px 420px at 6% 12%, rgba(47, 211, 154, .38), transparent 70%),
  radial-gradient(460px 380px at 10% 88%, rgba(120, 190, 255, .30), transparent 70%),
  radial-gradient(380px 320px at 22% 52%, rgba(255, 214, 120, .26), transparent 70%),
  radial-gradient(900px 600px at 100% 0%, rgba(47, 211, 154, .10), transparent 70%), var(--fond); }
/* Menu : panneau flottant en verre depoli, a la maniere des barres laterales macOS. */
aside { margin: 12px 0 12px 12px; padding: 16px 10px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; height: calc(calc(100vh / var(--z, 1)) - 24px);
  color: #1d1d1f; background: rgba(255, 255, 255, .52); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 50px -20px rgba(16, 32, 26, .28), 0 2px 6px rgba(16, 32, 26, .05); }
aside .marque { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #1d1d1f; padding: 2px 8px 16px; display: flex; align-items: center; gap: 10px; }
aside .logo { width: 34px; height: 34px; padding: 4px; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .18); }
aside nav { display: flex; flex-direction: column; gap: 2px; }
aside nav button { justify-content: flex-start; gap: 10px; background: none; border: 0; color: #3a3a3c; padding: 8px 10px; border-radius: 11px; font-size: 14px; font-weight: 500; box-shadow: none; }
aside nav button .ico { width: 17px; height: 17px; color: var(--accent); }
aside nav button:hover { background: rgba(0, 0, 0, .05); border: 0; color: #1d1d1f; }
aside nav button.actif { background: rgba(255, 255, 255, .92); color: #1d1d1f; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px -8px rgba(0, 0, 0, .22); }
aside nav button:active { transform: scale(.98); }
aside .pastille { margin-left: auto; background: #ff9f0a; color: #fff; border-radius: 999px; min-width: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
aside .pied { margin-top: auto; font-size: 13px; font-weight: 600; padding: 12px 8px 2px; border-top: 1px solid rgba(0, 0, 0, .07); color: #1d1d1f; }
aside .pied small { color: #86868b; font-weight: 400; }
aside .pied div { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
aside .pied button { background: rgba(255, 255, 255, .7); border: 1px solid rgba(0, 0, 0, .06); color: #3a3a3c; padding: 5px 10px; font-size: 12px; border-radius: 999px; }
aside .pied button:hover { background: #fff; color: #1d1d1f; }
main { padding: 26px 30px 60px; min-width: 0; }
#vue.entree > * { animation: monte var(--doucement) both; }
#vue.entree > :nth-child(2) { animation-delay: .05s; } #vue.entree > :nth-child(3) { animation-delay: .1s; }
#vue.entree > :nth-child(4) { animation-delay: .15s; } #vue.entree > :nth-child(n+5) { animation-delay: .2s; }
.demo { background: #fff6dc; border: 1px solid #f1dc9c; padding: 8px 14px; border-radius: 10px; margin-bottom: 18px; font-size: 13px; }
.tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tete p { margin: 2px 0 0; color: var(--doux); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; margin-bottom: 16px; box-shadow: var(--ombre); }
.vide { color: var(--doux); padding: 10px 0; margin: 0; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grille .carte { margin: 0; }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* Connexion */
.connexion { min-height: calc(100vh / var(--z, 1)); display: grid; place-items: center; padding: 16px; background: radial-gradient(900px 500px at 20% 0%, #d9f2e7, transparent), var(--fond); }
.connexion .carte { width: min(380px, 100%); padding: 28px; animation: monte .5s both; box-shadow: var(--ombre-forte); }
.connexion .carte > * + * { margin-top: 12px; }
.connexion input, .connexion button { width: 100%; }
.connexion .logo { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, #2fd39a, #0e8a62); display: grid; place-items: center; color: #06241a; font-weight: 800; }

/* Tuiles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; display: grid; grid-template-columns: 1fr auto; justify-items: start; gap: 0 10px; text-align: left; box-shadow: var(--ombre); }
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); background: #fff; }
.tuile b { font-size: 30px; line-height: 1.1; font-weight: 700; grid-column: 1; font-variant-numeric: tabular-nums; }
.tuile > span:last-child { color: var(--doux); font-size: 13px; font-weight: 500; grid-column: 1; }
.pict { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; align-self: center; }
.barre { display: grid; grid-template-columns: 150px 1fr 36px; gap: 10px; align-items: center; margin: 7px 0; font-size: 13px; }
.barre div { background: #eef2f0; border-radius: 6px; overflow: hidden; }
.barre i { display: block; height: 10px; border-radius: 6px; transform-origin: left; }
.entree .barre i { animation: grandit .7s .25s cubic-bezier(.2, .8, .2, 1) both; }
.barre b { text-align: right; font-variant-numeric: tabular-nums; }

/* Listes */
.ligne { display: flex; gap: 12px; align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; transition: background var(--vite); }
.ligne:hover { background: #f3f7f5; }
.ligne .gros { flex: 1; min-width: 0; }
.ligne .droite { text-align: right; }
small { color: var(--doux); }
.retard { color: var(--danger); font-weight: 600; }

/* Filtres + tableau */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtres input[type=search] { flex: 1 1 240px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.puce { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.puce b { color: var(--doux); font-weight: 600; }
.puce.actif { background: var(--texte); border-color: var(--texte); color: #fff; }
.puce.actif b { color: #b9c6c0; }
.lot { display: flex; gap: 8px; align-items: center; background: var(--accent-clair); border: 1px solid #bfe6d5; padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; flex-wrap: wrap; animation: monte .2s both; }
.defile { overflow-x: auto; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte .defile { box-shadow: none; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #edf1ef; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 12px; font-weight: 600; color: var(--doux); background: #f8faf9; user-select: none; }
th[data-tri] { cursor: pointer; transition: color var(--vite); }
th[data-tri]:hover { color: var(--texte); }
tbody tr { cursor: pointer; transition: background var(--vite); }
tbody tr:hover { background: #f3f8f5; }
td.large { white-space: normal; min-width: 200px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); padding: 0; }
.pagination { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 0; color: var(--doux); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before, .point { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.gris { background: #edf0ef; color: #56635e; } .jaune { background: #fdf0c8; color: #8a5a06; }
.orange { background: #ffe3d1; color: #b4410f; } .violet { background: #ece6ff; color: #5b2fd4; }
.bleu { background: #dbecff; color: #1a5fcb; } .vert { background: #d5f5e5; color: #08744c; }
.vertf { background: #08744c; color: #fff; } .rouge { background: #fde2df; color: #b3271d; }
.noir { background: #36423d; color: #fff; }
.point { width: 9px; height: 9px; }

/* Fiche (tiroir) */
/* La fiche s'ouvre au centre, sur un fond assombri et flouté qui laisse deviner la page derrière. */
#voile { position: fixed; inset: 0; background: rgba(12, 29, 23, .42); opacity: 0; pointer-events: none; transition: opacity var(--doucement); z-index: 9; backdrop-filter: blur(5px); }
#voile.ouvert { opacity: 1; pointer-events: auto; }
#tiroir { position: fixed; top: 50%; left: 50%; width: min(940px, calc(calc(100vw / var(--z, 1)) - 32px)); max-height: calc(calc(100vh / var(--z, 1)) - 48px); background: #fff; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(12, 29, 23, .55); overflow-y: auto; padding: 26px 28px; z-index: 10; opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(.95); transition: transform var(--doucement), opacity .2s ease; }
#tiroir.ouvert { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
#tiroir .contenu.entree { animation: apparait .25s both; }
.fiche-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.fiche-corps h3:first-child { margin-top: 0; }
#tiroir form[data-form=prospect] { max-width: 640px; margin: 0 auto; }
.tel { font-size: 24px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 10px; letter-spacing: .01em; }
.tel .ico { width: 20px; height: 20px; }
.infos { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 14px 0; padding: 14px; background: #f6f9f7; border-radius: 12px; }
.infos dt { color: var(--doux); } .infos dd { margin: 0; overflow-wrap: anywhere; }
.resultats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resultats button { justify-content: flex-start; padding: 10px 12px; background: #fff; }
.resultats button:hover { transform: translateY(-1px); box-shadow: var(--ombre); }
.resultats button.choisi { border-color: var(--accent); background: var(--accent-clair); font-weight: 600; box-shadow: 0 0 0 3px rgba(14, 138, 98, .14); }
form[data-form=appel] { animation: monte .25s both; margin-top: 4px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.champs .plein { grid-column: 1 / -1; }
.champs input, .champs select { width: 100%; }
.histo { border-left: 2px solid var(--bord); padding: 2px 0 2px 12px; margin: 10px 0; }

/* Visites */
.visite { border-left: 4px solid var(--accent); transition: transform var(--vite), box-shadow var(--vite); }
.visite:hover { box-shadow: var(--ombre-forte); }
.visite.realisee { border-left-color: #a3b1ab; } .visite.annulee { border-left-color: var(--danger); opacity: .7; }
.visite .quand { font-weight: 700; font-size: 16px; }
.visite summary { cursor: pointer; color: var(--accent); font-weight: 500; padding: 4px 0; }
.cr { background: #f6f9f7; border-radius: 10px; padding: 12px; margin: 10px 0; white-space: pre-wrap; }

/* Aperçu du mail (modale) */
#modale { position: fixed; inset: 0; background: rgba(12, 29, 23, .5); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity var(--vite); }
#modale.ouvert { opacity: 1; pointer-events: auto; }
.boite { background: #fff; border-radius: 18px; width: min(720px, 100%); max-height: calc(calc(100vh / var(--z, 1)) - 32px); overflow-y: auto; padding: 24px; box-shadow: var(--ombre-forte); transform: translateY(14px) scale(.97); transition: transform var(--doucement); }
#modale.ouvert .boite { transform: none; }
.rang { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.rang > div { flex: 1; min-width: 0; } .rang input { width: 100%; }
.boite textarea { min-height: 300px; line-height: 1.55; }
.astuce { background: #fff6dc; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 12px 0; }
.apercu { background: #f6f9f7; border-radius: 12px; padding: 16px; white-space: pre-wrap; line-height: 1.55; }
.apercu.riche { white-space: normal; background: #fff; border: 1px solid var(--bord); max-height: calc(46vh / var(--z, 1)); overflow-y: auto; }
.apercu.riche:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 138, 98, .16); }
.apercu .objet { font-weight: 700; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bord); }
#apercu.riche { max-height: none; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.grand-logo { display: block; width: 200px; max-width: 100%; margin: 0 auto 6px; }
.vars { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.vars button { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-clair); border-color: #bfe6d5; color: var(--accent-fonce); }
.onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* Gros bouton « Envoyer le mail » de la fiche, et animation d'envoi */
.cta-mail { width: 100%; margin: 4px 0 12px; padding: 15px 18px; justify-content: flex-start; gap: 14px; text-align: left; border: 0; border-radius: 16px; color: #fff; font-size: 16px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #12a877, #0a6b4c); box-shadow: 0 14px 30px -12px rgba(14, 138, 98, .85); animation: respire 2.4s ease-in-out infinite; }
.cta-mail b { display: block; font-weight: 700; } .cta-mail small { color: rgba(255, 255, 255, .85); font-size: 13px; overflow-wrap: anywhere; }
.cta-mail .ico { width: 28px; height: 28px; transition: transform var(--doucement); }
.cta-mail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: reflet 3.2s ease-in-out infinite; }
.cta-mail:hover { background: linear-gradient(135deg, #15b783, #0c7a57); border: 0; transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(14, 138, 98, .95); }
.cta-mail:hover .ico { transform: translate(5px, -5px) rotate(8deg); }
.cta-mail:active { transform: scale(.98); }
@keyframes respire { 50% { box-shadow: 0 14px 34px -8px rgba(14, 138, 98, 1), 0 0 0 5px rgba(14, 138, 98, .14); } }
@keyframes reflet { 0%, 55% { left: -80px; } 100% { left: calc(100% + 80px); } }
.avion { position: fixed; z-index: 60; pointer-events: none; width: 64px; height: 64px; display: grid; place-items: center; color: var(--accent); filter: drop-shadow(0 10px 14px rgba(14, 138, 98, .45)); }
.avion .ico { width: 56px; height: 56px; fill: rgba(255, 255, 255, .9); }
.nuage { position: fixed; z-index: 59; pointer-events: none; width: 16px; height: 16px; border-radius: 50%; background: rgba(160, 200, 185, .7); }
.envoye { position: fixed; top: 50%; left: 50%; z-index: 60; pointer-events: none; padding: 14px 26px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 20px 50px -12px rgba(14, 138, 98, .9); white-space: nowrap; }

/* Potentiels */
button.potentiel { border-radius: 999px; background: #17211d; border-color: #17211d; color: #fff; font-weight: 600; padding: 5px 13px 5px 8px; }
button.potentiel span { font-size: 17px; line-height: 1; display: inline-block; }
button.potentiel:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px) rotate(-2deg); }
button.potentiel:hover span { animation: gigote .45s ease infinite; }
button.potentiel:active { transform: scale(.9); }
@keyframes gigote { 25% { transform: rotate(-18deg) scale(1.25); } 75% { transform: rotate(18deg) scale(1.25); } }
.tampon { position: fixed; z-index: 50; pointer-events: none; padding: 6px 22px; border: 5px solid #d92d20; border-radius: 10px; color: #d92d20; font: 900 34px/1.1 Impact, "Arial Black", sans-serif; letter-spacing: .06em; white-space: nowrap; background: rgba(255, 255, 255, .82); transform: translate(-50%, -50%) rotate(-10deg); }
.billet { position: fixed; z-index: 51; pointer-events: none; font-size: 26px; line-height: 1; }
.badge.or { background: #ffe9a3; color: #7a5200; }
aside .pastille.verte { background: #30d158; color: #fff; }
.pastille.pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { 40% { transform: scale(1.7); } }
aside nav button.recu { background: rgba(255, 214, 92, .55); }
tr.part { animation: part .38s ease-in forwards; }
@keyframes part { to { opacity: 0; transform: translateX(-40px); } }
.envol { position: fixed; z-index: 50; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(180deg, #ffe58a, #ffc933); color: #5a3c00; font-weight: 700; box-shadow: 0 12px 30px -8px rgba(224, 173, 28, .9); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; transform-origin: left center; }
.envol .ico { fill: currentColor; }
.etincelle { position: fixed; z-index: 50; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffd24a; pointer-events: none; }
h2 .compte { background: #edf1ef; color: var(--doux); border-radius: 999px; padding: 1px 9px; font-size: 12px; margin-left: 6px; vertical-align: 1px; }
.voir-tout { width: 100%; margin-top: 8px; color: var(--accent); background: var(--accent-clair); border-color: transparent; }
.voir-tout:hover { background: #d3efe2; border-color: transparent; }
.onglets-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.onglet { flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 14px; border-radius: 12px; box-shadow: var(--ombre); text-align: left; }
.onglet span { font-size: 13px; color: var(--doux); font-weight: 500; }
.onglet b { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.onglet small { font-size: 12px; }
.onglet:hover { transform: translateY(-2px); }
.onglet.actif { border-color: var(--accent); background: var(--accent-clair); box-shadow: 0 0 0 3px rgba(14, 138, 98, .14); }
.onglet.actif span { color: var(--accent-fonce); }
table.compact { table-layout: fixed; min-width: 760px; }
table.compact th:first-child { width: 40px; }
table.compact td { padding: 7px 12px; vertical-align: middle; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
table.compact td.note { color: var(--doux); font-size: 13px; }
tr.groupe { cursor: pointer; }
table.compact .bouton, table.compact button { padding: 5px 10px; font-size: 13px; }
tr.groupe td { background: #f1f5f3; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); padding: 7px 12px; position: sticky; top: 0; }
tr.groupe b { background: #fff; border-radius: 999px; padding: 1px 8px; margin-left: 6px; color: var(--texte); }
tr.arrive { animation: surligne 1.8s ease-out; }
@keyframes surligne { from { background: #ffe58a; } }
.etape { max-height: calc(calc(100vh / var(--z, 1)) - 230px); overflow-y: auto; }
.etapes { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.etape { background: #e9eeeb; border-radius: var(--rayon); padding: 12px; min-height: 180px; }
.etape header { display: flex; justify-content: space-between; align-items: center; }
.etape .consigne { font-size: 12px; color: var(--doux); margin: 6px 0 10px; }
.fichette { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 12px; margin-bottom: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--ombre); transition: transform var(--vite), box-shadow var(--vite); }
.fichette:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.fichette .quand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--doux); margin-top: 4px; overflow-wrap: anywhere; }
.fichette .quand.retard { color: var(--danger); }
.fichette .quand .ico { width: 14px; height: 14px; }
.fichette button { margin-top: 8px; }
.fichette.arrive { animation: arrive 1.6s ease-out; }
@keyframes arrive { 0% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(255, 201, 51, .9); } 30% { transform: scale(1.04); } 100% { transform: none; box-shadow: 0 0 0 16px rgba(255, 201, 51, 0); } }

/* Graphiques (appels Ringover) */
.legende { display: flex; gap: 16px; font-size: 12px; color: var(--doux); margin-bottom: 10px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; }
.graphe { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--bord); }
.col { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; outline: 0; }
.col > span { font-size: 11px; color: var(--doux); height: 18px; line-height: 18px; white-space: nowrap; margin-bottom: -19px; }
.graphe { margin-bottom: 22px; }
.pile { height: 170px; width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 2px; }
.pile small { text-align: center; font-size: 11px; line-height: 1.3; }
.pile i { display: block; min-height: 3px; transform-origin: bottom; }
.pile i:first-of-type { border-radius: 4px 4px 0 0; }
.pile .oui { background: var(--accent); } .pile .non { background: #c3cec8; }
.entree .pile i { animation: pousse .6s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.col:hover .pile, .col:focus-visible .pile { filter: brightness(.92); }
.col:hover::after, .col:focus-visible::after { content: attr(data-info); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #17211d; color: #fff; padding: 7px 10px; border-radius: 8px; font-size: 12px; white-space: pre; z-index: 5; pointer-events: none; box-shadow: var(--ombre-forte); }
.col:first-child:hover::after, .col:nth-child(2):hover::after { left: 0; transform: none; }
.col:last-child:hover::after, .col:nth-last-child(2):hover::after { left: auto; right: 0; transform: none; }
tbody tr.fixe { cursor: default; } tbody tr.fixe:hover { background: none; }
.tuile b small { font-size: 14px; font-weight: 600; }
div.tuile:hover { transform: none; box-shadow: var(--ombre); }
.carte ol { margin: 0; padding-left: 20px; line-height: 1.9; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: #17211d; color: #fff; padding: 11px 18px; border-radius: 12px; z-index: 40; max-width: calc(90vw / var(--z, 1)); opacity: 0; pointer-events: none; transition: opacity var(--vite), transform var(--doucement); box-shadow: var(--ombre-forte); font-weight: 500; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#toast.erreur { background: var(--danger); }

@media (max-width: 860px) {
  #app.coque { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  aside { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; margin: 8px; position: sticky; top: 8px; z-index: 5; height: auto; border-radius: 18px; }
  aside .marque { padding: 4px 8px; }
  aside nav { flex-direction: row; flex-wrap: wrap; }
  aside .pied { margin: 0 0 0 auto; padding: 4px 8px; border: 0; display: flex; gap: 8px; align-items: center; }
  aside .pied div { margin: 0; } aside .pied small, aside .pied br { display: none; }
  main { padding: 16px; }
  .champs, .resultats, .deux, .fiche-corps { grid-template-columns: 1fr; }
  #tiroir { padding: 18px; max-height: calc(calc(100vh / var(--z, 1)) - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- Mode sombre */
:root[data-theme=dark] {
  color-scheme: dark;
  --fond: #0d1311; --carte: #171f1c; --bord: #29342f; --texte: #e8efec; --doux: #93a39c;
  --accent: #30c493; --accent-fonce: #27a67c; --accent-clair: #153a2d; --danger: #ff6f61;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .65);
  --ombre-forte: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 40px -16px rgba(0, 0, 0, .8);
}
:root.bascule *, :root.bascule *::before { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }
[data-theme=dark] body::before { background:
  radial-gradient(520px 420px at 6% 12%, rgba(47, 211, 154, .20), transparent 70%),
  radial-gradient(460px 380px at 10% 88%, rgba(80, 140, 255, .18), transparent 70%),
  radial-gradient(380px 320px at 22% 52%, rgba(255, 190, 90, .10), transparent 70%),
  radial-gradient(900px 600px at 100% 0%, rgba(47, 211, 154, .06), transparent 70%), var(--fond); }
[data-theme=dark] input, [data-theme=dark] select, [data-theme=dark] textarea { background: #101714; }
[data-theme=dark] input:hover, [data-theme=dark] select:hover, [data-theme=dark] textarea:hover { border-color: #3b4843; }
[data-theme=dark] button, [data-theme=dark] .bouton { background: #1e2824; }
[data-theme=dark] button:hover, [data-theme=dark] .bouton:hover { background: #27332e; border-color: #3b4843; }
[data-theme=dark] button.primaire, [data-theme=dark] .bouton.primaire { background: var(--accent); border-color: var(--accent); color: #06241a; }
[data-theme=dark] button.primaire:hover, [data-theme=dark] .bouton.primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
[data-theme=dark] button.lien { background: none; }
[data-theme=dark] button.lien:hover { background: var(--accent-clair); }
[data-theme=dark] button.lien.danger:hover { background: #3a1c19; }
/* Menu en verre fume */
[data-theme=dark] aside { color: #f5f5f7; background: rgba(30, 38, 34, .55); border-color: rgba(255, 255, 255, .10); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 50px -20px rgba(0, 0, 0, .7); }
[data-theme=dark] aside .marque { color: #f5f5f7; }
[data-theme=dark] aside nav button { background: none; color: #c5cfca; }
[data-theme=dark] aside nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
[data-theme=dark] aside nav button.actif { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 16px -8px rgba(0, 0, 0, .6); }
[data-theme=dark] aside nav button.recu { background: rgba(255, 214, 92, .3); }
[data-theme=dark] aside .pied { color: #f5f5f7; border-top-color: rgba(255, 255, 255, .09); }
[data-theme=dark] aside .pied small { color: #8e9a95; }
[data-theme=dark] aside .pied button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .08); color: #c5cfca; }
[data-theme=dark] aside .pied button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
[data-theme=dark] .demo, [data-theme=dark] .astuce { background: #352d13; border-color: #5a4b1b; color: #f1e1a8; }
[data-theme=dark] .connexion { background: radial-gradient(900px 500px at 20% 0%, #12382a, transparent), var(--fond); }
[data-theme=dark] .grand-logo { border-radius: 14px; }
[data-theme=dark] .tuile:hover { background: var(--carte); }
[data-theme=dark] .barre div, [data-theme=dark] h2 .compte { background: #232d29; }
[data-theme=dark] .ligne:hover, [data-theme=dark] tbody tr:hover { background: #1e2824; }
[data-theme=dark] tbody tr.fixe:hover { background: none; }
[data-theme=dark] .puce.actif { background: #e8efec; border-color: #e8efec; color: #0d1311; }
[data-theme=dark] .puce.actif b { color: #55635d; }
[data-theme=dark] .lot, [data-theme=dark] .vars button { border-color: #23604a; }
[data-theme=dark] .vars button { color: #7fe0b8; background: var(--accent-clair); }
[data-theme=dark] th, [data-theme=dark] td { border-bottom-color: #222c28; }
[data-theme=dark] th { background: #1b2420; }
[data-theme=dark] .gris { background: #2a3531; color: #b9c6c0; } [data-theme=dark] .jaune { background: #3d3211; color: #f0cf6a; }
[data-theme=dark] .orange { background: #41240f; color: #ffab7a; } [data-theme=dark] .violet { background: #2b2350; color: #b9a4ff; }
[data-theme=dark] .bleu { background: #132d4d; color: #8ec1ff; } [data-theme=dark] .vert { background: #123a2b; color: #6fe0b1; }
[data-theme=dark] .vertf { background: #1f8f66; color: #fff; } [data-theme=dark] .rouge { background: #43201c; color: #ff9c92; }
[data-theme=dark] .noir { background: #4a5651; color: #fff; } [data-theme=dark] .badge.or { background: #4a3a0c; color: #ffd978; }
[data-theme=dark] #voile { background: rgba(0, 0, 0, .58); }
[data-theme=dark] #tiroir, [data-theme=dark] .boite { background: #171f1c; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
[data-theme=dark] .infos, [data-theme=dark] .cr, [data-theme=dark] .apercu { background: #101714; }
[data-theme=dark] .resultats button, [data-theme=dark] .fichette { background: #1e2824; }
[data-theme=dark] .resultats button.choisi, [data-theme=dark] .onglet.actif { background: var(--accent-clair); border-color: var(--accent); }
[data-theme=dark] .onglet.actif span { color: #7fe0b8; }
[data-theme=dark] .visite.realisee { border-left-color: #55635d; }
/* L'apercu du mail reste sur fond blanc : c'est ce que verra le destinataire. */
[data-theme=dark] .apercu.riche { background: #fff; color: #222; }
[data-theme=dark] .apercu.riche .objet { border-bottom-color: #e3e8e5; }
[data-theme=dark] button.potentiel { background: #e8efec; border-color: #e8efec; color: #0d1311; }
[data-theme=dark] button.potentiel:hover { background: var(--accent); border-color: var(--accent); }
[data-theme=dark] .tampon { background: rgba(23, 31, 28, .88); border-color: #ff5a4d; color: #ff5a4d; }
[data-theme=dark] .voir-tout { background: var(--accent-clair); border-color: transparent; }
[data-theme=dark] .voir-tout:hover { background: #1c4737; border-color: transparent; }
[data-theme=dark] tr.groupe td { background: #121916; }
[data-theme=dark] tr.groupe b { background: #29342f; }
[data-theme=dark] .etape { background: #121916; }
[data-theme=dark] .pile .non { background: #46524d; }
[data-theme=dark] .col:hover::after, [data-theme=dark] .col:focus-visible::after, [data-theme=dark] #toast { background: #e8efec; color: #0d1311; }
[data-theme=dark] #toast.erreur { background: var(--danger); color: #1a0705; }[data-theme=dark] .cta-mail { background: linear-gradient(135deg, #17b383, #0c7a57); color: #fff; }
[data-theme=dark] .cta-mail:hover { background: linear-gradient(135deg, #1cc692, #0e8a62); }
[data-theme=dark] .avion .ico { fill: rgba(23, 31, 28, .9); }

/* Fiche : responsable en premier, etablissement en dessous */
.fiche-corps .fonction { margin: 0; color: var(--doux); }
.fiche-corps .etab { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: var(--doux); }
/* Saisie assistee de l'adresse */
.adresse-auto { position: relative; }
.adresse-auto input { width: 100%; }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre-forte); overflow: hidden; animation: monte .18s both; }
.suggestions:empty { display: none; }
.suggestions button, [data-theme=dark] .suggestions button { width: 100%; justify-content: flex-start; gap: 8px; border: 0; border-radius: 0; background: none; padding: 9px 12px; text-align: left; font-weight: 400; }
.suggestions button:hover, .suggestions button:focus-visible, [data-theme=dark] .suggestions button:hover { background: var(--accent-clair); box-shadow: none; }
input.rempli { animation: rempli 1.2s ease-out; }
@keyframes rempli { from { box-shadow: 0 0 0 4px rgba(14, 138, 98, .45); border-color: var(--accent); } }

/* Resultat de l'appel : les deux issues les plus frequentes en grand, les autres en dessous */
.resultats.majeurs { margin-bottom: 10px; gap: 10px; }
.resultats.majeurs button, [data-theme=dark] .resultats.majeurs button { flex-direction: column; justify-content: center; gap: 8px; padding: 18px 12px; font-size: 15px; font-weight: 700; border-width: 2px; border-color: transparent; border-radius: 14px; }
.resultats.majeurs .ico { width: 26px; height: 26px; }
.resultats.majeurs button.violet { background: #ece6ff; color: #5b2fd4; } .resultats.majeurs button.orange { background: #ffe3d1; color: #b4410f; }
.resultats.majeurs button:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); border-color: currentColor; }
.resultats.majeurs button.choisi { border-color: currentColor; box-shadow: 0 0 0 4px rgba(0, 0, 0, .06), var(--ombre); }
[data-theme=dark] .resultats.majeurs button.violet { background: #2b2350; color: #b9a4ff; } [data-theme=dark] .resultats.majeurs button.orange { background: #41240f; color: #ffab7a; }
[data-theme=dark] .resultats.majeurs button.choisi { border-color: currentColor; }

/* Fiche d'un potentiel : fond a halos dore et emeraude qui derivent lentement, lisere dore. */
#tiroir.vip { border: 1px solid rgba(214, 164, 46, .55);
  background:
    radial-gradient(60% 55% at 0% 0%, rgba(255, 205, 96, .42), transparent 70%),
    radial-gradient(55% 60% at 100% 100%, rgba(47, 211, 154, .26), transparent 70%),
    radial-gradient(40% 40% at 100% 0%, rgba(255, 170, 120, .18), transparent 70%),
    linear-gradient(160deg, #fffdf6, #f7fbf8);
  background-size: 140% 140%; animation: aurore 14s ease-in-out infinite alternate;
  box-shadow: inset 0 3px 0 #e9b93c, 0 30px 80px -20px rgba(120, 90, 10, .45), 0 0 0 6px rgba(233, 185, 60, .12); }
@keyframes aurore { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
#tiroir.vip .infos, #tiroir.vip .resultats:not(.majeurs) button { background: rgba(255, 255, 255, .62); backdrop-filter: blur(6px); }
#tiroir.vip .badge.or { background: linear-gradient(135deg, #ffe08a, #f2bd3b); color: #5a3c00; box-shadow: 0 4px 12px -4px rgba(214, 164, 46, .8); }
#tiroir.vip .badge.or::before { display: none; }
[data-theme=dark] #tiroir.vip { border-color: rgba(233, 185, 60, .45);
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(233, 185, 60, .38), transparent 70%),
    radial-gradient(65% 65% at 100% 100%, rgba(47, 211, 154, .32), transparent 70%),
    radial-gradient(45% 45% at 100% 0%, rgba(120, 110, 255, .20), transparent 70%),
    linear-gradient(160deg, #1d241d, #10161a);
  background-size: 140% 140%;
  box-shadow: inset 0 3px 0 #e9b93c, 0 30px 90px -20px rgba(0, 0, 0, .95), 0 0 60px -18px rgba(233, 185, 60, .45), 0 0 0 6px rgba(233, 185, 60, .08); }
[data-theme=dark] #tiroir.vip .infos, [data-theme=dark] #tiroir.vip .resultats:not(.majeurs) button { background: rgba(10, 16, 14, .45); }
[data-theme=dark] #tiroir.vip h1 { background: linear-gradient(90deg, #fff, #ffe7a6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Commission : tirelire qui flotte et rayonne, pieces qui tombent dedans */
.commission { display: flex; align-items: center; gap: 16px; margin: 14px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--bord); background: var(--carte); position: relative; overflow: hidden; }
.commission.active { border-color: rgba(233, 185, 60, .6); background: linear-gradient(135deg, rgba(255, 221, 130, .30), rgba(255, 255, 255, 0) 60%), var(--carte); }
.tirelire { position: relative; width: 92px; height: 84px; flex: none; display: grid; place-items: center; }
.tirelire svg { width: 82px; position: relative; z-index: 2; filter: drop-shadow(0 8px 8px rgba(184, 69, 106, .28)); animation: flotte 2.8s ease-in-out infinite alternate; }
.commission:not(.active) .tirelire svg { filter: grayscale(.85) opacity(.55); animation: none; }
@keyframes flotte { from { transform: translateY(3px) rotate(-3deg); } to { transform: translateY(-5px) rotate(3deg); } }
.rayons { position: absolute; inset: -22px; border-radius: 50%; z-index: 0; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 70, .75) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%); mask: radial-gradient(circle, #000 22%, transparent 66%); }
.commission.active .rayons { opacity: 1; animation: rayonne 16s linear infinite, pulse 2.4s ease-in-out infinite alternate; }
@keyframes rayonne { to { transform: rotate(360deg); } }
@keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
.piece { position: absolute; top: -6px; left: 50%; z-index: 1; width: 17px; height: 17px; margin-left: -10px; border-radius: 50%; display: none; place-items: center;
  font: 800 10px/1 system-ui, sans-serif; font-style: normal; color: #8a5a00; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2bd3b 60%, #d99a12); box-shadow: 0 0 0 1.5px #d99a12 inset, 0 2px 4px rgba(0, 0, 0, .2); }
.commission.active .piece { display: grid; animation: tombe 1.8s cubic-bezier(.5, 0, .9, .6) infinite; }
.commission.active .piece:nth-of-type(3) { animation-delay: .6s; margin-left: -4px; } .commission.active .piece:nth-of-type(4) { animation-delay: 1.2s; margin-left: -14px; }
@keyframes tombe { 0% { transform: translateY(-16px) rotate(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(26px) rotate(200deg); opacity: 1; } 85%, 100% { transform: translateY(34px) rotate(260deg) scale(.5); opacity: 0; } }
.chiffres { min-width: 0; display: flex; flex-direction: column; }
.chiffres .montant { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.commission.active .montant { background: linear-gradient(90deg, #b9790a, #e9b93c 50%, #b9790a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brille 3.5s linear infinite; }
@keyframes brille { to { background-position: -200% 0; } }
.montant.saute { animation: saute .5s cubic-bezier(.2, 1.6, .4, 1); }
.commission.active .montant.saute { animation: saute .5s cubic-bezier(.2, 1.6, .4, 1), brille 3.5s linear infinite; }
@keyframes saute { 40% { transform: scale(1.18); } }
.calcul { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--doux); font-size: 13px; margin-top: 4px; }
.calcul input, input.taux { width: 84px; padding: 5px 8px; font-weight: 700; color: var(--texte); }
.total-commission { margin-top: 6px !important; color: var(--texte) !important; }
[data-theme=dark] .commission.active { background: linear-gradient(135deg, rgba(233, 185, 60, .20), rgba(0, 0, 0, 0) 60%), rgba(10, 16, 14, .45); }
[data-theme=dark] .commission.active .montant { background-image: linear-gradient(90deg, #f2c75a, #fff0b8 50%, #f2c75a); }
#tiroir.vip .commission { background-color: rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
[data-theme=dark] #tiroir.vip .commission { background-color: rgba(10, 16, 14, .4); }

/* ---------------------------------------------------------------- Petits plaisirs (plaisir.js) */
.plaisir { position: fixed; pointer-events: none; z-index: 70; }
.confetti { top: 0; }
.cloche { top: 18px; left: 50%; font-size: 64px; line-height: 1; transform-origin: 50% 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }
.victoire { top: 50%; left: 50%; padding: 22px 44px; border-radius: 26px; text-align: center; color: #3d2a00; background: linear-gradient(135deg, #ffe58a, #ffc02e); box-shadow: 0 30px 80px -16px rgba(180, 120, 0, .8), 0 0 0 8px rgba(255, 255, 255, .35); white-space: nowrap; }
.victoire small { display: block; font-size: 15px; font-weight: 700; color: #6b4a00; text-transform: uppercase; letter-spacing: .08em; }
.victoire b { display: block; font-size: 56px; line-height: 1.1; font-weight: 900; }
.buisson { bottom: 18px; left: 0; width: 64px; }
.grimace { top: 50%; left: 50%; font-size: 120px; line-height: 1; }
.grimace i { position: absolute; right: -26px; bottom: -14px; font-size: 62px; font-style: normal; }
.ronfle { top: 46%; font-weight: 800; color: #7a8a84; font-style: italic; }
.pompe { top: 0; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25)); }
.coureur { bottom: 26px; left: 0; width: 120px; }
.lunettes { display: none; } .star .lunettes { display: inline; }
.tirelire { width: calc(92px * var(--taille, 1)); height: calc(84px * var(--taille, 1)); }
.tirelire svg { width: calc(82px * var(--taille, 1)); transition: width var(--doucement); }
.serie { position: fixed; right: 86px; bottom: 28px; z-index: 45; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #ff9f43, #ff5e3a); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(255, 94, 58, .8); opacity: 0; pointer-events: none; transition: opacity .5s ease, filter .6s ease, padding .5s ease, box-shadow .5s ease; white-space: nowrap; }
.serie span { display: inline-block; max-width: 180px; overflow: hidden; transition: max-width .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.serie.visible { opacity: 1; } .serie.eteinte { filter: grayscale(1); }
/* Rangee : il ne reste que la flamme et le chiffre, a moitie effaces ; le detail revient au survol */
.serie.visible.rangee { opacity: .55; padding: 4px 10px; box-shadow: none; pointer-events: auto; cursor: default; }
.serie.rangee span { max-width: 0; opacity: 0; }
.serie.visible.rangee:hover { opacity: 1; } .serie.rangee:hover span { max-width: 180px; opacity: 1; }
.meteo i { font-style: normal; font-size: 16px; }
/* Vendredi apres-midi */
:root.fete { --accent: #00b383; --accent-fonce: #008f69; }
:root.fete body::before { animation: fete 9s linear infinite; filter: saturate(1.7); }
@keyframes fete { 50% { filter: saturate(1.9) hue-rotate(35deg); } }

/* Correction d'un resultat saisi par erreur */
button.corriger { margin-top: 8px; font-size: 13px; color: var(--doux); }
button.corriger:hover { color: var(--accent); }

/* Visites techniques : agenda par jour */
.vt-jour { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-size: 13px; color: var(--texte); letter-spacing: .03em; }
.vt-jour b { background: var(--accent-clair); color: var(--accent); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.vt { background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: 12px; margin-bottom: 8px; box-shadow: var(--ombre); overflow: hidden; transition: box-shadow var(--vite); }
.vt.cat-cr { border-left-color: #ea6a1f; } .vt.cat-faites { border-left-color: #a3b1ab; } .vt.cat-annulees { border-left-color: var(--danger); opacity: .75; }
.vt.ouverte { box-shadow: var(--ombre-forte); }
.vt-ligne { display: grid; grid-template-columns: 62px minmax(0, 1.6fr) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px; cursor: pointer; transition: background var(--vite); }
.vt-ligne:hover { background: rgba(14, 138, 98, .06); }
.vt-ligne .gros, .vt-contact { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-heure { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vt-ligne .bouton { padding: 6px 10px; font-size: 13px; }
.chevron { color: var(--doux); width: 14px; text-align: center; }
.vt-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; padding: 4px 14px 16px; border-top: 1px solid var(--bord); animation: monte .2s both; }
.vt-detail .infos { margin: 12px 0 0; }
.vt-detail form[data-form=compte-rendu] { margin-top: 12px; }
@media (max-width: 860px) {
  .vt-ligne { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .vt-contact { display: none; } .vt-ligne .badge { grid-column: 2; justify-self: start; } .vt-ligne .actions { grid-row: 1; grid-column: 3; }
  .vt-detail { grid-template-columns: 1fr; }
}

/* Visites : une allure par conclusion */
.vt-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.badge.sans-point::before { display: none; }
.puce-relance { font-size: 12px; font-weight: 600; color: var(--doux); white-space: nowrap; }
.puce-relance.retard { color: var(--danger); }
.vt-emoji { font-style: normal; font-size: 26px; line-height: 1; display: inline-block; }
.vt-ligne { position: relative; overflow: hidden; }
/* Favorable : ligne doree, reflet qui passe, sac d'argent qui sautille */
.vt.c-favorable { border-color: rgba(233, 185, 60, .7); border-left-color: #e9b93c; box-shadow: 0 10px 28px -14px rgba(214, 164, 46, .75); }
.vt.c-favorable .vt-ligne { background: linear-gradient(90deg, rgba(255, 214, 92, .42), rgba(255, 214, 92, .10) 70%); }
.vt.c-favorable .vt-ligne::after { content: ""; position: absolute; top: 0; bottom: 0; left: -120px; width: 90px; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: reflet 3.6s ease-in-out infinite; pointer-events: none; }
.vt.c-favorable .vt-emoji { animation: sautille 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px rgba(214, 164, 46, .7)); }
@keyframes sautille { from { transform: translateY(2px) rotate(-6deg) scale(1); } to { transform: translateY(-5px) rotate(6deg) scale(1.12); } }
/* En attente : bleu, bord en pointilles qui pulse, sablier qui se retourne */
.vt.c-en_attente { border-left: 4px dashed #2f7fe6; animation: attente 2.4s ease-in-out infinite alternate; }
.vt.c-en_attente .vt-ligne { background: linear-gradient(90deg, rgba(47, 127, 230, .13), transparent 70%); }
.vt.c-en_attente .vt-emoji { animation: sablier 3s ease-in-out infinite; }
@keyframes attente { from { border-left-color: rgba(47, 127, 230, .35); } to { border-left-color: #2f7fe6; } }
@keyframes sablier { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
/* A revoir : orange, fleche qui tourne par a-coups */
.vt.c-a_revoir { border-left-color: #ea6a1f; }
.vt.c-a_revoir .vt-ligne { background: linear-gradient(90deg, rgba(234, 106, 31, .13), transparent 70%); }
.vt.c-a_revoir .vt-emoji { animation: tourne-coup 2.6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tourne-coup { 0%, 55% { transform: rotate(0); } 80%, 100% { transform: rotate(360deg); } }
/* Non realisable : eteint, sans animation */
.vt.c-defavorable { border-left-color: #8b9892; opacity: .72; }
.vt.c-defavorable .vt-ligne .gros b { text-decoration: line-through; text-decoration-color: rgba(120, 130, 125, .7); }
.vt.c-defavorable .vt-emoji { color: #8b9892; font-size: 20px; }
/* Choix de la conclusion dans le compte rendu */
.conclusions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choix { margin: 0; cursor: pointer; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: block; padding: 10px 12px; border-radius: 11px; border: 2px solid var(--bord); font-size: 14px; font-weight: 600; color: var(--texte); text-align: center; transition: transform var(--vite), border-color var(--vite), background var(--vite), box-shadow var(--vite); }
.choix:hover span { transform: translateY(-1px); box-shadow: var(--ombre); }
.choix input:focus-visible + span { box-shadow: 0 0 0 3px rgba(14, 138, 98, .28); }
.choix.c-favorable input:checked + span { background: linear-gradient(135deg, #ffe58a, #ffc933); border-color: #e0ad1c; color: #5a3c00; }
.choix.c-en_attente input:checked + span { background: #dbecff; border-color: #2f7fe6; color: #1a5fcb; }
.choix.c-a_revoir input:checked + span { background: #ffe3d1; border-color: #ea6a1f; color: #b4410f; }
.choix.c-defavorable input:checked + span { background: #edf0ef; border-color: #8b9892; color: #56635e; }
.voir-tout.relances-vt { margin: 0 0 14px; background: linear-gradient(90deg, rgba(255, 214, 92, .45), rgba(255, 214, 92, .15)); color: #7a5200; font-weight: 700; }
[data-theme=dark] .vt.c-favorable .vt-ligne { background: linear-gradient(90deg, rgba(233, 185, 60, .30), rgba(233, 185, 60, .05) 70%); }
[data-theme=dark] .vt.c-favorable .vt-ligne::after { background: linear-gradient(100deg, transparent, rgba(255, 240, 180, .22), transparent); }
[data-theme=dark] .choix.c-en_attente input:checked + span { background: #132d4d; color: #8ec1ff; }
[data-theme=dark] .choix.c-a_revoir input:checked + span { background: #41240f; color: #ffab7a; }
[data-theme=dark] .choix.c-defavorable input:checked + span { background: #2a3531; color: #b9c6c0; }
[data-theme=dark] .voir-tout.relances-vt { background: linear-gradient(90deg, rgba(233, 185, 60, .30), rgba(233, 185, 60, .08)); color: #ffd978; }

/* Touches de delai (rappels et relances) : petites touches en relief qui s'enfoncent au clic */
.delais { display: flex; gap: 7px; flex-wrap: wrap; margin: 2px 0 9px; }
.delais button, [data-theme=dark] .delais button { padding: 6px 12px; font-size: 13px; font-weight: 700; border-radius: 10px; color: #2b3a34; border: 1px solid #c4cfca; border-bottom-color: #9fb0a8;
  background: linear-gradient(180deg, #ffffff, #e9efec); box-shadow: 0 3px 0 #a9b8b1, 0 5px 9px -3px rgba(16, 32, 26, .35), inset 0 1px 0 #fff; transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, background var(--vite); }
.delais button:hover { background: linear-gradient(180deg, #ffffff, #dfe9e4); transform: translateY(-1px); box-shadow: 0 4px 0 #a9b8b1, 0 8px 12px -3px rgba(16, 32, 26, .4), inset 0 1px 0 #fff; }
.delais button:active { transform: translateY(3px); box-shadow: 0 0 0 #a9b8b1, 0 1px 2px rgba(16, 32, 26, .3), inset 0 2px 3px rgba(16, 32, 26, .18); }
.delais button.choisi, [data-theme=dark] .delais button.choisi { color: #fff; border-color: #0a6b4c; background: linear-gradient(180deg, #19b584, #0e8a62); box-shadow: 0 1px 0 #075a3f, 0 3px 6px -2px rgba(14, 138, 98, .7), inset 0 2px 3px rgba(0, 0, 0, .18); transform: translateY(2px); }
[data-theme=dark] .delais button { color: #e8efec; border-color: #3b4843; border-bottom-color: #18201d; background: linear-gradient(180deg, #37443f, #27322e); box-shadow: 0 3px 0 #121815, 0 6px 10px -3px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12); }
[data-theme=dark] .delais button:hover { background: linear-gradient(180deg, #414f49, #2d3934); }
[data-theme=dark] .delais button:active { box-shadow: 0 0 0 #121815, inset 0 2px 4px rgba(0, 0, 0, .5); }
.lot .delais { margin: 0; }

/* ---------------------------------------------------------------- Zone de texte et suggestion IA */
.zone-texte { border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); overflow: hidden; transition: border-color var(--vite), box-shadow var(--vite); box-shadow: inset 0 1px 2px rgba(16, 32, 26, .04); }
.zone-texte:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 138, 98, .16); }
.zone-texte textarea, [data-theme=dark] .zone-texte textarea { display: block; width: 100%; min-height: 84px; border: 0; border-radius: 0; background: transparent; padding: 12px 14px 6px; line-height: 1.55; resize: none; box-shadow: none; }
.zone-texte textarea:focus { box-shadow: none; }
.zone-texte textarea::placeholder { color: var(--doux); opacity: .75; }
.zone-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px 14px; }
.zone-pied .compteur { font-size: 11px; }
button.ia, [data-theme=dark] button.ia { padding: 5px 12px; font-size: 12px; border-radius: 999px; border: 1px solid transparent; color: #5b2fd4; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #7a52e8, #2fd39a, #ffb347) border-box; position: relative; overflow: hidden; }
button.ia:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(122, 82, 232, .7); }
button.ia span { display: inline-block; }
button.ia:hover span { animation: gigote .5s ease infinite; }
button.ia.reflechit { color: var(--doux); cursor: progress; }
button.ia.reflechit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(122, 82, 232, .22), transparent); animation: balaie 1.1s linear infinite; }
@keyframes balaie { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
[data-theme=dark] button.ia { color: #c9b8ff; background: linear-gradient(#1e2824, #1e2824) padding-box, linear-gradient(120deg, #7a52e8, #2fd39a, #ffb347) border-box; }
.ia-apercu { border-top: 1px dashed var(--bord); padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; animation: monte .25s both; }
.ia-apercu[hidden] { display: none; }
.ia-apercu small { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; margin-bottom: 4px; }
.ia-apercu p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.ia-avant, .ia-apres { padding: 10px 12px; border-radius: 10px; }
.ia-avant { background: rgba(120, 130, 125, .10); } .ia-avant p { color: var(--doux); }
.ia-apres { background: linear-gradient(135deg, rgba(122, 82, 232, .12), rgba(47, 211, 154, .12)); border: 1px solid rgba(122, 82, 232, .3); }
.ia-apres small { color: #7a52e8; } [data-theme=dark] .ia-apres small { color: #c9b8ff; }
.ia-apercu .actions { grid-column: 1 / -1; }
textarea.rempli { animation: rempli 1.2s ease-out; }
@media (max-width: 860px) { .ia-apercu { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Champ date et calendrier maison */
.champ-date { display: inline-flex; }
.date-btn, [data-theme=dark] .date-btn { gap: 9px; padding: 8px 14px; border-radius: 11px; font-weight: 600; background: var(--carte); border: 1px solid var(--bord); }
.date-btn .ico { width: 16px; height: 16px; color: var(--accent); }
.date-btn:hover { border-color: var(--accent); }
.date-btn.vide span { color: var(--doux); font-weight: 400; }
.date-btn.rempli { animation: rempli 1.2s ease-out; }
#calendrier { position: fixed; z-index: 80; width: 300px; padding: 14px; border-radius: 18px; background: var(--carte); border: 1px solid var(--bord); box-shadow: 0 24px 60px -16px rgba(12, 29, 23, .5), 0 2px 6px rgba(12, 29, 23, .08);
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97); transform-origin: top left; transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
#calendrier.ouvert { opacity: 1; pointer-events: auto; transform: none; }
[data-theme=dark] #calendrier { background: #1b2420; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
#calendrier button, [data-theme=dark] #calendrier button { box-shadow: none; }
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-tete b { text-transform: capitalize; font-size: 15px; }
.cal-tete button, [data-theme=dark] .cal-tete button { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; background: none; border-color: transparent; }
.cal-tete button:hover, [data-theme=dark] .cal-tete button:hover { background: var(--accent-clair); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grille i { font-style: normal; text-align: center; font-size: 11px; font-weight: 700; color: var(--doux); padding: 4px 0; }
.cal-grille button, [data-theme=dark] .cal-grille button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 13px; font-weight: 500; }
.cal-grille button:hover, [data-theme=dark] .cal-grille button:hover { background: var(--accent-clair); transform: scale(1.08); }
.cal-grille button.hors { color: var(--doux); opacity: .4; } .cal-grille button.we { color: var(--doux); }
.cal-grille button.jour-j { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 800; }
.cal-grille button.choisi, [data-theme=dark] .cal-grille button.choisi { background: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(14, 138, 98, .9); opacity: 1; animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.cal-heures { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bord); }
.cal-heures small { display: block; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 4px 0; }
.cal-heures div { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-heures button, [data-theme=dark] .cal-heures button { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
.cal-heures button.choisi, [data-theme=dark] .cal-heures button.choisi { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal-pied { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cal-pied .primaire { margin-left: auto; padding: 6px 14px; }

/* ---------------------------------------------------------------- Dossiers Funot : repere rouge discret */
.tag-funot { display: inline-block; margin-left: 7px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 16px; vertical-align: 2px; color: #c2233a; background: rgba(215, 38, 61, .10); border: 1px solid rgba(215, 38, 61, .28); }
tr.funot > td:first-child { box-shadow: inset 3px 0 0 #d7263d; }
.ligne.funot, .fichette.funot { box-shadow: inset 3px 0 0 #d7263d; }
.fichette.funot { box-shadow: inset 3px 0 0 #d7263d, var(--ombre); }
.puce.filtre-funot.actif, [data-theme=dark] .puce.filtre-funot.actif { background: #d7263d; border-color: #d7263d; color: #fff; }
/* Case a cocher sur la fiche */
.coche-funot { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--bord); font-size: 13px; font-weight: 600; color: var(--doux); cursor: pointer; user-select: none; transition: border-color var(--vite), color var(--vite), background var(--vite); }
.coche-funot input { position: absolute; opacity: 0; pointer-events: none; }
.coche-funot i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid currentColor; display: grid; place-items: center; transition: background var(--vite), border-color var(--vite), transform var(--vite); }
.coche-funot i::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.coche-funot:hover { border-color: #d7263d; color: #d7263d; }
.coche-funot.actif { border-color: rgba(215, 38, 61, .5); color: #c2233a; background: rgba(215, 38, 61, .08); }
.coche-funot.actif i { background: #d7263d; border-color: #d7263d; transform: scale(1.05); }
.coche-funot.actif i::after { transform: rotate(-45deg) scale(1); }
/* Bandeau de la fiche : un fin ruban rouge en diagonale dans le coin, et un lisere a gauche */
#tiroir.funot { border-left: 3px solid #d7263d; }
#tiroir.funot::after { content: "FUNOT"; position: absolute; top: 16px; left: -34px; width: 130px; padding: 3px 0; text-align: center; transform: rotate(-45deg); font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #fff; background: linear-gradient(90deg, #b81d33, #e63950, #b81d33); box-shadow: 0 4px 10px -4px rgba(215, 38, 61, .8); pointer-events: none; opacity: .92; }
#tiroir.funot .contenu > .tete:first-child { padding-left: 34px; }
[data-theme=dark] .tag-funot, [data-theme=dark] .coche-funot.actif { color: #ff8091; }

/* Origine d'un rappel : demande par le prospect (orange), relance automatique apres plaquette (bleu), nouvel essai (jaune) */
.type-rappel { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.type-rappel .ico { width: 13px; height: 13px; }
.type-rappel.demande { background: #ffe3d1; color: #b4410f; } .type-rappel.relance { background: #dbecff; color: #1a5fcb; } .type-rappel.essai { background: #fdf0c8; color: #8a5a06; }
.carte.rappels-demandes { border-top: 3px solid #ea6a1f; } .carte.rappels-relances { border-top: 3px solid #2f7fe6; }
[data-theme=dark] .type-rappel.demande { background: #41240f; color: #ffab7a; } [data-theme=dark] .type-rappel.relance { background: #132d4d; color: #8ec1ff; } [data-theme=dark] .type-rappel.essai { background: #3d3211; color: #f0cf6a; }

/* ---------------------------------------------------------------- Menu : chaque page a sa couleur et son animation au survol */
aside nav button { transition: background .25s ease, color .2s ease, transform .2s ease, box-shadow .25s ease; --teinte: 14, 138, 98; }
aside nav button .ico { transition: color .2s ease, filter .25s ease; transform-origin: center; }
aside nav button:hover, [data-theme=dark] aside nav button:hover { background: rgba(var(--teinte), .16); color: inherit; transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(var(--teinte), .35); }
aside nav button:hover .ico { color: rgb(var(--teinte)); filter: drop-shadow(0 0 6px rgba(var(--teinte), .65)); }
aside nav button[data-v=jour] { --teinte: 255, 140, 40; }
aside nav button[data-v=prospects] { --teinte: 47, 127, 230; }
aside nav button[data-v=potentiels] { --teinte: 240, 180, 20; }
aside nav button[data-v=visites] { --teinte: 22, 168, 113; }
aside nav button[data-v=appels] { --teinte: 122, 82, 232; }
aside nav button[data-v=imports] { --teinte: 0, 170, 190; }
aside nav button[data-v=campagnes] { --teinte: 230, 60, 90; }
aside nav button[data-v=modeles] { --teinte: 60, 150, 255; }
/* Potentiels : la case passe au jaune et l'etoile scintille */
aside nav button[data-v=potentiels]:hover, [data-theme=dark] aside nav button[data-v=potentiels]:hover { background: linear-gradient(90deg, rgba(255, 214, 70, .55), rgba(255, 214, 70, .18)); box-shadow: inset 0 0 0 1px rgba(240, 180, 20, .6), 0 6px 18px -8px rgba(240, 180, 20, .8); }
aside nav button[data-v=potentiels]:hover .ico { fill: #ffcf33; color: #e0a100; animation: scintille .7s ease-in-out infinite; }
@keyframes scintille { 0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 2px rgba(255, 200, 40, .6)); } 35% { transform: scale(1.35) rotate(18deg); filter: drop-shadow(0 0 9px rgba(255, 210, 60, 1)); } 65% { transform: scale(.9) rotate(-10deg); filter: drop-shadow(0 0 4px rgba(255, 200, 40, .8)); } }
/* Aujourd'hui : la maison sautille */
aside nav button[data-v=jour]:hover .ico { animation: menu-saut .5s ease infinite alternate; }
@keyframes menu-saut { to { transform: translateY(-3px) scale(1.1); } }
/* Base de donnees : les disques s'empilent */
aside nav button[data-v=prospects]:hover .ico { animation: menu-pile .7s ease-in-out infinite; }
@keyframes menu-pile { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.78) scaleX(1.12); } }
/* Visites techniques : le calendrier bascule comme une page qu'on tourne */
aside nav button[data-v=visites]:hover .ico { animation: menu-page .8s ease-in-out infinite; }
@keyframes menu-page { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
/* Appels Ringover : les barres grandissent */
aside nav button[data-v=appels]:hover .ico { animation: menu-barres .6s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes menu-barres { from { transform: scaleY(.7); } to { transform: scaleY(1.2); } }
/* Imports : la fleche monte */
aside nav button[data-v=imports]:hover .ico { animation: menu-monte .7s ease-in-out infinite; }
@keyframes menu-monte { 0% { transform: translateY(3px); opacity: .6; } 60% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(3px); opacity: .6; } }
/* Campagnes : le trace bat comme un pouls */
aside nav button[data-v=campagnes]:hover .ico { animation: menu-pouls .65s ease-in-out infinite; }
@keyframes menu-pouls { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(1.25) scaleY(1.2); } 50% { transform: scaleX(.9); } }
/* Modeles de mail : l'enveloppe se balance */
aside nav button[data-v=modeles]:hover .ico { animation: menu-balance .6s ease-in-out infinite alternate; }
@keyframes menu-balance { from { transform: rotate(-10deg); } to { transform: rotate(10deg) translateY(-1px); } }

/* ---------------------------------------------------------------- Appels Ringover : trois zones */
h3.zone { margin: 22px 0 10px; font-size: 13px; color: var(--texte); letter-spacing: .05em; }
h3.zone:first-of-type { margin-top: 4px; }
.bande-jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bande-col { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 18px; box-shadow: var(--ombre); display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 8px; }
.bande-col > small { grid-column: 1 / -1; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.bande-col > b { font-size: 38px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.bande-col > span { color: var(--doux); }
.bande-col.total { background: linear-gradient(135deg, var(--accent-clair), var(--carte)); border-color: rgba(14, 138, 98, .35); }
.bande-detail { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bord); font-size: 13px; color: var(--doux); }
.bande-detail b { color: var(--texte); }
.carte .aide, p.aide { color: var(--doux); font-size: 12px; margin: -6px 0 8px; }
.carte.ring-rappeles { border-top: 3px solid #d7263d; } .carte.ring-oublis { border-top: 3px solid #e0a100; }
.tendance-tete { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; color: var(--doux); }
.tendance-tete b { color: var(--texte); font-size: 18px; margin-right: 4px; }
.creneau { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-clair); line-height: 1.5; }
.creneau .ico { color: var(--accent); margin-top: 2px; }
.voir-tout.journal { margin: 2px 0 14px; }
.coche-simple { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; cursor: pointer; }

/* ---------------------------------------------------------------- Telephone Ringover integre */
#tel-flottant { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; color: #fff; background: linear-gradient(135deg, #8b9892, #56635e); box-shadow: 0 12px 28px -8px rgba(16, 32, 26, .55); }
#tel-flottant[hidden] { display: none; }
#tel-flottant .ico { width: 24px; height: 24px; }
#tel-flottant:hover { transform: translateY(-3px) scale(1.05); }
#tel-flottant.pret { background: linear-gradient(135deg, #19b584, #0a6b4c); box-shadow: 0 12px 28px -8px rgba(14, 138, 98, .9); }
#tel-flottant.ouvert { box-shadow: 0 0 0 4px rgba(14, 138, 98, .25), 0 12px 28px -8px rgba(14, 138, 98, .9); }
#tel-flottant.en-appel { background: linear-gradient(135deg, #ff7a45, #d7263d); animation: sonne 1.2s ease-in-out infinite; }
#tel-flottant.en-appel .ico { animation: tremble-tel .25s linear infinite alternate; }
@keyframes sonne { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 38, 61, .55), 0 12px 28px -8px rgba(215, 38, 61, .9); } 60% { box-shadow: 0 0 0 16px rgba(215, 38, 61, 0), 0 12px 28px -8px rgba(215, 38, 61, .9); } }
@keyframes tremble-tel { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
/* Le numero de la fiche devient un vrai bouton d'appel */
.tel[data-action=appeler] { padding: 6px 14px 6px 10px; margin-left: -10px; border-radius: 12px; transition: background var(--vite), transform var(--vite); }
.tel[data-action=appeler]:hover { background: var(--accent-clair); transform: translateX(2px); }
/* Sur grand ecran, la fiche se decale pour laisser la place au telephone ouvert */
@media (min-width: 1500px) { body.tel-ouvert #tiroir { left: calc(50% - 190px); } }
/* Apres un appel, la zone « resultat » de la fiche clignote doucement pour rappeler de le noter */
.attend-resultat { border-radius: 14px; animation: attend-resultat 1s ease-in-out 3; }
@keyframes attend-resultat { 50% { box-shadow: 0 0 0 6px rgba(14, 138, 98, .35); } }

/* ---------------------------------------------------------------- Analyse d'un appel par l'IA */
.analyse { margin: 14px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(122, 82, 232, .35); background: linear-gradient(135deg, rgba(122, 82, 232, .10), rgba(47, 211, 154, .10)); animation: monte .3s both; }
.analyse .tete { margin-bottom: 8px; } .analyse h3 { margin: 0; color: #7a52e8; }
[data-theme=dark] .analyse h3 { color: #c9b8ff; }
.analyse-resume { margin: 0 0 10px; line-height: 1.5; }
.analyse-ligne { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--texte); transition: background var(--vite); }
.analyse-ligne:hover { background: rgba(122, 82, 232, .10); }
.analyse-ligne input { margin-top: 3px; flex: none; }
.analyse-ligne span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.analyse-ligne small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.analyse .actions { margin-top: 10px; }
button.ia.mini { padding: 2px 9px; font-size: 11px; vertical-align: middle; margin-left: 6px; }

/* ---------------------------------------------------------------- Fiche contact : typographie et formulaire */
#tiroir { font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; font-feature-settings: "cv11", "ss01"; letter-spacing: -.005em; }
#tiroir h1 { font-weight: 700; letter-spacing: -.02em; }
#tiroir form[data-form=prospect] { max-width: none; margin: 0; }
.form-tete { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: 18px; }
.avatar { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(135deg, #19b584, #0a6b4c); box-shadow: 0 10px 22px -10px rgba(14, 138, 98, .9); }
.jauge { height: 6px; border-radius: 6px; background: rgba(120, 130, 125, .2); margin-top: 8px; max-width: 320px; overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2fd39a, #0e8a62); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.jauge-texte { display: block; margin-top: 4px; font-size: 12px; }
.blocs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bloc { border: 1px solid var(--bord); border-radius: 16px; padding: 14px 16px 16px; background: rgba(255, 255, 255, .55); transition: border-color var(--vite), box-shadow var(--vite); }
[data-theme=dark] .bloc { background: rgba(10, 16, 14, .35); }
.bloc:focus-within { border-color: rgba(14, 138, 98, .55); box-shadow: 0 0 0 4px rgba(14, 138, 98, .10); }
.bloc:last-of-type { grid-column: 1 / -1; }
.bloc h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--texte); letter-spacing: .07em; }
.bloc h3 .ico { width: 16px; height: 16px; color: var(--accent); }
.bloc-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; position: relative; }
.champ.plein { grid-column: 1 / -1; }
.champ > span { font-size: 12px; font-weight: 600; color: var(--doux); transition: color var(--vite); }
.champ:focus-within > span { color: var(--accent); }
.saisie { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--bord); background: var(--carte); transition: border-color var(--vite), box-shadow var(--vite), background var(--vite); }
[data-theme=dark] .saisie { background: #101714; }
.saisie:hover { border-color: #c6d0cb; } [data-theme=dark] .saisie:hover { border-color: #3b4843; }
.saisie:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(14, 138, 98, .14); }
.saisie > .ico { width: 17px; height: 17px; color: var(--doux); flex: none; transition: color var(--vite); }
.saisie:focus-within > .ico { color: var(--accent); }
.saisie input, .saisie select, [data-theme=dark] .saisie input, [data-theme=dark] .saisie select { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; box-shadow: none; font-size: 15px; font-weight: 500; border-radius: 0; }
.saisie input:focus, .saisie select:focus { box-shadow: none; }
.saisie input::placeholder { color: var(--doux); opacity: .6; font-weight: 400; }
.saisie .etat { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; transform: scale(0); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.saisie.valide .etat { background: #16a871; transform: scale(1); } .saisie.valide .etat::after { content: "✓"; }
.saisie.douteux { border-color: #ea6a1f; } .saisie.douteux .etat { background: #ea6a1f; transform: scale(1); } .saisie.douteux .etat::after { content: "!"; }
.civilites { display: flex; gap: 8px; }
.civilites button { flex: 1; height: 40px; border-radius: 12px; font-weight: 600; }
.civilites button.choisi, [data-theme=dark] .civilites button.choisi { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px rgba(14, 138, 98, .9); }
.compteur-lgt { padding: 0 4px; }
.compteur-lgt input { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.compteur-lgt input::-webkit-outer-spin-button, .compteur-lgt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur-lgt button, [data-theme=dark] .compteur-lgt button { width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: 18px; font-weight: 700; flex: none; }
.bloc .coche-funot { height: 44px; align-self: flex-start; }
.fiche-form .adresse-auto .suggestions { top: 100%; }
.form-pied { position: sticky; bottom: -26px; margin: 16px -28px -26px; padding: 14px 28px; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, transparent, var(--carte) 30%); border-radius: 0 0 20px 20px; }
.form-pied small { margin-right: auto; }
.form-pied .primaire { padding: 11px 26px; font-size: 15px; border-radius: 12px; }
[data-theme=dark] .form-pied { background: linear-gradient(180deg, transparent, #171f1c 30%); }
@media (max-width: 860px) { .blocs, .bloc-champs { grid-template-columns: 1fr; } .form-pied { bottom: -18px; margin: 14px -18px -18px; padding: 12px 18px; } .form-pied small { display: none; } }

/* ---------------------------------------------------------------- Resultat de l'appel : cartes et tuiles */
.issues { display: flex; flex-direction: column; gap: 8px; }
.issue, [data-theme=dark] .issue { --c: 14, 138, 98; position: relative; border: 1.5px solid var(--bord); background: var(--carte); color: var(--texte); box-shadow: none; text-align: left; transition: transform var(--vite), border-color var(--vite), background var(--vite), box-shadow var(--vite); }
[data-theme=dark] .issue { background: rgba(10, 16, 14, .45); }
.issue-ico { flex: none; display: grid; place-items: center; border-radius: 12px; color: rgb(var(--c)); background: rgba(var(--c), .14); transition: transform var(--doucement), background var(--vite), color var(--vite); }
.issue:hover, [data-theme=dark] .issue:hover { border-color: rgba(var(--c), .7); background: rgba(var(--c), .08); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(var(--c), .9); }
.issue:hover .issue-ico { transform: scale(1.08) rotate(-4deg); }
.issue:active { transform: scale(.98); }
.issue.choisi, [data-theme=dark] .issue.choisi { border-color: rgb(var(--c)); background: linear-gradient(135deg, rgba(var(--c), .24), rgba(var(--c), .07)); box-shadow: 0 0 0 4px rgba(var(--c), .16); }
.issue.choisi .issue-ico { background: rgb(var(--c)); color: #fff; }
/* Les deux issues principales */
.issue.majeure { justify-content: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px; }
.issue.majeure .issue-ico { width: 46px; height: 46px; } .issue.majeure .issue-ico .ico { width: 22px; height: 22px; }
.issue-txt { display: flex; flex-direction: column; min-width: 0; }
.issue-txt b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.issue-txt small { font-size: 12.5px; font-weight: 400; }
.issue-coche { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bord); display: grid; place-items: center; font-style: normal; transition: background var(--vite), border-color var(--vite), transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.issue.choisi .issue-coche { background: rgb(var(--c)); border-color: rgb(var(--c)); transform: scale(1.1); }
.issue.choisi .issue-coche::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; }
/* Les cinq autres */
.issues-autres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.issues-autres .issue { flex-direction: column; justify-content: flex-start; gap: 7px; padding: 12px 6px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; }
.issues-autres .issue-ico { width: 34px; height: 34px; border-radius: 10px; } .issues-autres .issue-ico .ico { width: 17px; height: 17px; }
@media (max-width: 860px) { .issues-autres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* « Faux numero » est gris fonce : en mode sombre il lui faut un gris clair pour rester lisible */
[data-theme=dark] .issue[data-r=faux_numero] { --c: 165, 177, 171 !important; }

/* ---------------------------------------------------------------- Mode saisie : un resultat est choisi, son formulaire se deroule */
.issue-choisie { --c: 14, 138, 98; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid rgb(var(--c)); background: linear-gradient(135deg, rgba(var(--c), .24), rgba(var(--c), .07)); }
.issue-choisie .issue-ico { width: 38px; height: 38px; background: rgb(var(--c)); color: #fff; }
.issue-choisie b { font-size: 16px; letter-spacing: -.01em; }
.issue-choisie .lien { margin-left: auto; }
[data-theme=dark] .issue-choisie[style*="54, 66, 61"] { --c: 165, 177, 171 !important; }
/* Rien ne bouge autour : le formulaire se devoile de haut en bas (masque), puis ses champs arrivent l'un apres l'autre.
   Uniquement transform, opacity et clip-path, pour rester fluide. */
.issue-choisie { position: relative; overflow: hidden; }
.fiche-corps.entree .issue-choisie { animation: choisie-pose .45s cubic-bezier(.2, .9, .25, 1.15) both; }
.fiche-corps.entree .issue-choisie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-110%); animation: choisie-reflet .8s ease-out .2s both; pointer-events: none; }
@keyframes choisie-pose { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes choisie-reflet { to { transform: translateX(110%); } }
.fiche-corps.entree .deroule > div { animation: devoile .6s cubic-bezier(.22, 1, .36, 1) .08s both; }
@keyframes devoile { from { clip-path: inset(0 0 100% 0 round 16px); opacity: .4; } to { clip-path: inset(0 0 -20px 0 round 16px); opacity: 1; } }
.fiche-corps.entree .saisie-appel .bloc-champs > *, .fiche-corps.entree .saisie-appel > .actions { animation: champ-arrive .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.16s + var(--i, 0) * .07s); }
.saisie-appel .bloc-champs > :nth-child(2) { --i: 1; } .saisie-appel .bloc-champs > :nth-child(3) { --i: 2; } .saisie-appel .bloc-champs > :nth-child(4) { --i: 3; }
.saisie-appel .bloc-champs > :nth-child(n+5) { --i: 4; } .saisie-appel > .actions { --i: 5; }
/* La place de la barre de défilement est réservée : son apparition ne décale plus le contenu */
#tiroir { scrollbar-gutter: stable; }
@keyframes champ-arrive { from { opacity: 0; transform: translateY(-14px); } }
.fiche-corps.retour > :last-child { animation: apparait .3s both; }
.saisie-appel { margin: 14px 0 0; padding: 16px; border-radius: 16px; border: 1px solid var(--bord); background: rgba(255, 255, 255, .55); animation: none; }
[data-theme=dark] .saisie-appel { background: rgba(10, 16, 14, .35); }
.saisie-appel .actions { margin-top: 14px; }
.saisie-appel .actions .primaire { padding: 11px 22px; font-size: 15px; border-radius: 12px; }
.saisie-appel .zone-texte { margin: 0 3px 3px; }
/* Calendrier pose dans le formulaire : le mois a gauche, les heures a droite */
.cal-bloc { border: 1.5px solid var(--bord); border-radius: 14px; background: var(--carte); overflow: hidden; }
[data-theme=dark] .cal-bloc { background: #101714; }
.cal-choix { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--bord); font-size: 15px; }
.cal-choix .ico { width: 17px; height: 17px; color: var(--accent); }
.cal-choix b { text-transform: capitalize; } .cal-choix.vide b { color: var(--doux); font-weight: 400; }
.cal-choix.rempli { animation: rempli-fond 1.1s ease-out; }
@keyframes rempli-fond { from { background: rgba(14, 138, 98, .28); } }
.cal-inline { display: grid; grid-template-columns: minmax(230px, 1.25fr) minmax(0, 1fr); gap: 14px; padding: 12px 14px 14px; align-items: start; }
.cal-inline .cal-heures { margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--bord); }
.cal-inline .cal-heures button, [data-theme=dark] .cal-inline .cal-heures button { padding: 6px 10px; font-size: 13px; box-shadow: none; }
.cal-inline .cal-grille button, .cal-inline .cal-tete button, [data-theme=dark] .cal-inline .cal-grille button, [data-theme=dark] .cal-inline .cal-tete button { box-shadow: none; }
@media (max-width: 1100px) { .cal-inline { grid-template-columns: 1fr; } .cal-inline .cal-heures { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--bord); } }
@media (max-width: 860px) { .fiche-corps.mode-saisie { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Fiche : listes repliees et boutons de validation toujours visibles */
.repli summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bord); font-size: 13px; font-weight: 600; color: var(--doux); transition: background .15s, color .15s; }
.repli summary::-webkit-details-marker { display: none; }
.repli summary:hover { background: rgba(14, 138, 98, .12); color: var(--accent); }
.repli .fleche { display: inline-block; transition: transform .2s; }
.repli[open] .fleche { transform: rotate(90deg); }
.repli[open] > .histo { animation: champ-arrive .3s cubic-bezier(.22, 1, .36, 1) both; }
/* Les boutons « Enregistrer » restent colles en bas de la fenetre tant que le formulaire est a l'ecran */
.saisie-appel .actions { position: sticky; bottom: -26px; z-index: 2; margin: 14px -16px -16px; padding: 12px 16px 14px; border-top: 1px solid var(--bord); border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--carte) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* ---------------------------------------------------------------- Fiche : commission en bandeau compact, notes modifiables au double-clic */
#tiroir .commission { gap: 12px; margin: 12px 0; padding: 8px 14px 8px 10px; border-radius: 14px; }
#tiroir .commission .tirelire { width: calc(40px * var(--taille, 1)); height: calc(36px * var(--taille, 1)); }
#tiroir .commission .tirelire svg { width: calc(36px * var(--taille, 1)); filter: drop-shadow(0 4px 4px rgba(184, 69, 106, .25)); }
#tiroir .commission:not(.active) .tirelire svg { filter: grayscale(.85) opacity(.55); }
#tiroir .commission .rayons { inset: -12px; }
#tiroir .commission .piece { top: -4px; width: 10px; height: 10px; margin-left: -6px; font-size: 6px; box-shadow: 0 0 0 1px #d99a12 inset; }
#tiroir .commission.active .piece:nth-of-type(3) { margin-left: -2px; } #tiroir .commission.active .piece:nth-of-type(4) { margin-left: -9px; }
#tiroir .commission .chiffres { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
#tiroir .commission .chiffres small { grid-column: 1; font-size: 11px; line-height: 1.2; }
#tiroir .commission .montant { grid-column: 1; font-size: 19px; line-height: 1.2; }
#tiroir .commission .calcul { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 12px; flex-wrap: nowrap; white-space: nowrap; }
#tiroir .commission .calcul input { width: 56px; padding: 4px 6px; }
.note-rapide { white-space: pre-wrap; cursor: text; border-radius: 8px; margin: -3px -6px !important; padding: 3px 6px; transition: background .15s, box-shadow .15s; }
.note-rapide:hover { background: rgba(14, 138, 98, .10); box-shadow: 0 0 0 1px rgba(14, 138, 98, .25); }
.note-rapide textarea { display: block; width: 100%; min-height: 90px; resize: vertical; font: inherit; }
.note-rapide small { display: block; margin-top: 4px; color: var(--doux); font-size: 11px; }
/* ---------------------------------------------------------------- Fluidite
   Les flous d'arriere-plan en plein ecran et les fonds animes en continu obligent le navigateur a tout redessiner
   a chaque image : ils sont remplaces par des equivalents fixes. Le menu en verre, lui, est conserve. */
#voile { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 18, 14, .58); }
#modale { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 18, 14, .62); }
#tiroir { will-change: transform, opacity; }
#tiroir.vip { animation: none; background-size: 100% 100%; }
#tiroir.vip .infos, #tiroir.vip .resultats:not(.majeurs) button, #tiroir.vip .commission { -webkit-backdrop-filter: none; backdrop-filter: none; }
.saisie-appel .actions { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--carte); }

/* ================================================================ Harmonie d'ensemble
   Une seule typo, une seule courbe d'animation, les memes rayons, les memes survols partout. */
:root { --vite: .16s cubic-bezier(.22, 1, .36, 1); --doucement: .34s cubic-bezier(.22, 1, .36, 1); --rayon-s: 10px; }
body { font-family: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; font-feature-settings: "cv11", "ss01"; letter-spacing: -.005em; }
::selection { background: rgba(48, 196, 147, .32); }
* { scrollbar-width: thin; scrollbar-color: rgba(125, 145, 137, .45) transparent; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Titres de page */
main h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.tete { align-items: flex-end; flex-wrap: nowrap; gap: 18px; margin-bottom: 20px; }
.tete > div:first-child { flex: 1; min-width: 0; }
.tete > .actions, .tete > button { flex: none; }
.tete p { margin-top: 4px; font-size: 14px; line-height: 1.45; }
#tiroir .tete { align-items: center; }
@media (max-width: 1000px) { .tete { flex-wrap: wrap; align-items: flex-start; } }

/* Boutons et champs : memes rayons, meme relief */
button, .bouton, input, select, textarea { border-radius: var(--rayon-s); }
input, select { padding: 9px 12px; }
button.primaire, .bouton.primaire { letter-spacing: -.005em; }
button.primaire:hover, .bouton.primaire:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(14, 138, 98, .95); }
button.primaire:active { transform: scale(.97); }
.filtres { gap: 8px; margin-bottom: 14px; }
.puce { padding: 6px 13px; transition: background var(--vite), color var(--vite), border-color var(--vite), transform var(--vite); }
.puce:hover { transform: translateY(-1px); }

/* Le rappel « mode local » devient une ligne discrete au lieu d'un bandeau jaune sur chaque page */
html .demo, html[data-theme=dark] .demo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; margin-bottom: 14px; border-radius: 999px; border: 1px dashed var(--bord); background: none; color: var(--doux); font-size: 12px; }
.demo b { color: var(--texte); font-weight: 600; }
.demo .lien { padding: 2px 8px; font-size: 12px; }

/* Cartes, tuiles et onglets : meme survol */
.carte, .tuile, .onglet, .defile { border-radius: var(--rayon); }
.carte { padding: 18px 20px; }
.tuile, .onglet, .fichette { transition: transform var(--doucement), box-shadow var(--doucement), border-color var(--vite), background var(--vite); }
button.tuile:hover, .onglet:hover, .fichette:hover { transform: translateY(-2px); }
.tuile b, .onglet b { letter-spacing: -.02em; }
h2 .compte { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Listes : une ligne par information, le trop long est coupe proprement au lieu de passer a la ligne */
.ligne { padding: 9px 10px; margin: 0 -10px; border-radius: 12px; }
.ligne .gros br { display: none; }
.ligne .gros b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; }
.ligne .gros small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ligne .gros b { font-weight: 600; }
.ligne .droite { flex: none; }
.ligne:active { transform: scale(.995); }

/* Tableaux : en-tetes discrets, repere vert sur la ligne survolee */
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; }
td { font-variant-numeric: tabular-nums; }
tbody tr:not(.fixe):not(.groupe):not(.funot):hover > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pagination { padding: 14px 2px 0; font-size: 13px; }

/* Fenetres : la fiche et l'apercu du mail s'ouvrent de la meme facon */
#tiroir, .boite { border-radius: 22px; }
.boite { transform: translateY(10px) scale(.96); }
#modale { transition: opacity var(--doucement); }
#tiroir .contenu.entree { animation: apparait .3s both; }

/* Messages en bas d'ecran */
#toast { bottom: 26px; padding: 12px 20px; border-radius: 14px; font-weight: 600; letter-spacing: -.005em; transition: opacity var(--vite), transform .45s cubic-bezier(.2, 1.3, .4, 1); }

/* Textes vides : centres et calmes */
.carte > .vide, td.vide { text-align: center; padding: 22px 0; font-size: 13px; }
/* ================================================================ Carte */
aside nav button[data-v=carte] { --teinte: 47, 127, 230; }
aside nav button[data-v=carte]:hover .ico { animation: menu-page .8s ease-in-out infinite; }
.plan-legende { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.plan-couche { gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: .55; transition: opacity var(--vite), transform var(--vite), box-shadow var(--vite), border-color var(--vite); }
.plan-couche i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); filter: grayscale(1); transition: filter var(--vite); }
.plan-couche b { font-variant-numeric: tabular-nums; color: var(--doux); font-weight: 600; }
.plan-couche:hover { transform: translateY(-1px); opacity: .85; }
.plan-couche.actif { opacity: 1; border-color: color-mix(in srgb, var(--c) 55%, var(--bord)); box-shadow: 0 6px 16px -10px var(--c); }
.plan-couche.actif i { filter: none; }
.plan-hors { margin-left: 4px; }
.plan-zone { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.plan-cadre { position: relative; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre); background: var(--carte); }
#plan { height: calc(calc(100vh / var(--z, 1)) - 235px); min-height: 430px; z-index: 0; isolation: isolate; background: var(--fond); font: inherit; }
.plan-attente { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--doux); }
.plan-liste { margin: 0; max-height: calc(calc(100vh / var(--z, 1)) - 235px); overflow-y: auto; }
.plan-liste h2 + .vide { padding: 4px 0 14px; text-align: left; }
.plan-liste h2:not(:first-child) { margin-top: 18px; }
.plan-ligne { width: 100%; justify-content: flex-start; gap: 10px; text-align: left; border: 0; background: none; padding: 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 12px; box-shadow: none; }
.plan-ligne i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.plan-ligne span { min-width: 0; display: grid; }
.plan-ligne b, .plan-ligne small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-ligne b { font-weight: 600; }
@media (max-width: 1100px) { .plan-zone { grid-template-columns: 1fr; } }
/* Grappes de la base : une bulle chiffree, d'autant plus grande qu'il y a de cibles */
.plan-grappe { width: var(--t); height: var(--t); border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px/1 "Inter", system-ui, sans-serif; background: color-mix(in srgb, var(--c) 88%, #000); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 28%, transparent), 0 6px 14px -6px rgba(0, 0, 0, .5); transition: transform var(--vite); }
.plan-grappe:hover { transform: scale(1.1); }
.plan-point { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); }
/* Epingles de couleur : tout ce qui est en cours */
.plan-epingle { position: relative; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--c); border: 2px solid #fff; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .55); display: grid; place-items: center; transition: transform var(--vite); }
.plan-epingle span { transform: rotate(45deg); display: grid; color: #fff; }
.plan-epingle .ico { width: 15px; height: 15px; }
.plan-epingle:hover { transform: rotate(-45deg) scale(1.15); }
.plan-epingle.gros { width: 36px; height: 36px; margin: -6px 0 0 -3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 30%, transparent), 0 8px 14px -4px rgba(0, 0, 0, .6); }
.plan-epingle em { position: absolute; top: 100%; left: 0; transform: rotate(45deg) translate(6px, 20px); transform-origin: top left; white-space: nowrap; font: 700 11px/1 "Inter", system-ui, sans-serif; font-style: normal; padding: 3px 7px; border-radius: 999px; background: var(--c); color: #fff; box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .5); }
/* Bulle d'information */
#plan .leaflet-popup-content-wrapper { border-radius: 16px; background: var(--carte); color: var(--texte); box-shadow: var(--ombre-forte); border: 1px solid var(--bord); }
#plan .leaflet-popup-tip { background: var(--carte); }
#plan .leaflet-popup-content { margin: 14px 16px; font: 13px/1.45 "Inter", system-ui, sans-serif; }
.plan-bulle { display: grid; gap: 3px; min-width: 200px; }
.plan-bulle b { font-size: 14px; line-height: 1.3; }
.plan-bulle em { font-style: normal; font-weight: 600; color: var(--texte); }
.plan-bulle .approx { font-style: italic; opacity: .8; }
.plan-bulle button { margin-top: 8px; }
.plan-tag { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c); margin-bottom: 3px; }
#plan .leaflet-tooltip { border: 0; border-radius: 8px; padding: 5px 9px; background: #17211d; color: #fff; font: 600 12px/1.2 "Inter", system-ui, sans-serif; box-shadow: var(--ombre); }
#plan .leaflet-tooltip-top::before { border-top-color: #17211d; }
#plan .leaflet-bar { border: 1px solid var(--bord) !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--ombre) !important; }
#plan .leaflet-bar a { background: var(--carte); color: var(--texte); border-bottom-color: var(--bord); }
#plan .leaflet-bar a:hover { background: var(--accent-clair); color: var(--texte); }
#plan .leaflet-control-attribution { background: color-mix(in srgb, var(--carte) 75%, transparent) !important; color: var(--doux) !important; font-size: 10px; }
#plan .leaflet-control-attribution a { color: inherit; }#plan.sombre .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.55); }
#plan .leaflet-tile-pane { filter: saturate(.75) contrast(.97); }
/* Appels Ringover : numeros sans fiche */
.carte.ring-sans-fiche { border-top: 3px solid #2f7fe6; }
button.creer-fiche { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-clair); border-color: transparent; white-space: nowrap; }
button.creer-fiche:hover, .ligne:hover button.creer-fiche { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
[data-theme=dark] button.creer-fiche:hover, [data-theme=dark] .ligne:hover button.creer-fiche { color: #06241a; }
td button.creer-fiche { margin-left: 8px; padding: 3px 10px; font-size: 12px; }
/* ================================================================ Connexion, equipe et activite */
.connexion { background: none; }
.connexion .carte.cx { width: min(400px, 100%); padding: 30px 30px 22px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; background: color-mix(in srgb, var(--carte) 82%, transparent); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 30px 80px -30px rgba(12, 29, 23, .55), 0 0 0 1px color-mix(in srgb, var(--bord) 70%, transparent); animation: cx-entre .6s cubic-bezier(.22, 1, .36, 1) both; }
.connexion .carte.cx > * + * { margin-top: 0; }
@keyframes cx-entre { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.cx .grand-logo { width: 170px; margin-bottom: 4px; }
.cx h1 { font-size: 24px; text-align: center; letter-spacing: -.02em; }
.cx-sous { margin: -8px 0 4px; text-align: center; color: var(--doux); line-height: 1.45; }
.cx .champ > span { font-size: 12px; }
.cx .saisie { height: 46px; }
.cx button.primaire { height: 46px; margin-top: 4px; font-size: 15px; border-radius: 12px; }
.cx button.lien { align-self: center; width: auto; }
.cx-erreur { margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(217, 72, 61, .12); border: 1px solid rgba(217, 72, 61, .35); color: var(--danger); font-size: 13px; font-weight: 500; animation: cx-secoue .4s; }
@keyframes cx-secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cx-aide, .cx-version { text-align: center; line-height: 1.4; }
.cx-version { margin-top: 6px; opacity: .7; font-size: 11px; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 62% 48%), hsl(calc(var(--h) + 40) 62% 38%)); box-shadow: 0 4px 10px -4px hsl(var(--h) 62% 40% / .8); }
.equipe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.membre { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bord); }
h2 + .membre { border-top: 0; padding-top: 2px; }
.membre .gros { flex: 1; min-width: 0; display: grid; gap: 2px; }
.membre .actions { flex: none; }
.membre .actions button { padding: 5px 11px; font-size: 13px; }
.equipe .aide { margin: 0; color: var(--doux); font-size: 13px; }
.activite { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--bord); }
.activite .avatar { width: 30px; height: 30px; font-size: 11px; margin-top: 2px; }
.activite > div { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.activite p { margin: 0; overflow-wrap: anywhere; }
.modif-champ { display: inline-block; max-width: 100%; margin: 0 4px 2px 0; padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--bord) 45%, transparent); font-size: 12px; overflow-wrap: anywhere; }
.modif-champ i { font-style: normal; color: var(--doux); margin-right: 3px; }
.histo.modif { border-left-color: #7a52e8; }
aside nav button[data-v=equipe] { --teinte: 122, 82, 232; }
@media (max-width: 1000px) { .equipe { grid-template-columns: 1fr; } }.membre .gros > b { display: flex; align-items: center; gap: 8px; }
.membre .gros .badge { justify-self: start; width: max-content; }
/* Aujourd'hui : le parcours des potentiels, en cinq etapes qui s'enchainent */
.grille .carte.parcours { grid-column: 1 / -1; }
.parcours-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.parcours-etape { position: relative; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px 12px 22px; border: 0; border-radius: 4px; text-align: left; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 72%, #000)); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); transition: transform var(--doucement), filter var(--vite); }
.parcours-etape:first-child { padding-left: 14px; border-radius: 12px 4px 4px 12px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.parcours-etape:last-child { border-radius: 4px 12px 12px 4px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
.parcours-etape:hover, [data-theme=dark] .parcours-etape:hover { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 72%, #000)); transform: translateY(-2px); filter: brightness(1.1); }
[data-theme=dark] .parcours-etape { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); }
.parcours-etape small { color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.parcours-etape b { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.parcours-etape.vide { filter: saturate(.35) opacity(.6); }
.parcours-bilan { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 14px; color: var(--doux); font-size: 14px; }
.parcours-bilan b { color: var(--texte); font-size: 16px; }
.parcours-bilan .or b { color: #c98a0a; } [data-theme=dark] .parcours-bilan .or b { color: #f2c75a; }
@media (max-width: 900px) { .parcours-etapes { grid-template-columns: 1fr; } .parcours-etape, .parcours-etape:first-child, .parcours-etape:last-child { clip-path: none; border-radius: 12px; padding-left: 14px; } }
/* Aujourd'hui : relances apres plaquette, une carte par prospect */
@media (min-width: 1150px) { .grille .carte.rappels-relances { grid-column: span 2; } }
.relance-bilan { margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #d9483d; vertical-align: 1px; animation: relance-pouls 1.8s ease-in-out infinite; }
@keyframes relance-pouls { 50% { box-shadow: 0 0 0 5px rgba(217, 72, 61, .22); } }
.relance { --c: 47, 127, 230; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; margin-top: 8px; border-radius: 14px; cursor: pointer; border: 1px solid rgba(var(--c), .28); border-left: 4px solid rgb(var(--c)); background: linear-gradient(90deg, rgba(var(--c), .11), rgba(var(--c), .02) 60%); transition: transform var(--doucement), box-shadow var(--doucement), background var(--vite); }
.relance.en-retard { --c: 217, 72, 61; }
.relance.ce-jour { --c: 242, 113, 28; }
.relance:hover { transform: translateX(3px); box-shadow: 0 10px 24px -14px rgba(var(--c), .9); background: linear-gradient(90deg, rgba(var(--c), .18), rgba(var(--c), .04) 70%); }
.relance-jours { display: grid; justify-items: center; align-content: center; width: 72px; height: 54px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, rgb(var(--c)), color-mix(in srgb, rgb(var(--c)) 70%, #000)); box-shadow: 0 6px 14px -8px rgb(var(--c)); }
.relance-jours b { font-size: 19px; line-height: 1.1; letter-spacing: -.02em; }
.relance-jours small { white-space: nowrap; color: rgba(255, 255, 255, .85); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.relance-qui { min-width: 0; display: grid; gap: 1px; }
.relance-qui > b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relance-qui small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relance-note { font-style: italic; opacity: .85; }
.relance-suite { display: grid; justify-items: end; gap: 4px; }
.relance-urgence { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: rgb(var(--c)); background: rgba(var(--c), .14); white-space: nowrap; }
.relance-urgence .ico { width: 13px; height: 13px; }
.relance-gain { color: #c98a0a; font-weight: 600; } [data-theme=dark] .relance-gain { color: #f2c75a; }
.relance-suite .bouton { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
[data-theme=dark] .relance.en-retard .relance-urgence { color: #ff9c92; } [data-theme=dark] .relance.ce-jour .relance-urgence { color: #ffab7a; }
@media (max-width: 700px) { .relance { grid-template-columns: auto minmax(0, 1fr); } .relance-suite { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; } }
/* ================================================================ Mails : trois colonnes */
aside nav button[data-v=mails] { --teinte: 139, 92, 246; }
aside nav button[data-v=mails]:hover .ico { animation: menu-monte .7s ease-in-out infinite; }
.mails-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mails-col { margin: 0; padding: 16px 14px 14px; border-top: 3px solid rgb(var(--t)); }
.mails-col.col-envoyer { --t: 139, 92, 246; } .mails-col.col-attente { --t: 47, 127, 230; } .mails-col.col-relancer { --t: 242, 113, 28; }
.mails-col h2 { margin-bottom: 4px; }
.mails-col .aide { margin: 0 0 6px; color: var(--doux); font-size: 13px; min-height: 2.9em; }
.mails-liste { max-height: calc(calc(100vh / var(--z, 1)) - 290px); overflow-y: auto; margin: 0 -6px; padding: 0 6px 4px; }
.mails-liste h3 { margin: 18px 0 2px; }
.mail-carte { --c: 139, 92, 246; display: grid; gap: 6px; padding: 11px 12px; margin-top: 8px; border-radius: 14px; cursor: pointer; border: 1px solid rgba(var(--c), .28); border-left: 4px solid rgb(var(--c)); background: linear-gradient(120deg, rgba(var(--c), .11), rgba(var(--c), .02) 65%); transition: transform var(--doucement), box-shadow var(--doucement), background var(--vite); }
.mail-carte.en-attente { --c: 47, 127, 230; } .mail-carte.ce-jour { --c: 242, 113, 28; } .mail-carte.en-retard { --c: 217, 72, 61; } .mail-carte.a-retenter { --c: 124, 143, 136; }
.mail-carte:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(var(--c), .95); background: linear-gradient(120deg, rgba(var(--c), .17), rgba(var(--c), .04) 70%); }
.mail-tete { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mail-tete .relance-jours { flex: none; width: 70px; height: 46px; }
.mail-tete .relance-jours b { font-size: 16px; display: grid; } .mail-tete .relance-jours .ico { width: 18px; height: 18px; }
.mail-tete .relance-jours small { font-size: 7.5px; letter-spacing: 0; }
.mail-qui { min-width: 0; display: grid; }
.mail-qui > b { font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mail-qui small, .mail-carte > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-carte > small.relance-note { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mail-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mail-rang { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: rgb(var(--c)); }
.mail-rang i { width: 14px; height: 6px; border-radius: 3px; background: rgba(var(--c), .22); }
.mail-rang i.fait { background: rgb(var(--c)); } .mail-rang i.en-cours { background: rgb(var(--c)); animation: rang-pouls 1.4s ease-in-out infinite; }
.mail-rang i:last-of-type { margin-right: 4px; }
@keyframes rang-pouls { 50% { opacity: .35; } }
[data-theme=dark] .mail-carte.en-retard .mail-rang, [data-theme=dark] .mail-carte.en-retard .relance-urgence { color: #ff9c92; }
[data-theme=dark] .mail-carte.ce-jour .mail-rang, [data-theme=dark] .mail-carte.ce-jour .relance-urgence { color: #ffab7a; }
[data-theme=dark] .mail-carte.en-attente .mail-rang { color: #8ec1ff; }
.mail-pied { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.mail-pied .bouton, .mail-pied button { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
.mail-pied .primaire { flex: 1; }
.mail-issues { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-top: 8px; margin-top: 2px; border-top: 1px dashed rgba(var(--c), .35); }
.mail-issues small { width: 100%; font-size: 11px; }
.mail-issues button { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; }
.mail-issues button.oui { color: #08744c; border-color: rgba(18, 183, 106, .5); background: rgba(18, 183, 106, .12); }
.mail-issues button.oui:hover { background: #12b76a; color: #fff; border-color: #12b76a; }
.mail-issues button.non:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
[data-theme=dark] .mail-issues button.oui { color: #6fe0b1; }
.resume-mails { cursor: pointer; transition: transform var(--doucement), box-shadow var(--doucement); }
.resume-mails:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.resume-chiffres { display: grid; gap: 8px; margin-bottom: 4px; }
.resume-chiffres span { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 12px; font-weight: 600; }
.resume-chiffres b { font-size: 22px; letter-spacing: -.02em; min-width: 30px; font-variant-numeric: tabular-nums; }
.resume-chiffres small { margin-left: auto; color: inherit; font-weight: 700; }
@media (max-width: 1100px) { .mails-colonnes { grid-template-columns: 1fr; } .mails-liste { max-height: none; } .mails-col .aide { min-height: 0; } }
/* Relance de la plaquette : quatre gros boutons, et un rouge de plus en plus franc a chaque relance */
.mail-carte.r1, .panneau-relance.r1 { --c: 242, 113, 28; --force: .10; }
.mail-carte.r2, .panneau-relance.r2 { --c: 226, 68, 44; --force: .16; }
.mail-carte.r3, .panneau-relance.r3 { --c: 190, 24, 44; --force: .24; }
.mail-carte.r1, .mail-carte.r2, .mail-carte.r3 { background: linear-gradient(120deg, rgba(var(--c), calc(var(--force) + .06)), rgba(var(--c), calc(var(--force) - .06)) 70%); border-color: rgba(var(--c), .45); border-left-width: 5px; }
.mail-carte.en-retard { box-shadow: 0 0 0 2px rgba(var(--c), .28); }
[data-theme=dark] .mail-carte.r2 .mail-rang, [data-theme=dark] .mail-carte.r3 .mail-rang, [data-theme=dark] .mail-carte.r2 .relance-urgence, [data-theme=dark] .mail-carte.r3 .relance-urgence, [data-theme=dark] .panneau-relance .mail-rang { color: #ff9c92; }
[data-theme=dark] .mail-carte.r1 .mail-rang, [data-theme=dark] .mail-carte.r1 .relance-urgence { color: #ffab7a; }
.suites { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 6px; }
button.suite { --s: 124, 143, 136; justify-content: flex-start; gap: 10px; padding: 10px 12px; text-align: left; border-radius: 12px; border: 1.5px solid rgba(var(--s), .45); background: rgba(var(--s), .10); transition: transform var(--vite), background var(--vite), color var(--vite), box-shadow var(--vite); }
button.suite .ico { width: 20px; height: 20px; color: rgb(var(--s)); transition: color var(--vite); }
button.suite span { display: grid; min-width: 0; }
button.suite b { font-size: 14px; line-height: 1.2; }
button.suite small { font-size: 11px; line-height: 1.25; }
button.suite.silence { --s: 217, 72, 61; } button.suite.plus-tard { --s: 242, 113, 28; } button.suite.oui { --s: 18, 183, 106; } button.suite.non { --s: 110, 124, 118; }
button.suite:hover, [data-theme=dark] button.suite:hover { background: rgb(var(--s)); border-color: rgb(var(--s)); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgb(var(--s)); }
button.suite:hover .ico, button.suite:hover small { color: #fff; }
[data-theme=dark] button.suite { background: rgba(var(--s), .16); }
.mail-carte .suites { padding-top: 9px; border-top: 1px dashed rgba(var(--c), .4); }
.mail-carte button.suite { padding: 8px 9px; gap: 8px; }
.mail-carte button.suite .ico { width: 17px; height: 17px; }
.mail-carte button.suite b { font-size: 13px; } .mail-carte button.suite small { display: none; }
.panneau-relance { padding: 14px; border-radius: 16px; border: 1.5px solid rgba(var(--c), .5); background: linear-gradient(135deg, rgba(var(--c), calc(var(--force) + .08)), rgba(var(--c), .03)); }
.panneau-relance-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.panneau-relance-tete > div:nth-child(2) { flex: 1; display: grid; }
.panneau-relance-tete > div:nth-child(2) b { font-size: 16px; letter-spacing: -.01em; }
.panneau-relance .mail-rang i { width: 20px; height: 7px; }
.panneau-relance > .lien { margin-top: 8px; }
.autres-resultats { margin-top: 12px; } .autres-resultats[open] summary { margin-bottom: 8px; }
/* Date d'envoi du mail : petit champ, bien visible quand elle reste a indiquer */
.champ-envoi .date-btn { padding: 4px 10px; font-size: 13px; border-radius: 999px; gap: 6px; }
.champ-envoi .date-btn .ico { width: 14px; height: 14px; }
.champ-envoi .date-btn.vide { border-style: dashed; border-color: #e0a100; color: #a86f00; background: rgba(224, 161, 0, .12); font-weight: 600; }
[data-theme=dark] .champ-envoi .date-btn.vide { color: #f2c75a; background: rgba(224, 161, 0, .16); }
.champ-envoi .date-btn.vide:hover { background: #e0a100; color: #fff; }
.envoi-inconnu { display: flex; }.tag-demande { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #b4410f; background: #ffe3d1; }
.tag-demande .ico { width: 13px; height: 13px; }
[data-theme=dark] .tag-demande { color: #ffab7a; background: #41240f; }table.compact td .type-rappel + br + .badge { margin: 3px 0 1px; }
table.compact td .type-rappel { max-width: 100%; }#pot table.compact th:nth-child(4) { width: 205px; }
/* Potentiels : filtres et tri */
.filtres-pot { align-items: center; }
.filtres-pot select { max-width: 240px; }
.tri-pot { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: 13px; white-space: nowrap; }
tr.groupe.fixe { cursor: default; }td.col-dept b { display: inline-grid; place-items: center; min-width: 34px; padding: 3px 8px; border-radius: 8px; font-size: 13px; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--bord) 55%, transparent); }
.fichette { position: relative; }
.fichette-dept { position: absolute; top: 10px; right: 10px; padding: 1px 7px; border-radius: 7px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--bord) 60%, transparent); }
.fichette > b { padding-right: 36px; }
/* ================================================================ Arrivee : « Qui se connecte ? » */
.connexion { position: relative; overflow: hidden; }
.cx-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cx-fond i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; opacity: .5; background: radial-gradient(circle at 50% 50%, rgb(var(--b)), transparent 62%); animation: cx-derive 22s ease-in-out infinite alternate; }
.cx-fond i:nth-child(1) { --b: 47, 211, 154; left: -12vmax; top: -16vmax; }
.cx-fond i:nth-child(2) { --b: 120, 170, 255; right: -14vmax; bottom: -18vmax; animation-duration: 27s; animation-delay: -6s; }
.cx-fond i:nth-child(3) { --b: 255, 205, 110; left: 34%; bottom: -26vmax; opacity: .3; animation-duration: 31s; animation-delay: -12s; }
[data-theme=dark] .cx-fond i { opacity: .26; } [data-theme=dark] .cx-fond i:nth-child(3) { opacity: .14; }
@keyframes cx-derive { to { transform: translate(7vmax, 5vmax) scale(1.12); } }
.connexion > .cx, .cx-choix { position: relative; z-index: 1; }
.cx-choix { display: grid; justify-items: center; gap: 18px; text-align: center; max-width: min(980px, 100%); }
.cx-choix .grand-logo { width: 170px; margin: 0; animation: cx-entre .6s cubic-bezier(.22, 1, .36, 1) both; }
.cx-choix h1 { font-size: 34px; letter-spacing: -.03em; animation: cx-entre .6s cubic-bezier(.22, 1, .36, 1) .08s both; }
.profils { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 44px; padding: 26px 0 18px; }
.connexion .profil { width: auto; flex-direction: column; gap: 14px; padding: 8px; border: 0; background: none; box-shadow: none; color: var(--texte); animation: profil-arrive .7s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(.18s + var(--i) * .12s); }
.connexion .profil:hover, [data-theme=dark] .connexion .profil, [data-theme=dark] .connexion .profil:hover { background: none; border: 0; }
@keyframes profil-arrive { from { opacity: 0; transform: translateY(40px) scale(.6); } }
.profil-rond { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: #fff; background: linear-gradient(140deg, hsl(var(--h) 68% 54%), hsl(calc(var(--h) + 45) 68% 38%)); box-shadow: 0 22px 44px -18px hsl(var(--h) 70% 40% / .9), inset 0 2px 0 rgba(255, 255, 255, .35); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), box-shadow .35s ease; }
/* Chaque rond flotte a son rythme */
.profil .profil-rond { animation: profil-flotte calc(4.6s + var(--i) * .7s) ease-in-out calc(var(--i) * -1.3s) infinite alternate; }
@keyframes profil-flotte { from { translate: 0 7px; rotate: -2deg; } to { translate: 0 -11px; rotate: 2deg; } }
.profil-rond::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid hsl(var(--h) 70% 55% / .0); transition: border-color .3s ease, inset .35s cubic-bezier(.2, 1.4, .4, 1); }
.profil-rond::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, rgba(255, 255, 255, .5), transparent 42%); opacity: .55; }
.profil:hover .profil-rond, .profil:focus-visible .profil-rond { transform: scale(1.12); box-shadow: 0 30px 60px -18px hsl(var(--h) 75% 45%), 0 0 0 6px hsl(var(--h) 70% 55% / .18), inset 0 2px 0 rgba(255, 255, 255, .4); }
.profil:hover .profil-rond::before, .profil:focus-visible .profil-rond::before { inset: -16px; border-color: hsl(var(--h) 70% 55% / .55); }
.profil:active .profil-rond { transform: scale(.96); }
.profil b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; transition: transform .3s ease; }
.profil:hover b { transform: translateY(3px); }
.profil small { margin-top: -8px; padding: 2px 10px; border-radius: 999px; background: rgba(224, 161, 0, .16); color: #a86f00; font-weight: 600; }
[data-theme=dark] .profil small { color: #f2c75a; }
.cx-choix .cx-erreur { max-width: 420px; }
.cx-choix > .lien { width: auto; opacity: .8; }
/* Carte du mot de passe : le rond du membre remplace le logo */
.cx > .profil-rond { justify-self: center; align-self: center; width: 92px; height: 92px; font-size: 30px; margin: 0 auto 2px; animation: profil-pose .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes profil-pose { from { opacity: 0; transform: scale(1.5) translateY(-20px); } }
@media (max-width: 600px) { .profil-rond { width: 96px; height: 96px; font-size: 32px; } .profils { gap: 16px 22px; } .cx-choix h1 { font-size: 26px; } }
/* « Rester connecte 24 h » : interrupteur sur la carte du mot de passe */
.cx-rester { display: flex; align-items: center; gap: 11px; margin: 2px 0 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--bord); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--texte); transition: border-color var(--vite), background var(--vite); }
.cx-rester:hover { border-color: var(--accent); }
.cx-rester input { position: absolute; opacity: 0; width: 0; height: 0; }
.cx-rester i { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--doux) 45%, transparent); transition: background var(--vite); }
.cx-rester i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.cx-rester input:checked + i { background: var(--accent); }
.cx-rester input:checked + i::after { transform: translateX(16px); }
.cx-rester input:focus-visible + i { box-shadow: 0 0 0 3px rgba(14, 138, 98, .3); }
.cx-rester span { display: grid; line-height: 1.25; }
.cx-rester small { font-weight: 400; font-size: 12px; }
.cx-rester:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 60%, var(--bord)); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.profil small.garde { background: rgba(18, 183, 106, .16); color: #08744c; }
[data-theme=dark] .profil small.garde { color: #6fe0b1; }
.cx-choix > .cx-oublier { margin-top: -12px; font-size: 12px; opacity: .65; }
/* ================================================================ Profils : emoji, yeux, humeur du jour, tunnel, entrees en scene */
.profil-signe { position: relative; z-index: 1; line-height: 1; }
.profil-rond.avec-emoji .profil-signe { font-size: 1.35em; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.profil-rond.avec-yeux .profil-signe { transform: translateY(12%); }
.profil-rond.avec-yeux.avec-emoji .profil-signe { font-size: 1.15em; transform: translateY(16%); }
/* Deux petits yeux poses en haut du rond, dont les pupilles suivent la souris */
.yeux { position: absolute; z-index: 2; top: 13%; left: 50%; display: flex; gap: 7px; transform: translateX(-50%); }
.yeux > i { width: 21px; height: 21px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, .25), inset 0 -2px 0 rgba(0, 0, 0, .08); animation: cligne 5.2s infinite; }
.yeux > i > i { width: 9px; height: 9px; border-radius: 50%; background: #17211d; transform: translate(var(--ox, 0), var(--oy, 0)); transition: transform .08s linear; }
.profil:nth-child(2n) .yeux > i { animation-delay: -1.7s; } .profil:nth-child(3n) .yeux > i { animation-delay: -3.1s; }
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.profil:hover .yeux > i { transform: scale(1.15); }
/* Quand on vise un profil, les autres s'ecartent un peu */
.profils:has(.profil:hover) .profil:not(:hover) .profil-rond { transform: scale(.9); filter: saturate(.6) brightness(.85); }
.profils:has(.profil:hover) .profil:not(:hover) b { opacity: .55; }
.profil-rond { transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), box-shadow .35s ease, filter .3s ease; }
.accessoire { position: absolute; z-index: 3; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); pointer-events: auto; }
.accessoire.couronne { top: -27%; left: 50%; font-size: .9em; transform: translateX(-50%) rotate(-10deg); animation: couronne 2.6s ease-in-out infinite alternate; }
@keyframes couronne { to { transform: translateX(-50%) rotate(8deg) translateY(-4px); } }
.accessoire.bonnet { top: -12%; right: -14%; font-size: .7em; animation: ronflote 2.2s ease-in-out infinite; }
@keyframes ronflote { 50% { transform: translate(5px, -7px) scale(1.15); opacity: .7; } }
.accessoire.lunettes { top: 10%; left: 50%; font-size: .95em; transform: translateX(-50%); }
.cx > .profil-rond .accessoire, .mp-apercu .accessoire { font-size: .75em; }
.avatar.avec-emoji { font-size: 17px; } .activite .avatar.avec-emoji { font-size: 15px; }
/* Page Equipe : mon profil */
.mon-profil label { margin: 14px 0 6px; }
.mp-apercu { display: flex; align-items: center; gap: 16px; }
.mp-apercu .profil-rond { flex: none; width: 76px; height: 76px; font-size: 25px; }
.mp-apercu > div { display: grid; gap: 2px; } .mp-apercu b { font-size: 16px; }
.mp-emojis, .mp-couleurs, .mp-effets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-emojis button { width: 40px; height: 40px; padding: 0; font-size: 20px; border-radius: 12px; }
.mp-emojis button:first-child { font-size: 13px; font-weight: 700; }
.mp-emojis input { width: 86px; height: 40px; text-align: center; font-size: 18px; }
.mp-emojis button:hover, .mp-couleurs button:hover { transform: translateY(-2px) scale(1.08); }
.mp-emojis button.actif, .mp-effets button.actif, [data-theme=dark] .mp-emojis button.actif, [data-theme=dark] .mp-effets button.actif { border-color: var(--accent); background: var(--accent-clair); box-shadow: 0 0 0 3px rgba(14, 138, 98, .2); }
.mp-couleurs button, [data-theme=dark] .mp-couleurs button { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(140deg, hsl(var(--h) 68% 54%), hsl(calc(var(--h) + 45) 68% 38%)); }
.mp-couleurs button.auto { width: auto; padding: 0 12px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; }
.mp-couleurs button.actif, [data-theme=dark] .mp-couleurs button.actif { border-color: var(--texte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--texte) 18%, transparent); transform: scale(1.12); }
/* Entree epuree : voile uni, « Bonjour », un trait de la couleur du membre qui se dessine */
.cx-voile { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; opacity: 0; background: var(--fond); will-change: opacity; }
.cx-voile > div { display: grid; justify-items: center; gap: 2px; animation: voile-texte .7s cubic-bezier(.22, 1, .36, 1) .12s both; }
.cx-voile small { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--doux); }
.cx-voile b { font-size: 44px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; color: var(--texte); }
.cx-voile i { width: 100%; min-width: 120px; height: 2px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, transparent, hsl(var(--h) 70% 55%), transparent); transform-origin: center; animation: voile-trait .9s cubic-bezier(.22, 1, .36, 1) .2s both; }
@keyframes voile-texte { from { opacity: 0; transform: translateY(10px); letter-spacing: .02em; } }
@keyframes voile-trait { from { transform: scaleX(0); opacity: 0; } }
/* ================================================================ Carte en relief (MapLibre) */
#plan { height: calc(calc(100vh / var(--z, 1)) - 235px); min-height: 460px; }
#plan canvas { outline: 0; }
.plan-pin { width: 30px; height: 38px; cursor: pointer; }
.plan-info { position: absolute; top: 0; left: 0; z-index: 4; min-width: 200px; display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px; pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--carte) 92%, transparent); border: 1px solid var(--bord); box-shadow: var(--ombre-forte); font-size: 13px; transition: opacity .15s ease; }
.plan-info.visible { opacity: 1; }
.plan-info b { font-size: 15px; margin-bottom: 2px; }
.plan-info span { display: flex; align-items: center; gap: 7px; }
.plan-info i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.plan-info small { margin-top: 3px; opacity: .8; }
.plan-dept { position: relative; width: calc(100% + 16px); margin: 0 -8px; padding: 7px 8px 11px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border: 0; background: none; box-shadow: none; border-radius: 10px; text-align: left; }
.plan-dept span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.plan-dept span b { display: inline-block; min-width: 26px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.plan-dept em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-dept > i { position: absolute; left: 8px; bottom: 4px; height: 3px; border-radius: 3px; max-width: calc(100% - 16px); transition: width var(--doucement); }
.plan-liste h2 { margin-top: 0; } .plan-liste h2:not(:first-child) { margin-top: 20px; }
#plan .maplibregl-popup-content { padding: 14px 16px; border-radius: 16px; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); box-shadow: var(--ombre-forte); font: 13px/1.45 "Inter", system-ui, sans-serif; }
#plan .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--carte); }
#plan .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--carte); }
#plan .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--carte); }
#plan .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--carte); }
#plan .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; background: var(--carte); box-shadow: var(--ombre); border: 1px solid var(--bord); }
#plan .maplibregl-ctrl-group button { width: 34px; height: 34px; border-radius: 0; border: 0; background-color: var(--carte); box-shadow: none; }
#plan .maplibregl-ctrl-group button + button { border-top: 1px solid var(--bord); }
[data-theme=dark] #plan .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
#plan .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--carte) 75%, transparent); color: var(--doux); font-size: 10px; }
#plan .maplibregl-ctrl-attrib a { color: inherit; }/* Carte a plat : echelle de couleur dans la legende */
.plan-echelle { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 12px; color: var(--doux); }
.plan-echelle i { width: 90px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 35%, var(--carte)), var(--b)); }
/* Bouton d'etat du Google Sheet (page Potentiels) : vert quand il est a jour, rouge en cas d'erreur, gris s'il n'est pas relie */
.bouton-sheets { gap: 7px; }
.bouton-sheets i { width: 9px; height: 9px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px rgba(18, 183, 106, .22); }
.bouton-sheets.erreur i { background: #d9483d; box-shadow: 0 0 0 3px rgba(217, 72, 61, .25); }
.bouton-sheets.inactif { opacity: .7; } .bouton-sheets.inactif i { background: #8b9892; box-shadow: none; }
/* ================================================================ Aujourd'hui : tuiles vivantes
   Un liquide de la couleur de la tuile monte jusqu'au niveau qui correspond a la valeur, avec deux vagues qui ondulent.
   Seules des translations sont animees en continu, ce qui reste leger. */
.tuiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tuile.vivante { position: relative; overflow: hidden; isolation: isolate; min-height: 118px; padding: 16px 16px 14px; align-content: start; border-color: rgba(var(--c), .35); background: linear-gradient(160deg, rgba(var(--c), .10), rgba(var(--c), .02) 55%), var(--carte); }
.tuile.vivante > b, .tuile.vivante > span:not(.tuile-eau), .tuile.vivante > small { position: relative; z-index: 2; }
.tuile.vivante > b { font-size: 34px; letter-spacing: -.03em; text-shadow: 0 1px 0 color-mix(in srgb, var(--carte) 70%, transparent); }
.tuile.vivante > small { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; font-weight: 600; color: rgb(var(--c)); filter: saturate(1.2) brightness(.82); }
[data-theme=dark] .tuile.vivante > small { filter: saturate(1.1) brightness(1.25); }
.tuile.vivante .pict { color: #fff; background: linear-gradient(140deg, rgb(var(--c)), color-mix(in srgb, rgb(var(--c)) 65%, #000)); box-shadow: 0 8px 16px -8px rgb(var(--c)); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.tuile.vivante:hover .pict { transform: scale(1.12) rotate(-6deg); }
.tuile.vivante:hover, [data-theme=dark] .tuile.vivante:hover { background: linear-gradient(160deg, rgba(var(--c), .16), rgba(var(--c), .04) 55%), var(--carte); border-color: rgba(var(--c), .6); box-shadow: 0 16px 34px -18px rgb(var(--c)); }
.tuile-eau { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--niveau); background: linear-gradient(180deg, rgba(var(--c), .26), rgba(var(--c), .12)); transition: height 1s cubic-bezier(.22, 1, .36, 1); }
#vue.entree .tuile-eau { animation: eau-monte 1.5s cubic-bezier(.22, 1, .36, 1) .15s both; }
@keyframes eau-monte { from { height: 0; } }
.tuile.vivante:hover .tuile-eau { height: calc(var(--niveau) + 6%); }
.vague { position: absolute; left: 0; bottom: 100%; width: 200%; height: 12px; margin-bottom: -1px; will-change: transform; }
.vague svg { display: block; width: 100%; height: 100%; fill: rgba(var(--c), .26); }
.vague.v1 { animation: ondule 7s linear infinite; }
.vague.v2 { height: 16px; opacity: .55; animation: ondule 11s linear infinite reverse; }
@keyframes ondule { to { transform: translateX(-50%); } }
.tuile.vivante[style*="--niveau:0%"] .vague { display: none; }
/* Resume des mails : chaque ligne se remplit selon son chiffre */
.resume-chiffres span { position: relative; overflow: hidden; isolation: isolate; }
.resume-chiffres span::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--p, 0%); background: currentColor; opacity: .16; border-radius: inherit; transform-origin: left; }
#vue.entree .resume-chiffres span::before { animation: grandit .9s cubic-bezier(.22, 1, .36, 1) calc(.3s + var(--i, 0) * .12s) both; }.tuile.vivante > span:not(.pict):not(.tuile-eau) { grid-column: 1; color: var(--doux); font-size: 13px; font-weight: 600; }@media (min-width: 1250px) { .tuiles:has(.vivante) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tuile.vivante > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* ================================================================ Potentiels : quand agir, lisible d'un coup d'oeil */
.quand-pastille { --q: 124, 143, 136; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 11px 5px 9px; border-radius: 11px; border: 1px solid rgba(var(--q), .3); background: rgba(var(--q), .1); color: var(--texte); }
.quand-pastille > span { display: grid; min-width: 0; line-height: 1.2; }
.quand-pastille b { font-size: 13px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.quand-pastille small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quand-pastille .ico { width: 16px; height: 16px; flex: none; color: rgb(var(--q)); }
.quand-pastille.q-demain { --q: 47, 127, 230; } .quand-pastille.q-semaine { --q: 110, 124, 118; }
.quand-pastille.q-plus, .quand-pastille.q-sans { background: none; border-style: dashed; opacity: .8; }
/* Aujourd'hui : pastille pleine, orange, qui pulse doucement */
.quand-pastille.q-jour { --q: 242, 113, 28; border-color: rgb(var(--q)); background: linear-gradient(135deg, rgb(var(--q)), rgb(226, 86, 20)); color: #fff; box-shadow: 0 8px 18px -10px rgb(var(--q)); animation: quand-pouls 2.2s ease-in-out infinite; }
.quand-pastille.q-retard { --q: 217, 72, 61; border-color: rgb(var(--q)); background: linear-gradient(135deg, rgb(var(--q)), rgb(180, 40, 44)); color: #fff; box-shadow: 0 8px 18px -10px rgb(var(--q)); }
.quand-pastille.q-jour b, .quand-pastille.q-retard b { text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.quand-pastille.q-jour small, .quand-pastille.q-retard small { color: rgba(255, 255, 255, .92); font-weight: 600; }
.quand-pastille.q-jour .ico, .quand-pastille.q-retard .ico { color: #fff; }
@keyframes quand-pouls { 50% { box-shadow: 0 0 0 5px rgba(242, 113, 28, .22), 0 8px 18px -10px rgb(242, 113, 28); } }
/* La ligne entiere est teintee quand c'est pour aujourd'hui ou en retard */
#pot tr.ligne-jour > td { background: rgba(242, 113, 28, .09); }
#pot tr.ligne-retard > td { background: rgba(217, 72, 61, .08); }
#pot tr.ligne-jour:not(.funot) > td:first-child { box-shadow: inset 4px 0 0 rgb(242, 113, 28); }
#pot tr.ligne-retard:not(.funot) > td:first-child { box-shadow: inset 4px 0 0 rgb(217, 72, 61); }
#pot tr.ligne-jour:hover > td { background: rgba(242, 113, 28, .16); } #pot tr.ligne-retard:hover > td { background: rgba(217, 72, 61, .15); }
#pot tr.ligne-jour td b:first-child, #pot tr.ligne-retard td b:first-child { font-weight: 700; }
/* ================================================================ Fluidite (2)
   Les pulsations qui animaient une ombre obligeaient a redessiner la ligne a chaque image. Elles sont remplacees par un
   anneau qui ne change que de taille et de transparence, ce que la carte graphique fait seule. */
.quand-pastille.q-jour, .relance-bilan { animation: none; position: relative; }
.quand-pastille.q-jour::after, .relance-bilan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid currentColor; opacity: 0; pointer-events: none; will-change: transform, opacity; animation: anneau 2.4s ease-out infinite; }
.quand-pastille.q-jour::after { border-color: rgb(242, 113, 28); } .relance-bilan::after { border-color: #d9483d; }
@keyframes anneau { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.12, 1.3); opacity: 0; } }
.cta-mail { animation: none; }
.vague { backface-visibility: hidden; }
/* Les longues listes hors de l'ecran ne sont ni mises en page ni dessinees tant qu'on n'y arrive pas */
.mail-carte, .activite, .fichette { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.activite { contain-intrinsic-size: auto 70px; }
/* Depot d'un fichier par glisser-deposer (reprise du carnet, version en ligne) */
.zone-depot { display: flex; align-items: center; gap: 14px; margin: 14px 0 8px; padding: 18px; border: 2px dashed var(--bord); border-radius: 16px; cursor: pointer; color: var(--texte); font-size: 14px; transition: border-color var(--vite), background var(--vite), transform var(--vite); }
.zone-depot .ico { width: 30px; height: 30px; color: var(--accent); flex: none; }
.zone-depot span { display: grid; gap: 2px; } .zone-depot small { font-weight: 400; }
.zone-depot:hover { border-color: var(--accent); background: var(--accent-clair); }
body.depot .zone-depot { border-color: var(--accent); background: var(--accent-clair); transform: scale(1.02); }
body.depot::after { content: "Lâche le fichier pour reprendre le carnet"; position: fixed; inset: 12px; z-index: 80; display: grid; place-items: center; border: 3px dashed var(--accent); border-radius: 24px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--texte); font-size: 22px; font-weight: 700; pointer-events: none; }
/* ---------------------------------------------------------------- Telephone (ecran etroit) */
aside nav .menu-plus { display: none; }
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px; }
  #app.coque { display: block; }
  main { padding: 14px 14px calc(96px + env(safe-area-inset-bottom)); }
  main h1 { font-size: 22px; }

  /* Le menu : une barre en bas, quatre pages et « Plus » */
  aside { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 8; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 5px; height: auto; max-height: calc(calc(100dvh / var(--z, 1)) - 24px); overflow-y: auto; border-radius: 22px; }
  aside .marque { display: none; }
  aside nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  aside nav button, aside nav .menu-plus { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 7px 2px 5px; position: relative; border-radius: 16px; }
  aside nav button:hover, [data-theme=dark] aside nav button:hover { transform: none; }
  aside nav button .ico { width: 21px; height: 21px; }
  aside nav .lib { font-size: 0; line-height: 0; }
  aside nav .lib::after { content: attr(data-court); font-size: 10.5px; line-height: 1.2; font-weight: 600; }
  aside nav button[data-v=jour] { order: 1; grid-column: 1; } aside nav button[data-v=potentiels] { order: 2; } aside nav button[data-v=mails] { order: 3; }
  aside nav button[data-v=prospects] { order: 4; } aside nav .menu-plus { order: 5; }
  aside:not(.menu-ouvert) nav button:not([data-v=jour], [data-v=potentiels], [data-v=mails], [data-v=prospects], .menu-plus), aside:not(.menu-ouvert) .pied { display: none; }
  aside:has(nav button.actif:not([data-v=jour], [data-v=potentiels], [data-v=mails], [data-v=prospects])) .menu-plus, aside.menu-ouvert .menu-plus { background: rgba(var(--teinte), .16); }
  aside .pastille, aside .pastille.verte { position: absolute; top: 3px; left: calc(50% + 5px); margin: 0; min-width: 17px; padding: 0 4px; font-size: 10px; line-height: 17px; }
  aside.menu-ouvert { box-shadow: 0 -30px 80px 40px rgba(8, 18, 14, .45); }
  aside.menu-ouvert nav { row-gap: 6px; }
  aside.menu-ouvert .pied { order: -1; display: block; margin: 0 0 6px; padding: 10px 10px 12px; border: 0; border-bottom: 1px solid rgba(128, 128, 128, .2); }
  aside.menu-ouvert .pied small, aside.menu-ouvert .pied br { display: revert; }
  aside.menu-ouvert .pied div { margin-top: 10px; } aside.menu-ouvert .pied button { padding: 8px 14px; font-size: 13px; }
  #tel-flottant { display: none; }
  .serie { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  #toast { bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Les pages */
  .demo { margin-bottom: 12px; font-size: 12px; }
  .tete { flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
  .tete > div:first-child { flex: 1 1 100%; } #tiroir .tete > div:first-child { flex: 1 1 0; }
  .tete > .actions { flex: 1 1 100%; }
  .tete > .actions input[type=search] { order: -1; flex: 1 1 100%; }
  .tete > .actions > button:not(.puce), .tete > button { flex: 1 1 auto; min-height: 44px; }
  .filtres input[type=search] { flex: 1 1 100%; }
  .filtres select, .filtres-pot select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; }
  .tri-pot { flex: 1 1 100%; margin: 0; } .tri-pot select { flex: 1; }
  .tuiles, .tuiles:has(.vivante) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carte { max-width: 100%; }
  #plan { height: calc(62dvh / var(--z, 1)); min-height: 320px; }
  .plan-legende { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 12px; padding: 2px 14px 6px; scrollbar-width: none; } .plan-legende > * { flex: none; }
  .boutons-relance, .relance-suite { flex-wrap: wrap; }

  /* Les listes : chaque ligne du tableau devient une carte */
  .defile:has(tr[data-action=fiche]) { overflow: visible; background: none; border: 0; box-shadow: none; }
  .defile:has(tr[data-action=fiche]) table, .defile:has(tr[data-action=fiche]) tbody { display: block; min-width: 0; }
  .defile:has(tr[data-action=fiche]) thead { display: none; }
  tr[data-action=fiche] { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-bottom: 8px; padding: 12px 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; box-shadow: var(--ombre); }
  tr[data-action=fiche] td, table.compact tr[data-action=fiche] td { display: block; width: auto; min-width: 0; padding: 0; border: 0; white-space: normal; overflow: visible; background: none; color: var(--doux); font-size: 13px; }
  tr[data-action=fiche] td:empty, tr[data-action=fiche] td:has(> input[type=checkbox]) { display: none; }
  tr[data-action=fiche] td.large, table.compact tr[data-action=fiche] td:nth-child(2) { flex: 1 1 100%; color: var(--texte); font-size: 15px; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(9) { display: none; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(5)::before { content: "Dépt "; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(6) { color: var(--accent); font-weight: 600; }
  table.compact tr[data-action=fiche] td:nth-child(2) { flex: 1 1 0; }
  table.compact tr[data-action=fiche] td:nth-child(4), table.compact tr[data-action=fiche] td.note, table.compact tr[data-action=fiche] td:last-child { flex: 1 1 100%; }
  table.compact tr[data-action=fiche] td:last-child button { width: 100%; min-height: 40px; }
  #pot tr.ligne-jour > td, #pot tr.ligne-retard > td, #pot tr.ligne-jour:hover > td, #pot tr.ligne-retard:hover > td { background: none; }
  #pot tr.ligne-jour { border-left: 4px solid rgb(242, 113, 28); } #pot tr.ligne-retard { border-left: 4px solid rgb(217, 72, 61); }
  tr.groupe, tr.groupe td { display: block; } tr.groupe td { position: static; margin: 12px 0 8px; border: 0; border-radius: 10px; }

  /* La fiche et les fenetres : plein ecran */
  #tiroir, #tiroir.funot { top: 0; left: 0; width: 100%; height: calc(100dvh / var(--z, 1)); max-height: none; padding: 0 16px 22px; border-radius: 0; border-left: 0; transform: translateY(26px); scrollbar-gutter: auto; }
  #tiroir.ouvert { transform: none; }
  #tiroir .contenu > .tete:first-child, #tiroir.funot .contenu > .tete:first-child { position: sticky; top: 0; z-index: 4; flex-wrap: nowrap; align-items: center; margin: 0 -16px 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--carte) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
  #tiroir.funot::after { display: none; }
  #tiroir .tete .actions { flex: none; flex-wrap: nowrap; }
  #tiroir .tete .actions button { min-height: 40px; padding: 8px 14px; }
  #tiroir h1 { font-size: 22px; }
  .tel[data-action=appeler] { display: flex; justify-content: center; margin: 10px 0; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #19b584, #0a6b4c); color: #fff; box-shadow: 0 12px 24px -12px rgba(14, 138, 98, .9); }
  .tel[data-action=appeler]:hover { background: linear-gradient(135deg, #19b584, #0a6b4c); transform: none; }
  .cta-mail { width: 100%; }
  .resultats.majeurs { grid-template-columns: 1fr 1fr; }
  .resultats button, .issues-autres .issue { min-height: 44px; }
  #tiroir .commission { flex-wrap: wrap; } #tiroir .commission .chiffres { grid-template-columns: 1fr; } #tiroir .commission .calcul { grid-column: 1; grid-row: auto; flex-wrap: wrap; white-space: normal; margin-top: 6px; }
  .form-pied { bottom: -22px; margin: 14px -16px -22px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; }
  .form-pied .primaire { flex: 1; min-height: 46px; }
  #modale { padding: 0; place-items: end center; }
  .boite { width: 100%; max-height: calc(92dvh / var(--z, 1)); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .boite textarea { min-height: 200px; }
  .boite .tete { flex-wrap: nowrap; } .boite .tete > div:first-child { flex: 1 1 0; } .boite .tete > .actions, .boite .tete > button { flex: none; }
  aside.menu-ouvert, [data-theme=dark] aside.menu-ouvert { background: var(--carte); }
  .form-pied { flex-wrap: wrap; } .form-pied button { flex: 1 1 100%; min-height: 46px; }
  #calendrier { left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: min(320px, calc(calc(100vw / var(--z, 1)) - 24px)); translate: -50% -50%; }
}

/* ---------------------------------------------------------------- Telephone, 2e passe : moins de choses a l'ecran, plus lisibles */
.filtres-bouton, .mails-onglets { display: none; }
@media (max-width: 760px) {
  /* En-tetes de page : le titre et l'essentiel */
  body:not(:has(aside button[data-v=jour].actif)) main .tete > div:first-child > p { display: none; }
  .tete [data-action=export], .tete .bouton-sheets, .tete [data-action=pot-mode] { display: none; }

  /* Recherche + bouton « Filtres » : les filtres ne s'affichent que si on les demande */
  .filtres-bouton { display: inline-flex; flex: none; min-height: 46px; padding: 0 14px; gap: 8px; border-radius: 12px; font-weight: 600; position: relative; }
  #vue:has(.filtres select:not([data-pf=tri]) option:checked:not([value=""])) .filtres-bouton, #vue:has(.filtre-funot.actif) .filtres-bouton, body.filtres-ouverts .filtres-bouton { border-color: var(--accent); color: var(--accent); }
  #vue:has(.filtres select:not([data-pf=tri]) option:checked:not([value=""])) .filtres-bouton::after, #vue:has(.filtre-funot.actif) .filtres-bouton::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ff9f0a; border: 2px solid var(--fond); }
  .filtres input[type=search], .tete > .actions input[type=search] { flex: 1 1 0; min-width: 0; min-height: 46px; order: 0; }
  .tete > .actions .filtres-bouton { order: 0; flex: none; }
  .filtres > select, .filtres > .puce, .filtres > .lien, .filtres > label, .tete > .actions > .filtre-funot { display: none; }
  .filtres-pot { display: none; }
  body.filtres-ouverts .filtres > select, body.filtres-ouverts .filtres > label { display: flex; flex: 1 1 100%; max-width: none; min-height: 46px; }
  body.filtres-ouverts .filtres > .puce, body.filtres-ouverts .filtres > .lien, body.filtres-ouverts .tete > .actions > .filtre-funot { display: inline-flex; min-height: 40px; }
  body.filtres-ouverts .filtres-pot { display: flex; padding: 12px; border: 1px solid var(--bord); border-radius: 16px; background: var(--carte); }
  body.filtres-ouverts .tri-pot { flex-direction: column; align-items: stretch; gap: 4px; font-weight: 600; color: var(--doux); } body.filtres-ouverts .tri-pot select { min-height: 46px; }

  /* Etapes (Potentiels, Visites) : une rangee qui defile au doigt */
  .onglets-etapes { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px 12px; padding: 4px 14px 6px; scrollbar-width: none; }
  .onglets-etapes::-webkit-scrollbar, .plan-legende::-webkit-scrollbar, .mails-onglets::-webkit-scrollbar { display: none; }
  .onglet { flex: none; flex-direction: row; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px; border-radius: 999px; }
  .onglet span { order: 1; font-size: 14px; font-weight: 600; color: var(--texte); } .onglet b { order: 2; font-size: 14px; color: var(--doux); }
  .onglet small { order: 3; display: none; } .onglet small.retard { display: block; width: 9px; height: 9px; border-radius: 50%; background: #d9483d; font-size: 0; }
  .onglet.actif { background: var(--texte); border-color: var(--texte); box-shadow: none; } .onglet.actif span, .onglet.actif b { color: var(--fond); }

  /* Cartes de la base */
  table:not(.compact) tr[data-action=fiche] td.large { flex: 1 1 calc(100% - 150px); }
  table:not(.compact) tr[data-action=fiche] td:nth-child(7) { order: 0; margin-left: auto; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(n+3):not(:nth-child(7)) { order: 1; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(3) { flex: 0 0 auto; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(4)::before { content: "· "; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(5)::before { content: "· Dépt "; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(6) { flex: 1 1 100%; font-size: 15px; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(8)::before { content: "Rappel : "; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(10)::before { content: "Dernier appel : "; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(11)::before { content: "Suivi par "; }
  table:not(.compact) tr[data-action=fiche] td:nth-child(n+8) { flex: 1 1 100%; font-size: 12px; }

  /* Cartes des potentiels */
  table.compact tr[data-action=fiche] { gap: 8px 10px; padding: 14px; }
  table.compact tr[data-action=fiche] td:nth-child(2) { flex: 1 1 calc(100% - 64px); } table.compact tr[data-action=fiche] td.col-dept { flex: none; align-self: flex-start; }
  table.compact tr[data-action=fiche] td:nth-child(2) b { font-size: 16px; line-height: 1.25; } table.compact tr[data-action=fiche] td:nth-child(2) small { font-size: 13px; }
  table.compact tr[data-action=fiche] td:nth-child(4) { order: 3; font-size: 13px; } table.compact tr[data-action=fiche] td:nth-child(4) br { display: none; }
  table.compact tr[data-action=fiche] td:nth-child(4)::before { content: "Contact : "; } table.compact tr[data-action=fiche] td:nth-child(4) small::before { content: " · "; }
  table.compact tr[data-action=fiche] td.col-quand { order: 1; } table.compact tr[data-action=fiche] td:nth-child(6) { order: 2; } table.compact tr[data-action=fiche] td:nth-child(6) br { display: none; }
  table.compact tr[data-action=fiche] td.note { order: 4; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bord) 40%, transparent); color: var(--texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  table.compact tr[data-action=fiche] td.note:empty { display: none; }
  table.compact tr[data-action=fiche] td:last-child { order: 5; }
  table.compact tr[data-action=fiche] td:last-child .bouton, table.compact tr[data-action=fiche] td:last-child button { display: flex; justify-content: center; width: 100%; min-height: 46px; font-size: 15px; font-weight: 700; border-radius: 12px; }
  table.compact tr[data-action=fiche] td:last-child a.bouton { background: linear-gradient(135deg, #19b584, #0a6b4c); border-color: transparent; color: #fff; }

  /* Mails : trois onglets, une liste a la fois */
  .mails-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; position: sticky; top: 6px; z-index: 3; padding: 5px; border-radius: 18px; background: var(--carte); border: 1px solid var(--bord); box-shadow: var(--ombre); }
  .mails-onglets button { flex-direction: column; gap: 0; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 13px; background: none; box-shadow: none; font-size: 12px; font-weight: 600; color: var(--doux); }
  .mails-onglets button b { font-size: 20px; line-height: 1.1; color: var(--texte); } .mails-onglets button.alerte b { color: #f2711c; }
  .mails-onglets button.actif { background: var(--texte); color: var(--fond); } .mails-onglets button.actif b { color: var(--fond); }
  .mails-colonnes > .mails-col { display: none; padding: 0; border: 0; background: none; box-shadow: none; }
  .mails-colonnes.montre-envoyer > .col-envoyer, .mails-colonnes.montre-attente > .col-attente, .mails-colonnes.montre-relancer > .col-relancer { display: block; }
  .mails-col > h2 { display: none; } .mails-col .aide { min-height: 0; margin-bottom: 10px; }
  .mails-liste { max-height: none; overflow: visible; margin: 0; padding: 0; }

  /* Fiche : d'abord qui c'est et le bouton d'appel, puis le resultat a noter, puis le reste */
  .fiche-corps, .fiche-corps.mode-saisie { display: flex; flex-direction: column; gap: 0; }
  .fiche-corps > div { display: contents; }
  .fiche-corps > div:first-child > * { order: 0; }
  .fiche-corps .tel[data-action=appeler], .fiche-corps .cta-mail, .fiche-corps .commission { align-self: stretch; margin-left: 0; }
  .fiche-corps > div:last-child > * { order: 2; }
  .fiche-corps > div:first-child > .infos { order: 1; margin: 6px 0 4px; }
  .fiche-corps > div:first-child > .actions, .fiche-corps > div:first-child > .commission { order: 3; }
  .fiche-corps > div:first-child > .actions { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bord); }
  .fiche-corps > div:last-child > h3:first-child { margin-top: 18px; }
  .fiche-corps.mode-saisie > div:first-child > .infos, .fiche-corps.mode-saisie > div:first-child > .actions, .fiche-corps.mode-saisie > div:first-child > .commission, .fiche-corps.mode-saisie > div:first-child > .cta-mail { display: none; }
  .tuile.vivante > small { white-space: normal; overflow: visible; }
}

/* ---------------------------------------------------------------- Raccourci IONOS dans le menu */
aside nav .raccourci { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 11px; border-top: 1px solid rgba(128, 128, 128, .18); color: inherit; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .25s ease, transform .2s ease; }
aside nav .raccourci:hover { background: rgba(0, 59, 122, .14); transform: translateX(3px); }
.logo-ionos { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: #003d8f; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
@media (max-width: 760px) {
  aside:not(.menu-ouvert) nav .raccourci { display: none; }
  aside nav .raccourci { flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; margin: 0; padding: 7px 2px 5px; border: 0; border-radius: 16px; }
  aside nav .raccourci:hover { transform: none; }
  .logo-ionos { height: 21px; padding: 0 5px; font-size: 9px; }
}

/* ---------------------------------------------------------------- Conseils de l'IA apres un appel (menu deroulant) */
.conseils { margin: 4px 0 10px; }
.conseils[open] .fleche { transform: rotate(90deg); }
.conseils summary small { font-weight: 500; opacity: .8; }
.conseils h4 { margin: 12px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
.conseil { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; border-left: 3px solid #f2711c; background: color-mix(in srgb, var(--carte) 70%, transparent); font-size: 14px; line-height: 1.45; }
.conseil p { margin: 6px 0 0; } .conseil p small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.conseil-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.conseil-liste li { padding: 8px 12px; border-radius: 12px; border-left: 3px solid #7a52e8; background: color-mix(in srgb, var(--carte) 70%, transparent); }
.conseil-liste.fort li { border-left-color: var(--accent); }

/* ---------------------------------------------------------------- Cloche et panneau des nouveaux potentiels */
.sonnette { position: relative; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; justify-content: center; }
.sonnette .ico { width: 17px; height: 17px; }
.sonnette b { position: absolute; top: -5px; right: -6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--carte); }
.sonnette.active { color: #f2711c; border-color: rgba(242, 113, 28, .5); }
.sonnette.active .ico { animation: cloche-sonne 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes cloche-sonne { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(14deg); } 88% { transform: rotate(-12deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-5deg); } }
aside .marque .sonnette-menu { margin-left: auto; }
main > .sonnette-page { display: none; }
.boite.notifs { width: min(620px, 100%); }
.boite.notifs h3 { margin: 16px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
.boite.notifs h3::first-letter { text-transform: uppercase; }
.notif { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 6px; padding: 10px 12px; border-radius: 14px; text-align: left; justify-content: flex-start; position: relative; }
.notif:hover { transform: translateY(-1px); box-shadow: var(--ombre); }
.notif .avatar { flex: none; }
.notif-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.notif-texte b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-texte small { font-size: 12px; color: var(--doux); font-weight: 400; }
.notif-texte small:empty { display: none; }
.notif .badge { flex: none; max-width: 46%; white-space: normal; text-align: left; }
.notif.neuve { border-color: rgba(242, 113, 28, .55); background: color-mix(in srgb, #f2711c 9%, var(--carte)); }
.notif.neuve::before { content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: #f2711c; }
@media (max-width: 760px) {
  main > .sonnette-page { display: inline-flex; position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 7; width: 42px; height: 42px; background: var(--carte); box-shadow: var(--ombre); }
  .sonnette-page .ico { width: 20px; height: 20px; }
  main .tete > div:first-child > h1 { padding-right: 52px; }
  .notif { flex-wrap: wrap; } .notif-texte { flex: 1 1 calc(100% - 60px); } .notif .badge { max-width: none; margin-left: 48px; }
}

/* ---------------------------------------------------------------- Fil des dernieres actions, en bas du menu */
.fil { margin-top: auto; padding: 10px 2px 2px; display: grid; gap: 5px; border-top: 1px solid rgba(128, 128, 128, .18); flex: none; }
.fil + .pied { margin-top: 8px; }
.fil-tete { display: flex; align-items: center; gap: 6px; padding: 0 6px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); }
.fil-tete i { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.fil-tete .lien { margin-left: auto; padding: 0; font-size: 11px; text-transform: none; letter-spacing: 0; }
.t-violet { --t: 139, 92, 246; } .t-orange { --t: 242, 113, 28; } .t-bleu { --t: 47, 127, 230; } .t-vert { --t: 22, 168, 113; } .t-or { --t: 224, 161, 0; }
.fil-ligne, [data-theme=dark] .fil-ligne { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px 6px 6px; border: 0; border-left: 3px solid rgb(var(--t)); border-radius: 10px; background: rgba(var(--t), .10); box-shadow: none; text-align: left; justify-content: flex-start; position: relative; color: inherit; }
.fil-ligne:hover, [data-theme=dark] .fil-ligne:hover { background: rgba(var(--t), .2); transform: translateX(2px); }
.fil-emoji { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(var(--t), .22); font-size: 15px; line-height: 1; }
.fil-texte { min-width: 0; display: grid; line-height: 1.25; }
.fil-texte b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-texte small { font-size: 11px; font-weight: 400; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-texte em { font-style: normal; font-weight: 700; color: rgb(var(--t)); }
.fil-ligne.neuve::after { content: ""; position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.notif[class*="t-"] { border-left: 4px solid rgb(var(--t)); } .notif .fil-emoji { width: 38px; height: 38px; font-size: 19px; border-radius: 12px; }
/* Le fil reste toujours visible sur ordinateur : quand l'ecran est peu haut, c'est le reste du menu qui se resserre. */
aside { overflow-y: auto; scrollbar-width: none; } aside::-webkit-scrollbar { display: none; }
@media (max-height: 960px) { .fil-ligne:nth-of-type(n+4) { display: none; } }
@media (max-height: 905px) { .fil-ligne:nth-of-type(n+3) { display: none; } }
@media (max-height: 860px) and (min-width: 761px) { aside nav button { padding-top: 6px; padding-bottom: 6px; } aside .marque { padding-bottom: 10px; } }
@media (max-height: 815px) and (min-width: 761px) { aside nav button { padding-top: 4px; padding-bottom: 4px; } aside nav .raccourci { margin-top: 4px; padding-top: 5px; padding-bottom: 5px; } }
@media (max-height: 770px) and (min-width: 761px) { aside .pied { padding-top: 8px; } aside .pied br, aside .pied small { display: none; } aside .pied div { margin-top: 6px; gap: 4px; flex-wrap: nowrap; } aside .pied button { padding: 4px 7px; font-size: 11px; white-space: nowrap; } aside .pied button[data-action=theme] { font-size: 0; gap: 0; } aside .pied button[data-action=theme] .ico { width: 14px; height: 14px; } }
@media (max-height: 730px) and (min-width: 761px) { .fil-ligne:nth-of-type(n+2) { display: none; } aside .marque { padding-bottom: 4px; } }
@media (max-width: 760px) { aside .fil { display: none; } }

/* ---------------------------------------------------------------- Fil « Mails a envoyer », non lus et alerte en direct */
.fil-compte { min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(139, 92, 246, .25); color: var(--texte); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.fil-tete i { white-space: nowrap; text-transform: none; letter-spacing: 0; }
.fil-tete .lien { display: inline-flex; align-items: center; gap: 5px; }
.fil-vide { margin: 0; padding: 4px 8px 6px; font-size: 12px; color: var(--doux); }
.fil-ligne.neuve, [data-theme=dark] .fil-ligne.neuve { background: rgba(var(--t), .26); box-shadow: inset 0 0 0 1px rgba(var(--t), .6); animation: fil-pouls 2.4s ease-in-out infinite; }
.fil-ligne.neuve .fil-texte b { font-weight: 800; }
@keyframes fil-pouls { 50% { box-shadow: inset 0 0 0 1px rgba(var(--t), .6), 0 0 0 4px rgba(var(--t), .18); } }
.notifs-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.notifs-barre .lien { margin-left: auto; }
.notif-droite { flex: none; display: grid; justify-items: end; gap: 5px; max-width: 46%; }
.notif .notif-droite .badge { max-width: 100%; }
.non-lu { font-style: normal; padding: 1px 8px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.notif.neuve .notif-texte b { font-weight: 800; }
.notif.neuve::before { display: none; }
#alerte-mail { position: fixed; top: 16px; left: 50%; z-index: 90; display: flex; align-items: center; gap: 14px; width: min(560px, calc(calc(100vw / var(--z, 1)) - 24px)); padding: 14px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #5b2fd4); box-shadow: 0 24px 60px -16px rgba(91, 47, 212, .8), 0 0 0 1px rgba(255, 255, 255, .18) inset; opacity: 0; pointer-events: none; transform: translate(-50%, -140%); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .25s ease; }
#alerte-mail.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); animation: alerte-pouls 1.6s ease-in-out 3; }
@keyframes alerte-pouls { 50% { box-shadow: 0 24px 60px -16px rgba(91, 47, 212, .8), 0 0 0 8px rgba(139, 92, 246, .35); } }
.alerte-emoji { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .2); font-size: 22px; }
.alerte-texte { flex: 1; min-width: 0; display: grid; }
.alerte-texte b { font-size: 16px; } .alerte-texte small { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#alerte-mail button { flex: none; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; box-shadow: none; }
#alerte-mail button.primaire { background: #fff; color: #5b2fd4; border-color: #fff; font-weight: 700; }
@media (max-width: 760px) { .notif-droite { max-width: none; margin-left: 48px; justify-items: start; grid-auto-flow: column; align-items: center; } #alerte-mail { top: calc(8px + env(safe-area-inset-top)); } }
.fil-tete b, .fil-tete .lien { white-space: nowrap; }

/* ---------------------------------------------------------------- Potentiels : la note sur sa propre ligne, bien lisible */
@media (min-width: 761px) {
  #pot table.compact th:nth-child(7), #pot table.compact td.note { width: 0 !important; max-width: 0; padding-left: 0; padding-right: 0; font-size: 0; overflow: hidden; }
  #pot table.compact th:nth-child(2) { width: auto !important; } #pot table.compact { min-width: 880px; }
  #pot tr:has(+ tr.ligne-note) > td { border-bottom: 0; padding-bottom: 3px; }
  #pot tr.ligne-note > td { padding-top: 0; padding-bottom: 10px; white-space: normal; overflow: visible; }
  #pot tr.ligne-note { cursor: pointer; }
  .note-bulle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 7px 12px; border-radius: 10px; border-left: 3px solid #e0a100; background: rgba(224, 161, 0, .12); color: var(--texte); font-size: 13.5px; line-height: 1.45; }
  .note-bulle b { margin-right: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #c98f00; }
  [data-theme=dark] .note-bulle b { color: #f0c44a; }
}
@media (max-width: 760px) { #pot tr.ligne-note { display: none; } }

/* ---------------------------------------------------------------- Potentiels : nombre de logements bien en evidence */
.logts { float: right; display: inline-flex; align-items: baseline; gap: 4px; margin: 2px 0 0 10px; padding: 4px 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(47, 127, 230, .22), rgba(47, 127, 230, .10)); border: 1px solid rgba(47, 127, 230, .45); color: var(--texte); font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.logts b, table.compact tr[data-action=fiche] td:nth-child(2) .logts b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #2f7fe6; }
[data-theme=dark] .logts b, [data-theme=dark] table.compact tr[data-action=fiche] td:nth-child(2) .logts b { color: #7db4ff; }
.logts.vide { background: none; border-style: dashed; border-color: var(--bord); opacity: .6; }
.logts.vide b, [data-theme=dark] .logts.vide b, table.compact tr[data-action=fiche] td:nth-child(2) .logts.vide b, [data-theme=dark] table.compact tr[data-action=fiche] td:nth-child(2) .logts.vide b { color: var(--doux); font-size: 14px; }

/* ---------------------------------------------------------------- Mail : choix rapides pour la personne eue au telephone */
.rang-choix { display: flex; gap: 8px; } .rang-choix select { flex: 0 0 42%; min-width: 0; } .rang-choix input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .rang-choix { flex-direction: column; } .rang-choix select { flex: none; } }

/* ---------------------------------------------------------------- Mail : notes de la fiche et suggestion IA */
.mail-notes { margin: 14px 0; padding: 12px 14px; border-radius: 14px; border-left: 3px solid #e0a100; background: rgba(224, 161, 0, .10); }
.mail-notes-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mail-notes-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 130px; overflow-y: auto; font-size: 14px; line-height: 1.5; }
.mail-notes-appels { margin: 8px 0 0; padding: 8px 0 0; list-style: none; display: grid; gap: 4px; border-top: 1px dashed rgba(128, 128, 128, .3); font-size: 13px; line-height: 1.45; max-height: 110px; overflow-y: auto; }
.mail-notes-appels small { color: var(--doux); font-weight: 600; margin-right: 4px; }
#mail-ia:not(:empty) { margin-top: 10px; }
.mail-ia-proposition { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(122, 82, 232, .4); background: linear-gradient(135deg, rgba(122, 82, 232, .10), rgba(47, 211, 154, .08)); animation: monte .25s both; }
.mail-ia-proposition small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7a52e8; }
.boite .mail-ia-proposition textarea { min-height: 76px; line-height: 1.5; }
.mail-ia-ok { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); }
#mail-corps [data-ia] { background: rgba(122, 82, 232, .14); box-shadow: -6px 0 0 rgba(122, 82, 232, .14), 6px 0 0 rgba(122, 82, 232, .14); border-radius: 4px; }

/* ---------------------------------------------------------------- Fenetre du mail : informations a gauche, mail en grand a droite */
.boite.boite-mail { width: min(1320px, 100%); height: min(940px, calc(calc(100vh / var(--z, 1)) - 32px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.boite-mail > .tete { margin: 0; padding: 18px 24px 14px; border-bottom: 1px solid var(--bord); align-items: center; }
.boite-mail > .tete h1 { font-size: 22px; }
.mail-deux { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 1fr); }
.mail-infos { min-height: 0; overflow-y: auto; padding: 18px 20px 22px 24px; border-right: 1px solid var(--bord); background: color-mix(in srgb, var(--bord) 22%, transparent); }
.mail-infos .champs { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.mail-infos .rang-choix button { flex: none; padding: 0 12px; }
.mail-etape { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.mail-etape:first-child { margin-top: 0; }
.mail-etape i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: 11px; letter-spacing: 0; }
.mail-infos .mail-notes { margin: 0; }
.mail-infos .avec-delais label { margin-bottom: 8px; }
.mail-apercu { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 24px 12px 22px; }
.mail-objet { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); }
.mail-objet small { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.mail-objet input, [data-theme=dark] .mail-objet input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; padding: 6px 0; font-weight: 600; font-size: 14.5px; }
.mail-objet button { flex: none; padding: 7px 10px; }
.boite-mail #mail-corps { flex: 1; min-height: 0; max-height: none; padding: 30px 36px; border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(12, 29, 23, .55), 0 1px 0 rgba(255, 255, 255, .6) inset; }
.boite-mail #mail-corps > div { max-width: 720px; margin: 0 auto; }
.mail-aide { color: var(--doux); font-size: 12px; text-align: center; }
.mail-actions { margin: 0; padding: 12px 24px; border-top: 1px solid var(--bord); background: var(--carte); }
.mail-actions button { min-height: 40px; } .mail-actions .primaire { padding-left: 20px; padding-right: 22px; }
@media (max-width: 980px) {
  .boite.boite-mail { height: auto; max-height: calc(calc(100dvh / var(--z, 1)) - 16px); display: block; overflow-y: auto; }
  .mail-deux { display: block; } .mail-infos { border-right: 0; border-bottom: 1px solid var(--bord); overflow: visible; padding: 16px; }
  .mail-apercu { padding: 16px; } .boite-mail #mail-corps { max-height: calc(62vh / var(--z, 1)); padding: 18px; }
  .mail-actions { position: sticky; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } .mail-actions .primaire { margin-left: 0 !important; flex: 1 1 100%; order: -1; }
  .boite-mail > .tete { padding: 14px 16px 12px; } .boite-mail > .tete p { display: none; }
}
@media (max-width: 980px) {
  .rang-choix:has(> button) { flex-direction: row; }
  .mail-actions { gap: 6px; } .mail-actions button:not(.primaire) { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
  .mail-actions [data-suite=suivant] { display: none; }
}

/* ---------------------------------------------------------------- Mail : l'IA modifie le mail lui-meme (proposition surlignee, a garder ou refuser) */
.mail-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mail-barre small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.mail-apercu #mail-ia:empty { display: none; } .mail-apercu #mail-ia:not(:empty) { margin: 0; }
.mail-ia-etat { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; border: 1px solid rgba(122, 82, 232, .4); background: linear-gradient(135deg, rgba(122, 82, 232, .14), rgba(47, 211, 154, .08)); animation: monte .25s both; }
.mail-ia-etat span { flex: 1 1 260px; } .mail-ia-etat button { flex: none; }
.mail-ia-etat.gardee { border-color: rgba(14, 138, 98, .45); background: rgba(14, 138, 98, .10); font-weight: 600; }
.mail-infos .mail-notes-texte { max-height: 220px; }

/* ---------------------------------------------------------------- Base : une fiche « pas interesse » reste dans la liste, mais barree */
tr.barree > td:not(:first-child):not(:nth-child(7)) { text-decoration: line-through; text-decoration-color: rgba(217, 72, 61, .75); text-decoration-thickness: 1.5px; color: var(--doux); }
tr.barree > td.large b { font-weight: 500; }
tr.barree { opacity: .72; } tr.barree:hover { opacity: 1; }

/* ---------------------------------------------------------------- QPV : bande sous la tirelire, et la tirelire qui fete le montant QPV */
.qpv-bande { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 12px; padding: 9px 12px 9px 14px; border-radius: 12px; border: 1px dashed var(--bord); font-size: 13px; line-height: 1.4; }
.qpv-texte { flex: 1 1 220px; min-width: 0; } .qpv-texte small { display: block; margin-top: 2px; color: var(--doux); font-size: 12px; }
.qpv-texte.calme, .qpv-texte.attente { color: var(--doux); } .qpv-texte.attente { animation: pulse 1.4s ease-in-out infinite alternate; }
.qpv-bande.trouve { border: 1px solid rgba(224, 161, 0, .6); background: linear-gradient(135deg, rgba(255, 214, 92, .22), rgba(255, 214, 92, .06)); animation: monte .3s both; }
.qpv-bande.pris { border: 1px solid rgba(14, 138, 98, .5); background: rgba(14, 138, 98, .10); }
.qpv-bande button.qpv-bouton, [data-theme=dark] .qpv-bande button.qpv-bouton { flex: none; background: linear-gradient(135deg, #f2bd3b, #e09a12); border-color: transparent; color: #3a2800; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(224, 154, 18, .9); }
.qpv-bouton:hover { transform: translateY(-1px) scale(1.03); }
.etiquette-qpv, .logts i { font-style: normal; padding: 1px 6px; border-radius: 6px; background: linear-gradient(135deg, #f2bd3b, #e09a12); color: #3a2800; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.logts i { align-self: center; }
.commission.qpv { border-color: rgba(224, 161, 0, .8); box-shadow: 0 0 0 3px rgba(242, 189, 59, .16); }
.tirelire .coeur { position: absolute; left: 50%; top: 30%; z-index: 3; font-style: normal; font-size: 16px; opacity: 0; pointer-events: none; }
.commission.fete .tirelire svg { animation: cochon-content 1.3s cubic-bezier(.2, 1.5, .4, 1) both, flotte 2.8s ease-in-out 1.3s infinite alternate; }
.commission.fete .coeur { animation: coeur-monte 1.4s ease-out both; }
.commission.fete .coeur:nth-of-type(5) { --dx: -34px; animation-delay: .1s; } .commission.fete .coeur:nth-of-type(6) { --dx: 6px; animation-delay: .28s; } .commission.fete .coeur:nth-of-type(7) { --dx: 38px; animation-delay: .45s; }
.commission.fete .montant { animation: saute .6s cubic-bezier(.2, 1.6, .4, 1) .2s both, brille 3.5s linear infinite; }
@keyframes cochon-content { 0% { transform: scale(.8) rotate(0); } 25% { transform: scale(1.32) rotate(-9deg); } 45% { transform: scale(1.18) rotate(8deg); } 65% { transform: scale(1.26) rotate(-5deg); } 82% { transform: scale(1.06) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes coeur-monte { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -62px) scale(1.25); } }
@media (max-width: 760px) { .fiche-corps > div:first-child > .qpv-bande { order: 3; margin-top: 0; } .fiche-corps.mode-saisie > div:first-child > .qpv-bande { display: none; } }

/* ---------------------------------------------------------------- Filtre QPV, et la tirelire triste quand l'adresse n'est pas en QPV */
.puce.filtre-qpv.actif, [data-theme=dark] .puce.filtre-qpv.actif { background: linear-gradient(135deg, #f2bd3b, #e09a12); border-color: transparent; color: #3a2800; }
.tirelire .larme { position: absolute; top: 34%; z-index: 3; font-style: normal; font-size: 13px; opacity: 0; pointer-events: none; }
.tirelire .larme:nth-of-type(8) { left: 26%; } .tirelire .larme:nth-of-type(9) { left: 60%; }
.commission.triste .tirelire svg { animation: cochon-triste 2.4s ease-in-out both; filter: grayscale(.7) drop-shadow(0 4px 4px rgba(60, 70, 90, .3)) !important; }
.commission.triste .larme { animation: larme-tombe 1.1s ease-in 2 both; } .commission.triste .larme:nth-of-type(9) { animation-delay: .35s; }
.commission.triste .rayons, .commission.triste .piece { opacity: 0 !important; animation: none !important; }
.commission.triste { border-color: rgba(110, 124, 140, .5); }
@keyframes cochon-triste { 0% { transform: translateY(0) rotate(0) scale(1); } 15% { transform: translateY(5px) rotate(-7deg) scale(.9); } 30% { transform: translateY(5px) rotate(6deg) scale(.9); } 45% { transform: translateY(6px) rotate(-5deg) scale(.88); } 60% { transform: translateY(6px) rotate(4deg) scale(.88); } 80% { transform: translateY(7px) rotate(0) scale(.86); } 100% { transform: translateY(0) rotate(0) scale(1); } }
@keyframes larme-tombe { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px) scale(1); } }
@media (max-width: 760px) { .filtres > .filtre-qpv, .tete > .actions > .filtre-qpv { display: none; } body.filtres-ouverts .filtres > .filtre-qpv, body.filtres-ouverts .tete > .actions > .filtre-qpv { display: inline-flex; min-height: 40px; } }

/* ---------------------------------------------------------------- Imports : doublons mis de cote */
.defile.doublons { margin: 8px 0 12px; max-height: 420px; overflow-y: auto; }
.defile.doublons td { white-space: normal; }

/* ---------------------------------------------------------------- Telephone, 3e passe : la fiche contact pensee pour le telephone */
@media (max-width: 760px) {
  body:has(#tiroir.ouvert) aside, body:has(#tiroir.ouvert) .sonnette-page, body:has(#modale.ouvert) aside, body:has(#modale.ouvert) .sonnette-page { display: none; }
  #tiroir, #tiroir.funot, #tiroir.vip { padding: 0 14px 22px; }
  .fm-barre { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0 -14px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: color-mix(in srgb, var(--carte) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
  .fm-retour { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; } .fm-retour .ico { width: 22px; height: 22px; }
  .fm-titre { display: grid; min-width: 0; text-align: center; line-height: 1.25; }
  .fm-titre b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-titre small { font-size: 11px; color: var(--doux); }
  .fm-suivant { min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
  .fiche-corps.fm, .fiche-corps.fm.mode-saisie { display: block; }
  .fiche-corps.fm > div, .fiche-corps.fm > div > * { display: revert; order: 0; }
  .fm-hero { padding: 16px 0 12px; }
  .fiche-corps.fm > .fm-hero > .fm-etat { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .fm-hero h1, #tiroir .fm-hero h1 { margin: 0; font-size: 24px; line-height: 1.15; }
  .fm-hero .etab { margin: 5px 0 0; font-size: 14px; }
  .fiche-corps.fm > .fm-hero > .fm-lieu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; color: var(--doux); font-size: 14px; }
  .fm-lieu > span:first-child { display: inline-flex; align-items: center; gap: 5px; } .fm-lieu .ico { width: 15px; height: 15px; } .fm-lieu .logts { float: none; margin: 0; }
  .fiche-corps.fm > .fm-hero > .fm-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .fm-action, [data-theme=dark] .fm-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 78px; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); text-decoration: none; text-align: center; box-shadow: var(--ombre); }
  .fm-action .ico { width: 22px; height: 22px; color: var(--accent); } .fm-action b { font-size: 13px; font-weight: 700; }
  .fm-action small { max-width: 100%; font-size: 10.5px; font-weight: 500; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fm-action.appel, [data-theme=dark] .fm-action.appel { border-color: transparent; background: linear-gradient(135deg, #19b584, #0a6b4c); color: #fff; box-shadow: 0 12px 24px -12px rgba(14, 138, 98, .9); }
  .fm-action.appel .ico, .fm-action.appel small { color: #fff; }
  .fm-action.du, [data-theme=dark] .fm-action.du { border-color: #8b5cf6; background: rgba(139, 92, 246, .18); } .fm-action.du .ico { color: #8b5cf6; } .fm-action.du small { color: #a78bfa; font-weight: 700; }
  .fm-onglets { position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px -4px 14px; padding: 4px; border-radius: 15px; background: color-mix(in srgb, var(--bord) 70%, var(--carte)); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .6); }
  .fm-onglets button, [data-theme=dark] .fm-onglets button { min-height: 40px; padding: 0 6px; border: 0; border-radius: 11px; background: none; box-shadow: none; justify-content: center; font-size: 14px; font-weight: 600; color: var(--doux); }
  .fm-onglets button.actif, [data-theme=dark] .fm-onglets button.actif { background: var(--carte); color: var(--texte); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5); }
  .fm-onglets i { font-style: normal; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--doux) 28%, transparent); font-size: 11px; }
  .fm-page { display: none; } .fm-page.actif { display: block; animation: apparait .2s both; }
  .fm-page h3 { margin: 20px 0 10px; } .fm-page > h3:first-child { margin-top: 4px; }
  .fm-note { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border-left: 3px solid #e0a100; background: rgba(224, 161, 0, .10); }
  .fm-note > small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #c98f00; }
  .fm-note .note-rapide { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; } .fm-note textarea { width: 100%; min-height: 110px; }
  .fm-note .lien { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; } .fm-note .lien .ico { width: 14px; height: 14px; }
  .fm-infos { margin-top: 12px; border: 1px solid var(--bord); border-radius: 16px; background: var(--carte); overflow: hidden; }
  .fm-info { display: grid; gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--bord); } .fm-info:last-child { border-bottom: 0; }
  .fm-info > small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); } .fm-info > span { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
  .fm-reglages { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 18px; }
  .fm-page .commission { margin-top: 0; } .fm-page .qpv-bande { margin-top: -4px; }
  .fm-saisie .fm-actions, .fm-saisie .fm-onglets, .fm-saisie .fm-lieu, .fm-saisie .fm-etat { display: none !important; }
  .fm-saisie .fm-hero { padding-bottom: 2px; } .fm-saisie .fm-hero h1 { font-size: 19px; }
  .fm-page .histo { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--carte) 70%, transparent); margin-bottom: 8px; }
}
@media (max-width: 760px) {
  /* Saisie d'un resultat et formulaire « Modifier » : en-tete fixe, boutons pleine largeur en bas */
  .fm .saisie-appel > .actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .fm .saisie-appel > .actions button { width: 100%; min-height: 48px; justify-content: center; }
  .fiche-form .form-tete { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 -14px 14px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: color-mix(in srgb, var(--carte) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
  .fiche-form .form-tete .avatar { display: none; } .fiche-form .form-tete h1, #tiroir .fiche-form .form-tete h1 { font-size: 18px; margin: 0 0 4px; }
  .fiche-form .form-tete button { min-height: 40px; }
  .fiche-form .form-pied { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; bottom: -22px; margin: 14px -14px -22px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--carte); border-top: 1px solid var(--bord); }
  .fiche-form .form-pied small { display: none; } .fiche-form .form-pied button { min-height: 48px; width: 100%; justify-content: center; }
  /* Tableaux qui restent des tableaux (Campagnes, historique des imports, doublons) : ils defilent dans leur cadre, pas la page */
  .defile:not(:has(tr[data-action=fiche])) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main .carte { padding: 14px; }
  main .champs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Telephone, 4e passe : accueil et listes epures (une ligne par fiche) */
.t-vertf { --t: 8, 116, 76; } .t-rouge { --t: 217, 72, 61; }
@media (max-width: 760px) {
  main { padding-top: 12px; }
  main .tete { margin-bottom: 10px; } main h1 { font-size: 24px; }
  .mj-date { margin: 4px 0 2px; color: var(--doux); font-size: 14px; } .mj-date::first-letter { text-transform: uppercase; }
  .mj h1 { margin: 0 0 16px; font-size: 28px; padding-right: 52px; }
  .mj h3 { margin: 22px 2px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
  .mj-go, [data-theme=dark] .mj-go { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 18px; border: 0; border-radius: 20px; background: linear-gradient(135deg, #19b584, #0a6b4c); color: #fff; text-align: left; box-shadow: 0 16px 30px -16px rgba(14, 138, 98, .95); }
  .mj-go .ico { flex: none; width: 28px; height: 28px; } .mj-go span { flex: 1; display: grid; } .mj-go b { font-size: 18px; } .mj-go small { font-size: 13px; opacity: .9; font-weight: 500; } .mj-go i { font-style: normal; font-size: 26px; opacity: .8; }
  .mj-taches { display: grid; gap: 8px; }
  .mj-tache, [data-theme=dark] .mj-tache { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 10px 14px 10px 10px; border: 1px solid var(--bord); border-radius: 18px; background: var(--carte); color: var(--texte); text-align: left; box-shadow: var(--ombre); justify-content: flex-start; }
  .mj-icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(var(--t), .18); color: rgb(var(--t)); } .mj-icone .ico { width: 21px; height: 21px; }
  .mj-texte { flex: 1; min-width: 0; display: grid; line-height: 1.3; } .mj-texte b { font-size: 16px; font-weight: 600; } .mj-texte small { font-size: 13px; color: var(--doux); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mj-nombre { flex: none; min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; background: rgb(var(--t)); color: #fff; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .mj-tache.rien { box-shadow: none; opacity: .62; } .mj-tache.rien .mj-nombre { background: none; color: var(--accent); font-size: 20px; } .mj-tache.rien .mj-icone { background: color-mix(in srgb, var(--bord) 60%, transparent); color: var(--doux); }

  /* Une ligne par fiche */
  .ml-liste { display: grid; gap: 6px; }
  .ml-ligne, [data-theme=dark] .ml-ligne { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 12px 8px 8px; border: 1px solid var(--bord); border-radius: 16px; background: var(--carte); color: var(--texte); text-align: left; box-shadow: none; justify-content: flex-start; }
  .ml-texte { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
  .ml-texte b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ml-texte small { font-size: 13px; font-weight: 400; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ml-texte em { font-style: normal; font-weight: 600; color: rgb(var(--t)); }
  .ml-quand { flex: none; display: grid; place-items: center; align-content: center; width: 58px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--bord) 60%, transparent); line-height: 1.15; text-align: center; }
  .ml-quand b { font-size: 13px; font-weight: 700; text-transform: capitalize; } .ml-quand small { font-size: 10.5px; font-weight: 500; color: var(--doux); white-space: nowrap; }
  .ml-quand.q-jour { background: linear-gradient(135deg, #f2711c, #e2560f); color: #fff; } .ml-quand.q-retard { background: linear-gradient(135deg, #d9483d, #b4282c); color: #fff; }
  .ml-quand.q-mail { background: linear-gradient(135deg, #8b5cf6, #6d3fe0); color: #fff; } .ml-quand.q-demain { background: rgba(47, 127, 230, .2); }
  .ml-quand.q-jour small, .ml-quand.q-retard small, .ml-quand.q-mail small { color: rgba(255, 255, 255, .9); }
  .ml-fin { flex: none; display: grid; justify-items: end; line-height: 1.1; } .ml-fin b { font-size: 17px; font-weight: 800; color: #5b9dff; font-variant-numeric: tabular-nums; } .ml-fin small { font-size: 10px; color: var(--doux); }
  .ml-aller { flex: none; font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
  .ml-point { flex: none; width: 10px; height: 10px; margin: 0 2px 0 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
  .ml-statut { flex: none; max-width: 38%; font-size: 12px; font-weight: 600; color: var(--c); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ml-ligne.barree .ml-texte b, .ml-ligne.barree .ml-texte small { text-decoration: line-through; text-decoration-color: rgba(217, 72, 61, .75); color: var(--doux); } .ml-ligne.barree { opacity: .7; }
  .ml-ligne.funot { border-left: 3px solid #d7263d; }
  .ml-groupe, [data-theme=dark] .ml-groupe { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 12px 0 2px; padding: 4px 6px; border: 0; background: none; box-shadow: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
  .ml-groupe b { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--bord) 70%, transparent); color: var(--texte); font-size: 12px; }
  .ml-liste > .ml-groupe:first-child { margin-top: 0; }
  /* Mails : les listes sans leurs cadres ni leurs textes d'aide */
  .mails-col .aide, .mails-liste h3 { display: none; } .mails-liste { display: grid; gap: 6px; }
  .puces { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 -14px 10px; padding: 0 14px 4px; scrollbar-width: none; } .puces::-webkit-scrollbar { display: none; } .puces .puce { flex: none; }
  .pagination { justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
}

/* ---------------------------------------------------------------- Base : etat d'appel de chaque fiche (CRM + Ringover) */
.etat-appel { display: inline-grid; gap: 1px; padding: 3px 10px; border-radius: 10px; line-height: 1.2; white-space: nowrap; border: 1px solid transparent; }
.etat-appel b { font-size: 12.5px; font-weight: 700; } .etat-appel small { font-size: 10.5px; font-weight: 500; color: var(--doux); }
.etat-appel.e-jamais { border: 1px dashed rgba(22, 168, 113, .6); color: #16a871; }
.etat-appel.e-note { background: color-mix(in srgb, var(--bord) 55%, transparent); }
.etat-appel.e-decroche { background: rgba(122, 82, 232, .16); border-color: rgba(122, 82, 232, .4); } .etat-appel.e-decroche b { color: #8b5cf6; }
.etat-appel.e-tente { background: rgba(242, 113, 28, .14); border-color: rgba(242, 113, 28, .4); } .etat-appel.e-tente b { color: #f2711c; }
tr.barree > td .etat-appel { text-decoration: none; }
/* ---------------------------------------------------------------- Logements visibles partout ou c'est utile */
.logts.en-ligne { float: none; margin: 0 0 0 8px; padding: 1px 8px; vertical-align: 1px; font-size: 10.5px; } .logts.en-ligne b, .notif-texte .logts.en-ligne b { font-size: 13px; }
td.large .logts { margin-top: -2px; }
tr.barree > td .logts { text-decoration: none; opacity: .7; }
@media (max-width: 760px) { .ml-statut { display: grid; justify-items: end; gap: 1px; } .ml-statut small { font-size: 11px; font-weight: 700; color: #5b9dff; } }

/* ---------------------------------------------------------------- Taille du site ajustee a l'ecran (voir Taille dans app.js) */
.taille-reglage { float: right; display: inline-flex; gap: 2px; margin: -2px 0 0 6px; }
aside .pied .taille-reglage button { padding: 2px 6px; font-size: 10.5px; font-weight: 700; border-radius: 7px; min-height: 0; }
@media (max-width: 760px) { .taille-reglage { display: none; } }
/* ---------- Recherche générale (Ctrl + K) ---------- */
aside .pal-bouton { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .28); background: rgba(127, 127, 127, .1); color: inherit; font: inherit; font-size: 13px; cursor: pointer; opacity: .9; }
aside .pal-bouton:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
aside .pal-bouton span { flex: 1; text-align: left; }
aside .pal-bouton .ico { width: 16px; height: 16px; flex: none; }
#palette kbd, .pal-bouton kbd { font: 600 11px/1 inherit; font-family: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(127, 127, 127, .35); background: rgba(127, 127, 127, .12); color: inherit; opacity: .8; white-space: nowrap; }
#palette { position: fixed; inset: 0; z-index: 10000; display: grid; justify-items: center; align-items: start; padding: calc(13vh / var(--z, 1)) 16px 16px; background: rgba(8, 18, 14, .55); animation: pal-fond .14s ease-out; }
#palette .pal-boite { width: min(700px, 100%); max-height: calc(72vh / var(--z, 1)); display: flex; flex-direction: column; overflow: hidden; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 18px; box-shadow: var(--ombre-forte), 0 40px 110px -30px rgba(0, 0, 0, .55); animation: pal-entree .2s cubic-bezier(.22, 1, .36, 1); }
#palette .pal-champ { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bord); }
#palette .pal-champ .ico { width: 22px; height: 22px; flex: none; color: var(--accent); }
#palette .pal-champ input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: inherit; font: inherit; font-size: 18px; }
#palette .pal-liste { overflow-y: auto; padding: 6px 8px 8px; }
#palette .pal-titre { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
#palette .pal-item { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform: none; }
#palette .pal-item:hover { background: var(--fond); }
#palette .pal-item.actif { background: var(--accent-clair); }
#palette .pal-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--fond); color: var(--doux); }
#palette .pal-ico .ico { width: 17px; height: 17px; }
#palette .pal-item.actif .pal-ico { background: var(--accent); color: #fff; }
#palette .pal-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
#palette .pal-texte b, #palette .pal-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#palette .pal-texte b { font-size: 14.5px; font-weight: 650; }
#palette .pal-texte small { font-size: 12.5px; color: var(--doux); }
#palette .pal-fin { flex: none; display: flex; align-items: center; gap: 6px; }
#palette .pal-vide { margin: 0; padding: 28px 16px; text-align: center; color: var(--doux); }
#palette .pal-pied { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; border-top: 1px solid var(--bord); font-size: 12px; color: var(--doux); }
#palette .pal-pied span { display: inline-flex; align-items: center; gap: 5px; }
@keyframes pal-fond { from { opacity: 0; } }
@keyframes pal-entree { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@media (max-width: 760px) {
  aside .pal-bouton { display: none; }
  #palette { padding: 12px 10px; }
  #palette .pal-boite { max-height: calc(80dvh / var(--z, 1)); }
  #palette .pal-pied, #palette .pal-fin .logts { display: none; }
}

/* ============================================================ Design « verre vivant »
   Le fond du site bouge lentement (de grandes taches de couleur qui dérivent), et les modules sont en verre :
   translucides, bord lumineux, reflet en haut. Les couleurs de l'accueil et du menu restent.
   Le fond est déjà flou par nature : pas besoin de flouter derrière chaque module, ce qui garde le site fluide. */
:root { --fond: #eef3f2; --verre: rgba(255, 255, 255, .58); --verre-fort: rgba(255, 255, 255, .74); --verre-bord: rgba(255, 255, 255, .85); --verre-reflet: rgba(255, 255, 255, .95);
  --verre-ombre: 0 18px 44px -26px rgba(20, 45, 60, .38), 0 2px 6px rgba(20, 45, 60, .05); }
[data-theme=dark] { --fond: #060a10; --verre: rgba(255, 255, 255, .055); --verre-fort: rgba(255, 255, 255, .09); --verre-bord: rgba(255, 255, 255, .11); --verre-reflet: rgba(255, 255, 255, .16);
  --verre-ombre: 0 24px 60px -28px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .25); }
body { background: var(--fond); }
body::before, body::after { content: ""; position: fixed; inset: -28%; z-index: -1; pointer-events: none; will-change: transform; }
body::before, [data-theme=dark] body::before { background:
  radial-gradient(34% 38% at 20% 24%, rgba(16, 185, 129, var(--f1, .34)), transparent 70%),
  radial-gradient(30% 34% at 80% 20%, rgba(59, 130, 246, var(--f2, .26)), transparent 70%),
  radial-gradient(36% 40% at 72% 82%, rgba(45, 212, 191, var(--f3, .22)), transparent 70%);
  animation: fond-a 34s ease-in-out infinite alternate; }
body::after { background:
  radial-gradient(28% 32% at 28% 78%, rgba(20, 184, 166, var(--f4, .26)), transparent 70%),
  radial-gradient(24% 28% at 56% 42%, rgba(56, 189, 248, var(--f5, .16)), transparent 70%),
  radial-gradient(22% 26% at 90% 55%, rgba(52, 211, 153, var(--f6, .10)), transparent 70%);
  animation: fond-b 46s ease-in-out infinite alternate; }
[data-theme=dark] body { --f1: .50; --f2: .42; --f3: .40; --f4: .34; --f5: .16; --f6: .16; }
@keyframes fond-a { from { transform: translate3d(-5%, -3%, 0) rotate(-6deg) scale(1.05); } to { transform: translate3d(6%, 5%, 0) rotate(8deg) scale(1.22); } }
@keyframes fond-b { from { transform: translate3d(6%, 4%, 0) rotate(7deg) scale(1.18); } to { transform: translate3d(-7%, -5%, 0) rotate(-9deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

/* Les modules en verre */
.carte, .defile, .onglet, .tuile, [data-theme=dark] .carte, [data-theme=dark] .defile, [data-theme=dark] .onglet, [data-theme=dark] .tuile {
  background-color: var(--verre); border: 1px solid var(--verre-bord); box-shadow: inset 0 1px 0 var(--verre-reflet), var(--verre-ombre); }
.carte, .defile, .tuile { border-radius: 20px; }
.tuile:hover, [data-theme=dark] .tuile:hover, .onglet:hover, [data-theme=dark] .onglet:hover { background-color: var(--verre-fort); }
.tuile.vivante, [data-theme=dark] .tuile.vivante { background: linear-gradient(160deg, rgba(var(--c), .20), rgba(var(--c), .04) 60%), var(--verre); border-color: rgba(var(--c), .38); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 18px 40px -26px rgba(var(--c), .9), var(--verre-ombre); }
.tuile.vivante:hover, [data-theme=dark] .tuile.vivante:hover { background: linear-gradient(160deg, rgba(var(--c), .30), rgba(var(--c), .08) 60%), var(--verre-fort); border-color: rgba(var(--c), .7); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 22px 44px -22px rgb(var(--c)); }
.carte { position: relative; }
.carte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, var(--verre-reflet), transparent 28%); opacity: .22; }
[data-theme=dark] .carte::after { opacity: .35; }
@media (min-width: 761px) {
  aside { background: var(--verre); border-color: var(--verre-bord); box-shadow: inset 0 1px 0 var(--verre-reflet), var(--verre-ombre); }
  [data-theme=dark] aside { background: rgba(10, 16, 22, .42); border-color: var(--verre-bord); box-shadow: inset 0 1px 0 var(--verre-reflet), var(--verre-ombre); }
}
/* ---------- Plus sombre, et la couleur seulement là où ça compte ----------
   Le fond continue de bouger doucement. Les modules sont en verre fumé, neutres. La couleur signale : ce qu'il y a à faire,
   la page ouverte, le bouton principal. Un chiffre à zéro reste gris. */
[data-theme=dark] { --fond: #04070a; --carte: #0f1416; --bord: #1c2326; --verre: rgba(13, 18, 21, .62); --verre-fort: rgba(20, 27, 31, .74); --verre-bord: rgba(255, 255, 255, .075); --verre-reflet: rgba(255, 255, 255, .09);
  --verre-ombre: 0 26px 60px -30px rgba(0, 0, 0, .95), 0 2px 6px rgba(0, 0, 0, .3); }
[data-theme=dark] body { --f1: .34; --f2: .28; --f3: .26; --f4: .22; --f5: .12; --f6: .12; }
[data-theme=dark] .carte::after { opacity: .18; }

#vue .tuiles .tuile:nth-child(1) { --c: 52, 211, 153 !important; }
#vue .tuiles .tuile:nth-child(2) { --c: 45, 212, 191 !important; }
#vue .tuiles .tuile:nth-child(3) { --c: 245, 184, 64 !important; }
#vue .tuiles .tuile:nth-child(4) { --c: 245, 184, 64 !important; }
#vue .tuiles .tuile:nth-child(5) { --c: 56, 189, 248 !important; }
#vue .tuiles .tuile:has(b[data-compte="0"]) { --c: 128, 142, 137 !important; }
#vue .parcours-etape:nth-child(1) { --c: #2fbf8f !important; }
#vue .parcours-etape:nth-child(2) { --c: #22b3a6 !important; }
#vue .parcours-etape:nth-child(3) { --c: #2a9fd6 !important; }
#vue .parcours-etape:nth-child(4) { --c: #3b82f6 !important; }
#vue .parcours-etape:nth-child(5) { --c: #4f6fe8 !important; }
#vue .resume-chiffres span:nth-child(1) { --rc: 245, 184, 64; }
#vue .resume-chiffres span:nth-child(2) { --rc: 245, 184, 64; }
#vue .resume-chiffres span:nth-child(3) { --rc: 56, 189, 248; }
#vue .resume-chiffres span:has(b[data-compte="0"]) { --rc: 128, 142, 137; }
#vue .resume-chiffres span, [data-theme=dark] #vue .resume-chiffres span { color: var(--texte); font-weight: 500; background: rgba(128, 142, 137, .08); border: 1px solid var(--verre-bord); }
#vue .resume-chiffres span::before { background: rgb(var(--rc)); opacity: .14; }
#vue .resume-chiffres span b { color: color-mix(in srgb, rgb(var(--rc)) 82%, var(--texte)); }
aside .fil-ligne { --t: 245, 184, 64 !important; }

/* Les bulles de l'accueil : verre fumé, chiffre en grand, la couleur dans l'anneau et le trait du bas. */
#vue .tuile.vivante, [data-theme=dark] #vue .tuile.vivante { min-height: 112px; padding: 16px 18px 18px; border-radius: 22px; border-color: var(--verre-bord); background: var(--verre); box-shadow: inset 0 1px 0 var(--verre-reflet), var(--verre-ombre); }
#vue .tuile.vivante:hover, [data-theme=dark] #vue .tuile.vivante:hover { background: var(--verre-fort); border-color: rgba(var(--c), .5); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 20px 44px -28px rgb(var(--c)); transform: translateY(-3px); }
#vue .tuile.vivante b { font-size: 34px; font-weight: 650; letter-spacing: -.03em; }
#vue .tuile.vivante > span:not(.pict):not(.tuile-eau) { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
#vue .tuile.vivante small { color: var(--doux); font-weight: 500; }
#vue .tuile.vivante .pict, [data-theme=dark] #vue .tuile.vivante .pict { width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--c), .10); color: rgb(var(--c)); border: 1px solid rgba(var(--c), .42); box-shadow: 0 0 16px -5px rgba(var(--c), .7); align-self: start; }
#vue .tuile.vivante:hover .pict { transform: scale(1.06); }
#vue .tuile.vivante .tuile-eau { top: auto; left: 18px; right: auto; bottom: 0; width: var(--niveau); min-width: 14px; max-width: calc(100% - 36px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--c), 0), rgb(var(--c))); box-shadow: 0 0 10px rgba(var(--c), .8); transition: none; }
#vue .tuile.vivante:hover .tuile-eau { height: 2px; }
#vue .tuile.vivante .vague { display: none; }

/* Menu de gauche : calme, sans animation. La page ouverte est simplement éclairée. */
@media (min-width: 761px) {
  aside nav { gap: 3px; }
  aside nav button, aside nav .raccourci, [data-theme=dark] aside nav button { border-radius: 13px; --teinte: 52, 211, 153; transition: color .15s ease, background .15s ease; }
  aside nav button:hover, [data-theme=dark] aside nav button:hover { background: rgba(128, 142, 137, .12); box-shadow: none; transform: none; }
  aside nav button:hover .ico { color: inherit; filter: none; }
  aside nav button.actif, [data-theme=dark] aside nav button.actif { background: linear-gradient(90deg, rgba(52, 211, 153, .20), rgba(52, 211, 153, .05)); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .26); }
  aside nav button.actif .ico, aside nav button.actif:hover .ico { color: #10b981; filter: none; }
  [data-theme=dark] aside nav button.actif .ico, [data-theme=dark] aside nav button.actif:hover .ico { color: #5ee0b3; }
  aside .pastille { background: rgba(245, 184, 64, .18); color: #c98a12; box-shadow: none; }
  [data-theme=dark] aside .pastille { color: #f5c466; }
  aside .pastille.verte { background: rgba(52, 211, 153, .18); color: #0e9a6c; }
  [data-theme=dark] aside .pastille.verte { color: #6ee7b7; }
  [data-theme=dark] aside { background: rgba(8, 12, 15, .62); }
}
/* Les cases qui comptent le plus (potentiels en cours, visites à venir) ressortent : fond teinté, chiffre et pastille en couleur.
   Les autres gardent une teinte légère quand elles ont quelque chose à montrer. */
#vue .tuiles .tuile.vivante:not(:has(b[data-compte="0"])) { background: linear-gradient(150deg, rgba(var(--c), .10), rgba(var(--c), 0) 60%), var(--verre); }
#vue .tuiles .tuile.vivante.vivante:nth-child(2) { --c: 45, 212, 191 !important; }
#vue .tuiles .tuile.vivante.vivante:nth-child(5) { --c: 56, 189, 248 !important; }
#vue .tuiles .tuile.vivante:nth-child(2),#vue .tuiles .tuile.vivante:nth-child(5), [data-theme=dark] #vue .tuiles .tuile.vivante:nth-child(2), [data-theme=dark] #vue .tuiles .tuile.vivante:nth-child(5) {
  background: linear-gradient(150deg, rgba(var(--c), .26), rgba(var(--c), .06) 70%), var(--verre); border-color: rgba(var(--c), .5);
  box-shadow: inset 0 1px 0 rgba(var(--c), .35), 0 20px 46px -26px rgba(var(--c), .85), var(--verre-ombre); }
#vue .tuiles .tuile.vivante:nth-child(2) b, #vue .tuiles .tuile.vivante:nth-child(5) b { color: color-mix(in srgb, rgb(var(--c)) 80%, var(--texte)); }
#vue .tuiles .tuile.vivante:nth-child(2) > span:not(.pict):not(.tuile-eau), #vue .tuiles .tuile.vivante:nth-child(5) > span:not(.pict):not(.tuile-eau) { color: color-mix(in srgb, rgb(var(--c)) 55%, var(--texte)); }
#vue .tuiles .tuile.vivante:nth-child(2) .pict, #vue .tuiles .tuile.vivante:nth-child(5) .pict, [data-theme=dark] #vue .tuiles .tuile.vivante:nth-child(2) .pict, [data-theme=dark] #vue .tuiles .tuile.vivante:nth-child(5) .pict {
  background: rgb(var(--c)); color: #04110c; border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--c), .16), 0 0 22px -4px rgb(var(--c)); }

/* ---------- Ouverture d'une page : les lignes arrivent en cascade, discrètement ---------- */
#vue.cascade :is(tbody tr:not(.arrive), .mail-carte, .carte > .ligne, .fichette:not(.arrive)) { animation: ligne-entre .42s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .54s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(1) { animation-delay: 0.088s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(2) { animation-delay: 0.116s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(3) { animation-delay: 0.144s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(4) { animation-delay: 0.172s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(5) { animation-delay: 0.2s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(6) { animation-delay: 0.228s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(7) { animation-delay: 0.256s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(8) { animation-delay: 0.284s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(9) { animation-delay: 0.312s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(10) { animation-delay: 0.34s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(11) { animation-delay: 0.368s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(12) { animation-delay: 0.396s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(13) { animation-delay: 0.424s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(14) { animation-delay: 0.452s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(15) { animation-delay: 0.48s; }
#vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette):nth-child(16) { animation-delay: 0.508s; }
@keyframes ligne-entre { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { #vue.cascade :is(tbody tr, .mail-carte, .carte > .ligne, .fichette) { animation: none; } }

/* ---------- Recherche : un champ encastré dans le menu, et un voile coloré quand elle s'ouvre ---------- */
aside .pal-bouton, #app.coque > aside .pal-bouton { height: 38px; margin: 0 0 10px; padding: 0 10px 0 12px; gap: 9px; border-radius: 12px; border: 1px solid transparent; font-size: 13.5px; font-weight: 500; opacity: 1;
  color: var(--doux); background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 2px rgba(16, 32, 26, .10), inset 0 0 0 1px rgba(16, 32, 26, .05); transition: background .15s ease, box-shadow .15s ease, color .15s ease; }
[data-theme=dark] aside .pal-bouton, [data-theme=dark] #app.coque > aside .pal-bouton { background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05); }
aside .pal-bouton:hover, [data-theme=dark] aside .pal-bouton:hover { color: var(--texte); background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 2px rgba(16, 32, 26, .10), inset 0 0 0 1px rgba(52, 211, 153, .45), 0 0 0 3px rgba(52, 211, 153, .12); transform: none; }
[data-theme=dark] aside .pal-bouton:hover { background: rgba(0, 0, 0, .36); }
aside .pal-bouton .ico { width: 15px; height: 15px; opacity: .8; }
aside .pal-bouton kbd { padding: 0; border: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: .55; }

#palette, [data-theme=dark] #palette { -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%); background:
  radial-gradient(48% 42% at 50% 16%, rgba(16, 185, 129, .26), transparent 72%),
  radial-gradient(36% 38% at 16% 82%, rgba(56, 189, 248, .16), transparent 72%),
  radial-gradient(34% 36% at 86% 74%, rgba(45, 212, 191, .14), transparent 72%),
  rgba(3, 7, 10, .74); }
:root:not([data-theme=dark]) #palette { background:
  radial-gradient(48% 42% at 50% 16%, rgba(16, 185, 129, .22), transparent 72%),
  radial-gradient(36% 38% at 16% 82%, rgba(56, 189, 248, .16), transparent 72%),
  radial-gradient(34% 36% at 86% 74%, rgba(45, 212, 191, .14), transparent 72%),
  rgba(226, 236, 233, .72); }
#palette .pal-boite { border-radius: 22px; border: 1px solid rgba(52, 211, 153, .28); background: color-mix(in srgb, var(--carte) 88%, transparent);
  box-shadow: inset 0 1px 0 var(--verre-reflet), 0 0 0 6px rgba(52, 211, 153, .06), 0 40px 110px -30px rgba(16, 185, 129, .55), 0 30px 80px -30px rgba(0, 0, 0, .7); }
#palette .pal-champ { padding: 18px 20px; }
#palette .pal-item.actif { background: linear-gradient(90deg, rgba(52, 211, 153, .20), rgba(52, 211, 153, .05)); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .24); }

/* ---------- Écran de chargement : le logo rebondit, trois points tournent autour, une phrase change ---------- */
.chargement { min-height: calc(100vh / var(--z, 1)); padding: 24px; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; color: var(--doux); }
.charge-logo { position: relative; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 0 60px -10px rgba(16, 185, 129, .55), var(--verre-ombre); }
.chargement .charge-logo { width: 136px; height: 136px; }
.chargement .charge-phrase { font-size: 18px; }
.chargement .charge-barre { width: 230px; }
.charge-logo img { width: 74px; height: 74px; padding: 9px; border-radius: 20px; background: #fff; object-fit: contain; animation: charge-saute 1.5s cubic-bezier(.3, .6, .4, 1) infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.charge-logo i { position: absolute; inset: -9px; border-radius: 50%; animation: charge-tourne 2.6s linear infinite; }
.charge-logo i::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 14px 2px rgba(52, 211, 153, .8); }
.charge-logo i:nth-child(2) { inset: -20px; animation-duration: 3.8s; animation-direction: reverse; }
.charge-logo i:nth-child(2)::before { width: 8px; height: 8px; background: #2dd4bf; box-shadow: 0 0 12px 2px rgba(45, 212, 191, .8); }
.charge-logo i:nth-child(3) { inset: -31px; animation-duration: 5.2s; }
.charge-logo i:nth-child(3)::before { width: 6px; height: 6px; background: #38bdf8; box-shadow: 0 0 10px 2px rgba(56, 189, 248, .8); }
.charge-phrase { margin: 14px 0 0; min-height: 1.5em; font-size: 16px; font-weight: 600; color: var(--texte); transition: opacity .25s ease, transform .25s ease; }
.charge-phrase.change { opacity: 0; transform: translateY(6px); }
.charge-barre { width: 190px; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(128, 142, 137, .2); }
.charge-barre span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #34d399, #38bdf8, transparent); animation: charge-file 1.3s ease-in-out infinite; }
@keyframes charge-saute { 0%, 100% { transform: translateY(5px) scale(1.06, .94); } 45% { transform: translateY(-13px) scale(.96, 1.05) rotate(-6deg); } 70% { transform: translateY(-4px) rotate(4deg); } }
@keyframes charge-tourne { to { transform: rotate(360deg); } }
@keyframes charge-file { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .charge-logo img, .charge-logo i, .charge-barre span { animation: none; } }

/* ---------- Fluidité ----------
   Flouter ce qui se trouve derrière un panneau oblige le navigateur à tout recalculer à chaque image dès que le fond bouge :
   c'est ce qui ralentissait le site. Le fond est déjà doux, le flou n'apportait rien : on l'enlève partout où le fond vivant passe dessous.
   Une seule des deux couches du fond reste en mouvement. */
aside, [data-theme=dark] aside, #app.coque > aside, .connexion .carte.cx, .fm-barre { -webkit-backdrop-filter: none; backdrop-filter: none; }
#palette, [data-theme=dark] #palette, :root:not([data-theme=dark]) #palette { -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme=dark] #palette { background:
  radial-gradient(48% 42% at 50% 16%, rgba(16, 185, 129, .24), transparent 72%),
  radial-gradient(36% 38% at 16% 82%, rgba(56, 189, 248, .14), transparent 72%),
  rgba(3, 7, 10, .88); }
:root:not([data-theme=dark]) #palette { background:
  radial-gradient(48% 42% at 50% 16%, rgba(16, 185, 129, .20), transparent 72%),
  radial-gradient(36% 38% at 16% 82%, rgba(56, 189, 248, .14), transparent 72%),
  rgba(226, 236, 233, .9); }
.carte::after { display: none; }
body::after { animation: none; will-change: auto; inset: 0; }
body::before { inset: -18%; }
@keyframes fond-a { from { transform: translate3d(-4%, -3%, 0) scale(1.04); } to { transform: translate3d(5%, 4%, 0) scale(1.14); } }
[data-theme=dark] aside { background: rgba(8, 12, 15, .78); }
:root:not([data-theme=dark]) aside { background: rgba(255, 255, 255, .72); }
@media (max-width: 760px) {   /* sur téléphone la barre passe par-dessus la page : sans flou, elle doit être presque opaque */
  [data-theme=dark] aside { background: rgba(10, 15, 18, .96); }
  :root:not([data-theme=dark]) aside { background: rgba(255, 255, 255, .96); }
}

/* Chargement fluide : chaque élément animé a sa propre couche et ne bouge qu'en position ou en transparence,
   ce que la carte graphique fait seule, sans attendre le reste de la page. */
.charge-logo img { filter: none; will-change: transform; backface-visibility: hidden; }
.charge-logo i, .charge-barre span { will-change: transform; }
.charge-phrases { position: relative; width: min(560px, 90vw); height: 1.6em; margin: 14px 0 0; font-size: 18px; font-weight: 600; color: var(--texte); }
.charge-phrases span { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; animation: charge-mot 16s linear infinite; }
.charge-phrases span:nth-child(2) { animation-delay: 2s; }
.charge-phrases span:nth-child(3) { animation-delay: 4s; }
.charge-phrases span:nth-child(4) { animation-delay: 6s; }
.charge-phrases span:nth-child(5) { animation-delay: 8s; }
.charge-phrases span:nth-child(6) { animation-delay: 10s; }
.charge-phrases span:nth-child(7) { animation-delay: 12s; }
.charge-phrases span:nth-child(8) { animation-delay: 14s; }
@keyframes charge-mot { 0% { opacity: 0; transform: translateY(7px); } 1.8%, 10.7% { opacity: 1; transform: none; } 12.5%, 100% { opacity: 0; transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .charge-phrases span { animation: none; } .charge-phrases span:first-child { opacity: 1; } }

/* Le fond vivant ne se redessine plus que 5 fois par seconde au lieu de 60. Comme il bouge très lentement (moins d'un pixel
   par pas), l'œil ne voit pas la différence, mais l'ordinateur travaille douze fois moins : le reste du site reste fluide. */
body::before, [data-theme=dark] body::before { animation: fond-a 64s steps(320, end) infinite alternate; }