/* =====================================================================
   OCCITANIE TOITURE — Effets 2026 (chargé après v2.css)
   Tout est en amélioration progressive : sans support navigateur ou avec
   « réduire les animations », la page reste statique et lisible.
   ===================================================================== */

/* ---------- Transitions entre les pages (navigateurs récents) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: entete; }
::view-transition-old(root) { animation: vt-sortie .35s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-entree .55s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(4px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(22px); } }

/* ---------- Grain photographique sur les fonds sombres ---------- */
.dark, .xhero, .phero, .xcta, .site-footer { position: relative; }
.dark::before, .site-footer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark > .container, .site-footer > * { position: relative; z-index: 1; }

/* ---------- Halo qui suit la souris (section sombre) ---------- */
.dark { --mx: 50%; --my: 30%; }
.dark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s;
    background: radial-gradient(520px circle at var(--mx) var(--my), rgba(212,160,23,.13), transparent 60%);
}
.dark:hover::after { opacity: 1; }

/* ---------- Titre d'accueil : mots qui montent ---------- */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.mot > span { display: inline-block; }

/* ---------- Grand texte en relief qui glisse ---------- */
.bigline { position: relative; z-index: 1; overflow: hidden; pointer-events: none; user-select: none; margin: 0 0 -1.2rem; }
.bigline span { display: block; white-space: nowrap; font-family: 'Barlow Condensed', 'Barlow Fallback', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: clamp(3.6rem, 10vw, 8.5rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px rgba(212,160,23,.28); }

/* ---------- Cartes 3D + reflet ---------- */
.tile { transform-style: preserve-3d; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; }
.tile.tilt { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s linear; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.22), transparent 55%); }
.tile.tilt::after { opacity: 1; }
.tile > *:not(img) { position: relative; z-index: 2; }
.tile > .tile__go, .tile > .tile__n { position: absolute; }

/* ---------- Boutons magnétiques ---------- */
.btn.magnet { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, background .2s, color .2s; }

/* ---------- Barre de progression de lecture ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
    background: linear-gradient(90deg, var(--rouge), var(--or)); transform-origin: 0 50%; transform: scaleX(0); }

@media (prefers-reduced-motion: no-preference) {

    /* Mots du titre : apparition au chargement */
    .js .mot > span { animation: mot-monte .95s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 85ms + 120ms); }
    @keyframes mot-monte { from { transform: translateY(105%); } }
    .js .xhero__eyebrow, .js .xhero__sub, .js .xhero__row { animation: fondu-monte .9s cubic-bezier(.22, 1, .36, 1) both; }
    .js .xhero__eyebrow { animation-delay: .05s; }
    .js .xhero__sub { animation-delay: .55s; }
    .js .xhero__row { animation-delay: .7s; }
    @keyframes fondu-monte { from { opacity: 0; transform: translateY(18px); } }

    @supports (animation-timeline: view()) {
        /* Progression de lecture */
        .progress { animation: progression linear both; animation-timeline: scroll(root); }
        @keyframes progression { to { transform: scaleX(1); } }

        /* Hero : la vidéo plonge et s'assombrit, le texte s'éloigne */
        .xhero__media, .phero__media { animation: plonge linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
        @keyframes plonge { to { transform: scale(1.18) translateY(8%); filter: brightness(.45) saturate(.8); } }
        .xhero__inner, .phero__inner { animation: eloigne linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; }
        @keyframes eloigne { to { transform: translateY(-60px); opacity: 0; } }

        /* Photos qui se dévoilent comme un rideau */
        .tile img, .story__media img, .split__media img, .strip .gallery__item, .xcta img {
            animation: rideau linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
        @keyframes rideau { from { clip-path: inset(0 0 100% 0 round 20px); transform: scale(1.18); } to { clip-path: inset(0 0 0 0 round 0); transform: scale(1); } }
        .gallery .gallery__item img { animation: zoom-entre linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
        @keyframes zoom-entre { from { transform: scale(1.25); filter: grayscale(.6); } to { transform: scale(1); filter: none; } }

        /* Grand texte qui glisse en sens contraire */
        .bigline span { animation: glisse linear both; animation-timeline: view(); }
        .bigline span:nth-child(2) { animation-direction: reverse; }
        @keyframes glisse { from { transform: translateX(8%); } to { transform: translateX(-38%); } }

        /* Chiffres : léger zoom à l'entrée */
        .kpi { animation: kpi linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
        @keyframes kpi { from { opacity: 0; transform: translateY(30px) scale(.94); } }
    }
}

/* Les photos des tuiles gardent leur zoom au survol malgré l'animation */
@media (hover: hover) {
    .tile:hover img { scale: 1.07; transition: scale 1.1s cubic-bezier(.22, 1, .36, 1); }
}

/* ---------- Croix occitane (section des métiers) ---------- */
.hubzone__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
.hubzone__title { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: .95; margin: .6rem 0 1.1rem; }
.hubzone p { color: var(--gris); font-size: 1.05rem; margin-bottom: 1.6rem; max-width: 46ch; }
.hubzone .hub { margin: 0 auto; }
.hub__glow { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,.38) 0%, rgba(178,30,40,.12) 45%, transparent 70%); filter: blur(6px); z-index: 1; }
.hub__ring { animation: anneau 40s linear infinite reverse; }
@keyframes anneau { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hub__cross img { filter: drop-shadow(0 10px 25px rgba(178,30,40,.35)); }
.hub__bubble { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s, background .3s, color .3s; }
.hub__node:hover .hub__bubble, .hub__node:focus-visible .hub__bubble { background: var(--rouge); color: #fff; border-color: var(--rouge); box-shadow: 0 16px 34px rgba(178,30,40,.35); }
@media (prefers-reduced-motion: no-preference) {
    .hub__glow { animation: pulse 4s ease-in-out infinite; }
    @keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.15); opacity: .7; } }
}
@media (prefers-reduced-motion: reduce) { .hub__ring, .hub__glow { animation: none; } }
@media (max-width: 900px) { .hubzone__grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .hubzone p { margin-left: auto; margin-right: auto; } .hubzone .xhead__kicker { justify-content: center; } }

