/* =========================
   TSS — Base
   ========================= */

:root{
  --tss-blue: #0e4d82;
  --tss-ink: #111;
  --tss-max: 1400px;
  --tss-max-narrow: 1200px;
  --tss-pad-x: 2.5rem;
  --tss-edge: clamp(16px, 3vw, 48px);
}

/* =========================
   HERO (same form as TIMS)
   ========================= */

.tss-hero{
  --tss-bg: url("../img/tss_bandeau.jpg"); /* default, can be overridden inline */

  position: relative;
  height: 80vh;
  min-height: 480px;

  background: var(--tss-bg) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  box-shadow: 0 18px 30px -20px rgba(0,0,0,0.55);
}

/* overlay coloured layer using a pseudo-element like the tims hero */
.tss-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0e4d82;
  opacity: 0.62;
  z-index: 1;
}

.tss-content{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: clamp(2rem, 6vw, 6rem);
  max-width: var(--tss-max);
}

.tss-content h1{
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1;
  font-size: clamp(1.5rem, 4.6vw, 3.8rem);
  text-shadow: 0 12px 32px rgba(0,0,0,.45);
  margin: 0;
}

/* first line of hero title should never wrap, same as TIMS */
.tss-title-line{
  display: block;
  white-space: nowrap;
}

.tss-content p{
  margin: 0;
  margin-top: 0.6rem;

  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.02em;

  opacity: 0.95;
  text-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* =========================
   INTRO
   ========================= */

.system-intro{
  background: #fff;
  padding: 3.5rem var(--tss-pad-x) 3rem;
  text-align: initial;
  margin-bottom: 100px;
}

.system-intro__row{
  max-width: var(--tss-max);
  margin: 0 auto 2.8rem;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 3rem;
  align-items: start;
}

.system-intro__lead{
  margin: 0;
  text-align: left;

  color: #2f4a7c;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.2rem, 2.1vw, 2rem);
}

/* CTA TSS (celle que tu utilises dans le HTML) */
.tss-intro__cta{
  justify-self: end;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9rem;

  background: var(--tss-blue);
  color: #fff;
  text-decoration: none;

  padding: 1.1rem 1.8rem;
  border-radius: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  font-weight: 700;

  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.tss-intro__cta-badge{
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);

  width: 36px;
  height: 36px;
  border-radius: 999px;

  background: var(--tss-blue);
  color: #fff;

  display: grid;
  place-items: center;

  box-shadow: 0 10px 16px rgba(0,0,0,.20);
  border: 3px solid #fff;
}

.tss-intro__cta-badge i{
  font-size: .9em;
  transform: translateY(1px);
}

.system-intro__title{
  max-width: var(--tss-max);
  margin: 0 auto;

  text-align: center;
  color: var(--tss-blue);

  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(2.2rem, 3vw, 3.1rem);
}

/* =========================
   BLOCKS — Typo
   ========================= */

.tss-block{
  background: #fff;
  padding: 0;
}

.tss-block__inner{
  max-width: var(--tss-max-narrow);
  margin: 0 auto;
}

.tss-block__title{
  margin: 0 0 1.2rem;
  color: #2f4a7c;
  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(2.1rem, 2.8vw, 2.8rem);
}

.tss-block__text{
  margin: 0;
  color: var(--tss-ink);
  font-weight: 500;
  line-height: 1.45;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  text-align: justify;
}

/* =========================
   DIAGRAM — Image full width + overlay texte
   ========================= */

.tss-block--diagram{
  position: relative;
  margin-top: 60px; /* gap sous le H2 */
}

.tss-block--image{
  background: #fff;
}

.tss-block__image{
  width: 100vw;
  height: 100vh;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}

/* overlay texte : desktop */
.tss-diagram__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  /* marge droite + zone "boîtier" à gauche */
  padding-right: var(--tss-edge);
  padding-left: clamp(600px, 48vw, 900px);

  /* remonte le bloc texte en desktop */
  transform: translateY(-100px);
}

/* =========================
   TEXT COLS
   ========================= */

.tss-block--text-cols{
  background: #fff;
  padding-top: 0;
}

.tss-block__cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8rem;
}

.tss-col{
  max-width: 100%;
}

/* =========================
   VIDEO
   ========================= */

.tss-video{
  background: #fff;
  padding: 3.5rem var(--tss-pad-x) 2.5rem;
}

