/* ==========================================================================
   Julie Coone — Make-up artist
   Feuille de style unique, à lire de haut en bas :
     1. Police          4. En-tête / pied de page      7. Formulaire
     2. Variables       5. Accueil (galerie)           8. Visionneuse
     3. Base            6. Pages de contenu            9. Transition de page
                                                      10. Mouvement réduit
   Principe : tout ce qui est modifiable (couleurs, espaces, durées) est
   regroupé dans les variables de la section 2.
   ========================================================================== */


/* 1. POLICE ---------------------------------------------------------------
   Outfit (licence libre OFL), hébergée sur le site : pas d'appel à Google,
   donc pas de transfert de données vers un tiers (RGPD) et un chargement
   plus rapide. "swap" affiche le texte tout de suite avec une police de
   secours pendant le chargement. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* 2. VARIABLES (design tokens) ---------------------------------------------
   Trois niveaux, du plus brut au plus précis :
     1. Primitives  : valeurs brutes (un gris, une taille…). On y touche rarement.
     2. Sémantiques : le RÔLE d'une valeur (texte, fond, erreur…). C'est ici
                      qu'on change le look du site.
     3. Composants  : réglages propres à un élément (bouton, champ, galerie…).
   Règle : le reste du fichier n'utilise jamais de valeur brute (#hex, taille
   en dur), seulement ces variables. */
:root {
  /* 1. PRIMITIVES */
  --white: #ffffff;
  --gray-950: #0a0a0a;
  --gray-700: #595959;       /* contraste 7:1 sur blanc */
  --gray-500: #767676;       /* bordures de champs : contraste 4,5:1 */
  --gray-200: #e4e4e4;
  --gray-100: #f4f4f4;
  --red-700: #b3261e;
  --green-700: #1b6b3a;

  --font-outfit: "Outfit", "Avenir Next", "Century Gothic", "Segoe UI",
                 system-ui, sans-serif;

  /* Échelle de tailles de texte */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-display: clamp(2rem, 5vw, 3.5rem);
  --text-statement: clamp(1.75rem, 4.5vw, 3.25rem);

  /* Échelle d'espacement */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Durées et courbes d'animation */
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 1100ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);       /* démarrage vif, arrivée douce */
  --ease-wipe: cubic-bezier(0.77, 0, 0.18, 1);  /* dévoilement des photos */

  /* 2. SÉMANTIQUES */
  --color-bg: var(--white);
  --color-text: var(--gray-950);
  --color-muted: var(--gray-700);
  --color-line: var(--gray-200);
  --color-surface: var(--gray-100);    /* fond des photos pendant le chargement */
  --color-border-field: var(--gray-500);
  --color-error: var(--red-700);
  --color-success: var(--green-700);
  --font-sans: var(--font-outfit);
  --gutter: clamp(1.5rem, 4vw, 3rem);    /* marge gauche/droite de la page */

  /* 3. COMPOSANTS */
  --nav-link-height: 2.75rem;          /* zone de clic confortable au doigt */
  --button-bg: var(--color-text);
  --button-fg: var(--color-bg);
  --button-height: 3rem;
  --field-border: var(--color-border-field);
  --field-height: 3rem;
  --gallery-gap: 0;                    /* photos collées, sans espace (mettre ex. 1rem pour en remettre) */
}


/* 3. BASE ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* iPhone : en paysage, l'encoche et la barre du bas ne cachent jamais le contenu
   (marges de sécurité, actives grâce à viewport-fit=cover dans le HTML) */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  /* L'en-tête reste collé en haut : on garde une marge pour qu'un champ de
     formulaire sélectionné ne passe jamais caché dessous */
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* en-tête / contenu / pied de page */
  /* Une seule colonne qui ne dépasse jamais la largeur de l'écran. Sans cette
     ligne, la bande de photos (très large) étire toute la page, et le menu
     disparaît hors de l'écran. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 0.25em;
}

h1, h2, h3, p, ul, dl, dd, figure {
  margin-top: 0;
}

/* Le focus clavier doit toujours rester visible */
:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Lien "Aller au contenu" : visible seulement quand on navigue au clavier */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-text);
  color: var(--color-bg);
}
.skip-link:focus {
  top: 0.5rem;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 4. EN-TÊTE / PIED DE PAGE ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding: 0.75rem var(--gutter);
  background: var(--color-bg);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: var(--text-md);
}
.brand__role {
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--color-muted);
}

