/* ============================================================
Kadans · la feuille de style de l'application
Un système sobre : Inter, fond nuit, cartes à coins doux, une seule
couleur d'accent, des chiffres tabulaires. Tout le reste s'efface
devant la donnée.
============================================================ */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
src: url("/static/polices/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
src: url("/static/polices/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 800; font-display: swap;
src: url("/static/polices/Inter-ExtraBold.ttf") format("truetype"); }
:root {
--paper: #0B0D12;
--surface: #12151C;
--surface-2: #181C25;
--surface-3: #1F242F;
--ink: #EEF1F6;
--soft: #9AA3B4;
--faint: #66707F;
--hair: rgba(255,255,255,.07);
--cadre: rgba(255,255,255,.09);
--cadre-vif: rgba(255,255,255,.16);
--line: rgba(255,255,255,.12);
--accent: #3B82F6;
--accent-2: #60A5FA;
--accent-bg: rgba(59,130,246,.12);
--on-accent: #FFFFFF;
--vert: #34D399;
--vert-bg: rgba(52,211,153,.12);
--rouge: #F87171;
--rouge-bg: rgba(248,113,113,.12);
--ambre: #FBBF24;
--ambre-bg: rgba(251,191,36,.12);
--bleu: #818CF8;
--violet: #C084FC;
/* alias des anciens noms encore lus par quelques gabarits */
--ligne: var(--cadre); --fond: var(--surface); --fond-2: var(--surface-2);
--bord: var(--cadre); --carte: var(--surface);
--f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--f-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
--rayon: 12px; --rayon-s: 8px; --rayon-xs: 6px;
--ombre: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.5);
--ombre-haute: 0 12px 40px -8px rgba(0,0,0,.6);
--rail: 236px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--paper); color: var(--ink);
font: 14px/1.5 var(--f-sans); -webkit-font-smoothing: antialiased;
font-feature-settings: "cv11", "ss01"; padding-left: var(--rail);
background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 26px 26px; background-attachment: fixed;
}
a { color: inherit; }
::selection { background: rgba(59,130,246,.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
strong { font-weight: 600; }
h1 { font-size: 22px; margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
h2 {
font-family: var(--f-mono); font-size: 11px; font-weight: 600; margin: 28px 0 10px;
text-transform: uppercase; letter-spacing: .12em; color: var(--soft);
}
h2::before { content: "▸ "; color: var(--accent); font-size: 9px; vertical-align: 1px; }
h2 .compte { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; letter-spacing: -.01em; }
.carte h3 { margin: 18px 0 6px; font-size: 13px; color: var(--ink); }
p { margin: 8px 0; }
.quoi { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.aide { color: var(--faint); font-size: 12.5px; margin: 6px 0 0; line-height: 1.5; }
.aide a { color: var(--soft); }
.aide a:hover { color: var(--ink); }
.vide { color: var(--faint); font-size: 13px; padding: 12px 2px; }
/* ---------- En-tête ---------- */
header {
background: rgba(11,13,18,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--hair); position: sticky; top: 0; z-index: 20;
}
.barre { display: flex; align-items: center; gap: 14px; padding: 12px 28px; flex-wrap: wrap; }
header .barre { min-height: 58px; }
.marque {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 16px; letter-spacing: -.02em;
text-decoration: none; white-space: nowrap; color: var(--ink);
}
.marque .logo { width: 22px; height: 22px; flex: none; display: block; }
.marque .logo .palier { fill: var(--soft); animation: palier 3.4s steps(1) infinite; }
.marque .logo .palier-d { animation-delay: .22s; }
.marque .logo .montee { fill: var(--accent); animation: montee 2.2s ease-in-out infinite; }
.marque:hover .logo .montee { animation-duration: .6s; }
@keyframes palier {
0%, 88% { opacity: 1; }
90%, 92% { opacity: .1; }
94% { opacity: 1; }
96% { opacity: .25; }
98%, 100% { opacity: 1; }
}
@keyframes montee {
0%, 100% { filter: drop-shadow(0 0 6px rgba(59,130,246,.85)); }
50% { filter: drop-shadow(0 0 0 rgba(59,130,246,0)); }
}
@keyframes curseur { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.marque .suffixe {
font-size: 13px; font-weight: 400; color: var(--faint); text-transform: capitalize;
border-left: 1px solid var(--cadre-vif); padding-left: 12px; margin-left: 4px;
}
.curseur {
display: inline-block; width: 7px; height: 15px; background: var(--accent);
margin-left: 4px; vertical-align: -2px; animation: curseur 1.05s steps(1) infinite;
}
@keyframes pouls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Ancienne navigation horizontale (encore lue par quelques pages) */
nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav a { font-size: 13px; padding: 6px 10px; text-decoration: none; color: var(--soft);
border-radius: var(--rayon-s); }
nav a:hover { color: var(--ink); background: var(--surface-2); }
nav a.actif { background: var(--accent-bg); color: var(--accent-2); font-weight: 600; }
/* Le badge de la personne connectée */
header .qui {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--ink);
border: 1px solid var(--cadre); padding: 6px 12px; background: var(--surface);
border-radius: 999px; cursor: default;
}
header .qui::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vert);
box-shadow: 0 0 0 3px var(--vert-bg);
}
.role { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; color: var(--faint); text-transform: uppercase;
letter-spacing: .08em; }
/* Filtres en pastilles */
.sources { display: flex; gap: 6px; padding: 0 28px 12px; flex-wrap: wrap; align-items: center; }
.sources a {
text-decoration: none; font-size: 12.5px; font-weight: 500; padding: 6px 12px;
border: 1px solid var(--cadre); background: var(--surface); color: var(--soft);
border-radius: 999px; line-height: 1.2;
transition: color .14s, border-color .14s, background .14s;
}
.sources a:hover { color: var(--ink); border-color: var(--cadre-vif); background: var(--surface-2); }
.sources a.actif { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; }
.sources a.ia.actif { border-color: transparent; background: rgba(129,140,248,.18); color: var(--bleu); }
.sources a.manuel.actif { border-color: transparent; background: var(--accent-bg); color: var(--accent-2); }
/* ---------- Le parcours, en tête de la liste des leads ---------- */
.parcours {
display: flex; gap: 8px; margin: 0 0 14px; align-items: stretch;
overflow-x: auto; padding-bottom: 2px;
}
.pas {
flex: 1 1 0; min-width: 112px; text-decoration: none;
display: flex; flex-direction: column; gap: 4px;
padding: 12px 14px 11px; background: var(--surface);
border: 1px solid var(--cadre); border-radius: var(--rayon-s); position: relative;
transition: border-color .14s, background .14s, opacity .14s;
}
.pas-n { font-size: 22px; font-weight: 600; line-height: 1; color: var(--ink);
letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pas-quoi { font-size: 11px; font-weight: 500; color: var(--soft); line-height: 1.3;
text-transform: uppercase; letter-spacing: .05em; }
.pas-jauge { display: block; height: 3px; background: var(--surface-3); margin-top: 6px; border-radius: 3px; overflow: hidden; }
.pas-jauge i { display: block; height: 100%; background: var(--accent); transition: width .3s; border-radius: 3px; }
.pas.f-gagnee .pas-jauge i { background: var(--vert); }
.pas:hover { border-color: var(--cadre-vif); background: var(--surface-2); }
.pas.actif { border-color: var(--accent); background: var(--accent-bg); }
.pas.actif .pas-quoi { color: var(--ink); }
.pas.f-gagnee.actif { border-color: var(--vert); background: var(--vert-bg); }
.pas.creux { opacity: .45; }
.pas.creux:hover { opacity: 1; }
.sous-filtres { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; margin: 0 0 18px; }
.sous-filtres .groupe { display: flex; flex-direction: column; gap: 6px; }
.sous-filtres .jetons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sous-filtres .axe { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.jeton {
display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
font-size: 12.5px; font-weight: 500; padding: 5px 11px;
border: 1px solid var(--cadre); background: var(--surface); color: var(--soft);
border-radius: 999px; line-height: 1.3; cursor: pointer;
transition: color .14s, border-color .14s, background .14s, opacity .14s;
}
.jeton .n { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.jeton i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.jeton.s-actif i { background: var(--vert); }
.jeton.s-nurture i { background: var(--ambre); }
.jeton.s-dormant i { background: var(--faint); }
.jeton.s-mort i { background: var(--rouge); }
.jeton:hover { color: var(--ink); border-color: var(--cadre-vif); }
.jeton.actif { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.jeton.actif .n { color: var(--paper); }
.jeton.creux { opacity: .45; }
.jeton.creux:hover { opacity: 1; }
.jeton.neutre { border-style: dashed; }
main { max-width: 1240px; margin: 0 auto; padding: 26px 28px 90px; position: relative; }
/* ---------- Cartes ---------- */
.carte {
background: var(--surface); border: 1px solid var(--cadre); border-radius: var(--rayon);
padding: 18px 20px; margin-bottom: 16px; position: relative; box-shadow: var(--ombre);
}
.carte::before { content: none; }
.carte > h2:first-child, .carte > .barre:first-child h2 { margin-top: 0; }
.carte.alerte { border-color: rgba(248,113,113,.35); background: linear-gradient(180deg, rgba(248,113,113,.06), transparent 60%), var(--surface); }
.carte.bilan { border-color: rgba(52,211,153,.35); background: linear-gradient(180deg, rgba(52,211,153,.06), transparent 60%), var(--surface); }
.carte.hook { border-left: 3px solid var(--accent); }
/* ---------- Tâches ---------- */
.tache { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.tache:last-child { border-bottom: 0; padding-bottom: 0; }
.tache:first-child { padding-top: 0; }
.tache .corps { flex: 1; min-width: 0; }
.tache .intitule { font-weight: 600; color: var(--ink); }
.tache .intitule a { color: inherit; text-decoration: none; }
.tache .intitule a:hover { color: var(--accent-2); }
.tache .meta { color: var(--faint); font-size: 12.5px; margin-top: 3px; }
.tache .meta a { color: var(--soft); text-decoration: none; font-weight: 600; }
.tache .meta a:hover { color: var(--accent-2); }
.tache.retard .echeance { color: var(--rouge); font-weight: 600; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* ---------- Boutons ---------- */
button, .bouton {
font-family: var(--f-sans); font-size: 13px; font-weight: 600; letter-spacing: 0;
padding: 7px 13px; border: 1px solid var(--cadre); background: var(--surface-2);
color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap; border-radius: var(--rayon-s); line-height: 1.35;
transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
button:hover, .bouton:hover { background: var(--surface-3); border-color: var(--cadre-vif); }
button.principal, .bouton.principal {
background: var(--accent); color: var(--on-accent); border-color: transparent;
box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
button.principal:hover, .bouton.principal:hover { background: #4B8DF8; }
button.ok { color: var(--vert); border-color: rgba(52,211,153,.3); background: var(--vert-bg); }
button.ok:hover { background: var(--vert); color: #06281B; border-color: var(--vert); }
button.discret, .bouton.discret { color: var(--soft); border-color: transparent; background: transparent; padding: 7px 9px; }
button.discret:hover, .bouton.discret:hover { color: var(--ink); background: var(--surface-2); }
button.danger { color: var(--rouge); border-color: rgba(248,113,113,.3); background: var(--rouge-bg); }
button.danger:hover { background: var(--rouge); border-color: var(--rouge); color: #2B0A08; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
form.inline { display: inline; }
/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; background: transparent; }
.quoi-ou td { vertical-align: top; padding: .5rem .9rem .5rem 0; }
.quoi-ou td:first-child { white-space: nowrap; width: 1%; }
.tableau {
border: 1px solid var(--cadre); border-radius: var(--rayon); overflow: hidden;
background: var(--surface); box-shadow: var(--ombre); margin-bottom: 16px;
}
.carte.tableau { padding: 0; }
th {
font-family: var(--f-mono); text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
color: var(--faint); padding: 11px 14px; font-weight: 600;
border-bottom: 1px solid var(--cadre); background: var(--surface-2); white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--hair); vertical-align: middle; font-size: 13.5px;
font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255,255,255,.025); }
td.nom { font-weight: 500; }
td.nom a { font-weight: 600; text-decoration: none; }
td.nom a:hover { color: var(--accent-2); }
td .sous, .sous { color: var(--faint); font-size: 12px; font-weight: 400; }
td.moi { box-shadow: inset 3px 0 0 var(--accent); }
tr.decroche td { background: var(--ambre-bg); }
tr.vide-mois td { color: var(--faint); }
tr.sep-org td { border-top: 1px solid var(--cadre); }
.tableau.large { overflow-x: auto; }
.tableau.large table { min-width: 940px; }
.tableau.large td.nom, .tableau.large th.nom { position: sticky; left: 0; background: var(--surface); z-index: 2; }
.tableau.large th.nom { background: var(--surface-2); }
.tableau.large tbody tr:hover td.nom { background: var(--surface-2); }
td .barre-cellule { display: flex; align-items: center; gap: 10px; }
td .barre-cellule .n { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 40px; }
/* ---------- Pastilles ---------- */
.pastille {
display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
padding: 3px 9px; background: var(--surface-3); color: var(--soft); white-space: nowrap;
border-radius: 999px; border: 1px solid transparent; line-height: 1.4;
}
.pastille.src-manuel { background: var(--accent-bg); color: var(--accent-2); }
.pastille.src-ia { background: rgba(129,140,248,.14); color: var(--bleu); }
.pastille.e-connecte, .pastille.e-qualifie, .pastille.e-conversation { background: var(--ambre-bg); color: var(--ambre); }
.pastille.e-call_booke, .pastille.e-rdv_pris, .pastille.e-presente { background: var(--accent-bg); color: var(--accent-2); }
.pastille.e-call_booke::before, .pastille.e-rdv_pris::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
animation: pouls 1.8s ease-in-out infinite;
}
.pastille.e-client { background: var(--vert-bg); color: var(--vert); }
.pastille.e-hors_cible, .pastille.e-perdu { background: rgba(255,255,255,.04); color: var(--faint); }
.pastille.s-actif { background: var(--vert-bg); color: var(--vert); }
.pastille.s-nurture { background: var(--ambre-bg); color: var(--ambre); }
.pastille.s-dormant { background: rgba(129,140,248,.12); color: var(--bleu); }
.pastille.s-mort { background: rgba(255,255,255,.03); color: var(--faint); text-decoration: line-through; }
.pastille.c-whatsapp { background: var(--vert-bg); color: var(--vert); }
.pastille.c-instagram { background: rgba(192,132,252,.14); color: var(--violet); }
.pastille.c-linkedin { background: rgba(129,140,248,.14); color: var(--bleu); }
.pastille.c-email { background: rgba(251,191,36,.14); color: #e0a92a; }
.email-dialogue { background: var(--surface); color: var(--ink); border: 1px solid var(--cadre); border-radius: 12px; padding: 22px 24px; width: min(760px, 94vw); max-height: 88vh; }
.email-dialogue::backdrop { background: rgba(0,0,0,.55); }
.email-dialogue h2 { margin: 0 0 6px; }
.email-dialogue .corps-email { margin-top: 14px; max-height: 58vh; overflow: auto; font-size: 14px; line-height: 1.55; }
.email-dialogue .corps-email.texte { white-space: pre-wrap; word-break: break-word; }
.email-dialogue .corps-email img { max-width: 100%; }
.pieces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.piece { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border-radius: var(--rayon-xs);
background: var(--surface-3); border: 1px solid var(--cadre); color: var(--ink); font-size: 12.5px; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece span { color: var(--faint); font-size: 11.5px; }
a.piece:hover { border-color: var(--accent); }
.piece.rate { color: var(--rouge); border-color: var(--rouge-bg); text-decoration: line-through; }
.pastille.c-interne { background: var(--surface-3); color: var(--soft); }
.pastille.optin { background: var(--ambre-bg); color: var(--ambre); }
.pastille.optin-rdv { background: var(--vert-bg); color: var(--vert); }
.retard-txt { color: var(--rouge); font-weight: 600; }
/* ---------- Coordonnées copiables ---------- */
.coords { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 3px; }
.coord { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; max-width: 100%; }
.coord .coord-btn {
font-family: var(--f-sans); font-size: 12.5px; font-weight: 400; color: var(--soft);
background: none; border: 1px solid transparent; padding: 1px 6px; border-radius: var(--rayon-xs);
cursor: pointer; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch;
font-variant-numeric: tabular-nums;
}
.coord .coord-btn:hover { color: var(--ink); background: var(--surface-2); border-color: var(--cadre); }
.coord .coord-btn .ic { font-style: normal; margin-left: 6px; color: var(--faint); font-size: 11px; }
.coord .coord-btn:hover .ic { color: var(--accent-2); }
.coord .coord-btn.copie { color: var(--vert); background: var(--vert-bg); }
.coord .coord-btn.copie .ic { color: var(--vert); }
.coord .coord-btn.copie::after { content: " copié"; color: var(--vert); font-size: 11px; }
.coord-lien { color: var(--faint); font-size: 11px; text-decoration: none; padding: 0 2px; }
.coord-lien:hover { color: var(--accent-2); }
/* ---------- Formulaires ---------- */
label { display: block; font-size: 12px; font-weight: 600; color: var(--soft); margin: 14px 0 5px; }
label::before { content: none; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=password],
input[type=url], input[type=tel], input:not([type]), select, textarea {
width: 100%; font-family: var(--f-sans); font-size: 13.5px; padding: 9px 12px;
border: 1px solid var(--cadre); background: var(--paper); color: var(--ink);
caret-color: var(--accent); border-radius: var(--rayon-s); transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
select {
appearance: none; -webkit-appearance: none; color-scheme: dark; cursor: pointer; padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
}
select option { background: var(--surface); color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.recherche { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.recherche label { margin-top: 0; }
.recherche > div { min-width: 140px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; margin: 6px 14px 0 0; font-weight: 500; color: var(--ink); }
.checks label::before { content: none; }
/* ---------- Compteurs : la rangée de tuiles ---------- */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.carte.compteurs { background: transparent; border: 0; box-shadow: none; padding: 0; }
.compteurs > div {
background: var(--surface); border: 1px solid var(--cadre); border-radius: var(--rayon);
padding: 16px 18px 14px; min-width: 0; box-shadow: var(--ombre); position: relative; overflow: hidden;
}
.compteurs > div::after {
content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.chiffre {
display: block; font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--ink);
letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chiffre + .aide { color: var(--soft); font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chiffre + .aide a { color: var(--soft); }
.chiffre + .aide a:hover { color: var(--ink); }
.chiffre.vitesse-bon { color: var(--vert); }
.chiffre.vitesse-moyen { color: var(--ambre); }
.chiffre.vitesse-mauvais { color: var(--rouge); }
.compteurs .viz-spark { margin-top: 10px; width: 100%; height: 34px; display: block; }
.delta {
display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-size: 11px; font-weight: 600;
padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.delta.monte { color: var(--vert); background: var(--vert-bg); }
.delta.baisse { color: var(--rouge); background: var(--rouge-bg); }
.delta.plat { color: var(--faint); background: var(--surface-3); }
.delta.monte::before { content: "↑"; font-size: 10px; }
.delta.baisse::before { content: "↓"; font-size: 10px; }
/* ---------- Fiche lead ---------- */
.colonnes { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.pipeline { display: flex; flex-wrap: wrap; gap: 6px; }
.pipeline button { font-size: 12.5px; padding: 6px 11px; }
.pipeline button.courant { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.chrono { list-style: none; margin: 0; padding: 0; }
.chrono li { padding: 9px 0 9px 18px; border-left: 1px solid var(--cadre); position: relative; font-size: 13.5px; }
.chrono li::before {
content: ""; position: absolute; left: -4.5px; top: 16px; width: 8px; height: 8px;
background: var(--surface-3); border-radius: 50%; border: 1px solid var(--cadre-vif);
}
.chrono li.etape::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.chrono .quand { color: var(--faint); font-size: 11.5px; }
.faite .intitule { text-decoration: line-through; color: var(--faint); }
code {
font-family: var(--f-mono); background: var(--surface-2); color: var(--accent-2);
padding: 1px 6px; font-size: 12px; border: 1px solid var(--cadre); border-radius: var(--rayon-xs);
}
pre {
font-family: var(--f-mono); background: #07090D; color: #C9D1D9; padding: 14px;
overflow-x: auto; font-size: 12px; border: 1px solid var(--cadre); border-radius: var(--rayon-s);
}
.signal { margin: 9px 0 0; font-weight: 600; color: var(--ink); }
.extrait {
font-size: 13px; color: var(--soft); background: var(--paper); border: 1px solid var(--cadre);
padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; border-radius: var(--rayon-s);
}
.carte.hook pre { white-space: pre-wrap; word-break: break-word; max-height: none; }
.carte.hook .copiable pre { padding-right: 92px; }
.suppression { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair);
display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.confirmation { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
[hidden] { display: none !important; }
.carte.profil h3 { margin: 16px 0 6px; }
.identite { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; margin: 10px 0 0; }
.identite dt { font-size: 11.5px; font-weight: 600; color: var(--faint); padding-top: 2px; }
.identite dd { margin: 0; font-size: 13.5px; }
ul.parcours { display: block; margin: 5px 0 0; padding-left: 19px; font-size: 13.5px; color: var(--soft); overflow: visible; }
ul.parcours li { margin: 3px 0; }
/* ---------- Bookmarklet, blocs copiables ---------- */
.bookmarklet { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin: 13px 0; }
.favori {
display: inline-block; padding: 10px 16px; font-weight: 600; font-size: 13px;
background: var(--accent); color: var(--on-accent); text-decoration: none; cursor: grab;
border-radius: var(--rayon-s);
}
.favori:active { cursor: grabbing; }
.copiable { position: relative; margin-top: 11px; }
.copiable pre { max-height: 160px; white-space: pre-wrap; word-break: break-all; padding-right: 112px; }
.copiable .copier { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 5px 10px; }
details summary { cursor: pointer; margin-top: 9px; color: var(--soft); font-size: 13px; }
details summary:hover { color: var(--ink); }
@media (max-width: 820px) {
.colonnes { grid-template-columns: 1fr; }
th.optionnel, td.optionnel { display: none; }
.marque .suffixe { display: none; }
}
/* ---------- Organisation active, badges ---------- */
header .org {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
color: var(--soft); border: 1px solid var(--cadre); padding: 6px 12px; background: var(--surface);
text-decoration: none; white-space: nowrap; border-radius: 999px; cursor: pointer;
}
header .org:hover { color: var(--ink); border-color: var(--cadre-vif); background: var(--surface-2); }
header .org strong { color: var(--ink); font-weight: 600; }
nav a .badge {
display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 600;
text-align: center; line-height: 17px;
}
/* ============================================================
Conversations — une messagerie
Deux colonnes dans un seul cadre, à la hauteur de l'écran : les fils à
gauche, celui qu'on lit à droite. Le reste de l'application est fait de
pages qui défilent ; celle-ci ne défile pas, ce sont ses deux colonnes
qui défilent chacune de leur côté. C'est ce qui fait qu'on lit un fil
sans perdre sa place dans la liste.
============================================================ */
/* La messagerie prend la largeur : 1240 px suffisent à un tableau, pas à
deux colonnes dont l'une est un fil de discussion. */
body:has(.chat) main { max-width: 1560px; padding: 16px 20px 0; }
.chat {
--large-liste: 336px;
--large-volet: 322px;
/* Repli si le script n'a pas encore mesuré : la hauteur réelle arrive de
chat.js, bandeaux compris. */
height: var(--haut-chat, calc(100dvh - 150px));
display: grid; grid-template-columns: var(--large-liste) 1fr;
border: 1px solid var(--cadre); border-radius: var(--rayon);
background: var(--surface); box-shadow: var(--ombre); overflow: hidden;
}
/* ---------- La colonne des fils ---------- */
/* `min-height: 0` sur les deux colonnes : dans une grille, un item vaut au
moins la taille de son contenu, et sans ça un long fil pousse la colonne
hors du cadre — la barre de saisie passe alors sous le bord. */
.chat-liste {
display: flex; flex-direction: column; min-width: 0; min-height: 0;
border-right: 1px solid var(--cadre); background: var(--surface);
}
.chat-liste-tete { padding: 12px 12px 8px; border-bottom: 1px solid var(--hair); background: var(--surface-2); }
.chat-recherche { position: relative; display: flex; align-items: center; }
.chat-recherche svg {
position: absolute; left: 11px; width: 15px; height: 15px; pointer-events: none;
fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round;
}
.chat-recherche input {
width: 100%; margin: 0; padding: 8px 30px 8px 33px; font-size: 13px;
background: var(--paper); border: 1px solid var(--cadre); border-radius: 999px;
}
.chat-recherche input::-webkit-search-cancel-button { display: none; }
.chat-recherche .vider {
position: absolute; right: 10px; color: var(--faint); text-decoration: none;
font-size: 17px; line-height: 1;
}
.chat-recherche .vider:hover { color: var(--ink); }
/* Les vues : retrouver un fil sans taper. Elles se lisent en une ligne, et
le compte à côté du nom dit s'il y a quelque chose à y faire. */
.chat-vues { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
.chat-vues a {
padding: 5px 9px; font-size: 12.5px; font-weight: 500;
color: var(--soft); text-decoration: none; border-radius: var(--rayon-xs);
border: 1px solid transparent; white-space: nowrap;
}
.chat-vues a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.chat-vues a.actif { color: var(--ink); background: var(--surface-3); border-color: var(--cadre); }
.chat-vues .n {
display: inline-block; min-width: 15px; padding: 0 4px; margin-left: 3px; border-radius: 999px;
background: rgba(255,255,255,.07); color: var(--soft); font-size: 10px; font-weight: 600;
text-align: center;
}
/* Un compte qui appelle une action se voit ; un compte qui décrit un état
reste gris — sinon les cinq vues clignotent toutes pareil. */
.chat-vues .n.chaud { background: var(--accent); color: var(--on-accent); }
.chat-vues a.actif .n { background: rgba(255,255,255,.12); color: var(--ink); }
.chat-vues a.actif .n.chaud { background: var(--accent); color: var(--on-accent); }
.chat-menus { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.chat-menus .menu { flex: 1; min-width: 110px; margin: 0; }
.chat-menus select {
width: 100%; margin: 0; padding: 5px 8px; font-size: 12px; border-radius: var(--rayon-xs);
background: var(--paper); color: var(--soft);
}
.chat-menus select:hover { color: var(--ink); }
.chat-menus .vider-filtres {
font-size: 11.5px; color: var(--faint); text-decoration: none; padding: 4px 6px;
border-bottom: 1px solid transparent;
}
.chat-menus .vider-filtres:hover { color: var(--ink); border-color: var(--cadre-vif); }
.sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Les canaux : des pastilles à filtrer, pas une seconde barre d'onglets —
on en a jusqu'à cinq, et ils ne pèsent pas le même poids que « ouvertes »
ou « archivées ». */
.chat-canaux { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chat-canaux a {
padding: 3px 9px; font-size: 11.5px; font-weight: 500; color: var(--soft);
text-decoration: none; border: 1px solid var(--cadre); border-radius: 999px;
}
.chat-canaux a:hover { color: var(--ink); border-color: var(--cadre-vif); }
.chat-canaux a.actif { color: var(--ink); background: var(--surface-3); border-color: var(--cadre-vif); }
.chat-canaux a.coupe { opacity: .5; text-decoration: line-through; }
.chat-rattacher {
display: block; margin-top: 9px; padding: 8px 11px; text-decoration: none;
border: 1px solid rgba(251,191,36,.3); background: var(--ambre-bg); border-radius: var(--rayon-s);
}
.chat-rattacher strong { display: block; color: var(--ambre); font-size: 12.5px; font-weight: 650; }
.chat-rattacher span { display: block; color: var(--soft); font-size: 11.5px; margin-top: 2px; }
.chat-rattacher:hover { border-color: var(--ambre); }
.chat-fils { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.chat-liste-vide { padding: 26px 18px; color: var(--faint); font-size: 13px; text-align: center; }
/* Une liste de soixante fils : chaque ligne tient en trois étages serrés —
qui et quand, ce qui a été dit, puis où il en est. La couleur est réservée
au non-lu et au canal ; tout le reste est gris, sinon vingt lignes de
pastilles vertes et ambre redeviennent le mur qu'on voulait défaire. */
.fil {
display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px;
border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit;
position: relative; transition: background .12s;
}
/* Le lien couvre la ligne entière et passe sous les pastilles de canal : on
clique n'importe où pour ouvrir la conversation, et sur un canal précis
pour ouvrir celui-là. Un autour de tout interdirait les seconds. */
.fil > * { position: relative; z-index: 1; pointer-events: none; }
/* Le lien de recouvrement reprend les clics que ses voisins laissent passer ;
seules les pastilles de canal les gardent pour elles. */
.fil .couvre { position: absolute; inset: 0; z-index: 0; pointer-events: auto; }
.fil .couvre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--rayon-xs); }
.fil .canaux-fil { pointer-events: auto; }
.fil:last-child { border-bottom: 0; }
.fil:hover { background: rgba(255,255,255,.03); }
/* Le fil ouvert : une barre d'accent et un fond plein. Dans une colonne de
soixante lignes, un simple fond clair ne se voit pas. */
.fil.courant { background: var(--surface-3); }
.fil.courant::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
.fil .corps { flex: 1; min-width: 0; }
.fil .tete { display: flex; align-items: baseline; gap: 8px; }
.fil .qui-parle {
flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fil .epingle { font-size: 9.5px; opacity: .75; flex: 0 0 auto; }
/* L'agent tient ce fil : deux lettres, pas un aplat — l'information est
« qui parle », elle n'a pas à peser plus que le nom du lead. */
.fil .marque-agent {
flex: 0 0 auto; font: 600 9px/1.5 var(--f-mono); letter-spacing: .06em;
padding: 0 4px; border-radius: 3px; background: rgba(192,132,252,.16); color: var(--violet);
}
.fil .marque-agent.pause { background: rgba(255,255,255,.06); color: var(--faint); }
.fil .a-repondre {
font-size: 10px; font-weight: 600; color: var(--accent-2); flex: 0 0 auto;
}
/* Les canaux d'une même personne, sous son dernier message. Gris tant qu'ils
dorment, colorés quand ils ont du non-lu ou qu'on y est : c'est là qu'on
voit d'un coup d'œil que la réponse est arrivée par email. */
.fil .canaux-fil { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pastille-canal {
padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600;
letter-spacing: .01em; text-decoration: none; white-space: nowrap;
border: 1px solid var(--cadre); color: var(--faint); background: transparent;
}
.pastille-canal:hover { color: var(--ink); border-color: var(--cadre-vif); }
.pastille-canal.neuf.c-whatsapp { color: var(--vert); border-color: rgba(52,211,153,.35); background: var(--vert-bg); }
.pastille-canal.neuf.c-email { color: #e0a92a; border-color: rgba(251,191,36,.35); background: var(--ambre-bg); }
.pastille-canal.neuf.c-linkedin { color: var(--bleu); border-color: rgba(129,140,248,.35); background: rgba(129,140,248,.12); }
.pastille-canal.neuf.c-instagram { color: var(--violet); border-color: rgba(192,132,252,.35); background: rgba(192,132,252,.12); }
.pastille-canal.ici {
color: var(--ink); background: var(--surface-3); border-color: var(--cadre-vif);
}
.fil .a-repondre + .pastille::before { content: "·"; margin-right: 6px; color: var(--faint); }
.fil .apercu .moi { color: var(--faint); }
.fil .apercu .forme { color: var(--faint); font-style: italic; }
.fil .quand { font-size: 11px; color: var(--faint); white-space: nowrap; }
.fil.neuf .quand { color: var(--accent-2); }
.fil .bas { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fil .apercu {
flex: 1; min-width: 0; color: var(--soft); font-size: 12.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fil.neuf .apercu { color: var(--ink); font-weight: 500; }
.fil .etiquettes {
display: flex; gap: 6px; margin-top: 3px; align-items: center;
overflow: hidden; white-space: nowrap;
}
.fil .etiquettes:empty { display: none; }
/* L'étape et le statut perdent leur aplat de couleur dans la liste : ils la
gardent sur la fiche et dans le volet, où ils sont le sujet. */
.fil .etiquettes .pastille {
font-size: 10px; padding: 0; background: none !important; color: var(--faint);
font-weight: 500; letter-spacing: .01em;
}
.fil .etiquettes .pastille + .pastille::before,
.fil .suivi::before { content: "·"; margin-right: 6px; color: var(--faint); }
.fil .suivi { font-size: 10px; color: var(--faint); }
.compteur {
display: inline-block; min-width: 18px; padding: 1px 5px; background: var(--accent); border-radius: 999px;
color: var(--on-accent); font-size: 10.5px; font-weight: 600; text-align: center; line-height: 15px;
}
.chat-liste-pied {
display: flex; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--hair);
background: var(--surface-2);
}
.chat-liste-pied input {
flex: 1; min-width: 0; margin: 0; padding: 6px 11px; font-size: 12.5px;
background: var(--paper); border-radius: 999px;
}
.chat-liste-pied button {
flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.chat-liste-pied svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* ---------- L'avatar ---------- */
.avatar {
flex: 0 0 auto; position: relative; width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: hsl(var(--teinte, 220) 45% 22%); color: hsl(var(--teinte, 220) 70% 78%);
border: 1px solid hsl(var(--teinte, 220) 45% 32%);
font-size: 13px; font-weight: 600; letter-spacing: .01em; user-select: none;
}
.avatar.grand { width: 52px; height: 52px; font-size: 17px; }
.avatar .coin {
position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
border: 2px solid var(--surface); background: var(--faint);
}
.fil.courant .avatar .coin { border-color: var(--surface-3); }
.avatar .coin.c-whatsapp { background: #25D366; }
.avatar .coin.c-email { background: var(--accent); }
.avatar .coin.c-linkedin { background: #0A66C2; }
.avatar .coin.c-instagram { background: #E1306C; }
.avatar .coin.c-interne { background: var(--violet); }
/* ---------- La colonne du fil ---------- */
.chat-fil {
position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
background: var(--paper);
/* Le grain du fond de l'application, en plus dense : ce qui distingue la
zone de lecture du cadre qui la tient. */
background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 22px 22px;
}
.chat-fil.charge { opacity: .5; transition: opacity .12s .1s; }
.fil-vide {
margin: auto; padding: 30px; text-align: center; color: var(--faint); max-width: 330px;
}
.fil-vide svg {
width: 44px; height: 44px; margin-bottom: 14px; fill: none; stroke: var(--cadre-vif);
stroke-width: 1.2; stroke-linejoin: round;
}
.fil-vide p { margin: 0 0 5px; color: var(--soft); font-size: 14px; }
.fil-vide .aide { font-size: 12.5px; }
.fil-vide-messages { margin: auto; text-align: center; color: var(--faint); }
.fil-vide-messages p { margin: 0 0 4px; }
.fil-alerte {
padding: 10px 16px; background: var(--rouge-bg); border-bottom: 1px solid rgba(248,113,113,.35);
font-size: 12.5px; color: var(--ink);
}
.fil-alerte strong { color: var(--rouge); margin-right: 7px; }
.fil-alerte span { color: var(--soft); margin-right: 7px; }
.fil-entete {
display: flex; align-items: center; gap: 9px 11px; padding: 10px 14px; flex-shrink: 0;
flex-wrap: wrap; border-bottom: 1px solid var(--cadre); background: var(--surface-2);
}
.fil-entete .fil-qui { flex: 1 1 190px; }
.fil-entete .fil-canaux { order: 3; flex: 1 1 100%; }
/* Au large, les canaux tiennent sur la ligne du nom plutôt que sous elle. */
@media (min-width: 1280px) {
.fil-entete .fil-canaux { order: 0; flex: 0 1 auto; }
}
.fil-entete .avatar { width: 38px; height: 38px; font-size: 12.5px; }
.fil-qui { flex: 1; min-width: 0; }
.fil-qui h1 { font-size: 15.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-qui h1 a { text-decoration: none; }
.fil-qui h1 a:hover { color: var(--accent-2); }
.fil-qui p {
margin: 2px 0 0; font-size: 11.5px; color: var(--faint);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* Les canaux d'un même prospect, dans l'entête de son fil. Celui où l'on est
porte la couleur de son canal ; les autres attendent en gris, et celui dont
la coordonnée manque s'efface sans disparaître — savoir qu'il manque une
adresse email fait partie de ce qu'on vient lire. */
.fil-canaux { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fil-canaux form { display: inline-flex; }
.canal {
display: inline-flex; align-items: center; gap: 5px; margin: 0;
padding: 4px 10px; font-size: 11.5px; font-weight: 500; line-height: 1.4;
border-radius: 999px; border: 1px solid var(--cadre); background: var(--surface);
color: var(--soft); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.canal:hover { color: var(--ink); border-color: var(--cadre-vif); background: var(--surface-3); }
.canal.ici { cursor: default; font-weight: 600; }
.canal.ici.c-whatsapp { color: var(--vert); border-color: rgba(52,211,153,.4); background: var(--vert-bg); }
.canal.ici.c-email { color: #e0a92a; border-color: rgba(251,191,36,.4); background: var(--ambre-bg); }
.canal.ici.c-linkedin { color: var(--bleu); border-color: rgba(129,140,248,.4); background: rgba(129,140,248,.14); }
.canal.ici.c-instagram { color: var(--violet); border-color: rgba(192,132,252,.4); background: rgba(192,132,252,.14); }
.canal.neuf { border-style: dashed; }
.canal .ouvrir { color: var(--faint); font-weight: 600; }
.canal.neuf:hover .ouvrir { color: var(--accent-2); }
.canal.absent { opacity: .45; border-style: dashed; }
.canal .compteur { min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 15px; }
.fil-actions { display: flex; gap: 6px; align-items: center; }
.rond {
width: 32px; height: 32px; padding: 0; border-radius: 50%; display: flex;
align-items: center; justify-content: center; background: transparent;
border: 1px solid transparent; color: var(--soft); cursor: pointer;
}
.rond:hover { background: var(--surface-3); border-color: var(--cadre); color: var(--ink); }
.rond svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- L'agent sur un fil ---------- */
.bandeau-agent {
display: flex; align-items: center; gap: 11px; flex-shrink: 0;
padding: 9px 14px; border-bottom: 1px solid var(--cadre);
background: rgba(192,132,252,.08); font-size: 12.5px;
}
.bandeau-agent.pause { background: var(--ambre-bg); }
.bandeau-agent.coupe { background: var(--surface-2); }
.bandeau-agent .dit { flex: 1; min-width: 0; }
.bandeau-agent strong { color: var(--ink); margin-right: 6px; }
.bandeau-agent span { color: var(--soft); }
.bandeau-agent button { white-space: nowrap; }
.pastille-agent {
flex: 0 0 auto; font: 600 10px/1 var(--f-mono); letter-spacing: .08em;
padding: 5px 7px; border-radius: var(--rayon-xs);
background: rgba(192,132,252,.18); color: var(--violet);
}
.bandeau-agent.pause .pastille-agent { background: rgba(251,191,36,.18); color: var(--ambre); }
.bandeau-agent.coupe .pastille-agent { background: rgba(255,255,255,.06); color: var(--faint); }
/* ---------- Les réponses rapides ---------- */
/* Le panneau se pose juste au-dessus de la barre de saisie, dont la hauteur
change avec le canal et le texte tapé : `--haut-composer` vient de chat.js,
le repli couvre le cas d'une barre simple. */
.reponses {
position: absolute; left: 14px; right: 14px; z-index: 8;
bottom: calc(var(--haut-composer, 62px) + 8px);
max-height: 58%; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--cadre-vif); border-radius: var(--rayon);
box-shadow: var(--ombre-haute); overflow: hidden;
}
.reponses-tete {
display: flex; gap: 8px; align-items: center; padding: 10px 10px 10px 14px;
border-bottom: 1px solid var(--hair); background: var(--surface-2);
}
.reponses-tete input {
flex: 1; margin: 0; padding: 7px 12px; font-size: 13px;
background: var(--paper); border-radius: 999px;
}
.reponses-liste { flex: 1; overflow-y: auto; padding: 5px; }
.reponses-liste .vide, .reponses-liste .rien {
margin: 0; padding: 18px 14px; color: var(--faint); font-size: 12.5px; text-align: center;
}
.reponse {
display: grid; grid-template-columns: auto 1fr auto; gap: 2px 9px; width: 100%;
padding: 8px 11px; margin: 0; text-align: left; cursor: pointer;
background: transparent; border: 1px solid transparent; border-radius: var(--rayon-s);
}
.reponse:hover, .reponse:focus-visible { background: var(--surface-3); border-color: var(--cadre); outline: none; }
.reponse .raccourci { font: 600 11.5px/1.5 var(--f-mono); color: var(--accent-2); }
.reponse .titre { font-size: 13px; font-weight: 600; color: var(--ink); }
.reponse .qui { font-size: 10.5px; color: var(--faint); }
.reponse .apercu-reponse {
grid-column: 2 / -1; font-size: 12px; color: var(--soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reponses-neuve { border-top: 1px solid var(--hair); background: var(--surface-2); }
.reponses-neuve summary {
padding: 9px 14px; font-size: 12.5px; color: var(--soft); cursor: pointer; user-select: none;
}
.reponses-neuve summary:hover { color: var(--ink); }
.reponses-neuve form { padding: 0 14px 14px; }
.reponses-neuve .deux { display: flex; gap: 9px; }
.reponses-neuve .deux label { flex: 1; }
.reponses-neuve label { display: block; font-size: 11.5px; color: var(--faint); }
.reponses-neuve input, .reponses-neuve textarea { margin: 4px 0 9px; font-size: 13px; }
.reponses-neuve .aide { margin: 0 0 10px; font-size: 11.5px; }
.reponses-neuve .aide code {
font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: var(--surface-3); color: var(--accent-2);
}
.reponses-neuve .bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reponses-neuve .partage {
display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--soft);
}
.reponses-neuve .partage input { width: auto; margin: 0; }
/* ---------- Les bulles ---------- */
.bulles {
flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 3px;
scroll-behavior: smooth;
}
.jour-separateur {
align-self: center; margin: 12px 0 9px; padding: 3px 11px; font-size: 10.5px;
color: var(--soft); background: var(--surface-2); border: 1px solid var(--cadre);
border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.bulle {
position: relative; max-width: 66%; min-width: 108px; padding: 7px 12px 18px;
border: 1px solid var(--cadre); border-radius: 13px; box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.bulle .texte { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.45; }
.bulle .sujet { font-size: 12px; font-weight: 700; opacity: .85; margin-bottom: 4px; }
/* L'heure et l'accusé se posent dans le coin, comme dans toute messagerie :
d'où le creux réservé sous le texte plutôt qu'une ligne de plus. */
.bulle .pied {
position: absolute; right: 10px; bottom: 4px;
display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--faint);
}
.bulle .heure { font-variant-numeric: tabular-nums; }
.bulle .accuse.lu { color: var(--accent-2); }
.bulle .accuse.echec { color: var(--rouge); }
.bulle .auto-marque {
font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ambre);
}
.bulle .auto-marque.agent { color: var(--violet); font-family: var(--f-mono); font-weight: 600; }
/* Un message de l'agent se distingue d'un message de l'équipe : sans ça, on
relit un fil sans savoir qui a écrit quoi. */
.bulle.par-agent { box-shadow: inset 3px 0 0 var(--violet), 0 1px 1px rgba(0,0,0,.2); }
.bulle .bulle-erreur { margin-top: 4px; font-size: 10.5px; color: var(--rouge); }
/* Les deux sens. Le coin coupé du côté de l'émetteur donne la direction
avant même de lire — c'est tout ce que fait la queue d'une bulle. */
.bulle.entrant {
align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px;
}
.bulle.sortant {
align-self: flex-end; background: var(--accent-bg); border-color: rgba(59,130,246,.32);
border-bottom-right-radius: 4px;
}
/* Deux messages de suite dans le même sens : on les resserre et on n'arrondit
qu'une fois, le fil se lit par blocs plutôt que par lignes. */
.bulle.entrant + .bulle.entrant { margin-top: -1px; border-top-left-radius: 5px; }
.bulle.sortant + .bulle.sortant { margin-top: -1px; border-top-right-radius: 5px; }
.bulle.auto { box-shadow: inset 3px 0 0 var(--ambre), 0 1px 1px rgba(0,0,0,.2); }
.bulle.rate { background: var(--rouge-bg); border-color: rgba(248,113,113,.4); }
.bulle.ouvrable { cursor: pointer; }
.bulle.ouvrable:hover, .bulle.ouvrable:focus-visible { border-color: var(--accent); outline: none; }
.bulle .media { font-size: 12px; color: var(--accent-2); text-decoration: none; display: inline-block; margin-bottom: 5px; }
.bulle audio { width: 100%; min-width: 230px; margin: 4px 0 2px; }
/* ---------- La saisie ---------- */
.composer { flex-shrink: 0; padding: 10px 14px 12px; border-top: 1px solid var(--cadre); background: var(--surface-2); }
.composer.lecture { padding: 14px 18px; color: var(--faint); font-size: 12.5px; text-align: center; }
.composer .champ-sujet { margin: 0 0 8px; padding: 7px 14px; font-size: 13px; background: var(--paper); border-radius: 999px; }
.composer .saisie { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
flex: 1; min-width: 0; margin: 0; resize: none; overflow-y: auto;
min-height: 38px; max-height: 180px; padding: 9px 15px; font-size: 13.5px; line-height: 1.45;
background: var(--paper); border: 1px solid var(--cadre); border-radius: 19px;
}
.rond.allume { color: var(--accent-2); background: var(--accent-bg); border-color: rgba(59,130,246,.35); }
.composer .envoyer, .composer .plus, .composer .trombone, .composer .eclair {
flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
border: 1px solid var(--cadre); background: var(--surface-3); color: var(--soft);
}
.composer .envoyer { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.composer .envoyer:hover { filter: brightness(1.1); }
.composer .plus:hover, .composer .trombone:hover, .composer .eclair:hover {
color: var(--ink); border-color: var(--cadre-vif);
}
.composer .plus.actif { color: var(--accent-2); border-color: var(--accent); }
.composer .eclair svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.composer .envoyer svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.composer .plus svg, .composer .trombone svg {
width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.composer .trombone input[type=file] { display: none; }
.composer .options-envoi { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.composer .options-envoi select { width: auto; margin: 0; }
.composer .options-envoi input { flex: 1; min-width: 160px; margin: 0; }
.composer .sous-saisie {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px;
font-size: 11.5px;
}
.composer .sous-saisie .aide { margin: 0; }
.composer .sous-saisie .depart { margin-left: auto; color: var(--faint); }
.case-teardown { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--soft); }
.case-teardown input { width: auto; margin: 0; }
.fenetre-fermee {
font-size: 12px; color: var(--ambre); border: 1px solid rgba(251,191,36,.3);
background: var(--ambre-bg); padding: 8px 12px; margin-bottom: 9px; border-radius: var(--rayon-s);
}
/* ---------- Le volet du lead ---------- */
.volet {
position: absolute; top: 0; right: 0; bottom: 0; width: var(--large-volet); z-index: 5;
display: flex; flex-direction: column; background: var(--surface);
border-left: 1px solid var(--cadre); box-shadow: var(--ombre-haute);
transform: translateX(101%); transition: transform .18s ease; visibility: hidden;
}
.chat.volet-ouvert .volet { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .volet { transition: none; } }
.volet-entete {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 12px 11px 16px; border-bottom: 1px solid var(--cadre); background: var(--surface-2);
}
.volet-entete strong { font-size: 13px; }
.volet-corps { flex: 1; overflow-y: auto; padding: 14px 16px 22px; }
.volet-identite { display: flex; gap: 11px; align-items: center; }
.volet-nom { font-size: 15px; font-weight: 600; text-decoration: none; }
.volet-nom:hover { color: var(--accent-2); }
.volet-pastilles { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 10px; }
.volet-coords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.volet .bouton.large { display: block; width: 100%; text-align: center; }
.volet-bloc { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--hair); }
.volet-bloc h3 { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.volet-bloc input, .volet-bloc select { margin: 0; }
/* ---------- Étroit ---------- */
/* Sous 1100 px, deux colonnes ne tiennent plus : on montre celle qui compte —
la liste tant qu'aucun fil n'est ouvert, le fil dès qu'il l'est. */
@media (max-width: 1100px) {
.chat { grid-template-columns: 1fr; }
.chat.a-fil .chat-liste { display: none; }
.chat:not(.a-fil) .chat-fil { display: none; }
.bulle { max-width: 82%; }
.volet { width: min(var(--large-volet), 92%); }
}
@media (max-width: 700px) {
body:has(.chat) main { padding: 10px 10px 0; }
.bulle { max-width: 88%; }
}
/* ---------- Campagnes ---------- */
.sequence { list-style: none; margin: 0; padding: 0; counter-reset: pas; }
.sequence li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--hair); }
.sequence li:last-child { border-bottom: 0; }
.sequence li::before {
counter-increment: pas; content: counter(pas); position: absolute; left: 0; top: 14px;
width: 26px; height: 26px; line-height: 24px; text-align: center; font-size: 12px; font-weight: 600;
border: 1px solid var(--accent); color: var(--accent-2); background: var(--accent-bg); border-radius: 50%;
}
.sequence .delai { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.sequence .contenu { white-space: pre-wrap; margin: 5px 0 0; font-size: 14px; }
.jeton-var, .sequence .jeton { font-family: var(--f-mono); font-size: 11.5px; background: var(--surface-2); color: var(--accent-2);
border: 1px solid var(--cadre); padding: 2px 7px; cursor: pointer; border-radius: var(--rayon-xs); }
.reponses-fiche { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 0; }
.reponses-fiche .q { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.reponses-fiche .r { font-size: 14px; margin: 2px 0 0; }
/* ---------- Sélection multiple ---------- */
.selection {
position: sticky; bottom: 16px; z-index: 10; background: rgba(18,21,28,.92);
border: 1px solid var(--cadre-vif); padding: 12px 16px; margin-top: 16px; border-radius: var(--rayon);
display: flex; gap: 11px; align-items: center; flex-wrap: wrap; backdrop-filter: blur(12px); box-shadow: var(--ombre-haute);
}
td.coche, th.coche { width: 36px; padding-right: 0; }
/* ---------- Connexion ---------- */
.connexion { max-width: 400px; margin: 12vh auto; padding: 0 20px; }
body:has(> .connexion) { padding-left: 0; }
.connexion .marque { font-size: 24px; margin-bottom: 8px; }
.connexion .marque .logo { width: 30px; height: 30px; }
.connexion .carte { padding: 26px; margin-top: 20px; }
.connexion .aide { text-align: left; }
.secret { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
/* ============================================================
LA BARRE LATÉRALE
============================================================ */
.rail {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--rail);
background: var(--surface); border-right: 1px solid var(--hair);
display: flex; flex-direction: column; overflow: hidden auto; white-space: nowrap;
}
.rail .marque { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; font-size: 17px; }
.rail .marque .logo { width: 24px; height: 24px; }
.rail nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 16px; flex: 1; }
.fil-ariane { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--soft); }
.fil-ariane .org-nom { font-weight: 600; color: var(--ink); }
.fil-ariane .sep { display: none; }
.fil-ariane .page { font-family: var(--f-mono); font-size: 12.5px; text-transform: lowercase; letter-spacing: .04em; }
.fil-ariane .page::before { content: "/"; color: var(--faint); margin-right: 1px; }
.rail nav a {
display: flex; align-items: center; gap: 12px; padding: 9px 12px; text-decoration: none; color: var(--soft);
font-size: 13.5px; font-weight: 500; border-radius: var(--rayon-s); position: relative;
transition: color .14s, background .14s;
}
.rail nav a::before { content: none; }
.rail nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rail nav a svg path[d^="M7 4a2.5"], .rail nav a svg path[d^="M10 7a3"], .rail nav a svg path[d^="M10 3a3.2"] { fill: currentColor; stroke: none; }
.rail nav a .mot { opacity: 1; }
.rail nav a:hover { color: var(--ink); background: var(--surface-2); }
.rail nav a.actif { color: var(--ink); background: var(--surface-3); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.rail nav a.actif svg { color: var(--accent-2); opacity: 1; }
.rail nav a .badge {
margin-left: auto; min-width: 20px; padding: 0 6px; background: var(--accent); border-radius: 999px;
color: var(--on-accent); font-size: 11px; font-weight: 600; text-align: center; line-height: 18px;
}
.rail .separation { height: 1px; background: var(--hair); margin: 10px 4px; }
.rail nav .groupe { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
color: var(--faint); padding: 14px 12px 5px; user-select: none; }
.rail nav .groupe:first-child { padding-top: 6px; }
header { padding-left: 0; }
/* ── La barre repliée : par le bouton, ou d'elle-même sur un écran moyen ── */
.rail-bascule {
position: absolute; top: 18px; right: 10px; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 7px;
background: transparent; color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.rail-bascule svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-bascule:hover { color: var(--ink); background: var(--surface-2); border-color: var(--cadre); }
.rail-replie { --rail: 64px; }
.rail-replie .rail nav { padding: 8px 10px 16px; }
.rail-replie .rail nav .groupe { font-size: 0; height: 1px; background: var(--hair); margin: 10px 4px; padding: 0; }
.rail-replie .rail .marque { justify-content: center; padding: 16px 0 10px; }
.rail-replie .rail .marque .mot { display: none; }
.rail-replie .rail nav a { justify-content: center; padding: 10px; }
.rail-replie .rail nav a .mot { display: none; }
.rail-replie .rail nav a .badge { position: absolute; top: 4px; right: 6px; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; }
.rail-replie .rail-bascule { top: 50px; right: 19px; }
.rail-replie .rail-bascule svg { transform: scaleX(-1); }
@media (max-width: 1100px) and (min-width: 721px) {
:root { --rail: 64px; }
.rail nav { padding: 8px 10px 16px; }
.rail nav .groupe { font-size: 0; height: 1px; background: var(--hair); margin: 10px 4px; padding: 0; }
.rail .marque { justify-content: center; padding: 16px 0 10px; }
.rail .marque .mot { display: none; }
.rail nav a { justify-content: center; padding: 10px; }
.rail nav a .mot { display: none; }
.rail nav a .badge { position: absolute; top: 4px; right: 6px; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; }
.rail-bascule { display: none; }
}
/* ── La barre pliée (18/09/2026, fonction en avance barre_pliee) ──
Le quotidien en haut, quatre plis dessous, le compte ancré en bas. */
.rail nav .rail-primaire { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); }
.rail nav .pli { display: flex; flex-direction: column; }
.rail nav .pli-tete {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 8px; margin: 1px 0;
background: none; border: 0; border-radius: var(--rayon-s); cursor: pointer; text-align: left;
color: var(--soft); font: 600 13px/1.2 var(--f-sans); transition: color .14s, background .14s;
}
.rail nav .pli-tete:hover { color: var(--ink); background: var(--surface-2); }
.rail nav .pli-tete:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail nav .pli-puce {
width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px;
background: var(--surface-3); border: 1px solid var(--cadre); transition: background .14s, border-color .14s, color .14s;
}
.rail nav .pli-puce svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail nav .pli.ouvert > .pli-tete { color: var(--ink); }
.rail nav .pli.ici > .pli-tete .pli-puce { background: var(--accent-bg); border-color: transparent; color: var(--accent-2); }
.rail nav .pli-tete .mot { flex: 1; min-width: 0; }
.rail nav .pli-nb { font: 500 10.5px/1 var(--f-mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.rail nav .pli.ouvert .pli-nb { opacity: 0; }
.rail nav .pli-chevron { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
opacity: .55; transition: transform .2s ease; }
.rail nav .pli.ouvert .pli-chevron { transform: rotate(90deg); opacity: .9; }
.rail nav .pli-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.rail nav .pli.ouvert > .pli-corps { grid-template-rows: 1fr; }
.rail nav .pli-dedans { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 1px;
margin-left: 20px; padding-left: 9px; border-left: 1px solid var(--hair); }
.rail nav .pli.ouvert > .pli-corps > .pli-dedans { margin-bottom: 6px; }
.rail nav .pli-dedans a { padding-top: 6px; padding-bottom: 6px; font-size: 13px; gap: 10px; }
.rail nav .pli-dedans a svg { width: 16px; height: 16px; }
.rail nav .rail-compte {
margin-top: auto; padding: 8px 8px; gap: 10px; border: 1px solid var(--cadre); background: var(--surface-2);
}
.rail nav .pli + .rail-compte, .rail nav .rail-primaire + .rail-compte { margin-top: auto; }
.rail nav .rail-compte:hover { border-color: var(--cadre-vif); background: var(--surface-3); }
.rail nav .rail-compte.actif { box-shadow: none; border-color: var(--accent); }
.rail nav .rail-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
background: var(--accent-bg); color: var(--accent-2); font: 600 11px/1 var(--f-sans); letter-spacing: .02em; }
.rail nav .rail-compte .mot { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rail nav .rail-compte .mot strong { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.rail nav .rail-compte .mot small { font: 400 10.5px/1.3 var(--f-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .rail nav .pli-corps, .rail nav .pli-chevron { transition: none; } }
/* Bande d'icônes (repliée à la main, ou d'elle-même sur écran moyen) : plus de plis, toutes les icônes. */
.rail-replie .rail nav .pli-tete { display: none; }
.rail-replie .rail nav .pli-corps { grid-template-rows: 1fr; }
.rail-replie .rail nav .pli-dedans { margin: 0; padding: 0; border: 0; gap: 2px; }
.rail-replie .rail nav .pli { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 6px; }
.rail-replie .rail nav .rail-primaire { border: 0; margin: 0; padding: 34px 0 0; } /* la place du bouton qui déroule */
.rail-replie .rail nav .rail-compte { justify-content: center; padding: 6px; border: 0; background: none; }
.rail-replie .rail nav .rail-compte .mot { display: none; }
@media (max-width: 1100px) {
.rail nav .pli-tete { display: none; }
.rail nav .pli-corps { grid-template-rows: 1fr; }
.rail nav .pli-dedans { margin: 0; padding: 0; border: 0; gap: 2px; }
.rail nav .pli { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 6px; }
.rail nav .rail-primaire { border: 0; margin: 0; padding: 0; }
.rail nav .rail-compte { justify-content: center; padding: 6px; border: 0; background: none; }
.rail nav .rail-compte .mot { display: none; }
}
/* ── La barre tient dans l'écran (18/09/2026) : sa densité suit la hauteur de la
fenêtre, pour que la direction, qui a toutes les entrées, n'ait jamais à la
faire défiler. Quatre crans ; sous le dernier, le défilement reste le filet,
sans barre visible. Le téléphone (barre du bas) n'est pas concerné. ── */
.rail { scrollbar-width: none; }
.rail::-webkit-scrollbar { width: 0; height: 0; }
@media (min-width: 721px) and (max-height: 1150px) {
.rail .marque { padding: 14px 20px 8px; }
.rail nav { gap: 1px; padding: 4px 12px 10px; }
.rail nav a { padding: 6px 12px; }
.rail-replie .rail nav a { padding: 7px 10px; }
.rail nav .groupe { padding: 10px 12px 3px; }
.rail .separation { margin: 6px 4px; }
}
@media (min-width: 721px) and (max-height: 980px) {
.rail .marque { padding: 12px 20px 6px; font-size: 16px; }
.rail nav a { padding: 5px 12px; font-size: 13px; gap: 11px; }
.rail-replie .rail nav a { padding: 6px 10px; }
.rail nav .pli-dedans a { padding-top: 4px; padding-bottom: 4px; }
.rail nav .pli-tete { padding-top: 4px; padding-bottom: 4px; }
.rail nav a svg { width: 16px; height: 16px; }
.rail nav .groupe { padding: 8px 12px 2px; font-size: 9.5px; }
.rail .separation { margin: 4px 4px; }
}
@media (min-width: 721px) and (max-height: 840px) {
.rail .marque { padding: 10px 20px 4px; }
.rail nav { gap: 0; padding: 2px 12px 8px; }
.rail nav a { padding: 3px 12px; font-size: 12.5px; }
.rail-replie .rail nav a { padding: 4px 10px; }
.rail nav .pli-dedans a { padding-top: 3px; padding-bottom: 3px; }
.rail nav .pli-tete { padding-top: 3px; padding-bottom: 3px; }
.rail nav .pli-puce { width: 22px; height: 22px; border-radius: 6px; }
.rail nav .rail-primaire { padding-bottom: 5px; margin-bottom: 4px; }
.rail-replie .rail nav .groupe { margin: 5px 4px 4px; }
.rail nav .groupe { font-size: 0; height: 1px; background: var(--hair); margin: 5px 4px 4px; padding: 0; }
.rail nav .groupe:first-child { display: none; }
}
@media (min-width: 721px) and (max-height: 700px) {
.rail .marque { padding: 8px 20px 2px; font-size: 15px; }
.rail .marque .logo { width: 20px; height: 20px; }
.rail nav a { padding: 2px 12px; font-size: 12px; }
.rail-replie .rail nav a { padding: 3px 10px; }
.rail nav a svg { width: 15px; height: 15px; }
.rail nav .groupe { margin: 3px 4px; }
.rail .separation { margin: 3px 4px; }
}
@media (max-width: 720px) {
:root { --rail: 0px; }
.rail-bascule { display: none; }
.rail { top: auto; right: 0; width: auto; height: 58px; border-right: 0; border-top: 1px solid var(--hair); }
.rail .marque { display: none; }
.rail nav { flex-direction: row; justify-content: space-around; padding: 6px 4px; width: 100%; overflow-x: auto; }
.rail nav a { flex-direction: column; gap: 3px; padding: 5px 8px; font-size: 10px; }
.rail .separation { display: none; }
.rail nav .rail-primaire, .rail nav .pli, .rail nav .pli-corps, .rail nav .pli-dedans { display: contents; }
.rail nav .rail-compte { margin: 0; border: 0; background: none; flex-direction: column; }
.rail nav .rail-avatar { width: 20px; height: 20px; font-size: 9px; }
body { padding-bottom: 58px; }
.barre, .sources { padding-left: 16px; padding-right: 16px; }
main { padding: 18px 16px 90px; }
}
/* ============================================================
LES GRAPHIQUES
============================================================ */
.viz { width: 100%; height: auto; display: block; overflow: visible; }
.viz-anneau { width: 190px; height: 190px; flex: none; }
.viz-lab { fill: var(--soft); font: 500 12.5px var(--f-sans); }
.viz-val { fill: var(--ink); font: 600 13px var(--f-sans); font-variant-numeric: tabular-nums; }
.viz-axe { fill: var(--faint); font: 500 10.5px var(--f-mono); letter-spacing: .03em; }
.viz-serie { font: 600 11.5px var(--f-sans); }
.viz-legende { fill: var(--soft); font: 500 11.5px var(--f-sans); }
.viz-centre { fill: var(--ink); font: 600 26px var(--f-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.viz-passage { fill: var(--faint); font: 500 11px var(--f-sans); }
.viz-chute { fill: var(--ambre); font: 600 11px var(--f-sans); }
.viz-grille { stroke: rgba(255,255,255,.07); }
.viz-piste { fill: rgba(255,255,255,.04); }
.viz-tooltip { fill: var(--surface-3); }
.viz .serie, .viz .segment, .viz .barre-viz { transition: opacity .15s; }
.viz:hover .segment:not(:hover), .viz:hover .barre-viz:not(:hover) { opacity: .55; }
.carte-viz { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.carte-viz .viz { flex: 1; min-width: 260px; }
.legende { list-style: none; margin: 0; padding: 0; min-width: 200px; flex: 1; }
.legende li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.legende li:last-child { border-bottom: 0; }
.legende .puce { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.legende .nom { flex: 1; color: var(--ink); }
.legende .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.legende .part { font-size: 12px; color: var(--faint); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.legende-ligne { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; padding: 0; list-style: none; }
.legende-ligne li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--soft); }
.legende-ligne .puce { width: 10px; height: 10px; border-radius: 3px; }
.jauge { display: inline-block; width: 80px; height: 6px; background: var(--surface-3); vertical-align: middle; overflow: hidden; border-radius: 6px; }
.jauge-plein { display: block; height: 100%; border-radius: 6px; }
/* ============================================================
LA DIRECTION — menus, bandes, écosystème
============================================================ */
.selecteur-org { position: relative; }
.selecteur-org .org { font-size: 13px; }
.selecteur-org .fleche { color: var(--faint); font-size: 11px; margin-left: 2px; }
.liste-orgs {
position: absolute; top: 100%; right: 0; z-index: 60; min-width: 270px;
background: var(--surface-2); border: 1px solid var(--cadre-vif); border-radius: var(--rayon);
box-shadow: var(--ombre-haute); max-height: 70vh; overflow-y: auto; margin-top: 8px; padding: 6px;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .12s, transform .12s, visibility .12s;
}
.selecteur-org:hover .liste-orgs, .selecteur-org:focus-within .liste-orgs { opacity: 1; visibility: visible; transform: translateY(0); }
.selecteur-org::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 12px; }
.recherche-org { padding: 6px 6px 8px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.recherche-org input { width: 100%; font-size: 13px; padding: 8px 10px; }
.liste-orgs .rien-trouve { margin: 0; padding: 12px; font-size: 12.5px; color: var(--faint); }
.liste-orgs .entete-liste { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 6px; }
.liste-orgs a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; text-decoration: none; border-radius: var(--rayon-s);
border-top: 0; color: var(--ink); font-size: 13.5px; }
.liste-orgs a:hover { background: var(--surface-3); }
.liste-orgs a.actif { color: var(--accent-2); font-weight: 600; background: var(--accent-bg); }
.liste-orgs a.actif .nom-org::before { content: none; }
.liste-orgs .nom-org { flex: 1; }
.liste-orgs .chiffre-org { font-size: 11.5px; color: var(--faint); }
.liste-orgs .tout { color: var(--accent-2); font-weight: 600; margin-top: 4px; border-top: 1px solid var(--hair); border-radius: 0 0 var(--rayon-s) var(--rayon-s); }
.selecteur-vue .qui { cursor: pointer; }
.selecteur-vue .qui:hover { border-color: var(--cadre-vif); background: var(--surface-2); }
.selecteur-vue .qui .fleche { color: var(--faint); font-size: 11px; }
.selecteur-vue .liste-orgs { min-width: 210px; }
.bande-simulee {
background: var(--ambre-bg); border-top: 1px solid rgba(251,191,36,.25); color: var(--ambre);
font-size: 12.5px; padding: 8px 28px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.bande-simulee strong { color: var(--ink); }
/* Le mode développeur dans le header : mention « dev » + interrupteur */
.bascule-dev { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--cadre);
border-radius: 999px; background: var(--surface); text-decoration: none; }
.bascule-dev:hover { border-color: var(--cadre-vif); background: var(--surface-2); }
.bascule-dev .interrupteur { flex: none; width: 30px; height: 16px; border-radius: 999px; background: var(--surface-3);
border: 1px solid var(--cadre-vif); position: relative; transition: background .15s; }
.bascule-dev .interrupteur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
border-radius: 50%; background: var(--soft); transition: transform .15s; }
.bascule-dev.on { border-color: rgba(129,140,248,.45); }
.bascule-dev.on .role { color: var(--bleu); }
.bascule-dev.on .interrupteur { background: var(--bleu); border-color: var(--bleu); }
.bascule-dev.on .interrupteur::after { transform: translateX(14px); background: #fff; }
.bande-simulee a { color: var(--ink); text-decoration: underline; margin-left: auto; }
.bande-simulee a:hover { color: var(--accent-2); }
.bande-simulee.autre-org { background: var(--accent-bg); border-top-color: rgba(59,130,246,.25); color: var(--accent-2); }
.bande-annonce {
background: linear-gradient(90deg, rgba(59,130,246,.12), rgba(59,130,246,.03) 60%, transparent);
border-top: 1px solid rgba(59,130,246,.18); padding: 6px 28px; min-height: 36px;
display: flex; gap: 14px; align-items: center; color: var(--ink); font-size: 13px;
}
.bande-annonce .etiq { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--accent-2); background: var(--accent-bg); padding: 3px 8px; white-space: nowrap; border-radius: 999px; }
.bande-annonce .corps { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; overflow: hidden; }
.bande-annonce .corps strong { white-space: nowrap; font-weight: 600; }
.bande-annonce .corps .texte { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bande-annonce .actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.bande-annonce .actions a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.bande-annonce .actions a:hover { color: var(--accent-2); }
.bande-annonce .actions form { margin: 0; display: flex; }
.bande-annonce .fermer { background: none; border: 0; padding: 0 2px; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.bande-annonce .fermer:hover { color: var(--ink); background: none; }
@media (max-width: 860px) { .bande-annonce .corps .texte { display: none; } }
.bande-extension {
background: var(--accent-bg); border-top: 1px solid rgba(59,130,246,.18); color: var(--soft);
font-size: 13px; padding: 6px 28px; min-height: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: nowrap;
}
.bande-extension > span:not(.etiq) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bande-extension strong { color: var(--ink); }
.bande-extension a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.bande-extension a:hover { color: var(--accent-2); }
.bande-extension form { margin: 0; }
.bande-extension button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--faint); font: inherit; font-size: 12.5px; text-decoration: underline; }
.bande-extension button:hover { color: var(--ink); background: none; }
.vues { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vues .etiquette { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-left: 8px; }
.repere { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 22px; padding: 16px 20px;
background: var(--surface); border: 1px solid var(--cadre); border-radius: var(--rayon); box-shadow: var(--ombre); }
.repere .valeur { display: block; font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.repere .quoi { font-size: 11px; font-weight: 500; color: var(--faint); margin: 0; }
/* ---------- Analytics : les cibles du plan ---------- */
.eyebrow-mono { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--vert); }
.cibles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cible { background: var(--surface); border: 1px solid var(--cadre); border-radius: var(--rayon); padding: 14px 16px 12px; box-shadow: var(--ombre); }
.cible .valeur { font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cible .quoi { font-family: var(--f-mono); font-size: 11px; color: var(--soft); margin-top: 4px; letter-spacing: .03em; min-height: 32px; }
.jauge-cible { height: 5px; background: var(--surface-3); border-radius: 5px; margin-top: 8px; overflow: hidden; }
.jauge-cible i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.cible.atteinte .jauge-cible i { background: var(--vert); }
.cible .objectif { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); margin-top: 6px; }
.cible.atteinte .objectif { color: var(--vert); }
/* ---------- Installation ---------- */
.progression { height: 6px; background: var(--surface-3); overflow: hidden; border-radius: 6px; }
.progression-plein { height: 100%; background: var(--accent); transition: width .4s ease; border-radius: 6px; }
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: pas; }
.etapes li { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--cadre);
padding: 16px 18px; margin-bottom: 12px; position: relative; border-radius: var(--rayon); box-shadow: var(--ombre); }
.etapes li::before { content: none; }
.etapes li.faite { border-color: rgba(52,211,153,.3); }
.marque-etape { width: 30px; height: 30px; flex: none; line-height: 28px; text-align: center; font-size: 13px; font-weight: 600;
border: 1px solid var(--cadre-vif); color: var(--soft); background: var(--surface-2); border-radius: 50%; }
.faite .marque-etape { border-color: var(--vert); color: var(--vert); background: var(--vert-bg); }
.corps-etape { flex: 1; min-width: 0; }
.corps-etape h2 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.etat-etape { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.faite .etat-etape { color: var(--vert); }
/* ---------- Contrats ---------- */
.etapes-contrat { list-style: none; counter-reset: etape; margin: 0; padding: 0; }
.etapes-contrat li { counter-increment: etape; position: relative; padding: 0 0 20px 42px; border-left: 1px solid var(--cadre); margin-left: 13px; }
.etapes-contrat li:last-child { border-left-color: transparent; padding-bottom: 0; }
.etapes-contrat li::before {
content: counter(etape); position: absolute; left: -14px; top: 0; width: 27px; height: 27px; display: grid; place-items: center;
background: var(--surface-2); border: 1px solid var(--cadre-vif); border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--soft);
}
.etapes-contrat li strong { display: block; margin-bottom: 3px; }
.etapes-contrat li .aide { margin-bottom: 10px; }
.etapes-contrat form { margin-top: 8px; }
.etapes-contrat textarea { margin-bottom: 8px; }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .formulaire .deux { grid-template-columns: 1fr; } }
/* Le sous-libellé d'un champ de l'écran Contrat : sous le libellé, pas à sa suite. */
.formulaire label .sub { display: block; font-weight: 400; color: var(--faint); font-size: 12px; line-height: 1.45; margin: 2px 0 6px; }
.avec-unite { display: flex; align-items: stretch; }
.avec-unite input { flex: 1; border-right: 0; border-radius: var(--rayon-s) 0 0 var(--rayon-s); }
.avec-unite .unite { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--cadre); border-left: 0;
background: var(--surface-2); color: var(--faint); font-weight: 600; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; }
/* ---------- Argent ---------- */
.grille-vente { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grille-vente label { margin-top: 0; }
.grille-vente input, .grille-vente select { width: 100%; }
.repli { margin-top: 12px; padding: 16px; border: 1px solid rgba(59,130,246,.35); background: var(--accent-bg); border-radius: var(--rayon-s); }
/* ---------- Rapport ---------- */
.rapport-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; padding: 0 0 16px; }
.rapport-periode { color: var(--accent-2); font-size: 13px; margin: 6px 0 0; font-weight: 600; }
.rapport-periode .aide { margin-left: 9px; display: inline; }
.rapport-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.landing-periode { display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.landing-dates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.landing-dates label { font-size: 12px; color: var(--soft); margin: 0; }
.landing-dates input[type="date"] { width: auto; padding: 6px 10px; font-size: 12.5px; }
.landing-dates button { padding: 6px 12px; }
.ecartes-optin { margin: 8px 0 0; }
.ecartes-optin > summary { font-size: 12.5px; color: var(--soft); cursor: pointer; padding: 6px 0; }
.ecartes-optin > summary:hover { color: var(--ink); }
.ecartes-optin .tableau { margin-top: 6px; }
.rapport-choix { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rapport-choix label { margin-top: 0; }
.rapport-pied { margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--hair); }
.constats { display: grid; gap: 10px; }
.constat { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--cadre); background: var(--surface);
padding: 13px 16px; border-radius: var(--rayon); box-shadow: var(--ombre); position: relative; overflow: hidden; }
.constat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--faint); }
.constat.critique::before { background: var(--rouge); }
.constat.attention::before { background: var(--ambre); }
.constat.bon::before { background: var(--vert); }
.constat .etiquette { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; min-width: 92px; padding-top: 3px; }
.constat.critique .etiquette { color: var(--rouge); }
.constat.attention .etiquette { color: var(--ambre); }
.constat.bon .etiquette { color: var(--vert); }
.constat .corps { flex: 1; }
.constat .detail { color: var(--soft); font-size: 13.5px; margin-top: 2px; }
.constat .action { color: var(--accent-2); font-size: 13px; margin-top: 5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
.impression-seule { display: none; }
/* ---------- Le Scheduler (07/09/2026) ---------- */
.sch-evt-tete { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.sch-inactif { opacity: .75; }
.sch-lien { font-family: var(--f-mono); font-size: 12px; color: var(--soft); margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.sch-lien a { text-decoration: none; }
.sch-lien a:hover { color: var(--accent-2); }
.sch-lien button { font-size: 11px; padding: 1px 7px; }
.sch-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sch-chiffres .l { display: block; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.sch-chiffres .n { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sch-deux { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: start; }
.sch-branche { list-style: none; margin: 0; padding: 0; }
.sch-branche li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.sch-branche li:last-child { border-bottom: 0; }
.sch-branche li b { font-family: var(--f-mono); font-size: 11px; color: var(--accent-2); min-width: 90px; font-weight: 600; padding-top: 2px; }
.sch-branche li span { color: var(--soft); }
.sch-nuancier { display: flex; gap: 6px; margin: 4px 0; }
.sch-nuancier span { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--cadre-vif); }
.sch-editeur { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }
.sch-sous-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 2px; }
.sch-sous-nav a { text-decoration: none; color: var(--soft); font-weight: 500; padding: 8px 12px; border-radius: var(--rayon-s); font-size: 13.5px; }
.sch-sous-nav a:hover { color: var(--ink); background: var(--surface-2); }
.sch-plages { border: 1px solid var(--cadre); border-radius: var(--rayon-s); overflow: hidden; }
.sch-plage { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--hair); }
.sch-plage:last-child { border-bottom: 0; }
.sch-plage .checks label { margin: 0; }
.sch-heures { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sch-heures input[type=text] { width: 72px; font-family: var(--f-mono); font-size: 12.5px; padding: 5px 8px; text-align: center; }
.sch-heures span { color: var(--faint); font-size: 12px; }
.sch-question { border: 1px solid var(--cadre); border-radius: var(--rayon-s); padding: 4px 16px 14px; margin-top: 12px; background: rgba(255,255,255,.015); }
.sch-question-num { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-2); margin-top: 10px; }
.sch-question textarea { min-height: 60px; }
.sch-code { font-family: var(--f-mono); font-size: 12px; background: var(--paper); border: 1px solid var(--cadre); border-radius: var(--rayon-s); padding: 10px 12px; overflow-x: auto; margin: 8px 0; color: var(--soft); }
.sch-couleur { display: flex; gap: 8px; align-items: center; }
.sch-couleur span { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cadre-vif); flex: none; }
.sch-couleur input { font-family: var(--f-mono); }
@media (max-width: 900px) { .sch-editeur, .sch-deux, .sch-evt-tete { grid-template-columns: 1fr; } .sch-sous-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
@media print {
:root {
--paper: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F5F2;
--ink: #101114; --soft: #4A4B50; --faint: #74757A;
--hair: #DEDEDA; --cadre: #C6C6C1; --cadre-vif: #9A9A95; --line: #101114;
--accent: #14489E; --on-accent: #FFFFFF;
--vert: #16703E; --rouge: #A32018; --ambre: #8A5605;
--encre: #101114; /* le fond de la couverture */
}
@page { size: A4; margin: 15mm 14mm; }
/* La couverture est un fond plein bord à bord : c'est la seule page sans
marges. Une marge négative ou une ombre portée ne tiennent pas ici, la
première élargit tout le document, la seconde n'est pas imprimée. */
@page :first { margin: 0; }
/* La page déclare `color-scheme: dark` : sans ce retour au clair, le fond
de page reste sombre à l'impression et on sort une feuille noire. Le
`print-color-adjust` est ce qui fait peindre les fonds même quand la
case « Graphiques d'arrière-plan » du navigateur est décochée. */
html, body {
background: #fff !important; background-image: none !important;
color-scheme: light;
/* La place laissée au rail à l'écran : sans ça, tout le document est
décalé d'un centimètre et la couverture ne touche pas le bord gauche. */
padding: 0 !important; margin: 0 !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
body { font: 10.5pt/1.5 var(--f-sans); color: var(--ink); }
body::before { display: none !important; }
.rail, header, .ecran-seul { display: none !important; }
main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.impression-seule { display: block; }
/* Les aplats des graphiques sont figés dans le SVG, et la couverture est un
fond plein : sans ça, le navigateur imprime des formes blanches. */
svg, .jauge, .jauge-plein, .puce, .pastille, .constat,
.couverture, .compteurs > div, th, td, tr {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* ── La couverture ──────────────────────────────────────────────── */
.couverture {
background: var(--encre); color: #F4F3EF;
/* Le fond va jusqu'au bord de la feuille par une ombre portée, pas par
des marges négatives : une marge négative élargit le document entier,
et toutes les pages suivantes se retrouvent coupées à droite. */
padding: 24mm 20mm 18mm; min-height: 100vh; break-after: page;
display: flex; flex-direction: column; justify-content: space-between;
}
.couv-haut { display: flex; align-items: center; gap: 12px; }
.couv-logo { width: 34px; height: 34px; }
.couv-marque {
font-weight: 800; font-size: 20pt; letter-spacing: -.04em; color: #F4F3EF;
}
/* Le bloc de titre se pose en bas de la couverture, au-dessus du pied :
un titre flottant au milieu d'une page vide fait maquette inachevée. */
.couv-corps { margin-top: auto; padding-bottom: 14mm; }
.couv-sur {
font-family: var(--f-mono); font-size: 9pt; text-transform: uppercase;
letter-spacing: .3em; color: #2E7BFF; margin: 0 0 14px;
}
.couv-titre {
font-size: 40pt; line-height: 1.02; font-weight: 800; letter-spacing: -.035em;
margin: 0; color: #F4F3EF;
}
.couv-periode {
font-size: 17pt; font-weight: 400; color: #B9B9B1; margin: 10px 0 0;
}
.couv-periode::first-letter { text-transform: uppercase; }
.couv-filet { height: 3px; background: #2E7BFF; width: 74px; margin: 26px 0 24px; }
.couv-chiffres { display: flex; gap: 34px; flex-wrap: wrap; }
.couv-chiffres strong {
display: block; font-size: 24pt; font-weight: 800; letter-spacing: -.03em;
color: #F4F3EF; font-variant-numeric: tabular-nums;
}
.couv-chiffres span {
font-family: var(--f-mono); font-size: 7.5pt; text-transform: uppercase;
letter-spacing: .16em; color: #8E8F94;
}
.couv-pied {
display: flex; justify-content: space-between; gap: 20px;
font-family: var(--f-mono); font-size: 8pt; color: #8E8F94;
border-top: 1px solid #2A2B30; padding-top: 12px;
}
/* ── Le sommaire ────────────────────────────────────────────────── */
.sommaire { break-after: page; padding-top: 8mm; }
.sommaire ol { list-style: none; counter-reset: som; margin: 0; padding: 0; }
.sommaire li {
counter-increment: som; display: flex; align-items: baseline; gap: 14px;
padding: 13px 0; border-bottom: 1px solid var(--hair);
}
.sommaire li::before {
content: counter(som, decimal-leading-zero);
font-family: var(--f-mono); font-size: 9pt; font-weight: 700;
color: var(--accent); min-width: 26px;
}
.sommaire li span { font-size: 13pt; font-weight: 700; letter-spacing: -.02em; flex: 1; }
.sommaire li em {
font-style: normal; font-family: var(--f-mono); font-size: 8pt;
color: var(--faint); text-align: right; max-width: 62mm;
}
.sommaire-note {
margin-top: 22px; font-size: 9pt; color: var(--soft);
border-left: 3px solid var(--accent); padding-left: 12px;
}
/* ── Les chapitres ──────────────────────────────────────────────── */
/* Un h2 ouvre une page et porte son numéro : c'est ce qui fait qu'on
retrouve « la landing » en feuilletant, sans table des matières. */
body { counter-reset: chapitre; }
h2.saut {
break-before: page; counter-increment: chapitre;
font-family: var(--f-sans); font-size: 22pt; font-weight: 800;
letter-spacing: -.035em; text-transform: none; color: var(--ink);
margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--encre);
}
h2.saut::before {
content: counter(chapitre, decimal-leading-zero);
display: block; font-family: var(--f-mono); font-size: 8.5pt; font-weight: 700;
letter-spacing: .3em; color: var(--accent); margin-bottom: 7px;
}
h2 { break-after: avoid; }
h2:not(.saut), h3.chapitre {
font-family: var(--f-mono); font-size: 9pt; letter-spacing: .18em;
text-transform: uppercase; color: var(--soft); font-weight: 700;
margin: 22px 0 9px;
}
h3.chapitre { break-after: avoid; }
/* ── Le corps ───────────────────────────────────────────────────── */
.carte {
border: 1px solid var(--hair); box-shadow: none !important;
padding: 14px 16px; break-inside: avoid;
}
.carte::before { display: none !important; }
.colonnes { gap: 12px; }
/* Les compteurs : une grille qui remplit sa dernière ligne. En colonnes
fixes, un bloc de neuf chiffres laisse trois cases vides au milieu du
document — on préfère des cellules qui s'étirent. */
.carte.compteurs { border: 0; padding: 0; }
.compteurs { display: flex; flex-wrap: wrap; gap: 0; }
.compteurs > div {
flex: 1 1 40mm; border: 1px solid var(--hair); margin: -1px 0 0 -1px;
padding: 10px 12px; min-width: 0; break-inside: avoid;
}
.chiffre {
text-shadow: none !important; font-size: 17pt; color: var(--accent);
}
.chiffre + .aide { font-size: 7pt; letter-spacing: .12em; color: var(--soft); }
/* Le CRM écrit ses notes en mono, comme un terminal. Un document remis à
un client se lit en typographie de texte : la mono reste aux étiquettes
et aux en-têtes de colonnes. Même chose pour les décorations d'écran,
le « // » des titres et le « > » des lignes vides. */
.aide { font-family: var(--f-sans); font-size: 8.5pt; color: var(--soft); }
h2::before, h2:not(.saut)::before, h3::before, .vide::before { content: none !important; }
h2.saut::before { content: counter(chapitre, decimal-leading-zero) !important; }
body { background-image: none !important; }
.vide { font-family: var(--f-sans); font-size: 9pt; padding: 8px 2px; }
/* Un chemin d'URL cité dans une phrase : la mono suffit à le distinguer,
la pastille bleue du CRM ferait tache dans un document. */
code { background: none; border: 0; color: inherit; padding: 0; font-size: 9pt; }
/* Une courbe ne prend jamais une demi-page : elle illustre, elle ne
remplit pas. L'entonnoir garde sa hauteur, elle vient du nombre
d'étapes : le rétrécir rendrait ses libellés illisibles. */
.viz-courbe { max-height: 58mm; }
.viz-anneau { width: 44mm; height: 44mm; }
.carte-viz { gap: 14px; }
/* Les tableaux : l'en-tête se répète en haut de chaque page, et une ligne
ne se coupe jamais en deux. Sans ça, un tableau d'équipe à cheval sur
deux feuilles devient illisible. */
.tableau { overflow: visible !important; border: 1px solid var(--cadre); break-inside: auto; }
table { font-size: 8.5pt; width: 100%; }
thead { display: table-header-group; }
tr { break-inside: avoid; }
th {
background: var(--surface-2) !important; color: var(--soft) !important;
font-family: var(--f-mono); font-size: 7pt; letter-spacing: .1em;
border-bottom: 1px solid var(--cadre);
}
td { border-bottom: 1px solid var(--hair); }
tbody tr:nth-child(even) td { background: #FAFAF8; }
th.optionnel, td.optionnel { display: table-cell !important; }
.constat {
background: #FFF; border: 1px solid var(--hair); border-left-width: 4px;
padding: 10px 13px; break-inside: avoid;
}
.constat .etiquette { font-size: 7pt; min-width: 80px; }
.constat .detail { font-size: 9pt; }
.constat .action { font-size: 9pt; }
a { text-decoration: none; color: inherit !important; }
.rapport-pied {
margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--cadre);
font-size: 8pt; break-inside: avoid;
}
}
/* ── Les annonces (06/09/2026) ─────────────────────────────────────────── */
.annonce-ligne { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hair); }
.annonce-ligne:first-of-type { border-top: 0; }
.annonce-corps { flex: 1 1 auto; min-width: 0; }
.annonce-tete { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.annonce-action { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.annonce-coche { cursor: pointer; }
.annonce-coche input[type=checkbox] { margin-top: 4px; flex: 0 0 auto; }
.version-publier { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--hair); }
.version-publier label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--soft); }
/* La page des nouveautés (07/09/2026) : une carte par version */
.version-carte .version-tete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.version-carte.prochaine { border-color: var(--ambre); }
.pastille-douce { background: var(--hair); color: var(--soft); }
/* ---------- L'agenda des calls (05/09/2026), façon iClosed ---------- */
.agenda-onglets { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.onglets { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--cadre); }
.onglets a { text-decoration: none; color: var(--soft); font-weight: 500; font-size: 13.5px; padding: 8px 12px 10px;
border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 7px; align-items: center; }
.onglets a:hover { color: var(--ink); }
.onglets a.actif { color: var(--accent-2); border-bottom-color: var(--accent); font-weight: 600; }
.onglets a .n { font-family: var(--f-mono); font-size: 11px; padding: 1px 7px; border-radius: 999px;
background: var(--surface-3); color: var(--soft); }
.onglets a.actif .n { background: var(--accent-bg); color: var(--accent-2); }
.onglets .a-poser { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--ambre); background: var(--ambre-bg);
padding: 3px 9px; border-radius: 999px; }
.agenda-compteurs { margin-bottom: 14px; }
.agenda-jour { padding: 0; overflow: hidden; margin-bottom: 12px; }
.agenda-jour-tete { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--surface-2);
border-bottom: 1px solid var(--cadre); font-size: 13.5px; }
.agenda-jour-tete strong { font-weight: 600; }
.agenda-jour-tete span { color: var(--soft); }
.agenda-jour-tete .compte { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.agenda-ligne { border-bottom: 1px solid var(--hair); }
.agenda-ligne:last-child { border-bottom: 0; }
.agenda-tete-ligne { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto auto 24px; gap: 14px; align-items: center;
width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 13px 16px 13px 14px;
cursor: pointer; border-left: 3px solid var(--cadre-vif); border-radius: 0; }
.agenda-tete-ligne:hover { background: var(--surface-2); }
.agenda-heure { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; }
.agenda-qui { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.agenda-qui .avec { color: var(--faint); font-weight: 400; margin: 0 2px; }
.agenda-type { color: var(--soft); margin-left: 10px; font-size: 13px; }
.agenda-type i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); margin: 0 8px 2px 0; }
.agenda-etat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.prepa-call { display: inline-flex; gap: 5px; white-space: nowrap; }
.agenda-etat .etat { font-size: 12.5px; font-weight: 500; color: var(--soft); white-space: nowrap; }
.agenda-etat .etat.ok { color: var(--vert); }
.agenda-etat .etat.reprog { color: var(--soft); }
.agenda-etat .etat.annule { color: var(--rouge); }
.agenda-issue { display: flex; justify-content: flex-end; min-width: 120px; }
.agenda-issue .poser { font-size: 12.5px; padding: 5px 11px; border-color: var(--cadre-vif); white-space: nowrap; }
.agenda-tete-ligne:hover .poser { border-color: var(--accent); color: var(--accent-2); }
.agenda-chevron { color: var(--faint); font-size: 16px; line-height: 1; transition: transform .15s; text-align: center; }
.agenda-tete-ligne[aria-expanded="true"] .agenda-chevron { transform: rotate(180deg); }
.agenda-detail { padding: 4px 18px 16px 31px; background: rgba(255,255,255,.015); border-top: 1px dashed var(--hair); }
.agenda-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.agenda-ligne.annule .agenda-heure, .agenda-ligne.annule .agenda-qui { text-decoration: line-through; color: var(--faint); }
.agenda-ligne.annule .agenda-qui strong { color: var(--faint); }
/* Le liseré à gauche : l'état d'un coup d'œil, comme les couleurs d'iClosed. */
.agenda-ligne.t-prevu .agenda-tete-ligne { border-left-color: var(--vert); }
.agenda-ligne.t-signe .agenda-tete-ligne { border-left-color: var(--accent); }
.agenda-ligne.t-suivi .agenda-tete-ligne { border-left-color: var(--violet); }
.agenda-ligne.t-noshow .agenda-tete-ligne { border-left-color: var(--rouge); }
.agenda-ligne.t-perdu .agenda-tete-ligne { border-left-color: var(--faint); }
.agenda-ligne.t-a_marquer .agenda-tete-ligne { border-left-color: var(--ambre); }
.agenda-ligne.t-annule .agenda-tete-ligne { border-left-color: var(--cadre); }
.pastille.o-signe { background: var(--vert-bg); color: var(--vert); }
.pastille.o-suivi { background: rgba(192,132,252,.14); color: var(--violet); }
.pastille.o-noshow { background: var(--rouge-bg); color: var(--rouge); }
.pastille.o-reporte { background: var(--ambre-bg); color: var(--ambre); }
.pastille.o-perdu, .pastille.o-pas_qualifie { background: rgba(255,255,255,.04); color: var(--faint); }
.agenda-pages { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 8px; flex-wrap: wrap; }
.agenda-pages .pages { display: flex; gap: 4px; align-items: center; }
.agenda-pages .pages .bouton { min-width: 34px; justify-content: center; padding: 5px 9px; }
@media (max-width: 860px) {
.agenda-tete-ligne { grid-template-columns: 90px minmax(0,1fr) 24px; }
.agenda-etat, .agenda-issue { grid-column: 2; justify-content: flex-start; }
.agenda-qui { white-space: normal; }
}
/* ---------- Le funnel (05/09/2026) : la carte du tunnel ---------- */
/* ── Le tunnel (06/09/2026) : les entrées en haut, la chaîne en colonne ── */
/* Pas de bloc de fond : les cartes se tiennent seules, centrées dans la page (06/09/2026). */
.tn-cadre { padding: 6px 0 10px; }
.tn { display: flex; flex-direction: column; max-width: 880px; margin: 0 auto; }
.tn-entrees { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; }
.tn-fanin { height: 40px; }
.tn-fanin svg { width: 100%; height: 100%; }
.tn-fanin path { fill: none; stroke: var(--cadre-vif); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tn-chaine { display: flex; flex-direction: column; }
.tn-fanout, .tn-fanin { height: 40px; }
.tn-fanout svg, .tn-fanin svg { width: 100%; height: 100%; }
.tn-fanout path, .tn-fanin path { fill: none; stroke: var(--cadre-vif); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tn-branches { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 14px; align-items: start; }
.tn-branche { display: flex; flex-direction: column; padding: 12px; border: 1px dashed var(--cadre); border-radius: var(--rayon); background: rgba(255,255,255,.015); }
.tn-branche-titre { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2); margin: 0 0 10px; }
.tn-branches .tn-etape { min-height: 58px; padding: 9px 12px; gap: 10px; }
.tn-branches .tn-nom { font-size: 13.5px; }
.tn-branches .tn-mesure strong { font-size: 17px; }
.tn-branches .tn-mesure span { display: none; }
.tn-branches .tn-plus { display: none; }
.tn-etape { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px;
background: var(--surface-2); border: 1px solid var(--cadre); border-radius: var(--rayon); cursor: pointer;
transition: border-color .15s, background .15s; }
.tn-etape:hover { border-color: var(--cadre-vif); background: var(--surface-3); }
.tn-etape.ouverte { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.tn-entrees .tn-etape { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; text-align: center; }
.tn-entrees .tn-picto { margin: 0 auto; }
.tn-entrees .tn-mesure { justify-content: center; padding-top: 6px; }
.tn-mesure.vide strong { color: var(--faint); font-weight: 600; font-size: 13px; }
.tn-mesure.vide span { opacity: .7; }
.tn-entrees .tn-plus { position: static; display: block; text-align: center; }
.tn-etape.t-canal { border-color: rgba(59,130,246,.35); }
.tn-etape.t-call { border-color: rgba(192,132,252,.4); }
.tn-etape.t-paiement, .tn-etape.t-contrat, .tn-etape.t-livraison { border-color: rgba(52,211,153,.4); }
.tn-picto { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-bg); color: var(--accent-2);
display: flex; align-items: center; justify-content: center; font-size: 17px; }
.t-call .tn-picto { background: rgba(192,132,252,.14); color: var(--violet); }
.t-paiement .tn-picto, .t-contrat .tn-picto, .t-livraison .tn-picto { background: var(--vert-bg); color: var(--vert); }
.tn-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tn-tete { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.tn-entrees .tn-tete { justify-content: center; }
.tn-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--ambre); color: #1a1a1a; font: 600 11px/18px var(--f-sans); padding: 0 6px; letter-spacing: 0; }
.tn-nom { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
.tn-lien { font-size: 12px; color: var(--soft); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-lien:hover { color: var(--accent-2); }
.tn-lien.vide { color: var(--faint); font-style: italic; }
.tn-mesure { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; padding-left: 12px; border-left: 1px solid var(--hair); }
.tn-entrees .tn-mesure { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
.tn-mesure strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tn-mesure span { font-size: 11.5px; color: var(--faint); }
.tn-plus { flex: 0 0 auto; color: var(--faint); font-size: 11.5px; }
.tn-etape:hover .tn-plus { color: var(--accent-2); }
.tn-lien-etape { position: relative; height: 30px; display: flex; align-items: center; padding-left: 31px; gap: 10px; }
.tn-lien-etape .trait { position: absolute; left: 31px; top: 0; bottom: 0; border-left: 1.5px solid var(--cadre-vif); }
.tn-lien-etape .trait::after { content: ""; position: absolute; left: -4.75px; bottom: -1px; border: 4px solid transparent; border-top: 6px solid var(--cadre-vif); }
.tn-lien-etape .taux { margin-left: 14px; font-family: var(--f-mono); font-size: 10.5px; color: var(--soft); background: var(--surface); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--hair); }
.tn-detail { margin-top: 12px; }
.tn-sous { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 8px; }
.tn-com { padding: 8px 10px; border: 1px solid var(--hair); border-radius: var(--rayon-s); margin-bottom: 6px; font-size: 13.5px; }
.tn-com.regle { opacity: .55; }
.tn-com-tete { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soft); margin-bottom: 3px; }
.tn-com-tete form { margin-left: auto; }
.tn-com-tete .discret { padding: 1px 7px; font-size: 11.5px; }
@media (max-width: 720px) { .tn-entrees { grid-template-columns: 1fr 1fr; } .tn-fanin, .tn-fanout { display: none; } .tn-branches { grid-template-columns: 1fr; } .tn-entrees { margin-bottom: 12px; } .tn-mesure strong { font-size: 17px; } }
.tableau.synthese td, .tableau.synthese th { white-space: nowrap; }
.tableau.synthese table { min-width: 1180px; }
/* ── Les prises (07/09/2026) ── */
.prises { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.prise { margin: 0; }
.prise-tete { display: flex; align-items: flex-start; gap: 12px; }
.prise-tete > div:nth-child(2) { flex: 1; }
.prise-point { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 4px rgba(255,255,255,.04); }
.prise.etat-ok .prise-point { background: var(--vert); box-shadow: 0 0 0 4px var(--vert-bg); }
.prise.etat-partiel .prise-point { background: var(--ambre); box-shadow: 0 0 0 4px var(--ambre-bg); }
.prise-etat { text-align: right; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.prise-etat .aide { display: block; font-weight: 400; margin: 2px 0 0; }
.prise.etat-ok .prise-etat { color: var(--vert); }
.prise.etat-partiel .prise-etat { color: var(--ambre); }
.prise.etat-absent .prise-etat { color: var(--faint); }
/* ── L'ouverture par un prompt (07/09/2026) : la page du client ── */
.connexion.ouverture { max-width: 760px; margin: 6vh auto; }
.connexion.ouverture h1 { font-size: 24px; margin: 6px 0 4px; }
.connexion.ouverture .carte { text-align: left; }
.connexion.ouverture textarea { width: 100%; }
.connexion.ouverture pre { font-size: 12.5px; line-height: 1.45; }
/* ── La carte du tunnel (07/09/2026) : un tableau blanc dans le CRM sombre ── */
.tc { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 560px; border: 1px solid var(--cadre); border-radius: var(--rayon); overflow: hidden; background: #F4F5F7; color: #1B1F27; }
.tc-outils { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #FFFFFF; border-bottom: 1px solid #E3E6EB; }
.tc-outils .discret { color: #4B5563; background: #F4F5F7; border: 1px solid #E3E6EB; }
.tc-outils .discret:hover { background: #E9ECF1; color: #1B1F27; }
.tc-outils .aide { color: #6B7280; margin: 0; }
.tc-ajout { display: flex; gap: 6px; margin: 0; }
.tc-ajout input, .tc-ajout select { background: #FFFFFF; color: #1B1F27; border: 1px solid #D8DCE3; padding: 6px 9px; border-radius: 8px; font-size: 13px; width: auto; }
.tc-ajout input { width: 190px; }
.tc-sep { flex: 1; }
.tc-etat { min-width: 160px; text-align: right; }
.tc-etat.erreur { color: #B91C1C; }
.tc-scene { display: grid; grid-template-columns: 1fr 300px; flex: 1; min-height: 0; }
.tc-tableau { position: relative; overflow: hidden; cursor: grab; touch-action: none;
background-color: #F4F5F7; background-image: radial-gradient(#D5D9E0 1px, transparent 1.2px); background-size: 22px 22px; }
.tc-tableau.main { cursor: grabbing; }
.tc-monde { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tc-fleches { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tc-fleche { fill: none; stroke: #B5BCC8; stroke-width: 1.6; }
.tc-fleche.vive { stroke: #3B82F6; stroke-width: 2.2; }
.tc-noeud { position: absolute; width: 230px; min-height: 84px; box-sizing: border-box; padding: 9px 11px 9px 13px; background: #FFFFFF; border: 1px solid #E3E6EB; border-left: 4px solid #9AA3B2; border-radius: 12px;
box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06); cursor: grab; user-select: none; transition: box-shadow .12s, border-color .12s; }
.tc-noeud:hover { box-shadow: 0 2px 4px rgba(16,24,40,.08), 0 10px 26px rgba(16,24,40,.12); }
.tc-noeud.choisie { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 10px 26px rgba(16,24,40,.12); }
.tc-noeud.auto { border-style: dashed; border-left-style: solid; }
.tc-noeud.t-canal { border-left-color: #3B82F6; }
.tc-noeud.t-page, .tc-noeud.t-video, .tc-noeud.t-formulaire { border-left-color: #6366F1; }
.tc-noeud.t-calendrier, .tc-noeud.t-call, .tc-noeud.t-issue { border-left-color: #A855F7; }
.tc-noeud.t-paiement, .tc-noeud.t-contrat, .tc-noeud.t-livraison, .tc-noeud.t-onboarding { border-left-color: #10B981; }
.tc-noeud.t-nurturing, .tc-noeud.t-bot { border-left-color: #F59E0B; }
.tc-noeud.t-cerveau, .tc-noeud.t-contenu { border-left-color: #EC4899; }
.tc-n-tete { display: flex; align-items: center; gap: 6px; font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.tc-n-picto { font-size: 12px; }
.tc-n-nom { font-weight: 600; font-size: 13.5px; line-height: 1.25; margin-top: 3px; color: #1B1F27; }
.tc-n-lien { display: block; font-size: 11.5px; color: #3B82F6; margin-top: 3px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-n-lien.vide { color: #9AA3B2; font-style: italic; }
.tc-n-chiffre { margin-top: 5px; display: flex; align-items: baseline; gap: 6px; }
.tc-n-chiffre strong { font-size: 16px; font-variant-numeric: tabular-nums; color: #1B1F27; }
.tc-n-chiffre span { font-size: 11px; color: #6B7280; }
.tc-n-chiffre.vide strong { font-size: 12px; color: #9AA3B2; font-weight: 600; }
.tc-cote { background: #FFFFFF; border-left: 1px solid #E3E6EB; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.tc-cote label { color: #4B5563; font-size: 12px; margin-top: 8px; }
.tc-cote input, .tc-cote select, .tc-cote textarea { background: #FFFFFF; color: #1B1F27; border: 1px solid #D8DCE3; width: 100%; box-sizing: border-box; }
.tc-cote input:focus, .tc-cote select:focus, .tc-cote textarea:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.tc-cote .discret { color: #4B5563; background: #F4F5F7; border: 1px solid #E3E6EB; }
.tc-cote .aide { color: #6B7280; }
.tc-fiche { border: 1px solid #E3E6EB; border-radius: 12px; padding: 12px; background: #FAFBFC; }
.tc-fiche-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #1B1F27; }
.tc-modele-liste { list-style: none; margin: 0; padding: 0; }
.tc-m { display: grid; grid-template-columns: 18px 1fr auto 26px; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid #EEF0F3; font-size: 12.5px; color: #1B1F27; }
.tc-m.present { color: #9AA3B2; }
.tc-m-branche { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; color: #9AA3B2; text-transform: uppercase; letter-spacing: .04em; }
.tc-m-plus { border: 1px solid #D8DCE3; background: #FFFFFF; color: #3B82F6; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.tc-m-plus:hover { background: #EFF6FF; border-color: #3B82F6; }
.tc-m-ok { color: #10B981; text-align: center; }
@media (max-width: 900px) { .tc-scene { grid-template-columns: 1fr; } .tc-cote { border-left: 0; border-top: 1px solid #E3E6EB; max-height: 40vh; } }
/* ---------- Scheduler · l'éditeur d'événement, sur l'écran d'iClosed (07/09/2026, refait sur ses captures le 09/09/2026) ---------- */
.ic-tete { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 0 18px; max-width: 1180px; }
.ic-titre { display: flex; align-items: center; gap: 12px; justify-content: center; }
.ic-titre h1 { margin: 0; }
.ic-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-2); background: var(--accent-bg); border: 1px solid rgba(59,130,246,.35); border-radius: var(--rayon-s); padding: 5px 10px; }
.ic-type svg, .ic-svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-actions { gap: 6px; }
.ic-actions .bouton, .ic-actions summary.bouton { display: inline-flex; align-items: center; gap: 7px; }
.ic-icone { padding: 7px 9px; }
.ic-icone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-menu { position: relative; }
.ic-menu summary { list-style: none; cursor: pointer; }
.ic-menu summary::-webkit-details-marker { display: none; }
.ic-chevron { font-size: 14px; line-height: 0; margin-top: -4px; }
.ic-menu-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 280px; background: var(--surface); border: 1px solid var(--cadre-vif); border-radius: var(--rayon); box-shadow: var(--ombre-haute); padding: 10px; display: grid; gap: 8px; }
.ic-menu-liste .danger { width: 100%; }
.ic-bilan { max-width: 1180px; }
.ic-editeur { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1180px; }
.ic-editeur { --ic-haut: 78px; } /* la hauteur de l'en-tête et de ses bandeaux, mesurée par la page */
.ic-gauche { position: sticky; top: calc(var(--ic-haut) + 16px); display: grid; gap: 14px; }
.ic-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; margin: 0; }
.ic-nav a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 500; padding: 10px 12px; border-radius: var(--rayon-s); font-size: 14px; }
.ic-nav a svg, .ic-carte-tete > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-nav a:hover { background: var(--surface-2); }
.ic-nav a.actif { color: var(--accent-2); background: var(--accent-bg); font-weight: 600; }
.ic-nav-titre { font-size: 14px; color: var(--soft); font-weight: 500; padding: 14px 12px 6px; }
/* la carte « Créneaux disponibles » sous la barre */
.ic-creneaux { margin: 0; padding: 16px 18px; background: linear-gradient(180deg, rgba(59,130,246,.08), transparent 70%), var(--surface); }
.ic-creneaux-titre { font-size: 13.5px; color: var(--ink); line-height: 1.45; margin-bottom: 10px; }
.ic-creneaux-jour { margin: 0; }
.ic-creneaux-jour select { width: auto; max-width: 100%; font-weight: 600; font-size: 14px; background: transparent; border-color: transparent; padding-left: 0; }
.ic-creneaux-n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.ic-creneaux-liste { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ic-creneaux-liste span { font-family: var(--f-mono); font-size: 11.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--cadre); color: var(--soft); }
.ic-creneaux-liste span.plus { color: var(--faint); border-style: dashed; }
.ic-creneaux-liste:empty { display: none; }
.ic-depanner { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.ic-diagnostic { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ic-diagnostic li { font-size: 12.5px; color: var(--ambre); background: var(--ambre-bg); border: 1px solid rgba(251,191,36,.3); border-radius: var(--rayon-s); padding: 7px 10px; line-height: 1.4; }
/* les cartes, toutes ouvertes à la suite */
.ic-cartes { display: grid; gap: 16px; }
.ic-carte { padding: 0; margin: 0; scroll-margin-top: calc(var(--ic-haut) + 16px); }
.ic-carte-tete { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--cadre); }
.ic-carte-tete h3 { margin: 0; font-size: 15px; }
.ic-etat { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 500; }
.ic-corps { padding: 8px 22px 22px; }
.ic-corps > label:first-child, .ic-bloc > label:first-child { margin-top: 10px; }
.ic-corps label b, .ic-q-libelle b, .ic-q-question b { color: var(--rouge); font-weight: 600; }
.ic-pied { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--cadre); }
.ic-pied .principal { margin-left: auto; }
.ic-large { max-width: 560px; }
.ic-moyen { max-width: 360px; }
.ic-court { width: 76px !important; text-align: center; }
.ic-ligne { display: flex; gap: 10px; align-items: center; }
.ic-ligne > input:not(.ic-court) { flex: 1; }
.ic-ligne-courte { max-width: 560px; }
.ic-ligne-courte select { width: auto; min-width: 150px; }
.ic-ligne-entre { justify-content: space-between; max-width: 560px; }
.ic-ligne-entre label { margin-bottom: 0; }
.ic-apres { color: var(--soft); font-size: 13.5px; }
.ic-pastille select { width: auto; }
.ic-sous { font-size: 13px; color: var(--soft); margin: -2px 0 8px; line-height: 1.45; }
.ic-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--surface-3); color: var(--soft); font-size: 10px; font-weight: 700; font-family: var(--f-mono); cursor: help; margin-left: 4px; vertical-align: middle; }
.ic-lieu { position: relative; }
.ic-lieu select { padding-left: 40px; }
.ic-lieu-icone { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; color: var(--soft); }
.ic-lieu-icone svg { display: none; width: 20px; height: 20px; }
.ic-lieu[data-genre="meet"] .meet, .ic-lieu[data-genre="zoom"] .zoom, .ic-lieu[data-genre="telephone"] .telephone, .ic-lieu[data-genre="lien"] .lien, .ic-lieu[data-genre=""] .aucun { display: block; }
.ic-lien-url { font-family: var(--f-mono); font-size: 12.5px; color: var(--soft); margin: 0 0 6px; word-break: break-all; }
.ic-lien-url span { color: var(--ink); }
.ic-compteur { font-size: 12px; color: var(--faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
/* hôtes */
.ic-hotes-tete { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13.5px; color: var(--soft); margin: 12px 0 4px; }
.ic-hotes-tete b { color: var(--ink); font-weight: 600; }
.ic-hotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ic-hote { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cadre); border-radius: var(--rayon-s); background: var(--surface-2); cursor: pointer; margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.ic-hote:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.ic-hote small { display: block; color: var(--faint); font-weight: 400; font-size: 11.5px; }
.ic-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--soft); flex: none; }
/* horaires et limites : un bloc par réglage, séparés d'un filet */
.ic-bloc { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ic-bloc:last-child, .ic-bloc-dispo { border-bottom: 0; }
.ic-bloc-titre { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.ic-bloc-titre-suite { margin-top: 22px; }
.ic-radio { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.ic-radio input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.ic-radio input[type=number] { margin: 0; }
.ic-select-fixe { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--cadre); border-radius: var(--rayon-s); background: var(--surface-2); color: var(--soft); font-size: 13.5px; }
.ic-segments { display: inline-flex; border: 1px solid var(--cadre-vif); border-radius: var(--rayon-s); overflow: hidden; margin-top: 4px; }
.ic-segments label { margin: 0; cursor: pointer; }
.ic-segments input { position: absolute; opacity: 0; pointer-events: none; }
.ic-segments span { display: inline-block; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--soft); }
.ic-segments label + label span { border-left: 1px solid var(--cadre-vif); }
.ic-segments input:checked + span { color: var(--accent-2); background: var(--accent-bg); }
.ic-pauses { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 20px; margin-top: 6px; }
.ic-pauses select { margin-top: 8px; }
.ic-case { font-size: 14px; }
.ic-case-fixe { margin: 10px 0 0; }
.ic-avance { margin: 18px 0 4px; padding: 16px 18px; border: 1px solid var(--cadre); border-radius: var(--rayon); background: var(--surface-2); display: grid; gap: 14px; }
.ic-avance .ic-bloc-titre { margin: 0; }
/* l'interrupteur, comme chez iClosed */
.ic-bascule { display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ic-bascule input { position: absolute; opacity: 0; width: 0; height: 0; }
.ic-bascule small { display: block; font-weight: 400; font-size: 13px; color: var(--soft); margin-top: 3px; line-height: 1.45; }
.ic-switch { flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--cadre-vif); position: relative; transition: background .15s; margin-top: 1px; }
.ic-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.ic-bascule input:checked + .ic-switch { background: var(--accent); border-color: var(--accent); }
.ic-bascule input:checked + .ic-switch::after { transform: translateX(16px); background: #fff; }
.ic-bascule input:disabled + .ic-switch { opacity: .55; }
.ic-bascule-mini { font-size: 13px; font-weight: 500; color: var(--soft); align-items: center; }
/* questions */
.ic-intro { font-size: 14px; color: var(--soft); line-height: 1.5; margin: 12px 0 14px; }
.ic-intro b { color: var(--ink); }
.ic-q { padding: 12px 0 14px; border-bottom: 1px solid var(--hair); }
.ic-q-liste .ic-q { padding: 12px 10px 14px 4px; border-radius: var(--rayon-s); cursor: grab; }
.ic-q-liste .ic-q.glisse { opacity: .4; }
.ic-q-liste .ic-q.cible { background: var(--accent-bg); }
.ic-q-fixe { padding-left: 4px; }
.ic-q-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 16px; }
.ic-q-tete { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ic-q-num { color: var(--accent-2); font-weight: 600; font-family: var(--f-mono); font-size: 13px; }
.ic-q-type svg { width: 17px; height: 17px; fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-q-libelle, .ic-q-genre { font-weight: 600; color: var(--ink); }
.ic-q-genre { font-weight: 500; }
.ic-q-poignee { color: var(--faint); font-size: 13px; letter-spacing: -3px; cursor: grab; user-select: none; }
.ic-q-dq { font-size: 11.5px; color: var(--rouge); background: var(--rouge-bg); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.ic-q-actions { margin-left: auto; display: flex; gap: 2px; }
.ic-q-actions button { padding: 5px; }
.ic-q-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-q-question { font-size: 14px; color: var(--ink); margin: 8px 0 8px 28px; }
.ic-q-question span { color: var(--soft); }
.ic-q-apercu { margin-left: 28px; max-width: 520px; }
.ic-q-fixe .ic-q-apercu { margin-left: 0; margin-top: 8px; }
.ic-q-apercu input, .ic-q-apercu textarea { opacity: .7; }
.ic-faux-select { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--cadre); border-radius: var(--rayon-s); background: var(--surface-2); color: var(--faint); font-size: 14px; }
.ic-faux-multi { display: grid; gap: 7px; font-size: 14px; color: var(--ink); }
.ic-faux-multi label { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 400; color: var(--ink); font-size: 14px; }
.ic-faux-case { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--cadre-vif); background: var(--surface-2); flex: none; }
.ic-ajouter { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; }
.ic-ajouter span { font-size: 16px; line-height: 0; }
.ic-dq { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 6px; }
.ic-dq li { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--cadre); border-radius: var(--rayon-s); background: var(--surface-2); }
.ic-dq li b { font-weight: 600; color: var(--ink); }
.ic-dq li span { color: var(--rouge); }
.ic-dq li.vide { color: var(--soft); border-style: dashed; }
/* la fenêtre d'une question */
.ic-dialogue { background: var(--surface); color: var(--ink); border: 1px solid var(--cadre-vif); border-radius: 14px; padding: 0; width: min(680px, 94vw); box-shadow: var(--ombre-haute); }
.ic-dialogue::backdrop { background: rgba(0,0,0,.6); }
.ic-dialogue-tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--cadre); }
.ic-dialogue-tete h2 { margin: 0; font-size: 17px; font-family: var(--f-sans); text-transform: none; letter-spacing: -.01em; font-weight: 600; }
.ic-dialogue-tete h2::before { content: none; }
.ic-fermer { font-size: 15px; padding: 4px 8px; }
.ic-dialogue-corps { padding: 6px 22px 18px; max-height: 66vh; overflow: auto; }
.ic-dialogue-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--cadre); }
.ic-options { display: grid; gap: 6px; }
.ic-option { display: flex; align-items: center; gap: 8px; }
.ic-option input { flex: 1; }
.ic-dq-bouton { font-size: 15px; padding: 4px 8px; color: var(--faint); }
.ic-dq-bouton.actif { color: var(--rouge); background: var(--rouge-bg); }
.ic-retirer { font-size: 12px; padding: 5px 8px; }
.ic-ajouter-option { margin-top: 8px; color: var(--accent-2); }
.ic-erreur { margin-top: 12px; font-size: 13px; color: var(--rouge); }
/* confirmation */
.ic-embed { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; margin-top: 8px; }
.ic-embed-titre { font-size: 12.5px; font-weight: 600; color: var(--soft); margin-bottom: 8px; }
.ic-apercu { background: #0F1116; border: 1px solid var(--cadre-vif); border-radius: var(--rayon); padding: 14px; display: grid; gap: 10px; }
.ic-apercu-bandeau { background: var(--vert-bg); color: var(--vert); border: 1px solid rgba(52,211,153,.35); border-radius: var(--rayon-s); padding: 8px 12px; font-size: 13px; font-weight: 600; }
.ic-apercu-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--hair); padding: 6px 0; }
.ic-apercu-ligne:last-child { border-bottom: 0; }
.ic-apercu-ligne span { color: var(--faint); }
.ic-apercu-ligne b { font-weight: 600; text-align: right; }
@media (max-width: 900px) { .ic-editeur { grid-template-columns: 1fr; } .ic-gauche { position: static; } .ic-nav { flex-direction: row; flex-wrap: wrap; } .ic-nav-titre { display: none; } .ic-tete { grid-template-columns: 1fr; } .ic-embed, .ic-pauses, .ic-q-deux { grid-template-columns: 1fr; } }
/* ---------- Emails à rattacher (10/09/2026) ---------- */
.a-rattacher-bandeau { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 11px 14px;
border: 1px solid rgba(251,191,36,.35); background: var(--ambre-bg); border-radius: var(--rayon-s); color: var(--ink); text-decoration: none; }
.a-rattacher-bandeau strong { color: var(--ambre); font-weight: 650; }
.a-rattacher-bandeau span { color: var(--soft); font-size: 13px; flex: 1; min-width: 200px; }
.a-rattacher-bandeau .fleche { flex: 0; color: var(--ambre); font-size: 16px; min-width: 0; }
.a-rattacher-bandeau:hover { border-color: var(--ambre); }
.ar-liste { display: grid; gap: 12px; }
.ar-email { display: grid; gap: 10px; margin: 0; }
.ar-tete { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ar-de { font-weight: 600; color: var(--ink); }
.ar-de span { color: var(--soft); font-weight: 400; font-size: 13px; }
.ar-sujet { color: var(--soft); font-size: 13.5px; margin-top: 2px; }
.ar-quand { color: var(--faint); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.ar-quand span { color: var(--faint); }
.ar-texte { margin: 0; white-space: pre-wrap; max-height: 9.5em; overflow: auto; }
.ar-actions { display: grid; gap: 10px; border-top: 1px solid var(--hair); padding-top: 11px; }
.ar-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ar-suggestions .aide { margin: 0; }
.ar-suggestion { font-size: 12.5px; padding: 4px 10px; }
.ar-chercher label { margin: 0 0 5px; }
.ar-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-ligne input { flex: 1; min-width: 200px; }
.ar-autres { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---------- Scheduler : hôtes depuis la liste, disponibilités communes (13/09/2026) ---------- */
.sch-dispo-bouton { display: inline-flex; align-items: center; gap: 7px; }
.sch-dispo-bouton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sch-hotes { display: inline-block; }
.sch-hotes summary.pastille { cursor: pointer; }
.sch-hotes-liste { left: 0; right: auto; min-width: 260px; }
.sch-hotes-liste .ic-hote { padding: 7px 10px; }
.sch-hotes-etat:empty { display: none; }
.dsp { overflow: visible; }
.dsp-retour { padding-left: 0; font-size: 12.5px; }
.dsp-onglets { display: flex; padding: 0 22px; border-bottom: 1px solid var(--cadre); }
.dsp-onglet { padding: 14px 2px 12px; font-weight: 600; font-size: 14px; color: var(--accent-2); border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.dsp-corps { padding: 18px 22px 22px; }
.dsp-reglages { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 14px; }
.dsp-reglages label { margin-top: 0; }
.dsp-select { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.dsp-caret { color: var(--faint); }
.dsp-menu-gauche { left: 0; right: auto; min-width: 100%; }
.dsp-choix { margin: 0; font-size: 13.5px; }
.dsp-note { margin: 10px 0 0; }
.dsp-deux { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; margin-top: 18px; align-items: start; }
.dsp-bloc { border: 1px solid var(--cadre); border-radius: var(--rayon); padding: 16px 18px; }
.dsp-bloc h3 { margin: 0 0 8px; font-size: 14.5px; }
.dsp-jour { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.dsp-jour:last-child { border-bottom: 0; }
.dsp-bascule { align-items: center; padding-top: 6px; }
.dsp-nom { font-weight: 500; }
.dsp-off .dsp-nom { color: var(--soft); }
.dsp-droite { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; min-height: 34px; }
.dsp-droite > .sous { padding-top: 8px; }
.dsp-plages { display: grid; gap: 6px; }
.dsp-plage { display: flex; align-items: center; gap: 6px; }
.dsp-heure { width: 104px; font-family: var(--f-mono); font-size: 13px; padding: 6px 8px; }
.dsp-tiret { color: var(--faint); font-size: 12px; }
.dsp-outils { display: flex; gap: 2px; }
.dsp-icone { padding: 5px 9px; line-height: 1; }
.dsp-copie .ic-menu-liste { min-width: 200px; }
.dsp-dates { list-style: none; margin: 8px 0 12px; padding: 0; }
.dsp-date { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.dsp-date > div { flex: 1; display: grid; }
.dsp-date b { font-weight: 600; font-size: 13.5px; }
.dsp-vide { padding: 6px 0; }
.dsp-indispo { margin: 14px 0 10px; }
.dsp-ajouter-plage { margin-top: 6px; }
.dsp-dialogue { width: min(460px, 94vw); }
@media (max-width: 900px) { .dsp-deux, .dsp-reglages { grid-template-columns: 1fr; } .dsp-jour { grid-template-columns: 1fr; } }
/* ============================================================
LA LISTE DES LEADS PAR ARRIVÉE (13/09/2026, fonction leads_frais)
============================================================ */
.arrivees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.tuile-arrivee {
display: flex; flex-direction: column; gap: 2px; text-decoration: none; position: relative; overflow: hidden;
padding: 14px 18px 13px; background: var(--surface); border: 1px solid var(--cadre);
border-radius: var(--rayon); box-shadow: var(--ombre); transition: border-color .14s, background .14s;
}
.tuile-arrivee::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .7;
}
.tuile-arrivee:hover { border-color: var(--cadre-vif); background: var(--surface-2); }
.tuile-arrivee.actif { border-color: var(--accent); background: var(--accent-bg); }
.tuile-arrivee .t-libelle { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; color: var(--faint);
text-transform: uppercase; letter-spacing: .08em; }
.tuile-arrivee .t-n { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; color: var(--ink); }
.tuile-arrivee .t-sous { font-size: 12px; color: var(--soft); }
.tuile-arrivee.alerte-douce::after { background: var(--ambre); }
.tuile-arrivee.alerte-douce .t-n { color: var(--ambre); }
.tuile-arrivee.alerte-douce.actif { border-color: var(--ambre); background: var(--ambre-bg); }
.tuile-arrivee.rien .t-n { color: var(--faint); }
.tuile-arrivee.rien::after { background: var(--faint); }
.parcours.fin { gap: 6px; margin-bottom: 14px; }
.parcours.fin .pas { padding: 9px 12px 8px; min-width: 96px; }
.parcours.fin .pas-n { font-size: 18px; }
.parcours.fin .pas-quoi { font-size: 10.5px; }
.outils-leads { margin: 0 0 10px; }
.outils-leads .rangee { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.champ-recherche {
flex: 1 1 280px; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 12px;
background: var(--surface); border: 1px solid var(--cadre); border-radius: var(--rayon-s); color: var(--faint);
}
.champ-recherche:focus-within { border-color: var(--accent); color: var(--accent-2); }
.champ-recherche input { border: 0; background: transparent; padding: 9px 0; width: 100%; box-shadow: none; outline: none; }
.outils-leads select.tri { width: auto; min-width: 190px; }
.bouton-filtres .n {
background: var(--accent); color: var(--on-accent); border-radius: 999px; font-size: 11px;
padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.bouton-filtres.garni { border-color: rgba(59,130,246,.45); }
.panneau-filtres {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px;
margin-top: 8px; padding: 14px 16px 16px; background: var(--surface);
border: 1px solid var(--cadre); border-radius: var(--rayon); box-shadow: var(--ombre-haute);
}
.panneau-filtres[hidden] { display: none; }
.panneau-filtres .sorties { grid-column: 1 / -1; }
.panneau-filtres .jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.panneau-filtres .pied { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.filtres-actifs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.etiquette {
display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 12.5px; font-weight: 500;
padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--accent-bg); color: var(--ink);
border: 1px solid rgba(59,130,246,.3);
}
.etiquette em { font-style: normal; color: var(--accent-2); font-size: 11px; }
.etiquette i { font-style: normal; font-size: 10px; color: var(--soft); width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.etiquette:hover i { background: var(--rouge-bg); color: var(--rouge); }
.effacer-tout { font-size: 12.5px; color: var(--faint); margin-left: 4px; }
.effacer-tout:hover { color: var(--ink); }
.liste-leads tr.jour-sep td {
background: var(--surface-2); padding: 7px 14px; border-bottom: 1px solid var(--cadre);
font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; color: var(--soft);
}
.liste-leads tr.jour-sep td b { margin-left: 8px; color: var(--faint); font-weight: 600; }
.liste-leads tbody tr.jour-sep:hover td { background: var(--surface-2); }
.liste-leads tr.frais td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.liste-leads tr.frais td { background: rgba(59,130,246,.035); }
.liste-leads .lead-id { display: flex; gap: 11px; align-items: flex-start; }
.liste-leads .lead-id-texte { min-width: 0; }
.liste-leads td.arrive { white-space: nowrap; }
.liste-leads td.arrive strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.liste-leads td.act { text-align: right; width: 1%; }
.avatar {
flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
background: var(--surface-3); color: var(--soft); margin-top: 1px;
}
.avatar.mini { width: 22px; height: 22px; font-size: 9.5px; margin: 0; }
.avatar.av-0 { background: rgba(59,130,246,.16); color: #93C5FD; }
.avatar.av-1 { background: rgba(52,211,153,.14); color: #6EE7B7; }
.avatar.av-2 { background: rgba(192,132,252,.15); color: #D8B4FE; }
.avatar.av-3 { background: rgba(251,191,36,.13); color: #FCD34D; }
.avatar.av-4 { background: rgba(248,113,113,.13); color: #FCA5A5; }
.avatar.av-5 { background: rgba(129,140,248,.15); color: #A5B4FC; }
.porteur { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.badge-nouveau {
display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; vertical-align: 1px;
font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent-2); background: var(--accent-bg); padding: 2px 7px; border-radius: 999px;
}
.badge-nouveau::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
animation: pouls 1.8s ease-in-out infinite;
}
.canal { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--soft); white-space: nowrap; }
.canal i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.canal.c-whatsapp i, .canal.c-machine i { background: var(--vert); }
.canal.c-linkedin i { background: var(--bleu); }
.canal.c-instagram i { background: var(--violet); }
.canal.c-youtube i, .canal.c-publicite i { background: var(--rouge); }
.canal.c-contenu i, .canal.c-formulaire i { background: var(--accent); }
.canal.c-recommandation i, .canal.c-evenement i { background: var(--ambre); }
.pastille.a-traiter { background: var(--ambre-bg); color: var(--ambre); }
.jour-txt { color: var(--accent-2); font-weight: 600; }
@media (max-width: 820px) {
.arrivees { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tuile-arrivee { padding: 10px 12px; }
.tuile-arrivee .t-n { font-size: 22px; }
.tuile-arrivee .t-sous { display: none; }
}
/* L'origine d'un lead (15/09/2026) : une étiquette, jamais un rond. */
.origines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.origines-titre { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; color: var(--faint);
text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.origine-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.origine, a.origine { display: inline-flex; align-items: center; gap: 0; height: 24px; padding: 0 10px;
border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
text-decoration: none; border: 1px solid var(--o-bord, transparent);
background: var(--o-fond, var(--surface-3)); color: var(--o-texte, var(--soft));
transition: border-color .12s, background .12s; }
a.origine:hover, .origine.actif { border-color: var(--o-texte, var(--soft)); }
.origine .n { margin-left: 7px; font-family: var(--f-mono); font-weight: 500; opacity: .7; }
.origine .o-via { margin-left: 7px; padding-left: 7px; border-left: 1px solid var(--o-bord, var(--cadre-vif));
font-weight: 500; opacity: .75; }
.origine.o-setting { --o-fond: var(--accent-bg); --o-texte: var(--accent-2); --o-bord: rgba(96,165,250,.28); }
.origine.o-linkedin { --o-fond: rgba(129,140,248,.13); --o-texte: var(--bleu); --o-bord: rgba(129,140,248,.3); }
.origine.o-instagram { --o-fond: rgba(192,132,252,.13); --o-texte: var(--violet); --o-bord: rgba(192,132,252,.3); }
.origine.o-youtube, .origine.o-publicite { --o-fond: var(--rouge-bg); --o-texte: var(--rouge); --o-bord: rgba(248,113,113,.3); }
.origine.o-whatsapp, .origine.o-machine, .origine.o-site { --o-fond: var(--vert-bg); --o-texte: var(--vert); --o-bord: rgba(52,211,153,.3); }
.origine.o-contenu, .origine.o-recommandation, .origine.o-webinaire { --o-fond: var(--ambre-bg); --o-texte: var(--ambre); --o-bord: rgba(251,191,36,.3); }
.origine.o-import, .origine.o-manuel { --o-fond: var(--surface-3); --o-texte: var(--soft); --o-bord: var(--cadre-vif); }
.origine.o-inconnue { --o-fond: transparent; --o-texte: var(--faint); --o-bord: var(--cadre-vif); border-style: dashed; }
.origine-optin { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px;
font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--ambre); background: var(--ambre-bg); }
.origine-optin.rdv { color: var(--vert); background: var(--vert-bg); }
.setter-par { margin-top: 4px; }