/* ==========================================================================
   Sotumec — Étape 3 : styles des pages internes
   Le groupe / Activités / Recrutement / Actualités / Contact / Légal / 404
   ========================================================================== */

/* --------------------------------------------------------------------------
   LE GROUPE
   -------------------------------------------------------------------------- */

.sotumec-hero-groupe {
  position: relative;
  overflow: hidden;
  color: var(--sotumec-white);
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  background: var(--gradient-dark);
}

.sotumec-hero-groupe__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sotumec-hero-groupe__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Voile sombre semi-transparent pour lisibilité du titre sur l'illustration */
.sotumec-hero-groupe__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(20, 28, 36, 0.82) 0%, rgba(20, 28, 36, 0.55) 48%, rgba(20, 28, 36, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 28, 36, 0.25) 0%, rgba(20, 28, 36, 0.55) 100%);
  pointer-events: none;
}

.sotumec-hero-groupe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--texture-grain);
  opacity: 0.35;
  pointer-events: none;
}

.sotumec-hero-groupe__inner {
  display: block;
  padding-block: var(--sp-24) var(--sp-20);
  position: relative;
  z-index: 3;
  width: 100%;
}

.sotumec-hero-groupe__content {
  max-width: 720px;
}

.sotumec-hero-groupe__title {
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  margin: var(--sp-4) 0;
  color: var(--sotumec-white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.sotumec-hero-groupe__lead {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.9);
  max-width: 520px;
  margin-bottom: var(--sp-8);
}

.sotumec-hero-groupe__kpis {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.sotumec-hero-groupe__kpis strong {
  display: block;
  font-size: 2.25rem;
  font-weight: var(--fw-extrabold);
  color: var(--sotumec-white);
}

.sotumec-hero-groupe__kpis span {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Variante grille (Nos activités) : 4 chiffres alignés sur des colonnes égales
   au lieu du flex-wrap, qui décalait la 2e rangée selon la longueur des libellés. */
.sotumec-hero-groupe__kpis--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
  max-width: 560px;
}

.sotumec-hero-groupe__kpis--grid > div {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--color-primary);
}

.sotumec-hero-groupe__kpis--grid strong {
  line-height: 1.1;
  margin-bottom: var(--sp-1);
}

.sotumec-hero-groupe__kpis--grid span {
  display: block;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .sotumec-hero-groupe {
    min-height: min(70vh, 560px);
  }

  .sotumec-hero-groupe__inner {
    padding-block: var(--sp-16);
  }

  .sotumec-hero-groupe__overlay {
    background:
      linear-gradient(180deg, rgba(20, 28, 36, 0.45) 0%, rgba(20, 28, 36, 0.78) 55%, rgba(20, 28, 36, 0.88) 100%);
  }
}

/* --------------------------------------------------------------------------
   HERO COMMUN DES PAGES INTÉRIEURES (révision 01/10/2026)
   template-parts/common/page-hero.php : Le groupe, Nos activités, activités,
   Recrutement, Contact, Actualités, catégories, recherche, pages légales.
   Même hauteur, même titre, contenu toujours aligné à gauche.
   -------------------------------------------------------------------------- */
.sotumec-hero-groupe__title,
.sotumec-hero-groupe__title--long {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.08;
  max-width: 18ch;
}

.sotumec-hero-groupe__content {
  max-width: 760px;
}

.sotumec-hero-groupe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-hero-groupe__eyebrow-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.sotumec-hero-groupe__eyebrow-icon svg {
  width: 100%;
  height: 100%;
}

.sotumec-hero-groupe__lead {
  max-width: 600px;
}

.sotumec-hero-groupe__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-8);
}

.sotumec-hero-groupe__keywords span {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-small);
  color: var(--sotumec-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-4);
}

.sotumec-hero-groupe__kpis--grid {
  grid-template-columns: repeat(var(--kpi-cols, 2), minmax(0, 1fr));
  max-width: 600px;
}

.sotumec-hero-groupe__kpis + .sotumec-hero-groupe__actions {
  margin-top: var(--sp-8);
}

.sotumec-hero-groupe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.sotumec-hero-groupe__actions .sotumec-btn--ghost {
  color: var(--sotumec-white);
  border-color: rgba(255, 255, 255, 0.55);
}

.sotumec-hero-groupe__actions .sotumec-btn--ghost:hover,
.sotumec-hero-groupe__actions .sotumec-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--sotumec-white);
}

.sotumec-hero-groupe__actions .sotumec-btn svg {
  width: 18px;
  height: 18px;
}

/* Sujet centré (photo d'archives Le groupe) : on agrandit depuis la gauche
   pour faire glisser l'équipe dans la moitié droite, hors du titre. */
@media (min-width: 992px) {
  .sotumec-hero-groupe--shift .sotumec-hero-groupe__bg img {
    transform: scale(1.4);
    transform-origin: left center;
  }
}

/* Hauteur réduite : actualités, catégories, recherche, pages légales. */
.sotumec-hero-groupe--compact {
  min-height: min(52vh, 460px);
}

/* Sans photo : dégradé sombre seul (le voile photo n'a plus d'objet). */
.sotumec-hero-groupe--plain .sotumec-hero-groupe__overlay {
  display: none;
}

@media (max-width: 767px) {
  .sotumec-hero-groupe--compact {
    min-height: 0;
  }

  .sotumec-hero-groupe__actions .sotumec-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .sotumec-hero-groupe__kpis--grid {
    gap: var(--sp-4);
  }

  .sotumec-hero-groupe__kpis--grid > div {
    padding-left: var(--sp-3);
    min-width: 0;
  }

  .sotumec-hero-groupe__kpis--grid strong {
    font-size: 1.75rem;
  }

  .sotumec-hero-groupe__kpis--grid span {
    font-size: 0.6875rem;
    letter-spacing: 0;
  }

  /* Audit 02/10/2026 : colonnes égales trop étroites à 3 chiffres (Recrutement,
     Le groupe) -> « COLLABORATE/URS » coupé en plein mot. Colonnes calées sur
     leur contenu : les libellés ne se coupent plus qu'entre deux mots. */
  .sotumec-hero-groupe__kpis--grid {
    grid-template-columns: repeat(var(--kpi-cols, 2), auto);
    justify-content: start;
    column-gap: var(--sp-5);
  }

  /* 3 chiffres : sur les écrans les plus étroits (320px), le 3e passe à la
     ligne plutôt que de déborder. */
  .sotumec-hero-groupe__kpis--grid:has(> div:first-child:nth-last-child(3)) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   Le groupe — « Notre histoire, nos sociétés » (v3, 07/10/2026)
   Frise verticale : axe central sur desktop (cartes en quinconce de part et
   d'autre), axe à gauche sous 992px. Chaque société du groupe a sa carte
   (logo cliquable, spécialité, lien) ; les sociétés fondues dans Sotumec
   et les autres étapes ont une carte claire, sans logo, pour ne pas les
   confondre avec les sociétés du groupe. Panneau « Aujourd'hui » en fin de
   frise : logos de toutes les sociétés, chacun renvoie à sa carte.
   -------------------------------------------------------------------------- */
.sotumec-histoire {
  --histoire-axe: 128px;
  background: var(--color-bg-alt);
}

.sotumec-histoire .sotumec-section-head {
  max-width: 720px;
}

.sotumec-histoire .sotumec-section-intro {
  margin-bottom: var(--sp-6);
}

/* Légende : pastille pleine = société du groupe, pastille claire = intégrée */
.sotumec-histoire__legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
}

.sotumec-histoire__legende li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-histoire__puce {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sotumec-histoire__puce--societe {
  background: var(--color-primary);
}

.sotumec-histoire__puce--integration {
  background: var(--sotumec-white);
  border: 2px solid var(--color-secondary);
}

/* Frise ------------------------------------------------------------------ */
.sotumec-histoire__frise {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--histoire-axe) minmax(0, 1fr);
  grid-auto-rows: minmax(var(--sp-16), auto);
}

/* L'axe : prolongé jusqu'au panneau « Aujourd'hui ». */
.sotumec-histoire__frise::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--sp-16));
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0, var(--color-primary) var(--sp-8), var(--color-primary) 100%);
  opacity: 0.35;
}

