@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');
/* ============================================================================
   EMB_LAB · embl-core-diag.css · Library CSS partagée DG01/DG02/DG03
   ----------------------------------------------------------------------------
   Production V1 · Mai 2026
   Auteur conv Builder · cadré OPS · validé Jeff (6 réponses pré-prod)
   ----------------------------------------------------------------------------
   Choix par défaut documentés (Brandbook V8 non re-uploadé · reconstitution
   à partir tokens canon ET042 V2) :
   - DA V8 stricte (cohérent ET042 V2 + DG01 V1)
   - Fraunces ZÉRO (interdit dans dashboards + diagnostics · brandbook R restrict)
   - DM Sans titres + corps · DM Mono labels UPPERCASE
   - Mode unique (décision Jeff Q1·c · pas E2 multi-tenant pour outils publics)
   - Composants wizard séquentiel + IA conversation + rendu rapport JSON

   Drift R6 brief OPS ignoré ici (E2 multi-tenant rejeté pour outils publics).

   White-label-ready · tokens overridables via :root surcharge
   ============================================================================ */

/* ─── TOKENS DA V8 (copie ET042 V2) ───────────────────────────────────────── */
:root {
  --deep:      #013531;
  --act:       #1B5E52;
  --ivory:     #F4F0E6;
  --black:     #111111;
  --go:        #01AE9B;
  --fric:      #E8A23A;
  --stop:      #C8360A;
  --go-text:   #004D47;
  --stop-text: #7A1A00;
  --fric-text: #7A5200;
  --g1:        #F8F6F1;
  --g2:        #EAE6DC;
  --g3:        #C8C4BB;
  --gt:        #6B6760;
  --muted:     #6B7A76;
  --font:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:      'DM Mono', 'Courier New', monospace;
  --display:   'Fraunces', Georgia, serif;
  --r:         4px;
}

/* ─── BASE ────────────────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:var(--font); background:var(--ivory); color:var(--black);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

/* ─── NAV ─────────────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(1,53,49,0.97); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(1,174,155,0.2);
  display:flex; align-items:center; height:48px; padding:0 40px; gap:0;
  overflow-x:auto; scrollbar-width:none;
}
.nav::-webkit-scrollbar { display:none }
.nav-brand {
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--go);
  text-decoration:none; white-space:nowrap; margin-right:32px; flex-shrink:0;
}
.nav-id {
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(244,240,230,.3);
  white-space:nowrap; flex-shrink:0;
}
.nav-spacer { flex:1 }
.nav-test {
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fric);
  padding:4px 10px; background:rgba(232,162,58,.10);
  border:1px solid rgba(232,162,58,.3); border-radius:var(--r);
  white-space:nowrap;
}

/* ─── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  background:var(--deep); color:var(--ivory);
  padding:72px 80px 56px; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--go) 30%, var(--go) 70%, transparent);
  opacity:.4;
}
.hero-inner { max-width:920px; position:relative; z-index:2 }
.hero-bar {
  display:inline-block; padding:6px 14px; background:rgba(1,174,155,.15);
  border:1px solid rgba(1,174,155,.3); border-radius:var(--r);
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--go); margin-bottom:32px;
}
.hero-h {
  font-family:var(--display); font-weight:300; font-size:72px;
  line-height:0.98; letter-spacing:-0.02em; color:var(--ivory);
  margin-bottom:24px;
}
.hero-h em { font-style:italic; color:var(--go); font-weight:300 }
.hero-rule { height:1px; width:80px; background:var(--go); margin:0 0 24px }
.hero-tag {
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:20px; line-height:1.5; color:rgba(244,240,230,0.7);
  max-width:680px;
}

/* ─── DOCTRINE BAR ────────────────────────────────────────────────────────── */
.doctrine {
  background:var(--act); color:var(--ivory);
  padding:18px 80px;
  display:flex; align-items:center; gap:32px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.10em;
}
.doctrine strong {
  color:var(--go); text-transform:uppercase; font-weight:500;
  letter-spacing:.18em; font-size:10px;
}
.doctrine span { color:rgba(244,240,230,.75); font-weight:300 }

/* ─── BANNIÈRE TEST GRATUIT V1 (Q3 décision Jeff) ─────────────────────────── */
.test-banner {
  background:rgba(232,162,58,.10); border-bottom:1px solid rgba(232,162,58,.3);
  padding:14px 80px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.test-banner-tag {
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fric-text);
  padding:4px 10px; background:rgba(232,162,58,.18); border-radius:var(--r);
}
.test-banner-text {
  font-size:13px; color:var(--gt);
}
.test-banner-text a { color:var(--act); text-decoration:underline }

