/* =========================================================================
   CLAIRIUM ACADEMY — Feuille de style principale
   Palette : ivoire / bleu nuit / indigo / or
   ========================================================================= */

:root {
  --paper: #FAF8F3;
  --cream: #FDFBF7;
  --ink: #15161C;
  --ink-soft: rgba(21, 22, 28, 0.72);
  --slate: #6B7180;
  --line: rgba(21, 22, 28, 0.10);

  --indigo: #3D3AA8;
  --indigo-dark: #26235F;
  --indigo-light: #EEEDFB;
  --indigo-mid: #DCDAF6;

  --gold: #C08A2E;
  --gold-light: #E9C77E;
  --gold-pale: #F9E7AE;
  --gold-dark: #8F6A1F;

  --navy: #131A3E;
  --navy-deep: #0A0E28;

  --green: #16A34A;
  --red: #DC2626;

  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 20px 60px -25px rgba(21, 22, 28, 0.25);
  --shadow-lg: 0 45px 100px -35px rgba(10, 10, 8, 0.5);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-script: 'Great Vibes', cursive;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--indigo); color: var(--paper); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D8D4C8; border-radius: 4px; }

/* ---------- Utilitaires ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--slate); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, opacity .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--indigo); color: var(--paper); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--indigo-dark); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-light); }
.btn-ghost { border: 1px solid var(--line); }
.btn-ghost:hover { border-color: rgba(21,22,28,.4); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { opacity: .88; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] {
  background: rgba(21,22,28,.08); color: var(--slate); cursor: not-allowed; box-shadow: none;
}

/* ---------- Champs ---------- */
.field { width: 100%; max-width: 380px; padding: 11px 14px; border: 1px solid rgba(21,22,28,.15);
  border-radius: 10px; font-size: 14px; background: #fff; outline: none; }
.field:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-light); }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--slate); margin-bottom: 6px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,248,243,.88); backdrop-filter: blur(10px);
  transition: box-shadow .25s ease;
}
.header.scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 20px -18px rgba(0,0,0,.3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-text { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink-soft); }
.nav a:hover, .nav a.active { color: var(--ink); }
@media (max-width: 820px) { .nav { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 56px 0 88px; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero-blob-1 { top: -100px; right: -160px; width: 520px; height: 520px; background: var(--indigo-mid); opacity: .55; }
.hero-blob-2 { top: 160px; left: -130px; width: 380px; height: 380px; background: rgba(233,199,126,.35); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }

/* ⚠️ INDISPENSABLE : par défaut, une colonne de grille a « min-width: auto »
   et refuse de rétrécir sous la taille de son contenu. Le diplôme, dessiné
   à 1000 px de large, faisait donc exploser la colonne du hero. */
.hero-grid > * { min-width: 0; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--indigo-light); color: var(--indigo-dark);
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.06; margin: 26px 0 0;
}
.hero h1 em { font-style: normal; color: var(--indigo); }
.hero-lead { margin-top: 24px; font-size: 17px; color: var(--slate); max-width: 34em; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.stats { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 520px; }
.stat-value { font-family: var(--font-mono); font-size: clamp(1.3rem, 3vw, 1.85rem); font-weight: 600; color: var(--indigo); }
.stat-label { font-size: 11px; color: var(--slate); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

/* Aperçu certificat (vignette du hero) */
.hero-card {
  position: relative; background: #fff; border: 1px solid rgba(21,22,28,.06);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; transform: rotate(1deg);
}
.hero-card-note {
  position: absolute; bottom: -26px; left: -22px; background: #fff; border: 1px solid rgba(21,22,28,.06);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; transform: rotate(-3deg);
  display: flex; align-items: center; gap: 10px;
}

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-white { background: #fff; border-top: 1px solid rgba(21,22,28,.05); border-bottom: 1px solid rgba(21,22,28,.05); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .08em; }
.section-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top: 8px; line-height: 1.2; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head p { margin-top: 14px; color: var(--slate); }

/* ---------- Filtres catégories ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.filter-chip {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink-soft); transition: all .2s ease;
}
.filter-chip:hover { border-color: rgba(21,22,28,.35); }
.filter-chip.active { background: var(--indigo); color: var(--paper); border-color: var(--indigo); }

/* ---------- Cartes de cours ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.course-card {
  position: relative; display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.course-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -24px rgba(61,58,168,.38); }
.course-thumb {
  height: 110px; display: flex; align-items: center; justify-content: center; font-size: 42px;
  background: linear-gradient(135deg, var(--indigo-mid), rgba(233,199,126,.45));
}
.course-body { padding: 24px; }
.course-cat { font-size: 11px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .05em; }
.course-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin-top: 6px; line-height: 1.35; }
.course-blurb { font-size: 13px; color: var(--slate); margin-top: 8px; line-height: 1.55; }
.course-meta { display: flex; gap: 12px; margin-top: 16px; font-size: 12px; color: var(--slate); }
.course-flag { position: absolute; top: 12px; right: 12px; font-size: 20px; }
.level-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; background: var(--indigo-light); color: var(--indigo-dark);
}
.level-tag.pro { background: rgba(192,138,46,.16); color: var(--gold-dark); }

/* ---------- Barre de progression ---------- */
.progress-track { width: 100%; height: 8px; background: var(--indigo-light); border-radius: 999px; overflow: hidden; }
.progress-track.thin { height: 5px; }
.progress-fill { height: 100%; background: var(--indigo); border-radius: 999px; transition: width .5s ease; }
.progress-fill.done { background: var(--green); }

/* ---------- Panneaux / cartes génériques ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.panel + .panel { margin-top: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }

/* ---------- Contenu d'un chapitre ---------- */
.chapter { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; }
.chapter-num { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-dark); }
.chapter-title { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin-top: 4px; }
.chapter-body { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.chapter-body p { margin-bottom: 14px; line-height: 1.75; }
.chapter-body p:last-child { margin-bottom: 0; }

.callout { border-left: 3px solid var(--indigo); background: var(--indigo-light); border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 18px 0; }
.callout.case { border-left-color: var(--gold); background: rgba(233,199,126,.14); }
.callout.exercise { border-left-color: var(--green); background: rgba(22,163,74,.07); }
.callout-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.callout.case .callout-label { color: var(--gold-dark); }
.callout.exercise .callout-label { color: var(--green); }
.callout:not(.case):not(.exercise) .callout-label { color: var(--indigo-dark); }
.callout p { font-size: 14px; line-height: 1.7; margin: 0; color: var(--ink-soft); }

/* Mini-quiz de chapitre */
.miniquiz { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 18px; }
.miniquiz-q { font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.miniquiz-opts { display: grid; gap: 8px; }
.opt {
  text-align: left; width: 100%; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; transition: all .18s ease;
}
.opt:hover { border-color: rgba(21,22,28,.3); }
.opt.selected { border-color: var(--indigo); background: var(--indigo-light); font-weight: 600; }
.opt.correct { border-color: var(--green); background: rgba(22,163,74,.1); font-weight: 600; }
.opt.wrong { border-color: var(--red); background: rgba(220,38,38,.08); }
.miniquiz-feedback { margin-top: 10px; font-size: 13px; }
.miniquiz-feedback.ok { color: var(--green); }
.miniquiz-feedback.ko { color: var(--red); }

/* ---------- Examen ---------- */
.exam-timer {
  font-family: var(--font-mono); font-size: 18px; font-weight: 600;
  color: var(--indigo); background: var(--indigo-light); padding: 9px 18px; border-radius: 999px;
}
.exam-timer.warn { color: var(--red); background: rgba(220,38,38,.1); }
.exam-alert {
  background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.25); color: #B91C1C;
  border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 18px;
}
.exam-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; gap: 12px; }
.exam-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.exam-dot { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line); color: var(--slate); }
.exam-dot.answered { background: var(--indigo-light); border-color: var(--indigo); color: var(--indigo-dark); }
.exam-dot.current { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.no-select { user-select: none; -webkit-user-select: none; }

/* ---------- Résultat ---------- */
.result-icon { width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto; }
.result-icon.pass { background: rgba(22,163,74,.13); }
.result-icon.fail { background: rgba(220,38,38,.1); }
.score-big { font-family: var(--font-mono); font-size: 44px; font-weight: 600; color: var(--indigo); margin-top: 20px; }

/* ---------- Tableau de bord ---------- */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.dash-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.dash-stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--indigo); }
.dash-stat-label { font-size: 12px; color: var(--slate); margin-top: 4px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.badge-item { text-align: center; padding: 18px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.badge-item.locked { opacity: .35; filter: grayscale(1); }
.badge-emoji { font-size: 30px; }
.badge-name { font-size: 12px; font-weight: 600; margin-top: 8px; }
.badge-desc { font-size: 11px; color: var(--slate); margin-top: 3px; }

/* ---------- Tarifs ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px; }
.plan.featured {
  background: linear-gradient(160deg, var(--indigo-dark) 0%, var(--indigo) 55%, #4B48BC 100%);
  color: var(--paper); position: relative; box-shadow: var(--shadow);
}
.plan-ribbon {
  position: absolute; top: 0; right: 30px; background: var(--gold); color: var(--ink);
  font-size: 11px; font-weight: 700; padding: 8px 16px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.plan-name { font-family: var(--font-display); font-size: 21px; font-weight: 500; }
.plan-desc { font-size: 14px; margin-top: 8px; opacity: .75; }
.promo-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; margin-top: 14px; width: fit-content;
  background: rgba(192,138,46,.14); color: var(--gold-dark); }
.plan.featured .promo-tag { background: rgba(249,231,174,.2); color: var(--gold-pale); }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.price-old { font-family: var(--font-mono); font-size: 17px; text-decoration: line-through; opacity: .5; }
.price-new { font-family: var(--font-mono); font-size: 38px; font-weight: 600; }
.price-unit { font-size: 15px; opacity: .6; }
.plan-features { margin-top: 22px; flex: 1; display: grid; gap: 11px; font-size: 14px; }
.plan-features li { display: flex; gap: 9px; align-items: flex-start; }
.plan .btn { margin-top: 28px; }

/* ---------- Footer ---------- */
.footer { padding: 56px 0 44px; border-top: 1px solid var(--line); text-align: center; }
.footer-brand { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.footer p { font-size: 14px; color: var(--slate); margin-top: 8px; }
.footer-legal { font-size: 12px; color: var(--slate); margin-top: 26px; }

/* =========================================================================
   CERTIFICAT — mise en page en blocs simples, aucune hauteur figée
   ========================================================================= */



.ink-sig path { fill: none; stroke: #1C2B6B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }


@media (max-width: 700px) {
}

/* ---------- Page de vérification ---------- */
.verify-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.verify-card { width: 100%; max-width: 620px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.verify-banner { padding: 30px; text-align: center; color: #fff; }
.verify-banner.valid { background: linear-gradient(135deg, #15803D, #16A34A); }
.verify-banner.invalid { background: linear-gradient(135deg, #991B1B, #DC2626); }
.verify-banner h1 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-top: 12px; }
.verify-banner p { font-size: 14px; opacity: .9; margin-top: 6px; }
.verify-rows { padding: 28px; }
.verify-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.verify-row:last-child { border-bottom: none; }
.verify-row dt { color: var(--slate); flex-shrink: 0; }
.verify-row dd { font-weight: 600; text-align: right; }

/* ---------- Impression / PDF ---------- */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #fff; }
  body * { visibility: hidden; }
  #cert-print, #cert-print * { visibility: visible; }
  #cert-print {
    position: absolute; top: 0; left: 0; width: 100%;
    box-shadow: none; padding: 12px;
  }
  .no-print { display: none !important; }
}

/* ---------- Accessibilité / mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* =========================================================================
   CLAIRIUM ACADEMY — v2 : professionnalisation
   Ce bloc COMPLÈTE la feuille existante. Aucune règle antérieure n'est
   supprimée : les composants d'origine continuent de fonctionner.
   ========================================================================= */

/* ---------- Typographie de page ---------- */
.page-title {
  font-family: var(--font-display); font-size: 34px; font-weight: 500;
  line-height: 1.2; letter-spacing: -.01em; margin-top: 6px;
}
.lead { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin-top: 14px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
body.no-scroll { overflow: hidden; }

/* ---------- Certificat : éléments de sécurité (v2) ---------- */
/* ---------- Mise à l'échelle du certificat (dessiné en A4 fixe) ---------- */
.showcase-stage {
  position: relative; overflow: hidden; width: 100%;
  padding: 26px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(19,26,62,.06), rgba(192,138,46,.05));
  border: 1px solid var(--line);
}
.showcase-stage.no-frame { background: none; border: none; padding: 0; }
.showcase-scaler { transform-origin: top left; width: 1000px; }
.showcase-scaler .cert { width: 1000px; }
.showcase-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px;
}
.showcase { background: var(--paper); }

/* ---------- Aperçu plein écran ---------- */
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Section « Pourquoi notre certificat est crédible ? » ---------- */
.trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px;
}
@media (max-width: 940px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.trust-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow);
  border-color: rgba(61,58,168,.28);
}
.trust-icon {
  width: 46px; height: 46px; border-radius: 13px; color: var(--indigo);
  background: var(--indigo-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.trust-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.trust-card p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---------- Formations en cours de développement ---------- */
.course-card.is-soon { cursor: default; opacity: .96; background: rgba(21,22,28,.02); }
.course-card.is-soon:hover { transform: none; box-shadow: none; }
.course-card.is-soon .course-thumb { filter: grayscale(1); opacity: .55; }
.soon-flag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(21,22,28,.06); color: var(--slate); border: 1px solid var(--line);
}
.soon-note {
  margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--slate);
  border-left: 2px solid var(--gold); padding-left: 10px; line-height: 1.5;
}
.soon-panel {
  margin-top: 30px; padding: 26px; border-radius: var(--radius);
  background: var(--indigo-light); border: 1px solid rgba(61,58,168,.18);
  text-align: left;
}
.soon-panel strong { display: block; font-size: 15px; color: var(--indigo-dark); margin-bottom: 8px; }
.soon-panel p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Fiche de formation ---------- */
.course-hero { display: flex; gap: 18px; align-items: center; margin: 22px 0 4px; }
.course-hero-icon {
  width: 68px; height: 68px; flex: 0 0 68px; border-radius: 19px; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--indigo-mid), rgba(233,199,126,.45));
}
.course-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 12.5px; color: var(--slate); font-weight: 600;
}
.course-facts span:not(.level-tag)::before { content: "· "; color: var(--line); }
.course-facts .level-tag::before { content: none; }

.prog-module + .prog-module { margin-top: 18px; }
.prog-module-title {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 8px;
}
.prog-list li {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px dashed var(--line); font-size: 14px;
}
.prog-list li:last-child { border-bottom: none; }
.prog-list li.done { color: var(--slate); }
.prog-list li.done .prog-num { background: var(--green); color: #fff; border-color: var(--green); }
.prog-num {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); color: var(--slate); background: #fff;
}
.prog-list a:hover { color: var(--indigo); }

/* ---------- Examen : difficulté et études de cas ---------- */
.diff-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-left: 8px;
}
.diff-badge.d1 { background: rgba(22,163,74,.12);  color: #15803D; }
.diff-badge.d2 { background: rgba(61,58,168,.12);  color: var(--indigo); }
.diff-badge.d3 { background: rgba(192,138,46,.16); color: var(--gold-dark); }
.exam-context {
  background: var(--indigo-light); border-left: 3px solid var(--indigo);
  border-radius: 0 10px 10px 0; padding: 14px 16px; margin-top: 14px;
}
.exam-context p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.bd-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bd-row:last-child { margin-bottom: 0; }
.bd-row .diff-badge { margin-left: 0; min-width: 104px; text-align: center; }

/* ---------- Page « Nos standards de certification » ---------- */
.std-h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  margin-top: 42px; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.std-list { margin: 12px 0; }
.std-list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}
.std-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.std-list li strong { color: var(--ink); }

.std-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 680px) { .std-grades { grid-template-columns: repeat(2, 1fr); } }
.std-grades > div {
  background: var(--cream); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; text-align: center;
}
.std-grades span { display: block; font-size: 12px; color: var(--slate); }
.std-grades b { display: block; font-size: 15px; color: var(--navy); margin-top: 4px; }