.sotumec-histoire__item {
  position: relative;
  margin-bottom: var(--sp-8);
  scroll-margin-top: calc(var(--header-height) + var(--sp-6));
}

.sotumec-histoire__item:nth-child(odd) {
  grid-column: 1;
}

.sotumec-histoire__item:nth-child(even) {
  grid-column: 3;
}

/* Année : pastille posée sur l'axe, reliée à la carte par un trait. */
.sotumec-histoire__annee {
  position: absolute;
  top: var(--sp-6);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-bg-alt);
  color: var(--sotumec-white);
  font-size: 1.0625rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.4;
  white-space: nowrap;
}

.sotumec-histoire__item:nth-child(odd) .sotumec-histoire__annee {
  left: calc(100% + var(--histoire-axe) / 2);
  transform: translateX(-50%);
}

.sotumec-histoire__item:nth-child(even) .sotumec-histoire__annee {
  right: calc(100% + var(--histoire-axe) / 2);
  transform: translateX(50%);
}

.sotumec-histoire__item::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-6) + 0.85rem);
  width: calc(var(--histoire-axe) / 2);
  height: 2px;
  background: var(--color-primary);
  opacity: 0.35;
}

.sotumec-histoire__item:nth-child(odd)::before {
  left: 100%;
}

.sotumec-histoire__item:nth-child(even)::before {
  right: 100%;
}

.sotumec-histoire__item--integration .sotumec-histoire__annee,
.sotumec-histoire__item--jalon .sotumec-histoire__annee {
  background: var(--sotumec-white);
  border-color: var(--color-secondary);
  color: var(--color-secondary-hover);
}

.sotumec-histoire__item--integration::before,
.sotumec-histoire__item--jalon::before {
  background: var(--color-secondary);
}

/* Cartes ----------------------------------------------------------------- */
.sotumec-histoire__card {
  position: relative;
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), outline-color var(--dur) var(--ease);
  outline: 3px solid transparent;
  outline-offset: 4px;
}

.sotumec-histoire__item--societe .sotumec-histoire__card {
  border-top: 4px solid var(--color-primary);
}

.sotumec-histoire__item--societe .sotumec-histoire__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.sotumec-histoire__item--integration .sotumec-histoire__card,
.sotumec-histoire__item--jalon .sotumec-histoire__card {
  background: var(--color-bg-warm);
  box-shadow: none;
}

/* Mise en avant après un clic dans le panneau « Aujourd'hui ». */
.sotumec-histoire__item.is-highlighted .sotumec-histoire__card {
  outline-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.sotumec-histoire__card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.sotumec-histoire__card-titles {
  flex: 1;
  min-width: 0;
}

.sotumec-histoire__card-titles .sotumec-histoire__tag {
  margin-bottom: var(--sp-2);
}

/* Logo dans un cadre : les logos normalisés (canevas 480x192 à surface
   égale) gardent ainsi le même poids visuel d'une carte à l'autre. */
.sotumec-histoire__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 150px;
  height: 72px;
  padding: var(--sp-2);
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.sotumec-histoire__logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

a.sotumec-histoire__logo:hover,
a.sotumec-histoire__logo:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}

.sotumec-histoire__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.3;
  text-align: center;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
}

.sotumec-histoire__item--integration .sotumec-histoire__tag {
  color: var(--color-secondary-hover);
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
}

.sotumec-histoire__titre {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 0 0 var(--sp-1);
  color: var(--color-text);
}

.sotumec-histoire__meta {
  font-size: 0.8125rem;
  font-weight: var(--fw-semi);
  line-height: 1.4;
  color: var(--color-primary);
  margin: var(--sp-1) 0 0;
}

.sotumec-histoire__texte {
  font-size: 0.9375rem;
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  margin: 0;
}

.sotumec-histoire__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-decoration: none;
}

.sotumec-histoire__lien svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease);
}

.sotumec-histoire__lien[target="_blank"] svg {
  transform: rotate(-45deg);
}

.sotumec-histoire__lien:hover {
  color: var(--color-primary-hover);
}

.sotumec-histoire__lien:hover svg {
  transform: translateX(3px);
}

.sotumec-histoire__lien[target="_blank"]:hover svg {
  transform: rotate(-45deg) translateX(3px);
}

/* Panneau « Aujourd'hui » ------------------------------------------------ */
.sotumec-histoire__aujourdhui {
  position: relative;
  margin-top: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sotumec-histoire__annee--aujourdhui {
  position: relative;
  top: auto;
  margin-bottom: calc(-1 * var(--sp-5));
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-h4);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.sotumec-histoire__panel {
  width: 100%;
  background: var(--gradient-blue-anthracite);
  color: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-10) var(--sp-10);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.sotumec-histoire__panel h3 {
  color: var(--sotumec-white);
  font-size: var(--fs-h3);
  margin: 0 0 var(--sp-2);
}

.sotumec-histoire__panel > p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto var(--sp-8);
  max-width: 560px;
}

.sotumec-histoire__societes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.sotumec-histoire__societes li {
  flex: 0 1 calc((100% - 4 * var(--sp-4)) / 5);
  min-width: 0;
  display: flex;
}

.sotumec-histoire__societe {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  background: var(--sotumec-white);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

a.sotumec-histoire__societe:hover,
a.sotumec-histoire__societe:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.sotumec-histoire__societe-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 100%;
}

.sotumec-histoire__societe-logo img {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sotumec-histoire__societe-specialite {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  flex-grow: 1;
}

.sotumec-histoire__societe-annee {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--sp-3);
  margin-top: var(--sp-1);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  font-weight: var(--fw-semi);
  line-height: 1.3;
  color: var(--color-text-muted);
}

.sotumec-histoire__societe-annee strong {
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
}

/* Tablette large : axe plus étroit. */
@media (max-width: 1199px) and (min-width: 992px) {
  .sotumec-histoire {
    --histoire-axe: 104px;
  }

  .sotumec-histoire__card {
    padding-inline: var(--sp-6);
  }

  .sotumec-histoire__card-head {
    gap: var(--sp-4);
  }

  .sotumec-histoire__logo {
    width: 124px;
    height: 64px;
  }

  .sotumec-histoire__societes li {
    flex-basis: calc((100% - 3 * var(--sp-4)) / 4);
  }
}

