/* ============================================================================
   Site Patrick Ghnassia · photographe — feuille de style (V14)
   Anthracite mat chaud + grain · gris baryté · dark & clair (clair soigné) ·
   albums en grandes pages (photo au format respecté) + diapos horizontales ·
   lumière INACTINIQUE mutée (accent rouge de labo, sans criardise · --tint) ·
   lueurs discrètes sur les filets · typo LT Streetway Neue.
   ========================================================================== */
@font-face { font-family:"Streetway"; src:url("fonts/streetway-light.woff2") format("woff2");    font-weight:300; font-display:swap; }
@font-face { font-family:"Streetway"; src:url("fonts/streetway-regular.woff2") format("woff2");  font-weight:400; font-display:swap; }
@font-face { font-family:"Streetway"; src:url("fonts/streetway-semibold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Streetway"; src:url("fonts/streetway-bold.woff2") format("woff2");     font-weight:700; font-display:swap; }
@font-face { font-family:"Streetway"; src:url("fonts/streetway-black.woff2") format("woff2");    font-weight:900; font-display:swap; }

@property --tint { syntax: "<color>"; inherits: true; initial-value: #e08388; }

:root {
  /* Gamme de gris CHAUDE (baryté) — la planche respire en tons, pas en deux pôles */
  --g0:  #131110;   /* le mur — anthracite chaud mat */
  --g1:  #1A1714;   /* bande tonale — respiration */
  --g2:  #211D19;   /* surfaces : champs, cartes */
  --g25: #292420;   /* surface levée (hover, modales) */
  --g3:  #322C26;   /* filet fort */
  --g4:  #262220;   /* filet faible */
  --coulisse: #0E0C0B;             /* le footer — fond de scène */
  --encre:   #ECE6DA;   /* ivoire · ~14:1 */
  --gris:    #A89F8F;   /* secondaire · 7:1 */
  --gris-2:  #8B8374;   /* tertiaire discret · ~4.9:1 (gros corps seulement) */
  --papier:  #E2DBCB;   /* marge de tirage ADOUCIE, ton chaud — plus de blanc qui claque */
  /* LUMIÈRE INACTINIQUE — la lampe de labo (safelight ambre-rouge) est l'état de repos :
     la touche entre la prise de vue et le tirage. La photo module la teinte DANS cette
     famille rouge inactinique (safelight #B21713, muté), jamais criard. */
  --safelight: #B21713;
  --tint:    #e08388;   /* rose-ambre inactinique — repos */
  --accent:  var(--tint);
  --ombre:   rgba(5,3,1,.5);
  --spot:    rgba(255,241,214,.045);   /* la face — douce, chaude, haut-gauche */
  --police: "Streetway", system-ui, -apple-system, sans-serif;
  --base: 1.16rem;                     /* vieux-yeux : corps généreux partout */
  --marge: clamp(1.25rem, 5vw, 5rem);
  --max: 78rem;
  --t: 320ms cubic-bezier(.4,0,.2,1);
  --t-doux: 550ms ease;
  transition: --tint 700ms ease;
}
/* CLAIR — le préféré : papier chaud, encre dense, secondaires lisibles sans effort */
:root[data-theme="light"] {
  --g0:  #E9E5DC;
  --g1:  #E1DDD2;
  --g2:  #DAD5C8;
  --g25: #E6E2D8;
  --g3:  #C4BEAE;
  --g4:  #D2CDBF;
  --coulisse: #DCD7CA;
  --encre:   #1B1915;   /* ~13:1 */
  --gris:    #595244;   /* secondaire · ~7:1 — un octogénaire lit sans effort */
  --gris-2:  #6E6757;   /* tertiaire · ~4.9:1 */
  --papier:  #F6F3EB;
  --accent:  color-mix(in srgb, var(--tint) 34%, #1b1915);   /* teinte assombrie → AA aussi en petit corps */
  --ombre:   rgba(75,62,42,.28);
  --spot:    rgba(255,255,250,.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--g0); color: var(--encre);
  font-family: var(--police); font-size: var(--base); line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}
/* Grain — statique, imperceptible */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23g)"/></svg>');
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.enveloppe { max-width: var(--max); margin-inline: auto; padding-inline: var(--marge); }

/* ---------------------------------------------------------------- NAV ---- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--g0) 90%, transparent);
  backdrop-filter: blur(7px); border-bottom: 1px solid var(--g4);
}
.nav-int { max-width: var(--max); margin-inline: auto; padding: .9rem var(--marge);
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.sceau { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .84rem;
  display: inline-flex; align-items: center; gap: .5rem; }
.sceau:hover { color: var(--accent); }
.nav-liens { display: flex; gap: 1.15rem; flex-wrap: wrap; margin-left: auto; }   /* nav poussée centre-droite */
.nav-liens a { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
  padding: .2rem 0; border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t); }
.nav-liens a:hover { color: var(--encre); border-color: var(--accent); }
.nav-liens a.nav-qui { letter-spacing: 0.02rem; }   /* « Qui ? » resserré */
.nav-outils { display: flex; gap: .55rem; align-items: center; }
.btn { border: 1px solid var(--g3); color: var(--gris); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .34rem .58rem; border-radius: 2px;
  transition: color var(--t), border-color var(--t); }
.btn:hover { color: var(--encre); border-color: var(--accent); }
.btn.lang { padding: .26rem .42rem; font-size: .64rem; }
.btn.lang[aria-pressed="true"] { color: var(--encre); border-color: var(--accent); }
#toggle-theme { font-size: 1.5rem; line-height: 1; padding: .1rem .3rem; border: 0; }
:root[data-theme="light"] #toggle-theme { color: #DAA165; }   /* lune */
/* mobile : 2 étages nets — [nom · outils] puis [nav centrée] */
@media (max-width: 44rem) {
  .nav-int { gap: .7rem 1rem; }
  .sceau { order: 1; }
  .nav-outils { order: 2; margin-left: auto; }
  .nav-liens { order: 3; flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
}

/* ------------------------------------------- BANDES — la lumière sculpte -- */
/* Chaque section est une bande pleine largeur. La face vient du HAUT-GAUCHE
   (spot doux), les ombres tombent en bas-droite : un seul plateau, une seule
   lumière. Les bandes tonales alternées font respirer la page en GRIS. */
.bande { position: relative; padding: clamp(3rem, 9vh, 6rem) 0; border-top: 1px solid var(--g4); }
.bande-ton { background: var(--g1); }
.bande::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60rem 26rem at 8% -4rem, var(--spot), transparent 68%);
}
.accueil { border-top: 0; padding-top: clamp(2rem, 6vh, 3.5rem); }

