/* ===================================================================
   VELARYS — Charte 2026 « Clarté premium »
   Blanc lumineux · vert menthe · noir chaud · halos dégradés (bleu/cyan/teal)
   Display : Momo Trust Display · Texte : Poppins · Icônes : SVG abstraites
   Feuille DÉDIÉE au redesign — branchée uniquement sur index.html (pilote).
   =================================================================== */

:root {
    /* — Palette principale — */
    --vel-white: #ffffff;
    --vel-paper: #f1f2f1;          /* gris clair */
    --vel-paper-soft: #f8f9f8;
    --vel-ink: #211f1c;            /* noir chaud */
    --vel-ink-soft: #4c4943;
    --vel-ink-mute: #8a857c;
    --vel-mint: #2bf0a5;           /* vert de marque — accent unique, partout */
    --vel-mint-bright: #2bf0a5;
    --vel-mint-deep: #2bf0a5;      /* aligné sur le vert unique (un seul vert sur tout le site) */

    /* — Palette secondaire (halos de fond) — */
    --vel-glow-blue: #2e5ce6;
    --vel-glow-cyan: #a8e8fb;
    --vel-glow-teal: #3fae93;

    /* — Lignes & ombres — */
    --vel-line: rgba(33, 31, 28, 0.10);
    --vel-line-strong: rgba(33, 31, 28, 0.16);
    --vel-line-light: rgba(255, 255, 255, 0.14);
    --vel-shadow: 0 26px 60px -28px rgba(33, 31, 28, 0.30);
    --vel-shadow-soft: 0 16px 44px -26px rgba(33, 31, 28, 0.26);
    --vel-shadow-mint: 0 16px 36px -14px rgba(52, 224, 161, 0.45);

    /* — Typographie — */
    --vel-font-display: "Momo Trust Display", "Poppins", system-ui, sans-serif;
    --vel-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* — Géométrie & mouvement — */
    --vel-radius: 16px;
    --vel-radius-lg: 28px;
    --vel-radius-xl: 36px;
    --vel-radius-pill: 100px;
    /* Arc bas-droite de la signature de marque (coin haut-gauche vif + arc bas-droite),
       ratio ×~2.75 sur le radius apparié — variante « discrète » validée. */
    --vel-arc: 44px;
    --vel-arc-lg: 77px;
    --vel-arc-xl: 99px;
    --vel-nav-h: 74px;
    --vel-maxw: 1200px;
    --vel-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --vel-transition: all 0.4s var(--vel-ease);

    /* — Motif « V » (filigrane, chevrons de marque) — */
    --vel-vpattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='102' height='78' viewBox='40 56 102 78'%3E%3Cpath fill='%23ffffff' d='m 87.27459,124.36108 c -4.429452,-0.62998 -6.522626,-2.36009 -9.886489,-8.17169 -0.835174,-1.4429 -1.801369,-3.10641 -2.1471,-3.69668 -0.34573,-0.59028 -0.751698,-1.28787 -0.90215,-1.55022 -0.150452,-0.26234 -1.132002,-1.95268 -2.181222,-3.7563 -1.04922,-1.80361 -2.308838,-3.9769 -2.799152,-4.82952 -0.490314,-0.85262 -1.453454,-2.516123 -2.140311,-3.696683 -1.742984,-2.99579 -2.465877,-4.24308 -3.732056,-6.43936 -0.604977,-1.04939 -1.384647,-2.39092 -1.732598,-2.98119 -0.561021,-0.95173 -7.58001,-13.08022 -9.178443,-15.85992 -0.339431,-0.59028 -1.027909,-1.78525 -1.529952,-2.6555 -0.502044,-0.87024 -0.912806,-1.61393 -0.912806,-1.65265 0,-0.0738 -1.393124,-2.42199 -1.869581,-3.15124 -0.152281,-0.23308 -0.276875,-0.46309 -0.276875,-0.51114 0,-0.22121 20.779287,-0.0244 21.464559,0.20335 2.658848,0.88349 3.721013,2.0267 7.02171,7.55747 2.124675,3.56018 3.704642,6.13737 10.509551,17.14286 1.459922,2.3611 2.736643,4.45389 2.837168,4.65065 1.004589,1.96637 4.018944,5.447063 6.044907,6.980073 2.736397,2.07059 7.20969,2.83221 10.76209,1.83233 0.43495,-0.12242 0.5856,-0.53071 -2.03438,5.51346 -0.23129,0.53357 -0.56526,1.28483 -0.74217,1.66946 -0.1769,0.38463 -0.52147,1.15546 -0.7657,1.71294 -3.418463,7.80295 -4.639847,9.46514 -7.945259,10.81274 -1.98293,0.80843 -5.548786,1.20601 -7.863741,0.87676 z m 24.71104,0.0361 c -0.68683,-0.0635 -0.77395,-0.21993 -0.46376,-0.83273 0.12771,-0.2523 0.96644,-2.17591 1.86386,-4.27467 0.89741,-2.09875 1.86571,-4.35253 2.15176,-5.00839 0.56159,-1.28758 2.2372,-5.17636 3.67382,-8.5262 2.19005,-5.10669 3.21173,-7.479403 3.36875,-7.823543 0.1659,-0.3636 0.70418,-1.62023 1.85502,-4.3306 0.73971,-1.74212 0.65342,-1.69185 1.56969,-0.91452 13.54577,11.491703 3.87552,33.365373 -14.01914,31.710653 z M 108.648,96.204577 c -12.820429,-11.88498 -2.81255,-33.68367 14.37439,-31.30958 0.86945,0.12011 0.93725,-0.19994 -0.81268,3.83618 -0.82408,1.90072 -1.67755,3.88514 -1.89658,4.40984 -0.21904,0.52468 -0.78383,1.83938 -1.25511,2.92156 -0.47127,1.08217 -1.06163,2.45053 -1.31192,3.04081 -0.90337,2.13045 -4.32958,10.09202 -6.61994,15.38294 -0.56783,1.31172 -1.06046,2.45202 -1.09475,2.53401 -0.11759,0.28117 -0.34442,0.14742 -1.38341,-0.81576 z'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--vel-font-body);
    background-color: var(--vel-white);
    color: var(--vel-ink);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

