/* ==========================================================================
   Sotumec — Composants de la page d'accueil
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.sotumec-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  color: var(--sotumec-white);
  overflow: hidden;
}

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

.sotumec-hero__bg img,
.sotumec-hero__bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(36, 39, 41, 0.6) 0%, rgba(0, 98, 163, 0.4) 100%);
}

.sotumec-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  opacity: 0;
  transform: translateY(20px);
  animation: sotumecHeroFadeIn 800ms var(--ease) forwards;
  animation-delay: 150ms;
}

@keyframes sotumecHeroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sotumec-hero__title {
  color: var(--sotumec-white);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-6);
}

.sotumec-hero__subtitle {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--sp-8);
  max-width: 620px;
}

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

.sotumec-hero__badge {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 3;
}

.sotumec-hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-hero__scroll svg {
  width: 22px;
  height: 36px;
  animation: sotumecScrollBounce 2s var(--ease) infinite;
}

@keyframes sotumecScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 575px) {
  .sotumec-hero {
    min-height: 80vh;
  }
  .sotumec-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   2. Chiffres clés
   -------------------------------------------------------------------------- */

.sotumec-chiffres {
  background: var(--color-bg);
}

.sotumec-chiffres__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sotumec-chiffres__item {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border-left: 1px solid var(--color-border);
}

.sotumec-chiffres__item:first-child {
  border-left: none;
}

.sotumec-chiffres__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 3.5rem;
  color: var(--color-primary);
  line-height: 1;
  display: inline-flex;
}

.sotumec-chiffres__label {
  margin-top: var(--sp-2);
  font-weight: var(--fw-medium);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .sotumec-chiffres__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6) 0;
  }
  .sotumec-chiffres__item {
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
  .sotumec-chiffres__item:nth-child(1),
  .sotumec-chiffres__item:nth-child(2) {
    border-top: none;
  }
  .sotumec-chiffres__value {
    font-size: 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   3. Activités
   -------------------------------------------------------------------------- */

.sotumec-activites {
  background: var(--color-bg-warm);
}

.sotumec-card-activite {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8);
  border-left: 4px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

.sotumec-card-activite__icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}

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

.sotumec-card-activite__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  flex: 1;
}

.sotumec-card-activite__link {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  color: var(--color-primary);
}

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

.sotumec-card-activite:hover .sotumec-card-activite__link svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   4. Pitch ADN
   -------------------------------------------------------------------------- */

.sotumec-adn {
  background: var(--color-bg-alt);
}

.sotumec-adn__media img,
.sotumec-adn__media svg {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
}

.sotumec-adn__title {
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}

.sotumec-adn__text p {
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

/* --------------------------------------------------------------------------
   5. Valeurs
   -------------------------------------------------------------------------- */

.sotumec-valeurs {
  background: var(--color-bg);
}

.sotumec-card-valeur {
  text-align: left;
}

.sotumec-card-valeur__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.sotumec-card-valeur__icon svg {
  width: 24px;
  height: 24px;
}

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

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

/* --------------------------------------------------------------------------
   6. Certifications / 7. Clients (logos)
   -------------------------------------------------------------------------- */

.sotumec-certifications {
  background: var(--color-bg);
}

.sotumec-clients {
  background: var(--color-bg-warm);
}

.sotumec-logos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-8);
  align-items: center;
  justify-items: center;
}

@media (max-width: 991px) {
  .sotumec-logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .sotumec-logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sotumec-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.sotumec-logo-item img {
  max-height: 56px;
  width: auto;
}

.sotumec-clients-v2__logo img,
.sotumec-logo-client img,
.sotumec-logo-placeholder--client img {
  /* Les fichiers sont normalisés sur un canevas 480x192 à aire visuelle
     égale : une boîte fixe garantit un rendu homogène pour tous. */
  width: 160px;
  height: 64px;
  max-width: 160px;
  object-fit: contain;
}

.sotumec-logo-item:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

.sotumec-logo-item--placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  filter: none;
}

/* Corrigé (retour client) : ce texte d'intro était centré par défaut même
   quand le titre H2 au-dessus était aligné à gauche (cas de la majorité des
   blocs) -> rendu incohérent et "pas beau". Alignement à gauche par défaut ;
   le centrage n'est appliqué que dans les en-têtes explicitement centrés
   (.sotumec-section-head--center, ex. Nos activités, Nos certifications). */
.sotumec-section-intro {
  text-align: left;
  color: var(--color-text-muted);
  max-width: 620px;
  margin: 0 0 var(--sp-10);
}

.sotumec-section-head--center .sotumec-section-intro {
  text-align: center;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   8. Agences
   -------------------------------------------------------------------------- */

.sotumec-agences {
  background: var(--color-bg);
}

.sotumec-agences__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

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

.sotumec-agences__map svg {
  width: 100%;
  height: auto;
}

.sotumec-agences__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

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

.sotumec-card-agence {
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

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

.sotumec-card-agence__address {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-3);
}

.sotumec-card-agence__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sotumec-card-agence__meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.sotumec-card-agence__meta svg {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   9. Groupe teaser
   -------------------------------------------------------------------------- */

.sotumec-groupe-teaser {
  background: var(--color-primary);
  color: var(--sotumec-white);
  text-align: center;
}

.sotumec-groupe-teaser__inner {
  max-width: 720px;
  margin-inline: auto;
}

.sotumec-groupe-teaser__title {
  color: var(--sotumec-white);
  margin-bottom: var(--sp-4);
}

.sotumec-groupe-teaser__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-8);
}

/* --------------------------------------------------------------------------
   10. Portraits salariés
   -------------------------------------------------------------------------- */

.sotumec-portraits {
  background: var(--color-bg-warm);
}

.sotumec-portraits__quote {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--sp-12);
}

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

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

.sotumec-card-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-border);
}

.sotumec-card-portrait img,
.sotumec-card-portrait svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.sotumec-card-portrait:hover img,
.sotumec-card-portrait:hover svg {
  transform: scale(1.04);
}

.sotumec-card-portrait__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6);
  background: linear-gradient(to top, rgba(36, 39, 41, 0.85) 0%, rgba(36, 39, 41, 0) 55%);
  color: var(--sotumec-white);
}

.sotumec-card-portrait__name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

