/* ---------------------------------------------------------------------------
   CRM MP Conseils — feuille de style unique.
   Fond ardoise, accents corail et ambre. Le sombre est la base ; le clair prend
   le relais si le navigateur le demande ou si l'utilisateur bascule.
   En dessous de 780 px, l'application passe en présentation téléphone :
   navigation par le bas, cartes au lieu de tableaux, cibles au pouce.
   --------------------------------------------------------------------------- */

:root {
  --fond: #0F1116; --fond-2: #14161D; --fond-3: #1A1D26; --fond-4: #21252F;
  --bord: #242835; --bord-2: #2F3442;
  --texte: #E8EAF0; --texte-2: #99A1B2; --texte-3: #6A7285;
  --corail: #E4614C; --corail-fond: rgba(228,97,76,.14);
  --ambre: #DCA044;  --ambre-fond: rgba(220,160,68,.14);
  --bleu: #5B8DEF;   --bleu-fond: rgba(91,141,239,.14);
  --vert: #4FB483;   --vert-fond: rgba(79,180,131,.14);
  --violet: #9B7BD4; --violet-fond: rgba(155,123,212,.14);
  --gris-fond: rgba(153,161,178,.12);
  --sur-accent: #FFFFFF;
  --r: 8px; --r-s: 5px;
  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --barre-basse: 62px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fond: #F6F7F9; --fond-2: #FFFFFF; --fond-3: #F1F2F6; --fond-4: #E9EBF0;
    --bord: #E4E6EC; --bord-2: #D5D8E1;
    --texte: #14161D; --texte-2: #5C6474; --texte-3: #858DA0;
    --corail: #C9452F; --corail-fond: rgba(201,69,47,.10);
    --ambre: #A9741B;  --ambre-fond: rgba(169,116,27,.12);
    --bleu: #2F63C7;   --bleu-fond: rgba(47,99,199,.10);
    --vert: #1F7D50;   --vert-fond: rgba(31,125,80,.10);
    --violet: #6B4CA8; --violet-fond: rgba(107,76,168,.10);
    --gris-fond: rgba(92,100,116,.10);
  }
}
:root[data-theme="light"] {
  --fond: #F6F7F9; --fond-2: #FFFFFF; --fond-3: #F1F2F6; --fond-4: #E9EBF0;
  --bord: #E4E6EC; --bord-2: #D5D8E1;
  --texte: #14161D; --texte-2: #5C6474; --texte-3: #858DA0;
  --corail: #C9452F; --corail-fond: rgba(201,69,47,.10);
  --ambre: #A9741B;  --ambre-fond: rgba(169,116,27,.12);
  --bleu: #2F63C7;   --bleu-fond: rgba(47,99,199,.10);
  --vert: #1F7D50;   --vert-fond: rgba(31,125,80,.10);
  --violet: #6B4CA8; --violet-fond: rgba(107,76,168,.10);
  --gris-fond: rgba(92,100,116,.10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { overscroll-behavior-y: none; }

body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--ui); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* --- écran de connexion ----------------------------------------------------- */

.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.connexion .boite { width: 100%; max-width: 380px; }
.connexion .marque { text-align: center; margin-bottom: 26px; }
.connexion h1 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.02em; }
.connexion p { color: var(--texte-2); margin: 0 0 22px; font-size: 14px; }

/* --- bandeau supérieur ------------------------------------------------------ */

.tete { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 58px;
  border-bottom: 1px solid var(--bord); background: var(--fond);
  position: sticky; top: 0; z-index: 30; }
.marque { display: flex; align-items: baseline; gap: 10px; }
.marque .nom { font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.marque .nom i { color: var(--corail); font-style: normal; padding: 0 2px; }
.marque .sous { font-size: 11px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--texte-3); font-weight: 600; }
.tete-fin { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.selecteur-user { display: flex; align-items: center; gap: 9px; background: var(--fond-2);
  border: 1px solid var(--bord); border-radius: var(--r); padding: 5px 10px 5px 5px; }
.selecteur-user .qui { font-weight: 600; font-size: 13.5px; }
.selecteur-user .role { font-size: 11.5px; color: var(--texte-3); }

.pastille-nom { width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--violet-fond); color: var(--violet); display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); }

