/* ===================================================================
   VAHEBAG MOBILE — feuille de style commune
   Identité : corporate télécom premier degré + astérisques en cascade.
   Signature visuelle : le "talon détachable" (coupon de bas de facture)
   qui dépasse de chaque promesse trop belle pour être vraie.
   =================================================================== */

:root{
  --red:#E2001A;
  --red-deep:#A6000F;
  --black:#111111;
  --ink:#1A1A1A;
  --white:#FFFFFF;
  --offwhite:#F3F1EE;
  --paper:#FBF9F5;
  --warn:#FFD400;
  --ok:#1F8A4C;
  --grey:#6B6B6B;
  --grey-light:#9C9C9C;
  --line:#2A2A2A;
  --hair:#E4E1DA;

  --display:'Archivo Black', Arial, sans-serif;
  --body:'Inter', Arial, Helvetica, sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', Courier, monospace;

  --container:1180px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  font-size:16px;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-0.01em;
  margin:0;
}
p{margin:0 0 1em;}
.mono{font-family:var(--mono);}
a{color:var(--red);}
img{max-width:100%; display:block;}
:focus-visible{outline:3px solid var(--warn); outline-offset:2px;}
::selection{background:var(--warn); color:var(--black);}

.skip-link{position:absolute; left:-9999px; top:auto;}
.skip-link:focus{left:16px; top:16px; background:var(--warn); color:var(--black); padding:10px 16px; z-index:200; border-radius:2px; font-size:13px; font-weight:700; text-decoration:none;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}

/* ===================== NAV ===================== */
header.nav{
  background:rgba(17,17,17,0.93); color:var(--white);
  position:sticky; top:0; z-index:80;
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:box-shadow .25s ease, background-color .25s ease;
  animation:navIn .5s ease-out;
}
header.nav.is-scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.25); background-color:rgba(17,17,17,0.98); }
.nav-inner{max-width:var(--container); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:21px; color:var(--white); text-decoration:none; transition:transform .2s ease;}
.brand:hover{transform:scale(1.03);}
.brand.is-shaking{animation:brandShake .4s ease;}
.brand .dot{color:var(--red);}
nav.links{display:flex; align-items:center; gap:26px; font-size:14px;}
nav.links a{color:rgba(255,255,255,0.78); text-decoration:none; white-space:nowrap;}
nav.links a:hover{color:var(--white);}
nav.links a.current{color:var(--white); box-shadow:inset 0 -2px 0 var(--red); padding-bottom:4px;}
.nav-cta{display:flex; align-items:center; gap:10px;}

.menu-toggle{display:none; background:none; border:1px solid rgba(255,255,255,0.3); color:var(--white); width:40px; height:40px; border-radius:2px; cursor:pointer; align-items:center; justify-content:center;}
.menu-toggle svg{width:20px; height:20px;}

.btn{display:inline-block; padding:11px 22px; border-radius:2px; font-size:14px; text-decoration:none; cursor:pointer; font-weight:700; font-family:var(--body); border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(0.97);}
.btn-primary{background:var(--red); color:var(--white);}
.btn-primary:hover{background:var(--red-deep); box-shadow:0 10px 22px rgba(226,0,26,0.25);}
.btn-outline{border:1px solid rgba(255,255,255,0.4); color:var(--white); background:transparent;}
.btn-outline:hover{border-color:var(--white);}
.btn-dark{border:1.5px solid var(--black); color:var(--black); background:transparent;}
.btn-dark:hover{background:var(--black); color:var(--white);}
.btn-block{display:block; width:100%; text-align:center;}
.btn[disabled]{opacity:0.55; cursor:not-allowed;}

/* breadcrumb-ish eyebrow used at top of inner-page heroes */
.crumb{font-family:var(--mono); font-size:12px; color:rgba(255,255,255,0.5); margin-bottom:18px;}
.crumb a{color:rgba(255,255,255,0.65); text-decoration:none;}
.crumb a:hover{color:var(--white);}

