/* ====================================================================
   Ivann — CSS Dark Cleanup Final (consolidé : wrappers + paragraphs + audit)
   Consolidation de : ivann_css_19_dark_cleanup, ivann_css_21_final_cleanup, ivann_css_22_audit_fixes
   ==================================================================== */


/* === [ivann_css_19_dark_cleanup] === */

/* ==================================================================
   IVANN DARK CLEANUP #19 — Force le dark sur tous les wrappers Drupal
   et composants oubliés. Override final.
   ================================================================== */

/* ============================================================
   1. BODY & WRAPPERS RACINE — éradication du blanc
   ============================================================ */

html.izi-game-html, html:has(body.izi-game) {
  background: #050810 !important;
}

body.izi-game,
body.izi-game.path-frontpage,
body.izi-game.page-node-type-page,
body.izi-game.page-node-type-cours,
body.izi-game.page-node-type-langage,
body.izi-game.page-node-type-mini-projet,
body.izi-game.page-node-type-exercice-php,
body.izi-game.page-node-type-exercice-code-libre {
  background-color: #050810 !important;
}

body.izi-game .layout-container,
body.izi-game .layout-main-wrapper,
body.izi-game .layout-content,
body.izi-game .layout-content-wrapper,
body.izi-game .layout-content-medium,
body.izi-game .layout-content-narrow,
body.izi-game .layout--onecol,
body.izi-game .layout--twocol-section,
body.izi-game .layout--threecol-section,
body.izi-game .dialog-off-canvas-main-canvas,
body.izi-game #main-wrapper,
body.izi-game #page-wrapper,
body.izi-game #page,
body.izi-game #main,
body.izi-game #content,
body.izi-game main,
body.izi-game .site-main,
body.izi-game .main-content,
body.izi-game .page-wrapper,
body.izi-game .page-content,
body.izi-game .main-wrapper,
body.izi-game .content-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--g-text);
}

/* ============================================================
   2. RÉGIONS DRUPAL
   ============================================================ */

body.izi-game .region,
body.izi-game [class*="region-"],
body.izi-game .region-content,
body.izi-game .region-content-above,
body.izi-game .region-content-below,
body.izi-game .region-sidebar-first,
body.izi-game .region-sidebar-second,
body.izi-game .region-secondary-menu,
body.izi-game .region-header-right,
body.izi-game .region-fullscreen-1,
body.izi-game .region-fullscreen-2,
body.izi-game .region-breadcrumb,
body.izi-game .region-highlighted,
body.izi-game .region-help {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--g-text);
}

/* Sidebars & rails restent transparents */
body.izi-game .layout-sidebar,
body.izi-game .layout-sidebar-first,
body.izi-game .layout-sidebar-second {
  background: transparent !important;
}

/* ============================================================
   3. BLOCS DRUPAL
   ============================================================ */

body.izi-game .block,
body.izi-game [class*="block-"],
body.izi-game .block-system,
body.izi-game .block-block-content,
body.izi-game .block-views,
body.izi-game .block-search,
body.izi-game .block-core,
body.izi-game .block-page-title-block,
body.izi-game .block-system-breadcrumb-block,
body.izi-game .block-system-main-block,
body.izi-game .block-system-menu-block,
body.izi-game .block-local-tasks-block,
body.izi-game .block-local-actions-block,
body.izi-game .block-system-messages-block {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit;
  border: none;
  box-shadow: none;
}

/* ============================================================
   4. NODE & ARTICLE — wrappers
   ============================================================ */

body.izi-game .node,
body.izi-game [class*="node--type-"],
body.izi-game [class*="node--view-mode-"],
body.izi-game article,
body.izi-game .views-row,
body.izi-game .view-content,
body.izi-game .view,
body.izi-game .views-element-container {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--g-text);
}

/* On garde le card style pour le node de view-mode-full SEULEMENT (déjà défini en #17/#18) */

/* ============================================================
   5. FIELDS
   ============================================================ */

body.izi-game .field,
body.izi-game [class*="field--type-"],
body.izi-game [class*="field--name-"],
body.izi-game .field__items,
body.izi-game .field__item,
body.izi-game .text-formatted,
body.izi-game .clearfix,
body.izi-game .field--label-above,
body.izi-game .field--label-inline,
body.izi-game .field--label-hidden {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit;
}

body.izi-game .field__label,
body.izi-game .field-label {
  color: var(--g-text-soft) !important;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-xs);
}

/* ============================================================
   6. FORM CONTROLS — tous les inputs natifs
   ============================================================ */

body.izi-game input,
body.izi-game textarea,
body.izi-game select,
body.izi-game .form-text,
body.izi-game .form-textarea,
body.izi-game .form-select,
body.izi-game .form-email,
body.izi-game .form-url,
body.izi-game .form-search,
body.izi-game .form-tel,
body.izi-game .form-number,
body.izi-game .form-date,
body.izi-game .form-time,
body.izi-game .form-file,
body.izi-game input[type="text"],
body.izi-game input[type="email"],
body.izi-game input[type="password"],
body.izi-game input[type="number"],
body.izi-game input[type="search"],
body.izi-game input[type="tel"],
body.izi-game input[type="url"],
body.izi-game input[type="date"],
body.izi-game input[type="time"],
body.izi-game input[type="datetime-local"],
body.izi-game input[type="month"],
body.izi-game input[type="week"],
body.izi-game input[type="file"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--g-text) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.6rem 0.85rem !important;
  font-family: inherit !important;
  font-size: var(--t-base) !important;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

body.izi-game input::placeholder,
body.izi-game textarea::placeholder {
  color: var(--g-text-dim) !important;
}

body.izi-game input:focus,
body.izi-game textarea:focus,
body.izi-game select:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--g-cyan) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* Select : flèche custom et options */
body.izi-game select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300e1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 14px;
  padding-right: 2.25rem !important;
}
body.izi-game select option {
  background: #131829 !important;
  color: var(--g-text) !important;
}

