/* ════════════════════════════════════════════════════════════════════════
   Les œuvres de Cat — feuille de style unique
   Palette « atelier » : toile de lin, bleu de Prusse, terre de Sienne.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:      #ece4d6;   /* toile de lin, fond général        */
  --paper-soft: #f5f0e6;   /* cartels et cartes, plus clair     */
  --wall:       #e4dccd;   /* mur de galerie, légèrement + sourd */
  --ink:        #211e1a;   /* texte principal, noir chaud       */
  --ink-soft:   #6c6358;   /* légendes, texte secondaire        */
  --prussian:   #1b3a4b;   /* bleu de Prusse, accent principal  */
  --sienna:     #a8572f;   /* terre de Sienne, accent chaud     */
  --line:       rgba(33,30,26,.14);
  --frame:      #fbf8f1;   /* marie-louise (passe-partout)      */
  --shadow:     0 18px 40px -22px rgba(27,32,38,.55);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  /* grain de toile très discret */
  background-image:
    radial-gradient(rgba(33,30,26,.025) 1px, transparent 1px);
  background-size:4px 4px;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a{ color:inherit; }

/* ─── Cartel / placard : le motif récurrent ───────────────────────────── */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sienna);
  margin:0 0 .6rem;
}

/* ════════ EN-TÊTE ════════════════════════════════════════════════════ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(236,228,214,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.wordmark{
  font-family:var(--serif);
  font-size:clamp(1.3rem,3.4vw,1.7rem);
  font-weight:600; font-style:italic;
  letter-spacing:.01em; color:var(--prussian);
  text-decoration:none; white-space:nowrap;
}
.nav{ display:flex; gap:clamp(.9rem,2.5vw,2rem); flex-wrap:wrap; }
.nav a{
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  padding:.3rem 0; position:relative; opacity:.8;
  transition:opacity .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--sienna); transition:right .25s ease;
}
.nav a:hover, .nav a:focus-visible{ opacity:1; }
.nav a:hover::after, .nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ opacity:1; color:var(--prussian); }

/* ════════ STRUCTURE GÉNÉRALE ═════════════════════════════════════════ */
main{ max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,2.5rem); }

.page-head{ text-align:center; margin-bottom:clamp(2rem,5vw,3.5rem); }
.page-head h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.05;
  margin:.2rem 0 .5rem;
}
.page-head p{ color:var(--ink-soft); max-width:46ch; margin:0 auto; }

/* ─── Cadre (le motif du tableau accroché au mur) ──────────────────────── */
.frame{
  background:var(--frame);
  padding:clamp(.5rem,1.4vw,1rem);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.frame img{ display:block; width:100%; height:auto; }

/* ════════ ACCUEIL ════════════════════════════════════════════════════ */
.hero{
  min-height:calc(100vh - 200px);
  display:grid; place-items:center; text-align:center;
  padding-top:clamp(1rem,4vw,2rem);
}
.hero__wall{ max-width:560px; width:100%; }
.hero__frame{ margin:0 auto 1.6rem; max-width:480px; }
.hero h1{
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(2.4rem,7vw,4rem); line-height:1; margin:.4rem 0 .4rem;
}
.hero .oeuvre-titre{
  font-family:var(--serif); font-size:1.35rem; color:var(--ink);
  margin:.2rem 0 0;
}
.hero__intro{ color:var(--ink-soft); max-width:42ch; margin:1.1rem auto 1.8rem; }

.btn{
  display:inline-block; font-family:var(--sans);
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-soft); background:var(--prussian);
  padding:.85rem 1.6rem; text-decoration:none;
  transition:background .2s, transform .2s;
}
.btn:hover{ background:#16313f; transform:translateY(-2px); }
.btn--ghost{
  background:transparent; color:var(--prussian);
  border:1px solid var(--prussian);
}
.btn--ghost:hover{ background:var(--prussian); color:var(--paper-soft); }

/* ════════ GALERIES (3 catégories) ════════════════════════════════════ */
.tiles{
  display:grid; gap:clamp(1.4rem,3.5vw,2.4rem);
  grid-template-columns:repeat(3,1fr);
}
.tile{ text-decoration:none; color:inherit; display:block; }
.tile__frame{ position:relative; overflow:hidden; }
.tile__frame .frame{ transition:transform .4s ease, box-shadow .4s ease; }
.tile__img{
  aspect-ratio:3/4; overflow:hidden; background:var(--wall);
}
.tile__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tile:hover .frame{ transform:translateY(-6px); box-shadow:0 26px 50px -24px rgba(27,32,38,.6); }
.tile:hover .tile__img img{ transform:scale(1.05); }
.tile__cartel{ text-align:center; margin-top:1.1rem; }
.tile__cartel h2{
  font-family:var(--serif); font-weight:500; font-size:1.7rem; margin:.1rem 0 .3rem;
}
.tile__cartel p{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.tile__count{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sienna); font-weight:600;
}

/* ════════ GALERIE D'UNE CATÉGORIE (mosaïque) ═════════════════════════ */
.gallery{
  column-count:3; column-gap:clamp(.9rem,2.2vw,1.6rem);
}
.card{
  break-inside:avoid; margin:0 0 clamp(.9rem,2.2vw,1.6rem);
  cursor:zoom-in; border:0; background:transparent; padding:0; width:100%;
  display:block; text-align:left;
}
.card .frame{ transition:transform .3s ease, box-shadow .3s ease; }
.card:hover .frame{ transform:translateY(-4px); box-shadow:0 24px 44px -22px rgba(27,32,38,.6); }
.card figcaption{
  font-family:var(--serif); font-size:1.05rem; color:var(--ink);
  margin:.55rem .2rem 0; line-height:1.3;
}

.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--prussian); text-decoration:none; margin-top:3rem;
}
.back-link:hover{ color:var(--sienna); }

