/* ============================================================
   IV IELTS — raccord entre le simulateur et la charte du site
   ------------------------------------------------------------
   Chargé en TROISIÈME, après ../css/styles.css (le site) puis
   css/styles.css (l'application). Il ne réécrit aucune règle de mise en
   page : il remplace la PALETTE du simulateur par celle de la charte et
   recolle les deux feuilles là où elles se marchent dessus.

   ⚠️ POURQUOI L'ORDRE COMPTE. Les deux feuilles définissaient quatre
   variables du même nom (--red, --navy-dark, --amber, --shadow). Celle du
   simulateur, chargée en second, écrasait celle du site : le rouge
   d'action du bandeau virait au brique et le noir chaud au bleu marine.
   Ces quatre variables ont donc été RENOMMÉES côté simulateur le 11/08
   (--ko, --navy-2, --warn, --card-shadow) — dans l'application autonome
   comme ici, pour que les deux restent identiques.

   ⚠️ CHANGEMENT ASSUMÉ. Hors site, le simulateur était BLEU en Academic
   et VERT en General Training (choix d'Alex du 10/08). La charte interdit
   explicitement le bleu marine. Les deux versions partagent donc la
   palette maison, et la distinction passe par une pastille, comme sur
   prepa-ielts.html. Pour revenir en arrière : retirer le <link> de ce
   fichier dans index.html, rien d'autre.
   ============================================================ */

:root {
  /* ---- Palette du simulateur, alignée sur css/styles.css du site ---- */
  --iv-navy: #171314;          /* noir chaud : bandeaux d'examen, titres */
  --navy-2: #0F0C0D;        /* début du dégradé du hero */
  --hero-end: #8F0E0B;      /* fin du dégradé : rouge profond de la charte */
  --accent: #E8231A;        /* action */
  --accent-dark: #C21510;   /* survols */
  --header-bg: #171314;
  --body-bg: #FAFAF9;
  --card-bg: #ffffff;
  --border: #ECE9E8;
  --text: #1F1B1A;
  --text-soft: #6B6462;
  --green: #128C4B;         /* juste — le vert succès de la charte */
  --ko: #C21510;            /* faux — comme .carnet-etiq.ko de l'espace TCF */
  --warn: #C79A2A;
  --flag: #C79A2A;
  --iv-radius: 10px;
  --card-shadow: 0 6px 22px rgba(23, 19, 20, .08);

  /* Teintes des encarts : bleutées dans l'application autonome, rosées
     ici. Ces trois variables ont été créées le 11/08 dans le CSS du
     simulateur EXPRÈS pour cela — avant, 45 couleurs étaient en dur. */
  --tint: #FDF0EF;
  --tint-2: #FAF3F2;
  --tint-line: #F3D4D2;

  /* Le mot « IELTS » dans le bandeau noir d'examen */
  --brand-accent: #F3D4D2;
}



/* ============================================================
   DEUX VERSIONS, DEUX AMBIANCES (12/08, demande d'Alex : « une variante
   lorsqu'on est dans l'Academic, pour éviter toute confusion »)
   ------------------------------------------------------------
   ⚠️ Ceci assouplit une règle écrite dans CHARTE.md le 11/08 : « les deux
   versions se distinguent par une pastille, jamais par une repeinte de page ».
   Alex a tranché dans l'autre sens. Le compromis tenu ici :
     • AUCUNE couleur nouvelle, AUCUN bleu marine — l'interdit de la charte,
       lui, n'est pas touché ;
     • on ne change QUE les teintes de fond des encarts et le mot « IELTS » du
       bandeau, jamais les boutons : le rouge reste le rouge de l'action, dans
       les deux versions, donc la règle du CTA unique tient toujours ;
     • Academic prend l'OR de la charte (--amber #C79A2A, « or prestige »),
       General garde le rosé du rouge maison. Deux familles déjà validées.
   Pour revenir en arrière : supprimer le bloc body.v-academic ci-dessous.
   ============================================================ */

/* General Training — le rosé du rouge maison (l'ambiance d'origine). */
body.v-general {
  --iv-navy: #171314;
  --navy-2: #0F0C0D;
  --hero-end: #8F0E0B;
  --accent: #E8231A;
  --accent-dark: #C21510;
  --tint: #FDF0EF;
  --tint-2: #FAF3F2;
  --tint-line: #F3D4D2;
  --brand-accent: #F3D4D2;
}

/* Academic — la famille or de la charte. Les fonds restent des lavis très
   pâles : c'est une ambiance, pas un aplat doré. */
