/*
 * CALCULATRICE.CSS — la feuille de la calculatrice, et elle seule.
 *
 * Fabriquée le 2026-09-13 par outils/extraire-css.js à partir de
 * styles.css et assets.css (les feuilles du jeu EQUAELIBRE, dont la
 * calculatrice n'utilisait qu'une part : chaque règle a été testée contre le
 * DOM réel, celles qui ne touchaient que les écrans du jeu sont tombées), du
 * <style> de calculatrice.html et de sobre.css — dans cet ordre, celui de la
 * cascade d'avant. Le rapport : outils/extraire-css.rapport.txt.
 *
 * Depuis, c'est CE fichier qu'on modifie : les quatre sources ne sont plus
 * chargées. La section « responsive » en fin de fichier est écrite à la main.
 */

/* ======================================================================
   Extrait de styles.css (règles que la calculatrice utilise)
   ====================================================================== */

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.calculator-controls-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px 10px;
}

.functions-btn {
    background: #4CAF50 !important;
    color: white !important;
    font-weight: bold !important;
}

.functions-btn:hover {
    background: #45a049 !important;
    transform: translateY(-1px);
}

@keyframes slideInFromTop {
    from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    }
    to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    }
}

body {
    font-family: 'Comic Sans MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    background: linear-gradient(135deg, #d6f4f4 0%, #a8e6e6 100%);
    min-height: 100vh;
}

#game-container {
    width: 1000px;
    min-height: 700px;
    margin: 50px auto 20px;
    position: relative;
    background-color: #d6f4f4;
    border: 2px solid #333;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.screen {
    width: 100%;
    min-height: 100%;
    display: none;
    background-color: #d6f4f4;
    padding: 0;
    flex-direction: column;
}

.screen.active {
    display: flex;
}

#game-screen {
    position: relative;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #b8e0e0 0%, #a0d0d0 100%);
    border-bottom: 2px solid #644a96;
    font-weight: bold;
    font-size: 1.25rem;
}

.game-info, .score-info {
    display: flex;
    gap: 30px;
    color: #333;
}

.game-content {
    display: flex;
    flex-direction: row;
    height: calc(100% - 80px);
    padding: 20px;
    gap: 20px;
}

.calculation-steps {
    flex: 1;
    background: white;
    border: 2px solid #644a96;
    border-radius: 10px;
    padding: 20px;
    overflow-y: auto;
}

.calculation-step {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 5px;
    min-height: auto;
    overflow: visible;
}

.calculation-step.equation-step {
    display: block;
}

.operation-icon {
    width: 30px;
    height: 30px;
}

.control-btn {
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 2px solid #333;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Comic Sans MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    transition: all 0.2s ease;
}

#undo-btn {
    background-color: #ccc;
    color: #000;
}

#reset-btn {
    background-color: #ff0000;
    color: white;
}

#back-menu-btn {
    background-color: #4a90e2;
    color: white;
}

#validate-btn {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border: 2px solid black;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
    padding: 10px 16px;
    font-size: 16px;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}





@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}

.screen.active {
    -webkit-animation: fadeIn 0.5s ease-in-out;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#calculation-list {
    min-height: 60px;
    transition: none !important;
}

.MathJax {
    line-height: inherit !important;
    overflow: visible !important;
}

mjx-container {
    line-height: 1.4 !important;
}

mjx-container mjx-math {

}

mjx-container mjx-mfrac, mjx-container mjx-mfrac mjx-num, mjx-container mjx-mfrac mjx-den {
    transform: scale(1) !important;
}

mjx-container * {
    font-size: inherit !important;
}

.step-expression mjx-container {
    font-size: 1.6rem !important;
}

.step-expression mjx-container mjx-math {
    font-size: 1.6rem !important;
}

.notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #644a96;
    color: white;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateY(0);
}

.notification.error {
    background: #ff0000;
}

.notification.success {
    background: #44a857;
}

.notification.warning {
    background: #9c88c4;
    color: white;
}

.notification.black {
    background: #000000;
    color: white;
}

.equation-learning-layout {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    gap: 15px;
    flex: 1;
    padding: 15px;
}

.bottom-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    gap: 20px;
}

.left-operations, .right-operations {
    display: flex;
    flex-direction: column;
    background: white;
    border: 2px solid #644a96;
    border-radius: 8px;
    padding: 8px;
}

.left-operations h4, .right-operations h4 {
    color: #644a96;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 8px;
    font-weight: bold;
}

.operation-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.operation-row-eq {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-height: 45px;
}

.operation-row-eq .operation-icon {
    width: 33px;
    height: 28px;
    flex-shrink: 0;
}

.equation-input {
    width: 80px;
    padding: 8px 6px;
    border: 2px solid #ced4da;
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
    background: white;
    font-weight: bold;
}

.equation-input[data-operation="xvalue"] {
    width: 75px;
}

.equation-input:focus {
    outline: none;
    border-color: #644a96;
    background-color: #fffacd;
    box-shadow: 0 0 0 0.2rem rgba(100, 74, 150, 0.25);
}

.step-description {
    color: #644a96;
    font-weight: bold;
    font-size: 1.3rem;
    margin: 5px 0;
    padding: 5px 10px;
    background: #f0f0f0;
    border-radius: 3px;
}

.equation-step {
    margin: 5px 0;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 5px;
    border-left: 4px solid #644a96;
}

.equation-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d2b50b;
    font-weight: bold;
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
    min-height: auto;
    overflow: visible;
}



.fullscreen-mode mjx-container:not([data-fullscreen-styled]) {
    opacity: 0;
}

.fullscreen-mode mjx-container[data-fullscreen-styled] {
    opacity: 1;
    transition: opacity 0.1s ease;
}

:-webkit-full-screen .game-container, :-moz-full-screen .game-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 20px !important;
}

:fullscreen .equation-learning-layout, :-webkit-full-screen .equation-learning-layout, :-moz-full-screen .equation-learning-layout {
    grid-template-columns: 250px 1fr 250px !important;
    gap: 30px !important;
    padding: 30px !important;
}

