/* ==========================================================================
   EXIGENCES GROUPE — COMPOSANTS
   Complète tokens.css / main.css / sections.css.
   Tout est en flex ou en grille régulière : chaque bloc se reconstruit
   avec un conteneur Elementor + des colonnes en pourcentage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   UTILITAIRES ÉDITORIAUX
   -------------------------------------------------------------------------- */
.section-header--left {
  text-align: left;
  max-width: 62ch;
  margin-inline: 0;
}
.section-header--left p {
  margin-inline: 0;
}
.section-header--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  text-align: left;
  margin-bottom: var(--space-7);
}
.section-header--split > div {
  max-width: 62ch;
}
.section-header--split p {
  margin-inline: 0;
}

.rule-gold {
  width: 56px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-bottom: var(--space-5);
}
.section-header .rule-gold {
  margin-inline: auto;
}
.section-header--left .rule-gold,
.section-header--split .rule-gold {
  margin-inline: 0;
}

/* Note de transparence : sert à signaler une donnée à confirmer.
   Jamais décorative — c'est un engagement éditorial du projet. */
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--eg-ink-800);
}
.notice svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-warning);
  margin-top: 2px;
}
.notice--muted {
  background: var(--color-bg-alt);
  border-left-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
.chip-todo {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  vertical-align: middle;
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
   HERO — traitement d'image et compléments
   Étalonnage discret : l'image est reliée à la palette (bleu-nuit + or)
   sans passer en duotone total, qui écraserait les carnations.
   -------------------------------------------------------------------------- */
.hero__visual {
  isolation: isolate;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}
.hero__visual img {
  filter: saturate(.8) contrast(1.06) brightness(.96);
}
.hero__visual::after {
  background:
    linear-gradient(155deg,
      rgba(13, 21, 35, .62) 0%,
      rgba(13, 21, 35, .05) 45%,
      rgba(201, 153, 47, .42) 100%);
  mix-blend-mode: soft-light;
}
/* Filet doré décalé — cadre le visuel sans ombre lourde */
.hero__visual-wrap {
  position: relative;
}
.hero__visual-wrap::before {
  content: '';
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 62%;
  border: 1px solid rgba(201, 153, 47, .45);
  border-radius: var(--radius-xl);
  z-index: 0;
  pointer-events: none;
}

.hero__badge {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 21, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hero__badge-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--eg-gold-400);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}
.hero__badge-label {
  font-size: var(--text-xs);
  color: var(--eg-ink-200);
  line-height: var(--leading-snug);
}

/* Rappel des quatre pôles, dès le hero */
.hero__poles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__pole {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  /* pas de text-transform : la casse ExiTech / ExiJob fait partie du nom
     de marque, et le brief exige d'assainir la nomenclature, pas de l'écraser */
  color: var(--eg-ink-300);
  transition: color var(--dur-base) var(--ease-out);
}
.hero__pole:hover {
  color: var(--eg-white);
}
.hero__pole::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pole-color, var(--color-accent));
  flex-shrink: 0;
}

/* Indicateur de défilement */
.hero__scroll {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--eg-ink-400);
  transition: color var(--dur-base) var(--ease-out);
}
.hero__scroll:hover {
  color: var(--eg-gold-400);
}
.hero__scroll svg {
  width: 16px;
  height: 16px;
  animation: nudge 2.4s var(--ease-inout) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg { animation: none; }
}

/* --------------------------------------------------------------------------
   HEADER — variante fond opaque (pages intérieures)
   -------------------------------------------------------------------------- */
.header--solid {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
.header--solid .header__menu a,
.header--solid .hamburger span {
  color: var(--color-text);
}
.header--solid .hamburger span {
  background: var(--color-text);
}
.header--solid .header__logo--white { display: none; }
.header--solid .header__logo--dark  { display: block; }

/* État « menu mobile ouvert » : le panneau (.mobile-nav) est posé au-dessus
   de l'en-tête. Sans ce relèvement, la croix de fermeture serait recouverte
   par le panneau et le menu ne pourrait plus être refermé au doigt.
   On aligne aussi le fond et le logo sur ceux du panneau. */
.header.nav-open {
  z-index: calc(var(--z-menu) + 1);
  background: var(--color-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.header.nav-open .header__logo--white { display: none; }
.header.nav-open .header__logo--dark  { display: block; }
.header.nav-open .hamburger span { background: var(--color-text); }

/* Mega menu 2 × 2 — quatre pôles, texte lisible */
.mega-menu--2 {
  grid-template-columns: repeat(2, 1fr);
  min-width: 540px;
}
.mega-menu__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.mega-menu__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pole-color, var(--color-accent));
  flex-shrink: 0;
  margin-top: 7px;
}
.mega-menu__foot {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.mega-menu__foot a {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SPLIT — bloc texte / image (À propos, positionnement, pôles)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split--text-wide { grid-template-columns: 1.15fr 0.85fr; }

.split__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  isolation: isolate;
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
}
.split__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(13, 21, 35, .30), transparent 55%, rgba(201, 153, 47, .26));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.split__media--tall { aspect-ratio: 3/4; }

.split__body h2 {
  margin-bottom: var(--space-5);
}
.split__body > p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}
.split__body > p:last-of-type { margin-bottom: var(--space-6); }