/* Mobile / tablette : axe à gauche, cartes empilées dans l'ordre. ---------- */
@media (max-width: 991px) {
  .sotumec-histoire__frise {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    padding-left: var(--sp-8);
  }

  .sotumec-histoire__frise::before {
    left: 9px;
    transform: none;
    bottom: 0;
  }

  .sotumec-histoire__item {
    margin-bottom: 0;
  }

  /* Pastille sur l'axe + année au-dessus de la carte. */
  .sotumec-histoire__item::before {
    top: 7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    opacity: 1;
    border: 3px solid var(--color-bg-alt);
    box-sizing: content-box;
  }

  .sotumec-histoire__item:nth-child(odd)::before,
  .sotumec-histoire__item:nth-child(even)::before {
    left: calc(-1 * var(--sp-8) + 10px - 11px);
    right: auto;
  }

  .sotumec-histoire__item--integration::before,
  .sotumec-histoire__item--jalon::before {
    background: var(--sotumec-white);
    border-color: var(--color-secondary);
    border-width: 2px;
    width: 14px;
    height: 14px;
    left: calc(-1 * var(--sp-8) + 10px - 9px) !important;
    top: 8px;
  }

  .sotumec-histoire__annee,
  .sotumec-histoire__item:nth-child(odd) .sotumec-histoire__annee,
  .sotumec-histoire__item:nth-child(even) .sotumec-histoire__annee {
    position: static;
    transform: none;
    box-shadow: none;
    margin-bottom: var(--sp-3);
    min-width: 0;
  }

  .sotumec-histoire__aujourdhui {
    margin-top: var(--sp-12);
  }

  .sotumec-histoire__societes li {
    flex-basis: calc((100% - 2 * var(--sp-4)) / 3);
  }
}

@media (max-width: 575px) {
  .sotumec-histoire__frise {
    padding-left: var(--sp-6);
  }

  .sotumec-histoire__item:nth-child(odd)::before,
  .sotumec-histoire__item:nth-child(even)::before {
    left: calc(-1 * var(--sp-6) + 10px - 11px);
  }

  .sotumec-histoire__item--integration::before,
  .sotumec-histoire__item--jalon::before {
    left: calc(-1 * var(--sp-6) + 10px - 9px) !important;
  }

  .sotumec-histoire__card {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
  }

  .sotumec-histoire__card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .sotumec-histoire__logo {
    width: 150px;
    height: 64px;
  }

  .sotumec-histoire__panel {
    padding: var(--sp-10) var(--sp-4) var(--sp-6);
  }

  .sotumec-histoire__societes {
    gap: var(--sp-3);
  }

  .sotumec-histoire__societes li {
    flex-basis: calc((100% - var(--sp-3)) / 2);
  }

  .sotumec-histoire__societe {
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
  }

  .sotumec-histoire__societe-logo,
  .sotumec-histoire__societe-logo img {
    height: 44px;
  }
}

/* Vision dirigeant */
.sotumec-vision-dirigeant__grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: var(--sp-12);
  align-items: center;
}

.sotumec-vision-dirigeant__quote svg {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  opacity: 0.4;
  margin-bottom: var(--sp-4);
}

.sotumec-vision-dirigeant__quote p {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--color-text);
  margin-bottom: var(--sp-4);
}

.sotumec-vision-dirigeant__quote cite {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-style: normal;
}

.sotumec-vision-dirigeant__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.sotumec-vision-dirigeant__grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
}

@media (max-width: 767px) {
  .sotumec-vision-dirigeant__grid {
    grid-template-columns: 1fr;
  }
}

/* Complémentarité */
.sotumec-complementarite {
  background: var(--color-bg-warm);
}

.sotumec-complementarite__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.sotumec-complementarite__col {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}

.sotumec-complementarite__col h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

.sotumec-complementarite__societes {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

@media (max-width: 767px) {
  .sotumec-complementarite__grid {
    grid-template-columns: 1fr;
  }
}

/* Valeurs groupe (version longue) */
.sotumec-valeurs-groupe {
  background: var(--color-bg-warm);
}

.sotumec-valeur-groupe-card {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}

.sotumec-valeur-groupe-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  color: var(--color-primary);
}

.sotumec-valeur-groupe-card__icon svg {
  width: 100%;
  height: 100%;
}

.sotumec-valeur-groupe-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

.sotumec-valeur-groupe-card p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* Implantations v2 — carte Leaflet + liste enrichie adresse/téléphone */
.sotumec-implantations-groupe__layout {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: var(--sp-12);
  align-items: start;
  margin-top: var(--sp-10);
}

.sotumec-implantations-groupe__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sotumec-implantations-groupe__map .sotumec-leaflet-map {
  height: 460px;
}

.sotumec-implantations-groupe__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sotumec-implantations-groupe__list li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: var(--fs-small);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sotumec-implantations-groupe__list li.is-highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--sotumec-blue-tint);
}

.sotumec-implantations-groupe__list strong {
  color: var(--color-text);
  font-size: var(--fs-body);
}

.sotumec-implantations-groupe__specialite {
  color: var(--color-secondary);
  font-weight: var(--fw-medium);
}

.sotumec-implantations-groupe__adresse {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--color-text-muted);
}

.sotumec-implantations-groupe__adresse svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.sotumec-implantations-groupe__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
  width: fit-content;
}

.sotumec-implantations-groupe__tel svg {
  width: 14px;
  height: 14px;
}

.sotumec-implantations-groupe__tel:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .sotumec-implantations-groupe__layout {
    grid-template-columns: 1fr;
  }
  .sotumec-implantations-groupe__map .sotumec-leaflet-map {
    height: 320px;
  }
  .sotumec-implantations-groupe__list {
    max-height: none;
  }
}

/* CTA groupe */
.sotumec-cta-groupe {
  background: var(--gradient-dark);
  color: var(--sotumec-white);
  text-align: center;
}

.sotumec-cta-groupe__inner h2 {
  color: var(--sotumec-white);
}

.sotumec-cta-groupe__inner p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-8);
}

.sotumec-cta-groupe__buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   ACTIVITÉS (template unique)
   -------------------------------------------------------------------------- */

.sotumec-hero-activite {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sotumec-hero-activite__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sotumec-hero-activite__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-hero-activite__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10, 26, 42, 0.92) 0%, rgba(36, 39, 41, 0.68) 45%, rgba(0, 98, 163, 0.4) 100%);
}

.sotumec-hero-activite__content {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-24);
  max-width: 720px;
}

.sotumec-hero-activite__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-hero-eyebrow, var(--fs-small));
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, var(--tracking-wide));
  color: var(--sotumec-white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-6);
}

.sotumec-hero-activite__eyebrow-icon {
  display: flex;
  width: 22px;
  height: 22px;
}

.sotumec-hero-activite__eyebrow-icon svg {
  width: 100%;
  height: 100%;
}

.sotumec-hero-activite__content h1 {
  color: var(--sotumec-white);
  margin-bottom: var(--sp-4);
}

.sotumec-hero-activite__content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-8);
  max-width: 560px;
}

.sotumec-hero-activite__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.sotumec-hero-activite__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--sotumec-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease);
}

.sotumec-hero-activite__scroll:hover {
  opacity: 1;
}

.sotumec-hero-activite__scroll svg {
  width: 18px;
  height: 18px;
  animation: sotumecScrollBounce 1.8s ease-in-out infinite;
}

@media (max-width: 767px) {
  .sotumec-hero-activite {
    min-height: 56vh;
  }
  .sotumec-hero-activite__content {
    padding-block: var(--sp-16);
  }
}

/* Intro / expertise v2 — carte teintée avec pictogramme en filigrane,
   pour supprimer l'effet "texte isolé sur fond blanc" signalé par le client. */
.sotumec-intro-activite {
  background: var(--color-bg);
}

.sotumec-intro-activite__card {
  position: relative;
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-12) var(--sp-10);
  overflow: hidden;
  max-width: 900px;
  margin-inline: auto;
}

.sotumec-intro-activite__watermark {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-8);
  width: 120px;
  height: 120px;
  opacity: 0.08;
  color: var(--color-primary);
  pointer-events: none;
}

