/* Smart Concept Montpellier : design system.
   Encre sur off-white, vermillon en accent unique, coins carres, filets hairline,
   Reckless (serif fin, tracking serre) pour titres/chiffres, Inter pour le corps.
   Aucune ombre, aucun radius : la hierarchie se fait par le filet et l'espace.
   Structure calquee sur le site Webflow reel (horizontal-scroll desktop,
   pile verticale mobile) : classes nommees comme en source pour reutiliser
   le GSAP/ScrollTrigger/SplitType d'origine quasi tel quel. */

@font-face {
  font-family: 'Reckless';
  src: url('/fonts/RecklessTRIAL-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #252525;
  --ink-70: rgba(37, 37, 37, 0.7);
  --ink-50: rgba(37, 37, 37, 0.62); /* releve de .5 a .62 : contraste AA (4.5:1) sur --paper en petit texte */
  --vermillon-text: #c23d10; /* variante plus foncee du vermillon pour le petit texte (AA 4.5:1), le vermillon plein reste sur les gros elements */
  --paper: #f5f4f1;
  --paper-white: #ffffff;
  --vermillon: #e94e1b;
  --orange-jornal: #f06446;
  --orange-jornal-text: #b8431f; /* variante foncee pour texte orange sur fond blanc (AA 4.5:1) */
  --hairline: rgba(37, 37, 37, 0.16);
  --hairline-strong: rgba(37, 37, 37, 0.3);

  --font-display: 'Reckless', 'Reckless Neue', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --pad: clamp(1.5rem, 4vw, 4rem);
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 2.5rem;
  --s-8: 3.5rem;
  --s-10: 5rem;
  --s-12: 7rem;
}

* { box-sizing: border-box; }
/* scroll-behavior: auto, pas smooth (heritage du site source). Ce site pilote
   deja lui-meme toute la sensation de fluidite via le scrub GSAP (scrub:1)
   sur le ScrollTrigger horizontal - la molette/trackpad de l'utilisateur
   avance le scroll NATIF reel, et GSAP anime la partie visuelle en douceur
   par-dessus. Avec scroll-behavior:smooth EN PLUS, le navigateur lui-meme se
   met a lisser/animer chaque deplacement de scrollY - deux systemes de
   lissage independants sur la MEME valeur, chacun avec sa propre inertie et
   son propre delai. Implique dans plusieurs bugs deja rencontres cette
   session (scrollTo() qui n'atteint pas sa cible instantanement, mesures
   ScrollTrigger prises pendant qu'un scroll "smooth" est encore en vol) et
   suspect principal du "scroll qui part dans le mauvais sens" avec une
   souris a molette : deux couches de lissage qui se chevauchent produisent
   un mouvement transitoire imprevisible avant de se stabiliser. */
html { scroll-behavior: auto; overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Transition entre pages : View Transitions API du navigateur, pas de JS.
   L'ancienne approche (calque clone, swap DOM manuel, ScrollTrigger recree
   en plein vol dans le meme contexte JS) a ete la source de tous les bugs
   de scroll de cette session malgre de nombreux correctifs verifies un par
   un - jamais resolus en pratique. Ici, navigation-auto declenche une VRAIE
   navigation de page (comme un clic sur un lien classique) : chaque page
   obtient un contexte JS/GSAP entierement neuf, exactement comme le tout
   premier chargement qui n'a jamais pose de probleme. Le navigateur capture
   un instantane de l'ancienne page et de la nouvelle, et anime la
   transition lui-meme au niveau du compositeur - aucun script custom ne
   peut interferer avec le scroll pendant que ca se joue. Support : Chrome/
   Edge 126+ ; navigateurs plus anciens ignorent silencieusement et gardent
   une navigation instantanee normale (degradation elegante, pas de bug). */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  /* La page qu'on quitte reste simplement statique, visible jusqu'a ce que
     la nouvelle la recouvre - pas de fondu, pas de retrait anime (c'etait
     la source d'un bug distinct : la geometrie mesuree pendant que cette
     page etait transformee). */
  animation: none;
}

