@charset "utf-8";
/* =========================================================================
   MF PALETTES AMENAGEMENT — styles.css
   Direction artistique : « Au fil du bois » x cadres façon Hôtel Le Bellevue.
   Le site raconte l'histoire du bois sauvé à la 1re personne ; chaque photo
   est un TIRAGE ENCADRÉ accroché sur un mur de galerie.

   Principes :
   - Mobile-first ABSOLU (99 % des visites sur téléphone). Le CSS de base est
     écrit pour le mobile ; les @media n'ajoutent que des enrichissements.
   - Papier clair chaud DOMINANT, très aéré. Le taupe est RÉSERVÉ aux murs de
     galerie. Encre near-black CHAUDE (jamais #000).
   - Accent UNIQUE caramel : filets 1px, liens qui se déroulent, :focus-visible.
     Zéro vert, zéro aplat coloré. La chaleur vient des PHOTOS et des CADRES.
   - Typo à voix trois : SERIF = la voix de Fabrice, SANS = la lecture,
     MONO = le relevé documentaire.
   - Zéro dépendance externe : aucune CDN, aucun Google Fonts. Piles système
     élégantes en attendant les .woff2 locaux.

   Sommaire
   00. @font-face (commentés, prêts)     08. En-tête & navigation
   01. Tokens :root                      09. Pied de page
   02. Reset & bases                     10. Cadres (.frame) — SIGNATURE
   03. Accessibilité                     11. Mur de galerie (.gallery-wall)
   04. Layout (.container/.section)      12. Grille média & réalisations
   05. Filet vertical (.grain-line)      13. Manifeste
   06. Typographie canonique             14. Timeline
   07. Boutons                           15. Références
                                         16. Contact & formulaire
                                         17. Lightbox
                                         18. Révélation au scroll & motion
                                         19. Impression
   ========================================================================= */


/* =========================================================================
   00. @font-face — PRÊTS À L'EMPLOI (décommenter quand les .woff2 sont posés
       dans assets/fonts/). Tant qu'ils sont commentés, les piles système
       ci-dessous rendent un résultat élégant IMMÉDIATEMENT.
   ========================================================================= */
/*
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2-variations"),
       url("../fonts/newsreader-500.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2-variations"),
       url("../fonts/newsreader-italic-500.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter var";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
*/


/* =========================================================================
   01. TOKENS :root — valeurs imposées, vérifiées WCAG.
   ========================================================================= */
:root {
  /* Papier & mur -------------------------------------------------------- */
  --paper:      #F3EFE8;
  --paper-2:    #ECE6DC;
  --wall:       #6E5B49;   /* taupe chaud profond du mur de galerie (texte clair conforme AA) */
  --wall-ink:   #FBF8F3;   /* encre claire sur le mur (grands titres) */
  --wall-line:  rgba(251,248,243,.5);

  /* NOTE ACCESSIBILITÉ : #FBF8F3 sur #9C8674 = 3.26:1 (AA « grand texte »
     seulement). Sur les murs, wall-ink est réservé aux GRANDS titres serif.
     Si un jour un PETIT texte doit vivre sur le mur, décommenter la ligne
     ci-dessous : taupe assombri à 4.7:1, AA pour toutes les tailles. */
  /* --wall: #806C5A; */

  /* Encres -------------------------------------------------------------- */
  --ink:    #1E1A15;   /* near-black CHAUD — jamais #000 */
  --ink-2:  #57514A;
  --muted:  #6E685E;
  --line:   rgba(30,26,21,.15);

  /* Accent caramel & matières du cadre ---------------------------------- */
  --caramel:      #B0703A;   /* filets, survols, focus */
  --caramel-link: #8A4B1E;   /* liens inline (>= 4.5:1 sur papier) */
  --frame:        #221C16;   /* bois quasi-noir du cadre */
  --mat:          #FCFBF8;   /* passe-partout / marie-louise */

  /* Familles ------------------------------------------------------------ */
  --serif: "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:  "Inter var",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:  "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* Échelle typographique fluide (mobile-first, confortable dès 360px) --- */
  --fs-eyebrow: .78rem;
  --fs-body:    1.0625rem;                                   /* ~17px */
  --fs-lead:    clamp(1.14rem, .6rem + 1.6vw, 1.4rem);
  --fs-h2:      clamp(1.7rem, 1.1rem + 2.9vw, 2.7rem);
  --fs-display: clamp(2.4rem, 1.2rem + 6vw, 4.9rem);
  --lh-tight:   1.08;
  --lh-body:    1.7;
  --measure:    66ch;                                        /* mesure de lecture 62–70ch */

  /* Rythme & gouttières fluides ---------------------------------------- */
  --space-section: clamp(3.5rem, 2rem + 8vw, 8rem);
  --space-block:   clamp(1.5rem, 1rem + 3vw, 3rem);
  --gap:           clamp(1rem, .6rem + 2vw, 2rem);
  --container:     72rem;
  --gutter:        clamp(1.15rem, .5rem + 3.5vw, 3rem);

  /* Cadres — matières & ombre douce chaude ------------------------------ */
  --frame-wood: clamp(10px, 2.5vw, 18px);   /* épaisseur du « bois »        */
  --frame-mat:  clamp(12px, 4vw, 30px);     /* largeur du passe-partout     */
  --shadow-frame: 0 16px 34px -12px rgba(34,28,22,.45);
  --shadow-frame-lg: 0 26px 60px -18px rgba(34,28,22,.55);
  --shadow-soft:  0 10px 30px -18px rgba(34,28,22,.4);

  /* Mouvement (sobre, lent, ease-out) ---------------------------------- */
  --ease: cubic-bezier(.16,.68,.28,1);
  --dur:  .7s;

  /* Angles NETS — aucune carte arrondie. Exceptions minimes gérées local. */
  --radius: 0px;

  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  accent-color: var(--caramel);
  tab-size: 2;
}


