/* Mise en page du site (à la main : la conversion ne l'écrase jamais).
   Utilise les variables de la maquette, générées dans figcraft.css (--fc-*). */

:root {
  /* la police de la maquette n'a pas tous les symboles (☞ ‣ ★ ❧…) : polices de secours */
  --font-text: var(--fc-font-text), "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", serif;
  --font-display: var(--fc-font-display), Impact, "Arial Black", sans-serif;
  --gutter: clamp(8px, 3vw, 48px);
  --red: #ff0000;
}

[hidden] { display: none !important; }

/* Le "bureau" : une seule page, sans scroll ; tout se passe dans les fenêtres. */
html, body { height: 100%; }
body {
  overflow: hidden;
  font-family: var(--font-text);
  font-size: var(--fc-fs-body);
  line-height: 1.35;
}
.desk {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  overflow: hidden;
}
@media (max-height: 520px) {   /* écran vraiment très bas : on autorise un défilement de secours */
  .desk { overflow-y: auto; }
}

/* ---------- Frame 2 : nom, métier, texte (inchangé) ---------- */
.hero {
  flex: 0 0 auto;
  padding-block: min(clamp(24px, 5vw, 64px), 6vh);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.hero__name {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  overflow-wrap: anywhere;
}
.hero__first { font-size: min(var(--fc-fs-display-1), 9.4vh); }
.hero__last  { font-size: min(var(--fc-fs-display-2), 3.5vh); }
.hero__role {
  margin: 0;
  font-size: var(--fc-fs-heading);
  font-weight: 700;
  font-style: italic;
}
.hero__intro {
  margin: 0;
  max-width: 60ch;
  overflow-wrap: break-word;
}
/* Animation de décodage : toutes les phrases sont empilées (invisibles) pour réserver la hauteur de la plus longue */
.hero__intro[data-phrases] { display: grid; }
.hero__intro[data-phrases] > * { grid-area: 1 / 1; }
.hero__ghost { visibility: hidden; pointer-events: none; }
.hero__word { display: inline-block; white-space: nowrap; }
@media (max-height: 640px) { .hero__intro { display: none; } }   /* écrans bas : on compacte l'en-tête */
@media (max-height: 460px) { .hero__role  { display: none; } }

/* ---------- Les 4 rubriques sur une ligne (avec retour à la ligne si l'écran est étroit) ---------- */
.menu {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: clamp(12px, 3vh, 32px);
}
.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  border: var(--fc-stroke) solid var(--fc-ink);
  border-radius: 0;
  background: var(--fc-paper);
  color: var(--fc-ink);
  font: italic 700 var(--fc-fs-heading)/1.4 var(--font-text);
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tab:hover { text-decoration: underline; }
.tab:focus-visible, .card:focus-visible, .close:focus-visible, .closeall:focus-visible {
  outline: 3px solid var(--fc-ink);
  outline-offset: 3px;
}

/* ---------- Carrousel des projets : pleine largeur, photos 4/3 ---------- */
.carousel {
  flex: 1 1 0;
  min-height: 120px;
  margin-inline: calc(var(--gutter) * -1);   /* occupe toute la page */
  margin-bottom: clamp(12px, 3vh, 32px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel__track {
  display: flex;
  gap: var(--fc-grid-gap);
  height: 100%;
  width: max-content;
  padding-inline: var(--gutter);
}
.card {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: #d9d9d9;
  cursor: pointer;
  position: relative;
}
.card img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.card:hover, .card:focus-visible {            /* instance "hover" de la maquette : contour */
  outline: var(--fc-stroke) solid var(--fc-ink);
  outline-offset: calc(var(--fc-stroke) * -1);
}
@media (hover: none) {
  .carousel { scroll-snap-type: x proximity; }
  .card { scroll-snap-align: start; }
}

/* Étiquette qui suit la souris (maquette "hover-project") */
.hover-project {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  pointer-events: none;
  padding: 8px 16px;
  border: var(--fc-stroke) solid var(--fc-ink);
  background: var(--fc-paper);
  font: italic 700 20px/1.2 var(--font-text);
  white-space: nowrap;
  max-width: calc(100vw - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  will-change: transform;
}
@media (hover: none) { .hover-project { display: none !important; } }

/* ---------- Pied de page (inchangé) + bouton "Fermer toustes les fenêtres" ---------- */
.contact {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  min-height: 76px;            /* réserve la place du bouton : la mise en page ne saute pas quand il apparaît */
  padding-block: 12px;
  border-top: var(--fc-stroke) solid var(--fc-ink);
}
.contact address {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-style: normal;
  min-width: 0;
}
.contact a { color: inherit; overflow-wrap: anywhere; }
.contact a:hover { text-decoration: none; }

.closeall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 8px;
  border: var(--fc-stroke) solid var(--fc-ink);
  border-radius: 0;
  background: var(--fc-paper);
  color: var(--fc-ink);
  font: italic 700 20px/1.2 var(--font-text);
  cursor: pointer;
  position: relative;
  z-index: 99999;               /* reste accessible même si une fenêtre le recouvre */
}
.closeall__box {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--fc-stroke) solid var(--fc-ink);
}
.closeall:hover { background: var(--red); }      /* variante state=hover */

/* ---------- Bouton fermer (composant "close", variante hover = fond rouge) ---------- */
.close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: var(--fc-stroke) solid var(--fc-ink);
  border-radius: 0;
  background: var(--fc-paper);
  color: var(--fc-ink);
  cursor: pointer;
}
.close:hover { background: var(--red); }
.x, .closeall__box .x {
  width: 18px;
  height: 18px;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}
.close:hover .x, .closeall:hover .x { width: 16px; height: 16px; }

/* ---------- Fenêtres ---------- */
.win {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--fc-paper);
  border: var(--fc-stroke) solid var(--fc-ink);
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  outline: none;
}
.win.is-dragging { cursor: grabbing; }
.win__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.win__title {
  margin: 0;
  min-width: 0;
  font-size: var(--fc-fs-heading);
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Fenêtre d'une rubrique (variante "Value 2") */
.win--rubrique {
  width: clamp(340px, 30vw, 575px);
  max-width: calc(100vw - 16px);
  padding: var(--fc-card-pad);
  gap: var(--fc-card-gap);
}
.win--rubrique .win__body {
  min-height: 0;
  overflow: visible;                     /* pas d'overflow auto/scroll => aucune scrollbar possible (rien n'est rogné non plus) */
}
.win--rubrique.win--overflow .win__body {   /* écran minuscule seulement : défilement à la molette, barre invisible */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.win--rubrique.win--overflow .win__body::-webkit-scrollbar { display: none; }
/* une seule colonne verticale ; espaces / interligne / taille calculés par desk.js (identiques dans toutes les fenêtres) */
.win--rubrique .entries {
  gap: var(--rub-gap, 16px);
  line-height: var(--rub-lh, 1.35);
  font-size: calc(var(--fc-fs-body) * var(--rub-fs, 1));
}
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.entry { min-width: 0; }
.entry p { margin: 0; overflow-wrap: break-word; }
.entry__name { font-weight: 700; }
.entry__more { padding-left: 16px; }
.entry__role { font-weight: 600; font-style: italic; }
.entry__meta { font-weight: 400; }
/* Légende ("> ..." dans le texte d'un projet) : italique, plus petite et plus discrète.
   Besley n'a pas de graisse plus fine que Regular (400) : l'effet "fin" vient de la taille et de l'opacité. */
.entry__legend { font-style: italic; font-weight: 400; font-size: 0.85em; opacity: 0.7; }
.g { font-family: var(--font-text); }

/* Fenêtre d'un projet : texte fixe à gauche, images qui défilent, slider à droite */
.win--projet {
  flex-direction: row;
  gap: 16px;
  padding: 16px;
  width: min(1581px, 82vw);
  height: min(808px, 75vh);
}
.win__info {
  flex: 0 0 clamp(220px, 34%, 539px);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  cursor: grab;
}
.entry__block + .entry__block { margin-top: 16px; }   /* espace entre deux sous-titres */
/* Le texte défile (molette) sans aucune scrollbar ; un léger fondu en haut/bas indique qu'il y a une suite. */
.win__text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.win__text::-webkit-scrollbar { display: none; }
.win__text.can-down { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.win__text.can-up   { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 36px), transparent); }
.win__text.can-up.can-down { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* Boutons-liens (même esprit que les rubriques du menu) */
.win__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-bottom: 4px; }
.btn-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border: var(--fc-stroke) solid var(--fc-ink);
  border-radius: 0;
  background: var(--fc-paper);
  color: var(--fc-ink);
  font: italic 700 calc(var(--fc-fs-body) * 0.85)/1.4 var(--font-text);   /* même style que l'onglet "Compétences", en plus petit */
  text-decoration: none;
  overflow-wrap: anywhere;
}
.btn-link:hover { text-decoration: underline; }
.btn-link:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 3px; }
.win__images {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.win__images::-webkit-scrollbar { display: none; }
.win__images:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 3px; }
.win__images img {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #d9d9d9;
}

