/* ==================================================================
   IVANN VISUAL BUGS FIX #33 — Issues détectés par audit screenshot
   ================================================================== */

/* ============================================================
   BUG 1 : Light beam top — glow trop intense (paraît être une grosse bar)
   On le retire complètement. Le scanline était un gimmick décoratif inutile.
   ============================================================ */

body.izi-game-dedicated::before,
body.izi-game-home::before,
body.izi-game::before {
  display: none !important;
}

/* On garde le bg aurora mais sans la barre fixed */

/* ============================================================
   BUG 2 : Cards exercices restent blanches sur pages cours
   .views-row.exercise-is-todo / exercise-is-done
   ============================================================ */

html body[class] .views-row.exercise-is-todo,
html body[class] .views-row.exercise-is-done,
html body[class] .views-row[class*="exercise-is-"],
html body[class] .views-row.exercise-card,
html body[class] [class*="course-exercises-progress"] .views-row,
html body[class] .ivann-exercises-view .views-row,
html body[class] .view-exercices-du-cours .views-row {
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  background-color: transparent !important;
  background-image: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--g-text, #e8eaf3) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

html body[class] .views-row.exercise-is-todo:hover,
html body[class] .views-row.exercise-is-done:hover,
html body[class] .views-row[class*="exercise-is-"]:hover {
  border-color: rgba(0, 225, 255, 0.3) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 16px -4px rgba(0, 225, 255, 0.3);
}

/* Variantes de status */
html body[class] .views-row.exercise-is-done {
  background: linear-gradient(160deg, rgba(0, 255, 157, 0.06), rgba(16, 185, 129, 0.02)) !important;
  border-color: rgba(0, 255, 157, 0.25) !important;
}

/* Texte des cards exercices */
html body[class] .views-row[class*="exercise-is-"] *,
html body[class] [class*="course-exercises-progress"] .views-row *,
html body[class] .ivann-exercises-view .views-row *,
html body[class] .view-exercices-du-cours .views-row * {
  background-color: transparent !important;
  color: inherit;
}

html body[class] .views-row[class*="exercise-is-"] h2,
html body[class] .views-row[class*="exercise-is-"] h3,
html body[class] .views-row[class*="exercise-is-"] .views-field-title {
  color: var(--g-text-bright, #ffffff) !important;
}

/* Status badges À FAIRE / FAIT à l'intérieur */
html body[class] .views-row[class*="exercise-is-todo"] .exercise-status-badge,
html body[class] .views-row[class*="exercise-is-todo"] [class*="status"] {
  background: rgba(255,255,255,0.06) !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

html body[class] .views-row.exercise-is-done .exercise-status-badge,
html body[class] .views-row.exercise-is-done [class*="status"] {
  background: rgba(0, 255, 157, 0.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(0, 255, 157, 0.3) !important;
}

/* ============================================================
   BUG 3 : Toast level-up qui reste affiché
   On force pointer-events:none et auto-hide après 5s via animation
   ============================================================ */

body.izi-game .ivann-xp-toast,
body.izi-game .ivann-xp-toast--levelup {
  pointer-events: none;
  animation: toastInOut 5s ease-in-out 1 forwards !important;
}

@keyframes toastInOut {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.95); }
  10%  { opacity: 1; transform: none; }
  85%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); visibility: hidden; }
}

/* Si le JS pose .is-leaving on cleanup propre */
body.izi-game .ivann-xp-toast.is-leaving {
  opacity: 0 !important;
  transform: translateY(-8px);
  pointer-events: none;
}

/* ============================================================
   BUG 4 : /profil pseudo input row mal proportionné
   ============================================================ */

body.izi-game .profil-pseudo-row {
  display: flex !important;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 1.25rem;
}

body.izi-game .profil-pseudo-row label {
  flex: 0 0 auto;
  margin-right: 0;
}

body.izi-game .profil-pseudo-row input[type="text"] {
  flex: 1 1 auto !important;
  min-width: 0;
  max-width: 320px;
}

body.izi-game .profil-pseudo-row .btn-save,
body.izi-game .profil-pseudo-row button {
  flex: 0 0 auto !important;
}

