/* =========================================================
   Portfolio — Eros Maraia
   Polices auto-hébergées (dossier fonts/), aucune dépendance CSS externe.
   Sommaire :
     1. Variables et base          6. Réalisations (grille, cartes)
     2. Typographie commune        7. Web / Vidéo, bouton, chevrons
     3. (réservé)                  8. À propos
     4. Navigation fixe            9. Coordonnées, pied de page
     5. Hero (portrait)           10. Pages « Tous les projets », fiche projet, 404
                                  11. Responsive, mouvement réduit
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. Variables et base ---------- */
:root {
  --bg: #f6f6f1;
  --ink: #111111;
  --grey: #e8e8e4;
  --cyan: #38dde8;
  --cyan-deep: #2ccbd5;
  --cyan-soft: #a9ecf2;
  --muted: #55554f;
  --body: #33332f;
  --line: #d6d6d0;
  --line-strong: #b9b9b1;
  --bg-rgb: 246, 246, 241;                /* même couleur que --bg, pour les transparences */
  --on-cyan: #111111;                     /* texte posé sur le turquoise (identique en clair et en sombre) */
  --hatch: rgba(0, 0, 0, 0.025);
  --shadow-ink: rgba(20, 20, 20, 0.06);
  --chrome-bg: #ececec;
  --chrome-dot: #b9b9b9;
  --chrome-line: rgba(17, 17, 17, 0.08);

  --pad: clamp(18px, 3.2vw, 44px);        /* marges extérieures */
  --header-h: 60px;                       /* barre compacte (après défilement) */
  --header-h-top: 84px;                   /* barre en haut de page */
  --space-section: clamp(84px, 11.5vw, 164px);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ----- Système typographique commun ----- */
  --fs-label: clamp(0.95rem, 1.2vw, 1.1rem);         /* petits libellés */
  --fs-h2: clamp(2.3rem, 5.4vw, 4.6875rem);               /* grands titres de section */
  --fs-body: clamp(1rem, 1.15vw, 1.0625rem);         /* paragraphes et descriptions */
  --fs-small: 0.95rem;                               /* descriptions secondaires */
  --fs-project-title: clamp(1.45rem, 2.1vw, 2.1rem); /* titres de projets (survol) et « Web / Vidéo » */
  --lh-body: 1.6;
}

/* ---------- Thème sombre : gris foncé, turquoise conservé ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191919;
  --ink: #ffffff;
  --grey: #262626;
  --cyan-soft: #2b8a93;
  --muted: #d2d2d2;
  --body: #f2f2f2;
  --line: #333333;
  --line-strong: #4b4b4b;
  --bg-rgb: 25, 25, 25;
  --hatch: rgba(255, 255, 255, 0.03);
  --shadow-ink: rgba(0, 0, 0, 0.45);
  --chrome-bg: #2b2b2b;
  --chrome-dot: #555555;
  --chrome-line: rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] { color-scheme: light; }

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

html {
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
}
/* Défilement natif fluide seulement si Lenis n’est pas actif et si l’utilisateur n’a pas demandé moins de mouvement */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Lenis (défilement fluide) : styles recommandés par la bibliothèque */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Lien d’évitement (visible seulement au clavier) */
.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- 2. Typographie commune ---------- */

/* Petit détail typographique : une lettre penchée dans les grands titres.
   Elle hérite de la graisse du titre (même poids que les autres lettres). */
.slant {
  font-style: italic;
  font-weight: inherit;
  margin-inline: 0.03em 0.02em;   /* évite que la lettre penchée touche ses voisines */
}

/* Petits libellés : même taille, couleur, graisse et espacement partout */
.tag,
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--muted);
}
.dot,
.label::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--blk, var(--cyan));   /* --blk : couleur du projet sur les fiches (voir script.js), turquoise partout ailleurs */
  flex: none;
  display: inline-block;
}
.label { margin-bottom: 16px; }

/* Grands titres : même taille et même traitement dans toutes les sections */
h2 {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: var(--fs-h2);
  line-height: 1.02;
}

/* Paragraphes et descriptions : mêmes règles partout */
.hero__intro,
.about__text p,
.pillar p,
.page-intro,
.case-about__text p,
.gal__text p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--body);
}

/* ---------- 4. Navigation fixe ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
.site-header__inner {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  height: var(--header-h-top);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height .4s var(--ease);
}
/* trait sous la barre, aligné sur les marges du contenu */
.site-header__inner::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 1px;
  background: var(--line);
}
/* fond flou dès les premiers pixels de défilement (classe posée par script.js) */
.site-header.has-bg {
  background: rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(10px);   /* flou léger : moins coûteux à redessiner pendant le défilement */
  backdrop-filter: blur(10px);
}
/* barre compacte : seulement une fois la zone « Portfolio — Médiamaticien » dépassée */
.site-header.is-compact .site-header__inner { height: var(--header-h); }

.logo {
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: font-size .4s var(--ease);
}
.site-header.is-compact .logo { font-size: 1.6rem; }

.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.nav a {
  position: relative;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 0;
  transition: font-size .4s var(--ease);
}
.site-header.is-compact .nav a { font-size: 0.98rem; }

/* Soulignement : un seul trait fin turquoise.
   Survol = trait de 1 px ; lien actif = trait de 2 px. Un seul lien est actif à la fois. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
@media (hover: hover) {
  .nav a:hover::after { transform: scaleX(1); }
}
.nav a[aria-current]::after { height: 2px; transform: scaleX(1); }

/* ---------- 5. Hero — plein écran ---------- */
.hero {
  position: relative;
  min-height: 100vh;               /* repli */
  min-height: 100svh;              /* tient compte des barres des navigateurs mobiles */
  padding-top: var(--header-h);    /* hauteur compacte : la barre agrandie se superpose sans décaler le contenu */
  display: flex;
  flex-direction: column;
  overflow-x: clip;                /* le bloc turquoise peut déborder sur mobile sans créer de défilement horizontal */
}

.hero__text { padding-top: clamp(18px, 4svh, 40px); padding-bottom: 12px; position: relative; z-index: 2; }

.tag { margin-bottom: clamp(8px, 1.6svh, 18px); }