/* --------------------------------------------------- titres de planche --- */
.planche-tete { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .7rem; position: relative; }
.planche-titre { font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.06; letter-spacing: .04em; text-transform: uppercase; }
/* V13 : titre section Expositions en retrait (petit + accent) au profit des NOM + dates */
#albums .planche-titre { font-size: clamp(.8rem, 1.6vw, .95rem); font-weight: 600; letter-spacing: .24em; color: var(--gris); }

/* ------------------------------------------------------------- ACCUEIL --- */
/* le NOM règne en grand sur UNE ligne en haut · la photo du moment
   descend à droite en dessous, le CTA tient la gauche. */
.nom { font-weight: 300; font-size: clamp(1.7rem, 3.3vw, 2.6rem); line-height: 1.06;
  letter-spacing: .03em; text-transform: uppercase; position: relative; }
@media (min-width: 44rem) { .nom { white-space: nowrap; } }
/* HOME v10 : la photo ouvre en haut (centrée) · dessous, NOM à gauche + CTA newsletter à droite */
.accueil-nom { display: grid; gap: .3rem; text-align: center; justify-items: center; }
.hero-logo { width: clamp(42px, 8vw, 56px); height: auto; opacity: .9; justify-self: center; margin-top: clamp(.6rem, 2vh, 1.4rem); }
:root[data-theme="light"] .hero-logo { filter: invert(1); }
.metier { font-weight: 700; font-size: clamp(1.1rem, 2.3vw, 1.45rem); letter-spacing: 0;
  text-transform: none; color: var(--gris); margin-top: .4rem; position: relative; }