/* =====================================================================
   PHOTOS VIVANTES
   ===================================================================== */

/* Liens des communes et pied de page */
.zones a { text-decoration: none; }
.site-footer__villes { line-height: 1.9; }
.site-footer__villes a { color: #B8BEC7; text-decoration: none; }
.site-footer__villes a:hover { color: var(--or); }

/* Vignettes : voile, loupe et reflet au survol */
.gallery__item::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s;
    background: linear-gradient(180deg, transparent 45%, rgba(10,11,13,.65));
}
.gallery__item::after {
    content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 56px; height: 56px; margin: -28px 0 0 -28px;
    border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .45s cubic-bezier(.22,1,.36,1);
    background: rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center no-repeat;
    backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4);
}
.gallery__item figcaption { z-index: 3; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.gallery__item .shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
@media (hover: hover) {
    .gallery__item:hover::before, .gallery__item:focus-visible::before { opacity: 1; }
    .gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; transform: scale(1); }
    .gallery__item:hover img { transform: scale(1.09) rotate(.4deg); filter: saturate(1.15) contrast(1.05); }
    .gallery__item:hover figcaption { transform: translateY(-4px); }
    .gallery__item img { transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s; }
}

/* Bandeau de photos qui défile (accueil) */
.photoband { overflow: hidden; padding: 1rem 0 3rem; display: grid; gap: 1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.photoband__row { overflow: hidden; }
.photoband__track { display: flex; gap: 1rem; width: max-content; }
.photoband img { width: clamp(220px, 26vw, 360px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
    transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s; filter: saturate(.9); }
.photoband img:hover { transform: scale(1.05); filter: saturate(1.2); }

/* Carrousels : bords fondus et curseur main */
.strip { cursor: grab; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.strip.is-drag .gallery__item { pointer-events: none; }

/* Visionneuse : compteur et transition entre photos */
.lightbox__count { position: absolute; top: 1.4rem; left: 1.4rem; color: #fff; font-size: .9rem; letter-spacing: .08em; opacity: .8; }
.lightbox img { transition: opacity .35s, transform .5s cubic-bezier(.22,1,.36,1); }
.lightbox img.is-out { opacity: 0; transform: scale(.96); }
.lightbox:not(.is-open) img { transform: scale(.92); }

@media (prefers-reduced-motion: no-preference) {
    /* En-têtes de page : lent zoom « Ken Burns » sur la photo */
    .phero__media img { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 60% 40%; }
    @keyframes kenburns { from { scale: 1; translate: 0 0; } to { scale: 1.14; translate: -2% -1.5%; } }

    .photoband__track { animation: band 70s linear infinite; }
    .photoband__row--rev .photoband__track { animation-direction: reverse; animation-duration: 80s; }
    .photoband:hover .photoband__track, .photoband:focus-within .photoband__track,
    .photoband.is-paused .photoband__track { animation-play-state: paused; }
    @keyframes band { to { transform: translateX(-50%); } }

    /* Reflet lumineux qui traverse la vignette au survol */
    @media (hover: hover) {
        .gallery__item:hover .shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -50%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg);
            animation: shine .9s ease-out forwards; }
        @keyframes shine { to { left: 130%; } }
    }
}
@media (prefers-reduced-motion: reduce) {
    .photoband__row { overflow-x: auto; }
}

/* Contrôles des photos animées (pause, précédent, suivant) */
.photoband { position: relative; }
.photoband__toggle { justify-self: end; margin-right: max(16px, calc((100vw - 1200px) / 2)); min-height: 44px; padding: .5rem 1.1rem;
    border: 1px solid rgba(0,0,0,.15); border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: .9rem; cursor: pointer;
    transition: background .2s ease, color .2s ease; }
.photoband__toggle:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.photoband__toggle .pb-play, .photoband.is-paused .photoband__toggle .pb-pause { display: none; }
.photoband.is-paused .photoband__toggle .pb-play { display: inline; }
@media (prefers-reduced-motion: reduce) { .photoband__toggle { display: none; } }
.strip__ctrl { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .8rem; }
.strip__ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: #fff; color: inherit;
    font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.strip__ctrl .strip__pp { font-size: .8rem; }
.strip__ctrl button:hover { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.strip__ctrl button:active { transform: scale(.94); }

/* Lisibilité et cibles tactiles (références UI/UX Pro Max) */
.chip, .xhero__eyebrow { font-size: .84rem; }
.proof__txt, .hub__label { font-size: .82rem; }
.site-footer li a, .site-footer address a { display: inline-block; padding: .2rem 0; min-height: 24px; }

/* Page Références */
.refs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; max-width: 860px; margin: 2.5rem auto 0; }
.refs-stats div { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 1.2rem; text-align: center; }
.refs-stats strong { display: block; font-size: 2.2rem; line-height: 1; color: var(--rouge); }
.refs-stats span { font-size: .9rem; color: #555; }
.refs { list-style: none; padding: 0; margin: 0 auto; max-width: 860px; display: grid; gap: .7rem; }
.refs li { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: .9rem 1.1rem;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.refs li:hover { border-color: var(--or); transform: translateX(4px); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.refs__an { flex: none; font-weight: 700; color: #fff; background: var(--rouge); border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; }
.refs li strong { display: block; }
.refs li span:not(.refs__an) { font-size: .9rem; color: #555; }