/* ═══════════════════════════════════════════════════════════════════
   Ecom.AI LinkOps — feuille de style
   Sombre par défaut : c'est un poste de pilotage qu'on garde ouvert
   toute la journée. Accents cyan et violet, réservés à ce qui porte
   une information ; le reste reste calme.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Sora"; src: url("/static/fonts/sora.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 500; font-display: swap;
}

:root {
  /* Fond bleu-nuit, jamais noir pur : le noir absolu fatigue et écrase
     les ombres colorées. */
  --fond:          #080B14;
  --fond-degrade:  radial-gradient(1200px 600px at 15% -8%, #131B33 0%, transparent 60%),
                   radial-gradient(900px 500px at 95% 5%, #1A1233 0%, transparent 55%);
  --surface:       #0F1524;
  --surface-haute: #151D30;
  --surface-creuse:#0B111D;

  --encre:       #E8EDF7;
  --encre-douce: #A8B4CC;
  --discret:     #6B7A96;

  --trait:       #1D2740;
  --trait-fort:  #2B3A5C;

  /* Cyan : la couleur de l'action. Violet : la couleur du contexte. */
  --accent:       #22D3EE;
  --accent-vif:   #67E8F9;
  --accent-sourd: rgba(34, 211, 238, .12);
  --violet:       #A78BFA;
  --violet-sourd: rgba(167, 139, 250, .12);

  --ok:        #34D399;
  --ok-sourd:  rgba(52, 211, 153, .13);
  --alerte:    #FBBF24;
  --alerte-sourd: rgba(251, 191, 36, .13);
  --critique:  #FB7185;
  --critique-sourd: rgba(251, 113, 133, .13);

  --rayon: 10px;
  --rayon-s: 7px;
  --ombre: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --lueur: 0 0 0 1px rgba(34,211,238,.35), 0 0 22px rgba(34,211,238,.18);
  --transition: 140ms cubic-bezier(.4,0,.2,1);
}

/* Thème clair : même grammaire, lumière inversée. Les accents descendent
   en saturation pour rester lisibles sur fond blanc. */
:root[data-theme="light"] {
  --fond: #F6F8FC;
  --fond-degrade: radial-gradient(1000px 500px at 12% -10%, #E6EDFB 0%, transparent 60%),
                  radial-gradient(800px 420px at 95% 0%, #EFE9FD 0%, transparent 55%);
  --surface: #FFFFFF;
  --surface-haute: #FFFFFF;
  --surface-creuse: #EEF2F9;
  --encre: #0F1728;
  --encre-douce: #3C4A63;
  --discret: #6B7A96;
  --trait: #DDE4F0;
  --trait-fort: #C3CEE2;
  --accent: #0891B2;
  --accent-vif: #0E7490;
  --accent-sourd: rgba(8, 145, 178, .1);
  --violet: #7C3AED;
  --violet-sourd: rgba(124, 58, 237, .09);
  --ok: #059669; --ok-sourd: rgba(5, 150, 105, .1);
  --alerte: #B45309; --alerte-sourd: rgba(180, 83, 9, .1);
  --critique: #E11D48; --critique-sourd: rgba(225, 29, 72, .09);
  --ombre: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.07);
  --lueur: 0 0 0 1px rgba(8,145,178,.3), 0 0 16px rgba(8,145,178,.12);
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  background: var(--fond); background-image: var(--fond-degrade);
  background-attachment: fixed;
  color: var(--encre);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-vif); }
.mono, code, textarea, input.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ─────────── Barre de navigation ─────────── */
.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 22px; position: sticky; top: 0; z-index: 30;
  background: rgba(15, 21, 36, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--trait);
}
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.85); }
.marque {
  font-weight: 700; font-size: 15px; letter-spacing: -.02em;
  color: var(--encre); display: flex; align-items: center; gap: 8px;
}
.marque b {
  background: linear-gradient(100deg, var(--accent) 10%, var(--violet) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marque::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.topbar nav a {
  padding: 7px 13px; border-radius: var(--rayon-s); color: var(--encre-douce);
  font-size: 13.5px; transition: var(--transition); position: relative;
}
.topbar nav a:hover { background: var(--surface-haute); color: var(--encre); }
.topbar nav a.actif { background: var(--accent-sourd); color: var(--accent-vif); font-weight: 600; }

main { max-width: 1560px; margin: 0 auto; padding: 26px 22px 90px; }
.entete-page {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
h1 { font-size: 25px; font-weight: 700; margin: 0; letter-spacing: -.03em; }
h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 13px; letter-spacing: -.01em; }
h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }

/* ─────────── Surfaces ─────────── */
.carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 19px; margin-bottom: 17px;
  box-shadow: var(--ombre);
}
.grille { display: grid; gap: 15px; }
.grille.k2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grille.k4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

