/* Audit typographique du 14/09/2026 (docs/ARCHITECTURE.md bloc 0), PIVOT le meme jour :
   premier trio verrouille (Plus Jakarta Sans + Space Mono, "Studio Freight") remplace par
   Inter (Display+Body) + IBM Plex Mono (labels/mono), sur test visuel d'Aboubacar
   (localhost:10000, redesign de la section "Direction Artistique") -- "je veux maintenant cet
   ensemble de police sur la page d'accueil du site". Fraunces (serif italique) s'ajoute comme
   police d'ACCENT ponctuel (citations, intros editoriales) -- jamais un remplacement general
   du corps de texte, exactement le role qu'elle tient dans le test de reference. */

:root {
  /* Nuances Maîtresses SENTEKIA */
  --brick-ember: #B1230A;
  --black: #000000;
  --bright-snow: #F9F9F9;
  --bone: #E8DFD4;
  --bone-soft: #F2ECE4;
  --bone-light: rgba(232, 223, 212, 0.4);
  --black-muted: rgba(0, 0, 0, 0.65);
  --black-subtle: rgba(0, 0, 0, 0.4);
  
  --type-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --type-editorial: 'Fraunces', Georgia, serif;
  --type-interface: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Base Body & Layout */
body, html {
  background-color: var(--bright-snow) !important;
  color: var(--black) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}


h1, h2, h3, .h1, .h2, .h3, .l-luxury-title .h1, .l-merit-content__title, .l-sensation-title {
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--black) !important;
}

.l-luxury-title {
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--black) !important;
}

.l-luxury-title > span:first-child {
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 4vw, 3.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--black) !important;
}

/* Elegant Haute Couture Script Signature (Positioned cleanly below title) -- 'Style Script'
   n'a jamais ete chargee sur ce site (aucun @import ne la referencait, trouve lors de l'audit
   du 14/09/2026, docs/ARCHITECTURE.md bloc 0) : cet accent retombait silencieusement sur
   'cursive', une police systeme imprevisible selon l'OS du visiteur, jamais sur Playfair
   Display comme la declaration le laissait croire. Passe a Fraunces (--font-accent-serif) lors
   du pivot du meme jour vers le trio Inter/IBM Plex Mono/Fraunces : role exact que Fraunces
   tient deja dans le test de reference d'Aboubacar (localhost:10000, intro editoriale en
   italique) -- accent serif ponctuel, jamais le corps de texte general du site. */
.l-luxury-title__bottom {
  position: relative !important;
  display: block !important;
  left: 0 !important;
  right: auto !important;
  text-align: left !important;
  margin-top: 1.5rem !important;
  font-family: var(--type-editorial, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--brick-ember) !important;
  font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
}


.intro__content {
  z-index: 20 !important;
  position: relative !important;
}

.intro__content h1,
.intro__content h1 *,
.intro__title,
.intro__title * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.intro__title {
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 5.2vw, 4.8rem) !important;
  line-height: 1.05 !important;
  display: block !important;
}

.intro__subtitle {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
}

.intro__subtitle-text {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  background: var(--brick-ember) !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(177, 35, 10, 0.4) !important;
  display: inline-block !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
   SECTION 3 : LE FONDATEUR ABOUBACAR DIOP
   ========================================================================== */
.l-merit-background {
  height: 100svh !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
}

.l-merit-background img {
  object-fit: cover !important;
  object-position: center 20% !important;
  filter: brightness(0.45) contrast(1.15) !important;
}

.l-merit-content {
  justify-content: center !important;
  padding-top: 0 !important;
  min-height: 100svh !important;
  z-index: 10 !important;
}

p, .text-lead, .l-luxury-content {
  font-family: 'Inter', sans-serif !important;
  color: var(--black-muted);
}

.meta-tag, .text-small, .btn__text, .header__menu-text {
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 0.05em !important;
}

/* Header & Navigation Contrast */
.header {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100 !important;
  background: rgba(232, 223, 212, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.header__content-left a.btn,
.header__content-left .header__menu-text,
.header__content-left .header__menu-text-menu,
.header__content-left .btn__text {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* 3 THIN LINES LUXURY HAMBURGER MENU */
.header__content-left a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.header__content-left .icon--menu {
  width: 22px !important;
  height: 12px !important;
  position: relative !important;
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  vertical-align: middle !important;
}

.header__content-left .icon--menu:before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1.5px !important;
  background-color: #000000 !important;
  box-shadow: 0 5.25px 0 0 #000000 !important; /* Ligne du milieu fine */
  border: none !important;
  transform: none !important;
  transition: all 0.3s ease !important;
}

.header__content-left .icon--menu:after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1.5px !important;
  background-color: #000000 !important;
  border: none !important;
  transform: none !important;
  transition: all 0.3s ease !important;
}

/* Hide small SENTEKIA on the header */
.header__logo-text,
.header__logo-text-button,
.header__logo-button,
.header__logo {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.header__content-right a.btn {
  background-color: #B1230A !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 0.6rem 1.35rem !important;
  box-shadow: 0 4px 18px rgba(177, 35, 10, 0.45) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

.header__content-right a.btn:hover {
  background-color: #8E1B07 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(177, 35, 10, 0.4) !important;
}

.header__content-right a.btn *,
.header__content-right a.btn .btn__text {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.header__content-right .btn__underline {
  display: none !important;
}

/* Sections Backgrounds */
.ui-light.ui-background, .section--light {
  background-color: var(--bright-snow) !important;
  color: var(--black) !important;
}

.section--bone, #about, .section--transition {
  background-color: var(--bone-soft) !important;
  color: var(--black) !important;
}

.ui-dark.ui-background, .ui-dark-background, .section--dark {
  background-color: var(--black) !important;
  color: var(--bright-snow) !important;
}

.ui-dark.ui-background h1, .ui-dark.ui-background h2, .ui-dark.ui-background .h1, .ui-dark.ui-background .h2 {
  color: #FFFFFF !important;
}

.ui-dark.ui-background p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 3D Button Floating (Hero) */
.button-3d {
  background: #FFFFFF !important;
  border: 1px solid var(--bone) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
}

.button-3d__top {
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  letter-spacing: -0.02em !important;
}

.button-3d__bottom {
  font-family: 'IBM Plex Mono', monospace !important;
  color: var(--brick-ember) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

.button-3d__icon {
  background: var(--brick-ember) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Preloader & Badges */
.preloader__content {
  background: var(--bright-snow) !important;
  color: var(--black) !important;
}

.badge-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  background: #FFFFFF;
  border: 1px solid var(--bone);
  color: var(--black);
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.text-brick {
  color: var(--brick-ember) !important;
}



#hero, .sentekia-hero {
  position: relative !important;
  min-height: 100svh !important;
  height: 100svh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background-color: var(--bone) !important;
  padding: clamp(70px, 8vh, 90px) clamp(20px, 4vw, 48px) clamp(20px, 3vh, 36px) !important;
  user-select: none;
}

.hero-stage {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile uniquement (redesign du 13/09/2026, voir bloc @media (max-width: 768px) plus bas
   pour la mise en page complete) -- masques par defaut, absents du hero desktop. */
.hero-logo-mark,
.hero-mobile-desc {
  display: none;
}

/* Two Display Words: Top-Left & Bottom-Right */
.hero-word {
  position: absolute !important;
  z-index: 3 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.hw-a {
  top: 0 !important;
  left: 0 !important;
}

.hw-b {
  bottom: 0 !important;
  right: 0 !important;
}

.d-mega {
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-weight: 800 !important;
  font-size: clamp(3.6rem, 12.8vw, 11rem) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin: 0 !important;
}

.hw-a .d-mega {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

.hw-b .d-mega {
  color: var(--brick-ember) !important;
  -webkit-text-fill-color: var(--brick-ember) !important;
}

/* Mouse-reactive Collage */
.collage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
  cursor: grab;
}

.collage-in {
  position: relative !important;
  width: clamp(280px, 36vw, 500px) !important;
  aspect-ratio: 1 / 1 !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

.tile, .card {
  position: absolute !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  border-radius: 0px !important;
  transition: box-shadow 0.35s ease !important;
  backface-visibility: hidden !important;
  cursor: pointer !important;
}

.tile::after, .card::after {
  display: none !important;
}

/* Pure borderless square tiles */
.collage.is-line-mode .tile,
.collage.is-line-mode .tile img,
.collage.is-line-mode .tile::after,
.collage.is-line-mode .card,
.collage.is-line-mode .card img {
  border-radius: 0px !important;
  border: none !important;
}

.tile img, .card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
  border-radius: 0px !important;
  border: none !important;
}

.tile:hover, .card:hover {
  box-shadow: 0 32px 75px -15px rgba(0, 0, 0, 0.65), 0 8px 25px rgba(177, 35, 10, 0.35) !important;
  border: none !important;
  z-index: 60 !important;
}

.tile-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px 18px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 4, 6, 0.92) 100%) !important;
  color: #FFFFFF !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 0.05em !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-radius: 0 !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  pointer-events: none !important;
}

.tile:hover .tile-caption, .card:hover .tile-caption {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.tile-caption span.tag {
  color: #FFFFFF !important;
  background: var(--brick-ember) !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 0px !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO MOBILE : redesign du 13/09/2026
   ══════════════════════════════════════════════════════════════
   Repris fidelement de la fiche fournie par Aboubacar (capture d'ecran mobile, tuiles et
   textes traces) : symbole SENTEKIA en tete, SENTEKIA centre, 2 tuiles portrait plein-cadre
   avec leur tag rouge (toujours visible, pas de hover sur tactile), STUDIO en rouge, puis
   l'eyebrow ARCHITECTE DE PERCEPTION, puis un paragraphe d'intro -- absents ou mal ordonnes
   sur mobile avant ce correctif (voir feedback_mobile_first_verification). Le moteur JS des
   tuiles (corridor SENTEKIA/STUDIO, voir initExplosiveMarqueeAndModal) est desactive sur
   cette largeur (voir build_sentekia_html.js) : ici, layout 100% CSS, deterministe. */
@media (max-width: 768px) {
  .hero-logo-mark {
    display: block !important;
    order: 0 !important;
    width: 34px !important;
    margin: 0 auto !important;
    color: var(--black) !important;
  }
  .hero-logo-mark img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .hero-stage {
    position: static !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  .hw-a, .hw-b, .hero-stage .hero-kinetic-wrap {
    /* .hero-stage .hero-kinetic-wrap (specificite 0,2,0) plutot que .hero-kinetic-wrap seul :
       la regle de base (ligne ~620, position:absolute !important) est declaree PLUS BAS dans
       ce fichier et a la meme specificite (0,1,0) -- a egalite, la derniere regle du fichier
       gagne, donc un simple !important ici ne suffisait pas a la battre. */
    position: static !important;
    inset: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .hw-a { order: 1 !important; }
  .hw-a .d-mega, .hw-a .d-mega span {
    text-align: center !important;
    font-size: clamp(2.6rem, 13vw, 3.6rem) !important;
  }

  /* Les tuiles sont le 2e bloc visuel, entre SENTEKIA et STUDIO (fiche) */
  .collage { order: 2 !important; }
  .hw-b { order: 3 !important; }
  .hero-kinetic-wrap { order: 4 !important; }

  .hw-b .d-mega, .hw-b .d-mega span {
    text-align: center !important;
    font-size: clamp(3rem, 16vw, 4.2rem) !important;
  }

  .hero-kinetic-wrap {
    justify-content: center !important;
    max-width: 100% !important;
  }
  .hero-kinetic-text {
    text-align: center !important;
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }

  .hero-mobile-desc {
    display: block !important;
    order: 5 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8vw !important;
    text-align: center !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--black-muted) !important;
  }

  /* Animation JS reactivee le 16/09/2026 (demande explicite, "meme animation stricte que le
     desktop") : #collage reste desormais DANS le flux flex du hero (position:relative + une
     hauteur reservee), au lieu de position:absolute/inset:0 comme sur desktop -- c'est ce qui
     causait le grand vide constate le 13/09 (les tuiles etaient positionnees hors flux pendant
     que SENTEKIA/STUDIO, eux en position:static, se retrouvaient cote a cote sans espace
     reserve entre les deux). Ici, la hauteur reservee correspond directement a la fourchette
     mobile deja definie dans le JS (maxH:330/minH:250 dans build_sentekia_html.js), donc le
     calcul de "corridor" (distance mesuree entre SENTEKIA et STUDIO) retombe juste : il n'y a
     plus de decalage entre l'espace reserve et l'espace realmente occupe par les tuiles. */
  .collage {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    /* Releve avec le plafond de tuile mobile (maxH 330->420 dans build_sentekia_html.js) pour
       que le corridor reserve corresponde reellement a la nouvelle taille -- sinon les tuiles
       depassent la zone qui leur est allouee. */
    height: clamp(360px, 54svh, 420px) !important;
  }
  .collage-in {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
  }
  /* .tile garde position:absolute (regle de base, non modifiee ici) : c'est le JS
     (initHeroCollage dans build_sentekia_html.js) qui pilote left/top/width/height/transform
     de chaque tuile a chaque frame, defilement horizontal continu inclus (scrollSpeed mobile
     deja prevu dans le JS). Aucune des 11 tuiles n'est masquee : elles defilent toutes. */

  /* Tag seul, toujours visible (pas de hover sur tactile) -- pas de titre ni de degrade,
     juste le badge rouge bas-gauche comme sur la fiche. */
  .tile-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    padding: 0 !important;
    background: none !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
  }
  .tile-caption > span:not(.tag) {
    display: none !important;
  }
  .tile-caption span.tag {
    display: inline-block !important;
    padding: 7px 14px !important;
    font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
    font-size: 10.5px !important;
  }
}

/* ===========================================================================
   PILIERS : LISIBILITÉ DES CARTES ANIMÉES
   Ces textes traversent des effets de parallax/échelle. Les tailles de source
   sont donc supérieures à une section statique afin de rester lisibles à l'écran.
   =========================================================================== */

#top .l-expansive-card__title .h0 {
  font-size: clamp(440px, 28vw, 560px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.82 !important;
}

#top .l-expansive-card__text {
  max-width: 22ch !important;
  font-size: clamp(52px, 4vw, 72px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.18 !important;
}

#top :is(
  .l-expansive-card__video-text,
  .l-expansive-iconic-text,
  .l-expansive-finesse-text,
  .l-expansive-service-text,
  .l-expansive-cut-text p
) {
  font-size: clamp(20px, 1.25vw, 23px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.45 !important;
}

/* Le texte central a besoin d'une colonne de lecture, pas d'un fil étroit. */
#top .l-expansive-card__video-text {
  width: min(24vw, 400px) !important;
  max-width: 32ch !important;
}

#top .l-expansive-iconic-text {
  max-width: 31ch !important;
  margin-inline: auto !important;
}

#top .l-expansive-privacy-text {
  max-width: 26ch !important;
  font-size: clamp(34px, 2.7vw, 48px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}

@media (max-width: 768px) {
  #top .l-expansive-card__title .h0 {
    font-size: clamp(104px, 29vw, 180px) !important;
  }

  #top .l-expansive-card__text {
    max-width: 19ch !important;
    font-size: clamp(30px, 8.2vw, 42px) !important;
    line-height: 1.16 !important;
  }

  #top :is(
    .l-expansive-card__video-text,
    .l-expansive-iconic-text,
    .l-expansive-finesse-text,
    .l-expansive-service-text,
    .l-expansive-cut-text p
  ) {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }

  #top .l-expansive-card__video-text {
    width: auto !important;
    max-width: 28ch !important;
  }

  #top .l-expansive-privacy-text {
    font-size: clamp(27px, 8vw, 38px) !important;
  }
}

/* ==========================================================================
   MOBILE FIRST PREMIUM PASS
   Une seule couche finale regroupe les corrections mobiles de toute la page.
   Le rythme repose sur une grille de 20px, des images volontairement cadrees
   et une hierarchie courte : label, titre, texte, action.
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip !important;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

@media (max-width: 768px) {
  :root {
    --mobile-gutter: clamp(18px, 5.1vw, 24px);
    --mobile-section-space: clamp(72px, 18vw, 104px);
    --mobile-display: clamp(36px, 11.2vw, 54px);
    --mobile-title: clamp(28px, 8.4vw, 40px);
    --mobile-copy: clamp(15px, 4.1vw, 17px);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    min-width: 0;
    font-size: var(--mobile-copy);
  }

  :is(main, section, header, footer, .row, .col, .sticky__layer) {
    min-width: 0;
    max-width: 100%;
  }

  :is(p, li, a, span) {
    overflow-wrap: break-word;
  }

  :is(img, video) {
    display: block;
  }

  /* Navigation compacte et stable, y compris avec les zones sures iOS. */
  .header {
    height: calc(64px + env(safe-area-inset-top)) !important;
    min-height: calc(64px + env(safe-area-inset-top)) !important;
  }

  .header__content {
    height: 100% !important;
    padding: env(safe-area-inset-top) var(--mobile-gutter) 0 !important;
  }

  .header__content::after {
    top: calc(env(safe-area-inset-top) + 24px) !important;
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
  }

  .header__content-left a.btn {
    min-width: 44px !important;
    min-height: 44px !important;
    gap: 8px !important;
  }

  .header__content-right {
    display: none !important;
  }

  .header__content-left :is(.header__menu-text, .header__menu-text-menu) {
    display: inline !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  
  #top.sentekia-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: clip !important;
    justify-content: flex-start !important;
    padding: calc(78px + env(safe-area-inset-top)) var(--mobile-gutter) 40px !important;
  }

  #top .hero-stage {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100svh - 118px - env(safe-area-inset-top)) !important;
    gap: clamp(14px, 3.8vw, 20px) !important;
  }

  #top .hero-logo-mark {
    width: 28px !important;
  }

  #top .hw-a .d-mega,
  #top .hw-a .d-mega span {
    font-size: clamp(38px, 11.8vw, 52px) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.055em !important;
  }

  #top .hw-b .d-mega,
  #top .hw-b .d-mega span {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.055em !important;
  }

  #top .collage,
  #top .collage-in {
    width: 100% !important;
    max-width: 100% !important;
  }

  #top .collage-in {
    gap: 10px !important;
  }

  #top .tile {
    aspect-ratio: 4 / 5 !important;
    min-width: 0 !important;
    box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.55) !important;
  }

  #top .tile img {
    object-position: center !important;
  }

  #top .tile-caption span.tag {
    max-width: 100% !important;
    padding: 7px 10px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  #top .hero-kinetic-text {
    max-width: 30ch !important;
    margin-inline: auto !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em !important;
  }

  #top .hero-mobile-desc {
    max-width: 34ch !important;
    margin-inline: auto !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    text-wrap: pretty;
  }

  /* Disciplines : image courte, contenu respirant, aucune ligne hors ecran. */
  .sticky-disciplines-inner {
    height: 100svh !important;
    padding-top: calc(64px + env(safe-area-inset-top)) !important;
  }

  .hscroll-track {
    width: 500dvw !important;
  }

  .hscroll-panel {
    width: 100dvw !important;
    flex-basis: 100dvw !important;
    height: 100% !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .sticky-disciplines-right {
    flex: 0 0 clamp(220px, 34svh, 310px) !important;
    min-height: 220px !important;
    overflow: hidden !important;
  }

  .sticky-disciplines-right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .discipline-accent-bar {
    height: 5px !important;
  }

  .sticky-disciplines-left {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px var(--mobile-gutter) 0 !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .sticky-item-eyebrow {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.12em !important;
  }

  .sticky-item-title {
    max-width: 100% !important;
    font-size: clamp(30px, 8.6vw, 40px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.045em !important;
  }

  .sticky-item-title .hshutter-word {
    max-width: 100% !important;
  }

  .sticky-item-desc {
    max-width: 35ch !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.4 !important;
  }

  .sticky-item-list {
    width: 100% !important;
    margin-top: 2px !important;
  }

  .sticky-item-list li {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .sticky-item-list li b {
    font-size: 9px !important;
  }

  .sticky-item-link {
    align-self: flex-start !important;
    min-height: 40px !important;
    margin-top: 2px !important;
    padding-bottom: 6px !important;
    font-size: 12px !important;
  }

  .discipline-aside {
    display: none !important;
  }

  /* Trois Univers : cadrage plein ecran et bloc actif centre dans le panneau noir. */
  #collection {
    width: 100% !important;
    overflow: clip !important;
  }

  #collection .l-three-worlds-text {
    padding-inline: var(--mobile-gutter) !important;
  }

  #collection .l-three-worlds-text .col {
    width: 100% !important;
    padding-inline: 0 !important;
  }

  #collection .l-three-worlds-text p {
    max-width: 36ch !important;
    margin-inline: auto !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  #collection .l-three-worlds-sticky__title {
    padding-inline: var(--mobile-gutter) !important;
  }

  #collection .l-three-worlds-sticky__title-word {
    color: #FFFFFF !important;
    font-size: clamp(36px, 10.8vw, 48px) !important;
    line-height: 0.98 !important;
  }

  #collection .l-three-worlds-webgl,
  #collection .l-three-worlds-webgl canvas {
    max-width: 100dvw !important;
    overflow: hidden !important;
  }

  #collection .l-three-worlds-sticky__titles {
    top: 75% !important;
    width: 100% !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  #collection [data-content-animation-item] .h0 {
    width: 100% !important;
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
    white-space: normal !important;
  }

  #collection .tw-desc {
    width: 100% !important;
    max-width: 32ch !important;
    margin-top: 12px !important;
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  /* Piliers : largeur dynamique du mobile, titres non tronques et images calibrees. */
  .l-tenets-section,
  .l-expansive-section,
  .l-expansive-slider {
    max-width: 100dvw !important;
    overflow: clip !important;
  }

  .l-expansive-slider__item,
  .l-expansive-slider__item--full-image,
  .l-expansive-slider__item--lifestyle-video {
    width: 100dvw !important;
    min-width: 100dvw !important;
    flex-basis: 100dvw !important;
    overflow: hidden !important;
  }

  .l-expansive-slider__item > .row {
    width: 100% !important;
    margin: 0 !important;
  }

  .l-expansive-slider__item .col {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .l-expansive-card {
    left: var(--mobile-gutter) !important;
    width: calc(100dvw - (2 * var(--mobile-gutter))) !important;
    height: calc(100svh - 112px) !important;
    max-height: 760px !important;
    aspect-ratio: auto !important;
  }

  .l-expansive-card__title,
  .l-expansive-card__text {
    left: var(--mobile-gutter) !important;
    right: var(--mobile-gutter) !important;
  }

  .l-expansive-card__title {
    top: var(--mobile-gutter) !important;
  }

  .l-expansive-card__text {
    bottom: var(--mobile-gutter) !important;
    max-width: 22ch !important;
    margin-inline: auto !important;
    font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
    font-size: clamp(25px, 7.4vw, 34px) !important;
    font-style: italic !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
  }

  :is(
    .l-expansive-card__title,
    .l-expansive-spaces-title,
    .l-expansive-iconic-title,
    .l-expansive-finesse-title,
    .l-expansive-amenities-title,
    .l-expansive-service-title
  ) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  :is(
    .l-expansive-card__title .h0,
    .l-expansive-spaces-title .h1,
    .l-expansive-iconic-title .h1,
    .l-expansive-finesse-title .h1,
    .l-expansive-amenities-title .h1,
    .l-expansive-service-title .h1
  ) {
    font-size: var(--mobile-title) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
  }

  :is(
    .l-expansive-card__video-text,
    .l-expansive-iconic-text,
    .l-expansive-finesse-text,
    .l-expansive-service-text,
    .l-expansive-cut-text p
  ) {
    max-width: 34ch !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
    letter-spacing: -0.01em !important;
  }

  .l-expansive-slider__item--full-image .img-full,
  .l-expansive-slider__item--full-image .img-full img,
  .l-expansive-slider__item--lifestyle-video video {
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100svh !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Selection : manifeste lisible et lignes qui restent dans la grille. */
  #selection {
    width: 100% !important;
    overflow: clip !important;
  }

  #selection .l-handpicked-carousel-title {
    width: 100% !important;
    padding: 72px var(--mobile-gutter) 0 !important;
  }

  #selection .text-subtitle {
    font-size: clamp(34px, 10.5vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  #selection .text-small {
    max-width: 30ch !important;
    margin-inline: auto !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

  #selection :is(.l-handpicked-carousel-text-center, .l-handpicked-carousel-text-bottom) {
    width: 100% !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  #selection :is(.l-handpicked-carousel-text-center, .l-handpicked-carousel-text-bottom) .h3 {
    max-width: 31ch !important;
    margin-inline: auto !important;
    font-size: clamp(19px, 5.3vw, 25px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.025em !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  /* Finale : le texte redevient un vrai moment de marque sur petit ecran. */
  .ssh-fixed-content,
  .ssh-bg,
  .ssh-final {
    width: 100dvw !important;
    max-width: 100dvw !important;
  }

  .ssh-bg-slide {
    object-position: center !important;
  }

  .ssh-icons {
    width: calc(100dvw - (2 * var(--mobile-gutter))) !important;
    bottom: max(28px, 5svh) !important;
    gap: 4px !important;
  }

  .ssh-headline {
    max-width: calc(100dvw - (2 * var(--mobile-gutter))) !important;
    padding-inline: 0 !important;
    font-size: clamp(22px, 6.8vw, 30px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
  }

  /* Footer : ordre clair, liens tactiles, signature toujours contenue. */
  footer {
    width: 100% !important;
    overflow: clip !important;
  }

  .s-footer__title-block,
  .ssf-closing {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  .footer__text,
  .footer__text-mask {
    max-width: 100% !important;
    font-size: clamp(34px, 11vw, 52px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
  }

  /* .ssf-panel / .ssf-col : structure remplacee le 23/09/2026 par .ssf-frame / .ssf-frame-col
     (voir renderFooterClosing dans build_sentekia_html.js) -- ces classes n'existent plus dans
     le markup, regles retirees. .ssf-audit-cta et .ssf-brand restent des classes actives, non
     touchees ici : la nouvelle <style> inline du footer (plus tardive dans le document que
     cette feuille externe) gagne deja les egalites de specificite/importance sur mobile. */
  .ssf-audit-cta {
    min-height: 44px !important;
    line-height: 1.35 !important;
  }

  .ssf-brand {
    max-width: 100% !important;
    padding: 18px 0 max(18px, env(safe-area-inset-bottom)) !important;
    font-size: clamp(44px, 14vw, 68px) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
  }

  /* Les controles restent utilisables au doigt sans alourdir l'esthetique. */
  :is(a, button, [role='button']) {
    touch-action: manipulation;
  }
}

@media (max-width: 380px) {
  #top.sentekia-hero {
    padding-inline: 16px !important;
  }

  #top .collage-in {
    gap: 6px !important;
  }

  .sticky-disciplines-right {
    flex-basis: clamp(200px, 31svh, 260px) !important;
  }

  .sticky-item-title {
    font-size: clamp(28px, 8.2vw, 34px) !important;
  }

  .sticky-item-desc {
    font-size: 14px !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  #top.sentekia-hero {
    min-height: 720px !important;
  }

  .sticky-disciplines-right {
    flex-basis: 42svh !important;
  }

  #collection .l-three-worlds-sticky__titles {
    top: 72% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Calibrage final : présence éditoriale, sans envahir la carte ni le visuel voisin. */
#top .l-expansive-card__title .h0 {
  font-size: clamp(280px, 16vw, 350px) !important;
  line-height: 0.86 !important;
}

#top .l-expansive-card__text {
  max-width: 23ch !important;
  font-size: clamp(42px, 2.7vw, 52px) !important;
  line-height: 1.22 !important;
}

#top .l-expansive-card__video {
  overflow: visible !important;
}

