/* ---------- Variables ---------- */
:root {
  --bg: #f5f1e8;
  --bg-card: #f7f4ec;
  --bg-alt: #efe9dc;
  --ink: #23201b;
  --ink-body: #443f36;
  --ink-soft: #3c3830;
  --ink-muted: #6d6455;
  --ink-faint: #8a8175;
  --gold: #9a7b33;
  --gold-light: #c9a24a;
  --gold-deep: #7d6228;
  --on-dark: #f0ebdf;
  --on-gold: #1a1712;

  --font-display: 'Cormorant Garamond', serif;
  --font-ui: 'Karla', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-light); color: #16181b; }

@keyframes omFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 48px;
  background: rgba(245, 241, 232, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(35, 32, 27, 0.1);
}
.site-nav__brand {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.site-nav__link {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  border-bottom-color: var(--gold);
  color: var(--ink);
}
/* Avec cinq entrees, la marque et les liens ne tiennent plus sur une ligne de
   telephone : les liens se repliaient un par ligne a cote de la marque, et la
   barre collante mangeait un quart de l'ecran. On passe la marque sur sa
   propre ligne pour rendre toute la largeur aux liens. */
@media (max-width: 560px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 22px;
  }
  .site-nav__links {
    width: 100%;
    gap: 16px;
    font-size: 11px;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 132px 48px 116px;
  background: linear-gradient(180deg, #f7f4ec 0%, #efe9dc 100%);
}
.hero__deco { position: absolute; pointer-events: none; }
.hero__deco--stripes {
  top: -80px; right: -60px;
  width: 620px; height: 620px;
  background: repeating-linear-gradient(102deg, rgba(154, 123, 51, 0.13) 0 2px, rgba(154, 123, 51, 0) 2px 22px);
}
.hero__deco--glow {
  left: -140px; bottom: -180px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(154, 123, 51, 0.16), rgba(154, 123, 51, 0) 70%);
}
.hero__inner {
  position: relative;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.hero__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__rule { width: 34px; height: 1px; background: var(--gold); }
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(46px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero__lead {
  margin: 0;
  max-width: 660px;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.5;
  color: #4a443a;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding-top: 6px;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin: 24px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(35, 32, 27, 0.12);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--gold); }
.btn--outline { border: 1px solid rgba(35, 32, 27, 0.28); }
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--gold); color: var(--gold); }
.btn--gold {
  align-self: flex-start;
  margin-top: 12px;
  padding: 15px 28px;
  background: var(--gold-light);
  color: var(--on-gold);
  font-weight: 700;
  border-radius: 0;
}
.btn--gold:hover, .btn--gold:focus-visible { background: var(--on-dark); }

/* ---------- Sections génériques ---------- */
.section { padding: 104px 48px; }
.section--light { background: var(--bg); }
.section--alt { background: var(--bg-alt); border-top: 1px solid rgba(35, 32, 27, 0.08); }
.section__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 700px;
}
.section__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.1;
}

