/* ── HUKAIA · L'ESPACE AGENCE ────────────────────────────────────────────
   Charlotte, le 20 septembre : « je veux pas que ce bouton mène vers l'app
   normale, je veux un vrai espace agence dans la DA du site, un vrai CRM
   de gestion limite ».

   Ce n'est donc pas l'app habillée autrement : c'est un OUTIL DE TRAVAIL,
   et un outil de travail se juge sur la densité. Une conseillère y passe
   sa journée, entre deux appels, avec quarante dossiers ouverts. Ce qu'on
   lui doit, ce n'est pas de la respiration — c'est de voir beaucoup de
   choses d'un coup d'œil et de n'avoir jamais à chercher deux fois.

   D'où trois écarts assumés avec le site :

   1. LE TEXTE EST PLUS PETIT ET PLUS SERRÉ. Le site vend et se lit à
      l'envie (17 px, interligne 1,55) ; ici on consulte (15 px, 1,45). La
      même charte, une autre distance de lecture.
   2. LA NUIT EST UN PEU MOINS PROFONDE. Sur une page de vente, le noir
      fait l'écrin ; sur huit heures d'écran, il fatigue. On remonte d'un
      cran et on garde les lueurs, plus basses.
   3. PAS DE GRAIN, PAS DE GRANDS DÉGRADÉS. Ce qui donne de la matière à
      une page qu'on regarde donne du bruit à un tableau qu'on lit.

   Les COULEURS, les POLICES et les RÈGLES de la charte, elles, ne bougent
   pas d'un cheveu : ce doit rester la même maison, vue depuis les
   cuisines. */

@import url('../site.css');

:root{
  --e-fond:#131110;
  --e-carte:rgba(255,255,255,.042);
  --e-carte-forte:rgba(255,255,255,.075);
  --e-filet:rgba(255,255,255,.11);
  --e-filet-fort:rgba(255,255,255,.2);
  --e-rail:264px;
  --e-tete:62px;
  --e-r:14px;
}

html, body{ height:100% }
body{
  background:var(--e-fond);
  /* Deux lueurs, deux fois plus basses que sur le site : on travaille
     dessus, on ne le contemple pas. */
  background-image:
    radial-gradient(90vw 60vh at 6% -12%, rgba(222,100,63,.055), transparent 62%),
    radial-gradient(70vw 50vh at 98% 4%, rgba(79,183,180,.04), transparent 62%);
  background-attachment:fixed;
  font-size:15px; line-height:1.45;
  margin:0;
}
/* Le grain du site est une texture de tirage : sur un tableau de bord
   c'est du bruit. On le retire explicitement — il est posé sur body::after
   par site.css, et un outil n'en a pas l'usage. */
body::after{ display:none !important }

