/* =========================================================
   Pikzel — feuille de style
   Mobile d'abord. Animations : transform et opacity uniquement.
   ========================================================= */

/* ---------- Couleurs et réglages ---------- */
:root {
  --encre: #15112B;
  --rose: #FF3D7F;
  --jaune: #FFD23F;
  --turquoise: #2EE6D6;
  --bleu: #2B6BFF;
  --creme: #FFF7EC;
  --lavande: #CFC8F5;

  --titre: 'Unbounded', 'Arial Black', sans-serif;
  --texte: 'Space Grotesk', system-ui, sans-serif;
  --marge: clamp(16px, 4vw, 56px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--encre);
  color: #fff;
  font-family: var(--texte);
  font-size: clamp(16px, 1.1vw + 12px, 20px);
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip; /* « clip » ne casse pas position: sticky */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 900; line-height: .95; letter-spacing: -.03em; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; top: 8px; left: 8px; z-index: 200; padding: .6em 1em;
  background: var(--jaune); color: var(--encre); font-weight: 700;
  transform: translateY(-150%);
}
.evitement:focus { transform: none; }

/* =========================================================
   LOGO — repris tel quel de logo/logo.html
   ========================================================= */
.pikzel {
  --taille: 150px; --point: var(--jaune);
  position: relative; display: inline-flex; align-items: flex-end;
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: var(--taille);
  line-height: 1; letter-spacing: -.04em; color: currentColor; text-decoration: none;
}
.sur-clair .pikzel, .pikzel.sur-clair { --point: var(--rose); }
.pikzel__mot { display: inline-flex; align-items: flex-end; animation: pkz-glitch 3s steps(1) infinite; }
.pikzel:hover .pikzel__mot { animation: pkz-glitch-hover .4s steps(1) 1; }
.pikzel__i { position: relative; display: inline-block; }
.pikzel__point {
  position: absolute; left: 50%; top: -.09em; width: .25em; height: .25em; margin-left: -.15em;
  background: var(--point); animation: pkz-bounce 1.6s cubic-bezier(.3,1.6,.5,1) infinite;
}
.pikzel__px { position: absolute; right: -.13em; opacity: 0; animation: pkz-drift 2.2s ease-out infinite; }
.pikzel__px--1 { bottom: .4em; width: .12em; height: .12em; background: var(--jaune); --dx: .6em; --dy: -.27em; }
.pikzel__px--2 { bottom: .2em; width: .08em; height: .08em; background: var(--turquoise); --dx: .87em; --dy: .07em; animation-delay: .5s; }
.pikzel__px--3 { bottom: .6em; width: .07em; height: .07em; background: var(--rose); --dx: .73em; --dy: -.53em; animation-delay: 1s; }

