/* =============================================================
   MTS — Accueil
   ============================================================= */

/* =============================================================
   Hero : vidéo voilée + schéma d'implantation + texte
   La vidéo est une texture d'ambiance, pas une bobine de démo :
   elle passe sous un voile porcelaine pour que le plan reste lisible.
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  /* Le haut laisse passer l'en-tête ; le reste doit tenir dans la
     fenêtre pour que le CTA ne soit jamais sous la ligne de flottaison. */
  padding-block: clamp(6.5rem, 16vh, 10rem) var(--space-8);
  overflow: hidden;
  background: var(--color-porcelain);
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero__poster { display: block; }
.hero__video  { display: none; }
.hero__backdrop.has-video .hero__poster { display: none; }
.hero__backdrop.has-video .hero__video  { display: block; }

/* La vidéo est une texture d'ambiance : désaturée et très légèrement
   floue, elle cesse de concurrencer le schéma violet — et la douceur
   du 480p cesse du même coup de se voir.                            */
.hero__video,
.hero__poster {
  filter: saturate(0.45) brightness(1.05) blur(1.5px);
  transform: scale(1.04);   /* absorbe le débord du flou */
}

/* Le voile : dense à gauche où vit le texte, léger à droite où la
   vidéo doit rester lisible derrière le schéma.                     */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(247, 247, 244, 0.94) 0%,
      rgba(247, 247, 244, 0.90) 34%,
      rgba(247, 247, 244, 0.66) 66%,
      rgba(247, 247, 244, 0.58) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(247, 247, 244, 0.30) 0%,
      rgba(247, 247, 244, 0.05) 42%,
      rgba(247, 247, 244, 0.62) 86%,
      var(--color-porcelain) 100%
    );
}

/* Sur mobile le texte couvre toute la largeur : voile uniforme. */
@media (max-width: 899px) {
  .hero__veil {
    background:
      linear-gradient(
        to bottom,
        rgba(247, 247, 244, 0.86) 0%,
        rgba(247, 247, 244, 0.80) 30%,
        rgba(247, 247, 244, 0.93) 72%,
        var(--color-porcelain) 100%
      );
  }
}

.hero .layout-grid { z-index: 2; }
.hero .reg-marks { z-index: 4; }

/* ---------- Le schéma éclaté : élément signature ---------- */
.hero__schematic {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(-3rem, -1vw, 2rem);
  transform: translateY(-52%);
  width: clamp(320px, 46vw, 660px);
  pointer-events: none;
  will-change: transform;
}
/* Sur mobile le texte occupe toute la largeur : le schéma remonte dans
   le vide au-dessus du titre et s'efface. Il reste la signature de la
   page, il cesse d'être du bruit derrière la phrase à lire. */
@media (max-width: 899px) {
  .hero__schematic {
    top: 11%;
    right: 50%;
    bottom: auto;
    transform: translate(50%, 0);
    /* Calibré pour tenir entre le bas de l'en-tête et le haut du titre. */
    width: min(62vw, 300px);
    opacity: 0.3;
  }
}
/* Écrans courts : plus de place pour le texte, le schéma disparaît. */
@media (max-width: 899px) and (max-height: 700px) {
  .hero__schematic { display: none; }
}

.hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hero__eyebrow-rule {
  flex: 1;
  max-width: 96px;
  height: 1px;
  background: var(--color-violet-32);
  transform-origin: left;
}
.hero__title { max-width: 15ch; }
.hero__title em {
  font-style: normal;
  color: var(--color-violet);
}
.hero__lede {
  margin-top: var(--space-5);
  max-width: 42ch;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Cartouche bas de hero : la légende du plan */
.hero__caption {
  display: none;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--hair);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (min-width: 760px) {
  .hero__caption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
  }
}


/* =============================================================
   1. Chiffres clés
   Colonnes séparées par un simple filet, pas une grille fermée :
   un tableau bordé fait « données », des colonnes font « repères ».
   ============================================================= */
