/* L'écran de la commerciale.
 *
 * Dans un fichier, et pas dans une balise <style> : la politique de sécurité
 * de la page est `default-src 'self'`, qui interdit le style en ligne. Le
 * 21/09/2026, la page est partie en production avec son CSS en ligne et
 * s'est affichée en HTML brut — sans la moindre erreur visible ailleurs que
 * dans la console du navigateur.
 *
 * Assouplir la politique avec 'unsafe-inline' aurait été le réflexe rapide.
 * Mais cet écran affiche des noms de personnes, et 'unsafe-inline' rouvre
 * exactement la porte que la politique ferme.
 */

:root {
  --encre: #0f172a;
  --encre-douce: #475569;
  --gris: #94a3b8;
  --trait: #e6eaef;
  --trait-fort: #cbd5e1;
  --fond: #ffffff;
  --fond-doux: #f8fafc;
  --vert: #0f766e;
  --vert-clair: #f0fdfa;
  --vert-trait: #99f6e4;
  --ambre: #b45309;
  --ambre-clair: #fffbeb;
  --ambre-trait: #fde68a;
  /* Le cyan Keynove : la couleur des lignes qui sonnent. Léo, 21/09/2026 —
     « je les veux en bleu cyan comme Keynove », pas en orange comme Minari. */
  --cyan: #0e7490;
  --cyan-clair: #ecfeff;
  --cyan-trait: #a5f3fc;
  --rouge: #b91c1c;
  --rouge-clair: #fef2f2;
  --rouge-trait: #fecaca;
  --ombre: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font: 14.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--encre);
  background: var(--fond-doux);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--trait-fort); background: var(--fond);
  color: var(--encre); padding: .45rem .85rem;
  transition: background .12s ease, border-color .12s ease;
}
button:hover:not(:disabled) { background: var(--fond-doux); border-color: var(--gris); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primaire {
  background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600;
}
button.primaire:hover:not(:disabled) { background: #115e59; border-color: #115e59; }
button.danger { color: var(--rouge); border-color: var(--rouge-trait); background: var(--fond); }
button.danger:hover:not(:disabled) { background: var(--rouge-clair); }

select, input[type=text], input[type=password], input[type=search], input[type=tel] {
  font: inherit; padding: .42rem .55rem; border-radius: 8px;
  border: 1px solid var(--trait-fort); background: var(--fond); color: var(--encre);
  max-width: 16rem;
}
select:focus, input:focus { outline: 2px solid var(--vert-trait); outline-offset: 1px; }
input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cache { display: none !important; }
/* Le repli de « Copier » quand le presse-papiers est refusé : un champ qu'on
   sélectionne sans qu'il se voie. */
.hors-ecran { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ── Connexion ───────────────────────────────────────────────────────────── */

#connexion { position: fixed; inset: 0; display: grid; place-items: center;
             background: var(--fond-doux); z-index: 10; }
#connexion form {
  width: min(21rem, 90vw); background: var(--fond); padding: 2rem 1.75rem;
  border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre);
}
#connexion h1 { margin: 0 0 .2rem; font-size: 1.3rem; letter-spacing: -.015em; }
#connexion p { margin: 0 0 1.25rem; color: var(--encre-douce); font-size: .88rem; }
#connexion input { width: 100%; max-width: none; margin-bottom: .6rem; padding: .55rem .7rem; }
#connexion button { width: 100%; margin-top: .4rem; padding: .55rem; }
#erreur-connexion { display: block; margin: .2rem 0 .6rem; }

/* ── Ossature ────────────────────────────────────────────────────────────── */

#ecran { display: none; height: 100%; flex-direction: column; background: var(--fond-doux); }
#ecran.visible { display: flex; }

