/* ═══════════════════════════════════════════════════════════════════════
   charte_spn_wip.css — SPN · salonphotonimes.fr
   AI_FACTORY SPN · Nanodot × UClaude × CCOdin · WIP · 2026-07-10
   Fusion : charte_spn.css V4 (base canon) + header/hero V13 (composants WIP)
   Δ WIP actifs : palette OR 3 tokens (#CC9828) · header/hero · dark HORS SCOPE
   NBB : 0 hex hors :root/[data-theme] (grep). Toute couleur passe par un token sourcé.
   Registre : LA RÉCLAME · cartes-postales · vieux-yeux · header/hero V13.
   Doctrine : CLAUDE.md §16 → docs/CHARTE_SPN.md pour la doc de référence.
   Chaque token commenté-sourcé (procédé/nuancier/décision+date).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── FONTS · LT Museum SOLO · OFL 1.1 © LyonsType · woff2 auto-hébergées ─── */
/* 6 coupes · path ../fonts/ (CSS dans website_spn/css/) */
@font-face { font-family: 'LT Museum'; src: url('../fonts/LTMuseum-Light.woff2') format('woff2');        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'LT Museum'; src: url('../fonts/LTMuseum-LightItalic.woff2') format('woff2');  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'LT Museum'; src: url('../fonts/LTMuseum-Medium.woff2') format('woff2');       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'LT Museum'; src: url('../fonts/LTMuseum-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'LT Museum'; src: url('../fonts/LTMuseum-Bold.woff2') format('woff2');         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'LT Museum'; src: url('../fonts/LTMuseum-Black.woff2') format('woff2');        font-weight: 900; font-style: normal; font-display: swap; }

/* ══════════════════════════════════════════════════════════════════════════
   TOKENS · :root · palette + composants + rôles
   ══════════════════════════════════════════════════════════════════════════ */
:root {

  color-scheme: light;   /* M113 · light-only (cohérent M112) · coupe l'auto-dark navigateur qui inversait le titre hero en blanc */

  /* ─── PALETTE FONDAMENTALE · charte v3 canon ─── */
  --creme:            #f5f3ee;   /* fond papier · charte v3 (agent_chromiste) */
  --creme-lumiere:    #F5EFE6;   /* lumière lapidaire · côté clair de la pierre (M014) */
  --noir:             #111110;   /* texte fort · header · footer · citation-inline V9 */
  --van-dyck:         #5C3D2E;   /* procédé Van Dyck XIXe · texte courant · contraste 7.4:1 sur crème = WCAG AAA */
  --or-daguerreotype: #C9A84C;   /* V4 canon · reflet plaque Daguerre 1839 · conservé comme référence (remplacé en usage) */
  --or:               #CC9828;   /* WIP · or-true · arbitrage Nanodot 2026-07-10 (remplace alias var(--or-daguerreotype)) */
  --or-fonce:         color-mix(in srgb, var(--or) 55%, var(--noir));     /* WIP · ~#785B1D · ombre or chaude */
  --or-sepia:         color-mix(in srgb, var(--or-fonce) 55%, white 45%); /* WIP · ~#B5A583 · fond carte-hero.var-800 */
  --gris-soutenu:     #6B655E;   /* pierre grise · titres canon opacity 70% · sous-titres discrets */
  --pierre-ombre:     #9A8A81;   /* ombre pierre · texture lapidaire (charte v3) */
  --rouge-nimes:      #E30613;   /* signature · CTA · wordmark + #cyclope SEULS · jamais en nappe */
  --laiton:           #E18C2A;   /* accent exposants · CYC-02 (charte v3) */

  /* ─── TEINTES DE SECTION · un procédé = une époque = une teinte ─── */
  /* Portée STRICTE : label + filet gauche des encadrés + fond d'encadré ≤6% opacité.
     Territoire (crème + Van Dyck + grain) invariant. Jamais en nappe. */
  --t-salon:          #8B6347;   /* sépia albumine 1850-1900 · CYC-01 cuir Leica */
  --t-historique:     var(--van-dyck);       /* Van Dyck · NB fondateurs roi */
  --t-cyclope:        #A8A9AD;   /* argent boîtier · charte v1 argent-bromure · seule section rouge autorisé (écho) */
  --t-bicentenaire:   #4A4038;   /* bitume de Judée · héliographie 1827 */
  --t-programme:      #3F6189;   /* cyanotype moyen · ciel Technika CYC-03 */
  --t-galerie:        #5C467F;   /* violet nuit · Ikonta CYC-06 */
  --t-exposants:      #322A1E;   /* velours Scénographe CYC-02 · accent laiton */
  --t-acces:          #1A585F;   /* Chevalier de Vevey CYC-08 assombri (contraste ~9:1 sur crème = AAA) */

  /* ─── TOKENS COMPOSANTS · session M016 V17-V19 ─── */
  --papier-baryte:      #fdfcf9;             /* tirage-carte · fond baryté opaque (tirage photo) */
  --gris-clair-pierre:  #E8E5DE;             /* verso photo · pierre lissée fixe (V8 · hover ou pas) */
  --olive-link:         #474523;             /* links dans la carte · Nanodot 2026-07-07 */
  --brun-encreur:       #2A2321;             /* ruban encreur dactylo · étiquette proto_reclame */

  /* ─── ALIAS · compatibilité style.css (site historique) · zéro doublon de valeur ─── */
  --black:              var(--noir);
  --white:              var(--papier-baryte);
  --bg:                 var(--creme);
  --red:                var(--rouge-nimes);
  --font-lt-museum:     var(--font);
  --ink:                #3A3A37;             /* texte moyen entre noir et van-dyck · nav, corps, cite */
  --bg-alt:             #F0EDE6;             /* fond alt sections en quinconce (style.css .section-alt) */
  --border:             #D4D0C8;             /* bordures fines (header, footer, form) */

  /* ─── CARTE-POSTALE · transparence UClaude V17 ─── */
  --papier-carte:     rgba(253, 252, 249, 0.92);   /* .92 canon vieux-yeux */
  --card-bg:          var(--papier-carte);

  /* ─── GRAIN · vue-du-gras 1827 ─── */
  --grain-src:        url('../img/vue-du-gras-full.webp');
  --grain-opacity:    0.20;
  --grain-blend:      multiply;

  /* ─── LAPIDAIRE · ombre + lumière ─── */
  --lap-ombre:        var(--gris-soutenu);
  --lap-lumiere:      var(--teinte);
  --lap-size:         160px;

  /* ─── SECTION par défaut · uniformisation OR 2026-07-11 ─── */
  --teinte:           var(--or-fonce);

  /* ─── TYPO · font stack et graisses nommées (agent_typographe V2) ─── */
  --font:             'LT Museum', Georgia, serif;
  --fw-light:         300;
  --fw-medium:        500;
  --fw-bold:          700;
  --fw-monumental:    900;
  --ls-tight:         0.01em;
  --ls-corps:         -0.02em;   /* négatif · textes de section · M101 */
  --ls-lapidaire:     0.10em;
  --ls-titre:         0.04em;
  --ls-eyebrow:       0.24em;
  --lh-monumental:    1.05;
  --lh-serré:         1.4;
  --lh-corps:         1.3;
  --lh-aéré:          1.7;

  /* ─── OMBRES · langage tirage-carte ─── */
  --sh-carte:         -5px 6px 14px rgba(17, 17, 16, 0.16),
                      -16px 22px 56px rgba(17, 17, 16, 0.26);
  --sh-tirage:        0 1px 2px rgba(17, 17, 16, 0.18),
                      0 14px 34px rgba(17, 17, 16, 0.16);

  /* ─── WIP · HALO · lumière crème sur fond photo · V13 ─── */
  --halo-lumiere:     0 0 8px rgba(245, 243, 238, .90),
                      0 0 16px rgba(245, 243, 238, .70),
                      0 0 32px rgba(245, 243, 238, .45);

  /* ─── WIP · HEADER · fond sticky translucide · V13 ─── */
  --bg-header:        rgba(180, 178, 173, .95);   /* warm grey · un cran plus foncé · M078 (était 197,195,191) */

  /* ─── FILTRE PHOTO · NB chaud documentaire ─── */
  --filtre-nb:        grayscale(1) contrast(1.06) sepia(0.12);
  --filtre-doux:      saturate(0.72) sepia(0.10) contrast(0.97) brightness(1.02);   /* couleur adoucie · dos-photos + couvertures · M041 */
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE · V4 INTACT · hors scope WIP · + --bg-header override
   Rail actif · l'image vue-du-gras-dark.webp est un PLACEHOLDER uni #1C1916
   en attendant la composition Nanodot.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* DARK GELÉ · M112 · 2026-07-24 (décision Nanodot)
     dark ≡ light pour le moment : corps vidé → hérite de :root (light).
     Le toggle + l'auto-résolution prefers-color-scheme restent NATIFS (JS intact).
     Un visiteur navigateur-en-dark reçoit data-theme="dark" mais rend crème = light.
     RÉARMER = restaurer le draft ci-dessous + régler la palette + poser <button id="theme-toggle"> dans le markup.
     ── DRAFT dark conservé (première passe, non réglé) ──
     creme #262220 · creme-lumiere #2E2A26 · noir #F5EFE6 · van-dyck #E8D5B0 · gris-soutenu #A0968A · pierre-ombre #6B655E
     t-salon #D4A88B · t-historique var(--van-dyck) · t-cyclope #E0D8CC · t-bicentenaire #B8A899 · t-programme #8FB3E0 · t-galerie #B29CD4 · t-exposants #B8A88F · t-acces #7FBAC0
     papier-baryte #1F1C1A · gris-clair-pierre #2C2925 · brun-encreur #E8DFC8 · ink #B0A896 · bg-alt #2F2B27 · border #3D3833 · papier-carte rgba(31,27,25,0.92) · card-bg var(--papier-carte)
     grain-src url('../img/vue-du-gras-dark.webp') · grain-opacity 0.30 · bg-header rgba(38,34,32,.96) */
}

/* ══════════════════════════════════════════════════════════════════════════
   RESET LÉGER · box-sizing + reset marges natifs
   ══════════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BODY · registre du site
   ══════════════════════════════════════════════════════════════════════════ */
body {
  background: var(--creme);
  color: var(--or-fonce);
  font: var(--fw-medium) 1.3rem/var(--lh-aéré) var(--font);
  min-height: 100vh;
}

/* ─── Grain global · vue-du-gras 1827 · sous tout le contenu ─── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: var(--grain-src) center / cover no-repeat;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}
@supports (-webkit-touch-callout: none) {
  body::before { position: absolute; height: 200vh; }
}
main, header, footer { position: relative; z-index: 2; }

/* ══════════════════════════════════════════════════════════════════════════
   TYPO HIÉRARCHIE GLOBALE (registre standard site)
   ══════════════════════════════════════════════════════════════════════════ */
h1 { font-weight: var(--fw-monumental); letter-spacing: var(--ls-titre); line-height: var(--lh-monumental); color: var(--noir); }
h2 { font-weight: var(--fw-bold); color: var(--gris-soutenu); letter-spacing: var(--ls-titre); }
h3 { font-weight: var(--fw-medium); color: var(--gris-soutenu); }
a  { color: var(--olive-link); text-decoration: underline; text-decoration-thickness: 1px; }
a:hover { color: var(--or-fonce); }

/* ══════════════════════════════════════════════════════════════════════════
   TEINTE PAR SECTION · mécanique générique
   ══════════════════════════════════════════════════════════════════════════ */
/* uniformisation OR 2026-07-11 · toutes sections → --or-fonce · tokens --t-xxx conservés :root */
section[data-teinte] { --teinte: var(--or-fonce); }
#salon, #historique, #cyclope, #bicentenaire,
#programme, #galerie, #exposants, #infos-pratiques,
#acces { --teinte: var(--or-fonce); }
section[data-teinte] .label-teinte,
section[data-teinte] .eyebrow {
  color: var(--teinte);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-lapidaire);
  text-transform: uppercase;
  font-size: 0.8rem;
}
section[data-teinte] .encadre {
  border-left: 3px solid var(--teinte);
  background: color-mix(in srgb, var(--teinte) 5%, var(--creme));
  padding: 1.2rem 1.5rem;
}
#cyclope .echo-rouge { color: var(--rouge-nimes); }

/* ══════════════════════════════════════════════════════════════════════════
   WIP · HEADER · sticky · composants V13 + Δ delta nav/wordmark
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-header);
  backdrop-filter: blur(6px);
}
/* filet or en haut · signature SPN */
.site-header::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--or), transparent);
  pointer-events: none;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 1.1rem 25px .4rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  position: relative;
}
.wordmark {
  font-family: var(--font); font-weight: var(--fw-monumental); font-size: 1.25rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--or) 50%, var(--noir));
  text-decoration: none; white-space: nowrap;
  -webkit-text-stroke: 0.3px color-mix(in srgb, var(--or) 50%, var(--noir));
}
/* Δ wordmark hover : color noir · text-shadow none (delta V13 simplifié) */
.wordmark:hover { color: var(--noir); text-shadow: none; }

