:root {
  --ink: #1b2430;
  --muted: #6c7480;
  --line: #e5e8ec;
  --soft: #f5f7fa;
  --brand: #1a63a6;
  --brand-dark: #0d3f70;
  --accent: #e29c2d;
  --white: #fff;
  --shadow: 0 18px 55px rgba(16, 32, 56, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--white);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1140px, calc(100% - 36px)); margin: 0 auto; }
.section-pad { padding: 78px 0; }

.top-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 31;
  background: rgba(8, 18, 33, .34);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  backdrop-filter: blur(10px);
  will-change: transform, opacity;
}
.top-inner, .contacts, .languages {
  display: flex;
  align-items: center;
  gap: 18px;
}
.top-inner { justify-content: space-between; min-height: 42px; }
.languages span { color: var(--accent); }
.contacts a:hover, .languages a:hover { color: var(--accent); }

.site-header {
  position: fixed;
  top: 42px;
  left: 0;
  right: 0;
  z-index: 30;
  background: linear-gradient(90deg, rgba(8,18,33,.56), rgba(8,18,33,.28));
  box-shadow: none;
  backdrop-filter: blur(10px);
  will-change: transform, opacity;
}
.top-strip,
.site-header {
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, box-shadow .28s ease;
}
body:not(.header-ready) .top-strip,
body:not(.header-ready) .site-header {
  transition: none;
}
body.header-is-scrolled .site-header {
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
}
body.nav-collapsed .top-strip {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
body.nav-collapsed .site-header {
  transform: translateY(calc(-100% - 42px));
  pointer-events: none;
}
.nav-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1240px, calc(100% - 28px));
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 22px;
  letter-spacing: 0;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: white;
  background: rgba(26, 99, 166, .86);
  font-weight: 800;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav > a, .dropdown > button {
  position: relative;
  color: #fff;
  background: rgba(255,255,255,0);
  border: 0;
  padding: 12px 13px;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color .18s ease;
}
.dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dropdown-arrow {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.dropdown.open .dropdown-arrow {
  transform: rotate(225deg) translateY(-1px);
}
/* Le hover et l'etat actif restent blancs et affichent seulement une ligne orange en bas. */
.main-nav > a::after,
.dropdown > button::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
.main-nav > a.is-active,
.dropdown.is-active > button,
.main-nav > a:hover,
.dropdown > button:hover {
  color: #fff;
}
.main-nav > a.is-active::after,
.dropdown.is-active > button::after,
.main-nav > a:hover::after,
.dropdown > button:hover::after {
  transform: scaleX(1);
}
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -18px;
  width: 230px;
  padding: 12px 0;
  background: rgba(8,18,33,.92);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .18s ease;
}
.dropdown-menu.wide { width: 285px; }
/* Sélecteur d'enfant direct (>) — important : un simple sélecteur de descendant
   rendrait aussi visible le sous-menu imbriqué "Traduction" dès l'ouverture de
   "Services", sans attendre le survol. Chaque niveau de menu gère sa propre
   visibilité indépendamment. */
.dropdown.open > .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  /* .main-nav applique white-space: nowrap à tous ses descendants ; ça
     empêchait les libellés longs (ex. "Traduction de relevés de notes et
     de diplômes") de revenir à la ligne et les faisait déborder du menu
     déroulant. On réautorise le retour à la ligne uniquement ici. */
  white-space: normal;
  line-height: 1.35;
}
.dropdown-menu a:hover { background: var(--accent); color: #111623; }

/* Sous-menu imbriqué (ex : Traduction → 5 pages "Nos solutions") — volet latéral
   qui se déploie sur le côté du menu déroulant parent. */
.dropdown-menu .submenu {
  position: relative;
  display: flex;
  align-items: stretch;
}
.submenu-link {
  flex: 1;
}
.submenu-toggle {
  flex-shrink: 0;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}
.submenu-toggle:hover,
.dropdown-menu .submenu.is-active .submenu-toggle,
.dropdown-menu .submenu.open .submenu-toggle {
  background: var(--accent);
  color: #111623;
}
.submenu-toggle .dropdown-arrow {
  transform: rotate(-45deg);
}
.dropdown-menu .submenu.open .submenu-toggle .dropdown-arrow {
  transform: rotate(135deg);
}
.submenu-menu {
  top: -12px;
  left: 100%;
  margin-left: 2px;
}
/* Le volet des solutions de Traduction s'affiche au survol de la souris et
   disparaît dès que le curseur le quitte (en plus du clic, conservé pour le
   tactile/accessibilité). */
@media (hover: hover) {
  .dropdown-menu .submenu:hover .submenu-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  /* Sur mobile, le volet latéral n'a pas la place de se déployer sur le côté :
     le sous-menu s'ouvre à la place en accordéon, juste en dessous, indenté. */
  .dropdown-menu .submenu { flex-direction: column; }
  .submenu-toggle {
    width: 100%;
    justify-content: flex-end;
    padding: 10px 18px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .submenu-menu {
    position: static;
    width: auto;
    margin-left: 0;
    padding-left: 14px;
    opacity: 1;
    pointer-events: none;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
    border-top: 0;
    box-shadow: none;
  }
  .dropdown-menu .submenu.open .submenu-menu {
    pointer-events: auto;
    max-height: 400px;
  }
}

.quote-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.quote-btn, .btn.primary { background: var(--accent); color: #111; }
.quote-btn {
  min-height: 42px;
  font-size: 13px;
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn.secondary { background: var(--brand); color: #fff; }
.btn.ghost { border-color: rgba(255,255,255,.75); color: #fff; }
/* Bouton "Devis en ligne" du menu mobile déroulant : masqué par défaut (desktop),
   affiché uniquement dans le media query mobile ci-dessous. Sans cette règle,
   il apparaît en double avec le bouton .quote-btn du header sur desktop. */
.quote-btn-mobile { display: none; }
/* Le bouton devis du header reprend le changement de fond demandé au survol. */
.quote-btn:hover {
  background: rgba(8,18,33,.74);
  border-color: var(--accent);
  color: #fff;
  filter: none;
  transform: translateY(-1px);
}
.btn {
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Bouton arrondi réutilisable (page Partenaires, page Tarifs, header) */
.btn-round {
  border-radius: 999px;
}
.btn:hover {
  filter: none;
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(13,63,112,.2);
}
.btn.primary:hover {
  background: rgba(8,18,33,.9);
  border-color: var(--accent);
  color: #fff;
}
.btn.secondary:hover,
.btn.ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #111623;
}
.menu-toggle { display: none; border: 0; background: transparent; margin-left: auto; padding: 8px; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px; background: #fff; }

.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 118px;
  overflow: hidden;
  color: #fff;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(1.12) contrast(1.04) saturate(1.08);
  transform: scale(1);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,18,33,.72), rgba(14,30,48,.42) 52%, rgba(14,30,48,.18)),
    linear-gradient(180deg, rgba(8,18,33,.08) 0%, rgba(8,18,33,.18) 62%, rgba(255,255,255,.38) 100%);
}
.hero-icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-icon {
  --tilt: 0deg;
  --float-distance: 14px;
  position: absolute;
  width: 70px;
  height: 70px;
  opacity: .58;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  backdrop-filter: blur(5px);
  transform: translateY(0) rotate(var(--tilt));
  animation: hero-float 4.8s ease-in-out infinite;
}
.hero-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-headset { --tilt: 22deg; left: calc(50% - 390px); top: 43%; animation-delay: -.4s; }
.icon-language { --tilt: -14deg; left: calc(50% - 430px); top: 61%; animation-delay: -1.7s; }
.icon-megaphone { --tilt: 10deg; left: calc(50% - 340px); top: 75%; animation-delay: -2.6s; }
.icon-mic { --tilt: -16deg; left: calc(50% + 300px); top: 32%; animation-delay: -1.1s; }
.icon-voice {
  --float-distance: 10px;
  left: calc(50% + 185px);
  top: 47%;
  width: 98px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  animation-delay: -2.1s;
}
.icon-voice svg {
  width: 92px;
  height: 44px;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.icon-globe { --tilt: 18deg; left: calc(50% + 270px); top: 74%; animation-delay: -.9s; }
.hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - 36px, 780px);
  max-width: 780px;
  padding-top: 28px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-42px);
}
.hero-intro-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -58%);
}
.hero-loader-globe {
  position: absolute;
  display: grid;
  place-items: center;
}
.hero-loader-globe {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, rgba(255,255,255,.2), rgba(255,255,255,.08) 52%, rgba(226,156,45,.2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 22px 55px rgba(0,0,0,.22);
  animation: hero-globe-load 2.28s ease forwards;
}
.hero-loader-globe svg {
  width: 122px;
  height: 122px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hero-globe-spin 1.1s linear infinite;
}
/* .hero-title-wave repositionnée dans la section HERO ci-dessous */
.hero-title-wave svg {
  width: 120px;
  height: 40px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 8px 16px rgba(226,156,45,.32));
  animation: hero-wave-pulse 1.2s ease-in-out 2.8s infinite;
}
.hero-contact {
  color: rgba(255,255,255,.86);
  margin: 0 0 28px;
  font-size: 15px;
}
.hero h1 {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(45px, 5.7vw, 82px);
  line-height: 1.02;
  font-weight: 600;
  text-wrap: balance;
}
.hero-title,
.hero-lead,
.hero-domains,
.hero-cta {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-reveal 720ms ease 2.45s forwards;
}
.hero-lead { animation-delay: 2.6s; }
.hero-domains { animation-delay: 2.74s; }
.hero-cta { animation-delay: 2.86s; }
.hero-domains {
  max-width: 690px;
  margin: 18px auto 0;
  text-align: center;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
}
.hero-lead {
  max-width: 610px;
  margin: 22px auto 0;
  text-align: center;
  color: rgba(255,255,255,.9);
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.5;
  font-weight: 600;
}
.hero-sub { margin: 0 0 34px; font-size: 30px; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .hero-actions {
  justify-content: center;
  margin-top: 30px;
  gap: 18px;
}
.hero .btn {
  min-width: 185px;
  min-height: 54px;
  border-radius: 2px;
  border-width: 1px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
/* Les boutons du hero reprennent l'effet d'inversion du site d'inspiration sans copier sa mise en page. */
.hero .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #111623;
}
.hero .btn.primary:hover {
  background: rgba(8,18,33,.86);
  border-color: var(--accent);
  color: #fff;
}
.hero .btn.ghost {
  background: rgba(8,18,33,.86);
  border-color: var(--accent);
  color: #fff;
}
.hero .btn.ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #111623;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(calc(var(--float-distance) * -1)) rotate(var(--tilt)); }
}
@keyframes hero-globe-load {
  0% { opacity: 0; transform: scale(.78); }
  16%, 68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.64); visibility: hidden; }
}
@keyframes hero-globe-spin {
  to { transform: rotate(360deg); }
}
@keyframes hero-reveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-wave-enter {
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes hero-wave-hover {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -6px) scale(1.03); }
}
@keyframes hero-wave-pulse {
  0%, 100% { transform: scaleX(.94); opacity: .72; }
  50% { transform: scaleX(1.08); opacity: 1; }
}
@keyframes client-zig {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes client-zag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(14px); }
}

.intro-band {
  background: linear-gradient(180deg, #fff, #f3f6fa);
  margin-top: -72px;
  position: relative;
  z-index: 2;
}
.intro-card {
  background: #fff;
  box-shadow: var(--shadow);
  padding: 38px 46px;
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 24px;
}
.intro-card h2, section h2 {
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  color: var(--brand-dark);
  font-weight: 600;
}
.intro-card h2 { margin: 0; }
.intro-links { display: flex; gap: 22px; font-weight: 800; color: var(--brand); }
.intro-actions { display: flex; gap: 12px; }

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 70px;
  align-items: start;
}
.eyebrow, .pretitle {
  display: block;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.copy p, .service-copy p, .interpretation p, .prose p { color: #4e5866; }
.languages-panel {
  background: #fff;
  color: var(--ink);
  padding: 34px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}
.languages-panel h3 { margin: 0 0 18px; color: var(--brand-dark); font-size: 28px; }
.language-list {
  columns: 2;
  gap: 28px;
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.82;
  list-style: none;
}
.language-list li {
  position: relative;
  padding-left: 18px;
}
.language-list li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.panel-link { display: inline-block; margin-top: 22px; color: var(--accent); font-weight: 800; }

.services-section {
  padding: 0 0 84px;
  background: #f7f9fb;
}
.services-banner {
  padding: 26px 0;
  background: var(--accent);
  color: #18243a;
  box-shadow: 0 12px 32px rgba(226, 156, 45, .2);
}
.services-banner .container {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  font-weight: 900;
  text-align: center;
}
.services-inner {
  padding-top: 58px;
}
.services-section h2 {
  margin-bottom: 12px;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 900;
}
.services-section h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin-top: 24px;
  background: var(--accent);
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 48px;
}
.service-card {
  min-height: 168px;
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 30px 24px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #0d3f70, #071a48);
  border: 2px solid rgba(226, 156, 45, .72);
  border-radius: 20px;
  box-shadow: 0 18px 34px rgba(13, 63, 112, .18);
}
.service-card-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
}
.service-card-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-card h3 {
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.18;
  font-weight: 900;
}

.trusted { background: #fff; overflow: hidden; }
.trusted h2, .sectors h2, .why h2, .testimonials h2 { text-align: center; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  background: #fff;
}
.logo-grid span {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 15px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  color: #536173;
  font-weight: 800;
  text-align: center;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13, 63, 112, .08);
  animation: client-zig 3.6s ease-in-out infinite;
}
.logo-grid span:nth-child(2n) { animation-name: client-zag; animation-delay: -.7s; }
.logo-grid span:nth-child(3n) { animation-duration: 4.2s; }

.sectors { background: #f7f9fb; }
.sectors h2 {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.14;
}
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 42px;
}
.solution-card {
  position: relative;
  min-height: 260px;   /* augmenté : donne plus d'espace au texte du dépliant */
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 28px 22px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(26,99,166,.96), rgba(13,63,112,.98)),
    radial-gradient(circle at 20% 15%, rgba(226,156,45,.25), transparent 34%);
  border: 2px solid rgba(226,156,45,.82);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(13, 63, 112, .18);
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}
.solution-card:hover,
.solution-card:focus-visible,
.solution-card.is-open {
  transform: translateY(-8px);
  background:
    linear-gradient(145deg, rgba(13,63,112,.98), rgba(8,18,33,.98)),
    radial-gradient(circle at 22% 18%, rgba(226,156,45,.36), transparent 40%);
  box-shadow: 0 24px 46px rgba(13, 63, 112, .28);
}
.solution-icon {
  color: var(--accent);
  transform: translateY(0);
  transition: transform .24s ease, opacity .24s ease;
}
.solution-icon svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.solution-card strong {
  max-width: 260px;
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.18;
  font-weight: 900;
  transition: transform .24s ease, opacity .24s ease;
}
/* ── Face arrière — propriétés communes ── */
.solution-detail,
.solution-card em {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .24s ease, transform .24s ease;
}

/* Zone texte : remplit toute la hauteur de la carte (hors réserve pour em),
   centre le contenu verticalement → le texte ne déborde jamais du cadre
   quelle que soit sa longueur ou la taille de la carte. */
.solution-detail {
  top: 16px;           /* colle au bord supérieur de la carte avec un petit écart */
  bottom: 48px;        /* réserve l'espace pour em en bas */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,.92);
  font-size: 14px;     /* légèrement réduit pour tenir confortablement dans toutes les cartes */
  font-weight: 600;
  line-height: 1.5;    /* plus compact que la valeur globale 1.72 */
}

/* "Voir plus" : ancré au bas de la carte */
.solution-card em {
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--accent);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.solution-card:hover .solution-icon,
.solution-card:focus-visible .solution-icon,
.solution-card.is-open .solution-icon,
.solution-card:hover strong,
.solution-card:focus-visible strong,
.solution-card.is-open strong {
  opacity: 0;
  transform: translateY(-18px);
}
.solution-card:hover .solution-detail,
.solution-card:focus-visible .solution-detail,
.solution-card.is-open .solution-detail,
.solution-card:hover em,
.solution-card:focus-visible em,
.solution-card.is-open em {
  opacity: 1;
  transform: translateY(0); /* le texte monte en place depuis translateY(12px) */
}
.custom-sector {
  margin-top: 24px;
  padding: 28px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.custom-sector h3, .custom-sector p { margin: 0; }

.interpretation {
  background: var(--brand-dark);
  color: #fff;
  padding: 88px 0;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 70px;
  align-items: center;
}
.interpretation h2 { color: #fff; }
.interpretation p { color: rgba(255,255,255,.82); }
.dark-card {
  border: 1px solid rgba(255,255,255,.28);
  padding: 42px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255,255,255,.06);
}
.dark-card h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.1;
}

.why {
  background: #fff;
}
.why h2 {
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
}
.why-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px auto 46px;
  color: var(--accent);
}
.why-divider::before,
.why-divider::after {
  content: "";
  width: min(220px, 26vw);
  height: 1px;
  background: #d8c7bc;
}
.why-divider span {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 60% 0 60% 0;
  background: var(--accent);
  transform: rotate(-28deg);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
}
/* Cartes solutions ciblées par une ancre (#traduction-de-documents, etc.) — la marge
   compense la hauteur du header fixe pour que le titre ne soit pas caché au clic. */
.solution-anchor-card {
  scroll-margin-top: 130px;
}
.why-grid article {
  padding: 0;
  border-top: 0;
  background: #fff;
  box-shadow: none;
  text-align: center;
}
.why-icon {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: var(--brand-dark);
  background: transparent;
  border: 3px solid var(--brand-dark);
  border-radius: 50%;
  /* Transition fluide sur fond, bordure et couleur d'icône */
  transition:
    background .28s ease,
    border-color .28s ease,
    color .28s ease,
    transform .22s ease,
    box-shadow .28s ease;
}
.why-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------
   HOVER WHY-ICON — remplissage doré (var(--accent) = #e29c2d)
   Au survol d'un article, le cercle se remplit de la couleur
   or du site, la bordure suit, et l'icône passe en blanc.
   Fonctionne pour les icônes remplies (fill="currentColor")
   de la page d'accueil et les icônes en trait (stroke) des
   pages de services (localisation, révision, traduction).
   -------------------------------------------------------- */
.why-grid article:hover .why-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(226, 156, 45, .35);
}
.why-grid h3 {
  margin: 0 0 14px;
  color: var(--brand-dark);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 900;
}
.why-grid p {
  margin: 0;
  color: #586373;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}
.why-grid p strong {
  color: var(--accent);
  font-weight: 900;
}

.numbers {
  padding: 58px 0;
  background: #18243a;
  color: #fff;
}
.number-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  gap: 20px;
}
.number-grid strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
}
.number-grid span {
  display: block;
  margin-top: 10px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
}

.testimonials {
  background: #fff;
  overflow: hidden;
}
.review-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.testimonials-viewport {
  width: 100%;
  margin-top: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.testimonial-marquee {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: testimonial-scroll 46s linear infinite;
}
.testimonials-viewport:hover .testimonial-marquee {
  animation-play-state: paused;
}
.testimonial-marquee .review {
  width: min(360px, calc(100vw - 56px));
  flex: 0 0 min(360px, calc(100vw - 56px));
}
.review {
  padding: 30px;
  min-height: 245px;
  background: #fff;
  border: 4px solid #071a32;
  box-shadow: 0 10px 26px rgba(7,26,50,.16);
  animation: client-zig 3.8s ease-in-out infinite;
}
.review:nth-child(2n) { animation-name: client-zag; animation-delay: -.8s; }
.review:nth-child(3n) { animation-duration: 4.4s; }
.avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
  font-weight: 800;
}
.avatar-photo {
  object-fit: cover;
  border: 2px solid var(--brand);
}
.review h3 { margin: 14px 0 6px; color: #071a32; font-size: 16px; }
.review-org { margin: -4px 0 10px; color: #6b7280; font-size: 12.5px; font-weight: 700; }
.review p { margin: 0 0 14px; color: #17243a; font-weight: 700; }
.review span { color: #9a5a00; font-weight: 900; font-size: 13px; }
.dots { margin-top: 26px; text-align: center; }
.dot {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  margin: 0 5px;
  background: #c8d0d8;
  cursor: pointer;
}
.dot.active { background: var(--brand); }
.testimonials .dots { display: none; }

@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 11px)); }
}

.expertise { background: #f7f9fb; }
.prose { max-width: 920px; }
.prose h3 { margin-top: 28px; color: var(--brand-dark); }
.prose li { margin-bottom: 8px; color: #4e5866; }
.expertise .prose h3 {
  color: #071a32;
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.18;
  font-weight: 900;
}
.expertise .prose p,
.expertise .prose li {
  color: #17243a;
  font-size: clamp(18px, 1.45vw, 20px);
  line-height: 1.82;
  font-weight: 650;
}
.expertise .prose ul {
  margin: 22px 0 34px;
  padding: 24px 28px 24px 46px;
  background: #fff;
  border-left: 5px solid var(--accent);
  box-shadow: 0 14px 34px rgba(13,63,112,.08);
}
.expertise .prose li::marker {
  color: var(--accent);
}

.faq {
  background:
    linear-gradient(180deg, #fff, #f7f9fb);
}
.faq-inner {
  max-width: 1040px;
}
.faq h2 {
  margin: 0;
  color: var(--brand-dark);
  font-family: var(--content-font);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  text-align: center;
}
.faq-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 22px 0 28px;
}
.faq-divider::before,
.faq-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 330px;
  background: rgba(226,156,45,.5);
}
.faq-divider span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 34px;
  font-weight: 900;
}
.faq-intro {
  max-width: 980px;
  margin: 0 auto 34px;
  color: #425167;
  font-family: var(--content-font);
  font-size: 16px;
  line-height: 1.72;
}
.faq-intro p {
  margin: 0 0 12px;
}
.faq-intro strong {
  color: var(--brand-dark);
  font-weight: 900;
}
.accordion {
  display: grid;
  gap: 12px;
}
.accordion button {
  width: 100%;
  text-align: left;
  padding: 20px 60px 20px 28px;
  border: 2px solid rgba(26,99,166,.18);
  border-left: 8px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-dark);
  font-family: var(--content-font);
  font-size: clamp(15.5px, 1.4vw, 17px);
  font-weight: 700;
  cursor: pointer;
  position: relative;
  box-shadow: 0 12px 28px rgba(13,63,112,.08);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.accordion button:hover,
