/* TrashTalk, section de nouvelles d'industriesgould.com.
   Référence : pochette du balado, style jazz kissa (Style Atlas n° 4).
   Échelle de texte 1,333 depuis 18 px : 14 · 18 · 24 · 43 (57 pour le nom, sur la une seulement).
   Espacements : 4 · 8 · 16 · 24 · 32 · 48 · 64. Un seul accent : l'orange Gould, jamais en petit texte (contraste 2,5 : 1 sur crème). */
:root{
  --cream:#EFE4CF; --cream-2:#E4D6BA; --ink:#1A1714; --walnut:#4A2E1F; --amber:#D89B3C; --orange:#D97757;
  --line:rgba(26,23,20,.22);
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
  --t-cap:14px; --t-body:18px; --t-head:24px; --t-title:43px; --t-name:57px;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --dur-instant:100ms;
  --maxw:1120px; --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;font-weight:400}
img{display:block;max-width:100%;height:auto}
a{color:var(--walnut);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-instant)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
sup{font-size:.7em;line-height:0}
.nb{white-space:nowrap}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s3);top:var(--s3);z-index:10;background:var(--cream);padding:var(--s2) var(--s3)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Texte */
.cap{font-size:var(--t-cap);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut);line-height:1.4}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{font-size:clamp(32px,5vw,var(--t-title));line-height:1.1;letter-spacing:-.01em}
h2,h3{font-size:var(--t-head);line-height:1.2}

/* Boutons : un seul primaire par page */
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border-radius:2px;font-size:var(--t-body);font-weight:500;text-decoration:none;transition:background var(--dur-instant),color var(--dur-instant)}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--walnut);color:var(--cream)}
.btn-ghost{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}

/* Barre Gould */
.gbar{background:var(--ink);color:var(--cream)}
.gbar .wrap{display:flex;align-items:center;gap:var(--s3);min-height:64px}
.gbar .logo{display:flex;align-items:center;min-height:44px}
.gbar .logo img{height:36px;width:auto;filter:invert(1)}
.gbar nav{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.gbar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--cream);font-size:var(--t-cap);font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.gbar nav a:hover{color:var(--amber)}
.gbar nav a:last-child:not(.sub){padding-right:0}
.gbar nav a.sub{box-shadow:inset 0 0 0 2px var(--cream);border-radius:2px}
.gbar nav a.sub:hover{background:var(--cream);color:var(--ink)}

/* En-tête de la publication : le nom sur deux lignes est le logo (comme sur la pochette) ; dans le texte courant on écrit TrashTalk */
.mast-in{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--ink)}
.mast .name{display:inline-block;font-family:var(--serif);font-size:var(--t-head);line-height:.95;color:var(--ink);text-decoration:none}
.mast .name span{display:block}
.mast .name::after{content:"";display:block;width:48px;height:4px;background:var(--orange);margin-top:var(--s2)}
.mast .tag{font-size:var(--t-cap);color:var(--walnut);text-align:right;line-height:1.5}
.mast .tag span{display:block}
.mast.une .mast-in{padding-top:var(--s6)}
.mast.une .name{font-size:var(--t-name);line-height:.92}
.mast.une .name::after{width:64px;margin-top:var(--s3)}

