:root{
  /* Couleurs SRM (sans vert) */
  --primary:#0DA1BE;      /* cyan */
  --primary2:#0B88A2;     /* cyan foncé */
  --accent:#F39A1E;       /* orange */

  /* Bleu nuit (remplace l'ancien "vert") */
  --deep:#081A2D;
  --deep2:#061423;

  --bg:#F6F8FC;
  --ink:#0F172A;
}

/* TOPBAR + HEADER */
.topbar{ background: linear-gradient(90deg, var(--deep), var(--deep2)); }

.socialBtn{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  transition: transform .2s ease, background .2s ease;
}
.socialBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.16); }

.header{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(2,6,23,.06);
}

.navlink{
  color: rgba(15,23,42,.72);
  font-weight: 800;
  position: relative;
  transition: color .2s ease;
}
.navlink:hover{ color: rgba(15,23,42,1); }
.navlink::after{
  content:"";
  position:absolute;
  left:0; bottom:-10px;
  height:2px; width:0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .25s ease;
}
.navlink:hover::after{ width:100%; }

.mLink{
  padding: .65rem .8rem;
  border-radius: 12px;
  color: rgba(15,23,42,.78);
}
.mLink:hover{ background: rgba(2,6,23,.04); color: rgba(15,23,42,1); }

/* Buttons */
.btnPrimary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.05rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btnPrimary:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(13,161,190,.20); filter: brightness(1.02); }

.btnSecondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.05rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.10);
  color: rgba(15,23,42,.9);
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btnSecondary:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(2,6,23,.08); }

/* HERO */
.hero{
  position: relative;
  min-height: 65vh; /* plus court */
  display:block;
}
.heroSlider{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.heroSlide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 900ms ease;
}
.heroSlide.active{ opacity:1; }
.heroSlide img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.03);
}
.heroOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(13,161,190,.38), transparent 44%),
    radial-gradient(circle at 80% 25%, rgba(243,154,30,.25), transparent 48%),
    linear-gradient(to bottom, rgba(2,6,23,.52), rgba(2,6,23,.62));
}
.heroInner{
  position: relative;
  z-index: 2;
  padding: 3.2rem 0 3.0rem; /* moins grand */
}

/* Hero label + gradient */
.miniLabel{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.52rem .95rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  font-weight: 800;
  font-size: .92rem;
}
.miniDot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(243,154,30,.18);
}
.gradAccent{
  background: linear-gradient(90deg, #ffd39a, var(--accent));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* Hero buttons */
.btnPrimaryLight{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.88rem 1.12rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#fff;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.26);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btnPrimaryLight:hover{ transform: translateY(-1px); box-shadow: 0 16px 32px rgba(13,161,190,.22); }

.btnGhostLight{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.88rem 1.12rem;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  color:#fff;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease;
}
.btnGhostLight:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); }

/* KPI */
.kpiGlass{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  padding: .85rem .9rem;
  backdrop-filter: blur(10px);
}
.kpiNum{ font-size: 1.35rem; font-weight: 950; color: #fff; line-height: 1.1; }
.kpiLbl{ font-size: .84rem; color: rgba(255,255,255,.88); margin-top: .22rem; }

/* Quality orb */
.qualityOrb{
  position: relative;
  width: 260px;
  height: 260px;
  margin-left: auto;
  margin-right: auto;
  display:grid;
  place-items:center;
}
.qRing{
  position:absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px dashed rgba(255,255,255,.65);
  animation: spin 10s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.qInner{
  width: 185px; height: 185px;
  border-radius: 999px;
  background: rgba(8,26,45,.72);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 28px 60px rgba(2,6,23,.35);
  display:grid;
  place-items:center;
  text-align:center;
  padding: 18px;
}
.qSmall{ color: rgba(255,255,255,.78); font-weight: 900; font-size: .95rem; }
.qBig{
  color:#fff;
  font-weight: 950;
  font-size: 2rem;
  line-height: 1;
}
.qLine{
  width: 58%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  margin: 8px auto;
}
.qHint{ color: rgba(255,255,255,.72); font-weight: 900; font-size: .85rem; }

.qSpark{
  position:absolute;
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 10px rgba(243,154,30,.12);
  animation: floaty 4.8s ease-in-out infinite;
}
.qSpark.s1{ right: 14px; top: 45%; }
.qSpark.s2{
  left: 18px; bottom: 38px;
  background: var(--primary);
  box-shadow: 0 0 0 10px rgba(13,161,190,.12);
  animation-duration: 6.2s;
}
.qSpark.s3{
  left: 42px; top: 22px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 10px rgba(255,255,255,.12);
  animation-duration: 5.4s;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-12px) }
}

/* dots */
.heroDots{
  margin-top: 14px;
  display:flex;
  gap:.45rem;
  align-items:center;
  justify-content:center;
}
.dot{
  width:10px; height:10px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.50);
  transition: width .2s ease, background .2s ease;
}
.dot.active{ width:28px; background: rgba(243,154,30,.95); }

/* band marquee */
.brandBand{
  position:absolute;
  left:0; right:0; bottom:0;
  background: linear-gradient(90deg, var(--deep), var(--deep2));
  border-top: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  z-index: 3;
}
.bandTrack{
  display:flex;
  gap: .85rem;
  align-items:center;
  width:max-content;
  padding: .85rem 0;
  animation: marquee 18s linear infinite;
}
.bandItem{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  letter-spacing: .2px;
  white-space: nowrap;
  font-size: .95rem;
}
.bandStar{ color: rgba(255,255,255,.55); font-weight: 900; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* kicker */
.sectionKicker{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight: 950;
  color: rgba(15,23,42,.65);
}
.kDot{
  width:10px; height:10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(243,154,30,.12);
}
.kDotLight{
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(243,154,30,.18);
}

/* ABOUT images */
.aboutGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.aboutImg{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  background:#fff;
}
.aboutImg img{
  width:100%;
  height: 340px;
  object-fit: cover;
  transition: transform .8s ease;
}
.aboutImg:hover img{ transform: scale(1.06); }

/* progress bars */
.pTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight: 950;
  color: rgba(15,23,42,.78);
  font-size: .95rem;
}
.pLine{
  margin-top: .5rem;
  height: 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  overflow:hidden;
}
.pLine span{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: fill 1.2s ease both;
}
@keyframes fill{
  from{ transform: translateX(-16%); opacity: .4; }
  to{ transform: translateX(0); opacity: 1; }
}

