/* Pim — feuille unique. Aucune dépendance, aucune police distante (la CSP
   interdit tout hôte extérieur, et une police qui ne charge pas est une page
   qui saute).

   LE PARTI PRIS : un écran, un bouton, du noir. Tout ce qui n'est pas la
   réponse doit s'effacer. Les pages de relecture (mémoire, historique,
   réglages) ont le droit d'être denses — elles se lisent assis. */

:root {
  --nuit: #07080d;
  --nuit-2: #0d0f17;
  --nuit-3: #141826;
  --trait: #1e2333;
  --encre: #e8ecf5;
  --encre-2: #97a1b8;
  --encre-3: #626d85;
  --vif: #7dd3fc;
  --vif-2: #38bdf8;
  --menthe: #4ade80;
  --ambre: #fbbf24;
  --rouge: #f87171;
  --violet: #c084fc;
  --rayon: 14px;
  --ombre: 0 10px 40px rgba(0, 0, 0, .5);

  /* LES REPÈRES COMMUNS DU GROUPE. Mêmes noms et mêmes rôles que chez les
     voisines (/srv/contact, /srv/agenda, /srv/play, /srv/actu…) : c'est ce qui
     permet de relire la charpente d'une application dans l'autre sans traduire.
     Seules les VALEURS sont propres à Pim. */

  /* Le dégradé de la marque : le ciel de Pim qui dérive vers son violet — la
     teinte que prend le halo du bouton quand il réfléchit. À distinguer du
     turquoise de Contact, du vert et or de l'Agenda, du violet de Play. */
  --degrade-marque: linear-gradient(135deg, #7dd3fc, #c084fc);
  --sur-marque: #06101f;
  /* L'accent posé à plat (onglet ouvert, entrée active de la barre latérale)
     et son trait. Deux voiles du même bleu, jamais une couleur écrite en dur. */
  --vif-doux: rgba(125, 211, 252, .16);
  --vif-trait: rgba(125, 211, 252, .38);
  /* Fond OPAQUE de la barre d'onglets : une pastille d'encre POSÉE sur la page,
     jamais un voile translucide (voir la charpente, plus bas). */
  --tabbar-base: #101724;
  /* Encoches et barres système : la topbar et la pastille d'onglets s'en
     écartent au lieu de passer dessous. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/* iOS gonfle le texte tout seul quand il juge une colonne trop étroite : ici
   la mise en page est déjà pensée pour le téléphone, ce gonflement ne fait que
   la casser. Règle commune à toutes les applications du groupe. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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

a { color: var(--vif); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  color: var(--encre-2);
  /* `chapitre:notion:1204` n'a pas d'espace où se couper : sans ça, une
     référence de source pousse toute la page vers la droite. */
  overflow-wrap: anywhere;
}
h1 { font-size: 1.5rem; margin: 0 0 .3rem; letter-spacing: -.01em; overflow-wrap: break-word; }
h2 { font-size: 1.05rem; margin: 0 0 .7rem; color: var(--encre-2); font-weight: 600; }
.muted { color: var(--encre-3); }
.err { color: var(--rouge); }
.quand { color: var(--encre-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────────── La charpente
   MÊME GRAMMAIRE QUE LE RESTE DU GROUPE (/srv/annuaire, /srv/contact,
   /srv/agenda, /srv/play, /srv/actu, /srv/bleme, /srv/projet) : barre latérale
   sur grand écran, et sous 900 px le « mode application » — topbar fixe qui
   s'écarte de l'encoche, et pastille d'onglets OPAQUE flottante, détachée des
   bords.

   Les mesures ci-dessous sont celles des voisines au pixel près : marque de
   34 px dans la topbar (28 px dans la barre latérale), titre de 17 px en 800,
   bouton de droite en gélule de rayon 999, pastille du bas de rayon 26 avec
   7 px de marge intérieure, onglets de 66 px de haut et de rayon 20. C'est
   cette répétition qui fait qu'on passe d'une application du groupe à l'autre
   sans changer de maison — ne pas les « arrondir » au jugé.

   DEUX RÈGLES DU GROUPE À NE PAS DÉFAIRE ICI :
   — la barre du bas est un aplat OPAQUE posé sur la page : ni trait, ni ombre,
     ni backdrop-filter (c'est le flou qui la faisait baver au défilement) ;
   — les quatre onglets sont strictement identiques : la seule destination mise
     en avant est la page ouverte. */
.layout { display: flex; min-height: 100dvh; }

/* ── Grand écran : la barre latérale, et rien d'autre. */
.sidebar {
  width: 244px; flex: 0 0 244px; position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 14px 10px 20px; border-right: 1px solid var(--trait);
  background: rgba(9, 11, 18, .92); overflow-y: auto; overscroll-behavior: contain;
}
.brand {
  display: flex; align-items: center; padding: 6px 8px 16px;
  font-size: 19px; font-weight: 800; letter-spacing: .3px; color: var(--encre);
}
/* LA MARQUE DU GROUPE : un carré de dégradé, jamais une icône nue posée sur le
   fond. Le carré est commun, le dessin qu'il porte est propre à chaque
   application — ici le point de conscience dans son orbite. */
.brand-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-right: 6px; border-radius: 9px;
  background: var(--degrade-marque); color: var(--sur-marque); vertical-align: middle;
}
.brand-ico svg { width: 17px; height: 17px; }
.sidebar a {
  display: flex; align-items: center; gap: 10px; margin: 2px 0;
  padding: 10px 12px; border-radius: 12px; color: var(--encre-2); font-size: 14.5px;
}
.sidebar a:hover { background: rgba(255, 255, 255, .06); color: var(--encre); text-decoration: none; }
.sidebar a.active {
  background: var(--vif-doux); color: var(--encre); font-weight: 600;
  outline: 1px solid var(--vif-trait); outline-offset: -1px;
}
.sidebar .ico { display: inline-flex; width: 24px; justify-content: center; }
.sidebar .ico svg { width: 19px; height: 19px; }
.logout-form { margin-top: auto; padding: 16px 8px 4px; }
.logout-form button {
  width: 100%; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 12px;
  background: transparent; color: var(--encre-2); cursor: pointer; font: inherit; font-size: .9rem;
}
.logout-form button:hover { border-color: var(--rouge); color: var(--rouge); }

.topbar, .tabbar { display: none; }

/* Le contenu reste CENTRÉ, contrairement aux voisines qui l'alignent à gauche :
   l'accueil de Pim est un bouton unique, et un bouton unique décentré n'a plus
   l'air d'être le sujet de la page. C'est le seul écart assumé. */
.content { flex: 1; min-width: 0; max-width: 900px; margin: 0 auto; padding: 22px 26px 60px; }

/* La pastille du SEUL compteur de l'interface — les écritures qui attendent un
   « oui ». Rouge, comme dans le reste du groupe, et elle ne compte que ce qui
   demande une décision : une bonne nouvelle ne gonfle pas un rond rouge. */
.notif-dot {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  background: var(--rouge); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
svg { width: 18px; height: 18px; stroke-width: 2; fill: none; stroke: currentColor;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ══════════════════════════════════ MODE APPLICATION (≤ 900 px) ═══════════
   Topbar fixe + pastille d'onglets flottante. Même seuil, mêmes mesures et
   mêmes gestes que chez les voisines. */
@media (max-width: 900px) {
  .layout { display: block; }
  .sidebar { display: none; }

  .topbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: rgba(7, 8, 13, .82);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--trait);
    padding: 10px 16px;
    padding-top: calc(10px + var(--safe-top));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }
  .topbar .brand-ico { margin: 0; width: 34px; height: 34px; border-radius: 11px; }
  .topbar .brand-ico svg { width: 21px; height: 21px; }
  /* Le nom de l'application, jamais celui de la page : le titre de la page est
     déjà le <h1> juste en dessous. */
  .topbar-title {
    flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Bouton TEXTE, sans icône : la gélule « Admin » du groupe. Pim n'a pas
     d'administration, il a ses réglages — seul le mot change. */
  .topbar-admin {
    display: inline-flex; align-items: center; min-height: 34px; flex: none;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); border: 1px solid var(--trait);
    color: var(--encre); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap;
  }
  .topbar-admin:hover { text-decoration: none; border-color: var(--vif); }
  .topbar-admin.on { background: var(--vif-doux); border-color: var(--vif-trait); color: var(--vif); }
  .topbar-bell { position: relative; display: inline-flex; flex: none; padding: 4px 2px; color: var(--encre); }
  .topbar-bell svg { width: 22px; height: 22px; }
  .topbar-bell:hover { text-decoration: none; }

  .tabbar {
    display: flex; align-items: stretch; gap: 6px;
    position: fixed; z-index: 60;
    left: calc(12px + var(--safe-left));
    right: calc(12px + var(--safe-right));
    bottom: calc(4px + var(--safe-bottom));
    transform: translateY(15px);
    padding: 7px; border-radius: 26px; background: var(--tabbar-base);
  }
  /* Sous la pastille, la zone sûre devient un aplat opaque : le contenu
     s'arrête visuellement avant les bords arrondis. La page de connexion n'a
     pas de barre du bas — elle n'a donc pas cet aplat. */
  body:not(.page-login)::after {
    content: ""; position: fixed; z-index: 59;
    left: 0; right: 0; bottom: 0; height: calc(4px + var(--safe-bottom));
    pointer-events: none; background: var(--tabbar-base);
  }
  .tab {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; min-height: 66px; padding: 10px 2px;
    border-radius: 20px; background: transparent; color: var(--encre-3);
    font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
    -webkit-user-select: none; user-select: none;
    transition: background .16s ease, color .16s ease, transform .1s ease;
  }
  .tab:hover { text-decoration: none; }
  .tab:active { transform: scale(.95); }
  .tab.on { background: var(--vif-doux); color: var(--vif); font-weight: 800; }
  .t-ico { display: flex; align-items: center; justify-content: center; }
  .t-ico svg { width: 25px; height: 25px; }
  .t-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .content {
    max-width: none; margin: 0;
    padding: calc(64px + var(--safe-top)) 14px calc(96px + var(--safe-bottom));
    padding-left: calc(14px + var(--safe-left));
    padding-right: calc(14px + var(--safe-right));
  }
}

/* iPhone étroit : la pastille et la topbar se resserrent, comme chez les
   voisines — sinon quatre libellés sur 320 px se coupent. */
@media (max-width: 380px) {
  .tabbar { gap: 4px; padding: 6px; }
  .topbar { gap: 9px; }
  .topbar-admin { padding: 6px 11px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tab { transition: none; }
}

/* ─────────────────────────────────────────────────────────────── Les flashs */
.flash {
  display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--nuit-2);
  margin-bottom: 1rem; font-size: .9rem; color: var(--encre-2);
}
.flash.ok { border-color: rgba(74, 222, 128, .35); color: var(--menthe); }
.flash.err { border-color: rgba(248, 113, 113, .35); color: var(--rouge); }
.flash svg { flex: none; margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════════ LA SCÈNE
   L'écran d'accueil. Un bouton, et rien qui le concurrence. */
.scene {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; padding-top: 4vh; text-align: center;
}

.entendu {
  min-height: 1.5rem; margin: 0; color: var(--encre-2); font-size: 1rem;
  max-width: 34rem; font-style: italic;
}

.bouton-voix {
  position: relative; width: min(58vw, 220px); height: min(58vw, 220px);
  border-radius: 50%; border: 1px solid var(--trait);
  background: radial-gradient(circle at 50% 35%, var(--nuit-3), var(--nuit-2) 70%);
  color: var(--encre); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem;
  box-shadow: var(--ombre); transition: transform .12s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.bouton-voix:active { transform: scale(.97); }
.bouton-voix .ico svg { width: 44px; height: 44px; stroke-width: 1.6; color: var(--vif); }
.bouton-voix .etat { font-size: .95rem; letter-spacing: .02em; color: var(--encre-2); }
.bouton-voix .halo {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  border: 2px solid transparent; transition: border-color .25s ease;
}
.bouton-voix.ecoute { border-color: rgba(125, 211, 252, .5); }
.bouton-voix.ecoute .halo { border-color: rgba(125, 211, 252, .55); animation: pulse 1.6s infinite; }
.bouton-voix.ecoute .ico svg { color: var(--vif-2); }
.bouton-voix.reflechit .halo { border-color: rgba(192, 132, 252, .55); animation: pulse .9s infinite; }
.bouton-voix.reflechit .ico svg { color: var(--violet); }
.bouton-voix.parle .halo { border-color: rgba(74, 222, 128, .5); }
.bouton-voix[disabled] { opacity: .5; cursor: not-allowed; }
@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  70% { transform: scale(1.09); opacity: 0; }
  100% { transform: scale(1.09); opacity: 0; }
}

.micro-aide { color: var(--encre-3); font-size: .85rem; margin: 0; max-width: 30rem; }

/* Le plateau : ce que Pim répond. */
.plateau {
  width: 100%; max-width: 40rem; text-align: left;
  background: var(--nuit-2); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1rem 1.1rem; box-shadow: var(--ombre);
}
.plateau.vide { display: none; }
.plateau-phrase { margin: 0 0 .6rem; font-size: 1.05rem; line-height: 1.6; }
.plateau-liste { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; }
.plateau-liste li {
  display: flex; gap: .5rem; align-items: baseline; justify-content: space-between;
  padding: .4rem .55rem; background: var(--nuit-3); border-radius: 9px; font-size: .9rem;
}
.voix-etiquette {
  display: inline-flex; gap: .35rem; align-items: center; font-size: .75rem;
  color: var(--encre-3); margin-top: .7rem;
}
.plateau.voix-gemini { border-color: rgba(125, 211, 252, .3); }
.parcours { margin-top: .7rem; font-size: .8rem; }
.parcours summary { cursor: pointer; color: var(--encre-3); }
.parcours ul { list-style: none; padding: .4rem 0 0; margin: 0; display: grid; gap: .2rem; }
.parcours li { display: flex; gap: .5rem; align-items: baseline; }

/* Le chemin écrit. */
.dire { display: flex; gap: .5rem; width: 100%; max-width: 40rem; }
.dire input[type="text"] { flex: 1; }

input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--nuit-2); border: 1px solid var(--trait); color: var(--encre);
  border-radius: 10px; padding: .55rem .7rem; font: inherit; font-size: .95rem; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--vif); }

.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
  background: var(--nuit-3); border: 1px solid var(--trait); color: var(--encre);
  border-radius: 10px; cursor: pointer; font: inherit; font-size: .9rem;
}
.btn:hover { border-color: var(--encre-3); text-decoration: none; }
.btn.primaire { background: var(--vif); border-color: var(--vif); color: #04121b; font-weight: 600; }
.btn.danger { border-color: rgba(248, 113, 113, .4); color: var(--rouge); }
.btn.petit { padding: .25rem .5rem; font-size: .78rem; }
.inline { display: inline-flex; gap: .4rem; align-items: center; }

/* Le socle : trois chiffres, jamais un tableau de bord. */
.socle { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }
.socle-item {
  display: flex; flex-direction: column; align-items: center; padding: .5rem .9rem;
  border: 1px solid var(--trait); border-radius: 12px; color: var(--encre-3); font-size: .72rem;
  min-width: 6.5rem;
}
.socle-item strong { font-size: 1.15rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.socle-item:hover { text-decoration: none; border-color: var(--encre-3); }
.socle-item.on { border-color: rgba(251, 191, 36, .4); }
.socle-item.on strong { color: var(--ambre); }

.signaux-apercu { display: grid; gap: .4rem; width: 100%; max-width: 40rem; }
.signal-puce {
  display: flex; gap: .6rem; align-items: baseline; padding: .5rem .7rem;
  border: 1px solid var(--trait); border-radius: 10px; font-size: .85rem; color: var(--encre-2);
  text-align: left;
}
.signal-puce:hover { text-decoration: none; border-color: var(--encre-3); }
.signal-genre {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3);
  flex: none;
}
.genre-risque .signal-genre, li.genre-risque .signal-genre { color: var(--rouge); }
.genre-opportunite .signal-genre, li.genre-opportunite .signal-genre { color: var(--menthe); }
.genre-contradiction .signal-genre, li.genre-contradiction .signal-genre { color: var(--ambre); }
.genre-gain_temps .signal-genre, li.genre-gain_temps .signal-genre { color: var(--vif); }
.genre-capitalisation .signal-genre, li.genre-capitalisation .signal-genre { color: var(--violet); }

/* ────────────────────────────────────────────────── Les pages de relecture */
.entete { margin-bottom: 1.2rem; }
.bloc {
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem;
  background: var(--nuit-2); margin-bottom: 1rem;
}
.bloc > summary { cursor: pointer; color: var(--encre-2); }
.barre { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.barre input[type="text"] { flex: 1; min-width: 12rem; }
.puce {
  display: inline-flex; gap: .3rem; align-items: baseline; padding: .25rem .6rem;
  border: 1px solid var(--trait); border-radius: 999px; font-size: .8rem; color: var(--encre-2);
}
.puce:hover { text-decoration: none; border-color: var(--encre-3); }
.puce.on { background: var(--nuit-3); color: var(--encre); border-color: var(--vif); }
.puce .n { color: var(--encre-3); font-variant-numeric: tabular-nums; }
.types-nuage { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }

.liste-entites { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.liste-entites li {
  display: flex; gap: .7rem; align-items: baseline; justify-content: space-between;
  padding: .55rem .7rem; background: var(--nuit-2); border: 1px solid var(--trait); border-radius: 10px;
}
.liste-entites a { color: var(--encre); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.liste-entites .type, .entete .type {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vif);
}
.liste-entites .statut { font-size: .75rem; color: var(--ambre); }
.liste-entites .resume { font-size: .82rem; }

.liste-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.liste-liens li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.rel { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); min-width: 8rem; }

.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.timeline li {
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
  padding: .45rem .6rem; border-left: 2px solid var(--trait); background: var(--nuit-2);
  border-radius: 0 8px 8px 0; font-size: .88rem;
}
.timeline .genre { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--vif); }

.liste-signaux { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.liste-signaux li {
  padding: .8rem .9rem; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--nuit-2);
}
.signal-tete { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .3rem; }
.signal-tete .score {
  font-size: .72rem; color: var(--encre-3); font-variant-numeric: tabular-nums;
  border: 1px solid var(--trait); border-radius: 999px; padding: 0 .4rem;
}
.signal-actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }

.liste-echanges { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.liste-echanges li { padding: .7rem .8rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--nuit-2); }
.liste-echanges .dit { margin: 0 0 .35rem; color: var(--encre-2); font-style: italic; }
.liste-echanges .repondu { margin: 0; }
.liste-echanges .meta { margin: .4rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; font-size: .78rem; }
.liste-echanges .statut-erreur, .liste-echanges li.statut-erreur { border-color: rgba(248, 113, 113, .3); }

.liste-actions { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.liste-actions li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .9rem; }
.badge {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .4rem;
  border-radius: 999px; border: 1px solid var(--trait); color: var(--encre-3);
}
.statut-faite .badge { color: var(--menthe); border-color: rgba(74, 222, 128, .4); }
.statut-proposee .badge { color: var(--ambre); border-color: rgba(251, 191, 36, .4); }
.statut-erreur .badge { color: var(--rouge); border-color: rgba(248, 113, 113, .4); }

.tableau { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .6rem; }
.tableau th, .tableau td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { color: var(--encre-3); font-weight: 500; }
.tableau tr.eteinte { opacity: .45; }
.tableau.reglages td input { min-width: 14rem; }

/* LE CHOIX DE LA VOIX. Trois lignes cliquables entièrement, libellé compris :
   sur un téléphone, viser un rond de 13 px est une punition. */
.choix-voix { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.choix-voix input { margin-top: .35rem; flex: none; accent-color: var(--vif); }
.choix-voix > span { display: grid; gap: .15rem; }
.choix-voix .choix-tete { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.choix-voix strong { font-size: .95rem; }
.choix-voix .muted { font-size: .82rem; }
.etat-ok { color: var(--menthe); }
.etat-erreur { color: var(--rouge); }

.actions-fiche { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.resume-fiche { color: var(--encre-2); max-width: 46rem; }
.vide-message { color: var(--encre-3); padding: 1.5rem 0; max-width: 34rem; }

/* ────────────────────────────────────────────────────────────── Connexion */
.page-login {
  display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 1rem;
}
.login-carte {
  width: min(24rem, 100%); background: var(--nuit-2); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.6rem; text-align: center; box-shadow: var(--ombre);
}
.login-carte h1 { font-size: 2rem; letter-spacing: .04em; }
.login-carte form { display: grid; gap: .6rem; margin-top: 1rem; }