/* ==========================================================================
   RAPÉMATHIQUES — Pages d'exercices du livre
   Chargée en plus de styles.css, uniquement par les pages
   /rapemathiques/chapitreN.

   Ces pages sont celles des QR codes imprimés dans le livre « Rap &
   Mathiques » : on y arrive presque toujours depuis un téléphone, le livre
   ouvert à côté. Tout est donc pensé pour le pouce d'abord, sur une seule
   colonne étroite, même sur grand écran.
   ========================================================================== */

:root {
  /* Les deux seules couleurs qui n'existent pas dans styles.css. Assez
     douces pour rester dans l'ambiance nuit, assez claires pour un
     contraste lisible sur le fond noir. Elles ne portent jamais seules
     l'information : le verdict est aussi écrit en toutes lettres. */
  --juste: #7fd1a0;
  --faux: #f2917f;
}

/* Piège : l'attribut hidden ne cache un élément que par une règle très
   faible du navigateur. Le moindre display écrit ici l'emporte, et
   .btn (display: inline-flex) restait donc visible malgré hidden.
   Le script s'appuie sur hidden pour montrer et cacher : on le rend
   prioritaire. */
.exercice [hidden] {
  display: none !important;
}

/* Une colonne de lecture confortable : au-delà, les calculs flottent au
   milieu d'un écran vide et le regard fait des allers-retours inutiles. */
.exo-colonne {
  max-width: calc(44rem + 2 * var(--gouttiere));
}

/* En-tête ---------------------------------------------------------------- */

.exo-entete {
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.exo-surtitre {
  margin-top: 2rem;
}

/* Même piège que le titre de rapemathiques.html : Syne est très large, et
   une taille en vw ne connaît pas la colonne. « Enchaînements » se coupait
   en « Enchaînem » + « ents » sur téléphone. La taille est donc plafonnée
   en cqi, un pourcentage de la colonne (container-type est déjà posé sur
   .entete-page .contenant dans styles.css).

   Mesure sur le texte rendu : « Enchaînements » occupe 12,27 fois sa
   taille de police. Il faut donc au plus 100/12,27 = 8,1 % de la colonne,
   on prend 7,8 % pour la marge.

   Un autre chapitre avec un mot plus long (« Proportionnalité ») mesure
   son mot le plus long et écrit son propre plafond sur le h1 :
   style="--titre-cqi: 6.6cqi". */
.exo-titre {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  font-size: min(clamp(2.25rem, 1.4rem + 3.6vw, 4rem), var(--titre-cqi, 7.8cqi));
  margin-top: 1rem;
  letter-spacing: -0.03em;
}

.exo-intro {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: var(--gris);
}

/* Le corps de page ------------------------------------------------------- */

.exo-section {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.exo-lecon {
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
}

/* Titre et sous-titre de la vignette sont des span (un button ne peut
   contenir que du contenu « en ligne ») : sans ça, ils se suivaient sur
   la même ligne. */
.exo-lecon .video__titre,
.exo-lecon .video__sous-titre {
  display: block;
}

.exercice__titre {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  margin-bottom: 1.5rem;
}

/* Un calcul ---------------------------------------------------------------- */

.calculs {
  border-top: 1px solid var(--ligne);
}

.calcul {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--ligne);
}

/* L'énoncé est en Inter et pas en Syne : la police d'affichage dessine des
   chiffres trop fantaisistes pour des maths. tabular-nums aligne les
   chiffres sur une même largeur, comme sur une calculatrice. */
.calcul__enonce {
  display: block;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* Un calcul ne se coupe jamais au milieu, sauf s'il ne tient vraiment
     pas sur la ligne (filet de sécurité pour les très petits écrans). */
  overflow-wrap: anywhere;
}

/* flex-wrap : sur téléphone, « P = [champ] cm ✗ Pas tout à fait » ne tient
   pas sur 335 px. Le verdict passe alors à la ligne au lieu de déborder. */
.calcul__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.875rem;
}

.calcul__unite {
  font-weight: 600;
  color: var(--gris);
}

.calcul__egal {
  font-weight: 600;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  flex: none;
  /* Largeur fixe : « A = » et « B = » n'ont pas la même largeur, et les
     champs ne tombaient pas exactement les uns sous les autres. */
  min-width: 2.25em;
}

/* 16px minimum sur la saisie : en dessous, Safari sur iPhone zoome
   automatiquement sur le champ au toucher, et la page reste zoomée. */
.calcul__saisie {
  width: 8.5rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--os);
  background: var(--noir-2);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}

.calcul__saisie:hover {
  border-color: var(--gris);
}

