/* base.css — Réinitialisation, typographie, aides transverses, boutons. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--corps); color: var(--encre); background: var(--creme);
  line-height: 1.62; font-size: 16.5px; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rose); color: #fff; }
:focus-visible { outline: 2.5px solid var(--rose-prof); outline-offset: 3px; border-radius: 5px; }
.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }

/* — Accent dégradé sur mot-clé — */
.grad {
  background: var(--deg-135); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--rose-prof);
}

/* — Eyebrow mono + point — */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-prof);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--deg-135); }
.eyebrow.centre { justify-content: center; }
.eyebrow.clair { color: var(--teal); }
.eyebrow.clair::before { background: var(--teal); }

.titre {
  font-size: clamp(2.2rem, 1.2rem + 3.9vw, 3.7rem); margin-top: 16px; letter-spacing: -.02em;
}
.lead { color: var(--encre-doux); font-size: 1.05rem; max-width: 58ch; margin-top: 16px; }

/* — Boutons — */
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 100px;
  border: 1.6px solid transparent; font-family: var(--corps); font-weight: 600; font-size: .95rem;
  cursor: pointer; background: var(--encre); color: var(--creme);
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--ombre-sm); }
.btn--rose { background: var(--rose); color: #fff; }
.btn--rose:hover { box-shadow: 0 16px 34px -14px rgba(201,55,123,.6); }
.btn--ligne { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn--ligne:hover { background: var(--encre); color: var(--creme); }
.btn--clair { background: #fff; color: var(--encre); }

/* ============================ SECTIONS ============================ */
.section { padding: clamp(66px, 8vw, 120px) 0; position: relative; }
.section--creme2 { background: var(--creme-2); }
.bloc-centre { text-align: center; max-width: 660px; margin: 0 auto 58px; }
.bloc-centre .lead { margin-inline: auto; }


/* — Bouton compact (barre de nav) — */
.btn--sm { padding: 11px 20px; font-size: .9rem; }

/* — Lien d'évitement (accessibilité clavier) — */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--creme); padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 0; }

/* — En-tête de page interne (compact) — */
.page-hero { position: relative; padding: clamp(46px,6vw,88px) 0 clamp(28px,4vw,50px); text-align: center; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(58% 65% at 18% 0%, var(--wash-rose), transparent 70%), radial-gradient(58% 65% at 86% 0%, var(--wash-teal), transparent 70%); }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.6rem); letter-spacing: -.02em; margin-top: 16px; }
.page-hero p { color: var(--encre-doux); max-width: 60ch; margin: 18px auto 0; font-size: 1.05rem; }

/* ---- REVEAL ---- */
.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal.vu { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .4s; } .reveal.d6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal, .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* — Statut d'envoi des formulaires (injecté par JS) — */
.form-statut { margin-top: 12px; font-size: .84rem; font-weight: 500; }
.form-statut[data-ok="1"] { color: var(--teal-prof); }
.form-statut[data-ok="0"] { color: var(--rose-prof); }