:fullscreen .operation-row-eq, :-webkit-full-screen .operation-row-eq, :-moz-full-screen .operation-row-eq {
    min-height: 60px !important;
    padding: 12px !important;
    gap: 12px !important;
}

:fullscreen .operation-row-eq .operation-icon, :-webkit-full-screen .operation-row-eq .operation-icon, :-moz-full-screen .operation-row-eq .operation-icon {
    width: 40px !important;
    height: 40px !important;
}

:fullscreen .equation-input, :-webkit-full-screen .equation-input, :-moz-full-screen .equation-input {
    width: 120px !important;
    font-size: 1.4rem !important;
    padding: 12px 8px !important;
}

:fullscreen .left-operations h4, :fullscreen .right-operations h4, :-webkit-full-screen .left-operations h4, :-webkit-full-screen .right-operations h4, :-moz-full-screen .left-operations h4, :-moz-full-screen .right-operations h4 {
    font-size: 1.6rem !important;
    margin-bottom: 15px !important;
}

:fullscreen .calculation-steps, :-webkit-full-screen .calculation-steps, :-moz-full-screen .calculation-steps {
    font-size: 1.2rem !important;
    padding: 30px !important;
}




/* ======================================================================
   Extrait de assets.css (règles que la calculatrice utilise)
   ====================================================================== */

.operation-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #644a96;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    text-align: center;
}

/* LES ICÔNES D'OPÉRATION (1.8, 17/09) : des SVG en ligne (js/icones.js)
   à la place des PNG du jeu — un fond par opération, les couleurs des
   PNG d'origine. Le glyphe est dans le SVG ; `padding` lui laisse de l'air. */
svg.operation-icon {
    padding: 3px;
    box-sizing: border-box;
    overflow: visible;
}
.operation-icon[data-op="add"] { background: #44a857; }
.operation-icon[data-op="sub"] { background: #ff6b6b; }
.operation-icon[data-op="mul"] { background: #4a90e2; }
.operation-icon[data-op="div"] { background: #ff8c00; }
.operation-icon[data-op="pow"] { background: #9b59b6; }

/* ======================================================================
   Ce qui était dans le <style> de calculatrice.html
   ====================================================================== */

/*
 * Spécificités de la page calculatrice autonome.
 * Aucun fichier CSS existant n'est modifié : tout est ici.
 */

/* Le moteur du Jeu 3 démarre en coulisses. On garde la page masquée
   jusqu'à ce que le mode calculatrice soit entièrement installé, pour
   qu'aucune trace du jeu ne soit visible au chargement. */
body.calc-booting #game-container {
    visibility: hidden;
}

/* Cette page n'a pas de menu principal : le bouton "Menu" est retiré.
   Masqué en CSS pour survivre aux reconstructions du panneau de
   contrôles (reset, etc.). */
#back-menu-btn {
    display: none !important;
}

/* Le survol des boutons de réglage est celui de tous les autres —
   il n'était pour rien dans les sauts de mise en page. */

/*
 * TAILLE DES EXPOSANTS — tentative retirée, à dessein.
 *
 * Les exposants s'affichent à la taille de la base. La cause est
 * connue : `styles.css` (~ligne 1043) impose
 *
 *     mjx-container * { font-size: inherit !important; }
 *
 * ce qui écrase la table de MathJax (`[size="s"] { font-size: 70.7% }`).
 * Rétablir cette table rend bien les exposants petits — mais fait
 * TOUT AUSSI BIEN rapetisser les fractions, car MathJax se sert du
 * même attribut `size` pour les deux. Or cette règle de `styles.css`
 * existe justement pour tenir les fractions à taille constante.
 *
 * Les deux objectifs sont donc en conflit, et les départager demande
 * de réécrire la règle des fractions dans `styles.css` — fichier
 * partagé avec le jeu — puis de vérifier au navigateur les fractions
 * dans les exposants, les exposants dans les fractions, et leurs
 * imbrications. Ce n'est pas prioritaire : on reste comme avant.
 *
 * Détail complet dans REPRISE.md, section « Exposants ».
 */

/*
 * L'INDICE DE LA RACINE CUBIQUE — même histoire, même issue.
 *
 * Le 3 de $\sqrt[3]{x}$ sort à la taille des chiffres de la radicande,
 * et posé au milieu du radical. J'ai cru pouvoir le viser seul
 * (`mjx-mroot > mjx-script`, plus spécifique donc gagnant sur la règle
 * de `styles.css`) : essayé le 2026-09-11, ça ne marche pas.
 *
 * C'est le MÊME problème que les exposants ci-dessus, et il se règle au
 * même endroit ou pas du tout. Retiré, à dessein.
 *
 * VERSION SOBRE, 2026-09-13 : réglé dans sobre.css, seul. L'élément
 * visé en septembre n'existait pas (`mjx-script`) : l'indice vit dans
 * `mjx-root`, et une règle plus spécifique que celle de styles.css lui
 * rend ses 50 % — sans toucher aux exposants ni aux fractions.
 */

/*
 * LES MESSAGES D'ERREUR — UN SEUL STYLE, DEUX EMPLACEMENTS.
 *
 * Il y a deux familles d'erreur, et elles n'ont pas le même sort :
 *
 *   SAISIE   « Erreur : Parenthèse fermante manquante… »
 *            Rien n'est enregistré. Le message s'écrit sous la liste
 *            des étapes, dans #moteur-erreur.
 *
 *   CALCUL   « Erreur : Division par zéro »
 *            Ne peut plus survenir à la saisie — une opération qui ne
 *            se calcule pas est refusée avant d'être enregistrée
 *            (resolution.js, processOperationMoteur). Il reste le cas
 *            RÉTROACTIF : une étape valide qui le devient plus, parce
 *            que x a changé ou qu'on est passé en degrés. Le message
 *            s'écrit alors À LA PLACE du résultat, sur la ligne de
 *            l'étape concernée — sans le signe =, puisqu'il n'y a rien
 *            à égaler.
 *
 * Les deux partagent `.message-erreur` : même rouge, même petite
 * police. Une seule déclaration, donc aucune dérive possible.
 *
 * `styles.css` n'est pas touché : il est partagé avec le jeu, et c'est
 * lui qui donne aux équations leur jaune (#d2b50b) et leur 1.6rem.
 */
.message-erreur {
    color: #e57373;
    font-size: 0.95rem;
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* Sous la liste des étapes : la place reste réservée, sans quoi
   l'apparition du message ferait sauter tout ce qui suit. */
#moteur-erreur {
    text-align: center;
    margin-top: 10px;
    min-height: 1.2em;
}

/* Sur la ligne d'une étape : le message prend la place du résultat.
   `.equation-display` est en inline-flex — le span s'y aligne seul. */
.equation-display .message-erreur {
    margin-left: 14px;
}

/*
 * LE BOUTON QUI RETIRE UNE LIGNE DU CALCUL.
 *
 * Il vit DANS la phrase violette, à sa gauche. La phrase devient donc
 * un flex — elle n'était qu'un bloc de texte. Le `align-items` est
 * indispensable : sans lui le bouton s'étirerait sur toute la hauteur.
 *
 * Il reste discret au repos et ne se colore qu'au survol : c'est une
 * action destructrice, elle ne doit pas attirer la main, seulement se
 * laisser trouver.
 */
.step-description {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-delete-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: bold;
    font-family: inherit;
    color: #9b8bbd;
    background: transparent;
    border: 1px solid #c9bfe0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.step-delete-btn:hover {
    color: white;
    background: #e57373;
    border-color: #e57373;
}

.step-delete-btn:focus-visible {
    outline: 2px solid #644a96;
    outline-offset: 2px;
}

/*
 * « REMPLACER LE MEMBRE DE GAUCHE PAR : »
 *
 * Sous la liste des étapes, parce que ce champ porte sur l'expression
 * affichée au-dessus de lui. Il ne défile PAS avec elle : on y frappe
 * Entrée en boucle (une fraction continue, c'est un cran par frappe),
 * il doit rester sous la main. Le `flex-shrink: 0` tient cette
 * promesse quand la liste s'allonge.
 *
 * Le trait au-dessus le sépare des étapes : ce n'est pas une étape,
 * c'est ce qui en fabrique la suivante.
 */
#remplacer-bloc {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

#remplacer-bloc label {
    color: #644a96;
    font-weight: bold;
    font-size: 1.05rem;
    white-space: nowrap;
}

#remplacer-input {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: left;
    font-weight: normal;
}

/*
 * LA FENÊTRE DES SUITES.
 *
 * Un panneau DANS la page, pas une fenêtre du navigateur : ce qu'on y
 * définit doit rester lisible à côté du calcul qu'il sert. Posé en bas
 * à gauche, là où rien d'autre ne vit.
 */
#suites-panneau {
    display: none;
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 40;
    width: 330px;
    /* Quatre suites tiennent, mais pas sur un écran bas : le panneau
       défile plutôt que de sortir de la fenêtre. */
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 14px 16px 16px;
    background: white;
    border: 2px solid #644a96;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,.25);
    font-size: .9rem;
}

