/* ══════════════════════════════════════════════════════════════════════════
   Maël Fabre Photographie — feuille de style du SITE PUBLIC (DA 2026-09-10).

   Direction : « papier & encre », éditoriale. Fond papier chaud, encre
   profonde, un seul accent rouille (celui du favicon). Titres en serif à
   fort contraste, texte en grotesque sobre. Images à angles vifs, filets
   fins, mise en page asymétrique sur 12 colonnes. Aucun dégradé, aucune
   ombre portée décorative, aucune icône « pastille ».

   Mobile d'abord : les règles de base visent le téléphone, les points de
   rupture (min-width) ajoutent le bureau. Champs à 16 px minimum (Safari
   iOS zoome en dessous), cibles tactiles à 44 px, dvh + safe-area.

   Ce fichier est autonome : l'admin garde organic.css + app.css + admin.css.
   Les jetons `--color-*` sont conservés en compatibilité car des gabarits
   secondaires (commande, compte, légal…) les référencent en style en ligne.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:   #f3efe7;
  --paper-2: #e9e3d8;
  --paper-3: #dcd4c6;
  --ink:     #161410;
  --ink-2:   #2b2823;
  --ink-70:  rgba(22, 20, 16, .72);
  --ink-60:  rgba(22, 20, 16, .6);
  --ink-45:  rgba(22, 20, 16, .45);
  --line:    rgba(22, 20, 16, .14);
  --line-2:  rgba(22, 20, 16, .32);
  --rust:    #a4451f;
  --rust-2:  #7d3316;
  --rust-soft: #eddccf;
  --moss:    #56673f;
  --moss-soft: #dfe4d1;
  --white:   #faf8f3;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1360px;
  --gutter: clamp(18px, 4.5vw, 72px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* — jetons de compatibilité (gabarits secondaires) — */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-2: var(--paper-2);
  --color-text: var(--ink);
  --color-accent: var(--rust);
  --color-accent-2: var(--moss);
  --color-divider: var(--line);

  --color-neutral-100: #faf8f3;
  --color-neutral-200: #e9e3d8;
  --color-neutral-300: #cfc7b9;
  --color-neutral-400: #8f8778;
  --color-neutral-500: #6d665a;
  --color-neutral-600: #4f4a41;
  --color-neutral-700: #3a362f;
  --color-neutral-800: #26231e;
  --color-neutral-900: #161410;

  --color-accent-100: #f4e6dc;
  --color-accent-200: #eddccf;
  --color-accent-300: #dfbba3;
  --color-accent-400: #cc8f6a;
  --color-accent-500: #b8643a;
  --color-accent-600: #a4451f;
  --color-accent-700: #8d3a19;
  --color-accent-800: #6b2b12;
  --color-accent-900: #471c0b;

  --color-accent-2-100: #eaeee0;
  --color-accent-2-200: #dfe4d1;
  --color-accent-2-300: #c3cbaa;
  --color-accent-2-400: #9dab7f;
  --color-accent-2-500: #78895c;
  --color-accent-2-600: #56673f;
  --color-accent-2-700: #465433;
  --color-accent-2-800: #354027;
  --color-accent-2-900: #232b19;

  --font-heading: var(--font-display);
  --font-heading-weight: 400;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 24px 60px rgba(22, 20, 16, .18);
}

/* ═══════════ Base ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55; font-weight: 400;
  overflow-x: clip; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.05; letter-spacing: -.015em; margin: 0 0 .4em;
}
h1 { font-size: 44px; } h2 { font-size: 34px; } h3 { font-size: 26px; } h4 { font-size: 21px; }
h1 em, h2 em, h3 em, .hero-title em, .lead em { font-style: italic; color: var(--rust); }
p { margin: 0 0 14px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong { font-weight: 600; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rust-soft); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.text-muted { color: var(--ink-60); }
.hr { height: 1px; border: 0; margin: 16px 0; background: var(--line); }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: none; }
.stack { display: flex; flex-direction: column; }
.u-link { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.empty-state { padding: 60px 0; color: var(--ink-60); border-top: 1px solid var(--line); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--paper-3); }
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-400); }
a, button, .btn, .chip { -webkit-tap-highlight-color: transparent; }

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  /* Gouttière en !important : des gabarits secondaires posent un padding
     raccourci en ligne (`padding:44px 0 70px`) dont les côtés valent 0. */
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
.page-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.page-main { flex: 1; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 18px; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* — libellés « petites capitales » — */
.section-kicker, .kicker, .eyebrow {
  display: inline-block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rust); font-weight: 600;
}

/* ═══════════ Boutons ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: .02em;
  line-height: 1; color: var(--ink);
  background: transparent; border: 1px solid var(--ink);
  padding: 0 18px; min-height: 44px; border-radius: 2px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { display: block; width: 15px; height: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--rust); border-color: var(--rust); color: var(--paper); }
.btn-secondary { border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost {
  border-color: transparent; padding-inline: 2px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-2);
}
.btn-ghost:hover { text-decoration-color: var(--rust); color: var(--rust); }
.btn-xs { min-height: 32px; padding: 0 10px; font-size: 12px; }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-block { width: 100%; }
@media (hover: none) {
  .btn:active, .chip:active, .event-card:active, .photo-card:active { transform: scale(.985); }
}

/* ═══════════ Formulaires ═══════════ */
.field > label {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 6px; font-weight: 600;
}
.input {
  width: 100%; min-height: 44px; padding: 10px 0; font-size: 16px; /* 16 px : pas de zoom iOS */
  color: var(--ink); caret-color: var(--rust); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .18s ease;
}
.input::placeholder { color: var(--ink-45); }
.input:hover { border-bottom-color: var(--ink); }
.input:focus-visible { outline: none; border-bottom-color: var(--rust); }
textarea.input { min-height: 110px; resize: vertical; }
select.input { padding-right: 20px; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); }
.radio input:checked + .dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); }