/* IDENTITY */
.identityWrap{
  background: linear-gradient(180deg, #ffffff, rgba(13,161,190,.05));
  border-top: 1px solid rgba(2,6,23,.06);
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.identityGrid{ display:grid; gap: 1.25rem; }
@media(min-width:1024px){
  .identityGrid{ grid-template-columns: 1.05fr .95fr; align-items:start; }
}
.idCollage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.idImg{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  background:#fff;
}
.idImg img{ width:100%; height: 240px; object-fit: cover; transition: transform .8s ease; }
.idImg:hover img{ transform: scale(1.06); }
.idMini{
  grid-column: 1 / -1;
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 22px;
  padding: 1rem 1.05rem;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
}

/* SMART cards */
.smartGrid{ display:grid; gap: 12px; }
@media(min-width:640px){ .smartGrid{ grid-template-columns: 1fr 1fr; } }
.smartCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 22px;
  padding: 1rem 1rem;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow:hidden;
}
.smartCard:hover{ transform: translateY(-4px); box-shadow: 0 28px 60px rgba(2,6,23,.10); }
.smartCard::before{
  content:"";
  position:absolute; inset:-90px -90px auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(13,161,190,.14), transparent 60%);
}
.smartTop{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; position:relative; z-index:1; }
.smartBadge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 16px;
  background: rgba(13,161,190,.10);
  border: 1px solid rgba(13,161,190,.18);
}
.smartBadge.orange{ background: rgba(243,154,30,.12); border-color: rgba(243,154,30,.25); }
.smartTitle{ font-weight: 950; color: rgba(15,23,42,.92); }
.smartTag{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(2,6,23,.08);
  font-weight: 950;
  color: rgba(15,23,42,.78);
}
.smartTxt{ margin-top:.55rem; color: rgba(15,23,42,.72); line-height: 1.7; position:relative; z-index:1; }
.smartThumb{
  margin-top:.75rem;
  height: 110px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.08);
  position:relative; z-index:1;
}
.smartThumb img{ width:100%; height:100%; object-fit: cover; transition: transform .8s ease; }
.smartCard:hover .smartThumb img{ transform: scale(1.06); }
.iconFloat{ animation: iconFloat 2.8s ease-in-out infinite; }
@keyframes iconFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

/* Values box */
.valuesBox{
  margin-top: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 22px;
  padding: 1rem 1.05rem;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
}
.valuesTitle{ font-weight: 950; color: rgba(15,23,42,.92); }
.valuesList{
  margin-top: .55rem;
  color: rgba(15,23,42,.72);
  line-height: 1.7;
  padding-left: 1.05rem;
}
.valuesList li{ margin:.35rem 0; }

/* QC */
.qcWrap{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(2,6,23,.08);
  overflow:hidden;
  display:grid;
  gap: 0;
}
@media(min-width:1024px){ .qcWrap{ grid-template-columns: 1.05fr .95fr; } }
.qcText{ padding: 1.4rem 1.4rem; }
.qcHeadline{ font-weight: 950; color: rgba(15,23,42,.92); font-size: 1.05rem; }
.qcImg{ min-height: 320px; }
.qcImg img{ width:100%; height:100%; object-fit: cover; transition: transform .9s ease; }
.qcWrap:hover .qcImg img{ transform: scale(1.06); }

.qcList{
  margin-top: .9rem;
  display:grid;
  gap: .6rem;
  color: rgba(15,23,42,.72);
}
.qcItem{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.75rem .85rem;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 18px;
}
.qcDot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  margin-top: .35rem;
  box-shadow: 0 0 0 6px rgba(243,154,30,.12);
}
.qcStats{ margin-top: 1rem; display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.qcStat{
  background: rgba(13,161,190,.08);
  border: 1px solid rgba(13,161,190,.14);
  border-radius: 18px;
  padding: .85rem .85rem;
}
.qcStat b{ display:block; font-size: 1.1rem; color: rgba(15,23,42,.92); font-weight: 950; }
.qcStat span{ display:block; margin-top:.2rem; color: rgba(15,23,42,.72); font-weight: 900; font-size: .9rem; }

/* PROCESS */
.processBox{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(2,6,23,.08);
  overflow:hidden;
  display:grid;
}
@media(min-width:1024px){ .processBox{ grid-template-columns: .95fr 1.05fr; } }
.procLeft{ padding: 1.25rem 1.25rem; background: rgba(2,6,23,.02); }
.procTitle{ font-weight: 950; color: rgba(15,23,42,.92); }
.procSteps{ margin-top: .85rem; display:grid; gap: .6rem; }
.procStep{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.8rem .9rem;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.06);
  background:#fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.procStep.active{
  border-color: rgba(13,161,190,.35);
  box-shadow: 0 16px 34px rgba(13,161,190,.12);
  transform: translateY(-1px);
}
.procNum{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(13,161,190,.10);
  border: 1px solid rgba(13,161,190,.18);
  font-weight: 950;
  color: rgba(15,23,42,.85);
}
.procSub{ margin-top:.25rem; color: rgba(15,23,42,.70); font-weight: 800; font-size: .9rem; }

.procRight{ position: relative; }
.vSlider{ height: 520px; overflow:hidden; position: relative; }
.vSlides{ height: 100%; transition: transform 700ms ease; }
.vSlide{
  height: 520px; /* doit matcher JS */
  display:grid;
  grid-template-rows: 1fr auto;
}
.vSlide img{ width:100%; height:100%; object-fit: cover; }
.vCap{
  padding: 1rem 1.05rem;
  background:#fff;
  border-top: 1px solid rgba(2,6,23,.06);
}
.vCap b{ display:block; color: rgba(15,23,42,.92); font-weight: 950; }
.vCap span{ display:block; margin-top:.2rem; color: rgba(15,23,42,.70); font-weight: 800; }
.vBtns{
  position:absolute;
  right: 14px;
  top: 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.vBtn{
  width: 42px; height: 42px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  display:grid; place-items:center;
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  transition: transform .2s ease;
}
.vBtn:hover{ transform: translateY(-1px); }

/* SERVICES (6 cartes) */
/* ===== SERVICES clair (branding SRM, sans noir/bleu foncé) ===== */
.servicesDark{
  background:
    radial-gradient(circle at 18% 20%, rgba(13,161,190,.20), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(243,154,30,.16), transparent 50%),
    linear-gradient(180deg, #ffffff, #F3FBFF);
  position:relative;
  overflow:hidden;
  border-top: 1px solid rgba(2,6,23,.06);
  border-bottom: 1px solid rgba(2,6,23,.06);
}

.servicesDark::before{
  content:"";
  position:absolute;
  inset:-140px -140px auto auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(13,161,190,.28), transparent 65%);
  transform: rotate(10deg);
  opacity:.9;
}
.servicesDark::after{
  content:"";
  position:absolute;
  inset:auto auto -170px -170px;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(243,154,30,.26), transparent 68%);
  opacity:.9;
}

