/* Passe mobile — Home V5 · Impulsion
   Le mobile passe en premier : plein écran, gestes, contact toujours à portée de pouce. */

/* ---------- Bouton de contact fixe (mobile) ---------- */
.m-sticky { display: none; }
@media (max-width: 640px) {
  .m-sticky {
    position: fixed; left: 12px; right: 12px; z-index: 90;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 18px; min-height: 56px;
    border-radius: 16px;
    background: rgba(12, 12, 13, .92); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
    transform: translateY(calc(100% + 24px));
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
  }
  .m-sticky.is-on { transform: none; }
  .m-sticky__text { flex: 1; min-width: 0; }
  .m-sticky__dot {
    position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7ad17a;
  }
  .m-sticky__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #7ad17a;
    animation: m-ping 2.2s ease-out infinite;
  }
  .m-sticky__arrow {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; background: #fff; color: #0c0c0d;
  }
  .m-sticky:active { scale: .97; transition: scale .08s ease-out, transform .55s cubic-bezier(.2, .8, .2, 1); }
  .m-sticky { transition: transform .55s cubic-bezier(.2, .8, .2, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1); }
}

/* ---------- Hero plein écran : l'image respire en haut, le texte se pose en bas ---------- */
@media (max-width: 640px) {
  .hero { min-height: 100svh; justify-content: flex-end; }
  .hero__bg { object-position: 64% 50%; }
  .hero__veil {
    background: linear-gradient(180deg,
      rgba(20, 17, 15, .55) 0%, rgba(20, 17, 15, .22) 18%,
      rgba(20, 17, 15, .68) 46%, rgba(20, 17, 15, .92) 100%);
  }
  .hero__content { padding-top: 104px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .hero__text { gap: 18px; }
  .hero__ctas .btn { min-height: 52px; }
}

/* ---------- Bandeau logos : plus serré, plus de logos à l'écran ---------- */
@media (max-width: 640px) {
  .logos__inner { padding-block: 36px 40px; gap: 20px; }
  .m-marquee .logos__list.is-marquee { gap: 36px; animation-duration: 22s; }
  .m-marquee .logos__item { width: 84px; height: 34px; opacity: .9; }
  @keyframes m-marquee { to { transform: translateX(calc(-50% - 18px)); } }
}

/* ---------- Gestes : appui visible sur tout ce qui se touche (30.09.2026) ----------
   L'élément s'enfonce vite (0,08 s) et revient avec un léger rebond : sensation d'objet physique, jamais saccadée.
   On anime « scale » (propriété indépendante) : aucun conflit avec les transform pilotés par GSAP. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="tab"] { touch-action: manipulation; }
@media (hover: none) {
  .preuves__card, .resultats__carte, .secteurs__card, .blog__feature, .blog__card,
  .expertises__card, .facons__carte, .partenaires__tile, .equipe__membre, .srv-case, .srv-autre, .lx-card, .lx-group,
  .zone-service, .nf-link, .faq__q, .methode__acc, .nav-mobile__link, .nav-mobile__row, .lx-pill, .lx-view__btn {
    transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease, box-shadow .3s ease;
  }
  .btn { transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, border-color .2s ease, box-shadow .3s ease; }
  .preuves__card:active, .resultats__carte:active, .secteurs__card:active, .blog__feature:active, .blog__card:active,
  .expertises__card:active, .facons__carte:active, .partenaires__tile:active, .equipe__membre:active, .srv-case:active,
  .lx-card:active, .lx-group:active, .zone-service:active, .nf-link:active {
    scale: .975; transition-duration: .08s; transition-timing-function: ease-out;
  }
  .btn:active, .srv-autre:active, .faq__q:active, .methode__acc:active, .nav-mobile__link:active, .nav-mobile__row:active,
  .lx-pill:active, .lx-view__btn:active {
    scale: .96; transition-duration: .08s; transition-timing-function: ease-out;
  }
}

/* ---------- Expertises : sur mobile, l'animation est cadrée plus près (plus lisible) ---------- */
@media (max-width: 640px) {
  .expertises__visuel--motion, .expertises__visuel--motion.expertises__visuel--haut { aspect-ratio: 1.1; }
  .expertises__video { object-fit: cover; }
}

/* ---------- Carrousels : la carte au centre prend le devant ---------- */
@media (max-width: 640px) {
  .m-carousel > * { transition: scale .12s linear; transform-origin: 50% 60%; }
}

/* ---------- Menu mobile : rideau, sous-menus fluides ---------- */
.nav-mobile { will-change: clip-path; }
.nav-mobile__sub.is-animating { overflow: hidden; }
.nav-mobile__sign::before { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav-mobile__link[aria-expanded="true"] .nav-mobile__sign::before { transform: rotate(180deg); }
.nav-mobile__cta { position: sticky; bottom: 0; box-shadow: 0 24px 0 24px var(--ink-2), 0 -28px 24px -12px var(--ink-2); }
.nav-mobile__close { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.nav-mobile__close:active { transform: rotate(90deg) scale(.9); }

/* ---------- Menus déroulants desktop : ouverture plus ample ---------- */
@media (min-width: 1025px) {
  .nav__panel { transition: opacity .28s cubic-bezier(.2, .8, .2, 1), transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s; transform-origin: 50% 0; }
  .nav__item:not(.is-open) .nav__panel { transform: translateY(-10px) scale(.98); }
  .nav__item.is-open .nav__caret { transform: rotate(180deg); }
  .nav__feature { transition: background-color .2s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
  .nav__feature:hover { transform: translateY(-2px); }
  .nav__row .nav__tile { transition: background-color .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
  .nav__row:hover .nav__tile { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .m-sticky, .m-carousel > *, .nav__panel { transition: none; }
  .m-sticky__dot::after { animation: none; }
}


/* ---------- Boutons sur mobile : à la taille de leur texte, jamais étirés (01.10.2026, demande de Diego) ----------
   L'alignement suit le bloc : à gauche ou centré (classes posées par js/main.js). Barre de contact fixe et menu exclus. */
@media (max-width: 640px) {
  .btn:not(.m-sticky *):not(.nav-mobile *):not(#nav *) {
    display: inline-flex !important; width: auto !important; max-width: 100%; flex: 0 0 auto !important;
    justify-content: center !important; gap: 12px;
  }
  .btn.btn--mc { align-self: center !important; justify-self: center !important; }
  .btn.btn--ms { align-self: flex-start !important; justify-self: start !important; }
}