.std-table-wrap { overflow-x: auto; margin-top: 16px; border-radius: 12px; border: 1px solid var(--line); }
.std-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--cream); }
.std-table th {
  text-align: left; padding: 12px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
  background: rgba(21,22,28,.03); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.std-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.std-table tr:last-child td { border-bottom: none; }

.std-honesty {
  margin-top: 42px; padding: 26px; border-radius: var(--radius);
  background: rgba(192,138,46,.07); border: 1px solid rgba(192,138,46,.28);
}
.std-honesty h3 { font-size: 16px; font-weight: 700; color: var(--gold-dark); margin-bottom: 10px; }
.std-honesty p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 10px; }
.std-honesty p:last-child { margin-bottom: 0; }

/* ---------- Impression : on annule la mise à l'échelle ---------- */
@media print {
  .showcase-stage { overflow: visible !important; padding: 0 !important;
    background: none !important; border: none !important; }
  .showcase-scaler { transform: none !important; width: auto !important; height: auto !important; }
  .showcase-scaler .cert { width: 100% !important; }
  .cert-overlay { display: none !important; }
}

/* =========================================================================
   CLAIRIUM ACADEMY — v3 : compte, paiement réel, registre serveur
   ========================================================================= */

/* ---------- Démarrage : on ne peint rien avant de savoir qui est connecté ---------- */
.boot { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.boot-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--indigo);
  animation: bootspin .7s linear infinite;
}
@keyframes bootspin { to { transform: rotate(360deg); } }

