/* Ajouts WordPress, communs à toutes les pages */
.era-panel[hidden]{display:none}
.admin-bar .pill{top:88px}
@media (max-width:782px){.admin-bar .pill{top:102px}}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.coin img{height:auto}
/* Logos partenaires à surface égale : hauteur = --s × --k × --z (--k vient de asm_partenaire_attrs). */
.partners img{--s:62px;width:auto;height:calc(var(--s) * var(--k,.8) * var(--z,1));max-width:80%;object-fit:contain}
.sp img{--s:46px;width:auto;height:calc(var(--s) * var(--k,.8) * var(--z,1));max-width:none;max-height:none;object-fit:contain}
.partner-name{font-family:var(--head);font-weight:700;font-size:1.25rem;line-height:1.1;text-align:center;padding:0 10px}

/* ---------- barre des sections : sous-menu au survol ----------
   La barre ne doit plus rogner son contenu, sinon le panneau serait coupé ; elle
   redevient défilante sous 1100 px, où les sous-sections passent alors en ligne. */
.sports{overflow:visible}
.sports .sect{position:relative;display:flex;align-items:center}
.sports .sub{position:absolute;top:100%;left:0;z-index:60;display:flex;flex-direction:column;gap:2px;min-width:100%;padding:6px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s var(--ease),visibility .22s}
.sports .sect:focus-within .sub{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.sports .sect:hover .sub{opacity:1;visibility:visible;transform:none}}
.sports .sub a,.sports .sub .bientot{padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:background-color .25s,color .25s}
@media (hover:hover){.sports .sub a:hover{background:var(--bg);color:var(--ink)}}
.sports .sub .bientot{opacity:.5;cursor:default}
/* Sous-section en cours dans la barre des sections (ex. « Académie et Jeunes ») : même pastille que les sections. */
.sports .sub a[aria-current]{background:var(--ink);color:#fff}
html[data-theme="dark"] .sports .sub a[aria-current]{background:#FFD21F;color:#0B1F14}
@media (max-width:1100px){
  .sports{overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fg,0px),#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fg,0px),#000 82%,transparent);padding-right:28px} /* fondu à droite, et à gauche dès que la liste a défilé (--fg, voir site.js) */
  .sports .sub{position:static;display:contents;opacity:1;visibility:visible;transform:none}
  .sports .sub a{border-radius:999px} /* sous-sections en ligne : même pastille arrondie que les sections */
}

/* En-tête : nom du club en Big Shoulders Display (graisse 900), 18 px, sur deux lignes ; 2e ligne et nom arabe en jaune.
   Le blanc est réservé au thème sombre : en thème clair la pilule est blanche translucide, un texte blanc y serait illisible. */
.pill .brand .txt b{font-family:'Big Shoulders Display','Barlow Condensed',var(--head),sans-serif;font-weight:900;font-size:18px;line-height:1.05;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.pill .brand .txt b.y,.pill .brand .ar{color:#A57C00}
/* 2e ligne (« de La Marsa ») étirée à la largeur de la 1re : la colonne prend la largeur de la ligne la plus longue,
   les lettres (une span chacune, posées par header.php) s'y répartissent. */
.pill .brand .txt{display:inline-grid}
.pill .brand .txt b:first-child{margin-right:-.06em} /* l'espacement laisse un blanc après la dernière lettre : les deux lignes finissent au même pixel */
.pill .brand .txt b.j{display:flex;justify-content:space-between;letter-spacing:0}
/* « De La Marsa » en plus gras (variante B du 2026-10-03, contour .4px ; C = .8px) : la police est déjà à sa graisse maximale (900),
   on épaissit par un contour de la couleur du texte. Supprimer cette ligne = retour à l'ancien logo. */
.pill .brand .txt b.j{-webkit-text-stroke:.4px currentColor}
.pill .brand .ar{font-size:1.9rem;margin-left:10px} /* 20 px entre le nom et le mot arabe (avant : 2px = 12 px) */
/* Calligraphie à la place du mot arabe : son trait est jaune vif, illisible sur la pilule blanche
   translucide du thème clair — on l'y assombrit pour retrouver le doré du texte qu'elle remplace.
   Le pied de page étant sombre dans les deux thèmes, la calligraphie y reste jaune telle quelle. */
.pill .brand .ar-media,.foot .ar-media{display:inline-flex;align-items:center;font-size:0;line-height:0}
.pill .brand .ar-media img{display:block;width:auto;height:42px;transition:none;filter:brightness(.62) saturate(1.15)}
html[data-theme="dark"] .pill .brand .ar-media img{filter:none}
/* La rotation au survol vise toutes les images de la marque : on la réserve au logo. */
.pill .brand:hover .ar-media img{transform:none}
.foot .ar-media img{display:block;width:auto;height:56px}
html[data-theme="dark"] .pill .brand .txt b{color:#FFF}
html[data-theme="dark"] .pill .brand .txt b.y,html[data-theme="dark"] .pill .brand .ar{color:#F7D117}

/* Football : photos choisies dans l'admin à la place des illustrations */
.img .photo,.g .ph .photo{transition:transform 1.2s var(--ease)} /* .g .ph : photos de galerie, même zoom que les illustrations */
.n-big:hover .img .photo,.n-sm:hover .img .photo{transform:scale(1.07)}
.g>img,.g>.photo-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.g:hover>img,.g:hover .ph .photo{transform:scale(1.08)}
.g.haute{grid-row:span 2} /* galerie Tennis : photo sur deux lignes */
.pc-art .photo{object-position:50% 15%}

/* Football : effectif sur une seule ligne, cartes compactes (défilement horizontal au-delà de 6 joueurs ou sur mobile) */
.pgrid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max(150px,calc((100% - 60px) / 6));gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 2px 40px;margin-bottom:-26px;overflow-y:hidden;scrollbar-width:none} /* bas élargi pour ne pas couper l’ombre des cartes */
.pgrid::-webkit-scrollbar{display:none} /* défilement par les flèches, le glisser ou la molette : pas de barres visibles */
.pgrid .pc{scroll-snap-align:start}
.pgrid .pc-in,.pgrid .pc-f{height:100%}
.pgrid .pc-f{display:flex;flex-direction:column}
.pgrid .pc-meta{flex:1;align-items:flex-start;gap:8px;padding:10px 12px}
.pgrid .pc-num{right:10px;font-size:3.6rem}
.pgrid .pc-meta h3{font-size:.9rem}
.pgrid .pc-meta span{font-size:.72rem}
.pgrid .pc-meta b{width:30px;height:30px;border-radius:9px;font-size:.85rem}
.pgrid .pc-b{padding:14px}
.pgrid .pc-b .big{font-size:3.4rem}
.pgrid .pc-b h3{font-size:1rem}
.pgrid .pc-b dl div{font-size:.78rem}
.pgrid .empty{grid-column:1 / span 7}
.p-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px}
.p-foot .hint{margin:0}
.p-arrows{display:flex;gap:8px;flex-shrink:0}
.p-arrows[hidden]{display:none} /* rien à faire défiler : pas de flèches */
.p-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .3s,color .3s,opacity .3s}
.p-arrows button:hover:not(:disabled){background:var(--ink);color:var(--yellow)}
.p-arrows button:disabled{opacity:.35;cursor:default}
.p-arrows svg{width:18px}
html[data-theme="dark"] .p-arrows button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#EEF4EF}
html[data-theme="dark"] .p-arrows button:hover:not(:disabled){background:#F7D117;color:#07140C}
.st-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 2s var(--ease)}
.st-img.in>img{transform:scale(1)}
.sz-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--q) * .3))}

