/* ---------- Simulateur de moyenne du bac (/simulateur-moyenne-bac) ----------
   Feuille propre à une seule page, sur le modèle de `legal.css`, et pour la
   même raison que le module JS de la page ne va pas dans `script.js` :
   `styles.css` est chargée par toutes les pages du site et dépasse déjà sa cible
   (le compte vit dans `docs/social-and-web.md` § Cache-busting des assets). Un formulaire de quatorze champs, une carte de résultat et un mode
   inverse n'ont aucune raison d'être payés par le guide « maths expertes ».
   La page charge donc les deux feuilles, comme les pages légales.

   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, un `<p>` de résultat repasse en corps de texte et un
      `<ol>` de sensibilité retrouve ses puces. C'est le piège de spécificité
      du skill /bac_web.
   2. **Aucune couleur nouvelle.** L'or de marque porte le chiffre, et porte
      aussi l'état une fois qu'il s'agit d'une mention obtenue (`ab`/`b`/`tb`/
      `tbf`, voir `isMention`) ; le blanc reste le texte partout ailleurs, et
      un état défavorable n'est ni rouge ni gris triste : la page calcule,
      elle ne commente pas un échec. Le vert et le rouge du site codent le
      signe d'un trinôme (§ Pages chapitre de `styles.css`) et un grep de ces
      deux teintes sert à tenir ce couple ; leur donner ici un troisième sens
      polluerait la vérification.
   3. **La carte de résultat détaillée vit dans le flux, jamais en
      `position: sticky`.** Une version collée au bas de l'écran recouvrait en
      permanence le tiers bas d'un viewport de téléphone et interceptait
      chaque tap visant un champ : l'outil entier était insaisissable. Une
      demande ultérieure a repris le principe en petit : `.sim-mini` est un
      bouton compact (chiffre et état sur une ligne, rien d'autre) fixé
      au-dessus du CTA collant du chrome, montré au défilement (JavaScript,
      jamais `position: sticky`) seulement pendant que la carte détaillée
      n'est pas encore à l'écran. Il vaut sur toutes les largeurs : sur grand
      écran, la carte détaillée est encore plus loin sous le formulaire. Elle,
      elle ne bouge pas de sa place à la fin du formulaire. */

.sim {
  clear: both;
  margin: 24px 0 8px;
}

/* Le corps d'un article du site ouvre sur un titre, et son rythme prévoit le
   blanc qui va avec (40 px de `.guide-body`, après les 24 px du hero). Ici il
   ouvre sur l'outil, et ces 64 px repoussent le premier champ sous la ligne de
   flottaison d'un iPhone : la page perd alors ce qu'elle a de mieux. La règle
   est à spécificité égale à celle de `styles.css` et gagne par l'ordre de
   chargement, cette feuille venant après. */
.guide-body { padding-top: 10px; }
#sim { margin-top: 0; }

/* ---------- Les règles du simulateur, avant le formulaire ---------- */

/* Le titre du mode d'emploi ouvre la page : il prend la marge d'un `h2` de
   corps d'article (40 px avant, 16 px après) et repousserait le premier champ
   sous la ligne de flottaison, exactement ce que `.guide-body { padding-top }`
   ci-dessus corrige. La classe l'emporte sur `.guide-body h2` par sa
   spécificité (0,2,0 contre 0,1,1). */
.guide-body .sim-rules-title {
  margin: 0 0 10px;
  font-size: 19px;
}

