/* =========================
   GLOBAL
   ========================= */
@font-face{
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  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;
}

/* transitions entre pages (navigateurs récents) : le header reste immobile, le contenu se fond */
@view-transition{ navigation:auto; }
.top{ view-transition-name:site-header; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.35s; animation-timing-function:ease; }
::view-transition-group(site-header){ animation-duration:.35s; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

:root{
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: #FFFFFF;
  --bg-deep: #F3F3F3;
  --ink-rgb: 17,17,17;
  --ink: rgb(var(--ink-rgb));
  --accent-rgb: 163,39,31;
  --accent: rgb(var(--accent-rgb));
  --accent-hi: #7E1C16;
  --red-rgb: 163,64,46;
  --red: rgb(var(--red-rgb));
  --green-rgb: 62,122,87;
  --green: rgb(var(--green-rgb));
  --blue-rgb: 35,70,168;
  --blue: rgb(var(--blue-rgb));
  --blue-hi: #1A3580;
  --ink-soft: #444444;
  --ink-faint: #6B6B6B;
  --border: rgba(var(--ink-rgb),.18);

  /* Style commun des boutons, champs, onglets et cartes (repris des onglets du portfolio) */
  --radius: 10px;                      /* boutons, champs, onglets */
  --radius-card: 14px;                 /* cadres et cartes */
  --control-h: 38px;                   /* hauteur des boutons et champs */
  --fill: rgba(var(--ink-rgb),.04);       /* fond au repos */
  --fill-hover: rgba(var(--ink-rgb),.10); /* fond au survol / actif */
  --line: rgba(var(--ink-rgb),.22);       /* bordure au repos */
  --line-strong: rgba(var(--ink-rgb),.45);/* bordure au focus */
  --ease: .15s ease;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

/* Le CSS d'un composant (display:grid…) ne doit jamais rendre visible un élément [hidden] */
[hidden]{ display:none !important; }

/* Texte lu par les lecteurs d'écran / moteurs de recherche mais non affiché */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Navigation clavier : contour visible */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* CURSEUR PERSONNALISÉ — désactivé.
   images/cursor.svg fait 853×1707 px : les navigateurs ignorent les curseurs > 128 px,
   et il est noir sur fond bleu. cursor-pointer.svg n'existe pas (404).
   À réactiver avec une image ≤ 32×32 px quand le design sera décidé.
html, body{ cursor: url("images/cursor.svg") 8 8, auto; }
a, button, [role="button"]{ cursor: url("images/cursor-pointer.svg") 8 8, pointer; }
*/

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

/* page + container */
.page{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  background: transparent;
}

.container{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 48px 56px;

  flex: 1;
  display:flex;
  flex-direction:column;
}
@media (max-width: 768px){
  .container{ padding: 16px 20px 40px; }
}

/* PIED DE PAGE — identique sur toutes les pages :
   réseaux à gauche, mentions légales + langue (ajoutée par i18n.js) à droite */
.bottom{
  margin-top:auto;
  padding-top:48px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 24px;
}
.bottom__left{display:flex;flex-wrap:wrap;gap:6px 18px;}
.bottom__link{font-size:14px;color:var(--ink-soft);}
.bottom__link:hover{color:var(--blue);}
.bottom__link--legal{margin-left:auto;font-size:13px;color:var(--ink-faint);}
.bottom__link--legal:hover{color:var(--ink);}

/* =========================
   HEADER (style galerie : nom à gauche, onglets et langue regroupés à droite)
   ========================= */
.page{ overflow-x:clip; }
:root{ --header-h: 74px; --shade-h: 74px; } /* mis à jour par site.js */
.top{
  position:sticky; top:0; z-index:50;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  padding: 24px 0;
  margin-bottom: 28px;
  gap: 24px;
  transition: padding .3s ease;
}
.top > :first-child{ justify-self:start; }
.top.is-compact{ padding:14px 0; }

/* fond blanc légèrement translucide derrière le header (et les filtres accrochés dessous) */
.shade{
  position:fixed; top:0; left:0; right:0; z-index:30;
  height:var(--shade-h);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
html.is-scrolled .shade{ opacity:1; }

/* mot et icône superposés : en descendant, chaque mot s'efface en flou et son icône apparaît au même endroit */
.nav__link{ position:relative; }
.nav__text{
  display:inline-block;
  /* le soulignement du lien ne traverse pas un inline-block : on le reporte sur le mot */
  text-decoration:inherit; text-decoration-color:inherit; text-underline-offset:inherit;
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
.nav__icon{
  position:absolute; left:50%; top:50%;
  width:19px; height:19px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; filter:blur(6px);
  transform:translate(-50%,-50%) scale(.6);
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
  pointer-events:none;
}
.top.is-compact .nav__text{ opacity:0; filter:blur(6px); transform:scale(.85); }
.top.is-compact .nav__icon{ opacity:1; filter:none; transform:translate(-50%,-50%) scale(1); }
.top.is-compact .nav__link{ text-decoration-color:transparent !important; }
.top.is-compact .nav__link.is-active{ color:var(--accent); }
@media (max-width: 760px){
  .nav__icon{ display:none; }
  .top.is-compact .nav__text{ opacity:1; filter:none; transform:none; }
}
/* infobulle : le mot sous l'icône au survol */
@media (min-width: 761px){
  .top.is-compact .nav__link::after{
    content:attr(data-tip);
    position:absolute; top:calc(100% + 8px); left:50%;
    transform:translate(-50%, -4px);
    padding:5px 8px; border-radius:4px;
    background:var(--bg); border:1px solid rgba(var(--ink-rgb),.14);
    font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--ink); white-space:nowrap;
    opacity:0; pointer-events:none;
    transition:opacity var(--ease), transform var(--ease);
  }
  .top.is-compact .nav__link:hover::after,
  .top.is-compact .nav__link:focus-visible::after{ opacity:1; transform:translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce){ .nav__text, .nav__icon{ transition:none; } }
.toolbar{ transition:border-color .3s ease; }
html.is-scrolled .toolbar{ border-bottom-color:transparent; }
@media (prefers-reduced-motion: reduce){
  .shade, .top{ transition:none; }
}

/* TUILES (Repères d'À propos, Ressources de Presse, Ailleurs de Contact)
   un grand mot + une ligne discrète ; une tuile-lien s'éclaire au survol et finit par → */
.facts{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:14px; }
.fact{
  display:flex; flex-direction:column; gap:6px;
  padding:16px; border:1px solid transparent; border-radius:var(--radius);
  background:rgba(var(--ink-rgb),.03);
  transition:background-color var(--ease), border-color var(--ease);
}
a.fact:hover{ background:rgba(var(--ink-rgb),.07); border-color:rgba(var(--ink-rgb),.2); }
.fact__big{ font-size:22px; font-weight:700; letter-spacing:-.01em; }
.fact__small{ font-size:13px; color:var(--ink-faint); line-height:1.45; }
a.fact .fact__small::after{ content:" →"; }
@media (max-width:900px){ .facts{ grid-template-columns:repeat(2, 1fr); } }

/* Boutons fins (même format que les onglets) */
.ctaRow{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:56px; }
.thinBtn, .ctaRow a{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border:1px solid rgba(var(--ink-rgb),.14); border-radius:8px; background:rgba(var(--ink-rgb),.03);
  color:var(--ink); font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  transition:background-color var(--ease), border-color var(--ease);
}
.thinBtn:hover, .ctaRow a:hover{ background:rgba(var(--ink-rgb),.1); border-color:rgba(var(--ink-rgb),.28); }
.thinBtn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* TITRES DE PARTIES : petit libellé en capitales espacées + info à droite, fine ligne dessous.
   (Le nom de la page n'est pas répété : l'onglet actif du menu l'indique déjà ;
   il reste en <h1 class="sr-only"> pour Google et les lecteurs d'écran.) */
.sectionHead{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:0 0 18px; padding-bottom:10px;
  border-bottom:1px solid rgba(var(--ink-rgb),.09);
}
.sectionTitle{
  margin:0;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(var(--ink-rgb),.62);
}
.sectionMeta{ font-size:13px; color:var(--ink-faint); white-space:nowrap; }

.brand{
  font-size: 24px;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.top__nav{
  justify-self:end;
  display:flex;
  align-items:center;
  gap: 4px 20px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* Onglets : capitales espacées, l'onglet actif est souligné */
.nav__link{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  line-height: 1;
  white-space: nowrap;
  text-decoration: underline 1.5px transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}
.nav__link:hover{ text-decoration-color: var(--blue); }
.nav__link.is-active{ text-decoration-color: var(--accent); }
@media (max-width: 1240px){
  .top__nav{ gap:4px 14px; }
  .nav__link{ font-size:13px; }
  .brand{ font-size:20px; }
}

/* Langue, à droite du header (ajoutée par i18n.js) */
.langMenu--top{ justify-self:end; }
.langMenu--top .langMenu__btn{
  font-size:15px; font-weight:500; letter-spacing:.06em; color:var(--ink);
  gap:8px;
}
.langMenu--top .langMenu__caret{ width:12px; height:8px; stroke-width:1.6; }
.langMenu--top .langMenu__list{ bottom:auto; top:calc(100% + 10px); }
@media (max-width: 1240px){ .langMenu--top .langMenu__btn{ font-size:13px; } }

/* Sélecteur de langue (ajouté par i18n.js dans le pied de page, à droite de « mentions légales ») */
.langPair{ display:inline-flex; align-items:baseline; gap:14px; margin-left:auto; }
.langMenu{ position:relative; }
.langMenu__btn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13px; letter-spacing:.04em;
  color:var(--ink-faint); /* comme « mentions légales » */
}
.langMenu__btn:hover, .langMenu__btn[aria-expanded="true"]{ color:var(--ink) !important; }
.langMenu__caret{ width:9px; height:6px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.langMenu__btn[aria-expanded="true"] .langMenu__caret{ transform:rotate(180deg); }
/* le menu s'ouvre vers le haut (on est en bas de page) */
.langMenu__list{
  position:absolute; right:0; bottom:calc(100% + 8px); z-index:60;
  min-width:120px; padding:6px;
  background:var(--bg); border:1px solid rgba(var(--ink-rgb),.18); border-radius:10px;
  box-shadow:0 12px 32px rgba(var(--ink-rgb),.12);
  display:flex; flex-direction:column;
}
.langMenu__opt{
  background:none; border:0; border-radius:6px; padding:8px 10px; cursor:pointer; text-align:left;
  font:inherit; font-size:14px; color:rgba(var(--ink-rgb),.8); white-space:nowrap;
}
.langMenu__opt:hover{ background:rgba(var(--ink-rgb),.08); color:var(--ink); }
.langMenu__opt[aria-current="true"]{ color:var(--ink); font-weight:600; }
.langMenu__opt[aria-current="true"]::after{ content:" ✓"; }

@media (max-width: 1000px) and (min-width: 761px){
  .top{ grid-template-columns:1fr auto; row-gap:16px; }
  .top__nav{ grid-column:1 / -1; grid-row:2; justify-self:start; justify-content:flex-start; }
}

/* =========================
   MENU TÉLÉPHONE (bouton ajouté par site.js)
   ========================= */
.menuBtn{ display:none; }
.menuFoot{ display:none; } /* réseaux + langue du menu téléphone */

@media (max-width: 760px){
  .top{ grid-template-columns:1fr auto; padding: 14px 0; margin-bottom: 20px; }
  .langMenu--top{ display:none; }
  .brand{ font-size: 18px; padding-bottom: 0; }

  .menuBtn{
    display:inline-flex; align-items:center; gap:10px;
    position:relative; z-index:101;
    min-height:44px; padding:0 2px; margin-right:-2px;
    background:none; border:0; color:var(--ink); cursor:pointer;
    font:inherit; font-size:15px; font-weight:500;
  }
  .menuBtn__icon{ position:relative; width:22px; height:12px; }
  .menuBtn__icon i{
    position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor;
    transition: transform .25s ease, top .25s ease;
  }
  .menuBtn__icon i:first-child{ top:0; }
  .menuBtn__icon i:last-child{ top:10px; }
  .top.is-open .menuBtn__icon i:first-child{ top:5px; transform:rotate(45deg); }
  .top.is-open .menuBtn__icon i:last-child{ top:5px; transform:rotate(-45deg); }

  /* Menu plein écran : liens alignés sous le header, séparés par un trait fin et numérotés,
     qui apparaissent l'un après l'autre ; réseaux + langue en bas */
  .top__nav{ display:none; }
  .top.is-open .brand{ position:relative; z-index:101; }
  .top.is-open .top__nav{
    display:flex; position:fixed; inset:0; z-index:100; justify-self:stretch;
    flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap;
    gap:0; padding:calc(var(--header-h) + 20px) 20px 28px;
    background:var(--bg);
    overflow-y:auto;
    counter-reset:nav;
  }
  .top.is-open .nav__link{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:16px 2px; margin:0;
    border:0; border-bottom:1px solid rgba(var(--ink-rgb),.09); border-radius:0;
    background:none;
    font-size:24px; font-weight:500; letter-spacing:.04em; line-height:1.1;
    color:rgba(var(--ink-rgb),.62);
    text-decoration:none;
    counter-increment:nav;
    animation:menuIn .42s cubic-bezier(.2,.7,.2,1) both;
    animation-delay:calc(var(--i, 0) * 40ms + 40ms);
  }
  .top.is-open .nav__link:first-child{ border-top:1px solid rgba(var(--ink-rgb),.09); }
  .top.is-open .nav__link::after{
    content:counter(nav, decimal-leading-zero);
    font-size:12px; font-weight:500; letter-spacing:.08em; color:rgba(var(--ink-rgb),.35);
    font-variant-numeric:tabular-nums;
  }
  .top.is-open .nav__link:hover{ background:none; color:var(--ink); }
  .top.is-open .nav__link.is-active{ color:var(--ink); background:none; border-color:rgba(var(--ink-rgb),.09); }
  .top.is-open .nav__link.is-active::after{ content:"●"; font-size:8px; color:var(--ink); }

  /* réseaux + langue, en bas du menu */
  .top.is-open .menuFoot{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
    margin-top:auto; padding-top:28px;
    animation:menuIn .42s cubic-bezier(.2,.7,.2,1) both; animation-delay:.34s;
  }
  .menuFoot a{ font-size:14px; color:var(--ink-soft); }
  .menuFoot__lang{ margin-left:auto; display:flex; gap:12px; }
  .menuFoot__lang a{ font-size:13px; letter-spacing:.04em; color:var(--ink-faint); }
  .menuFoot__lang a[aria-current="true"]{ color:var(--ink); }
  html.menu-open, html.menu-open body{ overflow:hidden; }
}

@keyframes menuIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .menuBtn__icon i{ transition:none; }
  .top.is-open .nav__link, .top.is-open .menuFoot{ animation:none; }
}

/* =========================
   PORTFOLIO
   (remet ton "beau" portfolio)
   ========================= */
body.portfolio .container{
  padding: 20px 48px 56px;
}
@media (max-width:768px){
  body.portfolio .container{ padding:16px 20px 40px; }
}

/* Barre d'outils : titre + onglets principaux + recherche, puis les choix de l'onglet ouvert */
/* même trait que sous le header et sous les titres de parties, même espacement (12px) partout */
.toolbar{
  position:sticky; top:var(--header-h); z-index:40; /* reste accrochée sous le header au défilement */
  padding: 10px 0 12px;
  margin: -10px 0 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb),.09);
}
.toolbar__row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px 16px;
}

/* Onglets (principaux et choix) : fins, l'onglet actif est entouré */
.tabs{ display:flex; flex-wrap:wrap; gap:2px; }
.tab{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 9px;
  border:1px solid transparent; border-radius:8px;
  background:none; color:rgba(var(--ink-rgb),.68);
  font:inherit; font-size:14px; font-weight:500; white-space:nowrap;
  cursor:pointer;
  transition: background-color var(--ease), color var(--ease);
}
.tab:hover{ color:var(--ink); background:rgba(var(--ink-rgb),.06); }
.tab[aria-pressed="true"]{
  color:var(--ink);
  background:rgba(var(--ink-rgb),.08);
  border-color:rgba(var(--ink-rgb),.26);
}
/* Onglets principaux : nom + choix en cours + flèche ; un clic déplie les choix */
.tab--group{ gap:5px; }
#groups{ gap:4px; }
.tab__value{ color:var(--ink-faint); }
.tab__caret{
  width:9px; height:6px; margin-left:1px;
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:.55; transition: transform var(--ease);
}
.tab--group[aria-expanded="true"] .tab__caret{ transform:rotate(180deg); }
/* un filtre est choisi : le choix ressort et l'onglet est entouré */
.group{
  display:inline-flex; align-items:center;
  border:1px solid transparent; border-radius:8px;
}
.group .tab--group{ border:0; height:28px; }
.group.has-filter{ border-color:rgba(var(--ink-rgb),.26); }
.group.has-filter .tab--group{ padding-right:4px; border-radius:7px 0 0 7px; }
.group.has-filter .tab__value{ color:var(--ink); }
/* × : retire le filtre de cet onglet */
.group__clear{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:28px; padding:0 4px 0 0;
  border:0; border-radius:0 7px 7px 0; background:none;
  color:rgba(var(--ink-rgb),.5); cursor:pointer;
  transition: color var(--ease), background-color var(--ease);
}
.group__clear:hover{ color:var(--ink); background:rgba(var(--ink-rgb),.06); }
.group__clear svg{ width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
/* onglet déplié */
.tab--group[aria-expanded="true"]{ color:var(--ink); background:rgba(var(--ink-rgb),.08); }

/* Ligne des choix, sous les onglets principaux */
.subtabs{
  display:flex; flex-wrap:wrap; gap:2px 4px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(var(--ink-rgb),.09);
}
.subtabs--sizes{ margin-top:6px; padding-top:0; border-top:0; }
.tab--sub{ height:28px; padding:0 8px; font-size:13px; }
.subtabs--sizes .tab--sub{ height:26px; font-size:12px; }
.tab__count{
  min-width:18px; height:16px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:5px;
  background:rgba(var(--ink-rgb),.08);
  font-size:11px; font-weight:500; color:rgba(var(--ink-rgb),.6);
  font-variant-numeric: tabular-nums;
}
.tab[aria-pressed="true"] .tab__count{ background:rgba(var(--ink-rgb),.16); color:var(--ink); }

/* Recherche avec loupe */
.search{
  position:relative;
  display:flex; align-items:center;
  width:250px;
  margin-left:auto;
}
.search__icon{
  position:absolute; left:10px;
  width:13px; height:13px;
  fill:none; stroke:rgba(var(--ink-rgb),.55); stroke-width:1.6; stroke-linecap:round;
  pointer-events:none;
}
.search input{
  width:100%; height:30px;
  padding:0 10px 0 30px;
  border:1px solid rgba(var(--ink-rgb),.14); border-radius:8px;
  background:rgba(var(--ink-rgb),.03);
  color:var(--ink); font:inherit; font-size:13px;
  outline:none;
}
.search input::placeholder{ color:var(--ink-faint); }
.search input:hover{ border-color:rgba(var(--ink-rgb),.26); }
.search input:focus{ border-color:rgba(var(--ink-rgb),.4); background:rgba(var(--ink-rgb),.06); }

/* Téléphone : onglets et choix défilent du doigt, recherche sur toute la largeur */
@media (max-width:600px){
  .toolbar__row{ gap:10px; }
  .search{ order:3; width:100%; }
  .tabs,
  .subtabs{
    flex-wrap:nowrap;
    width:calc(100% + 40px); margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tabs, .subtabs{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .tabs::-webkit-scrollbar,
  .subtabs::-webkit-scrollbar{ display:none; }
  .tabs > *, .subtabs > *{ flex:0 0 auto; }
}


body.portfolio .masonry{ column-gap:14px; columns:4; }
@media (max-width:1200px){ body.portfolio .masonry{ columns:3; } }
@media (max-width:900px){ body.portfolio .masonry{ columns:2; } }
@media (max-width:600px){
  body.portfolio .masonry{ columns:2; column-gap:10px; }
  body.portfolio .capSize{ white-space:nowrap; }

body.portfolio .piece{ margin-bottom:12px; }
  body.portfolio .cap{ padding:6px 2px 0; }
  body.portfolio .capTitle{ font-size:11px; letter-spacing:.04em; }
  body.portfolio .capMeta{ font-size:11px; margin-top:3px; }
  body.portfolio .cap .capTech{ display:none; } /* vignettes : seulement la taille */
  body.portfolio .badge{ font-size:10px; padding:3px 7px; margin-top:4px; }
}

body.portfolio .piece{
  break-inside: avoid;
  margin: 0 0 14px;
  cursor:pointer;
}

body.portfolio .imgWrap{
  position: relative;
  border:1px solid rgba(var(--ink-rgb),.18);
  overflow:hidden;
  background: rgba(var(--ink-rgb),.03);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
body.portfolio .piece:hover .imgWrap{
  transform: translateY(-2px);
  border-color: rgba(var(--ink-rgb),.35);
  background: rgba(var(--ink-rgb),.05);
}
body.portfolio .piece img{
  width:100%;
  height:auto;
  display:block;
}

body.portfolio .cap{
  padding: 8px 6px 0;
  text-align:center;
}
body.portfolio .capTitle{
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink);
}
body.portfolio .capMeta{
  margin:6px 0 0;
  font-size:12px;
  color: var(--ink-faint);
  letter-spacing:.02em;
}

body.portfolio .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background: rgba(var(--ink-rgb),.06);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
body.portfolio .badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}
body.portfolio .badge.disponible{
  color:var(--blue);
  border-color: rgba(var(--blue-rgb),.5);
}
body.portfolio .badge.disponible::before{ background:var(--blue); }
body.portfolio .badge.vendue{
  color:var(--red);
  border-color: rgba(var(--red-rgb),.5);
  opacity:.9;
}
body.portfolio .badge.vendue::before{ background:var(--red); }

/* Modal */
dialog.artDialog{
  border: none;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 92vh;
}
dialog.artDialog::backdrop{
  background: rgba(255,255,255,.97);
}

.modal{
  position: relative;
  width: min(1200px, 96vw);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
}
.modal__media{
  position: relative;
  flex: 1;
  min-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
}
.modal__info{
  padding: 14px 0 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 6px;
}
.modal__h{
  margin:0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.modal__meta{
  margin:0;
  font-size:14px;
  color: var(--ink-soft);
}
.statusText{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.statusText.disponible{ color:var(--blue); }
.statusText.vendue{ color:var(--red); }

.modal__closeBtn{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(var(--ink-rgb),.35);
  background: rgba(255,255,255,.85);
  color:var(--ink);
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal__closeBtn:hover{ background: var(--bg); }

/* Modale : précédent / suivant */
.modal__navBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(var(--ink-rgb),.35);
  background: rgba(255,255,255,.85);
  color:var(--ink);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal__navBtn[hidden]{ display:none; }
.modal__navBtn:hover{ background: var(--bg); }
.modal__navBtn--prev{ left:10px; }
.modal__navBtn--next{ right:10px; }

/* Modale : demander des informations */
.modal__cta{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  height:var(--control-h);
  padding:0 14px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: var(--fill-hover);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  transition: background-color var(--ease);
}
.modal__cta:hover{ background: rgba(var(--ink-rgb),.18); }

/* Messages d'état (aucun résultat, erreur de chargement) */
body.portfolio .statusMsg{
  column-span: all;
  margin: 24px 2px;
  color: var(--ink-soft);
  line-height: 1.6;
}
body.portfolio .statusMsg a{ border-bottom:1px solid rgba(var(--ink-rgb),.5); }

body.portfolio img{
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================
   CARTES (Leaflet) — galeries et expositions
   ========================= */
.siteMap .leaflet-tile-pane{ filter: grayscale(1) contrast(.9) brightness(1.04); }
.siteMap .leaflet-popup-content-wrapper, .siteMap .leaflet-popup-tip{ background:var(--bg); color:var(--ink); }
.siteMap .leaflet-popup-content-wrapper{ border:1px solid rgba(var(--ink-rgb),.18); border-radius:4px; }
.siteMap .leaflet-popup-close-button{ color:var(--ink-soft); }
.siteMap .leaflet-bar a{ background:var(--bg); color:var(--ink); border-bottom-color:rgba(var(--ink-rgb),.18); }
.siteMap .leaflet-bar a:hover{ background:var(--bg-deep); }
.siteMap .leaflet-control-attribution{ background:rgba(255,255,255,.85); color:var(--ink-faint); }
.siteMap .leaflet-control-attribution a{ color:var(--ink-soft); }

/* =========================
   GALERIES : carte + liste reliées (script.js)
   ========================= */
.galCard{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  border:1px solid rgba(var(--ink-rgb),.12);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:rgba(var(--ink-rgb),.02);
  height:min(640px, calc(100vh - var(--shade-h, 140px) - 40px));
  min-height:460px;
}
.galMap{
  position:relative;
  isolation:isolate; /* les calques Leaflet restent sous le header collant */
  background:var(--bg-deep);
  border-right:1px solid rgba(var(--ink-rgb),.1);
}
#map{ position:absolute; inset:0; background:var(--bg-deep); }

.galSide{ min-height:0; display:flex; flex-direction:column; }
.galList{
  flex:1; min-height:0; overflow:auto;
  display:flex; flex-direction:column; gap:6px;
  padding:10px;
  scrollbar-width:thin; scrollbar-color:rgba(var(--ink-rgb),.18) transparent;
}

/* une galerie */
.galItem{
  padding:14px 14px 12px;
  border:1px solid transparent; border-radius:var(--radius);
  background:rgba(var(--ink-rgb),.03);
  cursor:pointer;
  transition: background-color var(--ease), border-color var(--ease), opacity .3s ease, filter .3s ease;
}
.galItem:hover, .galItem.is-hot{ background:rgba(var(--ink-rgb),.07); }
.galItem.is-active{ border-color:rgba(var(--ink-rgb),.28); background:rgba(var(--ink-rgb),.08); }
.galItem.is-dim{ opacity:.22; filter:grayscale(1); }
.galItem:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.galItem__name{ margin:0; font-size:14px; font-weight:700; line-height:1.3; }
.galItem__place{ margin:4px 0 0; font-size:13px; color:var(--ink); opacity:.8; }
.galItem__addr{ margin:2px 0 0; font-size:12px; color:var(--ink-faint); line-height:1.4; }

/* actions : mêmes boutons fins que les onglets */
.galActions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.galBtn{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 9px;
  border:1px solid rgba(var(--ink-rgb),.14); border-radius:8px;
  background:rgba(var(--ink-rgb),.03);
  font-size:12px; font-weight:500; color:rgba(var(--ink-rgb),.85);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.galBtn:hover{ background:rgba(var(--ink-rgb),.1); border-color:rgba(var(--ink-rgb),.28); color:var(--ink); }
.galBtn svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* lien vers la ligne du temps */
.galExpos{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:12px; color:var(--blue);
}
.galExpos span{ transition:transform var(--ease); }
.galExpos:hover{ color:var(--blue-hi); }
.galExpos:hover span{ transform:translateX(3px); }

/* points de la carte : blanc cerclé, halo qui pulse au survol, anneau quand sélectionné */
.galPin{ background:none; border:0; }
.galPin i{
  position:absolute; left:50%; top:50%;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:var(--ink); border:2px solid var(--bg);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.5);
  transition: transform .25s ease, opacity .3s ease;
}
.galPin::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:rgba(var(--ink-rgb),.35); opacity:0; pointer-events:none;
}
.galPin.is-hot i, .galPin.is-active i{ transform:scale(1.35); }
.galPin.is-hot::after{ animation:pinPulse 1.2s ease-out infinite; }
.galPin.is-active i{ background:var(--accent); }
.galPin.is-dim{ opacity:.25; }
@keyframes pinPulse{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(3.4); opacity:0; } }

/* bulle de la carte */
.siteMap .leaflet-popup-content-wrapper{ padding:0; }
.siteMap .leaflet-popup-content{ margin:10px 12px; }
.galPop{ display:flex; flex-direction:column; gap:3px; font-family:var(--font); }
.galPop strong{ font-size:13px; }
.galPop span{ font-size:12px; opacity:.75; }

/* Tablette / téléphone : carte au-dessus, liste dessous (la page défile) */
@media (max-width:1050px){
  .galCard{ grid-template-columns:1fr; height:auto; min-height:0; }
  .galMap{ height:clamp(260px, 48vh, 420px); border-right:0; border-bottom:1px solid rgba(var(--ink-rgb),.1); }
  .galList{ overflow:visible; }
}
@media (max-width:600px){
  .galCard{ border:0; border-radius:0; background:none; margin:0 -20px; }
  .galMap{ border-radius:0; }
  .galList{ padding:12px 20px 0; gap:8px; }
}
@media (prefers-reduced-motion: reduce){
  .galPin.is-hot::after{ animation:none; }
}

/* =========================
   ACCENTS DE COULEUR
   Le rouge marque ce qui est choisi ou cliquable (onglet actif, filtre, lien, sélection) ;
   le reste de l'interface reste en noir et blanc. Une seule règle par état, pour tout le site.
   ========================= */
::selection{ background:rgba(var(--blue-rgb),.18); color:var(--ink); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{ outline-color:var(--blue); }

/* menu : page en cours */
.top.is-open .nav__link.is-active{ color:var(--ink); background:none; }
.top.is-open .nav__link.is-active::after{ color:var(--accent); }

/* titres de parties : petit trait rouge devant */
.sectionTitle{ display:inline-flex; align-items:center; gap:10px; }
.sectionTitle::before{ content:""; width:14px; height:1.5px; border-radius:2px; background:var(--blue); }

/* onglets et filtres */
.tab[aria-pressed="true"]{ background:rgba(var(--blue-rgb),.08); border-color:rgba(var(--blue-rgb),.5); color:var(--blue); }
.tab[aria-pressed="true"] .tab__count{ background:rgba(var(--blue-rgb),.14); color:var(--blue); }
.group.has-filter{ border-color:rgba(var(--blue-rgb),.5); background:rgba(var(--blue-rgb),.06); }
.group.has-filter .tab__value{ color:var(--blue); }
.group__clear:hover{ color:var(--blue-hi); background:rgba(var(--blue-rgb),.12); }
.search input:focus{ border-color:rgba(var(--blue-rgb),.55); }
.viewSwitch .tab[aria-pressed="true"]{ color:var(--blue); }

/* champs de formulaire */
.form input:focus, .form textarea:focus{ border-color:rgba(var(--blue-rgb),.55); }

/* bouton principal (Envoyer) : rouge plein */
.form .sendBtn{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.form .sendBtn:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }

/* tuiles-liens et boutons fins */
a.fact:hover{ border-color:rgba(var(--blue-rgb),.45); }
a.fact .fact__small::after{ color:var(--accent); }
.thinBtn:hover, .ctaRow a:hover, .galBtn:hover{ border-color:rgba(var(--blue-rgb),.5); color:var(--blue); }

/* liens dans le texte */
.faq .faq__a a, .form .formNote a, main.legal a{ color:var(--blue); border-bottom-color:rgba(var(--blue-rgb),.4); }
.faq .faq__a a:hover, .form .formNote a:hover, main.legal a:hover{ color:var(--blue-hi); border-bottom-color:var(--blue-hi); }
.faq details[open] summary::after{ border-color:rgba(var(--blue-rgb),.5); color:var(--blue); }

/* portfolio : cadre rouge au survol d'une œuvre ; bouton de la fiche (portfolio et accueil) */
body.portfolio .piece:hover .imgWrap{ border-color:rgba(var(--accent-rgb),.6); }
.modal__cta{ border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.14); }
.modal__cta:hover{ background:rgba(var(--accent-rgb),.24); }

/* galeries : galerie choisie */
.galItem.is-active{ border-color:rgba(var(--blue-rgb),.5); background:rgba(var(--blue-rgb),.06); }
.galPin.is-active i{ background:var(--accent); }

/* expositions : années qui correspondent au filtre */
.tlYear.is-hit .tlDot{ background:var(--blue); border-color:var(--blue); }

/* expositions : liseré de couleur selon le type (personnelle, collective, salon) */
.tlTrack .tlCard{ border-top:2px solid rgba(var(--type-rgb, var(--ink-rgb)),.55); }
.tlCard[data-type="solo"]{ --type-rgb:var(--accent-rgb); }
.tlCard[data-type="group"]{ --type-rgb:var(--blue-rgb); }
.tlCard[data-type="salon"]{ --type-rgb:94,104,128; }

/* =========================
   FOND « SALLE » : la galerie 3D floutée derrière chaque page (un angle différent par page)
   La page passe en couleurs claires sur ce fond sombre : on redéfinit les variables de couleur.
   ========================= */
body.salle{
  --bg: #0b1120;
  --bg-deep: #151c2c;
  --ink-rgb: 236,231,222;
  --ink-soft: rgba(236,231,222,.8);
  --ink-faint: rgba(236,231,222,.6);
  --accent-rgb: 236,118,104;
  --accent-hi: #f3a198;
  --red-rgb: 236,118,104;
  --blue-rgb: 146,174,240;
  --blue-hi: #bccdf6;
  /* couleurs calculées à partir des précédentes (à redéclarer ici pour qu'elles suivent) */
  --ink: rgb(var(--ink-rgb));
  --accent: rgb(var(--accent-rgb));
  --red: rgb(var(--red-rgb));
  --blue: rgb(var(--blue-rgb));
  --border: rgba(var(--ink-rgb),.18);
  --fill: rgba(var(--ink-rgb),.06);
  --fill-hover: rgba(var(--ink-rgb),.12);
  --line: rgba(var(--ink-rgb),.22);
  --line-strong: rgba(var(--ink-rgb),.45);
  color: var(--ink);
  background: #0b1120;
  color-scheme: dark;
}
/* la salle, floutée et assombrie, fixe derrière la page */
body.salle::before{
  content:""; position:fixed; inset:-120px; z-index:-2; pointer-events:none;
  /* essai : bleu nuit en plusieurs nuances (au lieu de la photo floutée de la salle) */
  background:
    radial-gradient(60% 55% at 12% 8%, #152a52 0%, rgba(21,42,82,0) 70%),
    radial-gradient(55% 60% at 92% 22%, #0f1e44 0%, rgba(15,30,68,0) 70%),
    radial-gradient(70% 55% at 70% 100%, #122244 0%, rgba(18,34,68,0) 70%),
    radial-gradient(50% 45% at 18% 85%, #0a283a 0%, rgba(10,40,58,0) 70%),
    radial-gradient(40% 35% at 50% 45%, #191636 0%, rgba(25,22,54,0) 70%),
    #060b18;
  filter:blur(30px);
}
body.salle::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,8,16,.3), rgba(5,8,16,.5));
}
body.salle .shade{ background:rgba(10,15,27,.6); }
body.salle dialog.artDialog::backdrop{ background:rgba(8,12,22,.94); }
body.salle .modal__closeBtn, body.salle .modal__navBtn{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }
body.salle .modal__closeBtn:hover, body.salle .modal__navBtn:hover{ background:rgba(255,255,255,.2); }
body.salle--portfolio{ --salle-img:url("images/scene/salle-portfolio.jpg"); }
body.salle--galeries{ --salle-img:url("images/scene/salle-galeries.jpg"); }
body.salle--expositions{ --salle-img:url("images/scene/salle-expositions.jpg"); }
body.salle--apropos{ --salle-img:url("images/scene/salle-apropos.jpg"); }
body.salle--presse{ --salle-img:url("images/scene/salle-presse.jpg"); }
body.salle--contact{ --salle-img:url("images/scene/salle-contact.jpg"); }
body.salle--mentions{ --salle-img:url("images/scene/salle-mentions.jpg"); }
body.salle--404{ --salle-img:url("images/scene/salle-404.jpg"); }

/* éléments qui avaient un fond blanc en dur */
body.salle .siteMap .leaflet-control-attribution{ background:rgba(10,15,27,.7); }
body.salle .siteMap .leaflet-tile-pane{ filter:grayscale(1) invert(1) brightness(.75) contrast(.9); }
body.salle .menuBtn, body.salle .top.is-open .top__nav{ color:var(--ink); }

/* =========================
   ÉPURE : moins de composants, un seul accent (rouge, rare), place aux toiles et au texte
   ========================= */
/* un seul accent : le bleu devient l'ivoire du texte (le rouge reste pour l'onglet actif et « Envoyer ») */
body.salle{ --blue-rgb: 236,231,222; --blue: rgb(var(--blue-rgb)); --blue-hi:#fff; }
.nav__link:hover{ text-decoration-color: currentColor; }
.faq .faq__a a, .form .formNote a, main.legal a{ border-bottom-color:rgba(var(--ink-rgb),.35); }

/* plus de petits titres de section : ils restent pour les lecteurs d'écran */
.sectionHead{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* plus de flèches ni de cadres sur les liens-tuiles restants */
a.fact .fact__small::after{ content:none; }

/* filtres : plus de compteurs, onglets choisis sans cadre (juste soulignés) */
.tab__count{ display:none; }
.tab[aria-pressed="true"], .group.has-filter{ background:none !important; border-color:transparent !important; }
.tab[aria-pressed="true"] > span:first-child, .group.has-filter .tab__value{ text-decoration:underline 1px; text-underline-offset:5px; }

/* recherche réduite à une loupe, qui s'ouvre au clic */
.search{ width:34px; transition:width .3s ease; }
.search:focus-within{ width:240px; }
.search input{ background:none; border-color:transparent; padding-left:30px; cursor:pointer; }
.search input::placeholder{ color:transparent; }
.search:focus-within input{ border-color:rgba(var(--ink-rgb),.25); cursor:text; }
.search:focus-within input::placeholder{ color:var(--ink-faint); }
.search__icon{ stroke:var(--ink); }
@media (max-width:600px){ .search, .search:focus-within{ width:100%; } .search input::placeholder{ color:var(--ink-faint); } }

/* portfolio : vignettes sans cadre, statut en petit texte gris */
body.portfolio .imgWrap, body.portfolio .piece:hover .imgWrap{ border:0; background:none; transform:none; }
body.portfolio .piece:hover img{ opacity:.88; }
body.portfolio .piece img{ transition:opacity .2s ease; }
body.portfolio .badge, body.portfolio .badge.disponible, body.portfolio .badge.vendue{
  border:0; background:none; padding:0; margin-top:4px;
  font-size:12px; font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--ink-faint);
}
body.portfolio .badge::before{ display:none; }
.statusText, .statusText.disponible, .statusText.vendue{ color:var(--ink-faint); font-weight:400; letter-spacing:.02em; text-transform:none; }

/* contact : le formulaire seul, sans cadre (les réseaux sont déjà dans le pied de page) */
.contactPage .contact{ display:block; max-width:none; }
.contactPage .form{ border:0; background:none; padding:0; }

/* presse : la couverture et deux lignes, sans ombre ni cadre */
.presse .pub__cover{ border:0; box-shadow:none; border-radius:0; }

/* header : plus de flou, un simple fond bleu nuit quand on descend */
body.salle .shade{ background:#070c19; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* =========================
   INDEX ÉDITORIAL (À propos, Presse, Contact) : une grande phrase, puis des rangées
   séparées par un filet : intitulé à gauche, contenu à droite
   ========================= */
.ix-lead{
  margin:28px 0 88px; max-width:20ch;
  font-size:clamp(34px, 5vw, 76px); font-weight:400; line-height:1.04; letter-spacing:-.02em;
  color:var(--ink);
}
.ix-row{
  display:grid; grid-template-columns:minmax(160px, 1fr) 3fr; gap:24px 48px;
  padding:28px 0 36px; border-top:1px solid rgba(var(--ink-rgb),.16);
}
.ix-row:last-of-type{ border-bottom:1px solid rgba(var(--ink-rgb),.16); margin-bottom:24px; }
.ix-label{
  margin:0; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.ix-label__img{ display:block; width:100%; max-width:220px; margin-top:22px; filter:grayscale(1) contrast(1.05); }
.ix-sticky{ position:sticky; top:calc(var(--shade-h, 90px) + 24px); align-self:start; }

/* liste de lignes : date / texte / action */
.ix-list{ list-style:none; margin:0; padding:0; }
.ix-list li{
  display:grid; grid-template-columns:7em 1fr auto; gap:6px 28px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid rgba(var(--ink-rgb),.08);
}
.ix-list li:first-child{ padding-top:0; }
.ix-list li:last-child{ border-bottom:0; padding-bottom:0; }
.ix-list__k{ font-size:14px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.ix-list__v{ font-size:clamp(18px, 1.7vw, 24px); line-height:1.3; color:var(--ink); }
.ix-list__v small{ display:block; margin-top:4px; font-size:14px; color:var(--ink-soft); }
.ix-list__a{ display:flex; gap:18px; font-size:13px; white-space:nowrap; }
.ix-link{
  background:none; border:0; padding:0 0 1px; cursor:pointer; font:inherit; color:var(--ink);
  border-bottom:1px solid rgba(var(--ink-rgb),.35);
}
.ix-link:hover{ border-bottom-color:var(--ink); }

.ix-text{ columns:2; column-gap:48px; }
.ix-text p{ margin:0 0 16px; break-inside:avoid-column; color:var(--ink-soft); font-size:15px; line-height:1.7; }
.ix-text strong{ color:var(--ink); font-weight:600; }

/* contact : l'adresse en très grand */
.ix-mail{
  display:inline-block; align-self:flex-start; margin:28px 0 88px;
  font-size:clamp(32px, 5.4vw, 80px); font-weight:400; line-height:1; letter-spacing:-.02em; color:var(--ink);
  border-bottom:2px solid rgba(var(--ink-rgb),.25); padding-bottom:6px;
  transition:border-color var(--ease);
}
.ix-mail:hover{ border-bottom-color:var(--accent); }

/* formulaire en lignes : pas de cadres, seulement un filet sous chaque champ */
.ix-form{ max-width:760px; border:0 !important; background:none !important; padding:0 !important; gap:22px 32px !important; }
.ix-form input, .ix-form textarea{
  border:0 !important; border-bottom:1px solid rgba(var(--ink-rgb),.25) !important; border-radius:0 !important;
  background:none !important; padding-left:0 !important; padding-right:0 !important;
}
.ix-form textarea{ min-height:120px; }
.ix-form input:focus, .ix-form textarea:focus{ border-bottom-color:var(--ink) !important; }
.ix-form .sendBtn{ border-radius:999px; padding:0 26px; height:42px; }

@media (max-width:760px){
  .ix-lead, .ix-mail{ margin:12px 0 48px; }
  .ix-row{ grid-template-columns:1fr; gap:16px; padding:22px 0 28px; }
  .ix-sticky{ position:static; }
  .ix-label__img{ max-width:160px; margin-top:14px; }
  .ix-list li{ grid-template-columns:1fr; gap:4px; }
  .ix-text{ columns:1; }
}

/* =========================
   FORMULAIRE DE CONTACT (style « dark form ») : champs pilules sombres, cases à cocher,
   bouton « Envoyer » + rond à flèche, bouton secondaire en contour
   ========================= */
.ix-form{ gap:26px 20px !important; }
.ix-form .field__label{ font-size:13px; font-weight:500; color:var(--ink); }
.ix-form .field__label em{ color:var(--ink-faint); font-weight:400; }
.ix-form .req{ color:var(--accent); font-weight:500; }
.ix-form input, .ix-form textarea{
  height:56px !important; padding:0 22px !important;
  border:1px solid transparent !important; border-radius:999px !important;
  background:rgba(255,255,255,.06) !important;
  font-size:15px;
  transition:background-color .2s ease, border-color .2s ease;
}
.ix-form textarea{ height:auto !important; min-height:150px; padding:18px 22px !important; border-radius:24px !important; resize:vertical; }
.ix-form input::placeholder, .ix-form textarea::placeholder{ color:rgba(var(--ink-rgb),.35); }
.ix-form input:hover, .ix-form textarea:hover{ background:rgba(255,255,255,.08) !important; }
.ix-form input:focus, .ix-form textarea:focus{ background:rgba(255,255,255,.09) !important; border-color:rgba(var(--ink-rgb),.3) !important; }
/* champ rempli correctement : petite coche à droite */
.ix-form input[required]:not(:placeholder-shown):valid{
  padding-right:52px !important;
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ece7de' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='m6.8 10.2 2.2 2.2 4.2-4.6'/%3E%3C/svg%3E") right 20px center / 20px no-repeat !important;
}

/* sujet : cases à cocher */
.ix-form .topics{ display:grid; grid-template-columns:repeat(2, max-content); gap:14px 56px; margin-top:6px; }
.ix-form .topics .tab{
  height:auto; padding:0; border:0 !important; background:none !important;
  display:inline-flex; align-items:center; gap:12px;
  font-size:15px; font-weight:500; color:var(--ink); text-decoration:none !important;
}
.ix-form .topics .tab > span:first-child{ text-decoration:none !important; }
.ix-form .tick{
  width:20px; height:20px; border-radius:5px; flex:none;
  border:1.5px solid rgba(var(--ink-rgb),.45);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease;
}
.ix-form .topics .tab:hover .tick{ border-color:var(--ink); }
.ix-form .topics .tab[aria-checked="true"] .tick{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b1120' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 10.3 3 3 6-6.6'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-color:var(--ink);
}

/* pied du formulaire : « Envoyer » + rond blanc à flèche ; à droite, bouton secondaire en contour */
.ix-form .form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 18px; margin-top:6px; }
.ix-form .sendBtn{
  display:inline-flex; align-items:center; gap:6px; height:auto; padding:0 !important;
  border:0 !important; background:none !important; cursor:pointer; color:var(--ink);
}
.ix-form .sendBtn > span{
  display:inline-flex; align-items:center; height:56px; padding:0 28px; border-radius:999px;
  background:rgba(255,255,255,.08); font-size:15px; font-weight:600; transition:background-color .2s ease;
}
.ix-form .sendBtn__arrow{
  width:56px; height:56px; border-radius:50%; background:#f4f1ea; color:#0b1120;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.ix-form .sendBtn__arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ix-form .sendBtn:hover > span{ background:rgba(255,255,255,.13); }
.ix-form .sendBtn:hover .sendBtn__arrow{ transform:translateX(6px) rotate(-45deg); }
.ix-form .sendBtn:disabled{ opacity:.5; }
.form__alt{ margin-left:auto; display:inline-flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-faint); }
.altBtn{
  display:inline-flex; align-items:center; height:46px; padding:0 22px; border-radius:999px;
  border:1px solid rgba(var(--ink-rgb),.4); color:var(--ink); font-size:14px; font-weight:500;
  transition:background-color .2s ease, border-color .2s ease;
}
.altBtn:hover{ background:rgba(255,255,255,.06); border-color:var(--ink); }
.ix-form .formNote{ flex-basis:100%; margin:4px 0 0; }
@media (max-width:760px){
  .ix-form .topics{ grid-template-columns:1fr 1fr; gap:14px 20px; }
  .form__alt{ margin-left:0; }
}

/* le formulaire posé dans un grand panneau sombre arrondi, champs en contour */
.formCard{
  max-width:860px; margin:0 0 72px;
  padding:clamp(28px, 5vw, 64px);
  border-radius:40px;
  background:linear-gradient(180deg, rgba(30,32,38,.92), rgba(20,22,27,.92));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 40px 120px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.formCard__title{
  margin:0 0 40px; max-width:22ch;
  font-size:clamp(24px, 2.6vw, 34px); font-weight:400; line-height:1.2; letter-spacing:-.01em; color:#f4f1ea;
}
.formCard .ix-form{ max-width:none; }
.formCard .ix-form input, .formCard .ix-form textarea{
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,.2) !important;
}
.formCard .ix-form input:hover, .formCard .ix-form textarea:hover{ border-color:rgba(255,255,255,.32) !important; background:transparent !important; }
.formCard .ix-form input:focus, .formCard .ix-form textarea:focus{ border-color:rgba(255,255,255,.55) !important; background:rgba(255,255,255,.03) !important; }
.formCard .ix-form input[required]:not(:placeholder-shown):valid{ background-color:transparent !important; }
.formCard .ix-form .field__label{ font-weight:400; font-size:14px; }
.formCard .ix-form .sendBtn > span{ background:rgba(255,255,255,.1); }
.formCard .ix-form .tick{ border-radius:6px; border-color:rgba(255,255,255,.35); }
@media (max-width:760px){ .formCard{ border-radius:28px; margin:0 -8px 48px; } }

/* ===== Grands titres de page (Presse, Contact) : même voix que le menu, en très grand ===== */
.bigTitle{ margin:40px 0 48px; font-size:clamp(44px, 7vw, 112px); font-weight:700; font-stretch:112%; text-transform:uppercase; letter-spacing:-.01em; line-height:.9; color:var(--ink); }
.bigTitle sup{ font-size:.2em; font-weight:500; letter-spacing:.06em; vertical-align:top; margin-left:.25em; position:relative; top:.6em; color:var(--ink-faint); font-stretch:100%; }
/* grand lien en contour blanc qui se remplit au survol */
.bigLink{ display:block; padding:40px 0 48px; margin-bottom:96px; border-top:1px solid rgba(var(--ink-rgb),.16); border-bottom:1px solid rgba(var(--ink-rgb),.16); }
.bigLink__k{ display:block; margin-bottom:14px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.bigLink__w{ display:flex; align-items:center; gap:.3em; font-size:clamp(52px, 9vw, 150px); font-weight:700; font-stretch:112%; text-transform:uppercase; line-height:.9; letter-spacing:-.01em;
  color:rgba(255,255,255,.04); -webkit-text-stroke:1.5px rgba(255,255,255,.85); transition:color .4s ease; }
.bigLink__w i{ font-style:normal; font-stretch:100%; -webkit-text-stroke:0; color:var(--accent); font-size:.6em; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.bigLink:hover .bigLink__w{ color:rgba(255,255,255,.92); }
.bigLink:hover .bigLink__w i{ transform:translateX(.25em); }

/* ===== Contact : formulaire à gauche, à droite l'e-mail et les liens en grand contour blanc ===== */
.contactPage .cx{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:start; margin-bottom:96px; }
.cx .formCard{ margin:0; max-width:none; }
.cx__side{ position:sticky; top:calc(var(--shade-h, 90px) + 24px); padding-top:8px; }
.cx__k{ margin:0 0 12px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.cx__k--gap{ margin-top:56px; }
.cx__mail{ font-size:clamp(22px, 2.2vw, 32px); font-weight:500; letter-spacing:-.01em; color:var(--ink); border-bottom:1px solid rgba(var(--ink-rgb),.3); transition:border-color .2s ease; }
.cx__mail:hover{ border-bottom-color:var(--accent); }
.cx__links{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(var(--ink-rgb),.16); }
.cx__links li{ border-bottom:1px solid rgba(var(--ink-rgb),.16); }
.cx__links a{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 12px;
  font-size:clamp(30px, 3.4vw, 52px); font-weight:700; font-stretch:112%; text-transform:uppercase; line-height:1; letter-spacing:-.01em;
  color:rgba(255,255,255,.04); -webkit-text-stroke:1.2px rgba(255,255,255,.85); transition:color .35s ease; }
.cx__links a i{ font-style:normal; font-stretch:100%; font-size:.5em; -webkit-text-stroke:0; color:var(--ink-faint); transition:color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.cx__links a:hover{ color:rgba(255,255,255,.92); }
.cx__links a:hover i{ color:var(--accent); transform:translate(3px, -3px); }
@media (max-width:900px){ .contactPage .cx{ grid-template-columns:1fr; } .cx__side{ position:static; } }
.bigTitle--sub{ margin-top:0; scroll-margin-top:calc(var(--shade-h, 90px) + 24px); }

/* ===== Sous-menu À propos (L'artiste, Presse, Q&A), au survol =====
   sans cadre : les trois mots descendent l'un après l'autre sous « À propos » ; un trait corail glisse devant celui qu'on survole */
.nav__item{ position:relative; display:inline-flex; }
.nav__sub{
  position:absolute; top:100%; left:0; z-index:30; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  min-width:max-content; padding-top:16px; pointer-events:none;
}
.nav__sub a{
  position:relative; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(236,231,222,.7);
  opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), color .2s ease, padding .3s cubic-bezier(.2,.7,.2,1);
}
.nav__sub a::before{ content:""; position:absolute; left:0; top:50%; width:0; height:1.5px; background:#ec7668; transition:width .3s cubic-bezier(.2,.7,.2,1); }
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub{ pointer-events:auto; }
.nav__item:hover .nav__sub a, .nav__item:focus-within .nav__sub a{ opacity:1; transform:none; }
.nav__item:hover .nav__sub a:nth-child(2), .nav__item:focus-within .nav__sub a:nth-child(2){ transition-delay:.05s; }
.nav__item:hover .nav__sub a:nth-child(3), .nav__item:focus-within .nav__sub a:nth-child(3){ transition-delay:.1s; }
.nav__sub a:hover{ color:#fff; padding-left:20px; transition-delay:0s !important; }
.nav__sub a:hover::before{ width:12px; }
.top.is-compact .nav__item:hover .nav__link::after{ opacity:0 !important; } /* pas d'infobulle par-dessus le sous-menu */
@media (prefers-reduced-motion: reduce){ .nav__sub a{ transform:none; transition:opacity .2s ease, color .2s ease; } }
@media (max-width:760px){ .nav__item{ display:contents; } .nav__sub{ display:none; } }

/* ===== Contact : formulaire dans la voix du site (plus de panneau ni de pastilles) =====
   petites capitales pour les intitulés, champs soulignés d'un trait, texte saisi en grand,
   sujets comme les onglets du menu (soulignés en corail), « Envoyer → » en capitales */
.contactPage .formCard{ padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.contactPage .formCard__title{ max-width:24ch; margin:0 0 48px; font-size:clamp(24px, 2.4vw, 34px); font-weight:500; line-height:1.15; letter-spacing:-.015em; color:var(--ink); }
.contactPage .ix-form{ gap:34px 40px !important; }
.contactPage .ix-form .field{ gap:4px; }
.contactPage .ix-form .field__label{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.contactPage .ix-form .field__label em{ text-transform:none; letter-spacing:0; font-size:12px; color:rgba(var(--ink-rgb),.35); }
.contactPage .ix-form .req{ color:var(--accent); }
.contactPage .formCard .ix-form input, .contactPage .formCard .ix-form textarea{
  height:auto !important; padding:8px 0 12px !important; border:0 !important; border-bottom:1px solid rgba(var(--ink-rgb),.22) !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; font-size:clamp(18px, 1.5vw, 22px) !important; color:var(--ink);
  transition:border-color .2s ease;
}
.contactPage .formCard .ix-form textarea{ min-height:120px; resize:vertical; }
.contactPage .formCard .ix-form input:hover, .contactPage .formCard .ix-form textarea:hover{ border-bottom-color:rgba(var(--ink-rgb),.45) !important; background:transparent !important; }
.contactPage .formCard .ix-form input:focus, .contactPage .formCard .ix-form textarea:focus{ border-bottom-color:var(--ink) !important; background:transparent !important; outline:none; }
.contactPage .ix-form input::placeholder, .contactPage .ix-form textarea::placeholder{ color:rgba(var(--ink-rgb),.25); }
/* sujets */
.contactPage .ix-form .topics{ display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:12px; }
.contactPage .ix-form .topics .tab{ gap:0; padding:0 0 4px; font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(var(--ink-rgb),.5);
  border-bottom:1.5px solid transparent !important; border-radius:0; transition:color .2s ease, border-color .2s ease; }
.contactPage .ix-form .topics .tab:hover{ color:var(--ink); }
.contactPage .ix-form .topics .tab[aria-checked="true"]{ color:var(--ink); border-bottom-color:var(--accent) !important; }
.contactPage .ix-form .tick{ display:none; }
/* pied : Envoyer → */
.contactPage .ix-form .form__foot{ align-items:center; gap:18px 28px; margin-top:8px; }
.contactPage .ix-form .sendBtn{ gap:14px; }
.contactPage .ix-form .sendBtn > span, .contactPage .formCard .ix-form .sendBtn > span{
  height:54px; padding:0 30px; border-radius:0; background:var(--ink); color:#0b1120;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background-color .2s ease;
}
.contactPage .ix-form .sendBtn__arrow{ width:auto; height:auto; border-radius:0; background:none; color:var(--accent); }
.contactPage .ix-form .sendBtn__arrow svg{ width:22px; height:22px; stroke-width:1.4; }
.contactPage .ix-form .sendBtn:hover > span{ background:#fff; }
.contactPage .ix-form .sendBtn:hover .sendBtn__arrow{ transform:translateX(6px); }
.contactPage .form__alt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.contactPage .altBtn{ height:auto; padding:0 0 2px; border:0; border-bottom:1px solid rgba(var(--ink-rgb),.35); border-radius:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.contactPage .altBtn:hover{ background:none; border-bottom-color:var(--accent); }
.contactPage .ix-form .formNote{ font-size:12px; color:var(--ink-faint); }
@media (max-width:760px){ .contactPage .formCard{ margin:0 0 48px; } .contactPage .ix-form{ gap:28px 20px !important; } }

/* ===== Portfolio dans la voix du site : grand titre, filtres en petites capitales, légendes alignées à gauche ===== */
body.portfolio .pfTitle{ margin:clamp(16px, 4vh, 40px) 0 clamp(16px, 3vh, 32px); }
body.portfolio .tab--group, body.portfolio .tab--group .tab__name, body.portfolio .tab--group .tab__value{ font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
body.portfolio .tab--group .tab__name{ color:var(--ink); }
body.portfolio .tab--group .tab__value{ color:var(--ink-faint); }
body.portfolio .subtabs .tab{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
body.portfolio .cap{ padding:12px 0 0; text-align:left; }
body.portfolio .capTitle{ font-size:13px; font-weight:700; font-stretch:112%; letter-spacing:.02em; }
body.portfolio .capMeta{ margin-top:4px; font-size:12px; letter-spacing:0; }
body.portfolio .badge, body.portfolio .badge.disponible, body.portfolio .badge.vendue{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px; padding:0; border:0; background:none; opacity:1;
  font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
body.portfolio .badge.disponible::before{ display:inline-block; content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
body.portfolio .badge.disponible{ color:var(--ink); }
@media (max-width:600px){ body.portfolio .cap{ padding-top:8px; } body.portfolio .capTitle{ font-size:11px; } }

/* =========================
   BOUTON CLAIR / SOMBRE (ajouté par site.js), entre le menu et FR/EN
   ========================= */
.top{ grid-template-columns:1fr auto auto auto; }
.top > .brand{ order:0; } .top > .menuBtn, .top > .top__nav{ order:1; } .top > .themeBtn{ order:2; } .top > .langMenu{ order:3; }
.themeBtn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; margin:0 -4px 0 4px; border:0; background:none; color:var(--ink); cursor:pointer; }
.themeBtn svg{ width:19px; height:19px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.themeBtn__sun, .themeBtn__moon{ transform-box:fill-box; transform-origin:center; transition:opacity .4s ease, transform .6s cubic-bezier(.6,0,.2,1); }
.themeBtn__moon{ opacity:0; transform:rotate(-90deg) scale(.5); }
.themeBtn__sun circle, .themeBtn__moon{ fill:currentColor; }
.themeBtn__sun path{ stroke-width:2; }
.themeBtn[aria-pressed="true"] .themeBtn__sun{ opacity:0; transform:rotate(90deg) scale(.5); }
.themeBtn[aria-pressed="true"] .themeBtn__moon{ opacity:1; transform:none; }
.themeBtn:hover svg{ color:var(--accent); }
@media (max-width: 1000px) and (min-width: 761px){ .top{ grid-template-columns:1fr auto auto; } }
@media (max-width: 760px){
  .top{ grid-template-columns:1fr auto auto; }
  .top{ column-gap:14px; }
  .top > .themeBtn{ order:1; margin:0; } .top > .menuBtn{ order:2; }
}
/* le passage d'une version à l'autre en fondu */
html.theme-anim body, html.theme-anim body *{ transition:background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, stroke .5s ease !important; }

/* =========================
   VERSION CLAIRE : papier ivoire (pas un blanc pur), encre bleu nuit, rouge pour les détails
   ========================= */
html[data-theme="light"]{ background:#efebe3; color-scheme:light; }
html[data-theme="light"] body.salle{
  --bg:#efebe3; --bg-deep:#e5dfd3;
  --ink-rgb:22,30,56;
  --ink-soft:rgba(22,30,56,.78); --ink-faint:rgba(22,30,56,.55);
  --accent-rgb:200,64,52; --accent-hi:#a22e24;
  --red-rgb:200,64,52;
  --blue-rgb:34,64,150; --blue-hi:#1a3580;
  --ink:rgb(var(--ink-rgb)); --accent:rgb(var(--accent-rgb)); --red:rgb(var(--red-rgb)); --blue:rgb(var(--blue-rgb));
  --border:rgba(var(--ink-rgb),.16); --fill:rgba(var(--ink-rgb),.05); --fill-hover:rgba(var(--ink-rgb),.1);
  --line:rgba(var(--ink-rgb),.2); --line-strong:rgba(var(--ink-rgb),.45);
  background:#efebe3; color:var(--ink); color-scheme:light;
}
/* fond : papier légèrement nuancé (une pointe de bleu et de chaud dans les coins) */
html[data-theme="light"] body.salle::before{
  background:
    radial-gradient(60% 55% at 12% 8%, #e3e7f0 0%, rgba(227,231,240,0) 70%),
    radial-gradient(55% 60% at 92% 22%, #f4ece0 0%, rgba(244,236,224,0) 70%),
    radial-gradient(70% 55% at 70% 100%, #e6e8ef 0%, rgba(230,232,239,0) 70%),
    radial-gradient(50% 45% at 18% 85%, #f1e6da 0%, rgba(241,230,218,0) 70%),
    #efebe3;
}
html[data-theme="light"] body.salle::after{ background:none; }
html[data-theme="light"] body.salle .shade{ background:#efebe3; }
html[data-theme="light"] body.salle dialog.artDialog::backdrop{ background:rgba(239,235,227,.96); }
html[data-theme="light"] body.salle .modal__closeBtn, html[data-theme="light"] body.salle .modal__navBtn{ background:rgba(22,30,56,.06); border-color:rgba(22,30,56,.2); }
html[data-theme="light"] body.salle .modal__closeBtn:hover, html[data-theme="light"] body.salle .modal__navBtn:hover{ background:rgba(22,30,56,.12); }
/* sous-menu À propos */
html[data-theme="light"] .nav__sub a{ color:rgba(22,30,56,.7); }
html[data-theme="light"] .nav__sub a:hover{ color:#161e38; }
/* grands mots en contour */
html[data-theme="light"] .bigLink__w, html[data-theme="light"] .cx__links a{ color:rgba(22,30,56,.03); -webkit-text-stroke-color:rgba(22,30,56,.85); }
html[data-theme="light"] .bigLink:hover .bigLink__w, html[data-theme="light"] .cx__links a:hover{ color:#161e38; }
/* contact : bouton Envoyer en encre */
html[data-theme="light"] .contactPage .ix-form .sendBtn > span{ background:#161e38; color:#efebe3; }
html[data-theme="light"] .contactPage .ix-form .sendBtn:hover > span{ background:#223a7a; }
/* PDF presse */
html[data-theme="light"] .pdfModal{ background:rgba(239,235,227,.9); }
/* expositions */
html[data-theme="light"] .xdecade{ -webkit-text-stroke-color:rgba(22,30,56,.8) !important; color:rgba(22,30,56,.04) !important; }
html[data-theme="light"] .tlCard:hover .tlCard__title{ color:#161e38; }
html[data-theme="light"] .tlCard::before{ background:linear-gradient(90deg, rgba(22,30,56,.05), rgba(22,30,56,0) 70%); }
/* galeries : carte en points sombres, titre sur voile clair */
/* carte en points : deux images (points clairs / points foncés), Safari n'applique pas de filtre aux images SVG */
.dots--l{ display:none; }
html[data-theme="light"] .dots--d{ display:none; }
html[data-theme="light"] .dots--l{ display:inline; }
html[data-theme="light"] .gx__pin text{ fill:rgba(22,30,56,.75); }
html[data-theme="light"] .gx__pin.is-hot text{ fill:#161e38; }
html[data-theme="light"] .gx__pin.is-hot circle.dot, html[data-theme="light"] .gx__pin:focus-visible circle.dot{ fill:#223a7a; }
html[data-theme="light"] .gx__arc{ stroke:rgba(22,30,56,.3); }
html[data-theme="light"] .gx__panel.is-open{ background:linear-gradient(180deg, rgba(22,30,56,.045), rgba(22,30,56,0)); }
html[data-theme="light"] .gx__vcity{ -webkit-text-stroke-color:rgba(22,30,56,.7); }
html[data-theme="light"] .gx__panel:hover .gx__vcity{ -webkit-text-stroke-color:#161e38; }
/* à propos : photo en noir et blanc garde son contraste ; couverture presse avec une ombre plus douce */
html[data-theme="light"] .prx__cover img{ box-shadow:0 24px 60px rgba(22,30,56,.22); }
html[data-theme="light"] .pub__cover span{ background:rgba(239,235,227,.85); }

/* portfolio : chaque vignette est un lien vers la page de l'œuvre (oeuvres/<slug>.html) */
body.portfolio a.piece{ display:block; color:inherit; text-decoration:none; }

/* =========================
   PAGE D'UNE ŒUVRE (oeuvres/<slug>.html, générée par scripts/build-seo.mjs)
   ========================= */
.ov{ margin:clamp(8px, 2vh, 24px) 0 clamp(64px, 9vw, 120px); }
.ov__back{ display:inline-flex; gap:2px; margin-bottom:clamp(20px, 3vh, 36px); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s ease; }
.ov__back:hover{ border-bottom-color:var(--accent); }
.ov__grid{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.ov__media{ margin:0; position:sticky; top:calc(var(--shade-h, 90px) + 24px); }
.ov__media img{ display:block; width:auto; max-width:100%; height:auto; max-height:min(82vh, 900px); margin:0 auto; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.ov__kicker{ margin:0 0 10px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.ov__title{ margin:0 0 28px; font-size:clamp(36px, 4.6vw, 72px); font-weight:700; font-stretch:112%; text-transform:uppercase; line-height:.92; letter-spacing:-.01em; color:var(--ink); }
.ov__facts{ margin:0 0 28px; border-top:1px solid rgba(var(--ink-rgb),.16); }
.ov__facts > div{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid rgba(var(--ink-rgb),.16); }
.ov__facts dt{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.ov__facts dd{ margin:0; font-size:15px; color:var(--ink); text-align:right; }
.ov__status--disponible::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:middle; }
.ov__desc{ margin:0 0 28px; font-size:16px; line-height:1.7; color:var(--ink-soft); }
.ov__cta{ display:inline-flex; align-items:center; height:52px; padding:0 28px; background:var(--ink); color:var(--bg); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background-color .2s ease; }
.ov__cta:hover{ background:#fff; }
html[data-theme="light"] .ov__cta{ background:#161e38; color:#efebe3; }
html[data-theme="light"] .ov__cta:hover{ background:#223a7a; }
.ov__nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; padding-top:20px; border-top:1px solid rgba(var(--ink-rgb),.16); }
.ov__step{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ov__step--next{ text-align:right; align-items:flex-end; }
.ov__stepK{ font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.ov__stepT{ font-size:14px; font-weight:700; font-stretch:112%; text-transform:uppercase; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.ov__step:hover .ov__stepT{ color:var(--accent); }
@media (max-width:900px){
  .ov__grid{ grid-template-columns:minmax(0, 1fr); }
  .ov__media{ position:static; }
  .ov__media img{ max-height:70vh; }
}

/* listes en HTML pour Google (galeries, expositions) : remplacées par le script de la page au chargement */
.gx__static, .xstatic{ list-style:none; margin:0; padding:0; }
.gx__static li, .xstatic li{ padding:14px 0; border-bottom:1px solid rgba(var(--ink-rgb),.14); color:var(--ink-soft); }
.gx__static h3{ margin:0 0 4px; font-size:22px; font-weight:700; font-stretch:112%; text-transform:uppercase; color:var(--ink); }
.gx__static p{ margin:0; }
.xstatic__y{ font-weight:700; color:var(--ink); }


/* portfolio : choix de l'unité des dimensions (cm / in), tout à droite : une petite capsule à deux cases,
   la case choisie est pleine (une pastille glisse de l'une à l'autre) */
.unitSwitch{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; align-items:center; margin-left:8px; padding:2px;
  border:1px solid rgba(var(--ink-rgb),.28); border-radius:999px; isolation:isolate; }
.unitSwitch::before{ content:""; position:absolute; z-index:-1; top:2px; bottom:2px; left:2px; width:calc(50% - 2px); border-radius:999px;
  background:var(--ink); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.unitSwitch:has([data-u="in"][aria-pressed="true"])::before{ transform:translateX(100%); }
.unitSwitch button{ min-width:38px; height:26px; padding:0 10px; border:0; border-radius:999px; background:none; cursor:pointer;
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); transition:color .3s ease; }
.unitSwitch button:hover{ color:var(--ink); }
.unitSwitch button[aria-pressed="true"]{ color:var(--bg); }

/* portfolio : mosaïque en colonnes remplies ligne par ligne (portfolio.html, layoutMasonry) */
body.portfolio .masonry.is-cols{ columns:auto; display:flex; align-items:flex-start; gap:14px; }
body.portfolio .masonry.is-cols .mcol{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
@media (max-width:600px){ body.portfolio .masonry.is-cols{ gap:10px; } }

/* « Disponible » en vert (point et texte), partout : vignettes, fiche, pages d'œuvres */
body.salle{ --green-rgb:118,196,146; --green:rgb(var(--green-rgb)); }
html[data-theme="light"] body.salle{ --green-rgb:38,122,74; --green:rgb(var(--green-rgb)); }
body.portfolio .badge.disponible{ color:var(--green) !important; }
body.portfolio .badge.disponible::before{ background:var(--green) !important; }
.statusText.disponible{ color:var(--green) !important; }
.ov__status--disponible{ color:var(--green); }
.ov__status--disponible::before{ background:var(--green) !important; }