.tri-reveal {
  --slider-h: 70vh;            /* hauteur du bloc */
  --gap: 0px;
  --duration-in: 900ms;
  --hold: 5200ms;
  --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%;
}

.tri-reveal .slice--top .img {
  background-position: 50% -0.5px;
}

.tri-reveal .slice--bottom .img {
  background-position: 50% calc(100% + 0.5px);
}


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

.tri-reveal .reveal.is-open {
  /* on pousse un chouïa plus haut que 100% pour
     être sûr que le rideau disparaisse complètement */
  transform: translate3d(0, -101%, 0);
}

@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));

  /* largeur max du TITRE uniquement (ajustable librement) */
  --title-max-frac: .75;
  --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: 15px;
  --bar-h-tall: 30px;

  /* texte / logo */
  --copy-fs: 20px;   /* taille */
  --copy-lh: 30px;   /* interligne */
  --copy-weight: 400;
  --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 bas */
.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);
  font-weight: var(--copy-weight);
  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;

  pointer-events: auto;
}
.tri-reveal .bar {
  flex: 1 1 0;
  height: var(--bar-h);
  transition: height 260ms var(--ease-reveal);
  border-radius: 0;
  box-shadow: none;

  cursor: pointer;
}

.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); }

/* ====== TITRE : fade-up (au lieu du typing) ====== */
.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{
  /* 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 (desktop) */
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;

  /* ÉTAT INIT : invisible + décalé vers le bas */
  opacity: 0;
  transform: translateX(-50px);
  will-change: transform, opacity;
}
.tri-reveal .title-line.is-in{
  opacity: 1;
  transform: translateX(0);
  transition: transform 900ms var(--ease-reveal), opacity 900ms var(--ease-reveal);
}

.tri-reveal .title__hi{
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: currentColor;
}

/* Sur mobile, on réduit la taille et on autorise le wrapping */
@media (max-width: 1024px){
  .tri-reveal{
    --title-size: 40px;
    --title-lh: 45px;
    --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;
  }
}


/* ===== Marges latérales en responsive (mobile + tablette) ===== */
@media (max-width: 1024px){
  /* décalage du texte bas + barres */
  .tri-reveal .title-line {
    padding-left: 10px;
  }

  .tri-reveal .bars {
    padding-left: 10px;
  }

    .tri-reveal .copy {
    padding-left: 10px;
  }

  .tri-reveal{
  --bar-frac: calc(5 / 6);
  }
}


/* ===== Mobile & tablette : masque = moitié de la hauteur ===== */
@media (max-width: 1024px){
  /* on garde ta superposition + clip-path existants */
  .tri-reveal .slider{ position: relative; overflow: hidden; height: 100vh; }
  .tri-reveal .slice { position: absolute; inset: 0; }
  .tri-reveal .slice--top{    clip-path: inset(0 0 50% 0);  z-index: 2; }
  .tri-reveal .slice--bottom{ clip-path: inset(50% 0 0 0);  z-index: 1; }

  /* clé du fix : chaque masque ne couvre QUE sa moitié visible */
  .tri-reveal .reveal{
    left: 0; right: 0;               /* on annule l'inset:0; côté vertical */
    transition: transform var(--duration-in) var(--ease-reveal);
    will-change: transform;
  }
  .tri-reveal .slice--top .reveal{
    top: 0; bottom: auto; height: 50%;
  }
  .tri-reveal .slice--bottom .reveal{
    top: auto; bottom: 0; height: 50%;
  }

  /* anim identique desktop : les deux montent */
  .tri-reveal .reveal{ transform: translateY(0); }
  .tri-reveal .reveal.is-open{ transform: translateY(-100%); }
}