/* Lola Le Vient : feuille de style commune */

@font-face {
  font-family: "Alcyone";
  src: url("fonts/Alcyone-Medium.woff2") format("woff2"),
       url("fonts/Alcyone-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif; /* Helvetica du système (Apple), rien à intégrer ni de licence web */
  --texte: var(--helvetica);
  --haut-entete: 34px; /* hauteur du menu en haut */
  --interlignage: 1.18; /* même interlignage partout, serré comme la page Expositions (proportionnel à la taille), sauf la bio graphique */
  --ink: #141414;
  --grey: #9b9b9b;
  --bg: #ffffff;
  --m: clamp(14px, 1.45vw, 28px);          /* marge latérale */
  --g: clamp(6px, 0.8vw, 14px);            /* gouttière entre colonnes */
  --col: min(23.4vw, calc((100svh - 230px) * 0.8)); /* largeur d'une colonne (= une image de l'accueil) */
  --small: 11px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--texte);
  font-size: 14px;
  line-height: var(--interlignage);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--grey); }
img, video { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }

/* En-tête : calé sur la grille des images */
.top {
  display: grid;
  grid-template-columns: var(--col) var(--col) 1fr auto;
  column-gap: var(--g);
  padding: 16px var(--m) 0;
}
.top .name { grid-column: 1; font-family: "Alcyone", var(--helvetica); font-weight: 500; } /* licence webfont Atipo */
.top .menu { grid-column: 3; display: flex; gap: 2.8em; }
.top .ext { grid-column: 4; }
.top [aria-current="page"] { color: var(--grey); }

/* Accueil : une rangée d'images qui défile horizontalement */
.home { height: 100svh; overflow: hidden; }

.rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--m);
  display: flex;
  align-items: flex-end;
  gap: var(--g);
  padding-left: var(--m);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail::after { content: ""; flex: 0 0 calc(var(--m) - var(--g)); align-self: stretch; }

.work { flex: 0 0 var(--col); }
.work figcaption {
  font-size: var(--small);
  line-height: var(--interlignage);
  min-height: calc(3em * var(--interlignage));
  margin-bottom: 14px;
}
.frame { aspect-ratio: 4 / 5; overflow: hidden; background: #f3f3f3; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }

/* Bio : version graphique, en grand */
.bio-page main { padding: 0 var(--m); }

/* Interlignage et mise en page repris de la ref (NSLT Studio), en Helvetica.
   Tout est en em : changer font-size réduit ou agrandit le bloc entier (texte, images, largeur). */
.graphique {
  --decalage: calc(2 * (var(--col) + var(--g))); /* début de la 3e colonne, comme la bio normale */
  margin-left: var(--decalage);
  /* deuxième écran : la bio graphique centrée en hauteur */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--texte);
  font-weight: 400;
  /* 20px, réduit si la place manque à droite */
  font-size: min(20px, calc((100vw - 2 * var(--m) - var(--decalage)) / 25));
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #282828;
  max-width: 25em; /* largeur qui donne les retours à la ligne choisis par Lola (entre 23,8 et 26,3em en Helvetica) */
}
.graphique p { text-wrap: pretty; }
/* Retours à la ligne voulus par Lola */
.graphique .l { display: block; }
.saut-mobile { display: none; }
.graphique p + p { margin-top: 0.7em; }

/* Les images qui remplacent les mots : toutes au format de l'image « concept ».
   Les marges négatives les laissent dépasser un peu de la ligne sans écarter les lignes voisines. */
.mot {
  display: inline;
  height: 1.2em;
  width: auto;
  aspect-ratio: 922 / 660;
  object-fit: cover;
  vertical-align: -0.17em;
  margin-top: -0.08em;
  margin-bottom: -0.13em;
}
.nw { white-space: nowrap; }