/* =========================================================================
   02. RESET & BASES
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: hidden;                 /* zéro scroll horizontal, jamais */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Images & médias fluides */
img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
img { font-style: italic; color: var(--muted); }   /* alt élégant si média manquant */

/* Formulaires héritent de la typo */
input, button, textarea, select { font: inherit; color: inherit; }

/* Titres : la VOIX (serif), équilibre des césures */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--ink);
}

p { text-wrap: pretty; }

/* Un seul H1/page (rappel de discipline, pas une contrainte technique) */

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--space-block) 0;
}

ul, ol { list-style: none; padding: 0; }

/* ---- Liens inline : soulignés caramel qui SE DÉROULENT depuis la gauche - */
a {
  color: var(--caramel-link);
  text-decoration: none;
  background-image: linear-gradient(var(--caramel), var(--caramel));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease), color .3s var(--ease);
  padding-bottom: .06em;
}
a:hover,
a:focus-visible { background-size: 100% 1px; color: var(--ink); }

/* Éléments qui ne doivent PAS porter le déroulé caramel */
.btn, .nav__brand, .nav__link, .nav__cta,
.filter-btn, .skip-link, .work, .lightbox, .frame {
  background-image: none;
}

::selection { background: rgba(176,112,58,.22); color: var(--ink); }


/* =========================================================================
   03. ACCESSIBILITÉ
   ========================================================================= */
:focus-visible {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: .6rem;
  left: .6rem;
  z-index: 1000;
  transform: translateY(-160%);
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .04em;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   04. LAYOUT — .container / .section
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}
.section > .container > * + * { margin-top: var(--space-block); }

/* Surface papier alternative (sable un peu plus profond) */
.section--paper2 { background: var(--paper-2); }

/* Surface MUR de galerie (taupe chaud) — discipline stricte : réservée */
.section--wall {
  background: var(--wall);
  color: var(--wall-ink);
}
.section--wall h1,
.section--wall h2,
.section--wall h3,
.section--wall .display,
.section--wall .h2 { color: var(--wall-ink); }
.section--wall .eyebrow { color: var(--wall-ink); opacity: .85; }
.section--wall .lead,
.section--wall p { color: var(--wall-ink); }
.section--wall hr { background: var(--wall-line); }
.section--wall a { color: var(--wall-ink); }
.section--wall a:hover,
.section--wall a:focus-visible {
  color: var(--wall-ink);
  background-image: linear-gradient(var(--wall-ink), var(--wall-ink));
}


/* =========================================================================
   05. FILET VERTICAL — .grain-line (le grain qui porte la colonne)
   ========================================================================= */
.grain-line {
  width: 1px;
  align-self: stretch;
  min-height: 3rem;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line) 12%,
    var(--line) 88%,
    transparent
  );
  margin-inline: auto;
}
.section--wall .grain-line {
  background: linear-gradient(to bottom, transparent, var(--wall-line) 12%, var(--wall-line) 88%, transparent);
}


/* =========================================================================
   06. TYPOGRAPHIE CANONIQUE
   serif = la voix • sans = la lecture • mono = le relevé
   ========================================================================= */

