/**
 * Tazekka Immersive Premium — couche visuelle cinématique
 * ─────────────────────────────────────────────────────────
 * S'applique PAR-DESSUS le thème randotrail sans modifier son contenu.
 * Narration : ciel étoilé → crêtes → forêt de cèdres → grotte → sentier → étoiles.
 *
 * Classes d'état (posées par le <script> inline + immersive.js) :
 *   html.tzk-js       JS actif (les états "cachés avant reveal" n'existent que là)
 *   html.tzk-rich     desktop pointeur fin, pas de reduced-motion, pas low-end
 *   html.tzk-reduced  prefers-reduced-motion
 *   html.tzk-low      appareil modeste (deviceMemory/hardwareConcurrency/saveData)
 *
 * Tout est GPU-friendly : transform / opacity uniquement pour les animations.
 */

/* ════════════════════════════════════════════
   0. TOKENS — palette évoluée (esprit conservé)
   ════════════════════════════════════════════ */
:root {
    --tzk-night: #0a1512;        /* noir de grotte profond (vert nuit) */
    --tzk-cave: #1b1510;         /* brun calcaire sombre */
    --tzk-cave-warm: #2a211a;    /* calcaire chaud */
    --tzk-forest: #1a3c34;       /* vert forêt (marque) */
    --tzk-cedar: #274d41;        /* vert cèdre */
    --tzk-sage: #6b8f71;
    --tzk-limestone: #e9e2d3;    /* beige calcaire */
    --tzk-gold: #e8a838;         /* or de coucher de soleil (marque) */
    --tzk-gold-warm: #f0c060;
    --tzk-mist: #93b3c4;         /* bleu brume */
    --tzk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tzk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tzk-topo-light: rgba(26, 60, 52, 0.045);
    --tzk-topo-dark: rgba(233, 226, 211, 0.07);
}

/* ════════════════════════════════════════════
   1. GLOBAL — micro-signature premium
   ════════════════════════════════════════════ */
::selection {
    background: var(--tzk-gold);
    color: var(--tzk-night);
}

