/* ==========================================================================
   LES HAMMERS — Design system v2 « Tribune »
   Inspirations : banderoles, maillots, pancartes au marqueur, fanzine photocopié.
   Noir d'encre / papier journal / rouge maillot, jaune « marqueur » en accent.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=Archivo:ital,wght@0,400;0,500;0,700;1,400&family=Permanent+Marker&display=swap');

:root{
  /* palette fixe */
  --ink: #0e0d0d;
  --ink-2: #161414;
  --ink-3: #1f1c1b;
  --paper: #ebe4d6;
  --paper-2: #f5efe3;
  --red: #e3261b;
  --red-deep: #a8160d;
  --yellow: #f6b80f;

  /* tokens contextuels (redéfinis dans les sections papier / rouges) */
  --bg: var(--ink);
  --fg: #f4efe8;
  --fg-soft: #d8d1c7;
  --muted: #a69e94;
  --line: #2f2b29;
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);

  /* alias v1 conservés pour compatibilité */
  --black: var(--ink);
  --black-soft: var(--ink-2);
  --white: var(--fg);
  --steel: var(--fg-soft);
  --steel-dim: var(--muted);
  --red-dark: var(--red-deep);
  --red-glow: rgba(227,38,27,.35);
  /* fond « HUD » inspiré des visuels réseaux sociaux : noir, veines rouges (dont une couche animée), lueur basse */
  --fond-hud:
    url('../img/hud/veines-flux.svg') center / cover no-repeat,
    url('../img/hud/veines.svg') center / cover no-repeat,
    radial-gradient(ellipse 85% 28% at 50% 104%, rgba(235,22,12,.7), rgba(150,8,6,.25) 55%, transparent 80%),
    #030303;

  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-alt: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-hand: 'Permanent Marker', cursive;

  --radius: 0;
  --container: 1220px;
  --slant: 12px;

  --torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V10L28 14L55 6L83 12L110 4L142 11L170 7L201 15L230 5L262 10L290 3L321 12L350 8L382 14L410 4L441 9L470 6L503 13L530 5L561 11L590 7L622 15L650 4L681 10L710 6L742 13L770 3L801 9L830 12L862 5L890 11L921 6L950 14L982 4L1010 10L1041 7L1070 13L1102 5L1130 11L1162 6L1200 10V24Z'/%3E%3C/svg%3E");
  --torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 24)' d='M0 24V10L28 14L55 6L83 12L110 4L142 11L170 7L201 15L230 5L262 10L290 3L321 12L350 8L382 14L410 4L441 9L470 6L503 13L530 5L561 11L590 7L622 15L650 4L681 10L710 6L742 13L770 3L801 9L830 12L862 5L890 11L921 6L950 14L982 4L1010 10L1041 7L1070 13L1102 5L1130 11L1162 6L1200 10V24Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C50 4 120 2 197 6M12 12C70 8 130 8 186 10' fill='none' stroke='%23f6b80f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--red); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:0;
  line-height:.92;
  margin:0 0 .45em;
  text-transform:uppercase;
  color:var(--fg);
}
h1{ font-size:clamp(3rem,7.4vw,6.6rem); }
h2{ font-size:clamp(2.3rem,4.8vw,4rem); }
h3{ font-size:clamp(1.45rem,2.4vw,1.85rem); font-weight:800; line-height:1; }
h4{ font-weight:800; }
p{ margin:0 0 1em; color:var(--muted); }
strong{ color:var(--fg); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
section{ position:relative; padding:104px 0; }
.section-tight{ padding:64px 0; }

/* -------------------- section « papier journal » (ex-diagonale) -------------------- */
.section-diagonal,
.paper{
  --bg: var(--paper);
  --fg: #141212;
  --fg-soft: #2b2725;
  --muted: #5a524b;
  --line: rgba(20,18,18,.2);
  --surface: var(--paper-2);
  --surface-2: #fffaf0;
  background:var(--grain), var(--paper);
  color:var(--fg);
  padding:140px 0;
  margin:-4px 0;
  z-index:1;
  -webkit-mask:
    var(--torn-top) -137px 0 / 1200px 24px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 46px) no-repeat,
    var(--torn-bottom) -410px 100% / 1200px 24px repeat-x;
          mask:
    var(--torn-top) -137px 0 / 1200px 24px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 46px) no-repeat,
    var(--torn-bottom) -410px 100% / 1200px 24px repeat-x;
}
.section-diagonal .container{ padding-top:0; padding-bottom:0; }

/* -------------------- utility -------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; font-size:.85rem; line-height:1;
  color:#fff; background:var(--red);
  padding:.5em .85em .45em;
  transform:skewX(-12deg); transform-origin:left bottom;
  margin:0 0 22px;
}
.center .eyebrow, .eyebrow.center{ transform-origin:center bottom; }
/* surtitre d'article (catégorie + date) : rester sobre */
.eyebrow:has(.blog-cat){
  background:none; transform:none; padding:0; color:var(--muted);
  letter-spacing:.06em; font-size:.95rem;
}
.center{ text-align:center; }
.lead{ font-size:1.18rem; line-height:1.55; max-width:640px; color:var(--fg-soft); }
.center .lead, .lead.center{ margin-inline:auto; }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.text-red{ color:var(--red); }
.mt-0{ margin-top:0; }
.hand{ font-family:var(--font-hand); text-transform:none; letter-spacing:0; font-weight:400; }

