/* =========================================================================
   OTENTIK — IDENTITÉ VISUELLE

   Le système de formes vient de BraiseMaster : rien à réinventer, les
   espacements, les rayons et les ombres sont les mêmes. Seule la couleur
   change, et elle change ici, en une seule feuille posée par-dessus.
   Deux outils, un socle, deux identités.

   La crêperie : noir de fonte, marron de pâte cuite, beige de froment.
   ========================================================================= */

:root {
  /* Fonds — beige de froment plutôt que le blanc chaud de BraiseMaster */
  --bg: #f6f1e7;
  --bg-alt: #efe7d8;
  --bg-card: #fffdf8;
  --bg-elevated: #fffdf8;
  --bg-header: rgba(255,253,248,0.88);

  --border: #e2d6c0;
  --border-strong: #cdbb9d;
  --border-focus: #6f4a2a;

  /* Textes — noir de fonte, pas de gris bleuté */
  --text: #17120d;
  --text-2: #5a4a3a;
  --text-muted: #9c8b77;
  --text-inverse: #f6f1e7;

  /* Accent — marron de pâte cuite */
  --primary: #6f4a2a;
  --primary-hover: #56381f;
  --primary-active: #3d2715;
  --primary-light: #f4ece0;
  --primary-tint: #e7d8c2;
  --primary-glow: rgba(111,74,42,0.20);

  --secondary: #17120d;
  --secondary-hover: #000000;
  --secondary-light: #efe7d8;

  --brand: #17120d;
  --brand-light: #f4ece0;
}

/* Le carré de marque : noir, avec le liseré beige qui le détache. */
.brand-mark {
  background: #17120d;
  color: #f6f1e7;
  box-shadow: inset 0 0 0 1px rgba(246,241,231,0.18);
}

/* ------------------------------------------------------- connexion
   Ces classes n'existaient nulle part : la page s'affichait donc brute,
   en texte empilé. Elles vivent ici parce que l'écran d'entrée est ce
   qui porte l'identité d'un outil. */
.connexion-fond {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 620px at 50% -12%, #fffdf8 0%, transparent 62%),
    linear-gradient(170deg, #f6f1e7 0%, #efe7d8 55%, #f6f1e7 100%);
  overflow: auto;
}

.connexion-carte {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 34px 30px 30px;
  box-shadow: 0 24px 50px -24px rgba(61,39,21,0.28);
}

.connexion-titre {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
}

.connexion-sous {
  margin-top: 5px;
  margin-bottom: 26px;
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
}

.connexion-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.connexion-champ {
  width: 100%;
  margin-bottom: 18px;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.connexion-champ:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Réservée en permanence : une erreur qui apparaît ne doit pas faire
   sauter le bouton sous le curseur. */
.connexion-erreur {
  min-height: 18px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--danger);
  opacity: 0;
  transition: opacity .15s;
}
.connexion-erreur.visible { opacity: 1; }

/* ------------------------------------------------------- petites listes */
.compo-liste {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.compo-ligne {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.compo-ligne:last-child { border-bottom: 0; }

.nom-cat {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text);
}

/* ------------------------------------------------------- administration */
.form-cols-3 { grid-template-columns: 1.2fr 1.4fr 1fr; }

/* Le message d'accès à transmettre : prêt à coller dans un SMS, un
   WhatsApp ou un courriel. */
.message-acces {
  margin-top: 16px;
  padding: 16px;
  background: var(--primary-light);
  border: 1px solid var(--primary-tint);
  border-radius: 12px;
}
.message-acces-titre { font-weight: 700; color: var(--text); margin-bottom: 4px; }
.message-acces-aide { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.message-acces textarea {
  width: 100%;
  min-height: 170px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 10px;
}
.statut-select { min-width: 150px; }