/* Emplacement du texte du 1er pilier (Perception Absolue) ajuste le 14/09/2026 :
   L'image centrale (fauteuil dore + tableau) etant au format portrait au centre de la boite
   .l-expansive-card__video (50vw), son bord droit physique arrive exactement a 75.28% de la boite.
   Le texte se cale donc immediatement a droite de l'image (left: calc(75.5% + 36px)),
   dans l'espace blanc libre correspondant au rectangle indique par Aboubacar, sans aucun
   chevauchement avec le tableau/fauteuil et sans deborder sur la diapositive suivante. */
#top .l-expansive-card__video-text {
  position: absolute !important;
  left: calc(76% + 32px) !important;
  right: auto !important;
  margin-left: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box !important;
  width: min(320px, 20vw) !important;
  max-width: 320px !important;
  text-align: left !important;
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: clamp(16px, 1.05vw, 19px) !important;
  line-height: 1.45 !important;
}

@media (max-width: 1100px) {
  /* Sous ce seuil, "a cote" n'a plus de place reelle (verifier avant de livrer) -- repli sous
     l'image plutot qu'un chevauchement garanti par manque d'espace horizontal. */
  #top .l-expansive-card__video-text {
    position: static !important;
    margin: 24px auto 0 !important;
    width: min(340px, calc(100% - 48px)) !important;
    max-width: calc(100% - 48px) !important;
    text-align: center !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  /* Corrige le 16/09/2026 : clamp(88px,24vw,140px) donnait un titre "PILIERS" a 117px sur un
     ecran de 390px -- ecrasant, sans rapport avec le corps de texte en dessous. Aligne sur
     l'echelle H0 deja utilisee ailleurs sur mobile (ex. #collection .l-three-worlds-sticky__
     title-word : clamp(36px,10.8vw,48px)) pour une coherence typographique reelle entre
     sections plutot qu'une echelle propre a chaque bloc. */
  #top .l-expansive-card__title .h0 {
    font-size: clamp(36px, 10.8vw, 48px) !important;
    line-height: 0.98 !important;
  }

  #top .l-expansive-card__text {
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.4 !important;
  }

  #top .l-expansive-card__video-text {
    width: auto !important;
    max-width: 100% !important;
    font-size: 17px !important;
  }
}

/* Les titres restent pleins : aucun effet de tranche, de glitch ou de lettre dupliquée. */
#top .hshutter-main {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}

#top .hshutter-slice {
  display: none !important;
}

/* Exception du 15/09/2026 : Aboubacar veut le meme reveal shutter sur les titres des 5
   disciplines que sur le titre SENTEKIA du footer et le texte qui le precede (tous deux rendus
   hors de #top, donc jamais touches par le kill-rule ci-dessus). Specificite superieure
   (#top .sticky-item-title ...) pour gagner sur les deux regles generiques au-dessus.
   Bug corrige le 15/09/2026 (repere par Aboubacar : le titre redevenait blanc apres l'effet) :
   une premiere version declarait aussi "opacity:0 !important; filter:blur(10px) !important;"
   en dehors de l'animation, pour couvrir la phase d'attente avant le declenchement JS (pendant
   animation-delay, fill-mode "forwards" ne couvre pas cette phase "before"). Mais une fois
   l'animation terminee, ce opacity:0 statique rentrait en concurrence avec l'etat final "to"
   (opacity:1) de la meme regle et reprenait la main -- le titre disparaissait au lieu de rester
   revele. Fix : fill-mode "both" (backwards + forwards) couvre nativement la phase d'attente ET
   l'etat final via l'animation elle-meme, sans avoir besoin d'une declaration statique concurrente. */
#top .sticky-item-title .hshutter-main {
  animation: hshutterMain 0.8s ease both !important;
  animation-play-state: paused !important;
  animation-delay: calc(var(--i, 0) * 0.04s + 0.3s) !important;
}

#top .sticky-item-title .hshutter-slice {
  display: block !important;
}



#top .sticky-disciplines-left {
  gap: clamp(18px, 2.3vh, 26px) !important;
}

#top .sticky-item-eyebrow {
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.35 !important;
}

#top .sticky-item-title {
  /* Reduit le 15/09/2026 : clamp(68px,5.35vw,96px) rendait les titres a 3 mots (ex. "Architecture
     de Perception") protuberants -- 3 lignes pleine graisse a 96px venaient quasiment cogner
     l'image a droite (repere trace par Aboubacar). Echelle baissee d'environ 30% tout en gardant
     le rapport min/vw/max. */
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(46px, 3.75vw, 68px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.052em !important;
  line-height: 0.86 !important;
}

#top .sticky-item-desc {
  max-width: 540px !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(22px, 1.72vw, 29px) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.35 !important;
}

#top .sticky-item-list {
  margin-top: 8px !important;
}

#top .sticky-item-list li {
  grid-template-columns: 46px 1fr !important;
  gap: 14px !important;
  padding: 17px 0 !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

#top .sticky-item-list li b {
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

#top .sticky-item-link {
  gap: 10px !important;
  margin-top: 24px !important;
  padding-bottom: 4px !important;
  border-bottom: none !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
}

#top .sticky-item-link svg {
  width: 9px !important;
  height: 13px !important;
  stroke: var(--brick-ember, #B1230A) !important;
}

#top .discipline-aside {
  margin-top: 24px !important;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 768px) {
  #top .sticky-disciplines-left {
    gap: 18px !important;
  }

  #top .sticky-item-title {
    font-size: clamp(38px, 10.2vw, 54px) !important;
    line-height: 0.88 !important;
  }

  #top .sticky-item-desc {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.3 !important;
  }

  #top .sticky-item-list li {
    grid-template-columns: 40px 1fr !important;
    padding: 14px 0 !important;
    font-size: 14px !important;
  }
}

/* ===========================================================================
   FINITION TYPOGRAPHIQUE : ACCUEIL SENTEKIA
   Système volontairement limité à trois voix :
   Inter (structure), Fraunces (prise de parole éditoriale), IBM Plex Mono
   (repères). Le scope #top préserve les pages et composants historiques.
   Les 3 variables --type-* sont desormais declarees globalement dans :root (fusion du
   14/09/2026, voir son commentaire) -- plus besoin de les redeclarer ici, seul le
   font-synthesis reste propre a ce scope. */

#top {
  font-synthesis: none;
}

/* La signature reste nette et dense ; le crénage négatif est plus contrôlé. */
#top :is(.d-mega, .h0, .h1, .h2, .l-expansive-card__title, .l-three-worlds-sticky__explore-title) {
  font-family: var(--type-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

#top .d-mega {
  font-weight: 800 !important;
  letter-spacing: -0.052em !important;
  line-height: 0.86 !important;
}

/* Les sous-titres de pilier conservent une échelle de système, non de décor. */
#top .text-subtitle {
  font-family: var(--type-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
}

/* Fraunces est réservée aux manifestes et aux moments de lecture lente. */
#top .l-expansive-card__text {
  max-width: 25ch;
  margin-inline: auto;
  font-family: var(--type-editorial) !important;
  font-size: clamp(1.75rem, 2.55vw, 2.55rem) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.22 !important;
}

#top :is(
  .l-expansive-card__video-text,
  .l-expansive-iconic-text,
  .l-expansive-finesse-text,
  .l-expansive-service-text,
  .l-expansive-privacy-text,
  .l-expansive-cut-text p
) {
  font-family: var(--type-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.52 !important;
}

/* Les libellés et contrôles partagent une densité technique et lisible. */
#top :is(.text-small, .btn__text, .meta-tag, [data-reveal='subtitle']) {
  font-family: var(--type-interface) !important;
  font-size: clamp(10px, 0.75vw, 12px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

/* Une signature persistante rend la navigation identifiable, même hors héros. */
.header__content {
  position: relative;
}

.header__content::after {
  content: 'SENTEKIA';
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--black, #111);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  pointer-events: none;
}

.header__content :is(.btn__text, .header__menu-text) {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

/* La bannière de consentement reste dans la même famille de service. */
#onetrust-banner-sdk,
.cky-consent-container,
[class*='cookie'] {
  font-family: 'Inter', system-ui, sans-serif;
}

@media (max-width: 768px) {
  #top .d-mega {
    letter-spacing: -0.06em !important;
    line-height: 0.9 !important;
  }

  #top .l-expansive-card__text {
    max-width: 19ch;
    font-size: clamp(1.55rem, 8vw, 2.1rem) !important;
    line-height: 1.18 !important;
  }

  #top :is(.text-small, .btn__text, .meta-tag, [data-reveal='subtitle']) {
    letter-spacing: 0.06em !important;
  }

  .header__content::after {
    top: 1.125rem;
    font-size: 11px;
  }
}

/* Trigger Badge */
.collage-trigger-badge {
  position: absolute;
  bottom: clamp(14px, 3vh, 26px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.88);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 12;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: all 0.35s ease;
}

.collage-trigger-badge .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brick-ember);
  box-shadow: 0 0 10px var(--brick-ember);
  animation: pulse-dot-anim 1.8s infinite;
}

@keyframes pulse-dot-anim {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.4; }
}