.suites-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #644a96;
    font-weight: bold;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.suites-fermer {
    width: 24px; height: 24px; padding: 0;
    line-height: 1; font-size: 1.1rem; font-family: inherit;
    color: #9b8bbd; background: transparent;
    border: 1px solid #c9bfe0; border-radius: 50%;
    cursor: pointer;
}
.suites-fermer:hover { color: white; background: #e57373; border-color: #e57373; }

.suites-aide {
    color: #777;
    font-size: .75rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.suites-ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.suites-nom {
    width: 18px;
    color: #644a96;
    font-weight: bold;
    font-style: italic;
    font-size: 1.1rem;
}

.suites-ligne label {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #9b8bbd;
    font-size: .72rem;
}

.suites-ligne input {
    width: 100%;
    padding: 5px 7px;
    border: 2px solid #ced4da;
    border-radius: 4px;
    font-family: inherit;
    font-size: .9rem;
}
.suites-ligne input:focus {
    outline: none;
    border-color: #644a96;
    background-color: #fffacd;
}

/* Le bouton Suites, dans la colonne des opérations sous « x = » :
   violet comme le panneau qu'il ouvre, et sur toute la largeur de
   sa ligne. */
.suites-btn-colonne {
    flex: 1;
    background: #644a96;
    color: white;
    font-weight: bold;
    font-family: inherit;
    border: none;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
}
.suites-btn-colonne:hover { background: #5a4085; }

/* Le bouton Plot de chaque suite : un cran de la toile d'araignée
   par clic. Même jaune que le Plot de la colonne des contrôles. */
.suites-plot {
    align-self: flex-end;
    padding: 5px 9px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: bold;
    color: #333;
    background: #FFC107;
    border: 2px solid #FF8F00;
    border-radius: 4px;
    cursor: pointer;
}
.suites-plot:hover { background: #FFD54F; }

/* Les premiers termes, sous la définition : on voit ce qu'on écrit. */
.suites-apercu {
    margin: 4px 0 2px 26px;
    min-height: 1.1em;
    color: #2e7d32;
    font-size: .8rem;
}
.suites-apercu.suites-refus { color: #e57373; }
    


/* ======================================================================
   sobre.css — la palette, la police, les exposants (voir son en-tête)
   ====================================================================== */

/*
 * SOBRE.CSS — la version « calculatrice pro » de la calculatrice.
 *
 * Chargée EN DERNIER par calculatrice.html, après styles.css, assets.css et
 * le <style> de la page. Elle ne redéfinit que des COULEURS (et les ombres
 * qui vont avec) : pas une dimension, pas une marge, pas une police — la mise
 * en page reste celle de la version d'origine, ce qui compte, parce que
 * plusieurs alignements sont mesurés en JavaScript.
 *
 * Les `!important` ne sont pas de la paresse : resolution.js écrit des
 * couleurs EN LIGNE sur plusieurs boutons (DEG / RAD, Plot, Forme décimale,
 * Masquer résultats, le titre), et seule une règle !important passe devant
 * un attribut style. Ces boutons sont visés par leur id.
 *
 * La fenêtre graphique est un document à part (document.write) : cette
 * feuille ne l'atteint pas. Sa palette est dans resolution.js,
 * setupPlotWindow — même famille de gris, mêmes accents.
 *
 * Palette : des gris (fond, cadres, en-têtes) et QUATRE accents désaturés,
 * un par famille de bouton — bleu pour ce qui informe ou règle, rouge pour
 * ce qui détruit, ambre pour ce qui trace, vert pour l'écriture. Rien de
 * saturé : « un peu de couleurs pour les boutons importants mais pas flashy ».
 */
:root {
    /* LA POLICE (chantier « tous les supports », 1.1 — 2026-09-13). Comic Sans
       n'existe ni sur iOS, ni sur Android, ni sur Mac récent : une pile
       système, chaque support prend la sienne (SF, Segoe UI, Roboto). Un seul
       endroit ; la fenêtre graphique, document à part, a la même pile en dur
       dans resolution.js (setupPlotWindow). */
    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* La taille des exposants et de l'indice de ∛, par rapport à la base
       (MathJax : 70,7 % pour un exposant, 50 % pour l'indice d'une racine ;
       60, 70 puis 80 % demandés le 13/09 pour les deux). */
    --s-taille-indice: 80%;
    /* MathJax place l'indice de ∛ pour un chiffre à 50 % : plus gros, il
       avance sur le radical. On pousse le radical d'autant — (taille − 50 %)
       en em, soit 0,3em pour 80 %, 0,2em pour 70 %. Mesuré dans Chrome le
       2026-09-13 : le 3 retrouve exactement la place que MathJax lui donne. */
    --s-decalage-racine: 0.3em;

    /* La hauteur d'une ligne d'opération (icône + champ : 41 px de champ,
       8 px de marge de chaque côté, 1 px de bord) — et donc, sur bureau, de
       chaque contrôle en face (voir « LES DEUX COLONNES EN FACE »). */
    --s-hauteur-ligne: 59px;

    --s-fond-1:      #eceef1;   /* fond de page, clair */
    --s-fond-2:      #d3d7dd;   /* fond de page, foncé */
    --s-papier:      #ffffff;   /* les cadres */
    --s-papier-doux: #f4f5f7;   /* lignes d'opération, bandeau des phrases */
    --s-bord:        #b9bec7;   /* cadres */
    --s-bord-doux:   #d9dce2;   /* séparateurs */
    --s-encre:       #23272e;   /* texte */
    --s-violet:      #644a96;   /* le violet de la version d'origine */
    --s-jaune:       #d2b50b;   /* le jaune des maths de la version d'origine */
    --s-maths:       var(--s-jaune);   /* la couleur des expressions — à choisir : jaune, violet, encre */
    --s-phrases:     var(--s-encre-douce);   /* les phrases d'étapes et « Remplacer… » — gris (le violet a été essayé et annulé le 17/09) */
    --s-encre-douce: #5b6270;   /* titres de colonnes, phrases d'étapes */
    --s-encre-pale:  #8a919c;   /* aides, placeholders */

    --s-bleu:        #4b6ea9;   /* Guide, DEG / RAD, focus des champs */
    --s-bleu-fonce:  #3d5b8f;
    --s-rouge:       #b0413e;   /* Reset, Undo, erreurs */
    --s-rouge-fonce: #93312f;
    --s-ambre:       #ecbb3f;   /* Plot — rapproché du jaune d'origine (#FFC107) le 13/09 */
    --s-ambre-fonce: #d29f22;
    --s-vert:        #4f8a5b;   /* Forme décimale / fractionnaire, aperçus */
    --s-vert-fonce:  #3f7249;
    --s-vert-guide:  #5a9e63;   /* Guide — vert, moins pomme que l'origine (#4CAF50) */
    --s-vert-guide-fonce: #47844f;
    --s-ardoise:     #5f6b7d;   /* Suites, Masquer résultats : des réglages, en gris bleuté */
    --s-ardoise-fonce:#4c576a;

    --s-bouton-1:    #f7f8fa;   /* bouton neutre, haut du dégradé */
    --s-bouton-2:    #dfe2e7;   /* bouton neutre, bas du dégradé */

    --s-bandeau-1:   #e3e6ea;   /* le bandeau du haut, dégradé */
    --s-bandeau-2:   #cfd3d9;
    --s-champ-focus: #fbfcfe;   /* fond d'un champ qui a le focus */
}

/* ---------- le mode sombre (chantier « tous les supports », 5.3) ----------
   Suit le réglage du système (prefers-color-scheme) : rien à cliquer. Les
   mêmes jetons, réglés pour un fond sombre : papier gris-bleu foncé, encre
   claire, accents un peu plus clairs pour garder le contraste sur le foncé.
   Le jaune des maths et l'ambre de Plot restent, ils portent bien sur le
   sombre. La fenêtre graphique et le guide, documents à part, restent
   clairs. */
@media (prefers-color-scheme: dark) {
    :root {
        --s-fond-1:      #1c1f24;
        --s-fond-2:      #121417;
        --s-papier:      #262a31;
        --s-papier-doux: #2f343c;
        --s-bord:        #4d5561;
        --s-bord-doux:   #3b424c;
        --s-encre:       #e8eaee;
        --s-violet:      #b39ddb;
        --s-jaune:       #e9c93c;
        --s-encre-douce: #b8bec8;
        --s-encre-pale:  #8b929d;

        --s-bleu:        #7d9fd8;
        --s-bleu-fonce:  #6a8bc4;
        --s-rouge:       #d4645f;
        --s-rouge-fonce: #b94e4a;
        --s-ambre:       #e6b84a;
        --s-ambre-fonce: #cf9f2d;
        --s-vert:        #6aa877;
        --s-vert-fonce:  #578f63;
        --s-vert-guide:  #6fb07a;
        --s-vert-guide-fonce: #5b9865;
        --s-ardoise:     #7c8a9e;
        --s-ardoise-fonce:#67758a;

        --s-bouton-1:    #3d434c;
        --s-bouton-2:    #2c3138;

        --s-bandeau-1:   #343a43;
        --s-bandeau-2:   #272c33;
        --s-champ-focus: #2c3139;
    }
    :root { color-scheme: dark; }
}

/* ---------- la police ---------- */
/* styles.css la déclare en !important sur body et sur chaque famille de
   bouton : même sélecteur, même !important, déclaré après — c'est cette
   feuille qui gagne. Pas de `*` : MathJax (mjx-container) et le code
   (monospace) gardent leur police. */
body, button, input, select, textarea,
.menu-button, .start-button, .config-small-button, .control-btn,
.success-btn, #save-record-btn, .reset-btn-top, .menu-btn-top, .validate-btn,
.development-layout .game-controls .control-btn,
#plot-btn {
    font-family: var(--police) !important;
}

/* ---------- l'indice de la racine cubique ---------- */
/* `styles.css` impose `mjx-container * { font-size: inherit !important }`
   pour tenir les fractions à taille constante. Effet de bord : l'indice de
   $\sqrt[3]{x}$, que MathJax met à 50 % (`size="ss"`), sort à 100 % — et
   comme sa boîte (`mjx-root`, largeur 0) et son décalage (`padding-left`,
   en em de l'indice) sont calculés pour un chiffre à 50 %, le 3 déborde sur
   le radical et monte trop haut. Ici on rend SES 50 % à l'indice seul : même
   !important, sélecteur plus spécifique, donc gagnant — sans toucher aux
   exposants ni aux fractions. La tentative du 2026-09-11 visait
   `mjx-mroot > mjx-script` : cet élément n'existe pas, l'indice est dans
   `mjx-root` (vérifié en faisant tourner MathJax 3.2.2 sous Node). */
mjx-container mjx-mroot > mjx-root > [size="ss"],
mjx-container mjx-mroot > mjx-root > [size="s"] { font-size: var(--s-taille-indice) !important; }
mjx-container mjx-mroot > mjx-root { margin-right: var(--s-decalage-racine); }

/* ---------- les exposants ---------- */
/* Même mécanisme, même raison. L'exposant vit dans `mjx-script` (sous
   `mjx-msup`, `mjx-msubsup`), à `size="s"` (70,7 %) chez MathJax ; le
   sélecteur ne vise que les scripts : les numérateurs et dénominateurs
   (`mjx-num`, `mjx-den`) ne sont pas touchés et gardent leur taille. Une
   fraction DANS un exposant (x^(1/2)) suit la taille de l'exposant — c'est
   l'écriture normale. */
mjx-container mjx-msup > mjx-script > [size],
mjx-container mjx-msub > mjx-script > [size],
mjx-container mjx-msubsup > mjx-script > [size] { font-size: var(--s-taille-indice) !important; }

/* ---------- la page ---------- */
body {
    background: linear-gradient(135deg, var(--s-fond-1) 0%, var(--s-fond-2) 100%);
    color: var(--s-encre);
}
#game-container, .screen { background-color: var(--s-fond-1); }
#game-container { box-shadow: 0 0 18px rgba(0,0,0,0.18); }

.game-header {
    background: linear-gradient(135deg, var(--s-bandeau-1) 0%, var(--s-bandeau-2) 100%);
    border-bottom: 2px solid var(--s-bord);
}
.game-info, .score-info { color: var(--s-encre); }
#game-title { color: var(--s-encre) !important; }

/* ---------- les cadres ---------- */
.calculation-steps,
.left-operations, .right-operations,
.operation-inputs, .game-controls {
    background: var(--s-papier);
    border-color: var(--s-bord);
}
.calculation-steps h3, .operation-panel h3,
.left-operations h4, .right-operations h4 { color: var(--s-encre-douce); }

/* ---------- les étapes ---------- */
/* Les phrases (« Ajouter u3 », le titre de la liste) : `--s-phrases`, en
   haut du fichier (gris comme « Opérations », ou violet — essayés le 13/09). */
.step-description {
    color: var(--s-phrases);
    background: var(--s-papier-doux);
}
.equation-step { background: var(--s-papier-doux); border-left-color: var(--s-bord); }
.equation-step .step-text { color: var(--s-phrases); }
/* Les maths : la couleur est `--s-maths`, à changer en haut de ce fichier
   (jaune, violet et encre ont été essayés le 13/09). */
.equation-display, .step-expression, .dynamic-expression { color: var(--s-maths); }
.equation-display mjx-container, .equation-display mjx-container mjx-math,
.equation-display mjx-container mjx-math * { color: var(--s-maths) !important; }
.equation-equals, .equals-sign { color: var(--s-encre-douce); }

/* ---------- les champs ---------- */
.operation-row-eq { background: var(--s-papier-doux); border-color: var(--s-bord-doux); }
.equation-input, .operation-input { border-color: var(--s-bord); background: var(--s-papier); color: var(--s-encre); }
.equation-input::placeholder, .operation-input::placeholder { color: var(--s-encre-pale); }
.equation-input:focus, .operation-input:focus, .operation-input.active {
    border-color: var(--s-bleu);
    background-color: var(--s-champ-focus);
    box-shadow: 0 0 0 0.2rem rgba(75, 110, 169, 0.18);
}
.operation-label { color: var(--s-encre-douce); }
/* Le badge « x = » (et les icônes d'opération quand leur PNG manque) :
   assets.css les peint en blanc sur violet. Blanc sur ardoise ici — le
   texte doit rester blanc, le fond fait le contraste. */
.operation-icon, .x-icon { background: var(--s-ardoise); color: white; }

#remplacer-bloc { border-top-color: var(--s-bord-doux); }
#remplacer-bloc label { color: var(--s-phrases); }

/* ---------- les boutons ---------- */
/* Neutre : un dégradé de gris, une bordure, de l'encre. */
.control-btn {
    background: linear-gradient(180deg, var(--s-bouton-1) 0%, var(--s-bouton-2) 100%);
    color: var(--s-encre);
    border-color: var(--s-bord);
}
.control-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.16); }
#undo-btn { background: linear-gradient(180deg, var(--s-bouton-1) 0%, var(--s-bouton-2) 100%); color: var(--s-encre); }

/* Reset : rouge, c'est le seul qui efface tout. */
#reset-btn { background: var(--s-rouge); color: white; border-color: var(--s-rouge-fonce); }
#reset-btn:hover { background: var(--s-rouge-fonce); }

/* Guide : vert, moins pomme que le #4CAF50 d'origine (demande du 13/09). */
.functions-btn { background: var(--s-vert-guide) !important; color: white !important; border-color: var(--s-vert-guide-fonce) !important; }
.functions-btn:hover { background: var(--s-vert-guide-fonce) !important; }

/* DEG / RAD : un interrupteur à curseur (17/09). Le rail est bleu (comme le
   Guide : un réglage) quand il est allumé — curseur à droite, RAD — et gris
   éteint — curseur à gauche, DEG. Le libellé du côté choisi est en encre,
   l'autre en pâle. Tout le bouton est cliquable. */
.interrupteur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 4px;
    font-family: var(--police);
    font-size: .8rem;
    font-weight: bold;
    color: var(--s-encre-pale);
    background: var(--s-papier);
    border: 1px solid var(--s-bord);
    border-radius: 5px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.interrupteur:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 1px; }
.interrupteur-rail {
    position: relative;
    flex: none;
    width: 34px;
    height: 18px;
    background: var(--s-bord);
    border-radius: 9px;
    transition: background .2s ease;
}
.interrupteur-curseur {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
}
.interrupteur.allume .interrupteur-rail { background: var(--s-bleu); }
.interrupteur.allume .interrupteur-curseur { transform: translateX(16px); }
.interrupteur.allume .interrupteur-libelle[data-cote="droite"],
.interrupteur:not(.allume) .interrupteur-libelle[data-cote="gauche"] { color: var(--s-encre); }

/* Plot : ambre, l'accent le plus chaud, réservé au tracé. */
#plot-btn, .suites-plot {
    background: var(--s-ambre) !important;
    color: var(--s-encre) !important;   /* de l'encre sur du jaune, comme à l'origine */
    border-color: var(--s-ambre-fonce) !important;
}
#plot-btn:hover, .suites-plot:hover { background: var(--s-ambre-fonce) !important; }

