/* ------------------------------------------------------------------ */
/* Shoot Me Again — socle du front v2                                   */
/*                                                                      */
/* Feuille autonome du nouveau front. Elle ne remplace pas layout.css   */
/* et n'est jamais chargee par les pages de l'ancien site : les deux    */
/* cohabitent, chacune servant son propre docroot.                      */
/*                                                                      */
/* Valeurs reprises telles quelles de la maquette Claude Design et de   */
/* la charte : ne rien "arrondir" ici sans repasser par la maquette.    */
/* ------------------------------------------------------------------ */

/* ---------------------------------------------------------------- */
/* 1. Jetons                                                         */
/* ---------------------------------------------------------------- */

:root {
	/* Neutres */
	--fond:            #eeeeee;   /* fond de page — remplace background.jpg */
	--surface:         #ffffff;   /* cartes, lignes de flux, panneaux */
	--encre:           #000000;   /* texte courant ET fond des barres sombres */
	--encre-2:         #333333;   /* texte secondaire, pied de page */
	--filet:           rgba(0,0,0,.14);
	--filet-sombre:    #666666;   /* filet sur fond noir */
	--muet:            #999999;   /* filets de separation, label sur sombre */
	--sur-sombre:      #eeeeee;   /* texte secondaire sur fond noir */

	/* Accent — le seul de la charte */
	--rouge:           #990000;
	--rouge-clair:     #ff0000;   /* survol de lien, sur sombre */
	--rouge-fonce:     #660000;   /* survol d'un bloc deja rouge */
	--selection:       #ffdddd;

	/* Les trois familles qu'un texte peut citer. Le groupe prend le rouge de
	   l'accent — c'est la seule des trois qui rattache. Les deux autres ont
	   besoin d'une couleur a elles, en edition (l'etiquette du panneau de
	   mentions) comme a la lecture (le bandeau de la carte au survol). */
	--famille-label:   #444444;
	--famille-salle:   #1f5c3d;

	/* Code couleur des rubriques : etiquettes uniquement, jamais une surface */
	--rub-news:        #000000;
	--rub-chroniques:  #990000;
	--rub-photos:      #2c6700;
	--rub-articles:    #206a00;
	--rub-livereports: #006d6f;
	--rub-interviews:  #6b4400;
	--rub-videos:      #0306c2;
	--rub-concours:    #450071;
	--rub-dtc:         #7d0088;

	/* Rythme */
	--largeur:         1440px;
	--marge:           2%;
	--transition:      250ms ease-out;

	/* Hauteur de l'en-tete collant : sert d'ancrage a tout ce qui colle
	   en dessous (separateurs de jour, rail). Mesuree sur le rendu reel —
	   Une valeur trop basse laisse passer le contenu sous l'en-tete, une
	   valeur trop haute ouvre un trou. C'est `--h-chrome` qui sert d'ancrage
	   depuis que la barre de rubriques colle elle aussi : celle-ci ne mesure
	   plus que le bandeau du haut, et sert a poser le menu juste dessous.
	   Etait 72 px quand le logo faisait 200 px de large. Le logo passe a
	   320 px pour que sa baseline se lise (cf. .sma-logo) : a ratio constant
	   il fait alors 72 px de haut, et c'est lui — non plus le champ de
	   recherche de 44 px — qui impose la hauteur. 72 + 2 x 20 px de zone de
	   protection = 112 px, valeur relevee sur le rendu reel. */
	--h-entete:        112px;

	/* Hauteur de la barre de rubriques, qui colle desormais sous l'en-tete.
	   34 px et non les 44 d'avant : les rubriques sont passees a 12 px de
	   corps et 9 px de rembourrage vertical — la barre n'est plus lue, elle
	   est visee, et elle reste a l'ecran pendant toute la lecture.
	   La valeur ecrite ici n'est qu'un point de depart : la barre se replie
	   sur deux rangees en dessous de ~1 100 px (plus de rubriques que de
	   largeur), et sur telephone c'est le bouton « Menu » qui colle, plus
	   haut. sma.js mesure donc la barre reelle et reecrit cette variable.
	   Sans script, les valeurs d'ici restent justes dans le cas courant. */
	--h-nav:           34px;

	/* Ce qui colle SOUS le menu — separateurs de jour, barre des lettres,
	   rail — s'ancre a la somme des deux, jamais au seul en-tete. */
	--h-chrome:        calc(var(--h-entete) + var(--h-nav));
}

/* ---------------------------------------------------------------- */
/* 2. Base                                                           */
/* ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--fond); }

body {
	font-family: Lato, Helvetica, Arial, sans-serif;
	color: var(--encre);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--rouge);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--transition);
}
a:hover { color: var(--rouge-clair); }

:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
::selection { background: var(--selection); }

img { max-width: 100%; }

/* Corps de texte : mesure limitee, jamais centre, jamais en capitales. */
.sma-corps {
	font-size: 17px;
	line-height: 1.55;
	max-width: 62ch;
	text-wrap: pretty;
}

.sma-meta { font-size: 13px; color: var(--encre-2); }

/* Libelle visible des lecteurs d'ecran seulement. */
.sma-invisible {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---------------------------------------------------------------- */
/* 3. Gabarit                                                        */
/* ---------------------------------------------------------------- */

.sma-page {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 var(--marge);
}

/* Un element pleine largeur sort de la gouttiere de la page. */
.sma-pleine-largeur { margin: 0 calc(var(--marge) * -1); }

.sma-colonnes {
	display: grid;
	grid-template-columns: 68% 27%;
	gap: 5%;
	align-items: start;
}

/* Une page qui se LIT ne se gouverne pas comme une page qui se parcourt.
   Avec 68 % de colonne pour une mesure de 62 caracteres, il restait 330 px de
   vide entre la fin des lignes et le rail : l'article n'occupait plus 40 % de
   l'ecran, et ce blanc-la ne se lisait pas comme une marge mais comme un trou.

   On resserre donc la page entiere plutot que d'allonger les lignes — a 1382 px
   de colonne, une ligne ferait plus de cent caracteres et deviendrait penible.
   Le bloc est centre : le blanc restant est une marge symetrique, pas un vide
   d'un seul cote. */
.sma-page--lecture { max-width: 1120px; }

.sma-colonnes--lecture {
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 44px;
}
/* Le texte et le bandeau prennent alors toute leur colonne : c'est elle qui
   tient la mesure, la double borne n'a plus lieu d'etre. */
.sma-colonnes--lecture .sma-corps,
.sma-colonnes--lecture .sma-bandeau { max-width: none; }

/* `minmax(0, 1fr)` et non `1fr` : une piste `1fr` a pour minimum automatique le
   min-content de sa colonne, et le min-content d'une image vaut sa largeur
   NATIVE — `max-width: 100%` ne compte pas dans ce calcul, un pourcentage etant
   ignore pendant le dimensionnement intrinseque. Une illustration de 1200 px
   poussait donc la piste a 1200 px dans un telephone de 375 px : l'image
   debordait, et le document entier s'elargissait avec elle (la page s'ouvrait
   dezoomee, en-tete a demi largeur). Le plancher a zero laisse la piste suivre
   la fenetre, et les images redescendent a `max-width: 100%`. */
@media (max-width: 900px) {
	.sma-colonnes--lecture { grid-template-columns: minmax(0, 1fr); }
}

/* Le rail ne porte pas l'effet lui-meme : un bloc `position: sticky` plus haut
   que la fenetre ne colle jamais — il defile jusqu'a son bas, et c'est ce qui
   arrivait a la fiche d'une chronique (998 px pour 859 px de fenetre). C'est
   donc la seule partie qu'on veut voir suivre la lecture qui le porte.
   Le rail, lui, s'etire sur toute la rangee : sans ca il ne mesure que son
   contenu, et le bloc collant decroche des que le texte de l'article passe
   sous cette hauteur — un element collant ne voyage jamais plus loin que le
   bas de son bloc conteneur. */
/* Le rail est une grille de deux rangees : la premiere prend toute la hauteur
   restante et sert de piste au bloc collant, la seconde porte ce qui doit
   defiler normalement (« Dans la meme rubrique »).

   Sans cette piste, le bloc collant voyageait jusqu'au bas du rail entier et
   passait PAR-DESSUS la section suivante — un element collant garde sa place
   dans le flux, mais son rendu se decale : tout ce qui le suit finit recouvert.

   La piste est un element a elle : borner la course par la seule case de
   grille ne marche pas. Le navigateur arrete un element collant au bloc
   PARENT, pas a la case qui lui est assignee — mesure faite, il traversait
   toute la hauteur du rail malgre `grid-template-rows`. Il faut donc un
   conteneur reel, que la rangee `1fr` etire. */
.sma-rail {
	align-self: stretch;
	display: grid;
	grid-template-rows: 1fr auto;
}

.sma-rail-piste { min-height: 0; }

.sma-rail-colle {
	position: sticky;
	top: calc(var(--h-chrome) + 16px);
	/* Un bloc collant plus haut que la fenetre ne colle pas du tout — il defile
	   jusqu'a son bas puis decroche. On le borne pour que le comportement soit
	   le meme quel que soit le contenu du rail. */
	max-height: calc(100vh - var(--h-chrome) - 32px);
	overflow-y: auto;
	scrollbar-width: thin;
}

/* ---------------------------------------------------------------- */
/* 4. Chrome                                                         */
/* ---------------------------------------------------------------- */

.sma-entete {
	position: sticky;
	top: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: 340px 1fr auto;
	align-items: center;
	gap: 32px;
	/* La hauteur est celle que `--h-entete` annonce, et non le resultat de ce
	   que le remplissage donne : la variable ne peut donc plus mentir a ce qui
	   colle en dessous, et surtout les deux valeurs suivent la MEME courbe
	   pendant le repli — sans quoi la barre des lettres decrochait de 5 px au
	   milieu de l'animation. Le contenu s'y centre.
	   Ce qui etait ecrit en remplissage vertical y est toujours : a 112 px, un
	   logo de 72 px laisse 20 px au-dessus et au-dessous, soit la zone de
	   protection que la charte fixe a la hauteur du crane — 53 px dans le
	   fichier de 900 px de large, donc 18,8 px pour un logo affiche a 320.
	   Les autres cotes etaient deja bons : 24 px a gauche, et a droite les
	   20 px que la colonne de 340 px laisse au logo de 320, plus la gouttiere
	   de 32 px, soit 52 px. */
	height: var(--h-entete);
	padding: 0 24px;
	background: var(--encre);
	color: var(--surface);
}

/* 320 px et non 200 : c'est la largeur a partir de laquelle la baseline du
   logo — « Musiques et cultures alternatives », dessinee dans l'image — se
   lit. En dessous elle ne disparait pas, elle devient une bavure grise :
   mesuree a 4,6 px de haut a 200 px de large, 5,8 px a 260, 7,4 px a 320.
   La colonne fait 340 px pour laisser au logo la marge que la charte appelle
   sa zone de protection. */
.sma-logo { display: block; width: 100%; max-width: 320px; height: auto; }

/* Le second dessin — sans baseline — n'existe que pour l'en-tete replie, et
   sma.js ne le construit que la ou le repli peut avoir lieu. */
.sma-logo--compact { display: none; }

/* --- L'en-tete replie -------------------------------------------------
   Au repos l'en-tete tient 112 px, et c'est le prix du logo a 320 px : la
   largeur a partir de laquelle sa baseline se lit. Une fois la lecture
   commencee, ce bandeau n'apprend plus rien — on ne relit pas un logo — et
   il garde le huitieme d'un ecran de 900 px. Des qu'on quitte le haut de la
   page, il passe donc a 68 px et rend 44 px au contenu.

   Retailler le logo ne suffisait pas : a 180 px sa baseline redeviendrait la
   bavure grise de 4 px que le passage a 320 px avait justement supprimee.
   L'en-tete replie sert donc l'AUTRE dessin, celui sans baseline — la regle
   de la charte, qui le prescrit a cette taille, et non un repli technique.
   C'est deja celui de l'en-tete mobile : aucun fichier nouveau.

   Les deux dessins ne s'echangent pas, ils se relaient en fondu. C'est
   possible parce qu'ils sont le meme lockup : dans les deux fichiers de
   900 px, l'encre du lettrage occupe les memes lignes — le haut d'encre est
   cale a 4 px pres d'une colonne a l'autre, soit un dixieme de pixel a
   l'ecran — et seule celle de la baseline continue au-dela, de 140 a 185. A
   largeur egale et cales en haut, les deux lettrages se superposent donc au
   pixel. Le fondu ne montre pas deux logos qui se croisent : il montre un
   seul logo qui retrecit pendant que sa baseline s'efface.

   D'ou la boite : c'est le LIEN qui porte la taille (320 x 72 puis
   180 x 38), et les deux images s'y posent en absolu, largeur pleine.
   L'anime, c'est la boite ; les images ne font que la suivre.

   68 px = les 44 px du champ de recherche, qui devient ici le plus haut des
   trois elements, plus 2 x 12 px de zone de protection — a 180 px de large,
   le crane du logo mesure 10,6 px.

   Ce qui ne bouge pas : la grille. La colonne du logo reste a 340 px et les
   gouttieres a 32 px, donc ni le champ de recherche ni le bouton de compte
   ne se deplacent d'un pixel lateralement. Seule la hauteur change.

   Au-dessus de 900 px seulement : en dessous l'en-tete ne colle pas, il s'en
   va avec la page et il n'y a rien a recuperer. La borne s'ecrit en
   min-width et non en max-width comme le reste du fichier, parce que
   `.est-defile` l'emporterait autrement, par specificite, sur le
   `--h-entete: 0` du seuil telephone — qui vient plus bas. */
@media (min-width: 901px) {
	:root.est-defile { --h-entete: 68px; }

	/* 72 px et non 71,8 : la hauteur exacte du logo a 320 px, arrondie au
	   pixel pour que la barre fasse les 112 px que `--h-entete` annonce. */
	.sma-logo-lien {
		position: relative;
		display: block;
		width: 320px;
		height: 72px;
	}
	.est-defile .sma-logo-lien { width: 180px; height: 38px; }

	.sma-logo-lien .sma-logo {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-width: none;
	}

	/* Le dessin sans baseline est la des le depart, transparent : un fondu
	   ne peut pas partir d'une image qui n'est pas encore decodee. */
	.sma-logo--compact { display: block; opacity: 0; }
	.est-defile .sma-logo--repos { opacity: 0; }
	.est-defile .sma-logo--compact { opacity: 1; }

	/* --- Ce qui glisse, et pourquoi seulement apres le premier rendu ------
	   La transition n'est armee qu'une fois `js-entete` posee, au deuxieme
	   rendu. Sans ce delai, une page rouverte au milieu — un rechargement,
	   un retour arriere — arrivait deployee puis se repliait sous les yeux
	   du lecteur en 250 ms, alors qu'elle n'avait aucune raison de bouger.

	   `top` est de la partie : sinon les reperes qui collent sous l'en-tete
	   sauteraient de 44 px en une image pendant que le bandeau met 250 ms a
	   se replier. Comme la hauteur du bandeau EST `--h-entete` et que leur
	   `top` l'est aussi, les deux suivent alors la meme courbe, aux memes
	   instants : mesure a 0 px d'ecart d'un bout a l'autre du repli, sous
	   Chromium comme sous WebKit. C'etait 5 px quand la hauteur venait du
	   remplissage. Et `top` ne change qu'avec le repli, jamais pendant un
	   defilement ordinaire : cette transition ne coute rien au reste du
	   temps. */
	.js-entete .sma-entete,
	.js-entete .sma-logo-lien,
	.js-entete .sma-logo-lien .sma-logo { transition: all var(--transition); }

	.js-entete .sma-nav,
	.js-entete .sma-flux-jour,
	.js-entete .sma-lettres,
	.js-entete .sma-rail-colle { transition: top var(--transition); }
}

/* Le champ de recherche est le seul endroit ou un rayon est autorise. */
.sma-recherche {
	display: flex;
	align-items: center;
	max-width: 520px;
	width: 100%;
	justify-self: center;
}
.sma-recherche input {
	flex: 1;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--rouge);
	border-right: 0;
	border-radius: 10px 0 0 10px;
	background: var(--surface);
	color: var(--encre);
	font-family: inherit;
	font-size: 15px;
}
.sma-recherche button {
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--rouge);
	border-radius: 0 10px 10px 0;
	background: var(--rouge);
	color: var(--surface);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--transition);
}
.sma-recherche button:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

.sma-connexion {
	color: var(--surface);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 10px 14px;
	border: 1px solid var(--filet-sombre);
}
.sma-connexion:hover { color: var(--surface); background: var(--rouge); border-color: var(--rouge); }

