/* ==========================================================================
   SuperHumAIn — Accueil (index-superhum-6)
   Couche de raffinement visuel : alignement, grille, rythme vertical,
   cohérence des composants. Chargée APRÈS superhum-bexon.css.
   Aucun contenu rédactionnel n'est modifié ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Jetons
   Le <style> de la page appelle --sh-blue / --sh-navy / --sh-white, définis
   à l'origine dans superhum.css qui n'est pas chargée sur cette page :
   bordures, badges et chiffres-clés tombaient donc en déclaration invalide.
   On les rattache à la palette réellement active (superhum-bexon.css).
   -------------------------------------------------------------------------- */
:root {
  --sh-blue: #3b66ff;
  --sh-blue-ink: #2a4fd8;
  --sh-blue-soft: rgba(59, 102, 255, 0.10);
  --sh-blue-line: rgba(59, 102, 255, 0.22);
  --sh-navy: #050a1e;
  --sh-white: #ffffff;

  --sh-line: rgba(5, 10, 30, 0.10);
  --sh-line-strong: rgba(5, 10, 30, 0.16);
  --sh-ink-70: rgba(5, 10, 30, 0.70);

  --sh-on-dark: rgba(255, 255, 255, 0.72);
  --sh-on-dark-dim: rgba(255, 255, 255, 0.50);
  --sh-line-dark: rgba(255, 255, 255, 0.14);

  /* Mesures de lecture — trois largeurs, pas une par bloc.
     Avant : chaque bloc centré avait sa propre largeur (736, 880, 928, 966,
     1076 px), ce qui donnait autant d'arêtes différentes en descendant. */
  --sh-measure-title: 46rem;   /* 736px — titres et grandes affirmations */
  --sh-measure-panel: 55rem;   /* 880px — blocs encadrés et listes centrées */
  --sh-measure-lead:  40rem;   /* 640px — paragraphes d'accompagnement */
  --sh-measure-prose: 42rem;

  /* Retrait intérieur unique des cartes : le texte de toutes les familles
     de cartes démarre sur la même verticale (72 + 32 = 104px). */
  --sh-card-pad-x: 32px;

  --sh-radius: 14px;
  --sh-radius-lg: 18px;
  --sh-gap: 24px;

  /* Marge visuelle de la page = bord gauche des cartes et des titres.
     Sert à raccrocher le haut de page sur la même verticale. */
  --sh-page-x: 12px;
  --sh-hero-inset: 0px;
}

@media (min-width: 576px)  { :root { --sh-hero-inset: calc((100vw - 540px) / 2 - 3px); } }
@media (min-width: 768px)  { :root { --sh-hero-inset: calc((100vw - 720px) / 2 - 3px); } }
@media (min-width: 992px)  { :root { --sh-hero-inset: calc((100vw - 960px) / 2 - 3px); } }
@media (min-width: 1200px) { :root { --sh-hero-inset: calc((100vw - 1140px) / 2 - 3px); } }
@media (min-width: 1400px) { :root { --sh-hero-inset: calc((100vw - 1320px) / 2 - 3px); } }


/* --------------------------------------------------------------------------
   1. Grille — gouttières homogènes
   .service-item porte margin-bottom:30px qui s'ajoutait à la gouttière
   Bootstrap : l'écart vertical entre cartes (54px) ne correspondait pas
   à l'écart horizontal (24px). On ramène les deux à la même valeur.
   -------------------------------------------------------------------------- */
.superhum-h6 .service-item { margin-bottom: 0; }

.superhum-h6 .row-gap-4 { --bs-gutter-y: var(--sh-gap); }

/* Colonnes en flex : les cartes d'une même rangée partagent la hauteur. */
.superhum-h6 .row-gap-4 > [class*="col-"] { display: flex; }
.superhum-h6 .row-gap-4 > [class*="col-"] > * { width: 100%; }


/* --------------------------------------------------------------------------
   2. Titres de section — recentrage
   .tj-service-section .sec-heading.style-2 neutralise les marges auto :
   les blocs « centrés » se retrouvaient collés à gauche, et à trois
   abscisses différentes selon la colonne parente (72px / 182px / centré).
   -------------------------------------------------------------------------- */