/* Page d'un numéro */
.issue{display:grid;grid-template-columns:minmax(0,680px) minmax(0,320px);justify-content:space-between;column-gap:var(--s7);grid-template-areas:"head art" "body side";padding-top:var(--s6);padding-bottom:var(--s7)}
.issue-head{grid-area:head}
.issue-art{grid-area:art;align-self:end;justify-self:end;max-width:260px}
.issue-body{grid-area:body;padding-top:var(--s6)}
.issue-side{grid-area:side;padding-top:var(--s6)}
.issue-head h1{margin-top:var(--s3)}
.cold{font-size:var(--t-head);line-height:1.4;color:var(--walnut);margin-top:var(--s4);max-width:28em}
.sec + .sec{margin-top:var(--s6)}
.sec > .cap{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.sec > .cap::before{content:"";width:24px;height:4px;background:var(--orange)}
.prose p{max-width:66ch}
.prose p + p{margin-top:var(--s3)}
.item + .item{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.item h2{margin-bottom:var(--s3)}
.item p{max-width:66ch}
.item p + p{margin-top:var(--s3)}
.item .k{display:block;font-size:var(--t-cap);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut);margin-bottom:var(--s1)}
.item .read{border-left:4px solid var(--orange);padding-left:var(--s3)}
.num{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-items:start;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:var(--s4) 0}
.num .v{font-family:var(--serif);font-size:var(--t-title);line-height:1;white-space:nowrap}
.card{background:var(--cream-2);padding:var(--s4)}
.card h2{margin-bottom:var(--s2)}
.card .btn{margin-top:var(--s3)}
.keep{list-style:none;counter-reset:k}
.keep li{counter-increment:k;display:grid;grid-template-columns:20px minmax(0,1fr);max-width:66ch}
.keep li + li{margin-top:var(--s3)}
.keep li::before{content:counter(k);font-family:var(--serif);font-size:var(--t-head);line-height:1.15;color:var(--walnut)}
.sign{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--ink)}
.sign .who{font-family:var(--serif);font-size:var(--t-head);line-height:1.2}
.sign .cap{margin-top:var(--s1);text-transform:none;letter-spacing:0;font-weight:400}
.srcs{margin-top:var(--s5)}
.srcs ul{list-style:none;margin-top:var(--s2)}
.srcs li{font-size:var(--t-cap);line-height:1.5;color:var(--walnut);max-width:80ch}
.srcs li + li{margin-top:var(--s1)}

/* Abonnement. Ouvert : bloc sombre, c'est l'action principale. Fermé (.soon) : simple cadre, pour ne pas attirer l'œil sur une impasse. */
.subbox{background:var(--ink);color:var(--cream);padding:var(--s4);position:sticky;top:var(--s4)}
.subbox h2{color:inherit}
.subbox p{margin-top:var(--s2)}
.subbox .cap{color:var(--amber);margin-top:var(--s3)}
.subbox .btn{margin-top:var(--s3);background:var(--orange);color:var(--ink)}
.subbox .btn:hover{background:var(--cream);color:var(--ink)}
.subbox.soon{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.subbox.soon .cap{color:var(--walnut)}

.subform{display:grid;gap:var(--s2);margin-top:var(--s3)}
.subform label{font-size:var(--t-cap);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.subform input[type=email]{width:100%;min-height:48px;padding:0 var(--s3);border:0;border-radius:2px;background:var(--cream);color:var(--ink);font:inherit}
.subform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.subform .btn{justify-content:center;margin-top:var(--s2);border:0;cursor:pointer;font-family:inherit}
.subbox .fine{font-size:var(--t-cap);line-height:1.5;margin-top:var(--s3);color:var(--cream)}
.subbox .fine a{color:var(--cream)}

/* Bloc « En ondes » avec la couverture du balado */
.card.has-cover{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--s4);align-items:start}
.card .cover{width:128px;height:128px}

/* Pages de service : merci, confirmé, confidentialité */
.page{max-width:calc(680px + 2 * var(--gutter));margin-left:max(0px,calc((100% - var(--maxw)) / 2));padding-top:var(--s6);padding-bottom:var(--s7)}
.page h1{margin-bottom:var(--s4)}
.page h2{margin-top:var(--s5);margin-bottom:var(--s2)}
.page .btn{margin-top:var(--s5)}

/* Une */
.lead{display:grid;grid-template-columns:minmax(0,680px) minmax(0,320px);justify-content:space-between;column-gap:var(--s7);align-items:end;padding-top:var(--s6)}
.lead h1{margin-top:var(--s3)}
.lead h1 a{color:var(--ink);text-decoration:none}
.lead h1 a:hover{color:var(--walnut)}
.lead .btn{margin-top:var(--s4)}
.lead .art{justify-self:end;max-width:260px}
.below{display:grid;grid-template-columns:minmax(0,680px) minmax(0,320px);justify-content:space-between;column-gap:var(--s7);align-items:start;padding-top:var(--s7);padding-bottom:var(--s7)}
.below .subbox{position:static}
.past{list-style:none}
.past li{padding:var(--s3) 0;border-top:1px solid var(--line)}
.past a{font-family:var(--serif);font-size:var(--t-head);line-height:1.2;color:var(--ink);text-decoration:none}

/* Pied */
.foot{background:var(--ink);color:var(--cream);font-size:var(--t-cap);line-height:1.5}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);padding-top:var(--s5);padding-bottom:var(--s5)}
.foot a{color:var(--cream);display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--amber)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 var(--s4)}

