/* =====================================================================
   Thème sombre, mobile d'abord.

   Aucune dépendance, aucune police distante, aucun CDN. Tout est en
   variables CSS : changer l'identité visuelle du projet se fait en
   modifiant le bloc :root et rien d'autre.

   Contrainte de fond : le PVT impose un fond noir. Un thème sombre
   évite au joueur un passage brutal du clair au noir juste avant un
   test de temps de réaction.
   ===================================================================== */

:root {
    /* Fonds et surfaces */
    --fond:             #0f1113;
    --surface:          #191c1f;
    --surface-haute:    #21262b;
    --bordure:          #2b3137;
    --bordure-forte:    #3d454d;

    /* Texte */
    --texte:            #f1f4f6;
    --texte-doux:       #9aa5ae;
    --texte-faible:     #6b757e;

    /* Accent unique du projet */
    --accent:           #4cc2a4;
    --accent-sombre:    #2f8a72;
    --sur-accent:       #04201a;

    /* Échelle wellness : 1 favorable, 7 défavorable.
       Rappel règle métier : 7 est TOUJOURS le pôle défavorable,
       y compris pour la motivation. */
    --bon:              #4cc2a4;
    --moyen:            #e8b64c;
    --mauvais:          #e5645e;

    /* Rayons */
    --r-s:  8px;
    --r-m: 14px;
    --r-l: 22px;

    /* Espacements */
    --esp-xs:  4px;
    --esp-s:   8px;
    --esp-m:  16px;
    --esp-l:  24px;
    --esp-xl: 40px;

    /* Cible tactile minimale. Ne jamais descendre en dessous. */
    --cible: 48px;

    /* Police système : zéro téléchargement, rendu natif partout */
    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   Remise à zéro minimale
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Empêche iOS d'agrandir le texte en paysage */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-size: 17px;
    line-height: 1.5;

    /* Aucun défilement horizontal, jamais */
    overflow-x: hidden;

    /* Le pouce ne doit pas déclencher de zoom accidentel */
    touch-action: manipulation;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

h1, h2, h3, p {
    margin: 0;
}

/* Aucune interaction au survol : le téléphone n'a pas de curseur.
   Les états visibles sont :active et :focus-visible. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Ossature
   --------------------------------------------------------------------- */

.app {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--esp-m) var(--esp-xl);
    min-height: 100vh;
}

.entete {
    display: flex;
    /* center et non flex-start depuis l'arrivee du logo : un badge de
       40 px cale en haut d'un titre de 26 px pend visiblement. */
    align-items: center;
    gap: var(--esp-m);
    padding: var(--esp-l) 0 var(--esp-m);
}

/* Logo du club, sur un disque blanc.

   VERIFICATION FAITE AU PIXEL, et elle contredit ce qu'on croit voir :
   les parties qui PARAISSENT blanches dans le blason, l'anneau ou vit le
   texte et le fond des bandes, sont en realite TRANSPARENTES. Pose nu sur
   le fond sombre, le blason perd son texte marine sur fond marine et
   devient illisible.

   Le disque est ROND et non carre : il rend au blason le fond pour lequel
   il a ete dessine, sans dessiner un carre derriere un rond. */
.entete__logo {
    flex: none;
    width: 56px;
    height: 56px;
    display: block;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}

/* Occupe la place restante, pour que le selecteur de langue reste colle
   a droite. C'est ce qui remplace l'ancien justify-content. */
.entete__identite {
    flex: 1 1 auto;
    min-width: 0;
}