/* Checkbox & radio */
body.izi-game input[type="checkbox"],
body.izi-game input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  padding: 0 !important;
  transition: all 0.15s;
}
body.izi-game input[type="checkbox"] { border-radius: var(--r-xs) !important; }
body.izi-game input[type="radio"] { border-radius: 50% !important; }
body.izi-game input[type="checkbox"]:hover,
body.izi-game input[type="radio"]:hover {
  border-color: var(--g-cyan) !important;
}
body.izi-game input[type="checkbox"]:checked,
body.izi-game input[type="radio"]:checked {
  background: linear-gradient(135deg, #4f7cff, #8b5cf6) !important;
  border-color: var(--g-cyan) !important;
}
body.izi-game input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
body.izi-game input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: white;
}

/* Range slider */
body.izi-game input[type="range"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.izi-game input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.1);
  height: 6px;
  border-radius: var(--r-full);
}
body.izi-game input[type="range"]::-webkit-slider-thumb {
  background: var(--g-cyan);
  width: 16px; height: 16px;
  border-radius: 50%;
  margin-top: -5px;
  appearance: none;
  box-shadow: 0 0 8px rgba(0, 225, 255, 0.6);
}

/* Fieldset / details */
body.izi-game fieldset,
body.izi-game .fieldset,
body.izi-game .form-wrapper,
body.izi-game details,
body.izi-game .details {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-md) !important;
  color: var(--g-text);
  padding: var(--s-4);
}
body.izi-game legend,
body.izi-game summary,
body.izi-game .fieldset-legend,
body.izi-game .details-summary {
  color: var(--g-text-bright) !important;
  font-family: 'Rajdhani', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent !important;
}

body.izi-game label,
body.izi-game .form-item label,
body.izi-game .form-item__label {
  color: var(--g-text-soft) !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.izi-game .description,
body.izi-game .form-item__description,
body.izi-game .form-item .description {
  color: var(--g-text-muted) !important;
  font-size: var(--t-sm);
}

/* ============================================================
   7. TABLES — renforcement
   ============================================================ */

body.izi-game table,
body.izi-game .table,
body.izi-game .views-table,
body.izi-game .draggable-table,
body.izi-game .responsive-enabled,
body.izi-game .sticky-enabled {
  background: rgba(255, 255, 255, 0.02) !important;
  background-color: rgba(255, 255, 255, 0.02) !important;
  color: var(--g-text);
}

body.izi-game tr,
body.izi-game thead,
body.izi-game tbody,
body.izi-game tfoot {
  background: transparent !important;
  background-color: transparent !important;
}

body.izi-game tr.odd,
body.izi-game tr.even {
  background: transparent !important;
}
body.izi-game tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.015) !important;
}

/* ============================================================
   8. ONGLETS & ACTIONS LOCALES
   ============================================================ */

body.izi-game .tabs,
body.izi-game .tabs__list,
body.izi-game ul.tabs,
body.izi-game ul.primary,
body.izi-game ul.secondary {
  background: transparent !important;
  border: none !important;
  padding: 0;
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

body.izi-game .tabs__tab,
body.izi-game ul.tabs li,
body.izi-game ul.primary li,
body.izi-game ul.secondary li {
  background: transparent !important;
  border: none !important;
  padding: 0;
  list-style: none;
}

body.izi-game .tabs__tab a,
body.izi-game ul.tabs li a,
body.izi-game ul.primary li a,
body.izi-game ul.secondary li a {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--g-text-soft) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.45rem 0.9rem !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: var(--t-sm);
  transition: all 0.15s;
}

body.izi-game .tabs__tab a:hover,
body.izi-game ul.tabs li a:hover {
  background: rgba(0, 225, 255, 0.06) !important;
  border-color: rgba(0, 225, 255, 0.4) !important;
  color: var(--g-cyan) !important;
}

body.izi-game .tabs__tab.is-active a,
body.izi-game ul.tabs li.is-active a,
body.izi-game ul.tabs li.active a {
  background: linear-gradient(135deg, rgba(0, 225, 255, 0.15), rgba(79, 124, 255, 0.1)) !important;
  border-color: var(--g-cyan) !important;
  color: var(--g-cyan) !important;
}

/* Action links (boutons "Add new...") */
body.izi-game .action-links,
body.izi-game ul.action-links {
  background: transparent !important;
  list-style: none;
  padding: 0;
  margin-bottom: var(--s-4);
}
body.izi-game .action-links li {
  background: transparent !important;
}

/* ============================================================
   9. DIALOGS / POPUPS / OFF-CANVAS
   ============================================================ */

body.izi-game .ui-dialog,
body.izi-game .ui-widget-content,
body.izi-game .ui-dialog-content,
body.izi-game [role="dialog"],
body.izi-game .dialog-off-canvas,
body.izi-game .dialog-off-canvas-main-canvas {
  background: linear-gradient(180deg, #1a1f33, #131829) !important;
  background-color: #131829 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--g-text) !important;
  border-radius: var(--r-lg);
}

body.izi-game .ui-dialog-titlebar {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--g-text-bright) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.izi-game .ui-dialog-buttonpane {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Tooltip Drupal */
body.izi-game .tooltip,
body.izi-game .ui-tooltip {
  background: #1a1f33 !important;
  color: var(--g-text) !important;
  border: 1px solid rgba(0, 225, 255, 0.3) !important;
}/* ============================================================
   10. PAGINATION
   ============================================================ */

body.izi-game .pager,
body.izi-game .pager__items,
body.izi-game ul.pager {
  background: transparent !important;
  list-style: none;
  display: flex;
  gap: var(--s-1);
  justify-content: center;
  padding: 0;
  margin: var(--s-5) 0;
}body.izi-game .pager__item,
body.izi-game .pager__item a,
body.izi-game ul.pager li,
body.izi-game ul.pager li a {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--g-text-soft) !important;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-decoration: none;
}body.izi-game .pager__item--current,
body.izi-game .pager__item.is-active,
body.izi-game ul.pager li.pager-current {
  background: rgba(0, 225, 255, 0.14) !important;
  color: white !important;
  border-color: transparent !important;
}

/* ============================================================
   11. COMMENTAIRES (si activés)
   ============================================================ */

body.izi-game .comment,
body.izi-game .comment-wrapper,
body.izi-game .comments,
body.izi-game article.comment {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  color: var(--g-text);
}

body.izi-game .comment__meta,
body.izi-game .comment__author,
body.izi-game .submitted {
  color: var(--g-text-muted) !important;
  font-size: var(--t-sm);
}

/* ============================================================
   12. FILTER WRAPPER (CKEditor / select format)
   ============================================================ */

body.izi-game .filter-wrapper,
body.izi-game .filter-help,
body.izi-game .filter-guidelines {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--r-sm);
  color: var(--g-text-muted);
}

