/**
 * Habillage de marque (v2, inspire de kinsta.com) applique aux pages de contenu.
 * Redefinit les tokens globaux de style.css (--primary, --accent, --dark-bg, --light-bg...)
 * : la plupart des composants de style.css/learning.css les utilisent deja, donc ce fichier
 * suffit a retexturer la nav, les boutons, les fonds et les cartes sans toucher au HTML.
 * Charger APRES style.css et learning.css sur chaque page migree.
 */

:root {
  --primary: #ef4a34;
  --primary-dark: #c93620;
  --primary-light: #ff8a72;
  --secondary: #14141a;
  --accent: #ef4a34;
  --success: #1f9d74;
  --dark-bg: #14141a;
  --dark-light: #1e1e26;
  --light-bg: #f7f2ea;
  --text-dark: #14141a;
  --text-light: #4a4a52;
  --border: #e6ddc8;
  --shadow-sm: 0 1px 2px rgba(20,20,26,0.05);
  --shadow-md: 0 8px 24px -8px rgba(20,20,26,0.14);
  --shadow-lg: 0 24px 48px -20px rgba(20,20,26,0.22);
}

/* css/theme-light.css defines its OWN token set (--surface*, --border-strong,
   --text-body, --text-muted) on html:not(.theme-dark), unconditionally true on
   every hv2 page now that the toggle is gone (js/hv2-force-light.js). ~30
   components across theme-light.css still consume those tokens, so redefine
   them here (same selector/specificity, this file now loads after it) instead
   of patching each consuming rule individually. */
html:not(.theme-dark) {
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #efe6d3;
  --surface-inset: #e6ddc8;
  --border-strong: #d5c9a8;
  --text-body: #14141a;
  --text-muted: #4a4a52;
}

/* Un seul style, comme la page d'accueil : le bouton clair/sombre n'a plus de role
   ici (voir js/hv2-force-light.js), donc on le retire pour ne pas laisser croire
   qu'il fait quelque chose. */
.theme-toggle { display: none !important; }

body,
html:not(.theme-dark) body,
html:not(.theme-dark) .home-body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--light-bg) !important;
}

