/*
  Words Horizon — système de design partagé.
  Référence visuelle : la page Tutoriels (dégradé bleu → rose, cartes
  arrondies à ombre douce). Centralise ici ce qui était copié-collé
  (avec de petites variations) dans plusieurs vues : jauge de maîtrise,
  pastilles de filtre, cartes, héros dégradés, badges.
*/

:root {
  /* Palette d'accent (décorative : héros, texte en dégradé, badges).
     Le bleu d'action des boutons/liens (--bs-primary, #1e30f3) ne change pas. */
  --wh-blue: #0d6efd;
  --wh-purple: #6f42c1;
  --wh-pink: #d63384;

  --wh-gradient: linear-gradient(135deg, var(--wh-blue) 0%, var(--wh-pink) 100%);
  --wh-gradient-text: linear-gradient(90deg, var(--wh-blue), var(--wh-purple), var(--wh-pink));
  --wh-gradient-soft: linear-gradient(160deg, rgba(13, 110, 253, .06), rgba(111, 66, 193, .06));

  --wh-radius-sm: .75rem;
  --wh-radius: 1rem;
  --wh-radius-lg: 1.25rem;
  --wh-radius-pill: 999px;

  --wh-shadow-sm: 0 4px 15px rgba(0, 0, 0, .05);
  --wh-shadow: 0 8px 20px rgba(13, 110, 253, .12);
  --wh-shadow-lg: 0 14px 30px rgba(13, 110, 253, .18);

  --wh-border: rgba(13, 110, 253, .16);

  /* Rythme vertical entre sections d'une page */
  --wh-section-gap: clamp(2.5rem, 5vw, 4rem);
}

/* ===== Héros dégradé (bandeau plein, ex : barre de recherche Tutoriels) ===== */
.wh-hero {
  background: var(--wh-gradient);
  border-radius: var(--wh-radius-lg);
  padding: 2rem;
  color: #fff;
  box-shadow: var(--wh-shadow);
}
@media (max-width: 575.98px) {
  .wh-hero { padding: 1.5rem; border-radius: var(--wh-radius); }
}

/* ===== Titre en texte dégradé ===== */
.wh-gradient-text {
  background: var(--wh-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Carte standard : coin arrondi, ombre douce, léger lift au survol ===== */
.wh-card {
  background: #fff;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wh-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wh-shadow-lg);
  border-color: rgba(13, 110, 253, .35);
}
/* Panneaux/tableaux non cliquables : même look, sans le lift au survol */
.wh-card.wh-card-static:hover {
  transform: none;
  box-shadow: var(--wh-shadow-sm);
  border-color: var(--wh-border);
}
.wh-card .card-title,
.wh-card-title {
  font-weight: 700;
  background: var(--wh-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Variante « douce » pour un bandeau de mission / mise en avant, non cliquable */
.wh-panel-soft {
  border-radius: var(--wh-radius-lg);
  border: 1px solid var(--wh-border);
  background: var(--wh-gradient-soft);
  box-shadow: var(--wh-shadow-sm);
}

/* ===== Badge / pilule en dégradé plein (équivalent .filter-pill.active, .video-tag:hover) ===== */
.wh-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: var(--wh-radius-pill);
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
}
.wh-pill-gradient {
  background: var(--wh-gradient);
  color: #fff;
  border: none;
}

/* ===== Pastille de filtre (dédupliquée depuis revision/overview + themes/overview) ===== */
.filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter-pill {
  border: 1px solid var(--bs-gray-300);
  border-radius: var(--wh-radius-pill);
  padding: .25rem .75rem;
  font-size: .85rem;
  cursor: pointer;
  background: var(--bs-gray-100);
  user-select: none;
  transition: all .2s ease;
}
.filter-pill.active {
  background: var(--wh-blue);
  color: #fff;
  border-color: var(--wh-blue);
  font-weight: 600;
}

/* ===== Jauge circulaire de maîtrise (dédupliquée depuis apprendre/verbe,
   revision/overview, themes/overview — les trois étaient identiques) ===== */
.gauge {
  --size: 42px;
  --track: var(--bs-gray-200);
  --fill: var(--wh-blue);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: conic-gradient(var(--fill) var(--p), var(--track) 0);
  font-size: .72rem;
  font-weight: 600;
  color: var(--bs-gray-900);
}
.gauge span { transform: translateY(1px); }

/* ===== Rythme vertical de page : espace entre grands blocs de contenu ===== */
.wh-section + .wh-section {
  margin-top: var(--wh-section-gap);
}

/* ===== Carte d'authentification (connexion / inscription / mot de passe) ===== */
.wh-auth-card {
  background: #fff;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-lg);
  box-shadow: var(--wh-shadow);
  padding: 2.5rem 2.25rem;
}
@media (max-width: 575.98px) {
  .wh-auth-card { padding: 2rem 1.5rem; border-radius: var(--wh-radius); }
}
.wh-auth-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--wh-radius);
  background: var(--wh-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  margin: 0 auto 1.25rem;
  box-shadow: var(--wh-shadow);
}
/* Ce glyphe précis n'est pas centré dans sa propre boîte de dessin
   (case à part parmi les icônes utilisées ici) : recentrage manuel. */
.wh-auth-icon i.bi-box-arrow-in-right {
  transform: translate(-2px, -1px);
}

/* ===== Bandeau d'explication (remplace les alert-primary "Comment ça marche ?"
   dupliqués dans apprendre/revision/themes) ===== */
.wh-info-banner {
  border-radius: var(--wh-radius);
  border: 1px solid var(--wh-border);
  background: var(--wh-gradient-soft);
  padding: 1rem 1.25rem;
}

/* Variantes sémantiques (état bloquant / avertissement grave) */
.wh-banner-warning {
  border-radius: var(--wh-radius);
  border: 1px solid rgba(255, 193, 7, .4);
  background: rgba(255, 193, 7, .12);
  color: #664d03;
  padding: 1rem 1.25rem;
}
.wh-banner-danger {
  border-radius: var(--wh-radius);
  border: 1px solid rgba(214, 51, 132, .35);
  background: rgba(214, 51, 132, .08);
  color: var(--wh-pink);
  padding: 1rem 1.25rem;
}

/* ===== Choix de langue (dédupliqué depuis apprendre/langueverbes,
   themes/langue, evaluation/langueeval — trois copies identiques) ===== */
.wh-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 460px;
  margin: 0 auto;
}
.wh-lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.75rem 1rem;
  text-decoration: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font: inherit; /* reset UA defaults when applied to a <button> */
}
.wh-lang-card__flag { font-size: 2.25rem; line-height: 1; }
.wh-lang-card__name { font-weight: 700; color: var(--bs-body-color); }