/* ─── MAIN ────────────────────────────────────────────────────────────────── */
.main { padding:64px 80px; max-width:920px; margin:0 auto }

/* ─── ACCESS CODE GATE (Q4 décision Jeff) ─────────────────────────────────── */
.gate {
  background:white; border:1px solid var(--g2); border-radius:var(--r);
  padding:48px; margin-bottom:32px;
}
.gate-h {
  font-family:var(--display); font-weight:300; font-size:26px;
  line-height:1.3; color:var(--deep); margin-bottom:14px;
}
.gate-sub {
  font-size:14px; color:var(--gt); margin-bottom:24px;
}
.gate-input {
  width:100%; padding:14px 16px;
  border:1px solid var(--g3); border-radius:var(--r);
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  background:var(--g1); color:var(--black);
  text-transform:uppercase;
}
.gate-input:focus { outline:none; border-color:var(--act); background:white }

/* ─── INFO BAR ────────────────────────────────────────────────────────────── */
.info-bar {
  background:var(--g1); border-left:3px solid var(--act);
  padding:20px 24px; margin-bottom:48px; border-radius:0 var(--r) var(--r) 0;
}
.info-bar-h {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--act); margin-bottom:12px;
}
.info-bar ul { list-style:none; margin:0 }
.info-bar li {
  font-size:13px; color:var(--gt); padding:4px 0; position:relative; padding-left:16px;
}
.info-bar li::before {
  content:'·'; position:absolute; left:4px; color:var(--act); font-weight:bold;
}

/* ─── PROGRESSION ─────────────────────────────────────────────────────────── */
.progress {
  margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--g2);
}
.progress-h {
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;
}
.progress-lbl {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.progress-step {
  font-family:var(--display); font-style:italic; font-size:18px; color:var(--act);
}
.progress-bar {
  height:3px; background:var(--g2); border-radius:2px; overflow:hidden;
}
.progress-fill {
  height:100%; background:var(--go); transition:width .35s ease;
}

/* ─── QUESTION CARD (texte libre · IA conversation) ───────────────────────── */
.question {
  background:white; border:1px solid var(--g2); border-radius:var(--r);
  padding:48px; margin-bottom:32px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.q-num {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--act); margin-bottom:16px;
  display:inline-block;
}
.q-phase {
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-left:14px;
}
.q-text {
  font-family:var(--display); font-weight:300; font-size:30px;
  line-height:1.25; letter-spacing:-0.01em; color:var(--deep);
  margin-bottom:12px;
}
.q-text em { font-style:italic; color:var(--act) }
.q-help {
  font-size:14px; color:var(--gt); margin-bottom:32px; max-width:620px;
}
.q-textarea {
  width:100%; min-height:140px;
  padding:18px 20px;
  border:1px solid var(--g3); border-radius:var(--r);
  font-family:var(--font); font-size:15px; line-height:1.6;
  background:var(--g1); color:var(--black);
  resize:vertical;
}
.q-textarea:focus {
  outline:none; border-color:var(--act); background:white;
}
.q-counter {
  font-family:var(--mono); font-size:11px; letter-spacing:.10em;
  color:var(--muted); margin-top:8px; text-align:right;
}

/* ─── LOADING / GENERATING ────────────────────────────────────────────────── */
.generating {
  background:var(--g1); border:1px dashed var(--g3); border-radius:var(--r);
  padding:48px; margin-bottom:32px; text-align:center;
}
.generating-h {
  font-family:var(--display); font-style:italic; font-size:22px;
  color:var(--act); margin-bottom:14px;
}
.generating-sub {
  font-size:13px; color:var(--gt);
}
.generating-dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--act); margin:0 3px;
  animation:pulse 1.4s ease-in-out infinite;
}
.generating-dot:nth-child(2) { animation-delay:.2s }
.generating-dot:nth-child(3) { animation-delay:.4s }
@keyframes pulse {
  0%, 100% { opacity:.3 } 50% { opacity:1 }
}

/* ─── RAPPORT (rendu JSON output) ─────────────────────────────────────────── */
.report {
  background:white; border:1px solid var(--g2); border-radius:var(--r);
  padding:56px 48px; margin-bottom:32px;
}
.report-tag {
  display:inline-block; padding:6px 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; border-radius:var(--r); margin-bottom:24px;
}
.report-tag.go     { background:rgba(1,174,155,.12); color:var(--go-text);   border:1px solid rgba(1,174,155,.3) }
.report-tag.fric   { background:rgba(232,162,58,.12); color:var(--fric-text); border:1px solid rgba(232,162,58,.3) }
.report-tag.stop   { background:rgba(200,54,10,.10); color:var(--stop-text); border:1px solid rgba(200,54,10,.3) }