.accordion button.open {
  border-color: rgba(226,156,45,.75);
  background: #0d3f70;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(13,63,112,.12);
}
.accordion button::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}
.accordion button.open::after { content: "-"; }
.accordion div {
  display: none;
  margin-top: -8px;
  padding: 2px 32px 24px 38px;
  border-left: 8px solid rgba(226,156,45,.4);
  color: #4e5866;
  font-family: var(--content-font);
  font-size: 15px;
  line-height: 1.72;
}
.accordion div.open { display: block; }
.accordion p { margin: 14px 0 0; }

.footer {
  position: relative;
  padding: 54px 0 0;
  overflow: hidden;
  color: rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 38% 34%, rgba(26,99,166,.48), transparent 34%),
    linear-gradient(90deg, #0b2444, #0d3f70 46%, #071a32);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,.05) 44% 45%, transparent 45%),
    linear-gradient(45deg, transparent 0 56%, rgba(255,255,255,.035) 56% 57%, transparent 57%);
  opacity: .7;
  pointer-events: none;
}
.footer-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr;
  gap: 54px;
  align-items: start;
}
.footer-brand-block {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer-logo {
  display: inline-grid !important;
  justify-items: center;
  gap: 10px;
  width: fit-content;
  color: #fff;
}
.footer-symbol {
  position: relative;
  width: 118px;
  height: 58px;
}
.footer-symbol::before,
.footer-symbol::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 66px;
  height: 36px;
  border: 9px solid rgba(255,255,255,.95);
  border-radius: 999px 999px 999px 999px;
  transform: rotate(33deg);
}
.footer-symbol::before { left: 2px; }
.footer-symbol::after {
  right: 2px;
  transform: rotate(-33deg);
}
.footer-logo-text {
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.footer-tagline {
  width: fit-content;
  margin: 12px 0 0;
  padding-bottom: 8px;
  color: #f0a154;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-style: italic;
  line-height: 1.2;
  border-bottom: 1px solid rgba(240,161,84,.72);
}
.footer h3,
.footer-column h3 {
  margin: 0 0 16px;
  color: #ef9860;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 900;
}
.footer-column p {
  margin: 0 0 8px;
  color: #fff;
  font-weight: 700;
  line-height: 1.45;
}
.footer a,
.footer-column a {
  display: block;
  width: fit-content;
  margin: 7px 0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  transition: color .18s ease, transform .18s ease;
}
.footer a:hover,
.footer-column a:hover {
  color: #ef9860;
  transform: translateX(3px);
}
.footer-contact span {
  display: inline-block;
  min-width: 22px;
  color: #ef9860;
  font-weight: 900;
}
.footer-socials {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}
.footer-socials a {
  margin: 0;
}
.footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding: 14px 0 16px;
  border-top: 1px solid rgba(239,152,96,.9);
  text-align: center;
}
.footer-bottom p {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
/* Liens légaux (Mentions légales, CGV, Confidentialité, Cookies) : restent
   sur la même ligne que le reste du texte du bas de page, contrairement à
   la règle générique ".footer a" (display:block) utilisée pour le plan du
   site. Ajout ciblé, ne modifie pas ".footer a" existante. */
.footer-bottom a {
  display: inline;
  width: auto;
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease;
}
.footer-bottom a:hover {
  color: #ef9860;
  transform: none;
}
.footer-call-float {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 58px;
  height: 74px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  color: #fff !important;
  background: #e8752f;
  font-size: 27px !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
  transition: background .2s ease, transform .2s ease;
}
.footer-call-float:hover {
  background: #101827;
  transform: translateY(-5px);
}

.page-hero {
  position: relative;
  /* Toutes les pages ont désormais un hero de la même hauteur que celui de la
     page contact : ancré en bas plutôt que centré, avec la même marge basse. */
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 46px;
  color: #fff;
  overflow: hidden;
}
.page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.1) contrast(1.04) saturate(1.06);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 23, 39, .64), rgba(10, 31, 52, .34)),
    linear-gradient(180deg, rgba(9, 23, 39, .1), rgba(9, 23, 39, .2));
}
.page-hero-content { position: relative; max-width: 820px; }
.breadcrumb {
  margin: 0 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.page-hero h1 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1;
}
.page-hero p:last-child {
  margin: 0;
  max-width: 720px;
  font-size: 22px;
  font-weight: 700;
}
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  align-items: start;
}
.page-copy .lead {
  color: var(--brand-dark);
  font-size: 21px;
  line-height: 1.55;
  font-weight: 700;
}
.page-copy p { color: #4e5866; }
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 30px;
}
.feature-list span {
  padding: 14px 16px;
  background: #f4f7fa;
  border-left: 4px solid var(--accent);
  color: var(--brand-dark);
  font-weight: 800;
}
.page-aside {
  padding: 28px;
  background: #fff;
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}
.page-aside h3 {
  margin: 0 0 12px;
  color: var(--brand-dark);
}
.page-aside a:not(.btn) {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: #39495c;
  font-weight: 700;
}
.aside-btn {
  width: 100%;
  margin-top: 22px;
  text-align: center;
  /* Le CTA lateral peut etre long : cette taille garde le texte dans le bouton orange. */
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.2;
  white-space: normal;
}
.process-band {
  padding: 62px 0;
  background: #17243a;
  color: #fff;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.process-grid div {
  padding: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.process-grid strong {
  display: block;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 1;
}
.process-grid h3 { margin: 16px 0 8px; }
.process-grid p { margin: 0; color: rgba(255,255,255,.76); }
/* Variante imagee du processus de la page Traduction, inspiree des box de reference. */
.process-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.process-card {
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 36px rgba(8,18,33,.18);
}
.process-card-media {
  min-height: 148px;
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/hero-travel.jpg") center / cover;
}
.process-card-media.process-analyse {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.34)),
    url("/assets/images/image-page-traduction/hero-google-translation.jfif") center / cover;
}
.process-card-media.process-selection {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.34)),
    url("/assets/images/interpretariat/liaison.jpg") center / cover;
}
.process-card-media.process-production {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.34)),
    url("/assets/images/hero-vimeo.jpg") center / cover;
}
.process-card-media.process-livraison {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.34)),
    url("/assets/images/footer-global-business.jpg") center / cover;
}
.process-card-body {
  padding: 26px 28px 30px;
}
.process-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--brand);
  border: 2px solid rgba(26,99,166,.42);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}
.process-card h3 {
  margin: 0 0 12px;
  color: var(--brand-dark);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
}
.process-card p {
  margin: 0 0 18px;
  color: #4e5866;
  font-size: 15px;
  line-height: 1.65;
}
.process-card ul {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-weight: 800;
  line-height: 1.55;
}
.process-card li {
  margin: 7px 0;
}
.section-lead {
  max-width: 760px;
  margin: -10px 0 36px;
  color: #4e5866;
  font-size: 19px;
  line-height: 1.65;
  font-weight: 700;
}
/* Sections propres a la page Traduction : elles reprennent les cartes et couleurs du site. */
.translation-budget {
  background: linear-gradient(180deg, #fff, #f7f9fb);
}
.translation-budget h2,
.translation-why h2,
.translation-final-cta h2 {
  margin: 0 0 22px;
  color: var(--brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.12;
  font-weight: 600;
}
.translation-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.translation-info-card {
  min-height: 245px;
  padding: 30px;
  background: #fff;
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}
.translation-info-card strong {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1;
}
.translation-info-card h3,
.translation-why h3 {
  margin: 0 0 12px;
  color: var(--brand-dark);
  font-size: 23px;
  line-height: 1.2;
}
.translation-info-card p,
.translation-why p,
.translation-final-cta p {
  margin: 0;
  color: #4e5866;
}
.translation-why {
  background: #17243a;
  color: #fff;
}
.translation-why .eyebrow,
.translation-why h2 {
  color: #fff;
}
.translation-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.translation-why-grid article {
  padding: 26px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--accent);
}
.translation-why h3 {
  color: var(--accent);
}
.translation-why p {
  color: rgba(255,255,255,.78);
}
.translation-languages {
  background: #f7f9fb;
}
.translation-languages-panel {
  position: relative;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 46px;
  background: #fff;
  box-shadow: var(--shadow);
}
/* Trait decoratif repris de la reference, mais adapte a la palette du site. */
.translation-languages-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34%;
  width: 300px;
  height: 5px;
  background: var(--accent);
}
.translation-languages-copy h2 {
  margin: 0 0 20px;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  font-weight: 900;
}
.translation-languages-copy p {
  margin: 0;
  color: #4e5866;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 800;
}
.language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.language-card {
  min-height: 136px;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  background: #f8fafc;
  border: 1px solid rgba(26,99,166,.08);
  box-shadow: 0 12px 28px rgba(13,63,112,.08);
}
.language-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
}
.language-mark.us { background: linear-gradient(135deg, #b74f5a, #f1d3d7); color: #78313a; }
.language-mark.uk { background: linear-gradient(135deg, #17345f, #c9505d); }
.language-mark.fr { background: linear-gradient(90deg, #233f86, #fff, #d7464f); color: #17243a; }
.language-mark.es { background: linear-gradient(180deg, #c94d45, #f0c758, #c94d45); color: #17243a; }
.language-mark.pt { background: linear-gradient(90deg, #249a76, #d94e4e); }
.language-mark.de { background: linear-gradient(180deg, #252b35, #d94e4e, #f0c758); color: #fff; }
.language-mark.it { background: linear-gradient(90deg, #249a76, #fff, #d94e4e); color: #17243a; }
.language-card h3 {
  margin: 0 0 2px;
  color: var(--brand-dark);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
}
.language-card p {
  margin: 0;
  color: #667181;
  font-size: 13px;
  font-weight: 800;
}
.translation-final-cta {
  background: linear-gradient(135deg, #f7f9fb, #fff);
}
.final-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: 52px 46px;
  background: #fff;
  border-left: 6px solid var(--accent);
  box-shadow: var(--shadow);
}
.translation-final-cta h2 {
  margin-bottom: 12px;
}
/* Boîtes "Prochaine étape" (CTA final) — boutons empilés à gauche l'un sous
   l'autre, avec de la marge autour, sur toutes les pages du site (même
   agencement que la page À propos). */
.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}
/* Uniformisation site entière : le 2e bouton (souvent "Nous contacter", plus
   court) est centré par rapport au 1er bouton (le plus large), qui détermine
   la largeur du bloc — même style que les pages Partenaires sur tout le site.
   Ciblé par position (dernier bouton du groupe) plutôt que par classe, car ce
   bouton est tantôt ".btn.secondary", tantôt ".btn.ghost" selon les pages. */
.final-cta-actions .btn:last-child {
  align-self: center;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-grid article {
  background: #fff;
  box-shadow: 0 10px 30px rgba(20,30,42,.1);
}
.article-thumb {
  min-height: 165px;
  background:
    linear-gradient(180deg, rgba(10,23,37,.08), rgba(10,23,37,.72)),
    linear-gradient(135deg, #9aa9b6, #1f557c);
}
.news-grid h2 {
  margin: 22px 22px 10px;
  font-size: 24px;
}
.news-grid p {
  margin: 0 22px 18px;
  color: #4e5866;
}
.news-grid a {
  display: inline-block;
  margin: 0 22px 24px;
  color: var(--brand);
  font-weight: 800;
}
.testimonials-list .review-row {
  grid-template-columns: repeat(3, 1fr);
}
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 60px;
  align-items: start;
}
.contact-cards {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.contact-cards span {
  padding: 16px 18px;
  background: #f4f7fa;
  color: var(--brand-dark);
  font-weight: 800;
}
.contact-form {
  display: grid;
  gap: 16px;
  padding: 30px;
  background: #fff;
  box-shadow: var(--shadow);
}
.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--brand-dark);
  font-weight: 800;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.contact-form textarea { resize: vertical; }
.form-status {
  margin: 0;
  font-weight: 800;
}
.form-status--ok { color: #1a7a4c; }
.form-status--error { color: #c0392b; }

/* Harmonisation des textes de contenu pour un rendu plus international et regulier. */
:root {
  --content-font: "Segoe UI", Arial, Helvetica, sans-serif;
  --content-text: #415066;
  --content-strong: #102b4c;
}

main :where(
  .content-grid,
  .services-section,
  .sectors,
  .interpretation,
  .why,
  .expertise,
  .faq,
  .page-layout,
  .form-layout,
  .process-band,
  .news-grid,
  .testimonials-list,
  .localisation-intro,
  .localisation-cards-section,
  .localisation-why,
  .localisation-faq,
  .interpretariat-intro,
  .interpretariat-service,
  .interpretariat-languages
) {
  font-family: var(--content-font);
}

main :where(
  .content-grid,
  .services-section,
  .sectors,
  .interpretation,
  .why,
  .expertise,
  .faq,
  .page-layout,
  .form-layout,
  .news-grid,
  .testimonials-list,
  .localisation-intro,
  .localisation-cards-section,
  .localisation-why,
  .localisation-faq,
  .interpretariat-intro,
  .interpretariat-service,
  .interpretariat-languages
) :where(h2, h3) {
  font-family: var(--content-font);
  letter-spacing: 0;
  text-wrap: balance;
}

main :where(
  .content-grid,
  .expertise,
  .page-layout,
  .form-layout,
  .localisation-intro,
  .interpretariat-intro
) :where(p, li) {
  color: var(--content-text);
  font-size: 17px;
  line-height: 1.78;
}

main :where(.copy p, .page-copy p, .prose p, .localisation-copy p, .interpretariat-copy p) {
  margin-top: 0;
  max-width: 76ch;
}

main :where(.page-copy .lead, .localisation-copy .lead, .interpretariat-copy .lead) {
  color: var(--content-strong);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.62;
  font-weight: 800;
}

main :where(.copy p strong, .why-grid p strong, .faq-intro strong) {
  color: var(--content-strong);
  font-weight: 900;
}

main :where(.eyebrow, .pretitle) {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
}

main :where(.services-section h2, .sectors h2, .why h2, .faq h2, .expertise h2, .page-copy h2, .localisation-copy h2, .interpretariat-copy h2) {
  color: var(--brand-dark);
  font-weight: 900;
}

main :where(.service-card h3, .solution-card strong, .why-grid h3, .review h3, .localisation-card h3, .language-card strong, .process-grid h3, .news-grid h2) {
  font-family: var(--content-font);
  font-weight: 900;
  line-height: 1.18;
}

main :where(.why-grid p, .localisation-card p, .accordion div, .faq-intro, .news-grid p, .process-grid p) {
  color: var(--content-text);
  font-size: 16px;
  line-height: 1.72;
}
/* .solution-detail retiré de la règle globale : sa taille et son interligne
   sont gérés dans le bloc .solution-detail dédié ci-dessus (14px / 1.5)
   pour éviter tout débordement hors du cadre lors de l'ouverture de la carte. */

main :where(.interpretation, .band-blue, .process-band) :where(p, li, .process-grid p) {
  color: rgba(255,255,255,.84);
}

main :where(.band-gold) :where(p, li) {
  color: #17243a;
}

main :where(.service-card, .solution-card, .review, .localisation-card, .language-card, .page-aside, .languages-panel, .contact-form) {
  text-rendering: optimizeLegibility;
}

main :where(.feature-list span, .language-list li, .localisation-card li, .page-aside a:not(.btn), .contact-cards span) {
  font-family: var(--content-font);
  font-size: 15px;
  line-height: 1.6;
}

.localisation-hero {
  min-height: 500px;
  background: #071a32;
}
.localisation-hero .page-hero-media {
  object-fit: contain;
  object-position: center center;
  filter: brightness(1.08) contrast(1.04) saturate(1.08);
}
.localisation-hero .page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(8,18,33,.82), rgba(8,18,33,.48) 34%, rgba(8,18,33,.05) 72%),
    linear-gradient(180deg, rgba(8,18,33,.06), rgba(8,18,33,.18));
}
.localisation-hero .page-hero-content {
  max-width: 610px;
  padding-top: 44px;
  margin-right: auto;
}
.localisation-hero h1 {
  color: #fff;
  text-shadow: 0 12px 28px rgba(0,0,0,.34);
}
.localisation-hero p:last-child {
  max-width: 620px;
  color: rgba(255,255,255,.95);
}
.localisation-intro {
  background: #fff;
}
.localisation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 72px;
  align-items: start;
}
.localisation-copy {
  max-width: 760px;
}
.localisation-copy h2 {
  margin-bottom: 20px;
  color: var(--brand-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.04;
}
.localisation-copy .lead {
  color: var(--brand-dark);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 800;
}
.localisation-copy p {
  color: #4e5866;
}
.localisation-aside a.is-current {
  color: var(--brand-dark);
  font-weight: 900;
}
.localisation-cards-section {
  padding: 0 0 78px;
  background: #fff;
}
.localisation-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.localisation-card {
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13,63,112,.1);
  border: 1px solid rgba(13,63,112,.06);
}
.localisation-card-media {
  min-height: 150px;
  background:
    linear-gradient(180deg, rgba(8,18,33,.05), rgba(8,18,33,.16)),
    url("/assets/images/localisation/hero-location.jpeg") center / cover;
}
.media-web {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.16)),
    url("/assets/images/localisation/site-web.jpg") center / cover;
}
.media-app {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.18)),
    url("/assets/images/localisation/application.jpg") center / cover;
}
.media-seo {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.14)),
    url("/assets/images/localisation/seo-web-designs-pro.jpg") center / cover;
}
.media-culture {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.18)),
    url("/assets/images/localisation/adaptation-culturelle.jpg") center / cover;
}
.localisation-card-body {
  padding: 24px 22px 26px;
}
.localisation-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 30px;
  line-height: 1;
}
.localisation-card h3 {
  margin: 0 0 12px;
  color: var(--brand-dark);
  font-size: 20px;
}
.localisation-card p {
  margin: 0 0 18px;
  color: #526071;
  font-size: 15px;
  line-height: 1.58;
}
.localisation-card ul {
  margin: 0;
  padding-left: 16px;
  color: #263a52;
  font-size: 14px;
  line-height: 1.62;
  font-weight: 700;
}
.localisation-why {
  background: #fff;
}
.localisation-why-grid {
  grid-template-columns: repeat(4, 1fr);
}
.localisation-faq {
  background: #fff;
}
.localisation-faq-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.localisation-faq h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 7vw, 78px);
  line-height: .95;
  color: var(--brand-dark);
}

.interpretariat-hero {
  /* Hauteur unifiée avec les autres heros — héritée de .page-hero. */
  background:
    linear-gradient(90deg, #071a32, #0d3f70 50%, #071a32);
}
.interpretariat-hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(226,156,45,.18), transparent 28%),
    linear-gradient(90deg, rgba(7,26,50,.96), rgba(13,63,112,.88), rgba(7,26,50,.96));
}
.interpretariat-hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,26,50,.78), transparent 24%, transparent 76%, rgba(7,26,50,.78)),
    linear-gradient(180deg, rgba(7,26,50,.2), rgba(7,26,50,.1) 52%, rgba(7,26,50,.3));
  pointer-events: none;
}
.interpretariat-hero-stage::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(48vw, 760px);
  background: linear-gradient(90deg, transparent, rgba(8,18,33,.68) 38%, rgba(8,18,33,.82));
  pointer-events: none;
}
.interpretariat-hero-slide {
  --cycle: 15s;
  position: absolute;
  left: 34%;
  top: 52%;
  width: min(35vw, 390px);
  height: min(78%, 460px);
  padding: 10px;
  object-fit: contain;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 28px 60px rgba(0,0,0,.34);
  filter: brightness(1.1) contrast(1.04) saturate(1.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: interpretariat-hero-carousel var(--cycle) ease-in-out infinite;
  animation-delay: calc(var(--slide) * -3s);
}
.interpretariat-hero .page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(8,18,33,.38), rgba(13,63,112,.03) 48%, rgba(8,18,33,.22)),
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.12));
}
.interpretariat-hero .page-hero-content {
  max-width: 760px;
  margin-left: auto;
  text-align: right;
  padding: 28px 30px;
  background: linear-gradient(90deg, rgba(8,18,33,.2), rgba(8,18,33,.58));
  border-right: 4px solid rgba(226,156,45,.9);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);
  backdrop-filter: blur(3px);
}
.interpretariat-hero h1 {
  color: #fff;
  text-shadow: 0 12px 28px rgba(0,0,0,.42);
}
.interpretariat-hero p:last-child {
  margin-left: auto;
  padding: 8px 14px;
  width: fit-content;
  max-width: 680px;
  background: rgba(226,156,45,.96);
  color: #101827;
  font-size: 17px;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
}
@keyframes interpretariat-hero-carousel {
  0%, 14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1.14) contrast(1.05) saturate(1.1);
  }
  20%, 34% {
    opacity: .64;
    transform: translate(12%, -50%) scale(.72);
    filter: brightness(.92) contrast(1.03) saturate(1.02);
  }
  40%, 54% {
    opacity: 0;
    transform: translate(58%, -50%) scale(.62);
  }
  60%, 74% {
    opacity: 0;
    transform: translate(-150%, -50%) scale(.62);
  }
  80%, 94% {
    opacity: .64;
    transform: translate(-108%, -50%) scale(.72);
    filter: brightness(.92) contrast(1.03) saturate(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1.14) contrast(1.05) saturate(1.1);
  }
}
.interpretariat-intro {
  background: #fff;
}
/* Paragraphe de définition en tout début de page service (traduction, interprétariat,
   localisation, révision) — pose le cadre avant le reste du contenu. */
