/* Logadvisor — système de motion commun aux pages de contenu.
   Toutes les règles qui masquent du contenu sont scopées sous html.la-motion,
   classe posée par motion.js : sans JavaScript, le site reste entièrement visible. */

:root {
    --la-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo out : arrivée douce */
    --la-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* léger rebond */
    --la-reveal-distance: 28px;
    --la-reveal-duration: 0.9s;
}

/* ---------------------------------------------------------------------------
   Révélation au défilement
--------------------------------------------------------------------------- */

html.la-motion [data-la-reveal] {
    opacity: 0;
    transform: translateY(var(--la-reveal-distance));
    transition:
        opacity var(--la-reveal-duration) var(--la-ease-out),
        transform var(--la-reveal-duration) var(--la-ease-out);
    transition-delay: var(--la-delay, 0s);
    will-change: opacity, transform;
}

html.la-motion [data-la-reveal="left"]  { transform: translateX(calc(-1 * var(--la-reveal-distance))); }
html.la-motion [data-la-reveal="right"] { transform: translateX(var(--la-reveal-distance)); }
html.la-motion [data-la-reveal="scale"] { transform: scale(0.94); }

html.la-motion .la-inview[data-la-reveal] {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Les petits traits sous les titres de section (w-16 h-1) se dessinent à l'arrivée */
html.la-motion [data-la-line] {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 1s var(--la-ease-out) 0.25s;
}
html.la-motion .la-inview[data-la-line],
html.la-motion .la-inview [data-la-line] {
    transform: scaleX(1);
}

/* ---------------------------------------------------------------------------
   Entrée du héros (première section) : cascade au chargement
--------------------------------------------------------------------------- */

html.la-motion .la-hero-item {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.9s var(--la-ease-out),
        transform 0.9s var(--la-ease-out);
    transition-delay: var(--la-delay, 0s);
}
html.la-motion .la-hero-go .la-hero-item {
    opacity: 1;
    transform: none;
}

/* Les blobs du héros dérivent lentement au lieu de rester figés */
@keyframes la-drift {
    0%   { transform: translate(var(--la-blob-x, 0), var(--la-blob-y, 0)) scale(1); }
    50%  { transform: translate(calc(var(--la-blob-x, 0) + 30px), calc(var(--la-blob-y, 0) - 24px)) scale(1.08); }
    100% { transform: translate(var(--la-blob-x, 0), var(--la-blob-y, 0)) scale(1); }
}

/* ---------------------------------------------------------------------------
   Micro-interactions (ne masquent rien : hors scope .la-motion)
--------------------------------------------------------------------------- */

/* Boutons / CTA principaux : détectés par motion.js (.la-btn) */
.la-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s var(--la-ease-spring),
        box-shadow 0.35s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}
.la-btn:hover { transform: translateY(-2px); }
.la-btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }

/* Reflet qui balaie le bouton au survol */
.la-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    transform: translateX(-110%);
    pointer-events: none;
}
.la-btn:hover::after { transition: transform 0.7s ease; transform: translateX(110%); }

/* Cartes : détectées par motion.js (.la-card) */
.la-card {
    transition:
        transform 0.45s var(--la-ease-spring),
        box-shadow 0.45s ease,
        border-color 0.3s ease;
}
.la-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -16px rgba(6, 11, 39, 0.14);
}

/* Icônes dans les cartes : petite inclinaison joueuse au survol de la carte */
.la-card .la-icon { transition: transform 0.45s var(--la-ease-spring); }
.la-card:hover .la-icon { transform: scale(1.1) rotate(-4deg); }

/* Liens de navigation : soulignement animé */
.la-nav-link {
    position: relative;
}
.la-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3B82F6, #6366F1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--la-ease-out);
}
.la-nav-link:hover::after { transform: scaleX(1); }

/* Carrousel clients : pause au survol, dégel du gris plus doux */
.slide-track:hover { animation-play-state: paused; }

/* Flèches des liens "En savoir plus" : glissent vers la droite au survol */
a:hover > .la-arrow,
a:hover span > .la-arrow,
.la-card:hover .la-arrow { transform: translateX(4px); }
.la-arrow { display: inline-block; transition: transform 0.3s var(--la-ease-spring); }

/* ---------------------------------------------------------------------------
   Tuiles de missions : cascade discrète, coche qui « pop », survol léger
--------------------------------------------------------------------------- */