.bouton-icone { position: relative; width: 34px; height: 34px; border-radius: var(--r-s);
  border: 1px solid var(--bord); background: var(--fond-2); color: var(--texte-2);
  display: grid; place-items: center; }
.bouton-icone:hover { color: var(--texte); border-color: var(--bord-2); }
.bouton-icone .compte { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; background: var(--corail); color: var(--sur-accent); border-radius: 9px;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }

#bascule-theme .i-soleil, #bascule-theme .i-lune { display: none; }
:root[data-theme="light"] #bascule-theme .i-lune { display: block; }
:root[data-theme="dark"] #bascule-theme .i-soleil { display: block; }
:root:not([data-theme]) #bascule-theme .i-soleil { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) #bascule-theme .i-soleil { display: none; }
  :root:not([data-theme]) #bascule-theme .i-lune { display: block; }
}

/* --- bandeaux d'alerte ------------------------------------------------------ */

.alertes { display: flex; border-bottom: 1px solid var(--bord); }
.alerte { flex: 1; display: flex; align-items: center; gap: 12px; padding: 13px 22px;
  border-right: 1px solid var(--bord); cursor: pointer; background: none; border-top: 0;
  border-bottom: 0; border-left: 0; text-align: left; color: inherit; }
.alerte:last-child { border-right: 0; }
.alerte:hover { background: var(--fond-2); }
.alerte .point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.alerte .txt { flex: 1; min-width: 0; }
.alerte .t { font-weight: 600; font-size: 13.5px; display: block; }
.alerte .d { color: var(--texte-2); font-size: 12.5px; display: block; }
.alerte .n { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.a-ambre .point { background: var(--ambre); }  .a-ambre .n { color: var(--ambre); }
.a-bleu .point { background: var(--bleu); }    .a-bleu .n { color: var(--bleu); }
.a-corail .point { background: var(--corail); } .a-corail .n { color: var(--corail); }

/* --- onglets ---------------------------------------------------------------- */

.onglets { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--bord); overflow-x: auto; }
.onglets button { padding: 14px 12px; color: var(--texte-2); background: none; border: 0;
  font-weight: 500; font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets button:hover { color: var(--texte); }
.onglets button.actif { color: var(--texte); border-bottom-color: var(--corail); font-weight: 600; }

/* --- corps ------------------------------------------------------------------ */

.corps { display: flex; gap: 18px; padding: 18px 22px 60px; align-items: flex-start; }
.corps.sans-rail { display: block; }
.principal { flex: 1; min-width: 0; }

.rail { width: 232px; flex: none; background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: var(--r); padding: 12px 0; }
.rail-titre { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texte-3); font-weight: 700; padding: 6px 16px 8px; }
.rail button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 16px;
  color: var(--texte-2); background: none; border: 0; font-size: 13.5px; text-align: left;
  border-left: 2px solid transparent; }
.rail button:hover { background: var(--fond-3); color: var(--texte); }
.rail button.actif { background: var(--fond-3); color: var(--texte); border-left-color: var(--corail); font-weight: 600; }
.rail .carre { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--texte-3); }
.rail .n { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--texte-3); }
.rail .n.vif { color: var(--corail); font-weight: 600; }
.rail hr { border: 0; border-top: 1px solid var(--bord); margin: 10px 0; }

/* --- cartes ----------------------------------------------------------------- */

