/* ============================================================================
   KHALDYN — application cliente (app.khaldyn.com)
   Reprend les jetons du site vitrine, puis ajoute la coque applicative.
   ========================================================================== */

:root {
  /* Palette (identique au site) */
  --noir: #0A0A0A; --gris-fonce: #3A3A3A; --gris-clair: #D9D9D9;
  --gris-tres-clair: #F2F2F2; --blanc: #FFFFFF; --acier: #6B7C8F;
  --alerte: #C4453A;

  /* Niveaux Tumult — bornes publiées : 0-30 / 30-60 / 60-85 / 85-100 */
  --niv-contenue: #B9C0C7;
  --niv-vigilance: #6B7C8F;
  --niv-alerte: #A85A4E;
  --niv-crise: #C4453A;

  --trait: #D9D9D9; --trait-fort: #B9B9B9; --texte-doux: #3A3A3A;

  --mono: "GT America Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --barre: 248px;          /* largeur du rail de navigation */
  --tete: 66px;            /* hauteur de l'en-tête */
  --pas: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); color: var(--noir); background: var(--gris-tres-clair);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--mono); font-weight: 500; margin: 0; letter-spacing: -.01em; }

.k-label {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .11em; color: var(--gris-fonce);
}
.k-tabulaire { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Repères d'angle — signature visuelle du système */
.k-cadre { position: relative; }
.k-cadre::before, .k-cadre::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid currentColor;
  opacity: .45; pointer-events: none;
}
.k-cadre::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.k-cadre::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---- Marque -------------------------------------------------------------- */
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marque svg { width: 26px; height: 26px; display: block; flex: none; }
.marque-nom { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; letter-spacing: .06em; }
.marque-sous { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-fonce); display: block; }

/* ---- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 12px 18px; border: 1px solid var(--noir); background: var(--noir); color: var(--blanc);
  text-decoration: none; cursor: pointer; transition: background .18s;
}
.btn:hover { background: var(--gris-fonce); }
.btn--ligne { background: transparent; color: var(--noir); }
.btn--ligne:hover { background: var(--noir); color: var(--blanc); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--large { width: 100%; }

/* ---- Champs -------------------------------------------------------------- */
.champ { display: block; margin-bottom: 16px; }
.champ span { display: block; font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gris-fonce); margin-bottom: 6px; }
.champ input, .champ select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--trait-fort); background: var(--blanc);
  font-size: .95rem; font-family: var(--sans); border-radius: 0;
}
.champ input:focus, .champ select:focus { outline: 2px solid var(--acier); outline-offset: 1px; }

