/* ==========================================================================
   VIVRE LE VAL D'ARLY — Design v2 (feuille de style partagée)
   Immobilier Val d'Arly — Jean-Pierre CLEMENT
   Fichier unique chargé par toutes les pages passées en design v2.
   N'écrase aucune variable ni classe déjà définie dans le <style> inline de
   chaque page : ce fichier RÉUTILISE les variables et classes existantes
   (--vert, --bleu, --or, --gris1/2/3/5, --radius, .sidebar-card/.jpc-card,
   .btn-nav-cta, .hero-bg-img, .station-hero-img...) et n'ajoute que ce qui
   manque. Un futur ajustement se fait ICI, une seule fois.
   ========================================================================== */

/* ----- variables additionnelles (absentes du :root existant des pages) ----- */
:root{
  --gris4:#C4C4C4;
  --brun:#7A5230;--brun-pale:#F5EDE0;
}

/* Respect du confort des utilisateurs sensibles au mouvement */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===== barre de progression de lecture ===== */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--rouge-mb),var(--or));z-index:400;width:0%;transition:width .1s linear}

/* ===== apparitions au scroll ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.visible>*{opacity:1;transform:none}
.reveal-stagger.visible>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.visible>*:nth-child(2){transition-delay:.15s}
.reveal-stagger.visible>*:nth-child(3){transition-delay:.25s}
.reveal-stagger.visible>*:nth-child(4){transition-delay:.35s}
/* Une fois l'apparition terminée, on coupe la transition/transform : évite
   d'accumuler des calques graphiques sur les pages longues (source de
   décalages d'affichage au pincement-zoom sur certains mobiles). */
.reveal.settled{transition:none;transform:none}
.reveal-stagger.settled>*{transition:none;transition-delay:0s}

/* ===== nav qui se rétrécit au scroll ===== */
/* S'applique dès que <nav> porte class="navbar" (ajouté page par page en
   phase 2/3/4 — actuellement seul index.html l'a déjà). */
.navbar{transition:background .3s}
.navbar.scrolled{backdrop-filter:blur(6px)}

/* Corrige le bug déjà identifié côté Maurienne : le CTA nav en pilule ne
   doit jamais passer à la ligne quand la nav est à l'étroit. */
.btn-nav-cta,.nav-cta{white-space:nowrap;flex-shrink:0}

/* ===== hero : zoom Ken Burns continu ===== */
/* Sur la plupart des pages, une seule photo par hero : le zoom lent
   s'applique directement sur l'image existante. Durée alignée sur celle
   de Maurienne (6.5s par phase) pour un mouvement bien perceptible. */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.14)}}
.hero-bg-img,.station-hero-img{animation:kenburns 6.5s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){
  .hero-bg-img,.station-hero-img{animation:none}
}

/* ===== hero : diaporama à plusieurs photos ===== */
/* Pour les pages qui ont plusieurs vraies photos (ex: chalet-varoche.html) :
   plusieurs <div class="hero-slide"><img class="station-hero-img" ...></div>
   empilés en absolute, un seul visible (.active) à la fois, JS fait
   l'alternance. Le zoom Ken Burns ci-dessus continue de s'appliquer à
   chaque image via sa classe .station-hero-img/.hero-bg-img habituelle. */
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;z-index:0}
.hero-slide.active{opacity:1}
.hero-slide .station-hero-img,.hero-slide .hero-bg-img{position:absolute;inset:0}

/* Titre hero en apparition ligne par ligne (à activer seulement sur les
   pages où le <h1>/<h2> du hero est réécrit avec le balisage
   <span class="line"><span>...</span></span> — phase 5, optionnel) */
.hero-title .line,.hero h1 .line,.station-hero h1 .line,.station-hero h2 .line{display:block;overflow:hidden}
.hero-title .line span,.hero h1 .line span,.station-hero h1 .line span,.station-hero h2 .line span{display:inline-block;opacity:0;transform:translateY(100%);animation:lineUp .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero-title .line:nth-child(1) span,.hero h1 .line:nth-child(1) span,.station-hero h1 .line:nth-child(1) span,.station-hero h2 .line:nth-child(1) span{animation-delay:.25s}
.hero-title .line:nth-child(2) span,.hero h1 .line:nth-child(2) span,.station-hero h1 .line:nth-child(2) span,.station-hero h2 .line:nth-child(2) span{animation-delay:.4s}
@keyframes lineUp{to{opacity:1;transform:translateY(0)}}

/* ===== sommaire collant (uniquement sur les pages qui en ont déjà un) ===== */
.sommaire-inner a.active{color:var(--vert);border-bottom-color:var(--vert)}

/* ===== compteurs animés (chiffres clés) ===== */
/* Cible la structure déjà en place (.chiffre-card .nbr), pas celle du
   brief Maurienne (.chiffre-val). Nécessite un attribut data-target sur
   .nbr pour s'activer (phase 5, optionnel) — sans cet attribut, le nombre
   reste simplement affiché tel quel, aucune régression possible. */
.chiffre-card .nbr{display:inline-block}

/* ===== retour en haut ===== */
.back-top{position:fixed;bottom:26px;right:26px;width:46px;height:46px;border-radius:50%;background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--ombre-lg);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:250;cursor:pointer;border:none}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-3px)}

