.tri-reveal {
  --slider-h: 70vh;            /* hauteur du bloc */
  --gap: 0px;
  --duration-in: 900ms;
  --hold: 3200ms;
  --radius: 0;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --bg: #0b0d12;
  --text: #ffffff;
  --h-top: 1;
  --h-bottom: 1;
  --sum: calc(var(--h-top) + var(--h-bottom));
  --gap-color: var(--bg);
  --title-offset: -6vh;

  --ease-reveal: cubic-bezier(.4,0,.2,1);

  position: relative;          /* ancre l’overlay */
  width: 100%;
  color: var(--text);
}

.tri-reveal * { box-sizing: border-box; }

.tri-reveal .slider {
  position: relative;
  height: var(--slider-h);
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--gap-color);
  isolation: isolate;
  display: grid;
  grid-template-rows:
    calc(100% * var(--h-top) / var(--sum))
    calc(100% * var(--h-bottom) / var(--sum));
  grid-template-columns: 100%;
  gap: var(--gap);
}

.tri-reveal .slice {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.tri-reveal .img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  will-change: auto;
}

.slice--top .img {
  background-size: 100% calc(100% * (var(--sum) / var(--h-top)));
  background-position: 50% 0%;
}
.slice--bottom .img {
  background-size: 100% calc(100% * (var(--sum) / var(--h-bottom)));
  background-position: 50% 100%;
}

/* Animation de révélation en Y */
.tri-reveal .reveal {
  position: absolute;
  inset: 0;
  background: var(--gap-color);
  transform: translateY(0%);
  transition: transform var(--duration-in) var(--ease-reveal);
  will-change: transform;
}
.tri-reveal .reveal.is-open { transform: translateY(-100%); }

@media (max-width: 720px) {
  .tri-reveal { --slider-h: 64vh; }
}

/* === Overlay texte + barre (site width + liaisons) === */
.tri-reveal {
  --site-width: 1200px;

  /* largeur de la barre : 4/6 du site (NE PAS TOUCHER) */
  --bar-frac: calc(2 / 3);
  --bar-w: calc(min(var(--site-width), 100%) * var(--bar-frac));

  /* plafond pour le bloc texte+logo : max 1/2 site width (NE PAS TOUCHER) */
  --content-max-frac: .4;
  --content-max-w: calc(min(var(--site-width), 100%) * var(--content-max-frac));

  /* NOUVEAU : largeur max du TITRE uniquement (peut être ajustée librement) */
  --title-max-frac: .75; /* ← ajuste la largeur du titre sans impacter le reste */
  --title-max-w: calc(min(var(--site-width), 100%) * var(--title-max-frac));

  /* couleurs fixes (4 bandes) */
  --bar-a: #003b3e;
  --bar-b: #cfa528;
  --bar-c: #6a83b9;
  --bar-d: #6abbb4;

  /* hauteurs barre */
  --bar-h: 10px;
  --bar-h-tall: 30px;

  /* texte / logo */
  --copy-fs: 16px;   /* taille */
  --copy-lh: 17px;   /* interligne */
  --logo-h: 28px;
}

/* calque overlay */
.tri-reveal .overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* conteneur centré sur la largeur du site, ancré en bas,
   pas d’espace à gauche pour aligner texte et barre */
.tri-reveal .overlay__inner {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(var(--site-width), 100%);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: calc(var(--bar-h-tall) + clamp(8px, 1.2vw, 12px));
}

/* ligne texte + logo : largeur = min(barre, 1/2 site) */
.tri-reveal .copy-row{
  width: min(var(--bar-w), var(--content-max-w));
  display: flex;
  align-items: center;       /* centre verticalement le texte + l’icône */
  justify-content: flex-start;
  gap: 20px;                 /* écart fixe de 20px entre texte et icône */
  flex-wrap: nowrap;
}

/* texte */
.tri-reveal .copy {
  flex: 1 1 auto;
  max-width: none;
  font-family: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--copy-fs);
  line-height: var(--copy-lh);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  margin: 0;                       
  overflow-wrap: anywhere;
  white-space: normal;             
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms var(--ease-reveal), transform 280ms var(--ease-reveal);
}
.tri-reveal .copy.is-in { opacity: 1; transform: translateY(0); }

/* lien cliquable qui contient l’icône */
.tri-reveal .brand-link{
  pointer-events: auto;      
  display: inline-flex;
  align-items: center;       
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;            
  cursor: pointer;
}

/* icône/brand à droite, centré verticalement */
.tri-reveal .brand{
  display: block;
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
}

/* barre 4 couleurs — collée au bas, largeur = 4/6 du site */
.tri-reveal .bars {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: var(--bar-w);
  height: var(--bar-h-tall);
  display: flex;
  align-items: flex-end;
  gap: 0;              
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.tri-reveal .bar {
  flex: 1 1 0;
  height: var(--bar-h);
  transition: height 260ms var(--ease-reveal);
  border-radius: 0;
  box-shadow: none;
}

/* ====== Titre 3 lignes, centré verticalement, aligné à gauche du site ====== */
.tri-reveal {
  --title-size: 70px;
  --title-lh: 70px;
  --title-tracking: -0.02em;
}
.tri-reveal .title-layer{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(var(--site-width), 100%);
  pointer-events:none; z-index:2;
  transform: translate(-50%, calc(-50% + var(--title-offset)));
}
.tri-reveal .title-wrap{
  /* AVANT: min(var(--bar-w), var(--content-max-w)) — liait le titre aux barres/texte
     MAINTENANT: largeur indépendante, contrôlée par --title-max-frac */
  width: var(--title-max-w);
}
.tri-reveal .title-line{
  font-family: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;            
  font-size: var(--title-size);
  line-height: var(--title-lh);
  letter-spacing: var(--title-tracking);
  color: #fff;
  text-align: left;
  direction: ltr;

  /* chaque bloc (séparé par ///) reste sur une seule ligne */
  white-space: nowrap;
  overflow: visible;      /* ne coupe plus avec "..." */
  text-overflow: clip;
}
.tri-reveal .title__hi{
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: currentColor;
}

.tri-reveal .bar--a { background: var(--bar-a); }
.tri-reveal .bar--b { background: var(--bar-b); }
.tri-reveal .bar--c { background: var(--bar-c); }
.tri-reveal .bar--d { background: var(--bar-d); }

.tri-reveal .bars.is-a .bar--a { height: var(--bar-h-tall); }
.tri-reveal .bars.is-b .bar--b { height: var(--bar-h-tall); }
.tri-reveal .bars.is-c .bar--c { height: var(--bar-h-tall); }
.tri-reveal .bars.is-d .bar--d { height: var(--bar-h-tall); }

/* Sur mobile, on réduit la taille et on ré-autorise le wrapping
   et on peut élargir le titre indépendamment */
@media (max-width: 720px){
  .tri-reveal{
    --title-size: 38px;
    --title-lh: 40px;
    --content-max-frac: .9;   /* texte/logo inchangés */
    --title-max-frac: .95;    /* titre plus large si besoin */
  }
  .tri-reveal .title-line{
    white-space: normal;
    text-overflow: clip;
  }
}