/* ---- Messages ------------------------------------------------------------ */
.avis { padding: 12px 15px; font-size: .88rem; line-height: 1.5; border: 1px solid; margin-bottom: 16px; }
.avis--err { background: rgba(196,69,58,.07); border-color: rgba(196,69,58,.35); color: #9c352c; }
.avis--ok { background: rgba(107,124,143,.08); border-color: rgba(107,124,143,.35); color: #4a5866; }
.avis--info { background: var(--gris-tres-clair); border-color: var(--trait); color: var(--gris-fonce); }

/* ============================ CONNEXION ==================================== */
.entree { min-height: 100%; display: grid; grid-template-columns: 1fr 480px; }
.entree-visuel {
  background: var(--noir); color: var(--blanc); padding: 48px; display: flex;
  flex-direction: column; justify-content: space-between;
}
.entree-visuel h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.02; text-transform: uppercase; }
.entree-visuel p { color: rgba(255,255,255,.7); line-height: 1.7; max-width: 42ch; }
.entree-forme { background: var(--blanc); padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.entree-forme h2 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: 6px; }
.entree-forme .intro { color: var(--gris-fonce); font-size: .9rem; line-height: 1.6; margin: 0 0 26px; }
.entree-liens { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; }
.entree-liens a { color: var(--acier); text-decoration: none; cursor: pointer; }
.entree-liens a:hover { color: var(--noir); }

/* ============================ COQUE APPLICATIVE ============================ */
.app { display: grid; grid-template-columns: var(--barre) 1fr; min-height: 100vh; }

/* Rail de navigation */
.rail { background: var(--blanc); border-right: 1px solid var(--trait); display: flex;
  flex-direction: column; position: sticky; top: 0; height: 100vh; }
.rail-tete { height: var(--tete); display: flex; align-items: center; padding: 0 20px;
  border-bottom: 1px solid var(--trait); }
.rail-nav { padding: 14px 0; flex: 1; overflow-y: auto; }
.rail-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 20px; text-decoration: none;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gris-fonce); border-left: 2px solid transparent;
}
.rail-nav a:hover { background: var(--gris-tres-clair); color: var(--noir); }
.rail-nav a.actif { color: var(--noir); border-left-color: var(--noir); background: var(--gris-tres-clair); }
.rail-nav a svg { width: 16px; height: 16px; flex: none; }
.rail-nav a[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.rail-pied { padding: 20px; border-top: 1px solid var(--trait); }
.rail-devise { font-family: var(--mono); font-size: .68rem; line-height: 1.7; text-transform: uppercase;
  letter-spacing: .06em; }
.rail-etat { font-family: var(--mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux); margin-top: 12px; line-height: 1.6; }

/* En-tête */
.tete { height: var(--tete); background: var(--blanc); border-bottom: 1px solid var(--trait);
  display: flex; align-items: center; gap: 20px; padding: 0 24px; position: sticky; top: 0; z-index: 20; }
.tete-produit { display: flex; align-items: center; gap: 11px; padding-right: 22px; border-right: 1px solid var(--trait); }
.tete-recherche { flex: 1; max-width: 460px; position: relative; }
.tete-recherche input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--trait);
  background: var(--gris-tres-clair); font-size: .88rem; font-family: var(--sans); }
.tete-recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--gris-fonce); }
.tete-droite { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.tete-compte { display: flex; align-items: center; gap: 10px; }
.pastille-compte { width: 34px; height: 34px; background: var(--noir); color: var(--blanc);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  font-size: .7rem; font-weight: 700; }
.tete-compte-nom { font-size: .85rem; font-weight: 500; line-height: 1.25; }
.tete-compte-org { font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gris-fonce); }

/* Contenu */
.contenu { padding: 26px 26px 60px; }
.bandeau-degrade { margin-bottom: 22px; }

.sec-titre { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.sec-num { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--acier); }
.sec-titre h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .11em; color: var(--gris-fonce); }
.sec-titre .lien { margin-left: auto; font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--acier); text-decoration: none; }

/* Bandeau d'ouverture */
.ouverture { background: var(--blanc); border: 1px solid var(--trait); padding: 26px 28px;
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 32px; align-items: center; margin-bottom: 18px; }
.ouverture h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; line-height: 1.05; }
.ouverture .sous { color: var(--gris-fonce); font-size: .92rem; margin-top: 8px; }
.ouverture .horo { font-family: var(--mono); font-size: .72rem; line-height: 1.9; color: var(--gris-fonce);
  padding-left: 32px; border-left: 1px solid var(--trait); white-space: nowrap; }
.ouverture .note { font-size: .84rem; line-height: 1.65; color: var(--gris-fonce); max-width: 34ch; }

/* Cartes de mesure */
.mesures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.mesure { background: var(--blanc); border: 1px solid var(--trait); padding: 18px 20px; }
.mesure-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mesure-tete svg { width: 18px; height: 18px; color: var(--acier); flex: none; }
.mesure-val { font-family: var(--mono); font-size: 2.1rem; line-height: 1; }
.mesure-val small { font-size: .82rem; color: var(--gris-fonce); }
.mesure-sous { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--gris-fonce); margin-top: 8px; }

