/* ══ Ce qui décide de l'apparence ══════════════════════════════════════════════
   Tout est ici. Le reste de la feuille consomme, ne décide pas.               */
:root {
  color-scheme: light dark;

  /* Palette — thème clair */
  --fond: #fbfaf8;
  --fond-carte: #ffffff;
  --fond-doux: #f2efe9;
  --trait: #ddd6c9;
  --texte: #211d16;
  --texte-doux: #6b6355;
  --accent: #8a5a2b;
  --accent-doux: #f0e4d4;
  --accent-trait: #c9b48c;
  --sur-accent: #ffffff;
  --alerte: #a02a20;
  --ok: #2f6b3f;

  /* Rubans d'environnement (T-018). Une paire fond / texte par environnement :
     ils doivent rester lisibles dans les deux thèmes, donc ils ne suivent pas
     la palette — c'est leur seule raison d'exister à part. */
  --ruban-production-fond: #1f2933;
  --ruban-production-texte: #e4e7eb;
  --ruban-preprod-fond: #b45309;
  --ruban-preprod-texte: #fff7ed;
  --ruban-local-fond: #374151;
  --ruban-local-texte: #e5e7eb;
  --ruban-inconnu-fond: #b91c1c;
  --ruban-inconnu-texte: #ffffff;

  /* Échelle typographique — un rapport constant, pas des valeurs au hasard */
  --tx-xs: .74rem;
  --tx-sm: .82rem;
  --tx-md: .92rem;
  --tx-base: 1rem;
  --tx-lg: 1.15rem;
  --tx-xl: 1.6rem;
  --tx-2xl: 1.9rem;

  /* Échelle d'espacement — la densité de toute l'interface se règle ici */
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* Formes et mouvement */
  --rayon-sm: 8px;
  --rayon: 12px;
  --rayon-pilule: 999px;
  --ombre: 0 1px 2px rgba(33, 29, 22, .05), 0 6px 18px rgba(33, 29, 22, .05);
  --ombre-relief: 0 2px 4px rgba(33, 29, 22, .07), 0 12px 28px rgba(33, 29, 22, .08);
  --transition: 140ms ease;
  --conteneur: 1080px;

  --police: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16150f;
    --fond-carte: #201e17;
    --fond-doux: #2a271e;
    --trait: #3b372c;
    --texte: #ece7db;
    --texte-doux: #a29a89;
    --accent: #d9a066;
    --accent-doux: #33291d;
    --accent-trait: #6b5333;
    --sur-accent: #1a1610;
    --alerte: #e08b81;
    --ok: #8fc79f;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --ombre-relief: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .3);
  }
}

/* Le mouvement est un confort, jamais une condition : qui le refuse doit
   obtenir la même interface, immobile. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
  * { animation: none !important; }
}

/* ══ Socle ═══════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: var(--tx-base)/1.6 var(--police);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: .15em; transition: color var(--transition); }
a:hover { text-decoration: none; }

/* ══ Ruban d'environnement — DETTE T-018 ═════════════════════════════════════
   Deux adresses qui ne diffèrent que d'une lettre ne se distinguent pas de
   mémoire : c'est l'écran qui doit le dire. Toujours affiché, y compris en
   production et sur la page de connexion — une absence se lit alors comme un
   défaut, jamais comme « production ».                                        */
.ruban {
  margin: 0;
  padding: var(--esp-1) var(--esp-4);
  text-align: center;
  font-size: var(--tx-sm);
  letter-spacing: .02em;
}
.ruban strong { text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.ruban-production { background: var(--ruban-production-fond); color: var(--ruban-production-texte); }
.ruban-preprod { background: var(--ruban-preprod-fond); color: var(--ruban-preprod-texte); }
.ruban-local { background: var(--ruban-local-fond); color: var(--ruban-local-texte); }
/* Un environnement non reconnu est une anomalie, pas un cas par défaut — même
   esprit que le fail-closed : on le voit, on ne le devine pas. */
.ruban-inconnu { background: var(--ruban-inconnu-fond); color: var(--ruban-inconnu-texte); font-weight: 700; }

/* ══ Bandeau et navigation ═══════════════════════════════════════════════════ */

.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--fond-carte);
  position: sticky;
  top: 0;
  z-index: 5;
}

.bandeau-interieur,
.contenu {
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 0 var(--esp-5);
}

.bandeau-interieur {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  min-height: 58px;
  flex-wrap: wrap;
}

.marque {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--tx-sm);
  color: var(--texte);
  text-decoration: none;
}