.sotumec-card-portrait__job {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
}

.sotumec-card-portrait__todo {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
}

.sotumec-portraits__cta {
  text-align: center;
  margin-top: var(--sp-12);
}

/* --------------------------------------------------------------------------
   11. Actualités
   -------------------------------------------------------------------------- */

.sotumec-actualites {
  background: var(--color-bg);
}

.sotumec-actu-card {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: var(--sp-6);
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.sotumec-actu-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.sotumec-actu-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.sotumec-actu-card__body {
  padding: var(--sp-6) var(--sp-6) var(--sp-6) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sotumec-actu-card__date {
  font-size: var(--fs-small);
  color: var(--color-secondary);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-2);
}

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

.sotumec-actu-card__excerpt {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

@media (max-width: 575px) {
  .sotumec-actu-card {
    grid-template-columns: 1fr;
  }
  .sotumec-actu-card__body {
    padding: 0 var(--sp-6) var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   12. CTA final
   -------------------------------------------------------------------------- */

.sotumec-cta-final {
  background: var(--sotumec-ink);
  color: var(--sotumec-white);
  text-align: center;
  padding-block: var(--sp-24);
}

.sotumec-cta-final__title {
  color: var(--sotumec-white);
  margin-bottom: var(--sp-3);
}

.sotumec-cta-final__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-8);
}

.sotumec-cta-final .sotumec-btn--primary {
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--fs-lead);
  position: relative;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Formulaire (Contact Form 7) — v2 (Étape 4, refonte design complète)
   -------------------------------------------------------------------------- */

/* Carte englobant le formulaire (fond blanc, ombre, coins arrondis) pour
   sortir du rendu "formulaire nu" signalé par le client. */
.sotumec-form-card {
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-10);
  box-shadow: var(--shadow-lg);
}

/* Rangées à 2 colonnes (générées dans le contenu CF7 via <div class="sotumec-form-row">). */
.sotumec-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  /* Correctif (retour client, mesuré en direct) : 0px de séparation
     verticale constatée entre deux .sotumec-form-row consécutifs -> champs
     "collés". La marge du <label> ne suffisait pas car elle reste comprise
     dans la hauteur de la ligne. On force un espace explicite ENTRE les
     lignes du formulaire. */
  margin-bottom: var(--sp-6);
}

.sotumec-form-row:last-of-type,
.wpcf7 form .sotumec-form-field--full:last-of-type {
  margin-bottom: 0;
}

/* Correctif (Étape 4bis) : Contact Form 7 (wpautop) enveloppe chaque
   <label> dans un <p>, et la règle générale "p + p { margin-top }" (voir
   _typography.css) décalait alors le 2e champ de chaque rangée de 16px vers
   le bas - c'est ce qui donnait l'impression de "champs qui se touchent" /
   grille mal alignée signalée par le client. On neutralise cette marge à
   l'intérieur des formulaires : l'espacement est déjà géré par le gap de la
   grille et par sotumec-form-row / sotumec-form-field--full. */
.wpcf7 form p:not([class]) {
  margin: 0;
}

.wpcf7 form label {
  display: block;
  font-weight: var(--fw-semi);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-6);
}

.wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--sp-2);
}

.wpcf7 form .sotumec-form-field--full {
  display: block;
  margin-bottom: var(--sp-6);
}

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select,
.wpcf7 form textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--sotumec-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-regular);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.wpcf7 form textarea {
  min-height: 140px;
  resize: vertical;
}

.wpcf7 form 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='%235A6166' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.wpcf7 form input[type="text"]:focus,
.wpcf7 form input[type="email"]:focus,
.wpcf7 form input[type="tel"]:focus,
.wpcf7 form select:focus,
.wpcf7 form textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--sotumec-blue-tint);
}

.wpcf7 form input[type="text"]::placeholder,
.wpcf7 form input[type="email"]::placeholder,
.wpcf7 form input[type="tel"]::placeholder,
.wpcf7 form textarea::placeholder {
  color: #9aa3a8;
}

/* Champs fichier (CV / lettre de motivation) */
.wpcf7 form input[type="file"] {
  width: 100%;
  padding: var(--sp-3);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-warm);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.wpcf7 form input[type="file"]:hover {
  border-color: var(--color-primary);
}

.wpcf7 form input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  margin-right: var(--sp-4);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--sotumec-white);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.wpcf7 form input[type="file"]::file-selector-button:hover {
  background: var(--color-primary-hover);
}

/* Case à cocher RGPD */
.sotumec-form-acceptance {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wpcf7-acceptance label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--sp-3);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  cursor: pointer;
}

.wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Bouton d'envoi */
.sotumec-form-submit {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

.wpcf7 form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--sotumec-white);
  font-weight: var(--fw-semi);
  font-size: var(--fs-body);
  border: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.wpcf7 form input[type="submit"]:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.wpcf7 .wpcf7-spinner {
  margin-left: var(--sp-3);
}

/* Messages de retour (succès / erreur / validation) */
.wpcf7-response-output {
  margin: var(--sp-6) 0 0 !important;
  padding: var(--sp-4) var(--sp-5) !important;
  border-radius: var(--radius) !important;
  font-size: var(--fs-small);
  border: 1.5px solid var(--color-border) !important;
}

.wpcf7-form.sent .wpcf7-response-output {
  border-color: #2e7d32 !important;
  background: #eef7ee;
  color: #2e7d32;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  border-color: #b3261e !important;
  background: #fdecea;
  color: #b3261e;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
  border-color: var(--color-secondary) !important;
  background: var(--color-bg-warm);
  color: var(--color-secondary-hover);
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
  color: #b3261e;
  text-transform: none;
  font-weight: var(--fw-regular);
}

@media (max-width: 575px) {
  .sotumec-form-card {
    padding: var(--sp-6) var(--sp-5);
  }
  .sotumec-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Audit 02/10/2026 : « Envoyer ma candidature » débordait du formulaire
     à 320px -> bouton pleine largeur sur mobile. */
  .wpcf7 form input[type="submit"] {
    width: 100%;
    padding-inline: var(--sp-4);
    white-space: normal;
  }
}

