/* ==========================================================================
   Blogue · deux idées
   1. La liste (blogue.html) : un fanzine photocopié. Une feuille grise de photocopieuse, un gros article à la une,
      les autres en coupures découpées et scotchées de travers, un titre en lettres collées.
   2. Les articles (article-*.html) : une page de magazine. Grande image, titre en affiche, date et temps de lecture
      à l'étiqueteuse, texte composé pour la lecture, et un filet de lecture qui prend la place de celui de la barre.
   ========================================================================== */
.page-blogue, .page-article { --photocopie: #E7E6E1; --coupure: #F8F7F3; --encre: #232327; --encre-douce: #4A4A52; }
/* les couleurs d'étiquettes (style.css déclare .dymo--jaune avant .dymo : on la rend gagnante ici) */
.page-blogue .dymo--jaune, .page-article .dymo--jaune { background: var(--jaune); color: var(--nuit); }
.page-blogue .dymo--contour, .page-article .dymo--contour { background: #fff; color: var(--nuit); box-shadow: inset 0 0 0 2px var(--nuit); }

/* le papier photocopié : grain de toner, trame fine, bords assombris par la vitre */
.zine__feuille, .coupure__papier::before, .coupon__carte, .mag__feuille, .mag__papier::before {
  background: url(../../_commun/img/pages/blogue/toner.webp) 0 0 / 512px 512px, radial-gradient(rgba(23, 23, 26, .04) 1.1px, transparent 1.5px) 0 0 / 9px 9px, var(--photocopie);
}

/* --------------------------------------------------------------------------------------------- la feuille du fanzine */
.zine { position: relative; padding: 14px 0 0; }
.zine__feuille { position: relative; margin: 0 clamp(0px, 2.2vw, 34px); padding: 58px 0 clamp(90px, 9vw, 140px); color: var(--nuit); box-shadow: inset 0 0 140px rgba(23, 23, 26, .2);
  clip-path: polygon(0 10px, 2.5% 3px, 5% 9px, 8% 2px, 11% 11px, 13.5% 5px, 17% 12px, 20% 4px, 23% 9px, 26% 1px, 29.5% 10px, 33% 4px, 36% 12px, 39% 3px, 42.5% 8px, 46% 2px, 49% 11px, 52% 5px, 55.5% 12px, 58% 3px, 61% 9px, 64.5% 1px, 68% 10px, 71% 4px, 74% 12px, 77.5% 3px, 80% 8px, 83% 2px, 86.5% 11px, 89% 5px, 92% 12px, 95% 3px, 97.5% 9px, 100% 4px,
    100% calc(100% - 9px), 96.5% calc(100% - 2px), 93% calc(100% - 11px), 89.5% calc(100% - 4px), 86% calc(100% - 12px), 82% calc(100% - 3px), 78.5% calc(100% - 10px), 75% calc(100% - 1px), 71% calc(100% - 9px), 67.5% calc(100% - 3px), 64% calc(100% - 12px), 60% calc(100% - 4px), 56.5% calc(100% - 10px), 53% calc(100% - 2px), 49% calc(100% - 11px), 45.5% calc(100% - 3px), 42% calc(100% - 9px), 38% calc(100% - 1px), 34.5% calc(100% - 10px), 31% calc(100% - 4px), 27% calc(100% - 12px), 23.5% calc(100% - 3px), 20% calc(100% - 9px), 16% calc(100% - 2px), 12.5% calc(100% - 11px), 9% calc(100% - 4px), 5.5% calc(100% - 10px), 2% calc(100% - 2px), 0 calc(100% - 8px)); }
.zine__tete { position: relative; }
.zine .ariane a { color: var(--encre-douce); }
@media (hover: hover) { .zine .ariane a:hover { color: var(--rouge-fonce); } }
.zine .ariane li + li::before { color: var(--encre-douce); }
.zine .ariane [aria-current] { color: var(--nuit); }
.page-blogue :focus-visible, .page-article .mag__feuille :focus-visible, .coupon :focus-visible { outline-color: var(--rouge-fonce); }
.page-article .aussi :focus-visible { outline-color: var(--jaune); }

/* le bandeau du journal : deux filets, les infos en police à chasse fixe */
.zine__bandeau { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0; padding: 9px 0 8px; border-top: 5px solid var(--nuit); border-bottom: 1.5px solid var(--nuit); font: 600 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.zine__bandeau span:last-child { padding: 0 6px; background: var(--nuit); color: var(--photocopie); }

/* le titre en lettres découpées dans des magazines et collées une à une */
.zine__titre { margin: clamp(26px, 3vw, 40px) 0 0; }
/* la baseline, en lettres normales sous le titre découpé */
.zine__baseline { margin: clamp(14px, 1.5vw, 22px) 0 clamp(16px, 1.8vw, 24px); text-align: center; font: 500 clamp(22px, 2.5vw, 38px)/1.1 var(--titre); color: var(--nuit); }
.colle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .05em; font-size: clamp(44px, 9.4vw, 150px); line-height: 1; filter: drop-shadow(.045em .045em 0 rgba(23, 23, 26, .92)); }
.colle__l { display: inline-block; min-width: .62em; padding: .05em .09em .01em; text-align: center; rotate: var(--r); translate: 0 var(--y); }
.colle__l--a { background: var(--nuit); color: var(--photocopie); font: 900 1em/1 var(--titre); clip-path: polygon(3% 0, 100% 4%, 96% 100%, 0 95%); }
.colle__l--b { background: var(--rouge); color: #fff; font: 900 italic 1em/1 var(--titre); clip-path: polygon(0 5%, 97% 0, 100% 94%, 4% 100%); }
.colle__l--c { background: #fff; color: var(--nuit); font: 700 1.08em/.93 var(--bouton); padding-inline: .13em; clip-path: polygon(6% 2%, 100% 0, 94% 98%, 0 100%); }
.colle__l--d { background: var(--jaune); color: var(--nuit); font: 800 .92em/1.09 var(--titre); clip-path: polygon(0 0, 95% 6%, 100% 100%, 5% 93%); }
.colle__l--e { background: radial-gradient(rgba(23, 23, 26, .2) 1px, transparent 1.4px) 0 0 / 5px 5px, #CFCEC8; color: var(--nuit); font: 600 .84em/1.19 var(--mono); clip-path: polygon(2% 6%, 98% 0, 100% 97%, 0 100%); }
.colle__espace { width: .26em; }
.zine__chapo { max-width: 32em; margin-inline: auto; text-align: center; text-wrap: balance; font: 500 clamp(19px, 1.55vw, 23px)/1.42 var(--titre); color: var(--encre); }

/* les sujets : des bouts d'étiqueteuse (la forme est dessinée derrière, pour que le focus reste visible) */
.zine__filtres { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: clamp(30px, 3.4vw, 44px); padding: 16px 0 18px; border-top: 1.5px solid var(--nuit); border-bottom: 5px solid var(--nuit); }
.zine__etat { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* le menu des sujets : une étiquette noire qui déroule une fiche de papier, avec des cases à cocher */
.sujets { position: relative; }
.sujets:has(.sujets__bouton:focus-visible) { outline: 3px solid var(--rouge); outline-offset: 4px; }
.sujets__bouton { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px 0 20px; border: 0; background: var(--nuit); color: #fff; cursor: pointer;
  font: 800 15px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 100% 96%, 98% 100%, 2% 94%, 0 100%); rotate: -1deg; transition: background .15s; }
.sujets__bouton:focus-visible { outline: none; }
.sujets__bouton i { font-size: 16px; transition: rotate .3s var(--claque); }
.sujets__bouton[aria-expanded="true"] { background: var(--rouge); }
@media (hover: hover) { .sujets__bouton:hover { background: var(--rouge); } }
.sujets__bouton[aria-expanded="true"] i { rotate: 180deg; }
.sujets__panneau { position: absolute; z-index: 10; top: calc(100% + 16px); left: -4px; width: min(350px, calc(100vw - 2 * var(--gouttiere))); padding: 26px 22px 16px; background: #fff; color: var(--nuit); box-shadow: 10px 10px 0 var(--rouge); rotate: .8deg; transform-origin: 30px 0; }
.sujets__panneau::before { content: ""; position: absolute; top: -17px; left: 38%; width: 112px; height: 36px; rotate: -5deg; background: url(../../_commun/img/decoupes/ruban-jaune.webp) no-repeat center / contain; }
.sujets__cases { display: grid; margin: 0; padding: 0; border: 0; }
.sujets__legende { margin-bottom: 8px; padding: 0; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #5a5a62; }
.sujets__case { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 44px; cursor: pointer; font: 700 16px/1.2 var(--titre); }
.sujets__case + .sujets__case { border-top: 1px dashed rgba(23, 23, 26, .22); }
.sujets__case input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sujets__boite { position: relative; width: 22px; height: 22px; border: 2.5px solid var(--nuit); background: #fff; transition: background .12s; }
/* le crochet, tracé à main levée, déborde un peu de la case */
.sujets__boite::after { content: ""; position: absolute; left: -2px; top: -9px; width: 28px; height: 26px; scale: 0; transform-origin: 30% 80%; transition: scale .22s var(--claque);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M4 14.5c2.6 1.6 4.4 3.6 6 6.5C13.6 12.6 18.6 6.4 25 2.5' fill='none' stroke='%2317171A' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 14.5c2.6 1.6 4.4 3.6 6 6.5C13.6 12.6 18.6 6.4 25 2.5' fill='none' stroke='%23FAEF5D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.sujets__case input:checked + .sujets__boite { background: var(--rouge); }
.sujets__case input:checked + .sujets__boite::after { scale: 1; }
.sujets__case input:focus-visible + .sujets__boite { outline: 3px solid var(--rouge); outline-offset: 3px; }
@media (hover: hover) { .sujets__case:hover .sujets__nom { color: var(--rouge-fonce); } }
.sujets__compte { min-width: 26px; padding: 4px 6px 3px; background: var(--nuit); color: #fff; font: 600 11px/1 var(--mono); text-align: center; }
.sujets__effacer { margin-top: 10px; padding: 8px 0 4px; border: 0; background: none; color: var(--nuit); cursor: pointer; font: 700 15px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline 2px var(--rouge); text-underline-offset: 5px; }
@media (hover: hover) { .sujets__effacer:hover { color: var(--rouge-fonce); } }
.sujets__effacer:disabled { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------------------------- les coupures */
.zine__liste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(54px, 5vw, 76px) clamp(28px, 3vw, 44px); margin-top: clamp(56px, 6vw, 80px); list-style: none; }
.zine__liste .coupure { grid-column: span 4; }
.zine__liste .coupure--une { grid-column: 1 / -1; }
.coupure { position: relative; min-width: 0; }
.coupure__lien { --r: 0deg; --ombre: rgba(23, 23, 26, .92); position: relative; display: block; color: var(--nuit); text-decoration: none; rotate: var(--r); transition: rotate .45s var(--claque); }
.coupure__lien:focus-visible { outline-offset: 8px; }
.coupure__papier { position: relative; isolation: isolate; display: block; padding: 12px 12px 22px; filter: drop-shadow(6px 6px 0 var(--ombre)); transition: filter .2s; }
.coupure__papier::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--coupure); clip-path: var(--coupe, polygon(0 1.4%, 100% 0, 99.3% 100%, .5% 98.8%)); }
.coupure__papier::before { background-image: url(../../_commun/img/pages/blogue/toner.webp), radial-gradient(rgba(23, 23, 26, .03) 1.1px, transparent 1.5px); background-color: var(--coupure); }
/* chaque coupure est taillée et collée un peu différemment */
.coupure--1 .coupure__lien { --r: -1.8deg; }
.coupure--2 .coupure__lien { --r: 1.3deg; --coupe: polygon(.8% 0, 99.4% 1.2%, 100% 98.8%, 0 100%); }
.coupure--3 .coupure__lien { --r: -.8deg; --coupe: polygon(0 0, 99% .9%, 100% 100%, 1.1% 99%); }
.coupure--4 .coupure__lien { --r: 1.9deg; --coupe: polygon(1% 1%, 100% 0, 98.8% 99.2%, 0 100%); }
.coupure--5 .coupure__lien { --r: -1.2deg; --coupe: polygon(0 .4%, 98.9% 0, 100% 99.5%, .7% 100%); }
.coupure--0 .coupure__lien { --r: .9deg; }
.zine__liste .coupure--2 { margin-top: 34px; }
.zine__liste .coupure--3 { margin-top: 12px; }
.zine__liste .coupure--5 { margin-top: 30px; }
.coupure__lien:focus-visible { --r: 0deg; --ombre: var(--rouge); }
@media (hover: hover) { .coupure__lien:hover { --r: 0deg; --ombre: var(--rouge); } }

/* la photo, passée à la photocopieuse ; la couleur revient au survol */
.coupure__photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #BDBCB6; }
.coupure__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.5) brightness(1.06); transition: filter .45s ease-out; }
.coupure__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(23, 23, 26, .7) 1px, transparent 1.5px) 0 0 / 4px 4px; mix-blend-mode: multiply; opacity: .32; transition: opacity .45s ease-out; pointer-events: none; }
.coupure__lien:focus-visible .coupure__photo img { filter: none; }
@media (hover: hover) { .coupure__lien:hover .coupure__photo img { filter: none; } }
.coupure__lien:focus-visible .coupure__photo::after { opacity: 0; }
@media (hover: hover) { .coupure__lien:hover .coupure__photo::after { opacity: 0; } }

.coupure__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.coupure__meta .dymo { font-size: 12px; }
.coupure__quand { white-space: nowrap; }
.coupure__titre { margin: 14px 0 0; font: 900 clamp(20px, 1.65vw, 25px)/1.34 var(--titre); text-transform: uppercase; letter-spacing: .005em; text-wrap: pretty; }
/* les titres : des bandes découpées, collées ligne par ligne */
.coupure__titre span { padding: .05em .26em .02em; background: var(--nuit); color: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.coupure--2 .coupure__titre span, .coupure--5 .coupure__titre span { background: #fff; color: var(--nuit); box-shadow: inset 0 0 0 2px var(--nuit); }
.coupure--4 .coupure__titre span { background: var(--jaune); color: var(--nuit); }
.coupure__extrait { display: block; margin-top: 14px; font: 400 16px/1.5 var(--titre); color: var(--encre); }

/* le ruban adhésif, chaque fois à un endroit différent */
.coupure__ruban { position: absolute; z-index: 2; top: -19px; left: 50%; width: clamp(92px, 8vw, 118px); height: auto; transform: translateX(-50%) rotate(-4deg); pointer-events: none; }
.coupure--1 .coupure__ruban { left: 14%; transform: translateX(-50%) rotate(-11deg); }
.coupure--2 .coupure__ruban { left: 82%; transform: translateX(-50%) rotate(9deg); }
.coupure--4 .coupure__ruban { left: 22%; transform: translateX(-50%) rotate(6deg); }
.coupure--5 .coupure__ruban { left: 76%; transform: translateX(-50%) rotate(-7deg); }
.coupure__lien { container-type: inline-size; }
.coupure__tete { position: absolute; z-index: 3; right: -12px; top: calc(12px + (100cqw - 24px) * 9 / 16 - 96px); width: clamp(64px, 5.2vw, 80px); height: auto; transform: rotate(11deg); filter: drop-shadow(3px 3px 0 rgba(23, 23, 26, .9)); pointer-events: none; }

/* la une : l'article le plus récent, en grand, arraché d'un journal */
.coupure--une .coupure__lien { --r: -.5deg; }
.coupure--une .coupure__papier { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(26px, 3vw, 46px); align-items: center; padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px) clamp(22px, 2vw, 30px);
  --coupe: polygon(0% 1.4%, 7% 0%, 15% 1.2%, 24% .2%, 33% 1.5%, 42% .3%, 51% 1.3%, 60% 0%, 69% 1.4%, 78% .4%, 87% 1.6%, 94% .2%, 100% 1.1%, 99.5% 18%, 100% 37%, 99.3% 56%, 100% 76%, 99.4% 98.7%, 92% 100%, 83% 98.6%, 74% 99.8%, 64% 98.5%, 55% 99.7%, 45% 98.4%, 36% 99.8%, 26% 98.6%, 17% 99.9%, 8% 98.5%, 0% 99.6%, .6% 79%, 0% 58%, .7% 37%, 0% 18%); }
.coupure--une .coupure__texte { display: block; padding-right: clamp(0px, 2vw, 30px); }
.coupure--une .coupure__meta { margin-top: 0; }
.coupure--une .coupure__titre { margin-top: 18px; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.24; }
.coupure--une .coupure__titre span { padding: .02em .2em 0; }
.coupure--une .coupure__extrait { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; }
.coupure__lire { margin-top: 24px; }
@media (hover: hover) { .coupure__lien:hover .coupure__lire { transform: none; } }
.coupure__alaune { position: absolute; z-index: 3; top: -17px; left: clamp(18px, 3vw, 44px); rotate: -3deg; }
.coupure__alaune .dymo { font-size: clamp(14px, 1.2vw, 17px); padding: .5em .9em .44em; }
.coupure--une .coupure__ruban--a { top: -26px; left: 30%; width: clamp(100px, 9vw, 140px); transform: rotate(5deg); }
.coupure--une .coupure__ruban--b { top: auto; bottom: -20px; left: 4%; width: clamp(100px, 9vw, 140px); transform: rotate(-6deg); }
.coupure__eclat { position: absolute; z-index: 3; right: clamp(-10px, -1vw, 0px); top: -46px; width: clamp(110px, 10vw, 150px); transform: rotate(9deg); pointer-events: none; }
.coupure__eclat img { width: 100%; height: auto; }
.coupure__eclat span { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6% 4% 0; font: 900 italic clamp(14px, 1.2vw, 18px)/.95 var(--titre); text-transform: uppercase; text-align: center; color: var(--nuit); }


/* --------------------------------------------------------------------------------------------- le coupon d'abonnement */
.coupon { position: relative; padding: clamp(80px, 9vw, 130px) 0 calc(var(--biais) + clamp(90px, 9vw, 140px)); background: radial-gradient(rgba(246, 246, 247, .06) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--charbon); }
.coupon__carte { position: relative; max-width: none; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 28px clamp(28px, 4vw, 56px); padding: clamp(44px, 5vw, 66px) clamp(30px, 4.4vw, 64px) clamp(40px, 4.6vw, 60px); color: var(--nuit); rotate: -1deg; box-shadow: 12px 12px 0 var(--rouge); }
.coupon__decoupe { position: absolute; inset: 14px; pointer-events: none; }
.coupon__pointilles { position: absolute; inset: 0; border: 2.5px dashed rgba(23, 23, 26, .7); }
.coupon__ciseaux { --t: .04; position: absolute; top: -33px; left: calc(var(--t) * (100% - 40px)); width: 40px; height: auto; transform: rotate(90deg); filter: drop-shadow(2px 2px 0 rgba(23, 23, 26, .85)); }
.coupon__ici { position: absolute; top: -.75em; right: 8%; padding: 2px 8px; background: var(--photocopie); font: 600 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
.coupon__sur { margin: 0 0 10px; font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-fonce); }
.coupon__titre { font: 900 clamp(30px, 3.5vw, 52px)/.96 var(--titre); text-transform: uppercase; text-wrap: balance; }
.coupon__titre em { font-style: normal; color: var(--rouge-fonce); }
.coupon__note { margin-top: 16px; max-width: 30em; font: 400 17px/1.5 var(--titre); color: var(--encre); }
.coupon__champs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.coupon__champ { display: grid; gap: 8px; min-width: 0; }
.coupon__libelle { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.coupon__champ input { width: 100%; height: 56px; padding: 0 16px; border: 2px solid var(--nuit); border-radius: var(--r); background: #fff; color: var(--nuit); font: 500 18px/1 var(--titre); transition: border-color .12s; }
.coupon__champ input::placeholder { color: #85858E; }
.coupon__champ input:focus { outline: none; border-color: var(--rouge-fonce); box-shadow: 0 0 0 3px rgba(214, 0, 63, .25); }
.coupon__bouton { height: 56px; }

/* --------------------------------------------------------------------------------------------- l'article : la tête */
.mag__tete { position: relative; padding-top: 14px; }
.mag__scene { position: relative; }
/* la grande image, collée sur une feuille, comme les affiches de l'accueil */
/* l'image se voit au complet : sa taille suit son format (16:9), sans recadrage, et elle tient dans l'écran */
.mag__image { position: relative; width: min(100%, 1240px, calc((100svh - 130px) * 1.72)); margin: 0 auto; filter: drop-shadow(12px 12px 0 var(--rouge)); }
.mag__image::before { content: ""; position: absolute; inset: 0; background: var(--papier);
  clip-path: polygon(0% 1.4%, 7% 0%, 15% 1.2%, 24% .2%, 33% 1.5%, 42% .3%, 51% 1.3%, 60% 0%, 69% 1.4%, 78% .4%, 87% 1.6%, 94% .2%, 100% 1.1%, 99.5% 18%, 100% 37%, 99.3% 56%, 100% 76%, 99.4% 98.7%, 92% 100%, 83% 98.6%, 74% 99.8%, 64% 98.5%, 55% 99.7%, 45% 98.4%, 36% 99.8%, 26% 98.6%, 17% 99.9%, 8% 98.5%, 0% 99.6%, .6% 79%, 0% 58%, .7% 37%, 0% 18%); }
.mag__image img { position: relative; width: calc(100% - 2 * clamp(8px, 1vw, 14px)); margin: clamp(8px, 1vw, 14px); height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; background: var(--charbon); }
/* le titre en affiche, posé de travers par-dessus le bas de l'image */
/* le titre est centré et vient se coller par-dessus le bas de l'image */
.mag__affiche { position: relative; z-index: 2; width: min(1000px, 84%); margin: calc(-1 * clamp(70px, 11vw, 190px)) auto 0; transform: rotate(-1.3deg); }
.mag__papier { position: relative; isolation: isolate; padding: clamp(28px, 3vw, 46px) clamp(24px, 3.2vw, 50px) clamp(30px, 3.2vw, 46px); color: var(--nuit); filter: drop-shadow(10px 10px 0 var(--nuit)); }
.mag__papier::before { content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 2%, 4% 0, 12% 1.4%, 21% .2%, 30% 1.6%, 40% .4%, 51% 1.8%, 61% .3%, 71% 1.5%, 82% .1%, 91% 1.3%, 100% .4%, 99.4% 30%, 100% 62%, 99.2% 100%, 88% 98.6%, 76% 100%, 64% 98.4%, 52% 99.8%, 40% 98.5%, 28% 100%, 16% 98.4%, 6% 99.7%, 0 98%, .7% 66%, 0 34%); }
.mag__etiquettes { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0 0 clamp(16px, 1.8vw, 24px); }
.mag__etiquettes .dymo { font-size: clamp(12px, 1vw, 14px); }
.mag__etiquettes .dymo:nth-child(1) { transform: rotate(-2deg); }
.mag__etiquettes .dymo:nth-child(2) { transform: rotate(1deg); }
.mag__etiquettes .dymo:nth-child(3) { transform: rotate(-1deg); }
a.etiquette-sujet { text-decoration: none; transition: background .15s, color .15s; }
@media (hover: hover) { a.etiquette-sujet:hover { background: var(--nuit); color: #fff; } }
.mag__titre { font: 900 clamp(32px, 4.3vw, 70px)/.95 var(--titre); text-transform: uppercase; letter-spacing: .002em; text-wrap: balance; }
.mag__affiche--court .mag__titre { font-size: clamp(36px, 5vw, 80px); }
.mag__affiche--long .mag__titre { font-size: clamp(28px, 3.6vw, 58px); }
/* partager : le même petit menu que Soutien, sous le bouton */
.partage { position: relative; margin-top: clamp(18px, 1.8vw, 26px); }
.mag__papier:has(.partage__menu:not([hidden])) { z-index: 2; }
.partage__bouton { gap: 10px; font-size: 16px; padding: 12px 18px; }
.partage__bouton i { font-size: 20px; }
.partage__bouton[aria-expanded="true"] { background: var(--rouge); }
.partage__menu { left: 0; right: auto; z-index: 6; width: 310px; max-width: calc(100vw - 60px); transform-origin: 30px 0; }
.partage .soutien__choix { color: var(--nuit); width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.partage .soutien__choix:focus-visible { background: var(--nuit); color: #fff; }
@media (hover: hover) { .partage .soutien__choix:hover { background: var(--nuit); color: #fff; } }
.partage .soutien__choix:focus-visible small { color: var(--gris); }
@media (hover: hover) { .partage .soutien__choix:hover small { color: var(--gris); } }
.partage .est-copie i { background: var(--rouge); color: #fff; }
.mag__maj { margin-top: 18px; font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); }
.mag__ruban { position: absolute; z-index: 1; width: clamp(100px, 10vw, 150px); height: auto; pointer-events: none; }
.mag__ruban--a { top: -22px; left: -26px; transform: rotate(-24deg); }
.mag__ruban--b { right: -24px; bottom: -18px; transform: rotate(-20deg); }
/* la tête se colle à côté du titre, sans rien cacher : le titre lui laisse la place */
.mag__scene:has(.mag__tete-collant) .mag__affiche { width: min(880px, 76%); }
.mag__tete-collant { position: absolute; z-index: 3; right: 0; bottom: 0; width: clamp(84px, 10vw, 150px); height: auto; transform: rotate(8deg); filter: drop-shadow(6px 6px 0 rgba(23, 23, 26, .9)); }

/* --------------------------------------------------------------------------------------------- l'article : la feuille de lecture */
.mag__feuille { position: relative; max-width: 1440px; margin: clamp(50px, 6vw, 90px) auto 0; padding: clamp(56px, 6vw, 92px) clamp(22px, 6vw, 90px) clamp(56px, 6vw, 86px); color: var(--encre); box-shadow: inset 0 0 120px rgba(23, 23, 26, .14);
  clip-path: polygon(0 10px, 3% 3px, 7% 9px, 11% 2px, 15% 11px, 19% 4px, 23% 10px, 27% 1px, 31.5% 9px, 36% 3px, 40% 12px, 44% 4px, 48.5% 9px, 53% 2px, 57% 11px, 61% 4px, 65.5% 10px, 70% 1px, 74% 9px, 78% 3px, 82.5% 11px, 87% 4px, 91% 9px, 95.5% 2px, 100% 8px, 100% 100%, 0 100%); }
.mag__texte { max-width: 37em; margin: 0 auto; font: 400 clamp(17px, 1.2vw, 21px)/1.72 var(--titre); }
.mag__texte > * + * { margin-top: 1.1em; }
.mag__texte h2 { margin-top: 2.2em; font: 900 clamp(24px, 2.3vw, 34px)/1.04 var(--titre); text-transform: uppercase; color: var(--nuit); text-wrap: balance; }
.mag__texte > h2:first-child { margin-top: 0; }
.mag__texte h2::before { content: ""; display: block; width: 54px; height: 7px; margin-bottom: 16px; background: var(--rouge); transform: skewX(-20deg); }
.mag__texte h3 { margin-top: 1.9em; font: 800 clamp(19px, 1.5vw, 22px)/1.22 var(--titre); color: var(--rouge-fonce); text-wrap: balance; }
.mag__texte h2 + p, .mag__texte h3 + p, .mag__texte h2 + .exergue + p { margin-top: .65em; }
.mag__texte strong { font-weight: 700; color: var(--nuit); background: linear-gradient(transparent 62%, rgba(250, 239, 93, .9) 62% 93%, transparent 93%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* les liens vers les sources, repérables dans le texte */
.mag__texte a { color: var(--nuit); font-weight: 600; text-decoration: underline 2px var(--rouge); text-underline-offset: 3px; transition: color 100ms ease-out; }
@media (hover: hover) { .mag__texte a:hover { color: var(--rouge-fonce); } }
.mag__texte a:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.mag__amorce { font-size: 1.1em; }
.mag__amorce::first-letter { float: left; margin: .1em .14em 0 0; padding: .08em .12em .02em; background: var(--nuit); color: var(--jaune); font: 900 3.3em/.84 var(--titre); }
.mag__liste { display: grid; gap: .5em; }
.mag__liste li { position: relative; padding-left: 1.7em; }
.mag__liste li::before { content: ""; position: absolute; left: .25em; top: .62em; width: .52em; height: .52em; background: var(--rouge); rotate: 14deg; box-shadow: 2px 2px 0 var(--nuit); }
.mag__liste strong { background: none; }

/* les citations : une bulle de bande dessinée, ou une bande de ruban jaune */
.exergue { margin-block: 2em; }
@media (min-width: 1000px) { .exergue { margin-inline: -2.4em; } }
.exergue p { margin: 0; }
.exergue--bulle { position: relative; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 2.8vw, 38px); background: #fff; border: 3px solid var(--nuit); border-radius: 40px; box-shadow: 7px 7px 0 var(--rouge); transform: rotate(-1deg);
  font: 800 italic clamp(20px, 1.9vw, 28px)/1.16 var(--titre); text-transform: uppercase; color: var(--nuit); }
.exergue--bulle::before, .exergue--bulle::after { content: ""; position: absolute; left: 16%; clip-path: polygon(0 0, 100% 0, 8% 100%); }
.exergue--bulle::before { bottom: -31px; width: 44px; height: 32px; background: var(--nuit); }
.exergue--bulle::after { bottom: -23px; left: calc(16% + 4px); width: 34px; height: 24px; background: #fff; }
.exergue--ruban { position: relative; padding: clamp(18px, 2vw, 26px) clamp(26px, 3vw, 44px); background: var(--jaune); transform: rotate(-1.4deg); font: 800 clamp(19px, 1.7vw, 25px)/1.2 var(--titre); text-transform: uppercase; color: var(--nuit);
  clip-path: polygon(1.5% 0, 99% 3%, 97.8% 22%, 100% 46%, 98.4% 72%, 99.6% 100%, 1% 97%, 2.4% 74%, 0 50%, 1.8% 26%); }
.exergue--ruban::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(23, 23, 26, .14) 1px, transparent 1.4px) 0 0 / 6px 6px; pointer-events: none; }

/* la fin de l'article */
.mag__fin { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 32px; max-width: 30em; margin: 3.4em auto 0; padding-top: 34px; border-top: 5px solid var(--nuit); font-size: clamp(17px, 1.36vw, 20px); }
.mag__point { position: absolute; top: -15px; left: 50%; width: 24px; height: 24px; background: var(--rouge); translate: -50% 0; rotate: 45deg; box-shadow: 0 0 0 7px var(--photocopie); }
.mag__fin-titre { margin: 0 0 12px; font: 600 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.mag__services-liste { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.mag__services-liste .dymo { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 14px; text-decoration: none; transition: background .15s; }
.mag__services-liste li:nth-child(odd) .dymo { rotate: -1.2deg; }
.mag__services-liste li:nth-child(even) .dymo { rotate: 1deg; }
@media (hover: hover) { .mag__services-liste .dymo:hover { background: var(--rouge); } }
.mag__question { text-align: right; }

/* --------------------------------------------------------------------------------------------- à lire aussi */
.aussi { position: relative; padding: clamp(80px, 9vw, 140px) 0 clamp(20px, 3vw, 40px); }
.aussi__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(28px, 3vw, 44px); margin-top: clamp(48px, 5vw, 70px); list-style: none; }
.aussi .coupure__titre { font-size: clamp(19px, 1.5vw, 23px); }
.aussi__tout { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: clamp(44px, 5vw, 64px); color: var(--blanc); font: 700 20px/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--rouge); transition: color .15s; }
@media (hover: hover) { .aussi__tout:hover { color: var(--jaune); } }
.aussi__tout i { transition: translate .2s var(--rapide); }
@media (hover: hover) { .aussi__tout:hover i { translate: 4px 0; } }

/* --------------------------------------------------------------------------------------------- le filet de lecture */
/* il remplace le filet de la barre pendant qu'on lit : il se remplit sur le texte seulement, et une étiquette
   au bout dit combien de minutes il reste */
body.a-lecture .nav::after, body.a-lecture .nav::before { display: none; }
.lecture { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none; }
.lecture__barre { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--l, 0) * 100%); background: linear-gradient(90deg, var(--rouge) 0 calc(100% - 26px), var(--jaune)); }
.lecture__eclat { position: absolute; left: calc(var(--l, 0) * 100% - 7px); bottom: -5px; width: 14px; height: 14px; background: var(--jaune); opacity: calc(var(--l, 0) * 60);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.lecture__dymo { position: absolute; top: 12px; left: 0; translate: var(--x, 0) 0; rotate: -2deg; padding: .48em .8em .4em; font-size: 12px; opacity: 0; transition: opacity .3s; }
.lecture.est-active .lecture__dymo { opacity: 1; }

/* --------------------------------------------------------------------------------------------- tablette */
@media (max-width: 1080px) {
  .zine__liste .coupure { grid-column: span 6; }
  .zine__liste .coupure--2, .zine__liste .coupure--5 { margin-top: 0; }
  .zine__liste .coupure:nth-child(odd):not(.coupure--une) { margin-top: 26px; }
  .aussi__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aussi__liste .coupure:nth-child(3) { display: none; }
}
@media (max-width: 860px) {
  .coupure--une .coupure__papier { grid-template-columns: minmax(0, 1fr); }
  .coupure--une .coupure__texte { padding: 0 4px; }
  .coupon__carte { grid-template-columns: minmax(0, 1fr); }
  .mag__affiche { width: auto; }
  .mag__fin { grid-template-columns: minmax(0, 1fr); }
  .mag__question { text-align: left; }
}

/* --------------------------------------------------------------------------------------------- mobile */
@media (max-width: 640px) {
  .zine { padding-top: 8px; }
  .zine__feuille { margin: 0; padding: 42px 0 90px; box-shadow: inset 0 0 70px rgba(23, 23, 26, .2); }
  .zine__bandeau span:nth-child(2) { display: none; }
  .zine__bandeau { font-size: 11px; letter-spacing: .1em; }
  .colle { flex-wrap: nowrap; font-size: clamp(28px, 10.6vw, 56px); }
  .zine__chapo { font-size: 18px; }
  .sujets, .sujets__bouton { width: 100%; }
  .sujets__bouton { justify-content: space-between; }
  .sujets__panneau { left: 0; width: 100%; }
  .zine__baseline { font-size: 21px; }
  .zine__liste { grid-template-columns: minmax(0, 1fr); gap: 50px; margin-top: 48px; }
  .zine__liste .coupure, .zine__liste .coupure--une { grid-column: auto; margin-top: 0 !important; }
  .coupure--1 .coupure__lien { --r: -1.2deg; }
  .coupure--4 .coupure__lien { --r: 1.2deg; }
  .coupure--2 .coupure__lien { --r: .9deg; }
  .coupure__lien:focus-visible { --r: 0deg; }
  @media (hover: hover) { .coupure__lien:hover { --r: 0deg; } }
  .coupure--une .coupure__lien { --r: -.4deg; }
  .coupure--une .coupure__titre { font-size: clamp(25px, 7vw, 30px); }
  .coupure__eclat { right: -4px; top: -40px; width: 100px; }
  .coupure__eclat span { font-size: 13px; }
  .coupure__tete { right: -6px; width: 62px; top: calc(12px + (100cqw - 24px) * 9 / 16 - 58px); }
  .coupure__lire { width: 100%; }

  .coupon { padding-top: 76px; }
  .coupon__carte { padding: 48px 26px 34px; rotate: -.8deg; box-shadow: 8px 8px 0 var(--rouge); }
  .coupon__decoupe { inset: 10px; }
  .coupon__champs { grid-template-columns: minmax(0, 1fr); }
  .coupon__bouton { width: 100%; }
  .coupon__ici { right: 6%; font-size: 10px; }

  .mag__image { filter: drop-shadow(7px 7px 0 var(--rouge)); }
  .mag__affiche { margin: -34px 0 0; transform: rotate(-.8deg); }
  .mag__papier { padding: 28px 20px 26px; filter: drop-shadow(6px 6px 0 var(--nuit)); }
  .mag__titre, .mag__affiche--court .mag__titre { font-size: clamp(27px, 8vw, 32px); }
  .mag__affiche--long .mag__titre { font-size: clamp(24px, 7vw, 28px); }
  .mag__ruban { width: 86px; }
  .mag__ruban--a { top: -16px; left: -10px; }
  .mag__ruban--b { right: -8px; bottom: -14px; }
  .mag__scene:has(.mag__tete-collant) .mag__affiche { width: auto; }
  .mag__tete-collant { width: 58px; right: 10px; bottom: 8px; transform: rotate(8deg); }
  .mag__feuille { margin-top: 44px; padding: 52px 22px 52px; box-shadow: inset 0 0 60px rgba(23, 23, 26, .14); }
  .mag__texte { font-size: 17.5px; line-height: 1.68; }
  .exergue--bulle { border-radius: 28px; }
  .aussi__liste { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .aussi__liste .coupure:nth-child(3) { display: block; }
}

/* sans animation : rien ne bouge, tout est à sa place */
@media (prefers-reduced-motion: reduce) {
  .coupure__lien, .coupure__photo img, .coupure__photo::after, .sujets__bouton i, .sujets__boite, .sujets__boite::after { transition: none; }
}

/* téléphone : la liste se déplie par lots */
.zine__plus { display: none; }
@media (max-width: 760px) {
  .coupure.est-plie { display: none; }
  .zine__plus:not([hidden]) { display: flex; width: calc(100% - 2 * var(--gouttiere, 22px)); min-height: 56px; margin: 44px auto 0; }
  .zine__etat { font-size: 13px; }
}