/* ==========================================================
   Police
   Baikal VAR (newglyph, police variable : graisse 1–950,
   largeur 1–200 %). Repli : Space Grotesk (libre, OFL).
   Pour changer : déposer les fichiers dans assets/fonts et modifier --font.
   ========================================================== */
@font-face {
  font-family: "Baikal";
  src: url("../fonts/Baikal-VF.ttf") format("truetype-variations"), url("../fonts/Baikal-VF.ttf") format("truetype");
  font-weight: 1 950;
  font-stretch: 1% 200%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Réglages ---------- */
:root {
  --black: #000;
  --white: #fff;
  --font: "Baikal", "Space Grotesk", Helvetica, Arial, sans-serif;
  --weight: 500;

  /* Tailles reprises de la référence (écran > 980px) */
  --size-menu: 1.44vw;      /* menu, titres */
  --size-header: 1.1vw;     /* en-tête : nom, filtres, menu */
  --weight-header: 350;
  --size-big: 2.58vw;       /* texte À propos */
  --size-small: 0.8vw;      /* légendes */
  --line-small: 0.96vw;
  --gap: 0.8vw;
  --margin-x: 2vw;
  --margin-top: 4.6vw;

  --bg: #fff;               /* couleur de fond (changée par le dé, voir le Panel) */
  --gate-arrow-color: #ff3c00;  /* couleur de la flèche qui se remplit pendant la caresse */
  --cursor-plus: url("../images/hand-cursor-verticale.png") 12 25, pointer;   /* main du chien au survol des projets (verticale, point actif = paume) */
  --cursor-prev: url("../cursors/prev.svg") 13 13, w-resize;
  --cursor-next: url("../cursors/next.svg") 13 13, e-resize;
}

@media (max-width: 980px) {
  :root {
    --size-menu: 6.7vw;
    --size-header: 5vw;
    --size-big: 5.55vw;
    --size-small: 3.7vw;
    --line-small: 4.4vw;
    --gap: 2.5vw;
    --margin-x: 4vw;
    --margin-top: 4vw;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--margin-top) var(--margin-x) var(--margin-x);
  background: var(--bg);
  transition: background-color .4s ease;
  color: var(--black);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: var(--size-menu);
  line-height: 1.15;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, ol, figure { margin: 0; font-size: inherit; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* ---------- Boutons « pilule » ---------- */
.pill {
  display: inline-block;
  border: max(1px, 0.056em) solid var(--black);
  border-radius: 0.556em;
  padding: 0.139em 0.625em 0.174em;
  text-transform: lowercase;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}
.pill:hover,
.pill:focus-visible,
.pill[aria-current] {
  background: var(--black);
  color: var(--white);
  outline: none;
}

/* ---------- En-tête ---------- */
.site-header {
  font-size: var(--size-header);
  font-weight: var(--weight-header);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 0.6em;
  padding: 0.9vw var(--margin-x);
  background: var(--bg);
  transition: background-color .4s ease;
}
.site-title { margin-right: 0.6em; }
.site-menu, .filters, .site-nav, .lang-switch { display: flex; flex-wrap: wrap; gap: 0.35em; }
.site-nav { margin-left: auto; }
.lang-switch { margin-left: 0.6em; }

@media (max-width: 980px) {
  .site-header { position: static; padding: 0 0 4vw; margin: 0 calc(var(--margin-x) * -1); padding-inline: var(--margin-x); }
  .site-title { width: 100%; }
  .site-nav { margin-left: 0; }
}

.site-main { flex: 1; }

/* ---------- Accueil : grille de projets ---------- */
.intro { font-size: var(--size-big); max-width: 30em; margin: 2vw 0 4vw; }

.feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  margin-top: 1vw;
}
@media (max-width: 980px) {
  .feed { grid-template-columns: repeat(2, 1fr); }
}

.feed-project {
  display: block;
  break-inside: avoid;
  margin-bottom: calc(var(--gap) * 2);
  cursor: var(--cursor-plus);
}
.feed-project img { width: 100%; }
.feed-placeholder { display: block; aspect-ratio: 4 / 3; background: #eee; }

.feed-project-infos {
  display: block;
  margin-top: 0.4em;
  font-size: var(--size-small);
  line-height: var(--line-small);
}
.feed-project-infos > span { display: block; }
.feed-project:hover .feed-project-title { text-decoration: underline; text-underline-offset: 0.15em; }

.empty { font-size: var(--size-small); }

/* ---------- Page projet : images à la suite (comme choquelegoff.com) ----------
   Ordinateur : une ligne d'images à la hauteur de l'écran, qu'on fait défiler.
   Téléphone / tablette : les images s'empilent les unes sous les autres. */
.strip-wrap { position: relative; margin: 0 calc(var(--margin-x) * -1); }
.strip {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  overflow-x: auto;
  padding: 0 var(--margin-x);
  scroll-padding-left: var(--margin-x);
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip-item { flex: none; }
.strip-item img {
  height: calc(100vh - var(--margin-top) - 9vw);
  width: auto;
  max-width: none;
}
.strip-prev,
.strip-next { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; display: none; }
.strip-prev.is-active,
.strip-next.is-active { display: block; }
.strip-prev { left: 0; cursor: var(--cursor-prev); }
.strip-next { right: 0; cursor: var(--cursor-next); }

@media (max-width: 980px), (hover: none) {
  .strip-wrap { margin: 0; }
  .strip { flex-direction: column; overflow: visible; padding: 0; }
  .strip-item img { width: 100%; height: auto; }
  .strip-prev, .strip-next, .strip-prev.is-active, .strip-next.is-active { display: none; }
  .slideshow-counter { display: none; }
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 1.5em;
  margin-top: 1vw;
  font-size: var(--size-small);
  line-height: var(--line-small);
}
.project-title .project-kind::before { content: " — "; }
.slideshow-counter { margin-left: auto; }

.project-infos { width: 100%; order: 3; }
.project-infos summary { list-style: none; }
.project-infos summary::-webkit-details-marker { display: none; }
.project-infos summary::after { content: " +"; }
.project-infos[open] summary::after { content: " −"; }
.project-infos-body { max-width: 50em; margin-top: 0.8em; }
.project-infos-body > * + * { margin-top: 0.8em; }
.credits { list-style: none; padding: 0; }
.project-infos-body a { text-decoration: underline; }

/* ---------- À propos ---------- */
.about { margin-top: 2vw; }
.about-text { font-size: var(--size-big); line-height: 1.12; max-width: 32em; }
.about-text p + p { margin-top: 1em; }
.about-text a { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.about-text .contact { margin-top: 1em; }
.about-text .contact p { margin: 0; }
.availability { margin-top: 1em; }
.downloads { margin-top: 1em; display: flex; flex-wrap: wrap; gap: 0 1em; }
.about-portrait { max-width: 25vw; margin-top: 4vw; }

.about-lists {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: 4vw;
  font-size: var(--size-small);
  line-height: var(--line-small);
}
@media (max-width: 980px) {
  .about-lists { grid-template-columns: 1fr 1fr; gap: 6vw var(--gap); }
}
.about-list h2 { margin-bottom: var(--line-small); }
.about-list ul { list-style: none; padding: 0; }

/* ---------- Pages simples ---------- */
.text-page { max-width: 40em; margin-top: 2vw; }
.text-page h1 { margin-bottom: 1em; }
.text-page p + p { margin-top: 1em; }

/* ---------- Pied de page ---------- */
.site-footer {
  display: flex;
  gap: 1.5em;
  margin-top: 6vw;
  font-size: var(--size-small);
  line-height: var(--line-small);
}
.site-footer a:hover { text-decoration: underline; }

/* ---------- Référencement ---------- */
.home-title {
  font-size: var(--size-small);
  line-height: var(--line-small);
  max-width: 40em;
  margin: 1vw 0 0;
}

/* ---------- Écran d'entrée : caresser le chien ---------- */
.dog-gate-open, .dog-gate-open body { overflow: hidden; }
.dog-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  cursor: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .7s ease;
}
.dog-gate[hidden] { display: none; }
.dog-gate.is-leaving { opacity: 0; }
.dog-gate-inner { width: min(75vw, 460px, 60vh); text-align: center; }
.dog-gate-title { font-size: var(--size-header); margin-bottom: 1em; }
.dog-stage { position: relative; }
.dog { width: 100%; height: auto; display: block; color: var(--black); overflow: visible; }
.dog-custom { width: 100%; pointer-events: none; }
.dog-tail { transform-origin: 318px 322px; transform-box: view-box; }
.is-wagging .dog-tail { animation: dog-wag .18s ease-in-out infinite alternate; }
@keyframes dog-wag { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
.dog-eye-happy { display: none; }
.is-happy .dog-eye { display: none; }
.is-happy .dog-eye-happy { display: inline; }

.dog-hand {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 70px;
  margin: -35px 0 0 -45px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.dog-hand.is-visible { opacity: 1; }
.dog-hand svg { width: 100%; height: 100%; display: block; }



@media (max-width: 980px) {
}
@media (prefers-reduced-motion: reduce) {
  .is-wagging .dog-tail, .dog-heart { animation: none; }
  .dog-gate { transition: none; }
}
.dog-arrow { transition: opacity .4s ease; }
.is-petting .dog-arrow { opacity: 0; }
.dog-hand img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* La main du dessin devient le curseur dès qu'on bouge la souris */
.dog-without-hand { position: absolute; inset: 0; opacity: 0; }
.hand-picked .dog-without-hand { opacity: 1; }
.hand-picked .dog-with-hand { opacity: 0; }
.dog-hand { transition: opacity .2s ease; }
/* Main fermée pendant le clic. Si assets/images/hand-closed.png existe, elle remplace la main ouverte ;
   sinon, la main se resserre légèrement. */
.dog-hand > * { transition: transform .12s ease; transform-origin: 60% 55%; }
.is-pressed .dog-hand:not(.has-closed) > * { transform: scale(0.88, 0.95) rotate(-6deg); }
.dog-hand .hand-closed { position: absolute; inset: 0; opacity: 0; }
.is-pressed .dog-hand.has-closed .hand-open { opacity: 0; }
.is-pressed .dog-hand.has-closed .hand-closed { opacity: 1; }
.dog-gate { cursor: none; }
/* Flèche qui se colore en suivant la main */
.dog-arrow-progress { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .3s ease; }
.dog-arrow-progress.is-reset { opacity: 0; }
/* Phrase en haut de l'écran */
.dog-gate-title {
  position: fixed;
  top: 0.9vw;               /* même hauteur que le texte de l'en-tête */
  left: var(--margin-x);
  right: var(--margin-x);
  margin: 0;
  font-family: var(--font);
  font-size: var(--size-header);
  font-weight: var(--weight-header);
  line-height: 1.15;
}
@media (max-width: 980px) {
  .dog-gate-title { top: var(--margin-top); font-size: var(--size-header); }
}
/* Le dé (à côté de fr/en) */
.dice { display: inline-flex; align-items: center; margin-left: 0.4em; cursor: pointer; line-height: 0; }
.dice img { height: 1.4em; width: auto; display: block; }
.dice:focus-visible { outline: 1px solid var(--black); outline-offset: 2px; }
.dice.is-rolling img { animation: dice-roll .5s cubic-bezier(.3, .7, .4, 1); }
@keyframes dice-roll {
  0% { transform: rotate(0) scale(1); }
  40% { transform: rotate(200deg) scale(.85); }
  100% { transform: rotate(360deg) scale(1); }
}
/* Le chien montre les crocs : en attendant le dessin, il tremble */
.dog-gate.is-angry .dog-custom, .dog-gate.is-angry .dog-arrow-progress { animation: dog-shake .25s linear infinite; }
@keyframes dog-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.dog-angry { position: absolute; inset: 0; opacity: 0; }
.dog-gate.is-angry .dog-angry { opacity: 1; }
.dog-gate.is-angry.has-angry .dog-custom, .dog-gate.is-angry.has-angry .dog-arrow-progress { animation: none; }
.dog-gate.is-angry.has-angry .dog-custom { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .dice.is-rolling img, .dog-gate.is-angry .dog-custom { animation: none; }
}
/* Titre lu par Google et les lecteurs d'écran, invisible à l'écran (méthode accessible standard) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Main du chien en version nette sur les écrans haute définition */
.feed-project {
  cursor: -webkit-image-set(url("../images/hand-cursor-verticale.png") 1x, url("../images/hand-cursor-verticale@2x.png") 2x) 12 25, pointer;
  cursor: image-set(url("../images/hand-cursor-verticale.png") 1x, url("../images/hand-cursor-verticale@2x.png") 2x) 12 25, pointer;
}

/* Barre de défilement assortie au site : fine, noire, sur la couleur de fond */
html { scrollbar-width: thin; scrollbar-color: var(--black) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--black); border: 2px solid var(--bg); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { border-width: 1px; }



/* Mosaïque comme choquelegoff.com : images dans leurs proportions, réparties en colonnes (voir assets/js/feed.js) */
.feed { --feed-cols: var(--feed-cols-desktop, 4); grid-template-columns: repeat(var(--feed-cols), 1fr); align-items: start; }   /* 3 ou 4 : réglé dans le Panel */
@media (max-width: 980px) { .feed { --feed-cols: 2; } }
@media (max-width: 600px) { .feed { --feed-cols: 1; grid-template-columns: 1fr; } }
.feed.is-masonry { display: flex; gap: var(--gap); }
.feed-col { flex: 1 1 0; min-width: 0; }
.feed-media .feed-first { width: 100%; height: auto; }

.feed-media { display: block; }
.feed-project { position: relative; }
/* Vidéos : mêmes règles que les images (proportions d'origine) */
.strip-item video { height: calc(100vh - var(--margin-top) - 9vw); width: auto; max-width: none; display: block; }
.feed-media video.feed-first { width: 100%; height: auto; display: block; }
@media (max-width: 980px), (hover: none) {
  .strip-item video { width: 100%; height: auto; }
}
/* Texte d'introduction des pages de catégorie */
.category-intro { font-size: var(--size-small); line-height: var(--line-small); max-width: 42em; margin: 0.5vw 0 2vw; }