/* ==========================================================================
   ÉTAPE 2 — REFONTE VISUELLE ACCUEIL (v2)
   Les blocs ci-dessous remplacent visuellement les blocs v1 équivalents
   (conservés plus haut, non supprimés, pour référence/rollback rapide).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero v2 — split layout photo + contenu XXL fond anthracite
   -------------------------------------------------------------------------- */

.sotumec-hero-v2 {
  position: relative;
  overflow: hidden;
}

.sotumec-hero-v2__grid {
  display: grid;
  grid-template-columns: 55% 45%;
  /* Corrigé (retour client) : 100vh dépassait largement la ligne de
     flottaison sur la plupart des écrans. On vise un hero qui reste visible
     avec le début du bloc suivant, sans jamais dépasser 720px de haut.
     IMPORTANT : "height" (et pas seulement "min-height") est nécessaire ici.
     La photo utilise object-fit:cover avec height:100% ; sans hauteur DÉFINIE
     sur la piste de la grille, ce pourcentage ne se résout pas et le
     navigateur retombe sur le ratio intrinsèque de l'image (portrait) ->
     c'est ce qui rendait le hero "en pleine hauteur", bien au-delà de 720px.
     [07/10/2026] Hauteur fixe abandonnée : sur un portable peu haut
     (1366x768, 1920x1080 à 125-150 %), le contenu dépassait la boîte et les
     boutons étaient rognés (overflow hidden). La photo est désormais en
     position absolue (voir __img), la hauteur suit donc le contenu avec
     80vh minimum. */
  min-height: min(80vh, 760px);
}

.sotumec-hero-v2__media {
  position: relative;
  overflow: hidden;
  background: var(--sotumec-ink);
}

.sotumec-hero-v2__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  animation: sotumecHeroImgIn 3000ms var(--ease) forwards;
}

@keyframes sotumecHeroImgIn {
  to { transform: scale(1); }
}

.sotumec-hero-v2__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(0, 98, 163, 0.4) 100%);
}

.sotumec-hero-v2__badge {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-8);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow);
}

.sotumec-hero-v2__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  position: relative;
}

.sotumec-hero-v2__badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.4;
  animation: sotumecPulseDot 2s ease-out infinite;
}

@keyframes sotumecPulseDot {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

.sotumec-hero-v2__photo-note {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-6);
  z-index: 2;
}

.sotumec-hero-v2__content {
  position: relative;
  background: var(--gradient-dark);
  color: var(--sotumec-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Corrigé (retour client) : davantage d'air à droite pour que le texte
     ne vienne pas "coller" le bord du bloc sombre. */
  padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12);
  overflow: hidden;
}

.sotumec-hero-v2__content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-grain);
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.sotumec-hero-v2__watermark {
  position: absolute;
  top: -20px;
  right: 40px;
  font-size: 18rem;
  font-weight: var(--fw-extrabold);
  color: var(--watermark-color);
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 0;
  opacity: 0;
  animation: sotumecFadeIn 1200ms var(--ease) forwards;
  animation-delay: 600ms;
  user-select: none;
}

@keyframes sotumecFadeIn {
  to { opacity: 1; }
}

/* Sur-titre « Sotumec · Normandie · Industrie » supprimé le 07/10/2026 :
   il n'a jamais été visible (animation sotumecLineIn inexistante). */

.sotumec-hero-v2__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  /* Un peu plus contenu que le --fs-display générique : ce titre est sur
     2 lignes dans une colonne étroite, --fs-display le faisait déborder. */
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  color: var(--sotumec-white);
  margin: 0 0 var(--sp-6);
  /* Empêche le titre animé de chevaucher le chapô pendant l'entrée. */
  isolation: isolate;
}

.sotumec-hero-v2__title-line {
  display: block;
  opacity: 0;
  /* Léger fade uniquement : un translateY trop fort faisait passer le H1
     au-dessus du paragraphe (décalage visuel au chargement). */
  animation: sotumecTitleFade 700ms var(--ease) forwards;
}

.sotumec-hero-v2__title-line:nth-of-type(1) { animation-delay: 150ms; }
.sotumec-hero-v2__title-line:nth-of-type(2) { animation-delay: 280ms; }

@keyframes sotumecTitleFade {
  to { opacity: 1; }
}

.sotumec-hero-v2__title-line--accent {
  background: linear-gradient(90deg, #7db3d6, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sotumec-hero-v2__lead {
  position: relative;
  z-index: 1;
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px;
  line-height: var(--lh-loose);
  margin: 0 0 var(--sp-8);
  opacity: 0;
  animation: sotumecTitleFade 700ms var(--ease) forwards;
  animation-delay: 400ms;
}

.sotumec-hero-v2__ctas {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: 0;
  opacity: 0;
  animation: sotumecTitleFade 700ms var(--ease) forwards;
  animation-delay: 520ms;
}

.sotumec-hero-v2__ctas .sotumec-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: -4px;
}

.sotumec-hero-v2__ctas .sotumec-btn svg * {
  vector-effect: non-scaling-stroke;
  stroke-width: 2px;
}

.sotumec-hero-v2__mini-kpis {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-8);
}

.sotumec-hero-v2__mini-kpis > div {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  animation: sotumecLineIn 700ms var(--ease) forwards;
}

.sotumec-hero-v2__mini-kpis > div:nth-child(1) { animation-delay: 750ms; }
.sotumec-hero-v2__mini-kpis > div:nth-child(2) { animation-delay: 850ms; }
.sotumec-hero-v2__mini-kpis > div:nth-child(3) { animation-delay: 950ms; }

.sotumec-hero-v2__mini-kpis strong {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: var(--fw-extrabold);
  color: #7db3d6;
  line-height: 1;
}

.sotumec-hero-v2__mini-kpis span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--sp-1);
}

.sotumec-hero-v2__scroll {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-6);
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
}

.sotumec-hero-v2__scroll svg {
  width: 20px;
  height: 32px;
  animation: sotumecScrollBounce 2s var(--ease) infinite;
}

@media (max-width: 991px) {
  .sotumec-hero-v2__grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }
  .sotumec-hero-v2__media {
    height: 45vh;
    min-height: 45vh;
  }
  .sotumec-hero-v2__content {
    padding: var(--sp-10) var(--sp-6) var(--sp-12);
    min-height: 55vh;
  }
  .sotumec-hero-v2__watermark {
    font-size: 10rem;
    top: -10px;
  }
  /* Audit 02/10/2026 : en une colonne, l'indicateur de scroll tombait
     collé sous le bouton « Nous contacter ». */
  .sotumec-hero-v2__scroll {
    display: none;
  }
}

