/* Cybélia Bouclier — charte du portail.
 *
 * Les jetons viennent de la page d'état (status.css), sans en inventer :
 * l'utilisateur qui connaît la page d'état lit le bouclier sans apprendre
 * un second code (plan § 5.5).
 *
 * Proportions : la liste ≈ 62 %, le détail ≈ 38 % (nombre d'or).
 * Espacements sur la suite de Fibonacci : 8, 13, 21, 34, 55 px.
 */

:root {
  --cyb-rose: #E31C60;
  --cyb-bordeaux: #81334E;

  --cyb-fond: #f7f8fa;
  --cyb-carte: #ffffff;
  --cyb-bord: #e4e7ec;
  --cyb-texte: #1f2937;
  --cyb-gris: #6b7280;

  --cyb-vert: #15803d;
  --cyb-vert-clair: #ecfdf3;
  --cyb-ambre: #b54708;
  --cyb-ambre-clair: #fffaeb;
  --cyb-rouge: #b42318;
  --cyb-rouge-clair: #fef3f2;

  /* Fibonacci */
  --e1: 8px;
  --e2: 13px;
  --e3: 21px;
  --e4: 34px;
  --e5: 55px;

  --rayon: 8px;
  --ombre: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cyb-fond);
  color: var(--cyb-texte);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--cyb-rose); }

/* --- ossature ---------------------------------------------------- */

.cyb-bandeau {
  background: var(--cyb-carte);
  border-bottom: 1px solid var(--cyb-bord);
  padding: var(--e3) var(--e4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}

.cyb-marque {
  font-size: 18px;
  font-weight: 650;
  color: var(--cyb-bordeaux);
  margin: 0;
}

.cyb-marque span { color: var(--cyb-rose); }

.cyb-bandeau-admin { border-bottom: 2px solid var(--cyb-bordeaux); }

.cyb-nav {
  display: flex;
  gap: var(--e3);
  align-items: center;
}

.cyb-nav a {
  color: var(--cyb-gris);
  text-decoration: none;
  font-weight: 500;
  padding: var(--e1) 0;
  border-bottom: 2px solid transparent;
}

.cyb-nav a:hover { color: var(--cyb-texte); }
.cyb-nav a.actif { color: var(--cyb-rose); border-bottom-color: var(--cyb-rose); }

.cyb-corps {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e4);
}

.cyb-titre {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 var(--e1);
}

.cyb-sous-titre {
  color: var(--cyb-gris);
  margin: 0 0 var(--e4);
}

/* --- le partage d'or : liste 62 %, détail 38 % -------------------- */

.cyb-duo {
  display: grid;
  grid-template-columns: 61.8fr 38.2fr;
  gap: var(--e3);
  align-items: start;
}

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

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

.cyb-carte {
  background: var(--cyb-carte);
  border: 1px solid var(--cyb-bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.cyb-carte-titre {
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--cyb-bord);
  font-weight: 600;
  font-size: 14px;
}

.cyb-carte-corps { padding: var(--e3); }

/* --- liste de messages -------------------------------------------- */

.cyb-liste { list-style: none; margin: 0; padding: 0; }

.cyb-ligne {
  display: block;
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--cyb-bord);
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}

.cyb-ligne:last-child { border-bottom: none; }
.cyb-ligne:hover { background: var(--cyb-fond); border-left-color: var(--cyb-ambre); }

.cyb-ligne-haut {
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: 2px;
}

.cyb-expediteur {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyb-date { color: var(--cyb-gris); font-size: 13px; white-space: nowrap; }

.cyb-objet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--e1);
}

/* --- motif : le vocabulaire du client, pas celui du filtre -------- */

.cyb-motif {
  display: inline-block;
  font-size: 12.5px;
  padding: 2px var(--e1);
  border-radius: 4px;
  background: var(--cyb-ambre-clair);
  color: var(--cyb-ambre);
  border: 1px solid rgba(181, 71, 8, .18);
}

