/* ==========================================================================
   LeFrelon — écrans d'inscription (compte, collectivité, désinsectiseur)
   Direction publique « Référence » en mode focus (maquette site-public
   pages/signaler.html) : jetons, base, boutons, formulaires et mode focus
   repris tels quels de public_site.css, chargés par le seul layout
   `inscription`. Quand le site public sera en place, ce layout passera sur
   public_site.css et ne gardera que les ajouts de fin de fichier.
   ========================================================================== */

:root {
  /* Neutres — repris de Pilotage */
  --paper: #FFFFFF;
  --ground: #F5F5F3;
  --ground-2: #EDECE8;
  --rule: #E6E5E0;
  --rule-strong: #D3D1CA;
  --ink: #1C1B22;
  --ink-2: #5E5D66;
  --ink-3: #8D8C94;
  --ink-inverse: #FFFFFF;

  /* Marque et signalement — l'ambre n'est utilisé que pour ça */
  --brand: #C47A12;          /* filets, puces, liens survolés */
  --brand-ink: #8A5508;      /* ambre lisible en texte (AA sur blanc) */
  --brand-soft: #FBF1DF;
  --signal: #F2AE45;         /* bouton « Signaler », texte encre (AA) */
  --signal-hover: #E89D2C;

  /* Sémantique */
  --danger: #A6382A;  --danger-soft: #FBEBE8;
  --ok: #2C6E47;      --ok-soft: #E7F3EC;
  --info: #2F4F8F;    --info-soft: #EEF2FA;
  --warn-soft: #FCF3DF; --warn: #7D5308;

  /* Données — échelle séquentielle (cartes choroplèthes) */
  --d0: #E3DFD6; --d1: #F8E3BC; --d2: #F2C27A; --d3: #DF9534; --d4: #B66A10; --d5: #7A4407;
  --d-none: #FAFAF8;
  --series-a: #1C1B22; --series-b: #D3D1CA;

  /* Espèces — repères d'identification */
  --sp-velutina: #1C1B22;   /* corps sombre */
  --sp-crabro: #B0571B;     /* roux */
  --sp-vespula: #D9A400;    /* jaune */

  --focus: #C47A12;
  --ring: rgba(196,122,18,.32);
  --shadow-pop: 0 1px 0 rgba(28,27,34,.04), 0 12px 32px -12px rgba(28,27,34,.22);
  --grid-line: rgba(28,27,34,.06);
  --map-stroke: #FFFFFF;

  /* Typographie */
  --f-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Échelle typographique (1.25, ancrée sur 16 px) */
  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.25rem;
  --t-xl: 1.5625rem; --t-2xl: 1.953rem; --t-3xl: 2.441rem; --t-4xl: 3.052rem;

  --r-sm: 4px; --r: 6px; --r-lg: 10px;
  --wrap: 1240px;
  --measure: 68ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151517; --ground: #0F0F11; --ground-2: #1C1C20; --rule: #2A2A2F; --rule-strong: #3A3A40;
    --ink: #EDEDEF; --ink-2: #A9A9B1; --ink-3: #7A7A82; --ink-inverse: #111113;
    --brand: #EBA845; --brand-ink: #F0B865; --brand-soft: #2E2416; --signal: #F2AE45; --signal-hover: #F6BE65;
    --danger: #EE958A; --danger-soft: #35191A; --ok: #7DC59A; --ok-soft: #17291F; --info: #9FB8E8; --info-soft: #1B2436;
    --warn-soft: #30260F; --warn: #E8C27A;
    --d0: #232327; --d1: #3B2F1A; --d2: #6B4A17; --d3: #A86D18; --d4: #DE9A3A; --d5: #F6C77E; --d-none: #1A1A1D;
    --series-a: #EDEDEF; --series-b: #3A3A40;
    --sp-velutina: #EDEDEF; --sp-crabro: #E08A50; --sp-vespula: #E8C440;
    --focus: #EBA845; --ring: rgba(235,168,69,.35);
    --shadow-pop: 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px -12px rgba(0,0,0,.6);
    --grid-line: rgba(255,255,255,.06); --map-stroke: rgba(255,255,255,.24);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151517; --ground: #0F0F11; --ground-2: #1C1C20; --rule: #2A2A2F; --rule-strong: #3A3A40;
  --ink: #EDEDEF; --ink-2: #A9A9B1; --ink-3: #7A7A82; --ink-inverse: #111113;
  --brand: #EBA845; --brand-ink: #F0B865; --brand-soft: #2E2416; --signal: #F2AE45; --signal-hover: #F6BE65;
  --danger: #EE958A; --danger-soft: #35191A; --ok: #7DC59A; --ok-soft: #17291F; --info: #9FB8E8; --info-soft: #1B2436;
  --warn-soft: #30260F; --warn: #E8C27A;
  --d0: #232327; --d1: #3B2F1A; --d2: #6B4A17; --d3: #A86D18; --d4: #DE9A3A; --d5: #F6C77E; --d-none: #1A1A1D;
  --series-a: #EDEDEF; --series-b: #3A3A40;
  --sp-velutina: #EDEDEF; --sp-crabro: #E08A50; --sp-vespula: #E8C440;
  --focus: #EBA845; --ring: rgba(235,168,69,.35);
  --shadow-pop: 0 0 0 1px rgba(255,255,255,.06), 0 16px 40px -12px rgba(0,0,0,.6);
  --grid-line: rgba(255,255,255,.06); --map-stroke: rgba(255,255,255,.24);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--t-base); line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: var(--brand); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 600; line-height: 1.18; margin: 0; text-wrap: balance; letter-spacing: -.005em; font-optical-sizing: auto; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; border-radius: var(--r); }