.sma-nav {
	display: flex;
	flex-wrap: wrap;
	background: var(--encre-2);
	padding: 0 24px;
}
.sma-nav a {
	padding: 14px 16px;
	color: var(--surface);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sma-nav a:hover { color: var(--surface); background: var(--rouge); }

/* Le lien d'administration n'est pas une rubrique : il ne mene pas a du
   contenu mais a l'outil. Pousse a droite et souligne de rouge, il se
   distingue sans quitter la barre. */
.sma-nav-admin {
	margin-left: auto;
	box-shadow: inset 0 -3px 0 var(--rouge);
}

/* Une media query n'ajoute aucune specificite : ces regles doivent etre
   ecrites APRES celles de base ci-dessus, sinon elles perdent l'arbitrage. */
@media (min-width: 901px) {
	/* --- Le menu reste, le bandeau se replie ------------------------------
	   Le repli de l'en-tete rendait 44 px au contenu, mais il emportait la
	   barre des rubriques avec la page : passe le premier ecran, changer de
	   rubrique demandait de remonter tout en haut. Elle colle donc sous le
	   bandeau, et suit sa courbe pendant le repli — meme `--h-entete`, meme
	   transition, donc aucun decrochage au milieu de l'animation.

	   Ce qui colle plus bas (separateurs de jour, barre des lettres, rail)
	   s'ancre desormais a `--h-chrome`, la somme des deux barres.

	   `z-index: 29` : juste sous l'en-tete, qui est a 30. Les deux ne se
	   recouvrent jamais — leurs hauteurs suivent la meme courbe — mais si le
	   navigateur arrondit un pixel autrement d'une image a l'autre, c'est le
	   bandeau qui passe devant, pas la barre. */
	.sma-nav {
		position: sticky;
		top: var(--h-entete);
		z-index: 29;
	}

	/* Une barre qui ne quitte plus l'ecran se paie a chaque ligne de texte :
	   44 px pendant toute la lecture, c'est une carte de flux tous les six
	   ecrans. On la ramene a 34 px — 12 px de corps au lieu de 13, 9 px de
	   rembourrage au lieu de 14. La taille tactile de 44 px n'est pas en
	   cause : sous 900 px ce n'est pas cette barre qui s'affiche, mais le
	   bouton « Menu », qui les garde. */
	.sma-nav a { padding: 9px 16px; font-size: 12px; }
}

/* Entre 901 et 1200 px, les dix rubriques (onze avec le lien d'administration)
   ne tiennent pas sur une rangee : la barre se repliait sur deux, soit 65 px
   colles a l'ecran pendant toute la lecture au lieu de 33. On serre les
   gouttieres plutot que d'accepter le doublement — mesure a 940 px de contenu
   a 9 px de rembourrage, contre 1 118 a 16 px. En dessous de 940 px la barre
   se replie quand meme, et c'est sans consequence : sma.js mesure la hauteur
   reelle, rien ne passe dessous. */
@media (min-width: 901px) and (max-width: 1200px) {
	.sma-nav { padding: 0 12px; }
	.sma-nav a { padding: 9px 9px; }
}

/* Bascule du menu sur telephone. Masquee par defaut : c'est le script qui la
   revele, et sans lui la barre reste affichee telle quelle. */
.sma-nav-bascule {
	display: none;
	width: 100%;
	align-items: center;
	/* Libelle et icone groupes au bord droit : c'est la que le pouce tombe
	   sur un telephone, et un menu pose a gauche invite a y porter la main
	   pour rien. */
	justify-content: flex-end;
	gap: 12px;
	min-height: 44px;
	padding: 12px 16px;
	background: var(--encre-2);
	border: 0;
	color: var(--surface);
	font-family: inherit;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: right;
	cursor: pointer;
}
.sma-nav-bascule[hidden] { display: none; }
.sma-nav-icone { flex: 0 0 auto; fill: var(--surface); }
.sma-nav-icone--fermer { display: none; }
.sma-nav-bascule[aria-expanded="true"] .sma-nav-icone--ouvrir { display: none; }
.sma-nav-bascule[aria-expanded="true"] .sma-nav-icone--fermer { display: inline; }

.sma-pied {
	background: var(--encre);
	color: var(--sur-sombre);
	padding: 40px 24px;
	font-size: 14px;
}

/* Cercles sociaux — la seule exception a "pas de degrade". */
.sma-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	transition: all var(--transition);
}
.sma-social:hover { transform: scale(1.2); }
.sma-social--facebook  { background: #4c67a1; }
/* Le rouge de YouTube est celui de la marque, pas l'accent du site : il ne
   vit que dans ce cercle, comme le bleu de Facebook. */
.sma-social--youtube   { background: #ff0000; }
.sma-social--instagram {
	background: radial-gradient(circle at 28% 105%,
		#fdd76a 0%, #f3a63c 18%, #e8593a 38%, #cf2e7e 62%, #8b3ab8 88%);
}
.sma-social svg { fill: var(--surface); }

/* Le retour en haut de page.

   Sur un index qu'on a rallonge cinq ou six fois avec « Charger plus », le
   chapeau se retrouve a dix mille pixels : y remonter au doigt prend une
   minute et se fait a l'aveugle. L'en-tete colle au-dela de 900 px, mais il
   ne ramene qu'a lui-meme, jamais au debut du contenu — et sous 900 px il ne
   colle meme plus.

   En bas a droite, la ou tombe le pouce, comme le bouton de menu et pour la
   meme raison. Le script ne le revele qu'a partir de deux ecrans de
   defilement : avant, il couvrirait la lecture pour un raccourci qui ne vaut
   pas un demi-tour de molette. Il est ecrit en toutes lettres — une fleche
   seule, posee sur un article, se lit aussi bien comme « suite » que comme
   « haut ». */
.sma-haut {
	position: fixed;
	right: 16px;
	bottom: 16px;
	/* Sous la visionneuse (100), qui est opaque et doit le recouvrir ;
	   au-dessus de l'en-tete collant (30) et du rail. */
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--rouge);
	color: var(--rouge);
	font-family: inherit;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* Meme ombre que la carte de groupe : c'est le seul autre element de la
	   feuille qui flotte au-dessus du texte, et un contour d'un pixel ne
	   suffit pas a le dire sur une page claire. */
	box-shadow: 0 6px 24px rgba(0,0,0,.24);
	cursor: pointer;
	transition: all var(--transition);
}
/* `display: flex` gagne sur l'attribut : sans cette ligne, le bouton serait
   visible avant que le script ne le revele. */
.sma-haut[hidden] { display: none; }
.sma-haut:hover { background: var(--rouge); color: var(--surface); }
.sma-haut:hover .sma-haut-icone { fill: var(--surface); }
.sma-haut-icone { flex: 0 0 auto; fill: var(--rouge); }

/* ---------------------------------------------------------------- */
/* 5. Composants                                                     */
/* ---------------------------------------------------------------- */

/* 5.1 Etiquette de rubrique — l'element signature. */
.sma-badge {
	display: inline-block;
	padding: 5px 10px;
	background: var(--encre);
	color: var(--surface);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}
/* Sur une zone photo noire, une etiquette noire a besoin d'un contour. */
.sma-badge--sur-photo { border: 1px solid var(--surface); }

.sma-badge--news        { background: var(--rub-news); }
.sma-badge--chroniques  { background: var(--rub-chroniques); }
.sma-badge--photos      { background: var(--rub-photos); }
.sma-badge--articles    { background: var(--rub-articles); }
.sma-badge--livereports { background: var(--rub-livereports); }
.sma-badge--interviews  { background: var(--rub-interviews); }
.sma-badge--videos      { background: var(--rub-videos); }
.sma-badge--concours    { background: var(--rub-concours); }
.sma-badge--dtc         { background: var(--rub-dtc); }

/* « En exclu » — pas une rubrique mais un etat : elle se pose A COTE de
   l'etiquette de rubrique, jamais a sa place. Le rouge de l'accent, celui que
   l'ancien site lui donne depuis toujours (#990000, cf. .excluvideotxt). Elle
   ne se confond pas avec l'etiquette rouge des chroniques : une chronique
   n'est jamais en exclu, les deux ne se cotoient pas. */
.sma-badge--exclu { background: var(--rouge); }

/* Une etiquette qui ne classe pas mais qui previent : l'ecran vise n'est pas
   refait. Elle doit se voir sans crier — c'est une note de bas de page. */
.sma-badge--ancien {
	background: transparent;
	border: 1px solid var(--filet);
	color: var(--encre-2);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 7px;
}
/* La tuile devient rouge au survol : l'etiquette suit. */
.sma-admin-entree:hover .sma-badge--ancien {
	border-color: rgba(255,255,255,.5);
	color: var(--surface);
}

/* Une etiquette de compte est un lien vers la liste complete de sa rubrique.
   Elle garde la couleur de son fond de rubrique : sans cette regle, `a:hover`
   la repeignait en rouge sur rouge. */
a.sma-badge,
a.sma-badge:hover { color: var(--surface); }
/* Le survol ne peut ni changer la couleur — c'est le code de rubrique — ni la
   pâlir : sur le teal des livereports, un voile de 18 % faisait passer le
   blanc sous le contraste minimum. Un liseré, donc, comme .sma-badge--sur-photo
   en pose deja un ; et outline plutot que border, qui decalerait la ligne. */
a.sma-badge:hover { outline: 2px solid var(--encre); outline-offset: 2px; }

/* L'etiquette qui annonce un compte sur une fiche : plus petite que celle qui
   classe un contenu, parce qu'elles sont cinq ou six a la suite sous un nom. */
.sma-badge--compte { font-size: 10px; padding: 4px 8px; }

/* Une ligne de contenu dans une fiche : etiquette, titre, date.
   Sortie des styles en ligne le jour ou la meme ligne s'est mise a servir sur
   les sous-pages de rubrique : la page « news » d'un membre en aligne jusqu'a
   2 547, et autant de copies du meme attribut style pesaient plus lourd que
   toute cette feuille. Survol calque sur .sma-carte : l'encre ne bouge pas,
   c'est le titre qui rougit. */
.sma-ligne-fiche {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	font-weight: 400;
}
.sma-ligne-fiche,
.sma-ligne-fiche:hover { color: var(--encre); }
.sma-ligne-fiche:hover .sma-ligne-fiche-titre { color: var(--rouge); }
.sma-ligne-fiche-titre { flex: 1; font-size: 17px; font-weight: 900; line-height: 1.25; }
.sma-ligne-fiche-date { font-size: 12px; }

/* 5.2 En-tete de section : titre, filet rouge, compte facultatif. */
.sma-section {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 16px;
}
.sma-section h2 {
	margin: 0;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -.02em;
	text-transform: uppercase;
}
.sma-section::after,
.sma-section .sma-section-filet {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rouge);
}

/* 5.3 Tuile photo. */
.sma-tuile {
	display: block;
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--encre);
	overflow: hidden;
}
.sma-tuile--large { aspect-ratio: 16 / 9; }
/* Une pochette de disque est carree : la recadrer en 3/2 coupe le visuel. */
.sma-tuile--pochette { aspect-ratio: 1 / 1; }
.sma-tuile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all var(--transition);
}
.sma-tuile:hover img { transform: scale(1.05); }
.sma-tuile:hover { outline: 3px solid var(--rouge); outline-offset: -3px; }

/* Une photo de galerie porte le filigrane du site — le mot-symbole, l'adresse
   du site et « BY <photographe> » — au bas du fichier lui-meme : une bande unie
   que resize() colle sous l'image, et le logo pose par-dessus la photo. Il a son
   sens sur la page d'une galerie, ou la photo se regarde seule. Dans une tuile
   qui saigne, il se lit comme un defaut de rendu : un ruban en bas d'une carte
   qui credite deja son auteur trois lignes plus bas.

   On pousse donc le bas de l'image hors du cadre, de la part exacte que la
   signature occupe dans le fichier — `--sma-filigrane` vaut hauteur / hauteur
   utile, mesure au rendu — et l'`overflow: hidden` du cadre fait le reste. Le
   calcul tient dans les deux regimes de `object-fit: cover` : quand le cadre est
   plus etroit que l'image, le debord vaut exactement la signature ; quand il est
   plus large, le recadrage vertical la noie de toute facon.

   Les deux cadres, parce que la meme photo passe en tuile de carte et en ligne
   de flux ou de resultat de recherche.

   Le fichier n'est pas touche : ouvert seul, ou enregistre par le lecteur, il
   porte toujours sa mention. */
.sma-tuile img.sma-sans-filigrane,
.sma-flux-vignette img.sma-sans-filigrane {
	top: 0;
	bottom: auto;
	height: calc(100% * var(--sma-filigrane, 1));
}

/* Bloc de legende pose au bas de la tuile. */
.sma-tuile-legende {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 12px 14px;
	background: rgba(0,0,0,.65);
	color: var(--surface);
}

/* Le portrait d'un membre sans photo : l'initiale tient la place. Trois
   membres n'en ont pas, et un carre noir a la place d'un visage se remarque
   plus que l'absence elle-meme. */
.sma-portrait-vide {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: var(--fond);
	border-bottom: 1px solid var(--filet);
	color: var(--muet);
	font-size: 48px;
	font-weight: 900;
	line-height: 1;
}

/* Tuile de galerie : la legende est surimprimee sur la photo, donc le lien
   enveloppe les deux. Sur telephone la legende descendra SOUS la photo (cf.
   seuils) — d'ou ce conteneur, qui la sort de la tuile sans casser le lien. */
.sma-carte-photo {
	display: block;
	position: relative;
	background: var(--encre);
	color: var(--surface);
	font-weight: 400;
}
.sma-carte-photo:hover { color: var(--surface); }
.sma-carte-photo:hover .sma-tuile img { transform: scale(1.05); }
.sma-carte-photo:hover .sma-tuile { outline: 3px solid var(--rouge); outline-offset: -3px; }

/* Les lignes secondaires d'une legende : gris clair sur la photo sombre, gris
   fonce quand la legende passe sur fond blanc (telephone). */
.sma-legende-sourdine { color: var(--sur-sombre); }

/* 5.3b Grille de cartes.
   Les vues ecrivaient `repeat(3, 1fr)` en style en ligne : un style en ligne
   ne connait pas les seuils, donc ces grilles restaient a trois colonnes sur
   un telephone — 110 px par carte, ni la photo ni le titre lisibles. Le
   nombre de colonnes vit ici, une seule fois, et descend avec la largeur. */
.sma-grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.sma-grille--4 { grid-template-columns: repeat(4, 1fr); }

/* 5.3c Carte cliquable.
   Toute la carte est le lien, comme la ligne de flux de l'accueil : le lien
   de titre porte `.sma-carte-lien` et sa nappe `::after` couvre la carte.
   On n'imbrique pas de <a> — ce serait invalide — et rien ne depend de
   JavaScript. Les autres liens de la carte repassent au-dessus de la nappe :
   ils gardent leur cible propre. */
.sma-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--filet);
	transition: all var(--transition);
}
.sma-carte:hover { border-color: var(--rouge); }

/* Le corps d'une carte : c'est lui qui se resserre sur telephone, d'ou une
   classe plutot qu'un `padding` en style en ligne. */
.sma-carte-corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px 22px 24px;
}
.sma-carte-corps--large   { padding: 24px 28px 28px; }
.sma-carte-corps--compact { padding: 14px 16px 18px; }

/* Le corps est une colonne flex : un enfant en ligne s'y etirerait sur toute
   la largeur. Etiquettes et boutons gardent leur largeur de contenu. */
.sma-carte-corps > .sma-badge,
.sma-carte-corps > .sma-bouton { align-self: flex-start; }

/* Certaines cartes SONT le lien — membres, videos : rien d'autre n'y est
   cliquable, donc pas de nappe a poser, l'element <a> couvre deja tout. */
a.sma-carte { color: var(--encre); font-weight: 400; }
a.sma-carte:hover { color: var(--encre); }
a.sma-carte:hover .sma-carte-titre { color: var(--rouge); }

.sma-carte-titre {
	display: block;
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.sma-carte-titre--large { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }

.sma-carte-teaser { margin: 0 0 14px; font-size: 15px; }

/* Pousse en bas de carte : les cartes d'une meme rangee alignent leur pied. */
.sma-carte-pied { margin: auto 0 0; font-size: 12px; }

.sma-carte-lien { color: var(--encre); }
.sma-carte-lien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sma-carte a:not(.sma-carte-lien) { position: relative; z-index: 2; }

/* Le survol se propage depuis la carte entiere, plus depuis la seule tuile :
   sinon la photo reste inerte quand on pointe le texte. */
.sma-carte:hover .sma-carte-lien { color: var(--rouge); }
.sma-carte:hover .sma-tuile img { transform: scale(1.05); }

/* 5.4 Ligne de flux — le coeur de l'accueil. Toute la ligne est le lien. */
.sma-flux-jour {
	position: sticky;
	top: var(--h-chrome);
	z-index: 10;
	margin: 0;
	padding: 10px 12px;
	background: var(--fond);
	border-bottom: 1px solid var(--muet);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--encre-2);
}

.sma-flux-item {
	display: grid;
	grid-template-columns: 120px 1fr 120px;
	gap: 20px;
	align-items: center;
	padding: 14px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
	transition: all var(--transition);
}
/* Pas de scale(.96) au survol : il deplacait la ligne suivante. */
.sma-flux-item:hover {
	color: var(--encre);
	border-bottom-color: var(--rouge);
	transform: translateX(8px);
}
.sma-flux-vignette {
	display: block;
	position: relative;
	aspect-ratio: 1;
	background: var(--encre);
	overflow: hidden;
}
.sma-flux-vignette img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all var(--transition);
}
.sma-flux-item:hover .sma-flux-vignette img { transform: scale(1.06); }
.sma-flux-corps { min-width: 0; }
.sma-flux-chapeau {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	/* Deux etiquettes et une date ne tiennent pas toujours sur une ligne de
	   telephone : le chapeau passe a la ligne plutot que de deborder. */
	flex-wrap: wrap;
}
.sma-flux-titre {
	display: block;
	margin-bottom: 4px;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--encre);
	transition: all var(--transition);
}
.sma-flux-item:hover .sma-flux-titre { color: var(--rouge); }
/* Deux lignes de meme forme sous le titre, mais de statut different. Le teaser
   est un apercu du texte : agreable, jamais necessaire. La legende, elle, EST
   l'identite de la ligne — lieu, date, signature — et c'est la seule chose qui
   distingue quinze resultats qui portent tous le nom du meme groupe. D'ou deux
   classes : sur telephone le teaser s'efface, la legende reste. */
.sma-flux-teaser,
.sma-flux-legende {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--encre-2);
	max-width: 68ch;
	text-wrap: pretty;
}
.sma-flux-meta {
	text-align: right;
	font-size: 12px;
	line-height: 1.4;
	color: var(--encre-2);
}

/* 5.4c Concours ouverts — le premier bloc du rail de l'accueil.

   La ligne de flux ne convient pas ici : sa vignette de 120 px et sa colonne
   de meta prennent a elles deux plus que les 27 % du rail. D'ou une ligne a
   deux colonnes, affiche carree a gauche — les visuels de concours sont des
   pochettes et des affiches, que le 3/2 de la tuile par defaut couperait. */
/* Un bloc noir depuis le 12/09/2026 : les redacteurs ne le voyaient pas. Il
   commencait a 1 281 px du haut sur un ecran de 1 000, sous "A la une" ; il
   ouvre desormais le rail, au niveau de la une, comme la colonne de droite de
   l'ancien site. Le noir est celui des barres du site : le seul aplat que la
   charte admet, et le seul qui se detache d'une colonne de cartes blanches. */
.sma-rail-concours-bloc {
	margin-bottom: 36px;
	padding: 18px 20px 14px;
	background: var(--encre);
	color: var(--surface);
}

.sma-concours-tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
.sma-concours-tete h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.sma-concours-tete span { font-size: 12px; color: var(--sur-sombre); }

.sma-rail-concours {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--filet-sombre);
	color: var(--surface);
	font-weight: 400;
	transition: all var(--transition);
}
.sma-rail-concours:hover { color: var(--surface); }
/* Tous les concours n'ont pas d'affiche : le texte prend alors toute la
   largeur, plutot que de laisser un carre noir de 88 px tenir la colonne. */
.sma-rail-concours--nu { grid-template-columns: 1fr; }

/* Sur fond noir, le survol passe au rouge vif : c'est son seul emploi admis. */
.sma-rail-concours:hover .sma-rail-concours-titre { color: var(--rouge-clair); }
.sma-rail-concours:hover .sma-tuile img { transform: scale(1.05); }
.sma-rail-concours:hover .sma-tuile { outline: 3px solid var(--rouge-clair); outline-offset: -3px; }

.sma-rail-concours-corps { min-width: 0; }

.sma-rail-concours-titre {
	display: block;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	transition: all var(--transition);
}
.sma-rail-concours-lot {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--sur-sombre);
}
/* Le decompte est la seule chose qui distingue ce bloc d'une liste de liens :
   il porte donc le poids d'une etiquette, sans en etre une. */
.sma-rail-concours-delai {
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sur-sombre);
}
/* Les deux derniers jours, en revanche, deviennent une etiquette : c'est le
   seul moment ou l'information est une urgence. */
