/* Diagnostic Numérique — SSN 2026, Green IT Solutions.
   Registre PREMIUM « Haute Couture Numérique » : fond noir, accent OR, texte blanc.
   Le vert anis (registre Corporate) est volontairement absent ici.
   L'or se mérite : ~5-10 % de surface, jamais en aplat pleine page (seul le bouton
   focal est en or plein ; les options restent en contour or fin).
   Charte lue à la source (greendoc/charte/tokens.css). Polices/logos servis en local. */

/* ---- Polices locales (aucun CDN) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSansVar-Roman.ttf") format("truetype");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSansVar-Italic.ttf") format("truetype");
  font-weight: 100 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramondVar-Italic.ttf") format("truetype");
  font-weight: 300 700; font-style: italic; font-display: swap;
}

/* ---- Jetons charte (valeurs source) ---- */
:root {
  --or: #C9A961;          /* Or Haute Couture — accent premium et actions */
  --or-fonce: #A98A48;    /* hover/active */
  --noir: #000000;
  --blanc: #FFFFFF;
  --gris-fonce: #3C3C3B;
  --gris-clair: #B2B2B2;
  --rouge: #C0392B;

  --surface: #0c0c0c;
  --surface-hover: #161616;
  --or-voile: rgba(201, 169, 97, .12);   /* tint discret, sélection */
  --radius: 2px;
  --tap: 56px;
  --maxw: 540px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 5vw, 40px) clamp(20px, 5vw, 32px)
           calc(env(safe-area-inset-bottom) + 28px);
  display: flex;
  flex-direction: column;
}

/* ---- Étapes ---- */
.step { display: none; flex: 1; flex-direction: column; justify-content: center; }
.step.is-active { display: flex; animation: stepIn .28s ease both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo { width: clamp(180px, 55vw, 240px); height: auto; margin: 0 auto 28px; display: block; }

.kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin: 0 0 14px;
  text-align: center;
}

.accroche {
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 16px;
  text-align: center;
}
/* Mention premium : Cormorant Garamond italique, or. */
.or {
  color: var(--or);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
}

.lead { font-size: 17px; color: #e8e8e8; margin: 0 0 26px; text-align: center; }

/* Filet or fin (séparateur noble), centré. */
.rule-or {
  width: 56px; height: 1px;
  background: var(--or);
  border: 0; margin: 22px auto;
}

.signature {
  margin-top: 32px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--or);
  text-align: center;
  line-height: 1.4;
}

/* ---- Questions ---- */
.question__num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--or);
  margin: 0 0 10px;
}
.question__intitule {
  font-size: clamp(21px, 6vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 26px;
}

.options { display: flex; flex-direction: column; gap: 12px; }

.option {
  width: 100%;
  min-height: 60px;
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  font-size: 17px;
  color: var(--blanc);
  background: var(--surface);
  border: 1px solid var(--gris-fonce);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
  -webkit-tap-highlight-color: transparent;
}
.option:hover { background: var(--surface-hover); border-color: var(--gris-clair); }
.option:active { transform: scale(.99); }
.option.is-selected {
  border-color: var(--or);
  background: var(--or-voile);
  box-shadow: inset 0 0 0 1px var(--or);
}

/* ---- Coordonnées ---- */
.coords__titre { font-size: clamp(24px, 7vw, 30px); font-weight: 600; margin: 0 0 6px; }

.field { display: block; margin: 0 0 16px; }
.field__label { display: block; font-size: 13px; color: var(--gris-clair); margin: 0 0 6px; }
.field input {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--blanc);
  background: var(--surface);
  border: 1px solid var(--gris-fonce);
  border-radius: var(--radius);
}
.field input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0;
  font-size: 14px;
  color: #dcdcdc;
  line-height: 1.45;
  cursor: pointer;
}
.check input[type="checkbox"] {
  flex: 0 0 auto; width: 26px; height: 26px; margin: 0;
  accent-color: var(--or);
}
.check--rgpd { font-size: 13px; color: var(--gris-clair); }
.check a { color: var(--or); }

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 14px 24px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  -webkit-tap-highlight-color: transparent;
}
/* Bouton focal en or plein (petite surface, action critique). */
.btn--primary { background: var(--or); color: var(--noir); width: 100%; border-radius: 12px; }
.btn--primary:hover { background: var(--or-fonce); }
.btn--primary:active { transform: scale(.99); }
.btn--primary:disabled { opacity: .55; cursor: default; }
/* Variante texte : blanc + contour or fin. */
.btn--ghost { background: transparent; color: var(--blanc); border-color: var(--gris-fonce); border-radius: 12px; }
.btn--ghost:hover { border-color: var(--or); }

.nav { display: flex; gap: 12px; margin-top: 26px; }
.nav .btn--ghost { flex: 0 0 auto; }
.nav .btn--primary { flex: 1; }

/* ---- Barre de progression ---- */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: #1c1c1c; z-index: 10;
}
.progress__bar { height: 100%; width: 0; background: var(--or); transition: width .3s ease; }
.progress__label { position: absolute; left: -9999px; }

/* ---- Confirmation ---- */
.step--confirmation, .step--erreur { text-align: center; align-items: center; }
.confirm-mark {
  width: 64px; height: 64px;
  margin: 6px auto 22px;
  border-radius: 50%;
  border: 1px solid var(--or);
  display: grid; place-items: center;
}
.confirm-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--or);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .6; }
}
.confirm-titre { font-size: clamp(26px, 7vw, 32px); font-weight: 600; margin: 0 0 14px; }
.confirm-invite { color: var(--or); font-size: 16px; margin: 18px 0 0; }

/* ---- Erreur ---- */
.erreur-titre { font-size: 26px; font-weight: 600; margin: 8px 0 18px; }
.erreur-liste { list-style: none; padding: 0; margin: 0 0 26px; color: #e0e0e0; }
.erreur-liste li {
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface);
  border-left: 2px solid var(--rouge);
  border-radius: var(--radius);
  text-align: left;
}

.form-error {
  margin: 6px 0 0; padding: 10px 12px;
  background: rgba(192, 57, 43, .14);
  border: 1px solid var(--rouge);
  border-radius: var(--radius);
  color: #f3c6c0; font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .step.is-active, .confirm-dot { animation: none; }
  .progress__bar { transition: none; }
}