.name {
  font-weight: 800;
  font-size: clamp(2.9rem, 14.4vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin-left: -0.03em;
}
.name__line { display: inline; }

/* Phrases qui défilent : la hauteur reste celle de la plus longue (pas de saut de page) */
.rotator {
  display: grid;
  margin-top: clamp(12px, 2svh, 22px);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .rotator { max-width: 44ch; }
}
.rotator__item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.rotator__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.hero__rule {
  height: 2px;
  width: 100%;
  background: var(--cyan-soft);
  margin: clamp(14px, 2.4svh, 26px) 0 clamp(12px, 2svh, 20px);
}

.hero__domains {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.hero__intro {
  margin-top: clamp(8px, 1.4svh, 14px);
  line-height: 1.55;
  max-width: 60ch;
}

/* --- Portrait ---
   .hero__visual est un « conteneur » : le portrait se cale sur l’espace réellement disponible.
   Les unités cqw / cqh des variables ci-dessous sont donc calculées sur .hero__visual.
   --ar = largeur / hauteur de l’image détourée ; --fx = position horizontale du centre de la tête dans l’image. */
.hero__visual {
  position: relative;
  flex: 1 1 0;
  min-height: 210px;
  container-type: size;
}
.stage {
  position: absolute;
  inset: 0;
  --ar: 0.9925;
  --fx: 0.584;
  /* mobile / tablette : portrait centré, aussi large que l’écran si la hauteur le permet */
  --hi: min(100cqh, calc((100cqw + 2 * var(--pad)) / var(--ar)), 760px);
  --pw: calc(var(--hi) * var(--ar));
}
.portrait {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--pw);
  height: var(--hi);
}
/* bloc turquoise derrière : bande pleine largeur sur mobile / tablette */
.portrait__panel {
  position: absolute;
  left: -100vw; right: -100vw;
  bottom: 0;
  height: 76%;
  background: var(--cyan);
  overflow: hidden;
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

/* --- Indicateur de défilement : deux petits traits (chevron), animation discrète ---
   Il est centré dans la page (au milieu de l’espace entre texte et photo) et dans une bande de 64 px réservée en bas de la première vue. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 64px;
  display: grid;
  place-items: center;
  color: var(--ink);
  z-index: 3;
}
.scroll-cue svg {
  width: 30px; height: 30px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: cue 2.8s ease-in-out infinite;
}
.scroll-cue:hover svg { animation-duration: 1.6s; }
@keyframes cue {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50%      { transform: translateY(5px);  opacity: 1; }
}

/* mobile / tablette : le chevron se trouve sur la chemise sombre, on le passe en clair */
@media (max-width: 1023px) {
  .scroll-cue { color: #f6f6f1; }
  /* le hero déborde des marges de la page : la bande turquoise va ainsi jusqu’au bord de l’écran
     (le débordement est coupé au bord de la fenêtre, pas de défilement horizontal) */
  .hero { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
}

/* --- Hero en deux colonnes égales (ordinateur / tablette paysage) : texte à gauche, photo à droite, même largeur ---
   Les marges extérieures sont identiques ; le chevron se place au centre de l’espace entre les deux colonnes. */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    column-gap: clamp(64px, 8vw, 128px);
  }
  .hero__text {
    align-self: center;
    padding-top: 0;
    padding-bottom: 64px;                       /* bande réservée au chevron */
  }
  .name {
    font-size: clamp(3.4rem, min(8.4vw, 15svh), 8.5rem);
    line-height: 0.93;
    margin-top: -0.04em;
  }
  .name__line { display: block; }
  .hero__visual { min-height: 0; }
  .hero { --colw: calc((min(100vw, 1500px) - 2 * var(--pad) - clamp(64px, 8vw, 128px)) / 2); }

  /* Largeur = celle de la colonne. Hauteur = la place disponible moins une marge (la photo ne domine pas la page),
     plafonnée pour les très grands écrans. La largeur reste ≤ 92 % de celle de l’image : épaules recadrées proprement. */
  .stage {
    --pwmax: 100cqw;
    --hi: min(calc(100cqh - 70px), calc(1.25 * var(--pwmax) / var(--ar)), 880px);
    --pw: min(var(--pwmax), calc(0.92 * var(--hi) * var(--ar)));
  }
  .portrait {
    left: auto;
    right: 0;
    transform: none;
    clip-path: inset(-40% 0 0 0);   /* coupe les épaules sur les côtés, mais laisse la tête dépasser en haut */
  }
  /* le bloc turquoise dépasse de quelques pixels du cadre (le clip-path le recoupe) : aucun filet turquoise ne reste sur les bords, quelle que soit la taille d’écran */
  .portrait__panel { left: -4px; right: -4px; bottom: -4px; height: calc(84% + 4px); }
  .portrait img {
    inset: auto;
    top: 0;
    height: calc(100% + 4px);                   /* dépasse un peu sous le cadre, recoupé par le clip-path */
    width: calc(var(--hi) * var(--ar));
    max-width: none;
    object-fit: fill;
    /* la tête est centrée dans le cadre, mais l’image doit toujours recouvrir le bloc turquoise jusqu’au bord droit (sinon une bande turquoise reste visible à côté de la manche) */
    left: min(-3px, max(calc(100% - 0.97 * var(--hi) * var(--ar)), calc(50% - var(--hi) * var(--ar) * var(--fx))));
  }
}

/* écrans bas : on libère de la place */
@media (max-height: 700px) and (max-width: 1023px) {
  .hero__intro { display: none; }
}

/* ---------- 6. Sections et réalisations ---------- */
.section {
  padding-top: var(--space-section);
  scroll-margin-top: calc(var(--header-h) + 72px - var(--space-section));
}
.section h2 { margin-bottom: clamp(34px, 4.6vw, 64px); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(46px, 4.8vw, 76px) clamp(26px, 3.4vw, 54px);
}

.card__link { display: block; }
.card__link--static { cursor: default; }

.thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;            /* même hauteur d’image pour tous les projets */
  container-type: inline-size;     /* le titre du survol se règle sur la largeur de la carte (cqw) */
  overflow: hidden;
  text-align: center;
  background: var(--grey);         /* visible pendant le chargement de l’image */
}

/* L’image remplit le bloc */
.thumb img {
  position: absolute;
  inset: -3px;                     /* l’image déborde de 3 px de chaque côté (le cadre la rogne) : plus de petit liseré gris sur les bords des captures */
  width: calc(100% + 6px);
  max-width: none;                 /* sans cela, la règle générale « img { max-width: 100% } » rétrécit l’image et la décale vers la gauche */
  height: calc(100% + 6px);
  object-fit: cover;
  transform: translateZ(0);        /* l’image reste sur sa propre couche : plus de saccade à la fin du zoom */
  will-change: transform;
  backface-visibility: hidden;
  transition: transform .7s var(--ease);
}

/* Calque au survol : assombrit l’image et fait ressortir le titre */
.thumb__hover {
  position: absolute;
  inset: -2px;                     /* déborde de 2 px : le filtre couvre toute la carte, même quand la hauteur tombe entre deux pixels */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  color: #fff;
  background: rgba(var(--hover, 20, 24, 28), .9);   /* filtre de la couleur du projet, assez foncée pour le texte blanc (--hover posé par script.js) */
  opacity: 0;
  will-change: opacity;
  transition: opacity .45s ease;
  pointer-events: none;
}
.thumb__title {
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-project-title);
  font-size: max(18px, 8cqw);      /* ≈ 35 px sur ordinateur (carte de 435 px) ; la même place dans la carte, à toutes les largeurs */
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 11em;                 /* les titres longs (ex. Centaur Communication) passent à la ligne, équilibrés */
  text-wrap: balance;
  transform: translate3d(0, 8px, 0);
  will-change: transform;          /* le texte garde le même rendu pendant et après l’animation */
  backface-visibility: hidden;
  transition: transform .55s var(--ease);
}
.thumb--empty { background: var(--grey); }
.card__link:focus-visible .thumb__hover { opacity: 1; }
.card__link:focus-visible .thumb__title { transform: none; }

/* Le survol n’existe qu’avec une souris : sur mobile, titre et description restent sous l’image */
@media (hover: hover) {
  .card__link:hover .thumb__hover { opacity: 1; }
  .card__link:hover .thumb__title { transform: translate3d(0, 0, 0); }   /* le titre glisse en place, sans zoom (le zoom du texte faisait « sauter » les lignes) */
  .card__link:hover .thumb img { transform: scale3d(1.03, 1.03, 1); }   /* même zoom discret sur toutes les cartes */
}

.caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 14px;
}
.dash { font-size: 0.95rem; color: var(--muted); line-height: 1.5; }
.caption__text { flex: 1; min-width: 0; }
.caption h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.caption p {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
/* titres et descriptions longs : 2 lignes maximum pour garder des cartes régulières */
.caption h3,
.caption p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Projets ajoutés par « Plus de projets » : apparition discrète */
.card.is-new { animation: card-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Pagination numérotée sous une catégorie : carrés à bordure fine, la page courante est pleine */
.pager { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 3.6vw, 48px); }
.pager__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);                 /* sinon iOS colore le texte des boutons en bleu */
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .25s ease, color .25s ease;
}
.pager__btn:hover, .pager__btn[aria-current="page"] { background: var(--ink); color: var(--bg); }

/* ---------- 7. Chevrons, Web / Vidéo, bouton ----------
   Tous les chevrons : même tracé simple, sans queue. Seules la taille et l’épaisseur changent selon le contexte. */
.chev {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.caption__arrow {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  stroke-width: 2;
  color: var(--ink);
  opacity: 0.35;
  transition: transform .25s ease, opacity .25s ease;
}
.card__link:hover .caption__arrow { transform: translateX(4px); opacity: 1; }

.entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  margin-top: clamp(44px, 4.8vw, 70px);
  padding: clamp(22px, 2.7vw, 37px) clamp(20px, 3vw, 40px);
  background: var(--cyan);
  overflow: hidden;
  transition: background-color .3s ease;
}
.entry > * { position: relative; z-index: 1; }
.entry { color: var(--on-cyan); }
.entry:hover { background: var(--cyan-deep); }
.entry__title {
  font-weight: 800;
  font-size: var(--fs-project-title);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.entry__desc {
  flex: 1;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  max-width: 40ch;
  text-wrap: balance;               /* répartit le texte sur deux lignes équilibrées quand la place le permet */
}
.entry__go {
  margin-left: auto;
  flex: none;
  width: 60px; height: 60px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--on-cyan);
  border-radius: 50%;
  transition: background-color .25s ease, color .25s ease;
}
.entry__go svg {
  width: 34px; height: 34px;
  stroke-width: 2.2;
  transition: transform .25s ease;
}
.entry:hover .entry__go { background: var(--on-cyan); color: var(--cyan); }
.entry:hover .entry__go svg { transform: translateX(3px); }
.entry:focus-visible { outline-offset: 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(36px, 3.8vw, 52px);
  padding: 15px 22px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);                 /* sinon iOS colore le texte des boutons en bleu */
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background-color .25s ease, color .25s ease;
}
.btn svg { width: 20px; height: 20px; stroke-width: 2.2; transition: transform .25s ease; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:hover svg { transform: translateX(5px); }

/* ---------- 8. À propos ---------- */
.about__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.about__text p { max-width: 50ch; }
.about__text p + p { margin-top: 1.1em; }

/* Présentation « Médiamaticien… » : phrase d’accroche un peu plus grande, avec une fine ligne verticale turquoise */
.about__text .about__lead {
  max-width: 30ch;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  padding-left: clamp(16px, 1.8vw, 24px);
  border-left: 3px solid var(--cyan);
  font-size: 1.35rem;              /* 21,6 px, comme les phrases qui défilent dans le hero */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.about__text .about__lead + p { margin-top: 0; }

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px);
}
.pillar {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pillar__icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  margin-bottom: 18px;
}
.pillar__icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--on-cyan); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.pillar h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.pillar p { margin-top: 6px; max-width: 36ch; }

