/* =====================================================================
   WLDONE SERVICES — MILESTONE 2
   Navbar premium + structure globale
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES / RESET
   --------------------------------------------------------------------- */
:root {
  /* Identité visuelle */
  --color-orange: #f0a500;
  --color-brown: #a6501c;
  --color-dark: #282828;
  --color-white: #ffffff;

  /* Nuances utilitaires */
  --color-dark-soft: rgba(40, 40, 40, 0.85);
  --color-white-soft: rgba(255, 255, 255, 0.9);
  --shadow-navbar: 0 8px 24px rgba(40, 40, 40, 0.08);

  /* Typographie */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Manrope', sans-serif;

  /* Navbar */
  --navbar-height: 90px;
  --transition-fast: 0.25s ease;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 36px);
}

body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background-color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ---------------------------------------------------------------------
   2. HEADER / NAVBAR
   Style "carte flottante" inspiré du screenshot de référence :
   fond blanc, texte/logo noirs en permanence, marges autour de la barre.
   La bordure/ombre se renforce légèrement au scroll pour donner une
   sensation de profondeur, mais la couleur ne change plus.
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 32px 0;
  transition: padding var(--transition-medium);
}

.navbar {
  height: var(--navbar-height);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(40, 40, 40, 0.1);
  transition: box-shadow var(--transition-medium),
              border-radius var(--transition-medium);
}

/* Au scroll : la carte se resserre légèrement et l'ombre se renforce */
.site-header.is-scrolled {
  padding-top: 12px;
}

.site-header.is-scrolled .navbar {
  box-shadow: 0 10px 32px rgba(40, 40, 40, 0.14);
}

/* --- Logo ------------------------------------------------------------ */
.navbar__logo {
  display: flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
  z-index: 1001;
}

.logo-img {
  height: 36px;
  width: auto;
}

/* --- Menu desktop ------------------------------------------------------ */
.navbar__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.navbar__menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.navbar__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--color-dark);
  padding: 8px 2px;
  transition: color var(--transition-fast);
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-orange);
  transition: width var(--transition-fast);
}

.navbar__link:hover {
  color: var(--color-orange);
}

.navbar__link:hover::after {
  width: 100%;
}

/* --- Actions à droite : lang switch + burger --------------------------- */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--color-dark);
  border: 1.5px solid rgba(40, 40, 40, 0.25);
  border-radius: 30px;
  padding: 7px 16px;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background-color var(--transition-fast);
}

.lang-switch:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.lang-switch__sep {
  opacity: 0.5;
  font-weight: 400;
}

.lang-switch__fr.is-active,
.lang-switch__en.is-active {
  color: var(--color-orange);
}

/* --- Burger (mobile) ---------------------------------------------------- */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  z-index: 1001;
  position: relative;
}

.burger__bar {
  width: 26px;
  height: 2px;
  background-color: var(--color-dark);
  border-radius: 2px;
  transition: transform var(--transition-fast),
              opacity var(--transition-fast);
}

/* Animation du burger en croix quand le menu mobile est ouvert */
.burger.is-active .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.is-active .burger__bar:nth-child(2) {
  opacity: 0;
}

.burger.is-active .burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   3. MENU MOBILE (slide-in plein écran)
   --------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(85%, 380px);
  background-color: var(--color-white);
  box-shadow: -10px 0 40px rgba(40, 40, 40, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  transform: translateX(100%);
  transition: transform var(--transition-medium);
  z-index: 1000;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-dark);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-block;
}

.mobile-menu__link:hover {
  color: var(--color-orange);
  padding-left: 6px;
}

.mobile-menu__lang .lang-switch {
  color: var(--color-dark);
  border-color: rgba(40, 40, 40, 0.25);
}

/* Overlay assombri derrière le menu mobile */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(40, 40, 40, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-medium), visibility var(--transition-medium);
  z-index: 999;
}

.mobile-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Empêche le scroll du body quand le menu mobile est ouvert */
body.no-scroll {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   4. HERO SECTION (Milestone 3.1)
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--color-dark); /* fallback si l'image ne charge pas */
}