.sma-rail-concours-delai--urgent {
	padding: 4px 7px;
	background: var(--rouge);
	color: var(--surface);
}
.sma-rail-concours-jouer {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sma-concours-tous { margin: 12px 0 0; font-size: 14px; }
.sma-concours-tous a { color: var(--surface); }
.sma-concours-tous a:hover { color: var(--rouge-clair); }

/* L'exemplaire du telephone (cf. v2_bloc_concours()) ne sert qu'a ce seuil. */
.sma-concours--tel { display: none; }

/* --- La colonne de l'accueil : un bloc, taille a la fenetre ----------------
   Trois etats essayes en deux jours, et c'est le troisieme qui tient.

   1. La colonne entiere epinglee, plafonnee a une fenetre, le reste sous une
      barre de defilement a elle (`.sma-rail-colle`, section 3). Sur une fiche
      de chronique c'est le bon compromis — la colonne y est courte. Sur
      l'accueil elle fait 854 px pour 656 de place sur un portable de 800 :
      deux ascenseurs, et ce qui passait sous le pli n'etait atteignable qu'en
      faisant defiler la colonne elle-meme.

   2. Deux rails colles, haut et pied, les dates defilant entre les deux. Le
      double ascenseur disparaissait, mais deux defauts sont apparus a l'usage
      (Erik, 19/09/2026) : une fois les dates avalees il restait une grande
      zone grise sous le pied, et les 16 px de jour entre l'en-tete et le bloc
      noir faisaient un judas par lequel on voyait passer le texte des dates.

   3. Celui-ci : la colonne est epinglee D'UN SEUL TENANT et taillee a la
      hauteur de la fenetre. Rien ne bouge a l'interieur, donc plus de judas ;
      elle occupe toute la hauteur disponible, donc plus de zone grise ; et
      `overflow: hidden` et non `auto`, donc jamais de second ascenseur.

   Ce qui cede quand la place manque est choisi, et c'est la liste des dates :
   les concours et le pied gardent leur taille (`flex: 0 0 auto`), la bande des
   dates prend ce qui reste et coupe le surplus. Les dates perdues sont donc
   les plus LOINTAINES. C'est l'inverse d'un defilement qui les mangerait par
   le haut, ou la premiere a disparaitre serait la plus proche — c'est-a-dire
   celle qu'on vient chercher. */
.sma-rail--accueil .sma-rail-colle {
	max-height: calc(100vh - var(--h-chrome) - 32px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* L'ordre de ce qui cede quand la place manque, du premier au dernier :

   1. la liste des dates, qui se coupe par le bas — on perd les plus lointaines ;
   2. le bloc des concours, si trois sont ouverts sur un petit ecran ;
   3. le pied, jamais.

   Il s'exprime par les facteurs de retrait : 100 contre 1 contre 0. A basis
   egale, la bande des dates absorbe donc cent fois plus de manque que le bloc
   noir, et a pratiquement disparu avant qu'il ne commence a se rogner. Mesure
   du 19/09/2026 : sans cet ordre, trois concours sur une fenetre de 800
   coupaient le pied de 7 px — c'est-a-dire le seul des trois blocs qu'on ne
   veut jamais entamer.

   `min-height: 0` est indispensable partout ou ca se coupe : un element de
   flex refuse par defaut de descendre sous la taille de son contenu, et sans
   lui la colonne depasse le plafond sans rien couper du tout. */
.sma-rail--accueil .sma-rubriques { flex: 0 0 auto; }

.sma-rail--accueil .sma-rail-concours-bloc {
	flex: 0 1 auto;
	min-height: 0;
	overflow: hidden;
}

.sma-rail--accueil .sma-rail-agenda {
	flex: 1 100 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* Le pied de colonne porte un filet rouge sur toute la largeur (cf. 5.4d).
	   Colle sous « Tout l'agenda », il se lit comme le soulignement d'un titre
	   annoncant ce qui suit, et non comme la fin du bloc des dates (Erik,
	   20/09/2026). Cette reserve ne se laisse jamais manger : meme quand la
	   colonne se rogne, le lien garde ses 20 px avant le trait. */
	padding-bottom: 20px;
}
/* La bande des dates ne grandit plus : c'est le lien qui pousse le vide sous
   lui (`margin-bottom: auto`). Autrement le creux d'une fenetre haute se
   creusait ENTRE la derniere date et le lien — 200 px de gris mesures a
   1 440 x 800 —, et le lien se retrouvait echoue tout en bas, contre le
   filet. Le vide tombe desormais apres lui, la ou il separe deux blocs. */
.sma-rail--accueil .sma-rail-dates {
	flex: 0 1 auto;
	min-height: 0;
	overflow: hidden;
}
/* Une date du rail. Ces declarations etaient des styles en ligne : sorties ici
   pour que le script qui masque les lignes coupees puisse les eteindre — un
   style en ligne l'emporte sur `[hidden]`. Valeurs inchangees, y compris
   l'absence de reponse au survol. */
.sma-rail-date {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
}
.sma-rail-date:hover { color: var(--encre); }
.sma-rail-date[hidden] { display: none; }
.sma-rail-date-jour {
	background: var(--rouge);
	color: var(--surface);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .04em;
	padding: 6px 8px;
}
.sma-rail-date-titre {
	display: block;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
}
.sma-rail-date .sma-meta { font-size: 12px; }

/* Meme facture que « Tous les concours » juste au-dessus : 14 px. A 16 px il
   pesait plus lourd que le titre « Prochaines dates » (15 px), ce qui ajoutait
   a la confusion.

   A DROITE, et c'est ce qui tranche vraiment. La reserve de 20 px ne suffit
   pas quand la liste est coupee — le cas ordinaire : un lien gras, a gauche,
   sous lequel court un trait pleine largeur, se lit comme un titre quelle que
   soit la distance au trait. A droite, il ne peut plus etre qu'une sortie de
   bloc. C'est d'ailleurs la place que lui donne deja l'en-tete de section
   quand elle en porte un (cf. `.sma-section--lien`). */
.sma-rail-agenda-tous {
	margin: 12px 0 auto;
	font-size: 14px;
	text-align: right;
}

/* 5.4d Rappel des rubriques — entre les concours et les prochaines dates.

   Une question, puis cinq rayons. Pas d'aplat de couleur de rubrique : la
   charte reserve ce code aux etiquettes de contenu, et cinq aplats ici se
   liraient comme cinq contenus. Pas d'icone non plus — des mots.

   La grille est a deux colonnes, le dernier rayon prend la largeur restante :
   a 27 % de page le rail fait ~390 px, soit deux boutons de 190. Le bloc
   entier tient en ~150 px, ce que le budget de la colonne collante
   (une hauteur de fenetre, cf. .sma-rail-colle) absorbe apres un concours et
   cinq dates. */
/* Il ferme la colonne, d'ou le filet au-dessus de lui et non en dessous. */
.sma-rubriques {
	padding: 24px 0 4px;
	border-top: 1px solid var(--rouge);
}

/* Une question ne se crie pas : ni capitales ni 32 px, contrairement aux
   titres de section — c'est une phrase adressee au lecteur, pas un intitule
   de rayon. */
.sma-rubriques-tete {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.3;
	color: var(--encre-2);
}

.sma-rubriques-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
/* Garde-fou : un nombre impair de rayons laisserait le dernier seul avec un
   trou a cote. Ils sont six depuis le 19/09/2026, la regle ne mord donc plus —
   elle reste pour le jour ou la liste changera. */
.sma-rubriques-grille > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 5.4b « À la une » de l'accueil : une grande carte, deux moyennes empilees. */
.sma-une {
	display: grid;
	grid-template-columns: 62% 1fr;
	gap: 24px;
}
.sma-une-cote {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 24px;
}

/* Les deux colonnes s'etirent a la meme hauteur, et la colonne de droite est
   toujours la plus haute : la difference tombait en blanc sous le bouton de la
   grande carte. C'est la photo qui l'absorbe desormais — elle grandit, le bloc
   de texte garde sa taille, et le fond de page n'est pas troue pour autant. */
.sma-une .sma-carte .sma-tuile { flex: 1 1 auto; }

/* 5.5 Boutons. */
.sma-bouton {
	display: inline-block;
	padding: 10px 20px;
	background: var(--surface);
	border: 1px solid var(--rouge);
	color: var(--rouge);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition);
}
.sma-bouton:hover { background: var(--rouge); color: var(--surface); }

/* Le bouton « Modifier » d'une page publique — reserve a l'equipe.
   Memes mesures exterieures qu'une etiquette de rubrique (le contour d'un
   pixel compense le retrait de padding) : il s'aligne donc au pixel dans la
   ligne de chapeau, ou il vient toujours en dernier. En contour et non en
   aplat, parce que c'est une commande et non une information sur le contenu —
   et parce qu'un aplat rouge de plus dans cette ligne se lirait comme une
   rubrique. */
.sma-modifier {
	display: inline-block;
	padding: 4px 9px;
	border: 1px solid var(--rouge);
	color: var(--rouge);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all var(--transition);
}
.sma-modifier:hover { background: var(--rouge); color: var(--surface); }

/* « Supprimer », a cote de « Modifier ». Sans contour et dans l'encre
   secondaire : sur une page qu'on ouvre pour lire, corriger est le geste
   courant et supprimer l'exception — deux boutons de meme poids cote a cote
   se cliquent l'un pour l'autre. Le rouge n'arrive qu'au survol, quand le
   doigt est deja parti vers ce lien-la. */
.sma-supprimer {
	display: inline-block;
	padding: 4px 4px;
	color: #666666;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--transition);
}
.sma-supprimer:hover { color: var(--rouge); text-decoration: underline; }
.sma-hero-texte .sma-supprimer { color: #eeeeee; }
.sma-hero-texte .sma-supprimer:hover { color: var(--surface); }
/* Sur le voile noir d'un bandeau, le #990000 de la charte tombe sous le seuil
   de lisibilite : le contour passe au blanc et ne se remplit de rouge qu'au
   survol, ou le texte redevient blanc sur un aplat franc. */
.sma-hero-texte .sma-modifier { border-color: var(--surface); color: var(--surface); }

/* Le compteur de lectures. Il ne se montre qu'a l'auteur d'un contenu et aux
   administrateurs, dans la meme ligne que le bouton ci-dessus : un chiffre de
   plus dans la ligne de chapeau, dans la graisse des metadonnees, sans rien
   qui attire l'oeil — ce n'est pas une information sur le contenu, c'est un
   outil de redaction. Les chiffres en tabulaire pour qu'ils ne dansent pas
   d'une page a l'autre. */
.sma-compteur { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Meme raison que pour le bouton : sur le voile noir d'un bandeau, l'encre
   secondaire tombe sous le seuil de lisibilite. */
.sma-hero-texte .sma-compteur { color: #eeeeee; }
/* Le liseré de survol d'une etiquette-lien est noir : sur le voile noir d'un
   bandeau, il disparaitrait. Il passe au blanc, comme le contour de repos. */
.sma-hero-texte a.sma-badge:hover { outline-color: var(--surface); }

/* Un bouton a la taille d'une aide de champ : « + Ajouter un groupe »,
   « Autoproduction ». Modificateur de .sma-bouton, dont il garde le fond, la
   bordure et le survol — seule l'echelle change. Il n'agit qu'en JavaScript,
   d'ou l'affichage qui attend `est-actif` : un bouton mort serait pire que
   pas de bouton. */
/* Les rayons du rappel de rubriques : deux par rangee dans une colonne de
   390 px, donc plus serres et plus petits que le bouton ordinaire.

   Et surtout, les seuls boutons du site qui ne soient pas rouges : chacun
   porte la couleur de SA rubrique — noir pour News, comme son etiquette (cf. v2_bloc_rubriques() pour la derogation
   a la charte et les contrastes mesures). Au repos un filet de 4 px a gauche,
   contour neutre, texte a la couleur ; au survol l'aplat entier, texte blanc —
   soit l'etiquette exacte que le lecteur va trouver sur la page d'arrivee.

   Le texte est cale a gauche et non centre : le filet de couleur est a gauche,
   un libelle centre s'en decrochait. Les cinq rayons se lisent alors comme une
   liste, ce qu'ils sont. */
.sma-bouton--rayon {
	padding: 9px 10px 9px 12px;
	border-color: var(--filet);
	border-left: 4px solid var(--rayon);
	color: var(--rayon);
	font-size: 12px;
	letter-spacing: .08em;
	text-align: left;
}
/* Meme specificite que `.sma-bouton:hover`, qui remplit en rouge : c'est
   l'ordre du fichier qui tranche, et cette regle vient apres. */
.sma-bouton--rayon:hover {
	background: var(--rayon);
	border-color: var(--rayon);
	color: var(--surface);
}

/* La couleur de chaque rayon, prise au meme jeton que son etiquette : une
   rubrique qui change de couleur change des deux cotes a la fois. */
.sma-rayon--news        { --rayon: var(--rub-news); }
.sma-rayon--photos      { --rayon: var(--rub-photos); }
.sma-rayon--chroniques  { --rayon: var(--rub-chroniques); }
.sma-rayon--interviews  { --rayon: var(--rub-interviews); }
.sma-rayon--articles    { --rayon: var(--rub-articles); }
.sma-rayon--livereports { --rayon: var(--rub-livereports); }

.sma-bouton--mince {
	padding: 4px 10px;
	border-color: var(--muet);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: none;
}

/* Series de champs (les groupes d'un split, les labels d'une sortie).
   Sans JavaScript, tous les champs sont la et les boutons absents : le
   formulaire fonctionne comme avant. */
.sma-repetable-ajout,
.sma-repetable-vite { display: none; margin: -12px 0 20px; }
.sma-repetable-ajout.est-actif,
.sma-repetable-vite.est-actif { display: block; }
.sma-repetable-champ.est-replie { display: none; }

.sma-bouton--pleine-largeur {
	display: block;
	width: 100%;
	padding: 18px 24px;
	font-size: 15px;
}

/* Le pied d'un index : « Charger plus » y remplace la pagination numerotee.
   Le bouton reste seul — la ligne d'annonce ne se remplit qu'apres un clic, et
   sert d'abord aux lecteurs d'ecran. */
.sma-suite { padding: 32px 0; }
.sma-suite-annonce {
	margin: 12px 0 0;
	text-align: center;
}
.sma-suite-annonce:empty { display: none; }

.sma-bouton[disabled],
.sma-bouton[aria-disabled="true"] {
	border-color: var(--muet);
	color: var(--muet);
	cursor: not-allowed;
}
.sma-bouton[disabled]:hover { background: var(--surface); color: var(--muet); }

/* 5.6 Onglets et filtres. */
.sma-onglet {
	padding: 12px 18px;
	background: var(--surface);
	border: 1px solid var(--rouge);
	color: var(--rouge);
	font-family: inherit;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition);
}
.sma-onglet[aria-selected="true"],
.sma-onglet.est-actif { background: var(--rouge); color: var(--surface); }
/* Sur le chrome noir, l'inactif se borde en gris. */
.sma-onglet--sombre { background: transparent; color: var(--surface); border-color: var(--filet-sombre); }

/* 5.7 Bandeau hero. */
.sma-hero {
	position: relative;
	min-height: 340px;
	max-height: 420px;
	background: var(--encre);
	overflow: hidden;
}
.sma-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sma-hero-texte {
	position: relative;
	margin-top: auto;
	padding: 24px 28px;
	background: rgba(0,0,0,.62);
	color: var(--surface);
}
.sma-hero h1 {
	margin: 8px 0;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1;
	font-weight: 900;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

/* 5.7b Bandeau d'illustration d'un article.
   Il prend la mesure du TEXTE, pas celle de la page. Large de 1040 px au-dessus
   d'une colonne de 62 caracteres, il donnait deux largeurs sans rapport : le
   regard ne savait plus ou commençait l'article. Meme valeur que `.sma-corps`,
   donc les deux bords s'alignent exactement. */
.sma-bandeau {
	display: block;
	width: 100%;
	/* `ch` se mesure sur la police de l'element. L'image n'a pas de texte, mais
	   sans cette taille elle heriterait du 16 px de la page et serait 1/16 plus
	   etroite que le texte en 17 px — soit 36 px de decalage, juste assez pour
	   qu'on le voie sans savoir d'ou il vient. */
	font-size: 17px;
	max-width: 62ch;
	max-height: 60vh;
	height: auto;
	object-fit: cover;
	background: var(--encre);
	margin: 0 0 32px;
}

/* 5.7c Lecteur a integrer — Bandcamp, SoundCloud, YouTube.
   Le balisage vient des redacteurs : une `<iframe>` collee depuis la plateforme,
   avec ses dimensions en pixels. `adaptstreaminglink()` ramene les largeurs
   connues de Bandcamp a 100 %, mais pas celles des autres : la borne est donc
   posee ici aussi, pour tout ce qui passe. */
.sma-lecteur {
	margin: 32px 0 0;
	max-width: 62ch;
	font-size: 17px;   /* `ch` se mesure sur la police : meme calcul que le bandeau. */
}

/* Toute iframe rendue dans un contenu redige est bornee, d'ou qu'elle vienne :
   le lecteur en pied d'article, mais aussi celles que le BBCode pose au milieu
   du texte. `bbcode.tpl` ecrit `width='720'` en dur pour la balise [youtube] —
   720 px dans un telephone de 375, qui elargissaient tout le document. */
.sma-corps iframe,
.sma-lecteur iframe { max-width: 100%; border: 0; }

/* Une video collee sans son enveloppe — le redacteur a copie l'iframe de
   YouTube telle quelle. `height: auto` avec le format 16/9 lui rend la hauteur
   que la borne de largeur lui aurait prise. */
.sma-corps > iframe[src*="youtube.com"],
.sma-lecteur > iframe[src*="youtube.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Une video garde son format : bornee en largeur seule, une iframe de 560x315
   se serait retrecie sans perdre un pixel de hauteur, et la bande noire de
   YouTube aurait mange la difference.
   `.videoWrapper` n'est pas une classe du v2 : c'est celle que produisent
   bbcode.tpl et makeembedlink() depuis toujours. On la stylise donc partout ou
   elle tombe, sans la restreindre au lecteur. */
.videoWrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	background: var(--encre);
}
.videoWrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* 5.8 Grille de photos d'une galerie — quatre colonnes, en couleur. */
.sma-grille-photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

/* 5.9 Visionneuse. Sans JavaScript elle n'existe pas et la vignette est un
   lien vers la photo pleine taille : la galerie reste consultable. */
.sma-visionneuse {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	/* 60 px en haut, et non 64 : la barre du compteur est en position
	   absolue — elle ne pousse rien — et elle mesure 53 px (4 de
	   rembourrage, 44 de bouton, 4, plus 1 de filet). Sous 64, elle
	   mordait sur le haut de la photo. 60 est aussi ce qu'attend le
	   `max-height` ci-dessous : 60 + 24 = 84, les deux chiffres cessent
	   de diverger. */
	padding: 60px 12px 24px;
	/* Opaque, et de la meme encre que la barre. A .94, la galerie restait
	   lisible au travers du voile, et les fleches — qui n'ont pas de fond
	   — encadraient chacune un morceau de vignette : on lisait un bouton
	   pose sur une photo. La charte range la visionneuse parmi les
	   endroits ou la photo se regarde pour elle-meme ; rien ne doit y
	   concourir avec elle. */
	background: var(--encre);
}
.sma-visionneuse[hidden] { display: none; }

.sma-visionneuse-image {
	grid-column: 2;
	justify-self: center;
	max-width: 100%;
	max-height: calc(100vh - 84px);
	object-fit: contain;
}

.sma-visionneuse-barre {
	position: absolute;
	top: 0; left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* 4 et non 10 : le bouton Fermer garde ses 44 px de cible tactile — le
	   minimum de la charte, on n'y touche pas — mais la barre cesse d'ajouter
	   20 px autour. Elle passe de 65 a 53 px, et la photo recupere la
	   difference. */
	padding: 4px 16px;
	background: var(--encre);
	border-bottom: 1px solid var(--rouge);
}
.sma-visionneuse-compteur {
	color: var(--muet);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.sma-visionneuse-bouton {
	min-height: 44px;
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--filet-sombre);
	color: var(--surface);
	font-family: inherit;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition);
}
.sma-visionneuse-bouton:hover { background: var(--rouge); border-color: var(--rouge); }

.sma-visionneuse-nav {
	min-width: 44px;
	min-height: 44px;
	padding: 12px 16px;
	background: transparent;
	border: 1px solid var(--filet-sombre);
	color: var(--surface);
	font-family: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: all var(--transition);
}
.sma-visionneuse-nav:hover { background: var(--rouge); border-color: var(--rouge); }
.sma-visionneuse-nav--prec { grid-column: 1; }
.sma-visionneuse-nav--suiv { grid-column: 3; }

/* ---------------------------------------------------------------- */
/* 6. Formulaires                                                    */
/*                                                                   */
/* Regle des planches : la nature d'un message est portee par la     */
/* forme, pas par la teinte. Aucune couleur n'est ajoutee a la       */
/* charte. L'erreur est le seul cas ou le rouge signale — et il ne   */
/* signale qu'accompagne d'un changement de geometrie.               */
/* ---------------------------------------------------------------- */

.sma-champ { display: block; margin-bottom: 20px; }

.sma-champ label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* Astérisque rouge = obligatoire. Les champs facultatifs ne portent
   aucune mention : dans un formulaire de redaction, l'obligatoire
   est minoritaire. */
.sma-champ-requis { color: var(--rouge); }

.sma-champ-aide {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--encre-2);
}

.sma-champ input[type="text"],
.sma-champ input[type="email"],
.sma-champ input[type="password"],
.sma-champ input[type="search"],
.sma-champ input[type="date"],
.sma-champ input[type="url"],
.sma-champ select,
.sma-champ textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--muet);
	background: var(--surface);
	color: var(--encre);
	font-family: inherit;
	font-size: 16px;
	transition: all var(--transition);
}
.sma-champ textarea { min-height: 220px; line-height: 1.5; resize: vertical; }

/* Barre de balises. Elle est collee au haut de la zone de texte — un bandeau
   separe par une marge se lirait comme une rangee de boutons sans rapport avec
   le champ. Elle defile horizontalement plutot que de passer a la ligne : sur
   telephone, dix boutons empiles sur trois rangees repoussent le texte hors de
   l'ecran, et c'est le texte qu'on vient ecrire. */
.sma-barre {
	display: flex;
	gap: 4px;
	padding: 6px;
	background: var(--fond);
	border: 1px solid var(--muet);
	border-bottom: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}
.sma-barre[hidden] { display: none; }
.sma-champ .sma-barre + textarea { margin-top: 0; }

.sma-barre-bouton {
	flex: 0 0 auto;
	min-height: 34px;
	padding: 6px 10px;
	background: var(--surface);
	border: 1px solid var(--muet);
	color: var(--encre);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: all var(--transition);
}
.sma-barre-bouton:hover {
	background: var(--rouge);
	border-color: var(--rouge);
	color: var(--surface);
}
.sma-barre-bouton--b { font-weight: 900; }
.sma-barre-bouton--i { font-style: italic; }
.sma-barre-bouton--u { text-decoration: underline; }

/* Ces trois-la nomment quelqu'un plutot que de mettre en forme : elles font un
   lien vers une fiche, et `[band]` rattache pour de bon — elle remplit
   band_reports. Elles se distinguent donc a l'oeil, pour qu'on ne les prenne
   pas pour du gras. */
.sma-barre-bouton--band,
.sma-barre-bouton--label,
.sma-barre-bouton--venue {
	border-color: var(--rouge);
	color: var(--rouge);
}

.sma-champ input:hover,
.sma-champ select:hover,
.sma-champ textarea:hover { border-color: var(--encre); }

/* Au focus, l'outline suffit : la bordure ne bouge pas. */
.sma-champ input:focus-visible,
.sma-champ select:focus-visible,
.sma-champ textarea:focus-visible { border-color: var(--muet); }

/* Rempli : la valeur passe en 700 pour se detacher du placeholder. */
.sma-champ input:not(:placeholder-shown),
.sma-champ textarea:not(:placeholder-shown) { font-weight: 700; }

.sma-champ input[disabled],
.sma-champ select[disabled],
.sma-champ textarea[disabled] {
	border-style: dotted;
	background: var(--fond);
	color: var(--encre-2);
	cursor: not-allowed;
}

/* Lecture seule : pas de boite, un simple filet bas. */
.sma-champ input[readonly] {
	border: 0;
	border-bottom: 1px solid var(--filet);
	padding-left: 0;
	background: transparent;
	font-weight: 700;
}

/* Erreur : bordure epaissie a 2px, message sous le champ — jamais a
   droite, la colonne est trop etroite sur mobile. */
.sma-champ--erreur input,
.sma-champ--erreur select,
.sma-champ--erreur textarea { border: 2px solid var(--rouge); }

.sma-champ-erreur {
	display: block;
	margin-top: 6px;
	padding-left: 10px;
	border-left: 4px solid var(--rouge);
	font-size: 13px;
	font-weight: 700;
	color: var(--rouge);
}

/* 6.1 Messages — barre verticale de 4px + intitule en capitales. */
.sma-message {
	padding: 14px 18px;
	background: var(--surface);
	border-left: 4px solid var(--encre);
	margin-bottom: 20px;
}
.sma-message-titre {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sma-message p { margin: 0; font-size: 15px; line-height: 1.5; }

.sma-message--erreur { border-left-color: var(--rouge); }
.sma-message--erreur .sma-message-titre { color: var(--rouge); }

.sma-message--succes { border-left-color: var(--encre); }

.sma-message--info {
	border-left-color: var(--muet);
	color: var(--encre-2);
}

/* L'avertissement se reconnait en niveaux de gris : barre hachuree. */
.sma-message--avertissement {
	border-left: 0;
	padding-left: 22px;
	background:
		repeating-linear-gradient(45deg,
			var(--encre) 0 3px, var(--surface) 3px 6px) left / 4px 100% no-repeat,
		var(--surface);
}

/* 6.2 Pied de formulaire. */
.sma-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--filet);
}
/* Le destructif se reconnait sans devenir l'element le plus visible. */
.sma-bouton--destructif {
	margin-left: auto;
	border-color: var(--muet);
	color: var(--encre-2);
}
.sma-bouton--destructif:hover { background: var(--rouge); border-color: var(--rouge); color: var(--surface); }

