/* Maxifiche : base, colonne de navigation, contrôles. Les marques (tampons, gommettes) sont dans marques.css. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/atkinson_400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/atkinson_700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

[data-theme="clair"] {
  color-scheme: light;
  --fond: #f3f4f7; --rail: #2a1d45; --rail-trait: #3b2b5e; --rail-texte: #f3effa; --rail-doux: #b9add2; --rail-survol: #3a2a5c; --panneau: #ffffff; --carte: #ffffff; --survol: #f6f4fa;
  --trait: #d9dce3; --trait-fort: #aeb3bf; --texte: #1b1d22; --doux: #555b66;
  --action: #5b3a8c; --sur-action: #ffffff; --action-doux: #efeaf6; --action-survol: #4a2e75;
  --rouge: #b4122a; --rouge-doux: #fbeaec; --jaune: #e8a800; --jaune-doux: #fdf4d6; --vert: #2e7d4f; --vert-doux: #e5f2ea;
  --ombre: 0 6px 18px rgba(27, 29, 34, .08); --ombre-haute: 0 -6px 18px rgba(27, 29, 34, .07);
}
[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #15161b; --rail: #1b1429; --rail-trait: #2e2445; --rail-texte: #efe9fa; --rail-doux: #a99cc6; --rail-survol: #2a2040; --panneau: #1e2027; --carte: #21232b; --survol: #272a33;
  --trait: #343845; --trait-fort: #535969; --texte: #eceef2; --doux: #aab0bc;
  --action: #b99ee9; --sur-action: #1a1226; --action-doux: #2c2440; --action-survol: #cdb8f2;
  --rouge: #ff8f98; --rouge-doux: #3a1e24; --jaune: #f2c14e; --jaune-doux: #3a3115; --vert: #6fcb96; --vert-doux: #1c3326;
  --ombre: 0 8px 22px rgba(0, 0, 0, .35); --ombre-haute: 0 -8px 22px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html { background: var(--fond); }
body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte);
  font: 15px/1.5 "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1 { font-size: 28px; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 18px; line-height: 1.3; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--action); color: var(--sur-action); }
input, textarea { caret-color: var(--action); }
* { scrollbar-color: var(--trait-fort) transparent; scrollbar-width: thin; }
a { color: var(--action); text-underline-offset: 3px; }

/* Colonne de navigation : reste visible au défilement */
#cote {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--rail); border-right: 1px solid var(--rail-trait);
  display: flex; flex-direction: column; gap: 20px; padding: 20px 12px 14px;
}
#cote { color: var(--rail-texte); }
#marque { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 20px; font-weight: 700; }
#marque img { width: 32px; height: 32px; }
.titre-cote { font-size: 12px; font-weight: 700; color: var(--rail-doux); padding: 0 8px; margin-bottom: 4px; }
.lien {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 36px;
  padding: 6px 10px; border: 0; background: none; border-radius: 8px; text-align: left;
}
.lien:hover { background: var(--rail-survol); }
.lien.actif { background: var(--rail-texte); color: var(--rail); font-weight: 700; }
.lien small { color: inherit; opacity: .75; font-weight: 400; font-variant-numeric: tabular-nums; }
#nouvelle-classe { font-weight: 700; }
#bas-cote { margin-top: auto; display: grid; gap: 10px; padding: 8px; font-size: 13px; color: var(--rail-doux); }
#cote .bouton { background: none; color: var(--rail-texte); border-color: var(--rail-doux); }
#cote .bouton:hover { border-color: var(--rail-texte); background: var(--rail-survol); }
#cote :focus-visible { outline-color: var(--rail-texte); }
#etat-redaction { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
/* Pied de colonne : le compte, et l'icône du mode clair ou sombre à côté */
#pied { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--rail-trait); padding-top: 12px; }
#compte { flex: 1; min-width: 0; }
.icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; color: var(--rail-texte); }
.icone:hover { background: var(--rail-survol); }
.utilisateur { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--rail-texte); font-size: 14px; }
.utilisateur span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.initiale { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rail-texte); color: var(--rail); font-weight: 700; font-size: 14px; text-transform: uppercase; }
#compte .discret { color: var(--rail-doux); border: 0; padding: 0; min-height: 0; font-size: 13px; }
#compte .discret:hover { color: var(--rail-texte); background: none; }

