/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:        #080808;
  --bg2:       #0e0e0e;
  --bg3:       #161616;
  --bg4:       #1e1e1e;
  --orange:    #E05520;
  --orange-l:  #FF6B35;
  --orange-d:  rgba(224,85,32,.12);
  --orange-b:  rgba(224,85,32,.22);
  --gold:      #D4A835;
  --gold-l:    #F0D060;
  --gold-d:    rgba(212,168,53,.1);
  --gold-b:    rgba(212,168,53,.18);
  --white:     #FFFFFF;
  --gray:      rgba(255,255,255,.38);
  --gray2:     rgba(255,255,255,.16);
  --r:         10px;
  --r2:        16px;

  /* Coin shadows for 3D depth */
  --coin-shadow:
    0 2px 4px rgba(0,0,0,.9),
    0 8px 24px rgba(0,0,0,.7),
    0 24px 64px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.5);
  --coin-shadow-hover:
    0 4px 8px rgba(0,0,0,.9),
    0 16px 40px rgba(224,85,32,.15),
    0 40px 80px rgba(224,85,32,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.6);
}

html{
  scroll-behavior:smooth;
  /* Évite le bounce iOS qui montre du blanc */
  background:var(--bg);
  /* Support notch iPhone */
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'GeistSans','Geist Sans','Geist',system-ui,-apple-system,sans-serif;
  font-weight:400;
  overflow-x:hidden;
  /* Évite la barre de scroll horizontale parasite */
  max-width:100vw;
  /* Smooth scroll iOS */
  -webkit-overflow-scrolling:touch;
}
a{color:inherit;text-decoration:none;cursor:pointer;}
button{cursor:pointer;}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--orange-b);border-radius:2px;}

/* ─── CURSOR ─── */
#c1,#c2{display:none;}

/* ─── GRAIN CANVAS ─── */
#grain{position:fixed;inset:0;opacity:.038;pointer-events:none;z-index:1;}

/* ─── HEADER ─── */
header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 56px;
  transition:padding .35s,background .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
header.s{
  background:rgba(8,8,8,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  padding:16px 56px;
  border-color:rgba(255,255,255,.06);
}
header.s~#nav{height:56px;}
.logo{
  font-family:'Poppins',sans-serif;font-weight:900;font-size:1.05rem;letter-spacing:.07em;
  display:flex;align-items:center;gap:0;
}
.logo{display:flex;align-items:center}
.custom-logo{height:44px;width:auto;display:block;object-fit:contain}
header#hdr.s .custom-logo{height:36px}

#nav{position:fixed;top:0;right:56px;height:80px;display:flex;gap:20px;align-items:center;z-index:501;transition:height .35s;}
nav a.nl{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);
  transition:color .2s;display:flex;align-items:center;gap:4px;
}

  /* ── Bouton Infos Konatech (filiale média) ── */
  a.nl-media{
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#FF6B35 !important;
    background:rgba(224,85,32,.1);
    border:1px solid rgba(224,85,32,.45);
    border-radius:100px;
    padding:5px 13px 5px 9px !important;
    display:inline-flex !important;
    align-items:center;
    gap:7px;
    transition:background .25s,border-color .25s,color .25s,box-shadow .25s;
    white-space:nowrap;
  }
  a.nl-media::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:#FF6B35;
    box-shadow:0 0 7px #FF6B35;
    flex-shrink:0;
    animation:ikPulse 2s ease-in-out infinite;
  }
  a.nl-media svg{ display:none; }
  a.nl-media:hover{
    background:rgba(224,85,32,.2);
    border-color:rgba(224,85,32,.85);
    box-shadow:0 0 20px rgba(224,85,32,.18);
    color:#fff !important;
  }
  @keyframes ikPulse{
    0%,100%{opacity:1;box-shadow:0 0 7px #FF6B35;}
    50%{opacity:.4;box-shadow:0 0 3px #FF6B35;}
  }

nav a.nl:hover{color:var(--white);}

/* CTA nav coins */
.ncta{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:10px 22px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);transition:background .2s,color .2s;
}
.ncta:hover{background:var(--orange-d);color:var(--orange-l);}
.nc{position:absolute;width:7px;height:7px;}
.nc::before,.nc::after{content:'';position:absolute;background:var(--orange);}
.nc::before{width:1px;height:7px;} .nc::after{width:7px;height:1px;}
.nc.tl{top:0;left:0} .nc.tr{top:0;right:0} .nc.bl{bottom:0;left:0} .nc.br{bottom:0;right:0}
.nc.tr::before{right:0;left:auto} .nc.bl::after{bottom:0;top:auto}
.nc.br::before{right:0;left:auto} .nc.br::after{bottom:0;top:auto}

.burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;
  padding:6px;z-index:1010;
  position:relative;
}
.burger span{
  width:22px;height:1.5px;background:#fff;display:block;
  transition:transform .3s cubic-bezier(.23,1,.32,1), opacity .2s;
  transform-origin:center;
}
/* Burger → X quand ouvert */
.burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Bouton fermer dans le nav */
.nav-close{
  display:none;
  position:absolute;top:20px;right:24px;
  width:44px;height:44px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  align-items:center;justify-content:center;
  cursor:pointer;color:#fff;
  transition:background .2s, transform .2s;
  z-index:10;
}
.nav-close:hover{ background:rgba(255,255,255,.15); transform:rotate(90deg); }

/* Logo dans le nav mobile */
.nav-logo-mob{ display:none; margin-bottom:8px; }

/* CTA dans le nav mobile */
.nav-cta-mob{
  display:none;
  align-items:center;gap:8px;
  background:var(--orange);color:#000 !important;
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  padding:14px 32px;border-radius:6px;
  margin-top:8px;
  transition:background .25s;
}
.nav-cta-mob:hover{ background:var(--orange-l); }

@media(max-width:900px){
  header{ padding:16px 20px; }
  header.s{ padding:12px 20px; }

  /* Nav overlay : couvre TOUT l'écran, z-index max */
  #nav{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    width:100vw;height:100vh;
    /* svh pour les navigateurs mobiles qui calculent mal 100vh */
    height:100svh;
    background:rgba(6,6,6,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:28px;
    z-index:1005;
    /* Neutraliser le sibling selector desktop */
    height:100vh !important;
    overflow:hidden;
  }
  #nav.open{ display:flex; }

  /* Fix : le selector header.s~#nav ne doit pas affecter la hauteur mobile */
  header.s~#nav{ height:100vh !important; height:100svh !important; }

  #nav a.nl{
    font-size:1.1rem;
    letter-spacing:.12em;
    color:rgba(255,255,255,.85);
    gap:8px;
  }
  #nav a.nl:hover{ color:#fff; }

  .nav-close{ display:flex; }
  .nav-logo-mob{ display:block; }
  .nav-cta-mob{ display:inline-flex; }
  .burger{ display:flex; }
}

/* ─── EDGE FADES ─── */
.ef{position:fixed;pointer-events:none;z-index:2;}
.eft{top:0;left:0;right:0;height:200px;background:linear-gradient(to bottom,var(--bg),transparent);}
.efb{bottom:0;left:0;right:0;height:200px;background:linear-gradient(to top,var(--bg),transparent);}
.efl{top:0;bottom:0;left:0;width:100px;background:linear-gradient(to right,var(--bg),transparent);}
.efr{top:0;bottom:0;right:0;width:100px;background:linear-gradient(to left,var(--bg),transparent);}

/* ─────────────────────────────
   HERO
───────────────────────────── */
/* ─── HERO VIDEO BACKGROUND ─── */
.hero-video-wrap{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0.13;
  filter:saturate(0.6) brightness(0.7);
  /* Fondu doux sur les bords via masque */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 12%, black 85%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 12%, black 85%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-composite: intersect;
  transition:opacity 1.2s ease;
}
/* Quand la vidéo est chargée → légère apparition */
.hero-video.loaded{ opacity:0.15; }

/* ═══════════════════════════════════════════
   HERO MOBILE — responsive complet
═══════════════════════════════════════════ */

/* ── Tablette (≤768px) ── */
@media(max-width:768px){
  /* H1 : taille réduite */
  h1{
    font-size:clamp(1.9rem,8vw,2.8rem);
    letter-spacing:-.02em;
    line-height:1.08;
  }
  /* Sous-titre : garder uniquement la 1ère ligne (mots-clés) */
  .h-sub-line:not(:first-child){ display:none; }
  .h-sub-line.accent{ display:none; }
  .h-sub-line:first-child{ font-size:.76rem; }

  /* Social proof : compact */
  .hero-proof{
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    max-width:280px;
    margin-top:0;
  }
  .proof-sep{ display:none; }
  .proof-text{ font-size:.68rem; text-align:center; }
  .proof-rating{ font-size:.65rem; }
  .proof-stars{ font-size:.6rem; }
  .proof-avatars{ gap:0; }
  .proof-av{ width:26px; height:26px; font-size:.5rem; margin-left:-6px; }

  /* Espacements hero-center réduits */
  .hero-center{ gap:12px; padding:0 18px; }
  .brand-mark{ transform:scale(.8); margin-bottom:0; }
  /* Label accroche : réduit pour tenir sur 1 ligne */
  .h-eye{
    font-size:.44rem;
    letter-spacing:.14em;
    white-space:nowrap;
  }

  /* Cacher les coins décoration sur tablette */
  .cw-5,.cw-6,.cw-7,.cw-8{ display:none; }
}