.sotumec-intro-activite__watermark svg {
  width: 100%;
  height: 100%;
}

.sotumec-intro-activite__text {
  position: relative;
  margin-top: var(--sp-4);
  max-width: 680px;
}

.sotumec-intro-activite__text p {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.sotumec-intro-activite__filiale-note {
  font-size: var(--fs-small) !important;
  font-style: italic;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--sp-4);
}

.sotumec-intro-activite__lead {
  position: relative;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semi);
  line-height: var(--lh-loose);
  margin: var(--sp-4) 0 var(--sp-6);
  max-width: 680px;
}

.sotumec-intro-activite__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.sotumec-qualif-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-primary);
}

.sotumec-qualif-badge--link {
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.sotumec-qualif-badge--link:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

.sotumec-qualif-badge svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 767px) {
  .sotumec-intro-activite__card {
    padding: var(--sp-8) var(--sp-6);
  }
  .sotumec-intro-activite__watermark {
    width: 80px;
    height: 80px;
  }
}

/* Prestations v2 — cartes avec pictogramme + texte */
.sotumec-prestations-activite {
  background: var(--color-bg-warm);
}

.sotumec-prestation-card {
  position: relative;
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sotumec-prestation-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.sotumec-prestation-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}

.sotumec-prestation-card__icon svg {
  width: 26px;
  height: 26px;
}

.sotumec-prestation-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

.sotumec-prestation-card p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.sotumec-prestation-card__draft {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  font-size: 0.7rem;
}

.sotumec-prestation-card--draft {
  border: 1px dashed var(--color-border);
}

/* Livrables activité */
.sotumec-livrables-activite {
  background: var(--color-bg);
}

.sotumec-livrables-activite__card {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
  max-width: 820px;
}

.sotumec-livrables-activite__card h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

.sotumec-livrables-activite__card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

/* Secteurs v2 — grille de cartes enrichies (remplace les puces sur fond bleu) */
.sotumec-secteurs-activite__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

.sotumec-secteur-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sotumec-secteur-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.sotumec-secteur-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  font-size: 0.75rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}

.sotumec-secteur-card__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  color: var(--color-text);
}

.sotumec-secteur-card__desc {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* Moyens techniques v3 (aération + photo demandées par le client) : liste à
   gauche en cartes espacées, photo équipe/atelier à droite. */
.sotumec-moyens-activite__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-12);
  align-items: center;
}

.sotumec-moyens-activite__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.sotumec-moyens-activite__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.sotumec-moyens-activite__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

.sotumec-moyens-activite__gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.sotumec-moyens-activite__gallery-item img {
  aspect-ratio: 1;
}

.sotumec-moyens-activite__gallery-badge {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  text-align: center;
  font-size: 0.65rem;
}

.sotumec-moyens-activite__gallery-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-style: italic;
}

.sotumec-moyens-activite__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sotumec-moyens-activite__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sotumec-moyens-activite__list li:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.sotumec-moyens-activite__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  flex-shrink: 0;
}

.sotumec-moyens-activite__icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 991px) {
  .sotumec-moyens-activite__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .sotumec-moyens-activite__media {
    order: -1;
  }
}

/* Réalisations v2 — vrais visuels temporaires */
.sotumec-realisation-card {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sotumec-realisation-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.sotumec-realisation-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}

.sotumec-realisation-card__badge {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
}

.sotumec-realisation-card h3,
.sotumec-realisation-card p {
  padding: 0 var(--sp-6);
}

.sotumec-realisation-card h3 {
  margin-top: var(--sp-4);
  font-size: var(--fs-h4);
}

.sotumec-realisation-card p {
  padding-bottom: var(--sp-6);
}

/* CTA activité */
.sotumec-cta-activite {
  background: var(--gradient-dark);
  color: var(--sotumec-white);
  text-align: center;
}

.sotumec-cta-activite__inner h2 {
  color: var(--sotumec-white);
  margin-bottom: var(--sp-8);
  max-width: 700px;
  margin-inline: auto;
}

.sotumec-cta-activite__buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   RECRUTEMENT
   -------------------------------------------------------------------------- */

.sotumec-hero-recrutement {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sotumec-hero-recrutement__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sotumec-hero-recrutement__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-hero-recrutement__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 28, 30, 0.92) 0%, rgba(26, 28, 30, 0.6) 60%, rgba(26, 28, 30, 0.3) 100%);
}

.sotumec-hero-recrutement__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding-block: var(--sp-24);
}

.sotumec-hero-recrutement__content h1 {
  color: var(--sotumec-white);
  margin-bottom: var(--sp-4);
}

.sotumec-hero-recrutement__content > p {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-8);
}

.sotumec-hero-recrutement__stats {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.sotumec-hero-recrutement__stats strong {
  display: block;
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  color: var(--sotumec-white);
}

.sotumec-hero-recrutement__stats span {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
}

.sotumec-hero-recrutement__ctas {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .sotumec-hero-recrutement {
    min-height: 55vh;
  }
  .sotumec-hero-recrutement__content {
    padding-block: var(--sp-16);
  }
}

/* Pourquoi nous rejoindre */
.sotumec-pourquoi-rejoindre {
  background: var(--color-bg-warm);
}

.sotumec-pourquoi-card {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
}

.sotumec-pourquoi-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}

.sotumec-pourquoi-card__icon svg { width: 100%; height: 100%; }

.sotumec-pourquoi-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

.sotumec-pourquoi-card p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Nos métiers v2 — cartes enrichies + métiers support */
.sotumec-metier-card {
  text-align: left;
  padding: var(--sp-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--sotumec-white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sotumec-metier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.sotumec-metier-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}

.sotumec-metier-card__icon svg { width: 100%; height: 100%; }

.sotumec-metier-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-1);
}

.sotumec-metier-card__accroche {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}

.sotumec-metier-card__texte {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-5);
}

.sotumec-metier-card__competences {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sotumec-metier-card__competences li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.sotumec-metier-card__competences li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.sotumec-metiers-support {
  margin-top: var(--sp-20);
}

.sotumec-metiers-support__grid {
  /* Audit 02/10/2026 : flex centré au lieu d'une grille 4 colonnes, sinon les
     3 métiers support laissaient une colonne vide à droite. */
  --support-cols: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.sotumec-metier-support-card {
  flex: 0 1 calc((100% - (var(--support-cols) - 1) * var(--sp-4)) / var(--support-cols));
  min-width: 0;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--color-bg-warm);
}

.sotumec-metier-support-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sotumec-white);
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.sotumec-metier-support-card__icon svg {
  width: 20px;
  height: 20px;
}

.sotumec-metier-support-card h4 {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.sotumec-metier-support-card p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

@media (max-width: 991px) {
  .sotumec-metiers-support__grid {
    --support-cols: 2;
  }
}

/* Offres d'emploi */
.sotumec-offres-filtres {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.sotumec-offres-filtres select,
.sotumec-offres-filtres input {
  font-family: inherit;
  font-size: var(--fs-small);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  background: var(--sotumec-white);
  color: var(--color-text);
}

/* Corrigé (retour client, "offres non cliquables") : seul le petit bouton
   "Voir l'offre" était un <a>, le reste de la carte (titre, méta) ne
   réagissait pas au clic. Toute la carte est désormais un lien. */
.sotumec-offre-card {
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.sotumec-offre-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.sotumec-offre-card__cta {
  margin-top: auto;
  align-self: flex-start;
  pointer-events: none;
}

.sotumec-offre-card__societe {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
}

.sotumec-offre-card h3 {
  font-size: var(--fs-h4);
}

.sotumec-offre-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.sotumec-offre-card__meta li::after {
  content: '·';
  margin-left: var(--sp-2);
}

.sotumec-offre-card__meta li:last-child::after {
  content: '';
}

.sotumec-offres-emploi__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--sp-10) 0;
}

/* Candidature spontanée */
.sotumec-candidature-spontanee {
  background: var(--color-bg-warm);
}

.sotumec-candidature-spontanee__form {
  max-width: 720px;
  margin-inline: auto;
}

/* Portraits salariés */
.sotumec-portraits-salaries__note {
  margin-top: var(--sp-2);
}

.sotumec-portrait-salarie-card {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding-bottom: var(--sp-6);
}

.sotumec-portrait-salarie-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  overflow: hidden;
  text-decoration: none;
}