/* ═══════════ Cartes, étiquettes, tableaux ═══════════ */
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 3px;
}
.card-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.card-title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; }
.card-body { margin: 0; font-size: 14px; color: var(--ink-70); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-60); }

.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; padding: 5px 9px; border-radius: 2px;
  border: 1px solid var(--line-2); color: var(--ink);
}
.tag-accent { border-color: var(--rust); color: var(--rust); }
.tag-accent-2 { border-color: var(--moss); color: var(--moss); }
.tag-neutral { border-color: var(--line); color: var(--ink-60); }
.tag-outline { border-color: var(--rust); color: var(--rust); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-60); padding: 10px 8px; border-bottom: 1px solid var(--ink);
}
.table td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:hover { background: rgba(22, 20, 16, .03); }

/* ═══════════ Barre de navigation ═══════════ */
.navbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 10px;
  min-height: 62px; padding-top: env(safe-area-inset-top);
}
.brand {
  display: flex; align-items: baseline; gap: 10px; margin-right: auto;
  text-decoration: none; color: inherit; line-height: 1; min-height: 44px; align-items: center;
}
.brand-name { font-family: var(--font-display); font-size: 25px; letter-spacing: -.01em; white-space: nowrap; }
.brand-role { display: none; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-60); }
.nav-links { display: none; align-items: center; gap: 26px; }
.nav-link {
  font-size: 14px; text-decoration: none; color: inherit; padding: 4px 0;
  border-bottom: 1px solid transparent; transition: border-color .18s ease, color .18s ease;
}
.nav-link:hover { border-bottom-color: var(--line-2); }
.nav-link[aria-current="page"] { border-bottom-color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 2px; }
.nav-action, .lang-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px;
  padding: 0 9px; background: none; border: 0; cursor: pointer; text-decoration: none;
  color: inherit; font-size: 14px; border-radius: 2px; position: relative;
}
.nav-action:hover, .lang-toggle:hover { color: var(--rust); }
.nav-action svg { width: 19px; height: 19px; }
.nav-action .lbl { display: none; }
.lang-toggle { font-size: 12px; letter-spacing: .14em; font-weight: 600; }
.hamburger { display: inline-flex; }
.cart-count {
  font-size: 11px; font-weight: 600; color: var(--paper); background: var(--rust);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 5px; right: 2px; transform-origin: center;
}
.cart-count[hidden] { display: none; }

@media (min-width: 560px) { .brand-role { display: inline; } }
@media (min-width: 900px) {
  .nav-inner { min-height: 72px; gap: 28px; }
  .nav-links { display: flex; }
  .hamburger { display: none; }
  .nav-action .lbl { display: inline; }
  .cart-count { position: static; margin-left: 2px; }
}