/* Le RELEVÉ documentaire : dates, lieux, « Fig. », coordonnées, données. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7ch;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caramel-link);
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

/* Le TITRE de chapitre / héros — la voix de Fabrice */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 18ch;
  text-wrap: balance;
}

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.015em;
  max-width: 22ch;
  text-wrap: balance;
}

/* Le chapô / accroche — lecture, respire */
.lead {
  font-family: var(--sans);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
}

/* Colonne de lecture, FERRÉE À GAUCHE, portée par le grain (filet 1px) */
.rail {
  max-width: var(--measure);
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, .5rem + 2vw, 2rem);
  margin-left: 0;
}
.rail > * + * { margin-top: 1.1em; }
.rail p { color: var(--ink-2); }
.section--wall .rail { border-left-color: var(--wall-line); }
.section--wall .rail p { color: var(--wall-ink); }

/* Figure + légende documentaire */
.figure { margin: 0; }
.figure > * + .caption { margin-top: .85rem; }

.caption {
  font-family: var(--mono);
  font-size: .8em;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--muted);
  display: block;
}
.caption b, .caption strong { color: var(--caramel-link); font-weight: 500; }
.section--wall .caption { color: var(--wall-ink); opacity: .82; }

/* Le VERBATIM — la voix de Fabrice, serif ITALIQUE */
.verbatim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, .9rem + 1.9vw, 2rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 30ch;
  padding-left: clamp(1rem, .5rem + 2vw, 1.8rem);
  border-left: 2px solid var(--caramel);
}
.verbatim cite,
.verbatim footer {
  display: block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--wall .verbatim { color: var(--wall-ink); border-left-color: var(--wall-ink); }
.section--wall .verbatim cite,
.section--wall .verbatim footer { color: var(--wall-ink); opacity: .8; }


/* =========================================================================
   07. BOUTONS — cibles tactiles >= 44px, angles nets
   ========================================================================= */
.btn {
  --_bg: transparent;
  --_fg: var(--ink);
  --_bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6ch;
  min-height: 48px;
  padding: .85rem 1.5rem;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color .35s var(--ease),
              color .35s var(--ease),
              border-color .35s var(--ease),
              transform .35s var(--ease),
              box-shadow .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primaire : encre pleine, texte papier (aucun aplat coloré) */
.btn--primary {
  --_bg: var(--ink);
  --_fg: var(--paper);
  --_bd: var(--ink);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover {
  --_bg: #14110D;
  box-shadow: 0 14px 30px -14px rgba(34,28,22,.6);
}

/* Fantôme : hairline, s'ouvre en caramel au survol */
.btn--ghost {
  --_bg: transparent;
  --_fg: var(--ink);
  --_bd: var(--line);
}
.btn--ghost:hover { --_bd: var(--caramel); --_fg: var(--caramel-link); }

/* Boutons sur le mur */
.section--wall .btn--ghost { --_fg: var(--wall-ink); --_bd: var(--wall-line); }
.section--wall .btn--ghost:hover { --_fg: var(--wall-ink); --_bd: var(--wall-ink); }
.section--wall .btn--primary { --_bg: var(--paper); --_fg: var(--ink); --_bd: var(--paper); }


/* =========================================================================
   08. EN-TÊTE & NAVIGATION — sticky, devient .is-solid au scroll
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease),
              border-color .4s var(--ease),
              box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease);
}
.site-header.is-solid {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 0 rgba(30,26,21,.03), var(--shadow-soft);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 64px;
  padding-block: .55rem;
}
.nav > .nav__links { display: none; }        /* liens masqués sur mobile */

.nav__brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  margin-right: auto;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -.01em;
}
.nav__brand small {
  display: block;
  margin-top: .28rem;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .4rem + 1.4vw, 2.1rem);
  list-style: none;
}
.nav__link {
  position: relative;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;               /* CAPITALES espacées façon Bellevue */
  text-transform: uppercase;
  color: var(--ink-2);
  padding: .5rem 0;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: .1rem;
  width: 100%; height: 1px;
  background: var(--caramel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.15rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
  white-space: nowrap;
}
.nav__cta:hover,
.nav__cta:focus-visible { color: var(--caramel-link); border-color: var(--caramel); }

/* Téléphone cliquable dans la nav (relevé mono) */
.nav__tel {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* --- Nav mobile élégante : liens repliés, révélés via .is-open --------- */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-left: .25rem;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--ink);
}
.nav__toggle svg, .nav__toggle span { pointer-events: none; }

@media (max-width: 63.99em) {
  .nav__links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--gutter);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-frame);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav__links.is-open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__links .nav__link {
    width: 100%;
    padding: .95rem 0;
    font-size: 1rem;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--line);
  }
  .nav__links .nav__link::after { display: none; }
}

