/*
 * Feuille de style du site vitrine JL Capital.
 *
 * Même grammaire que le site CleanClac (Plus Jakarta Sans, très gros titres,
 * apparition au défilement, une seule feuille servie en statique, zéro
 * framework), mais la palette vient du logo JL Capital : le bleu franc du fond
 * et le rose très pâle des lettres. Le rose porte la page, le bleu ne sert que
 * d'accent. L'inverse écraserait les logos des trois applications, qui sont
 * déjà tous très colorés.
 */

/* ------------------------------------------------------------------ police */

/* Fichier VARIABLE : un seul téléchargement couvre 400, 600 et 800. Deux
   sous-ensembles seulement (latin et latin étendu), le site est en français. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ jetons */

:root {
  --header-h: 96px;
  --logo-head: 58px;

  /* Relevés au pixel sur le logo : le bleu du fond, le rose des lettres. */
  --blue: #3055ff;
  --blue-deep: #1f3fd9;
  /* Le rose du logo, dilué : à pleine saturation sur toute une page il vire au
     dragée et mange le noir du texte. C'est le fond, PLAT, de tout le site.
     Aucun dégradé nulle part : le seul relief de la page vient des ombres
     portées sous les tuiles et sous la carte de contact. */
  --pink-wash: #fff6fb;

  --ink: #141414;
  --subtle: #6a6a6a;
  --faint: #9b8f95;
  --hairline: #f1e6ee;

  --r-2xl: 28px;

  /* Le SEUL relief de la page. Le bleu dans l'ombre, plutôt que du noir, la
     rattache au logotype et l'empêche de griser le rose du fond. */
  --shadow-tile: 0 22px 50px rgba(48, 85, 255, 0.16), 0 6px 14px rgba(20, 20, 20, 0.08);

  --gap-section: clamp(88px, 12vw, 168px);
  --wrap: 1180px;

  /* Longueur de ligne des descriptions. Au-delà l'oeil perd le début de la
     ligne suivante et la promesse se lit comme un paragraphe de contrat. */
  --mesure: 470px;
}

/* -------------------------------------------------------------- fondations */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  background: var(--pink-wash);
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Le corps maximal est calé sur l'accroche du hero, qui fait 57 signes : à ce
   corps elle tient en TROIS lignes dans sa colonne. Une accroche plus longue
   repartira à quatre ou cinq, et il faudra rebaisser. */
h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.8rem);
}

h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
}

h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------- barre haute */

/* La barre ne contient QUE le logo, centré, et reste transparente : pas de
   bandeau, pas de flou, pas d'ombre. Sur un fond plat, un voile translucide se
   verrait comme une bande plus claire en haut de page. */
/* `fixed`, PAS `sticky`. Une barre collante reste dans le flux et pousse le
   hero de sa hauteur vers le bas : le bloc n'était plus centré sur l'écran mais
   sur ce qui restait sous la barre, et le bas du hero passait sous la ligne de
   flottaison. Sortie du flux, elle survole simplement la page. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  pointer-events: auto;
  border-radius: 23.5%;
  /* Caché tant qu'on est au sommet : le hero montre déjà le logotype en grand
     juste en dessous. Il se pose quand on commence à descendre. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.site-header.scrolled .brand,
.site-header--fixe .brand,
.brand:focus-visible {
  opacity: 1;
  transform: none;
}
/* Non focalisable tant qu'il est invisible : une tabulation ne doit pas
   emmener le curseur sur une cible qu'on ne voit pas. */
.site-header:not(.scrolled):not(.site-header--fixe) .brand {
  pointer-events: none;
}

.brand img {
  display: block;
  width: var(--logo-head);
  height: var(--logo-head);
  /* 23,5 % : le même squircle que les tuiles des produits et que le logotype du
     hero, pour que ce soit la même vignette, en plus petit. */
  border-radius: 23.5%;
  box-shadow: 0 10px 24px rgba(48, 85, 255, 0.24);
}

/* -------------------------------------------------------------------- hero */

/* La barre du haut est transparente : le hero occupe la hauteur d'écran
   ENTIÈRE, pas ce qui reste sous un bandeau. */
/* Gouttières haute et basse ÉGALES : c'est la condition du centrage. Une marge
   basse plus grande, et le bloc remonte d'autant, ce qui se voit tout de suite
   sur une page dont c'est le seul contenu. Elles valent la hauteur de la barre,
   de sorte que le logotype ne passe jamais sous le logo du header. */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--header-h) 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.hero-mark {
  justify-self: center;
  width: min(300px, 60vw);
  aspect-ratio: 1;
  border-radius: 23.5%;
  overflow: hidden;
  box-shadow: var(--shadow-tile);
  transform: translateY(var(--derive, 0px));
}
.hero-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------- les trois apps */