/* ── Mobile (≤480px) ── */
@media(max-width:480px){
  .hero-video{ opacity:0.08; }

  /* H1 encore plus compact */
  h1{ font-size:clamp(1.7rem,9.5vw,2.2rem); line-height:1.06; }

  /* Marque + label : réduire */
  .brand-mark{ transform:scale(.85); margin-bottom:0; }
  .h-eye{
    font-size:.4rem;
    letter-spacing:.1em;
    white-space:nowrap;
  }

  /* Masquer tous les coins décoratifs */
  .cw{ display:none; }

  /* Masquer grilles de fond pour alléger */
  .hero::before,.hero::after{ display:none; }
  .hero-line{ display:none; }
  .hero-glow{ display:none; }

  /* CTA : pleine largeur, empilés */
  .cta-group{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:10px;
  }
  .btn-cta{
    width:100%;
    justify-content:center;
    padding:16px 20px;
  }
  .btn-ghost{display:none}

  /* Social proof ultra-compact */
  .hero-proof{
    flex-direction:column;
    align-items:center;
    gap:8px;
    max-width:100%;
  }
  .proof-avatars{ gap:-4px; }
  .proof-text{ font-size:.72rem; }
  .proof-sep{ display:none; }
  .proof-rating{ font-size:.7rem; }

  /* Hero footer : masqué sur très petit écran */
  .hfoot{ display:none; }

  /* Hero center : moins d'espace vertical */
  .hero-center{ gap:12px; padding:0 16px; margin-top:0; }

}

.hero{
  position:relative;width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;z-index:10;
  background:
    radial-gradient(ellipse 70% 60% at 15% 80%, rgba(224,85,32,.13) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 85% 20%, rgba(212,168,53,.08) 0%, transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(224,85,32,.04) 0%, transparent 65%),
    #080808;
  animation:heroBg 14s ease-in-out infinite alternate;
}
@keyframes heroBg{
  0%  { background:
          radial-gradient(ellipse 70% 60% at 15% 80%, rgba(224,85,32,.13) 0%, transparent 55%),
          radial-gradient(ellipse 55% 50% at 85% 20%, rgba(212,168,53,.08) 0%, transparent 50%),
          radial-gradient(ellipse 90% 70% at 50% 50%, rgba(224,85,32,.04) 0%, transparent 65%),
          #080808; }
  33% { background:
          radial-gradient(ellipse 65% 55% at 25% 70%, rgba(224,85,32,.10) 0%, transparent 55%),
          radial-gradient(ellipse 60% 55% at 75% 30%, rgba(212,168,53,.11) 0%, transparent 50%),
          radial-gradient(ellipse 80% 60% at 55% 45%, rgba(224,85,32,.05) 0%, transparent 65%),
          #080808; }
  66% { background:
          radial-gradient(ellipse 75% 65% at 80% 75%, rgba(212,168,53,.09) 0%, transparent 55%),
          radial-gradient(ellipse 50% 45% at 20% 15%, rgba(224,85,32,.12) 0%, transparent 50%),
          radial-gradient(ellipse 85% 65% at 45% 55%, rgba(212,168,53,.04) 0%, transparent 65%),
          #080808; }
  100%{ background:
          radial-gradient(ellipse 60% 50% at 70% 85%, rgba(224,85,32,.11) 0%, transparent 55%),
          radial-gradient(ellipse 70% 60% at 30% 25%, rgba(212,168,53,.07) 0%, transparent 50%),
          radial-gradient(ellipse 95% 75% at 50% 50%, rgba(224,85,32,.03) 0%, transparent 65%),
          #080808; }
}
/* ── Grillage aligné sur les traits de coin ── */
/* Grille fine : démarre exactement depuis les traits de coin */
.hero::before{
  content:'';
  position:absolute;
  top:10%; left:6%; right:6%; bottom:12%;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:60px 60px;
  background-position: 0 0;
  pointer-events:none;z-index:2;
  /* Fondu doux sur les 4 bords internes */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 8%,  black 92%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 8%,  black 92%, transparent 100%);
  mask-composite: intersect;
}
/* Grille large orangée : même zone, même alignement */
.hero::after{
  content:'';
  position:absolute;
  top:10%; left:6%; right:6%; bottom:12%;
  background-image:
    linear-gradient(rgba(224,85,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,85,32,.05) 1px, transparent 1px);
  background-size:180px 180px;
  background-position: 0 0;
  pointer-events:none;z-index:2;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
}
/* Lignes décoratives coins */
.hero-line{
  position:absolute;pointer-events:none;z-index:2;
}
.hl-tl{top:10%;left:6%;width:120px;height:1px;background:linear-gradient(to right,transparent,rgba(224,85,32,.3));}
.hl-tl::after{content:'';position:absolute;top:0;left:0;width:1px;height:80px;background:linear-gradient(to bottom,rgba(224,85,32,.3),transparent);}
.hl-tr{top:10%;right:6%;width:120px;height:1px;background:linear-gradient(to left,transparent,rgba(212,168,53,.25));}
.hl-tr::after{content:'';position:absolute;top:0;right:0;width:1px;height:80px;background:linear-gradient(to bottom,rgba(212,168,53,.25),transparent);}
.hl-br{bottom:12%;right:6%;width:90px;height:1px;background:linear-gradient(to left,transparent,rgba(224,85,32,.2));}
.hl-bl{bottom:12%;left:6%;width:90px;height:1px;background:linear-gradient(to right,transparent,rgba(212,168,53,.15));}

/* Glow ambient secondaire (orbite lente) */
#ambient-glow{
  position:absolute;inset:0;
  pointer-events:none;z-index:1;
  background:radial-gradient(500px circle at 30% 60%, rgba(212,168,53,.06) 0%, transparent 60%);
  animation:ambientOrbit 20s ease-in-out infinite alternate;
}
@keyframes ambientOrbit{
  0%  { background:radial-gradient(500px circle at 30% 60%, rgba(212,168,53,.06) 0%, transparent 60%); }
  25% { background:radial-gradient(500px circle at 70% 40%, rgba(224,85,32,.07) 0%, transparent 60%); }
  50% { background:radial-gradient(500px circle at 80% 70%, rgba(212,168,53,.05) 0%, transparent 60%); }
  75% { background:radial-gradient(500px circle at 20% 30%, rgba(224,85,32,.06) 0%, transparent 60%); }
  100%{ background:radial-gradient(500px circle at 50% 80%, rgba(212,168,53,.07) 0%, transparent 60%); }
}

/* ── LAPTOP ANIMÉ ── */

/* Radial glow central */
.hero-glow{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(224,85,32,.07) 0%,transparent 60%);
  pointer-events:none;z-index:2;
}

/* ── 3D COINS ── */
.cw{
  position:absolute;z-index:5;
  perspective:700px;
}
.cd{
  width:100%;height:100%;border-radius:50%;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.25,.46,.45,.94);
  
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.coin-img{
  width:116%;height:116%;
  object-fit:contain;
  mix-blend-mode:screen;
  display:block;
  filter:brightness(.78) saturate(1.15);
  transition:filter .5s,transform .5s;
  margin:-8%;
  pointer-events:none;
}
.cw:hover .cd{
  transform:rotateY(720deg) rotateX(14deg);
}
.cw:hover .coin-img{
  filter:brightness(1.05) saturate(1.3) drop-shadow(0 0 18px rgba(224,85,32,.55));
}
.coin-label{
  position:absolute;bottom:-28px;left:50%;
  transform:translateX(-50%) translateY(6px);
  white-space:nowrap;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-l);opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;font-family:'GeistSans','Geist',system-ui,sans-serif;
}
.cw:hover .coin-label{opacity:1;transform:translateX(-50%) translateY(0);}
.coin-icon{opacity:.42;transition:opacity .4s,filter .4s;}
.cw:hover .coin-icon{opacity:.9;filter:drop-shadow(0 0 10px rgba(224,85,32,.7));}

/* Positions + tailles + float */
.cw-1{width:122px;height:122px;top:7%;left:27%;animation:fl ease-in-out 8.5s infinite;animation-delay:0s;}
.cw-2{width:150px;height:150px;top:4%;right:22%;animation:fl ease-in-out 10s infinite;animation-delay:-2s;}
.cw-3{width:108px;height:108px;top:29%;left:5%;animation:fl ease-in-out 7.5s infinite;animation-delay:-1.2s;}
.cw-4{width:140px;height:140px;top:27%;right:3%;animation:fl ease-in-out 9s infinite;animation-delay:-3.5s;}
.cw-5{width:116px;height:116px;bottom:20%;left:10%;animation:fl ease-in-out 11s infinite;animation-delay:-4s;}
.cw-6{width:132px;height:132px;bottom:17%;right:10%;animation:fl ease-in-out 8s infinite;animation-delay:-1.5s;}
.cw-7{width:100px;height:100px;bottom:5%;left:26%;animation:fl ease-in-out 9.5s infinite;animation-delay:-5s;}
.cw-8{width:114px;height:114px;bottom:4%;right:25%;animation:fl ease-in-out 7s infinite;animation-delay:-2.5s;}

/* Coins en arrière-plan (plus transparents) */
.cw-3,.cw-4,.cw-7,.cw-8{opacity:.55;}

@keyframes fl{0%,100%{transform:translateY(0px);}42%{transform:translateY(-14px);}70%{transform:translateY(8px);}}

/* ── HERO CENTER ── */
.hero-center{
  position:relative;z-index:20;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:22px;max-width:860px;padding:0 24px;
}

