/* ══════════════════════════════════════════════════════════════════════
   FABRANOVA — style.css
   Complète le build Tailwind (tailwind.css) : composants non utilitaires
   (header, menu mobile, chatbot, loader), ergonomie tactile, accessibilité.
   Chargé APRÈS tailwind.css : pas besoin de !important pour surcharger.
   Mode clair uniquement — le dark mode a été retiré de la charte.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. HEADER ───────────────────────────────────────────────────────── */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 rgba(26, 26, 58, 0.07);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Au scroll, le header se densifie légèrement (classe posée par script.js). */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 -1px 0 rgba(26, 26, 58, 0.07),
                0 12px 32px -24px rgba(26, 26, 58, 0.45);
}

/* Le logo : fond dégradé de marque sous l'image.
   ATTENTION — `logo.png` est absent du dépôt alors que les 9 pages le
   référencent (en-tête, pied de page, favicon, og:image). Tant qu'il n'est pas
   ajouté, ce fond évite l'icône « image cassée » : on voit un disque aux
   couleurs de la marque. Une fois le fichier en place, il le recouvre. */
.brand-mark {
    background: linear-gradient(135deg, #6D3BD6 0%, #C02BA8 52%, #1FA7E0 100%);
}

/* Lien de navigation : soulignement animé en dégradé de marque. */
.nav-link {
    position: relative;
    color: #585878;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.4rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6D3BD6, #1FA7E0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
    color: #1A1A3A;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Menu déroulant « Nos Solutions » : ouvert au survol ET au focus clavier. */
.dropdown-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content,
.dropdown.is-open .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── 2. MENU MOBILE ──────────────────────────────────────────────────── */

/* Plein écran, au-dessus de tout (intro : 10001). Fermé, il est invisible et
   ne capte aucun clic. `dvh` suit la barre d'adresse ; `vh` reste en repli.
   overflow-y n'est qu'un filet pour un écran minuscule ou un texte très agrandi :
   aux formats testés, rien ne défile. */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #FFFFFF;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1024px) {
    .mobile-menu { display: none; }
}

/* Les traits reprennent ceux du burger (mêmes position et épaisseur), puis se
   croisent à l'ouverture. */
.menu-x {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
}

.menu-x > span {
    position: absolute;
    left: 4px;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-x > span:nth-child(1) { top: 5px; }
.menu-x > span:nth-child(2) { top: 11px; }
.menu-x > span:nth-child(3) { top: 17px; }

.mobile-menu.is-open .menu-x > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu.is-open .menu-x > span:nth-child(2) { opacity: 0; }
.mobile-menu.is-open .menu-x > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
}

.menu-main {
    display: flex;
    align-items: center;
    min-height: clamp(2.75rem, 6.4dvh, 3.25rem);
    color: #0E1525;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.menu-main[aria-current="page"] { color: #6D3BD6; }

.menu-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.menu-pills > li:last-child { grid-column: 1 / -1; }

.menu-pill {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: clamp(2.25rem, 5.2dvh, 2.75rem);
    padding: 0.125rem 0.625rem;
    border-radius: 0.75rem;
    background: rgba(109, 59, 214, 0.07);
    color: #0E1525;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.12;
}

.menu-pill:active,
.menu-pill[aria-current="page"] {
    background: rgba(109, 59, 214, 0.16);
    color: #5A2DBB;
}

.menu-foot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.menu-cta {
    width: 100%;
    min-height: 3rem;
}

.menu-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 0.5rem;
    font-size: 0.8125rem;
}

.menu-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    color: #3D4A63;
}

/* Écran bas (barre d'adresse comprise) : on réduit au lieu de faire défiler. */
@media (max-height: 639px) {
    .mobile-menu > .custom-container:first-child { margin-bottom: -0.75rem; }
    .mobile-menu-body { gap: 0.25rem; padding-bottom: 0.25rem; }
    .menu-main { font-size: 1.125rem; }
    .menu-pills { gap: 0.25rem; margin-bottom: 0; }
    .menu-pill { min-height: 2rem; font-size: 0.8125rem; line-height: 1.05; padding-inline: 0.5rem; }
    .menu-cta { min-height: 2.75rem; padding-block: 0.5rem; }
    .menu-contact a { min-height: 1.25rem; }
    .menu-foot { gap: 0.125rem; }
}

/* Paysage : deux colonnes de liens à gauche, les solutions à droite. */
@media (orientation: landscape) and (max-height: 560px) {
    .menu-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 0.7fr)) minmax(0, 2fr);
        column-gap: 0.75rem;
        align-items: start;
    }

    .menu-main { font-size: 1.0625rem; min-height: 2.75rem; }
    .menu-pills-item { grid-column: 3; grid-row: 1 / span 3; }
    .menu-pill { min-height: 2rem; }
    .menu-foot { flex-direction: row; align-items: center; gap: 1rem; }
    .menu-cta { flex: 1 1 0; }
    .menu-contact { flex: none; }
}

/* Le chatbot flottant n'a rien à faire au-dessus du menu ouvert. */
body.menu-open #chatbot-container {
    display: none;
}

/* ── 3. LOADER D'ACCUEIL ─────────────────────────────────────────────── */

/* L'écran d'accueil couvrait tout le viewport à z-index 9999 SANS
   pointer-events:none, et restait en place environ deux secondes. Pendant ce
   temps il avalait chaque tap : c'était la cause des boutons du hero qui
   « ne répondaient pas » sur mobile, juste après l'arrivée sur la page.
   Deux correctifs :
   — `pointer-events: none`, définitif. Il n'y a rien à cliquer dessus, il ne
     doit donc jamais intercepter quoi que ce soit, même pendant son fondu.
   — la disparition est pilotée par CSS et non plus par un minuteur JS : même
     si le JavaScript ne s'exécute pas, la page redevient utilisable. */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    pointer-events: none;
    animation: loaderOut 0.6s ease 1.3s forwards;
}

/* script.js pose cette classe quand l'écran a déjà été vu récemment. */
#loader.est-vu {
    display: none;
}

@keyframes loaderOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ── 4. CHATBOT FLOTTANT (réhabillé en clair) ────────────────────────── */

#chatbot-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.875rem;
    /* Le conteneur a la taille de la fenêtre de chat même fermée : sans
       ceci, il avalait les taps sur tout le bas droit de l'écran mobile
       (les boutons du hero, entre autres). Seuls ses enfants actifs
       captent le pointeur. */
    pointer-events: none;
}

#chatbot-toggle {
    pointer-events: auto;
}

#chatbot-window {
    width: min(340px, calc(100vw - 2.5rem));
    border-radius: 1.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, 0.06),
                0 32px 64px -24px rgba(26, 26, 58, 0.30);
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: bottom right;
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1),
                opacity 0.25s ease,
                visibility 0s linear 0.35s;
    margin-bottom: 0;
}

/* Fenêtre fermée : invisible ET hors du parcours clavier (visibility). */
#chatbot-window.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