/* expo.out (courbe GSAP d'origine, "accroche franche puis glisse tres
   progressivement jusqu'au repos") approxime en cubic-bezier CSS ; duree
   1.4s identique a l'ancienne version. */
::view-transition-new(root) {
  animation: sc-page-slide-in 1.4s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes sc-page-slide-in {
  from {
    transform: translateY(100%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0px -24px 60px 0px rgba(15, 13, 10, 0.28);
  }
  85% {
    border-radius: 20px 20px 0 0;
  }
  to {
    transform: translateY(0);
    border-radius: 0;
    box-shadow: none;
  }
}

/* Zoom + mise au point sur l'image de fond du hero uniquement (pas toute la
   page) : la nommer separement du root la sort du slide global et lui donne
   sa propre animation imbriquee, rejouant le parallax/zoom + flou->net de
   l'ancienne version sans toucher au reste. Meme nom sur toutes les pages :
   le navigateur ne "morph" pas d'une photo a l'autre, il rejoue juste cette
   animation sur l'image entrante a chaque fois. */
.hero_background-image { view-transition-name: hero-bg; }
::view-transition-old(hero-bg) { animation: none; }
::view-transition-new(hero-bg) {
  animation: sc-hero-zoom 1.5s cubic-bezier(0.19, 1, 0.22, 1) both;
}
@keyframes sc-hero-zoom {
  from { transform: scale(1.08); filter: blur(10px); }
  60% { filter: blur(0px); }
  to { transform: scale(1); filter: blur(0px); }
}
/* Sans nom explicite, ces 3 elements fixes (identiques sur chaque page)
   sont captures dans l'instantane "root" comme le reste - ils se
   retrouvent alors DUPLIQUES pendant la transition (visible en capture :
   le logo apparait a la fois dans l'ancienne page figee et dans la
   nouvelle qui glisse par-dessus). Un view-transition-name dedie les sort
   du groupe root : le navigateur les traite comme des elements persistants
   qui restent en place sans dupliquer ni glisser. */
.nav_logo-wrap { view-transition-name: nav-logo; }
.nav_logo-orb { view-transition-name: nav-logo-orb; }
.nav_bar { view-transition-name: nav-bar; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}
p { margin: 0; line-height: 1.6; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; }

.padding-global { padding-inline: var(--pad); }
.padding-section-medium { padding-block: var(--s-10); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.nav_menu_link:focus-visible, .menu_general:focus-visible, .m-nav-link:focus-visible {
  outline: 2px solid var(--vermillon);
  outline-offset: 2px;
}
.section_hero a:focus-visible, .section_jornal a:focus-visible, .m-nav-overlay a:focus-visible,
.nav_bar:focus-visible, .m-nav-toggle-open:focus-visible, .m-nav-toggle-close:focus-visible {
  outline-color: var(--paper-white);
}

/* ============ Loader (curtain reveal) ============ */
.loader_component {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  pointer-events: none;
}
html:not(.no-js) .loader_component { display: block; }
.loader_flex { display: flex; width: 100%; height: 100%; }
.loader_colums { flex: 1; background: var(--ink); }

/* Calque de transition entre pages (navigation AJAX) : contient un clone du
   hero de la page cible, glisse depuis le bas par-dessus la page qu'on
   quitte (qui elle ne bouge jamais). z-index sous la nav (999) pour qu'elle
   reste visible/cliquable pendant la transition. */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 950;
  pointer-events: none;
}
#page-transition-overlay .section_hero { width: 100%; height: 100%; }

/* ============ Nav ============ */
/* Vraie structure Webflow : .nav_bar N'EST PAS une barre horizontale en haut,
   c'est une bande verticale fixe sur toute la hauteur, ancree a droite (fond
   blanc, filet a gauche). Logo/hamburger/progression sont 3 elements
   independants position:fixed, pas des enfants d'un conteneur positionne
   (.nav_compoenent lui-meme n'a aucun style desktop propre). */

.nav_logo-wrap {
  position: fixed;
  top: 3rem; left: 5.3rem;
  transform: translateX(-30%);
  width: 9.3rem; height: 4.6875rem;
  background-image: url('/images/LOGO-2022-V2-2.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 998;
}
/* Orbe degradee et floutee derriere le logo (toujours visible desormais) :
   assure la lisibilite quel que soit le fond de la photo, sans bord net.
   ELEMENT INDEPENDANT (pas un ::before enfant/z-index negatif) : un
   backdrop-filter en z-index negatif sur un descendant d'un parent transforme
   se decouple et floute le logo lui-meme au lieu du fond (deja rencontre sur
   d'autres projets). Ici : sibling a part entiere, position:fixed propre,
   z-index positif sous celui du logo. */
:root {
  --orb-w: 21vw;
  --orb-h: 21vh;
  --orb-blur: 18px;
  --orb-op1: 0.22;
  --orb-op2: 0.09;
  --orb-stop1: 40%;
  --orb-stop2: 70%;
  --orb-mask1: 40%;
  --orb-mask2: 80%;
}
.nav_logo-orb {
  position: fixed;
  top: 0; left: 0;
  width: var(--orb-w); height: var(--orb-h);
  -webkit-backdrop-filter: blur(var(--orb-blur));
  backdrop-filter: blur(var(--orb-blur));
  background: radial-gradient(ellipse at top left, rgba(37, 37, 37, var(--orb-op1)) 0%, rgba(37, 37, 37, var(--orb-op2)) var(--orb-stop1), rgba(37, 37, 37, 0) var(--orb-stop2));
  -webkit-mask-image: radial-gradient(ellipse at top left, black 0%, black var(--orb-mask1), transparent var(--orb-mask2));
  mask-image: radial-gradient(ellipse at top left, black 0%, black var(--orb-mask1), transparent var(--orb-mask2));
  z-index: 997;
  pointer-events: none;
}
/* Le flou de l'orbe reste actif pendant les transitions de page : desactive
   au debut (cf. commit precedent), ca se voyait comme un clignotement
   (le flou disparaissait puis revenait a chaque navigation). L'orbe est
   petite (~20vw x 20vh, pas plein ecran) : le cout de recalcul reste
   raisonnable, contrairement au flou plein ecran evoque dans
   feedback_mobile_perf_killers_design_heavy (qui concernait un effet
   couvrant tout le viewport). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero_logo-embed { display: block; width: 100%; height: 100%; position: relative; }

.nav_bar {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 999;
  min-width: 3rem;
  background: var(--paper-white);
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  padding-block: 2rem;
  cursor: pointer;
}
.nav_top-logo {
  position: absolute;
  inset: 2rem 0 auto;
  display: flex;
  justify-content: center;
}
.nav_logo-embed {
  width: 1rem; height: 6.2rem;
  background: var(--vermillon);
  opacity: 0;
  transition: opacity 300ms ease;
}
.nav_logo-text {
  position: absolute;
  margin-top: 1em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--ink);
  transform: rotate(90deg);
  white-space: nowrap;
  transition: opacity 300ms ease;
}
.nav_bottom-progress {
  position: absolute;
  inset: auto 0 2rem;
  display: flex;
  justify-content: center;
}
.nav_bottom-progress .nav_logo-text { color: var(--ink-50); font-style: normal; font-size: 0.75rem; margin-top: 0; }
.nav_trigger {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.nav_icon { width: 1rem; height: 2.1875rem; display: flex; justify-content: space-between; align-items: stretch; overflow: hidden; }
.nav_icon-line { width: 1px; height: 100%; background: var(--ink); transform-origin: center; }

.nav_menu_component {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
}
/* Vraie structure Webflow (verifiee sur le live) : PAS un rideau plein ecran.
   4 boites blanches ancrees en cascade depuis le coin haut-droit, tailles
   100/75/50/25%, empilees sur un scrim semi-transparent. */
.nav_menu_close-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
  background-color: rgba(37, 37, 37, 0.8);
}
.nav_menu_wrap {
  position: absolute;
  top: 0; right: 0;
  width: 70%;
  max-width: 1440px;
  height: 56%;
  margin-right: 3rem;
  z-index: 2;
}
.nav_menu_list { position: absolute; inset: 0; }
.nav_menu_link {
  position: absolute;
  inset: 0 0 auto auto;
  width: 100%; height: 100%;
  background: var(--paper-white);
  border: 1px solid var(--hairline-strong);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 2rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.025em;
  transition: color 300ms cubic-bezier(.165,.84,.44,1), background-color 300ms cubic-bezier(.165,.84,.44,1);
  overflow: hidden;
}
.nav_menu_link:hover { background: var(--vermillon); color: var(--paper-white); }
.nav_menu_link.is-75 { width: 75%; height: 75%; }
.nav_menu_link.is-50 { width: 50%; height: 50%; }
.nav_menu_link.is-25 { width: 25%; height: 25%; }
.nav_menu_other-links {
  position: absolute;
  inset: auto 3rem 2.5rem auto;
  display: flex;
  gap: 1rem;
  z-index: 4;
}
.text-link_wrap { position: relative; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.text-link_line { margin-top: 0.3rem; height: 1px; background: var(--hairline-strong); }

@media (min-width: 768px) {
  .mobile-nav { display: none; }
}
@media (max-width: 767px) {
  /* Vraie structure Webflow : pas de barre en haut, tout est ancre en bas
     de l'ecran (3 elements fixed independants, pas un conteneur commun). */
  .nav_compoenent { display: none; }
  .mobile-nav { position: static; }
  .m-nav-toggle-bg {
    position: fixed; bottom: 0; left: 0; right: 0; height: 125px; z-index: 1;
    background: linear-gradient(rgba(238, 238, 238, 0), var(--paper-white) 98%);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.75rem;
    pointer-events: none;
  }
  .m-nav-toggle-bg a { pointer-events: auto; }
  .m-nav-toggle-bg img { height: auto; width: 150px; }
  .m-nav-toggle {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
    display: flex; justify-content: center; align-items: center; padding-bottom: 1.75rem;
  }
  .m-nav-toggle-inner {
    background: var(--ink); color: var(--paper-white); border-radius: 99em;
    padding: 17px 25px; font-size: 1.125rem; font-weight: 400;
  }
  .m-nav-overlay {
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 90%;
    z-index: 95; background: #242423; display: none; overflow: hidden;
  }
  .m-nav-content { height: 100%; padding: var(--s-12) var(--pad); display: flex; align-items: flex-end; overflow-y: auto; }
  .m-nav-list { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; text-align: center; }
  .m-nav-link { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; color: var(--paper); }
  .m-nav-link.w--current { color: var(--vermillon); }
  .m-nav-toggle-open, .m-nav-toggle-close { cursor: pointer; }
}

/* ============ Horizontal scroll wrapper (desktop) ============ */
@media (min-width: 768px) {
  .horizontal-scroll_stickey-element { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; }
  /* flex:none est CRITIQUE : sans lui, .horizontal-scroll_track (flex item de
     stickey-element) se fait retrecir a 1 seul viewport par le flex-shrink par
     defaut, quel que soit le nombre de panneaux contenus. Le xPercent:-100 du
     GSAP tween ne bouge alors que d'un ecran au lieu de (N-1), d'ou un scroll
     qui reste quasi immobile sur les pages a beaucoup de panneaux malgre une
     barre de progression a 100%. */
  .horizontal-scroll_track { flex: none; display: flex; height: 100vh; will-change: transform; }
  /* margin-right:-100vw (valeur reelle du site source) retrecit la largeur
     effective du track d'un ecran : sans ca xPercent:-100 (relatif a SA PROPRE
     largeur) va un panneau trop loin et atterrit sur du vide apres le dernier
     panneau au lieu de s'arreter dessus. */
  .horizontal-scroll_track-list { flex: none; display: flex; height: 100%; margin-right: -100vw; }
  /* Les panneaux n'ont PAS tous 100vw sur le site source : seul le hero est
     plein ecran, les diviseurs d'image font 30vw, le reste (cta/jornal/work)
     est en largeur naturelle (shrink-to-fit autour de son contenu). Ne pas
     forcer width:100vw partout ici (mesure sur le live : hero 1440px, cta
     ~1155px, diviseur 432px=30vw, jornal ~487px). */
  /* overflow-y:hidden, pas auto (heritage du site source). Chaque panneau
     fait 100vh pile ; des qu'un panneau (ex. "Nos competences", pave de
     texte) depasse legerement cette hauteur, overflow-y:auto lui donne son
     PROPRE scroll interne. Resultat mesure sur une video ecran : la molette,
     des que le curseur est au-dessus de ce panneau, se met a faire defiler
     CE panneau tout seul au lieu de faire avancer le scroll horizontal du
     site - observe comme "le scroll ne fait quasiment plus rien pendant
     plusieurs secondes". En hidden, l'exces de contenu est simplement
     rogne (jamais rencontre dans les mesures faites, le contenu tient) et
     TOUT scroll vertical, ou que soit le curseur, va toujours et uniquement
     faire avancer le horizontal-scroll. */
  .horizontal-scroll_track-list > section { height: 100vh; flex-shrink: 0; overflow-y: hidden; }
  .horizontal-scroll_track-list > section.section_hero { width: 100vw; }
  .section_intro { display: none; }
  .section_image-divider { width: 30vw; }
}
@media (max-width: 767px) {
  .horizontal-scroll_track, .horizontal-scroll_track-list { display: block; }
}

/* ============ Hero ============ */
/* Vraie structure : hero_content-wrapper = flex column-reverse pleine hauteur,
   items alignes a droite. DOM = [heading, sous-titre] mais le reverse remonte
   le sous-titre en haut et pousse le titre en bas (justify-content:space-between). */
.section_hero { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper-white); }
.hero_content { position: relative; z-index: 2; height: 100%; }
/* padding-section-medium / padding-global sont des utilitaires generiques
   sans hauteur propre ailleurs sur le site : on ne propage 100% que dans le
   contexte du hero pour ne pas casser leurs autres usages. */
.section_hero .padding-section-medium,
.section_hero .padding-global { height: 100%; }
/* Accueil uniquement (seule page avec .hero_quicklinks) : reserve de la place
   en bas pour que le titre remonte et laisse la ligne de boutons respirer
   en dessous, sans toucher au hero des 4 autres pages. */
.section_hero:has(.hero_quicklinks) .padding-section-medium.is-hero { padding-bottom: 10.5rem; }
/* Accueil : titre + sous-titre centres (au lieu d'alignes a droite comme sur
   les 4 autres pages), pour s'accorder avec la ligne de boutons centree
   en dessous. */
.section_hero:has(.hero_quicklinks) .hero_content-wrapper { align-items: center; }
.section_hero:has(.hero_quicklinks) .hero_heading,
.section_hero:has(.hero_quicklinks) .hero_sub-text-wrap { text-align: center; }
.hero_content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--paper-white);
}
.hero_heading-wrapper { margin-bottom: -1.5rem; overflow: hidden; align-self: stretch; }
.hero_heading { font-size: clamp(2.5rem, 5vw, 5.5rem); color: var(--paper-white); text-align: right; }
.hero_sub-text-wrap { text-align: right; }
.heading-style-h3.is-hero { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 1.8vw, 1.5rem); color: rgba(255,255,255,0.85); max-width: 40ch; }
.hero_background-image-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero_background-image { width: 100%; height: 100%; object-fit: cover; }
.hero_background-image-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(37,37,37,0.15) 0%, rgba(37,37,37,0.55) 100%);
}
.char, .word, .line { display: inline-block; }

