/* ============================================================
   TOKENS — palette, typographie, rythmes.
   Modifier ces variables suffit à changer l'identité du site.
   ============================================================ */
:root{
  --lin:        #EDE7DA;   /* fond principal — toile de lin */
  --lin-fonce:  #E2DACB;   /* variante légèrement plus sombre */
  --charbon:    #211E1A;   /* encre / texte principal */
  --charbon-60: rgba(33,30,26,0.6);
  --charbon-30: rgba(33,30,26,0.3);
  --outremer:   #2C5C8A;   /* pigment 1 — bleu poussiéreux (Vapors of Asia, Cosmos, Oriental Moments) */
  --braise:     #B23A2E;   /* pigment 2 — rouge braise (Volcanic Fields, Triple F, Agony) */
  --ocre:       #C08A28;   /* pigment 3 — or (Cornucopia, Volcanic Fields, Cosmos) */
  --corail:     #D97A5C;   /* pigment 4 — corail (Love Story, Atmospheric Enchantments) */
  --brume:      #5B8A82;   /* pigment 5 — vert-bleu brumeux (Emotion's Flow, Sleek Strains) */
  --sauge:      #6E7A5C;   /* pigment 6 — sauge discrète, contrepoint neutre */
  --blanc-casse:#FBF9F4;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --marge: clamp(24px, 6vw, 96px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--lin);
  color:var(--charbon);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img, svg{ display:block; max-width:100%; }

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

::selection{ background:var(--outremer); color:var(--blanc-casse); }

/* focus visible clavier */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--outremer);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:1320px; margin:0 auto; padding-left:var(--marge); padding-right:var(--marge); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--charbon-60);
}

h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em; }

/* ============================================================
   SIGNATURE — bande de pigments, motif récurrent de séparation
   entre les sections, comme une palette de peintre.
   ============================================================ */
.bande-pigments{
  display:flex;
  height:6px;
  width:100%;
}
.bande-pigments span{ flex:1; }
.bande-pigments span:nth-child(1){ background:var(--outremer); }
.bande-pigments span:nth-child(2){ background:var(--braise); }
.bande-pigments span:nth-child(3){ background:var(--ocre); }
.bande-pigments span:nth-child(4){ background:var(--corail); }
.bande-pigments span:nth-child(5){ background:var(--brume); }

/* ============================================================
   NAVIGATION
   ============================================================ */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(237,231,218,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--charbon-30);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
}
.monogramme{
  font-family:var(--font-display);
  font-size:22px;
  font-style:italic;
  letter-spacing:0.02em;
  display:block;
}
.nav-liens{ display:flex; gap:40px; }
.nav-liens a{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
.nav-liens a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--outremer);
  transition:width 0.25s ease;
}
.nav-liens a:hover::after{ width:100%; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase;
}