.carte { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--r); overflow: hidden; }
.carte + .carte { margin-top: 16px; }
.carte-tete { display: flex; align-items: center; gap: 14px; padding: 15px 18px; flex-wrap: wrap; }
.carte-tete .titre { font-size: 15.5px; font-weight: 600; }
.carte-tete .sous { color: var(--texte-2); font-size: 12.5px; margin-top: 1px; }
.carte-tete .fin { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.carte-corps { padding: 0 18px 18px; }
.carte-corps.plein { padding: 18px; }

.recherche { display: flex; align-items: center; gap: 8px; min-width: 230px; background: var(--fond-3);
  border: 1px solid var(--bord); border-radius: var(--r-s); padding: 7px 11px; color: var(--texte-3); }
.recherche input { background: none; border: 0; flex: 1; min-width: 0; font-size: 13px; color: var(--texte); }
.recherche input::placeholder { color: var(--texte-3); }

.filtre-com { display: flex; align-items: center; gap: 8px; background: var(--fond-3);
  border: 1px solid var(--bord); border-radius: var(--r-s); padding: 6px 10px; }
.filtre-com label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texte-3); font-weight: 700; }
.filtre-com select { background: none; border: 0; font-size: 13px; font-weight: 600; padding: 0; }
.filtre-fige { font-size: 12.5px; color: var(--texte-2); }
.filtre-fige b { color: var(--texte); }

/* --- tableaux ---------------------------------------------------------------- */

.tableau-boite { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--texte-3); font-weight: 700; padding: 10px 18px;
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); white-space: nowrap; }
tbody td { padding: 12px 18px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.cliquable:hover { background: var(--fond-3); cursor: pointer; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
td .mono { white-space: nowrap; }
.societe { font-weight: 600; }
.secondaire { color: var(--texte-2); font-size: 12.5px; }
.tertiaire { color: var(--texte-3); font-size: 12.5px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.chip-com { display: inline-flex; align-items: center; gap: 8px; }
.chip-com .rond { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 9.5px; font-weight: 700; background: var(--gris-fond); color: var(--texte-2); }

/* --- pastilles de statut ------------------------------------------------------ */

.statut { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 600; white-space: nowrap; }
.statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-gris { background: var(--gris-fond); color: var(--texte-2); }
.s-bleu { background: var(--bleu-fond); color: var(--bleu); }
.s-ambre { background: var(--ambre-fond); color: var(--ambre); }
.s-violet { background: var(--violet-fond); color: var(--violet); }
.s-corail { background: var(--corail-fond); color: var(--corail); }
.s-vert { background: var(--vert-fond); color: var(--vert); }
.puce { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--corail); margin-right: 7px; }

/* --- statistiques --------------------------------------------------------- */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tuile { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--r); padding: 15px 17px; }
.tuile .etq { font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--texte-3); font-weight: 700; }
.tuile .val { font-size: 29px; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tuile .val small { font-size: 16px; font-weight: 600; color: var(--texte-2); margin-left: 3px; }
.tuile .note { font-size: 12.5px; color: var(--texte-2); margin-top: 4px; }
.tuile.phare { border-color: color-mix(in srgb, var(--corail) 45%, transparent);
  background: linear-gradient(180deg, var(--corail-fond), transparent 65%), var(--fond-2); }
.tuile.phare .val { color: var(--corail); }

.ecart { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.ecart.pos { color: var(--vert); }
.ecart.neg { color: var(--corail); }

.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.paire > .carte + .carte { margin-top: 0; }
@media (max-width: 1080px) { .paire { grid-template-columns: 1fr; } }

.jauge { height: 34px; background: var(--fond-3); border: 1px solid var(--bord);
  border-radius: var(--r-s); overflow: hidden; position: relative; }
.jauge .rempli { position: absolute; inset: 0 auto 0 0; background: var(--corail); opacity: .85; }
.jauge .rempli.min { min-width: 3px; }
.jauge-pied { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 12.5px; color: var(--texte-2); }
.jauge-pied b { color: var(--texte); font-family: var(--mono); }

.banniere-record { display: flex; align-items: center; gap: 9px; padding: 10px 13px; margin-bottom: 14px;
  background: var(--vert-fond); color: var(--vert);
  border: 1px solid color-mix(in srgb, var(--vert) 32%, transparent);
  border-radius: var(--r-s); font-weight: 600; font-size: 13px; }

.histo { display: flex; align-items: flex-end; gap: 6px; height: 104px; margin-top: 18px; }
.histo-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 6px; min-width: 0; }
.histo-barre { width: 100%; background: var(--fond-4); border-radius: 3px 3px 0 0; min-height: 3px; }
.histo-col.record .histo-barre { background: var(--ambre); }
.histo-col.courante .histo-barre { background: var(--corail); }
.histo-col .v { font-family: var(--mono); font-size: 11px; color: var(--texte-2); }
.histo-col .j { font-size: 10px; color: var(--texte-3); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; }

.tunnel { display: flex; flex-direction: column; gap: 3px; }
.etape { display: grid; grid-template-columns: 148px 1fr 52px 66px; align-items: center; gap: 12px; padding: 5px 0; }
.etape .lbl { font-size: 13.5px; }
.etape .piste { height: 22px; background: var(--fond-3); border-radius: 3px; overflow: hidden; }
.etape .piste i { display: block; height: 100%; background: var(--bleu); opacity: .8; }
.etape .piste i.gris { background: var(--texte-3); opacity: .55; }
.etape .n { font-family: var(--mono); text-align: right; font-weight: 600; }
.etape .pct { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--texte-3); }
.etape.fuite .pct { color: var(--corail); font-weight: 600; }