.guide-body .sim-rules {
  margin: 0 0 20px;
  padding: 4px 18px;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.guide-body .sim-rules li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 14px; line-height: 1.5;
  color: var(--text-secondary);
}
.guide-body .sim-rules li:first-child { border-top: 0; }
.guide-body .sim-rules li::before {
  content: "";
  position: absolute; left: 0; top: 19px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Les trois groupes de champs ---------- */

.guide-body .sim-group {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 18px;
  margin: 0 0 14px;
}
.guide-body .sim-group > summary {
  cursor: pointer;
  list-style: none;
  /* `flex-wrap` plutôt qu'un retour à la ligne dans le compte : sous 400 px le
     titre et son total ne tiennent pas côte à côte, et sans cela c'est
     « 60 coefficients » qui se coupe en deux à côté du chevron. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 14px 0;
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
}
.guide-body .sim-group > summary::-webkit-details-marker { display: none; }
.guide-body .sim-group > summary::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition-fast);
}
.guide-body .sim-group[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.guide-body .sim-group-total {
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 0;
}
.guide-body .sim-group-body { padding: 2px 0 16px; }
.guide-body .sim-group-note {
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.5;
  color: var(--text-muted);
}

/* Sous-titre inséré par le script entre les épreuves anticipées et celles de
   Terminale, à l'intérieur du même conteneur `data-rows="terminales"` : le
   gate `check-simulateur` exige un hôte unique, donc la séparation est un
   simple repère visuel dans la liste, pas un second conteneur. */
.guide-body .sim-subheading {
  margin: 14px 0 2px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
}
.guide-body .sim-subheading:first-child { margin-top: 0; }
.guide-body .sim-subheading + .sim-row { border-top: 0; }

/* ---------- Une ligne de saisie ---------- */

.guide-body .sim-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.guide-body .sim-row:first-child { border-top: 0; }
.guide-body .sim-row-label {
  flex: 1 1 150px; min-width: 0;
  font-size: 15px; line-height: 1.4;
  color: var(--text-secondary);
}
.guide-body .sim-coef {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}
/* `flex-wrap` et un `min-width` nul : sous ~230 px l'étiquette d'année, le
   champ et le « /20 » ne tiennent plus côte à côte, et sans cela ils sortent du
   conteneur au lieu de passer à la ligne. Constaté au balayage de largeurs. */
.guide-body .sim-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.guide-body .sim-field { display: flex; align-items: center; gap: 6px; }
.guide-body .sim-field-year {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* `input` n'hérite ni la police ni la taille du body : les deux sont posées
   ici. 16 px n'est pas un choix esthétique, c'est le seuil sous lequel iOS
   zoome la page à la prise de focus, et le visiteur se retrouve à faire
   défiler pour retrouver le champ suivant. */
.guide-body .sim-input {
  width: 76px; max-width: 100%;
  padding: 9px 10px;
  font-family: inherit; font-size: 16px; text-align: center;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.guide-body .sim-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.09);
}
.guide-body .sim-input[aria-invalid="true"] { border-color: var(--text-primary); }
.guide-body .sim-input-suffix {
  font-size: 13px;
  color: var(--text-muted);
}
.guide-body .sim-row-error {
  flex: 1 0 100%;
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}

/* ---------- Options ---------- */

.guide-body .sim-option {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.guide-body .sim-option:first-child { border-top: 0; }
.guide-body .sim-option-name {
  flex: 1 1 150px; min-width: 0;
  padding: 9px 10px;
  font-family: inherit; font-size: 16px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
/* Une liste déroulante se dimensionne sur sa plus longue option, et les
   libellés de matières portent leur coefficient : sans plafond elle sort du
   conteneur sur un petit écran. */
.guide-body .sim-select {
  max-width: 100%;
  padding: 9px 10px;
  font-family: inherit; font-size: 15px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.guide-body .sim-select:focus, .guide-body .sim-option-name:focus {
  outline: none;
  border-color: var(--gold);
}
.guide-body .sim-btn {
  padding: 9px 16px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.guide-body .sim-btn:hover { border-color: var(--gold); color: var(--gold); }
.guide-body .sim-btn-icon {
  padding: 8px 12px;
  font-size: 13px;
}

/* ---------- La barre de résultat ---------- */

/* Dans le flux, à la fin du formulaire — le point 3 de l'en-tête. */
.guide-body .sim-result {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--bg-elevated);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: var(--radius-lg);
}
.guide-body .sim-result-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
}
.guide-body .sim-moyenne {
  font-size: 34px; font-weight: 700; line-height: 1.1;
  color: var(--gold);
}
/* Vide (« Entre au moins une note »), le span resterait un item flex et son
   gap décalerait l'état de 14 px. */
.guide-body .sim-moyenne:empty { display: none; }
.guide-body .sim-moyenne-unit {
  font-size: 18px; font-weight: 600;
  color: var(--text-muted);
}
.guide-body .sim-state {
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
}
/* Posée par le script quand `isMention(etat)` est vraie : une mention
   obtenue (assez bien à félicitations du jury) se lit en or, comme le
   chiffre. Les autres états (« Entre au moins une note », second groupe,
   admis sans mention) restent en blanc, voir le point 2 de l'en-tête. */
.guide-body .sim-state.is-mention { color: var(--gold); }
.guide-body .sim-meta {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.5;
  color: var(--text-secondary);
}
.guide-body .sim-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 14px 0 0;
}

/* ---------- Barre compacte, pendant la saisie ---------- */

/* Voir le point 3 de l'en-tête : une seule ligne (chiffre + état), fixée
   au-dessus du CTA collant du chrome, montrée par simulateur-bac.js
   uniquement tant que `#sim-result` n'est pas à l'écran. `bottom` est posé en
   ligne par le script, mesuré sur `#sticky-cta` ; 64px n'est qu'un repli
   avant cette mesure — et sur grand écran le CTA collant n'existe pas, la
   mesure vaut 0 et c'est la valeur de la media query qui s'applique. */
.guide-body .sim-mini {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 64px;
  z-index: 85;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  width: auto;
  padding: 12px 16px;
  font-family: inherit;
  background: rgba(21, 21, 30, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transform: translateY(calc(100% + 12px)); visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.guide-body .sim-mini.visible {
  transform: none; visibility: visible;
  transition: transform 220ms ease;
}
.guide-body .sim-mini-figures {
  font-size: 20px; font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.guide-body .sim-mini-figures span {
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}
.guide-body .sim-mini-state {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Sur grand écran la barre reste, centrée et bornée : c'est là que la carte de
   résultat, restée dans le flux à la fin du formulaire, sort de l'écran le plus
   longtemps. `left`/`right` posés et `width: auto` : les marges automatiques
   centrent alors la boîte, et le `transform` de l'animation reste libre. */
@media (min-width: 768px) {
  .guide-body .sim-mini {
    max-width: 420px;
    margin-inline: auto;
    bottom: 24px;
  }
}

/* ---------- Mode inverse et sensibilité ---------- */

.guide-body .sim-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 0 0 22px;
}
.guide-body .sim-panel h3 { margin-top: 0; }
.guide-body .sim-inverse-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.guide-body .sim-inverse-controls label {
  font-size: 14px;
  color: var(--text-secondary);
}
.guide-body .sim-out {
  margin: 0;
  font-size: 17px; line-height: 1.5; font-weight: 600;
  color: var(--text-primary);
}
.guide-body .sim-out strong { color: var(--gold); }
.guide-body .sim-sensi {
  list-style: none;
  margin: 0; padding: 0;
}
.guide-body .sim-sensi li {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-secondary);
}
.guide-body .sim-sensi li:first-child { border-top: 0; }
.guide-body .sim-sensi-name { flex: 1 1 auto; min-width: 0; }
.guide-body .sim-sensi-value {
  font-weight: 600; white-space: nowrap;
  color: var(--gold);
}

/* ---------- Repli sans JS ---------- */

/* Le formulaire ne calcule rien sans script, et un formulaire à moitié branché
   est pire qu'un formulaire absent : il n'a pas d'action, donc « Entrée »
   rechargerait la page en donnant l'impression d'un envoi. Même intention que
   `.waitlist-form` sur /android, avec un cran de plus : `sim-ready` est posée
   par le module lui-même en fin d'initialisation, pas par l'inline du <head> —
   si le module ne s'exécute pas (fichier non servi, navigateur trop vieux), le
   visiteur garde ce repli au lieu d'un formulaire mort. */
.sim { display: none; }
.sim-ready .sim { display: block; }
.sim-ready .sim-noscript { display: none; }
.sim-noscript {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 24px 0;
}
.guide-body .sim-noscript p:last-child { margin-bottom: 0; }

/* Le renvoi vers /statistiques-bac, en pied de carte de résultat.
 *
 * ⚠️ Le sélecteur est long à dessein. `styles.css` colore les liens du corps
 * d'article par `.guide-body a:not(.appstore-badge):not(.guide-cta-btn)`, qui
 * pèse (0,3,1) : une classe seule, ou même `.guide-body .sim-crosslink`, perd
 * et le renvoi ressort en or. Le raccourcir le recasse en silence — la
 * mécanique prévue par le site pour ce cas est d'ajouter un `:not()` là-bas,
 * mais cela coûterait un bump `?v=` sur toutes les pages pour un seul lien.
 *
 * Il est traité comme une étape suivante et non comme une note de bas de page :
 * en `sim-meta`, c'est-à-dire dans la grise des remarques, il se lisait comme du
 * texte d'appoint alors que c'est le seul chemin entre les deux outils du site.
 * Il reste néanmoins **sous** le résultat et le bouton d'effacement — ce que le
 * visiteur est venu chercher passe avant ce qu'on lui propose ensuite. */
.guide-body .sim .sim-result a.sim-crosslink {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px -4px -4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.guide-body .sim .sim-result a.sim-crosslink:hover,
.guide-body .sim .sim-result a.sim-crosslink:focus-visible {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}

.guide-body .sim .sim-result a.sim-crosslink strong {
  color: var(--text-primary);
  font-weight: 600;
}

.sim-crosslink-texte { flex: 1; }

.sim-crosslink-fleche {
  color: var(--gold);
  font-size: 1.15rem;
  flex: none;
}