/* ==========================================================================
   Adelante — charte & motion design (chargé sur tout le site)
   Source unique des tokens de marque + système d'animation au scroll.
   Progressive enhancement : l'état masqué n'est appliqué que si <html> porte
   la classe .js-motion (ajoutée par head.html uniquement si JS + IntersectionObserver
   présents et prefers-reduced-motion inactif). Sans JS → tout reste visible.
   ========================================================================== */

:root {
    --ad-ink: #1d1d1b;
    --ad-accent: #d86727;
    --ad-accent-light: #e87835;
    --ad-accent-soft: #f0a06a;
    --ad-accent-dark: #b9541b;
    --ad-cream: #fdf6f0;
    --ad-sand: #f7f1e8;
    --ad-line: #e7ded1;
    --ad-stone: #6b645c;
    --ad-ease: cubic-bezier(.22, .61, .36, 1);
    --ad-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ad-dur: .7s;
}

/* --------------------------------------------------------------------------
   Reveal au scroll — état initial masqué (seulement en mode .js-motion)
   -------------------------------------------------------------------------- */
.js-motion [data-reveal],
.js-motion .reveal-section {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--ad-dur) var(--ad-ease-out),
                transform var(--ad-dur) var(--ad-ease-out);
    will-change: opacity, transform;
}

.js-motion [data-reveal="left"]  { transform: translateX(-30px); }
.js-motion [data-reveal="right"] { transform: translateX(30px); }
.js-motion [data-reveal="scale"] { transform: scale(.94); }
.js-motion [data-reveal="fade"]  { transform: none; }

.js-motion [data-reveal].is-visible,
.js-motion .reveal-section.is-visible {
    opacity: 1;
    transform: none;
}

/* Filet de sécurité : si le JS plante, on révèle tout après coup */
.js-motion.motion-failsafe [data-reveal],
.js-motion.motion-failsafe .reveal-section {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   Séquence d'entrée du hero (au chargement, pas au scroll)
   -------------------------------------------------------------------------- */
.js-motion .ad-hero-seq > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--ad-ease-out), transform .8s var(--ad-ease-out);
}
.js-motion.loaded .ad-hero-seq > * { opacity: 1; transform: none; }
.js-motion.loaded .ad-hero-seq > *:nth-child(1) { transition-delay: .05s; }
.js-motion.loaded .ad-hero-seq > *:nth-child(2) { transition-delay: .15s; }
.js-motion.loaded .ad-hero-seq > *:nth-child(3) { transition-delay: .25s; }
.js-motion.loaded .ad-hero-seq > *:nth-child(4) { transition-delay: .35s; }
.js-motion.loaded .ad-hero-seq > *:nth-child(5) { transition-delay: .45s; }

/* --------------------------------------------------------------------------
   Micro-interactions (CSS pur, ciblent le markup existant)
   -------------------------------------------------------------------------- */
/* Flèche des CTA qui glisse vers la droite au survol */
a i.fa-arrow-right,
button i.fa-arrow-right {
    transition: transform .25s var(--ad-ease);
}
a:hover i.fa-arrow-right,
button:hover i.fa-arrow-right {
    transform: translateX(5px);
}

/* Lift de carte (opt-in : classe .ad-lift) */
.ad-lift {
    transition: transform .25s var(--ad-ease), box-shadow .25s var(--ad-ease);
}
.ad-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(29, 29, 27, .14);
}

/* Soulignement accent qui se dessine sous un titre (opt-in : .ad-underline) */
.ad-underline {
    position: relative;
    display: inline-block;
}
.ad-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.12em;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--ad-accent), var(--ad-accent-light));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s var(--ad-ease-out);
}
.js-motion .ad-underline.is-visible::after,
.ad-underline.is-visible::after { transform: scaleX(1); }
html:not(.js-motion) .ad-underline::after { transform: scaleX(1); }

/* Zoom doux d'image dans son cadre (opt-in : wrapper .ad-zoom) */
.ad-zoom { overflow: hidden; }
.ad-zoom img { transition: transform .5s var(--ad-ease); }
.ad-zoom:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Respect strict de prefers-reduced-motion (double sécurité)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js-motion [data-reveal],
    .js-motion .reveal-section,
    .js-motion .ad-hero-seq > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ad-lift:hover { transform: none; }
    .ad-zoom:hover img { transform: none; }
    a i.fa-arrow-right, button i.fa-arrow-right { transition: none; }
    .ad-underline::after { transition: none; transform: scaleX(1); }
}