: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;
  padding-top: 1.2rem !important;

}

.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;
  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;
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  color: #fff;
  text-transform: none;
  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;
}

.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;
  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: 2px;
  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;
}

/* Doublon du bouton "Devis en ligne" : la version mobile ne doit apparaître que sous 768px. */
.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;
}

.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;
}

.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;
}

.review h3 {
  margin: 14px 0 6px;
  color: #071a32;
  font-size: 16px;
}

.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: Arial, Helvetica, sans-serif;
  font-size: clamp(58px, 8vw, 92px);
  line-height: 1;
  font-weight: 900;
  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-size: 18px;
  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: 22px 64px 22px 30px;
  border: 2px solid rgba(26, 99, 166, .18);
  border-left: 8px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-dark);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 900;
  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-size: 17px;
  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;
  background-color: whitesmoke;
  border-radius: 8px;
  max-width: 300px;
  height: 70px;
}

.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;
  min-height: 430px;
  display: flex;
  align-items: center;
  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: 38px;
  background: #fff;
  border-left: 6px solid var(--accent);
  box-shadow: var(--shadow);
}

.translation-final-cta h2 {
  margin-bottom: 12px;
}

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.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;
  color: var(--brand);
  font-weight: 800;
}

/* 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 {
  min-height: 560px;
  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;
}

.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);
}

.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 OrniTranslate" */
.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 OrniTranslate 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 OrniTranslate 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; width: 100%; margin-top: 10px; }
  .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;
  }

  .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 OrniTranslate : 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: 410px;
  }

  .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%;
  }

  .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: 365px;
  }

  .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;
}

/* 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;
}

.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;
}

/* ==========================================================
   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;
}

/* 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);
}

/* 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%);
}

/* Badge "Votre partenaire linguistique de confiance" */
.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 18px;
  border-radius: 4px;
  max-width: 380px;
}

.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;
}

.contact-hero-badge-icon svg {
  stroke: var(--accent);
}

.contact-hero-badge strong {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 3px;
}

.contact-hero-badge span {
  font-size: .78rem;
  color: rgba(255, 255, 255, .72);
}

.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);
}

/* 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 {
  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%;
  }
}

/* ====================================================================
   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 {
  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;
}

.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 */
@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 {
  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;
}

/* 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;
}

/* 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);
}

/* 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-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 {
  float: left;
  gap: 0;
  /* Pas d'espace — le logo image inclut déjà tout */
  background: whitesmoke;
  border-radius: 5px;
  text-decoration: none;
}

/* L'image du logo dans le header */
.brand-logo-img {
  display: block;
  height: 70px;
  /* Hauteur fixe — la largeur s'adapte automatiquement */
  width: auto;
  max-width: 300px;
  object-fit: contain;
  /* Pas de filter blanc : le logo a ses propres couleurs (orange + vert) */
}

/* ── 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;
}