/* Disciplines List (Bottom Left) */
.hero-list {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hero-list li {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: clamp(10.5px, 0.85vw, 13px) !important;
  color: rgba(0, 0, 0, 0.65) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: default !important;
  transition: color 0.25s ease !important;
}

.hero-list li:hover {
  color: var(--brick-ember) !important;
}

/* ==========================================================================
   KINETIC SCRAMBLE TEXT "ARCHITECTE DE PERCEPTION" (BOTTOM LEFT)
   ========================================================================== */
.hero-kinetic-wrap {
  position: absolute !important;
  bottom: clamp(22px, 3.8vh, 48px) !important;
  left: clamp(24px, 4.5vw, 64px) !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  max-width: 52vw !important;
}

.hero-kinetic-text {
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-stretch: semi-expanded !important;
  font-weight: 800 !important;
  font-size: clamp(1.35rem, 2.7vw, 2.85rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  text-transform: uppercase !important;
  color: var(--brick-ember) !important; /* Rouge Grenadine #B1230A */
  -webkit-text-fill-color: var(--brick-ember) !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: transform 0.25s ease !important;
}

.hero-kinetic-text:hover {
  transform: scale(1.02) !important;
}

.hero-kinetic-text .scramble-dud {
  color: rgba(177, 35, 10, 0.42) !important;
  -webkit-text-fill-color: rgba(177, 35, 10, 0.42) !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin: 0 0.5px !important;
}

/* Meta info (Top Right) */
.hero-meta {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 4 !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hero-meta p {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: clamp(10px, 0.78vw, 12px) !important;
  color: rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.hero-meta p.hero-meta-highlight {
  color: var(--brick-ember) !important;
  font-weight: 700 !important;
}

/* Scroll Cue (Bottom Center) */
.scrollcue {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 4 !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-decoration: none !important;
}

.scrollcue span {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

.scrollcue i {
  display: block !important;
  width: 1px !important;
  height: 32px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

.scrollcue i::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--brick-ember) !important;
  animation: cueRun 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite !important;
}

@keyframes cueRun {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

@media (max-width: 768px) {
  .hw-a {
    top: clamp(48px, 6.5vh, 70px) !important;
    left: clamp(16px, 4vw, 24px) !important;
  }
  .hw-b {
    bottom: clamp(16px, 3vh, 35px) !important;
    right: clamp(16px, 4vw, 24px) !important;
  }
  .hero-list, .hero-meta {
    display: none !important;
  }
  .hero-kinetic-wrap {
    bottom: clamp(72px, 10vh, 95px) !important;
    left: clamp(16px, 4vw, 24px) !important;
    max-width: 85vw !important;
  }
  .hero-kinetic-text {
    font-size: clamp(1.1rem, 4.4vw, 1.5rem) !important;
    letter-spacing: -0.01em !important;
  }
  .d-mega {
    font-size: clamp(2.8rem, 13.5vw, 4.8rem) !important;
    line-height: 0.85 !important;
    letter-spacing: -0.04em !important;
  }
  .framer-carousel-backdrop {
    padding: 12px !important;
  }
  .framer-carousel-header {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
  }
  .framer-carousel-main {
    height: clamp(270px, 46vh, 380px) !important;
  }
  .framer-thumbnails-track {
    height: 64px !important;
    gap: 6px !important;
  }
  .framer-thumb-item {
    height: 60px !important;
    width: 32px !important;
  }
  .framer-thumb-item.is-active {
    width: 86px !important;
  }
}

/* ==========================================================================
   FRAMER THUMBNAIL CAROUSEL MODAL (ACCORDION THUMBNAILS ON CARD CLICK)
   ========================================================================== */
.framer-carousel-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(4, 4, 6, 0.92) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: clamp(16px, 3vw, 40px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease !important;
  user-select: none !important;
}

.framer-carousel-backdrop.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Modal Header Bar */
.framer-carousel-header {
  position: absolute !important;
  top: 24px !important;
  left: clamp(20px, 4vw, 48px) !important;
  right: clamp(20px, 4vw, 48px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 10002 !important;
}

.framer-carousel-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.framer-carousel-badge .tag {
  color: var(--brick-ember) !important;
  font-weight: 700 !important;
}

.framer-carousel-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.framer-carousel-close:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  transform: scale(1.05) !important;
}

/* Modal Content Box */
.framer-carousel-box {
  width: 100% !important;
  max-width: 1060px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: auto !important;
  transform: scale(0.92) translateY(20px) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.framer-carousel-backdrop.is-open .framer-carousel-box {
  transform: scale(1) translateY(0) !important;
}

/* Main Display Viewport */
.framer-carousel-main {
  position: relative !important;
  width: 100% !important;
  height: clamp(340px, 52vh, 580px) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #0D0D10 !important;
  box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.9) !important;
}

.framer-carousel-track {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.framer-carousel-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.framer-carousel-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.framer-carousel-slide-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.25) 45%, transparent 100%) !important;
  pointer-events: none !important;
}

.framer-carousel-slide-content {
  position: absolute !important;
  bottom: 24px !important;
  left: 28px !important;
  right: 28px !important;
  color: #FFFFFF !important;
  pointer-events: none !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
}

.framer-carousel-slide-content h3 {
  font-size: clamp(20px, 2.5vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
  color: #FFFFFF !important;
}

.framer-carousel-slide-content p {
  font-size: clamp(12px, 1.1vw, 14.5px) !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  max-width: 680px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Prev / Next Nav Buttons */
.framer-carousel-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(18, 18, 22, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.3s ease !important;
}

.framer-carousel-nav-btn:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.framer-carousel-nav-btn.prev { left: 16px !important; }
.framer-carousel-nav-btn.next { right: 16px !important; }

/* Accordion Thumbnails Strip (Mini Tuiles en Bas) */
.framer-thumbnails-strip {
  width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 4px 0 !important;
}

.framer-thumbnails-strip::-webkit-scrollbar {
  display: none !important;
}

.framer-thumbnails-track {
  display: flex !important;
  gap: 8px !important;
  margin: 0 auto !important;
  width: fit-content !important;
  align-items: center !important;
  height: 84px !important;
}

.framer-thumb-item {
  height: 78px !important;
  width: 40px !important; /* Collapsed width */
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  opacity: 0.45 !important;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-color 0.3s ease, transform 0.35s ease !important;
}

.framer-thumb-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.framer-thumb-item:hover {
  opacity: 0.85 !important;
}

.framer-thumb-item.is-active {
  width: 130px !important; /* Expanded active mini-tuile */
  opacity: 1 !important;
  border-color: var(--brick-ember) !important;
  box-shadow: 0 0 20px rgba(177, 35, 10, 0.45) !important;
}

/* ==========================================================================
   STICKY CONTENT WRAPPER (GSAP SCROLLTRIGGER 4 DISCIPLINES)
   ========================================================================== */
.sticky-disciplines-section {
  position: relative !important;
  width: 100% !important;
  height: 440vh !important;
  background-color: #eee5d9 !important;
  box-sizing: border-box !important;
}

.sticky-disciplines-inner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  display: none !important;
  overflow: hidden !important;
  background-color: #eee5d9 !important;
  z-index: 15 !important;
  pointer-events: none !important;
  will-change: transform, clip-path;
}

/* ══════════════════════════════════════════════════════════════
   NOHO ZERO-GAP DOCKING STACK SYSTEM (5 DISCIPLINES)
   ══════════════════════════════════════════════════════════════ */
.disciplines-sticky-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 7vh, 76px) 0 clamp(20px, 3vh, 32px) 0;
  box-sizing: border-box;
  pointer-events: none;
}

.disciplines-cards-stage {
  position: relative;
  width: 100%;
  height: clamp(580px, 84vh, 780px);
  padding-left: clamp(24px, 5vw, 80px);
  pointer-events: none;
}

/* ── CARTE DE DISCIPLINE (CONFORME STRICTEMENT À LA CAPTURE NOHO) ── */
.story-card {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: clamp(560px, 60vw, 840px);
  background: var(--card-bg, #eae3d8);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: clamp(28px, 3.2vw, 46px) clamp(28px, 3.2vw, 48px) clamp(32px, 4vh, 50px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  will-change: transform;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  border-radius: 0 !important;
  transition: background-color 0.3s ease, box-shadow 0.25s ease;
  pointer-events: auto !important;
  touch-action: none;
  box-sizing: border-box;
}

.story-card:first-child {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.story-card.is-docked {
  box-shadow: -15px 0 35px rgba(0, 0, 0, 0.12);
  background: var(--card-docked, #dfd7cc);
}

/* Point indicateur noir en haut à droite */
.card-dot {
  position: absolute;
  top: clamp(28px, 3.2vw, 44px);
  right: clamp(28px, 3.2vw, 44px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111111;
  opacity: 0.95;
}

/* 1. Header de carte : hauteur verrouillée commune */
.card-header-block {
  padding-right: 48px;
  height: clamp(165px, 21vh, 215px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 60px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.88 !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  margin: 0 0 clamp(12px, 1.6vh, 18px) 0 !important;
}

.card-desc {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(14.5px, 1.2vw, 17.5px) !important;
  letter-spacing: -0.012em !important;
  line-height: 1.48 !important;
  color: rgba(17, 17, 17, 0.82) !important;
  max-width: 56ch !important;
  margin: 0 !important;
}

/* 2. Split inférieur : Position Y et hauteur strictement identiques */
.card-content-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.85fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
  margin-top: auto;
  height: clamp(250px, 36vh, 360px);
  flex-shrink: 0;
}

.card-visual-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
}

.card-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card:hover .card-visual-frame img {
  transform: scale(1.035);
}

.card-action-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(16px, 2.2vh, 28px);
}

/* 3 Piliers d'autorité */
.card-pillars-list {
  list-style: none !important;
  margin: 0 0 clamp(16px, 2vh, 22px) 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-pillars-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(11.5px, 0.95vw, 13px) !important;
  line-height: 1.35 !important;
  color: rgba(17, 17, 17, 0.82) !important;
  font-weight: 500 !important;
}

.card-pillars-list .pillar-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #B1230A !important;
  letter-spacing: 0.05em !important;
}

.card-divider-line {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin-bottom: 24px;
}

.card-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #111111 !important;
  transition: transform 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.cta-red-chevron {
  color: #B1230A !important;
  font-size: 1.35em !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  transform: translateY(-1px);
  margin-left: 2px;
}

.story-card:hover .card-cta-link {
  transform: translateX(3px);
}

/* ── NUANCES COLORÉES PAR CARTE DANS LA GAMME SENTEKIA ── */
.story-card[data-card-index="0"] { --card-bg: #eae3d8; --card-docked: #dfd7cc; }
.story-card[data-card-index="1"] { --card-bg: #dad5ca; --card-docked: #cfcac0; }
.story-card[data-card-index="2"] { --card-bg: #d7cdbf; --card-docked: #ccbfb0; }
.story-card[data-card-index="3"] { --card-bg: #e2cec9; --card-docked: #d6beba; }
.story-card[data-card-index="4"] { --card-bg: #e4d7d4; --card-docked: #d8c7c4; }

/* Barre de progression inférieure */
.stage-progress-bar {
  position: absolute;
  bottom: 20px;
  left: clamp(24px, 5vw, 80px);
  right: clamp(24px, 5vw, 80px);
  height: 2px;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.stage-progress-fill {
  height: 100%;
  width: 0%;
  background: #B1230A;
  transition: width 0.1s linear;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .disciplines-cards-stage {
    padding-left: 24px;
    height: clamp(540px, 76vh, 660px);
  }
  .story-card {
    width: min(85vw, 600px);
    padding: 28px 24px 32px;
  }
}

@media (max-width: 768px) {
  .disciplines-cards-stage {
    padding-left: 18px;
    height: clamp(520px, 80vh, 620px);
  }
  .story-card {
    width: calc(100vw - 36px);
    padding: 24px 20px 24px;
  }
  .card-header-block {
    height: auto;
    padding-right: 28px;
    margin-bottom: 12px;
  }
  .card-title {
    font-size: clamp(24px, 6.8vw, 32px) !important;
    line-height: 0.92 !important;
    margin-bottom: 8px !important;
  }
  .card-desc {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
  .card-content-split {
    grid-template-columns: 1fr;
    height: auto;
    gap: 14px;
  }
  .card-visual-frame {
    height: 160px;
  }
  .card-pillars-list {
    display: none !important;
  }
  .card-divider-line {
    margin-bottom: 12px;
  }
  .card-action-block {
    padding-bottom: 0;
  }
}

/* Effet demande le 04/09/2026 : les 5 disciplines defilent horizontalement
   (translateX du rail complet) au rythme du scroll vertical (voir initStickyDisciplinesEngine). */
.hscroll-track {
  display: flex !important;
  height: 100% !important;
  width: 500vw !important; /* 5 panneaux x 100vw */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important; /* c'est un <ul>, reset du style navigateur par defaut */
  will-change: transform;
}

.hscroll-panel {
  flex: 0 0 100vw !important;
  width: 100vw !important;
  height: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  /* padding gauche seule : la tuile image (a droite) doit atteindre le bord de l'ecran,
     voir .sticky-disciplines-right ci-dessous -- repere trace par Aboubacar le 04/09/2026. */
  padding: 0 0 0 clamp(24px, 5vw, 80px) !important;
  box-sizing: border-box !important;
  background-color: #EFE9E1 !important;
}

/* Scroll Cue -- hors du rail (sinon il glisserait horizontalement avec les panneaux) */
.sticky-disciplines-cue {
  position: absolute !important;
  bottom: clamp(24px, 4vh, 40px) !important;
  left: clamp(24px, 5vw, 80px) !important;
  z-index: 30 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: none !important;
}

.sticky-cue-text {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.sticky-cue-svg polyline {
  animation: stickyFadeDown 1.4s ease-in-out infinite !important;
}
.sticky-cue-svg .chev2 { animation-delay: 0.22s !important; }
.sticky-cue-svg .chev3 { animation-delay: 0.44s !important; }

@keyframes stickyFadeDown {
  0%   { opacity: 0.12; transform: translateY(-3px); }
  50%  { opacity: 0.85; transform: translateY(2px); }
  100% { opacity: 0.12; transform: translateY(-3px); }
}

/* Left Column (Texts) -- un seul jeu de contenu par panneau desormais (plus de crossfade
   empile), donc plus besoin de position:absolute ni de bascule .is-active. */
.sticky-disciplines-left {
  position: relative !important;
  width: 44% !important;
  /* Le panneau (.sticky-disciplines-inner) est en position:fixed top:0, donc sous le header
     fixe (z-index 9999) qui le recouvre visuellement sans reduire sa hauteur. Un titre a 4
     lignes (ex. "IA / NATIVE / EN / 21 / JOURS") centre sur 100% de hauteur depassait alors
     par le haut et se faisait avaler par le header -- corrige le 14/09/2026 en reservant
     l'espace du header avant de centrer verticalement. */
  height: calc(100% - clamp(88px, 11vh, 120px)) !important;
  margin-top: clamp(88px, 11vh, 120px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(10px, 1.6vh, 20px) !important;
}

.sticky-item-eyebrow {
  /* Outfit (04/09/2026) remplacait Space Mono car ce dernier n'etait alors jamais charge sur
     ce theme. Depuis, Space Mono est reellement importe (voir l'@import en tete de fichier,
     confirme par l'audit du 14/09/2026) -- retour au mono pour ce label, coherent avec le
     reste des eyebrows/tags du site (.meta-tag, .text-small, .ssf-eyebrow...). */
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #B1230A !important;
}

.sticky-item-title {
  
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  /* ATTENTION taille : la racine du site fixe 1rem = 10px (verifie : getComputedStyle sur
     <html> renvoie 10px), pas les 16px par defaut du navigateur -- donc clamp(4rem,9.5vw,11rem)
     valait reellement clamp(40px,9.5vw,110px), pas clamp(64px,9.5vw,176px) comme je l'avais
     suppose. A 110px, "Zalando Sans SemiExpanded" (elargie par nature, contrairement a une
     police condensee) fait deborder "Architecture" de 354px hors de sa colonne de 602px --
     mesure en scrollant reellement jusqu'au 4e panneau. Nouveau plafond calcule pour que le mot
     le plus long ("Architecture", le pire cas des 4 titres) tienne dans la colonne a toutes les
     largeurs d'ecran desktop. */
  font-size: clamp(4.5rem, 4.5vw, 6.5rem) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ══════════════════════════════════════════════════════════════
   HSHUTTER · reveal "obturateur" caractere par caractere
   ══════════════════════════════════════════════════════════════
   Demande le 04/09/2026 sur le modele d'un composant React/Framer Motion : chaque lettre du
   titre est dessinee 4 fois superposees (1 couche principale qui se floute puis se revele, 3
   "tranches" horizontales du meme caractere qui glissent et clignotent l'une apres l'autre),
   rejoue a chaque fois qu'un panneau devient actif pendant le scroll horizontal (voir
   initStickyDisciplinesEngine : retrait puis remise de la propriete CSS animation = astuce
   standard pour forcer un redemarrage a 0%, un simple changement de classe ne suffit pas a
   relancer une animation deja jouee). Porte en CSS/JS pur, pas de Framer Motion sur ce site
   statique. Couleurs des tranches alignees sur l'accent rouge SENTEKIA (#B1230A), pas
   indigo/emerald comme la reference d'origine. */
.hshutter-word {
  display: block !important;
  white-space: nowrap !important;
}

.hshutter-char {
  position: relative !important;
  display: inline-block !important;
}

.hshutter-main {
  display: inline-block !important;
  opacity: 0;
  filter: blur(10px);
  animation: hshutterMain 0.8s ease forwards;
  animation-play-state: paused;
  animation-delay: calc(var(--i, 0) * 0.04s + 0.3s);
}

.hshutter-slice {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  animation-play-state: paused;
}

.hshutter-top,
.hshutter-bottom {
  color: #B1230A !important;
  animation-name: hshutterSliceA;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.hshutter-mid {
  color: #1a1a1a !important;
  animation-name: hshutterSliceB;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.hshutter-top {
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation-delay: calc(var(--i, 0) * 0.04s);
}
.hshutter-mid {
  clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%);
  animation-delay: calc(var(--i, 0) * 0.04s + 0.1s);
}
.hshutter-bottom {
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation-delay: calc(var(--i, 0) * 0.04s + 0.2s);
}

@keyframes hshutterMain {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes hshutterSliceA {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes hshutterSliceB {
  0%   { transform: translateX(100%); opacity: 0; }
  50%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* Passee en accent editorial italique (Fraunces) le 14/09/2026, sur le modele de la reference
   d'Aboubacar (localhost:10000, redesign "Direction Artistique" -- classe .intro) : role exact
   que --font-accent-serif tient deja sur .l-luxury-title__bottom, applique ici pour la premiere
   fois a un paragraphe de contenu plutot qu'a un simple accent court. */
.sticky-item-desc {
  font-family: var(--type-editorial, 'Fraunces', serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.3rem, 1.9vw, 1.9rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  color: rgba(0, 0, 0, 0.82) !important;
  margin: 0 !important;
  max-width: 540px !important;
}

/* Restyle le 14/09/2026 : la liste a puces devient une grille de "preuves" numerotees (01/02/03
   en rouge SENTEKIA + IBM Plex Mono), sur le modele de .proofs/.proof de la reference
   d'Aboubacar. Contenu inchange (les 3 <li> existants de chaque panneau), seule la marque
   visuelle change -- <b> numerote ajoute dans le markup a la place du point rouge. */
.sticky-item-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.sticky-item-list li {
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(0.85rem, 1vw, 1rem) !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.78) !important;
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  gap: 12px !important;
  align-items: baseline !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.sticky-item-list li b {
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: #B1230A !important;
}

.sticky-item-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  text-decoration: none !important;
  margin-top: 18px !important;
  position: relative !important;
  width: fit-content !important;
  border-bottom: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
  pointer-events: auto !important;
}

.sticky-item-link:hover {
  transform: translateX(4px) !important;
}

.sticky-item-link span {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  padding: 2px 0 !important;
}

.sticky-item-link span::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  mask: repeating-linear-gradient(90deg, transparent 0, transparent 4px, black 5px, black 6px) !important;
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0, transparent 4px, black 5px, black 6px) !important;
  background: linear-gradient(90deg, transparent 0%, rgba(177, 35, 10, 0.2) 25%, var(--brick-ember, #B1230A) 50%, #000000 65%, transparent 100%) !important;
  filter: drop-shadow(0 0 4px rgba(177, 35, 10, 0.6)) !important;
  animation: skSlitBarsSweep 2.8s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes skSlitBarsSweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

.sticky-item-link svg {
  width: 9px !important;
  height: 13px !important;
  stroke: #B1230A !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sticky-item-link:hover svg {
  transform: translateX(4px) !important;
}

/* Note de direction (aside) + legende d'image, ajoutees le 14/09/2026 : structure reprise de
   la reference d'Aboubacar (localhost:10000, redesign "Direction Artistique" -- classes .aside
   et .visual-label), jamais presentes ici avant ce jour. */
.discipline-aside {
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  color: rgba(0, 0, 0, 0.55) !important;
  margin: 4px 0 0 !important;
  max-width: 460px !important;
}
.discipline-aside b {
  color: #B1230A !important;
  font-weight: 500 !important;
}

.discipline-visual-label {
  position: absolute !important;
  /* z-index 6 : au-dessus de .sticky-image-wipe (5), qui reste dans le DOM apres son animation
     de reveal -- verifier que la legende n'est jamais recouverte quelle que soit la phase. */
  z-index: 6 !important;
  left: 22px !important;
  bottom: 20px !important;
  color: #fff !important;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}
.discipline-visual-label::before {
  content: "" !important;
  display: inline-block !important;
  width: 26px !important;
  height: 1px !important;
  background: #B1230A !important;
}

/* Right Column (Images) : tuile en plein bord droit et jusqu'en bas de l'ecran, repere
   trace par Aboubacar le 04/09/2026 -- seul un leger degagement subsiste sous le header. */
.sticky-disciplines-right {
  position: relative !important;
  align-self: flex-end !important;
  width: 46% !important;
  height: calc(100svh - 84px) !important;
  overflow: hidden !important;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 0px !important;
}

/* Un seul visuel par panneau desormais (les panneaux sont cote a cote, plus empiles) :
   plus besoin du wrapper .sticky-image-item ni de son z-index, l'image est l'enfant direct
   de .sticky-disciplines-right. Zoom Ken Burns (scale 1.14 -> 1) rejoue par
   replayImageReveal a chaque activation du panneau, meme registre que le zoom du composant
   de reference "parallax-strip-slider" -- voir .sticky-image-wipe ci-dessous pour les bandes. */
.sticky-disciplines-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: scale(1.14) !important;
  animation: stickyImageZoomSettle 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;
}

@keyframes stickyImageZoomSettle {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   WIPE REVEAL · bandes verticales sur l'image, demande le 13/09/2026
   ══════════════════════════════════════════════════════════════
   Sur le modele du composant reference "parallax-strip-slider" (bandes verticales qui se
   retirent en cascade) -- meme registre que le shutter reveal du texte (.hshutter-*
   ci-dessus), applique a l'image plutot qu'au caractere. Chaque bande est un simple cache de
   la couleur de fond du panneau (#EFE9E1, meme valeur que .hscroll-panel) qui se retracte en
   scaleX(0) depuis le bord droit, avec un delai en cascade (var(--i)) -- pas de fragmentation
   reelle de l'image en N crops comme la reference React, inutile ici pour le meme effet
   visuel. Rejouee par replayImageReveal a chaque activation du panneau (voir
   initStickyDisciplinesEngine). */
.sticky-image-wipe {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  pointer-events: none !important;
}

.wipe-strip {
  flex: 1 1 0 !important;
  height: 100% !important;
  background-color: #EFE9E1 !important;
  transform-origin: right !important;
  animation: wipeStripReveal 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-play-state: paused;
  animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes wipeStripReveal {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Mobile/tablette uniquement (redesign du 13/09/2026) -- masquee par defaut, voir le bloc
   @media (max-width: 1024px) plus bas pour son affichage et son style. */
.discipline-accent-bar {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  /* Redesign du 13/09/2026 (fiche fournie par Aboubacar) : l'image passe en plein bord
     (edge-to-edge, sans gutter lateral) et occupe ~50% de l'ecran, une barre d'accent rouge
     la separe du texte, et c'est le texte seul qui porte le gutter lateral desormais --
     avant ce correctif, le gutter etait pose sur .hscroll-panel entier (donc aussi sur
     l'image, jamais plein bord) et l'image ne faisait que 38% de l'ecran. */

  /* Bug remonte le 13/09/2026 (capture d'ecran d'Aboubacar, decroche visible en haut a
     gauche pendant le glissement horizontal) : le degagement sous le header (60px) etait
     pose sur CHAQUE .hscroll-panel individuellement. Comme les panneaux glissent cote a
     cote (rail horizontal), chacun affichait SON PROPRE bandeau creme de 60px au-dessus de
     SA PROPRE image -- pendant la transition, ces deux bandeaux independants se juxtaposaient
     en escalier au lieu de ne former qu'un seul bandeau continu. Fix a la racine : le
     degagement est pose UNE SEULE FOIS sur le calque fixe partage (.sticky-disciplines-inner,
     jamais concerne par le glissement horizontal), plus du tout sur .hscroll-panel -- il n'y
     a alors physiquement plus qu'un seul bandeau, impossible a dedoubler. */
  .sticky-disciplines-inner {
    padding-top: 60px !important;
    box-sizing: border-box !important;
  }
  /* Bug remonte le 13/09/2026 (2e capture d'ecran d'Aboubacar, gap toujours visible sur son
     telephone reel apres le premier correctif) : .sticky-disciplines-left avait height:auto
     SANS flex-grow, pendant que .sticky-disciplines-right gardait une hauteur FIXE (50%).
     Le texte n'a pas la meme longueur sur les 4 disciplines -- des que (texte + barre + image
     50%) faisait MOINS que 100% de la hauteur du panneau (ex. "IA Native en 21 jours", texte
     plus court que "Branding Strategique"), justify-content:flex-start empilait le contenu
     depuis le bas (sens du column-reverse) et laissait l'espace en trop tout en haut --
     exactement au-dessus de l'image, invisible sur mon emulation (jamais teste avec un texte
     assez court pour reveler l'ecart) mais visible sur un vrai telephone avec ce panneau
     precis. Fix a la racine : le texte absorbe tout l'espace restant (flex-grow), l'image
     garde sa hauteur fixe -- la somme vaut alors toujours 100% du panneau, quelle que soit la
     longueur du texte, aucun vide residuel possible. */
  .hscroll-panel {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 0 24px !important;
  }
  .sticky-disciplines-left {
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 20px 20px 0 !important;
    box-sizing: border-box !important;
  }
  .sticky-disciplines-right {
    align-self: stretch !important;
    width: 100% !important;
    flex: 0 0 50% !important;
    height: auto !important;
    min-height: 280px !important;
  }
  .discipline-accent-bar {
    display: block !important;
    width: 100% !important;
    height: 8px !important;
    background: var(--brick-ember) !important;
    flex-shrink: 0 !important;
  }
  .sticky-item-title {
    font-size: clamp(1.5rem, 4.8vw, 2.2rem) !important;
  }
  .sticky-item-desc {
    /* Taille remontee le 14/09/2026 avec le passage a Fraunces italique -- 0.9rem (9px)
       devenait illisible en serif italique sur mobile, contrairement a l'ancien Inter droit. */
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
  }
  .sticky-disciplines-cue {
    display: none !important;
  }
}


#collection {
  /* Passe de bordeaux a noir le 13/09/2026, demande explicite d'Aboubacar. Une video de fond
     a ete essayee le meme jour puis retiree (object-fit:cover la recadrait/zoomait, degradant
     sa nettete percue) -- fond noir plein, sans animation, retenu a la place. */
  background: #000000 !important;
  position: relative !important;
}


.l-three-worlds-sticky__title-word {
  font-family: var(--type-display) !important;
  font-stretch: semi-expanded !important;
  font-size: clamp(4.5rem, 4.5vw, 6.5rem) !important;
  line-height: 1.05 !important;
  padding-top: 0 !important;
}


.h0,
.text-subtitle,
.l-expansive-card__title {
  font-family: var(--type-display) !important;
}

.l-three-worlds-sticky__title-word::before,
.l-three-worlds-sticky__title-word::after {
  content: none !important;
}

.l-three-worlds-sticky__title-word + .l-three-worlds-sticky__title-word {
  margin-top: 6px !important;
}

/* Le titre et son descriptif forment un seul item du plugin content-animation. Chaque cran de
   scroll fait donc apparaitre un bloc editorial complet, sans synchronisation JavaScript. */
.tw-desc {
  display: block !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: clamp(16px, 1.6vw, 22px) !important;
  font-weight: 500 !important;
  color: rgba(249, 249, 249, 0.72) !important;
  max-width: min(560px, 86vw) !important;
  margin: 10px auto 0 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* Agencement compact demande le 16/09/2026 (2 captures comparees, la bonne et la barree en
   rouge) : le mot doit rester collé à sa phrase, comme un seul bloc centré. La classe pb-1 du
   theme ajoutait un padding-bas sous le mot, qui detachait visuellement les deux. */
#collection [data-content-animation-item] .h0 {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  color: #FFFFFF !important;
}

.tw-desc::before,
.tw-desc::after {
  content: none !important;
}

/* L'image occupe la moitie haute et le panneau noir la moitie basse. Le centre visuel du
   panneau noir se trouve donc a 75% de la hauteur de la zone sticky. */
#collection .l-three-worlds-sticky__titles {
  top: 75% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

#threeWorldsShutterTitle {
  /* transform plutot que margin-top negatif : un margin negatif ici a casse le centrage
     text-center herite du theme (constate a l'ecran, texte plaque a gauche) -- un transform
     ne touche jamais au flux/centrage, purement visuel. */
  transform: translateY(-40px) !important;
}

/* Menu plein ecran (hamburger) -- demande du 13/09/2026 : les libelles "Chapitre N" et les
   titres de section etaient quasi invisibles (couleur heritee d'une variable theme prevue pour
   fond clair, a 20-40% d'opacite en plus, sur le fond noir du menu). Force un blanc casse/beige
   creme coherent avec la charte, sans toucher aux regles d'opacite existantes (etat actif au
   survol) qui restent la seule gestion de hierarchie visuelle. */
.modal--menu .menu__link-title,
.modal--menu .menu__link-sub-title {
  color: #F2EFE6 !important;
}

/* #tenets : arret net de la sequence horizontale apres le panneau Exclusivite Radicale
   (Pilier 05), coupant les slides superflus (demande explicite d'Aboubacar avec capture). */
#tenets-cut-point,
#tenets-cut-point ~ * {
  display: none !important;
}

/* Roll au survol des titres du menu plein ecran -- voir renderRollText dans
   build_sentekia_html.js pour le markup genere (deux copies du mot empilees). */
.menu__link-title .roll-text {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0.85;
}
.menu__link-title .roll-layer {
  display: block;
}
.menu__link-title .roll-layer--bottom {
  position: absolute;
  inset: 0;
}
.menu__link-title .roll-char {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: var(--rd, 0ms);
}
.menu__link-title .roll-layer--bottom .roll-char {
  transform: translateY(100%);
}
.menu__link:hover .roll-layer--top .roll-char {
  transform: translateY(-100%);
}
.menu__link:hover .roll-layer--bottom .roll-char {
  transform: translateY(0);
}


.l-expansive-slider {
  align-items: stretch;
  display: flex;
}
.l-expansive-slider__item {
  flex: 0 0 auto;
  height: 100svh;
  min-width: 0;
}
.l-expansive-slider__item > .row {
  height: 100%;
}
.l-expansive-slider__item--bottom {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Positionnement Exclusivite Radicale (demande du 14/09/2026) :
   Dans le template d'origine, .l-expansive-amenities-title avait un margin-top: -0.55em
   qui faisait remonter le titre sur le bas des visuels.
   Correction : marge superieure positive pour descendre le titre dans la zone blanche
   situee sous les peintures (zone marquee par le cadre rouge d'Aboubacar).
   Zero chevauchement avec les visuels, marge equilibree au bas du panneau. */
#top .l-expansive-amenities-title {
  margin-top: clamp(40px, 6vh, 64px) !important;
  padding-bottom: clamp(1rem, 2vh, 2rem) !important;
  position: relative !important;
  clear: both !important;
}
/* Bug trouve en verifiant ce correctif (14/09/2026) : la regle "#top :is(.text-small,
   .btn__text, .meta-tag, [data-reveal='subtitle'])" (passe de finition d'Aboubacar) ciblait
   [data-reveal='subtitle'] pour les PETITS libelles (eyebrows), mais ce meme attribut est
   AUSSI pose sur "Exclusivite" ici -- collision de role sous le meme attribut : le mot
   retombait a 10px, tout en majuscules, en mono, invisible a l'echelle voulue (cause probable
   du chevauchement signale : le texte etait sense etre grand). Restaure ici a une echelle
   assortie a son mot-titre voisin (.h1 "Radicale", 80px). Casse normale (pas de majuscules
   forcees), Inter (pas Fraunces -- role structurel, pas editorial).
   MEME ATTRIBUT REUTILISE ailleurs dans les 4 Piliers (Perception, Precision, Elegance,
   Excellence, Confidentialite, au-dessus, chacun dans sa propre classe de conteneur) --
   probablement affectes du meme bug, mais PAS corriges ici : seul ce panneau precis a ete
   demande. A confirmer avec Aboubacar avant de generaliser. */
/* #top prefixe ici (pas juste 2 classes) : la regle fautive plus haut est
   "#top :is(...[data-reveal='subtitle'])", specificite ID+attribut -- une regle a 2 classes
   seule (sans l'ID) ne suffisait pas a la battre, verifie en direct (font-size restait a 12px
   malgre ce bloc). */
#top .l-expansive-amenities-title .text-color-primary {
  color: #B1230A !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(38px, 5vw, 60px) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}

/* Couleur rouge de marque SENTEKIA (#B1230A) sur "Perception" (1er pilier) :
   Harmonisation avec la charte graphique (demande du 14/09/2026). */
#top .l-expansive-card__video-title .text-color-primary,
#top .l-expansive-spaces-title .text-color-primary {
  color: #B1230A !important;
}
.l-expansive-slider__item--bottom > .row {
  height: auto;
}
.l-expansive-slider__item + .l-expansive-slider__item {
  margin-left: -1px;
}
.l-expansive-slider__item--full {
  background: transparent;
  width: 100vw;
}
.l-expansive-slider__item--full-image .img-full,
.l-expansive-slider__item--full-image .img-full img {
  height: 100svh;
}
.l-expansive-slider__item--lifestyle-video {
  width: 100vw;
  height: 100svh;
  min-width: 100vw;
  flex: 0 0 100vw;
  overflow: hidden;
  position: relative;
  background: #000000;
}
.l-expansive-slider__item--lifestyle-video video {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}
.l-expansive-slider__item-full-video {
  overflow: hidden;
}
.l-expansive-slider__item-col-bottom {
  align-self: flex-end;
}
/* Calibrage de la hauteur sticky pour que l'enchainement avec #selection
   soit continu et naturel, sans temps mort apres Exclusivite Radicale. */
.l-tenets-sticky {
  height: 280svh !important;
}
/* Ce panneau ne servait qu'au repli vertical simplifie d'origine (titre duplique, affiche
   uniquement en dessous de 568px) : le vrai texte complet du meme pilier vit deja dans le
   panneau ".--bottom" du carrousel. Puisque mobile suit maintenant le meme carrousel que
   desktop, ce doublon reste cache dans tous les cas (il n'a jamais eu de largeur pensee pour
   un contexte flex horizontal, d'ou le panneau demesure constate sur mobile). */
.l-expansive-slider .is-hidden--md-up {
  display: none !important;
}

/* ==========================================================================
   SCROLL MOBILE FLUIDE #tenets -> #selection (14/09/2026)
   Resout le saut brutal et la zone morte apres le 4e pilier sur mobile :
   1. Largeur de 100vw par panneau sur mobile pour un carrousel equilibre
      et regulier, chaque panneau occupant exactement la largeur de l'ecran.
   2. Le 4e pilier (Exclusivite Radicale) dispose de sa pleine largeur 100vw
      sans etre compresse ni coupe.
   3. Calibrage de la hauteur sticky pour que l'enchainement avec #selection
      soit continu et naturel, sans temps mort.
   ========================================================================== */
@media (max-width: 979px) {
  .l-tenets-sticky {
    height: 280svh !important;
  }
  .l-expansive-section {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }
  .l-expansive-section .sticky-slider {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .l-expansive-section .sticky-slider__sticky {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 2 !important;
    background: #FDFBF7 !important;
  }
  .l-expansive-section .l-expansive-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 100svh !important;
    height: 100vh !important;
    width: max-content !important;
    will-change: transform !important;
  }
  .l-expansive-section .l-expansive-slider__item {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: 0 0 100vw !important;
    height: 100svh !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .l-expansive-section .l-expansive-slider__item.is-hidden--md-up {
    display: none !important;
  }
  .l-expansive-section .l-expansive-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2rem 1.5rem !important;
    box-sizing: border-box !important;
    background: #FDFBF7 !important;
  }
  .l-expansive-section .l-expansive-card * {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .l-expansive-section .l-expansive-card__title h2 {
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: clamp(36px, 12vw, 56px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    margin: 0 0 1.25rem 0 !important;
    text-align: center !important;
  }
  .l-expansive-section .l-expansive-slider__item--full-image,
  .l-expansive-section .l-expansive-slider__item--full-image .img-full,
  .l-expansive-section .l-expansive-slider__item--full-image .img-full img,
  .l-expansive-section .l-expansive-slider__item--lifestyle-video video {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    height: 100vh !important;
    object-fit: cover !important;
    display: block !important;
  }
  .l-expansive-section [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }
  .l-expansive-section .is-invisible,
  .l-expansive-section .is-invisible--js {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .l-expansive-section .l-expansive-slider__item--bottom,
  .l-expansive-section .l-expansive-slider__item:nth-child(6),
  .l-expansive-section .l-expansive-slider__item:nth-child(8) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 2.5rem 1.5rem 3rem !important;
    background: #FDFBF7 !important;
  }
  .l-expansive-section .l-expansive-slider__item--bottom .row,
  .l-expansive-section .l-expansive-slider__item:nth-child(6) .row,
  .l-expansive-section .l-expansive-slider__item:nth-child(8) .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
  .l-expansive-section .l-expansive-slider__item--bottom .col,
  .l-expansive-section .l-expansive-slider__item:nth-child(6) .col,
  .l-expansive-section .l-expansive-slider__item:nth-child(8) .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .l-expansive-section .l-expansive-slider__item:nth-child(6) .col.l-expansive-finesse-bottom {
    order: 1 !important;
  }
  .l-expansive-section .l-expansive-slider__item:nth-child(6) .col:not(.l-expansive-finesse-bottom):not(.l-expansive-finesse-images):not(:empty) {
    order: 2 !important;
  }
  .l-expansive-section .l-expansive-slider__item:nth-child(8) .row > .col:nth-child(2) {
    order: 1 !important;
  }
  .l-expansive-section .l-expansive-slider__item:nth-child(8) .row > .col:nth-child(1) {
    order: 2 !important;
  }
  .l-expansive-section .l-expansive-slider__item:nth-child(6) .col.l-expansive-finesse-images,
  .l-expansive-section .l-expansive-slider__item:nth-child(6) .col:empty,
  .l-expansive-section .l-expansive-slider__item:nth-child(8) .col:empty,
  .l-expansive-section .l-expansive-slider__item:nth-child(8) .col--md-2,
  .l-expansive-section .col.l-expansive-finesse-images,
  .l-expansive-section .l-expansive-finesse-images,
  .l-expansive-section .l-expansive-amenities-images,
  .l-expansive-section .l-expansive-slider__item--bottom picture {
    display: none !important;
  }
  .l-expansive-section .l-expansive-iconic-title,
  .l-expansive-section .l-expansive-finesse-title,
  .l-expansive-section .l-expansive-amenities-title {
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    margin: 0 0 1.25rem 0 !important;
    text-align: center !important;
  }
  .l-expansive-section :is(.l-expansive-iconic-title, .l-expansive-finesse-title, .l-expansive-amenities-title) .text-subtitle {
    display: block !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #B1230A !important;
    margin-bottom: 0.35rem !important;
  }
  .l-expansive-section :is(.l-expansive-iconic-title, .l-expansive-finesse-title, .l-expansive-amenities-title) .h1 {
    display: block !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: clamp(30px, 8.5vw, 40px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    line-height: 1.05 !important;
  }
  #top .l-expansive-section :is(.l-expansive-iconic-text, .l-expansive-finesse-text, .l-expansive-amenities-text),
  #top .l-expansive-section p.h3 {
    font-family: var(--type-editorial, 'Fraunces', serif) !important;
    font-style: italic !important;
    font-size: clamp(16px, 4.5vw, 19px) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    color: #222222 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
  }
}

/* Dernière couche : elle suit les règles héritées du thème et protège
   l'échelle éditoriale des textes des Piliers. */
#top .l-expansive-card__text {
  max-width: 22ch !important;
  font-size: clamp(42px, 2.7vw, 52px) !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.22 !important;
}

/* Passe en Fraunces gras italique le 14/09/2026 (Aboubacar, capture d'ecran a l'appui sur
   .l-expansive-card__video-text -- "Nous avons depasse les limites...") : ces classes
   partagent deja le meme role (paragraphe manifeste accompagnant un visuel de pilier), traitees
   comme un seul groupe par le reste de ce fichier -- la meme regle s'applique aux 5 pour rester
   coherent au sein du composant plutot que d'isoler un seul pilier. Poids italique 600 ajoute a
   l'import Fraunces (voir build_sentekia_html.js) : #top{font-synthesis:none} interdit tout
   gras simule par le navigateur, donc sans ce poids reellement charge, "font-weight:600" ici
   n'aurait produit aucun gras visible. */
#top :is(
  .l-expansive-card__video-text,
  .l-expansive-iconic-text,
  .l-expansive-finesse-text,
  .l-expansive-service-text,
  .l-expansive-cut-text p
) {
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  font-size: clamp(18px, 1.05vw, 20px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.45 !important;
}

#top .l-expansive-privacy-text {
  font-size: clamp(34px, 2.7vw, 48px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}

@media (max-width: 768px) {
  /* Vrai dernier mot du fichier pour cette regle (5 doublons trouves au total) -- corrige le
     16/09/2026 en meme temps que .l-expansive-card__title .h0, meme demande. */
  #top .l-expansive-card__text {
    max-width: 22ch !important;
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.4 !important;
  }

  #top :is(
    .l-expansive-card__video-text,
    .l-expansive-iconic-text,
    .l-expansive-finesse-text,
    .l-expansive-service-text,
    .l-expansive-cut-text p
  ) {
    font-size: 18px !important;
  }

  #top .l-expansive-privacy-text {
    font-size: clamp(27px, 8vw, 38px) !important;
  }
}

/* Priorite mobile finale. Ce bloc doit rester le dernier de la feuille. */
@media (max-width: 768px) {
  .header {
    height: calc(64px + env(safe-area-inset-top)) !important;
    min-height: calc(64px + env(safe-area-inset-top)) !important;
  }

  .header__content {
    height: 100% !important;
    padding: env(safe-area-inset-top) var(--mobile-gutter) 0 !important;
  }

  .header__content::after {
    top: calc(env(safe-area-inset-top) + 24px) !important;
    font-size: 11px !important;
  }

  .header__content-right {
    display: none !important;
  }

  .header__content-left a.btn {
    min-width: 44px !important;
    min-height: 44px !important;
    gap: 8px !important;
  }

  .header__content-left :is(.header__menu-text, .header__menu-text-menu) {
    display: inline !important;
    font-size: 9px !important;
  }

  #top.sentekia-hero {
    width: 100% !important;
    
    content-visibility: visible !important;
    /* contain:strict (raccourci pour size+layout+style+paint) etait le vrai verrou : le
       containment "size" force precisement le calcul "hauteur auto = contain-intrinsic-size,
       independamment du contenu reel" -- content-visibility:visible seul ne suffisait pas tant
       que ce containment restait actif. */
    contain: none !important;
    /* min-height:100svh retire le 16/09/2026 : avec l'animation JS des tuiles reactivee
       (tuile plafonnee a 330px, voir plus bas), le contenu naturel de la section devenait plus
       court que "100svh" force, laissant un grand vide sous la description. La section suit
       desormais sa hauteur de contenu reelle -- toujours proche d'un ecran plein vu la taille
       des tuiles, sans vide artificiel en trop. */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: clip !important;
    justify-content: flex-start !important;
    padding: calc(78px + env(safe-area-inset-top)) var(--mobile-gutter) 40px !important;
  }

  #top .hero-stage {
    position: static !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    /* min-height retire entierement le 16/09/2026 (essai intermediaire en calc(100svh - Npx)
       abandonne) : dans cet environnement de test, 100svh se resolvait a 1055px alors que le
       viewport demande faisait 844px (ecart confirme par une sonde DOM directe), ce qui
       gonflait n'importe quelle valeur calc(100svh - Npx) bien au-dela de l'ecran reel et
       recreait le grand vide que ce correctif cherche a supprimer. Hauteur naturelle du
       contenu desormais seule responsable (logo + SENTEKIA + tuiles 330px + STUDIO + accroche
       + description). */
    min-height: 0 !important;
    gap: clamp(14px, 3.8vw, 20px) !important;
  }

  #top :is(.hw-a, .hw-b, .hero-stage .hero-kinetic-wrap, .collage) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #top .hw-a .d-mega,
  #top .hw-a .d-mega span {
    font-size: clamp(38px, 11.8vw, 52px) !important;
    line-height: 0.9 !important;
  }

  #top .hw-b .d-mega,
  #top .hw-b .d-mega span {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: 0.88 !important;
  }

  /* Regle "1 tuile statique plein cadre" du 16/09/2026 retiree le meme jour : Aboubacar a
     redemande l'animation JS d'origine (defilement + groupage/degroupage, "meme animation
     stricte que le desktop"). #collage/.tile sont desormais geres par le bloc @media plus haut
     dans ce fichier (position:relative + hauteur reservee sur #collage, .tile laisse en
     position:absolute pilote par le JS) -- rien a redeclarer ici. */

  #top .hero-kinetic-text {
    max-width: 30ch !important;
    margin-inline: auto !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #top .hero-mobile-desc {
    max-width: 34ch !important;
    margin-inline: auto !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  .sticky-disciplines-inner {
    height: 100svh !important;
    padding-top: calc(64px + env(safe-area-inset-top)) !important;
  }

  .hscroll-track {
    width: 500dvw !important;
  }

  .hscroll-panel {
    width: 100dvw !important;
    flex: 0 0 100dvw !important;
    height: 100% !important;
    padding: 0 0 max(16px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .sticky-disciplines-right {
    /* Remis a sa taille d'origine le 16/09/2026 : Aboubacar n'a jamais demande d'y toucher,
       seulement au texte. La reduire ecrasait le cadrage de l'image, jamais demande. */
    width: 100% !important;
    flex: 0 0 clamp(180px, 28svh, 250px) !important;
    min-height: 180px !important;
    overflow: hidden !important;
  }

  .sticky-disciplines-right img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Correctif du 16/09/2026 (capture Aboubacar) : le CTA "VOIR LES CREATIONS" etait invisible
     sur les 5 tuiles -- .sticky-disciplines-left est en overflow:hidden (necessaire pour ne
     jamais deborder du panneau plein ecran pendant le scroll horizontal), donc tout contenu qui
     depassait sa hauteur allouee etait purement et simplement ROGNE, pas juste hors-champ
     scrollable. Mesure reelle avant correctif (Playwright, 390x844) : le CTA depassait de 8px
     (tuile la plus courte) a 108px (tuile la plus longue, "Digital Flagships"). Fix : image
     rabaissee (180-250px -> 130-175px), tous les espacements resserres, et surtout la
     description plafonnee a 3 lignes via -webkit-line-clamp -- sans ce plafond, la hauteur du
     bloc restait dependante de la longueur du texte de CHAQUE discipline (160 a 225 caracteres
     selon la tuile), donc jamais garantie egale d'une tuile a l'autre. */
  .sticky-disciplines-left {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px var(--mobile-gutter) 0 !important;
    gap: 2px !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .sticky-item-title {
    max-width: 100% !important;
    font-size: clamp(21px, 3.4svh, 25px) !important;
    /* line-height remonte a 0.98 le 16/09/2026 : a 0.88, l'accent d'un E majuscule accentue
       (ex. "VIDEO") touchait la ligne du dessous -- chevauchement visible signale par
       Aboubacar sur la tuile "Production Video IA" (3 lignes). */
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
  }

  .hscroll-panel:nth-child(1) .sticky-item-title,
  .hscroll-panel:nth-child(4) .sticky-item-title {
    font-size: clamp(18px, 2.9svh, 21px) !important;
    line-height: 0.98 !important;
  }

  .sticky-item-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    max-width: 42ch !important;
    font-size: clamp(11px, 1.4svh, 12.5px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.012em !important;
  }

  .hscroll-panel:nth-child(1) .sticky-item-desc,
  .hscroll-panel:nth-child(4) .sticky-item-desc,
  .hscroll-panel:nth-child(5) .sticky-item-desc {
    -webkit-line-clamp: 2 !important;
    font-size: clamp(10px, 1.25svh, 11.5px) !important;
    line-height: 1.16 !important;
  }

  .sticky-item-eyebrow {
    font-size: 8px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
  }

  .sticky-item-list {
    margin-top: 0 !important;
  }

  .sticky-item-list li {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 3px 0 !important;
    font-size: clamp(9px, 1.15svh, 10px) !important;
    line-height: 1.18 !important;
  }

  .sticky-item-list li b {
    font-size: 8px !important;
  }

  .sticky-item-link {
    min-height: 28px !important;
    margin-top: auto !important;
    padding-bottom: 2px !important;
    font-size: 9.5px !important;
  }

  .discipline-aside {
    display: none !important;
  }

  #collection {
    width: 100% !important;
    overflow: clip !important;
  }

  #collection .l-three-worlds-text {
    padding-inline: var(--mobile-gutter) !important;
  }

  #collection .l-three-worlds-text .col {
    width: 100% !important;
    padding-inline: 0 !important;
  }

  #collection .l-three-worlds-sticky__title-word {
    color: #FFFFFF !important;
    font-size: clamp(36px, 10.8vw, 48px) !important;
    line-height: 0.98 !important;
  }

  #collection .l-three-worlds-sticky__titles {
    top: 75% !important;
    bottom: auto !important;
    width: 100% !important;
    padding-inline: var(--mobile-gutter) !important;
    transform: translateY(-50%) !important;
  }

  #collection [data-content-animation-item] .h0 {
    width: 100% !important;
    color: #FFFFFF !important;
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: 0.95 !important;
    white-space: normal !important;
  }

  #collection .tw-desc {
    width: 100% !important;
    max-width: 32ch !important;
    margin-top: 12px !important;
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
  }

  .l-tenets-section {
    max-width: 100dvw !important;
    overflow: clip !important;
  }

  .l-expansive-section {
    max-width: 100dvw !important;
    overflow: visible !important;
  }

  .l-expansive-slider {
    overflow: visible !important;
  }

  :is(.l-expansive-slider__item, .l-expansive-slider__item--full-image, .l-expansive-slider__item--lifestyle-video) {
    width: 100dvw !important;
    min-width: 100dvw !important;
    flex: 0 0 100dvw !important;
    overflow: hidden !important;
  }

  .l-expansive-card {
    left: var(--mobile-gutter) !important;
    width: calc(100dvw - (2 * var(--mobile-gutter))) !important;
    height: calc(100svh - 112px) !important;
    aspect-ratio: auto !important;
  }

  /* Corrige le 16/09/2026 (capture Aboubacar, "PILIERS" tres eloigne de son texte) : le theme
     d'origine (landing.css) ancre ce titre en position:absolute;top:60px et ce texte en
     position:absolute;bottom:60px -- un motif pense pour une carte desktop pleine hauteur avec
     une video au milieu (masquee sur mobile, is-hidden--sm-down). Sur une carte mobile de
     ~760px sans video, cet ancrage haut/bas cree un vide de 163px entre les deux (mesure).
     Fix : les deux repassent dans le flux normal (position:static), la carte parente
     (.l-expansive-card, deja flex column + justify-content:center) les centre alors comme un
     seul groupe compact -- exactement le principe "grouper par le sens, proximite avant
     conteneur" (regle de coherence layout). */
  .l-expansive-card__title {
    position: static !important;
    inset: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    margin: 0 0 14px !important;
  }

  .l-expansive-card__title .h0 {
    font-size: clamp(36px, 10.8vw, 48px) !important;
    line-height: 0.98 !important;
  }

  .l-expansive-card__text {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 22ch !important;
    margin: 0 auto !important;
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.4 !important;
  }

  :is(.l-expansive-spaces-title, .l-expansive-iconic-title, .l-expansive-finesse-title, .l-expansive-amenities-title, .l-expansive-service-title) {
    max-width: 100% !important;
    white-space: normal !important;
  }

  :is(.l-expansive-card__video-text, .l-expansive-iconic-text, .l-expansive-finesse-text, .l-expansive-service-text, .l-expansive-cut-text p) {
    max-width: 34ch !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
  }

  .l-expansive-slider__item--full-image .img-full,
  .l-expansive-slider__item--full-image .img-full img,
  .l-expansive-slider__item--lifestyle-video video {
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100svh !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #selection {
    width: 100% !important;
    overflow: clip !important;
  }

  #selection .l-handpicked-carousel-title {
    width: 100% !important;
    padding: 72px var(--mobile-gutter) 0 !important;
  }

  #selection .text-subtitle {
    font-size: clamp(34px, 10.5vw, 48px) !important;
    line-height: 1 !important;
  }

  #selection :is(.l-handpicked-carousel-text-center, .l-handpicked-carousel-text-bottom) {
    width: 100% !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  #selection :is(.l-handpicked-carousel-text-center, .l-handpicked-carousel-text-bottom) .h3 {
    max-width: 31ch !important;
    margin-inline: auto !important;
    font-size: clamp(19px, 5.3vw, 25px) !important;
    line-height: 1.28 !important;
    white-space: normal !important;
  }

  .ssh-icons {
    width: calc(100dvw - (2 * var(--mobile-gutter))) !important;
    bottom: max(28px, 5svh) !important;
    gap: 4px !important;
  }

  .ssh-headline {
    max-width: calc(100dvw - (2 * var(--mobile-gutter))) !important;
    font-size: clamp(22px, 6.8vw, 30px) !important;
    line-height: 1.16 !important;
  }

  :is(.s-footer__title-block, .ssf-closing) {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  :is(.footer__text, .footer__text-mask) {
    max-width: 100% !important;
    font-size: clamp(34px, 11vw, 52px) !important;
    line-height: 0.94 !important;
    white-space: normal !important;
  }

  /* .ssf-panel retire le 23/09/2026 -- classe remplacee par .ssf-frame, voir note plus haut. */
  .ssf-brand {
    max-width: 100% !important;
    font-size: clamp(44px, 14vw, 68px) !important;
    white-space: nowrap !important;
  }

  
}

/* Collection signature : preuve visuelle, calme editorial, aucun scroll force. */
.s-work-signature {
  background: #0A0A0A;
  color: #F2EFE6;
  padding: clamp(88px, 12vw, 180px) clamp(24px, 5vw, 80px);
}

.s-work-signature__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  column-gap: clamp(40px, 10vw, 180px);
  align-items: end;
  max-width: 1520px;
  margin: 0 auto clamp(48px, 8vw, 112px);
}

.s-work-signature__eyebrow,
.s-work-signature__meta {
  display: block;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.s-work-signature__eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 28px;
  color: #B1230A;
}

.s-work-signature h2 {
  margin: 0;
  color: #F2EFE6 !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(52px, 8.3vw, 142px);
  font-weight: 700;
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.s-work-signature h2 em {
  display: block;
  margin-top: .11em;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-size: .58em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: none;
}

.s-work-signature__lead {
  max-width: 32ch;
  margin: 0 0 3px;
  color: rgba(242, 239, 230, .72) !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(18px, 1.55vw, 25px);
  font-style: italic;
  line-height: 1.34;
}

.s-work-signature__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 28px);
  max-width: 1520px;
  margin: 0 auto;
}

.s-work-signature__card {
  display: block;
  min-width: 0;
  color: #F2EFE6;
  text-decoration: none;
}

.s-work-signature__card figure {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 16px;
  overflow: hidden;
  background: #181818;
}

.s-work-signature__card figure::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.28));
  content: '';
  opacity: 0;
  transition: opacity .45s ease;
}

.s-work-signature__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.s-work-signature__card:hover figure::after,
.s-work-signature__card:focus-visible figure::after {
  opacity: 1;
}

.s-work-signature__card:hover img,
.s-work-signature__card:focus-visible img {
  transform: scale(1.035);
}

.s-work-signature__meta {
  color: rgba(242, 239, 230, .48);
}

.s-work-signature__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: clamp(24px, 2.2vw, 38px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
  text-transform: uppercase;
}

.s-work-signature__title b,
.s-work-signature__cta b {
  color: #B1230A;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: .72em;
  font-weight: 400;
}

.s-work-signature__cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  margin: clamp(40px, 6vw, 80px) max(0px, calc((100% - 1520px) / 2)) 0;
  border-bottom: 1px solid rgba(242, 239, 230, .45);
  color: #F2EFE6;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .25s ease, color .25s ease;
}