.service-definition {
  background: var(--soft);
  padding: 40px 0;
}
.service-definition .container {
  max-width: 900px;
}
.service-definition p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--brand-dark);
  font-weight: 600;
  border-left: 4px solid var(--accent);
  padding-left: 22px;
}
.interpretariat-copy {
  max-width: 980px;
}
.interpretariat-copy h2 {
  max-width: 780px;
  color: var(--brand-dark);
}
.interpretariat-copy .lead {
  color: #263a52;
  font-size: 20px;
  font-weight: 800;
}
.interpretariat-copy p {
  color: #4e5866;
}
.interpretariat-service {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.interpretariat-service::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.28) 42% 43%, transparent 43%),
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.18), transparent 28%);
}
.band-blue {
  background:
    linear-gradient(90deg, rgba(8,18,33,.96), rgba(13,63,112,.88)),
    #0d3f70;
}
.band-gold {
  color: #101827;
  background:
    linear-gradient(90deg, rgba(226,156,45,.96), rgba(239,171,73,.86)),
    #e29c2d;
}
.interpretariat-band {
  position: relative;
  z-index: 1;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 60px;
  align-items: center;
  padding: 70px 0;
}
.interpretariat-band.reverse {
  grid-template-columns: 410px minmax(0, 1fr);
}
.interpretariat-band.reverse > div:first-child {
  grid-column: 2;
}
.interpretariat-band.reverse .interpretariat-visual {
  grid-column: 1;
  grid-row: 1;
}
.interpretariat-service h2 {
  color: inherit;
  margin-bottom: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
}
.interpretariat-service p {
  max-width: 660px;
  color: inherit;
  line-height: 1.72;
}
.interpretariat-service ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.interpretariat-service li {
  position: relative;
  margin: 8px 0;
  padding-left: 22px;
  font-weight: 800;
}
.interpretariat-service li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: currentColor;
}
.band-blue .eyebrow,
.band-blue li::before {
  color: var(--accent);
}
.band-gold .eyebrow {
  color: #0d3f70;
}
.interpretariat-visual {
  min-height: 245px;
  aspect-ratio: 16 / 10;
  border: 8px solid rgba(255,255,255,.28);
  border-radius: 2px;
  box-shadow: 0 22px 54px rgba(0,0,0,.24);
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(145deg, #8aa6bc, #163d60);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.visual-simultaneous {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.22)),
    url("/assets/images/interpretariat/simultane.jpg") center / cover;
}
.visual-consecutive {
  background:
    linear-gradient(180deg, rgba(226,156,45,.03), rgba(8,18,33,.2)),
    url("/assets/images/interpretariat/consecutif.jpg") center / cover;
}
.visual-liaison {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.22)),
    url("/assets/images/interpretariat/liaison.jpg") center / cover;
}
.visual-whisper {
  background:
    linear-gradient(180deg, rgba(226,156,45,.03), rgba(8,18,33,.2)),
    url("/assets/images/interpretariat/chuchote.jpg") center / cover;
}
.visual-remote {
  background:
    linear-gradient(180deg, rgba(8,18,33,.02), rgba(8,18,33,.22)),
    url("/assets/images/interpretariat/visio.jpg") center / cover;
}
.interpretariat-languages {
  padding: 64px 0;
  background: #fff;
}
.interpretariat-language-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(34px, 5vw, 58px);
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(13,63,112,.14);
}
.interpretariat-language-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32%;
  width: 34%;
  height: 5px;
  background: var(--accent);
}
.language-copy {
  position: relative;
  z-index: 1;
}
.language-copy h2 {
  margin: 0 0 22px;
  color: var(--brand-dark);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
}
.section-mark {
  display: block;
  width: 54px;
  height: 4px;
  margin-bottom: 28px;
  background: var(--accent);
}
.language-copy p {
  margin: 0 0 34px;
  color: #33455b;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 800;
}
.language-contact {
  min-width: 185px;
}
.language-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 22px;
}
.language-card {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 20px 14px;
  text-align: center;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid rgba(13,63,112,.08);
  border-radius: 4px;
  box-shadow: 0 16px 34px rgba(13,63,112,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.language-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 42px rgba(13,63,112,.16);
}
.language-card strong {
  font-size: 18px;
  line-height: 1.12;
  font-weight: 900;
}
.language-card em {
  color: #7b8795;
  font-style: normal;
  font-weight: 800;
}
.flag {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(13,63,112,.16);
}
.flag-us { background: linear-gradient(#b22234 0 14%,#fff 14% 28%,#b22234 28% 42%,#fff 42% 56%,#b22234 56% 70%,#fff 70% 84%,#b22234 84%); }
.flag-uk { background: linear-gradient(45deg,#012169 0 35%,#fff 35% 42%,#c8102e 42% 48%,#fff 48% 55%,#012169 55%); }
.flag-fr { background: linear-gradient(90deg,#123c8c 0 33%,#fff 33% 66%,#ed2939 66%); }
.flag-es { background: linear-gradient(#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%); }
.flag-pt { background: linear-gradient(90deg,#046a38 0 42%,#da291c 42%); }
.flag-de { background: linear-gradient(#000 0 33%,#dd0000 33% 66%,#ffce00 66%); }
.flag-it { background: linear-gradient(90deg,#009246 0 33%,#fff 33% 66%,#ce2b37 66%); }
.interpretariat-numbers {
  background:
    linear-gradient(90deg, rgba(24,36,58,.94), rgba(13,63,112,.9)),
    #18243a;
}
.interpretariat-numbers .number-grid {
  grid-template-columns: repeat(3, 1fr);
}
/* Page agence : 4 chiffres clés, sur une seule ligne — marge réduite pour que
   les 4 tuiles tiennent côte à côte sans passer à la ligne. */
.agence-numbers-4col .number-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 700px) {
  .agence-numbers-4col .number-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.interpretariat-why-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   PAGE LOCALISATION — styles complets
   Technique hero : même carousel CSS que l'interprétariat (--slide / animation-delay)
   Les .accordion FAQ et les .btn réutilisent les styles globaux existants.
   ========================================================================== */

/* ---------- Hero animé localisation ---------- */

/* Conteneur hero : même base que .page-hero mais avec un fond
   bleu foncé propre à la localisation */
.localisation-hero-anim {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #0d3f70 55%, #1a63a6 100%);
  min-height: 580px;
  display: flex;
  align-items: center;
}

/* Scène du carousel — plein-écran, centré, pointer-events off */
.loc-hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Globe décoratif en arrière-plan : cercle avec anneaux CSS */
.loc-globe-bg {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 42%,
    rgba(26, 99, 166, .32) 0%,
    rgba(13, 63, 112, .18) 55%,
    transparent 80%
  );
  border: 2px solid rgba(226, 156, 45, .22);
  box-shadow:
    0 0 0 18px rgba(26, 99, 166, .09),
    0 0 0 36px rgba(26, 99, 166, .06),
    0 0 0 60px rgba(26, 99, 166, .03);
  animation: loc-globe-pulse 6s ease-in-out infinite;
}

@keyframes loc-globe-pulse {
  0%, 100% { box-shadow: 0 0 0 18px rgba(26,99,166,.09), 0 0 0 36px rgba(26,99,166,.06), 0 0 0 60px rgba(26,99,166,.03); }
  50%       { box-shadow: 0 0 0 24px rgba(226,156,45,.12), 0 0 0 46px rgba(226,156,45,.07), 0 0 0 72px rgba(226,156,45,.03); }
}

/* Chaque carte de service : positionnée en absolu comme les slides interprétariat */
.loc-slide {
  /* Durée du cycle : 4 slides × 3 s = 12 s */
  --cycle: 12s;
  position: absolute;
  left: 68%;
  top: 50%;
  width: min(32vw, 340px);
  height: min(74%, 370px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: loc-hero-carousel var(--cycle) ease-in-out infinite;
  /* Décalage identique à l'interprétariat : chaque slide commence 3 s plus tard */
  animation-delay: calc(var(--slide) * -3s);
}

/* Keyframes : copie exacte de la logique interpretariat-hero-carousel,
   adaptée pour 4 slides (pas 5) — intervalles ajustés en conséquence */
@keyframes loc-hero-carousel {
  /* Slide au premier plan */
  0%,  16% { opacity: 1;   transform: translate(-50%, -50%) scale(1);   filter: brightness(1.1); }
  /* Départ vers la droite */
  22%, 38% { opacity: .62; transform: translate(14%, -50%) scale(.74);  filter: brightness(1); }
  /* Hors cadre à droite */
  42%, 58% { opacity: 0;   transform: translate(68%, -50%) scale(.62);  filter: brightness(1); }
  /* Hors cadre à gauche */
  62%, 78% { opacity: 0;   transform: translate(-164%, -50%) scale(.62); filter: brightness(1); }
  /* Retour depuis la gauche */
  82%, 98% { opacity: .62; transform: translate(-118%, -50%) scale(.74); filter: brightness(1); }
  /* Retour au premier plan */
  100%     { opacity: 1;   transform: translate(-50%, -50%) scale(1);   filter: brightness(1.1); }
}

/* Carte interne : design glassmorphisme léger sur fond bleu */
.loc-slide-inner {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  color: #fff;
}

/* En-tête de carte : drapeau + titre de service */
.loc-slide-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.loc-slide-top strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.loc-slide-top span {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Séparateur doré entre l'en-tête et la liste */
.loc-slide-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  border-radius: 2px;
  opacity: .7;
}

/* Liste des points : mise en forme épurée */
.loc-slide-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.loc-slide-list span {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}

.loc-slide-list span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Tagline en or sous le H1 */
.loc-hero-tagline {
  display: inline-block;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 4px 0 12px;
}

/* Boutons hero : layout flex, même ordre que la page d'accueil */
.loc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* ---------- Section 1 — Pourquoi localiser ---------- */

.loc-why-section {
  padding: 80px 0;
  background: var(--white);
}

.loc-why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.loc-why-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Liste de points forts avec icône checkmark */
.loc-why-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.loc-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(26, 99, 166, .05);
  border-radius: 8px;
  border-left: 3px solid var(--brand);
}

.loc-check-item::before {
  content: "✓";
  color: var(--brand);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Visuel côté droit : photo globe / drapeaux */
.loc-why-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

/* Photo remplaçant l'ancien SVG — bordure et ombre identiques aux visuals interprétariat */
.loc-why-photo {
  width: 100%;
  max-width: 480px;
  height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  border: 6px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 54px rgba(0,0,0,.28);
}

.loc-why-visual-icon {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 40%, #1a63a6, #0d3f70 70%);
  border: 4px solid var(--accent);
  box-shadow:
    0 0 0 16px rgba(26, 99, 166, .1),
    0 0 0 32px rgba(26, 99, 166, .05),
    0 24px 56px rgba(13, 63, 112, .3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 72px;
  animation: loc-globe-pulse 6s ease-in-out infinite;
}

/* Lignes de longitude / latitude CSS */
.loc-why-visual-icon::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
}

.loc-why-visual-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .18);
  transform: translateX(-50%);
}

/* ---------- Sections Services (bandes alternées) ---------- */

.loc-service-section {
  padding: 72px 0;
}

/* Bandes de couleur alternées */
.loc-band-white { background: var(--white); }
.loc-band-dark  { background: var(--brand-dark); color: #fff; }
.loc-band-gold  { background: var(--accent); color: var(--ink); }

/* Textes inversés sur fond sombre */
.loc-band-dark h2,
.loc-band-dark h3,
.loc-band-dark .eyebrow,
.loc-band-dark p { color: #fff; }

.loc-band-dark .eyebrow { color: rgba(255,255,255,.72); }

.loc-band-gold .eyebrow { color: var(--ink); opacity: .75; }

/* Layout deux colonnes : texte + visuel */
.loc-service-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Inversé : visuel à gauche, texte à droite (bandes dark) */
.loc-band-dark .loc-service-layout {
  direction: rtl;
}

.loc-band-dark .loc-service-layout > * {
  direction: ltr;
}

.loc-service-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Liste de points service avec puce personnalisée */
.loc-service-bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.loc-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
}

.loc-bullet::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Sur bande dorée, la puce est bleu foncé */
.loc-band-gold .loc-bullet::before { background: var(--brand-dark); }

/* ---------- Visuels CSS pour chaque service ---------- */

/* Conteneur partagé pour tous les visuels service */
.loc-service-visual {
  border-radius: 16px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Sites Web : grille de fenêtres navigateur simulée */
.loc-visual-web {
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
  border: 2px solid rgba(26, 99, 166, .15);
}

.loc-visual-web::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 110px;
  background: #fff;
  border-radius: 8px;
  border-top: 22px solid #0d3f70;
  box-shadow: 14px 14px 0 rgba(26,99,166,.14), -14px 14px 0 rgba(226,156,45,.14);
}

.loc-visual-web::after {
  content: "";
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 14px);
  width: 144px;
  height: 76px;
  background: repeating-linear-gradient(
    0deg,
    rgba(13, 63, 112, .08) 0px,
    rgba(13, 63, 112, .08) 2px,
    transparent 2px,
    transparent 12px
  );
  border-radius: 0 0 4px 4px;
}

/* Applications Mobiles : téléphone CSS */
.loc-visual-app {
  background: linear-gradient(135deg, #0d3f70 0%, #1a63a6 100%);
}

.loc-visual-app::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 155px;
  background: #fff;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, .4);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
}

.loc-visual-app::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 36px);
  transform: translateX(-50%);
  width: 70px;
  height: 110px;
  background: repeating-linear-gradient(
    0deg,
    rgba(26, 99, 166, .15) 0px,
    rgba(26, 99, 166, .15) 2px,
    transparent 2px,
    transparent 10px
  );
  border-radius: 2px;
}

/* SaaS : mockup avec flags + barres d'UI */
.loc-visual-saas {
  background: linear-gradient(135deg, #18243a 0%, #0d3f70 100%);
  border-radius: 16px;
  padding: 24px 22px;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* Rangée de drapeaux dans le mockup SaaS */
.loc-saas-flags {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

/* Barre d'UI simulée (dots + ligne) */
.loc-saas-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.loc-saas-bar-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.loc-saas-bar-line {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}

/* Multimédia : icône play CSS */
.loc-visual-media {
  background: linear-gradient(135deg, #e29c2d 0%, #c8831a 100%);
}

.loc-visual-media::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 3px solid rgba(255, 255, 255, .55);
}

.loc-visual-media::after {
  content: "";
  position: absolute;
  left: calc(50% + 6px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 0 22px 38px;
  border-color: transparent transparent transparent #fff;
}

/* ---------- Stack technique ---------- */

.loc-stack-section {
  padding: 80px 0;
  background: #f8faff;
}

.loc-stack-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: center;
}

/* Grille des icônes de stack */
.loc-stack-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.loc-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Icône dans un cercle bleu */
.loc-stack-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(13, 63, 112, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.loc-stack-item:hover .loc-stack-icon {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(13, 63, 112, .32);
}

.loc-stack-icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Barre de statistiques ---------- */

/* Statistiques sous la grille "Pourquoi AxioTrad" */
.loc-stats-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 48px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(13, 63, 112, .12);
}

.loc-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px;
  background: var(--brand-dark);
  text-align: center;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.loc-stat:last-child { border-right: none; }

/* Chiffre en gras, couleur dorée */
.loc-stat strong {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.loc-stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  line-height: 1.35;
}

/* ---------- CTA final ---------- */

.loc-final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #0a1628, #0d3f70 70%);
}

/* Carte interne : flex horizontal sur desktop */
.loc-cta-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 48px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  backdrop-filter: blur(10px);
}

.loc-cta-card h2 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 8px;
}

.loc-cta-card p {
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
}

/* Groupe boutons : même ordre que homepage (primary en premier, ghost/secondary ensuite) */
.loc-cta-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  flex-shrink: 0;
}

/* Grid Pourquoi AxioTrad localisation : 4 colonnes */
.localisation-why-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   FIN PAGE LOCALISATION
   ========================================================================== */

/* ==========================================================================
   PAGE RÉVISION DE DOCUMENTS — styles complets
   Technique hero : même carousel CSS que l'interprétariat et la localisation.
   Les .accordion FAQ et les .btn réutilisent les styles globaux existants.
   ========================================================================== */

/* ---------- Hero animé révision ---------- */

/* Conteneur hero : fond bleu nuit avec accent document */
.revision-hero-anim {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #0d3f70 55%, #1a63a6 100%);
  min-height: 580px;
  display: flex;
  align-items: center;
}

/* Scène plein-écran du carousel — pointer-events off */
.rev-hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Visuel décoratif : feuille de document CSS en fond */
.rev-doc-bg {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: min(42vw, 400px);
  height: min(54vw, 520px);
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  box-shadow:
    0 0 0 16px rgba(26, 99, 166, .06),
    0 0 0 32px rgba(26, 99, 166, .03);
}

/* Coin plié du document */
.rev-doc-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(225deg, #1a63a6 50%, transparent 50%);
  border-radius: 0 8px 0 0;
}

/* Lignes de texte simulées sur le document */
.rev-doc-bg::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 64px;
  right: 24px;
  bottom: 40px;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, .06) 0px,
    rgba(255, 255, 255, .06) 2px,
    transparent 2px,
    transparent 16px
  );
}

/* Carte carousel révision */
.rev-slide {
  --cycle: 12s;
  position: absolute;
  left: 68%;
  top: 50%;
  width: min(30vw, 320px);
  height: min(72%, 350px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: rev-hero-carousel var(--cycle) ease-in-out infinite;
  animation-delay: calc(var(--slide) * -3s);
}

/* Keyframes : strictement identique à loc-hero-carousel / interpretariat-hero-carousel */
@keyframes rev-hero-carousel {
  0%,  16% { opacity: 1;   transform: translate(-50%, -50%) scale(1);    filter: brightness(1.1); }
  22%, 38% { opacity: .62; transform: translate(14%, -50%) scale(.74);   filter: brightness(1); }
  42%, 58% { opacity: 0;   transform: translate(68%, -50%) scale(.62);   filter: brightness(1); }
  62%, 78% { opacity: 0;   transform: translate(-164%, -50%) scale(.62); filter: brightness(1); }
  82%, 98% { opacity: .62; transform: translate(-118%, -50%) scale(.74); filter: brightness(1); }
  100%     { opacity: 1;   transform: translate(-50%, -50%) scale(1);    filter: brightness(1.1); }
}

/* Carte interne : glassmorphisme sur fond bleu */
.rev-slide-inner {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  color: #fff;
}

/* En-tête carte : icône + titre service */
.rev-slide-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rev-slide-top strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.rev-slide-top span {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Icônes thématiques dans les cartes (cercle coloré) */
.rev-slide-icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .35);
  position: relative;
}

.rev-icon-ling  { background: linear-gradient(135deg, #1a63a6, #2e86de); }
.rev-icon-lso   { background: linear-gradient(135deg, #0d3f70, #1a63a6); }
.rev-icon-spec  { background: linear-gradient(135deg, #18243a, #0d3f70); }
.rev-icon-dtp   { background: linear-gradient(135deg, #e29c2d, #c8831a); }

/* Séparateur doré */
.rev-slide-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
  border-radius: 2px;
  opacity: .7;
}

/* Liste des points de la carte */
.rev-slide-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.rev-slide-list span {
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}

.rev-slide-list span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Tagline dorée sous le H1 */
.rev-hero-tagline {
  display: inline-block;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 4px 0 12px;
}

/* Groupe boutons hero */
.rev-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* ---------- Section 1 — Pourquoi réviser ---------- */

.rev-why-section {
  padding: 80px 0;
  background: var(--white);
}

.rev-why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.rev-why-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rev-why-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.rev-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(26, 99, 166, .05);
  border-radius: 8px;
  border-left: 3px solid var(--brand);
}

.rev-check-item::before {
  content: "✓";
  color: var(--brand);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Visuel photo — section Pourquoi réviser */
.rev-why-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.rev-why-photo {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* Document de base avec lignes et loupe superposée */
.rev-why-visual-doc {
  position: relative;
  width: 200px;
  height: 240px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid rgba(26, 99, 166, .15);
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 36px rgba(13, 63, 112, .12);
}

/* Ligne de texte simulée */
.rev-doc-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(27, 36, 48, .12);
}

.rev-doc-line--red   { background: rgba(226, 45, 45, .35); }
.rev-doc-line--short { width: 65%; }

/* Loupe CSS superposée */
.rev-loupe {
  position: absolute;
  right: -28px;
  bottom: 24px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 6px solid #0d3f70;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(13, 63, 112, .22);
}

/* Manche de loupe */
.rev-loupe::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 6px;
  height: 22px;
  background: #0d3f70;
  border-radius: 3px;
  transform: rotate(45deg);
  transform-origin: top;
}

/* ---------- Sections Services (bandes alternées) ---------- */

.rev-service-section { padding: 72px 0; }

/* Bandes alternées identiques à la localisation */
.rev-band-white { background: var(--white); }
.rev-band-dark  { background: var(--brand-dark); color: #fff; }
.rev-band-gold  { background: var(--accent); color: var(--ink); }

.rev-band-dark h2,
.rev-band-dark h3,
.rev-band-dark p    { color: #fff; }
.rev-band-dark .eyebrow { color: rgba(255,255,255,.72); }
.rev-band-gold .eyebrow { opacity: .75; }

/* Layout deux colonnes */
.rev-service-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Inversion layout sur bandes sombres */
.rev-band-dark .rev-service-layout { direction: rtl; }
.rev-band-dark .rev-service-layout > * { direction: ltr; }

.rev-service-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rev-service-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.rev-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
}

.rev-bullet::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
}

.rev-band-gold .rev-bullet::before { background: var(--brand-dark); }

/* Conteneur visuel commun */
.rev-service-visual {
  border-radius: 16px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* --- Visuel Linguistique : document avec marques de correction --- */
.rev-visual-ling {
  background: linear-gradient(135deg, #e8f0fe, #d2e3fc);
  border: 2px solid rgba(26, 99, 166, .12);
  flex-direction: column;
  gap: 8px;
  padding: 32px;
}

.rev-visual-doc-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.rv-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(27, 36, 48, .12);
}

.rv-line--mark   { background: rgba(220, 40, 40, .35); }
.rv-line--ok     { background: rgba(30, 150, 80, .45); }
.rv-line--short  { width: 55%; }
.rv-line--short2 { width: 70%; }
.rv-line--sm     { height: 6px; }

/* Petite loupe sur le visuel */
.rev-loupe-sm {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 5px solid #0d3f70;
  background: rgba(255, 255, 255, .8);
}

.rev-loupe-sm::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 5px;
  height: 18px;
  background: #0d3f70;
  border-radius: 3px;
  transform: rotate(45deg);
  transform-origin: top;
}

/* --- Visuel LSO : deux documents + flèche --- */
.rev-visual-lso {
  background: linear-gradient(135deg, #0d3f70, #18243a);
  gap: 16px;
}

.rev-lso-doc {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  width: 80px;
  min-height: 100px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rev-lso-arrow {
  font-size: 28px;
  color: var(--accent);
  font-weight: 900;
  flex-shrink: 0;
}

/* --- Visuel Documents Spécialisés : deux icônes CSS --- */
.rev-visual-spec {
  background: linear-gradient(135deg, #f8faff, #e8f0fe);
  border: 2px solid rgba(26, 99, 166, .1);
  gap: 28px;
}

.rev-spec-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Science : fond bleu avec cercle blanc centré (microscope simplifié) */
.rev-spec-icon--science {
  background: var(--brand);
  position: relative;
}

.rev-spec-icon--science::before {
  content: "🔬";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

/* Légal : fond or avec gavel simplifié */
.rev-spec-icon--legal {
  background: var(--accent);
  position: relative;
}

.rev-spec-icon--legal::before {
  content: "⚖️";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

/* --- Visuel DTP Check : carte de checklist CSS --- */
.rev-visual-dtp {
  background: linear-gradient(135deg, #18243a, #0d3f70);
  padding: 24px;
  align-items: stretch;
}

.rev-dtp-card {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  padding: 20px 22px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rev-dtp-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  margin-bottom: 4px;
}

.rev-dtp-row {
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  gap: 8px;
}

.rev-dtp-check {
  color: #4ade80;
  font-weight: 800;
  font-size: 14px;
}

/* ---------- Stack technique ---------- */

.rev-stack-section {
  padding: 80px 0;
  background: #f8faff;
}

.rev-stack-layout {
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: center;
}

.rev-stack-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.rev-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Icônes de format avec couleurs distinctives par format */
.rev-stack-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.rev-stack-item:hover .rev-stack-icon {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.rev-stack-icon svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Couleurs distinctives par format de fichier */
.rev-fmt-docx  { background: #185abd; }
.rev-fmt-pdf   { background: #e63232; }
.rev-fmt-indd  { background: #ff3366; }
.rev-fmt-xliff { background: #0d3f70; }
.rev-fmt-pptx  { background: #c4380b; }
.rev-fmt-html  { background: #e29c2d; }

/* ---------- Statistiques ---------- */

.rev-stats-row {
  display: flex;
  justify-content: center;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(13, 63, 112, .12);
}

.rev-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px;
  background: var(--brand-dark);
  text-align: center;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.rev-stat:last-child { border-right: none; }

.rev-stat strong {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.rev-stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  line-height: 1.35;
}

/* Grid Pourquoi AxioTrad révision : 4 colonnes */
.revision-why-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- CTA final ---------- */

.rev-final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #0a1628, #0d3f70 70%);
}

.rev-cta-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 48px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  backdrop-filter: blur(10px);
}

.rev-cta-card h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.rev-cta-card p  { color: rgba(255, 255, 255, .78); font-size: 16px; }

.rev-cta-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   FIN PAGE RÉVISION
   ========================================================================== */

@media (max-width: 1040px) {
  .contacts { display: none; }
  .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 120px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 0;
    background: #111623;
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .main-nav > a, .dropdown > button { padding: 14px 0; width: 100%; text-align: left; }
  .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: none;
    border-top: 1px solid var(--line);
  }
  .dropdown.open .dropdown-menu { display: block; }
  .dropdown-menu.wide { width: 100%; }
  .menu-toggle { display: block; }
  .quote-btn { display: none; }
  .quote-btn-mobile { display: inline-flex; margin-top: 12px; }
  .hero-content { margin-left: auto; margin-right: auto; transform: translateY(-34px); }
  .hero-intro-visual {
    top: 48%;
    width: 205px;
    height: 205px;
    margin-bottom: 0;
    transform: translate(-50%, -58%);
  }
  .hero-loader-globe { width: 180px; height: 180px; }
  .hero-loader-globe svg { width: 104px; height: 104px; }
  .icon-headset { left: calc(50% - 320px); }
  .icon-language { left: calc(50% - 300px); top: 67%; }
  .icon-megaphone { display: none; }
  .icon-mic { left: calc(50% + 245px); right: auto; top: 30%; }
  .icon-voice { left: calc(50% + 165px); right: auto; top: 48%; }
  .icon-globe { left: calc(50% + 225px); right: auto; top: 74%; }
  .intro-card, .content-grid, .split, .footer-wrap, .page-layout, .form-layout, .final-cta-card, .translation-languages-panel { grid-template-columns: 1fr; }
  /* Grille à 1 colonne : sans "min-width:0", cet item de grille refuse de
     rétrécir sous la taille intrinsèque de son contenu (les boutons en
     white-space:nowrap), ce qui les fait dépasser de la carte sur mobile/
     tablette et casse leur alignement. */
  .final-cta-actions { min-width: 0; width: 100%; }
  .localisation-layout,
  .localisation-faq-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .localisation-card-grid,
  .localisation-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer { padding: 64px 0; }
  .footer-wrap { gap: 30px; }
  .footer-brand-block { min-height: auto; }
  .intro-actions { justify-content: flex-start; flex-wrap: wrap; }
  .service-cards, .why-grid, .process-grid, .process-card-grid, .feature-list, .translation-card-grid, .translation-why-grid, .language-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-grid, .logo-grid, .news-grid, .testimonials-list .review-row { grid-template-columns: repeat(3, 1fr); }
  .final-cta-actions { justify-content: flex-start; }
  .translation-languages-panel::before { left: 46px; }
  .interpretariat-hero .page-hero-content { text-align: left; }
  .interpretariat-hero .page-hero-content {
    margin-left: 0;
    margin-right: auto;
    border-right: 0;
    border-left: 4px solid rgba(226,156,45,.9);
  }
  .interpretariat-hero p:last-child { margin-left: 0; }
  .interpretariat-hero-slide {
    left: 68%;
    width: min(38vw, 340px);
    height: min(70%, 390px);
  }
  .interpretariat-band,
  .interpretariat-band.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .interpretariat-band.reverse > div:first-child,
  .interpretariat-band.reverse .interpretariat-visual {
    grid-column: auto;
    grid-row: auto;
  }
  .interpretariat-language-showcase {
    grid-template-columns: 1fr;
  }
  .interpretariat-why-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Révision responsive 1040px --- */
  .revision-hero-anim { min-height: 420px; }
  .rev-slide { display: none; }
  .rev-doc-bg { opacity: .4; right: -40px; width: min(60vw, 280px); }
  .rev-hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rev-hero-actions .btn { width: fit-content; }
  .rev-why-layout { grid-template-columns: 1fr; gap: 40px; }
  .rev-why-visual { min-height: 180px; }
  .rev-service-layout { grid-template-columns: 1fr; gap: 36px; }
  .rev-band-dark .rev-service-layout { direction: ltr; }
  .rev-service-visual { min-height: 200px; }
  .rev-stack-icons { gap: 20px; }
  .rev-stats-row { flex-wrap: wrap; }
  .rev-stat { min-width: 48%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rev-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
  .rev-cta-card { flex-direction: column; align-items: flex-start; padding: 36px 28px; gap: 24px; }
  .rev-cta-actions { flex-wrap: wrap; }
  .revision-why-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Localisation responsive 1040px --- */

  /* Hero : masquer le carousel de cartes sur tablette/mobile
     (la scène reste en absolu mais le globe reste visible) */
  .localisation-hero-anim { min-height: 420px; }
  .loc-slide { display: none; }
  .loc-globe-bg {
    right: -40px;
    width: min(80vw, 340px);
    height: min(80vw, 340px);
    opacity: .5;
  }
  .loc-hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .loc-hero-actions .btn { width: fit-content; }

  /* Why section : colonne unique */
  .loc-why-layout { grid-template-columns: 1fr; gap: 40px; }
  .loc-why-visual { min-height: 180px; }
  .loc-why-visual-icon { width: 160px; height: 160px; font-size: 52px; }

  /* Service sections : colonne unique */
  .loc-service-layout { grid-template-columns: 1fr; gap: 36px; }
  .loc-band-dark .loc-service-layout { direction: ltr; }
  .loc-service-visual { min-height: 200px; }

  /* Stack : 3 par ligne */
  .loc-stack-icons { gap: 20px; }

  /* Stats : 2 par ligne */
  .loc-stats-row { flex-wrap: wrap; }
  .loc-stat { min-width: 48%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .loc-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }

  /* CTA final : colonne unique */
  .loc-cta-card { flex-direction: column; align-items: flex-start; padding: 36px 28px; gap: 24px; }
  .loc-cta-actions { flex-wrap: wrap; }

  /* Grille Pourquoi AxioTrad : 2 colonnes */
  .localisation-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .container { width: min(100% - 26px, 1140px); }
  .top-inner { justify-content: center; }
  .hero { min-height: 650px; }
  .hero h1 { font-size: 44px; }
  .hero-content {
    width: min(100% - 34px, 520px);
    margin: 0 auto;
    padding-top: 22px;
    transform: translateY(-24px);
  }
  .hero-intro-visual {
    top: 45%;
    width: 174px;
    height: 174px;
    margin-bottom: 0;
    transform: translate(-50%, -56%);
  }
  .hero-loader-globe {
    width: 156px;
    height: 156px;
  }
  .hero-loader-globe svg {
    width: 88px;
    height: 88px;
  }
  .hero-title-wave {
    width: 104px;
    height: 42px;
  }
  .hero-title-wave svg {
    width: 98px;
    height: 34px;
    stroke-width: 3.5;
  }
  .hero-icon {
    width: 52px;
    height: 52px;
    opacity: .5;
  }
  .hero-icon svg {
    width: 27px;
    height: 27px;
  }
  .icon-headset { left: calc(50% - 174px); top: 38%; }
  .icon-language { left: calc(50% - 154px); top: 72%; }
  .icon-mic { left: calc(50% + 118px); right: auto; top: 32%; }
  .icon-voice, .icon-globe { display: none; }
  .hero .hero-actions {
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
  }
  .hero .btn { width: min(100%, 245px); }
  .hero-domains { font-size: 23px; }
  .intro-card { padding: 28px 20px; }
  .intro-links { flex-direction: column; gap: 8px; }
  .language-list { columns: 1; }
  .service-cards, .sector-grid, .logo-grid, .review-row, .number-grid, .why-grid, .process-grid, .process-card-grid, .feature-list, .news-grid, .testimonials-list .review-row, .translation-card-grid, .translation-why-grid, .language-grid { grid-template-columns: 1fr; }
  .localisation-hero {
    min-height: 365px;
  }
  .localisation-card-grid,
  .localisation-why-grid {
    grid-template-columns: 1fr;
  }
  .localisation-copy h2 {
    font-size: 34px;
  }
  .interpretariat-hero { min-height: 340px; }
  .interpretariat-hero h1 { font-size: 38px; }
  .interpretariat-hero .page-hero-content {
    padding: 20px;
    background: rgba(8,18,33,.64);
  }
  .interpretariat-hero-slide {
    left: 50%;
    top: 38%;
    width: min(76vw, 310px);
    height: min(52%, 250px);
    padding: 7px;
  }
  .interpretariat-hero p:last-child {
    width: auto;
    font-size: 16px;
  }
  .interpretariat-band { padding: 52px 0; }
  .interpretariat-visual { min-height: 210px; }
  .interpretariat-languages {
    padding: 56px 0;
  }
  .interpretariat-language-showcase {
    padding: 32px 20px;
  }
  .language-card-grid {
    grid-template-columns: 1fr;
  }
  .interpretariat-numbers .number-grid,
  .interpretariat-why-grid {
    grid-template-columns: 1fr;
  }
  .custom-sector { align-items: flex-start; flex-direction: column; }
  .section-pad { padding: 56px 0; }
  .translation-info-card, .translation-why-grid article, .final-cta-card, .translation-languages-panel { padding: 24px; }
  .translation-languages-panel::before { left: 24px; width: 160px; }
  .final-cta-actions .btn { width: 100%; white-space: normal; text-align: center; }
  .footer { padding-top: 46px; }
  .footer-wrap { gap: 28px; }
  .footer-call-float { width: 50px; height: 62px; }
  .number-grid strong { font-size: 46px; }
  .page-hero { min-height: 340px; }
  .page-hero h1 { font-size: 44px; }
  .page-hero p:last-child { font-size: 19px; }
  main :where(
    .content-grid,
    .expertise,
    .page-layout,
    .form-layout,
    .localisation-intro,
    .interpretariat-intro
  ) :where(p, li) {
    font-size: 16px;
    line-height: 1.7;
  }
  main :where(.page-copy .lead, .localisation-copy .lead, .interpretariat-copy .lead) {
    font-size: 17px;
  }
  .expertise .prose p,
  .expertise .prose li {
    font-size: 16px;
    line-height: 1.7;
  }

  /* --- Localisation responsive 720px (mobile) --- */
  .localisation-hero-anim { min-height: 380px; }
  .loc-hero-tagline { font-size: 14px; }
  .loc-hero-actions { flex-direction: column; }
  .loc-hero-actions .btn { width: 100%; text-align: center; }
  .loc-why-section,
  .loc-service-section,
  .loc-stack-section,
  .loc-final-cta { padding: 52px 0; }
  .loc-stats-row { flex-direction: column; }
  .loc-stat { min-width: 100%; border-right: none; }
  .loc-stat strong { font-size: 28px; }
  .loc-cta-card { padding: 28px 20px; }
  .loc-cta-card h2 { font-size: 22px; }
  .loc-cta-actions { flex-direction: column; width: 100%; }
  .loc-cta-actions .btn { width: 100%; text-align: center; }
  .localisation-why-grid { grid-template-columns: 1fr; }
  .loc-stack-icons { gap: 16px; }
  .loc-stack-icon { width: 50px; height: 50px; }
  .loc-stack-icon svg { width: 22px; height: 22px; }

  /* --- Révision responsive 720px (mobile) --- */
  .revision-hero-anim { min-height: 380px; }
  .rev-hero-tagline { font-size: 14px; }
  .rev-hero-actions { flex-direction: column; }
  .rev-hero-actions .btn { width: 100%; text-align: center; }
  .rev-why-section,
  .rev-service-section,
  .rev-stack-section,
  .rev-final-cta { padding: 52px 0; }
  .rev-stats-row { flex-direction: column; }
  .rev-stat { min-width: 100%; border-right: none; }
  .rev-stat strong { font-size: 28px; }
  .rev-cta-card { padding: 28px 20px; }
  .rev-cta-card h2 { font-size: 22px; }
  .rev-cta-actions { flex-direction: column; width: 100%; }
  .rev-cta-actions .btn { width: 100%; text-align: center; }
  .revision-why-grid { grid-template-columns: 1fr; }
  .rev-stack-icon { width: 52px; height: 52px; border-radius: 10px; }
  .rev-stack-icon svg { width: 22px; height: 22px; }
  .rev-stack-icons { gap: 16px; }
}

/* ==========================================================
   HERO — Onde repositionnée au-dessus du titre (pas du globe)
   ========================================================== */

/* Conteneur titre + onde : position relative pour que l'onde s'ancre ici */
.hero-title-wrap {
  position: relative;
  width: 100%;
  padding-top: 58px; /* espace réservé à l'onde */
}

/* Onde désormais au-dessus du H1 — repositionnée hors de hero-intro-visual */
.hero-title-wave {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 128px;
  height: 50px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-50%, 10px) scale(.9);
  animation: hero-wave-enter .55s ease 2.25s forwards, hero-wave-hover 1.9s ease-in-out 2.85s infinite;
}

/* Sous-titre orange */
.hero-lead-accent {
  color: var(--accent) !important;
}

/* ==========================================================
   BAND-WHITE — fond blanc, texte foncé (pour les pages services)
   ========================================================== */
.band-white {
  background: var(--white);
  color: var(--ink);
}
/* Override : interpretariat-service force color:#fff — annuler sur fond blanc */
.interpretariat-service.band-white {
  color: var(--ink);
}
.interpretariat-service.band-white h2,
.interpretariat-service.band-white p,
.interpretariat-service.band-white li {
  color: var(--ink);
}
.interpretariat-service.band-white li::before {
  color: var(--brand);
}
.interpretariat-service.band-white .eyebrow {
  color: var(--brand);
}
.interpretariat-service.band-white .interpretariat-visual {
  border-color: rgba(26,99,166,.18);
  box-shadow: 0 22px 54px rgba(0,0,0,.12);
}

/* ==========================================================
   SERVICE-CHECKLIST — puces ✓ pour les sections "pourquoi"
   ========================================================== */
.service-checklist {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.service-checklist li {
  position: relative;
  margin: 12px 0;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}
.service-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
  font-size: 15px;
}
.band-white .service-checklist li::before { color: var(--brand); }
.band-blue .service-checklist li { color: rgba(255,255,255,.9); }
.band-blue .service-checklist li::before { color: var(--accent); }

/* ==========================================================
   BLOG — mise en page maquette : header centré + grille 3×2
   ========================================================== */
/* ==========================================================
   PAGE BLOG / NEWS — refonte style languageservicesbureau.com
   ========================================================== */
.blog-section {
  background: var(--soft);
  padding: 72px 0 96px;
}

/* En-tête de section blog */
.blog-intro-header {
  text-align: center;
  margin-bottom: 56px;
}
.blog-intro-header .eyebrow {
  display: block;
  margin-bottom: 10px;
}
.blog-section-title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 14px;
}
.blog-section-lead {
  font-size: 16px;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Grille 3 colonnes — identique à la référence */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Bloc "Notre Blog" (home) — défilement continu façon diaporama, même principe que .testimonial-marquee */
.blog-marquee-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.blog-marquee {
  display: flex;
  width: max-content;
  gap: 28px;
  animation: blog-scroll 40s linear infinite;
}
.blog-marquee-viewport:hover .blog-marquee {
  animation-play-state: paused;
}
.blog-marquee .blog-card {
  width: min(340px, calc(100vw - 56px));
  flex: 0 0 min(340px, calc(100vw - 56px));
}
@keyframes blog-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 14px)); }
}

/* Card principale */
.blog-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(16,32,56,.09);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(16,32,56,.15);
}

/* Zone image — ratio 3:2 comme le site référence (872×604px) */
.blog-card-img-wrap {
  display: block;
  overflow: hidden;
}
.blog-card-img {
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #9aa9b6, #1f557c);
  position: relative;
  overflow: hidden;
  transition: transform .35s ease;
}
.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

/* Couleurs thématiques par article */
.blog-card-img.img-1 { background: linear-gradient(135deg, #0d3f70, #1a63a6); }
.blog-card-img.img-2 { background: linear-gradient(135deg, #b8710e, #e29c2d); }
.blog-card-img.img-3 { background: linear-gradient(135deg, #1a4a7a, #2d6fa8); }
.blog-card-img.img-4 { background: linear-gradient(135deg, #0d3f70, #1a6340); }
.blog-card-img.img-5 { background: linear-gradient(135deg, #4a2d7a, #1a4a9a); }
.blog-card-img.img-6 { background: linear-gradient(135deg, #7a3d0a, #c47d1a); }

/* Vraie photo dans la card */
.blog-card-img.has-photo { background: #0d3f70; }
.blog-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}
.blog-card:hover .blog-card-photo { transform: scale(1.04); }

/* Icône décorative centrée sur le visuel */
.blog-card-img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.18);
}
.blog-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,18,33,.04) 0%, rgba(8,18,33,.22) 100%);
}

/* Corps de la carte */
.blog-card-body {
  padding: 24px 26px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Méta auteur + date */
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.blog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  font-style: normal;
}
.blog-meta-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.blog-meta-sep {
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

/* Titre de l'article */
.blog-card-title {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.38;
  margin: 0 0 12px;
  color: var(--ink);
}
.blog-card-title a {
  color: inherit;
  transition: color .18s;
}
.blog-card-title a:hover { color: var(--brand); }

/* Extrait */
.blog-card-summary {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 auto;
  padding-bottom: 18px;
  flex: 1;
}

/* CTA "LIRE LA SUITE |" — style référence */
.blog-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--brand-dark);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  transition: color .18s, gap .18s;
}
.blog-cta-link:hover {
  color: var(--accent);
  gap: 12px;
}
.blog-cta-bar {
  color: var(--accent);
  font-weight: 400;
  font-size: 14px;
}

/* Rétro-compat : ancienne classe */
.blog-header { text-align: center; margin-bottom: 56px; }
.blog-eyebrow { display: block; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.blog-header h1 { font-size: clamp(30px, 4vw, 48px); font-weight: 900; margin: 0; color: var(--ink); }

/* ==========================================================
   PAGE ARTICLE — template de lecture
   ========================================================== */
.article-page {
  padding: 72px 0 96px;
}
/* Image de tête de l'article — remplace l'ancien bandeau hero, reprend
   simplement l'image de la carte de l'article, cadrée et arrondie. */
.article-featured-img {
  margin: 0 0 32px;
  border-radius: 14px;
  overflow: hidden;
  max-height: 440px;
  box-shadow: 0 12px 30px rgba(13,63,112,.14);
}
.article-featured-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
}
/* Boutons "Demander un devis" / "Nous contacter" de la sidebar article — arrondis */
.article-btn-round {
  border-radius: 999px;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 36px;
  letter-spacing: .5px;
  transition: opacity .18s;
}
.article-back:hover { opacity: .72; }
.article-header { margin-bottom: 40px; }
.article-header .eyebrow {
  color: var(--brand);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.article-header h1 {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900;
  margin: 0 0 20px;
  line-height: 1.15;
}
.article-meta {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 28px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 36px;
}
.article-content h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--brand-dark);
  margin: 44px 0 14px;
  font-weight: 900;
}
.article-content h3 {
  font-size: clamp(17px, 2vw, 22px);
  color: var(--ink);
  margin: 30px 0 12px;
}
.article-content p {
  margin: 0 0 20px;
  line-height: 1.78;
  font-size: 16px;
}
.article-content ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.article-content ul li {
  margin: 9px 0;
  line-height: 1.65;
  font-size: 16px;
}
.article-content blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  background: var(--soft);
  border-left: 4px solid var(--accent);
  font-size: 17px;
  font-style: italic;
  color: var(--brand-dark);
}
.article-cta-box {
  margin-top: 56px;
  padding: 36px 40px;
  background: linear-gradient(90deg, rgba(8,18,33,.96), rgba(13,63,112,.88)), #0d3f70;
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.article-cta-box h3 {
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 0 8px;
}
.article-cta-box p {
  color: rgba(255,255,255,.8);
  margin: 0;
  font-size: 15px;
}

/* Bloc "À lire aussi" — articles similaires en fin d'article, même carte que le blog */
.article-related {
  background: var(--soft);
}
.article-related-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 28px;
  text-align: center;
}
.article-related-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================
   HERO TRADUCTION ANIMÉ — réutilise les classes loc-* pour le carousel
   ========================================================== */
.trad-hero-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7%;
  pointer-events: none;
  overflow: hidden;
}
.trad-slide {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  width: min(38vw, 340px);
  opacity: 0;
  animation: loc-hero-carousel calc(var(--slide) * -3s + 12s) linear infinite;
}
.trad-slide-inner {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 22px 24px;
}
.trad-slide-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.trad-slide-top strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
.trad-slide-top span {
  color: rgba(255,255,255,.65);
  font-size: 12px;
}
.trad-slide-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(226,156,45,.28);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.trad-slide-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.8;
}
.trad-slide-bar {
  height: 1px;
  background: rgba(255,255,255,.18);
  margin-bottom: 14px;
}
.trad-slide-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.trad-slide-list span {
  font-size: 13px;
  color: rgba(255,255,255,.78);
  padding-left: 16px;
  position: relative;
}
.trad-slide-list span::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

/* ==========================================================
   HERO TAGLINE TRADUCTION
   ========================================================== */
.trad-hero-tagline {
  display: block;
  margin: 8px 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .5px;
}

/* ==========================================================
   VISUALS LOCALISATION — photos réelles fournies par le client
   ========================================================== */

/* 01 — Sites Web & E-Commerce : laptop + réseaux sociaux */
.interpretariat-visual.visual-loc-web {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.26)),
    url("/assets/images/localisation/loc-web.jpg") center / cover no-repeat;
}

/* 02 — Applications Mobiles : homme tenant globe + appareils */
.interpretariat-visual.visual-loc-app {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.26)),
    url("/assets/images/localisation/loc-app.jpg") center / cover no-repeat;
}

/* 03 — Logiciels & SaaS : main + tablette + carte monde */
.interpretariat-visual.visual-loc-saas {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.26)),
    url("/assets/images/localisation/loc-saas.jpg") center / cover no-repeat;
}

/* 04 — Multimédia & Marketing : panier + carte monde */
.interpretariat-visual.visual-loc-media {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.26)),
    url("/assets/images/localisation/loc-media.jpg") center / cover no-repeat;
}
.interpretariat-visual.visual-rev-ling {
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(145deg, #7a9ab0, #163d60);
}
.interpretariat-visual.visual-rev-lso {
  background:
    linear-gradient(135deg, rgba(226,156,45,.35), rgba(8,18,33,.4)),
    #0d3f70;
}
.interpretariat-visual.visual-rev-spec {
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(145deg, #4a7a9b, #0d3f70);
}
.interpretariat-visual.visual-rev-dtp {
  background:
    linear-gradient(135deg, rgba(226,156,45,.3), rgba(8,18,33,.28)),
    #c47d1a;
}
/* ---- Visuels page Traduction : vraies photos fournies par le client ---- */

/* 01 — Documents Juridiques : photo calculatrice / graphiques financiers */
.interpretariat-visual.visual-trad-docs {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/image-page-traduction/doc-juridique.jpg.jpg") center / cover no-repeat;
}

/* 02 — Documents Techniques : photo stéthoscope / rapport médical */
.interpretariat-visual.visual-trad-certified {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/image-page-traduction/doc-technique.jpg.jpg") center / cover no-repeat;
}

/* 03 — Documents Médicaux : photo documents sur table avec laptops */
.interpretariat-visual.visual-trad-method {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/image-page-traduction/doc-medical.jpg.jpg") center / cover no-repeat;
}

/* 04 — Documents Financiers : photo pile de documents */
.interpretariat-visual.visual-trad-quality {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/image-page-traduction/doc-financier.jpg.jpg") center / cover no-repeat;
}

/* ==========================================================
   HERO AGENCE — image unique en couverture complète du hero
   Design texte identique aux autres pages (h1, subtitle, overlay)
   ========================================================== */

/* La stage perd son dégradé CSS : la photo prend tout l'espace */
.agence-hero .interpretariat-hero-stage {
  background: none;
}
/* Réinitialise le pseudo-élément ::before qui dessine les vignettes latérales */
.agence-hero .interpretariat-hero-stage::before,
.agence-hero .interpretariat-hero-stage::after {
  display: none;
}
/* L'image couvre tout le hero, centrée et recadrée */
.agence-hero .interpretariat-hero-slide {
  animation: none;
  opacity: 1;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: brightness(.82) saturate(1.1);
}
/* Overlay dégradé pour lisibilité du texte (gauche foncée, droite transparente) */
.agence-hero .page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(7,26,50,.70) 0%, rgba(7,26,50,.38) 55%, rgba(7,26,50,.18) 100%),
    linear-gradient(180deg, rgba(7,26,50,.15) 0%, rgba(7,26,50,.45) 100%);
}

/* ==========================================================
   HERO BLOG / NEWS — carousel animé identique aux pages service
   ========================================================== */
.news-hero .interpretariat-hero-stage {
  background: none;
}
.news-hero .interpretariat-hero-stage::before,
.news-hero .interpretariat-hero-stage::after {
  display: none;
}
.news-hero .interpretariat-hero-slide {
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: brightness(.80) saturate(1.08);
}
.news-hero .page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(7,26,50,.65) 0%, rgba(7,26,50,.30) 55%, rgba(7,26,50,.15) 100%),
    linear-gradient(180deg, rgba(7,26,50,.12) 0%, rgba(7,26,50,.40) 100%);
}
.news-hero .page-hero-content h1 {
  font-size: clamp(34px, 5vw, 62px);
}

/* ==========================================================
   HERO ARTICLE — image unique en couverture complète du hero
   Design texte identique (h1, subtitle gold, etc.)
   ========================================================== */
.article-hero .interpretariat-hero-stage {
  background: none;
}
.article-hero .interpretariat-hero-stage::before,
.article-hero .interpretariat-hero-stage::after {
  display: none;
}
.article-hero .interpretariat-hero-slide {
  animation: none;
  opacity: 1;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: brightness(.78) saturate(1.1);
}
.article-hero .page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(7,26,50,.72) 0%, rgba(7,26,50,.40) 55%, rgba(7,26,50,.16) 100%),
    linear-gradient(180deg, rgba(7,26,50,.15) 0%, rgba(7,26,50,.50) 100%);
}
.article-hero .page-hero-content h1 {
  font-size: clamp(26px, 4vw, 50px);
  max-width: 720px;
}

/* Badges thématiques dans le hero blog */
.news-hero-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.news-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 5px 14px;
  backdrop-filter: blur(4px);
}
.news-badge svg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  flex-shrink: 0;
}
.news-badge-dot {
  color: rgba(255,255,255,.45);
  font-size: 16px;
}

/* ==========================================================
   VISUELS PAGE RÉVISION — zones image (ajouter les photos dans /assets/images/revision/)
   ========================================================== */

/* 01 — Révision Linguistique */
.interpretariat-visual.visual-rev-1 {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/revision/rev-service-1.jpg") center / cover no-repeat;
}

/* 02 — Contrôle Qualité LSO */
.interpretariat-visual.visual-rev-2 {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/revision/rev-service-2.webp") center / cover no-repeat;
}

/* 03 — Documents Spécialisés */
.interpretariat-visual.visual-rev-3 {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/revision/rev-service-3.jpg") center / cover no-repeat;
}

/* 04 — DTP Check */
.interpretariat-visual.visual-rev-4 {
  background:
    linear-gradient(180deg, rgba(8,18,33,.08), rgba(8,18,33,.28)),
    url("/assets/images/revision/rev-service-4.jpg") center / cover no-repeat;
}

/* ==========================================================
   HERO TRADUCTION — classe de section + décoratif fond document
   ========================================================== */
.traduction-hero-anim {
  background: linear-gradient(135deg, #081221 0%, #0d3f70 55%, #1a3a5c 100%);
  position: relative;
  overflow: hidden;
}
.trad-doc-bg {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42vw, 400px);
  height: min(55vw, 480px);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}
.trad-doc-bg::before {
  content: "";
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  height: 3px;
  background: rgba(226,156,45,.45);
  border-radius: 2px;
}
.trad-doc-bg::after {
  content: "";
  position: absolute;
  top: 36px; left: 18px; right: 40%;
  height: 2px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  box-shadow: 0 12px 0 rgba(255,255,255,.12), 0 24px 0 rgba(255,255,255,.12), 0 36px 0 rgba(255,255,255,.08);
}

/* Icônes traduction — formes géométriques CSS pour chaque type de doc */
.trad-icon-legal  { background: rgba(226,156,45,.28); }
.trad-icon-tech   { background: rgba(26,99,166,.4); }
.trad-icon-medical { background: rgba(46,160,120,.35); }
.trad-icon-finance { background: rgba(226,156,45,.22); }

/* CTA hero traduction */
.trad-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ==========================================================
   BLOG — entête section + résumé carte
   ========================================================== */
.blog-section-title {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--ink);
  margin: 8px 0 14px;
}
.blog-section-lead {
  font-size: 16px;
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 48px;
  line-height: 1.65;
}
.blog-card-summary {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 auto;
  padding-bottom: 16px;
}

/* ==========================================================
   PAGE ARTICLE — layout deux colonnes + sidebar
   ========================================================== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
}
.article-intro {
  font-size: 18px;
  line-height: 1.75;
  color: var(--brand-dark);
  font-weight: 500;
  margin: 0 0 36px;
  padding: 24px 28px;
  background: var(--soft, #f2f6fb);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
}
.article-sep {
  color: var(--line, #d0dae6);
}
.article-quote {
  margin: 32px 0;
  padding: 20px 28px;
  background: var(--soft, #f2f6fb);
  border-left: 4px solid var(--accent);
  font-size: 17px;
  font-style: italic;
  color: var(--brand-dark);
}
.article-back {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.article-sidebar {
  position: sticky;
  top: 100px;
}
.article-sidebar-cta {
  background: linear-gradient(140deg, #081221, #0d3f70);
  color: #fff;
  border-radius: 8px;
  padding: 32px 28px;
  margin-bottom: 32px;
}
.article-sidebar-cta .eyebrow {
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.article-sidebar-cta h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.35;
}
.article-sidebar-cta p {
  color: rgba(255,255,255,.72);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.6;
}
.article-sidebar-cta .btn {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
}
.article-sidebar-nav {
  padding: 24px 0 0;
}
.article-sidebar-nav h4 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.article-sidebar-nav a {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  padding: 8px 0;
  border-bottom: 1px solid var(--line, #d0dae6);
  transition: color .18s;
}
.article-sidebar-nav a:hover { color: var(--accent); }

/* ==========================================================
   RESPONSIVE — blog et articles
   ========================================================== */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
}

@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .hero-title-wrap { padding-top: 44px; }
  .article-cta-box { flex-direction: column; }
  .trad-slide { display: none; }
  .news-hero-badges { gap: 6px; }
  .news-badge { font-size: 10px; padding: 4px 10px; }
}

/* ==========================================================
   PAGE TRADUCTION — Bloc dédié (variant "traduction")
   Structure calquée sur la page Interprétariat :
   bandes band-blue / band-gold alternées, langues, chiffres, why, FAQ, CTA.
   Les classes .interpretariat-* sont réutilisées à 100 % pour les bandes
   et les sections langues/chiffres → seuls les composants propres à la
   page traduction ont besoin de nouveaux sélecteurs.
   ========================================================== */

/* ----------------------------------------------------------
   WHY-GRID traduction : 4 colonnes par défaut (comme interpretariat)
   ---------------------------------------------------------- */
/* Force 4 colonnes au lieu des 5 par défaut de .why-grid */
.trad-why-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ----------------------------------------------------------
   SECTION PROCESSUS — 4 étapes en grille
   Fond blanc, carte blanche avec bord gauche doré
   ---------------------------------------------------------- */
.trad-process-section {
  padding: 80px 0;
  background: var(--soft, #f5f7fa);
}

/* Eyebrow + titre de la section processus */
.trad-process-section .eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Lead sous le titre de la section processus */
.trad-process-lead {
  margin: 0 0 48px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 680px;
}

/* Grille de 4 cartes processus côte à côte */
.trad-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* Carte individuelle : bord gauche doré, fond blanc, ombre douce */
.trad-process-card {
  background: var(--white);
  border-left: 4px solid var(--accent);
  padding: 28px 24px;
  box-shadow: 0 8px 28px rgba(16, 32, 56, .09);
  border-radius: 2px;
}

/* Numéro en or (01, 02, 03, 04) */
.trad-process-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 12px;
}

/* Titre de la carte processus */
.trad-process-card h3 {
  margin: 0 0 10px;
  color: var(--brand-dark);
  font-size: 18px;
  font-weight: 900;
}

/* Corps de la carte processus */
.trad-process-card p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* Liste de points à l'intérieur des cartes processus */
.trad-process-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trad-process-card li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 6px;
}

/* Puce › en or devant chaque point de la liste processus */
.trad-process-card li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

/* ----------------------------------------------------------
   SECTION BUDGET & DÉLAIS — 3 cartes numérotées
   Fond bleu nuit, chiffre en or, titre blanc, texte grisé
   (Identique à la section "Méthode, budget et délais" de la
   page Révision dans la maquette de référence)
   ---------------------------------------------------------- */
.trad-budget-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #0a1628, #0d3f70 70%);
  color: #fff;
}

/* Eyebrow */
.trad-budget-section .eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Titre de la section */
.trad-budget-section h2 {
  color: #fff;
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 900;
  margin: 0 0 14px;
}

/* Lead sous le titre */
.trad-budget-lead {
  margin: 0 0 48px;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.65;
  max-width: 680px;
}

/* Grille de 3 cartes budget */
.trad-budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Carte budget : semi-transparent, bord doré */
.trad-budget-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 3px solid var(--accent);
  padding: 32px 28px;
  border-radius: 2px;
}

