/*
 * Billet « marquise » [maj_mcf_billet style="marquise"] (mu-plugin maj-mcf-elements), validé par Jérémie le 06/10/2026
 * (banc 2_Build/2026-10-06-billet-cirque/variante-c/v6, dosage B). Feuille chargée seulement par ce style ; le billet
 * classique garde billet.css.
 */
/*
 * Billet du héros, piste C1 v6 (banc du 06/10/2026, pas en prod) = v5 + ampoule remise au-dessus et au-dessous des
 * encoches (la découpe reste sombre) + couleurs de l'éclairage du Chapiteau, en trois dosages au choix (classes) :
 *   .mcf-bleu-a  ampoules qui alternent ambre et bleu ;
 *   .mcf-bleu-b  la vague de lumière passe lentement de l'ambre au bleu et revient (30 s) ;
 *   .mcf-bleu-c  reflet bleuté dans le canal et sur le liseré, ampoules ambrées.
 * Couleur ajoutée hors palette : --mcf-bleu-chapiteau #3226ee, bleu-violet des projecteurs, relevé sur la photo du
 * Chapiteau (médiane des pixels bleu-violet lumineux). L'ambre reste un mélange de la palette (jaune et ivoire).
 * Hérité : ampoules sur l'axe du canal (v3), encoches sur la 16e colonne (v4), survol à 20/19 (v4), coins rentrés (v5).
 * Couleurs du billet : palette Salient (color-mix), textes et panneau inchangés. Mouvement coupé sous
 * prefers-reduced-motion.
 *
 * Sous-variantes : .mcf-marquise (rouge, défaut) et .mcf-marquise.mcf-nuit (billet noir, cadre rouge, esprit cabaret).
 */
@property --mcf-vague{syntax:'<angle>';inherits:false;initial-value:0deg}

.mcf-el-billet{container-type:inline-size;width:min(440px,100%);position:relative}

.mcf-marquise{
	--cadre:color-mix(in srgb,var(--nectar-accent-color) 38%,var(--nectar-extra-color-2));
	--panneau:var(--nectar-accent-color);
	--lumiere:color-mix(in srgb,var(--nectar-extra-color-1) 70%,var(--nectar-extra-color-3));
	--veille:color-mix(in srgb,var(--nectar-extra-color-1) 45%,var(--cadre));
	/* v6 : deux familles d'ampoules en damier (1 et 2) ; par défaut les deux sont ambrées, comme en v5. */
	--mcf-bleu-chapiteau:#3226ee;
	--lumiere1:var(--lumiere);--lumiere2:var(--lumiere);--veille1:var(--veille);--veille2:var(--veille);
	--lisere:color-mix(in srgb,var(--nectar-extra-color-1) 35%,transparent);
	--bord:clamp(11px,3.4cqi,15px);
	--pas:calc((100cqi - var(--bord)) / 22);
	--dp:0px;
	/* Coins (v5) : l'ampoule d'angle est rentrée de --coin sur chaque axe, et le rayon du cadre est choisi pour que sa
	   marge au bord, sur la diagonale, reste égale à celle d'une ampoule de côté (canal / 2) :
	   r = (√2 × (canal/2 + coin) − canal/2) / (√2 − 1). Elle ne touche alors le bord qu'en un point, comme les autres. */
	--coin:2px;
	--r-cadre:calc((1.41421 * (var(--bord) / 2 + var(--coin)) - var(--bord) / 2) * 2.41421);
	--encoche:calc(16 * var(--pas) - var(--bord) / 2); /* centre des encoches, depuis le bord gauche du billet rouge : 16e colonne d'ampoules */
	position:relative;z-index:1;display:flex;width:calc(22 * var(--pas) + var(--bord));height:calc(9 * var(--pas) + var(--bord));margin-inline:auto;padding:var(--bord);box-sizing:border-box;
	background:var(--cadre);border-radius:var(--r-cadre);color:var(--nectar-extra-color-3)!important;text-decoration:none!important;
	box-shadow:0 22px 40px rgba(0,0,0,.5);
	transform:rotate(-3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1.3);cursor:pointer}