/* ===== Barre d'outils secondaire (tri, sélection, filtres) =====
   Boutons discrets : la couleur est réservée à l'action principale
   (Lancer le quiz/test) et aux choix actifs (mode, filtres).
   Défini via les variables --bs-btn-* (comme .btn-primary etc.) pour
   pouvoir se combiner proprement avec .btn-lg / .btn-sm au besoin. */
.wh-toolbar-btn {
  --bs-btn-color: var(--bs-gray-700);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-gray-300);
  --bs-btn-hover-color: var(--bs-gray-900);
  --bs-btn-hover-bg: var(--bs-gray-100);
  --bs-btn-hover-border-color: var(--bs-gray-400);
  --bs-btn-active-color: var(--bs-gray-900);
  --bs-btn-active-bg: var(--bs-gray-200);
  --bs-btn-active-border-color: var(--bs-gray-400);
  --bs-btn-border-radius: var(--wh-radius-pill);
  --bs-btn-font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  white-space: nowrap;
}
.wh-toolbar-btn.wh-toolbar-btn-caution {
  --bs-btn-color: var(--wh-pink);
  --bs-btn-border-color: rgba(214, 51, 132, .35);
  --bs-btn-hover-color: var(--wh-pink);
  --bs-btn-hover-bg: rgba(214, 51, 132, .08);
  --bs-btn-hover-border-color: var(--wh-pink);
}

/* ===== +/- de maîtrise, à côté de la jauge =====
   Pas de bouton/zone visible : juste le signe, en bleu, qui apparaît
   au survol de la ligne (− à gauche de la jauge, + à droite). */
.wh-mastery-btn {
  width: 16px;
  border: none;
  background: transparent;
  color: var(--wh-blue);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}
tr:hover .wh-mastery-btn:not(:disabled) { opacity: 1; }
.wh-mastery-btn:hover:not(:disabled) { color: var(--wh-purple); }
.wh-mastery-btn:disabled { cursor: default; }

/* ===== Barre de progression (quiz en cours, score de fin de quiz) ===== */
.wh-progress-bar {
  height: 6px;
  border-radius: var(--wh-radius-pill);
  background: var(--bs-gray-200);
  overflow: hidden;
}
.wh-progress-bar__fill {
  height: 100%;
  background: var(--wh-gradient);
  transition: width .3s ease;
}

