/* =============================================================================
   METABOLIS — page provisoire, deux sections plein écran
   Conception et création branding : Limbus Studio — limbus.fr
   ========================================================================== */

@font-face { font-family:'Jost'; font-style:normal; font-weight:300;
  src:url('fonts/jost-300.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400;
  src:url('fonts/jost-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500;
  src:url('fonts/jost-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:600;
  src:url('fonts/jost-600.woff2') format('woff2'); font-display:swap; }

:root{
  --turquoise:#009AAC;
  --petrole:#03535B;
  --marine:#091F43;
  --gris-clair:#EEF1F2;

  /* largeur du logotype dans le hero : 42 % de la fenêtre comme sur la
     maquette, jamais sous 260 px (en dessous sa diagonale passe sous le pixel) */
  --L: clamp(260px, 42vw, 660px);

  /* module du coin oblique, section 2 */
  --c: clamp(150px, 14vw, 190px);          /* module du coin oblique */
  --marge: clamp(24px, 5vw, 72px);
  --amorce-x: calc(var(--c) * .7);
  --amorce-y: calc(var(--c) * .6);

  /* Mouvements. Tous les glissés se font sur l'axe à 45° du logotype :
     une translation (+t, -t) laisse la diagonale sur la même droite
     x + y = constante, donc elle glisse sur l'oblique du fond sans
     jamais la quitter. */
  --glisse:  calc(var(--L) * .18);   /* arrivée du logotype */
  --sortie:  calc(var(--L) * .50);   /* départ au défilement */
  /* le coin part hors de l'écran, en bas à gauche : au moins sa propre
     taille plus la marge, pour que son bord droit soit sorti par la gauche */
  --glisse-coin: calc(var(--c) + var(--marge) + 6vw);
  --sp:  0;   /* progression sur la 1re section, posée par le script */
  --sp2: 1;   /* progression d'entrée de la 2e section, idem */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Jost','Century Gothic',Questrial,Arial,sans-serif;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.62;
  color:var(--marine);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* =============================================================================
   SECTION 1 — l'enseigne sur l'aplat
   ========================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--marge);
  /* Plan éclairé. Valeurs relevées sur l'élément graphique de la charte
     (6_Element-graphique, variante foncée) : le modèle y colle à 0,77 niveau
     sur 255. Pour retrouver exactement la teinte de la page de titre du
     pitch, plus grise, remplacer par :
         linear-gradient(to bottom right, #4598AC 0%, #41939F 100%)
     et, plus bas, rgba(0,9,13,.491) / 16.5deg / 341.9deg. */
  background:linear-gradient(to bottom right, #019FB2 0%, #0295A6 100%);
}

.enseigne{ text-align:center; padding-top:calc(var(--L) * .0163); }

/* Le repère de tout l'aplat : la pointe basse de la diagonale du logotype.
   On l'ancre sur le logotype lui-même, pas sur la fenêtre, pour que la pliure
   reste collée à la diagonale quelle que soit la taille de l'écran. */
.logo-cadre{ position:relative; width:var(--L); line-height:0; }

.logo-cadre::before{
  content:'';
  position:absolute;
  /* centre du dégradé conique = pointe basse du fuseau du logotype :
     34,18 % de sa largeur, sur son bord inférieur (relevé sur le fichier
     vectoriel de la charte : x + y = 402 dans un cadre de 661,196 x 176,552) */
  /* Le calque est un carré centré sur la pointe de l'ombre : l'arête du pli
     part donc exactement du point où s'achève la diagonale du logotype. */
  left:calc(34.18% - 85vmax);
  top:calc(100% - 85vmax);
  width:170vmax;
  height:170vmax;
  z-index:-1;
  pointer-events:none;
  /* la pliure : arête franche à 45°, puis ombre qui se diffuse tout autour */
  background:conic-gradient(from 45deg at 50% 50%,
      rgba(3,80,88,.95)    0deg,
      rgba(3,80,88,.95)   27.9deg,
      rgba(3,80,88,0)    350.8deg,
      rgba(3,80,88,0)    360deg);
}

.logo-entree{ display:block; }

.logotype{
  display:block; width:100%; height:auto;
  /* au défilement, le logotype repart vers le haut-droite, sur son axe à 45° */
  transform:translate(calc(var(--sortie) * var(--sp)),
                      calc(var(--sortie) * var(--sp) * -1));
  opacity:clamp(0, calc(1 - var(--sp) * 1.35), 1);
}

/* La signature, calée sur la maquette : corps = 0,0389 × largeur du logotype,
   interlettrage 0,0586 em. Le text-indent compense la gouttière finale pour
   que le centrage reste optique. */
.slogan{
  /* l'écart au logotype et le léger décentrage du bloc sont relevés sur la
     maquette : la signature y tombe à 0,1006 L sous le bord bas du logotype */
  margin:calc(var(--L) * .0796) 0 0;
  font-weight:300;
  font-size:max(14px, calc(var(--L) * .0389));
  line-height:1.4;
  letter-spacing:.0586em;
  text-indent:.0586em;
  color:#fff;
  opacity:clamp(0, calc(1 - var(--sp) * 1.7), 1);
}

/* invitation à faire défiler */
.defiler{
  position:absolute;
  left:50%;
  bottom:calc(var(--marge) * .8);
  transform:translateX(-50%);
  display:block;
  width:26px;
  height:26px;
  color:rgba(255,255,255,.82);
  transition:color .25s;
  opacity:clamp(0, calc(1 - var(--sp) * 4), 1);
}
.defiler:hover{ color:#fff; }
.defiler svg{ display:block; width:100%; height:100%; }


/* =============================================================================
   MOUVEMENT
   Un seul axe : tout glisse à 45°, dans le sens de l'oblique de la marque.
   Une translation (+t, −t) laisse la diagonale du logotype sur la droite
   x + y = constante — celle de l'arête du pli. Elle glisse donc SUR l'oblique
   du fond sans jamais s'en écarter, à chaque image de l'animation.
   Le fond, lui, ne bouge pas : c'est le logotype qui vient se poser dessus.
   Tout est désactivé si le visiteur a demandé moins d'animations ; l'état par
   défaut de la page est l'état final.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* à l'ouverture, le logotype descend le long de son oblique, depuis le
     haut-droite, jusqu'à ce que sa pointe rejoigne celle de l'ombre */
  .logo-entree{
    animation:arrivee 1300ms cubic-bezier(.22,.72,.24,1) 120ms both;
  }
  @keyframes arrivee{
    from{ transform:translate(var(--glisse), calc(var(--glisse) * -1)); opacity:0; }
    to  { transform:translate(0,0); opacity:1; }
  }

  /* puis la signature, puis l'invitation à défiler */
  .slogan{  animation:paraitre 800ms ease-out 780ms both; }
  .defiler{ animation:paraitre 700ms ease-out 1380ms both,
                      respire 2.6s ease-in-out 2100ms infinite; }
  @keyframes paraitre{ from{ opacity:0 } to{ opacity:1 } }
  @keyframes respire{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,5px) } }
}

/* =============================================================================
   SECTION 2 — les informations, sur fond blanc
   ========================================================================== */
.infos{
  position:relative;
  /* le coin oblique part hors cadre : on coupe proprement au bord */
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:var(--marge);
  background:#fff;
}

/* coin oblique : triangle transparent, hypoténuse en fuseau, jamais retournée */
.coin{
  position:absolute;
  top:var(--marge); left:var(--marge);
  width:var(--c); height:var(--c);
  pointer-events:none;
}
.coin svg{ display:block; width:100%; height:100%; }
.coin path{ fill:var(--turquoise); }

/* Le coin arrive du bas-gauche, depuis l'extérieur de l'écran, et remonte se
   poser à sa place en glissant sur son axe à 45°, au rythme du défilement.
   Le déplacement est (−d, +d) : sa somme est nulle, donc l'oblique reste sur
   la même droite x + y pendant tout le trajet.
   Sans script, --sp2 vaut 1 : le coin est d'emblée en place. */
.coin{
  transform:translate(calc(var(--glisse-coin) * (var(--sp2) - 1)),
                      calc(var(--glisse-coin) * (1 - var(--sp2))));
}

.bloc{ margin-left:var(--amorce-x); max-width:56ch; }
.amorce{ padding-top:var(--amorce-y); }
.centre{ margin-top:auto; margin-bottom:auto; }

h1,h2{ font-weight:600; color:var(--petrole); margin:0; line-height:1.24; }
h2{ font-size:clamp(21px,2.1vw,29px); }
/* les intertitres de la section 2 sont des libellés : titres pour la
   structure du document, discrets à l'œil */
h2.libelle{ font-weight:500; line-height:1.5; }
/* sous-titre : Jost Light turquoise, même corps que son titre (charte) */
.sous-titre{
  font-weight:300; color:var(--turquoise); margin:.1em 0 0;
  font-size:clamp(21px,2.1vw,29px); line-height:1.24;
}

.libelle{
  font-weight:500;
  font-size:clamp(11px,.82vw,13px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--turquoise);
  margin:0;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
.chapo{ font-size:clamp(17px,1.32vw,20px); line-height:1.5; max-width:46ch; }
.bloc .chapo:first-of-type{ margin-top:1em; }

/* la chute du chapô : même corps, en pétrole. Elle se détache du texte
   courant sans s'affadir. Le turquoise plafonnerait à 3,38:1, insuffisant
   pour du texte à ce corps ; le pétrole est à 8,78:1. */
.chute{ color:var(--petrole); }

/* texte courant de la section */
.texte{ max-width:52ch; margin-top:1em; }

.filet{
  border:0; border-top:1px solid rgba(0,154,172,.34);
  margin:calc(var(--c)*.12) 0; width:min(340px,100%);
}

a{ color:var(--petrole); text-decoration:none; border-bottom:1px solid var(--turquoise); }
a:hover{ border-bottom-color:currentColor; }

.contact{ font-size:1.05em; margin-top:1em; }
.contact a{ border-bottom:0; }
.contact .ligne{ display:block; }

.pied{
  margin-top:auto;
  padding-top:calc(var(--c)*.12);
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  font-size:clamp(11.5px,.8vw,13px); line-height:1.7;
  color:rgba(9,31,67,.62);
}
.pied a{ color:inherit; border-bottom:0; }
.pied a:hover{ color:var(--turquoise); }
.pied .mentions{ max-width:78ch; margin-left:var(--amorce-x); }
.pied .marque{ flex:0 0 auto; width:clamp(34px,3.2vw,46px); height:auto; }

/* fenêtres peu hautes : on resserre le module pour que la deuxième section
   tienne dans un écran sans toucher aux calages de la charte */
@media (max-height:950px){ :root{ --c: clamp(150px, 12vw, 168px); } }
@media (max-height:830px){
  .chapo{ font-size:clamp(16px,1.2vw,18.5px); line-height:1.48; }
  .texte{ font-size:.95em; }
  .filet{ margin:calc(var(--c)*.09) 0; }
}

@media (max-width:767px){
  /* sous 150 px l'oblique du coin passerait sous le pixel : on ne l'affiche pas */
  :root{ --amorce-x:0px; --amorce-y:clamp(24px,8vw,48px); }
  .coin{ display:none; }
  .pied{ flex-direction:column; align-items:flex-start; }
  .pied .mentions{ margin-left:0; }
}

@media print{
  .hero{ min-height:auto; background:#fff; }
  .logo-entree, .slogan, .logotype, .coin{ animation:none; transform:none; opacity:1; }
  .logo-cadre::before{ display:none; }
  .slogan{ color:var(--turquoise); }
  .defiler{ display:none; }
  .infos{ min-height:auto; }
}