::selection { background: var(--vel-mint); color: var(--vel-ink); }

h1, h2, h3, h4 {
    font-family: var(--vel-font-display);
    font-weight: 400;
    color: var(--vel-ink);
    letter-spacing: -0.015em;
    line-height: 1.06;
}

a { color: inherit; }
img, svg { display: block; }
strong { font-weight: 600; color: var(--vel-ink); }

.vel-wrap { max-width: var(--vel-maxw); margin: 0 auto; padding-inline: 24px; }

/* — Marqueur de section (filet menthe + libellé Poppins) — */
.vel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--vel-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vel-mint-deep);
}
.vel-eyebrow::before {
    content: "";
    width: 1.9rem;
    height: 2px;
    border-radius: 2px;
    background: var(--vel-mint);
}

/* ===================================================================
   NAVIGATION
   (conserve les hooks JS : .apple-nav / .apple-nav-toggle / #nav-menu / .is-scrolled / .is-open)
   =================================================================== */
.apple-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    transition: background 0.4s var(--vel-ease), border-color 0.4s var(--vel-ease), backdrop-filter 0.4s var(--vel-ease);
}
.apple-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.82);
    border-bottom-color: var(--vel-line);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.apple-nav-inner {
    max-width: var(--vel-maxw);
    margin: 0 auto;
    padding-inline: 24px;
    height: var(--vel-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vel-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--vel-ink);
}
.vel-brand__mark { height: 26px; width: auto; color: var(--vel-ink); }
.vel-brand__word {
    font-family: var(--vel-font-display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--vel-ink);
}
/* Logo complet (lockup mark + nom) — image, swap clair/foncé géré par page */
.vel-brand__logo { height: 26px; width: auto; display: block; }
.vel-brand__logo--light { display: none; }
.apple-nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    list-style: none;
}
.apple-nav-links a {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--vel-ink-soft);
    text-decoration: none;
    transition: color 0.3s;
}
.apple-nav-links a:hover,
.apple-nav-links a[aria-current="page"] { color: var(--vel-ink); }

.apple-nav-cta {
    background: var(--vel-ink);
    color: var(--vel-white) !important;
    padding: 10px 20px;
    border-radius: var(--vel-radius-pill);
    font-weight: 600 !important;
    transition: var(--vel-transition);
}
.apple-nav-cta:hover {
    background: var(--vel-mint);
    color: var(--vel-ink) !important;
    transform: translateY(-1px);
    box-shadow: var(--vel-shadow-mint);
}

