/* ═══════════════════════════════════════════════════════
   CVCI — Design Système Complet v8
   Typographie : Plus Jakarta Sans + DM Sans
   Palette     : Blanc · #1B3A6B · #2AACE2 · #F39200
═══════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap");

/* ── Variables ─────────────────────────────────────────── */
:root {
  --navy:    #1b3a6b;
  --navydk:  #0f2347;
  --cyan:    #2aace2;
  --cyanlt:  #60c3ec;
  --cyanbg:  #eaf6fd;
  /* --orange/--orangelt kept as aliases of cyan for backward compat only
     — the site now uses exclusively the CVCI logo palette (navy + cyan). */
  --orange:  var(--cyan);
  --orangelt:var(--cyanlt);
  --white:   #fff;
  --offwhite:#f8fafc;
  --light:   #eef5fb;
  --text:    #2c3d55;
  --muted:   #6a81a0;
  --border:  #d3e6f5;
  --s1: 0 2px 12px rgba(27,58,107,.07);
  --s2: 0 8px 32px rgba(27,58,107,.12);
  --s3: 0 20px 60px rgba(27,58,107,.18);
  --r:  10px;
  --rl: 16px;
  --t:  .25s cubic-bezier(.4,0,.2,1);
}

/* ── Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.65;
}
h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--navydk);
  line-height: 1.15;
  font-weight: 800;
}
a { color: inherit; text-decoration: none; transition: var(--t); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 1em; color: var(--text); }

/* Override Bootstrap container max-width */
.container { max-width: 1200px; }

/* ══════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════ */
.cv-topbar {
  background: var(--navydk);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 38px;
  font-size: 12px;
}
.cv-topbar a { color: rgba(255,255,255,.62); }
.cv-topbar a:hover { color: var(--cyan); }
.cv-tb-left { display: flex; gap: 22px; align-items: center; }
.cv-tb-left span { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.55); }
.cv-tb-left i { color: var(--cyan); font-size: 11px; }
.cv-tb-devis {
  background: var(--cyan);
  color: #fff !important;
  padding: 4px 14px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cv-tb-devis:hover { background: var(--cyanlt); }

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
.cv-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(27,58,107,.06);
  transition: box-shadow var(--t);
}
.cv-nav-row {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 0;
  padding: 0 40px;
}
.cv-logo img { height: 54px; width: auto; display: block; }
.cv-logo { flex-shrink: 0; margin-right: auto; }

/* Nav links */
.cv-nav { display: flex; align-items: center; gap: 2px; }
.cv-nav > li { position: relative; }
.cv-nav > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  border-radius: 8px;
  white-space: nowrap;
  transition: var(--t);
}
.cv-nav > li > a i.fa-angle-down { font-size: 10px; opacity: .55; }
.cv-nav > li > a:hover,
.cv-nav > li > a.active { color: var(--cyan); background: var(--cyanbg); }

/* Dropdown — animation : fade + scale (zoom doux), 250ms, easing fluide */
.cv-nav > li:hover .cv-drop {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.cv-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: var(--rl);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: scale(.94);
  transform-origin: top left;
  transition:
    opacity .25s cubic-bezier(.16,1,.3,1),
    transform .25s cubic-bezier(.16,1,.3,1),
    visibility .25s cubic-bezier(.16,1,.3,1);
  box-shadow: var(--s3), 0 0 0 1px var(--border);
  will-change: transform, opacity;
}
.cv-drop li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  transition: var(--t);
}
.cv-drop li a i {
  width: 28px; height: 28px;
  background: var(--light);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan); font-size: 12px; flex-shrink: 0;
  transition: var(--t);
}
.cv-drop li a:hover { background: var(--cyanbg); color: var(--cyan); }
.cv-drop li a:hover i { background: var(--cyan); color: #fff; }
.cv-drop li + li { margin-top: 2px; }

/* CTA button in nav */
.cv-nav-cta {
  margin-left: 20px;
  flex-shrink: 0;
}
.cv-nav-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cyan);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 4px 14px rgba(42,172,226,.28);
  transition: var(--t);
  white-space: nowrap;
}
.cv-nav-cta a:hover { background: var(--cyanlt); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(42,172,226,.38); }

/* Hamburger */
.cv-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: 16px;
}
.cv-burger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }

/* Mobile menu */
.cv-mobile {
  display: none;
  background: var(--navydk);
  padding: 20px 24px 28px;
  border-top: 2px solid var(--cyan);
}
.cv-mobile.open { display: block; }
.cv-mobile li a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.78);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

/* Page offset (topbar 38 + header 68) */
body { padding-top: 106px; }

/* ══════════════════════════════════════════════════════
   HERO — full viewport
══════════════════════════════════════════════════════ */
.cv-hero {
  position: relative;
  height: calc(100vh - 106px);
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cv-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Left-to-right gradient: solid dark → transparent */
.cv-hero-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10,22,50,.92) 0%,
    rgba(14,30,60,.82) 35%,
    rgba(20,45,90,.50) 65%,
    rgba(27,58,107,.10) 100%
  );
}
/* Subtle diagonal grid texture */
.cv-hero-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -50deg,
    rgba(42,172,226,.028) 0, rgba(42,172,226,.028) 1px,
    transparent 1px, transparent 55px
  );
}
.cv-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 660px;
}
.cv-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(42,172,226,.40);
  background: rgba(42,172,226,.10);
  color: var(--cyanlt);
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 26px;
  backdrop-filter: blur(8px);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cv-hero-h1 {
  font-size: clamp(40px, 5.5vw, 70px);
  font-weight: 900;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -2px;
  margin-bottom: 20px;
}
.cv-hero-h1 em {
  font-style: normal;
  color: var(--cyan);
}
.cv-hero-p {
  font-size: 17px;
  color: rgba(255,255,255,.68);
  line-height: 1.78;
  margin-bottom: 36px;
  max-width: 500px;
}
.cv-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.cv-btn-orange {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cyan);
  color: #fff;
  padding: 14px 30px;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 20px rgba(42,172,226,.32);
  transition: var(--t);
}
.cv-btn-orange:hover { background: var(--cyanlt); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(42,172,226,.42); color: #fff; }
.cv-btn-outline {
  display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.90);
  padding: 12px 28px;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  transition: var(--t);
  backdrop-filter: blur(4px);
}
.cv-btn-outline:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(42,172,226,.08); }
.cv-btn-cyan {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cyan);
  color: #fff;
  padding: 13px 28px;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(42,172,226,.30);
  transition: var(--t);
}
.cv-btn-cyan:hover { background: #1d99cc; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(42,172,226,.40); color: #fff; }

/* Stats row */
.cv-hero-stats { display: flex; gap: 28px; align-items: center; }
.cv-stat strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}
.cv-stat span { font-size: 11px; color: rgba(255,255,255,.48); text-transform: uppercase; letter-spacing: 1px; display: block; margin-top: 3px; }
.cv-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,.16); }

/* Floating card */
.cv-hero-card {
  position: absolute;
  right: 80px;
  bottom: 72px;
  z-index: 3;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 24px 60px rgba(10,22,50,.32);
  border-left: 4px solid var(--cyan);
  animation: heroFloat 4s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.cv-hero-card i { font-size: 28px; color: var(--cyan); }
.cv-hero-card b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 800; color: var(--navydk); }
.cv-hero-card small { font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════════════════════════
   LOGOS MARQUEE
══════════════════════════════════════════════════════ */
.cv-logos-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.cv-logos-label {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* ══════════════════════════════════════════════════════
   LOGO CLOUD — infinite slider (inspired by LogoCloud/InfiniteSlider)
   - no vertical lines between logos
   - logos shown in full color
   - soft mask fade on both edges
   - subtle slow-down on hover
══════════════════════════════════════════════════════ */
.cv-logos-wrap {
  overflow: hidden;
  padding: 28px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.cv-logos-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: cv-logos-scroll 45s linear infinite;
  will-change: transform;
}
/* Keep a single uniform speed — never pause, never slow on hover */
.cv-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 72px;
  padding: 0 8px;
  /* no border, no filter — logos stay in full color */
}
.cv-logo-slot img {
  height: 58px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform .3s ease;
}
.cv-logo-slot:hover img {
  transform: scale(1.06);
}
@keyframes cv-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-logos-track { animation: none; }
}
@media (max-width: 640px) {
  .cv-logos-track { gap: 40px; }
  .cv-logo-slot { height: 58px; }
  .cv-logo-slot img { height: 44px; max-width: 140px; }
}

/* ══════════════════════════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════════════════════════ */
.cv-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cyanbg);
  color: var(--cyan);
  border: 1px solid rgba(42,172,226,.22);
  border-radius: 100px;
  padding: 5px 15px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cv-h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 12px;
  line-height: 1.15;
}
.cv-h2 span { color: var(--cyan); }
.cv-lead {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 560px;
}

/* ══════════════════════════════════════════════════════
   GAMMES — IMAGE TILES (5 tuiles)
══════════════════════════════════════════════════════ */
.cv-gammes { padding: 90px 0; background: var(--offwhite); }
.cv-gammes-head { text-align: center; margin-bottom: 48px; }
.cv-gammes-head .cv-lead { margin: 0 auto; }

.cv-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 255px;
  gap: 18px;
}
/* Tile 1 — grande, couvre 2 colonnes */
.cv-tile:nth-child(1) { grid-column: span 2; }

.cv-tile {
  display: block;
  position: relative;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--s2);
  text-decoration: none;
}
.cv-tile-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.cv-tile:hover .cv-tile-photo { transform: scale(1.06); }
.cv-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,22,50,.88) 0%, rgba(10,22,50,.28) 50%, transparent 100%);
  transition: background var(--t);
}
.cv-tile:hover .cv-tile-shade { background: linear-gradient(to top, rgba(10,22,50,.92) 0%, rgba(20,45,90,.55) 65%, transparent 100%); }
.cv-tile-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 22px;
}
.cv-tile-ico {
  width: 40px; height: 40px;
  background: rgba(42,172,226,.18);
  border: 1px solid rgba(42,172,226,.35);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyanlt);
  font-size: 16px;
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
  transition: var(--t);
}
.cv-tile:hover .cv-tile-ico { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.cv-tile-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -.3px;
}
.cv-tile-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════
   ABOUT — split
══════════════════════════════════════════════════════ */
.cv-about { padding: 100px 0; background: #fff; overflow: hidden; }
.cv-about-visual { position: relative; padding: 0 32px 32px 0; }
.cv-about-photo {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--rl);
  box-shadow: var(--s3);
  display: block;
}
.cv-about-badge {
  position: absolute;
  bottom: 0; right: 0;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  border-radius: var(--rl);
  padding: 22px 26px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(27,58,107,.32);
}
.cv-about-badge b {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 44px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -2px;
}
.cv-about-badge small { font-size: 11px; color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; display: block; }
.cv-about-text { padding-left: 52px; }
.cv-about-text .cv-h2 { margin-top: 10px; }
.cv-about-text > p { font-size: 15.5px; color: var(--muted); line-height: 1.82; margin-bottom: 32px; }
.cv-checks { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.cv-check { display: flex; gap: 16px; align-items: flex-start; }
.cv-check i { font-size: 22px; color: var(--cyan); flex-shrink: 0; margin-top: 1px; }
.cv-check b { display: block; font-size: 15px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--navydk); margin-bottom: 3px; }
.cv-check p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ══════════════════════════════════════════════════════
   STATS — cercles SVG animés
