/* ==========================================================================
   ASKOMM — surcharges personnalisées (chargé après pixelin.webflow.css)
   Tout ce qui modifie le template Pixelin vit ici, jamais dans le vendor.
   ========================================================================== */

/* --- Nav GSAP SplitText : force la visibilité (IX2 ne se déclenche pas en statique) ---
   Webflow SplitText encapsule chaque lettre dans un div.gsap avec overflow:hidden
   et opacity/transform initiaux → bloqué. On force tout visible. */
.nav-text .gsap,
.nav-text > div,
.nav-text > span {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  display: inline !important;
}

/* --- Navigation : burger réservé aux petits écrans -----------------------
   Sur desktop (>=992px) on masque le burger et on garde les liens inline.
   En dessous (<=991px) on masque les liens inline et seul le burger ouvre
   le menu plein écran. */
@media screen and (min-width: 992px) {
  .nav-menu-line-wrap {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .nav-menu-right-content-wrap {
    display: none;
  }
}

/* --- Section « Ils nous font confiance » (ex-award) : logos partenaires ----
   On garde la taille de titre d'origine Pixelin (pas de surcharge ici).
   On ne touche qu'aux logos : uniformisés en gris, couleur au survol. */
.award-list-wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1.75rem, 3vw, 3rem);
}
@media screen and (max-width: 991px) {
  .award-list-wrap {
    grid-template-columns: repeat(3, 1fr);
    row-gap: clamp(2rem, 5vw, 3rem);
  }
}
@media screen and (max-width: 479px) {
  .award-list-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
.award-item {
  width: 100%;
}
.award-image {
  max-height: 30px;
  max-width: clamp(95px, 15vw, 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .35s ease, filter .35s ease;
}
.award-item:hover .award-image {
  filter: none;
  opacity: 1;
}

/* --- Réalisations : marquee infini de couvertures (remplace le slider) ------
   Boucle sans couture : 2 jeux de cartes identiques + translateX(-50%).
   margin-right (pas gap) pour un défilement parfaitement continu.
   Animation CSS (compositor) -> jamais gelée après inactivité. */
.askomm-real-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.askomm-real-track {
  display: flex;
  width: max-content;
  animation: askomm-real-scroll 45s linear infinite;
}
.askomm-real-track:hover {
  animation-play-state: paused;
}
.askomm-real-card {
  flex: 0 0 auto;
  width: clamp(210px, 21vw, 300px);
  aspect-ratio: 4 / 5;
  margin-right: clamp(1rem, 2vw, 2rem);
  border-radius: var(--_radius---radius--xs, 12px);
  overflow: hidden;
}
.askomm-real-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes askomm-real-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .askomm-real-track { animation: none; }
}

/* --- Section CTA : overlay sombre + repositionnement contenu ---------------
   Overlay : assombrit la photo. IMPORTANT : pas de z-index sur .cta-content-wrap
   -> sinon on isole le calque et on casse le mix-blend-mode:difference du
   marquee. Le contenu reste au-dessus de l'overlay via l'ordre du DOM. */
.cta-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.42) 45%, rgba(0,0,0,.62));
  pointer-events: none;
}
/* Version services (in-v2) : overlay plus dense pour lisibilité maximale */
.cta-image-wrap.in-v2 {
  position: relative;
}
.cta-image-wrap.in-v2::after {
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.78) 100%);
}
/* rapprocher le texte du marquee du bouton (l'écart d'origine est énorme) */
.cta-bottom-content {
  grid-row-gap: clamp(2rem, 5vw, 3.5rem);
}
@media screen and (min-width: 992px) {
  .cta-content-wrap {
    margin-top: 64px;
    margin-bottom: 80px;
  }
}

/* --- Témoignages : avis clients en masonry décalé (compact, sans hover) ----- */
/* Titre centré comme les autres sections */
.testimonial-top-content {
  text-align: center;
  align-items: center;
  justify-content: center;
}
/* Titre à la même taille que les autres sections (h2 au lieu de h3) */
.testimonial-title {
  font-size: var(--_typography---h2);
  line-height: var(--_typography---h2-line-height);
}
/* Bande horizontale infinie (marquee) : beaucoup d'avis qui défilent en continu.
   Boucle sans couture : 2 jeux de cartes identiques + translateX(-50%). */
