/*
Theme Name: SDA Theme — Secrets d'Artistes
Description: Thème sur mesure de la galerie Secrets d'Artistes (MVP). Œuvres-first, sobre, responsive, bilingue-ready.
Version: 0.1.0
Author: Secrets d'Artistes
*/

/* =========================================================
   EB Garamond — servie par le site, jamais par un tiers.
   Aucune requête vers Google : c'est ce qui permet à la page Cookies
   d'affirmer qu'aucun traceur n'est déposé. Licence SIL OFL 1.1,
   texte et provenance dans assets/fonts/.
   Police variable : un seul fichier couvre les graisses 400 à 800.
   font-display:swap → le texte s'affiche tout de suite en Georgia,
   puis bascule ; jamais de titre invisible.
   ========================================================= */
@font-face{
  font-family:"EB Garamond";
  src:url("assets/fonts/ebgaramond-latin.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"EB Garamond";
  src:url("assets/fonts/ebgaramond-latin-ext.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}


:root{
  --ink:#1c1a17; --bg:#faf7f1; --card:#ffffff; --muted:#8a8073;
  --gold:#b0892d; --line:#e7e0d3; --red:#b23b2e; --green:#2f7d4f; --blue:#356a9a;
  --maxw:1200px; --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;height:auto;display:block}
/* Tableaux des pages éditoriales (informations pratiques, RGPD…).
   Sur petit écran le tableau défile dans son propre cadre, pour ne jamais
   provoquer de défilement horizontal de la page entière. */
.desc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.desc th,.desc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.desc th{background:#faf8f3;font-weight:600}
@media(max-width:760px){.desc table{display:block;overflow-x:auto;white-space:normal}}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:.2px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:block;padding:8px 0}
.brand img{height:62px;width:auto;display:block}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink)}
.nav a.active{color:var(--gold)}
.lang{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.menu-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer}

/* Hero */
.hero{padding:70px 0 50px;text-align:center;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(30px,5vw,52px);margin:0 0 14px}
.hero p{max-width:640px;margin:0 auto 26px;color:var(--muted);font-size:18px}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:12px 26px;border-radius:2px;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.btn:hover{background:var(--gold);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* Sections */
.section{padding:56px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.section-head h2{font-size:28px;margin:0}
.section-head a{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* Grid œuvres */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:30px}
/* Entête de fiche artiste : photo + bio (1 colonne en mobile, voir media query) */
.artist-head{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.artist-head.nophoto{grid-template-columns:1fr}
/* Le cadre épouse la photo : les portraits fournis vont de 202 à 1064 px de
   large, un cadre fixe laissait une bande vide sur les plus étroits. */
.artist-head .thumb{width:fit-content;max-width:100%;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.artist-head .thumb img{width:auto;max-width:100%;height:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card .thumb{aspect-ratio:1/1;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box}
/* Portraits d'artistes : plein cadre (recadrés), sans passe-partout */
.artist-card .thumb{background:#efe9df}
.artist-card .thumb img{object-fit:cover;padding:0}
.card .thumb.noimg{color:var(--muted);font-size:13px;font-family:var(--serif);font-style:italic}
/* Cartes exposition : mosaïque des œuvres + appel au clic */
.expo-mosaic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:1px;width:100%;height:100%;background:var(--line)}
/* Cellules au format fixe (minmax(0,1fr) : la taille des images ne dérègle pas la grille) ;
   l'œuvre est réduite pour tenir entière, centrée, sans recadrage. */
.card .thumb .expo-mosaic img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;padding:6px;box-sizing:border-box;background:#fff}
.expo-mosaic.n2{grid-template-rows:minmax(0,1fr)}
.expo-mosaic.n3 img:first-child{grid-row:1/3}
.expo-cta{display:inline-block;margin-top:12px;align-self:flex-start}
.expo-card:hover .expo-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Mode pellicule (fiche exposition) : bande horizontale à défilement automatique */
.expo-strip{overflow:hidden}
/* Pellicule : les flèches encadrent la bande au lieu de la recouvrir,
   pour qu'aucune œuvre ne soit jamais masquée par un bouton.
   Sur petit écran elles passent sous la bande, où la largeur manque. */
.expo-pellicule{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"prev strip next";align-items:center;gap:14px}
.expo-pellicule .expo-strip{grid-area:strip}
.expo-pellicule .gal-nav{position:static;transform:none}
.expo-pellicule .gal-nav.prev{grid-area:prev}
.expo-pellicule .gal-nav.next{grid-area:next}
@media(max-width:680px){
  .expo-pellicule{grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"strip strip strip" ". prev next";row-gap:16px}
}
.expo-track{display:flex;gap:18px;will-change:transform}
.expo-track .card{flex:0 0 260px;width:260px}
@media(max-width:680px){.expo-track .card{flex-basis:70vw;width:70vw}}
.card .body{padding:14px 16px 18px}
.card .artist{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.card .title{font-family:var(--serif);font-size:18px;margin:3px 0 8px}
.card .meta{font-size:13px;color:var(--muted)}
.card .price{margin-top:8px;font-weight:600}
.badge{display:inline-block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:2px;margin-top:8px}
.badge.vendue{background:#f6e3e0;color:var(--red)}
.badge.restituee{background:#e3edf6;color:var(--blue)}
.badge.reservee{background:#f7eeda;color:#9a7a1e}

/* Filtres */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:3px}
.filters select,.filters input{padding:9px 12px;border:1px solid var(--line);border-radius:2px;font-size:14px;background:#fff;font-family:inherit}
.filters button{padding:9px 18px}
.count{color:var(--muted);font-size:14px;margin-bottom:18px}

/* Single œuvre — vague 3 : la salle d'exposition d'abord, les informations
   ensuite. Le haut de page appartient à l'œuvre seule ; le tableau, la
   description et le formulaire descendent sous le mur. */
.sda-single{display:grid;grid-template-columns:1.25fr 1fr;gap:34px 52px;padding:40px 0 8px;align-items:start}
/* Un élément de grille ne descend pas, par défaut, sous la largeur minimale de
   son contenu : sans cette ligne le tableau des caractéristiques pousse la
   page hors de l'écran sur téléphone (défilement horizontal parasite). */
.sda-single>*{min-width:0}
.gallery-main{position:relative}
#mainimg{cursor:zoom-in}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:var(--sans);transition:background .15s,color .15s,opacity .2s}
.gal-nav:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.gal-nav.prev{left:14px}
.gal-nav.next{right:14px}
/* Aucune flèche au-dessus de l'œuvre : rien ne doit la masquer. Les flèches ne
   subsistent que dans le zoom, où elles sont posées hors de l'image. Changer de
   vue dans la page se fait par les imagettes, le balayage tactile ou le
   diaporama automatique. */
/* Popup de zoom : fenêtre centrée, la page reste visible derrière */
.sda-lb{position:fixed;inset:0;z-index:300;background:rgba(22,19,15,.58);display:none;align-items:center;justify-content:center;padding:24px}
.sda-lb.open{display:flex}
.lb-box{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:30px 70px 16px;max-width:90vw;max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 25px 80px rgba(0,0,0,.45)}
.lb-box img{max-width:calc(90vw - 140px);max-height:calc(92vh - 110px);object-fit:contain}
.lb-caption{font-size:13px;color:var(--muted);padding-bottom:4px;text-align:center}
.lb-box .gal-nav{opacity:1}
.lb-box .gal-nav.prev{left:12px}
.lb-box .gal-nav.next{right:12px}
.lb-close{position:absolute;top:2px;right:6px;z-index:6;font-size:30px;color:var(--muted);background:none;border:0;cursor:pointer;line-height:1;padding:8px 12px}
.lb-close:hover{color:var(--gold)}
@media (max-width:640px){.lb-box{padding:26px 46px 12px}.lb-box img{max-width:calc(96vw - 92px)}.sda-lb{padding:10px}}
/* Le formulaire accompagne la lecture : il reste à portée pendant que le
   visiteur parcourt la description. */
.sda-col-form{align-self:start;position:sticky;top:92px}
.gallery-main{background:#efe9df;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.gallery-main img{width:100%;object-fit:contain;max-height:74vh}
.thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumbs img{width:76px;height:76px;object-fit:cover;border:1px solid var(--line);border-radius:2px;cursor:pointer;opacity:.7}
.thumbs img:hover,.thumbs img.active{opacity:1;border-color:var(--gold)}
.detail .price-big{font-size:26px;font-family:var(--serif);margin:0 0 18px}
/* Prix non affiché : c'est une phrase, pas un montant. Le corps du prix (26 px)
   la rendrait criarde et lui ferait occuper trois lignes ; l'accroche descend
   d'un cran, l'invitation passe en corps courant et en gris. */
.detail .price-big.sur-demande{font-size:inherit;margin:0 0 20px}
.detail .price-big.sur-demande .pd-titre{display:block;font-family:var(--serif);font-size:21px;line-height:1.25}
.detail .price-big.sur-demande .pd-detail{display:block;margin-top:5px;font-family:var(--sans);font-size:14px;color:var(--muted);max-width:34em}
/* Sur une carte, la formule tient la place d'un montant : corps de mention. */
.card .price-demande{font-weight:500;font-size:13px;color:var(--muted);line-height:1.35}
.spec{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.spec th{text-align:left;color:var(--muted);font-weight:500;padding:7px 12px 7px 0;vertical-align:top;width:130px}
.spec td{padding:7px 0;border-bottom:1px solid var(--line)}
@media(max-width:560px){.spec th{width:104px;padding-right:8px}}
.desc{margin:22px 0;color:#3a352e}
/* Composant « Lire la suite » */
.js-collapse{position:relative;transition:max-height .35s ease}
.js-collapse.is-collapsed{overflow:hidden;max-height:var(--collapsed,150px);
  -webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.sda-more{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  padding:6px 0;margin:2px 0 10px;font-family:var(--sans);font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.sda-more:hover{color:var(--ink)}
.sda-more::after{content:"▾";font-size:11px}
.sda-more[aria-expanded="true"]::after{content:"▴"}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* Artistes */
.artist-card{text-align:center}
.artist-card .thumb{aspect-ratio:3/4;border-radius:3px}
.artist-card .title{font-size:20px;margin-top:12px}

/* Formulaire de demande */
.sda-form{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:26px 28px;max-width:640px}
.sda-fields{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.sda-fields label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:600}
.sda-fields input,.sda-fields select,.sda-fields textarea{padding:11px 12px;border:1px solid var(--line);border-radius:3px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.sda-fields input:focus,.sda-fields select:focus,.sda-fields textarea:focus{outline:none;border-color:var(--gold)}
.sda-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sda-check{flex-direction:row!important;align-items:flex-start;gap:9px!important;font-weight:400!important;color:var(--ink)!important;font-size:13px}
.sda-check input{margin-top:2px}
.sda-form .btn{align-self:flex-start;margin-top:4px}
.sda-notice{background:#e8f3ec;border:1px solid #b5dcc4;color:#1e6b42;padding:12px 14px;border-radius:3px;margin:12px 0}
.sda-error{background:#f9e7e4;border:1px solid #e3b6ae;color:#a33223;padding:12px 14px;border-radius:3px;margin:12px 0}
@media(max-width:560px){.sda-row{grid-template-columns:1fr}}

/* Newsletter (pied de page) */
.news-bar{border-bottom:1px solid #3a352e;margin-bottom:34px;padding-bottom:30px}
.news-block h4{font-family:var(--serif);color:#fff;margin:0 0 6px;font-size:18px}
.news-intro{color:#9a9184;margin:0 0 14px;max-width:520px}
.news-row{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.news-row input[type=email]{flex:1;min-width:220px;padding:11px 12px;border:1px solid #3a352e;border-radius:3px;background:#fff;color:#000;font-size:15px;font-family:inherit}
.news-row input[type=email]::placeholder{color:#7a7266}
.news-row input[type=email]:focus{outline:none;border-color:var(--gold)}
.news-consent{margin-top:10px;color:#9a9184!important;font-size:12px;max-width:520px}
.news-block .sda-notice,.news-block .sda-error{max-width:520px}
.hp-field{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}

/* Footer */
.site-footer{background:var(--ink);color:#d9d2c6;margin-top:60px;padding:48px 0 30px;font-size:14px}
.site-footer a{color:#d9d2c6}.site-footer a:hover{color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
.site-footer h4{font-family:var(--serif);color:#fff;margin:0 0 12px;font-size:16px}
.site-footer .fine{border-top:1px solid #3a352e;margin-top:30px;padding-top:18px;color:#9a9184;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:860px){
  .sda-single{grid-template-columns:1fr;gap:26px}
  .sda-col-form{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .brand img{height:48px}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;padding:10px 20px;border-bottom:1px solid var(--line);gap:0}
  .nav.open{display:flex}
  .nav a{padding:12px 0;font-size:14px}
  .menu-toggle{display:block;padding:8px 12px;min-width:44px;min-height:44px}
  /* Fiche artiste : photo au-dessus, bio en dessous */
  .artist-head{grid-template-columns:1fr;gap:22px}
  .artist-head .thumb{max-width:300px}
  /* iOS zoome sur les champs < 16px : taille minimale en tactile/mobile */
  input[type=text],input[type=email],input[type=tel],input[type=search],select,textarea,
  .sda-fields input,.sda-fields select,.sda-fields textarea,
  .news-row input[type=email]{font-size:16px}
  /* Cibles tactiles du pied de page */
  .site-footer a{display:inline-block;padding:5px 0}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr;gap:22px}
}

/* Partage d'une fiche œuvre.
   Chaque réseau est un lien ordinaire : aucun script tiers, aucun appel
   extérieur tant que le visiteur n'a pas cliqué — le site reste sans cookie. */
.sda-partage{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.sda-partage .lbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sda-partage ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.sda-partage a,.sda-partage button{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--card);color:var(--ink);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.sda-partage a:hover,.sda-partage button:hover,
.sda-partage a:focus-visible,.sda-partage button:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
.sda-partage svg{width:18px;height:18px;fill:currentColor;display:block}
.sda-partage .sda-partage-msg{margin:12px 0 0;font-size:13px;color:var(--green);max-width:420px}
@media(max-width:760px){
  /* Cible tactile confortable */
  .sda-partage a,.sda-partage button{width:44px;height:44px}
}

/* Grille resserrée : l'historique est un mur de mémoire, pas un catalogue de
   vente. Deux fois plus de vignettes par rangée, donc un bloc deux fois moins
   haut — ce qui laisse la place au bloc des artistes en dessous. */
.grid.dense{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.grid.dense .card .thumb img{padding:8px}
.grid.dense .card .body{padding:10px 12px 13px}
.grid.dense .card .artist{font-size:11px;letter-spacing:.4px}
.grid.dense .card .title{font-size:15px;margin:2px 0 5px}
.grid.dense .card .meta{font-size:12px}
.grid.dense .card .badge{font-size:10px;padding:1px 6px;margin-top:5px}
.grid.dense .card .price{margin-top:5px;font-size:14px}

/* Artistes précédemment exposés, sous les œuvres. */
.hist-artistes{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
.hist-artistes .section-head{margin-bottom:10px}
.hist-artistes .section-head h2{font-size:26px}
.hist-artistes .section-head span{font-size:13px;color:var(--muted)}
.hist-artistes .intro{color:var(--muted);max-width:680px;margin:0 0 24px}

/* Mention des mises en situation produites par IA : présente sous l'image,
   assez petite pour ne pas capter le regard avant l'œuvre elle-même. */
.amb-note{margin:8px 0 0;font-size:11px;line-height:1.4;color:var(--muted)}
.lb-caption #sda-lb-amb{font-size:11px;opacity:.75}

/* =========================================================
   Page d'accueil — vague 1
   L'œuvre et la parole en face-à-face, la recherche dans le premier écran.
   ========================================================= */
.hero-oeuvre{padding:46px 0 40px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
.hero-visuel .cadre{display:block;background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:20px;box-shadow:0 24px 60px rgba(28,26,23,.10)}
/* Les œuvres se succèdent en fondu. La hauteur du cadre est fixe : sans cela
   la page sauterait à chaque changement, un format vertical succédant à un
   format carré. Chaque œuvre reste entière à l'intérieur. */
.hero-visuel .pile{position:relative;display:block;height:min(58vh,520px)}
.hero-visuel .pile .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s ease}
.hero-visuel .pile .hv.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-visuel .pile .hv{transition:none}}
.hero-visuel .cartel{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:14px;font-size:14px}
.hero-visuel .cartel .t{font-family:var(--serif);font-size:17px}
.hero-visuel .cartel .a{color:var(--muted)}
.hero-visuel .cartel .l{color:var(--gold);white-space:nowrap}
.hero-mots h1{font-size:clamp(28px,3.4vw,46px);margin:0 0 16px}
.hero-mots .accroche{color:var(--muted);font-size:18px;margin:0 0 26px;max-width:34em}

.hero-chercher{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:18px 20px;
  box-shadow:0 8px 24px rgba(28,26,23,.05)}
.hero-chercher .q{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
.hero-chercher .ligne{display:flex;gap:8px;flex-wrap:wrap}
.hero-chercher input{flex:1 1 220px;min-width:0;font:inherit;padding:12px 14px;border:1px solid var(--line);
  border-radius:2px;background:var(--bg);color:var(--ink)}
.hero-chercher .photo{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border:1px solid var(--line);
  border-radius:2px;background:var(--bg);font-size:13px;color:var(--muted);white-space:nowrap}
.hero-chercher .photo:hover{color:var(--gold);border-color:var(--gold)}

/* Exposition en une */
.expo-une{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:44px;align-items:center}
.expo-une-vis .expo-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);aspect-ratio:1/1}
.expo-une-vis .expo-mosaic img{width:100%;height:100%;object-fit:contain;background:#fff;padding:10px}
.expo-une-vis .expo-mosaic.n1,.expo-une-vis .expo-mosaic.n2{grid-template-rows:minmax(0,1fr)}
.expo-une h2{font-size:32px;margin:0 0 6px}
.expo-une .dates{color:var(--muted);margin:0 0 14px}
.expo-une .invit{font-family:var(--serif);font-size:20px;line-height:1.45;margin:0 0 22px}

/* Bouton de contact dans l'en-tête */
.nav .nav-contact{color:#fff}
.nav .nav-contact:hover{color:#fff;opacity:.9}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  /* Sur téléphone la barre de recherche doit rester atteignable : l'œuvre
     ne prend pas plus de 40 % de la hauteur d'écran. */
  .hero-visuel .cadre{padding:14px}
  .hero-visuel .pile{height:40vh}
  .expo-une{grid-template-columns:1fr;gap:24px}
  .expo-une-vis{max-width:420px}
}

/* =========================================================
   Vague 2 — la signature
   ========================================================= */

/* Titres de page : une seule échelle, au lieu de tailles réécrites dans
   chaque gabarit. EB Garamond ayant un œil plus petit que Georgia, la
   valeur est légèrement relevée pour retrouver la même présence. */
.page-title{font-size:clamp(30px,3.4vw,40px);margin:0 0 14px}
.page-title + .page-sous{margin-top:-6px}

/* Mouvement : les cartes montent doucement en entrant dans l'écran.
   Sans JavaScript, la classe n'est jamais posée et tout reste visible :
   le contenu ne dépend jamais de l'animation. */
.js-anim .anim{opacity:0;transform:translateY(14px)}
.js-anim .anim.vu{opacity:1;transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}

/* Au survol d'une carte, l'image respire légèrement : le mouvement est
   dans l'œuvre, pas dans le cadre. */
.card .thumb img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card:hover .thumb img{transform:scale(1.035)}

/* Un lien de section se souligne à l'approche, au lieu de changer de couleur. */
.section-head a{background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s ease,color .2s ease}
.section-head a:hover{background-size:100% 1px;color:var(--gold)}

/* Respect du réglage système : aucune animation pour qui n'en veut pas. */
@media(prefers-reduced-motion:reduce){
  .js-anim .anim,.js-anim .anim.vu{opacity:1;transform:none;transition:none}
  .card .thumb img,.card:hover .thumb img{transition:none;transform:none}
  .section-head a{transition:none}
  .chez-vue img,.chez-vue:hover img{transition:none;transform:none}
}

/* =========================================================
   Fiche œuvre — vague 3
   Trois temps : on regarde (la salle), on s'informe, on se projette.
   ========================================================= */

/* 1. Le seuil : fil d'Ariane discret, juste avant d'entrer dans la salle. */
.sda-seuil{padding-top:18px;padding-bottom:14px}
.sda-seuil .fil{margin:0;font-size:13px;color:var(--muted)}
.sda-seuil .btn.ghost{margin-bottom:4px}

/* 2. La salle : un mur neutre, l'œuvre encadrée dessus, le cartel dessous.
   La teinte sombre n'est pas un effet de style : elle isole l'œuvre du reste
   de l'interface le temps qu'on la regarde — c'est l'accrochage d'une
   galerie, transposé à l'écran. */
.sda-salle{background:linear-gradient(180deg,#2b2723 0%,#1b1815 100%);padding:40px 0 42px}
.salle-cadre{display:flex;justify-content:center}
/* Le cadre blanc reprend celui de l'œuvre en page d'accueil : les deux
   écrans parlent la même langue. L'œuvre n'est jamais recadrée. */
.sda-salle .gallery-main{background:#fff;border:0;border-radius:0;padding:16px;max-width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35)}
.sda-salle .gallery-main img{width:auto;max-width:100%;max-height:min(66vh,640px);margin:0 auto}
.sda-salle .noimg-salle{display:flex;align-items:center;justify-content:center;width:min(70vw,520px);
  aspect-ratio:4/3;color:var(--muted);font-family:var(--serif);font-style:italic}
.sda-salle .amb-note{text-align:center;color:#9c9384;margin-top:14px}
.sda-salle .thumbs{justify-content:center;margin-top:18px}
.sda-salle .thumbs img{border-color:rgba(255,255,255,.22);opacity:.55}
.sda-salle .thumbs img:hover,.sda-salle .thumbs img.active{opacity:1;border-color:var(--gold)}
/* Le cartel : ce qu'une galerie écrit sur le mur, à côté de l'œuvre. */
.sda-salle .cartel{text-align:center;margin-top:26px;color:#efe9e0}
.sda-salle .cartel h1{font-size:clamp(28px,3.2vw,40px);margin:0 0 8px;color:#fff}
.sda-salle .cartel .c-artiste{margin:0 0 10px;font-size:14px;letter-spacing:1.6px;text-transform:uppercase}
.sda-salle .cartel .c-artiste a{color:var(--gold)}
.sda-salle .cartel .c-artiste a:hover{color:#fff}
.sda-salle .cartel .c-meta{margin:0;color:#a79f92;font-size:14px}
.sda-salle .cartel .badge{margin-top:14px}

/* 3. Voir cette œuvre chez vous — les mises en situation, après les
   informations : la question « et chez moi ? » vient une fois l'œuvre
   comprise, pas avant. */
/* Le bloc suit immédiatement la salle : pas de filet au-dessus (il serait
   collé au bandeau sombre), c'est lui qui porte la séparation d'avec les
   informations qui suivent. */
.sda-chezvous{padding:42px 0 34px;border-bottom:1px solid var(--line)}
.sda-chezvous .section-head{margin-bottom:8px}
.sda-chezvous .section-head span{font-size:13px;color:var(--muted)}
.sda-chezvous .intro{color:var(--muted);max-width:680px;margin:0 0 24px}
/* Les mises en situation n'ont pas toutes le même format : 78 des 168 sont
   verticales, 47 carrées, 43 horizontales. Un cadre imposé en 4/3 rognait le
   haut des verticales — c'est-à-dire exactement ce que le visiteur vient
   regarder, le tableau. Chaque vue garde donc ses proportions, et les cellules
   ne s'étirent pas les unes sur les autres. */
.chez-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:start}
.chez-vue{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;background:var(--card);cursor:zoom-in;font:inherit}
.chez-vue img{width:100%;height:auto;transition:transform .5s ease}
.chez-vue:hover img,.chez-vue:focus-visible img{transform:scale(1.03)}
.chez-piece{position:absolute;left:10px;bottom:10px;background:rgba(22,19,15,.72);color:#fff;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.lb-caption .amb-fine{font-size:11px;opacity:.75}

/* 4. Œuvres qui vont avec — parenté visuelle, calculée sur les mêmes
   vecteurs que la recherche par image. Aucune œuvre vendue : le rebond
   doit mener quelque part. */
.sda-apparentees{padding:48px 0 0;margin-top:40px;border-top:1px solid var(--line)}

@media(max-width:900px){
  .sda-salle{padding:26px 0 30px}
  .sda-salle .gallery-main{padding:10px}
  .sda-salle .gallery-main img{max-height:52vh}
  .sda-salle .thumbs img{width:60px;height:60px}
  .chez-grid{grid-template-columns:1fr}
}