/* Cartes d'acces rapide (accueil uniquement) : effet verre depoli sur le
   hero, pour que le visiteur file direct vers ce qui l'interesse. Positionnee
   en absolu dans .hero_content (jamais dans un ancetre avec z-index negatif) :
   evite le bug de decouplage backdrop-filter deja rencontre ailleurs sur ce
   site (glow du logo). Desactivee sous 900px : pas la place sur un hero
   mobile deja charge, et backdrop-filter anime coute cher sur petit GPU. */
.hero_quicklinks {
  position: absolute;
  /* Centre horizontalement, juste sous le titre (qui lui est colle au bas
     du hero) : le bloc titre+boutons se lit comme un seul ensemble. */
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.1rem;
  width: min(92vw, 54rem);
}
.hero_quicklink-card {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.65rem 1.5rem;
  /* Plus gros, plus organique : rayon genereux (proche pilule mais pas
     parfaitement rond), plus doux/moins "carte technique" qu'un rectangle
     a coins legerement arrondis. */
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 30px rgba(15, 13, 10, 0.18);
  color: var(--paper-white);
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  /* flex-grow anime : seule facon d'obtenir un vrai "pousse les voisines"
     (transform ne bouge pas les autres, il faut agir sur la mise en page).
     Amplitude reduite (1.55 au lieu de 2.3) + duree plus longue et ease plus
     douce en sortie : lecture plus "cinematique", moins un a-coup mecanique. */
  transition: flex-grow 0.95s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}