#chatbot-messages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: #FAFAFC;
}

#chatbot-messages::-webkit-scrollbar {
    width: 4px;
}

#chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 58, 0.18);
    border-radius: 10px;
}

.chat-bubble {
    max-width: 85%;
    padding: 0.6875rem 0.9375rem;
    border-radius: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.45;
    animation: chatIn 0.3s ease-out;
}

.chat-bubble.bot {
    align-self: flex-start;
    background: #FFFFFF;
    color: #1A1A3A;
    border-bottom-left-radius: 0.3125rem;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, 0.06);
}

.chat-bubble.user {
    align-self: flex-end;
    background: linear-gradient(100deg, #6D3BD6, #8E35C8);
    color: #FFFFFF;
    border-bottom-right-radius: 0.3125rem;
}

@keyframes chatIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. MOUVEMENT ────────────────────────────────────────────────────── */

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes bloomDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(2%, -3%, 0) scale(1.08); }
}

/* Entrée du hero : remplace les tweens GSAP (une dépendance en moins). */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-rise {
    animation: heroRise 0.9s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-rise-1 { animation-delay: 0.05s; }
.hero-rise-2 { animation-delay: 0.18s; }
.hero-rise-3 { animation-delay: 0.32s; }
.hero-rise-4 { animation-delay: 0.46s; }

#chatbot-toggle {
    animation: floatY 6s ease-in-out infinite;
}

#chatbot-toggle:hover {
    animation-play-state: paused;
}

/* ── 6. ACCESSIBILITÉ : prefers-reduced-motion ───────────────────────── */
/* On neutralise TOUT mouvement décoratif : flottements, dérive des halos,
   révélation au scroll, transitions de survol. Le contenu reste visible. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    .pill-float,
    .bloom-drift,
    .bloom-drift-2,
    #chatbot-toggle {
        animation: none !important;
    }

    .hero-rise {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .card-lift:hover {
        transform: none;
    }
}

/* ── 7. ERGONOMIE TACTILE (iPhone & écrans tactiles) ─────────────────── */
/* Supprime le délai tactile de ~300 ms et le double-tap-zoom de Safari iOS,
   et retire le flash gris natif au profit de notre propre retour visuel. */

a, button, input, textarea, select, label,
[role="button"], [onclick], .chat-question {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    a:active,
    button:active,
    [role="button"]:active,
    .chat-question:active,
    input[type="submit"]:active,
    button[type="submit"]:active {
        transform: scale(0.97);
        opacity: 0.92;
        transition: transform 0.08s ease, opacity 0.08s ease;
    }

    /* Pas de survol persistant sur tactile : les cartes restent à plat. */
    .card-lift:hover {
        transform: none;
    }

    /* Cible tactile confortable pour les boutons et les liens de navigation.
       `min-height` n'a aucun effet sur un élément inline, donc les liens au
       fil du texte ne sont pas affectés : seuls les éléments déjà en bloc ou
       en flex grandissent, ce qui est exactement l'intention. */
    .btn,
    .btn-dark,
    .btn-brand,
    .btn-ghost,
    .btn-on-navy,
    .chat-question,
    button[type="submit"],
    input[type="submit"] {
        min-height: 44px;
    }
}

/* ── 10. RIEN DE DÉCORATIF NE DOIT INTERCEPTER UN CLIC ───────────────────
   Garde-fou général : tout ce qui est purement visuel passe en
   `pointer-events: none`, et les éléments interactifs repassent au-dessus.
   Cela couvre les halos, les voiles de dégradé, les textures et les traits
   décoratifs posés en `absolute` sur les pages héritées. */

.bloom,
.bloom-wrap,
.bloom-wrap-top,
.work-veil,
.work-cta,
.voile-survol,
.deco,
[aria-hidden="true"].absolute,
[class*="blur-["],
[class*="cubes.png"] {
    pointer-events: none;
}

/* Voile de légende des vignettes du portfolio. Il n'apparaissait qu'au
   survol, donc jamais sur tactile. Il est désormais visible en permanence
   sur écran tactile, et son apparition au survol est franche sur desktop. */
.voile-survol {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.group:hover .voile-survol,
.group:focus-within .voile-survol {
    opacity: 1;
}

@media (hover: none) {
    .voile-survol {
        opacity: 1;
    }
}

/* Les composants d'action repassent explicitement au-dessus des décors.
   On se limite aux composants du design system, tous déjà en inline-flex :
   poser `position` sur chaque `input` ou chaque `label` du site ferait courir
   un risque de régression de mise en page sans rien résoudre, puisque le vrai
   correctif est au-dessus — c'est le décor qui ne doit plus capter le clic. */
.btn,
.btn-dark,
.btn-brand,
.btn-ghost,
.btn-on-navy,
.price-tag,
.chat-question {
    position: relative;
    z-index: 2;
}

/* ── 8. FRISE CHRONOLOGIQUE (anciennes pages, conservé pour compatibilité) ──── */
/* Ces règles vivaient dans un <style> propre à chaque page. Elles sont
   désormais centralisées ici, et le trait passe du gris sombre (#262626)
   à un liseré clair cohérent avec la charte. */

.timeline-step::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 24px;
    bottom: -32px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(109, 59, 214, .35), rgba(31, 167, 224, .18));
}

.timeline-step:last-child::before {
    display: none;
}