/* ════════ LIGHTBOX ═══════════════════════════════════════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(24,21,18,.92); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
}
.lightbox.open{ display:flex; }
.lightbox__fig{ margin:0; max-width:min(1100px,92vw); text-align:center; }
.lightbox__img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  background:var(--frame); padding:clamp(.4rem,1vw,.8rem);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); display:block; margin:0 auto;
}
.lightbox__cartel{
  margin-top:1.1rem; color:var(--paper);
  font-family:var(--serif); font-size:1.3rem;
}
.lightbox__cartel .eyebrow{ color:#d8946a; }
.lightbox button{
  position:absolute; background:transparent; border:0; color:var(--paper);
  font-size:2.2rem; line-height:1; cursor:pointer; padding:.5rem .8rem;
  opacity:.75; transition:opacity .2s; font-family:var(--serif);
}
.lightbox button:hover{ opacity:1; }
.lb-close{ top:.6rem; right:1rem; font-size:1.8rem; }
.lb-prev{ left:.4rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:.4rem; top:50%; transform:translateY(-50%); }

/* ════════ BIOGRAPHIE ═════════════════════════════════════════════════ */
.bio{
  display:grid; grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.bio__portrait .frame{ position:sticky; top:96px; }
.bio__cartel{
  text-align:center; margin-top:.9rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.bio__text h1{
  font-family:var(--serif); font-weight:500; font-size:clamp(2rem,5vw,3rem);
  margin:0 0 1.2rem; line-height:1.05;
}
.bio__text p{ margin:0 0 1.15rem; font-size:1.05rem; color:#332f29; max-width:62ch; }

/* ════════ CONTACT ════════════════════════════════════════════════════ */
.contact{
  max-width:560px; margin:0 auto; text-align:center;
  background:var(--paper-soft); border:1px solid var(--line);
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,3.5rem);
  box-shadow:var(--shadow);
}
.contact h1{
  font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,6vw,3.4rem);
  margin:.3rem 0 1rem;
}
.contact p{ color:var(--ink-soft); margin:0 auto 2rem; max-width:40ch; }
.contact__mail{
  font-family:var(--serif); font-size:clamp(1.3rem,4vw,1.9rem);
  color:var(--prussian); text-decoration:none; border-bottom:1px solid var(--sienna);
  padding-bottom:.15rem; word-break:break-word;
}
.contact__mail:hover{ color:var(--sienna); }

/* ════════ PIED DE PAGE ═══════════════════════════════════════════════ */
.journal-teaser{
  display:grid; gap:.3rem; margin:2.5rem auto 0; max-width:480px;
  padding:1.25rem 1.5rem; text-align:left; text-decoration:none;
  color:var(--ink); background:var(--paper-soft); border-left:2px solid var(--sienna);
}
.journal-teaser span, .journal-date, .journal-work span{
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sienna);
}
.journal-teaser strong{ font-family:var(--serif); font-size:1.45rem; font-weight:500; color:var(--prussian); }
.journal-teaser em{ color:var(--ink-soft); font-style:normal; font-size:.9rem; }
.journal-teaser:hover strong{ color:var(--sienna); }