.hero_quicklinks:hover .hero_quicklink-card { flex-grow: 0.85; }
.hero_quicklinks .hero_quicklink-card:hover,
.hero_quicklinks .hero_quicklink-card:focus-visible {
  flex-grow: 1.55;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 20px 50px rgba(15, 13, 10, 0.28);
}
.hero_quicklink-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .hero_quicklinks { display: none; }
}

/* ============ Intro ("Notre metier") ============ */
.intro_content-parent { display: grid; gap: var(--s-8); align-items: center; }
.intro_image-wrap { overflow: hidden; aspect-ratio: 4 / 3; }
.image-full-cover { width: 100%; height: 100%; object-fit: cover; }
.intro_content h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.intro_content p { margin-top: var(--s-4); color: var(--ink-70); font-size: 0.9375rem; max-width: 56ch; }
.intro_content .text-link_wrap { display: inline-flex; flex-direction: column; margin-top: var(--s-5); color: var(--ink); }
.section_line-seprator { height: 1px; background: var(--hairline); margin-inline: var(--pad); }
@media (min-width: 860px) {
  .intro_content-parent { grid-template-columns: 1fr 1fr; }
}

/* ============ CTA (citation / bloc page-specifique) ============ */
/* .section_cta n'a plus de width:100vw impose (panneau shrink-to-fit comme sur
   la source) : sans borne, le grid 1.1fr/1fr de .cta_content.ref (fr units)
   n'a rien pour se dimensionner et le panneau sprawlait a ~2900px. */
