/* =============================================================================
 * template_lm — Template site natif Joomla 6 (« Template LM »)
 *
 * MOTEUR DE MISE EN PAGE + API CSS STABLE (volontairement).
 * Toute personnalisation avancée se fait en ciblant ces classes / variables
 * depuis les champs CSS des ONGLETS du style, plg_system_csscustomcode, ou une
 * surcharge de template — JAMAIS en modifiant ce fichier.
 *
 * ── Variables globales (posées sur :root par index.php depuis l'onglet Global) ─
 *   --lm-container        largeur max du conteneur "contenu" (ex. 1200px)
 *   --lm-color-primary    couleur primaire
 *   --lm-color-accent     couleur d'accent
 *   --lm-color-text       couleur du texte
 *   --lm-color-bg         couleur de fond de page
 *   --lm-color-border     couleur des bordures
 *   --lm-radius           rayon des coins (ex. 8px)
 *   --lm-font             pile de police
 *   --lm-font-size        taille de base
 *
 * ── Variables par zone (posées en inline sur chaque .lm-wrapper) ──────────────
 *   --lm-cols             nb de colonnes (zones Top/Bottom/Footer)
 *   --lm-pad-y            padding vertical de la zone
 *   --lm-min-h            hauteur minimale de la zone
 *   --lm-align-v          alignement vertical des colonnes (align-items)
 *   --lm-align-h          alignement horizontal (justify-items)
 *   --lm-left-w / --lm-right-w   largeur des sidebars (zone Main)
 *   --lm-stack-bp         breakpoint d'empilement (zone Main)
 *
 * ── Classes structurantes ────────────────────────────────────────────────────
 *   .lm-wrapper            section pleine largeur (une par zone)
 *   .lm-inner              conteneur interne
 *   .lm-inner--full        variante pleine largeur
 *   .lm-inner--contained   variante centrée (max-width:--lm-container)
 *   .lm-header  .lm-header__brand  .lm-header__nav
 *   .lm-logo
 *   .lm-cols               grille de colonnes (Top/Bottom)
 *   .lm-main-grid  .lm-main  .lm-sidebar  .lm-sidebar--left  .lm-sidebar--right
 *   .lm-footer-grid
 *   .lm-skip-link          lien d'évitement (accessibilité)
 *   .lm-hide-desktop / .lm-hide-mobile   visibilité responsive
 * ========================================================================== */

/* --- Reset minimal + tokens ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
	--lm-container: 1200px;
	--lm-color-primary: #2563eb;
	--lm-color-accent: #f59e0b;
	--lm-color-text: #1f2937;
	--lm-color-bg: #ffffff;
	--lm-color-border: #e5e7eb;
	--lm-radius: 8px;
	--lm-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--lm-font-size: 16px;
	--lm-inner-pad: clamp(1rem, 4vw, 2rem);
}

html { font-size: var(--lm-font-size); }

body.lm-site {
	margin: 0;
	font-family: var(--lm-font);
	color: var(--lm-color-text);
	background: var(--lm-color-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Spécificité volontairement réduite à (0,0,1) : un simple sélecteur de
   TYPE, sans le préfixe "body.lm-site" (redondant ici — ce fichier ne charge
   que sur des pages dont le <body> porte déjà cette classe, cf. index.php/
   component.php/error.php/offline.php). Ainsi N'IMPORTE QUELLE classe de
   composant (.mon-cta, .mm-btn--dark…) gagne automatiquement sans jamais
   avoir besoin de !important ni d'un sélecteur qualifié par un ancêtre.
   Avant : "body.lm-site a"/"a:hover" = (0,1,2), qui battait silencieusement
   toute classe de bouton <a> seule (0,1,0) — voir gotchas.md §12. */
a { color: var(--lm-color-primary); }
a:hover { color: var(--lm-color-accent); }

/* --- Accessibilité : skip-link + focus visible --------------------------- */
.lm-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--lm-color-primary); color: #fff;
	padding: .6rem 1rem; border-radius: 0 0 var(--lm-radius) 0; text-decoration: none;
}
.lm-skip-link:focus { left: 0; }

body.lm-site :focus-visible {
	outline: 3px solid var(--lm-color-accent);
	outline-offset: 2px;
}

/* --- Wrapper + inner (full-width vs contenu) ----------------------------- */
.lm-wrapper {
	padding-block: var(--lm-pad-y, 0);
	min-height: var(--lm-min-h, auto);
	background-color: var(--lm-bg-color, transparent);
	background-image: var(--lm-bg-image, none);
	background-size: var(--lm-bg-size, auto);
	background-position: var(--lm-bg-position, center center);
	background-repeat: no-repeat;
}