.sotumec-portrait-salarie-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-portrait-salarie-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px dashed rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
}

.sotumec-portrait-salarie-card__avatar svg {
  width: 38px;
  height: 38px;
}

.sotumec-portrait-salarie-card__badge {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  text-align: center;
}

.sotumec-portrait-salarie-card__citation,
.sotumec-portrait-salarie-card__identite {
  padding-inline: var(--sp-6);
}

.sotumec-portrait-salarie-card__identite a {
  color: var(--color-primary);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

.sotumec-portrait-salarie-card__identite a:hover {
  text-decoration: underline;
}

/* Avantages */
.sotumec-avantages-recrutement__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.sotumec-avantages-recrutement__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.sotumec-avantages-recrutement__list svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.sotumec-avantages-recrutement__note {
  font-size: var(--fs-small);
}

@media (max-width: 767px) {
  .sotumec-avantages-recrutement__list {
    grid-template-columns: 1fr;
  }
}

/* FAQ candidat v3 (Étape 4bis) : passage en liste sur une seule colonne.
   La grille à 2 colonnes créait un vide visuel disgracieux sous les
   questions courtes lorsqu'une question voisine, plus longue, était
   ouverte (les 2 items d'une même rangée partagent la hauteur de la
   rangée). Une colonne unique reste très lisible pour une FAQ et évite
   ce problème. */
.sotumec-faq-candidat__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.sotumec-faq-item {
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sotumec-faq-item:hover {
  border-color: var(--color-primary);
}

.sotumec-faq-item[open] {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
  background: var(--color-bg-alt);
}

.sotumec-faq-item summary {
  cursor: pointer;
  font-weight: var(--fw-semi);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  list-style: none;
}

.sotumec-faq-item summary::-webkit-details-marker {
  display: none;
}

.sotumec-faq-item summary svg {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--sotumec-white);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.sotumec-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.sotumec-faq-item__answer {
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* Single offre */
.sotumec-breadcrumb {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-6);
  display: flex;
  gap: var(--sp-2);
}

.sotumec-breadcrumb a {
  color: var(--color-primary);
}

.sotumec-single-offre__header {
  margin-bottom: var(--sp-8);
}

.sotumec-single-offre__meta {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.sotumec-single-offre__meta li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-single-offre__meta svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* Ajouté : accès rapide à la candidature depuis l'en-tête, sans attendre
   d'avoir lu toute la description (parcours "je clique, je vois, je
   postule facilement" demandé par le client). */
.sotumec-single-offre__header-cta {
  margin-top: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-single-offre__header-cta svg {
  width: 18px;
  height: 18px;
}

.sotumec-single-offre__content {
  margin-bottom: var(--sp-16);
  line-height: var(--lh-normal);
}

/* Corrigé (retour client) : "La mission" / "Profil recherché" / "Ce que
   nous offrons" s'enchaînaient sans aucun espace (h2/p n'ont pas de marge
   par défaut). Ajout d'un vrai rythme vertical entre les blocs. */
.sotumec-single-offre__content h2 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
}

.sotumec-single-offre__content h2:first-child {
  margin-top: 0;
}

.sotumec-single-offre__content p {
  margin-bottom: var(--sp-2);
}

.sotumec-single-offre__postuler {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-10);
  margin-bottom: var(--sp-16);
}

/* Rappel de l'offre concernée au-dessus du formulaire : lève toute
   ambiguïté sur le poste visé (utile car un même formulaire de
   candidature est réutilisé pour toutes les offres + la candidature
   spontanée). */
.sotumec-single-offre__postuler-recap {
  margin-bottom: var(--sp-6);
}

.sotumec-single-offre__similaires h2 {
  margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------------------
   ACTUALITÉS
   -------------------------------------------------------------------------- */

/* v2 (Étape 4bis) : le bloc était un simple rectangle sombre plat, avec une
   coupure nette et "mal fondue" sur la section suivante (signalé par le
   client). Ajout d'une texture/glow décorative + chevauchement de la carte
   de filtres (voir .sotumec-filtres-actualites__form) pour fondre les deux
   sections en une seule transition visuelle. */
.sotumec-hero-actualites {
  position: relative;
  overflow: hidden;
  background: var(--gradient-dark);
  color: var(--sotumec-white);
  padding-top: var(--sp-20);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  text-align: center;
}

.sotumec-hero-actualites::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(0, 98, 163, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.sotumec-hero-actualites::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, transparent 85%);
  pointer-events: none;
}

.sotumec-hero-actualites > .sotumec-container {
  position: relative;
  z-index: 1;
}

.sotumec-hero-actualites h1 {
  color: var(--sotumec-white);
  margin: var(--sp-3) 0;
}

.sotumec-hero-actualites p {
  color: rgba(255, 255, 255, 0.85);
}

/* Filtres actualités v2 (Étape 4) — refonte complète : les liens de
   catégorie n'avaient aucune classe de base définie (rendu "lien bleu
   souligné" par défaut du navigateur, signalé par le client comme des
   "points bleus"). Passage à de vraies puces filtrantes + recherche avec
   icône et espace de respiration interne. */
.sotumec-filtres-actualites {
  background: var(--color-bg-warm);
  padding-top: 0 !important;
}

/* La carte de filtres chevauche le bas du hero (fond dégradé sombre) pour
   supprimer la coupure nette entre les deux sections. */
.sotumec-filtres-actualites .sotumec-container {
  margin-top: clamp(-4.5rem, -6vw, -3.5rem);
  position: relative;
  z-index: 2;
}

.sotumec-filtres-actualites__form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6) var(--sp-8);
  flex-wrap: wrap;
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  /* Correctif (retour client) : carte jugée trop dense/mal aérée. */
  padding: var(--sp-6) var(--sp-8);
  box-shadow: var(--shadow-sm);
}

.sotumec-filtres-actualites__categories {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.sotumec-chip-filtre {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--color-bg-warm);
  border: 1.5px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.sotumec-chip-filtre svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sotumec-chip-filtre__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--fw-semi);
}

.sotumec-chip-filtre:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sotumec-chip-filtre.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--sotumec-white);
}

.sotumec-chip-filtre.is-active .sotumec-chip-filtre__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--sotumec-white);
}

.sotumec-filtres-actualites__search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sotumec-filtres-actualites__search-icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-text-muted);
  pointer-events: none;
}

.sotumec-filtres-actualites__search-icon svg {
  width: 16px;
  height: 16px;
}

.sotumec-filtres-actualites__search input {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--sp-3) 130px var(--sp-3) var(--sp-10);
  font-family: inherit;
  font-size: var(--fs-small);
  min-width: 300px;
  background: var(--color-bg-warm);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.sotumec-filtres-actualites__search input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--sotumec-white);
}

