/*
Theme Name:   LAE — Laé-illus
Theme URI:    https://lae-illus.fr
Description:  Thème enfant de Kadence pour le site d'artiste LAE. Mise en page éditoriale asymétrique conforme au cahier des charges v1.0 : fond ivoire, bordeaux parcimonieux, serif éditoriale, les œuvres dominent.
Author:       Atelier LAE
Template:     kadence
Version:      0.1.0
Text Domain:  lae
Tags:         portfolio, artiste, éditorial
*/

/* Polices hébergées par le thème : aucune requête vers un tiers.
   Cormorant Garamond et Inter, sous licence SIL Open Font. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-italic-300-400-latin-ext.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-italic-300-400-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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-normal-300-400-latin-ext.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-normal-300-400-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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/inter-normal-300-400-500-latin-ext.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/inter-normal-300-400-500-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;
}


/* LAE — direction artistique du cahier des charges v1.0
   Fond ivoire, bordeaux parcimonieux, serif éditoriale, asymétries maîtrisées.
   Aucun effet « carte SaaS » : pas d'ombre lourde, pas de gros arrondi, pas de dégradé. */

:root {
  --ivoire: #f5f2ec;
  --ivoire-creux: #efeae1;
  --bordeaux: #7b1e28;
  --bordeaux-clair: #9c4049;
  --encre: #1a1a1a;
  --gris: #6b6259;
  --filet: rgba(123, 30, 40, 0.4);
  --filet-neutre: rgba(26, 26, 26, 0.14);

  --display: "Cormorant Garamond", Didot, "Bodoni MT", Georgia, serif;
  --texte: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1440px;
  --marge: clamp(20px, 4.5vw, 72px);
  --rythme: clamp(64px, 9vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bordeaux); color: var(--ivoire); padding: 12px 20px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 0; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--marge); }
.shell.etroit { max-width: 760px; }

/* ---------- typographie ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; text-wrap: balance; }

.eyebrow {
  font-family: var(--texte); font-size: 11px; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase; color: var(--encre);
  display: block; margin-bottom: 28px;
}
.eyebrow.bordeaux, .bordeaux { color: var(--bordeaux); }

.titre-section { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: .16em; text-transform: uppercase; }
.chapo { font-size: clamp(15px, 1.3vw, 17px); color: var(--gris); max-width: 52ch; margin: 18px 0 0; }

.filet { border: 0; border-top: 1px solid var(--filet); margin: 26px 0; }
.filet.court { width: 56px; margin-inline: 0; }

.num { font-family: var(--display); font-size: 19px; color: var(--bordeaux); letter-spacing: .1em; }
.pt { color: var(--bordeaux); }

.cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 7px; border-bottom: 1px solid var(--filet);
  transition: border-color .25s, color .25s;
}
.cta:hover { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.cta-plein {
  background: var(--bordeaux); color: var(--ivoire); border: 0;
  padding: 17px 34px; cursor: pointer; justify-content: center;
}
.cta-plein:hover { background: #66161f; color: var(--ivoire); }
.cta-cadre { border: 1px solid var(--filet); padding: 15px 26px; }
.fleche { color: var(--bordeaux); }

/* Œuvre non acquérable : le bouton reste en place mais neutralisé,
   pour que l'indisponibilité se lise au lieu de laisser un vide. */
.cta.inactif {
  background: transparent; color: var(--gris);
  border: 1px solid var(--filet-neutre); cursor: not-allowed;
}
.cta.inactif:hover { background: transparent; color: var(--gris); border-color: var(--filet-neutre); }
.cta.inactif span { color: var(--gris); }

/* ---------- en-tête ---------- */
.site-header { position: relative; z-index: 20; background: var(--ivoire); }
.header-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 30px 0 22px; }
.brand { text-decoration: none; display: block; }
.brand-logo { font-family: var(--display); font-size: clamp(32px, 3.6vw, 46px); letter-spacing: .2em; line-height: 1; display: block; }
.brand-baseline {
  display: block; margin-top: 9px; font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--encre);
}
.nav-desktop { display: flex; gap: clamp(20px, 2.6vw, 40px); padding-top: 12px; }
.nav-desktop a {
  font-size: 12px; letter-spacing: .17em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 5px; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s;
}
.nav-desktop a:hover { color: var(--bordeaux); }
.nav-desktop a[aria-current="page"] { border-bottom-color: var(--bordeaux); color: var(--bordeaux); }