══════════════════════════════════════════════════════ */
.cv-stats {
  padding: 90px 0;
  background: linear-gradient(155deg, var(--navydk) 0%, var(--navy) 100%);
  position: relative;
  overflow: hidden;
}
.cv-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(42,172,226,.09) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 50%, rgba(42,172,226,.06) 0%, transparent 55%);
}
.cv-stats-head { text-align: center; margin-bottom: 56px; position: relative; z-index: 1; }
.cv-stats-head .cv-h2 { color: #fff; font-size: clamp(26px,3vw,40px); }
.cv-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
.cv-ctr {
  text-align: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.cv-ctr.go { opacity: 1; transform: translateY(0); }
.cv-ctr-ring {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 18px;
}
.cv-ctr-svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.cv-ring-track { stroke: rgba(255,255,255,.08); }
.cv-ring-arc { transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.cv-ctr-val {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -2px;
}
.cv-ctr-val sup { font-size: 16px; color: var(--cyan); vertical-align: super; letter-spacing: 0; }
.cv-ctr-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.cv-ctr-desc { font-size: 12px; color: rgba(255,255,255,.38); }

/* ══════════════════════════════════════════════════════
   TÉMOIGNAGES
══════════════════════════════════════════════════════ */
.cv-testi { padding: 90px 0; background: var(--offwhite); }
.cv-testi-head { text-align: center; margin-bottom: 48px; }
.cv-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cv-testi-card {
  background: #fff;
  border-radius: var(--rl);
  padding: 30px 26px;
  box-shadow: var(--s1);
  border: 1px solid var(--border);
  transition: var(--t);
  position: relative;
}
.cv-testi-card::before {
  content: '\201C';
  position: absolute;
  top: 16px; right: 22px;
  font-size: 70px;
  line-height: 1;
  color: var(--cyanbg);
  font-family: Georgia, serif;
}
.cv-testi-card:hover { transform: translateY(-5px); box-shadow: var(--s2); }
.cv-stars { color: var(--cyan); font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.cv-testi-text { font-size: 14.5px; color: var(--text); line-height: 1.75; font-style: italic; margin-bottom: 22px; }
.cv-testi-author { display: flex; align-items: center; gap: 12px; }
.cv-testi-init {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.cv-testi-name { font-size: 14px; font-weight: 700; color: var(--navydk); font-family: 'Plus Jakarta Sans', sans-serif; display: block; }
.cv-testi-role { font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════════════════════════
   RÉALISATIONS — vrais projets liés aux pages detail-*
═════════════════════════════════════════════════════ */
.cv-refs { padding: 90px 0; background: var(--offwhite); }
.cv-refs-head { text-align: center; margin-bottom: 48px; }
.cv-refs-head .cv-lead {
  font-size: 15.5px;
  color: var(--muted);
  max-width: 640px;
  margin: 14px auto 0;
  line-height: 1.7;
}
.cv-refs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cv-ref-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--s1);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.cv-ref-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--s2);
}
.cv-ref-media {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--light);
}
.cv-ref-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cv-ref-card:hover .cv-ref-media img {
  transform: scale(1.05);
}
.cv-ref-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cv-ref-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--cyanbg);
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 5px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cv-ref-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--navydk);
  line-height: 1.35;
  margin: 0 0 10px;
  letter-spacing: -.2px;
}
.cv-ref-desc {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
}
.cv-ref-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .2px;
  transition: gap .25s ease, color .25s ease;
}
.cv-ref-card:hover .cv-ref-link {
  color: var(--navy);
}
@media (max-width: 900px) {
  .cv-refs-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════════════ */
.cv-cta {
  position: relative;
  padding: 100px 0;
  background-size: cover;
  background-position: center;
}
.cv-cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,22,50,.93), rgba(20,45,90,.86));
}
.cv-cta-inner { position: relative; z-index: 2; }
.cv-cta-h2 {
  font-size: clamp(26px,3.5vw,44px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.cv-cta-h2 span { color: var(--cyan); }
.cv-cta-p { font-size: 16px; color: rgba(255,255,255,.68); margin: 0; }
.cv-btn-white {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cyan);
  color: #fff;
  padding: 14px 32px;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 20px rgba(42,172,226,.32);
  transition: var(--t);
}
.cv-btn-white:hover { background: var(--cyanlt); transform: translateY(-1px); color: #fff; }

/* ══════════════════════════════════════════════════════
   FOOTER — light / white theme
   Logo in its natural colors, dark readable text
══════════════════════════════════════════════════════ */
.cv-footer {
  background: #fff;
  padding: 80px 0 0;
  position: relative;
  border-top: 1px solid var(--border);
}
.cv-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--cyan) 50%, var(--navy));
}
/* Logo: keep its natural navy/cyan colors — no filter */
.cv-footer-logo {
  height: 62px;
  width: auto;
  filter: none;
  opacity: 1;
  margin-bottom: 16px;
}
.cv-footer-about p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 20px;
}
.cv-socials { display: flex; gap: 8px; }
.cv-socials a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--light);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: var(--t);
}
.cv-socials a:hover {
  background: var(--cyan);
  color: #fff;
  transform: translateY(-2px);
}
.cv-footer-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cv-footer-links li { margin-bottom: 8px; }
.cv-footer-links li a {
  font-size: 13.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: var(--t);
}
.cv-footer-links li a::before { content: '›'; color: var(--cyan); font-size: 15px; }
.cv-footer-links li a:hover { color: var(--cyan); padding-left: 4px; }
.cv-contact-list { display: flex; flex-direction: column; gap: 13px; }
.cv-contact-item { display: flex; align-items: flex-start; gap: 11px; }
.cv-contact-ico {
  width: 30px; height: 30px;
  background: var(--cyanbg);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  font-size: 12px;
  flex-shrink: 0;
}
.cv-contact-item b {
  display: block;
  font-size: 10.5px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  margin-bottom: 2px;
}
.cv-contact-item span,
.cv-contact-item a {
  font-size: 13px;
  color: var(--muted);
  display: block;
  text-decoration: none;
}
.cv-contact-item a:hover { color: var(--cyan); }
.cv-footer-bottom {
  background: var(--offwhite);
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.cv-footer-btm-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.cv-footer-btm-inner p { font-size: 12px; color: var(--muted); margin: 0; }
.cv-footer-btm-links { display: flex; gap: 16px; }
.cv-footer-btm-links a { font-size: 12px; color: var(--muted); }
.cv-footer-btm-links a:hover { color: var(--cyan); }

/* ── Legacy ve-footer used on services/actualites/post/single-post/elements
   Same visual language as .cv-footer (white, dark text, cyan accents) ── */
.ve-footer {
  background: #fff;
  padding: 80px 0 0;
  position: relative;
  border-top: 1px solid var(--border);
}
.ve-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--cyan) 50%, var(--navy));
}
.ve-footer-brand img {
  height: 62px;
  width: auto;
  margin-bottom: 16px;
  filter: none;
}
.ve-footer-brand p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 20px;
}
.ve-social { display: flex; gap: 8px; }
.ve-social a {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--light);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--t);
}
.ve-social a:hover {
  background: var(--cyan);
  color: #fff;
  transform: translateY(-2px);
}
.ve-footer-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ve-footer-links { list-style: none; padding: 0; margin: 0; }
.ve-footer-links li { margin-bottom: 8px; }
.ve-footer-links li a {
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: var(--t);
}
.ve-footer-links li a::before { content: '›'; color: var(--cyan); font-size: 15px; }
.ve-footer-links li a:hover { color: var(--cyan); padding-left: 4px; }
.ve-footer-contact { list-style: none; padding: 0; margin: 0; }
.ve-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.ve-footer-contact li i {
  width: 28px; height: 28px;
  background: var(--cyanbg);
  color: var(--cyan);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ve-footer-contact li a {
  color: var(--muted);
  text-decoration: none;
}
.ve-footer-contact li a:hover { color: var(--cyan); }
.ve-footer-bottom {
  background: var(--offwhite);
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.ve-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.ve-footer-bottom-inner p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.ve-footer-bottom-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}
.ve-footer-bottom-inner ul li a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.ve-footer-bottom-inner ul li a:hover { color: var(--cyan); }

/* ══════════════════════════════════════════════════════
   PAGES CATÉGORIE
══════════════════════════════════════════════════════ */
.cv-page-hero {
  position: relative;
  height: 320px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.cv-page-hero-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,22,50,.90), rgba(20,45,90,.70));
}
.cv-page-hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 36px;
}
.cv-page-hero-body h1 {
  font-size: 38px;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -.8px;
}
.cv-page-hero-body h1 span { color: var(--cyan); }
.cv-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.50); }
.cv-breadcrumb a { color: rgba(255,255,255,.65); }
.cv-breadcrumb a:hover { color: var(--cyan); }
.cv-breadcrumb li.cur { color: var(--cyan); }
.cv-breadcrumb li + li::before { content: '›'; margin-right: 8px; color: rgba(255,255,255,.32); }

/* Cat intro */
.cv-cat-intro { background: #fff; padding: 58px 0 46px; }
.cv-cat-intro h2 { font-size: 30px; letter-spacing: -.6px; margin-bottom: 12px; }
.cv-cat-intro h3 { font-size: 16px; font-weight: 600; color: var(--cyan); margin-bottom: 14px; font-family: 'DM Sans', sans-serif; }
.cv-cat-intro p { font-size: 15px; color: var(--muted); line-height: 1.78; }
.cv-cat-intro p a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.cv-cat-intro p a:hover {
  color: var(--navy);
  border-bottom-color: var(--cyan);
}
.cv-cat-intro .cv-perimetres-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 22px;
  display: grid;
  gap: 12px;
}
.cv-cat-intro .cv-perimetres-list li {
  position: relative;
  padding: 14px 18px 14px 22px;
  background: var(--cyanbg);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.65;
}
.cv-cat-intro .cv-perimetres-list li strong {
  color: var(--navydk);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   PAGES DÉTAIL — listes à puces et sous-titres
═════════════════════════════════════════════════════ */
.cv-detail-content .cv-detail-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
  display: grid;
  gap: 10px;
}
.cv-detail-content .cv-detail-list li {
  position: relative;
  padding: 12px 16px 12px 22px;
  background: var(--cyanbg);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.6;
}
.cv-detail-content .cv-detail-h3,
.cv-cat-intro .cv-detail-h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--navydk);
  margin: 26px 0 10px;
  letter-spacing: -.2px;
}
.cv-detail-content p a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.cv-detail-content p a:hover {
  color: var(--navy);
  border-bottom-color: var(--cyan);
}
.cv-brand-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.cv-chip { background: var(--cyanbg); border: 1px solid var(--border); color: var(--navy); border-radius: 6px; padding: 4px 11px; font-size: 12px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }

/* Sub nav cards */
.cv-subnav { background: var(--light); padding: 72px 0; }
.cv-subnav-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cv-subnav-card {
  background: #fff;
  border-radius: var(--rl);
  padding: 30px 24px;
  box-shadow: var(--s1);
  border: 1px solid var(--border);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none;
  transition: var(--t);
}
.cv-subnav-card:hover { transform: translateY(-5px); box-shadow: var(--s2); border-color: var(--cyan); }
.cv-subnav-ico {
  width: 68px; height: 68px;
  background: var(--cyanbg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: var(--t);
}
.cv-subnav-card:hover .cv-subnav-ico { background: var(--cyan); }
.cv-subnav-ico i { font-size: 26px; color: var(--navy); transition: var(--t); }
.cv-subnav-card:hover .cv-subnav-ico i { color: #fff; }
.cv-subnav-card h4 { font-size: 17px; color: var(--navydk); margin-bottom: 9px; }
.cv-subnav-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* Blocks grille projets */
.cv-projects { background: var(--offwhite); padding: 72px 0; }
.cv-projects.white { background: #fff; }
.cv-proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
/* Single-card variant: keep the SAME card width as the standard
   3-column grid so every project card has an identical shape across
   all pages. The lone card sits at one-third width (top-left), exactly
   like a trailing card on a multi-card page. */
.cv-proj-grid.cv-proj-grid--single {
  grid-template-columns: repeat(3, 1fr);
}
/* Two-column variant for 4-card layouts (2x2 grid). */
.cv-proj-grid.cv-proj-grid--two {
  grid-template-columns: repeat(2, 1fr);
}
.cv-proj-card {
  background: #fff;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--s1);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: var(--t);
}
.cv-proj-card:hover { transform: translateY(-5px); box-shadow: var(--s2); }
.cv-proj-img { height: 185px; overflow: hidden; flex-shrink: 0; }
.cv-proj-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.cv-proj-card:hover .cv-proj-img img { transform: scale(1.06); }
.cv-proj-body { padding: 20px 18px; display: flex; flex-direction: column; flex: 1; }
.cv-proj-body h3 { font-size: 14.5px; font-weight: 700; line-height: 1.45; margin-bottom: 9px; }
.cv-proj-body h3 a { color: var(--navydk); }
.cv-proj-body h3 a:hover { color: var(--cyan); }
.cv-proj-body p { font-size: 13px; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 14px; }
.cv-proj-more {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--navy); font-weight: 700; font-size: 12.5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: var(--t);
  margin-top: auto;
}
.cv-proj-more:hover { color: var(--cyan); gap: 8px; }

/* Valeurs bar */
.cv-valeurs { background: #f6f9fc; padding: 76px 0; border-top: 1px solid #e8eef5; }
.cv-valeurs-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.cv-valeur {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  padding: 30px 24px;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease, border-color .35s ease;
}
.cv-valeur::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyanlt));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cv-valeur:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(15,35,71,.10);
  border-color: rgba(42,172,226,.35);
}
.cv-valeur:hover::before { transform: scaleX(1); }
.cv-valeur-ico {
  width: 52px; height: 52px;
  background: rgba(42,172,226,.10);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-size: 20px; color: var(--cyan);
  transition: var(--t);
}
.cv-valeur:hover .cv-valeur-ico { background: var(--cyan); color: #fff; }
.cv-valeur h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800;
  color: var(--navydk);
  margin: 0 0 8px;
  letter-spacing: -.2px;
}
.cv-valeur p {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; font-weight: 400;
  color: var(--muted);
  margin: 0; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   PAGES DÉTAIL
══════════════════════════════════════════════════════ */
.cv-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--navy); font-weight: 700; font-size: 13px;
  margin-bottom: 26px; font-family: 'Plus Jakarta Sans', sans-serif;
}
.cv-back:hover { color: var(--cyan); }
.cv-detail-body p { font-size: 15px; line-height: 1.82; color: var(--text); margin-bottom: 16px; }
.cv-detail-bullets { list-style: none; padding: 0; margin: 20px 0 24px; display: flex; flex-direction: column; gap: 11px; }
.cv-detail-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); line-height: 1.6; }
.cv-detail-bullets li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; margin-top: 7px; }
.cv-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 28px; }
.cv-detail-tag { background: var(--cyanbg); border: 1px solid var(--border); color: var(--navy); border-radius: 18px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.cv-detail-cta { background: var(--light); border-radius: var(--rl); padding: 22px 26px; border-left: 4px solid var(--cyan); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cv-detail-cta p { font-size: 15px; font-weight: 700; color: var(--navydk); font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; }
.cv-sidebar { position: sticky; top: 116px; }
.cv-sidebar-box { background: #fff; border-radius: var(--rl); padding: 24px 20px; box-shadow: var(--s1); border: 1px solid var(--border); margin-bottom: 18px; }
.cv-sidebar-box h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; color: var(--navydk); font-family: 'Plus Jakarta Sans', sans-serif; }
.cv-sidebar-box h4 i { color: var(--cyan); }
.cv-addr-list li { padding: 11px 0; border-bottom: 1px dashed var(--border); display: flex; align-items: flex-start; gap: 10px; }
.cv-addr-list li:last-child { border-bottom: none; }
.cv-flag { font-size: 19px; flex-shrink: 0; }
.cv-addr-list b { display: block; font-size: 13px; color: var(--navydk); font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: 1px; }
.cv-addr-list span, .cv-addr-list a { font-size: 12.5px; color: var(--muted); display: block; text-decoration: none; }
.cv-addr-list a:hover { color: var(--cyan); }

/* ══════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════ */
.cv-offices-bar { background: var(--light); padding: 56px 0 0; }
.cv-offices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.cv-office-card {
  background: #fff;
  border-radius: var(--rl);
  padding: 26px 20px;
  box-shadow: var(--s1);
  border: 1px solid var(--border);
  text-align: center;
  transition: var(--t);
}
.cv-office-card:hover { transform: translateY(-4px); box-shadow: var(--s2); }
.cv-office-ico { width: 52px; height: 52px; background: var(--cyanbg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.cv-office-ico i { font-size: 18px; color: var(--cyan); }
.cv-office-card h5 { font-size: 15px; font-weight: 700; margin-bottom: 7px; font-family: 'Plus Jakarta Sans', sans-serif; }
.cv-office-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

.cv-contact-section { background: var(--light); padding: 72px 0; }
.cv-contact-form-box {
  background: #fff;
  border-radius: var(--rl);
  padding: 40px 36px;
  box-shadow: var(--s1);
}
.cv-contact-form-box .cv-h2 { margin-bottom: 6px; }
.cv-contact-form-box > p { font-size: 14.5px; color: var(--muted); margin-bottom: 26px; }
.cv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cv-form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.cv-form-group label { font-size: 11.5px; font-weight: 700; color: var(--navydk); font-family: 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .4px; }
.cv-form-group input, .cv-form-group select, .cv-form-group textarea {
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--navydk);
  outline: none;
  font-family: 'DM Sans', sans-serif;
  background: var(--offwhite);
  transition: var(--t);
  width: 100%;
}
.cv-form-group input:focus, .cv-form-group select:focus, .cv-form-group textarea:focus {
  border-color: var(--cyan);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42,172,226,.10);
}
.cv-form-group textarea { resize: vertical; }
.cv-contact-right { display: flex; flex-direction: column; gap: 18px; }
.cv-cinfo-box { background: #fff; border-radius: var(--rl); padding: 22px; box-shadow: var(--s1); border: 1px solid var(--border); }
.cv-cinfo-box h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; color: var(--navydk); font-family: 'Plus Jakarta Sans', sans-serif; }
.cv-cinfo-box h4 i { color: var(--cyan); }
.cv-map-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--navy); font-family: 'Plus Jakarta Sans', sans-serif; }
.cv-map-link:hover { color: var(--cyan); }

/* ══════════════════════════════════════════════════════
   SECTION HEADER HELPER
══════════════════════════════════════════════════════ */
.cv-sec-head { text-align: center; margin-bottom: 48px; }
.cv-sec-head .cv-lead { margin: 0 auto; }

/* ══════════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════════ */
.preloader {
  position: fixed; inset: 0;
  background: var(--navydk);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); animation-timing-function: cubic-bezier(0,1,1,0); }