.calcul__saisie:focus {
  outline: none;
  border-color: var(--or);
  background: var(--nuit);
}

.calcul__saisie[readonly] {
  cursor: default;
}

.calcul__verdict {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* États après validation --------------------------------------------------- */

.calcul.est-juste .calcul__saisie {
  border-color: var(--juste);
}

.calcul.est-juste .calcul__verdict {
  color: var(--juste);
}

.calcul.est-faux .calcul__saisie,
.calcul.est-vide .calcul__saisie {
  border-color: var(--faux);
}

.calcul.est-faux .calcul__verdict,
.calcul.est-vide .calcul__verdict {
  color: var(--faux);
}

/* La correction ------------------------------------------------------------ */

.calcul__correction {
  margin-top: 1.125rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--or);
  background: rgba(244, 241, 234, 0.03);
}

.calcul__correction-titre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.5rem;
}

.calcul__correction li {
  font-variant-numeric: tabular-nums;
  color: var(--gris);
  overflow-wrap: anywhere;
}

/* La dernière ligne, le résultat, ressort en blanc os. */
.calcul__correction strong {
  color: var(--os);
  font-weight: 600;
}

/* Actions et bilan --------------------------------------------------------- */

.exercice__actions {
  margin-top: 2rem;
}

/* Sur téléphone, le bouton prend toute la largeur : c'est la cible la plus
   importante de la page, elle doit tomber sous le pouce sans viser. */
@media (max-width: 620px) {
  .exercice__valider,
  .bilan__actions .btn {
    width: 100%;
  }
}

.bilan {
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--nuit);
}

.bilan:focus {
  outline: none;
}

.bilan__score {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--or);
}

.bilan__message {
  margin-top: 0.875rem;
  max-width: 44ch;
}

.bilan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.exo-suite {
  margin-top: clamp(3rem, 8vw, 4.5rem);
  color: var(--gris);
  font-size: 0.9375rem;
}

.exo-suite a {
  color: var(--os);
  text-decoration: underline;
  text-decoration-color: var(--ligne-forte);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--transition);
}

.exo-suite a:hover {
  text-decoration-color: var(--or);
}

/* ==========================================================================
   AJOUTS POUR LES 20 CHAPITRES
   Les premiers exercices n'avaient que des calculs. Les autres ont des
   figures, des questions à choix, des fractions, des tableaux, et des
   constructions à faire sur feuille.
   ========================================================================== */

/* Texte réservé aux lecteurs d'écran (l'unité attendue, par exemple). */
.exo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sommaire en haut d'un chapitre à plusieurs exercices ------------------ */

.exo-sommaire {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.exo-sommaire a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color var(--transition), color var(--transition);
}

.exo-sommaire a:hover {
  border-color: var(--or);
  color: var(--or-clair);
}