header {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem 1.25rem; background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.marque { font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; margin-right: .3rem; }
.pousse { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.separateur { width: 1px; height: 1.4rem; background: var(--trait); }
.qui { color: var(--encre-douce); font-size: .85rem; }
.etiquette { color: var(--gris); font-size: .8rem; }
#lignes { max-width: 6rem; }
.groupe { display: inline-flex; align-items: center; gap: .45rem; }
#presente { max-width: 11rem; font-variant-numeric: tabular-nums; }
.lien { background: none; border: 0; padding: 0; color: var(--gris);
        text-decoration: underline; font-size: .82rem; }
.lien:hover { color: var(--encre-douce); background: none; }

.bouton-fichier {
  display: inline-flex; align-items: center; padding: .45rem .85rem;
  border-radius: 8px; border: 1px solid var(--trait-fort); background: var(--fond);
  cursor: pointer; font-size: .9rem;
}
.bouton-fichier:hover { background: var(--fond-doux); border-color: var(--gris); }

.barre-poste {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem 1.25rem; background: var(--fond);
  border-bottom: 1px solid var(--trait);
}
.barre-poste label { color: var(--gris); font-size: .8rem; }

main { flex: 1; display: flex; min-height: 0; gap: 0; }
.colonne-liste { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.compteurs {
  display: flex; gap: 1.75rem; flex-wrap: wrap;
  padding: .8rem 1.25rem; border-bottom: 1px solid var(--trait); background: var(--fond);
}
.compteur { display: flex; flex-direction: column; gap: .05rem; }
.compteur b { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.compteur span { color: var(--gris); font-size: .72rem; text-transform: uppercase;
                 letter-spacing: .05em; font-weight: 600; }

/* ── La recherche ────────────────────────────────────────────────────────── */

.recherche {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1.25rem; background: var(--fond); border-bottom: 1px solid var(--trait);
}
.recherche input { flex: 1 1 18rem; max-width: 30rem; }
.recherche-compte { color: var(--gris); font-size: .82rem; }
.recherche-retour { color: var(--encre-douce); font-size: .84rem; }
.recherche-retour.rouge { color: var(--rouge); }

button.petit { padding: .15rem .5rem; font-size: .76rem; border-radius: 6px; }

/* Le nom mène à sa fiche DiffFetch. La flèche dit qu'on change d'onglet. */
a.nom-lien { color: inherit; text-decoration: none; }
a.nom-lien[href]:hover { text-decoration: underline; color: var(--vert); }
a.nom-lien[href]::after { content: " ↗"; color: var(--gris); font-size: .8em; }
.cellule-nom { white-space: nowrap; }
.cellule-nom .copier { margin-left: .4rem; }
.cellule-action { text-align: right; white-space: nowrap; }

/* Les gestes d'une ligne n'encombrent pas cent lignes : ils paraissent au
   survol, au clavier, pendant une recherche, et toujours sur une personne en
   sommeil — sinon on ne saurait plus où la réactiver. `opacity` et non
   `display` : le bouton garde sa place, la ligne ne saute pas sous la souris. */
.copier, .action-ligne { opacity: 0; transition: opacity .12s ease; }
tbody tr:hover .copier, tbody tr:hover .action-ligne,
tbody tr:focus-within .copier, tbody tr:focus-within .action-ligne,
table.en-recherche .copier, table.en-recherche .action-ligne,
tr.dort .action-ligne { opacity: 1; }
tr.dort td { color: var(--gris); }

.menu-sommeil {
  position: fixed; z-index: 20; min-width: 15rem; display: flex;
  flex-direction: column; gap: .3rem; padding: .6rem;
  background: var(--fond); border: 1px solid var(--trait-fort);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
.menu-sommeil button { text-align: left; }
.menu-titre { font-size: .8rem; color: var(--encre-douce); padding: .1rem .2rem .3rem; }

.defilant { overflow: auto; flex: 1; background: var(--fond); }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gris); font-weight: 650; padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--trait); position: sticky; top: 0;
  background: var(--fond); z-index: 1;
}
td { padding: .65rem 1.25rem; border-bottom: 1px solid var(--trait); }
tbody tr:hover { background: var(--fond-doux); }
/* Ce qui sonne maintenant : un liseré à gauche, visible du coin de l'œil
 * pendant qu'on lit la fiche à droite. */
tr.sonne { background: var(--cyan-clair); box-shadow: inset 3px 0 0 var(--cyan); }
tr.gagnante { box-shadow: inset 3px 0 0 var(--vert); }
tr.faite td { color: var(--gris); }
/* Elle a répondu : la ligne entière en vert, et elle n'est plus appelée
 * aujourd'hui. Le filet à gauche la distingue de la gagnante en cours. */
tr.repondu { background: var(--vert-clair); box-shadow: inset 3px 0 0 var(--vert-trait); }
tr.repondu:hover { background: #e3fbf6; }
tr.faite .pastille { opacity: .75; }
tr.sonne:hover { background: #dffafd; }
tr.gagnante { background: var(--vert-clair); }
tr.gagnante:hover { background: #e3fbf6; }
.sourd { color: var(--gris); }
.tabulaire { font-variant-numeric: tabular-nums; }
.vide { text-align: center; padding: 3rem 1.25rem; }

.pastille {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600;
  white-space: nowrap; background: var(--fond-doux); color: var(--encre-douce);
  border: 1px solid var(--trait);
}
.pastille::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.pastille.vert  { background: var(--vert-clair);  color: #0f766e; border-color: var(--vert-trait); }
.pastille.ambre { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre-trait); }
.pastille.cyan  { background: var(--cyan-clair);  color: var(--cyan);  border-color: var(--cyan-trait); }
.pastille.rouge { background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge-trait); }

/* ── La fiche ────────────────────────────────────────────────────────────── */

.colonne-fiche {
  width: 23rem; flex: 0 0 23rem; border-left: 1px solid var(--trait);
  padding: 1.5rem 1.25rem; overflow: auto; background: var(--fond);
}
.fiche-vide { color: var(--gris); padding-top: 2rem; }
.fiche-entete { display: flex; align-items: flex-start; gap: .6rem; }
.fiche-entete button { margin-top: .45rem; flex: none; }
.fiche-nom { font-size: 1.7rem; font-weight: 650; line-height: 1.12; letter-spacing: -.02em;
             color: inherit; text-decoration: none; }
a.fiche-nom[href]:hover { text-decoration: underline; color: var(--vert); }
a.fiche-nom[href]::after { content: " ↗"; color: var(--gris); font-size: .6em; font-weight: 500; }
.fiche-raison { font-size: 1rem; margin-top: .45rem; color: var(--vert); font-weight: 650; }
.fiche-numero { margin-top: .3rem; color: var(--gris); }
.fiche-duree { margin-top: .15rem; color: var(--vert); font-size: .85rem; font-weight: 600; }
.fiche-duree:empty { display: none; }
.fiche-titre {
  margin: 1.5rem 0 .2rem; font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gris); font-weight: 650;
}
.fiche-infos { margin: .2rem 0 0; padding: 0; list-style: none; }
.fiche-infos li { display: flex; justify-content: space-between; gap: 1rem;
                  padding: .5rem 0; border-top: 1px solid var(--trait); }
.fiche-infos .cle { color: var(--gris); font-size: .85rem; }
/* Juste sous le numéro, et larges : c'est le geste qu'elle fait le plus
   souvent de la journée, il doit tomber sous la souris sans chercher. */
.fiche-actions { margin-top: 1rem; display: flex; gap: .5rem; }
.fiche-actions button { flex: 1; padding: .7rem .9rem; font-size: .98rem; }
/* La détection propose, elle clique : le bouton s'allume, il ne s'enfonce
   pas tout seul. */
#bouton-repondeur.suggere { box-shadow: 0 0 0 3px var(--ambre-trait);
                            animation: suggere 1.2s ease-in-out infinite; }
@keyframes suggere { 50% { box-shadow: 0 0 0 6px var(--ambre-trait); } }
@media (prefers-reduced-motion: reduce) { #bouton-repondeur.suggere { animation: none; } }

.fiche-amd { margin-top: .9rem; padding: .5rem .7rem; border-radius: 8px;
             font-size: .86rem; background: var(--fond-doux);
             color: var(--encre-douce); border: 1px solid var(--trait); }
.fiche-amd.ambre { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre-trait); }
.fiche-amd.vert  { background: var(--vert-clair);  color: var(--vert);  border-color: var(--vert-trait); }
.fiche-retour { margin-top: .6rem; font-size: .86rem; color: var(--encre-douce); min-height: 1.2em; }
.fiche-retour:empty { display: none; }

/* L'interrupteur des messageries, dans l'en-tête : visible d'un coup d'œil,
   parce qu'allumé, il raccroche des gens tout seul. */
.interrupteur { display: inline-flex; align-items: center; gap: .4rem;
                font-size: .85rem; color: var(--encre-douce); cursor: pointer;
                padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--trait); }
.interrupteur.allume { background: var(--ambre-clair); color: var(--ambre); border-color: var(--ambre-trait); }
.interrupteur input { margin: 0; }

/* ── Le dépôt d'une liste ────────────────────────────────────────────────── */

#depot { padding: .7rem 1.25rem; background: var(--vert-clair);
         border-bottom: 1px solid var(--vert-trait);
         display: none; align-items: center; gap: .6rem; flex-wrap: wrap; }