body.v-academic {
  --iv-navy: #171314;
  --navy-2: #0F0C0D;
  --hero-end: #8F0E0B;
  --accent: #E8231A;
  --accent-dark: #C21510;
  --tint: #FBF6EA;
  --tint-2: #FDFAF3;
  --tint-line: #EADFC2;
  /* Sur le bandeau noir #171314, ce ton donne un contraste très au-dessus
     du seuil AA — le doré saturé #C79A2A, lui, y passait tout juste. */
  --brand-accent: #E8C877;
}

/* La version non comprise dans l'abonnement : visible, mais fermée. Même
   traitement que les sujets verrouillés de la Prépa TCF — on montre ce qu'on
   n'a pas, on ne le cache pas. */
.mode-pill.verrouille,
.mode-pill[disabled] {
  opacity: .5;
  cursor: not-allowed;
  background: var(--tint-2);
  border-style: dashed;
}
.mode-pill.verrouille:hover,
.mode-pill[disabled]:hover { transform: none; box-shadow: none; }

/* ---- Envoi du Speaking au formateur (12/08) ---- */
.iv-speak-offre, .iv-speak-envoi {
  background: var(--tint-2); border: 1px solid var(--tint-line);
  border-radius: 12px; padding: 16px 18px; margin: 1.2rem 0;
}
.iv-speak-offre b, .iv-speak-envoi b {
  display: block; font-family: Sora, Inter, sans-serif;
  color: var(--iv-navy); font-size: .98rem; margin-bottom: 6px;
}
.iv-speak-offre p, .iv-speak-envoi p {
  font-size: .86rem; color: var(--text-soft); line-height: 1.6; margin: 0 0 12px;
}
.iv-speak-envoi .etat {
  margin: 10px 0 0; font-size: .84rem; font-weight: 600; color: var(--text-soft);
}
.iv-speak-envoi .etat.ok { color: var(--green); }
.iv-speak-envoi .etat.ko { color: var(--ko); }

/* ---- Polices de la charte ---- */
body { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
h1, h2, h3, h4, .btn, button, .th-brand { font-family: Sora, Inter, "Segoe UI", sans-serif; }

/* ---- Le simulateur vit SOUS le bandeau du site ----
   L'application autonome occupait toute la fenêtre (height:100%). Ici elle
   s'insère après la barre noire et le menu : on lui rend une hauteur libre,
   sinon la page se retrouve avec deux ascenseurs. */
html, body { height: auto; min-height: 100%; }
body { background: var(--body-bg); }


/* ---- Titre de l'espace (H1 de la page, constat #68) ----
   Discret, façon eyebrow : la page n'avait aucun H1 dans son code. 14 px
   minimum, jamais moins sur téléphone. */
.iv-espace-titre {
  max-width: 1240px; margin: 18px auto 0; padding: 0 20px;
  font-family: Sora, Inter, sans-serif; font-size: .875rem; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-soft);
  text-align: center; line-height: 1.4; text-wrap: balance;
}

/* ============================================================
   ÉCRAN D'ACCÈS (connexion, accès manquant, appareils)
   Mêmes composants que le site : carte blanche, radius 14, bord --line.
   ============================================================ */
