/* ===================================================================
   Les pages d'accueil du site : index, sommaire, pages de niveau
   -------------------------------------------------------------------
   Ce que ces trois pages ont en commun — palette, en-tête, bandeau,
   cadres, pied, bouton de langue et règles du bilinguisme. Chacune
   n'ajoute que ce qui lui est propre. Les pages de chapitre, elles,
   lisent `style.css` et n'ont rien à voir avec cette feuille.

   Le bilinguisme : chaque texte s'écrit deux fois, `data-i18n="fr"` et
   `data-i18n="es"`, et le `data-lang` de `<html>` choisit celui qui
   s'affiche. `JS/langue.js` pose l'attribut et le mémorise.
   =================================================================== */

:root{
  --navy:#1a2b4a;
  --navy-light:#2c4270;
  --accent:#c9762c;
  --bg:#f7f6f3;
  --paper:#ffffff;
  --text:#2a2a2a;
  --muted:#6b6b6b;
  --radius:10px;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* ---- En-tête ------------------------------------------------------ */
header{
  background:var(--navy);
  color:#fff;
  padding:1rem 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:0.75rem;
}
header .brand{
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:0.02em;
}
header .brand a{ color:inherit; text-decoration:none; }
header nav a{
  color:#e8e8e8;
  text-decoration:none;
  margin-left:1.25rem;
  font-size:0.95rem;
}
header nav a:hover{ color:#fff; text-decoration:underline; }
#lang-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,0.5);
  color:#fff;
  padding:0.35rem 0.8rem;
  border-radius:6px;
  cursor:pointer;
  font-size:0.85rem;
  margin-left:1.25rem;
}
#lang-toggle:hover{ background:rgba(255,255,255,0.12); }

/* ---- Bandeau ------------------------------------------------------ */
.hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color:#fff;
  padding:2.5rem 1.5rem 2.25rem;
  text-align:center;
}
.hero h1{
  margin:0 0 0.5rem;
  font-size:1.85rem;
}
.hero p{
  margin:0 auto;
  max-width:36rem;
  color:#dfe4ee;
  font-size:1.02rem;
}
.hero p.subtitle{ margin-bottom:1.5rem; font-size:1.05rem; }
.btn-primary{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:0.75rem 1.6rem;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  transition:opacity 0.15s ease;
}
.btn-primary:hover{ opacity:0.88; }
.btn-primary + .btn-primary{ margin-left:0.75rem; }
@media (max-width:480px){
  .btn-primary + .btn-primary{ margin-left:0; margin-top:0.6rem; }
}

/* ---- Corps -------------------------------------------------------- */
main{
  max-width:56rem;
  margin:0 auto;
  padding:2.5rem 1.5rem 4rem;
}
section{
  background:var(--paper);
  border-radius:var(--radius);
  padding:1.75rem 2rem;
  margin-bottom:1.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
section h2{
  margin-top:0;
  color:var(--navy);
  font-size:1.35rem;
  border-bottom:2px solid var(--bg);
  padding-bottom:0.5rem;
}
section h3{
  color:var(--navy-light);
  font-size:1.05rem;
  margin:1.25rem 0 0.6rem;
}
.btn-back{
  display:inline-block;
  margin-bottom:1.5rem;
  color:var(--navy);
  text-decoration:none;
  font-size:0.95rem;
}
.btn-back:hover{ text-decoration:underline; }
/* Le sommaire EN LIGNE, mode « sans-lien » de pilotage/niveaux-publies.json :
   deployer.py change le lien d'un niveau non publié en <span class="sans-lien">.
   Le nom reste à sa place, en gris, sans rien sur quoi cliquer (règle du
   23/09/2026). En local, le sommaire garde tous ses liens et cette classe
   n'apparaît pas. */
ul.classes li .sans-lien{
  display:block;
  padding:0.75rem 1rem;
  border:1px dashed #cfcac0;
  border-radius:8px;
  color:var(--muted);
  font-weight:600;
  font-size:1rem;
  cursor:default;
}
ul.classes li .sans-lien small{
  display:block;
  font-weight:400;
  font-size:0.8rem;
}
.souci{
  background:#fdf1ee;
  border-left:4px solid #c0392b;
  border-radius:0;
  padding:0.6rem 1rem;
  font-size:0.9rem;
}

footer{
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
  padding:2rem 1.5rem;
}

/* ---- Bilinguisme -------------------------------------------------- */
[data-i18n]{ display:none; }
html[data-lang="fr"] [data-i18n="fr"]{ display:revert; }
html[data-lang="es"] [data-i18n="es"]{ display:revert; }
span[data-i18n], strong[data-i18n]{ display:none; }
html[data-lang="fr"] span[data-i18n="fr"],
html[data-lang="fr"] strong[data-i18n="fr"]{ display:inline; }
html[data-lang="es"] span[data-i18n="es"],
html[data-lang="es"] strong[data-i18n="es"]{ display:inline; }
h3[data-i18n], h4[data-i18n]{ display:none; }
html[data-lang="fr"] h3[data-i18n="fr"], html[data-lang="fr"] h4[data-i18n="fr"]{ display:block; }
html[data-lang="es"] h3[data-i18n="es"], html[data-lang="es"] h4[data-i18n="es"]{ display:block; }

@media (max-width:600px){
  header{ justify-content:center; text-align:center; }
  header nav{ width:100%; text-align:center; }
  header nav a{ margin:0 0.6rem; }
}