/* Échelle Tumult à quatre segments */
.echelle { display: flex; gap: 3px; margin-top: 12px; }
.echelle span { height: 6px; flex: 1; background: var(--gris-clair); }
.echelle span.on:nth-child(1) { background: var(--niv-contenue); }
.echelle span.on:nth-child(2) { background: var(--niv-vigilance); }
.echelle span.on:nth-child(3) { background: var(--niv-alerte); }
.echelle span.on:nth-child(4) { background: var(--niv-crise); }
.echelle-legende { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: .56rem; color: var(--texte-doux); margin-top: 5px; }

/* Grille principale */
.grille { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.bloc { background: var(--blanc); border: 1px solid var(--trait); }
.bloc-tete { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.bloc-corps { padding: 18px; }
.bloc-corps--serre { padding: 0; }

/* Carte */
#carte { height: 460px; width: 100%; background: var(--gris-tres-clair); }
.leaflet-container { font-family: var(--sans); background: var(--gris-tres-clair); }
.carte-legende { padding: 12px 18px; border-top: 1px solid var(--trait); display: flex;
  gap: 20px; flex-wrap: wrap; align-items: center; }
.carte-legende span { display: flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-fonce); }
.carte-legende i { width: 11px; height: 11px; display: block; }

/* Liste d'alertes / zones */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--trait); }
.liste li:last-child { border-bottom: 0; }
.liste .pt { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--acier); }
.liste .pt--3 { background: var(--alerte); }
.liste .pt--2 { background: var(--niv-alerte); }
.liste .pt--1 { background: var(--acier); }
.liste .titre { font-size: .92rem; font-weight: 500; line-height: 1.4; }
.liste .meta { font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gris-fonce); margin-top: 5px; line-height: 1.6; }
.liste .dist { margin-left: auto; font-family: var(--mono); font-size: .64rem; color: var(--texte-doux);
  white-space: nowrap; }

/* Lecture combinée (phrase rédigée par l'API — jamais recomposée ici) */
.lecture { padding: 18px; border-left: 3px solid var(--acier); background: var(--gris-tres-clair);
  font-size: .93rem; line-height: 1.65; }

/* Recherche d'adresse */
.resultat-adresse { border: 1px solid var(--trait); background: var(--blanc); padding: 22px; margin-top: 16px; }
.verdict { font-family: var(--mono); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 12px; }
.verdict i { width: 12px; height: 12px; display: block; }
.verdict--concerne i { background: var(--alerte); }
.verdict--proche i { background: var(--niv-alerte); }
.verdict--hors i { background: var(--acier); }

/* Bloc verrouillé par le niveau d'habilitation */
.verrou { padding: 26px 20px; text-align: center; }
.verrou svg { width: 22px; height: 22px; color: var(--gris-clair); margin-bottom: 10px; }
.verrou p { font-size: .88rem; line-height: 1.6; color: var(--gris-fonce); margin: 0 0 4px; }
.verrou .k-label { color: var(--acier); }

.vide { padding: 26px 18px; text-align: center; font-size: .88rem; color: var(--gris-fonce); }

/* ---- Réactif ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .mesures { grid-template-columns: repeat(2, 1fr); }
  .grille { grid-template-columns: 1fr; }
  .ouverture { grid-template-columns: 1fr; gap: 18px; }
  .ouverture .horo { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .rail-tete { border-bottom: 0; border-right: 1px solid var(--trait); }
  .rail-nav { display: flex; padding: 0; }
  .rail-nav a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .rail-nav a.actif { border-left: 0; border-bottom-color: var(--noir); }
  .rail-pied { display: none; }
  .entree { grid-template-columns: 1fr; }
  .entree-visuel { display: none; }
}
@media (max-width: 560px) {
  .mesures { grid-template-columns: 1fr; }
  .tete-recherche { display: none; }
  .contenu { padding: 18px 16px 50px; }
}