/* Liseré doré du bord, redessiné au-dessus des ampoules (v5) : les caches des coins ne doivent pas le couvrir. */
.mcf-marquise::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
	box-shadow:0 0 0 1px var(--lisere) inset}

/* Pixels entiers : canal pair (axe sur un pixel entier), pas entier, et si le pas est impair (--dp = 0,5 px) le motif
   est décalé d'un demi-pixel pour que le centre de l'ampoule tombe sur un bord de pixel. Sans ça, à 1x, une ampoule
   de 5 px centrée au milieu d'un pixel se dessine en petit carré (vu à la capture). */
@supports (width:round(down,1.5px,1px)) and (width:mod(3px,2px)){
	.mcf-marquise{--bord:calc(2 * round(clamp(11px,3.4cqi,15px) / 2,1px));--pas:round(down,calc((100cqi - var(--bord)) / 22),1px);--dp:calc(mod(var(--pas),2px) / 2)}
}

/* Rangée d'ampoules : deux calques du même motif, recouverts au centre par le billet.
   Calque 1 = veilleuse, calque 2 = ampoules vives, découvert par un secteur conique qui tourne.
   Centrage (v3) : le billet mesure exactement 22 pas de large et 9 pas de haut d'un axe du canal à l'autre (pas en
   pixels entiers quand round() existe). Le calque d'ampoules commence un demi-pas avant l'axe et répète une tuile
   d'un pas, ampoule au centre : chaque ampoule, coins compris, tombe sur l'axe, au même pas sur les quatre côtés, et
   le navigateur n'a aucune tuile à redimensionner ni à arrondir. Prix : le billet perd jusqu'à 21 px de large. */
.mcf-marquise .mcf-ampoules,.mcf-marquise .mcf-ampoules::after{position:absolute;pointer-events:none;
	background-origin:border-box;background-repeat:repeat;background-size:var(--pas) var(--pas)}