/* ---------- Étudiant connecté (en-tête) ---------- */
.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px 5px 5px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--line);
}
.user-avatar {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo); color: #fff;
  font-size: 13px; font-weight: 700;
}
.user-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-logout {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate); padding: 5px 11px; border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.user-logout:hover { background: rgba(21,22,28,.06); color: var(--ink); }
@media (max-width: 720px) { .user-name { display: none; } }

/* ---------- Connexion ---------- */
.login-card {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px;
  box-shadow: var(--shadow);
}
.login-note {
  margin-top: 26px; padding: 18px; border-radius: 12px;
  background: var(--indigo-light); border: 1px solid rgba(61,58,168,.16);
}
.login-note strong { display: block; font-size: 13px; color: var(--indigo-dark); margin-bottom: 5px; }
.login-note p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.login-sent { text-align: center; padding: 14px 0; animation: fadeUp .35s ease-out; }
.login-sent-icon { font-size: 42px; margin-bottom: 12px; }
.login-sent h2 { font-family: var(--font-display); font-size: 21px; font-weight: 500; margin-bottom: 10px; }
.login-sent p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 8px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Champ + bouton sur une même ligne */
.name-row { display: flex; gap: 10px; align-items: stretch; }
.name-row .field { flex: 1; }
.name-row .btn { white-space: nowrap; }
@media (max-width: 560px) { .name-row { flex-direction: column; } }

