/* Wendkouni Horizon — portail client.
   Identité construite sur le logo du laboratoire : bleu d'atelier, or de la
   boucle, encre marine du nom. Le motif de la ligne d'horizon (marine → bleu
   → or) est la seule signature graphique de la page : elle apparaît une fois,
   en tête, et nulle part ailleurs. Le reste reste sobre — c'est un rapport de
   laboratoire, pas une vitrine. */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --marine: #0a2242;
  --marine-douce: #1b3a63;
  --bleu: #095f9c;       /* texte/liens — 6.71:1 sur blanc (AA) */
  --bleu-vif: #0b7fd1;   /* décoratif seulement : graphiques, dégradés */
  --bleu-doux: #e5f1fb;
  --or: #b9860b;         /* assombri pour 3:1 en bordure/indicateur (AA non-texte) */
  --or-vif: #fdbe00;
  --or-fond: #fdf4e0;

  --fond: #f5f4ef;
  --surface: #ffffff;
  --surface-creuse: #f0eee6;
  --bord: #dfdcd2;
  --bord-fort: #c7c2b4;
  --texte: #1c1e22;
  --discret: #6b6a63;

  --severe: #a23324;
  --severe-fond: #faeae7;
  --severe-bord: #eec9c0;
  --abnormal: #87560a;   /* assombri pour 4.5:1 sur --abnormal-fond (AA) */
  --abnormal-fond: #fbf0df;
  --abnormal-bord: #edd4a8;
  --succes: #1f6b45;
  --succes-fond: #e9f4ee;
  --succes-bord: #c4e0cf;

  --serif-affiche: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .88em; }

/* ------------------------------------------------------------------ en-tête */

.masthead {
  background: var(--marine);
  color: #fff;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--marine) 0%, var(--bleu-vif) 55%, var(--or-vif) 100%) 1;
}

.masthead .dedans {
  max-width: 64rem; margin: 0 auto; padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}

.masthead .marque {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--serif-affiche);
  text-transform: uppercase;
}
.masthead .marque img { height: 34px; width: 34px; display: block; }
.masthead .marque .nom { font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; line-height: 1.05; }
.masthead .marque .nom small {
  display: block; font-family: var(--sans); text-transform: none;
  font-weight: 400; font-size: .72rem; letter-spacing: normal; color: #b9c6da;
}

.masthead .espace { flex: 1; }
.masthead .qui { font-size: .85rem; color: #d7deea; text-align: right; line-height: 1.3; }
.masthead .qui strong { display: block; color: #fff; font-weight: 500; }
.masthead form { margin: 0; }
.masthead button {
  background: none; border: 1px solid rgba(255,255,255,.3); color: #fff;
  padding: .4rem .8rem; border-radius: var(--rayon); cursor: pointer;
  font: inherit; font-size: .84rem;
}
.masthead button:hover { border-color: var(--or-vif); color: var(--or-vif); }

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

.onglets { background: var(--surface); border-bottom: 1px solid var(--bord); }
.onglets .dedans { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: 1.75rem; }
.onglets a {
  display: block; padding: .8rem 0; text-decoration: none; color: var(--discret);
  border-bottom: 2px solid transparent; font-size: .9rem; font-weight: 500;
}
.onglets a:hover { color: var(--marine); }
.onglets a.actif { color: var(--marine); border-bottom-color: var(--or); font-weight: 600; }
.onglets .espace { flex: 1; }

main { max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 4.5rem; }

/* ------------------------------------------------------------------ fil */

.fil { color: var(--discret); font-size: .85rem; margin-bottom: .5rem; }
.fil a { text-decoration: none; color: var(--discret); }
.fil a:hover { text-decoration: underline; color: var(--marine); }

h1 {
  font-family: var(--serif-affiche); font-weight: 700; font-size: 2rem;
  letter-spacing: .01em; margin: 0 0 .3rem; color: var(--marine);
}
h2 {
  font-family: var(--serif-affiche); font-weight: 600; font-size: 1.15rem;
  margin: 0 0 1rem; color: var(--marine); letter-spacing: .01em;
}
h3 {
  font-size: .78rem; margin: 1.4rem 0 .6rem; color: var(--discret);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.sous { color: var(--discret); margin: 0 0 1.75rem; font-size: .96rem; max-width: 48rem; }

/* ------------------------------------------------------------------ masthead de page (accueil / actif) */

.entete-page {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end;
  padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--bord);
}
.entete-page .titres { flex: 1; min-width: 16rem; }
.entete-page h1 { margin-bottom: .35rem; }
.entete-page .sous { margin: 0; }

.stats { display: flex; gap: 2.25rem; flex-wrap: wrap; }
.stat { text-align: right; }
.stat strong {
  display: block; font-family: var(--serif-affiche); font-weight: 700;
  font-size: 2rem; line-height: 1; color: var(--marine); font-variant-numeric: tabular-nums;
}
.stat span { color: var(--discret); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.stat.attention strong { color: var(--severe); }

/* ------------------------------------------------------------------ sections */

section.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-top: 2px solid var(--marine-douce);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
section.carte.discrete { border-top-color: var(--bord); }

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

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--bord); }
th { color: var(--discret); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--surface-creuse); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-defile { overflow-x: auto; }

.vide { color: var(--discret); font-style: italic; }

/* ------------------------------------------------------------------ alarme : point + étiquette */

.alarme { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 500; }
.alarme::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bord-fort); }
.alarme.severe { color: var(--severe); }
.alarme.severe::before { background: var(--severe); box-shadow: 0 0 0 3px var(--severe-fond); }
.alarme.abnormal { color: var(--abnormal); }
.alarme.abnormal::before { background: var(--abnormal); box-shadow: 0 0 0 3px var(--abnormal-fond); }
.alarme.ok { color: var(--succes); }
.alarme.ok::before { background: var(--succes); }

