@charset "UTF-8";
/* ===========================================================================
   Console d'exploitation — export.rencontreparsms.com
   ---------------------------------------------------------------------------
   Parti pris : un poste d'opérateur, pas un site web. Fond d'encre, données en
   chasse fixe, titres en Fraunces pour donner à l'outil une identité qui ne
   ressemble à aucune des 23 vitrines publiques du parc — on doit voir d'un
   coup d'œil qu'on n'est plus sur un site de rencontre mais dans la salle
   des machines.

   L'idée porteuse est la bande de portée : chaque fonction affiche, en
   couleur et en toutes lettres, combien de lignes de la base elle touche.
   Consulter est vert d'eau, écrire une ligne est ambre, réécrire toute la
   table est rouge. C'est ce qui doit empêcher de confondre « Export », qui
   ne modifie rien, avec « Reset relance », qui réécrit tous les inscrits.
   =========================================================================== */

:root {
  --encre:        #0f1419;
  --panneau:      #161d25;
  --panneau-haut: #1d2630;
  --filet:        #29333e;
  --filet-vif:    #3a4653;

  --texte:        #e9e4d9;   /* papier chaud, pas blanc pur */
  --texte-doux:   #98a2ae;
  --texte-faible: #6b7683;

  --lecture:      #4fb8a0;   /* ne modifie rien */
  --ecriture:     #d9a441;   /* modifie une ligne */
  --masse:        #e05a4e;   /* modifie toute la table */

  --rayon: 10px;
  --colonne: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -8%, #1b2530 0%, transparent 62%),
    var(--encre);
  color: var(--texte);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--lecture); }

/* ---------- Ossature ---------- */

.console {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 2rem;
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 1.6rem 1.25rem 4rem;
}

@media (max-width: 860px) {
  .console { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Barre latérale ---------- */

.flanc { position: sticky; top: 1.6rem; align-self: start; }
@media (max-width: 860px) { .flanc { position: static; } }

.marque {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .15rem;
}
.marque em { font-style: italic; color: var(--lecture); }

.marque-sous {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin: 0 0 1.4rem;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 7px;
  border-left: 2px solid transparent;
  color: var(--texte-doux);
  text-decoration: none;
  font-size: .9rem;
}
.nav a:hover { background: var(--panneau); color: var(--texte); }
.nav a[aria-current="page"] {
  background: var(--panneau-haut);
  border-left-color: var(--lecture);
  color: var(--texte);
}
.nav a .puce {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--filet-vif);
  flex: 0 0 auto;
}
.nav a[aria-current="page"] .puce { background: var(--lecture); }
.nav a.sortie { margin-top: .5rem; color: var(--texte-faible); }
.nav a.sortie:hover { color: var(--masse); }

.session {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  color: var(--texte-faible);
  line-height: 1.7;
}
.session b { color: var(--texte-doux); font-weight: 500; }

/* ---------- Titre de page ---------- */

.tete { margin: 0 0 1.5rem; }
.tete h1 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  margin: 0 0 .3rem;
}
.tete p { margin: 0; color: var(--texte-doux); max-width: 62ch; }

/* ---------- Carte de fonction ---------- */

.fonction {
  background: var(--panneau);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 1.15rem;
}

/* La bande de portée : l'information qui évite l'erreur coûteuse. */
.portee {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem;
  background: var(--panneau-haut);
  border-bottom: 1px solid var(--filet);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.portee::before {
  content: "";
  width: 9px; height: 9px; border-radius: 2px;
  background: currentColor;
  flex: 0 0 auto;
}
.portee--lecture  { color: var(--lecture); }
.portee--ecriture { color: var(--ecriture); }
.portee--masse    { color: var(--masse); }
.portee span { color: var(--texte-faible); letter-spacing: .04em; text-transform: none; }

.fonction-corps { padding: 1.05rem 1.15rem 1.15rem; }

.fonction h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  margin: 0 0 .35rem;
}