/* ═══════════ Menu plein écran ═══════════ */
.menu-overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden; animation: fade-in .22s ease;
}
.menu-overlay[hidden] { display: none; }
.menu-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line);
}
.menu-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.menu-link {
  font-family: var(--font-display); font-size: clamp(42px, 11vw, 88px); line-height: 1;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  display: flex; align-items: baseline; gap: 18px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; animation: menu-item-in .5s var(--ease) forwards;
}
.menu-link:first-child { border-top: 1px solid var(--line); }
.menu-link .idx { font-family: var(--font-body); font-size: 11px; letter-spacing: .16em; color: var(--rust); font-weight: 600; }
.menu-link .arw { margin-left: auto; width: .45em; height: .45em; opacity: .35; transition: transform .3s, opacity .3s; }
.menu-link:hover { color: var(--rust); }
.menu-link:hover .arw { opacity: 1; transform: translate(4px, -4px); }
.menu-foot {
  padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  display: flex; flex-direction: column; gap: 18px;
}
.menu-foot-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.menu-contact {
  display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-60);
  border-top: 1px solid var(--line); padding-top: 16px;
}
.menu-contact a { color: inherit; text-decoration: none; }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes menu-item-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes menu-out { from { opacity: 1; } to { opacity: 0; } }
.menu-overlay.closing { animation: menu-out .26s ease forwards; }
.menu-overlay.closing .menu-link { animation: menu-item-out .2s ease forwards !important; }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ═══════════ Panier tiroir ═══════════ */
.cart-portal { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.cart-portal[hidden] { display: none; }
.cart-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer;
  background: rgba(22, 20, 16, .5); animation: fade-in .22s ease;
}
.cart-aside {
  position: relative; width: min(440px, 100%); background: var(--paper); height: 100%;
  display: flex; flex-direction: column; border-left: 1px solid var(--line);
  animation: drawer-in .32s var(--ease);
}
.cart-portal.closing .cart-backdrop { animation: fade-out .26s ease forwards; }
.cart-portal.closing .cart-aside { animation: drawer-out .28s cubic-bezier(.4, 0, 1, 1) forwards; }
.cart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 22px 16px; border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-size: 30px; margin: 0; }
.cart-body { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.cart-body > * { flex: none; }
.cart-item { display: flex; gap: 12px; align-items: center; }
.cart-item figure { margin: 0; width: 52px; height: 62px; overflow: hidden; flex: none; background: var(--paper-2); }
.cart-foot {
  padding: 18px 22px max(18px, calc(env(safe-area-inset-bottom) + 10px));
  border-top: 1px solid var(--ink); background: var(--paper);
}
.cart-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 16px; font-family: var(--font-display); font-size: 26px; }
.cart-total span:last-child { color: var(--rust); }
.cart-empty { flex: 1; display: grid; place-content: center; text-align: center; padding: 40px 24px; gap: 12px; }
@keyframes drawer-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Lots dépliables + animations d'ajout (logique dans app.js). */
.cart-lot { border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.cart-lot > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; cursor: pointer; list-style: none; background: var(--white); font-size: 13px;
}
.cart-lot > summary::-webkit-details-marker { display: none; }
.cart-lot > summary::before { content: '+'; font-weight: 600; font-size: 15px; line-height: 1; color: var(--rust); width: 14px; flex: none; }
.cart-lot[open] > summary::before { content: '−'; }
.cart-lot-label { flex: 1; min-width: 0; }
.cart-lot-price { font-weight: 600; white-space: nowrap; color: var(--rust); }
.cart-lot-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 12px; transition: height .3s ease, opacity .28s ease; }
.cart-lot-ic { color: var(--rust); display: grid; place-items: center; flex: none; }
.cart-lot-ic .icon { width: 17px; height: 17px; }
.cart-item.is-removing {
  opacity: 0; overflow: hidden; pointer-events: none; transform: translateX(14px);
  transition: max-height .24s ease, opacity .2s ease, transform .2s ease, margin .24s ease;
}
.pack-pop { animation: pack-pop .5s cubic-bezier(.22, 1.1, .36, 1) both; }
@keyframes pack-pop { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.01); } 100% { transform: scale(1); opacity: 1; } }
.icon-pop { animation: icon-pop .42s cubic-bezier(.22, 1.4, .36, 1) both; }
@keyframes icon-pop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.cart-bump { animation: cart-bump .45s cubic-bezier(.22, 1.3, .36, 1); }
@keyframes cart-bump { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.14); } 65% { transform: scale(.96); } }
.cart-count.count-in   { animation: count-in .5s cubic-bezier(.34, 1.55, .5, 1) both; }
.cart-count.count-pop  { animation: count-pop .42s cubic-bezier(.34, 1.5, .5, 1) both; }
.cart-count.count-down { animation: count-down .4s ease both; }
.cart-count.count-out  { animation: count-out .34s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes count-in  { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.28); opacity: 1; } 100% { transform: scale(1); } }
@keyframes count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes count-down{ 0% { transform: scale(1); } 45% { transform: scale(.72); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
@keyframes count-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
[data-cart-open].cart-receive  { animation: cart-receive .55s cubic-bezier(.34, 1.56, .5, 1); }
[data-cart-open].cart-farewell { animation: cart-farewell .5s cubic-bezier(.34, 1.56, .5, 1); }
@keyframes cart-receive  { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 60% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes cart-farewell { 0% { transform: scale(1); } 35% { transform: scale(.86); } 68% { transform: scale(1.03); } 100% { transform: scale(1); } }
.pack-gather .cart-item { animation: pack-gather-in .42s var(--ease) both; }
@keyframes pack-gather-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
.pack-gather .cart-item:nth-child(1) { animation-delay: .03s; }
.pack-gather .cart-item:nth-child(2) { animation-delay: .08s; }
.pack-gather .cart-item:nth-child(3) { animation-delay: .13s; }
.pack-gather .cart-item:nth-child(4) { animation-delay: .18s; }
.pack-gather .cart-item:nth-child(5) { animation-delay: .23s; }
.pack-gather .cart-item:nth-child(6) { animation-delay: .28s; }
.pack-gather .cart-item:nth-child(7) { animation-delay: .33s; }
.pack-gather .cart-item:nth-child(8) { animation-delay: .38s; }
.pack-gather .cart-item:nth-child(9) { animation-delay: .43s; }
.pack-gather .cart-item:nth-child(10) { animation-delay: .48s; }

/* ═══════════ Apparition au défilement (IntersectionObserver, app.js) ═══════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s var(--ease); }
  .reveal.is-revealed { opacity: 1; transform: none; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* ═══════════ Blocs communs de page ═══════════ */
.page-head { padding: 34px 0 26px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.page-head h1 { font-size: clamp(42px, 8vw, 96px); letter-spacing: -.025em; margin: 6px 0 10px; line-height: .98; }
.page-head p { font-size: 16px; color: var(--ink-70); max-width: 52ch; margin: 0; }
.sec { padding: 56px 0 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: 26px; padding-top: 18px; border-top: 1px solid var(--ink); }
.sec-title { font-size: clamp(34px, 6vw, 68px); line-height: .98; letter-spacing: -.02em; margin: 6px 0 0; text-wrap: balance; }
.sec-note { font-size: 15px; color: var(--ink-70); max-width: 42ch; margin: 0; }
.sec-note a { color: var(--ink); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: .02em; min-height: 44px;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--rust); border-color: var(--rust); }
.link-arrow:hover svg { transform: translateX(4px); }
.full-bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }

@media (min-width: 900px) {
  .sec-head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: 40px; }
  .sec-note { justify-self: start; }
  .sec { padding-top: 96px; }
}

/* ═══════════ Accueil — ouverture ═══════════ */
.hero { display: grid; gap: 22px; padding: 0 0 40px; }
.hero-figure { order: -1; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.hero-figure .hero-img { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-caption {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60);
  padding: 10px var(--gutter) 0; border-top: 1px solid var(--line); font-weight: 600;
}
.hero-caption a { color: inherit; text-decoration: none; }
.hero-caption a:hover { color: var(--rust); }
.hero-copy { padding-top: 10px; }
.hero-index {
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-60); font-weight: 600; margin: 0 0 22px; padding: 0; list-style: none;
}
.hero-index li + li::before { content: "—"; margin-right: 14px; color: var(--line-2); }
.hero-title {
  font-size: clamp(50px, 13vw, 132px); line-height: .92; letter-spacing: -.03em;
  margin: 0 0 22px; text-wrap: balance;
}
.hero-sub { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.hero-meta {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-60);
}
.hero-meta b { display: block; font-weight: 600; color: var(--ink); font-size: 13px; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 7fr 5fr; column-gap: clamp(28px, 4vw, 64px); align-items: stretch;
    min-height: min(88dvh, 940px); padding-bottom: 0;
  }
  .hero-figure { order: 0; margin-left: 0; display: flex; flex-direction: column; }
  .hero-figure .hero-img { flex: 1; aspect-ratio: auto; min-height: 520px; }
  .hero-caption { padding: 12px 0 14px; }
  .hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 0 56px; }
  .hero-sub { font-size: 19px; }
}

