/* ==========================================================================
   HOME
   Styles propres aux huit sections de la homepage.
   ========================================================================== */

/* -------------------- HERO -------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--espace-xl);
  overflow: hidden;
  text-align: center;
}

.hero__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-nom-hero);
  line-height: 0.95;
  position: relative;
  z-index: 2;
  text-align: center;
  margin-inline: auto;
  /* Inversion là où le nom passe sur une photo : en mode différence, cette
     couleur donne exactement --couleur-texte (#22181C) sur le fond crème
     (#F7F3EE − #22181C = #D5DBD2), et s'éclaircit sur les photos sombres.
     À recalculer si la couleur de fond ou de texte change. */
  color: #D5DBD2;
  mix-blend-mode: difference;
}

.hero__nom span {
  display: block;
}

.hero__nom .hero__nom-famille {
  font-size: 0.5em;
  font-weight: 400;
  /* Le nom de famille fait la moitié de la taille du prénom. */
}

.hero__images {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__image {
  position: absolute;
  width: clamp(120px, 18vw, 260px);
  aspect-ratio: 3 / 4;
  will-change: translate;
  --rotation: 0deg;
  /* rotate et translate sont posées comme propriétés CSS indépendantes
     (plutôt que combinées dans transform) : hero-parallax.js peut piloter
     translate seul, en JS sur desktop, sans jamais toucher à rotate, et
     l'animation autonome mobile ci-dessous fait de même. */
  rotate: var(--rotation);
  translate: 0 0;
}

/* Positions et tailles volontairement variées et asymétriques ; chaque
   image tourne en plus sur sa propre orbite (js/hero-parallax.js). */
.hero__image--1 { top: 8%;  left: 6%;  width: clamp(100px, 14vw, 200px); --rotation: -3deg; }
.hero__image--2 { top: 14%; right: 8%; width: clamp(140px, 20vw, 280px); }
.hero__image--3 { bottom: 12%; left: 12%; width: clamp(110px, 16vw, 220px); --rotation: 2deg; }
.hero__image--4 { bottom: 8%;  right: 14%; width: clamp(130px, 18vw, 240px); }
.hero__image--5 { top: 60%; left: 42%; width: clamp(90px, 12vw, 170px); --rotation: -1deg; }

@media (max-width: 767px) {
  .hero__image--5 {
    display: none; /* composition resserrée à 4 images sur mobile */
  }

  .hero__image {
    width: clamp(90px, 30vw, 140px);
  }
}

/* Mouvement autonome : chaque image tourne sur une petite orbite, piloté par
   hero-parallax.js (sur tous les écrans, souris ou tactile). Désactivé sous
   prefers-reduced-motion. */

.hero__scroll {
  position: absolute;
  bottom: var(--espace-m);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}

/* -------------------- INTRODUCTION -------------------- */

.introduction {
  padding-block: var(--espace-xxl);
}

.introduction__texte {
  font-size: var(--taille-texte-l);
  line-height: 1.6;
  max-width: none;
}

.introduction__texte + .introduction__texte {
  margin-block-start: var(--espace-m);
}

/* -------------------- PROJETS -------------------- */

.projets {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xxl);
}

.projet {
  position: relative;
}

.projet__titre {
  font-size: var(--taille-titre-xl);
  margin-block-end: var(--espace-xs);
}

.projet__meta {
  display: flex;
  gap: var(--espace-xs);
  margin-block-end: var(--espace-xs);
}

.projet__image {
  aspect-ratio: 16 / 10;
  margin-block-end: var(--espace-s);
  overflow: hidden;
  background-color: var(--couleur-surface-douce);
}

.projet__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duree-moyenne) var(--easing-doux);
}

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

@media (prefers-reduced-motion: reduce) {
  .projet:hover .projet__image img {
    transform: none;
  }
}

/* Composition éditoriale asymétrique : chaque projet reçoit
   explicitement .projet--image-gauche ou .projet--image-droite,
   indépendamment de sa position dans la liste, pour rester facile à
   réordonner ou à modifier plus tard sans dépendre de l'ordre
   (nth-child). Texte et image d'un même projet restent toujours
   associés côte à côte ; seul l'aspect-ratio de l'image varie d'un
   projet à l'autre pour créer un rythme sans casser cette association. */
.projet--image-gauche {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grille-gouttiere);
  align-items: center;
}
.projet--image-gauche .projet__image { grid-column: 1 / span 6; margin-block-end: 0; }
.projet--image-gauche .projet__contenu { grid-column: 8 / span 5; }

.projet--image-droite {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grille-gouttiere);
  align-items: center;
}
.projet--image-droite .projet__image { grid-column: 7 / span 6; margin-block-end: 0; order: 2; }
.projet--image-droite .projet__contenu { grid-column: 1 / span 5; order: 1; }

/* Légère variation de format d'une image à l'autre pour créer un rythme,
   indépendante du côté gauche/droite. */
.projets .projet:nth-of-type(1) .projet__image { aspect-ratio: 4 / 3; }
.projets .projet:nth-of-type(2) .projet__image { aspect-ratio: 16 / 10; }