.section_cta { max-width: 1155px; } /* mesure exacte sur le live a 1440px de viewport */
/* Meme piege que le hero/jornal : sans propager height:100% a travers les
   wrappers utilitaires (padding-section-medium/padding-global), le contenu
   du panneau reste colle en haut avec un grand vide en dessous. */
.section_cta .padding-section-medium,
.section_cta .padding-global { height: 100%; }
.cta_content { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-6) 0; }
/* Cache sur le site source (verifie : .test-size-title-small{display:none}) :
   "2025" est un champ CMS Webflow jamais affiche, pas un eyebrow visible.
   Corrige aussi un h2 sans contenu semantique cote accessibilite. */
.cta_content .test-size-title-small { display: none; }
.cta_quorte { margin-top: var(--s-4); }
.cta_quorte-title { font-size: clamp(1.75rem, 4vw, 3rem); max-width: 40ch; }
.cta_quorte-title._2, .cta_quorte-title.\_2 { margin-top: var(--s-4); font-size: clamp(1rem, 1.7vw, 1.25rem); font-weight: 300; line-height: 1.22; color: var(--ink-70); max-width: 68ch; }
.cta_quorte-title em { font-style: italic; }
.cta_quorte-title strong { color: var(--ink); font-weight: 600; }
.stabilo { color: var(--vermillon); font-style: italic; }
.cta_quorte-subtext { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--ink-50); }
.cta_quorte-subtext .text-link_wrap { color: var(--ink); font-weight: 700; }
.cta_content > .text-link_wrap { margin-top: var(--s-6); display: inline-flex; flex-direction: column; }