/* Icône optionnelle au-dessus du numéro (partenaires : "Comment démarrer ?") */
.trad-budget-icon {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--accent);
}
.trad-budget-icon svg { stroke: var(--accent); width: 26px; height: 26px; }

/* Numéro en or (01, 02, 03) */
.trad-budget-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
}

/* Titre de la carte budget */
.trad-budget-card h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 10px;
}

/* Corps de la carte budget */
.trad-budget-card p {
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------
   CTA FINAL TRADUCTION — calqué sur .loc-final-cta
   Dégradé bleu nuit, carte semi-transparente, boutons côte à côte
   ---------------------------------------------------------- */
.trad-final-cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #0a1628, #0d3f70 70%);
}

/* Carte CTA : flex horizontal sur desktop */
.trad-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 4px solid var(--accent);
  padding: 48px 52px;
  border-radius: 2px;
}

/* Titre du CTA final */
.trad-cta-card h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.2;
}

/* Description du CTA final */
.trad-cta-card p {
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: 560px;
}

/* Groupe de boutons CTA : primary (or) + secondary (bleu) */
.trad-cta-actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ==========================================================
   RESPONSIVE TRADUCTION — tablette (≤ 1040 px)
   Mêmes breakpoints que localisation et révision.
   ========================================================== */
@media (max-width: 1040px) {
  /* Hero traduction : masquer les slides de cartes (idem loc / rev) */
  .traduction-hero-anim { min-height: 420px; }
  .trad-doc-bg { opacity: .4; right: -40px; width: min(60vw, 280px); }
  .trad-hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trad-hero-actions .btn { width: fit-content; }

  /* Grille processus : 2 colonnes sur tablette */
  .trad-process-grid { grid-template-columns: repeat(2, 1fr); }

  /* Grille budget : 1 colonne sur tablette */
  .trad-budget-grid { grid-template-columns: 1fr; }

  /* CTA final : en colonne */
  .trad-cta-card { flex-direction: column; align-items: flex-start; padding: 36px 28px; gap: 24px; }
  .trad-cta-actions { flex-wrap: wrap; }

  /* Why-grid traduction : 2 colonnes sur tablette */
  .trad-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   RESPONSIVE TRADUCTION — mobile (≤ 720 px)
   ========================================================== */
@media (max-width: 720px) {
  /* Hero traduction : hauteur réduite, tagline plus petite, boutons en colonne */
  .traduction-hero-anim { min-height: 380px; }
  .trad-hero-tagline { font-size: 14px; }
  .trad-hero-actions { flex-direction: column; }
  .trad-hero-actions .btn { width: 100%; text-align: center; }

  /* Sections traduction : padding réduit */
  .trad-process-section,
  .trad-budget-section,
  .trad-final-cta { padding: 52px 0; }

  /* Grille processus : 1 colonne sur mobile */
  .trad-process-grid { grid-template-columns: 1fr; }

  /* Grille budget : 1 colonne, statistiques empilées */
  .trad-budget-grid { grid-template-columns: 1fr; }

  /* CTA final : padding réduit, boutons en colonne pleine largeur */
  .trad-cta-card { padding: 28px 20px; }
  .trad-cta-card h2 { font-size: 22px; }
  .trad-cta-actions { flex-direction: column; width: 100%; }
  .trad-cta-actions .btn { width: 100%; text-align: center; }

  /* Why-grid traduction : 1 colonne sur mobile */
  .trad-why-grid { grid-template-columns: 1fr; }

  /* Budget lead : taille de police réduite */
  .trad-budget-lead { font-size: 15px; }
  .trad-process-lead { font-size: 15px; }
  .trad-budget-num { font-size: 32px; }
  .trad-process-num { font-size: 28px; }
}


@media (prefers-reduced-motion: reduce) {
  .hero-icon,
  .hero-loader-globe,
  .hero-loader-globe svg,
  .interpretariat-hero-slide,
  .loc-slide,
  .loc-globe-bg,
  .rev-slide,
  .rev-doc-bg,
  /* Ajout : slide traduction dans la liste reduced-motion */
  .trad-slide,
  .trad-doc-bg,
  .hero-title-wave,
  .hero-title-wave svg,
  .hero-title,
  .hero-cta,
  .logo-grid span,
  .review,
  .testimonial-marquee {
    animation: none;
  }
  .hero-loader-globe { display: none; }
  .hero-title-wave,
  .hero-title,
  .hero-cta {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================
   PAGE L'AGENCE — styles dédiés
   ========================================================== */

/* Hero badges */
.agence-hero-subtitle {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}
.agence-hero-intro {
  font-size: .95rem;
  color: rgba(255,255,255,.82);
  margin-bottom: 20px;
  max-width: 520px;
}
.agence-hero-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(226,156,45,.5);
  border-radius: 40px;
  padding: 8px 18px;
  font-size: .88rem;
  color: #fff;
  margin-top: 4px;
}
.agence-hero-badges svg { color: var(--accent); fill: none; stroke: var(--accent); stroke-width: 2; flex-shrink: 0; }
.agence-badge-dot { color: var(--accent); font-size: 1rem; }

/* Section 1 — Fond blanc, formulaire bleu foncé (couleur hero) */
.agence-s1 {
  background: #fff !important;
  color: var(--ink);
}
.agence-s1 h2 { color: var(--brand-dark); }
.agence-s1 .lead { color: #263a52; font-weight: 700; }
.agence-s1 p:not(.lead) { color: #4e5866; }
.agence-s1 .eyebrow { color: var(--accent); font-weight: 900; }

/* Formulaire sur fond bleu foncé (même bleu que le hero) */
.agence-s1 .agence-intro-form {
  background: linear-gradient(160deg, #071a32, #0d3f70);
  border: none;
  border-top: 3px solid var(--accent);
  box-shadow: 0 20px 54px rgba(0,0,0,.22);
}
.agence-s1 .agence-intro-form h3 {
  color: #fff;
  border-left-color: var(--accent);
}
.agence-s1 .agence-contact-form label { color: rgba(255,255,255,.88); }
.agence-s1 .agence-contact-form input,
.agence-s1 .agence-contact-form select,
.agence-s1 .agence-contact-form textarea {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.agence-s1 .agence-contact-form input::placeholder,
.agence-s1 .agence-contact-form textarea::placeholder { color: rgba(255,255,255,.38); }
.agence-s1 .agence-contact-form select option { color: var(--ink); background: #fff; }
.agence-s1 .agence-contact-form input:focus,
.agence-s1 .agence-contact-form select:focus,
.agence-s1 .agence-contact-form textarea:focus {
  outline: 2px solid rgba(226,156,45,.45);
  border-color: var(--accent);
}
/* Case à cocher d'acceptation de la politique de confidentialité */
.agence-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.45;
}
.agence-form-consent input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.agence-s1 .agence-contact-form .agence-form-consent a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}
/* Bouton du formulaire en jaune/or */
.agence-s1 .agence-contact-form .btn {
  background: var(--accent);
  color: #111623;
  border-color: var(--accent);
  font-weight: 800;
}
.agence-s1 .agence-contact-form .btn:hover {
  background: #c98a1f;
  border-color: #c98a1f;
  color: #fff;
}

/* Feature grid sur fond blanc */
.agence-s1 .agence-feature-grid--dark .agence-feature strong { color: var(--brand-dark); }
.agence-s1 .agence-feature-grid--dark .agence-feature p { color: #4e5866; }
.agence-s1 .agence-feature-grid--dark .agence-feature-icon {
  background: rgba(226,156,45,.12);
}
.agence-s1 .agence-feature-grid--dark .agence-feature-icon svg { stroke: var(--accent); }

/* CTA final — ghost button sur fond blanc */
.translation-final-cta .btn.ghost {
  border-color: var(--brand-dark);
  color: var(--brand-dark);
}
.translation-final-cta .btn.ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #111623;
}

.agence-intro-form {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-top: 3px solid var(--accent);
  padding: 28px 24px;
}
.agence-intro-form h3 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}
.agence-contact-form {
  display: grid;
  gap: 13px;
}
.agence-contact-form label {
  display: grid;
  gap: 5px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: .88rem;
}
.agence-contact-form input,
.agence-contact-form select,
.agence-contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  padding: 10px 13px;
  font: inherit;
  font-size: .95rem;
  color: #fff;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
}
.agence-contact-form input::placeholder,
.agence-contact-form textarea::placeholder {
  color: rgba(255,255,255,.38);
}
.agence-contact-form select option {
  color: var(--ink);
  background: #fff;
}
.agence-contact-form input:focus,
.agence-contact-form select:focus,
.agence-contact-form textarea:focus {
  outline: 2px solid rgba(226,156,45,.5);
  border-color: var(--accent);
}
.agence-contact-form textarea { resize: vertical; }
.agence-contact-form .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Feature grid sur fond sombre */
.agence-feature-grid--dark .agence-feature strong { color: #fff; }
.agence-feature-grid--dark .agence-feature p { color: rgba(255,255,255,.78); margin: 0; }
.agence-feature-grid--dark .agence-feature-icon {
  background: rgba(226,156,45,.18);
  color: var(--accent);
}
.agence-feature-grid--dark .agence-feature-icon svg { stroke: var(--accent); }

/* Legacy layout kept for fallback */
.agence-intro-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}
.agence-intro-copy h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--brand-dark);
  margin-bottom: 8px;
  line-height: 1.25;
}
.agence-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin: 16px 0 24px;
}
.agence-intro-copy p {
  color: #444;
  line-height: 1.7;
  margin-bottom: 14px;
  font-size: .97rem;
}
.agence-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.agence-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.agence-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(226,156,45,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agence-feature-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
}
.agence-feature strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 4px;
}
.agence-feature p {
  font-size: .83rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* Services card (right column) */
.agence-services-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  padding: 32px 28px;
  position: sticky;
  top: 100px;
}
.agence-services-card h3 {
  font-size: 1.1rem;
  color: var(--brand-dark);
  margin-bottom: 20px;
}
.agence-services-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agence-services-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .95rem;
  font-weight: 600;
  color: #333;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.agence-services-list li:last-child { border-bottom: none; padding-bottom: 0; }
