/* Feu Solidarité Bessières — formulaire public de candidature
   Nuit et flamme : fond sombre pour l'ouverture, papier clair pour le formulaire. */

:root {
  --paper:#F3F5F8; --surface:#FFFFFF; --surface-2:#EAEEF4;
  --line:#D3DAE4; --line-soft:#E4E9F0;
  --ink:#0D1420; --ink-2:#3D4B60; --ink-mute:#61708A;
  --flame:#DD5A0E; --flame-2:#F07C2B; --flame-soft:#DD5A0E14;
  --night:#0C1420;
  --ok:#05966A; --alert:#C42A17;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0A0F17; --surface:#131B26; --surface-2:#1B2431;
    --line:#2A3644; --line-soft:#202B39;
    --ink:#E8EDF4; --ink-2:#A4B1C3; --ink-mute:#8998AE;
    --flame:#F5822F; --flame-2:#FF9A55; --flame-soft:#F5822F1C;
    --ok:#22C98D; --alert:#FF6B5A;
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--ui); background:var(--paper); color:var(--ink); font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ---------------- ouverture ---------------- */
.hero { position:relative; background:var(--night); color:#fff; overflow:hidden; }
/* Pont Bessières de nuit, avec le cœur de lumière de l'association.
   Le cadrage vertical vise le cœur, situé aux ~55 % de la hauteur du cliché. */
.hero-img { position:absolute; inset:0; background:url('/assets/pont.jpg?v=2') center 55% / cover no-repeat; opacity:.68; }
/* Le fond reste sombre jusqu'en bas : sinon le texte blanc de la pastille
   se retrouve sur la partie claire du dégradé et devient illisible. */
/* Sombre en haut et en bas pour la lisibilité du texte, presque transparent
   au milieu : c'est la fenêtre par laquelle on voit le cœur sur le pont. */
.hero-veil {
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    #0C1420E8 0%, #0C1420B0 18%, #0C142040 38%,
    #0C142033 56%, #0C142099 74%, #0C1420DE 88%,
    #0C1420F5 96%, var(--paper) 100%);
}
.hero-in {
  position:relative; max-width:820px; margin:0 auto; padding:46px 22px 48px;
  text-align:center; min-height:600px;
  display:flex; flex-direction:column; justify-content:space-between; gap:30px;
}
.hero-top, .hero-bottom { flex:none; }
.hero-bottom p { margin:0 auto; }
.hero .eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--flame-2); font-weight:800; margin-bottom:12px; }
.hero h1 { font-size:clamp(30px, 5.4vw, 45px); font-weight:800; letter-spacing:-.03em; line-height:1.08; margin:0 0 16px; text-wrap:balance; color:#fff; }
.hero p { font-size:16px; color:#D6DEEA; max-width:57ch; margin:0 auto; text-wrap:pretty; }
/* Plaque opaque : lisible quel que soit ce qui passe derrière. */
.hero .dates {
  display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 10px;
  margin-top:26px; padding:12px 22px; border-radius:999px;
  background:#080D15E6; border:1.5px solid var(--flame);
  box-shadow:0 6px 22px #0006;
  font-family:var(--data); font-size:15px; color:#EEF2F8;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.hero .dates b { color:var(--flame-2); font-weight:700; }
.hero .dates .arrow { color:var(--flame-2); font-size:17px; line-height:1; padding:0 2px; }

/* ---------------- rail des étapes ---------------- */
.rail { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(9px); border-bottom:1px solid var(--line); }
.rail-in { max-width:880px; margin:0 auto; padding:0 22px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.rail-in::-webkit-scrollbar { display:none; }
.rail a { flex:none; display:flex; align-items:center; gap:8px; padding:13px 12px; text-decoration:none; color:var(--ink-mute); font-size:12.5px; font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; }
.rail a i { font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); font-size:11px; font-weight:800; font-family:var(--data); }
.rail a:hover { color:var(--ink); }
.rail a.on { color:var(--flame); border-bottom-color:var(--flame); }
.rail a.on i { background:var(--flame); border-color:var(--flame); color:#fff; }

/* ---------------- corps ---------------- */
.wrap { max-width:820px; margin:0 auto; padding:34px 22px 90px; }

.notice { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--flame); border-radius:10px; padding:18px 21px; margin-bottom:26px; font-size:14.5px; line-height:1.65; color:var(--ink-2); }
.notice b { color:var(--ink); }
.notice + .notice { margin-top:-12px; }

.errors { background:color-mix(in srgb, var(--alert) 8%, var(--surface)); border:1px solid color-mix(in srgb, var(--alert) 38%, transparent); border-radius:10px; padding:16px 20px; margin-bottom:26px; }
.errors b { color:var(--alert); font-size:14px; }
.errors ul { margin:8px 0 0; padding-left:20px; font-size:14px; color:var(--ink-2); }
.errors li { margin:3px 0; }

/* ---------------- sections ---------------- */
.step { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:0 0 20px; overflow:hidden; scroll-margin-top:64px; }
.step-head { display:flex; align-items:center; gap:13px; padding:17px 21px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg, var(--surface-2), transparent); }
.step-num { flex:none; width:29px; height:29px; border-radius:50%; background:var(--flame); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--data); font-size:13px; font-weight:700; }
.step-head h2 { margin:0; font-size:17.5px; font-weight:700; letter-spacing:-.015em; }
.step-head .sub { display:block; font-size:12.5px; color:var(--ink-mute); font-weight:400; letter-spacing:0; margin-top:1px; }
.step-body { padding:21px; }
.step.grave { border-color:color-mix(in srgb, var(--alert) 32%, var(--line)); }
.step.grave .step-num { background:var(--alert); }

.intro { font-size:14px; color:var(--ink-2); margin:0 0 19px; line-height:1.65; }
.intro b { color:var(--ink); }

/* ---------------- champs ---------------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:17px; }
.f { display:flex; flex-direction:column; gap:6px; }
.f.wide { grid-column:1 / -1; }
.f label, .lbl { font-size:12.5px; font-weight:700; color:var(--ink-2); }
.f .help, .help { font-size:12.5px; color:var(--ink-mute); line-height:1.5; font-weight:400; }
.req { color:var(--flame); font-weight:800; }

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], textarea {
  font-family:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:8px; padding:11px 13px; width:100%;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
input:hover, textarea:hover { border-color:var(--ink-mute); }
input:focus, textarea:focus { outline:none; border-color:var(--flame); background:var(--surface); box-shadow:0 0 0 3px var(--flame-soft); }
textarea { min-height:112px; resize:vertical; line-height:1.6; }
input::placeholder, textarea::placeholder { color:var(--ink-mute); opacity:.75; }

/* cases et boutons radio en tuiles cliquables */
.opts { display:flex; flex-wrap:wrap; gap:9px; }
.opts.stack { flex-direction:column; }
.opt { position:relative; display:flex; align-items:flex-start; gap:11px; padding:12px 15px; border:1px solid var(--line); border-radius:9px; background:var(--paper); cursor:pointer; font-size:14.5px; line-height:1.5; transition:border-color .12s, background .12s; flex:1 1 auto; min-width:150px; }
.opt:hover { border-color:var(--flame); background:var(--surface); }
.opt input { margin:2px 0 0; accent-color:var(--flame); width:18px; height:18px; flex:none; }
.opt:has(input:checked) { border-color:var(--flame); background:var(--flame-soft); }
.opt:has(input:focus-visible) { box-shadow:0 0 0 3px var(--flame-soft); }
.opt span b { display:block; }
.opt .note { display:block; font-size:12.5px; color:var(--ink-mute); margin-top:2px; }
.opt.full { flex:1 1 100%; }

/* ---------------- envoi ---------------- */
.send { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:28px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:15.5px; font-weight:700; border-radius:9px; padding:14px 28px; border:1px solid var(--flame); background:var(--flame); color:#fff; cursor:pointer; text-decoration:none; transition:filter .12s, transform .06s; }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:3px solid var(--flame-soft); outline-offset:2px; }
.send .legal { font-size:12.5px; color:var(--ink-mute); flex:1 1 220px; line-height:1.5; }

/* ---------------- confirmation ---------------- */
.done { max-width:600px; margin:0 auto; padding:60px 22px 90px; text-align:center; }
.done-mark { width:74px; height:74px; margin:0 auto 24px; border-radius:50%; background:var(--flame-soft); border:2px solid var(--flame); display:flex; align-items:center; justify-content:center; }
.done-mark svg { width:34px; height:34px; stroke:var(--flame); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.done h1 { font-size:29px; font-weight:800; letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance; }
.done p { color:var(--ink-2); font-size:15.5px; margin:0 0 16px; }
.done .card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; margin-top:28px; text-align:left; font-size:14.5px; color:var(--ink-2); line-height:1.65; }
.done .card b { color:var(--ink); }
.done .back { display:inline-block; margin-top:26px; color:var(--flame); text-decoration:none; font-weight:700; font-size:14.5px; }
.done .back:hover { text-decoration:underline; }

/* ---------------- pied ---------------- */
.pfoot { border-top:1px solid var(--line); background:var(--surface); }
.pfoot-in { max-width:820px; margin:0 auto; padding:24px 22px 34px; display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; font-size:12.5px; color:var(--ink-mute); }
.pfoot img { height:26px; width:auto; opacity:.85; }
.pfoot a { color:var(--ink-2); }

@media (max-width:560px) {
  .hero-in { padding:36px 18px 38px; min-height:480px; gap:22px; }
  .hero .dates { font-size:13.5px; padding:11px 17px; }
  .wrap { padding:26px 16px 70px; }
  .step-body { padding:17px; }
  .step-head { padding:15px 17px; }
  .btn { width:100%; }
}

/* Crédit logiciel */
.pfoot .credit { width:100%; margin-top:10px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-mute); }
.pfoot .credit a { color:var(--ink-mute); }
.credit-v { display:inline-block; margin-left:8px; padding:1px 7px; border:1px solid var(--line); border-radius:999px; font-family:var(--data); font-size:10.5px; white-space:nowrap; }

/* Pied de page centré */
.pfoot-in { justify-content:center; text-align:center; }
.pfoot-in > span[style*="margin-left:auto"] { margin-left:0 !important; }
.pfoot .credit { text-align:center; }

/* Séparateur du bandeau : discret, sans casser la ligne */
.hero .eyebrow .sep { opacity:.5; margin:0 4px; font-weight:400; }