/* Bio : texte courant, en petit */
.bio-texte {
  display: grid;
  grid-template-columns: var(--col) var(--col) var(--col) 1fr;
  column-gap: var(--g);
  margin: 0 calc(-1 * var(--m)) 0;
  /* premier écran : texte et photo centrés en hauteur ; la bio graphique n'apparaît qu'en descendant */
  min-height: calc(100svh - var(--haut-entete));
  align-content: center;
  padding: 0 var(--m);
  font-size: var(--small); /* même taille que les titres de l'accueil */
  line-height: var(--interlignage);
}
.bio-texte .label { grid-column: 1; grid-row: 1; align-self: start; }
/* Texte de la bio ; petite photo centrée dans le blanc à gauche, à la hauteur du paragraphe */
.bio-corps { grid-column: 3 / span 2; grid-row: 1; }
.bio-texte .texte { max-width: 34em; }
.photo-bio { grid-column: 1 / span 2; grid-row: 1; justify-self: center; align-self: center; width: 120px; margin-left: var(--g); } /* la marge compense la gouttière : centrée entre la marge de page et le texte */
.photo-bio img { width: 100%; height: auto; }
.bio-texte .texte p { text-wrap: pretty; }
.bio-texte .texte p + p { margin-top: 0.85em; }
.liens { margin-top: 1.6em !important; }
.liens a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.bas {
  display: grid;
  grid-template-columns: var(--col) var(--col) 1fr;
  column-gap: var(--g);
  padding: clamp(80px, 16vh, 180px) var(--m) var(--m);
}
.bas .lieu { grid-column: 3; }

/* Il pleut : trois lignes centrées en petites capitales (ref) */
.ilpleut-page { min-height: 100svh; }

