/* =========================================================
   ABC TÉLÉCOM — Design system
   Palette: réseau/signal télécom (navy + vert "appel connecté")
   ========================================================= */

:root{
  /* Color tokens — extraits du vrai logo Abc Telecom (lentille ambrée + anthracite) */
  --navy-950:#181F22;
  --navy-900:#1F262A;
  --navy-800:#2A3237;
  --navy-700:#374149;
  --blue-600:#5B6B78;
  --blue-500:#7C8B98;
  --signal-100:#FDF0DA;
  --signal-500:#F5A623;
  --signal-600:#D98A0F;
  --ink:#181F22;
  --slate-600:#565F6B;
  --slate-400:#8992A0;
  --slate-200:#E2E6EB;
  --fog-50:#F6F7F6;
  --white:#FFFFFF;

  /* Type */
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:26px;
  --shadow-1: 0 1px 2px rgba(8,21,43,.06), 0 8px 24px rgba(8,21,43,.06);
  --shadow-2: 0 20px 60px rgba(8,21,43,.16);
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--fog-50);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--slate-600);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{padding:96px 0;}
@media (max-width:760px){section{padding:64px 0;}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal-600);
  background:var(--signal-100);
  padding:6px 14px;border-radius:100px;
  margin-bottom:18px;
}
.eyebrow--light{color:#BFE9FF;background:rgba(255,255,255,.08);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:100px;font-weight:600;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--signal-500);color:var(--navy-950);box-shadow:0 10px 24px rgba(245,166,35,.28);}
.btn-primary:hover{background:var(--signal-600);box-shadow:0 14px 30px rgba(245,166,35,.34);}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);}
.btn-outline:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);}
.btn-outline-dark{background:transparent;color:var(--navy-900);border-color:var(--slate-200);}
.btn-outline-dark:hover{border-color:var(--navy-700);}
.btn-block{width:100%;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,21,43,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* Le flou est posé sur un pseudo-élément plutôt que directement sur
   .site-header : backdrop-filter transformerait sinon .site-header en
   "containing block" pour ses descendants en position:fixed (le menu
   mobile), qui se positionnerait alors par rapport à ses 76px de haut
   au lieu de toute la fenêtre. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:-1;
  pointer-events:none;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;font-size:1.15rem;color:var(--white);
  display:flex;align-items:center;gap:10px;
}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--signal-500);
  box-shadow:0 0 0 4px rgba(245,166,35,.2);}
.logo span.sub{color:var(--slate-400);font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.06em;}

.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{color:rgba(255,255,255,.78);font-size:.94rem;font-weight:500;transition:color .15s;}
.nav-links a:hover, .nav-links a.active{color:var(--white);}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-phone{
  font-family:var(--font-mono);color:var(--white);font-size:.92rem;
  display:flex;align-items:center;gap:8px;
}
.nav-phone .dot{width:7px;height:7px;border-radius:50%;background:var(--signal-500);animation:pulse 2s infinite;}
.nav-phone .phone-icon{display:none;}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;}

@media (max-width:900px){
  .nav-links{position:fixed;top:76px;right:0;bottom:0;left:0;z-index:60;
    background-color:var(--navy-950);flex-direction:column;overflow-y:auto;
    padding:32px 24px;gap:24px;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;}
  .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
  .nav-phone span.label{display:none;}
  .nav-phone .phone-icon{display:block;}
  .menu-toggle{display:block;position:relative;z-index:61;}
}

/* Hero */
.hero{
  background:radial-gradient(circle at 82% 18%, rgba(245,166,35,.25), transparent 55%),
             linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color:var(--white);
  padding:88px 0 60px;
  overflow:hidden;
  position:relative;
}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media (max-width:980px){.hero .container{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.35rem);color:var(--white);}
.hero h1 em{color:var(--signal-500);font-style:normal;}
.hero p.lead{color:rgba(255,255,255,.72);font-size:1.12rem;max-width:520px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}
.status-chip{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.82rem;color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  padding:8px 16px;border-radius:100px;margin-top:34px;
}
.status-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--signal-500);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,166,35,.55);}70%{box-shadow:0 0 0 8px rgba(245,166,35,0);}100%{box-shadow:0 0 0 0 rgba(245,166,35,0);}}