.entete__titre {
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.entete__sous-titre {
    color: var(--texte-doux);
    font-size: 15px;
    margin-top: var(--esp-xs);
}

/* ---------------------------------------------------------------------
   Sélecteur de langue
   --------------------------------------------------------------------- */

.langue {
    display: flex;
    flex: none;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    overflow: hidden;
}

.langue__choix {
    min-width: 46px;
    min-height: 38px;
    padding: 0 var(--esp-s);
    background: transparent;
    border: 0;
    color: var(--texte-doux);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.langue__choix[aria-pressed="true"] {
    background: var(--accent);
    color: var(--sur-accent);
}

/* ---------------------------------------------------------------------
   Écrans
   --------------------------------------------------------------------- */

.ecran {
    display: none;
}

.ecran.est-actif {
    display: block;
    animation: apparition 0.18s ease-out;
}

@keyframes apparition {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ecran.est-actif { animation: none; }
}

/* ---------------------------------------------------------------------
   Cartes du menu
   --------------------------------------------------------------------- */

.liste-cartes {
    display: flex;
    flex-direction: column;
    gap: var(--esp-m);
    margin-top: var(--esp-m);
}

.carte {
    display: flex;
    align-items: center;
    gap: var(--esp-m);
    width: 100%;
    min-height: 84px;
    padding: var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    color: var(--texte);
    text-align: left;
    cursor: pointer;
}

.carte:active {
    background: var(--surface-haute);
    transform: scale(0.99);
}

.carte[disabled] {
    opacity: 0.45;
    cursor: default;
}

.carte__icone {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--surface-haute);
    border-radius: var(--r-s);
    font-size: 22px;
}

.carte__corps {
    flex: 1 1 auto;
    min-width: 0;
}

.carte__titre {
    font-size: 17px;
    font-weight: 600;
}

.carte__detail {
    color: var(--texte-doux);
    font-size: 14px;
    margin-top: 2px;
}

.carte__fleche {
    flex: none;
    color: var(--texte-faible);
    font-size: 20px;
}

.carte.est-faite .carte__icone {
    background: var(--accent-sombre);
    color: var(--texte);
}

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--cible);
    padding: 0 var(--esp-l);
    border: 0;
    border-radius: var(--r-m);
    background: var(--accent);
    color: var(--sur-accent);
    font-size: 17px;
    font-weight: 650;
    cursor: pointer;
}

.bouton:active {
    background: var(--accent-sombre);
}

.bouton[disabled] {
    background: var(--surface-haute);
    color: var(--texte-faible);
    cursor: default;
}

.bouton--discret {
    background: transparent;
    border: 1px solid var(--bordure-forte);
    color: var(--texte-doux);
    font-weight: 600;
}

.bouton--discret:active {
    background: var(--surface);
}

/* ---------------------------------------------------------------------
   Champs
   --------------------------------------------------------------------- */

.champ {
    display: block;
    margin-bottom: var(--esp-l);
}

.champ__libelle {
    display: block;
    color: var(--texte-doux);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--esp-s);
}

.champ__saisie {
    width: 100%;
    min-height: var(--cible);
    padding: 0 var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    color: var(--texte);

    /* 17px minimum : en dessous, iOS zoome au focus */
    font-size: 17px;
}

.champ__saisie:focus {
    border-color: var(--accent);
}

.champ__saisie--code {
    text-align: center;
    letter-spacing: 0.35em;
    font-size: 22px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Grille de choix (effectif, prénoms)
   --------------------------------------------------------------------- */

.grille-choix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--esp-s);
}

.choix {
    min-height: var(--cible);
    padding: var(--esp-s) var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    color: var(--texte);
    font-size: 16px;
    font-weight: 550;
    cursor: pointer;
}

.choix:active,
.choix[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
}

/* ---------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------- */

.message {
    padding: var(--esp-m);
    border-radius: var(--r-m);
    font-size: 15px;
    margin-bottom: var(--esp-m);
}

.message--erreur {
    background: rgba(229, 100, 94, 0.14);
    border: 1px solid var(--mauvais);
    color: var(--mauvais);
}

.message--info {
    background: var(--surface);
    border: 1px solid var(--bordure);
    color: var(--texte-doux);
}

/* Consigne encadrée par deux panneaux d'attention.
   Sert à la consigne RPE, qui est la phrase la plus facile à survoler du
   questionnaire alors que c'est elle qui détermine ce que le joueur note. */
.message--alerte {
    display: flex;
    align-items: center;
    gap: var(--esp-m);
    background: rgba(232, 182, 76, 0.10);
    border: 1px solid var(--moyen);
    color: var(--texte);
}

.message__panneau {
    flex: none;
    font-size: 20px;
    line-height: 1;
}

.message__texte {
    flex: 1 1 auto;
}

