/* Thème de l'Ordre d'Enial (étape 22) : arcane d'abord, parchemin en second.
   Palette tirée de l'emblème (donnees_sources/design/symbole.png) ; toutes les couleurs sont définies ici, et seulement ici.
   Le thème s'applique à toutes les pages (classe « theme » posée sur <body> par base.html). */

/* Polices hébergées dans le site (licence SIL OFL 1.1, fichiers de licence à côté), jamais chargées depuis un site extérieur */
@font-face { font-family: "Cinzel"; src: url("polices/cinzel-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("polices/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-4-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Bleu nuit de l'emblème, du fond aux surfaces */
  --nuit-0: #020b1a;      /* fond de la page (relevé dans l'image : #020b18 à #010d23) */
  --nuit-1: #07142c;      /* en-tête, tableaux */
  --nuit-2: #0c1c3c;      /* cartes, panneaux */
  --nuit-3: #16295a;      /* survols, champs actifs, infobulles */
  /* Argent et acier des cercles */
  --argent: #ebe8de;      /* texte principal (argent chaud des cercles : #efede1) */
  --acier: #a3b2cb;       /* texte secondaire, en-têtes de tableaux */
  --trait: #2f4068;       /* lignes fines, bordures de tableaux et de champs */
  /* Saphir du noyau : ce qui est actif ou important */
  --saphir: #3d6ad8;      /* boutons, onglet actif (pierre : #264bb6, éclairci pour le contraste) */
  --saphir-vif: #7fb2f9;  /* liens, focus, survols (lumière du noyau : #76acf8) */
  /* Or vieilli des coins : ornements et bordures seulement, jamais le texte courant */
  --or: #b59b63;
  --or-sombre: #5c4c33;
  /* États */
  --ok: #6fd3a0;
  --alerte: #ff9a8a;
  --alerte-fond: #3a1620;
  /* Parchemin : zone de lecture des articles de l'encyclopédie */
  --parchemin: #ece2c6;
  --parchemin-ombre: #d8c8a0;
  --encre: #2b2216;
  --encre-douce: #5a4a33;
  --lien-parchemin: #1f3f9a;
  /* Polices : titres et texte (fichiers hébergés dans le site, voir jeu/static/jeu/polices/) */
  --police-titres: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif;
  --police-texte: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
}

/* --- Base ------------------------------------------------------------------------------------------------------------ */

body.theme {
  /* les variables de l'ancien style pointent vers la palette, pour les règles qui ne sont pas encore reprises ici */
  --fond: var(--nuit-0); --accent: var(--saphir-vif); --gris: var(--acier); --ligne: var(--trait);
  min-height: 100vh;
  background-color: var(--nuit-0);
  /* fond discret : l'emblème très atténué, fixé à la fenêtre ; les cartes et les tableaux restent opaques par-dessus */
  background-image: radial-gradient(ellipse at 50% 30%, rgba(2, 11, 26, 0.80), rgba(2, 11, 26, 0.94) 60%, rgba(2, 11, 26, 0.98)),
                    url("images/fond-800.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, min(800px, 100vmin) auto;
  background-attachment: fixed;
  color: var(--argent);
  font-family: var(--police-texte);
  font-size: 1.02rem;
  line-height: 1.5;
}
.theme main { max-width: 68rem; }
.theme h1, .theme h2, .theme h3, .theme h4, .theme .marque { font-family: var(--police-titres); letter-spacing: 0.03em; font-weight: 600; }
.theme h1 { color: var(--argent); font-size: 1.85rem; margin: 0.8rem 0 1.1rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--or), rgba(181, 155, 99, 0.15) 70%, transparent) 1; }
.theme h2 { color: var(--argent); }
.theme h3, .theme h4 { color: var(--acier); }
.theme a { color: var(--saphir-vif); }
.theme a:hover { color: #b9d4ff; }
.theme .discret { color: var(--acier); }
.theme :focus-visible { outline: 2px solid var(--saphir-vif); outline-offset: 2px; }

/* --- En-tête ----------------------------------------------------------------------------------------------------------- */

.theme header { background: linear-gradient(180deg, var(--nuit-1), rgba(7, 20, 44, 0.92)); border-bottom: 1px solid var(--or-sombre);
  box-shadow: 0 1px 0 rgba(181, 155, 99, 0.25); }
.theme header a { color: var(--argent); }
.theme header a:hover { color: var(--saphir-vif); text-decoration: none; }
.theme header .marque { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--argent); font-size: 1.15rem; }
.theme header .embleme { display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--or-sombre);
  box-shadow: 0 0 10px rgba(118, 172, 248, 0.35); }
.theme header button.secondaire { color: var(--argent); border-color: var(--trait); background: transparent; }

