/* ERP La Saveur Vanille : mêmes couleurs que l'ERP Access (ardoise et or). */

:root {
  color-scheme: light;
  --fond: #F8FAFC;
  --blanc: #FFFFFF;
  --titre: #0F172A;
  --texte: #1E293B;
  --gris: #64748B;
  --bordure: #CBD5E1;
  --separateur: #E2E8F0;
  --ardoise: #334155;
  --ardoise-fonce: #1E293B;
  --ardoise-clair: #F1F5F9;
  --or: #C8A15A;
  --or-fonce: #B08840;
  --or-clair: #E9D8B4;
  --rouge: #B91C1C;
  --rayon: 8px;
  --police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.45;
}

/* --- Bandeau --- */
.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 24px;
  background: var(--ardoise-fonce);
  color: var(--blanc);
}
.marque { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.marque-nom { font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.marque-sous-titre { font-size: 13px; color: var(--or-clair); }
.bandeau-date { font-size: 13px; color: var(--or-clair); }
.bandeau-date::first-letter { text-transform: uppercase; }

/* --- Contenu --- */
.contenu { max-width: 1100px; margin: 0 auto; padding: 24px; }
.contenu-seul { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.titre-page { margin: 0 0 16px; font-size: 20px; color: var(--titre); }

/* --- Tuiles de l'accueil : une ligne par famille, son nom à gauche --- */
.famille {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
}
.famille-titre {
  margin: 0;
  padding-top: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 8px 10px;
  border-radius: var(--rayon);
  background: var(--ardoise);
  color: var(--blanc);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s;
}
a.tuile:hover, a.tuile:focus-visible { background: var(--ardoise-fonce); }
.tuile-principale { background: var(--or); color: var(--ardoise-fonce); }
a.tuile-principale:hover, a.tuile-principale:focus-visible { background: var(--or-fonce); }
/* Module pas encore construit : visible mais grisé, avec l'étape où il arrive */
.tuile-a-venir { opacity: .45; cursor: default; }
.tuile small { font-size: 11px; font-weight: 400; opacity: .9; }

/* --- Boutons --- */
.bouton {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.bouton-principal { background: var(--or); color: var(--ardoise-fonce); }
.bouton-principal:hover { background: var(--or-fonce); }
.bouton-sombre { background: var(--ardoise); color: var(--blanc); }
.bouton-sombre:hover { background: var(--ardoise-fonce); }
.bouton-clair { background: var(--ardoise-clair); color: var(--ardoise); border-color: var(--bordure); }
.bouton-clair:hover { background: var(--separateur); }
.bouton-large { width: 100%; }
.bouton:disabled { opacity: .6; cursor: wait; }

/* --- Connexion --- */
.carte-connexion, .carte-message {
  width: 100%;
  max-width: 380px;
  padding: 28px 24px;
  background: var(--blanc);
  border: 1px solid var(--separateur);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.carte-message { max-width: 520px; margin: 40px auto; }
.carte-connexion { text-align: center; }
.carte-connexion .logo { width: 200px; height: auto; }
.carte-connexion h1, .carte-message h1 { margin: 12px 0 20px; font-size: 20px; color: var(--titre); }
.carte-connexion form { text-align: left; }
label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ardoise); }
input[type="password"], input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  background: var(--blanc);
  color: var(--titre);
  margin-bottom: 14px;
}
input:focus { outline: 2px solid var(--or); outline-offset: 1px; border-color: var(--or); }
.erreur { margin: -4px 0 14px; color: var(--rouge); font-size: 14px; font-weight: 600; }
.note { margin: 16px 0 0; font-size: 13px; color: var(--gris); }

/* --- Pied de l'accueil --- */
.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--separateur);
  font-size: 13px;
  color: var(--gris);
}
.pied p { margin: 0; }

/* --- Alerte « pas de connexion » --- */
.alerte-connexion {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 44px 14px 16px;
  background: var(--rouge);
  color: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .25);
  font-size: 15px;
}
.alerte-connexion[hidden] { display: none; }
.alerte-connexion strong { display: block; }
.alerte-fermer {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  cursor: pointer;
}

/* --- Téléphone --- */
@media (max-width: 640px) {
  .bandeau { padding: 12px 16px; }
  .marque-nom { font-size: 18px; }
  .marque-sous-titre { font-size: 12px; }
  .contenu { padding: 16px; }
  .famille { grid-template-columns: 1fr; gap: 6px; margin-bottom: 18px; }
  .famille-titre { padding-top: 0; }
  .tuiles { grid-template-columns: repeat(2, 1fr); }
  .tuile { min-height: 58px; font-size: 14px; }
}