/* --- Image d'arrière-plan + overlay ------------------------------------ */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Repli élégant si assets/images/hero-image.webp n'est pas encore fourni */
.hero--no-image {
  background:
    radial-gradient(circle at 30% 20%, rgba(240, 165, 0, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, #1c1c1c 0%, #282828 55%, #1c1c1c 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(40, 40, 40, 0.7) 0%, rgba(40, 40, 40, 0) 100%);
}

/* --- Contenu aligné à gauche (calqué sur le screenshot de référence) ----- */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 0 24px;
  padding-left: clamp(24px, 6vw, 88px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.28;
  color: var(--color-white);
  letter-spacing: -0.2px;
}

.hero__title-accent {
  display: block;
  color: var(--color-orange);
  margin-top: 8px;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--color-white-soft);
  max-width: 460px;
  margin: 24px 0 36px;
}

/* --- CTA ------------------------------------------------------------------
   Style pill inspiré du screenshot de référence : entièrement arrondi,
   flèche en fin de libellé. Couleur orange WLDONE conservée. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--color-white);
  background-color: var(--color-orange);
  padding: 15px 26px 15px 30px;
  border-radius: 50px;
  box-shadow: 0 12px 28px rgba(240, 165, 0, 0.28);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background-color var(--transition-fast);
}

.hero__cta::after {
  content: "\2197"; /* flèche diagonale ↗ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.hero__cta:hover {
  background-color: #d99400;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(240, 165, 0, 0.36);
}

.hero__cta:hover::after {
  transform: translate(2px, -2px);
}

.hero__cta:active {
  transform: translateY(0);
}

/* --- Piliers d'expertise -----------------------------------------------
   Milestone 3.2 : masqués volontairement. Le Hero doit susciter
   l'intérêt sans détailler les offres — les piliers seront repris
   visuellement dans les sections dédiées plus bas sur la page.
   Le HTML est conservé intact (consigne : ne pas modifier la structure). */
.hero__pillars {
  display: none;
}

.hero__pillar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--color-white);
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 30px;
  background-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.hero__pillar:hover {
  border-color: var(--color-orange);
  background-color: rgba(240, 165, 0, 0.1);
}

.hero__pillar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-orange);
  flex-shrink: 0;
}

/* --- Flèche animée de scroll ---------------------------------------------
   Milestone 3.2 : masquée volontairement. Le CTA suffit désormais
   comme indication d'action ; le Hero reste ainsi épuré. */
.hero__scroll-cue {
  display: none;
}

.hero__scroll-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg) translateY(-2px);
}

/* --- Apparition progressive du contenu (reveal on load) --------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   6. WHO ARE WE SECTION (Milestone 4)
   Layout 2 colonnes : image premium à gauche (avec léger débordement
   sur la section suivante), contenu texte à droite. Fade-in au scroll
   via IntersectionObserver (voir js/script.js — classe .scroll-reveal).
   --------------------------------------------------------------------- */
.about {
  position: relative;
  z-index: 2; /* nécessaire pour que l'image puisse déborder visuellement
                 au-dessus de la section suivante (#human-capital) */
  background-color: var(--color-white);
  padding: 70px 0 80px;
}

.about__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: center;
}

/* --- Colonne gauche : image ------------------------------------------- */
.about__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(40, 40, 40, 0.2);
  /* Débordement premium : l'image "descend" visuellement sur la
     section suivante plutôt que de s'arrêter strictement au bord */
  margin-bottom: -65px;
}

.about__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

/* Repli élégant si assets/images/about-image.webp n'est pas encore fourni */
.about--no-image .about__media {
  background:
    radial-gradient(circle at 70% 20%, rgba(240, 165, 0, 0.14) 0%, transparent 45%),
    linear-gradient(135deg, #232323 0%, #2f2f2f 55%, #1c1c1c 100%);
  aspect-ratio: 4 / 5;
}

/* --- Colonne droite : contenu ------------------------------------------ */
.about__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 18px;
}

.about__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.2px;
  margin-bottom: 28px;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.about__text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-dark-soft);
  max-width: 560px;
}