/* ═══════════ Accueil — sélection (grille asymétrique) ═══════════ */
.sel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
.sel-item { margin: 0; }
.sel-item.is-l { grid-column: 1 / -1; }
.sel-img { display: block; overflow: hidden; background: var(--paper-2); }
.sel-item.is-l .sel-img { aspect-ratio: 3 / 2; }
.sel-item.is-p .sel-img { aspect-ratio: 4 / 5; }
.sel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
a.sel-img:hover img { transform: scale(1.025); }
.sel-cap {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline;
  padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px;
}
.sel-num { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--rust); }
.sel-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.sel-meta { grid-column: 2; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; }

@media (min-width: 900px) {
  .sel { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 72px; align-items: start; }
  .sel-item.is-l, .sel-item.is-p { grid-column: auto; }
  .sel-item:nth-child(1) { grid-column: 1 / 8; }
  .sel-item:nth-child(2) { grid-column: 9 / 13; margin-top: 120px; }
  .sel-item:nth-child(3) { grid-column: 2 / 5; }
  .sel-item:nth-child(4) { grid-column: 6 / 10; margin-top: -40px; }
  .sel-item:nth-child(5) { grid-column: 5 / 13; }
  .sel-item:nth-child(6) { grid-column: 1 / 4; margin-top: 100px; }
  .sel-item:nth-child(7) { grid-column: 9 / 13; }
  .sel-item.is-l:nth-child(4) { grid-column: 5 / 12; }
  .sel-item.is-p:nth-child(5) { grid-column: 8 / 12; }
}