.superhum-h6 .sec-heading.sec-heading-centered,
.superhum-h6 .tj-service-section .sec-heading.sec-heading-centered,
.superhum-h6 .tj-service-section .sec-heading.sec-heading-centered.style-2 {
  margin-inline: auto;
  max-width: var(--sh-measure-title);
  text-align: center;
}

.superhum-h6 .sec-heading.text-center {
  margin-inline: auto;
  max-width: var(--sh-measure-title);
}

.superhum-h6 .sec-heading { margin-bottom: 56px; }
.superhum-h6 .sec-heading .sec-title { letter-spacing: -0.02em; }

/* --- Colonne de mesure commune à tous les blocs centrés ---
   Chaque bloc héritait de la largeur de sa colonne Bootstrap (col-lg-9 → 966px,
   col-lg-10 → 1076px) ou d'un max-width improvisé : cinq arêtes gauches
   différentes se succédaient verticalement. Trois mesures, centrées, suffisent. */

/* Grandes affirmations — même largeur que les titres de section */
.superhum-h6 .sh-manifesto-text,
.superhum-h6 .sh-signal-punch {
  max-width: var(--sh-measure-title);
  margin-inline: auto;
}

/* Blocs encadrés et listes centrées */
.superhum-h6 .sh-endorsement,
.superhum-h6 .sh-reco,
.superhum-h6 .sh-transmit-list,
.superhum-h6 .sh-sector-list {
  max-width: var(--sh-measure-panel);
  margin-inline: auto;
}

/* Paragraphes d'accompagnement */
.superhum-h6 .sh-persp-lead,
.superhum-h6 .sh-sector-note,
.superhum-h6 .sh-all-services-text,
.superhum-h6 .sh-reco-desc,
.superhum-h6 .sh-family-lead {
  max-width: var(--sh-measure-lead);
  margin-inline: auto;
}

/* Pastille de section — un seul et même objet sur toute la page. */
.superhum-h6 .sec-heading .sub-title {
  background-color: var(--sh-blue-soft);
  color: var(--sh-blue);
  border: 0;
  padding: 7px 14px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
}
.superhum-h6 .sec-heading .sub-title i { color: var(--sh-blue); }

/* Sur fond sombre */
.superhum-h6 .h10-process .sec-heading .sub-title,
.superhum-h6 .h6-about .sec-heading .sub-title {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--sh-white);
}
.superhum-h6 .h10-process .sec-heading .sub-title i,
.superhum-h6 .h6-about .sec-heading .sub-title i { color: var(--sh-blue); }


/* --------------------------------------------------------------------------
   3. Haut de page
   -------------------------------------------------------------------------- */

/* La colonne animation démarrait à 15px du bord alors que tout le reste de
   la page démarre sur la marge de contenu. On la raccroche à cette verticale. */