.message[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
   Bandeau de file d'attente

   Visible seulement s'il reste des soumissions à envoyer. C'est la
   promesse faite au joueur : rien ne se perd dans un vestiaire sans
   réseau.
   --------------------------------------------------------------------- */

.bandeau-file {
    display: flex;
    align-items: center;
    gap: var(--esp-s);
    padding: var(--esp-s) var(--esp-m);
    margin-bottom: var(--esp-m);
    background: rgba(232, 182, 76, 0.12);
    border: 1px solid var(--moyen);
    border-radius: var(--r-m);
    color: var(--moyen);
    font-size: 14px;
}

.bandeau-file[hidden] {
    display: none;
}

.pastille {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------------- */

.pied {
    margin-top: var(--esp-xl);
    padding-top: var(--esp-m);
    border-top: 1px solid var(--bordure);
    color: var(--texte-faible);
    font-size: 13px;
    text-align: center;
}

.lien-nu {
    background: none;
    border: 0;
    padding: var(--esp-s);
    color: var(--texte-faible);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Item à curseur, questionnaire du matin

   Le dégradé de la piste va du vert à gauche au rouge à droite, sur les
   CINQ items sans exception. C'est le rappel visuel permanent de la règle
   métier : 7 est toujours le pôle défavorable, y compris pour la
   motivation, dont le sens est contre-intuitif.
   Ne jamais inverser ce dégradé pour un item en particulier.
   --------------------------------------------------------------------- */

.item {
    padding: var(--esp-m) 0 var(--esp-s);
    border-bottom: 1px solid var(--bordure);
}

.item:last-of-type {
    border-bottom: 0;
}

.item__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-m);
    margin-bottom: var(--esp-s);
}

.item__libelle {
    font-size: 17px;
    font-weight: 600;
}

.item__valeur {
    flex: none;
    min-width: 44px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0 var(--esp-s);
    background: var(--surface-haute);
    border-radius: var(--r-s);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.item.est-vierge .item__valeur {
    color: var(--texte-faible);
    font-weight: 500;
}

.item__ancres {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-m);
    margin-top: 2px;
    color: var(--texte-doux);
    font-size: 13px;
}

.item__ancres span:last-child {
    text-align: right;
}

/* --- Le curseur lui-même ------------------------------------------- */

.curseur {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;

    /* La zone tactile fait 44 px de haut même si la piste est fine */
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.curseur:focus {
    outline: none;
}

.curseur:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--accent);
}

.curseur:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--accent);
}

/* Piste, WebKit et Blink */
.curseur::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right,
                var(--bon) 0%, var(--moyen) 50%, var(--mauvais) 100%);
}

/* Piste, Gecko */
.curseur::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right,
                var(--bon) 0%, var(--moyen) 50%, var(--mauvais) 100%);
}

/* Poignée, WebKit et Blink.
   margin-top négatif = (hauteur piste - hauteur poignée) / 2 */
.curseur::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    border: 3px solid var(--fond);
    border-radius: 50%;
    background: var(--texte);
}

/* Poignée, Gecko */
.curseur::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border: 3px solid var(--fond);
    border-radius: 50%;
    background: var(--texte);
}

/* Tant que le joueur n'a pas touché le curseur, la poignée est en
   retrait : on voit d'un coup d'oeil ce qui reste à répondre, et on
   évite qu'une position par défaut passe pour une réponse. */
.item.est-vierge .curseur::-webkit-slider-thumb {
    background: var(--texte-faible);
    border-color: var(--fond);
}

.item.est-vierge .curseur::-moz-range-thumb {
    background: var(--texte-faible);
    border-color: var(--fond);
}

.item.est-vierge .curseur::-webkit-slider-runnable-track {
    opacity: 0.35;
}

.item.est-vierge .curseur::-moz-range-track {
    opacity: 0.35;
}

/* ---------------------------------------------------------------------
   Séances du jour, questionnaire RPE

   L'échelle reste masquée tant que la séance n'est pas cochée : un
   joueur qui n'a fait qu'une séance ne voit qu'une échelle.
   --------------------------------------------------------------------- */

.seance {
    margin-bottom: var(--esp-s);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    overflow: hidden;
}

.seance.est-active {
    border-color: var(--accent-sombre);
}

