/* ══════════════════════════════════════════════════════
   Gtech Digital — style.css
   Version: 3.0 | gtechsn.store
   Thème : Modern Clarity — Agence Premium Light
══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   PALETTE "MODERN CLARITY"
   ────────────────────────────────────────────────────
   Inspirée des standards : Webflow · Superside · Figma
   Optimisée lecture, conversion & SEO visuel
═══════════════════════════════════════════════════════ */
:root {
  /* ─── Fonds ─────────────────────────────────────── */
  --bg:      #f8f9fc;        /* fond principal — gris perle */
  --bg2:     #ffffff;        /* blanc pur — cards, sections */
  --bg3:     #eef1f8;        /* fond sections alternées */
  --bg4:     #e2e8f0;        /* séparateurs / fond hover */

  /* ─── Sections sombres (hero, footer, CTA) ──────── */
  --navy:    #0f172a;        /* bleu nuit — plus noble que noir pur */
  --navy2:   #1e293b;        /* variante navy claire */
  --navy3:   #334155;        /* variante encore plus claire */

  /* ─── Typographie ───────────────────────────────── */
  --text:    #0f172a;        /* texte principal — quasi noir */
  --text2:   #475569;        /* texte secondaire */
  --text3:   #94a3b8;        /* placeholder / texte tertiaire */
  --text-on-dark: #f1f5f9;  /* texte sur fond sombre */
  --dim-on-dark:  #94a3b8;  /* secondaire sur fond sombre */

  /* ─── Couleurs de marque ────────────────────────── */
  --fire:    #ff3d00;        /* rouge principal Gtech */
  --fire2:   #ff6b35;        /* rouge secondaire / hover */
  --fire-bg: rgba(255,61,0,0.06);   /* fond tag rouge */
  --fire-border: rgba(255,61,0,0.22); /* bordure tag rouge */

  --ice:     #0ea5e9;        /* bleu ciel — accent froid */
  --ice2:    #38bdf8;        /* variante ice */
  --ice-bg:  rgba(14,165,233,0.07);
  --ice-border: rgba(14,165,233,0.25);

  --gold:    #f59e0b;        /* doré */
  --gold-bg: rgba(245,158,11,0.08);

  --violet:  #7c3aed;        /* violet */
  --violet-bg: rgba(124,58,237,0.07);

  /* ─── Bordures & Ombres ─────────────────────────── */
  --border:  rgba(15,23,42,0.08);   /* bordure principale */
  --border2: rgba(15,23,42,0.14);   /* bordure accentuée */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.05);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.06);
  --shadow-fire: 0 8px 30px rgba(255,61,0,0.25);

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

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

  /* ══════════════════════════════════════════════════
     RÉTROCOMPATIBILITÉ — Ancien système de variables
     Les 469 références inline dans index.html utilisent
     encore ces noms. On les remaque vers le thème clair.
  ══════════════════════════════════════════════════ */

  /* Anciens fonds noirs → fonds clairs */
  --ink:     #ffffff;        /* était #060606 → blanc pur */
  --ink2:    #f8f9fc;        /* était #0f0f0f → gris perle */
  --ink3:    #eef1f8;        /* était #161616 → bleu très clair */
  --ink4:    #e2e8f0;        /* était #1e1e1e → gris clair */

  /* Ancien texte clair → texte sombre */
  --smoke:   #0f172a;        /* était #f2eeea → quasi noir */

  /* Ancien texte dim → texte secondaire */
  --dim:     #475569;        /* était #555 → ardoise */

  /* Anciennes bordures blanches → bordures sombres subtiles */
  --edge:    rgba(15,23,42,0.08);   /* était rgba(255,255,255,0.07) */
  --edge2:   rgba(15,23,42,0.14);   /* était rgba(255,255,255,0.12) */
}