.askomm-review-marquee {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 1.4vw, 1.4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.askomm-review-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: askomm-review-scroll 60s linear infinite;
}
.askomm-review-track:hover { animation-play-state: paused; }
/* 2e bande : défile en sens inverse (vers la droite) */
.askomm-review-track--rev { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .askomm-review-track { animation: none; }
}
@keyframes askomm-review-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.askomm-review {
  flex: 0 0 auto;
  width: clamp(260px, 24vw, 315px);
  margin-right: clamp(.9rem, 1.4vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: #f4f4f3;
  border-radius: 14px;
  padding: clamp(1rem, 1.3vw, 1.4rem);
}
.askomm-review-stars {
  font-size: .85rem;
  letter-spacing: 2px;
  color: #f5a623;
  line-height: 1;
}
.askomm-review-stars .off { color: rgba(14, 14, 14, .18); }
.askomm-review-text {
  margin: 0;
  color: #33414f;
  font-size: .9rem;
  line-height: 1.5;
}
.askomm-review-author {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding-top: .5rem;
}
.askomm-review-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0e0e0e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .5px;
}
.askomm-review-name { font-weight: 600; color: #0e0e0e; font-size: .9rem; line-height: 1.2; }
.askomm-review-role { color: #5b6670; font-size: .78rem; line-height: 1.2; }

/* --- Footer : grand wordmark ASKOMM (repris du Next.js) -------------------- */
.askomm-footer-wordmark {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 700;
  color: #ffffff;
  font-size: 16vw;
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}
/* Badge « Découvrir plus » : rotation CSS continue (immune au gel) */
@keyframes askomm-badge-spin { to { transform: rotate(360deg); } }
.footer-top-right-content-wrap .footer-image {
  animation: askomm-badge-spin 16s linear infinite;
  transform-origin: 50% 50%;
}

/* --- Hero : accroche FR sur une seule ligne (le texte FR est plus long que
   l'anglais d'origine, donc on réduit un peu la taille et on force nowrap) --- */
.header-text {
  white-space: nowrap;
  font-size: 7.2vw;
}

/* --- À propos : hero avec image de fond (repris du Next.js) --- */
.section-about-header .about-header-component {
  position: relative;
  overflow: hidden;
  height: 100vh;
  margin-left: var(--_gap-size---spacing-small);
  margin-right: var(--_gap-size---spacing-small);
  border-radius: var(--_radius---radius--xs);
}
.section-about-header .about-header-top-image-wrap {
  display: none;
}
.askomm-about-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.section-about-header .about-header-bottom-content-wrap {
  position: absolute;
  z-index: 3;
  bottom: 4.9vw;
  left: 1vw;
  right: 1vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  mix-blend-mode: exclusion;
}
.section-about-header .about-header-content {
  width: 100%;
}
.section-about-header .heading-style-h1.is-big-header {
  color: var(--_base-color---text-color--white);
  white-space: nowrap;
  font-size: 9.2vw;
  line-height: 100%;
  transform: none !important;
  opacity: 1 !important;
}
.section-about-header .about-header-divider,
.section-about-header .about-header-bottom-content {
  display: none;
}
@media screen and (max-width: 991px) {
  .section-about-header .about-header-component { height: 88vh; }
}
@media screen and (max-width: 600px) {
  .section-about-header .about-header-component { height: 68vh; }
}

/* --- À propos : « Notre histoire » (titre + texte + liste à puces ✓) --- */
.askomm-story-title {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: #102136;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}
.askomm-story-text {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.65;
  color: #33414f;
  margin: 0 0 1rem;
}
.askomm-story-list {
  list-style: none;
  margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.askomm-story-list li {
  position: relative;
  padding-left: 1.9rem;
  font-weight: 600;
  color: #102136;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
}
.askomm-story-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1f6feb;
  font-weight: 700;
}

/* --- À propos : logos de confiance réduits (petits, comme le template d'origine) --- */
.brand-logo {
  max-height: 22px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
}

/* --- Chiffres clés (portés du Next.js) --- */
.askomm-stats-title {
  text-align: center;
  margin: 0 0 clamp(2.5rem, 6vw, 5rem);
}
.askomm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
}
.askomm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.askomm-stat-num {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 600;
  color: var(--_base-color---text-color--black, #0e0e0e);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.askomm-stat-label {
  color: var(--_base-color---text-color--black-700, #5b6670);
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 22ch;
}
@media (max-width: 991px) {
  .askomm-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Accordéon : h2 "Notre / approche" décalé (approche aligné sur le "t" de Notre) --- */
.accord-indent {
  display: inline-block;
  padding-left: 1.6em;
}

/* --- Animation reveal au scroll (IntersectionObserver → .is-in) --- */
.askomm-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
.askomm-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .askomm-reveal { opacity: 1; transform: none; }
}
/* cascade des chiffres */
.askomm-stat.askomm-reveal:nth-child(2) { transition-delay: 0.06s; }
.askomm-stat.askomm-reveal:nth-child(3) { transition-delay: 0.12s; }
.askomm-stat.askomm-reveal:nth-child(4) { transition-delay: 0.18s; }
.askomm-stat.askomm-reveal:nth-child(5) { transition-delay: 0.24s; }
.askomm-stat.askomm-reveal:nth-child(6) { transition-delay: 0.30s; }
.askomm-stat.askomm-reveal:nth-child(7) { transition-delay: 0.36s; }
.askomm-stat.askomm-reveal:nth-child(8) { transition-delay: 0.42s; }

/* --- Page Réalisations : grille 3 colonnes, cartes portrait compactes -------- */
.section-project .project-list.is-project-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: clamp(1rem, 1.5vw, 2rem);
  grid-row-gap: clamp(2rem, 3vw, 3.5rem);
}
/* Image : ratio portrait fixe, object-fit crop */
.section-project .nav-works-image-wrap {
  aspect-ratio: 3 / 4;
  height: auto;
}
.section-project .works-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .section-project .project-list.is-project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .section-project .project-list.is-project-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   LOT 2 — Page Services (7 services) + Diffusion + Chiffres accueil
   =================================================================== */

/* --- Intro de la section services --- */
.askomm-svc-intro {
  max-width: 60ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
}

/* --- Liste des 7 services (rangées numérotées) --- */
.askomm-svc-list {
  display: flex;
  flex-direction: column;
}
.askomm-svc-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.75rem, 3.2vw, 2.75rem) 0;
  border-top: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
}
.askomm-svc-row:last-child {
  border-bottom: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
}
.askomm-svc-num {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--_base-color---text-color--black-700, #5b6670);
  letter-spacing: 0.04em;
}
.askomm-svc-head h3 {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.askomm-svc-tags span {
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.45em 0.8em;
  border: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
  border-radius: 999px;
  color: var(--_base-color---text-color--black-700, #5b6670);
  white-space: nowrap;
}
.askomm-svc-body p { margin: 0; }

@media (max-width: 767px) {
  .askomm-svc-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .askomm-svc-num { margin-bottom: -0.25rem; }
  .askomm-svc-head h3 { margin-bottom: 0.85rem; }
}

/* cascade légère des rangées de services */
.askomm-svc-row.askomm-reveal:nth-child(2) { transition-delay: 0.05s; }
.askomm-svc-row.askomm-reveal:nth-child(3) { transition-delay: 0.10s; }
.askomm-svc-row.askomm-reveal:nth-child(4) { transition-delay: 0.05s; }
.askomm-svc-row.askomm-reveal:nth-child(5) { transition-delay: 0.10s; }

/* --- Section Diffusion --- */
.askomm-diffusion-head {
  max-width: 64ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.askomm-diffusion-head .heading-style-h2 { margin-bottom: 1.25rem; }
.askomm-diffusion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.askomm-diffusion-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
  border-radius: 14px;
  background: var(--_base-color---background-color--white, #fff);
  height: 100%;
}
.askomm-diffusion-num {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--_base-color---text-color--black-700, #5b6670);
}
.askomm-diffusion-card h3 {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  margin: 0;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-diffusion-card p { margin: 0; }
.askomm-diffusion-note {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 14px;
  background: var(--_base-color---background-color--black-50, #f4f5f6);
}
.askomm-diffusion-note p { margin: 0; }
.askomm-diffusion-note-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-diffusion-card.askomm-reveal:nth-child(2) { transition-delay: 0.07s; }
.askomm-diffusion-card.askomm-reveal:nth-child(3) { transition-delay: 0.14s; }
.askomm-diffusion-card.askomm-reveal:nth-child(4) { transition-delay: 0.21s; }

@media (max-width: 991px) {
  .askomm-diffusion-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .askomm-diffusion-grid { grid-template-columns: 1fr; }
}

/* --- Chiffres clés accueil : variante 4 colonnes resserrée --- */
.askomm-stats-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .askomm-stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   LOT 3 — Notre méthode · Pourquoi nous choisir · Secteurs · Supports
   =================================================================== */
.askomm-method-head, .askomm-why-head, .askomm-sectors-head, .askomm-supports-head {
  max-width: 64ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.askomm-method-head .heading-style-h2,
.askomm-why-head .heading-style-h2,
.askomm-sectors-head .heading-style-h2,
.askomm-supports-head .heading-style-h2 { margin-bottom: 1.25rem; }

/* Bande tintée pour créer du rythme/profondeur */
.askomm-why { background: var(--_base-color---background-color--black-50, #f4f5f6); }

/* Cartes (méthode / pourquoi / supports) */
.askomm-method-step, .askomm-why-card, .askomm-supports-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
  border-radius: 14px;
  background: var(--_base-color---background-color--white, #fff);
  height: 100%;
}
.askomm-method-step h3, .askomm-why-card h3, .askomm-supports-card h3 {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  margin: 0;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-method-step p, .askomm-why-card p, .askomm-supports-card p { margin: 0; }
.askomm-method-num {
  font-family: var(--_typography---font-family--heading-font, "Manrope", sans-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--_base-color---text-color--black, #0e0e0e);
  margin-bottom: 0.25rem;
}

.askomm-method-grid,
.askomm-why-grid,
.askomm-supports-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.askomm-method-grid { grid-template-columns: repeat(4, 1fr); }
.askomm-why-grid,
.askomm-supports-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 991px) {
  .askomm-method-grid,
  .askomm-why-grid,
  .askomm-supports-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .askomm-method-grid,
  .askomm-why-grid,
  .askomm-supports-grid { grid-template-columns: 1fr; }
}

/* staggers */
.askomm-method-step.askomm-reveal:nth-child(2),
.askomm-why-card.askomm-reveal:nth-child(2),
.askomm-supports-card.askomm-reveal:nth-child(2) { transition-delay: 0.07s; }
.askomm-method-step.askomm-reveal:nth-child(3),
.askomm-why-card.askomm-reveal:nth-child(3),
.askomm-supports-card.askomm-reveal:nth-child(3) { transition-delay: 0.14s; }
.askomm-method-step.askomm-reveal:nth-child(4),
.askomm-why-card.askomm-reveal:nth-child(4),
.askomm-supports-card.askomm-reveal:nth-child(4) { transition-delay: 0.21s; }
.askomm-why-card.askomm-reveal:nth-child(5),
.askomm-supports-card.askomm-reveal:nth-child(5) { transition-delay: 0.10s; }
.askomm-why-card.askomm-reveal:nth-child(6),
.askomm-supports-card.askomm-reveal:nth-child(6) { transition-delay: 0.17s; }

/* Secteurs — étiquettes */
.askomm-sectors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.askomm-sectors-grid span {
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.85em 1.25em;
  border: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
  border-radius: 999px;
  color: var(--_base-color---text-color--black, #0e0e0e);
  background: var(--_base-color---background-color--white, #fff);
}

/* ===================================================================
   LOT 4 — Identité : logo ASKOMM + police d'affichage Poppins
   (Poppins = police officielle du logo ASKOMM)
   =================================================================== */
:root {
  --_typography---font-family--heading-font: "Poppins", "Manrope", sans-serif;
}

/* Marque dans la nav : capitales géométriques façon logo (anim. conservée) */
.nav-brand-text {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* Wordmark du footer : vrai logo ASKOMM (image blanche) */
.askomm-footer-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1240px;
}

/* ===================================================================
   LOT 4b — Retours équipe : plus de noir, logo plus présent
   =================================================================== */

/* Logo dans la nav (image officielle, robuste vs chargement police) */
.askomm-nav-logo {
  height: 1.35rem;
  width: auto;
  display: block;
}
@media (max-width: 991px) {
  .askomm-nav-logo { height: 1.2rem; }
}

/* Logo intégré dans un titre (ex. "ASKOMM en quelques chiffres") */
.askomm-inline-logo {
  height: 0.72em;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: 0.02em;
}

/* Sections sombres (rétablit le contraste / l'identité premium) */
.askomm-dark { background: #0b0b0b; }
.askomm-dark .heading-style-h2,
.askomm-dark h2,
.askomm-dark h3 { color: #ffffff; }
.askomm-dark p,
.askomm-dark .text-size-large,
.askomm-dark .text-size-regular,
.askomm-dark .text-size-small { color: #c7ccd1; }
.askomm-dark .text-color-black-700 { color: #c7ccd1 !important; }

/* méthode en sombre */
.askomm-dark .askomm-method-step {
  background: #151515;
  border-color: #2a2a2a;
}
.askomm-dark .askomm-method-num { color: #ffffff; }

/* chiffres en sombre */
.askomm-dark .askomm-stat-num { color: #ffffff; }
.askomm-dark .askomm-stat-label { color: #9aa3ab; }

/* Bloc de texte enrichi de la section Diffusion */
.askomm-diffusion-text {
  max-width: 70ch;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.askomm-diffusion-text p { margin: 0; }

/* Le losange accent chevauchait le logo image -> masqué pour un logo net */
.nav-brnad-logo-wrap .brand-star { display: none; }

/* ===================================================================
   LOT 4c — Accordéon FAQ autonome (indépendant de Webflow IX2)
   =================================================================== */
.faq-iteam.askomm-faq .faq-content-wrap { cursor: pointer; }
.faq-iteam.askomm-faq .faq-top-content { user-select: none; }

/* repli par défaut */
.faq-iteam.askomm-faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.55s cubic-bezier(0.2,0.6,0.2,1),
              opacity 0.4s ease,
              margin-top 0.4s ease;
}
/* ouvert */
.faq-iteam.askomm-faq.is-open .faq-answer {
  max-height: 60rem;
  opacity: 1;
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}
/* plusieurs paragraphes dans une réponse */
.faq-iteam.askomm-faq .faq-answer p + p { margin-top: 0.75rem; }

/* icône : rotation à l'ouverture */
.faq-iteam.askomm-faq .faq-icon-wrap { transition: transform 0.35s ease; }
.faq-iteam.askomm-faq.is-open .faq-icon-wrap { transform: rotate(135deg); }

/* ===================================================================
   LOT 5 — Enrichissement : CTA bannière · section humaine · frise projet
   =================================================================== */

/* --- Bannière CTA : sous-titre + description --- */
.askomm-cta-textblock {
  max-width: 64ch;
  margin: clamp(1rem, 2.5vw, 2rem) 0 0;
}
.askomm-cta-sub {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.askomm-cta-desc {
  color: #e7eaed;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Section « Plus qu'une agence, un partenaire » --- */
.askomm-partner-inner {
  max-width: 72ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.askomm-partner-inner .heading-style-h2 { margin-bottom: 0.5rem; }
.askomm-partner-inner p { margin: 0; }

/* --- Frise « Comment se déroule un projet ? » --- */
.askomm-process-head {
  max-width: 60ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.askomm-process-head .heading-style-h2 { margin-bottom: 1.25rem; }
.askomm-process-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
/* ligne verticale reliant les étapes */
.askomm-process-list::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--_base-color---border-color--black-100, #e5e7eb);
}
.askomm-process-step {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.askomm-process-marker {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  background: var(--_base-color---text-color--black, #0e0e0e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
}
.askomm-process-body { padding-top: 0.35rem; }
.askomm-process-body h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-process-body p { margin: 0; max-width: 60ch; }
.askomm-process-step.askomm-reveal:nth-child(2) { transition-delay: 0.05s; }
.askomm-process-step.askomm-reveal:nth-child(3) { transition-delay: 0.10s; }
.askomm-process-step.askomm-reveal:nth-child(4) { transition-delay: 0.15s; }
.askomm-process-step.askomm-reveal:nth-child(5) { transition-delay: 0.20s; }
.askomm-process-step.askomm-reveal:nth-child(6) { transition-delay: 0.25s; }

/* ===================================================================
   LOT B — Footer enrichi (maquette équipe) : desc · nav · infos ·
   bloc « Discutons » · rangée chiffres · grand logo · copyright
   =================================================================== */
.askomm-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1.4fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.askomm-footer-brand { display: flex; flex-direction: column; gap: 1rem; max-width: 34ch; }
.askomm-footer-brand p { margin: 0; }

.askomm-footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.askomm-footer-col-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.5rem;
}
.section-footer .footer-link { color: rgba(255,255,255,0.82); transition: color .25s ease; }
.section-footer .footer-link:hover { color: #fff; }
.section-footer .footer-link.is-static { color: rgba(255,255,255,0.55); cursor: default; }

/* bloc Discutons */
.askomm-footer-cta { display: flex; flex-direction: column; gap: 0.9rem; }
.askomm-footer-cta p { margin: 0; }
.askomm-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.85em 1.4em;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.askomm-footer-btn:hover { background: #fff; color: #0b0b0b; border-color: #fff; }
.askomm-footer-btn-arrow { transition: transform .25s ease; }
.askomm-footer-btn:hover .askomm-footer-btn-arrow { transform: translateX(3px); }

/* rangée chiffres */
.askomm-footer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.askomm-footer-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0 1rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.askomm-footer-stat:first-child { border-left: none; }
.askomm-footer-stat-num {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.askomm-footer-stat-label {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.6);
  max-width: 22ch;
}

/* copyright */
.askomm-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 991px) {
  .askomm-footer-top { grid-template-columns: 1fr 1fr; }
  .askomm-footer-stats { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .askomm-footer-stat:nth-child(3) { border-left: none; }
}
@media (max-width: 575px) {
  .askomm-footer-top { grid-template-columns: 1fr; }
  .askomm-footer-stats { grid-template-columns: 1fr 1fr; }
  .askomm-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   LOT C — Services en bandeaux pleine largeur (placeholders sobres),
   contenu en alternance gauche/droite (zigzag)
   =================================================================== */
.askomm-svc-list { display: block; }
.askomm-svc-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(300px, 36vw, 460px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.askomm-svc-band:first-child { border-top: none; }
.askomm-svc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.askomm-svc-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,11,0.9) 0%, rgba(11,11,11,0.55) 55%, rgba(11,11,11,0.3) 100%);
}
.askomm-svc-band:nth-child(even) .askomm-svc-bg::after {
  background: linear-gradient(270deg, rgba(11,11,11,0.9) 0%, rgba(11,11,11,0.55) 55%, rgba(11,11,11,0.3) 100%);
}
/* Placeholders dégradés sobres — remplacer par background-image quand les photos seront prêtes */
.svc-bg-1 { background-color:#0e1116; background-image:url(../images/services/svc-1.webp); }
.svc-bg-2 { background-color:#121017; background-image:url(../images/services/svc-2.webp); }
.svc-bg-3 { background-color:#0f1413; background-image:url(../images/services/svc-3.webp); }
.svc-bg-4 { background-color:#14110e; background-image:url(../images/services/svc-4.webp); }
.svc-bg-5 { background-color:#101012; background-image:url(../images/services/svc-5.webp); }
.svc-bg-6 { background-color:#0e1014; background-image:url(../images/services/svc-6.webp); }
.svc-bg-7 { background-color:#0f0e12; background-image:url(../images/services/svc-7.webp); }

.askomm-svc-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1392px;
  margin-inline: auto;
  padding: clamp(2.5rem,5vw,4.5rem) clamp(20px,5vw,60px);
}
.askomm-svc-col {
  max-width: 640px;
  display: flex; flex-direction: column; gap: 1rem;
  color: #fff;
}
.askomm-svc-band:nth-child(even) .askomm-svc-col { margin-left: auto; }
.askomm-svc-num { font-family:"Poppins",sans-serif; font-weight:500; font-size:0.95rem; letter-spacing:0.06em; color:rgba(255,255,255,0.6); }
.askomm-svc-name { font-family:"Poppins",sans-serif; font-weight:600; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.1; margin:0; color:#fff; }
.askomm-svc-band .askomm-svc-tags span { border-color: rgba(255,255,255,0.32); color:#fff; background:transparent; }
.askomm-svc-desc { margin:0; max-width:62ch; font-size:1.02rem; line-height:1.65; color:rgba(255,255,255,0.85); }

@media (max-width: 575px) {
  .askomm-svc-band:nth-child(even) .askomm-svc-col { margin-left: 0; }
  .askomm-svc-band { min-height: clamp(260px, 62vw, 360px); }
}

/* Garde-fou anti-débordement horizontal (mobile/tablette) — sûr pour la nav
   sticky et les bandeaux services pleine largeur (= exactement 100vw). */
html, body { overflow-x: clip; }

/* Le footer hérite d'un grid-row-gap: 13vw (≈560px de vide) — neutralisé,
   l'espacement est géré par les paddings de chaque sous-bloc. */
.footer-component { grid-row-gap: 0; row-gap: 0; }
.askomm-footer-stats { padding: clamp(2rem,3.5vw,3rem) 0 clamp(1.25rem,2.5vw,2rem); }
.footer-brand-text-wrap { margin: 0; }
.askomm-footer-bottom { margin-top: clamp(0.5rem,1.5vw,1rem); }

/* ===================================================================
   Retours accueil : section « Plus qu'une agence » + CTA équilibré
   =================================================================== */

/* #1 — Section « Plus qu'une agence, un partenaire » : plus aérée */
.askomm-partner .padding-section-large {
  padding-top: clamp(4rem, 9vw, 8rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
}
.askomm-partner-inner {
  max-width: 56ch;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.askomm-partner-inner .heading-style-h2 { margin-bottom: clamp(1rem, 2.5vw, 2rem); }
.askomm-partner-inner p {
  line-height: 1.75;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  color: #c7ccd1;
}

/* #2 — Espace entre la section sombre et « Édition & Diffusion » (uniquement accueil) */
.section-service:not(.is-normal) { padding-top: clamp(3rem, 7vw, 7rem); }

/* #3-#5 — CTA : marquee en haut, texte + bouton en bas (plus de vide en bas,
   le texte ne couvre plus l'enseigne, bouton redescendu) */
.cta-content-wrap { justify-content: flex-end; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: 70px; margin-bottom: 70px; }
.cta-bottom-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.6rem);
}

/* Section « Plus qu'une agence » : mise en page éditoriale 2 colonnes
   (titre à gauche, texte à droite) — remplace le centrage trop serré */
.askomm-partner-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
}
.askomm-partner-title .heading-style-h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.05;
}
.askomm-partner-text {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: 0.4rem;
}
.askomm-partner-text p {
  margin: 0;
  line-height: 1.8;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  color: #c7ccd1;
  max-width: none;
}
@media (max-width: 767px) {
  .askomm-partner-inner { grid-template-columns: 1fr; gap: clamp(1.25rem,5vw,2rem); }
}

/* Section « Plus qu'une agence » : structure tête + grille (comme « Notre méthode ») */
.askomm-partner-inner { display: block; max-width: 1200px; margin-inline: auto; text-align: left; }
.askomm-partner-head { max-width: 64ch; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.askomm-partner-head .heading-style-h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.askomm-partner-head p { margin: 0; line-height: 1.8; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: #c7ccd1; }
.askomm-partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.askomm-partner-card {
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.askomm-partner-card h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  margin: 0;
  color: #fff;
}
.askomm-partner-card p { margin: 0; line-height: 1.7; font-size: clamp(1rem, 1.2vw, 1.12rem); color: #c7ccd1; }
.askomm-partner-card.askomm-reveal:nth-child(2) { transition-delay: 0.07s; }
@media (max-width: 767px) { .askomm-partner-grid { grid-template-columns: 1fr; } }

/* CTA accueil : image moins haute + contenu (texte/bouton) descendu plus bas */
.section-cta .cta-content-wrap { margin-top: 70px; margin-bottom: 24px; }

/* CTA : fondu « brouillard » à l'entrée et à la sortie du texte défilant */
.section-cta .cta-tracker-list-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Frise « Comment se déroule un projet » : 3 colonnes (n° · titre · description)
   pour occuper toute la largeur (au lieu de tout coller à gauche) */
.askomm-process-step {
  grid-template-columns: 3.2rem minmax(170px, 0.8fr) minmax(0, 1.5fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.askomm-process-name h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.18;
  margin: 0;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-process-body { padding-top: 0.15rem; }
.askomm-process-body p { margin: 0; max-width: 62ch; }
@media (max-width: 767px) {
  .askomm-process-step { grid-template-columns: 2.8rem 1fr; }
  .askomm-process-name, .askomm-process-body { grid-column: 2; }
  .askomm-process-body { padding-top: 0.5rem; }
}

/* Frise ALTERNÉE : étape 01 à gauche, 02 à droite, 03 à gauche… (ligne centrale) */
.askomm-process-list::before { left: 50%; transform: translateX(-50%); }
.askomm-process-step {
  display: flex;
  position: relative;
  grid-template-columns: none;
  gap: 0;
}
.askomm-process-step:nth-child(odd)  { justify-content: flex-start; }
.askomm-process-step:nth-child(even) { justify-content: flex-end; }
.askomm-process-dot {
  position: absolute;
  left: 50%; top: 1.5rem;
  transform: translateX(-50%);
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--_base-color---text-color--black, #0e0e0e);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--_base-color---border-color--black-100, #e5e7eb);
  z-index: 1;
}
.askomm-process-content {
  width: calc(50% - 2.75rem);
  background: #fff;
  border: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.askomm-process-num {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.06em; color: var(--_base-color---text-color--black-700, #5b6670);
}
.askomm-process-content h3 {
  font-family: "Poppins", sans-serif; font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.15; margin: 0;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-process-content p { margin: 0; }
@media (max-width: 767px) {
  .askomm-process-list::before { left: 9px; transform: none; }
  .askomm-process-step, .askomm-process-step:nth-child(even) { justify-content: flex-start; padding-left: 2.4rem; }
  .askomm-process-dot { left: 9px; }
  .askomm-process-content { width: 100%; }
}

/* Frise : animation au scroll — cartes qui glissent + ligne qui se remplit */
.askomm-process-step.askomm-reveal { transform: none; }
.askomm-process-content {
  transition: opacity 0.7s cubic-bezier(0.2,0.6,0.2,1), transform 0.7s cubic-bezier(0.2,0.6,0.2,1);
  will-change: opacity, transform;
}
.askomm-process-step.askomm-reveal .askomm-process-content { opacity: 0; }
.askomm-process-step:nth-child(odd).askomm-reveal  .askomm-process-content { transform: translateX(-48px); }
.askomm-process-step:nth-child(even).askomm-reveal .askomm-process-content { transform: translateX(48px); }
.askomm-process-step.askomm-reveal.is-in .askomm-process-content { opacity: 1; transform: none; }

/* ligne de progression qui se remplit au scroll (--process-progress piloté en JS) */
.askomm-process-list::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.6rem;
  width: 2px;
  height: var(--process-progress, 0%);
  background: var(--_base-color---text-color--black, #0e0e0e);
  z-index: 0;
  transition: height 0.12s linear;
}
@media (max-width: 767px) {
  .askomm-process-list::after { left: 9px; transform: none; }
  .askomm-process-step:nth-child(odd).askomm-reveal .askomm-process-content,
  .askomm-process-step:nth-child(even).askomm-reveal .askomm-process-content { transform: translateY(28px); }
}
@media (prefers-reduced-motion: reduce) {
  .askomm-process-step.askomm-reveal .askomm-process-content { opacity: 1; transform: none; }
  .askomm-process-list::after { display: none; }
}

/* Frise : barre centrale un peu plus épaisse */
.askomm-process-list::before { width: 3px; }
.askomm-process-list::after  { width: 3px; }

/* Notre histoire : section « héritage » (liste de points) */
.askomm-heritage-head { max-width: 64ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.askomm-heritage-head .heading-style-h2 { margin-bottom: 1rem; }
.askomm-heritage-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.5rem, 4vw, 4rem);
}
.askomm-heritage-list li {
  position: relative;
  padding: clamp(1rem, 1.8vw, 1.4rem) 0 clamp(1rem, 1.8vw, 1.4rem) 2.1rem;
  border-top: 1px solid var(--_base-color---border-color--black-100, #e5e7eb);
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.5;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
.askomm-heritage-list li::before {
  content: "◆";
  position: absolute; left: 0; top: clamp(1rem, 1.8vw, 1.4rem);
  font-size: 0.6em;
  line-height: 1.5;
  color: var(--_base-color---text-color--black, #0e0e0e);
}
@media (max-width: 767px) { .askomm-heritage-list { grid-template-columns: 1fr; } }

/* ===================================================================
   Footer v2 — 4 colonnes (Navigation · Informations · Société · Mentions)
   + badge rond « Découvrir plus » restauré
   =================================================================== */
.askomm-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: none;
}
.askomm-footer-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
/* badge rond (anneau de texte rotatif + flèche centrée) */
.footer-top-right-content-wrap {
  flex: 0 0 auto;
  width: 118px; height: 118px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.footer-top-right-content-wrap .footer-image { width: 100%; height: 100%; }
.footer-top-right-content-wrap .footer-arrow-wrap {
  width: 46px; height: 46px;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.footer-top-right-content-wrap .footer-arrow { width: 18px; height: auto; }

@media (max-width: 991px) {
  .askomm-footer-top { flex-direction: column-reverse; align-items: flex-start; gap: 2rem; }
  .askomm-footer-cols { grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (max-width: 575px) {
  .askomm-footer-cols { grid-template-columns: 1fr; }
}

/* ===================================================================
   Typo accueil — héro + CTA allégés (Poppins 500, moins « gros »)
   =================================================================== */
.header-text { font-weight: 500; font-size: 6.2vw; letter-spacing: -0.02em; }
.heading-style-h1.is-belding-text { font-weight: 500; letter-spacing: -0.02em; }
.cta-tracker-item .heading-style-h1 { font-size: 6.6vw; }

/* ===================================================================
   « Ils nous font confiance » — carrousel de logos N&B (2 lignes,
   défilement continu, sens opposés)
   =================================================================== */
.askomm-clients {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.askomm-clients-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: max-content;
  animation: askomm-clients-scroll 80s linear infinite;
  will-change: transform;
}
.askomm-clients-track--rev { animation-direction: reverse; }
.askomm-clients:hover .askomm-clients-track { animation-play-state: paused; }
@keyframes askomm-clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.askomm-client {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.askomm-client img {
  height: 34px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.askomm-client img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 767px) {
  .askomm-client img { height: 28px; max-width: 100px; }
  .askomm-clients-track { gap: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .askomm-clients-track { animation: none; }
  .askomm-clients { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* Footer : colonnes plus aérées + texte multi-lignes lisible (annule l'effet
   "fantôme" text-shadow et l'interligne trop serré hérité de .footer-link) */
.askomm-footer-col { gap: 0.9rem; }
.askomm-footer-col .footer-link,
.askomm-footer-col .footer-link.is-static {
  line-height: 1.55;
  text-shadow: none;
  overflow: visible;
  white-space: normal;
}

/* Footer : encore un peu plus d'air dans les colonnes + sous les titres */
.askomm-footer-col { gap: 1.05rem; }
.askomm-footer-col-title { margin-bottom: 1rem; }

/* ===================================================================
   Footer — animation Pixelin RÉTABLIE sur les liens (webflow.js IX2 +
   SplitText fait glisser les mots au survol, révélant la copie blanche).
   Le texte statique (adresse, société) est hors de .footer-link.
   =================================================================== */
.askomm-footer-col a.footer-link {
  text-shadow: 0 1.2vw 0 #fff;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.4;
}
.askomm-footer-info {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  font-size: var(--_typography---button-text-size--md-text, 0.95rem);
}

/* Animation footer (CSS pur) : le texte du lien glisse vers le haut au survol,
   une copie blanche apparaît par le bas — reproduit l'effet Pixelin, sans GSAP */
.askomm-footer-col a.footer-link {
  display: inline-block;
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: none;
  vertical-align: top;
}
.askomm-footer-col a.footer-link .fl-t {
  display: inline-block;
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), color 0.42s ease;
  will-change: transform;
}
.askomm-footer-col a.footer-link .fl-t::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 0;
  transform: translateY(110%);
  color: #fff;
}
.askomm-footer-col a.footer-link:hover .fl-t { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) {
  .askomm-footer-col a.footer-link .fl-t { transition: none; }
  .askomm-footer-col a.footer-link .fl-t::after { display: none; }
  .askomm-footer-col a.footer-link:hover .fl-t { transform: none; }
}

/* ===================================================================
   Footer — liens renommés .askomm-flink (webflow.js IX2/SplitText ne les
   touche plus → plus de conflit/disparition). Animation 100% CSS.
   =================================================================== */
.askomm-footer-col a.askomm-flink {
  display: inline-block;
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: top;
  text-decoration: none;
}
.askomm-footer-col a.askomm-flink .fl-t {
  display: inline-block;
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.askomm-footer-col a.askomm-flink .fl-t::after {
  content: attr(data-t);
  position: absolute; left: 0; top: 0;
  transform: translateY(110%);
  color: #fff;
}
.askomm-footer-col a.askomm-flink:hover .fl-t { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) {
  .askomm-footer-col a.askomm-flink .fl-t { transition: none; }
  .askomm-footer-col a.askomm-flink .fl-t::after { display: none; }
  .askomm-footer-col a.askomm-flink:hover .fl-t { transform: none; }
}

/* Section « Ils nous font confiance » : moins d'espace au-dessus, espace conservé en dessous */
.section-award .padding-section-large {
  padding-top: clamp(1.5rem, 3vw, 3rem);
}

/* FAQ : top réduit + bas cohérent sur toutes les pages (corrige aussi le 160px de Services) */
.section-faq .padding-section-large {
  padding-top: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
/* Footer : espacement vertical propre et cohérent (n'était plus collé en haut) */
.section-footer .padding-global.is-medium-padding {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* ===================================================================
   Bandeau cookies RGPD (injecté par askomm.js)
   =================================================================== */
.askomm-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #0b0b0b; color: #fff;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.2,0.6,0.2,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
}
.askomm-cookie.is-open { transform: translateY(0); }
.askomm-cookie-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: clamp(1rem,2vw,2rem); flex-wrap: wrap;
}
.askomm-cookie p { margin: 0; flex: 1; min-width: 240px; font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.82); }
.askomm-cookie p a { color: #fff; text-decoration: underline; }
.askomm-cookie-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.askomm-cookie button {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.85rem;
  padding: 0.7em 1.3em; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.askomm-cookie button:hover { background: rgba(255,255,255,0.12); }
.askomm-cookie button.primary { background: #fff; color: #0b0b0b; border-color: #fff; }
.askomm-cookie button.primary:hover { background: #e7e9ea; }
.askomm-cookie-panel {
  max-width: 1200px; margin: 1rem auto 0;
  display: flex; flex-direction: column; gap: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1rem;
}
.askomm-cookie-panel[hidden] { display: none; }
.askomm-cookie-panel label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: rgba(255,255,255,0.82); cursor: pointer; }
.askomm-cookie-panel label span { color: rgba(255,255,255,0.5); }
.askomm-cookie-save { margin-top: 0.3rem; }
@media (max-width: 640px) {
  .askomm-cookie-inner { flex-direction: column; align-items: stretch; }
  .askomm-cookie-actions { justify-content: stretch; }
  .askomm-cookie-actions button { flex: 1; }
}

/* Carrousel logos : boucle VRAIMENT sans couture (margin-right au lieu de gap
   pour que translateX(-50%) tombe pile sur la duplication → pas de trou) */
.askomm-clients-track { gap: 0; }
.askomm-client { margin-right: clamp(2.25rem, 4.5vw, 4rem); }

/* Logos confiance : ne plus couper les wordmarks larges (hauteur uniforme,
   largeur naturelle, jamais de coupe) */
.askomm-client img {
  max-width: none;
  height: 30px;
  object-fit: contain;
  display: block;
}

/* ===================================================================
   Réalisations — vitrine « Sites internet » (cadre navigateur)
   =================================================================== */
.askomm-real-subtitle { margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.askomm-real-subtitle .heading-style-h6 { color: var(--_base-color---text-color--black-700, #5b6670); }

.askomm-web-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  padding: 1.25rem 0;
}
.askomm-web-track {
  display: flex; width: max-content; align-items: stretch;
  animation: askomm-clients-scroll 55s linear infinite;
  will-change: transform;
}
.askomm-web-marquee:hover .askomm-web-track { animation-play-state: paused; }

.askomm-web-card {
  flex: 0 0 auto;
  width: clamp(290px, 30vw, 430px);
  margin-right: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 44px rgba(0,0,0,0.12);
}
.askomm-web-bar { height: 26px; background: #1c1f24; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.askomm-web-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.32); }
.askomm-web-card img { display: block; width: 100%; height: auto; }

/* version grille (page Projets) */
.askomm-web-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.askomm-web-grid .askomm-web-card { width: auto; margin: 0; flex: none; }
@media (max-width: 767px) {
  .askomm-web-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .askomm-web-track { animation: none; }
  .askomm-web-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Page Projets : en-tête de la section « Sites internet » */
.askomm-webreal-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.askomm-webreal-head .heading-style-h6 { color: var(--_base-color---text-color--black-700, #5b6670); margin-top: 0.75rem; }

/* ===================================================================
   FAQ mobile : la QUESTION ne doit jamais être coupée.
   - on retire l'overflow:hidden hérité sur l'item (la collapse se fait
     via .faq-answer qui a son propre overflow) ;
   - on neutralise un éventuel découpage GSAP/SplitText (comme au footer).
   =================================================================== */
.faq-iteam.askomm-faq { overflow: visible; }
.faq-iteam.askomm-faq .faq-top-content,
.faq-iteam.askomm-faq .faq-top-left-content,
.faq-iteam.askomm-faq .heading-style-h6 { overflow: visible; }
.faq-iteam.askomm-faq .faq-top-left-content { align-items: flex-start; }
.faq-iteam.askomm-faq .heading-style-h6 { line-height: 1.3; }
.faq-iteam.askomm-faq .heading-style-h6 .gsap_split_line,
.faq-iteam.askomm-faq .heading-style-h6 .gsap_split_word,
.faq-iteam.askomm-faq .heading-style-h6 [class*="gsap_split"] {
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
}
.faq-iteam.askomm-faq .faq-star { margin-top: 0.35em; }

/* Masquage temporaire des réalisations magazines (réactivable en retirant la classe) */
.askomm-temp-hide { display: none !important; }