/* Cahier de vacances Sémawé 2026 — design system provisoire
   Thème « nuit d'été » par défaut (cohérence univers Sémawé, dark mode),
   bascule automatique en clair selon la préférence système (lecture en plein soleil).
   Palette dérivée de la charte Pluralis (teal / jaune doré / marine). */

:root {
  --fond: #0e1f2b;
  --surface: #16303f;
  --surface-2: #1d3c4e;
  --bordure: #2a4f66;
  --encre: #e8eef1;
  --encre-douce: #b8c9d3;
  --titre: #f4e8cf;
  --teal: #46b8ab;
  --teal-fonce: #5fcabe;
  --jaune: #e8b54a;
  --jaune-contraste: #1d3a4f;
  --ok: #6fcf97;
  --ok-fond: #1d3d2e;
  --erreur: #ef8a70;
  --erreur-fond: #45261e;
  --rayon: 14px;
  --ombre: 0 4px 18px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #faf5ec;
    --surface: #ffffff;
    --surface-2: #f0e6d4;
    --bordure: #e3d5bc;
    --encre: #28323a;
    --encre-douce: #5a6b76;
    --titre: #1d3a4f;
    --teal: #2a8c82;
    --teal-fonce: #1f6e66;
    --jaune: #e8b54a;
    --jaune-contraste: #1d3a4f;
    --ok: #3a8f5d;
    --ok-fond: #e7f4ec;
    --erreur: #c0563f;
    --erreur-fond: #f9e9e4;
    --ombre: 0 4px 18px rgba(29, 58, 79, 0.10);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.6;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--titre); line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }

a { color: var(--teal-fonce); }

/* Bandeau immersif : photo plein cadre + voile dégradé pour la lisibilité.
   L'image se pose par style inline (--bandeau-img) page par page.
   Le texte reste clair sur photo quel que soit le thème. */
.bandeau {
  position: relative;
  min-height: clamp(18rem, 48vh, 30rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4.5rem 1.5rem 2.5rem;
  text-align: center;
  background-image:
    linear-gradient(180deg, rgba(14, 31, 43, 0.15) 30%, rgba(14, 31, 43, 0.78) 100%),
    var(--bandeau-img, linear-gradient(135deg, #1d3a4f 0%, #2a8c82 100%));
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.bandeau h1 { color: #ffffff; margin: 0 0 0.6rem; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }
.bandeau p {
  max-width: 38rem;
  margin: 0 auto;
  font-size: 1.1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.bandeau .soleil { font-size: 2.2rem; display: block; margin-bottom: 0.5rem; }
.bandeau .sigle {
  height: 3.4rem;
  width: auto;
  margin: 0 auto 0.9rem;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.footer-sigle { height: 1.6rem; width: auto; vertical-align: middle; margin-right: 0.5rem; }

.qui-semawe { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.qui-semawe img { flex: 0 0 4.5rem; height: 4.5rem; width: 4.5rem; }
.qui-semawe div { flex: 1 1 18rem; }
.qui-semawe h2 { margin-top: 0; }

.page { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.75rem;
  margin: 1.5rem 0;
}

.btn {
  display: inline-block;
  background: var(--jaune);
  color: var(--jaune-contraste);
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ombre); }
.btn-secondaire { background: var(--surface-2); color: var(--encre); }

.champ {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  font-size: 1rem;
  font-family: inherit;
  background: var(--fond);
  color: var(--encre);
}
.champ:focus { outline: none; border-color: var(--teal); }

.formulaire-ligne { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.formulaire-ligne .champ { flex: 1 1 14rem; }

/* Séparateur « ou » entre lien magique et connexion Google */
.separateur {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0;
  color: var(--encre-douce);
  font-size: 0.9rem;
}
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }

.connexion-google { display: flex; justify-content: center; }

.message { border-radius: var(--rayon); padding: 0.9rem 1.2rem; margin-top: 1rem; display: none; }
.message.visible { display: block; }
.message.ok { background: var(--ok-fond); color: var(--ok); }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); }

/* Sommaire des chapitres */
.chapitre-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.1rem 1.4rem;
  margin: 0.9rem 0;
  text-decoration: none;
  color: inherit;
}
.chapitre-item .numero {
  flex: 0 0 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--teal);
  color: #ffffff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.chapitre-item.verrouille { opacity: 0.55; }
.chapitre-item.verrouille .numero { background: var(--surface-2); color: var(--encre); }
.chapitre-item .ouverture { margin-left: auto; font-size: 0.85rem; color: var(--teal-fonce); white-space: nowrap; }

/* Quiz */
.quiz-question { font-weight: 700; margin: 1.4rem 0 0.6rem; }
.quiz-options { display: grid; gap: 0.5rem; }
.quiz-option {
  text-align: left;
  background: var(--surface-2);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--encre);
  cursor: pointer;
}
.quiz-option:hover { border-color: var(--teal); }
.quiz-option.bonne { background: var(--ok-fond); border-color: var(--ok); }
.quiz-option.mauvaise { background: var(--erreur-fond); border-color: var(--erreur); }
.quiz-explication { display: none; background: var(--surface-2); border-left: 4px solid var(--jaune); padding: 0.7rem 1rem; margin-top: 0.6rem; border-radius: 0 var(--rayon) var(--rayon) 0; }
.quiz-explication.visible { display: block; }

/* Exercice réflexif */
.reponse-libre { min-height: 5.5rem; resize: vertical; }
.sauvegarde-note { font-size: 0.85rem; color: var(--teal-fonce); margin-top: 0.3rem; }

/* Progression */
.progression { background: var(--surface-2); border-radius: 999px; height: 0.7rem; overflow: hidden; margin: 0.6rem 0 0.2rem; }
.progression > div { background: linear-gradient(90deg, var(--teal), var(--jaune)); height: 100%; border-radius: 999px; transition: width 0.4s ease; }

footer { text-align: center; padding: 2rem 1rem; color: var(--encre-douce); font-size: 0.9rem; }
footer a { color: var(--encre-douce); }