/* Suites : ardoise, comme le panneau qu'il ouvre. */
.suites-btn-colonne { background: var(--s-ardoise) !important; color: white !important; }
.suites-btn-colonne:hover { background: var(--s-ardoise-fonce) !important; }

/* LES DEUX COLONNES EN FACE (17/09). À gauche, huit lignes d'opérations
   de la même hauteur, espacées de 4 px ; à droite, huit contrôles (Guide,
   plein écran, Reset, Annuler, DEG / RAD, DEC, Masquer, ENTRÉE). Sur bureau,
   la colonne des contrôles prend exactement la grille de gauche : une case
   par ligne, de la même hauteur, avec le même espacement ; chaque contrôle
   garde SA taille et se centre dans sa case. Les deux colonnes glissent
   ensemble (calerOperations). Sur tablette et téléphone, les blocs sont
   empilés : rien à aligner. */
@media (min-width: 901px) {
    .operation-column { gap: 4px; }
    .operation-row-eq { min-height: var(--s-hauteur-ligne); }
    .calculator-controls-container {
        display: grid;
        grid-auto-rows: var(--s-hauteur-ligne);
        row-gap: 4px;
        align-items: center;
        padding: 0;
    }
}

/* L'interrupteur DEC, dans la colonne des contrôles (à la place de Plot,
   17/09), et le nombre de décimales à côté quand il est allumé. Il a
   l'aspect de ceux du panneau Suites (.suites-dec, plus bas), à la hauteur
   d'un champ. Plot, lui, est sous Suites, sur toute la largeur de sa ligne. */