.seance__bascule {
    display: flex;
    align-items: center;
    gap: var(--esp-m);
    width: 100%;
    min-height: var(--cible);
    padding: var(--esp-s) var(--esp-m);
    background: transparent;
    border: 0;
    color: var(--texte);
    text-align: left;
    cursor: pointer;
}

.seance__coche {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 2px solid var(--bordure-forte);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
}

.seance.est-active .seance__coche {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
}

.seance__nom {
    font-size: 17px;
    font-weight: 550;
}

.seance__detail {
    padding: 0 var(--esp-m) var(--esp-m);
    border-top: 1px solid var(--bordure);
    padding-top: var(--esp-m);
}

.seance__detail[hidden] {
    display: none;
}

.seance__note {
    min-height: 1.4em;
    margin-top: var(--esp-s);
    color: var(--texte-doux);
    font-size: 14px;
    text-align: center;
}

/* Curseur RPE, de 1 à 10 par pas de 0,5.

   Pas de dégradé vert vers rouge ici, contrairement au wellness : un RPE
   élevé n'est pas une mauvaise nouvelle, c'est une séance intense.
   Colorer l'échelle suggérerait qu'il y a une bonne réponse. */
.curseur--rpe::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
                var(--bordure-forte) 0%, var(--accent) 100%);
}

.curseur--rpe::-moz-range-track {
    background: linear-gradient(to right,
                var(--bordure-forte) 0%, var(--accent) 100%);
}

/* Tant que le curseur n'a pas été touché, sa position n'est pas une
   réponse : même convention que le questionnaire du matin. */
.seance__detail.est-vierge .curseur::-webkit-slider-thumb {
    background: var(--texte-faible);
}

.seance__detail.est-vierge .curseur::-moz-range-thumb {
    background: var(--texte-faible);
}

.seance__detail.est-vierge .curseur::-webkit-slider-runnable-track {
    opacity: 0.35;
}

.seance__detail.est-vierge .curseur::-moz-range-track {
    opacity: 0.35;
}

.seance__detail.est-vierge .item__valeur {
    color: var(--texte-faible);
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   Saisie staff : groupes, compteurs

   Le staff saisit au bord d'un terrain, debout, souvent d'une main. Les
   compteurs à deux boutons évitent de sortir le clavier, et rendent
   impossible une valeur négative ou non entière que la base refuserait.
   --------------------------------------------------------------------- */

.sous-titre {
    margin-top: var(--esp-l);
    font-size: 18px;
    font-weight: 650;
}

.bloc {
    margin-top: var(--esp-m);
    padding: var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
}

.paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-s);
}

/* ---------------------------------------------------------------------
   Deplacements : decalage horaire et duree porte a porte
   --------------------------------------------------------------------- */

.decalage {
    margin: var(--esp-m) 0;
    padding: var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
    text-align: center;
}

/* Au-dela de trois heures, le decalage devient un facteur de
   performance a part entiere : on le signale visuellement. */
.decalage.est-notable {
    border-color: var(--moyen);
    background: rgba(232, 182, 76, 0.10);
}

.decalage__libelle {
    color: var(--texte-doux);
    font-size: 14px;
}

.decalage__valeur {
    margin: var(--esp-xs) 0;
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.decalage.est-notable .decalage__valeur {
    color: var(--moyen);
}

.decalage__note {
    color: var(--texte-faible);
    font-size: 13px;
}

.total-trajet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-m);
    margin-top: var(--esp-m);
    padding: var(--esp-m);
    background: var(--surface-haute);
    border-radius: var(--r-m);
}

.total-trajet__libelle {
    color: var(--texte-doux);
    font-size: 15px;
}

.total-trajet__valeur {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Zone de texte libre, blessures */
.champ__saisie--zone {
    min-height: 96px;
    padding: var(--esp-m);
    line-height: 1.5;
    resize: vertical;
}

/* --- Une séance, avec ses groupes ----------------------------------- */

/* Une journée comporte souvent plusieurs séances. Chacune est encadrée :
   sans ça, les groupes de la musculation et ceux du volley seraient des
   frères dans la page, et rien ne montrerait où finit une séance. */
.section-seance {
    margin-top: var(--esp-l);
    padding: var(--esp-m);
    border: 1px solid var(--bordure-forte);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-m);
}

