/*
Theme Name: La Flèche not Dead
Description: Thème de l'association La Flèche not Dead (direction Photocopieuse) : présentation, actus, réseaux et boutique de t-shirts avec paiement sur HelloAsso.
Version: 1.0.1
Requires at least: 6.2
Requires PHP: 7.4
Author: La Flèche not Dead
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-fleche-not-dead
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap {
  max-width: 1180px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Boutique */
.shop { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.prod { display: flex; flex-direction: column; min-width: 0; }
.prod-media img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.prod-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.prod-desc { flex: 1; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size { min-width: 46px; min-height: 44px; padding: 0 8px; background: transparent; border: 2px solid currentColor; font-weight: 700; }
.size[aria-pressed="true"] { background: var(--sel-bg, #000); color: var(--sel-fg, #fff); border-color: var(--sel-bg, #000); }
.size:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.prod-stock { font-variant-numeric: tabular-nums; font-size: .9rem; }
.add { min-height: 50px; padding: 0 20px; border: 0; background: var(--btn-bg, #000); color: var(--btn-fg, #fff); font-weight: 700; }
.shop-note { margin-top: 20px; font-size: .9rem; max-width: 70ch; }

/* Panier */
.cart-fab {
  position: fixed; z-index: 20; padding: 12px 18px; border: 0;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--btn-bg, #000); color: var(--btn-fg, #fff); font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.cart-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.55); }
.cart {
  position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
  padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
  background: var(--cart-bg, #fff); color: var(--cart-fg, #111);
  font-family: var(--font-body, system-ui, sans-serif);
}
.cart:focus { outline: none; }
.cart-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cart-head h2 { font-size: 1.6rem; }
.cart-close { background: none; border: 2px solid currentColor; min-height: 44px; padding: 0 14px; font-weight: 700; }
.cart-lines { display: flex; flex-direction: column; gap: 14px; }
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cart-line img { background: #fff; }
.cart-line-info { display: flex; flex-direction: column; min-width: 0; }
.qty { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.qty button { width: 40px; height: 40px; background: none; border: 2px solid currentColor; font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 2px solid currentColor; font-variant-numeric: tabular-nums; }
.cart-total strong { font-size: 1.5rem; }
.cart-pay { display: block; padding: 16px; text-align: center; font-weight: 700; text-decoration: none; background: var(--btn-bg, #000); color: var(--btn-fg, #fff); }
.cart-help { font-size: .9rem; }

/* Le visuel du t-shirt reste entier dans les actus */
.news-item:first-child .news-media { background: #fff; }
.news-item:first-child .news-media img { object-fit: contain; }

/* Réseaux */
.socials { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.social { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 16px; text-decoration: none; height: 100%; }
.social svg { grid-row: span 3; width: 36px; height: 36px; }
.social-name { font-weight: 700; }
.social-handle, .social-meta { font-size: .92rem; overflow-wrap: anywhere; }

/* Concept : un fanzine sorti de la photocopieuse. Trame de points, bandes découpées, scotch, et une seule encre rouge. */
:root {
  color-scheme: light;
  --paper: #f3f3f0; --toner: #0c0c0c; --grey: #bdbdb8; --red: #d4121c; --white: #ffffff;
  --display: "Rubik Dirt", Impact, sans-serif;
  --font-body: "Courier Prime", "Courier New", monospace;
  --hand: "Permanent Marker", "Comic Sans MS", cursive;
  --btn-bg: var(--toner); --btn-fg: var(--paper);
  --sel-bg: var(--red); --sel-fg: var(--white);
  --cart-bg: var(--paper); --cart-fg: var(--toner); --focus: var(--red);
}
body { font: 400 1.0625rem/1.55 var(--font-body); color: var(--toner); background: var(--paper); }
.strip { display: inline-block; background: var(--toner); color: var(--paper); padding: .1em .35em; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.15; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.strip-red { background: var(--red); color: var(--white); }
.scrawl { font-family: var(--hand); color: var(--red); font-weight: 400; }

/* Une */
.cover { position: relative; overflow: hidden; background: var(--toner); }
.cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(.72) contrast(1.15) brightness(1.5); }
.cover::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #000 34%, transparent 36%); background-size: 6px 6px; mix-blend-mode: multiply; opacity: .3; }
.cover-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 22px 56px; }
.cover-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; width: 100%; margin-bottom: 44px; }
.cover-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.cover-nav a { background: var(--paper); color: var(--toner); text-decoration: none; padding: 6px 10px; font-weight: 700; }
.cover-nav a:nth-child(odd) { transform: rotate(-1.5deg); }
.cover-nav a:nth-child(even) { transform: rotate(1.2deg); }
.cover-nav a:hover { background: var(--red); color: var(--white); }
.badge { background: var(--white); border-radius: 50%; width: 76px; height: 76px; padding: 2px; }
.cover h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-weight: 400; }
.cover h1 .strip { font-size: clamp(3rem, 11vw, 8.6rem); }
.cover h1 .strip:nth-child(1) { transform: rotate(-1.6deg); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: .08em; }
.cover h1 .strip:nth-child(2) { transform: rotate(1deg) translateX(3vw); background: var(--paper); color: var(--toner); }
.cover-tag { background: var(--paper); padding: 6px 12px; font-weight: 700; transform: rotate(-.8deg); margin-top: 18px; max-width: 38ch; }

/* Colonnes du zine */
.page { padding-block: 56px; }
.title { font-size: clamp(2rem, 6vw, 3.8rem); transform: rotate(-1deg); margin-bottom: 26px; }
.edito { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.edito > * { min-width: 0; }
.edito-text { display: flex; flex-direction: column; gap: 14px; max-width: 58ch; }
.edito-text .scrawl { font-size: 1.5rem; line-height: 1.25; transform: rotate(-1.2deg); }
.edito-text cite { display: block; font: 400 .95rem var(--font-body); color: var(--toner); margin-top: 4px; }
.story { display: flex; flex-direction: column; border-top: 3px solid var(--toner); }
.story-item { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 14px; padding-block: 12px; border-bottom: 3px solid var(--toner); }
.story-when { grid-row: span 2; font-weight: 700; }
.story-title { text-transform: uppercase; }

/* Actus en collage */
.halftone { background-color: var(--grey); background-image: radial-gradient(circle, var(--toner) 22%, transparent 24%); background-size: 7px 7px; }
.news { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.news-item { position: relative; background: var(--paper); padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 10px; box-shadow: 3px 4px 0 var(--toner); }
.news-item:nth-child(1) { grid-column: span 7; transform: rotate(-.8deg); }
.news-item:nth-child(2) { grid-column: span 5; transform: rotate(1deg); }
.news-item:nth-child(3) { grid-column: span 5; transform: rotate(.6deg); }
.news-item:nth-child(4) { grid-column: span 7; transform: rotate(-.6deg); }
.news-item::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(205, 200, 170, .82); transform: rotate(-3deg); }
.news-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--white); }
.news-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.1); }
.news-body { display: flex; flex-direction: column; gap: 6px; }
.news-tag { background: var(--red); color: var(--white); padding: 0 6px; font-weight: 700; }
.news-title { font-size: 1.45rem; line-height: 1.2; text-transform: uppercase; font-weight: 700; }
.news-link { font-weight: 700; }

/* Affiche */
.lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 30px; }
.lineup h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: 10px; }
.lineup ul { display: flex; flex-wrap: wrap; gap: 8px; }
.lineup li { background: var(--toner); color: var(--paper); font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); padding: .1em .4em; text-transform: uppercase; }
.lineup li:nth-child(even) { transform: rotate(-1.2deg); }
.lineup li:nth-child(odd) { transform: rotate(.8deg); }

/* Boutique */
.shop-page { background: var(--toner); color: var(--paper); }
.shop-page .strip { background: var(--paper); color: var(--toner); }
.shop-lead { max-width: 58ch; margin-bottom: 26px; }
.shop-page .shop-lead .scrawl { color: var(--paper); font-size: 1.4rem; display: block; margin-bottom: 8px; }
.prod { background: var(--paper); color: var(--toner); padding: 14px; }
.prod:first-child { transform: rotate(-.5deg); }
.prod:last-child { transform: rotate(.5deg); }
.prod-media { margin-bottom: 12px; border: 3px solid var(--toner); }
.prod-media img { max-height: 320px; }
.prod-name { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.15; text-transform: uppercase; }
.prod-price { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.add:hover { background: var(--red); color: var(--white); }
.shop-page .shop-note { color: var(--paper); }
.cart-fab { background: var(--red); color: var(--white); }

/* Réseaux */
.social { border: 3px dashed var(--toner); }
.social:hover { background: var(--toner); color: var(--paper); }

.foot { background: var(--paper); border-top: 6px solid var(--toner); padding-block: 26px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }

@media (max-width: 760px) {
  .edito { grid-template-columns: minmax(0, 1fr); }
  .news-item:nth-child(n) { grid-column: 1 / -1; }
  .page { padding-block: 40px; }
  .cover h1 .strip { font-size: 13.5vw; }
  .cover h1 .strip:nth-child(2) { transform: rotate(1deg); }
}

/* Lien d'évitement, pied de page et mentions légales */
.skip { position: absolute; left: 8px; top: -60px; z-index: 40; background: var(--toner); color: var(--paper); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.noscript-shop { border: 3px solid var(--paper); padding: 16px; max-width: 58ch; }
.legal { display: flex; flex-direction: column; gap: 28px; max-width: 70ch; padding-block: 44px 60px; }
.legal h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 400; }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { font-size: 1.15rem; text-transform: uppercase; }
.todo { background: var(--red); color: var(--white); padding: 0 6px; font-weight: 700; }


/* WordPress */
.subhead { background: var(--toner); padding-block: 14px; }
.subhead .cover-top { margin-bottom: 0; }
.screen-reader, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.legal h1 { line-height: 1.2; }
.legal h1 .strip { box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; }
.entry { display: flex; flex-direction: column; gap: 14px; }
.entry h2 { font-size: 1.15rem; text-transform: uppercase; margin-top: 16px; }
.entry img { height: auto; }
.entry-photo img { width: 100%; height: auto; max-height: 460px; object-fit: contain; background: var(--white); }
.news-item .news-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.legal .news-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.news-tag { align-self: center; }
.legal .news-tag { background: var(--red); color: var(--white); padding: 0 6px; font-weight: 700; }
.news-all { margin-top: 30px; }
.news-all-link { display: inline-block; background: var(--toner); color: var(--paper); padding: 12px 18px; font-weight: 700; }
.empty { background: var(--paper); padding: 16px; }
.pager { margin-top: 28px; }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pager a, .pager .current { background: var(--paper); padding: 8px 12px; font-weight: 700; }
@media (min-width: 761px) { .news-item:nth-child(n+5) { grid-column: span 6; } }