/* APAR.TV · le thème du journalisme prédictif (z/S SYSTEMS, novembre 2026).
   Habillage · Hanken Grotesk, grotesque libre de la famille de Graphik, en gras oblique comme le logo.
   Texte · IBM Plex Serif 16 px, interligne 1,6, colonne de 566 px (340 px sur iPhone), la lisibilité relevée chez Blast.
   Noir, blanc, un peu de rouge · une couleur par rubrique : l'art en bleu outremer, la mode en rose vif, la société en rouge. */
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-800-italic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-900-italic.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}


/* APAR.TV v0.2 · le magazine. Logo entier en titre de presse, titres « redacted » posés sur l'image,
   un traitement d'image unique pour tout le fonds (noir et blanc, couleur ou duotone, au choix de Zoé). */
:root{
  --noir:#000;--blanc:#fff;--encre:#1c1c1c;--gris:#737373;--filet:#000;--fin:#dcdcdc;--voile:#efefef;
  --art:#1f2bff;--mode:#ff2e88;--societe:#e4002b;--r:var(--noir);--sur-r:#fff;
  --titre:"Hanken",system-ui,sans-serif;--texte:"Plex",Georgia,serif;
  --colonne:566px;--marge:clamp(16px,4vw,48px);--large:1360px;
  --doux:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 16px/1.6 var(--texte);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--noir);outline-offset:3px}
.evitement{position:absolute;left:-9999px}.evitement:focus{left:8px;top:8px;background:var(--noir);color:var(--blanc);padding:8px 12px;z-index:20}

/* ——— Le titre de presse ——— */
.entete{position:relative;z-index:8;background:var(--blanc);text-align:center}
.entete-haut{max-width:var(--large);margin:0 auto;padding:14px var(--marge) 0;display:flex;justify-content:space-between;align-items:center}
.entete-date{margin:0;font:500 13px/1 var(--titre);color:var(--gris)}
.entete-date::first-letter{text-transform:uppercase}
.chercher{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--titre);padding:6px 0;color:var(--noir)}
.titre-de-presse{display:block;margin:10px auto 0;width:clamp(240px,40vw,560px)}
.entete-une .titre-de-presse{width:clamp(270px,52vw,760px);margin-top:4px}
.titre-de-presse img{width:100%;height:auto}
.menu{margin-top:clamp(10px,1.6vw,22px);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);position:relative}
.menu-ligne{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:clamp(18px,4vw,56px)}
.menu-lien{display:block;padding:15px 2px 14px;font:700 16px/1 var(--titre);color:var(--noir);position:relative}
.menu-lien::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--r);transform:scaleX(0);transition:transform .35s var(--doux)}
.menu-entree:hover .menu-lien::after,.menu-entree.ouvert .menu-lien::after,.menu-lien:focus-visible::after{transform:scaleX(1)}
.sous-menu{position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--filet);padding:26px var(--marge) 28px;
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--doux),transform .3s var(--doux),visibility 0s .3s}
.menu-entree:hover>.sous-menu,.menu-entree:focus-within>.sous-menu,.menu-entree.ouvert>.sous-menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.sous-menu ul{list-style:none;margin:0 auto;padding:0;max-width:960px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px}
.sous-menu li a{font:400 italic 19px/1.3 var(--texte);color:var(--noir);border-bottom:1px solid transparent;transition:border-color .2s}
.sous-menu li a:hover{border-bottom-color:var(--noir)}
.sous-menu-annees ul{gap:10px 22px}.sous-menu-annees li a{font:800 italic 20px/1 var(--titre)}
.sous-menu-tout{display:inline-block;margin-top:20px;font:600 13px/1 var(--titre);color:var(--gris)}
.sous-menu-tout:hover{color:var(--noir)}
@media (hover:none){.menu-entree:hover>.sous-menu{visibility:hidden;opacity:0}.menu-entree.ouvert>.sous-menu{visibility:visible;opacity:1}}
@media (max-width:640px){
  .menu-ligne{justify-content:space-between;padding:0 var(--marge);gap:0}
  .menu-lien{font-size:15px;padding:14px 0 13px}
  .sous-menu{padding:20px var(--marge) 22px;text-align:left}
  .sous-menu ul{justify-content:flex-start;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
  .sous-menu-annees ul{grid-template-columns:repeat(4,1fr)}
}

/* La barre repliée · elle descend quand le titre de presse sort de l'écran. */
.barre{position:fixed;left:0;right:0;top:0;z-index:9;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--filet);display:flex;align-items:center;gap:24px;padding:10px var(--marge);transform:translateY(-102%);transition:transform .45s var(--doux)}
.barre.visible{transform:none}
.barre-logo img{height:34px;width:auto}
.barre-menu{display:flex;gap:26px;margin:0 auto;font:700 15px/1 var(--titre)}
.barre-menu a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){.barre-menu{display:none}.barre{justify-content:space-between}.barre-logo img{height:28px}}

/* ——— Le traitement d'image · une seule beauté pour tout le fonds ——— */
.photo{display:block;position:relative;overflow:hidden;background:var(--noir);isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--doux),filter .6s}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.photo-vide{display:block;width:100%;height:100%;background:var(--noir)}
.v-nb .photo img{filter:grayscale(1) contrast(1.18) brightness(.96)}
.carte-lien:hover .photo img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.photo img,.sous-menu,.barre{transition:none}}

/* ——— Le titre « redacted » posé sur l'image ——— */
.titre-sur-image{margin:0;font:900 italic clamp(26px,3vw,40px)/1.16 var(--titre);letter-spacing:-.012em;color:var(--blanc);text-wrap:balance}
.titre-sur-image span{background:var(--noir);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.02em .28em .08em}
.carte-meta{display:flex;gap:12px;align-items:baseline;font:500 13px/1.2 var(--titre);color:var(--gris)}
.rubrique{font-weight:700;color:var(--r)}
.v-nb .rubrique{color:var(--noir)}

/* ——— La une ——— */
.une{padding-bottom:40px}
.ouverture{position:relative;margin-top:0}
.ouverture .photo{height:min(78vh,860px)}
.ouverture-texte{position:absolute;left:0;right:0;bottom:0;padding:0 var(--marge) clamp(22px,4vw,52px);max-width:calc(var(--large) + 2*var(--marge));margin:0 auto}
.ouverture .carte-meta{margin-bottom:14px}
.ouverture .carte-meta>*{background:var(--blanc);color:var(--noir);padding:5px 8px}
.titre-une{font-size:clamp(32px,5.6vw,86px);line-height:1.12;max-width:1100px}
.titre-une{animation:redacted .9s var(--doux) both .1s}
@keyframes redacted{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.titre-une{animation:none}}
@media (max-width:640px){.ouverture .photo{height:auto;aspect-ratio:4/5}.titre-une{font-size:clamp(28px,8.4vw,40px)}}

