/* ============================================================
   POLICES HÉBERGÉES SUR LE SITE
   Montagu Slab — Florian Karsten, licence SIL OFL 1.1
   Deux coupes optiques : 16 pt (petites tailles) et 144 pt (grandes tailles)
   ============================================================ */
@font-face {
  font-family: "Montagu Slab 16";
  src: url("/fonts/MontaguSlab16pt-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montagu Slab 144";
  src: url("/fonts/MontaguSlab144pt-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   RÉGLAGES — tout se change ici
   ============================================================ */
:root {
  /* Police : Akzidenz-Grotesk Next (Adobe Fonts, projet vgg5yfg)
     400 = Regular, 500 = Medium, 700 = Bold, chacune avec italique */
  --typo: "akzidenz-grotesk-next-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Police des titres (essai) — vide = même police que le texte */
  --typo-titre: "Montagu Slab 16", Georgia, serif;   /* nom + titres de projets ; "Montagu Slab 144" = coupe grandes tailles */
  --graisse-titre: 700;

  /* Tailles */
  --taille-texte: 15px;        /* texte courant, menus, Now, légendes longues */
  --taille-petit: 13px;        /* étiquettes TYPE, mentions */
  --taille-titre: clamp(24px, 3vw, 48px);    /* nom en page d'accueil (taille S) */
  --taille-titre-projet: clamp(24px, 3vw, 48px);   /* titres de projets */
  --interligne: 1.35;
  --interligne-titre: 0.9;
  --approche-titre: -0.025em;

  /* Décor et feuilles */
  --carte-fond: #f6d34a;        /* cartouche (remplacée par la couleur du décor tiré) */
  --carte-encre: #141414;
  --feuille-fond: var(--carte-fond);
  --marge: 16px;
  --rayon: 8px;
  --decor-defaut: url("/img/soon.jpg");

  /* Couleurs */
  --encre: #141414;
  --gris: #8a8a8a;             /* survol, étiquettes */
  --fond: #ffffff;
  --filet: rgba(0, 0, 0, 0.18);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--typo);
  font-weight: 400;
  font-size: var(--taille-texte);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--gris); }

em, i { font-style: italic; }

img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   TITRES — Montagu Slab 700 (nom, titres de projets)
   ============================================================ */
.nom, .titre-projet {
  font-family: var(--typo-titre);
  font-weight: var(--graisse-titre);
  font-optical-sizing: auto;
}
.titre-projet { text-transform: uppercase; letter-spacing: 0.01em; }

/* ============================================================
   ACCUEIL PROVISOIRE « SOON » (SITE_SOON=true)
   ============================================================ */
.soon {
  position: fixed; inset: 0;
  background: #120d0b var(--decor-defaut) center / cover no-repeat;
  display: grid; place-items: center;
}
.soon h1 {
  margin: 0; color: #fff;
  font-family: var(--typo-titre); font-weight: 700;
  font-size: clamp(40px, 9vw, 160px); line-height: 1;
  text-shadow: 0 0 40px rgba(0, 0, 0, .25);
}

/* ============================================================
   DÉCOR : image plein écran + cartouche + pied
   ============================================================ */
.decor { position: fixed; inset: 0; }
.decor-image {
  position: absolute; inset: 0;
  background: #120d0b var(--decor-defaut) center / cover no-repeat;
}
.cartouche {
  position: absolute; top: var(--marge); left: var(--marge);
  width: min(560px, calc(100% - 2 * var(--marge)));
  max-height: calc(100% - 2 * var(--marge) - 40px); overflow: auto;
  padding: 14px 16px 6px;
  background: var(--carte-fond); color: var(--carte-encre);
  border-radius: var(--rayon);
}
.nom {
  display: block; margin: 0 0 10px;
  font-family: var(--typo-titre); font-weight: var(--graisse-titre);
  font-size: var(--taille-titre); line-height: 1;
}
.menu { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 14px; }
.now { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.now li { padding: 8px 0 10px; border-bottom: 1px solid var(--filet); }
.now li:last-child { border-bottom: 0; }
.now-date { display: block; font-weight: 700; }
.now-texte p { margin: 0; }
.now-projet { display: inline-block; margin-top: 2px; }
.now-texte a, .texte a, .info a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cartouche a:hover { color: color-mix(in srgb, var(--carte-encre) 50%, transparent); }
.pied {
  position: absolute; right: var(--marge); bottom: var(--marge);
  padding: 3px 8px; border-radius: var(--rayon);
  background: var(--carte-fond); color: var(--carte-encre);
  font-size: var(--taille-petit);
}

/* ============================================================
   FEUILLES posées sur le décor
   ============================================================ */
.feuilles { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.voile { position: absolute; inset: 0; display: none; pointer-events: auto; }
body.a-feuille .voile { display: block; }
.feuille {
  position: absolute; inset: var(--marge);
  overflow: auto; overscroll-behavior: contain; pointer-events: auto;
  background: var(--feuille-fond); color: var(--carte-encre);
  border-radius: var(--rayon);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 48px rgba(0,0,0,.18);
  transition: transform .25s ease, opacity .25s ease;
}
.feuille[data-niveau="2"] { inset: calc(var(--marge) * 2.5); }
.feuille.entre { transform: translateY(24px); opacity: 0; }
.feuille-contenu { padding: 4px 16px 64px; }
.fermer {
  position: sticky; top: 12px; z-index: 2;
  display: block; width: max-content; margin: 12px 12px 0 auto;
  padding: 4px 12px; font: inherit; color: var(--encre); cursor: pointer;
  background: #fff; border: 1px solid rgba(0,0,0,.55); border-radius: 6px;
}
.fermer:hover { color: var(--gris); }
.feuille:not(:last-of-type) .fermer { visibility: hidden; }

/* Étiquettes */
.b-label, .p-meta, .v-type {
  margin: 0 0 6px; font-size: var(--taille-petit);
  text-transform: uppercase; letter-spacing: .05em;
  color: color-mix(in srgb, var(--carte-encre) 55%, transparent);
}
.gris { color: color-mix(in srgb, var(--carte-encre) 55%, transparent); }

/* ============================================================
   GRILLE DES PROJETS
   ============================================================ */
.grille {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 16px; align-items: start;
}
.vignette { order: 99; }   /* les épinglés reçoivent order 1, 2, 3 */
.vignette a { display: block; }
.v-image img { width: 100%; height: auto; margin-bottom: 8px; transition: opacity .15s; }
.vignette a:hover img { opacity: .85; }
.v-type { display: block; margin: 0; }
.v-titre { display: block; }

/* ============================================================
   PAGE PROJET
   ============================================================ */
.titre-projet { margin: 0 0 24px; font-size: var(--taille-titre-projet); line-height: 1.05; }
.p-cartouche { margin: 0; max-width: 48em; border-top: 1px solid var(--filet); }
.p-cartouche div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--filet); }
.p-cartouche dt { color: color-mix(in srgb, var(--carte-encre) 55%, transparent); }
.p-cartouche dd { margin: 0; }
.bloc { margin: 48px 0 0; }
.b-note, .b-lien { margin: 0 0 12px; max-width: 38em; }
.b-lien a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.b-titre { margin: 0 0 12px; font-size: var(--taille-texte); font-weight: 500; }
.texte { max-width: 38em; }
.texte p { margin: 0 0 1em; }
.texte h3 { margin: 1.6em 0 .4em; font-size: var(--taille-texte); font-weight: 700; }
.texte ul, .texte ol { margin: 0 0 1em; padding-left: 1.2em; }

/* Galerie : une vue + vignettes numérotées */
.g-vues { cursor: pointer; }
.g-vue { display: none; margin: 0; }
.g-vue.actif { display: block; }
.g-vue img { width: auto; max-width: 100%; max-height: 72vh; }
.g-vue figcaption, .post-image figcaption { margin-top: 6px; font-size: var(--taille-petit); color: color-mix(in srgb, var(--carte-encre) 60%, transparent); }
.g-nav { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.g-nav button { font: inherit; background: none; border: 0; padding: 0 4px; cursor: pointer; color: inherit; }
.g-nav button:hover { color: var(--gris); }
.g-vignettes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-width: 760px; }
.g-vignettes button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; opacity: .55; transition: opacity .15s; }
.g-vignettes button.actif, .g-vignettes button:hover { opacity: 1; }
.g-num { display: block; font-size: 11px; margin-bottom: 2px; }
.g-vignettes img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.galerie.seule .g-nav, .galerie.seule .g-vignettes { display: none; }
.galerie.seule .g-vues { cursor: default; }