/* Exception : image "libre" = largeur du cadre, hauteur proportionnelle (pas de recadrage 4/3) */
.win__images img.img--libre {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* Slider ("défilement") : 52 px, bordure 2 px, poignée noire à 3 traits */
.slider {
  flex: 0 0 52px;
  align-self: stretch;
  padding: 8px;
  border: var(--fc-stroke) solid var(--fc-ink);
  touch-action: none;
}
.slider__track { position: relative; height: 100%; cursor: pointer; }
.slider__thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 38px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--fc-ink);
  cursor: grab;
}
.slider__thumb i { display: block; width: 16px; height: 2px; background: var(--fc-paper); }
.slider__thumb.is-grabbed { cursor: grabbing; }
.win.no-scroll .slider { opacity: .35; pointer-events: none; }

/* ---------- Mobile / tablette : fenêtres quasi plein écran ---------- */
@media (max-width: 760px) {
  .win--rubrique { width: calc(100vw - 16px); }
  .win--projet { flex-direction: column; width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .win__info { flex: 0 1 auto; max-height: 40%; gap: 12px; }
  .slider { display: none; }                     /* le doigt fait défiler les images directement */
  .win__title { font-size: min(var(--fc-fs-heading), 24px); }
  .contact { gap: 8px 16px; }
}

.noscript { margin: 0; padding: 8px var(--gutter); border: var(--fc-stroke) solid var(--fc-ink); }

/* ---------- Curseur personnalisé (assets/cursor.js + includes/cursor.php) ---------- */
/* Pour changer la taille : modifie --u (1 unité du dessin SVG = 2.4 px, soit ~3x le curseur du système) */
html.has-cursor, html.has-cursor * { cursor: none !important; }

.cursor {
  --u: 2.4px;
  --tilt: 0deg;
  --blur: 0px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  pointer-events: none;
  will-change: transform;
}
.cursor__icon {
  position: absolute;
  display: none;
  max-width: none;
  height: calc(24 * var(--u));
  left: calc(var(--hx) * var(--u) * -1);              /* le "point actif" (pointe) est placé sur la position réelle de la souris */
  top: calc(var(--hy) * var(--u) * -1);
  transform-origin: calc(var(--hx) * var(--u)) calc(var(--hy) * var(--u));   /* l'icône pivote autour de sa pointe */
  transform: rotate(var(--tilt));
  filter: blur(var(--blur));
  user-select: none;
}
.cursor__icon[data-state="default"] { --hx: 1;   --hy: 1; width: calc(15 * var(--u)); }
.cursor__icon[data-state="pointer"] { --hx: 8.5; --hy: 1; width: calc(21 * var(--u)); }
.cursor__icon[data-state="hand"],
.cursor__icon[data-state="grab"]    { --hx: 12;  --hy: 12; width: calc(24 * var(--u)); }
.cursor[data-state="default"] .cursor__icon[data-state="default"],
.cursor[data-state="pointer"] .cursor__icon[data-state="pointer"],
.cursor[data-state="hand"]    .cursor__icon[data-state="hand"],
.cursor[data-state="grab"]    .cursor__icon[data-state="grab"] { display: block; }