/* ── LA CONNEXION ───────────────────────────────────────────────────── */
.e-porte{
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.e-porte-carte{
  width:100%; max-width:392px;
  background:var(--e-carte); border:1px solid var(--e-filet);
  border-radius:20px; padding:30px 28px 26px;
}
.e-porte .e-marque{ display:flex; align-items:center; gap:10px; margin-bottom:22px }
.e-porte .e-marque img{ width:26px; height:26px }
.e-porte .e-marque span{
  font-family:var(--display); font-weight:600; letter-spacing:.3em;
  font-size:13px; text-transform:uppercase;
}
.e-porte h1{
  font-family:var(--display); font-weight:600; font-size:25px; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 6px;
}
.e-porte p.e-sous{ color:var(--nuit-sub); font-size:14px; margin:0 0 22px }

/* ── LA CHARPENTE ───────────────────────────────────────────────────── */
.e-app{ display:none; min-height:100vh }
.e-app.on{ display:grid; grid-template-columns:var(--e-rail) minmax(0,1fr) }

.e-rail{
  border-right:1px solid var(--e-filet);
  padding:18px 14px 20px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh; overflow:auto;
}
/* Les boutons du menu vivent dans un conteneur, parce que le JS les
   redessine d'un bloc. « display:contents » le fait disparaître de la
   mise en page : ses six boutons deviennent les enfants directs du rail,
   et suivent donc sa direction — colonne sur un écran large, RANGÉE sur
   un téléphone. Sans ça, le rail passait bien en rangée… avec un seul
   enfant, dans lequel les six boutons restaient empilés : 231 px de haut
   mesurés à 390 px, pour une barre qui devait en faire soixante. */
#e-menu{ display:contents }
.e-rail-marque{ display:flex; align-items:center; gap:10px; padding:4px 10px 18px }
.e-rail-marque img{ width:24px; height:24px }
.e-rail-marque b{
  font-family:var(--display); font-weight:600; letter-spacing:.28em;
  font-size:12px; text-transform:uppercase;
}
.e-rail-titre{
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nuit-sub); padding:16px 10px 6px;
}
.e-nav{
  display:flex; align-items:center; gap:11px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--nuit-sub); font-family:var(--texte); font-size:14.5px; font-weight:500;
  padding:9px 10px; border-radius:10px; transition:background .12s, color .12s;
}
.e-nav:hover{ background:var(--e-carte); color:var(--nuit-texte) }
.e-nav.on{ background:var(--e-carte-forte); color:var(--nuit-texte); font-weight:600 }
/* « Composer » est l'action qui rapporte : elle porte la terre cuite,
   et elle est la SEULE du rail à la porter. */
.e-nav-vif{ background:var(--terre); color:#1A0D07; font-weight:600; margin-bottom:6px }
.e-nav-vif:hover, .e-nav-vif.on{ background:var(--terre-fonce); color:#fff }
.e-nav svg{ flex:none; opacity:.85 }
.e-nav .e-pastille{
  margin-left:auto; font-family:var(--mono); font-size:10px; font-weight:700;
  background:var(--verre-2); color:var(--nuit-sub); border-radius:20px; padding:1px 7px;
}
.e-rail-pied{ margin-top:auto; padding-top:16px; border-top:1px solid var(--e-filet) }

.e-vue{ min-width:0; padding:26px clamp(18px,3vw,38px) 60px }
.e-tete{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:24px;
}
.e-tete h1{
  font-family:var(--display); font-weight:600; font-size:29px; line-height:1.15;
  letter-spacing:-.015em; margin:0;
}
.e-tete p{ color:var(--nuit-sub); font-size:14px; margin:6px 0 0; max-width:64ch }

/* ── LES PIÈCES ─────────────────────────────────────────────────────── */
.e-carte{
  background:var(--e-carte); border:1px solid var(--e-filet);
  border-radius:var(--e-r); padding:18px 20px;
}
.e-grille{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)) }
.e-chiffre{ font-family:var(--display); font-weight:600; font-size:31px; line-height:1; letter-spacing:-.02em }
.e-etiq{
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nuit-sub); margin-bottom:9px;
}
.e-note{ color:var(--nuit-sub); font-size:13px; margin-top:7px; line-height:1.45 }

.e-jauge{ height:5px; border-radius:20px; background:var(--verre-2); overflow:hidden; margin-top:13px }
.e-jauge i{ display:block; height:100%; background:var(--turquoise); border-radius:20px }
.e-jauge.chaude i{ background:var(--terre) }

