/* ==========================================================================
   STV — feuille de style unique.
   Charte volontairement pauvre : deux couleurs, une graisse de titre, une
   epaisseur de filet. Tout l'effet vient de l'espace blanc et de la taille
   du texte. Pas d'ombre, pas de degrade, pas d'angle arrondi sauf boutons.
   ========================================================================== */

:root {
  --bg:        #ffffff;
  --bg-alt:    #f6f6f6;
  --ink:       #0a0a0a;
  --ink-soft:  #6e6e73;
  --line:      #e3e3e3;
  --line-firm: #cfcfcf;
  --invert-bg: #0a0a0a;
  --invert-ink:#ffffff;

  --gutter: 24px;
  --maxw: 1140px;
  --sec-y: clamp(84px, 11vw, 168px);

  --ease: cubic-bezier(.22, .61, .36, 1);

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

/* Mode sombre : meme charte, inversee. Rien d'autre ne change. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0a0a0a;
    --bg-alt:    #141414;
    --ink:       #f5f5f7;
    --ink-soft:  #8e8e93;
    --line:      #262626;
    --line-firm: #3a3a3a;
    --invert-bg: #f5f5f7;
    --invert-ink:#0a0a0a;
  }
}
:root[data-theme="dark"] {
  --bg:        #0a0a0a;
  --bg-alt:    #141414;
  --ink:       #f5f5f7;
  --ink-soft:  #8e8e93;
  --line:      #262626;
  --line-firm: #3a3a3a;
  --invert-bg: #f5f5f7;
  --invert-ink:#0a0a0a;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
}
.skip:focus { left: 12px; top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 780px; }

/* --------------------------------------------------------------------------
   En-tete : filet unique, fond translucide au defilement.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); }

.nav {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.mark {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.12em;
  flex: none;
}

.nav-links {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.nav-links a { transition: color .2s var(--ease); }
.nav-links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border: 1px solid var(--invert-bg);
  border-radius: 999px;
  background: var(--invert-bg);
  color: var(--invert-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { opacity: .82; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .4; cursor: default; }

.btn-sm { padding: 9px 20px; font-size: 14.5px; flex: none; }
.btn-wide { width: 100%; margin-top: 10px; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-firm);
}
.btn-ghost:hover { border-color: var(--ink); opacity: 1; }

.link-arrow {
  font-size: 16px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-firm);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--ink); border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section { padding: var(--sec-y) 0; border-top: 1px solid var(--line); }
.section.alt { background: var(--bg-alt); }

.sec-head { margin-bottom: clamp(48px, 7vw, 92px); }
.sec-head h2 {
  margin-top: 18px;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
}
.sec-note {
  margin-top: 22px;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 17.5px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(72px, 13vh, 150px) 0 clamp(72px, 12vh, 140px);
  display: flex;
  align-items: center;
  min-height: min(84svh, 860px);
}
.hero h1 {
  margin-top: 22px;
  font-size: clamp(3rem, 10.4vw, 7.4rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.lede {
  margin-top: 30px;
  max-width: 46ch;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
  letter-spacing: -0.016em;
}
.lede.sm { font-size: 1.1rem; max-width: 42ch; }

.hero-actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */

.facts { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0; }
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}
.fact { display: flex; flex-direction: column; gap: 8px; }
.fact-n {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.fact-l { font-size: 14.5px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Manifeste
   -------------------------------------------------------------------------- */

.statement {
  padding: clamp(96px, 14vw, 200px) 0;
  border-top: 1px solid var(--line);
  background: var(--invert-bg);
  color: var(--invert-ink);
}
.big-type {
  max-width: 24ch;
  font-size: clamp(1.75rem, 4.6vw, 3.3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Prestations : lignes separees par un filet, pas de cartes.
   -------------------------------------------------------------------------- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 32px;
  padding: clamp(36px, 4.6vw, 58px) 0;
  border-bottom: 1px solid var(--line);
}
.row-n {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  padding-top: 10px;
}
.row-body { max-width: 62ch; }
.row-body h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.row-body p { margin-top: 16px; color: var(--ink-soft); font-size: 17.5px; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.tags li {
  padding: 7px 14px;
  border: 1px solid var(--line-firm);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Methode
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step {
  background: var(--bg-alt);
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px) clamp(40px, 5vw, 60px);
}
.step-n {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
/* min-height reserve deux lignes de titre a toutes les etapes : les textes
   demarrent alors sur la meme ligne, qu'un titre tienne sur une ou deux. */
.step h3 {
  margin-top: 36px;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  min-height: 2.1em;
}
.step p { margin-top: 14px; font-size: 16px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Tarifs
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.plan {
  position: relative;
  background: var(--bg);
  /* Le haut est degage sur les trois cartes, pas seulement sur celle qui
     porte la pastille : sinon les trois titres ne sont plus sur la meme
     ligne, et c'est la premiere chose que l'oeil voit. */
  padding: clamp(46px, 4.4vw, 62px) clamp(26px, 2.6vw, 36px) clamp(32px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
}
.plan.feature { background: var(--bg-alt); }
.plan-badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 14px;
  background: var(--invert-bg);
  color: var(--invert-ink);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan h3 { font-size: 1.35rem; }
.price {
  margin-top: 20px;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.price-from {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.plan-for {
  margin-top: 10px;
  font-size: 15px;
  color: var(--ink-soft);
}
.check {
  margin: 32px 0 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
  font-size: 16px;
}
.check li { display: grid; grid-template-columns: 22px 1fr; align-items: start; }
.check li::before {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: 8px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}
.plan .btn, .plan .btn-ghost { margin-top: auto; }

.plans-foot {
  margin-top: 32px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line-firm); }
.faq details { border-bottom: 1px solid var(--line-firm); }
.faq summary {
  position: relative;
  padding: 26px 48px 26px 0;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--ink);
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.faq summary::before { width: 15px; height: 1.5px; margin-top: -0.75px; }
.faq summary::after  { width: 1.5px; height: 15px; margin-top: -7.5px; right: 10.75px; }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details p {
  padding: 0 56px 30px 0;
  margin-top: -6px;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}
.contact-intro h2 {
  margin-top: 18px;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}
.contact-direct { margin-top: 34px; font-size: 16px; color: var(--ink-soft); }
.contact-direct a { border-bottom: 1px solid var(--line-firm); padding-bottom: 1px; }
.contact-direct a:hover { border-color: var(--ink); color: var(--ink); }

.form { display: grid; gap: 22px; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.field label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-firm);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: border-color .2s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field select {
  cursor: pointer;
  /* Chevron dessine en CSS : aucune image, aucune requete. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 9px center, right 3px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.field input.err,
.field textarea.err { border-bottom-color: #c8372d; }

/* Piege a robots : hors ecran, jamais annonce. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 22px;
  font-size: 15px;
  color: var(--ink-soft);
}
.form-status.ok { color: var(--ink); font-weight: 500; }
.form-status.ko { color: #c8372d; }

.form-legal { font-size: 13px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.footer-grid {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: 26px;
  margin-inline: auto;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.footer-links a:hover { color: var(--ink); }
.footer-copy { font-size: 14.5px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Pages secondaires (mentions legales)
   -------------------------------------------------------------------------- */

.doc { padding: clamp(60px, 8vw, 120px) 0 var(--sec-y); }
.doc h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.doc h2 {
  margin-top: 52px;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.doc p, .doc li { margin-top: 14px; color: var(--ink-soft); font-size: 17px; }
.doc ul { margin-top: 10px; }
.doc li { padding-left: 18px; position: relative; }
.doc li::before { content: "—"; position: absolute; left: 0; }
.doc a { border-bottom: 1px solid var(--line-firm); }

/* --------------------------------------------------------------------------
   Apparition au defilement. Sans JavaScript ou avec mouvement reduit,
   tout reste visible : l'animation n'est jamais une condition d'affichage.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .steps, .plans { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .lede.sm { max-width: none; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .row-n { padding: 0 0 10px; }
  .steps, .plans { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { margin-inline: 0; flex-wrap: wrap; }
  .big-type { max-width: none; }
}

@media (max-width: 420px) {
  :root { --gutter: 20px; }
  .btn-sm { padding: 8px 16px; font-size: 14px; }
  .nav { gap: 16px; }
}

@media print {
  .site-header, .form, .hero-actions { display: none; }
  body { color: #000; background: #fff; }
}