.sotumec-filtres-actualites__search button {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--sotumec-white);
  padding: 0 var(--sp-5);
  font-size: 0.8125rem;
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.sotumec-filtres-actualites__search button:hover {
  background: var(--color-primary-hover);
}

@media (max-width: 767px) {
  .sotumec-filtres-actualites__form {
    flex-direction: column;
    align-items: stretch;
  }
  .sotumec-filtres-actualites__search {
    width: 100%;
  }
  .sotumec-filtres-actualites__search input {
    width: 100%;
    min-width: 0;
  }
}

.sotumec-article-card {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.sotumec-article-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.sotumec-article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-article-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-size: 0.6875rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--sotumec-white);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  padding: var(--sp-1) var(--sp-3);
}

.sotumec-article-card__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sotumec-article-card__date {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}

.sotumec-article-card__body h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

.sotumec-article-card__body p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  flex-grow: 1;
  margin-bottom: var(--sp-4);
}

.sotumec-article-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-primary);
}

.sotumec-article-card__cta svg {
  width: 14px;
  height: 14px;
}

.sotumec-grid-actualites__empty {
  text-align: center;
  padding: var(--sp-16) 0;
}

.sotumec-grid-actualites__empty .sotumec-btn {
  margin-top: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-pagination-actualites ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0;
  margin: var(--sp-10) 0;
}

.sotumec-pagination-actualites a,
.sotumec-pagination-actualites span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.sotumec-pagination-actualites .current {
  background: var(--color-primary);
  color: var(--sotumec-white);
}

/* Single article
   Révision 05/10/2026 : la photo de l'actu (visuels LinkedIn carrés, portrait
   ou paysage, parfois < 500 px de large) n'est plus un fond recadré et voilé,
   illisible : elle est affichée en entier à droite du titre. En fond, une
   version floutée et très assombrie donne juste la teinte du visuel. */
.sotumec-single-article-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-dark);
  color: var(--sotumec-white);
}

.sotumec-single-article-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sotumec-single-article-hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(48px) saturate(1.2);
  transform: scale(1.2);
  opacity: 0.45;
}

.sotumec-single-article-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 28, 36, 0.92) 0%, rgba(20, 28, 36, 0.7) 55%, rgba(20, 28, 36, 0.55) 100%);
}

.sotumec-single-article-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--sp-12);
  padding-block: var(--sp-16);
}

.sotumec-single-article-hero--no-media .sotumec-single-article-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}

.sotumec-single-article-hero__content h1 {
  color: var(--sotumec-white);
  max-width: 760px;
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

/* Audit 02/10/2026 : la pastille de rubrique reprenait le positionnement
   absolu des cartes (left: 12px) et ressortait décalée par rapport au titre. */
.sotumec-single-article-hero__content .sotumec-article-card__badge {
  position: static;
  display: inline-block;
}

.sotumec-single-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
}

.sotumec-single-article-hero__meta span + span::before {
  content: "·";
  margin-right: var(--sp-5);
  color: rgba(255, 255, 255, 0.45);
}

.sotumec-single-article-hero__figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* Taille naturelle respectée : jamais agrandie, jamais recadrée. */
.sotumec-single-article-hero__figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  outline: 1px solid rgba(255, 255, 255, 0.12);
  outline-offset: -1px;
}

@media (max-width: 991px) {
  .sotumec-single-article-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    padding-block: var(--sp-12);
  }

  .sotumec-single-article-hero__figure img {
    max-height: 420px;
  }
}

@media (max-width: 575px) {
  .sotumec-single-article-hero__grid {
    padding-block: var(--sp-10);
  }

  .sotumec-single-article-hero__figure img {
    max-height: 360px;
  }
}

.sotumec-single-article__meta {
  list-style: none;
  display: flex;
  gap: var(--sp-5);
  padding: 0;
  margin: 0 0 var(--sp-10);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.sotumec-single-article__content {
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-10);
}

.sotumec-single-article__content p {
  margin-bottom: var(--sp-5);
}

/* Images insérées dans l'article (révision 05/10/2026) : la feuille de styles
   des blocs WordPress n'est pas chargée, les galeries s'empilaient en pleine
   largeur. Styles autonomes pour image seule, légende et galerie. */
.sotumec-single-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.sotumec-single-article__content figure {
  margin: var(--sp-8) 0;
}

.sotumec-single-article__content figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-align: center;
}

.sotumec-single-article__content .wp-block-image img {
  display: block;
  margin-inline: auto;
}

/* Galerie : vignettes centrées, au plus N par ligne (classe columns-N de
   l'éditeur, 3 par défaut), jamais plus larges que l'image réelle (attribut
   width) pour ne pas agrandir — donc flouter — les petits visuels. Pas de
   recadrage : les visuels LinkedIn contiennent souvent du texte. */
.sotumec-single-article__content .wp-block-gallery {
  --gallery-cols: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-3);
}

.sotumec-single-article__content .wp-block-gallery.columns-1 { --gallery-cols: 1; }
.sotumec-single-article__content .wp-block-gallery.columns-2 { --gallery-cols: 2; }
.sotumec-single-article__content .wp-block-gallery.columns-4 { --gallery-cols: 4; }

/* Neutralise aussi les largeurs en calc() / flex-grow de la feuille des blocs
   WordPress si elle est chargée. */
.sotumec-single-article__content .wp-block-gallery figure,
.sotumec-single-article__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  flex: 0 1 auto;
  width: auto;
  max-width: calc((100% - (var(--gallery-cols) - 1) * var(--sp-3)) / var(--gallery-cols));
  margin: 0;
}

.sotumec-single-article__content .wp-block-gallery img {
  display: block;
  height: auto;
  max-width: 100%;
}

.sotumec-single-article__content .wp-block-gallery figcaption {
  font-size: 0.75rem;
}

@media (max-width: 575px) {
  .sotumec-single-article__content .wp-block-gallery:not(.columns-1) {
    --gallery-cols: 2;
  }
}

.sotumec-single-article__partage {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-12);
}

.sotumec-single-article__partage span {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.sotumec-single-article__partage a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-warm);
  color: var(--color-text);
}

.sotumec-single-article__partage svg {
  width: 16px;
  height: 16px;
}

.sotumec-single-article__similaires {
  margin-bottom: var(--sp-16);
}

.sotumec-single-article__similaires h2 {
  margin-bottom: var(--sp-6);
}

.sotumec-single-article__cta {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-10);
  text-align: center;
}

.sotumec-single-article__cta-buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */

.sotumec-hero-contact {
  background: var(--color-bg-alt);
  padding-block: var(--sp-20);
}

.sotumec-hero-contact__intro {
  max-width: 640px;
  margin-bottom: var(--sp-10);
}

.sotumec-canal-card {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.sotumec-canal-card--urgence {
  border: 2px solid var(--color-primary);
}

.sotumec-canal-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.sotumec-canal-card__icon svg { width: 100%; height: 100%; }

.sotumec-canal-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}

/* Formulaire contact */
.sotumec-formulaire-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: var(--sp-12);
  align-items: start;
}

.sotumec-formulaire-contact__form h2 {
  margin-bottom: var(--sp-2);
}

.sotumec-formulaire-contact__lead {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-8);
  max-width: 520px;
}

.sotumec-formulaire-contact__coords {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.sotumec-formulaire-contact__coords h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h4);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.sotumec-formulaire-contact__coords h3 svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.sotumec-formulaire-contact__coords h3:first-child {
  margin-top: 0;
}

.sotumec-formulaire-contact__coords p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}

