/* =====================================================================
   ODRES — Auto-diagnostic conformité AFSCA
   Identité visuelle ODRES de l'application (design system ERP
   templates/erp/base.html + formulaire public d'onboarding) :
   teal #4ECDC4 / #2AB7AD, encre #0F172A, sombre #0E1117, police Inter,
   couleurs sémantiques emerald / orange / red. Logo officiel non modifié.
   Tout le module est scopé sous .od-diag.
   ===================================================================== */

/* ---- En-tête / pied de page de la page publique ---- */
*{box-sizing:border-box}
body{margin:0;background:#F0F4F8;color:#0F172A;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:500}
.site-header,.site-footer{background:#fff;border-bottom:1px solid #E2E8F0}
.site-header__inner,.site-footer__inner{max-width:1080px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-header__logo img{display:block;height:30px;width:auto}
.site-header__nav{display:flex;gap:22px;align-items:center;font-size:14px}
.site-header__nav a{color:#475569;text-decoration:none;font-weight:500;transition:color .15s}
.site-header__nav a:hover{color:#0F766E}
.site-header__cta{background:#4ECDC4;color:#0F172A !important;padding:9px 16px;border-radius:10px;font-weight:600;transition:background .15s}
.site-header__cta:hover{background:#2AB7AD}
.site-header__nav a:focus-visible{outline:3px solid #4ECDC4;outline-offset:2px;border-radius:8px}
/* Sélecteur de langue FR | NL (version néerlandaise dédiée, audit SEO B4) */
.site-header__lang{display:inline-flex;gap:6px;align-items:center;color:#94A3B8;font-size:13px;letter-spacing:.04em}
.site-header__lang strong{color:#0F172A;font-weight:700}
.site-footer{border-top:1px solid #E2E8F0;border-bottom:none;color:#64748B;font-size:13px}

/* =====================================================================
   TOKENS DE MARQUE (ODRES)
   ===================================================================== */
.od-diag{
  --od-green:#4ECDC4;        /* primary ODRES */
  --od-green-dark:#2AB7AD;   /* accent-dark ODRES (hover) */
  --od-ink:#0F172A;          /* texte principal */
  --od-deep:#0F766E;         /* teal texte sur fond clair (contraste AA) */
  --od-tint:rgba(78,205,196,.12); /* primary-light */
  --od-ring:rgba(78,205,196,.35);
  --od-cta-text:#0F172A;     /* texte encre sur teal : contraste AA */
  --od-amber:#F59E0B;        /* orange sémantique */
  --od-red:#EF4444;          /* rouge sémantique */
  /* Verdict du score (jauge + texte) : teintes lisibles sur fond clair */
  --od-good:#0F766E;
  --od-warn:#B45309;
  --od-bad:#DC2626;
  --od-grey:#64748B;
  --od-line:#E2E8F0;
  --od-dot:#CBD5E1;
  --od-surface:#FFFFFF;
  --od-ground-a:#E8F8F8;     /* cyan-pale ODRES */
  --od-ground-b:#F0F4F8;
  --od-field-bg:#FFFFFF;
  --od-gauge-track:#E2E8F0;
  --od-disabled-bg:#E2E8F0;
  --od-disabled-text:#64748B;
  --od-logo-ink:block;
  --od-logo-white:none;

  --od-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --od-shadow:0 2px 12px rgba(15,23,42,.06),0 12px 40px rgba(15,23,42,.08);

  font-family:var(--od-font);
  font-weight:500;
  color:var(--od-ink);
  display:block;
  padding:34px 16px 64px;
  background:linear-gradient(160deg,var(--od-ground-a),var(--od-ground-b) 55%);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .od-diag{
    --od-ink:#E5E7EB;
    --od-deep:#4ECDC4;
    --od-tint:rgba(78,205,196,.14);
    --od-grey:#9CA3AF;
    --od-line:#2A3140;
    --od-dot:#475569;
    --od-surface:#161B26;
    --od-ground-a:#0E1117;
    --od-ground-b:#0B0E13;
    --od-field-bg:#1C2230;
    --od-gauge-track:#2A3140;
    --od-disabled-bg:#2A3140;
    --od-disabled-text:#9CA3AF;
    --od-good:#4ECDC4;
    --od-warn:#F59E0B;
    --od-bad:#F87171;
    --od-logo-ink:none;
    --od-logo-white:block;
  }
}
:root[data-theme="dark"] .od-diag{
  --od-ink:#E5E7EB;
  --od-deep:#4ECDC4;
  --od-tint:rgba(78,205,196,.14);
  --od-grey:#9CA3AF;
  --od-line:#2A3140;
  --od-dot:#475569;
  --od-surface:#161B26;
  --od-ground-a:#0E1117;
  --od-ground-b:#0B0E13;
  --od-field-bg:#1C2230;
  --od-gauge-track:#2A3140;
  --od-disabled-bg:#2A3140;
  --od-disabled-text:#9CA3AF;
  --od-good:#4ECDC4;
  --od-warn:#F59E0B;
  --od-bad:#F87171;
  --od-logo-ink:none;
  --od-logo-white:block;
}

.od-diag *{box-sizing:border-box}
.od-diag__root{max-width:620px;margin:0 auto}

/* ---- En-tête de marque du module : LOGO OFFICIEL, non modifié ---- */
.od-brand{display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.od-brand img{display:block;height:32px;width:auto}
.od-brand .od-brand--ink{display:var(--od-logo-ink)}
.od-brand .od-brand--white{display:var(--od-logo-white)}

/* ---- Carte ---- */
.od-card{background:var(--od-surface);border-radius:22px;box-shadow:var(--od-shadow);padding:30px 26px;animation:od-pop .35s ease}
@keyframes od-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.od-h1{font-size:27px;line-height:1.18;font-weight:700;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
.od-h1 .od-hl{color:var(--od-deep)}
.od-sub{color:var(--od-grey);font-size:15.5px;line-height:1.55;margin:0 0 22px;font-weight:500}
.od-pill{display:inline-flex;align-items:center;gap:7px;background:var(--od-tint);color:var(--od-deep);font-weight:600;font-size:13px;padding:6px 14px;border-radius:30px;margin-bottom:20px}

/* ---- Boutons ---- */
.od-btn{display:inline-block;width:100%;border:none;cursor:pointer;font-family:inherit;background:var(--od-green);color:var(--od-cta-text);font-weight:700;font-size:16px;padding:16px;border-radius:14px;box-shadow:0 4px 15px rgba(78,205,196,.4);transition:transform .12s,box-shadow .12s,background .12s}
.od-btn:hover:not(:disabled){background:var(--od-green-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(78,205,196,.45)}
.od-btn:active:not(:disabled){transform:none}
.od-btn:disabled{background:var(--od-disabled-bg);color:var(--od-disabled-text);box-shadow:none;cursor:not-allowed;transform:none}
.od-back{background:none;border:none;color:var(--od-grey);font-weight:600;cursor:pointer;font-family:inherit;font-size:14px;padding:10px;border-radius:10px;transition:color .15s,background .15s}
.od-back:hover{color:var(--od-deep);background:var(--od-tint)}
.od-diag :focus-visible{outline:3px solid var(--od-green);outline-offset:2px;border-radius:8px}

/* ---- Champs ---- */
.od-field{margin-bottom:14px}
.od-field label{display:block;font-weight:600;font-size:14px;margin-bottom:7px}
.od-diag select,.od-diag input{width:100%;font-family:inherit;font-weight:500;font-size:15px;padding:13px 14px;border:2px solid var(--od-line);border-radius:12px;color:var(--od-ink);background:var(--od-field-bg);transition:border-color .15s,box-shadow .15s}
.od-diag select:hover,.od-diag input:hover{border-color:var(--od-dot)}
.od-diag select:focus,.od-diag input:focus{outline:none;border-color:var(--od-green);box-shadow:0 0 0 3px var(--od-ring)}

/* ---- Options ---- */
.od-opts{display:grid;gap:10px}
.od-opt{display:flex;align-items:center;gap:12px;border:2px solid var(--od-line);border-radius:14px;padding:14px 15px;cursor:pointer;transition:.15s;font-size:15px;background:var(--od-surface);text-align:left;width:100%;font-family:inherit;font-weight:500;color:var(--od-ink)}
.od-opt:hover{border-color:var(--od-green)}
.od-opt.is-selected{border-color:var(--od-green);background:var(--od-tint)}
.od-opt__dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--od-dot);flex:none;display:flex;align-items:center;justify-content:center}
.od-opt.is-selected .od-opt__dot{border-color:var(--od-green);background:var(--od-green)}
.od-opt.is-selected .od-opt__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}

/* ---- Progression ---- */
.od-prog{margin-bottom:18px}
.od-prog__top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--od-grey);font-weight:600;margin-bottom:7px;font-variant-numeric:tabular-nums}
.od-prog__bar{height:8px;background:var(--od-line);border-radius:10px;overflow:hidden}
.od-prog__fill{height:100%;background:linear-gradient(90deg,var(--od-green),var(--od-green-dark));border-radius:10px;transition:width .35s}

/* ---- Question ---- */
.od-qcat{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--od-deep);font-weight:600;margin-bottom:8px}
.od-qtext{font-size:20.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin:0 0 6px;text-wrap:balance}
.od-qhelp{font-size:13.5px;color:var(--od-grey);margin:0 0 18px;line-height:1.5;font-weight:500}
.od-nav{display:flex;gap:12px;align-items:center;margin-top:20px}
.od-nav .od-btn{width:auto;flex:1}

/* ---- Résultat ---- */
.od-gauge{width:170px;height:170px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.od-gauge__inner{width:132px;height:132px;background:var(--od-surface);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.od-gauge__pct{font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.od-gauge__lbl{font-size:12px;color:var(--od-grey);font-weight:600}
.od-verdict{text-align:center;margin:10px 0 4px;font-size:22px;font-weight:700}
.od-vsub{text-align:center;color:var(--od-grey);font-size:14.5px;margin-bottom:22px;line-height:1.55;font-weight:500}
.od-sec{font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:22px 0 12px}
.od-item{display:flex;gap:12px;padding:13px 15px;border-radius:13px;margin-bottom:9px;font-size:14.5px;line-height:1.5;font-weight:500}
.od-item__ic{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;margin-top:1px}
.od-item--good{background:var(--od-tint);color:var(--od-ink)}.od-item--good .od-item__ic{background:var(--od-green);color:#0F172A}
.od-item--warn{background:rgba(245,158,11,.12);color:var(--od-ink)}.od-item--warn .od-item__ic{background:var(--od-amber);color:#0F172A}
.od-item--bad{background:rgba(239,68,68,.12);color:var(--od-ink)}.od-item--bad .od-item__ic{background:#DC2626}
.od-item__mod{display:block;color:var(--od-deep);font-weight:600;font-size:12.5px;margin-top:4px}

/* ---- Bloc lead (canvas sombre ODRES) ---- */
.od-lead{background:#0E1117;color:#fff;border-radius:18px;padding:24px 22px;margin-top:26px;border:1px solid rgba(78,205,196,.18)}
.od-lead h3{font-size:19px;margin:0 0 6px;font-weight:700;letter-spacing:-.015em}
.od-lead p{font-size:14px;color:#CBD5E1;margin:0 0 16px;line-height:1.55;font-weight:500}
.od-lead label{color:#fff}
.od-lead input{background:#161B26;border-color:#2A3140;color:#fff}
.od-lead input:hover{border-color:#475569}
.od-lead input::placeholder{color:#94A3B8}
.od-consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#CBD5E1;line-height:1.5;margin:4px 0 16px;font-weight:500}
.od-consent input{width:18px;height:18px;flex:none;margin-top:1px;padding:0;accent-color:#4ECDC4}
.od-consent a,.od-error a{color:#4ECDC4}
.od-reassure{display:flex;align-items:center;gap:8px;justify-content:center;color:#94A3B8;font-size:12.5px;margin-top:16px;text-align:center;font-weight:500}
.od-thanks{text-align:center;padding:14px 0}
.od-thanks__big{font-size:44px;margin-bottom:8px;color:#4ECDC4}
.od-thanks__t{font-weight:700;font-size:18px;margin-bottom:6px}
.od-thanks__s{color:#CBD5E1;font-size:14px;line-height:1.55;font-weight:500}

.od-disc{font-size:11.5px;color:var(--od-grey);text-align:center;margin-top:20px;line-height:1.55;font-weight:500}
.od-badge{display:inline-flex;align-items:center;gap:7px;background:var(--od-green);color:#0F172A;font-weight:700;padding:7px 15px;border-radius:30px;font-size:12.5px;letter-spacing:.08em}
.od-badge__dot{width:16px;height:16px;border-radius:50%;background:#fff;color:#0F766E;display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.od-center{text-align:center}
.od-error{color:#FCA5A5;font-size:13px;margin-top:8px;min-height:1em;font-weight:500}

.od-diag__noscript{max-width:620px;margin:0 auto;background:var(--od-surface);border-radius:16px;padding:24px}

@media (max-width:520px){
  .od-diag{padding:22px 12px 48px}
  .od-card{padding:24px 18px}
  .od-h1{font-size:23px}
  .od-qtext{font-size:19px}
  .site-header__nav a:not(.site-header__cta){display:none}
  .site-header__nav .site-header__lang a{display:inline}
}

@media (prefers-reduced-motion:reduce){
  .od-card,.od-prog__fill,.od-btn{animation:none;transition:none}
}