.site-nav {
  display: flex; gap: 1.4rem; flex: 1;
  flex-wrap: wrap; align-items: center; justify-content: flex-end;
}
.site-nav a {
  font-family: var(--font); font-weight: var(--fw-bold); font-size: 1.4rem;
  color: var(--noir); text-decoration: none; white-space: nowrap;
  position: relative;
}
/* Δ nav hover : color or-fonce · text-shadow none (delta V13 simplifié) */
.site-nav a:hover { color: var(--or-fonce); }

/* toggle thème · réservé footer (à brancher quand réglé) */
.btn-theme-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--or); padding: 2px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.btn-theme-toggle:hover { opacity: .6; }
.btn-theme-toggle svg { display: block; }

/* sélecteur de langue · top-right header */
.header-lang {
  position: absolute; top: 0; right: 2px;
  display: flex; flex-direction: column; gap: 1px; z-index: 110;
}
.btn-lang {
  background: none; border: none;
  color: var(--noir); font-family: var(--font);
  font-size: .8rem; font-weight: var(--fw-monumental);
  padding: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .2s;
}
.btn-lang[aria-current=true] {
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--gris-soutenu);
}
.btn-lang:disabled { opacity: .35; cursor: default; }

/* burger mobile · masqué desktop */
.btn-burger {
  display: none; background: none; border: none;
  cursor: pointer; color: var(--noir);
  padding: 4px; margin-left: auto; order: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
   WIP · CARTE HERO · cadre principal page d'accueil · V13
   ══════════════════════════════════════════════════════════════════════════ */
.carte-hero {
  max-width: 1200px; margin: 25px auto 0;
  padding: 1.8rem 3rem;
  background: var(--papier-carte);
  box-shadow: var(--sh-carte);
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 1.6rem;
}
/* Δ delta : fond or-sepia 67% translucide · laisse respirer le grain Vue-du-Gras */
.carte-hero.var-800 {
  padding: 25px;
  gap: 1.2rem;
  background: color-mix(in srgb, var(--border) 67%, transparent);
  overflow: visible;
}

/* slogan · centré bas du cadre */
/* .hero-slogan migré → .footer-xl (bandeau de tête du footer) · M068 P1 */

/* bandeau DATE · bord à bord cadre */
.hero-l01 {
  align-self: stretch;
  margin-top: calc(.6rem + 5px);
  display: flex; align-items: center; justify-content: flex-start;
  background: linear-gradient(to right, var(--or) 0%, var(--or) 55%, transparent 100%);
  color: var(--noir);
  padding: 5px 12px 5px 25px;
  font-family: var(--font); font-weight: var(--fw-bold); font-size: 2.5rem;
  text-transform: uppercase;
}

/* CTA · top:100% = bord bas figure parente · zéro calc */
.hero-l02 {
  position: absolute; top: 100%; right: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--noir); color: var(--or);
  padding: 18px 32px 24px;
  font-family: var(--font); font-weight: var(--fw-medium); font-size: 1.15rem;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: opacity .2s; z-index: 4;
}
.hero-l02:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════════════════════
   WIP · TITRE HERO · halo crème sur fond photo · V13
   ══════════════════════════════════════════════════════════════════════════ */
