/* single-agence : ex-bloc <style> de single-agence-blueprint.php, source de vérité depuis le 09/09/2026 (plan poids-html-blueprint-light, lot 2). Tokens : var(--color-*) uniquement. */
/* Accent pole « agencement » : or signature -> ambre profond (dégradé premium on-brand,
   en remplacement de l'indigo/violet hors palette). --c-pole3-ink = bronze assombri
   pour le chiffre (contraste AA sur fond blanc). */
:root{
  --c-pole3-a: var(--color-gold);
  --c-pole3-b: var(--color-orange-dark);
  --c-pole3-ink: #8a5a00;
}
/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE AGENCE BLUEPRINT v4.0 - Awwwards > 90
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────────────────────────────────────────── */

.hero-agence {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
/* Hero mobile/tablette : le mode « portrait plein ecran, texte sur image » est
   abandonne au profit d'un bandeau photo propre + texte dessous (voir le bloc
   <=768px dans la section RESPONSIVE). On retire ici les regles portrait
   (specificite 0,3,0) afin qu'elles ne surchargent pas la nouvelle mise en page
   mobile. La variante has-mobile-portrait / --hero-mobile-minh devient un no-op
   sur petits ecrans (le PHP peut encore l'emettre, elle est inerte en CSS). */

.hero-agence .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-agence .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.hero-agence .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top right,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.88) 15%,
    rgba(255, 255, 255, 0.65) 32%,
    rgba(255, 255, 255, 0.35) 46%,
    rgba(255, 255, 255, 0.12) 56%,
    transparent 65%
  );
  pointer-events: none;
}

.hero-agence::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 65%;
  height: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  backdrop-filter: blur(0.3px);
  z-index: 1;
  pointer-events: none;
  mask-image: linear-gradient(to top right, black 15%, transparent 55%);
}

/* Hero « agence en cours d'implantation » (aucune image) : fond SIGNATURE
   marine directionnel + halo orange chaud (accent) + touche mint, au lieu d'un
   aplat bleu. L'overlay blanc (pensé pour éclaircir une photo) est masqué : il
   laverait le titre blanc. */
.hero-agence.hero--implantation {
  --c-marine-hi: #123362; /* marine éclairci (haut du dégradé), one-off hero implantation */
  --c-marine-lo: #081a3a; /* marine profond (bas du dégradé) */
  background:
    radial-gradient(68% 55% at 82% 10%, rgba(242, 126, 51, 0.22) 0%, rgba(242, 126, 51, 0) 60%),
    radial-gradient(85% 65% at 12% 100%, rgba(169, 249, 195, 0.09) 0%, rgba(169, 249, 195, 0) 55%),
    linear-gradient(158deg, var(--c-marine-hi) 0%, var(--color-bleu, #0d2857) 50%, var(--c-marine-lo) 100%);
}
.hero-agence.hero--implantation .hero-overlay {
  display: none;
}
.hero-agence.hero--implantation::after {
  width: 46%;
  height: 58%;
  background: linear-gradient(135deg, rgba(242, 126, 51, 0.12) 0%, transparent 55%);
  backdrop-filter: none;
  mask-image: none;
}

.hero-agence .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  padding: 0 60px 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Wrappers hero-lead / hero-body : groupements sémantiques neutres sur desktop
   (display:contents -> eyebrow, titre, lede et KPIs restent les flex items de
   .hero-content, rendu desktop strictement identique). En mobile (<=768px) ils
   reçoivent un positionnement dédié : hero-lead = overlay bas de la photo,
   hero-body = bloc sous la photo. Cf. section RESPONSIVE <=768px. */
.hero-agence .hero-lead,
.hero-agence .hero-body { display: contents; }

.hero-agence .hero-title {
  font-family: var(--font-heading);
  font-size: clamp(42px, 7vw, 100px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}


.hero-agence .hero-subtitle-wrapper {
  display: flex;
  align-items: stretch;
  gap: 24px;
  max-width: 700px;
}

.hero-agence .hero-accent-bar {
  width: 3px;
  background: linear-gradient(to bottom, var(--color-orange, #F27E33), var(--color-mint, #A9F9C3));
  border-radius: 2px;
  flex-shrink: 0;
}

.hero-agence .hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.hero-agence .hero-stats {
  display: flex;
  gap: 48px;
  padding-top: 20px;
}

.hero-agence .hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.hero-agence .hero-stat::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.25);
}

.hero-agence .hero-stat:last-child::after { display: none; }

.hero-agence .hero-stat-value {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1;
  color: var(--color-white);
}

.hero-agence .hero-stat-value .suffix {
  font-size: 0.6em;
  color: var(--color-orange, #F27E33);
}

.hero-agence .hero-stat-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.72);
}

/* Scroll Indicator */
.hero-agence .scroll-indicator {
  position: absolute;
  right: 60px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
}

.hero-agence .scroll-indicator-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
}

.hero-agence .scroll-indicator-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-orange, #F27E33), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.6); opacity: 0.5; }
}

