:root {
  /* Couleurs Webmaker : marine #051c23, turquoise #2fcfc4, cyan #01c8ce, vert d'eau #5be4cb */
  --fond: #f2f6f7;
  --surface: #ffffff;
  --surface-2: #f6fafa;
  --texte: #0b1f26;
  --texte-2: #536870;
  --texte-3: #91a3a9;
  --bordure: #e0e8ea;
  --marine: #051c23;
  --accent: #2fcfc4;
  --primaire: #0b8f88;
  --primaire-fonce: #08736e;
  --primaire-doux: #e1f6f4;
  --danger: #dc3545;
  --danger-doux: #fdeef0;
  --vert: #0f9d6b;
  --vert-doux: #e3f7ef;
  --orange: #d97706;
  --orange-doux: #fdf3e2;
  --violet: #8b5cf6;
  --violet-doux: #f2edff;
  --bleu: #2f7ae5;
  --bleu-doux: #e7f1fd;
  --jaune: #a16207;
  --jaune-doux: #fef9c3;
  --rayon: 14px;
  --rayon-sm: 9px;
  --ombre: 0 1px 2px rgba(22, 27, 46, .04), 0 4px 16px rgba(22, 27, 46, .04);
  --sidebar: 248px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primaire); text-decoration: none; }
a:hover { color: var(--primaire-fonce); }

h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 16px; }

.icone { width: 16px; height: 16px; flex-shrink: 0; }
.icone-xl { width: 40px; height: 40px; color: var(--texte-3); stroke-width: 1.5; }

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

.sidebar {
  /* Au-dessus du contenu, pour que la liste de la cloche ne passe pas dessous */
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 70;
  background: var(--marine); color: #c3d4d7;
  display: flex; flex-direction: column; gap: 28px; padding: 22px 16px;
}
.logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px; color: #fff; }
.logo:hover { color: #fff; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--marine); border: 1px solid rgba(47, 207, 196, .25); color: #fff;
  box-shadow: 0 6px 18px rgba(1, 200, 206, .18);
}
.logo-texte { display: flex; flex-direction: column; font-weight: 700; line-height: 1.2; }
.logo-texte small { font-weight: 500; font-size: .75rem; color: var(--accent); }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-lien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #9db2b7; font-weight: 500; transition: background .15s, color .15s; }
.nav-lien .icone { width: 18px; height: 18px; }
.nav-lien:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-lien.actif { background: rgba(47, 207, 196, .14); color: #fff; }
.nav-lien.actif .icone { color: var(--accent); }
.nav-groupe { display: flex; flex-direction: column; gap: 4px; }
.nav-groupe + .nav-groupe { margin-top: 16px; }
.nav-titre { padding: 0 12px 4px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5f787e; }
.barre-mobile { display: none; }

/* ---------- Cloche des relances ---------- */
.cloche { position: relative; }
.cloche summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #9db2b7; font-weight: 500; }
.cloche summary::-webkit-details-marker { display: none; }
.cloche summary:hover, .cloche[open] summary { background: rgba(255, 255, 255, .06); color: #fff; }
.cloche summary .icone { width: 18px; height: 18px; }
.cloche-icone { display: inline-flex; }
.cloche-zone-compte { display: contents; }
.cloche-active .icone { color: #fbbf24; }
.cloche-compte { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
.cloche-panneau {
  position: fixed; z-index: 60; top: 18px; left: calc(var(--sidebar) + 10px); width: 360px; max-height: calc(100vh - 36px);
  display: flex; flex-direction: column; background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: 0 12px 40px rgba(22, 27, 46, .18);
}
.cloche-entete { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--bordure); }
.cloche-liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cloche-ligne { display: flex; align-items: center; gap: 4px; border-radius: var(--rayon-sm); }
.cloche-ligne:hover { background: var(--surface-2); }
.cloche-ouvrir { flex: 1; min-width: 0; margin: 0; }
.cloche-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; font: inherit; text-align: left; color: var(--texte-2); cursor: pointer; }
.non-lue .cloche-item { color: var(--texte); }
.non-lue .cloche-texte strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--danger); vertical-align: middle; }
.cloche-ligne:not(.non-lue) .cloche-texte strong { font-weight: 500; }
.cloche-ligne form { margin: 0; }
.cloche-suppr { display: grid; place-items: center; width: 30px; height: 30px; margin-right: 4px; border: none; border-radius: 8px; background: none; color: var(--texte-3); cursor: pointer; }
.cloche-suppr:hover { background: var(--danger-doux); color: var(--danger); }
.cloche-suppr .icone { width: 15px; height: 15px; }
.cloche-entete form { margin: 0; }
.cloche-tout-lire { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .8rem; }
.cloche-texte { display: flex; flex-direction: column; min-width: 0; }
.cloche-texte strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloche-texte .secondaire { font-size: .8rem; }
.cloche-vide { margin: 0; padding: 22px 16px; color: var(--texte-2); text-align: center; }
.cloche-pied { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--bordure); color: var(--texte-2); font-size: .82rem; }
.cloche-pied .icone { width: 15px; height: 15px; }
.cloche-mobile summary { color: var(--texte-2); background: var(--surface); border: 1px solid var(--bordure); border-radius: 999px; padding: 9px 12px; }
.cloche-mobile[open] summary, .cloche-mobile summary:hover { background: var(--surface); color: var(--texte); }
.cloche-mobile .cloche-active .icone { color: var(--orange); }
.cloche-mobile .cloche-libelle { display: none; }
.nav-compte { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--jaune-doux); color: var(--jaune); font-size: .75rem; font-weight: 700; text-align: center; }

