/* ==========================================================================
   Page Supporters (page-supporters.php) — maquette « proposition 11 », polices du thème.
   Groupe de gauche en vert (.v), groupe de droite en jaune (.t). Classes préfixées sp- : rien n'en sort de la page.
   Space Grotesk s'arrête à 700 : les titres sont épaissis d'un contour de la couleur du texte (-webkit-text-stroke).
   ========================================================================== */
.sup{--mint:#13871B;--jaune:#FFD21F;--vert:#13871B;--sp-ease:cubic-bezier(.23,1,.32,1);--sp-move:cubic-bezier(.77,0,.175,1);padding-top:88px;color:#EEF4EF}
.sp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sp-vide{font:italic 500 .9em 'DM Sans',sans-serif;color:var(--jaune);opacity:.85;-webkit-text-stroke:0;text-transform:none;letter-spacing:0}

/* Bandeau défilant */
.sp-tick{overflow:hidden;white-space:nowrap;border-bottom:2px solid #F2F2F2}
.sp-run{display:flex;width:max-content;animation:sp-marq var(--sp-duree,26s) linear infinite}
.sp-set{display:flex;flex-shrink:0;align-items:center;padding:17px 0;font:700 .88rem var(--head,'Space Grotesk'),sans-serif;text-transform:uppercase;letter-spacing:.02em;-webkit-text-stroke:.03em currentColor}
.sp-set span{margin-right:36px;white-space:nowrap} /* marge plutôt que gap : les deux moitiés font exactement la même largeur */
.sp-tick .v{color:#15941E} /* vert du logo légèrement éclairci : lisible en petit sur le fond sombre (contraste ≈ 4,7:1) */.sp-tick .t{color:var(--jaune)}.sp-tick .w{color:#F2F2F2}
.sp-tick .ar{font:700 1.3em/1 'Aref Ruqaa',serif;letter-spacing:0;text-transform:none;-webkit-text-stroke:0;unicode-bidi:isolate} /* l'espacement et le contour casseraient la liaison des lettres arabes */
@keyframes sp-marq{to{transform:translateX(-50%)}}

/* Haut de page : deux moitiés, celle survolée s'agrandit (clip-path). Noms à la taille des titres des pages de section (.tn-title). */
.sp-split{position:relative;height:min(78vh,720px);min-height:540px;border-bottom:2px solid #F2F2F2;overflow:hidden}
.sp-half{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;transition:clip-path 450ms var(--sp-move)}
.sp-half.v{clip-path:inset(0 50% 0 0);background:#071A0F}
.sp-half.t{clip-path:inset(0 0 0 50%);background:#17140A;align-items:flex-end;text-align:right}
.sp-half .sp-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.5) brightness(.55)}
.sp-half>*:not(.sp-photo){position:relative}
/* Écusson du groupe au-dessus de son nom, en couleurs (la photo, elle, est en noir et blanc) */
.sp-logo{display:block;width:clamp(76px,8vw,116px);height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:18px;border-radius:50%;box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
.sp-split.lv .sp-half.v{clip-path:inset(0 38% 0 0)}.sp-split.lv .sp-half.t{clip-path:inset(0 0 0 62%)}
.sp-split.lt .sp-half.v{clip-path:inset(0 62% 0 0)}.sp-split.lt .sp-half.t{clip-path:inset(0 0 0 38%)}
.sp-nom{margin:0;font:700 clamp(3.2rem,min(7vw,12vh),6.6rem)/.9 var(--head,'Space Grotesk'),sans-serif;letter-spacing:-.045em;text-transform:uppercase;-webkit-text-stroke:.035em currentColor}
.sp-half.v .sp-nom{color:var(--mint)}.sp-half.t .sp-nom{color:var(--jaune)}
.sp-nom span{display:block;color:#F2F2F2}
.sup :lang(ar){letter-spacing:0;text-transform:none;-webkit-text-stroke:0} /* un nom en arabe : l'espacement et le contour casseraient la liaison des lettres */
.sp-half p{margin:18px 0 0;max-width:30ch;font:700 .95rem 'DM Sans',sans-serif;letter-spacing:.08em}
.sp-bar{position:absolute;top:0;bottom:0;left:50%;z-index:3;width:2px;background:#F2F2F2;transform:translateX(-1px);transition:transform 450ms var(--sp-move)}
.sp-split.lv .sp-bar{transform:translateX(calc(12vw - 1px))}.sp-split.lt .sp-bar{transform:translateX(calc(-12vw - 1px))}

/* Cartes des groupes */
.sp-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:90px 0 0}
.sp-card{padding:36px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.sp-card.v{box-shadow:inset 0 1px 0 rgba(19,135,27,.35)}.sp-card.t{box-shadow:inset 0 1px 0 rgba(255,210,31,.2)}
.sp-card h3{margin:0;font:700 3rem/1 var(--head,'Space Grotesk'),sans-serif;letter-spacing:-.035em;text-transform:uppercase;-webkit-text-stroke:.035em currentColor}
.sp-card.v h3{color:var(--mint)}.sp-card.t h3{color:var(--jaune)}
.sp-card p{max-width:46ch;margin:16px 0 0;color:#b9c4bd;font-size:1.05rem;line-height:1.6}
.sp-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sp-meta span{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);font:700 .8rem 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.sp-meta{align-items:center}
.sp-meta span{display:inline-flex;align-items:center;box-sizing:border-box;height:40px;padding:0 18px} /* même hauteur que les logos des réseaux */
.sp-soc{display:flex;gap:8px}
.sp-soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--c);transition:background-color 200ms ease,color 200ms ease,transform 200ms var(--sp-ease)}
.sp-soc a svg{width:18px;height:18px}
.sp-card.v{--c:var(--mint)}.sp-card.t{--c:var(--jaune)}
.sp-soc a:focus-visible{outline:2px solid var(--c);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.sp-soc a:hover{background:var(--c);color:#05080A;transform:translateY(-2px)}}
.sp-player{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.sp-player button{width:56px;height:56px;flex-shrink:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform 140ms var(--sp-ease)}
.sp-player button:active{transform:scale(.95)}
.sp-card.v .sp-player button{background:var(--mint);color:#062B17}.sp-card.t .sp-player button{background:var(--jaune);color:#05080A}
.sp-player b{display:block;font:700 1.1rem var(--head,'Space Grotesk'),sans-serif}
.sp-player span{font:700 .78rem 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a978f}
.sp-eq{display:flex;align-items:flex-end;gap:4px;height:34px}
.sp-eq i{width:5px;height:100%;border-radius:2px;transform:scaleY(.2);transform-origin:bottom;transition:transform 200ms var(--sp-ease)}
.sp-card.v .sp-eq i{background:var(--mint)}.sp-card.t .sp-eq i{background:var(--jaune)}
.sp-player.playing .sp-eq i{animation:sp-eq 900ms ease-in-out infinite alternate;animation-delay:calc(var(--k) * -170ms)}
@keyframes sp-eq{0%{transform:scaleY(.25)}50%{transform:scaleY(1)}100%{transform:scaleY(.45)}}

/* Chants communs aux deux groupes : un bloc aux deux couleurs, les albums côte à côte, une carte chacun (pochette + bouton vers Spotify) */
.sp-ch{position:relative;padding:28px 32px 32px 40px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.sp-ch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--vert) 50%,var(--jaune) 50%)}
.sp-ch-by{margin:0 0 16px;font:700 .8rem 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8a978f}
.sp-ch-by .v{color:#15941E}.sp-ch-by .t{color:var(--jaune)}
.sp-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),320px));gap:16px} /* cartes de 320 px alignées à gauche, l'une sous l'autre quand la place manque */
.sp-alb{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#121212;color:#fff;text-decoration:none;transition:transform 220ms var(--sp-ease)}
.sp-alb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-alb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32);pointer-events:none} /* voile noir sur la pochette */
.sp-alb-nom{position:absolute;inset:0;display:grid;place-items:center;padding:24px 24px 72px;text-align:center;font:700 clamp(1.4rem,3vw,2rem)/1.1 var(--head,'Space Grotesk'),sans-serif;letter-spacing:-.02em}
.sp-alb-bt{position:absolute;z-index:1;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;background:#1DB954;color:#000;font:700 .9rem 'DM Sans',sans-serif;white-space:nowrap;transition:background-color 200ms ease}
.sp-alb:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.sp-alb:hover{transform:translateY(-3px)}.sp-alb:hover .sp-alb-bt{background:#3BE477}}

/* Les tifos : photos en duotone vert ou jaune, couleurs réelles au survol. Titre à la taille des titres de section (.h2). */
.sp-h{margin:110px 0 30px;font:700 clamp(2.1rem,4.4vw,3.4rem)/1 var(--head,'Space Grotesk'),sans-serif;letter-spacing:-.035em;-webkit-text-stroke:.035em currentColor}
.sp-tifos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:12px}
.sp-tifos.n1{grid-template-columns:1fr;grid-auto-rows:440px}
.sp-tifos.n2{grid-template-columns:1fr 1fr;grid-auto-rows:360px}
.sp-tifos.n3{grid-template-columns:2fr 1fr}
.sp-tifos.n4 .sp-tifo:first-child,.sp-tifos.n5 .sp-tifo:first-child,.sp-tifos.n6 .sp-tifo:first-child,.sp-tifos.n3 .sp-tifo:first-child{grid-row:span 2}
.sp-tifo{position:relative;margin:0;overflow:hidden;border-radius:14px}
.sp-tifo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3);transition:filter 300ms ease,transform 600ms var(--sp-ease)}
.sp-tifo::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;transition:opacity 300ms ease}
.sp-tifo.v::after{background:var(--vert)}.sp-tifo.t::after{background:#E8B800}
.sp-tifo figcaption{position:absolute;left:14px;bottom:12px;z-index:2;padding:5px 10px;border-radius:6px;background:#05080A;font:700 .75rem 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){.sp-tifo:hover img{filter:none;transform:scale(1.04)}.sp-tifo:hover::after{opacity:0}}

/* Écharpes et bandeaux : images détourées, penchées une sur deux comme accrochées à la barrière ; elles se redressent au survol */
.sp-ech-sec{padding-top:110px}.sp-ech-sec>.sp-h{margin-top:0} /* même écart au-dessus, avec ou sans titre */
.sp-ech-sec>.sp-ech-intro:first-child{margin-top:0}
.sp-ech-intro{margin:-14px 0 34px;font:500 1rem/1.5 'DM Sans',sans-serif;opacity:.7}
.sp-ech-w{overflow:visible}
.sp-ech-w+.sp-ech-w{margin-top:44px}
.sp-ech{margin:0;width:calc(90% * var(--t,1));transform:rotate(-2.2deg);transition:transform 420ms var(--sp-ease)}
.sp-ech-d .sp-ech{margin-left:auto;transform:rotate(1.6deg)}
.sp-ech img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
@media (hover:hover) and (pointer:fine){.sp-ech:hover,.sp-ech-d .sp-ech:hover{transform:rotate(0) translateY(-4px)}}
.sp-ech-w.sp-ech-band .sp-ech{width:100%} /* bandeau : de la gauche du bouton « Rejoindre » de gauche à la droite de celui de droite, y compris sur mobile */
.sp-ech-w.sp-ech-plat .sp-ech,.sp-ech-w.sp-ech-plat .sp-ech:hover{transform:none}

/* Bandeau accroché par les coins du haut : 48 bandes verticales de la même image, chacune descendue de
   --sp-s × largeur × (1 − x²) et cisaillée selon la pente de la courbe (−4·s·x rad ≈ −229°·s·x), x de −1 à 1.
   cqw = largeur du bandeau : les bandes, l'image et le creux suivent sa taille. Le padding laisse la place au creux. */
.sp-ech-band .sp-ech{padding-bottom:calc(var(--pes, 0) * 114%)}
.sp-band{--sp-s:var(--pes);position:relative;width:100%;container-type:inline-size;filter:drop-shadow(0 12px 12px rgba(0,0,0,.5))}
.sp-band i{position:absolute;top:0;height:100%;left:calc(var(--k) * 100cqw / 48);width:calc(100cqw / 48 + 1px);background:var(--u) no-repeat;background-size:100cqw 100%;background-position:calc(var(--k) * -100cqw / 48) 0;
	transform:translateY(calc(var(--sp-s) * 100cqw * (1 - var(--x) * var(--x)))) skewY(calc(var(--sp-s) * var(--x) * -229.18deg))}
/* Balancement : --sp-s n'est animable en douceur qu'une fois déclaré comme nombre (supporters.js ajoute .sp-prop) ; sinon le bandeau reste immobile */
.sp-prop .sp-band.sw{animation:spBal 4s ease-in-out infinite alternate;animation-delay:calc(var(--n) * -1.7s)}
@keyframes spBal{from{--sp-s:calc(var(--pes) * .86)}to{--sp-s:calc(var(--pes) * 1.14)}} /* « Inclinaison : Non » dans l'admin ; l'emporte aussi sur les règles mobiles */

@media (max-width:860px){
	.sup{padding-top:76px}
	.sp-split{height:auto;min-height:0}
	.sp-half{position:relative;clip-path:none!important;min-height:340px;padding:28px 20px}
	.sp-logo{width:68px;margin-bottom:14px}
	.sp-sp-fac{flex-wrap:wrap}.sp-sp-fac button{margin-left:58px}
	.sp-bar{display:none}
	.sp-cards{grid-template-columns:1fr}
	.sp-card{padding:26px 22px}
	.sp-tifos{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
	.sp-tifos .sp-tifo:first-child{grid-column:span 2;grid-row:auto!important}
	.sp-tifos.n1{grid-template-columns:1fr;grid-auto-rows:260px}
	.sp-h{margin-top:80px}
	.sp-ech{width:calc(97% * var(--t,1));transform:rotate(-1.5deg)}.sp-ech-d .sp-ech{transform:rotate(1.2deg)}
	.sp-ech-w+.sp-ech-w{margin-top:28px}
	.sp-ech-sec{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){
	.sp-run{animation:none}
	.sp-half,.sp-bar,.sp-ech{transition:none}
	.sp-prop .sp-band.sw{animation:none}
	.sp-player.playing .sp-eq i{animation:none;transform:scaleY(.6)}
}