.navigation { display: flex; gap: var(--esp-4); flex: 1; flex-wrap: wrap; }
.navigation a {
  color: var(--texte-doux);
  text-decoration: none;
  font-size: var(--tx-md);
  padding: var(--esp-1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.navigation a:hover { color: var(--texte); }
.navigation a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.contenu { padding-top: var(--esp-6); padding-bottom: var(--esp-7); }

/* ══ Typographie ═════════════════════════════════════════════════════════════ */

h1 { font-size: var(--tx-xl); margin: 0 0 var(--esp-1); letter-spacing: -.015em; line-height: 1.25; }
h2 { font-size: var(--tx-lg); margin: var(--esp-6) 0 var(--esp-3); letter-spacing: -.01em; }
h3 { font-size: var(--tx-md); margin: 0 0 var(--esp-2); }
.sous-titre { color: var(--texte-doux); margin: 0 0 var(--esp-5); font-size: var(--tx-md); }

/* ══ Cartes et grilles ═══════════════════════════════════════════════════════ */

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--esp-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Le relief au survol dit « ceci s'ouvre » sans ajouter un mot à l'écran. */
.grille .carte { transition: box-shadow var(--transition), border-color var(--transition); }
.grille .carte:hover { box-shadow: var(--ombre-relief); border-color: var(--accent-trait); }

.vignette {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--fond-doux);
  border-radius: var(--rayon) var(--rayon) 0 0;
  display: block;
}

.vignette-absente {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--fond-doux);
  color: var(--texte-doux);
  font-size: var(--tx-sm);
  border-radius: var(--rayon) var(--rayon) 0 0;
}

.carte-corps { padding: var(--esp-3) var(--esp-4) var(--esp-4); }
.carte-titre { font-weight: 600; text-decoration: none; color: var(--texte); display: block; }
.carte-meta { color: var(--texte-doux); font-size: var(--tx-sm); margin-top: var(--esp-1); }

/* ══ Étiquettes d'état ═══════════════════════════════════════════════════════ */

.etiquette {
  display: inline-block;
  font-size: var(--tx-xs);
  padding: .16rem var(--esp-2);
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--trait);
  background: var(--fond-doux);
  color: var(--texte-doux);
  white-space: nowrap;
}
.etiquette-stock { border-color: var(--accent-trait); background: var(--accent-doux); color: var(--accent); }
.etiquette-en_cours { border-color: var(--accent); color: var(--accent); }
.etiquette-terminee { border-color: var(--ok); color: var(--ok); }
.etiquette-abandonnee { text-decoration: line-through; }

/* ══ Champs et boutons ═══════════════════════════════════════════════════════ */

.filtres {
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
  align-items: flex-end;
  padding: var(--esp-4);
  margin-bottom: var(--esp-5);
}
.filtres label { display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--tx-xs); color: var(--texte-doux); }

input, select, textarea {
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  padding: var(--esp-2) var(--esp-3);
  min-width: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover, select:hover, textarea:hover { border-color: var(--accent-trait); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
textarea { min-height: 7rem; resize: vertical; width: 100%; }

.bouton {
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
  border-radius: var(--rayon-sm);
  padding: var(--esp-2) var(--esp-4);
  text-decoration: none;
  display: inline-block;
  transition: filter var(--transition), box-shadow var(--transition), background var(--transition);
}
.bouton:hover { filter: brightness(1.08); box-shadow: var(--ombre); }
.bouton:active { filter: brightness(.95); box-shadow: none; }
.bouton-discret { background: transparent; color: var(--texte); border-color: var(--trait); }
.bouton-discret:hover { background: var(--fond-doux); filter: none; }
.bouton-danger { background: transparent; border-color: var(--alerte); color: var(--alerte); }
.bouton-danger:hover { background: var(--alerte); color: var(--sur-accent); filter: none; }

.formulaire { display: grid; gap: var(--esp-4); padding: var(--esp-5); max-width: 640px; }
.champ { display: grid; gap: var(--esp-1); }
.champ > label { font-weight: 600; font-size: var(--tx-sm); }
.aide { color: var(--texte-doux); font-size: var(--tx-sm); }
.champ-erreur input, .champ-erreur select, .champ-erreur textarea { border-color: var(--alerte); }
.message-erreur { color: var(--alerte); font-size: var(--tx-sm); }

/* ══ Avis ════════════════════════════════════════════════════════════════════ */

.avis {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--rayon);
  margin-bottom: var(--esp-5);
  border: 1px solid;
  font-size: var(--tx-md);
}
.avis-erreur { border-color: var(--alerte); color: var(--alerte); background: transparent; }
.avis-succes { border-color: var(--ok); color: var(--ok); background: transparent; }

/* ══ Fiche détaillée ═════════════════════════════════════════════════════════ */

.fiche { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--esp-6); align-items: start; }
@media (max-width: 780px) { .fiche { grid-template-columns: 1fr; } }

