/* ══════════════════════════════════════════════════════
   Gtech Digital — style.css
   Version: 3.0 | gtechsn.com
   Theme: Light Professional — Agence digitale premium
══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════════════════ */
:root {
  /* ── Palette Light ── */
  --ink:     #FFFFFF;          /* fond principal */
  --ink2:    #F8FAFC;          /* fond sections alternées */
  --ink3:    #FFFFFF;          /* fond cartes */
  --ink4:    #F1F5F9;          /* fond cartes alt / hover subtil */

  /* ── Texte ── */
  --smoke:   #0F172A;          /* texte principal — navy profond */
  --dim:     #64748B;          /* texte secondaire — gris slate */

  /* ── Marque ── */
  --fire:    #FF3D00;          /* orange Gtech — CTA principal */
  --fire2:   #FF6B35;          /* orange clair — hover */
  --ice:     #0891B2;          /* cyan professionnel */
  --gold:    #D97706;          /* or lisible sur fond clair */
  --violet:  #7C3AED;          /* violet accent */

  /* ── Bordures ── */
  --edge:    rgba(15,23,42,0.09);   /* bordure légère */
  --edge2:   rgba(15,23,42,0.16);   /* bordure medium */

  /* ── Typographie ── */
  --display: 'Clash Display', sans-serif;
  --body:    'DM Sans', sans-serif;

  /* ── Rayons ── */
  --r-sm:    .5rem;
  --r-md:    1rem;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
  --shadow-md:  0 4px 16px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.06);
  --shadow-lg:  0 12px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.07);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--ink);color:var(--smoke);font-family:var(--body);font-weight:300;overflow-x:hidden;cursor:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:var(--body)}
ul{list-style:none}

/* ═══════════════════════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════════════════════ */
#dot,#ring{position:fixed;pointer-events:none;z-index:99999;border-radius:50%;transform:translate(-50%,-50%)}
#dot{width:8px;height:8px;background:var(--fire);transition:width .2s,height .2s,background .2s}
#ring{width:36px;height:36px;border:1.5px solid rgba(255,61,0,.4);transition:border-color .3s}
.cursor-grow #dot{width:20px;height:20px}
.cursor-grow #ring{border-color:rgba(255,61,0,.7)}