.app {
  padding: clamp(56px, 8vw, 104px) 0;
}

.app-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 92px);
}

/* Une rangée sur deux inverse l'ordre : le regard rebondit d'un bord à l'autre
   au lieu de descendre une colonne. */
.app-flip .app-media {
  order: 2;
}

.app-media {
  display: flex;
  justify-content: center;
}

/* La tuile : un icône d'application posée sur la page, à l'échelle du titre.
   Le rayon de 23,5 % est celui d'iOS, pas un arrondi de carte. */
.tuile {
  position: relative;
  width: min(272px, 58vw);
  aspect-ratio: 1;
  border-radius: 23.5%;
  overflow: hidden;
  box-shadow: var(--shadow-tile);
  transform: translateY(var(--derive, 0px));
  transition: box-shadow 0.4s ease;
}
.tuile img {
  display: block;
  width: 100%;
  height: 100%;
}
a.app-lien:hover .tuile {
  box-shadow: 0 30px 64px rgba(48, 85, 255, 0.22), 0 8px 18px rgba(20, 20, 20, 0.1);
}

.app-text h2 {
  margin-bottom: 20px;
}

.app-text .lede {
  max-width: var(--mesure);
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.6;
  color: var(--subtle);
  font-weight: 500;
}

.lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  border-bottom: 2px solid rgba(48, 85, 255, 0.28);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lien .fleche {
  transition: transform 0.25s ease;
}
.lien:hover {
  color: var(--blue-deep);
  border-color: var(--blue);
}
.lien:hover .fleche {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------- contact */

.contact {
  padding: var(--gap-section) 0 clamp(72px, 9vw, 120px);
}

.contact-carte {
  border-radius: var(--r-2xl);
  background: #fff;
  box-shadow: 0 24px 60px rgba(48, 85, 255, 0.1);
  padding: clamp(40px, 6vw, 76px);
}

.contact h2 {
  margin-bottom: 34px;
}

.coord {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.coord dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.coord dd {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.45;
}
.coord a {
  border-bottom: 2px solid rgba(48, 85, 255, 0.28);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.coord a:hover {
  color: var(--blue-deep);
  border-color: var(--blue);
}

/* ------------------------------------------------------------------- pied  */

.pied {
  border-top: 1px solid var(--hairline);
  padding: 30px 0 40px;
}
.pied-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--subtle);
}
.pied a:hover {
  color: var(--ink);
}

/* ------------------------------------------------------- page de contenu    */

/* La barre est `fixed` : elle ne réserve plus sa place dans le flux, c'est à la
   page de contenu de la dégager. */
.doc {
  padding: calc(var(--header-h) + clamp(24px, 4vw, 56px)) 0 var(--gap-section);
}
.doc h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin-bottom: 12px;
}
.doc .maj {
  color: var(--faint);
  font-size: 0.95rem;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.doc section {
  max-width: 760px;
  margin-bottom: 40px;
}
.doc h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: 12px;
}
.doc p {
  color: var(--subtle);
  margin-bottom: 12px;
}
.doc p:last-child {
  margin-bottom: 0;
}
.doc a {
  color: var(--blue-deep);
  border-bottom: 1px solid rgba(48, 85, 255, 0.3);
}

/* ------------------------------------------- apparition au défilement       */

.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-off {
  opacity: 0;
  transform: translateY(20px);
}

/* « Réduire les animations » : on retire les DÉPLACEMENTS, on garde les
   fondus. Le réglage vise le mal des transports, que provoquent les grands
   glissements ; une opacité qui change ne déplace rien et reste lisible. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal-off {
    transform: none;
  }
  .tuile,
  .hero-mark {
    transform: none !important;
  }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  :root {
    --header-h: 76px;
    --logo-head: 46px;
  }

  .hero {
    padding-top: clamp(36px, 9vw, 64px);
  }
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 44px;
  }
  /* Le logo passe AVANT le titre : c'est la marque qu'on vient chercher, et
     un titre de quatre lignes repoussait le logotype sous la ligne de
     flottaison. */
  .hero-mark {
    order: -1;
    width: min(200px, 46vw);
  }

  .app-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }
  .app-flip .app-media {
    order: 0;
  }
  .app-text .lede {
    margin: 0 auto;
  }
  .tuile {
    width: min(184px, 44vw);
  }

  .coord {
    grid-template-columns: 1fr;
  }

  .pied-inner {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .wrap {
    padding: 0 20px;
  }
  .brand span {
    font-size: 0.8rem;
  }
}