/* ---------------------------------------------------------------- */
/* 7. Etats de page                                                  */
/* ---------------------------------------------------------------- */

.sma-vide {
	padding: 48px 24px;
	background: var(--surface);
	border: 1px solid var(--filet);
	text-align: center;
}
.sma-vide p { margin: 0 0 16px; font-size: 17px; color: var(--encre-2); }

/* ---------------------------------------------------------------- */
/* 8. Seuils                                                         */
/* ---------------------------------------------------------------- */

/* Deux seuils, et une regle qui les gouverne : sur un ecran de telephone, une
   grille de contenu n'a jamais qu'UNE colonne. Deux colonnes de 170 px donnent
   des photos qu'on ne lit pas et des titres qui cassent a chaque mot. Ce qui
   reste en plusieurs colonnes sous 620 px se compte : les vignettes d'une
   galerie (on y cherche une image, pas un texte) et les tuiles de
   l'administration (des boutons, pas des articles).

   900 px — tablette : la page passe sur une colonne, les grilles sur deux.
   620 px — telephone : une colonne partout, les cartes deviennent des lignes. */

@media (max-width: 900px) {
	/* L'en-tete ne colle plus : empile sur deux rangees il mesure 110 px, et
	   les garder en permanence sur un ecran de 812 px coute plus cher que le
	   raccourci qu'ils rendent. Les reperes qui collent sous lui — separateurs
	   de jour, barre des lettres — s'ancrent donc sur le seul menu, qui lui
	   colle (voir plus bas). */
	:root { --h-entete: 0px; }

	/* 44 px : la cible tactile du bouton « Menu », qui est ici la seule barre
	   collante. sma.js la remesure, mais la valeur d'ici est deja la bonne
	   dans le cas courant — et la seule disponible sans script. */
	:root { --h-nav: 44px; }

	/* `height: auto` : la hauteur du contenu, et non les 0 px que vaut ici
	   `--h-entete`. C'est le seul endroit ou l'en-tete ne mesure pas ce que
	   la variable annonce — et pour cause, elle ne mesure plus rien : elle
	   ne sert qu'a ancrer ce qui colle, et ici plus rien ne colle. */
	.sma-entete { position: static; height: auto; padding: 12px 16px; }

	/* Meme plancher a zero que la colonne de lecture, et pour la meme raison :
	   sans lui une image large tire la piste au-dela de la fenetre. */
	.sma-colonnes { grid-template-columns: minmax(0, 1fr); gap: 32px; }

	/* Le rail redevient un bloc ordinaire : plus de piste collante, donc plus
	   de grille a deux rangees ni de hauteur bornee. */
	.sma-rail { display: block; align-self: auto; }
	.sma-rail-colle {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* --- Les concours remontent sous "A la une" ---------------------------
	   Sur telephone il n'y a plus de zone collante : le rail tombe apres le
	   flux, soit vingt entrees plus bas. Une prochaine date y survit — elle
	   sera encore la demain ; un concours qui ferme dans deux jours, non.
	   L'exemplaire du rail s'efface donc, celui qui suit la une prend le
	   relais (cf. v2_bloc_concours()). */
	.sma-rail--accueil .sma-rail-concours-bloc { display: none; }
	.sma-concours--tel { display: block; }

	/* Plus de colonne a tailler : le rail est un bloc ordinaire apres le flux,
	   et la liste des dates doit s'y montrer en entier. */
	.sma-rail--accueil .sma-rail-colle { max-height: none; overflow: visible; display: block; }
	.sma-rail--accueil .sma-rail-dates { overflow: visible; }

	/* Logo et compte sur la meme rangee, recherche en dessous. Sans placement
	   explicite, la recherche (qui prend toute la largeur) s'inserait entre les
	   deux et l'en-tete tenait sur trois rangees. */
	.sma-entete {
		grid-template-columns: 1fr auto;
		gap: 10px 12px;
	}
	.sma-entete > :last-child { grid-row: 1; grid-column: 2; }
	.sma-recherche { grid-row: 2; grid-column: 1 / -1; max-width: none; }
	/* 150 px : le bouton de compte partage la rangee et ne laisse pas plus.
	   C'est pourquoi l'en-tete sert ici le logo SANS baseline (cf. le
	   <picture> de chrome.php) — a cette largeur la baseline ferait 3,5 px de
	   haut et se lirait comme une salissure. La charte prevoit exactement ce
	   cas : version sans baseline sous 180 px.
	   La zone de protection est tenue ici sans rien changer : a 150 px le
	   crane fait 9,8 px, et le remplissage de l'en-tete mobile en donne 12 en
	   haut et 16 a gauche. */
	.sma-logo { max-width: 150px; }

	/* --- Le menu devient un depliant -------------------------------------
	   Une barre defilante horizontale ne dit pas qu'elle defile : le lecteur
	   voyait quatre rubriques sur onze et pouvait croire qu'il n'y en avait
	   que quatre. Le depliant les montre toutes, d'un coup, en pleine largeur.
	   Les regles ne s'appliquent que si le script a pose `js-nav` : sans lui,
	   la barre defilante reste, et rien n'est perdu. */
	.sma-nav { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; }

	/* --- Le menu colle, l'en-tete non -------------------------------------
	   L'en-tete empile mesure 110 px et s'en va avec la page : c'est voulu,
	   il ne vaut pas le huitieme d'un ecran de 812 px. Mais il emportait le
	   menu, et changer de rubrique demandait de remonter toute la page.
	   Ce qui colle ici, c'est donc la seule ligne du menu — 44 px, la cible
	   tactile —, qu'elle prenne la forme du bouton (avec script) ou de la
	   barre defilante (sans). */
	.sma-nav-bascule, .sma-nav {
		position: sticky;
		top: 0;
		z-index: 29;
	}

	/* Le depliant s'ouvre sous le bouton, et non a la place qu'il occupe dans
	   la page : celle-ci est tout en haut, et un menu ouvert a mille pixels
	   au-dessus du doigt n'apparait nulle part — c'est ce que donnait un
	   `position: static`. Il colle donc lui aussi, juste sous le bouton.
	   `--h-nav` vaut ici la hauteur du bouton, que sma.js mesure. */
	.js-nav .sma-nav.est-ouvert { top: var(--h-nav); }

	.js-nav .sma-nav-bascule { display: flex; }
	.js-nav .sma-nav { display: none; }
	.js-nav .sma-nav.est-ouvert {
		display: block;
		padding: 0;
		overflow: visible;
	}
	/* Les rubriques se calent du meme cote que le bouton qui les a ouvertes :
	   l'oeil descend le long d'un seul bord, et la main reste ou elle vient
	   de cliquer. */
	.js-nav .sma-nav.est-ouvert a {
		display: block;
		padding: 14px 16px;
		text-align: right;
		border-top: 1px solid rgba(255,255,255,.14);
	}
	/* Pousse a droite dans une barre, le lien d'administration n'a plus de
	   raison de l'etre dans une liste verticale. Son filet rouge passe du
	   cote du texte, contre le bord droit. */
	.js-nav .sma-nav.est-ouvert .sma-nav-admin {
		margin-left: 0;
		box-shadow: inset -3px 0 0 var(--rouge);
	}

	/* La meta passe sous le titre : trois colonnes ne tiennent pas.
	   Mais la vignette est carree, donc plus haute que le titre : laissee sur
	   la seule premiere rangee, elle imposait 96 px a cette rangee, le texte
	   s'y centrait — un blanc au-dessus, un blanc en dessous — et la signature
	   partait encore 14 px plus bas, dans une rangee a elle. La vignette couvre
	   donc les deux rangees ; la premiere se serre sur le titre, la seconde
	   prend le reste, et tout se cale en haut. Le blanc qui subsiste tombe
	   sous la signature, le long du bas de la photo, ou il se lit comme une
	   marge et non comme un trou. */
	.sma-flux-item {
		grid-template-columns: 96px 1fr;
		grid-template-rows: min-content 1fr;
		gap: 2px 14px;
		align-items: start;
		padding: 12px 8px;
	}
	.sma-flux-vignette { grid-row: 1 / span 2; }
	.sma-flux-meta { grid-column: 2; text-align: left; }
	.sma-flux-titre { font-size: 17px; }
	.sma-flux-teaser { display: none; }
	/* La legende ne suit pas le teaser dans sa disparition : sans elle, sept
	   galeries d'un meme groupe rendent sept lignes rigoureusement identiques —
	   meme vignette de 96 px, meme etiquette, meme titre. Bornee a deux lignes
	   pour que la ligne reste courte ; le lieu et la date passent avant la
	   signature, qui est ce qu'on perd en premier. Elle comble au passage le
	   blanc qui restait sous le titre, le long de la vignette. */
	.sma-flux-legende {
		font-size: 13px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.sma-section h2 { font-size: 24px; }

	/* Toutes les grilles de cartes tombent a deux colonnes d'un coup. */
	.sma-grille,
	.sma-grille--4 { grid-template-columns: repeat(2, 1fr); }

	.sma-une { grid-template-columns: 1fr; }
	.sma-une-cote { grid-template-rows: auto auto; }
	/* Une carte n'est plus etiree par sa voisine : la photo reprend son ratio
	   au lieu de s'allonger pour combler une hauteur qui n'existe plus. */
	.sma-une .sma-carte .sma-tuile { flex: 0 0 auto; }

	.sma-grille-photos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	/* --- Visionneuse : les fleches passent SOUS la photo ------------------
	   De part et d'autre, elles prenaient chacune 44 px sur une largeur de
	   375 : la photo n'en gardait que les deux tiers, et une photo en paysage
	   — le cas ordinaire d'un concert — s'en trouvait reduite d'autant alors
	   que la hauteur, elle, restait libre. Dessous, elles ne coutent qu'une
	   rangee : meme une photo en portrait garde toute la largeur.
	   Le balayage horizontal fait la meme chose sans bouton (sma.js). */
	.sma-visionneuse {
		grid-template-columns: 1fr 1fr;
		/* `minmax(0, 1fr)` et non `1fr` : pour la hauteur, ce que le
		   commentaire de `.sma-colonnes--lecture` dit de la largeur. Une
		   piste `1fr` a pour minimum automatique le min-content de son
		   contenu, et celui d'une photo vaut ici la hauteur qu'elle prend a
		   la largeur disponible : 601 px pour un 800x1220 sur un ecran de
		   402. La rangee debordait donc, et poussait les fleches sous le bas
		   de l'ecran des que la hauteur utile passait sous 718 px, ce qu'un
		   telephone fait toujours, barre du navigateur comprise. Un paysage,
		   lui, tenait jusqu'a 403 px : d'ou un defaut qui ne se voyait que
		   sur les photos en portrait. */
		grid-template-rows: minmax(0, 1fr) auto;
		/* 60 comme sur ordinateur : c'est la hauteur de la barre (53) qui
		   commande, et elle ne change pas d'une branche a l'autre. */
		padding: 60px 4px 16px;
		gap: 8px 4px;
	}
	.sma-visionneuse-image {
		grid-column: 1 / -1;
		grid-row: 1;
		/* 60 de barre + 44 de fleche + 16 de rembourrage bas + 8 de
		   gouttiere = 128. On soustrait, au lieu du `max-height: 100%` plus
		   court qui tenait ici jusqu'ici : **WebKit resout ce pourcentage
		   contre la boite du conteneur et non contre la rangee**. Mesure sur
		   le moteur de Safari, photo 400x620 dans une fenetre de 393x670 :
		   rangee de 542 px, mais image calculee a 594 — soit 670 - 60 - 16,
		   la hauteur du conteneur. 52 px de trop, repartis de part et
		   d'autre par le centrage : la photo mordait donc en haut sur la
		   barre et en bas sur les fleches. Chromium bornait correctement a
		   542 : d'ou un defaut qui ne se voyait que sur iPhone, et seulement
		   quand la photo est bornee en hauteur plutot qu'en largeur.
		   `dvh` et non `vh` : sur iOS, `vh` compte l'ecran barres masquees.
		   La ligne en `vh` juste avant sert de repli aux moteurs sans `dvh`. */
		max-height: calc(100vh - 128px);
		max-height: calc(100dvh - 128px);
	}
	/* Ramenees a leurs 44 px de cible tactile, contre 50 auparavant : le
	   chevron perd 4 px et le rembourrage vertical 8. */
	.sma-visionneuse-nav { grid-row: 2; font-size: 20px; padding: 8px 16px; }
	.sma-visionneuse-nav--prec { grid-column: 1; }
	.sma-visionneuse-nav--suiv { grid-column: 2; }

	/* Cibles tactiles : 44px minimum. */
	.sma-nav a, .sma-onglet, .sma-bouton { min-height: 44px; }
	/* L'etiquette de compte est un lien depuis qu'elle mene a la liste
	   complete de sa rubrique : 20 px de haut se visent mal au doigt. On lui
	   donne de la prise sans la grossir — c'est la marge qui s'ouvre, pas le
	   texte. */
	.sma-badge--compte { padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 620px) {
	/* 2 % de 390 px font 8 px de gouttiere : le texte touche le bord. */
	:root { --marge: 14px; }

	/* La pastille de retour en haut flotte au-dessus du texte : sur 390 px,
	   « Haut de page » en couvrait 40 % de la largeur. La fleche dit deja le
	   sens, le mot suffit a dire qu'il ne s'agit pas de la suite. */
	.sma-haut { right: 12px; bottom: 12px; padding: 10px 14px; }
	.sma-haut-suite { display: none; }

	.sma-grille,
	.sma-grille--4 { grid-template-columns: 1fr; gap: 12px; }

	.sma-section h2 { font-size: 21px; }
	.sma-section { gap: 12px; }

	/* La barre de rubriques deborde : on le dit, plutot que de laisser croire
	   qu'elle s'arrete a « Chroniques ». */
	.sma-nav { scroll-snap-type: x proximity; }
	.sma-nav a { scroll-snap-align: start; padding: 14px 12px; }

	/* Le titre d'une grande carte n'a pas besoin des 34 px du bureau : a cette
	   largeur il tiendrait sur cinq lignes. */
	.sma-une .sma-carte-titre { font-size: 24px; }

	/* --- Tuile de galerie : la legende descend sous la photo ---------------
	   Surimprimee, elle couvrait la moitie d'une vignette de 170 px et rendait
	   illisibles la photo comme le texte. Posee dessous sur fond blanc, chacun
	   retrouve sa place. */
	.sma-carte-photo { background: var(--surface); color: var(--encre); }
	.sma-carte-photo:hover { color: var(--encre); }
	.sma-carte-photo .sma-tuile-legende {
		position: static;
		/* La legende est un <span> : en flux, inline, elle ne comptait pas sa
		   propre hauteur dans la carte et sa derniere ligne passait dessous. */
		display: block;
		padding: 10px 12px;
		background: var(--surface);
		color: var(--encre);
	}
	.sma-carte-photo .sma-legende-sourdine { color: var(--encre-2); }

	/* --- La carte en ligne ------------------------------------------------
	   La forme que prend une carte sur telephone : photo carree a gauche sur
	   toute la hauteur, texte a droite. Huit entrees tiennent alors dans un
	   ecran la ou deux cartes empilees en occupaient un chacune.

	   Trois familles de cartes y passent — tete de rubrique (sauf la
	   premiere), « A la une » (sauf la premiere), vedettes d'artistes — donc
	   une seule declaration et trois selecteurs. */
	.sma-liste-une > .sma-carte:nth-child(n+2),
	.sma-une-cote > .sma-carte,
	.sma-grille--compacte > .sma-carte {
		display: grid;
		grid-template-columns: 104px 1fr;
	}
	.sma-liste-une > .sma-carte:nth-child(n+2) .sma-tuile,
	.sma-une-cote > .sma-carte .sma-tuile,
	.sma-grille--compacte > .sma-carte .sma-tuile,
	.sma-grille--compacte > .sma-carte .sma-portrait-vide {
		/* Le ratio doit sauter : avec une hauteur imposee a 100 %, il
		   recalculerait la largeur depuis cette hauteur et la photo
		   deborderait sa colonne par-dessus le texte. */
		aspect-ratio: auto;
		width: 100%;
		height: 100%;
		min-height: 104px;
	}
	.sma-liste-une > .sma-carte:nth-child(n+2) .sma-carte-corps,
	.sma-une-cote > .sma-carte .sma-carte-corps,
	.sma-grille--compacte > .sma-carte .sma-carte-corps { padding: 10px 12px; }

	.sma-liste-une > .sma-carte:nth-child(n+2) .sma-carte-titre,
	.sma-une-cote > .sma-carte .sma-carte-titre,
	.sma-grille--compacte > .sma-carte .sma-carte-titre { font-size: 16px; }

	.sma-liste-une > .sma-carte:nth-child(n+2) .sma-carte-teaser,
	.sma-une-cote > .sma-carte .sma-carte-teaser { display: none; }

	/* Trois cartes pleines, c'est trois ecrans avant d'atteindre la liste. La
	   premiere reste une carte — image bornee, elle ne prend plus tout
	   l'ecran — les deux suivantes passent en lignes. Rien n'est retire de la
	   page, et le lecteur atteint le flux sans trois balayages. */
	.sma-liste-une { gap: 12px; margin-bottom: 28px; }
	.sma-une        { gap: 12px; }
	.sma-une-cote   { gap: 12px; }
	.sma-liste-une > .sma-carte:first-child .sma-tuile,
	.sma-une > .sma-carte .sma-tuile { max-height: 240px; }

	.sma-grille-photos { gap: 4px; }

	/* Le corps d'une carte pleine largeur n'a plus besoin de 22 px de marge. */
	.sma-carte-corps { padding: 16px 16px 18px; }
}

/* ---------------------------------------------------------------- */
/* 8b. Accueil : la une, les etageres, les deux formats du flux       */
/* ---------------------------------------------------------------- */

/* Place apres les seuils generaux, et avec ses propres seuils : ces regles
   reprennent des classes que les seuils ci-dessus reglent aussi (la ligne de
   flux, "A la une"), et c'est a elles de trancher sur l'accueil. */

.sma-accueil { margin-top: 32px; }
.sma-accueil-bloc { margin-bottom: 44px; }

/* Un rail plus etroit que sur les autres pages (Erik, 12/09/2026) : la une et
   les etageres y gagnent de l'air — 1 009 px au lieu de 940 a 1 440 px de
   large —, et le bloc des concours tient sans peine dans ses 318 px. Borne a
   260 px en bas : c'est ce que demandent une affiche de 88 px et son texte sur
   un ecran etroit d'ordinateur. */
.sma-colonnes.sma-accueil {
	grid-template-columns: minmax(0, 1fr) clamp(260px, 23%, 330px);
	gap: 4%;
}

/* En-tete de section qui porte un lien a droite : le filet est un element
   pose avant le lien, plus le trait genere en fin de ligne. */
.sma-section--lien::after { display: none; }
.sma-section--lien > a { font-size: 14px; white-space: nowrap; }

/* "A la une" tient en 500 px au lieu de 1 000 : la grande carte a gauche,
   deux petites a droite, photo a gauche de leur texte.
   Sous `.sma-accueil` seulement : les autres pages du site gardent la une
   des regles 5.4b. `:where()` ne compte pas dans la specificite, leur cascade
   est donc inchangee. */
:where(.sma-accueil) .sma-une { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
:where(.sma-accueil) .sma-une-cote { gap: 20px; }
:where(.sma-accueil) .sma-une-cote > .sma-carte { flex-direction: row; }
:where(.sma-accueil) .sma-une-cote > .sma-carte .sma-tuile { flex: 0 0 44%; aspect-ratio: auto; }
:where(.sma-accueil) .sma-une-cote .sma-carte-corps--compact { min-width: 0; padding: 14px 16px 16px; }
:where(.sma-accueil) .sma-une-cote .sma-carte-teaser {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: 14px;
}
:where(.sma-accueil) .sma-une .sma-carte-titre--large { font-size: 30px; }

/* --- Une soiree : son titre, sa date et son affiche -------------------- */
.sma-soiree-tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
/* Un titre de concert saisi en capitales est long : il se coupe plutot que
   de pousser la date sur une deuxieme ligne. */
.sma-soiree-titre {
	margin: 0;
	min-width: 0;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sma-soiree-titre a { color: var(--encre); }
.sma-soiree-titre a:hover { color: var(--rouge); }
.sma-soiree-quand { flex: none; font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.sma-soiree-corps { min-width: 0; }

/* L'affiche : un nom par galerie. Un nom ne se coupe jamais en fin de ligne
   — « 200 / Stab Wounds » se lisait comme deux groupes. */
.sma-soiree-affiche {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	line-height: 1.45;
	font-weight: 700;
}
.sma-soiree-affiche li { display: inline; white-space: nowrap; }
.sma-soiree-affiche a { color: var(--encre); font-weight: 700; }
.sma-soiree-affiche a:hover { color: var(--rouge); }
.sma-soiree-qui { font-weight: 400; color: var(--encre-2); }
.sma-soiree-sep { color: var(--muet); font-weight: 400; }
.sma-soiree-autres a { color: var(--rouge); }
.sma-soiree-corps > .sma-soiree-affiche { display: block; }

/* Les galeries des trois derniers jours ouvrent l'affiche, sur une ligne a
   elles, annoncees une seule fois. */
.sma-soiree-neuf { margin-bottom: 3px; font-size: 14.5px; line-height: 1.45; }
.sma-nouveau {
	margin-right: 6px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rouge);
	vertical-align: 1px;
}

/* Le chapeau d'une carte : etiquette de rubrique et date sur une ligne. */
.sma-carte-chapeau { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

/* --- Le flux : deux formats --------------------------------------------
   Une news tient sur une ligne serree, un contenu long garde une grande
   ligne qui accroche l'oeil au milieu des news. */
/* L'ecart entre les deux formats a ete resserre le jour meme de la mise en
   ligne (Erik) : une news de 90 px contre une galerie de 205, c'etait trop.
   109 contre 169 garde la hierarchie sans ecraser les news. */
.sma-flux-item--court {
	grid-template-columns: 84px 1fr 72px;
	gap: 18px;
	padding: 12px;
}
.sma-flux-item--court .sma-flux-chapeau { margin-bottom: 4px; }
.sma-flux-item--court .sma-flux-titre { margin-bottom: 3px; font-size: 18px; }
/* L'apercu d'une news : une seule ligne, en petit (Erik, 12/09/2026). */
.sma-flux-item--court .sma-flux-teaser {
	max-width: none;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sma-flux-item--riche {
	grid-template-columns: 136px 1fr 120px;
	gap: 22px;
	padding: 16px 12px;
}
.sma-flux-item--riche .sma-flux-titre {
	margin: 2px 0 5px;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -.015em;
}
.sma-flux-item--riche .sma-flux-teaser,
.sma-flux-item--riche .sma-flux-legende { font-size: 15px; }

@media (max-width: 900px) {
	/* La regle du rail etroit passe apres le seuil general : elle doit y
	   revenir d'elle-meme a une seule colonne. */
	.sma-colonnes.sma-accueil { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	:where(.sma-accueil) .sma-une { grid-template-columns: minmax(0, 1fr); }

	/* La ligne courte garde son apercu, meme ici : c'est une ligne, pas deux. */
	.sma-flux-item--court { grid-template-columns: 64px 1fr; padding: 12px 8px; }
	.sma-flux-item--court .sma-flux-teaser { display: block; font-size: 13px; }
	.sma-flux-item--court .sma-flux-meta { display: none; }
	.sma-flux-item--riche { grid-template-columns: 108px 1fr; padding: 14px 8px; }
	.sma-flux-item--riche .sma-flux-titre { font-size: 19px; }
}

/* ---------------------------------------------------------------- */
/* 8c. Accueil : la une en largeur et la bande serree                 */
/* ---------------------------------------------------------------- */

/* Les deux morceaux retenus des essais du 12 au 19/09/2026 (Erik) : la une
   dont le premier contenu prend toute la largeur, et la bande qui range les
   dernieres soirees et les derniers textes en deux listes serrees, assez
   courtes pour que le flux commence haut dans la page. */

/* --- La une en largeur -------------------------------------------------
   Le premier contenu prend toute la zone principale, photo a gauche et texte
   a droite ; les deux suivants se rangent cote a cote dessous. Sous 900 px il
   s'empile, comme les autres. */
.sma-une--large { grid-template-columns: minmax(0, 1fr); }
.sma-une--large > .sma-carte { flex-direction: row; }
.sma-une--large > .sma-carte .sma-tuile { flex: 0 0 58%; aspect-ratio: 3 / 2; }
.sma-une--large > .sma-carte .sma-carte-corps { min-width: 0; justify-content: center; }
.sma-une--large > .sma-une-cote {
	grid-template-rows: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.sma-une--large > .sma-carte { flex-direction: column; }
	.sma-une--large > .sma-carte .sma-tuile { flex: 0 0 auto; aspect-ratio: 16 / 9; }
	.sma-une--large > .sma-une-cote { grid-template-columns: minmax(0, 1fr); }
}

/* --- La bande : photos et textes cote a cote, en deux listes serrees ---- */
.sma-bande-double {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
	align-items: start;
}
.sma-bande-double .sma-section h2 { font-size: 24px; }
.sma-bande-liste {
	margin: 0;
	padding: 0 12px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--filet);
}
.sma-bande-liste > li + li { border-top: 1px solid var(--filet); }
.sma-bande-soiree {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 10px 0;
}
.sma-bande-soiree .sma-soiree-tete { display: block; margin-bottom: 4px; }
.sma-bande-soiree .sma-soiree-titre { display: block; font-size: 15px; }
.sma-bande-soiree .sma-soiree-affiche,
.sma-bande-soiree .sma-soiree-neuf { font-size: 13.5px; line-height: 1.4; }
.sma-bande-texte {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 10px 0;
	color: var(--encre);
	font-weight: 400;
}
.sma-bande-texte:hover { color: var(--encre); }
.sma-bande-texte .sma-carte-chapeau { margin-bottom: 5px; }
.sma-bande-texte strong {
	display: block;
	font-size: 15px;
	line-height: 1.25;
	font-weight: 700;
	transition: all var(--transition);
}
.sma-bande-texte:hover strong { color: var(--rouge); }

@media (max-width: 900px) {
	.sma-bande-double { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------------------------------------------------------------- */
/* 9. Impression et preferences                                      */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.sma-tuile:hover img,
	.sma-flux-item:hover .sma-flux-vignette img { transform: none; }
	.sma-flux-item:hover { transform: none; }
}

/* ---------------------------------------------------------------- */
/* 10. Index des artistes                                            */
/* ---------------------------------------------------------------- */

/* La barre des lettres colle sous l'en-tete : sur 3 800 groupes, on change
   souvent de lettre et il ne faut pas remonter pour ca. */
.sma-lettres {
	position: sticky;
	top: var(--h-chrome);
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 10px 0;
	background: var(--fond);
	border-bottom: 1px solid var(--muet);
}
.sma-lettre {
	min-width: 34px;
	padding: 8px 6px;
	text-align: center;
	color: var(--rouge);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .04em;
	border: 1px solid transparent;
	transition: all var(--transition);
}
.sma-lettre:hover { color: var(--surface); background: var(--rouge); }
.sma-lettre.est-actif { color: var(--surface); background: var(--rouge); }

/* Index compact : quatre colonnes, aucune image requise — donc aucun trou
   quand la photo du groupe manque, ce qui est le cas le plus frequent.
   Le nombre de colonnes descend avec la largeur : a quatre sous 1 100 px, le
   nom d'un groupe et ses cinq marques ne tiennent plus sur une ligne. */
.sma-index-artistes {
	column-count: 4;
	column-gap: 40px;
	margin-top: 12px;
}
.sma-index-artistes a { break-inside: avoid; }

/* Le nom a gauche, les marques calees a droite : c'est leur alignement d'une
   ligne a l'autre qui rend la colonne lisible en diagonale. Le nom garde
   partout la meme taille et la meme graisse — le volume de contenu ne se lit
   plus dans la typographie, seulement dans les marques. */
.sma-index-artiste {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 5px 0;
	color: var(--encre);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
}
.sma-index-nom { flex: 1 1 auto; min-width: 0; }
/* Le survol se voit sur le nom, comme sur les cartes : la ligne entiere qui
   rougit ferait clignoter les marques, dont la couleur est un code. */
.sma-index-artiste:hover { color: var(--encre); }
.sma-index-artiste:hover .sma-index-nom { color: var(--rouge); }
.sma-marques {
	flex: 0 0 auto;
	display: flex;
	gap: 2px;
}
/* Ce que l'index des labels cale a droite a la place des marques : un nombre
   de chroniques. Il ne se lit plus dans la taille du nom, il se lit ici. */
.sma-index-compte {
	flex: 0 0 auto;
	color: var(--encre-2);
	font-size: 11px;
}

/* Une initiale par rubrique, dans la couleur de la charte. Les cinq places
   sont toujours occupees : une rubrique vide reste en gris a sa place, sans
   quoi les colonnes de marques se desalignent et l'index n'est plus lisible
   qu'une ligne a la fois. */
.sma-marque {
	width: 15px;
	padding: 2px 0;
	text-align: center;
	color: var(--surface);
	background: var(--encre-2);
	font-size: 10px;
	font-weight: 900;
	line-height: 1.2;
}
.sma-marque--news        { background: var(--rub-news); }
.sma-marque--chroniques  { background: var(--rub-chroniques); }
.sma-marque--photos      { background: var(--rub-photos); }
.sma-marque--livereports { background: var(--rub-livereports); }
.sma-marque--interviews  { background: var(--rub-interviews); }
.sma-marque.est-vide {
	color: rgba(0,0,0,.25);
	background: rgba(0,0,0,.06);
}

/* La legende des initiales. L'infobulle donne le compte au survol, mais elle
   n'existe pas au doigt : ce que veut dire chaque lettre se lit ici. */
.sma-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 20px 0 0;
	color: var(--encre-2);
	font-size: 12px;
}
.sma-legende-entree {
	display: flex;
	align-items: center;
	gap: 6px;
}

@media (max-width: 1100px) {
	.sma-index-artistes { column-count: 3; }
}

@media (max-width: 900px) {
	.sma-index-artistes { column-count: 2; column-gap: 24px; }
	.sma-lettre { min-height: 44px; }
	/* La ligne devient une cible tactile : 13 px de part et d'autre d'un nom
	   de 17,5 px font les 44 px du doigt. */
	.sma-index-artiste { padding: 13px 0; gap: 8px; }
}

@media (max-width: 620px) {
	.sma-index-artistes { column-count: 1; }
}

/* ---------------------------------------------------------------- */
/* 11. Agenda                                                        */
/* ---------------------------------------------------------------- */

/* Toute la ligne est le lien. Le fond reste blanc au survol : l'inversion en
   noir de l'ancien agenda rendait la ligne illisible pendant le mouvement. */
/* L'agenda ne s'etale pas sur les 1440 px de la page. Ses lignes sont courtes —
   une affiche, un titre, un lieu — et a pleine largeur le titre restait colle a
   gauche pendant que le lieu partait a l'autre bout de l'ecran, avec un demi
   metre de vide au milieu. Le filtre par zone et le titre suivent la meme
   mesure, sinon la colonne paraitrait decalee. */
.sma-page--agenda { max-width: 1040px; }

/* L'invitation a proposer une date, entre le filtre par zone et les dates.
   Un panneau blanc borde comme une ligne d'agenda, pas un aplat de couleur :
   il est dans la colonne des dates et doit se lire comme en faisant partie,
   sans pour autant se confondre avec une date de plus — d'ou le filet rouge a
   gauche, emprunte aux messages, qui dit « ceci s'adresse a toi ».
   Ni .sma-vide (c'est un etat de page, pas une invitation) ni .sma-message
   (qui commente une action qu'on vient de faire) ne convenaient. */
.sma-invite {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin: 0 0 32px;
	padding: 20px 24px;
	background: var(--surface);
	border: 1px solid var(--filet);
	border-left: 4px solid var(--rouge);
}
.sma-invite-texte {
	margin: 0;
	min-width: 0;
	font-size: 17px;
	line-height: 1.4;
	color: var(--encre-2);
}
/* Sur un telephone, les deux blocs s'empilent : le bouton prend la largeur
   plutot que de se cantonner a gauche sous une phrase qui, elle, l'occupe. */
@media (max-width: 620px) {
	.sma-invite { padding: 18px 16px; }
	.sma-invite .sma-bouton { width: 100%; text-align: center; }
}

.sma-date {
	display: grid;
	/* 160 px : une affiche 16:9 y tient sur 90 px de haut, a peu pres la
	   hauteur des trois lignes de texte d'a cote. */
	grid-template-columns: 160px minmax(0, 1fr) auto 24px;
	gap: 18px;
	/* Centre, et non cale en haut : les trois blocs de la ligne sont courts
	   face a une affiche en portrait, et alignes sur le haut ils laissaient
	   cent pixels de blanc sous le titre. Sur telephone la regle s'inverse —
	   la salle y passe sous le titre, et deux rangees centrees se decrochent. */
	align-items: center;
	padding: 14px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
	transition: all var(--transition);
}
.sma-date-corps { min-width: 0; }

/* La date passe au-dessus du titre : dans le sens de lecture, et non posee sur
   l'affiche ou elle rognait l'image et se lisait mal sur un fond charge. */
.sma-date-quand {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rouge);
}
.sma-date-info {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--encre-2);
}
.sma-date-lieu { text-align: right; font-size: 13px; line-height: 1.4; }
.sma-date-salle { display: block; font-weight: 900; color: var(--encre); }
.sma-date:hover { color: var(--encre); border-bottom-color: var(--rouge); }

.sma-date-pastille {
	display: grid;
	justify-items: center;
	padding: 6px 4px;
	background: var(--rouge);
	color: var(--surface);
	transition: all var(--transition);
}
.sma-date:hover .sma-date-pastille { background: var(--rouge-clair); }

/* L'affiche est ce qu'on regarde en parcourant l'agenda : elle a donc la place,
   et plus le timbre-poste de 64 px qu'elle occupait. Elle ne porte plus la date,
   passee au-dessus du titre — le bandeau rouge rognait le bas de l'image, et
   c'est souvent la que les affiches mettent leur programmation.

   Elle se montre ENTIERE, comme sur la page d'une date : une affiche porte du
   texte, et `cover` en coupait toujours un bout. La case est en largeur parce
   que les affiches le sont — 210 sur 233 dans l'agenda du 12/09/2026, les
   couvertures d'evenement Facebook en tete (16:9, 1,91:1). La case en hauteur
   n'en montrait que 40 % ; entieres dans cette meme case, elles tombaient a
   84 x 44 px sur telephone. Les quelques affiches en hauteur ont maintenant
   des bandes sur les cotes, sur le fond noir de la case.

   Pas de zoom au survol : sur une affiche entiere, il en rognerait de nouveau
   les bords. La ligne a deja ses signaux — titre, filet et fleche. */
.sma-date-affiche {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--encre);
}
.sma-date-affiche img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Les quelques dates sans affiche gardent la case : elle tient l'alignement de
   la colonne, et une pastille de date y repeterait ce qui est ecrit a cote. */
.sma-date-affiche--vide { background: var(--filet); }

/* L'affiche en tete de la page d'une date. Contrairement a la vignette de
   liste, elle n'est pas rognee : une affiche de concert porte du texte, et
   `cover` en coupe toujours un bout. */
.sma-affiche {
	display: block;
	max-width: 100%;
	max-height: 70vh;
	width: auto;
	margin: 0 0 32px;
	background: var(--encre);
}
.sma-date-jour { font-size: 20px; font-weight: 900; line-height: 1; }
.sma-date-mois {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* La barre des mois de l'agenda : les pastilles de l'index des artistes, sans
   leur position collante — les titres de mois de la liste collent deja sous
   l'en-tete, les deux se recouvriraient. L'annee s'intercale en texte :
   septembre 2026 et septembre 2027 peuvent y figurer tous les deux. */
.sma-agenda-mois {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
	margin: 0 0 28px;
}
/* Une annee et ses mois forment un bloc : un retour a la ligne ne separe pas
   « 2027 » de janvier. */
.sma-agenda-mois-an {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}
.sma-agenda-mois-annee {
	padding: 8px 6px 8px 0;
	color: var(--encre-2);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .08em;
}
.sma-agenda-mois-nb { font-weight: 400; }
/* Un mois sans date dans la zone active s'eteint, sans quitter la barre. */
.sma-lettre--vide { color: var(--muet); }
.sma-lettre--vide.est-actif { background: var(--muet); color: var(--surface); }
@media (max-width: 900px) {
	/* Cibles tactiles de 44 px, comme les onglets de zone juste au-dessus.
	   En flex, l'espace entre le mois et son compte tombe : le gap le rend. */
	.sma-agenda-mois .sma-lettre { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 44px; }
}

/* Les annees d'une recherche : les memes pastilles, sous les onglets de
   rubrique. « hellfest » en aligne vingt-deux, deux lignes au bureau. */
.sma-recherche-annees {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 28px;
}
@media (max-width: 900px) {
	/* Au telephone, une seule ligne qui defile : vingt-deux pastilles de
	   44 px empilees sur six rangs repousseraient le premier resultat sous
	   le pli. */
	.sma-recherche-annees { flex-wrap: nowrap; overflow-x: auto; }
	.sma-recherche-annees .sma-lettre { display: inline-flex; align-items: center; gap: .3em; flex: none; white-space: nowrap; }
}

/* Les dates du jour : un bloc a part, sur fond sombre. C'est le seul endroit
   de l'agenda ou le fond s'inverse — la rarete fait l'evidence, et le lecteur
   qui arrive a 18 h voit d'abord ce qui se joue dans trois heures. */
.sma-agenda-jour {
	background: var(--encre);
	padding: 4px 20px 8px;
}
.sma-agenda-jour-titre {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 16px 0 12px;
	color: var(--surface);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sma-agenda-jour-titre span {
	color: var(--muet);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.sma-date--jour {
	background: transparent;
	color: var(--sur-sombre);
	border-bottom-color: var(--filet-sombre);
}
.sma-date--jour:hover { color: var(--surface); border-bottom-color: var(--rouge-clair); }
.sma-date--jour .sma-date-titre,
.sma-date--jour .sma-meta span { color: var(--surface) !important; }
.sma-date--jour .sma-meta { color: var(--muet); }
/* L'information secondaire d'une date, sur le fond sombre du bloc « ce soir ».
   Elle visait un style en ligne `color:#333333` — illisible sur noir — que la
   ligne n'ecrit plus : c'est la classe qui la porte maintenant. */
.sma-date--jour .sma-date-info { color: var(--sur-sombre); }
/* Le rouge de la date passe au rouge clair : sur fond noir, le rouge de la
   charte manque de contraste. */
.sma-date--jour .sma-date-quand { color: var(--rouge-clair); }
/* L'heure remplace le quantieme : a l'interieur d'un bloc « ce soir », elle
   tient sur deux chiffres et un separateur, donc plus petite. */
.sma-date--jour .sma-date-jour { font-size: 17px; }

.sma-date-titre {
	display: block;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.01em;
	/* Un mot plus large que la colonne se coupe au lieu de deborder de la
	   ligne. Ne joue que dans ce cas : sur les 264 lignes de l'agenda du
	   12/09/2026, un seul titre — « LEFFINGELEUREN », dans le bloc « ce
	   soir » a 320 px de large. */
	overflow-wrap: anywhere;
	transition: all var(--transition);
}
.sma-date:hover .sma-date-titre { color: var(--rouge); }

/* La fleche glisse depuis la gauche au survol, et n'existe pas au repos. */
.sma-date-fleche {
	color: var(--rouge);
	font-size: 20px;
	opacity: 0;
	transform: translateX(-8px);
	transition: all var(--transition);
}
.sma-date:hover .sma-date-fleche { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
	/* Deux colonnes : l'affiche, et tout le reste empile a cote d'elle. La
	   date etant maintenant au-dessus du titre, la colonne de droite tient les
	   trois lignes — quand, quoi, ou — dans le sens de lecture. L'affiche
	   couvre les deux rangees pour que rien ne se centre au milieu de sa
	   hauteur. */
	.sma-date {
		/* L'affiche en largeur prend un tiers de l'ecran, jamais plus : a
		   320 px il reste 155 px au titre, qui ne passe pas a un mot par
		   ligne — 115 dans le bloc « ce soir », a cause de ses marges. */
		grid-template-columns: min(128px, 34vw) 1fr;
		grid-template-rows: min-content 1fr;
		gap: 2px 12px;
		align-items: start;
		padding: 12px 8px;
	}
	.sma-date-affiche,
	.sma-date-pastille { grid-row: 1 / span 2; }
	.sma-date .sma-meta { grid-column: 2; text-align: left; }
	.sma-date-lieu { text-align: left; }
	.sma-date-fleche { display: none; }
	.sma-date-titre { font-size: 17px; }
}

/* ---------------------------------------------------------------- */
/* 12. Panneau d'autocompletion                                      */
/* ---------------------------------------------------------------- */

/* Le formulaire devient le repere du panneau, qui se pose juste dessous. */
.sma-recherche { position: relative; }

.sma-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--rouge);
	color: var(--encre);
	text-align: left;
}
.sma-suggest[hidden] { display: none; }

.sma-suggest-item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
}
.sma-suggest-item:hover,
.sma-suggest-item.est-survole { color: var(--encre); background: var(--fond); }

/* Sans vignette, le script ne rend pas la premiere colonne — et le corps du
   resultat tombait dans celle de 44 px, ou « Def Leppard » se coupait en
   « Def… ». Quand le corps est le premier enfant, c'est qu'il n'y a pas
   d'image : il prend alors toute la largeur. */
.sma-suggest-item > .sma-suggest-corps:first-child { grid-column: 1 / -1; }

/* Le meilleur resultat est plus grand et pose sur un fond distinct : c'est
   le seul de la liste qu'on lit avant d'avoir fini de taper. */
.sma-suggest-item--vedette {
	grid-template-columns: 96px 1fr;
	padding: 14px 12px;
	background: #f4f4f4;
}
.sma-suggest-item--vedette .sma-suggest-vignette { aspect-ratio: 3 / 2; }
.sma-suggest-item--vedette .sma-suggest-titre { font-size: 18px; }

.sma-suggest-vignette {
	position: relative;
	aspect-ratio: 1;
	background: var(--encre);
	overflow: hidden;
}
.sma-suggest-vignette img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sma-suggest-corps { min-width: 0; }
.sma-suggest-meilleur {
	display: block;
	margin-bottom: 4px;
	color: var(--rouge);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sma-suggest-chapeau { display: block; margin-bottom: 4px; }
.sma-suggest-titre {
	display: block;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sma-suggest-meta {
	display: block;
	font-size: 12px;
	color: var(--encre-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sma-suggest-pied {
	display: block;
	padding: 12px;
	background: var(--encre);
	color: var(--surface);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .06em;
	text-align: center;
}
.sma-suggest-pied:hover { color: var(--surface); background: var(--rouge); }

/* 12c. Rattachement a un concert — galerie et reportage.
   Trois etats, un seul montre a la fois. La recherche est dominante parce que
   c'est la bonne reponse dans la quasi-totalite des cas : le concert existe
   deja, un autre photographe l'a cree le soir meme. Creer est une sortie de
   secours, et se presente comme telle. */

.sma-rattachement { margin-bottom: 8px; }

/* Le champ de recherche du concert n'est pas un champ parmi d'autres : il porte
   toute l'etape. Il est donc plus haut et plus gros que le reste du formulaire. */
.sma-champ--dominant input {
	min-height: 56px !important;
	font-size: 19px !important;
	border-width: 2px !important;
	border-color: var(--encre) !important;
}
.sma-champ--dominant label { font-size: 14px; }

/* Un bouton qui n'engage rien : ouvrir un volet, revenir en arriere. Il ne doit
   pas peser autant que « Creer la galerie », qui lui ecrit en base. */
.sma-bouton--discret {
	min-height: 38px;
	padding: 8px 14px;
	border-color: var(--muet);
	color: var(--encre-2);
	font-size: 12px;
}
.sma-bouton--discret:hover { border-color: var(--encre); color: var(--encre); }

/* La fiche du concert retenu : elle remplace la recherche, et se lit comme un
   fait acquis — pas comme un champ qu'on pourrait encore modifier. */
.sma-rattachement-fiche {
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--encre);
	box-shadow: inset 4px 0 0 var(--rouge);
}
.sma-rattachement-fiche[hidden] { display: none; }
.sma-rattachement-etiquette {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--encre-2);
}
.sma-rattachement-titre {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.sma-rattachement-fiche .sma-bouton { margin-top: 12px; }

/* Le volet de creation. `hidden` sur un fieldset ne suffit pas a le cacher dans
   tous les navigateurs — la regle est donc explicite. */
.sma-rattachement-nouveau {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--muet);
	background: var(--surface);
}
.sma-rattachement-nouveau[hidden] { display: none; }
.sma-rattachement-nouveau legend {
	padding: 0 8px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--encre-2);
}

/* Un champ rempli par le site et non par la personne : gris, non modifiable.
   `readonly` et non `disabled` — un champ desactive ne serait pas envoye, or
   MAJgal() attend ces valeurs quand la salle est nouvelle. */
.sma-rattachement-lieu input.est-verrouille {
	background: var(--fond);
	color: var(--encre-2);
	border-style: dashed;
}
.sma-rattachement-connue {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--encre-2);
}
.sma-rattachement-connue[hidden] { display: none; }
/* 11b. Les salles : l'index, et la fiche de l'une d'elles.
   La ligne d'index reprend la geometrie de la ligne d'agenda sans sa vignette —
   une salle n'a pas d'image dans le fonds. */

.sma-salle {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
	transition: all var(--transition);
}
.sma-salle:hover { color: var(--encre); border-bottom-color: var(--rouge); }
.sma-salle-corps { min-width: 0; }
.sma-salle-nom {
	display: block;
	margin-bottom: 2px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	transition: all var(--transition);
}
.sma-salle:hover .sma-salle-nom { color: var(--rouge); }
.sma-salle-compte { text-align: right; font-size: 13px; line-height: 1.4; }

/* Ce qui s'annonce compte plus que ce qui est passe : c'est la seule
   information de la ligne qui perime, donc la seule qui merite d'etre vue en
   premier. */
.sma-salle-avenir {
	display: block;
	font-weight: 900;
	color: var(--rouge);
}

/* Une ligne de fiche : intitule a gauche, valeur a droite. Le meme motif que
   le bloc « Pratique » d'une date d'agenda, sorti des styles en ligne pour
   servir aux deux. */
.sma-fiche-ligne {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--filet);
}
.sma-fiche-ligne dt { color: var(--encre-2); }
.sma-fiche-ligne dd { margin: 0; font-weight: 900; text-align: right; }

/* Un tableau de contenu — la liste des concerts d'une salle. Il defile dans sa
   propre boite plutot que d'elargir la page. */
.sma-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.sma-table td {
	padding: 11px 10px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	vertical-align: top;
}

@media (max-width: 620px) {
	/* La colonne « galerie / reportage » des concerts d'une salle disparait :
	   trois colonnes ne tiennent pas, et c'est la date qu'on cherche en
	   parcourant. Ce tableau-la seulement : ecrite sur .sma-table, la regle
	   masquait la derniere colonne de tous les tableaux du v2 — les boutons
	   « Éditer » des listes d'administration, la valeur des codes FTP, les
	   explications de l'aide. */
	.sma-table--concerts td:last-child { display: none; }
	.sma-salle { grid-template-columns: 1fr; gap: 4px; }
	.sma-salle-compte { text-align: left; }
}

/* Un nom de salle ou de label cite dans un texte : c'est un lien, mais qui ne
   doit pas hurler au milieu d'un paragraphe. Le rouge de la charte, et le
   soulignement seulement au survol. */
.sma-fiche { position: relative; }
.sma-lien-fiche { border-bottom: 1px solid transparent; }
.sma-lien-fiche:hover { border-bottom-color: var(--rouge-clair); }

/* La couleur de la famille, portee par le conteneur : le bandeau la prend en
   fond et la carte en bordure, sans que le PHP ait a poser deux classes. */
.sma-fiche--label { --famille: var(--famille-label); }
.sma-fiche--salle { --famille: var(--famille-salle); }

/* Un nom de groupe, et sa carte au survol — l'ancien front en montrait deja
   une, avec une photo. Celle-ci ajoute ce qu'on a publie sur le groupe, comme
   le panneau de la recherche. */
.sma-groupe { position: relative; }
.sma-groupe-lien {
	font-weight: 700;
	border-bottom: 1px solid transparent;
}
.sma-groupe-lien:hover { border-bottom-color: var(--rouge-clair); }

/* La carte est la meme pour les trois familles : seul son contenu change —
   une photo pour un groupe, un bandeau pour un label ou une salle. */
.sma-groupe-carte,
.sma-fiche-carte {
	position: absolute;
	bottom: 100%;
	left: 0;
	z-index: 30;
	display: none;
	width: 240px;
	margin-bottom: 8px;
	background: var(--surface);
	border: 1px solid var(--rouge);
	text-align: left;
	font-weight: 400;
	/* Le texte du paragraphe qui l'entoure peut etre en italique ou en gras :
	   la carte ne l'herite pas, elle n'est pas une incise. */
	font-style: normal;
	line-height: 1.35;
	box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.sma-fiche-carte { border-color: var(--famille, var(--rouge)); }

.sma-groupe-carte img {
	display: block;
	width: 100%;
	height: 132px;
	object-fit: cover;
	background: var(--encre);
}
/* Le bandeau prend la place qu'occupe la photo sur la carte d'un groupe : un
   label et une salle n'ont pas d'image en base, et de toute façon ce n'est pas
   une image qui manque au lecteur. Ce qu'il ne devine pas dans une phrase,
   c'est de quelle famille est le nom qu'il survole. */
.sma-fiche-bandeau {
	display: block;
	padding: 5px 12px;
	background: var(--famille, var(--encre));
	color: var(--surface);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sma-groupe-corps,
.sma-fiche-corps { display: block; padding: 10px 12px; }
.sma-groupe-nom,
.sma-fiche-nom {
	display: block;
	font-size: 16px;
	font-weight: 900;
	color: var(--encre);
}
.sma-groupe-meta,
.sma-fiche-meta {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--encre-2);
}

/* Au survol seulement la ou le survol existe. Sur un ecran tactile, il n'y a
   pas de survol : un appui ouvrirait la carte ET suivrait le lien, ce qui fait
   clignoter une carte que personne n'a demandee. Le lien y va directement. */
@media (hover: hover) and (pointer: fine) {
	.sma-groupe:hover .sma-groupe-carte,
	.sma-groupe-lien:focus-visible + .sma-groupe-carte,
	.sma-fiche:hover .sma-fiche-carte,
	.sma-lien-fiche:focus-visible + .sma-fiche-carte { display: block; }
}

/* 12b. Propositions dans un champ de formulaire — les groupes.
   Pas de vignette ni de rubrique ici : ce sont des noms, et une liste de noms
   se lit plus vite serree. Le bloc du champ sert de repere ; c'est JavaScript
   qui pose le haut du panneau sous le champ lui-meme, l'aide et l'erreur
   occupant la fin du bloc. */
.sma-champ--suggest { position: relative; }

.sma-suggest--liste { max-height: 46vh; }

.sma-suggest-ligne {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--filet);
	background: var(--surface);
	color: var(--encre);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.sma-suggest-ligne:last-child { border-bottom: 0; }
/* La ligne qui distingue deux homonymes : plus petite et plus pale que le nom,
   elle se lit comme une precision et non comme une seconde proposition. */
.sma-suggest-precision {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--encre-2);
}
.sma-suggest-ligne:hover .sma-suggest-precision,
.sma-suggest-ligne.est-survole .sma-suggest-precision { color: var(--surface); }

/* Panneau de mentions : pose au curseur, sur le « @ » qu'on vient de taper.
   Ce sont `left` et `top` que JavaScript ecrit, apres avoir mesure ou tombe le
   caractere dans une copie invisible du champ ; le bloc du champ sert de
   repere. La largeur est fixe pour que la mesure du debordement a droite se
   fasse avant le premier rendu. */
.sma-champ--mentions { position: relative; }
.sma-suggest--mentions {
	right: auto;
	bottom: auto;
	width: 280px;
	max-width: calc(100% - 8px);
	max-height: 38vh;
}

/* La famille se lit avant le nom : « Botanique » est une salle et un groupe,
   et c'est l'etiquette qui tranche. */
.sma-mention-type {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 6px;
	background: var(--encre);
	color: var(--surface);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.sma-mention-type--groupe { background: var(--rouge); }
.sma-mention-type--label  { background: var(--famille-label); }
.sma-mention-type--salle  { background: var(--famille-salle); }

/* La sortie de secours : ecrire le nom tel quel. Elle est toujours la, y
   compris quand la liste est pleine — le nom voulu peut n'etre nulle part. */
.sma-mention-libre {
	background: var(--fond);
	font-weight: 400;
	font-style: italic;
}
.sma-suggest-ligne:hover,
.sma-suggest-ligne.est-survole { color: var(--surface); background: var(--rouge); }

/* ---------------------------------------------------------------- */
/* 13. Videos                                                        */
/* ---------------------------------------------------------------- */

/* Façade : la vignette tient lieu de lecteur tant que personne n'a clique.
   Rien n'est charge depuis la plateforme avant ce clic. */
.sma-video {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 1040px;
	background: var(--encre);
	overflow: hidden;
}
.sma-video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all var(--transition);
}
.sma-video:hover img { transform: scale(1.03); }
.sma-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sma-video-jouer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	padding-left: 6px;
	background: rgba(0,0,0,.65);
	border: 1px solid var(--surface);
	color: var(--surface);
	font-size: 26px;
	line-height: 1;
	transition: all var(--transition);
}
.sma-video:hover .sma-video-jouer,
.sma-tuile:hover .sma-video-jouer { background: var(--rouge); border-color: var(--rouge); }

/* La vignette de liste porte un triangle plus discret. */
.sma-tuile .sma-video-jouer { width: 52px; height: 52px; font-size: 18px; }

.sma-video-mention {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 10px 14px;
	background: rgba(0,0,0,.65);
	color: var(--surface);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* ---------------------------------------------------------------- */
/* 14. Menu d'administration                                         */
/* ---------------------------------------------------------------- */

.sma-admin-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

/* Une entree se lit comme un bouton : c'est une action, pas un article. */
.sma-admin-entree {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 12px 16px;
	background: var(--surface);
	border: 1px solid var(--filet);
	color: var(--encre);
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	transition: all var(--transition);
}
.sma-admin-entree:hover {
	color: var(--surface);
	background: var(--rouge);
	border-color: var(--rouge);
}

@media (max-width: 900px) {
	.sma-admin-grille { grid-template-columns: 1fr 1fr; }
}

/* La tuile d'ecriture porte l'etiquette de sa rubrique et un verbe. Au survol
   elle ne se remplit PAS de rouge, contrairement aux autres entrees : l'aplat
   avalerait l'etiquette — celle des chroniques est deja #990000 et
   disparaitrait purement et simplement. C'est le filet et le texte qui
   passent au rouge. */
.sma-admin-entree--ecrire {
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-height: 96px;
}
.sma-admin-entree--ecrire:hover {
	background: var(--surface);
	border-color: var(--rouge);
	color: var(--rouge);
}
.sma-admin-verbe { font-size: 15px; font-weight: 900; line-height: 1.2; }

/* Un groupe n'est pas une rubrique : son etiquette prend le gris du texte
   secondaire et non une couleur du code des rubriques, qui ne lui revient
   pas. */
.sma-badge--fiche { background: var(--encre-2); }

/* Une chronique reservee : pochette, groupe, titre, date de sortie. Meme
   geometrie qu'une ligne de flux — c'est la meme chose qu'on lit, une
   publication reperee a sa pochette. */
.sma-reservee {
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
}
/* La ligne portait le lien ; elle porte maintenant aussi le bouton qui rend le
   disque, et un bouton dans un lien n'est pas du HTML. Le lien s'est donc
   resserre sur le corps de la ligne — c'est de toute facon le titre qu'on vise
   — et le survol se lit sur lui plutot que sur toute la largeur. */
.sma-reservee-corps { display: block; min-width: 0; color: var(--encre); }
.sma-reservee-corps:hover { color: var(--encre); }
.sma-reservee-corps:hover .sma-reservee-groupe { color: var(--rouge); }
/* Le fond de page est deja gris : un carre de la meme valeur serait un trou.
   C'est un filet qui tient la place, comme un emplacement de pochette vide. */
.sma-reservee-vide {
	display: block;
	aspect-ratio: 1;
	background: var(--surface);
	border: 1px solid var(--filet);
}
.sma-reservee-groupe {
	display: block;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.2;
	transition: all var(--transition);
}
.sma-reservee-titre { display: block; font-size: 14px; color: var(--encre-2); }
/* Quatre colonnes sur un telephone laissaient 95 px au titre : la date de
   sortie et le bouton passent sous le titre, la pochette garde sa colonne. */
@media (max-width: 620px) {
	.sma-reservee { grid-template-columns: 56px 1fr; row-gap: 8px; }
	.sma-reservee > .sma-meta { grid-column: 2; }
	.sma-reservee > form { grid-column: 2; }
}

/* « Au boulot » : trois compteurs. Le nombre d'abord, parce que c'est lui
   qu'on vient lire — un intitule seul obligeait a ouvrir l'ecran pour
   decouvrir qu'il n'y avait rien a y faire. */
.sma-chantiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}
.sma-chantier {
	display: block;
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--filet);
	border-left: 4px solid var(--rouge);
	color: var(--encre);
	font-weight: 400;
	transition: all var(--transition);
}
.sma-chantier:hover { color: var(--encre); border-color: var(--rouge); }
.sma-chantier-n {
	display: block;
	font-size: 34px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--rouge);
}
.sma-chantier-quoi { display: block; margin: 6px 0 2px; font-size: 15px; font-weight: 900; }
/* Zero se dit, mais en gris : la pile vide reste une information, elle n'est
   pas un appel a l'action. */
