/* ---------- Sujets de grand oral (/sujets-grand-oral-maths) ----------
   Feuille propre à une seule page, sur le modèle de `simulateur-bac.css` et
   pour la même raison : `styles.css` est chargée par toutes les pages du site
   et dépasse déjà sa cible. Un explorateur de cartes filtrables n'a pas à
   être payé par le guide « maths expertes ». La page charge donc les deux
   feuilles.

   Trois choses gouvernent ce qui suit.

   1. **Tout est qualifié par `.guide-body`.** Les règles larges du corps
      d'article valent (0,1,1) et l'emportent sur une classe seule (0,1,0) :
      sans le préfixe, la grille de cartes retrouve les puces des `ul` et les
      marges de paragraphe. C'est le piège de spécificité du skill /bac_web.
   2. **Aucune couleur nouvelle.** L'or de marque porte les titres de cartes
      et le filtre actif. Le drapeau d'ancrage ne prend ni rouge ni vert : ces
      deux teintes codent le signe d'un trinôme sur les pages chapitre, et un
      grep sert à tenir ce couple ; leur donner ici un troisième sens
      polluerait la vérification. L'avertissement se lit donc à sa bordure et
      à son libellé, pas à sa couleur.
   3. **Rien n'affiche de compte de fréquence.** Il n'y a volontairement ni
      badge chiffré, ni jauge, ni étoiles dans cette feuille : la règle est au
      module JS et dans le gate. Ne pas « enrichir » une carte d'un indicateur
      de popularité, ce serait republier le relevé interne sous une autre
      forme. */

/* Repli sans JavaScript : la liste n'apparaît qu'une fois le module en place,
   sinon le visiteur voit une coquille de filtres sans contenu. Même garde que
   `html.sim-ready` sur le simulateur. */
.guide-body .sgo-noscript {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  color: var(--text-secondary);
  background: var(--bg-overlay);
}
html.sgo-ready .guide-body .sgo-noscript { display: none; }
.guide-body .sgo-explorateur { display: none; }
html.sgo-ready .guide-body .sgo-explorateur { display: block; }

.guide-body .sgo-explorateur {
  clear: both;
  margin: 24px 0 8px;
}

/* ---------- Sommaire ----------
   Il n'y en a plus ici. La page portait sa propre version (`.sgo-sommaire`),
   dessinée avec d'autres couleurs, d'autres rayons et sans la flèche : le site
   affichait donc deux sommaires différents pour un seul objet. Elle prend
   depuis le 2026-08-29 le `.chapter-toc` de `styles.css`, comme
   `/statistiques-bac` et les pages chapitre, et le `<nav>` est passé **hors**
   de `.guide-body` — sans quoi la règle large `.guide-body ol` renumérote la
   liste en 1. 2. 3. Ne pas réintroduire de variante locale ici. */

/* ---------- Le bloc réseaux ----------
   La capsule est celle de la page d'accueil (`.hero-socials`, styles.css) :
   même objet, mêmes trois logos. Seul le soulignement des liens d'article est
   à neutraliser ici. */

.guide-body .sgo-reseaux { margin: 18px 0 8px; }

.guide-body .sgo-reseaux .hero-socials a {
  text-decoration: none;
  border-bottom: 0;
}

/* La capsule partagée est en `nowrap !important` parce qu'elle vit dans un hero
   large. Dans une colonne d'article elle dépasse sous ~250 px (mesuré au
   balayage 200 → 420, 26 largeurs) : ici, elle a le droit de passer à la ligne.
   Le `!important` est obligatoire pour l'emporter sur celui de `styles.css`. */
.guide-body .sgo-reseaux .hero-socials {
  flex-wrap: wrap !important;
  justify-content: center;
}

/* ---------- Filtres ---------- */

.guide-body .sgo-filtres-groupe { margin-bottom: 14px; }