.contenu { flex: 1; margin-left: var(--sidebar); padding: 36px 40px 64px; max-width: calc(var(--sidebar) + 1180px); min-width: 0; }

.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sous-titre { margin: 4px 0 0; color: var(--texte-2); }

.retour { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-2); font-weight: 500; margin-bottom: 16px; }
.retour:hover { color: var(--texte); }

/* ---------- Cartes ---------- */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 22px; box-shadow: var(--ombre); }
.carte-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bordure); margin: -22px -22px 0; }
.carte:has(> .carte-barre) { padding-bottom: 0; }
.carte:has(> .carte-barre) .table-wrap { margin: 0 -22px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre); }
.stat > div { display: flex; flex-direction: column; min-width: 0; }
.stat-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.stat-icone .icone { width: 20px; height: 20px; }
.stat-valeur { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-libelle { color: var(--texte-2); font-size: .82rem; }
.stat-accent { background: linear-gradient(135deg, #0b8f88, #12b5b0); border-color: transparent; color: #fff; }
.stat-accent .stat-libelle { color: rgba(255, 255, 255, .85); }
.stat-accent .stat-icone { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.stat-bleu { background: var(--bleu-doux); color: var(--bleu); }
.stat-vert { background: var(--vert-doux); color: var(--vert); }
.stat-orange { background: var(--orange-doux); color: var(--orange); }
.stat-violet { background: var(--violet-doux); color: var(--violet); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--rayon-sm); border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); font: inherit; font-weight: 500; cursor: pointer; line-height: 1.2;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); border-color: #d5d8e3; color: var(--texte); }
.btn-primary { background: var(--primaire); border-color: var(--primaire); color: #fff; box-shadow: 0 2px 8px rgba(11, 143, 136, .28); }
.btn-primary:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); color: #fff; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-doux); border-color: #f5c2c8; color: var(--danger); }
.btn-lien { border-color: transparent; background: none; color: var(--texte-2); }
.btn-lien:hover { background: var(--surface-2); border-color: transparent; }
.btn-icone { padding: 9px; }
.btn-bloc { width: 100%; padding: 11px; }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions form, .fiche-actions form { margin: 0; }
.actions-droite { justify-content: flex-end; }

/* ---------- Formulaires ---------- */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  font: inherit; background: var(--surface); color: var(--texte); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(11, 143, 136, .16); }
textarea { resize: vertical; }

.form { display: flex; flex-direction: column; gap: 18px; }
.form-etroit { max-width: 760px; }
.field label { display: block; font-weight: 600; font-size: .83rem; margin-bottom: 6px; color: var(--texte); }
.hint { margin: 6px 0 0; font-size: .8rem; color: var(--texte-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-code { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.champ-etroit { max-width: 260px; }

.recherche { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px; color: var(--texte-3); }
.recherche input[type=search] { border: none; padding: 6px 0; box-shadow: none; }
.recherche input[type=search]:focus { box-shadow: none; }
.lien-discret { color: var(--texte-2); font-size: .85rem; white-space: nowrap; }
.form-inline { display: inline; margin-left: 8px; }
button.lien-discret { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; }
button.lien-discret:hover { color: var(--danger); }
.compteur { color: var(--texte-3); font-size: .83rem; white-space: nowrap; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.table th { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-3); background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: #f4fbfa; }

.table-cliquable tbody tr { position: relative; }
.lien-ligne { color: var(--texte); font-weight: 600; }
.lien-ligne::after { content: ""; position: absolute; inset: 0; }
.table-cliquable tbody tr:hover .lien-ligne { color: var(--primaire); }
.table-cliquable a:not(.lien-ligne) { position: relative; z-index: 1; }
.col-chevron { width: 40px; color: var(--texte-3); }
.table-cliquable tbody tr:hover .col-chevron { color: var(--primaire); }

.identite { display: flex; align-items: center; gap: 12px; }
.identite > div { display: flex; flex-direction: column; min-width: 0; }
.lien-nom { color: var(--texte); font-weight: 600; }
.secondaire { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-2); font-size: .82rem; }
.secondaire .icone { width: 13px; height: 13px; color: var(--texte-3); }
.vide { color: var(--texte-3); }

.contact { display: table-cell; }
.lien-contact { display: flex; align-items: center; gap: 6px; color: var(--texte-2); font-size: .86rem; white-space: nowrap; }
.lien-contact .icone { width: 14px; height: 14px; color: var(--texte-3); }
.lien-contact:hover { color: var(--primaire); }

.table td .pastille + .secondaire { display: block; margin-top: 3px; }

.table-num td:not(:first-child), .table-num th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-num tfoot th { background: var(--surface-2); color: var(--texte); font-size: .9rem; text-transform: none; letter-spacing: 0; border-top: 1px solid var(--bordure); border-bottom: none; font-weight: 700; }
.secondaire-num { color: var(--texte-2); }
.positif { color: var(--vert); font-weight: 600; }
.negatif { color: var(--orange); }

.saisie-euro { display: inline-flex; align-items: center; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: var(--surface); padding-right: 10px; transition: border-color .15s, box-shadow .15s; }
.saisie-euro:focus-within { border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(11, 143, 136, .16); }
.saisie-euro input { width: 110px !important; border: none !important; box-shadow: none !important; text-align: right; padding: 7px 6px 7px 10px !important; background: transparent !important; }
.saisie-euro span { color: var(--texte-3); }

.barre-enregistrer {
  position: sticky; bottom: 16px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 12px 12px 12px 20px; box-shadow: 0 8px 30px rgba(22, 27, 46, .1);
}

.taux { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure); color: var(--texte-2); font-size: .86rem; }
.taux strong { color: var(--texte); }
.taux:hover { border-color: var(--primaire); color: var(--texte-2); }
.taux .sep { width: 1px; height: 14px; background: var(--bordure); }

/* ---------- Pastilles, avatars, codes ---------- */
.avatar {
  --teinte: 240;
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 700; font-size: .82rem; letter-spacing: .02em;
  background: hsl(var(--teinte) 70% 94%); color: hsl(var(--teinte) 55% 38%);
}
.avatar-sm { width: 30px; height: 30px; border-radius: 9px; font-size: .72rem; }
.avatar-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 1.3rem; }

.code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #f1f2f7; color: #3b4160; border: 1px solid var(--bordure); }

.pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--primaire-doux); color: var(--primaire); }
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastille-vide { background: #f1f2f6; color: var(--texte-3); }

.nature-premier-contact-mail { --nature: var(--bleu); --nature-doux: var(--bleu-doux); }
.nature-relance-mail { --nature: var(--primaire); --nature-doux: var(--primaire-doux); }
.nature-appel-telephonique { --nature: var(--vert); --nature-doux: var(--vert-doux); }
.nature-rendez-vous { --nature: var(--violet); --nature-doux: var(--violet-doux); }
.nature-devis-envoye { --nature: var(--orange); --nature-doux: var(--orange-doux); }
.nature-autre { --nature: var(--texte-2); --nature-doux: #f1f2f6; }
.pastille[class*="nature-"] { background: var(--nature-doux); color: var(--nature); }

/* ---------- Fiche prospect ---------- */
.fiche-entete { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.fiche-titre { flex: 1; min-width: 240px; }
.fiche-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fiche-grille { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }

.details { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.details dt { display: flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 600; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; }
.details dt .icone { width: 14px; height: 14px; }
.details dd { margin: 4px 0 0 21px; word-break: break-word; }
.details dd p { margin: 0 0 4px; }
.cree-le { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--bordure); color: var(--texte-3); font-size: .82rem; }

.historique-entete { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 14px; }
.historique-entete h2 { margin: 0; }

.frise { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.frise::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--bordure); border-radius: 2px; }
.frise-item { position: relative; }
.frise-point { position: absolute; left: -26px; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--nature, var(--primaire)); }
.note { padding: 16px 18px; }
.note-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-date { font-weight: 600; font-size: .9rem; }
.note-date::first-letter { text-transform: uppercase; }
.note-entete form { margin-left: auto; }
.note-suppr { border: none; background: none; color: var(--texte-3); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.note:hover .note-suppr, .note-suppr:focus { opacity: 1; }
.note-suppr:hover { background: var(--danger-doux); color: var(--danger); }
.note-corps { margin-top: 8px; color: var(--texte-2); }
.note-corps p { margin: 0 0 4px; }

/* ---------- Divers ---------- */
.vide-etat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; text-align: center; color: var(--texte-2); }
.vide-etat p { margin: 0 0 8px; }
.vide-etat-compact { padding: 32px 20px; }

.flash { padding: 12px 16px; border-radius: var(--rayon-sm); margin: 0 0 20px; font-weight: 500; }
.flash ul { margin: 0; padding-left: 18px; }
.flash-notice { background: var(--vert-doux); color: #0b6e4b; border: 1px solid #bde9d6; }
.flash-alert { background: var(--danger-doux); color: #a61e2d; border: 1px solid #f5c2c8; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .fiche-grille { grid-template-columns: 1fr; }
}



.carte-table { padding: 0; overflow: hidden; }



/* ---------- Contrat ---------- */
.pastille-signe { background: var(--vert-doux); color: var(--vert); }
.pastille-encours { background: #f1f2f6; color: var(--texte-2); }
.pastille-termine { background: var(--orange-doux); color: var(--orange); }

.onglets { display: flex; gap: 6px; margin-bottom: 14px; }
.onglet { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: var(--texte-2); font-weight: 500; }
.onglet:hover { background: var(--surface); color: var(--texte); }
.onglet.actif { background: var(--texte); color: #fff; }
.onglet-compte { font-size: .75rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(22, 27, 46, .07); }
.onglet.actif .onglet-compte { background: rgba(255, 255, 255, .2); }

.colonne { display: flex; flex-direction: column; gap: 20px; }

.bloc-contrat { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); scroll-margin-top: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-3[hidden] { display: none; }
.fin-calculee { margin: 0; padding: 10px 12px; border-radius: var(--rayon-sm); background: var(--vert-doux); color: var(--vert); font-weight: 600; }

.interrupteur { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur > span:last-child { display: flex; flex-direction: column; }
.interrupteur .hint { margin: 0; }
.interrupteur-piste { width: 40px; height: 22px; border-radius: 999px; background: #d3d6e0; position: relative; flex-shrink: 0; transition: background .15s; }
.interrupteur-piste::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, .2); transition: transform .15s; }
.interrupteur input:checked + .interrupteur-piste { background: var(--vert); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(18px); }
.interrupteur input:focus-visible + .interrupteur-piste { box-shadow: 0 0 0 3px rgba(15, 157, 107, .25); }

.carte-contrat { border-color: #bde9d6; background: linear-gradient(180deg, #f3fcf8, var(--surface) 70%); }
.carte-contrat.termine { border-color: #f3dcb5; background: linear-gradient(180deg, #fffaf0, var(--surface) 70%); }
.contrat-titre { display: flex; align-items: center; justify-content: space-between; }
.contrat-titre h2 { display: flex; align-items: center; gap: 8px; color: var(--vert); }
.carte-contrat.termine .contrat-titre h2 { color: var(--orange); }
.contrat-dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contrat-dates div { display: flex; flex-direction: column; }
.contrat-dates span { font-size: .74rem; font-weight: 600; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; }
.contrat-dates strong { font-variant-numeric: tabular-nums; }
.progression { height: 6px; border-radius: 999px; background: #e4ece8; margin: 18px 0 10px; overflow: hidden; }
.progression span { display: block; height: 100%; border-radius: inherit; background: var(--vert); }
.carte-contrat.termine .progression span { background: var(--orange); }
.contrat-reste { margin: 0; color: var(--texte-2); font-size: .86rem; }

.carte-signer { display: flex; align-items: center; gap: 14px; color: var(--texte); border-style: dashed; box-shadow: none; transition: border-color .15s, background .15s; }
.carte-signer > span:last-child { display: flex; flex-direction: column; }
.carte-signer:hover { border-color: var(--vert); background: #f6fdfa; color: var(--texte); }

.identite .pastille { margin-left: 4px; }
.ligne-signee { background: #fbfefc; }
.table-num tfoot .ligne-dont th { font-weight: 500; color: var(--texte-2); background: var(--surface); border-top: 1px solid var(--bordure); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.saisie-pourcent input { width: 70px !important; }
.champ-moyen { max-width: 480px; }

.table-num th, .table-num td { padding-left: 12px; padding-right: 12px; }
.table-num th:first-child, .table-num td:first-child { padding-left: 18px; min-width: 210px; }
.table-num th:last-child, .table-num td:last-child { padding-right: 18px; }
.table-num .saisie-euro input { width: 80px !important; }
.table-num .saisie-pourcent input { width: 48px !important; }
.table-num .identite .pastille { margin: 3px 0 0; align-self: flex-start; }
.table-num .saisie-pourcent input { width: 58px !important; }
.sous-montant { display: block; margin-top: 4px; font-size: .74rem; color: var(--texte-3); }
.table-num th { font-size: .7rem; }
.sous-montant[hidden] { display: none; }

.stats-5 { grid-template-columns: repeat(5, 1fr); }
.stats-5 .stat { padding: 16px; gap: 12px; }
@media (max-width: 1350px) { .stats-5 { grid-template-columns: repeat(3, 1fr); } }


.pastille-refus { background: var(--danger-doux); color: var(--danger); }
.btn-refus:hover { background: var(--danger-doux); border-color: #f5c2c8; color: var(--danger); }
.ligne-eteinte td { opacity: .55; }
.ligne-eteinte:hover td { opacity: 1; }
.interrupteur-refus input:checked + .interrupteur-piste { background: var(--danger); }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin: 0 -22px; border-top: 1px solid var(--bordure); }
.pages { display: flex; gap: 4px; }
.page { min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rayon-sm); color: var(--texte-2); font-weight: 500; font-variant-numeric: tabular-nums; }
a.page:hover { background: var(--surface-2); color: var(--texte); }
.page.actif { background: var(--primaire); color: #fff; }
.page.desactive { color: var(--bordure); }
.page.ellipse { min-width: 20px; padding: 0; color: var(--texte-3); }

/* ---------- Relances ---------- */
.pastille-relance { background: var(--bleu-doux); color: var(--bleu); }
.pastille-due { background: var(--orange-doux); color: var(--orange); }
.echeance { font-weight: 600; }
.echeance.aujourdhui { color: var(--orange); }
.echeance.en-retard { color: var(--danger); }
.btn-relance:hover { background: var(--bleu-doux); border-color: #bcd5f6; color: var(--bleu); }
.interrupteur-relance input:checked + .interrupteur-piste { background: var(--bleu); }
.field[hidden] { display: none; }

.bandeau-relance {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 14px 16px; border-radius: var(--rayon); background: var(--bleu-doux); border: 1px solid #bcd5f6;
}
.bandeau-relance.due { background: var(--orange-doux); border-color: #f3dcb5; }
.bandeau-icone { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--bleu); flex-shrink: 0; }
.bandeau-relance.due .bandeau-icone { color: var(--orange); }
.bandeau-texte { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.bandeau-texte .secondaire::first-letter { text-transform: uppercase; }
.bandeau-form { display: flex; gap: 8px; margin: 0; }
.bandeau-form input { width: 160px; padding: 8px 10px; }
.bandeau-relance > form { margin: 0; }
.pastille-acontacter { background: var(--violet-doux); color: var(--violet); }

/* ---------- À vérifier ---------- */
.pastille-averifier { background: var(--jaune-doux); color: var(--jaune); }
.table tbody tr.ligne-averifier { background: var(--jaune-doux); }
.table tbody tr.ligne-averifier:hover { background: #fdf3a8; }
.bandeau-averifier { background: var(--jaune-doux); border-color: #f5e08a; }
.bandeau-averifier .bandeau-icone { color: var(--jaune); }

.code-mobile { display: none; }

/* ---------- Tablette : barre latérale réduite aux icônes ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --sidebar: 76px; }
  .sidebar { padding: 18px 12px; align-items: center; }
  .logo { padding: 0; }
  .logo-texte, .nav-lien span:not(.nav-compte), .sidebar .btn-bloc span { display: none; }
  .nav-lien { position: relative; }
  .nav-compte { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 5px; font-size: .68rem; }
  .nav { width: 100%; align-items: center; }
  .nav-titre { display: none; }
  .nav-groupe { width: 100%; align-items: center; }
  .cloche-libelle { display: none; }
  .cloche-menu summary { justify-content: center; padding: 12px; }
  .cloche-menu .cloche-compte { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 5px; font-size: .68rem; }
  .nav-groupe + .nav-groupe { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .nav-lien { justify-content: center; padding: 12px; }
  .nav-lien .icone { width: 20px; height: 20px; }
  .sidebar .btn-bloc { width: 46px; height: 46px; padding: 0; }
  .sidebar .btn-bloc .icone { width: 20px; height: 20px; }
  .contenu { padding: 28px 24px 56px; }
  .onglets { overflow-x: auto; scrollbar-width: none; }
  .onglet { flex-shrink: 0; white-space: nowrap; }
  .stats-5 { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================================
   Mobile
   ===================================================================== */
@media (max-width: 760px) {
  body { font-size: 15px; }
  h1 { font-size: 1.4rem; }

  /* Champs à 16px : évite le zoom automatique d'iOS au focus */
  input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=number], input[type=date], select, textarea { font-size: 16px; }

  /* Navigation : barre fixe en bas de l'écran */
  .app { display: block; }
  .sidebar {
    position: fixed; inset: auto 0 0 0; width: auto; z-index: 50;
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .logo { display: none; }
  .nav { flex-direction: row; gap: 0; flex: 3; }
  /* Une seule activité dans la barre du bas, le choix se fait en haut de page */
  .nav-groupe { display: contents; }
  .nav-groupe:not(.courant), .nav-titre { display: none; }
  .cloche-menu { display: none; }
  .barre-mobile { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; }
  .barre-mobile .cloche-panneau { top: 70px; left: 16px; right: 16px; width: auto; max-height: calc(100vh - 170px); }
  .cloche-mobile .cloche-compte { margin-left: 2px; }
  .bascule-activite { flex: 1; display: flex; gap: 4px; padding: 4px; margin: 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure); }
  .bascule-activite a { flex: 1; text-align: center; padding: 8px 10px; border-radius: 999px; color: var(--texte-2); font-weight: 600; font-size: .9rem; }
  .bascule-activite a.actif { background: var(--texte); color: #fff; }
  .nav-lien, .sidebar .btn-bloc {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    padding: 7px 4px; font-size: .7rem; font-weight: 500; border-radius: 10px; text-align: center;
  }
  .nav-lien .icone, .sidebar .btn-bloc .icone { width: 20px; height: 20px; }
  .nav-lien.actif { background: none; color: #fff; }
  .nav-lien.actif .icone { color: var(--accent); }
  .sidebar .btn-bloc { width: auto; display: flex; background: none; border: none; box-shadow: none; color: #9db2b7; }
  .sidebar .btn-bloc .icone { background: var(--primaire); color: #fff; border-radius: 8px; padding: 3px; width: 26px; height: 26px; margin-top: -3px; }
  .sidebar .btn-bloc span { white-space: nowrap; }
  .sidebar .btn-bloc span::after { content: ""; }

  .contenu { margin-left: 0; padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .entete { margin-bottom: 16px; align-items: flex-start; }

  /* Chiffres clés : bandeau défilant horizontalement */
  .stats, .stats-5 {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin: 0 -16px 18px; padding: 2px 16px 6px; scrollbar-width: none;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat, .stats-5 .stat { flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; padding: 12px 14px; gap: 10px; }
  .stat-icone { width: 34px; height: 34px; border-radius: 10px; }
  .stat-icone .icone { width: 17px; height: 17px; }
  .stat-valeur { font-size: 1.1rem; }
  .stat-libelle { font-size: .76rem; white-space: nowrap; }

  /* Onglets : défilement horizontal */
  .onglets { overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglet { flex-shrink: 0; white-space: nowrap; padding: 7px 12px; }

  .carte { padding: 18px 16px; border-radius: 12px; }
  .carte-barre { margin: -18px -16px 0; padding: 10px 14px; }
  .carte:has(> .carte-barre) .table-wrap, .pagination { margin: 0 -16px; }
  .recherche { max-width: none; }
  .compteur { font-size: .76rem; }

  .pagination { padding: 12px 16px; }
  .page { min-width: 38px; height: 38px; }

  /* Fiche prospect */
  .retour { margin-bottom: 12px; }
  .fiche-entete { gap: 14px; align-items: flex-start; }
  .fiche-entete .avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 15px; }
  .fiche-titre { min-width: 0; flex: 1; }
  .fiche-titre h1 { font-size: 1.3rem; }
  .fiche-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .fiche-actions .btn, .fiche-actions form, .fiche-actions form .btn { width: 100%; }
  .fiche-actions form:has(.btn-icone) { grid-column: auto; }

  .bandeau-relance { gap: 12px; }
  .bandeau-form { width: 100%; }
  .bandeau-form input { flex: 1; width: auto; }
  .bandeau-relance > form:last-child, .bandeau-relance > form:last-child .btn { width: 100%; }

  .contrat-dates { gap: 6px; }
  .contrat-dates strong { font-size: .9rem; }

  .note-entete { gap: 6px 10px; }
  .note-date { flex-basis: 100%; order: 3; }
  .note-suppr { opacity: 1; }
  .frise { padding-left: 22px; }
  .frise-point { left: -22px; }

  .grid-2:not(.champ-moyen), .grid-3 { grid-template-columns: 1fr; }
  .grid-code { grid-template-columns: 110px 1fr; }
  .form-etroit .actions-droite { flex-direction: column-reverse; align-items: stretch; }
  .form-etroit .actions-droite .btn { width: 100%; padding: 12px; }
  .actions-droite .btn-primary { width: 100%; padding: 12px; }

  .taux { font-size: .8rem; padding: 7px 12px; }
  .barre-enregistrer {
    position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0; z-index: 40;
    padding: 10px; border-radius: 14px;
  }
  .barre-enregistrer .secondaire { display: none; }
  .barre-enregistrer .btn { width: 100%; padding: 12px; }
  form[data-controller="estimation"] { padding-bottom: 70px; }

  .flash { font-size: .9rem; }
}

/* Tablette et mobile : tableaux présentés en cartes */
@media (max-width: 1000px) {
  /* Liste des prospects : une carte par ligne */
  .table-cliquable, .table-cliquable tbody, .table-cliquable tr, .table-cliquable td { display: block; }
  .table-cliquable thead { display: none; }
  .table-cliquable tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
    grid-template-areas: "prospect prospect" "statut action" "contact contact";
    padding: 14px 16px; border-bottom: 1px solid var(--bordure);
  }
  .table-cliquable tbody tr:last-child { border-bottom: none; }
  .table-cliquable td { padding: 0; border: none; min-width: 0; }
  .table-cliquable .col-prospect { grid-area: prospect; }
  .table-cliquable .col-statut { grid-area: statut; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .table-cliquable .col-action { grid-area: action; text-align: right; }
  .table-cliquable .col-contact { grid-area: contact; display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .table-cliquable .col-contact:has(> .vide:only-child) { display: none; }
  .table-cliquable .col-code, .table-cliquable .col-chevron { display: none; }
  .table-cliquable td .pastille + .secondaire { display: inline-flex; margin-top: 0; }
  .table-cliquable .col-action .secondaire { display: block; margin-top: 2px; }
  .identite > div { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .identite .lien-ligne { flex-basis: 100%; }
  .code-mobile { display: inline-block; font-size: .7rem; padding: 1px 6px; }
  .lien-contact { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ligne-eteinte td { opacity: .6; }

  /* Estimation : une carte par prospect */
  .carte-table { background: none; border: none; box-shadow: none; overflow: visible; }
  .table-num, .table-num tbody, .table-num tfoot, .table-num tr, .table-num td, .table-num th { display: block; }
  .table-num thead { display: none; }
  .table-num tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
    background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px;
    padding: 14px; margin-bottom: 10px; box-shadow: var(--ombre);
  }
  .table-num td, .table-num th, .table-num tfoot th { padding: 0 !important; border: none !important; text-align: left !important; background: none !important; white-space: normal; min-width: 0 !important; }
  .table-num .col-prospect { grid-column: 1 / -1; font-size: 1rem; }
  .table-num [data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-3);
  }
  .table-num [data-col="restant"] { grid-column: 1 / -1; padding-top: 10px !important; border-top: 1px solid var(--bordure) !important; font-size: 1.05rem; }
  .table-num .saisie-euro { display: flex; }
  .table-num .saisie-euro input, .table-num .saisie-pourcent input { width: 100% !important; flex: 1; }
  .table-num tfoot tr { background: var(--surface-2); }
  .table-num tfoot tr:last-child { border-color: var(--primaire); }
  .ligne-signee { border-color: #bde9d6 !important; }

}

@media (min-width: 761px) and (max-width: 1000px) {
  .table-num tr { grid-template-columns: repeat(4, 1fr); }
  .table-num [data-col="restant"] { grid-column: auto; padding-top: 0 !important; border-top: none !important; }
  .table-cliquable tbody tr { grid-template-columns: 1fr auto auto; grid-template-areas: "prospect statut action" "contact contact contact"; align-items: center; }
}

/* ---------- Sauvegarde ---------- */
.carte-sauvegarde { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; }
.sauvegarde-entete { display: flex; gap: 14px; align-items: flex-start; }
.sauvegarde-entete h2 { margin: 0 0 2px; }
.sauvegarde-entete .secondaire { display: block; margin: 0; }
.sauvegarde-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--bordure); }
.sauvegarde-pied form { margin: 0; }
.sauvegarde-date { margin: 0; }
.sauvegarde-date .secondaire { display: inline; }
.restauration { font-size: .86rem; color: var(--texte-2); }
.restauration summary { cursor: pointer; font-weight: 500; }
.restauration ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.restauration code { font-size: .8rem; background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 4px; padding: 1px 5px; }
@media (max-width: 760px) {
  .sauvegarde-pied form, .sauvegarde-pied .btn { width: 100%; }
}

.contrat-champs { display: flex; flex-direction: column; gap: 16px; }
.contrat-champs[hidden] { display: none; }
.valeur-contrat { font-weight: 600; font-variant-numeric: tabular-nums; }
.lien-contrat { display: block; font-size: .72rem; color: var(--texte-3); }
.lien-contrat:hover { color: var(--primaire); }
.contrat-montant { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #d7efe3; }

/* ---------- Coûts ---------- */
.stats-couts { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.form-cout-champs { display: grid; grid-template-columns: 1fr 150px 140px auto; gap: 12px; align-items: end; }
.form-cout-bouton .btn { height: 42px; }
.form-cout .flash { margin-bottom: 14px; }
.liste-couts { margin-top: 20px; }
.carte.carte-table.liste-couts { padding: 0; }
.col-actions-cout { width: 1%; white-space: nowrap; }
.col-actions-cout form { display: inline-block; margin: 0; }
.col-actions-cout .btn { padding: 7px; }
.table-couts td:first-child, .table-couts th:first-child { min-width: 0; }

@media (max-width: 760px) {
  .form-cout-champs { grid-template-columns: 1fr 1fr; }
  .form-cout-champs .field:first-child, .form-cout-bouton { grid-column: 1 / -1; }
  .form-cout-bouton .btn { width: 100%; }
  .stats-couts { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 18px; padding: 0; }
  .stats-couts .stat { min-width: 0; }
}

/* ---------- Gain réel (estimation) ---------- */
.encart-gain { margin-bottom: 20px; }
.encart-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.encart-entete h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.encart-entete h2 .icone { color: var(--vert); }
.gain-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gain-grille-seule { grid-template-columns: minmax(0, 420px); }
.gain-colonne { border: 1px solid var(--bordure); border-radius: var(--rayon-sm); padding: 16px; background: var(--surface-2); }
.gain-colonne:first-child { background: #f3fcf8; border-color: #bde9d6; }
.gain-colonne h3 { margin: 0 0 12px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-3); }
.gain-colonne dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gain-colonne dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gain-colonne dt { color: var(--texte-2); font-size: .88rem; }
.gain-colonne dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gain-colonne .gain-resultat { padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--bordure); }
.gain-colonne .gain-resultat dt { color: var(--texte); font-weight: 600; }
.gain-colonne .gain-resultat dd { font-size: 1.3rem; font-weight: 700; }
.perte { color: var(--danger) !important; }
.encart-gain .hint { margin-top: 12px; }

@media (max-width: 760px) {
  .gain-grille { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 1000px) {
  .table-couts tbody .col-prospect { grid-column: 1; grid-row: 1; align-self: center; }
  .table-couts .col-actions-cout { width: auto; grid-column: 2; grid-row: 1; display: flex !important; gap: 4px; justify-content: flex-end; }
  .table-couts tfoot th:empty { display: none; }
}

/* ---------- Catégories ---------- */
.tag-categorie {
  --teinte: 220;
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: hsl(var(--teinte) 75% 95%); color: hsl(var(--teinte) 55% 35%); border: 1px solid hsl(var(--teinte) 60% 87%);
}
.identite-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }
.identite-meta:not(:has(*)) { display: none; }

/* ---------- Premier mail ---------- */
.carte-mail { margin-bottom: 20px; }
.mail-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mail-entete h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.mail-entete form { margin: 0; }
.mail-champs { border: 1px solid var(--bordure); border-radius: var(--rayon-sm); overflow: hidden; }
.mail-ligne { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; padding: 4px 12px; border-bottom: 1px solid var(--bordure); }
.mail-ligne:last-child { border-bottom: none; }
.mail-ligne > span, .mail-ligne label { color: var(--texte-2); font-size: .83rem; font-weight: 600; margin: 0; }
.mail-ligne strong { font-weight: 500; padding: 6px 0; }
.mail-ligne input { border: none; padding: 6px 0; box-shadow: none !important; }
.mail-signature { padding: 0 2px; color: var(--texte-2); border-left: 3px solid var(--bordure); padding-left: 12px; }
.piece-jointe { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: var(--surface-2); width: fit-content; max-width: 100%; }
.piece-jointe a { font-weight: 500; overflow-wrap: anywhere; }

/* Éditeur Trix */
trix-toolbar .trix-button-group--file-tools { display: none; }
trix-toolbar .trix-button-group { border-color: var(--bordure); border-radius: var(--rayon-sm); margin-bottom: 8px; }
trix-editor.editeur { min-height: 260px; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: var(--surface); line-height: 1.55; }
trix-editor.editeur:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(11, 143, 136, .16); }
.trix-content a { color: var(--primaire); }

/* Import CSV */
.import { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 18px; }
.import-texte { display: flex; flex-direction: column; flex: 1; min-width: 220px; }
.import .depot { flex: 1; min-width: 240px; max-width: 360px; }

/* Zone de dépôt de fichier */
.depot {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px dashed #c5d4d8; border-radius: var(--rayon-sm); background: var(--surface-2);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.depot input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot:hover, .depot.survol, .depot:focus-within { border-color: var(--primaire); background: var(--primaire-doux); }
.depot:focus-within { box-shadow: 0 0 0 3px rgba(11, 143, 136, .16); }
.depot-icone { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--surface); color: var(--primaire); box-shadow: var(--ombre); }
.depot-icone .icone { width: 18px; height: 18px; }
.depot-texte { display: flex; flex-direction: column; min-width: 0; }
.depot-texte strong { font-weight: 600; font-size: .9rem; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-texte .secondaire { font-size: .78rem; }
.depot.rempli { border-style: solid; border-color: var(--primaire); background: var(--primaire-doux); }
.depot.rempli .depot-icone { background: var(--primaire); color: #fff; }

/* Modèles de mail */
.liste-modeles { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.modele-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modele-entete h2 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.modele-entete .secondaire { margin: 0; }
.modele-extrait { margin: 12px 0 0; color: var(--texte-2); font-size: .88rem; }
.espace { flex: 1; }

@media (max-width: 720px) {
  .mail-entete { flex-direction: column; }
  .mail-ligne { grid-template-columns: 56px 1fr; }
  .import .depot { max-width: none; width: 100%; }
  .import .btn { width: 100%; }
}

/* ---------- Activités ---------- */
.h1-activite { margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--primaire-doux); color: var(--primaire); font-size: .8rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.titre-section { margin: 26px 0 0; font-size: 1rem; color: var(--texte-2); }
.choix-activite { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choix { display: flex; align-items: center; gap: 14px; color: var(--texte); transition: border-color .15s, box-shadow .15s; }
.choix:hover { border-color: var(--primaire); color: var(--texte); box-shadow: 0 0 0 3px rgba(11, 143, 136, .12); }
.choix > .icone { color: var(--texte-3); flex-shrink: 0; }
.choix-texte { display: flex; flex-direction: column; gap: 4px; flex: 1; }
@media (max-width: 760px) { .choix-activite { grid-template-columns: 1fr; } }

/* ---------- Connexion ---------- */
.page-connexion {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 15% 10%, rgba(47, 207, 196, .22), transparent 45%),
              radial-gradient(circle at 85% 90%, rgba(1, 200, 206, .16), transparent 45%), var(--marine);
}
.connexion { width: 100%; max-width: 400px; }
.connexion-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; color: #fff; }
.connexion-logo .logo-mark { width: 52px; height: 52px; border-radius: 15px; }
.connexion-logo .logo-svg { width: 34px; height: 34px; }
.connexion-logo .logo-texte { font-size: 1.35rem; }
.connexion-logo .logo-texte small { color: var(--accent); letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.carte-connexion { padding: 32px 28px; gap: 20px; border-radius: 18px; box-shadow: 0 1px 2px rgba(22, 27, 46, .04), 0 18px 48px rgba(22, 27, 46, .1); }
.connexion-titre h1 { margin: 0 0 4px; font-size: 1.45rem; }
.connexion-titre p { margin: 0; }
.champ-icone { position: relative; display: flex; align-items: center; }
.champ-icone > .icone { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--texte-3); pointer-events: none; transition: color .15s; }
.champ-icone:focus-within > .icone { color: var(--primaire); }
.champ-icone input { padding: 12px 14px 12px 40px; background: var(--surface-2); }
.champ-icone input:focus { background: var(--surface); }
.champ-icone input::placeholder { color: var(--texte-3); }
.champ-icone:has(.champ-action) input { padding-right: 46px; }
.champ-action { position: absolute; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 8px; background: none; color: var(--texte-3); cursor: pointer; }
.champ-action:hover { background: var(--primaire-doux); color: var(--primaire); }
.champ-action .icone { width: 18px; height: 18px; }
.champ-action span { display: grid; }
.champ-action span[hidden] { display: none; }
.case-connexion { display: flex; align-items: center; gap: 10px; color: var(--texte-2); font-size: .9rem; cursor: pointer; }
.case-connexion input { width: 17px; height: 17px; margin: 0; accent-color: var(--primaire); cursor: pointer; }
.btn-connexion { padding: 13px; font-size: 1rem; font-weight: 600; }
.btn-connexion .icone { width: 18px; height: 18px; transition: transform .15s; }
.btn-connexion:hover .icone { transform: translateX(3px); }
.sidebar form:has(.deconnexion) { margin: -16px 0 0; }
.deconnexion { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px; border: none; background: none; color: #7f979d; font: inherit; font-size: .83rem; cursor: pointer; border-radius: 10px; }
.deconnexion:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.deconnexion .icone { width: 15px; height: 15px; }
@media (min-width: 761px) and (max-width: 1100px) { .deconnexion span { display: none; } }
@media (max-width: 760px) { .sidebar form:has(.deconnexion) { display: none; } }