.brand-mark{
  display:flex;gap:4px;align-items:flex-end;justify-content:center;margin-bottom:6px;
  opacity:0;animation:rup .7s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.brand-mark span{display:block;width:7px;background:var(--orange);clip-path:polygon(20% 0%,100% 0%,80% 100%,0% 100%);}
.brand-mark span:nth-child(1){height:10px} .brand-mark span:nth-child(2){height:16px} .brand-mark span:nth-child(3){height:10px}

.h-eye{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--orange);
  opacity:0;animation:rup .9s cubic-bezier(.16,1,.3,1) .22s forwards;
}

h1{
  font-family:'Poppins',sans-serif;font-weight:900;
  font-size:clamp(2.8rem,5.4vw,5.2rem);
  line-height:1.03;text-transform:uppercase;letter-spacing:-.015em;
  opacity:0;animation:rup .9s cubic-bezier(.16,1,.3,1) .34s forwards;
}
h1 em{
  font-family:'Playfair Display',serif;font-style:italic;
  font-weight:400;font-size:.82em;color:var(--orange);
  padding:0 .08em;letter-spacing:0;
}

/* ── MOT ROTATIF ── */
.flip-wrap{
  display:inline-grid;
  overflow:hidden;
  vertical-align:bottom;
  height:1.12em;
  line-height:1.12;
}
.flip-wrap > *{ grid-area:1/1; }
.flip-sizer{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1em;letter-spacing:-.015em;
  visibility:hidden;pointer-events:none;
  white-space:nowrap;
}
.flip-word{
  display:block;
  font-family:'Playfair Display',serif;font-style:italic;
  font-weight:400;font-size:1em;color:var(--orange);
  letter-spacing:-.015em;white-space:nowrap;
  will-change:transform,opacity;
}
.flip-word.out{
  animation:flipOut .35s cubic-bezier(.55,.055,.675,.19) forwards;
}
.flip-word.in{
  animation:flipIn .45s cubic-bezier(.215,.61,.355,1) forwards;
}
@keyframes flipOut{
  0%{transform:translateY(0);opacity:1;}
  100%{transform:translateY(-110%);opacity:0;}
}
@keyframes flipIn{
  0%{transform:translateY(110%);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}

/* Sous-titre éditorial */
.h-sub{
  max-width:520px;
  opacity:0;animation:rup .9s cubic-bezier(.16,1,.3,1) .46s forwards;
}
.h-sub-line{
  display:block;
  font-size:.82rem;line-height:1.75;font-weight:300;letter-spacing:.01em;
  color:rgba(255,255,255,.45);
}
.h-sub-line strong{
  color:rgba(255,255,255,.82);font-weight:500;
}
.h-sub-line.accent{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1rem;color:rgba(255,255,255,.9);font-weight:400;letter-spacing:.02em;
  margin-top:6px;text-shadow:0 0 40px rgba(255,255,255,.15);
}

/* CTA bloc hero */
.cta-group{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:rup .9s cubic-bezier(.16,1,.3,1) .58s forwards;
}

/* ── SOCIAL PROOF ── */
.hero-proof{
  display:flex;align-items:center;gap:18px;
  opacity:0;animation:rup .9s cubic-bezier(.16,1,.3,1) .72s forwards;
  margin-top:4px;
}
.proof-avatars{
  display:flex;
}
.proof-av{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.55rem;font-weight:700;letter-spacing:.03em;
  border:2px solid #080808;
  margin-left:-8px;
}
.proof-av:first-child{margin-left:0;}
.proof-sep{width:1px;height:28px;background:rgba(255,255,255,.1);}
.proof-text{font-size:.72rem;color:rgba(255,255,255,.55);line-height:1.4;text-align:left;}
.proof-text strong{color:var(--white);font-weight:600;}
.proof-rating{display:flex;align-items:center;gap:6px;font-size:.68rem;color:rgba(255,255,255,.5);}
.proof-stars{color:var(--orange);letter-spacing:1px;font-size:.65rem;}

/* Fix gap NOTRE / mot animé */
.flip-wrap{ margin-left:.18em; }

/* ── BARRE STATS HERO ── */
.hero-stats{
  position:absolute;bottom:0;left:0;right:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.06);
  z-index:20;
  opacity:0;animation:rup .9s cubic-bezier(.16,1,.3,1) .9s forwards;
}
.hstat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 16px;gap:4px;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
  transition:background .3s;
}
.hstat:last-child{border-right:none;}
.hstat::before{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:0;height:2px;background:var(--orange);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
.hstat:hover::before{width:60%;}
.hstat:hover{background:rgba(255,255,255,.02);}
.hstat-num{
  font-family:'Poppins',sans-serif;font-weight:900;
  font-size:1.9rem;color:var(--orange);line-height:1;
  letter-spacing:-.02em;
}
.hstat-lbl{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.38);font-weight:400;
}

/* Bouton primary avec COINS */
.btn-cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 38px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#000;background:var(--orange);border:none;
  font-family:inherit;font-weight:600;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .25s,transform .2s;
  overflow:hidden;
}
.btn-cta::after{
  content:'';
  position:absolute;
  top:-10%;left:-80%;
  width:55%;height:120%;
  background:linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.45) 50%,
    transparent 80%
  );
  transform:skewX(-18deg);
  animation:ctaShine 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaShine{
  0%,20%  { left:-80%; opacity:1; }
  65%,100%{ left:140%; opacity:1; }
}
.btn-cta:hover{background:var(--orange-l);transform:translateY(-2px);}
.btn-cta:hover::after{ animation-duration:1.4s; }

/* Bouton ghost — parallélogramme inversé + 4 coins */
.btn-ghost{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 38px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.78);background:transparent;
  font-family:inherit;font-weight:500;
  clip-path:polygon(0% 0%, calc(100% - 6px) 0%, 100% 100%, 6px 100%);
  transition:background .25s,color .25s;
}
.btn-ghost:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
/* 4 coins visibles (suivent le clip-path penché) */
/* ── Coins du btn-ghost (inclinés pour suivre le clip-path parallélogramme) ──
   clip-path: polygon(0% 0%, calc(100%-6px) 0%, 100% 100%, 6px 100%)
   → bords latéraux penchés ~7° vers la droite
   Les 4 coins suivent exactement le contour visuel du parallélogramme.
*/
.gco{
  position:absolute;width:12px;height:12px;
  pointer-events:none;
  /* Le skewX(7deg) incline les barres verticales pour coller au bord penché */
  transform:skewX(7deg);
}
.gco::before,.gco::after{
  content:'';position:absolute;background:rgba(255,255,255,.65);
}
/* Barre verticale */
.gco::before{width:1.5px;height:12px;top:0;left:0;}
/* Barre horizontale */
.gco::after{width:12px;height:1.5px;top:0;left:0;}

/* TL → coin visuel en (0,0) */
.gco.tl{top:0;left:0;}
.gco.tl::before{top:0;left:0;}
.gco.tl::after{top:0;left:0;}

/* TR → coin visuel en (100%-6px, 0) */
.gco.tr{top:0;right:6px;transform:skewX(7deg) scaleX(-1);}
.gco.tr::before{top:0;left:0;}
.gco.tr::after{top:0;left:0;}

/* BL → coin visuel en (6px, 100%) */
.gco.bl{bottom:0;left:6px;transform:skewX(7deg) scaleY(-1);}
.gco.bl::before{top:0;left:0;}
.gco.bl::after{top:0;left:0;}

/* BR → coin visuel en (100%, 100%) */
.gco.br{bottom:0;right:0;transform:skewX(7deg) scale(-1);}
.gco.br::before{top:0;left:0;}
.gco.br::after{top:0;left:0;}

/* FOOTER HERO */
.hfoot{
  position:absolute;bottom:28px;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;z-index:20;
  opacity:0;animation:fin 1s ease 1s forwards;
}
.av{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--orange-b);
  background:radial-gradient(circle at 40% 35%,rgba(224,85,32,.2),transparent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.74rem;color:var(--orange);
}
.tagln{
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:.76rem;color:var(--gray);
}
.scrl{
  display:flex;align-items:center;gap:8px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);
}
.mouse-w{width:14px;height:22px;border:1px solid rgba(224,85,32,.4);border-radius:8px;position:relative;flex-shrink:0;}
.mdo{width:2px;height:4px;background:var(--orange);border-radius:2px;position:absolute;top:4px;left:50%;transform:translateX(-50%);animation:sd 1.8s ease-in-out infinite;}
@keyframes sd{0%,100%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:0;transform:translateX(-50%) translateY(8px)}}
@media(max-width:768px){.hfoot{padding:0 24px;}.tagln{display:none;}}

/* ─── ANIMATIONS ─── */
@keyframes rup{from{opacity:0;transform:translateY(32px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes fin{from{opacity:0}to{opacity:1}}

/* ─── REVEAL ─── */
/* ═══════════════════════════════════════════════════════
   MOTION SYSTEM CINÉMATIQUE — WOW EDITION
   Principe : fast start → soft landing (spring physics)
   Blur lourd + translateY grand + scale → triple combo
   Chaque titre : clip-reveal mot par mot depuis le bas
   ═══════════════════════════════════════════════════════ */
:root{ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); }

/* ── BASE : éléments génériques ── */
.rv{
  opacity:0;
  transform:translateY(70px) scale(0.97);
  filter:blur(14px);
  transition:
    opacity  .75s var(--ease-spring),
    transform .75s var(--ease-spring),
    filter   .55s var(--ease-spring);
  will-change:transform,opacity,filter;
}
.rv.on{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* ── SLIDE GAUCHE (About visual) ── */
.rv-left{
  opacity:0;
  transform:translateX(-80px) scale(0.96);
  filter:blur(16px);
  transition:
    opacity  .85s var(--ease-spring),
    transform .85s var(--ease-spring),
    filter   .6s  var(--ease-spring);
}
.rv-left.on{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); }

/* ── SLIDE DROITE ── */
.rv-right{
  opacity:0;
  transform:translateX(80px) scale(0.96);
  filter:blur(16px);
  transition:
    opacity  .85s var(--ease-spring),
    transform .85s var(--ease-spring),
    filter   .6s  var(--ease-spring);
}
.rv-right.on{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); }

/* ── SCALE (cards) ── */
.rv-scale{
  opacity:0;
  transform:translateY(50px) scale(0.92) rotateX(4deg);
  filter:blur(10px);
  transform-origin: top center;
  transition:
    opacity  .9s  var(--ease-spring),
    transform .9s  var(--ease-spring),
    filter   .65s var(--ease-spring);
}
.rv-scale.on{ opacity:1; transform:translateY(0) scale(1) rotateX(0); filter:blur(0); }

/* ── Stagger delays ── */
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}
.d7{transition-delay:.49s}.d8{transition-delay:.56s}