/* --- Éléments de crédibilité : blocs premium légers --------------------- */
.about__credibility {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.about__credibility-item {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: var(--color-dark);
  padding: 12px 22px;
  border: 1px solid rgba(40, 40, 40, 0.16);
  border-radius: 10px;
  background-color: transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.about__credibility-item:hover {
  border-color: var(--color-orange);
  color: var(--color-brown);
}

/* --- Apparition progressive au scroll (IntersectionObserver) ----------- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   7. HUMAN CAPITAL SOLUTIONS SECTION (Milestone 5.1)
   Layout 40/60 : intro à gauche, accordéon éditorial premium à droite.
   Style volontairement sobre : pas de cartes, pas d'ombres, pas de
   blocs colorés, pas d'icônes marketing — uniquement typographie,
   numérotation discrète et séparateurs fins.
   --------------------------------------------------------------------- */
.human-capital {
  position: relative;
  background-color: #fafafa;
  padding: 70px 0;
}

.human-capital__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
  align-items: start;
}

/* --- Colonne gauche : intro ---------------------------------------------- */
.human-capital__intro {
  /* Alignée en haut de la grille, comme validé — pas de sticky non demandé */
}

.human-capital__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 18px;
}

.human-capital__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.2px;
  margin-bottom: 24px;
}

.human-capital__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.human-capital__text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-dark-soft);
  max-width: 440px;
}

/* --- Colonne droite : accordéon éditorial --------------------------------- */
.accordion {
  border-top: 1px solid rgba(40, 40, 40, 0.12);
}

.accordion__item {
  border-bottom: 1px solid rgba(40, 40, 40, 0.12);
}

.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 4px;
  text-align: left;
  color: inherit;
}

.accordion__number {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--color-orange);
  opacity: 0.55;
  min-width: 28px;
  transition: opacity var(--transition-fast);
}

.accordion__item.is-open .accordion__number {
  opacity: 0.85;
}

.accordion__title {
  flex: 1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--color-dark);
  transition: color var(--transition-fast);
}

.accordion__header:hover .accordion__title {
  color: var(--color-orange);
}

/* Symbole +/- dessiné en CSS pur (pas d'icône externe) */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-dark);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.accordion__icon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.accordion__item.is-open .accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0); /* le trait vertical disparaît : + devient − */
}

.accordion__header:hover .accordion__icon::before,
.accordion__header:hover .accordion__icon::after {
  background-color: var(--color-orange);
}

/* --- Panneau : hauteur animée en douceur, sans saut de mise en page ------- */
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__panel-inner {
  padding: 0 4px 26px;
}

.accordion__description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-dark-soft);
  max-width: 560px;
}

/* ---------------------------------------------------------------------
   8. TECHNICAL SERVICES SECTION (Milestone 6.1 — v2, cartes premium)
   Bandeau d'introduction pleine largeur (label, titre, texte), suivi
   d'une rangée de 3 cartes premium inspirées d'une référence client
   (icône + titre + description continue, sans tags ni statistiques
   inventées). Fond blanc, cartes sombres pour un fort contraste.
   --------------------------------------------------------------------- */
.technical-services {
  position: relative;
  background-color: var(--color-white);
  padding: 70px 0;
}

.technical-services__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* --- Bandeau d'introduction, centré, pleine largeur ---------------------- */
.technical-services__intro {
  max-width: 680px;
  margin: 0 auto 64px;
  text-align: center;
}

.technical-services__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 18px;
}

.technical-services__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.2px;
  margin-bottom: 22px;
}

.technical-services__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-dark-soft);
}

/* --- Rangée de 3 cartes premium ------------------------------------------ */
.tech-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.tech-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 280px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out,
              box-shadow 0.3s ease-in-out;
}

.tech-card:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.tech-card:hover,
.tech-card:focus,
.tech-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
  outline: none;
}

/* --- Background image ------------------------------------------------ */
.tech-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease-in-out;
  z-index: 0;
}

.tech-card:hover .tech-card__bg,
.tech-card:focus .tech-card__bg,
.tech-card:focus-visible .tech-card__bg {
  transform: translateY(100%);
}

/* --- Overlay (default state) ----------------------------------------- */
.tech-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(40, 40, 40, 0.7);
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

.tech-card:hover .tech-card__overlay,
.tech-card:focus .tech-card__overlay,
.tech-card:focus-visible .tech-card__overlay {
  opacity: 0;
}

/* --- Content wrapper ------------------------------------------------- */
.tech-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 280px;
  padding: 36px 32px;
  text-align: center;
}

/* --- Front (title, visible by default) -------------------------------- */
.tech-card__front {
  transition: transform 0.3s ease-in-out,
              opacity 0.3s ease-in-out;
}