.servicesGrid6{ margin-top: 2.5rem; display:grid; gap: 1.25rem; position:relative; z-index:1; }
@media(min-width:1024px){ .servicesGrid6{ grid-template-columns: repeat(3, 1fr); } }

.sCard{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  overflow:hidden;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.sCard:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
}
.sCard.highlight{
  background: rgba(243,154,30,.14);
  border-color: rgba(243,154,30,.35);
}
.sMedia{ height: 180px; overflow:hidden; }
.sMedia img{ width:100%; height:100%; object-fit: cover; transition: transform .8s ease; }
.sCard:hover .sMedia img{ transform: scale(1.06); }
.sBody{ padding: 1.1rem 1.1rem 1.2rem; }
.sTitle{ font-weight: 950; color:#fff; }
.sText{ margin-top:.35rem; color: rgba(255,255,255,.82); font-weight: 700; }

/* PARTNERS marquee */
.partners{
  background:#fff;
  border-top: 1px solid rgba(2,6,23,.06);
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.partnerBar{
  background: linear-gradient(90deg, rgba(13,161,190,.10), rgba(243,154,30,.08));
  border: 1px solid rgba(2,6,23,.06);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
}
.partnerTrack{
  display:flex; gap:.75rem; align-items:center;
  width:max-content;
  padding: .9rem 0;
  animation: partnerMarquee 20s linear infinite;
}
.partnerChip{
  background:#fff;
  border: 1px solid rgba(2,6,23,.10);
  color: rgba(15,23,42,.78);
  padding: .55rem .85rem;
  border-radius: 999px;
  font-weight: 950;
  white-space: nowrap;
}
@keyframes partnerMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Footer */
.fTitle{ font-weight: 950; color: rgba(15,23,42,.92); }
.fList{
  margin-top: .85rem;
  display:grid;
  gap:.55rem;
  color: rgba(15,23,42,.72);
  font-weight: 900;
  font-size: .95rem;
}
.fList a{ color: rgba(15,23,42,.70); transition: color .2s ease, transform .2s ease; display:inline-block; }
.fList a:hover{ color: rgba(15,23,42,1); transform: translateX(2px); }

.input{
  width:100%;
  padding:.75rem .95rem;
  border-radius: 14px;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  outline:none;
}
.input:focus{ border-color: rgba(13,161,190,.55); box-shadow: 0 0 0 4px rgba(13,161,190,.12); }

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.show{ opacity:1; transform: translateY(0); }

/* Pulse */
.pulse-dot{
  box-shadow: 0 0 0 0 rgba(243,154,30,.55);
  animation: pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(243,154,30,.55); }
  70%{ box-shadow: 0 0 0 16px rgba(243,154,30,0); }
  100%{ box-shadow: 0 0 0 0 rgba(243,154,30,0); }
}

/* WhatsApp float */
.waFloat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, #25D366, #1FAE55);
  box-shadow: 0 18px 40px rgba(37,211,102,.28);
  border: 1px solid rgba(255,255,255,.35);
  animation: waPop 1.2s ease-in-out infinite;
}
@keyframes waPop{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
.waFloat::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 24px;
  background: rgba(37,211,102,.22);
  filter: blur(10px);
  opacity:.75;
}
.waFloat svg{ position:relative; z-index:1; color:#fff; }

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

/* Responsive */
@media (max-width: 640px){
  .qualityOrb{ width: 220px; height: 220px; }
  .qInner{ width: 160px; height: 160px; }
}
/* ===== Notre identité : image large + smart icons ===== */
.idWide{
  grid-column: 1 / -1;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  background:#fff;
}
.idWide img{
  width:100%;
  height: 420px;
  object-fit: cover;
  transition: transform .9s ease;
}
.idWide:hover img{ transform: scale(1.05); }

/* SMART icônes uniquement */
.smartIcons{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media(min-width:640px){
  .smartIcons{ grid-template-columns: repeat(2, 1fr); }
}
.smartIconCard.wide{ grid-column: 1 / -1; }

.smartIconCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 22px;
  padding: 1rem 1rem;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  position: relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: default;
  min-height: 110px;
}
.smartIconCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(2,6,23,.10);
  border-color: rgba(13,161,190,.26);
}
.smartIconCard::before{
  content:"";
  position:absolute; inset:-90px -90px auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(13,161,190,.12), transparent 60%);
}
.smartIconCard.orange::before{
  background: radial-gradient(circle at 30% 30%, rgba(243,154,30,.14), transparent 60%);
}

.smartIcon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(13,161,190,.10);
  border: 1px solid rgba(13,161,190,.18);
  color: rgba(15,23,42,.90);
  position:relative;
  z-index:1;
  animation: iconFloat 2.8s ease-in-out infinite;
}
.smartIconCard.orange .smartIcon{
  background: rgba(243,154,30,.12);
  border-color: rgba(243,154,30,.25);
}
.smartIcon svg{
  width: 28px;
  height: 28px;
}