@media (max-width:760px){
  .nav-liens{
    position:fixed; inset:0 0 0 auto; top:65px;
    flex-direction:column; gap:0;
    background:var(--blanc-casse);
    width:min(280px, 80vw);
    height:calc(100vh - 65px);
    padding:32px var(--marge);
    transform:translateX(100%);
    transition:transform 0.35s ease;
    border-left:1px solid var(--charbon-30);
  }
  .nav-liens.ouvert{ transform:translateX(0); }
  .nav-liens a{ padding:16px 0; border-bottom:1px solid var(--charbon-30); }
  .nav-toggle{ display:block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:64px;
  padding-top:90px;
  padding-bottom:90px;
  min-height:min(88vh, 780px);
}
.hero-texte .eyebrow{ margin-bottom:22px; }
.hero h1{
  font-size:clamp(40px, 5.4vw, 76px);
  line-height:1.02;
}
.hero h1 em{
  font-style:italic;
  color:var(--braise);
}
.hero p{
  margin-top:26px;
  max-width:42ch;
  font-size:17px;
  color:var(--charbon-60);
}
.hero-actions{
  margin-top:38px;
  display:flex; gap:18px; flex-wrap:wrap;
}
.bouton{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:15px 28px;
  border:1px solid var(--charbon);
  transition:background 0.2s ease, color 0.2s ease;
  cursor:pointer;
}
.bouton.plein{ background:var(--charbon); color:var(--blanc-casse); }
.bouton.plein:hover{ background:var(--outremer); border-color:var(--outremer); }
.bouton.contour:hover{ background:var(--charbon); color:var(--blanc-casse); }

.hero-toile{
  position:relative;
  aspect-ratio:4/5;
  background:
    radial-gradient(circle at 30% 25%, rgba(44,74,134,0.55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(162,59,43,0.5), transparent 60%),
    linear-gradient(160deg, #D8CBAE, #EDE7DA 60%);
  border:1px solid var(--charbon-30);
  box-shadow:0 30px 60px -30px rgba(33,30,26,0.35);
}
.hero-toile::after{
  content:'Artwork coming soon';
  position:absolute; bottom:18px; left:18px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--charbon-60);
  background:rgba(251,249,244,0.75);
  padding:6px 10px;
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; gap:44px; }
  .hero-toile{ order:-1; aspect-ratio:1/1; }
}

/* ============================================================
   SECTIONS — titre générique
   ============================================================ */
section{ padding-top:110px; padding-bottom:110px; }
.titre-section{ margin-bottom:56px; }
.titre-section h2{ font-size:clamp(30px, 3.6vw, 46px); margin-top:14px; }
.titre-section p{ margin-top:16px; max-width:56ch; color:var(--charbon-60); }

/* ============================================================
   GALLERIES — each gallery is an independent block, loaded from
   its own data file (see /galeries). Artworks are listed by title,
   catalogue-style, and open on their own dedicated page (see
   oeuvre.html) where the image is shown at its original proportions.
   ============================================================ */
#galerie{ background:var(--lin-fonce); }

.filtres{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;
}
.filtre{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 16px;
  border:1px solid var(--charbon-30);
  background:transparent; cursor:pointer;
  transition:all 0.2s ease;
}
.filtre.actif, .filtre:hover{
  background:var(--couleur-galerie, var(--charbon));
  color:var(--blanc-casse);
  border-color:var(--couleur-galerie, var(--charbon));
}

/* Group = one independent gallery (title, description, artworks or empty state) */
.galerie-groupe{
  margin-bottom:96px;
  scroll-margin-top:100px; /* keeps the sticky header from covering the title on anchor click */
}
.galerie-groupe:last-child{ margin-bottom:0; }
.galerie-entete{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
  border-bottom:1px solid var(--charbon-30);
  padding-bottom:18px; margin-bottom:20px;
}
.galerie-entete h3{ font-size:clamp(22px,2.6vw,30px); font-style:italic; font-weight:400; }
.galerie-entete .compte{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--charbon-60);
  white-space:nowrap;
}
.galerie-desc{ max-width:60ch; color:var(--charbon-60); margin-bottom:32px; }
.galerie-vide{
  border:1px dashed var(--charbon-30);
  padding:52px 32px; text-align:center;
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--charbon-60);
}

/* Catalogue list : one row per artwork, each linking to its own page */
.liste-oeuvres{ border-top:1px solid var(--charbon-30); }
.oeuvre-ligne{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; flex-wrap:wrap;
  padding:22px 4px;
  border-bottom:1px solid var(--charbon-30);
  transition:padding-left 0.3s cubic-bezier(.16,.84,.44,1), color 0.3s ease;
}
.oeuvre-ligne:hover{ padding-left:14px; color:var(--couleur-galerie, var(--charbon)); }
.oeuvre-ligne h4{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:19px; color:inherit;
}
.oeuvre-ligne .oeuvre-meta{
  font-family:var(--font-mono); font-size:10.5px;
  color:var(--charbon-60); text-align:right; white-space:nowrap;
}