.forme-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.plot-row #plot-btn { flex: 1; padding-left: 4px; padding-right: 4px; white-space: nowrap; }   /* « Plot (x ; ans) » sur une ligne dans la colonne */
.forme-row #decimal-value-btn { min-height: 30px; padding: 2px 8px; font-size: .85rem; }
#zone-etat { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
#decimal-places-container { flex: 1 1 auto; min-width: 0; }
#decimal-places-input {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 4px;
    border: 1px solid var(--s-bord);
    border-radius: 4px;
    font-family: inherit;
    font-size: .9rem;
    text-align: center;
    background: var(--s-papier);
    color: var(--s-encre);
}

/* Masquer / Afficher résultats : le fond dit l'état, et c'est resolution.js
   qui l'écrit (ardoise = résultats montrés, bleu = cachés) — pas de
   !important sur le fond, donc, seulement sur le reste. */
#toggle-results-btn { color: white !important; border-color: var(--s-ardoise-fonce) !important; }

/* ENTRÉE : son orange est écrit en ligne par resolution.js, d'où le
   !important. Orange pâle (demande du 13/09 : ni l'orange vif d'origine, ni
   le gris) — de l'encre dessus, pas du blanc, pour rester lisible. */
#validate-btn {
    background: linear-gradient(180deg, #f7a94a 0%, #e8861f 100%) !important;
    color: white !important;
    border-color: #c46f12 !important;
}
/* ENTRÉE et Masquer résultats vivent dans la colonne des contrôles, sous
   Plot (rangerBoutonsDansControles) : même gabarit que les autres boutons. */