.s-work-signature__cta:hover,
.s-work-signature__cta:focus-visible {
  border-color: #B1230A;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .s-work-signature {
    padding: 76px var(--mobile-gutter, 20px) 72px;
  }

  .s-work-signature__head {
    display: block;
    margin-bottom: 38px;
  }

  .s-work-signature__eyebrow {
    margin-bottom: 22px;
    font-size: 9px;
  }

  .s-work-signature h2 {
    font-size: clamp(45px, 13.5vw, 60px);
  }

  .s-work-signature__lead {
    margin-top: 26px;
    font-size: 17px;
  }

  .s-work-signature__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .s-work-signature__card figure {
    aspect-ratio: 4 / 4.25;
    margin-bottom: 12px;
  }

  .s-work-signature__title {
    font-size: 28px;
  }

  .s-work-signature__cta {
    margin-top: 40px;
  }
}

/* Pont de conversion place entre le hero immersif et les disciplines. */
.s-conversion-prelude {
  position: relative;
  z-index: 2;
  padding: clamp(88px, 12vw, 190px) clamp(20px, 5vw, 84px) clamp(70px, 9vw, 140px);
  overflow: hidden;
  background: #f1ece4;
  color: #090909;
}
.s-conversion-prelude__eyebrow {
  margin: 0 0 clamp(35px, 5vw, 75px);
  color: #b1230a !important;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.45;
  text-transform: uppercase;
}
.s-conversion-prelude__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 7vw;
  align-items: end;
}
.s-conversion-prelude h2 {
  max-width: 13ch;
  margin: 0;
  color: #090909 !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(51px, 7.8vw, 132px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .84;
  text-transform: uppercase;
}
.s-conversion-prelude h2 em {
  display: block;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-size: .5em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: none;
}
.s-conversion-prelude__copy > p {
  max-width: 36ch;
  margin: 0;
  color: rgba(9, 9, 9, .72) !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(18px, 1.45vw, 24px);
  font-style: italic;
  line-height: 1.4;
}
.s-conversion-prelude__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 35px;
}
.s-conversion-prelude__actions a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid rgba(9, 9, 9, .55);
  color: #090909;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
