/* ============================================================================
   evaluation — LA FEUILLE DES DEUX LANGUES.

   Le CSS n'a pas de langue. Cette feuille etait ecrite DEUX FOIS : une dans
   evaluation.html, une recopiee a la main dans en/evaluation.html. Reunies le 09/09/2026 —
   une retouche se fait desormais a UN seul endroit.

   Preuve du deplacement : tools/empreinte-styles.py, qui compare le style
   CALCULE de chaque element avant et apres, aux deux largeurs et dans les
   deux themes.
   ============================================================================ */

/* ══ FORMULAIRE D'ÉVALUATION — refonte du 07/09/2026 ══
   Né le 18/08 pour remplacer le formulaire Microsoft ; repensé aujourd'hui sur
   les échelles de la charte, comme le formulaire du dossier IRCC : une étape =
   une carte, mêmes champs, mêmes rayons, même anneau de focus.
   Pensé « téléphone d'abord » : aucune grille figée, tout s'empile et se
   replie. Les matrices de notes ne sont PAS des tableaux — un tableau de
   4 colonnes ne tient pas dans 375 px sans être coupé (leçon de frais.html).
   ⚠️ Feuille IDENTIQUE à celle d'evaluation.html (page française) : toute
   retouche se fait dans les deux.
   Tailles : paliers de la charte uniquement, jamais sous 14 px (audit du 22/08). */
.ev-cadre { max-width: 720px; margin: 0 auto; }
.ev-intro { font-size: var(--fs-base); color: var(--muted); line-height: 1.7; margin-bottom: var(--sp-5); }
.ev-progres { height: 6px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.ev-progres span { display: block; height: 100%; width: 16%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--red), var(--red-deep)); transition: width .3s ease; }
.ev-compteur { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-2) 0 var(--sp-5); }
.ev-compteur b { color: var(--ink); }

/* Bandeau « reprendre ma demande » et ligne « réponses reprises » : discrets,
   boutons de 44 px, texte de 14 px. */