/* ============================================================
   13. MEDIA / IMAGE — si wrappers blancs
   ============================================================ */

body.izi-game .media,
body.izi-game .media-image,
body.izi-game .field--type-image,
body.izi-game .field--name-field-image,
body.izi-game .image-style-thumbnail,
body.izi-game figure {
  background: transparent !important;
}

body.izi-game figcaption {
  color: var(--g-text-muted) !important;
  font-size: var(--t-sm);
  margin-top: var(--s-2);
  text-align: center;
}

/* ============================================================
   14. FORME-WEBFORM (si module installé)
   ============================================================ */

body.izi-game .webform-submission-form,
body.izi-game .webform-element,
body.izi-game .webform-submission-information {
  background: transparent !important;
  color: var(--g-text);
}

body.izi-game .webform-confirmation,
body.izi-game .webform-message {
  background: rgba(0, 225, 255, 0.06) !important;
  border-color: rgba(0, 225, 255, 0.3) !important;
  color: var(--g-text);
  border-radius: var(--r-md);
}

/* ============================================================
   15. INLINE STYLES BLANC FORCÉ
   ============================================================ */

body.izi-game [style*="background-color: white"],
body.izi-game [style*="background-color: #fff"],
body.izi-game [style*="background-color:#fff"],
body.izi-game [style*="background-color: #FFF"],
body.izi-game [style*="background: white"],
body.izi-game [style*="background: #fff"],
body.izi-game [style*="background:#fff"],
body.izi-game [style*="background: rgb(255, 255, 255)"],
body.izi-game [style*="background-color: rgb(255, 255, 255)"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   16. ACCORDION / DETAILS GAMING
   ============================================================ */

body.izi-game details summary {
  cursor: pointer;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
body.izi-game details summary::-webkit-details-marker { display: none; }
body.izi-game details summary::after {
  content: '';
  position: absolute;
  right: var(--s-3);
  top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--g-cyan);
  border-bottom: 2px solid var(--g-cyan);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s;
}
body.izi-game details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* ============================================================
   17. PLACEHOLDERS, SKELETONS, SPINNERS
   ============================================================ */

body.izi-game .ajax-progress,
body.izi-game .ajax-progress-throbber {
  background: transparent !important;
}

body.izi-game .throbber {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-top-color: var(--g-cyan) !important;
}

body.izi-game .placeholder,
body.izi-game .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  background-size: 200% 100%;
  animation: skeleton 1.6s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   18. SCROLLBAR DOM-WIDE (pour tous éléments scrollables)
   ============================================================ */

body.izi-game *::-webkit-scrollbar { width: 8px; height: 8px; }
body.izi-game *::-webkit-scrollbar-track { background: transparent; }
body.izi-game *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-full);
}
body.izi-game *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 225, 255, 0.4);
}

/* ============================================================
   19. AUTOCOMPLETE / TYPEAHEAD
   ============================================================ */

body.izi-game .ui-autocomplete,
body.izi-game .ui-menu {
  background: #1a1f33 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--e-3) !important;
  color: var(--g-text) !important;
  padding: var(--s-1);
}

body.izi-game .ui-menu-item,
body.izi-game .ui-menu-item-wrapper {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  color: var(--g-text);
}

body.izi-game .ui-menu-item.ui-state-active,
body.izi-game .ui-menu-item-wrapper.ui-state-active {
  background: rgba(0, 225, 255, 0.1) !important;
  color: var(--g-cyan) !important;
}

/* ============================================================
   20. FALLBACK FINAL : node + article views
   ============================================================ */

/* Drupal génère parfois des wrappers .clearfix avec bg blanc dans certains thèmes */
body.izi-game .clearfix,
body.izi-game [class*="content--"],
body.izi-game [class*="--full"],
body.izi-game [class*="--default"] {
  background-color: transparent !important;
}

/* Les boutons natifs Drupal qui ne sont pas dans nos cards */
body.izi-game button.button,
body.izi-game .button:not(.btn-save):not(.arena-card__btn):not(.classement-action) {
  background: linear-gradient(135deg, #4f7cff, #6366f1, #8b5cf6) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.55rem 1.1rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--t-sm);
  transition: all 0.15s;
}
body.izi-game button.button:hover,
body.izi-game .button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--e-2);
}
body.izi-game .button--secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--g-text-soft) !important;
}
body.izi-game .button--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* === [ivann_css_21_final_cleanup] === */

/* ==================================================================
   IVANN FINAL CLEANUP #21 — Élimination des derniers blancs
   - color-scheme: dark (anti-FOUC + UI native dark)
   - Paragraphs module (paragraph--color--white)
   - Thème custom 'izianet'
   - Views blocks
   - accent-color natif
   ================================================================== */

/* ============================================================
   1. DARK MODE NATIF SYSTÈME
   ============================================================ */

/* Bloc unifié : color-scheme + accent + bg sans gating (asset path-restricted aux pages front) */
html, body {
  color-scheme: dark !important;
  accent-color: #00e1ff;
  background-color: #050810 !important;
}

/* Anti-FOUC : avant que JS ajoute body.izi-game, on force déjà le dark */
body, body * {
  caret-color: #00e1ff;
}

/* ============================================================
   2. PARAGRAPHS MODULE — éradication du --color--white
   ============================================================ */

body .paragraph,
body [class*="paragraph--"],
body [class*="paragraph__"],
body .paragraph--type--paragraphe,
body .paragraph--view-mode--default,
body .paragraph--color--white,
body .paragraph--color--gray,
body .paragraph--color--light,
body .paragraph--color--default,
body .paragraph-wrapper,
body .field--type-entity-reference-revisions,
body .field--name-field-paragraphes,
body .field--name-field-paragraph,
body .field--name-field-paragraphe {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--g-text, #e8eaf3) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Variantes colorées : on les redirige vers nos accents néon */
body .paragraph--color--blue,
body .paragraph--color--primary {
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.12), rgba(99, 102, 241, 0.06)) !important;
  border: 1px solid rgba(79, 124, 255, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

body .paragraph--color--purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(139, 92, 246, 0.06)) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

body .paragraph--color--green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(0, 255, 157, 0.06)) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