/* Entrée dans la section (demande d'Alex, 2026-11-05) : fenêtre claire, « Trash » monte dans une diagonale noire,
   « Talk » descend dans l'autre, on lit TrashTalk, puis la fenêtre sort par la gauche et découvre la page.
   Le bord de fuite de la fenêtre est une diagonale à filet noir, de même pente que les bandes : la page n'a jamais l'air tranchée.
   --k = pente, --kx = décalage du bord sur la hauteur de l'écran (100vh × tan de la pente). Pente plus douce en portrait,
   pour que les mots restent dans l'écran. Jouée à l'arrivée dans la section seulement (html.tt-in = on vient d'une autre
   page TrashTalk). Ne bloque aucun clic. */
.tti{--k:14deg;--kx:24.9vh;position:fixed;inset:0;z-index:1000;pointer-events:none;animation:tti-out 500ms cubic-bezier(.4,0,1,1) 1000ms forwards}
.tti-e,.tti-w{position:absolute;top:0;bottom:0;left:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--kx)) 100%,0 100%)}
.tti-e{right:calc(-1 * var(--kx) - 16px);background:var(--ink)}
.tti-w{right:calc(-1 * var(--kx));background:var(--cream)}
.tti-s{position:absolute;top:0;bottom:0;left:0;width:100vw;transform:skewX(calc(-1 * var(--k)))}
.tti-b{position:absolute;top:-25%;height:150%;width:max(37vw,46vmin);background:var(--ink);color:var(--cream)}
.tti-b span{position:absolute;top:50%;font-family:var(--serif);font-size:clamp(44px,max(13vw,15vmin),200px);line-height:1;transform:translateY(-50%) skewX(var(--k))}
.tti-b.a{right:calc(50% + 1px);animation:tti-up 500ms cubic-bezier(.2,0,0,1) both}
.tti-b.a span{right:.16em}
.tti-b.b{left:calc(50% + 1px);animation:tti-down 500ms cubic-bezier(.2,0,0,1) both}
.tti-b.b span{left:.16em}
@keyframes tti-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes tti-down{from{transform:translateY(-100%)}to{transform:none}}
@keyframes tti-out{to{transform:translateX(calc(-100% - var(--kx) - 32px));visibility:hidden}}
@media (orientation:portrait){.tti{--k:8deg;--kx:14.05vh}}
.tt-in .tti{display:none}
@media (prefers-reduced-motion:reduce){.tti{display:none}}

@media (max-width:900px){
  .issue{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "art" "body" "side";padding-top:var(--s5);padding-bottom:var(--s6)}
  .issue-art{justify-self:start;margin-top:var(--s4)}
  .issue-body{padding-top:var(--s5)}
  .issue-side{padding-top:var(--s6)}
  .cold{font-size:var(--t-body);font-weight:500;line-height:1.5}
  .subbox{position:static}
  .lead,.below{grid-template-columns:minmax(0,1fr);row-gap:var(--s5);align-items:start}
  .lead .art{justify-self:start}
  .mast-in{flex-direction:column;align-items:flex-start;gap:var(--s3);padding-top:var(--s4)}
  .mast .tag{text-align:left}
  .mast .tag span + span{display:none}
  .mast.une .mast-in{padding-top:var(--s5)}
  .mast.une .name{font-size:var(--t-title)}
  .num{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .card.has-cover{grid-template-columns:96px minmax(0,1fr);gap:var(--s3)}
  .card .cover{width:96px;height:96px}
  .srcs li + li{margin-top:var(--s3)}
  .gbar .logo img{height:32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}