/* LA BOUSSOLE — Badge Ministère de l'Éducation (LOT G · Partie 1 bis / LOT G · A)
 * Version DESKTOP (≥ 1281 px réglé en P7 ; anciennement ≥ 993 px) : badge toujours
 * présent, toujours visible.
 *
 * Comportement UNIQUE par-delà les largeurs (spéc 1.4) :
 *  - En haut de page (scroll 0) : juste SOUS la barre de menu, avec un
 *    espace VISIBLE de 16 px (mesuré, cf. 1.3). Le badge joue donc sous le
 *    header, dans la marge droite.
 *  - Dès que le header sort de l'écran (scroll) : le badge colle (sticky) en
 *    haut à droite, 16 px de marge — classe .is-sticky posée par main.js via
 *    IntersectionObserver (repli scroll passif + rAF).
 *
 * Taille (spéc 1.5) :
 *  - 993–1723 px : badge COMPACT (≈ 88–96 px de côté), logo réduit en
 *    proportion. Le texte reste à 10 px.
 *  - ≥ 1724 px : taille actuelle pleine (126 px).
 *
 * Ancrage : le badge se cale sous le bas RÉEL du header mesuré au runtime
 * (var --lbs-header-flow-bottom publiée par main.js — voir certif 1.6 : une
 * injection client pré-existante déplace le header sur /exposants/). Repli
 * statique : --lbs-header-total (80 px). z-index 90 — toujours DERRIÈRE
 * l'overlay de la modale partenaire (400).
 *
 * LOT G · A — Bugs badge :
 *  - L'instance MOBILE (.lbs-ministry-badge-mobile) n'existait que dans le menu
 *    mobile ouvert ; FINAL · P3 l'a remplacée par .lbs-ministry-badge-bar,
 *    DANS la barre de menu (entre logo et bouton, ~44 px, toujours lien officiel).
 *  - Le libellé « sous l'égide du » est forcé à 10 px RÉELS (px, pas de rem),
 *    une SEULE ligne (white-space: nowrap), centré au-dessus du logo. Rien ne
 *    le surcharge (aucune règle cascade/color-pass ne cible ces classes).
 */

/* ---------- Base (masqué en deçà de 993 px ; version mobile dans le menu) ---------- */
.lbs-ministry-badge {
	display: none;
	z-index: 90;
	box-sizing: border-box;
}
.lbs-ministry-badge-mobile {
	display: none;
}

/* ---------- ≥ 1281 px : badge sticky, toujours visible ---------- */
@media (min-width: 1281px) {
	.lbs-ministry-badge {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Ancrage au bas réel du header (mesuré) ; en l'absence de mesure, repli
		   --lbs-header-total (80 px). Le badge initial est calé à 16 px SOUS le
		   header (1.3) ; sticky = translateY(0) → badge en haut à droite, 16 px
		   de marge (1.4). */
		/* FINAL BIS · P1 — Menu sticky : le header reste PERMANENTEMENT à
		   l'écran (position: sticky), donc le badge n'a plus besoin de coller
		   au défilement. Il est FIXED en permanence à 16 px juste SOUS le bas
		   RÉEL du header (top = var(--lbs-header-total) + 16 px). Le mécanisme
		   transform: translateY / --lbs-header-flow-bottom et la classe
		   .is-sticky sont supprimés (IntersectionObserver retiré de main.js). */
		position: fixed;
		top: calc(var(--lbs-header-total, 80px) + 16px);
		right: var(--lbs-gutter, 16px);
		transition: box-shadow var(--lbs-transition-fast, 0.15s);
		border: 1px solid var(--lbs-gray-200, #e5e7eb);
		border-radius: var(--lbs-radius-md, 0.5rem);
		background: var(--lbs-header-bg, #ffffff);
		box-shadow: var(--lbs-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1));
	}
	.lbs-ministry-badge:hover { box-shadow: var(--lbs-shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); }
	.lbs-ministry-badge:focus-visible {
		outline: 3px solid var(--lbs-blue-accent, #1c64f2);
		outline-offset: 3px;
	}
	/* FINAL BIS · P1 — Règle `.is-sticky` supprimée : le mécanisme
	   IntersectionObserver/scroll est retiré de main.js, le badge ne colle
	   plus au défilement (il est FIXED en permanence sous le header sticky). */
}

/* Libellé « sous l'égide du » — 10 px réels, une ligne, centré au-dessus du logo.
 * Une règle commune (pas de rem, pas de transform uppercase) pour les deux tailles
 * de badge : rien dans la cascade (color-pass comprend) ne doit le surcharger. */
.lbs-ministry-badge-label,
.lbs-ministry-badge-mobile-label {
	font-size: 10px;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ---------- 1281–1723 px : badge COMPACT (spéc 1.5) ---------- */
@media (min-width: 1281px) and (max-width: 1723px) {
	.lbs-ministry-badge {
		/* Élargi de 84→88 px mini pour loger la ligne de 10 px sans wrap. */
		width: clamp(88px, 10vw, 96px);
		padding: 0.5rem 0.5rem 0.4rem;
		gap: 0.35rem;
	}
	.lbs-ministry-badge-logo {
		width: clamp(62px, 7.5vw, 68px);
		height: auto;
		display: block;
	}
	.lbs-ministry-badge-label {
		width: 100%;
	}
}

/* ---------- ≥ 1724 px : badge pleine taille (spéc 1.5) ---------- */
@media (min-width: 1724px) {
	.lbs-ministry-badge {
		width: clamp(112px, 11.2vw, 126px);
		padding: 0.75rem 0.75rem 0.6rem;
		gap: 0.4rem;
	}
	.lbs-ministry-badge-logo {
		width: clamp(96px, 11vw, 126px);
		height: auto;
		display: block;
	}
	.lbs-ministry-badge-label {
		width: 100%;
	}
}

/* ---------- Mobile (≤ 1280 px) : badge DANS la barre de menu ----------
 * FINAL · P3 — Le logo du Ministère est affiché dans la barre de menu, entre
 * le logo La Boussole et le bouton du menu, en format compact (hauteur ~44 px).
 * Il vit dans .lbs-header-right (aligné à gauche du bouton), pas dans le
 * panneau du menu ouvert. Toujours un lien vers
 * https://education.gov.tn/?lang=fr (nouvel onglet) ; aria-label sur le lien.
 * Masqué ≥ 1281 px : là, seule l'instance desktop .lbs-ministry-badge existe
 * (validation client, intacte). Aucun chevauchement à 320 px : logo ≤ 60 px,
 * badge ~49 px, bouton 40 px — tient dans la barre (espacement flex).
 * FINAL BIS · P7 — Seuil aligné sur le breakpoint du menu (992 → 1280 px). */
.lbs-ministry-badge-bar {
	display: none;
}
@media (max-width: 1280px) {
	.lbs-ministry-badge-bar {
		display: flex;
		align-items: center;
		flex: none;
	}
	.lbs-ministry-badge-bar-link {
		display: flex;
		align-items: center;
		line-height: 0;
		text-decoration: none;
	}
	.lbs-ministry-badge-bar-link:focus-visible {
		outline: 3px solid var(--lbs-blue-accent, #1c64f2);
		outline-offset: 3px;
		border-radius: var(--lbs-radius-sm, 0.25rem);
	}
	.lbs-ministry-badge-bar-logo {
		height: 44px;
		width: auto;
		display: block;
	}
}