.metrics-band { padding-block: var(--space-14); }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10) 0;
  border: 0;
}
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.metric {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0 var(--space-6);
  border: 0;
  border-left: var(--hair);
}
.metric:first-child { border-left: 0; padding-left: 0; }
@media (min-width: 900px) { .metric:first-child { padding-left: 0; } }
@media (max-width: 899px) { .metric:nth-child(odd) { border-left: 0; padding-left: 0; } }

.metric__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-violet-16);
  color: var(--color-violet);
}
.metric__icon svg { width: 24px; height: 24px; }

/* Le chiffre porte la section : il doit dominer sans crier. */
.metric__value {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.metric__unit {
  font-size: 0.46em;
  font-weight: 600;
  margin-left: 0.12em;
  letter-spacing: 0;
  color: var(--color-violet);
}

.metric__label {
  display: block;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule-violet);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: var(--text-primary);
}
.metric__sub {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

/* Cartes : rayon et élévation propres aux deux grilles de la Home. */
.capability-grid,
.folio {
  --radius-card: 12px;
  --shadow-card: 0 1px 2px rgba(28, 20, 48, 0.05), 0 10px 24px -16px rgba(71, 37, 131, 0.45);
  --shadow-card-hover: 0 2px 6px rgba(28, 20, 48, 0.07), 0 22px 42px -20px rgba(71, 37, 131, 0.55);
}

/* =============================================================
   2. Nos métiers
   Cinq cartes seulement là où chacune reste lisible ; en dessous
   on descend à trois puis deux plutôt que d'écraser le texte.
   ============================================================= */
.capability-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .capability-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } }

.capability {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--dur-base) var(--ease-precise),
    transform var(--dur-base) var(--ease-settle);
}
.capability:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-5px);
}

.capability__media { position: relative; background: var(--bg-wash); }
.capability__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.capability__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-settle);
}
.capability:hover .capability__media img { transform: scale(1.05); }

.capability__badge {
  position: absolute;
  left: var(--space-6);
  bottom: -25px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--color-violet);
  color: var(--color-porcelain);
  box-shadow: 0 0 0 4px var(--bg-surface), 0 6px 16px -8px rgba(71, 37, 131, 0.8);
  transition: transform var(--dur-base) var(--ease-settle);
}
.capability:hover .capability__badge { transform: translateY(-2px) scale(1.06); }