.agence-service-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(26,99,166,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agence-service-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--brand);
  fill: none;
  stroke-width: 2;
}
.agence-services-btn { width: 100%; justify-content: center; }

/* Section 2 — Mission / Vision sur band-gold */
.agence-mv-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.agence-mv-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: 0 6px 28px rgba(0,0,0,.10);
}
.agence-mv-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.agence-mv-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(13,63,112,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.agence-mv-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--brand-dark);
  fill: none;
  stroke-width: 1.8;
}
.agence-mv-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 0;
}
.agence-mv-card p {
  color: #555;
  line-height: 1.65;
  font-size: .92rem;
  margin: 0;
}

/* Section 3 — Méthode : why-grid 4 colonnes */
.agence-why-grid {
  grid-template-columns: repeat(4, 1fr);
}
.agence-step-num-sm {
  display: inline-block;
  font-style: normal;
  font-size: .78rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .04em;
  margin-right: 4px;
}

/* Responsive agence */
@media (max-width: 1040px) {
  .agence-why-grid { grid-template-columns: repeat(2, 1fr); }
  .agence-mv-stack { flex-direction: row; gap: 16px; }
  .agence-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .agence-mv-stack { flex-direction: column; }
  .agence-why-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   PAGE CONTACT — Hero
   ================================================================ */
/* Hero full-cover identique à agence-hero */
.contact-hero .interpretariat-hero-stage { background: none; }
.contact-hero .interpretariat-hero-stage::before,
.contact-hero .interpretariat-hero-stage::after { display: none; }
.contact-hero .interpretariat-hero-slide {
  animation: none; opacity: 1;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; object-position: center top;
  padding: 0; background: transparent; border: none; box-shadow: none;
  filter: brightness(.78) saturate(1.08);
}
.contact-hero .page-hero-overlay {
  background:
    linear-gradient(90deg, rgba(7,26,50,.75) 0%, rgba(7,26,50,.42) 55%, rgba(7,26,50,.20) 100%),
    linear-gradient(180deg, rgba(7,26,50,.12) 0%, rgba(7,26,50,.48) 100%);
}
/* Photo "réunion" de la page Partenaires professionnels : le sujet (les
   personnes) se trouve dans la moitié basse de la photo, l'écran/tableau
   blanc en haut. "center top" (règle générale ci-dessus) recadrerait sur
   l'écran vide ; on recadre plutôt vers le bas pour garder les personnes
   visibles. */
.partenaires-pro-hero .interpretariat-hero-slide {
  object-position: center bottom;
}
/* Hero réduit : plus de sous-titre ni de fil d'Ariane, juste le titre + la box.
   La hauteur/l'ancrage bas sont désormais hérités de .page-hero (même valeur
   sur toutes les pages du site). */

/* Badge "Votre partenaire linguistique de confiance" (aussi réutilisé par le hero blog) —
   assez large pour que chaque ligne de texte tienne sur une seule ligne, sans retour
   à la ligne, sur desktop/tablette. */
.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  background: rgba(7,26,50,.70);
  border: 1px solid rgba(226,156,45,.30);
  border-left: 3px solid var(--accent);
  padding: 12px 22px;
  border-radius: 4px;
  max-width: 640px;
  width: max-content;
}
.contact-hero-badge-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(226,156,45,.15);
  display: flex; align-items: center; justify-content: center;
}
/* L'icône occupe bien l'espace de son cercle (au lieu de nager dedans) —
   la taille CSS prime sur les attributs width/height du SVG dans le HTML. */
