/* ============================================================
   Site vitrine PUBLIC — design system dédié (créé 2026-08-26).
   Séparé de static/css/app.css (CRM) : le site public a sa propre
   identité visuelle premium, indépendante des évolutions du CRM.
   CSS pur (le CDN Tailwind ne résout pas @apply dans les <style>).
   ============================================================ */

:root {
    --ink: #14162b;
    --ink-2: #4b4f6b;
    --ink-3: #8489a6;
    --paper: #faf9fd;
    --paper-2: #f2f1fa;
    --line: #e6e5f2;
    --accent: #5b4df0;
    --accent-2: #8b5cf6;
    --accent-ink: #241f5c;
    --gold: #f2b544;
    --radius-lg: 1.75rem;
    --radius-md: 1.1rem;
    --shadow-soft: 0 1px 2px rgba(20, 22, 43, .04), 0 20px 45px -20px rgba(20, 22, 43, .18);
    --shadow-pop: 0 8px 16px rgba(20, 22, 43, .06), 0 30px 60px -20px rgba(91, 77, 240, .28);
}

* { border-color: var(--line); }

html { scroll-behavior: smooth; }
/* Le scroll horizontal de la page se fait sur <html>, pas <body> : le clip
   doit etre pose ici pour empecher tout debordement (halo decoratif du hero).
   `clip` et pas `hidden` : hidden creerait un scroll container qui casserait
   le position:sticky de la nav. */
html { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body.site-body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Evite tout scroll horizontal (halo decoratif du hero qui deborde de
       4px sur mobile). `clip` et pas `hidden` : hidden creerait un scroll
       container qui casserait le position:sticky de la nav. */
    overflow-x: clip;
}

.site-container { max-width: 78rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .site-container { padding-inline: 2rem; } }

/* ---------- Typo ---------- */
.site-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent-ink); background: var(--paper-2);
    border: 1px solid var(--line); padding: .4rem .85rem; border-radius: 999px;
}
.site-h1 {
    font-size: 2.6rem; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; color: var(--ink);
}
@media (min-width: 768px) { .site-h1 { font-size: 3.9rem; } }
.site-h2 {
    font-size: 2rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; color: var(--ink);
}
@media (min-width: 768px) { .site-h2 { font-size: 2.6rem; } }
.site-h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.site-lede { font-size: 1.1rem; line-height: 1.65; color: var(--ink-2); }
.site-grad-text {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Boutons ---------- */
.btn-hero-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    color: #fff; font-weight: 700; font-size: .95rem;
    padding: .95rem 1.6rem; border-radius: 999px;
    box-shadow: 0 14px 30px -10px rgba(91, 77, 240, .55);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -8px rgba(91, 77, 240, .6); }
.btn-hero-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    background: #fff; color: var(--ink); font-weight: 700; font-size: .95rem;
    padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid var(--line);
    transition: border-color .18s ease, transform .18s ease;
}
.btn-hero-secondary:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---------- Nav ---------- */
.site-nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(250, 249, 253, .78);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-brand-mark {
    width: 2.2rem; height: 2.2rem; border-radius: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: .95rem; box-shadow: 0 8px 18px -6px rgba(91, 77, 240, .55);
}
.site-nav-link {
    font-size: .92rem; font-weight: 600; color: var(--ink-2);
    padding: .4rem .2rem; position: relative; transition: color .15s ease;
}
.site-nav-link:hover { color: var(--ink); }
.site-nav-link.is-active { color: var(--accent-ink); }
.site-nav-link.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -.6rem; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px;
}

/* ---------- Cartes ---------- */
.site-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease;
}
.site-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.site-icon-tile {
    width: 3rem; height: 3rem; border-radius: .9rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--paper-2); color: var(--accent-ink); font-size: 1.15rem;
}

/* ---------- Mockup navigateur (CSS pur, aucune image) ---------- */
.browser-mock {
    background: #fff; border-radius: 1.1rem; overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow-pop);
}
.browser-mock__bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .65rem .85rem; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.browser-mock__dot { width: .55rem; height: .55rem; border-radius: 999px; }
.browser-mock__body { padding: 1.1rem; }

/* ---------- Timeline / méthode ---------- */
.site-timeline-step {
    position: relative; padding-left: 3.1rem;
}
.site-timeline-step::before {
    content: attr(data-step);
    position: absolute; left: 0; top: 0; width: 2.35rem; height: 2.35rem;
    border-radius: .8rem; background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-weight: 800; font-size: .95rem; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -8px rgba(91, 77, 240, .5);
}
.site-timeline-line {
    position: absolute; left: 1.15rem; top: 2.6rem; bottom: -1.4rem; width: 2px;
    background: linear-gradient(var(--line), var(--line));
}

/* ---------- Reveal-on-scroll ---------- */
/* Scopes sous .js (pose sur <html> par base.html) : sans JavaScript, les
   sections .reveal restent VISIBLES — un visiteur avec JS bloque/absent
   ne doit jamais voir une page vide. L'animation n'est active que si JS
   fonctionne (la classe .js est posee avant tout rendu, pas de flash). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section sombre (rythme visuel) ---------- */
.site-dark-section {
    background: radial-gradient(120% 140% at 15% -10%, #241f5c 0%, #14162b 55%, #100f22 100%);
    color: #f4f3fb;
}
.site-dark-section .site-lede { color: #c8c6e6; }
/* .site-h2/.site-h3 codent en dur --ink (texte sombre) : les remettre en
   clair dans une section sombre, sinon texte noir illisible sur fond violet. */
.site-dark-section .site-h2,
.site-dark-section .site-h3 { color: #f8f7fd; }
.site-dark-section .site-eyebrow {
    color: #e4e2ff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16);
}

/* ---------- Formulaire contact ---------- */
.site-field label { font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: .35rem; display: block; }
.site-field input, .site-field select, .site-field textarea {
    width: 100%; border: 1px solid var(--line); border-radius: .8rem;
    padding: .75rem .95rem; font-size: .95rem; color: var(--ink); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.site-field input:focus, .site-field select:focus, .site-field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 77, 240, .15);
}

/* Focus visible clavier (accessibilité) */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .4rem;
}

/* FAQ (<details>) : masquer le triangle natif, on affiche notre propre chevron */
.site-card summary::-webkit-details-marker { display: none; }
.site-card summary::marker { content: ''; }

.code-inline {
    background: var(--paper-2); border: 1px solid var(--line); border-radius: .35rem;
    padding: .1rem .4rem; font-family: ui-monospace, monospace; font-size: .82em;
}

