/* ==========================================================================
   Feuille de style du site
   --------------------------------------------------------------------------
   NOTE DE CONFORMITE : la palette est volontairement choisie pour ne PAS
   evoquer une administration (pas de bleu marine institutionnel, pas de
   bandeau tricolore, pas de sceau, pas de serif "officielle"). Ne remplacez
   pas ces couleurs par une identite qui imiterait un portail gouvernemental.
   ========================================================================== */

:root {
  --brand:        #0f766e;
  --brand-dark:   #115e56;
  --brand-light:  #ccfbf1;
  --brand-tint:   #f0fdfa;

  --warn:         #b45309;
  --warn-bg:      #fffbeb;
  --warn-border:  #fcd34d;

  --ink:          #1c1917;
  --ink-soft:     #44403c;
  --ink-mute:     #78716c;
  --line:         #e7e5e4;
  --line-soft:    #f5f5f4;
  --bg:           #ffffff;
  --bg-alt:       #fafaf9;

  --ok:           #15803d;
  --ok-bg:        #f0fdf4;
  --err:          #b91c1c;
  --err-bg:       #fef2f2;

  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 1px 2px rgba(28,25,23,.06), 0 8px 24px -12px rgba(28,25,23,.18);
  --wrap:         1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
/* L'attribut [hidden] doit l'emporter sur les display: des composants
   (.btn, .form-step...), sinon le pilotage du formulaire par JS est sans effet. */
[hidden] { display: none !important; }
a { color: var(--brand-dark); text-underline-offset: 2px; }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); font-weight: 750; }
h3 { font-size: 1.16rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.muted { color: var(--ink-mute); }
.small { font-size: .9rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* --- Bandeau de demonstration --------------------------------------------
   N'apparait que lorsque le site est compile avec une config de demonstration
   (cle DEMO_BANNER renseignee). Absent du site reel. */
.demo-ribbon {
  background: repeating-linear-gradient(45deg, #7c2d12, #7c2d12 12px, #9a3412 12px, #9a3412 24px);
  color: #fff; text-align: center; padding: 9px 20px;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.demo-ribbon span { background: rgba(0,0,0,.35); padding: 4px 12px; border-radius: 100px; }

/* --- Bandeau de non-affiliation ------------------------------------------ */
/* Registre informatif, pas alarmiste : fond ambre tres clair, texte encre.
   Le contraste (env. 15:1) reste superieur a l'ancien ambre-sur-noir, donc la
   mention est plus lisible tout en etant beaucoup moins agressive.
   NE PAS reduire davantage : ni police plus petite, ni contraste plus faible,
   ni bouton de fermeture. Une mention jugee dissimulee fait echouer la
   certification GODOS, ce qui coute la totalite du trafic publicitaire. */
.disclaimer-bar {
  background: var(--warn-bg); color: var(--ink);
  border-bottom: 1px solid var(--warn-border);
  font-size: .86rem; line-height: 1.45;
}
.disclaimer-bar__inner {
  display: flex; gap: 9px; align-items: center;
  padding-block: 8px;
}
.disclaimer-bar__icon { width: 16px; height: 16px; flex: none; color: var(--warn); }
.disclaimer-bar p { margin: 0; }
.disclaimer-bar strong { color: var(--warn); font-weight: 700; }
.disclaimer-bar a { color: var(--ink); font-weight: 600; }
.disclaimer-bar a:hover { color: var(--warn); }

/* --- En-tete -------------------------------------------------------------- */
.site-header {
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 76px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-right: auto; }
.brand__mark svg { width: 38px; height: 38px; display: block; }
.brand__mark rect { fill: var(--brand); }
.brand__mark path { fill: #fff; }
.brand__text  { display: flex; flex-direction: column; }
.brand__name  { font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.brand__tag   { font-size: .72rem; color: var(--ink-mute); letter-spacing: .01em; }

.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: block; padding: 8px 11px; border-radius: 8px;
  text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 550;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--brand-dark); background: var(--brand-tint); }
.nav__cta a {
  background: var(--brand); color: #fff; padding: 10px 17px; font-weight: 650;
}
.nav__cta a:hover { background: var(--brand-dark); color: #fff; }
.nav-toggle { display: none; }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 650; font-size: 1rem; text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--bg-alt); border-color: var(--ink-mute); color: var(--ink); }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Sections ------------------------------------------------------------- */
.section { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section__head { max-width: 760px; margin-bottom: 40px; }
.section__head p { color: var(--ink-soft); font-size: 1.06rem; }
.eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand-dark); background: var(--brand-tint);
  padding: 5px 11px; border-radius: 100px; margin-bottom: 14px;
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(44px, 6vw, 76px); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.hero__lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 56ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero__note { margin-top: 18px; font-size: .88rem; color: var(--ink-mute); max-width: 54ch; }

.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow);
}
.price-card h2 { font-size: 1.1rem; margin-bottom: 16px; }
.price-line { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.price-line span:first-child { color: var(--ink-soft); }
.price-line strong { white-space: nowrap; }
.price-line--total { border-bottom: 0; padding-top: 15px; font-size: 1.12rem; font-weight: 750; }
.price-card__foot { margin: 14px 0 0; font-size: .82rem; color: var(--ink-mute); }

/* --- Grilles / cartes ----------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 14px;
  background: var(--brand-tint); color: var(--brand-dark); font-weight: 800; font-size: .95rem;
}

/* --- Encarts d'avertissement --------------------------------------------- */
.callout {
  border: 1px solid var(--warn-border); background: var(--warn-bg);
  border-left: 4px solid var(--warn); border-radius: var(--radius);
  padding: 18px 22px; margin-block: 26px;
}
.callout h3 { color: var(--warn); font-size: 1rem; margin-bottom: .35em; }
.callout p:last-child { margin-bottom: 0; }
.callout--info { border-color: var(--line); border-left-color: var(--brand); background: var(--brand-tint); }
.callout--info h3 { color: var(--brand-dark); }
.callout--ok { border-color: #bbf7d0; border-left-color: var(--ok); background: var(--ok-bg); }
.callout--ok h3 { color: var(--ok); }

/* --- Tableaux ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-block: 24px; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
table.data th, table.data td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--bg-alt); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { font-weight: 750; background: var(--brand-tint); border-bottom: 0; }

/* --- Contenu long (pages legales) ---------------------------------------- */
.prose { max-width: 76ch; }
.prose h2 { margin-top: 2em; padding-top: .3em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose table { font-size: .93rem; }
.legal-meta {
  font-size: .87rem; color: var(--ink-mute); border-left: 3px solid var(--line);
  padding-left: 14px; margin-bottom: 32px;
}

/* --- FAQ ------------------------------------------------------------------ */
details.faq {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 20px; margin-bottom: 12px; background: #fff;
}
details.faq summary {
  cursor: pointer; padding: 17px 0; font-weight: 650; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ink-mute); font-weight: 400; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq[open] summary { border-bottom: 1px solid var(--line-soft); }
details.faq .faq__body { padding: 16px 0 6px; }
details.faq .faq__body p:last-child { margin-bottom: 0; }

/* --- Formulaire ----------------------------------------------------------- */
.form-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.form-aside { position: sticky; top: 100px; display: grid; gap: 18px; }

.steps { display: flex; gap: 6px; list-style: none; margin: 0 0 32px; padding: 0; flex-wrap: wrap; }
.steps li {
  flex: 1 1 130px; padding: 10px 12px; border-radius: 8px; background: var(--line-soft);
  font-size: .82rem; font-weight: 600; color: var(--ink-mute);
  border-bottom: 3px solid var(--line);
}
.steps li[aria-current="step"] { background: var(--brand-tint); color: var(--brand-dark); border-bottom-color: var(--brand); }
.steps li.is-done { color: var(--ok); border-bottom-color: var(--ok); background: var(--ok-bg); }
.steps .steps__n { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }

fieldset { border: 0; padding: 0; margin: 0 0 30px; }
legend { font-size: 1.28rem; font-weight: 750; letter-spacing: -.015em; padding: 0; margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-mute); margin-top: -2px; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: 2px solid var(--brand-light); outline-offset: 0; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
.field .error { display: none; color: var(--err); font-size: .84rem; margin-top: 5px; font-weight: 550; }
.field .error.is-shown { display: block; }
.required { color: var(--err); }

.check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; font-size: .93rem; }
.check input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--brand); }
.check label { font-weight: 400; line-height: 1.55; }

.consent-block {
  border: 2px solid var(--warn-border); background: var(--warn-bg);
  border-radius: var(--radius); padding: 20px 22px; margin-block: 28px;
}
.consent-block h3 { color: var(--warn); font-size: 1.02rem; }

.form-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

.review dl { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0; font-size: .94rem; }
.review dt { color: var(--ink-mute); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.review dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-weight: 550; }

.form-step[hidden] { display: none; }

/* --- Suivi ---------------------------------------------------------------- */
.track-panel { max-width: 620px; }
.status-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; background: #fff; box-shadow: var(--shadow); }
.status-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px;
  font-size: .84rem; font-weight: 700; letter-spacing: .01em;
}
.status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-badge--wait { background: var(--warn-bg); color: var(--warn); }
.status-badge--ok   { background: var(--ok-bg);   color: var(--ok); }
.status-badge--info { background: var(--brand-tint); color: var(--brand-dark); }