@media (min-width: 992px) {
  .superhum-h6 .h6-hero .banner-area {
    gap: 40px;
    align-items: stretch;
  }

  /* Le haut du cadre d'animation tombe sur la première ligne du titre :
     une seule ligne d'alignement partagée par les deux colonnes.
     Le retrait haut reprend celui de la carte éditoriale, palier par palier. */
  .superhum-h6 .h6-hero .banner-right-box {
    padding-inline-start: var(--sh-hero-inset);
    padding-top: 195px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Le bord droit du texte tombe sur la marge de contenu de la page,
     comme les cartes des sections suivantes. */
  .superhum-h6 .h6-hero .banner-left-box {
    width: 46%;
    padding-inline-end: var(--sh-hero-inset);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .superhum-h6 .h6-hero .banner-right-box { padding-top: 180px; }
}

@media (min-width: 1601px) {
  .superhum-h6 .h6-hero .banner-right-box { padding-top: 225px; padding-bottom: 60px; }
}

/* Surface du bloc éditorial : l'image bg-wave.jpg référencée n'existe pas
   dans assets/ (404) et le dégradé seul se confondait avec le fond de page.
   On repose sur un dégradé de marque, sans requête morte. */
.superhum-h6 .h6-hero .banner-left-box {
  background-image:
    radial-gradient(120% 120% at 100% 0%, rgba(59, 102, 255, 0.14) 0%, rgba(59, 102, 255, 0) 58%),
    linear-gradient(160deg, #ffffff 0%, #f4f6fa 46%, #e9edf5 100%);
  background-color: #f4f6fa;
  border: 1px solid var(--sh-line);
  box-shadow: 0 1px 2px rgba(5, 10, 30, 0.03);
}

/* Cadre de l'animation : ratio fixe (la vidéo est en 16/9, l'affiche en 1,16)
   → plus de saut de mise en page au chargement.
   .banner-img impose height:100% : le cadre s'étirait sur toute la colonne
   et laissait un grand aplat blanc sous l'animation. */
.superhum-h6 .sh-hero-video {
  height: auto;
  flex: 0 0 auto;
  background: var(--sh-white);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(5, 10, 30, 0.03);
}
.superhum-h6 .sh-hero-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
  min-height: 0;
  object-fit: cover;
  background-color: var(--sh-white);
}

/* Signature de marque : centrée sur l'axe de l'animation, pas sur la colonne. */
.superhum-h6 .sh-hero-brand { margin-top: 28px; }
.superhum-h6 .sh-hero-brand-name { color: var(--sh-navy); }
.superhum-h6 .sh-hero-brand-name span { color: var(--sh-blue); }
.superhum-h6 .sh-hero-brand-slogan { color: var(--sh-ink-70); opacity: 1; }
.superhum-h6 .sh-hero-brand-tag { color: rgba(5, 10, 30, 0.42); opacity: 1; }

/* Bloc titre + boutons */
.superhum-h6 .h6-hero .banner-content .banner-title { max-width: 100%; }

.superhum-h6 .h6-hero .btn-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-bottom: 0;
}

/* Le sous-bloc était plafonné à 348px dans une colonne deux fois plus large. */
.superhum-h6 .h6-hero-bottom { padding-top: 44px; }
.superhum-h6 .h6-hero-history { max-width: 100%; }
.superhum-h6 .h6-hero-history-desc { max-width: 34rem; }

/* Références du haut de page : la liste sortait sans style (puces natives). */
.superhum-h6 .sh-cred-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 22px 0 0;
}
.superhum-h6 .sh-cred-list li {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-navy);
  padding: 8px 13px;
  border: 1px solid var(--sh-line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .superhum-h6 .h6-hero .banner-area { gap: 24px; }
  .superhum-h6 .h6-hero .banner-right-box { padding-inline: 0; }
}


/* --------------------------------------------------------------------------
   4. Cartes — socle commun
   -------------------------------------------------------------------------- */
.superhum-h6 .service-item.style-4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  box-shadow: 0 1px 2px rgba(5, 10, 30, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Le survol repeignait toute la carte en bleu : les mots-clés en gras et la
   phrase d'accroche perdaient leur hiérarchie. Élévation discrète à la place. */
.superhum-h6 .service-item.style-4:hover {
  background-color: var(--sh-white);
  border-color: var(--sh-blue-line);
  box-shadow: 0 14px 34px rgba(5, 10, 30, 0.09);
  transform: translateY(-4px);
}
.superhum-h6 .service-item.style-4:hover .title,
.superhum-h6 .service-item.style-4:hover .title a { color: var(--sh-navy); }
.superhum-h6 .service-item.style-4:hover .desc { color: var(--tj-color-text-body); }
.superhum-h6 .service-item.style-4:hover .desc a { color: var(--sh-blue); }
.superhum-h6 .service-item.style-4:hover .service-icon { background: var(--sh-blue-soft); }
.superhum-h6 .service-item.style-4:hover .text-btn .btn-text { color: var(--sh-navy); }
.superhum-h6 .service-item.style-4:hover .text-btn .btn-icon { background-color: var(--sh-blue); }

/* Pastille d'icône : le dégradé était resté sur le turquoise du gabarit. */
.superhum-h6 .service-item .service-icon {
  background: linear-gradient(-45deg,
      rgba(59, 102, 255, 0.20) 0%,
      rgba(59, 102, 255, 0) 50%,
      rgba(59, 102, 255, 0.20) 100%);
  border: 1px solid var(--sh-blue-line);
}


/* --------------------------------------------------------------------------
   5. Signaux faibles
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-signal {
  padding: 30px var(--sh-card-pad-x) 32px;
  justify-content: flex-start;
}

/* Le numéro à 34px / opacité .18 se lisait comme une tache grise.
   Repère d'index compact, à l'échelle de la carte. */
.superhum-h6 .sh-signal-num {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sh-blue);
  opacity: 1;
  margin-bottom: 0;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sh-line);
}
.superhum-h6 .sh-signal .service-content { display: flex; flex: 1 1 auto; }
.superhum-h6 .sh-signal .desc { margin: 0; }

