/* Portfolio Thibaud Grenon · V1 de démonstration
   La typographie est provisoire, en attente du banc d'essai.
   Les couleurs sont relevées dans la maquette de Chevreuil. */

/* Alegreya, de Juan Pablo del Peral. Sous OFL, donc l'usage commercial et
   l'auto-hébergement sont explicitement autorisés. Fonte variable : un seul
   fichier de 42 Ko couvre les graisses de 400 à 900, donc pas de faux gras.
   Choisie sur banc d'essai le 15/08, voir /typo/. */
@font-face {
  font-family: "Alegreya";
  src: url("/thibaudgrenon/police/alegreya.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --titres:   "Alegreya", ui-serif, Georgia, serif;
  --creme:    #f5fef5;
  --page:     #efede7;       /* le papier de l’accueil : clarté 0,945, chroma abaissé à 0,008,
                                le hall reste neutre, les projets prennent leur teinte */
  --encre:    #2b3524;
  --vert:     #4e6c50;
  --sombre:   #323d14;
  --texte:    "Alegreya", ui-serif, Georgia, "Times New Roman", serif;
  --hero-h:   93lvh;         /* laisse voir la bande claire, jamais la mosaïque */
  --titre-scale: 1.3;        /* le titre, 30 % plus grand que la composition */
  --inv-w:    clamp(120px, 13vw, 190px);          /* largeur de « voir les projets » */
  --inv-h:    calc(var(--inv-w) / 2.801);         /* sa hauteur, au ratio de l'image */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  background: var(--page);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

/* ---------- accueil ---------- */

.hero {
  position: relative;
  z-index: 1;                  /* pour que son ombre tombe sur la suite */
  height: var(--hero-h);
  min-height: 420px;
  overflow: hidden;
  background: var(--sombre);
  /* l'ombre reprend le vert des taches peintes derrière les textes */
  box-shadow: 0 14px 34px -6px rgba(41, 58, 0, 0.55),
              0 3px 10px      rgba(41, 58, 0, 0.28);
}

/* la photo se recadre librement */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

/* Le titre et son voile se cadrent indépendamment de la photo : `contain`
   garantit que la composition tient toujours entière, quel que soit l'écran,
   pendant que la photo derrière se recadre librement en `cover`. */
.hero-titre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  scale: var(--titre-scale, 1);
}

/* Le fondu est porté par une animation CSS plutôt que par l'événement `load`
   d'une image : il se joue même si le script ne s'exécute pas. */
@keyframes apparait { from { opacity: 0 } to { opacity: 1 } }

/* `backwards` plutôt que `both` : l'état de repos reste opacity 1, donc si
   l'animation ne se joue pas, le titre est visible au lieu de rester invisible. */
.hero-titre {
  opacity: 1;
  animation: apparait 2.2s ease 0.15s backwards;
}

/* « voir les projets » est découpé sur son propre contenu : il peut donc être
   posé où l'on veut et grossir depuis son centre. Il garde sous lui un espace
   égal à sa propre hauteur. */
.hero-invite {
  position: absolute;
  left: 50%;
  bottom: var(--inv-h);
  translate: -50% 0;
  width: var(--inv-w);
  z-index: 2;
  animation: apparait 1.2s ease 1.7s backwards;
  transition: scale 0.35s ease;
}

.hero-invite img { width: 100%; height: auto; }

.hero-invite:hover,
.hero-invite:focus-visible { scale: 1.09; }

.hero-invite:focus-visible { outline: 2px solid var(--creme); outline-offset: 8px; }

/* ---------- mosaïque ---------- */

/* Le bloc est posé sur la page sauge, avec de l'air de chaque côté et une
   fine marge en haut. Les vignettes, elles, restent bord à bord entre elles. */
.projets {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8.6vh, 6rem) clamp(0.5rem, 3vw, 2.5rem) 0;
  background: var(--page);
}

/* L'ombre porte le bloc entier : sans elle, une vignette au fond crème
   (Morgane) se confond avec la page, leur contraste est de 1,01 pour 1. */
.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                      /* bord à bord, sans gouttière */
  box-shadow: 0 10px 30px -12px rgba(41, 58, 0, 0.38),
              0 1px 3px         rgba(41, 58, 0, 0.14);
}