.apple-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
}
.apple-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--vel-ink);
    transition: var(--vel-transition);
}

@media (max-width: 860px) {
    .apple-nav-toggle { display: flex; }
    .apple-nav-links {
        position: absolute;
        top: var(--vel-nav-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding: 22px 24px 30px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--vel-line);
        display: none;
    }
    .apple-nav-links.is-open { display: flex; }
    .apple-nav-links a { font-size: 1rem; }
    .apple-nav-cta { padding: 11px 22px; }
}

/* ===================================================================
   HERO
   =================================================================== */
.vel-hero {
    position: relative;
    margin-top: calc(-1 * var(--vel-nav-h));
    padding: calc(var(--vel-nav-h) + 4.5rem) 0 6rem;
    overflow: hidden;
    isolation: isolate;
    background: var(--vel-white);
}

/* Halo dégradé (palette secondaire) — diffus, asymétrique, en haut à gauche */
.vel-aura {
    position: absolute;
    inset: -28% -8% -6% -22%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(42% 52% at 16% 26%, rgba(63, 174, 147, 0.55) 0%, rgba(63, 174, 147, 0) 70%),
        radial-gradient(48% 56% at 38% 50%, rgba(168, 232, 251, 0.62) 0%, rgba(168, 232, 251, 0) 72%),
        radial-gradient(44% 54% at 26% 80%, rgba(46, 92, 230, 0.42) 0%, rgba(46, 92, 230, 0) 70%),
        radial-gradient(40% 50% at 66% 42%, rgba(168, 232, 251, 0.32) 0%, rgba(168, 232, 251, 0) 74%),
        radial-gradient(34% 46% at 84% 66%, rgba(63, 174, 147, 0.24) 0%, rgba(63, 174, 147, 0) 76%);
    filter: blur(30px);
}
/* Fondu du bas du hero vers le blanc — jointure propre avec la section suivante */
.vel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 48%, rgba(255, 255, 255, 0.85) 82%, var(--vel-white) 97%);
}

/* Filigrane « V » de marque, confiné au halo et fondu vers le blanc */
.vel-aura::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--vel-vpattern);
    background-size: 51px 39px;
    opacity: 0.3;
    mix-blend-mode: overlay;
    -webkit-mask-image: radial-gradient(78% 82% at 38% 50%, #000 0%, transparent 80%);
    mask-image: radial-gradient(78% 82% at 38% 50%, #000 0%, transparent 80%);
}

.vel-hero-inner {
    max-width: var(--vel-maxw);
    margin: 0 auto;
    padding-inline: 24px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 3rem;
}

.vel-hero-title {
    font-size: clamp(2.9rem, 6.4vw, 5.4rem);
    line-height: 0.98;
    margin: 1.6rem 0 0;
    max-width: 12ch;
}
.vel-hero-title .vel-accent {
    color: var(--vel-mint);
}
.vel-hero-sub {
    font-size: 1.12rem;
    color: var(--vel-ink-soft);
    line-height: 1.6;
    max-width: 46ch;
    margin-top: 1.8rem;
}
.vel-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.4rem;
}

/* Carte « preuve » flottante à droite du hero */
.vel-hero-card {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--vel-line);
    /* signature de marque : coin haut-gauche vif (pointe du V) + arc bas-droite prononcé */
    border-radius: 3px var(--vel-radius-xl) 120px var(--vel-radius-xl);
    padding: 2rem;
    box-shadow: var(--vel-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    justify-self: end;
    max-width: 380px;
    width: 100%;
}
.vel-hero-card__label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vel-mint-deep);
    margin-bottom: 1.2rem;
}
.vel-hero-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.95rem 0;
    border-top: 1px solid var(--vel-line);
}
.vel-hero-card__row:first-of-type { border-top: none; }
.vel-hero-card__row svg { width: 26px; height: 26px; color: var(--vel-mint-deep); flex-shrink: 0; margin-top: 2px; }
.vel-hero-card__row b { display: block; font-weight: 600; font-size: 0.96rem; }
.vel-hero-card__row span { font-size: 0.86rem; color: var(--vel-ink-mute); line-height: 1.45; }

/* ===================================================================
   BOUTONS
   =================================================================== */