/* --- agenda ----------------------------------------------------------------- */

.semaine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.jour { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--r); min-height: 220px; }
.jour-tete { display: flex; align-items: baseline; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--bord); }
.jour-tete .nm { font-weight: 600; font-size: 13px; text-transform: capitalize; }
.jour-tete .dt { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--texte-3); }
.jour.auj { border-color: color-mix(in srgb, var(--corail) 45%, transparent); }
.jour.auj .jour-tete { background: var(--corail-fond); }
.jour-corps { padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.rdv { border-left: 3px solid var(--texte-3); background: var(--fond-3); border-radius: 0 4px 4px 0;
  padding: 7px 9px; font-size: 12.5px; width: 100%; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; color: inherit; }
.rdv .h { font-family: var(--mono); font-size: 11px; color: var(--texte-3); }
.rdv .t { font-weight: 600; }
.rdv .q { color: var(--texte-2); font-size: 11.5px; }
.rdv.t-rappel { border-left-color: var(--corail); }
.rdv.t-demarrage { border-left-color: var(--vert); }
.rdv.t-remise { border-left-color: var(--ambre); }

.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--texte-2); margin-top: 14px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 9px; height: 9px; border-radius: 2px; }

/* --- kanban ----------------------------------------------------------------- */

.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 244px; gap: 12px;
  overflow-x: auto; padding-bottom: 12px; }
.colonne { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--r); }
.colonne-tete { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--bord); }
.colonne-tete .t { font-weight: 600; font-size: 12.5px; }
.colonne-tete .n { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--texte-3); }
.colonne-corps { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.mini { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--r-s); padding: 9px 10px;
  width: 100%; text-align: left; color: inherit; }
.mini .s { font-weight: 600; font-size: 12.5px; }
.mini .i { font-size: 11.5px; color: var(--texte-2); margin-top: 2px; }
.mini .b { display: flex; align-items: center; gap: 7px; margin-top: 8px; }

.rebours { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px; }
.u-calme { background: var(--gris-fond); color: var(--texte-2); }
.u-attention { background: var(--bleu-fond); color: var(--bleu); }
.u-urgent { background: var(--ambre-fond); color: var(--ambre); }
.u-critique { background: var(--corail-fond); color: var(--corail); }
.u-depasse { background: var(--corail); color: var(--sur-accent); }

/* --- fiche lead -------------------------------------------------------------- */

.voile { position: fixed; inset: 0; background: rgba(6,8,12,.6); z-index: 60; border: 0; }
.panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(780px, 97vw); z-index: 61;
  background: var(--fond); border-left: 1px solid var(--bord); overflow-y: auto;
  overscroll-behavior: contain; }
.panneau-tete { position: sticky; top: 0; z-index: 2; background: var(--fond-2);
  border-bottom: 1px solid var(--bord); padding: 16px 20px; }