/* Grilles de piliers (Ordonnancement/Pilotage/Coordination, Accompagnement/Organisation/Suivi) */
.grid-3, .grid-2 { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  /* Regression mobile trouvee a l'audit : grid-2 gardait 2 colonnes fixes en
     390px (cartes contact figees ~332px chacune), debordement horizontal de
     133px. Passe en 1 colonne sous 640px, comme grid-3 (deja repli mobile). */
  .grid-2 { grid-template-columns: 1fr; }
}
.comp {
  border: 1px solid var(--hairline);
  padding: var(--s-3);
  text-align: center;
}
.comp .seconde-comp, .comp .main-comp { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-50); }
.comp .main-comp { color: var(--vermillon-text); }
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* Page references : index consultable des 13 missions (groupe par cadre) */
.refs-index { max-height: 100%; overflow-y: auto; }
.refs-index_count {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  margin-bottom: var(--s-4);
}
.refs-group + .refs-group { margin-top: var(--s-3); }
.refs-group_head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2);
  padding: 0.5rem 0 0.35rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-50);
}
.refs-group_head b { color: var(--vermillon-text); font-weight: 600; }
.refs-row {
  display: grid; grid-template-columns: 1.6rem 1.15fr 0.85fr auto;
  gap: 0.6rem; align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
}
.refs-row_num { font-size: 0.6875rem; font-weight: 600; color: var(--ink-50); }
.refs-row_lieu { font-family: var(--font-display); font-weight: 300; font-size: 0.9375rem; letter-spacing: -0.005em; }
.refs-row_objet {
  display: block; font-family: var(--font-body); font-style: normal;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vermillon-text);
}
.refs-row_client { color: var(--ink-50); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refs-row_tag {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--hairline-strong); padding: 0.2rem 0.4rem; white-space: nowrap;
}
@media (max-width: 700px) {
  .refs-row { grid-template-columns: 1.4rem 1fr auto; }
  .refs-row_client { display: none; }
}
.lightbox-link { display: block; margin-top: var(--s-6); border: 1px solid var(--hairline); overflow: hidden; cursor: zoom-in; }
.image-3 { width: 100%; height: auto; aspect-ratio: 1040 / 646; }
.padding-global.ref .cta_content.ref { display: grid; gap: var(--s-8); }
@media (min-width: 960px) {
  .padding-global.ref .cta_content.ref { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* ============ Image divider (parallax) ============ */
.section_image-divider { overflow: hidden; }
/* Le panneau fait 100vh (comme sur la source) : l'ancien aspect-ratio 21/9
   figeait le wrapper a ~185px de haut au lieu de remplir le panneau. */
.image-divider_wrapper { width: 100%; height: 100%; overflow: hidden; }
.image-divider_image { width: 130%; height: 100%; object-fit: cover; }

/* ============ Work (clients + residual cases retires) ============ */
.section_work { padding-block: var(--s-10); }
.section_work .padding-section-medium,
.section_work .padding-global { height: 100%; }
.work_list { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.work_list .heading, .work_list h3.heading { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--s-6); }
.work_list .list, .work_list ul[role="list"] {
  margin-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.work_list .list li, .work_list ul[role="list"] li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-70);
  font-size: 0.9375rem;
  padding-left: 1.4rem;
  position: relative;
}
.work_list .list li::before, .work_list ul[role="list"] li::before {
  content: '\2014';
  position: absolute; left: 0; color: var(--vermillon);
}
.work_list > .text-link_wrap { margin-top: var(--s-6); display: inline-flex; flex-direction: column; }
.work_list > .text-link_wrap .text-block { color: var(--ink-70); font-size: 0.9375rem; max-width: 50ch; }
.work_list > .text-link_wrap em { color: var(--vermillon); font-style: italic; }

/* Grille de vrais logos clients (homepage / competences) */
.grid.w-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
  align-items: center;
  margin-top: var(--s-8);
}
.logoclients { max-height: 3.25rem; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: opacity 200ms ease, filter 200ms ease; margin-inline: auto; }
.logoclients:hover { opacity: 1; filter: grayscale(0); }
@media (min-width: 640px) { .grid.w-layout-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .grid.w-layout-grid { grid-template-columns: repeat(5, 1fr); } }