/* ═══════════════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════════════ */
.container{max-width:1280px;margin:0 auto;padding:0 3rem}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fire);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--fire);flex-shrink:0}
.display-xl{font-family:var(--display);font-size:clamp(4rem,9vw,9.5rem);line-height:.88;letter-spacing:-.02em;font-weight:700}
.display-lg{font-family:var(--display);font-size:clamp(2.8rem,5.5vw,5.5rem);line-height:.9;letter-spacing:-.02em;font-weight:700}
.display-md{font-family:var(--display);font-size:clamp(1.8rem,3.5vw,3.2rem);line-height:.95;letter-spacing:-.01em;font-weight:600}
.display-sm{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.8rem);line-height:1;letter-spacing:-.01em;font-weight:600}
.text-fire{color:var(--fire)}
.text-ice{color:var(--ice)}
.text-gold{color:var(--gold)}
.text-dim{color:var(--dim)}
.text-body{font-size:.95rem;line-height:1.8;color:var(--dim)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.section{padding:6rem 0}
.section-sm{padding:4rem 0}
.divider{width:100%;height:1px;background:var(--edge)}
.tag{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .7rem;border:1px solid;border-radius:2px}
.tag-fire{color:var(--fire);border-color:rgba(255,61,0,.25);background:rgba(255,61,0,.06)}
.tag-ice{color:var(--ice);border-color:rgba(8,145,178,.25);background:rgba(8,145,178,.06)}
.tag-gold{color:var(--gold);border-color:rgba(217,119,6,.25);background:rgba(217,119,6,.06)}
.tag-smoke{color:var(--dim);border-color:var(--edge);background:var(--ink4)}
.tag-violet{color:var(--violet);border-color:rgba(124,58,237,.25);background:rgba(124,58,237,.06)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:.85rem 2rem;cursor:none;transition:all .22s;border:none}
.btn-fire{background:var(--fire);color:white}
.btn-fire:hover{background:var(--fire2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,61,0,.25)}
.btn-ice{background:var(--ice);color:white}
.btn-ice:hover{background:#0ea5c9;transform:translateY(-2px);box-shadow:0 10px 30px rgba(8,145,178,.25)}
.btn-ghost{background:transparent;color:var(--smoke);border:1.5px solid var(--edge2)}
.btn-ghost:hover{border-color:var(--fire);color:var(--fire);background:rgba(255,61,0,.04)}
.btn-white{background:white;color:var(--smoke);font-weight:700;box-shadow:var(--shadow-sm)}
.btn-white:hover{background:var(--ink4);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.4rem;font-size:.74rem}

/* CARDS */
.card-base{background:var(--ink3);border:1px solid var(--edge);box-shadow:var(--shadow-sm);transition:border-color .3s,transform .25s,box-shadow .25s}
.card-base:hover{border-color:rgba(255,61,0,.3);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-glow{position:relative;overflow:hidden}
.card-glow::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gb,linear-gradient(90deg,var(--fire),var(--ice)));transform:scaleX(0);transition:transform .4s;transform-origin:left}
.card-glow:hover::before{transform:scaleX(1)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .6s ease}
.reveal-l.in{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease}
.reveal-r.in{opacity:1;transform:translateX(0)}

/* ═══════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;background:rgba(255,255,255,.95);backdrop-filter:blur(22px);border-bottom:1px solid var(--edge);box-shadow:var(--shadow-sm);transition:background .3s}
.nav-logo{font-family:var(--display);font-size:1.65rem;font-weight:700;letter-spacing:-.02em;color:var(--smoke)}
.nav-logo span{color:var(--fire)}
.nav-links{display:flex;gap:.2rem}
.nav-links a{font-size:.76rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:.55rem 1.1rem;position:relative;transition:color .2s}
.nav-links a::after{content:'';position:absolute;bottom:-.2rem;left:1.1rem;right:1.1rem;height:2px;background:var(--fire);transform:scaleX(0);transition:transform .25s}
.nav-links a:hover,.nav-links a.active{color:var(--smoke)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-tel{font-size:.76rem;color:var(--dim);letter-spacing:.04em}
.nav-tel span{color:var(--fire);font-weight:600}
.ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:.4rem}
.ham span{display:block;width:22px;height:1.5px;background:var(--smoke);transition:all .3s}

/* MOBILE NAV */
.nav-drawer{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);backdrop-filter:blur(24px);padding:2rem 3rem;flex-direction:column;gap:0;z-index:999;overflow-y:auto}
.nav-drawer.open{display:flex}
.nav-drawer a{font-family:var(--display);font-size:2rem;font-weight:700;letter-spacing:-.01em;color:var(--dim);padding:1rem 0;border-bottom:1px solid var(--edge);transition:color .2s}
.nav-drawer a:hover{color:var(--fire)}

