/* ============================================================
   entrainement.css — l'habillage du programme d'entraînement
   ============================================================
   Partagé par deux pages : entrainement.html, le programme des
   abonnés, et entrainement-free.html, sa version découverte. Les
   deux montrent EXACTEMENT la même séance — même carte, même
   chronomètre, même écran d'étape. Ce qui les sépare tient dans le
   moteur, pas dans le décor : un abonné garde ses paliers, un
   visiteur non.

   D'où cette feuille commune : un bandeau retouché d'un côté et pas
   de l'autre ferait douter que c'est bien le même produit.
   ============================================================ */

/* ============================================================
   Programme d'entraînement — dix minutes, un exercice de chaque
   ============================================================
   La page emprunte le vocabulaire des pages de jeu : même carte
   blanche (.setup-card), même bouton GO, même charte de niveaux.
   Elle doit se reconnaître comme une page de l'app, pas comme un
   outil rapporté. */

/* style.css ne pose ni gabarit ni marge sur main : chaque page le fait
   chez elle. Sans ça, le titre colle au bord de l'écran. */
main {
    flex: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

.page-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 2.5rem);
    color: #0089D4;
    margin-bottom: 0.4rem;
}

.page-subtitle {
    text-align: center;
    font-size: clamp(0.95rem, 3vw, 1.1rem);
    color: #8b7d6f;
    font-style: italic;
    margin: 0 0 1.4rem;
}

.ecran-entrainement { max-width: 560px; margin: 0 auto; }