/* --- actions ------------------------------------------------------ */

.cyb-actions { display: flex; gap: var(--e2); flex-wrap: wrap; }

.cyb-bouton {
  font: inherit;
  font-weight: 550;
  padding: var(--e1) var(--e3);
  border-radius: var(--rayon);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.cyb-b-liberer { background: var(--cyb-vert-clair); color: var(--cyb-vert); border-color: rgba(21, 128, 61, .25); }
.cyb-b-liberer:hover { background: #d9f5e3; }

.cyb-b-signaler { background: var(--cyb-rouge-clair); color: var(--cyb-rouge); border-color: rgba(180, 35, 24, .25); }
.cyb-b-signaler:hover { background: #fde4e2; }

.cyb-b-principal { background: var(--cyb-rose); color: #fff; }
.cyb-b-principal:hover { background: #c9134f; }

.cyb-b-discret { background: var(--cyb-carte); color: var(--cyb-gris); border-color: var(--cyb-bord); }
.cyb-b-discret:hover { color: var(--cyb-texte); }

/* --- en-têtes du message ------------------------------------------ */

.cyb-entetes {
  margin: 0 0 var(--e3);
  font-size: 14px;
}

.cyb-entetes div {
  display: flex;
  gap: var(--e2);
  padding: var(--e1) 0;
  border-bottom: 1px dashed var(--cyb-bord);
}

.cyb-entetes dt, .cyb-cle {
  color: var(--cyb-gris);
  min-width: 89px;
  flex: none;
}

.cyb-apercu {
  background: var(--cyb-fond);
  border: 1px solid var(--cyb-bord);
  border-radius: var(--rayon);
  padding: var(--e3);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  max-height: 55vh;
  overflow: auto;
}

/* --- listes d'expéditeurs ----------------------------------------- */

.cyb-jeton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e1) var(--e2);
  border-bottom: 1px solid var(--cyb-bord);
}

.cyb-jeton:last-child { border-bottom: none; }

.cyb-formulaire-ligne {
  display: flex;
  gap: var(--e1);
  margin-top: var(--e3);
}

input[type="text"], input[type="email"], input[type="password"] {
  font: inherit;
  flex: 1;
  padding: var(--e1) var(--e2);
  border: 1px solid var(--cyb-bord);
  border-radius: var(--rayon);
  background: var(--cyb-carte);
  color: var(--cyb-texte);
}

input:focus-visible, .cyb-bouton:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyb-rose);
  outline-offset: 2px;
}

/* --- états -------------------------------------------------------- */

.cyb-vide {
  text-align: center;
  padding: var(--e5) var(--e4);
  color: var(--cyb-gris);
}

.cyb-vide strong { display: block; color: var(--cyb-texte); margin-bottom: var(--e1); }

.cyb-avis {
  padding: var(--e2) var(--e3);
  border-radius: var(--rayon);
  margin-bottom: var(--e3);
  border: 1px solid;
}

.cyb-a-ok { background: var(--cyb-vert-clair); color: var(--cyb-vert); border-color: rgba(21, 128, 61, .25); }
.cyb-a-erreur { background: var(--cyb-rouge-clair); color: var(--cyb-rouge); border-color: rgba(180, 35, 24, .25); }

/* --- entrée ------------------------------------------------------- */

.cyb-entree {
  max-width: 377px; /* Fibonacci */
  margin: var(--e5) auto;
}

.cyb-entree label {
  display: block;
  margin-bottom: var(--e1);
  font-weight: 550;
  font-size: 14px;
}

.cyb-entree input { width: 100%; margin-bottom: var(--e3); }
.cyb-entree .cyb-bouton { width: 100%; }

/* --- console d'administration ------------------------------------- */

.cyb-vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(233px, 1fr)); /* Fibonacci */
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.cyb-chiffre {
  font-size: 34px;
  font-weight: 650;
  color: var(--cyb-bordeaux);
  line-height: 1.1;
}