/* ===================== HOME HERO ===================== */
.hero{background:var(--black); color:var(--white); padding:64px 24px 0; position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 35%, rgba(226,0,26,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 65%, rgba(255,212,0,0.07) 0%, transparent 55%);
}
.hero-inner{max-width:var(--container); margin:0 auto; text-align:center; position:relative; z-index:1;}
.hero .tag{font-size:13px; text-transform:uppercase; letter-spacing:0.14em; color:var(--warn); margin-bottom:18px; font-family:var(--mono);}
.price-hero{font-family:var(--display); font-size:96px; color:var(--white); line-height:1;}
.price-hero span{color:var(--red);}
.price-hero sup{font-size:32px; vertical-align:super; color:var(--red);}
.price-sub{font-size:18px; color:rgba(255,255,255,0.7); margin:14px 0 30px;}
.hero-ctas{padding:74px 0 50px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ===================== INNER PAGE HERO ===================== */
.page-hero{background:var(--black); color:var(--white); padding:54px 24px 64px;}
.page-hero-inner{max-width:var(--container); margin:0 auto;}
.page-hero h1{font-size:40px; max-width:760px;}
.page-hero .lede{font-size:17px; color:rgba(255,255,255,0.72); max-width:600px; margin-top:14px;}
.page-hero .tag{font-size:12px; text-transform:uppercase; letter-spacing:0.14em; color:var(--warn); margin-bottom:14px; font-family:var(--mono);}

/* ===================== TEAR-OFF STUB (signature element) =====================
   Carte façon "talon de facture" : fond jaune, police mono, bordure
   pointillée + icône ciseaux. Utilisée pour toutes les vraies infos. */
.stub{
  background:var(--warn);
  color:var(--black);
  max-width:780px;
  margin:0 auto;
  padding:6px 22px 20px;
  font-family:var(--mono);
  font-size:13px;
  line-height:1.7;
  text-align:left;
  border-radius:2px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,0.55);
}
.stub-snip{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(0,0,0,0.55); border-bottom:1px dashed rgba(0,0,0,0.35); padding:8px 0 10px; margin-bottom:10px;}
.stub b{color:var(--red-deep);}
.stub--float{transform:translateY(40px);}

/* a lighter "stub" used inline within content sections, not floating */
.legal-block{
  background:var(--offwhite);
  border:1px dashed var(--grey-light);
  padding:24px 28px;
  font-family:var(--mono);
  font-size:12.5px;
  color:#3c3c3c;
  line-height:1.85;
  border-radius:2px;
}
.legal-block b{color:var(--red-deep);}
.legal-block .stub-snip{border-bottom-color:rgba(0,0,0,0.15); color:var(--grey);}
.legal-block--paper{background:var(--white); border:2px solid var(--black);}

/* ===================== TICKER ===================== */
.ticker{background:var(--red); color:var(--white); font-size:14px; overflow:hidden; position:relative; padding:0;}
.ticker::before,.ticker::after{content:''; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;}
.ticker::before{left:0; background:linear-gradient(90deg, var(--red), rgba(226,0,26,0));}
.ticker::after{right:0; background:linear-gradient(-90deg, var(--red), rgba(226,0,26,0));}
.ticker-track{display:flex; width:max-content; padding:14px 0; animation:tickerScroll 32s linear infinite; will-change:transform;}
.ticker-track:hover{animation-play-state:paused;}
.ticker-item{display:flex; align-items:center; gap:8px; padding:0 36px; white-space:nowrap;}
.ticker-item b{font-family:var(--mono);}
.ticker-link{color:rgba(255,255,255,0.85); text-decoration:underline; margin-left:8px;}
.ticker-dot{width:6px; height:6px; border-radius:50%; background:var(--warn); flex-shrink:0;}
@keyframes tickerScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===================== SECTIONS ===================== */
.section{max-width:var(--container); margin:0 auto; padding:84px 24px;}
.section.tight{padding-top:0;}
.section-head{max-width:640px; margin:0 auto 50px; text-align:center;}
.section-head.left{margin:0 0 40px; text-align:left;}
.section-head .tag{font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--red); margin-bottom:14px; font-family:var(--mono);}
.section-head h2{font-size:30px; margin-bottom:12px;}
.section-head p{color:var(--grey); font-size:15px;}
.bg-offwhite{background:var(--offwhite);}
.bg-black{background:var(--black); color:var(--white);}
.bg-black .section-head p{color:rgba(255,255,255,0.65);}

