/* ============================================================
   SORATU — feuille de style commune du site de fiches pédagogiques
   Chaque fiche/page du site inclut ce fichier :
   <link rel="stylesheet" href="../assets/style.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* --- couleurs neutres --- */
  --encre:      #1a1a1a;
  --encre-douce:#3d3d3d;
  --papier:     #fffdf6;
  --papier-2:   #f7f3e6;
  --ligne:      #e4ddc8;
  --blanc:      #ffffff;

  /* --- palette SORATU (reprise des lettres du logo) --- */
  --c-noir:     #1a1a1a;
  --c-rouge:    #e8232a;
  --c-jaune:    #ffcf00;
  --c-bleu:     #1d3fd6;
  --c-orange:   #ff8a00;
  --c-vert:     #0b7a3b;
  --c-magenta:  #e5169e;

  /* --- thème par défaut (accueil) --- */
  --accent:      var(--c-rouge);
  --accent-fonce:#a6151a;
  --accent-clair:#fde3df;

  --police-titre: 'Baloo 2', system-ui, sans-serif;
  --police-texte: 'Atkinson Hyperlegible', system-ui, sans-serif;

  --rayon: 14px;
  --ombre: 0 4px 0 rgba(26,26,26,.12);
}

/* -------- rappel du thème en cours (posé sur <body data-theme="…">) -------- */
body[data-theme="maths"]      { --accent: var(--c-bleu);    --accent-fonce:#12279a; --accent-clair:#e2e8fc; }
body[data-theme="physique"]   { --accent: var(--c-orange);  --accent-fonce:#b35f00; --accent-clair:#ffead1; }
body[data-theme="astronomie"] { --accent: var(--c-magenta); --accent-fonce:#9c0f6f; --accent-clair:#fbdcf1; }
body[data-theme="svt"]        { --accent: var(--c-vert);    --accent-fonce:#054e25; --accent-clair:#d9f0e1; }
body[data-theme="histoire"]   { --accent: var(--c-rouge);   --accent-fonce:#a6151a; --accent-clair:#fde3df; }
body[data-theme="contact"]    { --accent: var(--c-orange);  --accent-fonce:#b35f00; --accent-clair:#ffead1; }
body[data-theme="accueil"]    { --accent: var(--c-noir);    --accent-fonce:#000000; --accent-clair:#ececec; }

*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--police-texte);
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.police-titre{ font-family: var(--police-titre); }
a{ color: var(--accent-fonce); }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

.conteneur{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ============================================================
   CADRE (iframe) qui affiche les fiches — utilisé par index.html
   ============================================================ */
.conteneur-cadre{ width:100%; margin:0; padding:0; }
.cadre-fiche{
  display:block; width:100%; height:calc(100vh - 72px); min-height:480px;
  border:0; background:transparent;
}

/* ============================================================
   EN-TÊTE + MENU 3 NIVEAUX (déroulant, tenant sur une seule ligne)
   ============================================================ */
.entete{
  background: var(--blanc);
  border-bottom: 5px solid var(--accent);
  position: sticky; top:0; z-index: 40;
}
.ligne-entete{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px 24px;
  padding: 10px 24px;
  max-width:1180px; margin:0 auto;
}
.lien-accueil{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit; flex-shrink:0;
}
.lien-accueil .logo{ height:44px; width:auto; }
.lien-accueil .signature{
  font-family: var(--police-titre); font-weight:700;
  font-size: 1.05rem; color: var(--encre);
}
.lien-accueil:hover .signature{ text-decoration:underline; }

/* --- structure commune des 3 niveaux (ouverture au survol / focus) --- */
.menu-niveau1{ list-style:none; display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0; }
.menu-niveau1 > li{ position:relative; }

.lien-niveau1{
  display:inline-block; font-family: var(--police-titre); font-weight:700; font-size:.95rem;
  text-decoration:none; color: var(--encre); cursor:default;
  padding: 8px 16px; border-radius: 999px;
  white-space:nowrap;
}
.menu-niveau1 > li:hover > .lien-niveau1,
.menu-niveau1 > li:focus-within > .lien-niveau1{ background: var(--accent-clair); }
.lien-niveau1 .fleche{ display:inline-block; font-size:.7em; margin-left:2px; opacity:.6; }
.menu-niveau1 > li[data-matiere="maths"]      .lien-niveau1.actif{ color:var(--c-bleu); }
.menu-niveau1 > li[data-matiere="physique"]   .lien-niveau1.actif{ color:var(--c-orange); }
.menu-niveau1 > li[data-matiere="astronomie"] .lien-niveau1.actif{ color:var(--c-magenta); }
.menu-niveau1 > li[data-matiere="svt"]        .lien-niveau1.actif{ color:var(--c-vert); }
.menu-niveau1 > li[data-matiere="histoire"]   .lien-niveau1.actif{ color:var(--c-rouge); }

/* --- panneau déroulant (niveau 2, et niveau 3 en volet) --- */
.sous-menu{
  display:none;
  position:absolute; top: 100%; left:0; margin-top:8px;
  background: var(--blanc); border:2px solid var(--ligne); border-radius:12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  padding:8px; min-width:230px; z-index:70;
}
.menu-niveau1 > li:hover > .sous-menu,
.menu-niveau1 > li:focus-within > .sous-menu{ display:block; }
/* pont invisible : comble l'espace entre le libellé et le panneau pour que le survol ne soit jamais interrompu */
.menu-niveau1 > li > .sous-menu::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}

.menu-niveau2{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.menu-niveau2 > li{ position:relative; }
.menu-niveau2 .lien-niveau2{
  display:block; text-decoration:none; color: var(--accent-fonce); font-weight:700;
  cursor:default;
  font-size:.9rem; padding:8px 12px; border-radius:8px; white-space:nowrap;
}
.menu-niveau2 > li:hover > .lien-niveau2,
.menu-niveau2 > li:focus-within > .lien-niveau2{ background: var(--accent-clair); }
.lien-niveau2 .fleche-droite{ display:inline-block; font-size:.7em; margin-left:2px; opacity:.6; transform:rotate(-90deg); }

.menu-niveau2 > li > .sous-menu{ top:0; left:100%; margin-top:0; margin-left:8px; }
.menu-niveau2 > li:hover > .sous-menu,
.menu-niveau2 > li:focus-within > .sous-menu{ display:block; }
.menu-niveau2 > li > .sous-menu::before{
  content:""; position:absolute; top:0; bottom:0; left:-12px; width:12px;
}

.menu-niveau3{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.menu-niveau3 a{
  display:block; text-decoration:none; color: var(--encre); font-size:.88rem;
  padding:8px 12px; border-radius:8px; white-space:nowrap;
}
.menu-niveau3 a:hover{ background: var(--accent-clair); }
.menu-niveau3 a.actif{ color: var(--accent-fonce); font-weight:700; }
.menu-niveau2 .lien-niveau2.actif{ text-decoration:underline; }

/* thème sans fiche pour l'instant : simple libellé, non cliquable */
.item-a-venir{
  display:block; padding:8px 12px; font-size:.9rem; color: var(--encre-douce); font-style:italic;
}

@media (max-width: 680px){
  .sous-menu{ position:static; box-shadow:none; border:none; border-left:3px solid var(--ligne); border-radius:0; margin:4px 0 4px 12px; }
  .menu-niveau2 > li > .sous-menu{ margin-left:12px; }
  .sous-menu::before{ display:none; }
}

/* ============================================================
   ENTÊTE DE FICHE
   ============================================================ */
.fiche-titre{
  position:relative;
  padding: 16px 24px 10px; max-width:1180px; margin:0 auto;
}
/* lien de retour vers l'accueil du site (en haut à droite, sans changer la hauteur de l'en-tête) */
.lien-retour{
  position:absolute; top:14px; right:24px;
  font-family:var(--police-titre); font-weight:700; font-size:.8rem;
  text-decoration:none; color:var(--accent-fonce);
  padding:2px 12px; border-radius:999px; border:2px solid var(--ligne); background:var(--blanc);
}
.lien-retour:hover, .lien-retour:focus-visible{ background:var(--accent-clair); border-color:var(--accent); }
.fiche-titre .eyebrow{
  color: var(--accent-fonce); font-weight:700; font-size:.85rem;
}
.fiche-titre h1{ margin:.15em 0 0; font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* ============================================================
   CARROUSEL DE PAGES (paysage, défilement horizontal)
   ============================================================ */
.carrousel{ position:relative; max-width:1180px; margin: 0 auto 16px; padding: 0 24px; }

.piste{
  display:flex;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  gap:0;
  border-radius: var(--rayon);
  border: 3px solid var(--encre);
  box-shadow: var(--ombre);
  scrollbar-width:none;
}
.piste::-webkit-scrollbar{ display:none; }

.page-fiche{
  flex: 0 0 100%;
  scroll-snap-align:start;
  background: var(--blanc);
  height: calc(100vh - 240px);
  min-height: 360px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.page-fiche .colonne{ padding: 26px 30px; overflow-y:auto; }
.page-fiche .colonne + .colonne{ border-left: 2px dashed var(--ligne); }
.page-fiche h2{ margin-top:0; color: var(--accent-fonce); font-size:1.3rem; }
.page-fiche p{ line-height:1.55; }

.nav-carrousel{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:3px solid var(--encre); background:var(--blanc);
  font-family:var(--police-titre); font-size:1.3rem; font-weight:700;
  cursor:pointer; box-shadow: var(--ombre);
  display:flex; align-items:center; justify-content:center;
}
.nav-carrousel:hover{ background: var(--accent); color:#fff; }
.nav-carrousel:disabled{ opacity:.3; cursor:default; }
.nav-carrousel[data-dir="prec"]{ left: 0px; }
.nav-carrousel[data-dir="suiv"]{ right: 0px; }

.pastilles{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.pastilles button{
  width:11px; height:11px; border-radius:50%; border:2px solid var(--encre);
  background:var(--blanc); padding:0; cursor:pointer;
}
.pastilles button.actif{ background: var(--accent); }

/* ============================================================
   TABLEAUX DE DONNÉES CHIFFRÉES (exemples numériques dans une fiche)
   ============================================================ */
.tableau-donnees{ width:100%; border-collapse:collapse; margin:14px 0; font-size:.92rem; }
.tableau-donnees caption{ text-align:left; font-family:var(--police-titre); font-weight:700; color:var(--accent-fonce); margin-bottom:6px; }
.tableau-donnees th, .tableau-donnees td{ padding:7px 10px; border-bottom:1px solid var(--ligne); text-align:left; }
.tableau-donnees th{ background: var(--papier-2); font-family:var(--police-titre); }
.tableau-donnees td.chiffre, .tableau-donnees th.chiffre{ text-align:right; font-variant-numeric: tabular-nums; }
.tableau-donnees tr.ligne-vainqueur td{ background: var(--accent-clair); font-weight:700; }

/* ============================================================
   ENCARTS PÉDAGOGIQUES (signalétique commune)
   ============================================================ */
.encart{
  margin: 16px 0; padding: 12px 14px 12px 44px;
  border-radius: 10px; position:relative;
  font-size:.94rem; line-height:1.5;
  border: 2px solid var(--ligne);
  background: var(--papier-2);
}
.encart::before{
  position:absolute; left:10px; top:10px; font-size:1.2rem; line-height:1;
}
.encart .encart-titre{ display:block; font-family:var(--police-titre); font-weight:700; margin-bottom:2px; }

.encart--anecdote{ border-color: var(--c-magenta); background:#fdf1f9; }
.encart--anecdote::before{ content:"✦"; color: var(--c-magenta); }
.encart--anecdote .encart-titre{ color: var(--c-magenta); }

.encart--saviez-vous{ border-color: var(--c-bleu); background:#eef1fd; }
.encart--saviez-vous::before{ content:"?"; color: var(--c-bleu); font-weight:800; }
.encart--saviez-vous .encart-titre{ color: var(--c-bleu); }

.encart--info{ border-color: var(--c-vert); background:#eaf6ee; }
.encart--info::before{ content:"i"; color: var(--c-vert); font-style:italic; font-weight:800; }
.encart--info .encart-titre{ color: var(--c-vert); }

.encart--sources{ border-color: var(--c-orange); background:#fff3e6; }
.encart--sources::before{ content:"⌘"; color: var(--c-orange); }
.encart--sources .encart-titre{ color: var(--c-orange); }
.encart--sources ul{ margin:4px 0 0; padding-left:18px; }

/* ============================================================
   SCHÉMAS SVG ILLUSTRATIFS (figures dessinées, pas des photos)
   ============================================================ */
.figure-schema{ margin:14px auto; max-width:420px; }
.figure-schema svg{ width:100%; height:auto; display:block; }
.figure-schema figcaption{ text-align:center; font-size:.8rem; color:var(--encre-douce); margin-top:6px; }

/* ============================================================
   EMPLACEMENT SUGGÉRÉ POUR UNE ILLUSTRATION (photo à ajouter)
   ============================================================ */
.espace-illustration{
  border:2px dashed var(--ligne); border-radius:10px;
  padding:16px; margin:14px 0; text-align:center;
  color:var(--encre-douce); font-size:.84rem; background:var(--papier-2);
}
.espace-illustration strong{ display:block; font-family:var(--police-titre); color:var(--accent-fonce); margin-bottom:3px; font-size:.95rem; }

/* ============================================================
   GRILLE DE NOMBRES (ex. crible d'Ératosthène)
   ============================================================ */
.grille-nombres{
  display:grid; grid-template-columns:repeat(10,1fr); gap:4px;
  margin:14px 0; font-variant-numeric:tabular-nums; font-size:.85rem;
}
.grille-nombres span{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; border-radius:6px; background:var(--papier-2);
}
.grille-nombres span.premier{ background:var(--accent); color:#fff; font-weight:700; }
.grille-nombres span.elimine{ color:var(--ligne); text-decoration:line-through; }

/* ============================================================
   PAGE CONTACT (formulaire + petit messager)
   ============================================================ */
.contact-conteneur{ max-width:1180px; margin:0 auto 16px; padding:0 24px; }
.carte-contact{
  display:grid; grid-template-columns: 1fr 1.2fr;
  background:var(--blanc); border:3px solid var(--encre); border-radius:var(--rayon); box-shadow:var(--ombre);
}
.carte-contact .colonne-messager{ padding:22px 28px; text-align:center; }
.carte-contact .colonne-formulaire{ padding:22px 30px; border-left:2px dashed var(--ligne); }
.carte-contact h2{ margin:0 0 6px; color:var(--accent-fonce); font-size:1.3rem; }
.carte-contact p{ line-height:1.5; margin:.4em 0; }

.messager{ max-width:230px; margin:6px auto 4px; }
.messager svg{ width:100%; height:auto; display:block; animation: trot 1.6s ease-in-out infinite; }
@keyframes trot{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-6px) rotate(1deg);} }

.formulaire-contact .champ{ margin-bottom:12px; }
.formulaire-contact .ligne-double{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.formulaire-contact label{ display:block; font-family:var(--police-titre); font-weight:700; font-size:.9rem; color:var(--accent-fonce); margin-bottom:3px; }
.formulaire-contact input,
.formulaire-contact select,
.formulaire-contact textarea{
  width:100%; padding:9px 12px; font:inherit; color:var(--encre);
  background:var(--blanc); border:2px solid var(--ligne); border-radius:10px;
}
.formulaire-contact textarea{ resize:vertical; min-height:110px; }
.formulaire-contact input:focus,
.formulaire-contact select:focus,
.formulaire-contact textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-clair); }
.bouton-envoyer{
  font-family:var(--police-titre); font-weight:700; font-size:1rem; color:var(--encre);
  background:var(--accent); border:3px solid var(--encre); border-radius:999px;
  padding:9px 24px; cursor:pointer; box-shadow:var(--ombre);
}
.bouton-envoyer:hover{ transform:translateY(-1px); }
.statut-envoi{ margin:10px 0 0; font-size:.88rem; color:var(--encre-douce); min-height:1.2em; }
.note-contact{ font-size:.8rem; color:var(--encre-douce); margin-top:8px; }
.statut-envoi--ok{ color:var(--c-vert); font-weight:700; }
.statut-envoi--erreur{ color:var(--c-rouge); font-weight:700; }
.bouton-envoyer:disabled{ opacity:.6; cursor:wait; }
/* champ piège anti-spam : hors écran, invisible mais présent dans le code */
.champ-piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width: 760px){
  .carte-contact{ grid-template-columns:1fr; }
  .carte-contact .colonne-formulaire{ border-left:none; border-top:2px dashed var(--ligne); }
  .formulaire-contact .ligne-double{ grid-template-columns:1fr; }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied a{ font-weight:700; }
.pied{ border-top:2px solid var(--ligne); padding:12px 24px; text-align:center; color:var(--encre-douce); font-size:.85rem; }

@media (max-width: 760px){
  .page-fiche{ grid-template-columns: 1fr; aspect-ratio:auto; }
  .page-fiche .colonne + .colonne{ border-left:none; border-top:2px dashed var(--ligne); }
  .nav-carrousel{ width:38px; height:38px; }
}