.titre-hero {
  font-family: var(--font); font-weight: var(--fw-monumental); font-size: 3rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--noir); line-height: 1.05; white-space: nowrap;
  text-shadow: var(--halo-lumiere);
}
/* overlay absolu · bord à bord cadre via left/right -25px */
.var-800 .titre-hero {
  position: absolute; bottom: 80px; left: -25px; right: -25px;
  display: flex; flex-direction: column; align-items: flex-start;
  letter-spacing: 0; z-index: 5; text-shadow: none;
}

/* ligne 1 : « 40e Salon » */
.titre-l1 {
  display: block; margin-left: 25px;
  font-family: var(--font); font-weight: var(--fw-monumental); font-size: 3.8rem;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--noir); line-height: 1;
  text-shadow: var(--halo-lumiere);
  text-box: trim-end alphabetic;
  text-box-trim: trim-end;
  text-box-edge: cap alphabetic;
}
.titre-l1 .titre-de { font-size: .52em; font-weight: var(--fw-medium); text-transform: none; }

/* ligne 2 : « NÎMES » · monumental */
.titre-l2 {
  display: block; margin-left: 25px;
  font-family: var(--font); font-weight: var(--fw-monumental); font-size: 7rem;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--noir); line-height: 1;
  text-shadow: var(--halo-lumiere);
  text-box: trim-start cap alphabetic;
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}
.titre-l2 .titre-sup { font-size: .32em; font-weight: var(--fw-medium); vertical-align: super; text-transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   WIP · PHOTO HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero-photo-frame { position: relative; width: 1150px; max-width: 100%; }
/* bordures dégradées or verticales · signature SPN */
/* M115 · wrapper img · contexte de position des bordures → elles se calent sur la PHOTO seule */
.hero-photo-wrap { position: relative; display: block; width: 100%; line-height: 0; }
.photo-border-left, .photo-border-right {
  position: absolute; top: 0; width: 1px; height: 100%;
  pointer-events: none; z-index: 5;
}
.photo-border-left  { left: 0;  background: linear-gradient(to bottom, var(--or), transparent); }
.photo-border-right { right: 0; background: linear-gradient(to top,   var(--or), transparent); }
.hero-photo { display: block; width: 100%; height: auto; filter: var(--filtre-nb); }

/* ══════════════════════════════════════════════════════════════════════════
   WIP · TEXTE PRÉSENTATION · CITATION
   ══════════════════════════════════════════════════════════════════════════ */
.hero-texte-presentation-wrap { display: grid; grid-template-columns: 1fr 2fr 1fr; width: 100%; }
.hero-texte-presentation {
  grid-column: 2; letter-spacing: var(--ls-corps);
  font-family: var(--font); font-weight: var(--fw-medium); font-size: 1.5rem;
  line-height: var(--lh-corps);
  color: color-mix(in srgb, var(--noir) 70%, transparent);
  text-align: center;
}
.tp-up { text-transform: uppercase; font-weight: var(--fw-bold); color: color-mix(in srgb, var(--or) 50%, var(--noir)); }

.cta-fleche { color: var(--or); font-weight: var(--fw-bold); margin-left: .5rem; font-size: 1.6em; line-height: 1; }

.hero-texte-citation { width: 100%; margin-top: 90px; }   /* dégage sous le CTA absolu ~60px · desktop · M041 (était 51px, collé) */
.hero-citation { text-align: right; margin-top: .8rem; }
.hero-citation blockquote {
  font-weight: var(--fw-light); font-size: 1.2rem;
  font-style: italic; color: var(--noir); line-height: 1.3;
}
.hero-citation cite {
  display: block; font-size: 1.05rem; font-style: normal;
  color: var(--gris-soutenu); margin-top: .2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPOSANTS · LA RÉCLAME (proto_reclame.html) + CARTES-POSTALES (proto_cartes V19)
   V4 INTACT · NE PAS MODIFIER
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── .tirage-carte + .etiquette-dactylo · signature réclame ─── */
.tirage-carte {
  position: relative;
  background: var(--papier-baryte);
  padding: 10px 10px 14px;
  box-shadow: var(--sh-tirage);
  transform: rotate(var(--rot, -1.2deg));
}
.tirage-carte img {
  display: block; width: 100%;
  filter: var(--filtre-nb);
}
.tirage-carte::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, transparent 60%, rgba(92, 61, 46, 0.06));
  pointer-events: none;
}
.etiquette-dactylo {
  position: absolute; left: -8px; bottom: 18px;
  background: var(--brun-encreur);
  color: var(--creme);
  font-weight: var(--fw-medium); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
  box-shadow: 2px 2px 6px rgba(17, 17, 16, 0.25);
}
.etiquette-dactylo .date { color: var(--or); margin-left: 0.5em; }

/* ─── .carte-postale (proto_cartes V19) · registre principal ─── */
.carte-postale {
  max-width: 1200px; margin: 3rem auto;
  padding: 1.5rem 3rem 3rem;
  background: color-mix(in srgb, var(--border) 74%, transparent);   /* M113 · +transparence · grain body transparaît plus (était 84%) */
  box-shadow: var(--sh-carte);
  position: relative;
  display: grid; grid-template-columns: 1.05fr 1fr;
  grid-auto-rows: auto;
  column-gap: 3rem; row-gap: 1rem;
  align-items: start;
  --lap-lumiere: var(--gris-clair-pierre);
  --lap-ombre:   color-mix(in srgb, var(--gris-soutenu) 55%, var(--creme));
}
.carte-postale a { color: var(--olive-link); text-decoration: underline; text-decoration-thickness: 1px; }
.carte-postale a:hover { color: var(--or-fonce); }
@media (max-width: 820px) {
  .carte-postale { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; }
}

/* ─── Titre de section (eyebrow) ─── */
.carte-postale .titre-section {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem;   /* rythme #historique généralisé à toutes les cartes · M043 (était 1.2rem) */
  font-family: var(--font);
  font-weight: var(--fw-bold); font-size: 0.9rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--or-fonce);   /* Δ assemblage · canon main CCOdin */
}