.superhum-h6 .sh-signal-punch {
  margin-top: 56px;
  color: var(--sh-navy);
}
.superhum-h6 .sh-signal-punch span { color: var(--sh-blue); opacity: 1; }


/* --------------------------------------------------------------------------
   6. Manifeste — la respiration devient une structure
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-manifesto {
  padding: 84px 0;
  border-top: 1px solid var(--sh-line);
  border-bottom: 1px solid var(--sh-line);
}
.superhum-h6 .sh-manifesto-text { color: var(--sh-navy); }
.superhum-h6 .sh-manifesto-text span { color: var(--sh-ink-70); opacity: 1; }


/* --------------------------------------------------------------------------
   7. Offres — alignement des trois cartes
   Icône, titre, corps, lien : même ligne de base d'une carte à l'autre.
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-enjeu { padding: 40px var(--sh-card-pad-x) 36px; }

/* .service-item.style-4 réservait 95px sous l'icône pour un gabarit vide. */
.superhum-h6 .sh-enjeu .service-icon { margin-bottom: 30px; }

.superhum-h6 .sh-enjeu .service-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Le plafond de 275px cassait un titre sur deux lignes et décalait le corps
   de texte d'une carte à l'autre. Deux interlignes réservés pour tout le
   monde : les trois corps de texte démarrent sur la même ligne. */
.superhum-h6 .sh-enjeu .title {
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
/* La reserve de deux lignes n'a de sens qu'en grille a trois colonnes, ou les
   titres se cassent inegalement. En deux colonnes elle laisserait une ligne
   vide sous chaque icone. */
.superhum-h6 [class*="col-lg-4"] .sh-enjeu .title {
  min-height: 64px;      /* repli */
  min-height: 2lh;
}

.superhum-h6 .sh-enjeu .sh-card-punch { color: var(--sh-blue); }

/* Le lien de fin de carte se cale sur le bas, quelle que soit la longueur
   du texte : les trois appels à l'action sont sur la même ligne. */
.superhum-h6 .sh-enjeu .text-btn {
  margin-top: auto;
  padding-top: 28px;
  align-self: flex-start;
  justify-content: flex-start;
}

/* Carte signature — la pastille déborde sur la bordure, aucun retrait
   supplémentaire n'est nécessaire : le contenu reste aligné sur les voisines. */
.superhum-h6 .sh-moat {
  border: 1.5px solid var(--sh-blue);
  box-shadow: 0 0 0 4px rgba(59, 102, 255, 0.07);
}
.superhum-h6 .sh-moat::before {
  background: var(--sh-blue);
  color: var(--sh-white);
  top: -11px;
  inset-inline-start: 30px;
  z-index: 2;
}
.superhum-h6 .sh-moat:hover {
  border-color: var(--sh-blue);
  box-shadow: 0 0 0 4px rgba(59, 102, 255, 0.10), 0 14px 34px rgba(5, 10, 30, 0.09);
}

/* Renvoi vers l'offre complète */
.superhum-h6 .sh-all-services {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--sh-line);
}