/* message affiché si les fiches de galeries n'ont pas pu être chargées
   (ouverture directe du fichier depuis le disque, sans serveur local) */
.galerie-erreur{
  border:1px solid var(--braise);
  background:rgba(162,59,43,0.06);
  padding:28px 32px;
  color:var(--charbon);
  font-size:14px;
  line-height:1.7;
}
.galerie-erreur strong{ display:block; margin-bottom:6px; font-family:var(--font-mono); text-transform:uppercase; font-size:12px; letter-spacing:0.05em; color:var(--braise); }
.galerie-erreur code{
  font-family:var(--font-mono); background:rgba(33,30,26,0.06); padding:2px 6px; font-size:12.5px;
}

/* ============================================================
   SINGLE ARTWORK PAGE (oeuvre.html) — the image is shown at its
   true original proportions (never cropped), with a side "mirror"
   reflection standing next to it like a glint on a glass panel.
   ============================================================ */
.lien-retour{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--charbon-60);
  margin-bottom:44px;
  border-bottom:1px solid transparent;
}
.lien-retour:hover{ color:var(--charbon); border-bottom-color:var(--charbon); }

.oeuvre-affichage{
  display:flex;
  justify-content:center;
  margin-bottom:48px;
}
.oeuvre-image-conteneur{
  display:flex;
  align-items:stretch;
  max-width:100%;
}
.oeuvre-image-conteneur > img{
  max-width:min(68vw, 760px);
  max-height:74vh;
  width:auto;
  height:auto;
  display:block;
  border:1px solid var(--charbon-30);
  box-shadow:0 30px 60px -30px rgba(33,30,26,0.35);
  position:relative;
  z-index:2;
}

/* Side mirror : a flipped, clearly-visible echo of the painting's own
   edge, standing beside it like light catching a glass panel — rather
   than a faint reflection tucked underneath. */
.oeuvre-miroir{
  width:clamp(56px, 13vw, 165px);
  overflow:hidden;
  position:relative;
  margin-left:-1px;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 92%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 92%);
}
.oeuvre-miroir img{
  height:100%; width:auto; min-width:100%;
  object-fit:cover;
  transform:scaleX(-1);
  opacity:0.72;
  display:block;
}
@media (max-width:520px){ .oeuvre-miroir{ display:none; } }

.oeuvre-details{ max-width:70ch; margin:0 auto; text-align:center; }
.oeuvre-details h1{
  font-size:clamp(28px,3.4vw,42px);
  font-style:italic; font-weight:400;
  margin:12px 0 16px;
}
.oeuvre-meta-page{
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:0.05em; color:var(--charbon-60);
  margin-bottom:28px; line-height:1.8;
}
.oeuvre-description-page{
  color:var(--charbon-60); font-size:15.5px; line-height:1.8;
  text-align:left;
}
.oeuvre-navigation{
  display:flex; justify-content:space-between;
  margin-top:72px; padding-top:24px;
  border-top:1px solid var(--charbon-30);
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
}
.oeuvre-navigation a:hover{ color:var(--outremer); }
.oeuvre-erreur{ text-align:center; color:var(--charbon-60); padding:60px 0; }

/* ============================================================
   À PROPOS
   ============================================================ */
#apropos .contenu{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start;
}
.portrait-cadre{
  aspect-ratio:3/4;
  background:linear-gradient(155deg, #DCD2BB, #C9BCA0);
  border:1px solid var(--charbon-30);
}
#apropos .texte p{ margin-bottom:20px; max-width:60ch; color:var(--charbon-60); }
#apropos .texte p:first-of-type{ color:var(--charbon); font-size:18px; font-family:var(--font-display); font-style:italic; }

.chiffres{
  margin-top:40px;
  display:flex; gap:48px; flex-wrap:wrap;
}
.chiffre .nombre{ font-family:var(--font-display); font-size:34px; }
.chiffre .label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--charbon-60); }