.calculator-controls-container #validate-btn,
.calculator-controls-container #toggle-results-btn {
    width: 100%;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 5px !important;
    border-width: 2px !important;
    box-shadow: none !important;
    white-space: normal !important;
    line-height: 1.2;
}
#validate-btn:hover { background: linear-gradient(180deg, #f1cfa3 0%, #e2b276 100%) !important; }
/* ENTRÉE en plein écran : plus gros — lui seul (demande du 17/09). Il reste
   centré dans sa case de la grille, en face de sa ligne d'opération. */
:fullscreen .calculator-controls-container #validate-btn,
#game-container.fullscreen-mode .calculator-controls-container #validate-btn {
    font-size: 1.2rem !important;
    padding: 12px 16px !important;
}
/* Menu : masqué ici, coloré quand même. */
#back-menu-btn { background-color: var(--s-ardoise); }

/* ---------- les erreurs ---------- */
.message-erreur { color: var(--s-rouge); }
.suites-apercu.suites-refus { color: var(--s-rouge); }

/* Le bouton qui retire une ligne : gris au repos, rouge sous la souris. */
.step-delete-btn { color: var(--s-encre-pale); border-color: var(--s-bord); }
.step-delete-btn:hover { color: white; background: var(--s-rouge); border-color: var(--s-rouge); }
.step-delete-btn:focus-visible { outline-color: var(--s-bleu); }