@media (max-width: 575px) {
  .sotumec-hero-v2__grid {
    height: auto;
    min-height: auto;
  }
  .sotumec-hero-v2__media {
    height: 38vh;
    min-height: 38vh;
  }
  .sotumec-hero-v2__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .sotumec-hero-v2__mini-kpis {
    gap: var(--sp-6);
  }
  .sotumec-hero-v2__mini-kpis strong {
    font-size: 2.25rem;
  }
  .sotumec-hero-v2__watermark {
    display: none;
  }
}

/* Portables peu hauts (07/10/2026) : le contenu se resserre pour que titre,
   texte et boutons tiennent dans le premier écran. */
@media (min-width: 992px) and (max-height: 820px) {
  .sotumec-hero-v2__content {
    padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-10);
  }
  .sotumec-hero-v2__title {
    font-size: clamp(2rem, min(4.6vw, 7.5vh), 3.75rem);
    margin-bottom: var(--sp-4);
  }
  .sotumec-hero-v2__lead {
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sotumec-hero-v2__img,
  .sotumec-hero-v2__title-line,
  .sotumec-hero-v2__lead,
  .sotumec-hero-v2__ctas,
  .sotumec-hero-v2__mini-kpis > div,
  .sotumec-hero-v2__watermark {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   2. Chiffres clés v2 — cartes visuelles, fond alterné, icônes
   -------------------------------------------------------------------------- */

.sotumec-chiffres-v2 {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sotumec-blue-tint) 100%);
  padding-block: var(--sp-20);
}

.sotumec-chiffres-v2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.sotumec-chiffres-v2__item {
  position: relative;
  background: var(--sotumec-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  overflow: hidden;
}

.sotumec-chiffres-v2__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease);
}

.sotumec-chiffres-v2__item:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-8px);
}

.sotumec-chiffres-v2__item:hover::before {
  transform: scaleY(1);
}

.sotumec-chiffres-v2__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sotumec-blue-tint);
  color: var(--color-primary);
  margin-bottom: var(--sp-6);
}

.sotumec-chiffres-v2__icon svg {
  width: 26px;
  height: 26px;
}

.sotumec-chiffres-v2__value {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 4.5rem;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-3);
}

.sotumec-chiffres-v2__label {
  font-weight: var(--fw-semi);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}

.sotumec-chiffres-v2__sub {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

@media (max-width: 991px) {
  .sotumec-chiffres-v2__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .sotumec-chiffres-v2__grid {
    grid-template-columns: 1fr;
  }
  .sotumec-chiffres-v2__value {
    font-size: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   3. Activités v2 — cartes avec image de fond au hover
   -------------------------------------------------------------------------- */

.sotumec-activites-v2 {
  background: var(--color-bg-warm);
}

/* Grille "3 + 2" : lisibilité demandée par le client plutôt que 5 cartes
   serrées sur une seule ligne. Grille à 6 colonnes ; chaque carte occupe
   2 colonnes (= 1/3 de largeur), la 2e ligne (2 cartes) est recentrée. */
.sotumec-grid-activites-v2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

/* 6 activités (révision 09/2026) : grille 3 + 3. Les règles 3+2 ne
   s'appliquent plus que s'il reste exactement 5 cartes. */
.sotumec-grid-activites-v2 .sotumec-card-activite-v2 { grid-column: span 2; }
.sotumec-card-activite-v2:nth-child(4):nth-last-child(2) { grid-column: 2 / 4; }
.sotumec-card-activite-v2:nth-child(5):last-child { grid-column: 4 / 6; }

.sotumec-card-activite-v2 {
  position: relative;
  display: block;
  min-height: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sotumec-ink, #242729);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.sotumec-card-activite-v2:hover,
.sotumec-card-activite-v2:focus-visible {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.sotumec-card-activite-v2__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Révision 12/10/2026 (demande client) : photo plus visible — opacité
   relevée et voile sombre concentré sur le bas de la carte, derrière le
   texte (qui garde un contraste suffisant, renforcé par une ombre portée). */
.sotumec-card-activite-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.sotumec-card-activite-v2:hover .sotumec-card-activite-v2__image img,
.sotumec-card-activite-v2:focus-visible .sotumec-card-activite-v2__image img {
  opacity: 1;
  transform: scale(1.1);
}

/* Le texte doit être lisible en permanence (sans survol) : voile fixe, léger
   en haut (photo bien visible), dense en bas sous le texte. */
.sotumec-card-activite-v2__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 18, 20, 0.08) 0%, rgba(15, 18, 20, 0.2) 30%, rgba(15, 18, 20, 0.72) 58%, rgba(15, 18, 20, 0.9) 100%);
}

.sotumec-card-activite-v2__number {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 2.75rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
}

.sotumec-card-activite-v2__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6);
}

.sotumec-card-activite-v2__icon {
  width: 40px;
  height: 40px;
  color: var(--sotumec-white);
  margin-bottom: var(--sp-4);
  flex-shrink: 0;
}

.sotumec-card-activite-v2__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
  color: var(--sotumec-white);
  margin-bottom: var(--sp-2);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.sotumec-card-activite-v2__desc {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-3);
  /* Texte toujours visible, entièrement : pas de troncature au survol. */
}

.sotumec-card-activite-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  color: var(--sotumec-white);
  transition: gap var(--dur-fast) var(--ease);
}

.sotumec-card-activite-v2:hover .sotumec-card-activite-v2__cta,
.sotumec-card-activite-v2:focus-visible .sotumec-card-activite-v2__cta {
  gap: var(--sp-2);
}

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

.sotumec-card-activite-v2:hover .sotumec-card-activite-v2__cta svg,
.sotumec-card-activite-v2:focus-visible .sotumec-card-activite-v2__cta svg {
  transform: translateX(4px);
}

@media (max-width: 1199px) {
  .sotumec-grid-activites-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sotumec-grid-activites-v2 .sotumec-card-activite-v2,
  .sotumec-card-activite-v2:nth-child(4):nth-last-child(2),
  .sotumec-card-activite-v2:nth-child(5):last-child {
    grid-column: auto;
  }
}