.capability__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6) var(--space-6);
}
.capability__body h3 {
  font-size: 1.0625rem;
  line-height: 1.25;
  min-height: 2.5em;
  text-wrap: balance;
}
.capability__body h3 a { transition: color var(--dur-fast) var(--ease-precise); }
.capability:hover .capability__body h3 a { color: var(--color-violet); }
.capability__body h3 a::after { content: ""; position: absolute; inset: 0; }
/* Trois lignes au plus : les cartes gardent la même hauteur de texte. */
.capability__body p {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.capability__go {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: var(--hair);
  color: var(--color-violet);
}
.capability__go svg { transition: transform var(--dur-base) var(--ease-settle); }
.capability:hover .capability__go svg { transform: translateX(5px); }

/* =============================================================
   3. Notre processus — la ligne des six étapes, pleine largeur
   ============================================================= */
.process-band .section-head { margin-bottom: var(--space-12); }
.process-band .section-head__intro { display: grid; gap: var(--space-5); justify-items: start; }

.flowline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-5);
  margin-inline: calc(var(--shell-pad) * -1);
  padding-inline: var(--shell-pad);
  scroll-padding-inline: var(--shell-pad);
  scrollbar-width: none;
}
.flowline::-webkit-scrollbar { display: none; }
@media (min-width: 1180px) {
  .flowline {
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

.flowline__step { position: relative; scroll-snap-align: start; }
.flowline__step:nth-child(1) { --step-delay: 0ms; }
.flowline__step:nth-child(2) { --step-delay: 320ms; }
.flowline__step:nth-child(3) { --step-delay: 640ms; }
.flowline__step:nth-child(4) { --step-delay: 960ms; }
.flowline__step:nth-child(5) { --step-delay: 1280ms; }
.flowline__step:nth-child(6) { --step-delay: 1600ms; }
@media (max-width: 1179px) {
  .flowline__step:nth-child(n) { --step-delay: 0ms; }
}

/* La tête de l'étape porte le fil : il relie les pastilles, à leur hauteur. */
.flowline__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.flowline__head::after {
  content: "";
  flex: 1;
  height: 2px;
  min-width: var(--space-4);
  margin-left: var(--space-3);
  margin-right: calc(var(--space-6) * -1);
  background-image:
    linear-gradient(var(--color-violet), var(--color-violet)),
    linear-gradient(var(--color-violet-16), var(--color-violet-16));
  background-repeat: no-repeat;
  background-size: 0 100%, 100% 100%;
}
.js-motion .flowline__head::after {
  transition: background-size 300ms linear calc(60ms + var(--step-delay, 0ms));
}
.flowline__step.is-active .flowline__head::after {
  background-size: 100% 100%, 100% 100%;
}
.flowline__step:last-child .flowline__head::after { display: none; }

.flowline__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: var(--color-violet-08);
  color: var(--color-violet);
  transition:
    transform 420ms var(--ease-settle) var(--step-delay, 0ms),
    opacity 360ms var(--ease-precise) var(--step-delay, 0ms),
    background-color 400ms var(--ease-precise) var(--step-delay, 0ms),
    color 400ms var(--ease-precise) var(--step-delay, 0ms),
    box-shadow 400ms var(--ease-precise) var(--step-delay, 0ms);
}

/* État d'attente posé par JS seulement : sans lui, une panne de script
   laisserait six repères à moitié effacés. */
.js-motion .flowline__mark { transform: scale(0.82); opacity: 0.45; }
.js-motion .flowline__step.is-active .flowline__mark { transform: none; opacity: 1; }

.flowline__step.is-active .flowline__mark {
  background: var(--color-violet);
  color: var(--color-porcelain);
  box-shadow: 0 12px 24px -12px rgba(71, 37, 131, 0.95);
}

/* Une onde part du repère au moment où il s'allume : c'est elle qui donne
   la sensation que l'étape « tombe » plutôt que d'apparaître. */
.flowline__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-violet);
  opacity: 0;
  pointer-events: none;
}
.js-motion .flowline__step.is-active .flowline__mark::after {
  animation: flowPulse 820ms var(--ease-settle) var(--step-delay, 0ms) both;
}
@keyframes flowPulse {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.6); }
}

.flowline__step:hover .flowline__mark {
  transform: translateY(-4px);
  transition-delay: 0ms;
}

.flowline__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-mono-wide);
  color: var(--color-violet-32);
  transition:
    color 380ms var(--ease-precise),
    opacity 320ms var(--ease-precise) calc(150ms + var(--step-delay, 0ms)),
    transform 360ms var(--ease-settle) calc(150ms + var(--step-delay, 0ms));
}
.js-motion .flowline__num { opacity: 0; transform: translateX(-8px); }
.js-motion .flowline__step.is-active .flowline__num { opacity: 1; transform: none; }
.flowline__step.is-active .flowline__num { color: var(--color-orange-deep); }

/* Le texte suit le repère, décalé, pour que l'œil lise dans l'ordre. */
.js-motion .flowline h3,
.js-motion .flowline p { opacity: 0; transform: translateY(12px); }
.js-motion .flowline h3 {
  transition:
    opacity 460ms var(--ease-precise) calc(180ms + var(--step-delay, 0ms)),
    transform 460ms var(--ease-settle) calc(180ms + var(--step-delay, 0ms));
}
.js-motion .flowline p {
  transition:
    opacity 460ms var(--ease-precise) calc(250ms + var(--step-delay, 0ms)),
    transform 460ms var(--ease-settle) calc(250ms + var(--step-delay, 0ms));
}
.js-motion .flowline__step.is-active h3,
.js-motion .flowline__step.is-active p { opacity: 1; transform: none; }

.flowline h3 a,
.flowline__step h3 { transition: color 300ms var(--ease-precise); }
.flowline__step:hover h3 { color: var(--color-violet); }

