:root {
  --paper: #F1F3F6;
  --surface: #FFFFFF;
  --band: #E7EBF1;
  --ink: #0B1B3A;
  --ink-soft: #45516B;
  --accent: #0A3FA8;
  --accent-dark: #072E7C;
  --gold: #D8A72A;
  --line: #D0D7E2;
  --line-soft: #E4E9F0;
  --maxw: 1120px;
  --erreur: #B3261E;       /* 6,5:1 sur blanc */
}

*, *::before, *::after { box-sizing: border-box; }

/* l'en-tête est collant : ce que le navigateur amène à l'écran (ancre, champ
   en erreur) doit se poser dessous. Valeur de secours, form.js la règle sur
   la hauteur réelle de l'en-tête. */
html { scroll-padding-top: 140px; }
@media (max-width: 1000px) { html { scroll-padding-top: 226px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .45em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.1; }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.12rem; font-family: 'Libre Franklin', sans-serif; font-weight: 600; }

p { margin: 0 0 1em; max-width: 70ch; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.section { padding-block: 66px; }
.section--tight { padding-block: 40px; }
.section--band { background: var(--band); }
.lead { font-size: 1.16rem; color: var(--ink-soft); }
.small { font-size: .89rem; color: var(--ink-soft); }
.measure { max-width: 70ch; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 26px; min-height: 74px; flex-wrap: wrap; }
.brand { text-decoration: none; color: var(--ink); line-height: 1.05; }
.brand b {
  display: block; font-family: 'Spectral', serif; font-weight: 600;
  font-size: 1.55rem; letter-spacing: .04em;
  border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.brand i { font-style: normal; font-size: .72rem; color: var(--ink-soft); letter-spacing: .06em; }
.nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: .94rem; font-weight: 500; padding-block: 3px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--gold); }
.nav a.is-current { border-bottom-color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 13px 24px; text-decoration: none; font-weight: 600; font-size: .98rem;
  border: 1px solid var(--accent); cursor: pointer; font-family: inherit; border-radius: 2px;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: rgba(10,63,168,.06); color: var(--accent-dark); }
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #e8b93f; border-color: #e8b93f; }
.btn[hidden] { display: none; }

/* ---------- corridor (origine → destination) ---------- */
.corridor { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 34px 0 0; max-width: 560px; }
.corridor-node { font-size: .9rem; font-weight: 600; }
.corridor-node span { display: block; font-weight: 400; color: var(--ink-soft); font-size: .82rem; }
.corridor-line { height: 1px; background: var(--ink); position: relative; }
.corridor-line::after {
  content: ""; position: absolute; right: -1px; top: -3.5px;
  border-left: 8px solid var(--ink); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.corridor-line::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%;
}