.tech-card:hover .tech-card__front,
.tech-card:focus .tech-card__front,
.tech-card:focus-visible .tech-card__front {
  transform: translateY(100%);
  opacity: 0;
}

/* --- Back (description, hidden by default) --------------------------- */
.tech-card__back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 32px;
  background-color: #282828;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-in-out,
              opacity 0.3s ease-in-out;
}

.tech-card:hover .tech-card__back,
.tech-card:focus .tech-card__back,
.tech-card:focus-visible .tech-card__back {
  transform: translateY(0);
  opacity: 1;
}

.tech-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-white);
}

.tech-card__description {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   9. WHY CHOOSE US SECTION (Milestone 7.1)
   Titre centré + grille 3x2 (6 éléments validés). Style éditorial très
   sobre : pas de cartes marketing, pas d'ombres lourdes — les numéros
   01-06 servent d'ancrage visuel, à l'image de la numérotation déjà
   utilisée dans Human Capital / Technical Services.
   --------------------------------------------------------------------- */
.why-us {
  position: relative;
  background-color: var(--color-white);
  padding: 70px 0;
}

.why-us__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.why-us__title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.2px;
}

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 56px;
}

.why-us__item {
  padding-top: 20px;
  border-top: 2px solid rgba(40, 40, 40, 0.1);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.why-us__item:hover {
  transform: translateY(-4px);
  border-top-color: var(--color-orange);
}

.why-us__number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--color-orange);
  opacity: 0.55;
  margin-bottom: 16px;
  transition: opacity var(--transition-fast);
}

.why-us__item:hover .why-us__number {
  opacity: 0.9;
}

.why-us__item-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-dark);
  margin-bottom: 12px;
  transition: color var(--transition-fast);
}

.why-us__item:hover .why-us__item-title {
  color: var(--color-brown);
}

.why-us__item-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-dark-soft);
}

/* ---------------------------------------------------------------------
   10. PARTNERS SECTION (Milestone 8.1)
   Label + titre centrés, puis carousel infini de logos en CSS pur
   (translation continue, aucune pause sauf hover). Le track contient
   le jeu de logos dupliqué automatiquement en JS (voir script.js) afin
   que la boucle de -50% soit parfaitement continue.
   --------------------------------------------------------------------- */
.partners {
  position: relative;
  background-color: var(--color-white);
  padding: 60px 0;
  overflow: hidden;
}

.partners__inner {
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 0 24px;
  text-align: center;
}

.partners__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 18px;
}

.partners__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.3;
  color: var(--color-dark);
  letter-spacing: -0.2px;
}

/* --- Carousel infini ------------------------------------------------------ */
.partners__carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fondu discret sur les bords pour une entrée/sortie élégante des logos */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 48px;
  animation: partners-scroll 32s linear infinite;
}

/* Pause au survol (desktop uniquement, cf. indication UX) */
@media (hover: hover) {
  .partners__carousel:hover .partners__track {
    animation-play-state: paused;
  }
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Le track contient le jeu de logos dupliqué une fois (voir JS) :
       -50% correspond exactement à la largeur d'un jeu complet,
       ce qui rend la boucle invisible. */
    transform: translateX(-50%);
  }
}

.partners__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

.partners__logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(0%); /* logos conservés en couleur, comme validé */
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.partners__logo:hover img {
  opacity: 1;
  transform: scale(1.04);
}

/* Respect des préférences d'accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce) {
  .partners__track {
    animation: none;
  }
  .reveal,
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tech-card,
  .tech-card:hover,
  .tech-card:hover .tech-card__bg,
  .tech-card:hover .tech-card__front,
  .tech-card:hover .tech-card__back {
    transform: none;
  }
  .hero__cta:hover,
  .contact__submit:hover,
  .contact__social-link:hover {
    transform: none;
  }
  .why-us__item:hover {
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------
   11. CONTACT SECTION (Milestone 9.1)
   Layout 50/50 : informations de contact à gauche (présentation sobre,
   sans cartes), formulaire à droite (champs spacieux, validation HTML
   native). Palette et logique d'animation identiques au reste du site.
   --------------------------------------------------------------------- */
.contact {
  position: relative;
  background-color: #fafafa;
  padding: 70px 0;
}