/* Bande « planche-contact » : le reste de la sélection, à faire défiler. */
.strip-wrap { margin-top: 60px; border-top: 1px solid var(--line); padding-top: 18px; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.strip-head .kicker { color: var(--ink-60); }
.strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 var(--gutter) 14px; margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.strip-item { flex: none; height: 200px; scroll-snap-align: start; margin: 0; background: var(--paper-2); }
.strip-item img { height: 100%; width: auto; display: block; }
.strip-item.is-p { aspect-ratio: 4 / 5; }
.strip-item.is-l { aspect-ratio: 3 / 2; }
.strip-item img { width: 100%; object-fit: cover; }
@media (min-width: 900px) { .strip-item { height: 260px; } }

/* ═══════════ Accueil — index des reportages ═══════════ */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.index-row .ix-date { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; grid-column: 1 / -1; }
.index-row .ix-name { font-family: var(--font-display); font-size: 28px; line-height: 1.05; letter-spacing: -.01em; }
.index-row .ix-place { font-size: 14px; color: var(--ink-60); }
.index-row .ix-count { font-size: 13px; color: var(--ink-60); white-space: nowrap; }
.index-row .ix-arrow { display: none; }
.index-row:hover .ix-name { color: var(--rust); }
@media (min-width: 900px) {
  .index-row { grid-template-columns: 120px 1fr 1fr auto 30px; padding: 22px 0; align-items: center; }
  .index-row .ix-date { grid-column: auto; }
  .index-row .ix-name { font-size: 34px; }
  .index-row .ix-arrow { display: block; width: 18px; height: 18px; color: var(--ink-45); transition: transform .3s var(--ease), color .2s; }
  .index-row:hover .ix-arrow { transform: translateX(6px); color: var(--rust); }
}

/* ═══════════ Accueil — présentation ═══════════ */
.about-split { display: grid; gap: 26px; }
.about-fig { margin: 0; max-width: 300px; }
.about-fig .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.about-fig img { width: 100%; height: 100%; object-fit: cover; }
.about-fig figcaption { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; }
.lead { font-family: var(--font-display); font-size: clamp(28px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 22px; text-wrap: balance; }
.about-text p { font-size: 16px; color: var(--ink-70); max-width: 58ch; line-height: 1.6; }
@media (min-width: 900px) {
  .about-split { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .about-fig { grid-column: 1 / 5; max-width: none; }
  .about-text { grid-column: 6 / 13; padding-bottom: 8px; }
}

/* ═══════════ Bande encre : les étapes ═══════════ */
.band-ink { background: var(--ink); color: var(--paper); margin-top: 80px; padding: 56px 0 60px; }
.band-ink .section-kicker, .band-ink .kicker { color: var(--color-accent-400); }
.band-ink .sec-head { border-top-color: rgba(243, 239, 231, .35); margin-bottom: 40px; }
.band-ink .sec-note { color: rgba(243, 239, 231, .7); }
.steps { display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { padding-top: 16px; border-top: 1px solid rgba(243, 239, 231, .25); }
.step-num { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--color-accent-400); display: block; margin-bottom: 10px; }
.step h3 { font-size: 30px; margin: 0 0 8px; color: var(--paper); }
.step p { font-size: 15px; color: rgba(243, 239, 231, .72); margin: 0; max-width: 34ch; line-height: 1.55; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } .band-ink { padding: 80px 0 90px; } }

/* ═══════════ Contact ═══════════ */
.contact { padding: 64px 0 70px; }
.contact h2 { font-size: clamp(40px, 9vw, 110px); line-height: .94; letter-spacing: -.03em; margin: 8px 0 26px; max-width: 14ch; }
.contact-mail {
  display: inline-block; font-family: var(--font-display); font-size: clamp(24px, 4.6vw, 52px);
  line-height: 1.1; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink);
  overflow-wrap: anywhere; transition: color .2s, border-color .2s;
}
.contact-mail:hover { color: var(--rust); border-color: var(--rust); }
.contact-note { font-size: 14px; color: var(--ink-60); margin: 22px 0 0; max-width: 46ch; }
@media (min-width: 900px) {
  .contact { display: grid; grid-template-columns: 7fr 5fr; column-gap: 40px; align-items: end; padding: 100px 0 110px; }
  .contact-note { margin: 0; }
}

/* ═══════════ Pied de page ═══════════ */
.site-footer { border-top: 1px solid var(--ink); font-size: 13px; color: var(--ink-70); }
.footer-grid { display: grid; gap: 22px; padding: 30px 0 26px; }
.footer-brand { font-family: var(--font-display); font-size: 24px; color: var(--ink); display: block; }
.footer-about { margin: 8px 0 0; max-width: 34ch; line-height: 1.55; }
.footer-heading { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; margin: 0 0 10px; font-family: var(--font-body); }
.footer-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.footer-links a, .footer-contact a { color: var(--ink); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }
.footer-links a:hover, .footer-contact a:hover { color: var(--rust); }
.footer-links a.muted { color: var(--ink-45); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding: 14px 0 max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-60);
}
.footer-legal nav { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--rust); }
.footer-legal .vat { flex-basis: 100%; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; padding: 40px 0 34px; } }

/* ═══════════ Galerie (liste des événements) ═══════════ */
.filter-row { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px; text-decoration: none;
  color: var(--ink-60); padding: 10px 0; min-height: 44px; border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s; cursor: pointer; background: none;
}
.chip:hover { color: var(--ink); }
.chip.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.chip.is-soon { opacity: .55; }
.chip-soon-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.chip-sm {
  display: inline-flex; align-items: center; font-size: 13px; text-decoration: none; color: var(--ink-60);
  padding: 8px 0; min-height: 36px; border-bottom: 1px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}
.chip-sm:hover { color: var(--ink); }
.chip-sm.is-active { color: var(--rust); border-bottom-color: var(--rust); font-weight: 500; }