/* ─── Bloc titre · pleine largeur ─── */
.carte-postale .bloc-titre-haut {
  grid-column: 1 / -1;
  margin-bottom: 0.6rem;   /* rythme #historique généralisé à toutes les cartes · M043 (était 0.4rem) */
  text-align: left;   /* align left généralisé à toutes les cartes · M041 (était center) */
}
/* #historique · espacements titre resserré/aéré (M041) → promus en global .carte-postale · M043 */
/* chapeau · 1er paragraphe pleine largeur au-dessus texte+photo (M041) */
#historique .chapeau-histoire {
  grid-column: 1 / -1;
  margin: 0 0 1.8rem;
  font-size: 1.2rem; line-height: 1.4; letter-spacing: var(--ls-corps);
  color: var(--noir);
}
#historique .chapeau-histoire strong { font-weight: var(--fw-bold); color: var(--or-fonce); }
/* chapeau pleine largeur · intro au-dessus des 2 colonnes · générique cartes (M048 · #programme) */
.carte-postale .chapeau {
  grid-column: 1 / -1;
  margin: 0 0 1.8rem;
  font-size: 1.2rem; line-height: 1.4; letter-spacing: var(--ls-corps);
  color: var(--noir);
}
.carte-postale .chapeau strong { font-weight: var(--fw-bold); color: var(--or-fonce); }
.carte-postale .titre-postal-court {
  color: var(--gris-soutenu); opacity: 0.85;
  font-weight: var(--fw-monumental);
  font-size: clamp(1.5rem, 6vw, 3rem);
  line-height: var(--lh-monumental); letter-spacing: var(--ls-tight);
  margin: 0;
}
.carte-postale .titre-postal-court .num { font-size: 1.15em; letter-spacing: 0; }
.carte-postale .titre-postal-court .num sup { font-size: 0.5em; font-weight: var(--fw-bold); }
.carte-postale .titre-postal-court .soustitre-guill {
  display: inline-block; margin-top: 0.05em;
  font-size: 1em; font-weight: var(--fw-monumental);
  text-transform: uppercase; letter-spacing: var(--ls-tight);
}
@media (max-width: 820px) {
  /* titre-postal-court : le clamp de base gère le mobile (plancher 1.5rem) · M101 E2 */
}

/* ─── Sous-titre teinté ─── */
.carte-postale .sous-postal-court {
  color: var(--teinte); font-weight: var(--fw-bold);
  font-size: 1.45rem; line-height: 1.25;
  margin: 0 0 1.7rem;
}

/* ─── Body de la carte · lh 1.4 (V13) ─── */
.carte-postale .body-court {
  color: var(--or-fonce); font-weight: var(--fw-medium);
  font-size: 1.25rem; line-height: var(--lh-corps); letter-spacing: var(--ls-corps);
  max-width: 56ch;
  text-align: left;
}
.carte-postale .body-court p { margin-bottom: 1rem; }
/* premier § en noir · moins d'or foncé, meilleure lecture d'attaque · toutes sections (M041) */
.carte-postale .body-court p:first-child { color: var(--noir); }
.carte-postale .body-court strong { font-weight: var(--fw-bold); color: var(--or-fonce); }
/* #histoire · noms des fondateurs en noir · seul « Club Niépce Daguerre » reste or (M041) */
#historique .body-court strong { color: var(--noir); }
#historique .body-court strong.cnd { color: var(--or-fonce); }
.carte-postale .body-court em { color: var(--noir); font-weight: var(--fw-bold); font-style: italic; }

.carte-postale .body-court .citation-inline { color: var(--noir); }
.carte-postale .body-court .citation-inline strong { color: var(--noir); font-weight: var(--fw-bold); }

.carte-postale .body-court .filet-or {
  border: none; height: 1px;
  background: var(--or);
  opacity: 0.55;
  width: 60px;
  margin: 1.5rem 0 1.3rem;
}

/* ─── Colonne image ─── */
.carte-postale .tirage-avec-badge {
  display: flex; flex-direction: column;
  align-self: start;
  height: auto;
}

/* ─── Tirage-postale flip · hover + focus-within (canon V2b V19) ─── */
.carte-postale .tirage-postale-flip {
  position: relative; perspective: 1600px;
  max-width: 440px; margin: 0 auto;
  cursor: pointer;
}
.carte-postale .tirage-postale-flip:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.carte-postale .tirage-postale-inner {
  display: grid; grid-template-areas: 'stack';
  transition: transform 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform-style: preserve-3d;
}
.carte-postale .tirage-postale-flip:hover .tirage-postale-inner,
.carte-postale .tirage-postale-flip:focus-within .tirage-postale-inner {
  transform: rotateY(180deg);
}
.carte-postale .tirage-postale-face {
  grid-area: stack;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.carte-postale .tirage-postale-recto { opacity: 1; visibility: visible; position: relative; }
.carte-postale .tirage-postale-verso { opacity: 0; visibility: hidden; transform: rotateY(180deg); }
.carte-postale .tirage-postale-flip:hover .tirage-postale-recto,
.carte-postale .tirage-postale-flip:focus-within .tirage-postale-recto {
  opacity: 0; visibility: hidden;
}
.carte-postale .tirage-postale-flip:hover .tirage-postale-verso,
.carte-postale .tirage-postale-flip:focus-within .tirage-postale-verso {
  opacity: 1; visibility: visible;
}

.carte-postale .tirage-postale-recto {
  background: var(--papier-baryte);
  padding: 14px 14px 0;
  box-shadow: var(--sh-tirage);
}
.carte-postale .tirage-postale-recto img {
  display: block; width: 100%; height: auto;
  filter: var(--filtre-nb);
}
/* M120 · #infos-pratiques · image recadrée en amont (salon_photo_de_Nimes_NB_crop.webp) → affichage naturel, aucun crop CSS */
/* verso génériques (hors #bicentenaire/#cyclope qui ont leurs règles) · ratio natif · anti-stretch */
.carte-postale .tirage-postale-verso img {
  display: block; width: 100%; height: auto;
}

.carte-postale .tirage-postale-verso {
  position: relative;
  background: var(--gris-clair-pierre);
  padding: 1.8rem 1.6rem 1.6rem;
  transform: rotateY(180deg);
  box-shadow: var(--sh-tirage);
  color: var(--or-fonce);
  min-height: 100%;
  overflow: hidden;
}
.carte-postale .tirage-postale-verso::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/xl-40.webp') center / cover no-repeat;
  opacity: 0.20;
  pointer-events: none; z-index: 0;
}
.carte-postale .tirage-postale-verso > * { position: relative; z-index: 1; }
.carte-postale .tirage-postale-verso .verso-titre {
  font-weight: var(--fw-monumental); font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--teinte); margin-bottom: 0.5rem;
}
.carte-postale .tirage-postale-verso .verso-date {
  font-family: var(--font); font-weight: var(--fw-light);
  font-size: 1rem; letter-spacing: 0.12em;
  color: var(--gris-soutenu); margin-bottom: 1rem;
  text-transform: uppercase;
}
.carte-postale .tirage-postale-verso p {
  font-size: 1.1rem; line-height: 1.35; margin-bottom: 0.6rem;   /* interligne verso #historique/#le-salon généralisé · M043 (était lh-corps/0.8rem) */
  font-weight: var(--fw-medium); color: var(--noir);
}
.carte-postale .tirage-postale-verso p strong { font-weight: var(--fw-bold); color: var(--noir); }
.carte-postale .tirage-postale-verso p em { font-style: italic; color: var(--gris-soutenu); }
.carte-postale .tirage-postale-verso p.credit { color: var(--gris-soutenu); }
.carte-postale .tirage-postale-verso .credit {
  font-weight: var(--fw-light); font-size: 0.95rem;
  letter-spacing: 0.03em;
  margin-top: 0.4rem;   /* trait citation↔source retiré · M096 */
  font-style: italic;
}
/* trait de séparation entre deux citations au verso (sources distinctes) · M095 */
.carte-postale .tirage-postale-verso .sep-verso {
  border: none; height: 1px; margin: 1.1rem 0 0.3rem;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gris-soutenu) 55%, transparent), transparent);
}

