/* ------------------------------------------------------------------ */
/* Design Variables                                                   */
/* ------------------------------------------------------------------ */
:root {
  --color-primary: #d0000a;
  --color-primary-dark: #ad1f1f;
  --color-text-dark: #1e1e24;
  --color-text-body: #3f4347;
  --color-bg-light: #f5f5f5;
  --color-border: #e2e8f0;
  --max-width: 1450px;
  --width_header: 1550px;
  --font-family: 'Abacaxi Latin VF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: 'Cyntho Next', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shared "bottom divider" shadow used between stacked sections instead of margins */
  --section-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.18);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  color: var(--color-text-body);
  background-color: #ffffff;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  color: var(--color-text-dark);
  font-weight: 800;
  font-family: var(--font-family-heading);
}

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

img {
  height: auto;
  display: block;
  max-width: 100%; /* FIX: global cap so images never overflow their container on small screens */
}

/* Layout Container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background: linear-gradient(180deg, #fa0404 0%, #ad1f1f 100%);
  color: #ffffff;
  border-radius: 50px;
  padding: 0.75rem 1.75rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(250, 4, 4, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(250, 4, 4, 0.4);
}

.btn-primary:active {
  transform: translateY(0px) scale(0.97);
}

.btn-outline {
  display: inline-block;
  background: #ffffff;
  color: #3f4347;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-outline:hover {
  background-color: #f9fafb;
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.section-title {
  font-size: 2rem;
  margin-bottom: 2.5rem;
}
.container_header{
    max-width: var(--width_header);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Wide section inner wrapper (replaces repeated inline max-width styles) */