/* ── LES BOUTONS ────────────────────────────────────────────────────── */
.e-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--texte); font-size:14.5px; font-weight:600; cursor:pointer;
  border-radius:999px; padding:10px 20px; border:1px solid transparent;
  background:var(--terre); color:#1A0D07; text-decoration:none;
  transition:background .12s, border-color .12s, color .12s;
}
.e-btn:hover{ background:var(--terre-fonce); color:#fff }
.e-btn.fantome{ background:none; border-color:var(--e-filet-fort); color:var(--nuit-texte) }
.e-btn.fantome:hover{ background:var(--e-carte); border-color:var(--nuit-texte); color:var(--nuit-texte) }

/* Le séparateur des deux portes : un filet coupé par le mot, pour que
   les deux formulaires ne se lisent pas comme un seul. */
.e-ou{ display:flex; align-items:center; gap:12px; margin:20px 0 4px;
  color:var(--nuit-sub); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase }
.e-ou::before, .e-ou::after{ content:''; flex:1; height:1px; background:var(--e-filet) }
.e-btn.petit{ font-size:13px; padding:7px 14px }
.e-btn[disabled]{ opacity:.55; cursor:default }

.e-champ{
  width:100%; font-family:var(--texte); font-size:15px; color:var(--nuit-texte);
  background:var(--verre); border:1px solid var(--e-filet); border-radius:11px;
  padding:11px 13px; margin-bottom:10px;
}
.e-champ:focus{ outline:none; border-color:var(--turquoise) }
.e-champ::placeholder{ color:var(--nuit-sub) }
label.e-lab{
  display:block; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nuit-sub); margin-bottom:6px;
}
.e-dire{ font-size:13.5px; line-height:1.5; margin-top:12px; min-height:1px }
.e-dire.mal{ color:var(--terre-clair) }
.e-dire.bien{ color:var(--turquoise) }

.e-vide{
  border:1px dashed var(--e-filet); border-radius:var(--e-r);
  padding:34px 24px; text-align:center; color:var(--nuit-sub); font-size:14px;
}

/* ── LE TÉLÉPHONE ───────────────────────────────────────────────────── */
@media (max-width:860px){
  /* ── DEUX RANGÉES, PAS DEUX MOITIÉS ────────────────────────────────
     Sur un écran étroit, la grille passe à une colonne : le rail
     au-dessus, la vue en dessous. Ses deux rangées sont implicites, donc
     « auto » — mais « align-content » vaut « normal », c'est-à-dire
     ÉTIRER pour les grilles, et .e-app a min-height:100vh. Les deux
     rangées se partageaient donc l'écran : un rail de 178 px mesurés
     pour une barre qui doit en faire soixante, et ses boutons étirés à
     157 px de haut.
     Mesuré en retirant cinq boutons sur six : le rail gardait 178 px.
     La hauteur ne venait pas de son contenu, elle venait de la grille. */
  .e-app.on{ grid-template-columns:minmax(0,1fr); align-content:start }
  .e-rail{
    position:sticky; top:0; z-index:20; height:auto; flex-direction:row;
    overflow-x:auto; gap:6px; padding:10px 12px; align-items:center;
    border-right:0; border-bottom:1px solid var(--e-filet);
    background:var(--e-fond);
  }
  .e-rail-marque, .e-rail-titre, .e-rail-pied{ display:none }
  .e-nav{ width:auto; white-space:nowrap; padding:8px 12px }
  .e-nav .e-pastille{ margin-left:6px }
  .e-vue{ padding:20px 16px 48px }
  .e-tete h1{ font-size:24px }
}

/* ── LES TABLEAUX ───────────────────────────────────────────────────────
   Un CRM se lit en lignes, pas en cartes : quarante dossiers en cartes,
   c'est quarante fois le même cadre à sauter du regard. Les cartes sont
   réservées aux CHIFFRES du tableau de bord, où il y en a quatre. */