.sma-chantier--vide { border-left-color: var(--muet); }
.sma-chantier--vide .sma-chantier-n { color: var(--muet); }

/* Une ligne de liens separes par des points. Ce qui tenait en sept rectangles
   et n'en meritait pas un seul. */
.sma-liens-serres { margin: 0; font-size: 15px; line-height: 2; }
.sma-liens-serres span { color: var(--muet); font-weight: 400; }

/* « Gerer » et « Aide » : deux colonnes de liens, pas deux grilles. */
.sma-admin-listes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
}
.sma-admin-lien {
	display: block;
	padding: 9px 0;
	border-bottom: 1px solid var(--filet);
	font-size: 15px;
}

/* Qui a publie quoi cette semaine. La barre n'est pas un graphique : elle
   donne l'ordre de grandeur d'un coup d'oeil, la ou trois nombres alignes
   demandent d'etre compares. */
.sma-semaine {
	display: grid;
	grid-template-columns: 1fr 70px auto;
	gap: 10px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--filet);
}
.sma-semaine-nom { font-size: 15px; font-weight: 900; }
.sma-semaine-barre { display: block; height: 8px; background: var(--fond); }
.sma-semaine-barre span { display: block; height: 100%; background: var(--rouge); }

/* ---------------------------------------------------------------- */
/* 15. Tete de rubrique                                              */
/* ---------------------------------------------------------------- */