.flowline h3 {
  font-size: 1.0625rem;
  line-height: 1.25;
  min-height: 2.5em;
  max-width: 15ch;
  text-wrap: balance;
}
.flowline p {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 26ch;
}

/* =============================================================
   4. Réalisations — planche éditoriale, légende sur l'image
   ============================================================= */
.selected .section-head { margin-bottom: var(--space-12); }
.selected .section-head__intro { display: grid; gap: var(--space-5); justify-items: start; }

.folio {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .folio { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 232px; }
  /* Rythme volontairement inégal : une pièce maîtresse, puis des appuis. */
  .folio__item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .folio__item:nth-child(2) { grid-column: span 3; }
  .folio__item:nth-child(3) { grid-column: span 3; }
  .folio__item:nth-child(n + 4) { grid-column: span 2; }
}
@media (min-width: 1200px) { .folio { grid-auto-rows: 256px; } }

.folio__item { position: relative; }
.folio__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--color-ink);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-precise);
}
.folio__link:hover { box-shadow: var(--shadow-card-hover); }
@media (max-width: 699px) { .folio__link { aspect-ratio: 4 / 3; } }

.folio__frame { display: block; height: 100%; }
.folio__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-settle);
}
.folio__link:hover img { transform: scale(1.055); }

/* Le voile n'assombrit que le bas : la machine reste lisible en haut. */
.folio__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 18, 0.94) 0%,
    rgba(10, 8, 18, 0.86) 18%,
    rgba(10, 8, 18, 0.58) 38%,
    rgba(10, 8, 18, 0.16) 62%,
    rgba(10, 8, 18, 0) 100%
  );
  transition: opacity var(--dur-base) var(--ease-precise);
}
.folio__link:hover::after { opacity: 0.9; }

.folio__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.folio__tag {
  text-shadow: 0 1px 3px rgba(10, 8, 18, 0.85);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-orange);
}
.folio__title {
  text-shadow: 0 1px 4px rgba(10, 8, 18, 0.7);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking-heading);
  color: var(--color-porcelain);
  text-wrap: balance;
}
.folio__item:nth-child(1) .folio__title { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }

.folio__go {
  position: absolute;
  z-index: 2;
  top: var(--space-5);
  right: var(--space-5);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-porcelain);
  color: var(--color-violet);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-base) var(--ease-precise),
    transform var(--dur-base) var(--ease-settle);
}
.folio__link:hover .folio__go,
.folio__link:focus-visible .folio__go { opacity: 1; transform: none; }

/* =============================================================
   5. Technologies intégrées + engagements
   ============================================================= */
.partners-band { padding-block: var(--section-y-tight); border-top: var(--hair); }
.partners-band__inner {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 1040px) {
  .partners-band__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-14);
  }
  .partners-band__col--trust { padding-left: var(--space-12); border-left: var(--hair); }
}

.partner-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
}
@media (min-width: 620px) { .partner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.partner {
  display: grid;
  grid-template-rows: 44px auto;
  justify-items: start;
  align-items: center;
  align-content: start;
  gap: var(--space-4);
}

/* Hauteur propre à chaque logo (--logo-h) : à hauteur égale, un logotype
   très large paraît énorme et un logo compact paraît minuscule. On équilibre
   la masse optique, jamais en déformant — le ratio reste celui du fichier. */
.partner img {
  height: var(--logo-h, 30px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  align-self: center;
  filter: grayscale(1) contrast(1.05) brightness(0.55);
  opacity: 0.85;
  transition:
    filter var(--dur-base) var(--ease-precise),
    opacity var(--dur-base) var(--ease-precise);
}
.partner:hover img { filter: none; opacity: 1; }
@media (hover: none) { .partner img { filter: none; opacity: 0.95; } }

.partner__domain {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.partners-band__note {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--hair);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.trust-list {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }

.trust {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-secondary);
}
.trust__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--color-violet-08);
  color: var(--color-violet);
}
.trust strong { font-weight: 600; color: var(--text-primary); }