/* Tooltip discret au survol */
.smartTip{
  position:absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,26,45,.92);
  color: #fff;
  font-weight: 900;
  font-size: .82rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
  pointer-events: none;
}
.smartIconCard:hover .smartTip{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* ===== Footer fluide (branding SRM) ===== */
/* ===== Footer clair (sans noir) ===== */
/* ===== Footer noir premium (SRM cyan + orange) ===== */
.siteFooter{
  position: relative;
  overflow:hidden;

  /* Noir premium + fluid brand glow */
  background:
    radial-gradient(circle at 12% 18%, rgba(13,161,190,.26), transparent 46%),
    radial-gradient(circle at 88% 22%, rgba(243,154,30,.22), transparent 50%),
    radial-gradient(circle at 55% 120%, rgba(13,161,190,.18), transparent 55%),
    linear-gradient(180deg, #070B12, #04060B);

  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}

/* Orbes fluides */
.siteFooter::before{
  content:"";
  position:absolute;
  inset:-180px -180px auto auto;
  width: 520px;
  height: 520px;
  background:
    radial-gradient(circle at 30% 30%, rgba(13,161,190,.28), transparent 62%),
    radial-gradient(circle at 70% 70%, rgba(243,154,30,.18), transparent 65%);
  transform: rotate(12deg);
  opacity: .95;
  filter: blur(0px);
}
.siteFooter::after{
  content:"";
  position:absolute;
  inset:auto auto -220px -220px;
  width: 640px;
  height: 640px;
  background:
    radial-gradient(circle at 30% 30%, rgba(243,154,30,.22), transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(13,161,190,.18), transparent 68%);
  opacity: .92;
}

.footerInner{ position: relative; z-index: 1; }

/* Titres / liens */
.siteFooter .fTitle{ color:#fff; }
.siteFooter .fList a{
  color: rgba(255,255,255,.80);
  transition: color .2s ease, transform .2s ease, opacity .2s ease;
  display:inline-block;
}
.siteFooter .fList a:hover{
  color:#fff;
  transform: translateX(2px);
}

/* Textes */
.siteFooter p,
.siteFooter li,
.siteFooter div{
  color: rgba(255,255,255,.82);
}
.siteFooter b{ color:#fff; }

/* Newsletter input + bouton */
.siteFooter .input{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.siteFooter .input::placeholder{ color: rgba(255,255,255,.65); }
.siteFooter .input:focus{
  border-color: rgba(13,161,190,.60);
  box-shadow: 0 0 0 4px rgba(13,161,190,.16);
}

/* Bouton OK (branding) */
.siteFooter .btnPrimary{
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 18px 40px rgba(13,161,190,.14);
}
.siteFooter .btnPrimary:hover{
  box-shadow: 0 22px 50px rgba(243,154,30,.16);
}

/* Barre du bas */
.siteFooter .border-t{
  border-color: rgba(255,255,255,.12) !important;
}
.siteFooter .max-w-7xl a:hover{ opacity: 1; }

/* Petite ligne colorée en haut du footer (effet premium) */
.siteFooter{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.siteFooter::marker{ color: transparent; }

/* ===== SERVICES (version claire, textes noirs, 3 cartes) ===== */
.servicesLight{
  background:
    radial-gradient(circle at 18% 20%, rgba(13,161,190,.18), transparent 46%),
    radial-gradient(circle at 85% 30%, rgba(243,154,30,.14), transparent 52%),
    linear-gradient(180deg, #ffffff, #F3FBFF);
  border-top: 1px solid rgba(2,6,23,.06);
  border-bottom: 1px solid rgba(2,6,23,.06);
}

.btnBlack{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.78rem 1.05rem;
  border-radius: 14px;
  background:#0f172a; /* noir */
  color:#fff;
  font-weight: 950;
  border: 1px solid rgba(2,6,23,.20);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btnBlack:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
  filter: brightness(1.02);
}

.svcCard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svcCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(2,6,23,.10);
  border-color: rgba(13,161,190,.28);
}

.svcMedia{ height: 200px; overflow:hidden; }
.svcMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.svcCard:hover .svcMedia img{ transform: scale(1.06); }

.svcBody{ padding: 1.15rem 1.15rem 1.2rem; }
.svcTitle{ font-weight: 950; color:#0f172a; font-size: 1.05rem; }
.svcText{ margin-top:.45rem; color: rgba(15,23,42,.75); font-weight: 700; line-height: 1.65; }

.svcCta{
  margin-top:.9rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight: 950;
  color: rgba(13,161,190,.95);
}
.svcCard:hover .svcCta{ color: rgba(243,154,30,.95); }
/* Titres visibles sous les icônes SMART */
.smartName{
  margin-top: .65rem;
  font-weight: 950;
  color: rgba(15,23,42,.92);
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: .98rem;
}

.smartLetter{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(2,6,23,.08);
  font-weight: 950;
  color: rgba(15,23,42,.75);
  z-index: 2;
}
/* ===== QC orbit BIG (sans image principale) ===== */
.qcImg{
  position: relative;
  min-height: 380px;
  background:
    radial-gradient(circle at 20% 20%, rgba(13,161,190,.12), transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(243,154,30,.10), transparent 52%),
    linear-gradient(180deg, #ffffff, #F3FBFF);
  overflow: hidden;
}

.qcVisual{
  position: relative;
  width: 100%;
  min-height: 380px;
  display: grid;
  place-items: center;
}

/* Orbit container */
.qcOrbitBig{
  position: relative;
  width: min(560px, 92%);
  height: min(560px, 92%);
  display:grid;
  place-items:center;
}

/* Ring tournant */
.qcRing{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px dashed rgba(15,23,42,.20);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  animation: qcSpin 14s linear infinite;
}

/* 3 grandes bulles */
.qcOrb.big{
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.75);
  background: #fff;
  box-shadow: 0 24px 60px rgba(2,6,23,.14);
  animation: qcSpin 14s linear infinite;
}

.qcOrb.big img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.03);
}

/* Placement autour du cercle */
.qcOrb.big.o1{ transform: translate(-220px, -110px); }
.qcOrb.big.o2{ transform: translate(230px, -10px); }
.qcOrb.big.o3{ transform: translate(-140px, 230px); }

/* touches logo */
.qcOrb.big.o1{ box-shadow: 0 24px 60px rgba(13,161,190,.18); }
.qcOrb.big.o2{ box-shadow: 0 24px 60px rgba(243,154,30,.18); }
.qcOrb.big.o3{ box-shadow: 0 24px 60px rgba(13,161,190,.14); }

@keyframes qcSpin{
  to{ transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px){
  .qcOrbitBig{
    width: 92%;
    height: 92%;
  }
  .qcOrb.big{
    width: 135px;
    height: 135px;
  }
  .qcOrb.big.o1{ transform: translate(-160px, -95px); }
  .qcOrb.big.o2{ transform: translate(170px, 5px); }
  .qcOrb.big.o3{ transform: translate(-110px, 175px); }
}
/* ===== Panels & animations (Apropos) ===== */
.glassPanel{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(2,6,23,.08);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.glassPanel::before{
  content:"";
  position:absolute;
  inset:-160px auto auto -160px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at 30% 30%, rgba(13,161,190,.18), transparent 60%);
}
.glassPanel::after{
  content:"";
  position:absolute;
  inset:auto -160px -160px auto;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(243,154,30,.16), transparent 62%);
}

.tagPill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.7);
  font-weight: 900;
  color: rgba(15,23,42,.85);
}

/* Stats */
.statCard{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 20px;
  padding: 16px 16px;
  box-shadow: 0 18px 45px rgba(2,6,23,.06);
  position: relative;
  overflow:hidden;
}
.statTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.statBadge{
  font-weight: 900;
  font-size: .78rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
}
.statIcon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  animation: floaty 2.8s ease-in-out infinite;
}
.statIcon svg{ width: 22px; height: 22px; }
.statIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.statIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }
.statNum{ margin-top: 10px; font-size: 2rem; font-weight: 950; color:#0f172a; }
.statLbl{ margin-top: 2px; color: rgba(15,23,42,.70); font-weight: 800; }

.hoverLift{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hoverLift:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  border-color: rgba(13,161,190,.28);
}

.infoStrip{
  margin-top: 18px;
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.08);
  display:flex;
  gap:10px;
  align-items:flex-start;
  position: relative;
  z-index: 1;
}
.infoDot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(13,161,190,1), rgba(243,154,30,1));
  margin-top: 6px;
}