/* ---------- Invitation à se connecter avant l'examen ---------- */
.auth-gate {
  padding: 26px; border-radius: var(--radius); text-align: center;
  background: var(--indigo-light); border: 1px solid rgba(61,58,168,.2);
}
.auth-gate strong { display: block; font-size: 16px; color: var(--indigo-dark); margin-bottom: 8px; }
.auth-gate p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 18px; }

/* ---------- Paywall du certificat ---------- */
.paywall {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 38px 34px;
  box-shadow: var(--shadow); text-align: center;
  position: relative; overflow: hidden;
}
.paywall::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--indigo), var(--gold), var(--indigo));
}
.paywall-badge {
  display: inline-block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(22,163,74,.12); color: #15803D;
}
.paywall .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
.paywall-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 30px; text-align: left;
}
@media (max-width: 640px) { .paywall-options { grid-template-columns: 1fr; } }
.paywall-option {
  position: relative; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: border-color .2s ease, transform .2s ease;
}
.paywall-option:hover { transform: translateY(-2px); border-color: rgba(61,58,168,.3); }
.paywall-option.featured { border-color: var(--gold); background: rgba(233,199,126,.08); }
.paywall-name { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.paywall-price { font-family: var(--font-display); margin-bottom: 8px; }
.paywall-price s { font-size: 16px; color: var(--slate); margin-right: 6px; }
.paywall-price b { font-size: 28px; color: var(--navy); font-weight: 700; }
.paywall-option p { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.55; }

/* ---------- Vérification : état neutre (aucun numéro fourni) ---------- */
.verify-banner.neutral {
  background: linear-gradient(150deg, var(--navy), var(--indigo-dark));
  color: #fff;
}
.verify-banner.neutral h1 { color: #fff; }
.verify-banner.neutral p { color: rgba(255,255,255,.82); }

/* =========================================================================
   LE DIPLÔME — v3
   Boîte FIXE de 1000 × 707 px. 1000 / 707 = 1,414 = A4 paysage exact.
   Tout est positionné en absolu : le document ne peut plus déborder.
   ========================================================================= */

:root {
  --c-paper:   #FCFBF7;
  --c-ink:     #101B2B;
  --c-inksoft: #3A4657;
  --c-petrol:  #123449;
  --c-petrol2: #1C5474;
  --c-gold:    #B08D3E;
  --c-goldl:   #D9C083;
  --c-goldd:   #7A5F22;
  --c-burg:    #7B2230;
  --c-hair:    #C9C2B0;
}

.cert {
  position: relative;
  width: 1000px;
  height: 707px;               /* ← LA LIGNE QUI GARANTIT UNE SEULE PAGE A4 */
  overflow: hidden;
  background: var(--c-paper);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(176,141,62,.06), transparent 58%),
    radial-gradient(ellipse at 85% 90%, rgba(18,52,73,.05), transparent 58%);
  box-shadow: 0 22px 60px rgba(16,27,43,.20), 0 0 0 1px rgba(16,27,43,.07);
  color: var(--c-ink);
  font-family: 'Crimson Text', 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fonds et cadres ---------- */
.cert-guilloche { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .13; z-index: 1; }
.cert-frame-gold { position: absolute; inset: 20px; border: 2px solid var(--c-gold); z-index: 2; }
.cert-frame-ink  { position: absolute; inset: 28px; border: 1px solid var(--c-ink); opacity: .55; z-index: 2; }
.cert-corner { position: absolute; z-index: 3; }
.cert-corner.tl { top: 20px; left: 20px; }
.cert-corner.tr { top: 20px; right: 20px; transform: scaleX(-1); }
.cert-corner.bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
.cert-corner.br { bottom: 20px; right: 20px; transform: scale(-1); }

.cert-microtext {
  position: absolute; left: 34px; right: 34px; bottom: 9px; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 2.4px; letter-spacing: .35px;
  color: rgba(16,27,43,.42); white-space: nowrap; overflow: hidden;
  user-select: none; pointer-events: none;
}

.cert-watermark {
  position: absolute; inset: 0; z-index: 6; display: flex;
  align-items: center; justify-content: center; pointer-events: none; user-select: none;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: 128px; letter-spacing: .2em;
  color: rgba(16,27,43,.055); transform: rotate(-17deg);
}

/* Tout le contenu se place au-dessus des fonds */
.cert > div:not(.cert-guilloche):not(.cert-frame-gold):not(.cert-frame-ink) { z-index: 4; }

/* ---------- En-tête ---------- */
.cert-kicker {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: 15px; letter-spacing: .42em; text-indent: .42em;
  color: var(--c-petrol);
}
.cert-hrule {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 132px; height: 1px; background: var(--c-gold); z-index: 4;
}
.cert-title {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: 52px; line-height: 1; letter-spacing: .22em; text-indent: .22em;
  color: var(--c-ink);
}
.cert-subtitle {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 17px; font-style: italic; letter-spacing: .06em;
  color: var(--c-goldd);
}
.cert-fleuron {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 12px;
}
.cert-fleuron .fl-line { display: block; width: 118px; height: 1px; background: var(--c-hair); }
.cert-intro {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 16px; font-style: italic; color: var(--c-inksoft);
}

/* ---------- Bandeau du nom ---------- */
.cert-band {
  position: absolute; left: 28px; right: 28px; z-index: 4;
  background: linear-gradient(102deg, var(--c-petrol) 0%, var(--c-petrol2) 52%, var(--c-petrol) 100%);
}
.cert-band-rule { position: absolute; left: 0; right: 0; height: 1px; background: rgba(217,192,131,.55); }
.cert-band-rule.top { top: 5px; }
.cert-band-rule.bottom { bottom: 5px; }

.cert-name {
  position: absolute; left: 28px; right: 28px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Great Vibes', cursive; font-weight: 400;
  color: #FFFDF6; line-height: 1;
  padding: 0 34px; text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
  white-space: nowrap; overflow: hidden;
}

/* ---------- Corps ---------- */
.cert-statement {
  position: absolute; left: 120px; right: 120px; text-align: center;
  font-size: 16.5px; line-height: 1.65; color: var(--c-inksoft);
}
.cert-course {
  position: absolute; left: 80px; right: 80px; text-align: center;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: 25px; letter-spacing: .05em;
  color: var(--c-burg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cert-result {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: 'Lato', 'Inter', sans-serif; font-size: 13.5px;
  letter-spacing: .04em; color: var(--c-inksoft);
}
.cert-result .dot { color: var(--c-gold); margin: 0 11px; }
.cert-result strong { color: var(--c-ink); font-weight: 700; }

.cert-skills {
  position: absolute; left: 70px; right: 70px; text-align: center;
  font-family: 'Lato', 'Inter', sans-serif; font-size: 11px;
  letter-spacing: .03em; color: var(--c-inksoft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cert-skills .sk-label {
  display: inline-block; margin-right: 12px;
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-goldd);
}

/* ---------- Bas de page ---------- */
.cert-refs {
  position: absolute; width: 240px;
  display: grid; grid-template-columns: auto 1fr; gap: 1px 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 8.4px; line-height: 1.85;
  color: rgba(16,27,43,.52);
}
.cert-refs span { white-space: nowrap; }
.cert-refs b { color: var(--c-ink); font-weight: 600; }
.cert-refs b.uuid { font-size: 7px; letter-spacing: -.2px; }

.cert-qr { position: absolute; width: 96px; text-align: center; }
.cert-qr img { display: block; border: 1px solid rgba(16,27,43,.14); padding: 3px; background: #fff; }
.cert-qr span {
  display: block; margin-top: 6px; font-family: 'Lato', sans-serif;
  font-size: 7.5px; letter-spacing: .05em; color: rgba(16,27,43,.5);
}

.cert-seal { position: absolute; width: 104px; }

.cert-sigblock { position: absolute; width: 176px; }
.cert-sig-wrap { position: absolute; left: 0; width: 176px; height: 52px; }
.cert-sig { display: block; }
.cert-sigline {
  position: absolute; left: 0; width: 176px; height: 1px;
  background: var(--c-ink); opacity: .45;
}
.cert-siglabel {
  position: absolute; left: 0; width: 176px; text-align: center;
  font-family: 'Lato', 'Inter', sans-serif;
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(16,27,43,.62);
}

.cert-hash {
  position: absolute; left: 62px; right: 62px; text-align: center;
}
.cert-hash .hash-val {
  font-family: 'JetBrains Mono', monospace; font-size: 6.6px;
  letter-spacing: .3px; color: rgba(16,27,43,.45); word-break: break-all;
}
.cert-hash .hash-note {
  margin-top: 3px; font-family: 'Lato', sans-serif; font-size: 7.5px;
  font-style: italic; color: rgba(16,27,43,.42);
}

/* ---------- Mise à l'échelle (le diplôme est dessiné à taille fixe) ---------- */
.showcase-scaler { transform-origin: top left; width: 1000px; }
.showcase-scaler .cert { width: 1000px; height: 707px; }

/* =========================================================================
   PROGRESSION — correction du défaut signalé par un vrai utilisateur

   « 83 % » ne dit ni COMBIEN de chapitres manquent, ni LESQUELS.
   On affiche donc un compte explicite, on marque les chapitres restants,
   et on donne un chemin direct vers le premier chapitre non terminé.
   ========================================================================= */

.chapter-count {
  font-size: 13px; font-weight: 600; color: var(--slate); white-space: nowrap;
}
.chapter-count b { font-size: 17px; color: var(--indigo); }
.chapter-count.done, .chapter-count.done b { color: var(--green); }

.todo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  background: rgba(192,138,46,.09); border: 1px solid rgba(192,138,46,.3);
}
.todo-banner strong { display: block; font-size: 14px; color: var(--gold-dark); }
.todo-banner span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.todo-banner .btn { padding: 9px 18px; font-size: 13px; white-space: nowrap; }
.todo-banner.ok {
  background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.28);
  color: #15803D; font-size: 14px; font-weight: 600;
}

/* Chapitres restants : visibles au premier coup d'œil dans le programme */
.prog-list li.todo .prog-num {
  border-color: var(--gold); color: var(--gold-dark);
  background: rgba(192,138,46,.08); font-weight: 700;
}
.prog-list li.done .prog-num { background: var(--green); border-color: var(--green); color: #fff; }
.prog-flag {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold-dark);
  padding: 3px 9px; border-radius: 999px; background: rgba(192,138,46,.12);
  white-space: nowrap;
}

/* Le chapitre visé clignote brièvement : on ne peut plus le rater */
.chapter.flash { animation: flashIn 1.6s ease-out; }
@keyframes flashIn {
  0%, 100% { box-shadow: none; }
  15%, 55% { box-shadow: 0 0 0 3px rgba(192,138,46,.45); }
}

/* =========================================================================
   PAGE D'ACCUEIL — v3.3
   • La vignette du hero est le VRAI diplôme, réduit (plus de maquette).
   • Le trilinguisme devient un argument visible, démontré en direct.
   • Une section explique POURQUOI un diplôme est nécessaire.
   ========================================================================= */

/* ---------- Le vrai diplôme dans le hero ---------- */
.hero-diploma { position: relative; width: 100%; }

/* ⚠️ LA LARGEUR EST INDISPENSABLE.
   Sans elle, le diplôme (1000 px de large) fait gonfler sa boîte et
   s'affiche en taille réelle sur la page d'accueil. */
.hero-diploma-stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16,27,43,.22), 0 0 0 1px rgba(16,27,43,.08);
  /* Aucune rotation, aucune animation : c'est un document officiel,
     il doit rester parfaitement immobile. */
}
.hero-diploma-scaler {
  transform-origin: top left;
  width: 1000px;              /* taille de dessin — la mise à l'échelle est faite en JS */
  pointer-events: none;       /* le diplôme n'est pas cliquable : c'est un aperçu */
}
.hero-diploma-scaler .cert { box-shadow: none; }

.hero-diploma-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 10;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(16,27,43,.86); color: #fff; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600;
  transition: background .2s ease;   /* aucune apparition/disparition : le bouton est toujours là */
}
.hero-diploma-zoom:hover { background: var(--indigo); }

.hero-diploma-langs {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; flex-wrap: wrap;
}
.hdl-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); margin-right: 4px;
}
.hdl-btn {
  padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--cream); color: var(--slate);
  transition: all .18s ease;
}
.hdl-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.hdl-btn.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }

.badge-lang {
  margin-left: 8px;
  background: rgba(192,138,46,.12) !important;
  border-color: rgba(192,138,46,.35) !important;
  color: var(--gold-dark) !important;
}
.badge-lang strong { color: var(--ink); }
@media (max-width: 900px) { .badge-lang { margin-left: 0; margin-top: 8px; } }

/* ---------- Démonstration vivante des trois langues ---------- */
.lang-demo {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  padding: 24px 26px; margin-bottom: 22px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(61,58,168,.06), rgba(192,138,46,.06));
  border: 1px solid var(--line);
}
@media (max-width: 860px) { .lang-demo { grid-template-columns: 1fr; } }
.lang-demo-text strong { display: block; font-size: 15px; margin-bottom: 6px; }
.lang-demo-text p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.lang-demo-btns { display: flex; gap: 10px; }
@media (max-width: 480px) { .lang-demo-btns { width: 100%; } .lang-card { flex: 1; } }

.lang-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 18px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--cream);
  transition: all .2s ease;
}
.lang-card:hover { border-color: var(--indigo); transform: translateY(-2px); }
.lang-card.active {
  border-color: var(--indigo); background: var(--indigo-light);
  box-shadow: 0 4px 14px rgba(61,58,168,.14);
}
.lc-flag { font-size: 22px; line-height: 1; }
.lc-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lc-sub {
  font-family: var(--font-display); font-size: 9px; letter-spacing: .12em;
  color: var(--slate);
}
.lang-card.active .lc-sub { color: var(--indigo); }