.tss-video__row{
  max-width: var(--tss-max);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.tss-video__player{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.tss-video__text p{
  margin: 0;
  color: #2f4a7c;
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
}

/* =========================
   BENEFITS
   ========================= */
.tss-benefits{
  background: #fff;
  padding: 3.2rem var(--tss-pad-x) 4rem;
}

.tss-benefits__title{
  max-width: var(--tss-max);
  margin: 0 auto 2.5rem;

  text-align: center;
  color: var(--tss-blue);
  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
}

.tss-benefits__grid{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.tss-benefits__item{
  text-align: center;
  color: var(--tss-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tss-benefits__icon{
  display: block;
  width: min(130px, 100%);
  height: 110px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto 1rem;
}

.tss-benefits__item-title{
  margin: 0 0 0.4rem;

  min-height: 2.4em;
  display: block;
  text-align: center;

  color: var(--tss-blue);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  line-height: 1.2;
}

.tss-benefits__text{
  margin: 0 auto;
  max-width: 26ch;

  color: var(--tss-blue);
  font-size: clamp(1.15rem, 1.45vw, 1.7rem);
  line-height: 1.45;
  font-weight: 500;
}

@media (max-width: 900px){
  .tss-benefits__grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tss-benefits__text{
    max-width: 32ch;
  }
}

/* =========================
   PERF
   ========================= */

.tss-perf{
  background: #fff;
  padding: 4rem var(--tss-pad-x) 3.5rem;
}

.tss-perf__inner{
  max-width: var(--tss-max-narrow);
  margin: 0 auto;
  text-align: center;
}

.tss-perf__heading{
  margin: 0 0 2.2rem;
  color: var(--tss-blue);
  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
}

.tss-perf__config{
  margin: 0 0 3.8rem;
  font-size: clamp(1.45rem, 2vw, 1.7rem);
  font-weight: 800;
  color: #000;
  line-height: 1.5;
}

.tss-perf__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-bottom: 3rem;
}

.tss-perf__title{
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 800;
  color: var(--tss-blue);
}

.tss-perf__value{
  margin: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem);
  font-weight: 700;
  color: var(--tss-blue);
}

.tss-perf__note{
  max-width: var(--tss-max-narrow);
  margin: 3.5rem auto 0;
  font-size: clamp(1.25rem, 1.6vw, 1.4rem);
  color: var(--tss-ink);
  line-height: 1.6;
}

/* =========================
   CTA
   ========================= */

.tss-cta{
  background: #fff;
  padding: 0px;
}

.tss-cta__inner{
  max-width: var(--tss-max);
  margin: 0 auto;
  text-align: center;
}

.tss-cta__contact{
  display: block;
  width: fit-content;
  margin: 0 auto 3rem;
  background: #0e4d82;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 2.4rem;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.tss-cta__content{
  align-items: center;
}

.tss-cta__image{
  display: flex;
  justify-content: center;
}

.tss-cta__image img{
  width: clamp(260px, 32vw, 520px);
  height: auto;
  display: block;
}

.tss-cta__button{
  width: fit-content;
  max-width: 620px;

  display: inline-block;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: #0e4d82;
  color: #fff;
  text-decoration: none;

  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.1;

  padding: 1.15rem 2.6rem;
  border-radius: 999px;

  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  margin-bottom: 3.5rem;
}

.tss-cta__button span{
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  opacity: .9;
}

/* =========================
   Misc
   ========================= */

.prefooter-band{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  background: #fff;
}

/* =========================
   RESPONSIVE — breakpoint TEL = 1172px
   ========================= */

@media (max-width: 1172px){

  /* intro */
  .system-intro__row{
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
  }
  .tss-intro__cta{
    justify-self: end;
  }

  /* diagram */
  .tss-block__image{
    height: 40vh;
  }
  .tss-diagram__overlay{
    position: static;
    transform: none;          /* ✅ oublie le -60px */
    width: min(1100px, 92vw);
    margin: 1.5rem auto 0;
    padding: 0 1rem;
  }

  /* cols */
  .tss-block__cols{
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  /* video */
  .tss-video{
    padding: 2.5rem 1.5rem 2rem;
  }
  .tss-video__row{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* benefits */
  .tss-benefits{
    padding: 2.5rem 1.5rem 3rem;
  }

  /* perf */
  .tss-perf__grid{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* cta */
  .tss-cta__content{
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .tss-cta__image img{
    max-width: 100%;
  }
}
/* ========= DIAGRAM (desktop) ========= */
.tss-block--diagram{
  position: relative; /* ancre overlay desktop */
}

/* desktop : overlay sur l’image */
.tss-diagram__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  padding-right: clamp(16px, 3vw, 48px);
  padding-left: clamp(600px, 48vw, 900px);

  transform: translateY(-60px); /* uniquement desktop */
}

/* ========= TEL (<=1172px) ========= */
@media (max-width: 1172px){

  .tss-block--diagram{
    display: flex;
    flex-direction: column;
  }

  .tss-diagram__overlay{
    order: 1;

    position: static;
    transform: none;

    background: #fff;

    /* ✅ mêmes marges/paddings que tes sections */
    padding: 0;
  }

  /* ✅ même container que les autres blocs */
  .tss-diagram__overlay > .tss-block__title,
  .tss-diagram__overlay > .tss-block__text{
    max-width: 1200px;
    margin-right: auto;
  }

  .tss-block__image{
    order: 2;
    height: 40vh;
  }
}
/* ========= TEL (<=1172px) ========= */
@media (max-width: 1172px){

  .tss-block--diagram{
    display: flex;
    flex-direction: column;
  }

  /* texte au-dessus, en flux normal */
  .tss-diagram__overlay{
    order: 1;

    position: static;
    transform: none;

    background: #fff;

    /* ✅ pas de padding horizontal (comme les autres) */
    padding: 0;

    /* ✅ petite respiration verticale uniquement */
    margin: 0 auto 1.5rem;
    max-width: 1200px;
  }

  /* ✅ garder la typo/espacement comme ailleurs */
  .tss-diagram__overlay > .tss-block__title,
  .tss-diagram__overlay > .tss-block__text{
    margin-left: 0;
    margin-right: 0;
    max-width: none; /* évite une double contrainte */
  }

  /* image en dessous */
  .tss-block__image{
    order: 2;
    height: 40vh;
  }
}
/* mêmes marges pour tous les blocs de contenu */
.tss-block{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* et en mobile */
@media (max-width: 1172px){
  .tss-block{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.tss-perf__sub{
  display: block;        /* passe à la ligne */
  margin-top: 0.4rem;

  font-size: 0.75em;     /* plus petit */
  font-weight: 600;
  opacity: 0.7;
}
@keyframes tss-bounce {
  0%   { transform: translateX(-50%) translateY(0); }
  30%  { transform: translateX(-50%) translateY(-6px); }
  50%  { transform: translateX(-50%) translateY(0); }
  70%  { transform: translateX(-50%) translateY(-3px); }
  100% { transform: translateX(-50%) translateY(0); }
}
.tss-intro__cta:hover .tss-intro__cta-badge{
  animation: tss-bounce .6s ease;
}