/* Image stack */
.imgStack{ position: relative; }
.imgCard{
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  position: relative;
  background:#fff;
}
.imgCard img{ width:100%; height:100%; object-fit: cover; transition: transform .9s ease; }
.imgShade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  opacity:.9;
}
.imgLabel{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff;
  display:flex; flex-direction:column;
  gap:2px;
}
.imgLabel b{ font-weight: 950; }
.imgLabel span{ opacity:.86; font-weight: 700; font-size:.92rem; }

.imgCard.big{ height: 360px; }
.imgRow{ margin-top: 14px; display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.imgCard.small{ height: 220px; }

.hoverTilt{ transition: transform .25s ease, box-shadow .25s ease; }
.hoverTilt:hover{ transform: translateY(-4px) rotate(-.2deg); }
.hoverTilt:hover img{ transform: scale(1.06); }

/* Floating chips */
.floatChip{
  position:absolute;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  background: rgba(7,11,18,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
  animation: floaty 3.2s ease-in-out infinite;
}
.floatChip.c1{ top: 14px; right: 16px; }
.floatChip.c2{ top: 120px; left: 16px; animation-delay: .4s; }
.floatChip.c3{ bottom: 96px; right: 22px; animation-delay: .8s; }

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* Tabs */
.tabsBox{
  border-radius: 26px;
  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  box-shadow: 0 24px 60px rgba(2,6,23,.08);
  padding: 18px;
}
.tabsHead{
  display:flex;
  gap:10px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 999px;
  padding: 8px;
}
.tabBtn{
  flex:1;
  padding: .55rem .8rem;
  border-radius: 999px;
  font-weight: 950;
  color: rgba(15,23,42,.78);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tabBtn:hover{ transform: translateY(-1px); }
.tabBtn.active{
  background: linear-gradient(135deg, rgba(13,161,190,1), rgba(243,154,30,1));
  color: #fff;
}

.tabsBody{ margin-top: 14px; }
.tabPanel{ display:none; animation: fadeUp .35s ease; }
.tabPanel.active{ display:block; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.panelTitle{ font-weight: 950; color:#0f172a; font-size: 1.15rem; }
.panelText{ margin-top: .45rem; color: rgba(15,23,42,.70); font-weight: 750; line-height: 1.7; }
.panelNote{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(13,161,190,.08);
  border: 1px solid rgba(13,161,190,.16);
  color: rgba(15,23,42,.78);
  font-weight: 800;
}

.chipGrid{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.7);
  font-weight: 900;
  color: rgba(15,23,42,.82);
}
.chip.cyan{ background: rgba(13,161,190,.10); border-color: rgba(13,161,190,.20); }
.chip.orange{ background: rgba(243,154,30,.10); border-color: rgba(243,154,30,.20); }

/* Method visuals */
.methodVisual{ display:grid; gap:12px; }
.methodMain{
  height: 420px;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  position:relative;
}
.methodMain img{ width:100%; height:100%; object-fit: cover; transition: transform .9s ease; }
.methodMain:hover img{ transform: scale(1.06); }
.imgLabel.light{ color:#fff; }

.methodThumbs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mThumb{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  transition: transform .2s ease, border-color .2s ease;
  background:#fff;
}
.mThumb img{ width:100%; height: 110px; object-fit: cover; }
.mThumb:hover{ transform: translateY(-3px); }
.mThumb.active{ border-color: rgba(13,161,190,.35); }

@media (max-width: 640px){
  .imgCard.big{ height: 300px; }
  .methodMain{ height: 320px; }
  .mThumb img{ height: 90px; }
}
/* HERO plus serré (services) */
.heroTight .heroInner{ padding-top: 64px; padding-bottom: 42px; }
.heroTight{ min-height: unset; }
.heroTight .heroSlider{ height: 62vh; min-height: 440px; }
@media (max-width: 640px){
  .heroTight .heroSlider{ height: 58vh; min-height: 420px; }
}

/* DETAILS cards + big icons */
.detailCard{
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  padding: 20px 20px;
  box-shadow: 0 18px 50px rgba(2,6,23,.07);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.detailCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(2,6,23,.12);
  border-color: rgba(13,161,190,.25);
}
.detailHead{ display:flex; gap:14px; align-items:center; }
.detailTitle{ font-weight: 950; color:#0f172a; font-size: 1.15rem; }
.detailSub{ margin-top: 2px; color: rgba(15,23,42,.68); font-weight: 750; }
.detailList{ margin-top: 14px; display:grid; gap:10px; color: rgba(15,23,42,.86); font-weight: 800; }
.bDot{
  width: 10px; height: 10px; border-radius: 999px;
  display:inline-block; margin-top: 6px;
  background: linear-gradient(135deg, rgba(13,161,190,1), rgba(243,154,30,1));
}

/* Big icon */
.svcBigIcon{
  width: 62px; height: 62px;
  border-radius: 20px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
  position: relative;
  overflow: hidden;
}
.svcBigIcon svg{ width: 30px; height: 30px; }
.svcBigIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.svcBigIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }
.detailCard:hover .svcBigIcon{ transform: translateY(-2px); transition: transform .2s ease; }

/* SVG stroke animation */
.draw{
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawLine 1.1s ease forwards;
}
.detailCard:hover .draw{ animation-duration: .9s; }
@keyframes drawLine{
  to{ stroke-dashoffset: 0; }
}

/* Tools section */
.toolGrid{ display:grid; gap:14px; }
.toolCard{
  display:flex; gap:12px; align-items:flex-start;
  padding: 16px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 16px 40px rgba(2,6,23,.06);
}
.toolIcon{
  width: 48px; height: 48px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  animation: floaty 2.8s ease-in-out infinite;
}
.toolIcon svg{ width: 24px; height: 24px; }
.toolIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.toolIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }

.toolTitle{ font-weight: 950; color:#0f172a; }
.toolText{ margin-top: 2px; color: rgba(15,23,42,.70); font-weight: 750; line-height: 1.6; }

.toolVisual{
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  position: relative;
  height: 420px;
  background:#fff;
}
.toolVisual img{ width:100%; height:100%; object-fit: cover; transition: transform .9s ease; }
.toolVisual:hover img{ transform: scale(1.06); }
.toolLabel{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff; display:flex; flex-direction:column; gap:2px;
}
.toolLabel b{ font-weight: 950; }
.toolLabel span{ opacity:.86; font-weight: 700; font-size:.92rem; }

.miniImg{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
  height: 140px;
  background:#fff;
}
.miniImg img{ width:100%; height:100%; object-fit: cover; transition: transform .9s ease; }
.miniImg:hover img{ transform: scale(1.06); }

.hoverLift{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hoverLift:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(2,6,23,.10);
  border-color: rgba(13,161,190,.28);
}
.hoverTilt{ transition: transform .25s ease, box-shadow .25s ease; }
.hoverTilt:hover{ transform: translateY(-4px) rotate(-.2deg); }

.floatChip{
  position:absolute;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  background: rgba(7,11,18,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(2,6,23,.18);
  animation: floaty 3.2s ease-in-out infinite;
}
.floatChip.c1{ top: 14px; right: 16px; }
.floatChip.c2{ top: 120px; left: 16px; animation-delay: .4s; }
.floatChip.c3{ bottom: 96px; right: 22px; animation-delay: .8s; }

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* Steps */
.stepCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 24px;
  padding: 18px 18px;
  box-shadow: 0 18px 50px rgba(2,6,23,.07);
}
.stepNum{
  font-weight: 950;
  letter-spacing: .08em;
  color: rgba(15,23,42,.55);
}
.stepTitle{ margin-top: 8px; font-weight: 950; color:#0f172a; }
.stepText{ margin-top: 4px; color: rgba(15,23,42,.70); font-weight: 750; line-height: 1.6; }

@media (max-width: 640px){
  .toolVisual{ height: 320px; }
  .miniImg{ height: 110px; }
}
/* ==============================
   FIX: HERO qui déborde / chevauche services
   ============================== */

/* Le hero ne doit jamais "déborder" visuellement */
.hero{ position: relative; overflow: hidden; }

/* Le slider doit rester dans le hero */
.heroSlider{ position:absolute; inset:0; z-index:0; }
.heroInner{ position: relative; z-index: 2; }

/* Overlay plus propre (moins "dégradé facon") */
.heroOverlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(900px 420px at 12% 20%, rgba(13,161,190,.22), transparent 60%),
    radial-gradient(900px 420px at 85% 75%, rgba(243,154,30,.18), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.35) 0%, rgba(2,6,23,.45) 65%, rgba(2,6,23,.40) 100%);
}

/* Bande défilante hors hero = séparation nette */
.brandBandStandalone{
  position: relative;
  z-index: 5;
  margin-top: -18px;           /* effet "collé" au hero mais sans chevauchement */
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 50px rgba(2,6,23,.12);
}

/* Pour être sûr que la section services commence bien après */
.servicesLight{
  position: relative;
  z-index: 1;
  padding-top: 4.5rem;         /* un peu d'air */
}

/* HERO plus serré (si tu utilises heroTight) */
.heroTight .heroInner{ padding-top: 58px; padding-bottom: 34px; }
.heroTight .heroSlider{ height: 58vh; min-height: 420px; }
@media (max-width: 640px){
  .heroTight .heroSlider{ height: 54vh; min-height: 400px; }
  .brandBandStandalone{ margin-top: -14px; }
}
/* Approche: icônes + badge */
.stepTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.stepIcon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
  position: relative;
  overflow: hidden;
  animation: floaty 3.1s ease-in-out infinite;
}
.stepIcon svg{ width: 28px; height: 28px; }

.stepIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.stepIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }

.stepBadge{
  font-weight: 950;
  letter-spacing: .08em;
  color: rgba(15,23,42,.65);
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
  padding: .35rem .6rem;
  border-radius: 999px;
}

/* Boost hover */
.stepCard:hover .stepIcon{
  transform: translateY(-2px);
  transition: transform .2s ease;
}
/* REFERENCES */
.refCollage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.refCollage .refImg{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  height: 190px;
  background:#fff;
}
.refCollage .refImg:nth-child(1){ grid-column: 1 / -1; height: 240px; }
.refCollage img{ width:100%; height:100%; object-fit:cover; transition: transform .9s ease; }
.refCollage .refImg:hover img{ transform: scale(1.06); }

.kpiWhite{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 20px;
  padding: 14px 12px;
  box-shadow: 0 16px 40px rgba(2,6,23,.06);
}
.kpiNum2{ font-weight: 950; font-size: 1.25rem; color:#0f172a; }
.kpiLbl2{ margin-top: 2px; color: rgba(15,23,42,.65); font-weight: 800; font-size: .9rem; }

.refFilters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.refFilterBtn{
  padding: .55rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  font-weight: 900;
  color: rgba(15,23,42,.85);
  box-shadow: 0 14px 35px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.refFilterBtn:hover{ transform: translateY(-2px); box-shadow: 0 22px 55px rgba(2,6,23,.10); }
.refFilterBtn.active{
  background: linear-gradient(135deg, rgba(13,161,190,.20), rgba(243,154,30,.16));
  border-color: rgba(13,161,190,.28);
}

.refGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px){ .refGrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .refGrid{ grid-template-columns: 1fr; } }

.refCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  padding: 18px 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.07);
  position: relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.refCard:before{
  content:"";
  position:absolute; inset:-80px -80px auto auto;
  width: 200px; height:200px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(13,161,190,.20), transparent 60%);
  transform: rotate(12deg);
}
.refCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(2,6,23,.12);
  border-color: rgba(13,161,190,.25);
}
.refTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.refTag{
  font-weight: 950;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(2,6,23,.08);
}
.refYear{ color: rgba(15,23,42,.60); font-weight: 900; }

