/* ── Jetons Courtier Solo (registre white-label : graphite chaud + cuivre) ── */
:root {
  --encre: #2d2a26;
  --encre-doux: #56514a;
  --cuivre: #a2653f;
  /* Variante texte : contraste AA (≥ 4.5:1) sur le fond beige pour les petits corps. */
  --cuivre-texte: #8f5735;
  --cuivre-clair: #c08a63;
  --cuivre-fond: rgba(162, 101, 63, 0.09);
  --beige: #f2ede6;
  --creme: #fbf9f6;
  --ligne: rgba(45, 42, 38, 0.14);
  --ligne-douce: rgba(45, 42, 38, 0.07);
  --verifie: #5c7350;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--beige);
  color: var(--encre);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ── Filet de progression (écho du site principal, en cuivre) ── */
.progres {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--cuivre), var(--cuivre-clair));
  z-index: 1000; transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* ── En-tête (collant ; gagne un CTA une fois le héros passé) ── */
.entete {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--ligne-douce); background: var(--beige);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.entete--defilee {
  background: rgba(251, 249, 246, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px -20px rgba(45, 42, 38, 0.5);
}
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.entete__marque { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; font-size: 1.02rem; }
.entete__marque .solo { color: var(--cuivre); }
.entete__nav { display: flex; align-items: center; gap: 18px; }
.entete__retour { font-size: 0.85rem; color: var(--encre-doux); text-decoration: none; }
.entete__retour:hover { color: var(--encre); }
.entete__reserver {
  display: inline-block; background: var(--cuivre); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 0.83rem; padding: 8px 16px; border-radius: 999px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.entete--defilee .entete__reserver { opacity: 1; visibility: visible; transform: none; }
.entete__reserver:hover { background: #8f5735; }

/* ── Héros ── */
.heros { padding: 64px 0 56px; position: relative; overflow: hidden; }
/* Grain papier — même dispositif que le site principal, en registre dossier papier. */
.heros::after, .cta-final::after {
  content: ''; position: absolute; inset: 0; opacity: 0.028; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px;
}
.heros__grille { display: grid; gap: 44px; align-items: center; position: relative; z-index: 2; }
@media (min-width: 880px) { .heros__grille { grid-template-columns: 1.05fr 0.95fr; } }
.heros__eyebrow {
  font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cuivre-texte); margin-bottom: 18px;
}
.heros__titre {
  font-family: 'Cormorant', serif; font-weight: 600; font-size: clamp(2.3rem, 5.2vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 20px;
}
.heros__titre em { font-style: italic; color: var(--cuivre-texte); }
.heros__sous {
  font-size: 1.05rem; color: var(--encre-doux); max-width: 30rem; margin-bottom: 30px;
}
.heros__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-plein {
  display: inline-block; background: var(--cuivre); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 0.95rem; padding: 13px 24px; border-radius: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-plein:hover { background: #8f5735; transform: translateY(-1px); }
.btn-ligne {
  display: inline-block; color: var(--encre); text-decoration: none; font-weight: 600;
  font-size: 0.95rem; padding: 13px 22px; border: 1px solid var(--ligne); border-radius: 8px;
  background: transparent; transition: border-color 0.18s ease, background 0.18s ease;
}
.btn-ligne:hover { border-color: var(--cuivre); background: var(--cuivre-fond); }

/* Séquence d'entrée du héros (écho du site principal). */
.anim-heros {
  animation: heros-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 0.13s + 0.1s);
}
.anim-heros--0 { --i: 0; }
.anim-heros--1 { --i: 1; }
.anim-heros--2 { --i: 2; }
.anim-heros--3 { --i: 3; }
@keyframes heros-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Signature : le relevé de dossier ── */
.releve {
  background: var(--creme); border: 1px solid var(--ligne); border-radius: 14px;
  padding: 26px 26px 20px; box-shadow: 0 18px 40px -28px rgba(45, 42, 38, 0.45);
}
.releve__entete {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--ligne-douce); padding-bottom: 12px; margin-bottom: 8px;
}
.releve__client { font-weight: 700; font-size: 0.92rem; }
.releve__etat {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--cuivre-texte);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.releve__ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--ligne-douce);
  opacity: 0; transform: translateY(4px);
  animation: releve-in 0.45s ease-out forwards; animation-delay: var(--d);
}
.releve__ligne:last-of-type { border-bottom: none; }
@keyframes releve-in { to { opacity: 1; transform: none; } }
.releve__case {
  width: 17px; height: 17px; border: 1.5px solid var(--ligne); border-radius: 4px;
  flex: none; display: grid; place-items: center; font-size: 0.7rem; color: transparent;
  background: #fff; transition: none;
}
.releve__ligne--ok .releve__case { border-color: var(--verifie); background: var(--verifie); color: #fff; }
.releve__piece { font-size: 0.88rem; font-weight: 500; flex: 1; }
.releve__prov {
  font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--encre-doux);
  white-space: nowrap;
}
.releve__ligne--ok .releve__prov { color: var(--verifie); }
.releve__pied {
  margin-top: 12px; font-family: 'DM Mono', monospace; font-size: 0.7rem;
  color: var(--encre-doux); display: flex; justify-content: space-between;
}

/* ── Sections ── */
.section { padding: 58px 0; border-top: 1px solid var(--ligne-douce); }
.section--creme { background: var(--creme); border-top: none; }
.section__eyebrow {
  font-family: 'DM Mono', monospace; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cuivre-texte); margin-bottom: 12px;
}
.section__titre { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.section__intro { color: var(--encre-doux); max-width: 38rem; }

/* Révélation au défilement (dispositif du site principal). Les états cachés ne
   s'appliquent que si le JS est actif (classe .js sur <html>). */
html.js .devoile { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .devoile.est-visible { opacity: 1; transform: translateY(0); }
html.js .decale { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
html.js .devoile.est-visible .decale { opacity: 1; transform: translateY(0); }

/* Déroulement — trois étapes, vraie séquence */
.etapes { display: grid; gap: 26px; margin-top: 32px; }
@media (min-width: 760px) { .etapes { grid-template-columns: 1fr 1fr 1fr; gap: 34px; } }
.etape { position: relative; padding-top: 16px; }
.etape::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: var(--ligne-douce);
}
.etape::after {
  content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 2px;
  background: var(--cuivre); transform: translateY(-0.5px);
}
.etape__no {
  font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--cuivre-texte);
  letter-spacing: 0.06em; margin-bottom: 8px;
}
.etape__titre { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.etape__texte { font-size: 0.9rem; color: var(--encre-doux); }

/* Preuves — quatre pièces au dossier */
.preuves { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 720px) { .preuves { grid-template-columns: 1fr 1fr; } }
.preuve {
  background: var(--creme); border: 1px solid var(--ligne-douce); border-left: 3px solid var(--cuivre);
  border-radius: 10px; padding: 20px 22px;
}
.preuve__titre { font-weight: 700; font-size: 0.98rem; margin-bottom: 6px; }
.preuve__texte { font-size: 0.9rem; color: var(--encre-doux); }

/* Sécurité */
.securite__chiffres { display: flex; gap: 34px; margin-top: 26px; }
.chiffre__valeur { font-family: 'DM Mono', monospace; font-size: 2rem; font-weight: 500; color: var(--encre); }
.chiffre__nom { font-size: 0.8rem; color: var(--encre-doux); max-width: 10rem; }
.lien-cuivre { color: var(--cuivre-texte); font-weight: 600; text-decoration: none; }
.lien-cuivre:hover { text-decoration: underline; }

/* Pièces au dossier — les quatre documents publics (P-1 à P-4) */
.pieces { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 720px) { .pieces { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pieces { grid-template-columns: repeat(4, 1fr); } }
.piece-doc {
  background: #fff; border: 1px solid var(--ligne); border-radius: 10px;
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.piece-doc:hover {
  transform: translateY(-2px); border-color: var(--cuivre-clair);
  box-shadow: 0 14px 30px -24px rgba(45, 42, 38, 0.5);
}
.piece-doc__icone { width: 38px; height: 38px; color: var(--cuivre); margin-bottom: 4px; }
.piece-doc__icone svg { width: 100%; height: 100%; }
.piece-doc__no {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--cuivre-texte); text-transform: uppercase;
}
.piece-doc__titre { font-weight: 700; font-size: 0.95rem; }
.piece-doc__texte { font-size: 0.85rem; color: var(--encre-doux); flex: 1; }
.piece-doc__cta { font-size: 0.83rem; color: var(--cuivre-texte); font-weight: 600; margin-top: 8px; }
.piece-doc:hover .piece-doc__cta { text-decoration: underline; }

/* Tarif — écriture de relevé */
.tarif__carte {
  background: var(--creme); border: 1px solid var(--ligne); border-radius: 14px;
  padding: 30px 30px 24px; margin-top: 28px; max-width: 640px;
}
.tarif__ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--ligne-douce);
}
.tarif__nom { font-weight: 600; font-size: 0.95rem; }
.tarif__note { display: block; font-weight: 400; font-size: 0.82rem; color: var(--encre-doux); }
.tarif__prix { font-family: 'DM Mono', monospace; font-size: 1.05rem; white-space: nowrap; }
.tarif__ligne--fondateur { background: var(--cuivre-fond); margin: 0 -14px; padding: 13px 14px; border-radius: 8px; border-bottom: none; }
.tarif__ligne--fondateur .tarif__prix { color: var(--cuivre-texte); font-weight: 500; }
.tarif__conditions { margin-top: 16px; font-size: 0.83rem; color: var(--encre-doux); }
.tarif__cta { margin-top: 22px; }

/* Frontière */
.frontiere {
  margin-top: 8px; background: transparent; border: 1px dashed var(--ligne);
  border-radius: 12px; padding: 22px 24px; max-width: 640px;
}
.frontiere p { font-size: 0.92rem; color: var(--encre-doux); }
.frontiere strong { color: var(--encre); }

/* ── CTA final ── */
.cta-final { position: relative; overflow: hidden; text-align: center; padding: 76px 0 80px; background: var(--creme); }
.cta-final__inner { position: relative; z-index: 2; }
.cta-final__titre {
  font-family: 'Cormorant', serif; font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 12px;
}
.cta-final__titre em { font-style: italic; color: var(--cuivre-texte); }
.cta-final__sous { color: var(--encre-doux); max-width: 32rem; margin: 0 auto 30px; }
.cta-final__boutons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Pied de page */
.pied { border-top: 1px solid var(--ligne-douce); padding: 34px 0 44px; }
.pied__inner { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; justify-content: space-between; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied a { font-size: 0.82rem; color: var(--encre-doux); text-decoration: none; }
.pied a:hover { color: var(--encre); }
.pied__note { font-size: 0.78rem; color: var(--encre-doux); }

.releve__ligne--delay-1 { --d: 0.45s; }
.releve__ligne--delay-2 { --d: 0.6s; }
.releve__ligne--delay-3 { --d: 0.75s; }
.releve__ligne--delay-4 { --d: 0.9s; }
.releve__ligne--delay-5 { --d: 1.05s; }
.releve__ligne--delay-6 { --d: 1.2s; }
.releve__ligne--delay-7 { --d: 1.35s; }

/* ── Mouvement réduit : tout reste visible, rien ne bouge ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .releve__ligne { animation: none; opacity: 1; transform: none; }
  .anim-heros { animation: none; }
  .btn-plein:hover { transform: none; }
  .piece-doc:hover { transform: none; }
  html.js .devoile, html.js .decale,
  html.js .devoile.est-visible, html.js .devoile.est-visible .decale {
    opacity: 1; transform: none; transition: none;
  }
  .progres { display: none; }
}