body .paragraph--color--yellow,
body .paragraph--color--gold {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(245, 158, 11, 0.04)) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

body .paragraph--color--red,
body .paragraph--color--danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(220, 38, 38, 0.04)) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

/* ============================================================
   3. VIEW BLOCKS — block-views-block* (toutes les vues)
   ============================================================ */

body [class*="block-views-block"],
body [class*="views-block"],
body .block-views,
body .views-element-container,
body .view,
body .view-display,
body .view-content,
body .views-row,
body .views-view-grid,
body .views-view-grid__row,
body .views-view-grid__column,
body .views-row-content,
body .view-empty {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--g-text, #e8eaf3);
  border: none;
}

/* Un view block utilisé comme card peut avoir besoin de son propre style — on le laisse via classes spécifiques */
body .block-views-blockivann-view-cours-par-langage-block-1 {
  background: transparent !important;
}

/* ============================================================
   4. THÈME 'izianet' CUSTOM — overrides
   ============================================================ */

body .izianet-block,
body .izianet-region,
body .izianet-card,
body .izianet-section,
body [class*="izianet-"]:not([class*="izianet-cours"]):not([class*="ivann-"]) {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit;
}

/* Si le thème custom a des wrappers white explicites */
body .white-bg, body .bg-white, body .has-white-bg {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   5. BLOCK CONTENU GÉNÉRIQUE — block-block-content[uuid]
   ============================================================ */

body [class*="block-block-content"],
body [class*="block-bundle-"],
body .block-content,
body .field--name-field-content {
  background: transparent !important;
  background-color: transparent !important;
}

/* Block-extra-field, block-field — wrappers de field individuels */
body [class*="block-extra-field-"],
body [class*="block-field-"],
body .block-system-main-block {
  background: transparent !important;
}

/* ============================================================
   6. LAYOUT BUILDER blocks
   ============================================================ */

body .block-layout-builder,
body .layout-builder,
body .layout-builder__layout,
body .layout-builder__region,
body .layout-builder-block,
body [data-layout-builder-highlight-id],
body .block--layout-builder {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   7. CONTAINERS UTILS (Bootstrap-style)
   ============================================================ */

body .container,
body .container-fluid,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .row,
body [class^="col-"],
body [class*=" col-"],
body .col,
body .grid,
body .grid-row,
body .grid-col {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   8. FIELD CONTENT — field-content + dérivés
   ============================================================ */

body .field-content,
body .field--name-field-image,
body .field--name-field-link,
body .field--name-field-text,
body .field--name-field-titre,
body .field--name-field-description,
body .field--name-field-summary,
body .field--name-field-tags {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   9. UNIVERSAL OVERRIDE pour wrappers structurels
   ============================================================ */

/* Tous les éléments avec un attribut data-history-* (Drupal) */
body [data-history-node-id],
body [data-quickedit-entity-id],
body [data-quickedit-field-id] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Drupal toolbar — qu'on ne touche PAS si visible (admin connecté) */
#toolbar-bar, #toolbar-administration, .toolbar-tray, .toolbar-bar {
  background: initial;
  color: initial;
}

/* ============================================================
   10. TEXT COLOR — anti texte invisible
   ============================================================ */

/* Si un parent a forcé color: black ou color: #000, on rétablit */
body p, body span:not([class*="player-pseudo"]), body div, body li, body td, body label,
body a:not(.btn-save):not(.arena-card__btn):not(.classement-action) {
  color: inherit;
}

/* Texte avec couleurs proches du blanc → adapter */
body [style*="color: black"],
body [style*="color: #000"],
body [style*="color:#000"],
body [style*="color: rgb(0"] {
  color: var(--g-text, #e8eaf3) !important;
}

/* Headings sans surcharge */
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: var(--g-text-bright, #ffffff);
}

/* ============================================================
   11. NATIVE FORM CONTROLS — accent-color cascading
   ============================================================ */

body input[type="checkbox"],
body input[type="radio"] {
  accent-color: #00e1ff;
}

/* Progress / meter */
body progress {
  appearance: none;
  height: 8px;
  width: 100%;
  border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  border: none;
  overflow: hidden;
}
body progress::-webkit-progress-bar { background: rgba(255,255,255,0.06); border-radius: 9999px; }
body progress::-webkit-progress-value { background: linear-gradient(90deg, #00e1ff, #4f7cff, #a855f7); border-radius: 9999px; }
body progress::-moz-progress-bar { background: linear-gradient(90deg, #00e1ff, #4f7cff, #a855f7); border-radius: 9999px; }

body meter {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 9999px;
}

/* ============================================================
   12. AUTOFILL fix (browser jaune autocomplete)
   ============================================================ */

body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
  -webkit-text-fill-color: var(--g-text, #e8eaf3) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(26, 31, 51, 0.95) inset !important;
  caret-color: #00e1ff;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ============================================================
   13. IFRAME — preserve mini-éditeur PHP-WASM mais ajouter ring
   ============================================================ */

body iframe {
  background: transparent !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* iframe avec srcdoc (mini-éditeur PHP) reste avec son fond */
body iframe[srcdoc],
body iframe[src*="editor"] {
  background: #0a0e1a !important;
}

/* ============================================================
   14. VIDEO / EMBED
   ============================================================ */

body video, body embed, body object {
  background: #050810 !important;
  border-radius: 12px;
  max-width: 100%;
}

/* ============================================================
   15. SVG — couleurs cascadent depuis text color
   ============================================================ */

body svg:not(.izi-logo):not(.izi-logo-mark):not([data-lucide]) {
  color: inherit;
}

/* ============================================================
   16. SELECTION + HIGHLIGHTS
   ============================================================ */

body ::selection {
  background: rgba(0, 225, 255, 0.3);
  color: #ffffff;
  text-shadow: none;
}

body ::-moz-selection {
  background: rgba(0, 225, 255, 0.3);
  color: #ffffff;
}

/* mark (highlighted text) */
body mark {
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fbbf24 !important;
  padding: 0 4px;
  border-radius: 3px;
}

/* ============================================================
   17. ABBR / DFN / SAMP / VAR — éléments inline rares
   ============================================================ */

body abbr[title] {
  text-decoration: underline dotted rgba(0, 225, 255, 0.6);
  cursor: help;
}

body dfn {
  color: #00e1ff !important;
  font-style: normal;
}

body samp, body var {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 225, 255, 0.06);
  padding: 0 4px;
  border-radius: 3px;
  color: #7dd3fc !important;
  font-style: normal;
}

/* ============================================================
   18. DETAILS / SUMMARY restoration if collapsed
   ============================================================ */

body details {
  background: rgba(255,255,255,0.02) !important;
}

/* ============================================================
   19. TIME / TIMESTAMPS
   ============================================================ */

body time, body .timestamp, body .submitted {
  color: var(--g-text-muted, #7a829e) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}

/* ============================================================
   20. SOCIAL SHARING / EXTERNAL ICONS
   ============================================================ */

body .social-share,
body .share-buttons,
body .addtoany,
body .a2a_kit {
  background: transparent !important;
}

body .social-share a,
body .share-buttons a,
body .a2a_button {
  color: var(--g-text-soft, #b8bdd1) !important;
}

/* ============================================================
   21. VERSION DRUPAL "GIN" THEME (admin) — exception
   ============================================================ */

body.gin--vertical-toolbar,
body.gin--horizontal-toolbar,
body.gin-secondary-toolbar--frontend {
  background-color: initial;
}

/* ============================================================
   22. DRUPAL SEVEN/CLAR THEME admin form leftovers
   ============================================================ */

body .form-required::after {
  color: #ec4899 !important;
}

/* Required asterisk visible */
body .form-required {
  color: var(--g-text-bright, #ffffff) !important;
}

/* ============================================================
   23. LANGUAGE/LOCALE SWITCHER
   ============================================================ */

body .language-switcher-language-url,
body .language-switcher,
body [class*="language-link"] {
  background: transparent !important;
}

/* ============================================================
   24. EXPOSED FILTERS (Views)
   ============================================================ */

body .views-exposed-form,
body .views-exposed-widget,
body .views-exposed-widgets,
body .views-submit-button {
  background: transparent !important;
}

body .views-exposed-form .form-item {
  background: rgba(255,255,255,0.02) !important;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   25. FALLBACK FINAL — force la transparence sur ANY * sauf
   éléments avec une bg sémantique forte (cards, modals, inputs, ...)
   ============================================================ */

/* Cible TOUS les wrappers Drupal-like (nom de classe contient ces tokens) */
body [class*="region"]:not(input):not(button):not(textarea),
body [class*="block-"]:not(input):not(button):not(textarea):not(.block-list-item),
body [class*="paragraph"]:not(.paragraph--color--blue):not(.paragraph--color--purple):not(.paragraph--color--green):not(.paragraph--color--yellow):not(.paragraph--color--gold):not(.paragraph--color--red):not(.paragraph--color--danger):not(.paragraph--color--primary),
body [class*="layout-"]:not(input):not(button):not(textarea),
body [class*="page-"]:not(input):not(button):not(textarea),
body [class*="main-"]:not(input):not(button):not(textarea),
body [class*="content-"]:not(.content-page):not(input):not(button):not(textarea),
body [class*="wrapper"]:not(input):not(button):not(textarea),
body [class*="container"]:not(input):not(button):not(textarea),
body [class*="section"]:not(input):not(button):not(textarea):not(.profil-card):not(.arena-card),
body [class*="grid"]:not(input):not(button):not(textarea):not(.grade-chip),
body [class*="row"]:not(.skill-row):not(.classement-row):not(.profil-pseudo-row):not(input):not(button):not(textarea),
body [class*="col"]:not(input):not(button):not(textarea):not(.cosmetic-item) {
  background-color: transparent !important;
}

/* ============================================================
   26. SPECIFIC FIXES from observation
   ============================================================ */

/* Mini-éditeur PHP-WASM iframe (ne pas casser) */
body .editeur-php-wasm,
body .ivann-editor,
body iframe[id*="editor"],
body iframe[id*="wasm"] {
  background: #0a0e1a !important;
  border: 1px solid rgba(0, 225, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Skiplinks / bypass links (accessibilité) — invisibles par défaut, visibles au focus */
body .skiplinks,
body .visually-hidden,
body .skip-link {
  background: rgba(0, 225, 255, 0.95) !important;
  color: #050810 !important;
}

/* Boutons d'édition (icônes "edit/delete") sur cards */
body .ckeditor5-toolbar-active button {
  background: transparent !important;
}

/* ============================================================
   27. SUR L'HOMEPAGE spécifiquement — paragraphes hero
   ============================================================ */

body.path-frontpage .paragraph,
body.page-node-1 .paragraph,
body.page-node-1 .field--name-field-paragraphes > .field__item {
  margin-bottom: 32px;
}

/* Hero paragraph type sur homepage */
body .paragraph--type--hero,
body .paragraph--type--banner {
  background: linear-gradient(135deg, rgba(79, 124, 255, 0.18), rgba(168, 85, 247, 0.12)) !important;
  border: 1px solid rgba(79, 124, 255, 0.3) !important;
  border-radius: 20px !important;
  padding: 48px 32px !important;
  position: relative;
  overflow: hidden;
}
body .paragraph--type--hero::before,
body .paragraph--type--banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(0, 225, 255, 0.15), transparent 60%);
  pointer-events: none;
}

/* ============================================================
   28. CONTRAST FIXES — éviter texte invisible
   ============================================================ */

/* Si un élément a un fond clair (jamais voulu) ET texte clair, on force texte sombre */
body [class*="bg-light"] *,
body [class*="bg-white"] * {
  color: var(--g-text, #e8eaf3) !important;
}

/* Toggle/Switch visibility */
body .toggle, body .switch, body input[type="checkbox"].toggle {
  accent-color: #00e1ff;
}

/* ============================================================
   29. MODAL OVERLAYS — make sure they cover everything
   ============================================================ */

body .profil-modal-backdrop,
body .ui-widget-overlay {
  z-index: 9999 !important;
}

body .profil-modal,
body .ui-dialog {
  z-index: 10000 !important;
}

body .ivann-xp-badge {
  z-index: 9998 !important;
}

/* ============================================================
   30. PRINT — réinforce
   ============================================================ */

@media print {
  body, html { background: white !important; color: black !important; }
  body .ivann-xp-badge, body header, body footer, body nav { display: none !important; }
}

/* === [ivann_css_22_audit_fixes] === */

/* ==================================================================
   IVANN AUDIT FIXES #22 — Basé sur Selenium getComputedStyle
   Cible les classes EXACTES trouvées en blanc :
   - .php-feature, .php-btn-secondary, .php-badge
   - .course-progress-badge
   - .views-field-field-ivann-niveau-du-cours
   - .views-field-field-ivann-duree-estimee
   - .parcours-page__progress
   - .parcours-step__link
   - button "Personnaliser" (Drupal contextual admin)
   ================================================================== */

/* ============================================================
   1. THÈME PHP — pages /php (et symétrie /html /sql)
   ============================================================ */

body .php-feature, body .html-feature, body .sql-feature, body .javascript-feature,
body .php-card, body .html-card, body .sql-card, body .javascript-card,
body .lang-feature, body .lang-card,
body [class*="-feature"]:not([class*="features-list"]),
body [class*="-card"]:not(.cosmetic-item):not(.profil-card):not(.arena-card):not(.jouer-card) {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--g-text, #e8eaf3) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body .php-feature:hover, body .html-feature:hover, body .sql-feature:hover, body .javascript-feature:hover,
body .php-card:hover, body .html-card:hover, body .sql-card:hover, body .javascript-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 225, 255, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 24px -4px rgba(0, 225, 255, 0.3) !important;
}

body .php-feature *, body .html-feature *, body .sql-feature *, body .javascript-feature *,
body .php-card *, body .html-card *, body .sql-card * {
  background-color: transparent !important;
  color: inherit;
}

body .php-feature h2, body .php-feature h3, body .php-feature h4,
body .html-feature h2, body .sql-feature h2,
body .php-card h2, body .php-card h3, body .php-card h4 {
  color: #ffffff !important;
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
}

body .php-feature p, body .html-feature p, body .sql-feature p,
body .php-card p, body .html-card p, body .sql-card p {
  color: var(--g-text-soft, #b8bdd1) !important;
}

/* ============================================================
   2. BOUTONS SECONDAIRES THÈME LANGAGE
   ============================================================ */

body .php-btn-secondary, body .html-btn-secondary, body .sql-btn-secondary,
body .javascript-btn-secondary, body .lang-btn-secondary,
body [class*="-btn-secondary"] {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
  padding: 0.7rem 1.25rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body .php-btn-secondary:hover, body .html-btn-secondary:hover, body .sql-btn-secondary:hover,
body [class*="-btn-secondary"]:hover {
  background: rgba(0, 225, 255, 0.08) !important;
  border-color: rgba(0, 225, 255, 0.4) !important;
  color: #00e1ff !important;
  transform: translateY(-1px);
}

/* Boutons primaires de thème langage (par symétrie) */
body .php-btn, body .html-btn, body .sql-btn, body .javascript-btn,
body .php-btn-primary, body .html-btn-primary, body .sql-btn-primary,
body [class*="-btn-primary"] {
  background: linear-gradient(135deg, #4f7cff, #6366f1, #8b5cf6) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  padding: 0.7rem 1.4rem !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.15s;
}
body .php-btn:hover, body .html-btn:hover, body .sql-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(79, 124, 255, 0.5);
}

/* Spécialisation par langage du primary */
body.course-theme-php .php-btn, body .php-btn:not(.php-btn-secondary) {
  background: linear-gradient(135deg, #777cb3, #4f7cff, #a855f7) !important;
}
body.course-theme-html .html-btn, body .html-btn:not(.html-btn-secondary) {
  background: linear-gradient(135deg, #e34c26, #ff7849, #fbbf24) !important;
}
body.course-theme-sql .sql-btn, body .sql-btn:not(.sql-btn-secondary) {
  background: linear-gradient(135deg, #336791, #00e1ff, #4f7cff) !important;
}

/* ============================================================
   3. BADGES — bandeau "FORMATION WEB" et compteur cours
   ============================================================ */

body .php-badge, body .html-badge, body .sql-badge, body .javascript-badge,
body .lang-badge, body [class*="-badge"]:not(.grade-chip):not(.izi-icon):not(.cosmetic-item__btn) {
  background: rgba(0, 225, 255, 0.1) !important;
  background-color: rgba(0, 225, 255, 0.1) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(0, 225, 255, 0.25) !important;
  border-radius: 9999px !important;
  padding: 4px 12px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  display: inline-flex;
  align-items: center;
}
body.course-theme-php .php-badge, body.course-theme-php [class*="-badge"]:not(.grade-chip) {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}
body.course-theme-html .html-badge, body.course-theme-html [class*="-badge"]:not(.grade-chip) {
  background: rgba(255, 120, 73, 0.12) !important;
  color: #fb923c !important;
  border-color: rgba(255, 120, 73, 0.3) !important;
}
body.course-theme-sql .sql-badge, body.course-theme-sql [class*="-badge"]:not(.grade-chip) {
  background: rgba(0, 225, 255, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(0, 225, 255, 0.3) !important;
}

/* ============================================================
   4. COURSE-PROGRESS-BADGE (compteur d'exercices) — sur cards de cours
   ============================================================ */

body .course-progress-badge,
body [class*="course-progress"],
body [class*="progress-badge"] {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   5. VIEWS FIELDS — meta info (niveau, durée, type)
   ============================================================ */

body .views-field,
body [class*="views-field-field-"]:not(.views-field-title):not(.views-field-name) {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit;
}

/* Mais si la view-field affiche une meta (niveau, durée), on lui donne un look pill */
body .views-field-field-ivann-niveau-du-cours,
body .views-field-field-ivann-duree-estimee,
body .views-field-field-ivann-difficulte,
body .views-field-field-ivann-type,
body .views-field-field-niveau,
body .views-field-field-duree,
body .views-field-field-difficulte,
body .views-field-field-type-de-contenu,
body [class*="views-field-field-niveau"],
body [class*="views-field-field-duree"],
body [class*="views-field-field-difficulte"] {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
}

body .views-field-field-ivann-niveau-du-cours .field-content::before,
body .views-field-field-niveau .field-content::before {
  content: '⚡';
  margin-right: 4px;
  color: #fbbf24;
}
body .views-field-field-ivann-duree-estimee .field-content::before,
body .views-field-field-duree .field-content::before {
  content: '⏱';
  margin-right: 4px;
  color: #00e1ff;
}

/* ============================================================
   6. PARCOURS — bandeau de progression + steps
   ============================================================ */

body .parcours-page__progress,
body .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);
}

body .parcours-page__progress *,
body .parcours-progress * {
  color: inherit !important;
  background-color: transparent !important;
}

/* Étapes du parcours */
body .parcours-step__link,
body .parcours-step,
body .parcours-step-link,
body [class*="parcours-step"] {
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--g-text, #e8eaf3) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  display: block !important;
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: 8px;
}

body .parcours-step__link:hover,
body .parcours-step:hover,
body [class*="parcours-step"]:hover {
  border-color: rgba(0, 225, 255, 0.4) !important;
  background: linear-gradient(160deg, rgba(0, 225, 255, 0.05), rgba(79, 124, 255, 0.02)) !important;
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(0, 225, 255, 0.2);
}

/* État "complété" (souvent une checkmark ✓ dans le texte) */
body .parcours-step--done,
body .parcours-step__link--done,
body .parcours-step.is-done,
body [class*="parcours-step"][class*="done"],
body [class*="parcours-step"][class*="completed"] {
  background: linear-gradient(160deg, rgba(0, 255, 157, 0.06), rgba(16, 185, 129, 0.02)) !important;
  border-color: rgba(0, 255, 157, 0.3) !important;
}

/* État "courant" */
body .parcours-step--current,
body .parcours-step__link--current,
body .parcours-step.is-current,
body [class*="parcours-step"][class*="current"],
body [class*="parcours-step"][class*="active"] {
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.1), rgba(79, 124, 255, 0.04)) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 0 24px -4px rgba(168, 85, 247, 0.4);
}

/* ============================================================
   7. CONTEXTUAL LINKS DRUPAL — bouton "Personnaliser" (admin-only)
   ============================================================ */

/* Drupal injecte des boutons "Edit"/"Personnaliser" en mode admin connecté.
   On les masque en frontend (ils restent dispo via la toolbar admin). */
body button[title*="Personnaliser"],
body button[aria-label*="Personnaliser"],
body button[title*="Customize"],
body button[aria-label*="Customize"],
body .contextual-trigger,
body .contextual-toolbar-tab,
body button.trigger,
body .layout-builder-block__actions,
body .lpb-controls,
body .lpb-controls-list,
body .layout-builder__add-block,
body .layout-builder__add-section {
  background: rgba(0, 0, 0, 0.6) !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  padding: 4px 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Visible seulement au hover du parent (pour éditeur), invisible sinon */
body *:hover > button[title*="Personnaliser"],
body *:hover > .contextual-trigger,
body *:hover > .layout-builder-block__actions {
  opacity: 0.6;
}
body button[title*="Personnaliser"]:hover,
body .contextual-trigger:hover {
  opacity: 1 !important;
  border-color: rgba(0, 225, 255, 0.4) !important;
  color: #00e1ff !important;
}

/* ============================================================
   8. EXTRA — meta wrappers, summary blocks
   ============================================================ */

body .field--name-field-ivann-objectifs-pedago,
body .field--name-field-ivann-prerequis,
body .field--name-field-ivann-resultat,
body .field--name-field-ivann-points-cles,
body [class*="field--name-field-ivann-"] {
  background-color: transparent !important;
}

/* Si une meta-card est wrap dans une box visuelle */
body .meta-box, body .info-box, body .pedagogy-box, body .tip-box,
body .objectives-box, body .prerequisites-box {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  color: var(--g-text, #e8eaf3) !important;
}

/* ============================================================
   9. CARDS GENERIQUES "card" / "tile"
   ============================================================ */

body .card:not(.profil-card):not(.arena-card),
body .tile, body .item-card, body .resource-card,
body .ivann-card, body [class*="ivann-card"]:not(.ivann-cards-grid),
body .formation-card, body .module-card, body .lesson-card,
body .exercise-card, body .lecon-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--g-text, #e8eaf3) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
body .card:hover:not(.profil-card):not(.arena-card),
body .tile:hover, body .item-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 225, 255, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(0, 225, 255, 0.1);
}

/* ============================================================
   10. TEXT LISIBILITÉ INVERSE — anti texte sombre sur dark
   ============================================================ */

/* Si un parent a forcé color: black ou très sombre, on rétablit clair */
body [style*="color: #000"],
body [style*="color:#000"],
body [style*="color: black"],
body [style*="color:black"],
body [style*="color: rgb(0"] {
  color: var(--g-text, #e8eaf3) !important;
}

/* Si un wrapper white-bg avait color noir hardcodé, fix au passage */
body .php-feature *[style*="color"]:not([style*="rgb(255"]):not([style*="white"]):not([style*="#fff"]),
body .html-feature *[style*="color"]:not([style*="rgb(255"]):not([style*="white"]):not([style*="#fff"]),
body .parcours-step__link *[style*="color"]:not([style*="rgb(255"]):not([style*="white"]):not([style*="#fff"]) {
  color: inherit !important;
}

/* ============================================================
   11. SUR LES LISTS / GRIDS — wrappers blancs résiduels
   ============================================================ */

body .ivann-cards-grid,
body .cards-grid, body .grid-cards, body .courses-grid,
body .formation-grid, body .features-grid, body .langages-grid,
body [class*="-grid"]:not(.cosmetics-grid):not(.classement-list):not(.profil-grid):not(.arenes-grid) {
  background-color: transparent !important;
}

/* ============================================================
   12. NAVIGATION PRÉC/SUIV ENTRE COURS — boutons prev/next
   ============================================================ */

body .parcours-nav,
body .parcours-nav__list,
body .course-nav, body .cours-nav,
body [class*="cours-nav"],
body [class*="parcours-nav__"]:not(.parcours-nav__btn) {
  background: transparent !important;
  background-color: transparent !important;
}

body .parcours-nav__btn,
body .parcours-nav__btn--prev,
body .parcours-nav__btn--next,
body .parcours-nav__prev,
body .parcours-nav__next,
body .course-nav-btn,
body .cours-nav-btn,
body [class*="parcours-nav__btn"],
body [class*="cours-nav-btn"],
body a[class*="nav__btn"]:not(.izi-icon):not(.btn-save):not(.arena-card__btn) {
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
  background-color: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--g-text, #e8eaf3) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  font-family: 'Rajdhani', 'Inter', sans-serif !important;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

body .parcours-nav__btn:hover,
body [class*="parcours-nav__btn"]:hover,
body [class*="cours-nav-btn"]:hover {
  border-color: rgba(0, 225, 255, 0.4) !important;
  background: linear-gradient(160deg, rgba(0, 225, 255, 0.05), rgba(79, 124, 255, 0.02)) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 24px -8px rgba(0, 225, 255, 0.4);
}

body .parcours-nav__btn--prev:hover { transform: translateX(-3px) translateY(-2px); }
body .parcours-nav__btn--next:hover { transform: translateX(3px) translateY(-2px); }

body .parcours-nav__btn *,
body [class*="parcours-nav__btn"] *,
body [class*="cours-nav-btn"] * {
  background-color: transparent !important;
  color: inherit !important;
}

/* Le label (ex. "← PRÉCÉDENT") en majuscule petit */
body .parcours-nav__btn-label,
body [class*="nav__btn"] .label,
body [class*="nav__btn"] strong {
  color: var(--g-text-muted, #7a829e) !important;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

body .parcours-nav__btn-title,
body [class*="nav__btn"] .title {
  color: var(--g-text-bright, #ffffff) !important;
  font-size: 1rem;
  font-weight: 600;
}

/* ============================================================
   13. FIELD RENDERING DIRECT (pas via view) — bandeaux meta
   ============================================================ */

/* Spécificité boostée : html body[class] + classes répétées (force level)
   pour passer devant le thème izianet et tous les anciens asset injector */
html body[class] .field.field--name-field-ivann-niveau-du-cours,
html body[class] .field.field--name-field-ivann-duree-estimee,
html body[class] .field.field--name-field-ivann-difficulte,
html body[class] .field.field--name-field-ivann-langage,
html body[class] .field.field--name-field-ivann-phase,
html body[class] .field.field--name-field-ivann-type,
html body[class] .field.field--name-field-niveau,
html body[class] .field.field--name-field-duree,
html body[class] .field[class*="field--name-field-ivann-"][class*="field--name-field-ivann-"],
html body[class] .field[class*="field--name-field-niveau"],
html body[class] .field[class*="field--name-field-duree"],
html body[class] .field[class*="field--name-field-difficulte"],
html body[class] .block.block-field-blocknodecoursfield-ivann-niveau-du-cours,
html body[class] .block.block-field-blocknodecoursfield-ivann-duree-estimee,
html body[class] .block[class*="block-field-blocknodecoursfield-ivann-"],
html body[class] .block[class*="block-field-blocknodecours"] {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* Reset enfants pour qu'ils héritent du parent */
html body[class] .field[class*="field--name-field-ivann-"] *:not([class*="ivann-"]),
html body[class] .field[class*="field--name-field-niveau"] *:not([class*="ivann-"]),
html body[class] .field[class*="field--name-field-duree"] *:not([class*="ivann-"]),
html body[class] .block[class*="block-field-blocknodecoursfield-ivann-"] *:not([class*="ivann-"]),
html body[class] .block[class*="block-field-blocknodecours"] *:not([class*="ivann-"]) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body .field.field--name-field-ivann-niveau-du-cours .field__label,
body .field.field--name-field-ivann-duree-estimee .field__label,
body .field[class*="field--name-field-ivann-"] .field__label {
  color: var(--g-text-muted, #7a829e) !important;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

body .field.field--name-field-ivann-niveau-du-cours .field__item,
body .field.field--name-field-ivann-duree-estimee .field__item,
body .field[class*="field--name-field-ivann-"] .field__item {
  color: var(--g-text-bright, #ffffff) !important;
  background-color: transparent !important;
}

/* Icônes décoratives sur les meta */
body .field.field--name-field-ivann-niveau-du-cours::before { content: '⚡'; color: #fbbf24; }
body .field.field--name-field-ivann-duree-estimee::before { content: '⏱'; color: #00e1ff; }
body .field.field--name-field-ivann-difficulte::before { content: '🎯'; }
body .field.field--name-field-ivann-langage::before { content: '🐘'; }

/* ============================================================
   14. COMPTEUR D'EXERCICES (span injecté par JS)
   ============================================================ */

/* Le span sans classe avec "X/Y exercices terminés" — sélecteur attribut */
body span[class=""],
body span:not([class]),
body .exercises-counter,
body [class*="exercises-count"],
body [class*="exercice-count"],
body [class*="progress-count"] {
  background-color: transparent !important;
}

/* Si le compteur a une classe identifiable */
body .ivann-exercises-counter,
body .ivann-progress-counter,
body [class*="ivann-counter"] {
  background: rgba(0, 225, 255, 0.08) !important;
  background-color: rgba(0, 225, 255, 0.08) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(0, 225, 255, 0.2) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* Heuristique : tout span de petite taille avec bg lavande */
body span[style*="background"] {
  background-color: transparent !important;
}

/* ============================================================
   15. /mini-projets — boutons de filtre
   ============================================================ */

body .mp-filter,
body .mp-filter-btn,
body .miniprojet-filter,
body .filter-btn,
body [class*="mp-filter"],
body [class*="phase-filter"] {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--g-text-soft, #b8bdd1) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

body .mp-filter:hover,
body [class*="mp-filter"]:hover {
  border-color: rgba(0, 225, 255, 0.4) !important;
  color: #00e1ff !important;
  background: rgba(0, 225, 255, 0.05) !important;
}

body .mp-filter.is-active,
body .mp-filter--active,
body .mp-filter[aria-pressed="true"],
body [class*="mp-filter"][class*="active"] {
  background: linear-gradient(135deg, #4f7cff, #8b5cf6) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 4px 16px -2px rgba(79, 124, 255, 0.4);
}

/* ============================================================
   16. EXTRA : div.field-content / span avec bg inline lavande
   ============================================================ */

/* Drupal injecte parfois bg via .field-content avec style "background:#eef2ff" */
body .field-content[style*="background"],
body .field__item[style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Tout span avec un bg lavande/clair injecté inline ou hérité */
body .ivann-course-page span:not([class*="player-pseudo"]):not([class*="grade-chip"]):not([class*="izi-"]):not([data-lucide]),
body .node--type-cours span:not([class*="player-pseudo"]):not([class*="grade-chip"]):not([class*="izi-"]):not([data-lucide]) {
  background-color: transparent !important;
}