/* ============================================================
   ÆNOVE — Couche premium
   Grain, profondeur, chorégraphie de scroll, micro-interactions.
   Chargée après home.css : elle enrichit sans rien casser.
   ============================================================ */

:root {
    --gold-deep: #8B7355;
    --ease-slow: 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. GRAIN — la texture du papier ---------- */

.grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 8s steps(6) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    16%  { transform: translate(-2%, -3%); }
    33%  { transform: translate(-4%, 2%); }
    50%  { transform: translate(2%, -4%); }
    66%  { transform: translate(-3%, 3%); }
    83%  { transform: translate(3%, 1%); }
    100% { transform: translate(0, 0); }
}

/* ---------- 2. FIL DE PROGRESSION ---------- */

.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, var(--gold-deep), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    z-index: 10000;
    pointer-events: none;
}

/* ---------- 3. NAVIGATION ---------- */

nav {
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background 0.6s ease, border-color 0.6s ease,
                padding 0.6s ease, box-shadow 0.6s ease;
}

nav.scrolled {
    background: rgba(245, 242, 236, 0.80) !important;
    border-bottom-color: rgba(184, 154, 106, 0.28) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    box-shadow: 0 12px 40px -30px rgba(26, 24, 20, 0.9);
}

/* pages intérieures : la nav reste lisible dès le chargement */
body.page-inner nav {
    background: rgba(245, 242, 236, 0.88) !important;
    border-bottom-color: var(--rule) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------- 4. LA ROSE DES VENTS ---------- */

.rose-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(74vh, 640px);
    height: min(74vh, 640px);
    transform: translate(-50%, -50%);
    perspective: 1100px;
    pointer-events: none;
    z-index: 0;
}

.rose-depth {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rose-layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.rose-layer svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* profondeur réelle : trois plans distincts dans l'espace */
.rose-far   { transform: translateZ(-70px); opacity: 0.55; }
.rose-mid   { transform: translateZ(0); }
.rose-near  { transform: translateZ(45px); }

.rose-ring {
    animation: roseTurn 240s linear infinite;
    transform-origin: 200px 200px;
}

.rose-ticks {
    animation: roseTurn 240s linear infinite reverse;
    transform-origin: 200px 200px;
}

@keyframes roseTurn {
    to { transform: rotate(360deg); }
}

/* tracé à l'ouverture */
.rose-draw {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: roseDraw 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

@keyframes roseDraw {
    to { stroke-dashoffset: 0; }
}

.rose-fade {
    opacity: 0;
    animation: roseFade 1.6s ease 1.5s forwards;
}

@keyframes roseFade {
    to { opacity: 1; }
}

/* ---------- 5. HERO ---------- */

.hero-inner {
    position: relative;
    z-index: 2;
}

.hero-logo {
    animation: heroMark 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both !important;
}

@keyframes heroMark {
    from {
        opacity: 0;
        letter-spacing: 0.34em;
        transform: translateY(14px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        letter-spacing: 0.04em;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-rule {
    animation: heroRule 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both !important;
}

@keyframes heroRule {
    from { height: 0; opacity: 0; }
    to   { height: 60px; opacity: 1; }
}

.scroll-hint {
    position: absolute;
    bottom: 2.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--sans);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-deep);
    opacity: 0;
    animation: hintIn 1.4s ease 2.2s forwards;
    z-index: 2;
}

.scroll-hint span {
    display: block;
    width: 1px;
    height: 32px;
    margin: 0.8rem auto 0;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: hintPulse 2.8s ease-in-out infinite;
    transform-origin: top;
}

@keyframes hintIn   { to { opacity: 0.75; } }
@keyframes hintPulse {
    0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---------- 6. RÉVÉLATIONS AU SCROLL ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--ease-slow), transform var(--ease-slow);
}

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

/* titres : dévoilés comme une impression qui apparaît */
.section-title[data-reveal] {
    clip-path: inset(0 0 100% 0);
    transform: translateY(34px);
    transition: opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
                clip-path 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-title[data-reveal].is-visible {
    clip-path: inset(0 0 0 0);
}

/* cascade */
[data-reveal][data-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-delay="2"] { transition-delay: 0.24s; }
[data-reveal][data-delay="3"] { transition-delay: 0.36s; }
[data-reveal][data-delay="4"] { transition-delay: 0.48s; }

/* le filet doré qui se tire sous les intitulés de section */
.section-label {
    position: relative;
    display: inline-block;
    padding-bottom: 0.7rem;
}

.section-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.section-label.is-visible::after {
    transform: scaleX(1);
}

/* ---------- 7. CARTES D'OFFRES — profondeur et lumière ---------- */

.offres-grid {
    perspective: 1400px;
}

.offre-card {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background var(--ease),
                border-color var(--ease),
                box-shadow 0.5s ease;
}

/* halo qui suit le curseur */
.offre-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
                rgba(184, 154, 106, 0.14), transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.offre-card:hover::before { opacity: 1; }

.offre-card:hover {
    box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.65);
}

.offre-card > * {
    position: relative;
    z-index: 1;
}

.offre-price {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.offre-card:hover .offre-price {
    transform: translateY(-4px) scale(1.06);
}

/* ---------- 8. BOUTONS ---------- */

.hero-cta, .btn-primary, .btn-secondary, .offre-cta {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background var(--ease), color var(--ease);
    will-change: transform;
}

/* balayage de lumière */
.hero-cta::after, .btn-primary::after, .offre-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent,
                rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.hero-cta:hover::after, .btn-primary:hover::after, .offre-cta:hover::after {
    left: 130%;
}

/* ---------- 9. PILIERS & PORTRAIT ---------- */

.philo-pillars > * {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.philo-pillars > *:hover {
    transform: translateX(8px);
}

.matthieu-portrait {
    overflow: hidden;
    position: relative;
}

.matthieu-portrait img {
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 1.2s ease;
    filter: grayscale(0.35) contrast(1.03);
}

.matthieu-portrait:hover img {
    transform: scale(1.045);
    filter: grayscale(0) contrast(1.05);
}

/* ---------- 10. SECTION SOMBRE — lueur ---------- */

#analyses {
    position: relative;
    overflow: hidden;
}

#analyses::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% 0%,
                rgba(184, 154, 106, 0.10), transparent 70%);
    pointer-events: none;
}

#analyses > * { position: relative; z-index: 1; }

/* ---------- 11. LIENS DE PIED DE PAGE ---------- */

footer a {
    transition: color 0.4s ease;
}

/* ---------- 12. FOCUS CLAVIER ---------- */

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ---------- 13. RESPONSIVE ---------- */

@media (max-width: 900px) {
    .rose-stage {
        width: min(58vh, 400px);
        height: min(58vh, 400px);
        opacity: 0.5;
    }
}

@media (max-width: 640px) {
    .rose-stage { opacity: 0.35; }
    .scroll-hint { display: none; }
    .offre-card:hover { box-shadow: none; }
}

/* ---------- 14. MOUVEMENT RÉDUIT ---------- */

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

    [data-reveal] { opacity: 1; transform: none; }
    .section-title[data-reveal] { clip-path: none; }
    .grain { animation: none; }
    .rose-draw { stroke-dashoffset: 0; }
    .rose-fade { opacity: 1; }
    .hero-rule { height: 60px !important; }
}