.carte-postale .titre-photo { padding: 1.4rem 1rem 1.6rem; text-align: center; }
.carte-postale .titre-photo h2 {
  font-family: var(--font);
  font-weight: var(--fw-bold); line-height: 1.25;
  color: var(--or-fonce); letter-spacing: var(--ls-tight);
  margin-bottom: 0.4rem;
  font-size: 1.55rem;
}
.carte-postale .titre-photo h2 .arenes {
  display: block;
  font-size: 0.75em;
  font-weight: var(--fw-medium);
  color: var(--gris-soutenu);
  margin-top: 0.1em;
}
.carte-postale .titre-photo .annee {
  display: inline-block;
  font-weight: var(--fw-monumental); font-size: 1.15rem;
  color: var(--noir);
  letter-spacing: 0.12em;
  margin-top: 0.2rem;
}
/* crédit photo · tout petit · sous l'année (M041) */
.carte-postale .titre-photo .credit-photo {
  display: block;
  font-size: 0.6rem; font-weight: var(--fw-medium);
  color: var(--gris-soutenu); letter-spacing: 0.04em;
  margin-top: 0.45rem; opacity: 0.85;
}
/* emphase noire (au lieu de l'or) · ex : « chaque premier dimanche de mars » (M041) */
.carte-postale .body-court .en-noir { color: var(--noir); }   /* strong + span · M064 (broadened depuis strong.en-noir) */
/* #historique · légende prénoms entiers réduits · gouttière texte/image resserrée (M041) */
#historique { column-gap: 2.4rem; }
#historique .titre-photo h2 .arenes { font-size: 0.68em; }
/* dos de carte · interlignage resserré (M041) → promu en global .carte-postale · M043 */

.carte-postale .verso-cue-carte {
  align-self: center;
  width: 100%; max-width: 440px;
  display: flex; justify-content: flex-end; align-items: center; gap: 0.35rem;
  margin: 0.5rem auto 0; padding: 0 14px 0 0;   /* aligné bord photo · M085 */
  background: none; box-shadow: none; clip-path: none;
  border: none;
  color: var(--gris-soutenu);
  font-family: var(--font);
  font-weight: var(--fw-light); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.85;
}
.carte-postale .verso-cue-carte .fleche-page {
  font-family: var(--font);
  font-size: 0.85rem; font-weight: 400;
  color: var(--gris-soutenu); letter-spacing: 0;
}
.carte-postale .tirage-postale-flip:hover ~ .verso-cue-carte,
.carte-postale .tirage-postale-flip:focus-within ~ .verso-cue-carte {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

/* ═══ LAPIDAIRE · BAS-GAUCHE · gris pâle ═══ */
.carte-postale .coin-svg-mirror-bl {
  position: absolute;
  bottom: 0; left: 0;
  width: var(--lap-size); height: var(--lap-size);
  transform: scaleY(-1);
  opacity: 0.45;
  pointer-events: none; overflow: visible;
  z-index: 1;
}
@media (max-width: 820px) {
  .carte-postale .coin-svg-mirror-bl { width: 110px; height: 110px; }
}

/* ═══ LAPIDAIRE · HAUT-DROIT · gris pâle ═══ */
.carte-postale .coin-svg-mirror {
  position: absolute;
  top: 0; right: 0;
  width: var(--lap-size); height: var(--lap-size);
  transform: scaleX(-1);
  opacity: 0.45;
  pointer-events: none; overflow: visible;
  z-index: 1;
}
@media (max-width: 820px) {
  .carte-postale .coin-svg-mirror { width: 110px; height: 110px; }
}

/* Traits angle · top-right OR · bottom gris dégradé */
.carte-postale .cadre-trait {
  position: absolute;
  background: var(--gris-soutenu);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.carte-postale .cadre-tr-h { top: 0; right: 0; width: 33%; height: 1px; opacity: 1; background: linear-gradient(to left, var(--border), transparent); }
.carte-postale .cadre-tr-v { top: 0; right: 0; width: 1px; height: 15%; background: var(--border); }
.carte-postale .cadre-bl-h { bottom: 0; left: 0; width: 100%; height: 1px; opacity: 1; background: linear-gradient(to right, var(--border), transparent); }
.carte-postale .cadre-bl-v { bottom: 0; left: 0; width: 1px; height: 15%; background: var(--border); }

/* FRISE-COMPTEUR retirée · M082 (compteur enlevé de #bicentenaire) · M083 cleanup */

/* ══════════════════════════════════════════════════════════════════════════
   WIP · COMPOSANTS MAIN · #exposants CTA + citation presse
   ══════════════════════════════════════════════════════════════════════════ */
/* CTA réservation stand · fond noir · texte or */
/* CTA carte · harmonisé sur le CTA hero (.hero-l02) comme référence · M067 */
.btn-cta {
  display: inline-block;
  background: var(--noir); color: var(--or);
  font-family: var(--font); font-weight: var(--fw-medium);   /* était --fw-bold */
  font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase;   /* aligné hero */
  padding: 12px 28px 14px; text-decoration: none;   /* cadre réduit · M091 (était 18/32/24 hero) */
  transition: opacity .2s;
  margin-top: 1.5rem;
}
@media (max-width: 820px) {
  .btn-cta { padding: 10px 18px 12px; font-size: 1rem; letter-spacing: .1em; }   /* mobile · cadre réduit · M091 */
}
.btn-cta:hover { opacity: .85; color: var(--or); }
/* <a>.btn-cta dans .carte-postale : .carte-postale a le passait en --olive-link/--or-foncé · on force l'or vif --or, comme le CTA bouton #bicentenaire · M052 */
.carte-postale a.btn-cta,
.carte-postale a.btn-cta:hover { color: var(--or); text-decoration: none; }   /* pas de soulignage · harmonisation CTA · M073 */

/* Δ arbitrage C · --or-clair éliminé · citation presse → gris-soutenu */
.citation-presse cite { color: var(--gris-soutenu); }

/* #bicentenaire verso = photo (portrait Niépce) · cadre comme recto · M041 */
#bicentenaire .tirage-postale-verso {
  background: var(--papier-baryte);
  padding: 14px 14px 0;
}
#bicentenaire .tirage-postale-verso::before { content: none; }
#bicentenaire .tirage-postale-verso img {
  display: block; width: 100%; height: auto;
  filter: var(--filtre-doux);
}

/* #exposants · grille 2 colonnes standard (carte-image Lizars/Scénographe ajoutée M040) */

/* ─── FOOTER ─── */
/* ─── Footer · XL en bandeau de tête (M068 P1) · big footer M069 P2 ─── */
.site-footer {
  margin-top: 4rem;
  background: var(--bg-header);   /* même gris que le header · M079 */
}
/* slogan XL · haut du footer · grand desktop / réduit mobile · M090 (ex #infos M080) */
.slogan-xl {
  margin: 0;
  padding: 1.7rem 2rem 0.7rem;
  text-align: center;
  font-family: var(--font); font-weight: var(--fw-medium); font-size: 1.15rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--or-fonce);
  line-height: 1.4;
}
.footer-bas {
  margin: 0; padding: 1.8rem 2rem;
  text-align: center;
  font-family: var(--font); font-weight: var(--fw-light); font-size: .88rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris-soutenu);
}
.footer-bas a { color: var(--gris-soutenu); text-decoration: underline; text-decoration-thickness: 1px; }
.footer-bas a:hover { color: var(--or-fonce); }
/* ─── Big footer · colonnes plan/contact/crédits · M069 P2 · mobile-first ─── */
.footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem 1rem;
}
.footer-col { display: flex; flex-direction: column; gap: .35rem; }
.footer-col .footer-titre {
  font-family: var(--font); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--or-fonce); font-size: .8rem; margin: 0 0 .5rem;   /* titre colonne or-foncé · M080 */
}
.footer-col a { color: var(--noir); text-decoration: none; font-size: .98rem; }   /* texte noir sur fond gris · M075 */
.footer-col a:hover { color: var(--or-fonce); text-decoration: underline; }
.footer-col p { margin: 0; color: var(--noir); font-size: .9rem; line-height: 1.4; }   /* texte crédits noir · M074 (était gris-soutenu) */
@media (max-width: 700px) {
  .footer-cols { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 1.5rem 1rem; text-align: center; }
  .footer-col { align-items: center; }
}
/* Cloud SEO · mots-clés déplacés des cartes → bas du footer · M089 */
.footer-seo {
  max-width: 1200px; margin: 0 auto; padding: 1.2rem 2rem 0.5rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  font-family: var(--font); font-size: 0.68rem; font-weight: var(--fw-light);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--or-fonce); line-height: 1.7;
}
.footer-seo span:not(:last-child)::after { content: "·"; margin: 0 0.55rem; opacity: 0.55; }