.cta-lettre { margin: 0; text-align: center; }   /* newsletter centrée */
.cta-lettre a { display: inline-block; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); padding: .75rem 1.5rem; border-radius: 2px;
  transition: color var(--t), border-color var(--t), background var(--t); }
.cta-lettre a:hover { background: var(--g2); }

/* Le tirage : marge papier ADOUCIE + ombre portée bas-droite (face haut-gauche) */
.tirage { background: var(--papier); padding: clamp(.6rem, 1.8vw, 1.1rem);
  border: 1px solid color-mix(in srgb, var(--papier) 82%, var(--g3));
  box-shadow: 10px 16px 44px -16px var(--ombre); }
.tirage img { width: 100%; }
.moment { display: grid; justify-items: center; width: 100%; position: relative; }
/* colonne HOME : nom en haut · photo · newsletter — le tout à la largeur de la photo */
.hero-col { max-width: none; display: grid; gap: clamp(.9rem, 3vh, 1.9rem); }   /* pleine largeur = largeur du menu */
.moment .tirage { width: 100%; max-width: 100%; }
:root[data-theme="dark"] .moment .tirage { background: #232120; border-color: #232120; }   /* cadre gris très foncé (home, sombre) */
/* le spot de Fresnel derrière la photo du moment */
.moment::before { content: ""; position: absolute; inset: -12% -8%; pointer-events: none;
  background: radial-gradient(28rem 24rem at 55% 34%, var(--spot), transparent 66%); }
.moment figcaption, .legende { margin-top: .85rem; font-size: .82rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gris); }
.moment figcaption { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
/* légende inversée : le sujet règne, « la photo du moment » devient l'envers (kicker) */
.legende b, .moment figcaption b { font-weight: 600; color: var(--encre); letter-spacing: .13em; }

/* viseur télémétrique — DISCRET : fin, mi-teinte, lent */
.cadre { position: relative; }
.cadre::before { content: ""; position: absolute; inset: 13px; opacity: 0; pointer-events: none;
  transition: opacity var(--t-doux), inset var(--t-doux);
  background:
    linear-gradient(var(--accent),var(--accent)) top    left  / 13px 1.5px,
    linear-gradient(var(--accent),var(--accent)) top    left  / 1.5px 13px,
    linear-gradient(var(--accent),var(--accent)) top    right / 13px 1.5px,
    linear-gradient(var(--accent),var(--accent)) top    right / 1.5px 13px,
    linear-gradient(var(--accent),var(--accent)) bottom left  / 13px 1.5px,
    linear-gradient(var(--accent),var(--accent)) bottom left  / 1.5px 13px,
    linear-gradient(var(--accent),var(--accent)) bottom right / 13px 1.5px,
    linear-gradient(var(--accent),var(--accent)) bottom right / 1.5px 13px;
  background-repeat: no-repeat; }
.cadre:hover::before, .cadre:focus-within::before { opacity: .55; inset: 9px; }
/* hover photo : le tirage se soulève à peine vers la lumière */
.tirage { transition: box-shadow var(--t-doux), transform var(--t-doux); }
.cadre:hover { transform: translateY(-2px); box-shadow: 12px 20px 50px -16px var(--ombre); }
@media (prefers-reduced-motion: reduce) { .cadre:hover { transform: none; } }

/* -------------------------------------------------------------- ALBUMS --- */
/* chaque album = une GRANDE section · photo au FORMAT respecté (pano large,
   portrait haut) · diapos HORIZONTALES sous la scène (aucune barre verticale). */
.album-page { padding: clamp(2.5rem, 7vh, 5rem) 0; }
.album-page + .album-page { border-top: 1px solid var(--g4); }
@media (min-width: 56rem) {
  .album-page { min-height: 84vh; display: flex; align-items: center; }
  .album-page > .enveloppe { flex: 1; }
}
.album-tete { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1.4rem; }
.al-titre { font-weight: 400; font-size: clamp(1.2rem, 3vw, 2.3rem); line-height: 1.12;
  letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme="dark"] .al-titre { color: #F4EFE7; }   /* un peu plus clair en sombre (validé) */
.al-sous { color: var(--gris); font-size: .92rem; letter-spacing: .06em; width: 100%; }
/* V12 : ligne expo fusionnée dans l'en-tête d'album (dates + lieu cliquable · aucun cadre) */
.al-expo { display: flex; flex-direction: column; gap: .12rem; margin: 0 0 .5rem; }
.al-expo .l-date { font-size: clamp(1.1rem, 3vw, 1.34rem); align-self: flex-end; text-align: right; }   /* dates responsive (mobile un peu plus petit) */
.al-expo .l-lieu { align-self: flex-end; text-align: right; }   /* lieu à DROITE */

/* la SCÈNE — grande photo au format respecté (cadre .tirage hérité de la base V4) */
.album-stage { display: grid; gap: .85rem; width: fit-content; margin-inline: auto; }
.album-stage .stage-cadre { display: block; max-width: 100%; cursor: zoom-in; padding: clamp(1rem, 2.6vw, 2rem); }
/* cadre par album — CLAIR : gris clairs (ok Nanodot) · SOMBRE : % de NOIR (gris foncés) */
.cadre-pano  { --cadre-album: #BFBFBF; }   /* clair : gris 75% clarté */
.cadre-music { --cadre-album: #EBEBEB; }   /* clair : gris 92% clarté */
:root[data-theme="dark"] .album-page { --cadre-album: #333333; }   /* sombre : gris 80% (pano + mdd) */
:root[data-theme="dark"] .cadre-music { --cadre-album: #0D0D0D; }   /* music : gris 95% — grande photo ET diapos, même couleur */
.album-page .stage-cadre, .album-page .diapo { background: var(--cadre-album, var(--papier)); border-color: var(--cadre-album, var(--papier)); }

/* diapo — JUSTE un scanner lumière blanche HYPER SUBTIL, rare et décalé */
.diapo { position: relative; overflow: hidden; }
.diapo::after { content: ""; position: absolute; left: 0; right: 0; top: -45%; height: 34%; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.13), transparent); }
.diapo[aria-selected="true"]::after { animation: balayage 15s ease-in-out infinite; }  /* SEULE la diapo active scanne — léger & lent */
@keyframes balayage { 0% { top: -45%; opacity: 0; } 3% { opacity: 1; } 13% { top: 110%; opacity: 0; } 100% { top: 110%; opacity: 0; } }
.stage-img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; }
.stage-leg { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); text-align: right; }

/* diapos — HORIZONTALES, centrées si peu nombreuses, défilent si 10+ (scroll horizontal) */
.album-slider { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.album-strip { display: flex; gap: .7rem; overflow-x: auto; flex: 0 1 auto; padding: .4rem;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.album-strip::-webkit-scrollbar { display: none; width: 0; height: 0; }
.slider-fleche { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border: 1px solid var(--g3); border-radius: 50%;
  color: var(--gris); font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
  transition: color var(--t-doux), border-color var(--t-doux); }
.slider-fleche:hover, .slider-fleche:focus-visible { color: var(--encre); border-color: var(--accent); }
.slider-fleche[hidden] { display: none; }
.diapo { flex: 0 0 auto; height: clamp(4.5rem, 13vw, 6rem); width: auto; cursor: pointer;
  scroll-snap-align: center; opacity: .68; background: var(--papier);
  transition: opacity var(--t-doux); }
.diapo img { display: block; height: 100%; width: auto; aspect-ratio: var(--vign-ar, 1.4); object-fit: cover; }
.diapo:hover, .diapo:focus-visible { opacity: 1; }
.diapo[aria-selected="true"] { opacity: 1; }   /* marquée par le scanner, pas de liseré */

/* --------------------------------------------------------------- EXPOS --- */
.ligne { display: grid; grid-template-columns: 1fr; gap: .5rem; position: relative;
  padding: clamp(1.4rem, 3.2vw, 2.2rem) 0; border-top: 1px solid var(--g4); }
.ligne:first-of-type { margin-top: 1.6rem; }
.ligne:last-of-type { border-bottom: 1px solid var(--g4); }
@media (min-width: 44rem) { .ligne { grid-template-columns: 11rem 1fr auto; gap: 2rem; align-items: baseline; } }
.l-date { color: var(--accent); font-size: 1.14rem; font-variant-numeric: tabular-nums; }
.l-nom { font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.62rem); }
.l-lieu { color: var(--gris); font-size: .98rem; letter-spacing: .1em; text-transform: uppercase;
  font-family: inherit; line-height: 1.4; padding: 0 0 2px; text-align: left;
  border-bottom: 1px dotted currentColor; transition: color var(--t-doux); }
@media (min-width: 44rem) { .l-lieu { text-align: right; } }
.l-lieu:hover, .l-lieu:focus-visible { color: var(--accent); border-bottom-style: solid; }

/* --------------------------------------------------------- QUI SUIS-JE --- */
.bio { max-width: 46rem; position: relative; }
.bio p { margin-top: 1.15rem; font-weight: 300; font-size: 1.42rem; line-height: 1.8; }
.bio p:first-of-type { margin-top: 1.9rem; }
/* signature Cyclope — l'œil scelle la bio, flanqué de deux filets fins */
.signature { margin-top: 2.6rem; display: flex; align-items: center; gap: 1.1rem; max-width: 26rem; }
.signature .sig-filet { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--g3)); }
.signature .sig-filet:last-child { transform: scaleX(-1); }
.sig-oeil { width: 46px; height: auto; opacity: .6; transition: opacity var(--t-doux); }
.signature:hover .sig-oeil { opacity: .95; }
:root[data-theme="light"] .sig-oeil { filter: invert(1); }

/* ------------------------------------------------- CONTACT + NEWSLETTER -- */
.contact-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.4rem; position: relative; }
@media (min-width: 58rem) { .contact-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; } }
.form-bloc h3 { font-weight: 600; font-size: .9rem; letter-spacing: .26em; text-transform: uppercase; margin-bottom: .45rem; }
.form-bloc .chapo { color: var(--gris); font-size: .98rem; margin-bottom: 1.3rem; }
.form-bloc + .form-bloc { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--g4); }
.champ { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.05rem; }
.champ label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ textarea { font: inherit; font-size: 1.05rem; color: var(--encre); background: var(--g2);
  border: 1px solid var(--g3); border-radius: 2px; padding: .72rem .85rem; width: 100%;
  transition: border-color var(--t-doux), background var(--t-doux); }