/* Contact Bar */
.hero-agence .hero-contact-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 60px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-agence .hero-contact-inner {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.hero-agence .hero-contact-items {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* hero-contact-actions : enveloppe neutre sur desktop (display:contents -> tel et
   email restent des items plats de la barre de contact, rendu desktop identique).
   En mobile (<=768px) elle devient une rangée de boutons-icônes (cf. RESPONSIVE). */
.hero-agence .hero-contact-actions { display: contents; }
/* Bouton rdv = mobile uniquement (desktop garde le CTA texte « Prendre rendez-vous »).
   Sélecteur à 3 classes pour battre `.hero-contact-item { display: flex }` (défini
   plus bas, même spécificité) qui, sinon, réaffiche l'item et duplique le RDV desktop. */
.hero-agence .hero-contact-item.hero-contact-action--rdv { display: none; }

.hero-agence .hero-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.3s ease;
}

.hero-agence .hero-contact-item:hover { color: var(--color-orange, #F27E33); }

.hero-agence .hero-contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero-agence .hero-contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--color-white);
  color: var(--color-bleu, #0d2857);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.hero-agence .hero-contact-cta:hover {
  background: var(--color-orange, #F27E33);
  transform: translateX(4px);
}

.hero-agence .hero-contact-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.hero-agence .hero-contact-cta:hover svg { transform: translateX(4px); }

/* Dark mode contact bar */
.hero-agence.hero--contact-dark .hero-contact-bar {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.1);
}

.hero-agence.hero--contact-dark .hero-contact-item { color: var(--color-white); }
.hero-agence.hero--contact-dark .hero-contact-item:hover { color: var(--color-orange, #F27E33); }
.hero-agence.hero--contact-dark .hero-contact-cta { background: var(--color-white); color: var(--color-bleu, #0d2857); }
.hero-agence.hero--contact-dark .hero-contact-cta:hover { background: var(--color-orange, #F27E33); color: var(--color-white); }

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 01 — ABOUT / NOTRE AGENCE (avec Manifeste)
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 01 — ABOUT (v4.0 - Text first, Image second)
   Conforme KYTOM Template Development Guide v1.2.0
   ═══════════════════════════════════════════════════════════════════════════ */

.about-section {
  position: relative;
  padding: clamp(80px, 10vh, 120px) 0;
  background: var(--color-white, #FFFFFF);
  overflow-x: clip;
  overflow-y: visible;
}

.about-section .section-number {
  position: absolute;
  top: 60px;
  left: -20px;
  font-family: var(--font-heading);
  font-size: clamp(120px, 15vw, 220px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-bleu, #0d2857);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.about-section .about-container {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
  position: relative;
  z-index: 1;
}

.about-section .about-header { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT — Text section
   ═══════════════════════════════════════════════════════════════════════════ */

.about-section .about-content {
  display: flex;
  flex-direction: column;
  max-width: var(--container-narrow, 900px);
}

/* Eyebrow */
.about-section .about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.about-section .about-eyebrow-line {
  width: 40px;
  height: 2px;
  background: var(--color-orange, #F27E33);
}

.about-section .about-eyebrow-text {
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
}

/* Title */
.about-section .about-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl, clamp(32px, 5vw, 48px));
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-bleu, #0d2857);
  margin: 0 0 24px 0;
}

.about-section .about-title strong {
  font-weight: 700;
}

/* Lead */
.about-section .about-lead {
  font-family: var(--font-heading);
  font-size: var(--text-lg, clamp(18px, 1.5vw, 20px));
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-bleu, #0d2857);
  margin-bottom: 0;
}

/* Text */
.about-section .about-text {
  font-size: var(--text-base, 16px);
  line-height: 1.75;
  color: var(--color-text-muted, #666666);
}

.about-section .about-text p {
  margin-bottom: 16px;
}
.about-section .about-text p:last-child { margin-bottom: 0; }

/* Quote */
.about-section .about-quote {
  position: relative;
  padding-left: 24px;
  margin: 24px 0 0 0;
  border-left: 3px solid var(--color-orange, #F27E33);
  background: transparent;
  border-radius: 0;
}

.about-section .about-quote::before { display: none; }

.about-section .about-quote-text {
  font-family: var(--font-heading);
  font-size: var(--text-base, 16px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  color: var(--color-bleu, #0d2857);
  margin: 0;
}

.about-section .about-quote-author {
  display: block;
  margin-top: 12px;
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  color: var(--color-orange, #F27E33);
  font-style: normal;
}

.about-section .about-quote-author::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE — Full-width with 3:2 ratio
   ═══════════════════════════════════════════════════════════════════════════ */

.about-section .about-image-wrapper {
  position: relative;
  width: 100%;
}

.about-section .about-image-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.about-section .about-image-frame { display: none; }

.about-section .about-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* Badge — Premium glassmorphism (Awwwards >90) */
.about-section .about-badge {
  position: absolute;
  left: clamp(32px, 4vw, 80px);
  bottom: clamp(32px, 4vw, 80px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: clamp(20px, 2.5vw, 32px) clamp(28px, 3vw, 44px);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 18, 112, 0.12),
              0 4px 16px rgba(0, 18, 112, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform 0.3s ease;
}

.about-section .about-badge:hover {
  transform: translateY(-2px);
}

.about-section .about-badge-value {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-bleu, #0d2857);
}

.about-section .about-badge-value span {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--color-orange, #F27E33);
  margin-left: 3px;
}

.about-section .about-badge-label {
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666666);
  white-space: nowrap;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT v5.0 — Layout vertical avec image centrée pleine largeur
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container vertical centré */
.about-section .about-container--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 6vw, 80px);
}

/* Contenu texte centré */
.about-section .about-content--centered {
  text-align: center;
  max-width: var(--container-narrow, 900px);
  align-items: center;
}

.about-section .about-content--centered .about-eyebrow {
  justify-content: center;
}

.about-section .about-content--centered .about-quote {
  border-left: none;
  border-top: 3px solid var(--color-orange, #F27E33);
  padding-left: 0;
  padding-top: 24px;
  text-align: center;
}

/* Image pleine largeur — 90% VIEWPORT (Awwwards >90) */
.about-section .about-image-wrapper--fullwidth {
  width: 90vw;
  max-width: 1800px;
  margin-top: clamp(60px, 8vh, 100px);
  margin-bottom: 0;
  margin-left: calc(5vw - (100vw - 100%) / 2);
  margin-right: calc(5vw - (100vw - 100%) / 2);
  position: relative;
}

.about-section .about-image-wrapper--fullwidth .about-image-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 2vw, 24px);
  box-shadow: 0 20px 60px rgba(0, 18, 112, 0.08), 0 8px 24px rgba(0, 18, 112, 0.04);
}

.about-section .about-image-wrapper--fullwidth .about-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 70vh;
  max-height: 85vh;
  object-fit: cover;
  object-position: center 40%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🆕 PÔLES MÉTIER — Awwwards v5.1.0 (Design léger avec variations de couleurs)
   ═══════════════════════════════════════════════════════════════════════════ */

.about-section .about-features--bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  width: 100%;
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  padding-top: 0;
  border-top: none;
}

.about-section .about-features--bottom .about-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.2vw, 30px);
  background: var(--color-white);
  border: 1px solid rgba(13, 40, 87, 0.08);
  border-radius: clamp(12px, 1.2vw, 16px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
}

.about-section .about-features--bottom .about-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 40, 87, 0.12);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 🎨 Variations de couleurs par pôle */
.about-section .about-features--bottom .about-feature[data-pole-index="0"] .about-feature-icon {
  background: linear-gradient(135deg, var(--color-bleu, #0d2857) 0%, var(--color-bleu-dark) 100%);
}

.about-section .about-features--bottom .about-feature[data-pole-index="1"] .about-feature-icon {
  background: linear-gradient(135deg, var(--color-orange, #F27E33) 0%, var(--color-orange-light) 100%);
}

.about-section .about-features--bottom .about-feature[data-pole-index="2"] .about-feature-icon {
  background: linear-gradient(135deg, var(--color-mint) 0%, var(--color-success-light) 100%);
}

.about-section .about-features--bottom .about-feature[data-pole-index="3"] .about-feature-icon {
  background: linear-gradient(135deg, var(--c-pole3-a) 0%, var(--c-pole3-b) 100%);
}

/* Icône */
.about-section .about-features--bottom .about-feature-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 5.2vw, 68px);
  height: clamp(56px, 5.2vw, 68px);
  border-radius: clamp(14px, 1.3vw, 18px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.about-section .about-features--bottom .about-feature-icon svg {
  width: clamp(24px, 2.2vw, 30px);
  height: clamp(24px, 2.2vw, 30px);
  color: var(--color-white, #FFFFFF);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-section .about-features--bottom .about-feature:hover .about-feature-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.about-section .about-features--bottom .about-feature:hover .about-feature-icon svg {
  transform: scale(1.08);
}

/* Contenu */
.about-section .about-features--bottom .about-feature-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  text-align: center;
  z-index: 2;
  transition: all 0.3s ease;
}

/* Compteur — Plus petit et léger */
.about-section .about-features--bottom .about-feature-count {
  margin-bottom: 2px;
}

.about-section .about-features--bottom .about-feature-count .count-value {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(36px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-bleu, #0d2857);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

/* Variations de couleurs pour les chiffres */
.about-section .about-features--bottom .about-feature[data-pole-index="0"] .count-value {
  color: var(--color-bleu, #0d2857);
}

.about-section .about-features--bottom .about-feature[data-pole-index="1"] .count-value {
  color: var(--color-orange, #F27E33);
}

.about-section .about-features--bottom .about-feature[data-pole-index="2"] .count-value {
  color: var(--color-success-light);
}

.about-section .about-features--bottom .about-feature[data-pole-index="3"] .count-value {
  color: var(--c-pole3-ink);
}

.about-section .about-features--bottom .about-feature:hover .count-value {
  transform: scale(1.05);
}

/* Titre métier */
.about-section .about-features--bottom .about-feature-title {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-bleu, #0d2857);
  margin: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.about-section .about-features--bottom .about-feature:hover .about-feature-title {
  transform: translateY(-1px);
}

/* Description */
.about-section .about-features--bottom .about-feature-description {
  font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
  font-size: clamp(13px, 1.12vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(13, 40, 87, 0.58);
  margin: 0;
  transition: all 0.3s ease;
  max-width: 200px;
}

.about-section .about-features--bottom .about-feature:hover .about-feature-description {
  color: rgba(13, 40, 87, 0.7);
}

/* ═══ Accessibilité — neutralisation du mouvement (pôles métier) ═══ */
@media (prefers-reduced-motion: reduce) {
  .about-section .about-features--bottom .about-feature,
  .about-section .about-features--bottom .about-feature-icon,
  .about-section .about-features--bottom .about-feature-icon svg,
  .about-section .about-features--bottom .count-value,
  .about-section .about-features--bottom .about-feature-title,
  .about-section .about-features--bottom .about-feature-description {
    transition: none;
  }

  .about-section .about-features--bottom .about-feature:hover,
  .about-section .about-features--bottom .about-feature:hover .about-feature-icon,
  .about-section .about-features--bottom .about-feature:hover .about-feature-icon svg,
  .about-section .about-features--bottom .about-feature:hover .count-value,
  .about-section .about-features--bottom .about-feature:hover .about-feature-title {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLES MANIFESTE INTÉGRÉ — Section About enrichie
   ═══════════════════════════════════════════════════════════════════════════ */

.about-section .about-title--manifeste {
  font-size: clamp(40px, 5.5vw, 78px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
}

.about-section .about-manifeste-content {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.8;
  color: var(--color-gray-700);
  max-width: 920px;
  margin: 0 auto;
}

.about-section .about-manifeste-content p {
  margin-bottom: 1.5em;
}

.about-section .about-manifeste-content p:last-child {
  margin-bottom: 0;
}

.about-section .about-manifeste-content--secondary {
  opacity: 0.92;
}

.about-section .about-quote--manifeste {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(32px, 4vh, 48px);
  background: linear-gradient(135deg, rgba(242, 126, 51, 0.03) 0%, rgba(169, 249, 195, 0.05) 100%);
  border-left: 4px solid var(--color-orange, #F27E33);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 12px rgba(0, 18, 112, 0.03);
}

.about-section .about-quote--manifeste .about-quote-text {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🆕 RESPONSIVE — Pôles Métier (Design léger)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .about-section .about-features--bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 1.8vw, 20px);
  }

  .about-section .about-features--bottom .about-feature {
    padding: clamp(24px, 2.8vw, 36px) clamp(18px, 2vw, 26px);
  }

  .about-section .about-features--bottom .about-feature-count .count-value {
    font-size: clamp(32px, 4.5vw, 42px);
  }

  .about-section .about-features--bottom .about-feature-title {
    font-size: clamp(15px, 1.6vw, 18px);
  }

  .about-section .about-image-wrapper--fullwidth .about-image {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .about-section .about-features--bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-section .about-features--bottom .about-feature {
    padding: 24px 18px;
  }

  .about-section .about-features--bottom .about-feature:hover {
    transform: translateY(-3px);
  }

  .about-section .about-features--bottom .about-feature-icon {
    width: 54px;
    height: 54px;
  }

  .about-section .about-features--bottom .about-feature-icon svg {
    width: 24px;
    height: 24px;
  }

  .about-section .about-features--bottom .about-feature-count .count-value {
    font-size: 38px;
  }

  .about-section .about-features--bottom .about-feature-title {
    font-size: 16px;
    white-space: normal;
  }

  .about-section .about-features--bottom .about-feature-description {
    font-size: 13px;
    max-width: 100%;
  }

  .about-section .about-image-wrapper--fullwidth .about-image {
    aspect-ratio: 4 / 3;
  }

  .about-section .about-image-wrapper--fullwidth .about-image-container {
    border-radius: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 02 — RÉSEAU
   ───────────────────────────────────────────────────────────────────────────── */

.network-section {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 60px;
  background: var(--color-bleu, #0d2857);
  overflow: hidden;
}

.network-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(242, 126, 51, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(169, 249, 195, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.network-section .section-number {
  position: absolute;
  top: 40px;
  right: -20px;
  font-family: var(--font-heading);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-white);
  opacity: 0.03;
  pointer-events: none;
}

.network-section .network-container {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.network-section .network-header {
  text-align: center;
  margin-bottom: 64px;
}

.network-section .network-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.network-section .network-eyebrow-line {
  width: 48px;
  height: 2px;
  background: var(--color-orange, #F27E33);
}

.network-section .network-eyebrow-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
}

.network-section .network-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-white);
  max-width: 700px;
  margin: 0 auto;
}

.network-section .network-title strong { font-weight: 700; }

/* Stats bandeau */
.network-section .network-stats-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 64px;
  padding: 0 20px;
}

.network-section .network-stat {
  text-align: center;
  padding: 0 clamp(24px, 4vw, 48px);
  position: relative;
}

.network-section .network-stat::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
}

.network-section .network-stat:last-child::after { display: none; }

.network-section .network-stat-value {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 300;
  line-height: 1;
  color: var(--color-white);
}

.network-section .network-stat-value .suffix {
  font-size: 0.5em;
  color: var(--color-orange, #F27E33);
}

.network-section .network-stat-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

/* Carte */
.network-section .network-map-wrapper {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.network-section .network-map-wrapper .kytom-map {
  max-width: 770px;
  width: 110%;
}

/* Tagline */
.network-section .network-tagline {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 48px auto 0;
}

.network-section .network-tagline strong {
  color: var(--color-white);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 03 — ÉQUIPE
   ───────────────────────────────────────────────────────────────────────────── */

.team-section {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 60px;
  background: var(--color-gray-50);
  overflow: hidden;
}

.team-section .section-number {
  position: absolute;
  top: 40px;
  left: -20px;
  font-family: var(--font-heading);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-bleu, #0d2857);
  opacity: 0.02;
  pointer-events: none;
}

.team-section .team-container {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.team-section .team-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

/* Contenu gauche */
.team-section .team-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-section .team-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.team-section .team-eyebrow-line {
  width: 48px;
  height: 2px;
  background: var(--color-orange, #F27E33);
}

.team-section .team-eyebrow-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
}

.team-section .team-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-bleu, #0d2857);
  margin: 0;
}

.team-section .team-title strong { font-weight: 700; }

.team-section .team-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-gray-700);
  max-width: 450px;
}

/* Compteur total */
.team-section .team-total {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--color-bleu, #0d2857);
  padding: 20px 28px;
  margin-top: 8px;
}

.team-section .team-total-number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-white);
}

.team-section .team-total-label {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

.team-section .team-total-label strong {
  display: block;
  color: var(--color-orange, #F27E33);
  font-weight: 600;
}

/* Citation */
.team-section .team-quote {
  position: relative;
  padding: 20px 24px;
  background: var(--color-white);
  border-left: 3px solid var(--color-orange, #F27E33);
  margin-top: 8px;
}

.team-section .team-quote-text {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-bleu, #0d2857);
  margin: 0;
}

/* Grille métiers */
.team-section .team-roles-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.team-section .team-roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.team-section .team-role-card {
  background: var(--color-white);
  padding: 24px;
  border: 1px solid rgba(0, 18, 112, 0.06);
  transition: all 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  position: relative;
}

.team-section .team-role-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--color-orange, #F27E33);
  transition: width 0.3s ease;
}

.team-section .team-role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 18, 112, 0.1);
}

.team-section .team-role-card:hover::before { width: 3px; }

.team-section .team-role-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.team-section .team-role-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 18, 112, 0.05);
  border-radius: 8px;
  color: var(--color-bleu, #0d2857);
}

.team-section .team-role-icon svg {
  width: 20px;
  height: 20px;
}

.team-section .team-role-count {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 300;
  color: var(--color-orange, #F27E33);
}

.team-section .team-role-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-bleu, #0d2857);
  margin-bottom: 8px;
}

.team-section .team-role-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-600);
}

/* Valeurs */
.team-section .team-values {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 18, 112, 0.08);
}

.team-section .team-value {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(169, 249, 195, 0.2);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success-dark);
}

.team-section .team-value-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-section .team-value-icon svg {
  width: 16px;
  height: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 04 — ZONE D’INTERVENTION
   ───────────────────────────────────────────────────────────────────────────── */

.zone-section {
  position: relative;
  padding: clamp(100px, 14vh, 160px) 60px;
  background: var(--color-bg-alt, #F8F9FC);
  overflow: hidden;
}

/* Numéro de section décoratif (watermark), aligné sur about/portfolio/reviews */
.zone-section .section-number {
  position: absolute;
  top: 40px;
  right: -20px;
  font-family: var(--font-heading);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-bleu, #0d2857);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.zone-section .zone-container { position: relative; z-index: 1; }

.zone-section .zone-container {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.zone-section .zone-header {
  text-align: center;
  margin-bottom: 64px;
}

.zone-section .zone-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
  margin-bottom: 20px;
}

.zone-section .zone-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-bleu, #0d2857);
  max-width: 500px;
  margin: 0 auto 24px;
}

.zone-section .zone-title strong { font-weight: 700; }

.zone-section .zone-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted, #555555);
  max-width: 550px;
  margin: 0 auto;
}

.zone-section .zone-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: center;
}

/* Carte */
.zone-section .zone-map-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  padding: 40px;
  position: relative;
}

.zone-section .zone-map-wrapper .kytom-map {
  max-width: 500px;
  width: 100%;
  filter: drop-shadow(0 4px 20px color-mix(in srgb, var(--color-bleu) 8%, transparent));
  transition: filter 0.4s var(--ease-out-expo);
  will-change: filter;
}

.zone-section .zone-map-wrapper .kytom-map:hover {
  filter: drop-shadow(0 8px 30px color-mix(in srgb, var(--color-bleu) 12%, transparent));
}

/* Styles pour l’animation de dessin de la carte */
.zone-section .map-base path {
  transition: fill 0.3s var(--ease-out-expo), stroke 0.3s var(--ease-out-expo);
  will-change: fill, stroke;
}

.zone-section .map-base path:hover {
  fill: color-mix(in srgb, var(--color-orange) 10%, transparent);
  stroke: var(--color-orange);
}

/* Séparateur */
.zone-section .zone-separator {
  width: 1px;
  height: 300px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Info */
.zone-section .zone-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.zone-section .zone-departments-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
  margin-bottom: 16px;
}

.zone-section .zone-departments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zone-section .zone-dept {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-white, #FFFFFF);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  border-radius: 4px;
  border: 1px solid rgba(0, 18, 112, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 18, 112, 0.04);
}

.zone-section .zone-dept:hover {
  background: var(--color-bleu, #0d2857);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-orange, #F27E33);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 18, 112, 0.12);
}

.zone-section .zone-dept:hover .zone-dept-code {
  color: var(--color-orange, #F27E33);
}

.zone-section .zone-dept-code {
  font-weight: 700;
  color: var(--color-bleu, #0d2857);
}

.zone-section .zone-stats {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 18, 112, 0.1);
}

.zone-section .zone-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zone-section .zone-stat-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 300;
  color: var(--color-bleu, #0d2857);
}

.zone-section .zone-stat-value .suffix {
  font-size: 0.5em;
  color: var(--color-orange, #F27E33);
}

.zone-section .zone-stat-label {
  font-size: 12px;
  color: var(--color-text-muted, #666666);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 05 — PORTFOLIO
   ───────────────────────────────────────────────────────────────────────────── */

.portfolio-section {
  padding: clamp(100px, 14vh, 160px) 60px;
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

.portfolio-section .section-number {
  position: absolute;
  top: 40px;
  left: -20px;
  font-family: var(--font-heading);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-bleu, #0d2857);
  opacity: 0.03;
  pointer-events: none;
}

.portfolio-section .portfolio-container {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.portfolio-section .portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 32px;
}

.portfolio-section .portfolio-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.portfolio-section .portfolio-eyebrow-line {
  width: 48px;
  height: 2px;
  background: var(--color-orange, #F27E33);
}

.portfolio-section .portfolio-eyebrow-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
}

.portfolio-section .portfolio-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-bleu, #0d2857);
}

.portfolio-section .portfolio-title strong { font-weight: 700; }

.portfolio-section .portfolio-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--color-bleu, #0d2857);
  border: none;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  flex-shrink: 0;
}

.portfolio-section .portfolio-cta:hover {
  background: var(--color-orange, #F27E33);
  transform: translateY(-2px);
}

.portfolio-section .portfolio-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.portfolio-section .portfolio-cta:hover svg { transform: translateX(4px); }

/* Grid */
.portfolio-section .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.portfolio-section .portfolio-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-gray-100);
  text-decoration: none;
}

.portfolio-section .portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.portfolio-section .portfolio-item:hover .portfolio-image {
  transform: scale(1.08);
}

.portfolio-section .portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.portfolio-section .portfolio-item:hover .portfolio-overlay { opacity: 1; }

.portfolio-section .portfolio-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.portfolio-section .portfolio-item:hover .portfolio-content {
  transform: translateY(0);
  opacity: 1;
}

.portfolio-section .portfolio-client {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}

.portfolio-section .portfolio-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio-section .portfolio-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.portfolio-section .portfolio-meta svg {
  width: 14px;
  height: 14px;
}

.portfolio-section .portfolio-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-bleu, #0d2857);
  opacity: 0;
  transform: translate(10px, -10px);
  transition: all 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.portfolio-section .portfolio-item:hover .portfolio-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.portfolio-section .portfolio-arrow svg {
  width: 18px;
  height: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 06 — CARRIÈRES
   ───────────────────────────────────────────────────────────────────────────── */

.careers-section {
  padding: clamp(100px, 14vh, 160px) 60px;
  background: var(--color-bg-alt, #F8F9FC);
  position: relative;
  overflow: hidden;
}

/* Numéro de section décoratif (watermark), aligné sur about/portfolio/reviews */
.careers-section .section-number {
  position: absolute;
  top: 40px;
  left: -20px;
  font-family: var(--font-heading);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 800;
  line-height: 0.8;
  color: var(--color-bleu, #0d2857);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.careers-section .careers-container { position: relative; z-index: 1; }

.careers-section .careers-container {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Contenu */
.careers-section .careers-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.careers-section .careers-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.careers-section .careers-eyebrow-line {
  width: 48px;
  height: 2px;
  background: var(--color-orange, #F27E33);
}

.careers-section .careers-eyebrow-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-orange, #F27E33);
}

.careers-section .careers-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-bleu, #0d2857);
  margin: 0;
}

.careers-section .careers-title strong { font-weight: 700; }

.careers-section .careers-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted, #555555);
  margin-bottom: 40px;
  max-width: 520px;
}

.careers-section .careers-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}

.careers-section .careers-perk {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text, #1a1a1a);
  font-size: 14px;
  font-weight: 500;
}

.careers-section .careers-perk-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white, #FFFFFF);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 18, 112, 0.06);
}

.careers-section .careers-perk-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-orange, #F27E33);
}

.careers-section .careers-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--color-bleu, #0d2857);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.4s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.careers-section .careers-cta:hover {
  background: var(--color-orange, #F27E33);
  transform: translateX(4px);
}

.careers-section .careers-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.careers-section .careers-cta:hover svg { transform: translateX(4px); }

/* Quote */
.careers-section .careers-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.careers-section .careers-quote {
  position: relative;
  padding: 40px;
  background: var(--color-white, #FFFFFF);
  border-left: 3px solid var(--color-orange, #F27E33);
  box-shadow: 0 4px 24px rgba(0, 18, 112, 0.04);
}

.careers-section .careers-quote blockquote {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-bleu, #0d2857);
  margin: 0 0 16px 0;
}

.careers-section .careers-quote cite {
  font-size: 14px;
  font-style: normal;
  color: var(--color-text-muted, #666666);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 05 — TÉMOIGNAGES
   Version: 2.0.0 - Awwwards > 90 - Layout asymétrique premium
   ───────────────────────────────────────────────────────────────────────────── */

.reviews-section {
  position: relative;
  padding: clamp(120px, 16vh, 200px) 0;
  background: var(--color-white, #FFFFFF);
  overflow: hidden;
}

/* Ligne décorative subtile */
.reviews-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-grid-line, rgba(0, 18, 112, 0.06)), transparent);
}

/* Numéro de section en filigrane */
.reviews-section .section-number {
  position: absolute;
  top: 60px;
  right: -40px;
  font-family: var(--font-heading);
  font-size: clamp(180px, 22vw, 350px);
  font-weight: var(--font-extrabold, 800);
  line-height: 0.7;
  color: var(--color-bleu);
  opacity: 0.015;
  pointer-events: none;
  letter-spacing: -0.05em;
}

.reviews-section .reviews-container {
  max-width: var(--container-wide, 1400px);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER - Alignement gauche pour plus d’impact
   ───────────────────────────────────────────────────────────────────────────── */

.reviews-section .reviews-header {
  margin-bottom: clamp(60px, 8vh, 80px);
  max-width: 560px;
}

.reviews-section .reviews-eyebrow {
  font-size: 11px;
  font-weight: var(--font-semibold, 600);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.reviews-section .reviews-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--color-orange);
}

.reviews-section .reviews-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: var(--font-light, 300);
  line-height: 1.1;
  color: var(--color-bleu);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.reviews-section .reviews-title strong { 
  font-weight: var(--font-bold, 700);
  display: block;
}

.reviews-section .reviews-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   GRID - Layout asymétrique premium
   Carte principale (featured) + 2 cartes secondaires
   ───────────────────────────────────────────────────────────────────────────── */

.reviews-section .reviews-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(20px, 2.5vw, 32px);
}

/* Première carte - Featured (grande, à gauche) */
.reviews-section .review-card:first-child {
  grid-row: 1 / 3;
  padding: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--color-orange);
}

.reviews-section .review-card:first-child .review-text {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.8;
  flex: 1;
}

/* Cartes (style uniforme) */
.reviews-section .review-card {
  background: var(--color-white);
  border: 1px solid rgba(0, 18, 112, 0.06);
  border-radius: 0;
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  transition: transform 0.5s var(--ease-out-expo), 
              box-shadow 0.5s var(--ease-out-expo),
              border-color 0.5s var(--ease-out-expo);
}

.reviews-section .review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 18, 112, 0.08);
  border-color: rgba(0, 18, 112, 0.12);
}

.reviews-section .review-card:first-child:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(0, 18, 112, 0.12);
}

/* Guillemet décoratif - Plus subtil et élégant */
.reviews-section .review-card::before {
  content: '"';
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: clamp(72px, 7vw, 100px);
  font-weight: 400;
  line-height: 0.6;
  color: var(--color-bleu);
  opacity: 0.06;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD CONTENT
   ───────────────────────────────────────────────────────────────────────────── */

.reviews-section .review-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.reviews-section .review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-bleu) 0%, var(--color-bleu-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--font-semibold, 600);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(0, 18, 112, 0.08);
}

.reviews-section .review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews-section .review-author-info {
  flex: 1;
  min-width: 0;
}

.reviews-section .review-author {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--font-semibold, 600);
  color: var(--color-bleu);
  margin: 0 0 6px 0;
}

.reviews-section .review-stars {
  display: flex;
  gap: 3px;
}

.reviews-section .review-stars svg {
  width: 14px;
  height: 14px;
  fill: var(--color-warning);
}

/* Texte du témoignage - SANS TRONCATURE */
.reviews-section .review-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
  font-style: italic;
}

/* Avis traduit : original repliable, discret */
.reviews-section .review-orig {
  margin-top: 12px;
}
.reviews-section .review-orig > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-gray-text, #666);
  letter-spacing: 0.02em;
}
.reviews-section .review-orig > summary::-webkit-details-marker {
  display: none;
}
.reviews-section .review-orig__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-gray-text, #666);
  font-style: italic;
}

/* Date */
.reviews-section .review-date {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 18, 112, 0.06);
  font-size: 12px;
  font-weight: var(--font-medium, 500);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS REVEAL
   ───────────────────────────────────────────────────────────────────────────── */

.reviews-section .reviews-header {
  opacity: 0;
  transform: translateY(40px);
}

.reviews-section .reviews-grid {
  opacity: 0;
  transform: translateY(30px);
}

.reviews-section.is-visible .reviews-header {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.reviews-section.is-visible .reviews-grid {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease-out-expo) 0.15s, transform 0.8s var(--ease-out-expo) 0.15s;
}

/* Cards stagger animation */
.reviews-section.is-visible .review-card {
  opacity: 0;
  transform: translateY(40px);
  animation: reviewCardReveal 0.7s var(--ease-out-expo) forwards;
}

.reviews-section.is-visible .review-card:nth-child(1) { animation-delay: 0.2s; }
.reviews-section.is-visible .review-card:nth-child(2) { animation-delay: 0.35s; }
.reviews-section.is-visible .review-card:nth-child(3) { animation-delay: 0.5s; }

@keyframes reviewCardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .reviews-section .reviews-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  
  .reviews-section .review-card:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .reviews-section {
    padding: clamp(80px, 12vh, 120px) 0;
  }
  
  .reviews-section .reviews-header {
    margin-bottom: 48px;
  }
  
  .reviews-section .reviews-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .reviews-section .review-card {
    padding: 28px;
  }
  
  .reviews-section .review-card::before {
    font-size: 60px;
    top: 20px;
    right: 20px;
  }
}

.reviews-section.is-visible .review-card:nth-child(1) { animation-delay: 0.3s; }
.reviews-section.is-visible .review-card:nth-child(2) { animation-delay: 0.4s; }
.reviews-section.is-visible .review-card:nth-child(3) { animation-delay: 0.5s; }

@keyframes reviewCardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .team-section .team-layout { grid-template-columns: 1fr; gap: 60px; }
  .team-section .team-roles-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-section .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .careers-section .careers-container { grid-template-columns: 1fr; gap: 60px; }
  .careers-section .careers-visual { justify-content: flex-start; }
  .reviews-section .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .hero-agence .hero-content { padding: 0 32px 90px; }
  .hero-agence .scroll-indicator { right: 32px; }
  .hero-agence .hero-contact-bar { padding: 0 32px; }
  .hero-agence .hero-contact-items { gap: 24px; }
  
  .about-section .about-container,
  .network-section,
  .team-section,
  .zone-section,
  .portfolio-section,
  .careers-section,
  .reviews-section { padding-left: 32px; padding-right: 32px; }
  
  /* About section — Tablet adjustments */
  .about-section .about-container { gap: 40px; }
  .about-section .about-content { max-width: 100%; }
  
  .network-section .network-stats-bar { gap: 0; flex-wrap: wrap; justify-content: center; }
  .network-section .network-stat { padding: 16px clamp(16px, 3vw, 32px); }
  
  .team-section .team-roles-grid { grid-template-columns: repeat(2, 1fr); }
  
  .zone-section .zone-grid { grid-template-columns: 1fr; gap: 48px; }
  .zone-section .zone-separator { display: none; }
  .zone-section .zone-header { text-align: left; }
  .zone-section .zone-lead { margin: 0; }
  .zone-section .zone-map-wrapper { min-height: 500px; padding: 40px 20px; }
  .zone-section .zone-map-wrapper .kytom-map { max-width: 600px; }
  
  .portfolio-section .portfolio-header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .portfolio-section .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* ═══ HERO MOBILE (<=768px) — itération 5 (GLM, cible finale) :
       • la photo occupe TOUT l'écran (100svh), nette, AUCUN voile bleu ;
       • un dégradé NOIR seulement en BAS (rgba(0,0,0)) porte le texte ;
       • SUR ce dégradé bas, dans le tiers inférieur : eyebrow ORANGE + titre,
         puis adresse (ligne discrète) + tél/email en VRAIS boutons-icônes ronds ;
       • SOUS la photo plein écran (under the fold) : intro/lede d'abord, puis
         KPIs, puis CTA bleu pleine largeur (pas de bloc gris, pas de marge
         négative -> le titre n'est jamais chevauché).
     Le hero desktop (overlay plein écran) n'est pas touché : hero-lead / hero-body
     sont display:contents sur desktop, hero-contact-actions aussi, cette section
     ne s'active qu'en <=768px. ═══ */

  /* Le hero redevient un flux normal : fin du 100vh / flex-end. */
  .hero-agence {
    display: block;
    position: relative;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  /* Photo = zone haute fixe pleine largeur (ratio portrait rogné), image nette. */
  .hero-agence .hero-bg {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    z-index: 0;
    overflow: hidden;
  }
  .hero-agence .hero-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Scrim bleu on-brand (AA au bas), fondu vers le haut : le haut de la photo
     reste net, seul le bas est voilé pour porter le texte. Opacité ≥ 88 % sur la
     moitié inférieure (zone du texte), fondu ensuite. */
  .hero-agence .hero-bg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.55) 30%,
      rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Voile blanc desktop + décor ::after + scroll indicator neutralisés. */
  .hero-agence .hero-overlay { display: none; }
  .hero-agence::after { display: none; }
  .hero-agence .scroll-indicator { display: none; }

  /* hero-content / hero-contact-inner transparents : on expose leurs enfants
     (hero-lead, hero-body / contact-items, cta) sous .hero-agence, seul ancêtre
     positionné. Les éléments overlay se calent ainsi sur la zone photo. */
  .hero-agence .hero-content { display: contents; }
  .hero-agence .hero-contact-inner { display: contents; }

  /* ── OVERLAY (sur la photo, bas) : eyebrow + titre ──
     Boîte calée sur la zone photo (height 100svh), contenu collé en bas MAIS
     remonté par padding-bottom : eyebrow + titre arrivent dans le tiers
     inférieur, aérés, jamais collés au bord. La réserve (138px) cède la place
     à la rangée de coordonnées (adresse + boutons-icônes tél/email, boîte
     .hero-contact-items ci-dessous) qui occupe le tout-bas -> aucun
     chevauchement, quelle que soit la hauteur du titre (flex-end pousse vers
     le haut). */
  .hero-agence .hero-lead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    /* box-sizing content-box (hérité) faisait que padding-bottom AGRANDISSAIT la
       boîte vers le bas au lieu de remonter le contenu -> eyebrow+titre collés en
       bas. En border-box, padding-bottom remonte bien eyebrow+titre, libérant sous
       le titre la place de l'adresse + boutons tél/email
       (ordre : eyebrow > titre > adresse > tél/email). */
    box-sizing: border-box;
    padding: 0 22px 132px;
    pointer-events: none;
  }
  /* Mobile : eyebrow = badge signature Kytom (module partagé .k-eyebrow), pointer
     réactivé (la .hero-lead est pointer-events:none). */
  .hero-agence .k-eyebrow { pointer-events: auto; }
  .hero-agence .hero-title {
    color: var(--color-white);
    font-size: clamp(34px, 9vw, 48px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.02em;
    word-break: break-word;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
  }

  /* ── UNDER (sous la photo) : lede + KPIs ── carte blanche premium. Démarre
     nette APRÈS la photo plein écran (flux normal, aucune marge négative ->
     zéro chevauchement du titre). */
  .hero-agence .hero-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 42px 22px 10px;
    background: var(--color-white);
  }
  .hero-agence .hero-subtitle-wrapper { max-width: none; align-items: stretch; gap: 16px; }
  .hero-agence .hero-accent-bar { background: linear-gradient(to bottom, var(--color-orange), var(--color-mint)); }
  .hero-agence .hero-subtitle {
    color: var(--color-gray-700);
    font-size: 15px;
    line-height: 1.6;
  }

  /* KPIs : 3 colonnes aérées et lisibles sur fond blanc. */
  .hero-agence .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--color-bleu) 10%, transparent);
  }
  .hero-agence .hero-stat { gap: 3px; }
  .hero-agence .hero-stat::after { display: none; }
  .hero-agence .hero-stat-value {
    color: var(--color-bleu);
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 600;
    line-height: 1;
  }
  .hero-agence .hero-stat-value .suffix { color: var(--color-orange); font-size: 0.6em; }
  .hero-agence .hero-stat-label {
    color: var(--color-gray-600);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }

  /* ── OVERLAY (sur la photo, tout en bas) : coordonnées ──
     .hero-contact-bar reste en flux (static, sous .hero-body -> porte le CTA),
     mais .hero-contact-items s'extrait en absolu (ancêtre positionné =
     .hero-agence) et porte l'adresse (ligne discrète) + la rangée de
     boutons-icônes tél/email, collés en bas de la photo, sous le titre. */
  .hero-agence .hero-contact-bar {
    position: static;
    z-index: auto;
    /* CTA masqué sur mobile + adresse/icônes dans l'overlay absolu -> la barre n'a
       plus de contenu en flux : on la collapse (padding 0, fond transparent) pour
       supprimer toute bande blanche/grise entre le hero et la section suivante. */
    padding: 0;
    background: transparent;
    border-top: none;
    /* transform:none : l'ancien reveal .construct (classe retirée du hero le 08/09/2026,
       elle était inerte ici) laissait translateY(0) -> containing-block qui désancrait
       l'overlay icônes ; on neutralise par sécurité pour réancrer sur .hero-agence. */
    transform: none !important;
  }
  .hero-agence .hero-contact-items {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start; /* adresse + icônes flush-left (alignés eyebrow/titre), pas centrés */
    gap: 14px;
    /* border-box : padding-bottom décolle adresse+icônes du bord bas (même raison
       que .hero-lead : sinon content-box étend la boîte au lieu de remonter). */
    box-sizing: border-box;
    padding: 0 22px 34px;
    pointer-events: none;
  }
  .hero-agence .hero-contact-items > * { pointer-events: auto; }

  /* Adresse : petite ligne discrète (blanc translucide) au-dessus des boutons. */
  .hero-agence .hero-contact-address {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.4;
    gap: 8px;
    min-width: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  }
  .hero-agence .hero-contact-address svg {
    color: var(--color-orange);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  /* Adresse potentiellement longue -> 1 ligne garantie (borne la hauteur overlay,
     évite tout chevauchement titre / coordonnées). Le détail complet est redonné
     plus bas dans la page. */
  .hero-agence .hero-contact-address span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Rangée de boutons-icônes tél + email : ronds, contour fin blanc, visibles
     et accessibles sur le dégradé noir. Survol/focus -> orange de marque. */
  .hero-agence .hero-contact-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .hero-agence .hero-contact-action,
  .hero-agence.hero--contact-dark .hero-contact-action,
  .hero-agence.hero--contact-warm .hero-contact-action {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-white);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }
  /* Mobile : seul l'icône est affiché (le libellé reste en aria-label). */
  .hero-agence .hero-contact-action-label { display: none; }
  .hero-agence .hero-contact-action svg,
  .hero-agence.hero--contact-dark .hero-contact-action svg,
  .hero-agence.hero--contact-warm .hero-contact-action svg {
    color: var(--color-white);
    width: 20px;
    height: 20px;
  }
  .hero-agence .hero-contact-action:hover,
  .hero-agence .hero-contact-action:focus-visible,
  .hero-agence.hero--contact-dark .hero-contact-action:hover,
  .hero-agence.hero--contact-dark .hero-contact-action:focus-visible,
  .hero-agence.hero--contact-warm .hero-contact-action:hover,
  .hero-agence.hero--contact-warm .hero-contact-action:focus-visible {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
    transform: translateY(-2px);
  }
  .hero-agence .hero-contact-action:hover svg,
  .hero-agence .hero-contact-action:focus-visible svg,
  .hero-agence.hero--contact-dark .hero-contact-action:hover svg,
  .hero-agence.hero--contact-dark .hero-contact-action:focus-visible svg { color: var(--color-white); }
  .hero-agence .hero-contact-action:focus-visible {
    outline: 2px solid var(--color-mint);
    outline-offset: 2px;
  }

  /* Mobile : le CTA texte « Prendre rendez-vous » est REMPLACÉ par le bouton-icône
     rdv (dans la rangée, à droite de l'email) -> on le masque (fin du bandeau gris). */
  .hero-agence .hero-contact-cta { display: none; }
  /* Bouton-icône rdv : affiché sur mobile (override du display:none desktop).
     Même spécificité (3 classes) que la règle desktop, placée plus bas => gagne. */
  .hero-agence .hero-contact-item.hero-contact-action--rdv { display: inline-flex; }
  .hero-agence .hero-contact-cta:hover,
  .hero-agence.hero--contact-dark .hero-contact-cta:hover,
  .hero-agence.hero--contact-warm .hero-contact-cta:hover {
    background: var(--color-bleu-dark);
    color: var(--color-white);
    transform: translateY(-2px);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-agence .hero-contact-action:hover,
    .hero-agence .hero-contact-action:focus-visible,
    .hero-agence .hero-contact-cta:hover { transform: none; }
  }

  /* About section — Mobile optimizations (v4.0) */
  .about-section { padding: 60px 0; }
  .about-section .about-container { gap: 32px; }
  .about-section .about-content { max-width: 100%; }
  /* Numéros de section : grands watermarks AFFICHÉS aussi en mobile (cohérence
     desktop = mobile, décision TP). Taille réduite ; sections en overflow:hidden/clip
     -> aucun débord horizontal. */
  .about-section .section-number,
  .network-section .section-number,
  .team-section .section-number,
  .zone-section .section-number,
  .portfolio-section .section-number,
  .careers-section .section-number,
  .reviews-section .section-number {
    display: block;
    font-size: clamp(64px, 22vw, 120px);
    top: 24px;
  }
  .about-section .about-image-container { border-radius: 8px; }
  .about-section .about-badge {
    left: 12px;
    bottom: 12px;
    padding: 12px 16px;
    gap: 8px;
  }
  .about-section .about-badge-value { font-size: 24px; }
  .about-section .about-badge-label { font-size: 9px; }
  .about-section .about-title { font-size: clamp(22px, 5.5vw, 28px); margin-bottom: 16px; }
  .about-section .about-lead { font-size: 15px; }
  .about-section .about-text {
    font-size: 13px;
    column-count: 1;
  }
  .about-section .about-quote {
    padding: 16px 20px;
  }

  .network-section,
  .team-section,
  .zone-section,
  .portfolio-section,
  .careers-section { padding: 80px 20px; }
  
  .careers-section .careers-perks { flex-direction: column; gap: 16px; }
  .careers-section .careers-cta { width: 100%; justify-content: center; }
  .careers-section .careers-quote { padding: 24px; }
  
  .network-section .network-stats-bar { flex-direction: column; gap: 24px; }
  .network-section .network-stat::after { display: none; }
  
  .team-section .team-roles-grid { grid-template-columns: 1fr; }
  .team-section .team-values { flex-wrap: wrap; gap: 12px; }
  .team-section .team-total { width: 100%; justify-content: center; }
  
  .zone-section .zone-stats { flex-direction: column; gap: 16px; }
  
  .portfolio-section .portfolio-grid { grid-template-columns: 1fr; }
  .reviews-section .reviews-grid { grid-template-columns: 1fr; }
  .reviews-section { padding: 80px 20px; }
  .reviews-section .review-card { padding: 24px; }
}