/* Logos partenaires · #cyclope · M092 */
.logos-partenaires {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 1.2rem; margin-top: 1.5rem; padding-right: 0.5rem;
}
.logos-partenaires img {
  width: 70px; height: 70px; object-fit: contain;
  opacity: 0.85; transition: opacity 0.2s;
}
.logos-partenaires img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .logos-partenaires img { transition: none; }
}
@media (max-width: 720px) {
  .logos-partenaires { justify-content: center; gap: 0.8rem; margin-top: 1rem; }
  .logos-partenaires img { width: 56px; height: 56px; }
}
/* verso = logo · #historique (CND M094) + #cyclope (logo Cyclope M098) · remplace texte/texture */
#historique .tirage-postale-verso,
#cyclope .tirage-postale-verso {
  background: var(--papier-baryte);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
#historique .tirage-postale-verso::before,
#cyclope .tirage-postale-verso::before { content: none; }
#historique .tirage-postale-verso img,
#cyclope .tirage-postale-verso img {
  width: auto; max-width: 62%; max-height: 85%; object-fit: contain; filter: none;
}

/* ─── #contact · formulaire maison · a11y vieux-yeux · M070 P3 ─── */
.form-contact { grid-column: 1 / -1; max-width: 42rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot · caché à l'humain · M126 : global (contact + newsletter) */
.form-champ { display: flex; flex-direction: column; margin-bottom: 1.3rem; }
.form-champ label {
  font-family: var(--font); font-weight: var(--fw-bold);
  font-size: 1.15rem; color: var(--noir); margin-bottom: .45rem;   /* vieux-yeux ≥ 18px */
}
.form-champ input, .form-champ textarea {
  font-family: var(--font); font-size: 1.1rem; color: var(--noir);
  padding: .7rem .9rem; background: var(--creme-lumiere);
  border: 1px solid var(--border); border-radius: 2px;
}
.form-champ input:focus-visible, .form-champ textarea:focus-visible {
  outline: 2px solid var(--or); outline-offset: 1px; border-color: var(--or);
}
.form-champ textarea { resize: vertical; min-height: 8rem; }
.form-etat { min-height: 1.4rem; margin: 0 0 1.1rem; font-weight: var(--fw-bold); }
.form-etat.ok  { color: var(--or-fonce); }
.form-etat.err { color: var(--rouge-nimes); }   /* signal fonctionnel · texte (pas nappe) · à valider diogène */

/* ─── Page mentions légales · M071 P4 ─── */
.page-legal { max-width: 46rem; margin: 2.5rem auto 4rem; padding: 0 1.5rem; }
.page-legal h1 { margin: 0 0 2rem; }
.page-legal h2 {
  font-family: var(--font); font-weight: var(--fw-bold);
  color: var(--or-fonce); font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .05em;
  margin: 2.2rem 0 .6rem;
}
.page-legal p { color: var(--noir); line-height: var(--lh-corps); margin: 0 0 .8rem; }
.page-legal a { color: var(--olive-link); text-decoration: underline; text-decoration-thickness: 1px; }
.page-legal a:hover { color: var(--or-fonce); }
.page-legal .fierte { font-weight: var(--fw-bold); color: var(--or-fonce); font-size: 1.15rem; }
.page-legal .slot-attente { font-style: italic; color: var(--gris-soutenu); }
.page-legal .retour-bas { margin-top: 2.5rem; }
.lien-retour { font-family: var(--font); font-size: .9rem; color: var(--gris-soutenu); text-decoration: none; }
.lien-retour:hover { color: var(--or-fonce); }

/* accessibilité · titre lecteur-d'écran (H1 unique de page) · M072 P5 */
.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;
}

/* ══════════════════════════════════════════════════════════════════════════
   WIP · RESPONSIVE · header/hero · V13
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablette / desktop étroit · burger + nav dropdown */
@media (max-width: 960px) {

  :root { scroll-padding-top: 56px; }

  .site-nav {
    display: none;
    position: absolute; top: 100%; right: 0; left: auto;
    width: 100%;
    background: var(--bg-header);
    backdrop-filter: blur(14px);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 0; z-index: 99;
  }
  .site-nav::before {
    content: ''; display: block; height: 1px;
    background: linear-gradient(to left, var(--or), transparent);
    flex-shrink: 0;
  }
  .site-nav.open { display: flex; text-align: left; padding-left: 50%; }   /* items au centre, alignés gauche · M101 D1 */
  .site-nav a { padding: .75rem 1rem; font-weight: var(--fw-monumental); }
  /* Δ nav hover · color or-fonce (aussi dans @media 960px) */
  .site-nav a:hover { color: var(--or-fonce); }
  .site-nav a::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to left, var(--or), transparent);
  }
  .site-nav a:last-child::after { display: none; }

  .btn-burger { display: flex; align-items: center; justify-content: center; margin-right: 30px; }
  .btn-burger[aria-expanded=true] .burger-l1 { transform: translate(3px, 4px) rotate(45deg); transform-origin: 12px 4px; }
  .btn-burger[aria-expanded=true] .burger-l2 { opacity: 0; }
  .btn-burger[aria-expanded=true] .burger-l3 { transform: translate(3px, -4px) rotate(-45deg); transform-origin: 12px 20px; }
  .btn-burger .burger-l1, .btn-burger .burger-l2, .btn-burger .burger-l3 { transition: transform .2s, opacity .2s; }

  .header-inner { padding: .9rem 1rem .5rem; position: relative; }
  .wordmark { font-size: 1.05rem; letter-spacing: .02em; }
  .header-lang { right: 4px; top: 4px; gap: 1px; }
  .btn-lang { font-size: .72rem; width: 20px; height: 20px; }
  .btn-theme-toggle svg { width: 14px; height: 14px; }

  .carte-hero { margin: 15px auto 0; }
  .carte-hero.var-800 { padding: 15px 12px; }

  .slogan-xl { font-size: .72rem; letter-spacing: .03em; padding: 1.1rem 1rem 0.5rem; }   /* mobile réduit · M090 */

  .hero-photo-frame { width: 100%; }

  .var-800 .titre-hero { bottom: 40px; left: -12px; right: -12px; }
  .hero-l01 { padding: 7px 10px 7px 14px; font-size: 1.9rem; margin-top: .2rem; }
  .var-800 .titre-l2 { font-size: 5.5rem; margin-left: 12px; }
  .var-800 .titre-l1 { font-size: 2rem; white-space: normal; margin-left: 12px; text-align-last: justify; }
  .titre-l2 .titre-sup { font-size: .28em; }

  .hero-l02 { padding: 13px 20px 17px; font-size: 1rem; letter-spacing: .1em; }

  .hero-texte-citation { margin-top: 54px; }
  .hero-citation blockquote { font-size: .75rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
  .hero-citation cite { font-size: .95rem; margin-top: .15rem; }

  .hero-texte-presentation { font-size: 1.25rem; line-height: 1.4; }
  .tp-up { font-size: .88em; }
}

/* Mobile compact */
@media (max-width: 820px) {
  .var-800 .titre-hero { bottom: 4px; }                     /* bloc titre abaissé · bandeau date au bas photo, juste au-dessus du CTA · empilement 40/salon/date conservé */
  .hero-l01 { font-size: 1.7rem; }
  .var-800 .titre-l2 { font-size: 5rem; }
  .var-800 .titre-l1 { font-size: 1.8rem; }
}