/* Network diagram (signature element) */
.network-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.network-diagram{width:100%;max-width:460px;}
.node-label{
  font-family:var(--font-mono);font-size:.68rem;fill:rgba(255,255,255,.65);
}
.pulse-line{stroke-dasharray:6 10;animation:dash 3s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-160;}}
.packet{animation:travel 3s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .pulse-line,.packet,.status-chip .dot,.nav-phone .dot{animation:none;}
}

/* Sections */
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head.left{margin:0 0 48px;text-align:left;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--navy-950);}
.section-head p{font-size:1.05rem;}

/* RTC timeline */
.rtc{background:var(--navy-950);color:var(--white);}
.rtc .section-head h2{color:var(--white);}
.rtc .section-head p{color:rgba(255,255,255,.65);}
.rtc-track{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:28px;}
.rtc-row{display:grid;grid-template-columns:220px 1fr 64px;align-items:center;gap:18px;}
@media (max-width:640px){.rtc-row{grid-template-columns:1fr;gap:8px;}}
.rtc-row .label{font-weight:600;color:var(--white);}
.rtc-row .sub{font-size:.8rem;color:rgba(255,255,255,.5);}
.rtc-bar{height:10px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;}
.rtc-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue-500),var(--signal-500));}
.rtc-row .pct{font-family:var(--font-mono);text-align:right;color:var(--signal-500);}
.rtc-note{max-width:760px;margin:36px auto 0;font-size:.92rem;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.08);padding-top:24px;}

/* Cards */
.grid{display:grid;gap:24px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--slate-200);
  border-radius:var(--radius-md);padding:30px;
  box-shadow:var(--shadow-1);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.card .icon{
  width:46px;height:46px;border-radius:12px;
  background:var(--navy-950);color:var(--signal-500);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.card h3{font-size:1.08rem;color:var(--navy-950);}
.card p{font-size:.94rem;margin-bottom:0;}
.card ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.card ul li{font-size:.9rem;color:var(--slate-600);display:flex;gap:8px;}
.card ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal-500);margin-top:7px;flex-shrink:0;}

/* Feature tour (avantages) — panneau sombre avec onglets qui défilent
   automatiquement, contraste volontaire avec les cartes blanches du dessus.
   Mouvement ambiant permanent : halo qui dérive + anneaux radar autour
   de l'icône, sur le même motif "signal qui pulse" que le reste du site. */
.feature-tour{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-950),var(--navy-900));color:var(--white);
}
.feature-tour::before{
  content:"";
  position:absolute;width:640px;height:640px;
  top:-260px;left:50%;
  background:radial-gradient(circle, rgba(245,166,35,.16), transparent 65%);
  filter:blur(10px);
  transform:translate(-55%,-10%) scale(1);
  animation:tourBlobDrift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes tourBlobDrift{
  0%{transform:translate(-62%,-14%) scale(1);}
  100%{transform:translate(-42%,4%) scale(1.18);}
}
.feature-tour .container{position:relative;}
.feature-tour .section-head h2{color:var(--white);}
.feature-tour .section-head p{color:rgba(255,255,255,.65);}

.tour{max-width:900px;margin:0 auto;position:relative;}
.tour-tabs{display:flex;gap:4px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);}
.tour-tab{
  flex:1;background:none;border:none;color:rgba(255,255,255,.5);
  font-family:var(--font-body);font-weight:600;font-size:.98rem;
  padding:0 8px 18px;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;
  transition:color .25s ease;
}
.tour-tab:hover{color:rgba(255,255,255,.85);}
.tour-tab.active{color:var(--white);}
.tour-tab-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.tour-tab-progress-fill{display:block;height:100%;width:0%;background:var(--signal-500);}
.tour-tab.active .tour-tab-progress-fill{animation:tourProgress 6s linear forwards;}
@keyframes tourProgress{from{width:0%;}to{width:100%;}}