/* Carte flottante posée sur l'image */
.split__float {
  position: absolute;
  z-index: 2;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(7, 12, 21, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--eg-ink-200);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.split__float strong {
  display: block;
  font-family: var(--font-display);
  color: var(--eg-white);
  font-size: var(--text-base);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   VALEURS — 3 blocs sobres
   -------------------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.value {
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-accent);
}
.value h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.value p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   DUO — deux blocs thématiques côte à côte (pages pôles, mission…)
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .duo { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   CHECK-LIST — liste avec coche doré (services, atouts)
   Le caractère ✓ vit dans le CSS ; Elementor peut aussi le porter dans le
   HTML (préfixe de texte) si la règle n'est pas reprise.
   -------------------------------------------------------------------------- */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.check-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}
/* Sur fond sombre, le texte remonte en encre claire */
.section--dark .check-list li { color: var(--eg-ink-300); }

/* --------------------------------------------------------------------------
   ÉQUIPE
   -------------------------------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.member__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-bg-alt);
  isolation: isolate;
}
.member__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.04);
  transition: filter var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.member:hover .member__media img {
  filter: grayscale(0) contrast(1.02);
  transform: scale(1.04);
}
.member__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
}
.member__role {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   ARTICLE — variante sans image (aucune illustration inventée)
   -------------------------------------------------------------------------- */
.article--text {
  padding: var(--space-6);
  justify-content: space-between;
}
.article--text .article__date {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--eg-ink-200);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--space-5);
  transition: color var(--dur-base) var(--ease-out);
}
.article--text:hover .article__date {
  color: var(--color-accent);
}
.article--text .article__title {
  font-size: var(--text-xl);
}

/* --------------------------------------------------------------------------
   SECTION ÉPINGLÉE — pur CSS (position: sticky), zéro JS
   Un conteneur haut, un panneau collant : le contenu défile derrière.
   -------------------------------------------------------------------------- */
.pin {
  position: relative;
}
.pin__viewport {
  position: sticky;
  top: 96px;
}