/* ---------- Pourquoi ce diplôme ? ---------- */
.purpose { background: var(--paper); }
.purpose-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px;
}
@media (max-width: 980px) { .purpose-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .purpose-grid { grid-template-columns: 1fr; } }

.purpose-card {
  padding: 26px 22px; border-radius: var(--radius);
  background: var(--cream); border: 1px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.purpose-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: rgba(61,58,168,.3);
}
.purpose-icon {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: linear-gradient(135deg, var(--indigo-light), rgba(233,199,126,.35));
}
.purpose-card h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.purpose-card p { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.purpose-card strong { color: var(--ink); }

/* Le chemin en trois temps : apprendre → prouver → montrer */
.purpose-path {
  display: flex; align-items: stretch; gap: 8px; margin-top: 34px;
  padding: 22px; border-radius: var(--radius);
  background: var(--navy); color: #fff;
}
@media (max-width: 860px) { .purpose-path { flex-direction: column; } .pp-arrow { display: none !important; } }
.pp-step { flex: 1; display: flex; align-items: flex-start; gap: 12px; padding: 6px 10px; }
.pp-num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--navy);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.pp-step strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.pp-step span { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.pp-arrow {
  display: flex; align-items: center; color: var(--gold);
  font-size: 20px; opacity: .55;
}

/* =========================================================================
   BARRE D'OUTILS DU DIPLÔME
   Ces règles avaient été supprimées par erreur lors du nettoyage des
   anciennes règles ".cert*". Sans elles, les boutons de langue et la barre
   d'action n'ont plus aucun style.
   ========================================================================= */

.cert-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 22px;
}
.cert-lang {
  display: flex; gap: 6px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
}
.cert-lang button {
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--slate); transition: all .18s ease;
}
.cert-lang button:hover { background: rgba(21,22,28,.05); color: var(--ink); }
.cert-lang button.active { background: var(--indigo); color: #fff; }

/* =========================================================================
   RÈGLES RESTAURÉES
   Supprimées par erreur lors du nettoyage des anciennes règles « .cert* ».
   Détectées par test-css.mjs (contrôle des classes orphelines).
   ========================================================================= */

/* ---------- Puces de compétences (diplôme + fiche de formation) ---------- */
.cert-skills-label {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dark); margin-bottom: 8px;
}
.cert-skills-list { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.cert-skill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-family: 'Lato', 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  background: rgba(18,52,73,.07); border: 1px solid rgba(18,52,73,.16);
  color: var(--c-petrol, #123449);
}

/* ---------- Empreinte SHA-256 (page de vérification) ---------- */
.cert-hash-label {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}
.cert-hash-value {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  word-break: break-all; color: var(--ink); margin-top: 4px;
}

/* ---------- Aperçu plein écran du diplôme ---------- */
.cert-overlay-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; color: rgba(255,255,255,.85);
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cert-overlay-close {
  color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  transition: background .18s ease;
}
.cert-overlay-close:hover { background: rgba(255,255,255,.15); }
.cert-overlay-body {
  flex: 1; overflow: auto; padding: 30px;
  display: flex; justify-content: center; align-items: flex-start;
}

/* =========================================================================
   FENÊTRE PLEIN ÉCRAN DU DIPLÔME

   ⚠️ Cette règle avait été supprimée par erreur. Sans elle, la « fenêtre »
   n'était qu'un bloc ordinaire ajouté tout en bas de la page — invisible —
   pendant que le défilement était bloqué. L'écran semblait donc GELÉ.

   C'est exactement le bug signalé : « le bouton bug, l'écran devient statique ».
   ========================================================================= */

.cert-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;                       /* au-dessus de l'en-tête (z-index 50) */
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 30, .94);
  backdrop-filter: blur(6px);
  animation: overlayFade .2s ease-out;
}
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

/* La scène qui accueille le diplôme mis à l'échelle */
.cert-overlay-stage {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}