/* ---------- 9. Coordonnées et pied de page ---------- */
.contact {
  background: var(--cyan);
  margin-top: var(--space-section);
  padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 40px) clamp(26px, 3.4vw, 44px);
}
.contact { color: var(--on-cyan); position: relative; overflow: hidden; }
.contact .label { color: var(--on-cyan); margin-bottom: 10px; }
.contact .label::before { background: var(--on-cyan); }   /* le carré turquoise ne se verrait pas sur ce fond */
.contact h2 { margin-bottom: clamp(18px, 2.4vw, 30px); }

.contact__list {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  max-width: 40rem;
}
.contact__item { display: grid; gap: 2px; }
.contact__k {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact__v {
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
a.contact__v { width: fit-content; background: linear-gradient(var(--on-cyan), var(--on-cyan)) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
a.contact__v:hover { background-size: 100% 2px; }

.site-footer {
  padding-top: clamp(20px, 2.6vw, 30px);
  padding-bottom: clamp(22px, 3vw, 34px);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- 10. Pages secondaires ---------- */

/* En-tête de page (Tous les projets, fiche projet) */
.page-head { padding-top: calc(var(--header-h-top) + clamp(28px, 5vw, 72px)); }
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(22px, 3vw, 40px);
  padding: 8px 0;
  font-weight: 600;
  font-size: 1rem;
}
.back svg { width: 22px; height: 22px; stroke-width: 2; transition: transform .25s ease; }
.back:hover svg { transform: translateX(-4px); }
/* Titre principal des pages secondaires : même taille et même traitement que « Mes réalisations » */
.page-title {
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
/* Titres de catégories : plus petits que le titre principal */
.sub-title {
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.page-intro { max-width: 65ch; margin-top: clamp(14px, 1.8vw, 22px); }

.page-section { padding-top: clamp(66px, 9.5vw, 132px); scroll-margin-top: calc(var(--header-h) + 72px - clamp(66px, 9.5vw, 132px)); }
.page-section h2 { margin-bottom: clamp(30px, 4vw, 52px); }
.page-section .sub-title { margin-bottom: clamp(26px, 3.2vw, 44px); }
.page-section--first { padding-top: clamp(40px, 6vw, 80px); }

/* --- Fiche projet --- */
.case-head .back { margin-bottom: clamp(18px, 2.4vw, 32px); }
.case-head__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 7vw, 112px);
  align-items: center;
}
.case-head__text .label { margin-bottom: 14px; }
.case-title {
  font-weight: 800;
  font-size: clamp(2.8rem, 7.2vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-left: -0.03em;
}
.case-headline {
  max-width: 47ch;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.case-lead { max-width: 67ch; margin-top: 10px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--body); }

/* Image du projet plus petite, avec le rectangle turquoise décalé derrière */
.case-hero {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
  padding: 0 clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vw, 24px) 0;
}
.case-hero::before {
  content: "";
  position: absolute;
  top: clamp(12px, 1.8vw, 24px);
  left: clamp(12px, 1.8vw, 24px);
  right: 0; bottom: 0;
  background: var(--blk-back, var(--cyan));   /* couleur du projet en plus sombre (posée par script.js) */
}
.case-hero img {
  position: relative;
  width: 100%;
  height: auto;
  background: var(--grey);
}
/* Même lueur légère que les cartes (rien en mode sombre) */
.case-hero > img, .case-hero > .thumb {
  box-shadow: 0 6px 24px -6px rgb(38 79 83 / 28%), 0 2px 10px var(--shadow-ink);
}
:root[data-theme="dark"] .case-hero > img, :root[data-theme="dark"] .case-hero > .thumb { box-shadow: none; }
/* Projet web : l’image reprend l’affichage des cartes (16:9, barre de navigateur en haut, le bas est coupé si besoin, jamais le haut) */
.case-hero .thumb { position: relative; }
.case-hero .thumb img { position: absolute; top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); object-fit: cover; }
.case-hero .thumb--browser img { top: 20px; height: calc(100% - 17px); object-position: center top; }   /* 2 px sous la barre du navigateur, 3 px de débord en bas et sur les côtés */

.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 28px;
  margin-top: clamp(22px, 2.8vw, 34px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.case-meta dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case-meta dd { margin-top: 3px; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }

.case-about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 6vw, 96px);
  align-items: start;
}
.case-about h2 { margin-bottom: 0; }
.case-about__text p + p { margin-top: 1.1em; }

/* Galerie « Visuels du projet » : grille de 3 colonnes, puis sections texte + visuel */
.gallery { display: grid; gap: clamp(20px, 3vw, 40px); }
.gal { display: grid; gap: clamp(14px, 2vw, 28px); }
.gal--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal--split {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(12px, 3vw, 40px);
}
.gal--rev { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.gal--rev .gal__text { order: 2; }
.gal__title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.gal__title::before {
  content: "";
  display: block;
  width: 34px; height: 3px;
  background: var(--blk, var(--cyan));   /* couleur du projet (posée par script.js) */
  margin-bottom: 16px;
}

/* Emplacement de visuel : pointillés + hachures légères = « à remplacer » */
.slot {
  display: grid;
  place-items: center;
  aspect-ratio: var(--r, 16 / 9);
  border: 1.5px dashed var(--line-strong);
  background: repeating-linear-gradient(135deg, transparent 0 14px, var(--hatch) 14px 15px);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  padding: 12px;
}
.slot small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 500; opacity: .8; }
.slot--img { border: 0; padding: 0; background: var(--grey); overflow: hidden; }
.slot--img img { width: 100%; height: 100%; object-fit: cover; }

/* Galerie : intro de section, logos sur fonds de couleur, pastilles de couleur, visuels à leur format réel, pages web en colonnes */
.gal--intro { margin-top: clamp(28px, 5vw, 72px); gap: 0; }
.gal--intro:first-child { margin-top: 0; }
.gal--intro p { color: var(--body); line-height: var(--lh-body); }
.tile, .photo, .shot__frame { box-shadow: 0 0 0 1px rgba(128, 128, 128, .10), 0 6px 24px -6px rgb(38 79 83 / 28%), 0 2px 10px var(--shadow-ink); }
:root[data-theme="dark"] .tile, :root[data-theme="dark"] .photo, :root[data-theme="dark"] .shot__frame { box-shadow: none; }
.tile { display: grid; place-items: center; aspect-ratio: var(--r, 16 / 9); background: var(--bg, var(--grey)); overflow: hidden; }
.tile img { width: var(--fit, 60%); height: auto; max-height: 72%; object-fit: contain; }
.photo img { display: block; width: 100%; height: auto; }
.gal--cols { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); align-items: start; }
.shot__frame { background: var(--grey); }
.shot__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding-left: 10px; background: var(--chrome-bg); border-bottom: 1px solid var(--chrome-line); }
.shot__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--chrome-dot); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.gal--palette { grid-template-columns: repeat(var(--pc, 4), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px) clamp(10px, 1.6vw, 20px); list-style: none; padding: 0; margin: 0; }   /* jusqu’à 5 couleurs : une ligne ; à partir de 6 : 3 par ligne ; 2 par ligne sur téléphone (≤ 640 px) */
.swatch__chip { display: block; height: clamp(64px, 8vw, 110px); box-shadow: 0 0 0 1px rgba(128, 128, 128, .22); }
.swatch b { display: block; margin-top: 10px; font-size: 0.95rem; }
.swatch span:last-child { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.gal--deco svg { display: block; width: 100%; height: auto; fill: color-mix(in srgb, var(--deco, var(--blk, var(--cyan))) 45%, transparent); }
/* Bande teintée derrière la galerie (couleur du projet à 9 %, pleine largeur) et petites barres penchées sous « Le projet » : couleur du projet sur toutes les fiches */
.gal-sec {
  --gal-bg: color-mix(in srgb, var(--blk, var(--cyan)) 9%, var(--bg));
  margin-top: clamp(60px, 8vw, 110px);
  padding-top: clamp(48px, 6.5vw, 90px);
  padding-bottom: clamp(52px, 7vw, 96px);
  background: var(--gal-bg);
  box-shadow: 0 0 0 100vmax var(--gal-bg);
  clip-path: inset(0 -100vmax);
}
.case-about h2::after {
  content: "";
  display: block;
  width: 120px; height: 56px;
  margin-top: clamp(22px, 3vw, 40px);
  background:
    linear-gradient(var(--blk, var(--cyan)) 0 0) 0 0 / 120px 12px no-repeat,
    linear-gradient(var(--blk-back, var(--cyan)) 0 0) 0 22px / 76px 12px no-repeat,
    linear-gradient(color-mix(in srgb, var(--blk, var(--cyan)) 35%, transparent) 0 0) 0 44px / 44px 12px no-repeat;
  transform: skewX(-14deg);
  transform-origin: left bottom;
}
.gal--points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 48px); list-style: none; padding: 0; margin: 0; }
.gal--points li { padding-top: 18px; border-top: 3px solid var(--blk, var(--cyan)); }
.pt-n { display: block; margin-bottom: 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.gal--points h4 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 8px; }
.gal--points p { color: var(--body); line-height: var(--lh-body); }
/* Variante « visuel vertical » (affiches) : texte plus large, visuel plus étroit */
.gal--narrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.gal--narrow.gal--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.photo figcaption { padding: 12px 2px 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.photo:has(figcaption) { box-shadow: none; }
.photo:has(figcaption) img { box-shadow: 0 0 0 1px rgba(128, 128, 128, .10), 0 6px 24px -6px rgb(38 79 83 / 28%), 0 2px 10px var(--shadow-ink); }
:root[data-theme="dark"] .photo:has(figcaption) img { box-shadow: none; }

/* Personnage détouré à côté d’un titre (il se tient sur la ligne) */
.gal--intro-cut { position: relative; align-content: start; max-width: none; min-height: min(var(--cuth, 999px), clamp(180px, 22vw, 300px)); padding-right: clamp(110px, 17vw, 220px); }
.intro__cut { position: absolute; right: 0; bottom: 0; width: auto; height: min(var(--cuth, 999px), clamp(180px, 22vw, 300px)); }

/* Bloc de couleur avec personnage qui dépasse vers le haut */
.gal--feature {
  --lift: clamp(60px, 9vw, 130px);
  grid-template-columns: minmax(0, 1fr) minmax(150px, var(--imgw, 34%));
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
  margin-top: var(--lift);
  padding: clamp(24px, 3.5vw, 48px) clamp(24px, 4vw, 64px) 0;
  background: var(--fbg);
  color: #191919;
}
:root[data-theme="dark"] .gal--feature { background: color-mix(in srgb, var(--fbg) 26%, var(--bg)); color: var(--ink); }
.gal--feature .gal__text { align-self: center; padding-bottom: clamp(24px, 3.5vw, 48px); }
.gal--feature .gal__text p { line-height: var(--lh-body); }
.feature__img { display: block; width: 100%; height: auto; margin-top: calc(-1 * var(--lift)); }
.gal--feature-rev { grid-template-columns: minmax(150px, var(--imgw, 34%)) minmax(0, 1fr); }
.gal--feature-rev .gal__text { order: 2; }
.gal--feature-rev .feature__img { order: 1; }
.gal--deco svg.is-stroke path { fill: none; stroke: color-mix(in srgb, var(--deco, var(--blk, var(--cyan))) 55%, transparent); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

@media (max-width: 760px) {
  .gal--cols, .gal--points { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 44px); }
  .gal--feature, .gal--feature-rev { grid-template-columns: 1fr; margin-top: 0; padding: 28px 24px 0; }
  .feature__img { width: min(62%, 320px); margin: 0 0 0 auto; }
  .gal--feature-rev .feature__img { order: 2; margin: 0 auto 0 0; }
  .gal--feature-rev .gal__text { order: 1; }
  .gal--intro-cut { padding-right: 0; padding-bottom: clamp(160px, 46vw, 220px); }
  .intro__cut { height: clamp(150px, 42vw, 210px); }
  .shot__frame { position: relative; max-height: 560px; overflow: hidden; }   /* pages longues : aperçu du haut, fondu vers le bas */
  .shot__frame::after { content: ""; position: absolute; inset: auto 0 0; height: 110px; background: linear-gradient(to top, var(--gal-bg, var(--bg)), transparent); pointer-events: none; }
}

/* « Autres réalisations » : toujours 4 réalisations ; 4 côte à côte dès 1024 px, 2 par ligne de 600 à 1023 px, l’une sur l’autre en dessous */
@media (min-width: 1024px) {
  .latest .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
}

/* --- Apparition des éléments au chargement (de haut en bas) ---
   La page reste masquée une fraction de seconde, le temps que script.js prépare les éléments (secours à 2 s). */
html.js:not(.rv-ready) body { opacity: 0; }
.reveal { opacity: 0; }
.reveal.is-in { animation: rise .8s var(--ease) both; animation-delay: var(--d, 0ms); }
.reveal--fade.is-in { animation-name: fade; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --- Page 404 --- */
.nf { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h-top); padding-bottom: 40px; }
.nf__code { font-weight: 800; font-size: clamp(6rem, 24vw, 18rem); line-height: .85; letter-spacing: -0.05em; }
.nf__text { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; max-width: 24ch; line-height: 1.2; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__body, .case-about { grid-template-columns: 1fr; }
  .about__text p { max-width: 62ch; }
  .gal--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-head__grid { grid-template-columns: 1fr; }
  .case-hero { justify-self: start; max-width: 520px; }
}

@media (max-width: 760px) {
  :root { --header-h: 54px; --header-h-top: 68px; }
  .logo { font-size: 1.7rem; }
  .site-header.is-compact .logo { font-size: 1.4rem; }
  .nav { gap: 14px; }
  .nav a { font-size: 0.98rem; }
  .site-header.is-compact .nav a { font-size: 0.88rem; }

  .entry { flex-wrap: wrap; gap: 8px 16px; }
  .entry__desc { flex-basis: 100%; order: 3; max-width: none; text-wrap: pretty; }
  .entry__go { width: 52px; height: 52px; }
  .entry__go svg { width: 30px; height: 30px; }

  .gal--duo, .gal--grid { grid-template-columns: 1fr; }
  .gal--split, .gal--rev, .gal--narrow, .gal--narrow.gal--rev { grid-template-columns: 1fr; }
  .gal--rev .gal__text { order: 0; }
}

@media (max-width: 599px) {
  .grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: space-between; }
}