/* ---------- À propos ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 56px;
  align-items: start;
}
.about__col { display: flex; flex-direction: column; gap: 18px; }
.about__photo {
  margin-top: 8px;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid rgba(35, 32, 27, 0.12);
  filter: saturate(0.92) contrast(1.02);
}
.about__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 620px;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-body);
  text-wrap: pretty;
}
.about__para { margin: 0; }

/* ---------- Projets ---------- */
.projects__head { margin-bottom: 54px; }
.projects { display: flex; flex-direction: column; gap: 22px; }
.project {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  padding: 38px 40px;
  background: var(--bg-card);
  border: 1px solid rgba(35, 32, 27, 0.1);
  border-left: 3px solid var(--gold);
  transition: border-left-color 200ms ease;
}
.project:hover, .project:focus-within { border-left-color: var(--ink); }
.project__side { display: flex; flex-direction: column; gap: 14px; }
.project__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.project__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
}
.project__kicker {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.project__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.tag {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 11px;
  background: rgba(154, 123, 51, 0.12);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.project__body { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.field__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-body);
}
.project__link {
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(154, 123, 51, 0.4);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  transition: color 200ms ease, border-bottom-color 200ms ease;
}
.project__link:hover,
.project__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Captures de projet ---------- */
/* Ce bloc vit DANS .project__side, pas comme enfant direct de .project.
   .project est une grille `repeat(auto-fit, minmax(260px, 1fr))` qui ouvre
   jusqu'à cinq colonnes : avec deux enfants seulement, auto-fit effondre les
   colonnes vides et il en reste deux à 50 %. Un troisième enfant occupant
   toute la largeur empêche cet effondrement, et le texte se retrouve écrasé
   sur une colonne sur cinq. Ne pas remonter ce bloc au niveau de .project. */
/* `.training__shots` partage la regle : meme objet visuel, autre bloc hote.
   La mise en garde ci-dessus ne vaut que pour `.project`, dont la grille est
   en `auto-fit` ; `.training__item` pose des pistes explicites. */
.project__shots,
.training__shots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 4px;
}
.shot {
  display: block;
  border: 1px solid rgba(35, 32, 27, 0.14);
  background: var(--bg-alt);
  transition: border-color 200ms ease, transform 200ms ease;
}
.shot img {
  display: block;
  width: auto;
  height: 320px;
  max-width: 100%;
}
.shot.shot--wide img {
  width: 100%;
  max-width: 560px;
  height: auto;
}
/* Captures en paysage : elles se partagent la largeur de la colonne au lieu
   d'imposer chacune une taille fixe, sinon deux d'entre elles ne tiennent pas
   côte à côte et s'empilent, ce qui étire la carte à la verticale. La base de
   200px laisse le duo tenir sur une ligne dès que la colonne fait ~420px. */
.shot--land {
  flex: 1 1 200px;
  max-width: 400px;
}
.shot.shot--land img {
  width: 100%;
  height: auto;
}
.shot:hover,
.shot:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
}
@media (max-width: 560px) {
  /* Le plancher de 260px de la grille .project ne tient pas sur un telephone :
     48px de marge de section et 40px de marge de carte de chaque cote ne
     laissent que 199px de largeur interieure sur un ecran de 375px, et la
     piste debordait donc du cadre avec son texte et ses captures. Une colonne
     unique supprime le plancher, la marge reduite rend de la largeur utile. */
  .project {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 26px 22px;
  }
  /* Meme plancher trop haut sur .about : 280px pour 279px disponibles des que
     le viewport passe sous 376px, ce qui fait defiler la page en largeur. */
  .about {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* 220px de haut donnent 104px de large a la plus large des vignettes
     (300x639), bordure comprise : deux tiennent sur une ligne de 235px avec
     12px d'ecart, la ou 260px n'en laissait passer qu'une seule par ligne. */
  .project__shots,
  .training__shots { gap: 12px; }
  .shot img { height: 220px; }
  .training__item { padding: 26px 22px; }
}

/* ---------- Visionneuse ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(35, 32, 27, 0.94);
  animation: omFadeUp 240ms cubic-bezier(.16, .8, .28, 1) both;
}
.lightbox[hidden] { display: none; }
.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(240, 235, 223, 0.18);
}
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: none;
  border: 1px solid rgba(240, 235, 223, 0.3);
  border-radius: 2px;
  color: var(--on-dark);
  font-family: var(--font-ui);
  font-size: 26px;
  line-height: 1;
  transition: border-color 200ms ease, color 200ms ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
body.lightbox-open { overflow: hidden; }

/* ---------- Formation ---------- */
.training__head { margin-bottom: 26px; }
.training__intro {
  margin: 0 0 40px;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
  text-wrap: pretty;
}
.training { display: flex; flex-direction: column; gap: 2px; }
/* Pistes explicites plutot qu'un `repeat(auto-fit, minmax(Xpx, 1fr))` : la
   colonne de droite est en `minmax(0, 1fr)`, donc sans plancher dur, et ne
   peut pas deborder du cadre comme le faisait `.project` sur telephone. */
.training__item {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 40px;
  padding: 34px 32px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px rgba(35, 32, 27, 0.1);
}
.training__side { display: flex; flex-direction: column; gap: 12px; }
.training__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.training__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
}
.training__body { display: flex; flex-direction: column; gap: 18px; }
.training__note {
  margin: 26px 0 0;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}
