/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== A11Y UTILITIES ===== */

/* Skip link : caché hors-focus, visible au focus clavier (premier Tab).
   Permet de sauter la nav et l'animation d'intro pour atteindre le contenu. */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 99999;
  padding: 12px 20px;
  background: #2018FC;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* Caché visuellement mais lu par les lecteurs d'écran. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus clavier : visible uniquement quand le navigateur juge pertinent
   (Tab, flèches…), jamais sur clic/tap souris ou tactile. */
:focus-visible {
  outline: 2px solid #2018FC;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fallback no-js : si JS échoue, les éléments .slide-in restent visibles
   (sinon ils ont opacity:0 par défaut et JS pose .visible à l'apparition). */
.no-js .slide-in {
  opacity: 1;
  transform: none;
}

/* Réduit ou neutralise les animations pour les utilisateurs qui demandent
   un mouvement réduit (paramètres système : OS-level). Couvre WCAG 2.3.3.
   Côté JS, voir prefersReducedMotion dans script.js (intro, typewriter,
   timeline process, custom cursor désactivés en parallèle). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track,
  .marquee-cycle {
    animation: none !important;
  }
  .typewriter-cursor {
    animation: none !important;
  }
  .img-reveal {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    transition: none !important;
  }
  .slide-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

:root {
  --blue: #2018FC;
  --content-padding: 40px;
  --max-width: 1400px;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
}

html {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-sans);
  color: #1a1a1a;
  background: #fff;
  line-height: 1.6;
}

::selection {
  background: var(--blue);
  color: #fff;
}
::-moz-selection {
  background: var(--blue);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

.mono-digit {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'zero' 1;
}


ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

.section--white { background: #fff; }
.section--grey { background: #fafafa; }
.section--dark { background: #000; color: #fff; }

/* Image reveal animation */
.img-reveal {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  transition: clip-path 0.75s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}

.img-reveal.revealed {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* ===== LOGO INTRO ANIMATION ===== */
.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

body.intro-active {
  overflow: hidden;
}

body.intro-active .logo-intro {
  pointer-events: auto;
  cursor: pointer;
}

.logo-intro-logo {
  position: fixed;
  will-change: width, height, left, top;
}

.logo-intro.done {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-intro.hidden {
  display: none;
}

/* Hide hero content and navbar during intro */
body.intro-active .hero-content,
body.intro-active .navbar--hero,
body.intro-active .hero-scroll-btn {
  opacity: 0;
  pointer-events: none;
}


body:not(.intro-active) .hero-content,
body:not(.intro-active) .navbar--hero,
body:not(.intro-active) .hero-scroll-btn {
  transition: opacity 0.5s ease;
}

/* Hide the real nav-logo while intro logo is visible */
body.intro-active .navbar--hero .nav-logo {
  visibility: hidden;
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 0%;
  background: var(--blue);
  z-index: 500;
  transition: height 0.1s linear;
  opacity: 0;
}

.scroll-progress.visible {
  opacity: 1;
}

/* ===== SECTION BADGE (blue label) ===== */
.section-badge {
  display: inline-block;
  padding: 10px 20px;
  background: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 60px;
}

/* Desktop : exceptions sous le badge — À propos 70px, Expertise 50px,
   Process/Clients 40px (mobile garde son override à 32px via le media query
   plus bas). */
@media (min-width: 901px) {
  .about .section-badge {
    margin-bottom: 70px;
  }
  .expertise .section-badge {
    margin-bottom: 50px;
  }
  .process .section-badge,
  .clients .section-badge {
    margin-bottom: 40px;
  }
}

.slide-in {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Shared section header padding for alignment */
.section-header-padded {
  padding: 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  margin-bottom: 40px;
}

/* ===== HERO (fixed parallax) ===== */
.hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('assets/hero/alizee-warnier-md.jpeg') center/cover no-repeat;
  z-index: 0;
}

@media (max-width: 900px) {
  .hero-bg {
    background-image: url('assets/hero/alizee-warnier-sm.jpeg');
  }
}

@media (min-width: 1600px) {
  .hero-bg {
    background-image: url('assets/hero/alizee-warnier.jpeg');
  }
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  max-width: none;
  margin: 0;
  width: 100%;
  color: #fff;
}

.hero h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Rotating text — typewriter effect */
.rotating-text {
  display: inline;
  position: relative;
}

.rotating-word {
  display: none;
}

.typewriter-text {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.95em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.08em;
  animation: typewriter-blink 0.9s steps(1) infinite;
}

@keyframes typewriter-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.95rem;
  text-decoration: none;
  color: #fff;
  transition: color 0.4s ease, gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-cta::before {
  content: '';
  display: block;
  width: 0;
  height: 12px;
  background: var(--blue);
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hero-cta:hover {
  color: var(--blue);
  gap: 10px;
}

.hero-cta:hover::before {
  width: 12px;
}


/* Scroll down button */
.hero-scroll-btn {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background 0.3s;
  animation: scrollBounce 2s ease-in-out infinite;
}

.hero-scroll-btn:hover {
  background: #fff;
}

.hero-scroll-arrow {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.hero-scroll-btn:hover .hero-scroll-arrow {
  color: var(--blue);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ===== NAVBAR HERO (transparent) ===== */
.navbar--hero {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  max-width: none;
  margin: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  display: block;
  height: 48px;
  width: auto;
}

/* Navbar sticky : logo bleu par défaut (fond blanc). Le logo blanc prend
   le relais quand le fond passe en bleu — cf. .menu-open et le mobile. */
.navbar--sticky .nav-logo-blanc { display: none; }

.navbar--hero .nav-links {
  display: flex;
  gap: 12px;
}

.navbar--hero .nav-links li a {
  display: block;
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.navbar--hero .nav-links li a:hover {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
}

/* ===== NAVBAR STICKY (burger) ===== */
.navbar--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  background: #fff;
  transform: translateY(-100%);
}

.navbar--sticky.visible { transform: translateY(0); }

.navbar--sticky.menu-open {
  background: var(--blue);
}

.nav-logo-blanc2 { display: none !important; }
.navbar--sticky.menu-open .nav-logo-bleu { display: none !important; }
.navbar--sticky.menu-open .nav-logo-blanc { display: none !important; }
.navbar--sticky.menu-open .nav-logo-blanc2 { display: block !important; }

/* Zone cliquable = toute la hauteur du header, padding identique sur les
   4 côtés (les barres centrées). On supprime le padding vertical de la
   navbar sticky pour que le burger dicte la hauteur du header, qui reste
   identique visuellement (≈ même hauteur qu'avec l'ancien padding 18px). */
.navbar--sticky .nav-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 32px;
  position: relative;
  z-index: 1;
  right: -32px;
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.burger.active span {
  background: #fff;
}

.burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== FULLSCREEN NAV OVERLAY ===== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--blue);
  display: none;
  flex-direction: column;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-overlay.open {
  display: flex;
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.nav-overlay-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px max(var(--content-padding), calc((100vw - var(--max-width)) / 2)) 50px;
  width: 100%;
  overflow-y: auto;
}

.nav-links-mobile {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 25px;
  margin-bottom: 24px;
}

.nav-links-mobile li {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-links-mobile li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-links-mobile li a {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 0;
  padding: clamp(10px, 2vh, 20px) 0;
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-links-mobile li a::before {
  content: '';
  display: block;
  width: 0;
  height: 1em;
  background: #fff;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-links-mobile li a:hover {
  gap: 0.3em;
}

.nav-links-mobile li a:hover::before {
  width: 1em;
}


.nav-overlay-info {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-overlay-info a {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: opacity 0.3s;
}

.nav-overlay-info a:hover {
  opacity: 0.6;
}

.nav-overlay-col {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.nav-overlay-socials {
  display: flex;
  gap: 24px;
}

@media (max-height: 600px) {
  .nav-overlay-content {
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .nav-links-mobile {
    margin-bottom: 20px;
  }
}

/* Desktop : on aligne en haut pour éviter le grand espace vide entre
   le logo (en haut) et le contenu (sinon collé en bas) quand la fenêtre
   est très haute. Sur mobile on garde l'ancrage en bas (cf. règle de base). */
@media (min-width: 901px) {
  .nav-overlay-content {
    padding: 80px max(var(--content-padding), calc((100vw - var(--max-width)) / 2)) 60px;
    justify-content: flex-start;
  }
}

/* ===== MAIN CONTENT (above hero & footer) ===== */
.site-content {
  position: relative;
  z-index: 5;
}

.about, .expertise, .process, .clients, .faq, .contact {
  position: relative;
  z-index: 10;
}

.about { margin-top: 100vh; }

/* ===== À PROPOS ===== */
.about {
  padding: 100px var(--content-padding);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

/* Accroche de section : grosse phrase lyrique sous le badge. C'est un
   paragraphe (le h2 est porté par le badge — cf. .section-badge). */
.section-statement {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.about-right p {
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.7;
}

/* about-link : pas de soulignement permanent. Le trait est un ::after
   qui se déploie de gauche à droite (au survol sur desktop, au clic via
   la classe .underline-anim ajoutée en JS sur mobile). */
.about-link,
.about-link:visited {
  color: var(--blue);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.about-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--blue);
  pointer-events: none;
}

.about-link:hover {
  color: var(--blue);
}

/* Desktop : le trait grandit de gauche à droite au survol. */
@media (min-width: 901px) {
  .about-link::after {
    transition: width 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  .about-link:hover::after {
    width: 100%;
  }
}

/* ===== EXPERTISE ===== */
.expertise {
  padding: 100px 0;
}

.accordion { width: 100%; }

.accordion-item { border-top: 1px solid #e0e0e0; }
.accordion-item:last-child { border-bottom: 1px solid #e0e0e0; }

.accordion-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 28px max(var(--content-padding), calc((100% - var(--max-width)) / 2));
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-header:hover {
  background-color: var(--blue);
  color: #fff;
}

.accordion-number {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'zero' 1;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  min-width: 80px;
  margin-right: 180px;
  line-height: 1;
}

.accordion-title {
  flex: 1;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
}

.accordion-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.icon-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.icon-bar:first-child { transform: translate(-50%, -50%); }
.icon-bar:last-child { transform: translate(-50%, -50%) rotate(90deg); }

.accordion-header:hover .icon-bar { background: #fff; }
.accordion-item.active .icon-bar:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.accordion-item.active .accordion-header { background-color: var(--blue); color: #fff; }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  /* Le bg/color transitionnent plus vite que max-height pour qu'à la
     fermeture (.active retirée), le body bascule rapidement en gris/noir
     et que la fin de l'animation max-height se joue sur l'état inactif.
     Durée alignée sur celle du header pour cohérence. */
  transition: max-height 0.5s ease, background-color 0.3s ease, color 0.3s ease;
  background-color: #fafafa;
  color: #1a1a1a;
}

.accordion-item.active .accordion-body {
  background-color: var(--blue);
  color: #fff;
}

.accordion-body-inner {
  display: flex;
  gap: 60px;
  padding: 10px max(var(--content-padding), calc((100% - var(--max-width)) / 2)) 40px;
}

.accordion-left {
  flex: 1;
  padding-left: calc(80px + 180px);
}

.accordion-images {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.accordion-images .placeholder-img {
  width: 290px;
  height: 210px;
  background: rgba(255,255,255,0.15);
  border-radius: 0;
  overflow: hidden;
}

.accordion-images .placeholder-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Image avec bord blanc imprimé autour : on agrandit légèrement pour
   que le cadre (et le copyright en bas à droite) sorte de la zone visible. */
.accordion-images .placeholder-img img.img-trim-border {
  transform: scale(1.25);
  transform-origin: center;
}

/* Cadrage à droite (utile quand le sujet principal est à droite).
   Calé au maximum à droite pour ne pas couper le contenu de cet édge. */
.accordion-images .placeholder-img img.img-pos-right {
  object-position: right center;
}

/* Zoom sur la partie haute du planner pour masquer les visages des tuiles. */
.accordion-images .placeholder-img img.img-calendar-zoom {
  transform: scale(2.2);
  transform-origin: 55% 25%;
}

.accordion-text { max-width: 600px; }

.accordion-text p {
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.9;
}

.accordion-right {
  flex: 0 0 480px;
  display: flex;
  align-items: flex-start;
  padding-right: var(--content-padding);
}

.accordion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag:hover {
  background: rgba(255,255,255,0.2);
  border-color: #fff;
}

/* ===== PROCESS ===== */
.process {
  padding: 0;
  position: relative;
}

.process .section-header-padded {
  padding-top: 100px;
  padding-bottom: 0;
}

.process-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
  padding: 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  padding-bottom: 160px;
}

.process-images {
  flex: 2 1 0;
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: none;
  overflow: visible;
}

.process-mobile-img { display: none; }

.pv2-img {
  position: absolute;
  overflow: hidden;
  background: #eee;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.15, 1), -webkit-clip-path 1.1s cubic-bezier(0.7, 0, 0.15, 1);
}

.pv2-img img {
  position: absolute;
  top: -14%;
  left: 0;
  width: 100%;
  height: 128%;
  object-fit: cover;
  display: block;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .pv2-img img { transform: none; }
  .pv2-img {
    clip-path: none;
    -webkit-clip-path: none;
    transition: none;
  }
}

.pv2-img--primary {
  top: 0;
  left: 0;
  width: 60%;
  aspect-ratio: 2 / 3;
  height: auto;
  z-index: 1;
}

.pv2-img--secondary {
  bottom: 0;
  right: 0;
  width: 56%;
  height: 60%;
  z-index: 2;
  transition-delay: 0.2s;
}

.process-images.in-view .pv2-img {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.process-images.in-view .pv2-img--primary {
  animation: pv2Float 7s ease-in-out 1.4s infinite;
}

.process-images.in-view .pv2-img--secondary {
  animation: pv2Float 7s ease-in-out 1.8s infinite;
}

@keyframes pv2Float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.process-steps {
  flex: 3 1 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

.process-step-num {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'zero' 1;
  font-size: 0.8rem;
  color: #888;
  min-width: 24px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: calc(clamp(1.5rem, 2.5vw, 2rem) * 1.2 - 1.2rem);
  transition: color 0.4s;
}

.process-step-content h3 {
  display: flex;
  align-items: flex-end;
  gap: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.2;
  transition: gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), color 0.4s;
}

.process-step-content h3::before {
  content: '';
  display: block;
  width: 0;
  height: 12px;
  margin-bottom: 0.25em;
  background: var(--blue);
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.process-step.active .process-step-content h3 {
  gap: 10px;
}

.process-step.active .process-step-content h3::before {
  width: 12px;
}

.process-step-content p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.7;
  max-width: 420px;
  transition: color 0.4s;
}

.process-step:not(.active) .process-step-content h3 { color: #bbb; }
.process-step:not(.active) .process-step-content p { color: #ccc; }
.process-step:not(.active) .process-step-num { color: #bbb; }

/* ===== CLIENTS / MARQUEE ===== */
.clients {
  padding: 100px 0 160px;
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  margin-top: 25px;
  margin-bottom: 15px;
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee 40s linear infinite;
  cursor: grab;
  user-select: none;
}

.marquee-track.is-grabbing {
  cursor: grabbing;
}

.marquee-cycle {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
}

.marquee-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 600;
  white-space: nowrap;
}

.marquee-logo {
  flex-shrink: 0;
}

.marquee-logo img {
  display: block;
  height: 90px;
  width: auto;
  -webkit-user-drag: none;
  user-drag: none;
}

.marquee-logo img[src$="ad-delhaize.webp"] { height: 70px; }
.marquee-logo img[src$="color-code.svg"] { height: 70px; }
.marquee-logo img[src$="csd-liege.svg"] { height: 70px; }
.marquee-logo img[src$="ecole-cirque-marchin.svg"] { height: 102px; }
.marquee-logo img[src$="eloy-water.svg"] { height: 70px; }
.marquee-logo img[src$="immo-demarche.svg"] { height: 75px; }
.marquee-logo img[src$="kikk.svg"] { height: 70px; }
.marquee-logo img[src$="lattitude50.png"] { height: 70px; }
.marquee-logo img[src$="lepavillon.svg"] { height: 107px; }

.marquee-logo:has(img[src$="lepavillon.svg"]) {
  margin: 0 -25px;
}

.marquee-logo:has(img[src$="eloy-water.svg"]),
.marquee-logo:has(img[src$="csd-liege.svg"]) {
  margin: 0 15px;
}

.marquee-logo img[src$="lattitude50.png"],
.marquee-logo img[src$="ecole-cirque-marchin.svg"],
.marquee-logo img[src$="color-code.svg"],
.marquee-logo img[src$="csd-liege.svg"] {
  transform: translateY(8px);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== CASE STUDIES / TESTIMONIALS ===== */
.case-studies {
  background: #fafafa;
  padding: 20px 0 80px;
  overflow: hidden;
}

.case-studies-track-wrap {
  padding-left: max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  overflow: hidden;
  clip-path: inset(0 0 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2)));
  transition: clip-path 0.7s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}

.case-studies-track-wrap.has-moved {
  clip-path: inset(0);
}

.case-studies-track {
  display: flex;
  /* Cartes de hauteurs différentes (chacune adaptée à son témoignage),
     alignées par le bas. */
  align-items: flex-end;
  gap: 24px;
  transition: transform 0.7s cubic-bezier(0.62, 0.05, 0.01, 0.99);
  will-change: transform;
  cursor: grab;
  user-select: none;
}

.case-studies-track.is-dragging {
  cursor: grabbing;
}

.case-studies-track.is-dragging .case-card {
  pointer-events: none;
}

.case-card-img,
.case-card-panel-photo {
  -webkit-user-drag: none;
  user-drag: none;
}

.case-card {
  position: relative;
  flex: 0 0 calc((min(var(--max-width), 100vw) - 2 * var(--content-padding) - 24px) / 1.7);
  /* Pas d'aspect-ratio fixe : la carte prend la hauteur de son contenu
     (le panel blanc, qui s'adapte à la longueur du témoignage). */
  background: #ddd;
  overflow: hidden;
}

.case-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-card-panel {
  /* En flux (et non en absolu) : c'est le panel qui donne sa hauteur à la
     carte. Sa hauteur s'adapte au témoignage, la carte grandit avec lui. */
  position: relative;
  margin: 24px;
  width: 480px;
  max-width: calc(100% - 48px);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== Variantes desktop des cartes témoignages ===== */
@media (min-width: 901px) {
  /* Témoignages 1 et 3 : une hauteur minimum, pour qu'ils se démarquent
      du témoignage 2 (carte 2 = plus large et plus courte). */
 .case-card-panel-content {
      flex: 1 1 0;
    }
 .case-card:not(.case-card--wide) .case-card-panel {
      min-height: 520px;
    }

   /* Témoignage 2 (Claudine) : carte plus large que les autres, et bloc
      blanc qui occupe toute la largeur — même marge (24px) à gauche et à
      droite. Hauteur minimum modérée (plus basse que les cartes 1 et 3). */
   .case-card--wide {
     flex-basis: calc((min(var(--max-width), 100vw) - 2 * var(--content-padding) - 24px) / 1.9);
   }
   .case-card--wide .case-card-panel {
     width: calc(100% - 48px);
     min-height: 400px;
   }
}

.case-card-panel-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.case-card-panel-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 28px 28px 24px;
  gap: 0;
}

.case-card-panel-top {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.case-card-panel-bottom {
  flex-shrink: 0;
}

.case-card-panel-content::after {
  display: none;
}

.case-card-logo,
.case-card-quote {
  transition: opacity 0.5s ease;
}

.case-card:hover .case-card-panel-photo { opacity: 1; }
.case-card:hover .case-card-logo,
.case-card:hover .case-card-quote { opacity: 0; }
.case-card:hover .case-card-panel-bottom:before { opacity: 0; }

.case-card-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin-bottom: 18px;
}

.case-card-logo img {
  height: 42px;
  width: auto;
  display: block;
}

.case-card-logo img[src$="immo-demarche.svg"] {
  height: 40px;
}

.case-card-logo img[src$="walepices.jpg"] {
  height: 50px;
}

.case-card-quote {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: #1a1a1a;
  padding-bottom: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.case-card-panel-bottom::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(26, 26, 26, 0.12);
  margin-bottom: 16px;
}

.case-card-author-name,
.case-card-author-role {
  flex-shrink: 0;
}

.case-card-author-name {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
  transition: color 0.5s ease;
}

.case-card-author-role {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  transition: color 0.5s ease;
}

.case-card:hover .case-card-author-name { color: #fff; }
.case-card:hover .case-card-author-role { color: rgba(255, 255, 255, 0.8); }

.case-studies-controls {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 50px;
  padding: 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
}

.case-studies-controls button {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(26, 26, 26, 0.25);
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: rgba(26, 26, 26, 0.45);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.case-studies-controls button:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ===== FAQ (fond noir, deux colonnes) ===== */
.faq--a {
  padding: 100px 0 100px;
  position: sticky;
  top: 0;
  z-index: 9;
  max-height: 100vh;
  overflow-y: auto;
}

/* Petite fenêtre : on réduit les paddings pour laisser plus de place au contenu
   avant de devoir scroller dans la section. */
@media (max-height: 800px) {
  .faq--a {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Classe ajoutée par JS quand scrollHeight > window.innerHeight :
   on neutralise le sticky pour que l'utilisateur scrolle l'intégralité
   de la FAQ avant que Contact n'apparaisse. */
.faq--a.faq-overflows {
  position: relative;
  max-height: none;
  overflow: visible;
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  align-items: start;
}

.faq-left {
}

.faq-title {
  margin-bottom: 20px;
}

.faq-subtitle {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
}

.faq-list {
  /* Aligne le haut de l'accordéon sur le .faq-title de gauche, en compensant
     le badge "FAQ" qui le précède : hauteur (line-height 1.6 + padding 20px)
     + son margin-bottom 60px. */
  padding: calc(0.75rem * 1.6 + 20px + 60px) 0 0;
}


.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: #fff;
  text-align: left;
  transition: color 0.3s;
}

.faq-question:hover {
  color: #fff;
}

.faq-toggle {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 20px;
}

.faq-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.3s ease;
}

.faq-bar:first-child {
  transform: translate(-50%, -50%);
}

.faq-bar:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.active .faq-bar:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.faq-answer p {
  padding-bottom: 28px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  max-width: 700px;
}

.faq-answer a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.faq-answer a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.faq-answer a:hover { color: var(--blue); }
.faq-answer a:hover::after { width: 100%; }


.faq-cta {
  padding: 0 max(var(--content-padding), calc((100vw - var(--max-width)) / 2));
  margin-top: 50px;
}

.btn-submit--faq {
  text-decoration: none;
}

.btn-submit--faq .btn-main {
  border-color: #fff;
  color: #fff;
}

.btn-submit--faq .btn-arrow-box {
  border-color: #fff;
  color: #fff;
}

.btn-submit--faq::before {
  background: #fff;
}

.btn-submit--faq:hover .btn-main {
  color: #1a1a1a;
  border-color: transparent;
}

.btn-submit--faq:hover .btn-arrow-box {
  color: #1a1a1a;
  border-color: transparent;
}

/* ===== CONTACT ===== */
.contact {
  padding: 100px var(--content-padding);
  position: relative;
  z-index: 11;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.contact-statement {
  margin-bottom: 30px;
}


.contact-info {
  margin-bottom: 30px;
  /* Override le font-style: italic par défaut du <address> (UA stylesheet). */
  font-style: normal;
}

.contact-info p {
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #444;
}

.contact-info a {
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.contact-info a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.contact-info a:hover::after {
  width: 100%;
}

.contact-info a:hover {
  color: var(--blue);
}

.contact-email {
  color: var(--blue);
}

.contact-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-link {
  font-size: 0.9rem;
  text-decoration: none;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: color 0.4s ease, gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.social-link::before {
  content: '';
  display: block;
  width: 0;
  height: 12px;
  background: var(--blue);
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.social-link:hover {
  color: var(--blue);
  gap: 10px;
}

.social-link:hover::before {
  width: 12px;
}

.social-link-text {
  position: relative;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.85rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0;
  transition: gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.form-group label::before {
  content: '';
  display: block;
  width: 0;
  height: 12px;
  background: var(--blue);
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  flex-shrink: 0;
}

.form-group:focus-within label {
  gap: 10px;
}

.form-group:focus-within label::before {
  width: 12px;
}

.form-group input,
.form-group textarea {
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--blue);
}

.required-mark {
  color: var(--blue);
  margin: 0 2px;
  font-weight: 600;
  font-size: 0.7em;
  vertical-align: super;
}

.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-error {
  font-size: 0.9rem;
  color: #b91c1c;
  background: #fef2f2;
  border-left: 3px solid #b91c1c;
  padding: 10px 14px;
  border-radius: 2px;
}

.contact-success {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  padding: 40px 0;
  animation: contact-success-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.contact-success-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-success-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-success h3 {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1.2;
}

.contact-success p {
  font-size: 1rem;
  color: #555;
  margin: 0;
  max-width: 38ch;
  line-height: 1.5;
}

@keyframes contact-success-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button: split rectangle + gap + arrow box */
.btn-submit {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  gap: 8px;
  position: relative;
}

.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.btn-submit:hover::before {
  opacity: 1;
}

.btn-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}

.btn-submit:disabled::before {
  opacity: 0;
}

.btn-main {
  display: flex;
  align-items: center;
  padding: 16px 36px;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  position: relative;
  z-index: 1;
}

.btn-arrow-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 1.2rem;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  position: relative;
  z-index: 1;
}

.btn-arrow {
  display: inline-block;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-submit:hover .btn-arrow {
  transform: rotate(45deg);
}

.btn-submit:hover .btn-main {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

.btn-submit:hover .btn-arrow-box {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

/* ===== FLOATING CONTACT WIDGET ===== */
.contact-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: none;
}

.contact-widget.visible { display: block; }

.widget-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--blue);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.widget-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(32, 24, 252, 0.3);
}

.widget-panel {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 380px;
  height: 380px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  border: none;
}

.widget-panel.open {
  display: flex;
  flex-direction: column;
  animation: widgetSlideUp 0.3s ease;
}

@keyframes widgetSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.widget-close {
  position: absolute;
  top: -48px;
  left: -48px;
  width: 48px;
  height: 48px;
  background: var(--blue);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.widget-close span {
  position: absolute;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: background 0.3s;
}

.widget-close span:first-child {
  transform: rotate(45deg);
}

.widget-close span:last-child {
  transform: rotate(-45deg);
}

.widget-close:hover {
  background: #fff;
}

.widget-close:hover span {
  background: var(--blue);
}

.widget-card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 1;
}

.widget-card-content p {
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: #444;
}

.widget-card-content a:not(.widget-social-link) {
  text-decoration: none;
  color: #1a1a1a;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.widget-card-content a:not(.widget-social-link)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.widget-card-content a:not(.widget-social-link):hover::after {
  width: 100%;
}

.widget-card-content a:not(.widget-social-link):hover {
  color: var(--blue);
}

.widget-card-socials {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  align-items: flex-start;
}

.widget-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.85rem;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.4s ease, gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.widget-social-link::before {
  content: '';
  display: block;
  width: 0;
  height: 12px;
  background: var(--blue);
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.widget-social-link:hover {
  color: var(--blue);
  gap: 10px;
}

.widget-social-link:hover::before {
  width: 12px;
}

.widget-card .btn-submit--widget {
  text-decoration: none;
  margin-top: 20px;
  gap: 8px;
}


.btn-submit--widget .btn-main {
  padding: 14px 28px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.btn-submit--widget .btn-arrow-box {
  width: 50px;
  font-size: 1rem;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--blue);
  color: #fff;
  padding: 64px var(--content-padding) 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

.hero.hero--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: 24px;
}

.footer-logo {
  display: inline-flex;
}

.footer-logo img {
  display: block;
  height: 80px;
  width: auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: auto auto;
  gap: 32px;
}

.footer-group {
  display: grid;
  grid-template-columns: auto 160px;
  gap: 32px;
  align-items: baseline;
}

.footer-label {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}

.footer-nav li {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 0;
}

.footer-nav a { transition: color 0.3s; }

.footer-nav--contact a:not(.footer-social) {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.footer-nav--contact a:not(.footer-social)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-nav--contact a:not(.footer-social):hover::after { width: 100%; }

.footer-nav--menu li a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: gap 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-nav--menu li a::before {
  content: '';
  display: block;
  width: 0;
  height: 0.7em;
  background: #fff;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.footer-nav--menu li a:hover { gap: 0.5em; }

.footer-nav--menu li a:hover::before { width: 0.7em; }

.footer-socials-icons {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: opacity 0.3s;
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-social:hover { opacity: 0.7; }

.footer-back-row {
  display: flex;
  justify-content: flex-end;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: 12px;
}

.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 160px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  text-align: left;
  transition: opacity 0.3s;
}

.footer-back-to-top:hover { opacity: 0.7; }

.footer-back-arrow {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.footer-back-to-top:hover .footer-back-arrow {
  transform: translateY(-3px);
}

.contact-widget.contact-widget--hidden { display: none !important; }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ===== CUSTOM CURSOR ===== */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

.custom-cursor.visible {
  opacity: 1;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--blue);
  flex-shrink: 0;
  transition: background 0.25s ease;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.custom-cursor.on-clickable .cursor-dot {
  animation: cursor-blink 0.6s steps(2, start) infinite;
}

.cursor-text {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.cursor-text.fade-out {
  opacity: 0;
}

.custom-cursor.on-dark .cursor-text {
  color: #fff;
}

.custom-cursor.on-blue .cursor-dot {
  background: #fff;
}

.custom-cursor.on-blue .cursor-text {
  color: #fff;
}

@media (pointer: fine) {
  * {
    cursor: none !important;
  }
}

@media (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  :root {
    --content-padding: 24px;
  }

  .navbar--hero .nav-links { display: none; }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .accordion-number {
    font-size: 1.8rem;
    margin-right: 40px;
    min-width: 40px;
  }

  .accordion-left { padding-left: 0; }
  .accordion-body-inner { flex-direction: column; }
  .accordion-images { flex-direction: column; }
  .accordion-images .placeholder-img { width: 100%; }
  .accordion-right { flex: 0 0 auto; padding-right: 0; }

  .process-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .process-images {
    flex: 1 1 auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .process-steps {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-left {
    position: relative;
    top: 0;
  }

  .footer-inner {
    flex-direction: column;
    gap: 32px;
    padding-bottom: 60px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-group {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .widget-panel {
    width: calc(100vw - 48px);
    height: auto;
  }

  .about { margin-top: 100vh; }

  .case-card {
    flex: 0 0 calc(100vw - 2 * var(--content-padding));
    aspect-ratio: 4 / 3;
  }

  .case-card-panel {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .case-card-panel-content {
    height: 100%;
    min-height: 0;
  }

  .case-card-panel-top {
    flex: 1 1 auto;
  }

  .case-card-panel-bottom {
    margin-top: auto;
  }
}

/* ===== PROCESS V4 ===== */
.process .process-images.in-view .pv2-img--primary,
.process .process-images.in-view .pv2-img--secondary {
  animation: none;
}

.process-steps--v4 {
  gap: 0;
}

.process-step--v4 {
  display: grid;
  grid-template-columns: 32px 22px 1fr;
  column-gap: 14px;
  align-items: start;
  padding-bottom: 32px;
  cursor: pointer;
}

.process-step--v4:last-child {
  padding-bottom: 0;
}

.process-steps--v4 .process-step .process-step-num {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'zero' 1;
  font-size: 0.85rem;
  font-weight: 500;
  padding-top: 3px;
  min-width: auto;
  line-height: 1;
  transition: color 0.5s ease;
  color: #d0d0d0;
}

.process-steps--v4 .process-step.passed .process-step-num {
  color: #555;
}

.process-timeline-cell {
  position: relative;
  width: 22px;
  align-self: stretch;
  min-height: 80px;
}

.process-timeline-square {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--blue);
  transition: background 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  z-index: 2;
  border-radius: 0;
}

.process-step--v4:not(.passed) .process-timeline-square {
  border-color: #d4d4d4;
}

.process-step--v4.passed .process-timeline-square {
  background: var(--blue);
  border-color: var(--blue);
}

.process-step--v4.active .process-timeline-square {
  transform: translateX(-50%);
}

.process-step--v4:not(:last-child) .process-timeline-cell::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  bottom: -48px;
  background: #e7e7e7;
  z-index: 0;
}

.process-step--v4:not(:last-child) .process-timeline-cell::after {
  content: '';
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0;
  background: var(--blue);
  z-index: 1;
  transition: height 0.75s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}

.process-step--v4.passed:not(:last-child) .process-timeline-cell::after {
  height: calc(100% + 20px);
}

.process-steps--v4 .process-step .process-step-content h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  margin-top: -8px;
  margin-bottom: 14px;
  line-height: 1.2;
  transition: color 0.5s ease;
  color: #d0d0d0;
}

.process-steps--v4 .process-step.passed .process-step-content h3 {
  color: #111;
}

.process-steps--v4 .process-step .process-step-content h3::before {
  display: none;
}

.process-steps--v4 .process-step .process-step-content p {
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: none;
  transition: color 0.5s ease;
  color: #d8d8d8;
}

.process-steps--v4 .process-step.passed .process-step-content p {
  color: #6a6a6a;
}

@media (max-width: 900px) {
  .process-step--v4 {
    grid-template-columns: 28px 20px 1fr;
    column-gap: 10px;
    padding-bottom: 44px;
  }
  .process-timeline-cell { width: 20px; min-height: 64px; }
  .process-step--v4:not(:last-child) .process-timeline-cell::before {
    bottom: -36px;
  }
  .process-step--v4.passed:not(:last-child) .process-timeline-cell::after {
    height: calc(100% + 8px);
  }
}

.grecaptcha-badge { visibility: hidden !important; }

/* ===== NAV ACTIONS WRAPPER (default = desktop : bouton contact masqué) ===== */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-contact-btn { display: none; }

/* ===== TESTIMONIAL — bouton "Lire la suite" (par défaut desktop : caché).
   Sur mobile la JS insère le bouton comme sibling après chaque .case-card-quote
   et calcule --preview-lines pour clamper le quote à (totalLines − 3) lignes. ===== */


/* ===== Spans utilitaires pour swap de phrase FAQ (default desktop) ===== */
.faq-subtitle-desktop { display: inline; }
.faq-subtitle-mobile { display: none; }

/* =========================================================================
   MOBILE PROTOTYPE OVERRIDES (<= 900px) — révisions à intégrer plus tard
   ========================================================================= */
@media (max-width: 900px) {
  /* ====== HERO + NAVBAR ====== */
  /* Pas d'animation logo + barre logo/burger visible dès l'arrivée :
     on masque la navbar du hero et on force la sticky en permanence. */
  .navbar--hero { display: none; }

  .navbar--sticky {
    transform: translateY(0);
    /* Tant qu'on est au-dessus du hero : fond transparent.
       Un fois scrollé sous le hero (.scrolled-past ajouté en JS),
       fond blanc opaque 100%. */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 600;
    transition: background 0.3s ease;
  }
  .navbar--sticky.scrolled-past {
    background: #fff;
  }
  /* Au-dessus du hero (transparent) : logo + burger en blanc */
  .navbar--sticky:not(.scrolled-past):not(.menu-open) .nav-logo-bleu { display: none; }
  .navbar--sticky:not(.scrolled-past):not(.menu-open) .nav-logo-blanc { display: block; }
  .navbar--sticky:not(.scrolled-past):not(.menu-open) .burger span {
    background: #fff;
  }
  /* Quand le menu burger est ouvert, fond bleu opaque */
  .navbar--sticky.menu-open {
    background: var(--blue);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Logo un peu plus compact dans la navbar mobile */
  .nav-logo img {
    height: 40px;
  }

  /* Bouton "Contactez-moi" retiré de la navbar */
  .nav-contact-btn { display: none; }

  /* ====== ESPACEMENTS COMMUNS DES BADGES (40px au-dessus / 32px en dessous) ====== */
  .section-badge { margin-bottom: 32px; }

  /* ====== ACCROCHES DE SECTION (mobile) ====== */
  .about-statement,
  .contact-statement {
    font-size: 1.2rem;
    line-height: 1.35;
  }
  /* Contact : moins d'espace entre l'accroche et la phrase "Basée en..." */
  .contact-statement { margin-bottom: 14px; }

  /* ====== SECTION À PROPOS ====== */
  .about { padding: 40px var(--content-padding) 30px; }

  /* about-link : structure (::after) définie en base. Sur mobile le trait
     s'anime de gauche à droite à chaque clic via la classe .underline-anim
     ajoutée en JS (cf. @keyframes underline-grow-mobile plus bas). */

  /* ====== SECTION EXPERTISE ====== */
  .accordion-number {
    margin-right: 14px;
    min-width: auto;
  }
  /* Masquer "& automatisations" du 3e accordéon en mobile */
  .accordion-title-suffix { display: none; }

  .expertise { padding: 40px 0 0; }
  .expertise .section-header-padded { margin-bottom: 0; }

  /* Réordonner le contenu de l'accordéon en mobile :
     texte (1) → tags (2) → image (3, en bas). On dissout .accordion-left
     en display: contents pour que ses enfants deviennent des items
     directs du flex column .accordion-body-inner et qu'on puisse les
     ordonner avec les autres.
     gap: 0 sur le flex container (override du gap: 60px desktop qui
     créait un grand espace vertical entre tous les items). On gère
     ensuite l'espacement explicitement par item. */
  .accordion-body-inner { gap: 0; }
  .accordion-left { display: contents; }
  .accordion-text { order: 1; margin-bottom: 24px; }
  .accordion-right { order: 2; margin-bottom: 24px; }
  .accordion-images {
    order: 3;
    display: flex;
    /* Largeur de la zone de contenu (= 100% du conteneur, qui a le padding
       horizontal de .accordion-body-inner). On NE déborde PAS sur 100vw. */
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Une seule image, 100% de la zone padding incluse, hauteur 200px */
  .accordion-images .placeholder-img {
    width: 100%;
    max-width: none;
    height: 200px;
  }
  .accordion-images .placeholder-img:nth-child(n+2) { display: none; }

  /* ====== HERO ====== */
  /* La 1re ligne du h1 est ancrée à 30vh du haut. Le CTA suit avec un
     offset fixe basé sur 4 lignes. Valeurs ajustées pour iOS Safari où
     la barre URL réduit la viewport (cf. .hero { height: 100dvh; }). */
  .hero { overflow: hidden; }
  .hero-bg {
    background-position: 30% center;
  }
  .hero-content {
    justify-content: flex-start;
    padding-top: 30vh;
  }
  .hero-cta {
    position: absolute;
    top: calc(30vh + 162px);
    left: var(--content-padding);
    right: var(--content-padding);
    bottom: auto;
    z-index: 2;
  }


  /* ====== SECTION PROCESS ====== */
  .process .section-header-padded {
    padding-top: 40px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .process-layout {
    gap: 24px;
    padding-bottom: 0;
  }
  .process-layout > .process-images {
    order: 2;
    aspect-ratio: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-1 * var(--content-padding)) !important;
    margin-right: calc(-1 * var(--content-padding)) !important;
    margin-bottom: 0;
    overflow: hidden;
  }
  /* Mobile: cache les wrappers et affiche l'img dédiée mobile pleine largeur */
  .process-images .pv2-img--primary,
  .process-images .pv2-img--secondary { display: none !important; }
  .process-images .process-mobile-img {
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    object-position: center 25%;
  }
  /* Remonter un peu les titres */
  .process-steps--v4 .process-step .process-step-content h3 {
    margin-top: -4px;
  }

  /* ====== SECTION CLIENTS ====== */
  /* Mêmes espaces au-dessus / en-dessous du badge que pour PROCESS :
     40px pt sur le section-header-padded, 0 ailleurs.
     Fond légèrement plus clair que la passe précédente (#f4 → #f7),
     uniquement sur la section clients (expertise garde le #fafafa). */
  .clients,
  .clients .case-studies {
    background: #f7f7f7;
  }
  .clients { padding: 0; }
  .clients .section-header-padded {
    padding-top: 40px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .case-studies { padding: 0; }
  /* Boutons flèches centrés */
  .case-studies-controls {
    justify-content: center;
    margin-top: 18px;
    margin-bottom: 0;
  }
  .marquee {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  /* Testimonial card — image en fond, panel pinned bottom, padding bas = côtés
     TOUS les témoignages doivent être identiques (pas d'alternance grand/petit) :
     on force .case-card--short à hériter exactement des mêmes flex/aspect/etc.
     que .case-card en listant explicitement les deux sélecteurs avec flex. */
  .case-studies-track { align-items: stretch; }
  .case-card,
  .case-card--short {
    flex: 0 0 calc(100vw - 2 * var(--content-padding));
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    padding: 16px 16px;
  }
  .case-card-img { aspect-ratio: auto; }
  .case-card-panel,
  .case-card-panel--short {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    margin: 0;
  }
  .case-card-panel-photo { display: none; }
  .case-card:hover .case-card-logo,
  .case-card:hover .case-card-quote,
  .case-card:hover .case-card-divider { opacity: 1; }
  .case-card:hover .case-card-author-name { color: #1a1a1a; }
  .case-card:hover .case-card-author-role { color: rgba(26, 26, 26, 0.55); }

  /* ====== SECTION FAQ ====== */
  .faq--a {
    position: static;
    padding: 40px 0 30px;
    /* Fond bleu en mobile (au lieu du noir desktop) */
    background: var(--blue);
  }
  /* Badge FAQ en mobile : fond blanc et texte bleu (au lieu de fond bleu /
     texte blanc par défaut) */
  .faq-layout .section-badge,
  .faq--a .section-badge {
    background: #fff;
    color: var(--blue);
  }

  /* Réordonner: badge / titre / accordéon / sous-titre / bouton */
  .faq-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .faq-left { display: contents; }
  .faq-left .section-badge { order: 1; }
  /* Titre FAQ remis en place (avant l'accordéon) */
  .faq-title {
    display: block;
    order: 2;
    margin-bottom: 20px;
  }
  .faq-list { order: 3; padding-top: 0; margin-bottom: 28px; }
  .faq-subtitle { order: 4; margin-top: 0; margin-bottom: 20px; }
  .btn-submit--faq { order: 5; }

  /* Questions FAQ : gris clair sur le fond bleu */
  .faq-question {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 16px 0;
    color: rgba(255, 255, 255, 0.7);
  }
  .faq-question:hover { color: rgba(255, 255, 255, 0.7); }
  /* Toggle + / - de l'accordéon : barres en gris clair */
  .faq-bar { background: rgba(255, 255, 255, 0.7); }
  /* Lignes de séparation entre items : gris clair */
  .faq-item { border-bottom-color: rgba(255, 255, 255, 0.25); }
  /* Réponses FAQ : gris clair */
  .faq-answer p {
    color: rgba(255, 255, 255, 0.7);
    padding-bottom: 16px;
  }
  /* Sous-titre (texte sous l'accordéon "La réponse à votre question…") : blanc */
  .faq-subtitle { color: #fff; }

  /* Swap de la 1re phrase du sous-titre */
  .faq-subtitle-desktop { display: none; }
  .faq-subtitle-mobile { display: inline; }

  /* Bouton FAQ : contour blanc + fond transparent (lisible sur le fond noir
     de la section). État :active = fond blanc + texte noir pour feedback tap. */
  .btn-submit--faq::before { display: none; }
  .btn-submit--faq .btn-main,
  .btn-submit--faq:hover .btn-main {
    background: transparent;
    border-color: #fff;
    color: #fff;
    padding: 11px 20px;
    font-size: 0.7rem;
  }
  .btn-submit--faq .btn-arrow-box,
  .btn-submit--faq:hover .btn-arrow-box {
    background: transparent;
    border-color: #fff;
    color: #fff;
    width: 42px;
    font-size: 0.95rem;
  }
  .btn-submit--faq:active .btn-main,
  .btn-submit--faq:active .btn-arrow-box {
    background: #fff;
    border-color: #fff;
    color: var(--blue);
  }

  /* Tous les btn-submit (FAQ + form) : flèche → directement (pas ↗ qui pivote)
     + pas de rotation au hover */
  .btn-submit .btn-arrow {
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-submit .btn-arrow::before {
    content: '→';
    font-size: 1.1rem;
    line-height: 1;
  }
  .btn-submit:hover .btn-arrow,
  .btn-submit:active .btn-arrow { transform: none; }
  /* Form button : retirer l'overlay hover bleu. État :active = fond bleu
     + texte blanc pour feedback tap. */
  .contact-form .btn-submit::before { display: none; }
  .contact-form .btn-submit:hover .btn-main {
    background: transparent;
    border-color: var(--blue);
    color: var(--blue);
  }
  .contact-form .btn-submit:hover .btn-arrow-box {
    background: transparent;
    border-color: var(--blue);
    color: var(--blue);
  }
  .contact-form .btn-submit:active .btn-main,
  .contact-form .btn-submit:active .btn-arrow-box {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  /* Bouton du formulaire : même taille que le btn FAQ */
  .contact-form .btn-submit .btn-main {
    padding: 11px 20px;
    font-size: 0.7rem;
  }
  .contact-form .btn-submit .btn-arrow-box {
    width: 42px;
    font-size: 0.95rem;
  }

  /* ====== SECTION CONTACT ====== */
  .contact { padding: 40px var(--content-padding) 40px; }

  /* Form — espace label / champ très resserré (uniforme inputs + textarea) */
  .form-group { gap: 0; }
  .form-group input,
  .form-group textarea { padding: 4px 0; }

  /* Réorganiser .contact-info : "Basée en…" en premier, puis email, puis tel.
     Interlignage tel ↔ socials = interlignage email ↔ tel = 4px. */
  .contact-info { display: flex; flex-direction: column; margin-bottom: 0; }
  .contact-info p:nth-child(1) { order: 2; margin-bottom: 4px; } /* email */
  .contact-info p:nth-child(2) { order: 3; margin-bottom: 4px; } /* tel */
  .contact-info p:nth-child(3) {
    order: 1;
    margin-bottom: 44px;
    line-height: 1.3; /* interlignage réduit pour la phrase "basée en…" */
  }

  /* Liens sociaux contact : LinkedIn + Instagram sur la même ligne, espace large.
     Texte en noir mais le petit carré reste en bleu (var(--blue) hérité). */
  .contact-socials {
    flex-direction: row;
    gap: 28px;
  }
  .social-link,
  .social-link:hover,
  .social-link:active {
    color: #000;
    gap: 10px;
  }
  .social-link::before { width: 12px; } /* background: var(--blue) hérité du desktop */

  /* ====== WIDGET CONTACT FLOTTANT (masqué sur mobile) ====== */
  .contact-widget { display: none !important; }

  /* ====== FOOTER ====== */
  /* Fond noir en mobile (au lieu du bleu desktop) */
  .footer { background: #000; }

  /* Contenu en 12px, sauf logo qui est plus grand */
  .footer,
  .footer-label,
  .footer-nav li,
  .footer-back-to-top,
  .footer-copy { font-size: 12px; }
  .footer-logo img { height: 60px; }

  /* Layout : logo en haut-gauche, carré "retour en haut" en haut-droite.
     Colonne contact en dessous du logo, copyright centré. */
  .footer {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo  back"
      "links links"
      "bottom bottom";
    align-items: start;
    gap: 24px;
    padding: 48px var(--content-padding) 16px;
  }
  .footer-inner { display: contents; }
  .footer-columns {
    grid-area: links;
    grid-template-columns: 1fr;
    align-items: start;
    align-self: start;
    gap: 24px;
    /* Grand espace entre le logo et les liens / réseaux sociaux */
    margin-top: 48px;
  }
  /* Masquer la colonne menu — on ne garde que la colonne contact */
  .footer-group:first-child { display: none; }
  .footer-group {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
  }
  /* Pas de label "Menu" / "Contact" */
  .footer-label { display: none; }

  /* Bouton retour en haut : carré contour blanc avec flèche, haut-droite,
     aligné sur le haut de l'adresse mail */
  .footer-back-row {
    grid-area: back;
    align-self: start;
    justify-content: flex-end;
    padding-bottom: 0;
    margin: 0;
  }
  .footer-back-to-top {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid #fff;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .footer-back-to-top span:first-child { display: none; } /* "Retour en haut" caché */
  .footer-back-arrow { font-size: 16px; line-height: 1; }

  .footer-logo {
    grid-area: logo;
    justify-self: start;
    align-self: start;
    line-height: 1;
  }

  .footer-bottom {
    grid-area: bottom;
    padding-top: 14px;
  }
  .footer-copy { text-align: center; }

  /* ====== MENU BURGER OUVERT (overlay plein écran) ====== */
  /* Animation du carré blanc devant le texte au tap, déclenchée via la
     classe .underline-anim ajoutée par JS au moment du clic. On garde
     le ::before défini en desktop (carré + transitions) mais on neutralise
     le déclenchement :hover qui reste collé après tap. */
  .nav-links-mobile li a {
    gap: 0;
    position: relative;
    text-decoration: none;
    padding: 10px 0;
  }
  /* Empêche le ::before / le gap d'être déclenchés par :hover (sticky
     après tap sur certains navigateurs mobiles). L'animation passe
     exclusivement par la classe .underline-anim. */
  .nav-links-mobile li a:hover,
  .nav-links-mobile li a:active,
  .nav-links-mobile li a:focus {
    gap: 0;
    text-decoration: none;
  }
  .nav-links-mobile li a:hover::before,
  .nav-links-mobile li a:active::before,
  .nav-links-mobile li a:focus::before {
    width: 0;
  }

  /* ====== ANIMATIONS COMMUNES — déclenchées au clic via .underline-anim ======
     La classe .underline-anim est ajoutée par JS au moment du clic et
     retirée à la fin de l'animation. Ça permet de re-déclencher
     l'animation à chaque clic. */

  /* about-link : soulignement gauche → droite */
  .about-link.underline-anim::after {
    animation: underline-grow-mobile 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  @keyframes underline-grow-mobile {
    0%   { width: 0; opacity: 1; }
    60%  { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
  }

  /* Burger menu : carré qui apparait à gauche du texte puis se résorbe.
     On anime à la fois la largeur du ::before (carré) et le gap du lien
     (espace entre carré et texte). Pas de `forwards` → retour à l'état
     de repos après animation, propre pour la prochaine ouverture du menu. */
  .nav-links-mobile li a.underline-anim::before {
    animation: burger-square-grow 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  .nav-links-mobile li a.underline-anim {
    animation: burger-gap-grow 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  @keyframes burger-square-grow {
    0%   { width: 0; }
    30%  { width: 1em; }
    75%  { width: 1em; }
    100% { width: 0; }
  }
  @keyframes burger-gap-grow {
    0%   { gap: 0; }
    30%  { gap: 0.3em; }
    75%  { gap: 0.3em; }
    100% { gap: 0; }
  }

  /* Réduire l'interlignage entre les liens (mail / tel) dans l'overlay */
  .nav-overlay-col {
    flex-direction: column;
    gap: 6px;
  }

  /* Petit carré blanc devant Instagram et LinkedIn dans l'overlay */
  .nav-overlay-socials {
    flex-direction: column;
    gap: 8px;
  }
  .nav-overlay-socials a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .nav-overlay-socials a::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fff;
    flex-shrink: 0;
  }
}