.champ textarea { min-height: 7.5rem; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent); background: var(--g25); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-envoi { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--g0); background: var(--accent); border-radius: 2px; padding: .75rem 1.55rem;
  transition: opacity var(--t-doux); }
.btn-envoi:hover { opacity: .86; }
.champ-check { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  color: var(--gris); font-size: .9rem; cursor: pointer; }
.champ-check input { width: auto; margin: 0; accent-color: var(--accent); }
.form-note { font-size: .78rem; color: var(--gris); margin-top: .95rem; line-height: 1.55; }
.inline-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .champ { flex: 1 1 14rem; margin-bottom: 0; }
@media (max-width: 34rem) { .inline-form { flex-direction: column; align-items: stretch; } .inline-form .btn-envoi { width: 100%; } }

/* la colonne chantier — fil à plomb à sa gauche (lueur verticale) */
.chantier { position: relative; }
.chantier .tirage { max-width: 22rem; margin-inline: auto; }
/* recadrage planches — proposition photographe (PGH dispose) : cadre 4/5, haut favorisé */
.chantier .tirage img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.chantier .legende { max-width: 22rem; margin-inline: auto; text-align: right; }
@media (min-width: 58rem) {
  .chantier::before { content: ""; position: absolute; left: -1.6rem; top: .5rem; bottom: .5rem;
    width: 1px; background: var(--g3); }
}
@media (max-width: 57.99rem) { .chantier { order: 2; margin-top: 1rem; } }