@media (max-width: 360px) {
  .case-title { font-size: 2.1rem; }   /* « Communication » (Centaur) doit tenir sur 320 px */
  .logo { font-size: 1.5rem; }
  .site-header.is-compact .logo { font-size: 1.35rem; }
  .nav { gap: 10px; }
  .nav a { font-size: 0.86rem; }
  .site-header.is-compact .nav a { font-size: 0.82rem; }
}

/* ---------- Mouvement réduit : composition fixe, sans animation ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js:not(.rv-ready) body { opacity: 1; }
  .reveal { opacity: 1; }
  .reveal.is-in { animation: none; }
  .scroll-cue svg, .card.is-new { animation: none; }
  .rotator__item,
  .thumb img, .thumb__hover, .thumb__title,
  .btn, .btn svg, .entry, .entry__go, .entry__go svg,
  .caption__arrow, .nav a, .nav a::after, .logo,
  .back svg, a.contact__v,
  .site-header, .site-header__inner { transition: none; }
  .rotator__item { transform: none; }
  .card__link:hover .thumb img { transform: none; }
}

/* Légère lueur autour des cartes */
.thumb { box-shadow: 0 6px 24px -6px rgb(38 79 83 / 28%), 0 2px 10px var(--shadow-ink); }
:root[data-theme="dark"] .thumb { box-shadow: none; }   /* en sombre : pas d’ombre autour des cartes */

/* Bandeau : le texte descriptif s’aligne sur la 2e colonne de la grille des cartes (≥ 1024 px) */
@media (min-width: 1024px) {
  .entry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.6vw, 40px);
    padding-inline: 0;
  }
  .entry__title { padding-left: clamp(20px, 3vw, 40px); }
  .entry__desc { max-width: none; }
  .entry__go { margin-right: clamp(20px, 3vw, 40px); justify-self: end; }
}

/* Bouton d’action des fiches : état inactif, mention à côté du bouton */
.btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(22px, 2.6vw, 32px); }
.case-actions .btn { margin-top: 0 !important; }
.case-actions__note { font-size: var(--fs-small); color: var(--muted); }

/* Lien discret avec petite flèche (sous « Site internet » de la galerie) */
.link-ext {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 8px 15px;
  font-weight: 600; font-size: 0.92rem;
  border: 1.5px solid var(--blk, var(--cyan));
  transition: background-color .25s ease;
}
.link-ext:hover, .link-ext:focus-visible { background: color-mix(in srgb, var(--blk, var(--cyan)) 14%, transparent); }
.link-ext svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .25s ease; }
.link-ext:hover svg { transform: translate(2px, -2px); }

/* Fil d’Ariane des fiches projet : « < Accueil  < Tous les projets » */
.crumbs { display: flex; flex-wrap: wrap; gap: 0 22px; margin-bottom: clamp(18px, 2.4vw, 32px); }
.crumbs .back { margin-bottom: 0; }

/* Texte réservé aux lecteurs d’écran */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bouton externe sous « Le projet » (fiches création graphique avec lien) */
.case-about__text .btn--ext { margin-top: clamp(22px, 2.6vw, 32px); }
.btn--ext:hover svg { transform: translate(3px, -3px); }