/* --------------------------------------------------------------------------
   8. Expérience terrain
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-sector-list { gap: 10px; margin-bottom: 26px; }
.superhum-h6 .sh-sector-list li {
  border: 1px solid var(--sh-line-strong);
  color: var(--sh-navy);
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  font-size: 14px;
  padding: 9px 18px;
}
.superhum-h6 .sh-sector-note { margin-bottom: 88px; }

/* Le bloc recommandations perdait sa bordure (variable non définie). */
.superhum-h6 .sh-reco {
  border: 1.5px solid var(--sh-blue);
  border-radius: var(--sh-radius-lg);
  background: var(--sh-white);
  box-shadow: 0 0 0 4px rgba(59, 102, 255, 0.07);
}
.superhum-h6 .sh-reco-count { color: var(--sh-blue); }
.superhum-h6 .sh-reco-lead { color: var(--sh-navy); }
.superhum-h6 .sh-reco-desc { opacity: 1; color: var(--tj-color-text-body); }


/* --------------------------------------------------------------------------
   9. La méthode — citation
   .sh-endorsement remettait padding:0 / border:0 tout en gardant le fond :
   le texte touchait les bords de son cadre.
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-endorsement {
  padding: 48px 56px 44px;
  border: 1px solid var(--sh-line);
  border-inline-start: 3px solid var(--sh-blue);
  border-radius: var(--sh-radius-lg);
  background: var(--sh-white);
}
.superhum-h6 .sh-endorsement::before {
  color: var(--sh-blue);
  margin-bottom: 18px;
}
.superhum-h6 .sh-endorsement-quote {
  color: var(--sh-navy);
  margin-bottom: 24px;
}
.superhum-h6 .sh-endorsement-author { opacity: 1; color: var(--sh-ink-70); }
.superhum-h6 .sh-endorsement-author strong { color: var(--sh-navy); }

@media (max-width: 767px) {
  .superhum-h6 .sh-endorsement { padding: 34px 26px 30px; }
}


/* --------------------------------------------------------------------------
   10. Approche (fond sombre)
   -------------------------------------------------------------------------- */
/* Les cartes d'étape utilisaient --tj-color-theme-bg-3, identique au fond de
   la section : ni la carte ni l'onglet du numéro n'étaient visibles, et les
   108px réservés à cet onglet laissaient un vide au-dessus de chaque icône. */
.superhum-h6 .h10-process-wrapper .h10-process-item {
  background-color: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--sh-radius);
  padding: 34px 32px 34px;
}
.superhum-h6 .h10-process-wrapper .h10-process-item:not(:last-child) {
  margin-bottom: var(--sh-gap);
}

/* Le repère d'étape rejoint le flux : numéro, icône, titre et texte
   partagent la même verticale (il était décalé de 30px vers la gauche). */
.superhum-h6 .h10-process-wrapper .h10-process-sln {
  position: static;
  background-color: transparent;
  padding: 0;
  margin-bottom: 22px;
  color: var(--sh-on-dark-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  justify-content: flex-start;
}
.superhum-h6 .h10-process-wrapper .h10-process-sln::before,
.superhum-h6 .h10-process-wrapper .h10-process-sln::after { display: none; }

.superhum-h6 .h10-process-wrapper .h10-process-icon { margin-bottom: 22px; }
.superhum-h6 .h10-process-item .title {
  color: var(--sh-white);
  max-width: 100%;
  margin-bottom: 14px;
}
.superhum-h6 .h10-process-item .desc {
  color: var(--sh-on-dark);
  max-width: 34rem;
}
.superhum-h6 .h10-process .sec-heading .sec-title { color: var(--sh-white); }
.superhum-h6 .h10-process-more { margin-top: 32px; }


/* --------------------------------------------------------------------------
   11. Transmettre
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-family-lead { color: var(--sh-ink-70); opacity: 1; }
.superhum-h6 .sh-transmit-list li { border-color: var(--sh-line); padding: 22px 0; }
.superhum-h6 .sh-transmit-list li:first-child { border-top-color: var(--sh-line); }
.superhum-h6 .sh-transmit-list strong { color: var(--sh-navy); }
.superhum-h6 .sh-transmit-list span { opacity: 1; color: var(--tj-color-text-body); }
.superhum-h6 .sh-transmit-cta { margin-top: 8px; }


/* --------------------------------------------------------------------------
   12. Perspectives
   Le motif bg-network.jpg n'existe pas dans assets/ : le dégradé blanc
   restait seul et coupait la section d'une arête horizontale nette.
   -------------------------------------------------------------------------- */
.superhum-h6 #perspectives::before {
  height: 620px;
  background-image:
    radial-gradient(90% 70% at 50% 0%, rgba(59, 102, 255, 0.10) 0%, rgba(59, 102, 255, 0) 70%);
  background-size: cover;
  background-position: center top;
}