.s-conversion-prelude__actions a span { color: #b1230a; font-size: 15px; }
.s-conversion-prelude__proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(75px, 10vw, 145px) 0 0;
  padding: 0;
  border-top: 1px solid rgba(9, 9, 9, .16);
  list-style: none;
}
.s-conversion-prelude__proof li {
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-left: 1px solid rgba(9, 9, 9, .16);
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.s-conversion-prelude__proof li:first-child { padding-left: 0; border-left: 0; }

.s-conversion-prelude a:focus-visible,
.s-work-signature a:focus-visible,
.ssf-closing a:focus-visible {
  outline: 2px solid #e54325;
  outline-offset: 4px;
}
.cookie-consent a,
.cookie-consent [role='button'] { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 768px) {
  .s-conversion-prelude { padding: 78px var(--mobile-gutter, 20px) 70px; }
  .s-conversion-prelude__grid { display: block; }
  .s-conversion-prelude h2 { font-size: clamp(47px, 13.8vw, 64px); }
  .s-conversion-prelude__copy { margin-top: 34px; }
  .s-conversion-prelude__copy > p { font-size: 17px; }
  .s-conversion-prelude__actions { display: grid; justify-items: start; }
  .s-conversion-prelude__proof { grid-template-columns: 1fr; margin-top: 70px; }
  .s-conversion-prelude__proof li { min-height: 55px; padding: 0; border-left: 0; border-bottom: 1px solid rgba(9, 9, 9, .16); }
}

@media (prefers-reduced-motion: reduce) {
  .s-conversion-prelude *, .s-work-signature * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ========================================================================== */
/* VALEUR PERÇUE : COMPOSITION EDITORIALE ET CARROUSEL CYLINDRIQUE 3D          */
/* ========================================================================== */
.s-value-stage {
  --value-paper: #eee5d9;
  --value-ink: #050505;
  --value-red: #c51d0c;
  position: relative;
  z-index: 3;
  min-height: 650px;
  overflow: hidden;
  background: var(--value-paper);
  color: var(--value-ink);
}

.s-value-stage__outro {
  padding: 25px clamp(26px, 6.8vw, 110px) 27px;
  border-top: 0;
}

.s-value-stage__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 26px;
}

.s-value-stage__actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: none;
  color: var(--value-ink);
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.s-value-stage__actions a:hover {
  transform: translateX(4px);
}

.s-value-stage__actions a span {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 2px 0;
}

.s-value-stage__actions a span::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mask: repeating-linear-gradient(90deg, transparent 0, transparent 4px, black 5px, black 6px);
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0, transparent 4px, black 5px, black 6px);
  background: linear-gradient(90deg, transparent 0%, rgba(177, 35, 10, 0.2) 25%, var(--brick-ember, #B1230A) 50%, #000000 65%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(177, 35, 10, 0.6));
  animation: skSlitBarsSweep 2.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.s-value-stage__actions a .s-cta-chevron,
.s-value-stage__actions a b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 13px;
  color: var(--value-red, #B1230A);
  stroke: var(--value-red, #B1230A);
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.s-value-stage__actions a:hover .s-cta-chevron,
.s-value-stage__actions a:hover b,
.s-value-stage__actions a:focus-visible .s-cta-chevron,
.s-value-stage__actions a:focus-visible b {
  transform: translateX(4px);
}
.s-value-stage__actions a:focus-visible {
  outline: 2px solid var(--value-red);
  outline-offset: 5px;
}


@media (max-width: 700px) {
  .s-value-stage { min-height: 0; }
  .s-value-stage__outro { padding: 22px var(--mobile-gutter, 20px) 30px; }
  .s-value-stage__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
  .s-value-stage__actions a { width: auto; font-size: clamp(10.5px, 2.9vw, 12.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .s-value-stage__actions a b { transition: none !important; }
}

/* ========================================================================== */
/* RÉALISATIONS : CARTES EMPILÉES AU SCROLL                                    */
/* ========================================================================== */
.s-project-stack-spacer {
  height: 700vh;
  background: #050505;
}

.s-project-stack {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: 0 0 clamp(80px, 12vw, 160px);
  background: #050505;
  color: #f7f0e7;
}

.s-project-stack__header {
  position: relative;
  display: grid;
  min-height: min(43vh, 460px);
  padding: clamp(38px, 6vw, 90px) clamp(20px, 5vw, 94px) clamp(30px, 5vw, 70px);
  align-content: center;
  justify-items: center;
  text-align: center;
}

.s-project-stack__header p,
.s-project-stack__header span {
  margin: 0;
  color: rgba(247, 240, 231, .55);
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}

.s-project-stack__header h2 {
  margin: 20px 0 16px;
  color: #f7f0e7 !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(54px, 8vw, 128px);
  font-weight: 800 !important;
  letter-spacing: -.078em;
  line-height: .79;
  text-transform: uppercase !important;
}

.s-project-stack__header span { max-width: 64ch; text-transform: none; letter-spacing: .02em; }
.s-project-stack__cards { position: relative; height: 300vh; }
.s-project-stack__stage {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
}

.s-project-stack__row {
  position: absolute;
  inset: 0;
  z-index: calc(10 + var(--stack-index));
  display: grid;
  place-items: center;
  pointer-events: none;
}

.s-project-stack__card {
  position: relative;
  top: calc(-5vh + var(--stack-index) * 25px);
  display: grid;
  width: min(84vw, 1080px);
  height: min(64vh, 500px);
  min-height: 420px;
  grid-template-columns: minmax(0, 39%) minmax(0, 61%);
  gap: clamp(26px, 4vw, 66px);
  padding: clamp(30px, 4.2vw, 65px);
  overflow: hidden;
  border-radius: 0;
  background: var(--stack-color);
  color: #fff;
  pointer-events: auto;
  transform: translateY(var(--stack-translate, 0vh)) scale(var(--stack-scale, 1));
  transform-origin: center top;
  will-change: transform;
}

.s-project-stack__content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.s-project-stack__content > p {
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: rgba(255,255,255,.75) !important;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.s-project-stack__content h3 {
  margin: 0;
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(35px, 4.2vw, 62px);
  font-weight: 800 !important;
  letter-spacing: -.075em;
  line-height: .84;
  text-transform: uppercase !important;
}

.s-project-stack__content > span {
  max-width: 29ch;
  margin: clamp(24px, 3vw, 42px) 0;
  color: rgba(255,255,255,.9) !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.42;
}

.s-project-stack__content a {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 42px;
  border-bottom: 2px solid currentColor;
  color: #fff;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
}

.s-project-stack__content a b { font-size: 20px; font-weight: 400; transition: transform .25s ease; }
.s-project-stack__content a:hover b,
.s-project-stack__content a:focus-visible b { transform: translateX(5px); }

.s-project-stack__image {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgba(69, 17, 7, .5);
  color: inherit;
  text-decoration: none;
}

.s-project-stack__image-frame {
  position: absolute;
  inset: 12px;
  display: block;
  overflow: hidden;
  background: #160b08;
}

.s-project-stack__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--stack-image-scale, 1));
  transition: transform .1s linear;
  will-change: transform;
}

.s-project-stack__image:hover img,
.s-project-stack__image:focus-visible img { filter: saturate(1.1); }
.s-project-stack__image:focus-visible,
.s-project-stack__content a:focus-visible,
.s-project-stack__all:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.s-project-stack__all {
  display: flex;
  width: min(84vw, 1080px);
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  margin: clamp(40px, 8vw, 110px) auto 0;
  border-bottom: 1px solid rgba(247,240,231,.45);
  color: #f7f0e7;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.s-project-stack__all b { color: #ff5219; font-size: 18px; font-weight: 400; }

/* Le moteur de scroll transforme les sections qu'il gere. La scene reste une
   soeur fixe de son espaceur, pour garder les cartes parfaitement visibles. */
.s-project-stack-fixed {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.s-project-stack-fixed.is-active { display: block; }
.s-project-stack-fixed :is(a, button) { pointer-events: auto; }
.s-project-stack-fixed .s-project-stack__header {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  min-height: 19vh;
  padding: clamp(24px, 3vw, 44px) 20px 12px;
  pointer-events: none;
}
.s-project-stack-fixed .s-project-stack__header p,
.s-project-stack-fixed .s-project-stack__header span { display: none; }
.s-project-stack-fixed .s-project-stack__header h2 {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 70px);
  line-height: .88;
}
.s-project-stack-fixed .s-project-stack__cards {
  position: absolute;
  inset: 0;
  height: 100vh;
}
.s-project-stack-fixed .s-project-stack__stage {
  position: absolute;
  inset: 0;
  height: 100vh;
  overflow: hidden;
}
.s-project-stack-fixed .s-project-stack__card {
  top: calc(8vh + var(--stack-index) * 25px);
}
.s-project-stack-fixed .s-project-stack__all { display: none; }

@media (max-width: 760px) {
  .s-project-stack { padding-bottom: 72px; }
  .s-project-stack__header { min-height: 31vh; padding: 68px var(--mobile-gutter, 20px) 30px; }
  .s-project-stack__header p { display: none; }
  .s-project-stack__header h2 { margin: 0 0 15px; font-size: clamp(47px, 13vw, 64px); }
  .s-project-stack__header span { max-width: 35ch; font-size: 9px; }
  .s-project-stack__cards { height: 264vh; }
  .s-project-stack__stage { height: 88vh; }
  .s-project-stack__card {
    top: calc(-12vh + var(--stack-index) * 14px);
    width: calc(100vw - 32px);
    height: min(69vh, 560px);
    min-height: 470px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 19px;
    padding: 25px 20px 20px;
    border-radius: 0;
  }
  .s-project-stack__content { justify-content: flex-start; }
  .s-project-stack__content > p { margin-bottom: 12px; font-size: 8px; }
  .s-project-stack__content h3 { font-size: clamp(34px, 10.2vw, 43px); }
  .s-project-stack__content > span { margin: 14px 0 16px; font-size: 14px; line-height: 1.35; }
  .s-project-stack__content a { min-height: 32px; gap: 14px; font-size: 14px; }
  .s-project-stack__image-frame { inset: 8px; }
  .s-project-stack__all { width: calc(100vw - 40px); margin-top: 34px; }
  .s-project-stack-spacer { height: 700vh; }
  .s-project-stack-fixed .s-project-stack__header { min-height: 15vh; padding-top: 20px; }
  .s-project-stack-fixed .s-project-stack__header h2 { font-size: clamp(30px, 10vw, 44px); }
  .s-project-stack-fixed .s-project-stack__cards,
  .s-project-stack-fixed .s-project-stack__stage { height: 100vh; }
  .s-project-stack-fixed .s-project-stack__card { top: calc(8vh + var(--stack-index) * 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .s-project-stack__card,
  .s-project-stack__image img,
  .s-project-stack__content a b { transform: none !important; transition: none !important; }
}

/* Réalisations : une séquence de panneaux plein écran, pilotée par le spacer
   compatible avec le smooth-scroll historique. */
.s-project-panels { position: absolute; inset: 0; }
.s-project-panel {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: var(--project-panel-color, #050505);
  color: #fff;
  opacity: var(--panel-opacity, 0);
  pointer-events: none;
  transform: translate3d(var(--panel-x, 0), var(--panel-y, 0), 0) rotate(var(--panel-rotate, 0deg)) scale(var(--panel-scale, 1));
  transform-origin: 18% 76%;
  will-change: transform, opacity;
}
.s-project-panel.is-current { pointer-events: none; }
.s-project-stack-fixed,
.s-project-panels,
.s-project-panel,
.s-project-stack-spacer { touch-action: pan-y; }
.s-project-panel__content a,
.s-project-panel__media { pointer-events: auto; touch-action: pan-y; }

.s-project-panel--intro {
  grid-template-rows: minmax(90px, 25vh) 1fr;
  padding: clamp(22px, 4vw, 60px) clamp(20px, 3.5vw, 52px) clamp(28px, 4vw, 60px);
}
.s-project-panel--intro h2 {
  align-self: start;
  margin: 0;
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(48px, 9vw, 138px);
  font-weight: 800 !important;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase !important;
}
.s-project-intro-tiles {
  display: grid;
  width: min(100%, 1380px);
  height: min(65vh, 600px);
  align-self: end;
  justify-self: center;
  grid-template-columns: .82fr 1.7fr .86fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 2vw, 30px);
}
.s-project-intro-tile { min-width: 0; margin: 0; overflow: hidden; }
.s-project-intro-tile img { width: 100%; height: 100%; object-fit: cover; }
.s-project-intro-tile--1 { grid-row: 1; grid-column: 1; }
.s-project-intro-tile--2 { grid-row: 2; grid-column: 1; }
.s-project-intro-tile--3 { grid-row: 1 / span 2; grid-column: 2; }
.s-project-intro-tile--4 { grid-row: 1 / span 2; grid-column: 3; }

.s-project-panel--project {
  grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr);
  gap: clamp(28px, 5vw, 110px);
  align-items: center;
  padding: clamp(56px, 8vw, 150px) clamp(28px, 8vw, 150px);
}
.s-project-panel__content { display: flex; flex-direction: column; align-items: flex-start; }
.s-project-panel__content > p {
  margin: 0 0 clamp(18px, 2vw, 32px);
  color: rgba(255,255,255,.72) !important;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.s-project-panel__content h3 {
  margin: 0;
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  max-width: 100%;
  font-size: clamp(44px, 4.7vw, 84px);
  font-weight: 800 !important;
  letter-spacing: -.065em;
  line-height: .78;
  overflow-wrap: anywhere;
  text-transform: uppercase !important;
}
.s-project-panel__content > span {
  max-width: 29ch;
  margin: clamp(22px, 3vw, 44px) 0;
  color: rgba(255,255,255,.92) !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(16px, 1.55vw, 22px);
  letter-spacing: -.025em;
  line-height: 1.32;
}
.s-project-panel__content a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 20px;
  border-bottom: 2px solid currentColor;
  color: #fff;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.s-project-panel__content a b { font-size: 19px; font-weight: 400; transition: transform .25s ease; }
.s-project-panel__content a:hover b,
.s-project-panel__content a:focus-visible b { transform: translateX(5px); }
.s-project-panel__media {
  display: grid;
  width: 100%;
  height: min(65vh, 650px);
  overflow: hidden;
  grid-template-rows: minmax(0, 1.72fr) auto minmax(74px, .55fr);
  background: rgba(0,0,0,.16);
  color: #050505;
  text-decoration: none;
}
.s-project-panel__hero,
.s-project-panel__echo { display: block; overflow: hidden; }
.s-project-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.16, 1, .3, 1); }
.s-project-panel__echo img { object-position: center 32%; }
.s-project-panel__brand {
  display: grid;
  min-height: 66px;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .42fr);
  align-items: center;
  gap: 16px;
  padding: 10px clamp(12px, 2vw, 25px);
  background: #f2ece3;
}
.s-project-panel__brand strong {
  color: #050505;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: clamp(26px, 3.6vw, 54px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
}
.s-project-panel__brand small {
  color: #2f2925;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: clamp(9px, .82vw, 12px);
  font-style: italic;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.s-project-panel__media:hover img,
.s-project-panel__media:focus-visible img { transform: scale(1.035); }
.s-project-panel__media:focus-visible,
.s-project-panel__content a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

@media (max-width: 760px) {
  .s-project-panel--intro { grid-template-rows: 16vh 1fr; padding: max(68px, env(safe-area-inset-top)) 8px 28px; }
  .s-project-panel--intro h2 {
    width: min(10ch, calc(100vw - 28px));
    align-self: center;
    justify-self: center;
    font-size: clamp(34px, 11.5vw, 46px);
    letter-spacing: -.055em;
    line-height: .94;
    text-align: center;
  }
  .s-project-intro-tiles {
    height: min(50vh, 390px);
    align-self: start;
    grid-template-columns: .52fr 1.1fr .43fr;
    gap: 6px;
  }
  .s-project-panel--project { grid-template-columns: 1fr; grid-template-rows: minmax(0, .78fr) auto; gap: 14px; padding: max(60px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); }
  .s-project-panel__media { grid-row: 1; height: 34vh; grid-template-rows: minmax(0, 1.65fr) auto minmax(50px, .48fr); }
  .s-project-panel__brand { min-height: 39px; grid-template-columns: minmax(0, 1fr) minmax(72px, .56fr); gap: 8px; padding: 6px 8px; }
  .s-project-panel__brand strong { font-size: clamp(21px, 8.5vw, 34px); }
  .s-project-panel__brand small { font-size: 7px; }
  .s-project-panel__content { grid-row: 2; }
  .s-project-panel__content > p { margin-bottom: 11px; font-size: 8px; }
  .s-project-panel__content h3 { font-size: clamp(39px, 11.5vw, 52px); line-height: .82; }
  .s-project-panel__content > span { margin: 11px 0 14px; font-size: 14px; line-height: 1.22; }
  .s-project-panel__content a { min-height: 30px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-project-panel,
  .s-project-panel__media img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   HERO MOBILE : 19/09/2026, mobile d'abord (fiche fournie par Aboubacar)
   Image pleine hauteur, 5 univers en defilement rapide (scroll-snap), texte superpose.
   Tap sur une image : galerie de l'univers (voir hero-mobile.js). Le hero desktop (collage)
   reste intact au-dessus de 768px. Place en fin de fichier pour gagner en cascade sur les
   anciennes regles mobiles du hero.
   ========================================================================== */
.hero-m { display: none; }

@media (max-width: 768px) {
  #top.sentekia-hero {
    height: 94svh !important;
    min-height: 94svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #0b0908 !important;
  }

  #top .hero-stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: clamp(8px, 1.6svh, 14px) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 8vw clamp(40px, 9svh, 84px) !important;
    box-sizing: border-box !important;
  }

  #top .collage,
  #top .hero-logo-mark { display: none !important; }

  .hero-m { display: block; position: absolute; inset: 0; z-index: 1; }

  .hero-m__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .hero-m__track::-webkit-scrollbar { display: none; }

  .hero-m__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #0b0908;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-m__slide img,
  .hero-m__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
  }
  .hero-m__video {
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .hero-m__video.is-ready { opacity: 1; }
  .hero-m__slide:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  .hero-m__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .8) 100%);
  }

  .hero-m__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(14px, 3svh, 26px);
    z-index: 2;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .hero-m__dot { width: 18px; height: 2px; background: rgba(255, 255, 255, .35); transition: background .25s ease; }
  .hero-m__dot.is-active { background: #fff; }

  /* Mot SENTEKIA : sur la ligne de l'entete (74px), remplace le symbole tant que le hero est visible. */
  #top .hero-stage .hw-a {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 74px !important;
    pointer-events: none !important;
  }
  #top .hw-a .d-mega,
  #top .hw-a .d-mega span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: clamp(1.15rem, 5.8vw, 2rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  #top .hero-mobile-desc {
    order: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    max-width: 34ch !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(.78rem, 3.1vw, .98rem) !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
  }

  #top .hw-b {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 3 !important;
    width: auto !important;
  }
  #top .hw-b .d-mega,
  #top .hw-b .d-mega span {
    font-size: clamp(2.6rem, 12.5vw, 4.4rem) !important;
    line-height: .9 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
  }

  #top .hero-stage .hero-kinetic-wrap {
    order: 3 !important;
    position: relative !important;
    z-index: 3 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #top .hero-kinetic-text {
    font-size: clamp(.62rem, 2.9vw, .85rem) !important;
    letter-spacing: .16em !important;
    text-align: center !important;
  }

}

