/* ============================================
   TEMPLATE HUGO — style.css
   ============================================

   INDEX
   1.  Fonts
   2.  Variables
   3.  Base
   4.  Navigation
   5.  Contenu (pages texte)
   6.  Actualités (2 colonnes, hors accordéon)
   7.  Tiroirs (accordéon — niveau 1)
   8.  Projets (dans tiroirs — niveau 2)
   9.  Galerie (images + tags)
   10. Galerie directe de tiroir (direct: true)
   11. Grille work (tous les projets)
   12. Page projet individuelle
   13. Footer & Toggles
   14. Desktop — grille work
   15. Mobile (≤ 800px)

   ============================================ */


/* ============================================
   1. FONTS
   ============================================ */

/* Chantier — auto-hébergée */
@font-face {
  font-family: 'Chantier';
  src: url('/webfonts/Chantier-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
  IBM Plex Serif — libre de droits, auto-hébergée
  Source : https://github.com/IBM/plex
  Fichier : /webfonts/IBMPlexSerif-Text.woff2
*/
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/webfonts/IBMPlexSerif-Text.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
  IBM Plex Mono — libre de droits, à ajouter
  Source : https://github.com/IBM/plex
  Fichier : /webfonts/IBMPlexMono-Regular.woff2
  Décommenter ce bloc pour l'activer :

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/webfonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/


/* ============================================
   2. VARIABLES
   ============================================ */

:root {
  /* Typographie */
  --font-sans:  'Chantier', Courier, monospace;
  --font-mono:  'IBM Plex Mono', monospace;
  --font-serif: 'IBM Plex Serif', Georgia, serif; /* non utilisé par défaut */

  /* Rythme vertical */
  --leading: 33px;

  /* Géométrie de la nav
     Hauteur visuelle du bandeau = 2 × --nav-padding
     Si --leading change, ajuster --nav-padding : nav-padding = 19.5 + leading */
  --nav-padding: 53px;
  --nav-height:  calc(2 * var(--nav-padding));
  --content-top: calc(var(--nav-height) + var(--leading));

  /* Géométrie de page */
  --page-margin: 20px;   /* marge body + positionnements nav / footer */
  --col-split:   45%;    /* coupure 2 colonnes : nav-second et page-content */
  --radius-pill: 100px;  /* rayon des étiquettes tags et filtres */

  /* ─── Thème — modifier ces deux variables pour personnaliser ─── */
  --theme: #000000;   /* couleur sombre */
  --ink:   #f0ebe4;   /* couleur claire */

  /* Mode clair (défaut) */
  --bg:         var(--ink);
  --text:       var(--theme);
  --text-muted: #555550;
  --border:     var(--theme);
}

html.dark-mode {
  --bg:         var(--theme);
  --text:       var(--ink);
  --text-muted: #888880;
  --border:     var(--ink);
}


/* ============================================
   3. BASE
   ============================================ */

/* Réserve l'espace de la barre de scroll pour éviter les sauts de layout */
html {
  scrollbar-gutter: stable;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font:        25px / var(--leading) var(--font-sans);
  margin:      0;
  padding:     var(--page-margin);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:  background 0.25s, color 0.25s;
}

/* Les titres ont un poids gras par défaut — on l'écrase explicitement */
h1, h2, h3 {
  font:    25px / var(--leading) var(--font-sans);
  margin:  0 0 var(--leading);
  padding: 0;
}

p  { margin: 0; }
ul, ol { padding-left: 1.2em; }

a {
  color:           var(--text);
  text-decoration: none;
}

a:hover { color: var(--text-muted); }

/* Focus visible uniquement au clavier */
a:focus-visible,
button:focus-visible {
  outline:        1px solid var(--text);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) { outline: none; }

/* Accessibilité — contenu visible uniquement pour les lecteurs d'écran */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* ============================================
   4. NAVIGATION
   ============================================ */

.site-nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  padding:    var(--nav-padding);
  z-index:    100;
  background: var(--bg);
  transition: background 0.25s;
}

.site-nav ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

.site-nav a {
  display: block;
  -webkit-tap-highlight-color: transparent;
}

/* 4 items positionnés en absolu sur toute la largeur */
.nav-first,
.nav-second,
.nav-third,
.nav-fourth {
  position: absolute;
  top:      15px;
}

.nav-first  { left: var(--page-margin); }
.nav-second { left: calc(var(--col-split) + var(--page-margin)); }
.nav-third  { left: calc(70% + var(--page-margin)); }
.nav-fourth { right: var(--page-margin); }


/* ============================================
   5. CONTENU (pages texte : about, contact…)
   ============================================ */

.page-content {
  position:       absolute;
  top:            var(--content-top);
  left:           calc(var(--col-split) + var(--page-margin));
  width:          calc(45vw - 2 * var(--page-margin));
  max-width:      550px;
  padding-bottom: 120px;
}


/* ============================================
   6. ACTUALITÉS (tiroir — niveau 1, grille 2 colonnes)
   ============================================ */

/* Décale le tiroir actualités sous la nav fixe */
.actualites-drawer {
  margin-top: var(--content-top);
}

.actualites {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
}

.actualite-card__img-link {
  display: block;
}

/* Légende + tags sous l'image */
.actualite-card__meta {
  display:     flex;
  align-items: baseline;
  gap:         10px;
  padding-top: calc(var(--leading) / 2);
  flex-wrap:   wrap;
}

.actualite-card__title {
  font-family: var(--font-mono);
  font-size:   13px;
}

.actualite-card__img {
  width:   100%;
  height:  auto;
  display: block;
}


/* ============================================
   7. TIROIRS (accordéon home — niveau 1)
   ============================================ */

.drawers {
  padding-bottom: 120px;
}

/* Animation de la hauteur des <details> — CSS pur, navigateurs récents */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .drawer > .drawer__projects,
  .project > .project__gallery {
    transition: height 0.3s ease;
  }
}