.superhum-h6 .sh-persp-lead { color: var(--sh-ink-70); opacity: 1; }

.superhum-h6 #perspectives .row-gap-4 > [class*="col-"] { display: flex; }

.superhum-h6 .sh-persp-card {
  background-color: var(--sh-white);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid var(--sh-line);
  box-shadow: 0 1px 2px rgba(5, 10, 30, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.superhum-h6 .sh-persp-card:hover {
  transform: translateY(-4px);
  border-color: var(--sh-blue-line);
  box-shadow: 0 14px 34px rgba(5, 10, 30, 0.09);
}

/* Les trois visuels n'ont pas le même format source (386x592 et 640x640) :
   sans ratio imposé, les trois cartes démarraient leur texte à trois hauteurs. */
.superhum-h6 .sh-persp-card .blog-thumb {
  min-height: 0;
  aspect-ratio: 16 / 10;
}
.superhum-h6 .sh-persp-card .blog-thumb img {
  min-height: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.superhum-h6 .sh-persp-card .blog-thumb::before { opacity: 0.12; }

.superhum-h6 .sh-persp-card .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  padding: 26px var(--sh-card-pad-x) 30px;
}
.superhum-h6 .sh-persp-card .blog-meta { margin-bottom: 14px; }
.superhum-h6 .sh-persp-card .blog-content .title { flex: 1 1 auto; }
.superhum-h6 .sh-persp-card .blog-content .text-btn {
  margin-top: 26px;
  align-self: flex-start;
}


/* --------------------------------------------------------------------------
   13. À propos (fond sombre)
   -------------------------------------------------------------------------- */
/* Les quatre paragraphes se lisaient comme un seul bloc compact. */
.superhum-h6 .h6-about-content .sec-heading .desc {
  margin-bottom: 18px;
  max-width: 36rem;
}
.superhum-h6 .h6-about-content .sec-heading .desc:last-child { margin-bottom: 0; }
.superhum-h6 .h6-about-content .sec-heading { margin-bottom: 36px; }
.superhum-h6 .h6-about-content .sec-heading .sec-title { margin-bottom: 22px; }

.superhum-h6 .h6-about-funfact { gap: 0; }
.superhum-h6 .h6-about-funfact .countup-item .count-text {
  color: var(--sh-on-dark);
  line-height: 1.55;
}

/* Les titres académiques étaient empilés en avatars superposés
   (.customers ul li { margin-inline-start:-15px }) et illisibles. */
.superhum-h6 .sh-about-creds ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.superhum-h6 .sh-about-creds ul li,
.superhum-h6 .sh-about-creds ul li:first-child {
  margin-inline-start: 0;
  line-height: 1;
}
.superhum-h6 .sh-about-creds ul li:last-child span,
.superhum-h6 .sh-cred-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--sh-white);
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Encart flottant sur le portrait : lisible sans écraser l'image. */
.superhum-h6 .h6-about-box .customers-box {
  background-color: rgba(5, 10, 30, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sh-radius);
  padding: 24px 24px 26px;
}
.superhum-h6 .h6-about-box .customers-text {
  margin-top: 18px;
  color: var(--sh-white);
}


/* --------------------------------------------------------------------------
   14. Contact
   Le gabarit appliquait ici son visuel turquoise d'origine (h7-cta-bg.webp),
   seul écart chromatique de la page. Remplacé par le bleu/navy de marque.
   -------------------------------------------------------------------------- */
.superhum-h6 #contact.h7-cta {
  background-image:
    radial-gradient(110% 130% at 8% 0%, rgba(59, 102, 255, 0.34) 0%, rgba(59, 102, 255, 0) 56%),
    linear-gradient(135deg, #050a1e 0%, #0a1330 52%, #0d1c4a 100%);
  background-color: var(--sh-navy);
  background-size: cover;
  background-position: center;
  border-radius: var(--sh-radius-lg);
}

.superhum-h6 #contact .cta-content { align-items: flex-start; }
.superhum-h6 #contact .cta-content .title {
  color: var(--sh-white);
  max-width: 20ch;
  margin-bottom: 20px;
}
.superhum-h6 #contact .cta-content .desc {
  color: var(--sh-on-dark);
  max-width: 40rem;
  margin-bottom: 32px;
}

