/* ============================================================
   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); }
/* 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: #0A5C33; border: 1px solid #BFE5CE; }
.iv-msg.info { background: #FBF3DC; color: #7A5A10; 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; }
.iv-crit { border-left: 3px solid var(--tint-line); padding: 4px 0 4px 14px; 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 5 jours de pack : 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; }
.iv-acces-bandeau .pack-chrono-val { font-variant-numeric: tabular-nums; }

.iv-acces-bandeau.decouverte {
  background: #FBF3DC; border-color: #EFE2BE; color: #6B5A22;
}
.iv-acces-bandeau.decouverte b { color: #7A5A10; }
.iv-acces-bandeau.decouverte .iv-btn { flex-shrink: 0; }

/* 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). */
.iv-btn { background: var(--red-dark, #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; }