/* ═══════════════════════════════════════════════════════
   PAGE SYSTEM
═══════════════════════════════════════════════════════ */
.page{display:none;min-height:100vh;padding-top:68px}
.page.active{display:block}
.page-enter{animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════════════════ */
.marquee-wrap{overflow:hidden;padding:.75rem 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);background:var(--ink4)}
.marquee-wrap.fire-bg{background:var(--fire);border-color:transparent}
.marquee-track{display:flex;gap:2rem;animation:ticker 30s linear infinite;white-space:nowrap}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{font-family:var(--display);font-size:.9rem;letter-spacing:.08em;flex-shrink:0;display:flex;align-items:center;gap:1.2rem;color:var(--dim)}
.fire-bg .marquee-item{color:white}
.marquee-item::after{content:'◆';font-size:.45rem;opacity:.6}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
footer{background:#0F172A;padding:5rem 0 2rem;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;padding-bottom:4rem;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-logo{font-family:var(--display);font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem;color:#F8FAFC}
.footer-logo span{color:var(--fire)}
.footer-desc{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.7;max-width:280px;margin-bottom:1.5rem}
.footer-social{display:flex;gap:.6rem}
.fsoc{width:38px;height:38px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.85rem;cursor:none;transition:background .2s,border-color .2s;color:#F8FAFC}
.fsoc:hover{background:rgba(255,61,0,.15);border-color:rgba(255,61,0,.4)}
.footer-col h5{font-family:var(--display);font-size:.95rem;letter-spacing:.06em;font-weight:600;margin-bottom:1.4rem;color:#F8FAFC}
.footer-col ul li{margin-bottom:.7rem}
.footer-col ul li a{font-size:.82rem;color:rgba(255,255,255,.45);transition:color .2s}
.footer-col ul li a:hover{color:var(--fire)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.25)}
.footer-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.ftag{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .7rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.3)}

/* CTA BAND */
.cta-band{background:var(--fire);padding:5rem 0}
.cta-band-inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band-title{font-family:var(--display);font-size:clamp(2rem,4vw,3.5rem);line-height:1;letter-spacing:-.02em;font-weight:700}
.cta-band-sub{color:rgba(255,255,255,.75);font-size:.95rem;margin-top:.6rem}
.cta-band-actions{display:flex;gap:1rem;flex-shrink:0;flex-wrap:wrap}

/* ── Hero cards layout ── */
.g-hero-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding-left:3rem;
  z-index:1;
}
.g-hero-card-full{
  grid-column:span 2;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 1024 / 820 / 540px
   ════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .container{padding:0 2rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  /* Système */
  #dot,#ring{display:none !important}
  body{cursor:auto !important}
  a,button,input,select,textarea,[onclick]{cursor:pointer !important}
  /* Navbar */
  nav{padding:0 1.2rem;height:60px}
  .page{padding-top:60px}
  .nav-links,.nav-right{display:none}
  .ham{display:flex}
  .nav-drawer{top:60px;padding:1.5rem}
  .nav-drawer a{font-size:1.6rem;padding:.85rem 0}
  .nav-drawer .btn{margin-top:1.5rem;width:100%;justify-content:center}
  /* Layout */
  .container{padding:0 1.2rem}
  .section{padding:3.5rem 0}
  .section-sm{padding:2.5rem 0}
  /* Grilles */
  .g-hero{grid-template-columns:1fr !important;min-height:auto !important;padding-top:2rem !important;padding-bottom:1.5rem !important;gap:2rem !important}
  .g-hero-cards{padding-left:0;grid-template-columns:1fr;gap:.75rem}
  .g-hero-card-full{grid-column:span 1}
  .g-stats4{grid-template-columns:1fr 1fr !important}
  .g-stats4>div{border-right:none !important;border-bottom:1px solid var(--edge) !important;padding:1.5rem !important}
  .g-svc-preview{grid-template-columns:1fr !important;gap:0 !important}
  .g-svc-preview>div{border-right:none !important;border-bottom:1px solid var(--edge) !important}
  .g-split2{grid-template-columns:1fr !important;gap:2rem !important}
  .g-3col{grid-template-columns:1fr !important;gap:1rem !important}
  .g-process4{grid-template-columns:1fr 1fr !important;gap:1rem !important}
  .g-4col{grid-template-columns:1fr 1fr !important;gap:1rem !important}
  .g-svc-detail{grid-template-columns:1fr !important;gap:1.5rem !important}
  .g-partners5{grid-template-columns:repeat(3,1fr) !important}
  .g-prods{grid-template-columns:1fr 1fr !important;gap:1rem !important}
  .g-streaming{grid-template-columns:repeat(3,1fr) !important;gap:.75rem !important}
  .g-portfolio{columns:2 !important;column-gap:.75rem !important}
  .g-contact{grid-template-columns:1fr !important;gap:2rem !important}
  .g-form2{grid-template-columns:1fr !important}
  .g-svc-items{grid-template-columns:1fr !important;gap:.5rem !important}
  .g-svc-items3{grid-template-columns:1fr 1fr !important;gap:.5rem !important}
  .g-icons2{grid-template-columns:1fr !important;gap:.75rem !important}
  .grid-2{grid-template-columns:1fr !important}
  .grid-3{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr 1fr !important}
  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.75rem}
  footer{padding:3rem 0 1.5rem}
  /* CTA Band */
  .cta-band{padding:3rem 0}
  .cta-band-inner{flex-direction:column;align-items:stretch;gap:1.5rem}
  .cta-band-title{font-size:clamp(1.6rem,6vw,2.4rem) !important;line-height:1.1}
  .cta-band-actions{flex-direction:column;width:100%}
  .cta-band-actions .btn{width:100%;justify-content:center}
  /* Typo */
  .display-xl{font-size:clamp(2.6rem,10vw,4rem) !important;line-height:.92 !important}
  .display-lg{font-size:clamp(1.9rem,7vw,3rem) !important;line-height:.95 !important}
  .display-md{font-size:clamp(1.4rem,5vw,2rem) !important}
  .display-sm{font-size:clamp(1.1rem,4vw,1.5rem) !important}
  /* Marquee */
  .marquee-item{font-size:.8rem}
  /* Timeline */
  [style*="padding-left:3rem"]{padding-left:1.5rem !important}
}
@media(max-width:540px){
  /* Layout */
  .container{padding:0 .9rem !important}
  .section{padding:2.5rem 0 !important}
  /* Grilles */
  .g-hero-cards{grid-template-columns:1fr;gap:.65rem}
  .g-hero-card-full{grid-column:span 1}
  .g-process4{grid-template-columns:1fr !important}
  .g-prods{grid-template-columns:1fr !important}
  .g-streaming{grid-template-columns:1fr 1fr !important;gap:.6rem !important}
  .g-partners5{grid-template-columns:1fr 1fr !important}
  .g-portfolio{columns:1 !important}
  .g-4col{grid-template-columns:1fr 1fr !important}
  .grid-4{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr !important}
  /* Navbar */
  .nav-drawer{padding:1.2rem .9rem}
  .nav-drawer a{font-size:1.35rem;padding:.75rem 0}
  /* Typo */
  .display-xl{font-size:clamp(2.1rem,9.5vw,2.8rem) !important}
  .display-lg{font-size:clamp(1.6rem,7vw,2.2rem) !important}
  .display-md{font-size:clamp(1.2rem,5.5vw,1.7rem) !important}
  .text-body{font-size:.88rem !important;line-height:1.7}
  /* Boutons */
  .btn{padding:.8rem 1.5rem;font-size:.78rem}
  .btn-sm{padding:.6rem 1.1rem;font-size:.7rem}
  /* Footer */
  footer{padding:2.5rem 0 1.2rem}
  .footer-grid{gap:1.5rem !important}
  .footer-logo{font-size:1.8rem}
  .cta-band{padding:2.5rem 0}
  .cta-band-title{font-size:clamp(1.4rem,6vw,2rem) !important}
  .cta-band-inner{align-items:center;text-align:center}
  /* Process ligne déco */
  .g-process4 [style*="position:absolute;top:2.2rem"]{display:none !important}
}