.e-liste{ border:1px solid var(--e-filet); border-radius:var(--e-r); overflow:hidden }
.e-ligne{
  display:grid; align-items:center; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--e-filet);
  background:var(--e-carte); transition:background .1s;
}
.e-ligne:last-child{ border-bottom:0 }
.e-ligne:hover{ background:var(--e-carte-forte) }
.e-ligne.e-entete{
  background:none; border-bottom:1px solid var(--e-filet);
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--nuit-sub); padding:9px 16px;
}
.e-ligne.e-entete:hover{ background:none }
.e-nom{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.e-gris{ color:var(--nuit-sub); font-size:13.5px; min-width:0 }
.e-actions{ display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap }

/* ── TOUTES LES CLASSES D'ICI COMMENCENT PAR « e- » ────────────────────
   Ce fichier importe site.css pour ses polices et ses jetons de couleur —
   ce doit rester la même maison. Mais il importe AUSSI les six cents
   règles du site, et la première ligne d'en-tête de tableau s'appelait
   « tete »… comme le bandeau du site, qui est en position:fixed. Résultat
   mesuré : l'en-tête du tableau collé en haut de la fenêtre, par-dessus
   le rail. Le préfixe n'est donc pas une coquetterie, c'est la seule
   chose qui empêche une collision silencieuse. banc-espace-agence le
   tient. */

/* Les colonnes, par écran. On les nomme ici plutôt qu'en ligne : deux
   déclarations de la même grille (l'en-tête et les lignes) qui divergent,
   c'est un tableau décalé d'une colonne. */
.e-liste.clients .e-ligne{ grid-template-columns:minmax(0,2fr) 96px minmax(0,1fr) auto }
.e-liste.voyages .e-ligne{ grid-template-columns:minmax(0,2fr) minmax(0,1.4fr) minmax(0,1.2fr) auto }
.e-liste.props   .e-ligne{ grid-template-columns:minmax(0,1.8fr) minmax(0,1.2fr) minmax(0,1fr) auto }
.e-liste.carnet  .e-ligne{ grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) auto }

.e-puce{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; border-radius:6px; padding:3px 7px; white-space:nowrap;
}
.e-puce.vive{ color:var(--turquoise); background:rgba(79,183,180,.13) }
.e-puce.calme{ color:var(--nuit-sub); background:var(--verre-2) }
.e-puce.chaude{ color:var(--terre-clair); background:rgba(222,100,63,.15) }

/* ── LA BARRE DE FILTRES ────────────────────────────────────────────── */
.e-filtres{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px }
.e-filtre{
  font-family:var(--texte); font-size:13px; font-weight:500; cursor:pointer;
  background:none; border:1px solid var(--e-filet); color:var(--nuit-sub);
  border-radius:999px; padding:6px 13px; transition:border-color .12s, color .12s;
}
.e-filtre:hover{ border-color:var(--e-filet-fort); color:var(--nuit-texte) }
.e-filtre.on{ border-color:var(--turquoise); color:var(--turquoise) }
.e-filtre b{ font-family:var(--mono); font-size:10px; margin-left:6px; opacity:.75 }

/* ── LE TIROIR ──────────────────────────────────────────────────────────
   Un CRM ne change pas de page pour éditer une ligne : il ouvre un
   tiroir à droite et on garde la liste sous les yeux. Sur téléphone il
   prend tout l'écran, parce qu'il n'y a pas de place pour deux choses. */
.e-tiroir-fond{
  position:fixed; inset:0; background:rgba(8,6,5,.6);
  opacity:0; pointer-events:none; transition:opacity .16s; z-index:40;
}
.e-tiroir-fond.on{ opacity:1; pointer-events:auto }
.e-tiroir{
  position:fixed; top:0; right:0; bottom:0; width:min(460px, 100%);
  background:var(--e-fond); border-left:1px solid var(--e-filet);
  transform:translateX(100%); transition:transform .18s cubic-bezier(.2,.8,.3,1);
  z-index:41; display:flex; flex-direction:column;
}
.e-tiroir.on{ transform:none }
.e-tiroir-tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--e-filet);
}
.e-tiroir-tete h2{ font-family:var(--display); font-weight:600; font-size:19px; margin:0 }
.e-tiroir-corps{ padding:18px 20px 24px; overflow:auto; flex:1 }
.e-fermer{
  background:none; border:0; color:var(--nuit-sub); cursor:pointer;
  font-size:22px; line-height:1; padding:2px 6px; border-radius:8px;
}
.e-fermer:hover{ color:var(--nuit-texte); background:var(--e-carte) }

@media (max-width:640px){
  .e-liste.clients .e-ligne,
  .e-liste.voyages .e-ligne,
  .e-liste.props .e-ligne,
  .e-liste.carnet .e-ligne{ grid-template-columns:minmax(0,1fr); gap:6px }
  .e-ligne.e-entete{ display:none }
  .e-actions{ justify-content:flex-start; margin-top:4px }
}