.report-h {
  font-family:var(--display); font-weight:300; font-size:38px;
  line-height:1.2; color:var(--deep); margin-bottom:20px;
}
.report-h em { font-style:italic; color:var(--act) }

.report-message {
  font-size:16px; color:var(--gt); line-height:1.7;
  margin-bottom:32px; max-width:660px;
}

/* Synthèse Claude (texte conversationnel pré-JSON) */
.report-synthesis {
  background:var(--g1); border-left:3px solid var(--act);
  padding:24px; margin-bottom:32px; border-radius:0 var(--r) var(--r) 0;
}
.report-synthesis-h {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--act); margin-bottom:12px;
}
.report-synthesis p {
  font-size:15px; color:var(--black); line-height:1.7; margin-bottom:10px;
}
.report-synthesis p:last-child { margin-bottom:0 }

/* Scores par phase · grille */
.score-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px; margin-bottom:32px;
}
.score-cell {
  background:var(--g1); border:1px solid var(--g2); border-radius:var(--r);
  padding:18px;
}
.score-phase {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.score-val {
  font-family:var(--display); font-size:32px; font-weight:300;
  color:var(--deep); margin-bottom:4px; line-height:1;
}
.score-max { font-size:14px; color:var(--muted); margin-left:4px }
.score-niveau {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--r);
  display:inline-block;
}
.score-niveau.solide      { background:rgba(1,174,155,.15); color:var(--go-text) }
.score-niveau.partiel     { background:rgba(232,162,58,.15); color:var(--fric-text) }
.score-niveau.insuffisant { background:rgba(200,54,10,.12); color:var(--stop-text) }
.score-niveau.non_evalue  { background:var(--g2); color:var(--muted) }

/* Phases critiques + dettes */
.report-block {
  margin-bottom:24px; padding:20px 24px;
  background:var(--g1); border-radius:var(--r);
}
.report-block-h {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--act); margin-bottom:14px;
}
.report-block-list {
  list-style:none; padding:0;
}
.report-block-list li {
  font-size:14px; color:var(--black); line-height:1.6;
  padding:6px 0 6px 18px; position:relative;
  border-bottom:1px dashed var(--g2);
}
.report-block-list li:last-child { border-bottom:none }
.report-block-list li::before {
  content:'·'; position:absolute; left:4px; color:var(--act); font-weight:bold;
}
.report-block-list .gravite {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; padding:2px 6px; border-radius:var(--r);
  margin-right:8px; display:inline-block;
}
.report-block-list .gravite.critique { background:rgba(200,54,10,.12); color:var(--stop-text) }
.report-block-list .gravite.haute    { background:rgba(232,162,58,.15); color:var(--fric-text) }
.report-block-list .gravite.moyenne  { background:rgba(232,162,58,.08); color:var(--fric-text) }
.report-block-list .gravite.faible   { background:var(--g2); color:var(--muted) }