.vel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 15px 28px;
    font-family: var(--vel-font-body);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: var(--vel-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--vel-transition);
}
.vel-btn svg { width: 18px; height: 18px; }
.vel-btn--primary { background: var(--vel-mint); color: var(--vel-ink); }
.vel-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--vel-shadow-mint); }
.vel-btn--dark { background: var(--vel-ink); color: var(--vel-white); }
.vel-btn--dark:hover { transform: translateY(-2px); box-shadow: var(--vel-shadow); }
.vel-btn--ghost { background: transparent; color: var(--vel-ink); border-color: var(--vel-line-strong); }
.vel-btn--ghost:hover { border-color: var(--vel-ink); background: var(--vel-ink); color: var(--vel-white); }

/* ===================================================================
   TITRES DE SECTION
   =================================================================== */
.vel-section { padding: 6.5rem 0; }
.vel-section-title {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.04;
    margin-top: 1.2rem;
}
.vel-section-lead {
    font-size: 1.08rem;
    color: var(--vel-ink-soft);
    max-width: 52ch;
    margin-top: 1.1rem;
}

/* ===================================================================
   INTRO ÉDITORIALE
   =================================================================== */
.vel-intro { padding: 7rem 0; background: var(--vel-white); }
.vel-intro-grid {
    display: grid;
    grid-template-columns: minmax(170px, 250px) 1fr;
    gap: clamp(2rem, 6vw, 5.5rem);
    align-items: start;
    border-top: 1px solid var(--vel-line);
    padding-top: 2.6rem;
}
.vel-intro-aside {
    position: sticky;
    top: calc(var(--vel-nav-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vel-intro-aside .vel-eyebrow { padding-top: 0.35rem; }
.vel-intro-kicker {
    font-size: 0.9rem;
    color: var(--vel-ink-mute);
    line-height: 1.5;
    max-width: 22ch;
}
.vel-intro-text {
    font-family: var(--vel-font-display);
    font-size: clamp(1.65rem, 3.1vw, 2.7rem);
    line-height: 1.28;
    letter-spacing: -0.015em;
    color: var(--vel-ink);
    max-width: 20ch;
}
.vel-intro-text .vel-accent { color: var(--vel-mint-deep); }
/* accent de marque dans l'aside — reprend la géométrie du showcase (arc + filigrane V), sans photo */
.vel-intro-mark {
    position: relative;
    margin-top: 1.7rem;
    width: 100%;
    max-width: 184px;
    aspect-ratio: 1 / 1;
    border-radius: 2px 22px 96px 22px;
    overflow: hidden;
    border: 1px solid var(--vel-line);
    background:
        radial-gradient(90% 95% at 16% 12%, rgba(52, 224, 161, 0.22) 0%, transparent 70%),
        radial-gradient(85% 90% at 88% 94%, rgba(46, 92, 230, 0.18) 0%, transparent 72%),
        radial-gradient(100% 105% at 72% 42%, rgba(168, 232, 251, 0.16) 0%, transparent 76%),
        var(--vel-paper);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vel-intro-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--vel-vpattern);
    background-size: 51px 39px;
    opacity: 0.14;
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 56%);
    mask-image: linear-gradient(135deg, #000 0%, transparent 56%);
}
.vel-intro-mark svg {
    position: relative;
    width: 44%;
    height: auto;
    color: var(--vel-ink);
}

/* ===================================================================
   EN SITUATION — photos cadrées dans la géométrie de marque
   =================================================================== */
.vel-showcase { background: var(--vel-white); overflow: hidden; }
.vel-showcase-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
.vel-showcase-copy .vel-section-title { margin-top: 1.1rem; }
.vel-showcase-points {
    list-style: none;
    margin: 1.9rem 0 2.3rem;
    display: grid;
    gap: 0.9rem;
}
.vel-showcase-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.98rem;
    color: var(--vel-ink-soft);
}
.vel-showcase-points svg { width: 22px; height: 22px; color: var(--vel-mint-deep); flex-shrink: 0; margin-top: 1px; }

.vel-showcase-media { position: relative; isolation: isolate; }
/* aura diffuse large (palette secondaire) qui se fond dans le blanc du site */
.vel-showcase-media::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -22% -26% -26% -24%;
    background:
        radial-gradient(40% 48% at 28% 26%, rgba(52, 224, 161, 0.42) 0%, transparent 72%),
        radial-gradient(44% 52% at 12% 58%, rgba(168, 232, 251, 0.40) 0%, transparent 74%),
        radial-gradient(46% 54% at 36% 92%, rgba(46, 92, 230, 0.22) 0%, transparent 74%),
        radial-gradient(34% 42% at 80% 34%, rgba(63, 174, 147, 0.26) 0%, transparent 74%);
    filter: blur(50px);
    pointer-events: none;
}
/* photo principale — coin haut-gauche vif (pointe du V) + grand arc bas-droite (arrondi du logo) */
.vel-showcase-main {
    position: relative;
    z-index: 2;
    margin: 0;
    aspect-ratio: 16 / 11;
    border-radius: 3px 30px 190px 30px;
    overflow: hidden;
    box-shadow: var(--vel-shadow);
}
.vel-showcase-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vel-showcase-main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--vel-vpattern);
    background-size: 51px 39px;
    opacity: 0.16;
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 42%);
    mask-image: linear-gradient(135deg, #000 0%, transparent 42%);
}
/* incrustation arrondie pour la profondeur (contraste angulaire / arrondi) */
.vel-showcase-inset {
    position: absolute;
    z-index: 3;
    left: -2rem;
    bottom: -2rem;
    width: 46%;
    margin: 0;
    aspect-ratio: 3 / 2;
    border-radius: 3px var(--vel-radius-lg) var(--vel-arc-lg) var(--vel-radius-lg);
    overflow: hidden;
    border: 4px solid var(--vel-white);
    box-shadow: var(--vel-shadow);
}
.vel-showcase-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* chip flottante avec le « V » */
.vel-showcase-chip {
    position: absolute;
    z-index: 4;
    top: 1.1rem;
    left: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--vel-line);
    border-radius: var(--vel-radius-pill);
    box-shadow: var(--vel-shadow-soft);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--vel-ink);
}
.vel-showcase-chip svg { width: 20px; height: 16px; color: var(--vel-ink); }