.drawer {
  border-top: 1px solid var(--border);
}

.drawer:last-child {
  border-bottom: 1px solid var(--border);
}

.drawer > summary.drawer__title {
  display:     block;
  list-style:  none;
  padding:     12px 0;
  cursor:      pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.drawer > summary.drawer__title::-webkit-details-marker,
.drawer > summary.drawer__title::marker { display: none; }

.drawer > .drawer__projects {
  overflow: hidden;
  height:   0;
}

.drawer[open] > .drawer__projects {
  height: auto;
}


/* ============================================
   8. PROJETS (dans tiroirs — niveau 2)
   ============================================ */

.drawer__projects {
  padding: 8px 0 20px;
}

.project > summary.project__header {
  position:    relative;
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         6px 14px;
  list-style:  none;
  padding:     2px 0 2px var(--leading);
  cursor:      pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.project > summary.project__header::before {
  content:     "·";
  position:    absolute;
  left:        0;
  top:         50%;
  transform:   translateY(-50%);
  font-family: var(--font-mono);
  font-size:   13px;
  line-height: 1;
}

.project > summary.project__header::-webkit-details-marker,
.project > summary.project__header::marker { display: none; }

.project__title {
  flex:        1;
  font-family: var(--font-mono);
  font-size:   13px;
}

.project__tags {
  display:    flex;
  gap:        4px;
  flex-wrap:  wrap;
  margin-top: 16px;
}

.project > .project__gallery {
  overflow: hidden;
  height:   0;
}

.project[open] > .project__gallery {
  height: auto;
}


/* ============================================
   9. GALERIE (images + tags)
   ============================================ */

.project__gallery {
  padding: 12px 0 24px;
}

/* Frise horizontale scrollable sans scrollbar */
.project__imgs {
  display:         flex;
  gap:             20px;
  overflow-x:      auto;
  scrollbar-width: none;
}

.project__imgs::-webkit-scrollbar { display: none; }

.project__img {
  height:      67.5vh;
  width:       auto;
  max-height:  72vh;
  flex-shrink: 0;
  display:     block;
}

.project__desc {
  margin-top:   var(--leading);
  text-align:   left;
  max-width:    550px;
  margin-left:  auto;
  margin-right: auto;
}

/* Tags en pills arrondies — IBM Plex Mono */
.tag-pill {
  display:       inline-block;
  font:          11px / 18px var(--font-mono);
  color:         var(--text);
  border:        1px solid var(--border);
  border-radius: var(--radius-pill);
  padding:       1px 8px;
  white-space:   nowrap;
}


/* ============================================
   10. GALERIE DIRECTE DE TIROIR (direct: true)
   ============================================ */

/* Frise de cartes image+légende — scrollable horizontalement */
.drawer__items {
  display:         flex;
  overflow-x:      auto;
  scrollbar-width: none;
  gap:             20px;
  padding:         12px 0 24px;
}

.drawer__items::-webkit-scrollbar { display: none; }

.drawer__item      { flex-shrink: 0; }
.drawer__item-link { display: block; }

.drawer__item-img {
  height:  67.5vh;
  width:   auto;
  display: block;
}

.drawer__item-meta {
  display:     flex;
  align-items: baseline;
  gap:         10px;
  padding-top: calc(var(--leading) / 2);
  flex-wrap:   wrap;
}

.drawer__item-title {
  font-family: var(--font-mono);
  font-size:   13px;
}


/* ============================================
   11. GRILLE WORK (page tous les projets)
   ============================================ */

.work-list {
  padding-top:    var(--content-top);
  padding-bottom: 120px;
}

/* Filtres en ligne — wrappables sur mobile, scrollables sur desktop */
.tag-filters {
  display:         flex;
  flex-wrap:       nowrap;
  overflow-x:      auto;
  gap:             8px;
  border-top:      1px solid var(--border);
  padding-top:     12px;
  margin-bottom:   calc(2 * var(--leading));
  scrollbar-width: none;
}

.tag-filters::-webkit-scrollbar { display: none; }

.tag-filter {
  font:               13px / 20px var(--font-mono);
  color:              var(--text-muted);
  background:         none;
  border:             1px solid var(--border);
  border-radius:      var(--radius-pill);
  padding:            0 12px;
  cursor:             pointer;
  -webkit-appearance: none;
  transition:         color 0.15s, border-color 0.15s;
}

.tag-filter:hover,
.tag-filter.is-active {
  color:        var(--text);
  border-color: var(--text);
}

.work-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   24px;
}

.work-card__link {
  display: block;
}

.work-card__img {
  width:   100%;
  height:  auto;
  display: block;
}

.work-card__meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         5px 10px;
  margin-top:  8px;
}