/* Tuiles de chiffres : la valeur domine, tout le reste s'efface. */
.tuile {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden; transition: var(--transition);
}
.tuile::after {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .5;
}
.tuile:hover { border-color: var(--trait-fort); transform: translateY(-1px); }
.tuile .etiquette {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--discret); font-weight: 600;
}
.tuile .valeur {
  font-size: 30px; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.tuile .note { font-size: 12px; color: var(--discret); }
.tuile.attention::after { background: linear-gradient(90deg, var(--alerte), transparent 70%); }
.tuile.attention .valeur { color: var(--alerte); }

/* ─────────── Tableaux ─────────── */
.tableau-cadre {
  overflow-x: auto; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
thead th {
  background: var(--surface-creuse); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--discret); font-weight: 600;
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
tbody tr { transition: background var(--transition); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-haute); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─────────── Pastilles et scores ─────────── */
.pastille {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; border: 1px solid transparent;
}
.pastille.ok       { background: var(--ok-sourd);       color: var(--ok);       border-color: rgba(52,211,153,.28); }
.pastille.info     { background: var(--accent-sourd);   color: var(--accent);   border-color: rgba(34,211,238,.28); }
.pastille.alerte   { background: var(--alerte-sourd);   color: var(--alerte);   border-color: rgba(251,191,36,.28); }
.pastille.critique { background: var(--critique-sourd); color: var(--critique); border-color: rgba(251,113,133,.28); }
.pastille.neutre   { background: var(--surface-creuse); color: var(--discret);  border-color: var(--trait); }

/* Le score est l'information la plus regardée : il mérite du poids. */
.score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 34px; padding: 0 9px; border-radius: var(--rayon-s);
  font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; border: 1px solid transparent;
}
.score.haut  { background: var(--ok-sourd); color: var(--ok); border-color: rgba(52,211,153,.35);
               box-shadow: 0 0 16px rgba(52,211,153,.14); }
.score.moyen { background: var(--alerte-sourd); color: var(--alerte); border-color: rgba(251,191,36,.3); }
.score.bas   { background: var(--surface-creuse); color: var(--discret); border-color: var(--trait); }

/* ─────────── Boutons ─────────── */
button, .bouton {
  font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--rayon-s);
  border: 1px solid var(--trait-fort); background: var(--surface-haute);
  color: var(--encre-douce); cursor: pointer; display: inline-block;
  white-space: nowrap; transition: var(--transition);
}
button:hover, .bouton:hover {
  background: var(--surface-creuse); color: var(--encre);
  border-color: var(--accent); transform: translateY(-1px);
}
button.primaire, .bouton.primaire, button.accent, .bouton.accent {
  background: linear-gradient(135deg, var(--accent) 0%, #0EA5E9 100%);
  border-color: transparent; color: #04121A; font-weight: 600;
}
button.primaire:hover, .bouton.primaire:hover, button.accent:hover, .bouton.accent:hover {
  box-shadow: var(--lueur); color: #04121A;
}
button.danger { color: var(--critique); border-color: rgba(251,113,133,.4); }
button.danger:hover { background: var(--critique-sourd); border-color: var(--critique); }
button:disabled, .bouton:disabled {
  opacity: .5; cursor: progress; transform: none; border-color: var(--trait);
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.lien-bouton { border: none; background: none; color: var(--discret); padding: 5px; }
.lien-bouton:hover { background: none; color: var(--encre); transform: none; }
.groupe-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.groupe-actions form { display: inline; }

/* ─────────── Formulaires ─────────── */
label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--encre-douce); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .05em;
}
input, select, textarea {
  font: inherit; font-size: 13.5px; width: 100%; padding: 8px 11px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-s);
  background: var(--surface-creuse); color: var(--encre); transition: var(--transition);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--surface); }