@media (max-width: 980px) {
    .vel-showcase-grid { grid-template-columns: 1fr; gap: 3rem; }
    .vel-showcase-media { max-width: 560px; }
}
@media (max-width: 600px) {
    .vel-showcase-inset { position: static; width: 64%; margin: 1rem auto 0 0; bottom: auto; left: auto; }
    .vel-showcase-main { aspect-ratio: 16 / 12; border-radius: 3px 24px 90px 24px; }
}

/* ===================================================================
   DOMAINES — grille de cartes avec icônes abstraites
   =================================================================== */
.vel-domains { background: var(--vel-paper); position: relative; overflow: hidden; }
.vel-domains-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3.2rem;
}
.vel-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--vel-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.3s var(--vel-ease), color 0.3s;
}
.vel-see-all svg { width: 18px; height: 18px; color: var(--vel-mint-deep); transition: transform 0.3s var(--vel-ease); }
.vel-see-all:hover { color: var(--vel-mint-deep); }
.vel-see-all:hover svg { transform: translateX(4px); }

.vel-domain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
.vel-domain {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vel-white);
    border: 1px solid var(--vel-line);
    border-radius: 3px var(--vel-radius-lg) var(--vel-arc-lg) var(--vel-radius-lg);
    padding: 2.1rem 1.9rem 1.9rem;
    text-decoration: none;
    color: var(--vel-ink);
    overflow: hidden;
    transition: transform 0.4s var(--vel-ease), box-shadow 0.4s var(--vel-ease), border-color 0.4s var(--vel-ease);
}
.vel-domain::before {
    content: "";
    position: absolute;
    top: -40%; right: -30%;
    width: 70%; height: 80%;
    background: radial-gradient(circle, rgba(52, 224, 161, 0.18) 0%, transparent 68%);
    opacity: 0;
    transition: opacity 0.45s var(--vel-ease);
    pointer-events: none;
}
.vel-domain:hover {
    transform: translateY(-6px);
    box-shadow: var(--vel-shadow);
    border-color: transparent;
}
.vel-domain:hover::before { opacity: 1; }

.vel-domain__icon {
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 3px 14px 23px 14px;
    background: var(--vel-paper);
    color: var(--vel-ink);
    margin-bottom: 1.5rem;
    transition: var(--vel-transition);
}
.vel-domain__icon svg { width: 28px; height: 28px; }
.vel-domain:hover .vel-domain__icon { background: var(--vel-mint); color: var(--vel-ink); }