html.la-motion .la-tile[data-la-reveal] { --la-reveal-distance: 16px; }

.la-tile {
    transition: transform 0.35s var(--la-ease-spring), box-shadow 0.35s ease;
}
.la-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -14px rgba(6, 11, 39, 0.25);
}

html.la-motion .la-tile .fa-circle-check {
    transform: scale(0);
    transition: transform 0.55s var(--la-ease-spring);
    transition-delay: calc(var(--la-delay, 0s) + 0.3s);
}
html.la-motion .la-tile.la-inview .fa-circle-check { transform: scale(1); }

/* ---------------------------------------------------------------------------
   Surlignage « coup de feutre » sur un mot du titre
--------------------------------------------------------------------------- */

.la-marker {
    background: linear-gradient(180deg, transparent 12%, #DBEAFE 12%, #DBEAFE 88%, transparent 88%);
    border-radius: 0.3em;
    padding: 0 0.12em;
    margin: 0 -0.06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------------------------
   Itinéraire de méthodologie : ligne qui se dessine au défilement,
   jalons qui s'allument au passage, cartes en quinconce
--------------------------------------------------------------------------- */

.la-route {
    --la-route-x: 1.25rem;   /* mobile : ligne à gauche */
    --la-route-sway: 0px;    /* décalage latéral des jalons (desktop) */
    position: relative;
}

/* Ligne sinueuse construite par motion.js d'après la position réelle des jalons */
.la-route__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.la-route__svg .la-route__svg-track { stroke: #E2E8F0; }
.la-route__svg .la-route__svg-prog  { stroke: #3B82F6; }

.la-route__step {
    position: relative;
    padding-left: 3.5rem;
}
.la-route__step + .la-route__step { margin-top: 2rem; }

/* Jalon sur la ligne */
.la-route__stop {
    position: absolute;
    top: 2rem;
    left: var(--la-route-x);
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94A3B8;
    box-shadow: 0 2px 8px rgba(28, 25, 23, 0.06);
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, transform 0.35s var(--la-ease-spring);
    z-index: 2;
}
.la-route__stop::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 9999px;
    background: #CBD5E1;
    transition: background 0.35s ease;
}
.la-route__stop.la-stop-on {
    color: #3B82F6;
    border-color: #BFDBFE;
}
.la-route__stop.la-stop-on::before { background: #3B82F6; }

/* Jalon courant : pilule cuivre pleine, façon « escale active » */
.la-route__stop.la-stop-now {
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
    border-color: transparent;
    color: #FFFFFF;
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 10px 26px -8px rgba(59, 130, 246, 0.5);
}
.la-route__stop.la-stop-now::before { background: #FFFFFF; }

/* Desktop : ligne au centre, cartes imbriquées en quinconce serré,
   jalons décalés en alternance pour faire serpenter la ligne */
@media (min-width: 768px) {
    .la-route { --la-route-x: 50%; --la-route-sway: 3rem; }
    .la-route__step { padding-left: 0; }
    .la-route__step + .la-route__step { margin-top: -5.5rem; }
    .la-route__step:nth-child(odd) .la-route__card { margin-right: calc(50% + 4.5rem); }
    .la-route__step:nth-child(even) .la-route__card { margin-left: calc(50% + 4.5rem); }
    /* le jalon penche vers la carte suivante : la ligne serpente */
    .la-route__step:nth-child(odd) .la-route__stop  { left: calc(var(--la-route-x) + var(--la-route-sway)); }
    .la-route__step:nth-child(even) .la-route__stop { left: calc(var(--la-route-x) - var(--la-route-sway)); }
    .la-route__step:first-child .la-route__stop { left: var(--la-route-x); }
}

/* ---------------------------------------------------------------------------
   Accessibilité : tout est désactivé si l'utilisateur refuse les animations
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.la-motion [data-la-reveal],
    html.la-motion .la-hero-item,
    html.la-motion [data-la-line] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .la-btn, .la-card, .la-nav-link::after, .la-arrow, .la-btn::after, .la-tile {
        transition: none !important;
        animation: none !important;
    }
    html.la-motion .la-tile .fa-circle-check {
        transform: none !important;
        transition: none !important;
    }
    .hero-blob, .animate-float, .slide-track { animation: none !important; }
}