.etiquette { display: inline-block; padding: .15rem .55rem; border-radius: 2px;
             font-size: .78rem; font-weight: 600; border: 1px solid var(--bord); }
.etiquette.severe { background: var(--severe-fond); color: var(--severe); border-color: var(--severe-bord); }
.etiquette.abnormal { background: var(--abnormal-fond); color: var(--abnormal); border-color: var(--abnormal-bord); }
.etiquette.ok { background: var(--succes-fond); color: var(--succes); border-color: var(--succes-bord); }

/* ------------------------------------------------------------------ graphiques */

.graphique { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .axe { stroke: var(--bord-fort); stroke-width: 1; }
.graphique .grille { stroke: var(--bord); stroke-width: .6; }
.graphique .axe-texte {
  font: 8px var(--sans); fill: var(--discret);
}
.graphique .axe-unite { font: 700 8px var(--sans); fill: var(--discret); }
.graphique .courbe {
  fill: none; stroke: var(--bleu-vif); stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round;
}
.graphique .point { fill: var(--bleu-vif); }
.graphique .point.severe { fill: var(--severe); }
.graphique .point.abnormal { fill: var(--abnormal); }
.graphique .seuil-alerte { stroke: var(--severe); stroke-width: 1; stroke-dasharray: 2 3; opacity: .65; }
.graphique .seuil-avertissement { stroke: var(--abnormal); stroke-width: 1; stroke-dasharray: 2 3; opacity: .65; }

.tendance { border-bottom: 1px solid var(--bord); padding: 1rem 0; }
.tendance:last-child { border-bottom: none; }
.tendance .entete { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .3rem; }
.tendance .entete .nom { font-weight: 600; font-size: .95rem; color: var(--marine); }
.tendance .entete .valeur { font-variant-numeric: tabular-nums; font-weight: 500; }
.tendance .entete .seuil { color: var(--discret); font-size: .78rem; }

/* ------------------------------------------------------------------ boutons et champs */

button, .bouton {
  font: inherit;
  padding: .55rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid var(--bord-fort);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .bouton:hover { border-color: var(--marine); }
.bouton.principal, button.principal {
  background: var(--marine); color: #fff; border-color: var(--marine);
}
.bouton.principal:hover, button.principal:hover { background: var(--marine-douce); }

label { display: block; font-size: .85rem; margin-bottom: .25rem; font-weight: 500; }
.champ { margin-bottom: 1rem; }
input[type="email"], input[type="password"], input[type="text"] {
  font: inherit; padding: .55rem .65rem; border: 1px solid var(--bord-fort);
  border-radius: var(--rayon); background: var(--surface); color: var(--texte);
}

/* ------------------------------------------------------------------ bandeaux */

.bandeau { padding: .75rem 1rem; border-radius: var(--rayon); margin-bottom: 1.25rem; font-size: .9rem; }
.bandeau.attention { background: var(--abnormal-fond); color: #7a4d0a; border: 1px solid var(--abnormal-bord); }
.bandeau.succes { background: var(--succes-fond); color: var(--succes); border: 1px solid var(--succes-bord); }
.bandeau.erreur { background: var(--severe-fond); color: var(--severe); border: 1px solid var(--severe-bord); }

/* ------------------------------------------------------------------ connexion */

.connexion {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 2rem 1rem;
  background: var(--marine);
  background-image: linear-gradient(160deg, var(--marine) 0%, var(--marine) 60%, var(--marine-douce) 100%);
  position: relative;
}
.connexion::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--marine) 0%, var(--bleu-vif) 55%, var(--or-vif) 100%);
}
.connexion .marque-connexion {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; color: #fff;
}
.connexion .marque-connexion img { height: 44px; width: 44px; }
.connexion .marque-connexion .nom {
  font-family: var(--serif-affiche); font-weight: 700; text-transform: uppercase;
  font-size: 1.2rem; letter-spacing: .03em; line-height: 1.1;
}
.connexion .marque-connexion .nom small {
  display: block; font-family: var(--sans); text-transform: none; font-weight: 400;
  font-size: .74rem; color: #b9c6da;
}
.connexion .carte { width: 100%; max-width: 23rem; margin: 0; border-top-color: var(--or); }
.connexion h1 { font-size: 1.2rem; margin-bottom: .3rem; }
.connexion .sous { margin-bottom: 1.5rem; font-size: .88rem; }
.connexion button { width: 100%; }
.connexion input { width: 100%; }

