/* Compatibilité avec les blocs HTML écrits pour Quartz dans les supports.
   Les variables Quartz utilisées par les styles intégrés aux pages (quiz, cadres) pointent vers la charte du site. */
:root {
  --light: var(--fond-2);
  --lightgray: var(--bordure);
  --gray: var(--texte-doux);
  --darkgray: var(--texte-doux);
  --dark: var(--texte);
  --secondary: var(--accent);
  --tertiary: var(--accent);
  --highlight: color-mix(in srgb, var(--accent) 12%, transparent);
  --formation-accent: var(--accent);
  --formation-accent-on-light: var(--accent);
  --formation-accent-on-dark: var(--accent);
  --formation-accent-contrast: var(--fond);
  --codeFont: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* En-tête d'accueil */
.course-intro-hero, .module-hero {
  margin: 0 0 2rem; padding: clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--bordure); border-left: 5px solid var(--accent); border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--fond-2)), var(--fond-2));
}
.course-intro-hero h2, .module-hero h2 { margin: .4rem 0 .6rem; border: 0; padding: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.course-intro-hero p, .module-hero p { margin: .3rem 0; }
.module-hero__eyebrow { margin: 0 !important; color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.course-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.course-actions a { padding: .45rem .9rem; border: 1px solid var(--bordure); border-radius: .6rem; text-decoration: none; }

/* Plan d'un chapitre et grilles de cartes */
.chapter-map, .learning-card-grid, .decision-grid, .learning-mode-grid, .download-grid, .aws-learning-path {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; margin: 1.2rem 0 2rem;
}
.chapter-map a, .download-grid a, .aws-learning-path > a {
  display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-height: 3.2rem; padding: .7rem .9rem;
  border: 1px solid var(--bordure); border-radius: .7rem; background: var(--fond-2); color: var(--texte);
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.chapter-map a:hover, .download-grid a:hover, .aws-learning-path > a:hover { border-color: var(--accent); transform: translateY(-2px); }
.download-grid span, .aws-learning-path small { color: var(--texte-doux); font-size: .9rem; }
.learning-card, .decision-grid > div, .learning-mode-grid > div {
  padding: 1rem; border: 1px solid var(--bordure); border-radius: .8rem; background: var(--fond-2);
}
.learning-card { display: grid; gap: .3rem; text-decoration: none; color: var(--texte); }
.learning-card__number { color: var(--accent); font-weight: 700; }
.learning-card__meta { color: var(--texte-doux); font-size: .85rem; }
.chapter-annex { margin: 1rem 0; padding: .8rem 1rem; border: 1px dashed var(--bordure); border-radius: .7rem; }

/* Encadré de vérification */
.concept-check {
  margin: 1.5rem 0 2rem; padding: 1rem 1.2rem; border: 1px solid var(--bordure);
  border-left: 5px solid var(--accent); border-radius: .8rem; background: color-mix(in srgb, var(--accent) 7%, var(--fond-2));
}
.concept-check > strong { color: var(--accent); }

/* Cadres intégrés (jeux, quiz externes, vidéos) */
.training-interactive, .quiz-frame { margin: 1.2rem 0; }
article iframe { max-width: 100%; border: 1px solid var(--bordure); border-radius: .6rem; }

/* Encadrés repliables issus de « > [!type]- » */
details.encadre > summary { cursor: pointer; font-weight: 700; }

@media print {
  .chapter-map a, .download-grid a { break-inside: avoid; }
  article iframe { display: none; }
}

/* Quiz interactifs (format commun) */
.pq-instructions { padding: .7em 1em; border-radius: 8px; background: var(--fond-2); border: 1px solid var(--bordure); margin-bottom: 1em; }
.pq-question { margin: 0 0 1.4rem; }
.pq-q { margin: 0 0 .6em 0; }
.pq-options { display: flex; flex-direction: column; gap: .5em; margin: 0 0 .6em 0; }
.pq-option { display: block; width: 100%; text-align: left; padding: .6em .9em; border-radius: 8px; border: 1px solid var(--bordure); background: var(--fond-2); color: inherit; cursor: pointer; font: inherit; }
.pq-option:hover:not(:disabled) { border-color: var(--accent); }
.pq-option:disabled { cursor: default; }
.pq-option.pq-correct { border-color: #3fb950; background: rgba(63,185,80,.12); }
.pq-option.pq-wrong { border-color: #f85149; background: rgba(248,81,73,.12); }
.pq-feedback { padding: .7em 1em; border-radius: 8px; background: var(--fond-2); border: 1px solid var(--bordure); }
.pq-verdict { margin: 0 0 .4em 0; font-weight: 700; }
.pq-verdict-true { color: #3fb950; }
.pq-verdict-false { color: #f85149; }
.pq-explain { margin: 0; }