.mcf-marquise .mcf-ampoules{--i:calc((var(--bord) - var(--pas)) / 2);top:calc(var(--i) + var(--dp));left:calc(var(--i) + var(--dp));right:calc(var(--i) - var(--dp));bottom:calc(var(--i) - var(--dp));
	/* Caches d'encoche (v6) : deux aplats couleur cadre de 12 px posés SOUS le bord du billet rouge, sur la 16e colonne.
	   L'ampoule du canal reste (au-dessus / au-dessous de l'encoche, sur l'axe du pointillé) ; ce qui passerait par
	   la découpe (la fin de son halo et l'ampoule cachée sous le billet) est couvert, la découpe reste sombre. */
	--cx:calc(16 * var(--pas));--cw:var(--pas);--ct:calc((var(--pas) + var(--bord)) / 2 - var(--dp));--ch:12px;
	--caches:linear-gradient(var(--cadre),var(--cadre)) var(--cx) var(--ct) / var(--cw) var(--ch) no-repeat,
		linear-gradient(var(--cadre),var(--cadre)) var(--cx) calc(100% - var(--ct) - 2 * var(--dp)) / var(--cw) var(--ch) no-repeat,
		var(--coins-caches);
	/* Coins (v5) : les quatre ampoules d'angle de la grille sont couvertes (disque couleur cadre de 7,6 px), puis
	   redessinées --coin plus loin sur la diagonale. Le calque est découpé à la forme du cadre pour que rien ne déborde
	   du coin arrondi. */
	/* Chaque disque est une tuile d'un pas, dessinée exactement comme celles de la grille (même centre, même
	   décalage d'un demi-pixel), posée sur la tuile d'angle (caches) ou décalée de --coin (ampoules rentrées). Une
	   image d'une autre taille se peint différemment et donne des ampoules en croix, vu au zoom. */
	--ctr:calc(50% - var(--dp));
	--cache-coin:radial-gradient(circle at var(--ctr) var(--ctr),var(--cadre) 0 7.6px,transparent 8px);
	--coins-caches:var(--cache-coin) 0 0 / var(--pas) var(--pas) no-repeat,var(--cache-coin) 100% 0 / var(--pas) var(--pas) no-repeat,
		var(--cache-coin) 0 100% / var(--pas) var(--pas) no-repeat,var(--cache-coin) 100% 100% / var(--pas) var(--pas) no-repeat;
	--v1:var(--veille1) 0 2.6px,color-mix(in srgb,var(--veille1) 40%,transparent) 3.4px,transparent 4.2px;
	--v2:var(--veille2) 0 2.6px,color-mix(in srgb,var(--veille2) 40%,transparent) 3.4px,transparent 4.2px;
	--l1:var(--nectar-extra-color-3) 0 1.4px,var(--lumiere1) 2.8px,color-mix(in srgb,var(--lumiere1) 45%,transparent) 4.4px,transparent 7.5px;
	--l2:var(--nectar-extra-color-3) 0 1.4px,var(--lumiere2) 2.8px,color-mix(in srgb,var(--lumiere2) 45%,transparent) 4.4px,transparent 7.5px;
	--p1:calc(var(--pas) / 2 - var(--dp));--p2:calc(var(--pas) * 1.5 - var(--dp));--d2:calc(var(--pas) * 2);
	--o1:calc((var(--pas) - var(--bord)) / 2 - var(--dp));--o2:calc((var(--pas) - var(--bord)) / 2 + var(--dp));
	clip-path:inset(var(--o1) var(--o2) var(--o2) var(--o1) round var(--r-cadre));
	background:radial-gradient(circle at var(--ctr) var(--ctr),var(--v1)) var(--coin) var(--coin) / var(--pas) var(--pas) no-repeat,radial-gradient(circle at var(--ctr) var(--ctr),var(--v1)) calc(100% - var(--coin)) var(--coin) / var(--pas) var(--pas) no-repeat,radial-gradient(circle at var(--ctr) var(--ctr),var(--v2)) var(--coin) calc(100% - var(--coin)) / var(--pas) var(--pas) no-repeat,radial-gradient(circle at var(--ctr) var(--ctr),var(--v2)) calc(100% - var(--coin)) calc(100% - var(--coin)) / var(--pas) var(--pas) no-repeat,
		var(--caches),radial-gradient(circle at var(--p1) var(--p1),var(--v1)) 0 0 / var(--d2) var(--d2) repeat,radial-gradient(circle at var(--p2) var(--p2),var(--v1)) 0 0 / var(--d2) var(--d2) repeat,radial-gradient(circle at var(--p2) var(--p1),var(--v2)) 0 0 / var(--d2) var(--d2) repeat,radial-gradient(circle at var(--p1) var(--p2),var(--v2)) 0 0 / var(--d2) var(--d2) repeat}