/* Screen-reader only — visible pour Google, invisible à l'écran */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── WHATSAPP FLOTTANT ─────────────────────────────── */
#wa-btn{
  position:fixed;
  bottom:1.8rem;
  right:1.8rem;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:.75rem;
  background:#25D366;
  color:white;
  text-decoration:none;
  padding:.85rem 1.4rem .85rem 1.1rem;
  border-radius:100px;
  box-shadow:0 4px 24px rgba(37,211,102,.45),0 2px 8px rgba(0,0,0,.3);
  font-family:var(--body);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .25s, box-shadow .25s, padding .35s;
  overflow:hidden;
  white-space:nowrap;
}
#wa-btn:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 32px rgba(37,211,102,.55),0 4px 12px rgba(0,0,0,.3);
}
#wa-btn svg{
  width:26px;height:26px;flex-shrink:0;
}
#wa-label{
  max-width:160px;
  overflow:hidden;
  transition:max-width .35s ease, opacity .3s ease;
}
/* Pulse animation sur le dot vert */
#wa-pulse{
  position:absolute;
  top:10px;right:10px;
  width:10px;height:10px;
  background:#fff;
  border-radius:50%;
  animation:waPulse 2s ease-in-out infinite;
}
@keyframes waPulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.6);opacity:0}
}
/* Version compacte sur petit mobile */
@media(max-width:420px){
  #wa-btn{
    padding:.85rem;
    border-radius:50%;
    bottom:1.2rem;
    right:1.2rem;
  }
  #wa-label{max-width:0;opacity:0;padding:0}
}




