/* Thème ScolaTools des applis pédagogiques : mêmes couleurs, polices, boutons, cartes et barre que le site
   scolatools.com (client/src/index.css). Chargé après la feuille propre de chaque appli, il redéfinit les
   variables communes (--fond, --encre, --accent, --f-texte…) et l'habillage commun ; les couleurs propres à chaque
   appli (cellules, carte des séismes, thèmes de l'informatique…) sont conservées. Pas de mode sombre : le site n'en a pas. */

:root, :root[data-theme="dark"] {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --encre: #1f2937;
  --encre-2: #4b5563;
  --titre: #0f1b33;
  --ligne: #e3e8f0;
  --accent: #2f5fe0;
  --accent-fonce: #2569c2;
  --accent-encre: #ffffff;
  --accent-doux: #eaf0ff;
  --bon: #16a34a;
  --bon-doux: #dcfce7;
  --faux: #dc2626;
  --faux-doux: #fee2e2;
  --vert: #16a34a;
  --verre: rgba(255, 255, 255, 0.86);
  --ombre: 0 1px 2px rgba(20, 33, 61, 0.04), 0 8px 24px rgba(20, 33, 61, 0.06);
  --rayon: 10px;
  --f-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #f4f6f9; --surface: #ffffff; --surface-2: #eef2f7; --encre: #1f2937; --encre-2: #4b5563; --titre: #0f1b33;
    --ligne: #e3e8f0; --accent: #2f5fe0; --accent-encre: #ffffff; --accent-doux: #eaf0ff; --bon: #16a34a; --bon-doux: #dcfce7;
    --faux: #dc2626; --faux-doux: #fee2e2; --vert: #16a34a; --verre: rgba(255, 255, 255, 0.86);
    --ombre: 0 1px 2px rgba(20, 33, 61, 0.04), 0 8px 24px rgba(20, 33, 61, 0.06);
    color-scheme: light;
  }
}

