/* ===========================================================
   EduSpeed — rendu « Parkeur » pour toutes les pages élèves (2026-10-09)
   Même esprit que css/moderne.css (accueil) : fond pointillé, boutons en pilule,
   badges en dégradé, titres serrés, cartes sans bordure à grands arrondis,
   matières en aplats colorés. Ne touche QUE au rendu : la disposition des écrans
   suit la maquette Android et ne bouge pas (en-tête à 62 px, barres collantes).
   Chargée en fin de <body>, après les styles propres à chaque page.
   =========================================================== */

:root { --soft: #f1ead9; --grad-badge: linear-gradient(90deg, #f6d987 0%, #f3e7c4 45%, #cfe8da 100%); }

/* — Fond : papier crème semé d'un fin pointillé — */
body {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(24,34,27,.10) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
html[data-theme="sombre"] body { background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px); }
header.top { border-bottom-color: transparent; }

/* — Boutons en pilule — */
.btn { border-radius: 999px; padding-left: 26px; padding-right: 26px; }
.btn-primary { background: linear-gradient(135deg, var(--forest) 0%, var(--forest-d) 100%);
  box-shadow: 0 10px 24px rgba(12,74,55,.22); }
.btn-primary:hover { box-shadow: 0 14px 30px rgba(12,74,55,.3); }
.btn-ghost { border: 0; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--forest); }
.add { border-radius: 999px; padding: 9px 16px; }

/* — Badges au-dessus des titres — */
.eyebrow { padding: 6px 14px; border-radius: 999px; background: var(--grad-badge); color: var(--forest-d);
  font-weight: 700; font-size: .9rem; letter-spacing: 0; text-transform: none; }
.eyebrow::before { content: "✦"; font-size: .8em; }

/* — Titres : grands et serrés — */
h1.page, .title, .hero-cat h1, main h1 { letter-spacing: -.035em; line-height: 1.05; font-weight: 800; }
h1.page, .hero-cat h1 { font-size: clamp(2rem, 5.6vw, 3rem); }
h1.title { font-size: clamp(2.1rem, 6vw, 3rem); }
main h2, .mat-group h2 { letter-spacing: -.025em; }
.sub { line-height: 1.55; }

/* — Cartes et panneaux : sans bordure, grands arrondis — */
.card, .panel, .empty-box, .vide, .lined, .fiche-card {
  border: 0; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(227,214,186,.75);
}
.panel { box-shadow: inset 0 0 0 1px rgba(227,214,186,.75), 0 18px 40px -18px rgba(24,34,27,.18); }
.card-p { border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(227,214,186,.75); }
.card-p::before { display: none; }
.card-p:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--c-line, var(--line-2)), 0 18px 34px -16px rgba(24,34,27,.2); }
.c-chip { text-transform: none; letter-spacing: 0; font-size: .78rem; }
details { border: 0 !important; border-radius: 20px !important; box-shadow: inset 0 0 0 1px var(--line); }

/* — Champs — */
.input, .rc-champ { border-radius: 14px; }

/* — Catalogue : chaque matière est un aplat à sa couleur, comme les dossiers de Parkeur — */
.matiere { border: 0; border-radius: 24px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--c-line, var(--soft)) 0%, var(--c-soft, var(--card)) 70%); }
.m-head:hover { background: rgba(255,255,255,.28); }
.m-ic { background: rgba(255,253,247,.75); box-shadow: none; border-radius: 14px; color: var(--c-ink, var(--forest)); }
.m-count { border: 0; background: rgba(255,253,247,.8); }
.onglet { border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.onglet[aria-selected="true"] { background: linear-gradient(135deg, var(--forest), var(--forest-d)); box-shadow: none; }
.chip-f { border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.chip-f.on { box-shadow: none; }
.onglets, .filtres { border-bottom-color: transparent; }

html[data-theme="sombre"] .matiere { background: var(--card); }
html[data-theme="sombre"] .m-ic, html[data-theme="sombre"] .m-count { background: rgba(255,255,255,.08); }

/* — Pages à composants propres : appli, projet EPS — */
.voie, .perk, .final { border: 0 !important; border-radius: 28px !important;
  box-shadow: inset 0 0 0 1px rgba(227,214,186,.75), 0 18px 40px -20px rgba(24,34,27,.18) !important; }
.perk { box-shadow: inset 0 0 0 1px rgba(227,214,186,.75) !important; }
.step3 { border-radius: 26px !important; }
.btn-eps { border-radius: 999px !important; padding-left: 28px !important; padding-right: 28px !important;
  background: linear-gradient(135deg, var(--forest), var(--forest-d)) !important; }

/* — Catalogue : la liste pré-rendue par le serveur (pour Google, classe .seo) n'a pas
   la forme de celle du script. Quand le script tourne, on la montre en blocs de
   chargement aux formes du nouveau rendu, le temps que la vraie liste la remplace :
   l'élève ne voit plus « l'ancienne version » une seconde. Sans JS, elle reste lisible. */
html.js .matiere.seo { min-height: 84px; background: linear-gradient(135deg, var(--paper-2), var(--card));
  animation: es-seo-attente 1.3s ease-in-out infinite alternate; }
html.js .matiere.seo > .grid { display: none; }
html.js .matiere.seo .m-head { visibility: hidden; }
@keyframes es-seo-attente { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.js .matiere.seo { animation: none; } }