@media (max-width: 767px) {
  .projet--image-gauche,
  .projet--image-droite {
    display: block;
  }
  .projet--image-droite .projet__image,
  .projet--image-droite .projet__contenu {
    order: initial;
  }
  .projet--image-gauche .projet__image,
  .projet--image-droite .projet__image {
    margin-block-end: var(--espace-s);
  }
}

.projets__suite {
  margin-block-start: var(--espace-l);
}

/* -------------------- DOMAINES -------------------- */

.domaines__liste {
  display: flex;
  flex-direction: column;
}

.domaine {
  display: flex;
  align-items: baseline;
  gap: var(--espace-s);
  padding-block: var(--espace-s);
  border-block-end: 1px solid rgba(34, 24, 28, 0.15);
  cursor: default;
}

.domaine__numero {
  font-family: var(--police-texte);
  font-size: var(--taille-texte-petit);
  opacity: 0.6;
}

.domaine__nom {
  font-family: var(--police-titre);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1;
}

.domaines .conteneur.grille {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
}

.domaines .conteneur.grille > .col-span-4 {
  grid-column: 1;
}

.domaines__apercu {
  /* Le cadre suit la largeur de l'image, avec un bord gauche fixe. */
  grid-column: 2;
  justify-self: start;
  display: flex;
  width: fit-content;
  max-width: 100%;
  height: 25.25rem;
  min-width: 0;
  opacity: 1;
  transition: none;
}

@media (max-width: 767px) {
  .domaines .conteneur.grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .domaine__nom {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .domaines__apercu {
    grid-column: 1;
    height: 20rem;
    margin-block-start: var(--espace-m);
  }
}

.domaines__apercu img {
  width: auto;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

.domaines__apercu [hidden] {
  display: none;
}

/* Écrans tactiles : le domaine actif (choisi au défilement) ressort, les
   autres s'estompent, pour montrer quel domaine l'image illustre. */
@media (hover: none) {
  .domaine__nom {
    transition: opacity var(--duree-moyenne) var(--easing-doux);
  }
  .domaine:not(.is-actif) .domaine__nom {
    opacity: 0.35;
  }
}

/* -------------------- À PROPOS -------------------- */

.a-propos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grille-gouttiere);
  align-items: start;
}

.a-propos__image {
  grid-column: 1 / span 5;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

.a-propos__texte {
  grid-column: 7 / span 6;
  font-size: var(--taille-texte-l);
  line-height: 1.6;
}

.a-propos__texte p + p {
  margin-block-start: var(--espace-s);
}

.a-propos__video-cv {
  grid-column: 7 / span 6;
  margin-block-start: var(--espace-m);
}

.a-propos__video-cv-titre {
  font-size: var(--taille-titre-m);
  margin-block-end: var(--espace-xs);
}

.a-propos__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--couleur-surface-douce);
  border: 1px solid rgba(34, 24, 28, 0.15);
  object-fit: cover;
}

@media (max-width: 767px) {
  .a-propos {
    display: block;
  }
  .a-propos__image {
    margin-block-end: var(--espace-s);
  }
  .a-propos__video-cv {
    margin-block-start: var(--espace-s);
  }
}

/* -------------------- OUTILS -------------------- */

.outils__titre {
  margin-block-end: var(--espace-m);
}

.outils {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-l);
  max-width: 48rem;
}

.outils__famille-nom {
  font-family: var(--police-texte);
  font-size: var(--taille-texte-petit);
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-block-end: var(--espace-xxs);
}

.outils__liste li {
  font-size: var(--taille-texte-l);
  padding-block: 0.2rem;
}

@media (max-width: 767px) {
  .outils {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }
}

/* -------------------- CONTACT -------------------- */

.contact {
  background-color: var(--couleur-contact-fond);
  color: var(--couleur-contact-texte);
  padding-block: var(--espace-xxl);
}

.contact__titre {
  font-size: var(--taille-nom-hero);
  line-height: 0.95;
}

.contact__phrase {
  font-size: var(--taille-texte-l);
  margin-block: var(--espace-m);
  max-width: 30rem;
}

.contact__liens {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  margin-block-start: var(--espace-m);
}

/* Les liens de contact sont déjà de grands titres sur fond sombre : un
   simple soulignement au survol suffit. */
.contact__lien {
  align-self: flex-start;
  max-width: 100%;
  font-size: var(--taille-titre-m);
  font-family: var(--police-titre);
  overflow-wrap: break-word;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duree-courte) var(--easing-doux);
}

.contact__lien:hover,
.contact__lien:focus-visible {
  text-decoration-color: currentColor;
}

/* -------------------- CHAOS MAÎTRISÉ (desktop) -------------------- */
/* Aucun bloc ne part du même bord que son voisin : départs et largeurs
   varient d'une section à l'autre, toujours calés sur la grille de 12
   colonnes. Les projets sont ciblés par leur rang : changer leur ordre
   change aussi leur placement (comme les ratios plus haut). */