.tour-panel{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;min-height:200px;}
@media (max-width:760px){.tour-panel{grid-template-columns:1fr;text-align:center;}}

/* Icône dans un badge rond, avec anneaux radar qui pulsent en continu */
.tour-visual{
  position:relative;width:128px;height:128px;flex-shrink:0;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
}
.tour-visual::before,.tour-visual::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:1.5px solid var(--signal-500);
  opacity:0;
  animation:tourRadar 3s ease-out infinite;
}
.tour-visual::after{animation-delay:1.5s;}
@keyframes tourRadar{
  0%{transform:scale(.6);opacity:.5;}
  100%{transform:scale(1.55);opacity:0;}
}
.tour-icon-badge{
  position:relative;width:88px;height:88px;border-radius:50%;
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px rgba(245,166,35,.06);
}
.tour-icon-badge.burst{animation:tourBurst .5s ease;}
@keyframes tourBurst{
  0%{box-shadow:0 0 0 6px rgba(245,166,35,.06);}
  45%{box-shadow:0 0 0 16px rgba(245,166,35,.18);}
  100%{box-shadow:0 0 0 6px rgba(245,166,35,.06);}
}
.tour-icon{
  position:absolute;top:50%;left:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.4) rotate(-25deg);
  transition:opacity .35s ease, transform .4s cubic-bezier(.3,1.4,.4,1);
}
.tour-icon.active{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);}

.tour-text{position:relative;}
.tour-text-panel{display:none;}
.tour-text-panel.active{display:block;animation:tourFade .5s cubic-bezier(.2,.8,.2,1);}
.tour-text-panel h3{color:var(--white);font-size:1.5rem;}
.tour-text-panel p{color:rgba(255,255,255,.68);font-size:1.02rem;margin-bottom:0;}
@keyframes tourFade{
  from{opacity:0;transform:translateY(14px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

@media (max-width:760px){
  .tour-visual{margin-bottom:8px;}
  .tour-tab{flex-direction:column;gap:8px;font-size:.86rem;}
}
@media (prefers-reduced-motion:reduce){
  .feature-tour::before{animation:none;}
  .tour-visual::before,.tour-visual::after{animation:none;opacity:0;}
  .tour-icon-badge.burst{animation:none;}
  .tour-tab-progress-fill{animation:none;width:100%;}
  .tour-icon,.tour-text-panel{transition:none;animation:none;}
}

/* Partners */
.partners{background:var(--white);border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200);}
.partners-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:32px;}
.partner-badge{
  font-family:var(--font-mono);font-size:.82rem;color:var(--slate-400);
  border:1px dashed var(--slate-200);padding:10px 18px;border-radius:100px;
}

/* Certifications 3CX — badges avec apparition en cascade + reflet
   qui balaie périodiquement chaque badge (motif "premium/certifié") */
.certs{background:var(--fog-50);}
.certs-card{
  background:var(--white);
  border:1px solid var(--slate-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  padding:44px 48px;
  display:flex;
  align-items:center;
  gap:40px;
}
.certs-text{flex:1;min-width:0;}
.certs-divider{width:1px;align-self:stretch;background:var(--slate-200);flex-shrink:0;}
.certs-badges{display:flex;align-items:center;gap:28px;flex-shrink:0;}
@media (max-width:760px){
  .certs-card{flex-direction:column;text-align:center;padding:36px 28px;}
  .certs-divider{width:100%;height:1px;}
  .certs-badges{margin-top:4px;}
}
.certifications-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:36px;}

.cert-badge-wrap{
  position:relative;overflow:hidden;border-radius:10px;
  opacity:0;transform:translateY(20px) scale(.96);
}
.cert-badge-wrap.in-view{animation:certIn .6s cubic-bezier(.2,.8,.2,1) forwards;}
.certifications-row .cert-badge-wrap:nth-child(2).in-view{animation-delay:.15s;}
@keyframes certIn{
  from{opacity:0;transform:translateY(20px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.cert-badge-wrap::after{
  content:"";
  position:absolute;top:0;left:-150%;width:55%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.75), transparent);
  transform:skewX(-20deg);
  pointer-events:none;
  animation:certShine 4.5s ease-in-out infinite;
  animation-delay:1.4s;
}
.certifications-row .cert-badge-wrap:nth-child(2)::after{animation-delay:2.1s;}
@keyframes certShine{
  0%{left:-150%;}
  22%{left:150%;}
  100%{left:150%;}
}

@media (prefers-reduced-motion:reduce){
  .cert-badge-wrap{opacity:1;transform:none;animation:none;}
  .cert-badge-wrap::after{animation:none;display:none;}
}

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--navy-950),var(--navy-800));
  color:var(--white);border-radius:var(--radius-lg);
  padding:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-band h2{color:var(--white);font-size:1.7rem;margin-bottom:6px;}