.ev-reprise { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); border-radius: var(--r); }
.ev-reprise[hidden] { display: none; }
.ev-reprise p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); flex: 1 1 220px; }
.ev-reprise-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ev-reprise .btn { min-height: 44px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.ev-repris { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5;
  color: var(--ink); background: var(--teal-light); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  border-radius: var(--r); }
.ev-repris[hidden] { display: none; }

/* Chaque étape est une carte posée sur le fond : on voit où elle commence et
   où elle finit, ce qu'une suite de questions ne disait pas. */
.ev-etape { min-width: 0; margin: 0; padding: var(--sp-5); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ev-etape[hidden] { display: none; }
.ev-etape:not([hidden]) { animation: ev-entre .28s ease backwards; }
@keyframes ev-entre { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ev-etape:not([hidden]) { animation: none; } }
.ev-soustitre { font-weight: 700; color: var(--navy-dark); font-size: var(--fs-base);
  margin: var(--sp-5) 0 var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ev-etape > .ev-soustitre:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ev-q { display: block; margin-bottom: var(--sp-5); }
.ev-q > span { display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-base);
  margin-bottom: var(--sp-2); line-height: 1.5; }
.ev-q i { font-weight: 400; color: var(--muted); font-style: normal; }
.ev-oblig { color: var(--red-dark); }
.ev-q small { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.ev-q input[type=text], .ev-q input[type=tel], .ev-q input[type=email],
.ev-q input[type=number], .ev-q textarea, .ev-q select {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: var(--sp-3);
  font-size: var(--fs-md); /* 1rem = 16px : évite le zoom auto sur iPhone */
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink);
  font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.ev-q input:hover, .ev-q textarea:hover, .ev-q select:hover { border-color: #DAD4D2; }
.ev-q input:focus, .ev-q textarea:focus, .ev-q select:focus {
  outline: none; border-color: var(--red); box-shadow: var(--ring); }
.ev-q input::placeholder, .ev-q textarea::placeholder { color: #A9A2A0; }
/* La flèche des listes déroulantes est dessinée ici : celle du système change
   d'un téléphone à l'autre et jurait avec le reste. */
.ev-q select { appearance: none; -webkit-appearance: none; padding-right: var(--sp-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B6462' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center; }

/* Choix : des pastilles qui se replient toutes seules. */
.ev-choix { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ev-choix.ev-colonne { flex-direction: column; gap: var(--sp-2); }
.ev-choix label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); padding: var(--sp-3); background: var(--white);
  font-size: var(--fs-sm); line-height: 1.35; flex: 0 1 auto; min-height: 44px; /* 44px : cible tactile confortable */
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.ev-choix label:hover { border-color: #DAD4D2; }
.ev-choix label:has(input:checked) { border-color: var(--red); background: var(--blush);
  font-weight: 600; box-shadow: var(--ring); }
.ev-choix input { accent-color: var(--red-dark); width: 18px; height: 18px; flex: 0 0 auto; }

/* Deux cases au maximum. On ÉTEINT les cases restantes plutôt que de décocher
   à la place du candidat : une case qui se décoche toute seule se lit comme
   une panne, pas comme une règle. */
.ev-choix label.ev-eteint { opacity: .42; cursor: not-allowed; background: var(--bg); box-shadow: none; }
.ev-choix label.ev-eteint input { cursor: not-allowed; }
/* Bandeau d'aperçu : quand Alex regarde ses modifications depuis /gestion,
   la page doit dire haut et fort qu'elles ne sont PAS en ligne. */
.ev-apercu { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  background: var(--blush); border: 1px solid var(--red-dark); color: var(--red-ink);
  font-size: var(--fs-base); font-weight: 600; }
.ev-plafond { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink);
  background: var(--amber-light); border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  border-radius: var(--r-sm); padding: var(--sp-3); }

/* Une grille de notes par test coché : chaque grille annonce son barème. */
.ev-titre-test { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); margin: var(--sp-5) 0 var(--sp-2); }
.ev-titre-test i { font-weight: 400; font-style: normal; color: var(--muted); font-size: var(--fs-sm); }
.ev-note-test { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink);
  background: var(--amber-light); border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); }

/* Matrices de notes : une ligne = un bloc, jamais un tableau. */
.ev-ligne-note { margin-bottom: var(--sp-3); }
.ev-ligne-note > b { display: block; font-size: var(--fs-sm); color: var(--ink); margin-bottom: var(--sp-1); font-weight: 600; }

.ev-si[hidden] { display: none; }
.ev-erreur { background: var(--blush); border: 1px solid var(--red);
  border-radius: var(--r); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--red-dark);
  font-weight: 600; margin-bottom: var(--sp-4); }
.ev-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.ev-actions .btn { flex: 1 1 auto; min-width: 150px; }
/* « Continuer » en page 6 : présent mais éteint. Le geste réflexe ne fait
   plus rien, au lieu de déclencher un envoi prématuré. */
/* ⚠️ Sélecteur par identifiant : une règle de css/styles.css l'emportait sur
   une simple classe, et le bouton restait ROUGE malgré tout — donc toujours
   aussi attirant à cliquer. Vérifié : le fond calculé doit être gris. */
#evSuiv.ev-btn-inerte, #evSuiv.ev-btn-inerte:hover, #evSuiv[disabled] {
  background: var(--line) !important; background-image: none !important;
  color: var(--muted) !important; border-color: var(--line) !important;
  cursor: not-allowed; box-shadow: none !important; transform: none !important; }
/* Zone d'envoi : nettement détachée des boutons de navigation. */
.ev-envoi { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--blush);
  border: 1px solid var(--red); border-radius: var(--r-lg); text-align: center; }
.ev-envoi[hidden] { display: none; }
.ev-envoi-mot { font-size: var(--fs-sm); color: var(--ink); margin: 0 0 var(--sp-3); line-height: 1.6; }
/* MESURE : place plus haut dans la feuille, cette regle etait ecrasee par
   `.ev-envoi-mot` ci-dessus (meme poids, la derniere gagne) et le bandeau
   restait NOIR. Verifie a l'ecran : couleur calculee rgb(194,21,16). */
.ev-envoi-mot.ev-envoi-mot-bloque { color: var(--red-dark); font-weight: 600; }
.ev-btn-envoi { width: 100%; font-size: var(--fs-md); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

.ev-merci { text-align: center; padding: var(--sp-6) var(--sp-4); background: var(--white);
  border: 1px solid var(--teal); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ev-merci-ico { font-size: var(--fs-h2); line-height: 1; margin-bottom: var(--sp-3); }
/* 11/09 : --teal-ink (s'éclaircit en thème sombre) ; --teal-dark y restait à 2,8:1. */
.ev-merci h2 { font-size: var(--fs-xl); color: var(--teal-ink); margin-bottom: var(--sp-3); }
.ev-merci p { color: var(--muted); line-height: 1.7; max-width: 460px; margin: 0 auto var(--sp-3); }
.ev-merci-note { font-size: var(--fs-sm); margin-top: var(--sp-5) !important; }
.ev-merci-horaires { font-size: var(--fs-sm); background: var(--bg); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4); max-width: 460px; }
.ev-merci-liens { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .ev-etape { padding: var(--sp-4); border-radius: var(--r); }
}

/* ⛔ 29/09/2026 — le baccalauréat pour seul diplôme arrête le formulaire.
   Une annonce posée, pas une alarme : le lavis ambré des autres avis du
   formulaire, en carte entière (pas de bord gauche épais). */
.ev-arret { margin: var(--sp-4) 0; padding: var(--sp-4); font-size: var(--fs-base); font-weight: 600;
  line-height: 1.6; color: var(--ink); background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); border-radius: var(--r); }
/* Les deux options sont des phrases entières : la case se cale sur la première
   ligne, le texte respire et ne passe pas en gras une fois coché (la bordure
   et le lavis rouges disent déjà le choix). L'invitation « Cochez l'option… »
   se lit APRÈS les options, comme dans le texte d'Alex ; dans le code elle
   reste AVANT, pour que le lecteur d'écran l'annonce en premier.
   ⚠️ Sélecteurs par NOM de champ (:has) : un formulaire redessiné depuis
   /gestion ne garde pas les classes ajoutées à la main. */
.ev-q:has(> .ev-choix input[name="options_arret"]) { display: flex; flex-direction: column; }
.ev-q:has(> .ev-choix input[name="options_arret"]) > span { order: 2; margin: var(--sp-3) 0 0; }
.ev-choix label:has(input[name="options_arret"]) { align-items: flex-start; font-size: var(--fs-base); line-height: 1.55; }
.ev-choix label:has(input[name="options_arret"]:checked) { font-weight: 400; }
.ev-choix input[name="options_arret"] { margin-top: 3px; }
#evSuiv[hidden] { display: none; }

/* ══ 12/10/2026 — REFONTE DE LA PRISE EN MAIN ═══════════════════════════════
   Mesuré avant (375 × 812) : premier champ à 611 px, « Continuer » à 4 écrans
   du haut sur l'étape des langues, la bulle WhatsApp posée sur le texte des
   champs ; la case « Me prévenir » AU-DESSUS de sa phrase. Mesuré avant
   (1280 × 900) : une colonne de 720 px au milieu, 280 px vides de chaque
   côté, et rien qui dise combien d'étapes restent ni ce qui suit l'envoi.
   · Téléphone : « Précédent / Continuer » collés en bas de l'écran, sous le
     pouce, pendant toute l'étape ; la bulle WhatsApp monte au-dessus.
   · Ordinateur : le sommaire des étapes à droite, collant (.ev-parcours).
   « Envoyer » reste à part, sous le formulaire (défaut vécu du 18/08). */
.ev-section { padding-top: var(--sp-6); }
/* Le menu du haut est collant (et, au téléphone, la barre des boutons en
   bas) : sans ces marges, le retour en haut d'étape cachait la barre
   d'avancement sous le menu, et un champ atteint au clavier (Tab) pouvait
   se glisser sous la barre du bas. La marge est posée sur la page entière
   (scroll-padding) : chaque défilement automatique la respecte. */
html:has(#evForm) { scroll-padding-top: 84px; }
/* Un formulaire en étapes ne glisse pas : chaque défilement est immédiat.
   Le défilement doux du site (styles.css) faisait encore bouger la page
   pendant qu'on touchait la réponse suivante — mesuré : un geste sur huit
   tombait sur la question d'à côté dans les bancs d'essai. */
html:has(#evForm) { scroll-behavior: auto; }
.ev-cadre, .ev-principal { scroll-margin-top: 4px; }
.ev-principal { min-width: 0; }

/* La case « Me prévenir à chaque tirage » : la case À GAUCHE de sa phrase.
   Sélecteur par la NATURE du champ, pas par une classe : un formulaire
   redessiné depuis /gestion ne garde pas les classes posées à la main. */
.ev-q:has(> input[type="checkbox"]) { display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease; }
.ev-q:has(> input[type="checkbox"]):hover { border-color: var(--line-strong); }
.ev-q:has(> input[type="checkbox"]:checked) { border-color: var(--red); background: var(--blush); }
.ev-q:has(> input[type="checkbox"]) > input { flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--red-dark); cursor: pointer; }
.ev-q:has(> input[type="checkbox"]) > span { margin: 0; font-weight: 500; }

/* Pastille « 3 à 6 min » et coche de l'écran « C'est reçu » : des icônes
   dessinées, plus des émojis (charte : jamais d'émoji comme icône). */
.ev-badge svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ev-merci-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--teal-light); color: var(--teal-ink); }
.ev-merci-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }

/* ── Le sommaire des étapes ── */
.ev-parcours, .ev-parcours[hidden] { display: none; }
.ev-parcours-titre { margin: 0 0 var(--sp-4); font-family: Sora, sans-serif; font-weight: 600;
  font-size: var(--fs-base); color: var(--navy-dark); }
.ev-pas { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ev-pas li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--sp-3);
  align-items: center; min-height: 44px; }
/* Le fil qui relie les pastilles : fin, neutre, il ne fait que guider l'œil. */
.ev-pas li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 36px; bottom: -8px;
  width: 1px; background: var(--line-strong); }
.ev-pas-marque { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--muted);
  font-family: Sora, sans-serif; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-pas-marque svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }
.ev-pas-nom { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; text-align: left; }
.ev-pas small { grid-column: 2; margin-top: -10px; padding-bottom: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.ev-pas-faite .ev-pas-marque { background: var(--teal-light); border-color: transparent; color: var(--teal-ink); }
.ev-pas-faite .ev-pas-nom { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm);
  color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: .22em; justify-self: start; min-height: 44px; }
.ev-pas-faite .ev-pas-nom:hover { color: var(--red-dark); text-decoration-color: currentColor; }
.ev-pas-en-cours .ev-pas-marque { background: var(--red-fond); border-color: var(--red-fond); color: var(--sur-couleur); }
.ev-pas-en-cours .ev-pas-nom { color: var(--navy-dark); font-weight: 700; }
.ev-pas-sautee .ev-pas-marque { border-style: dashed; }
.ev-pas-sautee .ev-pas-nom { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.ev-ensuite { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.ev-ensuite p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.ev-ensuite p:last-child { margin-bottom: 0; }
.ev-ensuite b { color: var(--ink); }

/* Ordinateur : deux colonnes, le formulaire garde sa largeur de lecture. */
@media (min-width: 1100px) {
  .ev-cadre { max-width: 1072px; display: grid; grid-template-columns: minmax(0, 720px) 296px;
    justify-content: center; column-gap: var(--sp-8); align-items: start; }
  .ev-parcours:not([hidden]) { display: block; position: sticky; top: 96px; padding: var(--sp-5);
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
  /* Envoyé : plus de sommaire, l'écran « C'est reçu » reprend le centre. */
  .ev-cadre:has(#evMerci:not([hidden])) { grid-template-columns: minmax(0, 720px); }
  .ev-cadre:has(#evMerci:not([hidden])) .ev-parcours { display: none; }
}

/* Téléphone : les deux boutons restent sous le pouce pendant toute l'étape.
   La barre colle au bas de l'écran tant que la fin du formulaire n'est pas
   atteinte, puis reprend sa place — juste AU-DESSUS de « Envoyer ». */
@media (max-width: 767px) {
  .ev-section { padding-top: var(--sp-5); }
  .ev-actions { position: sticky; bottom: 0; z-index: 20; flex-wrap: nowrap;
    margin: var(--sp-5) -20px 0; padding: var(--sp-3) 20px calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--white); border-top: 1px solid var(--line); }
  .ev-actions .btn { width: auto; min-width: 0; min-height: 48px; }
  #evPrec { flex: 0 0 auto; padding-left: var(--sp-4); padding-right: var(--sp-4); }
  #evSuiv { flex: 1 1 auto; }
  /* La bulle WhatsApp montait sur les champs puis sur la barre : elle se pose
     au-dessus de la barre tant que le formulaire est à l'écran. */
  body:has(#evForm:not([hidden])) .wa-float { bottom: 88px; }
  html:has(#evForm:not([hidden])) { scroll-padding-bottom: 96px; }
}
/* La dernière question d'une étape ne pousse plus le bas de la carte. */
.ev-etape > .ev-q:last-child { margin-bottom: 0; }