.skip:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }
.section { padding-block: 72px; }
.section--tight { padding-block: 48px; }
.section--ground { background: var(--ground); }
.section + .section:not(.section--ground) { border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .section { padding-block: 48px; } }

/* Eyebrow : catégorie éditoriale réelle, jamais décorative */
.eyebrow { font: 600 var(--t-xs)/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; gap: 8px; align-items: center; }
.eyebrow::before { content: ""; width: 14px; height: 2px; background: var(--brand); }

.h-display { font-size: clamp(2.1rem, 4.4vw, var(--t-4xl)); font-weight: 600; letter-spacing: -.015em; }
.h-1 { font-size: clamp(1.9rem, 3.6vw, var(--t-3xl)); letter-spacing: -.012em; }
.h-2 { font-size: clamp(1.5rem, 2.6vw, var(--t-2xl)); }
.h-3 { font-size: var(--t-xl); }
.h-4 { font-size: var(--t-lg); }
.lead { font-size: var(--t-md); color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }

.section-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 760px; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; }
.section-head--split > :first-child { display: grid; gap: 12px; }
@media (max-width: 760px) { .section-head--split { grid-template-columns: 1fr; } }

/* ---------- Boutons ---------- */
.btn { --h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; font: 600 var(--t-sm)/1 var(--f-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
/* Un libellé long passe à la ligne plutôt que de déborder sur mobile */
@media (max-width: 560px) { .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; padding-block: 8px; } }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--ink); color: var(--ink-inverse); }
.btn--primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--brand)); color: var(--ink-inverse); }
.btn--signal { background: var(--signal); color: #1C1B22; }
.btn--signal:hover { background: var(--signal-hover); color: #1C1B22; }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--link { padding: 0; min-height: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: .25em; }
.btn--lg { --h: 52px; padding: 0 24px; font-size: var(--t-base); }
.btn--sm { --h: 34px; padding: 0 12px; font-size: var(--t-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Lien flèche (maillage interne) */
.arrow-link { display: inline-flex; gap: 6px; align-items: baseline; font-weight: 600; font-size: var(--t-sm); text-decoration: none; }
.arrow-link::after { content: "→"; color: var(--brand); transition: transform .15s; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- Encadrés éditoriaux ---------- */
.callout { border-left: 3px solid var(--brand); background: var(--brand-soft); padding: 18px 20px; border-radius: 0 var(--r) var(--r) 0; display: grid; gap: 8px; }
.callout--danger { border-color: var(--danger); background: var(--danger-soft); }
.callout--danger .callout__title { color: var(--danger); }
.callout--info { border-color: var(--info); background: var(--info-soft); }
.callout__title { font: 700 var(--t-sm)/1.3 var(--f-sans); display: flex; gap: 8px; align-items: center; }
.callout__title svg { width: 18px; height: 18px; flex: none; }
.callout ul { padding-left: 18px; display: grid; gap: 6px; }

.callout--ok { border-color: var(--ok); background: var(--ok-soft); }
.callout--warn { border-color: var(--warn); background: var(--warn-soft); }
.callout--warn .callout__title { color: var(--warn); }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 var(--t-md)/1.35 var(--f-serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq__a { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; display: grid; gap: 10px; }


/* ---------- Formulaires ---------- */
.field { display: grid; gap: 6px; }
.field label, .label { font: 600 var(--t-sm)/1.3 var(--f-sans); }
.field .hint { font-size: var(--t-xs); color: var(--ink-2); }

/* Suggestion de correction d'une adresse email mal tapée (email_suggest.js) */
.email-suggest { margin: 6px 0 0; font-size: var(--t-xs); color: var(--warn); }
.field > .email-suggest { margin: 0; }
.email-suggest button { font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: 10px 14px; font: 400 var(--t-base)/1.4 var(--f-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r); transition: border-color .15s, box-shadow .15s; }
.textarea { min-height: 110px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.err { font-size: var(--t-xs); color: var(--danger); font-weight: 600; }
.req { color: var(--danger); }
.opt { font-weight: 400; color: var(--ink-3); font-size: var(--t-xs); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.choice { position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 48px; border: 1px solid var(--rule-strong); border-radius: var(--r-lg); cursor: pointer; background: var(--paper); transition: border-color .15s, background .15s; }
.choice input { position: absolute; opacity: 0; }
.choice::before { content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border: 1.5px solid var(--ink-3); border-radius: 50%; background: var(--paper); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--ground); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:checked)::before { border: 5px solid var(--ink); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.choice b { font-size: var(--t-base); font-weight: 600; }
.choice span { font-size: var(--t-sm); color: var(--ink-2); }
.choice--check::before { border-radius: 4px; }
.choice--check:has(input:checked)::before { border: 0; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat; }
.choice--media { padding: 0; grid-template-rows: auto 1fr; overflow: hidden; }
.choice--media::before { top: 12px; left: 12px; z-index: 1; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.choice--media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.choice--media .choice__txt { padding: 12px 14px 14px; display: grid; gap: 2px; }

.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r); padding: 3px; gap: 2px; background: var(--paper); flex-wrap: wrap; }
.seg button, .seg label { border: 0; background: none; padding: 7px 12px; border-radius: 4px; font: 500 var(--t-sm)/1 var(--f-sans); color: var(--ink-2); cursor: pointer; }
.seg [aria-pressed="true"], .seg label:has(input:checked) { background: var(--ink); color: var(--ink-inverse); }
.seg input { position: absolute; opacity: 0; width: 1px; }


/* ---------- Signalement, mode focus (une question par écran) ---------- */
body.focus { background: var(--paper); padding-bottom: 0; }
.fbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 60px; padding-inline: 12px; background: var(--paper); }
.fbar [data-back] { grid-column: 1; }
.fbar__brand { grid-column: 2; justify-self: center; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font: 600 var(--t-sm)/1 var(--f-sans); }
.fbar__quit { grid-column: 3; justify-self: end; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; padding: 8px; }
.fbar__quit:hover { color: var(--ink); }
.fprog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rule); }
.fprog span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.fwrap { max-width: 600px; margin-inline: auto; padding: 28px 20px 96px; display: grid; gap: 28px; }
@media (max-width: 520px) { .fwrap { padding: 20px 16px 72px; gap: 22px; } }
.fgroups { list-style: none; display: flex; gap: 18px; font: 500 var(--t-xs)/1 var(--f-sans); color: var(--ink-3); letter-spacing: .02em; }
.fgroups li { display: inline-flex; gap: 6px; align-items: center; }
.fgroups li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); }
.fgroups .is-cur { color: var(--ink); } .fgroups .is-cur::before { background: var(--brand); }
.fgroups .is-done { color: var(--ink-2); } .fgroups .is-done::before { background: var(--ink); }
.fintro { display: grid; gap: 8px; padding-bottom: 4px; }
.fintro h1 { font-size: var(--t-xl); }
.fintro p { font-size: var(--t-sm); color: var(--ink-2); }
.fq { font: 600 clamp(1.6rem, 4.6vw, 2rem)/1.15 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.fhint { color: var(--ink-2); margin-top: -8px; }
.fopts { display: grid; gap: 10px; }
.fopt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 12px 16px; border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--paper); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s, transform .12s; }
.fopt:hover { border-color: var(--ink-3); background: var(--ground); }
.fopt:active { transform: scale(.995); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fopt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.fopt:has(input:checked) { border-color: var(--ink); background: var(--ground); box-shadow: inset 0 0 0 1px var(--ink); }
.fopt__lead { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); background: var(--ground); color: var(--ink-2); }
.fopt__lead svg { width: 22px; height: 22px; }
.fopt:has(input:checked) .fopt__lead { background: var(--ink); color: var(--ink-inverse); }
.fopt__txt { display: grid; gap: 2px; }
.fopt__txt b { font-weight: 600; font-size: var(--t-base); }
.fopt__txt span { font-size: var(--t-sm); color: var(--ink-2); }
.fnext { display: grid; gap: 8px; justify-items: center; padding-top: 6px; }
.fdrop { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; border: 1.5px dashed var(--rule-strong); border-radius: var(--r-lg); background: var(--ground); cursor: pointer; text-align: center; }
.fdrop:hover { border-color: var(--ink-3); }
.fdrop svg { width: 32px; height: 32px; color: var(--ink-2); margin-bottom: 4px; }
.fdrop span { font-size: var(--t-xs); color: var(--ink-2); }
.fdone { display: grid; gap: 18px; outline: none; }
.ftimeline { list-style: none; display: grid; border-left: 2px solid var(--rule); margin-left: 6px; }
.ftimeline li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 20px; }
.ftimeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.ftimeline span { font-size: var(--t-sm); color: var(--ink-2); }
.ffaq { display: grid; gap: 12px; padding-top: 40px; margin-top: 12px; border-top: 1px solid var(--rule); }
.ffaq h2 { font-size: var(--t-lg); }
.ffaq summary { font-size: var(--t-base); }
.fintro h1 { font: 600 clamp(1.6rem, 4.6vw, 2rem)/1.15 var(--f-serif); letter-spacing: -.01em; }
.fintro { padding-bottom: 12px; }
.fq--sub { font: 600 var(--t-lg)/1.3 var(--f-sans); letter-spacing: 0; }
@media (max-width: 640px) {
  .fnext { position: sticky; bottom: 0; margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--paper) 78%, transparent); z-index: 5; }
}
.done-ok { width: 48px; height: 48px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.done-ok svg { width: 26px; height: 26px; }

/* ==========================================================================
   Ajouts propres à l'inscription : barre du haut (retour, marque, connexion),
   formulaires longs découpés en sections, étapes du désinsectiseur, choix du
   profil en liens, suggestions d'adresse, dépôt des justificatifs.
   ========================================================================== */
body.fsignup { min-height: 100vh; display: flex; flex-direction: column; }
.fsignup main { flex: 1; width: 100%; }
.fsignup .fbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.fbar__back { grid-column: 1; justify-self: start; display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; padding: 8px 4px; }
.fbar__back:hover { color: var(--ink); }
.fbar__back svg { width: 16px; height: 16px; }
.brand__logo { display: block; flex: none; }
.brand__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo--light { display: none; }
  :root:not([data-theme="light"]) .brand__logo--dark { display: block; }
}
:root[data-theme="dark"] .brand__logo--light { display: none; }
:root[data-theme="dark"] .brand__logo--dark { display: block; }
.fsignup .fbar__quit { white-space: nowrap; }
@media (max-width: 420px) { .fbar__back span { display: none; } }