@media (min-width: 768px) {
    .timeline-horizontal {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .timeline-horizontal .timeline-step {
        flex: 1;
        position: relative;
        padding-top: 3rem;
        padding-left: 0;
        text-align: center;
    }

    .timeline-horizontal .timeline-step::before {
        top: 11px;
        left: 50%;
        width: 100%;
        height: 2px;
        bottom: auto;
        background: linear-gradient(to right, rgba(109, 59, 214, .35), rgba(31, 167, 224, .18));
    }

    .timeline-horizontal .timeline-step:last-child::before {
        display: none;
    }

    .timeline-horizontal .timeline-icon {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Bulle WhatsApp de la page Contact : apparition différée. */
.tooltip-delayed {
    opacity: 0;
    transform: translateY(10px);
    animation: showTooltip 0.5s ease forwards;
    animation-delay: 3s;
}

@keyframes showTooltip {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Courbes de liaison animées du hero de la page Vitrine. */
@keyframes dash {
    to { stroke-dashoffset: 0; }
}

.path-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: dash 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tooltip-delayed {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .path-line {
        animation: none !important;
        stroke-dashoffset: 0;
    }
}

/* ── 9. DIVERS ───────────────────────────────────────────────────────── */

/* Les halos des pages intérieures (.bloom-wrap-top) s'ancrent sur <main>,
   et le contenu doit toujours passer AU-DESSUS du halo. */
main {
    position: relative;
}

main > *:not(.bloom-wrap-top):not(.bloom-wrap) {
    position: relative;
    z-index: 1;
}

/* Ancres : on compense la hauteur du header fixe. */
[id] {
    scroll-margin-top: 6.5rem;
}

/* Accordéons FAQ : on masque le marqueur natif. */
details > summary {
    list-style: none;
    cursor: pointer;
}

details > summary::-webkit-details-marker {
    display: none;
}

/* Jamais de débordement horizontal, à aucune largeur.
   `clip` et non `hidden` : `hidden` sur html ET body fait de body un
   conteneur de défilement, ce qui casse tout `position: sticky`. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

@media print {
    .site-header, #chatbot-container, #loader, .bloom-wrap { display: none !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   11. REFONTE « SOLUTIONS IA » — animations
   Courbe maison : cubic-bezier(.2,.8,.2,1), déclarée aussi côté GSAP
   sous le nom « fabra » (js/main.js).
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --ease-fabra: cubic-bezier(.2, .8, .2, 1);
    --ease-settle: cubic-bezier(.16, 1, .3, 1);
}

/* Barre de progression de lecture (créée par js/main.js). */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    height: 2px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* ── Hero de l'accueil ───────────────────────────────────────────────── */

/* Sur grand écran, la section est plus haute que l'écran et son contenu
   reste collé en haut : c'est pendant ce trajet que le ruban se déroule.
   La place est réservée en CSS (aucun épinglage JS, donc aucun saut de mise
   en page) et uniquement quand le mouvement est permis. */
.hero-track {
    position: relative;
}

.hero-sticky {
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .js .hero-track {
        height: 175vh;
    }

    .js .hero-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 640px;
    }
}

.hero-track.ribbon-off {
    height: auto;
}

.ribbon-off .hero-sticky {
    position: relative;
    height: auto;
}

/* Le canvas couvre toute la section, derrière le texte, et ne capte rien. */
.ribbon-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s var(--ease-settle);
}

.ribbon-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.ribbon-live .ribbon-stage {
    opacity: 1;
}

/* Emplacement du ruban : sa taille est fixée d'avance (aspect-ratio), le
   canvas et l'image de repli s'y calent sans décaler la page. */
.ribbon-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    pointer-events: none;
}

.ribbon-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .6s ease .2s;
}

.ribbon-live .ribbon-fallback {
    opacity: 0;
}

.ribbon-shadow {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 4%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(38, 33, 92, .16), transparent);
    filter: blur(4px);
    opacity: calc(1 - var(--ribbon-k, 0) * 2.5);
}

.ribbon-labels {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.ribbon-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: .4rem .8rem;
    border-radius: 9999px;
    background: #FFFFFF;
    color: #0E1525;
    font-family: Figtree, system-ui, sans-serif;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .05), 0 10px 24px -12px rgba(26, 26, 58, .28);
    will-change: transform, opacity;
}

/* Titre du hero : chaque mot monte depuis une ligne invisible, en CSS pur,
   dès le premier affichage. Il ne dépend ni du JavaScript ni de la 3D. */
.hero-title .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 .03em .14em;
    margin: 0 -.03em -.14em;
}

.hero-title .w > span {
    display: inline-block;
    animation: wordUp .95s var(--ease-fabra) both;
    animation-delay: calc(.06s + var(--i, 0) * .06s);
}

@keyframes wordUp {
    from { transform: translateY(108%); }
    to   { transform: none; }
}

/* Dégradé violet → bleu réparti mot par mot : chaque mot porte sa propre
   tranche (--a → --b), le segment se lit comme un seul dégradé continu. */
