/* ===================================================
   KL CORDEUR — Améliorations "haut de gamme"
   Tilt 3D, typographie éditoriale, verre dépoli & accents métalliques.
   (Le curseur personnalisé et l'effet "boutons magnétiques" ont été retirés :
   le site utilise le curseur natif du navigateur partout.)
   Fichier séparé exprès : facile à désactiver en retirant
   juste la balise <link> dans index.html.
   =================================================== */

/* ===== 2. TILT 3D SUR LES VISUELS CLÉS ===== */
@media (hover: hover) and (pointer: fine){
  .tilt-3d{
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
    transition: transform .5s cubic-bezier(.22,.9,.32,1);
    will-change: transform;
  }
  .tilt-3d.is-tilting{ transition: transform .08s linear; }
}

/* ===== 3. TYPOGRAPHIE ÉDITORIALE — révélation mot par mot au scroll ===== */
.reveal-words .rw{
  display: inline-block;
  opacity: 0; transform: translateY(0.5em);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-words.rw-in .rw{ opacity: 1; transform: translateY(0); }
/* Si le JS ne s'exécute pas (rare), le texte doit rester lisible immédiatement */
html:not(.premium-js-ready) .reveal-words .rw{ opacity: 1; transform: none; }

/* ===== 4. VERRE DÉPOLI (cartes specs / tarifs) ===== */
.glass-card{
  position: relative;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 60%),
    rgba(20,24,30,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 40px -24px rgba(0,0,0,0.6);
}
.glass-card::before{
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, rgba(255,255,255,0.35), transparent 40%, transparent 70%, rgba(79,163,255,0.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ===== 5. ACCENTS MÉTALLIQUES (chiffres clés) ===== */
@keyframes metallic-shimmer{
  to{ background-position: -200% center; }
}
.metallic-text{
  background: linear-gradient(100deg, #aeb6bf 0%, #ffffff 22%, #7b838c 45%, #ffffff 68%, #aeb6bf 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: metallic-shimmer 5s linear infinite;
}
.metallic-text.green{
  background: linear-gradient(100deg, #7f9a26 0%, var(--vert-vif) 22%, #4d5c17 45%, var(--vert-vif) 68%, #7f9a26 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce){
  .metallic-text{ animation: none; }
}

@media (prefers-reduced-motion: reduce){
  .reveal-words .rw{ transition: none; }
  .tilt-3d{ transition: none; }
}

/* ===== 6. LOADER D'OUVERTURE — court "reveal" du logo, entièrement piloté en CSS
   (aucune dépendance au JS : garanti de disparaître même si un script échoue). ===== */
.page-loader{
  position: fixed; inset: 0; z-index: 99999;
  background: var(--noir);
  display: flex; align-items: center; justify-content: center;
  animation: page-loader-fade 900ms ease forwards;
}
@keyframes page-loader-fade{
  0%{ opacity: 1; visibility: visible; }
  72%{ opacity: 1; visibility: visible; }
  100%{ opacity: 0; visibility: hidden; }
}
.page-loader-mark{ position: relative; display: flex; align-items: center; justify-content: center; }
.page-loader-logo{
  width: 58px; height: auto; opacity: 0; position: relative; z-index: 2;
  animation: page-loader-logo-in 420ms ease forwards;
}
@keyframes page-loader-logo-in{
  0%{ opacity: 0; transform: scale(0.8); }
  100%{ opacity: 1; transform: scale(1); }
}
.page-loader-ring{
  position: absolute; width: 96px; height: 96px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--vert-vif); border-right-color: var(--bleu-vif);
  opacity: 0;
  animation: spin 900ms linear forwards, page-loader-ring-in 300ms ease forwards;
}
@keyframes page-loader-ring-in{ to{ opacity: 0.8; } }

/* Filet de sécurité n°1 : si prefers-reduced-motion est actif, la règle globale du
   site désactive TOUTES les animations (*{animation:none!important}) — sans cette
   ligne, le loader resterait bloqué à l'écran pour toujours puisque son animation de
   disparition ne se jouerait jamais. On le masque donc directement, sans animation. */
@media (prefers-reduced-motion: reduce){
  .page-loader{ display: none !important; }
}
/* Filet de sécurité n°2 : si le CSS met plus de temps que prévu à s'appliquer ou
   qu'un script externe ralentit le rendu, on ne bloque jamais l'interaction au-delà
   d'une seconde — voir aussi le filet JS dans premium.js. */

/* ===== 7. GRAIN CINÉMATIQUE — texture de bruit très subtile sur tout le site =====
   Le détail qui fait la différence entre "joli site" et "on sent le savoir-faire" :
   sans lui un fond uni paraît plat/numérique, avec lui la même page semble tactile.
   Statique (pas animée) pour rester discrète — un grain qui scintille distrait plus
   qu'il n'ajoute. */
body::after{
  content: '';
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: 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.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* ===== 8. FIL DE PROGRESSION AU SCROLL — dégradé de marque, tout en haut ===== */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
  background: linear-gradient(90deg, var(--bleu-vif), var(--vert-vif));
  box-shadow: 0 0 8px rgba(79,163,255,0.5);
  z-index: 700; pointer-events: none;
}

/* ===== CATALOGUE — carrousel simple, effet 3D léger au survol =====
   Positionnement à plat (translateX + échelle + opacité selon la distance à la
   carte active, pas de rotation 3D complexe) : simple à comprendre, rapide à
   afficher, et cohérent quel que soit le sens de navigation. Le seul "3D" est
   un léger tilt + une ombre plus marquée au survol (pur CSS, voir plus bas),
   pour donner un peu de relief sans jamais dépendre de la position de la souris. */
.coverflow{
  position: relative;
  height: 560px;
  margin-top: 44px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px; /* juste assez pour que le tilt au survol ait l'air 3D */
  overflow: hidden;
}
.coverflow-stage{
  position: relative; width: 100%; height: 100%;
}
.coverflow-item{
  position: absolute; top: 50%; left: 50%;
  width: 420px; height: 420px;
  border: none; padding: 0; cursor: pointer; border-radius: 16px; overflow: hidden;
  background: var(--noir-3, #14181e);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.65);
  transform: translate(-50%, -50%) translateX(var(--tx, 0px)) scale(var(--scale, 1));
  transition: transform .45s cubic-bezier(.22,.9,.32,1), opacity .45s ease, box-shadow .3s ease;
  will-change: transform;
}
.coverflow-item img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.coverflow-item:focus-visible{ outline: 2px solid var(--vert-vif); outline-offset: 3px; }
.coverflow-item.is-active{ cursor: zoom-in; }
.coverflow-item.is-active::after{
  content: '🔍 Cliquer pour agrandir';
  position: absolute; left:0; right:0; bottom:0; padding: 10px 0; text-align:center;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing:0.04em; color: var(--blanc);
  background: linear-gradient(0deg, rgba(6,7,10,0.85), transparent);
  opacity: 0; transition: opacity .2s ease;
}
.coverflow-item.is-active:hover::after{ opacity: 1; }

/* Effet 3D léger au survol : tilt fixe + ombre plus profonde. Pur CSS, ne dépend
   jamais de la position de la souris — donc aucun script à exécuter, aucun risque
   de ralentir la navigation. Désactivé sur tactile (pas de vrai "survol") et pour
   les personnes qui préfèrent moins de mouvement. */
@media (hover: hover) and (pointer: fine){
  .coverflow-item:hover{
    transform: translate(-50%, -50%) translateX(var(--tx, 0px)) scale(calc(var(--scale, 1) * 1.03)) rotateX(4deg);
    box-shadow: 0 26px 50px -14px rgba(0,0,0,0.75);
  }
}

.coverflow-nav{
  position: absolute; top: 50%; z-index: 20; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(6,7,10,0.6); backdrop-filter: blur(8px); color: var(--blanc);
  font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.coverflow-nav:hover{ background: rgba(255,255,255,0.1); transform: translateY(-50%) scale(1.08); }
.coverflow-nav.prev{ left: 4%; }
.coverflow-nav.next{ right: 4%; }

.coverflow-dots{ display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.coverflow-dots button{
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.18); transition: background .2s ease, transform .2s ease;
}
.coverflow-dots button.is-active{ background: var(--vert-vif); transform: scale(1.3); }

/* ===== Lightbox plein écran (zoom sur une page du catalogue) ===== */
.catalogue-lightbox{
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(4,5,6,0.92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  padding: 40px;
}
.catalogue-lightbox.is-open{ opacity: 1; visibility: visible; }
.catalogue-lightbox img{
  max-width: min(90vw, 800px); max-height: 85vh; width: auto; height: auto;
  border-radius: 14px; box-shadow: 0 40px 100px rgba(0,0,0,0.7);
}
.catalogue-lightbox-close{
  position: absolute; top: 26px; right: 30px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,0.06); color: var(--blanc);
  font-size: 22px; cursor: pointer; transition: background .2s ease;
}
.catalogue-lightbox-close:hover{ background: rgba(255,255,255,0.14); }
.catalogue-lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(255,255,255,0.06); color: var(--blanc); font-size: 26px; cursor: pointer;
  transition: background .2s ease;
}
.catalogue-lightbox-nav:hover{ background: rgba(255,255,255,0.14); }
.catalogue-lightbox-nav.prev{ left: 22px; }
.catalogue-lightbox-nav.next{ right: 22px; }

@media (max-width: 720px){
  .coverflow{ height: 380px; perspective: 900px; }
  .coverflow-item{ width: 260px; height: 260px; }
  .coverflow-nav{ width: 40px; height: 40px; font-size: 20px; }
  .coverflow-nav.prev{ left: 2%; }
  .coverflow-nav.next{ right: 2%; }
  .catalogue-lightbox{ padding: 16px; }
  .catalogue-lightbox img{ max-width: 92vw; }
  .catalogue-lightbox-nav{ width: 42px; height: 42px; font-size: 20px; }
  .catalogue-lightbox-nav.prev{ left: 8px; }
  .catalogue-lightbox-nav.next{ right: 8px; }
  .catalogue-lightbox-close{ top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .coverflow-item{ transition: opacity .3s ease; }
}