/* Résonances (/blog/) : bandeau, article à la une, filtres, grille sobre, lettre du vendredi (templates/universe/stories.php,
   assets/universe/resonances.js). Chargé après premium/cinema. Palette du site seulement (nuit, panneau, or, or clair) :
   ni vert ni turquoise (aucune variable de lueur ou de vert du prototype). Cahier : livrables/specs/resonances.md. */
.sr-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Le fond peint de la page reste le grimoire, plus voilé : le bandeau le montre net, la grille se lit sans panneaux. */
body.sr-reference.sr-page-stories::before{background-image:linear-gradient(color-mix(in srgb,var(--sr-bg) 78%,transparent),color-mix(in srgb,var(--sr-bg) 93%,transparent)),url('assets/generated/stories.webp')}
@media (max-width:760px){body.sr-reference.sr-page-stories::before{background-image:linear-gradient(color-mix(in srgb,var(--sr-bg) 78%,transparent),color-mix(in srgb,var(--sr-bg) 93%,transparent)),url('assets/generated/stories-small.webp')}}
@keyframes sr-res-entree{from{opacity:0;transform:translateY(10px)}}

.sr-resonances{--rs-ease:cubic-bezier(.16,1,.3,1);--rs-ombre:0 .5rem 1rem #000a,0 2rem 4rem #03131ecc;box-sizing:border-box;max-width:var(--sr-wide);margin:0 auto;padding:0 var(--sr-pad) var(--sp-8);overflow-x:clip}
.sr-resonances :is(h1,h2,h3){margin:0}
.sr-resonances .sr-icon{width:1.1em;height:1.1em;flex:none}

/* ── Bandeau ── */
.sr-resonances__tete{position:relative;isolation:isolate;display:grid;align-content:end;justify-items:center;min-height:clamp(13rem,24vw,20rem);margin:0 calc(-1*var(--sr-pad));padding:0 var(--sr-pad) var(--sp-4);text-align:center}
.sr-resonances__bandeau{position:absolute;inset:0;z-index:-1;-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
.sr-resonances__bandeau img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;max-width:none}
.sr-resonances .sr-resonances__tete h1{font-size:clamp(3.2rem,5vw,5.4rem);line-height:1;text-shadow:var(--sr-text-shadow)}
.sr-resonances .sr-resonances__tete p{max-width:46ch;margin:var(--sp-3) 0 0;font-size:1.0625rem;line-height:1.55;color:var(--sr-ink);text-shadow:var(--sr-text-shadow);text-wrap:balance}

/* ── À la une : l'image déborde à gauche (seule asymétrie), relief léger ── */
.sr-resonances__une{display:grid;grid-template-columns:56% 1fr;gap:var(--sp-12);align-items:center;margin-top:var(--sp-12)}
.sr-resonances__une-image{display:block;margin-left:calc(-1*var(--sp-8));aspect-ratio:16/9;overflow:hidden;border-radius:var(--sr-radius);background:var(--sr-depth);box-shadow:var(--rs-ombre)}
.sr-resonances__une-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04)}
.sr-resonances__meta{display:flex;flex-wrap:wrap;gap:0 .5rem;margin:0;font-size:.78rem;line-height:1.4;color:var(--sr-readable)}
.sr-resonances__meta>span+span::before{content:'·';margin-right:.5rem;color:var(--sr-gold)}
.sr-resonances__marque{color:var(--sr-gold-light);font-weight:600}
.sr-resonances .sr-resonances__une h2{margin-top:var(--sp-3);font-size:clamp(1.9rem,2.6vw,2.7rem);line-height:1.12;text-wrap:balance}
.sr-resonances__une h2 a{color:inherit;text-decoration:none;transition:color .2s}
.sr-resonances__une h2 a:hover{color:var(--sr-gold-light)}
.sr-resonances .sr-resonances__une .sr-resonances__extrait{max-width:52ch;margin:var(--sp-4) 0 0;color:var(--sr-readable);line-height:1.6}
.sr-resonances__une .sr-btn{margin:var(--sp-6) 0 0;transition:transform .12s ease-out,background-color .2s,border-color .2s}
.sr-resonances__une .sr-btn:active{transform:scale(.97)}

/* ── Filtres : sans icône, avec le nombre exact de cartes ── */
.sr-resonances__filtres{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-16)}
.sr-resonances__filtres button{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;margin:0;padding:.5rem 1rem;border:var(--sr-rule) solid var(--sr-line);border-radius:var(--r-pill);background:color-mix(in srgb,var(--sr-bg) 60%,transparent);color:var(--sr-ink);font:inherit;font-size:.875rem;line-height:1.2;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:border-color .2s,color .2s,background-color .2s,transform .12s ease-out}
.sr-resonances__filtres button:active{transform:scale(.97)}
.sr-resonances__filtres button[aria-pressed=true]{background:var(--sr-panel-solid);border-color:var(--sr-gold-light);color:var(--sr-gold-light)}
.sr-resonances__nb{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--sr-gold)}
.sr-resonances__filtres [aria-pressed=true] .sr-resonances__nb{color:var(--sr-gold-light)}
.sr-resonances :is(.sr-resonances__filtres button,.sr-resonances__carte):focus-visible{outline:2px solid var(--sr-gold-light);outline-offset:.3rem}

/* ── Grille sobre : pas de panneau, la carte entière est un seul lien ── */
.sr-resonances__grille{list-style:none;margin:var(--sp-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-10) var(--sp-8)}
.sr-resonances__grille>li{margin:0}
.sr-resonances__grille>[hidden]{display:none}
.sr-resonances__carte{display:block;color:inherit;text-decoration:none;border-radius:var(--sr-radius);transition:transform .12s ease-out}
.sr-resonances__carte:active{transform:scale(.98)}
.sr-resonances__vignette{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--sr-radius);background:var(--sr-depth)}
.sr-resonances__vignette img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--rs-ease)}
.sr-resonances__corps{display:block;margin-top:var(--sp-4)}
.sr-resonances .sr-resonances__carte h3{margin-top:var(--sp-2);font-size:1.4rem;line-height:1.18;color:var(--sr-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;transition:color .2s}
.sr-resonances__carte .sr-resonances__extrait{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:var(--sp-2);font-size:.9375rem;line-height:1.55;color:var(--sr-readable)}
.sr-resonances__ecouter{display:inline-block;margin-top:var(--sp-2);font-size:.8125rem;color:var(--sr-gold)}

/* ── La lettre du vendredi, après la lecture ── */
.sr-resonances .sr-newsletter{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center;margin:var(--sp-24) 0 var(--sp-16);padding:var(--sp-10);position:relative;background:linear-gradient(110deg,var(--sr-panel),var(--sr-depth))}
.sr-resonances .sr-newsletter>div{position:relative;padding-left:5.5rem}
.sr-resonances .sr-letter-fairy{position:absolute;left:0;top:0;width:3.2rem;height:6rem;object-fit:contain;filter:drop-shadow(0 0 1.5rem var(--sr-gold-dark))}
.sr-resonances .sr-newsletter h2{font-size:clamp(2.1rem,3vw,2.7rem);line-height:1.1}
.sr-resonances .sr-newsletter>div>p{max-width:44ch;margin:var(--sp-4) 0 0;color:var(--sr-readable);line-height:1.6}
.sr-resonances .sr-newsletter label{display:block;margin-bottom:.35rem;font-size:.875rem;color:var(--sr-ink)}
.sr-resonances .sr-newsletter label small{color:var(--sr-readable)}
.sr-resonances .sr-newsletter input{box-sizing:border-box;width:100%;min-height:var(--sr-hit);padding:.6rem .9rem;border:var(--sr-rule) solid var(--sr-line);border-radius:.35rem;background:color-mix(in srgb,var(--sr-bg) 80%,transparent);color:var(--sr-white);font:inherit;font-size:1rem}
.sr-resonances .sr-newsletter input:focus-visible{outline:2px solid var(--sr-gold-light);outline-offset:2px}
.sr-resonances .sr-input-action{display:flex;gap:.5rem}
.sr-resonances .sr-input-action>input{flex:1;min-width:0}
.sr-resonances .sr-input-action>.sr-btn{flex:none;margin:0}
.sr-resonances .sr-newsletter form>small{display:block;margin-top:var(--sp-3);font-size:.8125rem;color:var(--sr-readable)}
.sr-resonances #newsletter-status{margin:var(--sp-2) 0 0;font-size:.875rem;color:var(--sr-gold-light)}
.sr-resonances #newsletter-status:empty{display:none}

/* ── Mouvement : apparition du texte à la une (une fois), survols, mouvement réduit ── */
@media (prefers-reduced-motion:no-preference){html:not(.sr-reduced) .sr-resonances__une-texte{animation:sr-res-entree .5s var(--rs-ease) both}}
@media (hover:hover) and (pointer:fine){.sr-resonances__carte:hover .sr-resonances__vignette img{transform:scale(1.03)}.sr-resonances__carte:hover h3{color:var(--sr-gold-light)}.sr-resonances__filtres button:hover{border-color:var(--sr-gold)}}
@media (prefers-reduced-motion:reduce){.sr-resonances *{transition-property:color,background-color,border-color!important}.sr-resonances__une-image img{transform:scale(1.04)!important}}
html.sr-reduced .sr-resonances *{transition-property:color,background-color,border-color!important}
html.sr-reduced .sr-resonances__une-image img{transform:scale(1.04)!important}

/* ── Tablette (761-1050 px) : à la une en pile, grille en 2 colonnes ── */
@media (max-width:1050px){
 .sr-resonances__une{grid-template-columns:1fr;gap:var(--sp-6)}
 .sr-resonances__une-image{margin-left:0}
 .sr-resonances__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sr-resonances .sr-newsletter{grid-template-columns:1fr;gap:var(--sp-8)}
}
/* ── Mobile (≤ 760 px) : filtres sur une ligne glissable, cartes compactes ── */
@media (max-width:760px){
 .sr-resonances__tete{min-height:11rem}
 .sr-resonances .sr-resonances__tete h1{font-size:3.1rem}
 .sr-resonances .sr-resonances__tete p{font-size:.95rem}
 .sr-resonances__une{margin-top:var(--sp-8);gap:var(--sp-5)}
 .sr-resonances .sr-resonances__une h2{font-size:1.75rem}
 .sr-resonances__une .sr-btn{display:flex;width:100%}
 .sr-resonances__filtres{flex-wrap:nowrap;overflow-x:auto;margin:var(--sp-12) calc(-1*var(--sr-pad)) 0;padding:.35rem var(--sr-pad);scroll-snap-type:x proximity;scroll-padding-inline:var(--sr-pad);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .sr-resonances__filtres::-webkit-scrollbar{display:none}
 .sr-resonances__filtres button{flex:none;scroll-snap-align:start}
 .sr-resonances__grille{grid-template-columns:1fr;gap:var(--sp-5);margin-top:var(--sp-6)}
 .sr-resonances__carte{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--sp-4);align-items:start}
 .sr-resonances__corps{margin-top:0}
 .sr-resonances .sr-resonances__carte h3{margin-top:var(--sp-1);font-size:1.15rem}
 .sr-resonances__carte :is(.sr-resonances__extrait,.sr-resonances__ecouter){display:none}
 .sr-resonances .sr-newsletter{margin:var(--sp-16) 0 var(--sp-10);padding:var(--sp-6)}
 .sr-resonances .sr-newsletter>div{padding-left:0}
 .sr-resonances .sr-letter-fairy{position:static;width:2rem;height:3.4rem;margin-bottom:var(--sp-4)}
 .sr-resonances .sr-input-action{flex-direction:column}
 .sr-resonances .sr-input-action>.sr-btn{width:100%}
}
@media (forced-colors:active){.sr-resonances__filtres button[aria-pressed=true]{border:2px solid Highlight}}