/* --- Desktop : liens en ligne, toggle masqué -------------------------- */
@media (min-width: 64em) {
  .nav > .nav__links { display: flex; }
  .nav__toggle { display: none; }
}


/* =========================================================================
   09. PIED DE PAGE
   ========================================================================= */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 2rem + 5vw, 5rem);
  font-size: .95rem;
}
.site-footer .container {
  display: grid;
  gap: var(--space-block);
}
.site-footer a { color: var(--paper); }
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff;
  background-image: linear-gradient(var(--caramel), var(--caramel));
}
.site-footer h2, .site-footer .h2 { color: var(--paper); }
.site-footer .eyebrow { color: var(--caramel); opacity: 1; }

.site-footer__brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
}
.site-footer__coords {
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.9;
  letter-spacing: .02em;
  color: rgba(243,239,232,.82);
}
.site-footer__coords a { display: inline-block; }

.site-footer__social {
  display: flex;
  gap: 1.2rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer__legal {
  padding-top: var(--space-block);
  border-top: 1px solid rgba(243,239,232,.16);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(243,239,232,.6);
  line-height: 1.8;
}

@media (min-width: 48em) {
  .site-footer .container {
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: start;
  }
  .site-footer__legal { grid-column: 1 / -1; }
}


/* =========================================================================
   10. CADRES — .frame / .frame__mat  ★ SIGNATURE (Hôtel Le Bellevue) ★
   Cadre bois quasi-noir + passe-partout blanc cassé + ombre douce chaude,
   angles NETS 90°. Cliquable -> lightbox.
   ========================================================================= */
.frame {
  --_lift: 0;
  display: block;
  background: var(--frame);
  padding: var(--frame-wood);
  box-shadow: var(--shadow-frame);
  border-radius: 0;                    /* angles nets, jamais arrondis */
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transform: translateY(var(--_lift));
  /* léger biseau du bois pour la crédibilité du cadre */
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
}
.frame__mat {
  display: block;
  background: var(--mat);
  padding: var(--frame-mat);
  /* creux discret du passe-partout */
  box-shadow: inset 0 0 0 1px rgba(34,28,22,.05),
              inset 0 1px 4px rgba(34,28,22,.06);
}
.frame__mat img {
  display: block;
  width: 100%;
  height: auto;
  /* la « vitre » : reflet très léger */
  box-shadow: inset 0 0 0 1px rgba(34,28,22,.08);
}

/* Portrait : ratio vertical façon tirage encadré debout */
.frame--portrait .frame__mat img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Placeholder « photo à venir » quand aucune image chargée */
.frame__mat img:not([src]),
.frame__mat img[src=""] {
  aspect-ratio: 4 / 3;
  min-height: 180px;
  background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 10px, var(--paper) 10px 20px);
}

/* --- État CLIQUABLE (ouvre la lightbox) ------------------------------ */
[data-lightbox] { cursor: zoom-in; }
.frame[data-lightbox]:hover { box-shadow: var(--shadow-frame-lg); }
.frame[data-lightbox]:hover { transform: translateY(calc(var(--_lift) - 4px)); }
[data-lightbox]:focus-visible { outline: 2px solid var(--caramel); outline-offset: 5px; }


/* =========================================================================
   11. MUR DE GALERIE — .gallery-wall
   Fond taupe, cadres accrochés. Mobile : empilement propre, centré.
   Desktop : le cadre du CENTRE plus grand et légèrement surélevé.
   ========================================================================= */
.gallery-wall {
  background: var(--wall);
  padding-block: clamp(2.5rem, 1.5rem + 6vw, 6rem);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 4vw, 3rem);
}
.gallery-wall .frame {
  width: 100%;
  max-width: 26rem;                    /* superbe même en une colonne */
  box-shadow: var(--shadow-frame-lg);
}
.gallery-wall .caption,
.gallery-wall .eyebrow { color: var(--wall-ink); text-align: center; }
.gallery-wall .figure { width: 100%; max-width: 26rem; }
.gallery-wall .figure .frame { max-width: none; }