.page-section-inner {
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Ripple effect used by .btn-primary / .btn-outline / .btn-banner on click */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Header & Navbar                                                    */
/* ------------------------------------------------------------------ */
/* NOTE: .header positioning (sticky/top) and padding are defined once,
   in the Responsive Enhancements section below, to avoid conflicting
   with this base block. See that section for the authoritative rule. */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
  background: #ffffff;
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* SINGLE SOURCE OF TRUTH for the logo size across all breakpoints.
   Using clamp() means the size scales continuously with viewport width
   instead of snapping between fixed values at each breakpoint, which
   was the cause of the "jumpy" logo on scroll. Do NOT add another
   .logo-img / .header.header-scrolled .logo-img rule anywhere else
   in this file — that duplication was the bug. */
.logo-img {
  height: clamp(58px, 9vw, 170px);
  width: auto;
  transition: height 0.3s ease;
}

.header.header-scrolled .logo-img {
  /* height: clamp(50px, 8vw, 110px); */
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.lang-switcher {
  position: relative;
}

.lang-btn {
  background: none;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-transform: uppercase;
}

.lang-btn .lang-caret {
  display: inline-block;
  transition: transform 0.2s ease;
}

.lang-switcher.active .lang-btn .lang-caret,
.lang-switcher:hover .lang-btn .lang-caret {
  transform: rotate(180deg);
}

.lang-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 6px;
  border: 1px solid var(--color-border);
  min-width: 110px;
  z-index: 100;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lang-switcher:hover .lang-dropdown,
.lang-switcher.active .lang-dropdown {
  display: block;
}

/* trigger the fade-in on the next frame via .show (added by JS) so it always animates,
   including on touch devices where :hover isn't reliable */
.lang-switcher:hover .lang-dropdown,
.lang-switcher.active .lang-dropdown.show {
  opacity: 1;
  transform: translateY(0);
}

.lang-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.lang-dropdown a:hover {
  background-color: #f9fafb;
  padding-left: 1.25rem;
}

.lang-dropdown a.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Hero Section                                                       */
/* ------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1rem 0;
  position: relative;
  z-index: 4;
  background: #ffffff;
}
.hero-text{
    width: 110%;
}
.hero-title {
  font-size: 2.5rem;
  line-height: 1.2;
}

.hero-title span {
  color: var(--color-primary);
}

.hero-subtitle {
  margin-top: 1.5rem;
  max-width: 480px;
  font-size: 1rem;
}

.hero-buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

.hero-image img {
  width: 120%;
  margin-left: 7%;
}

/* Hero entrance animation (plays once on load, no scroll needed) */
.hero-text {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-image {
  animation: heroFadeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}

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

@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* FIX: hero collapses to 1 column at 992px (see rule further down),
   so the image must stop bleeding past its container or it overflows the viewport */
@media (max-width: 992px) {
  .hero-text {
    width: 100%;
  }
  .hero-image img {
    width: 100%;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Stats Strip                                                        */
/* ------------------------------------------------------------------ */

.stats-strip {
  background-color: var(--color-bg-light);
  padding: 1.5rem 0;
  box-shadow: var(--section-shadow);
  position: relative;
  z-index: 3;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
}

/* FIX: stats stack cleanly on very small screens with a little breathing room */
@media (max-width: 600px) {
  .stats-grid {
    gap: 1rem 0;
  }
  .stat-item {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* ------------------------------------------------------------------ */
/* Scroll-reveal utility                                              */
/* ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children of a grid once the grid itself becomes visible */
.services-grid.is-visible .service-card,
.process-grid.is-visible .process-card,
.why-grid-4.is-visible .why-card,
.why-grid-2.is-visible .why-card {
  opacity: 1;
  transform: translateY(0);
}

.services-grid .service-card,
.process-grid .process-card,
.why-grid-4 .why-card,
.why-grid-2 .why-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.services-grid .service-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.15s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.25s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.35s; }

.process-grid .process-card:nth-child(1) { transition-delay: 0.05s; }
.process-grid .process-card:nth-child(3) { transition-delay: 0.15s; }
.process-grid .process-card:nth-child(5) { transition-delay: 0.25s; }
.process-grid .process-card:nth-child(7) { transition-delay: 0.35s; }
.process-grid .process-card:nth-child(9) { transition-delay: 0.45s; }

.why-grid-4 .why-card:nth-child(1) { transition-delay: 0.05s; }
.why-grid-4 .why-card:nth-child(2) { transition-delay: 0.15s; }
.why-grid-4 .why-card:nth-child(3) { transition-delay: 0.25s; }
.why-grid-4 .why-card:nth-child(4) { transition-delay: 0.35s; }
.why-grid-2 .why-card:nth-child(1) { transition-delay: 0.05s; }
.why-grid-2 .why-card:nth-child(2) { transition-delay: 0.15s; }

/* ------------------------------------------------------------------ */
/* Vos Enjeux Timeline Section                                        */
/* ------------------------------------------------------------------ */
.enjeux-section {
    padding: 10rem 7rem;
    background-color: #fcfcfc;
    background-image: url('/images/ban2.webp'); /* Replace or retain background */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--section-shadow);
}

.enjeux-container {
    max-width: 1500px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2b2b2b;
    margin-bottom: 3.5rem;
    text-align: left;
}

/* Chain Flex Container */
.enjeux-chain-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 2rem 0;
}

.enjeux-chain {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 900px;
}

/* Node Column Structure */
.enjeu-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170px;
    flex-shrink: 0;
    position: relative;
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.enjeux-chain.is-visible .enjeu-node-col {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.enjeux-chain.is-visible .enjeu-node-col:nth-child(1) { transition-delay: 0s; }
.enjeux-chain.is-visible .enjeu-node-col:nth-child(3) { transition-delay: 0.15s; }
.enjeux-chain.is-visible .enjeu-node-col:nth-child(5) { transition-delay: 0.3s; }
.enjeux-chain.is-visible .enjeu-node-col:nth-child(7) { transition-delay: 0.45s; }
.enjeux-chain.is-visible .enjeu-node-col:nth-child(9) { transition-delay: 0.6s; }

/* Gentle hover lift on each node */
.enjeu-node-col:hover .circle-frame {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
}

.enjeu-node-col:hover .enjeu-icon-img {
    transform: scale(1.12) rotate(-4deg);
}

/* Node Title Block (Always Above Circle) */
.node-title-container {
    height: 70px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    margin-bottom: 12px;
    padding: 0 5px;
}

.enjeu-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
}

.text-red {
    color: var(--color-primary);
}

.text-dark {
    color: #2c3036;
}

/* Center Graphic & Badge Assembly */
.node-graphic-wrap {
    position: relative;
    width: 140px;
    height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* Top Pin Dot and Stem Line */
.pin-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 3;
}

.pin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.main .pin-dot {
    background-color: var(--color-primary);
}

.sub .pin-dot {
    background-color: #1a1a1a;
}

.stem-line {
    width: 2px;
    height: 24px;
}

.main .stem-line {
    background-color: var(--color-primary);
}

.sub .stem-line {
    background-color: #1a1a1a;
}

/* Circular Node Badge Frame */
.circle-frame {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.arc-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Adjust alignment if needed */
}

.base-circle {
    fill: none;
    stroke: #eaeaea;
    stroke-width: 2;
}

.accent-arc {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.enjeux-chain.is-visible .accent-arc {
    stroke-dashoffset: 0;
}

.arc-red {
    stroke: var(--color-primary);
}

.arc-dark {
    stroke: #1a1a1a;
}

/* Icon placement */
.icon-inner {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.enjeu-icon-img {
    width: 150%;
    height: 150%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Horizontal Inter-Node Connector Lines */
.horizontal-connector {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin-bottom: 63px; /* Align precisely with center of circular badges */
    min-width: 40px;
    position: relative;
}

.connector-line {
    flex: 1;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.enjeux-chain.is-visible .connector-line {
    transform: scaleX(1);
}

.enjeux-chain.is-visible .horizontal-connector:nth-of-type(2) .connector-line { transition-delay: 0.2s; }
.enjeux-chain.is-visible .horizontal-connector:nth-of-type(4) .connector-line { transition-delay: 0.5s; }
.enjeux-chain.is-visible .horizontal-connector:nth-of-type(6) .connector-line { transition-delay: 0.8s; }
.enjeux-chain.is-visible .horizontal-connector:nth-of-type(8) .connector-line { transition-delay: 1.1s; }

.connector-main .connector-line {
    background-color: var(--color-primary);
}

.connector-sub .connector-line {
    background-color: #1a1a1a;
}

.connector-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.connector-main .connector-dot {
    background-color: var(--color-primary);
}

.connector-sub .connector-dot {
    background-color: #1a1a1a;
}

/* Responsive Mobile Layout */
@media (max-width: 768px) {
    .enjeux-section {
        padding: 4rem 1.25rem; /* FIX: original 10rem 7rem is far too much on mobile */
    }

    .enjeux-chain {
        flex-direction: column;
        min-width: unset;
        align-items: center;
    }

    .horizontal-connector {
        width: 2px;
        height: 40px;
        flex-direction: column;
        margin-bottom: 0;
        margin: 10px 0;
    }

    .connector-line {
        width: 2px;
        height: 100%;
        transform: scaleY(0);
        transform-origin: top center;
    }

    .enjeux-chain.is-visible .connector-line {
        transform: scaleY(1);
    }
}

.red-banner {
    min-height: 600px;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: var(--section-shadow);
    background-image: url('/images/ban3.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.red-banner-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.red-banner-content {
    max-width: 700px;
    text-align: right;
    padding-right: 4rem;
}

.red-banner-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.btn-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    background: linear-gradient(180deg, #fa0404 0%, #ad1f1f 100%);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    box-shadow: 0 6px 18px rgba(250, 4, 4, 0.35);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(250, 4, 4, 0.45);
}

/* FIX: banner text was pinned right with a fixed 4rem gutter and huge min-height;
   on mobile this crushes the text against the edge and wastes vertical space */
@media (max-width: 768px) {
  .red-banner {
    min-height: 0;
    background-image: linear-gradient(135deg, #a01018 0%, #d0000a 55%, #ee1c26 100%);
  }
  .red-banner-container {
    justify-content: center;
    padding: 3rem 1.5rem;
  }
  .red-banner-content {
    text-align: center;
    padding-right: 0;
    max-width: 100%;
  }
  .red-banner-content h2 {
    color: #ffffff;
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .btn-banner {
    width: 100%;
    max-width: 360px;
  }
}

/* ------------------------------------------------------------------ */
/* Services Section                                                   */
/* ------------------------------------------------------------------ */
.services-section {
  position: relative;
  padding: 5rem 3.75rem;
  background-image: url('/images/ban4.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--section-shadow);
  z-index: 1;
}

.section-title {
  font-size: 2.25rem;
  color: #1a1a2e;
  margin-bottom: 3rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

/* Image wrapper: only top corners rounded, flush with body below */
.service-card-img {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: visible; /* was hidden — this was clipping the badge */
  clip-path: inset(0 0 0 0 round 14px 14px 0 0);
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px 14px 0 0; /* round the image itself instead of the wrapper */
  transition: transform 0.5s ease;
}

.service-card:hover .service-card-img img {
  transform: scale(1.06);
}

/* Number badge straddles the image/body boundary */
.service-number {
  position: absolute;
  bottom: -50px;
  right: 120px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;

  display: flex;
  justify-content: center;
  align-items: flex-start; /* Put content at the top */

  padding-top: 12px; /* Adjust as needed */

  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  clip-path: inset(0 0 50% 0); /* Show only the top half */
  transition: transform 0.3s ease;
}

.service-card-body {
  position: relative;
  z-index: 9999;

  padding: 2.25rem 1.25rem 1.5rem;
}


.service-title {
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.service-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #6b7280;
}

@media (max-width: 991px) {
  .services-section {
    padding: 4rem 1.5rem; /* FIX: original 3.75rem side padding was tuned for the 4-col desktop layout */
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* FIX: badge used a fixed 140px offset tuned for wide 4-col cards;
     on 2-col cards this pushes it off the edge of the card */
  .service-number {
    right: 24px;
  }
}

@media (max-width: 767px) {
    .services-section {
        background-image: linear-gradient(180deg, #f6f6f8 0%, #e9eaef 100%);
    }
}

@media (max-width: 575px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-section {
    padding: 3rem 1.25rem;
  }
  .service-card-body {
    padding: 2rem 1.25rem 1.5rem;
  }
  /* FIX: single-column cards are wide again, so re-anchor the badge to a sensible spot */
  .service-number {
    right: 24px;
    width: 84px;
    height: 84px;
    bottom: -42px;
  }
}

/* ------------------------------------------------------------------ */
/* Livrables Section                                                  */
/* ------------------------------------------------------------------ */
.livrables-section {
  position: relative;
  background-image: url('/images/ban5.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  aspect-ratio: 1200 / 300; /* match ban5.png ratio so the circle stays aligned at any width */
  height: 320px;
  width: 100%;
  box-shadow: var(--section-shadow);
  z-index: 1;
}

.livrables-container {
  position: relative;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Title sits on the plain red area, left side */
.livrables-title {
  position: absolute;
  top: 50%;
  left: -7rem;
  transform: translateY(-50%);
  max-width: 45%;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
  font-size: 2.5rem;
}

.livrables-content {
  position: absolute;
  top: 9%;
  right: -12%;
  transform: translateY(-50%);
  width: 32%;
  text-align: left !important;
  display: block !important; /* rule out any flex/grid centering from a shared ancestor class */
}

.livrables-content .livrables-heading {
  margin: 0 0 0.6rem 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: #1a1a1a;
  text-align: center !important;
}

.livrables-content .livrables-underline {
  width: 32px;
  height: 3px;
  background-color: var(--color-primary);
  margin: 0 0 1.1rem 175px !important; /* left:0, right:0 — no auto-centering possible */
}

.livrables-content ul.livrables-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.livrables-content ul.livrables-list li {
  margin: 0 0 0.55rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: #2b2b2b;
  line-height: 1.4;
  text-align: center !important;
  list-style: none !important;
}



/* Responsive: stack and shrink on small screens */
@media (max-width: 768px) {
  .livrables-section {
    aspect-ratio: auto;
    padding: 3rem 0;
    background-size: cover;
    background-image: linear-gradient(180deg, #f6f6f8 0%, #ececf1 100%);
  }
  .livrables-title,
  .livrables-content {
    position: static;
    transform: none;
    max-width: 100%;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .livrables-container {
    padding: 0 1.25rem;
  }
  .livrables-content {
    background: rgba(255,255,255,0.9);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
  }
  /* FIX: title kept white uppercase text but is no longer on the red background
     once stacked to static position — make it readable against the page bg */
  .livrables-title {
    color: var(--color-text-dark);
    font-size: clamp(1.5rem, 6vw, 1.85rem);
    text-align: center;
    padding: 0 0.25rem;
  }
}

@media (max-width: 767px) {
  .livrables-section {
    height: 400px;
  }
}

/* ------------------------------------------------------------------ */
/* Process / How it works                                             */
/* ------------------------------------------------------------------ */
.process-section {
  background-image: url('/images/ban6.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
  box-shadow: var(--section-shadow);
  position: relative;
  z-index: 1;
}

.process-section .section-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #2b2b2b;
  margin-bottom: 3rem;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.process-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);
}

.process-number {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-primary);
}

.process-divider {
  width: 28px;
  height: 3px;
  background-color: var(--color-primary);
  margin: 0.6rem auto 1.1rem;
  transition: width 0.3s ease;
}

.process-card:hover .process-divider {
  width: 48px;
}

.process-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.process-card p {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.5;
}

.process-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.process-arrow svg path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.6s ease;
}

.process-grid.is-visible .process-arrow svg path {
  stroke-dashoffset: 0;
}

/* Responsive: stack cards, arrows rotate to point down */
@media (min-width: 992px) and (max-width: 1199px) {
    .process-card {
        padding: 1.5rem 1rem;
    }
    .process-arrow {
        transform: scale(0.9);
    }
}

@media (max-width: 992px) {
  .process-section {
    padding: 3.5rem 0; /* FIX: trim vertical padding once cards stack (was 5rem, feels bloated stacked) */
  }
  .process-grid {
    grid-template-columns: 1fr;
    padding: 0 1.25rem; /* FIX: grid had no side padding, cards touched viewport edges on phones */
    gap: 0.75rem;
  }

  .process-arrow {
    transform: rotate(90deg);
    margin: 0.25rem 0;
  }
}

@media (max-width: 767px) {
    .process-section {
        background-image: linear-gradient(180deg, #f6f6f8 0%, #e9eaef 100%);
    }
}

/* ------------------------------------------------------------------ */
/* Pourquoi Direct Veille                                             */
/* ------------------------------------------------------------------ */
.why-section {
  padding: 5rem 0;
  background-image: url('/images/ban7.webp');
  background-size: cover;
  background-position: center;
  box-shadow: var(--section-shadow);
  position: relative;
  z-index: 1;
}

.why-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.why-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  width: 66%;
  margin: 0 auto;
}

.why-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  font-size: 0.975rem;
  font-weight: 600;
  min-height: 100px;
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  text-align: center;      /* Center text */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}

@media (max-width: 767px) {
    .why-section {
        background-image: linear-gradient(180deg, #f6f6f8 0%, #ececf1 100%);
    }
    .why-card {
        min-height: 0;
        padding: 1.35rem 1.25rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
  .why-section {
    padding: 3rem 0; /* FIX: reduce vertical whitespace once cards are single column */
  }
}

/* ------------------------------------------------------------------ */
/* SEO Content Section                                                 */
/* ------------------------------------------------------------------ */
.seo-content-section {
  padding: 5rem 0;
  background: var(--color-bg-light);
  box-shadow: var(--section-shadow);
  position: relative;
  z-index: 1;
}

.seo-content-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  color: var(--color-text-body);
  line-height: 1.75;
}

.seo-content-columns p {
  margin: 0;
  text-align: justify;
}

@media (max-width: 768px) {
  .seo-content-columns {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* References Section                                                 */
/* ------------------------------------------------------------------ */
.references-section {
  padding: 8rem 0;
  box-shadow: var(--section-shadow);
  position: relative;
  z-index: 1;
}

.references-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 2rem;
  align-items: center;
}

.reference-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: transform 0.25s ease;
}

.reference-item:hover {
  transform: scale(1.08);
}

.ref-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 130%;
  object-fit: contain;
  transition: opacity 0.25s ease;}

.ref-logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.ref-logo-gray {
  opacity: 1;
}

.ref-logo-color {
  opacity: 0;
}

.reference-item:hover .ref-logo-gray {
  opacity: 0;
}

.reference-item:hover .ref-logo-color {
  opacity: 1;
}

@media (max-width: 768px) {
  .references-section {
    padding: 4rem 0; /* FIX: 8rem is excessive once the grid drops to 3 columns on phones */
  }
  .references-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* FIX: at very small widths 3 logo columns are cramped; drop to 2 */
@media (max-width: 420px) {
  .references-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .reference-item {
    height: 34px;
  }
}

/* ------------------------------------------------------------------ */
/* Contact Section                                                    */
/* ------------------------------------------------------------------ */
.contact-section {
  position: relative;
  background-image: url('/images/banformulaire.webp');
  padding: 6rem 0 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--section-shadow);
  z-index: 1;
}

.contact-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 2fr;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 6rem;
}

/* ---------------- Left intro column ---------------- */
.contact-intro {
  padding-top: 1rem;
}

.contact-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  animation: iconPulse 2.6s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
  50% { box-shadow: 0 6px 20px rgba(208, 0, 10, 0.25); }
}

.contact-title {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.contact-title-dark {
  color: #1e2733;
}

.contact-title-red {
  color: var(--color-primary);
}

.contact-title-underline {
  width: 40px;
  height: 3px;
  background-color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.contact-intro p {
  font-size: 0.9rem;
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 260px;
}

/* ---------------- Form card ---------------- */
.contact-form-wrapper {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}

.contact-success {
  background: #e6fffa;
  color: #234e52;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  animation: successPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes successPop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.75rem;
}

.form-group-full {
  grid-column: span 2;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e2733;
  margin-bottom: 0.5rem;
}

.required {
  color: var(--color-primary);
}

/* Icon + input wrapper */
.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  display: flex;
  pointer-events: none;
  transition: color 0.15s ease;
}

.input-icon-top {
  top: 1rem;
  transform: none;
}

.input-icon-right {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #1e2733;
  pointer-events: none;
}

.input-field {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  color: #1e2733;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-field::placeholder {
  color: #9ca3af;
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(208, 0, 10, 0.1);
}

/* Live validation state, toggled by JS on blur */
.input-field.field-valid {
  border-color: #22c55e;
}

.input-field.field-invalid {
  border-color: var(--color-primary);
  animation: fieldShake 0.35s ease;
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.select-field {
  appearance: none;
  padding-left: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.textarea-field {
  resize: vertical;
  min-height: 90px;
  padding-left: 2.6rem;
}

.error-msg {
  color: var(--color-primary);
  font-size: 0.75rem;
  margin-top: 0.35rem;
  animation: fieldShake 0.35s ease;
}

/* ---------------- reCAPTCHA v2 checkbox widget ---------------- */
.recaptcha-field {
  display: flex;
  justify-content: flex-start;
  margin: 0.25rem 0 0.5rem;
}

.recaptcha-field iframe {
  border-radius: 6px;
}

/* ---------------- Submit button (contact form variant) ---------------- */
.form-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* NOTE: this intentionally overrides the base .btn-primary gradient with a
   solid color + uppercase styling for the contact form context only. */
.contact-form-wrapper .btn-primary,
.form-submit-row .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--color-primary);
  background-image: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 8px;
  padding: 0.9rem 1.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.contact-form-wrapper .btn-primary:hover,
.form-submit-row .btn-primary:hover {
  background-color: #ad1f1f;
  transform: translateY(-1px);
}

.btn-primary svg {
  flex-shrink: 0;
}

.btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn-primary .btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}

.btn-primary.is-loading .btn-spinner {
  display: inline-block;
}

.btn-primary.is-loading .btn-arrow {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .contact-section {
    padding: 3.5rem 0 0; /* FIX: trim 6rem top padding once the layout stacks */
  }
  .contact-container {
    grid-template-columns: 1fr;
    padding-bottom: 3.5rem; /* FIX: trim 6rem bottom padding for the stacked layout */
    max-width: 100%;
  }
  .contact-form-wrapper {
    padding: 1.75rem; /* FIX: 2.5rem padding felt cramped against a narrow phone viewport */
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group-full {
    grid-column: span 1;
  }
  .contact-intro p {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
    .contact-section {
        background-image: linear-gradient(180deg, #f7f7f9 0%, #ececf1 100%);
    }
}

@media (max-width: 600px) {
    .contact-form-wrapper {
        padding: 1.5rem 1.25rem;
    }
    .contact-title {
        font-size: 1.6rem;
    }
    .form-submit-row {
        justify-content: stretch;
    }
    .form-submit-row .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */
.footer {
  position: relative;
  overflow: hidden;
  background-image: url('/images/banpieddepage.webp');
  color: #ffffff;
  padding: 4rem 0 0;
  background-size: cover;
  background-position: center;
  z-index: 15; /* higher than .contact-section so the TOP shadow shows over it */
}

.footer-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
  padding-bottom: 3rem;
}

/* ---- Left: logo + wordmark ---- */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-logo {
  height: 110px;
  width: auto;
}

.footer-brand-name {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff;
}

/* ---- Center: social + contact info ---- */
.footer-contact {
  text-align: center;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.footer-social a {
  width: 34px;
  height: 34px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
  background-color: #ffffff;
  color: var(--color-primary);
  transform: translateY(-3px);
}

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

.footer-address,
.footer-phone,
.footer-email {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  opacity: 0.95;
}

.footer-email a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Right: map ---- */
.footer-map {
  display: flex;
}

.footer-map-card {
  width: 260px;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem;
  text-align: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-map-card:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.footer-map-pin {
  color: var(--color-primary);
}

.footer-map-address {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.95;
}

.footer-map-link {
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-primary);
}

.footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    padding: 1rem 0;
    font-size: 0.75rem;
    opacity: 0.75;

    transform: translateX(-80px); /* adjust value */
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2rem;
  }
  .footer-brand {
    align-items: center;
  }
  /* FIX: map card had a fixed 260px width that could overflow narrow phones,
     and shrink the logo a bit so it doesn't dominate the stacked layout */
  .footer-map-card {
    width: 100%;
    max-width: 320px;
  }
  .footer-logo {
    height: 80px;
  }
  /* FIX: footer-bottom was shifted -80px on desktop for alignment with a wider
     layout; once everything is centered on mobile this pushes the copyright
     text off-screen to the left */
  .footer-bottom {
    transform: none;
  }
}

@media (max-width: 767px) {
    .footer-container {
        gap: 1.75rem;
        padding-bottom: 2.25rem;
    }
    .footer-logo {
        height: 72px;
    }
    .footer-map-card {
        min-height: 200px;
    }
}

/* ------------------------------------------------------------------ */
/* Section stacking order (z-index)                                   */
/* ------------------------------------------------------------------ */
.header        { z-index: 200; }
.hero          { z-index: 100; }
.stats-strip   { z-index: 90; }
.enjeux-section{ z-index: 80; }
.red-banner    { z-index: 70; }
.services-section { z-index: 60; }
.livrables-section { z-index: 50; }
.process-section { z-index: 40; }
.why-section   { z-index: 30; }
.references-section { z-index: 20; }
.contact-section { z-index: 10; }
/* .footer z-index (15) is set in the Footer block above */

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero, .red-banner-container, .livrables-container, .contact-container {
    grid-template-columns: 1fr;
  }
  .services-grid, .why-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-grid {
    grid-template-columns: 1fr;
  }
  .enjeux-chain {
    grid-template-columns: 1fr;
  }
  .why-grid-2 {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .references-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .stats-grid, .services-grid, .why-grid-4, .why-grid-2, .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group-full {
    grid-column: span 1;
  }
  .footer-container {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
}

/* ------------------------------------------------------------------ */
/* Back-to-top button                                                 */
/* ------------------------------------------------------------------ */
.back-to-top {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fa0404 0%, #ad1f1f 100%);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(208, 0, 10, 0.35);
  cursor: pointer;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
}

@media (max-width: 600px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}

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

/* ------------------------------------------------------------------ */
/* Modals: "Déposez votre brief" / "Être rappelé" / "Parler à un expert" */
/* ------------------------------------------------------------------ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

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

body.modal-open {
  overflow: hidden;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 1160px;
  height: 92vh;
  max-height: 92vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.85fr 1.7fr;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.modal-overlay.is-open .modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #1e2733;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.modal-close:hover {
  background: #f3f4f6;
  transform: rotate(90deg);
}

/* ---------------- Left panel ---------------- */
.modal-panel {
  position: relative;
  overflow: hidden;
  padding: 3rem 2rem 2.5rem;
  background-image: url('/images/icons/modal/bck.webp'); /* Replace or retain background */
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
}

.modal-panel-icon-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 2.25rem;
}

.modal-panel-icon-crescent {
  position: absolute;
  top: 8px;
  left: -18px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.9;
}

.modal-panel-icon-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.modal-panel-icon-circle img {
  width: 52px;
  height: 52px;
}

.modal-panel-title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.modal-panel-title .line-dark {
  display: block;
  color: var(--color-text-dark);
}

.modal-panel-title .line-red {
  display: block;
  color: var(--color-primary);
}

.modal-panel-underline {
  width: 40px;
  height: 3px;
  background-color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.modal-panel-text {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.65;
  max-width: 280px;
}

.modal-panel-text-spaced {
  margin-top: 0.9rem;
}

.modal-panel-note {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.modal-panel-note-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.modal-panel-note-icon svg {
  width: 16px;
  height: 16px;
}

.modal-panel-note p {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.5;
}

/* ---------------- Right form panel ---------------- */
.modal-form-wrapper {
  padding: 2.75rem 2.5rem 2.25rem;
  overflow-y: auto;
  min-height: 0; /* allows grid items to shrink and scroll */
  height: 100%;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem 1.75rem;
}

.modal-form-grid .form-group-full {
  grid-column: span 2;
}

/* Character counter under textareas */
.modal-textarea-wrap {
  position: relative;
}

.modal-char-counter {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  font-size: 0.72rem;
  color: #9ca3af;
  pointer-events: none;
  background: #ffffff;
  padding-left: 0.25rem;
}

/* "Nature du besoin" radio-card grid */
.need-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
/* Wider variant: 7 compact cards in a single row (used in "Parler à un expert") */
.need-card-grid-wide {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

.need-card-grid-wide .need-card-face {
  padding: 0.85rem 0.4rem;
  font-size: 0.72rem;
  gap: 0.5rem;
}

@media (max-width: 992px) {
  .need-card-grid-wide {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .need-card-grid-wide {
    grid-template-columns: repeat(2, 1fr);
  }
}
.need-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.need-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.need-card-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 0.9rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e2733;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.need-card-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  transition: border-color 0.15s ease;
}

.need-card-dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.need-card input:checked + .need-card-face {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(208, 0, 10, 0.08);
}

.need-card input:checked + .need-card-face .need-card-dot {
  border-color: var(--color-primary);
}

.need-card input:checked + .need-card-face .need-card-dot::after {
  transform: scale(1);
}

.need-card input:focus-visible + .need-card-face {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* File upload dropzone */
.modal-upload {
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  padding: 1.1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: #4b5563;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  position: relative;
}

.modal-upload:hover,
.modal-upload.is-dragover {
  border-color: var(--color-primary);
  background-color: rgba(208, 0, 10, 0.03);
}

.modal-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.modal-upload-text strong {
  color: var(--color-text-dark);
}

.modal-upload-hint {
  display: block;
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 0.15rem;
}

.modal-upload-filename {
  font-size: 0.78rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-top: 0.5rem;
  display: none;
}

.modal-upload-filename.show {
  display: block;
}

/* Reassurance strip under the submit button */
.modal-reassurance {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.modal-reassurance.modal-reassurance-callback {
  margin-top: 23%;
}

.modal-reassurance-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
}

.modal-reassurance-item svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: #22c55e;
}

/* 5-across variant used in "Être rappelé" (Créneau souhaité) */
.need-card-grid-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.65rem;
}

@media (min-width: 993px) and (max-width: 1199px) {
    /* (reserved: hero image full-bleed override lives in Hero section) */
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .modal-box {
    grid-template-columns: 1fr;
    max-height: 94vh;
    overflow-y: auto;
    border-radius: 18px;
  }
  .modal-panel {
    padding: 2.5rem 1.75rem 1.75rem;
  }
  .modal-panel-icon-wrap {
    width: 110px;
    height: 110px;
    margin-bottom: 1.5rem;
  }
  .modal-panel-icon-crescent {
    width: 68px;
    height: 68px;
  }
  .modal-panel-icon-circle svg {
    width: 40px;
    height: 40px;
  }
  .modal-panel-title {
    font-size: 1.5rem;
  }
  .modal-panel-note {
    padding-top: 1.5rem;
  }
  .modal-form-wrapper {
    padding: 2rem 1.5rem 2rem;
  }
}

@media (max-width: 767px) {
    .modal-overlay {
        padding: 1rem 0.75rem;
    }
}

@media (max-width: 992px) {
  .need-card-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .modal-overlay {
    padding: 0;
  }
  .modal-box {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-form-grid .form-group-full {
    grid-column: span 1;
  }
  .need-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .need-card-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .modal-reassurance {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
    .modal-box {
        border-radius: 0;
    }
    .modal-panel {
        padding: 2rem 1.25rem 1.5rem;
    }
    .modal-panel-icon-wrap {
        width: 96px;
        height: 96px;
        margin-bottom: 1.5rem;
    }
    .modal-panel-icon-crescent {
        width: 60px;
        height: 60px;
        left: -14px;
        top: 4px;
    }
    .modal-panel-title {
        font-size: 1.45rem;
    }
    .modal-form-wrapper {
        padding: 1.5rem 1.25rem 2rem;
    }
}

@media (max-width: 420px) {
    .modal-panel-icon-wrap {
        width: 80px;
        height: 80px;
    }
    .modal-panel-icon-circle img {
        width: 44px;
        height: 44px;
    }
}

/* ------------------------------------------------------------------ */
/* Blog Carousel Section ("Le blog")                                  */
/* ------------------------------------------------------------------ */
.blog-section {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  background-image: url('/images/ban_blog.webp');
  background-size: cover;
  background-position: center;
  box-shadow: var(--section-shadow);
  z-index: 1;
}

.blog-container {
  position: relative;
  z-index: 2;
}

/* Decorative dot grid, top right */
.blog-decor-dots {
  position: absolute;
  top: 3rem;
  right: 4rem;
  width: 140px;
  height: 100px;
  background-image: radial-gradient(#d1d5db 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}

/* Decorative curved red line, bottom left */
.blog-decor-line {
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 260px;
  height: 260px;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

/* ---------------- Carousel wrapper + nav arrows ---------------- */
.blog-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blog-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: #1e1e24;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.blog-nav:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ---------------- Track (horizontal scroll-snap carousel) ---------------- */
.blog-track {
  flex: 1;
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1.5rem 4vw; /* side padding lets first/last cards center properly */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.blog-track::-webkit-scrollbar {
  display: none;
}

/* ---------------- Individual card ---------------- */
.blog-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: min(78vw, 820px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card.is-active {
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.14);
}

.blog-card-image {
  position: relative;
  min-height: 260px;
  background: #0f172a;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-image-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: #ffffff;
}

.blog-card-image-caption .cap-title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.blog-card-image-caption .cap-sub {
  font-size: 0.8rem;
  opacity: 0.85;
  max-width: 220px;
}

.blog-card-body {
  padding: 2.25rem 2.25rem 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-card-cat {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.6rem;
}
.blog-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e1e24;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.blog-card-text {
  font-size: 0.9rem;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  width: fit-content;
  transition: gap 0.2s ease;
}

.blog-card-link:hover {
  gap: 0.65rem;
}

/* ---------------- Dots pagination ---------------- */
.blog-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
}

.blog-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.blog-dot.active {
  background: var(--color-primary);
  transform: scale(1.3);
}

/* ---------------- Responsive ---------------- */
/* 1. Hide the nav arrows on mobile — let people swipe, use the dots to navigate.
      This removes the vw-vs-flex-space mismatch entirely. */
@media (max-width: 900px) {
  .blog-section {
    padding: 4rem 0;
  }
  .blog-card {
    grid-template-columns: 1fr;
    width: 88%;
    max-width: 480px;
  }
  .blog-card-image {
    min-height: 200px;
  }
  .blog-card-body {
    padding: 1.75rem;
  }
  /* was only hiding .blog-decor-dots — the curved red line was left behind
     and can overlap the last card on small screens */
  .blog-decor-dots,
  .blog-decor-line {
    display: none;
  }
}

@media (max-width: 768px) {
  .blog-nav {
    display: none;
  }
  .blog-carousel-wrapper {
    gap: 0;
  }
}

@media (max-width: 600px) {
  .blog-section {
    padding: 3rem 0;
  }
  .blog-nav {
    width: 38px;
    height: 38px;
  }
  .blog-track {
    padding: 1rem 4vw;
  }
  .blog-card {
    width: 92%;
  }
  .blog-card-title {
    font-size: 1.2rem;
  }
  /* Clamp the excerpt so a long shortExcerpt(220) text doesn't make cards
     wildly different heights and break the snap rhythm on small screens */
  .blog-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0;
}

.pagination-wrapper nav > div:first-child {
    display: none; /* hides "Showing X to Y of Z results" text */
}

.pagination-wrapper ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}

.pagination-wrapper li a,
.pagination-wrapper li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    transition: all 0.2s ease;
}

.pagination-wrapper li a:hover {
    background: #fdf2f2;
    border-color: #e11d2e;
    color: #e11d2e;
}

/* Active page — matches your red brand color */
.pagination-wrapper li span[aria-current="page"] {
    background: #e11d2e;
    border-color: #e11d2e;
    color: #fff;
}

/* Disabled prev/next */
.pagination-wrapper li span[aria-disabled="true"] {
    color: #ccc;
    background: #fafafa;
    border-color: #eee;
    cursor: not-allowed;
}

/* Prev/Next arrow buttons */
.pagination-wrapper li:first-child a,
.pagination-wrapper li:first-child span,
.pagination-wrapper li:last-child a,
.pagination-wrapper li:last-child span {
    font-weight: 600;
}

/* ================================================================== */
/* ================== RESPONSIVE ENHANCEMENTS ======================== */
/* Mobile-first tuning layered on top of the base rules above.         */
/* ================================================================== */

/* ---------- Global safety & fluid typography ---------- */
html,
body {
    overflow-x: hidden;
}

h1, h2, h3, h4, p, a, li, span, button {
    overflow-wrap: break-word;
}

button {
    font-family: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
}

.section-title {
    font-size: clamp(1.55rem, 4vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Comfortable touch targets */
@media (max-width: 767px) {
    .btn-primary,
    .btn-outline,
    .btn-banner {
        min-height: 46px;
    }
}

/* ---------- Header: sticky + mobile menu ---------- */
/* This is the single authoritative rule for .header positioning/padding.
   (Logo sizing itself is handled once, in the Header & Navbar section above.) */
.header {
    position: sticky;
    top: 0;
    padding: 0.4rem 1.25rem;
}

.header.header-scrolled {
    box-shadow: 0 6px 24px rgba(28, 30, 42, 0.1);
}

.nav-right {
    gap: 1rem;
}

/* Hamburger (hidden on desktop) */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.nav-toggle:hover {
    border-color: var(--color-primary);
}

.nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text-dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Slide-down mobile panel (absolute under the sticky header) */
.mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    display: none;
    background: #ffffff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 30px 45px -22px rgba(28, 30, 42, 0.28);
    padding: 0 1.25rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease,
                visibility 0.45s;
}

.mobile-nav.is-open {
    max-height: 460px;
    opacity: 1;
    visibility: visible;
}

.mobile-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.1rem 0 0.9rem;
}

.mobile-nav-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0 1.2rem;
}

.mobile-nav-lang-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.mobile-nav-lang-options {
    display: flex;
    gap: 0.5rem;
}

.mobile-nav-lang-options a,
.mobile-nav-lang-options .is-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-dark);
    background: #f3f4f6;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-lang-options a:hover {
    background: #e5e7eb;
}

.mobile-nav-lang-options .is-active {
    background: var(--color-primary);
    color: #ffffff;
}

@media (max-width: 767px) {
    .header {
        padding: 0.45rem 1rem;
    }
    .header .nav-contact-btn,
    .header .lang-switcher {
        display: none;
    }
    .nav-toggle {
        display: inline-flex;
    }
    .mobile-nav {
        display: block;
    }
}

/* ---------- Hero ---------- */
@media (min-width: 993px) and (max-width: 1199px) {
    .hero-image img {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .hero {
        padding: 1.5rem 0 2.5rem;
        text-align: center;
    }
    .hero-text {
        max-width: 640px;
        margin: 0 auto;
    }
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: clamp(1.7rem, 6.5vw, 2.4rem);
    }
    .hero-buttons {
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    .hero-buttons .btn-primary,
    .hero-buttons .btn-outline {
        width: 100%;
        justify-content: center;
    }
    .hero-image img {
        width: min(100%, 480px);
        margin: 0 auto;
    }
}

/* ---------- Stats ---------- */
@media (max-width: 600px) {
    .stats-grid {
        gap: 1.25rem 0;
    }
    .stat-value {
        font-size: 1.45rem;
    }
    .stat-label {
        font-size: 0.85rem;
    }
}

/* ---------- Vos Enjeux chain ---------- */
@media (max-width: 767px) {
    .enjeux-section {
        padding: 3.5rem 1rem;
        background-image: linear-gradient(180deg, #fbfbfc 0%, #f0f0f3 100%);
    }
    .enjeux-chain-wrapper {
        overflow-x: visible;
    }
    .enjeu-node-col {
        width: 210px;
    }
    .node-title-container {
        height: auto;
        min-height: 56px;
        margin-bottom: 10px;
    }
    .horizontal-connector {
        margin: 12px 0;
    }
}

@media (max-width: 419px) {
    .enjeu-node-col {
        width: 200px;
    }
    .node-graphic-wrap {
        transform: scale(0.92);
    }
}

/* ---------- Misc container widths ---------- */
@media (max-width: 991px) {
    .livrables-container,
    .red-banner-container,
    .contact-container {
        max-width: 100%;
    }
}

/* ---------- Section titles: center on mobile only ---------- */
@media (max-width: 767px) {
    .section-title,
    .enjeux-section .section-title,
    .process-section .section-title {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .section-title {
        margin-bottom: 1.5rem;
    }
}