.work-card__title {
  font-family: var(--font-mono);
  font-size:   13px;
}

.work-card__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
}


/* ============================================
   12. PAGE PROJET individuelle (/work/[slug]/)
   ============================================ */

.project-page {
  padding-top:    var(--content-top);
  padding-bottom: 120px;
}

.project-page__header {
  display:               grid;
  grid-template-columns: var(--col-split) 1fr;
  align-items:           baseline;
  margin-bottom:         var(--leading);
}

.project-page__title { margin: 0; }

.project-page__imgs {
  display:         flex;
  flex-direction:  row;
  overflow-x:      auto;
  scrollbar-width: none;
  gap:             20px;
}

.project-page__imgs::-webkit-scrollbar { display: none; }

.project-page__img {
  display:     block;
  height:      70vh;
  width:       auto;
  flex-shrink: 0;
}


/* ============================================
   13. FOOTER & TOGGLES
   ============================================ */

/* Bandeau de fond fixe en bas — empêche les images de défiler sous les toggles */
body::after {
  content:        '';
  position:       fixed;
  bottom:         0;
  left:           0;
  right:          0;
  height:         55px;
  background:     var(--bg);
  z-index:        9;
  pointer-events: none;
  transition:     background 0.25s;
}

.footer-left {
  position: fixed;
  bottom:   var(--page-margin);
  left:     var(--page-margin);
  z-index:  10;
}

.mode-toggle {
  position:           fixed;
  bottom:             25px;
  right:              var(--page-margin);
  z-index:            10;
  cursor:             pointer;
  border:             none;
  background:         none;
  padding:            0;
  width:              13px;
  height:             13px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  color:              var(--text);
  line-height:        0;
}

.mode-toggle svg { display: block; width: 13px; height: 13px; }


/* ============================================
   14. DESKTOP — grille work
   ============================================ */

@media screen and (min-width: 801px) {
  .work-grid {
    grid-auto-rows: 240px auto;
  }

  .work-card {
    display:               grid;
    grid-row:              span 2;
    grid-template-rows:    subgrid;
  }

  .work-card__img {
    height:      240px;
    width:       100%;
    object-fit:  cover;
  }
}

/* ============================================
   15. MOBILE (≤ 800px)
   ============================================ */

@media screen and (max-width: 800px) {
  :root {
    --leading:     26px;
    --nav-padding: calc(4 * var(--leading)); /* nav verticale empilée */
  }

  body {
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
  }

  /* Nav en flux normal (non fixed) */
  .site-nav {
    position:    static;
    flex-shrink: 0;
  }

  /* Items de nav empilés verticalement */
  .nav-second,
  .nav-third,
  .nav-fourth { left: var(--page-margin); right: auto; }

  .nav-second { top: calc(4 * var(--leading)); }
  .nav-third  { top: calc(5 * var(--leading)); }
  .nav-fourth { top: calc(6 * var(--leading)); }

  /* Contenus en flux normal — pas de décalage pour la nav fixe */
  .page-content {
    position:  static;
    width:     100%;
    max-width: none;
    padding:   0;
    flex:      1;
  }

  .work-list,
  .project-page { padding-top: var(--leading); }

  .project-page__header { grid-template-columns: 1fr; }

  .actualites-drawer {
    margin-top: 0;
  }

  .actualites {
    grid-template-columns: 1fr;
  }

  .drawers { flex: 1; }

  .project__img,
  .drawer__item-img {
    width:      100%;
    height:     auto;
  }

  /* Page projet — hauteur réduite en mobile */
  .project-page__img { height: 70vw; }

  /* Footer en barre horizontale */
  .site-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
  }

  .footer-left { position: static; padding: 0; }
  .mode-toggle { position: static; width: 13px; height: 13px; }

  .work-grid { grid-template-columns: 1fr; }

  .tag-filters {
    flex-wrap:  wrap;
    overflow-x: visible;
  }
}