@media (min-width: 64em) {
  .gallery-wall {
    flex-direction: row;
    align-items: center;               /* accrochage sur une ligne d'œil */
    justify-content: center;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    padding-block: clamp(5rem, 3rem + 6vw, 8rem);
  }
  .gallery-wall .frame,
  .gallery-wall .figure { max-width: 22rem; flex: 0 1 22rem; }

  /* Le cadre CENTRAL : plus grand + surélevé (exactement la référence) */
  .gallery-wall > .frame:nth-child(2),
  .gallery-wall > .figure:nth-child(2) {
    max-width: 30rem;
    flex-basis: 30rem;
    z-index: 2;
  }
  .gallery-wall > .frame:nth-child(2) { --_lift: -2.5rem; }
  .gallery-wall > .figure:nth-child(2) .frame { --_lift: -2.5rem; }

  /* Les cadres latéraux légèrement en retrait */
  .gallery-wall > .frame:nth-child(1),
  .gallery-wall > .figure:nth-child(1) .frame { --_lift: .75rem; }
  .gallery-wall > .frame:nth-child(3),
  .gallery-wall > .figure:nth-child(3) .frame { --_lift: .75rem; }
}


/* =========================================================================
   12. GRILLE MÉDIA & RÉALISATIONS — .media-grid / .work / filtres
   ========================================================================= */
.media-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile : une colonne */
  gap: clamp(1.6rem, 1rem + 3vw, 2.8rem);
}
@media (min-width: 40em) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .media-grid { grid-template-columns: repeat(3, 1fr); } }

/* Une réalisation = un tirage encadré + son relevé */
.work {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  transition: opacity .4s var(--ease);
}
.work__frame { align-self: stretch; }

.work__meta {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-left: .1rem;
}
.work__meta .work__title {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.work__meta .work__cat {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caramel-link);
}
.work__meta .work__material {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Filtrage : masqué par JS (repli ?cat= géré en PHP côté serveur) */
.work[hidden] { display: none !important; }
.work.is-hidden { display: none; }

/* --- Barre de filtres ------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-bottom: var(--space-block);
  border-bottom: 1px solid var(--line);
}
.filter-btn {
  min-height: 44px;
  padding: .55rem 1.05rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.filter-btn:hover { color: var(--ink); border-color: var(--caramel); }
.filter-btn[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}


/* =========================================================================
   13. MANIFESTE — récit à la 1re personne, fer à gauche, sur surface chaude
   ========================================================================= */
.manifesto {
  display: grid;
  gap: var(--space-block);
}
.manifesto .rail p { font-size: 1.08rem; }
.manifesto .verbatim { margin-top: var(--space-block); }
.manifesto__signature {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--caramel-link);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.section--wall .manifesto__signature { color: var(--wall-ink); border-top-color: var(--wall-line); }

@media (min-width: 64em) {
  .manifesto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  }
}


/* =========================================================================
   14. TIMELINE — jalons datés ; la date active « s'allume »
   ========================================================================= */
.timeline {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 1.75rem;
}
.timeline::before {                    /* le grain vertical qui porte le fil */
  content: "";
  position: absolute;
  left: 6px; top: .4rem; bottom: .4rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.timeline__item {
  position: relative;
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__item::before {              /* le nœud du fil */
  content: "";
  position: absolute;
  left: calc(-1.75rem + 2px);
  top: calc(clamp(1.4rem,1rem + 2vw,2.4rem) + .5rem);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--muted);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.timeline__item .timeline__year {
  display: block;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: .5rem;
  transition: color .4s var(--ease);
}
.timeline__item .timeline__title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: .5rem;
}
.timeline__item .timeline__desc {
  color: var(--ink-2);
  max-width: 58ch;
}

/* Jalon actif (survol/focus/.is-active) — la date s'allume en caramel */
.timeline__item:hover .timeline__year,
.timeline__item:focus-within .timeline__year,
.timeline__item.is-active .timeline__year { color: var(--caramel-link); }
.timeline__item:hover::before,
.timeline__item:focus-within::before,
.timeline__item.is-active::before {
  background: var(--caramel);
  border-color: var(--caramel);
  box-shadow: 0 0 0 4px rgba(176,112,58,.18);
}


/* =========================================================================
   15. RÉFÉRENCES — « historique d'exposition » (name-drop élégant)
   ========================================================================= */
.refs { display: grid; gap: var(--space-block); }
.ref-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.ref-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  font-weight: 500;
  color: var(--ink);
  transition: color .3s var(--ease), padding-left .35s var(--ease);
}
.ref-list li::before {                 /* numérotation façon catalogue */
  content: counter(ref, decimal-leading-zero);
  counter-increment: ref;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--caramel-link);
  min-width: 2.4rem;
}
.ref-list { counter-reset: ref; }
.ref-list li:hover { color: var(--caramel-link); padding-left: .9rem; }