.projet {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
}

.projet picture { display: block; height: 100% }

.projet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.projet:hover img { transform: scale(1.035); }

/* Provisoire, 31/08/2026 : les projets dont la bande n'est pas encore composée
   portent un voile du papier de la page. Il dit que la tuile mène à une page
   qui attend encore son travail. Le lien reste actif, la page projet existe et
   porte déjà son texte. À retirer tuile par tuile, à la livraison de sa bande.

   Il couvre la tuile entière, nom compris, y compris sur téléphone. Le contraste
   du nom y tombe, Gabriel Lechemin de 4,52 à 1,97 et Linogravure de 8,82 à 2,34 :
   choix de Chevreuil, la lisibilité d'un projet pas encore monté n'a pas d'enjeu,
   et une bande coupée juste au dessus du nom se voyait. */
.projet--attente::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(239 237 231 / 0.58);
  pointer-events: none;
  transition: background 0.35s ease;
}
.projet--attente:hover::after { background: rgb(239 237 231 / 0.34) }

/* le nom passe au dessus du voile, sinon il se délave avec l'image */
.projet-nom { z-index: 2 }


.projet-nom {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--survol, var(--encre));
  /* Le voile du survol prend la couleur de fond de la vignette, celle qui sert
     d'aplat a sa version telephone, et le texte suit.

     82 % est le plancher : c'est l'opacite la plus basse ou les six tuiles
     tiennent encore 3, seuil du grand texte gras. Choisel y est pile a 3,00,
     c'est lui qui commande, son olive etant la couleur la moins accueillante
     de la serie. En dessous l'image transparait trop et le texte decroche.

     Le gras et le plancher de 1,3 rem servent a ca : au dela de 18,66 px en
     gras, un texte compte comme du grand texte et son seuil passe de 4,5 a 3.
     La seconde ligne suit a 0,9 em, ce qui la garde au dessus de 18,66 px, et
     elle reprend l'opacite pleine : a 0,78 elle se melangeait au voile et
     tombait a 2,45 la ou le titre tenait 3,02. */
  background: color-mix(in srgb, var(--voile, #f8f7f2) 82%, transparent);
  font-family: var(--titres);
  font-size: clamp(1.3rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.projet:hover .projet-nom,
.projet:focus-visible .projet-nom { opacity: 1; }

.projet-nom span { display: block; font-size: 0.9em; opacity: 1; margin-top: 0.35em; }

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

.contact {
  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(1.4rem, 3vw, 2.4rem);
  text-align: center;
  background: var(--page);
  font-family: var(--titres);
  font-size: 1.1rem;
}

.contact p { max-width: 46rem; margin: 0 auto 1.3rem; }
.contact .offre { font-size: 1.28rem; margin-bottom: 1.8rem; }

.adresse {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  border: 0;
  background: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding: 0 0 0.2em;
}

.adresse:hover { opacity: 0.65; }

.copie { display: block; min-height: 1.4em; margin-top: 0.8rem; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s; }
.copie.vue { opacity: 0.7; }

/* La porte de contact : le mot seul, posé sur une des taches peintes du voile
   du titre. Aucun bouton. Elle mène en bas de page, à l'adresse. */
.porte {
  position: absolute;
  right: clamp(0.4rem, 1.6vw, 1.6rem);
  top: clamp(0.4rem, 1.6vw, 1.4rem);
  z-index: 10;
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
  font-family: var(--titres);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: 0.05em;
  color: var(--creme);
  text-decoration: none;
  transition: scale 0.3s ease;
}

.porte:hover,
.porte:focus-visible { scale: 1.12; }


.porte:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }

/* ---------- page projet ---------- */

.entete {
  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(1.5rem, 4vw, 3rem);
  max-width: 44rem;
  margin: 0 auto;
}

.entete h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 400; margin: 0 0 0.6rem; }
.entete dl { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 0 0 1.4rem; font-size: 0.9rem; opacity: 0.75; }
.entete dt { font-weight: 600; display: inline; }
.entete dd { display: inline; margin: 0 0 0 0.4em; }
.entete dl div { flex: 0 0 auto; }
.entete .credit { font-size: 0.85rem; opacity: 0.6; margin-top: 1.2rem; }

.bande { max-width: 1600px; margin: 0 auto; }
.bande img { width: 100%; }

.attente {
  max-width: 44rem;
  margin: 0 auto clamp(3rem, 8vw, 6rem);
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(43, 53, 36, 0.3);
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.7;
}

/* la ligne d'honnêteté, tout en bas, au bord de la page */
.pied {
  padding: 0 1.5rem 0.9rem;
  text-align: center;
  font-family: var(--titres);
  font-size: 0.82rem;
  opacity: 0.55;
}

.retour { display: block; text-align: center; padding: 2rem 1.5rem 4rem; font-size: 0.9rem; }

/* ---------- écrans étroits ---------- */

@media (max-width: 900px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --hero-h: 93lvh; }

  /* la mosaïque va d'un bord à l'autre */
  .projets { padding-left: 0; padding-right: 0; }

  /* Le titre passe en deux lignes, dans une image composée en portrait. Elle est
     déjà cadrée large. À 0,92 le titre occupe 79 % de la largeur, donc environ
     10 % de marge de chaque côté. */
  :root { --titre-scale: 0.92; }
  .hero-photo { object-position: center 52%; }

  /* Le survol n'existe pas ici. L'image se dézoome par un padding bas, et la
     bande ainsi dégagée laisse voir le fond coloré de la vignette : le texte s'y
     pose sur deux lignes. Atelier et lino ont été éclaircis dans leur propre
     teinte, leur fond d'origine donnait 3,3 et 1,6 pour 1 avec le texte sombre. */
  .projet { background: var(--fond, var(--page)); }

  .projet img {
    object-fit: contain;
    padding-bottom: var(--pad, 0%);
  }

  .projet-nom {
    inset: auto 0 0 0;
    display: block;
    place-content: initial;
    opacity: 1;
    background: none;
    color: var(--nom, var(--encre));
    padding: 0 0.55rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;      /* Alegreya est variable : vraie graisse */
    line-height: 1.24;
    letter-spacing: 0.02em;
    text-align: left;

    /* Le titre du projet est presque toujours ecrit dans la vignette elle meme.
       Sur telephone il doublait donc l'image et mangeait de la hauteur : le
       noeud de texte du titre passe a zero, seule la seconde ligne reste, et
       elle prend le gras que portait le titre. Demande de Chevreuil, 08/09/2026. */
    font-size: 0;
  }
  .projet-nom span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 0;
    opacity: 1;            /* la règle du haut en pose 0,78 : sans ça, les deux
                              lignes n'ont pas la même couleur */
  }

  /* Sur téléphone, Choisel passe avant Gabriel. Tous les éléments reçoivent un
     rang, sinon ceux qu'on ne touche pas gardent 0 et remontent en tête. */
  .projet:nth-child(1) { order: 1; }   /* atelier  */
  .projet:nth-child(2) { order: 2; }   /* morgane  */
  .projet:nth-child(3) { order: 4; }   /* gabriel  */
  .projet:nth-child(4) { order: 3; }   /* choisel  */
  .projet:nth-child(5) { order: 5; }   /* lino     */
  .projet:nth-child(6) { order: 6; }   /* zine     */


  /* La Fabrique de Mo garde son dégradé et son image pleine. */
  .projet--degrade { background: none; }
  .projet--degrade img { object-fit: cover; padding-bottom: 0; }
  .projet--degrade .projet-nom {
    padding: 2rem 0.55rem 0.5rem;
    background: linear-gradient(to top,
                rgba(248, 247, 242, 1) 0%,
                rgba(248, 247, 242, 0.94) 42%,
                rgba(248, 247, 242, 0) 100%);
  }

  .projet:hover img { transform: none; }

  /* le bloc de texte du bas vise la moitié de la hauteur de la mosaïque */
  .contact {
    padding: clamp(1.6rem, 6vw, 3rem) 1.1rem clamp(1rem, 3vw, 1.6rem);
    font-size: 0.86rem;
    line-height: 1.45;
  }
  .contact p { margin-bottom: 0.75rem; }
  .contact .offre { font-size: 1rem; margin-bottom: 0.9rem; }
  .adresse { font-size: 0.95rem; }
  .pied { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;   /* sinon le contenu attend son tour pour rien */
  }
  html { scroll-behavior: auto; }
}