.lds-ellipsis div:nth-child(1){left:8px;animation:e1 .6s infinite}
.lds-ellipsis div:nth-child(2){left:8px;animation:e2 .6s infinite}
.lds-ellipsis div:nth-child(3){left:32px;animation:e2 .6s infinite}
.lds-ellipsis div:nth-child(4){left:56px;animation:e3 .6s infinite}
@keyframes e1{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes e3{0%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes e2{0%{transform:translate(0)}100%{transform:translate(24px)}}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .cv-tiles { grid-template-rows: 260px 220px; }
  .cv-tile:nth-child(1) { grid-column: span 1; }
  .cv-tiles { grid-template-columns: repeat(3,1fr); grid-template-rows: 220px 220px; }
}
@media (max-width: 991px) {
  body { padding-top: 98px; }
  .cv-hero { min-height: 520px; height: auto; padding: 70px 0 60px; }
  .cv-nav, .cv-nav-cta { display: none; }
  .cv-burger { display: flex; }
  .cv-nav-row { padding: 0 20px; height: 60px; }
  .cv-tb-left { display: none; }
  .cv-topbar { padding: 0 20px; }
  .cv-stats-grid { grid-template-columns: repeat(2,1fr); }
  .cv-testi-grid { grid-template-columns: 1fr; }
  .cv-tiles { grid-template-columns: repeat(2,1fr); grid-template-rows: none; }
  .cv-tile:nth-child(1) { grid-column: span 2; height: 220px; }
  .cv-tile { height: 200px; }
  .cv-about-text { padding-left: 0; margin-top: 32px; }
  .cv-about-visual { padding: 0; }
  .cv-about-badge { display: none; }
  .cv-about-photo { height: 320px; }
  .cv-subnav-grid { grid-template-columns: repeat(2,1fr); }
  .cv-offices-grid { grid-template-columns: 1fr; }
  .cv-form-row { grid-template-columns: 1fr; }
  .cv-hero-card { display: none; }
  .cv-valeurs-grid { grid-template-columns: repeat(2,1fr); }
  .cv-proj-grid { grid-template-columns: repeat(2,1fr); }
  .cv-proj-grid.cv-proj-grid--single { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 767px) {
  .cv-tiles { grid-template-columns: 1fr; }
  .cv-tile, .cv-tile:nth-child(1) { grid-column: span 1; height: 200px; }
  .cv-stats-grid { grid-template-columns: repeat(2,1fr); gap: 18px; }
  .cv-ctr-ring { width: 120px; height: 120px; }
  .cv-ctr-svg { width: 120px; height: 120px; }
  .cv-ctr-val { font-size: 32px; }
  .cv-subnav-grid { grid-template-columns: 1fr; }
  .cv-proj-grid { grid-template-columns: 1fr; }
  .cv-proj-grid.cv-proj-grid--two { grid-template-columns: 1fr; }
  .cv-proj-grid.cv-proj-grid--single { grid-template-columns: 1fr; }
  .cv-footer-btm-inner { flex-direction: column; text-align: center; }
  .cv-hero-h1 { font-size: 36px; letter-spacing: -1px; }
}

/* ══════════════════════════════════════════════════════
   LANGUAGE SWITCH (FR / EN)
══════════════════════════════════════════════════════ */
.cv-tb-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cv-lang {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 2px;
  height: 26px;
}
.cv-lang button,
.cv-lang a {
  /* Ajout migration Astro : le sélecteur de langue est fait de liens,
     pas de boutons. Un <a> n'a ni le centrage ni l'absence de
     soulignement d'un <button> — d'où ces trois propriétés. */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.55);
  font: 600 10.5px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .6px;
  padding: 0 10px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.cv-lang button:hover,
.cv-lang a:hover { color: #fff; }
.cv-lang button.active,
.cv-lang a.active {
  background: var(--cyan);
  color: #fff;
  box-shadow: 0 2px 6px rgba(42,172,226,.4);
}
@media (max-width: 640px) {
  .cv-tb-right { gap: 8px; }
  .cv-lang { height: 22px; }
  .cv-lang button,
.cv-lang a { font-size: 10px; padding: 0 8px; height: 18px; }
}

/* ══════════════════════════════════════════════════════
   CLIPPED SHAPE PRESENTATION (single shape — clip-another1)
   Replaces the old .cv-about-visual block with a distinctive
   cut-out silhouette inspired by clipped-shape-image component.
══════════════════════════════════════════════════════ */
.cv-clipped-figure {
  position: relative;
  margin: 0;
  padding: 0;
  aspect-ratio: 4/5;
  max-width: 460px;
  width: 100%;
}
.cv-clipped-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#cv-clip-intro-animated);
  -webkit-clip-path: url(#cv-clip-intro-animated);
  position: relative;
  z-index: 1;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  background: var(--light);
}
.cv-clipped-figure:hover .cv-clipped-img {
  transform: scale(1.04);
}
/* Badge overlaid on the clipped image */
.cv-clipped-badge {
  position: absolute;
  left: -18px;
  bottom: 22px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 22px;
  box-shadow: var(--s3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  margin: 0;
  border: 1px solid var(--border);
}
.cv-clipped-badge b {
  color: var(--cyan);
  font: 800 28px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.5px;
}
.cv-clipped-badge small {
  color: var(--navy);
  font: 600 11px/1.3 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .8px;
  max-width: 90px;
  display: block;
}
/* Brand-blue backing shape — same clipped outline as the image, offset
   20px to the bottom-right so it peeks out behind the photo. Applies
   to both .cv-clipped-figure instances (cv-about-intro AND cv-about).
   References the SAME #cv-clip-intro-animated clipPath as the image,
   so when the <path>'s `d` attribute animates, both the image and the
   backing morph together in perfect sync (notch lands in the same
   corner on both layers). Uses var(--cyan) = the CVCI brand blue. */
.cv-clipped-figure::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background: var(--cyan);
  clip-path: url(#cv-clip-intro-animated);
  -webkit-clip-path: url(#cv-clip-intro-animated);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 992px) {
  .cv-clipped-figure { margin: 0 auto 30px; }
  .cv-clipped-badge { left: 0; bottom: 12px; padding: 10px 16px; }
  .cv-clipped-badge b { font-size: 22px; }
  .cv-clipped-badge small { font-size: 10px; max-width: 80px; }
}

/* ══════════════════════════════════════════════════════
   À PROPOS DE CVCI — rich presentation block
   Sits between logos and services, tells who CVCI is.
══════════════════════════════════════════════════════ */
.cv-about-intro {
  padding: 100px 0 90px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(42,172,226,.06), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(42,172,226,.04), transparent 60%),
    #fff;
  position: relative;
}
.cv-about-intro-head {
  max-width: 860px;
  margin: 0 auto 60px;
  text-align: center;
}
.cv-about-intro-head .cv-h2 {
  margin: 12px 0 22px;
}
.cv-about-intro-lead {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  max-width: 720px;
  margin: 0 auto;
}
.cv-about-intro-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Reproducing the reference design: text on the LEFT, visual stack on the RIGHT.
   DOM order also matches (text first), so no explicit grid-column placement
   needed — children flow naturally. */
.cv-about-intro-text   { grid-column: 1; grid-row: 1; }
.cv-about-intro-visual { grid-column: 2; grid-row: 1; }
.cv-about-intro-text p {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.78;
  margin: 0 0 18px;
}
.cv-about-intro-text p:last-of-type {
  margin-bottom: 28px;
}
/* When the 3-pillars (.cv-checks) block is folded into Qui sommes-nous,
   give it a touch more room above and tighten the gap below to keep the
   composition compact and corporate. */
.cv-about-intro-text .cv-checks {
  margin-top: 8px;
  margin-bottom: 28px;
}
.cv-about-intro-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cv-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  color: var(--navy);
  background: #fff;
  font: 600 13px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .2px;
  text-decoration: none;
  transition: all .25s ease;
}
.cv-btn-ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-1px);
  box-shadow: var(--s1);
}
.cv-about-intro-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
/* Wrapper for the visual side — hosts the stacked-figures composition.
   `position: relative` so the dotted decoration can be absolutely placed. */
.cv-about-intro-visual {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ────────────────────────────────────────────────────────
   Stacked-figures composition — reproduces the reference
   design where two clipped images sit in a diagonal layout
   (top-right + bottom-left), with a dotted decoration in
   the upper-left corner and an experience badge floating
   at the bottom-left meeting point.

   Built on a 4×4 CSS grid so each figure can occupy a
   precise 75%-wide × 50%-tall region of the container,
   with a small overlap in the diagonal middle for visual
   weight. Both figures share the SAME #cv-clip-intro-animated
   path, so they morph together as the notch cycles.
   ──────────────────────────────────────────────────────── */
.cv-stacked-figures {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Slightly taller than wide — gives breathing room for the diagonal
     stagger and the badge that protrudes from the bottom figure. */
  aspect-ratio: 1 / 1.08;
  margin: 0 auto;
}

/* Override the base figure rules (which assume a single 4/5-aspect figure
   centered on the page) so each stacked figure is positioned absolutely
   and fills its allocated slot, not the entire container. */
.cv-stacked-figures .cv-clipped-figure {
  position: absolute;
  aspect-ratio: auto;
  max-width: none;
  margin: 0;
}

/* The cyan backing shape (.cv-clipped-figure::before) would create
   overlapping cyan blocks if applied to both stacked figures — visually
   too busy. We disable it for stacked figures while preserving it on
   the standalone figure in the Pourquoi-CVCI section below. */
.cv-stacked-figures .cv-clipped-figure::before {
  display: none;
}

/* TOP figure: upper-right, 65% wide × 58% tall. Its bottom-left corner
   reaches into the diagonal middle, where it'll overlap with the bottom
   figure. Sits BELOW the bottom figure (z-index 1) so the bottom one
   appears in front in the overlap zone — matches the reference where
   the lower image visually sits above the upper one in the middle. */
.cv-stack-top {
  top: 0;
  right: 0;
  width: 65%;
  height: 58%;
  z-index: 1;
}

/* BOTTOM figure: lower-left, 70% wide × 58% tall. Slightly wider than
   the top one to give the composition asymmetry (also like the reference).
   Z-index 2 — sits above the top figure in the diagonal overlap region.
   The 25/15+ badge attaches to its bottom edge via .cv-clipped-badge. */
.cv-stack-bottom {
  bottom: 0;
  left: 0;
  width: 70%;
  height: 58%;
  z-index: 2;
}

/* Badge inside the stacked composition — overrides the base
   .cv-clipped-badge position (which has left:-18px, bottom:22px and
   makes the badge stick out to the left of a single figure). Here we
   want it to sit INSIDE the bottom image, lower-center-ish, like the
   "25 Years Of Experience" red badge in the reference design. */
.cv-stacked-figures .cv-clipped-badge {
  left: 18px;
  bottom: 18px;
  background: var(--cyan);
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(42,172,226, .35);
}
.cv-stacked-figures .cv-clipped-badge b {
  color: #fff;
  font-size: 24px;
}
.cv-stacked-figures .cv-clipped-badge small {
  color: rgba(255, 255, 255, .9);
  letter-spacing: .6px;
}

/* Decorative dotted pattern in the upper-left of the composition —
   mirrors the "scattered dots" motif from the reference design. Pure
   CSS (radial-gradient tile), no image asset needed. Sits BEHIND the
   figures via z-index 0 and pointer-events:none. */
.cv-deco-dots {
  position: absolute;
  top: -8px;
  left: -10px;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(circle, var(--cyan) 1.6px, transparent 1.9px);
  background-size: 15px 15px;
  background-position: 0 0;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────
   Animated notch — scoped to the cv-about-intro shape only.
   Instead of CSS polygon() (which only supports straight edges
   and produces sharp 90° corners), we animate the `d` attribute
   of the inline <path> inside #cv-clip-intro-animated. Because
   SVG paths support cubic Bezier curves, every corner of the
   clipped shape — outer AND notch — stays softly rounded in
   all 4 states. CSS can interpolate between two `d` values as
   long as they share the exact same command structure; all 4
   keyframes below use M H C V C H C V C H C V C Z (14 commands)
   and all start at M(0.5, 0), a point that sits on the top
   edge of all 4 variants.

   The other .cv-clipped-figure in the page (the "35+ Ans
   d'expertise" one) is untouched — it keeps url(#cv-clip-presentation).
   ──────────────────────────────────────────────────────── */
/* Animation runs continuously — the single <path class="cv-animated-path">
   inside the shared clipPath cycles through all 4 notch positions
   infinitely. Both .cv-clipped-figure instances clip against this one
   animated path, so they update together every frame.

   The keyframes hold each state for 20% of the cycle (~1.6s) and morph
   between states over 5% (~0.4s), so the eye reads "notch rests in a
   corner, slides to the next, rests again" rather than a continuous wobble. */
.cv-animated-path {
  animation: cv-notch-spin 8s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes cv-notch-spin {
  /* 0%-20% — TOP-RIGHT notch (start & loop point).
     All 4 rounded corners + notch corners preserved via Bezier. */
  0%, 20% {
    d: path("M0.5 0 H0.5765 C0.6265 0 0.6665 0.034 0.6665 0.075 V0.1148 C0.6665 0.1558 0.7065 0.1898 0.7565 0.1898 H0.91 C0.96 0.1898 1 0.2238 1 0.2648 V0.925 C1 0.966 0.96 1 0.91 1 H0.09 C0.04 1 0 0.966 0 0.925 V0.075 C0 0.034 0.04 0 0.09 0 Z");
  }
  /* 25%-45% — BOTTOM-RIGHT notch */
  25%, 45% {
    d: path("M0.5 0 H0.91 C0.96 0 1 0.034 1 0.075 V0.7352 C1 0.7762 0.96 0.8102 0.91 0.8102 H0.7565 C0.7065 0.8102 0.6665 0.8442 0.6665 0.8852 V0.925 C0.6665 0.966 0.6265 1 0.5765 1 H0.09 C0.04 1 0 0.966 0 0.925 V0.075 C0 0.034 0.04 0 0.09 0 Z");
  }
  /* 50%-70% — BOTTOM-LEFT notch */
  50%, 70% {
    d: path("M0.5 0 H0.91 C0.96 0 1 0.034 1 0.075 V0.925 C1 0.966 0.96 1 0.91 1 H0.4235 C0.3735 1 0.3335 0.966 0.3335 0.925 V0.8852 C0.3335 0.8442 0.2935 0.8102 0.2435 0.8102 H0.09 C0.04 0.8102 0 0.7762 0 0.7352 V0.075 C0 0.034 0.04 0 0.09 0 Z");
  }
  /* 75%-95% — TOP-LEFT notch */
  75%, 95% {
    d: path("M0.5 0 H0.91 C0.96 0 1 0.034 1 0.075 V0.925 C1 0.966 0.96 1 0.91 1 H0.09 C0.04 1 0 0.966 0 0.925 V0.2648 C0 0.2238 0.04 0.1898 0.09 0.1898 H0.2435 C0.2935 0.1898 0.3335 0.1558 0.3335 0.1148 V0.075 C0.3335 0.034 0.3735 0 0.4235 0 Z");
  }
  /* 100% — back to TR to close the loop cleanly */
  100% {
    d: path("M0.5 0 H0.5765 C0.6265 0 0.6665 0.034 0.6665 0.075 V0.1148 C0.6665 0.1558 0.7065 0.1898 0.7565 0.1898 H0.91 C0.96 0.1898 1 0.2238 1 0.2648 V0.925 C1 0.966 0.96 1 0.91 1 H0.09 C0.04 1 0 0.966 0 0.925 V0.075 C0 0.034 0.04 0 0.09 0 Z");
  }
}
.cv-ai-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.cv-ai-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.cv-ai-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--s2);
  border-color: transparent;
}
.cv-ai-card:hover::before {
  transform: scaleX(1);
}
.cv-ai-ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--cyanbg);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 16px;
  transition: all .3s ease;
}
.cv-ai-card:hover .cv-ai-ico {
  background: var(--cyan);
  color: #fff;
}
.cv-ai-num {
  font: 800 32px/1 'Plus Jakarta Sans', sans-serif;
  color: var(--navy);
  letter-spacing: -1px;
  margin-bottom: 4px;
}
.cv-ai-num sup {
  font-size: 18px;
  color: var(--cyan);
  margin-left: 2px;
  top: -0.6em;
}
.cv-ai-lbl {
  font: 700 11px/1 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--cyan);
  margin-bottom: 10px;
}
.cv-ai-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 992px) {
  .cv-about-intro { padding: 70px 0 60px; }
  .cv-about-intro-head { margin-bottom: 44px; }
  .cv-about-intro-body {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  /* Let the two children flow in their natural DOM order (text first, visual second)
     instead of staying pinned to columns 1 and 2. */
  .cv-about-intro-visual,
  .cv-about-intro-text {
    grid-column: 1;
    grid-row: auto;
  }
  .cv-about-intro-lead { font-size: 16px; }

  /* Stacked figures collapse to a simple vertical column on mobile —
     the diagonal absolute layout doesn't read well on narrow screens.
     We reset position back to static and let flexbox stack the two
     figures vertically with a small gap. */
  .cv-stacked-figures {
    display: flex;
    flex-direction: column;
    gap: 18px;
    aspect-ratio: auto;
    max-width: 380px;
  }
  .cv-stacked-figures .cv-clipped-figure {
    position: static;
    aspect-ratio: 5 / 4;
    width: 100%;
    height: auto;
  }
  .cv-stack-top, .cv-stack-bottom {
    width: 100%;
    height: auto;
    top: auto; right: auto; bottom: auto; left: auto;
  }
  .cv-deco-dots {
    width: 60px;
    height: 60px;
    top: -6px;
    left: -6px;
    background-size: 11px 11px;
  }
}
@media (max-width: 560px) {
  .cv-about-intro-highlights { grid-template-columns: 1fr; }
  .cv-about-intro-cta { flex-direction: column; align-items: stretch; }
  .cv-about-intro-cta a { justify-content: center; }
  .cv-ai-num { font-size: 28px; }
}



/* ══════════════════════════════════════════════════════
   POURQUOI NOUS CHOISIR — 3 reasons grid on light background
   Sits between Nos services and Témoignages. Card pattern reuses
   the cv-tile styling family with simpler icon-first layout.
══════════════════════════════════════════════════════ */
.cv-why {
  background: #f7fafc;
  padding: 100px 0;
}
.cv-why-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.cv-why-head .cv-tag { margin-bottom: 14px; }
.cv-why-head .cv-h2  { margin-bottom: 16px; }
.cv-why-head .cv-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.cv-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cv-why-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cv-why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--s2);
  border-color: var(--cyan);
}
.cv-why-ico {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(42,172,226,.12), rgba(42,172,226,.04));
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.cv-why-card h3 {
  font: 700 17px/1.35 'Plus Jakarta Sans', sans-serif;
  color: var(--navy);
  margin: 0 0 10px;
}
.cv-why-card p {
  font: 400 14.5px/1.65 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   FAQ — accordion (left) + contact form on navy block (right)
   Mirrors the reference screenshot layout. The form panel uses
   the navy brand color so it visually punches against the rest
   of the page and reads like a "primary CTA" block.
══════════════════════════════════════════════════════ */
.cv-faq {
  padding: 100px 0;
  background: #fff;
}
.cv-faq-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.cv-faq-left .cv-tag { margin-bottom: 14px; }
.cv-faq-left .cv-h2  { margin-bottom: 16px; }
.cv-faq-lead {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 32px;
}

/* Accordion items — uses native <details>/<summary> so it works
   without JavaScript; we only style the visual presentation. */
.cv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cv-faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cv-faq-item[open] {
  border-color: var(--cyan);
  box-shadow: var(--s1);
}
.cv-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
}
/* Hide the default browser disclosure arrow on Webkit + Firefox */
.cv-faq-item summary::-webkit-details-marker { display: none; }
.cv-faq-item summary::marker { content: ""; }
.cv-faq-q {
  font: 600 15px/1.4 'Plus Jakarta Sans', sans-serif;
  color: var(--navy);
  flex: 1;
}
.cv-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(42,172,226,.12);
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: transform .3s ease, background .25s ease, color .25s ease;
}
.cv-faq-item[open] .cv-faq-icon {
  transform: rotate(45deg);    /* + becomes × when open */
  background: var(--cyan);
  color: #fff;
}
.cv-faq-a {
  padding: 0 22px 20px;
}
.cv-faq-a p {
  font: 400 14.5px/1.7 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  margin: 0;
}