/* -------------------- icon library -------------------- */
.icon-svg{
  width:1.15em; height:1.15em; display:inline-block; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:square; stroke-linejoin:miter;
  vertical-align:-.15em;
}
.icon-svg.filled{ fill:currentColor; stroke:none; }

/* -------------------- buttons (parallélogrammes façon logo) -------------------- */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.02rem; line-height:1;
  padding:15px 28px; border:0; background:none; color:var(--fg);
  cursor:pointer; white-space:nowrap;
  transition:color .15s ease;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:skewX(-12deg);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary{ color:#fff; }
.btn-primary::before{ background:var(--red); }
.btn-primary:hover{ color:var(--bg); }
.btn-primary:hover::before{ background:var(--fg); transform:skewX(-12deg) translateX(3px); }
.btn-outline::before{ border:2px solid currentColor; }
.btn-outline:hover{ color:#fff; }
.btn-outline:hover::before{ background:var(--red); border-color:var(--red); }
.btn-ghost{ color:var(--red); padding:12px 0; letter-spacing:.08em; }
.btn-ghost::before{ display:none; }
.btn-ghost:hover{ color:var(--fg); }
.btn-ghost .icon-svg{ transition:transform .15s ease; }
.btn-ghost:hover .icon-svg{ transform:translateX(4px); }
.btn-block{ width:100%; justify-content:center; }
.btn-lg{ padding:19px 36px; font-size:1.15rem; }

/* -------------------- header -------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding:16px 0;
  background:linear-gradient(to bottom, rgba(14,13,13,.85), rgba(14,13,13,0));
  transition:background .25s ease, padding .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:var(--ink);
  padding:8px 0;
  box-shadow:0 3px 0 var(--red);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:64px; width:auto; transition:height .25s ease; }
.site-header.is-scrolled .brand img{ height:50px; }
.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.05em; color:var(--fg-soft);
  padding:10px 12px; transition:color .15s, box-shadow .15s;
}
.main-nav a:hover, .main-nav a.active{ color:#fff; box-shadow:inset 0 -3px 0 var(--red); }
.has-dropdown{ position:relative; }
.has-dropdown > a::after{
  content:''; width:7px; height:7px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.dropdown{
  position:absolute; top:100%; left:0; margin-top:8px;
  background:var(--ink); border-top:3px solid var(--red);
  min-width:260px; padding:8px 0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  box-shadow:0 18px 30px -10px rgba(0,0,0,.7);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{ display:block; padding:10px 18px; font-size:.98rem; }
.dropdown a:hover{ box-shadow:inset 3px 0 0 var(--red); background:var(--ink-2); }
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn{ padding:12px 20px; font-size:.95rem; }
.nav-toggle{
  display:none; width:46px; height:46px; border:2px solid var(--fg);
  background:transparent; position:relative; cursor:pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:''; position:absolute; left:10px; right:10px; height:3px; background:var(--fg); transition:.2s;
}
.nav-toggle span{ top:19.5px; }
.nav-toggle::before{ top:11px; }
.nav-toggle::after{ bottom:11px; }
.nav-toggle.is-open::before{ transform:translateY(8.5px) rotate(45deg); }
.nav-toggle.is-open::after{ transform:translateY(-8.5px) rotate(-45deg); }
.nav-toggle.is-open span{ opacity:0; }

/* -------------------- hero (accueil) -------------------- */
.hero{
  position:relative; overflow:hidden;
  min-height:min(100svh, 940px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:170px 0 0;
  background:linear-gradient(115deg, var(--ink) 38%, #2a0a07 72%, #5e100a 100%);
}
.hero-photo{ position:absolute; inset:0; z-index:0; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:62% 35%; }
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(14,13,13,.96) 0%, rgba(14,13,13,.82) 34%, rgba(14,13,13,.25) 68%, rgba(14,13,13,.05) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(14,13,13,0) 34%);
}
.hero-bolt{ position:absolute; z-index:1; pointer-events:none; }
.hero-bolt.b1{ top:118px; right:6%; width:170px; transform:rotate(14deg); }
.hero-bolt.b2{ bottom:150px; left:-50px; width:200px; transform:scaleX(-1) rotate(-8deg); opacity:.85; }
.hero-inner{ position:relative; z-index:2; padding-bottom:48px; width:100%; }
.hero h1{
  font-size:clamp(3.4rem,10vw,9rem);
  line-height:.84; margin-bottom:.3em; max-width:13ch;
}
.hero h1 em{
  font-style:normal; color:var(--red);
  background:var(--scribble) no-repeat 0 78% / 100% .16em;
}
.hero .lead{ font-size:1.2rem; max-width:540px; color:var(--fg-soft); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:34px; }
.hero-stats{
  display:grid; grid-template-columns:repeat(3, max-content); gap:0;
  margin-top:72px; border-top:2px solid rgba(244,239,232,.18);
}
.hero-stat{ padding:20px 40px 4px 0; margin-right:40px; border-right:2px solid rgba(244,239,232,.18); }
.hero-stat:last-child{ border-right:0; margin-right:0; }
.hero-stat b{ display:block; font-family:var(--font-display); font-weight:900; font-size:3.2rem; color:var(--fg); line-height:.9; }
.hero-stat span{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* -------------------- marquee (scotch de chantier) -------------------- */
.marquee{
  background:var(--red); color:var(--ink); overflow:hidden;
  padding:12px 0 10px; transform:rotate(-1.6deg);
  width:104%; margin:-14px -2% 0;
  border-top:5px solid var(--yellow);
  position:relative; z-index:3;
  box-shadow:0 10px 0 -4px rgba(0,0,0,.35);
}
.marquee-track{ display:flex; gap:40px; white-space:nowrap; animation:scroll 30s linear infinite; width:max-content; }
.marquee-track span{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:1.5rem; letter-spacing:.04em; display:flex; align-items:center; gap:40px; line-height:1;
}
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* -------------------- cards -------------------- */
.card{
  display:block; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  padding:28px;
  transition:border-color .2s ease, background .2s ease;
}
.card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.7,0,.2,1);
}
.card:hover{ border-color:var(--fg); }
.card:hover::after{ transform:scaleX(1); }
.card .icon{
  width:auto; height:auto; color:var(--red);
  display:inline-flex; margin-bottom:18px; font-size:2.4rem; line-height:1;
}
.card .icon .icon-svg{ stroke-width:1.6; }
.card h3{ margin-bottom:.4em; }
.card p{ margin-bottom:0; font-size:.98rem; }
.card .tag{
  display:inline-block; font-family:var(--font-display); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; font-size:.8rem; line-height:1; color:var(--ink); background:var(--yellow);
  padding:5px 9px 4px; margin-bottom:12px; transform:skewX(-12deg); align-self:flex-start;
}

/* -------------------- objectifs (même cadre que le CTA) -------------------- */
.slab{
  padding:60px 48px; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
}
.slab::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow), transparent 70%);
  top:-170px; left:18%; pointer-events:none;
}
.slab > *{ position:relative; z-index:1; }