/* ══════════════════════════════════════
   CLIP TEXT REVEAL — WOW
   Chaque mot est masqué par overflow:hidden
   L'inner span monte depuis 110% → 0
   Effet : texte surgit du bas comme une lame
   ══════════════════════════════════════ */
[data-motion-text]{
  /* reset pour que l'espace entre les mots-wrapper soit ok */
  line-height:inherit;
}
[data-motion-text] .motion-word{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  /* Pas de padding vertical sinon ça déborde */
  line-height:1.1;
  margin-bottom:.08em; /* compense le overflow:hidden qui coupe les descendants */
}
[data-motion-text] .motion-word-inner{
  display:inline-block;
  transform:translateY(110%) rotate(2deg);
  filter:blur(8px);
  transition:
    transform .7s var(--ease-spring),
    filter    .5s var(--ease-spring);
  will-change:transform,filter;
}
[data-motion-text].on .motion-word-inner{
  transform:translateY(0) rotate(0deg);
  filter:blur(0);
}

/* ── Section divider ligne animée ── */
.sec-line{
  display:block;height:1px;width:0;
  background:linear-gradient(to right, var(--orange), var(--gold), transparent);
  transition:width 1.2s var(--ease-spring);
  margin-bottom:48px;
}
.sec-line.on{ width:100%; }

/* ── Séparateur section dégradé ── */
.sec-divider{ display:none; }


/* ─── LAYOUT ─── */
.wrap{max-width:1440px;margin:0 auto;}
section{padding:112px 56px;}
@media(max-width:1024px){section{padding:96px 40px;}}
@media(max-width:768px){section{padding:80px 24px;}}