@media (max-width: 640px) {
  .stats { gap: 1.25rem; }
  .entete-page { align-items: flex-start; }
  .stat { text-align: left; }
  main { padding: 1.5rem .9rem 3rem; }
  section.carte { padding: 1.1rem 1.15rem; }
}

/* ==========================================================================
   Proposition d'accueil (/portail/accueil-v2)
   Tout est préfixé `v2-` : rien ici ne touche aux pages existantes. Mêmes
   jetons de couleur que le reste du portail (AA déjà vérifié). L'état d'un
   actif n'est jamais porté par la couleur seule : icône + libellé.
   ========================================================================== */

.v2-comparaison {
  background: var(--bleu-doux); border: 1px solid #b9d5ec; color: var(--marine);
  padding: .65rem 1rem; border-radius: var(--rayon); font-size: .88rem; margin-bottom: 1.25rem;
}
.v2-comparaison a { margin-left: .5rem; font-weight: 600; }

.v2-icone { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }

/* --- état (icône + texte) */
.v2-etat { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--bord); white-space: nowrap; }
.v2-etat.severe { background: var(--severe-fond); color: var(--severe); border-color: var(--severe-bord); }
.v2-etat.abnormal { background: var(--abnormal-fond); color: var(--abnormal); border-color: var(--abnormal-bord); }
.v2-etat.ok { background: var(--succes-fond); color: var(--succes); border-color: var(--succes-bord); }
.v2-etat.aucun { background: var(--surface-creuse); color: var(--discret); }