@media (max-width: 600px) {
  body.izi-game .profil-pseudo-row {
    flex-wrap: wrap;
  }
  body.izi-game .profil-pseudo-row input[type="text"] {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================================
   BUG 5 : XP bar avec 0% — track visible
   ============================================================ */

body.izi-game .profil-xp-bar {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  min-height: 14px;
  position: relative;
  overflow: hidden;
}

/* Si fill est à 0% width, on affiche au moins un point lumineux à l'extrémité */
body.izi-game .profil-xp-fill {
  min-width: 6px;  /* permet de voir la "bille" même à 0 XP */
  height: 100%;
  background: linear-gradient(90deg, #00e1ff, #4f7cff, #a855f7) !important;
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(0, 225, 255, 0.5);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Le bloc level + xp info doit être bien aligné en flex */
body.izi-game .profil-level-block {
  display: flex !important;
  gap: 24px;
  align-items: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

body.izi-game .profil-level-num {
  flex: 0 0 auto;
}

body.izi-game .profil-level-info {
  flex: 1 1 220px;
  min-width: 220px;
}

/* ============================================================
   BUG BONUS : .profil-grid (Cours visités, Mini-jeux, Combats)
   Chaque card doit avoir une hauteur min raisonnable
   ============================================================ */

body.izi-game .profil-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 1.5rem 0;
}

body.izi-game .profil-grid .profil-card {
  min-height: 130px;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
}

/* ============================================================
   AUDIT CONTRAST FIX — 8 patterns détectés par audit_full.py
   Tous les textes avec brightness < 130 sur fond dark (bright 28)
   ============================================================ */

/* (A) span.field.field--name-title.field--type-string — brightness 0 (noir absolu)
   C'est le span enfant de h1.page-title. Mon gradient text-clip n'hérite pas correctement.
   Sur les pages dédiées on cache page-title (déjà fait), sur les autres on force le gradient sur l'enfant. */
html body[class] h1.page-title span.field--name-title,
html body[class] h1.page-title span.field,
html body[class] h1.page-title .field-content,
html body[class] .page-title span.field--name-title,
html body[class] .page-title span.field {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #00e1ff 0%, #4f7cff 50%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-color: transparent !important;
}

/* (B) div.field-content sur les cards de cours — brightness 27
   Les titres des cours dans la grille /php sont en noir. */
html body[class] .ivann-courses-grid .views-col .field-content,
html body[class] .views-col .views-field-title .field-content,
html body[class] .views-col .views-field-title a,
html body[class] .views-col h2,
html body[class] .views-col h3,
html body[class] [class*="ivann-course-card"] .field-content,
html body[class] [class*="ivann-course-card"] a,
html body[class] [class*="ivann-course-card"] h2,
html body[class] [class*="ivann-course-card"] h3 {
  color: var(--g-text-bright, #ffffff) !important;
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  font-weight: 700;
  text-decoration: none !important;
}

/* Description / texte secondaire des cards de cours */
html body[class] .views-col .views-field-body,
html body[class] .views-col .views-field-field-resume,
html body[class] .views-col p,
html body[class] [class*="ivann-course-card"] p,
html body[class] [class*="ivann-course-card"] .views-field-body {
  color: var(--g-text-soft, #b8bdd1) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
}

/* (C) div.classement-rank — brightness 87 (#475569)
   Le numéro de rang #N est en gris très sombre. */
html body[class] .classement-rank,
html body[class] .classement-row .classement-rank {
  color: var(--g-text-soft, #b8bdd1) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
}

/* Boost rank du joueur (.is-me) en violet */
html body[class] .classement-row.is-me .classement-rank {
  color: var(--g-purple, #a855f7) !important;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

/* (D) span.grade-chip Bronze — brightness 127 (limite)
   On boost la couleur du Bronze pour la rendre plus lisible */
html body[class] .grade-chip[data-grade="bronze"] {
  color: #d4926d !important;  /* bronze plus chaud, plus brillant */
  background: rgba(212, 146, 109, 0.12) !important;
  border-color: rgba(212, 146, 109, 0.4) !important;
  text-shadow: 0 0 8px rgba(212, 146, 109, 0.4);
}

/* (E) span.player-pseudo Bronze — brightness 127 (limite)
   Boost la couleur Bronze du pseudo */
html body[class] .player-pseudo[data-grade="bronze"] {
  color: #e0a884 !important;  /* bronze plus clair */
  text-shadow: 0 0 8px rgba(224, 168, 132, 0.4);
}

/* (F) span "0 / 14 exercices terminés" — brightness 125
   Sur la page cours, le compteur d'exercices */
html body[class] .ivann-course-page span,
html body[class] .ivann-course-page > span:not([class*="player-pseudo"]):not([class*="grade-chip"]):not([data-lucide]) {
  color: var(--g-text-soft, #b8bdd1) !important;
}

/* Compteur "X / Y exercices terminés" dans course-progress-header */
html body[class] .course-progress-header,
html body[class] .course-progress-header span,
html body[class] .course-progress-box .course-progress-header,
html body[class] .course-progress-box .course-progress-header span,
html body[class] [class*="course-progress-header"] span,
html body[class] [class*="course-progress"] span:not([class*="player-pseudo"]):not([data-lucide]) {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(0, 225, 255, 0.3);
}

html body[class] [class*="exercises-count"],
html body[class] [class*="progress-count"],
html body[class] .ivann-counter {
  color: #7dd3fc !important;
  background: rgba(0, 225, 255, 0.08) !important;
  border: 1px solid rgba(0, 225, 255, 0.2) !important;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.85rem;
  display: inline-block;
}

/* (G) button.parcours-page__reset — brightness 118
   Bouton "↻ Réinitialiser ma progression" trop sombre */
html body[class] .parcours-page__reset,
html body[class] button.parcours-page__reset,
html body[class] [class*="parcours"][class*="reset"] {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 8px !important;
  padding: 0.6rem 1.2rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem !important;
  cursor: pointer;
  transition: all 0.15s;
}
html body[class] .parcours-page__reset:hover,
html body[class] button.parcours-page__reset:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  border-color: #ef4444 !important;
  box-shadow: 0 6px 20px -4px rgba(239, 68, 68, 0.5);
}

/* (H) "Prochain grade : ..." div — brightness 87
   Texte info dans /profil sous la barre XP */
html body[class] #profil-next-grade,
html body[class] .profil-next-grade,
html body[class] .profil-page #profil-next-grade,
html body[class] .profil-card #profil-next-grade {
  color: var(--g-text-muted, #7a829e) !important;
  font-size: 0.85rem !important;
  font-family: 'Inter', sans-serif !important;
}
html body[class] #profil-next-grade strong,
html body[class] .profil-next-grade strong {
  color: var(--g-text-bright, #ffffff) !important;
}

/* ============================================================
   GLOBAL : si un parent .ivann-course-page enfant span/div sans class
   a une couleur héritée trop sombre, on rétablit le souple */

html body[class] .ivann-course-page > div,
html body[class] .ivann-course-page > span,
html body[class] .node--type-cours > div,
html body[class] .node--type-cours .field--name-body > div {
  color: inherit;
}

/* Drupal field labels par défaut souvent en gris foncé */
html body[class] .field__label,
html body[class] .field-label {
  color: var(--g-text-muted, #7a829e) !important;
}

/* ============================================================
   FIX : retire les emoji ::before/::after parasites qui rendent
   bizarrement (🎯 en wedge orange, 📈 cassé, etc.)
   - Sur certains systèmes/fonts, ces emoji rendent partiellement
   - Ils apparaissent "au-dessus du code" quand placés sur des fields
     rendus par Drupal Layout Builder dans le flux du contenu
   ============================================================ */

/* Retire 🎯 sur field difficulté */
html body[class] .field.field--name-field-ivann-difficulte::before,
html body[class] .field--name-field-ivann-difficulte::before {
  content: none !important;
  display: none !important;
}

/* Retire 🐘 sur field langage (peut casser sur certaines fonts) */
html body[class] .field.field--name-field-ivann-langage::before,
html body[class] .field--name-field-ivann-langage::before,
html body[class] .field.field--name-field-langage::before,
html body[class] .field--name-field-langage::before {
  content: none !important;
  display: none !important;
}

/* Retire 📈 sur course-progress-header (cause de shapes parasites) */
html body[class] .course-progress-header strong::before {
  content: none !important;
  display: none !important;
}

/* Retire ⏱/🎯/📚 sur les badges course-grid (legacy #05) */
html body[class] .ivann-courses-grid .course-progress-badge::before,
html body[class] .ivann-courses-grid [class*="badge"]::before:not([data-lucide])  {
  content: none !important;
  display: none !important;
}

/* Pour les fields ⚡ et ⏱ qu'on garde (niveau/durée), on les laisse
   parce qu'ils s'affichent dans des pills et leur rendu est OK.
   Mais on les boost avec font-style normal pour assurer que c'est l'emoji visible. */
html body[class] .field.field--name-field-ivann-niveau-du-cours::before,
html body[class] .field--name-field-ivann-niveau-du-cours::before {
  content: '⚡' !important;
  color: #fbbf24 !important;
  font-style: normal !important;
  margin-right: 4px;
  font-size: 0.9em;
  display: inline-block !important;
}
html body[class] .field.field--name-field-ivann-duree-estimee::before,
html body[class] .field--name-field-ivann-duree-estimee::before {
  content: '⏱' !important;
  color: #00e1ff !important;
  font-style: normal !important;
  margin-right: 4px;
  font-size: 0.9em;
  display: inline-block !important;
}

/* Retire les ::before sur tous les autres fields pour éviter contamination */
html body[class] .field.field--name-field-ivann-ordre-du-cours::before,
html body[class] .field--name-field-ivann-ordre-du-cours::before {
  content: '#' !important;
  margin-right: 2px;
  opacity: 0.6;
}

/* ============================================================
   BUG : titres des cards exercices invisibles (color #0f172a noir sur fond dark)
   Cause : CSS legacy #08 met une couleur fixe pour fond clair.
   Fix : forcer texte blanc pour titres + cyan accent pour les liens cliquables
   ============================================================ */

html body[class] .views-row[class*="exercise-is-"] a,
html body[class] .views-row[class*="exercise-is-"] h2,
html body[class] .views-row[class*="exercise-is-"] h3,
html body[class] .views-row[class*="exercise-is-"] h4,
html body[class] .views-row[class*="exercise-is-"] .views-field-title,
html body[class] .views-row[class*="exercise-is-"] .views-field-title a,
html body[class] .views-row[class*="exercise-is-"] .views-field-title-1,
html body[class] .views-row[class*="exercise-is-"] .views-field-title-1 a,
html body[class] [class*="course-exercises-progress"] .views-row a,
html body[class] [class*="course-exercises-progress"] .views-row .views-field-title,
html body[class] .ivann-exercises-view .views-row a,
html body[class] .ivann-exercises-view .views-row .views-field-title,
html body[class] .view-exercices-du-cours .views-row a {
  color: var(--g-text-bright, #ffffff) !important;
  text-decoration: none !important;
  background: transparent !important;
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

html body[class] .views-row[class*="exercise-is-"] a:hover,
html body[class] .views-row[class*="exercise-is-"] .views-field-title a:hover {
  color: var(--g-cyan, #00e1ff) !important;
  text-shadow: 0 0 8px rgba(0, 225, 255, 0.5);
}

/* Description / énoncé */
html body[class] .views-row[class*="exercise-is-"] .views-field-field-enonce,
html body[class] .views-row[class*="exercise-is-"] .field-content,
html body[class] .views-row[class*="exercise-is-"] .views-field-body,
html body[class] .views-row[class*="exercise-is-"] p {
  color: var(--g-text-soft, #b8bdd1) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none !important;
}

/* Status badges "À FAIRE" / "FAIT" : rendu pill propre */
html body[class] .views-row[class*="exercise-is-todo"] .exercise-status-badge,
html body[class] .views-row[class*="exercise-is-todo"] [class*="status-badge"],
html body[class] .views-row.exercise-is-todo .views-field-field-status {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body[class] .views-row.exercise-is-done .exercise-status-badge,
html body[class] .views-row.exercise-is-done [class*="status-badge"],
html body[class] .views-row.exercise-is-done .views-field-title,
html body[class] .views-row.exercise-is-done .views-field-title a {
  color: #4ade80 !important;
}

html body[class] .views-row.exercise-is-done .exercise-status-badge {
  background: rgba(0, 255, 157, 0.12) !important;
  border: 1px solid rgba(0, 255, 157, 0.3) !important;
}

/* Le badge "EXERCICE" en haut-gauche : maintenir style cyan */
html body[class] .views-row[class*="exercise-is-"] .exercise-type-badge,
html body[class] .views-row[class*="exercise-is-"] [class*="type-badge"] {
  background: rgba(0, 225, 255, 0.12) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(0, 225, 255, 0.3) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Bouton "Faire l'exercice →" : déjà OK avec gradient violet/bleu, on renforce */
html body[class] .views-row[class*="exercise-is-"] .exercise-cta,
html body[class] .views-row[class*="exercise-is-"] [class*="exercise-link"],
html body[class] .views-row[class*="exercise-is-"] a.button,
html body[class] .views-row[class*="exercise-is-"] .exercise-button {
  background: linear-gradient(135deg, #4f7cff, #6366f1, #8b5cf6) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  padding: 0.7rem 1.5rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  transition: all 0.15s;
}

html body[class] .views-row[class*="exercise-is-"] .exercise-cta:hover,
html body[class] .views-row[class*="exercise-is-"] a.button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(79, 124, 255, 0.5);
  color: white !important;
}

/* ============================================================
   BUG : layout cours mal agencé (image + meta empilés bizarrement)
   Cause : le sélecteur [class*="block-field-blocknodecoursfield-"] mettait
   inline-flex + padding sur TOUS les blocks meta, y compris l'IMAGE et le CONTENU.
   Fix : reset spécifique pour image et contenu, garde inline-flex pour les vraies pills.
   ============================================================ */

/* Image cours : display block, pleine largeur */
html body[class] .block.block-field-blocknodecoursfield-image-cours,
html body[class] .block-field-blocknodecoursfield-image-cours,
html body[class] .field.field--name-field-image-cours,
html body[class] .field--name-field-image-cours {
  display: block !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-align: center;
  align-items: initial !important;
  text-transform: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}

html body[class] .field--name-field-image-cours img,
html body[class] .block-field-blocknodecoursfield-image-cours img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  margin: 0 auto;
}

/* Contenu cours : display block plein écran (déjà géré au-dessus mais on renforce) */
html body[class] .block.block-field-blocknodecoursfield-ivann-contenu-du-cours,
html body[class] .block-field-blocknodecoursfield-ivann-contenu-du-cours {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  align-items: initial !important;
  text-transform: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
}

/* Block langage (badge "PHP") : display block, simple */
html body[class] .block.block-field-blocknodecoursfield-langage,
html body[class] .block-field-blocknodecoursfield-langage,
html body[class] .field--name-field-langage,
html body[class] .field.field--name-field-langage {
  display: inline-block !important;
  width: auto !important;
  margin: 0 8px 8px 0 !important;
}

/* Le "ordre du cours" n°15 : on en fait un badge propre */
html body[class] .block.block-field-blocknodecoursfield-ivann-ordre-du-cours,
html body[class] .block-field-blocknodecoursfield-ivann-ordre-du-cours,
html body[class] .field--name-field-ivann-ordre-du-cours {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(79, 124, 255, 0.15)) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}
html body[class] .field--name-field-ivann-ordre-du-cours::before {
  content: '#';
  margin-right: 2px;
  opacity: 0.6;
}

/* Phase du parcours pill */
html body[class] .block.block-field-blocknodecoursfield-phase-du-parcours,
html body[class] .block-field-blocknodecoursfield-phase-du-parcours,
html body[class] .field--name-field-phase-du-parcours {
  background: rgba(0, 225, 255, 0.08) !important;
  border: 1px solid rgba(0, 225, 255, 0.25) !important;
  color: #7dd3fc !important;
}

/* Wrapper region--content : flex row pour aligner image au-dessus, meta en row */
html body[class] .node--type-cours .layout__region--content {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Les meta pills (niveau + durée + ordre + langage + phase) doivent être groupées sur une ligne.
   Hack : on utilise un wrapper invisible — actuellement Drupal place chacun en row.
   Solution : on les met en flex inline avec margin pour qu'ils s'écoulent sur la même ligne. */
html body[class] .node--type-cours .layout__region--content > .block-field-blocknodecoursfield-ivann-niveau-du-cours,
html body[class] .node--type-cours .layout__region--content > .block-field-blocknodecoursfield-ivann-duree-estimee,
html body[class] .node--type-cours .layout__region--content > .block-field-blocknodecoursfield-ivann-ordre-du-cours,
html body[class] .node--type-cours .layout__region--content > .block-field-blocknodecoursfield-ivann-difficulte,
html body[class] .node--type-cours .layout__region--content > .block-field-blocknodecoursfield-langage,
html body[class] .node--type-cours .layout__region--content > .block-field-blocknodecoursfield-phase-du-parcours {
  display: inline-flex !important;
  margin: 0 8px 8px 0 !important;
  width: auto !important;
}

/* ============================================================
   BUG MAJEUR : le body du cours s'affiche en MAJUSCULES tronquées
   Cause : CSS #22/#32 a un sélecteur [class*="block-field-blocknodecours"]
   qui matche AUSSI block-field-blocknodecoursbody (le contenu du cours).
   Les styles meta (uppercase, inline-flex, Rajdhani, padding 6px) sont appliqués
   au body entier → texte tronqué et tout en caps.
   FIX : reset complet du body cours.
   ============================================================ */

html body[class] .block.block-field-blocknodecoursbody,
html body[class] .block-field-blocknodecoursbody,
html body[class] .field.field--name-body,
html body[class] .field--name-body,
html body[class] .field.field--name-field-ivann-contenu-du-cours,
html body[class] .field--name-field-ivann-contenu-du-cours,
html body[class] .block.block-field-blocknodecoursfield-ivann-contenu-du-cours,
html body[class] .block-field-blocknodecoursfield-ivann-contenu-du-cours {
  /* Annule TOUS les styles meta qui ont fuité ici */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  display: block !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  align-items: initial !important;
  gap: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* Le contenu interne hérite de la typo body, pas de Rajdhani uppercase */
html body[class] .block-field-blocknodecoursbody p,
html body[class] .block-field-blocknodecoursbody li,
html body[class] .block-field-blocknodecoursbody div:not(.izi-hero-anchor):not([class*="ivann-"]),
html body[class] .field--name-body p,
html body[class] .field--name-body li,
html body[class] .field--name-body div:not([class*="ivann-"]),
html body[class] .field--name-field-ivann-contenu-du-cours p,
html body[class] .field--name-field-ivann-contenu-du-cours li,
html body[class] .field--name-field-ivann-contenu-du-cours div:not([class*="ivann-"]) {
  text-transform: none !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: normal !important;
  font-weight: 400;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  display: block;
}

/* Strong et em gardent leur sémantique */
html body[class] .block-field-blocknodecoursbody strong,
html body[class] .field--name-body strong {
  font-weight: 700 !important;
  font-family: inherit !important;
  text-transform: none !important;
}

/* Code inline garde JetBrains Mono (lui peut rester) */
html body[class] .block-field-blocknodecoursbody code,
html body[class] .field--name-body code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  text-transform: none !important;
}

/* Le pre block : overflow-x: auto pour scroll horizontal au besoin, mais wrap si possible */
html body[class] .block-field-blocknodecoursbody pre,
html body[class] .field--name-body pre {
  overflow-x: auto !important;
  white-space: pre !important;
  text-transform: none !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  max-width: 100% !important;
}

html body[class] .block-field-blocknodecoursbody pre code,
html body[class] .field--name-body pre code {
  white-space: pre !important;
  text-transform: none !important;
  display: block;
}

/* Headings dans le body : Rajdhani OK mais en title-case (pas tout uppercase pour le contenu) */
html body[class] .block-field-blocknodecoursbody h1,
html body[class] .block-field-blocknodecoursbody h2,
html body[class] .block-field-blocknodecoursbody h3,
html body[class] .block-field-blocknodecoursbody h4,
html body[class] .field--name-body h1,
html body[class] .field--name-body h2,
html body[class] .field--name-body h3,
html body[class] .field--name-body h4 {
  text-transform: none !important;
}

/* H2 garde uppercase si voulu (style "section") mais pas H3+ */
html body[class] .block-field-blocknodecoursbody h2,
html body[class] .field--name-body h2 {
  /* H2 conservés en uppercase légère pour effet section */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.4rem !important;
}

html body[class] .block-field-blocknodecoursbody h3,
html body[class] .field--name-body h3 {
  text-transform: none !important;
  letter-spacing: 0.02em;
  font-size: 1.15rem !important;
  color: var(--g-cyan, #00e1ff) !important;
}

/* ============================================================
   BUG : .parcours-progress empilait 5 cards vides
   Cause : sélecteur [class*="parcours-progress"] matchait label/bar/phase enfants.
   Fix : 1 seul card pour le parent, enfants transparents, barre fine pour __bar.
   ============================================================ */

/* Parent : LE seul card gradient */
html body[class] .parcours-progress {
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.12), rgba(168, 85, 247, 0.06)) !important;
  background-color: transparent !important;
  border: 1px solid rgba(79, 124, 255, 0.25) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  color: var(--g-text, #e8eaf3) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  margin-bottom: 24px;
}

/* Enfants : transparents, pas de card */
html body[class] .parcours-progress__head,
html body[class] .parcours-progress__label,
html body[class] .parcours-progress__phase,
html body[class] .parcours-progress > div,
html body[class] .parcours-progress > span,
html body[class] [class*="parcours-progress__"]:not(.parcours-progress__bar):not(.parcours-progress__fill) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Header : flex avec label à gauche + % à droite */
html body[class] .parcours-progress__head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  margin-bottom: 12px !important;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

html body[class] .parcours-progress__label {
  color: var(--g-text-bright, #ffffff) !important;
  font-size: 0.95rem;
}

html body[class] .parcours-progress__percent,
html body[class] .parcours-progress__head > *:last-child {
  color: var(--g-cyan, #00e1ff) !important;
  font-size: 1rem;
  text-shadow: 0 0 8px rgba(0, 225, 255, 0.5);
}

/* La VRAIE progress bar : track fine */
html body[class] .parcours-progress__bar {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  height: 10px !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  position: relative;
}

/* Le fill : gradient cyan→violet */
html body[class] .parcours-progress__fill {
  height: 100% !important;
  background: linear-gradient(90deg, #00e1ff 0%, #4f7cff 50%, #a855f7 100%) !important;
  background-color: transparent !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 12px rgba(79, 124, 255, 0.6);
  min-width: 6px;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Phase indicator : ligne avec dot, pas de card */
html body[class] .parcours-progress__phase {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  color: var(--g-text-soft, #b8bdd1) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px !important;
}

html body[class] .parcours-progress__phase::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--g-cyan, #00e1ff);
  box-shadow: 0 0 8px rgba(0, 225, 255, 0.6);
  flex-shrink: 0;
}

/* ============================================================
   BUG MAJEUR : .php-hero, .php-section et toutes les sections langage
   Le CSS legacy #09 leur met linear-gradient(rgba(255,255,255,0.98), 0.94)
   en background-image. Mon audit ne le voyait pas car ce n'est pas un
   background-color. On force le dark.
   ============================================================ */

html body[class] section.php-hero,
html body[class] section.php-section,
html body[class] section.php-courses-section,
html body[class] .php-hero,
html body[class] .php-section,
html body[class] .php-courses-section,
html body[class] .html-hero,
html body[class] .html-section,
html body[class] .html-courses-section,
html body[class] .sql-hero,
html body[class] .sql-section,
html body[class] .sql-courses-section,
html body[class] .javascript-hero,
html body[class] .javascript-section,
html body[class] .javascript-courses-section,
html body[class] [class*="-hero"]:not(.izi-hero-logo):not(.izi-hero-anchor),
html body[class] section[class*="-section"] {
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(36, 84, 255, 0.12), transparent 32%),
    radial-gradient(circle at 86% 15%, rgba(124, 58, 237, 0.10), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  color: var(--g-text, #e8eaf3) !important;
  margin-bottom: 24px;
}

/* Le wrapper hero-card lui-même */
html body[class] .php-hero-card,
html body[class] .html-hero-card,
html body[class] .sql-hero-card,
html body[class] .javascript-hero-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--g-text-bright, #ffffff) !important;
  border-radius: 14px !important;
}

/* Texte interne des sections */
html body[class] section.php-hero *,
html body[class] section.php-section *,
html body[class] section.php-courses-section *,
html body[class] [class*="-hero"]:not(.izi-hero-logo) p,
html body[class] [class*="-section"] p {
  background-color: transparent;
}

/* Section titles "COURS DISPONIBLES" etc. */
html body[class] [class*="-section"] h1,
html body[class] [class*="-section"] h2,
html body[class] [class*="-section"] h3,
html body[class] [class*="-hero"] h1,
html body[class] [class*="-hero"] h2,
html body[class] [class*="-hero"] h3 {
  color: var(--g-text-bright, #ffffff) !important;
}

/* Body text */
html body[class] [class*="-section"] p,
html body[class] [class*="-hero"] p {
  color: var(--g-text-soft, #b8bdd1) !important;
}

/* Logo PHP/HTML/SQL placeholder à droite */
html body[class] .php-logo,
html body[class] .html-logo,
html body[class] .sql-logo,
html body[class] .javascript-logo {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(79, 124, 255, 0.15)) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: white !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* Stats "13 cours progressifs", "Débutant → avancé" */
html body[class] .php-hero-card div,
html body[class] .php-hero-card span,
html body[class] [class*="-hero-card"] * {
  color: var(--g-text-soft, #b8bdd1) !important;
  background-color: transparent !important;
}

html body[class] [class*="-hero-card"] strong,
html body[class] [class*="-hero-card"] b {
  color: var(--g-text-bright, #ffffff) !important;
}

/* ============================================================
   BUG BONUS : .php-feature cards (sur /php) — texte coupé
   Affiche correctement le contenu
   ============================================================ */

html body[class] .php-feature,
html body[class] .html-feature,
html body[class] .sql-feature,
html body[class] .javascript-feature {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px !important;
}

html body[class] .php-feature h3,
html body[class] .php-feature h2,
html body[class] .php-feature .feature-title {
  color: var(--g-text-bright, #ffffff) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.15rem;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

html body[class] .php-feature p {
  color: var(--g-text-soft, #b8bdd1) !important;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ============================================================
   BUG BONUS : page-title (Drupal h1)
   - Sur les pages dédiées (profil/arenes/classement/jouer/parcours/mini-projets),
     on a déjà notre propre h1 dans le body → on cache le page-title Drupal
   - Sur les autres pages (cours, langage), on garde et applique gradient TEXT
   ============================================================ */

/* Hide Drupal page-title sur les pages dédiées (priorité max) */
html body.izi-game-dedicated h1.page-title,
html body.izi-game-dedicated .page-title,
html body.izi-game-dedicated .block-page-title-block {
  display: none !important;
}

/* Sur les pages cours/langage : page-title en gradient TEXT, pas block */
html body.izi-game:not(.izi-game-dedicated) h1.page-title {
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #00e1ff 0%, #4f7cff 50%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(79, 124, 255, 0.3));
}

/* Le span.field enfant ne doit pas avoir de background propre (sinon double-rendering) */
html body.izi-game:not(.izi-game-dedicated) h1.page-title .field,
html body.izi-game:not(.izi-game-dedicated) h1.page-title span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}


/* === FIX no border-bottom titres exercices (drupal-claude-agent) === */
html body[class] .views-row[class*="exercise-is-"] a,
html body[class] [class*="course-exercises-progress"] .views-row a,
html body[class] .ivann-exercises-view .views-row a,
html body[class] .view-exercices-du-cours .views-row a,
html body[class] .views-row a:has(.field-content),
html body[class] .views-field-title a,
html body[class] .views-field-title-1 a {
  border-bottom: none !important;
  text-decoration: none !important;
}


/* === FIX consolide 5 alignements (drupal-claude-agent) === */

/* A. Indicator QUETE : force flex pour eviter wrap (texte sur 1 ligne, barre a droite) */
html body[class] .ivann-slideshow__indicator {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* B. H2 generiques (hors contenu cours) : masque la barre ::after gradient flottante.
      On exclut les h2 du contenu de cours (qui ont le badge quete + label QUETE).
      Cible : views-element-container, blocks reguliers, sections de listing. */
html body[class] .views-element-container > h2::after,
html body[class] .block:not(.block-field-blocknodecoursbody) > h2::after,
html body[class] .block:not(.block-field-blocknodecoursbody) h2:not(.field--name-body h2)::after,
html body[class] .ivann-exercises-view h2::after,
html body[class] .course-exercises-progress h2::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* C. Parcours progress fill : laisser le inline style="width:X%" prendre effet
      (le min-width: 6px etait suspect mais en realite le pb est qu'avec un parent
      flex/grid, "width: 91%" peut etre interprete bizarrement. On force calc) */
html body[class] .parcours-progress__fill {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  display: block !important;
}
html body[class] .parcours-progress__bar {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

/* D. Slide finale 'Bien joue' : le h2 est vide / invisible mais ses decorations
      (badge counter ::before + border-left + label ::after QUETE) sont visibles.
      Les masquer toutes. */
html body[class] .ivann-slide--finish h2,
html body[class] .ivann-slide--finish .field--name-body h2,
html body[class] .ivann-slide--finish .block-field-blocknodecoursbody h2,
html body[class] .ivann-slide--finish .field--name-field-ivann-contenu-du-cours h2 {
  padding-left: 0 !important;
  border-left: none !important;
  border: none !important;
  margin-left: 0 !important;
  min-height: 0 !important;
}
html body[class] .ivann-slide--finish h2::before,
html body[class] .ivann-slide--finish h2::after,
html body[class] .ivann-slide--finish .field--name-body h2::before,
html body[class] .ivann-slide--finish .field--name-body h2::after,
html body[class] .ivann-slide--finish .block-field-blocknodecoursbody h2::before,
html body[class] .ivann-slide--finish .block-field-blocknodecoursbody h2::after,
html body[class] .ivann-slide--finish .field--name-field-ivann-contenu-du-cours h2::before,
html body[class] .ivann-slide--finish .field--name-field-ivann-contenu-du-cours h2::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
}

/* E. Bouton LANCER LES EXERCICES (et autre boutons --finish) :
      icone svg/lucide et texte en cyan -> doivent heriter du color sombre du bouton */
html body[class] .ivann-slide__btn--finish,
html body[class] .ivann-exo-btn--final {
  color: #1a1f33 !important;
}
html body[class] .ivann-slide__btn--finish *,
html body[class] .ivann-exo-btn--final * {
  color: inherit !important;
}
html body[class] .ivann-slide__btn--finish svg,
html body[class] .ivann-slide__btn--finish [data-lucide],
html body[class] .ivann-exo-btn--final svg,
html body[class] .ivann-exo-btn--final [data-lucide] {
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}


/* === FIX round2 LANCER + slide finish (drupal-claude-agent) === */

/* Bouton LANCER LES EXERCICES (et autres .ivann-slide__btn--finish) :
   Texte/icone en cyan fluo a cause d'autres regles plus specifiques.
   On force avec une combinaison de classes + ancetre body[class] = haute spec. */
html body[class] a.ivann-slide__btn.ivann-slide__btn--finish,
html body[class] button.ivann-slide__btn.ivann-slide__btn--finish,
html body[class] a.ivann-slide__btn--next.ivann-slide__btn--finish,
html body[class] .ivann-slide--finish a.ivann-slide__btn,
html body[class] .ivann-slide--finish button.ivann-slide__btn {
  color: #1a1f33 !important;
  background-image: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706) !important;
}
html body[class] a.ivann-slide__btn.ivann-slide__btn--finish *,
html body[class] button.ivann-slide__btn.ivann-slide__btn--finish *,
html body[class] .ivann-slide--finish a.ivann-slide__btn *,
html body[class] .ivann-slide--finish button.ivann-slide__btn * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}