.proprietes { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--esp-1) var(--esp-5); font-size: var(--tx-md); }
.proprietes dt { color: var(--texte-doux); }
.proprietes dd { margin: 0; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-3); padding: 0; list-style: none; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-sm); background: var(--fond-doux); }

.journal { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-3); }
.journal li { border-left: 2px solid var(--trait); padding: .1rem 0 .1rem var(--esp-4); }
.journal time { color: var(--texte-doux); font-size: var(--tx-sm); display: block; }

/* ══ Tableau de bord ═════════════════════════════════════════════════════════ */

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-4); }
.chiffre { padding: var(--esp-4); }
.chiffre .valeur { font-size: var(--tx-2xl); font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.chiffre .intitule { color: var(--texte-doux); font-size: var(--tx-sm); }
.chiffre .indisponible { color: var(--texte-doux); font-size: var(--tx-md); font-style: italic; }

.barres { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-2); }
.barres li { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: var(--esp-3); align-items: center; font-size: var(--tx-md); }
.barre { background: var(--fond-doux); border-radius: var(--rayon-pilule); height: .55rem; overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--accent); border-radius: var(--rayon-pilule); }

/* ══ Divers ══════════════════════════════════════════════════════════════════ */

.pagination { display: flex; gap: var(--esp-2); align-items: center; justify-content: center; margin-top: var(--esp-6); }
.vide { text-align: center; padding: var(--esp-7) var(--esp-4); color: var(--texte-doux); }

table { border-collapse: collapse; width: 100%; font-size: var(--tx-md); }
th, td { text-align: left; padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--trait); }
th { font-size: var(--tx-sm); color: var(--texte-doux); font-weight: 600; letter-spacing: .02em; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--fond-doux); }

.lignes-actions { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.pied { color: var(--texte-doux); font-size: var(--tx-xs); text-align: center; padding: var(--esp-6) var(--esp-4); }
.cles { list-style: none; padding: 0; margin: var(--esp-2) 0 0; display: grid; gap: var(--esp-1); font-size: var(--tx-sm); }

.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Classes de mise en page. Elles remplacent les attributs de style, que la CSP
   ignore silencieusement — cf. l'en-tête de ce fichier. */
.page-connexion { margin: var(--esp-7) auto; gap: var(--esp-4); }
.entete { display: flex; gap: var(--esp-4); flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: var(--esp-5); }
.entete-liste { margin-bottom: var(--esp-4); }
.sans-marge { margin: 0; }
.sans-marge-haut { margin-top: 0; }
.espace-mince { margin-top: var(--esp-1); }
.espace-court { margin-top: var(--esp-2); }
.espace { margin-top: var(--esp-4); }
.espace-long { margin-top: var(--esp-5); }
.bloc { padding: var(--esp-5); }
.bloc-serre { padding: var(--esp-4); }
.bloc-large { padding: var(--esp-5); }
.pleine-largeur { max-width: none; }
.texte-libre { white-space: pre-wrap; margin: 0; }
.texte-libre-etape { white-space: pre-wrap; margin: var(--esp-1) 0; }
.carte-photo { padding: var(--esp-2); }
.legende-photo { display: grid; gap: var(--esp-1); margin-top: var(--esp-2); }
.miniature-etape { max-width: 140px; border-radius: var(--rayon-sm); }
.bouton-mini { font-size: var(--tx-xs); padding: .15rem var(--esp-2); }
.colonne-actions { display: grid; gap: var(--esp-4); }
.chiffre .lien-valeur { font-size: var(--tx-lg); }
.chiffre .detail { font-weight: 400; }

/* Largeurs de barres, par pas de cinq points. Une barre est une impression visuelle :
   la valeur exacte est imprimée à côté, en chiffres. */
.barre-p0 span { width: 0%; }
.barre-p5 span { width: 5%; }
.barre-p10 span { width: 10%; }
.barre-p15 span { width: 15%; }
.barre-p20 span { width: 20%; }
.barre-p25 span { width: 25%; }
.barre-p30 span { width: 30%; }
.barre-p35 span { width: 35%; }
.barre-p40 span { width: 40%; }
.barre-p45 span { width: 45%; }
.barre-p50 span { width: 50%; }
.barre-p55 span { width: 55%; }
.barre-p60 span { width: 60%; }
.barre-p65 span { width: 65%; }
.barre-p70 span { width: 70%; }
.barre-p75 span { width: 75%; }
.barre-p80 span { width: 80%; }
.barre-p85 span { width: 85%; }
.barre-p90 span { width: 90%; }
.barre-p95 span { width: 95%; }
.barre-p100 span { width: 100%; }