/* mots du chantier — la planche de mots, sobre */
.mots { list-style: none; padding: 0; margin: 1.1rem auto 0; max-width: 22rem;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.mots li { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
  border: 1px solid var(--g3); border-radius: 2px; padding: .38rem .7rem;
  transition: color var(--t-doux), border-color var(--t-doux); }
.mots li:hover { color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------- BIG FOOTER = COULISSE --- */
.pied { position: relative; overflow: hidden; background: var(--coulisse); border-top: 1px solid var(--g4);
  padding: clamp(2.5rem, 7vh, 4.5rem) 0 2rem;
  box-shadow: inset 0 18px 30px -24px rgba(0,0,0,.55); }
:root[data-theme="light"] .pied { box-shadow: inset 0 16px 26px -22px rgba(75,62,42,.30); }
/* l'œil préside la coulisse — filigrane large, très discret */
.pied-filigrane { position: absolute; right: -3rem; bottom: -4rem; width: min(20rem, 42vw); height: auto;
  opacity: .04; pointer-events: none; z-index: 0; }
:root[data-theme="light"] .pied-filigrane { filter: invert(1); opacity: .05; }
.pied .enveloppe { position: relative; z-index: 1; }
.pied-grille { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pied h4 { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gris); margin-bottom: .95rem; }
.pied ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.pied li, .pied p { font-size: .98rem; color: var(--encre); font-weight: 300; }
.pied a, .pied button.lien { border-bottom: 1px solid var(--g3); padding-bottom: 1px; font-weight: 300;
  font-size: .98rem; text-align: left; transition: color var(--t-doux), border-color var(--t-doux); }
.pied a:hover, .pied button.lien:hover { color: var(--accent); border-color: var(--accent); }
.pied .fr-flag { font-size: .85em; }
.pied-bas { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--g4);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pied-bas span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.cyclope-sig { width: 34px; opacity: .5; transition: opacity var(--t-doux); }
.cyclope-sig:hover { opacity: 1; }
:root[data-theme="light"] .cyclope-sig { filter: invert(1); }

/* ------------------------------------------------------------- MODALES --- */
.modale[hidden] { display: none; }
.modale { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: color-mix(in srgb, var(--g0) 90%, transparent); padding: 1rem; }
.modale .carte { background: var(--g25); border: 1px solid var(--g3); border-radius: 4px;
  max-width: 36rem; width: 100%; max-height: 90vh; overflow: auto;
  padding: clamp(1.2rem, 4vw, 2rem); position: relative;
  box-shadow: 14px 22px 60px -20px var(--ombre); }
.modale-fermer { position: absolute; top: .55rem; right: .65rem; color: var(--gris);
  font-size: 1.6rem; line-height: 1; padding: .2rem .4rem; transition: color var(--t-doux); }
.modale-fermer:hover, .modale-fermer:focus-visible { color: var(--accent); }
.lieu-titre { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; margin: .2rem 2rem 1.1rem 0; }
/* le flyer est cliquable → lightbox (la modale reste dessous) */
.lieu-flyer-btn { float: right; width: min(9.5rem, 38%); margin: 0 0 .8rem 1rem; padding: 0;
  cursor: zoom-in; transition: transform var(--t-doux); }
.lieu-flyer-btn:hover { transform: translateY(-2px); }
.lieu-flyer { width: 100%; background: var(--papier); padding: .35rem;
  box-shadow: 8px 12px 30px -12px var(--ombre); }
.lieu-infos { margin: 0; }
.lieu-champ { display: grid; grid-template-columns: 8.5rem 1fr; gap: .4rem 1rem; padding: .52rem 0;
  border-top: 1px solid var(--g4); }
.lieu-champ:first-child { border-top: 0; }
.lieu-champ dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); padding-top: .2rem; }
.lieu-champ dd { margin: 0; font-size: 1rem; font-weight: 300; }
.lieu-champ dd a { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
@media (max-width: 30rem) { .lieu-champ { grid-template-columns: 1fr; gap: .15rem; } .lieu-flyer-btn { float: none; width: 55%; margin: 0 auto 1rem; display: block; } }
.lieu-liens { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; clear: both; }
.lieu-lien { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; padding: .52rem 1rem;
  transition: opacity var(--t-doux); }
.lieu-lien:hover { opacity: .82; }

/* --------------------------------------------------------- VISIONNEUSE --- */
.visionneuse[hidden] { display: none; }
.visionneuse { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--g0) 96%, transparent);
  display: grid; grid-template-rows: auto 1fr auto; padding: clamp(.8rem, 3vw, 2rem); }
/* la page d'album porte son titre dans le style du NOM */
.vis-titre { font-weight: 600; font-size: clamp(1.15rem, 4.6vw, 3rem); line-height: 1.12;
  letter-spacing: .03em; text-transform: uppercase; text-align: center;
  padding-bottom: clamp(.4rem, 2vh, 1rem); }
.vis-scene { display: grid; place-items: center; min-height: 0; }
.vis-scene .tirage { max-width: min(92vw, 60rem); max-height: 100%; display: grid; }
.vis-scene img { max-height: 62vh; width: auto; max-width: 100%; margin-inline: auto; transition: opacity .22s ease; }
.vis-btn[hidden], .vis-compte[hidden] { display: none; }
.vis-barre { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: 1rem; flex-wrap: wrap; }
.vis-legende { width: 100%; text-align: center; order: -1; }
.vis-btn { border: 1px solid var(--g3); color: var(--encre); border-radius: 2px;
  padding: .58rem 1.15rem; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color var(--t-doux), color var(--t-doux); }
.vis-btn:hover, .vis-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.vis-compte { color: var(--gris); font-variant-numeric: tabular-nums; font-size: .88rem; letter-spacing: .14em; }

/* --------------------- LUEURS — trajectoires variées, toujours discrètes --
   allers, retours, et un fil à plomb vertical · durées non-multiples. */
.nav::after, .bande.filet-lueur > i.lueur, .pied::after {
  content: ""; position: absolute; width: var(--lsize, 4px); height: var(--lsize, 4px); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 var(--lglow, 6px) 1px var(--accent);
  opacity: 0; pointer-events: none; z-index: 41;
}
/* intensités DIFFÉRENTES d'une lueur à l'autre (--lpeak) + halos variés (--lglow/--lsize) :
   certaines à peine visibles (braises), d'autres plus franches (l'ampoule qui palpite). */
.nav::after         { left: 0; bottom: -2px; --lpeak: .30; --lglow: 4px; --lsize: 3px; animation: lueur-aller 11.3s ease-in-out infinite; animation-delay: -4.1s; }
.filet-lueur > i.lueur { top: -2px; }
#albums > i.lueur      { right: 0; --lpeak: .68; --lglow: 9px; --lsize: 5px; animation: lueur-retour 13.7s ease-in-out               infinite; animation-delay: -5.9s; }
#expos > i.lueur       { left: 0;  --lpeak: .40; --lglow: 5px;              animation: lueur-aller  9.7s  cubic-bezier(.37,0,.63,1) infinite; animation-delay: -2.3s; }
#qui-suis-je > i.lueur { right: 0; --lpeak: .55; --lglow: 7px;              animation: lueur-retour 16.1s ease                      infinite; animation-delay: -7.7s; }
#contact > i.lueur     { left: 0;  --lpeak: .34; --lglow: 4px; --lsize: 3px; animation: lueur-aller 12.3s ease-in-out               infinite; animation-delay: -3.1s; }
.pied::after        { left: 0; top: -2px; --lpeak: .48; --lglow: 6px; animation: lueur-retour 14.9s ease-in-out infinite; animation-delay: -6.7s; }
/* le fil à plomb du chantier — la lueur monte, comme une bulle de révélateur */
@media (min-width: 58rem) {
  .chantier::after { content: ""; position: absolute; left: calc(-1.6rem - 1.5px); bottom: .5rem;
    width: var(--lsize, 4px); height: var(--lsize, 4px); border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 var(--lglow, 7px) 1px var(--accent); opacity: 0; pointer-events: none;
    --lpeak: .62; --lglow: 8px; --lsize: 5px;
    animation: lueur-monte 10.9s ease-in-out infinite; animation-delay: -4.3s; }
}
/* la respiration interne (creux/reprises) empêche une luminosité plate le long du trajet */
@keyframes lueur-aller {   /* apparaît tôt, s'éteint vers 1/3 du trajet — jamais visible à la fin */
  0% { left: -1%; opacity: 0; } 9% { opacity: var(--lpeak,.5); } 25% { opacity: calc(var(--lpeak,.5) * .8); }
  31% { opacity: 0; } 100% { left: 100%; opacity: 0; }
}
@keyframes lueur-retour {   /* n'existe que dans une fenêtre au MILIEU — invisible aux deux bouts */
  0% { right: -1%; opacity: 0; } 22% { opacity: 0; } 32% { opacity: var(--lpeak,.5); }
  50% { opacity: calc(var(--lpeak,.5) * .55); } 57% { opacity: 0; } 100% { right: 100%; opacity: 0; }
}
@keyframes lueur-monte {   /* scintille deux fois puis s'éteint avant le sommet */
  0% { bottom: -1%; opacity: 0; } 13% { opacity: var(--lpeak,.5); } 25% { opacity: 0; } 41% { opacity: 0; }
  50% { opacity: calc(var(--lpeak,.5) * .8); } 62% { opacity: 0; } 100% { bottom: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav::after, .filet-lueur > i.lueur, .pied::after, .chantier::after, .diapo::after { animation: none !important; opacity: 0 !important; }
  .cadre::before, .tirage { transition: none; }
  :root { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .bande { animation: fondu .8s ease both; }
  @keyframes fondu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ============================================================================
   V14 : AUCUN CADRE — mat / bordure / fond retirés sur TOUTES les photos
   (home, chantier, scènes d'album, diapos) ET dans la lightbox. Edge-to-edge.
   ========================================================================== */
.tirage,
.album-page .stage-cadre,
.album-page .diapo,
:root[data-theme="dark"] .album-page .stage-cadre,
:root[data-theme="dark"] .cadre-music .stage-cadre,
:root[data-theme="dark"] .cadre-music .diapo,
:root[data-theme="dark"] .moment .tirage {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.cadre:hover { box-shadow: none; transform: none; }
.cadre::before { display: none; }   /* viseur/coins retirés — aucun cadre */

/* photo home : ADAPTÉE AU FORMAT D'ÉCRAN — pano entier sur large, recadré 3/2 (foreground/ombre) sur étroit */
.moment .tirage img { width: 100%; height: auto; aspect-ratio: 2000 / 780; }
@media (max-width: 46rem) {
  .moment .tirage img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 72%; }
}

/* contact : case « recevoir une copie » à gauche + bouton Envoyer à DROITE, même ligne */
.champ-envoi { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.champ-envoi .champ-check { margin: 0; }
.nowrap { white-space: nowrap; }   /* garde un groupe de mots insécable (césure propre) */
/* légendes photos un peu plus petites sur mobile */
@media (max-width: 40rem) {
  .stage-leg, .legende { font-size: .72rem; letter-spacing: .1em; }
}

/* ---- CTA newsletter (bouton présenté comme le lien d'avant) ---- */
.cta-lien { display:inline-block; background:none; cursor:pointer; font-family:inherit;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--accent); border:1px solid var(--accent); padding:.75rem 1.5rem; border-radius:2px;
  transition:color var(--t), border-color var(--t), background var(--t); }
.cta-lien:hover, .cta-lien:focus-visible { background:var(--g2); }

/* ---- Presse : modale « Ils en parlent » (style musée, sobre, zéro logo) ---- */
.presse-liste { list-style:none; margin:1.1rem 0 0; padding:0; }
.presse-liste li { border-top:1px solid var(--g4); }
.presse-liste li:last-child { border-bottom:1px solid var(--g4); }
.presse-liste a { display:block; padding:.9rem .25rem; text-decoration:none; color:inherit; }
.presse-liste a:hover { background:var(--g1); }
.presse-liste .pr-titre { display:block; font-size:1.05rem; line-height:1.25; }
.presse-liste .pr-meta { display:block; color:var(--gris); font-size:.85rem; letter-spacing:.03em; margin-top:.2rem; }

/* ---- confirmation d'inscription dans la modale newsletter ---- */
.nl-confirm { color:#4f8a5c; font-weight:600; margin-top:.6rem; }

/* ---- newsletter déplacée dans le footer (sous la grille) ---- */
.pied-lettre { border-top:1px solid var(--g4); margin-top:1.6rem; padding-top:1.5rem; max-width:34rem; }
.pied-lettre h4 { margin:0 0 .25rem; }
.pied-lettre .chapo { color:var(--gris); margin:0 0 .8rem; }