.contact-hero-badge-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent);
}
.contact-hero-badge strong {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 3px;
  white-space: normal;
  overflow-wrap: break-word;
}
.contact-hero-badge span {
  display: block;
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  white-space: normal;
  overflow-wrap: break-word;
}
.contact-hero-badge em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

/* ================================================================
   PAGE CONTACT — Section principale
   ================================================================ */
.contact-main { background: #f4f7fb; }
.contact-main-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: start;
}

/* COLONNE GAUCHE — infos */
.contact-info-heading {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  color: var(--brand-dark);
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1.2;
}
.contact-heading-rule {
  display: block;
  width: 48px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 18px;
}
.contact-info-desc {
  color: #4a5568;
  font-size: .97rem;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Lignes d'infos */
.contact-info-rows { display: flex; flex-direction: column; gap: 0; }
.contact-info-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.contact-info-row:first-child { border-top: 1px solid rgba(0,0,0,.07); }

.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-icon-phone { background: var(--brand-dark); }
.contact-icon-phone svg { stroke: #fff; }
.contact-icon-mail  { background: var(--brand-dark); }
.contact-icon-mail svg { stroke: #fff; }
.contact-icon-pin   { background: var(--brand-dark); }
.contact-icon-pin svg { stroke: #fff; }
.contact-icon-clock { background: var(--brand-dark); }
.contact-icon-clock svg { stroke: #fff; }

.contact-info-label {
  display: block;
  font-size: .75rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.contact-info-value {
  display: block;
  font-size: .97rem;
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.35;
}
.contact-info-value-sm {
  display: block;
  font-size: .9rem;
  color: #4a5568;
  font-weight: 600;
}

/* Carte présence internationale */
.contact-map-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 18px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.contact-map-visual { flex-shrink: 0; color: var(--brand); }
.contact-map-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.contact-map-text p {
  font-size: .85rem;
  color: #4a5568;
  margin: 0 0 8px;
  line-height: 1.55;
}
.contact-map-link {
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s ease;
}
.contact-map-link:hover { gap: 8px; }

/* COLONNE DROITE — formulaire */
.contact-form-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 32px rgba(0,0,0,.10);
  padding: 36px 32px;
}
.contact-form-heading {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--brand-dark);
  margin: 0 0 24px;
}
.contact-rich-form { display: grid; gap: 16px; }
.crf-row { display: grid; gap: 0; }
.crf-label {
  display: grid;
  gap: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: #374151;
}
.crf-label abbr {
  text-decoration: none;
  color: #e53e3e;
  margin-left: 2px;
}
.crf-input, .crf-textarea, .crf-select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 11px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.crf-input:focus, .crf-textarea:focus, .crf-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26,99,166,.12);
}
.crf-input::placeholder, .crf-textarea::placeholder { color: #9ca3af; }
.crf-textarea { resize: vertical; }

/* Select avec flèche custom */
.crf-select-wrap { position: relative; }
.crf-select { padding-right: 40px; cursor: pointer; }
.crf-select-arrow {
  position: absolute;
  right: 13px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  stroke: #6b7280;
}

/* Bouton envoyer */
.crf-submit {
  width: 100%;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #111623;
  border: none;
  border-radius: 6px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(226,156,45,.35);
  margin-top: 4px;
}
.crf-submit svg { stroke: #111623; flex-shrink: 0; }
.crf-submit:hover {
  background: #c98a1f;
  box-shadow: 0 6px 24px rgba(226,156,45,.50);
  transform: translateY(-1px);
}
.crf-submit:active { transform: translateY(0); }

/* Case à cocher d'acceptation de la politique de confidentialité */
.crf-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .82rem;
  color: #374151;
  cursor: pointer;
  line-height: 1.45;
}
.crf-consent input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}
.crf-consent a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline;
}
.crf-consent a:hover { color: var(--accent); }
.crf-consent abbr {
  text-decoration: none;
  color: #e53e3e;
}

/* Mention confidentialité */
.crf-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: #6b7280;
  margin: 4px 0 0;
}
.crf-privacy svg { stroke: #6b7280; flex-shrink: 0; }

/* ================================================================
   PAGE CONTACT — Bandeau 4 features
   ================================================================ */
.contact-features-band {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
  padding: 40px 0;
}
.contact-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.contact-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 18px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 8px;
  background: #f9fafb;
  transition: box-shadow .2s, transform .2s;
}
.contact-feature:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.contact-feature-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(26,99,166,.1);
  display: flex; align-items: center; justify-content: center;
}
.contact-feature-icon svg { width: 28px; height: 28px; stroke: var(--brand-dark); }
.contact-feature strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin-bottom: 5px;
}
.contact-feature p {
  font-size: .83rem;
  color: #4a5568;
  margin: 0;
  line-height: 1.55;
}

/* Responsive contact */
@media (max-width: 1100px) {
  .contact-main-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-form-col { max-width: 620px; }
  .contact-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .contact-info-row { grid-template-columns: 44px 1fr; }
  .contact-info-side { grid-column: 2; }
  .contact-features-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-form-card { padding: 24px 18px; }
  .contact-map-card { flex-direction: column; text-align: center; }
  .contact-hero-badge { max-width: 100%; width: auto; }
}

/* ====================================================================
   HERO VARIANTS — devis (quote) et commande
   ==================================================================== */
.quote-hero .interpretariat-hero-stage,
.commande-hero .interpretariat-hero-stage { background: none; }
.quote-hero .interpretariat-hero-stage::before,
.quote-hero .interpretariat-hero-stage::after,
.commande-hero .interpretariat-hero-stage::before,
.commande-hero .interpretariat-hero-stage::after { display: none; }
.quote-hero .interpretariat-hero-slide,
.commande-hero .interpretariat-hero-slide {
  animation: none; opacity: 1;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; object-position: center top;
  padding: 0; background: transparent; border: none; box-shadow: none;
  filter: brightness(.72) saturate(1.05);
}

/* Badges hero devis */
.quote-hero-badges {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
}
.qhb {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(7,26,50,.68);
  border: 1px solid rgba(226,156,45,.35);
  color: #e8d5aa;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  padding: 6px 14px; border-radius: 20px;
}
.qhb svg { stroke: var(--accent); flex-shrink: 0; }

/* ====================================================================
   PAGE DEVIS — layout principal
   ==================================================================== */
.devis-main { background: #f4f6fa; }

.devis-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}

/* ── Barre de bénéfices rapides sous les onglets ── */
.devis-benefits-bar {
  background: linear-gradient(90deg, #071a32 0%, #0d3f70 100%);
  padding: 0;
  border-bottom: 2px solid rgba(226,156,45,.35);
}
.devis-benefits-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}
.devis-benefit-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  padding: 0 24px;
  white-space: nowrap;
}
.devis-benefit-item + .devis-benefit-item {
  border-left: 1px solid rgba(255,255,255,.15);
}
.devis-benefit-item svg { stroke: var(--accent); flex-shrink: 0; }

/* ── Formulaire multi-étapes ── */
.devis-form-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 32px rgba(0,0,0,.10);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}
/* En-tête coloré du formulaire */
.devis-form-header {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1a6390 100%);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.devis-form-header svg { stroke: var(--accent); flex-shrink: 0; }
.devis-form-header strong {
  display: block;
  font-size: .95rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}
.devis-form-header span {
  font-size: .78rem;
  color: rgba(255,255,255,.70);
}

.devis-section {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background .15s;
}
.devis-section:last-of-type { border-bottom: none; }

.devis-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.devis-step-badge {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1a6390 100%);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(7,26,50,.25);
  outline: 3px solid rgba(226,156,45,.25);
  outline-offset: 2px;
}
.devis-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 0;
}

/* Paire de langues */
.lang-pair {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: end;
  gap: 12px;
}
.lang-select-wrap { display: flex; flex-direction: column; gap: 6px; }
.lang-select-label {
  font-size: .78rem; font-weight: 700; color: #5a6a7a; text-transform: uppercase; letter-spacing: .05em;
}
.swap-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
  align-self: end; margin-bottom: 2px;
}
.swap-btn:hover { background: var(--accent); transform: rotate(180deg); }
.swap-btn svg { stroke: #fff; }

/* Service cards 2×2 */
.service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.service-card {
  display: flex; align-items: stretch;
  border: 2px solid rgba(0,0,0,.09);
  border-radius: 12px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s, background .2s;
  position: relative;
  gap: 10px;
  background: #fff;
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(226,156,45,.20);
  transform: translateY(-1px);
}
.service-card-radio { display: none; }
.service-card:has(.service-card-radio:checked) {
  border-color: var(--accent);
  background: rgba(226,156,45,.06);
  box-shadow: 0 3px 18px rgba(226,156,45,.28);
}
.service-card-body { flex: 1; }
.service-card-title {
  display: block;
  font-size: .9rem; font-weight: 800; color: var(--brand-dark);
  margin-bottom: 4px;
}
.service-card-desc {
  font-size: .78rem; color: #667080; margin: 0 0 6px;
  line-height: 1.45;
}
.service-card-rate {
  display: inline-block;
  font-size: .72rem; font-weight: 800; color: var(--brand-dark);
  background: rgba(7,26,50,.07);
  padding: 2px 8px; border-radius: 20px; margin-top: 2px;
}
.service-card:has(.service-card-radio:checked) .service-card-rate {
  background: var(--accent); color: #111623;
}
.service-card-check {
  width: 24px; height: 24px;
  background: var(--accent);
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  align-self: flex-start; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(226,156,45,.4);
}
.service-card-check svg { stroke: #111623; }
.service-card:has(.service-card-radio:checked) .service-card-check { display: flex; }
/* ─── Devis en ligne : cards traduction + révision ─────────────────────────
   Scopé à #serviceCards (traduction) et #revCards (révision) pour ne modifier
   QUE la page devis en ligne. Aucun autre composant du site n'est affecté.

   Changements :
     • Fond bleu foncé (--brand-dark) au repos
     • Titres en blanc
     • Texte descriptif blanc semi-transparent (lisible sur fond sombre)
     • Badge tarif fond blanc translucide
     • Au survol : fond --brand, bordure dorée
     • Sélectionné : fond --brand, bordure dorée, ombre chaude
     • Badge tarif doré quand sélectionné
     • Coche (checkmark) également activée pour les cards révision
   ─────────────────────────────────────────────────────────────────────────── */

/* Fond bleu foncé + bordure blanc translucide (état par défaut) */
#serviceCards .service-card,
#revCards     .service-card {
  background   : var(--brand-dark);
  border-color : rgba(255,255,255,.18);
}

/* Survol : fond légèrement plus clair, bordure dorée */
#serviceCards .service-card:hover,
#revCards     .service-card:hover {
  background   : var(--brand);
  border-color : var(--accent);
  box-shadow   : 0 4px 18px rgba(226,156,45,.22);
  transform    : translateY(-1px);
}

/* Titres en blanc */
#serviceCards .service-card-title,
#revCards     .service-card-title {
  color: #fff;
}

/* Texte descriptif — blanc légèrement transparent (lisibilité sur fond bleu) */
#serviceCards .service-card-desc,
#revCards     .service-card-desc {
  color: rgba(255,255,255,.78);
}

/* Badge tarif — fond blanc translucide par défaut */
#serviceCards .service-card-rate,
#revCards     .service-card-rate {
  background: rgba(255,255,255,.14);
  color      : rgba(255,255,255,.92);
}

/* ── État sélectionné — Traduction (#serviceCards) ─────────────────────── */
#serviceCards .service-card:has(.service-card-radio:checked) {
  border-color : var(--accent);
  background   : var(--brand);
  box-shadow   : 0 3px 18px rgba(226,156,45,.32);
}

/* ── État sélectionné — Révision (#revCards) — même comportement visuel ── */
#revCards .service-card:has(.rev-card-radio:checked) {
  border-color : var(--accent);
  background   : var(--brand);
  box-shadow   : 0 3px 18px rgba(226,156,45,.32);
}

/* Badge tarif en doré quand la card est sélectionnée (traduction + révision) */
#serviceCards .service-card:has(.service-card-radio:checked) .service-card-rate,
#revCards     .service-card:has(.rev-card-radio:checked)     .service-card-rate {
  background: var(--accent);
  color      : #111623;
}

/* Coche visible à la sélection — révision (règle absente dans le CSS global) */
#revCards .service-card:has(.rev-card-radio:checked) .service-card-check {
  display: flex;
}


/* Upload zone */
.upload-zone {
  border: 2px dashed rgba(13,63,112,.22);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  transition: border-color .2s, background .2s, box-shadow .2s;
  cursor: pointer;
  background: linear-gradient(135deg, #f8faff 0%, #fafbfd 100%);
}
.upload-zone:hover {
  border-color: var(--brand);
  background: rgba(26,99,166,.03);
}
.upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(226,156,45,.06);
  box-shadow: 0 0 0 3px rgba(226,156,45,.15);
}
.upload-zone-inner { pointer-events: none; }
.upload-icon { color: #9aaccb; display: block; margin-bottom: 12px; }
.upload-icon svg { stroke: var(--brand); opacity: .55; }
.upload-label {
  font-size: .88rem; color: #4a5568; margin: 0 0 5px;
}
.upload-browse {
  background: none; border: none; padding: 0;
  color: var(--brand-dark); font-weight: 800; text-decoration: underline; cursor: pointer;
  pointer-events: all;
}
.upload-browse:hover { color: var(--accent); }
.upload-hint { font-size: .75rem; color: #8898aa; margin: 0; }
.file-list { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; }
.file-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: #4a5568;
  padding: 6px 10px; background: rgba(0,0,0,.04); border-radius: 6px;
  margin-bottom: 5px;
}
.file-item svg { stroke: var(--brand-dark); flex-shrink: 0; }
.file-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-check-status {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}
.page-check-status.checking {
  background: #eef4ff;
  color: #194c8f;
}
.page-check-status.ok {
  background: #eaf7ef;
  color: #166534;
}
.page-check-status.warn {
  background: #fff7e6;
  color: #8a5a00;
}
.page-check-status.bad {
  background: #fff0f0;
  color: #b42318;
}
.file-remove {
  background: none; border: none; padding: 2px 6px; cursor: pointer;
  font-size: 1rem; color: #8898aa; border-radius: 4px;
}
.file-remove:hover { background: rgba(0,0,0,.08); color: #c53030; }

/* ── Indicateur d'upload en cours (document_id Commander) ───────────────────
   Affiché sous la zone de dépôt de fichiers dans le formulaire Commander.
   Disparaît quand le documentId est bien reçu du serveur.
────────────────────────────────────────────────────────────────────────────── */
.upload-sending-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 9px 13px;
  border-radius: 6px;
  font-size: .81rem;
  font-weight: 600;
  line-height: 1.35;
  background: #eef4ff;
  color: #194c8f;
  border: 1px solid #c7d9f7;
  transition: opacity .3s;
}
.upload-sending-status.done {
  background: #eaf7ef;
  color: #166534;
  border-color: #bbf7d0;
}
.upload-sending-status.error {
  background: #fff0f0;
  color: #b42318;
  border-color: #fecaca;
}
/* Spinner CSS léger pour l'indicateur "envoi en cours" */
@keyframes upload-spin { to { transform: rotate(360deg); } }
.upload-spin-icon {
  width: 14px; height: 14px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  animation: upload-spin .7s linear infinite;
}

/* Grille infos perso */
.devis-personal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Bouton soumettre devis */
.devis-submit-btn {
  width: calc(100% - 64px);
  margin: 4px 32px 28px;
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1a6390 100%);
  color: #fff;
  border-radius: 10px;
  padding: 17px 24px;
  font-size: 1rem; font-weight: 900; letter-spacing: .07em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 5px 20px rgba(7,26,50,.32);
  transition: background .2s, transform .15s, box-shadow .2s;
  border: none;
  cursor: pointer;
}
.devis-submit-btn:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #c98a1f 100%);
  color: #111623;
  box-shadow: 0 7px 26px rgba(226,156,45,.48);
  transform: translateY(-2px);
}
.devis-submit-btn svg { stroke: currentColor; }