.exo-sommaire span {
  color: var(--or);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Un exercice ------------------------------------------------------------ */

.exo-exercice + .exo-exercice {
  margin-top: clamp(4rem, 10vw, 6rem);
  padding-top: clamp(3rem, 8vw, 4.5rem);
  border-top: 1px solid var(--ligne-forte);
}

.exo-exercice__numero {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.75rem;
}

.exo-exercice__titre {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

/* Deux leçons côte à côte (chapitre 15) */
.exo-lecons {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
}

.exo-lecons .exo-lecon {
  margin-bottom: 0;
}

@media (min-width: 700px) {
  .exo-lecons {
    grid-template-columns: 1fr 1fr;
  }
}

.exo-lecon-rappel {
  color: var(--gris);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

.exo-lecon-rappel a {
  color: var(--os);
  text-decoration: underline;
  text-decoration-color: var(--ligne-forte);
  text-underline-offset: 0.2em;
}

/* Un groupe de questions qui partagent une consigne ou une figure ---------- */

.exo-bloc + .exo-bloc {
  margin-top: 2.5rem;
}

.exo-consigne {
  font-size: 1.0625rem;
  font-weight: 500;
  max-width: 60ch;
  margin-bottom: 1.25rem;
}

.exo-consigne + .exo-consigne {
  margin-top: -0.5rem;
}

/* Les questions rédigées sont plus petites que les calculs seuls : un
   énoncé de trois lignes en 1,5 rem gras devenait un mur de texte. */
.calcul__enonce--texte {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  overflow-wrap: break-word;
  max-width: 60ch;
}

/* Les figures ---------------------------------------------------------------
   Les schémas d'Antoine sont dessinés sur fond blanc. Plutôt que de les
   détourer, on les pose sur une carte blanche, comme une feuille. */
.exo-figure {
  margin: 1rem 0;
  padding: 0.75rem;
  background: #fff;
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}

.exo-figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.calcul__correction .exo-figure,
.exo-correction .exo-figure {
  margin: 0.75rem 0;
}

/* Les champs larges (expressions, écriture scientifique) */
.calcul__saisie--large {
  width: auto;
  flex: 1 1 14rem;
  max-width: 22rem;
}

.calcul__aide {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--gris);
}

/* Les questions à choix ------------------------------------------------------ */

.calcul__groupe {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.calcul__groupe .calcul__enonce {
  padding: 0;
}

.calcul__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

/* Le vrai bouton radio reste dans la page (clavier, lecteur d'écran),
   mais c'est l'étiquette entière qui se dessine et qui se touche :
   une cible de 44 px de haut au lieu d'un rond de 13 px. */
.choix {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  background: var(--noir-2);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.choix input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choix:hover {
  border-color: var(--gris);
}

.choix:has(input:checked) {
  border-color: var(--or);
  background: rgba(217, 169, 78, 0.14);
  color: var(--or-clair);
}

.choix:has(input:focus-visible) {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

.choix:has(input:disabled),
.choix input:disabled {
  cursor: default;
}

.calcul__groupe .calcul__verdict {
  display: block;
  margin-top: 0.625rem;
}

.calcul.est-juste .choix:has(input:checked) {
  border-color: var(--juste);
  color: var(--juste);
  background: rgba(127, 209, 160, 0.12);
}

.calcul.est-faux .choix:has(input:checked) {
  border-color: var(--faux);
  color: var(--faux);
  background: rgba(242, 145, 127, 0.12);
}

/* Les exercices sur feuille ---------------------------------------------------- */

.calcul__feuille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px dashed var(--ligne-forte);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* La correction d'un groupe de questions (en plus de celle de chaque question) */
.exo-correction {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--or);
  background: rgba(244, 241, 234, 0.03);
}

.exo-correction p,
.calcul__correction p:not(.calcul__correction-titre) {
  color: var(--gris);
  margin-top: 0.5rem;
}

.exo-correction li {
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.exo-correction strong,
.calcul__correction p strong {
  color: var(--os);
  font-weight: 600;
}

/* Une correction qui n'est pas d'Antoine : elle le dit. */
.exo-correction__note {
  font-size: 0.8125rem;
  font-style: italic;
}

/* L'écriture mathématique -------------------------------------------------------
   Fraction en deux étages, sans bibliothèque : le numérateur au-dessus
   d'un trait, le dénominateur dessous. vertical-align: middle centre le
   trait sur la ligne du texte. */
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.15em;
  line-height: 1.15;
  font-size: 0.9em;
}

.frac > span {
  padding: 0 0.15em;
}

/* :last-child et pas « span + span » : entre les deux étages se trouve le
   mot « sur », caché, réservé aux lecteurs d'écran. */
.frac > span:last-child {
  border-top: 1px solid currentColor;
}

.math var {
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.12em;
  padding: 0 0.04em;
}

.math sup {
  font-size: 0.7em;
  line-height: 0;
}

/* Le chapeau d'un angle (ABC surmonté d'un arc) */
.chapeau {
  position: relative;
  display: inline-block;
}

.chapeau::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -0.12em;
  height: 0.32em;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.racine {
  border-top: 1px solid currentColor;
  padding: 0 0.1em;
}

/* L'opération faite des deux côtés d'une équation, en doré comme dans la
   correction d'origine d'Antoine (en orange sur fond blanc). */
.exo-op {
  color: var(--or);
  font-weight: 600;
}

/* Tableau de valeurs (chapitre 17) */
.exo-tableau-defile {
  overflow-x: auto;
  margin: 1rem 0;
}

.exo-tableau {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.exo-tableau th,
.exo-tableau td {
  border: 1px solid var(--ligne-forte);
  padding: 0.5rem 0.875rem;
  min-width: 3rem;
}

.exo-tableau th {
  font-weight: 600;
  color: var(--gris);
}

/* Le graphique de la correction du chapitre 17 */
.exo-graphique {
  max-width: 26rem;
  margin: 1rem 0;
}

.exo-graphique svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Navigation entre chapitres --------------------------------------------------- */

.exo-chapitres {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 8vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ligne);
}

.exo-chapitres a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 48%;
  transition: color var(--transition);
}

.exo-chapitres a:hover {
  color: var(--or-clair);
}

.exo-chapitres__suivant {
  margin-left: auto;
  text-align: right;
}

.exo-chapitres small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}