/* ===== CTA mobile flottant ===== */
/* bottom se décale de la hauteur de la bannière cookies RGPD quand elle est
   affichée (--cookie-h posée par design-v2.js) : sans ce décalage, la
   bannière — z-index très élevé, déjà en place sur le site — recouvre
   entièrement le CTA tant que le visiteur n'a pas répondu au bandeau. */
.mobile-cta{position:fixed;bottom:var(--cookie-h,0px);left:0;right:0;background:var(--vert);padding:12px 18px;display:none;align-items:center;justify-content:space-between;gap:12px;z-index:300;box-shadow:0 -6px 24px rgba(0,0,0,.2);transform:translateY(100%);transition:transform .35s ease,bottom .25s ease}
.mobile-cta.show{transform:translateY(0)}
.mobile-cta a{color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
.mobile-cta .est{background:#fff;color:var(--vert);padding:9px 18px;border-radius:100px}

/* ===== micro-interactions au survol =====
   Constat (05/09/2026) : le site paraissait moins "vivant" que la Maurienne
   parce que ses cartes/CTA existants ne réagissaient pas encore au survol
   souris (contrairement à Maurienne où quasiment chaque carte/bouton bouge
   légèrement). Ajout fidèle aux mêmes familles d'éléments que côté Maurienne
   (chiffre-card, highlight, nav-cta) ou déjà en place ici (station-card,
   outil-card) : cartes de type "stat" ou "annonce", callouts, boutons CTA.
   Volontairement PAS posé sur les cartes purement informatives non cliquables
   (sidebar-card/jpc-card, temoignage-card, saison-card, prog-card, droit-card)
   pour rester fidèle au même choix que sur Maurienne. */
.chiffre-card,.prix-card,.bien-card{transition:transform .3s ease,box-shadow .3s ease}
.chiffre-card:hover,.prix-card:hover,.bien-card:hover{transform:translateY(-4px);box-shadow:var(--ombre-lg)}

/* zoom léger des photos de carte au survol (conteneurs déjà en overflow:hidden) */
.station-bg-img{transition:transform .6s ease}
.station-card:hover .station-bg-img{transform:scale(1.08)}
.bien-visuel img{transition:transform .6s ease}
.bien-card:hover .bien-visuel img{transform:scale(1.05)}

/* callout (encadré) qui réagit légèrement au survol, comme .highlight côté Maurienne */
.encadre{transition:transform .3s ease}
.encadre:hover{transform:translateX(4px)}

/* léger soulèvement des boutons CTA au survol (les couleurs au survol existent déjà
   par page ; on ajoute seulement le mouvement, sans toucher aux couleurs) */
.btn-primary:hover,.btn-outline:hover,.btn-nav-cta:hover,.nav-cta:hover{transform:translateY(-1px)}

/* ===== lightbox photo (si class="section-photo-bg" ou img cliquable ajoutée) ===== */
.lightbox{position:fixed;inset:0;background:rgba(8,10,8,.94);z-index:9000;display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:24px;right:32px;color:#fff;font-size:32px;cursor:pointer;opacity:.8;transition:opacity .2s;background:none;border:none}
.lightbox-close:hover{opacity:1}
.lightbox-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:13px}

/* ===== responsive ===== */
/* Filet générique pour les mises en page "contenu + colonne latérale"
   (.content-cols, .legal-grid, .fiche-grid, .contact-grid — même famille de
   grille utilisée sur plusieurs pages) : par défaut, un enfant direct d'une
   grille CSS ne peut jamais rétrécir sous la largeur minimale de son propre
   contenu (souvent un <table> large). Ce filet lève cette limite : le
   tableau devient alors scrollable dans son propre cadre (grâce à la règle
   table{overflow-x:auto} ci-dessous) au lieu de forcer toute la grille, et
   donc toute la page, à déborder sur mobile. Aucun effet visuel sur un
   contenu qui tenait déjà dans l'espace disponible. Bug identifié le
   05/09/2026 (investir-val-darly.html, mentions-legales.html,
   politique-confidentialite.html) lors de la vérification responsive
   demandée par Jean-Pierre. */
.content-cols > *,.legal-grid > *,.fiche-grid > *,.contact-grid > *{min-width:0}

@media(max-width:768px){
  .mobile-cta{display:flex}
  .back-top{bottom:calc(86px + var(--cookie-h,0px));transition:opacity .3s,transform .3s,bottom .25s ease}
  /* Filet de sécurité générique (identique à ce qui existe déjà côté Maurienne) :
     un <table> ne rétrécit jamais en dessous de la largeur minimale de son
     contenu. Sans ce filet, une page qui affiche un tableau (mentions-legales,
     politique-confidentialite, tableau comparatif fiscalité...) peut forcer
     toute sa mise en page à déborder de l'écran sur mobile — bug identifié
     le 05/09/2026 lors de la vérification responsive demandée par Jean-Pierre.
     Le tableau devient scrollable horizontalement au lieu de forcer la page
     entière à déborder. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}