.cta-band p{color:rgba(255,255,255,.65);margin-bottom:0;}

/* Footer */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.6);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{color:var(--white);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-body);margin-bottom:16px;}
.footer-grid ul{display:flex;flex-direction:column;gap:10px;font-size:.92rem;}
.footer-grid a:hover{color:var(--white);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;
}

/* Breadcrumb / page hero (inner pages) */
.page-hero{background:linear-gradient(180deg,var(--navy-950),var(--navy-900));color:var(--white);padding:64px 0 72px;}
.page-hero h1{color:var(--white);font-size:clamp(1.9rem,3.6vw,2.8rem);max-width:760px;}
.page-hero p{color:rgba(255,255,255,.68);max-width:620px;font-size:1.05rem;}
.breadcrumb{font-family:var(--font-mono);font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:22px;}
.breadcrumb a:hover{color:var(--white);}

/* Form */
.form-card{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-md);padding:36px;box-shadow:var(--shadow-1);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}
label{display:block;font-size:.86rem;font-weight:600;color:var(--navy-950);margin-bottom:6px;}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--slate-200);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);margin-bottom:18px;background:var(--fog-50);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-500);outline-offset:1px;}
textarea{min-height:120px;resize:vertical;}

/* Info tiles (contact page) */
.info-tile{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--slate-200);}
.info-tile:last-child{border-bottom:none;}
.info-tile .icon{width:40px;height:40px;border-radius:10px;background:var(--fog-50);border:1px solid var(--slate-200);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-tile h4{margin:0 0 4px;font-family:var(--font-body);font-size:.95rem;color:var(--navy-950);}
.info-tile p{margin:0;font-size:.9rem;}

/* Table (services comparison) */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--slate-200);}
table{width:100%;border-collapse:collapse;background:var(--white);}
th,td{padding:16px 20px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--slate-200);}
th{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-400);background:var(--fog-50);}
tr:last-child td{border-bottom:none;}

/* Skip link / a11y */
.skip-link{position:absolute;left:-999px;top:0;background:var(--signal-500);color:var(--navy-950);padding:12px 18px;border-radius:8px;z-index:100;}
.skip-link:focus{left:16px;top:16px;}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;}

.muted-note{font-size:.8rem;color:var(--slate-400);font-style:italic;}

/* Blog listing */
.post-card{
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-md);
  padding:28px;display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow-1);transition:transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
.post-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;}
.post-card h3{font-size:1.15rem;color:var(--navy-950);}
.post-card .read-more{font-size:.88rem;font-weight:600;color:var(--signal-600);margin-top:auto;}
.post-card--soon{opacity:.6;}