/* Menu : 4 liens courts, ils passent à la ligne sur petit écran
   (pas de menu "burger" = pas de JavaScript nécessaire) */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-link-height);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Soulignement qui se dessine au survol et sur la page active */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* iPhone en portrait : menu resserré pour tenir sur une seule ligne */
@media (max-width: 30em) {
  .site-nav ul { gap: 0 0.8rem; }
  .site-nav a { font-size: 0.7rem; letter-spacing: 0.04em; }
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 1.5rem;
  padding: 0.5rem var(--gutter);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.site-footer p {
  margin: 0;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-link-height);
}


/* 5. ACCUEIL : LA GALERIE ---------------------------------------------------
   Les photos sont en colonnes collées (2 sur téléphone, 3 sur tablette et
   ordinateur), toutes de la même hauteur.
   Animation principale : chaque photo se dévoile de bas en haut, comme un
   rideau qui se lève.
     - à l'ouverture : les photos visibles se dévoilent en cascade
     - au défilement : les autres se dévoilent en arrivant à l'écran
       (déclenchement dans js/main.js)
   Un clic sur une photo l'ouvre en grand (visionneuse, section 9). */
.home {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--space-2) var(--gutter) var(--space-6);
}

.gallery {
  columns: 2;                          /* téléphone et tablette : 2 colonnes */
  column-gap: var(--gallery-gap);
  margin: 0;                           /* la galerie reste dans les marges de la page */
  padding: 0;
  list-style: none;
}
@media (min-width: 64em) {
  .gallery { columns: 3; }
}

.gallery__item {
  margin: 0 0 var(--gallery-gap);
  break-inside: avoid;                 /* une photo n'est jamais coupée entre 2 colonnes */
}

/* Délai de dévoilement en cascade (les 12 premières photos) */
.gallery__item:nth-child(1)  { --i: 0; }
.gallery__item:nth-child(2)  { --i: 1; }
.gallery__item:nth-child(3)  { --i: 2; }
.gallery__item:nth-child(4)  { --i: 3; }
.gallery__item:nth-child(5)  { --i: 4; }
.gallery__item:nth-child(6)  { --i: 5; }
.gallery__item:nth-child(7)  { --i: 6; }
.gallery__item:nth-child(8)  { --i: 7; }
.gallery__item:nth-child(9)  { --i: 8; }
.gallery__item:nth-child(10) { --i: 9; }
.gallery__item:nth-child(11) { --i: 10; }
.gallery__item:nth-child(12) { --i: 11; }

.gallery__item figure {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
  animation: unveil var(--dur-slow) var(--ease-wipe) both;
  animation-delay: calc(var(--i, 0) * 110ms + var(--c, 0) * 160ms);
}
.gallery__item video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-surface);
}
.gallery__item img {
  display: block;
  width: 100%;
  height: auto;                        /* la hauteur suit les attributs width/height du HTML */
  transition: transform 700ms var(--ease);
  animation: unveil-zoom 1.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 110ms + var(--c, 0) * 160ms);
}

/* Mise en page en colonnes de même hauteur, sans aucun vide :
     - ordinateur et tablette : 3 colonnes (celles du HTML, regroupées par marque)
     - téléphone (moins de 640 px de large) : 2 colonnes, construites par js/main.js
       (section 0), qui calcule aussi leurs largeurs pour qu'elles
       finissent exactement à la même hauteur
   Les colonnes ont des largeurs légèrement différentes ; si un bas dépasse
   de quelques pixels, les photos de la colonne la plus courte s'étirent très
   légèrement (recadrage minime) pour que le bas de la galerie soit droit. */
