/* ==========================================================================
   Sésame ID — identité visuelle
   Univers : impression de sécurité (guilloches, encres régaliennes, MRZ)
   Palette :
     --encre   #0C2B1E  vert nuit régalien (texte, topbar)
     --marianne#12915E  vert d'action
     --papier  #F5FBF7  fond froid (pas de crème)
     --holo    #16A99C  vert hologramme (validations, accents rares)
     --alerte  #C6403A  rouge tampon
   ========================================================================== */

:root {
  --encre: #0C2B1E;
  --encre-70: #33513F;
  --marianne: #12915E;
  --marianne-dark: #0C6D46;
  --papier: #F5FBF7;
  --carte: #FFFFFF;
  --ligne: #D6E8DD;
  --holo: #16A99C;
  --holo-bg: #E4F5F3;
  --alerte: #C6403A;
  --alerte-bg: #FBEAE9;
  --radius: 10px;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--papier);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

.mono { font-family: var(--font-mono); letter-spacing: .04em; }

/* ---------- Barre supérieure ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  background: var(--encre); color: #fff;
}
.brand {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: #fff; text-decoration: none; letter-spacing: .01em;
}
.brand-mark { width: 22px; height: 22px; color: var(--holo); flex-shrink: 0; }
.topbar nav { display: flex; align-items: center; gap: .6rem; }
.nav-phone { font-size: .8rem; opacity: .75; margin-right: .4rem; }
.inline-form { display: inline; }

/* ---------- Conteneurs ---------- */
.container {
  width: min(960px, 100% - 2rem);
  margin: 1.8rem auto;
  flex: 1;
}

.card {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  margin-bottom: 1.4rem;
}
.card-narrow { max-width: 430px; margin: 2.5rem auto; }

.grid-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem;
  align-items: start;
}
@media (max-width: 760px) { .grid-2col { grid-template-columns: 1fr; } }

.page-title { margin-bottom: 1.2rem; }

/* ---------- Hero + guilloche (élément signature) ---------- */
.hero {
  position: relative;
  background: var(--encre); color: #fff;
  border-radius: var(--radius);
  padding: clamp(2rem, 6vw, 3.5rem);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.hero > * { position: relative; }
.hero-guilloche {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: repeating-radial-gradient(
      circle at 110% 20%,
      transparent 0, transparent 9px,
      rgba(18,145,94,.55) 9.5px, transparent 10.5px),
    repeating-radial-gradient(
      circle at -8% 115%,
      transparent 0, transparent 13px,
      rgba(22,169,156,.4) 13.5px, transparent 14.5px);
}
.hero .lede { max-width: 46rem; opacity: .88; font-size: 1.03rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

.eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--holo); margin: 0 0 .6rem;
}
.card .eyebrow { color: var(--marianne); }

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--carte); border: 1px solid var(--ligne);
  border-top: 3px solid var(--marianne);
  border-radius: var(--radius); padding: 1.2rem 1.3rem;
}
.step p { margin: .3rem 0 0; color: var(--encre-70); font-size: .92rem; }

/* ---------- Formulaires ---------- */
label { display: block; font-weight: 600; font-size: .87rem; margin: 1rem 0 .3rem; }
.hint { color: var(--encre-70); font-size: .9rem; margin-top: 0; }
.hint-inline { font-weight: 400; color: var(--encre-70); font-size: .8rem; }

input, select {
  width: 100%; padding: .62rem .75rem;
  border: 1.5px solid var(--ligne); border-radius: 7px;
  font: inherit; color: var(--encre); background: #fff;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--marianne); outline-offset: 1px;
  border-color: var(--marianne);
}

.input-row { display: flex; gap: .6rem; }
.input-row input { flex: 1; }

.otp-input {
  font-size: 1.7rem; text-align: center; letter-spacing: .55em;
  padding: .7rem .5rem .7rem 1rem;
}

.field-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0;
}
.field-label { display: block; font-size: .8rem; color: var(--encre-70); }
.field-value { font-size: 1.05rem; font-weight: 600; }

.divider { border: none; border-top: 1px solid var(--ligne); margin: 1.3rem 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; border: 1.5px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .92rem;
  padding: .6rem 1.15rem; border-radius: 7px;
  text-decoration: none; text-align: center;
  transition: background .15s ease;
}
.btn-primary { background: var(--marianne); color: #fff; }
.btn-primary:hover { background: var(--marianne-dark); }
.btn-secondary { background: #fff; color: var(--marianne); border-color: var(--marianne); }
.btn-secondary:hover { background: #E7F5EC; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.container .btn-ghost { color: var(--marianne); }
.container .btn-ghost:hover { background: #E7F5EC; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; margin-top: 1.2rem; }

.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--marianne); font: inherit; font-size: .88rem;
  text-decoration: underline;
}
.btn-link-danger { color: var(--alerte); }
.resend-form { margin-top: 1rem; text-align: center; }
.alt-link { margin-top: 1.2rem; font-size: .9rem; text-align: center; }
.alt-link a { color: var(--marianne); }

/* ---------- Badges / messages ---------- */
.badge {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
  padding: .22rem .55rem; border-radius: 99px; white-space: nowrap;
}
.badge-ok  { background: var(--holo-bg); color: var(--holo); }
.badge-err { background: var(--alerte-bg); color: var(--alerte); margin-left: .4rem; }

.flash {
  padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem;
  font-size: .92rem; border: 1px solid;
}
.flash-success { background: var(--holo-bg); color: #0D6E65; border-color: #B7E3DF; }
.flash-error   { background: var(--alerte-bg); color: #93302B; border-color: #F0C7C4; }

/* ---------- Tableau des documents ---------- */
.doc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc-table th {
  text-align: left; font-family: var(--font-mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--encre-70);
  padding: .5rem .6rem; border-bottom: 2px solid var(--encre);
}
.doc-table td { padding: .65rem .6rem; border-bottom: 1px solid var(--ligne); }
.expired { color: var(--alerte); }
.empty-state { color: var(--encre-70); font-style: italic; }

/* ---------- Divers ---------- */
.footer {
  text-align: center; font-size: .78rem; color: var(--encre-70);
  padding: 1.2rem; border-top: 1px solid var(--ligne);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}