#depot.visible { display: flex; }
/* 📞 La page Manuel : le même bandeau que le dépôt de liste. */
#manuel { padding: .7rem 1.25rem; background: var(--vert-clair);
          border-bottom: 1px solid var(--vert-trait);
          display: none; align-items: center; gap: .6rem; flex-wrap: wrap; }
#manuel.visible { display: flex; }
#manuel label { color: var(--encre-douce); font-size: .88rem; }
#manuel input { width: 13rem; font-variant-numeric: tabular-nums; }
.manuel-qui { font-size: .88rem; color: var(--encre-douce); }
.manuel-qui.rouge { color: var(--rouge); }
#depot span { color: var(--encre-douce); font-size: .88rem; }
#depot strong { font-weight: 650; }

/* ── La consigne : ce qu'elle doit faire MAINTENANT ──────────────────────── */

/* Elle n'apparaît que quand la journée attend vraiment. Une consigne affichée
   en permanence n'est plus lue au bout d'une heure. */
.consigne {
  display: none; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .8rem 1.25rem; background: var(--vert-clair);
  border-bottom: 1px solid var(--vert-trait);
}
.consigne.visible { display: flex; }
.consigne button { font-size: 1rem; padding: .6rem 1.4rem; }
.consigne small { color: var(--encre-douce); }

/* ── L'alerte : ce qui est cassé, en rouge, au-dessus de tout ────────────── */

.alerte {
  display: none; padding: .7rem 1.25rem; background: var(--rouge-clair);
  color: var(--rouge); font-weight: 600; font-size: .9rem;
  border-bottom: 1px solid var(--rouge-trait);
}
.alerte.visible { display: block; }

/* ── Les avis ────────────────────────────────────────────────────────────── */

.avis { margin: 0; padding: .6rem 1.25rem; background: var(--ambre-clair);
        color: var(--ambre); font-size: .86rem;
        border-bottom: 1px solid var(--ambre-trait); }
.avis:empty { display: none; }

@media (max-width: 900px) {
  main { flex-direction: column; }
  .colonne-fiche { width: auto; flex: none; border-left: 0; border-top: 1px solid var(--trait); }
}