.trois{max-width:var(--large);margin:0 auto;padding:clamp(28px,4vw,56px) var(--marge);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.carte .photo{aspect-ratio:4/5;margin-bottom:14px}
.carte-titre{font:800 clamp(18px,1.6vw,22px)/1.22 var(--titre);color:var(--noir);margin:8px 0 0;letter-spacing:-.006em}
.carte-lien:hover .carte-titre{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:800px){.trois{grid-template-columns:1fr 1fr}.trois>:first-child{grid-column:span 2}.trois>:first-child .photo{aspect-ratio:16/10}}
@media (max-width:520px){.trois{grid-template-columns:1fr}.trois>:first-child{grid-column:auto}}

/* La phrase du jour */
.pdj{max-width:980px;margin:clamp(24px,4vw,56px) auto;padding:clamp(36px,5vw,64px) var(--marge);text-align:center;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.pdj-mot{font:600 13px/1 var(--titre);color:var(--gris);margin-bottom:22px}
.pdj blockquote{margin:0;font:italic 400 clamp(24px,3.2vw,42px)/1.3 var(--texte);color:var(--noir);text-wrap:balance}
.pdj-par{margin:20px 0 0;font:600 14px/1.3 var(--titre)}

/* Les rubriques sur la une */
.rubrique-bloc,.dix-ans,.a-lire{max-width:var(--large);margin:0 auto;padding:clamp(30px,4vw,60px) var(--marge) 0}
.bloc-tete{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--filet);padding-bottom:12px;margin-bottom:clamp(20px,3vw,36px)}
.bloc-tete h2{margin:0;font:900 italic clamp(44px,7.2vw,112px)/.9 var(--titre);letter-spacing:-.025em;color:var(--noir)}
.bloc-tout{font:600 14px/1 var(--titre);padding-bottom:6px}
.bloc-tout:hover{text-decoration:underline;text-underline-offset:4px}
.bloc-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px)}
.bloc-grand{position:relative}.bloc-grand .photo{aspect-ratio:5/4}
.bloc-grand .titre-sur-image{position:absolute;left:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);font-size:clamp(24px,2.8vw,42px)}
.bloc-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bloc-liste li{border-top:1px solid var(--fin);padding:16px 0}.bloc-liste li:first-child{border-top:0;padding-top:0}
.bloc-liste .carte-lien{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start}
.bloc-liste .photo{aspect-ratio:1}
.bloc-liste time{display:block;font:500 12px/1 var(--titre);color:var(--gris);margin-bottom:6px}
.bloc-liste strong{font:800 18px/1.24 var(--titre);color:var(--noir)}
.bloc-liste .carte-lien:hover strong{text-decoration:underline;text-underline-offset:4px}
@media (max-width:800px){.bloc-grille{grid-template-columns:1fr}.bloc-liste .carte-lien{grid-template-columns:84px 1fr}}

/* Il y a dix ans · défilement accroché */
.fleches{display:flex;gap:6px;padding-bottom:4px}
.fleches button{width:40px;height:40px;border:1px solid var(--filet);background:var(--blanc);cursor:pointer;font:600 18px/1 var(--titre)}
.fleches button:hover{background:var(--noir);color:var(--blanc)}
.piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,calc((100% - 3*28px)/4));gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.piste::-webkit-scrollbar{display:none}.piste>*{scroll-snap-align:start}
@media (max-width:640px){.piste{grid-auto-columns:76%;gap:16px}.fleches{display:none}}

/* Les archives */
.annees{max-width:var(--large);margin:0 auto;padding:clamp(36px,5vw,72px) var(--marge) 0;text-align:center}
.annees-titre{margin:0 0 20px;font:600 13px/1 var(--titre);color:var(--gris)}
.annees ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px}
.annees li a{font:900 italic clamp(26px,3vw,40px)/1.1 var(--titre);color:var(--noir);letter-spacing:-.02em;transition:opacity .2s}
.annees ol:hover a{opacity:.35}.annees ol a:hover{opacity:1}

/* ——— Le billet ——— */
.billet-ouverture{position:relative}
.billet-ouverture .photo{height:min(82vh,900px)}
.billet-ouverture-texte{position:absolute;left:0;right:0;bottom:0;padding:0 var(--marge) clamp(22px,4vw,56px);max-width:calc(1100px + 2*var(--marge));margin:0 auto}
.billet-ouverture .carte-meta{margin-bottom:14px}
.billet-ouverture .carte-meta>*{background:var(--blanc);color:var(--noir);padding:5px 8px}
.titre-billet{font-size:clamp(30px,5vw,76px);line-height:1.13}
@media (max-width:640px){.billet-ouverture .photo{height:auto;aspect-ratio:4/5}.titre-billet{font-size:clamp(27px,8vw,38px)}}
.billet-tete{max-width:calc(900px + 2*var(--marge));margin:0 auto;padding:clamp(36px,5vw,72px) var(--marge) 0}
.billet-titre{font:900 italic clamp(34px,5.4vw,80px)/1.02 var(--titre);color:var(--noir);margin:14px 0 0;letter-spacing:-.02em;text-wrap:balance}
.billet-colonne,.billet-corps{max-width:calc(var(--colonne) + 2*var(--marge));margin:0 auto;padding:0 var(--marge)}
.billet-chapo{font:400 clamp(20px,2vw,24px)/1.45 var(--texte);color:var(--noir);margin:clamp(30px,4vw,48px) 0 0}
.signature{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 14px/1.4 var(--titre);color:var(--gris);margin:22px 0 0;padding-bottom:22px;border-bottom:1px solid var(--fin)}
.signature a{color:var(--noir);font-weight:700}
.legende-une{font:500 13px/1.4 var(--titre);color:var(--gris);margin:12px 0 0}
.billet-corps{margin-top:34px}
.gh-content>*{margin:0 0 1.25em}
.gh-content p,.gh-content li{font-size:16px;line-height:1.6}
.gh-content>p:first-of-type::first-letter{font:900 italic 4.6em/.82 var(--titre);float:left;margin:.06em .1em 0 0;color:var(--noir)}
.gh-content h2,.gh-content h3{font:800 26px/1.2 var(--titre);color:var(--noir);margin:1.9em 0 .6em;letter-spacing:-.01em}
.gh-content h3{font-size:21px}
.gh-content a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gh-content blockquote{margin:1.8em 0;padding:0;font:italic 400 clamp(22px,2.4vw,28px)/1.4 var(--texte);color:var(--noir);border:0}
.gh-content blockquote::before{content:"";display:block;width:48px;height:3px;background:var(--r);margin-bottom:16px}
.gh-content figcaption{font:500 13px/1.4 var(--titre);color:var(--gris);margin-top:10px;text-align:left}
.gh-content img{margin:0 auto}
.gh-content iframe,.gh-content video{max-width:100%}
.gh-content .kg-embed-card iframe{width:100%!important;aspect-ratio:16/9;height:auto!important}
.gh-content .kg-width-wide{width:min(1100px,100vw - 2*var(--marge));max-width:none;margin-left:50%;transform:translateX(-50%)}
.gh-content .kg-width-full{width:100vw;max-width:none;margin-left:50%;transform:translateX(-50%)}
.gh-content .kg-width-full img{width:100%}
.gh-content .kg-gallery-container{width:min(1100px,100vw - 2*var(--marge));margin-left:50%;transform:translateX(-50%)}
.billet-etiquettes{max-width:calc(var(--colonne) + 2*var(--marge));margin:34px auto 0;padding:0 var(--marge);display:flex;flex-wrap:wrap;gap:8px 16px}
.billet-etiquettes a{font:500 13px/1 var(--titre);color:var(--gris)}
.billet-etiquettes a::before{content:"#"}
.billet-etiquettes a:hover{color:var(--noir)}