/* --- verdict */
.v2-verdict {
  position: relative; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
  background: var(--marine); color: #fff; border-radius: var(--rayon);
  padding: 1.75rem 1.75rem 1.9rem; margin-bottom: 1.25rem; overflow: hidden;
  border-left: 6px solid var(--bleu-vif);
}
.v2-verdict::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--marine) 0%, var(--bleu-vif) 55%, var(--or-vif) 100%);
}
.v2-verdict.severe { border-left-color: #ff8a78; }
.v2-verdict.abnormal { border-left-color: var(--or-vif); }
.v2-verdict.ok { border-left-color: #6fcf97; }
.v2-verdict-texte { flex: 1; min-width: 16rem; }
.v2-salut { margin: 0 0 .35rem; color: #b9c6da; font-size: .85rem; }
.v2-verdict h1 { color: #fff; font-size: 2.1rem; line-height: 1.1; margin: 0 0 .45rem; }
.v2-verdict-sous { margin: 0; color: #d7deea; font-size: .95rem; max-width: 40rem; }
.v2-cta {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem 1.1rem;
  background: var(--or-vif); color: var(--marine); font-weight: 700; text-decoration: none;
  border-radius: var(--rayon); transition: background .15s, transform .15s;
}
.v2-cta:hover { background: #ffd04d; transform: translateX(2px); }

/* --- chiffres */
.v2-chiffres { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1rem; margin-bottom: 2rem; }
.v2-chiffre { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.15rem; }
.v2-chiffre strong { display: block; font: 700 2.1rem/1 var(--serif-affiche); color: var(--marine); font-variant-numeric: tabular-nums; }
.v2-chiffre > span, .v2-titre-mini { display: block; margin-top: .3rem; color: var(--discret); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.v2-titre-mini { margin: 0 0 .6rem; }
.v2-barre { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--surface-creuse); }
.v2-barre i { display: block; min-width: 6px; }
.v2-barre .severe { background: var(--severe); }
.v2-barre .abnormal { background: var(--or-vif); }
.v2-barre .ok { background: var(--succes); }
.v2-barre .aucun { background: var(--bord-fort); }
.v2-legende { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: .7rem 0 0; padding: 0; font-size: .85rem; }
.v2-legende li { display: flex; align-items: center; gap: .4rem; }

/* --- blocs */
.v2-bloc { margin-bottom: 2rem; }
.v2-bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.v2-bloc-tete h2 { margin: 0; }
.v2-bloc-tete a { font-size: .88rem; font-weight: 500; }

/* --- priorités */
.v2-priorites, .v2-grille, .v2-liste { list-style: none; margin: 0; padding: 0; }
.v2-priorites { display: grid; gap: .6rem; }
.v2-prio {
  display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--bord-fort);
  border-radius: var(--rayon); text-decoration: none; color: var(--texte);
  transition: border-color .15s, box-shadow .15s;
}
.v2-prio.severe { border-left-color: var(--severe); }
.v2-prio.abnormal { border-left-color: var(--or-vif); }
.v2-prio:hover { border-color: var(--marine); box-shadow: 0 2px 8px rgba(10,34,66,.08); }
.v2-prio-corps { flex: 1; min-width: 0; }
.v2-prio-corps strong { display: block; color: var(--marine); }
.v2-prio-corps small, .v2-actif small, .v2-liste small { color: var(--discret); font-size: .8rem; }
.v2-prio > .v2-icone { color: var(--discret); }

/* --- actifs */
.v2-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.v2-actif {
  display: flex; flex-direction: column; gap: .35rem; height: 100%; min-height: 44px;
  padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--bord);
  border-top: 3px solid var(--bord-fort); border-radius: var(--rayon);
  text-decoration: none; color: var(--texte); transition: border-color .15s, box-shadow .15s;
}
.v2-actif.severe { border-top-color: var(--severe); }
.v2-actif.abnormal { border-top-color: var(--or-vif); }
.v2-actif.ok { border-top-color: var(--succes); }
.v2-actif:hover { border-color: var(--marine); box-shadow: 0 2px 8px rgba(10,34,66,.08); }
.v2-actif-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.v2-actif-haut strong { color: var(--marine); font-size: 1rem; }
.v2-actif-bas { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; font-size: .8rem; color: var(--discret); border-top: 1px solid var(--bord); }

/* --- derniers résultats */
.v2-liste { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
.v2-liste li + li { border-top: 1px solid var(--bord); }
.v2-liste a { display: flex; align-items: center; gap: 1rem; min-height: 48px; padding: .6rem 1rem; text-decoration: none; color: var(--texte); transition: background .15s; }
.v2-liste a:hover { background: var(--surface-creuse); }
.v2-liste-date { width: 5.5rem; flex: none; color: var(--discret); font-size: .85rem; font-variant-numeric: tabular-nums; }
.v2-liste-corps { flex: 1; min-width: 0; }
.v2-liste-corps small { margin-left: .4rem; }

/* --- entrée discrète ; coupée si l'utilisateur le demande */
@media (prefers-reduced-motion: no-preference) {
  .v2-verdict, .v2-chiffre, .v2-bloc { animation: v2-entree .35s ease-out both; }
  .v2-chiffre:nth-child(2) { animation-delay: .05s; }
  .v2-chiffre:nth-child(3) { animation-delay: .1s; }
  @keyframes v2-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 760px) {
  .v2-chiffres { grid-template-columns: 1fr 1fr; }
  .v2-chiffre.grand { grid-column: 1 / -1; }
  .v2-verdict { padding: 1.35rem 1.2rem 1.5rem; }
  .v2-verdict h1 { font-size: 1.6rem; }
  .v2-cta { width: 100%; justify-content: center; }
  .v2-prio { flex-wrap: wrap; }
  .v2-liste a { flex-wrap: wrap; gap: .3rem .8rem; }
  .v2-liste-date { width: 100%; }
}