.sotumec-formulaire-contact__reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.sotumec-formulaire-contact__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  color: var(--color-primary);
}

.sotumec-formulaire-contact__linkedin svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .sotumec-formulaire-contact__grid {
    grid-template-columns: 1fr;
  }
}

/* Agences contact — v2 (Étape 4) : carte Leaflet unique + fiches agences,
   même composant que le bloc "Proximité" de l'accueil (card-agence.php). */
.sotumec-agences-contact {
  background: var(--color-bg-warm);
}

.sotumec-agences-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-10);
}

.sotumec-agences-contact__map .sotumec-leaflet-map {
  height: 480px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.sotumec-agences-contact__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 991px) {
  .sotumec-agences-contact__layout {
    grid-template-columns: 1fr;
  }
  .sotumec-agences-contact__map .sotumec-leaflet-map {
    height: 360px;
  }
}

@media (max-width: 575px) {
  .sotumec-agences-contact__list {
    grid-template-columns: 1fr;
  }
}

/* Urgence maintenance */
.sotumec-urgence-maintenance {
  background: var(--color-primary);
  color: var(--sotumec-white);
  padding-block: var(--sp-12);
}

.sotumec-urgence-maintenance__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.sotumec-urgence-maintenance__text h2 {
  color: var(--sotumec-white);
  margin-bottom: var(--sp-2);
}

.sotumec-urgence-maintenance__text p {
  color: rgba(255, 255, 255, 0.85);
}

.sotumec-urgence-maintenance__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--sotumec-white);
  color: var(--color-primary);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.sotumec-urgence-maintenance__phone svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   PAGES LÉGALES / CONTENU GÉNÉRIQUE (page.php)
   -------------------------------------------------------------------------- */

.sotumec-page-content {
  max-width: 760px;
}

.sotumec-page-content h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
}

.sotumec-page-content h2:first-child {
  margin-top: 0;
}

.sotumec-page-content h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.sotumec-page-content p,
.sotumec-page-content li {
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

.sotumec-page-content ul {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.sotumec-page-content .sotumec-todo-badge {
  font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.sotumec-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.sotumec-404__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sotumec-404__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-4);
  color: var(--color-primary);
}

.sotumec-404__icon svg {
  width: 100%;
  height: 100%;
}

.sotumec-404 h1 {
  margin: var(--sp-2) 0 var(--sp-4);
}

.sotumec-404 .sotumec-lead {
  margin-bottom: var(--sp-8);
}

.sotumec-404__search {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  max-width: 420px;
  margin-bottom: var(--sp-10);
}

.sotumec-404__search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
}

.sotumec-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ==========================================================================
   Révision client 29/09/2026
   ========================================================================== */

/* Pictogramme animé (soudure orbitale) : la tête tourne autour du tube */
.sotumec-icon-spin {
  transform-origin: 24px 24px;
  transform-box: view-box;
}
.sotumec-prestation-card__icon--anim .sotumec-icon-spin {
  animation: sotumec-spin 4s linear infinite;
}
@keyframes sotumec-spin {
  to { transform: rotate(360deg); }
}

/* Matières plastiques travaillées (Plasturgie) */
.sotumec-materiaux {
  position: relative;
  margin-top: var(--sp-6);
}
.sotumec-materiaux__label {
  font-size: var(--fs-small) !important;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-secondary);
  margin-bottom: var(--sp-3) !important;
}
.sotumec-materiaux__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sotumec-materiaux__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.sotumec-materiaux__item strong {
  font-size: var(--fs-h4);
  color: var(--color-primary);
  line-height: 1.1;
}
.sotumec-materiaux__item span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  /* « chlorotrifluoroéthylène » débordait de la carte sur mobile. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 575px) {
  .sotumec-materiaux__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Documents qualité & conformité : texte + 3 photos */
.sotumec-livrables-activite__card {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-10);
  align-items: center;
}
.sotumec-livrables-activite__photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.sotumec-livrables-activite__photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.sotumec-livrables-activite__photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sotumec-livrables-activite__photo figcaption {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-text);
}
.sotumec-livrables-activite__photo--todo {
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 3 / 4;
  background: var(--sotumec-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
.sotumec-livrables-activite__photo-icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}
.sotumec-livrables-activite__photo-icon svg { width: 100%; height: 100%; }
@media (max-width: 991px) {
  .sotumec-livrables-activite__card { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 575px) {
  .sotumec-livrables-activite__card { padding: var(--sp-6); }
  .sotumec-livrables-activite__photos { gap: var(--sp-2); }
}

/* Projets clés en main : orbite des corps de métier pilotés */
.sotumec-orbite {
  background: var(--color-bg-alt);
  overflow: hidden;
}
.sotumec-orbite__stage {
  --orbite-size: 620px;
  --orbite-r: calc(var(--orbite-size) / 2 - 64px);
  --orbite-dur: 60s;
  position: relative;
  width: var(--orbite-size);
  aspect-ratio: 1;
  margin: var(--sp-10) auto 0;
}
.sotumec-orbite__track {
  position: absolute;
  inset: 64px;
  border: 2px dashed rgba(0, 98, 163, 0.35);
  border-radius: 50%;
}
.sotumec-orbite__track::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 98, 163, 0.12), transparent 70%);
}
.sotumec-orbite__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--sotumec-white);
  border-radius: 50%;
  box-shadow: var(--shadow-lg), 0 0 0 10px rgba(0, 98, 163, 0.08);
  text-align: center;
  z-index: 2;
}
.sotumec-orbite__center img {
  width: 78%;
  height: auto;
}
.sotumec-orbite__center-metiers {
  font-size: 0.72rem;
  font-weight: var(--fw-semi);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.sotumec-orbite__ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: sotumec-spin var(--orbite-dur) linear infinite;
}
.sotumec-orbite__node {
  --a: calc(360deg / var(--orbite-nb) * var(--orbite-i));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--orbite-r))) rotate(calc(-1 * var(--a)));
}
.sotumec-orbite__card {
  position: absolute;
  left: 0;
  top: 0;
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: sotumec-spin-counter var(--orbite-dur) linear infinite;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sotumec-orbite__card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}
@keyframes sotumec-spin-counter {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}
.sotumec-orbite__stage:hover .sotumec-orbite__ring,
.sotumec-orbite__stage:hover .sotumec-orbite__card {
  animation-play-state: paused;
}
.sotumec-orbite__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.sotumec-orbite__icon svg { width: 24px; height: 24px; }
.sotumec-orbite__label {
  font-size: 0.8rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-text);
}
@media (prefers-reduced-motion: reduce) {
  .sotumec-orbite__ring,
  .sotumec-orbite__card,
  .sotumec-prestation-card__icon--anim .sotumec-icon-spin { animation: none; }
}
@media (max-width: 760px) {
  .sotumec-orbite__stage { --orbite-size: 520px; }
  .sotumec-orbite__card { width: 112px; }
}
@media (max-width: 640px) {
  .sotumec-orbite__stage {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
  }
  .sotumec-orbite__track { display: none; }
  .sotumec-orbite__center {
    position: static;
    transform: none;
    width: 220px;
  }
  .sotumec-orbite__ring {
    position: static;
    animation: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    width: 100%;
  }
  .sotumec-orbite__node {
    position: static;
    width: auto;
    height: auto;
    transform: none;
  }
  .sotumec-orbite__card {
    position: static;
    width: auto;
    height: 100%;
    transform: none;
    animation: none;
  }
}

