/* Accueil : le bandeau sombre et la lecture du disque (thème 1.10.0 ; Mathieu, 01/11/2026 : « des petits carrés qui défilent pour
   la lecture, discret, avec des icônes, quelque chose de classe, sombre, pro », puis « Oui, prépare-le » sur la maquette). Feuille
   chargée sur les seules pages au bandeau quadrillé (les cinq accueils, voir index.php).
   Mise en page sans script (rien ne bouge quand secteurs.js arrive) : la grille du bandeau garde la place de la lecture, à droite du
   texte sur ordinateur, en bande sous le texte sur tablette et téléphone ; l'écran du logiciel est posé à cheval sur le bas du
   bandeau, dont le fond redevient clair. */
.mbc-section--hero.mbc-section--grid {
	--mbc-cheval: clamp(200px, 22vw, 270px);
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: clamp(56px, 6.5vw, 88px) 0;
	border-bottom: 0;
	color: #F5F6F7;
	background:
		radial-gradient(900px 420px at 78% 18%, rgba(138, 20, 28, .2), transparent 65%),
		linear-gradient(180deg, #15171B 0, #1C1F24 calc(100% - var(--mbc-cheval)), var(--mbc-bg) calc(100% - var(--mbc-cheval)));
}
.mbc-section--hero.mbc-section--grid > .mbc-container {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 56px 48px;
	align-items: center;
}
.mbc-section--hero.mbc-section--grid .mbc-split { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.mbc-section--hero.mbc-section--grid .mbc-split > .mbc-stack:first-child { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mbc-section--hero.mbc-section--grid .mbc-pill { align-self: center; background: rgba(222, 64, 74, .14); color: #F1A7AD; }
.mbc-section--hero.mbc-section--grid .mbc-label { color: #9AA0A8; }
.mbc-section--hero.mbc-section--grid .mbc-h1 { flex-basis: 100%; margin-top: 6px; color: #F7F8F9; font-size: clamp(2.2rem, 3.3vw, 2.9rem); line-height: 1.1; letter-spacing: -.022em; }
.mbc-section--hero.mbc-section--grid .mbc-lead { max-width: 36em; color: #B4BAC3; font-size: 18px; }
.mbc-section--hero.mbc-section--grid .mbc-btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 30px -12px rgba(222, 64, 74, .55); }
.mbc-section--hero.mbc-section--grid .mbc-btn--secondary { background: transparent; border-color: rgba(255, 255, 255, .24); color: #F5F6F7; }
.mbc-section--hero.mbc-section--grid .mbc-btn--secondary:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); color: #FFFFFF; }
.mbc-section--hero.mbc-section--grid .mbc-fabrique { color: #D5D9DF; font-weight: 400; }
.mbc-section--hero.mbc-section--grid :focus-visible { outline-color: #F1A7AD; }

/* La lecture : petits carrés effacés sur les bords, et le bouton de pause, discret, dans le coin. */
.mbc-lecture { grid-area: 1 / 2; position: relative; align-self: stretch; min-height: 320px; }
.mbc-lecture__toile {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-composite: intersect;
}
.mbc-lecture__pause {
	position: absolute;
	right: 4px;
	bottom: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 6px;
	background: rgba(21, 23, 27, .7);
	cursor: pointer;
}
.mbc-lecture__pause::before, .mbc-lecture__pause::after {
	content: "";
	position: absolute;
	top: 9px;
	width: 3px;
	height: 10px;
	border-radius: 1px;
	background: #9AA0A8;
}
.mbc-lecture__pause::before { left: 10px; }
.mbc-lecture__pause::after { left: 15px; }
.mbc-lecture__pause[aria-pressed="true"]::before { left: 11px; width: 0; height: 0; border-radius: 0; border-block: 5px solid transparent; border-left: 8px solid #9AA0A8; background: none; }
.mbc-lecture__pause[aria-pressed="true"]::after { display: none; }
.mbc-lecture__pause:hover { border-color: rgba(241, 167, 173, .6); }
.mbc-lecture__pause:hover::before, .mbc-lecture__pause:hover::after { background-color: #F1A7AD; }
.mbc-lecture__pause[aria-pressed="true"]:hover::before { background: none; border-left-color: #F1A7AD; }

/* L'écran du logiciel, à cheval sur le bas du bandeau ; son bas s'estompe dans la page. */
.mbc-section--hero.mbc-section--grid .mbc-appwin { grid-area: 2 / 1 / 3 / -1; width: 100%; max-width: 1040px; margin-inline: auto; }
.mbc-section--hero.mbc-section--grid .mbc-appwin__frame {
	max-height: 470px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .55);
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.mbc-section--hero.mbc-section--grid .mbc-appwin figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tablette : le texte au-dessus, la lecture en bande dessous, de bord à bord. */
@media (max-width: 960px) {
	.mbc-section--hero.mbc-section--grid > .mbc-container { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 176px auto; gap: 32px; }
	.mbc-lecture { grid-area: 2 / 1; min-height: 0; margin-inline: calc(-1 * var(--mbc-gutter)); }
	.mbc-lecture__pause { right: var(--mbc-gutter); }
	.mbc-section--hero.mbc-section--grid .mbc-appwin { grid-area: 3 / 1; }
}

/* Téléphone : bande de lecture plus basse ; l'écran du logiciel réduit aux trois parcours, sans le détail. */
@media (max-width: 600px) {
	.mbc-section--hero.mbc-section--grid { --mbc-cheval: 170px; padding-top: 28px; }
	.mbc-section--hero.mbc-section--grid > .mbc-container { grid-template-rows: auto 136px auto; gap: 26px; }
	.mbc-section--hero.mbc-section--grid .mbc-split { gap: 18px; }
	.mbc-section--hero.mbc-section--grid .mbc-split > .mbc-stack:first-child { gap: 10px 12px; }
	.mbc-section--hero.mbc-section--grid .mbc-pill { align-self: flex-start; }
	.mbc-section--hero.mbc-section--grid .mbc-h1 { margin-top: 4px; font-size: 1.85rem; line-height: 1.14; }
	.mbc-section--hero.mbc-section--grid .mbc-lead { font-size: 16.5px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__frame { max-height: none; border-bottom: 1px solid var(--mbc-line-2); border-radius: 10px; -webkit-mask-image: none; mask-image: none; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__badges,
	.mbc-section--hero.mbc-section--grid .mbc-appwin__hint,
	.mbc-section--hero.mbc-section--grid .mbc-appwin__desc,
	.mbc-section--hero.mbc-section--grid .mbc-appwin__checks,
	.mbc-section--hero.mbc-section--grid .mbc-appwin__actions { display: none; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__body { padding: 18px 14px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__logo { width: 190px; height: 38px; margin-bottom: 8px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__question { margin-bottom: 14px; font-size: 19px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__cards { gap: 8px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__card { flex-basis: 100%; padding: 12px 14px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__cardhead { grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__cardhead::before { width: 38px; height: 38px; background-size: 22px 22px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__cardhead span { margin-top: 1px; }
	.mbc-section--hero.mbc-section--grid .mbc-appwin__cardhead strong { font-size: 15.5px; }
}

/* Moins de mouvement demandé : une image fixe, donc pas de bouton de pause. */
@media (prefers-reduced-motion: reduce) {
	.mbc-lecture__pause { display: none; }
}