/* ════════════════════════════════════════════════════════
   ANIMATIONS — Système Premium v3
   ════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes pulse       { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }
@keyframes slideWordUp { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatY      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes blobMove    { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,15px) scale(.97)} }
@keyframes blobMove2   { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-25px,20px) scale(1.04)} 66%{transform:translate(20px,-10px) scale(.98)} }
@keyframes gradShift   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes spinSlow    { from{transform:translateY(-50%) rotate(0deg)} to{transform:translateY(-50%) rotate(360deg)} }
@keyframes spinSlowRev { from{transform:translateY(-50%) rotate(0deg)} to{transform:translateY(-50%) rotate(-360deg)} }
@keyframes cardIn      { from{opacity:0;transform:translateY(30px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes waPulse     { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.6);opacity:0} }
@keyframes ticker      { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes pageIn      { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes barIn       { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes shimmer     { 0%{transform:translateX(-100%) skewX(-15deg)} 100%{transform:translateX(300%) skewX(-15deg)} }

/* ── Glassmorphism — cartes sur fond photo ── */
.g-glass {
  background: rgba(15, 10, 5, 0.55) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.g-glass:hover {
  background: rgba(25, 15, 5, 0.65) !important;
  border-color: rgba(255, 61, 0, 0.4) !important;
}

/* ── Gradient text animé ── */
.g-grad-text {
  background: linear-gradient(90deg, var(--fire), #ff8c42, #ffb347, var(--fire));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 5s ease-in-out infinite;
}

/* ── Chips services hero ── */
.g-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .9rem;
  border: 1px solid var(--edge2);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  background: white;
  border-radius: 100px;
  cursor: default;
  transition: all .28s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 1px 4px rgba(15,23,42,.06);
}
.g-chip:hover {
  border-color: var(--fire);
  color: var(--fire);
  background: rgba(255,61,0,.04);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(255,61,0,.15);
}

/* ── Hero cards animées ── */
.g-card {
  background: white;
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-md);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: cardIn .65s cubic-bezier(.22,1,.36,1) both;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.g-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bar, linear-gradient(90deg,var(--fire),var(--fire2)));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.g-card:hover { transform: translateY(-7px); box-shadow: 0 24px 60px rgba(15,23,42,.13), 0 6px 16px rgba(255,61,0,.08); }
.g-card:hover::before { transform: scaleX(1); }
/* Floating individuel */
.g-card:nth-child(1) { animation: cardIn .65s .2s  cubic-bezier(.22,1,.36,1) both; }
.g-card:nth-child(2) { animation: cardIn .65s .35s cubic-bezier(.22,1,.36,1) both, floatY 7s 1.5s ease-in-out infinite; }
.g-card:nth-child(3) { animation: cardIn .65s .5s  cubic-bezier(.22,1,.36,1) both, floatY 8s 2.5s ease-in-out infinite; }
.g-card:nth-child(4) { animation: cardIn .65s .65s cubic-bezier(.22,1,.36,1) both, floatY 6s .8s  ease-in-out infinite; }
.g-card:nth-child(5) { animation: cardIn .65s .8s  cubic-bezier(.22,1,.36,1) both, floatY 9s 3s   ease-in-out infinite; }

/* ── Stats scroll reveal ── */
.g-stat {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.g-stat.in { opacity: 1; transform: translateY(0); }
.g-stat:nth-child(2) { transition-delay: .1s; }
.g-stat:nth-child(3) { transition-delay: .2s; }
.g-stat:nth-child(4) { transition-delay: .3s; }

/* ── Scroll reveal général ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-l {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-r {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in, .reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }

/* ── Bouton effet shimmer ── */
.g-btn-shine { position: relative; overflow: hidden; }
.g-btn-shine::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-15deg) translateX(-200%);
  transition: transform .55s;
}
.g-btn-shine:hover::after { transform: skewX(-15deg) translateX(400%); }
.g-arrow { display: inline-block; transition: transform .25s; }
.g-btn-shine:hover .g-arrow { transform: translateX(5px); }

/* ── Service cards (section services preview) ── */
.g-svc-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--edge);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  cursor: default;
}
.g-svc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--bar, linear-gradient(90deg,var(--fire),var(--fire2)));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.g-svc-card:hover { transform: translateY(-7px); box-shadow: 0 20px 50px rgba(15,23,42,.1), 0 4px 14px rgba(255,61,0,.08); }
.g-svc-card:hover::after { transform: scaleX(1); }

/* ── Testimonial hover ── */
.card-base {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s;
}
.card-base:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(15,23,42,.1); border-color: rgba(255,61,0,.2); }