/* Right column: full-bleed wrapper that extends past the .container
   to the right edge of the viewport, with a chantier photo as its
   background. The navy form panel (.cv-faq-right) sits on top with
   margin around it so the photo frames the panel.

   The trick for the full-bleed: position relative, then push the
   right edge into negative space using a wide pseudo-element OR a
   calc-based negative margin. Here we use a calc — works at any
   viewport width without JS. */
.cv-faq-right-col {
  position: relative;
  display: flex;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(27,58,107,.15), rgba(27,58,107,.30)),
    url("/img/cvci/big/AdobeStock319231616jpeg_60eff1f0735b3.jpeg") center/cover no-repeat;
  /* Full-bleed: extend the wrapper from its column position all the
     way to the right edge of the viewport, regardless of the .container
     gutter. calc((100vw - 100%) / 2) measures the distance from the
     right edge of this column to the right edge of the screen. */
  margin-right: calc((100vw - 100%) / -2);
  padding-right: calc((100vw - 100%) / 2);
}

/* Right panel — solid navy block with the form. Sits ON TOP OF the
   chantier photo that fills the .cv-faq-right-col wrapper (the photo
   is the background of the column, the panel floats over it). */
.cv-faq-right {
  background: var(--navy);
  border-radius: 14px;
  padding: 40px 36px;
  color: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 0 24px 60px rgba(27,58,107,.35);
  /* Capped width — the panel never stretches into the full-bleed area
     to the right. It stays a tidy form-sized block aligned to the left
     of the column. */
  width: 100%;
  max-width: 440px;
  margin: 32px 0;
}
.cv-faq-form-head h3 {
  font: 700 22px/1.25 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  margin: 0 0 6px;
}
.cv-faq-form-head p {
  color: rgba(255,255,255,.75);
  font-size: 13px;
  margin: 0 0 26px;
}
.cv-faq-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cv-faq-field input,
.cv-faq-field textarea {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 13px 16px;
  color: #fff;
  font: 400 14px/1.5 'Plus Jakarta Sans', sans-serif;
  transition: border-color .25s ease, background .25s ease;
}
.cv-faq-field input::placeholder,
.cv-faq-field textarea::placeholder {
  color: rgba(255,255,255,.55);
}
.cv-faq-field input:focus,
.cv-faq-field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(255,255,255,.12);
}
.cv-faq-field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cv-faq-submit {
  margin-top: 6px;
  background: var(--cyan);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font: 700 14px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .25s ease, transform .2s ease;
}
.cv-faq-submit:hover {
  background: #1f9ed4;
  transform: translateY(-1px);
}

/* Mobile breakpoints for the two new sections */
@media (max-width: 992px) {
  .cv-why { padding: 70px 0; }
  .cv-why-head { margin-bottom: 40px; }
  .cv-why-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .cv-faq { padding: 70px 0; }
  .cv-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  /* On mobile, the column is no longer full-bleed (would look weird
     stacked vertically). The chantier photo just fills the wrapper at
     normal column width, with the navy panel taking the full width. */
  .cv-faq-right-col {
    margin-right: 0;
    padding-right: 0;
    min-height: 0;
    padding: 24px;
    align-self: auto;
  }
  .cv-faq-right {
    max-width: none;
    margin: 0;
    padding: 32px 28px;
  }
}
@media (max-width: 600px) {
  .cv-why-grid { grid-template-columns: 1fr; }
  .cv-why-card { padding: 24px 22px; }
}

/* ══════════════════════════════════════════════════════
   HEADER v2 — single-row clean nav (CASE-inspired)
   WHITE version — minimalist & modern
   Applied via .cv-header-v2 on <header>
══════════════════════════════════════════════════════ */
.cv-header-v2 {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 16px rgba(27,58,107,.04);
}
.cv-header-v2 .cv-nav-row {
  height: 78px;
  padding: 0 40px;
  gap: 0;
}
.cv-header-v2 .cv-logo img {
  height: 46px;
  /* logo stays in its original navy — no filter */
}
.cv-header-v2 .cv-nav {
  margin: 0 auto;
  gap: 4px;
}
.cv-header-v2 .cv-nav > li > a {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 8px 14px;
  letter-spacing: .1px;
  border-radius: 6px;
}
.cv-header-v2 .cv-nav > li > a i.fa-angle-down {
  color: rgba(0,0,0,.4);
}
.cv-header-v2 .cv-nav > li > a:hover,
.cv-header-v2 .cv-nav > li > a.active {
  color: var(--cyan);
  background: transparent;
}
.cv-header-v2 .cv-nav > li > a.active { position: relative; }
.cv-header-v2 .cv-nav > li > a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
}
/* Right-side actions cluster */
.cv-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Orange CTA pill with arrow */
.cv-nav-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cyan);
  color: #fff;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  box-shadow: 0 6px 20px rgba(42,172,226,.28);
  transition: all .25s ease;
  white-space: nowrap;
}
.cv-nav-cta-pill .cv-cta-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform .3s ease;
}
.cv-nav-cta-pill:hover {
  background: var(--cyanlt);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(42,172,226,.4);
  color: #fff;
}
.cv-nav-cta-pill:hover .cv-cta-arrow { transform: translateX(3px); }

/* Language toggle — light theme */
.cv-header-v2 .cv-lang {
  background: #f4f5f7;
  border: 1px solid #e7eaee;
}
.cv-header-v2 .cv-lang button,
.cv-header-v2 .cv-lang a {
  color: #4a5565;
}
.cv-header-v2 .cv-lang button:hover,
.cv-header-v2 .cv-lang a:hover { color: var(--cyan); }
.cv-header-v2 .cv-lang button.active,
.cv-header-v2 .cv-lang a.active {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 6px rgba(27,58,107,.25);
}

/* Burger (mobile) — navy bars on white */
.cv-header-v2 .cv-burger span { background: var(--navy); }