/* ---------- le panneau des suites ---------- */
#suites-panneau { background: var(--s-papier); color: var(--s-encre); border-color: var(--s-ardoise); box-shadow: 0 6px 22px rgba(0,0,0,.2); }
.suites-ligne input { background: var(--s-papier); color: var(--s-encre); }
.suites-entete, .suites-nom { color: var(--s-ardoise-fonce); }
.suites-fermer { color: var(--s-encre-pale); border-color: var(--s-bord); }
.suites-fermer:hover { color: white; background: var(--s-rouge); border-color: var(--s-rouge); }
.suites-aide { color: var(--s-encre-pale); }
.suites-ligne label { color: var(--s-encre-douce); }
.suites-ligne input { border-color: var(--s-bord); }
.suites-ligne input:focus { border-color: var(--s-bleu); background-color: var(--s-champ-focus); }
.suites-apercu { color: var(--s-vert-fonce); }

/* ---------- le graphique en panneau (tactile, < 900 px — chantier 4.1) ----------
   Un <iframe srcdoc> plein écran, avec une barre pour revenir au calcul.
   Le contenu (le gabarit) a son propre CSS ; ici, seulement l'enveloppe. */
#plot-panneau {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: var(--s-fond-1);
    padding-top: env(safe-area-inset-top, 0px);
}
.plot-panneau-barre {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: var(--s-ardoise);
}
.plot-panneau-retour, .plot-panneau-fermer {
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 8px;
    padding: 8px 14px;
    min-height: 44px;
    cursor: pointer;
}
.plot-panneau-fermer { border-color: transparent; font-weight: normal; }
.plot-panneau-cadre { flex: 1; width: 100%; border: 0; background: white; }
body.plot-panneau-ouvert { overflow: hidden; }

/* LE GLYPHE % (16/09). MathJax dessine le % de Computer Modern, dont la barre
   porte un crochet en haut — « une espèce de virgule disgracieuse ». CHTML
   rend chaque caractère par un ::before dont la classe est son code
   (mjx-c25 = %) : on lui donne la police de la page, et le % redevient
   classique. Le LaTeX n'est pas touché. */
mjx-container mjx-c.mjx-c25::before { font-family: var(--police), sans-serif; }

/* DEC (14/09) : un petit interrupteur à gauche de l'aperçu, à la taille de
   l'aperçu. Éteint : gris, cadre fin. Allumé : vert plein, comme la Forme. */
.suites-apercu-ligne { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px 26px; }
.suites-apercu-ligne .suites-apercu { margin: 0; flex: 1; min-width: 0; }
.suites-dec {
    flex: none;
    font-family: inherit;
    font-size: .8rem;
    font-weight: bold;
    line-height: 1.1;
    padding: 1px 5px;
    color: var(--s-encre-pale);
    background: transparent;
    border: 1px solid var(--s-bord);
    border-radius: 3px;
    cursor: pointer;
}
.suites-dec:hover { color: var(--s-encre); border-color: var(--s-encre-pale); }
.suites-dec.allume { color: white; background: var(--s-vert); border-color: var(--s-vert-fonce); }
.suites-dec.allume:hover { background: var(--s-vert-fonce); }
.suites-dec:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 1px; }

/* ---------- les notifications du moteur de jeu ---------- */
.notification { background: var(--s-ardoise); color: white; }
.notification.error { background: var(--s-rouge); }
.notification.success { background: var(--s-vert); }
.notification.warning { background: var(--s-ardoise); }
.notification.black { background: var(--s-encre); }

/* ---------- le mode jeu, jamais montré ici, mais coloré pareil ---------- */
.menu-container h1, .config-container h2, .config-explanation, .input-group label { color: var(--s-encre-douce); }
.menu-button { background: linear-gradient(135deg, var(--s-bouton-1) 0%, var(--s-bouton-2) 100%); border-color: var(--s-bord); color: var(--s-encre); }
.config-input { border-color: var(--s-bord); background-color: var(--s-papier); }
.start-button, .success-btn, #save-record-btn { background: var(--s-vert); border-color: var(--s-vert-fonce); }
.solution-input, .direct-solution { background: var(--s-papier-doux) !important; border-color: var(--s-bord) !important; box-shadow: none !important; }
.solution-label { color: var(--s-encre-douce); }
.equation-input[data-operation="solve"] { border-color: var(--s-bord) !important; background: var(--s-papier) !important; color: var(--s-encre) !important; }
.success-message-area { background: rgba(95, 107, 125, 0.5); border-color: rgba(75, 87, 106, 0.5); }