/* Retour aux exercices : discret, comme sur les pages de jeu. */
.sl-back { text-align: center; margin-top: 1.5rem; }
.sl-back a { color: #8b7d6f; font-size: 0.88rem; text-decoration: none; font-weight: 700; }
.sl-back a:hover { color: #4a3f31; text-decoration: underline; }

/* ---- Indice et rang ---- */
.ent-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }

.ent-rond {
    width: 84px; height: 84px; border-radius: 50%; flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ent-rond b { font-size: 1.75rem; line-height: 1; font-weight: 900; }
.ent-rond b em { font-size: 0.52rem; font-style: normal; font-weight: 600; opacity: 0.8; }
.ent-rond span { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }

.ent-rang { font-size: 1.25rem; font-weight: 800; margin: 0; }
.ent-sous { margin: 0.2rem 0 0; font-size: 0.82rem; color: #8b7d6f; }
/* Le compte du jour : la coche en vert, le reste en gris. */
.ent-quota b { color: #2E7D32; font-weight: 900; }
#ent-demarrer:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* ---- Les cinq échelles ---- */
.ent-jeux { display: flex; flex-direction: column; gap: 0.55rem; }
.ent-jeu { display: flex; align-items: center; gap: 0.6rem; }
.ent-jeu-nom { width: 86px; flex: none; font-weight: 800; font-size: 0.84rem; color: #4a3f31; }
.ent-jeu-nom small { display: block; font-weight: 400; font-size: 0.62rem; color: #a2957f; letter-spacing: 0.02em; }
.ent-echelle { flex: 1; display: flex; gap: 3px; }
.ent-cran { flex: 1; height: 8px; border-radius: 4px; background: #ece5da; transition: background 0.3s; }
.ent-cran.atteint { background: #0089D4; }
.ent-jeu-palier { width: 104px; flex: none; text-align: right; font-size: 0.7rem; color: #8b7d6f; line-height: 1.25; }

.ent-separateur { border: none; border-top: 1px solid #f0ebe2; margin: 1.1rem 0 0.9rem; }

/* ---- Suivi de progrès ---- */
.ent-courbe {
    display: flex; align-items: flex-end; gap: 3px; height: 62px;
    padding: 0 0.1rem 0.4rem; border-bottom: 1px solid #ece5da; margin-bottom: 0.7rem;
}
.ent-barre { flex: 1; min-width: 5px; border-radius: 3px 3px 0 0; background: #0089D4; }
.ent-barre.creuse { background: #e0d8cb; }

.ent-seance { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0;
              border-top: 1px solid #f5f1ea; font-size: 0.82rem; }
.ent-seance:first-child { border-top: none; }
.ent-seance .date { width: 88px; flex: none; color: #a2957f; font-size: 0.74rem; }
.ent-seance .quoi { flex: 1; color: #6b5c4a; }
.ent-seance .delta { font-weight: 800; font-size: 0.78rem; }
.ent-vide { font-size: 0.84rem; color: #a2957f; margin: 0; }

/* ---- Boutons de la page ---- */
.ent-actions { margin-top: 1.2rem; }
.ent-secondaire {
    display: block; width: 100%; margin-top: 0.6rem; padding: 0.6rem;
    border: none; background: none; font-family: inherit; font-size: 0.78rem;
    color: #a2957f; cursor: pointer; text-decoration: underline;
}
.ent-secondaire:hover { color: #6b5c4a; }

/* ============================================================
   La carte de séance, au premier plan
   ============================================================
   Même figure que le mode jeu des cinq jeux (game-focus.js) :
   bandeau coloré par le rang, titre sur deux lignes, plein écran
   sur téléphone. */

.ent-avant { position: fixed; inset: 0; z-index: 9200;
             background-color: #efe8dc;
             background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)),
                               url('images/fond-sable-protege.webp');
             background-size: auto, 100% auto;
             background-position: center, top center;
             background-repeat: repeat, repeat-y;
             display: flex; align-items: center; justify-content: center; padding: 0; }
.ent-carte { background: #fff; border-radius: 0; width: 100%; max-width: none;
             height: 100%; max-height: none; display: flex; flex-direction: column;
             overflow: hidden; box-shadow: 0 20px 55px rgba(0,0,0,0.35); }

/* La carte prend tout l'écran à toutes les largeurs. C'est l'encadré
   blanc de l'exercice, à l'intérieur, qui se borne — voir la largeur
   maximale posée par entrainement-mode.js. */

.ent-bandeau { display: flex; align-items: center; justify-content: space-between;
               gap: 0.6rem; padding: 0.75rem 1rem; color: #fff; flex: none; }
.ent-bandeau .t { font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
.ent-bandeau .t small { display: block; font-weight: 400; opacity: 0.85; font-size: 0.72rem; margin-top: 2px; }
/* La pastille du joueur se range contre le titre ; le chronomètre est
   poussé à droite, là où l'œil va le chercher. */
.ent-chrono { margin-left: auto; font-size: 1.3rem; font-weight: 900;
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.ent-chrono.presse { color: #ffd2d2; }
.ent-jauge { height: 4px; background: rgba(255,255,255,0.28); flex: none; }
.ent-jauge span { display: block; height: 100%; background: #fff; transition: width 1s linear; }

.ent-points { display: flex; gap: 0.35rem; justify-content: center; padding: 0.55rem 0 0.25rem; flex: none; }
.ent-point { width: 8px; height: 8px; border-radius: 50%; background: #e0d8cb; transition: all 0.2s; }
.ent-point.fait { background: #4CAF50; }
.ent-point.rate { background: #e57373; }
.ent-point.passe { background: #cbbfae; }
.ent-point.en-cours { background: #0089D4; transform: scale(1.4); }

.ent-scene { flex: 1; min-height: 0; position: relative; }
/* Le voile « Bravo ! » de la découverte : par-dessus l'exercice fini,
   translucide pour qu'on le voie encore, parti en un souffle. */
.ent-bravo {
    position: absolute; inset: 0; z-index: 8;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
    background: rgba(0, 137, 212, 0.55); color: #fff;
    font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 900; letter-spacing: 0.01em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    animation: ent-bravo-entre 0.25s ease-out; transition: opacity 0.3s ease;
}
.ent-bravo-neutre { background: rgba(74, 63, 49, 0.5); font-size: clamp(1.4rem, 6vw, 2.2rem); }
.ent-bravo.part { opacity: 0; }
@keyframes ent-bravo-entre { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ent-bravo { animation: none; } }
.ent-cadre { width: 100%; height: 100%; border: none; display: block; }
.ent-attente { position: absolute; inset: 0; display: flex; align-items: center;
               justify-content: center; color: #a2957f; font-size: 0.9rem; background: #fff; }

.ent-pied { flex: none; display: flex; gap: 0.45rem; justify-content: center;
            padding: 0.6rem 0.8rem 0.75rem; border-top: 1px solid #f0ebe2; }
.ent-pied button { padding: 0.55rem 1rem; border-radius: 50px; border: 2px solid #e0d8cb;
                   background: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700;
                   color: #6b5c4a; cursor: pointer; min-height: 40px; }
.ent-pied button:hover { border-color: #b9a88f; }
/* Pendant l'écran d'étape, « Passer » et « Quitter » porteraient sur
   l'exercice suivant, qui n'a pas encore commencé. Ils se taisent — et
   doivent le montrer, sinon on croit l'app bloquée. */
.ent-pied button:disabled { opacity: 0.4; cursor: default; }
.ent-pied button:disabled:hover { border-color: #e0d8cb; }
/* Les règles ne sont pas une sortie de secours : elles se distinguent
   des deux boutons qui interrompent l'exercice. */
.ent-pied-regles { border-color: #FFD700 !important; background: #fffbe6 !important; color: #6b5300 !important; }
.ent-pied-regles:hover { border-color: #E8A33D !important; }

/* ---- Bilan et ressenti ---- */
/* margin: auto, pas 0 auto : dans la carte en colonne, un bilan plus court
   que l'écran se pose au milieu au lieu de laisser tout le blanc en bas. */
.ent-bilan { padding: 1.2rem 1.3rem 1.4rem; overflow-y: auto;
             width: 100%; max-width: 620px; margin: auto; }

/* L'offre du bilan gratuit : une ligne qui se clique, sous le bouton. */
.ent-libre-lien {
    display: block; margin-top: 0.8rem; text-align: center;
    font-size: 0.82rem; font-weight: 700; color: #B21553;
    text-decoration: underline; text-underline-offset: 3px;
}
.ent-libre-lien:hover { color: #8e1042; }
.ent-ligne { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0;
             border-top: 1px solid #f0ebe2; font-size: 0.9rem; }
.ent-ligne:first-child { border-top: none; }
.ent-ligne .n { flex: 1; text-align: left; font-weight: 700; color: #4a3f31; }
.ent-ligne .t { color: #a2957f; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.ent-ligne .m { font-weight: 800; font-size: 0.8rem; white-space: nowrap; }
.monte { color: #2e7d32; } .descend { color: #c0392b; } .stable { color: #a2957f; }

.ent-question { margin: 1.2rem 0 0.15rem; font-weight: 800; font-size: 1rem; color: #4a3f31; }
.ent-note { font-size: 0.82rem; color: #8b7d6f; line-height: 1.5; margin: 0; }

/* ---- Le ressenti ----
   C'est la seule chose qu'on demande au joueur, et elle règle toute la
   séance suivante : elle ne peut pas ressembler à une liste de cases à
   cocher en bas de page. Un panneau à soi, une échelle de cinq tuiles
   qui va du bleu (trop facile) au framboise (trop dur), et le vert au
   milieu — on lit la gradation avant même de lire les mots. */
.ent-demande {
    margin-top: 1.2rem;
    padding: 1rem 0.9rem 1.1rem;
    border-radius: 18px;
    background: linear-gradient(160deg, #fffdf8 0%, #f7f1e6 100%);
    border: 1px solid #ece3d4;
    box-shadow: inset 0 1px 0 #fff;
}
.ent-demande-titre {
    margin: 0; text-align: center; font-size: 1.02rem; font-weight: 900; color: #4a3f31;
}

.ent-ressenti {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem; margin-top: 0.85rem;
}
.ent-ressenti button {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0.3rem; padding: 0.7rem 0.2rem 0.6rem;
    border-radius: 14px; background: #fff;
    border: 2px solid #e8e0d2;
    border-color: color-mix(in srgb, var(--c) 40%, #ece4d6);
    color: #6b5c4a;
    color: color-mix(in srgb, var(--c) 72%, #4a3f31);
    font-family: inherit; cursor: pointer;
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.ent-ressenti button b {
    font-size: 1.75rem; line-height: 1;
    transition: transform 0.16s;
}
.ent-ressenti button span {
    font-size: 0.62rem; font-weight: 800; line-height: 1.2; text-align: center;
    letter-spacing: -0.01em;
}

/* Chaque marche a sa couleur : la même charte que les niveaux. */
.ent-ressenti button[data-c="tres-facile"] { --c: #0089D4; }
.ent-ressenti button[data-c="facile"]      { --c: #35A7A0; }
.ent-ressenti button[data-c="bien"]        { --c: #4CAF50; }
.ent-ressenti button[data-c="difficile"]   { --c: #E8A33D; }
.ent-ressenti button[data-c="tres-dur"]    { --c: #c2185b; }

.ent-ressenti button:hover,
.ent-ressenti button:focus-visible {
    border-color: var(--c); color: var(--c);
    background: #fff;
    background: color-mix(in srgb, var(--c) 7%, #fff);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 22%, transparent);
    outline: none;
}
.ent-ressenti button:hover b,
.ent-ressenti button:focus-visible b { transform: scale(1.14); }
.ent-ressenti button:active { transform: translateY(-1px); }

/* Une respiration lente sur le panneau : elle attire l'œil sans
   clignoter, et s'arrête pour qui préfère l'immobilité. */
@keyframes ent-respire {
    0%, 100% { box-shadow: inset 0 1px 0 #fff, 0 0 0 0 rgba(0,137,212,0); }
    50%      { box-shadow: inset 0 1px 0 #fff, 0 0 0 7px rgba(0,137,212,0.07); }
}
.ent-demande { animation: ent-respire 2.8s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
    .ent-demande { animation: none; }
    .ent-ressenti button { transition: none; }
}

/* Pas de passage à deux lignes sous 360 px : les cinq boutons restent sur
   une ligne, c'est l'échelle qui se lit — les mots se serrent. */


/* ---- L'écran d'étape ----
   Entre deux exercices. Il couvre la scène pendant que le jeu suivant
   se charge derrière lui : le temps de lecture est du temps de
   chargement gagné, et le joueur repart avec une bonne nouvelle en
   tête plutôt qu'avec un rectangle vide.

   Il défile si l'écran est court : sur un téléphone posé à
   l'horizontale, le panneau dépasse — mieux vaut pouvoir le faire
   glisser que voir les cinq visages coupés en deux. */
.ent-etape {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    padding: 0.9rem; overflow-y: auto;
    background: radial-gradient(120% 90% at 50% 0%, #fffdf8 0%, #f4eee3 100%);
    animation: ent-etape-entre 0.28s ease-out;
}
@keyframes ent-etape-entre {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.ent-etape-carte { width: 100%; max-width: 430px; margin: auto; text-align: center; }

/* L'ÉCRAN D'ÉTAPE DE L'ABONNÉ : une question, cinq boutons sur une ligne,
   la porte de sortie. Celui du visiteur regarde devant, avec l'exemple des
   règles du jeu : il est dessiné par le jeu lui-même, dans le cadre (voir
   entrainement-mode.js). */
.ent-etape-question {
    margin: 0 0 0.8rem; font-size: 1.15rem; font-weight: 900; color: #4a3f31;
}
/* Cinq boutons, une ligne, quelle que soit la largeur : sur 360 px les
   mots se serrent, mais l'échelle reste lisible d'un coup d'œil. */
.ent-ressenti-ligne { grid-template-columns: repeat(5, 1fr) !important; margin-top: 0; }
.ent-ressenti-ligne button { padding: 0.55rem 0.1rem 0.5rem; }
.ent-ressenti-ligne button span { font-size: 0.58rem; }

.ent-etape-passer {
    margin-top: 0.85rem; padding: 0.5rem 1rem;
    background: none; border: none; border-radius: 50px;
    font-family: inherit; font-size: 0.8rem; font-weight: 700;
    color: #a2957f; cursor: pointer; text-decoration: underline;
    text-underline-offset: 3px;
}
.ent-etape-passer:hover { color: #6b5c4a; }

@media (prefers-reduced-motion: reduce) {
    .ent-etape { animation: none; }
}

/* ---- Bilan : ce que le ressenti a dit, jeu par jeu ---- */
.ent-dit { font-style: normal; margin-left: 0.35rem; font-size: 0.95rem; }
.ent-bilan-note { margin: 0.9rem 0 0.2rem; text-align: center; }

/* Le bouton de fin de séance conclut : il est plein, pas en contour
   comme les « Fermer » qui, eux, ne valident rien. Le sélecteur est
   doublé pour passer devant .ent-fermer-ligne button, plus spécifique
   que ne le serait .ent-terminer seul. */
.ent-fermer-ligne button.ent-terminer {
    border: none;
    background: linear-gradient(145deg, #4CAF50, #2e7d32); color: #fff;
    box-shadow: 0 8px 20px rgba(76,175,80,0.32);
}
.ent-fermer-ligne button.ent-terminer:hover { background: linear-gradient(145deg, #57bd5b, #34903a); }

/* ---- Temps écoulé ----
   Le moment est ingrat : on arrive au bout des dix minutes sans avoir
   fini. L'écran ne doit pas ressembler à une sanction. D'où le rappel
   de ce qui est déjà fait, et deux sorties également honorables — la
   principale étant de continuer, parce que finir vaut mieux
   qu'abandonner, même hors chrono. */
.ent-temps { text-align: center; padding: 0.4rem 0 0; }

.ent-temps-rond {
    width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 0.9rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #a2957f, #8b7d6f);
    color: #fff; box-shadow: 0 6px 20px rgba(139,125,111,0.4);
}
.ent-temps-rond b { font-size: 1.45rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ent-temps-rond span {
    font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
    opacity: 0.85; margin-top: 3px;
}

.ent-temps-titre { margin: 0; font-size: 1.15rem; font-weight: 900; color: #4a3f31; }
.ent-temps-sous { margin: 0.3rem 0 0; font-size: 0.9rem; color: #6b5c4a; }

/* Cinq points : ce qui est fait reste acquis, et se voit. */
.ent-temps-points { display: flex; gap: 0.35rem; justify-content: center; margin: 0.8rem 0 1.2rem; }
.ent-temps-points span {
    width: 9px; height: 9px; border-radius: 50%; background: #e0d8cb;
}
.ent-temps-points span.fait { background: #4CAF50; }

.ent-temps-choix { display: flex; flex-direction: column; gap: 0.5rem; }
.ent-temps-choix button {
    display: block; width: 100%; padding: 0.75rem 1rem;
    border-radius: 14px; font-family: inherit; font-size: 0.95rem; font-weight: 800;
    cursor: pointer; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.ent-temps-choix button small {
    display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.85; margin-top: 2px;
}
.ent-temps-choix .principal {
    border: none; color: #fff;
    background: linear-gradient(145deg, #0089D4, #00699f);
    box-shadow: 0 6px 18px rgba(0,137,212,0.32);
}
.ent-temps-choix .principal:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,137,212,0.4); }
.ent-temps-choix .secondaire {
    border: 2px solid #e0d8cb; background: #fff; color: #6b5c4a;
}
.ent-temps-choix .secondaire:hover { border-color: #8b7d6f; color: #4a3f31; }

.ent-temps-note {
    margin: 1.1rem 0 0; font-size: 0.78rem; color: #a2957f;
    line-height: 1.55; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .ent-temps-choix button { transition: none; }
}

/* Le bouton de fermeture de l'écran « séance non validée » : il n'a
   rien à voir avec l'échelle, il ne partage donc plus sa grille. */
.ent-fermer-ligne { margin-top: 0.9rem; }
.ent-fermer-ligne button {
    width: 100%; padding: 0.72rem 1rem; border-radius: 12px;
    border: 2px solid #0089D4; background: #fff; color: #0089D4;
    font-family: inherit; font-size: 0.92rem; font-weight: 800; cursor: pointer;
}
.ent-fermer-ligne button:hover { background: #f2f9fd; }

/* ---- Confirmation ----
   Deux décisions de cette page sont irréversibles ou coûteuses :
   quitter une séance en cours, et remettre les paliers à zéro. Elles
   méritent mieux qu'une boîte de dialogue du navigateur. */
.ent-confirm {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 380px;
    padding: 1.6rem 1.3rem 1.3rem;
    text-align: center;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}
.ent-confirm h3 { margin: 0 0 0.6rem; font-size: 1.25rem; font-weight: 900; color: #4a3f31; }
.ent-confirm p { margin: 0 0 0.5rem; font-size: 0.88rem; color: #6b5c4a; line-height: 1.5; }
.ent-confirm ul { margin: 0 0 1.1rem; padding-left: 1.1rem; text-align: left;
                  font-size: 0.86rem; color: #6b5c4a; line-height: 1.6; }
.ent-confirm li::marker { color: #c2185b; }
.ent-confirm-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.ent-confirm-actions button {
    padding: 0.8rem 1rem; border-radius: 50px; font-family: inherit;
    font-size: 0.95rem; font-weight: 800; cursor: pointer; min-height: 46px;
}
/* La sortie sans dégât est la plus visible : c'est elle qu'on propose. */
.ent-annuler { background: linear-gradient(145deg, #0089D4, #00699f); color: #fff; border: none; }
.ent-valider { background: #fff; color: #c2185b; border: 2px solid #f0c8d8; }
.ent-valider:hover { border-color: #c2185b; }

/* ---- Un mot à l'équipe ----
   Sous les cinq ressentis : facultatif, et il part avec eux. Le texte
   d'invite est en semi-transparence pour qu'on voie tout de suite
   qu'il s'agit d'une invitation, pas d'un champ déjà rempli. */
.ent-mot { margin-top: 0.9rem; }

.ent-mot textarea {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #e0d8cb;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: #4a3f31;
    line-height: 1.45;
    resize: vertical;
    min-height: 58px;
    background: #fffdf9;
    transition: border-color 0.2s;
}
.ent-mot textarea::placeholder { color: #4a3f31; opacity: 0.38; }
.ent-mot textarea:focus { outline: none; border-color: #0089D4; background: #fff; }

.ent-mot-note {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    color: #8b7d6f;
    line-height: 1.45;
}

@media (max-width: 600px) {
    /* Le plein écran vaut désormais à toutes les largeurs : plus rien
       à faire de particulier ici. */
    .ent-jeu-palier { width: 84px; font-size: 0.65rem; }
    .ent-jeu-nom { width: 76px; font-size: 0.8rem; }
}

/* ============================================================
   La séance découverte — ce que voit un visiteur
   ============================================================
   Tout ce qui précède vaut pour les deux publics. Ne reste ici que ce
   qui n'existe que côté visiteur : la place du ressenti, qu'on ne lui
   demande pas, et le bilan qui remplace celui des paliers. */


/* Le score de la séance : gros, en haut, avant la liste. C'est la seule
   chose que le visiteur emporte — rien n'est enregistré. */
/* Le chemin du retour, au-dessus du score : discret, mais là. */
.ent-libre-accueil {
    display: block; text-align: center; margin: 0 0 0.5rem;
    font-size: 0.85rem; font-weight: 700; color: #0089D4; text-decoration: none;
}
.ent-libre-accueil:hover { text-decoration: underline; }
.ent-libre-score {
    margin: 0.2rem 0 0;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    color: #4a3f31;
}
.ent-libre-score em { font-size: 1.1rem; font-style: normal; color: #a2957f; }
.ent-libre-sous {
    margin: 0.2rem 0 1.1rem;
    text-align: center;
    font-size: 0.86rem;
    color: #8b7d6f;
}

/* L'offre. Elle vient APRÈS les résultats, et elle nomme ce qui manque
   au lieu de le crier : quelqu'un qui vient de jouer dix minutes sait
   déjà ce qu'il a aimé. */
.ent-libre-offre {
    margin-top: 1.3rem;
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(160deg, #fffdf8 0%, #f7f1e6 100%);
    border: 1px solid #ece3d4;
}
.ent-libre-offre-titre {
    margin: 0 0 0.6rem;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    color: #a2957f;
}
.ent-libre-offre ul {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #6b5c4a;
}
.ent-libre-offre li::marker { color: #0089D4; }

.ent-libre-cta {
    display: block;
    text-align: center;
    padding: 0.85rem 1rem;
    border-radius: 50px;
    background: #c2185b;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(194, 24, 91, 0.3);
    transition: background 0.2s, transform 0.2s;
}
.ent-libre-cta:hover { background: #a31545; transform: translateY(-2px); }
.ent-libre-cta small {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.9;
    margin-top: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
    .ent-libre-cta { transition: none; }
}

/* ---- La copie par email, à la fin d'une séance gratuite ----------------
   Sans compte, la séance ne se garde nulle part : cet encadré est la seule
   trace que le visiteur puisse emporter. Il est donc posé APRÈS l'offre
   d'abonnement, mais avant le bouton de sortie — on ne referme pas la
   porte avant d'avoir proposé de laisser quelque chose. */

.ent-copie {
    margin-top: 1.1rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #ded2c0;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ent-copie-titre {
    font-size: 0.92rem;
    font-weight: 700;
    color: #4a3f31;
    line-height: 1.35;
}

.ent-copie-ligne { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ent-copie-ligne input {
    flex: 1 1 11rem;
    min-width: 0;
    font: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 0.8rem;
    border: 2px solid #ded2c0;
    border-radius: 10px;
    background: #fff;
    color: #3f362b;
}

.ent-copie-ligne input:focus-visible { outline: 2px solid #0089D4; outline-offset: 1px; border-color: #0089D4; }

.ent-copie-ligne button {
    flex: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.6rem 1.3rem;
    border: none;
    border-radius: 10px;
    background: #0089D4;
    color: #fff;
    cursor: pointer;
}

.ent-copie-ligne button:disabled { opacity: 0.6; cursor: default; }

.ent-copie-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.83rem;
    color: #6b5c4a;
    line-height: 1.45;
    cursor: pointer;
}

.ent-copie-option input { margin-top: 2px; width: 17px; height: 17px; accent-color: #0089D4; flex: none; }
.ent-copie-option em { font-style: normal; color: #a2957f; }

.ent-copie-mot { margin: 0; font-size: 0.85rem; font-weight: 600; color: #b3261e; }
.ent-copie-mot[hidden] { display: none; }
.ent-copie-ok { color: #2E7D32; text-align: center; }

/* ---- Pendant la séance : rien ne défile, nulle part ---------------------
   La page sous la carte est figée (hauteur de l'écran, pas de débordement,
   pas de rebond iOS) ; la carte prend l'écran, le cadre du jeu s'ajuste
   dedans (entrainement-mode.js). */
html.ent-en-seance, html.ent-en-seance body { height: 100%; overflow: hidden !important; overscroll-behavior: none; }
.ent-avant { touch-action: manipulation; overscroll-behavior: none; }
.ent-carte { overscroll-behavior: contain; }

/* ---- Téléphone en paysage : on demande le portrait ----------------------
   Un téléphone couché n'a pas la hauteur d'un exercice. Le voile couvre la
   carte tant que l'appareil est couché ; une tablette (plus haute) n'est
   pas concernée. */
.ent-tourner { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
    .ent-tourner {
        position: absolute; inset: 0; z-index: 9300; display: flex; flex-direction: column;
        align-items: center; justify-content: center; text-align: center; gap: 0.5rem;
        background: #efe8dc; color: #3f362b; font-size: 1.2rem; font-weight: 800; padding: 1rem;
    }
    .ent-tourner small { display: block; font-size: 0.9rem; font-weight: 500; color: #8b7d6f; }
    .ent-tourner-icone { font-size: 2.2rem; animation: ent-tourne 1.6s ease-in-out infinite; }
    @keyframes ent-tourne { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
    @media (prefers-reduced-motion: reduce) { .ent-tourner-icone { animation: none; } }
}