/* ============================================================
   MAIN.CSS — Design System
   Blog photo automobile — Cormorant Garamond, minimal
   ============================================================ */


/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  /* Thème : toutes les couleurs du site partent d'ici. */
  color-scheme: light;
  --bg:           #f3f4f5;   /* fond : gris perle */
  --bg-2:         #e8eaec;   /* survols, encadrés */
  --bg-3:         #dfe2e5;   /* fonds d'images en chargement */
  --frame:        #ffffff;   /* bord des tirages (Collection) */
  --border:       #dcdfe2;
  --border-light: #e6e8ea;

  --ink:          #121416;   /* texte principal */
  --ink-2:        #3a3e43;
  --ink-3:        #565b61;
  --ink-4:        #5d6268;

  --shadow-soft:   rgba(0, 0, 0, 0.06);
  --shadow-strong: rgba(0, 0, 0, 0.12);

  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;

  --nav-h:        60px;
  --col:          720px;      /* largeur colonne texte */
  --col-wide:     1080px;     /* largeur large */

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* empêche le scroll horizontal sur tous les navigateurs */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

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

/* Freins basiques contre l'enregistrement des photos — dissuasifs, pas
   une vraie protection (techniquement impossible : le navigateur doit
   recevoir l'image pour l'afficher, donc récupérable via l'inspecteur). */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

/* ─── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
}

/* Sur les pages hero dark, on peut overrider via .nav--over-dark */
.nav--over-dark {
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.4s var(--ease-in-out), border-color 0.4s var(--ease-in-out);
}

.nav--over-dark.scrolled,
.nav--over-dark.light,
.nav--over-dark.menu-open {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--border-light);
}

.nav__logo {
  font-family: var(--font-serif);
  /* px fixe : les pages articles ont un root font-size plus grand
     (html:has(.a-hero) dans article.css), donc un rem ici donnerait
     un logo plus gros que sur les autres pages. */
  font-size: 21.85px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Sur fond sombre le logo est blanc */
.nav--over-dark:not(.scrolled):not(.light):not(.menu-open) .nav__logo { color: #fff; }
.nav--over-dark:not(.scrolled):not(.light):not(.menu-open) .nav__link  { color: rgba(255,255,255,0.7); }
.nav--over-dark:not(.scrolled):not(.light):not(.menu-open) .nav__link:hover { color: #fff; }
.nav--over-dark:not(.scrolled):not(.light):not(.menu-open) .nav__toggle span { background: #fff; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 47.5px;
}

/* ─── Bouton menu mobile (masqué au-dessus de 480px) ────── */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
}

.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-in-out), opacity 0.2s;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__link {
  font-family: var(--font-sans);
  /* px fixe pour la même raison que .nav__logo */
  font-size: 13.3px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.2s;
}

.nav__link:hover,
.nav__link.active { color: var(--ink); }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ─── Selection ──────────────────────────────────────────── */
::selection { background: var(--ink); color: var(--bg); }

/* ─── Transition de page ─────────────────────────────────── */
/* Fondu d'entrée : identique à l'ancien pageEnter() de main.js, mais joué dès
   le premier rendu. « backwards » ne garde aucun transform après l'animation
   (un transform sur body casserait les éléments position: fixed). */
body { animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
}

.page-transition-out {
  animation: pageOut 0.4s var(--ease-in-out) forwards;
}

@keyframes pageOut {
  to { opacity: 0; transform: translateY(-12px); }
}

/* ─── Reveal au scroll (Apple-style) ─────────────────────── */
.reveal {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Délais d'entrée échelonnés */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ─── Wipe reveal sur images ─────────────────────────────── */
.img-reveal {
  overflow: hidden;
}

.img-reveal img {
  transform: scale(1.04);
  transition: transform 0.9s var(--ease-out);
}

.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.7s var(--ease-out);
}

/* Image reveal déclenchée */
.img-reveal.visible::after { transform: scaleX(0); }
.img-reveal.visible img    { transform: scale(1); }

/* La div parente doit être position:relative pour le ::after */
.img-reveal { position: relative; }

/* ─── Barre de progression de lecture ───────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--ink);
  z-index: 999;
  transition: width 0.1s linear;
  transform-origin: left;
  pointer-events: none;
}

/* ─── Utilitaires ────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.nav__logo,
.nav__link { white-space: nowrap; }

/* Seuil calé sur la largeur réelle du menu à 4 liens (~765 px en taille bureau). */
@media (max-width: 860px) {
  .nav { padding: 0 1.25rem; }
  .nav__logo { font-size: 18px; }
  .nav__links { gap: 12px; }
  .nav__link { font-size: 11px; letter-spacing: 0.06em; }
}

/* Le panneau plein écran ci-dessous est un FRÈRE de <nav>, pas un enfant :
   nav a un fond flou (backdrop-filter) qui, comme un transform ou un filter,
   devient le bloc conteneur de tout descendant en position fixed — un panneau
   fixed logé dans nav resterait donc piégé dans les 60px de hauteur de la
   barre au lieu de couvrir l'écran. En le sortant de nav, il se positionne
   normalement par rapport à la fenêtre. */
.nav__mobile-panel {
  display: none;
}

@media (max-width: 480px) {
  .nav__toggle { display: flex; }
  .nav__links { display: none; }

  .nav__mobile-panel {
    display: flex;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: 99;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0 1.5rem;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }

  .nav__mobile-panel.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  }

  .nav__mobile-panel .nav__link {
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    color: var(--ink);
  }
}