@media (max-width: 575px) {
  .sotumec-grid-activites-v2 {
    grid-template-columns: 1fr;
  }
  .sotumec-card-activite-v2 {
    min-height: 340px;
  }
}

/* --------------------------------------------------------------------------
   4. ADN v2 — manifeste éditorial + watermark + photo signature
   -------------------------------------------------------------------------- */

.sotumec-adn-v2 {
  background: var(--sotumec-taupe-tint);
  position: relative;
  overflow: hidden;
}

.sotumec-adn-v2__inner {
  position: relative;
}

.sotumec-adn-v2__watermark {
  position: absolute;
  top: -1rem;
  right: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 24rem;
  line-height: 1;
  color: rgba(0, 98, 163, 0.05);
  z-index: 0;
  user-select: none;
}

.sotumec-adn-v2__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(280px, 380px);
  gap: var(--sp-10);
  align-items: center;
}

.sotumec-adn-v2__content {
  position: relative;
  max-width: 720px;
}

.sotumec-adn-v2__title {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: var(--sp-4) 0 var(--sp-8);
}

.sotumec-adn-v2__accent {
  color: var(--color-primary);
  border-bottom: 6px solid var(--color-secondary);
  padding-bottom: 2px;
}

.sotumec-adn-v2__text {
  max-width: 640px;
}

.sotumec-adn-v2__text p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.sotumec-adn-v2__text p + p {
  margin-top: var(--sp-4);
}

.sotumec-adn-v2__text strong {
  color: var(--color-text);
}

/* Nuage de photos flottantes -------------------------------------------- */

.sotumec-adn-v2__photocloud {
  position: relative;
  height: 420px;
}

.sotumec-adn-v2__photocloud-item {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 4px solid var(--sotumec-white);
  animation: sotumec-photocloud-float 7s ease-in-out infinite;
  will-change: transform;
}

.sotumec-adn-v2__photocloud-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-adn-v2__photocloud-item--1 {
  width: 190px;
  height: 240px;
  top: 0;
  right: 40px;
  transform: rotate(-4deg);
  z-index: 3;
  animation-delay: 0s;
}

.sotumec-adn-v2__photocloud-item--2 {
  width: 150px;
  height: 150px;
  top: 20px;
  left: 0;
  transform: rotate(6deg);
  z-index: 2;
  animation-delay: 1.2s;
  animation-duration: 8s;
}

.sotumec-adn-v2__photocloud-item--3 {
  width: 170px;
  height: 170px;
  bottom: 30px;
  left: 30px;
  transform: rotate(-3deg);
  z-index: 2;
  animation-delay: 2.4s;
  animation-duration: 6.5s;
}

.sotumec-adn-v2__photocloud-item--4 {
  width: 160px;
  height: 200px;
  bottom: 0;
  right: 0;
  transform: rotate(5deg);
  z-index: 1;
  animation-delay: 0.6s;
  animation-duration: 7.5s;
}

.sotumec-adn-v2__photocloud-item--5 {
  width: 130px;
  height: 130px;
  top: 150px;
  right: 130px;
  transform: rotate(-8deg);
  z-index: 4;
  animation-delay: 1.8s;
  animation-duration: 9s;
}

.sotumec-adn-v2__photocloud-note {
  position: absolute;
  bottom: -1.75rem;
  left: 0;
}

@keyframes sotumec-photocloud-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-14px) rotate(var(--rot, 0deg));
  }
}

.sotumec-adn-v2__photocloud-item--1 { --rot: -4deg; }
.sotumec-adn-v2__photocloud-item--2 { --rot: 6deg; }
.sotumec-adn-v2__photocloud-item--3 { --rot: -3deg; }
.sotumec-adn-v2__photocloud-item--4 { --rot: 5deg; }
.sotumec-adn-v2__photocloud-item--5 { --rot: -8deg; }

@media (prefers-reduced-motion: reduce) {
  .sotumec-adn-v2__photocloud-item {
    animation: none;
  }
}

@media (max-width: 991px) {
  .sotumec-adn-v2__watermark {
    font-size: 14rem;
  }
  .sotumec-adn-v2__grid {
    grid-template-columns: 1fr;
  }
  .sotumec-adn-v2__photocloud {
    height: 320px;
    max-width: 420px;
    margin: var(--sp-8) auto 0;
  }
}

@media (max-width: 575px) {
  .sotumec-adn-v2__watermark {
    display: none;
  }
  .sotumec-adn-v2__photocloud {
    width: 100%;
    max-width: 280px;
    height: 260px;
  }
}

/* --------------------------------------------------------------------------
   5. Valeurs v2 — cartes avec grand numéro fantôme
   -------------------------------------------------------------------------- */

.sotumec-valeurs-v2 {
  background: var(--color-bg);
}

/* Révision 05/10/2026 : 5 colonnes de ~227 px avec 40 px de marge interne ne
   laissaient que ~150 px au texte (2-3 mots par ligne, petit et gris).
   Cartes plus larges (3 + 2 centrées), pictogramme en pastille, texte plus
   grand ; disposition horizontale compacte sur mobile. */
.sotumec-valeurs-v2 .sotumec-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6);
}

.sotumec-valeurs-v2 .sotumec-grid > .sotumec-card-valeur-v2 {
  flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3);
}

.sotumec-card-valeur-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sotumec-card-valeur-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
}

.sotumec-card-valeur-v2:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}

.sotumec-card-valeur-v2__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sotumec-card-valeur-v2:hover .sotumec-card-valeur-v2__icon {
  background: var(--color-primary);
  color: var(--sotumec-white);
}

.sotumec-card-valeur-v2__icon svg {
  width: 28px;
  height: 28px;
}