.gallery {
  columns: auto;
  display: grid;
  grid-template-columns: 1.27fr 1.17fr 1.0fr;
  align-items: stretch;
}
.gallery__col { display: flex; flex-direction: column; }
.gallery__col > ul {
  display: flex; flex-direction: column; flex: 1;
  margin: 0; padding: 0; list-style: none;
}
.gallery__col:nth-child(2) { --c: 1; }
.gallery__col:nth-child(3) { --c: 2; }
.gallery__item { display: flex; flex: 1 1 auto; }
.gallery__item figure { flex: 1; min-height: 0; }
.gallery__link { height: 100%; }
.gallery__item img,
.gallery__item video { height: 100%; object-fit: cover; }

/* Téléphone : les photos se chevauchent d'1 pixel, sinon l'écran laisse
   parfois apparaître un filet blanc entre deux photos. */
@media (max-width: 39.99em) {
  /* Parallaxe (js/main.js, section 0) : les colonnes glissent, la galerie
     cache ce qui dépasse */
  .gallery.is-parallax { overflow: hidden; }
  .gallery.is-parallax .gallery__col { will-change: transform; }
  .gallery__col { margin-right: -1px; }
  .gallery__col:last-child { margin-right: 0; }
  .gallery__item { margin-bottom: -1px; }
  .gallery__item:last-child { margin-bottom: 0; }
}

/* Ordinateur : la galerie reste dans un « couloir » centré (largeur max
   réglable ici) avec de l'air blanc de chaque côté. */
@media (min-width: 64em) {
  .home { max-width: 50rem; padding-inline: var(--gutter); }
}

/* Photos situées sous l'écran à l'ouverture : cachées par le JavaScript,
   puis révélées (is-revealed) quand on arrive à leur hauteur. */
.gallery__item.is-hidden figure {
  animation: none;
  clip-path: inset(100% 0 0 0);
}
.gallery__item.is-hidden img {
  animation: none;
}
.gallery__item.is-revealed figure,
.gallery__item.is-revealed img {
  animation-delay: 0ms;
}

@keyframes unveil {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0); }
}
@keyframes unveil-zoom {
  from { scale: 1.12; }
  to   { scale: 1; }
}

/* Lien autour de chaque photo : sans JavaScript, il ouvre la photo seule */
.gallery__link {
  display: block;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
/* Les photos ne se sélectionnent pas (pas de bleu au clic, pas de glisser-déposer) */
.gallery,
.gallery img {
  -webkit-user-select: none;
  user-select: none;
}
.gallery img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;         /* iPhone : pas de menu « enregistrer l'image » à l'appui long */
}
.gallery__link:focus:not(:focus-visible) {
  outline: none;
}
@media (hover: hover) {
  .gallery__link:hover img {
    transform: scale(1.04);
  }
}

/* Bandeau des marques : texte très grand qui défile lentement, en boucle.
   Mouvement réduit : le défilement s'arrête et la liste passe à la ligne. */
.brands {
  margin-top: var(--space-5);
  overflow: hidden;
}
.brands__track {
  display: flex;
  width: max-content;
  animation: brands-scroll 38s linear infinite;
}
.brands__list {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brands__list li {
  padding-right: clamp(2rem, 5vw, 5rem);
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
@keyframes brands-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
  .brands:hover .brands__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .brands__track { width: auto; flex-wrap: wrap; padding-inline: var(--gutter); }
  .brands__list[aria-hidden="true"] { display: none; }
  .brands__list { flex-wrap: wrap; }
}

/* Fin de page : invitation à écrire */
.closing {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}
.closing__text {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.035em;
}
.closing__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--nav-link-height);
  padding-bottom: 0.1em;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur-base) var(--ease);
}
.closing__link:hover {
  background-size: 100% 3px;
}



/* 6. PAGES DE CONTENU (à propos, contact, mentions légales) ---------------- */
.page {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-6);
}

.page__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.prose {
  max-width: 38rem;
}
/* Premier paragraphe d'une page : grand, comme une phrase d'accroche */
.about .prose p:first-child {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.prose h2 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 600;
}
.prose p,
.prose ul {
  margin-bottom: var(--space-2);
}

