/*
 * Site vitrine OpenSprint v2 : jetons, polices, reset, typographie, boutons, révélations.
 * Thème clair par défaut ; le sombre s'active par data-theme="dark" sur <html> (choix explicite).
 * Raisin (--marque) remplit, borde, focalise et écrit ; Raisin profond (--marque-profond) ne sert
 * qu'au survol et à l'état pressé. La serif est réservée à l'accent du h1.
 */
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --fond: #FBFAFF;
  --surface: #FFFFFF;
  --texte: #1A1625;
  --texte-attenue: #5B5670;
  --trait: #E6E2F2;
  --marque: #7C3AED;
  --marque-profond: #5B21B6;
  --marque-texte: #7C3AED;
  --sur-marque: #FFFFFF;
  --brouillon-fond: #FEF3C7;
  --brouillon-texte: #78350F;
  --surface-2: #F3F0FC;
  --teinte: #EFE9FF;
  --texte-pale: #CFCADF;
  --barre-douce: #DDD6FE;
  --ok-fond: #DCFCE7; --ok-texte: #166534; --ok-point: #16A34A;
  --info-fond: #DBEAFE; --info-texte: #1E40AF; --info-point: #2563EB;
  --warn-fond: #FEF0D8; --warn-texte: #92400E; --warn-point: #D97706;
  --danger-fond: #FEE2E2; --danger-texte: #991B1B; --danger-point: #DC2626;
  --neutre-fond: #EEEDF4; --neutre-texte: #4B4760; --neutre-point: #8A869B;
  --logo-arc: #7C3AED;
  --logo-barre: #5B21B6;
  --ombre: 0 1px 2px rgba(26, 22, 37, 0.06), 0 18px 40px -18px rgba(76, 29, 149, 0.28);
  --ombre-douce: 0 1px 2px rgba(26, 22, 37, 0.06), 0 6px 16px -8px rgba(76, 29, 149, 0.2);
  --font-corps: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: Georgia, "Times New Roman", Cambria, serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fond: #0B0A14;
  --surface: #16131F;
  --texte: #F5F3FF;
  --texte-attenue: #B4B0C4;
  --trait: #2A2540;
  --marque-texte: #A78BFA;
  --brouillon-fond: #422006;
  --brouillon-texte: #FDE68A;
  --surface-2: #1D1930;
  --teinte: #251C47;
  --texte-pale: #3B3555;
  --barre-douce: #3B2A73;
  --ok-fond: #12301F; --ok-texte: #86EFAC; --ok-point: #4ADE80;
  --info-fond: #172554; --info-texte: #93C5FD; --info-point: #60A5FA;
  --warn-fond: #3A2A0B; --warn-texte: #FCD34D; --warn-point: #F59E0B;
  --danger-fond: #3B1219; --danger-texte: #FCA5A5; --danger-point: #F87171;
  --neutre-fond: #26223A; --neutre-texte: #C9C5D8; --neutre-point: #9490A8;
  --logo-arc: #A78BFA;
  --logo-barre: #C4B5FD;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--font-corps); font-size: 1rem; line-height: 1.6; overflow-x: clip; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1 { font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; font-size: clamp(2.75rem, 4.7vw, 4.5rem); }
h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--marque-texte); letter-spacing: -0.02em; }
h2 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-size: clamp(1.875rem, 3.6vw, 3rem); }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
a { color: var(--marque-texte); text-underline-offset: 3px; transition: color 150ms; }
a:hover { color: var(--marque-profond); }
:root[data-theme="dark"] a:hover { color: var(--texte); }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .conteneur { padding-inline: 32px; } }
.section { padding-block: 72px; }
@media (min-width: 1024px) { .section { padding-block: 120px; } }
.sur-titre { margin-bottom: 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marque-texte); }
.intro { max-width: 60ch; margin-top: 20px; font-size: 1.125rem; color: var(--texte-attenue); }
.visuellement-masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--marque); color: var(--sur-marque); padding: 12px 16px; border-radius: 0 0 6px 0; font-weight: 600; }
.lien-evitement:focus { left: 0; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--marque); border-radius: 10px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms, color 150ms, border-color 150ms, translate 150ms;
}
.bouton-primaire { background: var(--marque); color: var(--sur-marque); }
.bouton-primaire:hover, .bouton-primaire:active { background: var(--marque-profond); border-color: var(--marque-profond); color: var(--sur-marque); }
.bouton-secondaire { background: transparent; color: var(--marque-texte); }
.bouton-secondaire:hover, .bouton-secondaire:active { border-color: var(--marque-profond); color: var(--marque-profond); }
:root[data-theme="dark"] .bouton-secondaire:hover { color: var(--texte); }
.bouton-grand { min-height: 52px; padding: 0 28px; font-size: 1.0625rem; }

/* Révélations : masquées seulement avec JS et sans préférence de mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
  .js [data-reveal].est-visible { opacity: 1; transform: none; }
  .js [data-reveal="1"] { transition-delay: 70ms; } .js [data-reveal="2"] { transition-delay: 140ms; }
  .js [data-reveal="3"] { transition-delay: 210ms; } .js [data-reveal="4"] { transition-delay: 280ms; }
  .js [data-reveal="5"] { transition-delay: 350ms; } .js [data-reveal="6"] { transition-delay: 420ms; }
  .js [data-reveal="7"] { transition-delay: 490ms; }
}
/* Animations infinies : en pause hors écran (classe posée par site.js) et quand l'onglet est caché. */
.est-en-pause, .est-en-pause::before, .est-en-pause::after, .est-en-pause *, .est-en-pause *::before, .est-en-pause *::after, html.onglet-cache *, html.onglet-cache *::before, html.onglet-cache *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0s !important; } }
.section-roles, .section-tarifs { background: var(--surface); border-block: 1px solid var(--trait); }