/* Cartes web : barre de fenêtre sobre (boutons à gauche, sans couleur), intégrée à l’image sans changer la hauteur */
.thumb__chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-left: 10px;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-line);
  pointer-events: none;
}
.thumb__chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--chrome-dot); }
.thumb--browser img { top: 20px; height: calc(100% - 17px); object-position: center top; }   /* l’image part du haut : on coupe le bas, jamais le haut */
.thumb--browser .thumb__hover { z-index: 2; }

/* ---------- Bascule clair / sombre (icône soleil ↔ lune) ---------- */
.nav { align-items: center; }
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; margin-left: clamp(-6px, -0.4vw, 0px);
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background-color .3s ease;
}
@media (hover: hover) { .theme-toggle:hover { background: rgba(128, 128, 128, 0.16); } }
.theme-toggle svg { width: 24px; height: 24px; overflow: visible; }
.tt__core, .tt__cut, .tt__rays { transition: transform .7s var(--ease), opacity .5s ease; }
.tt__core { fill: currentColor; transform-box: fill-box; transform-origin: center; transform: scale(.56); }   /* soleil : disque de rayon 5 */
.tt__cut { transform: translate(30px, -8px); }                                                                 /* le « masque » reste loin du disque */
.tt__rays { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transform-box: view-box; transform-origin: 12px 12px; }
:root[data-theme="dark"] .tt__core { transform: scale(1); }                                                    /* lune : disque agrandi… */
:root[data-theme="dark"] .tt__cut { transform: translate(16.5px, 7.5px); }                                      /* …entamé par un second disque : croissant */
:root[data-theme="dark"] .tt__rays { transform: rotate(90deg) scale(.3); opacity: 0; }
.theme-toggle:active svg { transform: scale(.9); transition: transform .15s ease; }

/* Passage de l’un à l’autre : le nouveau thème se dévoile en cercle (animé par script.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
/* l’icône garde sa propre transformation : l’ancienne tourne et disparaît, la nouvelle arrive en tournant */
.theme-toggle { view-transition-name: theme-toggle; }
::view-transition-group(theme-toggle) { animation-duration: .7s; }
::view-transition-old(theme-toggle) { animation: tt-out .35s var(--ease) both; mix-blend-mode: normal; }
::view-transition-new(theme-toggle) { animation: tt-in .7s var(--ease) .1s both; mix-blend-mode: normal; }
@keyframes tt-out { to { transform: rotate(90deg) scale(.4); opacity: 0; } }
@keyframes tt-in { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tt__core, .tt__cut, .tt__rays { transition: none; }
}

/* Petits écrans : la barre garde de la place pour le bouton clair / sombre */
@media (max-width: 599px) {
  .nav { gap: 8px; }
  .nav a { font-size: 0.82rem; }
  .site-header.is-compact .nav a { font-size: 0.8rem; }
  .theme-toggle { width: 34px; height: 34px; margin-left: -2px; }
  .theme-toggle svg { width: 21px; height: 21px; }
}
@media (max-width: 380px) {
  .nav { gap: 6px; }
  .nav a { font-size: 0.76rem; }
  .site-header.is-compact .nav a { font-size: 0.74rem; }
  .logo { font-size: 1.4rem; }
  .site-header.is-compact .logo { font-size: 1.25rem; }
  .theme-toggle { width: 30px; height: 30px; }
  .theme-toggle svg { width: 19px; height: 19px; }
}

/* Fenêtre haute et pas très large (ordinateur réduit, tablette paysage) : la photo est limitée par la largeur de sa colonne.
   Le hero n’a plus besoin de toute la hauteur de l’écran, sinon un grand vide apparaît au-dessus du texte et de la photo. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .hero { min-height: min(100svh, calc(130px + 1.26 * var(--colw))); }
}

/* Curseur « main » sur tout ce qui est cliquable (liens, boutons, bascule clair/sombre) */
a[href], button, [role="button"], summary, label[for], select { cursor: pointer; }
button:disabled, .btn.is-disabled, [aria-disabled="true"] { cursor: default; }


/* ---------- Coordonnées : réseaux et grand logo discret ---------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.contact__list { position: relative; z-index: 1; }
.contact__social { display: flex; gap: 12px; margin-top: 4px; }
.social {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--on-cyan);
  border-radius: 50%;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social svg { width: 24px; height: 24px; fill: currentColor; }
.social:hover, .social:focus-visible { background: var(--on-cyan); color: var(--cyan); }
.social:hover { transform: translateY(-2px); }
.contact__mark {
  position: absolute;
  z-index: 0;
  right: clamp(18px, 3vw, 40px);
  bottom: clamp(26px, 3.4vw, 44px);
  width: clamp(130px, 27vw, 420px);
  height: auto;
  fill: currentColor;
  opacity: .15;
  pointer-events: none;
}

/* ---------- Transition entre les pages : logo EM. sur fond uni ----------
   html.pt-leaving : départ (fondu vers le fond uni) · html.pt-hold : arrivée (logo animé) · html.pt-show : le rideau s’efface */
.pt {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--bg);   /* même fond que le site (clair ou sombre) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
html.pt-leaving .pt { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; }
html.pt-hold .pt { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
html.pt-hold.pt-show .pt { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
html.js.pt-hold:not(.rv-ready) body { opacity: 1; }   /* le rideau couvre la page : pas besoin de la masquer en plus */