/* Page */
main { padding: 32px 40px 0; min-width: 0; }
.conteneur { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 32px; }
.tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sous-titre { color: var(--doux); margin: 4px 0 0; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 18px 20px; }
.carte.ombre { box-shadow: var(--ombre); }
.doux { color: var(--doux); font-size: 14px; }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pile { display: grid; gap: 8px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  border: 1px solid var(--trait-fort); background: var(--panneau); padding: 6px 14px; border-radius: 8px; font-weight: 400;
}
.bouton:hover:not(:disabled) { border-color: var(--texte); }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.principal { background: var(--action); color: var(--sur-action); border-color: var(--action); font-weight: 700; }
.principal:hover:not(:disabled) { background: var(--action-survol); border-color: var(--action-survol); }
.principal.grand { min-height: 44px; padding: 10px 26px; font-size: 16px; }
.discret { background: none; border-color: transparent; color: var(--doux); }
.discret:hover:not(:disabled) { color: var(--texte); border-color: var(--trait); }

/* Champs */
input[type=text], input[type=email], select, textarea {
  background: var(--panneau); border: 1px solid var(--trait-fort); border-radius: 8px; padding: 7px 10px; width: 100%; min-width: 0; min-height: 36px;
}
input::placeholder, textarea::placeholder { color: var(--doux); opacity: 1; }
textarea { resize: vertical; }
input[type=range] { accent-color: var(--action); }
input[type=checkbox] { accent-color: var(--action); width: 16px; height: 16px; }
label.champ { display: grid; gap: 4px; font-size: 14px; font-weight: 400; color: var(--doux); }
label.champ input, label.champ select, label.champ textarea { color: var(--texte); }

/* Choix */
.cartes-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.choix {
  border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--panneau); padding: 12px 14px;
  text-align: left; display: grid; gap: 2px; position: relative;
}
.choix:hover { border-color: var(--texte); }
.choix.actif { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--action-doux); }
.choix strong { font-size: 15px; padding-right: 22px; }
.choix span { color: var(--doux); font-size: 14px; }
.segments { justify-self: start; width: max-content; max-width: 100%; display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.segments button { border: 0; background: var(--panneau); min-height: 34px; padding: 4px 16px; color: var(--texte); }
.segments button + button { border-left: 1px solid var(--trait); }
.segments button.actif { background: var(--action); color: var(--sur-action); font-weight: 700; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { border: 1px solid var(--trait-fort); background: var(--panneau); border-radius: 999px; min-height: 30px; padding: 3px 12px; font-size: 14px; }
.puce:hover { border-color: var(--texte); }
.puce.actif { background: var(--action); border-color: var(--action); color: var(--sur-action); font-weight: 700; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  #cote { position: static; height: auto; }
  main { padding: 20px 16px 0; }
}

/* Menu du compte : s'ouvre au-dessus du nom, en bas de la colonne */
.compte-zone { position: relative; }
button.utilisateur { width: 100%; border: 0; background: none; padding: 4px; border-radius: 8px; text-align: left; }
button.utilisateur:hover { background: var(--rail-survol); }
.menu-compte {
  position: absolute; bottom: calc(100% + 8px); left: 0; width: 230px; z-index: 20; display: grid; gap: 2px; padding: 6px;
  background: var(--carte); color: var(--texte); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre);
}
.menu-compte-tete { display: grid; padding: 6px 8px 8px; border-bottom: 1px solid var(--trait); margin-bottom: 4px; overflow-wrap: anywhere; }
.menu-compte-tete span, .menu-compte-info { color: var(--doux); font-size: 13px; }
.menu-compte-info { padding: 0 8px 4px; }
.menu-compte button { border: 0; background: none; text-align: left; padding: 8px; border-radius: 6px; min-height: 36px; }
.menu-compte button:hover { background: var(--survol); }