/* ===================== PLANS ===================== */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.plan{border:2px solid var(--black); border-radius:3px; padding:30px 26px; display:flex; flex-direction:column; position:relative; background:var(--white); transition:transform .25s ease, box-shadow .25s ease;}
.plan:hover{transform:translateY(-6px); box-shadow:0 18px 38px rgba(0,0,0,0.14);}
.plan.mid:hover{transform:translateY(-6px) scale(1.02);}
.plan.mid{border-color:var(--red); transform:scale(1.02);}
.plan-badge{position:absolute; top:-13px; left:24px; background:var(--red); color:var(--white); font-size:11px; padding:4px 10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:bold; font-family:var(--body);}
.plan h3{font-size:18px; margin-bottom:6px; font-family:var(--body); font-weight:800;}
.plan-price{font-family:var(--display); font-size:38px; margin:14px 0 4px;}
.plan-price sup{font-size:16px; color:var(--red);}
.plan-price-note{font-size:11px; color:var(--grey); margin-bottom:18px; font-family:var(--mono);}
.plan ul{list-style:none; padding:0; margin:0 0 24px; font-size:13.5px; color:#3a3a3a; flex-grow:1;}
.plan li{padding:9px 0; border-top:1px solid #e6e6e6; display:flex; gap:8px;}
.plan li:first-child{border-top:none;}
.plan li .star{color:var(--red); font-weight:bold;}

/* ===================== TESTIMONIALS ===================== */
.testimonial{background:var(--black); color:var(--white); padding:84px 24px;}
.testimonial-inner{max-width:760px; margin:0 auto; text-align:center;}
.testimonial blockquote{font-size:22px; margin:0 0 22px; line-height:1.45;}
.testimonial cite{font-style:normal; font-size:13px; color:rgba(255,255,255,0.55);}
.stars{color:var(--warn); font-size:18px; margin-bottom:18px; letter-spacing:2px;}

.review-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.review-card{border:1px solid var(--hair); border-radius:4px; padding:26px; background:var(--white); display:flex; flex-direction:column; gap:12px;}
.review-top{display:flex; align-items:center; gap:12px;}
.avatar{width:42px; height:42px; border-radius:50%; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:14px; flex-shrink:0;}
.review-name{font-weight:800; font-size:14px;}
.review-meta{font-size:12px; color:var(--grey);}
.review-stars{color:var(--warn); letter-spacing:1px; font-size:14px;}
.review-card p{font-size:14px; color:#333; margin:0;}
.review-card .reply{background:var(--offwhite); border-left:3px solid var(--red); padding:10px 14px; font-size:12.5px; color:#444; font-family:var(--mono);}

/* ===================== STATS ===================== */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.stat{border:1px solid var(--hair); border-radius:4px; padding:24px 20px; text-align:center; position:relative; overflow:hidden;}
.stat::after{content:''; position:absolute; bottom:0; left:0; height:3px; width:0; background:var(--red); transition:width .6s ease;}
.stat.is-visible::after{width:100%;}
.stat .num{font-family:var(--display); font-size:34px; color:var(--red);}
.stat .lbl{font-size:12.5px; color:var(--grey); margin-top:6px;}

/* ===================== BARRES (couverture par techno) ===================== */
.bar-row{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
.bar-label{width:36px; font-weight:800; font-family:var(--display); font-size:14px; flex-shrink:0;}
.bar-track{flex-grow:1; height:10px; background:var(--hair); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; background:var(--red); border-radius:6px;}
.bar-pct{width:240px; text-align:right; font-family:var(--mono); font-size:12.5px; color:var(--grey); flex-shrink:0;}
@media (max-width:600px){
  .bar-row{flex-wrap:wrap;}
  .bar-pct{width:auto; text-align:left; margin-left:52px;}
}

/* ===================== TABLE (couverture régionale) ===================== */
.cov-table{width:100%; border-collapse:collapse; font-size:14px;}
.cov-table th{text-align:left; font-family:var(--body); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--grey); padding:10px 14px; border-bottom:2px solid var(--black);}
.cov-table td{padding:13px 14px; border-bottom:1px solid var(--hair);}
.cov-table tr:hover td{background:var(--offwhite);}
.tag-ok{color:var(--ok); font-weight:700; font-size:12.5px;}
.tag-warn{color:var(--red-deep); font-weight:700; font-size:12.5px;}
.cov-note{font-size:11px; color:var(--grey); font-family:var(--mono);}

/* ===================== FAQ (details/summary natif) ===================== */
.faq-item{border-top:1px solid var(--hair);}
.faq-item:first-child{border-top:none;}
.faq-item summary{cursor:pointer; list-style:none; padding:20px 0; font-weight:700; font-size:15.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; transition:color .15s ease, transform .15s ease;}
.faq-item summary:hover{color:var(--red);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{font-family:var(--mono); color:var(--red); font-size:18px; flex-shrink:0; transition:transform .15s ease;}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-a{font-size:14px; color:var(--grey); padding:0 0 22px; max-width:680px;}
.faq-a.is-opening{animation:slideUp .3s ease-out;}
.faq-group-title{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--red); margin:48px 0 6px;}
.faq-group-title:first-child{margin-top:0;}

/* ===================== TIMELINE (historique société, ordre réel) ===================== */
.timeline{position:relative; padding-left:28px; border-left:2px solid var(--hair);}
.tl-item{position:relative; padding-bottom:38px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:''; position:absolute; left:-34px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--red); border:2px solid var(--white); box-shadow:0 0 0 2px var(--red);}
.tl-year{font-family:var(--mono); color:var(--red); font-size:13px; margin-bottom:6px;}
.tl-title{font-weight:800; font-size:16px; margin-bottom:6px;}
.tl-body{font-size:14px; color:var(--grey); max-width:600px;}

/* ===================== TEAM / ORG ===================== */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.team-card{text-align:center;}
.team-avatar{width:84px; height:84px; border-radius:50%; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:24px; margin:0 auto 14px;}
.team-name{font-weight:800; font-size:14.5px;}
.team-role{font-size:12.5px; color:var(--grey); margin-top:3px;}

/* ===================== VALEURS (cards) ===================== */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.value-card{border:1px solid var(--hair); border-radius:4px; padding:28px; transition:transform .25s ease, box-shadow .25s ease;}
.value-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(226,0,26,0.12);}
.value-card .glyph{font-family:var(--mono); color:var(--red); font-size:13px; margin-bottom:14px;}
.value-card h3{font-size:17px; margin-bottom:10px; font-family:var(--body); font-weight:800;}
.value-card p{font-size:14px; color:var(--grey); margin:0;}

/* ===================== NEWS / PRESSE ===================== */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.news-card{border:1px solid var(--hair); border-radius:4px; overflow:hidden; display:flex; flex-direction:column;}
.news-cat{background:var(--black); color:var(--white); padding:18px 20px 14px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--warn);}
.news-body{padding:18px 20px 22px; flex-grow:1; display:flex; flex-direction:column;}
.news-date{font-size:11.5px; color:var(--grey); font-family:var(--mono); margin-bottom:8px;}
.news-title{font-size:16px; font-weight:800; margin-bottom:10px; line-height:1.35;}
.news-excerpt{font-size:13.5px; color:var(--grey); flex-grow:1;}
.news-more{font-size:13px; font-weight:700; text-decoration:none; margin-top:14px;}

/* ===================== JOBS (carrières) ===================== */
.job-card{border:1px solid var(--hair); border-radius:4px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.job-card + .job-card{margin-top:14px;}
.job-title{font-weight:800; font-size:15.5px; margin-bottom:6px;}
.job-meta{font-size:12.5px; color:var(--grey); font-family:var(--mono);}
.job-meta span{margin-right:14px;}

/* ===================== CONTACT ===================== */
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:7px;}
.field .hint{font-size:11.5px; color:var(--grey); margin-top:5px; font-family:var(--mono);}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--hair); border-radius:2px;
  font-family:var(--body); font-size:14px; background:var(--white); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--black); outline:none;}