.contact__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.contact__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(40, 40, 40, 0.7);
  z-index: 1;
}

.contact__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}

/* --- Colonne gauche : informations ---------------------------------------- */
.contact__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 18px;
}

.contact__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.3;
  color: #ffffff;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}

.contact__intro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: #ffffff;
  max-width: 440px;
  margin-bottom: 48px;
}

.contact__block {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 28px;
}

.contact__block:last-child {
  margin-bottom: 0;
}

.contact__block-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  margin-bottom: 8px;
}

.contact__block-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.6;
  color: #ffffff;
  transition: color var(--transition-fast);
}

a.contact__block-value:hover {
  color: var(--color-orange);
}

.contact__socials {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: #ffffff;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.contact__social-link svg {
  width: 18px;
  height: 18px;
}

.contact__social-link:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
  transform: translateY(-2px);
}

/* --- Colonne droite : formulaire ------------------------------------------ */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

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

.contact__field-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #ffffff;
}

.contact__field-input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-dark);
  background-color: var(--color-white);
  border: 1px solid rgba(40, 40, 40, 0.16);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact__field-input::placeholder {
  color: rgba(40, 40, 40, 0.4);
}

.contact__field-input:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.14);
}

.contact__field-textarea {
  resize: vertical;
  min-height: 130px;
  font-family: var(--font-body);
}

.contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--color-white);
  background-color: var(--color-orange);
  padding: 15px 32px;
  border-radius: 50px;
  margin-top: 8px;
  box-shadow: 0 12px 28px rgba(240, 165, 0, 0.24);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background-color var(--transition-fast);
}

.contact__submit::after {
  content: "\2197";
  font-size: 15px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.contact__submit:hover {
  background-color: #d99400;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(240, 165, 0, 0.32);
}

.contact__submit:hover::after {
  transform: translate(2px, -2px);
}

.contact__submit:active {
  transform: translateY(0);
}

.contact__submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

/* Message de confirmation après envoi (géré en JS, aucun backend requis) */
.contact__form-success {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-brown);
  background-color: rgba(240, 165, 0, 0.1);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 8px;
}

.contact__form-success.is-visible {
  display: flex;
}

.contact__form-error {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: #d32f2f;
  background-color: rgba(211, 47, 47, 0.08);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 8px;
}

.contact__form-error.is-visible {
  display: flex;
}

/* ---------------------------------------------------------------------
   12. FOOTER (Milestone 10.1)
   4 colonnes desktop (logo+signature / navigation / expertises /
   contact), séparateur discret, puis copyright. Fond sombre, accents
   orange sobres, hover léger sur les liens uniquement.
   --------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-dark);
  padding: 44px 0 16px;
}

.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 28px;
}

/* --- Colonne 1 : logo + signature ---------------------------------------- */
.site-footer__logo {
  display: inline-block;
  margin-bottom: 20px;
}

.site-footer__logo-img {
  height: 150px;
  width: auto;
}

.site-footer__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 260px;
}

/* --- Colonnes 2-4 : titres + listes --------------------------------------- */
.site-footer__col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--color-white);
  margin-bottom: 22px;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.site-footer__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast);
}

a.site-footer__link:hover {
  color: var(--color-orange);
}

.site-footer__link--static {
  cursor: default;
}

.site-footer__link--static:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* --- Séparateur discret + copyright --------------------------------------- */
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 14px;
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------
   13. RESPONSIVE — TABLET
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header {
    padding: 16px 20px 0;
  }

  .navbar {
    padding: 0 32px;
  }

  .navbar__menu {
    gap: 24px;
  }

  .navbar__link {
    font-size: 14px;
  }

  /* --- Who Are We : colonnes rapprochées, débordement réduit --- */
  .about {
    padding: 55px 0 60px;
  }

  .about__inner {
    gap: 48px;
    padding: 0 32px;
  }

  .about__media {
    margin-bottom: -40px;
  }

  /* --- Human Capital : colonnes rapprochées --- */
  .human-capital {
    padding: 55px 0;
  }

  .human-capital__inner {
    gap: 48px;
    padding: 0 32px;
  }

  /* --- Technical Services : padding réduit, 2 cartes par rangée --- */
  .technical-services {
    padding: 55px 0;
  }

  .technical-services__inner {
    padding: 0 32px;
  }

  .tech-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Why Choose Us : 2 colonnes --- */
  .why-us {
    padding: 55px 0;
  }

  .why-us__inner {
    padding: 0 32px;
  }

  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 44px;
  }

  /* --- Partners : espacement resserré entre logos --- */
  .partners {
    padding: 48px 0;
  }

  .partners__track {
    gap: 32px;
  }

  /* --- Contact : 2 colonnes conservées, espacement réduit --- */
  .contact {
    padding: 55px 0;
  }

  .contact__inner {
    gap: 56px;
    padding: 0 32px;
  }

  /* --- Footer : 4 colonnes conservées --- */
  .site-footer {
    padding: 36px 0 14px;
  }

  .site-footer__inner {
    padding: 0 32px;
  }

  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 24px;
  }
}