/* À propos : photo + texte côte à côte sur grand écran */
.about {
  display: grid;
  gap: var(--space-4);
}
.about__photo {
  margin: 0;
  position: sticky;
  top: 5rem;
  background: var(--color-surface);
}
.about__photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 48em) {
  .about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-5);
    align-items: start;
  }
}

/* Petites informations : zone d'intervention, prestations… */
.facts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.facts div {
  padding-top: 0;
}
.facts dt {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
}
.facts dd {
  margin: 0.25rem 0 0;
}

/* Bouton (lien ou <button>) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 2rem;
  border: 1px solid var(--button-bg);
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.button:hover {
  background: var(--button-fg);
  color: var(--button-bg);
}
.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Contact : coordonnées à gauche, formulaire à droite */
.contact {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .contact {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}
.contact__details p {
  margin-bottom: var(--space-2);
}
.contact__details a[href^="mailto"] {
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.contact__details .label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
}


/* 7. FORMULAIRE ------------------------------------------------------------- */
.field {
  display: grid;
  gap: 0.375rem;
  margin-bottom: var(--space-3);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 500;
}
.field .optional {
  font-weight: 400;
  color: var(--color-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--field-height);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--field-border);
  border-radius: 0;
  background: var(--color-bg);
  color: inherit;
  font: inherit;                       /* 16 px : évite le zoom automatique sur iPhone */
  transition: border-color var(--dur-fast);
}
.field textarea {
  min-height: 9rem;
  resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-text);
}
.field [aria-invalid="true"] {
  border-color: var(--color-error);
}
.field__error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-error);
}

.form-note {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.form-status {
  min-height: 1.5rem;
  margin: var(--space-2) 0 0;
  font-weight: 500;
}
.form-status[data-state="success"] { color: var(--color-success); }
.form-status[data-state="error"]   { color: var(--color-error); }

/* Piège à robots : champ invisible, un humain ne le remplit jamais */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 8. VISIONNEUSE (clic sur une photo) -------------------------------------
   Élément <dialog> natif : le navigateur gère le focus clavier et la touche
   Échap. Le contenu est créé par js/main.js. */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
}
.lightbox[open] {
  display: grid;
  place-items: center;
  animation: fade-in var(--dur-base) var(--ease);
}
.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  max-width: 100%;
  margin: 0;
  padding: 4.5rem var(--gutter) 3.5rem;
}
.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
}
.lightbox__img.is-in {
  animation: fade-in var(--dur-base) var(--ease);
}
.lightbox__caption {
  min-height: 1.5rem;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}
.lightbox__count {
  position: absolute;
  right: 0;
  bottom: var(--space-2);
  left: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.lightbox__btn:hover {
  background: var(--color-surface);
}
.lightbox__close { top: var(--space-1); right: var(--space-1); }
.lightbox__prev  { left: var(--space-1);  top: 50%; translate: 0 -50%; }
.lightbox__next  { right: var(--space-1); top: 50%; translate: 0 -50%; }

/* Bloque le défilement de la page derrière la visionneuse */
html.is-locked {
  overflow: hidden;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* 9. TRANSITION ENTRE LES PAGES ----------------------------------------------
   Fondu doux quand on passe d'une page à l'autre (navigateurs récents ;
   les autres changent de page normalement). L'en-tête reste en place. */
@view-transition {
  navigation: auto;
}
.site-header {
  view-transition-name: site-header;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
}


/* Pages de contenu : le titre, puis chaque bloc, montent en douceur */
@keyframes rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}
.page > *,
.about > *,
.contact > * {
  animation: rise 900ms var(--ease-wipe) both;
}
.page > :nth-child(2),  .about > :nth-child(1), .contact > :nth-child(1) { animation-delay: 120ms; }
.about > :nth-child(2), .contact > :nth-child(2) { animation-delay: 240ms; }

/* 10. MOUVEMENT RÉDUIT ------------------------------------------------------
   Si la personne a demandé moins d'animations dans son système, on
   supprime toutes les animations et transitions du site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .gallery__item.is-hidden figure {
    clip-path: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}