/* Projets clés en main : étapes */
.sotumec-etapes-cle__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  list-style: none;
  margin: var(--sp-10) 0 0;
  padding: 0;
  counter-reset: none;
}
.sotumec-etapes-cle__item {
  position: relative;
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
}
.sotumec-etapes-cle__num {
  display: block;
  font-size: 2.5rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}
.sotumec-etapes-cle__item h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-2);
}
.sotumec-etapes-cle__item p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 991px) {
  .sotumec-etapes-cle__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .sotumec-etapes-cle__list { grid-template-columns: 1fr; }
}

/* Le groupe : écosystème à 4 blocs */
@media (max-width: 1199px) and (min-width: 768px) {
  .sotumec-complementarite__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nos activités : Nos moyens techniques et humains */
.sotumec-moyens-hub {
  background: var(--color-bg-warm);
}
.sotumec-moyens-hub__chiffres {
  display: grid;
  /* Colonnes adaptatives : 2, 3 ou 4 chiffres occupent toute la largeur
     (les valeurs non renseignées sont masquées). */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.sotumec-moyens-hub__chiffre {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.sotumec-moyens-hub__chiffre-icon {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}
.sotumec-moyens-hub__chiffre-icon svg { width: 100%; height: 100%; }
.sotumec-moyens-hub__chiffre strong {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  color: var(--color-primary);
}
.sotumec-moyens-hub__chiffre > span:last-child {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.sotumec-moyens-hub__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}
.sotumec-moyens-hub__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.sotumec-moyens-hub__photo {
  margin: 0;
  position: relative;
}
.sotumec-moyens-hub__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.sotumec-moyens-hub__photo figcaption {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--sp-1);
}
.sotumec-moyens-hub__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-small);
}
@media (max-width: 991px) {
  .sotumec-moyens-hub__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sotumec-moyens-hub__layout { grid-template-columns: 1fr; gap: 0; }
}

/* Recrutement : mots-clés du hero + CTA métiers */
.sotumec-hero-recrutement__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.sotumec-hero-recrutement__keywords span {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--sotumec-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
}
.sotumec-nos-metiers__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
}
.sotumec-offres-filtres select,
.sotumec-offres-filtres input {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sotumec-hero-groupe__title--long {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

/* Nos activités - moyens : atouts sur 2 colonnes, galerie des installations
   en pleine largeur (jusqu'à 8 photos légendées). */
.sotumec-moyens-hub__layout {
  grid-template-columns: 1fr;
  gap: 0;
}
.sotumec-moyens-hub .sotumec-moyens-activite__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sotumec-moyens-hub__gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.sotumec-moyens-hub__photo figcaption {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  margin-top: var(--sp-2);
}
@media (max-width: 991px) {
  .sotumec-moyens-hub .sotumec-moyens-activite__list,
  .sotumec-moyens-hub__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .sotumec-moyens-hub .sotumec-moyens-activite__list { grid-template-columns: 1fr; }
}

/* Activité : galerie « En images » */
.sotumec-galerie-activite__grid {
  /* Flex plutôt que grid : une dernière rangée incomplète reste centrée. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.sotumec-galerie-activite__item {
  position: relative;
  flex: 0 0 calc((100% - 3 * var(--sp-4)) / 4);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.sotumec-galerie-activite__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.sotumec-galerie-activite__item:hover img { transform: scale(1.04); }
.sotumec-galerie-activite__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-8) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(36, 39, 41, 0.85), transparent);
  color: var(--sotumec-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
}
@media (max-width: 991px) {
  .sotumec-galerie-activite__item { flex-basis: calc((100% - var(--sp-4)) / 2); }
}

/* Le groupe : reconnus par nos clients */
.sotumec-reconnaissance {
  background: var(--color-bg-warm);
}
.sotumec-reconnaissance__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-12);
  align-items: center;
}
.sotumec-reconnaissance__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.sotumec-reconnaissance__text p {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}
@media (max-width: 767px) {
  .sotumec-reconnaissance__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 575px) {
  .sotumec-nos-metiers__cta .sotumec-btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* Audit responsive 02/10/2026 : portraits salariés (1 à 3 articles) centrés,
   au lieu d'une grille 3 colonnes qui laissait une colonne vide à droite
   quand seuls 2 portraits sont publiés. */
.sotumec-portraits-salaries .sotumec-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.sotumec-portraits-salaries .sotumec-portrait-salarie-card {
  flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3);
  min-width: 0;
}

@media (max-width: 991px) {
  .sotumec-portraits-salaries .sotumec-portrait-salarie-card {
    flex-basis: calc((100% - var(--sp-6)) / 2);
  }
}

@media (max-width: 575px) {
  .sotumec-portraits-salaries .sotumec-portrait-salarie-card {
    flex-basis: 100%;
  }
}

/* Audit responsive 02/10/2026 : filtres des offres pleine largeur sur mobile
   (les 4 champs avaient chacun une largeur différente, effet « escalier »). */
@media (max-width: 575px) {
  .sotumec-offres-filtres select,
  .sotumec-offres-filtres input {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Audit responsive 02/10/2026 : bloc « Postuler à cette offre » trop
   rembourré sur mobile (formulaire réduit à 192px utiles à 320px). */
@media (max-width: 575px) {
  .sotumec-single-offre__postuler {
    padding: var(--sp-6) var(--sp-4);
  }
}

/* --------------------------------------------------------------------------
   Portables peu hauts (audit 07/10/2026)
   Portables 13-15" (1366x768, 1920x1080 à 125-150 %, MacBook) : 570 à 800 px
   de haut utiles une fois le navigateur ouvert. Les heros se resserrent pour
   tenir dans le premier écran, chiffres clés et boutons compris.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-height: 820px) {
  .sotumec-hero-groupe__inner {
    padding-block: var(--sp-12) var(--sp-10);
  }

  .sotumec-hero-groupe__title {
    font-size: clamp(2rem, min(4.2vw, 7vh), 3.75rem);
    margin: var(--sp-3) 0;
  }

  .sotumec-hero-groupe__title--long {
    font-size: clamp(1.875rem, min(3.6vw, 6.5vh), 3.25rem);
  }

  .sotumec-hero-groupe__lead {
    font-size: 1rem;
    margin-bottom: var(--sp-6);
  }

  .sotumec-hero-groupe__keywords {
    margin-bottom: var(--sp-6);
  }

  .sotumec-hero-groupe__kpis--grid {
    gap: var(--sp-4) var(--sp-8);
  }

  .sotumec-hero-groupe__kpis strong {
    font-size: 1.875rem;
  }

  /* 4 chiffres (Nos activités) : une rangée au lieu de 2 x 2. */
  .sotumec-hero-groupe__kpis--grid:has(> div:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 760px;
  }

  .sotumec-hero-groupe__kpis + .sotumec-hero-groupe__actions {
    margin-top: var(--sp-6);
  }

  /* Article : la photo tient dans l'écran. */
  .sotumec-single-article-hero__grid {
    padding-block: var(--sp-10);
  }

  .sotumec-single-article-hero__figure img {
    max-height: min(480px, calc(100vh - var(--header-height) - 2 * var(--sp-10)));
  }

  /* 404 : recherche et liens visibles sans défiler. */
  section.sotumec-404 {
    min-height: 0;
    padding-block: var(--sp-10);
  }

  .sotumec-404 .sotumec-lead {
    margin-bottom: var(--sp-6);
  }

  .sotumec-404__search {
    margin-bottom: var(--sp-6);
  }

  .sotumec-404__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-2);
  }

  .sotumec-404 h1 {
    font-size: clamp(2rem, 6vh, 3rem);
  }
}