.timeline { list-style: none; margin: 26px 0 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 24px 34px; border-left: 2px solid var(--line); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line);
}
.timeline li.is-done::before { background: var(--ok); border-color: var(--ok); }
.timeline li.is-current::before { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.timeline h4 { margin: 0 0 3px; font-size: .98rem; }
.timeline p { margin: 0; font-size: .88rem; color: var(--ink-mute); }

/* --- Pied de page --------------------------------------------------------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: 52px 34px; margin-top: 64px; font-size: .93rem; }
.disclosure {
  background: #fff; border: 1px solid var(--warn-border); border-top: 4px solid var(--warn);
  border-radius: var(--radius-lg); padding: 28px; margin-bottom: 44px;
}
.disclosure h2 { font-size: 1.16rem; color: var(--warn); margin-bottom: 18px; }
.disclosure__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; }
.disclosure h3 { font-size: .95rem; margin-bottom: .3em; }
.disclosure p { font-size: .89rem; color: var(--ink-soft); margin: 0; }

.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-col h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); margin-bottom: 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--brand-dark); text-decoration: underline; }
.footer-identity { font-style: normal; font-size: .87rem; color: var(--ink-soft); line-height: 1.75; }
.footer-bottom { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: .83rem; color: var(--ink-mute); }

/* --- Divers --------------------------------------------------------------- */
.trust-row { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.trust-item { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); max-width: 250px; }
.trust-item svg { width: 19px; height: 19px; flex: none; color: var(--brand); margin-top: 2px; }
.cta-band { background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: 38px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--brand-light); max-width: 60ch; margin-inline: auto; }
.cta-band .btn--ghost { background: #fff; border-color: #fff; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__grid, .form-layout { grid-template-columns: 1fr; }
  .form-aside { position: static; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-toggle {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: 8px; width: 44px; height: 40px; cursor: pointer; position: relative;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 12px; width: 20px; height: 2px;
    background: var(--ink); border-radius: 2px;
  }
  .nav-toggle__bars { top: 19px; }
  .nav-toggle__bars::before { top: -6px; left: 0; }
  .nav-toggle__bars::after  { top: 6px;  left: 0; }
  .nav { flex-basis: 100%; display: none; padding-bottom: 14px; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 12px 13px; }
  .nav__cta a { text-align: center; margin-top: 8px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .grid--3, .grid--2, .grid--4, .field-row, .disclosure__grid { grid-template-columns: 1fr; }
  .review dl { grid-template-columns: 1fr; }
  .review dt { padding-bottom: 0; border-bottom: 0; }
  .review dd { padding-top: 2px; }
  .footer-cols { grid-template-columns: 1fr; }
  .form-nav { flex-direction: column-reverse; }
  .form-nav .btn { width: 100%; }
}

@media print { .disclaimer-bar, .site-header, .nav { position: static; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }