/* Direction « liasse » : le papier, l'encre carbone et les feuillets roses et jaunes
   des formulaires en plusieurs exemplaires que l'automatisation fait disparaître.
   Polices auto-hébergées dans /fonts. */
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-standard-normal.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("fonts/courier-prime-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --papier:#fcfcfa;
  --carbone:#1e2a78;
  --carbone-fonce:#141c58;
  --carbone-doux:#4b5590;
  --rose:#f2c9cc;
  --rose-trait:#e3a3a8;
  --jaune:#f7e9a8;
  --tampon:#b8322b;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --machine:"Courier Prime","Courier New",monospace;
  --mesure:40rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--carbone);font-family:var(--sans);font-size:18px;line-height:1.6}
h1,h2,h3{margin:0;font-weight:600;font-stretch:75%;line-height:1.05}
p,ul,ol,dl,dd,figure{margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--carbone-fonce);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--tampon);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--carbone);color:var(--papier);padding:12px 16px;z-index:30}
.skip:focus{left:16px;top:16px}

.page{max-width:1160px;margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}

/* Boutons et liens : angles droits, comme un formulaire */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:3px;font-weight:600;font-size:17px;text-decoration:none;border:2px solid var(--carbone);transition:background-color .15s,color .15s}
.btn--plein{background:var(--carbone);color:var(--papier)}
.btn--plein:hover{background:var(--carbone-fonce);border-color:var(--carbone-fonce);color:var(--papier)}
.btn--petit{min-height:44px;padding:8px 18px;font-size:16px}
.lien{font-weight:600}

/* En-tête */
.entete{display:flex;align-items:center;gap:32px;padding-top:24px;padding-bottom:24px}
.marque{white-space:nowrap;font-size:26px;font-weight:600;font-stretch:75%;text-decoration:none;margin-right:auto}
.nav-liens{display:flex;gap:28px;list-style:none;padding:0}
.nav-liens a{text-decoration:none}
.nav-liens a:hover{text-decoration:underline}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,88px);align-items:center;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(72px,9vw,128px)}
.h1-accroche{display:block;font-size:clamp(52px,7.4vw,100px);line-height:.94;letter-spacing:-.01em}
.h1-precision{display:block;margin-top:28px;max-width:30ch;font-size:clamp(20px,1.8vw,23px);font-weight:500;font-stretch:100%;line-height:1.35;color:var(--carbone-doux)}
.hero-intro{margin-top:20px;max-width:36rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.hero-note{margin-top:14px;font-size:15px;color:var(--carbone-doux)}

/* La liasse : une fiche et ses deux copies décalées */
.liasse{position:relative;padding:0 22px 0 0}
.fiche{position:relative;background:#fff;border:1px solid var(--rose-trait);padding:0 0 92px}
.fiche::before,.fiche::after{content:"";position:absolute;inset:0;border:1px solid var(--rose-trait);z-index:-1}
.fiche::before{background:var(--rose);transform:translate(11px,11px) rotate(1.4deg)}
.fiche::after{background:var(--jaune);transform:translate(22px,20px) rotate(2.6deg);z-index:-2}
.fiche-titre{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 22px;border-bottom:2px solid var(--rose-trait);background:#fff;font-weight:600;font-stretch:75%;font-size:22px}
.fiche-titre span{font-family:var(--machine);font-weight:400;font-stretch:100%;font-size:16px;color:var(--carbone-doux)}
.fiche-champs{padding:6px 22px 0}
.fiche-champs div{display:grid;grid-template-columns:6.5rem 1fr;align-items:baseline;gap:12px;padding:11px 0 7px;border-bottom:1px dotted var(--rose-trait)}
.fiche-champs dt{font-size:14px;color:var(--carbone-doux)}
.fiche-champs dd{font-family:var(--machine);font-size:17px;line-height:1.3;min-height:1.3em}
.tape{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;vertical-align:bottom;background:linear-gradient(transparent 55%,var(--jaune) 55%)}
.tampon{position:absolute;right:28px;bottom:22px;padding:2px 14px 4px;border:3px solid var(--tampon);border-radius:6px;color:var(--tampon);font-size:34px;font-weight:700;font-stretch:75%;line-height:1.1;transform:rotate(-9deg);opacity:.88;mix-blend-mode:multiply}
.liasse figcaption{margin-top:40px;font-size:15px;color:var(--carbone-doux);max-width:34ch}

/* Seule animation de la page : la fiche se remplit, puis le tampon tombe */
@media (prefers-reduced-motion:no-preference){
  .tape{width:calc(var(--n) * 1ch);animation:taper calc(var(--n) * 38ms) steps(var(--n),end) var(--d) both}
  .tampon{animation:tamponner .28s cubic-bezier(.3,1.6,.6,1) 5.7s both}
}
@keyframes taper{from{width:0}}
@keyframes tamponner{from{opacity:0;transform:rotate(-9deg) scale(1.7)}to{opacity:.88;transform:rotate(-9deg) scale(1)}}

/* Ne jamais couper « Seine-Maritime » au trait d'union */
.insecable{white-space:nowrap}

/* Blocs de contenu */
.bloc{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px);border-top:2px solid var(--rose)}
.bloc h2{max-width:20ch;font-size:clamp(36px,4.6vw,60px);margin-bottom:clamp(36px,4vw,56px)}
.bloc-intro{max-width:var(--mesure);margin:-28px 0 48px;font-size:20px}
.bloc-note{margin-top:32px;color:var(--carbone-doux)}
section{scroll-margin-top:16px}

/* Services : nom à gauche, détail à droite */
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px 48px;padding:28px 0}
.service + .service{border-top:1px solid var(--rose)}
.service h3{font-size:clamp(26px,2.6vw,34px)}
.service ul{margin-top:14px;padding-left:1.1em}
.service li{margin-top:4px}
.service li::marker{color:var(--rose-trait)}
.service p,.service ul{max-width:var(--mesure)}

/* Avant / après : l'ancienne façon est rayée, la nouvelle est surlignée */
.avant-apres{width:100%;border-collapse:collapse}
.avant-apres th{text-align:left;font-size:15px;font-weight:600;color:var(--carbone-doux);padding:0 24px 12px 0;border-bottom:2px solid var(--rose-trait)}
.avant-apres td{width:50%;vertical-align:top;padding:20px 24px 20px 0;border-bottom:1px dotted var(--rose-trait)}
.avant-apres s{color:var(--carbone-doux);text-decoration-color:var(--tampon);text-decoration-thickness:1.5px}
.avant-apres mark{background:linear-gradient(transparent 50%,var(--jaune) 50%);color:var(--carbone);font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Méthode : une vraie séquence, donc numérotée */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:0;list-style:none;counter-reset:etape}
.etapes li{counter-increment:etape}
.etapes li::before{content:counter(etape);display:block;margin-bottom:14px;font-size:64px;font-weight:600;font-stretch:75%;line-height:1;color:var(--rose-trait)}
.etapes h3{font-size:24px;margin-bottom:8px}
.etapes p{font-size:17px}

/* Zones */
.zones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;max-width:56rem}
.zones h3{font-size:26px;margin-bottom:8px}

/* FAQ */
.faq details{max-width:46rem;border-bottom:1px dotted var(--rose-trait)}
.faq details:first-of-type{border-top:2px solid var(--rose-trait)}
.faq summary{display:flex;justify-content:space-between;gap:24px;padding:18px 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--carbone-doux)}
.faq details[open] summary::after{content:"−"}
.faq details p{max-width:var(--mesure);padding:0 0 20px}

/* Rendez-vous : le feuillet jaune, détaché selon les pointillés */
.rdv{background:var(--jaune);border-top:2px dashed var(--carbone-doux)}
.rdv-contenu{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.rdv h2{max-width:16ch;font-size:clamp(40px,5.4vw,72px);margin-bottom:20px}
.rdv p{max-width:var(--mesure)}
.rdv .btn{margin-top:32px}
.rdv-email{margin-top:20px}

/* Pied de page */
.pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:32px;padding-bottom:40px;font-size:15px;color:var(--carbone-doux)}

/* Pages secondaires (mentions légales, 404) */
.legal{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(64px,8vw,104px)}
.legal > *{max-width:var(--mesure)}
.legal h1{font-size:clamp(40px,5vw,64px);margin-bottom:32px}
.legal h2{font-size:26px;margin:40px 0 10px}
.legal p + p{margin-top:12px}
.legal .btn{margin-top:20px}
.label{font-size:15px;font-weight:600;color:var(--carbone-doux);margin-bottom:12px}
.link-button{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}

/* Bandeau de consentement Calendly (créé par consentement.js) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:20;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 20px;background:#fff;border:1px solid var(--carbone);border-radius:3px;box-shadow:6px 6px 0 var(--rose);font-size:15px;line-height:1.5}
.consent p{flex:1 1 260px}
.consent__actions{display:flex;gap:10px}
.consent .btn--ghost{background:#fff;color:var(--carbone)}
.consent .btn--ghost:hover{background:var(--carbone);color:var(--papier)}
.btn--small{min-height:44px;padding:8px 18px;font-size:16px}

@media (max-width:960px){
  .nav-liens{display:none}
  .hero{grid-template-columns:1fr}
  .liasse{max-width:560px}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:17px}
  .entete{gap:16px}
  .marque{font-size:22px}
  .btn--petit{padding:8px 14px}
  .service{grid-template-columns:1fr;gap:10px}
  .avant-apres thead{display:none}
  .avant-apres tr{display:block;padding:16px 0;border-bottom:1px dotted var(--rose-trait)}
  .avant-apres td{display:block;width:auto;padding:4px 0;border:0}
  .etapes,.zones{grid-template-columns:1fr;gap:28px}
  .fiche-champs div{grid-template-columns:6rem 1fr}
  .fiche-champs dd{font-size:15px}
  .tampon{font-size:28px;animation-delay:.8s}
  .tape{width:auto;white-space:normal;animation:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}