/* Le ciel du sujet · discret, à la couleur de la rubrique */
.ciel{max-width:calc(var(--colonne) + 2*var(--marge));margin:48px auto 0;padding:0 var(--marge);display:grid;grid-template-columns:44px 1fr;gap:18px}
.ciel>div{border-top:3px solid var(--r);padding-top:16px}
.ciel-icone{width:44px;height:44px;margin-top:19px}
.ciel-titre{font:900 italic 22px/1 var(--titre);color:var(--noir);margin:0 0 10px}
.ciel-lignes p,.ciel-texte{font:400 16px/1.6 var(--texte);margin:0 0 6px}
.ciel-porte{margin:14px 0 0}
.ciel-porte a{display:inline-block;font:700 15px/1 var(--titre);color:var(--blanc);background:var(--noir);padding:14px 20px;transition:background .25s}
.ciel-porte a:hover{background:var(--r)}
.v-nb .ciel-porte a:hover{background:#333}

/* La porte des billets réservés */
.porte-abonnes{border-top:3px solid var(--noir);padding:22px 0 0;margin:8px 0 0}
.porte-titre{font:900 italic 24px/1.15 var(--titre);color:var(--noir);margin:0 0 8px}
.porte-texte{margin:0 0 18px}
.porte-boutons{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.porte-boutons a{font:700 15px/1 var(--titre);background:var(--noir);color:var(--blanc);padding:14px 20px;text-decoration:none}
.porte-boutons a.porte-second{background:var(--blanc);color:var(--noir);border:1px solid var(--filet)}
.a-lire{margin-top:40px}.a-lire .trois{padding-left:0;padding-right:0}
.a-lire .bloc-tete h2{font-size:clamp(30px,4vw,54px)}

/* ——— Les listes ——— */
.liste{max-width:var(--large);margin:0 auto;padding:0 var(--marge) 56px}
.liste-tete{border-bottom:1px solid var(--filet);padding:clamp(30px,4vw,60px) 0 18px;text-align:center}
.liste-titre{font:900 italic clamp(48px,9vw,150px)/.9 var(--titre);color:var(--noir);margin:0;letter-spacing:-.03em}
.liste-chapo{font:italic 400 19px/1.5 var(--texte);max-width:var(--colonne);margin:16px auto 0}
.mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(20px,3vw,44px);padding:clamp(28px,4vw,56px) 0}
@media (max-width:900px){.mosaique{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mosaique{grid-template-columns:1fr}}
.pagination{display:flex;justify-content:center;align-items:center;gap:22px;margin:16px 0 0;font:600 14px/1 var(--titre);color:var(--gris)}
.pagination a{color:var(--noir);border:1px solid var(--filet);padding:14px 18px}
.pagination a:hover{background:var(--noir);color:var(--blanc)}

/* ——— Le pied ——— */
.pied{background:var(--noir);color:var(--blanc);margin-top:clamp(56px,7vw,110px);padding:clamp(48px,6vw,90px) var(--marge) 40px;text-align:center}
.pied-logo{display:block;width:clamp(220px,36vw,480px);margin:0 auto}
.pied-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin:36px 0 28px;font:700 15px/1 var(--titre)}
.pied-menu a:hover{text-decoration:underline;text-underline-offset:4px}
.pied-mention{font:400 14px/1.7 var(--texte);color:#a8a8a8;margin:0}

/* ——— Le téléphone · le bandeau à lignes (décision de Zoé, 5 nov. 2026, 16 h 45) ———
   Le logo entier à gauche dans sa case, Chercher à droite, les rubriques en cases séparées par des filets. */
@media (max-width:700px){
  .entete{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo chercher" "menu menu";position:sticky;top:0;border-bottom:1px solid var(--filet);text-align:left}
  .entete-haut{display:contents}
  .entete-date{display:none}
  .entete .chercher{grid-area:chercher;border-left:1px solid var(--filet);padding:0 16px;gap:6px}
  .titre-de-presse,.entete-une .titre-de-presse{grid-area:logo;width:auto;margin:0;padding:10px var(--marge)}
  .titre-de-presse img{height:40px;width:auto}
  .menu{grid-area:menu;margin:0;border-bottom:0}
  .menu-ligne{justify-content:flex-start;padding:0;gap:0;overflow-x:auto;scrollbar-width:none}
  .menu-ligne::-webkit-scrollbar{display:none}
  .menu-entree{border-right:1px solid var(--filet);flex:none}
  .menu-lien{padding:14px 16px 13px;font-size:15px}
  .menu-lien::after{bottom:0}
  .menu-entree{position:static}
  .barre{display:none}
}

/* Les sites dans le site · discrets, dans le sous-menu Archives et au pied */
.sous-menu-fonds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--fin);font:500 13px/1.2 var(--titre)}
.sous-menu-fonds a{color:var(--gris)}.sous-menu-fonds a:hover{color:var(--noir)}
.pied-fonds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 26px;font:500 13px/1.2 var(--titre)}
.pied-fonds a{color:#8a8a8a}.pied-fonds a:hover{color:var(--blanc)}

/* ——— GABARIT 2 · COULEUR · la DA mode qui pète ——— */
.v-couleur{--art:#1f2bff;--mode:#ff2e88;--societe:#ff5a00} /* couleurs pop qui pètent, façon Interview (Zoé, 17 h 06, qui revient sur les tons sourds de 16 h 58) */
.v-couleur .r-art{--r:var(--art);--sur-r:#fff}.v-couleur .r-mode,.v-couleur .r-not-vogue{--r:var(--mode);--sur-r:#000}.v-couleur .r-societe{--r:var(--societe);--sur-r:#000}
.v-couleur .photo img{filter:contrast(1.06) saturate(1.12)}
.v-couleur .photo::after{opacity:.08}
.v-couleur .rubrique{color:var(--r)}
.v-couleur .menu-entree.r-art .menu-lien::after{background:var(--art)}.v-couleur .menu-entree.r-mode .menu-lien::after{background:var(--mode)}.v-couleur .menu-entree.r-societe .menu-lien::after{background:var(--societe)}
.face-a-face{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:min(82vh,860px)}
.face-image .photo{height:100%}
.face-aplat{background:var(--r);color:var(--sur-r);padding:clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.face-aplat .carte-meta{color:inherit;opacity:.85}
.face-titre{margin:0;font:900 italic clamp(34px,4.6vw,76px)/1.02 var(--titre);letter-spacing:-.02em;text-wrap:balance}
.face-chapo{margin:0;font:400 18px/1.5 var(--texte);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.face-lire{align-self:flex-start;font:800 15px/1 var(--titre);border:2px solid currentColor;padding:12px 18px;transition:background .25s,color .25s}
.face-aplat:hover .face-lire{background:var(--sur-r);color:var(--r)}
@media (max-width:800px){.face-a-face{grid-template-columns:1fr;min-height:0}.face-image .photo{height:auto;aspect-ratio:4/5}}
.aplats{display:grid;grid-template-columns:repeat(3,1fr)}
.aplat{background:var(--r);color:var(--sur-r);padding:clamp(22px,3vw,40px)}
.aplat h2{margin:0 0 18px;font:900 italic clamp(40px,5vw,72px)/.95 var(--titre);letter-spacing:-.02em}
.aplat-image .photo{aspect-ratio:4/3;margin-bottom:18px}
.aplat ol{margin:0;padding:0 0 0 20px;font:700 17px/1.3 var(--titre)}.aplat li{margin:0 0 12px}.aplat li a:hover{text-decoration:underline}
@media (max-width:800px){.aplats{grid-template-columns:1fr}}
.v-couleur .pdj{background:var(--noir);color:var(--blanc);border:0;max-width:none;margin:0;padding:clamp(48px,7vw,110px) var(--marge)}
.v-couleur .pdj blockquote{color:var(--blanc);max-width:980px;margin:0 auto}
.v-couleur .pdj-mot{color:var(--mode)}.v-couleur .pdj-par{color:#bbb}
.mosaique-couleur{max-width:var(--large);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.v-couleur .mosaique .carte{border-top:6px solid var(--r);padding-top:0}
.v-couleur .carte .photo{margin-top:0}
.v-couleur .bloc-tete h2 a{color:var(--noir)}
.v-couleur .liste-titre{color:var(--r)}
.v-couleur .ciel>div{border-top:6px solid var(--r)}
.v-couleur .ciel-porte a:hover{background:var(--r);color:var(--sur-r)}

/* ——— GABARIT 3 · INTERVIEW · d'après le magazine de Warhol ——— */
.v-interview .photo img{filter:contrast(1.05) saturate(1.04)}
.v-interview .photo::after{opacity:.06}
.couverture{position:relative}
.couverture .photo{height:min(92vh,1000px)}
.couverture .photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62));pointer-events:none}
.couverture-texte{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 var(--marge) clamp(28px,5vw,72px);color:var(--blanc);max-width:calc(var(--large) + 2*var(--marge));margin:0 auto}
.couverture .carte-meta{color:rgba(255,255,255,.85);margin-bottom:12px}
.couverture-titre{margin:0;font:900 clamp(40px,7.4vw,124px)/.94 var(--titre);letter-spacing:-.035em;text-wrap:balance;max-width:1200px}
@media (max-width:640px){.couverture .photo{height:auto;aspect-ratio:3/4}.couverture-titre{font-size:clamp(34px,10.5vw,52px)}}
.portraits{max-width:var(--large);margin:0 auto;padding:clamp(36px,5vw,80px) var(--marge) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px) clamp(20px,3vw,48px)}
.portrait .photo{aspect-ratio:4/5;margin-bottom:16px}
.portrait:nth-child(3n){grid-column:span 2}.portrait:nth-child(3n) .photo{aspect-ratio:16/9}
.portrait-titre{margin:10px 0 0;font:900 clamp(26px,3vw,46px)/1.02 var(--titre);letter-spacing:-.025em;color:var(--noir);text-wrap:balance}
.portrait .carte-lien:hover .portrait-titre{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media (max-width:700px){.portraits{grid-template-columns:1fr}.portrait:nth-child(3n){grid-column:auto}.portrait:nth-child(3n) .photo{aspect-ratio:4/5}}
.v-interview .pdj{border:0;text-align:left;max-width:var(--large);padding:clamp(48px,7vw,110px) var(--marge)}
.v-interview .pdj blockquote{font-size:clamp(30px,4.6vw,68px);line-height:1.12;max-width:1100px}
.index-rubriques{max-width:var(--large);margin:0 auto;padding:0 var(--marge);display:flex;flex-wrap:wrap;gap:0 clamp(20px,4vw,60px);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.index-rubriques a{font:900 clamp(56px,11vw,180px)/1 var(--titre);letter-spacing:-.04em;color:var(--noir);transition:color .3s}
.index-rubriques a:hover{color:transparent;-webkit-text-stroke:2px var(--noir)}
.v-interview .une>.mosaique{max-width:var(--large);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.v-interview .carte-titre{font-weight:900;letter-spacing:-.015em}
.v-interview .bloc-tete h2,.v-interview .liste-titre{font-style:normal;letter-spacing:-.04em}
.v-interview .titre-sur-image span{background:none;padding:0}
.v-interview .billet-ouverture .photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65));pointer-events:none}
.v-interview .billet-ouverture-texte{z-index:2}
.v-interview .titre-billet{font-style:normal;font-size:clamp(36px,6.4vw,104px);line-height:.96;letter-spacing:-.035em}
.v-interview .billet-ouverture .carte-meta>*{background:none;color:rgba(255,255,255,.85);padding:0}

/* ——— Corrections du jury extérieur (5 nov. 2026, 17 h) ———
   1 · Les billets de 2026 portent les styles en ligne de l'ancien gabarit sombre de zoesagan.com (texte crème, lettrines roses,
   surtitres jaunes) : sur le blanc d'APAR, le texte devenait invisible. Le thème reprend la main sur la couleur et le fond. */
.gh-content [style*="color"],.gh-content [style*="background"]{color:inherit!important;background:none!important;background-color:transparent!important;-webkit-text-fill-color:currentColor!important}
.gh-content{color:#111}
.gh-content [style*="font-family"]{font-family:inherit!important}
.gh-content [style*="font-size"]:not(h1):not(h2):not(h3){font-size:inherit!important}
/* 2 · Les commentaires Ghost, habillés à la maison (bouton noir, angles droits, notre grotesque). */
#ghost-comments-root,.gh-comments{--gh-accent-color:#000}
#ghost-comments-root{max-width:calc(var(--colonne) + 2*var(--marge));margin:40px auto 0;padding:0 var(--marge)}
/* 3 · Téléphone · les quatre rubriques remplissent le bandeau, sans case vide. */
@media (max-width:700px){.menu-ligne{display:grid;grid-template-columns:repeat(4,1fr)}.menu-entree:last-child{border-right:0}.menu-lien{text-align:center}}
/* 4 · « Il y a dix ans » · quatre cartes entières sur ordinateur, flèches pleines. */
@media (min-width:701px){.piste{grid-auto-columns:calc((100% - 3*28px)/4)}}
.fleches button{background:var(--noir);color:var(--blanc)}.fleches button:hover{background:var(--blanc);color:var(--noir)}

/* Version Couleur · l'article garde le titre en bandes noires sur la photo en couleur, étiquettes sur fond blanc (Zoé, 16 h 55).
   Les pages rubriques prennent les portraits immenses d'Interview (QCM de 16 h 58). */
.v-couleur .liste .mosaique{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px) clamp(20px,3vw,48px)}
.v-couleur .liste .mosaique .carte{border-top:0}
.v-couleur .liste .mosaique .carte:nth-child(3n+1){grid-column:span 2}
.v-couleur .liste .mosaique .carte:nth-child(3n+1) .photo{aspect-ratio:16/9}
.v-couleur .liste .carte .photo{aspect-ratio:4/5}
.v-couleur .liste .carte-titre{font:900 clamp(24px,2.8vw,44px)/1.04 var(--titre);letter-spacing:-.025em}
.v-couleur .liste-tete{background:var(--r);color:var(--sur-r);border:0;margin:0 calc(-1*var(--marge));padding:clamp(40px,6vw,96px) var(--marge) clamp(24px,3vw,40px)}
.v-couleur .liste-titre{color:inherit;font-style:normal;letter-spacing:-.04em}
.v-couleur .liste-chapo{color:inherit}
@media (max-width:700px){.v-couleur .liste .mosaique{grid-template-columns:1fr}.v-couleur .liste .mosaique .carte:nth-child(3n+1){grid-column:auto}.v-couleur .liste .mosaique .carte:nth-child(3n+1) .photo{aspect-ratio:4/5}}
/* L'étiquette de rubrique posée sur l'image · pavé à la couleur de la rubrique, jamais du rose sur blanc (contraste). */
.v-couleur .billet-ouverture .carte-meta .rubrique,.v-couleur .ouverture .carte-meta .rubrique{background:var(--r);color:var(--sur-r)}
.v-nb .billet-ouverture .carte-meta .rubrique,.v-interview .billet-ouverture .carte-meta .rubrique{color:inherit}

/* ——— LA PAGE RUBRIQUE (v0.5) · simple, mais beau, et vivant ———
   Le nom de la rubrique se dévoile lettre à lettre, le ruban des sous-rubriques défile, et chaque photo s'ouvre
   quand elle entre à l'écran (animations liées au défilement, natives du navigateur, coupées si l'on demande moins d'animation). */
.rubrique-page{padding-bottom:40px}
.rp-tete{background:var(--r);color:var(--sur-r,#fff);padding:clamp(48px,8vw,120px) var(--marge) 0;text-align:center;overflow:hidden}
.v-nb .rp-tete{background:var(--noir);color:var(--blanc)}
.rp-titre{margin:0;font:900 clamp(64px,15vw,240px)/.86 var(--titre);letter-spacing:-.05em}
.rp-titre .l{display:inline-block;animation:lettre .9s var(--doux) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes lettre{from{opacity:0;transform:translateY(.4em) rotate(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.rp-chapo{margin:18px auto 0;max-width:620px;font:italic 400 clamp(18px,1.8vw,22px)/1.5 var(--texte)}
.ruban{margin:clamp(32px,5vw,56px) calc(-1*var(--marge)) 0;border-top:1px solid currentColor;overflow:hidden;white-space:nowrap}
.ruban-piste{display:inline-flex;animation:ruban 38s linear infinite}
.ruban:hover .ruban-piste{animation-play-state:paused}
.ruban a,.ruban span>a{display:inline-block;padding:16px 26px;font:700 italic 18px/1 var(--titre);border-right:1px solid currentColor}
.ruban a:hover{background:var(--sur-r,#fff);color:var(--r)}
.v-nb .ruban a:hover{background:var(--blanc);color:var(--noir)}
.ruban span{display:inline-flex}
@keyframes ruban{to{transform:translateX(-50%)}}
.rp-grille{max-width:var(--large);margin:0 auto;padding:clamp(32px,5vw,72px) var(--marge) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.rp-grille .carte-image:nth-child(5n+1){grid-column:span 2}
.carte-image{position:relative}
.carte-image .photo{aspect-ratio:4/5}
.rp-grille .carte-image:nth-child(5n+1) .photo{aspect-ratio:16/8}
.carte-image-texte{position:absolute;left:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px)}
.carte-image .carte-meta{margin-bottom:10px}
.carte-image .carte-meta>*{background:var(--blanc);color:var(--noir);padding:5px 8px}
.carte-image .titre-sur-image{font-size:clamp(22px,2.4vw,38px)}
.rp-grille .carte-image:nth-child(5n+1) .titre-sur-image{font-size:clamp(28px,3.6vw,58px)}
@media (max-width:700px){.rp-grille{grid-template-columns:1fr}.rp-grille .carte-image:nth-child(5n+1){grid-column:auto}.rp-grille .carte-image:nth-child(5n+1) .photo,.carte-image .photo{aspect-ratio:4/5}.carte-image .titre-sur-image{font-size:clamp(24px,7vw,32px)}}
@supports (animation-timeline:view()){
  /* La première carte est déjà là au chargement · elle ne s'anime pas, les suivantes s'ouvrent en entrant à l'écran. */
  .carte-image:not(:first-child) .photo{animation:ouverture linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .carte-image:not(:first-child) .titre-sur-image span{animation:bande linear both;animation-timeline:view();animation-range:entry 45% entry 100%}
  .carte-image:first-child .titre-sur-image span{animation:redacted .9s var(--doux) both .5s}
  @keyframes ouverture{from{clip-path:inset(10% 6% 10% 6%);transform:scale(1.04)}to{clip-path:inset(0);transform:none}}
  @keyframes bande{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
}
@media (prefers-reduced-motion:reduce){.rp-titre .l,.ruban-piste,.carte-image .photo,.carte-image .titre-sur-image span{animation:none!important}}

/* Téléphone · hors de la une, les titres se posent en bandes sur la photo (Zoé, 17 h 06). */
@media (max-width:700px){
  .une .mosaique .carte,.dix-ans .carte{position:relative}
  .une .mosaique .carte .photo{aspect-ratio:4/5;margin:0}
  .une .mosaique .carte .carte-meta{position:absolute;left:14px;top:14px}
  .une .mosaique .carte .carte-meta>*{background:var(--blanc);color:var(--noir);padding:4px 7px}
  .une .mosaique .carte .carte-titre{position:absolute;left:14px;right:14px;bottom:14px;margin:0;font:900 italic 24px/1.18 var(--titre);color:var(--blanc)}
  .une .mosaique .carte .carte-titre span{background:var(--noir);padding:.02em .28em .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}

.ciel-sig{font:600 13px/1 var(--titre);color:var(--gris);font-style:normal}

/* Datés par le Web · la date d'un billet établie par sa première capture */
.date-web{margin:22px 0 0;padding:16px 18px;border-left:4px solid var(--noir);background:var(--voile);font:400 15px/1.55 var(--titre)}
.date-web p{margin:0 0 6px}.date-web p:last-child{margin:0}
.date-web-titre a{font-weight:800;color:var(--noir);text-decoration:none}
.date-web-preuve{color:var(--noir);font-weight:700}

/* Visuels générés de 2026 · la carte devient un aplat de la couleur de sa rubrique, le titre en bandes noires */
.carte-image.sans-photo .carte-lien{display:flex;align-items:flex-end;min-height:clamp(260px,40vw,460px);background:var(--r);padding:clamp(18px,3vw,32px)}
.carte-image.sans-photo .carte-image-texte{position:static}

/* La fresque · le zapping géant du fonds derrière les titres de rubrique, des archives et de l'À propos */
.a-fresque{position:relative;isolation:isolate;overflow:hidden}
.fresque{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:4px;opacity:0;transition:opacity 1.2s var(--doux)}
.fresque.prete{opacity:1}
.fresque::after{content:"";position:absolute;inset:0;background:var(--r,#000);mix-blend-mode:multiply;opacity:.78}
.v-nb .fresque::after,.liste-tete .fresque::after{background:#000;mix-blend-mode:normal;opacity:.62}
.fresque-rang{display:flex;gap:4px;width:max-content;animation:fresque var(--duree,60s) linear infinite}
.fresque-rang.inverse{animation-direction:reverse}
.fresque img{width:clamp(56px,6vw,92px);aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.15);flex:none}
.liste-tete .fresque img{filter:grayscale(.2) contrast(1.1)}
.fresque img.flash{animation:flash .5s ease-out}
@keyframes fresque{to{transform:translateX(-50%)}}
@keyframes flash{from{filter:none;transform:scale(1.25)}to{filter:grayscale(1) contrast(1.15);transform:none}}
.a-fresque .rp-titre,.a-fresque .liste-titre,.a-fresque .rp-chapo,.a-fresque .liste-chapo{position:relative;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.liste-tete.a-fresque{color:#fff;background:#000;border:0}
.liste-tete.a-fresque .liste-titre{color:#fff}
.v-couleur .rp-tete.a-fresque .rp-titre{color:#fff}

/* Le bandeau qui défile · les derniers titres, sans fin */
.defile{display:flex;align-items:stretch;background:#000;color:#fff;font:700 15px/1 var(--titre);border-bottom:1px solid #000;min-height:44px}
.defile:empty{display:none}
.defile-etiquette{flex:none;display:flex;align-items:center;padding:0 14px;background:var(--r,#e4002b);color:var(--sur-r,#fff);text-transform:none;letter-spacing:.02em}
.liste .defile-etiquette,.billet-page .defile-etiquette{background:#e4002b;color:#fff}
.defile-piste{overflow:hidden;flex:1;display:flex;align-items:center}
.defile-ruban{display:flex;gap:48px;width:max-content;animation:fresque 80s linear infinite;padding-left:24px}
.defile-ruban:hover{animation-play-state:paused}
.defile a{color:#fff;text-decoration:none;white-space:nowrap}
.defile a:hover{color:var(--r,#ff2e88);text-decoration:underline}

/* Le survol · la photo s'approche, le titre prend la couleur de sa rubrique */
.carte-lien .photo,.carte-lien img{transition:transform .7s var(--doux),filter .7s var(--doux)}
.carte-lien{overflow:hidden}
@media (hover:hover){
  .carte-lien:hover .photo img,.carte-lien:hover>img{transform:scale(1.06)}
  .carte-image .carte-lien:hover .titre-sur-image span{background:var(--r,#000);color:var(--sur-r,#fff)}
  .carte .carte-lien:hover .carte-titre span{color:var(--r,#e4002b)}
  .menu-lien:hover{color:var(--r,#e4002b)}
}
.titre-sur-image span,.carte-titre span{transition:background .35s ease,color .35s ease}

/* L'À propos · la lecture qui bouge, chaque paragraphe entre en scène au défilement */
.apropos-tete{margin:0 calc(-1*var(--marge,16px)) 0}
.page-a-propos .gh-content>*{animation:entree linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.page-a-propos .gh-content blockquote{font:900 italic clamp(28px,4vw,52px)/1.08 var(--titre);border:0;padding:0;margin:48px 0;letter-spacing:-.02em}
@keyframes entree{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fresque-rang,.defile-ruban,.fresque img.flash,.page-a-propos .gh-content>*{animation:none!important}.carte-lien:hover .photo img{transform:none}}

/* ———————————————————————————————————————————————————————————————————————————————
   0.6.0 · LA DA LUXE (5 novembre 2026, au soir, sur les retours de Zoé)
   · le titre SURLIGNÉ au marqueur, à la couleur de la rubrique, jamais de bande noire ;
   · la pré-DA validée de Self-Defense pour le billet : ligne en petites capitales, titre italique, crochets en couleur ;
   · de vraies photos seulement : un visuel de 2026 encore à vérifier laisse place à la typographie ;
   · la couleur pop en accent (titres, filets, survols), plus d'aplats pleins ni de cases vides.
   ——————————————————————————————————————————————————————————————————————————————— */
:root{--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;--mode:#ff2e88;--art:#1f2bff;--societe:#ff5a00}
.r-art{--r:var(--art)}.r-mode{--r:var(--mode)}.r-societe{--r:var(--societe)}
.surligne{--hl:var(--r);background:linear-gradient(104deg,transparent .6%,color-mix(in srgb,var(--hl,#ff2e88) 70%,transparent) 1.8%,color-mix(in srgb,var(--hl,#ff2e88) 70%,transparent) 97.5%,transparent 99%) no-repeat 0 92%/0% 40%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;transition:background-size 1.2s cubic-bezier(.65,0,.35,1) .15s}
.surligne.on{background-size:100% 40%}
.crochet{color:var(--r);font-style:italic}
@media (prefers-reduced-motion:reduce){.surligne{transition:none;background-size:100% 40%}}

/* Le billet */
.billet6{padding-bottom:clamp(30px,5vw,70px)}
.b6-tete{max-width:calc(980px + 2*var(--marge));margin:0 auto;padding:clamp(34px,6vw,92px) var(--marge) 0;text-align:left}
.b6-ligne,.c6-ligne,.b6-signature{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0;font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#555}
.b6-ligne a{color:var(--noir);font-weight:700}
.b6-ligne a:hover{color:var(--r)}
.b6-titre{margin:22px 0 0;font:900 italic clamp(36px,6.2vw,96px)/1.02 var(--titre);letter-spacing:-.028em;color:var(--noir);text-wrap:balance}
.b6-chapo{max-width:34ch;margin:clamp(22px,3vw,36px) 0 0;font:400 italic clamp(20px,2.1vw,27px)/1.42 var(--texte);color:var(--encre)}
.b6-photo{max-width:1180px;margin:clamp(34px,5vw,64px) auto 0;padding:0 var(--marge)}
.b6-photo .photo{display:block;overflow:hidden;background:var(--voile)}
.b6-photo img{width:100%;height:auto;max-height:86vh;object-fit:cover;transform:scale(1.04);transition:transform 2.4s var(--doux)}
.b6-photo.on img{transform:none}
.b6-photo figcaption{margin-top:10px;font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:#666}
.b6-signature{max-width:calc(var(--colonne) + 2*var(--marge));margin:clamp(30px,4vw,48px) auto 0;padding:18px var(--marge) 0;border-top:1px solid var(--noir)}
.b6-signature a{color:var(--noir);font-weight:700}
.b6-corps{font-size:19px;line-height:1.7}
.b6-corps>p:first-of-type::first-letter{float:left;font:900 italic 5.2em/.78 var(--titre);margin:.06em .1em 0 0;color:var(--r)}
.b6-alire{max-width:var(--large);margin:0 auto;padding:clamp(40px,6vw,90px) var(--marge)}
.b6-alire-tete{border-top:1px solid var(--noir);padding-top:16px;margin-bottom:28px}
.b6-alire-tete h2{margin:8px 0 0;font:900 italic clamp(28px,3.4vw,48px)/1 var(--titre);letter-spacing:-.02em}

/* Les cartes */
.c6{position:relative}
.c6-lien{display:block;color:var(--noir)}
.c6 .photo{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--voile);margin-bottom:14px}
.c6 .photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.19,1,.22,1),filter .8s}
.c6-titre{margin:10px 0 0;font:800 clamp(19px,1.7vw,24px)/1.18 var(--titre);letter-spacing:-.01em;text-wrap:balance}
.c6-titre>span{background:linear-gradient(90deg,var(--r) 50%,var(--noir) 50%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .7s cubic-bezier(.65,0,.35,1)}
.c6-titre .crochet{-webkit-text-fill-color:var(--r)}
.c6-ligne .rubrique{color:var(--r);font-weight:700}
.c6-typo .c6-lien{border-top:3px solid var(--r);padding-top:16px;min-height:100%}
.c6-typo .c6-titre{font:900 italic clamp(26px,2.6vw,40px)/1.04 var(--titre);letter-spacing:-.025em}
.c6-chapo{margin:14px 0 0;font:400 17px/1.55 var(--texte);color:#333;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.c6-lire{display:inline-block;margin-top:14px;font:700 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid var(--r);padding-bottom:4px}
@media (hover:hover){.c6-lien:hover .photo img{transform:scale(1.06)}.c6-lien:hover .c6-titre>span{background-position:0 0}}

/* La page rubrique · la grille magazine (QCM du 5 novembre, « Magazine éditorial ») */
.rp-grille{max-width:var(--large);margin:0 auto;padding:clamp(30px,5vw,70px) var(--marge);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,4vw,60px) clamp(18px,2.4vw,36px);align-items:start}
.rp-grille .c6:first-child{grid-column:1/-1;display:block}
.rp-grille .c6-photo:first-child .c6-lien{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,48px);align-items:end}
.rp-grille .c6-photo:first-child .photo{aspect-ratio:4/3;margin:0;grid-row:1/4}
.rp-grille .c6:first-child .c6-titre{font:900 italic clamp(32px,4.4vw,68px)/1.02 var(--titre);letter-spacing:-.03em}
.rp-grille .c6:nth-child(6n+2) .photo{aspect-ratio:3/4}
.rp-grille .c6:nth-child(6n+4) .photo{aspect-ratio:1/1}
@media (max-width:900px){.rp-grille{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.rp-grille{grid-template-columns:1fr;gap:42px}.rp-grille .c6-photo:first-child .c6-lien{grid-template-columns:1fr}.rp-grille .c6-photo:first-child .photo{grid-row:auto;aspect-ratio:4/5}}
.rp-titre{word-break:keep-all;overflow-wrap:normal;hyphens:none}
.aplat h2 .surligne{--hl:#fff}
/* 0.6.2 · le rang « Dans le fonds » au milieu des billets récents : deux grandes photos d'archive, côte à côte */
.rp-rang-fonds{grid-column:1/-1;border-top:1px solid var(--noir);padding-top:16px}
.rp-paire{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(18px,2.4vw,36px);margin-top:18px;align-items:start}
.rp-paire .c6:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.rp-paire .c6 .photo{aspect-ratio:4/5}
.rp-paire .c6:first-child .photo{aspect-ratio:5/4}
.rp-paire .c6-titre{font:900 italic clamp(24px,2.6vw,40px)/1.04 var(--titre);letter-spacing:-.025em}
.rp-fonds{max-width:var(--large);margin:0 auto;padding:0 var(--marge);display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media (max-width:600px){.rp-paire{grid-template-columns:1fr}.rp-paire .c6:nth-child(2){margin-top:0}.rp-fonds{grid-template-columns:1fr}}

/* 0.6.3 · LES BANNIÈRES CRÉÉES · Société : le convoyeur ; La Société de l'Algorithme : le tri (QCM du 5 novembre, « Les deux ») */
.ban-conv,.ban-tri{--r:var(--societe);position:relative;height:min(100svh,920px);min-height:600px;overflow:hidden;background:#f3f1ec;--hl:var(--societe)}
.ban-titre{position:absolute;left:4vw;bottom:9%;z-index:5;margin:0;font:900 italic clamp(84px,19vw,300px)/.8 var(--titre);letter-spacing:-.045em;color:var(--noir);pointer-events:none}
.ban-kicker{position:absolute;left:4vw;top:28px;z-index:5;margin:0;font:800 13px/1.35 var(--titre);letter-spacing:.18em;text-transform:uppercase;max-width:44ch;background:#fff;padding:12px 14px}
.ban-compteur{position:absolute;right:4vw;bottom:5%;z-index:5;margin:0;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.conv-tapis{position:absolute;inset:0}
.conv-ligne{position:absolute;left:0;right:0;height:min(15%,128px);overflow:hidden;border-top:1px solid #0002;border-bottom:1px solid #0002;background:repeating-linear-gradient(90deg,#e7e4dc 0 2px,transparent 2px 34px)}
.conv-piste{position:absolute;top:50%;left:0;display:flex;gap:18px;transform:translateY(-50%);will-change:transform}
.colis{flex:none;display:block;width:min(330px,70vw);height:96px;background:#fff;color:var(--noir);border:1px solid #000;padding:9px 12px 0;position:relative;font:800 15px/1.2 var(--titre);overflow:hidden;transition:background .25s}
.colis small{display:block;font:500 10px/1 var(--mono);letter-spacing:.12em;margin-bottom:6px;color:#555}
.colis b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:92%}
.colis i{position:absolute;right:10px;bottom:8px;width:64px;height:16px;background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px,#000 3px 5px,transparent 5px 6px,#000 6px 9px,transparent 9px 11px)}
.colis.lu{background:var(--societe)}
.colis:hover{background:#000;color:#fff}.colis:hover small{color:#bbb}
.ban-conv>.conv-tapis:not(.pret) .colis{position:static}
.conv-tapis:not(.pret){display:flex;flex-wrap:wrap;gap:12px;padding:110px 4vw 0;align-content:flex-start}
.conv-laser{position:absolute;top:0;bottom:0;left:58%;width:2px;background:var(--societe);z-index:4;box-shadow:0 0 18px 4px rgba(255,90,0,.55)}
.ban-conv+.ruban{margin-top:0}
.ban-tri{background:#0a0a0a;color:#fff}
.ban-tri .ban-titre{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ban-tri .ban-kicker{background:#000;color:#fff}
.tri-phrase{position:absolute;left:4vw;right:4vw;top:30%;font:900 clamp(34px,7.4vw,124px)/1 var(--titre);letter-spacing:-.02em;height:2.3em}
.tri-phrase span{position:absolute;top:0;left:0;will-change:transform;transition:transform 1.25s cubic-bezier(.77,0,.18,1),color .6s}
.tri-phrase span.trie{color:var(--societe)}
@media (max-width:600px){.ban-kicker{font-size:12px;top:18px}}
@media (prefers-reduced-motion:reduce){.conv-piste,.tri-phrase span{transition:none!important}}

/* 0.6.5 · KILL THE MOOD · la déchirure (Mode), l'effacement (FASHIONWORLD), le film (Le film de mode) · QCM du 5 novembre au soir */
.ban-km{position:relative;height:min(100svh,920px);min-height:560px;overflow:hidden;background:#000;color:#fff;--r:var(--mode)}
.ban-km canvas,.ban-km video{position:absolute;inset:0;width:100%;height:100%;display:block}
.ban-km video{object-fit:cover}
.ban-km .ban-titre{color:#fff;mix-blend-mode:difference}
.ban-km .ban-kicker{background:#000;color:#fff}
.ban-km .ban-compteur{color:#fff;mix-blend-mode:difference;text-align:right}
.km-sentence{position:absolute;z-index:6;left:50%;top:44%;transform:translate(-50%,-50%);width:min(92vw,1100px);text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
.km-sentence.on{opacity:1}
.km-sentence b{font:900 italic clamp(44px,9vw,150px)/.95 var(--titre);letter-spacing:-.03em;color:#fff}
.km-sentence p{margin:22px 0 0;font:italic 400 clamp(17px,1.6vw,22px)/1.45 var(--texte);color:#fff}
.km-sentence small{display:block;margin-top:10px;font:500 13px/1.3 var(--titre);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ban-km+.ruban{margin-top:0}
@media (max-width:600px){.ban-tri{height:72svh;min-height:480px}}
/* 0.6.7 · la bannière des Archives va bord à bord */
.liste>.ban-km{width:100vw;margin-left:calc(50% - 50vw)}
.rubrique-page>.ruban{overflow:hidden;max-width:100vw}

/* 0.7.0 · ART · « NEXT. » et I WANT MY PHOTO · la traînée (prompt 048, nuit du 5 au 6 novembre) */
.ban-next{position:relative;height:min(100svh,920px);min-height:560px;overflow:hidden;background:#000;color:#fff;--r:var(--art)}
.next-scene{position:absolute;inset:0}
.next-scene .img,.next-scene .tranche{position:absolute;top:0;bottom:0;background-size:cover;background-position:center}
.next-scene .img{left:0;right:0;transform:scale(1.06);transition:transform 7s linear}
.next-scene .img.vit{transform:scale(1)}
.next-scene .tranche{transform:translateY(102%);transition:transform .9s cubic-bezier(.77,0,.18,1)}
.next-scene .tranche.ok{transform:none}
.next-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 55%,rgba(0,0,0,.6))}
.ban-next .ban-titre{color:#fff}
.ban-next .ban-kicker{background:#000;color:#fff}
.next-legende{position:absolute;left:4vw;bottom:4.5%;z-index:6;max-width:min(60vw,640px);font:500 13px/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.next-legende:hover{text-decoration:underline;text-underline-offset:4px}
.next-bouton{position:absolute;right:4vw;bottom:7%;z-index:7;border:0;background:none;color:#fff;cursor:pointer;font:900 italic clamp(44px,7vw,110px)/1 var(--titre);letter-spacing:-.03em;padding:0 .1em;background:linear-gradient(104deg,transparent 1%,var(--art) 2.5%,var(--art) 97%,transparent 99%) no-repeat 0 92%/100% 42%;transition:transform .35s var(--doux)}
.next-bouton:hover{transform:translateX(8px)}
@media (max-width:600px){.next-legende{max-width:56vw;font-size:12px}.next-bouton{bottom:4%}.ban-next .ban-titre{bottom:16%}}
.ban-trainee{position:relative;height:min(92svh,860px);min-height:520px;overflow:hidden;background:#0a0a0a;color:#fff;touch-action:pan-y;--r:var(--art)}
.ban-trainee .ban-titre{color:#fff;mix-blend-mode:difference;font-size:clamp(56px,13vw,210px);z-index:8}
.ban-trainee .ban-kicker{background:#000;color:#fff;z-index:9}
.ban-trainee img{position:absolute;width:clamp(120px,16vw,240px);height:auto;pointer-events:none;will-change:transform,opacity;box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* 0.7.1 · LA UNE · la photo du jour du fonds, les derniers billets en typographie, les rubriques en accent (plus d'aplats pleins) */
.une-tete{position:relative;--hl:var(--r)}
.ut-lien{display:block;position:relative;color:#fff}
.ut-photo{display:block;height:min(84svh,860px);min-height:460px;overflow:hidden;background:#000}
.ut-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 6s var(--doux)}
.une-tete .surligne.on~*,.une-tete:hover .ut-photo img{transform:scale(1)}
.ut-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72))}
.ut-texte{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:calc(1180px + 2*var(--marge));margin:0 auto;padding:0 var(--marge) clamp(26px,5vw,64px)}
.ut-ligne{color:#fff}.ut-ligne .rubrique{color:#fff;font-weight:700}
.ut-titre{display:block;margin-top:16px;max-width:20ch;font:900 italic clamp(38px,6.4vw,104px)/1 var(--titre);letter-spacing:-.03em;text-wrap:balance}
.ut-titre .crochet{color:#fff}
.ut-lire{color:#fff;border-color:#fff}
.une-recents,.une-fonds-tete{max-width:var(--large);margin:0 auto;padding:clamp(34px,5vw,64px) var(--marge) 0}
.une-recents-tete,.une-fonds-tete{border-top:1px solid var(--noir);padding-top:16px}
.une-fonds-tete{margin-top:clamp(30px,5vw,60px)}
.une-recents-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin-top:22px}
@media (max-width:900px){.une-recents-grille{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.une-recents-grille{grid-template-columns:1fr}.ut-titre{font-size:clamp(32px,9.5vw,44px)}}
.une-couleur .aplat{background:#fff!important;color:var(--noir)!important;border-top:6px solid var(--r)}
.une-couleur .aplat h2 a{color:var(--r)}
.une-couleur .aplat ol a{color:var(--noir)}
.une-couleur .aplat h2 .surligne{--hl:transparent}

/* 0.7.2 · le menu Archives en deux colonnes (labels à gauche, en grand ; années à droite), le partage, la phrase du jour du pied */
@media (min-width:701px){
.sous-menu-annees{display:grid!important;grid-template-columns:1.3fr 1fr;gap:28px 56px;max-width:1100px;margin:0 auto;text-align:left}
.sous-menu-annees .sous-menu-fonds{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:0}
.sous-menu-annees .sous-menu-fonds a{font:800 italic 22px/1.15 var(--titre);color:var(--noir)}
.sous-menu-annees .sous-menu-fonds a:hover{color:var(--r,#ff2e88)}
.sous-menu-annees ul{grid-column:2;grid-row:1;justify-content:flex-start!important;align-content:flex-start}
.sous-menu-annees li a{font:700 15px/1 var(--mono)!important;letter-spacing:.06em}
.sous-menu-annees .sous-menu-tout{grid-column:1/-1}}
.b6-signature{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.b6-sig-ligne{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0}
.b6-sig-ligne a{color:var(--noir);font-weight:700}
.partage{display:flex;flex-wrap:wrap;gap:8px}
.partage a,.partage button{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--noir);background:#fff;border:1px solid var(--noir);border-radius:99px;padding:9px 12px;cursor:pointer;transition:background .25s,color .25s}
.partage a:hover,.partage button:hover{background:var(--r,#000);border-color:var(--r,#000);color:#fff}
.b6-fin{max-width:calc(var(--colonne) + 2*var(--marge));margin:36px auto 0;padding:18px var(--marge) 0;border-top:1px solid var(--noir)}
.pied-pdj{max-width:720px;margin:10px auto 34px;color:#fff}
.pied-pdj blockquote{margin:8px 0 0;font:italic 400 clamp(20px,2.2vw,28px)/1.4 var(--texte)}
.pied-pdj .pdj-par,.pied-pdj .pdj-mot{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a8a8a8}
.pied-fonds{display:grid!important;grid-template-columns:repeat(4,auto);justify-content:center;gap:12px 34px!important}
@media (max-width:700px){.pied-fonds{grid-template-columns:1fr 1fr}}

/* 0.7.3 · L'À PROPOS · lecture qui bouge : chaque mot se lève au défilement, les phrases de la maison se surlignent */
.apropos{--r:var(--mode);max-width:var(--large);margin:0 auto;padding:clamp(40px,7vw,110px) var(--marge) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(30px,5vw,90px)}
.ap-tete{position:sticky;top:90px;align-self:start}
.ap-titre{margin:16px 0 0;font:900 italic clamp(60px,9vw,150px)/.85 var(--titre);letter-spacing:-.045em}
.ap-texte p{margin:0 0 1.1em;font:400 clamp(22px,2.3vw,32px)/1.42 var(--texte);color:var(--noir)}
.ap-texte .ap-chute{font:900 italic clamp(28px,3.2vw,48px)/1.1 var(--titre);letter-spacing:-.02em}
.ap-signe{font:700 14px/1 var(--mono)!important;letter-spacing:.16em;text-transform:uppercase}
.ap-texte .mot{display:inline-block;opacity:.12;transform:translateY(.35em);transition:opacity .7s var(--doux),transform .9s var(--doux)}
.ap-texte .vu .mot{opacity:1;transform:none}
.ap-labels,.ap-mentions{grid-column:2;border-top:1px solid var(--noir);padding-top:16px}
.ap-labels nav{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px}
.ap-labels a{font:800 italic clamp(20px,2vw,28px)/1.2 var(--titre);color:var(--noir)}
.ap-labels a:hover{color:var(--r)}
.ap-mentions p:last-child{margin:14px 0 0;font:400 17px/1.7 var(--texte);color:#333}
@media (max-width:800px){.apropos{grid-template-columns:1fr}.ap-tete{position:static}.ap-labels,.ap-mentions{grid-column:1}}
@media (prefers-reduced-motion:reduce){.ap-texte .mot{opacity:1;transform:none;transition:none}}
/* 0.7.4 · dans la lecture qui bouge, le surligné se pose sous chaque mot (sinon il passe au milieu de la ligne, comme un trait barré) */
.ap-texte .surligne{background:none!important;padding:0}
.ap-texte .surligne .mot{background:linear-gradient(104deg,transparent .6%,color-mix(in srgb,var(--r) 70%,transparent) 2%,color-mix(in srgb,var(--r) 70%,transparent) 98%,transparent 99.5%) no-repeat 0 88%/0% 38%;transition:opacity .7s var(--doux),transform .9s var(--doux),background-size 1s cubic-bezier(.65,0,.35,1) .5s;margin-right:-.25em;padding-right:.25em}
.ap-texte .vu .surligne .mot{background-size:100% 38%}
.ap-titre{white-space:nowrap;font-size:clamp(54px,7vw,112px)}

/* 0.7.5 · LES SITES DANS LE SITE (O K L Y N, WAR DANCE RADIO, SMK, 99% YOUTH) · on les habille sans les refaire :
   rien ne déborde, aucun texte sous 16 px, le menu d'APAR reste au-dessus */
.billet-page .gh-content{overflow-x:hidden;max-width:100%}
.billet-page .gh-content :is(p,li,a,span,b,strong,em,i,small,td,th,dd,dt,figcaption,label,div,blockquote,h5,h6){font-size:max(16px,1em)!important}
.billet-page .gh-content :is(a,span,b,nav,ul,li){max-width:100%;overflow-wrap:anywhere}
.billet-page .gh-content :is(.n2,.nm2,.lb){white-space:normal!important;display:inline-block;max-width:100%}
.billet-page .gh-content img,.billet-page .gh-content video,.billet-page .gh-content iframe{max-width:100%;height:auto}

/* 0.7.6 · O K L Y N · la DA validée est rendue aux pages (leurs styles d'origine) ; le thème garde seulement la tête d'APAR au-dessus,
   blanche et lisible, et le pied d'APAR en dessous (les feuilles d'O K L Y N peignent tout le corps en noir) */
html body .entete{background:#fff!important;color:#000!important;position:relative;z-index:50}
html body .entete .menu{background:#fff!important;border-color:#000!important}
html body .entete .menu .menu-lien,html body .entete .chercher,html body .entete .entete-date{color:#000!important;-webkit-text-fill-color:#000!important;opacity:1!important;font-family:"Hanken",system-ui,sans-serif!important}
html body .entete .menu .menu-lien{font-size:16px!important;letter-spacing:0!important;text-transform:none!important}
html body .entete .sous-menu,html body .entete .sous-menu a{background:#fff;color:#000!important;-webkit-text-fill-color:#000!important;font-family:"Hanken",system-ui,sans-serif!important}
html body .entete .titre-de-presse img{opacity:1!important;filter:none!important}
.sdls{background:#000;color:#fff}
.sdls .gh-content{max-width:none!important;padding:0!important}
html body .pied,html body .pied a{font-family:"Hanken",system-ui,sans-serif!important;-webkit-text-fill-color:currentColor!important}
html body .entete .menu-ligne{display:flex!important;justify-content:center!important;list-style:none!important;margin:0!important;padding:0!important;gap:clamp(18px,4vw,56px)!important}

/* 0.7.8 · après le juge extérieur (5 nov., 23 h) · le rythme sur téléphone : sous 600 px, les cartes à photo deviennent une ligne
   (vignette carrée de 96 px et titre), sauf la première de chaque grille, qui garde sa grande image */
@media (max-width:600px){
  :is(.rp-grille,.trois,.mosaique,.une-recents-grille,.rp-fonds)>.c6-photo:not(:first-child) .c6-lien{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
  :is(.rp-grille,.trois,.mosaique,.une-recents-grille,.rp-fonds)>.c6-photo:not(:first-child) .photo{aspect-ratio:1/1!important;margin:0;grid-row:1/3}
  :is(.rp-grille,.trois,.mosaique,.une-recents-grille,.rp-fonds)>.c6-photo:not(:first-child) .c6-titre{font-size:18px;margin-top:4px}
  .rp-paire .c6:nth-child(2) .c6-lien{display:grid;grid-template-columns:96px 1fr;gap:14px}
  .rp-paire .c6:nth-child(2) .photo{aspect-ratio:1/1!important;margin:0}
}
/* les pages de label · le titre de cellule reste lisible même si son animation d'entrée ne part pas ; le menu d'APAR garde sa taille ordinaire */
.sdls .gh-content :is(h1,h2){color:#fff;-webkit-text-fill-color:#fff;opacity:1!important}
html body .entete .menu .menu-lien{font-size:15px!important}