.sotumec-card-valeur-v2__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.sotumec-card-valeur-v2__desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 991px) {
  .sotumec-valeurs-v2 .sotumec-grid > .sotumec-card-valeur-v2 {
    flex-basis: calc((100% - var(--sp-6)) / 2);
  }
}

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

  .sotumec-valeurs-v2 .sotumec-grid > .sotumec-card-valeur-v2 {
    flex-basis: 100%;
  }

  .sotumec-card-valeur-v2 {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-6) var(--sp-5);
  }

  .sotumec-card-valeur-v2__icon {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 0;
  }

  .sotumec-card-valeur-v2__icon svg {
    width: 24px;
    height: 24px;
  }

  .sotumec-card-valeur-v2__title {
    font-size: 1.125rem;
    margin-top: var(--sp-1);
  }

  .sotumec-card-valeur-v2__desc {
    font-size: 0.95rem;
  }
}

/* --------------------------------------------------------------------------
   6. Certifications v2 — grille de placeholders bordés
   -------------------------------------------------------------------------- */

.sotumec-certifications-v2 {
  background: var(--color-bg);
}

.sotumec-logos-grid-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}

.sotumec-logo-placeholder {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--sotumec-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-3);
  text-align: center;
  transition: border-color var(--dur) var(--ease), border-style var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sotumec-logo-placeholder img {
  max-width: 100%;
  max-height: 70%;
  width: auto;
  height: auto;
}

.sotumec-logo-placeholder__name {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.sotumec-logo-placeholder__hint {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.sotumec-logo-placeholder--empty {
  opacity: 0.6;
}

.sotumec-logo-placeholder:hover {
  border-style: solid;
  border-color: var(--color-primary);
  transform: scale(1.03);
  box-shadow: var(--shadow);
}

@media (max-width: 991px) {
  .sotumec-logos-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .sotumec-logos-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Certifications v3 — cartes détaillées (sigle + validité + description) -- */

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

.sotumec-certif-card {
  position: relative;
  background: var(--sotumec-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* Corrigé : --sp-7 n'existait pas -> le padding tombait à 0 et les
     logos se retrouvaient collés en haut à gauche de la carte. */
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.sotumec-certif-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.sotumec-certif-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
  flex: 1 1 auto;
  min-width: 0;
}

/* 60 px de haut : les logos carrés (AFAQ ISO, médaille EcoVadis) restaient
   minuscules à 44 px ; les logos larges restent bornés par max-width. */
.sotumec-certif-card__logo img {
  max-height: 60px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sotumec-certif-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.sotumec-certif-card__sigle {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-left: auto;
}

.sotumec-certif-card__since {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-secondary);
  margin: 0 0 var(--sp-3);
}

.sotumec-certif-card__name {
  font-size: 0.85rem;
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
}

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

.sotumec-certif-card__badge {
  position: absolute;
  bottom: var(--sp-3);
  left: var(--sp-5);
  font-size: 0.7rem;
}

.sotumec-certif-card--clickable {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sotumec-certif-card--clickable:hover .sotumec-certif-card__consult {
  color: var(--color-primary);
}

.sotumec-certif-card__consult {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
  transition: color var(--dur) var(--ease);
}

.sotumec-certif-card__consult svg {
  width: 16px;
  height: 16px;
}

.sotumec-certif-card--text .sotumec-certif-card__top {
  justify-content: flex-start;
}

.sotumec-certif-card__score {
  font-size: var(--fs-small);
  margin-bottom: var(--sp-2);
}

.sotumec-certif-card--logo {
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}

.sotumec-certif-card--logo img {
  max-width: 100%;
  max-height: 90px;
  width: auto;
  height: auto;
}

@media (max-width: 991px) {
  .sotumec-certif-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* --------------------------------------------------------------------------
   7. Clients v2 — bandeau marquee + placeholders
   -------------------------------------------------------------------------- */

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

.sotumec-clients-v2__marquee {
  overflow: hidden;
  margin-block: var(--sp-10);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sotumec-clients-v2__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sotumecMarquee 40s linear infinite;
}

.sotumec-clients-v2__marquee:hover .sotumec-clients-v2__track {
  animation-play-state: paused;
}

@keyframes sotumecMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.sotumec-logo-placeholder--client {
  flex-shrink: 0;
  width: 200px;
  height: 100px;
  margin-inline: var(--sp-4);
  border-style: solid;
  border-color: var(--color-border);
  /* Fond clair par défaut : les logos couleur restent naturels.
     Réserver .sotumec-logo-placeholder--dark aux éventuels logos blancs. */
  background: var(--sotumec-white);
  box-shadow: none;
}

.sotumec-logo-placeholder--client:hover {
  border-color: var(--color-primary);
  transform: none;
  box-shadow: none;
}

.sotumec-logo-placeholder--client .sotumec-logo-placeholder__name {
  font-size: 0.95rem;
}

.sotumec-logo-placeholder--client.sotumec-logo-placeholder--dark {
  background: #1e2428;
  border-color: rgba(255, 255, 255, 0.12);
}

.sotumec-logo-placeholder--client.sotumec-logo-placeholder--dark .sotumec-logo-placeholder__name {
  color: var(--sotumec-white);
}

.sotumec-clients-v2__note {
  text-align: center;
  margin-top: var(--sp-2);
}

@media (prefers-reduced-motion: reduce) {
  .sotumec-clients-v2__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   8. Agences v3 — vraie carte interactive Leaflet/OSM + liste cartes
   -------------------------------------------------------------------------- */

.sotumec-agences-v2 {
  background: var(--color-bg);
}

.sotumec-agences-v2__layout {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: var(--sp-12);
  align-items: start;
}

.sotumec-agences-v2__map {
  background: var(--sotumec-taupe-tint);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.sotumec-leaflet-map {
  width: 100%;
  height: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #dfe7ec;
}

/* Carte plus visible (retour client) : fond coloré non filtré, cadre et ombre. */
.sotumec-leaflet-map {
  box-shadow: var(--shadow);
}

/* Pins de marque étiquetés (révision 09/2026) */
.sotumec-map-pin {
  background: none;
  border: 0;
}
.sotumec-map-pin__marker {
  position: relative;
  display: block;
  width: 28px;
  height: 36px;
  filter: drop-shadow(0 3px 4px rgba(36, 39, 41, 0.35));
  transition: transform var(--dur) var(--ease);
  transform-origin: 50% 100%;
}
.sotumec-map-pin__marker svg {
  width: 100%;
  height: 100%;
  fill: var(--color-primary);
}
.sotumec-map-pin--base .sotumec-map-pin__marker {
  width: 22px;
  height: 28px;
  margin: 8px 0 0 3px;
}
.sotumec-map-pin--base .sotumec-map-pin__marker svg {
  fill: var(--color-secondary);
}
.sotumec-map-pin--main .sotumec-map-pin__marker::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 26px;
  height: 10px;
  margin-left: -13px;
  border-radius: 50%;
  background: rgba(0, 98, 163, 0.45);
  animation: sotumec-map-pulse 2s ease-out infinite;
  z-index: -1;
}
@keyframes sotumec-map-pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.sotumec-map-pin:hover .sotumec-map-pin__marker {
  transform: scale(1.12);
}
.sotumec-map-pin__label {
  position: absolute;
  left: 32px;
  top: 6px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--sotumec-white);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  padding: 5px 9px;
  box-shadow: var(--shadow-sm);
}
.sotumec-map-pin--base .sotumec-map-pin__label {
  top: 12px;
  left: 28px;
  background: var(--sotumec-white);
  color: var(--color-secondary);
  border: 1px solid var(--color-border);
}
@media (prefers-reduced-motion: reduce) {
  .sotumec-map-pin--main .sotumec-map-pin__marker::before { animation: none; }
}

.sotumec-leaflet-map .leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm);
}

.sotumec-leaflet-map .leaflet-popup-content {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

.sotumec-leaflet-map .leaflet-popup-content strong {
  display: block;
  color: var(--color-text);
  margin-bottom: 2px;
}

.sotumec-map-pin-agence {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-primary);
  border: 2px solid var(--sotumec-white);
  box-shadow: var(--shadow);
  transform: rotate(-45deg);
}

.sotumec-map-pin-secteur {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 2px solid var(--sotumec-white);
  box-shadow: var(--shadow-sm);
}

.sotumec-agences-v2__map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
  padding-left: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.sotumec-agences-v2__map-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sotumec-map-legend-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.sotumec-map-legend-dot--agence {
  background: var(--color-primary);
}

.sotumec-map-legend-dot--secteur {
  background: var(--color-secondary);
}

.sotumec-agences-v2__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

/* Allégé (retour client) : sur l'accueil, on ne garde plus que le nom de
   chaque site (doublon des fiches complètes évité, déjà sur /contact/). */
.sotumec-agences-v2__list--light {
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--sp-3);
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.sotumec-agence-mini {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}

.sotumec-agence-mini:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.sotumec-agence-mini__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  background: rgba(0, 98, 163, 0.1);
  border-radius: var(--radius-pill, 999px);
  padding: 3px var(--sp-2);
}

.sotumec-agence-mini__nom {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-medium);
}

.sotumec-agence-mini__badge--base {
  color: var(--color-secondary);
  background: rgba(118, 106, 99, 0.12);
}

.sotumec-bases-vie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sotumec-bases-vie li {
  display: flex;
  flex-direction: column;
}

.sotumec-agence-mini__nom svg {
  width: 15px;
  height: 15px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.sotumec-agences-v2__cta {
  margin-top: var(--sp-4);
  justify-self: start;
}

/* Audit 02/10/2026 : flèche à taille fixe (elle grossissait quand le libellé
   passait sur plusieurs lignes) + bouton pleine largeur sur mobile. */
.sotumec-agences-v2__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .sotumec-agences-v2__cta {
    justify-self: stretch;
  }
}

.sotumec-card-agence-v2 {
  position: relative;
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  border: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  scroll-margin-top: var(--sp-24);
}

.sotumec-card-agence-v2.is-highlighted {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.sotumec-card-agence-v2__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  background: rgba(0, 98, 163, 0.1);
  border-radius: var(--radius-pill, 999px);
  padding: 3px var(--sp-2);
  margin-bottom: var(--sp-2);
}

.sotumec-card-agence-v2__name {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.sotumec-card-agence-v2__address {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-1);
}

.sotumec-card-agence-v2__address svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-secondary);
}