/* Les trois plus recents d'une rubrique, en cartes. Meme grammaire que
   « A la une » de l'accueil : une grande, deux moyennes — sauf pour les
   pochettes, carrees, ou les trois sont egales. */
.sma-liste-une {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 40px;
}

/* L'illustration ne pousse pas le reste sous la ligne de flottaison, quelle
   que soit sa hauteur d'origine. Cadre ici seulement : ailleurs, les tuiles
   tiennent leur ratio. */
.sma-liste-une .sma-tuile { max-height: 60vh; }

@media (max-width: 1100px) {
	.sma-liste-une { grid-template-columns: 1fr 1fr; }
	/* La troisieme carte prend alors toute la largeur plutot que d'etre
	   orpheline a cote d'un vide. */
	.sma-liste-une > article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.sma-liste-une { grid-template-columns: 1fr; }
}

/* Les guides : les seules pages de l'administration qui se lisent. Mesure de
   ligne d'un article, intertitres qui respirent, tableaux moins denses que
   ceux d'une liste — on y cherche une reponse, pas une ligne. */
.sma-aide { max-width: 68ch; }
.sma-aide h3 {
	margin: 40px 0 12px;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.01em;
}
.sma-aide h3:first-child { margin-top: 0; }
.sma-aide ul { padding-left: 22px; }
.sma-aide li { margin-bottom: 8px; }
.sma-aide code {
	padding: 2px 6px;
	background: rgba(0,0,0,.06);
	font-size: 14px;
}
.sma-aide .sma-table td,
.sma-aide .sma-table th { padding: 12px 14px; vertical-align: top; }
/* L'en-tete d'une table d'administration est un titre de colonne : petit,
   espace, en capitales. Ici c'est un en-tete de LIGNE, qui porte une balise ou
   un reglage — les capitales le rendaient faux (« [BAND]CONVERGE[/BAND] ») et
   l'interlettrage illisible. */