/* --------------------------------------------------------------------------
   FORMULAIRES
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field--full { grid-column: 1 / -1; }

.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.label .req { color: var(--color-error); }
.hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.8em 1em;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--eg-ink-400); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 153, 47, .18);
}
.textarea { min-height: 148px; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B7C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 18px;
  padding-right: 2.6em;
}

.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked {
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--color-accent);
}
.check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--color-surface);
}

/* Choix segmentés — qualification de l'intention de contact */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.choice {
  position: relative;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.choice span {
  display: inline-block;
  padding: 0.6em 1.1em;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.choice input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.choice input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: var(--weight-medium);
}
.field--error .input,
.field--error .textarea,
.field--error .select {
  border-color: var(--color-error);
}
.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.form-status--ok    { background: var(--color-success-bg); color: var(--color-success); }
.form-status--error { background: var(--color-error-bg);   color: var(--color-error); }

/* Newsletter en pied de page */
.newsletter {
  display: flex;
  /* wrap actif uniquement pour que le message d'erreur puisse descendre seul
     sur la ligne suivante (voir .newsletter .field__error) */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.newsletter .input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: var(--eg-white);
  /* base 0 + min-width 0 : le champ absorbe la place restante et ne pousse
     jamais le bouton à la ligne, quelle que soit la largeur de la colonne */
  flex: 1 1 0;
  min-width: 0;
}
.newsletter .input::placeholder { color: var(--eg-ink-500); }
.newsletter .btn { flex-shrink: 0; }
/* Le message d'erreur est injecté comme 3ᵉ enfant flex du formulaire (il n'y a
   pas de conteneur .field ici). Sans « 100 % de base », son apparition
   rétrécissait le champ et le bouton : la ligne se réorganisait sous les yeux
   de l'internaute. Il occupe donc sa propre ligne. */
.newsletter .field__error {
  flex: 1 0 100%;
  /* #B3261E est illisible sur le fond ink-950 du pied de page */
  color: var(--color-error-inverse);
}

/* --------------------------------------------------------------------------
   FIL D'ARIANE
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--color-border-strong);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb [aria-current] { color: var(--color-text); font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   HERO DE PAGE INTÉRIEURE
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--space-10) + 24px);
  padding-bottom: var(--section-y-tight);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 80% 20%, rgba(201, 153, 47, .16), transparent 65%);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 72ch;
}
.page-hero .breadcrumb {
  color: var(--eg-ink-400);
  margin-bottom: var(--space-5);
}
.page-hero .breadcrumb [aria-current] { color: var(--eg-ink-200); }
.page-hero .breadcrumb li:not(:last-child)::after { color: var(--eg-ink-600); }
.page-hero h1 {
  font-size: var(--text-5xl);
  color: var(--eg-white);
  margin-bottom: var(--space-5);
}
.page-hero__lead {
  font-size: var(--text-lg);
  color: var(--eg-ink-300);
  line-height: var(--leading-relaxed);
}
/* Deux blocs thématiques posés sous le lead (page À propos) */
.page-hero__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  max-width: 880px;
}
.page-hero__cols h2 {
  font-size: var(--text-xl);
  color: var(--eg-gold-400);
  margin-bottom: var(--space-3);
}
.page-hero__cols p {
  color: var(--eg-ink-300);
  line-height: var(--leading-relaxed);
  font-size: var(--text-sm);
}
@media (max-width: 768px) {
  .page-hero__cols { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --------------------------------------------------------------------------
   FAQ — <details> natif
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--dur-base) var(--ease-out);
}
.faq details[open] { border-color: var(--color-accent); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   PROSE — corps d'article
   -------------------------------------------------------------------------- */
.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-3xl); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-xl);  margin-top: var(--space-7); }
.prose p, .prose li {
  color: var(--eg-ink-700);
  line-height: var(--leading-relaxed);
}
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li { margin-top: var(--space-2); list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.prose img { border-radius: var(--radius-lg); }

/* Sous-liste des pôles dans la navigation mobile */
.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  margin: calc(var(--space-2) * -1) 0 var(--space-2);
}
.mobile-nav__sub a {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-bottom: none;
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
}
.mobile-nav__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mobile-nav__foot a:not(.btn) {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border-bottom: none;
  padding: 0;
  color: var(--color-text-muted);
}
.mobile-nav__foot .btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border-bottom: none;
  width: 100%;
}

/* --------------------------------------------------------------------------
   LECTEUR VIDÉO EN LIGHTBOX
   Injecté par initVideo() au clic. Aucune requête YouTube avant l'ouverture.
   -------------------------------------------------------------------------- */
.videobox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(7, 12, 21, .94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  animation: videobox-in var(--dur-base) var(--ease-out);
}
@keyframes videobox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.videobox__topbar {
  width: min(100%, 1100px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #0f0f0f;   /* la barre sombre type YouTube */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.videobox__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--eg-white);
  line-height: var(--leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.videobox__yt {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--eg-white);
  background: #c4302b;   /* rouge YouTube */
  padding: 7px 14px;
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.videobox__yt:hover {
  background: #b12a26;
  transform: translateY(-1px);
}
.videobox__yt svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.videobox__frame {
  width: min(100%, 1100px);
  aspect-ratio: 16/9;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.videobox__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.videobox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;   /* cible tactile ≥ 44 px : critère WCAG 2.2 « Target Size » */
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-inverse);
  background: rgba(255, 255, 255, .08);
  color: var(--eg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.videobox__close:hover {
  background: rgba(255, 255, 255, .18);
}
.videobox__close svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .videobox { animation: none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mega-menu--2 { min-width: 460px; }
  .split,
  .form-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .team   { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: 1fr; gap: var(--space-6); }
  .section-header--split { flex-direction: column; align-items: flex-start; }
  .hero__visual-wrap::before { display: none; }
}

@media (max-width: 768px) {
  .hero__poles { justify-content: center; gap: var(--space-3) var(--space-4); }
  .hero__scroll { display: none; }
  .hero__badge { position: static; margin: var(--space-4) 0 0; }
  .hero__visual { box-shadow: var(--shadow-lg); }
  .page-hero h1 { font-size: var(--text-4xl); }
  .newsletter { flex-direction: column; }
  .newsletter .btn { width: 100%; }
  /* En colonne, flex-basis porte sur la hauteur : les bases posées pour la
     disposition en ligne (1 1 0 et 1 0 100%) étireraient les éléments. */
  .newsletter .input,
  .newsletter .field__error { flex: 0 0 auto; }
  .videobox__close { top: var(--space-3); right: var(--space-3); }
}

@media (max-width: 480px) {
  .team { grid-template-columns: 1fr; }
  .hero__badge { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}