.sotumec-card-agence-v2__horaires {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
}

.sotumec-card-agence-v2__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sotumec-card-agence-v2__meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.sotumec-card-agence-v2__meta svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 991px) {
  /* Audit 02/10/2026 : minmax(0, …) sinon la colonne s'élargissait à la
     largeur min. de son contenu (+23px à 375px, +78px à 320px, carte coupée). */
  .sotumec-agences-v2__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .sotumec-agences-v2__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .sotumec-leaflet-map {
    height: 320px;
  }
}

/* --------------------------------------------------------------------------
   9. Groupe teaser v2 — fond anthracite + grille de 9 logos sociétés
   -------------------------------------------------------------------------- */

.sotumec-groupe-v2 {
  background: var(--gradient-dark);
  padding-block: var(--sp-24);
}

.sotumec-groupe-v2__inner {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: var(--sp-12);
  align-items: center;
}

.sotumec-groupe-v2__text {
  color: var(--sotumec-white);
}

.sotumec-groupe-v2__title {
  color: var(--sotumec-white);
  font-size: var(--fs-h2);
  margin: var(--sp-3) 0 var(--sp-4);
}

.sotumec-groupe-v2__lead {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-8);
  max-width: 420px;
}

.sotumec-groupe-v2__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.sotumec-societe-card {
  position: relative;
  background: var(--sotumec-white);
  border-radius: var(--radius);
  padding: var(--sp-6);
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

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

.sotumec-societe-card__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background: var(--color-primary);
  color: var(--sotumec-white);
  font-size: 0.65rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
}

.sotumec-societe-card__logo {
  max-height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Logos PNG couleur fournis : plus de N&B */
  filter: none;
  opacity: 1;
}

.sotumec-societe-card:hover .sotumec-societe-card__logo {
  filter: none;
  opacity: 1;
}

.sotumec-societe-card__logo img {
  width: 100%;
  max-width: 200px;
  height: 72px;
  object-fit: contain;
}

.sotumec-societe-card__logo span {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.sotumec-societe-card__specialite {
  font-size: 0.72rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .sotumec-groupe-v2__inner {
    grid-template-columns: 1fr;
  }
  .sotumec-groupe-v2__lead {
    max-width: none;
  }
  .sotumec-groupe-v2__logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* --------------------------------------------------------------------------
   10. Portraits v2 — citation géante + 3 photos différenciées
   -------------------------------------------------------------------------- */

.sotumec-portraits-v2 {
  background: var(--sotumec-taupe-tint);
  padding-block: var(--sp-24);
}

.sotumec-portraits-v2__head .sotumec-section-intro {
  max-width: 760px;
  margin-inline: auto;
}

.sotumec-portraits-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.sotumec-portrait-card {
  position: relative;
}

.sotumec-portrait-card__image {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-border);
}

.sotumec-portrait-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform var(--dur-slow) var(--ease);
}