.section-seance__titre {
    margin-bottom: var(--esp-s);
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
}

/* --- Un groupe de joueurs ------------------------------------------ */

.pool {
    margin-top: var(--esp-m);
    padding: var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-m);
}

.pool__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-m);
    margin-bottom: var(--esp-s);
}

.pool__nom {
    font-size: 17px;
    font-weight: 650;
}

.pool__retirer {
    flex: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-s);
    color: var(--texte-doux);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pool__retirer:active {
    background: var(--mauvais);
    border-color: var(--mauvais);
    color: var(--fond);
}

.pool__section {
    margin-top: var(--esp-m);
    padding-top: var(--esp-m);
    border-top: 1px solid var(--bordure);
    font-size: 15px;
    font-weight: 600;
    color: var(--texte-doux);
}

.pool__categorie {
    margin-top: var(--esp-m);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Un joueur déjà placé dans un autre groupe. Grisé et non cliquable :
   le compter deux fois doublerait silencieusement sa charge. */
.choix.est-ailleurs {
    opacity: 0.32;
    cursor: not-allowed;
    text-decoration: line-through;
}

.choix.est-choisi {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
}

/* --- Compteur ------------------------------------------------------- */

.compteur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-m);
    padding: var(--esp-s) 0;
}

.compteur__libelle {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
}

.compteur__boutons {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--esp-s);
}

.compteur__bouton {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--surface-haute);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-s);
    color: var(--texte);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.compteur__bouton:active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
}

.compteur__bouton[disabled] {
    opacity: 0.3;
    cursor: default;
}

.compteur__valeur {
    min-width: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Module embarqué dans un questionnaire

   Sert au test de vigilance en bas du questionnaire du matin. Le bloc se
   distingue des items à curseur sans devenir une page à part : le joueur
   doit comprendre qu'il est toujours dans le même questionnaire.
   --------------------------------------------------------------------- */

.module {
    margin-top: var(--esp-l);
    padding: var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-m);
}

.module.est-fait {
    border-color: var(--accent-sombre);
    background: #15201d;
}

.module__entete {
    display: flex;
    align-items: center;
    gap: var(--esp-m);
    margin-bottom: var(--esp-m);
}

.module__icone {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--surface-haute);
    border-radius: var(--r-s);
    font-size: 22px;
}

.module.est-fait .module__icone {
    background: var(--accent);
    color: var(--sur-accent);
}

.module__corps {
    flex: 1 1 auto;
    min-width: 0;
}

.module__titre {
    font-size: 17px;
    font-weight: 600;
}

.module__detail {
    margin-top: 2px;
    color: var(--texte-doux);
    font-size: 14px;
}

.module__resultat {
    margin-bottom: var(--esp-m);
    text-align: center;
}

.module__resultat-valeur {
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.module__resultat-unite {
    color: var(--texte-doux);
    font-size: 14px;
    font-weight: 500;
}

.module__note {
    margin-top: var(--esp-s);
    color: var(--texte-faible);
    font-size: 13px;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Pied de formulaire collant
   --------------------------------------------------------------------- */

.actions {
    position: sticky;
    bottom: 0;
    padding: var(--esp-m) 0 max(var(--esp-m), env(safe-area-inset-bottom));
    background: linear-gradient(to bottom,
                rgba(15, 17, 19, 0) 0%, var(--fond) 22%);
}

.actions__reste {
    display: block;
    margin-bottom: var(--esp-s);
    color: var(--texte-doux);
    font-size: 14px;
    text-align: center;
}

.actions__reste[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------
   Panneau de confirmation
   --------------------------------------------------------------------- */

.confirmation {
    padding: var(--esp-xl) 0;
    text-align: center;
}

/* Marque du club au pied de l'ecran de confirmation.

   En CSS et non en JavaScript : les CINQ questionnaires construisent un
   panneau .confirmation identique, une regle ici les couvre tous, la ou
   cinq appendChild auraient demande cinq fichiers a maintenir.

   Purement decorative, donc invisible aux lecteurs d'ecran par nature :
   un pseudo-element n'entre pas dans l'arbre d'accessibilite. Attenuee,
   parce qu'elle signe l'ecran sans disputer l'attention au message. */
.confirmation::after {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin: var(--esp-xl) auto 0;
    /* Meme raison qu'en en-tete : les blancs du blason sont transparents.
       Le blason est pose 5 px plus petit que le disque, ce qui laisse un
       mince liseré blanc et detache la marque du fond. */
    background: #fff url("../img/logo-mhscvb.png") center / 47px 47px no-repeat;
    border-radius: 50%;
    opacity: 0.30;
}

.confirmation__marque {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--esp-m);
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--sur-accent);
    border-radius: 50%;
    font-size: 30px;
}

.confirmation__titre {
    font-size: 22px;
    font-weight: 650;
}

.confirmation__detail {
    margin-top: var(--esp-s);
    color: var(--texte-doux);
    font-size: 15px;
}

.score {
    margin: var(--esp-l) 0;
    padding: var(--esp-m);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-m);
}