.panneau-corps { padding: 18px 20px 60px; display: flex; flex-direction: column; gap: 16px; }

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-3); font-weight: 700; }
.champ input, .champ select, .champ textarea {
  background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--r-s);
  padding: 9px 11px; font-size: 15px; color: var(--texte); width: 100%; }
.champ textarea { min-height: 76px; resize: vertical; font-family: inherit; }
.champ.manque input, .champ.manque select { border-color: color-mix(in srgb, var(--corail) 55%, transparent); background: var(--corail-fond); }
.case { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 7px 0; }
.case input { width: 18px; height: 18px; accent-color: var(--corail); }

.bloc-alerte { background: var(--corail-fond); border: 1px solid color-mix(in srgb, var(--corail) 32%, transparent);
  color: var(--corail); border-radius: var(--r-s); padding: 12px 14px; font-size: 12.5px; }
.bloc-alerte b { display: block; margin-bottom: 4px; font-size: 13px; }
.bloc-alerte ul { margin: 6px 0 0; padding-left: 18px; }

.encart { border-left: 3px solid var(--bleu); background: var(--bleu-fond); padding: 11px 14px;
  border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 12.5px; color: var(--texte-2); }
.encart b { color: var(--texte); }

.suivi { display: flex; margin: 6px 0 2px; }
.suivi .e { flex: 1; text-align: center; position: relative; padding-top: 22px; font-size: 12px; color: var(--texte-3); }
.suivi .e::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--fond-2); border: 2px solid var(--bord-2); }
.suivi .e::after { content: ""; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px; background: var(--bord); }
.suivi .e:last-child::after { display: none; }
.suivi .e.ok { color: var(--vert); font-weight: 600; }
.suivi .e.ok::before { background: var(--vert); border-color: var(--vert); }
.suivi .e.ok::after { background: var(--vert); }
.suivi .e .q { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--texte-3); font-weight: 400; }

.journal .ligne { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--bord); font-size: 12.5px; }
.journal .ligne:last-child { border-bottom: 0; }
.journal .ligne .q { font-family: var(--mono); font-size: 11px; color: var(--texte-3); }
.journal .ligne .a { color: var(--texte-3); font-size: 11.5px; }

/* --- boutons ----------------------------------------------------------------- */

.btn { border: 1px solid var(--bord-2); background: var(--fond-3); color: var(--texte);
  border-radius: var(--r-s); padding: 9px 14px; font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn:hover { background: var(--fond-4); }
.btn.principal { background: var(--corail); border-color: var(--corail); color: var(--sur-accent); font-weight: 600; }
.btn.principal:hover { filter: brightness(1.08); }
.btn.vert { background: var(--vert); border-color: var(--vert); color: var(--sur-accent); font-weight: 600; }
.btn.discret { background: none; }
.btn.petit { padding: 6px 11px; font-size: 12.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.boutons { display: flex; gap: 8px; flex-wrap: wrap; }

.filtres { display: flex; gap: 7px; flex-wrap: wrap; }
.filtres .f { border: 1px solid var(--bord); background: var(--fond-3); border-radius: 100px;
  padding: 6px 13px; font-size: 12.5px; }
.filtres .f.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); font-weight: 600; }

.vide { padding: 40px 18px; text-align: center; color: var(--texte-3); font-size: 13px; }

.chargement { padding: 60px 18px; text-align: center; color: var(--texte-3); font-size: 13px; }
.chargement::after { content: ""; display: block; width: 22px; height: 22px; margin: 12px auto 0;
  border: 2px solid var(--bord-2); border-top-color: var(--corail); border-radius: 50%;
  animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* messages passagers */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 90;
  background: var(--fond-4); border: 1px solid var(--bord-2); color: var(--texte);
  padding: 11px 18px; border-radius: 100px; font-size: 13.5px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,.28); max-width: 90vw; }
.toast.ko { background: var(--corail); border-color: var(--corail); color: var(--sur-accent); }
.toast.ok { background: var(--vert); border-color: var(--vert); color: var(--sur-accent); }

/* =========================================================================
   TÉLÉPHONE — en dessous de 780 px
   ========================================================================= */

