/* base.css — design system partagé de la plateforme (tokens + composants).
   Extrait de public/app.html et public/login.html, complété par les classes de layout
   "shell" (header/nav persistante/volet droit) introduites par la refonte plateforme.
   Le générateur de dashboard produit son propre CSS (GENERATEUR-DASHBOARD/generateur_dashboard.py),
   volontairement séparé : ce fichier ne concerne que l'interface de la plateforme elle-même. */

:root {
  color-scheme: light dark;
  --navy:#101828; --blue:#2563EB; --bl:#EAF1FF; --bg:#F8FAFC; --slate:#64748B; --border:#E2E8F0;
  --green:#16A34A; --orange:#F59E0B; --red:#DC2626;
}
* { box-sizing: border-box; }
body {
  font-family: Inter, -apple-system, "Segoe UI", sans-serif; margin: 0; line-height: 1.5;
  color: var(--navy); background: var(--bg);
}

/* ---------------------------------------------------------------- en-tête + navigation persistante */
.shell-header {
  background: var(--navy); color: #fff; padding: 1rem 1.6rem; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.shell-header .logo { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.05rem; text-decoration: none; color: #fff; }
.shell-header .shell-header-actions { display: flex; align-items: center; gap: .6rem; }
.deconnexion, .btn-utilisateur { background: none; border: 1px solid #33415a; color: #cbd5e1; padding: .4rem .8rem;
  border-radius: 6px; font: 600 .82rem Inter; cursor: pointer; text-decoration: none; display: inline-block; }
.deconnexion:hover, .btn-utilisateur:hover { background: #1c2536; color: #fff; }

.shell-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 0 1.6rem;
  display: flex; gap: .2rem; overflow-x: auto; }
.shell-nav a { padding: .75rem .9rem; font: 600 .87rem Inter; color: var(--slate); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.shell-nav a:hover { color: var(--navy); }
.shell-nav a.actif { color: var(--blue); border-bottom-color: var(--blue); }

/* ---------------------------------------------------------------- grille contenu (pages admin) */
.shell-grid { max-width: 1240px; margin: 0 auto; padding: 1.6rem 1.6rem 4rem; }

/* ---------------------------------------------------------------- page publique (accueil) */
.page-publique { min-height: 100vh; display: flex; flex-direction: column; }
.page-publique .entete-publique { padding: 1.4rem 1.8rem; }
.page-publique .entete-publique .logo { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--navy); text-decoration: none; }
.page-publique .coeur { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; text-align: center; }
.page-publique h1 { font-family: Manrope, sans-serif; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; max-width: 30rem; }
.page-publique .accroche { color: var(--slate); font-size: 1rem; max-width: 30rem; margin: 0 0 2.2rem; }
.comptes { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.compte-carte { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.6rem 1.8rem;
  width: 15rem; text-align: left; display: flex; flex-direction: column; gap: .8rem;
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.compte-carte:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(37,99,235,.14); transform: translateY(-2px); }
.compte-carte h2 { font-family: Manrope, sans-serif; font-size: 1rem; margin: 0; }
.compte-carte p { color: var(--slate); font-size: .84rem; margin: 0; }
.compte-carte .badge { display: inline-block; background: var(--bl); color: var(--blue); font-size: .72rem;
  font-weight: 700; padding: .15rem .5rem; border-radius: 999px; align-self: flex-start; }
.compte-carte .cta { color: var(--blue); font-weight: 700; font-size: .84rem; }

/* ---------------------------------------------------------------- vitrine (accueil) */
.bande { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.section-vitrine { max-width: 64rem; margin: 0 auto; padding: 2.6rem 1.8rem; }
.section-vitrine .section-titre { font-family: Manrope, sans-serif; font-size: 1.35rem; font-weight: 800;
  text-align: center; margin: 0 0 1.6rem; letter-spacing: -.01em; }
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.etape { text-align: center; }
.etape .etape-num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  border-radius: 999px; background: var(--bl); color: var(--blue); font-family: Manrope, sans-serif; font-weight: 800;
  font-size: .95rem; margin-bottom: .7rem; }
.etape h3 { font-family: Manrope, sans-serif; font-size: .95rem; margin: 0 0 .3rem; }
.etape p { color: var(--slate); font-size: .85rem; margin: 0; }
.fonctionnalites { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.fonctionnalite { border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; background: var(--bg); }
.fonctionnalite h3 { font-family: Manrope, sans-serif; font-size: .92rem; margin: 0 0 .3rem; }
.fonctionnalite p { color: var(--slate); font-size: .83rem; margin: 0; }
.section-placeholder .placeholder-carte { border: 1px dashed var(--border); border-radius: 10px;
  padding: 2rem 1.5rem; text-align: center; color: var(--slate); font-size: .87rem; }
.pied-page { text-align: center; color: var(--slate); font-size: .82rem; padding: 1.8rem 1.8rem 2.4rem; }
@media (max-width: 720px) { .etapes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- lien de retour (pages publiques isolées) */
.lien-retour { position: fixed; top: 1.4rem; left: 1.8rem; display: inline-flex; align-items: center; gap: .35rem;
  color: var(--slate); font-size: .84rem; font-weight: 600; text-decoration: none; z-index: 10; }
.lien-retour:hover { color: var(--navy); }

/* ---------------------------------------------------------------- fil d'Ariane (pages admin en profondeur) */
.fil-ariane { font-size: .82rem; color: var(--slate); margin-bottom: .4rem; }
.fil-ariane a { color: var(--slate); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- composants génériques (formulaires, onglets, cartes) */
main { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
h1 { font-family: Manrope, sans-serif; font-size: 1.35rem; font-weight: 800; margin: .2rem 0 .2rem; letter-spacing: -.02em; }
.sous-titre { color: var(--slate); margin-top: 0; margin-bottom: 1.4rem; font-size: .92rem; }
.onglets { display: flex; gap: .3rem; border-bottom: 2px solid var(--border); margin-bottom: 1.2rem; }
.onglet { padding: .6rem 1.1rem; cursor: pointer; border: none; background: none; font: 600 .95rem Inter;
  color: var(--slate); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.onglet.actif { color: var(--blue); border-bottom-color: var(--blue); }
.panneau { display: none; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 1.3rem 1.5rem; }
.panneau.actif { display: block; }
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 1.1rem 0 0; padding: .9rem 1.1rem 1.1rem; }
legend { font-family: Manrope, sans-serif; font-weight: 700; font-size: .88rem; color: var(--navy); padding: 0 .4rem; }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
label { display: block; font-weight: 600; margin: 1rem 0 .3rem; font-size: .87rem; }
label:first-child { margin-top: 0; }
input[type=file], input[type=text], input[type=date], input[type=number], input[type=url],
input[type=password], select, textarea {
  width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 6px; font-size: .93rem;
  box-sizing: border-box; font-family: inherit; color: var(--navy); background: #fff; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
input[type=color] { width: 100%; height: 2.2rem; border: 1px solid var(--border); border-radius: 6px; padding: .2rem; }
textarea { min-height: 4rem; font-family: ui-monospace, Menlo, monospace; font-size: .83rem; }
.aide { color: var(--slate); font-size: .8rem; margin-top: .25rem; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; margin-top: .3rem; }
.case { display: flex; align-items: center; gap: .5rem; }
.case label { margin: 0; font-weight: normal; font-size: .87rem; }
.nav-rows { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.nav-row { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--border);
  border-radius: 8px; padding: .4rem .55rem; background: #fff; }
.nav-row-move { display: flex; flex-direction: column; gap: 1px; }
.nav-row-move button { border: 1px solid var(--border); background: #fff; border-radius: 4px;
  font-size: .6rem; line-height: 1; padding: 2px 5px; cursor: pointer; color: var(--slate); }
.nav-row-move button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.nav-row-move button:disabled { opacity: .3; cursor: default; }
.nav-row input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.nav-row .nav-label { flex: 1.3; margin: 0; font-weight: normal; font-size: .85rem; }
.nav-row .nav-title { flex: 1; border: 1px solid var(--border); border-radius: 6px;
  padding: .35rem .55rem; font-size: .83rem; color: var(--navy); background: #fff; }
.nav-row .nav-id { flex: 0 0 auto; color: var(--slate); font-size: .7rem; font-family: ui-monospace, Menlo, monospace; }
@media (max-width: 680px) { .nav-row { flex-wrap: wrap; } .nav-row .nav-id { display: none; } }
details { margin-top: 1.1rem; }
summary { cursor: pointer; color: var(--blue); font-size: .88rem; font-weight: 600; }
button.valider { margin-top: 1.3rem; background: var(--navy); color: #fff; border: none;
  padding: .65rem 1.3rem; border-radius: 7px; font: 600 .95rem Inter; cursor: pointer; }
button.valider:hover { background: var(--blue); }
button.valider:disabled { background: var(--slate); cursor: wait; }
button.secondaire { background: #fff; color: var(--navy); border: 1px solid var(--border);
  padding: .55rem 1.1rem; border-radius: 7px; font: 600 .88rem Inter; cursor: pointer; }
button.secondaire:hover { border-color: var(--blue); color: var(--blue); }
.resultat { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.avertissement { background: #FFF7E6; border: 1px solid var(--orange); border-radius: 6px;
  padding: .7rem .9rem; margin: .7rem 0; font-size: .88rem; color: #92600A; }
.erreur { background: #FEF2F2; border: 1px solid var(--red); border-radius: 6px;
  padding: .7rem .9rem; margin: .7rem 0; color: #991B1B; font-size: .9rem; }
.succes { background: #ECFDF3; border: 1px solid var(--green); border-radius: 6px;
  padding: .7rem .9rem; margin: .7rem 0; color: #166534; font-size: .9rem; }
.ok { color: var(--green); font-weight: 600; }
.telechargements { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.telechargements a, .telechargements button { background: var(--blue); color: #fff; text-decoration: none;
  padding: .5rem 1rem; border-radius: 6px; font-size: .87rem; font-weight: 600; border: none; cursor: pointer; }
.telechargements a.secondaire, .telechargements button.secondaire2 { background: var(--navy); color: #fff; }
.telechargements .coffre { background: #7C2D12; }
table.detail { border-collapse: collapse; margin-top: .6rem; font-size: .84rem; width: 100%; }
table.detail th, table.detail td { border-bottom: 1px solid var(--border); padding: .3rem .5rem; text-align: left; }
code { background: var(--bl); color: var(--blue); padding: .1rem .3rem; border-radius: 4px; font-size: .85em; }
.cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fiche { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; background: #fff; }
.fiche h3 { font-family: Manrope, sans-serif; margin: 0 0 .2rem; font-size: 1rem; }
.fiche .meta { color: var(--slate); font-size: .82rem; margin-bottom: .6rem; }
.fiche .liens { display: flex; gap: .5rem; flex-wrap: wrap; }
.fiche .liens a { font-size: .82rem; color: var(--blue); text-decoration: none; font-weight: 600; }
.fiche .liens a:hover { text-decoration: underline; }
.fiche .actions { display: flex; align-items: center; gap: .5rem; margin-top: .7rem;
  padding-top: .6rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.dashboard-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .5rem; }
.dashboard-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem;
  border-radius: 999px; white-space: nowrap; }
.dashboard-tag-filtre { cursor: pointer; border: 1.5px solid transparent; background: none; font-family: inherit; }
.dashboard-tag-filtre.actif { border-color: currentColor; }
.dashboard-tag-0 { background: #EAF1FF; color: #2563EB; }
.dashboard-tag-1 { background: #E7F7EE; color: #16A34A; }
.dashboard-tag-2 { background: #F1EAFF; color: #7C3AED; }
.dashboard-tag-3 { background: #FFF4E0; color: #D97706; }
.dashboard-tag-4 { background: #FDE8F3; color: #DB2777; }
.dashboard-tag-5 { background: #E0F7F7; color: #0D9488; }
button.supprimer { background: #fff; color: var(--red); border: 1px solid var(--red);
  padding: .35rem .7rem; border-radius: 6px; font: 600 .8rem Inter; cursor: pointer; white-space: nowrap; }
button.supprimer:hover { background: var(--red); color: #fff; }
button.supprimer:disabled { opacity: .5; cursor: wait; }
.vide { color: var(--slate); font-size: .9rem; padding: 1rem 0; }
.chargement { color: var(--slate); font-size: .9rem; }

/* ---------------------------------------------------------------- KPI (dashboard admin) */
.kpi-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.kpi-carte { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.kpi-carte .valeur { font-family: Manrope, sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--navy); }
.kpi-carte .label { color: var(--slate); font-size: .82rem; margin-top: .1rem; }
.kpi-carte .valeur.attente { font-size: 1rem; color: var(--slate); }
.gros-bouton { display: inline-flex; align-items: center; gap: .5rem; background: var(--blue); color: #fff;
  border: none; padding: .8rem 1.4rem; border-radius: 8px; font: 700 .95rem Manrope, Inter; cursor: pointer;
  text-decoration: none; }
.gros-bouton:hover { background: #1d4ed8; }
.actions-rapides { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.8rem; }

/* ---------------------------------------------------------------- mini-modale (ex. Nouveau client) */
.modale-fond { position: fixed; inset: 0; background: rgba(16,24,40,.5); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modale { background: #fff; border-radius: 12px; padding: 1.4rem 1.5rem; width: 100%; max-width: 24rem; }
.modale h2 { font-family: Manrope, sans-serif; font-size: 1.05rem; margin: 0 0 1rem; }
.modale .modale-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
@media (prefers-color-scheme: dark) { .modale { background: #1c2536; } }

/* ---------------------------------------------------------------- responsive général */
@media (max-width: 680px) { .grille, .cases, .cartes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- page de connexion */
.page-login { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.carte-login { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 2.2rem 2rem;
  width: 100%; max-width: 360px; }
.carte-login .logo { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.15rem; margin-bottom: .3rem; }
.carte-login p.sous { color: var(--slate); font-size: .88rem; margin-top: 0; margin-bottom: 1.4rem; }
.carte-login button[type=submit] { margin-top: 1.1rem; width: 100%; background: var(--navy); color: #fff; border: none;
  padding: .65rem 1rem; border-radius: 7px; font: 600 .95rem Inter; cursor: pointer; }
.carte-login button[type=submit]:hover { background: var(--blue); }
.carte-login button[type=submit]:disabled { background: var(--slate); cursor: wait; }

/* ---------------------------------------------------------------- dark mode natif (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  body { background: var(--navy); color: #eee; }
  .shell-nav { background: #1c2536; border-color: #33415a; }
  .shell-nav a { color: #cbd5e1; }
  .shell-nav a:hover { color: #fff; }
  .panneau, fieldset, .fiche, .compte-carte, .carte-login, .kpi-carte { background: #1c2536; border-color: #33415a; }
  input, textarea, select { background: var(--navy); border-color: #33415a; color: #eee; }
  legend { color: #eee; }
  .onglets { border-color: #33415a; }
  .nav-row { background: #1c2536; border-color: #33415a; }
  .nav-row-move button { background: #1c2536; border-color: #33415a; color: #cbd5e1; }
  table.detail th, table.detail td { border-color: #33415a; }
  .avertissement { background: #3a2f14; border-color: #7a5c1d; color: #fde9c0; }
  .erreur { background: #3a1414; border-color: #7a2c2c; color: #fbd5d5; }
  button.secondaire { background: #1c2536; border-color: #33415a; color: #eee; }
  .telechargements a.secondaire, .telechargements button.secondaire2 { background: #33415a; }
  code { background: #101828; }
  button.supprimer { background: #1c2536; }
  .fiche .actions { border-color: #33415a; }
  .succes { background: #113322; border-color: #1f6b40; color: #bbf7d0; }
  .dashboard-tag-0 { background: #1e3a5f; color: #93c5fd; }
  .dashboard-tag-1 { background: #14432a; color: #86efac; }
  .dashboard-tag-2 { background: #3b2166; color: #d8b4fe; }
  .dashboard-tag-3 { background: #4a3313; color: #fcd34d; }
  .dashboard-tag-4 { background: #4a1934; color: #f9a8d4; }
  .dashboard-tag-5 { background: #0f3d3d; color: #5eead4; }
  .page-publique .entete-publique .logo { color: #eee; }
  .bande { background: #0d1524; border-color: #33415a; }
  .fonctionnalite { background: #1c2536; border-color: #33415a; }
  .fonctionnalite p, .etape p { color: #94a3b8; }
  .etape .etape-num { background: #1c2536; color: #7fa8ff; }
  .section-placeholder .placeholder-carte { border-color: #33415a; color: #94a3b8; }
  .lien-retour { color: #94a3b8; }
  .lien-retour:hover { color: #fff; }
}