input::placeholder { color: var(--discret); }
textarea { min-height: 86px; resize: vertical; font-size: 12.5px; line-height: 1.6; }
.champ { margin-bottom: 13px; }
.aide { font-size: 11.5px; color: var(--discret); margin-top: 4px; text-transform: none; letter-spacing: 0; }
form.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px; align-items: end; }

details.pliable > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 5px 0; }
details.pliable[open] > summary { margin-bottom: 13px; }

.tronque { display: block; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discret { color: var(--discret); font-size: 11.5px; }

/* ─────────── Vues ─────────── */
.vues {
  display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 18px;
  padding: 4px; background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.vues a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--rayon-s);
  color: var(--encre-douce); font-size: 13px; transition: var(--transition);
}
.vues a:hover { background: var(--surface-haute); color: var(--encre); }
.vues a.actif {
  background: linear-gradient(135deg, var(--accent-sourd), var(--violet-sourd));
  color: var(--accent-vif); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.3);
}
.compteur {
  background: var(--surface-creuse); color: var(--discret);
  padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vues a.actif .compteur { background: var(--accent); color: #04121A; }

/* ─────────── Groupes d'actions ─────────── */
.groupe { margin-bottom: 11px; }
.groupe:last-child { margin-bottom: 0; }
.groupe-titre {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--discret); margin-bottom: 5px; font-weight: 700;
}
.zone-risque {
  border-top: 1px solid var(--trait); padding-top: 10px; margin-top: 13px;
}
.zone-risque .groupe-titre { color: var(--critique); opacity: .85; }

details.rejet { display: inline-block; }
details.rejet > summary {
  cursor: pointer; font-size: 12.5px; padding: 7px 13px;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-s);
  background: var(--surface-haute); color: var(--encre-douce); list-style: none;
  transition: var(--transition);
}
details.rejet > summary::-webkit-details-marker { display: none; }
details.rejet > summary:hover { border-color: var(--critique); color: var(--critique); }
details.rejet[open] > summary { background: var(--critique-sourd); color: var(--critique); border-color: var(--critique); }
details.rejet form {
  margin-top: 8px; padding: 12px; background: var(--surface-creuse);
  border: 1px solid var(--trait); border-radius: var(--rayon-s);
  min-width: 232px; display: flex; flex-direction: column; gap: 6px;
}

/* Jauge de confiance d'une adresse */
.jauge {
  display: inline-block; width: 46px; height: 4px; vertical-align: middle;
  background: var(--surface-creuse); border-radius: 3px; overflow: hidden; margin-right: 5px;
}
.jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); }

/* ─────────── Messages ─────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface-haute); color: var(--encre);
  border: 1px solid var(--accent); box-shadow: var(--lueur);
  padding: 11px 20px; border-radius: var(--rayon); font-size: 13.5px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 100;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.bandeau {
  padding: 13px 17px; border-radius: var(--rayon); margin-bottom: 17px;
  font-size: 13.5px; border: 1px solid var(--trait);
  background: var(--surface); position: relative; padding-left: 19px;
}
.bandeau::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--rayon) 0 0 var(--rayon); background: var(--accent);
}
.bandeau.info::before     { background: var(--accent); }
.bandeau.ok, .bandeau.succes { background: var(--ok-sourd); border-color: rgba(52,211,153,.3); color: var(--ok); }
.bandeau.ok::before, .bandeau.succes::before { background: var(--ok); }
.bandeau.alerte   { background: var(--alerte-sourd); border-color: rgba(251,191,36,.3); color: var(--alerte); }
.bandeau.alerte::before { background: var(--alerte); }
.bandeau.critique { background: var(--critique-sourd); border-color: rgba(251,113,133,.3); color: var(--critique); }
.bandeau.critique::before { background: var(--critique); }

/* ─────────── Connexion ─────────── */
.connexion { max-width: 372px; margin: 13vh auto; }
.connexion .carte { padding: 30px; box-shadow: var(--ombre), var(--lueur); }
.vide { padding: 36px; text-align: center; color: var(--discret); font-size: 13.5px; }

/* ─────────── Parcours de traitement ─────────── */
/* Rend visible où en est chaque opportunité dans le cycle. */
.parcours { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 3px 0; }
.parcours .etape {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--discret); white-space: nowrap;
}
.parcours .puce {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--trait-fort); flex-shrink: 0;
}
.parcours .etape.faite .puce { background: var(--ok); }
.parcours .etape.faite { color: var(--encre-douce); }
.parcours .etape.courante .puce { background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.parcours .etape.courante { color: var(--accent-vif); font-weight: 600; }
.parcours .lien { width: 12px; height: 1px; background: var(--trait-fort); }

/* ─────────── Petits écrans ─────────── */
@media (max-width: 980px) {
  .tableau-cadre { border: none; background: none; overflow: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr {
    background: var(--surface); border: 1px solid var(--trait);
    border-radius: var(--rayon); margin-bottom: 13px; box-shadow: var(--ombre);
  }
  tbody tr:hover { background: var(--surface); }
  td { border-bottom: 1px solid var(--trait); padding: 11px 15px; }
  td:last-child { border-bottom: none; }
  td[data-libelle]::before {
    content: attr(data-libelle); display: block;
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--discret); margin-bottom: 5px; font-weight: 700;
  }
  td.num { text-align: left; }
  .tronque { max-width: 100%; white-space: normal; word-break: break-word; }
  .groupe-actions button, .groupe-actions .bouton { flex: 1 1 auto; min-height: 40px; }
  .vues { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .vues a { white-space: nowrap; }
  form.filtres { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  form.filtres { grid-template-columns: 1fr; }
  main { padding: 16px 13px 70px; }
  .topbar { gap: 10px; padding: 10px 14px; }
  h1 { font-size: 21px; }
  .tuile .valeur { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tuile:hover, button:hover, .bouton:hover { transform: none; }
}

/* ─────────── Aperçu d'un brouillon, dans la liste ─────────── */
/* Lire le texte sans quitter la liste : le va-et-vient vers une autre page
   faisait perdre le fil du tri en cours. */
details.apercu { display: block; }
details.apercu > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
details.apercu > summary::-webkit-details-marker { display: none; }
details.apercu .chevron {
  color: var(--discret); font-size: 11px; transition: transform var(--transition);
}
details.apercu[open] .chevron { transform: rotate(90deg); color: var(--accent); }
details.apercu > summary:hover .chevron { color: var(--accent); }
.apercu-corps {
  margin-top: 9px; padding: 12px; min-width: 300px;
  background: var(--surface-creuse); border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
}
.apercu-corps textarea {
  min-height: 150px; margin-top: 7px; font-size: 12px;
  background: var(--surface); border-color: var(--trait);
}
.apercu-objet {
  font-size: 12.5px; padding: 7px 9px; margin-bottom: 7px;
  background: var(--accent-sourd); border-radius: var(--rayon-s);
  border-left: 2px solid var(--accent);
}
.apercu-objet b {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); font-weight: 700;
}
@media (max-width: 980px) { .apercu-corps { min-width: 0; } }

/* L'étape courante annonce ce qu'il reste à faire : elle est encadrée pour
   qu'on ne la lise pas comme une étape franchie. */
.parcours .etape.courante {
  background: var(--accent-sourd); border: 1px solid rgba(34,211,238,.35);
  border-radius: 20px; padding: 2px 9px 2px 7px;
}
.parcours .etape.avenir .puce { opacity: .4; }