/* ═══════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--bg);color:var(--text);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,.65)}

/* ═══════════════════════════════════════════════════════
   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(--text2)}
.text-body{font-size:.95rem;line-height:1.8;color:var(--text2)}
.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(--border)}

/* ─── Tags ──────────────────────────────────────────── */
.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:var(--fire-border);background:var(--fire-bg)}
.tag-ice{color:var(--ice);border-color:var(--ice-border);background:var(--ice-bg)}
.tag-gold{color:var(--gold);border-color:rgba(245,158,11,.25);background:var(--gold-bg)}
.tag-smoke{color:var(--text2);border-color:var(--border2);background:var(--bg3)}
.tag-violet{color:var(--violet);border-color:rgba(124,58,237,.25);background:var(--violet-bg)}

/* ─── Boutons ───────────────────────────────────────── */
.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:var(--shadow-fire)}
.btn-ice{background:var(--ice);color:white}
.btn-ice:hover{background:var(--ice2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,165,233,.3)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border2)}
.btn-ghost:hover{border-color:var(--fire);color:var(--fire);background:var(--fire-bg)}
.btn-white{background:white;color:var(--navy);font-weight:700;box-shadow:var(--shadow-sm)}
.btn-white:hover{background:var(--text-on-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-dark{background:var(--navy);color:white}
.btn-dark:hover{background:var(--navy2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(15,23,42,.25)}
.btn-sm{padding:.6rem 1.4rem;font-size:.74rem}

/* ─── Cards ─────────────────────────────────────────── */
.card-base{background:var(--bg2);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:border-color .3s,transform .25s,box-shadow .3s}
.card-base:hover{border-color:rgba(255,61,0,.25);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 animations ─────────────────────────────── */
.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 — verre dépoli blanc
═══════════════════════════════════════════════════════ */
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(248,249,252,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--border);transition:background .3s;box-shadow:var(--shadow-sm)}
.nav-logo{font-family:var(--display);font-size:1.65rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.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(--text2);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(--text)}
.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(--text2);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(--text);transition:all .3s}

/* MOBILE NAV DRAWER */
.nav-drawer{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:rgba(255,255,255,.98);backdrop-filter:blur(24px);-webkit-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(--text2);padding:1rem 0;border-bottom:1px solid var(--border);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(--border);border-bottom:1px solid var(--border)}
.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(--text2)}
.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 — fond navy pour contraste
═══════════════════════════════════════════════════════ */
footer{background:var(--navy);padding:5rem 0 2rem;border-top:1px solid rgba(255,255,255,0.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,0.07)}
.footer-logo{font-family:var(--display);font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.6rem;color:var(--text-on-dark)}
.footer-logo span{color:var(--fire)}
.footer-desc{font-size:.85rem;color:var(--dim-on-dark);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:var(--dim-on-dark)}
.fsoc:hover{background:rgba(255,61,0,.15);border-color:rgba(255,61,0,.4);color:white}
.footer-col h5{font-family:var(--display);font-size:.95rem;letter-spacing:.06em;font-weight:600;margin-bottom:1.4rem;color:var(--text-on-dark)}
.footer-col ul li{margin-bottom:.7rem}
.footer-col ul li a{font-size:.82rem;color:var(--dim-on-dark);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,.25)}

/* ─── 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}

/* ═══════════════════════════════════════════════════════
   SECTION FONDS ALTERNÉS
   — Certaines sections utilisent le fond navy ou bg3
═══════════════════════════════════════════════════════ */

/* Section sur fond blanc explicite */
.section-white{background:var(--bg2)}

/* Section sur fond gris perle */
.section-light{background:var(--bg3)}