.score__valeur {
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.score__echelle {
    color: var(--texte-faible);
    font-size: 15px;
    font-weight: 500;
}

.score__libelle {
    margin-top: var(--esp-xs);
    color: var(--texte-doux);
    font-size: 14px;
}

/* ---------------------------------------------------------------------
   PVT, test de vigilance psychomotrice

   Protocole Perzl et al. (2024) : damier sur fond NOIR. Pas le
   #0f1113 du thème, du vrai noir, parce que le contraste du stimulus
   fait partie du protocole. Voir docs/protocole-pvt.md.
   --------------------------------------------------------------------- */

/* Pendant le test, plus rien ne défile ni ne zoome : un geste parasite
   fausserait un temps de réaction. */
body.pvt-en-cours {
    overflow: hidden;
    overscroll-behavior: none;
}

.pvt-scene {
    position: fixed;
    inset: 0;
    z-index: 50;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-l);

    background: #000;
    color: #fff;
    padding: var(--esp-l);

    /* Aucune sélection de texte ni menu contextuel au maintien du doigt */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    cursor: pointer;
}

/* --- Le stimulus, un damier ---------------------------------------- */

.pvt-damier {
    width: 220px;
    height: 220px;
    max-width: 70vw;
    max-height: 70vw;

    /* Damier en CSS pur : aucune image à charger, donc aucun risque
       qu'une requête réseau retarde l'apparition du stimulus. */
    background-color: #000;
    background-image:
        linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
        linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
    background-size: 55px 55px;
    background-position: 0 0, 27.5px 27.5px;

    border-radius: var(--r-s);

    /* Caché par défaut. On bascule la visibilité et non l'affichage :
       la mise en page est déjà calculée, l'apparition ne coûte donc
       qu'une recomposition. */
    visibility: hidden;
}

.pvt-damier.est-visible {
    visibility: visible;
}

/* --- Textes de la scène -------------------------------------------- */

.pvt-consigne {
    max-width: 22em;
    color: #cfd6dc;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
}

.pvt-etat {
    min-height: 1.6em;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
}

.pvt-etat--alerte {
    color: var(--mauvais);
}

.pvt-progression {
    color: #7d878f;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.pvt-scene .bouton {
    max-width: 320px;
}

/* --- Résultats ------------------------------------------------------ */

.pvt-resultats {
    display: flex;
    flex-direction: column;
    gap: var(--esp-s);
    width: 100%;
    max-width: 340px;
}

.pvt-mesure {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-m);
    padding: var(--esp-m);
    background: #14181b;
    border: 1px solid #262c31;
    border-radius: var(--r-m);
}

/* La vitesse de réponse est le score principal. Les lapses sont
   secondaires. La moyenne brute des RT n'apparaît nulle part : elle est
   stockée, jamais mise en avant. Voir CLAUDE.md. */
.pvt-mesure--principale {
    background: #16211e;
    border-color: var(--accent-sombre);
}

.pvt-mesure__libelle {
    color: #9aa5ae;
    font-size: 14px;
}

.pvt-mesure--principale .pvt-mesure__libelle {
    color: var(--accent);
}

.pvt-mesure__valeur {
    flex: none;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pvt-mesure__unite {
    color: #7d878f;
    font-size: 14px;
    font-weight: 500;
}