.field textarea{resize:vertical; min-height:120px;}
.contact-side .legal-block{margin-bottom:22px;}
.contact-info dt{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--grey); margin-top:18px;}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{margin:4px 0 0; font-size:14.5px;}

/* ===================== FOOTER ===================== */
footer{background:var(--black); color:rgba(255,255,255,0.55); padding:54px 24px 30px; font-size:13px;}
.footer-inner{max-width:var(--container); margin:0 auto;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:22px;}
.footer-brand-col{max-width:260px;}
.footer-brand-col p{font-size:12.5px; color:rgba(255,255,255,0.45); margin-top:12px;}
.footer-cols{display:flex; gap:44px; flex-wrap:wrap;}
.footer-cols div h4{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.35); margin-bottom:10px;}
.footer-cols div a{display:block; color:rgba(255,255,255,0.6); text-decoration:none; margin-bottom:7px; font-size:13px; position:relative; width:fit-content; transition:color .15s ease;}
.footer-cols div a::after{content:''; position:absolute; bottom:-1px; left:0; width:0; height:1px; background:var(--red); transition:width .25s ease;}
.footer-cols div a:hover{color:var(--white);}
.footer-cols div a:hover::after{width:100%;}
.legal{font-family:var(--mono); font-size:10.5px; color:rgba(255,255,255,0.35); line-height:1.9; max-width:920px;}
.footer-meta{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-top:18px;}
.badge-row{display:flex; gap:10px; flex-wrap:wrap;}
.badge{border:1px solid rgba(255,255,255,0.2); border-radius:2px; padding:5px 10px; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.5);}