/* --- Surfaces : cartes, messages, onglets, étiquettes ---------------------------------------------------------------- */

.theme .carte, .theme details.repliable, .theme .formulaire { background: var(--nuit-2); border: 1px solid var(--trait); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.theme .message { background: var(--nuit-2); color: var(--argent); border-left-color: var(--ok); }
.theme .message.error, .theme .alerte { background: var(--alerte-fond); color: #ffd9d2; border-left: 4px solid var(--alerte); }
.theme .onglets a, .theme .sommaire a { background: var(--nuit-1); border: 1px solid var(--trait); color: var(--argent); }
.theme .onglets a:hover, .theme .sommaire a:hover { border-color: var(--saphir-vif); }
.theme .onglets a.actif { background: var(--saphir); border-color: var(--saphir-vif); color: #fff; }
.theme .etiquette { background: var(--trait); color: var(--argent); }
.theme .etiquette.modifie { background: var(--or-sombre); color: #f3e6c4; }
.theme .etiquette.annule { background: #6b2a33; color: #ffd9d2; }
.theme details.repliable > summary { color: var(--argent); font-family: var(--police-titres); letter-spacing: 0.03em; }

/* --- Tableaux : très lisibles, sans image derrière ------------------------------------------------------------------- */

.theme table { background: var(--nuit-1); color: var(--argent); }
.theme th, .theme td { border-bottom: 1px solid var(--trait); }
.theme th { color: var(--acier); font-family: var(--police-texte); font-weight: 600; letter-spacing: 0.02em; }
.theme tbody tr:hover td, .theme tr:hover > td { background: rgba(22, 41, 90, 0.45); }
.theme .grille div { border-bottom-color: var(--trait); }
.theme tr.annule td { color: var(--acier); }
.theme .negatif { color: var(--alerte); }

/* --- Formulaires et boutons ---------------------------------------------------------------------------------------- */

.theme input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=file]), .theme select,
.theme textarea, .theme .formulaire input[type=text], .theme .formulaire select, .theme .formulaire textarea {
  background: var(--nuit-0); color: var(--argent); border: 1px solid var(--trait); border-radius: 4px; }
.theme input:focus, .theme select:focus, .theme textarea:focus { border-color: var(--saphir-vif); outline: none;
  box-shadow: 0 0 0 2px rgba(127, 178, 249, 0.25); }
.theme .formulaire label, .theme label { color: var(--acier); }
.theme select { max-width: 100%; }  /* options très longues : la liste ne pousse plus la page au-delà de l'écran */
.theme select[multiple] option:checked { background: var(--saphir) linear-gradient(0deg, var(--saphir), var(--saphir)); color: #fff; }
.theme input[type=checkbox], .theme input[type=radio] { accent-color: var(--saphir); }
.theme input[type=file] { color: var(--acier); }
.theme .erreur-texte { color: var(--alerte); }
.theme input.erreur { border-color: var(--alerte); }
.theme .barre-outils button { background: var(--nuit-1); border-color: var(--trait); color: var(--argent); }
.theme .barre-outils button:hover { border-color: var(--saphir-vif); }
.theme #texte { font-family: Consolas, "Cascadia Mono", monospace; }
.theme button, .theme .bouton { background: var(--saphir); border: 1px solid var(--saphir-vif); color: #fff; border-radius: 6px; }
.theme button:hover, .theme .bouton:hover { background: #4b7ae6; box-shadow: 0 0 10px rgba(118, 172, 248, 0.35); }
.theme button.secondaire, .theme .bouton.secondaire { background: transparent; color: var(--saphir-vif); border-color: var(--trait); }
.theme button.secondaire:hover, .theme .bouton.secondaire:hover { border-color: var(--saphir-vif); background: rgba(61, 106, 216, 0.15); }

/* --- Composition d'une valeur au survol (fiche) ---------------------------------------------------------------------- */

.theme .val { border-bottom-color: var(--acier); }
.theme .val:hover::after, .theme .val:focus::after { background: var(--nuit-3); color: var(--argent); border: 1px solid var(--or-sombre);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55); }

/* --- Mois de jeu : jauges, cartes d'action, jets ---------------------------------------------------------------------- */

.theme .jauge { background: var(--nuit-1); border-color: var(--trait); }
.theme .jauge .engagee { background: var(--saphir); }
.theme .jauge .apercu { background: repeating-linear-gradient(45deg, #2c4a9a, #2c4a9a 6px, #4d6fc4 6px, #4d6fc4 12px); }
.theme .jauge .surmenage { background: rgba(255, 154, 138, 0.18); }
.theme .jauge-legende, .theme .legende { color: var(--acier); }
.theme .carte-action, .theme .ligne-effet { background: var(--nuit-2); border-color: var(--trait); }
.theme .carte-action:hover { border-color: var(--saphir-vif); box-shadow: 0 0 12px rgba(118, 172, 248, 0.25); }
.theme .carte-action span { color: var(--acier); }
.theme .jet { background: var(--saphir); color: #fff; border: 1px solid var(--saphir-vif); }
.theme .action.annulee .jet, .theme .action.refusee .jet { background: var(--trait); border-color: var(--trait); }
.theme tr.tire td { font-weight: bold; background: rgba(61, 106, 216, 0.28); }

/* --- Organigrammes des projets (et modèle dans l'encyclopédie) ------------------------------------------------------- */

.theme .organigramme-defile { background: var(--nuit-1); border-color: var(--trait); }
.theme .organigramme .boite, .theme .organigramme-modele .boite { background: var(--nuit-2); color: var(--argent); }
.theme .organigramme .boite { border-color: var(--trait); }
.theme .organigramme .boite small, .theme .organigramme-modele .boite small { color: var(--acier); }
.theme .organigramme .boite.valide { border-color: var(--ok); background: #0f2a2a; }
.theme .organigramme .boite.accessible, .theme .organigramme-modele .boite { border-color: var(--saphir-vif); }
.theme .organigramme .boite.selection { outline: 3px solid var(--or); }
.theme .organigramme .boite:hover { box-shadow: 0 0 12px rgba(118, 172, 248, 0.35); }
.theme .organigramme .fleche, .theme .organigramme-modele .fleche { stroke: var(--acier); }
.theme .pointe { fill: var(--acier); }
.theme .barre { background: var(--trait); }
.theme .barre i { background: var(--saphir-vif); }

/* --- Connexion : l'emblème en grand ---------------------------------------------------------------------------------- */

.theme .accueil-embleme { text-align: center; margin: 1.5rem 0 1.2rem; }
.theme .accueil-embleme img { width: min(18rem, 70vw); height: auto; border-radius: 10px; border: 1px solid var(--or-sombre);
  box-shadow: 0 0 40px rgba(61, 106, 216, 0.35), 0 0 0 4px rgba(181, 155, 99, 0.12); }
.theme .accueil-embleme .devise { font-family: var(--police-titres); color: var(--acier); letter-spacing: 0.25em; text-transform: uppercase;
  font-size: 0.85rem; margin-top: 0.8rem; }
.theme .panneau-orne { position: relative; }
.theme .panneau-orne::before, .theme .panneau-orne::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none;
  border-color: var(--or); border-style: solid; opacity: 0.85; }
.theme .panneau-orne::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.theme .panneau-orne::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

/* --- Encyclopédie : la zone de lecture est un parchemin ---------------------------------------------------------------- */

.theme .article-texte { background-color: var(--parchemin);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.35), transparent 55%),
                    radial-gradient(ellipse at 100% 100%, rgba(150, 120, 70, 0.18), transparent 60%);
  color: var(--encre); border: 1px solid var(--or-sombre); border-radius: 6px; padding: 1.3rem 1.6rem;
  box-shadow: inset 0 0 40px rgba(120, 90, 40, 0.18), 0 4px 18px rgba(0, 0, 0, 0.45); font-size: 1.08rem; line-height: 1.65; }
.theme .article-texte h2 { color: var(--encre); border-bottom: 1px solid var(--parchemin-ombre); padding-bottom: 0.2rem; }
.theme .article-texte h3, .theme .article-texte h4 { color: var(--encre-douce); }
.theme .article-texte a { color: var(--lien-parchemin); }
.theme .article-texte blockquote { border-left-color: var(--or); color: var(--encre-douce); }
.theme .article-texte table { background: rgba(255, 255, 255, 0.35); color: var(--encre); }
.theme .article-texte th { color: var(--encre-douce); }
.theme .article-texte th, .theme .article-texte td { border-bottom-color: var(--parchemin-ombre); }
.theme .article-texte tr:hover > td { background: transparent; }
.theme .article-texte figcaption { color: var(--encre-douce); }
.theme .article-texte .discret { color: var(--encre-douce); }
.theme .article-texte .lien-absent { color: #9a2a1a; border-bottom-color: #9a2a1a; }
.theme .etat-article { background: var(--trait); color: var(--argent); }
.theme .etat-article.brouillon { background: var(--or-sombre); color: #f3e6c4; }
.theme .etat-article.reserve { background: #3b3470; color: #e2dcff; }
.theme .rubrique { background: var(--nuit-2); border-color: var(--trait); color: var(--argent); }
.theme .rubrique span { color: var(--acier); }

@media (max-width: 640px) {
  .theme h1 { font-size: 1.45rem; }
  .theme .article-texte { padding: 1rem 1rem; font-size: 1.02rem; }
  body.theme { background-size: 100% 100%, 100vmin auto; }
}