/* ======================================================================
   RESPONSIVE — écrit à la main pour le chantier « tous les supports »
   (CHANTIER-SUPPORTS.md, 1.1 à 1.7), 2026-09-13.

   Les règles du jeu pour les petits écrans (1020 / 768 / 480 / 320 px,
   iPad, pointer: coarse) ont été retirées : elles visaient les écrans du
   jeu et cassaient la calculatrice (les lignes d'opération vidées à 768 px).

   Trois paliers :
     > 1020 px  le cadre de 1000 px, centré — la mise en page d'origine ;
     ≤ 1020 px  le cadre prend toute la largeur, trois colonnes encore ;
     ≤ 900 px   une seule colonne : la liste des étapes d'abord, puis les
                opérations en grille, puis les contrôles en barre ;
     ≤ 600 px   téléphone : le panneau Suites en feuille, « Remplacer » sur
                deux lignes, textes réduits par clamp().
   Le calage des colonnes sur les phrases (calerOperations, margin-top
   écrit en ligne) n'a de sens qu'en trois colonnes : annulé en dessous.
   ====================================================================== */

html {
    -webkit-text-size-adjust: 100%;   /* Safari paysage ne grossit pas le texte de lui-même */
}

#game-container {
    width: 100%;
    max-width: 1000px;
}
/* En plein écran, le JS écrit `width: 100vw` en ligne : le plafond de
   1000 px ne doit pas le brider (le plein écran « ne marchait plus », 13/09). */
:fullscreen #game-container, #game-container.fullscreen-mode { max-width: none !important; }

/* Les expressions longues (une fraction continue…) : la liste défile en
   largeur plutôt que de déborder du cadre. */
#calculation-list {
    overflow-x: auto;
}

/* Sous 900 px, c'est CHAQUE LIGNE qui défile, pas la liste : un résultat à
   30 décimales sur 360 px se lit en la faisant glisser, sans emporter les
   phrases et les autres lignes avec lui (vu sur le banc, 16/09). */
@media (max-width: 900px) {
    .calculation-step.equation-step { overflow-x: auto; overflow-y: hidden; }
}

@media (max-width: 1020px) {
    body { padding: 0; }
    #game-container {
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        border: none;
        box-shadow: none;
    }
    .game-header { padding: 10px 16px; font-size: 1.1rem; }
    .game-content { padding: 10px !important; }
    .equation-learning-layout { padding: 10px; gap: 10px; }
}

@media (max-width: 900px) {
    /* Une colonne : la liste d'abord. */
    .equation-learning-layout {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .game-content { height: auto !important; }
    .equation-learning-layout { flex: 0 0 auto; }
    .calculation-steps  { order: 1; max-height: 52dvh; min-height: 240px; }
    .left-operations    { order: 2; }
    .right-operations   { order: 3; }

    /* 16 px minimum dans tout champ : en dessous, Safari iOS zoome la page
       à chaque focus (2.2). */
    input[type="text"], input[type="number"], .suites-ligne input, #decimal-places-input { font-size: 16px !important; }

    /* Plus de calage sur les phrases. */
    .operation-column, .calculator-controls-container { margin-top: 0 !important; }

    /* Les opérations en grille, les champs élastiques. */
    .operation-column {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 6px;
    }
    .operation-row-eq .equation-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0;
    }
    .suites-row, .plot-row { grid-column: 1 / -1; }
    .left-operations h4, .right-operations h4 { margin-bottom: 4px; }

    /* Les contrôles en barre. */
    .calculator-controls-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
    }
    .interrupteur, .forme-row { width: auto; }

    /* La barre du bas passe sur deux lignes si besoin ; ENTRÉE rentre dans
       le rang (il est posé en absolu au centre sur bureau). */
    .bottom-controls-row { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 6px 10px; box-sizing: border-box; }

    #validate-btn { position: static !important; transform: none !important; order: 2; }
    #toggle-results-btn { order: 3; }
}

@media (max-width: 600px) {
    .game-header { font-size: 1rem; }
    .equation-display { font-size: clamp(1.1rem, 4.6vw, 1.6rem) !important; }
    .step-description { font-size: clamp(1rem, 3.8vw, 1.3rem); }
    .equation-step { padding: 8px; }
    .calculation-steps { padding: 12px; }

    #remplacer-bloc { flex-wrap: wrap; }
    #remplacer-bloc label { font-size: .95rem; }
    #remplacer-input { flex: 1 1 100%; }

    /* Le panneau Suites : une feuille qui monte du bas. */
    #suites-panneau {
        left: 0; right: 0; bottom: 0;
        width: auto;
        max-height: 75dvh;
        border-radius: 12px 12px 0 0;
        border-width: 2px 0 0;
    }

    .bottom-controls-row { padding: 6px 0; }
}

/* ---------- le tactile (CHANTIER-SUPPORTS.md, 3.1 à 3.4) ---------- */

/* Le panneau Suites se déplace par son en-tête (pointer*) : sans ceci, le
   doigt fait défiler la page au lieu de déplacer le panneau. */
.suites-entete { touch-action: none; }

@media (pointer: coarse) {
    /* Des zones de toucher d'au moins 40–44 px : les boutons, les croix. */
    .control-btn, .suites-plot, #toggle-results-btn { min-height: 44px; }
    .step-delete-btn { width: 32px; height: 32px; font-size: 1.15rem; }
    .suites-fermer   { width: 36px; height: 36px; font-size: 1.3rem; }
    .suites-dec      { min-height: 32px; min-width: 44px; }
    .equation-input, .suites-ligne input { min-height: 44px; }
}

@media (hover: none) {
    /* Pas de survol au doigt : ce qui ne se colorait qu'au survol se montre
       d'emblée — la croix qui retire une ligne, la fermeture du panneau. */
    .step-delete-btn, .suites-fermer { color: var(--s-rouge); border-color: var(--s-rouge); }
}

/* Le bouton plein écran : son symbole ⛶ était trop petit pour se lire ;
   plus gros, sans changer la hauteur du bouton (demande du 13/09). */
#fullscreen-btn { font-size: 1.45rem !important; line-height: 1; padding-top: 6px !important; padding-bottom: 6px !important; min-height: 40px; }