.fwrap--wide { max-width: 680px; }
.fintro .eyebrow { margin-bottom: 4px; }
.fintro .lead { font-size: var(--t-base); }

/* Avantages en liste courte, icône en tête */
.fpoints { list-style: none; display: grid; gap: 14px; }
.fpoints li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.fpoints li > svg { width: 36px; height: 36px; padding: 8px; border-radius: var(--r); background: var(--brand-soft); color: var(--brand-ink); }
.fpoints b { display: block; font-weight: 600; }
.fpoints span { font-size: var(--t-sm); color: var(--ink-2); }

/* Choix du profil : chaque option est un lien vers son parcours */
a.fopt { text-decoration: none; color: inherit; }
a.fopt:hover { color: inherit; }
a.fopt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-color: var(--ink); }
.fopt__go { width: 18px; height: 18px; color: var(--ink-3); }
.fopt.is-cur { border-color: var(--ink); background: var(--ground); box-shadow: inset 0 0 0 1px var(--ink); }
.fopt.is-cur .fopt__lead { background: var(--ink); color: var(--ink-inverse); }
.fopts__title { font: 600 var(--t-xs)/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

/* Formulaire */
.fform { display: grid; gap: 28px; }
.fform fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.fform legend, .fsec { padding: 0; font: 600 var(--t-lg)/1.3 var(--f-serif); }
.fform legend { margin-bottom: 16px; }
.fform legend + * { margin-top: 0; }
.fform legend + p { color: var(--ink-2); font-size: var(--t-sm); margin-top: -8px; }
.fsec + p { color: var(--ink-2); font-size: var(--t-sm); margin-top: -8px; }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.frow--zip { grid-template-columns: 9rem minmax(0, 1fr); }
@media (max-width: 520px) { .frow, .frow--zip { grid-template-columns: 1fr; } }
.field .err { margin-top: 2px; }
.field:has(.err) .input, .field:has(.err) .select { border-color: var(--danger); }
.select { appearance: none; padding-right: 36px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238D8C94' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center/16px no-repeat; }
.field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__head .btn--link { font: 500 var(--t-xs)/1 var(--f-sans); display: inline-flex; gap: 4px; align-items: center; }
.field__head .btn--link svg { width: 14px; height: 14px; }
.fsignup .seg { display: flex; width: 100%; }
.fsignup .seg label { flex: 1; text-align: center; padding: 11px 12px; }
.fsignup .choice--check { padding-block: 14px; }
.fsignup .choice--check::before { top: 16px; }
.fconsent { display: grid; gap: 16px; }
.fhp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.fsubmit { display: grid; gap: 10px; }
.fsubmit .btn { width: 100%; }
.fsubmit p { text-align: center; font-size: var(--t-xs); color: var(--ink-2); }

/* Suggestions de la Base adresse nationale (contrôleur address-complete) */
.fac { position: relative; }
.fac-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); list-style: none; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); padding: 4px; max-height: 300px; overflow: auto; }
.fac-results li { display: grid; gap: 2px; padding: 9px 10px; border-radius: 4px; cursor: pointer; font-size: var(--t-sm); }
.fac-results li small { color: var(--ink-2); font-size: var(--t-xs); }
.fac-results li:hover, .fac-results li[aria-selected="true"] { background: var(--ground); }
.fac-results .lf-ac-empty { color: var(--ink-2); cursor: default; }
.field:has(.fac-results:not([hidden])) .hint { visibility: hidden; }

