/* spacing sections */
.logos,.about,.expertises,.stack,.projects,.press,.cta,.blog,.faq,.contact{
  padding: 42px 0;
}

.logos__row{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
  margin-top:14px;
}
.logoCard{
  height:48px;
  border-radius: 14px;
  border:1px solid #000;
  background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  color: #000;
  font-weight:700;
}

.about__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  align-items:start;
}
.stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.stat{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.stat__num{font-family:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-weight:800; font-size:28px}
.stat__label{color:var(--muted); font-size:13px; margin-top:6px}

.gridCards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.card{
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
.card p{margin:8px 0 0; color:var(--muted); line-height:1.55}
.card__link{display:inline-block; margin-top:14px; font-weight:700; opacity:.9}

.stack__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.miniCard{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.miniCard p{margin:8px 0 0; color:var(--muted); line-height:1.55}

.filters{display:flex; gap:8px; flex-wrap:wrap}
.filter{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,246,250,.86);
  font-weight:700;
  cursor:pointer;
}
.filter.is-active{
  background: rgba(124,92,255,.18);
  border-color: rgba(124,92,255,.25);
}

.projectGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.project{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.project__thumb{
  height: 210px;
  background:
    radial-gradient(600px 220px at 30% 30%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(600px 220px at 80% 70%, rgba(45,226,230,.16), transparent 55%),
    rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.project__meta{padding:16px}
.project__meta p{margin:8px 0 0; color:var(--muted)}

.press__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.pressCard{
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.pressCard__logo{
  height:34px;
  width: 120px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  color: rgba(244,246,250,.7);
  margin-bottom:10px;
}

.cta__box{
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(700px 260px at 90% 80%, rgba(45,226,230,.16), transparent 55%),
    rgba(255,255,255,.03);
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cta__actions{display:flex; gap:10px; flex-wrap:wrap}

.blog__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.post{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.post__thumb{
  height: 160px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.post__meta{padding:16px}
.post__meta p{margin:8px 0 0}

.faq__grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:18px;
}
.accordion details{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding:14px 16px;
  margin-bottom:10px;
}
.accordion summary{
  cursor:pointer;
  font-weight:800;
  font-family:"Space Grotesk";
}
.accordion p{margin:10px 0 0}

.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.contact__cards{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:16px}
.infoCard{
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.infoCard__title{font-weight:800; font-family:"Space Grotesk"; margin-bottom:6px}

.form{
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.form label{display:grid; gap:8px; font-size:13px; color: rgba(244,246,250,.82)}
.form input,.form select,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color: rgba(124,92,255,.45);
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}
.form .full{grid-column: 1 / -1}

@media (max-width:980px){
  .logos__row{grid-template-columns: repeat(3, 1fr)}
  .about__grid{grid-template-columns:1fr}
  .gridCards{grid-template-columns:1fr}
  .stack__grid{grid-template-columns: repeat(2,1fr)}
  .projectGrid{grid-template-columns:1fr}
  .press__grid{grid-template-columns:1fr}
  .blog__grid{grid-template-columns:1fr}
  .faq__grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
/* ---------------------------
   HERO: animations on load
---------------------------- */

/* Keyframes */
@keyframes slideFadeInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideFadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* État initial (avant activation) */
.hero .hero__content > * ,
.hero .hero__visual > * {
  opacity: 0;
}

/* Quand la page est "loaded" => on anime */
.hero.is-loaded .hero__content > * {
  animation: slideFadeInLeft 700ms ease-out forwards;
}

.hero.is-loaded .hero__visual > * {
  animation: slideFadeInRight 700ms ease-out forwards;
}

/* Stagger (gauche) */
.hero.is-loaded .hero__content > *:nth-child(1) { animation-delay: 80ms; }
.hero.is-loaded .hero__content > *:nth-child(2) { animation-delay: 160ms; }
.hero.is-loaded .hero__content > *:nth-child(3) { animation-delay: 240ms; }
.hero.is-loaded .hero__content > *:nth-child(4) { animation-delay: 320ms; }
.hero.is-loaded .hero__content > *:nth-child(5) { animation-delay: 400ms; }
.hero.is-loaded .hero__content > *:nth-child(6) { animation-delay: 480ms; }

/* Stagger (droite) */
.hero.is-loaded .hero__visual > *:nth-child(1) { animation-delay: 120ms; }
.hero.is-loaded .hero__visual > *:nth-child(2) { animation-delay: 220ms; }
.hero.is-loaded .hero__visual > *:nth-child(3) { animation-delay: 320ms; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .hero .hero__content > *,
  .hero .hero__visual > * {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}
/* ---------------------------
   ABOUT – background video
---------------------------- */
/* ---------------------------
   GLOBAL FIXED VIDEO BACKGROUND
---------------------------- */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -10;            /* derrière tout */
  overflow: hidden;
}

.site-bg__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Les sections passent au-dessus */
main, header, section, footer {
  position: relative;
  z-index: 1;
}

/* Sections transparentes */
section {
  background: transparent !important;
}
.reviews { padding: 64px 0; }
.reviews__head { max-width: 900px; margin: 0 auto 24px; }
.reviews__summary{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:14px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid rgba(0,0,0,.08); border-radius:16px;
  background:#fff;
}
.reviews__score{ font-size:28px; font-weight:800; }
.reviews__stars{ display:flex; gap:6px; font-size:18px; line-height:1; }

.star{ opacity:.25; }
.star.isOn{ opacity:1; }

.reviews__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px; margin-top:18px;
}
@media (max-width: 1100px){ .reviews__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 650px){ .reviews__grid{ grid-template-columns:1fr; } }

.reviewCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.reviewCard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.reviewCard__stars{ display:flex; gap:6px; font-size:16px; line-height:1; }

.reviewCard__badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
}
.reviewCard__title{ font-size:16px; margin:10px 0 6px; }
.reviewCard__text{ margin:0 0 10px; }
.reviewCard__meta{ margin:0; font-size:13px; }

.reviews__actions{ display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.whatsapp-float img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.whatsapp-float:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
.whatsapp-float::after {
  content: "Besoin d’aide ?";
  position: absolute;
  right: 70px;
  background: #111;
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: all 0.2s ease;
}

.whatsapp-float:hover::after {
  opacity: 1;
  transform: translateX(0);
}