/* 250px de piste plus 40px d'ecart ne laissent plus assez de largeur au texte
   des que la section descend sous ~760px : on passe en colonne unique avant
   que les paragraphes ne tombent en colonne etroite. */
@media (max-width: 760px) {
  .training__item {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ---------- Compétences ---------- */
.skills__head { margin-bottom: 50px; }
/* Plancher a 340px plutot que 240 : avec six groupes, 240px ouvrait cinq
   colonnes sur un grand ecran et laissait une carte seule sur la seconde
   ligne. 340px donne trois colonnes pleines, donc deux lignes de trois. */
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2px;
}
/* Le plancher ne tient sur aucun telephone : 48px de marge de section de
   chaque cote ne laissent que 279px de large sur un ecran de 375px. La piste
   debordait deja avec l'ancien plancher de 240px sous 336px de viewport, un
   defaut connu et laisse en l'etat ; le relever imposait de le corriger. */
@media (max-width: 560px) {
  .skills { grid-template-columns: 1fr; }
}
.skill-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px rgba(35, 32, 27, 0.1);
}
.skill-group__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.skill-group__items { display: flex; flex-direction: column; gap: 10px; }
.skill-group__item {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.skills__note {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------- Centres d'intérêt ---------- */
.interests__head { margin-bottom: 42px; max-width: none; }
.interests__list { display: flex; flex-wrap: wrap; gap: 12px; }
.interest-btn {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
  border-radius: 2px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid rgba(35, 32, 27, 0.14);
  transform: none;
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease,
              transform 260ms cubic-bezier(.16, .8, .28, 1), box-shadow 260ms ease;
}
.interest-btn:hover, .interest-btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px -14px rgba(35, 32, 27, 0.5);
}
.interest-btn:active { transform: translateY(0); }
.interest-btn--open {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-2px);
}
.interest-panel {
  margin-top: 22px;
  max-width: 640px;
  padding: 26px 28px;
  background: var(--bg-card);
  border: 1px solid rgba(35, 32, 27, 0.12);
  border-left: 3px solid var(--gold);
  animation: omFadeUp 380ms cubic-bezier(.16, .8, .28, 1) both;
}
/* Sans JavaScript, aucune classe `js` : les 7 panneaux restent visibles et
   le contenu est lisible. Avec JavaScript, la classe est posée dans le
   <head> avant le premier rendu : les panneaux sont masqués dès la première
   peinture, et seul un panneau explicitement marqué ouvert s'affiche. */
.js .interest-panel { display: none; }
.js .interest-panel.interest-panel--open { display: block; }
.interest-panel[hidden] { display: none; }
.interest-panel__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.interest-panel__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-body);
  text-wrap: pretty;
}
/* Lien dans le fil du texte : la regle globale `a { color: inherit }` le
   rendrait indistinguable de la phrase qui l'entoure. */
.interest-panel__link {
  border-bottom: 1px solid rgba(154, 123, 51, 0.45);
  color: var(--gold-deep);
  transition: color 200ms ease, border-bottom-color 200ms ease;
}
.interest-panel__link:hover,
.interest-panel__link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.interests__hint {
  margin: 26px 0 0;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---------- Contact ---------- */
.section.contact {
  position: relative;
  overflow: hidden;
  padding: 108px 48px;
  background: var(--ink);
  color: var(--on-dark);
}
.contact__deco {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(78deg, rgba(201, 162, 74, 0.1) 0 1px, rgba(201, 162, 74, 0) 1px 24px);
  pointer-events: none;
}
.contact__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: 760px;
}
.section__eyebrow.contact__eyebrow { color: var(--gold-light); }
.section__title.contact__title { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; }
.contact__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  padding-top: 10px;
}
.contact-link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(240, 235, 223, 0.22);
  transition: border-bottom-color 200ms ease;
}
.contact-link:hover, .contact-link:focus-visible { border-bottom-color: var(--gold-light); }
.contact-link__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.contact-link__value { font-size: 17px; }

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
}