/* Recherches */
.r-images { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; align-items: start; }

/* ============================================================
   LOG
   ============================================================ */
.log .post { max-width: 760px; margin: 0 0 72px; }
.post-date { margin: 0 0 10px; font-weight: 700; }
.post-image { margin: 0 0 16px; }
.post-image img { width: auto; max-width: 100%; max-height: 80vh; }

/* ============================================================
   INFORMATION
   ============================================================ */
.info-haut { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
.info-liens p { margin: 0 0 20px; }
.email { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cv { margin-top: 64px; }
.cv-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.cv-liste li { display: grid; grid-template-columns: 5em minmax(0, 1fr) 13em; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--filet); }
.cv-section { text-align: right; font-size: var(--taille-petit); color: color-mix(in srgb, var(--carte-encre) 55%, transparent); }
.credits { margin: 56px 0 0; font-size: var(--taille-petit); color: color-mix(in srgb, var(--carte-encre) 55%, transparent); }

/* ============================================================
   TÉLÉPHONE
   ============================================================ */
@media (max-width: 700px) {
  :root { --marge: 8px; }
  .feuille[data-niveau="2"] { inset: var(--marge); }
  .info-haut { grid-template-columns: 1fr; gap: 24px; }
  .cv-liste li { grid-template-columns: 3.5em minmax(0, 1fr); }
  .cv-section { grid-column: 2; text-align: left; }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .feuille { transition: none; }
}