.cyb-etiquette {
  color: var(--cyb-gris);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: var(--e1) var(--e2); border-bottom: 1px solid var(--cyb-bord); }
th { color: var(--cyb-gris); font-weight: 550; font-size: 13px; }

.cyb-pied {
  text-align: center;
  color: var(--cyb-gris);
  font-size: 13px;
  padding: var(--e4);
}


/* Emprunt d'identité : on regarde la boîte de quelqu'un d'autre.
   L'ambre plutôt que le rouge — ce n'est pas une panne, c'est un état
   inhabituel dont il ne faut pas s'habituer. */
.cyb-emprunt {
  background: #fffaeb;
  border-bottom: 1px solid #fedf89;
  color: #7a2e0e;
  padding: 10px 21px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  flex-wrap: wrap;
}
.cyb-emprunt a {
  color: #7a2e0e;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

/* --- gestes d'administration ----------------------------------------
   Une rangée de formulaire : le champ prend la place, le bouton reste à
   sa taille. À ne pas confondre avec `.cyb-ligne`, qui est une ligne de
   liste de messages. */
.cyb-rangee {
  display: flex;
  gap: var(--e1);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--e3);
}

.cyb-champ {
  font: inherit;
  flex: 1;
  min-width: 144px;          /* Fibonacci : le champ reste utilisable */
  padding: var(--e1) var(--e2);
  border: 1px solid var(--cyb-bord);
  border-radius: var(--rayon);
  background: var(--cyb-carte);
  color: var(--cyb-texte);
}
select.cyb-champ { flex: 0 0 auto; }

.cyb-discret { color: var(--cyb-gris); font-size: 13px; }

/* Retirer une entrée est un geste destructeur : il se présente comme un
   lien, pas comme un bouton d'action principale. On ne clique pas dessus
   par habitude. */
.cyb-lien-bouton {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--cyb-gris);
  text-decoration: underline;
  cursor: pointer;
}
.cyb-lien-bouton:hover { color: var(--cyb-rose); }

.cyb-espace-haut { margin-top: var(--e3); }

/* --- les chiffres du client -----------------------------------------
   Quatre nombres et une barre. Pas de bibliothèque de graphiques : la CSP
   interdit tout script, et un camembert n'aurait rien dit de plus qu'une
   barre sur la seule question qui compte — quelle part a été écartée. */
.cyb-kpi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
}
.cyb-kpi > div { display: flex; flex-direction: column; gap: 3px; }

.cyb-kpi-chiffre {
  font-size: 34px;              /* Fibonacci */
  font-weight: 600;
  line-height: 1;
  color: var(--cyb-texte);
}
.cyb-k-ok { color: var(--cyb-vert); }
.cyb-k-retenu { color: var(--cyb-ambre); }
.cyb-k-virus { color: var(--cyb-rouge); }

.cyb-barre {
  display: flex;
  height: 13px;                 /* Fibonacci */
  margin-top: var(--e3);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--cyb-bord);
}
.cyb-barre span { display: block; }
.cyb-part-ok { background: var(--cyb-vert); }
.cyb-part-retenu { background: var(--cyb-ambre); }

.cyb-espace-bas { margin-bottom: var(--e3); }

/* --- thème sombre ----------------------------------------------------
   Deux entrées : le choix explicite (`data-theme`, posé par le serveur) et,
   à défaut, le réglage du système. Le choix l'emporte toujours — quelqu'un
   qui a cliqué ne doit pas voir son écran changer au coucher du soleil.

   Seuls les jetons de couleur sont redéfinis : tout le reste de la feuille
   les utilise, donc rien d'autre n'est à reprendre. */