/* Section sur fond navy (hero, stats sombres, etc.) */
.section-dark{background:var(--navy);color:var(--text-on-dark)}
.section-dark .eyebrow{color:var(--fire)}
.section-dark .text-body,.section-dark .text-dim{color:var(--dim-on-dark)}
.section-dark .display-xl,
.section-dark .display-lg,
.section-dark .display-md,
.section-dark .display-sm{color:var(--text-on-dark)}
.section-dark .divider{background:rgba(255,255,255,.08)}
.section-dark .card-base{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.section-dark .card-base:hover{border-color:rgba(255,61,0,.3);background:rgba(255,255,255,.07)}
.section-dark .tag-smoke{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}

/* ═══════════════════════════════════════════════════════
   SURCHARGES INLINE STYLES DARK SECTIONS
   — Compatibilité avec les couleurs codées en dur dans HTML
═══════════════════════════════════════════════════════ */

/* Texte blanc dans les sections navy */
[style*="background:#060606"],
[style*="background:#0a0a0a"],
[style*="background:#0f0f0f"],
[style*="background:#111"],
[style*="background:#1a1a1a"],
[style*="background:#0f172a"]{
  color:var(--text-on-dark) !important;
}

/* Bordures inline sur fond clair */
[style*="border-color:rgba(255,255,255"]{
  border-color:var(--border) !important;
}

/* ═══════════════════════════════════════════════════════
   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 !important;grid-template-columns:1fr 1fr !important;gap:.75rem !important}
  .g-stats4{grid-template-columns:1fr 1fr !important}
  .g-stats4>div{border-right:none !important;border-bottom:1px solid var(--border) !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(--border) !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){
  .container{padding:0 .9rem !important}
  .section{padding:2.5rem 0 !important}
  .g-hero-cards{grid-template-columns:1fr !important;gap:.65rem !important}
  .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}
  .nav-drawer{padding:1.2rem .9rem}
  .nav-drawer a{font-size:1.35rem;padding:.75rem 0}
  .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}
  .btn{padding:.8rem 1.5rem;font-size:.78rem}
  .btn-sm{padding:.6rem 1.1rem;font-size:.7rem}
  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}
  .g-process4 [style*="position:absolute;top:2.2rem"]{display:none !important}
}

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITÉ
═══════════════════════════════════════════════════════ */
.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,.15);
  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,.2);
}
#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}
#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}}
@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 GLOBALES
═══════════════════════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════
   SURCHARGES COMPOSANTS INLINE — THÈME CLAIR
   Adapte les couleurs codées en dur dans index.html
═══════════════════════════════════════════════════════ */

/* Stat cards et blocs avec fond sombre inline */
[style*="background:var(--ink2)"],
[style*="background:var(--ink3)"],
[style*="background:var(--ink4)"]{
  background:var(--bg2) !important;
  border-color:var(--border) !important;
}

/* Texte "dim" inline sur fond clair */
[style*="color:var(--dim)"],
[style*="color:#888"],
[style*="color:#777"],
[style*="color:#666"],
[style*="color:#aaa"],
[style*="color:#999"],
[style*="color:#555"]{
  color:var(--text2) !important;
}

/* Texte smoke (blanc) → doit devenir sombre sur fond clair */
[style*="color:var(--smoke)"],
[style*="color:#f2eeea"],
[style*="color:white"]:not(.btn-fire):not(.btn-white):not(.btn-dark):not(.btn-ice):not(#wa-btn):not(.cta-band *):not(footer *):not(.nav-drawer a){
  color:var(--text) !important;
}

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

/* Fonds très sombres inline → fond clair */
[style*="background:#060606"],
[style*="background:#0a0a0a"],
[style*="background:#111111"],
[style*="background:#111;"]{
  background:var(--bg2) !important;
  color:var(--text) !important;
}

/* Sections avec fond sombre fort → navy pour garder le contraste */
[style*="background:#0f0f0f"],
[style*="background:#161616"],
[style*="background:#1a1a1a"],
[style*="background:#1e1e1e"]{
  background:var(--navy) !important;
  color:var(--text-on-dark) !important;
}

/* Inputs et formulaires */
input,textarea,select{
  background:var(--bg2) !important;
  border-color:var(--border2) !important;
  color:var(--text) !important;
}
input::placeholder,textarea::placeholder{
  color:var(--text3) !important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--fire) !important;
  outline:none;
  box-shadow:0 0 0 3px var(--fire-bg) !important;
}

/* Stats borders séparatrices inline */
[style*="border-right:1px solid rgba(255,255,255"]{
  border-right-color:var(--border) !important;
}