@media (max-width:900px){ #apropos .contenu{ grid-template-columns:1fr; gap:36px; } }

/* ============================================================
   PAGE BIOGRAPHIE (page séparée)
   ============================================================ */
.contenu-biographie{ max-width:70ch; }
.contenu-biographie p{ margin-bottom:22px; color:var(--charbon-60); font-size:16px; }
.contenu-biographie p:first-of-type{
  color:var(--charbon); font-size:19px;
  font-family:var(--font-display); font-style:italic;
}

/* ============================================================
   CONTACT
   ============================================================ */
#contact{ background:var(--charbon); color:var(--blanc-casse); }
#contact .eyebrow{ color:rgba(251,249,244,0.55); }
#contact .titre-section p{ color:rgba(251,249,244,0.65); }

.contact-grille{
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
}
.champ{ margin-bottom:24px; }
.champ label{
  display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:8px; color:rgba(251,249,244,0.7);
}
.champ input, .champ textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(251,249,244,0.35);
  color:var(--blanc-casse);
  font-family:var(--font-body); font-size:15px;
  padding:10px 0;
}
.champ input:focus, .champ textarea:focus{
  outline:none; border-bottom-color:var(--ocre);
}
.champ textarea{ resize:vertical; min-height:100px; }

.formulaire-statut{
  margin-top:16px;
  font-size:13px;
  color:var(--ocre);
  min-height:18px;
}
.formulaire-statut.erreur{ color:#E08A7D; }

.contact-infos{ display:flex; flex-direction:column; gap:28px; }
.contact-infos .bloc .eyebrow{ margin-bottom:8px; }
.contact-infos .bloc div{ font-size:16px; }
.contact-infos .reseaux{ display:flex; gap:20px; margin-top:6px; }
.contact-infos .reseaux a{ font-family:var(--font-mono); font-size:12px; border-bottom:1px solid transparent; }
.contact-infos .reseaux a:hover{ border-bottom-color:var(--ocre); }

@media (max-width:900px){ .contact-grille{ grid-template-columns:1fr; gap:44px; } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:36px var(--marge);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.04em; color:var(--charbon-60);
  flex-wrap:wrap; gap:12px;
  background:var(--lin);
}

/* ============================================================
   LECTEUR AUDIO D'AMBIANCE — discret, en bas à droite de l'écran.
   ============================================================ */
.lecteur-audio{
  position:fixed;
  right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:12px;
  background:rgba(251,249,244,0.88);
  backdrop-filter:blur(6px);
  border:1px solid var(--charbon-30);
  padding:9px 16px;
  box-shadow:0 16px 34px -20px rgba(33,30,26,0.4);
}
.lecteur-bouton{
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--charbon);
  background:var(--charbon); color:var(--blanc-casse);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.lecteur-bouton:hover{ background:var(--outremer); border-color:var(--outremer); }
.lecteur-bouton:disabled{ opacity:0.4; cursor:not-allowed; }
.lecteur-bouton svg{ pointer-events:none; }
.lecteur-label{
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--charbon-60);
  white-space:nowrap;
  display:none;
}
@media (min-width:560px){ .lecteur-label{ display:block; } }
.lecteur-volume{
  width:70px;
  accent-color:var(--outremer);
  cursor:pointer;
}
@media (max-width:420px){
  .lecteur-audio{ right:12px; bottom:12px; padding:8px 12px; gap:8px; }
  .lecteur-volume{ width:52px; }
}

/* reveal au scroll */
.reveal{
  opacity:0;
  transform:translateY(22px) scale(0.985);
  transition:opacity 0.75s cubic-bezier(.16,.84,.44,1), transform 0.75s cubic-bezier(.16,.84,.44,1);
}
.reveal.visible{ opacity:1; transform:none; }