.burger { display: none; background: none; border: 0; padding: 10px 0 10px 16px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 1px; background: var(--encre); margin: 6px 0; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { display: none; flex-direction: column; padding: 8px var(--marge) 30px; border-top: 1px solid var(--filet-neutre); }
.nav-mobile a {
  padding: 17px 0; font-family: var(--display); font-size: 25px; text-decoration: none;
  border-bottom: 1px solid var(--filet-neutre);
}

/* ---------- accueil : hero ---------- */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(28px, 5vw, 80px); padding: clamp(16px, 3vw, 40px) 0 var(--rythme);
  padding-left: var(--marge);
}
.hero-titre {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(46px, 7.4vw, 108px); line-height: 1.02; letter-spacing: .005em; margin: 0;
}
.hero-titre span, .hero-titre em { display: block; }
.hero-titre em { color: var(--bordeaux); font-style: italic; }
.hero-cta { display: inline-block; margin-top: clamp(30px, 4vw, 58px); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
.hero-cta span { display: block; margin-top: 10px; }
.hero-media img { width: 100%; }

/* ---------- accueil : ruban ---------- */
.histoire { padding-block: var(--rythme) 0; }
/* Desktop : les 13 fragments tiennent dans la largeur, comme sur la planche validée.
   Mobile : le même ruban devient défilable au doigt. */
.ruban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: clamp(6px, 0.8vw, 14px); align-items: center; padding-bottom: 18px;
}
.ruban-img { scroll-snap-align: center; }
.ruban-img img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; }
.ruban-txt { scroll-snap-align: center; padding: 0 6px; }
.ruban-txt p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--encre); }

/* ---------- accueil : passerelle ---------- */
.passerelle { padding-block: var(--rythme); }
.passerelle-inner { max-width: 620px; }
.passerelle h2 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: .06em; text-transform: uppercase; }
.passerelle p { color: var(--gris); margin: 16px 0 30px; }

/* ---------- accueil : univers ---------- */
.univers { padding-bottom: var(--rythme); }
.univers-liste { display: grid; gap: clamp(36px, 5vw, 76px); margin-top: clamp(40px, 5vw, 72px); }
.univers-carte { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.univers-carte.inverse .univers-media { order: 2; }
.univers-media img { width: 100%; transition: opacity .35s; }
.univers-txt h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: .13em; text-transform: uppercase; margin: 14px 0 0; }
.univers-txt h3 a { text-decoration: none; }
.univers-txt p { color: var(--gris); max-width: 34ch; }
.univers-txt .fleche { display: inline-block; margin-top: 18px; font-size: 20px; transition: transform .3s, color .3s; }

/* Le lien du titre couvre toute la carte : image, texte et flèche
   déclenchent la même navigation, sans lien imbriqué. */
.lien-etendu::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) {
  .univers-carte:hover .univers-txt h3 a { color: var(--bordeaux); }
  .univers-carte:hover .fleche { color: var(--bordeaux); transform: translateX(6px); }
  .univers-carte:hover .univers-media img { opacity: .92; }
}
.univers-carte:focus-within .univers-txt h3 a { color: var(--bordeaux); }

/* ---------- pages univers ---------- */
.univers-entete {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 72px);
  align-items: start; padding: clamp(10px, 2vw, 26px) var(--marge) var(--rythme);
  max-width: var(--shell); margin-inline: auto;
}
.ue-txt .num { display: block; margin-bottom: 14px; }
.ue-txt h1 { font-size: clamp(40px, 5.6vw, 74px); line-height: 1.04; letter-spacing: .02em; text-transform: uppercase; }
.accroche {
  font-family: var(--display); color: var(--bordeaux);
  font-size: clamp(21px, 2.4vw, 31px); line-height: 1.28; letter-spacing: .03em;
  text-transform: uppercase; margin: 22px 0 0; max-width: 18ch;
}
.intro { color: var(--encre); max-width: 42ch; }
.intro p { margin: 0 0 14px; }
.ue-media { margin: 0; }
.ue-media img { width: 100%; }
.cliquable { cursor: zoom-in; }
@media (hover: hover) {
  .ue-media:hover .oeuvre-titre { color: var(--bordeaux); }
}

/* galerie éditoriale : 12 colonnes, rythme irrégulier, ratios préservés */
.galerie {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 52px); align-items: start; margin-bottom: var(--rythme);
}
.oeuvre { margin: 0; grid-column: span var(--span); }
.oeuvre:nth-child(odd) { margin-top: clamp(0px, calc(var(--offset) * 22px), 66px); }
.oeuvre-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.oeuvre-btn img { width: 100%; transition: transform .5s ease, opacity .3s; }
@media (hover: hover) {
  .oeuvre-btn:hover img { transform: scale(1.015); }
  .oeuvre:hover .oeuvre-titre { color: var(--bordeaux); }
}

/* Légende discrète : l'œuvre garde le dessus, le titre reste lisible. */
.oeuvre-legende {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 12px; font-size: 12.5px; line-height: 1.4;
}
.oeuvre-titre { transition: color .25s; }
.oeuvre-annee { color: var(--gris); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.rupture {
  margin: 0 0 var(--rythme); padding-left: 26px; border-left: 1px solid var(--bordeaux);
  font-family: var(--display); color: var(--bordeaux);
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.42; letter-spacing: .04em; text-transform: uppercase;
  max-width: 24ch;
}
.rupture span { display: block; }

.fin-univers { padding-bottom: var(--rythme); }
.fin-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; }
.fin-question { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); line-height: 1.22; letter-spacing: .05em; text-transform: uppercase; margin: 0; }
.fin-question span { display: block; }

/* ---------- démarche ---------- */
.p-demarche .shell { padding-top: clamp(14px, 2vw, 30px); }
.sequence { display: grid; gap: var(--rythme); margin-bottom: var(--rythme); }
.seq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: center; }
.seq.inverse .seq-media { order: -1; }
/* Le premier titre de la séquence est un h1 — la page a besoin d'un titre
   unique — mais rien ne doit le distinguer visuellement des suivants :
   les trois temps du récit ont le même poids. */
.seq-txt h1,
.seq-txt h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; }
.seq-txt p { margin-top: 20px; color: var(--gris); }

.manifeste { display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; margin-bottom: var(--rythme); }
/* la déchirure : une ouverture qui laisse voir un fragment coloré d'œuvre */
.manifeste-fragment img {
  width: 100%; aspect-ratio: 2 / 5; object-fit: cover;
  clip-path: polygon(18% 0, 82% 4%, 96% 34%, 88% 72%, 72% 100%, 26% 96%, 6% 62%, 12% 26%);
}
.manifeste-txt { max-width: 46ch; }
.manifeste-txt p { margin: 0 0 16px; }
.manifeste-txt .fort { font-weight: 500; }
.manifeste-txt .fort span { display: block; }

.piliers { margin-bottom: var(--rythme); }
.piliers-titre { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .07em; text-transform: uppercase; text-align: center; margin-bottom: 12px; }
.piliers-liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.2vw, 32px); margin-top: 44px; }
.pilier h3 { font-family: var(--texte); font-size: 11px; font-weight: 400; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 16px; min-height: 2.6em; }
.pilier p { font-size: 13px; color: var(--gris); margin-top: 14px; }

.demarche-fin { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: var(--rythme); }
.demarche-fin h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.14; letter-spacing: .03em; text-transform: uppercase; }
.demarche-fin p { margin-top: 14px; color: var(--gris); }

/* ---------- à propos ---------- */
.p-apropos .shell { padding-top: clamp(14px, 2vw, 30px); }
.apropos-entete { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: start; margin-bottom: var(--rythme); }
.apropos-entete h1 { font-size: clamp(46px, 6vw, 82px); letter-spacing: .06em; line-height: 1; }
.sous-titre { font-family: var(--display); font-size: clamp(19px, 2vw, 26px); letter-spacing: .22em; text-transform: uppercase; margin: 10px 0 30px; }
.apropos-entete p { max-width: 46ch; margin: 0 0 16px; }

.citation {
  margin: 0 0 var(--rythme); text-align: center; font-family: var(--display);
  font-size: clamp(24px, 3.1vw, 42px); line-height: 1.24; letter-spacing: .04em; text-transform: uppercase;
}
.citation span { display: block; }

.methode, .personnages { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: var(--rythme); }
.methode h2, .personnages h2, .compagnons h2 { font-size: clamp(26px, 3.1vw, 38px); line-height: 1.14; letter-spacing: .04em; text-transform: uppercase; }
.methode-txt p, .personnages-txt p { color: var(--gris); max-width: 44ch; }
.methode-exemple { margin: 0; display: grid; gap: 16px; justify-items: start; }
.methode-exemple figcaption { font-size: 13px; color: var(--gris); }
.methode-exemple .apres { color: var(--bordeaux); }
.fleche-bas { display: block; margin-top: 8px; }
.personnages-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.personnages-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.compagnons { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 72px); padding-bottom: var(--rythme); }
.compagnons-txt p { margin: 0 0 14px; max-width: 52ch; }

/* ---------- shop ---------- */
.p-shop .shell { padding-top: clamp(14px, 2vw, 30px); }
.p-shop h1 { font-size: clamp(38px, 5.2vw, 68px); letter-spacing: .03em; text-transform: uppercase; }
.acces { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); margin: clamp(36px, 4vw, 56px) 0 clamp(30px, 3.4vw, 48px); }
.acces-carte {
  display: grid; gap: 6px; text-align: left; background: none; cursor: pointer;
  border: 1px solid var(--filet-neutre); padding: 24px 26px; transition: border-color .25s;
}
.acces-carte:hover { border-color: var(--bordeaux); }
.acces-titre { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.acces-detail { font-size: 13px; color: var(--gris); }
.acces-carte .fleche { justify-self: end; }

.shop-barre { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--filet-neutre); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { background: none; border: 1px solid transparent; padding: 9px 16px; cursor: pointer; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.filtre.actif { border-color: var(--bordeaux); color: var(--bordeaux); }
.compte { font-size: 12px; color: var(--gris); margin: 0; }

.produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 44px); margin: clamp(34px, 4vw, 52px) 0 var(--rythme); }
.produit h3 { font-family: var(--texte); font-size: 14px; font-weight: 400; margin: 14px 0 3px; }
.produit-prix { font-size: 13px; color: var(--bordeaux); margin: 0; }
.produit[hidden] { display: none; }

.reassurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(30px, 4vw, 48px) 0; border-block: 1px solid var(--filet-neutre); margin-bottom: var(--rythme); }
.reassurance h2 { font-family: var(--texte); font-size: 11px; font-weight: 400; letter-spacing: .19em; text-transform: uppercase; }
.reassurance p { font-size: 13px; color: var(--gris); margin-top: 10px; }

.tarifs { padding-bottom: var(--rythme); }
.tarifs h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 26px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--filet-neutre); font-weight: 400; }
thead th { font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--gris); }
tbody th { font-size: 13px; }
.th-detail { display: block; font-size: 11px; color: var(--gris); margin-top: 4px; max-width: 30ch; }
td { font-family: var(--display); font-size: 21px; }

/* ---------- contact ---------- */
/* Le fragment vertical entre par le bord droit de l'écran ; la grille lui
   réserve sa largeur pour qu'aucun texte ne passe dessous. */
.contact-section { position: relative; overflow: hidden; --fragment: clamp(130px, 15vw, 290px); }
.contact-fragment {
  position: absolute; top: 0; right: 0; height: 100%;
  width: var(--fragment); pointer-events: none;
}
.contact-fragment img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }

.contact-grille {
  display: grid; grid-template-columns: 1.15fr 0.9fr; gap: clamp(30px, 4.5vw, 72px);
  padding-top: clamp(14px, 2vw, 30px); padding-bottom: var(--rythme);
  padding-right: calc(var(--marge) + var(--fragment));
}
.p-contact h1 { font-size: clamp(42px, 6vw, 80px); letter-spacing: .02em; text-transform: uppercase; }
.formulaire { margin-top: clamp(30px, 3.4vw, 48px); max-width: 720px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 30px); }
.champ { margin: 0 0 22px; display: grid; gap: 9px; }
.champ label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 15px; color: var(--encre);
  background: transparent; border: 1px solid var(--filet-neutre); padding: 15px 17px; border-radius: 0;
}
.champ textarea { resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: #a49b90; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bordeaux); outline: none; }
.form-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.delai { font-size: 13px; color: var(--gris); margin: 0; }
.form-note { font-size: 13px; color: var(--bordeaux); margin: 16px 0 0; min-height: 1.4em; }

.contact-infos { padding-top: clamp(30px, 5.5vw, 92px); }
.contact-infos > .eyebrow { margin-bottom: 18px; }
.coords { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; justify-items: start; }
.coords a { text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 3px; }
.contact-infos > .filet { margin: 26px 0 0; }
.contact-infos .bloc { margin-top: 30px; }
.contact-infos .bloc h2 {
  font-family: var(--texte); font-size: 12px; font-weight: 400; letter-spacing: .15em;
  text-transform: uppercase; color: var(--bordeaux); line-height: 1.6; text-wrap: balance;
}
.contact-infos .bloc p { font-size: 14px; color: var(--gris); margin: 12px 0 18px; max-width: 38ch; }

/* ---------- page texte ---------- */
.p-texte h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: .03em; text-transform: uppercase; }
.p-texte h2 { font-size: clamp(19px, 1.9vw, 24px); letter-spacing: .08em; text-transform: uppercase; margin: 40px 0 12px; }
.p-texte p { color: var(--gris); }
.p-texte .shell { padding-top: clamp(14px, 2vw, 30px); padding-bottom: var(--rythme); }
.avertissement { border-left: 1px solid var(--bordeaux); padding: 4px 0 4px 22px; margin: 28px 0; }
.avertissement p { color: var(--encre); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: clamp(12px, 3vw, 44px); }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.62); border: 0; }
/* L'œuvre reste entière et calée en haut ; seule la colonne d'informations défile,
   sinon les six formats de tirage étirent la colonne image et la font flotter. */
.lightbox-panel {
  position: relative; background: var(--ivoire); width: min(1180px, 100%); max-height: 100%;
  display: grid; grid-template-columns: 1.25fr 0.75fr; grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 46px); padding: clamp(20px, 3vw, 44px); overflow: hidden;
}
.lightbox-close { position: absolute; top: 12px; right: 16px; z-index: 2; background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; padding: 6px 10px; }
.lightbox-media {
  margin: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
}
.lightbox-media img { max-height: 72vh; max-width: 100%; width: auto; min-height: 0; object-fit: contain; }
.lightbox-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.lightbox-info h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; }
.lb-meta { margin: 0 0 18px; display: grid; gap: 7px; }
.lb-meta div { display: flex; gap: 10px; font-size: 14px; }
.lb-meta dt { color: var(--gris); min-width: 92px; }
.lb-meta dd { margin: 0; }
.lb-contexte { font-size: 13px; color: var(--gris); font-style: italic; margin: 0 0 14px; }
.lb-statut { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--bordeaux); margin: 0 0 12px; }
.lb-choix { font-size: 11px; letter-spacing: .17em; text-transform: uppercase; margin: 0 0 12px; }
.lb-tirages { border: 1px solid var(--filet-neutre); padding: 14px; margin-bottom: 14px; }
.lb-option { border-top: 1px solid var(--filet-neutre); padding-top: 12px; margin-top: 12px; }
.lb-option:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lb-option-titre { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; margin: 0; }
.lb-option-detail { font-size: 11px; color: var(--gris); margin: 3px 0 9px; }
.lb-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lb-format { background: none; border: 1px solid var(--filet-neutre); padding: 7px 6px; cursor: pointer; font-size: 11px; text-align: center; line-height: 1.35; }
.lb-format:hover { border-color: var(--bordeaux); }
.lb-format[aria-pressed="true"] { border-color: var(--bordeaux); color: var(--bordeaux); }
.lb-format b { display: block; font-family: var(--display); font-size: 16px; font-weight: 400; }

/* Le prix et l'appel à l'action restent visibles quelle que soit la longueur
   du sélecteur de tirages : ils ne doivent jamais passer sous la ligne de flottaison. */
.lb-achat {
  position: sticky; bottom: 0; margin-top: auto; padding-top: 14px;
  background: var(--ivoire); box-shadow: 0 -14px 16px -12px var(--ivoire);
}
.lb-prix { font-family: var(--display); font-size: clamp(23px, 2.4vw, 32px); margin: 0 0 14px; }
.lb-note { font-size: 11.5px; color: var(--gris); margin: 10px 0 0; }
/* Avertissement sur les couleurs : sous l'œuvre, comme sur la planche validée,
   donc toujours visible sans avoir à faire défiler la colonne d'informations. */
.lb-avert { font-size: 11.5px; color: var(--gris); margin: 0; text-align: center; align-self: end; }
.lightbox-nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 30px; padding-top: 18px; border-top: 1px solid var(--filet-neutre); font-size: 13px; }
.lightbox-nav button { background: none; border: 0; cursor: pointer; padding: 8px 14px; font-size: 17px; }
.lightbox-nav button:hover { color: var(--bordeaux); }

/* ---------- pied de page ---------- */
.site-footer { border-top: 1px solid var(--filet-neutre); padding-block: clamp(34px, 4vw, 56px); }
.footer-inner { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.footer-brand p { font-size: 13px; color: var(--gris); margin: 6px 0 0; }
.footer-brand .brand-logo { font-size: 30px; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.footer-nav a { font-size: 12px; letter-spacing: .1em; text-decoration: none; }
.footer-nav a:hover { color: var(--bordeaux); }
.footer-meta { font-size: 12px; color: var(--gris); display: grid; gap: 7px; justify-items: end; text-align: right; }
.footer-meta p { margin: 0; }
.footer-meta a { text-decoration: none; }
.footer-meta a:hover { color: var(--bordeaux); }

/* ---------- responsive : réinterprétation, pas réduction ---------- */
/* Sous 1200 px, treize colonnes écraseraient les blocs de texte :
   le ruban redevient défilable et chaque fragment garde une largeur lisible. */
@media (max-width: 1200px) {
  .ruban {
    grid-auto-columns: minmax(118px, 1fr); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
    margin-right: calc(var(--marge) * -1); padding-right: var(--marge);
  }
}

@media (max-width: 1080px) {
  .piliers-liste { grid-template-columns: repeat(3, 1fr); }
  .produits { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-meta { justify-items: start; text-align: left; grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .burger { display: block; }
  .nav-mobile { display: none; }
  .nav-mobile.ouvert { display: flex; }

  /* accueil : œuvre phare presque plein écran, puis accroche */
  .hero { grid-template-columns: 1fr; padding-left: 0; gap: 0; }
  .hero-media { order: -1; }
  .hero-media img { width: 100%; height: 64vh; object-fit: cover; object-position: center 22%; }
  .hero-txt { padding: 30px var(--marge) 0; }

  /* zones tactiles confortables */
  .footer-nav { gap: 2px 24px; }
  .footer-nav a, .coords a, .nav-mobile a, .footer-meta a { display: flex; align-items: center; min-height: 44px; }
  .footer-meta { gap: 0; }
  .univers-txt h3 a { display: inline-flex; align-items: center; min-height: 44px; }
  .cta { min-height: 44px; }
  .lightbox-nav button { min-width: 48px; min-height: 48px; }
  .lb-format { min-height: 48px; }
  .filtre { min-height: 44px; }

  .univers-carte, .univers-carte.inverse { grid-template-columns: 1fr; }
  .univers-carte.inverse .univers-media { order: 0; }

  .univers-entete { grid-template-columns: 1fr; }
  .ue-media { order: -1; }

  /* galeries : deux colonnes maximum, aucune case fixe */
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .oeuvre { grid-column: span 1; }
  .oeuvre:nth-child(odd) { margin-top: 0; }

  .seq, .seq.inverse { grid-template-columns: 1fr; }
  .seq.inverse .seq-media { order: 0; }
  .manifeste, .methode, .personnages, .compagnons { grid-template-columns: 1fr; }
  .manifeste-fragment { max-width: 220px; }
  .apropos-entete { grid-template-columns: 1fr; }
  .apropos-entete .apropos-media { order: -1; }

  .acces, .reassurance { grid-template-columns: 1fr; }
  .produits { grid-template-columns: repeat(2, 1fr); }

  /* le fragment disparaît : la réserve qu'il occupait doit disparaître aussi */
  .contact-grille { grid-template-columns: 1fr; padding-right: var(--marge); }
  .contact-fragment { display: none; }
  .contact-infos { padding-top: 8px; }
  .champs-2 { grid-template-columns: 1fr; }

  /* -----------------------------------------------------------------------
     Fiche détail en mobile : un seul flux vertical, aucun élément flottant.
     Ordre de lecture : œuvre, informations, choix du tirage, prix, bouton,
     puis navigation entre les œuvres en toute fin.
     Rien n'est en position collante : un élément collant recouvre le contenu
     qui défile dessous, ce qui tronquait le bouton et le sélecteur.
     -------------------------------------------------------------------- */
  .lightbox {
    padding: 0;
    place-items: stretch;
    height: 100vh;   /* repli */
    height: 100dvh;  /* exclut la barre d'adresse mobile, sinon le bas est coupé */
  }
  .lightbox-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0 18px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Fermeture toujours atteignable, sans recouvrir le contenu :
     elle occupe sa propre bande en haut du panneau. */
  .lightbox-close {
    position: sticky;
    top: 0;
    align-self: flex-end;
    z-index: 3;
    margin: 0 -18px 0 0;
    padding: 10px 18px;
    min-width: 48px;
    min-height: 48px;
    background: var(--ivoire);
    box-shadow: 0 10px 12px -10px var(--ivoire);
  }

  /* Chaque bloc garde sa hauteur naturelle : sans cela, les éléments flex se
     compriment sous leur contenu, qui déborde alors sur le bloc suivant —
     c'est ce qui faisait chevaucher le bouton et la navigation — et le
     panneau ne défile pas puisque rien ne dépasse. */
  .lightbox-panel > * { flex: 0 0 auto; }

  .lightbox-media { display: block; margin: 0; text-align: center; }
  .lightbox-media img { max-height: 42dvh; margin-inline: auto; }
  .lb-avert { text-align: left; align-self: auto; margin: 12px 0 0; font-size: 11px; }

  .lightbox-info { overflow: visible; padding: 0; min-height: 0; }
  .lightbox-info h2 { margin-top: 22px; }

  .lb-achat {
    position: static;
    margin-top: 4px;
    padding-top: 18px;
    box-shadow: none;
    border-top: 1px solid var(--filet-neutre);
  }
  .lb-achat .cta-plein { width: 100%; }

  /* Navigation en dernier, sous le bouton d'acquisition. */
  .lightbox-nav {
    position: static;
    margin-top: 24px;
    padding: 14px 0 0;
    border-top: 1px solid var(--filet-neutre);
    background: none;
    gap: 12px;
    justify-content: space-between;
  }
  .lightbox-nav button { min-width: 56px; min-height: 56px; }
}

@media (max-width: 520px) {
  .piliers-liste { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: 1fr; }
  .produits { grid-template-columns: 1fr; }
  .ruban { grid-auto-columns: minmax(104px, 1fr); }
}

/* =========================================================================
   Adaptations WordPress / Kadence
   Le rythme de galerie est porté par la case, la figure venant d'un
   composant réutilisable qui ignore sa position dans la grille.
   ========================================================================= */

.oeuvre-case { grid-column: span var(--span); }
.oeuvre-case:nth-child(odd) { margin-top: clamp(0px, calc(var(--offset) * 22px), 66px); }
.oeuvre-case .oeuvre { grid-column: auto; margin: 0; }
.galerie .oeuvre:nth-child(odd) { margin-top: 0; }

/* Kadence pose ses propres conteneurs et marges : on neutralise ce qui
   entrerait en conflit avec les compositions du brief. */
.site-header, .site-footer { background: var(--ivoire); }
body { overflow-x: hidden; }
.entry-content > * { margin-block: 0; }
img.cliquable { cursor: zoom-in; }

/* L'éditeur d'images de WordPress sert des tailles intermédiaires :
   on impose la largeur fluide pour préserver les ratios d'origine. */
.oeuvre img, .ue-media img, .univers-media img, .hero-media img { width: 100%; height: auto; }

@media (max-width: 860px) {
  .oeuvre-case { grid-column: span 1; }
  .oeuvre-case:nth-child(odd) { margin-top: 0; }
}
@media (max-width: 520px) {
  .oeuvre-case { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   Pages légales
   Les blancs doivent sauter aux yeux : une mention oubliée en production
   est plus grave qu'une page visiblement inachevée.
   ------------------------------------------------------------------------- */

.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--filet-neutre); }
.footer-legal a { font-size: 11.5px; letter-spacing: .08em; color: var(--gris); text-decoration: none; }
.footer-legal a:hover { color: var(--bordeaux); }

.p-texte .entry-content { max-width: 68ch; }
.p-texte .entry-content h2 { font-size: clamp(19px, 1.9vw, 25px); letter-spacing: .06em; text-transform: uppercase; margin: 48px 0 14px; }
.p-texte .entry-content h3 { font-family: var(--texte); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 28px 0 8px; }
.p-texte .entry-content p, .p-texte .entry-content li { color: var(--encre); margin: 0 0 14px; }
.p-texte .entry-content ul { padding-left: 20px; }
.p-texte .entry-content a { color: var(--bordeaux); }
.p-texte .maj { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }

mark.a-completer {
  background: rgba(123, 30, 40, .08);
  border-bottom: 1px dashed var(--bordeaux);
  color: var(--bordeaux);
  padding: 1px 6px;
  font-size: .92em;
  font-style: italic;
}
mark.a-completer::before { content: "✎ "; font-style: normal; }

/* -------------------------------------------------------------------------
   Pied de page — disposition définitive
   Rangée haute : marque à gauche, plan du site au centre, coordonnées à
   droite, en vis-à-vis. Rangée basse : liens légaux centrés, dernier
   élément de la page.
   ------------------------------------------------------------------------- */

.footer-inner {
  grid-template-columns: 1.1fr auto 1fr;
  align-items: start;
  row-gap: clamp(26px, 3vw, 40px);
}

.footer-meta {
  justify-items: end;
  text-align: right;
  justify-self: end;
}

.footer-legal {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
}

@media (max-width: 1080px) {
  /* La rangée haute reste en vis-à-vis tant que la place le permet. */
  .footer-inner { grid-template-columns: 1fr auto 1fr; }
  .footer-meta { justify-items: end; text-align: right; grid-column: auto; }
}

@media (max-width: 760px) {
  /* Empilement : tout à gauche, sauf les liens légaux qui restent centrés. */
  .footer-inner { grid-template-columns: 1fr; }
  .footer-meta { justify-items: start; text-align: left; justify-self: start; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-legal { justify-content: flex-start; text-align: left; }
}

/* -------------------------------------------------------------------------
   Neutralisation du style de bouton de Kadence
   Kadence habille tout <button> nu : rayon, ombre, fond et texte blanc au
   survol. Ses règles d'état sont émises en CSS dynamique après notre feuille,
   il faut donc une spécificité supérieure et couvrir tous les états.
   Sur écran tactile, l'état de survol reste collé après le tap : c'est ce qui
   laissait une flèche en blanc sur carré gris tandis que l'autre restait nette.
   Le survol est donc réservé aux périphériques qui en ont un.
   ------------------------------------------------------------------------- */

.lightbox .lightbox-nav button,
.lightbox .lightbox-close,
.lightbox .lb-format,
.galerie .oeuvre-btn,
.produits .oeuvre-btn,
.shop-barre .filtre,
.acces .acces-carte {
  border-radius: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* Flèches de navigation : même aspect au repos, au survol, au focus et à l'appui. */
.lightbox .lightbox-nav button,
.lightbox .lightbox-nav button:hover,
.lightbox .lightbox-nav button:focus,
.lightbox .lightbox-nav button:active {
  background: none;
  color: var(--encre);
  border: 0;
  box-shadow: none;
}

/* Croix de fermeture : elle garde son fond ivoire, jamais celui de Kadence. */
.lightbox .lightbox-close,
.lightbox .lightbox-close:hover,
.lightbox .lightbox-close:focus,
.lightbox .lightbox-close:active {
  color: var(--encre);
  border: 0;
  box-shadow: none;
}

/* Vignettes : aucun habillage, l'œuvre se suffit. */
.galerie .oeuvre-btn, .galerie .oeuvre-btn:hover, .galerie .oeuvre-btn:focus, .galerie .oeuvre-btn:active,
.produits .oeuvre-btn, .produits .oeuvre-btn:hover, .produits .oeuvre-btn:focus, .produits .oeuvre-btn:active {
  background: none;
  border: 0;
  box-shadow: none;
}

/* Choix du format : seule la sélection colore le cadre. */
.lightbox .lb-format,
.lightbox .lb-format:hover,
.lightbox .lb-format:focus,
.lightbox .lb-format:active {
  background: none;
  color: var(--encre);
  box-shadow: none;
}
.lightbox .lb-format[aria-pressed="true"] { border-color: var(--bordeaux); color: var(--bordeaux); }

/* Filtres du Shop : la pastille active reste la seule marque. */
.shop-barre .filtre, .shop-barre .filtre:hover, .shop-barre .filtre:focus, .shop-barre .filtre:active {
  background: none; color: var(--encre); box-shadow: none;
}
.shop-barre .filtre.actif { border-color: var(--bordeaux); color: var(--bordeaux); }

/* Le survol n'existe que là où il y a un pointeur : sinon il reste collé au tap. */
@media (hover: hover) {
  .lightbox .lightbox-nav button:hover,
  .lightbox .lightbox-close:hover,
  .lightbox .lb-format:hover,
  .shop-barre .filtre:hover { color: var(--bordeaux); }
  .lightbox .lb-format:hover { border-color: var(--bordeaux); }
}

/* Le focus clavier reste visible : exigence d'accessibilité du brief. */
.lightbox .lightbox-nav button:focus-visible,
.lightbox .lightbox-close:focus-visible,
.lightbox .lb-format:focus-visible,
.galerie .oeuvre-btn:focus-visible,
.produits .oeuvre-btn:focus-visible,
.shop-barre .filtre:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 2px;
}