.bas-nav { display: none; }
.mobile-seul { display: none; }

@media (max-width: 780px) {
  .bureau-seul { display: none !important; }
  .mobile-seul { display: block; }

  body { padding-bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom)); }

  .tete { padding: 0 14px; height: 54px; gap: 10px; }
  .marque .sous { display: none; }
  .selecteur-user { padding: 4px; border: 0; background: none; }
  .selecteur-user .qui, .selecteur-user .role { display: none; }

  .alertes { flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--bord); }
  .alerte { flex: 0 0 auto; min-width: 46%; padding: 11px 14px; gap: 9px; }
  .alerte .d { display: none; }
  .alerte .t { font-size: 12.5px; }
  .alerte .n { font-size: 18px; }

  .onglets { display: none; }

  .corps { display: block; padding: 12px 12px 24px; }
  .rail { display: none; }

  .carte { border-radius: var(--r); }
  .carte-tete { padding: 13px 14px; gap: 10px; }
  .carte-tete .fin { width: 100%; margin-left: 0; }
  .recherche { min-width: 0; flex: 1; }
  .filtre-com { flex: 1; }
  .filtre-com select { flex: 1; }
  .carte-corps { padding: 0 14px 14px; }
  .carte-corps.plein { padding: 14px; }

  /* les tableaux cèdent la place à des cartes */
  .liste-mobile { display: flex; flex-direction: column; }
  .ligne-mobile { display: block; width: 100%; text-align: left; background: none; border: 0;
    border-bottom: 1px solid var(--bord); padding: 13px 14px; color: inherit; }
  .ligne-mobile:last-child { border-bottom: 0; }
  .ligne-mobile:active { background: var(--fond-3); }
  .ligne-mobile .h1 { font-weight: 600; font-size: 15px; }
  .ligne-mobile .h2 { color: var(--texte-2); font-size: 13px; margin-top: 2px; }
  .ligne-mobile .bas { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
  .ligne-mobile .droite { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--texte-3); }

  .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tuile { padding: 13px 14px; }
  .tuile .val { font-size: 24px; }
  .tuile.phare { grid-column: 1 / -1; }

  .etape { grid-template-columns: 96px 1fr 38px 50px; gap: 8px; }
  .etape .lbl { font-size: 12.5px; }

  .semaine { grid-template-columns: 1fr; gap: 10px; }
  .jour { min-height: 0; }

  .kanban { grid-auto-flow: row; grid-auto-columns: auto; }

  .panneau { width: 100%; border-left: 0; }
  .panneau-tete { padding: 13px 14px; }
  .panneau-corps { padding: 14px 14px calc(30px + env(safe-area-inset-bottom)); gap: 13px; }
  .champs { grid-template-columns: 1fr; }
  .journal .ligne { grid-template-columns: 1fr; gap: 2px; }

  .btn { padding: 12px 16px; font-size: 14.5px; }
  .btn.petit { padding: 8px 12px; font-size: 13px; }

  /* la barre d'appel, collée en bas de la fiche */
  .actions-pouce { position: sticky; bottom: 0; background: var(--fond-2);
    border-top: 1px solid var(--bord); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 -14px -14px; }
  .actions-pouce .btn { padding: 14px; font-size: 15px; }

  /* navigation par le bas */
  .bas-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--fond-2); border-top: 1px solid var(--bord);
    padding-bottom: env(safe-area-inset-bottom); }
  .bas-nav button { flex: 1; background: none; border: 0; color: var(--texte-3);
    padding: 9px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 600; position: relative; }
  .bas-nav button.actif { color: var(--corail); }
  .bas-nav button .pastille { position: absolute; top: 5px; right: 50%; margin-right: -18px;
    min-width: 16px; height: 16px; padding: 0 4px; background: var(--corail); color: var(--sur-accent);
    border-radius: 8px; font-size: 9.5px; font-family: var(--mono); display: grid; place-items: center; }
}

@media (min-width: 781px) {
  .actions-pouce { display: flex; gap: 8px; flex-wrap: wrap; }
}