.grid-events { display: grid; grid-template-columns: 1fr; gap: 34px 20px; }
.event-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.event-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; position: relative; background: var(--paper-2); }
.event-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.event-card:hover figure img { transform: scale(1.03); }
.event-card-cat {
  position: absolute; top: 10px; left: 10px; background: var(--paper); color: var(--ink);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 5px 8px;
}
.event-card-body { padding: 12px 0 0; border-top: 1px solid var(--ink); margin-top: 12px; }
.event-card-body h2 { font-size: 28px; margin: 0 0 6px; line-height: 1.05; }
.event-card:hover .event-card-body h2 { color: var(--rust); }
.event-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; flex-wrap: wrap; color: var(--ink-60); }
.event-meta span { display: flex; align-items: center; gap: 5px; }
.event-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.event-card-cta { color: var(--ink); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 5px; letter-spacing: .02em; }
@media (min-width: 640px)  { .grid-events { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-events { grid-template-columns: repeat(3, 1fr); gap: 48px 28px; } }

/* Chargement interne de la galerie (gallery.js). */
.gallery-loader {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 70%, transparent); opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.gallery-loader.is-on { opacity: 1; }
.aperture-spin { width: 40px; height: 40px; color: var(--ink); display: inline-block; animation: aperture-rot 2.4s cubic-bezier(.5, .1, .5, .9) infinite; }
.aperture-spin svg { width: 100%; height: 100%; display: block; }
@keyframes aperture-rot { to { transform: rotate(360deg); } }
.gallery-in { animation: gallery-in .45s var(--ease) both; }
@keyframes gallery-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════ Page d'un événement ═══════════ */
.event-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.event-head h1 { font-size: clamp(40px, 7.5vw, 88px); line-height: .98; letter-spacing: -.025em; margin: 10px 0 10px; }
.event-meta.event-meta--lg { font-size: 14px; gap: 18px; }
.pricing-bar {
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  padding: 14px 0; margin: 0 0 22px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.pricing-bar .note { font-size: 12px; margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ink-60); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }

.grid-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px)  { .grid-photos { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 900px)  { .grid-photos { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (min-width: 1280px) { .grid-photos { grid-template-columns: repeat(5, 1fr); } }
.photo-card { position: relative; overflow: hidden; background: var(--paper-2); }
.photo-card figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; cursor: zoom-in; }
.photo-card figure img { width: 100%; height: 100%; object-fit: cover; }
.photo-card-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.gallery .photo-card-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 8px 8px; gap: 6px;
  background: linear-gradient(to top, rgba(22, 20, 16, .82), rgba(22, 20, 16, .35) 55%, transparent);
  color: #fff; pointer-events: none;
}
.gallery .photo-card-foot button, .gallery .photo-card-foot a, .gallery .photo-card-foot form { pointer-events: auto; }
.gallery .photo-card-foot > span:first-child { color: #fff; font-size: 13px; font-weight: 500; }
.gallery .photo-card-foot .text-muted { color: rgba(255, 255, 255, .82); }
.gallery .photo-card-foot .btn { min-height: 34px; padding: 0 10px; font-size: 12px; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.gallery .photo-card-foot .btn:hover { background: var(--rust); border-color: var(--rust); color: var(--paper); }
.gallery .photo-card-foot .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.gallery .photo-card-foot .tag { color: #fff; border-color: rgba(255, 255, 255, .6); }
.gallery .photo-card-foot .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (hover: hover) {
  .gallery .photo-card-foot { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
  .gallery .photo-card:hover .photo-card-foot, .gallery .photo-card:focus-within .photo-card-foot { opacity: 1; transform: none; }
}
.photo-num {
  position: absolute; top: 8px; left: 8px; background: var(--paper); color: var(--ink);
  font-size: 10px; letter-spacing: .1em; font-weight: 600; padding: 4px 7px;
}
.photo-guard { position: absolute; inset: 0; pointer-events: auto; }
.protected-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.washed { filter: none; opacity: 1; }

/* ═══════════ Visionneuse plein écran ═══════════ */
.viewer[hidden] { display: none; }
.viewer-dl[hidden] { display: none; }
.viewer {
  position: fixed; inset: 0; z-index: 200; display: grid;
  grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; align-items: center; gap: 8px;
  padding: 18px; background: rgba(22, 20, 16, .96); animation: viewer-in .18s ease-out;
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
.viewer-stage { grid-column: 2; grid-row: 1; position: relative; margin: 0; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; }
.viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .18s ease; }
.viewer.is-loading .viewer-stage img { opacity: .35; }
.viewer-stage::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; opacity: 0; pointer-events: none; border: 2px solid rgba(255, 255, 255, .25); border-top-color: rgba(255, 255, 255, .9); }
.viewer.is-loading .viewer-stage::before { opacity: 1; animation: viewer-spin .7s linear infinite; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.viewer-nav, .viewer-close {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .3);
  cursor: pointer; border-radius: 999px; color: #fff; background: transparent; transition: background .15s, border-color .15s;
}
.viewer-nav:hover, .viewer-close:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.viewer-prev { grid-column: 1; grid-row: 1; } .viewer-next { grid-column: 3; grid-row: 1; }
.viewer-close { position: absolute; top: 18px; right: 18px; }
.viewer-bar { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; color: #fff; font-size: 14px; padding-top: 8px; }
.viewer-count { font-weight: 600; letter-spacing: .08em; }
.viewer-caption { opacity: .7; max-width: 46ch; text-align: center; }
.viewer .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 700px) { .viewer { padding: 10px; gap: 4px; } .viewer-nav, .viewer-close { width: 40px; height: 40px; } .viewer-caption { display: none; } }

/* ═══════════ Information cookies ═══════════ */
.cookie-note {
  position: fixed; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 150;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 640px; margin: 0 auto; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--ink); font-size: 13px; box-shadow: var(--shadow-lg);
}
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; flex: 1 1 240px; line-height: 1.5; }

/* ═══════════ Divers (auth, téléchargement, message flottant) ═══════════ */
.or-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.or-sep > span:not(.text-muted) { flex: 1; height: 1px; background: var(--line); }
.or-sep .text-muted { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.google-btn { gap: 10px; min-height: 46px; font-size: 14px; font-weight: 500; }
.google-btn .google-g { flex: none; }

.dl-saving { pointer-events: none; opacity: .72; }
.dl-state { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dl-armed { animation: dl-armed-pulse 1.9s ease-in-out infinite; }
@keyframes dl-armed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86, 103, 63, .45); }
  50% { box-shadow: 0 0 0 7px rgba(86, 103, 63, 0); }
}
.flash-float {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 300;
  padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.45;
  opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; transition: opacity .18s, transform .18s;
}
.flash-float.is-on { opacity: 1; transform: translate(-50%, 0); }
.flash-float.is-error { background: var(--rust-2); }

/* ═══════════ Points de rupture des gabarits secondaires ═══════════ */
@media (max-width: 900px) {
  .stack-mobile { grid-template-columns: 1fr !important; }
  .checkout-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) { .two-mobile { grid-template-columns: 1fr !important; } }

/* ═══════════ Mouvement réduit ═══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .menu-overlay, .menu-link, .cart-backdrop, .cart-aside, .viewer, .gallery-in, .aperture-spin,
  .pack-pop, .icon-pop, .cart-bump, .cart-count, [data-cart-open], .pack-gather .cart-item, .dl-armed { animation: none !important; }
  .sel-img img, .event-card figure img, .link-arrow svg, .flash-float, .cart-item.is-removing { transition: none; }
  .dl-armed { outline: 2px solid var(--moss); outline-offset: 2px; }
}

/* Étapes sur fond papier (page À propos) : mêmes numéros, encre au lieu de papier. */
.steps--paper .step { border-top-color: var(--line-2); }
.steps--paper .step h3 { color: var(--ink); }
.steps--paper .step p { color: var(--ink-70); }
.steps--paper .step-num { color: var(--rust); }

/* Compléments 2026-09-10 */
.hero-img { display: block; }
.about-head { align-self: start; }
@media (min-width: 900px) { .about-head { grid-column: 1 / 5; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Mouvement éditorial (editorial-fx.js pose `fx-on` sur <html>). Sans cette
   classe — pas de JS, ou mouvement réduit — rien de ce bloc ne s'applique et
   la page est entièrement visible d'emblée.
   ═══════════════════════════════════════════════════════════════════════ */
.fx-on .hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.fx-on .hero-title .w > span { display: inline-block; transform: translateY(112%); transition: transform 1s var(--ease); will-change: transform; }
.fx-on .hero-title.is-in .w > span { transform: none; }
.fx-on .fx-fade { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s var(--ease); }
.fx-on .fx-fade.is-in { opacity: 1; transform: none; }

.fx-on .fx-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .2, 1); }
.fx-on .fx-img img { transform: scale(1.14); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1); }
.fx-on .fx-img.is-in { clip-path: inset(0 0 0 0); }
.fx-on .fx-img.is-in img { transform: none; }
.fx-on a.sel-img.is-in:hover img { transform: scale(1.025); }
.fx-on .event-card.is-in:hover figure img, .fx-on .event-card:hover figure.is-in img { transform: scale(1.03); }