.iv-porte { padding: 44px 20px 70px; display: flex; justify-content: center; }
.iv-porte-carte {
  width: 100%; max-width: 460px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--card-shadow); padding: 32px 30px;
}
.iv-porte-carte .eyebrow {
  display: block; font-family: Sora, sans-serif; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.2px; color: var(--accent-dark); margin-bottom: 8px;
}
.iv-porte-carte h2 { font-size: 1.4rem; color: var(--iv-navy); margin-bottom: 8px; line-height: 1.28; }
.iv-porte-carte p.intro { font-size: .92rem; color: var(--text-soft); line-height: 1.62; margin-bottom: 20px; }
.iv-porte-carte label { display: block; font-size: .82rem; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.iv-porte-carte input {
  width: 100%; padding: 11px 13px; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
  margin-bottom: 14px;
}
.iv-porte-carte input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 35, 26, .12); }
.iv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px; border: none; border-radius: 10px;
  font-family: Sora, sans-serif; font-weight: 600; font-size: .92rem; cursor: pointer;
  background: var(--accent); color: #fff; text-decoration: none;
  transition: background .22s ease, transform .22s ease;
}
.iv-btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.iv-btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--border); }
.iv-btn.ghost:hover { background: var(--tint); color: var(--accent-dark); border-color: var(--tint-line); }
.iv-btn.wa { background: #128C4B; }
.iv-btn.wa:hover { background: #0F7540; }
.iv-porte-carte .liens { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.iv-porte-carte .petit { font-size: .8rem; color: var(--text-soft); line-height: 1.55; text-align: center; }
.iv-porte-carte .petit a { color: var(--accent-dark); }
/* 20/10/2026 — « Forgotten password? » sous le mot de passe, aligné à droite. */
.iv-oubli {
  display: block; margin: -6px 0 4px auto; padding: 6px 0; min-height: 32px;
  background: none; border: 0; font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--accent-dark); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .15s ease-out;
}
.iv-oubli:hover { text-decoration-color: currentColor; }
.iv-oubli:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; border-radius: 4px; }
/* 28/10/2026 — « Resend the confirmation link » : même allure, sous le message, à gauche. */
.iv-oubli.iv-renvoi { margin: -6px 0 10px; min-height: 44px; text-align: start; }
.iv-oubli.iv-renvoi:disabled { color: var(--text-soft); cursor: default; text-decoration-color: transparent; }
/* Robustesse du mot de passe et consentements — repris de la Prépa TCF
   (entrainement-tcf.html, .etcf-consent et #mdpForce) pour que la création de
   compte soit le même geste des deux côtés du site. */
.iv-mdp-force { margin-top: 8px; }
.iv-mdp-force .barre {
  display: block; height: 4px; background: var(--border);
  border-radius: 99px; overflow: hidden;
}
.iv-mdp-force .barre i {
  display: block; height: 100%; width: 0;
  border-radius: 99px; transition: width .22s ease, background .22s ease;
}
.iv-mdp-force .mdp-avis {
  display: block; font-size: .78rem; color: var(--text-soft);
  line-height: 1.5; margin-top: 6px;
}
.iv-consent {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  font-weight: 400; font-size: .84rem; color: var(--text); line-height: 1.5;
}
.iv-consent input {
  width: 17px; height: 17px; margin-top: 2px;
  accent-color: var(--accent); flex-shrink: 0; cursor: pointer;
}
.iv-consent a { color: var(--accent-dark); font-weight: 600; }

.iv-msg { font-size: .85rem; padding: 10px 13px; border-radius: 9px; margin-bottom: 14px; line-height: 1.5; }
.iv-msg.err { background: var(--tint); color: var(--ko); border: 1px solid var(--tint-line); }
.iv-msg.ok { background: #E9F8EF; color: var(--teal-ink); border: 1px solid #BFE5CE; }
.iv-msg.info { background: #FBF3DC; color: var(--amber-ink); border: 1px solid #EFE2BE; }

/* Bandeau d'accès, une fois entré */
.iv-acces-bandeau {
  max-width: 1240px; margin: 16px auto 0; padding: 11px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: .85rem; color: var(--text-soft);
}
.iv-acces-bandeau b { color: var(--iv-navy); }
.iv-acces-bandeau .iv-btn { width: auto; padding: 8px 14px; font-size: .82rem; }
@media (max-width: 620px) { .iv-acces-bandeau { margin: 12px 14px 0; } }

/* ============================================================
   CORRECTION IA DU WRITING — bloc posé par window.IV_CORRIGER_IA
   ============================================================ */
.iv-corr {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; margin: 0 0 1.2rem;
}
.iv-corr-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.iv-corr-tete b { font-family: Sora, sans-serif; font-size: 1rem; color: var(--iv-navy); }
.iv-corr-tete span { font-size: .8rem; color: var(--text-soft); }
.iv-corr p { font-size: .9rem; color: var(--text-soft); line-height: 1.62; margin-bottom: 14px; }
.iv-corr h4 { font-family: Sora, sans-serif; font-size: .92rem; color: var(--iv-navy); margin: 18px 0 8px; }
.iv-corr-note { font-size: .82rem !important; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 16px !important; margin-bottom: 0 !important; }

.iv-bande-globale { display: flex; align-items: baseline; gap: 12px; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.iv-bande-globale span { font-family: Sora, sans-serif; font-weight: 700; font-size: 2.1rem; color: var(--accent-dark); line-height: 1; }
.iv-bande-globale small { font-size: .84rem; color: var(--text); }
.iv-corr-general { color: var(--text) !important; }

.iv-taches { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .iv-taches { grid-template-columns: 1fr 1fr; } }
.iv-tache { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.iv-tache b { font-family: Sora, sans-serif; font-size: .9rem; color: var(--iv-navy); display: block; }
.iv-tache small { font-size: .76rem; color: var(--text-soft); }
.iv-tache p { font-size: .86rem !important; margin: 6px 0 0 !important; }

.iv-crits { display: grid; gap: 10px; }
/* 13/10/2026 : plus de trait épais à gauche (règle du 10/09) : un lavis léger, bordé d'un filet. */
.iv-crit { background: var(--tint-2); border: 1px solid var(--tint-line); border-radius: 8px; padding: 8px 12px; position: relative; }
.iv-crit b { font-size: .86rem; color: var(--iv-navy); }
.iv-crit .iv-bande { float: right; font-family: Sora, sans-serif; font-weight: 700; color: var(--accent-dark); }
.iv-crit p { font-size: .85rem !important; margin: 4px 0 0 !important; }

.iv-erreurs, .iv-conseils { margin: 0; padding-left: 20px; }
.iv-erreurs li { font-size: .87rem; color: var(--text); line-height: 1.6; margin-bottom: 10px; }
.iv-erreurs em { display: block; font-style: normal; font-size: .82rem; color: var(--text-soft); margin-top: 2px; }
.iv-faux { color: var(--ko); text-decoration: line-through; }
.iv-juste { color: var(--green); font-weight: 600; }
.iv-conseils li { font-size: .88rem; color: var(--text); line-height: 1.6; margin-bottom: 7px; }

/* Bandeau du mode découverte — ambre, pas rouge : c'est une information,
   pas une alerte, et le rouge reste réservé à l'action (charte). */
/* ⚠️ Moins de 10 jours de pack (5 jusqu'au 11/09) : le bandeau devient une alerte (30/08). */
.iv-acces-bandeau.alerte {
  border-color: var(--iv-red, #E8231A);
  background: #FFF3F2;
}
.iv-acces-bandeau.alerte .pack-chrono-val { color: var(--iv-red, #E8231A); font-variant-numeric: tabular-nums; }
/* 11/09/2026 (Alex) : le bandeau d'alerte s'est allongé (jours restants +
   promesse de prolongation) ; à 375 px, « 6 d 23 h 59 min » se coupait en deux. */
.iv-acces-bandeau .pack-chrono-val { font-variant-numeric: tabular-nums; white-space: nowrap; }

.iv-acces-bandeau.decouverte {
  background: #FBF3DC; border-color: #EFE2BE; color: #6B5A22;
}
.iv-acces-bandeau.decouverte b { color: var(--amber-ink); }
.iv-acces-bandeau.decouverte .iv-btn { flex-shrink: 0; }

/* 25/10/2026 (Alex) : un abonné entre droit dans son travail — son bandeau n'est
   plus une plaque mais une ligne d'état, sans fond ni cadre ; les offres vivent
   dans « Mon compte » (lien « Manage my pack »). */
.iv-acces-bandeau.etat { background: transparent; border-color: transparent; padding-top: 6px; padding-bottom: 6px; }
.iv-acces-seg { white-space: nowrap; }
.iv-acces-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.iv-acces-liens a:not(.iv-btn) {
  font-weight: 600; color: var(--accent-dark); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
.iv-acces-liens a:not(.iv-btn):hover { color: var(--iv-navy); }
@media (max-width: 768px) {
  .iv-acces-liens a:not(.iv-btn) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Audit du 22/08 (vérification finale) : sur téléphone, rien sous 14 px ni
   sous 44 px dans la porte d'entrée ; le bouton rouge passe en rouge foncé
   (blanc sur #E8231A = 4,48:1, sous le seuil de 4,5). */
/* ⚠️ 09/09 — le FOND rouge, pas l'encre rouge : --red-dark s'eclaircit en
   theme sombre (#FF6B62) et le blanc pose dessus tombait a 2,79:1 — le bouton
   « Se connecter » de l'espace IELTS. --red-fond s'assombrit, lui. */
.iv-btn { background: var(--red-fond, #C21510); min-height: 44px; }
.iv-btn:hover { background: var(--red-deep, #8F0E0B); }
#ivBascule, .iv-porte-carte .petit a { display: inline-block; min-height: 44px; line-height: 44px; }
@media (max-width: 768px) {
  .iv-porte-carte .eyebrow, .iv-porte-carte label, .iv-porte-carte .petit, .iv-porte-carte .petit a,
  .iv-acces-bandeau .iv-btn { font-size: .875rem; }
}
.iv-btn.wa { background: #0E7A40; }
.iv-btn.wa:hover { background: #128C4B; }

/* 11/09/2026 (Alex) : le repère « Practice Test N selected » (#ivEtape), vers
   lequel on descend au clic sur un sujet, se posait SOUS la barre collante du
   site (68 px) : scrollIntoView l'amenait à 0 px, caché derrière elle. */
#ivEtape { scroll-margin-top: 84px; }

/* ============================================================
   « I have a code » — un pack OFFERT (04/10/2026, ../js/code-pack.js)
   Une rangée entière du bandeau d'accès, sous ce qu'il propose : on active
   le pack là où l'on voit qu'il faudrait l'acheter. Mêmes pièces que les
   champs de la porte d'entrée (bordure, rayon, halo de focus).
   ============================================================ */
.iv-acces-bandeau .code-pack { flex-basis: 100%; }
.code-pack [hidden] { display: none !important; }
.code-pack-ouvrir {
  border: 0; background: none; padding: 0; min-height: 44px; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--accent-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.code-pack-ouvrir:hover { color: var(--iv-navy); }
.code-pack-form label { display: block; margin: 2px 0 6px; font-size: .875rem; font-weight: 600; color: var(--text); }
.code-pack-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.code-pack-ligne input {
  flex: 1 1 140px; min-width: 0; max-width: 16rem; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--iv-radius); background: #fff; color: var(--text);
  font: inherit; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.code-pack-ligne input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 35, 26, .12); }
.code-pack-avis { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: var(--ko); }
.code-pack-avis.ok { color: var(--teal-ink); font-weight: 600; }
.code-pack-avis:empty { display: none; }
.code-pack-avis a { color: var(--accent-dark); font-weight: 600; }
.code-pack-ok {
  flex-basis: 100%; order: -1; margin: 0; padding: 10px 13px; border-radius: 9px;
  background: #E9F8EF; color: var(--teal-ink); border: 1px solid #BFE5CE;
  font-size: .875rem; font-weight: 600; line-height: 1.5;
}

/* ============================================================
   « Your feedback » — l'avis du candidat (04/10/2026, ../js/avis-prepa.js)
   Deux portes, visibles comme « Sign out » : la barre du haut (ordinateur)
   et le menu ☰ (téléphone). La fenêtre se pose AU-DESSUS de l'écran en
   cours — une épreuve ouverte le reste, et le texte tapé ne se perd pas en
   la fermant. Mêmes pièces que la porte d'entrée : carte blanche, rayon 14,
   champs à bord fin et halo rouge, bouton .iv-btn ; au téléphone, elle monte
   du bas de l'écran, à portée de pouce.
   ============================================================ */
.nav-cta .iv-nav-avis {
  border: 0; background: none; padding: 0; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--text-soft); white-space: nowrap;
  transition: color .2s;
}
.nav-cta .iv-nav-avis:hover { color: var(--accent-dark); }
@media (max-width: 979px) { .nav-cta .iv-nav-avis { display: none; } }
.mobile-menu .iv-menu-avis {
  border: 0; background: none; font: inherit; font-weight: 500; color: var(--text);
  text-align: left; padding: 11px 10px; border-radius: 12px; cursor: pointer;
}
.mobile-menu .iv-menu-avis:hover { background: var(--body-bg); color: var(--accent-dark); }
.avis [hidden] { display: none !important; }
dialog.avis {
  width: min(560px, calc(100% - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: min(780px, calc(100dvh - 32px));
  margin: auto; padding: 0; overflow: hidden;
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--card-shadow);
}
dialog.avis[open] { display: flex; flex-direction: column; animation: avis-entree .24s cubic-bezier(.22, 1, .36, 1); }
dialog.avis::backdrop { background: rgba(23, 19, 20, .55); animation: avis-voile .24s ease-out; }
@keyframes avis-entree { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes avis-voile { from { opacity: 0; } }
.avis svg { fill: none; stroke: currentColor; }
.avis-tete { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 26px 6px; }
.avis-tete h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--iv-navy); line-height: 1.3; text-wrap: balance; }
/* Les titres reçoivent le focus pour être lus, pas pour être cliqués : pas d'anneau. */
.avis-tete h2:focus, .avis-merci h3:focus { outline: none; box-shadow: none; }
.avis-fermer {
  flex: none; width: 44px; height: 44px; margin: -10px -12px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--iv-radius); background: none; color: var(--text-soft); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.avis-fermer:hover { background: var(--tint); color: var(--accent-dark); }
.avis-fermer svg { width: 20px; height: 20px; }
.avis-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Tête et pied fixes, les champs défilent entre deux filets. */
.avis-defile {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 26px 12px;
  border-top: 1px solid var(--border);
}
.avis-intro { margin: 0 0 18px; font-size: .875rem; color: var(--text-soft); line-height: 1.6; }
.avis-champ { position: relative; margin-bottom: 14px; }
.avis-champ label { display: block; margin: 0 0 6px; font-size: .875rem; font-weight: 600; color: var(--text); }
.avis-champ textarea {
  display: block; width: 100%; min-height: 4.5em; max-height: 16em; resize: vertical; field-sizing: content;
  padding: 11px 13px 26px; border: 1px solid var(--border); border-radius: var(--iv-radius);
  background: var(--card-bg); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.avis-champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 35, 26, .12); }
/* Le champ grandit avec le texte là où le navigateur le sait : la poignée devient inutile. */
@supports (field-sizing: content) { .avis-champ textarea { resize: none; } }
/* Le compteur se loge DANS le champ, en bas à droite : il apparaît sans rien pousser. */
.avis-compteur {
  position: absolute; right: 9px; bottom: 6px; padding: 0 4px; border-radius: 6px; background: var(--card-bg);
  font-size: .75rem; line-height: 1.6; color: var(--text-soft); font-variant-numeric: tabular-nums; pointer-events: none;
}
.avis-compteur.presque { color: var(--ko); font-weight: 600; }
.avis-joint { margin: 2px 0 0; font-size: .75rem; color: var(--text-soft); line-height: 1.5; }
.avis-pied { flex: none; padding: 14px 26px 20px; border-top: 1px solid var(--border); background: var(--card-bg); }
/* Mêmes pièces que les messages de la porte d'entrée (.iv-msg.err / .iv-msg.info) :
   la limite des 5 messages et l'envoi pas encore ouvert ne sont pas des fautes. */
.avis-message {
  margin: 0 0 12px; padding: 10px 13px; border-radius: 9px; font-size: .875rem; line-height: 1.5;
  background: var(--tint); color: var(--ko); border: 1px solid var(--tint-line);
}
.avis-message.info { background: var(--amber-light); color: var(--amber-ink); border-color: #EFE2BE; }
.avis-message:empty { display: none; }
.avis-lien {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.avis-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.avis-actions .iv-btn, .avis-merci .iv-btn { width: auto; }
.avis-actions [type="submit"]:disabled { opacity: .72; cursor: progress; transform: none; }
.avis-merci { padding: 6px 26px 28px; text-align: center; }
.avis-merci svg { width: 46px; height: 46px; color: var(--teal-ink); }
.avis-merci h3 { margin: 10px 0 6px; font-size: 1rem; font-weight: 700; color: var(--iv-navy); }
.avis-merci p { max-width: 40ch; margin: 0 auto 18px; font-size: .875rem; color: var(--text-soft); line-height: 1.6; }
@media (max-width: 599px) {
  dialog.avis {
    width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto 0 0;
    border-bottom: 0; border-radius: 14px 14px 0 0;
  }
  dialog.avis[open] { animation-name: avis-monte; }
  @keyframes avis-monte { from { transform: translateY(40px); opacity: 0; } }
  .avis-tete { padding: 18px 16px 4px; }
  .avis-defile { padding: 14px 16px 12px; }
  .avis-pied { padding: 12px 16px 16px; }
  .avis-merci { padding: 6px 16px 24px; }
  .avis-actions .iv-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { dialog.avis[open], dialog.avis::backdrop { animation: none; } }

/* ============================================================================
   13/10/2026 — REFONTE DE LA PRISE EN MAIN (lot 5) : l'accueil du simulateur.
   ① Les trois façons de s'entraîner (examen complet, révision ciblée, banque
     de sujets) : texte aligné à gauche, bouton en bas de la carte. À
     l'ordinateur (1100 px et plus), côte à côte sur une ligne, au lieu de
     trois grands bandeaux centrés empilés (mesuré à 1280 px : 3 × 230 px, cinq
     boutons rouges visibles d'un coup).
   ② La carte de la banque de sujets était VIOLETTE (#7a4a86) : couleur hors
     charte (CHARTE.md, « nouvelle couleur hors charte » interdite). Elle prend
     la famille rosée du rouge maison, comme les autres lavis.
   ③ À l'ordinateur, la colonne de l'accueil s'élargit à 1180 px et le bandeau
     d'accès s'y aligne (il débordait de 120 px de chaque côté).
   ============================================================================ */
.home .full-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.home .full-card p { margin: 0 0 1rem; max-width: none; flex: 1 0 auto; }
.home .full-card .iv-complet-test { margin-bottom: .75rem; }
.home .full-card .btn { align-self: stretch; }
.home .full-card .btn-big { font-size: 1rem; padding: .75rem 1.4rem; }
@media (min-width: 600px) { .home .full-card .btn { align-self: flex-start; } }
.bank-promo { border-color: #E9B9B5; background: linear-gradient(180deg, #FFFFFF, var(--blush)); }
.bank-promo h3 { color: var(--red-dark); }
@media (min-width: 1100px) {
  .home .home-main { max-width: calc(1180px + 2.4rem); display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; align-items: stretch; }
  .home .home-main > * { grid-column: 1 / -1; min-width: 0; }
  .home .home-main > .full-card { grid-column: span 3; }
  .home .home-main:has(> .bank-promo) > .full-card { grid-column: span 2; }
  .iv-acces-bandeau { max-width: 1180px; }
}

/* ============================================================================
   25/10/2026 (Alex) — L'ESPACE PRÉPA DE L'ABONNÉ (pack actif : window.IV_PREPA)
   ① « Hello <pseudo> » + la date d'examen, à la place du bandeau-titre.
   ② « Today's session » : une carte sombre, un seul bouton rouge sur l'écran
     (les autres boutons de l'accueil passent en contour, app.js).
   ③ Après un test : « Next suggested test » et « Review my mistakes ».
   Visiteur, essai, pack expiré : aucune de ces classes n'apparaît.
   ============================================================================ */
.iv-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.iv-salut { margin: 0 0 18px; }
.iv-salut-titre {
  font-family: Sora, Inter, sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); color: var(--navy-dark, #171314);
  text-wrap: balance; overflow-wrap: anywhere;
}
.iv-salut-nom { color: var(--red-dark, #C21510); }
.iv-salut-date { margin-top: 6px; font-size: .95rem; line-height: 1.5; color: var(--muted, #6B6462); }
.iv-salut-date b { color: var(--navy-dark, #171314); font-weight: 600; }
.iv-lien {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--red-dark, #C21510);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.iv-lien:hover { color: var(--red-deep, #8F0E0B); text-decoration-thickness: 2px; }
.iv-lien:focus-visible { outline: 2px solid var(--red-dark, #C21510); outline-offset: 3px; border-radius: 3px; }
.iv-salut-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.iv-salut-form label { font-weight: 600; color: var(--navy-dark, #171314); }
.iv-salut-champ {
  min-height: 44px; padding: 8px 12px; font-size: 1rem; color: var(--text);
  background: #fff; border: 1px solid #CFC9C7; border-radius: 8px;
}
.iv-salut-champ:focus-visible { outline: 2px solid var(--red-dark, #C21510); outline-offset: 1px; border-color: var(--red-dark, #C21510); }
.iv-salut-form .btn { width: auto; min-height: 44px; justify-content: center; }
.iv-salut-msg { flex-basis: 100%; color: var(--red-dark, #C21510); font-weight: 600; }
.iv-salut-msg:empty { display: none; }
/* Au doigt : 44 px de cible SANS ouvrir l'interligne (le remplissage d'un élément en
   ligne ne pousse pas la ligne). */
@media (max-width: 768px) {
  .iv-salut-date .iv-lien { padding: 12px 4px; margin: -12px -4px; }
}

.iv-jour {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px 20px;
  margin: 0 0 24px; padding: 20px 22px;
  background: var(--fond-sombre, #171314); color: var(--sur-couleur, #fff);
  border-radius: var(--r, 12px); box-shadow: 0 12px 28px -12px rgba(23, 19, 20, .45);
}
.iv-jour-ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red-fond, #C21510); color: var(--sur-couleur, #fff);
}
.iv-jour-ic svg { width: 24px; height: 24px; }
.iv-jour h2 { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: inherit; }
.iv-jour-quoi { margin: 4px 0 0; font-size: 1rem; line-height: 1.4; }
.iv-jour-quoi b { font-weight: 600; }
.iv-jour-raison { margin: 2px 0 0; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }
.iv-jour .iv-echec { display: block; margin-top: 6px; color: #FFD5D2; }
.iv-jour-go { min-height: 48px; padding: .7rem 1.8rem; justify-content: center; }
.iv-jour-go:focus-visible { outline: 2px solid var(--sur-couleur, #fff); outline-offset: 3px; }
/* Les 10 derniers jours d'un pack (Alex, 25/10) : « Extend my access » est le seul bouton
   rouge ; celui de la séance passe en contour clair. :has suit l'alerte même quand elle
   s'allume page ouverte. */
body:has(.iv-acces-bandeau.alerte) .iv-jour-go { background: transparent; color: var(--sur-couleur, #fff);
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: none; }
body:has(.iv-acces-bandeau.alerte) .iv-jour-go:hover { background: rgba(255, 255, 255, .12); transform: none; }
@media (max-width: 639px) {
  .iv-jour { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; }
  .iv-jour-go { grid-column: 1 / -1; width: 100%; }
}

.res-hero + .iv-suite { margin-top: -8px; }
.iv-suite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0 0 22px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r, 12px);
}
.iv-suite-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.iv-suite-next span { color: var(--text); }
.iv-suite-next b { color: var(--navy-dark, #171314); font-weight: 600; }
.iv-suite .btn { min-height: 44px; justify-content: center; }
.iv-suite .btn:focus-visible { outline: 2px solid var(--red-dark, #C21510); outline-offset: 2px; }
.iv-suite-zero { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--text); }
.iv-suite-zero svg { width: 20px; height: 20px; flex: none; color: var(--green, #128C4B); }
.iv-suite .iv-echec { flex-basis: 100%; color: var(--red-dark, #C21510); }
@media (max-width: 639px) {
  .iv-suite { flex-direction: column; align-items: stretch; }
  .iv-suite-next { justify-content: space-between; }
  .iv-revue { width: 100%; }
}
#ivResTable { scroll-margin-top: calc(var(--ielts-barre, 0px) + 72px); }
.res-table.iv-fautes-seules tr[data-ok] { display: none; }
/* Mesuré le 25/10 sur l'écran du score : le ✔ vert #128C4B sur blanc = 4,3:1. Le vert
   foncé de la charte (#0E7A40, 5,4:1) passe le seuil. */
.res-table td.ok { color: #0E7A40; }

/* ============================================================================
   25/10/2026 (Alex : « la liste des sujets dans prépa ielts doit être présentée en
   grille ») — LES TESTS EN GRILLE DE CARTES, comme l'espace TCF (#etcfSujets) :
   deux colonnes à l'ordinateur (jamais trois), une au téléphone, le bouton dans la
   carte. Le bloc des tests fermés devient une carte de la grille (cadenas +
   « Unlock »). La banque de sujets (renderBanque) prend la même grille.
   Pour l'abonné, la carte du test de « Today's session » est bordée de rouge ; son
   bouton reste en contour (le seul rouge est celui de la carte du jour).
   ============================================================================ */
.iv-sujets { gap: 12px; }
@media (min-width: 700px) { .iv-sujets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iv-sujets > .iv-sujet, .iv-sujets > .iv-verrous {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  min-height: 84px; padding: 16px 18px; border-radius: var(--r, 12px);
}
.iv-sujets > .iv-sujet .em, .iv-verrous-ic {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint-2); font-size: 1.2rem; line-height: 1;
}
.iv-sujets > .iv-sujet .infos b, .iv-verrous .infos b {
  font-family: Sora, Inter, sans-serif; font-size: 1rem; line-height: 1.3; color: var(--navy-dark, #171314);
}
.iv-sujets > .iv-sujet .infos small, .iv-verrous .infos small { font-size: .8rem; margin-top: 3px; color: var(--muted, #6B6462); }
/* Banque : l'amorce du sujet sur deux lignes au plus, au lieu d'une ligne coupée. */
.iv-sujets > .iv-sujet:not(.iv-ligne) .infos small {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.iv-sujets > .iv-sujet.iv-ligne .btn, .iv-verrous .btn { min-height: 44px; padding: .5rem 1.15rem; font-size: .92rem; }
.iv-verrous { grid-column: auto; background: var(--body-bg); border: 1px dashed #CFC9C7; }
.iv-verrous-ic { background: #F1EEED; color: var(--text-soft); }
.iv-sujet.conseille { border-color: var(--red-dark, #C21510); box-shadow: 0 8px 20px -14px rgba(23, 19, 20, .35); }
.iv-sujet.conseille .em { background: var(--tint, #FDF0EF); }
.iv-badge.conseil {
  display: inline-block; margin-top: 6px; background: #fff; color: var(--red-dark, #C21510);
  box-shadow: inset 0 0 0 1px currentColor; font-size: .72rem;
}
/* Banque : la pastille « ✔ model answer » passe sous l'amorce — le titre garde la largeur. */
.iv-sujets > .iv-sujet:not(.iv-ligne) { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
.iv-sujets > .iv-sujet:not(.iv-ligne) .em { grid-row: 1 / span 2; }
.iv-sujets > .iv-sujet:not(.iv-ligne) .iv-badge { grid-column: 2; justify-self: start; margin-top: 4px; }