/* Mobile portrait resserré · M113 · titre + date AU-DESSUS de la photo (zéro superposition · petit mobile) */
@media (max-width: 480px) {
  /* photo-frame en colonne → titre / photo / CTA empilables et ordonnables */
  .var-800 .hero-photo-frame { display: flex; flex-direction: column; }

  /* titre + date : sortis de la photo, posés sur le crème, au-dessus · bandeau date COLLÉ à la photo (margin-bottom 0) */
  .var-800 .titre-hero {
    position: static; order: -1;                            /* AU-DESSUS de l'image */
    left: auto; right: auto; bottom: auto;
    align-items: flex-start; margin: 0;                     /* M114 · date collée au bord haut photo */
  }
  .var-800 .titre-l2 { font-size: 3.4rem; margin-left: 0; }               /* « 40ème » · moins contraint par la photo */
  .var-800 .titre-l1 { font-size: 1.7rem; margin-left: 0; letter-spacing: -.02em; white-space: normal; text-align-last: left; }  /* « Salon Photo-Ciné de Nîmes » · M114 -.02em → tient 1 ligne (Firefox mobile) */
  .var-800 .titre-l1, .var-800 .titre-l2 { text-shadow: none; }           /* halo inutile sur crème */

  /* bandeau date : accent or, PLEINE LARGEUR ÉCRAN (sort du padding 12px carte), collé au bord haut photo */
  .var-800 .titre-hero .hero-l01 {
    font-size: 1.35rem; box-sizing: border-box;            /* M114 · date agrandie 1 → 1.35rem */
    width: calc(100% + 24px); margin: .6rem -12px 0;       /* M115 · full-width écran · M116 air au-dessus date (.2→.6rem) */
    padding: 5px 25px 5px 14px; justify-content: flex-start;
    background: linear-gradient(to right, var(--or) 0%, var(--or) 62%, transparent 100%);
  }

  /* CTA : sous la photo, PLEINE LARGEUR ÉCRAN, collé au bord bas */
  .var-800 .hero-l02 {
    position: static; order: 1; box-sizing: border-box;
    width: calc(100% + 24px); margin: 0 -12px;             /* M115 · full-width écran · collé bord bas photo */
    font-size: 1rem; padding: 10px 18px 12px;
  }

  /* CTA en flux (≤480) → plus besoin des 54px qui dégageaient l'ancien CTA absolu · M116 rapproche le texte */
  .hero-texte-citation { margin-top: 1.2rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ · prefers-reduced-motion · fondu au lieu de rotate 3D
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .carte-postale .tirage-postale-inner,
  .carte-postale .tirage-postale-face {
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  .carte-postale .tirage-postale-recto,
  .carte-postale .tirage-postale-verso { transform: none; }
  .hero-l02 { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIGILANCES · WIP 2026-07-10
   - or-true = NOM EN LANGAGE NATUREL seulement · PAS un token CSS · convention Nanodot
   - --or-daguerreotype conservé pour traçabilité historique · remplacé en usage par --or
   - dark mode HORS SCOPE WIP · [data-theme=dark] = V4 intact + --bg-header seul ajouté
   - text-box/text-box-trim : progressive enhancement · FF133+ / Safari16.4+
     fallback = espacement natif navigateur (dégradation acceptable)
   - grep #[0-9A-Fa-f]{3,8} sur ce fichier → SEUL :root et [data-theme=dark]
     doivent renvoyer des hex (critère NBB 0 hex hors tokens)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   M040 · 2026-07-13 · patches IMG-STRUCTURE
   ══════════════════════════════════════════════════════════════════════════ */

/* Titre de section — aligné GAUCHE explicite */
.carte-postale .titre-section { text-align: left; }

/* #cyclope — couleur (grayscale OFF · exception documentée registre assets) */
#cyclope .tirage-postale-recto img,
#exposants .tirage-postale-recto img,
#exposants .tirage-postale-verso img { filter: var(--filtre-doux); }

/* #cyclope verso = logo Cyclope · voir règle verso-logo #historique/#cyclope · M098 (ex-M044 appareil) */

/* #programme recto = flyer chambre Adams (couleur · filtre adoucissant, pas le N&B générique) · M045 */
#programme .tirage-postale-recto img { filter: var(--filtre-doux); }

/* #programme — vignette intervenant (Goutte minutero · petite taille) */
.mini-intervenant { max-width: 150px; margin: 1.1rem 0 0.4rem; }
.mini-intervenant img { width: 100%; height: auto; display: block; filter: var(--filtre-nb); border-radius: 2px; }
.mini-intervenant figcaption { font-size: 0.72rem; line-height: 1.3; margin-top: 0.35rem; opacity: 0.75; }

/* ─── MODAL · <dialog> · récit « se mérite » (un seul sur le site : bicentenaire) · M041 ─── */
.spn-modal {
  width: min(680px, 92vw); max-height: 86vh;
  padding: 0; border: none; border-radius: 3px;
  background: var(--papier-baryte); color: var(--noir);
  box-shadow: 0 24px 64px rgba(17, 17, 16, 0.45);
  overflow: hidden;
}
.spn-modal::backdrop { background: rgba(17, 17, 16, 0.72); }
.spn-modal .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.7rem; border-bottom: 1px solid var(--gris-clair-pierre);
}
.spn-modal .modal-header h3 { margin: 0; font-weight: var(--fw-bold); color: var(--or-fonce); font-size: 1.35rem; }
.spn-modal .modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.9rem; line-height: 1; padding: 0 0.3rem; color: var(--gris-soutenu);
}
.spn-modal .modal-close:hover { color: var(--rouge-nimes); }
.spn-modal .modal-body { padding: 1.4rem 1.7rem 2rem; overflow-y: auto; max-height: calc(86vh - 5rem); }
.spn-modal .modal-body h4 { margin: 1.5rem 0 0.5rem; color: var(--or-fonce); font-weight: var(--fw-bold); }
.spn-modal .modal-body h4:first-child { margin-top: 0; }
.spn-modal .modal-body p { margin: 0 0 0.9rem; line-height: 1.6; }
/* citation verbatim dans le modal · trait vertical gauche (style ancien site, en --or) */
.spn-modal .modal-quote {
  margin: 1.2rem 0; padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid var(--or);
  font-style: italic;
}
.spn-modal .modal-quote p { margin: 0 0 0.5rem; line-height: 1.55; }
.spn-modal .modal-quote cite {
  display: block; font-style: normal;
  font-size: 0.78rem; font-weight: var(--fw-bold); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gris-soutenu);
}
/* portrait incrusté dans §1 · flotte à droite, le texte l'enveloppe (M041) */
.spn-modal .modal-figure { float: right; max-width: 148px; margin: 0.2rem 0 0.6rem 1.4rem; text-align: center; }
.spn-modal .modal-figure img { width: 100%; height: auto; display: block; filter: var(--filtre-nb); border-radius: 2px; }
.spn-modal .modal-figure figcaption { margin-top: 0.4rem; font-size: 0.7rem; font-style: italic; color: var(--gris-soutenu); }

/* ─── LIGHTBOX PHOTOS · bouton expand sous le tirage + modal image · M084 ─── */
.tirage-avec-badge .btn-lightbox {
  display: block;
  margin: 0.2rem auto 0;
  background: none; border: none;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  color: var(--gris-soutenu);
  transition: color 0.2s;
}
.tirage-avec-badge .btn-lightbox:hover,
.tirage-avec-badge .btn-lightbox:focus-visible { color: var(--or-fonce); }
.tirage-avec-badge .btn-lightbox:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.tirage-avec-badge .btn-lightbox svg {
  display: block; width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* modal lightbox · image agrandie + légende sobre */
.spn-lightbox { width: auto; max-width: 90vw; max-height: 90vh; }
.spn-lightbox .lightbox-body { padding: 1.4rem; }
.spn-lightbox .lightbox-img {
  display: block; max-width: 100%; max-height: 72vh;
  margin: 0 auto; object-fit: contain; filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .tirage-avec-badge .btn-lightbox { transition: none; }
}
/* chaque titre + citation repart sous le portrait flottant */
.spn-modal .modal-body h4 { clear: both; }
.spn-modal .modal-quote { clear: both; }

/* ─── CHIPS SEO · ligne sobre --or en bas de section · M041 ─── */
.carte-postale .data-tags {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: space-between;
  margin-top: 0;   /* chips collés · air retiré · M085 */
}
.carte-postale .data-tag {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris-soutenu);   /* gris comme les titres · M063 (était --or) */
  font-weight: var(--fw-light);   /* corps plus fin · M063 */
  padding: 0; white-space: nowrap;   /* padding 0 · séparation par le gap du conteneur */
}
/* #infos · ligne clé date/horaires/tarif · un peu plus grande + grasse · M058 */
#infos-pratiques .horaire-cle {
  font-size: 1.4rem; font-weight: var(--fw-bold);
  color: var(--noir); margin: 0 0 1rem;
}