/* ── Sidebar calculateur ── */
.devis-sidebar { position: sticky; top: 24px; }

.calc-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 32px rgba(0,0,0,.10);
  padding: 26px 24px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}
.calc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--accent) 100%);
}
.calc-title {
  font-size: 1rem; font-weight: 900; color: var(--brand-dark);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 8px;
  padding-top: 4px;
}
.calc-title svg { stroke: var(--accent); }

.calc-unit-toggle {
  display: flex; border: 1px solid rgba(0,0,0,.12); border-radius: 6px;
  overflow: hidden; margin-bottom: 14px;
}
.cut-btn {
  flex: 1; padding: 8px; border: none; background: none; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: #6b7a8d;
  transition: background .2s, color .2s;
}
.cut-btn.active { background: var(--brand-dark); color: #fff; }

.calc-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .8rem; font-weight: 700; color: #5a6a7a;
  margin-bottom: 16px;
}
.calc-input {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.15); border-radius: 6px;
  font-size: .95rem; font-family: inherit; width: 100%; box-sizing: border-box;
}
.calc-input:focus { outline: none; border-color: var(--brand-dark); }

.calc-result-box {
  background: linear-gradient(135deg, #f0f5ff 0%, #f4f6fa 100%);
  border-radius: 10px;
  padding: 18px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(26,99,166,.10);
}
.calc-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0;
}
.calc-result-label { font-size: .8rem; color: #6b7a8d; font-weight: 600; }
.calc-price { font-size: 1.6rem; font-weight: 900; color: var(--brand-dark); letter-spacing: -.02em; }
.calc-market-row .calc-result-label { color: #aab; }
.calc-market {
  font-size: 1rem; color: #aab; text-decoration: line-through;
}
.calc-savings-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,.12);
  font-size: .8rem; color: #2e7d32;
  font-weight: 700;
}
.calc-savings-row svg { stroke: #2e7d32; }
.calc-savings-row strong { color: #2e7d32; font-weight: 900; }

/* Bouton "Commander maintenant" */
.commander-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--accent);
  color: #111623;
  border-radius: 8px; padding: 14px;
  font-size: .92rem; font-weight: 900; letter-spacing: .05em;
  box-shadow: 0 4px 16px rgba(226,156,45,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
  margin-bottom: 16px; text-decoration: none;
}
.commander-btn:hover {
  background: #c98a1f;
  box-shadow: 0 6px 22px rgba(226,156,45,.50);
  transform: translateY(-1px);
}
.commander-btn svg { stroke: #111623; }

.calc-trust-list {
  list-style: none; padding: 0; margin: 0;
}
.calc-trust-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: #4a5568;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.calc-trust-list li:last-child { border-bottom: none; }
.calc-trust-list svg { stroke: #2e7d32; flex-shrink: 0; }

/* ── Bandeau garanties ── */
.guarantee-band {
  background: var(--brand-dark);
  padding: 48px 0;
}
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.guarantee-card {
  text-align: center; padding: 20px 16px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.guarantee-card:last-child { border-right: none; }
.guarantee-icon {
  width: 52px; height: 52px;
  background: rgba(226,156,45,.18);
  border: 1px solid rgba(226,156,45,.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.guarantee-icon svg { width: 32px; height: 32px; stroke: var(--accent); }
.guarantee-card strong {
  display: block; font-size: .95rem; font-weight: 900; color: #fff; margin-bottom: 6px;
}
.guarantee-card p {
  font-size: .8rem; color: rgba(255,255,255,.65); margin: 0; line-height: 1.55;
}

/* ====================================================================
   PAGE COMMANDE
   ==================================================================== */
.commande-main { background: #f4f6fa; }
.commande-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}
.commande-form-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,0,0,.09);
  overflow: hidden;
}

/* Urgency cards */
.urgency-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.urgency-card {
  border: 2px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
  text-align: center;
  position: relative;
  background: #fff;
}
.urgency-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 14px rgba(226,156,45,.20);
}
/* Commande page radios */
.urgency-card:has(.urgency-radio:checked),
.urgency-card:has(.urgency-radio-rev:checked),
/* Devis page radios */
.urgency-card:has(.devis-urg-t:checked),
.urgency-card:has(.devis-urg-r:checked) {
  border-color: var(--brand-dark);
  background: rgba(7,26,50,.04);
  box-shadow: 0 3px 14px rgba(7,26,50,.15);
}
.urgency-radio,
.urgency-radio-rev,
.devis-urg-t,
.devis-urg-r,
.rev-card-radio { display: none; }
.urgency-body strong {
  display: block; font-size: .95rem; font-weight: 900; color: var(--brand-dark); margin-bottom: 5px;
}
.urgency-body span { display: block; font-size: .8rem; color: #4a5568; margin-bottom: 6px; }
.urgency-body em { display: block; font-size: .75rem; color: var(--accent); font-weight: 800; font-style: normal; }
/* Badge "+20%" express */
.urg-badge-plus {
  display: inline-block;
  background: var(--accent);
  color: #111623;
  font-size: .68rem;
  font-weight: 900;
  font-style: normal;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* CGV */
.cgv-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .84rem; color: #4a5568; cursor: pointer; margin-top: 14px;
}
.cgv-cb { margin-top: 2px; accent-color: var(--brand-dark); }
.cgv-link { color: var(--brand-dark); text-decoration: underline; font-weight: 700; }

/* ── Étape 5 : Paiement ── */
.payment-step { border-top: 2px solid rgba(26,99,166,.15); padding-top: 28px; }

.payment-recap-box {
  background: rgba(13,63,112,.05);
  border: 1px solid rgba(13,63,112,.12);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.payment-recap-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 800; color: var(--brand-dark);
  margin: 0 0 14px;
}
.payment-recap-title svg { stroke: var(--brand-dark); flex-shrink: 0; }
.payment-recap-list {
  list-style: none; padding: 0; margin: 0 0 14px;
}
.payment-recap-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: .8rem;
}
.payment-recap-list li:last-child { border-bottom: none; }
.payment-recap-list li span { color: #6b7a8d; }
.payment-recap-list li strong { color: var(--brand-dark); font-weight: 800; }
.payment-recap-total {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border-radius: 8px; padding: 12px 16px;
  margin-bottom: 10px;
  border: 1px solid rgba(26,99,166,.2);
}
.payment-recap-total span { font-size: .82rem; color: #6b7a8d; font-weight: 700; }
.payment-total-price {
  font-size: 1.5rem; font-weight: 900; color: var(--brand-dark);
}
.payment-recap-delivery {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; color: #4a5568; margin: 0;
}
.payment-recap-delivery svg { stroke: var(--accent); flex-shrink: 0; }

/* Payment method cards */
.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.payment-card {
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid rgba(13,63,112,.15);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}
.payment-card:hover { border-color: var(--brand); }
.payment-card:has(.payment-radio:checked) {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(26,99,166,.15);
}
.payment-radio { display: none; }
.payment-card-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.payment-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pm-icon-carte   { background: rgba(26,99,166,.12); }
.pm-icon-carte   svg { stroke: var(--brand-dark); }
.pm-icon-virement{ background: rgba(13,63,112,.1); }
.pm-icon-virement svg { stroke: #0d3f70; }
.pm-icon-paypal  { background: rgba(0,112,186,.12); }
.pm-icon-paypal  svg { stroke: #003087; }
.pm-icon-mobile  { background: rgba(255,140,0,.12); }
.pm-icon-mobile  svg { stroke: #e67e00; }
.payment-card-info { flex: 1; }
.payment-card-info strong { display: block; font-size: .85rem; font-weight: 800; color: var(--brand-dark); }
.payment-card-info span   { font-size: .75rem; color: #6b7a8d; }
.payment-card-logos { display: flex; gap: 6px; align-items: center; margin-left: auto; margin-right: 6px; }
.payment-card-check {
  width: 20px; height: 20px;
  background: var(--brand-dark);
  border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.payment-card-check svg { stroke: #fff; }
.payment-card:has(.payment-radio:checked) .payment-card-check { display: flex; }

/* Dynamic payment panels */
.pm-fields-panel { margin-bottom: 20px; }
.pm-fields-note {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: #4a5568;
  background: rgba(226,156,45,.1);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
}
.pm-fields-note svg { stroke: var(--accent); flex-shrink: 0; }
.pm-card-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.pm-info-box {
  background: rgba(13,63,112,.04);
  border: 1px solid rgba(13,63,112,.1);
  border-radius: 10px;
  padding: 18px 22px;
}
.pm-info-box h4 { margin: 0 0 12px; font-size: .92rem; font-weight: 800; color: var(--brand-dark); }
.pm-info-box p  { margin: 0 0 7px; font-size: .82rem; color: #4a5568; }
.pm-info-box p:last-child { margin-bottom: 0; }
.pm-info-note { font-size: .78rem; color: #6b7a8d; font-style: italic; }

/* Confirm button */
.payment-confirm-btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 16px 28px;
  font-size: 1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  transition: background .2s, transform .1s;
  letter-spacing: .04em;
}
.payment-confirm-btn:hover { background: #c8861a; transform: translateY(-1px); }
.payment-confirm-btn svg { stroke: #fff; }

@media (max-width: 600px) {
  .payment-methods-grid { grid-template-columns: 1fr; }
  .pm-card-row { flex-direction: column; }
}

/* Summary card */
.summary-card {}
.summary-list {
  list-style: none; padding: 0; margin: 0 0 16px;
}
.summary-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.07);
  font-size: .82rem;
}
.summary-list li:last-child { border-bottom: none; }
.summary-list li span { color: #6b7a8d; }
.summary-list li strong { color: var(--brand-dark); font-weight: 800; max-width: 60%; text-align: right; }
.summary-price-box {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(7,26,50,.05); border-radius: 8px; padding: 14px;
  margin-bottom: 12px;
}
.summary-price-box span { font-size: .82rem; color: #6b7a8d; font-weight: 700; }
.summary-price-box .calc-price { font-size: 1.4rem; }
.summary-delivery {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: #4a5568; padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.07);
}
.summary-delivery svg { stroke: var(--brand-dark); flex-shrink: 0; }
.summary-delivery strong { color: var(--brand-dark); font-weight: 800; }

/* Étapes de livraison */
.delivery-steps-band {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
  padding: 60px 0;
}
.delivery-steps-title {
  text-align: center; font-size: 1.5rem; font-weight: 900;
  color: var(--brand-dark); margin-bottom: 48px;
}
.delivery-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.delivery-steps-grid::before {
  content: "";
  position: absolute;
  top: 28px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(226,156,45,.3));
  z-index: 0;
}
.delivery-step {
  text-align: center;
  padding: 0 16px;
  position: relative; z-index: 1;
}
.delivery-step-num {
  width: 56px; height: 56px;
  background: var(--brand-dark);
  color: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900; letter-spacing: .05em;
  margin: 0 auto 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 14px rgba(7,26,50,.2);
}
.delivery-step-title {
  font-size: .95rem; font-weight: 900; color: var(--brand-dark); margin-bottom: 8px;
}
.delivery-step-desc {
  font-size: .8rem; color: #4a5568; line-height: 1.55; margin: 0;
}

/* ====================================================================
   RESPONSIVE — devis + commande
   ==================================================================== */
@media (max-width: 1100px) {
  .devis-layout { grid-template-columns: 1fr; }
  .devis-sidebar { position: static; }
  .calc-card { max-width: 560px; margin: 0 auto; }
  .commande-layout { grid-template-columns: 1fr; }
  .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
  .guarantee-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 20px; }
  .guarantee-card:last-child { border-bottom: none; }
  .delivery-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .delivery-steps-grid::before { display: none; }
}
@media (max-width: 640px) {
  .devis-section { padding: 20px 18px; }
  .devis-submit-btn { width: calc(100% - 36px); margin: 4px 18px 24px; }
  .lang-pair { grid-template-columns: 1fr 40px 1fr; gap: 8px; }
  .service-cards { grid-template-columns: 1fr; }
  .devis-personal-grid { grid-template-columns: 1fr; }
  .urgency-cards { grid-template-columns: 1fr; }
  .guarantee-grid { grid-template-columns: 1fr; }
  .delivery-steps-grid { grid-template-columns: 1fr; }
  .devis-benefits-inner { flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px 12px; }
  .devis-benefit-item { padding: 4px 12px; font-size: .74rem; }
  .devis-benefit-item + .devis-benefit-item { border-left: none; border-top: none; }
  .devis-service-tabs { padding: 0 8px; }
  .devis-stab { font-size: .75rem; padding: 15px 6px; gap: 5px; }
  .devis-stab svg { display: none; }
}

/* ============================================================
   HOME SERVICE CARDS — dark navy square cards with gold icons
   ============================================================ */
.home-svc-rule {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 8px 0 32px;
  border-radius: 2px;
}
.home-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* variante explicite 4 colonnes (alias) */
.home-svc-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.home-svc-card {
  background: var(--brand-dark);
  border-radius: 14px;
  padding: 40px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  border: 2px solid transparent;
}
.home-svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(7,26,50,.25);
  border-color: var(--accent);
}
.home-svc-icon {
  color: var(--accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-svc-icon svg {
  stroke: var(--accent);
}
.home-svc-card h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}

/* ============================================================
   FAQ VOIR PLUS BUTTON
   ============================================================ */
.faq-voir-plus {
  text-align: center;
  margin-top: 28px;
}
.faq-voir-plus .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .home-svc-grid,
  .home-svc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-svc-grid,
  .home-svc-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE FAQ DÉDIÉE
   ============================================================ */
.faq-subtitle {
  color: var(--text-muted, #6b7280);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 0 36px;
}
.faq-page-accordion {
  max-width: 800px;
}
.faq-cta-band {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.faq-cta-band p {
  flex: 1 1 200px;
  font-weight: 600;
  margin: 0;
  color: var(--brand-dark);
}

/* Solutions section — titre 2 lignes max */
.solutions-title {
  max-width: 680px;
  line-height: 1.3;
}

/* ============================================================
   PAGE FAQ — navigation rapide + sections par catégorie
   ============================================================ */
.faq-page {
  background: #f8f9fb;
}
.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 48px;
}
.faq-nav-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--brand-dark, #071a32);
  color: var(--brand-dark, #071a32);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.faq-nav-pill:hover,
.faq-nav-pill:focus-visible {
  background: var(--brand-dark, #071a32);
  color: #fff;
}
.faq-category-block {
  margin-bottom: 52px;
  scroll-margin-top: 100px;
}
.faq-category-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-dark, #071a32);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent, #c8893a);
  margin-bottom: 20px;
}

/* ============================================================
   PAGE AGENCE — sections expertises + détail services
   ============================================================ */

/* Grille 3 expertises */
.agence-exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.agence-exp-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.agence-exp-card:hover {
  box-shadow: 0 8px 32px rgba(7,26,50,.1);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.agence-exp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--brand-dark);
  border-radius: 12px;
  color: var(--accent);
}
.agence-exp-icon svg { stroke: var(--accent); }
.agence-exp-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 0;
}
.agence-exp-card p { color: #4b5563; margin: 0; line-height: 1.65; }
.agence-exp-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agence-exp-list li {
  font-size: .88rem;
  color: #374151;
  padding-left: 16px;
  position: relative;
}
/* ============================================================
   PAGE TARIFS — grille tarifaire par service (mot / heure)
   ============================================================ */
.pricing-grid-intro {
  max-width: 780px;
  color: #4b5563;
  line-height: 1.7;
  margin: 0 0 36px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.pricing-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.pricing-card:hover {
  box-shadow: 0 8px 32px rgba(7,26,50,.1);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.pricing-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pricing-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--brand-dark);
  border-radius: 12px;
  color: var(--accent);
}
.pricing-card-icon svg { stroke: var(--accent); width: 22px; height: 22px; }
.pricing-card-head h3 { font-size: 1.1rem; font-weight: 800; color: var(--brand-dark); margin: 0; }
.pricing-card-unit {
  font-size: .74rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pricing-card-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-card-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e5e7eb;
  font-size: .92rem;
}
.pricing-card-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.pricing-row-label { color: #374151; }
.pricing-row-rate {
  font-weight: 700;
  color: var(--brand-dark);
  white-space: nowrap;
  text-align: right;
}
.pricing-row-rate small {
  display: block;
  font-weight: 500;
  font-size: .74rem;
  color: #6b7280;
}
.pricing-card-note {
  font-size: .82rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}
.pricing-card-cta { align-self: flex-start; margin-top: 4px; }
.pricing-urgency-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 0;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: .86rem;
  color: #4b5563;
}
.pricing-urgency-note svg { flex-shrink: 0; color: var(--accent); }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── Portail Partenaires : 2 grandes cartes d'orientation ──────────────────
   Même langage visuel que .agence-exp-card / .final-cta-card (fond blanc,
   bordure fine, ombre au survol) mais en grille 2 colonnes avec liste à
   puces + bouton CTA intégrés. */
.partenaires-orientation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.partenaires-orientation-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.partenaires-orientation-card:hover {
  box-shadow: 0 8px 32px rgba(7,26,50,.1);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.partenaires-orientation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--brand-dark);
  border-radius: 12px;
  color: var(--accent);
  margin-bottom: 4px;
}
.partenaires-orientation-icon svg { stroke: var(--accent); }
.partenaires-orientation-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--brand-dark); margin: 0; }
.partenaires-orientation-card p  { color: #4b5563; margin: 0; line-height: 1.65; }
.partenaires-orientation-card .agence-exp-list { margin-bottom: 8px; }
.partenaires-orientation-card .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 860px) {
  .partenaires-orientation-grid { grid-template-columns: 1fr; }
}

/* ── Portail Partenaires : bandeau logos défilants en continu ──────────────
   Même gabarit compact que la section ".numbers" de l'accueil (même padding,
   même couleur de fond #18243a). Défilement horizontal continu façon
   "testimonial-marquee", pause au survol, sans JS (pur CSS). Logos cliquables
   vers le site officiel de chaque partenaire (fonction inchangée). */
.partners-showcase {
  padding: 58px 0;
  background: #18243a;
  overflow: hidden;
}
.partners-showcase-label {
  text-align: center;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  margin: 0 0 26px;
}
.partners-marquee-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-marquee {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 48px;
  animation: partners-scroll 28s linear infinite;
}
.partners-marquee-viewport:hover .partners-marquee { animation-play-state: paused; }
.partners-logo-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 72px;
  background: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .2s, box-shadow .2s;
}
a.partners-logo-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.partners-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partners-logo-initials { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); }
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 24px)); }
}

/* ── Formes de collaboration : boxes façon accueil (mêmes propriétés visuelles
   que .home-svc-card — fond bleu marine, icône + libellé centrés, ombre au
   survol) appliquées à "Nos principales formes de collaboration", à la place
   de l'ancienne liste à puces deux colonnes. */
.collab-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.collab-form-card {
  background: var(--brand-dark);
  border-radius: 14px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 2px solid transparent;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.collab-form-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(7,26,50,.25);
  border-color: var(--accent);
}
.collab-form-icon {
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collab-form-icon svg { stroke: var(--accent); width: 32px; height: 32px; }
.collab-form-card span:last-child {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .collab-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .collab-form-grid { grid-template-columns: 1fr; }
}

/* Variante "détaillée" (icône + titre + description) — même box bleu marine
   que les cartes simples icône + libellé, utilisée pour "Les qualités
   recherchées" sur la page Freelances linguistiques. */
.collab-form-card--detailed h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.collab-form-card--detailed p {
  color: rgba(255,255,255,.78);
  font-size: .85rem;
  line-height: 1.55;
  margin: 0;
}

/* ── Formulaires de candidature (Partenaires professionnels / Freelances) ──
   Grille responsive 2 colonnes réutilisant les champs .crf-input/.crf-select/
   .crf-textarea déjà stylés ailleurs sur le site — seule la grille est nouvelle. */
.candidature-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-bottom: 20px;
}
.candidature-form-full { grid-column: 1 / -1; }
.candidature-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.candidature-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  color: #374151;
  font-weight: 600;
  cursor: pointer;
}
.candidature-checkbox input { width: auto; }
@media (max-width: 720px) {
  .candidature-form-grid { grid-template-columns: 1fr; }
}

/* Liste à puces sur 2 colonnes — utilisée pour les listes sans description
   (formes de collaboration, profils recherchés, tarification…) afin d'éviter
   d'inventer du texte descriptif non fourni par le contenu source. */
.agence-exp-list.two-col {
  columns: 2;
  column-gap: 32px;
  margin-top: 12px;
}
.agence-exp-list.two-col li { break-inside: avoid; margin-bottom: 6px; }
@media (max-width: 640px) {
  .agence-exp-list.two-col { columns: 1; }
}

/* Grille explicite à 2 colonnes (au lieu du texte multi-colonnes ci-dessus) —
   utilisée pour "Profils recherchés" (2 listes) et "Rémunération" (base de
   calcul + facteurs côte à côte) sur la page Freelances linguistiques. */
.two-col-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
@media (max-width: 640px) {
  .two-col-lists { grid-template-columns: 1fr; }
}

/* Lien de retour en haut des pages de candidature dédiées */
.candidature-back-link {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}
.candidature-back-link:hover { text-decoration: underline; }

/* Note/avertissement discret (ex : "l'intégration ne garantit pas de mission") */
.freelance-disclaimer {
  font-size: .85rem;
  font-style: italic;
  color: #6b7280;
  border-left: 3px solid #d1d5db;
  padding-left: 14px;
  margin-top: 16px;
}

.agence-exp-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.agence-exp-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.agence-exp-link:hover { text-decoration: underline; }

/* Sections détail interprétariat / localisation */
.agence-interp-modes,
.agence-loc-sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.agence-interp-mode,
.agence-loc-sector {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 16px 18px;
}
.agence-interp-mode strong,
.agence-loc-sector strong {
  display: block;
  color: var(--accent);
  font-size: .95rem;
  margin-bottom: 4px;
}
.agence-interp-mode p,
.agence-loc-sector p {
  font-size: .88rem;
  color: rgba(255,255,255,.8);
  margin: 0;
  line-height: 1.55;
}

/* Aside service */
.agence-service-aside { display: flex; align-items: center; }
.agence-service-aside-inner {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 32px 28px;
}
.agence-service-aside-inner h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 20px;
}

/* Checklist */
.agence-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agence-check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .93rem;
  color: rgba(255,255,255,.9);
}
.agence-check-list svg { stroke: var(--accent); flex-shrink: 0; }

/* Responsive */
/* Correctif de contraste : .agence-service-detail n'avait pas de couleur de texte
   propre, donc h2/h3/p retombaient sur la couleur par défaut (bleu marine foncé),
   invisible sur le fond bleu marine de la section Localisation. On donne une
   couleur explicite selon la bande (blanc sur band-blue, marine sur band-gold),
   héritée par les titres et paragraphes. */
.agence-service-detail.band-blue { color: #fff; }
.agence-service-detail.band-gold { color: #101827; }
.agence-service-detail h2,
.agence-service-detail h3,
.agence-service-detail p {
  color: inherit;
}

/* Correctif de contraste : "À distance" (et les autres modes) étaient en doré
   sur fond doré (.band-gold), donc quasi invisibles. Couleur foncée sur ce fond
   uniquement — reste doré sur fond bleu marine (.agence-loc-sector), où le
   contraste est déjà correct. */
.agence-service-detail.band-gold .agence-interp-mode strong {
  color: #101827;
}

@media (max-width: 1000px) {
  .agence-exp-grid { grid-template-columns: 1fr; }
  .agence-interp-modes,
  .agence-loc-sectors { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .agence-service-detail .interpretariat-band { flex-direction: column; }
  .agence-service-aside { width: 100%; }
}

/* ============================================================
   PAGE TÉMOIGNAGES — grille 3×3 + modal avis
   ============================================================ */

/* Bandeau confirmation */
/* Order confirmed banner (commander page) */
.order-confirmed-banner {
  background: linear-gradient(135deg, #0d3f70 0%, #1a63a6 100%);
  padding: 36px 0;
}
.order-confirmed-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.order-confirmed-icon {
  width: 58px; height: 58px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.order-confirmed-icon svg { width: 34px; height: 34px; stroke: #fff; }
.order-confirmed-title {
  color: #fff; margin: 0 0 8px; font-size: 1.4rem; font-weight: 900;
}
.order-confirmed-msg {
  color: rgba(255,255,255,.85); margin: 0; font-size: .9rem; line-height: 1.6;
}

.review-submitted-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
  padding: 14px 24px;
  font-weight: 600;
  font-size: .95rem;
}
.review-submitted-banner--error {
  background: #fdeaea;
  color: #7a1f1f;
  border-left-color: #d93b3b;
}

/* En-tête page */
.testimonials-header { padding-bottom: 0; }
.testimonials-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.testimonials-lead {
  color: #6b7280;
  max-width: 560px;
  margin: 8px 0 0;
}
.testimonials-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Grille 3×3 */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Carte témoignage */
.testi-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.testi-card:hover {
  box-shadow: 0 8px 28px rgba(7,26,50,.1);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.testi-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: var(--accent);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testi-meta { display: flex; flex-direction: column; gap: 2px; }
.testi-name { font-weight: 700; color: var(--brand-dark); font-size: .95rem; }
.testi-service {
  font-size: .78rem;
  color: var(--accent);
  font-weight: 600;
  background: rgba(200,137,58,.1);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}
.testi-stars { display: flex; gap: 2px; }
.testi-star { font-size: 1rem; color: #d1d5db; }
.testi-star.on { color: #f59e0b; }
.testi-comment {
  font-size: .9rem;
  color: #374151;
  line-height: 1.65;
  flex: 1;
  font-style: italic;
  margin: 0;
}
.testi-date { font-size: .78rem; color: #9ca3af; margin-top: auto; }

/* Cartes d'avis arrondies — uniquement sur la page témoignages dédiée */
.testimonials-list .review {
  border-radius: 14px;
}

/* Boutons arrondis sur la page témoignages (CTA, pagination, bouton du formulaire) */
.testimonials-header .btn,
.testimonials-bottom-cta .btn,
.testimonials-pagination .btn,
.review-submit-btn {
  border-radius: 999px;
}

/* Pagination — page suivante / précédente en bas de la grille d'avis */
.testimonials-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.testimonials-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.testimonials-page-btn.is-disabled {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}
.testimonials-page-count {
  font-weight: 800;
  color: var(--brand-dark);
  font-size: .85rem;
  letter-spacing: .03em;
}

/* CTA bas de grille */
.testimonials-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #e5e7eb;
}
.testimonials-bottom-cta p {
  font-weight: 600;
  color: var(--brand-dark);
  margin: 0;
}

/* ============================================================
   MODAL AVIS
   ============================================================ */
.review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,26,50,.65);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.review-modal-overlay[hidden] { display: none; }
.review-modal {
  background: #fff;
  border-radius: 18px;
  padding: 40px 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
.review-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.review-modal-close:hover { background: #e5e7eb; }
.review-modal h3 { font-size: 1.25rem; font-weight: 800; color: var(--brand-dark); margin-bottom: 6px; }
.review-modal-sub { color: #6b7280; font-size: .9rem; margin-bottom: 24px; }
.review-modal-form { display: flex; flex-direction: column; gap: 16px; }
.review-modal-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand-dark);
}
.review-modal-form input,
.review-modal-form select,
.review-modal-form textarea {
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .92rem;
  font-family: inherit;
  color: #1f2937;
  transition: border-color .15s;
}
.review-modal-form input:focus,
.review-modal-form select:focus,
.review-modal-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.req { color: var(--accent); }
.review-field-hint {
  font-size: .76rem;
  font-weight: 500;
  color: #9ca3af;
}

/* Champ étoiles interactives */
.review-rating-field {
  display: flex;
  align-items: center;
  gap: 14px;
}
.review-rating-label { font-size: .88rem; font-weight: 600; color: var(--brand-dark); }
.review-stars-input { display: flex; gap: 4px; }
.rstar {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #d1d5db;
  padding: 0;
  line-height: 1;
  transition: color .12s, transform .12s;
}
.rstar.on { color: #f59e0b; }
.rstar.hover { color: #fbbf24; transform: scale(1.15); }
.review-submit-btn { margin-top: 6px; }

/* Responsive */
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .review-modal { padding: 28px 20px; }
  .testimonials-header-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   DEVIS EN LIGNE — ONGLETS SERVICE (Traduction / Interprétariat / Localisation)
   ============================================================ */

/* Bande d'onglets — statique dans le flux de la page */
.devis-tabs-band {
  background: linear-gradient(90deg, #071a32 0%, #0d3f70 100%);
  padding: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(7,26,50,.25);
}
/* Texte d'introduction pour les formulaires d'échange (Interprétariat / Localisation) */
.devis-exchange-intro {
  margin: 0 0 4px;
  padding: 14px 20px;
  background: linear-gradient(90deg, rgba(26,99,166,.08) 0%, rgba(26,99,166,.03) 100%);
  border-left: 4px solid var(--brand);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.65;
}

.devis-service-tabs {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 24px;
  border-bottom: 3px solid rgba(255,255,255,.10);
}
.devis-stab {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255,255,255,.62);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 18px 10px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color .18s, border-color .18s, background .18s;
}
.devis-stab:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.devis-stab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(255,255,255,.05);
}
/* Onglets "→ Nous contacter" — légèrement distincts */
.devis-stab-contact {
  opacity: .80;
}
.devis-stab-contact:hover {
  opacity: 1;
  background: rgba(255,255,255,.06);
}
.devis-stab .stab-icon {
  font-size: 1.1rem;
  opacity: .8;
}
.devis-tab-panel {
  display: none;
  animation: fadeTabIn .22s ease;
}
.devis-tab-panel.active {
  display: block;
}
@keyframes fadeTabIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   VOLUME TOGGLE — Mots / Pages / Heures etc.
   ============================================================ */
.volume-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.volume-toggle-row label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--brand-dark);
  min-width: 90px;
}
.vol-toggle-group {
  display: flex;
  border: 1.5px solid var(--brand);
  border-radius: 8px;
  overflow: hidden;
}
.vol-unit-btn {
  background: none;
  border: 1.5px solid rgba(26,99,166,.25);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.vol-unit-btn + .vol-unit-btn {
  border-left: 1.5px solid rgba(26,99,166,.25);
}
.vol-unit-btn.active {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.vol-unit-btn:hover:not(.active) {
  background: rgba(26, 99, 166, .08);
  border-color: var(--brand);
}
.vol-hint {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}

/* ============================================================
   COMMANDER — CHOIX DU SERVICE (Step 1 grid de cartes)
   ============================================================ */
.cmd-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 700px) {
  .cmd-svc-grid { grid-template-columns: 1fr; }
}
.cmd-svc-card {
  display: block;
  cursor: pointer;
}
.cmd-svc-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cmd-svc-inner {
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 24px 20px 20px;
  text-align: center;
  transition: border-color .18s, box-shadow .18s, background .18s;
  position: relative;
  background: #fff;
}
.cmd-svc-card input:checked ~ .cmd-svc-inner,
.cmd-svc-card:has(input:checked) .cmd-svc-inner {
  border-color: var(--brand);
  background: #f0f6ff;
  box-shadow: 0 4px 20px rgba(26,99,166,.14);
}
.cmd-svc-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.cmd-svc-icon svg { width: 32px; height: 32px; }
.cmd-svc-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.cmd-svc-desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.4;
}
.cmd-svc-check {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.cmd-svc-card input:checked ~ .cmd-svc-inner .cmd-svc-check,
.cmd-svc-card:has(input:checked) .cmd-svc-inner .cmd-svc-check {
  background: var(--brand);
  border-color: var(--brand);
}
.cmd-svc-check::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px,-1px);
  opacity: 0;
  transition: opacity .12s;
}
.cmd-svc-card input:checked ~ .cmd-svc-inner .cmd-svc-check::after,
.cmd-svc-card:has(input:checked) .cmd-svc-inner .cmd-svc-check::after {
  opacity: 1;
}

/* ============================================================
   COMMANDER — PANNEAUX DYNAMIQUES PAR SERVICE
   ============================================================ */
.cmd-panel {
  display: none;
}
.cmd-panel.active {
  display: block;
}

/* ============================================================
   INTERPRÉTARIAT — CALCULATOR INFO
   ============================================================ */
.calc-interp-info {
  background: var(--soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
}
.calc-interp-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: .85rem;
}
.calc-interp-info dt {
  color: var(--muted);
  font-weight: 600;
}
.calc-interp-info dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}
.calc-note {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}

/* ============================================================
   INTERPRÉTARIAT — CARDS RADIO (durée / type)
   ============================================================ */
.interp-card-radio,
.loc-card-radio {
  display: block;
  cursor: pointer;
}
.interp-card-radio input[type="radio"],
.loc-card-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.interp-card-inner,
.loc-card-inner {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  transition: border-color .18s, box-shadow .18s, background .18s;
  background: #fff;
}
.interp-card-radio input:checked ~ .interp-card-inner,
.interp-card-radio:has(input:checked) .interp-card-inner,
.loc-card-radio input:checked ~ .loc-card-inner,
.loc-card-radio:has(input:checked) .loc-card-inner {
  border-color: var(--accent);
  background: #fffbf2;
  box-shadow: 0 3px 14px rgba(226,156,45,.15);
}
.interp-card-label,
.loc-card-label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--brand-dark);
  margin-bottom: 4px;
}
.interp-card-desc,
.loc-card-desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.4;
}
.interp-card-rate,
.loc-card-rate {
  font-size: .82rem;
  color: var(--brand);
  font-weight: 600;
  margin-top: 8px;
}

/* ============================================================
   GRILLE CARTES SERVICE (devis page — 4 colonnes)
   ============================================================ */
.interp-cards-grid,
.loc-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 560px) {
  .interp-cards-grid,
  .loc-cards-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — DEVIS TABS
   ============================================================ */
@media (max-width: 700px) {
  .devis-service-tabs { flex-direction: column; }
  .devis-stab {
    border-bottom: none;
    border-left: 3px solid transparent;
    margin-bottom: 0;
    justify-content: flex-start;
    padding: 14px 20px;
  }
  .devis-stab.active {
    border-left-color: var(--accent);
    border-bottom: none;
  }
}

/* ============================================================
   NOS SOLUTIONS — Placeholder visuel des bandes de service
   Remplace les visuels CSS dédiés (visual-simultaneous, etc.)
   jusqu'à ce que de vraies images soient fournies.
   Même dimensions que .interpretariat-visual existant.
   TODO : remplacer .solutions-visual-placeholder par des
          classes d'images réelles quand les assets sont prêts.
   ============================================================ */
.solutions-visual-placeholder {
  /* Fond dégradé neutre reprenant les couleurs de la marque */
  background: linear-gradient(135deg, var(--brand-dark, #0d3f70) 0%, #1e56a0 60%, var(--accent, #e29c2d) 100%);
  /* Motif décoratif SVG inline (grille subtile) */
  background-image:
    linear-gradient(135deg, #0d3f70 0%, #1a4f8a 50%, #e29c2d33 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(255,255,255,.04) 28px,
      rgba(255,255,255,.04) 29px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 28px,
      rgba(255,255,255,.04) 28px,
      rgba(255,255,255,.04) 29px
    );
  border-radius: 12px;
  /* Dimensions identiques aux autres visuels interpretariat */
  min-height: 260px;
  flex-shrink: 0;
}

/* ── Suffixe animé dans les chiffres clés ("+", "h", "%") ── */
.num-suffix {
  font-style: normal;
  font-weight: 800;
}

/* ============================================================
   NOS SOLUTIONS — Nouvelles sections enrichies (Task #16)
   Ajout des grilles : forWho, processSteps, sectors
   ============================================================ */

/* ── Section "À qui s'adresse cette solution" ── */
.solutions-for-who {
  background: #fff;
}

/* Grille responsive des cartes d'audience — 4 colonnes sur desktop */
.solutions-for-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

/* Carte individuelle d'audience cible */
.solutions-for-who-card {
  background: #f8f9fb;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.solutions-for-who-card:hover {
  box-shadow: 0 8px 32px rgba(13,63,112,.12);
  transform: translateY(-4px);
}

/* Icône SVG de la carte */
.solutions-for-who-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0d3f70, #1a4f8a);
  border-radius: 14px;
  margin: 0 auto 1rem;
  color: #fff;
}
.solutions-for-who-icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/* Titre et texte de la carte */
.solutions-for-who-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-dark, #0d3f70);
  margin-bottom: .5rem;
}
.solutions-for-who-card p {
  font-size: .9rem;
  color: #444;
  line-height: 1.55;
  margin: 0;
}

/* ── Carte "Ce que nous prenons en charge" — checklist + bouton ──
   Ajoutée pour les nouveaux blocs des pages "Nos solutions" (checklist +
   4 points clés + "Pour quelles démarches ?"), sans modifier les styles
   existants ci-dessus. Réutilise .loc-why-checklist / .loc-check-item
   déjà définis plus haut dans ce fichier pour rester cohérente avec le
   reste du site. */
.solutions-checklist-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(13,63,112,.14);
  padding: 2rem;
}
.solutions-checklist-card h3 {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-dark, #0d3f70);
}
.solutions-checklist-card .btn {
  margin-top: 1.5rem;
  display: inline-flex;
}

/* ── Section "Comment ça marche" — étapes de processus ── */

/* Liste ordonnée réinitialisée (numérotation personnalisée via step.number) */
.solutions-process-steps {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  counter-reset: none;
}

/* Étape individuelle */
.solutions-process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

/* Numéro de l'étape — grand et stylisé en bleu/or */
.solutions-step-num {
  display: inline-block;
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent, #e29c2d);
  line-height: 1;
  margin-bottom: .75rem;
  font-family: var(--font-head, inherit);
  letter-spacing: -1px;
}

/* Corps textuel de l'étape */
.solutions-step-body h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.solutions-step-body p {
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 0 .4rem;
}

/* Détail optionnel : info complémentaire plus petite */
.solutions-step-detail {
  color: rgba(255,255,255,.6) !important;
  font-size: .82rem !important;
  font-style: italic;
}

/* Séparateur visuel entre étapes (desktop uniquement) */
@media (min-width: 768px) {
  .solutions-process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: rgba(226,156,45,.4);
  }
}

/* ── Section "Domaines couverts" — tags sectoriels ── */

/* Grille flex de tags — disposition fluide */
.solutions-sectors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1rem;
}