/* ===================== BARRE DE PROGRESSION (synchronisée au scroll, sans transition = sans décalage) ===================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--red); z-index:9999;
  box-shadow:0 0 8px rgba(226,0,26,0.5);
}

/* ===================== RÉVÉLATION AU SCROLL (une seule fois, niveau section uniquement) ===================== */
.section.reveal, .testimonial.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.section.reveal.is-visible, .testimonial.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ===================== MICRO-INTERACTIONS (légères, sans conflit) ===================== */
nav.links a{transition:transform .15s ease, color .15s ease;}
nav.links a:hover{transform:translateX(4px);}
.menu-toggle{transition:transform .15s ease;}
.menu-toggle:hover{transform:scale(1.08);}
.job-card{transition:transform .2s ease, background-color .2s ease;}
.job-card:hover{transform:translateX(6px); background:var(--offwhite);}
.news-card{transition:transform .25s ease, box-shadow .25s ease;}
.news-card:hover{transform:translateY(-6px); box-shadow:0 14px 28px rgba(0,0,0,0.1);}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

@keyframes navIn{ from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:translateY(0);} }
@keyframes brandShake{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-3deg);} 75%{transform:rotate(3deg);} }
@keyframes slideUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-2px);} 75%{transform:translateX(2px);} }

/* ===================== BULLE D'ASSISTANCE (un seul message, zéro interaction réelle) ===================== */
.chat-bubble{
  position:fixed; bottom:24px; right:24px; z-index:9000;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,0.28);
  transition:transform .2s ease, background-color .2s ease;
}
.chat-bubble:hover{transform:scale(1.07); background:var(--red-deep);}
.chat-bubble:active{transform:scale(0.96);}
.chat-bubble svg{width:24px; height:24px;}
.chat-bubble.is-active{background:var(--black);}
.chat-badge{
  position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%;
  background:var(--warn); color:var(--black); font-size:11px; font-weight:800; font-family:var(--body);
  display:flex; align-items:center; justify-content:center;
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }

.chat-panel{
  position:fixed; bottom:92px; right:24px; z-index:8999;
  width:300px; max-width:calc(100vw - 48px);
  background:var(--white); border-radius:10px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,0.28);
  opacity:0; transform:translateY(14px) scale(0.97); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.chat-panel.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.chat-header{background:var(--black); color:var(--white); padding:14px 16px; display:flex; align-items:center; justify-content:space-between;}
.chat-header-info{display:flex; align-items:center; gap:10px;}
.chat-status-dot{width:8px; height:8px; border-radius:50%; background:#3DD56D; flex-shrink:0; box-shadow:0 0 0 3px rgba(61,213,109,0.18);}
.chat-title{font-size:13.5px; font-weight:800;}
.chat-subtitle{font-size:11px; color:rgba(255,255,255,0.55);}
.chat-close{background:none; border:none; color:rgba(255,255,255,0.6); font-size:20px; cursor:pointer; line-height:1; padding:2px 4px;}
.chat-close:hover{color:var(--white);}
.chat-body{padding:18px 16px; min-height:54px; display:flex; align-items:flex-start;}
.chat-typing{display:flex; gap:4px; padding:10px 13px; background:var(--offwhite); border-radius:14px;}
.chat-typing span{width:6px; height:6px; border-radius:50%; background:var(--grey-light); animation:typingBounce 1.2s ease-in-out infinite;}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{ 0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;} }
.chat-msg{background:var(--offwhite); border-radius:14px; padding:10px 14px; font-size:13.5px; color:var(--ink); line-height:1.5; animation:slideUp .25s ease-out;}
.chat-input-row{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--hair);}
.chat-input{flex-grow:1; min-width:0; border:1px solid var(--hair); border-radius:6px; padding:8px 10px; font-size:12.5px; font-family:var(--body); background:var(--offwhite); color:var(--grey); cursor:not-allowed;}
.chat-send{border:none; background:var(--hair); color:var(--grey); padding:8px 12px; border-radius:6px; font-size:12.5px; font-weight:700; cursor:not-allowed; white-space:nowrap;}
@media (max-width:480px){
  .chat-bubble{bottom:16px; right:16px;}
  .chat-panel{right:16px; bottom:84px;}
}

/* ===================== ANIMATIONS RÉINTRODUITES (ciblées, une seule par élément, jamais en boucle inutile) ===================== */
.hero .tag, .hero .price-hero, .hero .price-sub, .hero-ctas{
  animation:fadeInOpacity .5s ease-out both;
}
.hero .price-hero{animation-delay:.06s;}
.hero .price-sub{animation-delay:.12s;}
.hero-ctas{animation-delay:.18s;}
@keyframes fadeInOpacity{ from{opacity:0;} to{opacity:1;} }

.plan-badge{animation:popIn .5s cubic-bezier(0.34,1.56,0.64,1) both;}
@keyframes popIn{ 0%{transform:scale(0.6); opacity:0;} 100%{transform:scale(1); opacity:1;} }

.ticker-dot{animation:dotPulse 1.8s ease-in-out infinite;}
@keyframes dotPulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }

.section.reveal .plan{opacity:0; transform:translateY(18px);}
.section.reveal .plan, .section.reveal.is-visible .plan{transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease;}
.section.reveal.is-visible .plan{opacity:1; transform:translateY(0);}
.section.reveal.is-visible .plan.mid{transform:translateY(0) scale(1.02);}
.section.reveal.is-visible .plan:nth-child(1){transition-delay:.05s;}
.section.reveal.is-visible .plan:nth-child(2){transition-delay:.12s;}
.section.reveal.is-visible .plan:nth-child(3){transition-delay:.19s;}
.section.reveal .review-card{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.section.reveal.is-visible .review-card{opacity:1; transform:translateY(0);}
.section.reveal.is-visible .review-card:nth-child(1){transition-delay:.04s;}
.section.reveal.is-visible .review-card:nth-child(2){transition-delay:.09s;}
.section.reveal.is-visible .review-card:nth-child(3){transition-delay:.14s;}
.section.reveal.is-visible .review-card:nth-child(4){transition-delay:.19s;}
.section.reveal.is-visible .review-card:nth-child(5){transition-delay:.24s;}
.section.reveal.is-visible .review-card:nth-child(6){transition-delay:.29s;}

/* ===================== CARTE DES PANNES EN DIRECT (réseau.html) ===================== */
.live-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center;}
.live-counter-label{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6); margin-bottom:10px;}
.live-counter-num{font-family:var(--display); font-size:108px; line-height:1; color:var(--red);}
.live-counter-sub{font-size:13px; color:rgba(255,255,255,.5); margin-top:14px; max-width:320px;}
.live-feed{margin-top:30px; border-top:1px solid rgba(255,255,255,.14); padding-top:18px;}
.live-feed-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4);}
.live-feed-text{font-size:14.5px; color:var(--white); margin-top:6px; font-weight:700;}
.live-map-wrap{text-align:center;}
.live-map{width:100%; max-width:340px; height:auto;}
.map-hexagon{fill:rgba(226,0,26,0.07); stroke:rgba(226,0,26,0.45); stroke-width:1.5;}
.city-dot{fill:var(--warn); transition:fill .2s ease;}
.city-ring{fill:none; stroke:var(--red); stroke-width:1.5; opacity:0; transform-origin:center; transform-box:fill-box;}
.city.is-live .city-ring{animation:cityPing 1.9s ease-out infinite;}
.city.is-live .city-dot{fill:var(--red);}
@keyframes cityPing{ 0%{transform:scale(1); opacity:.85;} 100%{transform:scale(3.2); opacity:0;} }
.city-label{font-family:var(--mono); font-size:9px; fill:rgba(255,255,255,.5);}
.map-caption{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.4); margin-top:16px;}
@media (max-width:880px){
  .live-grid{grid-template-columns:1fr; gap:36px; text-align:center;}
  .live-counter-sub{margin-left:auto; margin-right:auto;}
  .live-counter-num{font-size:80px;}
}

@media (prefers-reduced-motion: reduce){ * { transition:none !important; animation:none !important; } }

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:880px){
  nav.links{
    position:absolute; top:100%; left:0; right:0; background:var(--black);
    flex-direction:column; align-items:flex-start; gap:0; padding:6px 24px 18px;
    border-top:1px solid rgba(255,255,255,0.1);
    display:none;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 0; width:100%; border-bottom:1px solid rgba(255,255,255,0.06);}
  nav.links a.current{box-shadow:none; color:var(--red);}
  .menu-toggle{display:flex;}
  header.nav{position:sticky;}
  .price-hero{font-size:58px;}
  .plans{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .news-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .stub--float{transform:none;}
  .hero-ctas{padding-top:50px;}
  .footer-cols{gap:30px;}
  .job-card{flex-direction:column; align-items:flex-start;}
}
@media (max-width:520px){
  .price-hero{font-size:46px;}
  .section{padding:60px 20px;}
  .stats-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .nav-inner{padding:13px 16px; gap:8px;}
  .brand{font-size:16px; gap:5px;}
  .nav-cta{gap:6px;}
  .nav-cta .btn-primary{padding:9px 13px; font-size:12.5px;}
  .menu-toggle{width:36px; height:36px; flex-shrink:0;}
}