.journal-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3.5vw,2.5rem); align-items:start; }
.journal-card{ background:var(--paper-soft); border:1px solid var(--line); box-shadow:var(--shadow); }
.journal-card__image{ display:block; padding:.5rem; margin:0; border:0; box-shadow:none; }
.journal-card__image img{ aspect-ratio:4/3; object-fit:cover; }
.journal-card__content{ padding:1.2rem 1.3rem 1.4rem; }
.journal-card__content h2{ margin:.25rem 0 .6rem; font-family:var(--serif); font-size:1.8rem; font-weight:500; line-height:1.05; }
.journal-card__content h2 a{ text-decoration:none; }
.journal-card__content > p:not(.journal-date){ color:var(--ink-soft); margin:0 0 1.2rem; font-size:.93rem; }
.journal-card__link{ color:var(--prussian); font-size:.72rem; font-weight:700; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.journal-card__link:hover{ color:var(--sienna); }

.journal-article{ max-width:820px; margin:0 auto; }
.journal-article__back{ margin:0 0 2rem; }
.journal-article .page-head{ margin-bottom:2rem; }
.journal-article__image{ margin:0 auto; max-width:720px; }
.journal-article__body{ max-width:64ch; margin:2.5rem auto 0; font-size:1.07rem; }
.journal-article__body > p{ margin:0 0 1.2rem; }
.journal-signature{ margin-top:2.4rem !important; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--ink-soft); font-family:var(--serif); font-size:1.25rem; }
.journal-signature strong{ color:var(--prussian); }
.journal-work{ display:flex; flex-direction:column; gap:.15rem; width:max-content; margin-top:2rem; padding:1rem 1.2rem; background:var(--paper-soft); border-left:2px solid var(--sienna); color:var(--prussian); text-decoration:none; }
.journal-work strong{ font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.journal-work:hover strong{ color:var(--sienna); }

.journal-editor-link{ display:flex; flex-direction:column; align-items:center; gap:.8rem; margin:3rem auto 0; text-align:center; color:var(--ink-soft); font-size:.85rem; }

.atelier > .back-link{ margin-top:0; }
.atelier__layout{ display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,2fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.atelier__articles, .atelier__editor, .atelier__download{ background:var(--paper-soft); border:1px solid var(--line); box-shadow:var(--shadow); padding:clamp(1.25rem,3vw,2rem); }
.atelier__articles h2, .atelier-form h2, .atelier__download h2{ margin:0 0 1rem; font-family:var(--serif); font-size:1.8rem; font-weight:500; }
.atelier__article-list{ display:grid; gap:.55rem; margin-top:1rem; }
.atelier__article{ width:100%; padding:.75rem .8rem; border:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; font-family:var(--serif); font-size:1.1rem; }
.atelier__article span{ display:block; margin-top:.1rem; font-family:var(--sans); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.atelier__article:hover, .atelier__article[aria-current="true"]{ border-color:var(--sienna); background:var(--frame); color:var(--prussian); }
.atelier-form{ display:grid; gap:1rem; }
.atelier-form label{ display:grid; gap:.35rem; color:var(--ink); font-size:.86rem; font-weight:600; }
.atelier-form small{ font-size:.75rem; font-weight:400; color:var(--ink-soft); }
.atelier-form input, .atelier-form textarea, .atelier-form select{ width:100%; padding:.65rem .7rem; border:1px solid var(--line); background:var(--frame); color:var(--ink); font:inherit; font-weight:400; }
.atelier-form textarea{ resize:vertical; }
.atelier-form__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.atelier-form__optional{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.9rem 0; }
.atelier-form__optional summary{ cursor:pointer; color:var(--prussian); font-family:var(--serif); font-size:1.1rem; }
.atelier-form__optional .atelier-form__grid{ padding-top:1rem; }
.atelier-form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.atelier-delete{ margin-left:auto; padding:0; border:0; background:transparent; color:#8b3426; font:inherit; font-size:.78rem; text-decoration:underline; cursor:pointer; }
.atelier-form__notice{ min-height:1.4rem; margin:0; color:var(--prussian); font-size:.85rem; }
.atelier-preview{ border-top:1px solid var(--line); padding-top:1.2rem; }
.atelier-preview h3{ margin:.2rem 0; font-family:var(--serif); font-size:2rem; font-weight:500; }
.atelier-preview img{ display:block; width:100%; max-height:260px; margin:1rem 0; object-fit:contain; background:var(--wall); }
.atelier__download{ max-width:760px; margin:3rem auto 0; text-align:center; }
.atelier__download p{ color:var(--ink-soft); max-width:60ch; margin:0 auto 1.4rem; }

.site-footer{
  border-top:1px solid var(--line); margin-top:4rem;
  padding:1.8rem clamp(1rem,4vw,2.5rem); text-align:center;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* ════════ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width:860px){
  .atelier__layout{ grid-template-columns:1fr; }
  .journal-list{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .tiles{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .gallery{ column-count:2; }
  .bio{ grid-template-columns:1fr; }
  .bio__portrait{ max-width:340px; margin:0 auto; }
  .bio__portrait .frame{ position:static; }
}
@media (max-width:520px){
  .atelier-form__grid{ grid-template-columns:1fr; }
  .atelier-delete{ margin-left:0; width:100%; text-align:left; }
  .gallery{ column-count:1; }
  .nav{ gap:.9rem; }
}

/* ════════ ACCESSIBILITÉ ══════════════════════════════════════════════ */
:focus-visible{ outline:2px solid var(--sienna); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}
.fade-up{ animation:fadeUp .7s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }