/* ============================================================
 * Travel Advantage — CSS animations (épuré : pas de smooth scroll)
 *
 * Plus de Lenis ni ScrollTrigger.
 * Conservé : overlay hero + globe canvas + curseur custom + transitions premium.
 * ============================================================ */

/* ── HERO : overlay renforcé pour lisibilité du texte ── */
.section-hero {
    position: relative;
    overflow: visible;
    justify-content: center;
}

.section-hero .hero-overlay {
    background: linear-gradient(
        180deg,
        rgba(15, 36, 68, 0.78) 0%,
        rgba(15, 36, 68, 0.88) 60%,
        rgba(10, 24, 48, 0.95) 100%
    ) !important;
    z-index: 2 !important;
}

.section-hero .hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(10, 20, 40, 0.35) 100%
    );
    pointer-events: none;
}

/* Le contenu doit s'élever AU-DESSUS du canvas globe ET de l'overlay */
.section-hero .hero-contenu {
    position: relative;
    z-index: 5;
    width: 100%;
}

/* hero-stats-wrapper reste en position absolute (bottom: -70px du style.css) */
.hero-stats-wrapper {
    z-index: 20;
}

/* ── Globe 3D dans le hero (background) ── */
.hero-globe-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hero-globe-canvas.ready {
    opacity: 1;
}

/* ── Hero title : reveal mot par mot ── */
.section-hero .titre-principal,
.section-hero h1 {
    overflow: visible;
}

.word-anim {
    line-height: 1.1;
    vertical-align: top;
}

/* ── CURSEUR PERSONNALISÉ (desktop + pointer fine) ── */
.custom-cursor,
.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    will-change: transform;
}

.custom-cursor {
    width: 36px;
    height: 36px;
    margin-left: -18px;
    margin-top: -18px;
    border: 1.5px solid rgba(214, 177, 94, 0.85);
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.custom-cursor-dot {
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    background-color: #d6b15e;
    border-radius: 50%;
}

.custom-cursor.hover {
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    background-color: rgba(214, 177, 94, 0.18);
    border-color: rgba(214, 177, 94, 0.95);
}

@media (hover: hover) and (pointer: fine) {
    body.has-custom-cursor { cursor: none; }
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor input,
    body.has-custom-cursor textarea,
    body.has-custom-cursor select,
    body.has-custom-cursor [data-modal-target] { cursor: none; }
}

@media (max-width: 768px), (pointer: coarse) {
    .custom-cursor,
    .custom-cursor-dot { display: none !important; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .hero-globe-canvas,
    .custom-cursor,
    .custom-cursor-dot { display: none !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── FOCUS-VISIBLE GLOBAL (accessibilité WCAG 2.4.7) ── */
*:focus-visible {
    outline: 2px solid #d6b15e;
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid #d6b15e;
    outline-offset: 3px;
}

/* ── TRANSITIONS PREMIUM sur éléments VRAIMENT cliquables ──
   Pattern : un élément ne doit se soulever au hover QUE s'il est cliquable.
   Sinon → confusion utilisateur → dead clicks (problème détecté Clarity 22/05/26).
*/
.btn, .formule-card, .article-card {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s ease,
                border-color 0.3s ease;
}

.btn:hover,
.formule-card:hover { transform: translateY(-3px); }

.article-card:hover { transform: translateY(-6px) scale(1.01); }

/* Compteurs hero : effet visuel doux mais PAS de translate (ce ne sont pas des CTAs) */
.compteur-item {
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.compteur-item:hover {
    transform: none !important;
    box-shadow: 0 25px 50px rgba(15, 36, 68, 0.18) !important;
}

/* Cartes preuves (logos certifications) : pas de hover trompeur */
.preuve-card { transition: box-shadow 0.3s ease; }
.preuve-card:hover { transform: none; }

/* Cartes exemple (home, redirections vers /etudes-de-cas/) — wrapper dans <a> recommandé,
   en attendant on retire le scale pour réduire la confusion */
.exemple-card { transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.exemple-card:hover { transform: none; box-shadow: 0 15px 40px rgba(15, 36, 68, 0.12); }

/* Cartes génériques `.carte` : même règle */
.carte { transition: box-shadow 0.3s ease; }
.carte:hover { transform: none; }

/* ── OVERRIDE GLOBAL : cards non-cliquables ne se soulèvent PAS au hover
   (audit Clarity du 22/05/2026 : 78 dead clicks identifiés sur ces cards) ── */
.profil-card:hover,
.amb-avantage:hover,
.amb-etape:hover,
.etape-card:hover,
.cas-card:hover,
.scenario-card:hover,
.carte-probleme-photo:hover {
    transform: none !important;
}
.profil-card,
.amb-avantage,
.amb-etape,
.etape-card,
.cas-card,
.scenario-card,
.carte-probleme-photo {
    transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Sub-éléments qui zoomaient au hover (images dans les cards) : neutralisés aussi */
.cas-card:hover .cas-card-photo img,
.carte-probleme-photo:hover img {
    transform: none !important;
}

/* ── Bouton or : effet shimmer au hover ── */
.btn-or {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-or::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn-or:hover::before { left: 120%; }

/* ── Hero : densifier la profondeur en bas ── */
.section-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06));
    pointer-events: none;
    z-index: 3;
}

/* ── Cartes formules : effet premium au hover ── */
.formule-card {
    position: relative;
    overflow: hidden;
}

.formule-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(214, 177, 94, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

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

/* ── Améliorations typographiques ── */
.titre-section, h2 {
    letter-spacing: -0.015em;
}

.titre-principal, .section-hero h1 {
    letter-spacing: -0.02em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.hero-accroche, .section-hero p {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ── Badge hero : look "premium" ── */
.hero-badge {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(214, 177, 94, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Compteur item : look "premium" avec border or au top ── */
.compteur-item {
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%) !important;
    border-top: 4px solid #d6b15e !important;
    box-shadow: 0 20px 50px rgba(15, 36, 68, 0.15), 0 4px 12px rgba(15, 36, 68, 0.06) !important;
}

/* ⚠️ Les <p> sous-titres des compteurs DOIVENT rester en gris foncé
   et NE PAS hériter du text-shadow du hero. */
.compteur-item p {
    color: var(--gris-600) !important;
    text-shadow: none !important;
}

.compteur-chiffre {
    background: linear-gradient(135deg, #0f2444 0%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none !important;
}