/* Étapes (contrôleur signup-steps) : sans JavaScript, tout s'affiche à la suite */
.fsteps { display: grid; gap: 28px; }
.fstep__nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding-top: 4px; }
.fstep__nav .btn--primary { margin-left: auto; }
.fform:not(.is-steps) .fstep__nav [data-action*="signup-steps"] { display: none; }
.fform:not(.is-steps) .fstep + .fstep { border-top: 1px solid var(--rule); padding-top: 28px; }
.fgroups { flex-wrap: wrap; row-gap: 8px; }

/* Dépôt d'un justificatif (contrôleur file-drop) */
.fdoc { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); }
.fdoc h3 { font: 600 var(--t-base)/1.3 var(--f-sans); }
.fdrop { position: relative; padding: 20px; }
.fdrop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fdrop svg { width: 24px; height: 24px; }
.fdrop b { font-weight: 600; font-size: var(--t-sm); }
.fdrop:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.fdrop.lf-over { border-color: var(--ink); background: var(--ground-2); }
.fdrop.lf-picked { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.fdrop.lf-picked svg { color: var(--ok); }

/* Après l'envoi et pied de page */
.fdone .btn-row { padding-top: 8px; }
.ffoot { border-top: 1px solid var(--rule); padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: var(--t-xs); color: var(--ink-3); }
.ffoot a { color: var(--ink-2); text-decoration: none; }
.ffoot a:hover { color: var(--ink); text-decoration: underline; }
.callout p { font-size: var(--t-sm); }
.fsection { display: grid; gap: 20px; }
.fform__group { display: grid; gap: 16px; }

/* Recherche de la société dans l'annuaire des entreprises (contrôleur company-lookup) */
.fsearch { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--ground); }
.fsearch .fopts:empty { display: none; }
.fresult { grid-template-columns: minmax(0, 1fr); min-height: 0; text-align: left; font: inherit; color: inherit; width: 100%; }
.fresult .fopt__txt span { font-variant-numeric: tabular-nums; }
.fresult em { font-style: normal; font-size: var(--t-xs); font-weight: 600; color: var(--danger); }
.fsearch__manual { justify-self: start; font-size: var(--t-sm); }

/* Téléphone en deux parties, indicatif et numéro (PhoneNumberHelper#phone_number_input) */
.phone-input { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 8px; }
.phone-input > .select { padding-inline: 10px; }
.phone-input > .select + .input { margin-top: 0; }
.phone-input:has(.input--lg) > .select { min-height: 54px; font-size: var(--t-md); }