@media (min-width: 1024px) {
  .introduction .conteneur {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
  }
  .introduction__texte:nth-of-type(1) { grid-column: 2 / span 8; }
  .introduction__texte:nth-of-type(2) { grid-column: 6 / span 6; }
  .introduction__texte:nth-of-type(3) { grid-column: 3 / span 7; }

  /* Mouvement et tatouage, collé au bord gauche. */
  .projets .projet:nth-of-type(1) .projet__image   { grid-column: 1 / span 6; }
  .projets .projet:nth-of-type(1) .projet__contenu { grid-column: 8 / span 4; }

  /* Festival du Citron, plus à droite et texte descendu. */
  .projets .projet:nth-of-type(2) .projet__image   { grid-column: 3 / span 6; }
  .projets .projet:nth-of-type(2) .projet__contenu { grid-column: 10 / span 3; align-self: start; margin-block-start: var(--espace-l); }

  .domaines .conteneur.grille > .col-span-4 { padding-inline-start: var(--colonne); }
  .domaines__apercu {
    margin-inline-start: calc(var(--colonne) * 2);
    max-width: calc(100% - var(--colonne) * 2);
  }

  /* L'image couvre deux rangées pour que la vidéo suive directement le texte. */
  .a-propos__image    { grid-column: 2 / span 4; grid-row: 1 / span 2; }
  .a-propos__texte    { grid-column: 7 / span 5; margin-block-start: var(--espace-xl); }
  .a-propos__video-cv { grid-column: 8 / span 5; }

  /* Logiciels centrés sous le bloc À propos, qui occupe les colonnes 2 à 12. */
  #outils .conteneur {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
  }
  .outils-bloc { grid-column: 2 / -1; justify-self: center; width: 100%; max-width: 48rem; }

  .contact .conteneur {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
  }
  .contact__titre  { grid-column: 2 / -1; }
  .contact__phrase { grid-column: 7 / span 5; }
  .contact__liens  { grid-column: 4 / span 9; }
}

/* -------------------- CHAOS MAÎTRISÉ (mobile) -------------------- */
/* Une seule colonne, mais les blocs changent de largeur et de bord :
   images pleine largeur, calées à droite ou en retrait, textes décalés
   ponctuellement. Le texte garde toujours au moins ~80 % de la largeur. */

@media (max-width: 767px) {
  .introduction { padding-block: var(--espace-l); }
  .introduction__texte:nth-of-type(2) { margin-inline-start: 15%; }
  .introduction__texte:nth-of-type(3) { margin-inline-start: 7%; }

  .projets { gap: var(--espace-l); }

  /* Festival du Citron : image calée à droite, texte en retrait. */
  .projets .projet:nth-of-type(2) .projet__image { width: 82%; margin-inline-start: auto; }
  .projets .projet:nth-of-type(2) .projet__contenu { padding-inline-start: 18%; }

  /* Image au-dessus de la liste : elle reste visible pendant que le
     défilement change le domaine actif (voir domaines-interaction.js). */
  .domaines__apercu {
    order: -1;
    position: sticky;
    top: 4.5rem;
    z-index: 1;
    align-self: start;
    justify-self: end;
    height: 14rem;
    margin-block: 0 var(--espace-m);
  }

  /* L'aperçu sticky (top 4.5rem + hauteur 14rem) masque le haut de l'écran :
     un domaine atteint au clavier doit rester visible dessous. */
  .domaines .domaine__nom {
    scroll-margin-top: 19rem;
  }

  .a-propos__image { width: 78%; }
  .a-propos__texte { margin-inline-start: 10%; }
  .a-propos__video-cv { margin-inline-start: 5%; }

  /* Logiciels : Photo et Graphisme côte à côte, Vidéo et motion dessous. */
  .outils-bloc { margin-inline-start: 12%; }
  .outils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outils__famille:nth-child(3) { grid-column: 1 / -1; }

  .contact__phrase { margin-inline-start: 15%; }
  .contact__liens { margin-inline-start: 7%; }
}

/* -------------------- CHAOS MAÎTRISÉ (tablette) -------------------- */
/* Même esprit que le desktop, en plus doux : décalages d'une ou deux
   colonnes seulement, pour garder des textes confortables à 768-1023 px. */

@media (min-width: 768px) and (max-width: 1023px) {
  .introduction .conteneur {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
  }
  .introduction__texte:nth-of-type(1) { grid-column: 1 / span 10; }
  .introduction__texte:nth-of-type(2) { grid-column: 3 / span 10; }
  .introduction__texte:nth-of-type(3) { grid-column: 2 / span 10; }

  .projets .projet:nth-of-type(2) .projet__image   { grid-column: 2 / span 6; }
  .projets .projet:nth-of-type(2) .projet__contenu { grid-column: 9 / span 4; align-self: start; margin-block-start: var(--espace-m); }

  .a-propos__image    { grid-row: 1 / span 2; }
  .a-propos__texte    { margin-block-start: var(--espace-l); }
  .a-propos__video-cv { grid-column: 8 / span 5; }

  .outils-bloc { margin-inline-start: calc(var(--colonne) * 2); }

  .contact .conteneur {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
  }
  .contact__titre  { grid-column: 1 / -1; }
  .contact__phrase { grid-column: 5 / span 8; }
  .contact__liens  { grid-column: 2 / span 11; }
}