/* -------------------- section split -------------------- */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:72px; align-items:center; }
.badge-list{ display:flex; flex-direction:column; gap:0; margin-top:28px; border-top:2px solid var(--line); }
.badge-item{ display:flex; gap:22px; align-items:baseline; padding:18px 0; border-bottom:2px solid var(--line); }
.badge-item .dot{
  flex:none; width:auto; height:auto; background:none;
  font-family:var(--font-display); font-weight:900; font-size:2.4rem; line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px var(--red);
}
.badge-item h4{ margin:0 0 4px; font-size:1.45rem; color:var(--fg); }
.badge-item p{ margin:0; font-size:.98rem; }

/* -------------------- accordion (FAQ) -------------------- */
.accordion{ border-top:2px solid var(--fg); }
.accordion-item{ border-bottom:2px solid var(--line); background:none; }
.accordion-item:first-child{ border-top:2px solid var(--fg); }
.accordion .accordion-item:first-child{ border-top:0; }
.accordion-head{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 4px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:1.4rem; line-height:1.1;
  text-transform:uppercase; color:var(--fg); transition:color .15s;
}
.accordion-head:hover{ color:var(--red); }
.accordion-head::after{
  content:'+'; flex:none; width:34px; height:34px; display:grid; place-items:center;
  background:var(--red); color:#fff; font-size:1.6rem; font-weight:800; line-height:1;
  transition:transform .2s ease, background .2s ease;
}
.accordion-item.is-open .accordion-head::after{ transform:rotate(45deg); background:var(--fg); color:var(--bg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.accordion-body-inner{ padding:0 4px 24px; max-width:760px; }
.accordion-body-inner p{ margin:0; font-size:1rem; }

/* -------------------- événements = billets de match -------------------- */
.event-card{ display:flex; gap:0; padding:0; }
.event-card > div:last-child{ padding:26px 28px; flex:1; }
.event-card .date-chip{
  flex:none; width:108px; align-self:stretch;
  background:var(--red); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-family:var(--font-display); text-align:center; padding:16px 8px;
  border-right:3px dashed var(--bg);
  -webkit-mask:radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top/100% 51% no-repeat,
               radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top/100% 51% no-repeat,
               radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
}
.event-card .date-chip b{ font-size:2.2rem; font-weight:900; color:var(--ink); line-height:.9; }
.event-card .date-chip span{ font-size:.82rem; font-weight:800; letter-spacing:.08em; color:var(--ink); text-transform:uppercase; }
.event-card .kind{ font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red); font-family:var(--font-display); font-weight:800; }

/* -------------------- CTA banner (version v1) -------------------- */
.cta-banner{
  padding:64px 44px; text-align:center; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
}
.cta-banner::before{
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow), transparent 70%);
  top:-160px; left:50%; transform:translateX(-50%); pointer-events:none;
}
.cta-banner > *{ position:relative; }
.cta-actions{ display:flex; gap:18px 26px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* -------------------- forms -------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-display); font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-soft); }
.field input, .field textarea, .field select{
  background:transparent; border:0; border-bottom:2px solid var(--line); border-radius:0; padding:12px 2px;
  color:var(--fg); font-family:var(--font-body); font-size:1rem; transition:border-color .15s, background .15s;
}
.field select{ background:var(--surface); padding:12px 10px; border:2px solid var(--line); }
.field textarea{ border:2px solid var(--line); padding:12px; resize:vertical; min-height:140px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--red); background:rgba(227,38,27,.06); }
.checkbox-field{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-field input{ margin-top:5px; accent-color:var(--red); }
.checkbox-field label{ text-transform:none; font-family:var(--font-body); font-weight:400; color:var(--muted); font-size:.92rem; letter-spacing:0; }

/* -------------------- page hero (pages internes) -------------------- */
.page-hero{
  padding:190px 0 76px; position:relative; overflow:hidden;
  background:var(--fond-hud);
  border-bottom:6px solid var(--red);
}
.page-hero h1{ max-width:14ch; }
.page-hero .lead{ margin-bottom:0; }
.breadcrumb{
  font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px;
}
.breadcrumb a{ color:var(--fg-soft); box-shadow:inset 0 -2px 0 var(--red); }
.breadcrumb a:hover{ color:var(--red); }

/* -------------------- article / legal text -------------------- */
.prose{ max-width:780px; }
.prose h2{ margin-top:1.8em; font-size:clamp(1.8rem,3vw,2.3rem); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.4em; }
.prose h4{ font-size:1.4rem; line-height:1.1; margin-top:1.4em; }
.prose p, .prose li{ color:var(--fg-soft); font-size:1.04rem; line-height:1.7; }
.prose ul{ padding-left:1.2em; list-style:square; margin-bottom:1em; }
.prose ol{ padding-left:1.4em; margin-bottom:1em; }
.prose li{ margin-bottom:.4em; }
.prose li::marker{ color:var(--red); }
.prose a{ color:var(--fg); box-shadow:inset 0 -2px 0 var(--red); transition:color .15s; }
.prose a:hover{ color:var(--red); }
.prose strong{ color:var(--fg); }
.toc{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:44px; }
.toc a{
  font-family:var(--font-display); font-weight:800; font-size:.92rem; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 14px; border:2px solid var(--line); color:var(--fg-soft); transition:.15s;
}
.toc a:hover{ border-color:var(--red); background:var(--red); color:#fff; }

/* -------------------- footer -------------------- */
.site-footer{
  /* voile sombre sur la zone des liens : les veines restent visibles en bas et sur les côtés */
  background:
    linear-gradient(to bottom, rgba(3,3,3,.94) 0%, rgba(3,3,3,.86) 55%, rgba(3,3,3,.35) 85%, rgba(3,3,3,0) 100%),
    var(--fond-hud);
  position:relative; overflow:hidden;
  padding-top:80px; border-top:3px solid var(--red);
}
/* texte du footer mis en valeur */
.site-footer .footer-col a{ color:#f1ece5; text-shadow:0 1px 10px rgba(0,0,0,.95); }
.site-footer .footer-col a:hover{ color:#fff; }
.site-footer .footer-col a[href^="mailto:"]{ color:#fff; font-weight:600; }
.site-footer .footer-brand p{ color:#d9d2c8; }
.site-footer .footer-bottom{ color:#bdb5ab; border-top-color:rgba(244,239,232,.22); text-shadow:0 1px 8px rgba(0,0,0,.95); }
.site-footer .footer-bottom a{ color:#e4ddd3; }
.site-footer .social-row a{ color:#f1ece5; background:#1d1a19; }
/* crâne au marqueur en filigrane */
.site-footer::after{
  content:''; position:absolute; right:-70px; bottom:-90px; width:420px; height:420px;
  background:url('../img/skull_red.webp') center/contain no-repeat;
  opacity:.07; transform:rotate(-14deg); pointer-events:none;
}
.site-footer .container{ position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:64px; align-items:start; }
.footer-brand{
  background:var(--ink-2); border:1px solid var(--line); padding:32px 30px 30px;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.footer-brand img{ height:72px; width:auto; margin-bottom:18px; }
.footer-brand p{ font-size:.95rem; max-width:300px; margin-bottom:0; }
.footer-brand::after{
  content:'Toujours là pour rigoler !';
  content:'Toujours là pour rigoler !' / '';
  display:block; margin-top:18px;
  font-family:var(--font-hand); font-size:1.15rem; line-height:1.1; color:var(--yellow); white-space:nowrap;
  transform:rotate(-3deg); transform-origin:left;
}
.footer-col h4{
  display:inline-block; margin-bottom:22px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.12em; line-height:1;
  color:#fff; background:var(--red); padding:.5em .85em .45em; transform:skewX(-12deg);
}
.footer-col ul{ display:flex; flex-direction:column; gap:4px; }
.footer-col a{
  display:inline-flex; align-items:center; gap:0; padding:5px 0;
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--fg-soft); transition:color .15s, transform .15s;
}
.footer-col a::before{
  content:''; width:0; height:3px; margin-right:0; background:var(--red); transition:width .15s, margin-right .15s;
}
.footer-col a:hover{ color:#fff; }
.footer-col a:hover::before{ width:14px; margin-right:8px; }
.footer-col a[href^="mailto:"]{ text-transform:none; font-family:var(--font-body); font-weight:500; font-size:.98rem; letter-spacing:0; }
.social-row{ display:flex; gap:6px; margin-top:22px; flex-wrap:wrap; }
.social-row a{
  width:38px; height:38px; background:var(--ink-3); color:var(--fg-soft);
  display:flex; align-items:center; justify-content:center; transition:.15s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.social-row a:hover{ background:var(--red); color:#fff; }
.footer-bottom{
  border-top:1px solid var(--line); padding:24px 0 28px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:.85rem; color:var(--muted);
}
.footer-bottom a{ transition:color .15s; }
.footer-bottom a:hover{ color:var(--fg); box-shadow:inset 0 -2px 0 var(--red); }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }

/* -------------------- légendes « écrites au marqueur » -------------------- */
.photo-strip-item .cap,
.gallery-item .cap{
  position:absolute; left:14px; bottom:14px; right:auto;
  font-family:var(--font-hand); font-size:1rem; line-height:1.2; letter-spacing:0;
  color:var(--ink); background:var(--paper); padding:6px 12px 5px;
  transform:rotate(-2deg); box-shadow:0 3px 0 rgba(0,0,0,.35);
  max-width:calc(100% - 28px);
}

/* -------------------- photo strip (collage) -------------------- */
.photo-strip{ display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:1fr 1fr; gap:8px; }
.photo-strip-item{ position:relative; overflow:hidden; min-height:200px; background:var(--ink-2); }
.photo-strip-item.large{ grid-row:1 / 3; min-height:460px; }
.photo-strip-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.photo-strip-item:hover img{ transform:scale(1.04); }

/* -------------------- gallery grid -------------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gallery-item{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--ink-2); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item .cap{ opacity:0; transform:rotate(-2deg) translateY(8px); transition:opacity .2s ease, transform .2s ease; }
.gallery-item:hover .cap{ opacity:1; transform:rotate(-2deg) translateY(0); }

/* -------------------- card media (photo on cards) -------------------- */
.card-media{
  margin:-28px -28px 22px; height:210px; overflow:hidden; position:relative;
  background:var(--ink-3);
}
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.card:hover .card-media img{ transform:scale(1.05); }
.card-media.tile{ display:flex; align-items:center; justify-content:center; background:var(--red); }
.card-media.tile .icon-svg{ width:56px; height:56px; color:var(--ink); }

/* -------------------- kind icon (IRL / Online tags) -------------------- */
.kind-icon{ display:inline-flex; align-items:center; gap:6px; }
.kind-icon .icon-svg{ width:1em; height:1em; color:var(--red); }

/* -------------------- page hero avec photo (duotone rouge/noir) -------------------- */
.page-hero.has-photo{ position:relative; }
.page-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-position:center 30%; background-size:cover; background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.15) brightness(.85);
  opacity:.55;
}
.page-hero.has-photo::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--ink) 15%, rgba(14,13,13,.55) 60%, rgba(14,13,13,.25)),
    linear-gradient(rgba(227,38,27,.55), rgba(227,38,27,.55));
  mix-blend-mode:multiply;
}
.page-hero.has-photo::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,13,13,.92) 0%, rgba(14,13,13,.6) 45%, rgba(14,13,13,0) 100%);
}
.page-hero.has-photo .container{ position:relative; z-index:1; }

/* -------------------- blog -------------------- */
.blog-filter{ display:flex; flex-wrap:wrap; gap:6px 4px; margin-bottom:44px; border-bottom:2px solid var(--line); }
.blog-filter button{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:1.05rem; padding:12px 18px; border:0; margin-bottom:-2px;
  background:transparent; color:var(--muted); cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:inset 0 -4px 0 transparent;
}
.blog-filter button:hover{ color:var(--fg); }
.blog-filter button.active{ color:var(--fg); box-shadow:inset 0 -4px 0 var(--red); }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ display:flex; flex-direction:column; }
.blog-card[hidden]{ display:none; }
.blog-card .card-media{ height:180px; }
.blog-meta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.blog-cat{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size:.82rem; line-height:1; color:var(--ink); background:var(--yellow);
  padding:5px 9px 4px;
}
.blog-cat .icon-svg{ width:1em; height:1em; }
.blog-date{ font-family:var(--font-display); font-weight:700; font-size:.92rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.blog-card h3{ font-size:1.5rem; margin-bottom:14px; }
.blog-card .btn-ghost{ margin-top:auto; }

/* -------------------- blog article -------------------- */
.article-prose{ max-width:740px; margin:0 auto; padding-top:24px; }
.article-cover{ width:100%; height:auto; margin-bottom:40px; }
.article-img{ width:100%; height:auto; margin:28px 0; border:6px solid var(--fg); }
.article-quote{
  position:relative; padding:8px 0 8px 64px; margin:36px 0;
  font-family:var(--font-display); font-weight:800; font-size:1.7rem; line-height:1.1;
  text-transform:uppercase; color:var(--fg); background:none;
}
.article-quote::before{
  content:'«'; position:absolute; left:0; top:-6px;
  font-size:4.6rem; line-height:1; color:var(--red);
}
.article-embed{ margin:32px 0; overflow:hidden; border:2px solid var(--line); background:var(--surface); }
.article-embed-video{ position:relative; aspect-ratio:16/9; }
.article-embed-video iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* ==========================================================================
   Composants propres à l'accueil
   ========================================================================== */

/* Qui sommes-nous : doodle crâne */
.doodle{ position:relative; }
.doodle img{ width:100%; max-width:440px; margin-inline:auto; transform:rotate(-6deg); }
.doodle .hand{
  position:absolute; right:4%; bottom:4%; font-size:1.4rem; color:var(--yellow);
  transform:rotate(-8deg); line-height:1.1;
}

/* Objectifs */
.objectives{ list-style:none; margin:0; padding:0 170px 0 0; display:grid; grid-template-columns:1fr 1.35fr; gap:0; }
.objectives li{ display:flex; gap:20px; align-items:flex-start; padding:8px 40px 8px 0; }
.objectives li + li{ border-left:2px solid var(--line); padding-left:40px; padding-right:0; }
.objectives .num{
  font-family:var(--font-display); font-weight:900; font-size:1.1rem; line-height:1;
  color:var(--red); border:2px solid var(--red); padding:5px 7px 4px; margin-top:.4em;
}
.objectives h2{ font-size:clamp(2.2rem,4.2vw,3.7rem); margin:0; line-height:.88; }
.slab-target{
  position:absolute !important; right:36px; bottom:30px; width:140px; z-index:0 !important;
  transform:rotate(12deg); opacity:.95; pointer-events:none;
}

/* Trois façons : liste numérotée */
.ways{ display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start; }
.ways-head{ position:sticky; top:110px; }
.ways-list{ list-style:none; margin:0; padding:0; border-top:3px solid var(--fg); }
.ways-list li{
  display:grid; grid-template-columns:72px 1fr; gap:4px 24px;
  padding:28px 0; border-bottom:2px solid var(--line);
}
.ways-num{
  grid-row:1 / 4; font-family:var(--font-display); font-weight:900; font-size:3.4rem; line-height:.8;
  color:var(--red);
}
.ways-list h3{ display:flex; align-items:center; gap:12px; margin:0 0 .3em; font-size:clamp(1.7rem,3vw,2.3rem); }
.ways-list h3 .icon-svg{ color:var(--red); font-size:.8em; }
.ways-list p{ margin:0; max-width:52ch; }
.ways-list .btn-ghost{ justify-self:start; padding-bottom:0; }

/* Événements : une affiche + deux */
.events-grid{ display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:auto auto; gap:24px; margin-top:44px; }
.events-grid .card:first-child{ grid-row:1 / 3; display:flex; flex-direction:column; }
.events-grid .card:first-child .card-media{ height:auto; flex:1; min-height:320px; }
.events-grid .card:first-child h3{ font-size:clamp(2rem,3.6vw,2.8rem); }
.events-grid .card:not(:first-child) .card-media{ height:170px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.section-head h2{ margin-bottom:0; }

/* Créations : polaroïds scotchés */
.polaroids{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:56px; }
.polaroid{
  position:relative; background:#fffdf8; padding:12px 12px 20px;
  box-shadow:0 2px 0 rgba(20,18,18,.08), 0 14px 24px -12px rgba(20,18,18,.45);
  transform:rotate(var(--r, -2deg)); transition:transform .25s ease;
}
.polaroid:nth-child(2){ --r: 1.8deg; margin-top:22px; }
.polaroid:nth-child(3){ --r: -1.2deg; }
.polaroid:nth-child(4){ --r: 2.4deg; margin-top:30px; }
.polaroid:hover{ transform:rotate(0) translateY(-4px); }
.polaroid::before{
  content:''; position:absolute; top:-12px; left:50%; width:86px; height:24px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(246,184,15,.75);
  -webkit-mask:linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0);
}
.polaroid-img{ aspect-ratio:1/1; overflow:hidden; background:var(--ink); }
.polaroid-img img{ width:100%; height:100%; object-fit:cover; }
.polaroid h3{ display:flex; align-items:center; gap:8px; margin:14px 0 4px; font-size:1.6rem; color:var(--ink); }
.polaroid h3 .icon-svg{ color:var(--red); font-size:.75em; }
.polaroid p{ margin:0; font-size:.94rem; color:#5a524b; }



/* ==========================================================================
   Cadre HUD — inspiré des visuels réseaux sociaux (assets/img/hud/)
   ========================================================================== */
.hero{
  /* zone sombre derrière le texte : les veines restent visibles sur les bords */
  background:
    radial-gradient(ellipse 52% 62% at 33% 48%, rgba(3,3,3,.92) 0%, rgba(3,3,3,.75) 45%, rgba(3,3,3,0) 100%),
    var(--fond-hud);
}
.page-hero{
  background:
    radial-gradient(ellipse 55% 75% at 28% 55%, rgba(3,3,3,.9) 0%, rgba(3,3,3,.7) 45%, rgba(3,3,3,0) 100%),
    var(--fond-hud);
}
/* lueur rouge du bas qui « respire » */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:45%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 100%, rgba(255,30,15,.35), transparent 70%);
  animation:hud-glow 6s ease-in-out infinite alternate;
}
@keyframes hud-glow{ from{ opacity:.35; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .hero::after{ animation:none; opacity:.6; } }
.hero h1, .page-hero h1{ text-shadow:0 2px 0 #000, 0 6px 28px rgba(0,0,0,.9); }
.hero h1 em{ text-shadow:none; }
.hero .lead, .page-hero .lead{ color:#f1ece5; text-shadow:0 1px 12px rgba(0,0,0,.95); }
.hero-stat b{ text-shadow:0 4px 18px rgba(0,0,0,.9); }
.hero-stat span{ color:#cfc7bd; }
.hero-stats{ border-top-color:rgba(244,239,232,.28); }
.hero-stat{ border-right-color:rgba(244,239,232,.28); }
.hud-frame{
  position:absolute; z-index:1; pointer-events:none;
  top:118px; bottom:34px;
  left:max(16px, calc((100% - 1400px) / 2)); right:max(16px, calc((100% - 1400px) / 2));
}
.hud-frame svg{ display:block; overflow:visible; filter:drop-shadow(0 0 5px rgba(255,26,18,.55)); }
@media (min-width:981px){
  /* le hero et son cadre tiennent dans un écran : tailles calées sur la hauteur disponible */
  .hero{ height:100svh; min-height:620px; padding:0; justify-content:center; }
  .hero-inner{ padding:calc(118px + clamp(32px, 5vh, 56px)) 24px clamp(100px, 12vh, 124px); }
  .hero .eyebrow{ margin-bottom:clamp(10px, 2vh, 22px); }
  .hero h1{ font-size:clamp(3rem, min(8.5vw, 12vh), 8.4rem); }
  .hero .lead{ font-size:clamp(1rem, 2.1vh, 1.2rem); max-width:640px; margin-bottom:0; }
  .hero-actions{ margin-top:clamp(16px, 3.2vh, 34px); }
  .hero .btn-lg{ padding:clamp(14px, 2vh, 19px) 34px; }
  .hero-stats{ margin-top:clamp(18px, 4.5vh, 64px); }
  .hero-stat{ padding-top:clamp(10px, 1.8vh, 20px); }
  .hero-stat b{ font-size:clamp(2.1rem, 5vh, 3.2rem); }
  .hero-bolt{ display:none; }
}
@media (max-width:980px){
  .hud-frame{ display:none; }
}

/* -------------------- documents officiels (règlement, statuts…) -------------------- */
.prose h2[id]{ scroll-margin-top:96px; padding-top:28px; border-top:2px solid var(--line); }
.prose h2[id] + h3{ margin-top:.6em; }
.prose h3{ font-size:1.3rem; color:var(--red); margin-bottom:.4em; }
.doc-note{ border-left:4px solid var(--red); background:var(--surface); padding:16px 20px; }
.doc-note strong{ font-family:var(--font-display); font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em; }
.toc a{ font-size:.85rem; }
.doc-tarifs{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 22px; }
.doc-tarifs > div{ flex:1 1 200px; background:var(--surface); border:1px solid var(--line); padding:16px 20px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.doc-tarifs b{ display:block; font-family:var(--font-display); font-weight:900; font-size:2.4rem; line-height:1; color:var(--fg); }
.doc-tarifs span{ font-size:.92rem; color:var(--muted); }
.doc-signature{ margin-top:48px; padding-top:24px; border-top:2px solid var(--red); }
.doc-signature p{ margin-bottom:.5em; }

/* -------------------- doodles au marqueur (assets/img/doodles) -------------------- */
.deco{ position:absolute; pointer-events:none; z-index:2; height:auto; }
.deco-anchor{ position:relative; }
/* accueil */
.doodle .deco-heart{ width:150px; left:2%; bottom:-4%; transform:rotate(-12deg); }
.objectives li{ position:relative; }
.deco-star{ width:96px; right:-46px; top:-62px; transform:rotate(10deg); }
.ways-head .deco-arrow{ position:static; display:block; width:150px; margin:26px 0 0 auto; transform:rotate(8deg); }
.deco-bolt{ width:74px; left:-62px; top:-14px; transform:rotate(-8deg); }
h2.deco-anchor{ width:fit-content; margin-inline:auto; }
.deco-mdr{ width:110px; right:-112px; top:-58px; transform:rotate(8deg); }
.cta-banner .deco-cta{ width:120px; left:28px; bottom:20px; transform:rotate(-12deg); opacity:.9; }
/* en-têtes de pages */
.page-hero .deco-page{ width:clamp(130px, 16vw, 230px); right:max(24px, calc((100% - 1220px) / 2 + 24px)); top:50%; transform:translateY(-38%) rotate(-6deg); }
.page-hero.has-photo .deco-page{ filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }

/* -------------------- reveal animation -------------------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.polaroid.reveal.is-visible{ transform:rotate(var(--r, -2deg)); }
.polaroid.reveal.is-visible:hover{ transform:rotate(0) translateY(-4px); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* -------------------- responsive -------------------- */
@media (max-width:1100px){
  .main-nav a{ font-size:.98rem; padding:10px 9px; }
  .polaroids{ grid-template-columns:repeat(2,1fr); }
  .polaroid:nth-child(n){ margin-top:0; }
}
@media (max-width:980px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(360px,88vw); top:0; height:100vh;
    background:var(--ink); border-left:4px solid var(--red); flex-direction:column; align-items:stretch;
    padding:100px 26px 26px; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav a{ padding:14px 6px; font-size:1.5rem; border-bottom:1px solid var(--line); }
  .main-nav a:hover, .main-nav a.active{ box-shadow:inset 4px 0 0 var(--red); padding-left:14px; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; margin:0 0 8px 10px; box-shadow:none; border-top:0; padding:0; }
  .dropdown a{ font-size:1.15rem; }
  .has-dropdown.is-open .dropdown{ display:block; }
  .nav-toggle{ display:block; }
  .header-cta .btn-outline{ display:none; }
  .split, .ways{ grid-template-columns:1fr; gap:48px; }
  .ways-head{ position:static; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .events-grid{ grid-template-columns:1fr 1fr; }
  .events-grid .card:first-child{ grid-column:1 / -1; grid-row:auto; }
  .objectives{ grid-template-columns:1fr; padding-right:0; }
  .objectives li + li{ border-left:0; border-top:2px solid var(--line); padding:28px 0 0; margin-top:20px; }
  .slab{ padding:48px 28px; }
  .slab-target{ width:100px; right:20px; bottom:20px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  body{ font-size:1rem; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .container{ padding:0 16px; }
  .hero{ padding-top:130px; min-height:0; }
  .hero-inner{ padding-bottom:64px; }
  .hero-photo::after{ background:linear-gradient(to top, var(--ink) 8%, rgba(14,13,13,.78) 55%, rgba(14,13,13,.55)); }
  .hero-bolt.b1{ width:110px; top:96px; right:-10px; }
  .hero-bolt.b2{ display:none; }
  .deco-bolt{ width:52px; left:auto; right:0; top:-52px; }
  .deco-mdr{ width:72px; right:-4px; top:-64px; }
  .deco-star{ width:64px; right:0; top:-20px; }
  .doodle .deco-heart{ width:96px; }
  .ways-head .deco-arrow{ width:100px; margin-top:12px; }
  .cta-banner .deco-cta{ width:60px; left:14px; top:16px; bottom:auto; }
  .slab{ padding-bottom:110px; }
  .slab-target{ width:80px; right:16px; bottom:16px; }
  .page-hero .deco-page{ width:84px; right:16px; top:112px; transform:rotate(-6deg); }
  .hero-stats{ grid-template-columns:repeat(3,1fr); margin-top:48px; }
  .hero-stat{ padding:16px 10px 0 0; margin-right:10px; }
  .hero-stat b{ font-size:2.1rem; }
  .hero-stat span{ font-size:.72rem; letter-spacing:.04em; display:block; line-height:1.2; }
  .header-cta .btn-primary{ padding:11px 14px; }
  .brand img{ height:42px; }
  section{ padding:68px 0; }
  .section-diagonal, .paper{ padding:84px 0; }
  .event-card{ flex-direction:column; }
  .event-card .date-chip{ width:auto; flex-direction:row; gap:12px; justify-content:flex-start; padding:14px 22px;
    border-right:0; border-bottom:3px dashed var(--bg); -webkit-mask:none; mask:none; }
  .photo-strip{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .photo-strip-item.large{ grid-column:1 / -1; grid-row:auto; min-height:260px; }
  .photo-strip-item{ min-height:150px; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .events-grid{ grid-template-columns:1fr; }
  .polaroids{ grid-template-columns:1fr 1fr; gap:22px 16px; }
  .polaroid h3{ font-size:1.3rem; }
  .ways-list li{ grid-template-columns:48px 1fr; gap:4px 14px; }
  .ways-num{ font-size:2.4rem; }
  .article-quote{ padding-left:44px; font-size:1.35rem; }
  .article-quote::before{ font-size:3.4rem; }
  .site-footer{ padding-top:56px; }
  .site-footer::after{ width:260px; height:260px; right:-60px; bottom:-40px; }
  .btn-lg{ padding:17px 26px; font-size:1.05rem; }
}