:root[data-theme="sombre"] {
  --cyb-fond: #14161a;
  --cyb-carte: #1c1f26;
  --cyb-bord: #2b3039;
  --cyb-texte: #e5e7eb;
  --cyb-gris: #9aa2af;

  /* Les couleurs d'état sont éclaircies : sur fond sombre, le vert et le
     rouge d'origine deviennent illisibles. */
  --cyb-vert: #4ade80;
  --cyb-vert-clair: #10281a;
  --cyb-ambre: #fbbf24;
  --cyb-ambre-clair: #2a2113;
  --cyb-rouge: #f87171;
  --cyb-rouge-clair: #2c1618;

  --cyb-rose: #f2477f;
  --ombre: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --cyb-fond: #14161a;
    --cyb-carte: #1c1f26;
    --cyb-bord: #2b3039;
    --cyb-texte: #e5e7eb;
    --cyb-gris: #9aa2af;
    --cyb-vert: #4ade80;
    --cyb-vert-clair: #10281a;
    --cyb-ambre: #fbbf24;
    --cyb-ambre-clair: #2a2113;
    --cyb-rouge: #f87171;
    --cyb-rouge-clair: #2c1618;
    --cyb-rose: #f2477f;
    --ombre: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
  }
}

.cyb-bascule { white-space: nowrap; }

/* Largeurs de la barre, par paliers de 5 % (voir rapport.html). */
.cyb-l0 { width: 0%; }
.cyb-l5 { width: 5%; }
.cyb-l10 { width: 10%; }
.cyb-l15 { width: 15%; }
.cyb-l20 { width: 20%; }
.cyb-l25 { width: 25%; }
.cyb-l30 { width: 30%; }
.cyb-l35 { width: 35%; }
.cyb-l40 { width: 40%; }
.cyb-l45 { width: 45%; }
.cyb-l50 { width: 50%; }
.cyb-l55 { width: 55%; }
.cyb-l60 { width: 60%; }
.cyb-l65 { width: 65%; }
.cyb-l70 { width: 70%; }
.cyb-l75 { width: 75%; }
.cyb-l80 { width: 80%; }
.cyb-l85 { width: 85%; }
.cyb-l90 { width: 90%; }
.cyb-l95 { width: 95%; }
.cyb-l100 { width: 100%; }

/* --- utilitaires nommés ----------------------------------------------
   Ils remplacent les attributs `style`, que la CSP ignore en silence.
   Chacun porte une intention, pas une valeur : c'est ce qui les rend
   relisibles six mois plus tard. */
.cyb-colonne { max-width: 610px; }        /* Fibonacci */
.cyb-centre-bloc { margin: var(--e5) auto; }
.cyb-centre { text-align: center; }
.cyb-sans-marge { margin: 0; }
.cyb-sans-marge-haut { margin-top: 0; }
.cyb-sans-marge-bas { margin-bottom: 0; }
.cyb-espace-haut-large { margin-top: var(--e4); }
.cyb-bord-ambre { border-left-color: var(--cyb-ambre); }

/* --- l'écran de branchement ------------------------------------------ */

/* Le port tient en cinq caractères : sans largeur propre, il hérite du
   « flex: 1 » des autres champs et prend la place d'un nom de domaine.
   89 px, Fibonacci, laisse voir « 65535 » sans le tronquer. */
.cyb-champ-court { flex: 0 0 89px; min-width: 89px; }

/* Une mise en garde dans une cellule de tableau : l'encadré d'un avis y
   casserait la ligne. L'ambre est déjà la couleur des avertissements. */
.cyb-alerte-texte { color: var(--cyb-ambre); font-weight: 600; }

/* La phrase qui dit pourquoi l'écran existe. Neuf gabarits l'emploient
   depuis l'origine sans qu'elle soit définie : elles se rendaient au même
   poids que le contenu, ce qui noyait l'explication dans le reste. */
.cyb-note {
  margin: 0 0 var(--e2);
  color: var(--cyb-gris);
  font-size: 0.89rem;        /* Fibonacci */
  line-height: 1.55;
  max-width: 89ch;           /* Fibonacci : lisible sans etrangler la carte */
}
.cyb-note strong { color: var(--cyb-texte); }