.sma-aide .sma-table th {
	color: var(--encre);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}
.sma-aide .sma-table code { background: none; padding: 0; }

/* ---------------------------------------------------------------- */
/* 16. Tables d'administration                                       */
/* ---------------------------------------------------------------- */

/* Dense : on vient y chercher une entree precise, pas lire. */
.sma-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	font-size: 14px;
}
.sma-table th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rouge);
	color: var(--encre-2);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
}
.sma-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--filet);
	vertical-align: middle;
}
.sma-table tbody tr { transition: all var(--transition); }
.sma-table tbody tr:hover { background: var(--fond); }

.sma-table-vignette {
	display: block;
	position: relative;
	width: 44px;
	aspect-ratio: 1;
	background: var(--fond);
	overflow: hidden;
}
.sma-table-vignette img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sma-table-action {
	display: inline-block;
	padding: 5px 10px;
	margin-right: 4px;
	background: none;
	border: 1px solid var(--rouge);
	color: var(--rouge);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
}
.sma-table-action:hover { color: var(--surface); background: var(--rouge); }
/* Le bouton « Réserver » porte la meme classe que les liens « Éditer » et
   « Voir » de la meme cellule : il faut lui reprendre l'interligne du lien,
   sinon le navigateur lui applique le sien et le bouton depasse de deux pixels
   dans une rangee ou les trois se cotoient. */
button.sma-table-action { line-height: inherit; }

/* L'etat se lit a la forme autant qu'a la couleur : barre a gauche, intitule
   en capitales — meme grammaire que les messages. */
.sma-etat {
	display: inline-block;
	padding: 4px 8px 4px 10px;
	border-left: 4px solid var(--muet);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sma-etat--enligne   { border-left-color: var(--encre); }
.sma-etat--brouillon { border-left-color: var(--muet); color: var(--encre-2); }
.sma-etat--demande   { border-left-color: var(--rouge); color: var(--rouge); }

/* ---------------------------------------------------------------- */
/* 17. Propositions d'agenda                                         */
/* ---------------------------------------------------------------- */

/* Une proposition se lit en entier avant d'etre validee : elle a donc la place
   d'un bloc, pas d'une ligne de table. */
.sma-proposition {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 14px;
	padding: 16px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
}
.sma-proposition:hover { background: var(--fond); }

.sma-proposition-choix {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 2px;
	cursor: pointer;
}
.sma-proposition-choix input { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- */
/* 18. Envoi de photos                                               */
/* ---------------------------------------------------------------- */

.sma-envoi { margin-top: 28px; max-width: 760px; }

.sma-envoi-zone {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 44px 24px;
	background: var(--surface);
	border: 2px dashed var(--muet);
	text-align: center;
	transition: all var(--transition);
}
/* Au survol d'un glisser, la zone se declare prete : sans ce retour, on ne
   sait pas si le lacher va marcher. */
.sma-envoi-zone.est-survole {
	border-color: var(--rouge);
	border-style: solid;
	background: var(--fond);
}

.sma-envoi-libelle { cursor: pointer; }
.sma-envoi-titre {
	display: block;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -.01em;
}
.sma-envoi-zone input[type="file"] { max-width: 100%; }

.sma-envoi-liste { margin-top: 20px; }
.sma-envoi-liste[hidden] { display: none; }

.sma-envoi-ligne {
	display: grid;
	grid-template-columns: 44px 1fr auto 120px;
	gap: 12px;
	align-items: center;
	padding: 8px 10px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	/* Une barre a gauche porte l'etat : lisible en niveaux de gris, comme les
	   messages. */
	border-left: 4px solid transparent;
	transition: all var(--transition);
}
.sma-envoi-ligne.est-encours { border-left-color: var(--muet); }
.sma-envoi-ligne.est-ok      { border-left-color: var(--encre); }
.sma-envoi-ligne.est-echec   { border-left-color: var(--rouge); }

.sma-envoi-vignette {
	position: relative;
	width: 44px;
	aspect-ratio: 1;
	background: var(--fond);
	overflow: hidden;
}
.sma-envoi-vignette img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sma-envoi-nom {
	font-size: 14px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sma-envoi-etat {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .04em;
	text-align: right;
}
.sma-envoi-ligne.est-echec .sma-envoi-etat {
	color: var(--rouge);
	font-weight: 700;
	letter-spacing: 0;
	white-space: normal;
}

.sma-envoi-pied {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--filet);
}
.sma-envoi-pied[hidden] { display: none; }
.sma-envoi-bilan { flex: 1; min-width: 220px; margin: 0; }

@media (max-width: 900px) {
	.sma-envoi-ligne { grid-template-columns: 40px 1fr 90px; }
	.sma-envoi-poids { display: none; }
}

/* 18.1 Les photos deja en ligne, sur le meme ecran : c'est la qu'on retire ce
   qu'on vient d'envoyer par erreur.

   Plus serree que la grille publique (.sma-grille-photos, quatre colonnes) :
   celle-ci n'est pas faite pour regarder une photo mais pour retrouver la
   mauvaise dans un lot de vingt, et il faut en voir beaucoup d'un coup. Et
   sans le grayscale de la galerie — reconnaitre une photo de concert parmi
   vingt autres du meme concert se fait a la couleur des lumieres. */
.sma-photos-gestion {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.sma-photos-gestion img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--fond);
}

/* Le rappel dans l'ecran de confirmation : plus petit, et rien n'y est
   cliquable — on ne fait que montrer ce qui va disparaitre. */
.sma-photos-gestion--rappel {
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 6px;
	margin-top: 12px;
}

/* Toute la vignette coche : le geste de l'ancien ecran, sans sa consequence. */
.sma-photo-choix {
	position: relative;
	display: block;
	cursor: pointer;
	border: 3px solid transparent;
	transition: all var(--transition);
}

.sma-photo-choix:hover { border-color: var(--muet); }

/* La case reste une vraie case a cocher, visible et atteignable au clavier :
   c'est elle qui porte l'etat quand `:has()` n'est pas la. */
.sma-photo-choix input {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--rouge);
	cursor: pointer;
}

.sma-photo-choix:has(:checked) { border-color: var(--rouge); }
.sma-photo-choix:has(:checked) img { opacity: .55; }

/* Le mot, plutot qu'un cadre seul. Sans `:has()`, la case cochee reste le
   temoin — on ne perd que le renfort. */
.sma-photo-choix-marque {
	position: absolute;
	left: 0;
	bottom: 0;
	display: none;
	padding: 2px 6px;
	background: var(--rouge);
	color: var(--surface);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sma-photo-choix:has(:checked) .sma-photo-choix-marque { display: block; }
.sma-photo-choix:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Le rang, pour se dire « la troisieme » a voix haute. */
.sma-photo-choix-rang {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 2px 6px;
	background: var(--encre);
	color: var(--surface);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .04em;
}

/* 18.2 La photo de couverture, sur le meme ecran.

   La couverture actuelle d'abord, dans le rapport des cadres du site : c'est
   ainsi qu'elle sera vue. */
.sma-couverture {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
}

.sma-couverture-image {
	display: block;
	width: 280px;
	max-width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--fond);
}

.sma-couverture-texte { flex: 1 1 280px; max-width: 60ch; }
.sma-couverture-texte p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }

.sma-couverture-choix { margin-top: 20px; }

/* Le repli est un bouton, pas un triangle : le libelle dit ce qu'il fait. */
.sma-couverture-choix > summary { list-style: none; }
.sma-couverture-choix > summary::-webkit-details-marker { display: none; }
.sma-couverture-choix[open] .sma-couverture-ouvrir,
.sma-couverture-choix:not([open]) .sma-couverture-replier { display: none; }

.sma-couverture-groupe {
	margin: 28px 0 0;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* La meme vignette que pour retirer, sans le rouge ni le voile : choisir une
   couverture ne detruit rien, et la photo choisie doit se voir entiere. */
.sma-photo-choix--couverture input { accent-color: var(--encre); }
.sma-photo-choix--couverture:has(:checked) { border-color: var(--encre); }
.sma-photo-choix--couverture:has(:checked) img { opacity: 1; }
.sma-photo-choix--couverture .sma-photo-choix-marque { background: var(--encre); }

.sma-couverture-actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding-bottom: 16px;
	background: var(--fond);
}

/* Le seuil du retour en haut de page (.sma-haut-suite), qui flotte dans le
   meme coin : « Enregistrer la couverture » passait dessous sur 390 px. */
@media (max-width: 620px) {
	.sma-couverture-suite { display: none; }
}

/* ---------------------------------------------------------------- */
/* 19. Images libres (admin/images)                                  */
/* ---------------------------------------------------------------- */

/* Une grille de cartes plutot qu'un tableau : ce qu'on cherche dans ce dossier,
   c'est une image reconnue a l'oeil, pas un nom de fichier lu ligne a ligne. */
.sma-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 24px;
}

.sma-image-carte {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--filet);
}

/* Les images de ce dossier n'ont ni format ni orientation communs : une hauteur
   fixe et `contain` les alignent sans jamais en rogner une. */
.sma-image-apercu {
	display: block;
	height: 180px;
	background: var(--fond);
	border-bottom: 1px solid var(--filet);
}
.sma-image-apercu img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sma-image-carte figcaption { padding: 12px 14px 14px; }

.sma-image-nom {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 900;
	/* Un nom de fichier n'a pas d'espace : sans cette coupure, il deborde. */
	overflow-wrap: anywhere;
}

/* Le champ prend toute la largeur et son bouton passe dessous : cote a cote,
   une adresse de cinquante caracteres se lisait sur douze. */
.sma-image-champ {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 8px;
}
.sma-image-champ input {
	flex: 1 1 100%;
	min-width: 0;
	min-height: 0;
	padding: 6px 8px;
	font-family: inherit;
	font-size: 12px;
	color: var(--encre-2);
	background: var(--fond);
	border: 1px solid var(--filet);
}

.sma-copie {
	flex: none;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--encre);
	background: var(--surface);
	border: 1px solid var(--encre);
	cursor: pointer;
	transition: all var(--transition);
}
.sma-copie:hover { color: var(--surface); background: var(--rouge); border-color: var(--rouge); }
/* Le bouton n'existe que si le script l'a montre : sans lui, il ne ferait rien. */
.sma-copie[hidden] { display: none; }
.sma-copie.est-copie { color: var(--surface); background: var(--encre); border-color: var(--encre); }

/* Ce qui vient d'arriver se distingue du fonds : c'est ce qu'on est venu
   chercher, et la grille du dessous peut compter soixante vignettes. */
.sma-images--neuves .sma-image-carte { border-color: var(--encre); }

/* ---------------------------------------------------------------- */
/* 20. Audience (admin/statistiques, liens partages, encart d'accueil) */
/* ---------------------------------------------------------------- */

/* Une regle de couleur pour tous les blocs : ce qui mene est en rouge — le
   jour le plus haut du graphique, la premiere ligne d'une repartition, le
   premier des plus lus. Le reste est a l'encre, pour que le rouge ne se
   dilue pas : le fait saillant de chaque bloc se voit avant qu'on lise un
   chiffre. */