/* --------------------------------------------------------------------------
   VIDEO PLEIN ECRAN DU HERO MOBILE (fiche fournie par Aboubacar, 19/09/2026)
   Cadre creme, video en plein cadre, une seule croix en haut a droite pour fermer.
   -------------------------------------------------------------------------- */
.hero-v { display: none; }

@media (max-width: 768px) {
  .hero-v {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
    background: var(--bone, #ece4d8);
  }
  .hero-v[hidden] { display: none; }

  .hero-v__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #0b0908;
  }

  .hero-v__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-v__close {
    position: absolute;
    top: 18px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .hero-v__close:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
}

/* ==========================================================================
   CARROUSEL EN EVENTAIL (2e section, 19/09/2026, mobile d'abord)
   Anneau vertical de miniatures inclinees autour de l'image centrale + 4 bouts de texte
   qui apparaissent mot a mot (voir image-fan.js). Remplace l'ancien carrousel cylindrique.
   ========================================================================== */
.s-fan {
  --fan-h: clamp(520px, 88svh, 900px);
  --fan-r: calc(var(--fan-h) * .36);
  --fan-thumb: min(23.5vw, 128px);
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 0;
}

.s-fan__stage { position: relative; height: var(--fan-h); }

.s-fan__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 900px;
  transform-style: preserve-3d;
}

.s-fan__orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.s-fan__card {
  width: var(--fan-thumb);
  height: var(--fan-thumb);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  transform-style: preserve-3d;
  will-change: transform;
}
.s-fan__card img { display: block; width: 100%; height: 100%; object-fit: cover; }

.s-fan.is-ready .s-fan__orbit,
.s-fan.is-ready .s-fan__card { transition: transform 1s cubic-bezier(.22, 1, .36, 1); }

.s-fan__center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 68%;
  max-width: 380px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
}
.s-fan__hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1);
}
.s-fan__hero.is-active { opacity: 1; transform: none; }

/* Nom de marque sur la tuile centrale, demande le 23/09/2026 : un voile sombre en bas de la
   tuile garantit la lisibilite quelle que soit la photo (claire ou sombre) dessous, plutot que
   de compter sur un hasard de contraste comme "JOLOFI" qui ne se lisait que parce que ce mot
   figurait deja sur le vetement photographie. */
.s-fan__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 34% 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 55%, transparent 100%);
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(22px, 6.8vw, 32px);
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.s-fan__label.is-active { opacity: 1; }

.s-fan__text {
  position: absolute;
  z-index: 4;
  max-width: 24%;
  margin: 0;
  color: var(--value-ink, #050505) !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(11px, 2.9vw, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em;
  transition: opacity .45s ease;
  text-shadow: 0 0 3px #eee5d9, 0 0 8px #eee5d9, 0 0 14px #eee5d9;
}
.s-fan__text--tl { top: 6%; left: 5%; text-align: left; }
.s-fan__text--tr { top: 14%; right: 5%; text-align: right; }
.s-fan__text--bl { top: 71%; left: 5%; text-align: left; }
.s-fan__text--br { top: 79%; right: 5%; text-align: right; }
.s-fan__text.is-out { opacity: 0; }
.s-fan__text .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: s-fan-word .45s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes s-fan-word { to { opacity: 1; transform: none; } }

/* Les bouts de texte ne captent pas le toucher : le tap va a l'image dessous. */
.s-fan__text { pointer-events: none; }
.s-fan__center, .s-fan__card { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* --------------------------------------------------------------------------
   PLEIN ECRAN DE L'EVENTAIL (au tap sur une image, 19/09/2026) : meme cadre creme que le plein
   ecran du hero, image de la marque + 4 miniatures de son univers en bas, une seule croix.
   -------------------------------------------------------------------------- */
.fan-v {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  background: var(--bone, #ece4d8);
  touch-action: none;
}
.fan-v[hidden] { display: none; }

.fan-v__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0b0908;
}
.fan-v__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .16s ease;
}
.fan-v__img.is-out { opacity: 0; }

.fan-v__close {
  position: absolute;
  top: 18px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .5));
}
.fan-v__close:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