.grad-word {
    background-image: linear-gradient(100deg, var(--a), var(--b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Titres de section découpés par SplitText (js/reveal.js). */
.split-word {
    will-change: transform;
}

/* ── Inclinaison 3D et boutons magnétiques (js/tilt.js) ──────────────── */

[data-tilt] {
    position: relative;
    transition: box-shadow .4s ease;
    will-change: transform;
}

.tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(109, 59, 214, .08), transparent 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.is-tilting .tilt-glare {
    opacity: 1;
}

/* GSAP pilote la translation : la transition CSS sur transform la freinerait. */
[data-magnetic] {
    transition-property: box-shadow, background-color, color;
}

/* ── « Ce que vous faites encore à la main » : 3 petites scènes SVG ──── */
/* L'état de base est l'état final (lisible sans animation). Les boucles ne
   tournent que tant que la carte est à l'écran (.is-inview, js/reveal.js). */

.lt-scene {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.lt-scene * {
    transform-box: fill-box;
    transform-origin: center;
}

.js .lt-anim:not(.is-inview) * {
    animation-play-state: paused !important;
}

.lt-phone  { animation: ltBuzz 2.4s ease-in-out infinite; }
.lt-wave   { opacity: .55; animation: ltWave 2.4s ease-out infinite; }
.lt-wave-2 { animation-delay: .12s; }
.lt-n      { opacity: 0; }
.lt-n3     { opacity: 1; }
.lt-n1     { animation: ltN1 7.2s linear infinite; }
.lt-n2     { animation: ltN2 7.2s linear infinite; }
.lt-n3     { animation: ltN3 7.2s linear infinite; }
.lt-badge  { animation: ltBadge 2.4s var(--ease-settle) infinite; }

@keyframes ltBuzz {
    0%, 30%, 100% { transform: rotate(0); }
    4%  { transform: rotate(-6deg); }
    8%  { transform: rotate(6deg); }
    12% { transform: rotate(-6deg); }
    16% { transform: rotate(5deg); }
    20% { transform: rotate(-3deg); }
    24% { transform: rotate(2deg); }
}

@keyframes ltWave {
    0%, 32%, 100% { opacity: 0; }
    6%, 24% { opacity: 1; }
}

@keyframes ltBadge {
    0%, 26% { transform: scale(1); }
    32% { transform: scale(1.22); }
    44%, 100% { transform: scale(1); }
}

@keyframes ltN1 { 0%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes ltN2 { 0%, 32% { opacity: 0; } 33%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes ltN3 { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }

.lt-star  { animation: ltStar 5s var(--ease-fabra) infinite; animation-delay: calc(var(--i) * .16s); }
.lt-caret { animation: ltBlink 1.1s steps(2, jump-none) infinite; }

@keyframes ltStar {
    0% { transform: scale(0); }
    7% { transform: scale(1.3); }
    11%, 100% { transform: scale(1); }
}

@keyframes ltBlink {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.lt-envelope { animation: ltDrop 6s var(--ease-fabra) infinite; animation-delay: calc(var(--i) * .55s); }

@keyframes ltDrop {
    0%   { transform: translateY(-110px); opacity: 0; }
    6%   { opacity: 1; }
    13%  { transform: translateY(0); }
    16%  { transform: translateY(-5px); }
    19%, 100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lt-scene *,
    .hero-title .w > span {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   12. ACCUEIL DÉVELOPPÉ — sections 2.3 à 2.16
   Règle commune : l'état de base est l'état final et lisible. Les états
   « avant animation » ne s'appliquent que sous `.js`, et le mouvement
   réduit coupe tout (règle globale du §6 et règles ci-dessous).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Petites scènes SVG supplémentaires ──────────────────────────────── */

.lt-fill  { transform-origin: left center; animation: ltFill 4.8s var(--ease-fabra) infinite; animation-delay: calc(var(--i) * .8s); }
.lt-doc   { animation: ltSlide 5.2s var(--ease-fabra) infinite; animation-delay: calc(var(--i) * .45s); }
.lt-bar   { transform-origin: center bottom; animation: ltBar 5s var(--ease-fabra) infinite; animation-delay: calc(var(--i) * .12s); }
.lt-trend { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ltDraw 5s ease-in-out infinite; }
.lt-mark  { transform-origin: left center; animation: ltFill 4.2s var(--ease-fabra) infinite; animation-delay: calc(.4s + var(--i) * .5s); }
.lt-pulse { stroke-dasharray: .16 .84; stroke-dashoffset: 1; animation: ltPulse 2.4s linear infinite; animation-delay: calc(var(--i) * .6s); }
.lt-core  { animation: ltBadge 2.4s var(--ease-settle) infinite; }
.lt-log   { animation: ltLog 4.5s var(--ease-fabra) infinite; animation-delay: calc(var(--i) * .5s); }

@keyframes ltFill  { 0% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
@keyframes ltBar   { 0% { transform: scaleY(0); } 14%, 100% { transform: scaleY(1); } }
@keyframes ltDraw  { 0%, 20% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes ltPulse { to { stroke-dashoffset: 0; } }
@keyframes ltSlide {
    0%   { transform: translateX(90px) rotate(14deg); opacity: 0; }
    6%   { opacity: 1; }
    15%, 100% { transform: none; opacity: 1; }
}
@keyframes ltLog {
    0%   { transform: translateX(-10px); opacity: 0; }
    10%, 100% { transform: none; opacity: 1; }
}

/* ── Révélation ponctuelle ([data-reveal], js/reveal.js) ─────────────── */

.js .compare:not(.is-revealed) .compare-bot   { opacity: 0; transform: translateX(-28px); }
.js .compare:not(.is-revealed) .compare-agent { opacity: 0; transform: translateX(28px) scale(.97); }
.compare-card { transition: opacity .7s var(--ease-fabra), transform .9s var(--ease-fabra); }
.compare-agent { transition-delay: .15s; }

.compare-bot {
    background: rgba(255, 255, 255, .6);
    box-shadow: inset 0 0 0 1px rgba(14, 21, 37, .08);
}

.compare-agent {
    border: 2px solid transparent;
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0) border-box;
    box-shadow: 0 24px 48px -28px rgba(109, 59, 214, .45);
}

.compare-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: .125rem;
    border-radius: 9999px;
    background: rgba(14, 21, 37, .06);
    color: #6B7694;
}

.trust-icon path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.js .trust-card:not(.is-revealed) .trust-icon path { stroke-dashoffset: 1; }
.trust-card .trust-icon path { transition: stroke-dashoffset 1.3s var(--ease-fabra); transition-delay: calc(.2s + var(--i) * .15s); }

/* ── Le principe (épinglé) ───────────────────────────────────────────── */

.how-step {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border-radius: 1.5rem;
    transition: background-color .4s ease, box-shadow .4s ease, opacity .4s ease;
}

.how-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px rgba(109, 59, 214, .35);
    color: #6D3BD6;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}

.how.is-pinned .how-step { opacity: .5; }
.how.is-pinned .how-step.is-active {
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .05), 0 16px 32px -20px rgba(26, 26, 58, .25);
}
.how.is-pinned .how-step.is-active .how-num,
.how:not(.is-pinned) .how-num {
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    color: #FFFFFF;
    box-shadow: 0 8px 18px -8px rgba(109, 59, 214, .7);
}

.how-stage {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.how-card {
    padding: 1.5rem;
    border-radius: 2rem;
}

@media (min-width: 640px) {
    .how-card { padding: 1.75rem 2rem; }
}

.how-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.how-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 9999px;
    background: rgba(14, 21, 37, .05);
    color: #0E1525;
    font-size: .75rem;
    font-weight: 700;
}

.how-chip-violet { background: rgba(109, 59, 214, .1); color: #6D3BD6; }
.how-chip-cyan   { background: rgba(31, 167, 224, .12); color: #0B6E92; }

.how-status {
    padding: .3rem .7rem;
    border-radius: 9999px;
    background: rgba(192, 43, 168, .09);
    color: #A3238E;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.how-tag {
    padding: .4rem .75rem;
    border-radius: 9999px;
    background: #FAFAFC;
    box-shadow: inset 0 0 0 1px rgba(109, 59, 214, .2);
}

/* Les passages compris se surlignent quand l'étape 2 passe au premier plan. */
.how-mark {
    padding: 0 .12em;
    border-radius: .25em;
    color: inherit;
    background: linear-gradient(rgba(109, 59, 214, .16), rgba(109, 59, 214, .16)) no-repeat 0 0 / 100% 100%;
    transition: background-size .7s var(--ease-fabra);
}

.how.is-pinned .how-card:not(.is-active) .how-mark { background-size: 0% 100%; }
.how-mark:nth-of-type(2) { transition-delay: .12s; }
.how-mark:nth-of-type(3) { transition-delay: .24s; }
.how-mark:nth-of-type(4) { transition-delay: .36s; }

.how-note { display: flex; justify-content: flex-end; }

/* Mode épinglé (grand écran, JS, mouvement permis) : les trois cartes sont
   empilées au même endroit, en perspective ; js/scroll-story.js les fait
   avancer et reculer. */
.how.is-pinned .how-stage {
    display: grid;
    perspective: 1400px;
}

.how.is-pinned .how-card {
    grid-area: 1 / 1;
    will-change: transform, opacity;
}

.how.is-pinned .how-note {
    grid-area: 2 / 1;
    margin-top: 1.25rem;
}

/* ── Par fonction : onglets ──────────────────────────────────────────── */

.tabs-scroller {
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 4px 20px;
}

.tabs-scroller::-webkit-scrollbar { display: none; }

html:not(.js) .tabs-scroller { display: none; }

.tabs-bar {
    position: relative;
    display: flex;
    gap: .25rem;
    width: max-content;
    margin-inline: auto;
    padding: .375rem;
    border-radius: 9999px;
    background: #FAFAFC;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 58, .06);
}

.tab {
    position: relative;
    z-index: 1;
    min-height: 44px;
    padding: .625rem 1.125rem;
    border-radius: 9999px;
    color: #3D4A63;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .3s ease;
}

.tab[aria-selected="true"] { color: #0E1525; }
.tab:hover { color: #0E1525; }

.tabs-indicator {
    position: absolute;
    top: .375rem;
    bottom: .375rem;
    left: 0;
    width: 0;
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(109, 59, 214, .14), 0 8px 18px -10px rgba(26, 26, 58, .35);
    pointer-events: none;
}

.js .tab-panel[data-inactive] { display: none; }

.js .tab-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

html:not(.js) .tab-panel + .tab-panel { margin-top: 2.5rem; }

.tabs-panels { position: relative; }

.tab-item-num {
    display: inline-block;
    background: linear-gradient(100deg, #6D3BD6, #185FA5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .04em;
}

/* ── Secteurs : filtres et cartes qui se retournent ──────────────────── */

.sector-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

html:not(.js) .sector-filters { display: none; }

.filter-chip {
    min-height: 44px;
    padding: .625rem 1.125rem;
    border-radius: 9999px;
    background: #FFFFFF;
    color: #0E1525;
    font-size: .875rem;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(26, 26, 58, .12);
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.filter-chip:hover { box-shadow: inset 0 0 0 1px rgba(109, 59, 214, .4); }

.filter-chip[aria-pressed="true"] {
    background: #0E1525;
    color: #FFFFFF;
    box-shadow: none;
}

.sector {
    position: relative;
    perspective: 1200px;
}

.sector-inner {
    display: grid;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .85s var(--ease-fabra);
}

.sector-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: 2rem;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .05), 0 1px 2px rgba(26, 26, 58, .04), 0 8px 24px -12px rgba(26, 26, 58, .10);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sector-back {
    transform: rotateY(180deg);
    background: linear-gradient(160deg, #FFFFFF 40%, rgba(109, 59, 214, .07));
    box-shadow: 0 0 0 1px rgba(109, 59, 214, .14), 0 16px 32px -20px rgba(109, 59, 214, .4);
}

.sector.is-flipped .sector-inner { transform: rotateY(180deg); }

.sector-cat {
    color: #6B7694;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.agent-badge {
    display: inline-flex;
    width: fit-content;
    padding: .375rem .75rem;
    border-radius: 9999px;
    background: rgba(109, 59, 214, .1);
    color: #6D3BD6;
    font-size: .75rem;
    font-weight: 700;
}

.sector-hint {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: auto;
    padding-top: 1.5rem;
    color: #6D3BD6;
    font-size: .875rem;
    font-weight: 700;
}

.sector-hint svg { transition: transform .35s var(--ease-fabra); }
.sector:hover .sector-hint svg { transform: translateX(4px); }

/* Toute la carte est le bouton : une couche transparente posée dessus. */
.sector-toggle {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 2rem;
    cursor: pointer;
}

.sector-toggle:focus-visible {
    outline: 2px solid #6D3BD6;
    outline-offset: 3px;
}

.scenario { counter-reset: step; }

.scenario li {
    position: relative;
    padding: 0 0 1.125rem 2.5rem;
    color: #0E1525;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    counter-increment: step;
}

.scenario li::before {
    content: counter(step);
    position: absolute;
    top: -.1rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 800;
}

.scenario li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.75rem;
    bottom: .1rem;
    left: .8125rem;
    width: 2px;
    background: rgba(109, 59, 214, .2);
}

/* Sans JS : les deux faces l'une sous l'autre, rien à retourner. */
html:not(.js) .sector-inner { display: flex; flex-direction: column; gap: .75rem; }
html:not(.js) .sector-back { transform: none; }
html:not(.js) .sector-toggle,
html:not(.js) .sector-hint { display: none; }

/* ── Tailles d'entreprise : blocs qui se construisent ────────────────── */

.size-build {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.size-block {
    aspect-ratio: 2 / 1;
    border-radius: .75rem;
    background: rgba(109, 59, 214, .14);
}

.size-block:nth-child(3n + 2) { background: rgba(192, 43, 168, .14); }
.size-block:nth-child(3n)     { background: rgba(31, 167, 224, .18); }

/* ── Solutions ───────────────────────────────────────────────────────── */

.solution-card {
    color: inherit;
    text-decoration: none;
}

.solution-card:hover,
.solution-card:focus-visible {
    box-shadow: 0 0 0 1px rgba(109, 59, 214, .14), 0 2px 4px rgba(14, 21, 37, .06), 0 32px 60px -24px rgba(14, 21, 37, .26);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: #6D3BD6;
    font-weight: 700;
}

.link-arrow [aria-hidden="true"] { transition: transform .35s var(--ease-fabra); }
a:hover .link-arrow [aria-hidden="true"],
a.link-arrow:hover [aria-hidden="true"] { transform: translateX(4px); }

/* ── Calculateur ─────────────────────────────────────────────────────── */

.calc-value {
    color: #0E1525;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calc-value span {
    font-family: Figtree, sans-serif;
    font-size: .8125rem;
    font-weight: 600;
}

/* Curseur : cible tactile de 44 px, piste remplie au dégradé de marque. */
.calc-range {
    --fill: 50%;
    width: 100%;
    height: 44px;
    margin-top: .25rem;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.calc-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8) 0 0 / var(--fill) 100% no-repeat, rgba(14, 21, 37, .1);
}

.calc-range::-moz-range-track {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8) 0 0 / var(--fill) 100% no-repeat, rgba(14, 21, 37, .1);
}

.calc-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 3px solid #FFFFFF;
    border-radius: 9999px;
    background: #6D3BD6;
    box-shadow: 0 2px 8px rgba(109, 59, 214, .45);
    -webkit-appearance: none;
    appearance: none;
    transition: transform .2s var(--ease-settle);
}

.calc-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #FFFFFF;
    border-radius: 9999px;
    background: #6D3BD6;
    box-shadow: 0 2px 8px rgba(109, 59, 214, .45);
}

.calc-range:active::-webkit-slider-thumb { transform: scale(1.15); }

.calc-big {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

/* ── Intégrations : ruban sans fin ───────────────────────────────────── */

.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 70s linear infinite;
}

.marquee-list {
    display: flex;
    gap: .75rem;
    padding: .5rem .75rem .5rem 0;
}

.tool-pill { font-size: .9375rem; }

@keyframes marquee {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee { -webkit-mask-image: none; mask-image: none; }
    .marquee-track { width: auto; animation: none !important; }
    .marquee-list { flex-wrap: wrap; justify-content: center; padding-inline: 20px; }
    .marquee-list[aria-hidden="true"] { display: none; }
}

/* ── Méthode : la ligne qui se dessine ───────────────────────────────── */

.method-steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
}

.method-step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.25rem;
    align-items: start;
}

.method-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px rgba(14, 21, 37, .1);
    color: #6B7694;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    transition: background .5s ease, color .5s ease, box-shadow .5s ease, transform .6s var(--ease-settle);
}

.method-num.is-lit,
html:not(.js) .method-num {
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    color: #FFFFFF;
    box-shadow: 0 10px 22px -10px rgba(109, 59, 214, .8);
}

.method-num.is-lit { transform: scale(1.08); }

.method-line {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.method-line path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.method-track { stroke: rgba(14, 21, 37, .1); }

.method-draw {
    stroke: #6D3BD6;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.is-drawing .method-draw { stroke-dashoffset: var(--draw, 1); }

.method-line-x { display: none; }

.method-line-y {
    top: 0;
    bottom: 0;
    left: 4px;
    width: 40px;
    height: 100%;
}

@media (min-width: 1024px) {
    .method-steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .method-5 .method-steps { grid-template-columns: repeat(5, 1fr); }
    .method-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .method-line-x { display: block; top: 4px; left: 0; width: 100%; height: 40px; }
    .method-line-y { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .is-drawing .method-draw { stroke-dashoffset: 0; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq[open] .faq-body { animation: faqOpen .5s var(--ease-fabra); }

@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .faq[open] .faq-body { animation: none; }
    .sector-inner { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   12. SITE MULTIPAGES — pages intérieures et photos
   ══════════════════════════════════════════════════════════════════════ */

/* Séparateur avant « Comment fonctionne un agent IA » dans le menu. */
.dropdown-sep {
    margin-top: .375rem;
    padding-top: .375rem;
    box-shadow: inset 0 1px 0 rgba(26, 26, 58, .07);
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────── */

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    color: #6B7694;
    font-size: .8125rem;
    font-weight: 600;
}

.breadcrumb li + li::before {
    content: '›';
    margin-right: .5rem;
    color: rgba(107, 118, 148, .6);
}

.breadcrumb a {
    display: inline-block;
    padding-block: .25rem;
    transition: color .2s ease;
}

.breadcrumb a:hover { color: #6D3BD6; }
.breadcrumb [aria-current="page"] { color: #0E1525; }

/* ── Photos ──────────────────────────────────────────────────────────────
   Toutes les photos passent par .photo : coins arrondis des cartes et un
   léger voile du dégradé de marque, en plus de la teinte déjà appliquée
   aux fichiers, pour que l'ensemble reste homogène. */
.photo {
    position: relative;
    overflow: hidden;
    border-radius: 2.5rem;
    background: #F1EFF8;
    isolation: isolate;
}

.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo::after,
.sector-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(109, 59, 214, .14), rgba(192, 43, 168, .05) 50%, rgba(31, 167, 224, .12));
    box-shadow: inset 0 0 0 1px rgba(26, 26, 58, .06);
    pointer-events: none;
}

/* Bandeau du haut des pages intérieures : il se pose doucement. */
.photo-band { aspect-ratio: 3 / 2; }
.photo-band img { animation: bandIn 1.6s var(--ease-settle) both; }

@media (min-width: 640px) {
    .photo-band { aspect-ratio: 16 / 7; }
}

@keyframes bandIn {
    from { transform: scale(1.07); }
    to   { transform: none; }
}

/* Photo entre deux sections : l'image dépasse de 10 % en haut et en bas,
   GSAP la fait glisser au scroll (js/main.js, initParallax). */
.photo-parallax { aspect-ratio: 4 / 3; }

.photo-parallax img {
    position: absolute;
    top: -10%;
    left: 0;
    height: 120%;
}

@media (min-width: 640px) {
    .photo-parallax { aspect-ratio: 21 / 9; }
}

/* Photo au recto des cartes secteurs, collée aux bords de la carte. */
.sector-photo {
    position: relative;
    margin: -1.75rem -1.75rem 1.25rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 2rem 2rem 0 0;
    background: #F1EFF8;
}

.sector-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-settle);
}

.sector:hover .sector-photo img { transform: scale(1.05); }

/* ── Prix ────────────────────────────────────────────────────────────── */

.price-line {
    display: inline-flex;
    width: fit-content;
    padding: .5rem .875rem;
    border-radius: 9999px;
    background: rgba(109, 59, 214, .07);
    box-shadow: inset 0 0 0 1px rgba(109, 59, 214, .16);
    color: #0E1525;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ── Les quatre niveaux d'automatisation : un escalier qui se monte ──── */

.level-steps {
    display: flex;
    align-items: flex-end;
    gap: .375rem;
    height: 3.5rem;
}

.level-steps span {
    flex: 1;
    border-radius: .5rem;
    background: linear-gradient(180deg, #C02BA8, #6D3BD6);
    transform-origin: 50% 100%;
    transition: transform .7s var(--ease-fabra);
}

.level-steps span:nth-child(1) { height: 25%; }
.level-steps span:nth-child(2) { height: 50%; transition-delay: .08s; }
.level-steps span:nth-child(3) { height: 75%; transition-delay: .16s; }
.level-steps span:nth-child(4) { height: 100%; transition-delay: .24s; }
.level-steps span.is-off { background: rgba(14, 21, 37, .07); }

.level {
    transition: opacity .7s var(--ease-fabra), transform .8s var(--ease-fabra);
    transition-delay: calc(var(--i) * .12s);
}

.js .levels:not(.is-revealed) .level { opacity: 0; transform: translateY(32px); }
.js .levels:not(.is-revealed) .level-steps span { transform: scaleY(0); }

@media (min-width: 1024px) {
    .level { margin-bottom: calc(var(--i) * 1.5rem); }
}

/* ── Garde-fous ──────────────────────────────────────────────────────── */

.guard-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(109, 59, 214, .1);
    color: #6D3BD6;
}

.guard {
    transition: opacity .7s var(--ease-fabra), transform .8s var(--ease-fabra);
    transition-delay: calc(var(--i) * .1s);
}

.js .guards:not(.is-revealed) .guard { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
    .photo-band img,
    .sector-photo img { animation: none; transition: none; }
    .level, .level-steps span, .guard { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   13. PAGES SOLUTIONS — animations signature (js/solutions.js)
   Sans JS ou en mouvement réduit, chaque scène affiche son état final.
   ══════════════════════════════════════════════════════════════════════ */

.sol-stage { position: relative; }
.sol-note { display: flex; justify-content: flex-end; margin-top: .875rem; }

/* ── Accueil client IA : la conversation et le mini-agenda ───────────── */

.chat-phone {
    max-width: 22rem;
    margin-inline: auto;
    padding: 1rem 1rem 1.25rem;
    border-radius: 2.25rem;
}

.chat-phone-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem .25rem 1rem;
    box-shadow: inset 0 -1px 0 rgba(26, 26, 58, .07);
}

.chat-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    color: #FFFFFF;
    font-size: .6875rem;
    font-weight: 800;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 16.5rem;
    padding-top: 1rem;
}

.cm {
    max-width: 86%;
    padding: .625rem .875rem;
    border-radius: 1.125rem;
    font-size: .875rem;
    line-height: 1.4;
}

.cm-user {
    align-self: flex-end;
    border-bottom-right-radius: .375rem;
    background: #0E1525;
    color: #FFFFFF;
}

.cm-bot {
    align-self: flex-start;
    border-bottom-left-radius: .375rem;
    background: rgba(109, 59, 214, .09);
    color: #0E1525;
}

.cm-typing {
    align-self: flex-start;
    display: none;
    gap: .25rem;
    padding: .8rem .9rem;
    border-radius: 1.125rem;
    background: rgba(109, 59, 214, .09);
}

.cm-typing.is-on { display: inline-flex; }

.cm-typing span {
    width: .4rem;
    height: .4rem;
    border-radius: 9999px;
    background: #6D3BD6;
    animation: typingDot 1s ease-in-out infinite;
}

.cm-typing span:nth-child(2) { animation-delay: .15s; }
.cm-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes typingDot {
    0%, 100% { opacity: .3; transform: none; }
    50%      { opacity: 1; transform: translateY(-3px); }
}

.mini-agenda {
    max-width: 22rem;
    margin: 1rem auto 0;
    padding: 1.25rem;
    border-radius: 1.75rem;
}

.mini-agenda li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
    font-size: .8125rem;
}

.mini-agenda time {
    width: 3.25rem;
    flex: none;
    color: #6B7694;
    font-weight: 600;
}

.slot {
    flex: 1;
    padding: .45rem .75rem;
    border-radius: .75rem;
    background: rgba(14, 21, 37, .05);
    color: #0E1525;
    font-weight: 600;
}

.slot-free {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(14, 21, 37, .12);
    color: #6B7694;
}

.slot-new {
    background: linear-gradient(100deg, rgba(109, 59, 214, .15), rgba(31, 167, 224, .15));
    color: #26215C;
}

/* Sur grand écran, l'agenda passe sous le téléphone, décalé vers la
   gauche et posé sur son bord bas : il ne couvre jamais la conversation. */
@media (min-width: 1024px) {
    .sol-chat .mini-agenda {
        position: relative;
        z-index: 1;
        width: 16rem;
        margin: -1rem 0 0 calc(50% - 13rem);
    }
}

/* ── Assistant administratif : les emails se rangent en piles 3D ─────── */

.sort-inbox {
    padding: 1.25rem;
    border-radius: 1.75rem;
}

.sort-mail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: .875rem;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .07), 0 6px 14px -10px rgba(26, 26, 58, .25);
    color: #0E1525;
    font-size: .8125rem;
    font-weight: 600;
}

.sort-mail + .sort-mail { margin-top: .4rem; }

.sort-mail small {
    flex: none;
    color: #6B7694;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sort-trays {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-top: 1rem;
    perspective: 900px;
}

.sort-tray {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1rem;
    border-radius: 1.25rem;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .06), 0 14px 24px -16px rgba(38, 33, 92, .35);
    color: #0E1525;
    font-size: .8125rem;
    font-weight: 700;
    transform: rotateX(16deg);
    transform-origin: 50% 100%;
}

.sort-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding-inline: .4rem;
    border-radius: 9999px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    color: #FFFFFF;
    font-size: .75rem;
}

.sort-tray.is-hit { animation: trayHit .45s var(--ease-settle); }

@keyframes trayHit {
    40% { transform: rotateX(16deg) translateY(4px) scale(.97); }
}

.sort-draft {
    margin-top: 1rem;
    padding: 1.25rem;
    border-radius: 1.75rem;
}

.sort-draft-text {
    min-height: 4.2em;
    color: #0E1525;
    font-size: .875rem;
    line-height: 1.45;
}

.sort-draft-text.is-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    background: #6D3BD6;
    vertical-align: -2px;
    animation: ltBlink 1.1s steps(2, jump-none) infinite;
}

/* ── Devis & relances : le devis se construit, la frise s'allume ─────── */

.quote {
    padding: 1.5rem;
    border-radius: 2rem;
}

.quote-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    box-shadow: inset 0 -1px 0 rgba(14, 21, 37, .06);
    color: #0E1525;
    font-size: .875rem;
}

.quote-line span:last-child,
.quote-total b {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quote-line span:last-child { font-weight: 700; }

.quote-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 1rem;
    color: #0E1525;
    font-weight: 700;
}

.quote-total b {
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.relance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: 1rem;
}

.relance li {
    padding: .75rem .5rem;
    border-radius: 1.25rem;
    background: linear-gradient(100deg, rgba(109, 59, 214, .12), rgba(31, 167, 224, .12));
    box-shadow: inset 0 0 0 1px rgba(109, 59, 214, .25);
    color: #26215C;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    transition: background .4s ease, box-shadow .4s ease, color .4s ease, transform .5s var(--ease-settle);
}

.relance li b {
    display: block;
    margin-bottom: .125rem;
    color: #0E1525;
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 1rem;
}

.relance li.is-off {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .07);
    color: #6B7694;
    transform: scale(.96);
}

/* ── Sur-mesure : le graphe d'outils ─────────────────────────────────── */

.graph {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
}

.graph-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.graph-links line {
    stroke: rgba(109, 59, 214, .22);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.graph-links line.pulse {
    stroke: #6D3BD6;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: .1 .9;
    stroke-dashoffset: 1;
    animation: ltPulse 2.6s linear infinite;
    animation-delay: calc(var(--i) * .37s);
}

.graph-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    padding: .9rem 1.2rem;
    border-radius: 9999px;
    background: linear-gradient(100deg, #6D3BD6, #C02BA8 52%, #1FA7E0);
    box-shadow: 0 16px 34px -14px rgba(109, 59, 214, .75);
    color: #FFFFFF;
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: -.01em;
    translate: -50% -50%;
}

.graph-node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 3;
    padding: .6rem 1rem;
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .06), 0 12px 28px -14px rgba(26, 26, 58, .3);
    color: #0E1525;
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
    translate: -50% -50%;
    user-select: none;
    -webkit-user-select: none;
}

.js .graph-node { cursor: grab; touch-action: none; }
.graph-node.is-dragging { cursor: grabbing; box-shadow: 0 0 0 2px rgba(109, 59, 214, .35), 0 20px 36px -14px rgba(38, 33, 92, .45); }

@media (max-width: 639px) {
    .graph-node { padding: .5rem .75rem; font-size: .75rem; }
    .graph-core { padding: .75rem 1rem; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-typing span, .graph-links line.pulse, .sort-tray.is-hit { animation: none; }
    .relance li { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   15. AGENT VOCAL ET ENCARTS
   ══════════════════════════════════════════════════════════════════════ */

.call {
    max-width: 24rem;
    margin-inline: auto;
    padding: 1.25rem;
    border-radius: 2rem;
}

.call-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: 1rem;
    box-shadow: inset 0 -1px 0 rgba(26, 26, 58, .07);
}

/* Onde sonore : les barres bougent tant que l'assistant parle. */
.call-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 1.5rem;
}

.call-wave i {
    width: 3px;
    height: 30%;
    border-radius: 3px;
    background: linear-gradient(180deg, #C02BA8, #6D3BD6);
    transition: height .3s ease;
}

.call.is-talking .call-wave i { animation: callWave .9s ease-in-out infinite; }
.call.is-talking .call-wave i:nth-child(2n) { animation-delay: -.3s; }
.call.is-talking .call-wave i:nth-child(3n) { animation-delay: -.6s; }

@keyframes callWave {
    0%, 100% { height: 25%; }
    50%      { height: 100%; }
}

.call-transcript {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    min-height: 13rem;
    padding-top: 1rem;
}

.ct {
    padding: .625rem .875rem;
    border-radius: 1.125rem;
    color: #0E1525;
    font-size: .875rem;
    line-height: 1.45;
}

.ct b {
    display: block;
    margin-bottom: .125rem;
    color: #6D3BD6;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ct-bot { margin-right: 1.5rem; background: rgba(109, 59, 214, .08); }
.ct-user { margin-left: 1.5rem; background: #F3F4F7; }
.ct-user b { color: #3D4A63; }

.call-ticket {
    max-width: 24rem;
    margin: 1rem auto 0;
    padding: 1.125rem 1.25rem;
    border-radius: 1.5rem;
}

.call-row {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    color: #0E1525;
    font-size: .875rem;
}

.call-row + .call-row { box-shadow: inset 0 1px 0 rgba(14, 21, 37, .06); }

.call-sms {
    max-width: 24rem;
    margin: .75rem auto 0;
    padding: .625rem .875rem;
    border-radius: 1rem;
    background: rgba(16, 185, 129, .1);
    color: #047857;
    font-size: .8125rem;
    font-weight: 600;
}

/* Encart pleine largeur (« Aussi par téléphone », règle de l'agent vocal). */
.callout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    transition: transform .4s var(--ease-settle), box-shadow .4s ease;
}

a.callout:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(109, 59, 214, .14), 0 24px 48px -20px rgba(26, 26, 58, .2);
}

.callout-rule { background: linear-gradient(120deg, #FFFFFF 40%, rgba(109, 59, 214, .06)); }

@media (min-width: 640px) {
    .callout { flex-direction: row; align-items: center; gap: 1.75rem; padding: 2rem 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .call.is-talking .call-wave i { animation: none; height: 60%; }
    a.callout:hover { transform: none; }
}

/* Lien sous une réponse du chatbot (js/main.js, CHAT_ANSWERS). */
.chat-link {
    display: inline-block;
    margin-top: .5rem;
    padding: .375rem 0;
    color: #6D3BD6;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── « Ce ne sont que des exemples » : cartes (Solutions) et pastilles (accueil) */
.other-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

.other-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .625rem;
    max-width: 56rem;
    margin-inline: auto;
}

.other-chip {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem 1rem .625rem .625rem;
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(26, 26, 58, .06), 0 8px 20px -14px rgba(26, 26, 58, .25);
    color: #0E1525;
    font-size: .875rem;
    font-weight: 600;
}

.other-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(109, 59, 214, .1);
    color: #6D3BD6;
}

.solution-more { background: linear-gradient(140deg, #FFFFFF 35%, rgba(109, 59, 214, .07)); }

/* ══════════════════════════════════════════════════════════════════════
   16. INTRO DE L'ACCUEIL (index.html, js/main.js initIntro)
   Rien n'est visible sans .intro-on : ni sans JavaScript, ni en mouvement
   réduit, ni au deuxième passage sur l'accueil.
   ══════════════════════════════════════════════════════════════════════ */

.intro { display: none; }

.intro-on body { overflow: hidden; }

.intro-on .intro {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    will-change: transform;
}

.intro-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Le logo arrive en CSS, sans attendre le JavaScript. */
.intro-logo {
    width: 7rem;
    height: 7rem;
    border-radius: 9999px;
    box-shadow: 0 24px 48px -24px rgba(38, 33, 92, .45);
    animation: introLogo .55s var(--ease-settle) both;
}

/* La phrase est posée sous le logo, hors du flux : le logo reste seul au
   centre tant qu'elle n'est pas arrivée. */
.intro-text {
    position: absolute;
    top: 100%;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 40px);
    margin-top: 1.5rem;
    color: #0E1525;
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: clamp(1.75rem, 5.4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
    translate: -50% 0;
}

.intro-w { display: inline-block; opacity: 0; }

.intro-grad {
    background: linear-gradient(100deg, #6D3BD6 0%, #185FA5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .06em;
}

.intro-skip {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    padding: .75rem 1rem;
    color: #3D4A63;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    translate: -50% 0;
}

@keyframes introLogo {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: none; }
}

/* Quand le voile se lève, l'entrée du hero se rejoue (même mouvement, nom
   d'animation différent pour la relancer). Le hero a déjà été affiché sous
   le voile : la mesure du LCP n'attend pas la fin de l'intro. */
.hero-replay .hero-rise { animation-name: heroRiseAgain; }
.hero-replay .hero-title .w > span { animation-name: wordUpAgain; }

@keyframes heroRiseAgain {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes wordUpAgain {
    from { transform: translateY(108%); }
    to   { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   17. BANDEAU « TECHNOLOGIES » DE L'ACCUEIL
   Réutilise .marquee / .marquee-track (section Intégrations) : boucle sans
   saut sur deux listes identiques, bords estompés, grille fixe en mouvement
   réduit. La seconde ligne défile dans l'autre sens.
   ══════════════════════════════════════════════════════════════════════ */

.tech-marquee .marquee-track { animation-duration: 48s; }
.tech-marquee-reverse .marquee-track { animation-direction: reverse; }

.tech-list {
    align-items: center;
    gap: 3rem;
    padding: .25rem 3rem .25rem 0;
}

.tech-name {
    color: #6B7694;
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.75rem;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .tech-marquee .marquee-track { animation-duration: 64s; }
    .tech-list { gap: 2rem; padding-right: 2rem; }
    .tech-name { font-size: 1.0625rem; line-height: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tech-list { gap: .75rem 2rem; }
}

/* ── À propos : phrase du fondateur mise en valeur ────────────────────── */
.founder-quote {
    padding: 1.5rem 1.5rem 1.5rem 1.625rem;
    border-left: 4px solid #6D3BD6;
    border-radius: 0 1.5rem 1.5rem 0;
    background: linear-gradient(120deg, rgba(109, 59, 214, .09), rgba(31, 167, 224, .07));
    color: #0E1525;
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .founder-quote {
        padding: 1.75rem 2rem;
        font-size: 1.3125rem;
    }
}

/* ── Formulaires de contact et d'audit ────────────────────────────────── */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
}

.form-consent input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .0625rem;
    accent-color: #6D3BD6;
}

.form-consent a {
    color: #6D3BD6;
    text-decoration: underline;
}

.form-submit:disabled {
    opacity: .6;
    cursor: wait;
    transform: none;
}

.form-status {
    padding: .875rem 1rem;
    border-radius: 1rem;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.5;
}

.form-status:empty,
.form-status[hidden] { display: none; }

.form-status.is-success {
    background: rgba(16, 185, 129, .12);
    color: #065F46;
}

.form-status.is-error {
    background: rgba(220, 38, 38, .08);
    color: #991B1B;
}

form[data-form] select { min-height: 3.25rem; }

form[data-form] [aria-invalid="true"] {
    border-color: #DC2626;
    box-shadow: 0 0 0 1px #DC2626;
}

/* ── Audit : emplacement de l'agenda Cal.com ──────────────────────────── */
.cal-agenda {
    width: 100%;
    min-height: 34rem;
    overflow: auto;
}