/* 20.1 Le bandeau du contenu : ce qu'il y a dans le site, avant
   l'audience. Un panneau clair, et non une deuxieme bande noire — deux
   aplats sombres a la suite se seraient confondus en un seul bloc.

   Petit corps et deux rangees de six : c'est une carte d'identite, pas le
   sujet de la page, et le tableau d'audience doit rester visible sans
   avoir a faire defiler. Pas de filets verticaux, qui auraient dessine un
   tableau la ou il n'y a qu'une liste. En tabulaire, comme les chiffres
   d'audience. */
.sma-fonds {
	margin-top: 16px;
	padding: 16px 2.5% 18px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
}
/* Le gris du surtitre est prevu pour le noir du tableau : sur blanc, il
   passe a l'encre secondaire. */
.sma-fonds .sma-audience-surtitre { display: block; color: var(--encre-2); }
.sma-fonds-chiffres {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 2px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
/* Le filet du haut porte la couleur de la rubrique. Douze filets colores
   donnent au bandeau la signature multicolore du site la ou douze chiffres
   noirs ne donnaient rien — et la couleur n'est pas decorative : c'est
   celle de l'etiquette qu'on retrouve sur chaque contenu. */
.sma-fonds-chiffre {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 7px 0 9px;
	border-top: 4px solid var(--teinte, var(--filet));
}
.sma-fonds-chiffre--photos      { --teinte: var(--rub-photos); }
.sma-fonds-chiffre--galeries    { --teinte: var(--rub-photos); }
.sma-fonds-chiffre--news        { --teinte: var(--rub-news); }
.sma-fonds-chiffre--chroniques  { --teinte: var(--rub-chroniques); }
.sma-fonds-chiffre--livereports { --teinte: var(--rub-livereports); }
.sma-fonds-chiffre--interviews  { --teinte: var(--rub-interviews); }
.sma-fonds-chiffre--articles    { --teinte: var(--rub-articles); }
.sma-fonds-chiffre--videos      { --teinte: var(--rub-videos); }
.sma-fonds-chiffre--concours    { --teinte: var(--rub-concours); }
/* Les trois qui ne sont pas des rubriques prennent la couleur de leur
   famille : le rouge de l'accent pour les groupes — la seule des trois
   familles qui rattache —, le vert des salles pour les concerts, et
   l'encre secondaire pour les jours, qui ne comptent pas du contenu. */
.sma-fonds-chiffre--artistes    { --teinte: var(--rouge); }
.sma-fonds-chiffre--concerts    { --teinte: var(--famille-salle); }
.sma-fonds-chiffre--jours       { --teinte: var(--encre-2); }
/* Le chiffre reste a l'encre : douze nombres colores se liraient moins
   bien, et dilueraient la couleur qu'on vient d'ajouter. */
.sma-fonds-valeur {
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sma-fonds-libelle {
	color: var(--teinte, var(--encre-2));
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* 20.2 Le tableau d'affichage : la periode, ses commandes et ses cinq
   chiffres, sur le noir du chrome. Le filet rouge du bas le detache de ce
   qui suit, comme le filet des titres de section. */
.sma-audience-tableau {
	margin-top: 16px;
	padding: 24px 2.5% 28px;
	background: var(--encre);
	border-bottom: 4px solid var(--rouge);
	color: var(--surface);
}
.sma-audience-tableau-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
}
.sma-audience-surtitre {
	color: var(--muet);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.sma-audience-intro {
	max-width: 68ch;
	margin: 14px 0 0;
	color: var(--sur-sombre);
	font-size: 15px;
	line-height: 1.5;
}
.sma-audience-titre-periode {
	margin: 14px 0 0;
	font-size: clamp(26px, 3.4vw, 46px);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-wrap: balance;
}
.sma-audience-en-cours {
	display: inline-block;
	margin-left: 8px;
	padding: 5px 9px;
	border: 1px solid var(--filet-sombre);
	color: var(--sur-sombre);
	font-size: 11px;
	letter-spacing: .1em;
	vertical-align: middle;
}

.sma-audience-commandes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: 20px;
}
.sma-audience-modes,
.sma-audience-fleches,
.sma-audience-langues { display: flex; flex-wrap: wrap; gap: 6px; }
.sma-audience-tableau .sma-onglet { padding: 9px 14px; font-size: 12px; }
.sma-audience-langues .sma-onglet { padding: 6px 10px; font-size: 11px; }
/* Sur le noir, l'actif et le survol prennent le meme aplat rouge : le gris
   du contour ne suffirait pas a les distinguer. */
.sma-audience-tableau .sma-onglet--sombre:hover,
.sma-audience-tableau .sma-onglet--sombre.est-actif {
	background: var(--rouge);
	border-color: var(--rouge);
	color: var(--surface);
}

.sma-audience-dates {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 18px 0 0;
}
.sma-audience-dates .sma-champ { margin-bottom: 0; min-width: 170px; }
.sma-audience-tableau .sma-champ label { color: var(--sur-sombre); }
.sma-audience-tableau .sma-bouton {
	min-height: 44px;
	background: transparent;
	border-color: var(--surface);
	color: var(--surface);
}
.sma-audience-tableau .sma-bouton:hover { background: var(--rouge); border-color: var(--rouge); }

/* Les cinq chiffres. Les visites d'abord et en plus grand, sous le filet
   rouge : c'est celui qu'on cherche. En tabulaire, pour que les chiffres ne
   dansent pas d'une periode a l'autre. */
.sma-audience-chiffres {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
	margin: 28px 0 0;
}
.sma-audience-chiffre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: 16px 18px 4px;
	border-top: 3px solid var(--filet-sombre);
}
.sma-audience-chiffre:first-child { padding-left: 0; border-top-color: var(--rouge); }
.sma-audience-chiffre + .sma-audience-chiffre { border-left: 1px solid var(--filet-sombre); }
.sma-audience-libelle {
	color: var(--encre-2);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sma-audience-tableau .sma-audience-libelle { color: var(--muet); }
.sma-audience-valeur {
	font-size: clamp(26px, 2.5vw, 38px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sma-audience-chiffre:first-child .sma-audience-valeur { font-size: clamp(38px, 4.2vw, 60px); }
.sma-audience-ecart {
	padding: 3px 8px;
	border: 1px solid var(--filet-sombre);
	color: var(--sur-sombre);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sma-audience-comparaison { margin: 18px 0 0; color: var(--muet); font-size: 13px; }

/* 20.3 Les blocs sous le tableau */
.sma-audience-aide { margin: 16px 0 0; font-size: 14px; }
.sma-audience-aide summary { color: var(--rouge); font-weight: 700; cursor: pointer; }
.sma-audience-aide summary:hover { color: var(--rouge-clair); }
.sma-audience-aide dl { max-width: 68ch; margin: 8px 0 0; }
.sma-audience-aide dt { margin-top: 12px; font-weight: 900; }
.sma-audience-aide dd { margin: 2px 0 0; color: var(--encre-2); line-height: 1.5; }

.sma-audience-bloc {
	min-width: 0;
	padding: 20px 22px 22px;
	background: var(--surface);
	border: 1px solid var(--filet);
}
.sma-audience-bloc--graphe { margin-top: 20px; }
/* Le titre d'un bloc prend le filet rouge des titres de section, en petit :
   la meme grammaire que les blocs du rail de l'administration. */
.sma-audience-titre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--encre);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sma-audience-titre::after {
	content: "";
	flex: 1;
	min-width: 24px;
	height: 1px;
	background: var(--rouge);
}
.sma-audience-sous-titre { margin: 24px 0 8px; font-size: 11px; }
.sma-audience-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 12px;
}
.sma-audience-tete .sma-audience-titre { flex: 1; margin: 0; }
.sma-audience-bascule { display: flex; gap: 6px; }
.sma-audience-bascule .sma-onglet { padding: 6px 12px; font-size: 11px; }

/* 20.4 Le graphique : des colonnes HTML plutot qu'un SVG etire, pour que les
   etiquettes ne se deforment pas avec la largeur. L'echelle est a gauche,
   dans la marge de la trace. */
.sma-audience-max { margin: 0 0 8px; color: var(--encre-2); font-size: 13px; }
.sma-audience-trace { padding: 24px 0 0 44px; }
.sma-audience-barres {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 240px;
	border-bottom: 1px solid var(--encre);
}
.sma-audience-graduation,
.sma-audience-moyenne {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	pointer-events: none;
}
.sma-audience-graduation { border-top: 1px solid var(--filet); }
.sma-audience-graduation span {
	position: absolute;
	right: calc(100% + 8px);
	transform: translateY(-50%);
	color: var(--encre-2);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* La moyenne n'a pas d'etiquette sur la trace, ou elle masquait le haut
   d'une barre : sa valeur est dans la phrase au-dessus du graphique. */
.sma-audience-moyenne { z-index: 1; border-top: 1px dashed var(--encre-2); }
.sma-audience-barre {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	background: var(--encre);
	transition: all var(--transition);
}
/* Le survol grise la barre : en rouge, elle se confondait avec la plus
   haute, qui est la seule a porter cette couleur. */
.sma-audience-barre:hover { background: var(--filet-sombre); }
.sma-audience-barre.est-max { background: var(--rouge); }
.sma-audience-barre.est-max:hover { background: var(--rouge-fonce); }
/* La barre la plus haute porte son chiffre, sans survol. */
.sma-audience-barre.est-max::before {
	content: attr(data-valeur);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	color: var(--rouge);
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}
/* Le detail d'une barre au survol, sans attendre l'infobulle du navigateur.
   Aux deux bords il s'aligne sur la barre au lieu de se centrer, sinon il
   deborderait du bloc. */
.sma-audience-barre::after {
	content: attr(data-info);
	position: absolute;
	bottom: calc(100% + 24px);
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
	padding: 6px 10px;
	background: var(--encre);
	color: var(--surface);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all var(--transition);
}
.sma-audience-barre:hover::after { opacity: 1; visibility: visible; }
.sma-audience-barre.est-debut::after { left: 0; transform: none; }
.sma-audience-barre.est-fin::after { left: auto; right: 0; transform: none; }
.sma-audience-axe {
	display: flex;
	gap: 3px;
	margin-top: 6px;
	color: var(--encre-2);
	font-size: 11px;
}
.sma-audience-axe span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }

/* 20.5 Les repartitions */
.sma-audience-grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

/* Les appareils : une barre partagee, et sa legende en grands chiffres. */
.sma-audience-empile { display: flex; height: 16px; margin: 0 0 14px; background: var(--fond); }
.sma-audience-empile span { display: block; height: 100%; }
.sma-audience-empile span + span { border-left: 2px solid var(--surface); }
.sma-audience-teinte-1 { background: var(--rouge); }
.sma-audience-teinte-2 { background: var(--encre); }
.sma-audience-teinte-3 { background: var(--filet-sombre); }
.sma-audience-teinte-4 { background: var(--muet); }
.sma-audience-legende { margin: 0; padding: 0; list-style: none; }
.sma-audience-legende li {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 7px 0;
	border-bottom: 1px solid var(--filet);
	font-size: 14px;
}
.sma-audience-legende li:last-child { border-bottom: 0; }
.sma-audience-legende strong { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sma-audience-pastille { width: 12px; height: 12px; }

.sma-audience-parts { margin: 0; padding: 0; list-style: none; }
.sma-audience-parts li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 5px 10px;
	padding: 7px 0;
	font-size: 14px;
}
.sma-audience-part-valeur { font-weight: 900; font-variant-numeric: tabular-nums; }
.sma-audience-jauge { display: block; height: 8px; background: var(--fond); }
.sma-audience-parts .sma-audience-jauge { grid-column: 1 / -1; }
.sma-audience-jauge span { display: block; height: 100%; background: var(--encre); }
.sma-audience-parts li:first-child .sma-audience-jauge span { background: var(--rouge); }

.sma-audience-referents { margin: 0; padding: 0; list-style: none; counter-reset: referent; font-size: 14px; }
.sma-audience-referents li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--filet);
	counter-increment: referent;
	overflow-wrap: anywhere;
}
.sma-audience-referents li:last-child { border-bottom: 0; }
.sma-audience-referents li::before { content: counter(referent); color: var(--muet); font-weight: 900; }
.sma-audience-referents .sma-meta { font-variant-numeric: tabular-nums; }

/* 20.6 Les plus lus : un classement dont chaque ligne mene au contenu. Meme
   survol qu'une ligne de flux — c'est la meme chose qu'on ouvre. */
.sma-audience-classement {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 16px 24px;
	align-items: start;
}
.sma-audience-classement > :only-child { grid-column: 1 / -1; }
.sma-audience-podium,
.sma-audience-suite { margin: 0; padding: 0; list-style: none; }
.sma-audience-lu {
	display: grid;
	grid-template-columns: 40px 104px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px 16px 14px 10px;
	background: var(--surface);
	border-bottom: 1px solid var(--filet);
	color: var(--encre);
	font-weight: 400;
	transition: all var(--transition);
}
.sma-audience-lu:hover {
	color: var(--encre);
	border-bottom-color: var(--rouge);
	transform: translateX(8px);
}
.sma-audience-lu:hover .sma-flux-vignette img { transform: scale(1.06); }
.sma-audience-lu:hover .sma-audience-lu-titre { color: var(--rouge); }
/* La vignette reprend la classe des lignes de flux, dont la regle mobile lui
   fait couvrir deux rangees : ici la ligne place ses cases elle-meme. */
.sma-audience-lu .sma-flux-vignette { grid-row: auto; }
.sma-audience-rang {
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.sma-audience-podium li:first-child .sma-audience-rang { color: var(--rouge); }
.sma-audience-lu-corps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}
.sma-audience-lu-titre {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
	transition: all var(--transition);
}
.sma-audience-lu .sma-audience-jauge { align-self: stretch; height: 6px; }
.sma-audience-podium li:first-child .sma-audience-jauge span { background: var(--rouge); }
.sma-audience-lu-n {
	color: var(--encre-2);
	font-size: 12px;
	text-align: right;
	white-space: nowrap;
}
.sma-audience-lu-n strong {
	display: block;
	color: var(--encre);
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
/* La suite du classement, plus serree : on la parcourt, on ne s'y arrete pas. */
.sma-audience-suite .sma-audience-lu {
	grid-template-columns: 28px 56px minmax(0, 1fr) auto;
	gap: 12px;
	padding: 10px 14px 10px 6px;
}
.sma-audience-suite .sma-audience-rang { color: var(--encre-2); font-size: 18px; }
.sma-audience-suite .sma-audience-lu-titre { font-size: 15px; }
.sma-audience-suite .sma-audience-lu-n strong { font-size: 18px; }
.sma-audience-suite .sma-audience-jauge { height: 4px; }

.sma-audience-note { max-width: 68ch; margin: 28px 0 0; line-height: 1.5; }

/* 20.7 L'encart de l'accueil de l'administration, en tete du rail. Le bloc
   « hier » porte le filet rouge des chantiers : c'est un chiffre du jour,
   et tout le bloc mene a cette journee. */
.sma-audience-encart-hier {
	display: block;
	padding: 14px 16px 12px;
	background: var(--surface);
	border: 1px solid var(--filet);
	border-left: 4px solid var(--rouge);
	color: var(--encre);
	font-weight: 400;
}
.sma-audience-encart-hier:hover { color: var(--encre); border-color: var(--rouge); }
.sma-audience-encart .sma-audience-libelle { display: block; }
.sma-audience-encart-ligne {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 2px;
	font-size: 15px;
}
.sma-audience-encart-n {
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.sma-audience-mini {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 40px;
	margin-top: 12px;
}
.sma-audience-mini span { flex: 1 1 0; min-width: 0; background: var(--muet); }
.sma-audience-mini .est-hier { background: var(--rouge); }
.sma-audience-encart-semaine { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.sma-audience-encart-semaine strong { font-variant-numeric: tabular-nums; }
.sma-audience-encart-lus-titre { margin: 16px 0 2px; }
.sma-audience-encart-lus {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: lu;
	font-size: 14px;
}
.sma-audience-encart-lus li {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--filet);
	counter-increment: lu;
	line-height: 1.3;
}
.sma-audience-encart-lus li::before { content: counter(lu); color: var(--muet); font-weight: 900; }
.sma-audience-encart-lus a { overflow-wrap: anywhere; }
.sma-audience-encart-lus .sma-meta { font-variant-numeric: tabular-nums; }

/* 20.8 Le partage. */
.sma-audience-partage {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 14px;
	max-width: 900px;
}
.sma-audience-partage--langue {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
	max-width: 1100px;
}
.sma-audience-partage .sma-bouton { margin-top: 27px; }

.sma-audience-liens {
	display: grid;
	gap: 10px;
	max-width: 900px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.sma-audience-lien {
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--filet);
}
/* Celui qu'on vient de creer : c'est lui qu'on est venu copier. */
.sma-audience-lien.est-nouveau { border-color: var(--encre); }
.sma-audience-lien-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.sma-audience-lien form { margin-top: 8px; }
.sma-audience-lien button.sma-supprimer {
	background: none;
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

@media (max-width: 900px) {
	/* Les visites d'abord, sur toute la largeur : c'est le chiffre qu'on
	   cherche ; les quatre autres se rangent deux par deux dessous, separes
	   par leur filet du haut plutot que par un filet vertical. */
	.sma-audience-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
	/* Six colonnes ne tiennent plus : quatre, donc trois rangees. */
	.sma-fonds-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
	.sma-audience-chiffre:first-child { grid-column: 1 / -1; }
	.sma-audience-chiffre,
	.sma-audience-chiffre:first-child { padding: 14px 0 8px; }
	.sma-audience-chiffre + .sma-audience-chiffre { border-left: 0; }
	.sma-audience-valeur { font-size: 30px; }
	.sma-audience-chiffre:first-child .sma-audience-valeur { font-size: 48px; }
	.sma-audience-grille,
	.sma-audience-classement { grid-template-columns: minmax(0, 1fr); }
	.sma-audience-partage,
	.sma-audience-partage--langue { grid-template-columns: minmax(0, 1fr); }
	.sma-audience-partage .sma-bouton { margin-top: 0; justify-self: start; }
}

@media (max-width: 620px) {
	.sma-fonds { padding: 14px 4% 16px; }
	.sma-fonds-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sma-audience-tableau { padding: 20px 4% 22px; }
	.sma-audience-commandes { flex-direction: column; }
	.sma-audience-tableau .sma-onglet { padding: 9px 11px; }
	.sma-audience-bloc { padding: 16px 14px 18px; }
	/* La bascule passe sous le titre, qui se tassait sur deux lignes. */
	.sma-audience-tete .sma-audience-titre { flex-basis: 100%; }
	.sma-audience-trace { padding-left: 36px; }
	.sma-audience-barres { height: 170px; gap: 1px; }
	.sma-audience-axe { gap: 1px; }
	/* Le compte passe sous le titre : a cote, il lui prenait la moitie de
	   la largeur. */
	.sma-audience-lu,
	.sma-audience-suite .sma-audience-lu { grid-template-columns: 26px 64px minmax(0, 1fr); gap: 10px; }
	.sma-audience-lu .sma-audience-rang   { grid-column: 1; grid-row: 1 / span 2; }
	.sma-audience-lu .sma-flux-vignette   { grid-column: 2; grid-row: 1 / span 2; }
	.sma-audience-lu .sma-audience-lu-corps { grid-column: 3; grid-row: 1; }
	.sma-audience-lu .sma-audience-lu-n   { grid-column: 3; grid-row: 2; text-align: left; }
	.sma-audience-lu-n strong,
	.sma-audience-suite .sma-audience-lu-n strong { display: inline; font-size: 16px; }
	.sma-audience-rang { font-size: 22px; }
	.sma-audience-lu-titre { font-size: 15px; }
}