.guide-body .sgo-filtres-titre {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.guide-body .sgo-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-body .sgo-filtre {
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text-secondary);
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.guide-body .sgo-filtre:hover { border-color: var(--gold-dark); color: var(--text-primary); }

.guide-body .sgo-filtre.is-actif {
  color: var(--bg-primary);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

.guide-body .sgo-filtre-note { opacity: 0.75; font-size: 0.85em; }

.guide-body .sgo-compteur {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 18px 0 12px;
}

/* ---------- Cartes ---------- */

.guide-body .sgo-liste {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .guide-body .sgo-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.guide-body .sgo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Un enfant de grille a un plancher `min-width: auto` : sous 206px il
     refusait de descendre sous la largeur mini de son contenu (le nom de
     chapitre le plus long) et sortait du conteneur de quelques pixels.
     Mesuré au balayage 200 → 420, pas vu à la capture. */
  min-width: 0;
}

.guide-body .sgo-card-question {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--gold);
}

.guide-body .sgo-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guide-body .sgo-chip {
  /* Les noms de chapitre sont longs ; sans coupure ils fixent la largeur mini
     de la carte entière (voir `min-width` ci-dessus). */
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.guide-body .sgo-chip-croise {
  color: var(--text-muted);
  background: var(--bg-overlay);
}

/* Les deux ancrages fragiles se disent en une puce, pas en un encadré : ce
   qu'ils impliquent est écrit dans la description, juste dessous. Ils se
   distinguent par la bordure, pas par une teinte neuve (en-tête de la
   feuille). */
.guide-body .sgo-chip-ancrage {
  color: var(--gold);
  border-color: var(--gold-dark);
}

.guide-body .sgo-card-prix {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.guide-body .sgo-card-prix p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.guide-body .sgo-vide {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- La frise de l'épreuve ----------
   La barre au-dessus des trois cartes est à l'échelle : 20 / 10 / 10 minutes,
   donc 2 / 1 / 1 de largeur. Elle ne se clique pas et ne cache rien — le texte
   de chaque phase reste écrit dans sa carte. Survoler un segment souligne sa
   carte, et l'inverse ; sur mobile, sans survol, il reste une frise à
   l'échelle, ce qui est déjà l'essentiel de ce qu'elle dit. `aria-hidden`
   parce qu'elle répète mot pour mot les durées et les noms des cartes. */

.guide-body .sgo-frise-barre {
  display: flex;
  gap: 4px;
  margin: 20px 0 12px;
  padding: 0;
  list-style: none;
}

.guide-body .sgo-seg {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 8px 6px 9px;
  border-top: 3px solid var(--gold-dark);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-overlay);
  text-align: center;
  overflow-wrap: anywhere;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.guide-body .sgo-seg-long { flex: 2 1 0; }

.guide-body .sgo-seg-duree {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
}

.guide-body .sgo-seg-nom {
  display: block;
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--text-secondary);
}

.guide-body .sgo-seg.is-visee {
  border-top-color: var(--gold);
  background: var(--bg-elevated);
}

.guide-body .sgo-frise li.is-visee {
  border-color: var(--gold-dark);
  border-top-color: var(--gold);
  background: var(--bg-elevated);
}

.guide-body .sgo-frise {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .guide-body .sgo-frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.guide-body .sgo-frise li {
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  padding: 16px;
  margin: 0;
}

.guide-body .sgo-frise-duree {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}

.guide-body .sgo-frise-nom {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 8px;
}

.guide-body .sgo-frise p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Les combinaisons de spécialités ----------
   Sept barres proportionnelles à un effectif officiel. La largeur est en style
   en ligne parce qu'elle EST la donnée : la sortir dans la feuille couperait le
   chiffre affiché de la barre qui le dessine, et l'une des deux dériverait. */

.guide-body .sgo-combis {
  display: grid;
  gap: 12px;
  margin: 20px 0 12px;
  padding: 0;
  list-style: none;
}

.guide-body .sgo-combis li { margin: 0; min-width: 0; }

.guide-body .sgo-combi-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.guide-body .sgo-combi-n {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.guide-body .sgo-combi-barre {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-overlay);
  overflow: hidden;
}

.guide-body .sgo-combi-barre span {
  display: block;
  height: 100%;
  background: var(--gold);
}

/* ---------- La grille d'évaluation ---------- */

/* Cinq barres égales, et surtout pas cinq boutons. La première version encadrait
   chaque critère — fond, bordure, arrondi, une seule en or — c'est-à-dire le
   vocabulaire exact des puces de filtre juste au-dessus, qui, elles, se tapent.
   Empilée sous 640 px, la grille se lisait donc comme une rangée de contrôles
   morts (relevé par Adrien sur iPhone, 2026-08-28). Ce bloc ne se manipule pas :
   il dit, par la seule égalité des cinq barres, qu'une seule porte les
   connaissances. Ne pas lui rendre une bordure de puce. */
.guide-body .sgo-grille {
  display: grid;
  gap: 12px 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .guide-body .sgo-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.guide-body .sgo-grille li {
  margin: 0;
  padding: 0;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Cinq barres identiques, aucune mise en avant : les cinq critères comptent tous
   dans la note, et c'est ce que le bloc doit dire (décision d'Adrien,
   2026-08-28). Deux versions ont été essayées avant — l'or sur « Connaissances »,
   puis l'or sur les quatre autres — et toutes deux racontent une hiérarchie que
   la grille n'a pas. Ne pas redistinguer un critère ici : lequel porte le savoir
   se lit dans les libellés, et la phrase au-dessus le dit. */
.guide-body .sgo-grille li::before {
  content: "";
  display: block;
  box-sizing: border-box;
  height: 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--gold);
}

/* ---------- Le chrono de répétition ----------
   Le second objet manipulable de la page. Il ne s'affiche qu'une fois le module
   en place : un bloc de boutons qui ne répondent pas est pire que pas de bloc
   du tout, et c'est la même garde que `.sgo-noscript` plus haut. */

.guide-body .sgo-chrono-zone { display: none; }
.guide-body .sgo-chrono-zone.is-pret { display: block; }

.guide-body .sgo-chrono {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  padding: 20px 16px 18px;
  text-align: center;
  transition: border-color var(--transition-fast);
}

.guide-body .sgo-chrono-phase {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.guide-body .sgo-chrono-temps {
  margin: 2px 0 0;
  font-size: clamp(2.4rem, 13vw, 3.8rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.guide-body .sgo-chrono-piste {
  height: 6px;
  margin: 14px 0 12px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.guide-body .sgo-chrono-avance {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width var(--transition-fast) linear;
}

.guide-body .sgo-chrono-etat {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.guide-body .sgo-chrono-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.guide-body .sgo-chrono-bouton {
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text-secondary);
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.guide-body .sgo-chrono-bouton:hover:not(:disabled) {
  border-color: var(--gold-dark);
  color: var(--text-primary);
}

.guide-body .sgo-chrono-bouton:disabled { opacity: 0.4; cursor: default; }

.guide-body .sgo-chrono-bouton.is-primaire {
  color: var(--bg-primary);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

/* La bascule d'une phase à la suivante se voit une seconde : sans micro ni son,
   c'est le seul signal visuel qui double l'annonce lue par `aria-live`. */
.guide-body .sgo-chrono.is-bascule { border-color: var(--gold); }

.guide-body .sgo-chrono:fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: var(--bg-primary);
  padding: 24px;
}

.guide-body .sgo-chrono:fullscreen .sgo-chrono-temps { font-size: clamp(4rem, 20vw, 11rem); }
.guide-body .sgo-chrono:fullscreen .sgo-chrono-piste { width: min(720px, 78vw); }