.sotumec-portrait-card:hover .sotumec-portrait-card__image img {
  transform: scale(1.04);
}

.sotumec-portrait-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--color-primary-dark, var(--color-primary)) 0%, var(--color-primary) 100%);
}

.sotumec-portrait-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  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-card__avatar svg {
  width: 40px;
  height: 40px;
}

.sotumec-portrait-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(36, 39, 41, 0.85) 100%);
}

.sotumec-portrait-card__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
}

.sotumec-portrait-card__info {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-6);
  right: var(--sp-6);
  color: var(--sotumec-white);
}

.sotumec-portrait-card__name {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--sotumec-white);
  margin-bottom: var(--sp-1);
}

.sotumec-portrait-card__job {
  display: block;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
}

.sotumec-portraits-v2__cta {
  text-align: center;
  margin-top: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.sotumec-portraits-v2__cta-note {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .sotumec-portraits-v2__grid {
    grid-template-columns: 1fr;
  }
  .sotumec-portraits-v2__quote p {
    font-size: 1.375rem;
  }
}

/* --------------------------------------------------------------------------
   11. Actualités v2 — cartes premium horizontales
   -------------------------------------------------------------------------- */

.sotumec-actualites-v2 {
  background: var(--color-bg);
}

.sotumec-actualites-v2__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.sotumec-actu-card-v2 {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 0;
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

a.sotumec-actu-card-v2:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.sotumec-actu-card-v2--draft {
  opacity: 0.85;
}

.sotumec-actu-card-v2__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.sotumec-actu-card-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-actu-card-v2__body {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sotumec-actu-card-v2__date {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.75rem;
  color: var(--color-primary);
  background: var(--sotumec-blue-tint);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-3);
}

.sotumec-actu-card-v2__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
  margin-bottom: var(--sp-3);
}

.sotumec-actu-card-v2__excerpt {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sotumec-actu-card-v2__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  color: var(--color-primary);
}

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

a.sotumec-actu-card-v2:hover .sotumec-actu-card-v2__link svg {
  transform: translateX(4px);
}

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

/* --------------------------------------------------------------------------
   12. CTA final v2 — background photo dramatique + overlay
   -------------------------------------------------------------------------- */

.sotumec-cta-final-v2 {
  position: relative;
  min-height: 480px;
  padding-block: var(--sp-24);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.sotumec-cta-final-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sotumec-cta-final-v2__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sotumec-cta-final-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 98, 163, 0.92) 0%, rgba(36, 39, 41, 0.85) 100%);
}

/* Correctif (retour client) : la section précédente ("Chez Sotumec", fond
   clair) s'arrêtait net sur cette photo sombre -> effet de "barre"/rupture
   disgracieuse. On fond le haut de la photo dans la couleur de fond de la
   section précédente pour une transition propre. */
.sotumec-cta-final-v2::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(3rem, 10vw, 6rem);
  background: linear-gradient(to bottom, var(--sotumec-taupe-tint) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.sotumec-cta-final-v2 .sotumec-container {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-24) var(--sp-8);
}

.sotumec-cta-final-v2__title {
  color: var(--sotumec-white);
  font-size: var(--fs-h1);
  margin: var(--sp-3) 0 var(--sp-4);
}

.sotumec-cta-final-v2__subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-8);
}

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

.sotumec-cta-final-v2__buttons svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 575px) {
  .sotumec-cta-final-v2__buttons {
    flex-direction: column;
    align-items: stretch;
  }
}

.sotumec-agence-mini__specialite {
  width: 100%;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.sotumec-bases-vie .sotumec-agence-mini__specialite {
  padding-left: calc(15px + var(--sp-2));
}

.sotumec-actualites-v2__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.sotumec-actualites-v2__ctas .sotumec-btn svg {
  width: 18px;
  height: 18px;
}

/* Supprime les liserés blancs entre tuiles (mix-blend-mode de Leaflet 1.9
   + arrondis sub-pixel dans Chrome). */
.sotumec-leaflet-map.leaflet-container img.leaflet-tile {
  mix-blend-mode: normal;
  width: 256.5px !important;
  height: 256.5px !important;
}

/* Carrousel des actualités (accueil) */
.sotumec-actus-carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.sotumec-actus-carousel__nav {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.sotumec-actus-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--sotumec-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sotumec-actus-carousel__btn:hover,
.sotumec-actus-carousel__btn:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--sotumec-white);
}
.sotumec-actus-carousel__btn svg { width: 20px; height: 20px; }
.sotumec-actus-carousel__btn[data-carousel-prev] svg { transform: rotate(180deg); }
.sotumec-actus-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--sp-6)) / 3);
  gap: var(--sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--sp-1);
  scrollbar-width: none;
  padding: var(--sp-2) var(--sp-1) var(--sp-6);
  margin: 0 calc(-1 * var(--sp-1));
}
.sotumec-actus-carousel__track::-webkit-scrollbar { display: none; }
.sotumec-actus-carousel__track > * { scroll-snap-align: start; }
@media (max-width: 991px) {
  .sotumec-actus-carousel__track { grid-auto-columns: calc((100% - var(--sp-6)) / 2); }
}
@media (max-width: 575px) {
  .sotumec-actus-carousel__track { grid-auto-columns: 85%; gap: var(--sp-4); }
  .sotumec-actus-carousel__nav { margin-bottom: var(--sp-6); }
  .sotumec-actus-carousel__btn { width: 40px; height: 40px; }
}

/* Carte sur mobile : étiquettes masquées (sauf siège) pour éviter les
   chevauchements ; les noms restent listés sous la carte et en infobulle. */
@media (max-width: 575px) {
  .sotumec-leaflet-map { height: 380px; }
  .sotumec-map-pin:not(.sotumec-map-pin--main) .sotumec-map-pin__label { display: none; }
}