/* Liste de coordonnées : sortait en puces natives, en gris sur fond sombre. */
.superhum-h6 .sh-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--sh-line-dark);
}
.superhum-h6 .sh-contact-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sh-line-dark);
  color: var(--sh-white);
  line-height: 1.5;
}
.superhum-h6 .sh-contact-list li span {
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-on-dark-dim);
}
.superhum-h6 .sh-contact-list a { color: var(--sh-white); }
.superhum-h6 .sh-contact-list a:hover { color: var(--sh-blue); }

/* Le filet supérieur de la liste tombe sur la première ligne du titre :
   les deux colonnes partagent une ligne d'alignement haute. */
@media (min-width: 992px) {
  .superhum-h6 #contact .row.align-items-center { align-items: flex-start !important; }
  .superhum-h6 #contact .col-lg-5 { padding-top: 58px; }
}


/* Les halos décoratifs du gabarit sont en turquoise #1E8A8A (SVG partagés,
   non modifiables sans casser les autres pages) : on les ramène au bleu. */
.superhum-h6 .bg-shape-3 img,
.superhum-h6 .h6-about-funfact-shape img {
  filter: hue-rotate(48deg) saturate(1.7) brightness(1.1);
}


/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.superhum-h6 .h6-footer { border-top: 1px solid var(--sh-line); }
.superhum-h6 .h6-footer .footer-logo a {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sh-navy);
}
.superhum-h6 .h6-footer .footer-widget .title {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sh-navy);
  margin-bottom: 22px;
}
.superhum-h6 .h6-footer .social-links ul li a {
  background-color: var(--sh-navy);
  color: var(--sh-white);
  border-color: transparent;
}
.superhum-h6 .h6-footer .social-links ul li a:hover { background-color: var(--sh-blue); }
.superhum-h6 .h6-footer .tj-copyright-area { border-top: 1px solid var(--sh-line); }


/* --------------------------------------------------------------------------
   16. Adaptatif — resserrage du rythme sur petits écrans
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* .section-gap-x décale la section de 12px. Sur les sections à fond
     transparent ce retrait est invisible mais décale leur contenu : la
     citation arrivait à 24px quand le bloc voisin arrivait à 12px.
     Sur grand écran le conteneur à largeur fixe se recentrait et masquait
     l'écart ; en fluide il se propage. Les blocs sombres gardent le leur,
     c'est le bord de leur carte. */
  .superhum-h6 #manifeste,
  .superhum-h6 #methode,
  .superhum-h6 #transmettre { margin-inline: 0; }

  .superhum-h6 .sec-heading { margin-bottom: 40px; }
  .superhum-h6 .sh-manifesto { padding: 56px 0; }
  .superhum-h6 .sh-sector-note { margin-bottom: 56px; }
  .superhum-h6 .sh-all-services { margin-top: 40px; padding-top: 32px; }
  .superhum-h6 .sh-signal-punch { margin-top: 40px; }
  .superhum-h6 .sh-enjeu .title { min-height: 0; display: block; }
  .superhum-h6 #contact .cta-content .title { max-width: 100%; }
}