.lm-inner { width: 100%; }
.lm-inner--contained {
	max-width: var(--lm-container);
	margin-inline: auto;
	padding-inline: var(--lm-inner-pad);
}
.lm-inner--full {
	padding-inline: var(--lm-inner-pad);
}

/* --- Header --------------------------------------------------------------- */
.lm-header .lm-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; flex-wrap: wrap;
}
.lm-header__brand { display: flex; align-items: center; }
.lm-logo { display: inline-flex; align-items: center; }
.lm-logo img { display: block; max-height: 56px; width: auto; height: auto; }
.lm-logo__text { font-size: 1.25rem; font-weight: 700; color: var(--lm-color-text); }
.lm-header__nav { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; }

/* Sticky + shrink (classes posées par template.js) */
.lm-header.is-sticky {
	position: sticky; top: 0; z-index: 1000;
	background-color: var(--lm-bg-color, var(--lm-color-bg));
}
.lm-header.is-shrink { --lm-pad-y: .35rem; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.lm-header { transition: padding .2s ease, box-shadow .2s ease; }

/* --- Grille de colonnes (Top / Bottom) ----------------------------------- */
.lm-cols {
	display: grid;
	grid-template-columns: repeat(var(--lm-cols, 3), minmax(0, 1fr));
	gap: 1.5rem 2rem;
	align-items: var(--lm-align-v, stretch);
	justify-items: var(--lm-align-h, stretch);
}
.lm-cols > * { min-width: 0; }

/* --- Grille Main (left | main | right) ------------------------------------ */
.lm-main-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns:
		var(--lm-left-w, 0)
		minmax(0, 1fr)
		var(--lm-right-w, 0);
}
/* Colonnes absentes => piste à 0 (pas d'espace fantôme). */
.lm-main-grid.no-left  { grid-template-columns: minmax(0,1fr) var(--lm-right-w, 0); }
.lm-main-grid.no-right { grid-template-columns: var(--lm-left-w, 0) minmax(0,1fr); }
.lm-main-grid.no-left.no-right { grid-template-columns: minmax(0,1fr); }
.lm-main { min-width: 0; }
.lm-sidebar { min-width: 0; }

/* Empilement mobile propre : la variable --lm-stack-bp est numérique côté JS ;
 * ici on repli en dessous d'un breakpoint fixe raisonnable via media query
 * dupliquée par index.php pour la valeur exacte du style. Fallback à 768px. */
@media (max-width: 768px) {
	.lm-main-grid,
	.lm-main-grid.no-left,
	.lm-main-grid.no-right { grid-template-columns: minmax(0,1fr); }
	.lm-sidebar--left  { order: -1; }
	.lm-sidebar--right { order: 1; }
}

/* --- Footer --------------------------------------------------------------- */
.lm-footer-grid {
	display: grid;
	grid-template-columns: repeat(var(--lm-cols, 3), minmax(0, 1fr));
	gap: 1.5rem 2rem;
	align-items: start;
}
/* Une position de module non publiée (aucun module assigné) rend un conteneur
 * vide qui réserve quand même une piste de grille + son "gap" de chaque côté —
 * visuellement un grand vide avant la ligne suivante. On la retire du flux de
 * la grille plutôt que de la laisser occuper un espace pour rien. */
.lm-footer__col:empty { display: none; }
.lm-footer { color: #e5e7eb; }
.lm-footer a { color: #cbd5e1; }
.lm-footer a:hover { color: #fff; }
.lm-footer__copyright { grid-column: 1 / -1; margin-top: 1rem; opacity: .8; font-size: .9rem; }

/* --- Zone Top/Bottom : colonnes -> 1 en mobile --------------------------- */
@media (max-width: 640px) {
	.lm-cols,
	.lm-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Visibilité responsive (par zone) ------------------------------------ */
@media (max-width: 768px) { .lm-hide-mobile { display: none !important; } }
@media (min-width: 769px) { .lm-hide-desktop { display: none !important; } }

/* --- Bandeau cookies (crochet) ------------------------------------------- */
.lm-cookie {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 2000;
	background: var(--lm-color-text); color: #fff;
	padding: 1rem var(--lm-inner-pad);
}

/* --- Bouton retour haut (optionnel, via JS/CSS custom) ------------------- */
.lm-back-top {
	position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 900;
	width: 44px; height: 44px; border-radius: 50%;
	display: none; align-items: center; justify-content: center;
	background: var(--lm-color-primary); color: #fff; text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.lm-back-top.is-visible { display: inline-flex; }

/* --- Pages système (erreur / offline) ------------------------------------ */
.lm-system { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 2rem; }
.lm-system__code { font-size: clamp(3rem, 12vw, 7rem); font-weight: 800; color: var(--lm-color-primary); line-height: 1; }

/* --- Réduction de mouvement ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lm-header, .lm-back-top, * { transition: none !important; scroll-behavior: auto !important; }
}