h1, h2, h3, h4, .navbar__logo, .logo {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- Contenu selon l'état de connexion ----------
   data-auth="guest" : visible seulement pour un visiteur ; data-auth="user" : seulement connecté.
   La classe csp-has-session est posée très tôt par theme.js puis confirmée par auth-helpers.js. */
html.csp-has-session [data-auth="guest"] { display: none !important; }
html:not(.csp-has-session) [data-auth="user"] { display: none !important; }

/* La barre de navigation (fond, liens, menus, compte, tiroir) est entierement definie dans css/top-nav.css. */

/* Les couleurs du compte dans la barre (pastille, badges, boutons « Panel admin » / « Panel prof ») sont dans css/top-nav.css,
   comme tout le reste de la barre : les panels ne chargent pas ce fichier-ci. */

/* ---------- Page header ---------- */
.page-header, .page-topic-header {
  border-bottom: 1px solid var(--border);
}
.page-header h1 { color: var(--text-dark); }
.page-header p { color: var(--text-light); }

/* ---------- Tool buttons (essayer / quiz / flashcards) ---------- */
/* Chaque page langage colorait son bouton "Essayer de coder" avec une couleur differente
   (bleu pour Python, cyan pour CSS, ambre pour JS...) : joli en theorie, mais ca casse
   l'accent unique de la marque des qu'on quitte l'accueil. On revient a un seul accent
   partout, y compris pour le lien "X exercices sur ce theme" qui reutilise .btn-try-code. */
.btn-try-code,
.page-html .btn-try-code,
.page-python .btn-try-code,
.page-javascript .btn-try-code,
.page-css .btn-try-code,
.page-java .btn-try-code,
.page-c .btn-try-code {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.page-html .btn-try-code:hover,
.page-python .btn-try-code:hover,
.page-javascript .btn-try-code:hover,
.page-css .btn-try-code:hover,
.page-java .btn-try-code:hover,
.page-c .btn-try-code:hover {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}
/* Les 3 boutons de fiche (Retour / Essayer de coder / Exercices) doivent
   ressembler aux 3 boutons pleins de la page hub (rouge / corail / marine),
   pas a un bouton plein + un bouton contour. Meme trio de couleurs que
   .btn-tool / .btn-tool--quiz / .btn-tool--cards, applique a .btn-try-code. */
.btn-try-code {
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-try-code:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-try-code.is-secondary {
  background: linear-gradient(135deg, var(--secondary), #3a3a44) !important;
  color: #fff !important;
  border-color: var(--secondary) !important;
}
.btn-try-code.is-secondary:hover {
  background: linear-gradient(135deg, #3a3a44, var(--secondary)) !important;
  border-color: #3a3a44 !important;
  color: #fff !important;
}
/* "N exercices sur ce theme" (js/exercise-fiche-links.js) reutilise .btn-try-code
   et se retrouve juste a cote de "Essayer de coder" : degrade corail, comme
   .btn-tool--quiz sur la page hub, pour le meme trio rouge/corail/marine. */
a.btn-try-code.fiche-exercises-link {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}

.btn-tool {
  border-radius: 10px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-tool--quiz { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.btn-tool--cards { background: linear-gradient(135deg, var(--secondary), #3a3a44); }

/* ---------- Topic grid ---------- */
.btn-topic {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-dark);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn-topic:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

/* ---------- Code windows (py-code-win and friends) ---------- */
.py-code-win, .code-box, .code-output {
  background: var(--dark-bg);
  border-radius: 12px;
}
.py-code-win__bar { border-bottom: 1px solid rgba(255,255,255,0.1); }
/* La barre de titre garde le dégradé clair de style.css (boutons Atelier / Copier faits pour fond clair) : le nom du fichier doit donc être
   foncé. Il était en blanc à 50 % sur ce fond clair (contraste 1,3:1, illisible) ; le thème sombre a sa propre couleur dans style.css. */
.py-code-win__fname { color: #475569; }
.syn-kw { color: #ff8a72; }
.syn-mod, .syn-name { color: #7ec8e3; }
.syn-str { color: #ffb199; }
.syn-num { color: #9ed88a; }
.syn-cmt { color: #8a8a92; }

/* Le theme de coloration syntaxique d'origine melangeait violet/bleu/jaune/vert/orange
   dans chaque bloc de code (style "Material Palenight") : beaucoup trop de teintes en
   meme temps pour rester sobre. On retombe sur la meme palette restreinte que celle du
   mini-code de la page d'accueil (2 tons chauds + 1 cyan + gris), y compris en dehors
   de .py-code-win__body puisque les fiches utilisent aussi .syn-* en ligne dans le texte. */
.syn-kw, .py-code-win__body .syn-kw { color: #ff8a72 !important; font-weight: 600; }
.syn-builtin, .py-code-win__body .syn-builtin { color: #ffcb8a !important; }
.syn-mod, .py-code-win__body .syn-mod { color: #7ec8e3 !important; }
.syn-name, .py-code-win__body .syn-name { color: #e2e8f0 !important; }
.syn-str, .py-code-win__body .syn-str { color: #ffb199 !important; }
.syn-num, .py-code-win__body .syn-num { color: #9ed88a !important; }
.syn-cmt, .py-code-win__body .syn-cmt { color: #8a8a92 !important; font-style: italic; }
/* Version claire (hors fenetre sombre, code inline dans le texte courant).
   html:not(.theme-dark) est vrai en permanence sur les pages hv2 (voir
   js/hv2-force-light.js) : sans l'exclusion ci-dessous, ces regles gagnaient
   aussi la cascade DANS .py-code-win__body (specificite html+classe > classe
   seule), realignant .syn-name sur --text-dark (quasi noir) par-dessus le fond
   quasi noir de la fenetre de code -> texte invisible. */
html:not(.theme-dark) .syn-kw:not(.py-code-win__body *) { color: var(--primary-dark) !important; }
html:not(.theme-dark) .syn-builtin:not(.py-code-win__body *) { color: #8a4308 !important; }
html:not(.theme-dark) .syn-mod:not(.py-code-win__body *) { color: #1c6fae !important; }
html:not(.theme-dark) .syn-name:not(.py-code-win__body *) { color: var(--text-dark) !important; }
html:not(.theme-dark) .syn-str:not(.py-code-win__body *) { color: var(--primary) !important; }
html:not(.theme-dark) .syn-num:not(.py-code-win__body *) { color: #1f9d74 !important; }
html:not(.theme-dark) .syn-cmt:not(.py-code-win__body *) { color: var(--text-light) !important; }

/* ---------- Cards ---------- */
.py-card, .lang-intro, .quiz-wrap {
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.py-pill--primary {
  background: rgba(239,74,52,0.12);
  color: var(--primary-dark);
}
.py-accent { color: var(--primary-dark); font-weight: 700; }
.py-callout--good { border-color: rgba(31,157,116,0.35); background: rgba(31,157,116,0.08); }
.py-callout--tip { border-color: rgba(239,74,52,0.3); background: rgba(239,74,52,0.06); }

/* ---------- Generic primary buttons/links ---------- */
.home-cta--solid, .btn-primary { background: var(--primary); }
.home-cta--solid:hover, .btn-primary:hover { background: var(--primary-dark); }
a { text-decoration-color: rgba(239,74,52,0.4); }

/* ---------- Outils interactifs (simulateurs) : carte, lien et bouton des chapitres et des fiches ---------- */
/* La carte « Dans le simulateur » est une carte de fiche ordinaire (py-card), avec un pictogramme au trait à la place de l'emoji
   et des liens directs vers un scénario, un défi ou une mission. */
.py-card--tool .py-card__icon { display: inline-flex; color: var(--primary-dark); }
.py-card--tool .py-card__icon svg { display: block; width: 1.5rem; height: 1.5rem; }
.py-showcase--hub .py-card--wide { grid-column: 1 / -1; }
/* Une carte seule avant la carte large (ex. Logique booléenne) occupe aussi toute la largeur, sinon elle reste dans une demi-colonne décalée. */
.py-showcase--hub > .py-card:first-child:not(.py-card--wide):has(+ .py-card--wide) { grid-column: 1 / -1; }
.py-card--tool .py-row__code { font-family: inherit; font-size: 0.88rem; font-weight: 800; }
.py-card--tool .py-row__code a { color: var(--primary-dark); text-decoration: none; }
.py-card--tool .py-row__code a:hover,
.py-card--tool .py-row__code a:focus-visible { text-decoration: underline; }
/* Les liens de la phrase « Plan » des pages de chapitre (vers un autre cours, un simulateur) gardaient le bleu par défaut du navigateur. */
.lang-intro-use a { color: var(--primary-dark); font-weight: 700; }