.mcf-marquise .mcf-ampoules::after{content:"";inset:0;
	background:radial-gradient(circle at var(--ctr) var(--ctr),var(--l1)) var(--coin) var(--coin) / var(--pas) var(--pas) no-repeat,radial-gradient(circle at var(--ctr) var(--ctr),var(--l1)) calc(100% - var(--coin)) var(--coin) / var(--pas) var(--pas) no-repeat,radial-gradient(circle at var(--ctr) var(--ctr),var(--l2)) var(--coin) calc(100% - var(--coin)) / var(--pas) var(--pas) no-repeat,radial-gradient(circle at var(--ctr) var(--ctr),var(--l2)) calc(100% - var(--coin)) calc(100% - var(--coin)) / var(--pas) var(--pas) no-repeat,
		var(--caches),radial-gradient(circle at var(--p1) var(--p1),var(--l1)) 0 0 / var(--d2) var(--d2) repeat,radial-gradient(circle at var(--p2) var(--p2),var(--l1)) 0 0 / var(--d2) var(--d2) repeat,radial-gradient(circle at var(--p2) var(--p1),var(--l2)) 0 0 / var(--d2) var(--d2) repeat,radial-gradient(circle at var(--p1) var(--p2),var(--l2)) 0 0 / var(--d2) var(--d2) repeat;
	-webkit-mask:conic-gradient(from var(--mcf-vague),#000 0 70deg,#0000 150deg 290deg,#000 360deg);
	mask:conic-gradient(from var(--mcf-vague),#000 0 70deg,#0000 150deg 290deg,#000 360deg);
	animation:mcfVague 9s linear infinite}
@keyframes mcfVague{to{--mcf-vague:360deg}}

/* Le billet lui-même : panneau à encoches, souche détachée par un pointillé. Les encoches laissent voir le cadre. */
.mcf-marquise .mcf-panneau{position:relative;z-index:1;flex:1;display:flex;border-radius:6px;background:var(--panneau);
	background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 16px,transparent 16px 32px);
	box-shadow:0 0 0 1px color-mix(in srgb,var(--nectar-extra-color-1) 55%,transparent) inset,0 0 18px rgba(0,0,0,.45) inset;
	-webkit-mask:radial-gradient(circle at var(--encoche) 0,#0000 10px,#000 11px) top/100% 51% no-repeat,radial-gradient(circle at var(--encoche) 100%,#0000 10px,#000 11px) bottom/100% 51% no-repeat;
	mask:radial-gradient(circle at var(--encoche) 0,#0000 10px,#000 11px) top/100% 51% no-repeat,radial-gradient(circle at var(--encoche) 100%,#0000 10px,#000 11px) bottom/100% 51% no-repeat}
.mcf-marquise .mcf-corps{flex:0 0 calc(var(--encoche) + 1px);box-sizing:border-box;padding:clamp(9px,3.2cqi,16px) clamp(12px,4.2cqi,20px);display:flex;flex-direction:column;
	justify-content:space-between;align-items:flex-start;border-right:2px dashed color-mix(in srgb,var(--nectar-extra-color-3) 70%,transparent)}
.mcf-marquise .mcf-t2{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
	font-size:clamp(12px,3.6cqi,16px);line-height:1.1;color:var(--nectar-extra-color-1)}
.mcf-marquise .mcf-t2 sup{font-size:.62em;vertical-align:.55em;line-height:0}
.mcf-marquise .mcf-t1{font-family:'Limelight','Barlow Condensed',serif;font-weight:400;text-transform:uppercase;letter-spacing:.08em;
	font-size:clamp(28px,10.2cqi,46px);line-height:.95;color:var(--nectar-extra-color-3);
	text-shadow:0 0 14px color-mix(in srgb,var(--nectar-extra-color-1) 45%,transparent),0 2px 0 rgba(0,0,0,.35)}
.mcf-marquise .mcf-go{display:inline-flex;background:var(--nectar-extra-color-3);color:var(--nectar-accent-color);font-family:'Barlow Condensed',sans-serif;
	font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(12px,3.4cqi,15px);line-height:1.2;
	padding:clamp(5px,1.4cqi,7px) clamp(10px,3cqi,14px);border-radius:99px;white-space:nowrap}
.mcf-marquise .mcf-souche{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;text-align:center;line-height:1.05;
	font-size:clamp(12px,3.5cqi,16px);letter-spacing:.06em}
.mcf-marquise .mcf-an{font-family:'Limelight','Barlow Condensed',serif;font-weight:400;font-size:clamp(19px,6.4cqi,28px);line-height:1;
	letter-spacing:.02em;color:var(--nectar-extra-color-1)}

/* Survol et focus : le billet se redresse et toutes les ampoules s'allument. */
.mcf-marquise:hover,.mcf-marquise:focus-visible{transform:rotate(0) scale(1.03)}
/* v4 : agrandi de 1,03, le motif d'ampoules de 19 px est peint en tuiles arrondies à 20 px et la grille dérive de 8 px
   vers la droite et 4 px vers le bas au survol (mesuré au banc : c'est ce qui rendait les coins irréguliers). Sur le
   billet pleine taille (440 px, pas de 19 px), l'agrandissement passe à 20/19 (1,053) : la tuile tombe sur 20 px pile. */
@container (min-width:440px){.mcf-marquise:hover,.mcf-marquise:focus-visible{transform:rotate(0) scale(calc(20 / 19))}}
.mcf-marquise:hover .mcf-ampoules::after,.mcf-marquise:focus-visible .mcf-ampoules::after{-webkit-mask:none;mask:none}
.mcf-marquise:focus-visible{outline:3px solid var(--nectar-extra-color-1);outline-offset:6px}

/* Balancement d'appel, repris du composant (plus doux : -3° au repos). */
.mcf-marquise.mcf-appel{animation:mcfTicC 4.5s ease-in-out 1.5s infinite}
.mcf-marquise.mcf-appel:hover,.mcf-marquise.mcf-appel:focus-visible{animation:none}
@keyframes mcfTicC{0%,86%,100%{transform:rotate(-3deg)}89%{transform:rotate(-1deg) translateY(-5px)}92%{transform:rotate(-5deg)}95%{transform:rotate(-2.5deg)}}

/* Dosages de l'éclairage du Chapiteau (v6). Bleu des ampoules : cœur ivoire, anneau bleu clair, halo bleu. */
.mcf-marquise.mcf-bleu-a{
	--lumiere2:color-mix(in srgb,var(--mcf-bleu-chapiteau) 62%,var(--nectar-extra-color-3));
	--veille2:color-mix(in srgb,var(--mcf-bleu-chapiteau) 55%,var(--cadre))}
@property --mcf-teinte{syntax:'<color>';inherits:true;initial-value:transparent}
.mcf-marquise.mcf-bleu-b .mcf-ampoules{--mcf-teinte:var(--lumiere);--lumiere1:var(--mcf-teinte);--lumiere2:var(--mcf-teinte);
	animation:mcfTeinte 30s ease-in-out infinite alternate}
@keyframes mcfTeinte{0%,30%{--mcf-teinte:color-mix(in srgb,var(--nectar-extra-color-1) 70%,var(--nectar-extra-color-3))}70%,100%{--mcf-teinte:color-mix(in srgb,var(--mcf-bleu-chapiteau) 62%,var(--nectar-extra-color-3))}}
.mcf-marquise.mcf-bleu-c{
	--cadre:color-mix(in srgb,color-mix(in srgb,var(--nectar-accent-color) 38%,var(--nectar-extra-color-2)) 72%,var(--mcf-bleu-chapiteau));
	--lisere:color-mix(in srgb,var(--mcf-bleu-chapiteau) 70%,var(--nectar-extra-color-3) 30%)}

/* Sous-variante « nuit » : billet noir, cadre rouge, lettrage ivoire et jaune (cabaret). */
.mcf-marquise.mcf-nuit{--cadre:var(--nectar-accent-color);--panneau:var(--nectar-extra-color-2);
	--veille:color-mix(in srgb,var(--nectar-extra-color-1) 40%,var(--cadre))}
.mcf-marquise.mcf-nuit .mcf-panneau{background-image:radial-gradient(ellipse 80% 120% at 30% 0,color-mix(in srgb,var(--nectar-accent-color) 22%,transparent),transparent 70%)}
.mcf-marquise.mcf-nuit .mcf-go{background:var(--nectar-extra-color-1);color:var(--nectar-extra-color-2)}

@media (prefers-reduced-motion:reduce){
	.mcf-marquise,.mcf-marquise.mcf-appel{animation:none;transition:none}
	.mcf-marquise .mcf-ampoules::after{animation:none;-webkit-mask:none;mask:none}
	.mcf-marquise.mcf-bleu-b .mcf-ampoules{animation:none}
}