/* ============ Jornal ("Nos liens") ============ */
/* Vraie couleur : fond orange (var(--orange), pas ink), cartes blanches
   empilees en 1 colonne, PAS une grille 4 colonnes de liens texte. */
.section_jornal { background: var(--orange-jornal); color: var(--paper-white); height: 100%; }
.section_jornal .padding-section-medium,
.section_jornal .padding-global { height: 100%; }
.jornal_content { height: 100%; display: flex; flex-direction: column-reverse; justify-content: space-between; }
.jornal_title-wrap { margin-bottom: -2.5rem; overflow: hidden; }
.jornal_title-wrap h2 { color: var(--paper-white); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; }
.grille_menu_general {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.menu_general {
  background: var(--paper-white);
  border-radius: 6px;
  width: 260px;
  padding: 25px;
  font-size: 1.3rem;
  transition: box-shadow 200ms cubic-bezier(.77,0,.175,1);
}
.menu_general:hover { box-shadow: 0 2px 7px -4px rgba(0,0,0,0.35); }
.text_menu_general { color: var(--orange-jornal-text); text-align: center; font-family: var(--font-display); font-weight: 300; }

/* ============ Contact ============ */
.contact-bloc { border: 1px solid var(--hairline); padding: var(--s-6) var(--s-5); text-align: left; }
.icon-contact { width: 1.6rem; height: 1.6rem; filter: invert(28%) sepia(78%) saturate(2500%) hue-rotate(345deg); }
.contact-txt { margin-top: var(--s-3); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-50); }
.contact-txt._1 { display: block; margin-top: 0.3rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.contact-bloc:hover .contact-txt._1 { color: var(--vermillon); }

/* ============ Mentions legales (prose) ============ */
.cta_quorte-title._2 strong { display: inline; }
.cta_quorte-title a.link, .cta_quorte-title a { color: var(--ink); border-bottom: 1px solid var(--hairline-strong); }
.cta_quorte-title a:hover { color: var(--vermillon); border-color: var(--vermillon); }

@media (max-width: 767px) {
  .nav_menu_component { display: block; position: static; background: none; color: var(--ink); height: auto; }
  .nav_menu_wrap { padding: 0; }
  .nav_menu_close-trigger, .nav_bottom-progress, .nav_top-logo { display: none; }
}