/* ============================================================
   DA AURI — tokens + base
   À coller tel quel en haut du <style> du site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Inter+Tight:wght@500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Couleurs */
  --paper:        #F4F2EF;
  --paper-pure:   #FFFFFF;
  --ink:          #111111;
  --ink-deep:     #0E0E0E;
  --muted:        #6B6B6B;
  --rule:         #DDD8D1;
  --accent:       #B4441E;

  /* Sol inversé — le vert de cimaise des sections manifeste.
     Il remplace le noir : deux sols sur le site, pas trois. */
  --forest:          #112702;
  --forest-deep:     #0A1A01;
  --accent-on-dark:  #D96B3F;   /* terre cuite éclaircie : 4.7:1 sur vert */
  --muted-on-dark:   rgba(244, 242, 239, 0.62);
  --rule-on-dark:    rgba(244, 242, 239, 0.20);

  /* Typo */
  --font-display: 'Inter Tight', 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;

  --fs-display:   clamp(3rem, 9vw, 8.5rem);
  --fs-section:   clamp(1.75rem, 3.5vw, 3rem);
  --fs-body:      1rem;
  --fs-label:     0.6875rem;   /* 11px */

  /* Grille & espace */
  --gutter:       24px;
  --margin:       32px;
  --max:          1440px;
  --space-section: clamp(72px, 10vw, 180px);

  /* Mouvement — alignés sur les tokens de transitions-polish.
     Voir motion.md. Ne pas « corriger » : ces valeurs sont déjà les bonnes. */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1); /* = --ease-smooth-out */
  --dur:          500ms;  /* = --duration-very-slow — apparition au scroll */
  --dur-hover:    250ms;  /* = --duration-fast      — survols */
  --dur-close:    150ms;  /* = --duration-quick     — fermetures (lightbox) */
  --dur-stagger:   40ms;  /* = --duration-stagger   — décalage de grille */
  --dur-media:    600ms;  /* exception assumée      — zoom lent sur une toile */

  /* Recettes transitions-dev installées (voir references/motion.md) */
  --scale-fiche:     0.96;  /* = --scale-large        — 06-modal              */
  --dur-secousse-a:  80ms;  /* = --duration-micro     — 12-error-state-shake  */
  --dur-secousse-b:  60ms;  /*                          jambe de retour       */
  --dist-secousse:    6px;  /* = --distance-small     — 12-error-state-shake  */
  --dist-rattrapage:  4px;  /* = --distance-micro                             */
  --dur-toast-in:   500ms;  /* = --duration-very-slow — 22-toast              */
  --dur-toast-out:  350ms;  /* = --duration-medium                            */
  --dist-toast:       8px;  /* = --distance-base                              */
  --dur-image:      400ms;  /* = --duration-slow      — 14-skeleton-reveal    */
  --flou-image:       3px;  /* = --blur-medium                                */
  --dur-glisse:     250ms;  /* = --duration-fast      — 08-page-side-by-side  */
  --dist-glisse:      8px;  /* = --distance-base                              */

  /* 05-menu-dropdown — menu du téléphone. Repris des tokens ci-dessus. */
  --dropdown-open-dur:      var(--dur-hover);  /* = --duration-fast   (250 ms) */
  --dropdown-close-dur:     var(--dur-close);  /* = --duration-quick  (150 ms) */
  --dropdown-pre-scale:     0.97;              /* = --scale-medium             */
  --dropdown-closing-scale: 0.99;              /* = --scale-tiny               */
  --dropdown-ease:          var(--ease);       /* = --ease-smooth-out          */
}

@media (max-width: 768px) {
  :root { --margin: 20px; --gutter: 16px; }
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; border-radius: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.invert :focus-visible { outline-color: var(--paper); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Typo ---------- */

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0;
}

.display span {           /* le prénom à côté du mot fort */
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  line-height: 1;
}

.label sup { font-size: 0.7em; letter-spacing: 0; }

.text { max-width: 62ch; color: var(--ink); }
.text--muted { color: var(--muted); }

.serif-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-weight: 400;
}

/* ---------- Bandeau d'en-tête de bloc ---------- */

.blockhead {
  display: flex;
  flex-wrap: wrap;          /* sinon les deux micro-labels débordent sur mobile */
  gap: 4px 16px;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}

/* ---------- Section inversée ----------
   Fond vert de cimaise, texte papier. 1 ou 2 par page maximum.
   Sur ce fond, --muted (3.0:1) et --accent (2.9:1) sont ILLISIBLES :
   les surcharges ci-dessous sont obligatoires, pas décoratives. */

.invert {
  background: var(--forest);
  color: var(--paper);
}
.invert .label,
.invert .text--muted  { color: var(--muted-on-dark); }
/* .text fixe explicitement --ink : sans cette reprise, le texte courant
   s'affiche en quasi-noir sur le vert (1.1:1). Ne pas la retirer. */
.invert .text         { color: var(--paper); }
.invert .blockhead    { border-color: var(--rule-on-dark); }
.invert .meta,
.invert .meta__row    { border-color: var(--rule-on-dark); }
/* --muted tombe à 3.0:1 sur le vert : les intitulés seraient illisibles. */
.invert .meta__row dt { color: var(--muted-on-dark); }
.invert .status--sold { color: var(--accent-on-dark); }
.invert .btn {
  background: var(--paper);
  color: var(--forest);
  border-color: var(--paper);
}
.invert .btn:hover { background: transparent; color: var(--paper); }

/* ---------- Métadonnées d'œuvre ---------- */

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

.meta__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.meta__row dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0; }
.meta__row dd { margin: 0; font-size: 0.875rem; text-align: right; }

.status { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; }
.status--sold { color: var(--accent); }

/* ---------- Bouton ---------- */

.btn {
  display: inline-block;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}

.btn:hover { background: transparent; color: var(--ink); }

/* ---------- Média ---------- */

.media { overflow: hidden; }
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease),
              opacity   var(--dur-image) var(--ease),
              filter    var(--dur-image) var(--ease);
}

/* 14-skeleton-reveal — les images pèsent lourd : elles se posent en fondu au
   lieu d'apparaître d'un bloc. Comme .reveal, c'est conditionné à .js : sans
   JavaScript, rien n'est jamais masqué. */
.js .media img,
.js .fiche__media img             { opacity: 0; filter: blur(var(--flou-image)); }
.js .media img.est-chargee,
.js .fiche__media img.est-chargee { opacity: 1; filter: blur(0); }

/* La grande image de la fiche n'est pas dans .media : elle a besoin de sa
   propre transition. */
.js .fiche__media img {
  transition: opacity var(--dur-image) var(--ease),
              filter  var(--dur-image) var(--ease);
}
.media:hover img { transform: scale(1.02); }

/* ---------- Apparition au scroll ----------
   Le masquage est conditionné à la classe .js, posée par le script lui-même.
   Sans JavaScript — ou si le script échoue — rien n'est jamais caché : la page
   reste lisible au lieu de rester blanche. */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Spécificité alignée sur .js .reveal, sinon les blocs resteraient masqués. */
  .js .reveal, .reveal { opacity: 1; transform: none; }
  /* Même règle pour toute classe qui démarre invisible. */
  .js .media img,
  .js .fiche__media img { opacity: 1; filter: none; }
  .fiche.est-ouverte   { opacity: 1; transform: none; }
  .form__reponse.est-visible { opacity: 1; transform: none; filter: none; }
  .coche.est-tracee { animation: none !important; opacity: 1; }
  .coche.est-tracee svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .fiche__contenu { transition: none !important; }
}