.fonction .role { margin: 0 0 .5rem; color: var(--texte); }
.fonction .detail {
  margin: 0 0 1rem;
  color: var(--texte-doux);
  font-size: .89rem;
  max-width: 72ch;
}
.fonction .detail code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .85em;
  background: var(--encre);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: .05em .35em;
  color: var(--texte);
}

/* ---------- Avertissement ---------- */

.alerte {
  display: flex;
  gap: .7rem;
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: 8px;
  background: rgba(224, 90, 78, .09);
  border: 1px solid rgba(224, 90, 78, .32);
  color: #f0b8b2;
  font-size: .87rem;
}
.alerte b { color: #ffd7d2; }
.alerte::before { content: "!"; font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--masse); }

/* ---------- Formulaires ---------- */

.champs { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }

.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.champ input {
  font: inherit;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--encre);
  color: var(--texte);
  border: 1px solid var(--filet-vif);
  border-radius: 7px;
  padding: .5rem .65rem;
  min-height: 40px;
  width: 165px;
}
.champ input:focus-visible { outline: 2px solid var(--lecture); outline-offset: 1px; border-color: transparent; }

.action {
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: .55rem 1.1rem;
  min-height: 40px;
  cursor: pointer;
  background: var(--lecture);
  color: #06231d;
}
.action:hover { filter: brightness(1.08); }
.action:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
.action--danger { background: var(--masse); color: #2b0906; }
.action--neutre { background: transparent; border-color: var(--filet-vif); color: var(--texte); }
.action--neutre:hover { background: var(--panneau-haut); filter: none; }

/* ---------- Retour d'exécution ---------- */

.retour {
  margin: 0 0 1.15rem;
  padding: .8rem .95rem;
  border-radius: 8px;
  border: 1px solid var(--filet-vif);
  background: var(--panneau);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .86rem;
}
.retour--ok  { border-color: rgba(79,184,160,.45); color: #a8e6d6; }
.retour--vide{ border-color: rgba(217,164,65,.45); color: #f0d9a8; }

/* ---------- Tableau de données ---------- */

.cadre-table { overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--rayon); }

table.donnees {
  width: 100%;
  border-collapse: collapse;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem;
  white-space: nowrap;
}
table.donnees th {
  position: sticky; top: 0;
  background: var(--panneau-haut);
  color: var(--texte-faible);
  font-weight: 500;
  text-align: left;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .68rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--filet);
}
table.donnees td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--filet);
  color: var(--texte-doux);
}
table.donnees tr:last-child td { border-bottom: 0; }
table.donnees tbody tr:nth-child(odd) { background: rgba(255,255,255,.017); }
table.donnees tbody tr:hover { background: var(--panneau-haut); }
table.donnees td.fort { color: var(--texte); }

.etiquette {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 4px;
  border: 1px solid var(--filet-vif);
  background: var(--encre);
  font-size: .72rem;
  color: var(--texte-doux);
}
.oui { color: var(--lecture); }
.non { color: var(--texte-faible); }

/* ---------- Page de connexion ---------- */

.porte {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.porte-carte {
  width: 100%;
  max-width: 370px;
  background: var(--panneau);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 1.9rem 1.7rem;
}
.porte-carte .marque { font-size: 1.6rem; }
.porte-carte .champ input { width: 100%; }
.porte-carte .action { width: 100%; justify-content: center; margin-top: .4rem; }
.porte-carte .champs { flex-direction: column; align-items: stretch; gap: .8rem; }

/* ---------- Divers ---------- */

.note {
  margin: 1.6rem 0 0;
  color: var(--texte-faible);
  font-size: .82rem;
  max-width: 72ch;
}

@media (prefers-reduced-motion: no-preference) {
  .fonction, .porte-carte { animation: monte .32s ease both; }
  .fonction:nth-child(2) { animation-delay: .04s; }
  .fonction:nth-child(3) { animation-delay: .08s; }
  .fonction:nth-child(4) { animation-delay: .12s; }
  @keyframes monte { from { opacity: 0; transform: translateY(7px); } }
}