/* Article body */
.article{max-width:720px;margin:0 auto;}
.article h2{font-size:1.5rem;color:var(--navy-950);margin-top:2.2em;}
.article h3{font-size:1.2rem;color:var(--navy-950);margin-top:1.6em;}
.article p{font-size:1.03rem;color:var(--ink);}
.article ul{margin:0 0 1.2em;padding-left:1.3em;list-style:disc;}
.article li{margin-bottom:.5em;color:var(--ink);}
.article-meta{display:flex;gap:16px;align-items:center;font-family:var(--font-mono);font-size:.8rem;color:rgba(255,255,255,.55);margin-top:20px;}
.article-cta{
  background:var(--fog-50);border:1px solid var(--slate-200);border-radius:var(--radius-md);
  padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:3em;
}
.article-cta p{margin:0;color:var(--slate-600);}

/* =========================================================
   Page Services — feature rows, quick-nav, FAQ, scroll-reveal
   ========================================================= */

/* Quick-nav pills (dans le page-hero sombre) */
.quick-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
.quick-nav a{
  font-family:var(--font-mono);font-size:.8rem;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:9px 18px 9px 14px;border-radius:100px;
  display:inline-flex;align-items:center;gap:9px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.quick-nav a .num{color:var(--signal-500);font-weight:700;}
.quick-nav a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);transform:translateY(-2px);}

/* Feature row (bloc icône + texte, utilisé pour chaque service) */
.feature-row{display:grid;grid-template-columns:180px 1fr;gap:52px;align-items:center;}
.feature-row.reverse{grid-template-columns:1fr 180px;}
.feature-num{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal-600);display:block;margin-bottom:14px;
}
.feature-text h3{font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--navy-950);}
.feature-text p{font-size:1.02rem;}
.feature-text a{color:var(--signal-600);font-weight:600;white-space:nowrap;}
.feature-text a:hover{text-decoration:underline;}

/* Badge circulaire avec anneaux radar animés (motif "signal" du site) */
.feature-visual{display:flex;align-items:center;justify-content:center;}
.feature-icon-badge{
  position:relative;width:130px;height:130px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(160deg,var(--white),var(--fog-50));
  border:1px solid var(--slate-200);box-shadow:var(--shadow-1);
  display:flex;align-items:center;justify-content:center;
}
.feature-icon-badge::before,.feature-icon-badge::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--signal-500);opacity:0;
  animation:tourRadar 3.2s ease-out infinite;
}
.feature-icon-badge::after{animation-delay:1.6s;}

/* Liste à puces avec point ambré (réutilisable hors des .card) */
.check-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--slate-600);}
.check-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal-500);margin-top:7px;flex-shrink:0;}

@media (max-width:760px){
  .feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:26px;}
  .feature-row.reverse .feature-visual{order:-1;}
  .feature-icon-badge{width:100px;height:100px;}
}

/* Tableau "quel service pour quelle situation" — réutilise .table-wrap/table */
.fit-table td:first-child,.fit-table th:first-child{font-weight:600;color:var(--navy-950);}

/* FAQ — accordéon natif <details>, sans JS */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq details{
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-md);
  overflow:hidden;transition:box-shadow .18s ease;
}
.faq details[open]{box-shadow:var(--shadow-1);}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 26px;
  font-weight:600;color:var(--navy-950);font-size:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--font-mono);font-size:1.4rem;line-height:1;color:var(--signal-600);
  flex-shrink:0;transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .faq-a{padding:0 26px 22px;font-size:.95rem;color:var(--slate-600);}

/* Scroll-reveal générique — piloté par main.js (voir data-reveal), repli sans-JS via <noscript> par page */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
[data-reveal].revealed{opacity:1;transform:translateY(0);}
.post-card--soon.revealed{opacity:.6;}
.reveal-group [data-reveal]:nth-child(1){transition-delay:.04s;}
.reveal-group [data-reveal]:nth-child(2){transition-delay:.11s;}
.reveal-group [data-reveal]:nth-child(3){transition-delay:.18s;}
.reveal-group [data-reveal]:nth-child(4){transition-delay:.25s;}
.reveal-group [data-reveal]:nth-child(5){transition-delay:.32s;}
.reveal-group [data-reveal]:nth-child(6){transition-delay:.39s;}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .feature-icon-badge::before,.feature-icon-badge::after{animation:none;opacity:0;}
}