/* ═══════════════════════════════════════════════════════════════
   CLASSES LAYOUT — Gestion 100% CSS (sans inline style)
   ════════════════════════════════════════════════════════════════ */

/* ── Témoignages : en-tête ── */
.g-reviews-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3.5rem;
}
.g-reviews-score {
  background: var(--ink4);
  border: 1px solid var(--edge);
  padding: 1.5rem 2rem;
  text-align: center;
  min-width: 180px;
  box-shadow: var(--shadow-sm);
}

/* ── Témoignages : grilles ── */
.g-reviews3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.g-reviews3-compact {
  margin-bottom: 2.5rem;
}

/* ── Villes Sénégal 4 colonnes ── */
.g-cities4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ════════════════════════════════
   RESPONSIVE ≤820px
   ════════════════════════════════ */
@media(max-width:820px) {

  /* Témoignages header : côte à côte → empilé */
  .g-reviews-header {
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
  }
  .g-reviews-score {
    min-width: auto;
    width: 100%;
  }

  /* Témoignages grilles : 3 col → 1 col */
  .g-reviews3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Villes : 4 col → 2 col */
  .g-cities4 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* ════════════════════════════════
   RESPONSIVE ≤540px
   ════════════════════════════════ */
@media(max-width:540px) {

  /* Témoignages grilles */
  .g-reviews3 {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  /* Villes : 2 col → 1 col */
  .g-cities4 {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
}

/* ════════════════════════════════════════════════════════
   OVERRIDES LIGHT THEME — Correction textes inline HTML
   (les inline styles codés avec couleurs sombres/blanches)
   ════════════════════════════════════════════════════════ */

/* Textes blancs dans les cartes témoignages → texte sombre */
.card-base p[style*="rgba(255,255,255"],
.card-base p[style*="rgba(255,255,255"] {
  color: var(--dim) !important;
}

/* Section hero — fond sombre inline → fond clair */
[style*="background:var(--ink2)"] { background: var(--ink2) !important; }
[style*="background:var(--ink3)"] { background: var(--ink4) !important; }
[style*="background:var(--ink)"]  { background: var(--ink)  !important; }

/* Texte blanc codé en dur dans les reviews */
.g-reviews3 p { color: var(--dim) !important; }
.g-reviews3 [style*="rgba(255,255,255"] { color: var(--dim) !important; }

/* Stats hero avec fond sombre */
[style*="background:var(--ink2);border"] {
  background: var(--ink4) !important;
  border-color: var(--edge) !important;
}
[style*="background:var(--ink3);border"] {
  background: var(--ink4) !important;
  border-color: var(--edge) !important;
}

/* Section témoignages fond */
section[style*="background:var(--ink2)"] {
  background: var(--ink2) !important;
}

/* Villes / cartes avec fond ink2 */
[style*="background:var(--ink2);padding:1.5rem"] {
  background: white !important;
  box-shadow: var(--shadow-sm);
}

/* Textes rgba blanc dans les sections → couleur sombre */
[style*="color:rgba(255,255,255,.7)"]  { color: var(--smoke) !important; }
[style*="color:rgba(255,255,255,.6)"]  { color: var(--dim)   !important; }
[style*="color:rgba(255,255,255,.5)"]  { color: var(--dim)   !important; }
[style*="color:rgba(255,255,255,.45)"] { color: var(--dim)   !important; }
[style*="color:rgba(255,255,255,.4)"]  { color: var(--dim)   !important; }
[style*="color:rgba(255,255,255,.3)"]  { color: var(--dim)   !important; }

/* Bordures blanches → bordures sombres */
[style*="border:1px solid var(--edge)"]  { border-color: var(--edge)  !important; }
[style*="border-bottom:1px solid var(--edge)"] { border-color: var(--edge) !important; }

/* Div fond encre dans les sections About/Process */
[style*="background:var(--ink)"] { background: var(--ink) !important; }

/* Bandeau trust : fond ink3 → blanc avec ombre */
[style*="background:var(--ink3);padding:1.5rem;text-align:center"] {
  background: white !important;
  box-shadow: none;
}

/* CTA Band reste orange — aucun changement voulu */
.cta-band { background: var(--fire) !important; }
.cta-band * { color: white !important; }
.cta-band .btn-white { color: var(--fire) !important; background: white !important; }