@media (max-width: 575px) {
  .superhum-h6 .sh-enjeu { padding: 30px 22px 28px; }
  .superhum-h6 .sh-signal { padding: 24px 22px 26px; }
  .superhum-h6 .sh-moat::before { inset-inline-start: 22px; }
  .superhum-h6 .sh-persp-card .blog-content { padding: 22px 22px 26px; }
}


/* --------------------------------------------------------------------------
   16 bis. Pages article (Perspectives)
   Le bandeau haut appelait --sh-motif -> bg-network.jpg / bg-wave.jpg, absents
   d'assets/ : la declaration tombait en invalide. Degrade de marque a la place.
   -------------------------------------------------------------------------- */
.superhum-h6 .sh-article::before {
  height: 560px;
  background-image:
    radial-gradient(80% 60% at 50% 0%, rgba(59, 102, 255, 0.12) 0%, rgba(59, 102, 255, 0) 72%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.superhum-h6 .sh-art-cat { background: var(--sh-blue); color: var(--sh-white); }
.superhum-h6 .sh-art-title { color: var(--sh-navy); }
.superhum-h6 .sh-art-meta { border-bottom-color: var(--sh-line); opacity: 1; color: var(--sh-ink-70); }
.superhum-h6 .sh-art-body h2 { color: var(--sh-navy); }
.superhum-h6 .sh-art-quote { border-inline-start-color: var(--sh-blue); color: var(--sh-navy); }
.superhum-h6 .sh-art-list li::before { background: var(--sh-blue); opacity: 1; }
.superhum-h6 .sh-art-said { background: var(--sh-blue-soft); color: var(--sh-navy); }
.superhum-h6 .sh-art-case { border-color: var(--sh-blue-line); }
.superhum-h6 .sh-art-case-label { color: var(--sh-blue); }
.superhum-h6 .sh-art-end {
  border: 1.5px solid var(--sh-blue);
  box-shadow: 0 0 0 4px rgba(59, 102, 255, 0.07);
  background: var(--sh-white);
}
.superhum-h6 .sh-art-end-title { color: var(--sh-navy); }
.superhum-h6 .sh-art-end-desc { opacity: 1; color: var(--sh-ink-70); }
.superhum-h6 .sh-art-back {
  /* inline-flex : la pastille de categorie se collait sur la meme ligne */
  display: flex;
  width: -webkit-fit-content;
  width: fit-content;
  color: var(--sh-blue);
}
.superhum-h6 .sh-art-more { border-top-color: var(--sh-line); }
.superhum-h6 .sh-art-more-item span { color: var(--sh-blue); }
.superhum-h6 .sh-art-more-item strong { color: var(--sh-navy); }


.superhum-h6 .sh-page-lead { max-width: var(--sh-measure-lead); opacity: 1; color: var(--sh-ink-70); }
.superhum-h6 .sh-page-title { color: var(--sh-navy); }


/* --------------------------------------------------------------------------
   17. Ancres — dégagement sous la barre collante (90px)
   Couvre l'arrivée directe sur une ancre (#contact dans l'URL) et le repli
   scrollIntoView ; le chemin ScrollSmoother mesure la barre à la volée.
   -------------------------------------------------------------------------- */
.superhum-h6 main > section[id],
.superhum-h6 #primary { scroll-margin-top: 114px; }

/* Barre de 80px sous 576px */
@media (max-width: 575px) {
  .superhum-h6 main > section[id],
  .superhum-h6 #primary { scroll-margin-top: 104px; }
}


/* --------------------------------------------------------------------------
   18. Accessibilité — focus visible homogène
   -------------------------------------------------------------------------- */
.superhum-h6 a:focus-visible,
.superhum-h6 button:focus-visible {
  outline: 2px solid var(--sh-blue);
  outline-offset: 3px;
  border-radius: 4px;
}