/* ─── #programme · temps forts · animations en liste · M041 ─── */
.carte-postale .temps-forts { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.carte-postale .temps-forts li {
  margin-bottom: 0.9rem; line-height: 1.5; color: var(--noir);
}
.carte-postale .temps-forts strong { color: var(--or-fonce); font-weight: var(--fw-bold); }
.carte-postale .temps-forts .reseaux { display: block; font-size: 0.85rem; color: var(--gris-soutenu); margin-top: 0.15rem; }
/* déclencheur de modal inline · style lien (M041) */
.lien-modal {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--olive-link); text-decoration: underline; text-decoration-thickness: 1px;
}
.lien-modal:hover { color: var(--or-fonce); }
.spn-modal .modal-liens { font-size: 0.9rem; color: var(--gris-soutenu); margin-top: 0.3rem; }

/* ─── #exposants · encadré « ce que vous trouvez ici » · M041 ─── */
.carte-postale .encadre-expo {
  margin: 1.4rem 0; padding: 1.1rem 1.3rem;
  background: color-mix(in srgb, var(--or) 7%, var(--creme));
  border-left: 3px solid var(--or); border-radius: 2px;
}
.carte-postale .encadre-expo p { margin: 0 0 0.6rem; color: var(--noir); }
.carte-postale .encadre-titre { font-weight: var(--fw-bold); color: var(--or-fonce); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }
.carte-postale .expo-services { list-style: none; margin: 0.2rem 0 0.6rem; padding: 0; display: block; }
.carte-postale .expo-services li { margin-bottom: 0.15rem; }   /* une ligne par item · M099 */
.carte-postale .expo-services li { position: relative; padding-left: 0.9rem; color: var(--noir); }
.carte-postale .expo-services li::before { content: '·'; position: absolute; left: 0; color: var(--or); font-weight: 700; }
.carte-postale .encadre-note { font-size: 0.9rem; font-style: italic; color: var(--gris-soutenu); margin-bottom: 0; }

/* ─── FIN charte_spn_wip.css WIP 2026-07-10 ─── */

/* ═══════ LOT COSMÉTIQUE · M101 ═══════ */
/* B1 · flip explicite au tap (mobile) · focus-within neutralisé, .flipped pilote · desktop hover intact */
@media (hover: none) and (pointer: coarse) {
  .carte-postale .tirage-postale-flip:focus-within .tirage-postale-recto { opacity: 1; visibility: visible; }
  .carte-postale .tirage-postale-flip:focus-within .tirage-postale-verso { opacity: 0; visibility: hidden; }
  .carte-postale .tirage-postale-flip:focus-within .tirage-postale-inner { transform: none; }
  .carte-postale .tirage-postale-flip.flipped .tirage-postale-recto { opacity: 0; visibility: hidden; }
  .carte-postale .tirage-postale-flip.flipped .tirage-postale-verso { opacity: 1; visibility: visible; }
  .carte-postale .tirage-postale-flip.flipped .tirage-postale-inner { transform: rotateY(180deg); }
}
/* C2 · lightbox mobile · image plein cadre, sans fond blanc, centrée vertical (M102) */
@media (max-width: 720px) {
  .spn-lightbox[open] {                 /* [open] : ne jamais forcer l'affichage du dialog fermé */
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    margin: 0; padding: 1rem; border-radius: 0;
    background: transparent; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
  }
  .spn-lightbox .lightbox-body {
    padding: 0; max-height: none; overflow: visible; width: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  .spn-lightbox .lightbox-img { width: 100%; height: auto; max-width: 100%; max-height: 92vh; object-fit: contain; margin: 0; }
}
/* C3 · lightbox #bicentenaire · recto + verso simultanés */
.lightbox-bicentenaire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 95vw; padding: 1.4rem; }
.lightbox-bicentenaire-grid img { width: 100%; height: auto; object-fit: contain; max-height: 80vh; filter: none; }
@media (max-width: 720px) {
  .spn-lightbox .lightbox-bicentenaire-grid {
    grid-template-columns: 1fr; gap: 0.6rem; width: 100%; max-width: 100vw;
    padding: 0; max-height: none; overflow: visible; align-content: center;
  }
  .spn-lightbox .lightbox-bicentenaire-grid img { width: 100%; max-height: 47vh; }
}
/* E1 · hero mobile · 1 colonne */
@media (max-width: 820px) {
  .hero-texte-presentation-wrap { grid-template-columns: 1fr; }
  .hero-texte-presentation { grid-column: 1; padding: 0 1rem; }
}
/* F1 · case anti-spam « je ne suis pas un robot » */
.checkbox-humain { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; font-size: 0.95rem; color: var(--gris-soutenu); }
.checkbox-humain input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--or-fonce); }
/* C3 · close lightbox · overlay coin haut-droit, contraste noir/crème sur photo (M101) */
.spn-lightbox .modal-header { display: contents; }
.spn-lightbox .modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--creme); color: var(--noir); font-size: 1.6rem;
  box-shadow: 0 2px 8px rgba(17, 17, 16, 0.35);
}
.spn-lightbox .modal-close:hover { color: var(--rouge-nimes); }

/* ══════════════════════════════════════════════════════════════════════════
   NEWSLETTER · CTA + modal + footer · M126
   ══════════════════════════════════════════════════════════════════════════ */
/* CTA « Recevoir la lettre » · inline, PAS pleine largeur */
.btn-news {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font); font-weight: var(--fw-medium); font-size: .92rem;   /* M128 · medium, plus fin */
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--noir); background: var(--or-fonce);                              /* M128 · bg or-foncé · txt medium black */
  border: none; padding: 13px 30px; cursor: pointer;
  transition: background .25s, color .25s;
}
/* hover class · inversion : fond noir, texte or */
.btn-news:hover, .btn-news:focus-visible { background: var(--noir); color: var(--or); }
.hero-news-cta { margin: 1.3rem 0 0; text-align: center; }

/* Form d'inscription (modal) */
.form-news .form-champ { margin-bottom: 1rem; }
.form-news .form-champ label { display: block; margin-bottom: .35rem; font-weight: var(--fw-bold); font-size: .9rem; }
.form-news input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font: inherit;
  border: 1px solid var(--border); background: var(--papier-baryte); color: var(--noir);
}
.form-news input[type="email"]:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.form-rgpd { font-size: .8rem; color: var(--gris-soutenu); margin: .8rem 0 0; }
.form-rgpd a { color: var(--gris-soutenu); text-decoration: underline; }

/* Newsletter footer · form permanent inline (email + bouton) */
.footer-news { max-width: 540px; margin: 0 auto 2.2rem; text-align: center; }
.footer-news .footer-titre { margin-bottom: .7rem; }
.form-news-footer { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.form-news-footer input[type="email"] { flex: 1 1 240px; width: auto; }
.form-news-footer .btn-cta { flex: 0 0 auto; }
.footer-news .form-rgpd { text-align: center; }