.infos {
  min-height: calc(100svh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.3em;
  padding: 8vh var(--m) 0;
  font-family: var(--helvetica);
  font-size: 9px;
  line-height: var(--interlignage);
  text-transform: uppercase;
}
.infos .ligne { display: flex; gap: 1.6em; }
.infos .lab { white-space: nowrap; word-spacing: 0.4em; font-weight: 300; text-transform: none; } /* Helvetica Light, sans capitales */
.infos .lab span { word-spacing: normal; }
.infos .apropos { max-width: 68em; text-wrap: pretty; }
/* Largeur fixe : la liste garde la place qu'avait la ligne d'origine (Heliot Emil ne bouge pas) */
.infos .clients { width: 17.3em; }
/* Logo Il pleut (plan de travail 5 de TYPE-ILPLEUT.ai), centré sous le texte */
/* Mosaïque sous le texte (ref Rue Studio) : rectangles tous de la même taille, deux lignes de cinq */
.mosaique {
  align-self: center;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8em;
  width: min(48em, 100%);
}
.mosaique img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.logo-ilpleut { display: block; align-self: center; width: 64px; margin-top: 1.5em; }
.logo-ilpleut img { width: 100%; height: auto; }

@media (max-width: 760px) {
  /* Téléphone : même composition que sur ordinateur, centrée, en plus petit pour garder du blanc autour */
  .infos { font-size: 7.5px; padding-left: 28px; padding-right: 28px; }
  .infos .apropos { max-width: 34em; }
  .logo-ilpleut { width: 52px; }
  .suite-bureau { display: none; } /* sur téléphone, le texte s'arrête à « écriture » */
}

/* Expositions : six colonnes d'après la ref (Jose Houdini), la liste démarre sous le menu */
.expo-page {
  --cw: calc((2 * (var(--col) + var(--g)) - 3 * var(--g)) / 3); /* trois colonnes à gauche du menu */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.expo,
.expo-bas {
  font-family: var(--helvetica);
  display: grid;
  grid-template-columns: repeat(3, var(--cw)) repeat(3, 1fr);
  column-gap: var(--g);
  font-size: var(--small);
  line-height: var(--interlignage);
}
.expo { flex: 1; align-content: start; padding: 44px var(--m) 0; }
.expo h2 { font-size: inherit; font-weight: 400; text-transform: uppercase; margin-bottom: 1.9em; }
.expo ul { list-style: none; }
.expo .apres { margin-top: calc(1em * var(--interlignage)); } /* une ligne vide */
.rang .ty > span:last-child { white-space: nowrap; }
.collabs { grid-column: 4; }
.en-cours { grid-column: 5; }
.contact { grid-column: 6; }
.filet { grid-column: 1 / -1; border: 0; border-top: 1px solid #c9c9c9; margin: 1.8em 0 1.2em; }
.maj { grid-column: 1 / span 3; }
.liste { grid-column: 4 / -1; display: grid; grid-template-columns: subgrid; }
.liste h2 { grid-column: 1 / -1; }
.rang { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.rang > span { min-width: 0; }
.rang .ty { display: flex; justify-content: space-between; gap: 1em; }
.expo i { font-style: normal; color: var(--grey); }
.expo-bas { padding: 3em var(--m) var(--m); }
.heure { grid-column: 4 / span 2; }
.droits { grid-column: 6; text-align: right; color: var(--grey); }

@media (max-width: 760px) {
  .expo-bas { grid-template-columns: 1fr 1fr; }
  /* Haut : les quatre blocs côte à côte comme sur ordinateur, plus petits et plus serrés */
  /* Vide à gauche : tout commence là où étaient les Collaborations (36 % de la largeur) */
  .expo { grid-template-columns: repeat(3, max-content); justify-content: space-between; column-gap: 8px; row-gap: 2.2em; padding-top: 32px; padding-left: 36vw; }
  .collabs { grid-column: 1; }
  .en-cours { grid-column: 2; }
  .contact { grid-column: 3; }
  .bloc { font-size: 7px; }
  .bloc h2 { margin-bottom: 1.2em; }
  .filet, .maj, .liste { grid-column: 1 / -1; }
  .filet { margin: 0 0 0 calc(var(--m) - 36vw); }
  /* Liste : même taille que les blocs du haut, alignée sur les Collaborations */
  .maj, .liste { font-size: 7px; }
  .liste h2 { margin-bottom: 1.2em; }
  .liste { display: block; }
  .rang { display: block; }
  .rang > span { display: block; }
  .rang + .rang { margin-top: 1em; }
  .heure { grid-column: 1; }
  .droits { grid-column: 2; }
}

/* Pages projet (refs Snelling, Floor Lamp, J.Hannah ; Bloxas sur téléphone)
   Ordinateur : retour et titre en haut à gauche ; tous les médias à gauche, même largeur ;
   le texte à droite, sur l'axe du menu, reste visible pendant qu'on fait défiler. */
.p-intro {
  display: grid;
  grid-template-columns: var(--col) var(--col) var(--col) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--g);
  padding: clamp(80px, 16vh, 180px) var(--m) 0;
  font-size: var(--small);
}
.p-retour { grid-column: 1; grid-row: 1; }
.p-titre { grid-column: 2; grid-row: 1; }
.p-texte {
  grid-column: 3 / span 2; grid-row: 1 / span 2; align-self: start;
  position: sticky; top: clamp(80px, 16vh, 180px);
  max-width: 34em; text-wrap: pretty;
}
.p-texte p + p { margin-top: calc(1em * var(--interlignage)); }
.p-texte .p-infos { color: var(--grey); }
.p-medias {
  grid-column: 1 / span 2; grid-row: 2;
  display: flex; flex-direction: column; gap: var(--g);
  margin-top: clamp(60px, 12vh, 140px);
}
.p-medias > * { display: block; width: 100%; height: auto; }
/* Titres des œuvres : un peu plus gras (trait légèrement épaissi) */
.titre { -webkit-text-stroke: 0.25px currentColor; }
.work .lien { display: block; }
.work .lien:hover figcaption { color: var(--grey); }

@media (max-width: 760px) {
  .p-intro { display: block; padding-top: 40px; }
  .p-retour { display: block; margin-bottom: 2.5em; }
  .p-titre { margin-bottom: 1.5em; }
  .p-texte { position: static; }
  .p-medias { gap: 14px; margin-top: 2.5em; }
}

/* Téléphone */
@media (max-width: 760px) {
  :root { --col: min(72vw, calc((100svh - 250px) * 0.8)); }

  /* Onglets empilés : Lola Le Vient, Bio, Expositions, Il pleut, avec l'interlignage du site */
  .top { grid-template-columns: 1fr auto; row-gap: 0; }
  .top .name { grid-row: 1; }
  .top .ext { grid-column: 2; grid-row: 1; }
  .top .menu { grid-column: 1; grid-row: 2; flex-direction: column; gap: 0; }

  .graphique { margin-left: 0; max-width: none; font-size: 17px; }

  .bio-texte { grid-template-columns: 1fr; row-gap: 4px; }
  .bio-texte .label, .bio-corps { grid-row: auto; }
  .bio-corps { grid-column: 1; }
  /* Téléphone : pas de « Bio », la photo au-dessus du texte */
  .bio-texte .label { display: none; }
  .photo-bio { grid-column: 1; grid-row: 1; margin: 0 0 2.5em; }
  .bio-corps { grid-row: 2; }
  /* Bio graphique : « j'ai fixé » à la ligne, « et brut… » à la suite de « honnête » */
  .saut-mobile { display: block; }
  .graphique .l-bureau { display: inline; }

  .bas { grid-template-columns: 1fr 1fr; }
  .bas .lieu { grid-column: 2; }
}

@media (max-width: 479px) {
  .graphique { font-size: 16px; }
}