.slbl{
  display:inline-block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:14px;
}
/* Label bar — ligne pleine largeur style équipe */
.sec-bar{
  display:flex;align-items:center;gap:20px;
  margin-bottom:40px;padding:0;
}
.sec-bar .slbl{margin-bottom:0;}
.sec-bar-line{
  flex:1;height:1px;
  background:linear-gradient(to right,rgba(224,85,32,.22),transparent);
}
.sec-bar-right{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.2);white-space:nowrap;
}
.stit{
  font-family:'Poppins',sans-serif;font-weight:900;
  font-size:clamp(2.6rem,5vw,5rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:16px;
}
.ssub{font-size:.9rem;color:var(--gray);line-height:1.85;max-width:560px;letter-spacing:.01em;}

/* ─── MARQUEE LOGOS ─── */
.mq-wrap{
  position:absolute;
  bottom:0; left:0; right:0;
  z-index:20;
  background:transparent;
  padding:14px 0 18px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.mq-wrap::before,.mq-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;
}
.mq-wrap::before{left:0;background:linear-gradient(to right,#080808,transparent);}
.mq-wrap::after{right:0;background:linear-gradient(to left,#080808,transparent);}

.mq-track{
  display:flex;align-items:center;width:max-content;
  /* PAS de transform statique : conflit avec l'animation sur iOS Safari */
  animation:mqa 40s linear infinite;
  animation-play-state:running;
  /* GPU hint via will-change uniquement — pas de transform statique */
  will-change:transform;
}
/* Pause uniquement souris réelle (jamais sur touch) */
@media(hover:hover) and (pointer:fine){
  .mq-track:hover{ animation-play-state:paused; }
}

.mq-sep{
  width:1px;height:22px;background:rgba(255,255,255,.12);
  flex-shrink:0;margin:0 48px;
}

.mq-logo{
  display:flex;align-items:center;justify-content:center;
  height:48px;flex-shrink:0;padding:0 8px;
  filter:grayscale(1) brightness(1.8) opacity(.4);
  /* Pas de transition sur mobile : évite tout changement d'état au touch */
  text-decoration:none;
  /* Désactiver les événements pointer sur mobile empêche le gel au touch */
  -webkit-tap-highlight-color:transparent;
}
/* Hover + transition uniquement sur vrais pointeurs */
@media(hover:hover) and (pointer:fine){
  .mq-logo{
    transition:filter .35s ease, transform .25s ease;
  }
  .mq-logo:hover{
    filter:none;
    transform:translateY(-2px);
  }
}
.mq-logo img{
  height:40px;width:auto;
  max-width:140px;
  object-fit:contain;
  display:block;
  pointer-events:none; /* évite que l'image capture des events touch */
}

/* Keyframes : translateZ(0) intégré dans l'animation pour le GPU hint
   → pas besoin de transform statique qui conflicte */
@keyframes mqa{
  from{ transform:translateX(0) translateZ(0); }
  to{   transform:translateX(-50%) translateZ(0); }
}
@-webkit-keyframes mqa{
  from{ -webkit-transform:translateX(0) translateZ(0); }
  to{   -webkit-transform:translateX(-50%) translateZ(0); }
}

/* ── MOBILE : marquee sans aucune interférence touch ── */
@media(max-width:900px){
  .mq-wrap{
    position:relative;
    bottom:auto; left:auto; right:auto;
    width:100%;
    border-top:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:10px 0 14px;
    overflow:hidden;
    /* Fondu latéral via mask au lieu des ::before/::after */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }
  .mq-wrap::before,
  .mq-wrap::after{ display:none; }

  .mq-track{
    /* Forcer l'animation active en continu sur mobile */
    animation:mqa 25s linear infinite !important;
    animation-play-state:running !important;
    /* Supprimer will-change sur mobile : évite les problèmes de compositing iOS */
    will-change:auto;
  }

  /* Désactiver tous les pointer-events sur les logos mobile
     → le finger qui glisse ne déclenche aucun état hover/focus/active */
  .mq-logo{
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
  }
  .mq-logo img{
    height:28px;
    max-width:90px;
    pointer-events:none;
  }
  .mq-sep{ margin:0 24px; height:16px; }
}

/* ─── SERVICES ─── */
/* ─── SERVICES LIST — style editorial list (Wibify) ─── */
.srv-list{
  list-style:none;margin:0;padding:0;
  margin-top:56px;
  border-top:1px solid rgba(255,255,255,.07);
}
.srv-item{
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0;
  transform:translateY(32px);
  filter:blur(6px);
  transition:
    opacity .65s var(--ease-spring),
    transform .65s var(--ease-spring),
    filter .5s var(--ease-spring);
  position:relative;
}
.srv-item.on{ opacity:1; transform:translateY(0); filter:blur(0); }

/* Trait supérieur animé au survol */
.srv-item::before{
  content:'';
  position:absolute;
  top:-1px; left:0;
  height:1px; width:0;
  background:linear-gradient(to right, var(--orange), var(--gold), transparent);
  transition:width .65s var(--ease-spring);
  z-index:1;
}
.srv-item:hover::before{ width:100%; }

.srv-link{
  display:grid;
  grid-template-columns: 44px 160px 1fr auto auto;
  align-items:center;
  gap:28px;
  padding:26px 0;
  text-decoration:none;color:inherit;
  position:relative;
  transition:background .25s;
}
.srv-link::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right, rgba(224,85,32,.04), transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.srv-link:hover::before{ opacity:1; }

/* Vignette gradient (thumbnail) */
.srv-thumb{
  width:120px;height:68px;border-radius:6px;
  overflow:hidden;flex-shrink:0;
  opacity:0;transform:scale(.88) translateX(-8px);
  transition:opacity .35s var(--ease-spring), transform .35s var(--ease-spring);
  grid-column:2;
}
.srv-link:hover .srv-thumb{ opacity:1; transform:scale(1) translateX(0); }

/* Numéro */
.srv-num{
  font-family:'Poppins',sans-serif;
  font-size:.65rem;font-weight:600;letter-spacing:.15em;
  color:rgba(255,255,255,.25);
  grid-column:1;
}
.srv-link:hover .srv-num{ color:var(--orange); }

/* Nom avec text-roll */
.srv-name{
  margin:0;grid-column:3;
  font-size:clamp(1.3rem,2.5vw,1.9rem);
  font-family:'Poppins',sans-serif;font-weight:700;
  line-height:1;color:#fff;
  transition:color .35s var(--ease-spring);
}
.srv-link:hover .srv-name{ color:var(--orange); }
.text-roll{
  position:relative;overflow:hidden;
  display:inline-block;
  height:1.15em;vertical-align:bottom;
}
.text-roll-row{ display:flex; }
.text-roll-clone{
  position:absolute;top:100%;left:0;
}
.text-roll-letter{
  display:inline-block;
  transition:transform .55s var(--ease-spring);
  transition-delay:calc(var(--i) * 0.016s);
}
.srv-link:hover .text-roll-row:not(.text-roll-clone) .text-roll-letter{
  transform:translateY(-100%);
}
.srv-link:hover .text-roll-clone .text-roll-letter{
  transform:translateY(-100%);
}

/* Tag */
.srv-tag{
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
  grid-column:4;white-space:nowrap;
  transition:color .35s var(--ease-spring);
}
.srv-link:hover .srv-tag{ color:rgba(212,168,53,.7); }

/* Flèche */
.srv-arrow{
  font-size:1.1rem;color:var(--orange);
  grid-column:5;
  opacity:0;transform:translate(-6px,6px);
  transition:opacity .25s,transform .25s var(--ease-spring);
}
.srv-link:hover .srv-arrow{ opacity:1;transform:translate(0,0); }

/* Séparateur vertical mobile */
@media(max-width:900px){
  .srv-link{
    grid-template-columns: 36px 1fr auto;
    gap:16px;padding:20px 0;
  }
  .srv-thumb{ display:none; }
  .srv-num{ grid-column:1; }
  .srv-name{ grid-column:2; font-size:1.1rem; }
  .srv-tag{ display:none; }
  .srv-arrow{ grid-column:3; opacity:1; transform:none; }
}

/* ─── STATS ─── */
.stats-s{
  background:var(--bg2);
  border-top:1px solid var(--gold-b);border-bottom:1px solid var(--gold-b);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:60px;
}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.si{padding:44px 32px;text-align:center;position:relative;}
.si:not(:last-child)::after{
  content:'';position:absolute;right:0;top:20%;bottom:20%;
  width:1px;background:var(--gold-b);
}
@media(max-width:768px){.si:nth-child(2)::after,.si:nth-child(4)::after{display:none;}}
.sn{
  font-family:'Poppins',sans-serif;font-weight:900;
  font-size:clamp(3rem,5vw,5rem);color:var(--orange);line-height:1;margin-bottom:10px;
}
.sb{width:36px;height:2px;background:var(--gold);margin:0 auto 14px;border-radius:1px;}
.sl{font-size:.76rem;color:var(--gray);letter-spacing:.08em;}

/* ─── PORTFOLIO ─── */
.pf-filt{display:flex;gap:8px;flex-wrap:wrap;margin-top:44px;margin-bottom:52px;}
.pfb{
  padding:9px 22px;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--gray);
  border-radius:40px;transition:all .25s;font-family:inherit;
}
.pfb.on,.pfb:hover{border-color:var(--orange);color:var(--white);background:var(--orange-d);}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
@media(max-width:1024px){.pf-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.pf-grid{grid-template-columns:1fr;}}

.pc{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg3);}
.pc.tall{aspect-ratio:4/5;}
.pc-bg{position:absolute;inset:0;transition:transform .6s ease;}
.pc:hover .pc-bg{transform:scale(1.06);}
.pc-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.96) 0%,rgba(8,8,8,.25) 55%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  transform:translateY(28px);opacity:0;transition:transform .35s ease,opacity .35s ease;
}
.pc:hover .pc-ov{transform:translateY(0);opacity:1;}
.pc-tag{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.pc-tit{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;margin-bottom:14px;line-height:1.3;}
.pc-lnk{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:4px;}
.pc.hid{display:none;}

/* ─── TÉMOIGNAGES MUR DÉFILANT ─── */
.wall-s{
  background:#060606;
  overflow:hidden;
  position:relative;
  padding-bottom:80px;
}
.wall-header{ text-align:left; margin-bottom:64px; }

/* Fade edges */
.wall-s::before, .wall-s::after{
  content:'';
  position:absolute; top:0; bottom:0; width:200px;
  z-index:10; pointer-events:none;
}
.wall-s::before{ left:0;  background:linear-gradient(to right, #060606 0%, transparent 100%); }
.wall-s::after { right:0; background:linear-gradient(to left,  #060606 0%, transparent 100%); }

/* Rangées */
.wall-row{
  overflow:hidden;
  margin-bottom:18px;
}
.wall-row:last-child{ margin-bottom:0; }

/* Bande */
.wall-track{
  display:flex;
  gap:18px;
  width:max-content;
  will-change:transform;
  padding:6px 0;
}

/* Même vitesse, sens opposés */
#wallRow1 .wall-track{ animation:wallLeft  32s linear infinite; }
#wallRow2 .wall-track{ animation:wallRight 32s linear infinite; }

.wall-row:hover .wall-track{ animation-play-state:paused; }

@keyframes wallRight{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@keyframes wallLeft{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}

/* ── Carte créative : glassmorphism sombre + accent latéral ── */
.wall-card{
  flex-shrink:0;
  width:380px;
  background:linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:20px;
  padding:30px 28px 26px;
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:transform .3s cubic-bezier(.25,1,.5,1);
}
/* Accent latéral gauche */
.wall-card::before{
  content:'';
  position:absolute; left:0; top:20%; bottom:20%;
  width:3px;
  background:linear-gradient(to bottom, transparent, var(--orange), transparent);
  border-radius:0 3px 3px 0;
  opacity:.7;
  transition:opacity .3s, top .3s, bottom .3s;
}
/* Lueur de fond subtile */
.wall-card::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(224,85,32,.06) 0%, transparent 65%);
  pointer-events:none;
}
.wall-card:hover{
  transform:translateY(-4px);
}
.wall-card:hover::before{
  top:10%; bottom:10%; opacity:1;
}

/* Guillemet décoratif */
.wall-quote-mark{
  position:absolute; top:18px; right:22px;
  font-family:'Playfair Display',serif;
  font-size:4.5rem; line-height:1;
  color:rgba(224,85,32,.12);
  font-style:normal;
  pointer-events:none;
  user-select:none;
}

.wall-card-top{
  display:flex; align-items:center; gap:14px; margin-bottom:16px; position:relative; z-index:1;
}
.wall-av{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  overflow:hidden;
  background:linear-gradient(160deg,#2a1a10 0%,#1a1208 100%);
  border:2px solid rgba(255,255,255,.08);
  position:relative;
}
.wall-av img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
/* Silhouette SVG fallback si pas d'image */
.wall-av svg{
  position:absolute; bottom:-2px; left:50%;
  transform:translateX(-50%);
  opacity:.55;
}
.wall-info{ flex:1; min-width:0; }
.wall-name{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.83rem; color:rgba(255,255,255,.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wall-role{
  font-size:.62rem; color:rgba(255,255,255,.3);
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wall-stars{
  display:flex; gap:2px; margin-bottom:11px; position:relative; z-index:1;
}
.wall-stars span{ color:var(--gold); font-size:10px; }
.wall-quote{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:.8rem; line-height:1.8;
  color:rgba(255,255,255,.55);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  position:relative; z-index:1;
}

@media(max-width:768px){
  .wall-card{ width:300px; padding:22px 20px 18px; }
  .wall-s::before, .wall-s::after{ width:60px; }
  #wallRow1 .wall-track,
  #wallRow2 .wall-track{ animation-duration:22s; }
}

/* ─── BLOG ─── */
#blog{ overflow:hidden; }

/* Ticker */
.bl-ticker-wrap{
  position:relative;
  overflow:hidden;
  margin-bottom:72px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.bl-ticker-wrap::before,.bl-ticker-wrap::after{
  content:'';
  position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.bl-ticker-wrap::before{ left:0;  background:linear-gradient(to right,var(--bg1),transparent); }
.bl-ticker-wrap::after { right:0; background:linear-gradient(to left, var(--bg1),transparent); }
.bl-ticker{
  display:flex; gap:0; width:max-content;
  animation:blTick 22s linear infinite;
  white-space:nowrap;
}
.bl-ticker-item{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Poppins',sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.28);
  padding:0 28px;
}
.bl-ticker-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--orange); flex-shrink:0; opacity:.8;
}
.bl-ticker-hl{ color:var(--gold); }
@keyframes blTick{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Header section */
.bl-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:52px; gap:20px;
}
.bl-head-left{}
.bl-see-all{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding-bottom:4px;
  transition:color .25s, border-color .25s;
  white-space:nowrap; margin-bottom:6px;
}
.bl-see-all:hover{ color:var(--orange); border-color:var(--orange); }
.bl-see-all svg{ transition:transform .25s; }
.bl-see-all:hover svg{ transform:translate(3px,-3px); }

/* Scène 3D */
.bl-scene{
  perspective:1200px;
  perspective-origin:50% 40%;
  display:flex; justify-content:center; align-items:flex-end;
  gap:28px;
  padding-bottom:24px;
}

/* Carte magazine */
.bl-card{
  flex:1; max-width:360px; min-width:0;
  border-radius:20px; overflow:hidden;
  background:#111;
  position:relative;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.25,1,.5,1),
             box-shadow .55s cubic-bezier(.25,1,.5,1);
  will-change:transform;
}
/* Décalages initiaux — pile de magazines */
.bl-card:nth-child(1){
  transform:rotateY(6deg) rotateX(2deg) translateY(18px) scale(.96);
  box-shadow:-12px 32px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
}
.bl-card:nth-child(2){
  transform:rotateY(0deg) rotateX(1deg) translateY(0px) scale(1);
  box-shadow:0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.07);
  z-index:2;
}
.bl-card:nth-child(3){
  transform:rotateY(-6deg) rotateX(2deg) translateY(18px) scale(.96);
  box-shadow:12px 32px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
}
/* Hover : se redresse, monte */
.bl-card:hover{
  transform:rotateY(0deg) rotateX(0deg) translateY(-14px) scale(1.03) !important;
  box-shadow:0 50px 90px rgba(0,0,0,.8), 0 0 40px rgba(224,85,32,.12) !important;
  z-index:10 !important;
}

/* Image cover */
.bl-cover{
  height:220px;
  position:relative;
  overflow:hidden;
}
/* Miniature réelle */
.bl-thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  z-index:1;
  transition:transform .55s cubic-bezier(.25,1,.5,1);
}
.bl-card:hover .bl-thumb{ transform:scale(1.06); }
/* Overlay dégradé bas → corps (toujours visible, par-dessus la miniature) */
.bl-cover::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, #111 100%);
}
/* Tag catégorie flottant */
.bl-cat{
  position:absolute; top:16px; left:16px; z-index:4;
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  font-family:'Poppins',sans-serif; font-weight:700;
  color:#fff;
  background:rgba(224,85,32,.85);
  padding:5px 10px; border-radius:30px;
  backdrop-filter:blur(6px);
}
/* Numéro editorial */
.bl-num{
  position:absolute; bottom:14px; right:16px; z-index:4;
  font-family:'Poppins',sans-serif; font-weight:900;
  font-size:2.4rem; line-height:1;
  color:rgba(212,168,53,.22);
  letter-spacing:-.05em;
  pointer-events:none;
}
/* Icône décorative (fallback sans miniature) */
.bl-cover-icon{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
/* Quand miniature présente : masquer l'icône */
.bl-cover.has-thumb .bl-cover-icon{ display:none; }
/* Quand pas de miniature : l'overlay est plus léger */
.bl-cover:not(.has-thumb)::after{
  background:linear-gradient(to bottom, transparent 30%, #111 100%);
}

/* Corps carte */
.bl-body{ padding:20px 22px 24px; }
.bl-meta{
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.bl-date{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.bl-sep{ width:16px; height:1px; background:rgba(255,255,255,.12); }
.bl-read{
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.2);
}
.bl-title{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:1rem; line-height:1.45;
  color:rgba(255,255,255,.9);
  margin-bottom:10px;
}
.bl-exc{
  font-size:.76rem; line-height:1.78;
  color:rgba(255,255,255,.38);
  margin-bottom:18px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.bl-lnk{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  font-family:'Poppins',sans-serif; font-weight:600;
  color:var(--orange);
  transition:gap .25s;
}
.bl-card:hover .bl-lnk{ gap:10px; }

/* Gradients cover par article */
.blg1{ background:linear-gradient(135deg,#1a0e08 0%,#2d1208 50%,#0e0806 100%); }
.blg2{ background:linear-gradient(135deg,#0a0e1a 0%,#0e1628 50%,#060a12 100%); }
.blg3{ background:linear-gradient(135deg,#0a1a0e 0%,#0e2816 50%,#060e08 100%); }

/* Mobile */
@media(max-width:768px){
  .bl-scene{
    flex-direction:column; align-items:center;
    perspective:none; gap:18px;
  }
  .bl-card:nth-child(1),
  .bl-card:nth-child(2),
  .bl-card:nth-child(3){
    transform:none !important;
    box-shadow:0 20px 40px rgba(0,0,0,.5) !important;
    max-width:100%; width:100%;
  }
  .bl-head{ flex-direction:column; align-items:flex-start; }
}

/* ─── CTA SECTION ─── */
.cta-s{
  background:var(--bg2);
  position:relative;text-align:center;overflow:hidden;
  border-top:1px solid var(--gold-b);
}
.cta-s::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(224,85,32,.07) 0%,transparent 60%);
  pointer-events:none;
}
.cta-gdl{width:50px;height:2px;background:var(--gold);margin:0 auto 28px;border-radius:1px;}
.cta-s .stit{font-size:clamp(2.4rem,4.2vw,4rem);max-width:720px;margin:0 auto 18px;}
.cta-s .ssub{margin:0 auto 48px;}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

.btn-wa{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 38px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.25);
  font-family:inherit;font-weight:500;
  transition:border-color .25s,background .25s,transform .2s;
}
.btn-wa:hover{border-color:#25D366;background:rgba(37,211,102,.1);transform:translateY(-2px);}

/* ─── FOOTER ─── */
footer{
  background:#050505;
  position:relative; overflow:hidden;
  padding:0 0 0;
}
/* Grille fine blanche — identique au hero */
footer::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:60px 60px;
  background-position:0 0;
  pointer-events:none; z-index:0;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 4%, black 96%, transparent 100%);
  mask-composite: intersect;
}
/* Grille large orangée — identique au hero */
footer::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(224,85,32,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,85,32,.022) 1px, transparent 1px);
  background-size:180px 180px;
  background-position:0 0;
  pointer-events:none; z-index:0;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 4%, black 96%, transparent 100%);
  mask-composite: intersect;
}
/* Tout le contenu du footer au-dessus des grilles */
footer > *{ position:relative; z-index:1; }

/* Bande CTA intégrée au-dessus du footer */
.ft-cta{
  background:linear-gradient(105deg,#0f0705 0%,#1a0b04 40%,#0e0906 100%);
  border-top:1px solid rgba(224,85,32,.18);
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  position:relative; overflow:hidden;
}
.ft-cta::before{
  content:'';
  position:absolute; top:-60px; left:30%;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,85,32,.1) 0%, transparent 65%);
  pointer-events:none;
}
.ft-cta-left{ position:relative; z-index:1; }
.ft-cta-tag{
  font-size:.6rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--gold); margin-bottom:12px;
}
.ft-cta-h{
  font-family:'Poppins',sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.2;
  color:#fff; margin-bottom:0;
}
.ft-cta-h em{
  font-family:'Playfair Display',serif; font-style:italic;
  color:var(--orange);
}
.ft-cta-btns{
  display:flex; gap:14px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.ft-btn-p{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--orange); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 32px; border-radius:4px;
  transition:background .25s, transform .2s, box-shadow .25s;
  white-space:nowrap; position:relative; overflow:hidden;
}
.ft-btn-p::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events:none;
}
.ft-btn-p:hover{ background:var(--orange-l); transform:translateY(-2px); box-shadow:0 12px 40px rgba(224,85,32,.4); }

.ft-btn-wa{
  display:inline-flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.55);
  font-family:'Poppins',sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 0;
  transition:color .25s, transform .2s;
  white-space:nowrap; position:relative;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ft-btn-wa .wa-dot{
  width:8px; height:8px; border-radius:50%;
  background:#25D366;
  box-shadow:0 0 8px rgba(37,211,102,.7);
  animation:wa-blink 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes wa-blink{
  0%,100%{ opacity:1; box-shadow:0 0 8px rgba(37,211,102,.7); }
  50%{ opacity:.5; box-shadow:0 0 3px rgba(37,211,102,.3); }
}
.ft-btn-wa:hover{ color:#fff; transform:translateX(4px); }

/* Corps footer */
.ft-body{
  padding:64px 56px 40px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.6fr;
  gap:48px;
}
@media(max-width:1024px){.ft-body{grid-template-columns:1fr 1fr; gap:36px;}}
@media(max-width:600px){.ft-body{grid-template-columns:1fr; gap:28px; padding:40px 24px;}}

/* Colonne brand */
.ft-brand{}
.ft-logo{
  font-family:'Poppins',sans-serif; font-weight:900;
  font-size:1.3rem; letter-spacing:.1em;
  margin-bottom:6px;
}
.ft-logo span{ color:var(--orange); }
.ft-tagline{
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:.8rem; color:rgba(255,255,255,.3);
  line-height:1.7; margin-bottom:28px; max-width:220px;
}

/* Badge localisation */
.ft-loc{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:30px; padding:7px 14px;
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  margin-bottom:28px;
}
.ft-loc-dot{
  width:7px; height:7px; border-radius:50%;
  background:#25D366;
  box-shadow:0 0 0 3px rgba(37,211,102,.15);
  animation:ftPulse 2s ease-in-out infinite;
}
@keyframes ftPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(37,211,102,.15); }
  50%{     box-shadow:0 0 0 6px rgba(37,211,102,.06); }
}

/* Réseaux sociaux — icônes flottantes sans contour */
.ft-soc{ display:flex; gap:20px; align-items:center; }
.ft-sb{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.22);
  transition:color .25s, transform .25s, filter .25s;
  position:relative;
}
.ft-sb svg{ width:18px; height:18px; }
.ft-sb::after{
  content:'';
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) scaleX(0);
  width:16px;height:1.5px;
  background:var(--orange);
  border-radius:2px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.ft-sb:hover{
  color:var(--orange);
  transform:translateY(-4px);
  filter:drop-shadow(0 0 8px rgba(224,85,32,.5));
}
.ft-sb:hover::after{ transform:translateX(-50%) scaleX(1); }

/* Colonnes liens */
.ft-col-h{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px; font-weight:700;
}
.ftl{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.ftl a{
  font-size:.78rem; color:rgba(255,255,255,.3);
  display:inline-flex; align-items:center; gap:0;
  transition:color .2s, gap .2s;
}
.ftl a::before{
  content:'';
  width:0; height:1px;
  background:var(--orange);
  margin-right:0;
  transition:width .2s, margin-right .2s;
  display:inline-block;
}
.ftl a:hover{ color:rgba(255,255,255,.85); gap:6px; }
.ftl a:hover::before{ width:10px; margin-right:6px; }

/* Colonne contact */
.ft-ci{
  display:flex; gap:14px; align-items:flex-start;
  margin-bottom:20px; font-size:.78rem;
  color:rgba(255,255,255,.3);
}
.ft-ci-icon{
  width:20px; flex-shrink:0; padding-top:2px;
  display:flex; align-items:flex-start; justify-content:center;
  color:var(--orange);
  filter:drop-shadow(0 0 6px rgba(224,85,32,.4));
}

/* Séparateur + bottom */
.ft-divider{
  margin:0 56px;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.07) 30%, rgba(212,168,53,.12) 50%, rgba(255,255,255,.07) 70%, transparent);
}
.ft-bot{
  padding:22px 56px 28px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.ft-copy{
  font-size:.67rem; color:rgba(255,255,255,.18);
  display:flex; align-items:center; gap:8px;
}
.ft-copy-dot{ color:var(--orange); font-size:.5rem; }
.ft-lg{ display:flex; gap:22px; }
.ft-lg a{
  font-size:.65rem; color:rgba(255,255,255,.18);
  transition:color .2s;
}
.ft-lg a:hover{ color:rgba(255,255,255,.6); }

@media(max-width:768px){
  .ft-cta{ padding:40px 24px; flex-direction:column; align-items:flex-start; }
  .ft-divider,.ft-bot{ margin:0 24px; padding-left:0; padding-right:0; }
  .ft-cta-btns{ width:100%; flex-direction:column; gap:12px; }
  .ft-btn-p{ width:100%; justify-content:center; white-space:normal; text-align:center; padding:16px 20px; box-sizing:border-box; }
  .ft-btn-wa{ width:100%; justify-content:center; white-space:normal; text-align:center; border-bottom:none; border-top:1px solid rgba(255,255,255,.1); padding:14px 0; }
}

/* ─── GRADIENT BG CARDS ─── */
.g1{background:linear-gradient(135deg,#1a0804,#2d1206,#0d0d0d);}
.g2{background:linear-gradient(135deg,#0d0d0d,#1a1504,#2d2205);}
.g3{background:linear-gradient(135deg,#08100d,#0e1a14,#1a2a1e);}
.g4{background:linear-gradient(135deg,#12080d,#200d1a,#0d0d0d);}
.g5{background:linear-gradient(135deg,#0d0d1a,#121220,#1a1a2d);}
.g6{background:linear-gradient(135deg,#100808,#1c0a06,#2a1008);}
.gb1{background:linear-gradient(135deg,#1a0804,#2d1006);}
.gb2{background:linear-gradient(135deg,#0d0d1a,#1a1a2d);}
.gb3{background:linear-gradient(135deg,#0d1a0d,#1a2d1a);}

/* ─── WA FLOAT ─── */
.wa-fl{
  position:fixed;bottom:24px;right:24px;z-index:300;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;
  border-radius:50%;
  box-shadow:0 4px 16px rgba(37,211,102,.3);
  transition:transform .25s, box-shadow .25s;
  text-decoration:none;
  animation:wa-pulse-ring 4s ease-in-out infinite, wa-attention 30s ease-in-out infinite;
}
.wa-fl:hover{
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 6px 24px rgba(37,211,102,.45);
}
@keyframes wa-pulse-ring{
  0%,100%{ box-shadow:0 4px 16px rgba(37,211,102,.3); }
  50%{ box-shadow:0 4px 20px rgba(37,211,102,.5), 0 0 0 6px rgba(37,211,102,.06); }
}
@keyframes wa-attention{
  /* Séquence de 2.5s sur les 30s du cycle — le reste est silencieux */
  0%    { transform:scale(1) rotate(0deg); }
  1.5%  { transform:scale(1.18) rotate(-12deg); box-shadow:0 0 0 8px rgba(37,211,102,.18), 0 4px 20px rgba(37,211,102,.5); }
  3%    { transform:scale(1.18) rotate(12deg); }
  4.5%  { transform:scale(1.18) rotate(-10deg); }
  6%    { transform:scale(1.12) rotate(6deg); }
  7.5%  { transform:scale(1.06) rotate(-3deg); }
  9%    { transform:scale(1) rotate(0deg); box-shadow:0 4px 16px rgba(37,211,102,.3); }
  100%  { transform:scale(1) rotate(0deg); }
}

/* ─── PARALLAX ─── */
@media(max-width:900px){
  .cw{display:none;}
  .ef{display:none;}
}

/* ─── ABOUT INTERLUDE ─── */

.tm-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:240px 240px 200px;
  gap:8px;
  border-radius:20px;
  overflow:hidden;
}
/* Placement spécifique */
.tm-hero{ grid-column:1; grid-row:1/3; }
.tm-a   { grid-column:2; grid-row:1;   }
.tm-b   { grid-column:3; grid-row:1;   }
.tm-c   { grid-column:2; grid-row:2;   }
.tm-d   { grid-column:3; grid-row:2;   }
.tm-e   { grid-column:1; grid-row:3;   }
.tm-f   { grid-column:2; grid-row:3;   }
.tm-g   { grid-column:3; grid-row:3;   }

/* Cellule générique */
.tm-cell{
  position:relative;overflow:hidden;cursor:pointer;background:#111;
}
/* Image */
.tm-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center top;
  transition:transform .7s var(--ease-spring),filter .5s;
}
.tm-cell:hover .tm-img{ transform:scale(1.08); }

/* Overlay de base */
.tm-base{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.55) 0%,transparent 55%);
  pointer-events:none;
}

/* Overlay hover — glisse du bas */
.tm-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.93) 0%,rgba(8,8,8,.55) 45%,rgba(8,8,8,.05) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 22px;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease-spring),transform .45s var(--ease-spring);
  pointer-events:none;
}
.tm-cell:hover .tm-ov{ opacity:1;transform:translateY(0); }

/* Trait orange */
.tm-line{
  display:block;width:0;height:2px;
  background:var(--orange);border-radius:2px;margin-bottom:10px;
  transition:width .5s var(--ease-spring) .06s;
}
.tm-cell:hover .tm-line{ width:36px; }

.tm-name{
  font-family:'Poppins',sans-serif;font-weight:700;
  color:#fff;margin:0 0 4px;line-height:1.15;
  font-size:clamp(.85rem,1.1vw,1rem);
}
.tm-hero .tm-name{ font-size:clamp(1.15rem,2vw,1.55rem); }

.tm-role{
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);margin:0;
}

/* Badge pôle */
.tm-badge{
  position:absolute;top:14px;left:14px;
  font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  background:rgba(8,8,8,.6);backdrop-filter:blur(10px);
  padding:4px 10px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  opacity:0;transition:opacity .3s .05s;pointer-events:none;
}
.tm-cell:hover .tm-badge{ opacity:1; }

@media(max-width:900px){
  .tm-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:260px 180px 180px 180px;
    gap:6px;
  }
  .tm-hero{ grid-column:1/3;grid-row:1; }
  .tm-a,.tm-b,.tm-c,.tm-d,.tm-e,.tm-f,.tm-g{
    grid-column:auto;grid-row:auto;
  }
}
@media(max-width:560px){
  .tm-grid{
    grid-template-columns:1fr;
    grid-template-rows:repeat(9,220px);
  }
  .tm-hero,.tm-a,.tm-b,.tm-c,.tm-d,.tm-e,.tm-f,.tm-g{
    grid-column:1;grid-row:auto;
  }
}
.about-s{background:var(--bg);}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:64px;
}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px;}}
.about-visual{
  position:relative;aspect-ratio:1;max-width:480px;
}
.about-ring{
  position:absolute;border-radius:50%;border:1px solid var(--gold-b);
  animation:aring 12s linear infinite;
}
.about-ring:nth-child(1){inset:0;animation-duration:12s;}
.about-ring:nth-child(2){inset:8%;opacity:.6;animation-duration:18s;animation-direction:reverse;}
.about-ring:nth-child(3){inset:18%;opacity:.35;animation-duration:24s;}
@keyframes aring{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.about-center{
  position:absolute;inset:28%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 32%,rgba(255,255,255,.08) 0%,transparent 50%),
    linear-gradient(135deg,#201a12,#100c08);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-b);
}
.about-center svg{opacity:.6;}
.about-dots{position:absolute;inset:0;}
.adot{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--orange);animation:adotfl 3s ease-in-out infinite;
}
.adot:nth-child(1){top:10%;left:50%;animation-delay:0s;}
.adot:nth-child(2){top:50%;right:10%;animation-delay:.5s;}
.adot:nth-child(3){bottom:10%;left:50%;animation-delay:1s;}
.adot:nth-child(4){top:50%;left:10%;animation-delay:1.5s;}
@keyframes adotfl{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

.about-text .rv+.rv{margin-top:0;}
.about-list{list-style:none;margin-top:28px;}
.about-list li{
  display:flex;align-items:center;gap:12px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:.84rem;color:var(--gray);
}
.about-list li::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--orange);
}
/* ── TEAM CAROUSEL ── */
.team-wrap{ margin-top:0; }
.team-header{ display:flex;align-items:center;gap:20px;margin-bottom:52px; }
.team-header-line{ flex:1;height:1px;background:linear-gradient(to right,rgba(212,168,53,.25),transparent); }
.team-header-right{ font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.22);white-space:nowrap; }

/* Titre section équipe */
.team-title-block{ text-align:left; margin-bottom:52px; }
.team-title{
  font-family:'Poppins',sans-serif;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:800;line-height:1.15;
  color:#fff;margin:0 0 18px;letter-spacing:-.02em;
}
.team-title-accent{
  font-family:'Playfair Display',serif;
  font-style:italic;font-weight:700;
  background:linear-gradient(90deg,var(--orange),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.team-subtitle{
  font-size:1.05rem;color:rgba(255,255,255,.45);
  max-width:540px;margin:0 auto;line-height:1.7;
}

.tm-carousel-wrap{
  position:relative;
  width:calc(100% + 480px);
  margin-left:-240px;
  height:520px;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;overflow:hidden;
}
.tm-card{
  position:absolute;
  width:200px;height:420px;
  border-radius:24px;overflow:hidden;
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 32px 64px rgba(0,0,0,.6);
  transition:transform .42s cubic-bezier(.25,1,.5,1),
             opacity .42s cubic-bezier(.25,1,.5,1),
             filter .42s cubic-bezier(.25,1,.5,1);
  will-change:transform,opacity,filter;
  cursor:pointer;
}
.tm-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;
}
/* Overlay gradient sur chaque card */
.tm-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,8,8,.7) 0%, transparent 50%);
  pointer-events:none;
}
/* Nav buttons */
.tm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:20;
  transition:background .25s,border-color .25s,transform .25s;
  backdrop-filter:blur(8px);
}
.tm-nav:hover{
  background:rgba(224,85,32,.15);
  border-color:rgba(224,85,32,.4);
  transform:translateY(-50%) scale(1.08);
}
.tm-nav svg{ width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none; }
.tm-nav-prev{ left:20px; }
.tm-nav-next{ right:20px; }
/* Dots */
.tm-dots{
  display:flex;gap:8px;justify-content:center;margin-top:28px;
}
.tm-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:background .3s,transform .3s;cursor:pointer;
}
.tm-dot.active{ background:var(--orange);transform:scale(1.4); }

@media(max-width:768px){
  .tm-carousel-wrap{ height:380px; }
  .tm-card{ width:150px;height:300px; }
  .tm-nav{ width:36px;height:36px; }
  .tm-nav-prev{ left:6px; }
  .tm-nav-next{ right:6px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PREMIUM — Optimisations globales responsive
   Toutes les corrections sont regroupées ici pour lisibilité
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. PERFORMANCES GPU : supprimer blur sur reveals mobiles ──
   filter:blur() sur de nombreux éléments = lag scroll Android/iOS
   On garde uniquement translateY + opacity sur mobile
*/
@media(max-width:900px){
  .rv{
    filter:none;
    transform:translateY(40px);
    transition:opacity .6s var(--ease-spring), transform .6s var(--ease-spring);
  }
  .rv.on{ transform:translateY(0); filter:none; }

  .rv-left{
    filter:none;
    transform:translateX(-40px);
    transition:opacity .65s var(--ease-spring), transform .65s var(--ease-spring);
  }
  .rv-left.on{ transform:translateX(0); filter:none; }

  .rv-right{
    filter:none;
    transform:translateX(40px);
    transition:opacity .65s var(--ease-spring), transform .65s var(--ease-spring);
  }
  .rv-right.on{ transform:translateX(0); filter:none; }

  .rv-scale{
    filter:none;
    transform:translateY(30px) scale(0.95);
    transition:opacity .65s var(--ease-spring), transform .65s var(--ease-spring);
  }
  .rv-scale.on{ transform:translateY(0) scale(1); filter:none; }

  /* Révèle mots : simplifier aussi */
  [data-motion-text] .motion-word-inner{
    filter:none;
    transition:transform .6s var(--ease-spring);
  }

  /* Hero background : statique sur mobile (stopper animation GPU) */
  .hero{ animation:none; }
  #ambient-glow{ animation:none; display:none; }
}

/* ── 2. HERO STATS — 2×2 sur mobile ── */
@media(max-width:768px){
  .hero-stats{
    grid-template-columns:repeat(2,1fr);
    position:relative;
    border-top:1px solid rgba(255,255,255,.06);
    margin-top:0;
  }
  .hero-stats .hstat:nth-child(2){ border-right:none; }
  .hero-stats .hstat:nth-child(3){ border-top:1px solid rgba(255,255,255,.06); }
  .hero-stats .hstat{ padding:16px 12px; }
  .hstat-num{ font-size:1.5rem; }
  .hstat-lbl{ font-size:.52rem; }
}

/* ── 3. PORTFOLIO FILTRES — scroll horizontal sur mobile ── */
@media(max-width:768px){
  .pf-filt{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    margin-bottom:32px;
    /* Fade droite pour indiquer le scroll */
    -webkit-mask-image:linear-gradient(to right, black 80%, transparent 100%);
    mask-image:linear-gradient(to right, black 80%, transparent 100%);
  }
  .pf-filt::-webkit-scrollbar{ display:none; }
  .pfb{
    flex-shrink:0;
    scroll-snap-align:start;
    padding:8px 16px;
    font-size:.6rem;
  }
}

/* ── 4. PORTFOLIO OVERLAY — toujours visible sur mobile (pas de hover) ── */
@media(max-width:900px){
  .pc-ov{
    transform:translateY(0);
    opacity:1;
    background:linear-gradient(to top, rgba(8,8,8,.95) 0%, rgba(8,8,8,.4) 55%, transparent 100%);
  }
  .pc:hover .pc-ov{ transform:translateY(0); }
  /* Zoom image au tap : désactivé pour fluidité */
  .pc:active .pc-bg{ transform:scale(1.03); }
}

/* ── 5. PORTFOLIO GRID MOBILE — cards plus hautes sur 1 col ── */
@media(max-width:640px){
  .pf-grid{ gap:4px; }
  .pc{ aspect-ratio:16/9; }
  .pc-tit{ font-size:.9rem; margin-bottom:8px; }
  .pc-tag{ font-size:.52rem; margin-bottom:6px; }
  .pc-ov{ padding:20px 18px; }
}

/* ── 6. CAROUSEL ÉQUIPE — fix overflow horizontal ── */
@media(max-width:900px){
  #equipe{ overflow:hidden; }
  .tm-carousel-wrap{
    width:100%;
    margin-left:0;
    overflow:hidden;
  }
  /* Touch action pour swipe sans bloquer scroll vertical */
  .tm-carousel-wrap{ touch-action:pan-y; }
}

/* ── 7. TITRE DE SECTION (.stit) — réduction sur petits écrans ── */
@media(max-width:768px){
  .stit{
    font-size:clamp(1.8rem,7vw,3rem);
    letter-spacing:-.015em;
  }
}
@media(max-width:480px){
  .stit{ font-size:clamp(1.6rem,8vw,2.4rem); }
}

/* ── 8. SEC-BAR-RIGHT — masqué sur mobile (trop de texte) ── */
@media(max-width:480px){
  .sec-bar-right{ display:none; }
  .sec-bar{ margin-bottom:28px; }
}

/* ── 9. FOOTER BOTTOM — colonne sur très petit écran ── */
@media(max-width:480px){
  .ft-bot{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:20px 24px 28px;
  }
  .ft-lg{ gap:14px; }
}

/* ── 10. FOOTER CTA — padding réduit sur petit écran ── */
@media(max-width:480px){
  .ft-cta{ padding:32px 20px; }
  .ft-cta-h{ font-size:1.4rem; }
}

/* ── 11. MARQUEE HERO mobile — voir le bloc complet dans la section marquee ci-dessus ── */

/* ── 12. NAVIGATION MOBILE — lien Infos Konatech compact ── */
@media(max-width:900px){
  a.nl-media{
    font-size:.8rem;
    padding:8px 16px 8px 12px !important;
  }
}

/* ── 13. SECTION PADDING ultra-mobile ── */
@media(max-width:480px){
  section{ padding:64px 20px; }
  .sec-bar{ gap:14px; }
}

/* ── 14. HERO CENTER — padding réduit 320px ── */
@media(max-width:380px){
  .hero-center{ padding:0 12px; gap:10px; }
  h1{ font-size:clamp(1.6rem,9vw,2.2rem); }
  .h-sub-line:first-child{ font-size:.72rem; }
}

/* ── 15. SERVICES — item plus compact sur mobile ── */
@media(max-width:480px){
  .srv-link{ padding:16px 0; gap:12px; }
  .srv-num{ font-size:.6rem; }
  .srv-name{ font-size:1rem; }
  .srv-arrow{ font-size:.9rem; }
}

/* ── 16. STATS — padding compact ── */
@media(max-width:480px){
  .si{ padding:32px 16px; }
  .sn{ font-size:clamp(2rem,8vw,3rem); }
}

/* ── 17. TÉMOIGNAGES — section padding ── */
@media(max-width:480px){
  .wall-header{ margin-bottom:36px; }
  .wall-card{ width:280px; padding:18px 16px 16px; }
}

/* ── 18. BLOG — cards full-width mobile ── */
@media(max-width:480px){
  .bl-cover{ height:180px; }
  .bl-title{ font-size:.92rem; }
  .bl-body{ padding:16px 18px 20px; }
}

/* ── 19. MODAL RÉALISATIONS — plein écran sur mobile ── */
@media(max-width:600px){
  #rl-modal{ padding:0; align-items:flex-end; }
  .rlm-inner{
    border-radius:20px 20px 0 0;
    max-height:92vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .rlm-cover{ aspect-ratio:16/9; }
}

/* ── 20. WhatsApp flottant — position ajustée mobile ── */
@media(max-width:480px){
  .wa-fl{ bottom:16px; right:16px; width:48px; height:48px; }
}

/* ── 21. Safe area iPhone (notch / Dynamic Island) ── */
@supports(padding:env(safe-area-inset-bottom)){
  footer{ padding-bottom:env(safe-area-inset-bottom); }
  .wa-fl{ bottom:calc(16px + env(safe-area-inset-bottom)); }
}

/* ── 22. PREFERS-REDUCED-MOTION — accessibilité ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rv,.rv-left,.rv-right,.rv-scale{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  [data-motion-text] .motion-word-inner{
    transform:none !important;
    filter:none !important;
  }
  .mq-track{ animation:none !important; }
  .wall-track{ animation:none !important; }
  .hero{ animation:none !important; }
  #ambient-glow{ animation:none !important; }
  .wa-fl{ animation:none !important; }
}