/* ── RETOUCHER UN VOYAGE (espace-retouche.js) ──────────────────────────
   Deux colonnes : les journées à gauche, les hébergements et le budget à
   droite, collés en haut. Chaque mot est un champ, mais un champ qui
   ressemble au texte qu'il remplace : pas de formulaire, un document
   qu'on corrige. */
.e-ret-grille{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:22px; align-items:start }
.e-ret-cote{ position:sticky; top:18px }
.e-ret-jour, .e-ret-heb{
  background:var(--e-carte); border:1px solid var(--e-filet); border-radius:var(--e-r);
  padding:16px 16px 14px; margin-bottom:14px;
}
.e-ret-jour-tete, .e-ret-heb-tete{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.e-ret-jour-tete .e-puce{ flex:none }
.e-ret-lieu{ flex:1; font-weight:600 }
.e-ret-titre{ font-family:var(--display); font-weight:600; font-size:17px; margin-bottom:8px }
.e-ret-texte{ font-size:14px; line-height:1.45 }
.e-ret-moments{ display:grid; gap:8px; margin-bottom:10px }
.e-ret-moment{ display:grid; grid-template-columns:64px 118px minmax(0,1fr) auto; gap:8px; align-items:start }
.e-ret-moment .e-champ{ margin:0 }
.e-ret-heure{ text-align:center; font-family:var(--mono); font-size:13px }
.e-ret-k{ font-size:13px }
.e-ret-moment-txt{ display:grid; gap:6px }
.e-ret-moment-txt .e-ret-note{ font-size:13px; color:var(--nuit-sub) }
.e-ret-moment-actes{ display:flex; gap:4px; padding-top:4px }
.e-ret-ico{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--e-filet); background:transparent;
  color:var(--nuit-sub); cursor:pointer; font-size:13px;
}
.e-ret-ico:hover:not(:disabled){ color:var(--nuit-texte); background:var(--e-carte-forte) }
.e-ret-ico:disabled{ opacity:.3; cursor:default }
.e-ret-duo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px }
.e-ret-trio{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px }
.e-ret-heb .e-actions{ margin-left:auto }
.e-ret-choix{
  display:grid; gap:3px; width:100%; text-align:left; padding:12px 14px; margin-bottom:8px;
  background:var(--e-carte); border:1px solid var(--e-filet); border-radius:12px; color:var(--nuit-texte);
  font:inherit; cursor:pointer;
}
.e-ret-choix:hover{ border-color:var(--terre); background:var(--e-carte-forte) }
.e-ret-choix b{ font-family:var(--display); font-weight:600 }
.e-sauve{ font-size:13px; color:var(--nuit-sub); white-space:nowrap }
.e-sauve.bien{ color:var(--turquoise) }
.e-sauve.mal{ color:var(--terre) }
.e-ret-lien{ background:none; border:0; color:var(--terre); text-decoration:underline; cursor:pointer; font:inherit; padding:0 }
@media (max-width:980px){
  .e-ret-grille{ grid-template-columns:1fr }
  .e-ret-cote{ position:static }
}
@media (max-width:640px){
  .e-ret-moment{ grid-template-columns:64px 1fr; }
  .e-ret-moment-txt{ grid-column:1 / -1 }
  .e-ret-moment-actes{ grid-column:1 / -1 }
  .e-ret-duo, .e-ret-trio{ grid-template-columns:1fr }
}

/* ── Le tableau de bord qui dit quoi faire ──────────────────────────── */
.e-sous-titre{ font-family:var(--display); font-weight:600; font-size:17px; margin:26px 0 12px; display:flex; align-items:center; gap:10px }
.e-compte{ font-size:12px; background:var(--terre); color:var(--ink); border-radius:999px; padding:2px 8px }
.e-liste.afaire .e-ligne{ grid-template-columns:minmax(0,1fr) auto }
.e-petit{ font-size:12.5px; color:var(--nuit-sub) }