/* ---------- hero ---------- */
.hero { padding-block: 74px 58px; }
.hero-grid { display: grid; gap: 52px; grid-template-columns: 1.03fr .97fr; align-items: start; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { margin-top: 22px; font-size: .9rem; color: var(--ink-soft); max-width: 48ch; }

/* dossier — l'objet central */
.dossier { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); box-shadow: 7px 7px 0 rgba(11,27,58,.07); }
.dossier-head { padding: 15px 22px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dossier-head strong { font-family: 'Spectral', serif; font-weight: 600; font-size: 1.02rem; }
.dossier-head em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.dossier dl { margin: 0; padding: 12px 22px; display: grid; grid-template-columns: 44% 1fr; gap: 7px 14px; font-size: .91rem; }
.dossier dt { color: var(--ink-soft); }
.dossier dd { margin: 0; font-weight: 500; }
.dossier-conform { border-top: 1px solid var(--line-soft); padding: 15px 22px; background: #FAFBFD; }
.dossier-conform p { margin: 0 0 9px; font-size: .82rem; color: var(--ink-soft); }
.dossier-conform ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.dossier-conform li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.dossier-conform li::before { content: "✓"; color: var(--accent); font-weight: 700; font-size: .82rem; line-height: 1.6; }

/* ---------- blocks ---------- */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list > li { border-top: 1px solid var(--line); padding: 19px 0; }
.rule-list > li:last-child { border-bottom: 1px solid var(--line); }
.rule-list h3 { margin-bottom: .25em; }
.rule-list p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps > li {
  counter-increment: s; display: grid; grid-template-columns: 62px 1fr; gap: 24px;
  border-top: 1px solid var(--line); padding: 26px 0 28px;
}
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  font-family: 'Spectral', serif; font-weight: 600; font-size: 1.7rem;
  color: var(--gold); line-height: 1; padding-top: 2px;
}
.steps h3 { margin: 0 0 .5em; font-size: 1.14rem; }
.steps p { margin: 0 0 .7em; color: var(--ink-soft); max-width: 62ch; }
.steps p:last-child { margin-bottom: 0; }

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.cols--2 { grid-template-columns: repeat(2, 1fr); }

.panel { background: var(--surface); border: 1px solid var(--line); padding: 30px; border-radius: 2px; }
.panel--dark { background: var(--ink); color: #D5DCE8; border-color: var(--ink); }
.panel--dark h2, .panel--dark h3 { color: #fff; }
.panel--dark p { color: #AEBACE; }
.panel--dark a { color: var(--gold); }

.cta-band { background: var(--ink); color: #fff; }
.cta-band .wrap { padding-block: 58px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #AEBACE; }

.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 21px; }
.faq dd { margin: 8px 0 0; color: var(--ink-soft); max-width: 70ch; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 22px; list-style: none; }
.tags li { border: 1px solid var(--line); background: var(--surface); padding: 5px 12px; font-size: .87rem; border-radius: 2px; }

.note { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 26px 0; }
.note p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

table.grid { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--surface); }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; }
table.grid th { background: var(--band); font-weight: 600; }

/* ---------- form ---------- */
.form-shell { max-width: 810px; }
.progress { display: flex; gap: 5px; margin-bottom: 9px; }
.progress span { height: 4px; flex: 1; background: var(--line); }
.progress span.is-done { background: var(--gold); }
.progress span.is-active { background: var(--accent); }
.progress-label { font-size: .87rem; color: var(--ink-soft); margin-bottom: 30px; }

.step { border: 0; padding: 0; margin: 0; }
.step[hidden] { display: none; }
.step > legend { font-family: 'Spectral', serif; font-weight: 600; font-size: 1.6rem; padding: 0; margin-bottom: 6px; }
.step-intro { color: var(--ink-soft); margin-bottom: 28px; font-size: .96rem; }

.field { margin-bottom: 22px; }
.field[hidden] { display: none; }
.field label, .field .label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .86rem; margin-top: 2px; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field input[type=date], .field select, .field textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .96rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink);
}
.field textarea { min-height: 108px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: .94rem; font-weight: 400; }
.check input { margin-top: 4px; flex-shrink: 0; }
.req { color: #A32C22; }

.form-nav { display: flex; gap: 12px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-nav .spacer { margin-left: auto; }

.recap { background: var(--surface); border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 24px; }
.recap dl { margin: 0; display: grid; grid-template-columns: minmax(150px, 36%) 1fr; gap: 6px 16px; font-size: .92rem; }
.recap dt { color: var(--ink-soft); }
.recap dd { margin: 0; font-weight: 500; }

.form-status { margin-top: 18px; padding: 14px 16px; border-radius: 2px; font-size: .94rem; }
.form-status.err { background: #FBEAE8; border: 1px solid #E2B5AF; color: #8A2A1F; }
.form-status.ok { background: #E8EEFA; border: 1px solid #AFC2E8; color: var(--accent-dark); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #9EAAC1; padding-block: 50px 30px; font-size: .92rem; }
.site-footer a { color: #DCE3EE; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.site-footer .footer-titre { color: #fff; font-size: .93rem; margin: 0 0 12px; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-bottom { border-top: 1px solid #253355; margin-top: 38px; padding-top: 20px; font-size: .83rem; line-height: 1.55; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .cols, .cols--2 { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding-block: 46px; }
  .field-row, .check-grid { grid-template-columns: 1fr; }
  .recap dl, .dossier dl { grid-template-columns: 1fr; }
  .recap dt, .dossier dt { margin-top: 7px; }
  .corridor { grid-template-columns: 1fr; gap: 10px; }
  .corridor-line { display: none; }
  .nav { gap: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  table.grid, table.grid tbody, table.grid tr, table.grid td, table.grid th { display: block; }
  table.grid th { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.nav-tel { font-weight: 600; font-size: .94rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
.nav-tel:hover { text-decoration: underline; }
@media (max-width: 620px) { .nav-tel { display: none; } }

/* ---------- chips (choix rapides, tactiles) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: 9px 15px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 2px; font-size: .93rem;
  cursor: pointer; user-select: none; line-height: 1.3;
}
.chip span:hover { border-color: var(--accent); }
.chip input:checked + span {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- démarrage rapide (hero) ---------- */
.quickstart {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); box-shadow: 7px 7px 0 rgba(11,27,58,.07);
}
.quickstart-head { padding: 20px 24px 4px; }
.quickstart-head h2 { font-size: 1.25rem; margin-bottom: 4px; }
.quickstart-head p { font-size: .89rem; color: var(--ink-soft); margin: 0; }
.quickstart-body { padding: 18px 24px 22px; }
.quickstart .field { margin-bottom: 16px; }
.quickstart .btn { width: 100%; text-align: center; }
.quickstart-foot {
  border-top: 1px solid var(--line-soft); background: #FAFBFD; padding: 16px 24px;
}
.quickstart-foot p { margin: 0 0 9px; font-size: .82rem; color: var(--ink-soft); }
.quickstart-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.quickstart-foot li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.quickstart-foot li::before { content: "\2713"; color: var(--accent); font-weight: 700; font-size: .82rem; line-height: 1.6; }

/* ---------- barre d'action mobile ---------- */
.cta-sticky { display: none; }
@media (max-width: 760px) {
  .cta-sticky {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  }
  .cta-sticky .btn { flex: 1; text-align: center; padding: 12px 10px; }
  body { padding-bottom: 74px; }
}

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }
.contact-lines { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.contact-lines li { border-top: 1px solid var(--line); padding-top: 14px; }
.contact-lines strong { display: block; font-size: .84rem; color: var(--ink-soft); font-weight: 500; margin-bottom: 3px; }
.contact-lines a, .contact-lines span { font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-lines a:hover { color: var(--accent); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ==================================================================
   Couche visuelle : héros sombre, visuels, mise en page éditoriale
   ================================================================== */

.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 34px; height: 34px; display: block; }
.brand-text b { border-bottom: 2px solid var(--gold); }

/* ---------- héros ---------- */
.hero-dark {
  background: var(--ink);
  background-image: url("img/convergence.svg");
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 118%;
  color: #fff;
  padding-block: 78px 108px;
  position: relative;
  overflow: hidden;
}
.hero-dark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 42%, rgba(11,27,58,.72) 62%, rgba(11,27,58,.35));
  pointer-events: none;
}
.hero-dark .wrap { position: relative; z-index: 1; }
.hero-dark h1 { color: #fff; max-width: 16ch; }
.hero-dark .lead { color: #C4CEE0; }
.hero-dark .hero-note { color: #8FA0BE; }
.hero-dark .corridor-node { color: #fff; }
.hero-dark .corridor-node span { color: #8FA0BE; }
.hero-dark .corridor-line { background: #4E6493; }
.hero-dark .corridor-line::after { border-left-color: #4E6493; }
.hero-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.hero-dark .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hero-dark .hero-grid { align-items: center; }

.quickstart { box-shadow: 0 18px 40px rgba(4,12,30,.34); border-top-width: 4px; }

/* ---------- bandeau de faits ---------- */
.facts { background: var(--surface); border-bottom: 1px solid var(--line); }
.facts .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 26px; gap: 0;
}
.facts div { padding: 4px 26px; border-left: 1px solid var(--line); }
.facts div:first-child { border-left: 0; padding-left: 0; }
.facts strong {
  display: block; font-family: 'Spectral', serif; font-size: 1.42rem;
  font-weight: 600; color: var(--ink); line-height: 1.15; margin-bottom: 4px;
}
.facts span { font-size: .86rem; color: var(--ink-soft); line-height: 1.45; display: block; }

/* ---------- titres de section ---------- */
.section > .wrap > h2:first-child { position: relative; padding-top: 16px; }
.section > .wrap > h2:first-child::before {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 3px;
  background: var(--gold);
}

/* ---------- figures (secteurs, atouts) ---------- */
.figures { display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); }
.figure { display: flex; flex-direction: column; }
.figure .media { margin-bottom: 14px; }
.figure h3 { margin-bottom: .3em; }
.figure h3 a { color: var(--ink); text-decoration: none; }
.figure h3 a:hover { color: var(--accent); text-decoration: underline; }
.figure p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.media {
  display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--ink); border: 1px solid var(--line);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide { aspect-ratio: 21 / 7; }
.media--tall { aspect-ratio: 4 / 3; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split--reverse .split-media { order: -1; }

/* ---------- bande citation / repère ---------- */
.pull {
  border-left: 3px solid var(--gold); padding: 6px 0 6px 22px; margin: 30px 0;
  font-family: 'Spectral', serif; font-size: 1.3rem; line-height: 1.4; color: var(--ink);
  max-width: 46ch;
}

/* ---------- texture ---------- */
.section--band { position: relative; }
.section--band::before {
  content: ""; position: absolute; top: 0; right: 0; width: 620px; height: 250px;
  background: url("img/grille.svg") no-repeat right top; opacity: .5; pointer-events: none;
}
.section--band > .wrap { position: relative; z-index: 1; }

/* ---------- page secteur : bandeau ---------- */
.sector-hero { background: var(--ink); color: #fff; padding-block: 0; }
.sector-hero .media--wide { border: 0; aspect-ratio: 21 / 6; }

@media (max-width: 1000px) {
  .figures { grid-template-columns: repeat(2, 1fr); }
  .facts .wrap { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .facts div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 920px) {
  .hero-dark { padding-block: 56px 72px; }

  .hero-dark::after { background: none; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 24px; }
  .split--reverse .split-media { order: 0; }
  .section--band::before { display: none; }
}
@media (max-width: 620px) {
  .figures { grid-template-columns: 1fr; }
  .facts .wrap { grid-template-columns: 1fr; }
  .facts div { border-left: 0; padding: 0; }
  .facts div + div { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 14px; }
  .brand img { width: 30px; height: 30px; }
}


/* ---------- correction : la carte claire ne doit pas hériter du blanc ---------- */
.hero-dark .quickstart { color: var(--ink); }
.hero-dark .quickstart h2 { color: var(--ink); }
.hero-dark .quickstart .quickstart-head p,
.hero-dark .quickstart .hint,
.hero-dark .quickstart-foot p,
.hero-dark .quickstart-foot ul { color: var(--ink-soft); }
.hero-dark .quickstart label,
.hero-dark .quickstart .label,
.hero-dark .quickstart .chip span { color: var(--ink); }
.hero-dark .quickstart .chip input:checked + span { color: #fff; }
.hero-dark .quickstart .btn { color: #fff; }


/* ---------- corrections de finition ---------- */
.field label.check { font-weight: 400; }
.sector-hero .media--wide img { object-position: center; }

@media (max-width: 700px) {
  .site-header .wrap { min-height: 62px; gap: 12px; }
  .site-header .nav > .btn { display: none; }   /* la barre fixe en bas prend le relais */
  .nav { gap: 12px 16px; font-size: .9rem; }
  .nav a { font-size: .9rem; }
}


/* ---------- corrections de contraste et de débordement ---------- */
.nav a.btn { color: #fff; border-bottom: 0; }
.nav a.btn:hover { border-bottom: 0; }
.panel--dark a.btn--gold { color: var(--ink); }
.panel--dark a.btn--gold:hover { color: var(--ink); }

.form-nav { flex-wrap: wrap; }
@media (max-width: 620px) {
  .form-nav { gap: 10px; }
  .form-nav .spacer { display: none; }
  .form-nav .btn { flex: 1 1 100%; text-align: center; }
  .form-nav #prev { order: 3; }
}

/* espacement après un tableau suivi d'un titre */
table.grid + h2 { margin-top: 44px; }

/* ---------- traitement des photographies ----------
   Désature légèrement et pose un voile bleu nuit : des photos venues de
   sources différentes prennent ainsi l'air d'un même reportage. Pour revenir
   aux couleurs d'origine, supprimez ce bloc. */
.media--photo { position: relative; isolation: isolate; }
.media--photo img { filter: saturate(.5) contrast(1.06) brightness(.92); }
.media--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--ink); mix-blend-mode: multiply; opacity: .46;
}
.media--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(160deg, rgba(216,167,42,.14), rgba(216,167,42,0) 55%);
  mix-blend-mode: screen;
}
.figure .media--photo:hover img { filter: saturate(.8) contrast(1.06) brightness(1); }

/* ==================================================================
   Sélecteur de métier : le cœur interactif de la page d'accueil
   ================================================================== */
/* Le premier arrêt de tabulation : invisible tant qu'on ne l'atteint pas,
   il évite de parcourir toute la navigation à chaque page. */
.evitement {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 2px;
  background: var(--gold); color: var(--ink);
  font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.evitement:focus { top: 8px; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.metiers { padding-block: 72px; }
.metiers-barre {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin: 30px 0 22px;
}
.metiers-recherche { flex: 0 0 300px; }
.metiers-recherche input {
  width: 100%; padding: 11px 14px; font: inherit; font-size: .96rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
}
.metiers-filtres .chip span { padding: 7px 13px; font-size: .88rem; }

.tuiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}
.tuile {
  position: relative; padding: 0; border: 0; background: var(--ink);
  cursor: pointer; overflow: hidden; display: block; aspect-ratio: 1;
  border-radius: 2px; font-family: inherit;
}
.tuile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.5) brightness(.78) contrast(1.05);
  transition: filter .18s ease, transform .18s ease;
}
.tuile span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 9px 8px;
  font-size: .78rem; font-weight: 600; color: #fff; text-align: left;
  line-height: 1.2;
  background: linear-gradient(transparent, rgba(7,18,40,.92));
}
.tuile:hover img, .tuile:focus-visible img {
  filter: saturate(.95) brightness(1) contrast(1.05); transform: scale(1.04);
}
.tuile[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: -3px; }
.tuile[aria-pressed="true"] img { filter: saturate(1) brightness(1.02); }
.tuile[hidden] { display: none; }

.fiche {
  display: grid; grid-template-columns: 200px 1fr; gap: 26px;
  margin-top: 26px; padding: 24px; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--gold);
  box-shadow: 0 14px 30px rgba(11,27,58,.09);
}
.fiche[hidden] { display: none; }
.fiche-visuel img { width: 100%; height: auto; display: block; border-radius: 2px; }
.fiche-corps h3 { font-family: 'Spectral', serif; font-size: 1.4rem; margin-bottom: 14px; }
.fiche-corps dl {
  margin: 0 0 16px; display: grid; grid-template-columns: minmax(190px, 34%) 1fr;
  gap: 7px 18px; font-size: .94rem;
}
.fiche-corps dt { color: var(--ink-soft); }
.fiche-corps dd { margin: 0; font-weight: 600; }
.fiche-corps .small { margin-bottom: 18px; }

@media (max-width: 700px) {
  .tuiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .fiche { grid-template-columns: 1fr; gap: 18px; }
  .fiche-visuel { max-width: 160px; }
  .fiche-corps dl { grid-template-columns: 1fr; }
  .fiche-corps dt { margin-top: 6px; }
  .metiers-recherche { flex: 1 1 100%; }
}

/* ---------- barre de choix du sélecteur de métier ---------- */
.barre-choix {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 22px; padding: 18px 24px;
  background: var(--ink); color: #fff; border-radius: 2px;
  border-left: 4px solid var(--gold);
}
.barre-choix[hidden] { display: none; }
.barre-choix p { margin: 0; }
.barre-choix span {
  display: block; font-family: 'Spectral', serif; font-size: 1.28rem; font-weight: 600;
}
.barre-choix em { font-style: normal; font-size: .88rem; color: #9FB0CE; }
.barre-choix .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.barre-choix .btn:hover { background: #e8b93f; border-color: #e8b93f; }

/* ---------- blog ---------- */
.figures--blog { grid-template-columns: repeat(3, 1fr); gap: 34px; }
.figures--blog h3 { font-size: 1.06rem; line-height: 1.35; }
.figures--blog .media { aspect-ratio: 12 / 7; }
.article { max-width: 74ch; }
.article .fil { font-size: .88rem; margin-bottom: 10px; }
.article h1 { margin-bottom: .3em; }
.article h2 { margin-top: 1.8em; }
.article h3 { margin-top: 1.4em; font-size: 1.05rem; }
.article p, .article li { font-size: 1.03rem; }
.article .rule-list { margin: 18px 0; }
.article .auteur { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-soft); }
.encadre-cta {
  margin-top: 46px; padding: 30px; background: var(--band);
  border-left: 4px solid var(--gold);
}
.encadre-cta h2 { margin-top: 0; font-size: 1.35rem; }

/* guide gratuit : la page, et l'encart des articles */
.guide-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.guide-apercu img { width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(11, 27, 58, .12); }
.guide-sommaire { padding-left: 1.1em; margin: 0 0 28px; }
.guide-sommaire li { margin-bottom: 10px; }
.encart-guide { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center;
  margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); background: var(--surface); }
.encart-guide__image img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.encart-guide .sur { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 4px; }
.encart-guide h2 { font-size: 1.25rem; margin: 0 0 6px; }
.encart-guide p { margin: 0 0 12px; }
.encart-page { max-width: 820px; margin: 36px auto 0; }
@media (max-width: 900px) { .guide-grille { grid-template-columns: 1fr; gap: 28px; }
  .guide-apercu { max-width: 320px; } }
@media (max-width: 560px) { .encart-guide { grid-template-columns: 84px 1fr; gap: 16px; padding: 18px; } }
@media (max-width: 900px) { .figures--blog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .figures--blog { grid-template-columns: 1fr; } }


.hero-dark { padding-block: 60px 66px; }

/* ---------- héros mobile ----------
   Sur petit écran, une photo derrière le texte n'est jamais lisible : la photo
   passe en bandeau au-dessus, le texte reste sur fond plein. Placé en fin de
   feuille, la règle desktop étant déclarée plus haut. */
@media (max-width: 920px) {
  .hero-dark { padding-top: 0; }
}
@media (max-width: 620px) {
}

/* ==================================================================
   Diagnostic de brief
   ================================================================== */
.diagnostic { padding-block: 72px; }
.diag { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
        margin-top: 34px; align-items: start; }

.diag-jeu {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); padding: 30px 32px 34px;
  box-shadow: 0 14px 30px rgba(11,27,58,.08);
}
.diag-progres { display: flex; gap: 5px; margin-bottom: 26px; }
.diag-progres span { height: 4px; flex: 1; background: var(--line); }
.diag-progres span.is-fait { background: var(--gold); }
.diag-progres span.is-actif { background: var(--accent); }

.q { border: 0; padding: 0; margin: 0; }
.q[hidden] { display: none; }
.q legend {
  padding: 0; margin-bottom: 20px; font-family: 'Spectral', serif;
  font-size: 1.32rem; font-weight: 600; line-height: 1.25;
  display: flex; gap: 12px; align-items: baseline;
}
.q legend span {
  flex: 0 0 auto; font-family: 'Libre Franklin', sans-serif; font-size: .8rem;
  font-weight: 700; color: var(--accent); border-top: 2px solid var(--gold);
  padding-top: 5px;
}
.opts { display: grid; gap: 10px; }
.opt {
  text-align: left; font: inherit; font-size: 1rem; cursor: pointer;
  padding: 14px 18px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 2px; color: var(--ink); transition: border-color .15s, background .15s;
}
.opt:hover { border-color: var(--accent); background: rgba(10,63,168,.04); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.diag-fin[hidden] { display: none; }
.diag-fin h3 { font-family: 'Spectral', serif; font-size: 1.5rem; margin-bottom: 10px; }
.diag-fin p { color: var(--ink-soft); }
.diag-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.diag-lecture {
  background: var(--ink); color: #C6D0E2; padding: 28px 30px;
  border-left: 4px solid var(--gold); align-self: start;
}
.diag-etiquette { font-size: .82rem; color: #8FA0BE; margin: 0 0 10px; }
.jauge { height: 9px; background: #22355C; border-radius: 1px; overflow: hidden; }
.jauge i {
  display: block; height: 100%; width: 0; background: var(--gold);
  transition: width .45s cubic-bezier(.22,.8,.3,1);
}
.jauge-niveau {
  font-family: 'Spectral', serif; font-size: 1.22rem; color: #fff;
  margin: 12px 0 18px;
}
.diag-remarques { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.diag-remarques li {
  font-size: .93rem; line-height: 1.5; padding-left: 16px; position: relative;
  border-top: 1px solid #22355C; padding-top: 13px;
}
.diag-remarques li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
.diag-remarques li:first-child { border-top: 0; padding-top: 0; }
.diag-remarques li:first-child::before { top: 6px; }
.diag-remarques li b { color: #fff; font-weight: 600; display: block; font-size: .84rem; }

.tags--liens li { padding: 0; }
.tags--liens a {
  display: block; padding: 6px 13px; text-decoration: none; color: var(--ink);
  font-size: .9rem;
}
.tags--liens li:hover { border-color: var(--accent); }
.tags--liens a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .diag { grid-template-columns: 1fr; gap: 22px; }
  .diag-jeu { padding: 24px 22px 28px; }
  .diag-lecture { padding: 22px 24px; }
}


/* ---------- alignements du formulaire ----------
   Deux champs côte à côte dont l'un a une aide sur deux lignes ne doivent pas
   décaler les saisies : on aligne par le bas. */
.field-row { align-items: end; }
.field-row > .field { margin-bottom: 0; }
.field-row + .field, .field-row + .field-row { margin-top: 22px; }
.field input[type=number] { max-width: 160px; }
.quickstart .field input[type=number] { max-width: 100%; }
.quickstart-head p b { color: var(--ink); font-weight: 600; }

/* ==================================================================
   Calculateur de poste vacant
   ================================================================== */
.calcul { padding-block: 72px; }
.calc { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px;
        margin-top: 34px; align-items: start; }
.calc-saisie {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); padding: 28px 30px 12px;
}
.calc-saisie .field { margin-bottom: 22px; }

.calc-sortie {
  background: var(--ink); color: #C6D0E2; padding: 28px 30px 30px;
  border-left: 4px solid var(--gold);
}
.calc-etiquette { font-size: .82rem; color: #8FA0BE; margin: 0 0 6px; }
.calc-total {
  font-family: 'Spectral', serif; font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 600; color: #fff; line-height: 1; margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}
.calc-proj { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.calc-proj td { padding: 9px 0; border-top: 1px solid #22355C; font-size: .92rem; }
.calc-proj td:last-child {
  text-align: right; color: #fff; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-constats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.calc-constats li {
  font-size: .92rem; line-height: 1.5; padding-left: 16px; position: relative;
  border-top: 1px solid #22355C; padding-top: 13px;
}
.calc-constats li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
.calc-constats li b { color: #fff; font-weight: 600; }
.calc-sortie .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.calc-sortie .btn:hover { background: #e8b93f; border-color: #e8b93f; }
.calc-saisie input[type=number] { max-width: 200px; }
.calc-suite { margin: 16px 0 0; font-size: .9rem; }
.calc-suite a { color: #9FB0CE; }
.calc-suite a:hover { color: #fff; }

/* Le simulateur de coût réutilise la mise en page du calculateur. « + cotisations »
   marque une colonne volontairement incomplète : elle le reste tant que l'entreprise
   n'a pas donné son taux. */
.s-attente { color: #8FA0BE; font-weight: 400; }
.calc-saisie .hint a { color: var(--ink-soft); }
/* l'explication qui porte un lien vit sous le champ, hors du label */
.calc-saisie p.hint { margin: 9px 0 0; max-width: 48ch; }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; gap: 20px; }
  .calc-saisie { padding: 24px 22px 6px; }
}


/* ---------- corrections du héros après ajout de secteurs ----------
   La carte de démarrage est plus haute que la colonne de texte : on l'aligne
   en haut plutôt qu'au centre, sinon elle déborde sous l'en-tête. */
.hero-dark .hero-grid { align-items: start; }
.corridor { max-width: none; gap: 14px; }
.corridor-line { min-width: 46px; }
.corridor-node { max-width: 46%; }
@media (max-width: 1180px) {
  .corridor { grid-template-columns: 1fr; gap: 12px; }
  .corridor-line { display: none; }
  .corridor-node { max-width: none; }
}


/* le bouton principal doit rester visible sur petit écran, où la carte de
   démarrage passe sous la ligne de flottaison */
.hero-cta-mobile { display: none; }
@media (max-width: 920px) {
  .hero-cta-mobile { display: inline-block; }
  .hero-dark .hero-cta-mobile { background: var(--gold); border-color: var(--gold);
                                color: var(--ink); }
}

/* ---------- bandeau de consentement ---------- */
.bandeau-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--ink); color: #C6D0E2; border-top: 3px solid var(--gold);
  box-shadow: 0 -8px 24px rgba(4,12,30,.28);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies .wrap {
  display: flex; gap: 26px; align-items: center; justify-content: space-between;
  padding-block: 18px; flex-wrap: wrap;
}
.bandeau-cookies p { margin: 0; font-size: .92rem; max-width: 68ch; }
.bandeau-cookies b { color: #fff; }
.bandeau-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bandeau-actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.bandeau-actions .btn--ghost:hover { background: rgba(255,255,255,.1); }
.bandeau-actions a { color: #9FB0CE; font-size: .88rem; }
@media (max-width: 760px) {
  .bandeau-cookies { bottom: 74px; }
  .bandeau-cookies .wrap { gap: 14px; padding-block: 14px; }
  .bandeau-cookies p { font-size: .87rem; }
}


/* ---------- fil d'Ariane ---------- */
.ariane { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.ariane .wrap { display: flex; gap: 9px; align-items: center; padding-block: 11px;
                font-size: .85rem; color: var(--ink-soft); flex-wrap: wrap; }
.ariane a { color: var(--ink-soft); text-decoration: none; }
.ariane a:hover { color: var(--accent); text-decoration: underline; }
.ariane span:last-child { color: var(--ink); font-weight: 500; }
.hero-dark + .ariane, .sector-hero + .ariane { display: none; }

/* =====================================================================
   Système éditorial — toutes les pages
   Même voix partout : en-tête sombre, prolongé par le fil d'Ariane et une
   tête de page sombre ; titres en Spectral 800 ; l'or pour l'action et les
   repères ; le contenu sur fond clair. Les règles propres à l'accueil
   viennent ensuite.
   ===================================================================== */

/* ---------- en-tête sombre ---------- */
.site-header { background: var(--ink); border-bottom-color: rgba(255,255,255,.08); }
.brand { color: #fff; }
.brand img { box-shadow: 0 0 0 1px rgba(255,255,255,.24); }
.brand i { color: var(--gold); letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; }
.nav a { color: #AEBACE; }
.nav a:hover { color: #fff; border-bottom-color: var(--gold); }
.nav a.is-current { color: #fff; border-bottom-color: var(--gold); }
.nav a.btn,
.nav a.btn:hover {
  background: transparent; border: 0; border-bottom: 2px solid var(--gold);
  color: #fff; padding: 3px 0; font-weight: 600; box-shadow: none;
}
.nav a.btn:hover { color: var(--gold); }
.site-header a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- fil d'Ariane : il rejoint la zone sombre ---------- */
.ariane { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.07); }
.ariane .wrap { color: #8FA0BE; }
.ariane a { color: #8FA0BE; }
.ariane a:hover { color: #fff; }
.ariane span:last-child { color: #C6D0E2; }
.ariane a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- tête de page ---------- */
.page-tete {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff; padding-block: 44px 62px;
}
.page-tete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 90% at 4% 0%, rgba(10,63,168,.32), transparent 60%);
}
.page-tete .wrap { position: relative; }
.page-sur {
  margin: 0 0 16px; font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.page-sur a { color: var(--gold); text-decoration: none; }
.page-sur a:hover { text-decoration: underline; }
.page-tete h1,
.page-tete .article h1,
.page-tete .form-shell h1 {
  margin: 0 0 18px; max-width: 24ch; color: #fff;
  font-family: 'Spectral', Georgia, serif; font-weight: 800;
  font-size: clamp(2.2rem, 1.15rem + 2.9vw, 3.65rem);
  line-height: 1.04; letter-spacing: -.028em; text-wrap: balance;
}
/* sans surtitre, un filet d'or annonce le titre */
.page-tete h1:first-child::before {
  content: ""; display: block; width: 56px; height: 3px;
  margin-bottom: 22px; background: var(--gold);
}
.page-meta { margin: -4px 0 18px; font-size: .88rem; color: #8FA0BE; }
.page-tete .lead { margin: 0; max-width: 62ch; font-size: 1.14rem; line-height: 1.62; color: #D5DDEA; }
.page-tete .lead a { color: var(--gold); }
.page-action { margin: 30px 0 0; }
/* le corridor, quand il est dans la tête : version sombre.
   Les règles « .corridor { max-width: none } » et « .corridor-node
   { max-width: 46% } » datent de l'ancien héros, où il tenait dans une colonne
   étroite ; en pleine largeur elles serraient chaque extrémité à 85 px. */
.page-tete .corridor { max-width: 640px; }
.page-tete .corridor-node { max-width: none; color: #fff; }
.page-tete .corridor-node span { color: #8FA0BE; }
.page-tete .corridor-line { background: #4E6493; }
.page-tete .corridor-line::after { border-left-color: #4E6493; }
.page-tete a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- titres de section ---------- */
.section > .wrap > h2 {
  font-family: 'Spectral', Georgia, serif; font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.12; letter-spacing: -.022em; max-width: 26ch;
}
.section > .wrap > h2:first-child::before { width: 56px; }
/* dans un article ou une page juridique, les intertitres restent mesurés */
.section > .article > h2,
.section > .form-shell > h2 {
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; max-width: none;
}

/* ---------- boutons : l'or signale l'action ---------- */
.btn { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; }
.btn:hover { background: #E8B93F; border-color: #E8B93F; color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: rgba(11,27,58,.06); border-color: var(--ink); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* « .panel--dark a » colore tout lien en or : un bouton or y deviendrait illisible */
.panel--dark a.btn,
.panel--dark a.btn:hover { color: var(--ink); }
.cta-band .btn--ghost,
.page-tete .btn--ghost,
.panel--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-band .btn:focus-visible,
.page-tete .btn:focus-visible { outline-color: #fff; }

/* ---------- formulaires ---------- */
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field input[type=date], .field select { min-height: 48px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink); outline: 2px solid var(--gold); outline-offset: 1px;
}
.chip span { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline-color: var(--gold); }
/* l'or marque l'étape où l'on se trouve, comme sur l'accueil */
.progress span.is-done { background: var(--ink); }
.progress span.is-active { background: var(--gold); }

/* ---------- blocs ---------- */
.steps > li::before { font-weight: 700; }
.encadre-cta { background: var(--ink); color: #C6D0E2; border-left-color: var(--gold); }
.encadre-cta h2 { color: #fff; }
.article .encadre-cta p { color: #C6D0E2; }
.cta-band h2 {
  font-family: 'Spectral', Georgia, serif; font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.2rem);
  line-height: 1.04; letter-spacing: -.028em; max-width: 20ch;
}

/* ---------- calculateur : le montant comme une couverture ----------
   Le panneau de résultat est sombre : le montant reste blanc. */
.calc-total {
  font-family: 'Spectral', Georgia, serif; font-weight: 800;
  font-size: clamp(3rem, 1.9rem + 3.6vw, 5.2rem);
  line-height: .92; letter-spacing: -.045em; color: #fff;
}
.calc-devise {
  font-weight: 400; color: var(--gold);
  font-size: .5em; letter-spacing: 0; margin-left: .06em; vertical-align: .55em;
}
.calc-etiquette {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
/* projections : le total atteint, et en or ce qui s'y ajoute */
.calc-proj-titre { margin: 0 0 6px; font-size: .84rem; color: #AEBACE; }
.calc-proj td { vertical-align: top; }
.calc-precision { display: block; margin-top: 1px; font-size: .78rem; color: #8FA0BE; }
.calc-proj td:last-child b { display: block; font-weight: 600; color: #fff; }
.calc-plus { display: block; margin-top: 1px; font-size: .78rem; font-weight: 600; color: var(--gold); }

/* ---------- pages de formulaire : la carte blanche sur le bleu nuit ----------
   Comme sur l'accueil, le formulaire est une carte blanche posée sur le fond
   sombre, qui prolonge la tête de page jusqu'aux bords de l'écran au lieu de
   laisser deux marges grises vides de part et d'autre de la colonne. */
.section--carte { background: var(--ink); color: #C6D0E2; }
.page-tete + .section--carte { padding-top: 0; }
.carte,
.panel.carte {
  background: #fff; color: var(--ink);
  border: 0; border-top: 4px solid var(--gold); border-radius: 2px;
  box-shadow: 0 2px 6px rgba(4,12,30,.18), 0 30px 80px rgba(4,12,30,.46);
  padding: 38px 42px 42px;
}
/* contact : la colonne d'informations reste sur le fond sombre, à gauche */
.section--carte .contact-lines li { border-top-color: rgba(255,255,255,.14); }
.section--carte .contact-lines strong { color: #8FA0BE; }
.section--carte .contact-lines a,
.section--carte .contact-lines span { color: #fff; }
.section--carte .contact-lines a:hover { color: var(--gold); }
.section--carte .note p { color: #C6D0E2; }
.section--carte .note a { color: var(--gold); }
.section--carte a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* à l'intérieur de la carte, les notes, les liens et le focus reprennent les
   couleurs du fond clair (sans quoi l'aide de l'étape 3 du formulaire passait
   en gris clair sur blanc, contraste 1,55) */
.section--carte .carte .note p { color: var(--ink-soft); }
.section--carte .carte .note a { color: var(--accent); }
.carte a:focus-visible { outline-color: var(--accent); }

/* ---------- créneau de rappel : le calendrier (écran 2) ----------
   Deux choix en cartes (« Dès que possible », « Choisir le jour et l'heure ») ;
   le second ouvre un calendrier mensuel et, à côté, les plages du jour
   choisi. Jours proposés en gras sur fond teinté, les autres en gris. */
/* une règle display d'auteur l'emporte sur [hidden] : on le rétablit ici */
.chip[hidden], .plage[hidden], .agenda[hidden], .agenda-liste[hidden],
.agenda-groupe[hidden] { display: none; }

.rappel-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rappel-mode { position: relative; display: block; cursor: pointer; }
.rappel-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.rappel-mode > span {
  position: relative; display: block; height: 100%;
  padding: 14px 16px 15px 48px; background: #fff;
  border: 1px solid var(--line); border-radius: 2px;
  transition: border-color .15s ease, background-color .15s ease;
}
.rappel-mode > span::before {             /* le bouton radio dessiné */
  content: ""; position: absolute; left: 16px; top: 16px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #8A96AB; background: #fff;
}
.rappel-mode b { display: block; color: var(--ink); font-size: .98rem; font-weight: 700; }
.rappel-mode small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }
.rappel-mode:hover > span { border-color: var(--ink); }
.rappel-mode input:checked + span { border-color: var(--ink); background: #F5F7FA; box-shadow: inset 0 0 0 1px var(--ink); }
.rappel-mode input:checked + span::before {
  border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, #fff 4.5px);
}
.rappel-mode input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.agenda {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 2px;
}
.agenda-cal { padding: 16px 18px 18px; border-right: 1px solid var(--line-soft); }
.agenda-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.agenda-mois {
  margin: 0; color: var(--ink);
  font-family: 'Spectral', Georgia, serif; font-size: 1.15rem; font-weight: 700;
}
.agenda-nav {
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 2px;
  font-size: 1.35rem; line-height: 1;
}
.agenda-nav:hover:not(:disabled) { border-color: var(--ink); }
/* pas de mois avant ou après : la flèche disparaît, sa place reste */
.agenda-nav:disabled { visibility: hidden; }
.agenda-semaine, .agenda-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.agenda-semaine span {
  padding: 4px 0 6px; text-align: center; color: var(--ink-soft);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.agenda-grille.est-masquee { display: none; }
.agenda-j { position: relative; display: block; }
.agenda-j input { position: absolute; opacity: 0; width: 0; height: 0; }
.agenda-j > span, span.agenda-j {
  display: grid; place-items: center; height: 40px; border-radius: 2px;
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
label.agenda-j > span {
  cursor: pointer; color: var(--ink); font-weight: 700;
  background: #EEF2F7; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
label.agenda-j:hover > span { border-color: var(--ink); }
label.agenda-j input:checked + span { background: var(--ink); color: #fff; }
label.agenda-j input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
span.agenda-j--off { color: var(--ink-soft); font-weight: 400; }
/* journée entièrement réservée : il n'y reste aucune demi-heure à prendre */
label.agenda-j--complet > span {
  cursor: default; background: none; color: var(--ink-soft); font-weight: 400;
  text-decoration: line-through; text-decoration-color: rgba(15, 23, 42, .4);
}
label.agenda-j--complet:hover > span { border-color: transparent; }
.est-aujourdhui > span, span.est-aujourdhui { box-shadow: inset 0 -3px 0 var(--gold); }

.agenda-plages { padding: 16px 18px 18px; }
.agenda-jour { margin: 6px 0 12px; color: var(--ink); font-weight: 700; }
.agenda-groupe + .agenda-groupe { margin-top: 12px; }
.agenda-moment {
  margin: 0 0 6px; color: var(--ink-soft);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.agenda-heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.plage { position: relative; display: block; }
.plage input { position: absolute; opacity: 0; width: 0; height: 0; }
.plage > span {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  cursor: pointer; color: var(--ink); font-size: .9rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.plage:hover > span { border-color: var(--ink); }
.plage input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.plage input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.agenda-recap {
  margin: 12px 0 0; padding: 10px 14px; background: #F7F9FB;
  border-left: 3px solid var(--gold); color: var(--ink); font-size: .95rem;
}
[data-groupe].est-invalide { outline: 2px solid var(--erreur); outline-offset: 4px; border-radius: 2px; }
[data-groupe].a-signaler { animation: signal-champ 1.2s ease-out; }

@media (max-width: 620px) {
  .rappel-modes, .agenda { grid-template-columns: 1fr; }
  .agenda-cal { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-inline: 12px; }
  .agenda-plages { padding-inline: 12px; }
}

/* ---------- champ manquant ----------
   form.js amène le visiteur au champ : il s'allume une seconde (rouge puis or,
   les couleurs de l'erreur et de la marque), puis garde un contour rouge et un
   message dessous jusqu'à ce qu'il soit rempli. */
@keyframes signal-champ {
  0%   { box-shadow: 0 0 0 0 rgba(179,38,30,0); }
  25%  { box-shadow: 0 0 0 4px rgba(179,38,30,.35), 0 0 26px 8px rgba(216,167,42,.6); }
  100% { box-shadow: 0 0 0 0 rgba(179,38,30,0), 0 0 0 0 rgba(216,167,42,0); }
}
.field input.est-invalide, .field select.est-invalide, .field textarea.est-invalide { border-color: var(--erreur); }
/* même avec le focus (qui passe sinon en or) : le rouge reste lisible */
.field input.est-invalide:focus, .field select.est-invalide:focus,
.field textarea.est-invalide:focus { border-color: var(--erreur); outline-color: var(--erreur); }
.chips.est-invalide .chip span { border-color: var(--erreur); }
.check-grid.est-invalide, label.check.est-invalide, #primes-detail.est-invalide {
  outline: 2px solid var(--erreur); outline-offset: 6px; border-radius: 2px;
}
input.a-signaler, select.a-signaler, textarea.a-signaler, label.check.a-signaler,
.check-grid.a-signaler, #primes-detail.a-signaler, .chips.a-signaler .chip span {
  animation: signal-champ 1.2s ease-out;
}
.champ-erreur { margin: 8px 0 0; color: var(--erreur); font-size: .88rem; font-weight: 600; line-height: 1.4; }

/* réponse libre sous une liste de choix (« Autre ») */
.field .autre-texte { display: block; width: 100%; margin-top: 10px; }
.field .autre-texte[hidden] { display: none; }

/* pied de page : « Gestion des cookies » a l'allure d'un lien */
.lien-cookies {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #DCE3EE; font: inherit; text-align: left;
}
.lien-cookies:hover { text-decoration: underline; }
.lien-cookies:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lien-cookies[hidden] { display: none; }
/* formulaire et confirmation : le bandeau d'appel collant n'y a pas de sens */
body.sans-cta .cta-sticky { display: none; }
@media (max-width: 760px) { body.sans-cta { padding-bottom: 0; } }
/* politique de confidentialité : tableau des cookies */
.tableau-defilant { overflow-x: auto; margin: 0 0 1em; }
.tableau-cookies { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau-cookies th, .tableau-cookies td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.tableau-cookies th { background: var(--band); color: var(--ink); }

/* formulaire : les sous-parties de l'écran 3 sont des h2 (hiérarchie des
   titres), avec l'allure des h3 */
h2.etape-section { font-family: 'Libre Franklin', sans-serif; font-size: 1.12rem; font-weight: 600; }

/* primes : le rappel de la distinction, au-dessus des deux champs */
.note-primes { margin: 0 0 16px; padding: 10px 14px; background: #F7F9FB;
  border-left: 3px solid var(--gold); color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

/* ---------- confirmation : la suite, puis les actions ----------
   Trois étapes numérotées ; deux boutons sur une ligne ; en pied de carte,
   l'adresse de contact en gras et le retour à l'accueil, séparés du reste. */
.suite { list-style: none; margin: 6px 0 36px; padding: 0; counter-reset: suite; }
.suite li {
  counter-increment: suite;
  display: grid; grid-template-columns: 34px 1fr; column-gap: 16px;
  padding: 15px 0; border-top: 1px solid var(--line-soft);
}
.suite li:last-child { border-bottom: 1px solid var(--line-soft); }
.suite li::before {
  content: counter(suite); grid-row: span 2;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  font-family: 'Spectral', Georgia, serif; font-weight: 700; font-size: 1rem;
}
.suite b { color: var(--ink); font-weight: 600; }
.suite span { margin-top: 3px; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.carte-pied {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px 32px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-soft);
}
.carte-pied p { flex: 1 1 340px; margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }
.carte-pied p a { color: var(--accent); }
.carte-pied p strong { font-weight: 700; }
.lien-retour {
  flex: none; color: var(--ink); font-size: .95rem; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.lien-retour::before { content: "← "; }
.lien-retour:hover { border-bottom-color: var(--ink); }
@media (max-width: 620px) {
  .actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---------- photos de fond : un homme à gauche, une femme à droite ----------
   Dans les marges de la zone bleu nuit, deux photos de métier servent de fond
   et se fondent dans le bleu vers le contenu. Elles s'arrêtent au bord de la
   colonne (810 px sur les formulaires, 1 120 px ailleurs) : aucun texte n'est
   posé sur une photo. Décoratives (aria-hidden, alt vide) ; affichées quand la
   marge est assez large, sinon ni visibles ni téléchargées. */
.scene { position: relative; isolation: isolate; background: var(--ink); }
.scene > .page-tete,
.scene > .section--carte { background: transparent; }
.hero.hero-edito { isolation: isolate; }

.fond {
  --colonne: 1120px;
  display: none; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  clip-path: inset(0);        /* rogne sans créer de conteneur de défilement */
}
.fond--810 { --colonne: 810px; }
.fond-cadre { position: absolute; inset: 0; }
/* dans une scène (tête de page et formulaire), les photos restent à l'écran
   pendant qu'on remplit la carte, sous l'en-tête collant */
.scene .fond-cadre {
  position: sticky; inset: auto; top: 75px;
  height: calc(100vh - 75px); max-height: 100%;
}
.fond-photo {
  position: absolute; top: 0; bottom: 0; overflow: hidden;
  width: calc(50% - var(--colonne) / 2);
}
.fond-photo--g { left: 0; }
.fond-photo--d { right: 0; }
.fond-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) contrast(1.06) brightness(.94);
}
/* les paires suivantes, une par écran du formulaire, montrées en fondu */
.fond-photo .fond-suite { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.fond-photo .fond-suite.est-visible { opacity: 1; }
/* le visage est près du bord de l'écran : on garde ce bord, on rogne l'autre.
   --decale pousse la photo vers l'extérieur quand la marge est étroite. */
.fond { --decale: 0px; }
.fond-photo--g img { object-position: calc(0px - var(--decale)) 22%; }
.fond-photo--d img { object-position: calc(100% + var(--decale)) 22%; }
/* le traitement des photos du site : voile bleu nuit en multiplication */
.fond-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--ink); mix-blend-mode: multiply; opacity: .36;
}
/* puis le fondu : vers le haut, vers le bas, et vers le contenu */
.fond-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, var(--ink), rgba(11,27,58,0) 9%, rgba(11,27,58,0) 78%, var(--ink)),
    linear-gradient(to left, var(--ink), rgba(11,27,58,.55) 18%, rgba(11,27,58,.1) 48%, rgba(11,27,58,0));
}
.fond-photo--d::after {
  background:
    linear-gradient(to bottom, var(--ink), rgba(11,27,58,0) 9%, rgba(11,27,58,0) 78%, var(--ink)),
    linear-gradient(to right, var(--ink), rgba(11,27,58,.55) 18%, rgba(11,27,58,.1) 48%, rgba(11,27,58,0));
}
/* marge d'au moins 235 px à côté d'une colonne de 810, 160 px à côté de 1 120 */
@media (min-width: 1280px) { .fond--810 { display: block; } }
@media (min-width: 1440px) { .fond { display: block; } }
/* à côté de 1 120 px, jusqu'à 1 680 px d'écran, la marge fait 160 à 280 px :
   sans décalage, on n'y verrait que l'épaule */
@media (max-width: 1679px) { .fond:not(.fond--810) { --decale: 70px; } }

@media (max-width: 620px) {
  .page-tete { padding-block: 30px 44px; }
  .page-tete .lead { font-size: 1.04rem; }
  .section--carte > .wrap { padding-inline: 14px; }
  .carte, .panel.carte { padding: 26px 20px 30px; }
}

/* =====================================================================
   Accueil — ce qui n'existe que sur la page d'accueil : le héros avec le
   formulaire de démarrage, la bande des faits, les secteurs numérotés,
   l'apparition au défilement. Le reste vient du système commun.
   ===================================================================== */

.hero-edito a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- héros : l'offre à gauche, le formulaire à droite ---------- */
.hero.hero-edito {
  background: var(--ink); color: #fff;
  padding-block: 56px 66px; position: relative; overflow: hidden;
}
.hero-edito::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 70% at 6% 0%, rgba(10,63,168,.34), transparent 62%);
}
.hero-edito .wrap { position: relative; }

.accroche {
  display: grid; grid-template-columns: minmax(0, 1fr) 468px; column-gap: 64px;
  grid-template-areas: "texte form" "etapes form" "liens form";
  grid-template-rows: auto auto 1fr; align-items: start;
}
.accroche-texte { grid-area: texte; padding-top: 8px; }
.accroche .quickstart { grid-area: form; }
.accroche-etapes { grid-area: etapes; }
.accroche-liens { grid-area: liens; }

/* le badge : trois promesses, lues avant le titre */
.accroche-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px;
  padding: 7px 14px 7px 12px; border: 1px solid rgba(216,167,42,.45);
  font-size: .87rem; font-weight: 600; letter-spacing: .02em; color: #F1D58E;
}
.accroche-badge span {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  animation: pouls 2.4s ease-out infinite;
}
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(216,167,42,.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(216,167,42,0); }
}

/* le titre : la question du visiteur, puis la réponse en italique or */
.hero-edito h1 {
  margin: 0 0 22px; color: #fff;
  font-family: 'Spectral', Georgia, serif; font-weight: 800;
  font-size: clamp(2.2rem, 0.9rem + 2.6vw, 3.45rem);
  line-height: 1.05; letter-spacing: -.03em; text-wrap: balance;
}
.hero-edito h1 em {
  display: block; margin-top: .08em;
  font-style: italic; font-weight: 400; color: var(--gold);
}
.hero-edito .lead { margin: 0; font-size: 1.14rem; line-height: 1.62; color: #D5DDEA; max-width: 36em; }

/* les trois étapes : le mécanisme en un coup d'œil */
.accroche-etapes {
  list-style: none; margin: 38px 0 0; padding: 0; counter-reset: etape; max-width: 36em;
}
.accroche-etapes li {
  counter-increment: etape;
  display: grid; grid-template-columns: 46px 1fr; column-gap: 14px;
  padding: 15px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.accroche-etapes li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.accroche-etapes li::before {
  content: counter(etape, decimal-leading-zero); grid-row: span 2;
  font-family: 'Spectral', Georgia, serif; font-weight: 700;
  font-size: 1.35rem; line-height: 1.15; color: var(--gold);
}
.accroche-etapes b { font-weight: 600; color: #fff; font-size: 1rem; }
.accroche-etapes span { margin-top: 2px; font-size: .88rem; color: #8FA0BE; }

.accroche-liens { margin: 22px 0 0; display: flex; gap: 26px; flex-wrap: wrap; font-size: .92rem; }
.accroche-liens a {
  color: #C6D0E2; text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid rgba(198,208,226,.35);
}
.accroche-liens a:hover { color: #fff; border-bottom-color: var(--gold); }
/* le guide gratuit : un peu plus visible que les autres liens, sans devenir un bouton */
.accroche-liens a.lien-guide { color: #E6BE55; font-weight: 600; border-bottom-color: rgba(216,167,42,.55);
  display: inline-flex; align-items: center; gap: 7px; }
.accroche-liens a.lien-guide:hover { color: #F3D27C; border-bottom-color: var(--gold); }
.guide-accroche { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; flex-basis: 100%; }
.guide-detail { font-size: .82rem; line-height: 1.45; color: #A9B6CC; max-width: 46ch; }

/* ---------- le formulaire de démarrage : la fonction principale ---------- */
body.accueil .quickstart {
  position: relative; background: #fff; color: var(--ink);
  border: 0; border-top: 4px solid var(--gold);
  box-shadow: 0 2px 6px rgba(4,12,30,.18), 0 30px 80px rgba(4,12,30,.46);
}
body.accueil .quickstart-head { padding: 26px 30px 6px; }
.qs-progression { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }
.qs-progression span { height: 4px; background: var(--line-soft); }
.qs-progression span.est-fait { background: var(--gold); }
body.accueil .quickstart-head h2 {
  margin: 0 0 6px; font-family: 'Spectral', Georgia, serif; font-weight: 700;
  font-size: 1.65rem; letter-spacing: -.015em;
}
body.accueil .quickstart-head p { font-size: .88rem; color: var(--ink-soft); }
body.accueil .quickstart-body { padding: 18px 30px 26px; }
body.accueil .quickstart .field { margin-bottom: 18px; }
body.accueil .quickstart .field > label,
body.accueil .quickstart .field > .label {
  display: block; margin-bottom: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}

/* secteurs : une grille régulière se balaie plus vite que des pastilles en vrac */
body.accueil .quickstart .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* l'étiquette s'étire à la hauteur de la ligne ; la case dessinée doit suivre,
   sinon « Agroalimentaire » paraît plus courte que sa voisine sur deux lignes */
body.accueil .quickstart .chip { display: flex; }
body.accueil .quickstart .chip span {
  flex: 1; display: flex; align-items: center; min-height: 44px; padding: 8px 12px;
  font-size: .86rem; line-height: 1.25; border-color: var(--line);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.accueil .quickstart .chip span:hover { border-color: var(--ink); }
body.accueil .quickstart .chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }

body.accueil .quickstart input[type=text] {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
}
body.accueil .quickstart input[type=text]:focus {
  border-color: var(--ink); outline: 2px solid var(--gold); outline-offset: 1px;
}

/* nombre de personnes : un pas-à-pas plutôt qu'un champ numérique nu */
.pas {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px;
  border: 1px solid var(--line); border-radius: 2px;
}
.pas input[type=number] {
  width: 100%; min-height: 48px; margin: 0; padding: 0 8px;
  border: 0; border-inline: 1px solid var(--line); border-radius: 0; background: #fff;
  text-align: center; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.pas input[type=number]::-webkit-outer-spin-button,
.pas input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pas-bouton {
  border: 0; background: #F7F9FB; color: var(--ink); cursor: pointer;
  font: 500 1.35rem/1 'Libre Franklin', system-ui, sans-serif;
}
.pas-bouton:hover { background: var(--band); }
.pas-bouton:focus-visible,
.pas input[type=number]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* l'appel à l'action : or, franc, avec une flèche */
body.accueil .quickstart .qs-envoi {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 6px;
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(216,167,42,.32);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.accueil .quickstart .qs-envoi:hover {
  background: #E8B93F; border-color: #E8B93F; transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(216,167,42,.42);
}
body.accueil .quickstart .qs-envoi svg { flex: none; transition: transform .15s ease; }
body.accueil .quickstart .qs-envoi:hover svg { transform: translateX(3px); }
body.accueil .quickstart .qs-envoi:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.qs-rassure { margin: 12px 0 0; text-align: center; font-size: .8rem; color: var(--ink-soft); }
body.accueil .quickstart-foot { background: #F7F9FB; border-top: 1px solid var(--line-soft); padding: 18px 30px 22px; }
body.accueil .quickstart-foot li::before { color: var(--gold); }

/* ---------- bande des faits ---------- */
.faits-bande { background: var(--paper); border-bottom: 1px solid var(--line); }
.faits-bande .wrap {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px; padding-block: 46px 50px;
}
/* enfants directs seulement : « .faits-bande div » attrapait aussi le .wrap */
.faits-bande .wrap > div { border-top: 2px solid var(--ink); padding-top: 16px; }
.faits-bande strong {
  display: block; margin-bottom: 8px; color: var(--ink);
  font-family: 'Spectral', Georgia, serif; font-weight: 700;
  font-size: 1.55rem; line-height: 1.1; letter-spacing: -.02em;
}
.faits-bande span { display: block; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- secteurs numérotés ---------- */
body.accueil .figures { counter-reset: secteur; }
body.accueil .figure { counter-increment: secteur; }
body.accueil .figure h3 {
  font-family: 'Spectral', Georgia, serif; font-weight: 700;
  font-size: 1.28rem; letter-spacing: -.015em;
}
body.accueil .figure h3::before {
  content: counter(secteur, decimal-leading-zero);
  display: block; margin-bottom: 6px;
  font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: var(--gold);
}

/* ---------- apparition au défilement (posée par le script, section par
   section) : le premier écran n'est jamais masqué, sinon le plus grand
   affichage attendrait le script ---------- */
body.accueil .wrap.a-reveler {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
body.accueil .wrap.a-reveler.est-vu { opacity: 1; transform: none; }

/* ---------- petits écrans ---------- */
@media (max-width: 1080px) {
  .accroche { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 40px; }
}
@media (max-width: 920px) {
  .accroche {
    grid-template-columns: 1fr; row-gap: 30px;
    grid-template-areas: "texte" "form" "etapes" "liens";
  }
  .accroche-etapes, .accroche-liens { margin-top: 0; }
  .faits-bande .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .hero.hero-edito { padding-block: 34px 44px; }
  .accroche-badge { font-size: .74rem; margin-bottom: 20px; }
  .hero-edito .lead { font-size: 1.04rem; }
  body.accueil .quickstart-head,
  body.accueil .quickstart-body,
  body.accueil .quickstart-foot { padding-inline: 20px; }
  .faits-bande .wrap { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- formulaire : aide sous une rangée, reprise, récapitulatif ---------- */
/* un message d'erreur sous le SIRET ne doit pas faire descendre la raison sociale */
.field-row--haut { align-items: start; }
.aide-champ { margin: 8px 0 22px; font-size: .86rem; color: var(--ink-soft); line-height: 1.5; }
.aide-champ a { color: var(--accent); }
.brouillon {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: -18px 0 26px; padding: 10px 14px; font-size: .9rem; color: var(--ink);
  background: #F7F9FB; border-left: 3px solid var(--gold);
}
.brouillon[hidden] { display: none; }
.lien-bouton {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.lien-bouton:hover { color: var(--accent-dark); }
.lien-bouton:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.recap-pli { margin: 30px 0 18px; border: 1px solid var(--line); background: var(--surface); }
.recap-pli > summary {
  cursor: pointer; padding: 14px 18px 14px 40px; font-weight: 600; font-size: .95rem;
  color: var(--ink); list-style: none; display: block; position: relative;
}
.recap-pli > summary::-webkit-details-marker { display: none; }
.recap-pli > summary::before {
  content: ""; position: absolute; left: 18px; top: 21px; width: 7px; height: 7px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.recap-pli[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.recap-pli > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#recap-compte { font-weight: 400; color: var(--ink-soft); font-size: .88rem; }
.recap-pli .recap { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---------- listes déroulantes ----------
   Une ligne par question ; le téléphone ouvre son propre sélecteur. La flèche
   est dessinée ici : l'apparence native diffère d'un système à l'autre. */
.select { position: relative; }
.select::after, .multi-choix::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-75%) rotate(45deg); pointer-events: none;
  transition: transform .15s ease;
}
.field .select select {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px;
  padding-right: 44px; cursor: pointer; text-overflow: ellipsis; line-height: 1.3;
}
.field .select select:hover { border-color: var(--ink); }
/* « Choisissez… » se lit comme une invite, pas comme une réponse */
.field .select select:has(> option[value=""]:checked) { color: var(--ink-soft); }
.field .select select option { color: var(--ink); }
body.accueil .quickstart .select select { background: #fff; font-size: 1rem; }

/* plusieurs réponses : la ligne résumé, puis la liste des cases par-dessus */
.multi { position: relative; }
.multi > summary { list-style: none; }
.multi > summary::-webkit-details-marker { display: none; }
.multi-choix {
  display: block; position: relative; cursor: pointer; min-height: 48px;
  padding: 12px 44px 12px 13px; font-size: .96rem; line-height: 1.4; color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  user-select: none;
}
.multi-choix::after { top: 24px; }
.multi[open] > .multi-choix::after { transform: translateY(-25%) rotate(-135deg); }
.multi-choix:hover, .multi[open] > .multi-choix { border-color: var(--ink); }
.multi-choix:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.multi-choix.est-vide .multi-valeur { color: var(--ink-soft); }
.multi-panneau {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 14px 36px rgba(11,27,58,.18); padding: 6px 16px 16px;
  max-height: min(64vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
.multi-panneau .check-grid { gap: 0 24px; }
.multi-panneau .check {
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.multi-panneau .check input { margin: 0; width: 19px; height: 19px; accent-color: var(--ink); }
.multi-ok { width: 100%; margin-top: 14px; }
.multi-choix.est-invalide { border-color: var(--erreur); }
.multi-choix.a-signaler { animation: signal-champ 1.2s ease-out; }

/* tableau comparatif : sur téléphone, les cellules s'empilent ; chacune rappelle
   la colonne à laquelle elle appartient, l'en-tête disparaît */
@media (max-width: 620px) {
  table.grid--comparatif thead { display: none; }
  table.grid--comparatif tbody th { background: var(--band); }
  table.grid--comparatif td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-soft);
  }
}

/* tableau à deux colonnes (libellé, valeur) : sur téléphone, l'en-tête disparaît et
   le libellé de chaque ligne prend le fond d'en-tête */
@media (max-width: 620px) {
  table.grid--lignes thead { display: none; }
  table.grid--lignes td:first-child { background: var(--band); font-weight: 600; border-bottom: 0; }
}