.pt__logo { width: clamp(132px, 20vw, 220px); height: auto; overflow: visible; fill: var(--ink); transition: opacity .35s ease, transform .55s var(--ease); }
.pt__bar { fill: var(--cyan); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.pt__e, .pt__m { transform: translateY(780px); }
.pt__d { transform: translateY(-700px); }
html.pt-hold .pt__e { animation: pt-up .63s cubic-bezier(.2, .8, .2, 1) .06s both; }
html.pt-hold .pt__m { animation: pt-up .63s cubic-bezier(.2, .8, .2, 1) .17s both; }
html.pt-hold .pt__d { animation: pt-drop .77s both .38s; }
html.pt-hold .pt__bar { animation: pt-bar .5s cubic-bezier(.65, 0, .2, 1) .56s both; }
html.pt-show .pt__logo { opacity: 0; transform: translateY(-8px); }
@keyframes pt-up { from { transform: translateY(780px); } to { transform: translateY(0); } }
@keyframes pt-drop {
  0%   { transform: translateY(-700px); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  58%  { transform: translateY(0);      animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  76%  { transform: translateY(-80px);  animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  100% { transform: translateY(0); }
}
@keyframes pt-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pt { display: none !important; } }

/* ---------- Bloc « feature » : variantes (texte clair, illustration posée, frise décorative, lettrage) + éventail d’affiches ---------- */
.gal--feature { --pt: clamp(24px, 3.5vw, 48px); --px: clamp(24px, 4vw, 64px); }
.gal--feature-ink, .gal--feature-ink .gal__title { color: #fff; }
.gal--feature-ink .gal__text p { color: rgb(255 255 255 / 90%); }
.gal--feature-ink .gal__title::before { background: #ffcf26; }
:root[data-theme="dark"] .gal--feature-ink { background: color-mix(in srgb, var(--fbg) 72%, var(--bg)); }   /* fond bleu assez clair pour que la jupe anthracite de la danseuse ne se fonde pas dedans */
:root[data-theme="dark"] .gal--feature-ink, :root[data-theme="dark"] .gal--feature-ink .gal__title { color: #fff; }
:root[data-theme="dark"] .gal--feature-ink .gal__text p { color: rgb(255 255 255 / 90%); }
.gal--feature-flat { --lift: 0px; margin-top: 0; align-items: center; padding-bottom: var(--pt); }
.gal--feature-flat .feature__img { margin-top: 0; }
.gal--feature-flat .gal__text { padding-bottom: 0; }
.feature__garland {
  grid-column: 1 / -1; align-self: start; pointer-events: none;
  height: clamp(44px, 6vw, 84px);
  margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 0;
  background-repeat: repeat-x; background-position: left top; background-size: auto 100%;
}
.feature__orn { display: block; width: min(100%, 300px); height: auto; margin: 0 0 clamp(8px, 1.4vw, 18px) -4px; }
@media (min-width: 761px) {
  /* frise + personnage qui dépasse : le personnage occupe les deux rangées et passe devant la frise */
  .gal--feature.has-garland:not(.gal--feature-flat) .feature__garland { grid-row: 1; }
  .gal--feature.has-garland:not(.gal--feature-flat) .gal__text { grid-row: 2; grid-column: 1; }
  .gal--feature.has-garland:not(.gal--feature-flat) .feature__img { grid-row: 1 / span 2; grid-column: 2; position: relative; z-index: 1; }
  .gal--feature-rev.has-garland:not(.gal--feature-flat) .gal__text { grid-column: 2; }
  .gal--feature-rev.has-garland:not(.gal--feature-flat) .feature__img { grid-column: 1; }
}

/* Bloc « feature » : image de fond (texture) · colonnes de visuels : 2 colonnes sur téléphone, version compacte */
.gal--feature { position: relative; }
.feature__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .9; pointer-events: none; }
.gal--feature > .gal__text, .gal--feature > .feature__img { position: relative; z-index: 1; }
.gal--compact { max-width: 860px; }
@media (max-width: 760px) {
  .gal--cols.gal--cols-m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Mode sombre : petits repères de couleur (carré du label, barres sous « Le projet ») éclaircis si la couleur du projet est très foncée */
:root[data-theme="dark"] .dot,
:root[data-theme="dark"] .label::before { background: var(--blk-dk, var(--blk, var(--cyan))); }
:root[data-theme="dark"] .case-about h2::after {
  background:
    linear-gradient(var(--blk-dk, var(--blk, var(--cyan))) 0 0) 0 0 / 120px 12px no-repeat,
    linear-gradient(var(--blk-back-dk, var(--blk-back, var(--cyan))) 0 0) 0 22px / 76px 12px no-repeat,
    linear-gradient(color-mix(in srgb, var(--blk-dk, var(--blk, var(--cyan))) 35%, transparent) 0 0) 0 44px / 44px 12px no-repeat;
}


/* =====================================================================
   FICHES PROJET — rythme, nouveaux blocs (side, stagger, stage, free, branch), éventail avec étiquettes
   ===================================================================== */

/* Rythme vertical unique : même écart entre toutes les sections ; un titre de section reste proche de son visuel */
.gallery { --gsp: clamp(44px, 5.5vw, 72px); --gtight: clamp(14px, 1.8vw, 24px); gap: var(--gsp); }
.gal--intro { margin-top: 0; }
.gal--intro + .gal:not(.gal--intro):not(.gal--feature):not(.gal--stage) { margin-top: calc(var(--gtight) - var(--gsp)); }
.gal--split { padding-block: 0; }

/* Logos : léger zoom au survol */
.tile img { transition: transform .5s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile:hover img { transform: scale(1.04); }
}

/* « side » : texte d’un côté, visuels de taille mesurée de l’autre */
.gal--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.gal--side.gal--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.gal--side.gal--rev .gal__text { order: 2; }
.gal--side .gal__text p { line-height: var(--lh-body); }
.side__imgs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 32px); }
.side__imgs > figure { flex: 0 1 min(var(--iw, 340px), 100%); max-width: var(--iw, 340px); min-width: 0; margin: 0; }
.side__imgs > .photo { box-shadow: none; }
.side__imgs > .photo img { transition: transform .5s var(--ease); box-shadow: 0 0 0 1px rgba(128, 128, 128, .10), 0 6px 24px -6px rgb(38 79 83 / 28%), 0 2px 10px var(--shadow-ink); }
:root[data-theme="dark"] .side__imgs > .photo img { box-shadow: none; }
.side__imgs > .photo:nth-child(odd) img { --rot: -1deg; transform: rotate(var(--rot)); }
.side__imgs > .photo:nth-child(even) img { --rot: 1deg; transform: rotate(var(--rot)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .side__imgs > .photo:hover img { transform: translateY(-8px) rotate(var(--rot)) scale(1.025); }   /* petit soulèvement : l’inclinaison ne change pas */
}

/* « stagger » : visuels numérotés, en quinconce, avec un bloc de couleur décalé derrière (comme l’image d’en-tête) */
.gal--stagger { --off: clamp(20px, 3.4vw, 48px); grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 52px); align-items: start; padding: 0 12px var(--off) 0; }
.gal--stagger > figure { position: relative; margin: 0; transform: translateY(calc(var(--o, 0) * var(--off))); }
.gal--stagger > figure::before { content: attr(data-n); display: block; margin-bottom: 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.gal--stagger > .photo { box-shadow: none; }
.gal--stagger > .photo img, .gal--stagger > .shot .shot__frame { box-shadow: 10px 10px 0 var(--blk-back, var(--cyan)), var(--glow); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
:root[data-theme="dark"] .gal--stagger > .photo img, :root[data-theme="dark"] .gal--stagger > .shot .shot__frame { box-shadow: 10px 10px 0 var(--blk-back-dk, var(--blk-back, var(--cyan))), var(--glow); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gal--stagger > .photo:hover img { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--blk-back, var(--cyan)), var(--glow); }
}

/* « stage » : panneau de couleur, affiches qui dépassent vers le haut, penchées ; elles se redressent au survol */
.gal--stage {
  --lift: clamp(54px, 7vw, 100px);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--pw, 46%));
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
  margin-top: var(--lift);
  padding: clamp(24px, 3.5vw, 48px) clamp(24px, 4vw, 64px) clamp(22px, 3vw, 36px);
  background: var(--fbg);
  color: #191919;
}
:root[data-theme="dark"] .gal--stage { background: color-mix(in srgb, var(--fbg) 26%, var(--bg)); color: var(--ink); }
.gal--stage.has-cut { grid-template-columns: auto minmax(0, 1fr) minmax(0, var(--pw, 46%)); }
.gal--stage .gal__text { align-self: center; }
.gal--stage .gal__text p { line-height: var(--lh-body); }
.stage__cut { display: block; align-self: end; height: clamp(230px, 24vw, 330px); width: auto; margin-bottom: calc(-1 * clamp(22px, 3vw, 36px)); }
.stage__list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.stage__list li { line-height: var(--lh-body); }
.stage__list b { display: block; font-weight: 800; letter-spacing: -0.01em; }
.stage__posters { display: flex; align-items: flex-start; gap: clamp(12px, 2vw, 28px); margin-top: calc(-1 * var(--lift)); padding-bottom: calc(var(--lift) * .3); }
.stage__posters > figure { flex: 1 1 0; min-width: 0; margin: 0; transition: translate .5s var(--ease), scale .5s var(--ease); }
.stage__posters > figure:nth-child(odd) { transform: rotate(-1.6deg); transform-origin: 50% 100%; }
.stage__posters > figure:nth-child(even) { transform: translateY(calc(var(--lift) * .3)) rotate(1.6deg); transform-origin: 50% 100%; }
.stage__posters img { display: block; width: 100%; height: auto; box-shadow: 0 16px 34px -12px rgb(20 20 40 / 45%), 0 0 0 1px rgba(128, 128, 128, .12); }
:root[data-theme="dark"] .stage__posters img { box-shadow: 0 0 0 1px rgb(255 255 255 / 12%); }
.stage__posters figcaption { padding-top: 14px; font-size: 0.85rem; font-weight: 700; line-height: 1.3; text-align: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stage__posters > figure:hover { translate: 0 -8px; scale: 1.025; }   /* petit soulèvement : l’inclinaison ne change pas */
}

/* « free » : illustration détourée posée librement à côté du texte, qui flotte doucement */
.gal--free { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.gal--free .gal__text p { line-height: var(--lh-body); }
.free__img { --fy: 20px; --fx: 25px; display: block; width: min(100%, 620px); height: auto; justify-self: center; animation: floaty-y 4.8s ease-in-out infinite alternate, floaty-x 7.1s ease-in-out infinite alternate; }
@keyframes floaty-y { from { translate: 0 calc(var(--fy) * -1); } to { translate: 0 var(--fy); } }   /* mouvement « en croix » : haut-bas et gauche-droite, de durées différentes ; la fusée ne s’arrête jamais, sans rotation */
@keyframes floaty-x { from { transform: translateX(calc(var(--fx) * -1)); } to { transform: translateX(var(--fx)); } }

/* « branch » : trait ondulé avec un rameau posé dessus (séparateur) */
.gal--branch { position: relative; height: clamp(120px, 14vw, 190px); }
.gal--branch svg { position: absolute; left: 0; right: 0; top: 26%; width: 100%; height: 40px; overflow: visible; }
.gal--branch path { fill: none; stroke: #add19c; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.branch { position: absolute; width: auto; }
.branch--l { left: 2%; top: 10%; height: 90%; }
.branch--r { right: 2%; top: 14%; height: 62%; transform: scaleX(-1); }

/* Fenêtres de site : hauteur fixe ; au survol, la page défile du haut vers le bas */
.shot__frame { --vh: clamp(360px, 40vw, 540px); position: relative; overflow: hidden; }
.shot__view { height: var(--vh); overflow: hidden; }
.shot__view img { transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); will-change: transform; }   /* retour en haut : rapide mais doux */
.shot__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; background: rgb(25 25 25 / 80%); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shot__hint { opacity: 1; }
  .shot__frame:hover .shot__hint { opacity: 0; }
  .shot__frame:hover .shot__view img { transform: translateY(calc(-100% + var(--vh))); transition: transform var(--dur, 5s) cubic-bezier(.32, .04, .3, 1) .08s; }   /* départ vif, arrivée douce */
}
@media (prefers-reduced-motion: reduce) { .shot__view { overflow-y: auto; } }

/* Titre de fiche : mention entre parenthèses, plus petite */
.case-title__note { display: block; margin-top: .4em; font-size: .34em; font-weight: 600; font-style: normal; letter-spacing: 0; line-height: 1.25; color: var(--muted); }

@media (max-width: 760px) {
  .gal--side, .gal--side.gal--rev, .gal--free { grid-template-columns: 1fr; }
  .gal--side.gal--rev .gal__text { order: 0; }
  .side__imgs { justify-content: center; }
  .gal--stagger { --off: 0px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .gal--stagger[style*="--n:3"], .gal--stagger[style*="--n:2"] { grid-template-columns: 1fr; }
  .gal--stagger > .photo img, .gal--stagger > .shot .shot__frame { box-shadow: 7px 7px 0 var(--blk-back, var(--cyan)), var(--glow); }
  .gal--stage, .gal--stage.has-cut { grid-template-columns: 1fr; margin-top: 0; padding: 28px 22px 26px; gap: 22px; }
  .stage__posters { margin-top: 0; padding-bottom: 0; }
  .stage__posters > figure:nth-child(even) { transform: rotate(1.6deg); }
  .stage__cut { order: 3; height: 200px; margin: 0 0 calc(-1 * 26px) 0; }
  .gal--branch { height: clamp(120px, 34vw, 160px); }
  .shot__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .free__img { animation: none; }
  .side__imgs > .photo img, .stage__posters > figure, .tile img { transition: none; }
}

/* Bloc « feature » compact : moins haut, personnage qui dépasse moins (--lift réglable par fiche) · rangée de miniatures YouTube */
.gal--feature-compact { --pt: clamp(18px, 2.4vw, 32px); padding-top: var(--pt); }
.gal--feature-compact .gal__text { padding-bottom: clamp(14px, 1.9vw, 26px); }
.gal--thumbs { align-items: start; gap: clamp(16px, 2.4vw, 32px); }
.gal--thumbs .photo { margin: 0; box-shadow: none; }
.gal--thumbs .photo img { border-radius: 4px; transition: transform .4s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gal--thumbs .photo:hover img { transform: translateY(-6px); } }
@media (max-width: 760px) {
  .gal--feature-compact, .gal--feature-compact.gal--feature-rev { padding: 24px 24px 0; }
  .gal--feature-compact .feature__img { width: auto; max-width: 62%; height: clamp(150px, 44vw, 210px); }
  .gal--thumbs { gap: 22px; }
}

/* =====================================================================
   Lueur commune, apparition des affiches, versions d’affiche, étapes
   ===================================================================== */
:root { --glow: 0 0 0 1px rgba(128, 128, 128, .10), 0 6px 24px -6px rgb(38 79 83 / 28%), 0 2px 10px var(--shadow-ink); }
:root { --soft: 0 10px 30px -10px rgb(38 79 83 / 38%), 0 2px 10px var(--shadow-ink); }   /* lueur douce, sans liseré */
:root[data-theme="dark"] { --soft: 0 0 0 0 transparent; --glow: 0 0 0 0 transparent; }   /* lueur : mode clair uniquement */

/* Affiches « posées » : elles s’agrandissent à leur première apparition (script.js : initPop) */
.pop.is-seen { animation: pop-in .7s var(--ease) var(--d, 0ms) backwards; }
.pop.is-wait { opacity: 0; scale: .95; }
@keyframes pop-in { from { opacity: 0; scale: .95; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .pop.is-wait { opacity: 1; scale: 1; } .pop.is-seen { animation: none; } }

/* Versions d’une affiche : la retenue à gauche, plus grande, sur un bloc de couleur décalé ; les autres, de même taille, en rangée */
.gal--fan { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.fan__main { padding: 0 clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 6px; }
.fan__rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); align-items: center; }
.fan__item { margin: 0; transform: rotate(var(--r, 0deg)); transition: translate .4s var(--ease); box-shadow: var(--soft); }
.fan__item img { display: block; width: 100%; height: auto; }
.fan__item.is-main { box-shadow: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) 0 var(--blk-back, var(--cyan)), var(--soft); }
:root[data-theme="dark"] .fan__item.is-main { box-shadow: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) 0 var(--blk-back-dk, var(--blk-back, var(--cyan))), var(--soft); }
.fan__rest .fan__item:nth-child(2) { margin-top: clamp(20px, 3.4vw, 52px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .fan__item:hover { translate: 0 -6px; } }
@media (max-width: 760px) {
  .gal--fan { grid-template-columns: 1fr; gap: 26px; }
  .fan__main { justify-self: center; width: min(82%, 340px); }
  .fan__item { transform: none; }
  .fan__rest { gap: 10px; }
  .fan__rest .fan__item:nth-child(2) { margin-top: 0; }
}

/* « side » avec bloc décalé derrière le visuel, et liste d’étapes numérotées */
.gal--offset .side__imgs > .photo img { box-shadow: 14px 14px 0 var(--blk-back, var(--cyan)), var(--glow); }
:root[data-theme="dark"] .gal--offset .side__imgs > .photo img { box-shadow: 14px 14px 0 var(--blk-back-dk, var(--blk-back, var(--cyan))), var(--glow); }
.gal--offset .side__imgs { padding-right: 14px; padding-bottom: 14px; }
.side__steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.side__steps li { position: relative; padding-left: 22px; line-height: var(--lh-body); }
.side__steps li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 3px; background: var(--blk, var(--cyan)); }
:root[data-theme="dark"] .side__steps li::before { background: var(--blk-dk, var(--blk, var(--cyan))); }
/* visuel penché vers la droite, avec une simple lueur */
.gal--side.gal--tilt .side__imgs > .photo:nth-child(n) img { --rot: 2deg; }

/* « stage » juste sous un séparateur : plus de marge au-dessus */
.gal--branch + .gal--stage { margin-top: calc(var(--lift) * .25); }

@media (max-width: 760px) {
  .gal--palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* nombre impair de couleurs : la dernière occupe toute la largeur, pour ne pas laisser de vide à droite */
  .gal--palette > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Bandeau compact : texte plus large (moins de lignes), lettrage et frise plus petits */
.gal--feature-compact .feature__garland { height: clamp(28px, 3.6vw, 50px); }

/* =====================================================================
   Fiches web et vidéo : bandeau teinté, image cliquable, bouton plus visible
   ===================================================================== */
.case-band {
  --band: color-mix(in srgb, var(--blk, var(--cyan)) 9%, var(--bg));
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
  margin-top: clamp(40px, 5vw, 72px);
  padding-block: clamp(44px, 6vw, 84px);
}
/* Image du haut cliquable : bouton lecture (vidéo) ou pastille « Visiter le site » (web) */
.hero-cover { position: absolute; top: 0; left: 0; right: clamp(12px, 1.8vw, 24px); bottom: clamp(12px, 1.8vw, 24px); display: block; z-index: 2; }
.hero-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px); border-radius: 50%; background: rgb(255 255 255 / 92%); color: #191919; box-shadow: 0 8px 28px -6px rgb(0 0 0 / 45%); transition: scale .35s var(--ease); }
.hero-play svg { width: 44%; height: 44%; fill: currentColor; margin-left: 6%; }
a.hero-cover:hover .hero-play, a.hero-cover:focus-visible .hero-play { scale: 1.1; }
.hero-visit { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #191919; color: #fff; font-size: .82rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.hero-visit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
a.hero-cover:hover .hero-visit { opacity: 1; transform: none; }
@media (hover: none) { .hero-visit { opacity: 1; transform: none; } }

/* Illustration détourée en mode sombre : les blancs du dessin (nuages…) éblouissent moins */
:root[data-theme="dark"] .free__img { filter: brightness(.9); }


/* « bento » : grand visuel à gauche, un moyen et deux petits à droite (logos sur fonds) */
.gal--bento { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(10px, 1.6vw, 20px); align-items: stretch; }
.bento__side { display: grid; grid-template-rows: auto auto; gap: clamp(10px, 1.6vw, 20px); min-width: 0; }
.bento__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.bento__big, .bento__mid { min-width: 0; }
.bento__big .tile { height: 100%; aspect-ratio: auto; min-height: 260px; }
.bento__mid .tile { aspect-ratio: 2 / 1; }
.bento__duo .tile { aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .gal--bento { grid-template-columns: 1fr; }
  .bento__big .tile { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}

/* Versions avec texte (Olé) : texte condensé à gauche ; à droite, sur une seule ligne, la version retenue (un peu plus grande, légèrement à part) puis les trois autres collées, qui se chevauchent */
.gal--fan-t { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.gal--fan-t .gal__text p { font-size: .95rem; line-height: 1.6; }
.fan__stack { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); min-width: 0; }
.gal--fan-t .fan__main { flex: 0 0 32%; padding: 0; }
.gal--fan-t .fan__item.is-main, :root[data-theme="dark"] .gal--fan-t .fan__item.is-main { box-shadow: var(--soft); }
.gal--fan-t .fan__rest { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.gal--fan-t .fan__rest .fan__item { flex: 0 0 37%; }
.gal--fan-t .fan__rest .fan__item + .fan__item { margin-left: -9%; }
.gal--fan-t .fan__rest .fan__item:nth-child(1) { --r: -3deg; z-index: 1; }
.gal--fan-t .fan__rest .fan__item:nth-child(2) { --r: 1.2deg; z-index: 2; margin-top: 16px; }
.gal--fan-t .fan__rest .fan__item:nth-child(3) { --r: 3.5deg; z-index: 3; }
@media (max-width: 760px) {
  .gal--fan-t { grid-template-columns: 1fr; }
  .fan__stack { flex-direction: column; gap: 22px; }
  .gal--fan-t .fan__main { flex: none; width: min(58%, 250px); }
  .gal--fan-t .fan__rest { width: 100%; flex: none; }
}
.gal--feature-compact .feature__orn { width: min(100%, 250px); margin-bottom: clamp(22px, 2.8vw, 38px); }
.gal--feature-compact.has-garland .gal__text { padding-top: clamp(6px, .8vw, 12px); }

/* Bandeau pleine largeur : le fond de couleur va d’un bord à l’autre de la page, le contenu reste aligné sur la grille du site */
.gal--feature-bleed, :root[data-theme="dark"] .gal--feature-bleed { background: none; padding-inline: 0; }
.gal--feature-bleed::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--fbg); z-index: 0; pointer-events: none; }
:root[data-theme="dark"] .gal--feature-bleed::before { background: color-mix(in srgb, var(--fbg) 26%, var(--bg)); }
.gal--feature-bleed .feature__garland { margin-inline: calc(50% - 50vw); z-index: 1; }
@media (max-width: 760px) { .gal--feature-compact .feature__orn { width: min(70%, 190px); } }

/* Bandeaux avec texte qui habille le dessin : l’ordre du code change (image avant texte), les colonnes ordinateur gardent leur place */
.gal--feature-wrap .gal__text { order: 1; }
.gal--feature-wrap .feature__img { order: 2; }

/* Téléphone (≤ 760 px) */
@media (max-width: 760px) {
  /* Intro avec petite icône (Restons aimables) : l’icône, bien plus petite, flotte à droite en haut du paragraphe, le texte l’habille */
  .gal--intro-cut { display: flow-root; min-height: 0; padding: 0; }
  .gal--intro-cut .gal__title { margin-bottom: 14px; }
  .intro__cut { position: static; float: right; height: clamp(72px, 22vw, 98px); width: auto; margin: 2px 0 8px 24px; shape-outside: circle(50%); }
  /* Le petit personnage du panneau « Au bloc » : retiré sur téléphone */
  .stage__cut { display: none; }
  /* Bandeau plein largeur « L’équipe au complet » : illustration plus grande */
  .gal--feature-flat .feature__img { width: 80%; max-width: none; margin: 0 0 0 auto; }
  /* Bandeau avec dessin : texte à gauche, personnage à droite posé sur le bas du bloc (le corps est coupé par le bord du bloc) ; hauteur automatique : jamais d’image déformée */
  .gal--feature-wrap, .gal--feature-wrap.gal--feature-rev { grid-template-columns: minmax(0, 1fr) var(--wm, 42%); align-items: end; gap: 14px; padding-bottom: 0; }
  .gal--feature-wrap .gal__text { order: 1; align-self: center; padding-bottom: 24px; }
  .gal--feature-wrap .feature__img { order: 2; width: 100%; max-width: none; height: auto; margin: 0; align-self: end; }
}
}
@media (max-width: 760px) { .gal--feature-compact .feature__img { object-fit: contain; object-position: right bottom; } }

/* Premier bloc de la galerie : 28 px sous « Visuels du projet » (le personnage ou les affiches qui dépassent montent dans l’espace libre, à droite du titre) */
@media (min-width: 761px) {
  .gallery > .gal--feature:first-child, .gallery > .gal--stage:first-child { margin-top: 28px; }
}

/* Téléphone : un peu plus d’air entre un texte d’introduction et le visuel qui suit (partout pareil) */
@media (max-width: 760px) { .gallery { --gtight: 30px; } }

/* Téléphone : fusée COMARG plus petite et mouvement réduit, elle reste entière dans l’écran avec une marge sur les côtés */
@media (max-width: 760px) {
  .free__img { --fx: 7px; --fy: 10px; width: 82%; }
  /* Affiche seule (« side ») : un peu moins grande, centrée, avec autant d’air au-dessus qu’en dessous */
  .gal--side { gap: clamp(36px, 10vw, 48px); }
  .gal--side.gal--tilt .side__imgs > figure { flex-basis: 88%; max-width: 88%; }
}

/* Téléphone : maquette « Détail d’une réalisation » (Centaur) masquée ; affiche seule avec de l’air égal en haut et en bas */
@media (max-width: 760px) {
  .shot--hide-m { display: none; }
  .gal--side.gal--tilt .side__imgs { padding-block: 16px; }
}

/* Optométrie : les trois slides restent côte à côte de 600 à 760 px, puis s’empilent sous 600 px */
@media (max-width: 760px) and (min-width: 600px) {
  .gal--stagger.gal--keep3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Bandeau « Olé » sur téléphone : une guirlande à deux festons (image à part), texte et personnage côte à côte. Sur ordinateur, la frise d’origine est conservée */
.feature__garland--m { display: none; }
@media (max-width: 760px) {
  .has-garland-m > .feature__garland:not(.feature__garland--m) { display: none; }
  .has-garland-m > .feature__garland--m { display: block; height: 52px; background-size: auto 100%; background-repeat: no-repeat; background-position: center top; }
}

/* Feuillage de l’équipe (Restons aimables) : sur téléphone, moins de feuilles et plus grandes ; à partir de 761 px, la frise d’origine (plus de feuilles, plus petites) */
@media (max-width: 760px) {
  .gal--feature-bleed .feature__garland { height: clamp(78px, 11vw, 168px); }
}

/* Largeur des lignes de texte : à partir de 761 px, une limite simple pour un texte seul ou dans une grille de 1 à 2 colonnes ; rien pour les grilles de 3 colonnes et plus, rien sous 761 px */
@media (min-width: 761px) {
  .gal--intro, .gal--intro-cut > p,
  .gal--feature .gal__text p, .gal--side .gal__text p, .gal--stage .gal__text p,
  .gal--free .gal__text p, .gal--fan-t .gal__text p,
  .stage__list, .side__steps, .case-about__text p { max-width: 60ch; }
}

/* Pied de page : lien vers les mentions légales */
.site-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

/* Page « Mentions légales » */
.legal { padding-bottom: clamp(40px, 6vw, 90px); }
.legal > p { margin-top: 12px; line-height: var(--lh-body); font-size: var(--fs-body); color: var(--body); }
.legal > .page-intro { color: var(--muted); }
.legal__h { margin-top: clamp(28px, 3.6vw, 46px); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 800; letter-spacing: -0.01em; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 761px) { .legal > p { max-width: 65ch; } }

/* Optométrie : sous 600 px, les slides sont toujours l’une sur l’autre (une seule colonne) */
@media (max-width: 599px) {
  .gal--stagger.gal--keep3 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Bandeau Olé (≥ 761 px) : le bloc de texte est remonté pour être centré dans la partie bleue sous la frise (même espace en haut et en bas) */
@media (min-width: 761px) {
  .gal--feature-compact.has-garland .gal__text { position: relative; top: calc(clamp(20px, 4vw, 64px) * -0.42); }
}

/* Grille « cols3 » (logos Espace Vertoit) : 3 par ligne dès 761 px, un par ligne en dessous */
@media (min-width: 761px) { .gal--grid.gal--g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gal--grid.gal--g3 { grid-template-columns: 1fr; } }

/* « stage » avec liste (Espace Vertoit), tablette 761–1023 px : le texte passe en haut sur toute la largeur (liste sur deux colonnes), les affiches dessous, bien plus grandes */
@media (min-width: 761px) and (max-width: 1023px) {
  .gal--stage-list { grid-template-columns: 1fr; align-items: start; gap: 30px; margin-top: 0; padding: clamp(32px, 5vw, 48px) clamp(28px, 5vw, 48px) clamp(26px, 4vw, 40px); }
  .gal--stage-list .gal__text p { max-width: 62ch; }
  .gal--stage-list .stage__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(24px, 4vw, 44px); max-width: none; margin-top: 20px; }
  /* les affiches sont rangées sous les deux colonnes de texte : chacune juste sous sa description */
  .gal--stage-list .stage__posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 44px); align-items: start; width: 100%; margin: 0; padding-bottom: calc(var(--lift) * .3); }
  .gal--stage-list .stage__posters > figure { width: min(calc(100% - 28px), 400px); margin-inline: 14px; }   /* petit retrait : l’inclinaison des affiches ne dépasse pas les marges du texte */
}