.vel-domain__title {
    font-family: var(--vel-font-display);
    font-size: 1.4rem;
    line-height: 1.12;
    margin-bottom: 0.7rem;
}
.vel-domain__desc {
    font-size: 0.94rem;
    color: var(--vel-ink-soft);
    line-height: 1.6;
    margin-bottom: 1.4rem;
}
.vel-domain__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--vel-mint-deep);
}
.vel-domain__more svg { width: 16px; height: 16px; transition: transform 0.3s var(--vel-ease); }
.vel-domain:hover .vel-domain__more svg { transform: translateX(4px); }

/* ===================================================================
   DIFFÉRENCIATEURS — section sombre + halo
   =================================================================== */
.vel-diff {
    position: relative;
    background: var(--vel-ink);
    color: var(--vel-white);
    padding: 7rem 0;
    overflow: hidden;
    isolation: isolate;
}
.vel-diff::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -25%; left: -10%;
    width: 60vw; height: 60vw;
    background:
        radial-gradient(circle at 40% 40%, rgba(46, 92, 230, 0.40) 0%, transparent 60%),
        radial-gradient(circle at 60% 60%, rgba(52, 224, 161, 0.22) 0%, transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}
.vel-diff .vel-section-title { color: var(--vel-white); }
.vel-diff .vel-section-lead { color: rgba(255, 255, 255, 0.66); }
.vel-diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-top: 3.6rem;
}
.vel-diff-item {
    padding-top: 1.8rem;
    border-top: 1px solid var(--vel-line-light);
}
.vel-diff-item__icon {
    width: 46px; height: 46px;
    color: var(--vel-mint);
    margin-bottom: 1.4rem;
}
.vel-diff-item__icon svg { width: 100%; height: 100%; }
.vel-diff-item h3 {
    color: var(--vel-white);
    font-size: 1.3rem;
    line-height: 1.18;
    margin-bottom: 0.8rem;
}
.vel-diff-item p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.64);
}

/* ===================================================================
   APPROCHE — 5 étapes
   =================================================================== */
.vel-approach { background: var(--vel-white); }
.vel-approach-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3.6rem;
}
.vel-approach-head a {
    color: var(--vel-mint-deep);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
.vel-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    counter-reset: vel-step;
}
.vel-step {
    position: relative;
    padding: 1.6rem 1.3rem;
    border-radius: 3px var(--vel-radius) var(--vel-arc) var(--vel-radius);
    background: var(--vel-paper-soft);
    border: 1px solid var(--vel-line);
    transition: var(--vel-transition);
}
.vel-step:hover { background: var(--vel-white); box-shadow: var(--vel-shadow-soft); transform: translateY(-4px); }
.vel-step__num {
    counter-increment: vel-step;
    font-family: var(--vel-font-display);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--vel-mint-deep);
    margin-bottom: 1rem;
}
.vel-step__num::before { content: "0" counter(vel-step); }
.vel-step h3 { font-family: var(--vel-font-body); font-weight: 600; font-size: 1rem; margin-bottom: 0.4rem; }
.vel-step p { font-size: 0.85rem; color: var(--vel-ink-mute); line-height: 1.55; }

/* ===================================================================
   FOOTER + FORMULAIRE
   =================================================================== */