/* Dropdowns — cyan hover accent */
.cv-header-v2 .cv-drop li a:hover { background: var(--cyanbg); color: var(--cyan); }
.cv-header-v2 .cv-drop li a:hover i { background: var(--cyan); color: #fff; }

/* Mobile menu — light theme */
.cv-header-v2 .cv-mobile { background: #fff; border-top: 1px solid var(--border); }
.cv-header-v2 .cv-mobile ul li a { color: var(--navy); }
.cv-header-v2 .cv-mobile ul li a:hover { color: var(--cyan); }

/* Scoped body padding for v2 header (no topbar, just 78px nav).
   Other pages with legacy topbar+nav keep their 106px padding. */
body:has(.cv-header-v2) { padding-top: 78px; }

/* ══════════════════════════════════════════════════════
   HERO v2 — CASE layout + CVCI original colors
   Navy blue mood on hero (the "ancienne couleur")
   Cyan accents on pill & em (CVCI brand)
══════════════════════════════════════════════════════ */
.cv-hero-v2 {
  position: relative;
  min-height: 640px;
  height: auto;
  padding: 120px 0 200px;  /* bottom padding for overlapping cards */
  display: block;
  overflow: visible;
}
.cv-hero-v2 .cv-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  /* Cinematic Ken-Burns: slow zoom + tiny diagonal pan, alternates
     forward/reverse seamlessly so it never snaps back. Gives the photo
     a "video-like" living-camera feel. */
  animation: cv-hero-kenburns 32s ease-in-out infinite alternate;
  transform-origin: 65% 45%;  /* pivot on the subjects on the right */
  will-change: transform;
}
@keyframes cv-hero-kenburns {
  0% {
    transform: scale(1.08) translate3d(1.2%, 0.6%, 0);
    filter: brightness(1) saturate(1);
  }
  100% {
    transform: scale(1.18) translate3d(-1.6%, -1.2%, 0);
    filter: brightness(1.04) saturate(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cv-hero-v2 .cv-hero-bg {
    animation: none;
    transform: scale(1.05);
  }
}
@media (max-width: 768px) {
  /* Simpler scale-only version on mobile — saves battery, avoids pan */
  .cv-hero-v2 .cv-hero-bg {
    animation-duration: 40s;
  }
  @keyframes cv-hero-kenburns {
    0%   { transform: scale(1.06); }
    100% { transform: scale(1.14); }
  }
}
/* Ethereal beams layer — Three.js canvas sits above photo, below mask.
   'screen' blend mode makes cyan beams appear luminescent over the image. */
.cv-hero-beams {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: .85;
  mix-blend-mode: screen;
}
.cv-hero-beams canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Navy blue → transparent diagonal mask (original CVCI mood) */
.cv-hero-v2 .cv-hero-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(10,22,50,.86) 0%,
    rgba(14,30,60,.72) 35%,
    rgba(20,45,90,.42) 65%,
    rgba(27,58,107,.10) 100%
  );
}
/* Subtle diagonal cyan grid texture for depth */
.cv-hero-v2 .cv-hero-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -50deg,
    rgba(42,172,226,.028) 0, rgba(42,172,226,.028) 1px,
    transparent 1px, transparent 55px
  );
}
.cv-hero-v2 .cv-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 640px;
  padding-top: 40px;
}
/* Cyan pill — matches original CVCI accent */
.cv-hero-v2 .cv-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(42,172,226,.10);
  border: 1px solid rgba(42,172,226,.40);
  color: var(--cyanlt);
  padding: 7px 18px;
  border-radius: 100px;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cv-hero-v2 .cv-hero-pill-dot {
  width: 7px; height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(42,172,226,.25);
  animation: cv-pulse 2s ease-in-out infinite;
}
@keyframes cv-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(42,172,226,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(42,172,226,.08); }
}
/* Massive bold title */
.cv-hero-v2 .cv-hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 800;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -2.5px;
  margin-bottom: 26px;
}
/* "Matériel Électrique" em — back to original cyan */
.cv-hero-v2 .cv-hero-h1 em {
  font-style: normal;
  font-weight: 800;
  color: var(--cyan);
  background: none;
  -webkit-text-fill-color: var(--cyan);
}
.cv-hero-v2 .cv-hero-p {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 520px;
}
/* CASE-style CTA: orange pill + white circle arrow */
.cv-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cyan);
  color: #fff;
  padding: 10px 10px 10px 28px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  box-shadow: 0 10px 30px rgba(42,172,226,.35);
  transition: all .3s ease;
  white-space: nowrap;
}
.cv-hero-cta .cv-cta-arrow-circle {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cv-hero-cta:hover {
  background: var(--cyanlt);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(42,172,226,.5);
}
.cv-hero-cta:hover .cv-cta-arrow-circle { transform: translateX(4px) rotate(-8deg); }

/* 3 overlapping feature cards at the bottom of hero */
.cv-hero-cards-wrap {
  position: absolute;
  left: 0; right: 0;
  bottom: -80px;
  z-index: 5;
}
.cv-hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(20,10,5,.35),
              0 10px 30px -10px rgba(20,10,5,.2);
}
.cv-hc-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  background: #fff;
  transition: all .3s ease;
  position: relative;
}
.cv-hc-card + .cv-hc-card { border-left: 1px solid #eef1f4; }
.cv-hc-card:hover { background: #fafbfc; }
.cv-hc-ico {
  width: 52px; height: 52px;
  min-width: 52px;
  border-radius: 12px;
  background: rgba(42,172,226,.10);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cv-hc-body { display: flex; flex-direction: column; gap: 4px; }
.cv-hc-body b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.25;
}
.cv-hc-body small {
  font-size: 12.5px;
  color: #6a7582;
  line-height: 1.45;
}
/* Accent middle card — orange background with white text */
.cv-hc-card.cv-hc-accent {
  background: var(--cyan);
}
.cv-hc-card.cv-hc-accent + .cv-hc-card,
.cv-hc-card + .cv-hc-card.cv-hc-accent { border-left: 0; }
.cv-hc-card.cv-hc-accent .cv-hc-ico {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.cv-hc-card.cv-hc-accent .cv-hc-body b { color: #fff; }
.cv-hc-card.cv-hc-accent .cv-hc-body small { color: rgba(255,255,255,.85); }
.cv-hc-card.cv-hc-accent:hover { background: var(--cyanlt); }

/* Extra spacing below hero to compensate overlap before the logos */
/* Next section after hero v2 needs extra top padding for the overlapping cards */
.cv-hero-v2 + section { padding-top: 180px; }
/* Style for the partners logos block (now after testimonials) */
.cv-logos-partners {
  padding: 40px 0;
  background: var(--offwhite);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cv-logos-head {
  text-align: center;
  margin-bottom: 30px;
}
.cv-logos-head .cv-tag { margin-bottom: 10px; }
.cv-logos-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--navydk);
  margin: 0;
  letter-spacing: -.3px;
}

/* Scrolled header — tighter + white with subtle shadow */
.cv-header-v2.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.cv-header-v2.scrolled .cv-nav-row { height: 66px; }

/* Responsive */
@media (max-width: 1100px) {
  .cv-header-v2 .cv-nav { display: none; }
  .cv-header-v2 .cv-burger { display: flex !important; }
  .cv-nav-actions .cv-nav-cta-pill { padding: 8px 8px 8px 18px; font-size: 12px; }
  .cv-nav-actions .cv-nav-cta-pill .cv-cta-arrow { width: 26px; height: 26px; }
}
@media (max-width: 768px) {
  body:has(.cv-header-v2) { padding-top: 68px; }
  .cv-header-v2 .cv-nav-row { height: 68px; padding: 0 20px; }
  .cv-hero-v2 { padding: 80px 0 180px; min-height: auto; }
  .cv-hero-v2 .cv-hero-inner { padding-top: 10px; }
  .cv-hero-v2 .cv-hero-h1 { font-size: 40px; letter-spacing: -1.5px; }
  .cv-hero-v2 .cv-hero-p { font-size: 15px; }
  .cv-hero-cards-wrap { bottom: -140px; padding: 0 20px; }
  .cv-hero-cards { grid-template-columns: 1fr; }
  .cv-hc-card + .cv-hc-card { border-left: 0; border-top: 1px solid #eef1f4; }
  .cv-hc-card.cv-hc-accent + .cv-hc-card,
  .cv-hc-card + .cv-hc-card.cv-hc-accent { border-top: 0; }
  .cv-hero-v2 + section { padding-top: 200px; }
  .cv-nav-actions .cv-lang { display: none; }  /* hide lang on very small screens, keep in mobile menu */
}
@media (max-width: 480px) {
  .cv-hero-cta { padding: 8px 8px 8px 22px; font-size: 13px; }
  .cv-hero-cta .cv-cta-arrow-circle { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════════════════
   REVEAL-ON-SCROLL animation system
   Classes added by js/animate.js — if the script doesn't
   run, elements simply stay visible (graceful fallback).
══════════════════════════════════════════════════════ */
.cv-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity  .75s cubic-bezier(.2, .7, .2, 1),
    transform .75s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.cv-reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Subtle variant: fade in from the left — used sparingly for
   anything with the .cv-reveal-left class (future-proof). */
.cv-reveal-left.cv-reveal {
  transform: translate3d(-30px, 0, 0);
}
.cv-reveal-left.cv-reveal.in-view {
  transform: translate3d(0, 0, 0);
}

/* Headline variant — slightly more pronounced drop */
.cv-hero-h1.cv-reveal {
  transform: translate3d(0, 36px, 0);
  transition-duration: 1s;
}

/* ──────────────────────────────────────────────────────
   HERO entrance — these elements are above the fold so
   IntersectionObserver fires immediately (or even before
   the page is fully ready), which can make the reveal feel
   instant or skipped. Override with a guaranteed on-load
   cascade animation: each element fades up with a stagger
   so the eye reads pill → headline → paragraph → button.
   ────────────────────────────────────────────────────── */
@keyframes cv-hero-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.cv-hero .cv-hero-pill,
.cv-hero .cv-hero-h1,
.cv-hero .cv-hero-p,
.cv-hero .cv-hero-cta,
.cv-hero .cv-hero-btns {
  animation: cv-hero-rise .9s cubic-bezier(.2, .7, .2, 1) backwards;
}
.cv-hero .cv-hero-pill { animation-delay: .1s; }
.cv-hero .cv-hero-h1   { animation-delay: .25s; animation-duration: 1.1s; }
.cv-hero .cv-hero-p    { animation-delay: .55s; }
.cv-hero .cv-hero-cta,
.cv-hero .cv-hero-btns { animation-delay: .75s; }

/* Reduced-motion: no entrance animation, elements appear instantly */
@media (prefers-reduced-motion: reduce) {
  .cv-hero .cv-hero-pill,
  .cv-hero .cv-hero-h1,
  .cv-hero .cv-hero-p,
  .cv-hero .cv-hero-cta,
  .cv-hero .cv-hero-btns {
    animation: none;
  }
}

/* Hero cards — add a light scale for extra impact */
.cv-hc-card.cv-reveal {
  transform: translate3d(0, 30px, 0) scale(.96);
}
.cv-hc-card.cv-reveal.in-view {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Clipped figure — comes with a slight scale-in */
.cv-clipped-figure.cv-reveal {
  transform: translate3d(0, 30px, 0) scale(.94);
  transition-duration: .9s;
}
.cv-clipped-figure.cv-reveal.in-view {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Full-motion-disabled fallback (belt + suspenders in case
   JS adds cv-reveal anyway on a reduced-motion client) */
@media (prefers-reduced-motion: reduce) {
  .cv-reveal,
  .cv-reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Reveal variants — additional entrance animations for the
   newer sections (Pourquoi nous choisir, FAQ).
   ────────────────────────────────────────────────────────── */

/* Why cards: fade-up + light scale, more pronounced than default
   to make the 6-card grid feel alive when it enters. */
.cv-why-card.cv-reveal {
  transform: translate3d(0, 30px, 0) scale(.96);
  transition-duration: .85s;
}
.cv-why-card.cv-reveal.in-view {
  transform: translate3d(0, 0, 0) scale(1);
}

/* FAQ items: slide in from the LEFT — gives a different feel from
   the rest of the page where everything fades up. Reads as "list
   items appearing one by one". */
.cv-faq-item.cv-reveal {
  transform: translate3d(-24px, 0, 0);
}
.cv-faq-item.cv-reveal.in-view {
  transform: translate3d(0, 0, 0);
}

/* FAQ right panel (the navy contact form): slides in from the RIGHT
   to mirror the FAQ items coming from the left → arrival "meets"
   in the middle, very natural. */
.cv-faq-right.cv-reveal {
  transform: translate3d(40px, 0, 0);
  transition-duration: .9s;
}
.cv-faq-right.cv-reveal.in-view {
  transform: translate3d(0, 0, 0);
}

/* ──────────────────────────────────────────────────────────
   Continuous animations — these run forever (or on hover).
   They're additive on top of the one-shot reveal, so they
   start playing AFTER the element has entered the viewport.
   ────────────────────────────────────────────────────────── */

/* Subtle pulse on the experience badge — draws the eye without
   being distracting. ~3s breathing rhythm. */
@keyframes cv-badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(42,172,226,.35);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 12px 32px rgba(42,172,226,.50);
  }
}
.cv-stacked-figures .cv-clipped-badge {
  animation: cv-badge-pulse 3.2s ease-in-out infinite;
}

/* Slow floating motion on the stacked images — the two figures bob
   gently out of phase with each other, giving the composition life
   without being noisy. ~6s period. */
@keyframes cv-float-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes cv-float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
/* Wait until the figure has finished its reveal animation before
   starting the float — avoids fighting the entrance transform. */
.cv-stacked-figures .cv-stack-top.cv-reveal.in-view {
  animation: cv-float-a 6s ease-in-out 1.2s infinite;
}
.cv-stacked-figures .cv-stack-bottom.cv-reveal.in-view {
  animation: cv-float-b 6s ease-in-out 1.2s infinite;
}
/* If JS doesn't run, no .cv-reveal/.in-view classes — apply the
   float directly as a no-delay fallback so the motion is still
   visible to all visitors. */
:not(.cv-reveal).cv-stack-top    { animation: cv-float-a 6s ease-in-out infinite; }
:not(.cv-reveal).cv-stack-bottom { animation: cv-float-b 6s ease-in-out infinite; }

/* Glow pulse on the primary CTA button — very subtle ring of cyan
   light that keeps the button feeling "alive" without overpowering. */
@keyframes cv-btn-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(42,172,226,.25); }
  50%      { box-shadow: 0 8px 28px rgba(42,172,226,.45); }
}
.cv-btn-cyan {
  animation: cv-btn-glow 2.8s ease-in-out infinite;
}
.cv-btn-cyan:hover {
  animation: none;  /* let the hover state dominate */
}

/* Hover ripple on Why cards — icon "punches" forward when card lifts */
@keyframes cv-ico-pop {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1.06) rotate(0deg); }
}
.cv-why-card:hover .cv-why-ico {
  animation: cv-ico-pop .55s cubic-bezier(.34, 1.56, .64, 1);
  background: linear-gradient(135deg, rgba(42,172,226,.22), rgba(42,172,226,.10));
}

/* Tile photo zoom on hover — slow, natural Ken-Burns effect on the
   service tiles. The tile already has overflow:hidden, so the photo
   scales inside its frame without spilling. */
.cv-tile .cv-tile-photo {
  transition: transform 1.4s cubic-bezier(.25, .46, .45, .94);
}
.cv-tile:hover .cv-tile-photo {
  transform: scale(1.08);
}

/* FAQ accordion: when an item opens, the answer slides down smoothly.
   Native <details> doesn't animate by default, so we use a
   max-height + opacity trick. */
.cv-faq-a {
  animation: cv-faq-open .35s cubic-bezier(.4, 0, .2, 1);
}
@keyframes cv-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: kill all the continuous loops too (the system
   already kills the reveal entrances above). */
@media (prefers-reduced-motion: reduce) {
  .cv-stacked-figures .cv-clipped-badge,
  .cv-stack-top, .cv-stack-bottom,
  .cv-btn-cyan,
  .cv-why-card:hover .cv-why-ico,
  .cv-faq-a {
    animation: none !important;
  }
}


.cv-header-v2 .cv-nav > li {
  animation: cv-nav-in .6s cubic-bezier(.2, .7, .2, 1) backwards;
}
.cv-header-v2 .cv-nav > li:nth-child(1) { animation-delay: .05s; }
.cv-header-v2 .cv-nav > li:nth-child(2) { animation-delay: .10s; }
.cv-header-v2 .cv-nav > li:nth-child(3) { animation-delay: .15s; }
.cv-header-v2 .cv-nav > li:nth-child(4) { animation-delay: .20s; }
.cv-header-v2 .cv-nav > li:nth-child(5) { animation-delay: .25s; }
.cv-header-v2 .cv-nav > li:nth-child(6) { animation-delay: .30s; }
.cv-header-v2 .cv-nav > li:nth-child(7) { animation-delay: .35s; }
.cv-header-v2 .cv-nav > li:nth-child(8) { animation-delay: .40s; }
.cv-header-v2 .cv-logo         { animation: cv-logo-in .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.cv-header-v2 .cv-nav-actions  { animation: cv-nav-in .6s cubic-bezier(.2, .7, .2, 1) .45s backwards; }
@keyframes cv-nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cv-logo-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-header-v2 .cv-nav > li,
  .cv-header-v2 .cv-logo,
  .cv-header-v2 .cv-nav-actions { animation: none; }
}

/* Subtle CTA pill breathing pulse (one-shot on load — draws the eye) */
.cv-nav-cta-pill,
.cv-hero-cta {
  animation: cv-cta-pulse-in 1s ease-out .6s backwards;
}
@keyframes cv-cta-pulse-in {
  0%   { opacity: 0; transform: scale(.9); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-nav-cta-pill,
  .cv-hero-cta { animation: none; }
}

/* Card hover polish — a subtle lift for tiles already without one */
.cv-tile       { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.cv-testi-card { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.cv-testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(27,58,107,.12);
}


/* ══════════════════════════════════════════════════════
   WORLD MAP SECTION — international presence
═══════════════════════════════════════════════════════ */
.cv-world-map-section {
  padding: 100px 0 90px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42,172,226,.05), transparent 60%),
    #fff;
  overflow: hidden;
}
.cv-world-map-head {
  max-width: 780px;
  margin: 0 auto 50px;
  text-align: center;
}
.cv-world-map-head .cv-h2 { margin: 10px 0 18px; }
.cv-world-map-head .cv-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.cv-world-map-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(27,58,107,.15);
}
.cv-world-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cv-world-svg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.cv-wm-continents path { stroke: none; }

/* Connection arc — stroke draw-in animation (6s loop) */
.cv-wm-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(42,172,226,.35));
}
.cv-world-map-active .cv-wm-path {
  animation: cv-wm-draw 6s ease-in-out infinite;
}
@keyframes cv-wm-draw {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  8%   { opacity: 1; }
  40%  { stroke-dashoffset: 0;   opacity: 1; }
  70%  { stroke-dashoffset: 0;   opacity: 1; }
  85%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 600; opacity: 0; }
}