/* ---------------------------------------------------------------------
   14. RESPONSIVE — MOBILE / TABLET (menu masqué, burger visible)
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .navbar__nav {
    display: none;
  }

  .navbar__actions .lang-switch {
    display: none;
  }

  .burger {
    display: flex;
  }

  .navbar {
    padding: 0 24px;
  }

  /* --- Hero : texte adapté, CTA facilement accessible --- */
  .hero__subtitle {
    margin: 22px 0 32px;
  }

  .hero__cta {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* --- Who Are We : une seule colonne, image au-dessus, sans débordement --- */
  .about {
    padding: 40px 0 32px;
  }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
  }

  .about__media {
    margin-bottom: 0; /* le débordement premium n'a de sens qu'en 2 colonnes */
  }

  .about__content {
    align-items: flex-start;
  }

  .about__text p {
    max-width: none;
  }

  /* --- Human Capital : intro puis accordéon, pleine largeur --- */
  .human-capital {
    padding: 36px 0 32px;
  }

  .human-capital__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
  }

  .human-capital__text p {
    max-width: none;
  }

  .accordion__header {
    min-height: 56px;
    gap: 16px;
    padding: 18px 2px;
  }

  .accordion__description {
    max-width: none;
  }

  /* --- Technical Services : intro puis cartes empilées --- */
  .technical-services {
    padding: 36px 0 32px;
  }

  .technical-services__inner {
    padding: 0 24px;
  }

  .technical-services__intro {
    margin-bottom: 24px;
  }

  .tech-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tech-card__content,
  .tech-card__back {
    padding: 28px 24px;
  }

  .tech-card__content {
    min-height: 240px;
  }

  /* --- Why Choose Us : 1 colonne --- */
  .why-us {
    padding: 36px 0 32px;
  }

  .why-us__inner {
    padding: 0 24px;
  }

  .why-us__title {
    margin-bottom: 24px;
  }

  .why-us__grid {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  /* --- Partners : logos plus compacts, lisibles sans déborder --- */
  .partners {
    padding: 32px 0;
  }

  .partners__inner {
    margin-bottom: 24px;
  }

  .partners__track {
    gap: 24px;
    animation-duration: 24s;
  }

  .partners__logo {
    height: 54px;
  }

  .partners__logo img {
    max-width: 180px;
  }

  /* --- Contact : 1 colonne, infos au-dessus, formulaire en dessous --- */
  .contact {
    padding: 36px 0 32px;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
  }

  .contact__intro {
    max-width: none;
    margin-bottom: 24px;
  }

  .contact__field-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .contact__submit {
    width: 100%;
    align-self: stretch;
  }

  /* --- Footer : empilement vertical complet --- */
  .site-footer {
    padding: 28px 0 16px;
  }

  .site-footer__inner {
    padding: 0 24px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding-bottom: 20px;
  }

  .site-footer__col--brand {
    grid-column: auto;
  }

  .site-footer__tagline {
    max-width: none;
  }
}

@media (max-width: 480px) {
  :root {
    --navbar-height: 76px;
  }

  .site-header {
    padding: 12px 14px 0;
  }

  .navbar {
    padding: 0 20px;
    border-radius: 16px;
  }

  .logo-img {
    height: 32px;
  }

  .mobile-menu {
    width: 100%;
    padding: 40px 32px;
  }

  .mobile-menu__link {
    font-size: 20px;
  }

  .hero__content,
  .hero {
    overflow-x: hidden;
  }
}