/* ===== Bandeau de feedback (bonne / mauvaise réponse) ===== */
.wh-feedback {
  border-radius: var(--wh-radius);
  padding: .9rem 1.1rem;
  font-weight: 500;
}
.wh-feedback.is-success { background: rgba(25, 135, 84, .1); color: #146c43; }
.wh-feedback.is-error { background: rgba(214, 51, 132, .08); color: var(--wh-pink); }

/* ===== Contenu de classe (devoir/lien/vidéo/document/liste) —
   partagé entre classeprof.ejs et classeeleve.ejs ===== */
.wh-content-item { border-left: 4px solid var(--bs-gray-300); }
.wh-content-item.homework { border-left-color: var(--wh-pink); }
.wh-content-item.link { border-left-color: var(--wh-blue); }
.wh-content-item.video { border-left-color: var(--wh-purple); }
.wh-content-item.document { border-left-color: #fd7e14; }
.wh-content-item.list { border-left-color: #198754; }
.wh-content-item.is-completed { opacity: .75; border-left-color: #198754; }

.wh-content-icon {
  width: 34px; height: 34px; border-radius: var(--wh-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff; flex: 0 0 auto;
}
.wh-content-icon.homework { background: var(--wh-pink); }
.wh-content-icon.link { background: var(--wh-blue); }
.wh-content-icon.video { background: var(--wh-purple); }
.wh-content-icon.document { background: #fd7e14; }
.wh-content-icon.list { background: #198754; }

.wh-stat-pill {
  background: var(--bs-gray-100); color: var(--bs-gray-700); border: 1px solid var(--bs-gray-300);
  padding: .2rem .55rem; border-radius: var(--wh-radius-pill); font-size: .75rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .3rem;
}
.wh-stat-pill.success { background: #d1e7dd; color: #0f5132; border-color: #a3cfbb; }
.wh-stat-pill.warning { background: #fff3cd; color: #664d03; border-color: #ffda6a; }
.wh-stat-pill.danger { background: rgba(214,51,132,.08); color: var(--wh-pink); border-color: rgba(214,51,132,.3); }

/* ===== Réponse juste / fausse dans un corrigé =====
   Un seul langage visuel (icône + couleur, jamais la couleur seule)
   partout où on affiche "ce que vous avez répondu" vs "la bonne
   réponse", pour ne plus avoir à écrire "(faute : X → Y)" en toutes
   lettres à chaque fois. */
.wh-answer-wrong, .wh-answer-correct {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}
.wh-answer-wrong { color: var(--wh-pink); }
.wh-answer-wrong::before { content: "✗"; font-size: .75em; }
.wh-answer-correct { color: #146c43; font-weight: 600; }
.wh-answer-correct::before { content: "✓"; font-size: .75em; }

/* ===== Grammaire : frise des temps =====
   Grille avec les périodes (Passé/Présent/Futur) en en-têtes de
   colonnes — la "frise chronologique" — et les aspects (Simple,
   Continu, Parfait, Parfait continu) en en-têtes de lignes ; chaque
   croisement est une bulle cliquable vers la leçon du temps. */
.wh-grammar-grid {
  display: grid;
  grid-template-columns: minmax(90px, auto) repeat(3, 1fr);
  gap: .6rem;
  min-width: 560px;
}
.wh-grammar-grid__colhead {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  padding: .6rem .5rem;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-gradient-soft);
  color: var(--bs-gray-800);
  position: relative;
}
.wh-grammar-grid__colhead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.5rem;
  height: 3px;
  background: var(--wh-gradient);
}
.wh-grammar-grid__colhead--future::after {
  background: linear-gradient(90deg, var(--wh-purple), var(--wh-pink) 85%, transparent);
}
.wh-grammar-grid__corner,
.wh-grammar-grid__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f8f9fa;
}
.wh-grammar-grid__rowhead {
  display: flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--bs-gray-600);
}
.wh-grammar-bubble {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .15rem;
  padding: 1rem .5rem;
  min-height: 88px;
  border-radius: var(--wh-radius-lg);
  background: #fff;
  border: 1px solid var(--wh-border);
  box-shadow: var(--wh-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, z-index .2s;
}
.wh-grammar-bubble:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--wh-shadow-lg);
  z-index: 2;
}
.wh-grammar-bubble__name { font-weight: 700; font-size: .92rem; }
.wh-grammar-bubble__namefr { font-size: .78rem; color: var(--bs-gray-600); }
.wh-grammar-bubble__actions {
  display: flex;
  width: 100%;
  gap: .35rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.wh-grammar-bubble:hover .wh-grammar-bubble__actions { max-height: 40px; opacity: 1; margin-top: .6rem; }
.wh-grammar-bubble__action {
  flex: 1 1 50%;
  padding: .3rem .3rem;
  border-radius: var(--wh-radius-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: .7rem;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.wh-grammar-bubble__action--lecon { background: var(--wh-gradient-soft); color: var(--wh-blue); }
.wh-grammar-bubble__action--lecon:hover { background: var(--wh-blue); color: #fff; }
.wh-grammar-bubble__action--exercice { background: var(--wh-gradient-soft); color: var(--wh-pink); }
.wh-grammar-bubble__action--exercice:hover { background: var(--wh-pink); color: #fff; }

/* Pas de hover sur tactile : les deux liens restent visibles en permanence. */
@media (hover: none) {
  .wh-grammar-bubble__actions { max-height: 40px; opacity: 1; margin-top: .6rem; }
}
.wh-grammar-bubble--empty { background: transparent; border: 1px dashed var(--bs-gray-200); box-shadow: none; }

/* Temps réservés au premium : bulle atténuée + cadenas à côté du nom. */
.wh-grammar-bubble--locked { opacity: .55; }
.wh-grammar-bubble--locked:hover { opacity: .85; }
.wh-grammar-bubble__lock { font-size: .7rem; color: var(--wh-blue); margin-left: .25rem; }

/* ===== Frise chronologique des temps anglais (native, pas une image) ===== */
.wh-eng-timeline {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 300px;
  margin: 0 auto;
}
.wh-eng-timeline__anchor {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wh-eng-timeline__chip {
  display: inline-block;
  padding: .4rem .75rem;
  border-radius: var(--wh-radius);
  border: 2px solid;
  background: #fff;
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--wh-shadow-sm);
}
.wh-eng-timeline__stem {
  width: 2px;
  height: 22px;
  margin-top: 2px;
  opacity: .5;
}
.wh-eng-timeline__axis {
  position: absolute;
  top: 74px;
  left: 3%;
  right: 3%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0d6efd, #4f3cc9, #6f42c1, #d63384);
}
.wh-eng-timeline__axis::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #d63384;
}
.wh-eng-timeline__dot {
  position: absolute;
  top: 66px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid;
}
.wh-eng-timeline__duration {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wh-eng-timeline__duration--row1 { top: 108px; }
.wh-eng-timeline__duration--row2 { top: 172px; }
.wh-eng-timeline__duration--row3 { top: 236px; }
.wh-eng-timeline__duration-arrow {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}
.wh-eng-timeline__duration-arrow::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--wh-arrow-end, currentColor);
}
.wh-eng-timeline__duration-label {
  font-weight: 700;
  font-size: .8rem;
  color: currentColor;
  margin-top: .35rem;
}
.wh-eng-timeline__duration-desc {
  font-size: .72rem;
  color: var(--bs-gray-600);
  margin-top: .1rem;
  max-width: 220px;
}

/* Frise : version mobile, liste verticale simplifiée */
.wh-eng-timeline-mobile__anchors { display: flex; flex-direction: column; align-items: flex-start; }
.wh-eng-timeline-mobile__anchor { display: flex; align-items: center; gap: .6rem; }
.wh-eng-timeline-mobile__dot {
  width: 14px; height: 14px; flex: 0 0 auto;
  border-radius: 50%; border: 3px solid; background: #fff;
}
.wh-eng-timeline-mobile__chip { font-weight: 700; font-size: .88rem; color: currentColor; }
.wh-eng-timeline-mobile__connector { width: 2px; height: 16px; background: var(--bs-gray-300); margin-left: 6px; }
.wh-eng-timeline-mobile__durations { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.wh-eng-timeline-mobile__duration { padding-left: .75rem; border-left: 3px solid currentColor; }
.wh-eng-timeline-mobile__duration-label { display: block; font-weight: 700; font-size: .85rem; color: currentColor; }
.wh-eng-timeline-mobile__duration-desc { display: block; font-size: .78rem; color: var(--bs-gray-600); }

/* Extrait de frise en haut d'une fiche de temps : situe le temps de la page
   sur un mini axe passé/présent/futur, avec sa référence quand elle existe
   (ex. Past Perfect situé avant Simple Past). */
.wh-tense-excerpt {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 80px;
  margin: 0 auto 1.75rem;
}
.wh-tense-excerpt__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bs-gray-300);
}
.wh-tense-excerpt__anchor {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.wh-tense-excerpt__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--bs-gray-400);
  background: #fff;
  margin: 0 auto;
}
.wh-tense-excerpt__anchor--active .wh-tense-excerpt__dot { width: 16px; height: 16px; border-color: currentColor; }
.wh-tense-excerpt__label {
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 600;
  color: var(--bs-gray-500);
  white-space: nowrap;
}
.wh-tense-excerpt__anchor--active .wh-tense-excerpt__label { font-size: .8rem; font-weight: 700; color: currentColor; }
.wh-tense-excerpt__span {
  position: absolute;
  top: calc(50% - 3px);
  height: 6px;
  border-radius: 3px;
  background: var(--wh-span-color);
  opacity: .85;
  z-index: 1;
}
.wh-tense-excerpt__span::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--wh-span-color);
}
.wh-tense-excerpt__span--fade {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
}
.wh-tense-excerpt__span--ongoing {
  background: repeating-linear-gradient(90deg, var(--wh-span-color) 0 7px, transparent 7px 11px);
  opacity: 1;
}
.wh-tense-excerpt__span-label {
  position: absolute;
  top: calc(50% - 25px);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Bouton de prononciation par son, dans les tableaux "Prononciation du -s/-ed" */
.wh-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: .45rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wh-blue);
  color: #fff;
  font-size: .68rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  flex: 0 0 auto;
  transition: background .15s ease, transform .1s ease;
}
.wh-sound-btn:hover { background: var(--wh-purple); }
.wh-sound-btn:active { transform: scale(.9); }

@media (max-width: 575.98px) {
  .wh-grammar-grid { grid-template-columns: minmax(60px, auto) repeat(3, 1fr); gap: .4rem; }
  .wh-grammar-bubble { padding: .6rem .3rem; min-height: 72px; }
  .wh-grammar-bubble__name { font-size: .78rem; }
  .wh-grammar-bubble__namefr { font-size: .68rem; }
  .wh-grammar-grid__colhead { font-size: .78rem; padding: .45rem .3rem; }
}

/* ===== Contenu de la leçon "Comment fonctionnent les temps" ===== */
.wh-grammar-lesson { width: 100%; }
.wh-grammar-lesson p { color: var(--bs-gray-700); line-height: 1.65; }
.wh-grammar-lesson strong { color: var(--bs-gray-900); }
.wh-grammar-lesson__formtitle {
  background: var(--wh-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 1.35rem;
}
.wh-grammar-lesson hr { border: none; border-top: 1px solid var(--bs-gray-200); }
.wh-grammar-lesson__chain {
  display: block;
  width: fit-content;
  margin: .5rem 0 1rem;
  padding: .5rem 1.25rem;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-gradient-soft);
  color: var(--wh-purple);
  font-weight: 700;
  text-align: center;
}
.wh-grammar-lesson__list {
  padding-left: 1.1rem;
  color: var(--bs-gray-700);
}
.wh-grammar-lesson__list li { margin-bottom: .3rem; line-height: 1.6; }
.wh-grammar-lesson__list li:last-child { margin-bottom: 0; }
/* Lien vers une autre partie du site (notion de grammaire, verbes irréguliers...) :
   pas de soulignement statique — un reflet lumineux traverse le texte au survol,
   et un trait en dégradé se dessine en dessous. */
.wh-grammar-lesson__cta {
  position: relative;
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--wh-purple);
  background-image: linear-gradient(100deg,
    var(--wh-purple) 0%, var(--wh-purple) 45%,
    #fff 50%,
    var(--wh-purple) 55%, var(--wh-purple) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .8s ease;
}
.wh-grammar-lesson__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wh-blue), var(--wh-purple), var(--wh-pink));
  transition: right .35s ease;
}
.wh-grammar-lesson__cta:hover { background-position: 0% 0; }
.wh-grammar-lesson__cta:hover::after { right: 0; }
@media (prefers-reduced-motion: reduce) {
  .wh-grammar-lesson__cta { transition: none; }
  .wh-grammar-lesson__cta::after { transition: none; }
}
.wh-grammar-lesson__quote {
  margin: .25rem 0 1rem;
  padding: .5rem 0 .5rem 1rem;
  border-left: 3px solid var(--bs-gray-300);
  color: var(--bs-gray-600);
  font-style: italic;
}
.wh-grammar-lesson__quote--accent {
  border-left-color: var(--wh-pink);
  color: var(--wh-pink);
  font-weight: 600;
  font-style: normal;
}