/* Glowing cyan traveller along each path */
.cv-wm-traveller {
  opacity: 0;
  offset-distance: 0%;
}
.cv-world-map-active .cv-wm-traveller {
  animation: cv-wm-travel 6s ease-in-out infinite;
}
@keyframes cv-wm-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { offset-distance: 0%;   opacity: 1; }
  40%  { offset-distance: 100%; opacity: 1; }
  50%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Pulsing halo around every marker */
.cv-wm-marker-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: .5;
  animation: cv-wm-pulse 2.2s ease-out infinite;
}
@keyframes cv-wm-pulse {
  0%   { r: 3;  opacity: .55; }
  100% { r: 14; opacity: 0;   }
}

/* Compact label chips */
.cv-wm-label { pointer-events: none; }
.cv-wm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  font: 600 10.5px/1 'Plus Jakarta Sans', sans-serif;
  color: var(--navy);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(27,58,107,.08);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.cv-wm-chip-origin {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
  font-weight: 700;
  letter-spacing: .3px;
}

/* Responsive */
@media (max-width: 900px) {
  .cv-wm-chip { font-size: 9.5px; height: 18px; padding: 0 6px; }
}
@media (max-width: 768px) {
  .cv-world-map-section { padding: 70px 0 60px; }
  .cv-world-map-wrap { border-radius: 14px; }
  /* Hide all labels except origin on small screens — too crowded otherwise */
  .cv-wm-label:not(.cv-wm-label-origin) { display: none; }
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .cv-wm-path {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .cv-wm-traveller { display: none; }
  .cv-wm-marker-halo { animation: none !important; opacity: .3; }
}


/* ══════════════════════════════════════════════════════
   CONTACT BLOCK ("Get in Touch") — used on all detail-*.html
   sub-pages of project references. Centered header + 2-col
   body (info aside on the left, form panel on the right) on
   navy background. Inspired by a black-themed mockup, recolored
   to match the CVCI palette.
   Class prefixes:
     .cv-distrib-contact       — outer section
     .cv-distrib-contact-head  — centered Contact tag + h2
     .cv-distrib-contact-grid  — 2-col layout
     .cv-dcg-aside / .cv-dcg-* — left column
     .cv-distrib-contact-form  — right form panel
     .cv-dcf-*                 — form fields and submit
══════════════════════════════════════════════════════ */
.cv-distrib-contact { background: var(--navy); padding: 90px 0; color: #fff; }
.cv-distrib-contact-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.cv-distrib-contact-head .cv-tag { background: rgba(255,255,255,.10); color: #fff; margin-bottom: 16px; letter-spacing: 2px; }
.cv-distrib-contact-head h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 44px; line-height: 1.1; letter-spacing: -1px; color: #fff; margin: 0; }
.cv-distrib-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; max-width: 980px; margin: 0 auto; }
.cv-dcg-aside-title { font: 700 14px/1.3 'Plus Jakarta Sans', sans-serif; letter-spacing: 1.8px; color: #fff; text-transform: uppercase; margin: 0 0 14px; }
.cv-dcg-aside-lead { font-size: 14.5px; color: rgba(255,255,255,.65); line-height: 1.7; margin: 0 0 32px; }
.cv-dcg-info { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.cv-dcg-info-item { display: flex; gap: 16px; align-items: flex-start; }
.cv-dcg-info-ico { width: 42px; height: 42px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv-dcg-info-ico i { color: var(--cyan); font-size: 16px; }
.cv-dcg-info-body { display: flex; flex-direction: column; gap: 2px; }
.cv-dcg-info-body b { font: 700 12.5px/1.3 'Plus Jakarta Sans', sans-serif; letter-spacing: 1.2px; color: #fff; text-transform: uppercase; margin-bottom: 4px; }
.cv-dcg-info-body span,
.cv-dcg-info-body a { font: 400 13.5px/1.55 'Plus Jakarta Sans', sans-serif; color: rgba(255,255,255,.72); text-decoration: none; }
.cv-dcg-info-body a:hover { color: var(--cyan); }
.cv-dcg-social h4 { font: 700 12.5px/1.3 'Plus Jakarta Sans', sans-serif; letter-spacing: 1.2px; color: #fff; text-transform: uppercase; margin: 0 0 14px; }
.cv-dcg-social-icons { display: flex; gap: 10px; }
.cv-dcg-social-icons a { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 14px; transition: var(--t); }
.cv-dcg-social-icons a:hover { background: var(--cyan); border-color: var(--cyan); color: #fff; transform: translateY(-2px); }
.cv-distrib-contact-form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 36px 38px; }
.cv-dcf-head { font: 700 12px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: 2.5px; color: rgba(255,255,255,.55); text-transform: uppercase; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 22px; }
.cv-dcf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cv-dcf-field { display: flex; flex-direction: column; margin-bottom: 18px; }
.cv-dcf-field label { font: 600 12.5px/1.2 'Plus Jakarta Sans', sans-serif; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.cv-dcf-field input,
.cv-dcf-field textarea { background: #fff; border: none; border-radius: 6px; padding: 13px 16px; font: 400 14.5px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--text); width: 100%; transition: box-shadow .25s ease; }
.cv-dcf-field input::placeholder,
.cv-dcf-field textarea::placeholder { color: #a8b3bf; }
.cv-dcf-field input:focus,
.cv-dcf-field textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(42,172,226,.45); }
.cv-dcf-field textarea { resize: vertical; min-height: 120px; font-family: 'Plus Jakarta Sans', sans-serif; }
.cv-dcf-submit { width: 100%; margin-top: 8px; background: var(--cyan); color: #fff; border: none; border-radius: 6px; padding: 16px 28px; font: 700 13px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: 2px; cursor: pointer; transition: background .25s ease, transform .2s ease; }
.cv-dcf-submit:hover { background: #1d99cc; transform: translateY(-1px); }
@media (max-width: 900px) { .cv-distrib-contact-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 700px) {
  .cv-distrib-contact { padding: 70px 0; }
  .cv-distrib-contact-head h2 { font-size: 34px; }
  .cv-distrib-contact-form { padding: 28px 22px; border-radius: 10px; }
  .cv-dcf-row { grid-template-columns: 1fr; gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — couche d'animations au survol (v2)
   Objectif : un site vivant et premium, loin du statique de l'ancien cvci.fr
   ═══════════════════════════════════════════════════════════════ */


/* ── 2. Boutons : balayage lumineux + lift renforcé ──────────── */
.cv-btn-cyan, .cv-btn-orange, .cv-btn-white, .cv-btn-ghost,
.cv-dcf-submit, .cv-faq-submit, .cv-tb-devis, .cv-nav-cta-pill, .cv-hero-cta {
  position: relative;
  overflow: hidden;
}
.cv-btn-cyan::before, .cv-btn-orange::before, .cv-btn-white::before,
.cv-dcf-submit::before, .cv-faq-submit::before, .cv-nav-cta-pill::before {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.cv-btn-cyan:hover::before, .cv-btn-orange:hover::before, .cv-btn-white:hover::before,
.cv-dcf-submit:hover::before, .cv-faq-submit:hover::before, .cv-nav-cta-pill:hover::before {
  left: 130%;
}
.cv-dcf-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(42,172,226,.45); }
.cv-faq-submit:hover { transform: translateY(-2px); }

/* ── 3. Cards projets : lift + liseré cyan + flèche du lien ──── */
.cv-proj-card {
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease, border-color .35s ease;
  border: 1px solid transparent;
}
.cv-proj-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 44px rgba(15,35,71,.16);
  border-color: rgba(42,172,226,.35);
}
.cv-proj-img img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.cv-proj-card:hover .cv-proj-img img { transform: scale(1.09); }
.cv-proj-more::after {
  content: "→";
  display: inline-block;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.cv-proj-more:hover::after { transform: translateX(4px); }

/* ── 4. Tuiles catégories : titre qui glisse + zoom photo ────── */
.cv-tile { overflow: hidden; }
.cv-tile-photo { transition: transform .65s cubic-bezier(.4,0,.2,1); }
.cv-tile-body { transition: transform .4s cubic-bezier(.4,0,.2,1); }
.cv-tile:hover .cv-tile-body { transform: translateY(-6px); }
.cv-tile-name { transition: color .3s ease; }
.cv-tile:hover .cv-tile-name { color: var(--cyanlt); }

/* ── 5. Icônes rondes : pop + légère rotation ────────────────── */
.cv-dcg-info-ico, .cv-contact-ico, .cv-subnav-ico, .cv-valeur-ico,
.cv-why-ico, .cv-ai-ico {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.cv-dcg-info:hover .cv-dcg-info-ico,
.cv-contact-item:hover .cv-contact-ico,
.cv-subnav-card:hover .cv-subnav-ico,
.cv-valeur:hover .cv-valeur-ico,
.cv-why-card:hover .cv-why-ico,
.cv-ai-card:hover .cv-ai-ico {
  transform: scale(1.12) rotate(-6deg);
}

/* ── 6. Logos partenaires : élévation douce ──────────────────── */
.cv-logo-slot img { transition: transform .35s cubic-bezier(.34,1.4,.64,1), filter .3s ease; }
.cv-logo-slot:hover img { transform: scale(1.1) translateY(-3px); }

/* ── 7. Cards références / articles / bureaux : zoom + ombre ─── */
.cv-ref-card, .cv-office-card, .cv-testi-card, .cv-subnav-card, .cv-why-card, .cv-hc-card {
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease, border-color .35s ease, background .3s ease;
}
.cv-ref-media img { transition: transform .6s cubic-bezier(.4,0,.2,1); }

/* ── 8. Liens footer : glissement fluide ─────────────────────── */
.cv-footer-links li a, .ve-footer-links li a {
  transition: color .25s ease, padding-left .25s cubic-bezier(.34,1.4,.64,1);
}
.cv-footer-links li a:hover, .ve-footer-links li a:hover { padding-left: 8px; }

/* ── 9. Champs de formulaire : focus lumineux ────────────────── */
.cv-dcf-field input:focus, .cv-dcf-field textarea:focus,
.cv-faq-form input:focus, .cv-faq-form textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(42,172,226,.18);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* ── 10. Accessibilité : on coupe tout si l'utilisateur le demande ── */
@media (prefers-reduced-motion: reduce) {
  .cv-btn-cyan::before, .cv-btn-orange::before, .cv-btn-white::before,
  .cv-dcf-submit::before, .cv-faq-submit::before, .cv-nav-cta-pill::before,
  .cv-proj-card, .cv-proj-img img, .cv-proj-more::after,
  .cv-tile-photo, .cv-tile-body,
  .cv-dcg-info-ico, .cv-contact-ico, .cv-subnav-ico, .cv-valeur-ico,
  .cv-why-ico, .cv-ai-ico, .cv-logo-slot img,
  .cv-ref-card, .cv-office-card, .cv-testi-card, .cv-subnav-card, .cv-why-card, .cv-hc-card {
    transition: none !important;
    transform: none !important;
  }
}

/* ── 11. Cards projets entièrement cliquables ────────────────── */
.cv-proj-card { position: relative; cursor: pointer; }
.cv-proj-more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* le titre reste au-dessus pour la sélection de texte éventuelle */
.cv-proj-body h3 a { position: relative; z-index: 3; }

/* ── 12. Bouton retour en haut de page ───────────────────────── */
.cv-back-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(15,35,71,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.4,.64,1), visibility .3s, background .25s ease;
  z-index: 999;
}
.cv-back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cv-back-top:hover {
  background: var(--navydk);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .cv-back-top { transition: opacity .2s ease; transform: none !important; }
}


/* ── 13. CTA "Un projet en Afrique ?" — design v2 ────────────── */
.cv-cta { padding: 90px 0; }
.cv-cta-overlay {
  background:
    linear-gradient(100deg, rgba(8,18,42,.96) 0%, rgba(13,30,62,.92) 55%, rgba(15,35,71,.82) 100%);
}
.cv-cta::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--cyanlt), transparent);
  z-index: 3;
}
.cv-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cv-cta-content { flex: 1 1 480px; max-width: 660px; }
.cv-cta-action {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cv-cta-btn:hover 
@media (max-width: 991px) {
  .cv-cta-box { gap: 30px; }
  .cv-cta-action { align-items: flex-start; }
}
@media (max-width: 767px) {
  .cv-valeurs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cv-cta { padding: 64px 0; }
}

h1.cv-cta-h2 { font-size: clamp(26px,3.5vw,44px); margin-top: 0; }

/* ── 14. Téléphone dans le header (à côté du bouton devis) ───── */
.cv-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navydk);
  letter-spacing: .2px;
  white-space: nowrap;
  transition: color .25s ease;
}
.cv-nav-phone i { color: var(--cyan); font-size: 14px; }
.cv-nav-phone:hover { color: var(--cyan); }
@media (max-width: 1199px) {
  .cv-nav-phone { display: none; } /* on garde l'accès via le menu mobile */
}


/* === Correctif migration : débordement horizontal === */
/*
  La colonne du formulaire FAQ déborde de 321 px à droite : toute la page
  défile latéralement, ce qui est particulièrement disgracieux sur mobile.

  Cause : .cv-faq-right-col veut aller « pleine largeur » jusqu'au bord de
  l'écran via  margin-right: calc((100vw - 100%) / -2).  Mais en CSS, le 100%
  d'une marge se résout sur la largeur de L'ÉLÉMENT — ici la demi-colonne (671 px)
  et non le conteneur. Le calcul renvoie donc ~384 px au lieu de la distance
  réelle. S'y ajoute que 100vw inclut la barre de défilement.

  On ne corrige pas le calcul (il faudrait connaître la largeur du conteneur) :
  on rogne le débordement au niveau de la section, exactement comme .cv-hero le
  fait déjà avec overflow:hidden. La photo atteint toujours le bord de l'écran —
  c'est l'effet recherché — mais la page ne défile plus.

  overflow-x:hidden en repli pour les navigateurs sans « clip » (Safari < 16) ;
  « clip » est préférable car il ne crée pas de conteneur de défilement.
*/
.cv-faq {
  overflow-x: hidden;
  overflow-x: clip;
}

/*
  Second débordement, plus discret : 58 px venant du hero. Son fond porte un
  transform:scale(1.05) (effet de zoom lent) qui l'élargit de 5 %.

  .cv-hero a bien overflow:hidden, mais .cv-hero-v2 le repasse à « visible » —
  volontairement : les cartes du hero débordent vers le BAS et seraient coupées.

  D'où « clip » sur le seul axe horizontal : contrairement à « hidden », il
  n'impose rien à l'axe vertical, et les cartes continuent de déborder.
  Pas de repli hidden ici : il couperait justement ces cartes.
*/
.cv-hero-v2 {
  overflow-x: clip;
  overflow-y: visible;
}


/* === Correctif migration : pop-up téléphone === */
/*
  Page contact : le numéro n'est plus affiché en clair. Un bouton « Afficher le
  numéro » ouvre une pop-up qui le révèle. Styles assortis au design ct- du site
  (navy + cyan). Le balisage est injecté par migrate.mjs, l'ouverture/fermeture
  par le script commun de Base.astro.
*/
/* Bouton pleine largeur, calqué sur le bouton « Envoyer » du formulaire
   (.ct-submit) pour que les deux CTA de la page soient cohérents :
   même hauteur (54px), même rayon (10px), même dégradé cyan→navy. */
.ct-call-btn {
  display: inline-flex;
  width: 100%;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--cyan), var(--navy));
  color: #fff;
  font: 700 15px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(42, 172, 226, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ct-call-btn i { font-size: 16px; }
.ct-call-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(27, 58, 107, .32); }
.ct-call-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Voile plein écran, centré. [hidden] a une spécificité supérieure et gagne
   quand la pop-up est fermée — le voile n'est donc pas affiché en permanence. */
.ct-phone-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ct-phone-modal[hidden] { display: none; }
.ct-phone-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 48, .55);
  backdrop-filter: blur(2px);
}
.ct-phone-dialog {
  position: relative;
  z-index: 1;
  width: min(360px, 92vw);
  background: #fff;
  border-radius: 18px;
  padding: 34px 28px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 27, 48, .35);
}
.ct-phone-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #9aa4b2;
  cursor: pointer;
}
.ct-phone-close:hover { color: var(--navy); }
.ct-phone-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cyanbg, #eaf6fd);
  color: var(--cyan);
  font-size: 22px;
}
.ct-phone-dialog h4 {
  margin: 0 0 10px;
  font: 700 17px/1.2 'Plus Jakarta Sans', sans-serif;
  color: var(--navydk, var(--navy));
}
.ct-phone-num {
  display: inline-block;
  margin-bottom: 8px;
  font: 800 26px/1.1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .5px;
  color: var(--cyan);
}
.ct-phone-num:hover { text-decoration: underline; }
.ct-phone-note { margin: 0; font-size: 13px; color: #6a7686; }

/* Bouton « Appelez-nous » de l'en-tête (remplace le numéro affiché).
   Style secondaire : pastille contour cyan, à côté du bouton plein « Demande de
   devis ». Même logique responsive que l'ancien numéro : visible ≥1200px, le
   menu mobile prend le relais en dessous. */
.cv-nav-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid var(--cyan);
  border-radius: 999px;
  background: transparent;
  color: var(--navydk, #12233f);
  font: 800 13.5px/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cv-nav-call i { color: var(--cyan); font-size: 14px; transition: color .2s ease; }
.cv-nav-call:hover { background: var(--cyan); color: #fff; }
.cv-nav-call:hover i { color: #fff; }
.cv-nav-call:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 1199px) { .cv-nav-call { display: none; } }


/* === Ajout migration : blog / actualités === */
.cv-actu { padding: 80px 0 90px; background: #fff; }
.cv-actu-empty { text-align: center; color: var(--muted, #6a7686); font-size: 16px; padding: 40px 0; }
.cv-actu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 991px) { .cv-actu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cv-actu-grid { grid-template-columns: 1fr; } }

.cv-actu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e7eaee);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cv-actu-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(27, 58, 107, .14); }
.cv-actu-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cv-actu-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cv-actu-card:hover .cv-actu-media img { transform: scale(1.05); }
.cv-actu-cat {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cyan);
  color: #fff;
  font: 700 11px/1 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.cv-actu-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; flex: 1; }
.cv-actu-date { font-size: 12.5px; color: var(--muted, #6a7686); }
.cv-actu-title {
  margin: 0;
  font: 700 18px/1.3 'Plus Jakarta Sans', sans-serif;
  color: var(--navydk, #12233f);
}
.cv-actu-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted, #6a7686); }
.cv-actu-more {
  margin-top: auto;
  padding-top: 8px;
  color: var(--cyan);
  font: 600 13.5px/1 'Plus Jakarta Sans', sans-serif;
}
.cv-actu-more i { margin-left: 6px; transition: transform .2s ease; }
.cv-actu-card:hover .cv-actu-more i { transform: translateX(4px); }

/* ── Page article ─────────────────────────────────── */
.cv-article-hero { min-height: 340px; }
.cv-article { padding: 56px 0 80px; background: #fff; }
.cv-article .container { max-width: 760px; }
.cv-article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cyanbg, #eaf6fd);
  color: var(--cyan);
  font: 600 13px/1 'Plus Jakarta Sans', sans-serif;
}
.cv-article-back:hover { background: var(--cyan); color: #fff; }
.cv-article-date { display: block; margin-bottom: 22px; font-size: 13.5px; color: var(--muted, #6a7686); }
.cv-article-body { font-size: 16px; line-height: 1.8; color: var(--navy, #1b3a6b); }
.cv-article-body h2 {
  margin: 34px 0 14px;
  font: 700 24px/1.3 'Plus Jakarta Sans', sans-serif;
  color: var(--navydk, #12233f);
}
.cv-article-body h3 { margin: 26px 0 10px; font: 700 19px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--navydk, #12233f); }
.cv-article-body p { margin: 0 0 16px; }
.cv-article-body ul, .cv-article-body ol { margin: 0 0 18px; padding-left: 22px; }
.cv-article-body li { margin-bottom: 8px; }
.cv-article-body strong { color: var(--navydk, #12233f); }
.cv-article-body a { color: var(--cyan); text-decoration: underline; }
.cv-article-body hr { margin: 30px 0; border: 0; border-top: 1px solid var(--border, #e7eaee); }


/* === Ajout migration : bascule menu à 1300px === */
/*
  Le menu compte 8 onglets (Accueil → Actualités) plus le sélecteur de langue
  et deux boutons. En dessous de ~1300px, tout ce petit monde ne tient plus sur
  une ligne et les boutons débordaient dans la marge. On bascule donc sur le
  menu burger dès 1300px (le réglage d'origine était 1100px), et on masque le
  bouton « Appelez-nous » en même temps que le menu, pour un en-tête toujours net.
  Le menu horizontal ne réapparaît qu'au-delà de 1300px, là où il respire.
*/
@media (max-width: 1300px) {
  .cv-header-v2 .cv-nav { display: none; }
  .cv-header-v2 .cv-burger { display: flex !important; }
  .cv-nav-call { display: none !important; }
}

/* === Ajout migration : pages juridiques === */
/*
  Mise en forme d'un texte juridique long (CGV) : largeur de lecture confortable,
  respiration entre les articles, listes lisibles. Reprend les couleurs du site.
*/
.cv-legal { max-width: 820px; }
.cv-legal h2 {
  font-size: 20px;
  margin: 34px 0 10px;
  color: var(--navy, #1b3a6b);
}
.cv-legal h3 {
  font-size: 16px;
  margin: 20px 0 8px;
  color: var(--cyan, #00aeef);
}
.cv-legal p { line-height: 1.7; margin-bottom: 14px; }
.cv-legal ul { margin: 0 0 14px 22px; line-height: 1.7; }
.cv-legal ul li { list-style: disc; margin-bottom: 6px; }
.cv-legal-meta {
  font-size: 14px;
  color: #6b7280;
  border-left: 3px solid var(--cyan, #00aeef);
  padding-left: 12px;
}
/* Le bouton de téléchargement est un <a> : sur cette page au texte long, la
   couleur de lien héritée le rendait sombre sur fond cyan. On force le blanc
   (texte, puce et icône SVG via currentColor). */
.cv-legal .cv-btn-cyan,
.cv-legal .cv-btn-cyan span,
.cv-legal .cv-btn-cyan svg,
.cv-legal .cv-btn-cyan:hover { color: #fff !important; display: inline-flex; align-items: center; gap: 8px; }
.cv-legal-sign { margin-top: 28px; font-style: italic; }
.cv-legal-coord {
  margin-top: 24px;
  padding: 18px 20px;
  background: #f5f7fa;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
}
.cv-legal-coord p { margin-bottom: 4px; }