.refTitle{ margin-top: 12px; font-weight: 950; color:#0f172a; font-size: 1.1rem; position:relative; z-index:1; }
.refText{ margin-top: 6px; color: rgba(15,23,42,.70); font-weight: 800; line-height: 1.6; position:relative; z-index:1; }

.refMeta{ margin-top: 12px; display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
.refChip{
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.08);
  background: #fff;
  font-weight: 900;
  color: rgba(15,23,42,.80);
}

/* pop effect after filter */
.popIn{ animation: popIn .32s ease both; }
@keyframes popIn{
  from{ opacity: .6; transform: translateY(8px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Domaines */
.scopeCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 24px;
  padding: 18px 18px;
  box-shadow: 0 18px 50px rgba(2,6,23,.07);
}
.scopeIcon{
  width: 56px; height:56px;
  border-radius: 18px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
  margin-bottom: 12px;
  animation: floaty 3.1s ease-in-out infinite;
}
.scopeIcon svg{ width: 28px; height: 28px; }
.scopeIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.scopeIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }
.scopeTitle{ font-weight: 950; color:#0f172a; }
.scopeText{ margin-top: 4px; color: rgba(15,23,42,.70); font-weight: 800; line-height:1.6; }
/* CONTACT cards */
.contactCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  padding: 18px 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.07);
}
.contactIcon{
  width: 56px; height:56px;
  border-radius: 18px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
  margin-bottom: 12px;
  animation: floaty 3.1s ease-in-out infinite;
}
.contactIcon svg{ width: 28px; height: 28px; }
.contactIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.contactIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }

.contactTitle{ font-weight: 950; color:#0f172a; font-size: 1.1rem; }
.contactText{ margin-top: 6px; color: rgba(15,23,42,.78); font-weight: 850; line-height: 1.7; }
.contactLink{ font-weight: 950; color: rgba(15,23,42,.92); }
.contactLink:hover{ text-decoration: underline; }

/* Form */
.formCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 28px;
  padding: 22px 22px;
  box-shadow: 0 22px 60px rgba(2,6,23,.08);
}
.formLbl{
  display:block;
  font-weight: 950;
  color: rgba(15,23,42,.88);
  margin-bottom: 6px;
}
.formInput, .formTextarea{
  width:100%;
  background: #fff;
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 850;
  color: rgba(15,23,42,.90);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.formTextarea{ padding: 12px 14px; }
.formInput:focus, .formTextarea:focus{
  border-color: rgba(13,161,190,.35);
  box-shadow: 0 0 0 4px rgba(13,161,190,.18);
  transform: translateY(-1px);
}

/* Map */
.mapCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 22px 60px rgba(2,6,23,.08);
  overflow:hidden;
}
.mapTop{ margin-bottom: 10px; }
.mapTitle{ font-weight: 950; color:#0f172a; font-size: 1.1rem; }
.mapSub{ color: rgba(15,23,42,.65); font-weight: 850; margin-top: 2px; }
.mapFrame{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  height: 360px;
}
.mapFrame iframe{
  width:100%;
  height:100%;
  border:0;
}

.miniAction{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  font-weight: 950;
  background:#fff;
  box-shadow: 0 14px 35px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.miniAction:hover{ transform: translateY(-2px); box-shadow: 0 22px 55px rgba(2,6,23,.10); }

@media (max-width: 640px){
  .mapFrame{ height: 280px; }
}
/* Partenaires - version logos */
.partnerTrackLogos{
  display:flex;
  align-items:center;
  gap:16px;
  width:max-content;
}

/* Un "badge" logo */
.partnerLogoItem{
  width: 170px;                /* ajuste si tu veux plus grand/petit */
  height: 78px;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 18px 45px rgba(2,6,23,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

.partnerLogoItem:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 
/* PROCESS page extras */
.procCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  padding: 18px 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.07);
}
.procIcon{
  width: 56px; height:56px;
  border-radius: 18px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
  margin-bottom: 12px;
  animation: floaty 3.1s ease-in-out infinite;
}
.procIcon svg{ width: 28px; height: 28px; }
.procIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.procIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }
.procTitle{ font-weight: 950; color:#0f172a; font-size: 1.1rem; }
.procText{ margin-top: 6px; color: rgba(15,23,42,.72); font-weight: 850; line-height: 1.7; }

.procHint{
  margin-top: 14px;
  color: rgba(15,23,42,.65);
  font-weight: 900;
  font-size: .95rem;
}

.procMiniStats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.miniKpi{
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 18px;
  padding: 10px 12px;
}
.miniKpi b{ display:block; font-weight: 950; color:#0f172a; }
.miniKpi span{ display:block; margin-top: 2px; font-weight: 900; color: rgba(15,23,42,.65); font-size:.9rem; }

/* Livrables */
.deliverCard{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 26px;
  padding: 18px 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.07);
}
.deliverHead{ display:flex; align-items:center; gap:12px; }
.deliverIcon{
  width: 52px; height:52px;
  border-radius: 18px;
  display:grid; place-items:center;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 35px rgba(2,6,23,.08);
  animation: floaty 3.1s ease-in-out infinite;
}
.deliverIcon svg{ width: 26px; height: 26px; }
.deliverIcon.cyan{ background: rgba(13,161,190,.12); color: rgba(15,23,42,.95); }
.deliverIcon.orange{ background: rgba(243,154,30,.12); color: rgba(15,23,42,.95); }
.deliverTitle{ font-weight: 950; color:#0f172a; font-size: 1.05rem; }
.deliverText{ margin-top: 10px; color: rgba(15,23,42,.72); font-weight: 850; line-height: 1.7; }

/* Outils */
.toolImgCard{
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 22px 60px rgba(2,6,23,.10);
  background:#fff;
}
.toolImgCard img{ width:100%; height: 420px; object-fit: cover; }
@media (max-width: 640px){ .toolImgCard img{ height: 320px; } }

.toolList{ display:flex; flex-wrap:wrap; gap:10px; }
.toolChip{
  padding: .55rem .9rem;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(2,6,23,.10);
  font-weight: 950;
  color: rgba(15,23,42,.85);
  box-shadow: 0 14px 35px rgba(2,6,23,.06);
}

/* FAQ */
.faqWrap{ display:grid; gap: 12px; }
.faqItem{
  background:#fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,.06);
  overflow:hidden;
}
.faqBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px;
  font-weight: 950;
  color: #0f172a;
}
.faqIcon{
  width: 34px; height:34px;
  border-radius: 999px;
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(2,6,23,.08);
  display:grid; place-items:center;
  font-weight: 950;
}
.faqPanel{
  padding: 0 16px 14px 16px;
  color: rgba(15,23,42,.72);
  font-weight: 850;
  line-height: 1.7;
  max-height: 0;
  overflow:hidden;
  transition: max-height .28s ease;
}
.faqItem.open .faqPanel{ max-height: 220px; }
.faqItem.open .faqIcon{ transform: rotate(45deg); transition: transform .2s ease; }
 <!-- Switch FR/EN (Google Translate) -->
<div class="langPill" aria-label="Langue">
  <button type="button" class="langBtn active" data-gt="fr">FR</button>
  <span class="langSep">|</span>
  <button type="button" class="langBtn" data-gt="en">EN</button>
</div>

<!-- Google Translate mount (on le garde discret) -->
<div id="google_translate_element" class="gtMount"></div>

/* Topbar: empêcher le passage en colonne */
.topbarRight{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

/* Le switch FR/EN toujours horizontal */
.langPill{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-wrap: nowrap !important;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

/* Boutons: pas de retour à la ligne */
.langBtn, .langSep{
  display:inline-flex;
  align-items:center;
  white-space: nowrap;
}

/* Si jamais un élément google se glisse et casse le layout */
#google_translate_element,
#google_translate_element *{
  white-space: nowrap !important;
}

/* Le widget reste invisible et ne prend pas de place */
.gtMount{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Optionnel: réduire un peu l'espace si écran "juste" */
@media (max-width: 1024px){
  .topbarRight{ gap: 8px; }
  .langPill{ padding: 5px 8px; gap: 8px; }
  .langBtn{ padding: 4px 8px; }
}
/* --- IMPORTANT: le widget ne doit JAMAIS influencer le topbar --- */
.gtMount{
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cache le texte "Traduit par Google", le logo et les liens */
.goog-te-gadget,
.goog-te-gadget span,
.goog-te-gadget img,
.goog-logo-link,
.goog-te-gadget-icon{
  display: none !important;
}

/* Parfois Google met un cadre en haut */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }

/* Le switch reste horizontal */
.topbarRight{ display:flex; align-items:center; flex-wrap:nowrap !important; white-space:nowrap; }
.langPill{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
/* Topbar reste en une seule ligne */
.topbarRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Switch toujours horizontal */
.langPill{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.langBtn{
  font-weight: 950;
  color: rgba(255,255,255,.88);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.langBtn.active{ background: rgba(255,255,255,.18); color:#fff; }
.langSep{ color: rgba(255,255,255,.55); font-weight: 900; }

/* Widget Google Translate : hors écran (donc ne casse jamais le topbar) */
.gtMount{
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Supprime la ligne "Traduit par Google" + logo */
.goog-te-gadget,
.goog-te-gadget * ,
.goog-logo-link,
.goog-te-gadget-icon{
  display:none !important;
}

/* Ne jamais cacher le switch */
.langPill{ display:inline-flex !important; flex-direction:row !important; align-items:center; gap:10px; }
.langBtn{ display:inline-flex !important; align-items:center; }
.langSep{ display:inline-flex !important; }

/* Widget Google : hors écran (ne casse jamais le layout) */
#google_translate_element.gtMount{
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cache "Traduit par Google" UNIQUEMENT dans le widget */
#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-gadget * ,
#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget-icon{
  display: none !important;
}

/* Cache la barre Google en haut si elle s'affiche */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
/* Empêche le topbar de casser la ligne */
.topbarRight{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Icônes langues */
.langIcons{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.langIconBtn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.langIconBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.langIconBtn.is-active{
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.35);
}

.langDot{
  font-weight: 950;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  letter-spacing: .4px;
}

/* --- Google Translate: widget hors écran (mais actif) --- */
#google_translate_element.gtMount{
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cache “Fourni par Google Traduction” seulement dans le widget */
#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-gadget * ,
#google_translate_element .goog-logo-link,
#google_translate_element img,
#google_translate_element .goog-te-gadget-icon{
  display:none !important;
}

/* Enlever la barre google si elle apparaît */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }
#goog-gt-tt, .goog-te-balloon-frame{ display:none !important; }
.catChip{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  font-size:13px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.catChip:hover{ transform: translateY(-1px); background: rgba(15,23,42,.03); }
.catChip.is-active{
  background: rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.18);
}
.badgeSoft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:900;
}
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
/* Reading progress bar */
.readBar{
  position: sticky;
  top: 0;
  z-index: 60;
  height: 4px;
  background: rgba(15,23,42,.06);
}
.readBar span{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(15,23,42,.85));
}

/* Article card */
.articleCard{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  padding: 26px;
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}
.articleMeta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.metaChip{
  font-size:12px;
  font-weight:900;
  color:#0f172a;
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  padding:6px 10px;
  border-radius:999px;
}

/* Prose styling */
.prose{ color:#0f172a; }
.prose p{ color: rgba(15,23,42,.78); line-height:1.8; margin: 12px 0; }
.prose h2{ font-size: 22px; font-weight: 950; margin-top: 22px; color:#0f172a; }
.prose h3{ font-size: 17px; font-weight: 950; margin-top: 16px; color:#0f172a; }
.prose ul, .prose ol{ margin: 10px 0 10px 18px; color: rgba(15,23,42,.78); }
.prose li{ margin: 8px 0; }
.prose b{ color:#0f172a; }
.prose a{ text-decoration: underline; font-weight: 800; }

/* Callout */
.callout{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  padding: 16px;
  margin: 16px 0;
}
.calloutTitle{ font-weight: 950; color:#0f172a; margin-bottom:6px; }

/* Mini cards */
.miniCard{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(2,6,23,.05);
}
.miniCardTitle{ font-weight: 950; color:#0f172a; }
.miniCardText{ margin-top:6px; color: rgba(15,23,42,.75); }

/* Quote */
.quoteBox{
  border-radius: 22px;
  background: #0f172a;
  color: #fff;
  padding: 18px;
  margin: 18px 0;
}
.quoteBox p{ color: rgba(255,255,255,.92); margin:0; font-weight: 800; line-height:1.7; }
.quoteBy{ margin-top: 10px; opacity:.85; font-weight: 900; }

/* Checklist */
.checkGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 640px){
  .checkGrid{ grid-template-columns: 1fr; }
}
.checkItem{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  padding: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.80);
}
.checkDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.75);
}

/* Inline CTA */
.ctaInline{
  margin-top: 18px;
  border-radius: 20px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.10);
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ctaInlineTitle{ font-weight: 950; color:#0f172a; }
.ctaInlineText{ color: rgba(15,23,42,.75); margin-top: 4px; }

/* Prev/Next */
.navPost{
  display:block;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background:#fff;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(2,6,23,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.navPost:hover{ transform: translateY(-2px); box-shadow: 0 16px 35px rgba(2,6,23,.08); }
.navSmall{ display:block; font-size:12px; font-weight: 950; color: rgba(15,23,42,.55); }
.navTitle{ display:block; margin-top:6px; font-weight: 950; color:#0f172a; }

/* Sidebar cards */
.sideCard{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background:#fff;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(2,6,23,.05);
}
.sideTitle{ font-weight: 950; color:#0f172a; margin-bottom: 10px; }
.sideGradient{
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(15,23,42,.78));
  border-color: rgba(255,255,255,.12);
}

/* TOC */
.toc{ display:flex; flex-direction:column; gap: 8px; }
.tocLink{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
  color: rgba(15,23,42,.78);
  font-weight: 900;
  transition: background .2s ease, transform .2s ease;
}
.tocLink:hover{ background: rgba(15,23,42,.06); transform: translateY(-1px); }
.tocLink.is-active{
  background: rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.14);
  color:#0f172a;
}
.tocSub{ margin-left: 10px; font-size: 13px; }

/* Recent */
.recentItem{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  transition: transform .2s ease, background .2s ease;
}
.recentItem:hover{ transform: translateY(-1px); background: rgba(15,23,42,.05); }
.recentImg{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  flex: 0 0 auto;
}
.recentImg img{ width:100%; height:100%; object-fit:cover; }
.recentT{ font-weight: 950; color:#0f172a; line-height:1.2; }
.recentD{ margin-top: 4px; font-size: 12px; font-weight: 900; color: rgba(15,23,42,.55); }

/* Chips */
.chipMini{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  font-weight: 950;
  color: rgba(15,23,42,.85);
}

/* Share buttons */
.shareBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight: 950;
  backdrop-filter: blur(10px);
  transition: transform .2s ease, background .2s ease;
}
.shareBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
.shareIco{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 950;
}