/* Profil + Verdict tags */
.report-meta {
  display:flex; gap:20px; flex-wrap:wrap;
  padding:20px 24px; background:var(--g1); border-radius:var(--r);
  margin-bottom:32px;
}
.report-meta-item {
  flex:1; min-width:160px;
}
.report-meta-lbl {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.report-meta-val {
  font-family:var(--display); font-style:italic; font-size:18px;
  color:var(--deep);
}

/* CTA conditionnel */
.cta-block {
  border-top:1px solid var(--g2); padding-top:32px; margin-top:8px;
  display:flex; flex-direction:column; gap:14px;
}
.cta-h {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.cta-help {
  font-size:13px; color:var(--gt); line-height:1.55;
}

/* ─── ACTIONS ─────────────────────────────────────────────────────────────── */
.actions {
  display:flex; gap:14px; justify-content:space-between;
  padding-top:24px; flex-wrap:wrap;
}
.btn {
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:14px 28px;
  border:1px solid var(--g3); background:var(--g1); color:var(--gt);
  border-radius:var(--r); cursor:pointer; font-weight:500;
  transition:all .15s; text-decoration:none; display:inline-block; text-align:center;
}
.btn:hover:not(:disabled) {
  border-color:var(--act); color:var(--act); background:white;
}
.btn:disabled { opacity:.4; cursor:not-allowed }
.btn-primary {
  background:var(--act); color:var(--ivory); border-color:var(--act);
}
.btn-primary:hover:not(:disabled) {
  background:var(--deep); border-color:var(--deep); color:var(--ivory);
}
.btn-go {
  background:var(--go); color:var(--deep); border-color:var(--go); font-weight:500;
}
.btn-go:hover:not(:disabled) { background:#019585; border-color:#019585 }

/* ─── ERROR ───────────────────────────────────────────────────────────────── */
.field-error {
  display:none; padding:10px 14px; margin-top:10px;
  background:rgba(200,54,10,.08); border-left:3px solid var(--stop);
  font-size:13px; color:var(--stop-text); border-radius:0 var(--r) var(--r) 0;
}
.field-error.show { display:block }

.api-error {
  background:rgba(200,54,10,.08); border:1px solid rgba(200,54,10,.3);
  border-radius:var(--r); padding:20px 24px; margin-bottom:24px;
  color:var(--stop-text); font-size:14px;
}
.api-error strong { color:var(--stop) }

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
footer {
  background:var(--deep); color:var(--ivory);
  padding:32px 80px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(1,174,155,.2); flex-wrap:wrap; gap:16px;
  margin-top:64px;
}
.f-id {
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--go);
}
.f-meta {
  font-family:var(--mono); font-size:9px; color:rgba(244,240,230,.4);
  letter-spacing:.10em;
}
.f-doctrine {
  font-family:var(--display); font-size:13px; font-style:italic;
  color:rgba(244,240,230,.55);
}
.f-disclaimer {
  width:100%; padding-top:16px; margin-top:8px;
  border-top:1px solid rgba(244,240,230,.08);
  font-family:var(--font); font-size:11px; line-height:1.6;
  color:rgba(244,240,230,.45);
}

/* ─── TOAST ───────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; right:24px;
  background:var(--deep); color:var(--ivory);
  padding:14px 20px; border-radius:var(--r);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; border-left:3px solid var(--go);
  opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s; pointer-events:none;
  z-index:200;
}
.toast.show { opacity:1; transform:translateY(0) }

/* ─── HIDDEN ──────────────────────────────────────────────────────────────── */
.hidden { display:none !important }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:960px) {
  .hero { padding:48px 32px 40px }
  .hero-h { font-size:48px }
  .hero-tag { font-size:17px }
  .doctrine { padding:14px 32px; gap:18px }
  .test-banner { padding:12px 32px }
  .main { padding:40px 32px }
  .question, .report, .gate, .generating { padding:32px 24px }
  .q-text { font-size:24px }
  .report-h { font-size:28px }
  .nav { padding:0 16px }
  footer { padding:32px 32px }
  .actions { flex-direction:column-reverse }
  .actions .btn { width:100% }
  .score-grid { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)) }
}

/* ─── PRINT (export PDF rapport) ──────────────────────────────────────────── */
@media print {
  body { background:white; font-size:11pt }
  .nav, .actions, .toast, .progress, .test-banner { display:none !important }
  .hero { padding:32px 0; background:white; color:var(--deep) }
  .hero::before { display:none }
  .hero-h, .hero-tag { color:var(--deep) }
  .hero-bar { background:var(--deep); color:white }
  .doctrine { background:var(--g1); color:var(--deep); padding:14px 0 }
  .doctrine strong { color:var(--act) }
  .doctrine span { color:var(--gt) }
  .main { padding:24px 0; max-width:100% }
  .gate, .question, .generating { display:none !important }
  .info-bar { display:none !important }
  .report { border:1px solid var(--g3); padding:32px; box-shadow:none }
  .cta-block { display:none !important }
  footer { background:white; color:var(--deep); border-top:1px solid var(--g3); padding:24px 0 }
  .f-id { color:var(--act) }
  .f-meta, .f-doctrine, .f-disclaimer { color:var(--gt) }
  @page { margin:18mm 14mm }
}

/* ═══ V-transitoire 27/07/2026 · composants complétés (uniformisation) ═══ */
/* Réservation (dg03) — composant remplaçant le bloc inline */
.booking{background:#fff;border:1px solid var(--g2);border-radius:var(--r);padding:40px;margin-top:32px}
.booking-h{font-family:var(--display);font-weight:300;font-size:24px;color:var(--deep);margin-bottom:12px}
.booking-sub{font-size:15px;line-height:1.7;color:var(--gt);margin-bottom:24px}
/* Consentement RGPD (injecté avant le bouton d'accès) */
.consent{display:flex;gap:12px;align-items:flex-start;margin:20px 0;padding:16px;background:var(--g1);border:1px solid var(--g2);border-radius:var(--r)}
.consent input[type=checkbox]{margin-top:3px;width:18px;height:18px;accent-color:var(--go);flex-shrink:0}
.consent label{font-size:13px;line-height:1.6;color:var(--gt)}
.consent a{color:var(--act);text-decoration:underline}
.delete-data{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0}
.delete-data:hover{color:var(--stop)}