/* Écussons des clubs : blason entier (pas de déformation), plus grands dans les listes, léger contour pour les blasons sombres */
img.crest{object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
html[data-theme="dark"] img.crest{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.tbl .crest,.res-row .crest{width:36px;height:36px}
.res-row .tm{gap:12px}
.fxc-crests .crest{width:54px;height:54px}

/* Classement : hauteur calée sur les rencontres à venir (football.js), défilement interne, en-tête fixe */
#p-classement{position:relative}
#p-classement .tbl-wrap{overflow:auto;overscroll-behavior:contain;margin-top:8px;padding-right:4px}
#p-classement .tbl thead th{position:sticky;top:0;z-index:2;background:var(--card)}
html[data-theme="dark"] #p-classement .tbl thead th{background:#0F1E16}
html[data-theme="dark"] .tbl tr.me td:first-child{box-shadow:none} /* pas de liseré jaune à gauche de notre ligne */
/* Barre de défilement du classement : fine, arrondie, aux couleurs du club (piste invisible) */
#p-classement .tbl-wrap::-webkit-scrollbar{width:6px;height:6px}
#p-classement .tbl-wrap::-webkit-scrollbar-track{background:transparent;margin:44px 0 6px}
#p-classement .tbl-wrap::-webkit-scrollbar-thumb{background:rgba(10,107,52,.45);border-radius:999px}
#p-classement .tbl-wrap::-webkit-scrollbar-thumb:hover{background:var(--green)}
html[data-theme="dark"] #p-classement .tbl-wrap::-webkit-scrollbar-thumb{background:rgba(247,209,23,.4)}
html[data-theme="dark"] #p-classement .tbl-wrap::-webkit-scrollbar-thumb:hover{background:#F7D117}
/* Firefox (pas de ::-webkit-scrollbar) : version standard ; dans Chrome elle annulerait le style ci-dessus */
@supports not selector(::-webkit-scrollbar){
  #p-classement .tbl-wrap{scrollbar-width:thin;scrollbar-color:rgba(10,107,52,.45) transparent}
  html[data-theme="dark"] #p-classement .tbl-wrap{scrollbar-color:rgba(247,209,23,.4) transparent}
}

/* Maillots : les photos étant rognées au plus près du maillot, on cale l'affichage sur la HAUTEUR.
   Tous les maillots font ainsi la même taille à l'écran quel que soit le format de leur photo,
   et cette seule valeur les agrandit ou les réduit ensemble. */
.kit-j .kit-photo{width:auto;height:min(410px,48vw);margin-inline:auto}
/* Maillot avec photo du dos (classe duo posée par football.js) : face devant en bas à gauche, dos derrière en haut
   à droite. Le chevauchement est fixe (15 % de la hauteur), quelle que soit la largeur des photos.
   --kh = hauteur du cadre, comme un maillot seul. */
.kitv.duo .kit-float{width:auto}
.kitv.duo .kit-j{--kh:min(410px,48vw);display:flex;width:max-content;height:var(--kh);margin-inline:auto}
.kitv.duo .kit-j .kit-photo{position:relative;margin:0}
.kitv.duo .kit-j .kit-face{align-self:flex-end;height:88%;z-index:2}
.kitv.duo .kit-j .kit-dos{align-self:flex-start;height:80%;z-index:1;margin-left:calc(var(--kh) * -.15)}

/* Histoire, origines : paragraphes sans pastille de date, sur toute la largeur */
.o-step{grid-template-columns:1fr}

/* Football : bandeau des partenaires un peu plus haut (il occupe seul la rangée). */
.nh-strip .b-sp{padding-top:22px;padding-bottom:22px}
.nh-strip .sp img{--s:60px}
.nh-strip .b-sp .sp{height:auto;min-height:64px} /* un logo agrandi (Warda) peut dépasser 64 px sans être rogné */

/* En-tête : liens de la page calés à droite, à côté du bouton sombre/clair */
.pill .brand{margin-right:auto}
.pill .brand>img{width:50px;height:50px} /* logo du bandeau (42 px par défaut) */

/* Pied de page : le logo seul, avec le nom arabe à sa droite (nom et description retirés). */
.foot-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-brand .brand{display:inline-flex}
.foot .foot-ar{font-size:clamp(2.3rem,3.7vw,3.1rem);line-height:1;margin:0}

/* Palmarès : un seul compteur (total) en bandeau */
.stats.one{grid-template-columns:1fr}
.stats.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.stats.two{grid-template-columns:1fr}}
.stats.one .stat{display:flex;align-items:baseline;gap:18px}

/* ---------------- pied de page (bloc vert arrondi de la page, contenu sobre) ---------------- */
.foot{padding:0;margin:90px 0 0;border-radius:0;background:#0C1A12;border:1px solid rgba(255,255,255,.08);border-width:1px 0 0} /* pleine largeur, sans coins arrondis, comme l'en-tête des sections (plus de clip-path : il ne servait qu'à couper les coins arrondis sur iPhone) */
html[data-theme="dark"] .foot{background:#0C1A12;border:1px solid rgba(255,255,255,.08);border-width:1px 0 0}
.foot .mesh::after{display:none} /* pas de trame de points */
.foot .mesh i:nth-child(1){animation-duration:10s}.foot .mesh i:nth-child(2){animation-duration:8.5s}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:30px 0}
.foot-brand .brand img{width:64px;height:64px}
.foot .socials{margin:0 0 0 auto;gap:12px}
.foot .socials a{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:none;color:rgba(255,255,255,.88);transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.foot .socials a svg{width:17px;height:17px}
.foot .socials a:hover{background:var(--yellow);border-color:var(--yellow);color:#07140C;transform:translateY(-2px)}
.foot .legal{margin:0;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.12);align-items:center;font-size:.85rem;color:rgba(255,255,255,.72)}
.foot .legal nav{gap:6px 0;align-items:center}
/* Liens légaux : même style que la ligne du copyright (police, taille, casse, couleur) ; jaune au survol */
.foot .legal nav a{font:inherit;letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.72);transition:color .25s}
.foot .legal nav li{list-style:none;display:inline-flex;align-items:center}
.foot .legal nav li+li::before{content:"·";display:inline-block;margin:0 14px;color:rgba(255,255,255,.35)}
.foot .legal nav a:hover{color:var(--yellow)}
@media (max-width:640px){.foot .legal{flex-direction:column;align-items:flex-start}}

/* ---------------- pages de texte (page.php) ---------------- */
.page-texte{padding-top:110px}
.page-texte .prose{padding:clamp(22px,4vw,44px);max-width:860px;line-height:1.7}
.page-texte .prose>*:first-child{margin-top:0}
.page-texte .prose h2{font-size:1.35rem;margin:1.8em 0 .5em}
.page-texte .prose a{color:var(--green);text-decoration:underline}
html[data-theme="dark"] .page-texte .prose a{color:var(--yellow)}

/* Taches vert et jaune animées du pied de page, fixes derrière toute la page (le hero, opaque, les recouvre) */
.p-mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.p-mesh i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.12}
.p-mesh i:nth-child(1){width:62%;aspect-ratio:1;background:#12894A;left:-14%;top:-24%;animation:pBlob1 10s ease-in-out infinite alternate}
.p-mesh i:nth-child(2){width:46%;aspect-ratio:1;background:#FFD21F;right:-14%;bottom:-20%;animation:pBlob2 8.5s ease-in-out infinite alternate}
@keyframes pBlob1{to{transform:translate(32%,26%) scale(1.2)}}
@keyframes pBlob2{to{transform:translate(-36%,-32%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.p-mesh i:nth-child(n){animation:none}} /* :nth-child(n) : aussi précis que les règles qui lancent l'animation */

/* Stade immersif : au départ, la photo a déjà la largeur du contenu (alignée sur le bloc maillots) */
.sz-media{clip-path:inset(calc(var(--q) * 5%) calc(var(--q) * max(0px, (100% - min(1240px, 100% - 8px)) / 2)) round calc(var(--q) * 24px))}
.sz-head .sec-head{margin-bottom:0}
.sz{margin-top:0}
.sz-facts{display:flex;flex-wrap:wrap;gap:8px} /* pastilles à la suite : une ligne se remplit avant de passer à la suivante */

/* Galerie, carte « Voir toutes les photos » en mode sombre : texte jaune au repos (le survol reste inchangé) */
html[data-theme="dark"] .g.more:not(:hover){color:#FFD21F}
/* Carte « Voir toutes les photos » : l'écriture remonte sous le nombre, la flèche reste en bas à droite */
.g.more{position:relative;justify-content:flex-start;align-items:stretch;text-align:left;gap:6px;padding-top:44px} /* align-items:stretch : un lien <a> était centré (« 48 » au milieu, texte à gauche) */
button.g.more{border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%} /* tuile « Voir les photos » qui ouvre la visionneuse */
.g.more span i{position:absolute;right:24px;bottom:24px}

/* Sans rotation : logo du header et maillots (survol et changement de maillot en simple fondu) */
.brand:hover img{transform:scale(1.05)}
.kit-stage:hover .kit-photo{transform:scale(1.04)}
.kit-j.out{animation-name:kOutPlat}
.kit-j.inn{animation-name:kInPlat}
@keyframes kOutPlat{to{transform:scale(.94);opacity:0}}
@keyframes kInPlat{from{transform:scale(.94);opacity:0}}

/* Bandeau partenaires sous le hero : logos plus espacés, bloc un peu plus aéré */
.b-sp{padding:16px 16px 16px 28px}
.b-sp .sp{padding-inline:48px;height:64px}
.nh-strip{padding-top:36px} /* plus d'air entre le hero et les blocs du dessous */


/* Histoire, écusson officiel : pas de rotation au survol */
.crest-art:hover .coin img{transform:none}

/* Lien « Toutes les actualités » à droite du titre des blocs Actualités */
.sec-lien{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sec-lien svg{width:18px;transition:transform .35s var(--ease)}
.sec-lien:hover svg{transform:translateX(4px)}
html[data-theme="dark"] .sec-lien{color:var(--yellow)}
/* Football Jeunes : bandeau partenaires + logo du club à droite du hero (comme les pages de section). */
.nh-inner:has(> .tn-spons){grid-template-columns:minmax(0,1fr) auto;align-items:end}
.nh-inner > .tn-spons span img{filter:brightness(0) invert(1)} /* logos gris illisibles sur le fond sombre : en blanc */
.nh-inner > .nh-match,.tn-inner > .nh-match{grid-column:1/-1} /* Football, Volleyball : le prochain match reste sur toute la largeur sous le titre et les logos */
/* Logos alignés sur le bas du titre, comme les pages de section, et non sur les boutons dessous
   (boutons 50 px + leur marge 28 px + 4 px pour le pied des lettres). */
@media (max-width:1100px){.nh-inner:has(> .tn-spons){grid-template-columns:minmax(0,1fr)}.nh-inner > .tn-spons{justify-self:start;flex-wrap:wrap}}
/* Football : logos des partenaires « bandeau » posés sur la photo du hero (style « nu » des sections, section.css n'étant pas chargé ici). */
.nh-foot .tn-spons{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:34px;opacity:0;animation:nhUp 1.1s 1.35s var(--ease) forwards}
.nh-foot .tn-spons span{color:#fff;opacity:.72;white-space:nowrap;transition:opacity .3s,transform .3s var(--ease)}
.nh-foot .tn-spons span:hover{opacity:1;transform:translateY(-2px)}
.nh-foot .tn-spons span img{display:block;width:auto;height:calc(60px * var(--k,.8) * var(--z,1))}
/* Football et Football Jeunes & Académie uniquement : logos du hero centrés sur la rangée des boutons
   (Calendrier / L'effectif, La section / Galerie) au lieu du bas du titre. Boutons : 50 px de haut. */
@media (min-width:1101px){
	.nh-inner:has(> .nh-copy .nh-actions) > .tn-spons{margin-bottom:82px} /* logos alignés sur le bas du titre (voir le commentaire plus haut) */
	.nh-foot .nh-inner:has(> .nh-copy .nh-actions) > .tn-spons,
	.nh-jeunes .nh-inner:has(> .nh-copy .nh-actions) > .tn-spons{margin-bottom:0;height:50px;align-items:center;align-content:center} /* hauteur des boutons : logos centrés sur eux, même plus hauts */
}
/* Rencontres à venir (Volleyball, Basketball…) : date de la prochaine rencontre à droite du titre */
.sec-sub{margin:0;font-size:.9rem;font-weight:600;color:var(--muted)}
/* ---------------- Accueil : mobile et tablette (2026-10-04) ----------------
   Sauvegarde de la version précédente du thème : _archive/asm-avant-responsive-2026-10-04 */
.tbl .fm-m{display:none} /* forme répétée sous le nom du club, affichée seulement sur mobile */
.tbl th abbr{text-decoration:none;cursor:help} /* J, V, D, Diff : intitulé complet au survol */
@media (max-width:760px){
	/* Prochain match : la règle « inv infos-g logo » (4 classes) l'emportait sur la colonne unique → 100 px hors écran.
	   Mobile : logo compétition + infos du match sur une ligne, puis les équipes, puis le compte à rebours. */
	.nh-match.inv.infos-g{grid-template-columns:minmax(0,1fr);row-gap:18px}
	.nh-match.inv.infos-g.logo{grid-template-columns:auto minmax(0,1fr);column-gap:14px}
	.nh-match.inv.infos-g > *,.nh-match.inv.infos-g > .nh-teams,.nh-match.inv.infos-g > .nh-cd{order:1;grid-column:1/-1}
	.nh-match.inv.infos-g > .nh-comp,.nh-match.inv.infos-g > .nh-m-head{order:0}
	.nh-match.inv.infos-g.logo > .nh-comp{grid-column:1;justify-content:flex-start;padding-right:14px;border-right:1px solid var(--nl2)}
	.nh-match.inv.infos-g.logo > .nh-m-head{grid-column:2;align-self:center}
	.nh-match.inv.infos-g .nh-comp img{height:40px}
	.nh-match.inv.infos-g .nh-teams{justify-content:space-between}
	.nh-match.inv.infos-g .nh-cd{justify-self:stretch;padding-top:16px;border-top:1px solid var(--nl2)}
	.nh-match.inv.infos-g .nh-cd-n{justify-content:center;gap:14px}
	/* Le match passe avant les logos partenaires : l'info clé remonte dans le premier écran. */
	.nh-inner > .nh-match,.tn-inner > .nh-match{order:1}
	.nh-inner > .tn-spons,.tn-inner:has(> .nh-match) > .tn-spons{order:2}
	.nh-foot .tn-spons span img{max-width:100%;object-fit:contain} /* taille : voir la règle « 50 px de base » en fin de fichier */
	/* Logos partenaires des en-têtes (accueil et sections) : grille de 3 au lieu de 2 + 1. */
	.tn-inner > .tn-spons,.nh-inner > .tn-spons{display:grid;grid-template-columns:repeat(3,1fr);place-items:center;gap:16px 10px;justify-self:stretch}
	/* Formations : deux colonnes de cartes compactes, sans hauteur minimale, au lieu d'une carte par ligne. */
	.tn-progs{grid-template-columns:1fr 1fr;gap:10px}
	.tn-progs .prog{min-height:0;padding:16px}
	.tn-progs .prog h3{font-size:clamp(1rem,9cqi,1.2rem)}
}
@media (max-width:640px){
	.nh{padding-top:230px}
	/* Classement : les 5 derniers matchs restent sur la ligne du club (pastilles de 12 px), sans barre de points ni fond sur la position. */
	#p-classement .tbl{min-width:0;table-layout:fixed;font-size:.88rem}
	#p-classement .tbl th:nth-child(1){width:28px}#p-classement .tbl th:nth-child(3){width:20px}#p-classement .tbl th:nth-child(4){width:32px}#p-classement .tbl th:nth-child(5){width:68px}#p-classement .tbl th:nth-child(6){width:26px}
	#p-classement .tbl th,#p-classement .tbl td{padding-left:3px;padding-right:3px}
	#p-classement .tbl td{padding-top:10px;padding-bottom:10px}
	#p-classement .tbl th{font-size:.62rem;letter-spacing:.04em}
	#p-classement .tbl .pos{text-align:center}
	#p-classement .tbl .pos span,#p-classement .tbl tr.me .pos span{display:inline;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-size:.95rem}
	#p-classement .tbl .crest{width:22px;height:22px;flex:none}
	#p-classement .tbl .club{gap:6px}
	#p-classement .tbl .club-t{min-width:0;font-size:.84rem;line-height:1.15}
	#p-classement .tbl .fm{gap:2px}
	#p-classement .tbl .fm i{width:12px;height:12px;border-radius:3px;font-size:.5rem}
	#p-classement .ptsc{gap:0}#p-classement .ptsbar{display:none}
	/* Classement basket (Pos, Club, J, V, D, Diff, Pts) : pas de colonne « 5 derniers », largeurs propres */
	#p-classement .tbl.bk th:nth-child(n+3){width:24px}#p-classement .tbl.bk th:nth-child(6){width:36px}#p-classement .tbl.bk th:nth-child(7){width:28px}#p-classement .tbl.bk.jp th:nth-child(4){width:34px} /* Handball : Pos, Club, J, Pts */
	#p-classement .tbl.bk.jdp th:nth-child(4){width:36px}#p-classement .tbl.bk.jdp th:nth-child(5){width:34px} /* Volleyball : Pos, Club, J, Diff, Pts */
	/* Partenaires : 3 colonnes plus basses au lieu de 2 (hauteur de la section divisée par deux). */
	.partners{grid-template-columns:repeat(3,1fr);gap:8px}
	.partners a{height:88px}
	.partners img{--s:44px}
	.partner-name{font-size:.9rem;padding:0 6px}
	.partners .become{grid-column:1/-1;height:60px}
}
/* Écrans tactiles : zones à toucher plus hautes sans changer la mise en page. */
@media (pointer:coarse){
	/* Pastille de la page en cours : 30 px de haut et arrondi complet, comme le bouton Fans. Le lien garde 38 px à toucher ; le fond est dessiné par ::before
	   (une bordure transparente donnait des coins moins ronds : rayon horizontal 19 px, vertical 15 px). */
	.sports a,.sports .sub a{padding-top:9px;padding-bottom:9px;line-height:20px}
	.sports a[aria-current],.sports .sub a[aria-current]{position:relative;z-index:0;background:none!important}
	.sports a[aria-current]::before,.sports .sub a[aria-current]::before{content:"";position:absolute;inset:4px 0;z-index:-1;border-radius:999px;background:var(--ink)}
	html[data-theme="dark"] .sports a[aria-current]::before,html[data-theme="dark"] .sports .sub a[aria-current]::before{background:#FFD21F}
	.sec-lien{padding:12px 0;margin:-12px 0}
	.foot .legal nav a{display:inline-block;padding:10px 0}
	.lang a{padding-top:7px;padding-bottom:7px} /* sélecteur FR / AR */
}

/* ---------------- Autres pages : mobile (2026-10-04) ---------------- */
@media (max-width:640px){
	/* Texte justifié sur colonne étroite : césure pour éviter les grands blancs entre les mots. */
	p{-webkit-hyphens:auto;hyphens:auto}
	/* Textes courts des cartes : alignés à gauche, la justification y creuse des trous. */
	.ev p,.sc p,.prog p{text-align:left}
	.sc p{max-width:none}
	/* Histoire, chronologie : les 4 époques tiennent sur une ligne, moins d'emboîtement autour des événements. */
	#chronologie .seg{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
	#chronologie .seg button{padding:0 4px;font-size:.78rem}
	.chrono{padding:16px}
	.evs{padding-left:20px}
	.ev{padding:14px}
	.ev::before{left:-20px}
	.sc{padding:20px;min-height:0}
}

/* ---------------- Pages de section et Histoire : mobile (2026-10-04, d'abord testé sur Académie et Jeunes) ---------------- */
.tn-plus{display:none}
@media (max-width:640px){
	/* Rythme : 64 px entre les sections au lieu de 90 sur téléphone (Football, sections, Histoire). */
	:is(.page-template-page-football,.page-section,.page-template-page-histoire) main > .sec{padding-top:64px}
	:is(.page-section,.page-template-page-histoire){
		/* Présentation : ~7 lignes visibles, fondu vers le bas, puis « Lire la suite ». */
		& .tn-corps{max-height:calc(1.6em * 7 + 32px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
		& .tn-corps.ouvert{max-height:none;-webkit-mask-image:none;mask-image:none}
		& .tn-corps.ouvert > :nth-child(n+2){animation:tnSuite .5s var(--ease) backwards} /* la suite apparaît en fondu, sans animer la hauteur */
		& .tn-plus{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;padding:0;border:0;background:none;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);cursor:pointer;transition:transform .16s var(--ease)}
		& .tn-plus svg{width:18px;transform:rotate(90deg)}
		& .tn-plus:active{transform:scale(.97)}
		/* Cartes : interligne serré pour les titres, deux tailles nettes (pleine largeur / demi-largeur). */
		& .tn-progs .prog h3{line-height:1.2;margin:8px 0 6px}
		& .tn-progs .prog[style*="1/-1"] h3,& .tn-progs .prog.comp h3{font-size:1.35rem}
		& .tn-progs .prog p{line-height:1.45}
		/* Histoire : cartes des sections, titre plus serré. */
		& .sc h3{font-size:1.25rem;line-height:1.2}
	}
}
/* Tactile : retour à l'appui, pas d'effet de survol qui reste affiché après un toucher. */
@media (pointer:coarse){
	:is(.page-section,.page-template-page-histoire){
		-webkit-tap-highlight-color:transparent;
		& .nh-btn{transition:transform .16s var(--ease),background-color .25s}
		& .nh-btn:active{transform:scale(.97)}
		& .g:hover figcaption{transform:none}
		& .g:hover svg{transform:none}
		& .g:active{transform:scale(.98);transition:transform .16s var(--ease)}
		& a.sc:hover{transform:none;box-shadow:none}
		& a.sc:hover img{opacity:.14;transform:none}
		& a.sc:active{transform:scale(.98);transition:transform .16s var(--ease)}
	}
}
@keyframes tnSuite{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){:is(.page-section,.page-template-page-histoire) .tn-corps.ouvert > :nth-child(n+2){animation:none}} /* même sélecteur que la règle qui l'anime */

/* ---------------- Actualités et Médias : mobile (2026-10-04) ---------------- */
@media (max-width:640px){
	:is(.page-template-page-actualites,.page-template-page-photos){
		/* Filtres : une seule ligne qui défile (Médias en avait 5), bord à bord, fondu à droite. */
		& .act-filtres{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
		& .act-filtres::-webkit-scrollbar{display:none}
		& .act-filtres a{flex-shrink:0;white-space:nowrap;scroll-snap-align:start}
		& .act-filtres a:last-child{margin-right:24px}
	}
	/* Actualités : liste compacte (vignette carrée + titre) au lieu de grandes cartes empilées. */
	.page-template-page-actualites{
		& .act-grid{gap:10px}
		& .act-c{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
		& .act-c .img{aspect-ratio:auto;min-height:104px}
		& .act-c-body{padding:12px 14px;justify-content:center}
		& .act-c-meta{font-size:.68rem}
		& .act-c h3{font-size:1rem;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
		& .act-c .read{display:none} /* toute la ligne est le lien */
		/* Lignes de hauteur fixe : la vignette (logo compris) garde la même taille d'une ligne à l'autre ; titre et extrait sur 2 lignes au plus. */
		& .act-c{height:132px}
		& .act-c h3{-webkit-line-clamp:2}
		& .act-c-body{overflow:hidden}
	}
}
/* Tactile : retour à l'appui, pas d'effet de survol qui reste affiché après un toucher. */
@media (pointer:coarse){
	:is(.page-template-page-actualites,.page-template-page-photos){
		-webkit-tap-highlight-color:transparent;
		& .act-filtres a{min-height:44px;display:inline-flex;align-items:center}
		& :is(.act-c,.act-une):hover{transform:none;box-shadow:none}
		& :is(.act-c,.act-une):hover .photo,& :is(.ph-t,.ph-a figure):hover .photo{transform:none}
		& :is(.act-c,.act-une,.ph-t,.ph-a figure,.act-filtres a,.act-plus a){transition:transform .16s var(--ease),background-color .3s,color .3s,border-color .3s}
		& :is(.act-c,.act-une,.ph-a figure):active{transform:scale(.98)}
		& :is(.act-filtres a,.act-plus a):active{transform:scale(.96)}
	}
}

/* ---------------- Football (accueil) et pages de section : mobile, 2e passe (2026-10-04) ---------------- */
@media (max-width:640px){
	:is(.page-template-page-football,.page-section){
		/* Actualités : les petites cartes deviennent une liste compacte (vignette + titre), comme sur la page Actualités (aussi dans le bloc Actualités des pages de section). */
		& .n-col{gap:10px}
		& .n-sm{grid-template-columns:104px minmax(0,1fr)}
		& .n-sm .img{min-height:104px}
		& .n-sm .n-body{padding:12px 14px;justify-content:center}
		& .n-sm h3{font-size:1rem;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
		& .n-sm .read{display:none} /* toute la ligne est le lien */
		& .n-big p{text-align:left} /* résumé court sur fond photo : la justification y creusait des trous */
	}
}
/* Tactile : retour à l'appui, pas d'effet de survol qui reste affiché après un toucher. */
@media (pointer:coarse){
	:is(.page-template-page-football,.page-section){
		-webkit-tap-highlight-color:transparent;
		& :is(.res,.fxc,.n-sm,.partners a):hover{transform:none;box-shadow:none}
		& :is(.n-big,.n-sm):hover .img :is(.photo,svg),& .kit-stage:hover .kit-photo,& .g:hover > img,& .g:hover :is(figcaption,svg,.ph .photo){transform:none}
		& :is(.n-big,.n-sm,.g,.partners a,.nh-btn){transition:transform .16s var(--ease),box-shadow .3s,background-color .25s}
		& :is(.n-big,.n-sm,.g,.partners a):active{transform:scale(.98)}
		& .nh-btn:active{transform:scale(.97)}
	}
}

/* ---------------- Article : mobile (2026-10-04) — le texte reste justifié (règle du site), avec césure ---------------- */
@media (max-width:640px){
	.single-post{
		/* Colonne de lecture plus large : la carte déborde un peu sur les marges, moins de marge intérieure (278 → 323 px de texte). */
		& .art-card{margin-inline:-8px;padding:26px 18px}
		& .art-aussi{padding-top:64px}
		/* À lire aussi : liste compacte (vignette + titre), comme Actualités et l'accueil. */
		& .art-grid{gap:10px}
		& .art-grid .n-sm{grid-template-columns:104px minmax(0,1fr)}
		& .art-grid .n-sm .img{min-height:104px}
		& .art-grid .n-sm .n-body{padding:12px 14px;justify-content:center}
		& .art-grid .n-sm h3{font-size:1rem;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
		& .art-grid .n-sm .read{display:none}
	}
}
/* Tactile : retour à l'appui, pas d'effet de survol qui reste affiché après un toucher. */
@media (pointer:coarse){
	.single-post{
		-webkit-tap-highlight-color:transparent;
		& :is(.art-share a,.art-copy){height:44px;min-width:44px;transition:transform .16s var(--ease),background-color .3s,color .3s,border-color .3s}
		& :is(.art-share a,.art-copy):active{transform:scale(.95)}
		& .n-sm:hover{transform:none;box-shadow:none}
		& .n-sm:hover .img :is(.photo,svg){transform:none}
		& .n-sm{transition:transform .16s var(--ease)}
		& .n-sm:active{transform:scale(.98)}
	}
}

/* ---------------- Pages de texte (mentions légales…) : mobile (2026-10-04) ---------------- */
@media (max-width:640px){
	.page-texte{
		/* Colonne de lecture plus large, comme la page article. */
		& .prose{margin-inline:-8px;padding:22px 18px}
		/* Accordéon construit par site.js : une ligne par rubrique, on ouvre celle qu'on cherche. */
		& .pl-bloc{border-top:1px solid var(--line)}
		& .pl-bloc:last-child{border-bottom:1px solid var(--line)}
		& .prose .pl-bloc h2{margin:0;font-size:1.1rem;line-height:1.3}
		& .pl-bloc button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:56px;padding:14px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;text-wrap:balance}
		& .pl-bloc button svg{flex-shrink:0;color:var(--green);transition:transform .2s cubic-bezier(.23,1,.32,1)}
		& .pl-bloc button[aria-expanded="true"] svg{transform:rotate(180deg)}
		& .pl-corps{padding-bottom:14px;animation:tnSuite .35s var(--ease)}
		& .pl-corps>*:first-child{margin-top:0}
	}
}
@media (pointer:coarse){
	.page-texte{
		-webkit-tap-highlight-color:transparent;
		& .pl-bloc button{transition:opacity .16s}
		& .pl-bloc button:active{opacity:.6}
	}
}
@media (prefers-reduced-motion:reduce){.page-texte .pl-corps{animation:none}} /* même sélecteur que la règle qui l'anime */
html[data-theme="dark"] .page-texte .pl-bloc button svg{color:var(--yellow)}

/* ---------------- En-tête mobile : calligraphie à sa vraie taille (option B, 2026-10-04) ----------------
   À 375 px, la barre n'avait pas la place : la calligraphie était écrasée à 6 px de large.
   Sur téléphone, le bouton jour/nuit quitte la barre et devient la ligne « Mode sombre » du menu (theme.js). */
.theme-menu{display:none}
@media (max-width:640px){
	.pill .theme-btn{display:none}
	.pill .brand .ar-media{flex-shrink:0} /* jamais déformée : elle garde ses proportions */
	.main.open .theme-menu{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:4px;padding:14px 18px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;font:inherit;font-size:.9rem;font-weight:600;color:var(--muted);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
	.theme-menu i{position:relative;flex-shrink:0;width:42px;height:24px;border-radius:12px;background:var(--line);transition:background-color .2s}
	.theme-menu i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.23,1,.32,1)}
	.theme-menu[aria-pressed="true"] i{background:#F7D117}
	.theme-menu[aria-pressed="true"] i::after{transform:translateX(18px)}
	.theme-menu:active i::after{transform:scale(.92)}
	.theme-menu[aria-pressed="true"]:active i::after{transform:translateX(18px) scale(.92)}
	html[data-theme="dark"] .main.open .theme-menu{border-top-color:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
	html[data-theme="dark"] .theme-menu:not([aria-pressed="true"]) i{background:rgba(255,255,255,.18)}
}
/* Très petits écrans (iPhone SE 1re génération, 320 px) : tout réduit un peu, proportions gardées. */
@media (max-width:360px){
	.pill .brand>img{width:42px;height:42px}
	.pill .brand .txt b{font-size:16px}
	.pill .brand .ar{margin-left:8px}
	.pill .brand .ar-media img{height:34px}
}

/* ---------------- Football, maillots : mobile (2026-10-04) ----------------
   La hauteur des maillots suivait 48 % de la largeur d'écran (180 px à 375 px).
   Sur téléphone : marges de la scène réduites et hauteur calculée pour remplir la largeur.
   Face + dos côte à côte ≈ 1,3 × la hauteur (photos d'environ 0,8 de large pour 1 de haut). */
@media (max-width:640px){
	.page-template-page-football{
		& .kit-stage{padding:24px 12px}
		& .kit-j .kit-photo{height:min(410px,calc((100vw - 56px) * .78))}
		& .kitv.duo .kit-j{--kh:min(410px,calc((100vw - 56px) / 1.3))}
		/* Filigrane « Domicile / Extérieur » : plus présent (8 % → 20 %), à la taille de l'écran. */
		& .kit-big{font-size:19vw;opacity:.2;bottom:-2%}
	}
}

/* ---------------- Stade et pied de page : mobile (2026-10-04) ---------------- */
@media (max-width:640px){
	/* Stade : pastilles à la suite sur 2 lignes (au lieu d'une par ligne), un peu plus compactes. */
	.sz-facts{align-items:center;gap:6px}
	.sz-facts span{padding:6px 10px;font-size:.78rem}
	/* Pied de page : logo + calligraphie et réseaux sociaux sur la même ligne, boutons plus petits. */
	.foot-top{flex-wrap:nowrap;gap:12px;padding:22px 0}
	.foot-brand{flex-wrap:nowrap;gap:10px;min-width:0}
	.foot-brand .brand img{width:48px;height:48px}
	.foot .ar-media img{height:40px}
	.foot .foot-ar:not(.ar-media){font-size:1.9rem}
	.foot .socials{flex-shrink:0;gap:8px}
	.foot .socials a{width:36px;height:36px}
	.foot .socials a svg{width:15px;height:15px}
}

/* ---------------- Football : retours du test sur iPhone (2026-10-04) ---------------- */
@media (max-width:640px){
	/* Tuile « 48 · Voir toutes les photos » (accueil et pages de section) : à l'échelle de la petite tuile, le texte ne passe plus sous la flèche. */
	:is(.page-template-page-football,.page-section){
		& .g.more{padding:16px;gap:4px}
		& .g.more b{font-size:2.6rem}
		& .g.more span{padding-right:44px;font-size:.85rem;line-height:1.3}
		& .g.more span i{right:14px;bottom:14px;width:36px;height:36px}
	}
	.page-template-page-football{
		/* Maillots : l'ombre portée faisait un rectangle sombre sous Safari iPhone ; pas d'espace vide au-dessus. */
		& .kit-j{filter:none}
		& .kit-stage{min-height:0;padding:4px 12px 44px}
		/* « Entrez dans le stade » : même écart entre le titre et l'image que les autres blocs. */
		& .sz-head .sec-head{margin-bottom:30px}
	}
	/* Liens légaux du pied de page : lignes plus serrées. */
	.foot .legal nav{row-gap:0}
	.foot .legal nav a{padding-top:5px;padding-bottom:5px} /* voulu : l'emporte sur la zone tactile de 10 px (bloc pointer:coarse) pour garder des lignes serrées */
	/* Point de séparation placé après chaque lien (et non avant) : à la coupure, il reste en fin de 1re ligne. */
	.foot .legal nav li+li::before{content:none}
	.foot .legal nav li:not(:last-child)::after{content:"·";display:inline-block;margin:0 7px;color:rgba(255,255,255,.35)}
}

/* ---------------- Héros, chiffres clés, boutons et prochain match : mobile (2026-10-04) ---------------- */
@media (max-width:640px){
	/* Histoire, chiffres clés : grille 2 × 2 (option A). Les 4 cartes empilées en pleine largeur prenaient ~500 px ; deux par ligne, ~190 px. */
	.page-template-page-histoire .nh-strip{
		& .bento{gap:10px}
		& .stat{grid-column:span 6;padding:16px}
		& .stat b{font-size:2rem}
		& .stat span{display:block;margin-top:6px;font-size:.82rem;line-height:1.3}
	}

	/* Histoire, hero : carte dézoomée. La carte panoramique (2000 × 758) était agrandie pour remplir toute la hauteur de l'écran :
	   on n'en voyait que ~18 %, floue. Elle devient une bande à 42 % de la hauteur du hero, derrière le titre : ~45 % de la carte,
	   bien plus nette. Teinte et dégradés d'origine conservés ; bords haut et bas fondus.
	   (L'essai « carte pivotée », option B, a été retiré à la demande de l'utilisateur.) */
	.page-template-page-histoire .nh-photo img.photo:not(.nh-fill){inset:auto;top:10%;left:62%;width:auto;height:42%;max-width:none;transform:translateX(-50%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}

	/* Histoire, hero : la carte défile de droite à gauche (du bord droit de la carte au bord gauche en 38 s, puis retour, en boucle) pendant que le
	   zoom lent de .nh-photo continue. Sans animation (mouvement réduit), la carte reste centrée comme ci-dessus. */
	@media (prefers-reduced-motion:no-preference){
		.page-template-page-histoire .nh-photo img.photo:not(.nh-fill){left:4%;transform:translateX(0);animation:hPanCarte 38s cubic-bezier(.45,0,.35,1) infinite alternate both}
	}

	/* Football, hero : photo dézoomée. La photo (2000 × 1334) remplissait ~1050 px de haut : on n'en voyait que ~29 % de la largeur.
	   Bande à 52 % de la hauteur, centrée sur les joueurs, fondue vers le bas → ~55 % visible. */
	.page-template-page-football .nh-foot .nh-photo img{width:auto;height:52%;max-width:none;margin-left:50%;transform:translateX(-45%);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}

	/* Pages de section, hero : photo dézoomée, comme Football. La photo (1,3 à 2,1 fois plus large que haute) remplissait ~900 px
	   de haut, on n'en voyait que 24 à 37 % de la largeur. Bande à 52 % de la hauteur, sous l'en-tête, fondue vers le bas
	   (~50 à 70 % de la largeur visible). Les pages chargent la grande photo (attribut sizes dans les gabarits). */
	.page-section .nh-photo img.photo{inset:auto;top:8%;left:50%;width:auto;min-width:100%;height:52%;max-width:none;object-fit:cover;transform:translateX(-53%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent)}
	.page-template-page-football-jeunes .nh-photo img:not(.photo){width:auto;min-width:100%;object-fit:cover;height:52%;max-width:none;margin:8vh 0 0 50%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 62%,transparent)}
	/* Athlétisme : photo presque carrée (1444 × 1536) ; à 52 % de haut elle était moins large que l'écran.
	   min-width:100 % ci-dessus règle les bandes pour toutes les pages ; ici un peu plus de zoom. */
	.page-section .hero-athletisme .nh-photo img.photo{height:60%}

	/* Football et Académie, boutons du hero : même gabarit que les onglets « Classement / Calendrier »
	   (42 px de haut, 14,4 px, minuscules), les deux boutons de la même largeur (celle du plus long). */
	:is(.page-template-page-football,.page-template-page-football-jeunes) .nh-actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
	:is(.page-template-page-football,.page-template-page-football-jeunes) .nh-actions .nh-btn{justify-content:center;min-height:42px;padding:0 18px;font-size:.9rem;font-weight:600;letter-spacing:normal;text-transform:none;gap:8px}
	:is(.page-template-page-football,.page-template-page-football-jeunes) .nh-actions .nh-btn svg{width:16px;height:16px}

	/* Football, prochain match : logo de la compétition centré sur l'écusson en dessous (colonne de 38 px = l'écusson),
	   la ligne de séparation et les infos se décalent d'autant ; lignes d'infos un peu plus serrées. */
	.nh-match.inv.infos-g.logo > .nh-comp{box-sizing:content-box;width:38px;justify-content:center}
	.nh-match.inv.infos-g .nh-m-head{gap:5px}
	.nh-match.inv.infos-g .nh-meta{row-gap:2px;line-height:1.35}
}

/* Prochain match : pastille jaune centrée sur les icônes (16 px) en dessous, et les trois textes alignés. */
.nh-match .nh-m-head .nh-eyebrow{gap:6px}
.nh-match .nh-m-head .nh-eyebrow::before{margin:0 4px}

/* Bloc lieu à deux salles (Volleyball « La salle ») en version simple (mobile) : hauteur du contenu.
   « .sz.duo{height:360vh} » (section.css) l'emportait sur « .sz.static{height:auto} » → ~1500 px de vide. */
.sz.duo.static{height:auto}

/* Mobile (2026-10-05) : allègement GPU sur tout le site (testé d'abord sur Football).
   Entrées sans flou animé, fonds flous figés, pastilles d'onglets sans transition de largeur. */
@keyframes rvInSans{from{opacity:0;transform:translateY(30px) scale(.97)}}
@keyframes wInSans{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes nhPhotoInSans{from{opacity:0;transform:scale(1.16)}to{opacity:1;transform:scale(1.03)}}
@keyframes nhPhotoInHbSans{from{opacity:0;transform:scale(1.13)}to{opacity:1;transform:scale(1)}}
@media (max-width:640px){
	.rv.in,.facts-tn.in .fr,.palm-slide.swap,.era-panel.swap .era-head,.era-panel.swap .ev{animation-name:rvInSans}
	.h1 .w,.lead{animation-name:wInSans}
	:is(.page-template-page-football,.page-template-page-football-jeunes,.page-section) .nh-photo{animation-name:nhPhotoInSans,nhKb}
	.hero-handball .nh-photo{animation-name:nhPhotoInHbSans,nhKbHb}
	.p-mesh i:nth-child(n),.mesh i:nth-child(n){animation:none} /* :nth-child(n) : sinon .mesh i:nth-child(1) (football.css, histoire.css) l'emportait et les taches tournaient encore */
	.ind,.seg-ind{transition:transform .5s var(--ease),opacity .3s}
}

/* Titres équilibrés sur tout le site, et la lightbox garde ses gestes (la page derrière ne défile pas). */
h1,h2,h3{text-wrap:balance}
.lbox{overscroll-behavior:contain}

/* Mobile (2026-10-06) : hero sans faisceaux de lumière ; « Rencontres à venir » : un match par ligne, 3 visibles puis « Voir la suite ». */
.fx-plus{display:none}
@media (max-width:640px){
	.nh-beam{display:none}
	.fx-grid{grid-template-columns:1fr}
	.fx-grid:not(.tout) > .fxc:nth-child(n+4){display:none}
	/* Carte de match : le nom de chaque équipe sous son logo, équipes écartées du « vs », carte plus basse. */
	.fxc{display:grid;grid-template-columns:1fr auto 1fr;column-gap:20px;align-items:start;padding:18px 14px 19px}
	.fxc-top{grid-column:1 / -1;justify-content:center;gap:8px;line-height:1.2} /* journée et lieu au milieu : « J6 · Domicile » */
	.fxc-top b::after{content:"·";margin-left:8px;font-family:var(--body,inherit);color:var(--muted)}
	.fxc-top .where{padding:2px 9px}
	.fxc-crests,.fxc p{display:contents}
	.fxc p br{display:none}
	.fxc-crests{margin:0}
	.fxc-crests > :first-child{grid-column:1;grid-row:2;justify-self:center}
	.fxc-crests > :nth-child(2){grid-column:2;grid-row:2;align-self:center}
	.fxc-crests > :last-child{grid-column:3;grid-row:2;justify-self:center}
	.fxc-crests .crest{width:40px;height:40px;margin-top:6px}
	.fxc p > :first-child{grid-column:1;grid-row:3}
	.fxc p > :last-child{grid-column:3;grid-row:3}
	.fxc p > span{margin-top:4px;font-size:.8rem;line-height:1.2}
	.fx-plus{display:flex;justify-content:center;width:100%;align-items:center;gap:10px;min-height:44px;margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);cursor:pointer;transition:transform .16s var(--ease)}
	.fx-plus[hidden]{display:none}
	.fx-plus svg{width:18px;transform:rotate(90deg)}
	.fx-plus:active{transform:scale(.97)}
}

/* Mode sombre : la pastille « Domicile » (#04100A) se confondait avec le fond de la carte de match (#07120C) ; on la teinte en jaune. */
html[data-theme="dark"] .where.dom{background:rgba(255,210,31,.16)}

/* Mobile : le numéro du joueur reste affiché sur la carte de l'effectif (football.css le masquait sous 640 px). */
@media (max-width:640px){
	.pgrid .pc-meta b{display:grid}
}

/* Chronologie : la pastille de la période affichée est jaune pour toutes les périodes (texte foncé en mode sombre). */
html[data-theme="dark"] .era-head .name{color:#0B1F14}

/* Mobile (2026-10-06) : logos partenaires du hero centrés entre l'élément au-dessus et le bas du hero (28 px de chaque côté, avant : 34-40 px en haut, 18 px en bas). */
@media (max-width:640px){
	.nh:has(.tn-spons){padding-bottom:28px}
	.tn-inner > .tn-spons{margin-top:-12px}
	.nh-inner > .tn-spons{margin-top:-6px}
}

/* Mobile (2026-10-06) : logos partenaires de tous les héros calculés à partir de 50 px (60 px sur ordinateur). */
@media (max-width:640px){
	.tn-spons span img,.nh-foot .tn-spons span img{height:calc(50px * var(--k,.8) * var(--z,1))}
}

/* Mobile (2026-10-06) : logos des héros, 3 par ligne ; une dernière ligne incomplète (1 ou 2 logos) est centrée au lieu d'être calée à gauche. */
@media (max-width:640px){
	.tn-inner > .tn-spons,.nh-inner > .tn-spons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 10px}
	.tn-inner > .tn-spons > span,.nh-inner > .tn-spons > span{flex:0 0 calc((100% - 20px) / 3);display:flex;justify-content:center;align-items:center}
}

@keyframes hPanCarte{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 100%))}}

/* Football, galerie : 11 photos sur ordinateur (4 lignes) ; sur mobile on garde les 7 premières (la grille de 2 colonnes resterait trop longue). */
@media (max-width:640px){
	.page-template-page-football .gal .g:nth-child(n+8):not(.more){display:none}
	.page-template-page-football .gal .g.haute{grid-row:auto} /* la photo 7 sur deux lignes : ordinateur seulement */
}

/* Football, effectif : retard d'apparition plafonné à 4 cartes d'écart (75 ms chacune). Avant, la 30e carte attendait 2,3 s (--i × 75 ms) avant d'apparaître. */
.pgrid .pc.rv.in{animation:none}
/* Effectif : l'animation d'apparition est jouée par la face de la carte (.pc-in), pas par la carte. Le défilement à aimantation (scroll-snap) suit la boîte de la carte :
   quand elle bougeait (translation, échelle), la rangée entière glissait de quelques pixels pendant l'apparition (sursaut). */
.pgrid .pc.rv.in .pc-in{animation:rvIn .95s var(--ease) backwards;animation-delay:calc(min(var(--i,0), 4) * 75ms)}
@media (max-width:640px){.pgrid .pc.rv.in .pc-in{animation-name:rvInSans}}

/* Mobile : chiffres du palmarès à la taille de ceux de l'Histoire (2 rem). */
@media (max-width:640px){
	.stats .stat b,.palm-slide .stat b{font-size:2rem}
}

/* Cartes de catégories : interligne resserré pour les titres verts sur plusieurs lignes. */
.prog .tag{display:block;line-height:1.25}

/* Carte de la salle/du stade : un badge en texte (« Salle de volleyball jusqu'en 2012 ») est plus petit qu'un chiffre. */
.sz-cap.long b{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1}

/* Cartes des rencontres : « Ligue I · J6 » en graisse normale. */
.fxc-top b{font-weight:400;font-size:.95rem}

/* Football, bloc Stade (mobile) : la photo en haut, comme dans le hero, et la carte en dessous au lieu de passer devant. */
@media (max-width:640px){
	#stade-immersif.static .sz-sticky{display:block;min-height:0;padding-top:0}
	#stade-immersif.static .sz-media{position:relative;inset:auto;margin:0 12px;height:auto;clip-path:none;border-radius:var(--r)}
	/* Photo entière, sans recadrage : sa hauteur suit ses proportions (avant : 62vw de haut, côtés coupés) */
	#stade-immersif.static .sz-media img{display:block;height:auto;transform:none}
	#stade-immersif.static .sz-media::after{display:none}
	#stade-immersif.static .sz-content{width:calc(100% - 24px);padding:12px 0 0}
	#stade-immersif.static .sz-card{max-width:none;background:#07140C;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Salles des sections (mobile) : photo(s) en haut, cartes en dessous, comme le stade de Football. */
@media (max-width:640px){
	.sz.static:not(#stade-immersif) .sz-sticky{display:block;min-height:0;padding-top:0}
	.sz.static:not(#stade-immersif) .sz-media{position:relative;inset:auto;margin:0 12px;height:auto;clip-path:none;border-radius:var(--r);background:none;display:grid;gap:12px}
	.sz.static:not(#stade-immersif) .sz-media::after{display:none}
	.sz.static:not(#stade-immersif) .sz-m,.sz.static:not(#stade-immersif) .sz-m2{position:relative;inset:auto;height:auto;opacity:1;overflow:hidden;border-radius:var(--r)}
	/* Photo entière, sans recadrage, comme le stade de Football (avant : 62vw de haut, côtés coupés). Sans photo : dessin en 16/9. */
	.sz.static:not(#stade-immersif) .sz-m img{display:block;height:auto;transform:none}
	.sz.static:not(#stade-immersif) .sz-m .photo{height:auto;aspect-ratio:16/9}
	.sz.duo.static:not(#stade-immersif) .sz-m2{display:block}
	.sz.static:not(#stade-immersif) .sz-content{width:calc(100% - 24px);padding:12px 0 0}
	.sz.static:not(#stade-immersif) .sz-card{max-width:none;background:#07140C;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Deux salles : chaque photo juste au-dessus de sa carte (photo 1, carte 1, photo 2, carte 2). */
@media (max-width:640px){
	.sz.duo.static:not(#stade-immersif) .sz-sticky{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 12px}
	.sz.duo.static:not(#stade-immersif) .sz-media,.sz.duo.static:not(#stade-immersif) .sz-content{display:contents}
	.sz.duo.static:not(#stade-immersif) .sz-m{margin:0;order:1}
	.sz.duo.static:not(#stade-immersif) .sz-m2{order:3}
	.sz.duo.static:not(#stade-immersif) .sz-card:nth-child(1){order:2}
	.sz.duo.static:not(#stade-immersif) .sz-card:nth-child(2){order:4}
	.sz.duo.static:not(#stade-immersif) .sz-bar{display:none}
}

/* Barre des sections défilante : cachée jusqu'à son centrage (site.js ajoute .pret) ; sans JavaScript elle reste visible. */
@media (max-width:1100px){
	.js .sports:not(.pret){opacity:0;animation:sportsMontre 0s 2.5s forwards} /* secours si le script ne s'exécute pas */
	.sports.pret{transition:opacity .2s}
}
@keyframes sportsMontre{to{opacity:1}}

/* « Lire la suite » : une fois le texte déplié, le bouton disparaît (display:inline-flex plus haut l'emportait sur l'attribut hidden). */
.tn-plus[hidden]{display:none !important}

/* Texte réservé à Google et aux lecteurs d'écran (début du H1 : voir inc/seo.php). */
.asm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Page 404 (404.php) : texte d'introduction et boutons de secours sous l'en-tête commun. */
.e404{--ny:#F7D117}
.e404-voies{display:flex;flex-wrap:wrap;gap:12px;padding-top:36px;padding-bottom:72px}

/* Football, Football Jeunes et Académie : titre du hero à la taille du titre des pages de section (.tn-title, page Tennis) */
.nh-foot .nh-title,.nh-jeunes .nh-title{font-size:clamp(3.2rem,min(7vw,12vh),6.6rem);line-height:.9}
/* Histoire : un cran au-dessus, 130 px sur grand écran (avant : 151 px) */
.page-template-page-histoire .nh-title{font-size:clamp(3.6rem,min(9.1vw,15vh),8.125rem);line-height:.9}

/* Bandeau cookies (inc/analytics.php) : carte sombre en bas à gauche, deux boutons de même poids */
.cc{position:fixed;left:16px;bottom:16px;z-index:200;width:min(440px,calc(100% - 32px));padding:18px 20px;border-radius:18px;background:#07120C;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px -18px rgba(0,0,0,.7);color:rgba(238,244,239,.82);font-size:.9rem;line-height:1.55}
.cc[hidden]{display:none}
.cc b{display:block;margin-bottom:4px;color:#EEF4EF;font-family:var(--head);font-size:.95rem}
.cc a{color:#FFD21F;text-decoration:underline;text-underline-offset:3px}
.cc-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.cc-b button{min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:none;color:#EEF4EF;font:600 .9rem var(--head),sans-serif;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.cc-b button:hover{background:#FFD21F;border-color:#FFD21F;color:#07140C}
.cc-b button:focus-visible{outline:3px solid #FFD21F;outline-offset:2px}

/* Bouton « قناوية Fans » (header.php) : tout à droite de la barre des sections, en contour jaune du club ; plein jaune
   (texte vert du logo assombri #0E6A15, contraste ≈ 4,7:1) au survol, au clavier et sur la page Supporters elle-même. */
.tb .fans-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;box-sizing:border-box;height:30px;padding:0 14px;border:1.5px solid #FFD21F;border-radius:999px;background:transparent;color:#FFD21F;font:700 .8rem/1 'DM Sans',sans-serif;white-space:nowrap;transition:transform .3s var(--ease),background-color .25s ease,color .25s ease}
.tb .fans-btn span{font:700 1.2em/1 'Aref Ruqaa',serif;transform:translateY(-.06em)}
.tb .fans-btn span{position:relative}
.tb .fans-btn span::after{content:"";position:absolute;right:.04em;top:.07em;width:.17em;height:.15em;background:currentColor;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(-10deg)} /* 3e point du qaf (ڨ, g tunisien), en losange un peu pivoté comme les points de la police, au-dessus de ses deux points */
.tb .fans-btn:focus-visible,.tb .fans-btn[aria-current]{background:#FFD21F;color:#0E6A15}
@media (hover:hover) and (pointer:fine){.tb .fans-btn:hover{background:#FFD21F;color:#0E6A15;transform:translateY(-1px)}}

/* Rencontres à venir (sections) : le titre de la carte reste sur une ligne ; s'il manque de place, le lieu passe dessous */
.fxc-top{flex-wrap:wrap;gap:6px 8px}
.fxc-top b{white-space:nowrap}
/* Volleyball, Basketball, Handball (hero avec la bannière du prochain match) : logos des partenaires centrés sur la ligne
   « Découvrir la section » (44 px de haut), et non sur le bas du titre */
@media (min-width:1101px){:is(.page-template-page-volleyball,.page-template-page-basketball,.page-template-page-handball) .tn-inner:has(.tn-read) > .tn-spons{margin-bottom:0;height:44px;align-items:center}}
/* La forme du moment (sections) : match terminé dont les scores ne sont pas encore saisis */
.pillr.nc{background:rgba(11,31,20,.07);color:var(--muted)}
html[data-theme="dark"] .pillr.nc{background:rgba(255,255,255,.08)}
/* Bannière du prochain match (Volleyball, Basketball, Handball) : compétition abrégée sur mobile (Nat A, Champ) pour tenir sur une ligne */
.nh-match .cm-c{display:none}
@media (max-width:760px){
	.nh-match .cm-c{display:inline}
	.nh-match .cm-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
	.nh-match .nh-m-head .nh-eyebrow:has(.cm-c){flex-wrap:nowrap;letter-spacing:.08em;white-space:nowrap} /* point jaune et texte sur la même ligne */
}
@media (max-width:370px){.nh-match .nh-m-head .nh-eyebrow:has(.cm-c){flex-wrap:wrap;white-space:normal}} /* très petits écrans : retour à la ligne plutôt que déborder */

/* Volleyball, Basketball, Handball (mobile) : noms des équipes de la bannière du prochain match sur une seule ligne, écussons à la taille de Football (38 px),
   espaces resserrés (ceux de Football feraient déborder « ASE Ariana ») et texte un peu plus petit (15,2 px au lieu de 16,8 px). */
@media (max-width:640px){
	:is(.page-template-page-volleyball,.page-template-page-basketball,.page-template-page-handball) .nh-match .nh-teams{gap:12px}
	:is(.page-template-page-volleyball,.page-template-page-basketball,.page-template-page-handball) .nh-match .nh-teams .team{gap:12px;font-size:.95rem;white-space:nowrap;min-width:0}
	:is(.page-template-page-volleyball,.page-template-page-basketball,.page-template-page-handball) .nh-match .nh-teams .vs{padding:0 2px;letter-spacing:.1em}
}

/* Mobile : la pilule de navigation (fixe) recouvre le bas de la barre des sections (14 px). Un appui sur le bas d'un lien tombait sur la pilule et rien ne s'ouvrait (il fallait appuyer deux fois).
   La pilule laisse passer les appuis sur son fond ; ses boutons, son logo et ses liens restent cliquables. */
@media (max-width:640px){
	.pill{pointer-events:none}
	.pill > *{pointer-events:auto}
}

/* Textes en arabe dans les cartes d'articles, résultats… : alignés sur leur direction (le reste de la carte garde sa mise en page). */
:is(.n-big,.n-sm,.act-c,.act-une) :is(h2,h3,p){unicode-bidi:plaintext;text-align:start}
:lang(ar){letter-spacing:0}

/* Cartes d'actualités : extrait sous le titre ; sur ordinateur, les petites cartes ne l'affichent que si le titre tient sur une ligne (site.js retire « hidden »). */
.n-ex{margin:8px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-align:start}
.n-ex[hidden]{display:none}
.act-c .n-ex{margin-top:8px}
@media (max-width:640px){.n-ex{margin-top:4px;font-size:.8rem;line-height:1.4;-webkit-line-clamp:2}} /* mobile : 2 lignes sous le titre de chaque ligne de la liste */
/* Article en arabe : le corps de la carte passe en droite-à-gauche ; la flèche de « Lire » regarde vers la gauche. */
.n-body[dir="rtl"] .read svg,.act-c-body[dir="rtl"] .read svg{transform:scaleX(-1)}
a:hover .n-body[dir="rtl"] .read svg,a:hover .act-c-body[dir="rtl"] .read svg{transform:scaleX(-1) translateX(5px)}
.n-body[dir="rtl"] .n-date,.act-c-body[dir="rtl"] .act-c-meta{direction:ltr;unicode-bidi:isolate}
.act-c-body[dir="rtl"] .act-c-meta{text-align:right} /* « FOOTBALL · 10 OCTOBRE » se lit en français mais se place à droite */ /* la date reste en français, lue de gauche à droite (« 31 octobre », pas « octobre 31 ») */
.n-body[dir="rtl"] .n-date{margin-left:0;margin-right:8px} /* l'espace entre la pastille et la date passe du bon côté */
.n-big > .n-body[dir="rtl"]{width:100%} /* grande carte d'un article en arabe : le texte occupe toute la largeur et se place à droite */

/* Titres des petites cartes d'actualités un peu plus petits (essai) : l'arabe, à corps égal, paraît plus petit que le latin ; les titres français se rapprochent de sa taille. */
@media (min-width:641px){
	.n-sm h3{font-size:1.2rem}
	.act-grid .act-c h3{font-size:1.1rem} /* plus spécifique : actualites.css est chargé après wp.css */
}

/* Accueil et pages de section : 1 grande actualité + 2 petites sur ordinateur, 3 petites sur mobile (4 articles au total). */
@media (min-width:641px){.n-mob{display:none}}

/* Page Actualités : l'article à la une a un léger voile noir sur sa photo pour garder le texte lisible ; les autres cartes gardent leur image telle quelle. */
.act-une .img::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.3);pointer-events:none}

/* Page Actualités, ordinateur : la photo de l'article à la une est centrée sur 70 % de la largeur de la carte, fondue de chaque côté dans le fond sombre, au lieu de couvrir toute la carte.
   Elle est ainsi bien moins agrandie (un logo ne remplit plus toute la carte). */
@media (min-width:641px){
	.act-une .img{background:#05140b}
	.act-une .img .photo{inset:0 auto 0 15%;width:70%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
}

/* Volley : points de chaque set à côté du score en sets (carte « La forme du moment ») */
.res-row .sets{display:flex;gap:2px;margin-left:auto;font-size:.85rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.res-row .sets i{font-style:normal;min-width:1.6em;text-align:right}
.res-row .sets i.w{color:var(--ink);font-weight:700} /* set gagné : même couleur que le score final */
.res-row .sets + b{min-width:1.1em;text-align:right}

/* Cadrage de l'image d'un article (inc/image-article.php) : point visé, zoom depuis ce point, image entière */
.photo.asm-cadre{object-position:var(--fx,50%) var(--fy,50%);transform-origin:var(--fx,50%) var(--fy,50%);scale:var(--z,1)}
.photo.asm-entiere{object-fit:contain;background:#0B1A11}