/* Tableaux (conjugaisons, mots-signaux, règles d'orthographe...) */
.wh-grammar-lesson table {
  width: 100%;
  border-collapse: collapse;
  margin: .25rem 0 1.25rem;
  font-size: .88rem;
}
.wh-grammar-lesson th, .wh-grammar-lesson td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--bs-gray-200);
  text-align: left;
  vertical-align: top;
}
.wh-grammar-lesson thead th {
  background: var(--wh-gradient-soft);
  font-weight: 700;
  color: var(--bs-gray-800);
  white-space: nowrap;
}
.wh-grammar-lesson tbody tr:last-child td { border-bottom: none; }
.wh-grammar-lesson__tablecaption {
  font-weight: 700;
  font-size: .85rem;
  color: var(--bs-gray-700);
  margin: 1rem 0 .35rem;
}
.wh-grammar-lesson__wordpairs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.wh-grammar-lesson__wordpair {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: var(--wh-radius-pill);
  background: var(--bs-gray-100);
  font-size: .85rem;
  color: var(--bs-gray-800);
}

/* Les 3 cas d'usage (habitude / vérité générale / horaire fixe) */
.wh-grammar-lesson__usecases { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.25rem; }
.wh-grammar-lesson__usecase {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .7rem 1rem;
  border-radius: var(--wh-radius);
  background: var(--wh-gradient-soft);
}
.wh-grammar-lesson__usecase-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.05rem;
}
.wh-grammar-lesson__usecase-icon--blue { background: var(--wh-blue); }
.wh-grammar-lesson__usecase-icon--purple { background: var(--wh-purple); }
.wh-grammar-lesson__usecase-icon--pink { background: var(--wh-pink); }
.wh-grammar-lesson__usecase-icon--green { background: #146c43; }
.wh-grammar-lesson__usecase-body strong { display: block; margin-bottom: .15rem; color: var(--bs-gray-900); }
.wh-grammar-lesson__usecase-en { font-style: italic; color: var(--bs-gray-800); }
.wh-grammar-lesson__usecase-fr { font-size: .85rem; color: var(--bs-gray-600); }

/* Astuce (tip) */
.wh-grammar-lesson__tip {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border-radius: var(--wh-radius);
  background: rgba(13, 110, 253, .06);
  border-left: 3px solid var(--wh-blue);
  font-size: .88rem;
  color: var(--bs-gray-700);
}

/* Piège à éviter */
.wh-grammar-lesson__pitfall {
  margin: 0 0 1.25rem;
  padding: .75rem 1rem;
  border-radius: var(--wh-radius);
  background: rgba(214, 51, 132, .06);
  border-left: 3px solid var(--wh-pink);
  font-size: .9rem;
}
.wh-grammar-lesson__pitfall-title { display: block; font-weight: 700; color: var(--wh-pink); margin-bottom: .35rem; }
.wh-grammar-lesson__wrong { color: var(--wh-pink); text-decoration: line-through; }
.wh-grammar-lesson__right { color: #146c43; font-weight: 600; }

/* Phrase à trou (exercice rapide, réponse dépliable) */
.wh-grammar-lesson__practice {
  margin: 0 0 1.5rem;
  padding: .9rem 1.1rem;
  border-radius: var(--wh-radius);
  border: 1px dashed var(--bs-gray-300);
}
.wh-grammar-lesson__practice-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--bs-gray-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
.wh-grammar-lesson__practice-q { font-weight: 600; color: var(--bs-gray-800); }
.wh-grammar-lesson__blank {
  display: inline-block;
  min-width: 64px;
  border-bottom: 2px solid var(--wh-blue);
  margin: 0 .2rem;
  vertical-align: baseline;
}
.wh-grammar-lesson__practice details summary {
  cursor: pointer;
  color: var(--wh-blue);
  font-weight: 600;
  font-size: .85rem;
  margin-top: .5rem;
  list-style: none;
}
.wh-grammar-lesson__practice details summary::-webkit-details-marker { display: none; }
.wh-grammar-lesson__practice details summary::after { content: "Voir la réponse ▸"; }
.wh-grammar-lesson__practice details[open] summary::after { content: "Masquer ▾"; }
.wh-grammar-lesson__practice details p { margin: .5rem 0 0; color: #146c43; font-weight: 700; }

/* Exercices interactifs (saisie + QCM), page /grammaire/:slug */
/* Phrase de référence (point de départ donné) affichée sur sa propre ligne,
   distincte visuellement de la consigne à trous juste en dessous. */
.wh-grammar-exercise__ref {
  color: var(--wh-blue);
  font-style: italic;
  font-weight: 500;
  margin: 0 0 .35rem;
}
.wh-grammar-exercise__input {
  border: none;
  border-bottom: 2px solid var(--wh-blue);
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
  padding: 0 .2rem;
  min-width: 110px;
  outline: none;
}
.wh-grammar-exercise__input--inline { width: 150px; text-align: center; margin: 0 .2rem; }
.wh-grammar-exercise__input:focus { border-bottom-color: var(--wh-purple); }
.wh-grammar-exercise__input.is-correct { border-bottom-color: #146c43; color: #146c43; }
.wh-grammar-exercise__input.is-wrong { border-bottom-color: var(--wh-pink); color: var(--wh-pink); }
.wh-grammar-exercise__answer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  margin-top: .3rem;
}
.wh-grammar-exercise__answer-row .wh-grammar-exercise__input { flex: 1 1 180px; }
.wh-grammar-exercise__check {
  display: block;
  margin-top: .6rem;
  padding: .3rem 1rem;
  border-radius: var(--wh-radius-pill);
  border: none;
  background: var(--wh-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: filter .15s ease;
  flex-shrink: 0;
}
.wh-grammar-exercise__answer-row .wh-grammar-exercise__check { margin-top: 0; }
.wh-grammar-exercise__check:hover { filter: brightness(1.08); }
.wh-grammar-exercise__feedback-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .5rem;
}
.wh-grammar-exercise__feedback {
  font-weight: 700;
  font-size: .85rem;
  min-height: 1.2em;
}
.wh-grammar-exercise__feedback--ok { color: #146c43; }
.wh-grammar-exercise__feedback--ko { color: var(--wh-pink); }
.wh-grammar-exercise__choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.wh-grammar-exercise__choice {
  padding: .35rem .9rem;
  border-radius: var(--wh-radius-pill);
  border: 1px solid var(--wh-border);
  background: #fff;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wh-grammar-exercise__choice:hover { border-color: var(--wh-blue); }
.wh-grammar-exercise__choice.is-correct { background: #d1e7dd; border-color: #146c43; color: #146c43; }
.wh-grammar-exercise__choice.is-wrong { background: rgba(214, 51, 132, .08); border-color: var(--wh-pink); color: var(--wh-pink); }
.wh-grammar-exercise__why {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem;
  border-radius: var(--wh-radius-pill);
  border: 1.5px solid var(--wh-purple);
  background: var(--wh-gradient-soft);
  color: var(--wh-purple);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wh-grammar-exercise__why i { font-size: .95rem; }
.wh-grammar-exercise__why:hover { background: var(--wh-gradient); color: #fff; border-color: transparent; }
.wh-grammar-exercise__why:disabled { opacity: .65; cursor: default; background: var(--wh-gradient-soft); color: var(--wh-purple); border-color: var(--wh-purple); }
.wh-grammar-exercise__explanation {
  margin-top: .5rem;
  padding: .6rem .8rem;
  border-radius: .6rem;
  background: rgba(13, 110, 253, .06);
  border: 1px solid rgba(13, 110, 253, .15);
  font-size: .85rem;
  color: inherit;
}
.wh-grammar-exercise__explanation:empty { display: none; }
.wh-grammar-exercise__correction {
  margin-top: .35rem;
  font-style: italic;
}
.wh-grammar-exercise__correction:empty { display: none; }

/* Bloc "Comment fonctionnent ces exercices ?" repliable, page /grammaire/:slug/exercices */
.wh-grammar-intro__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.wh-grammar-intro__summary::-webkit-details-marker { display: none; }
.wh-grammar-intro__summary i.bi-info-circle { color: var(--wh-blue); margin-right: .5rem; }
.wh-grammar-intro__chevron { transition: transform .2s ease; color: var(--bs-gray-500); flex-shrink: 0; }
.wh-grammar-intro[open] .wh-grammar-intro__chevron { transform: rotate(180deg); }

/* Bouton profil du header : contour en dégradé de marque Words Horizon (bleu -> rose),
   fond blanc conservé. Astuce double-fond pour un "border-image" arrondi. */
.wh-profile-btn {
  background-image: linear-gradient(#fff, #fff), var(--wh-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  color: var(--wh-blue);
}
.wh-profile-btn:hover,
.wh-profile-btn:focus,
.wh-profile-btn.show {
  background-image: linear-gradient(#fff, #fff), var(--wh-gradient);
  color: var(--wh-blue);
  box-shadow: 0 4px 14px rgba(13, 110, 253, .25);
}
/* Caret Bootstrap masquée : remplacée par une icône bi-chevron-down en dégradé. */
.wh-profile-btn.dropdown-toggle::after { display: none; }

/* Bouton d'incitation Premium (flottant bas-gauche, comptes non premium) : dégradé de
   marque toujours coloré (pas la variable --wh-gradient, aplatie en bleu uni pour ce
   public par .wh-tier-free) + reflet lumineux qui balaie le bouton en boucle. */
.wh-premium-shine-btn {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1060;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .65rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wh-blue) 0%, var(--wh-pink) 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(13, 110, 253, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wh-premium-shine-btn:hover,
.wh-premium-shine-btn:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(13, 110, 253, .45);
}
@media (max-width: 575.98px) {
  .wh-premium-shine-btn { left: .85rem; bottom: .85rem; padding: .55rem 1rem; }
}
.wh-premium-shine-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-20deg);
  animation: wh-premium-shine 2.6s ease-in-out infinite;
}
@keyframes wh-premium-shine {
  0% { left: -60%; }
  35% { left: 130%; }
  100% { left: 130%; }
}

/* Widget de traduction IA (comptes premium) : bouton flottant bas-droite,
   popup ouverte au survol ou au clic. */
.wh-ai-translate {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1060;
}
.wh-ai-translate__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wh-gradient);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: var(--wh-shadow-lg);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wh-ai-translate__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13, 110, 253, .3); }
.wh-ai-translate__popup {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 300px;
  max-width: calc(100vw - 2.5rem);
  background: #fff;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow-lg);
  padding: 1rem;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wh-ai-translate.is-open .wh-ai-translate__popup {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wh-ai-translate__header {
  font-weight: 700;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--wh-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wh-ai-translate__header i { color: var(--wh-purple); -webkit-text-fill-color: var(--wh-purple); }
.wh-ai-translate__input {
  width: 100%;
  border: 1px solid var(--wh-border);
  border-radius: .5rem;
  padding: .5rem .6rem;
  font-size: .9rem;
  resize: none;
}
.wh-ai-translate__result {
  margin-top: .6rem;
  font-size: .9rem;
  min-height: 1.2em;
  color: var(--bs-gray-700);
  white-space: pre-wrap;
}
.wh-ai-translate__result.is-error { color: var(--wh-pink); }
@media (max-width: 575.98px) {
  .wh-ai-translate { right: .85rem; bottom: .85rem; }
}

/* Widget de prononciation : même composant, empilé au-dessus du traducteur. */
.wh-ai-pronounce { bottom: 5.5rem; }
@media (max-width: 575.98px) {
  .wh-ai-pronounce { right: .85rem; bottom: 4.75rem; }
}

/* Dégradés de marque réservés aux comptes premium : les membres non premium
   voient une couleur pleine à la place, partout où --wh-gradient(-text|-soft)
   est utilisé (boutons, badges, jauges, texte de titre, etc.).
   Note : on réutilise linear-gradient(couleur, couleur) plutôt qu'une couleur
   nue, car --wh-gradient est aussi combinée dans une liste multi-couches
   (ex. .wh-profile-btn) où une valeur non-<image> invaliderait toute la
   déclaration background-image. */
body.wh-tier-free {
  --wh-gradient: linear-gradient(var(--wh-blue), var(--wh-blue));
  --wh-gradient-text: linear-gradient(var(--wh-blue), var(--wh-blue));
  --wh-gradient-soft: rgba(13, 110, 253, .08);
}
body.wh-tier-free .wh-eng-timeline__axis { background: var(--wh-blue); }

/* Bascule "Vue simple / Vue détaillée" en haut des pages méthodologie CPGE —
   un vrai contrôle segmenté (fond gris, onglet actif rempli du dégradé du
   site) plutôt qu'un discret soulignement, pour que ce choix se voie
   immédiatement. Partagée par ccinp.ejs / mines.ejs / centrale.ejs. */
.wh-cpge-tabs {
  display: inline-flex;
  gap: .25rem;
  background: var(--bs-gray-100);
  border-radius: 999px;
  padding: .3rem;
  margin-bottom: 2rem;
}
.wh-cpge-tab {
  border: none;
  background: none;
  padding: .55rem 1.35rem;
  font-weight: 700;
  font-size: .88rem;
  color: var(--bs-gray-600);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wh-cpge-tab:hover { color: var(--wh-blue); }
.wh-cpge-tab.active {
  background: var(--wh-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13, 110, 253, .3);
}

/* Pages de contenu CPGE (fiches méthodologie par concours) : sommaire ancré,
   fiches clés, cartes de critères, encart d'alerte, listes à puces et grille
   d'auto-évaluation. Classes partagées par tous les fichiers cpge/_content/*.ejs. */
.wh-cpge-content-toc {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
  }
  .wh-cpge-content-toc a {
    font-size: .82rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--wh-gradient-soft);
    color: var(--wh-blue);
    text-decoration: none;
  }
  .wh-cpge-content-toc a:hover { background: var(--wh-gradient); color: #fff; }

  .wh-cpge-content-section { margin-bottom: 2.75rem; scroll-margin-top: 1rem; }
  .wh-cpge-content-section h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
  }
  .wh-cpge-content-section h3 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
  .wh-cpge-content-section h4 { font-size: .88rem; font-weight: 700; color: var(--bs-gray-700); margin: 1rem 0 .4rem; }
  .wh-cpge-content-section .accordion-body h4:first-child { margin-top: 0; }

  .wh-cpge-content-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .85rem;
  }
  .wh-cpge-content-fact {
    padding: 1rem;
    border-radius: .9rem;
    background: var(--bs-gray-100);
  }
  /* Variante utilisée pour "Les contraintes fixées par le sujet" (coup d'œil) :
     cartes blanches bordées, sans carré englobant. */
  .wh-cpge-content-facts--bordered .wh-cpge-content-fact {
    background: #fff;
    border: 1px solid var(--wh-border);
  }
  .wh-cpge-content-fact strong { display: block; color: var(--wh-blue); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }

  .wh-cpge-content-criteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
  .wh-cpge-content-criterion { padding: 1rem; border-radius: .9rem; border: 1px solid var(--bs-gray-200); text-align: center; }
  .wh-cpge-content-criterion i { font-size: 1.4rem; color: var(--wh-blue); margin-bottom: .4rem; display: block; }

  .wh-cpge-content-callout {
    display: flex;
    gap: .65rem;
    padding: .9rem 1.1rem;
    border-radius: .9rem;
    background: rgba(220, 53, 69, .07);
    border: 1px solid rgba(220, 53, 69, .18);
  }
  .wh-cpge-content-callout i { color: #dc3545; flex-shrink: 0; margin-top: .15rem; }

  .wh-cpge-content-errors { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
  .wh-cpge-content-errors li { display: flex; gap: .6rem; align-items: flex-start; }
  .wh-cpge-content-errors i { color: #dc3545; margin-top: .2rem; flex-shrink: 0; }

  .wh-cpge-content-checklist { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .45rem; }
  .wh-cpge-content-checklist li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; }
  .wh-cpge-content-checklist i { color: var(--wh-blue); margin-top: .2rem; flex-shrink: 0; }

  .wh-cpge-content-adverbs { display: flex; flex-wrap: wrap; gap: .5rem; }
  .wh-cpge-content-adverbs span { padding: .3rem .75rem; border-radius: 999px; background: var(--wh-gradient-soft); color: var(--wh-blue); font-size: .82rem; font-weight: 600; }

  .wh-cpge-content-section .table { font-size: .9rem; }