body { font-family: var(--f-texte); color: var(--encre); background: var(--fond); -webkit-font-smoothing: auto; }
h1, h2, h3 { color: var(--titre); letter-spacing: -0.02em; }
a { color: var(--accent-fonce); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---- Barre du haut : comme l'en-tête du site (blanc translucide, fine bordure, 64 px) ---- */
.barre {
  position: sticky; top: 0; z-index: 20; min-height: 64px; padding: 8px 24px; gap: 8px 20px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne); box-shadow: none;
}
.lien-portail {
  width: 36px; height: 36px; margin-right: 0; border: 1px solid var(--ligne); background: white; color: var(--encre-2);
  box-shadow: none;
}
.lien-portail:hover { background: #f0f2f5; color: var(--titre); border-color: #cfd8e6; }
.barre .marque {
  display: inline-flex; align-items: center; gap: 10px; color: #14213d; font-family: var(--f-titre); font-weight: 780;
  letter-spacing: -0.02em; text-decoration: none; font-size: 1.1rem;
}
.barre .marque::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: url("picto-scolatools.svg") center / contain no-repeat;
}
.barre nav a, .onglets a {
  color: var(--encre-2); font-weight: 500; font-size: 0.95rem; padding: 6px 12px; border-radius: 8px;
  background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.barre nav a:hover, .onglets a:hover { color: var(--accent-fonce); background: var(--accent-doux); }
.barre nav a[aria-current="page"], .onglets a[aria-current="page"], .onglets a.actif {
  color: var(--accent-fonce); background: var(--accent-doux); border-color: transparent;
}
.choix-langue select, .choix-niveau > button, .bascule > button {
  border: 1px solid var(--ligne); background: white; color: var(--encre); font-weight: 500;
}
.bascule > button:first-child { border-radius: 8px 0 0 8px; }
.bascule > button:last-child { border-radius: 0 8px 8px 0; }
.bascule > button[aria-pressed="true"], .choix-niveau > button[aria-pressed="true"] {
  background: var(--accent-doux); color: var(--accent-fonce); border-color: #cfe3fb; position: relative; z-index: 1;
}
.choix-langue select { border-radius: 8px; }

/* ---- Boutons : .btn du site (bleu, coins 8 px) ; secondaires blancs à bordure ---- */
.bouton, .bouton-anim, .demarrer {
  border-radius: 8px; border: 1px solid var(--ligne); background: white; color: var(--encre); font-weight: 600;
  box-shadow: none; transition: background 0.15s, border-color 0.15s;
}
.bouton:hover, .bouton-anim:hover { background: #f0f2f5; filter: none; }
.bouton.principal, .bouton.plein, .demarrer, .bouton[aria-pressed="true"], .bouton-anim[aria-pressed="true"] {
  background: var(--accent); color: white; border-color: transparent;   /* #2f5fe0 : texte blanc à 5,5:1 (#398cef n'était qu'à 3,4:1) */
}
.bouton.principal:hover, .bouton.plein:hover, .demarrer:hover { background: #2449b8; filter: none; }

/* ---- Accueil de chaque appli : surtitre, titre et fond du site ---- */
.accueil {
  background:
    radial-gradient(900px 480px at 88% 8%, rgba(59, 130, 246, 0.14), transparent 70%),
    radial-gradient(640px 420px at 2% 96%, rgba(251, 191, 36, 0.14), transparent 70%),
    linear-gradient(#fbfcff, var(--fond));
}
.surtitre {
  font-family: var(--f-texte); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-fonce);
}
.accueil h1 { font-weight: 780; letter-spacing: -0.03em; }
.accueil-intro { color: var(--encre-2); }

/* ---- Haut de l'accueil : l'illustration (ou l'encadré « Le savais-tu ? ») à hauteur du surtitre et du titre, le
   texte de présentation dessous, sur toute la largeur. L'intro est « dépliée » (display: contents) pour que ses
   éléments se placent dans la grille ; sans illustration, le texte prend aussi toute la largeur. Ces règles passent
   après celles de chaque appli (même poids, chargées plus tard), y compris leurs règles pour petits écrans. ---- */
.accueil-intro { max-width: none; }
.accueil-tete, .accueil-haut {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-areas: "surtitre image" "titre image"; grid-template-rows: auto 1fr;
  gap: 12px 40px; align-items: start;
}
.accueil-tete > .accueil-intro, .accueil-haut > .accueil-intro { display: contents; }
.accueil-tete > .accueil-intro > .surtitre, .accueil-haut > .accueil-intro > .surtitre { grid-area: surtitre; }
.accueil-tete > .accueil-intro > h1, .accueil-haut > .accueil-intro > h1 { grid-area: titre; }
.accueil-tete > .accueil-intro > :not(.surtitre):not(h1), .accueil-haut > .accueil-intro > :not(.surtitre):not(h1) { grid-column: 1 / -1; }
.accueil-tete > .accueil-intro > h1 + *, .accueil-haut > .accueil-intro > h1 + * { margin-top: 8px; }
.accueil-tete > :not(.accueil-intro), .accueil-haut > :not(.accueil-intro) { grid-area: image; align-self: center; }
@media (max-width: 980px) {
  .accueil-tete, .accueil-haut { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 12px 24px; }
}
@media (max-width: 640px) {
  /* téléphone : une colonne, l'illustration après le texte comme avant */
  .accueil-tete, .accueil-haut { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
  /* mêmes sélecteurs que plus haut (même poids, placés après) : sans zone nommée, chaque élément suit l'ordre de la page */
  .accueil-tete > .accueil-intro > .surtitre, .accueil-haut > .accueil-intro > .surtitre,
  .accueil-tete > .accueil-intro > h1, .accueil-haut > .accueil-intro > h1,
  .accueil-tete > :not(.accueil-intro), .accueil-haut > :not(.accueil-intro) { grid-area: auto; }
}

/* ---- Cartes : .carte-outil du site (coins 18 px, bordure claire, ombre douce, liseré de couleur en haut) ---- */
.carte, .carte-theme, .carte-notion, .carte-quiz, .carte-reflexe {
  border-radius: 18px; border: 1px solid var(--ligne); background: white;
  box-shadow: var(--ombre); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.carte:hover, .carte-theme:hover, .carte-notion:hover, .carte-quiz:hover, .carte-reflexe:hover {
  transform: translateY(-3px); border-color: #c9d6ee;
  box-shadow: 0 2px 4px rgba(20, 33, 61, 0.05), 0 16px 36px rgba(20, 33, 61, 0.1);
}
.carte h3, .carte-theme h3, .carte-notion h3 { font-family: var(--f-titre); color: var(--titre); }

/* ---- Pastilles et listes ---- */
.puces a, .puces li { background: #f3f5f9; color: #475569; font-size: 0.82rem; }
.puces a:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.credits { color: var(--encre-2); }
.credits a { color: var(--accent-fonce); }

@media (prefers-reduced-motion: reduce) {
  .carte, .carte-theme, .carte-notion, .carte-quiz, .carte-reflexe { transition: none; }
  .carte:hover, .carte-theme:hover, .carte-notion:hover, .carte-quiz:hover, .carte-reflexe:hover { transform: none; }
}