:focus-visible {
    outline: 2px solid var(--tzk-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Barre de progression de lecture (injectée par JS) */
.tzk-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2001;
    background: linear-gradient(90deg, var(--tzk-gold), var(--tzk-gold-warm), #ffdf9e);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
    box-shadow: 0 0 12px rgba(232, 168, 56, 0.45);
}

/* Grain cinéma — desktop riche uniquement, quasi imperceptible */
.tzk-rich body::after {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 9990;
    opacity: 0.028;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
    animation: tzk-grain 9s steps(6) infinite;
}

@keyframes tzk-grain {
    0%   { transform: translate3d(0, 0, 0); }
    20%  { transform: translate3d(-2%, 1.4%, 0); }
    40%  { transform: translate3d(1.6%, -1%, 0); }
    60%  { transform: translate3d(-1%, -1.8%, 0); }
    80%  { transform: translate3d(2%, 1%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Titres de section — respiration éditoriale */
.rt-section-header h2 {
    font-weight: 800;
    letter-spacing: -0.022em;
}

.rt-section-header h2 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--tzk-gold) 10%, var(--tzk-gold-warm) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rt-section-header .rt-badge,
.tp-treasures-badge {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 800;
}

/* ── Boutons : reflet balayé + relief ── */
.rt-btn {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.rt-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.34) 50%, transparent 68%);
    transform: translateX(-160%);
    transition: transform 0.9s var(--tzk-ease);
    pointer-events: none;
}

.rt-btn:hover::before { transform: translateX(160%); }

.rt-btn-primary {
    background: linear-gradient(135deg, var(--tzk-gold) 0%, #d99a26 100%);
    box-shadow: 0 8px 24px -8px rgba(232, 168, 56, 0.55), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.35s var(--tzk-ease), box-shadow 0.35s var(--tzk-ease);
}

.rt-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(232, 168, 56, 0.65), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.rt-btn:active { transform: translateY(0) scale(0.98); }

/* Nouveau bouton héro « Demander un devis » — verre ambré */
.rt-btn-devis {
    background: rgba(232, 168, 56, 0.1);
    border: 1px solid rgba(232, 168, 56, 0.55);
    color: var(--tzk-gold-warm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.35s var(--tzk-ease), background 0.35s ease, border-color 0.35s ease;
}

.rt-btn-devis:hover {
    background: rgba(232, 168, 56, 0.2);
    border-color: var(--tzk-gold);
    color: #ffe2a0;
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════
   2. HEADER — verre profond au scroll
   ════════════════════════════════════════════ */
.rt-header::before {
    content: '';
    position: absolute;
    inset: 0 0 -28px 0;
    background: linear-gradient(180deg, rgba(10, 21, 18, 0.55), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.rt-header.scrolled::before { opacity: 0; }

.rt-header.scrolled {
    background: rgba(10, 21, 18, 0.78);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid rgba(233, 226, 211, 0.08);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.rt-logo-icon {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 14px -4px rgba(232, 168, 56, 0.6);
}

/* ════════════════════════════════════════════
   3. HÉRO — nuit d'altitude, aube dorée
   ════════════════════════════════════════════ */
.rt-hero { min-height: 100svh; }

/* Ciel nocturne réel (remplace le dégradé plat inline) */
.tzk-js .rt-hero-bg {
    background: linear-gradient(180deg,
            #08120f 0%,
            #0d221c 30%,
            #143a30 58%,
            #1c4a3d 78%,
            #16382e 100%) !important;
    background-attachment: scroll !important;
    animation: none !important;
}

/* Halo d'aube derrière les crêtes */
.tzk-js .rt-hero-bg::after {
    background:
        radial-gradient(58% 42% at 70% 68%, rgba(232, 168, 56, 0.16), transparent 70%),
        radial-gradient(42% 34% at 30% 76%, rgba(147, 179, 196, 0.1), transparent 70%),
        linear-gradient(180deg, rgba(8, 18, 15, 0.32) 0%, transparent 45%, rgba(8, 18, 15, 0.42) 100%);
}

/* Vignette cinéma */
.rt-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    box-shadow: inset 0 0 220px rgba(4, 10, 8, 0.55);
}

/* Canvas étoiles + poussière (injecté par JS, sous les crêtes) */
.tzk-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.tp-hero-fx { z-index: 1; }

/* Crêtes — teintes plus profondes + liseré d'aube sur la crête avant */
.tp-hero-range--back svg  { fill: #29564a; }
.tp-hero-range--mid svg   { fill: #1b3f35; }
.tp-hero-range--front svg { fill: #0a1e18; }

.tp-hero-range--back  { opacity: 0.38; filter: blur(0.6px); }
.tp-hero-range--front {
    filter: drop-shadow(0 -1px 0 rgba(232, 168, 56, 0.28))
            drop-shadow(0 -10px 26px rgba(232, 168, 56, 0.1));
}

/* Sentier lumineux tracé sur la crête avant (SVG injecté par JS) */
.tzk-trail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 2;
    pointer-events: none;
}

.tzk-trail path {
    fill: none;
    stroke: var(--tzk-gold);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 5 9;
    opacity: 0.85;
    filter: drop-shadow(0 0 5px rgba(232, 168, 56, 0.7));
}

.tzk-trail-summit {
    fill: var(--tzk-gold-warm);
    filter: drop-shadow(0 0 6px rgba(240, 192, 96, 0.9));
}

.tzk-trail-halo {
    fill: none;
    stroke: rgba(240, 192, 96, 0.7);
    stroke-width: 1.4;
    transform-origin: var(--tzk-halo-x) var(--tzk-halo-y);
    animation: tzk-halo 3.2s var(--tzk-ease-out) infinite;
}

.tzk-trail-waypoint {
    fill: rgba(233, 226, 211, 0.85);
    filter: drop-shadow(0 0 3px rgba(233, 226, 211, 0.7));
}

@keyframes tzk-halo {
    0%   { transform: scale(0.4); opacity: 0.9; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Contours topographiques flottants (SVG injecté par JS) */
.tzk-topo {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

.tzk-topo path {
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1400;
}

.rt-hero .tzk-topo {
    top: 6%;
    right: -4%;
    width: min(46vw, 640px);
    aspect-ratio: 1;
    z-index: 1;
    opacity: 0.75;
    animation: tzk-topo-float 26s ease-in-out infinite alternate;
}

.rt-hero .tzk-topo path { stroke: rgba(233, 226, 211, 0.09); }

@keyframes tzk-topo-float {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(-18px, 14px, 0) rotate(1.6deg); }
}

/* Contenu héro — typographie cinéma */
.tzk-front .rt-hero h1 {
    font-size: clamp(2.9rem, 6.2vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.028em;
    text-shadow: 0 2px 30px rgba(4, 10, 8, 0.6);
    max-width: 15ch;
}

/* Découpage mot-à-mot (JS pose .tzk-split ; filet de sécurité à 2.4s si JS échoue) */
.tzk-js.tzk-front .rt-hero-content > h1 {
    animation: tzk-h1-safety 0s linear 2.4s forwards;
    opacity: 0;
}

.tzk-js.tzk-front .rt-hero-content > h1.tzk-split { opacity: 1; animation: none; }

@keyframes tzk-h1-safety { to { opacity: 1; } }

.tzk-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.9em) rotate(1.4deg);
    animation: tzk-word-rise 0.85s var(--tzk-ease-out) forwards;
    animation-delay: var(--wd, 0s);
    will-change: transform, opacity;
}

@keyframes tzk-word-rise {
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.tzk-hl {
    background: linear-gradient(120deg, #ffd98a 0%, var(--tzk-gold) 55%, #d98f1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(232, 168, 56, 0.35));
}

.rt-hero-desc {
    color: rgba(233, 226, 211, 0.9);
    font-size: 1.18rem;
    max-width: 620px;
}

.rt-hero-badge {
    background: rgba(233, 226, 211, 0.07);
    border: 1px solid rgba(233, 226, 211, 0.18);
    color: var(--tzk-gold-warm);
    letter-spacing: 0.16em;
}

/* Indicateur de scroll — fil + goutte de lumière */
.rt-scroll-indicator {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.62rem;
    color: rgba(233, 226, 211, 0.55);
    flex-direction: column;
    gap: 10px;
    z-index: 4;
}

.rt-scroll-indicator svg { display: none; }

.rt-scroll-indicator::after {
    content: '';
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, rgba(233, 226, 211, 0.4), transparent);
    position: relative;
    display: block;
    overflow: hidden;
}

.rt-scroll-indicator::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--tzk-gold-warm);
    box-shadow: 0 0 8px rgba(240, 192, 96, 0.9);
    animation: tzk-scroll-drop 2.4s var(--tzk-ease) infinite;
}

@keyframes tzk-scroll-drop {
    0%   { transform: translateY(-46px); opacity: 0; }
    25%  { opacity: 1; }
    80%  { transform: translateY(-4px); opacity: 0.9; }
    100% { transform: translateY(0); opacity: 0; }
}

/* ════════════════════════════════════════════
   4. TRÉSORS — clairière de cèdres, cartes 3D
   ════════════════════════════════════════════ */
.tp-treasures-section {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'><g fill='none' stroke='%231a3c34' stroke-opacity='0.05' stroke-width='1'><path d='M140,310 C140,215 220,150 310,150 C400,150 480,215 480,310 C480,405 400,470 310,470 C220,470 140,405 140,310 Z'/><path d='M180,310 C180,238 238,190 310,190 C382,190 440,238 440,310 C440,382 382,430 310,430 C238,430 180,382 180,310 Z'/><path d='M225,310 C225,262 262,228 310,228 C358,228 395,262 395,310 C395,358 358,392 310,392 C262,392 225,358 225,310 Z'/><path d='M268,310 C268,285 285,268 310,268 C335,268 352,285 352,310 C352,335 335,352 310,352 C285,352 268,335 268,310 Z'/></g></svg>") 110% -8%/540px no-repeat,
        linear-gradient(180deg, #fbf8f1 0%, #f3eee1 100%);
}

.tp-treasures-logo-float img {
    animation: tzk-levitate 7s ease-in-out infinite;
    filter: drop-shadow(0 18px 30px rgba(26, 60, 52, 0.25));
}

@keyframes tzk-levitate {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-14px) rotate(1.4deg); }
}

/* Grille en perspective pour l'inclinaison 3D */
.tzk-rich .tp-treasures-grid { perspective: 1400px; }

.tzk-rich .tp-treasure-card-v2 {
    transform-style: preserve-3d;
    transform: rotateX(var(--tzk-rx, 0deg)) rotateY(var(--tzk-ry, 0deg)) translateY(var(--tzk-lift, 0px));
    transition: transform 0.55s var(--tzk-ease), box-shadow 0.55s var(--tzk-ease), border-color 0.4s ease;
    will-change: transform;
}

.tzk-rich .tp-treasure-card-v2:hover {
    transform: rotateX(var(--tzk-rx, 0deg)) rotateY(var(--tzk-ry, 0deg)) translateY(var(--tzk-lift, -10px));
    box-shadow:
        0 30px 70px -24px rgba(26, 60, 52, 0.4),
        0 10px 26px -12px rgba(26, 60, 52, 0.2);
}

.tzk-rich .tp-treasure-card-v2.tzk-tilting { transition: box-shadow 0.55s var(--tzk-ease), border-color 0.4s ease; }

/* Reflet suivant le curseur */
.tzk-rich .tp-treasure-card-v2::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--tzk-gx, 50%) var(--tzk-gy, 50%),
            rgba(255, 250, 235, 0.26), transparent 42%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.tzk-rich .tp-treasure-card-v2:hover::after { opacity: 1; }

/* Profondeur interne : image et icône ressortent */
.tzk-rich .tp-treasure-img-wrap { transform-style: preserve-3d; }

.tzk-rich .tp-treasure-card-v2:hover .tp-treasure-icon-float {
    transform: translateZ(46px) scale(1.08);
}

.tp-treasure-icon-float { transition: transform 0.55s var(--tzk-ease); }

.tp-treasure-img-wrap img {
    transition: transform 1.1s var(--tzk-ease), filter 1.1s var(--tzk-ease);
}

.tp-treasure-card-v2:hover .tp-treasure-img-wrap img {
    transform: scale(1.09);
    filter: saturate(1.12) brightness(1.04);
}

.tp-treasure-content h3 {
    position: relative;
    display: inline-block;
}

.tp-treasure-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--tzk-gold), transparent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.5s var(--tzk-ease);
}

.tp-treasure-card-v2:hover .tp-treasure-content h3::after { transform: scaleX(1); }

.tp-treasure-tag span { transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease; }

.tp-treasure-card-v2:hover .tp-treasure-tag span {
    background: var(--tzk-gold);
    color: var(--tzk-night);
    border-color: var(--tzk-gold);
}

/* ════════════════════════════════════════════
   5. TRANSITION GROTTE — bouche de caverne
   ════════════════════════════════════════════ */
.tp-cave-divider {
    height: 175px;
    background: linear-gradient(180deg, #ffffff 0%, #f5efe3 55%, #eee5d2 100%);
}

.tp-cave-divider svg .tp-stalactite {
    fill: #221b14;
    opacity: 0.94;
}

.tp-cave-divider svg {
    filter: drop-shadow(0 10px 18px rgba(27, 21, 16, 0.28));
}

/* Rayon de lumière balayant la cavité (nœud injecté par JS) */
.tzk-cave-beam {
    position: absolute;
    top: -55%;
    left: 18%;
    width: 64%;
    height: 210%;
    pointer-events: none;
    background: conic-gradient(from 181deg at 50% 0%,
            transparent 46.5%,
            rgba(232, 168, 56, 0.14) 49%,
            rgba(255, 236, 190, 0.2) 50%,
            rgba(232, 168, 56, 0.14) 51%,
            transparent 53.5%);
    transform-origin: 50% 0%;
    animation: tzk-beam-sway 11s ease-in-out infinite alternate;
    mix-blend-mode: multiply;
}

@keyframes tzk-beam-sway {
    from { transform: rotate(-7deg); }
    to   { transform: rotate(7deg); }
}

/* Sol : ombre d'eau au point de chute des gouttes */
.tp-cave-divider::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 6px;
    height: 14px;
    background: radial-gradient(50% 100% at 50% 100%, rgba(27, 21, 16, 0.14), transparent 75%);
    pointer-events: none;
}

.tp-cave-drop {
    background: radial-gradient(circle at 35% 30%, #cfe9f2, #6fa9c0);
    box-shadow: 0 0 8px rgba(147, 179, 196, 0.65);
}

/* ════════════════════════════════════════════
   6. RANDONNÉES À LA UNE — cartes d'aventure
   ════════════════════════════════════════════ */
.rt-hike-card {
    box-shadow:
        0 1px 2px rgba(26, 60, 52, 0.05),
        0 10px 30px -12px rgba(26, 60, 52, 0.14);
}

.rt-hike-card:hover {
    box-shadow:
        0 2px 4px rgba(26, 60, 52, 0.06),
        0 26px 60px -20px rgba(26, 60, 52, 0.3);
    border-color: rgba(232, 168, 56, 0.35);
}

.tzk-rich .rt-hike-card {
    transform: rotateX(var(--tzk-rx, 0deg)) rotateY(var(--tzk-ry, 0deg)) translateY(var(--tzk-lift, 0px));
    will-change: transform;
}

.tzk-rich .rt-hikes-grid { perspective: 1600px; }

.tzk-rich .rt-hike-card:hover {
    transform: rotateX(var(--tzk-rx, 0deg)) rotateY(var(--tzk-ry, 0deg)) translateY(var(--tzk-lift, -8px));
}

/* Scrim + lumière sur l'image */
.rt-hike-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 21, 18, 0.18) 0%, transparent 35%, transparent 62%, rgba(10, 21, 18, 0.38) 100%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.rt-hike-card-image img { will-change: transform; }

/* Badges glass sur l'image */
.rt-hike-difficulty,
.tp-activity-badge {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 4px 14px rgba(10, 21, 18, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-shadow: none;
}

/* Titre : balayage doré au survol */
.rt-hike-card-body h3 a {
    background-image: linear-gradient(90deg, var(--tzk-gold), var(--tzk-gold-warm));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.5s var(--tzk-ease), color 0.3s ease;
    padding-bottom: 2px;
}

.rt-hike-card:hover .rt-hike-card-body h3 a {
    background-size: 100% 2px;
    color: var(--tzk-forest);
}

.tp-label {
    border-radius: 999px;
    background: rgba(233, 226, 211, 0.45);
    border: 1px solid rgba(26, 60, 52, 0.09);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.rt-hike-card:hover .tp-label { border-color: rgba(232, 168, 56, 0.35); }

/* Panneau « toutes les randonnées » : relief + topo */
.tp-all-hikes-cta-inner {
    box-shadow: 0 24px 60px -24px rgba(15, 38, 32, 0.5);
}

.tp-cta-stat strong {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--tzk-forest), var(--tzk-cedar));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   7. STATS — panneau d'altitude
   ════════════════════════════════════════════ */
.rt-stats-section {
    background:
        radial-gradient(900px 380px at 82% -10%, rgba(232, 168, 56, 0.1), transparent 70%),
        linear-gradient(165deg, #143a30 0%, #0d241d 55%, #0a1512 100%);
}

.rt-stats-section .tzk-topo {
    inset: auto -6% -22% auto;
    width: min(44vw, 560px);
    aspect-ratio: 1;
    opacity: 0.9;
}

.rt-stats-section .tzk-topo path { stroke: var(--tzk-topo-dark); }

.rt-stat-card {
    background: rgba(233, 226, 211, 0.045);
    border: 1px solid rgba(233, 226, 211, 0.1);
    transition: transform 0.45s var(--tzk-ease), border-color 0.4s ease, background 0.4s ease, box-shadow 0.45s var(--tzk-ease);
}

.rt-stat-card:hover {
    border-color: rgba(232, 168, 56, 0.4);
    background: rgba(233, 226, 211, 0.07);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.55);
}

.rt-stat-icon {
    box-shadow: inset 0 0 0 1px rgba(232, 168, 56, 0.35), 0 8px 22px -10px rgba(232, 168, 56, 0.4);
    animation: tzk-levitate 6s ease-in-out infinite;
}

.rt-stat-card:nth-child(2) .rt-stat-icon { animation-delay: -2s; }
.rt-stat-card:nth-child(3) .rt-stat-icon { animation-delay: -4s; }

/* ════════════════════════════════════════════
   8. POURQUOI NOUS — blocs de confiance
   ════════════════════════════════════════════ */
.rt-feature-card {
    border-radius: 20px;
    border: 1px solid rgba(26, 60, 52, 0.07);
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(150deg, rgba(232, 168, 56, 0), rgba(232, 168, 56, 0)) border-box;
    transition: transform 0.45s var(--tzk-ease), box-shadow 0.45s var(--tzk-ease), background 0.45s ease, border-color 0.45s ease;
}

.rt-feature-card:hover {
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(150deg, rgba(232, 168, 56, 0.7), rgba(107, 143, 113, 0.5)) border-box;
    transform: translateY(-8px);
    box-shadow: 0 24px 54px -22px rgba(26, 60, 52, 0.3);
}

.rt-feature-icon { transition: transform 0.5s var(--tzk-ease); }

.rt-feature-card:hover .rt-feature-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.06);
}

/* ════════════════════════════════════════════
   9. BLOG — cartes éditoriales
   ════════════════════════════════════════════ */
.rt-blog-preview-section {
    background: linear-gradient(180deg, #fff 0%, #faf6ee 100%);
}

.rt-blog-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(26, 60, 52, 0.07);
    transition: transform 0.5s var(--tzk-ease), box-shadow 0.5s var(--tzk-ease), border-color 0.4s ease;
}

.rt-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 60px -24px rgba(26, 60, 52, 0.28);
    border-color: rgba(232, 168, 56, 0.3);
}

.rt-blog-card-img { overflow: hidden; display: block; }

.rt-blog-card-img img {
    transition: transform 1.1s var(--tzk-ease), filter 1.1s ease;
}

.rt-blog-card:hover .rt-blog-card-img img {
    transform: scale(1.07);
    filter: saturate(1.1);
}

.rt-blog-card-cat {
    background: rgba(10, 21, 18, 0.72);
    color: var(--tzk-gold-warm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(232, 168, 56, 0.35);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 800;
}

.rt-blog-card-title a {
    background-image: linear-gradient(90deg, var(--tzk-gold), var(--tzk-gold-warm));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.5s var(--tzk-ease);
    padding-bottom: 2px;
}

.rt-blog-card:hover .rt-blog-card-title a { background-size: 100% 2px; }

.rt-blog-card-author img {
    border: 2px solid var(--tzk-gold);
    box-shadow: 0 0 0 2px rgba(232, 168, 56, 0.15);
}

/* ════════════════════════════════════════════
   10. ENGAGEMENT ÉTHIQUE — manifeste cèdre
   ════════════════════════════════════════════ */
.tzk-ethique {
    background:
        linear-gradient(rgba(13, 30, 25, 0.82), rgba(10, 24, 19, 0.88)),
        url('/wp-content/uploads/2026/02/cedar-real.jpg') center 30%/cover no-repeat;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1025px) {
    .tzk-rich .tzk-ethique { background-attachment: fixed, fixed; }
}

.tzk-ethique .rt-section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.02em;
}

.tzk-ethique .rt-section-header p {
    font-size: 1.12rem;
    color: rgba(233, 226, 211, 0.88) !important;
    line-height: 1.85;
}

.tzk-ethique::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 160px rgba(4, 10, 8, 0.55);
}

.tzk-ethique .rt-container { position: relative; z-index: 2; }

/* ════════════════════════════════════════════
   11. CTA FINAL — nuit étoilée
   ════════════════════════════════════════════ */
.rt-cta-section {
    background:
        radial-gradient(1100px 520px at 50% 130%, #1d4a3e 0%, transparent 60%),
        linear-gradient(180deg, #0d241d 0%, #0a1512 100%) !important;
}

.tzk-cta-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
}

.rt-cta-content { z-index: 2; }

.rt-cta-content h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    letter-spacing: -0.025em;
}

/* ════════════════════════════════════════════
   12. FOOTER — camp de base sous les étoiles
   ════════════════════════════════════════════ */
.rt-footer {
    background: linear-gradient(180deg, #0a1512 0%, #070f0c 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(233, 226, 211, 0.06);
}

.rt-footer .tzk-topo {
    top: -10%;
    left: -8%;
    width: min(40vw, 520px);
    aspect-ratio: 1;
    opacity: 0.7;
}

.rt-footer .tzk-topo path { stroke: rgba(233, 226, 211, 0.05); }

.rt-footer .rt-container { position: relative; z-index: 2; }

.rt-footer h4 {
    position: relative;
    padding-bottom: 10px;
}

.rt-footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tzk-gold), transparent);
}

.rt-footer-links a {
    transition: color 0.3s ease, transform 0.3s var(--tzk-ease);
}

.rt-footer-links a:hover {
    color: var(--tzk-gold-warm);
    transform: translateX(4px);
}

.rt-footer-social-link {
    border: 1px solid rgba(233, 226, 211, 0.14);
    transition: background 0.35s ease, transform 0.35s var(--tzk-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.rt-footer-social-link:hover {
    background: var(--tzk-gold);
    color: var(--tzk-night);
    border-color: var(--tzk-gold);
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -8px rgba(232, 168, 56, 0.6);
}

/* ════════════════════════════════════════════
   13. PARTICULES AMBIANTES (reprises du thème)
   ════════════════════════════════════════════ */
.tzk-ethique .tp-ambient-particle {
    background: rgba(240, 192, 96, 0.5);
    box-shadow: 0 0 8px rgba(240, 192, 96, 0.35);
}

/* ════════════════════════════════════════════
   14. ACCESSIBILITÉ, MOBILE & DÉGRADATION
   ════════════════════════════════════════════ */

/* Mouvements réduits : tout se fige, tout est visible */
@media (prefers-reduced-motion: reduce) {
    .tzk-progress,
    .tzk-hero-canvas,
    .tzk-cta-canvas,
    .tzk-trail,
    .tzk-cave-beam { display: none !important; }

    .tzk-word,
    .tzk-js.tzk-front .rt-hero-content > h1,
    .rt-scroll-indicator::before,
    .tp-treasures-logo-float img,
    .rt-stat-icon,
    .tzk-topo {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .rt-btn::before { display: none; }

    .tzk-rich body::after { display: none; }
}

.tzk-reduced .tzk-hero-canvas,
.tzk-reduced .tzk-cta-canvas,
.tzk-reduced .tzk-trail,
.tzk-reduced .tzk-cave-beam { display: none !important; }

/* Appareils modestes : pas de flou coûteux, pas de grain */
.tzk-low .rt-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 21, 18, 0.95); }
.tzk-low .rt-hike-difficulty,
.tzk-low .tp-activity-badge,
.tzk-low .rt-blog-card-cat { backdrop-filter: none; -webkit-backdrop-filter: none; }
.tzk-low .tzk-cave-beam { display: none; }

/* Mobile : version élégante statique */
@media (max-width: 768px) {
    .tzk-front .rt-hero h1 { font-size: clamp(2.2rem, 9vw, 2.9rem); }

    .rt-hero .tzk-topo { width: 70vw; opacity: 0.5; top: 3%; }

    .tp-cave-divider { height: 115px; }

    .tzk-cave-beam { display: none; }

    .tzk-ethique { background-attachment: scroll, scroll; }

    .tp-treasures-logo-float img { animation-duration: 9s; }

    .tzk-progress { height: 2px; }
}

/* ════════════════════════════════════════════
   15. VIDÉOS CINÉMATIQUES (Higgsfield)
   ════════════════════════════════════════════ */
.tzk-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
}

.tzk-video-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.tzk-video-on > .tzk-bg-video,
.tzk-video-on > .tzk-video-scrim { opacity: 1; }

/* ── Héro : la vidéo devient la couche de base, l'aube remplace la nuit ── */
.tzk-scrim-hero {
    background:
        linear-gradient(90deg, rgba(8, 18, 15, 0.68) 0%, rgba(8, 18, 15, 0.34) 52%, rgba(8, 18, 15, 0.14) 100%),
        linear-gradient(180deg, rgba(8, 18, 15, 0.42) 0%, transparent 34%, transparent 68%, rgba(8, 18, 15, 0.55) 100%);
}

.rt-hero.tzk-video-on .tzk-hero-canvas { opacity: 0; transition: opacity 1s ease; }
.rt-hero.tzk-video-on .tp-hero-range--back  { opacity: 0.2; }
.rt-hero.tzk-video-on .tp-hero-range--mid   { opacity: 0.34; }
.rt-hero.tzk-video-on .tp-hero-range--front { opacity: 0.96; }
.rt-hero.tzk-video-on .tp-hero-sunbeam { opacity: 0.45; }

/* ── Grotte : le séparateur devient une fenêtre sur le Friouato ── */
.tp-cave-divider.tzk-has-video {
    height: clamp(300px, 42vh, 460px);
    background: #16120e;
}

.tp-cave-divider.tzk-has-video svg {
    height: 120px;
    top: 0;
    z-index: 2;
}

.tp-cave-divider.tzk-has-video .tzk-cave-beam { z-index: 2; mix-blend-mode: screen; opacity: 0.8; }

.tp-cave-divider.tzk-has-video .tp-cave-drop,
.tp-cave-divider.tzk-has-video .tp-cave-ripple { z-index: 3; }

.tzk-scrim-cave {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 13%, rgba(22, 18, 14, 0.12) 30%, rgba(22, 18, 14, 0.12) 72%, rgba(255, 255, 255, 0) 88%, #ffffff 100%);
    box-shadow: inset 0 0 140px rgba(8, 6, 4, 0.6);
}

.tp-cave-divider.tzk-has-video::after { display: none; }

/* ── Panneau « toutes les randonnées » : fenêtre sentier ── */
.tp-all-hikes-cta-inner {
    position: relative;
    overflow: hidden;
}

.tp-all-hikes-cta-inner > *:not(.tzk-bg-video):not(.tzk-video-scrim) {
    position: relative;
    z-index: 2;
}

.tzk-scrim-trail {
    background: linear-gradient(100deg, rgba(15, 38, 32, 0.93) 0%, rgba(15, 38, 32, 0.74) 48%, rgba(15, 38, 32, 0.45) 100%);
}

/* ── Éthique : brume de cèdres vivante (l'image reste en fallback/paint) ── */
.tzk-scrim-forest {
    background: linear-gradient(rgba(13, 30, 25, 0.78), rgba(10, 24, 19, 0.86));
}

.tzk-ethique.tzk-video-on { background-attachment: scroll, scroll; }

/* ── CTA final : vraie nuit du Moyen Atlas ── */
.rt-cta-section.tzk-video-on .tzk-cta-canvas { display: none; }

.tzk-scrim-night {
    background:
        radial-gradient(120% 100% at 50% 108%, transparent 42%, rgba(10, 21, 18, 0.6) 100%),
        linear-gradient(180deg, rgba(10, 21, 18, 0.55) 0%, rgba(10, 21, 18, 0.28) 42%, rgba(10, 21, 18, 0.62) 100%);
}

/* ── Garde-fous vidéos ── */
@media (prefers-reduced-motion: reduce) {
    .tzk-bg-video { display: none !important; }
}

.tzk-reduced .tzk-bg-video,
.tzk-low .tzk-bg-video { display: none !important; }

@media (max-width: 899px) {
    .tzk-bg-video, .tzk-video-scrim { display: none !important; }

    .tp-cave-divider.tzk-has-video {
        height: 115px;
        background: linear-gradient(180deg, #ffffff 0%, #f5efe3 55%, #eee5d2 100%);
    }
}

/* Impression : couche décorative masquée */
@media print {
    .tzk-progress,
    .tzk-hero-canvas,
    .tzk-cta-canvas,
    .tzk-trail,
    .tzk-topo,
    .tzk-cave-beam,
    .tzk-bg-video,
    .tzk-video-scrim { display: none !important; }
}