/* Tag individuel — pill arrondie en couleurs de marque */
.solutions-sector-tag {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1.1rem;
  background: #fff;
  border: 2px solid var(--brand-dark, #0d3f70);
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--brand-dark, #0d3f70);
  transition: background .2s ease, color .2s ease;
}
.solutions-sector-tag:hover {
  background: var(--brand-dark, #0d3f70);
  color: #fff;
}

/* ── Responsive mobile ──────────────────────────────── */
@media (max-width: 600px) {
  /* Empilage vertical des étapes de processus sur mobile */
  .solutions-process-steps {
    grid-template-columns: 1fr;
  }
  /* Suppression du séparateur horizontal sur mobile */
  .solutions-process-step::after {
    display: none !important;
  }
  /* Grille forWho : 2 colonnes sur mobile */
  .solutions-for-who-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── Icônes marques paiement (Visa, Mastercard, PayPal, Mobile Money) ──── */
/* Conteneur des logos inline dans les cartes de paiement */
.brand-logos {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}
/* SVG logo Visa */
.brand-visa {
  flex-shrink: 0;
}
/* SVG logo Mastercard */
.brand-mc {
  flex-shrink: 0;
}
/* Badge opérateur Mobile Money (rond coloré avec initiale) */
.brand-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
}
/* Icône paiement : hauteur fixe pour aligner tous les logos */
.payment-card-icon {
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Icônes urgence SVG (Standard / Express) ────────────────────────────── */
.urgency-card {
  cursor: pointer;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, background .2s;
  background: #fff;
}
.urgency-card:has(input:checked) {
  border-color: var(--accent, #194c8f);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(25,76,143,.12);
}
.urgency-card input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* Badge +20% Express */
.urg-badge-plus {
  display: inline-block;
  background: #fff3e0;
  color: #b45309;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .72rem;
  font-weight: 700;
  margin-top: 4px;
  font-style: normal;
}

/* ─── Bouton formulaire devis (ENVOYER MA DEMANDE) ──────────────────────── */
.devis-submit-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGO ORNITRANSLATE — styles pour le logo image (header + footer)
   Remplacent les anciens styles de logo texte (.brand-mark, .footer-symbol,
   .footer-logo-text) qui ne sont plus utilisés après le rebranding.
══════════════════════════════════════════════════════════════════════════ */

/* ── Logo dans le header ────────────────────────────────────────────────── */
/* Le lien .brand.brand-logo conserve le display flex du .brand existant.
   On masque le fond bleu et le text-decoration du lien original. */
.brand.brand-logo {
  gap: 0;                  /* Pas d'espace — le logo image inclut déjà tout */
  background: transparent;
}

/* L'image du logo dans le header */
.brand-logo-img {
  display: block;
  height: 46px;            /* Hauteur fixe — la largeur s'adapte automatiquement */
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
/* Slogan sous le logo dans l'en-tête — même texte/style que .footer-tagline.
   .brand-logo passe en colonne : le logo n'est pas redimensionné/altéré, le
   slogan vient simplement se placer en dessous. Masqué sur mobile. */
.brand-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.brand-tagline {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  color: #f0a154;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
@media (max-width: 860px) {
  .brand-tagline { display: none; }
}

/* ── Logo dans le footer ─────────────────────────────────────────────────── */
.footer-logo.footer-logo-img-wrap {
  display: flex !important; /* Remplace inline-grid du .footer-logo d'origine */
  align-items: center;
  gap: 0;
  width: fit-content;
}

/* L'image du logo dans le footer */
.footer-logo-img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* Légère ombre pour lisibilité sur fond sombre du footer */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

/* ── Masquer les anciens éléments de logo texte s'ils subsistent ─────────── */
/* Sécurité : si une vue n'a pas encore été mise à jour */
.brand-mark,
.footer-symbol,
.footer-logo-text {
  display: none !important;
}

/* ── Tagline footer — mise à jour pour le slogan OrniTranslate ─────────── */
/* "Bridging Languages, Connecting People." — en anglais, italique, orange */
.footer-tagline {
  font-style: italic;
}