:root {
  --bg: #f7f6f4;
  --ink: #17171a;
  --muted: #6b6b68;
  --accent: #17171a;
}

/* Dépose le fichier de la police dans assets/fonts/ (woff2 de préférence,
   otf/ttf marchent aussi) sous le nom minion-pro-italic.* — tant qu'il n'y
   est pas, le repli Georgia italique prend le relais tout seul. */
@font-face {
  font-family: "Minion Pro";
  src:
    url("../fonts/minion-pro-italic.woff2") format("woff2"),
    url("../fonts/minion-pro-italic.woff") format("woff"),
    url("../fonts/minion-pro-italic.otf") format("opentype"),
    url("../fonts/minion-pro-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Curseur natif masqué uniquement sur pointeur fin (souris) ;
   sur mobile/tactile on garde le comportement par défaut. */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: none;
  }
}

/* ---------- Page d'accueil : la roche, en pleine page ---------- */

/* Dégradé calé sur le fond réel de la photo (mesuré directement sur le
   fichier) : si un espace apparaît malgré tout (barre d'adresse mobile,
   marge sur petit écran…), il se fond dedans au lieu de trancher en blanc. */
body.home {
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, #dad2df 0%, #f5f4fa 100%);
}

.stage {
  position: relative;
  height: 100dvh;
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
}

/* Roche = 2600x1535px. .rock-frame est toujours mis à l'échelle pour
   couvrir tout l'écran EN CONSERVANT ce ratio (comme background-size:cover,
   mais en pur CSS, sans JS) : width/height de base = plein écran, et le
   min-width/min-height calculé à partir du ratio prend le relais dès que
   la base ne suffit plus à couvrir l'autre dimension. Le débordement est
   centré puis rogné par .stage (overflow: hidden).
   100dvh (dynamic viewport height) au lieu de 100vh : sur mobile, vh se
   base sur la hauteur "barre d'adresse rétractée", donc quand elle est
   visible ça laissait un vrai espace en haut. dvh suit la hauteur réellement
   visible. Les deux valeurs sont déclarées : les navigateurs qui ne
   connaissent pas dvh gardent simplement la valeur vh juste au-dessus. */
.rock-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: calc(100vh * 2600 / 1535);
  min-width: calc(100dvh * 2600 / 1535);
  min-height: calc(100vw * 1535 / 2600);
}

.rock-frame img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.hover-caption {
  position: fixed;
  top: 50%;
  margin: 0;
  max-width: 24vw;
  font-family: "Minion Pro", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  line-height: 1.25;
  color: #a8a0ab;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 15;
}

.hover-caption-left {
  left: clamp(2rem, 6vw, 6rem);
  text-align: right;
  transform: translateY(-50%) translateX(-10px);
}

.hover-caption-right {
  right: clamp(2rem, 6vw, 6rem);
  text-align: left;
  transform: translateY(-50%) translateX(10px);
}

.hover-caption-left.visible,
.hover-caption-right.visible {
  transform: translateY(-50%) translateX(0);
}

.hover-caption.visible {
  opacity: 1;
}

@media (max-width: 700px) {
  .hover-caption {
    display: none;
  }
}

.brand {
  position: fixed;
  top: 28px;
  left: 32px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  z-index: 20;
}

/* ---------- Points chauds ---------- */

.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 6%;
  height: 6%;
  border-radius: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* mode calibration (?calibrate) : seul endroit où le contour des points reste visible */
.calibrate .hotspot {
  outline: 1px solid rgba(200, 40, 40, 0.6);
  border-radius: 50%;
}
.calibrate-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: red;
  pointer-events: none;
}

/* ---------- Curseur pioche personnalisé ---------- */

#pickaxe-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  /* La pointe du pic (coin haut-gauche de la photo) est calée sur le curseur ;
     le pivot du balancement est vers la poignée. Recalcule ces valeurs si tu
     changes d'image. */
  transform: translate(-17px, -8px) rotate(-10deg);
  transform-origin: 33px 59px;
  will-change: transform;
  transition: transform 0.08s ease-out;
  display: none;
}

body.has-custom-cursor #pickaxe-cursor {
  display: block;
}

#pickaxe-cursor img,
#pickaxe-cursor svg {
  display: block;
  height: 80px;
  width: auto;
  pointer-events: none;
  user-select: none;
}

#pickaxe-cursor.swing {
  animation: pickaxe-swing 0.32s ease-in-out;
}

@keyframes pickaxe-swing {
  0%   { transform: translate(-17px, -8px) rotate(-10deg); }
  40%  { transform: translate(-17px, -8px) rotate(30deg); }
  100% { transform: translate(-17px, -8px) rotate(-10deg); }
}

/* ---------- Page projet ---------- */

.project-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 12vh 6vw 10vh;
}

.back-link {
  display: inline-block;
  margin-bottom: 3rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.back-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.project-category {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.project-title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  margin: 0 0 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.project-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  max-width: 60ch;
  margin: 0 0 3.5rem;
  white-space: pre-line;
}

.project-media {
  display: grid;
  gap: 1.25rem;
}

.media-placeholder {
  aspect-ratio: 16 / 9;
  background: #eceae6;
  border: 1px dashed #c9c7c2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

.not-found {
  padding: 20vh 6vw;
  text-align: center;
}

/* ---------- Page About ---------- */

.about-page .project-title {
  margin-bottom: 2.5rem;
}

.about-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.about-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.about-photo.media-placeholder {
  aspect-ratio: auto;
  border-radius: 50%;
  font-size: 0.75rem;
}

.about-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
}

.about-contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
}
.about-contact a:hover {
  border-bottom-color: var(--ink);
}

.about-contact span {
  color: #333;
}

.about-section {
  margin-bottom: 3.5rem;
}

.about-section-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e2e0da;
}

.exp-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ece9e3;
}
.exp-item:last-child { border-bottom: 0; }

.exp-period {
  margin: 0;
  width: 13rem;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.exp-role {
  margin: 0;
  font-size: 1rem;
}

.exp-company {
  color: var(--muted);
}

.client-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.client-tag {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid #d8d5cd;
  border-radius: 999px;
  color: #333;
}

.education-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.education-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid #ece9e3;
  font-size: 1rem;
}
.education-list li:last-child { border-bottom: 0; }

.awards-photo {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin-bottom: 2rem;
}

.award-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}

.award-org {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.award-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.award-list li {
  font-size: 0.9rem;
  color: #333;
}