.apple-footer {
    position: relative;
    background: var(--vel-ink);
    color: rgba(255, 255, 255, 0.7);
    padding: 6rem 0 2.5rem;
    overflow: hidden;
    isolation: isolate;
}
.apple-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -30%; right: -10%;
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(52, 224, 161, 0.20) 0%, transparent 62%);
    filter: blur(16px);
    pointer-events: none;
}
.apple-footer-content { max-width: var(--vel-maxw); margin: 0 auto; padding-inline: 24px; }
.apple-footer-main {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.7fr;
    gap: 3rem;
    padding-bottom: 3.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--vel-line-light);
}
.apple-footer h3 {
    color: var(--vel-white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.apple-footer-contact p,
.apple-footer-form p { margin-bottom: 0.8rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.apple-footer-contact strong { color: rgba(255, 255, 255, 0.9); }
.apple-footer-contact a { color: var(--vel-mint); text-decoration: none; }
.apple-footer-contact a:hover { text-decoration: underline; }
.vel-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.2rem;
    text-decoration: none;
}
.vel-footer-brand svg { height: 24px; color: var(--vel-white); }
.vel-footer-brand span { font-family: var(--vel-font-display); font-size: 1.4rem; color: var(--vel-white); }
.vel-footer-logo { height: 26px; width: auto; display: block; }

.apple-footer-links ul { list-style: none; }
.apple-footer-links li { margin-bottom: 0.7rem; }
.apple-footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}
.apple-footer-links a:hover { color: var(--vel-mint); }

/* Formulaire */
.apple-contact-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.apple-form-group input,
.apple-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--vel-white);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--vel-line-light);
    border-radius: var(--vel-radius);
    transition: border-color 0.3s, background 0.3s;
    margin-bottom: 0.6rem;
}
.apple-form-group input::placeholder,
.apple-form-group textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.apple-form-group input:focus,
.apple-form-group textarea:focus {
    outline: none;
    border-color: var(--vel-mint);
    background: rgba(255, 255, 255, 0.08);
}
.apple-form-group textarea { resize: vertical; min-height: 110px; }
.apple-submit-button {
    margin-top: 0.6rem;
    align-self: flex-start;
    background: var(--vel-mint);
    color: var(--vel-ink);
    padding: 14px 30px;
    border: none;
    border-radius: var(--vel-radius-pill);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--vel-transition);
}
.apple-submit-button:hover { transform: translateY(-2px); box-shadow: var(--vel-shadow-mint); }

.apple-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}
.apple-footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.apple-footer-bottom a:hover { color: var(--vel-mint); }
.footer-meta-links { margin-top: 0.4rem; }

/* États du formulaire (remplacent l'innerHTML du conteneur) */
.form-submission-status,
.form-submission-success,
.form-submission-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1rem 0;
    animation: vel-fade 0.5s var(--vel-ease);
}
.form-submission-status h3,
.form-submission-success h3,
.form-submission-error h3 { color: var(--vel-white); margin: 0.6rem 0; }
.form-submission-status p,
.form-submission-success p,
.form-submission-error p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 0.5rem; }
.form-submission-success a,
.form-submission-error a { color: var(--vel-mint); }
.vel-status-icon { width: 48px; height: 48px; color: var(--vel-mint); }
.vel-status-icon--error { color: #ff8a73; }
.loading-spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(52, 224, 161, 0.25);
    border-top-color: var(--vel-mint);
    border-radius: 50%;
    animation: vel-spin 0.9s linear infinite;
}
.thank-you, .dry-run-note { font-style: italic; color: rgba(255, 255, 255, 0.55) !important; }
.form-status { display: none !important; }

@keyframes vel-spin { to { transform: rotate(360deg); } }
@keyframes vel-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===================================================================
   APPARITION AU CHARGEMENT (staggered)
   =================================================================== */
@keyframes vel-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.vel-reveal { opacity: 0; animation: vel-rise 1s var(--vel-ease) forwards; }
.vel-reveal-1 { animation-delay: 0.1s; }
.vel-reveal-2 { animation-delay: 0.25s; }
.vel-reveal-3 { animation-delay: 0.4s; }
.vel-reveal-4 { animation-delay: 0.55s; }
.vel-reveal-5 { animation-delay: 0.7s; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
    .vel-hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
    .vel-hero-card { justify-self: stretch; max-width: none; }
    .vel-aura { inset: -12% -12% 28% -28%; }
    .vel-domain-grid { grid-template-columns: repeat(2, 1fr); }
    .vel-diff-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .vel-intro-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .vel-intro-aside { position: static; }
    .vel-intro-mark { display: none; }
    .vel-approach-head { grid-template-columns: 1fr; gap: 1.4rem; }
    .vel-steps { grid-template-columns: repeat(2, 1fr); }
    .apple-footer-main { grid-template-columns: 1fr; gap: 2.4rem; }
}

@media (max-width: 600px) {
    .vel-section { padding: 4.5rem 0; }
    .vel-intro { padding: 4.5rem 0; }
    .vel-domain-grid { grid-template-columns: 1fr; }
    .vel-steps { grid-template-columns: 1fr; }
    .vel-hero-title { font-size: clamp(2.6rem, 11vw, 3.4rem); }
    .apple-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   ACCESSIBILITÉ — mouvement réduit
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .vel-reveal { opacity: 1; }
}