@media (min-width: 48em) {
  .ref-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .ref-list { border-top: 0; }
}


/* =========================================================================
   16. CONTACT & FORMULAIRE — .contact / .contact__coords / .field
   ========================================================================= */
.contact { display: grid; gap: var(--space-block); }

.contact__coords {
  display: grid;
  gap: 1.1rem;
  font-family: var(--mono);
  font-size: .92rem;
  line-height: 1.6;
  letter-spacing: .01em;
}
.contact__coords dt {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .2rem;
}
.contact__coords dd { color: var(--ink); margin: 0; }
.contact__coords a { color: var(--ink); }
.contact__coords a:hover { color: var(--caramel-link); }

/* Champ de formulaire */
.field { display: grid; gap: .45rem; }
.field > label {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field > label .req { color: var(--caramel-link); }

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: .8rem .95rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--muted); }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--caramel);
  box-shadow: 0 0 0 3px rgba(176,112,58,.15);
  background: var(--paper-2);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: .8; }

/* Honeypot anti-spam : hors écran mais présent */
.field--honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Messages de retour serveur */
.form-note {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--caramel);
  background: var(--paper-2);
  font-size: .95rem;
}
.form-note--ok { border-left-color: var(--caramel); }
.form-note--error { border-left-color: var(--caramel-link); color: var(--caramel-link); }

@media (min-width: 64em) {
  .contact {
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: start;
  }
}
/* Une grille propre à l'intérieur du formulaire */
.contact form { display: grid; gap: 1.15rem; }
@media (min-width: 40em) {
  .contact form { grid-template-columns: 1fr 1fr; }
  .contact form .field--wide,
  .contact form .field:has(textarea),
  .contact form button { grid-column: 1 / -1; }
}


/* =========================================================================
   17. LIGHTBOX — .lightbox / .is-open  (le tirage encadré, agrandi)
   ========================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(20,17,13,.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox .frame {
  max-width: min(92vw, 60rem);
  max-height: 88vh;
  box-shadow: var(--shadow-frame-lg);
  transform: scale(.98);
  transition: transform .5s var(--ease);
}
.lightbox.is-open .frame { transform: scale(1); }
.lightbox .frame__mat img { max-height: calc(88vh - 4 * var(--frame-mat)); object-fit: contain; }

.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--wall-line);
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lightbox__close:hover { border-color: var(--paper); color: #fff; }

.lightbox__caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1rem, 3vw, 2rem);
  text-align: center;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(243,239,232,.85);
  padding-inline: 1rem;
}

/* Empêche le scroll du corps quand la lightbox est ouverte */
body.lb-open { overflow: hidden; }


/* =========================================================================
   18. RÉVÉLATION AU SCROLL & MOTION
   Contenu VISIBLE par défaut. L'animation ne s'active QUE si <html class="js">.
   Le tirage « se développe » à l'entrée : opacité 0->1 + zoom 1.02->1, une fois.
   ========================================================================= */

/* Par défaut (sans JS) : tout est visible, aucune transformation. */
[data-reveal] { opacity: 1; transform: none; }

/* Avec JS : état initial discret, puis révélation quand .is-visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Décalage doux d'un groupe (facultatif via style="--i:n") */
.js [data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }

/* Le développement du tirage : le cadre apparaît, l'image se resserre. */
.js .frame[data-reveal] .frame__mat img,
.js [data-reveal] .frame__mat img { transform: scale(1.02); transition: transform var(--dur) var(--ease); }
.js [data-reveal].is-visible .frame__mat img { transform: scale(1); }

/* Liens caramel qui se déroulent : déjà géré au niveau `a` (section 02). */

/* --- prefers-reduced-motion : TOUT neutralisé -------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal] .frame__mat img { transform: none !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================================
   19. IMPRESSION — sobre, sans cadres lourds ni fonds
   ========================================================================= */
@media print {
  .site-header, .site-footer, .filters, .lightbox, .nav__toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .frame { box-shadow: none; background: #fff; padding: 0; }
  .frame__mat { padding: 0; box-shadow: none; }
  a { color: #000; background: none; }
  .section { padding-block: 1.5rem; }
}

/* =========================================================================
   FIN — MF Palettes Aménagement. « Ce mec a une âme. »
   ========================================================================= */