.fan-v__thumbs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fan-v__thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #0b0908;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.fan-v__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fan-v__thumb.is-active { opacity: 1; outline: 2px solid var(--brick-ember, #b1230a); outline-offset: -2px; }
.fan-v__thumb:focus-visible { outline: 2px solid var(--brick-ember, #b1230a); outline-offset: 2px; }

@media (min-width: 769px) {
  .fan-v { padding: 24px max(24px, calc((100vw - 900px) / 2)); }
  .fan-v__img { object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .s-fan__hero, .s-fan__text { transition: none; }
  .s-fan__text .w { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   MOT ANIME SENTEKIA / STUDIO (2e section, 19/09/2026) : bande rouge qui revele puis efface
   le mot, en boucle (voir brand-word.js). Taille calee sur la largeur du bloc.
   -------------------------------------------------------------------------- */
.s-word {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  line-height: 1;
}
.s-word__text {
  display: block;
  padding: .06em 0 .02em;
  color: var(--value-ink, #050505);
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: calc(100cqw / 5.08);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .95;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.s-word__text.is-red { color: var(--brick-ember, #b1230a); }
.s-word__band {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--brick-ember, #b1230a);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) { .s-word__band { display: none; } }

/* Hero mobile : ARCHITECTE DE PERCEPTION reste sur une seule ligne (la derniere lettre passait a la
   ligne sur certains telephones selon la police chargee). */
@media (max-width: 768px) {
  #top .hero-stage .hero-kinetic-wrap { width: max-content !important; }
  #top .hero-kinetic-text { white-space: nowrap !important; }
}

/* Mobile : l'entete ne suit plus le defilement (site-header.css), les disciplines epinglees n'ont
   donc plus a lui reserver de place en haut. Les 5 cartes occupent tout l'ecran et glissent l'une
   par-dessus l'autre, chacune remplacant entierement la precedente (maquette du 19/09/2026). */
@media (max-width: 768px) {
  .sticky-disciplines-inner { padding-top: 0 !important; }
  .disciplines-sticky-viewport { padding: 0 !important; justify-content: flex-start; }
  .disciplines-cards-stage { height: 100%; padding-left: 0; }
  .story-card {
    width: 100vw;
    padding: 30px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    border: 0;
    box-shadow: none;
  }
  .story-card.is-docked {
    background: var(--card-bg, #eae3d8);
    box-shadow: none;
  }
  /* Ombre seulement pendant le glissement (sinon elle deborde sur la carte visible au repos). */
  .story-card.is-sliding { box-shadow: -18px 0 40px rgba(0, 0, 0, 0.14); }
  .stage-progress-bar { display: none; }
  .card-dot { top: 36px; right: 20px; }
  .card-header-block { flex: 0 0 auto; margin-bottom: 0; }
  .card-title { font-size: clamp(26px, 7.6vw, 34px) !important; }
  .card-desc { font-size: 15px !important; line-height: 1.42 !important; }
  .card-content-split {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 18px;
  }
  .card-visual-frame { flex: 1 1 auto; min-height: 0; height: auto; }
  .card-action-block { flex: 0 0 auto; padding: 18px 0 0; align-items: flex-start; }
  .card-divider-line { display: none; }
  .card-cta-link { font-size: 16px !important; }
}

/* --------------------------------------------------------------------------
   REALISATIONS, 1re carte (fiche d'Aboubacar du 19/09/2026) : titre a gauche, phrase d'accroche,
   mosaique (2 tuiles a gauche, grande au centre, fine a droite) puis grande tuile legendee en bas.
   Le desktop garde la mosaique a 4 tuiles (la grande tuile du bas est reservee au mobile).
   -------------------------------------------------------------------------- */
.s-project-intro-head { display: block; align-self: start; min-width: 0; text-align: left; }
@media (max-width: 760px) { .s-project-intro-head { text-align: center; } }
.s-project-intro-head p {
  margin: 14px 0 0;
  max-width: 46ch;
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.s-project-intro-tile--5 { display: none; }
.s-project-intro-tile--4 img { object-position: 50% 30%; }

@media (max-width: 760px) {
  .s-project-panel--intro {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    padding: 26px 13px 8px;
  }
  .s-project-panel--intro .s-project-intro-head h2 {
    width: auto;
    align-self: auto;
    justify-self: auto;
    font-size: clamp(28px, 8.6vw, 42px);
    letter-spacing: -.045em;
    line-height: .92;
    text-align: center;
    white-space: nowrap;
  }
  .s-project-intro-head p {
    margin: 14px auto 0;
    max-width: 34ch;
    font-size: 11px;
    text-align: center;
  }
  .s-project-intro-tiles {
    height: 100%;
    min-height: 0;
    align-self: stretch;
    grid-template-columns: .48fr 1fr .35fr;
    grid-template-rows: 139fr 138fr 190fr;
    gap: 6px;
  }
  .s-project-intro-tile--1 { grid-row: 1; grid-column: 1; }
  .s-project-intro-tile--2 { grid-row: 2; grid-column: 1; }
  .s-project-intro-tile--3 { grid-row: 1 / span 2; grid-column: 2; }
  .s-project-intro-tile--4 { grid-row: 1 / span 2; grid-column: 3; }
  .s-project-intro-tile--5 { display: block; position: relative; grid-row: 3; grid-column: 1 / -1; }
  .s-project-intro-tile--5::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
  }
  .s-project-intro-tile figcaption {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 12px;
    z-index: 1;
    color: #fff;
    font-family: var(--type-display, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-align: center;
    text-transform: uppercase;
  }
}

/* --------------------------------------------------------------------------
   REALISATIONS, carte de marque DIOPARDY (fiche du 19/09/2026) : titre, banniere d'en-tete
   (monogramme, nom, menu), photo pleine largeur, banniere de pied. Meme composition sur mobile
   et desktop (colonne centree de 460px max).
   -------------------------------------------------------------------------- */
.s-project-panel--brand {
  grid-template-columns: minmax(0, min(100%, 460px));
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-content: center;
  gap: 10px;
  padding: 26px 20px 20px;
}
.s-project-panel--brand .s-brand-title {
  margin: 0 0 6px;
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(28px, 8.6vw, 42px);
  font-weight: 800 !important;
  letter-spacing: -.045em;
  line-height: .92;
  text-align: center;
  text-transform: uppercase !important;
}
.s-brand-bar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #111;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
}
.s-brand-bar--top {
  gap: 12px;
  height: 58px;
  padding: 0 16px 0 12px;
  background: #faf6f2;
  font-size: 13px;
  letter-spacing: .02em;
}
.s-brand-bar--top img { display: block; width: 44px; height: 44px; object-fit: contain; }
.s-brand-bar--top strong { flex: 1; font-weight: 800; white-space: nowrap; }
.s-brand-burger { display: grid; gap: 5px; width: 28px; }
.s-brand-burger i { display: block; height: 2px; background: #6f6a66; }
.s-brand-bar--bottom {
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  background: #fff;
  font-size: 11px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.s-brand-photo {
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #b9bcc2;
  pointer-events: auto;
  touch-action: pan-y;
}
.s-brand-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.s-brand-photo:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* --------------------------------------------------------------------------
   REALISATIONS, carte de marque MALIKANTA (fiche du 19/09/2026) : banniere sombre (logo blanc,
   menu), tablette du site puis portrait produit, l'ecart entre les deux images suit la fiche.
   -------------------------------------------------------------------------- */
.s-project-panel--mk { grid-template-rows: auto auto minmax(0, 1fr); }
.s-brand-bar--dark { background: #0f0f0f; padding: 0 18px; justify-content: space-between; }
.s-brand-bar--top img.s-brand-logo { width: auto; height: 30px; }
.s-brand-burger--light i { background: #fff; }
.s-brand-media {
  display: grid;
  grid-template-rows: 256fr 122fr;
  row-gap: clamp(18px, 5vh, 56px);
  min-height: 0;
}
.s-brand-photo--portrait img { object-position: 50% 42%; }

/* --------------------------------------------------------------------------
   REALISATIONS, carte de marque KR STUDIO (fiche du 19/09/2026) : bandeau noir (logo + titre),
   capture du site, deux photos cote a cote, bandeau blanc legende. Fond jaune.
   -------------------------------------------------------------------------- */
.s-project-panel--kr {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: 30px;
}
.s-brand-bar--kr {
  gap: 14px;
  height: clamp(64px, 9.2vh, 82px);
  padding: 6px 14px 6px 8px;
  background: #000;
  color: #fff;
}
.s-brand-bar--kr img.s-brand-logo { width: auto; height: 100%; object-fit: contain; flex: 0 0 auto; }
.s-brand-bar--kr .s-brand-bar__title {
  flex: 1;
  margin: 0;
  color: #fff !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 800 !important;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase !important;
}
.s-project-panel--kr .s-brand-media { grid-template-rows: 350fr 105fr; row-gap: clamp(14px, 3.4vh, 30px); }
.s-brand-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.s-brand-duo .s-brand-photo:first-child img { object-position: 50% 28%; }
.s-brand-bar--center { justify-content: center; height: 44px; font-size: 13px; letter-spacing: .04em; }
/* La capture du site est cadree en haut de page (logo et menu visibles) quand l'ecran est court. */
.s-project-panel--kr .s-brand-media > .s-brand-photo img { object-position: 50% 0; }

/* --------------------------------------------------------------------------
   REALISATIONS, carte de marque RAFET STUDIO (composition libre, 19/09/2026) : fond violet,
   barre de navigation bordeaux (monogramme dore), portrait en une, trois univers etiquetes
   (bridal, glow, atelier), bouton de reservation. Comme une petite landing page de la marque.
   -------------------------------------------------------------------------- */
.s-project-panel--rafet { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.s-brand-bar--bordeaux {
  gap: 12px;
  height: 66px;
  padding: 0 16px 0 14px;
  background: #4a0a14;
  color: #e2c48a;
}
.s-brand-bar--bordeaux img.s-brand-logo { width: auto; height: 40px; flex: 0 0 auto; }
.s-rafet-name { display: grid; flex: 1; gap: 4px; }
.s-rafet-name strong { font-size: 14px; font-weight: 600; letter-spacing: .24em; line-height: 1; }
.s-rafet-name small { color: #c9a877; font-size: 8.5px; font-weight: 500; letter-spacing: .3em; line-height: 1; }
.s-brand-burger--gold i { background: #e2c48a; }
.s-rafet-media { grid-template-rows: 2.2fr 1fr; row-gap: 10px; }
.s-project-panel--rafet .s-rafet-media > .s-brand-photo img { object-position: 50% 100%; }
.s-rafet-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 0; }
.s-rafet-tile { position: relative; }
.s-rafet-tile img { object-position: 50% 30%; }
.s-rafet-tile:nth-child(3) img { object-position: 60% 50%; }
.s-rafet-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 10px;
  background: #4a0a14;
  color: #e2c48a;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.s-brand-bar--cta {
  justify-content: center;
  gap: 14px;
  height: 52px;
  background: #4a0a14;
  color: #e2c48a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  pointer-events: auto;
  touch-action: pan-y;
}
.s-brand-bar--cta b { font-size: 18px; font-weight: 400; }
.s-brand-bar--cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   REALISATIONS, carte de marque AIDOUCHE (19/09/2026) : fond vert feuille adouci (vert vif de la charte,
   un peu plus sobre), titre et bandeaux en vert foret #004d2c, logo sur bandeau blanc, portrait en une,
   trois saveurs etiquetees. Reprend la structure de la carte RAFET (classes .s-rafet-*).
   -------------------------------------------------------------------------- */
.s-project-panel--aid { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.s-project-panel--aid .s-brand-title { color: #004d2c !important; }
.s-brand-bar--white {
  justify-content: space-between;
  height: 66px;
  padding: 0 16px 0 14px;
  background: #fefefe;
}
.s-brand-bar--white img.s-brand-logo { width: auto; height: 44px; }
.s-brand-burger--forest i { background: #004d2c; }
.s-project-panel--aid .s-rafet-media > .s-brand-photo img { object-position: 50% 58%; }
.s-project-panel--aid .s-rafet-tile img { object-position: 50% 42%; }
.s-project-panel--aid .s-rafet-tag { background: #004d2c; color: #fff9ee; }
.s-project-panel--aid .s-brand-bar--cta { background: #004d2c; color: #fff9ee; }

/* --------------------------------------------------------------------------
   REALISATIONS, carte de marque DAKAARO (19/09/2026) : fond blanc ivoire, entete qui reprend celui de la
   boutique DAKAARO (menu, nom en noir, panier, onglets Femme/Homme), portrait Ndebele en une, quatre
   categories etiquetees, bouton noir « La collection Ndebele ». Structure des cartes RAFET/AIDOUCHE.
   -------------------------------------------------------------------------- */
.s-project-panel--dk {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: 30px;
}
.s-dk-head { background: #fff; color: #111; }
.s-dk-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 62px;
  padding: 0 16px;
  border-bottom: 1px solid #e6e2d8;
}
.s-dk-menu { display: flex; align-items: center; gap: 10px; }
.s-dk-menu b { font-family: var(--type-display, 'Inter', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.s-brand-burger--ink { width: 20px; gap: 4px; }
.s-brand-burger--ink i { background: #111; }
.s-dk-mark {
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  text-transform: uppercase;
}
.s-dk-bag { justify-self: end; display: grid; }
.s-dk-tabs { display: flex; justify-content: center; gap: 34px; padding: 10px 0 9px; }
.s-dk-tabs span {
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  color: #9a968c;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.s-dk-tabs span.is-on { color: #111; border-bottom-color: #111; }
.s-project-panel--dk .s-rafet-media > .s-brand-photo img { object-position: 50% 25%; }
.s-rafet-trio--four { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.s-rafet-trio--four .s-rafet-tile img { object-fit: cover; object-position: 50% 50%; background: #ececec; }
.s-rafet-trio--four .s-rafet-tag { padding: 5px 6px; font-size: 8px; letter-spacing: .08em; background: #111; color: #f6f1e5; }
.s-brand-bar--ink { background: #111; color: #f6f1e5; }
/* Chaussures et collier sont larges : montres en entier sur leur fond gris. */
.s-rafet-trio--four .s-rafet-tile:nth-child(2) img { object-fit: contain; background: #e1e1e1; }
.s-rafet-trio--four .s-rafet-tile:nth-child(4) img { object-fit: contain; background: #f1f1f1; }
.s-rafet-trio--four .s-rafet-tile:nth-child(2), .s-rafet-trio--four .s-rafet-tile:nth-child(4) { background: inherit; }

/* REALISATIONS, carte de marque KONIQ (25/09/2026) : fond noir (--project-panel-color sur la
   fiche), en-tete sombre reprise de Malikanta (.s-brand-bar--dark/--light), etiquettes et CTA
   en orange officiel KONIQ #FE5800 (voir koniq/CLAUDE.md, jamais un autre orange). */
.s-project-panel--koniq { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.s-project-panel--koniq .s-rafet-tag { background: #111; color: #FE5800; }
.s-project-panel--koniq .s-brand-bar--cta { background: #FE5800; color: #0a0a0a; }
/* Barre orange pleine largeur entre le hero et les 3 tuiles, fidele au prototype fourni le 25/09. */
.s-project-panel--koniq .s-rafet-media { grid-template-rows: 2.2fr auto 1fr; row-gap: 8px; }
.s-koniq-divider { background: #FE5800; height: 8px; }

/* Hero mobile : slogan par video au-dessus de STUDIO (chapitre 1, 20/09/2026).
   Hauteur reservee (3 lignes) et alignement bas : STUDIO ne bouge pas quand le slogan change. */
@media (max-width: 768px) {
  #top .hero-stage .hero-mobile-desc {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-height: 3.9em !important;
    max-width: 24ch !important;
    font-size: clamp(1.3rem, 4.3vw, 1.7rem) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    transition: opacity .26s ease, transform .26s ease, filter .26s ease;
  }
  #top .hero-stage .hero-mobile-desc.is-out {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
  #top .hw-b.is-swap .d-mega {
    animation: heroStudioRise .95s cubic-bezier(.65, 0, .35, 1) both;
  }
}
@keyframes heroStudioRise {
  0%   { clip-path: inset(0 0 100% 0); transform: translateY(38%); }
  55%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #top .hw-b.is-swap .d-mega { animation: none; }
}

/* Cartes Expertises (chapitre 3, 20/09/2026) : sur mobile la liste des 3 livrables est masquee ;
   une ligne compacte la remplace sous la promesse. Cachee au-dessus de 768 px (la liste s'affiche). */
.card-tags { display: none; }
@media (max-width: 768px) {
  .card-tags {
    display: block;
    margin: 10px -28px 0 0;
    font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .62;
  }
}

/* Cartes Expertises (20/09/2026) : la carte entiere n'ouvre plus de page, seuls les boutons le font.
   Videos courtes en boucle sur les cartes qui en ont une (card-videos.js) : la video se fond au-dessus de
   l'image quand elle joue, l'image reste dessous comme image d'attente. */
.story-card { cursor: default; }
.card-visual-frame .card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.card-visual-frame .card-video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .card-visual-frame .card-video { display: none; }
}

/* Cartes sans video (Perception, Branding) : zoom lent en boucle sur l'image tant que la carte est celle du
   dessus (classe is-live posee par card-videos.js). Meme mouvement que les boucles provisoires d'origine. */
.story-card.is-live:not([data-video]) .card-visual-frame img {
  animation: cardSlowZoom 5s ease-in-out infinite;
}
@keyframes cardSlowZoom {
  0%, 100% { transform: scale(1.01); }
  50% { transform: scale(1.11); }
}
@media (prefers-reduced-motion: reduce) {
  .story-card.is-live:not([data-video]) .card-visual-frame img { animation: none; }
}

/* Chapitre 4 : ligne "ce que nous avons fait" dans la marge haute de chaque carte de marque. */
.s-brand-role {
  position: absolute;
  top: 9px;
  left: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: clamp(8.5px, 2.5vw, 10px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .92;
  pointer-events: none;
}
.s-project-panel--kr .s-brand-role,
.s-project-panel--dk .s-brand-role { color: #111; }
/* Chapitre 4 : portrait noir et blanc de la tuile centrale, visage a droite de l'image, cadre decale pour le garder. */
.s-project-intro-tile--3 img { object-position: 72% 20%; }


.s-testi {
  position: relative;
  padding: 96px 0 72px;
  background: #f6f1e5;
  color: #111;
  overflow: hidden;
}
.s-testi .s-testi__eyebrow {
  margin: 0 0 20px;
  padding: 0 24px;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #111 !important;
  opacity: .6;
}
.s-testi__stage { display: grid; gap: 16px; padding: 0 24px; }
.s-testi__card {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 28px 28px 92px;
  border: 2px solid rgba(17, 17, 17, .22);
  background: #fbf8f0;
  color: #111;
}
.s-testi__corner { display: none; }
.s-testi__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 56px;
  margin-bottom: 14px;
  background: rgba(17, 17, 17, .08);
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  overflow: hidden;
}
.s-testi__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.s-testi .s-testi__card blockquote { margin: 0; }
.s-testi .s-testi__card blockquote p {
  margin: 0;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400;
  font-size: 15px !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
}
.s-testi__card figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.s-testi__name {
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.s-testi__role {
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .65;
}
.s-testi__controls { display: none; }

/* Avec JavaScript : scene a cartes decalees. Mobile d'abord (carte 300 x 340), 365 x 365 des 640 px. */
.s-testi.is-js .s-testi__stage {
  --card-w: 300px;
  --card-h: 340px;
  display: block;
  position: relative;
  height: 560px;
  padding: 0;
  touch-action: pan-y;
}
.s-testi.is-js .s-testi__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  cursor: pointer;
  z-index: 0;
  clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, calc(100% - 50px) 100%, 50px 100%, 0 100%, 0 0);
  transition: transform .5s ease-in-out, background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out;
}
.s-testi.is-js .s-testi__card.is-instant { transition: none; }
.s-testi.is-js .s-testi__card:hover { border-color: rgba(17, 17, 17, .55); }
.s-testi.is-js .s-testi__card:focus-visible { outline: 2px solid #f52c25; outline-offset: -6px; }
.s-testi.is-js .s-testi__card.is-center {
  z-index: 10;
  cursor: default;
  background: #111;
  border-color: #111;
  color: #f6f1e5;
}
.s-testi.is-js .s-testi__corner {
  display: block;
  position: absolute;
  right: -2px;
  top: 48px;
  width: 70.72px;
  height: 2px;
  background: rgba(17, 17, 17, .22);
  transform-origin: top right;
  transform: rotate(45deg);
}
.s-testi.is-js .s-testi__card.is-center .s-testi__corner { background: #f52c25; }
.s-testi.is-js .s-testi__card.is-center .s-testi__avatar { background: rgba(246, 241, 229, .14); }
.s-testi.is-js .s-testi__controls {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  z-index: 20;
}
.s-testi__btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(17, 17, 17, .22);
  background: #f6f1e5;
  color: #111;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.s-testi__btn:hover { background: #111; color: #f6f1e5; }
.s-testi__btn:focus-visible { outline: 2px solid #f52c25; outline-offset: 2px; }
@media (min-width: 640px) {
  .s-testi.is-js .s-testi__stage { --card-w: 365px; --card-h: 365px; height: 600px; }
  .s-testi__card { padding: 32px 32px 96px; }
  .s-testi__card figcaption { left: 32px; right: 32px; bottom: 30px; }
  .s-testi .s-testi__card blockquote p { font-size: 17px !important; }
  .s-testi .s-testi__eyebrow { padding: 0 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-testi.is-js .s-testi__card { transition: none; }
}

/* Carte DIOPARDY (20/09/2026) : bandeau du bas en 3 colonnes, gauche / centre / droite, le mot du milieu
   reste au centre exact de la carte quelle que soit la longueur des deux autres. */
.s-brand-bar--tri {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.s-brand-bar--tri span:first-child { justify-self: start; }
.s-brand-bar--tri span:nth-child(2) { justify-self: center; }
.s-brand-bar--tri span:last-child { justify-self: end; }

/* Chapitre 7 (20/09/2026) : ecran d'intro de la Methode. Positions relevees sur la maquette a reperes
   d'Aboubacar (400 x 711) : photo de 32 % a 68 %, sous-titre a 71,3 % (bord droit a 85,8 %), paragraphe de 22 % a
   85,8 %, signature centree a 49 %. Typographie alignee sur la section Trois Univers (demande du 20/09/2026) :
   titre = Inter 700, 12 vw (49 px a 411 px), interlettrage -0,05 em, interligne 0,95, capitales ; texte = Fraunces
   italique 500, 4,2 vw plafonne a 17 px, interligne 1,42 ; sous-titre = Inter 700 capitales.
   Tout est en position absolue dans la carte : hauteurs en % de l'ecran, tailles en vw. Mobile seulement ;
   au-dessus de 980 px l'ancienne carte reste (passe desktop a venir). */
.s-methode-intro { display: none; }
@media (max-width: 979px) {
  .l-expansive-section .l-expansive-slider__item--intro .l-expansive-card {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }
  .l-expansive-section .l-expansive-slider__item--intro .l-expansive-card__text { display: none !important; }
  .l-expansive-section .l-expansive-slider__item--intro .l-expansive-card__title {
    position: absolute !important;
    top: 17.2% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 2;
  }
  .l-expansive-section .l-expansive-slider__item--intro .l-expansive-card__title h2 {
    margin: 0 !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: 12vw !important;
    font-weight: 700 !important;
    line-height: .95 !important;
    letter-spacing: -.05em !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #0b1a2b !important;
    text-shadow: 3px 6px 9px rgba(11, 26, 43, .26) !important;
  }
  .l-expansive-section .l-expansive-slider__item--intro .s-methode-intro {
    display: block;
    position: absolute;
    inset: 0;
  }
  .s-methode-intro__photo {
    position: absolute;
    top: 32%;
    left: 10.5%;
    width: 81%;
  }
  .s-methode-intro__photo img { display: block; width: 100%; height: auto; }
  /* Sous-titre, paragraphe et signature s'enchainent sous la photo (hauteur de la photo = 65,2 vw) : la signature
     prend l'espace restant, elle ne peut donc jamais chevaucher le texte, quelle que soit la hauteur d'ecran. */
  .s-methode-intro__flow {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(32% + 65.2vw + 1.4svh);
    bottom: 1.5%;
    display: flex;
    flex-direction: column;
  }
  .l-expansive-section .s-methode-intro .s-methode-intro__subtitle {
    margin: 0 14.2% 0 auto !important;
    max-width: 76% !important;
    text-wrap: balance;
    text-align: right !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: 3.1vw !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    text-transform: uppercase !important;
    color: #0a0a0a !important;
  }
  .l-expansive-section .s-methode-intro .s-methode-intro__text {
    margin: 1.2svh 14.2% 0 16% !important;
    text-align: left !important;
    font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
    font-style: italic !important;
    font-size: min(4.2vw, 17px) !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
    letter-spacing: normal !important;
    color: rgba(17, 17, 17, .72) !important;
  }
  .s-methode-intro__signature {
    flex: 1 1 0;
    min-height: 0;
    max-height: 13svh;
    width: 60%;
    margin: 1.4svh auto 0;
    object-fit: contain;
  }
}

/* Chapitre 7 (20/09/2026) : ecrans de texte des 5 piliers (les images et la video sont les ecrans intercales).
   Meme fond blanc et memes polices que l'intro : nom en Inter 700 (12 vw, -0,05 em, comme CONNEXION), titre en Inter
   600, texte en Fraunces italique 17 px, livrables en mono. Les !important battent les regles nth-child(6) / (8) du
   gabarit d'origine, qui centraient certains ecrans. Mobile d'abord, desktop en deux colonnes. */
.l-expansive-section .l-expansive-slider .l-expansive-slider__item.s-method-item {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  text-align: left !important;
  padding: 12.5svh 8% 5svh 10% !important;
  background: #ffffff !important;
  color: #111 !important;
}
.s-method-item__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  pointer-events: none;
}
.s-method-item__badge {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 19vw;
  height: 9svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1a2b;
  color: #fff;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 8vw;
  font-weight: 700;
  line-height: 1;
}
.s-method-item__inner { position: relative; z-index: 1; width: 100%; }
.s-method-item .s-method-item__name {
  margin: 0 0 2.2svh !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: 12vw !important;
  font-weight: 700 !important;
  line-height: .95 !important;
  letter-spacing: -.05em !important;
  text-transform: uppercase !important;
  color: #0b1a2b !important;
  text-shadow: 3px 6px 9px rgba(11, 26, 43, .22) !important;
}
.s-method-item .s-method-item__headline {
  margin: 0 0 2.2svh !important;
  max-width: 84% !important;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-size: min(7vw, 30px) !important;
  text-wrap: balance;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  color: #0b1a2b !important;
}
.s-method-item .s-method-item__text {
  margin: 0 0 2.4svh !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  font-size: min(3.9vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: rgba(17, 17, 17, .72) !important;
}
.s-method-item__list { list-style: none; margin: 0 0 2.4svh; padding: 0; border-top: 1px solid rgba(17, 17, 17, .18); }
.s-method-item__list li {
  padding: 1.1svh 0;
  border-bottom: 1px solid rgba(17, 17, 17, .18);
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #111;
}
.s-method-item .s-method-item__gives {
  margin: 0 !important;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
  font-style: italic !important;
  font-size: min(3.9vw, 16px) !important;
  line-height: 1.35 !important;
  color: #0b1a2b !important;
}
.s-method-item__gives span {
  display: block;
  margin-bottom: .5svh;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f52c25;
}
@media (min-width: 980px) {
  .l-expansive-section .l-expansive-slider .l-expansive-slider__item.s-method-item {
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    flex: 0 0 100vw !important;
    padding: 0 9vw !important;
  }
  .s-method-item__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 7vw; align-items: center; }
  .s-method-item__badge { width: 9vw; height: 12vh; font-size: 3.6vw; }
  .s-method-item .s-method-item__name { grid-column: 1; grid-row: 2 / span 5; align-self: start; font-size: clamp(56px, 7vw, 120px) !important; }
  .s-method-item .s-method-item__headline,
  .s-method-item .s-method-item__text,
  .s-method-item__list,
  .s-method-item .s-method-item__gives { grid-column: 2; }
  .s-method-item .s-method-item__headline { font-size: 26px !important; }
  .s-method-item .s-method-item__text, .s-method-item .s-method-item__gives { font-size: 18px !important; }
}


.s-team-circ {
  position: relative;
  padding: 88px 0 80px;
  background: #f6f1e5;
  color: #111;
  overflow: hidden;
}
.s-team-circ__eyebrow {
  margin: 0 0 28px;
  padding: 0 24px;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace) !important;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #111 !important;
  opacity: .6;
}
.s-team-circ__grid { padding: 0 24px; }
.s-team-circ__images {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  margin: 0 auto 40px;
  perspective: 1000px;
}
.s-team-circ__photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1a2b;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: transform .8s cubic-bezier(.4, 2, .3, 1), opacity .8s cubic-bezier(.4, 2, .3, 1);
}
.s-team-circ__mono {
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: 15vw;
  color: rgba(255, 255, 255, .35);
}
/* Vraies photos fournies le 23/09/2026 (remplacent le monogramme provisoire). */
.s-team-circ__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-team-circ__content { display: flex; flex-direction: column; }
.s-team-circ__content [data-team-text] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.s-team-circ__content [data-team-text].is-in { opacity: 1; transform: translateY(0); }
.s-team-circ__role {
  margin: 0 0 6px;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 6.5vw;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #0b1a2b;
}
.s-team-circ__name {
  margin: 0 0 20px;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f52c25;
}
.s-team-circ__tagline {
  margin: 0 0 32px;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: min(4.2vw, 18px);
  line-height: 1.5;
  color: rgba(17, 17, 17, .72);
}
.s-team-circ__controls { display: flex; gap: 14px; }
.s-team-circ__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #0b1a2b;
  color: #f6f1e5;
  cursor: pointer;
  transition: background-color .3s;
}
.s-team-circ__btn:hover { background: #f52c25; }
@media (min-width: 700px) {
  .s-team-circ__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
  .s-team-circ__images { margin: 0; max-width: none; }
  .s-team-circ__role { font-size: 2.4vw; }
  .s-team-circ__tagline { font-size: 17px; }
}

/* Transition rideaux coulissants (22/09/2026) : meme famille d'effet que l'ouverture du menu
   hamburger (clip-path/panneau plein ecran), pilotee par le scroll via page-curtain.js. Spacer
   pur (#pageCurtainSpacer) + rideau en position:fixed reelle (#pageCurtainFixed), affiche
   seulement pendant le passage (is-active), 2 panneaux qui glissent hors-ecran pour amener la
   section suivante. Prepare en avance, sans contenu derriere pour l'instant. */
.s-curtain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.s-curtain.is-active { display: block; }
.s-curtain__panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  will-change: transform;
}
.s-curtain__panel--left { left: 0; border-right: 1px solid #f52c25; }
.s-curtain__panel--right { right: 0; }

/* Titre "SENTEKIA TEAM" sur le rideau (maquette d'Aboubacar) : reveal en cascade des lettres,
   independant de la vitesse de scroll -- joue une fois quand .is-active apparait. */
.s-curtain__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.s-curtain__wordmark span {
  display: block;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 10.5svh, 76px);
  line-height: .92;
  letter-spacing: .02em;
  color: #f5f0e8;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.s-curtain.is-revealed .s-curtain__wordmark span { opacity: 1; transform: translateY(0); }
.s-curtain__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease .5s, transform .6s ease .5s;
}
.s-curtain.is-revealed .s-curtain__brand { opacity: 1; transform: translateY(0); }
.s-curtain__mark { width: 26vw; max-width: 120px; height: auto; color: #f5f0e8; }
.s-curtain__team {
  font-family: var(--type-display, 'Inter', sans-serif);
  font-weight: 800;
  font-size: clamp(26px, 9vw, 52px);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #f5f0e8;
}


.s-choreo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
}
.s-choreo.is-active { display: block; }
.s-choreo__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70vh;
  max-width: 90vw;
  height: auto;
  transform: translate(-50%, -50%);
  color: #0b1a2b;
  opacity: .045;
}
.s-choreo__eyebrow {
  position: absolute;
  top: 3vh;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11, 26, 43, .55);
  opacity: 0;
}
.s-choreo__stage { position: absolute; inset: 0; }
.s-choreo__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38vw;
  height: 26vh;
  border-radius: 0 !important;
  will-change: transform, width, height;
}
.s-choreo__photo { position: relative; width: 100%; height: 100%; overflow: hidden; background: #eeeeec; }
.s-choreo__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-choreo__img--tl { z-index: 10; }
.s-choreo__img--br { z-index: 20; }
.s-choreo__img--bl { z-index: 30; }
.s-choreo__img--tr { z-index: 40; }
/* 2e retour d'Aboubacar (22/09/2026, "c'est un peu melange") : separer nettement les deux
   textes. Le titre/fonction reste EN INCRUSTATION sur la photo (scrim sombre en bas) ; le
   petit texte descriptif vit HORS de la photo, en dessous pour tl/tr (rangee du haut), au
   dessus pour bl/br (rangee du bas) -- chacun cote du vide central pour rester lisible. */
.s-choreo__inner-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 6% 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78) 20%, rgba(0, 0, 0, 0));
  opacity: 0;
  pointer-events: none;
}
.s-choreo__inner-role {
  display: block;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: min(2.9vw, 12px);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
}
.s-choreo__inner-name {
  display: block;
  margin-bottom: 2px;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: min(2.4vw, 10px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f52c25;
}
.s-choreo__outer-label {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 10px 4% 0;
  opacity: 0;
  pointer-events: none;
}
.s-choreo__outer-label--below { top: 100%; }
.s-choreo__outer-label--above { bottom: 100%; padding: 0 4% 10px; }
.s-choreo__outer-bio {
  margin: 0;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: min(2.6vw, 11px);
  line-height: 1.45;
  color: #111;
}
/* Titre sur la photo du fondateur une fois en plein ecran (retour d'Aboubacar 22/09/2026) :
   nom + fonction affiches sur l'image, pas dans le calque .s-choreo__label (deja efface avant
   la convergence). */
.s-choreo__hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8svh;
  padding: 0 8%;
  text-align: left;
  opacity: 0;
}
.s-choreo__hero-name {
  display: block;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: clamp(28px, 8vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.s-choreo__hero-role {
  display: block;
  margin-bottom: 4px;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f52c25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* Grille Equipe (22/09/2026, test) : fond a pois, photos pensees pour un detourage
   transparent (pas de cadre/fond de carte, object-fit:contain), reveal au scroll par carte
   (team-grid-reveal.js, IntersectionObserver, delai en cascade). Coins jamais arrondis
   (convention du site). Mobile d'abord, 2 colonnes des le depart comme la maquette. */
.s-team-grid2 {
  padding: 64px 20px 88px;
  background-color: #fdfdfb;
  background-image: radial-gradient(rgba(11, 26, 43, .16) 1px, transparent 1px);
  background-size: 14px 14px;
}
.s-team-grid2__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4%;
  row-gap: 48px;
  max-width: 720px;
  margin: 0 auto;
}
.s-team-grid2__card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.s-team-grid2__card.is-revealed { opacity: 1; transform: translateY(0); }
.s-team-grid2__photo {
  aspect-ratio: 3 / 4;
  margin: 0 0 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 0 !important;
  overflow: hidden;
}
.s-team-grid2__photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.s-team-grid2__role {
  margin: 0 0 2px;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: min(4.4vw, 17px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: #0b1a2b;
}
.s-team-grid2__name {
  margin: 0 0 8px;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: .04em;
  color: #f52c25;
}
.s-team-grid2__bio {
  margin: 0;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: min(3.6vw, 14px);
  line-height: 1.45;
  color: rgba(17, 17, 17, .68);
}
@media (min-width: 700px) {
  .s-team-grid2 { padding: 96px 40px 120px; }
  .s-team-grid2__cards { max-width: 980px; column-gap: 48px; row-gap: 64px; }
  .s-team-grid2__role { font-size: 18px; }
  .s-team-grid2__bio { font-size: 15px; }
}


.s-quote-transition {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  background: #0a0a0c;
  pointer-events: none;
}
.s-quote-transition.is-active { display: block; }
/* Palier titre "TÉMOIGNAGE" (23/09/2026) : gros caractere grotesque, plein ecran, blanc sur
   noir -- occupe la 1ere fenetre de scroll avant que Malikanta (1ere slide) ne prenne le relais. */
.s-quote-transition__title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(12px, 3vw, 32px);
  opacity: 0;
}
/* Effet poster : "TEMOIGNAGE" casse en 3 lignes ("TEM"/"OIGN"/"AGE"), chaque ligne etiree sur
   toute la largeur disponible -- pas une taille uniforme pour tout le mot. Moins de lettres sur
   une ligne = police proportionnellement plus grande (meme methode ~0.62em/lettre en Inter
   800/900 capitales que ssf-brand/le titre du carousel-reveal) pour que TEM/AGE (3 lettres)
   et OIGN (4 lettres) occupent chacune la meme largeur de cadre malgre leur longueur differente. */
.s-quote-transition__title-line {
  display: block;
  font-family: var(--type-display, 'Inter', sans-serif) !important;
  font-weight: 900 !important;
  line-height: .86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(64px, 42vw, 300px);
}
.s-quote-transition__title-line--mid { font-size: clamp(48px, 31.5vw, 225px); }

@media (min-width: 900px) {
  .s-quote-transition__title-line { font-size: clamp(160px, 26vw, 340px); }
  .s-quote-transition__title-line--mid { font-size: clamp(120px, 19.5vw, 255px); }
}
.s-quote-transition__slide { position: absolute; inset: 0; opacity: 0; }
/* Empilement (27/09/2026, page-quote-transition.js) : chaque temoignage est un panneau plein
   ecran qui monte et recouvre le precedent, angles droits ; la trame de lignes reste sur le seul
   ecran titre (retiree des photos a la demande d'Aboubacar). Le calque
   fixe remplace position:sticky, inoperant dans le moteur de defilement de l'accueil. */
.s-qt-stack .s-quote-transition__slide { opacity: 1; overflow: hidden; background: #0a0a0c; transform: translate3d(0, 100%, 0); will-change: transform; backface-visibility: hidden; box-shadow: 0 -24px 60px rgba(0, 0, 0, .45); }
.s-qt-stack .s-quote-transition__title { opacity: 1; z-index: 0; }
.s-qt-stack .s-quote-transition__title-line { position: relative; z-index: 1; }
.s-qt-stack .s-quote-transition__title::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(79, 79, 79, .18) 1px, transparent 1px), linear-gradient(to bottom, rgba(79, 79, 79, .18) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  pointer-events: none;
}
/* Guillemet recentre (son translate(-50%) avait disparu le 22/09) */
.s-qt-stack .s-quote-transition__mark { transform: translateX(-50%); }
.s-quote-transition__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Logo (MADIBA NEWS) : jamais en cover plein cadre (deformerait/rognerait le wordmark) --
   bandeau blanc ancre en haut, object-fit:contain, padding genereux autour du logo. */
.s-quote-transition__bg--logo {
  inset: 0 0 auto 0;
  height: 38%;
  width: 100%;
  object-fit: contain;
  background: #fff;
  padding: 6% 12%;
  box-sizing: border-box;
}
.s-quote-transition__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)); }
.s-quote-transition__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 9%;
  text-align: center;
}
.s-quote-transition__mark {
  display: block;
  position: relative;
  left: 50%;
  margin: 0 0 8px;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-size: 22vw;
  line-height: .6;
  color: #f52c25;
}
.s-quote-transition__text {
  margin: 0 auto 20px;
  max-width: 26em;
  font-family: var(--type-editorial, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-size: min(5.6vw, 24px);
  line-height: 1.4;
  color: #f5f0e8;
}
.s-quote-transition__author {
  margin: 0;
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f52c25;
}
.s-quote-transition__author span { color: rgba(245, 240, 232, .6); text-transform: none; letter-spacing: 0; }

/* Galerie finale (22/09/2026) : section pleine page en boucle silencieuse juste avant le footer,
   simple flux de page (pas de scroll pilote comme le rideau/choreo/quote) -- la video HyperFrames
   porte deja son propre rythme de montage en 14.5s. */
.s-finale-gallery {
  position: relative;
  width: 100%;
  height: 100svh;
  background: #0b0908;
  overflow: hidden;
}
.s-finale-gallery__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grille Temoignages clients (22/09/2026) : port vanille de ClientTestimonialsGrid
   (prototype sentekia-nextjs), accordeon tactile sur mobile, expansion au survol sur
   desktop, pilote par client-testimonials-grid.js (juste un clic qui bascule .is-active,
   tout le reste est en CSS). Rouge/typo ramenes au systeme du site (etaient #fb3732 /
   Big Shoulders + Space Mono dans le prototype). Coins jamais arrondis. */
.s-ctg { padding: 56px 20px 72px; background: #0a0a0c; color: #f4f3f0; overflow: hidden; }
.s-ctg__header { display: flex; flex-direction: column; gap: 16px; margin: 0 0 28px; }
.s-ctg__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--type-interface, 'IBM Plex Mono', monospace);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f52c25;
}
.s-ctg__pulse { width: 6px; height: 6px; background: #f52c25; box-shadow: 0 0 8px #f52c25; animation: ctgPulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes ctgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.s-ctg__title {
  margin: 10px 0 0;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: .98;
  color: #fff;
}
.s-ctg__subtitle {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid #f52c25;
  font-family: var(--type-display, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: #8e8e95;
}
.s-ctg__frame { width: 100%; }
.s-ctg__track { display: flex; flex-direction: column; gap: 12px; }
.s-ctg__card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #121215;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .3s ease;
}
.s-ctg__card.is-active { border-color: #f52c25; }
.s-ctg__image { position: relative; width: 100%; height: 180px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.s-ctg__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.s-ctg__bg--mono { display: flex; align-items: center; justify-content: center; background: #1a1a1e; }
.s-ctg__bg--mono span { font-family: var(--type-editorial, 'Fraunces', Georgia, serif); font-style: italic; font-size: 15vw; color: rgba(255,255,255,.18); }
.s-ctg__card.is-active .s-ctg__bg { transform: scale(1.05); }
.s-ctg__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,12,.95) 0%, rgba(10,10,12,.45) 50%, rgba(10,10,12,.15) 100%); }
.s-ctg__label { position: relative; z-index: 2; padding: 18px 16px; display: flex; align-items: flex-end; justify-content: space-between; }
.s-ctg__sector { display: block; margin-bottom: 4px; font-family: var(--type-interface, 'IBM Plex Mono', monospace); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #f52c25; }
.s-ctg__brand { margin: 0; font-family: var(--type-display, 'Inter', sans-serif); font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; color: #fff; }
.s-ctg__tap { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-family: var(--type-interface, 'IBM Plex Mono', monospace); font-size: 15px; font-weight: 700; transition: transform .3s ease, background-color .3s ease; }
.s-ctg__card.is-active .s-ctg__tap { transform: rotate(45deg); background: #f52c25; border-color: #f52c25; }
.s-ctg__drawer { display: grid; grid-template-rows: 0fr; background: #fff; color: #0a0a0c; border-top: 2px solid #f52c25; transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1); overflow: hidden; }
.s-ctg__card.is-active .s-ctg__drawer { grid-template-rows: 1fr; }
.s-ctg__drawer-inner { overflow: hidden; }
.s-ctg__drawer-content { padding: 22px 18px; }
.s-ctg__divider { width: 34px; height: 2.5px; margin-bottom: 14px; background: #f52c25; }
.s-ctg__quote { margin: 0 0 16px; font-family: var(--type-editorial, 'Fraunces', Georgia, serif); font-style: italic; font-size: 14px; line-height: 1.55; color: #111; }
.s-ctg__footer { padding-top: 12px; border-top: 1px solid rgba(0,0,0,.1); }
.s-ctg__author-name { margin: 0; font-family: var(--type-display, 'Inter', sans-serif); font-size: 12px; font-weight: 800; text-transform: uppercase; color: #0a0a0c; }
.s-ctg__author-role { margin: 2px 0 0; font-family: var(--type-interface, 'IBM Plex Mono', monospace); font-size: 10px; color: #585860; }
.s-ctg__glow { display: none; }
@media (min-width: 900px) {
  .s-ctg { padding: 88px 40px; }
  .s-ctg__header { max-width: 1320px; margin: 0 auto 48px; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .s-ctg__subtitle { max-width: 440px; padding-left: 16px; font-size: 14.5px; }
  .s-ctg__frame { max-width: 1320px; margin: 0 auto; padding: 8px; background: #111114; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 90px rgba(0,0,0,.85); }
  .s-ctg__track { flex-direction: row; height: 560px; gap: 8px; }
  .s-ctg__card { flex: 1; height: 100%; flex-direction: row; display: flex; border: 1px solid rgba(255,255,255,.06); transition: flex .7s cubic-bezier(.16,1,.3,1), border-color .4s ease; }
  .s-ctg__card:hover, .s-ctg__card.is-active { flex: 2.6; border-color: #f52c25; }
  .s-ctg__image { flex: 1; height: 100%; min-width: 150px; }
  .s-ctg__card:hover .s-ctg__bg, .s-ctg__card.is-active .s-ctg__bg { transform: scale(1.06); }
  .s-ctg__sector { color: rgba(255,255,255,.65); }
  .s-ctg__card:hover .s-ctg__sector, .s-ctg__card.is-active .s-ctg__sector { color: #f52c25; }
  .s-ctg__brand { font-size: clamp(24px, 2.8vw, 38px); }
  .s-ctg__tap { display: none; }
  .s-ctg__drawer { display: flex; flex-direction: column; justify-content: center; width: 0; grid-template-rows: none; border-top: none; border-left: 2px solid #f52c25; opacity: 0; transition: width .65s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
  .s-ctg__card:hover .s-ctg__drawer, .s-ctg__card.is-active .s-ctg__drawer { width: 300px; opacity: 1; }
  .s-ctg__drawer-inner { height: 100%; display: flex; align-items: center; }
  .s-ctg__drawer-content { width: 300px; padding: 32px 26px; }
  .s-ctg__glow { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #f52c25; opacity: 0; transition: opacity .5s ease; }
  .s-ctg__card:hover .s-ctg__glow, .s-ctg__card.is-active .s-ctg__glow { opacity: 1; }
}

/* Reveal apres le rideau "Univers" (22/09/2026, refait le meme jour : la version en transitions
   CSS etait jugee trop pauvre -- port GSAP, gsap.min.js en local dans
   assets/javascripts/vendor/). Port natif du catalogue HyperFrames "Text + Circle Carousel 4" :
   titre qui se revele, 6 vrais visuels qui traversent la ligne de texte en convergeant en
   cercle, coupe franche vers une seconde ligne en zoom. GSAP possede toute la motion
   (page-carousel-reveal.js) ; ce bloc ne fixe que la mise en page et les etats de repos
   (opacity:0 avant lecture). Se rejoue a chaque entree dans le viewport. Mobile d'abord :
   tailles/rayon de base = telephone, min-width monte en gamme. */
.s-carousel-reveal {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: #0b0908;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.s-carousel-reveal__stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 62svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.s-carousel-reveal__images {
  position: absolute;
  inset: 0;
  --radius: 108px;
}
.s-carousel-reveal__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  opacity: 0;
  will-change: transform, opacity;
}
.s-carousel-reveal__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-carousel-reveal__line {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--type-display, "Inter", sans-serif);
  font-weight: 800;
  font-size: clamp(32px, 9.5vw, 84px);
  line-height: .98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #f5f0e8;
  overflow: hidden;
}
.s-carousel-reveal__line span { display: inline-block; will-change: transform, opacity; }
.s-carousel-reveal__line--2 {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 4px;
  font-size: clamp(30px, 11vw, 92px);
  color: #ffffff;
  opacity: 0;
}
@media (min-width: 900px) {
  .s-carousel-reveal__stage { max-width: 900px; height: 56svh; }
  .s-carousel-reveal__images { --radius: 190px; }
  .s-carousel-reveal__img { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
}

/* Pied de page : enveloppe propre (valeurs mesurees, mobile puis desktop >= 668px). */
.s-footer {
  position: relative; background: #000; color: #f9f9f9; overflow: hidden;
  --t-background: #1a1919; --t-line: rgba(255, 255, 255, 0.1); --t-line-alt: rgba(255, 255, 255, 0.1);
  --t-small: #717170; --t-text: #fff; --t-heading: #fff; --t-primary: #717170; --t-primary-alt: rgba(255, 255, 255, 0.5);
}
.s-footer .h1, .s-footer .h2 { color: #fff !important; }
.s-footer p:not(.h1):not(.h2) { color: rgba(255, 255, 255, .7) !important; }
.s-footer__inner { padding: 25px 0 20px; }
.s-footer__title-block { text-align: center; padding: 170px 0 40px; }
.s-footer__wrap { display: inline-block; position: relative; vertical-align: middle; }
@media (min-width: 668px) {
  .s-footer__inner { padding: 30px 0; }
  .s-footer__title-block { padding: 120px 0; }
}
@media print { .s-footer { display: none; } }
.s-footer .btn--gradient { color: #fff !important; }

/* ==========================================================================
   SOUVERAINETÉ SENTEKIA : RIDEAU MÉTHODE (#tenets)
   Remplace définitivement le panneau Sobha (.l-tenets-section).
   Rideau plein écran qui monte au scroll et dévoile le rail des 5 temps.
   ========================================================================== */
.s-methode-spacer {
  position: relative;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
  display: block;
}

.s-methode-curtain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  height: 100vh;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: transparent !important;
  transition: opacity 0.15s ease, visibility 0.15s;
  will-change: transform, opacity;
}

.s-methode-curtain.is-active {
  opacity: 1;
  visibility: visible;
}

.s-methode-card-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  background: #ffffff;
}

.s-methode-curtain-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  box-sizing: border-box;
}

/* Mobile : reproduction exacte de la maquette SENTEKIA / capture fournie */
@media (max-width: 979px) {
  .s-methode-curtain-card__title {
    position: absolute !important;
    top: 15% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 2;
  }
  .s-methode-curtain-card__title h2 {
    margin: 0 !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: 12vw !important;
    font-weight: 700 !important;
    line-height: .95 !important;
    letter-spacing: -.05em !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #0b1a2b !important;
    text-shadow: 3px 6px 9px rgba(11, 26, 43, .26) !important;
    text-transform: uppercase !important;
  }
  .s-methode-curtain-card__photo {
    position: absolute;
    top: 30%;
    left: 10.5%;
    width: 81%;
  }
  .s-methode-curtain-card__photo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .s-methode-curtain-card__flow {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(30% + 65.2vw + 1.2svh);
    bottom: 1.5%;
    display: flex;
    flex-direction: column;
  }
  .s-methode-curtain-card__subtitle {
    margin: 0 14.2% 0 auto !important;
    max-width: 76% !important;
    text-wrap: balance;
    text-align: right !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: clamp(10px, 3.1vw, 13px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    text-transform: uppercase !important;
    color: #0a0a0a !important;
  }
  .s-methode-curtain-card__text {
    margin: 1.2svh 14.2% 0 16% !important;
    text-align: left !important;
    font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
    font-style: italic !important;
    font-size: min(4.2vw, 17px) !important;
    font-weight: 500 !important;
    line-height: 1.42 !important;
    letter-spacing: normal !important;
    color: rgba(17, 17, 17, .72) !important;
  }
  .s-methode-curtain-card__signature {
    flex: 1 1 0;
    min-height: 0;
    max-height: 12svh;
    width: 60%;
    margin: 1.2svh auto 0;
    object-fit: contain;
  }
}

/* Desktop : disposition haute couture centrée et équilibrée */
@media (min-width: 980px) {
  .s-methode-curtain-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: clamp(20px, 3.5vh, 40px) 24px !important;
  }
  .s-methode-curtain-card__title {
    margin: 0 0 clamp(10px, 1.8vh, 20px) 0 !important;
  }
  .s-methode-curtain-card__title h2 {
    margin: 0 !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: clamp(48px, 5.5vw, 84px) !important;
    font-weight: 700 !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
    text-align: center !important;
    color: #0b1a2b !important;
    text-shadow: 2px 4px 12px rgba(11, 26, 43, .18) !important;
    text-transform: uppercase !important;
  }
  .s-methode-curtain-card__photo {
    width: min(560px, 42vw) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
  .s-methode-curtain-card__photo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .s-methode-curtain-card__flow {
    max-width: 560px !important;
    margin: clamp(14px, 2vh, 24px) auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .s-methode-curtain-card__subtitle {
    margin: 0 auto !important;
    font-family: var(--type-display, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #0a0a0a !important;
  }
  .s-methode-curtain-card__text {
    margin: 8px auto 0 !important;
    font-family: var(--type-editorial, 'Fraunces', Georgia, serif) !important;
    font-style: italic !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: rgba(17, 17, 17, .75) !important;
    max-width: 48ch !important;
  }
  .s-methode-curtain-card__signature {
    width: 180px !important;
    max-height: 52px !important;
    margin: 12px auto 0 !important;
    object-fit: contain !important;
  }
}

/* Neutraliser toute marge négative Sobha sur le rail Méthode pour un enchaînement direct */
.l-expansive-section {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #FDFBF7 !important;
}

.l-expansive-section .sticky-slider__sticky {
  background: #FDFBF7 !important;
}

.l-expansive-section .l-expansive-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #FDFBF7 !important;
}

.l-expansive-section .l-expansive-card * {
  visibility: visible !important;
}


/* Methode en circuit horizontal (27/09/2026, method-circuit.js) : mobile uniquement. Les ecrans du rail
   deviennent des blocs encadres poses sur un axe (52 % de la hauteur) ; le fil les relie et embrase leur
   cadre. Classe .is-mcircuit posee par le script : sans script, le rail d'origine reste intact. */
@media (max-width: 979px) {
  .l-expansive-section.is-mcircuit .l-expansive-slider .l-expansive-slider__item.s-method-item {
    padding: calc(11svh + 6svh) 12vw calc(6svh + 2.5svh) 12vw !important;
    background: transparent !important;
  }
  .l-expansive-section.is-mcircuit .s-method-item__bg { inset: 11svh 6vw 6svh; background-color: #fff; opacity: 1; }
  .l-expansive-section.is-mcircuit .s-method-item__badge { top: 11svh; left: 6vw; width: 13vw; height: 6svh; font-size: 5.6vw; }
  .l-expansive-section.is-mcircuit .s-method-item .s-method-item__name { margin-bottom: 1.6svh !important; font-size: 10vw !important; }
  .l-expansive-section.is-mcircuit .s-method-item .s-method-item__headline { margin-bottom: 1.6svh !important; font-size: min(6.2vw, 26px) !important; }
  .l-expansive-section.is-mcircuit .s-method-item .s-method-item__text { margin-bottom: 1.8svh !important; font-size: min(3.6vw, 15px) !important; }
  .l-expansive-section.is-mcircuit .s-method-item__list { margin-bottom: 1.8svh; }
  .l-expansive-section.is-mcircuit .s-method-item__list li { padding: .8svh 0; font-size: 10px; }
  .l-expansive-section.is-mcircuit .l-expansive-slider__item--full-image { background: transparent !important; }
  .l-expansive-section.is-mcircuit .l-expansive-slider .l-expansive-slider__item--full-image > video.img-full,
  .l-expansive-section.is-mcircuit .l-expansive-slider .l-expansive-slider__item--full-image > picture {
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    position: absolute !important;
    left: calc((100vw - var(--mc-w, 70) * 1vw) / 2) !important;
    top: calc(52svh - var(--mc-w, 70) * var(--mc-r, 1.25) * .5vw) !important;
    width: calc(var(--mc-w, 70) * 1vw) !important;
    height: calc(var(--mc-w, 70) * var(--mc-r, 1.25) * 1vw) !important;
    max-width: none !important;
    transform: none !important;
    object-fit: cover;
    overflow: hidden;
  }
  .l-expansive-section.is-mcircuit .l-expansive-slider__item--full-image > picture img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; }
  .s-mc-tag {
    position: absolute;
    left: calc((100vw - var(--mc-w, 70) * 1vw) / 2);
    top: calc(52svh + var(--mc-w, 70) * var(--mc-r, 1.25) * .5vw + 12px);
    font-family: var(--type-interface, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #111;
  }
  .s-mc-svg { position: absolute; left: 0; top: 0; z-index: 6; overflow: visible; pointer-events: none; }
  .s-mc-base path, .s-mc-base rect { fill: none; stroke: rgba(17, 17, 17, .16); stroke-width: 1.5; }
  .s-mc-live path { fill: none; stroke: #E54325; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(229, 67, 37, .65)); }
  .s-mc-half { fill: none; stroke: #E54325; stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 0 6px rgba(229, 67, 37, .75)); }
  .s-mc-frame.is-on .s-mc-half { stroke-dashoffset: 0; }
  .s-mc-pad { fill: #fff; stroke: rgba(17, 17, 17, .3); stroke-width: 2; transition: fill .3s, stroke .3s; }
  .s-mc-frame.is-on .s-mc-pad { fill: #E54325; stroke: #E54325; }
  .s-mc-start { fill: rgba(17, 17, 17, .3); }
  .is-flash .s-mc-start { fill: #E54325; }
  .s-mc-burst { fill: rgba(255, 255, 255, .95); stroke: #E54325; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .is-flash .s-mc-burst { animation: s-mc-burst 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
  @keyframes s-mc-burst { 0% { opacity: 1; transform: scale(.4); } 30% { opacity: .95; } 100% { opacity: 0; transform: scale(9); } }
  .s-mc-end { fill: #fff; stroke: rgba(17, 17, 17, .3); stroke-width: 3; transition: fill .3s, stroke .3s; }
  .s-mc-end.is-on { fill: #E54325; stroke: #E54325; filter: drop-shadow(0 0 8px rgba(229, 67, 37, .9)); }
  .s-mc-spark { fill: #fff; stroke: #E54325; stroke-width: 3; filter: drop-shadow(0 0 8px #E54325); }
}

/* Pied de page de l'accueil : piste de la ligne rouge vers « Faire mon audit gratuit »
   (footer-circuit.js, classe posee par le script, accueil seulement) */
.ssf-closing.is-fcircuit { position: relative; }
.is-fcircuit .ssf-audit-cta { padding: 9px 16px; border-bottom: 0; transition: color .25s ease, background-color .6s ease 1.6s; }
.is-fcircuit.is-wired .ssf-audit-cta { background-color: rgba(177, 35, 10, .14); }
.ssf-fc { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.ssf-fc path, .ssf-fc rect { fill: none; stroke-linejoin: round; }
.ssf-fc-base { stroke: rgba(249, 249, 249, .16); stroke-width: 1; }
.ssf-fc-wire, .ssf-fc-half { stroke: #E54325; stroke-width: 1.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ssf-fc-wire { transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .3s; }
.ssf-fc-half { filter: drop-shadow(0 0 4px rgba(229, 67, 37, .75)); transition: stroke-dashoffset .7s cubic-bezier(.16, 1, .3, 1) 1.35s; }
.ssf-fc-pad { fill: #E54325; opacity: 0; transition: opacity .3s ease .3s; }
.ssf-fc-pad--end { transition-delay: 1.35s; filter: drop-shadow(0 0 6px rgba(229, 67, 37, .9)); }
.is-wired .ssf-fc-wire, .is-wired .ssf-fc-half { stroke-dashoffset: 0; }
.is-wired .ssf-fc-pad { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ssf-fc *, .is-fcircuit .ssf-audit-cta { transition: none !important; }
}