/* KPI avancé du rapport — le détail que les quatre chiffres ne disent pas :
   ce qui a été écarté (spam vs dangereux), le volume, et la tendance. */
.cyb-kpi-avance {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--cyb-bord);
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ~ deux colonnes, φ-neutre et lisible */
  gap: var(--e3);
}
.cyb-fait { display: flex; flex-direction: column; gap: 3px; }
.cyb-pleine-largeur { grid-column: 1 / -1; }   /* le sparkline prend tout */
.cyb-fait-cle {
  font-size: 0.82rem;
  color: var(--cyb-gris);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cyb-fait-val { font-size: 1.34rem; font-weight: 600; }  /* Fibonacci */

/* Sparkline : huit colonnes, hauteur = part écartée ce jour-là. Les hauteurs
   passent par une classe (CSP interdit le style en ligne), au palier de 5 %. */
.cyb-spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 55px;              /* Fibonacci */
  margin: var(--e2) 0;
}
.cyb-spark-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--cyb-fond);
  border-radius: 2px;
}
.cyb-spark-barre {
  width: 100%;
  background: var(--cyb-ambre);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}
/* Hauteurs, paliers de 5 % — miroir vertical des largeurs cyb-l*. */
.cyb-spark-barre.cyb-l0 { height: 0; } .cyb-spark-barre.cyb-l5 { height: 5%; }
.cyb-spark-barre.cyb-l10 { height: 10%; } .cyb-spark-barre.cyb-l15 { height: 15%; }
.cyb-spark-barre.cyb-l20 { height: 20%; } .cyb-spark-barre.cyb-l25 { height: 25%; }
.cyb-spark-barre.cyb-l30 { height: 30%; } .cyb-spark-barre.cyb-l35 { height: 35%; }
.cyb-spark-barre.cyb-l40 { height: 40%; } .cyb-spark-barre.cyb-l45 { height: 45%; }
.cyb-spark-barre.cyb-l50 { height: 50%; } .cyb-spark-barre.cyb-l55 { height: 55%; }
.cyb-spark-barre.cyb-l60 { height: 60%; } .cyb-spark-barre.cyb-l65 { height: 65%; }
.cyb-spark-barre.cyb-l70 { height: 70%; } .cyb-spark-barre.cyb-l75 { height: 75%; }
.cyb-spark-barre.cyb-l80 { height: 80%; } .cyb-spark-barre.cyb-l85 { height: 85%; }
.cyb-spark-barre.cyb-l90 { height: 90%; } .cyb-spark-barre.cyb-l95 { height: 95%; }
.cyb-spark-barre.cyb-l100 { height: 100%; }

@media (max-width: 620px) {
  .cyb-kpi-avance { grid-template-columns: 1fr; }  /* une colonne sur mobile */
}

/* Tableau des boîtes du domaine, et liste des menaces — le KPI par domaine. */
.cyb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: var(--e2) 0;
}
.cyb-table th, .cyb-table td {
  text-align: left;
  padding: 8px 13px;          /* Fibonacci */
  border-bottom: 1px solid var(--cyb-bord);
}
.cyb-table th {
  color: var(--cyb-gris);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cyb-table td:nth-child(2), .cyb-table td:nth-child(3),
.cyb-table th:nth-child(2), .cyb-table th:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cyb-table tr:last-child td { border-bottom: none; }

.cyb-liste-menaces {
  list-style: none;
  padding: 0;
  margin: var(--e2) 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cyb-liste-menaces li {
  padding: 8px 13px;
  background: var(--cyb-rouge-clair, #fef3f2);
  border-radius: 5px;
  font-size: 0.92rem;
}
.cyb-liste-menaces .cyb-k-virus { font-weight: 700; margin-right: 5px; }