.fx-on .fx-rise { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s var(--ease); }
.fx-on .fx-rise.is-in { opacity: 1; transform: none; }

.fx-on .hero-figure .hero-img { will-change: transform; }
.navbar { transition: border-color .3s ease; }
.navbar.is-scrolled { border-bottom-color: var(--line-2); }

/* ═══════════ Section « pinned » : la scène reste, les photos défilent ═══════════ */
.pin { padding-top: 56px; }
.pin-body { position: relative; }
.pin-stage { display: grid; gap: 18px; }
.pin-frame { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 5; }
.pin-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.pin-slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.pin-slide.is-active { opacity: 1; z-index: 2; }
.pin-ui { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pin-count { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -.01em; }
.pin-cap { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; text-align: right; }
.pin-bar { height: 1px; background: var(--line); overflow: hidden; }
.pin-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.pin-list { list-style: none; margin: 0; padding: 0; display: none; }
.pin-item { padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; align-items: baseline; color: var(--ink-45); transition: color .35s ease; }
.pin-item:last-child { border-bottom: 1px solid var(--line); }
.pin-item .num { font-family: var(--font-display); font-size: 20px; color: inherit; }
.pin-item .ttl { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.01em; color: inherit; transition: transform .45s var(--ease); }
.pin-item .sub { grid-column: 2; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: inherit; }
.pin-item.is-active { color: var(--ink); }
.pin-item.is-active .num { color: var(--rust); }
.pin-item.is-active .ttl { transform: translateX(6px); }
/* Repli (sans JS ou mouvement réduit) : les photos en grille simple. */
.pin-fallback { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pin-fallback figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.pin-fallback img { width: 100%; height: 100%; object-fit: cover; }
.pin-fallback figcaption { font-size: 12px; color: var(--ink-60); padding-top: 8px; }
.pin.is-pinned .pin-fallback { display: none; }
.pin-body { display: none; }
.pin.is-pinned .pin-body { display: block; height: calc(var(--pin-n, 5) * 100dvh); }
.pin.is-pinned .pin-stage { position: sticky; top: 0; height: 100dvh; padding: 72px 0 18px; box-sizing: border-box; }
.pin.is-pinned .pin-frame { aspect-ratio: auto; flex: 1; min-height: 0; }
.pin.is-pinned .pin-stage { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .pin.is-pinned .pin-stage { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr auto; column-gap: clamp(28px, 4vw, 64px); padding: 88px 0 28px; }
  .pin.is-pinned .pin-frame { grid-row: 1 / 3; }
  .pin.is-pinned .pin-list { display: block; align-self: center; }
  .pin.is-pinned .pin-ui { grid-column: 2; align-self: end; }
  .pin.is-pinned .pin-bar { grid-column: 2; }
  .pin-fallback { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ═══════════ Questions fréquentes ═══════════ */
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: baseline;
  padding: 18px 0; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .num { font-size: 16px; color: var(--rust); font-family: var(--font-body); font-weight: 600; letter-spacing: .1em; }
.faq summary .plus { justify-self: end; font-family: var(--font-body); font-size: 22px; line-height: 1; color: var(--ink-60); transition: transform .3s var(--ease); }
.faq details[open] summary .plus { transform: rotate(45deg); color: var(--rust); }
.faq summary:hover { color: var(--rust); }
.faq .faq-a { padding: 0 0 20px 56px; font-size: 15px; line-height: 1.6; color: var(--ink-70); max-width: 62ch; }
@media (max-width: 560px) { .faq summary { grid-template-columns: 34px 1fr 20px; } .faq .faq-a { padding-left: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   Header de galerie (2026-09-13)

   Bande d'ouverture d'une page d'événement. Pleine largeur, elle déborde
   volontairement de la grille : c'est une image de couverture, pas un bloc de
   contenu parmi d'autres.

   L'image est un FOND CSS et non une <img> : ni clic droit « Enregistrer
   l'image sous… », ni glisser-déposer hors de la page. Le calque `.photo-guard`
   posé par-dessus reçoit le clic à la place de l'image.
   ═════════════════════════════════════════════════════════════════════════ */

.gallery-header {
  position: relative;
  /* Mobile d'abord : assez haut pour exister, jamais au point de repousser la
     galerie sous la ligne de flottaison. `dvh` et non `vh` — sur iOS, `vh`
     compte la barre d'adresse rétractée et déborde. */
  min-height: 42dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink, #161410);
  margin-bottom: clamp(20px, 3vw, 34px);
}

@media (min-width: 700px) {
  .gallery-header { min-height: 54dvh; }
}

.gallery-header-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Rien à sélectionner, rien à glisser : le fond n'est pas un contenu. */
  user-select: none;
  -webkit-user-select: none;
}

/* Voile de lisibilité, appliqué seulement quand du texte se pose dessus :
   assombrir une image qui n'a rien à porter serait gratuit. */
.gallery-header-veil { display: none; }

.gallery-header.has-copy .gallery-header-veil {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 20, 16, .78) 0%, rgba(22, 20, 16, .32) 45%, rgba(22, 20, 16, .06) 100%);
}

/* Le calque de garde couvre toute la bande et intercepte le clic droit
   (voir app.js, [data-protected]). */
.gallery-header .photo-guard {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.gallery-header-copy {
  position: relative;   /* au-dessus du voile ET du calque de garde */
  z-index: 2;
  width: 100%;
  max-width: var(--wrap, 1360px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 46px) var(--gutter, 20px);
  color: #faf8f3;
}

.gallery-header-title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: clamp(28px, 5.2vw, 56px);
  line-height: 1.04;
  max-width: 20ch;
  text-wrap: balance;
}

.gallery-header-text {
  margin: 10px 0 0;
  font-size: 16px;      /* jamais moins : en dessous, la lecture au téléphone devient pénible */
  line-height: 1.55;
  max-width: 54ch;
  opacity: .9;
}

.gallery-header-cta {
  margin-top: 18px;
  min-height: 44px;     /* cible tactile confortable */
  display: inline-flex;
  align-items: center;
}

/* Le bouton reste cliquable : il est dans `.gallery-header-copy`, donc
   au-dessus du calque de garde. */
.gallery-header-copy a { pointer-events: auto; }

/* ─── <picture> ───
   Un <picture> est `display: inline` par défaut. L'<img> qu'il enveloppe
   porte `height: 100%` dans les cadres à ratio fixe (ouverture, portrait) :
   ce pourcentage doit se résoudre contre le cadre, pas contre une boîte
   inline sans hauteur. Sans cette règle, la hauteur dépend du moteur — elle
   tombe juste ici, faux ailleurs. */
.hero-figure picture,
.about-fig picture { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Téléchargement groupé — le choix de destination (2026-09-23)

   N'apparaît que sur mobile : c'est le seul endroit où deux destinations
   existent vraiment. Sur ordinateur, le lien reste un lien et l'archive part
   directement, sans question qui n'aurait qu'une réponse.

   Feuille basse plutôt que boîte centrée : le choix se fait au pouce, juste
   au-dessus du bouton qu'on vient de toucher.
   ═══════════════════════════════════════════════════════════════════════ */

.dl-choice {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  /* La marge basse de l'iPhone : sans elle, le bouton d'annulation passe
     sous la barre d'accueil et devient intouchable. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.dl-choice::backdrop { background: rgba(22, 20, 16, .5); }

.dl-choice-head { padding: 22px 20px 14px; border-bottom: 1px solid var(--line); }

.dl-choice-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.015em;
}

.dl-choice-head p {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.dl-choice-opts { display: grid; }

/* Chaque option est un bloc plein, séparé d'un filet : pas d'icône, pas de
   pastille — la charte du site tient sur des filets et des angles vifs. */
.dl-opt {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 64px;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dl-opt:hover, .dl-opt:focus-visible { background: var(--paper-2); }
.dl-opt:active { background: var(--paper-3); }
.dl-opt:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }

.dl-opt-t {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
}

.dl-opt-n { font-size: 14px; line-height: 1.5; color: var(--ink-70); }

.dl-choice-foot { padding: 12px 20px 20px; }

.dl-choice-cancel {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.dl-choice-cancel:hover { background: var(--paper-2); }

/* Dès qu'il y a de la place, la feuille redevient une boîte posée au centre. */
@media (min-width: 620px) {
  .dl-choice {
    inset: 0;
    width: min(520px, calc(100vw - 32px));
    height: max-content;
    margin: auto;
    border: 1px solid var(--ink);
  }
}