/* Le mot est net au repos, il « bugge » brièvement toutes les 3 s */
@keyframes pkz-glitch {
  0%, 84%, 96%, 100% { text-shadow: none; transform: translate(0,0); }
  86% { text-shadow: -.053em 0 var(--rose), .053em 0 var(--turquoise); transform: translate(.02em,0); }
  90% { text-shadow: .04em 0 var(--rose), -.04em 0 var(--turquoise); transform: translate(-.013em,0); }
  93% { text-shadow: -.02em 0 var(--rose), .02em 0 var(--turquoise); transform: translate(0,0); }
}
@keyframes pkz-glitch-hover {
  0% { text-shadow: -.06em 0 var(--rose), .06em 0 var(--turquoise); transform: translate(.02em,0); }
  40% { text-shadow: .045em 0 var(--rose), -.045em 0 var(--turquoise); transform: translate(-.015em,0); }
  80%, 100% { text-shadow: none; transform: translate(0,0); }
}
@keyframes pkz-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-.23em) rotate(45deg); }
  60% { transform: translateY(-.23em) rotate(90deg); }
}
@keyframes pkz-drift {
  0% { transform: translate(0,0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* =========================================================
   1. INTRO (1,5 s, première visite seulement)
   ========================================================= */
.intro { display: none; }
.avec-intro .intro {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: var(--encre); color: #fff;
  animation: intro-sortie .5s cubic-bezier(.7,0,.3,1) 1s forwards;
}
.avec-intro .intro .pikzel { animation: intro-entree .35s ease-out both; }
.avec-intro .intro .pikzel__mot { animation: pkz-glitch-hover .45s steps(1) .4s 1; }
@keyframes intro-entree { from { opacity: 0; transform: scale(.94); } }
@keyframes intro-sortie { to { transform: translateY(-100%); visibility: hidden; } }

/* =========================================================
   EN-TÊTE
   ========================================================= */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--marge);
  pointer-events: none;
}
.entete > * { pointer-events: auto; }
.entete__logo { background: var(--encre); padding: .5em .7em .38em .6em; border-radius: 16px; }
/* Menu : une pilule encre aux bords ronds. La section en cours prend un fond
   plus clair et un petit pixel de couleur (rappel du point du logo). */
.entete__nav {
  display: flex; align-items: center; gap: 2px;
  padding: 5px; background: var(--encre); border-radius: 999px;
}
.entete__lien {
  --c: var(--rose);
  position: relative; display: none;
  padding: .55em 1em .55em 1.6em; border-radius: 999px; color: var(--lavande);
  font-weight: 500; font-size: .9rem; line-height: 1.2; text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.entete__lien:nth-child(2) { --c: var(--jaune); }
.entete__lien:nth-child(3) { --c: var(--turquoise); }
.entete__lien::before {
  content: ''; position: absolute; left: .85em; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 2px; background: var(--c);
  transform: scale(.5); opacity: .5;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
}
.entete__lien:hover, .entete__lien.actif { color: #fff; background: rgba(255,255,255,.09); }
.entete__lien:hover::before, .entete__lien.actif::before { transform: rotate(45deg); opacity: 1; }

.entete__contact {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1.1em; border-radius: 999px; background: var(--rose); color: var(--encre);
  font-weight: 700; font-size: .9rem; line-height: 1.2; text-decoration: none;
}
.fleche { display: inline-block; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.entete__contact:hover .fleche, .bouton:hover .fleche { transform: translateX(4px) rotate(-45deg); }
@media (min-width: 760px) {
  .entete__lien { display: inline-block; }
  .entete__contact { margin-left: 4px; }
}

/* =========================================================
   BOUTONS
   ========================================================= */
.bouton {
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1em 1.6em; border-radius: 999px;
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.bouton--rose { background: var(--rose); color: var(--encre); }

/* =========================================================
   2. ACCUEIL — mosaïque de photos + titre
   Téléphone : 7 tuiles en haut, le titre en dessous.
   Ordinateur : 9 tuiles autour d'un grand espace encre pour le titre.
   ========================================================= */
.accueil {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; gap: 8px;
  padding: 76px 10px 28px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, clamp(80px, 13.5svh, 150px)) auto;
  grid-template-areas:
    "a a b c"
    "d e e c"
    "d f g g"
    "t t t t";
  background: var(--encre);
  overflow: hidden;
}
.tuile {
  --c: var(--rose);
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--c);
}
html:not(.js-anim) .tuile { background: transparent; }
.tuile:nth-child(4n+2) { --c: var(--jaune); }
.tuile:nth-child(4n+3) { --c: var(--turquoise); }
.tuile:nth-child(4n+4) { --c: var(--bleu); }
.tuile img, .tuile__calque {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.tuile img { object-fit: cover; object-position: 50% 25%; } /* cadré haut : on garde les visages */
.tuile.chargee { background: transparent; } /* évite un liseré de couleur autour de la photo */
.tuile__calque { background: var(--c); border-radius: inherit; }
.tuile--a { grid-area: a; } .tuile--b { grid-area: b; } .tuile--c { grid-area: c; }
.tuile--d { grid-area: d; } .tuile--e { grid-area: e; } .tuile--f { grid-area: f; }
.tuile--g { grid-area: g; } .tuile--h, .tuile--i { display: none; }

.accueil__texte { grid-area: t; position: relative; padding: 22px 8px 0; }
.accueil__titre {
  font-size: clamp(2.3rem, 11.5vw, 4rem);
  letter-spacing: -.045em; line-height: .98;
  margin-bottom: .45em;
}
.accueil__titre .ligne { display: block; }
.accueil__titre .mot { display: inline-block; }
/* Seuls les points finaux sont en couleur */
.pt { font-style: normal; }
.pt--rose { color: var(--rose); } .pt--jaune { color: var(--jaune); } .pt--turquoise { color: var(--turquoise); }
.accueil__sous { max-width: 32ch; margin-bottom: 1.5em; color: var(--lavande); font-weight: 500; }

@media (min-width: 900px) {
  .accueil {
    height: 100vh; height: 100svh; min-height: 620px;
    padding: 84px 14px 14px; gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* Rangées figées : le texte ne peut plus pousser la grille ni monter sur les photos du haut */
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "a a b c d d"
      "t t t c e f"
      "t t t g e f"
      "t t t g h i";
  }
  .tuile { border-radius: 18px; }
  .tuile--h, .tuile--i { display: block; }
  .tuile--h { grid-area: h; } .tuile--i { grid-area: i; }
  .accueil__texte { align-self: end; padding: 0 2.5vw 6vh 1.5vw; }
  .accueil__titre { font-size: clamp(2.4rem, min(4.6vw, 7.4vh), 6.5rem); margin-bottom: .35em; }
  .accueil__sous { margin-bottom: 1.2em; }
}

/* =========================================================
   3. BANDEAU DÉFILANT
   ========================================================= */
.bandeau {
  position: relative; z-index: 2; overflow: hidden;
  padding: .7em 0; color: var(--encre);
  font-family: var(--titre); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 3.2vw, 2.4rem); letter-spacing: -.01em; white-space: nowrap;
}
.bandeau--jaune { background: var(--jaune); }
.bandeau--rose { background: var(--rose); }
.bandeau__piste { display: flex; width: max-content; animation: defile 22s linear infinite; }
.bandeau__piste--inverse { animation-direction: reverse; }
.bandeau__piste span { padding-right: .6em; }
.bandeau i { display: inline-block; width: .55em; height: .55em; margin: 0 .5em; vertical-align: .05em; }
.c-rose { background: var(--rose); } .c-jaune { background: var(--jaune); }
.c-turquoise { background: var(--turquoise); } .c-bleu { background: var(--bleu); }
.c-encre { background: var(--encre); }
@keyframes defile { to { transform: translateX(-50%); } }

/* =========================================================
   4. MÉTIERS — blocs empilés (chaque bloc recouvre le précédent)
   ========================================================= */
.metier {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden; color: var(--encre);
}
.metier--rose { background: var(--rose); }
.metier--jaune { background: var(--jaune); }
.metier--turquoise { background: var(--turquoise); }
.metier__texte { padding: 84px var(--marge) 20px; max-width: 46rem; }
.metier__num {
  font-family: var(--titre); font-weight: 800; font-size: .9rem; margin-bottom: .4em;
}
.metier__num::before {
  content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .5em;
  background: var(--encre); vertical-align: -.02em;
}
.metier__titre { font-size: clamp(2.5rem, 11vw, 8.5rem); margin-bottom: .25em; letter-spacing: -.05em; }
.metier__texte p:not(.metier__num) { font-size: 1rem; font-weight: 500; max-width: 38ch; margin-bottom: .6em; }
.metier__media { margin: 0; min-height: 0; overflow: hidden; }
.metier__media img { width: 100%; height: 100%; object-fit: cover; }
/* Cadrage de secours (sans JS) : le visage est en haut de la photo.
   Avec JS, data-sujet centre précisément sur le visage. */
.metier--rose .metier__media img { object-position: 50% 18%; }
.metier__media--entier { padding: 0 var(--marge) var(--marge); display: flex; align-items: center; }
.metier__media--entier img { height: auto; max-height: 100%; object-fit: contain; box-shadow: 10px 10px 0 var(--encre); }

@media (min-width: 900px) {
  .metier { grid-template-rows: none; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .metier__texte { align-self: center; padding: 96px var(--marge); }
  .metier__texte p:not(.metier__num) { font-size: 1.15rem; }
  /* Jeu d'alignements : un bloc sur deux inverse photo et texte */
  .metier--jaune .metier__texte { order: 2; }
  .metier__media--entier { padding: 96px var(--marge); }
}

/* =========================================================
   5. PORTFOLIO — galerie horizontale
   ========================================================= */
.portfolio { position: relative; z-index: 2; background: var(--encre); padding: clamp(64px, 10vh, 120px) 0 clamp(48px, 8vh, 96px); }
.portfolio__tete {
  padding: 0 var(--marge); margin-bottom: clamp(24px, 4vh, 48px);
  display: flex; flex-direction: column; gap: 24px;
}
.titre-section { font-size: clamp(2.6rem, 10vw, 8rem); letter-spacing: -.05em; }
.decale { display: inline-block; margin-left: 10vw; }
.portfolio .titre-section .decale { color: var(--jaune); }

/* Filtres : même style que le menu du haut (pilule, petit pixel de couleur,
   filtre actif éclairé). Sur fond encre, la pilule est légèrement plus claire. */
.filtres {
  display: flex; gap: 2px; padding: 5px; width: fit-content; max-width: 100%;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(207,200,245,.16);
  border-radius: 999px;
  /* Téléphone : une seule ligne qui défile au doigt */
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  --c: var(--rose);
  position: relative; flex: none;
  padding: .55em 1em .55em 1.6em; min-height: 40px; border: 0; border-radius: 999px;
  background: transparent; color: var(--lavande);
  font-weight: 500; font-size: .9rem; line-height: 1.2; white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.filtre:nth-child(4n+2) { --c: var(--jaune); }
.filtre:nth-child(4n+3) { --c: var(--turquoise); }
.filtre:nth-child(4n+4) { --c: var(--bleu); }
.filtre::before {
  content: ''; position: absolute; left: .85em; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 2px; background: var(--c);
  transform: scale(.5); opacity: .5;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s ease;
}
.filtre:hover, .filtre[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.1); }
.filtre:hover::before, .filtre[aria-pressed="true"]::before { transform: rotate(45deg); opacity: 1; }
@media (min-width: 900px) {
  /* Ordinateur : si la place manque, la pilule passe sur deux lignes */
  .filtres { flex-wrap: wrap; overflow: visible; border-radius: 26px; }
}

.galerie {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 var(--marge);
  scrollbar-width: thin; scrollbar-color: var(--rose) transparent;
  -webkit-overflow-scrolling: touch;
}
.galerie__piste {
  display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 28px);
  width: max-content; padding: 8px var(--marge) 24px;
}
.galerie__item { margin: 0; scroll-snap-align: start; flex: none; }
.galerie__item[hidden] { display: none; }
/* Décalage vertical d'une photo sur deux : rythme moins sage */
.galerie__item:nth-child(even) { margin-top: clamp(24px, 6vh, 64px); }
.galerie__btn { display: block; padding: 0; border: 0; background: var(--lavande); overflow: hidden; }
.galerie__btn img {
  height: clamp(300px, 52vh, 640px); width: auto;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.galerie__btn:hover img { transform: scale(1.04); }
.galerie__item figcaption {
  margin-top: .6em; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lavande);
}
/* Flèches pour passer d'une photo à l'autre */
.galerie-zone { position: relative; }
.galerie__fleche {
  position: absolute; top: 50%; z-index: 3;
  width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--encre); color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(207,200,245,.3);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.galerie__fleche--prec { left: 10px; }
.galerie__fleche--suiv { right: 10px; }
@media (hover: hover) {
  .galerie__fleche:hover:not(:disabled) { background: var(--rose); color: var(--encre); box-shadow: none; }
}
.galerie__fleche:active:not(:disabled) { background: var(--rose); color: var(--encre); }
.galerie__fleche:disabled { opacity: .3; cursor: default; }
@media (min-width: 900px) {
  .galerie__fleche { width: 58px; height: 58px; margin-top: -29px; font-size: 1.4rem; }
  .galerie__fleche--prec { left: 18px; }
  .galerie__fleche--suiv { right: 18px; }
}

/* =========================================================
   7. À PROPOS
   ========================================================= */
.apropos {
  position: relative; z-index: 2; background: var(--jaune); color: var(--encre);
  padding: clamp(64px, 12vh, 140px) var(--marge);
  display: grid; gap: clamp(32px, 5vw, 80px); align-items: center;
}
.apropos .titre-section .decale { margin-left: 6vw; }
.apropos__texte { max-width: 44rem; }
.apropos__texte .titre-section { margin-bottom: .4em; }
.apropos__chapo { font-family: var(--titre); font-weight: 800; font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.2; }
.apropos__passions { list-style: none; padding: 0; margin: 1.6em 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.apropos__passions li { padding: .35em .8em; background: var(--encre); color: var(--jaune); font-weight: 700; }

/* Avatar « p » (provisoire, à remplacer par une photo) */
.avatar {
  font-size: clamp(110px, 26vw, 260px);
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--encre); display: flex; align-items: center; justify-content: center;
}
.avatar__p {
  position: relative; font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 1em;
  line-height: 1; color: #fff; margin-top: -.16em;
}
.avatar__p span { position: absolute; right: -.2em; top: .013em; width: .2em; height: .2em; background: var(--jaune); }

@media (min-width: 900px) {
  .apropos { grid-template-columns: auto 1fr; }
  .avatar { margin-top: -6vh; }
}

/* =========================================================
   8. CONTACT
   ========================================================= */
.contact { position: relative; z-index: 2; background: var(--rose); color: var(--encre); padding: clamp(64px, 12vh, 140px) var(--marge); }
.contact .titre-section .decale { margin-left: 4vw; }
.contact__sous { margin: 1.2em 0 2em; font-weight: 500; font-size: 1.1rem; }
.contact__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact__btn {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 104px; padding: 20px 64px 20px 24px;
  background: var(--encre); color: #fff; text-decoration: none;
}
.contact__nom { font-family: var(--titre); font-weight: 900; font-size: clamp(1.6rem, 5vw, 3rem); letter-spacing: -.04em; line-height: 1.05; }
.contact__detail { color: var(--lavande); font-weight: 500; margin-top: .2em; overflow-wrap: anywhere; }
.contact__carre {
  position: absolute; right: 24px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: var(--jaune); transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.contact__btn:hover .contact__carre, .contact__btn:focus-visible .contact__carre { transform: rotate(90deg) scale(1.3); }
.contact__liste li:nth-child(2) .contact__carre { background: var(--turquoise); }
.contact__liste li:nth-child(3) .contact__carre { background: var(--rose); }
.contact__liste li:nth-child(4) .contact__carre { background: var(--bleu); }
@media (min-width: 760px) {
  .contact__liste { grid-template-columns: 1fr 1fr; gap: 16px; }
  .contact__btn { min-height: 180px; padding: 28px 80px 28px 32px; }
  .contact__liste li:nth-child(even) { transform: translateY(32px); }
}

/* =========================================================
   9. PIED DE PAGE
   ========================================================= */
.pied {
  position: relative; z-index: 2; background: var(--encre); color: #fff;
  padding: clamp(64px, 10vh, 120px) var(--marge) 32px;
  display: flex; flex-direction: column; gap: 32px;
  overflow: hidden; /* les petits pixels du logo ne doivent pas élargir la page */
}
.pied__infos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--lavande); font-size: .9rem; }
.pied__infos p { margin: 0; }
.pied__infos a { color: #fff; }

/* Bouton WhatsApp flottant (coin inférieur droit, toujours visible) */
.wa-flottant {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 0 0 3px var(--encre), 0 8px 24px rgba(21,17,43,.35);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
/* petit carré jaune qui rappelle le point du logo */
.wa-flottant::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px;
  background: var(--jaune); box-shadow: 0 0 0 2px var(--encre);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1);
}
.wa-flottant:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }
@media (hover: hover) {
  .wa-flottant:hover { transform: scale(1.08) rotate(-6deg); }
  .wa-flottant:hover::after { transform: rotate(90deg); }
}
.wa-flottant:active { transform: scale(.94); }
@media (min-width: 900px) {
  .wa-flottant { right: 28px; bottom: 28px; width: 64px; height: 64px; }
  .wa-flottant svg { width: 34px; height: 34px; }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(21,17,43,.96);
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(21,17,43,.9); }
.lightbox__img { max-width: calc(100vw - 32px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; }
.lightbox__btn {
  position: absolute; width: 52px; height: 52px; border: 0;
  background: var(--jaune); color: var(--encre); font-size: 1.6rem; font-weight: 700; line-height: 1;
}
.lightbox__fermer { top: 16px; right: 16px; background: var(--rose); }
.lightbox__prec { bottom: 16px; left: 16px; }
.lightbox__suiv { bottom: 16px; right: 16px; }
@media (min-width: 760px) {
  .lightbox__img { max-width: calc(100vw - 200px); max-height: calc(100dvh - 64px); }
  .lightbox__prec, .lightbox__suiv { bottom: auto; top: 50%; margin-top: -26px; }
  .lightbox__prec { left: 24px; } .lightbox__suiv { right: 24px; }
}

/* =========================================================
   ANIMATIONS (étape 3) — actives seulement avec la classe .js-anim
   ========================================================= */

/* Lenis (défilement fluide) */
html.lenis, html.lenis body { height: auto; }
/* Lenis gère la fluidité : le défilement natif « smooth » fausserait les calculs de ScrollTrigger */
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Accueil : caché jusqu'à l'entrée en scène (GSAP le révèle) */
.js-anim .accueil__titre .ligne { overflow: hidden; }
.js-anim .tuile,
.js-anim .accueil__titre .mot,
.js-anim .accueil__sous,
.js-anim .accueil__texte .bouton { visibility: hidden; }

/* Titres découpés lettre par lettre */
.l-mot { display: inline-block; white-space: nowrap; }
.l-lettre { display: inline-block; will-change: transform; }

/* Masque qui s'ouvre sur les photos des métiers */
.metiers { background: var(--encre); }
.metier { transform-origin: 50% 0; }
.metier__media { position: relative; }
.rideau { position: absolute; inset: 0; transform-origin: 50% 100%; pointer-events: none; }
.metier--rose .rideau { background: var(--rose); }
.metier--jaune .rideau { background: var(--jaune); }
.metier--turquoise .rideau { background: var(--turquoise); }

/* Portfolio sur ordinateur : titre et filtres côte à côte, galerie qui défile
   seulement à l'horizontale (flèches ou glisser) — la page, elle, défile normalement */
@media (min-width: 900px) {
  .portfolio__tete { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .portfolio .titre-section { font-size: clamp(2.6rem, min(6vw, 9.5vh), 7rem); }
  .portfolio .filtres { justify-content: flex-end; max-width: 52rem; }
  .galerie__btn img { height: clamp(300px, 56vh, 640px); }
  .galerie__item:nth-child(even) { margin-top: 4vh; }
}

/* Fonds qui changent de couleur au scroll (à propos → contact) */
.fonds-animes .apropos,
.fonds-animes .contact { background: transparent; }

/* Petits pixels décoratifs */
.pixel { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 1; }
.pixel--petit { width: 10px; height: 10px; }
.pixel--jaune { background: var(--jaune); }
.pixel--rose { background: var(--rose); }
.pixel--turquoise { background: var(--turquoise); }
.pixel--bleu { background: var(--bleu); }
.contact .pixel--jaune { background: var(--jaune); box-shadow: 4px 4px 0 var(--encre); }


/* =========================================================
   ANIMATIONS RÉDUITES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pikzel__mot, .pikzel__point, .pikzel__px, .bandeau__piste { animation: none !important; }
  .avec-intro .intro { animation: intro-fondu .3s ease .6s forwards; }
  .avec-intro .intro .pikzel { animation: none; }
  .bandeau { white-space: normal; }
  .bandeau__piste { width: auto; padding: 0 var(--marge); }
  .bandeau__piste span + span { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@keyframes intro-fondu { to { opacity: 0; visibility: hidden; } }