/* ===========================================================
   Template UECT 2026 v12a — base
   Palette bleue + jaune / Barlow + Barlow Condensed
   =========================================================== */

:root {
	/* Bleus */
	--uect-blue:       #2958A6;   /* accent principal */
	--uect-blue-dark:  #1B3F7A;
	--uect-blue-navy:  #0E1E33;   /* texte foncé */
	--uect-blue-navy2: #1C3557;   /* footer */

	/* Neutres */
	--uect-white:      #FFFFFF;
	--uect-cream:      #F5F7FA;
	--uect-light-1:    #EFF3F8;   /* bg sections claires */
	--uect-light-2:    #E4E8EE;
	--uect-light-3:    #DFE5EE;
	--uect-line:       #D5DBE4;

	/* Texte */
	--uect-ink:        #0E1E33;
	--uect-ink-2:      #333D4F;
	--uect-ink-3:      #4A5468;

	/* Accents jaune */
	--uect-yellow:     #F2B705;
	--uect-yellow-2:   #FFD24A;

	/* Typo */
	--uect-font-sans:  'Barlow', system-ui, -apple-system, sans-serif;
	--uect-font-cond:  'Barlow Condensed', 'Barlow', sans-serif;

	/* Layout */
	--uect-container:  1280px;
	--uect-gutter-x:   40px;
	--uect-page-bg:    #FFFFFF;
}

/* ---------- Reset lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--uect-page-bg);
	color: var(--uect-ink);
	font-family: var(--uect-font-sans);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--uect-blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--uect-blue-dark); }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--uect-font-sans);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--uect-ink);
}

/* --------------------------------------------------------------
   Cadre : blocs sans background propre plafonnés à 1280 ;
   blocs avec fond de couleur en full-bleed (leur __inner reste cappé).
   -------------------------------------------------------------- */
.uect-header,
.uect-main,
.uect-section {
	max-width: var(--uect-container);
	margin-inline: auto;
}
.uect-hero,
.uect-hero-below,
.uect-activites,
.uect-se,
.uect-actus,
.uect-rejoignez,
.uect-boutique,
.uect-footer {
	width: 100%;
	max-width: none;
}

/* ---------- Utilitaires ---------- */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.uect-container {
	max-width: var(--uect-container);
	margin-inline: auto;
	padding-inline: var(--uect-gutter-x);
}
.uect-skip {
	position: absolute; top: -100px; left: 0;
	background: var(--uect-blue-navy); color: var(--uect-white);
	padding: 10px 16px; z-index: 1000;
}
.uect-skip:focus { top: 0; }

.uect-kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--uect-blue);
}

/* ===========================================================
   Header — 1 ligne : logo | nav | actions (Devenir membre + search + lang)
   =========================================================== */
.uect-header {
	position: relative;
	background: var(--uect-white);
	color: var(--uect-ink);
}
.uect-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	height: 96px;
	padding: 0;
	border-bottom: 1px solid var(--uect-line);
}

.uect-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}
.uect-brand img {
	height: 80px;
	width: auto;
	display: block;
}

.uect-mainmenu {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
	overflow: visible;
}
.uect-mainmenu__list {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 16px;
	font-weight: 600;
	color: var(--uect-ink);
	white-space: nowrap;
	flex-wrap: nowrap;
}
.uect-mainmenu__item { flex: none; }
.uect-header__actions { flex: none; }
.uect-brand { flex: none; }
.uect-mainmenu__item { position: relative; }
.uect-mainmenu__item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 36px 0;
	color: var(--uect-ink);
	position: relative;
}
.uect-mainmenu__item.is-active > a { color: var(--uect-blue); }
.uect-mainmenu__item.is-active > a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--uect-blue);
}
.uect-mainmenu__item:hover > a { color: var(--uect-blue); }
.uect-caret {
	font-size: 17px;
	font-weight: 700;
	color: var(--uect-blue);
	line-height: .7;
}

/* --- Dropdown --- */
.uect-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--uect-white);
	border: 1px solid var(--uect-line);
	box-shadow: 0 12px 30px rgba(14,30,51,.16);
	padding: 6px 0;
	margin-top: 0;
	display: none;
	flex-direction: column;
	z-index: 30;
	color: var(--uect-ink);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}
.has-dropdown:hover > .uect-dropdown,
.has-dropdown:focus-within > .uect-dropdown,
.has-dropdown.is-open > .uect-dropdown {
	display: flex;
}
.uect-dropdown li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 18px;
	white-space: nowrap;
	color: var(--uect-ink);
}
.uect-dropdown li a:hover {
	background: var(--uect-cream);
	color: var(--uect-blue);
}

/* Sous-sous-menu (flyout à droite du dropdown parent) */
.uect-dropdown__item { position: relative; }
.uect-dropdown__item.has-flyout > a > .uect-caret {
	font-size: 15px;
	color: var(--uect-blue);
	margin-left: 8px;
}
.uect-dropdown--flyout {
	position: absolute;
	top: -1px;
	left: 100%;
	margin-left: 0;
	min-width: 240px;
	/* overflow:visible obligatoire : un overflow:auto ici clipperait les
	   sous-flyouts (niveau 4+) qui sortent latéralement de leur parent. */
	overflow: visible;
	background: var(--uect-white);
	border: 1px solid var(--uect-line);
	box-shadow: 0 12px 30px rgba(14,30,51,.16);
	padding: 6px 0;
	display: none;
	flex-direction: column;
	z-index: 40;
}
.uect-dropdown__item.has-flyout:hover > .uect-dropdown--flyout,
.uect-dropdown__item.has-flyout:focus-within > .uect-dropdown--flyout,
.uect-dropdown__item.has-flyout.is-open > .uect-dropdown--flyout {
	display: flex;
}

/* --- Header actions (droite) --- */
.uect-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

/* Bouton "Devenir membre" */
.uect-btn-member {
	background: var(--uect-yellow);
	color: var(--uect-ink);
	font-size: 15px;
	font-weight: 700;
	padding: 11px 16px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	line-height: 1;
}
.uect-btn-member:hover { background: var(--uect-yellow-2); color: var(--uect-ink); }
.uect-btn-member svg { display: block; flex: none; }

/* Champ recherche — deux états : replié (icône + label "Rechercher") / ouvert (input 280px)
   Basculement au clic sur le bouton. Le layout flex absorbe l expansion : les autres éléments
   se décalent sans chevauchement. */
.uect-header__search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	flex: none;
}
.uect-header__search-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: 1px solid var(--uect-line);
	padding: 9px 15px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--uect-ink);
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
}
.uect-header__search-toggle svg { display: block; flex: none; color: var(--uect-blue); }
.uect-header__search-toggle:hover { border-color: var(--uect-blue); }

.uect-header__search-input {
	display: none;
	border: 1px solid var(--uect-blue);
	background: var(--uect-white);
	padding: 9px 12px 9px 40px;
	font: inherit;
	font-size: 14px;
	color: var(--uect-ink);
	width: 220px;
	outline: 0;
	margin: 0;
}
.uect-header__search-input::placeholder { color: var(--uect-ink-3); }
.uect-header__search-input::-webkit-search-cancel-button { display: none; }

/* État ouvert : cache le bouton, montre l input, superpose l icône dans le padding */
.uect-header__search.is-open .uect-header__search-toggle { display: none; }
.uect-header__search.is-open .uect-header__search-input  { display: block; }
.uect-header__search.is-open::before {
	content: '';
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	width: 17px; height: 17px;
	background: no-repeat center/contain
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'><circle cx='7' cy='7' r='5.2' stroke='%232958A6' stroke-width='2.2'/><path d='M11 11L15.5 15.5' stroke='%232958A6' stroke-width='2.4' stroke-linecap='round'/></svg>");
	pointer-events: none;
}

/* Switcher langue (dropdown compact) */
.uect-lang {
	position: relative;
	display: flex; align-items: center; gap: 9px;
	border: 1px solid var(--uect-line);
	padding: 7px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--uect-ink);
	cursor: default;
}
.uect-lang__flag {
	width: 22px; height: 15px;
	display: block;
	flex: 0 0 22px;
	box-shadow: 0 0 0 1px rgba(14,30,51,.18);
}
.uect-lang__flag--fr { background: linear-gradient(90deg,#002395 33.3%,#FFFFFF 33.3% 66.6%,#ED2939 66.6%); }
.uect-lang__flag--en {
	/* Union Jack en SVG data-URI — plus fiable qu un empilement de linear-gradients calc() */
	background-color: #012169;
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2030%27%3E%3Cclipath%20id%3D%27a%27%3E%3Cpath%20d%3D%27M30%2015h30v15zv15H0zH0V0zV0h30z%27%2F%3E%3C%2Fclipath%3E%3Cpath%20d%3D%27M0%2C0v30l60-30v30zM60%2C0V30L0-30v30z%27%20stroke%3D%27%23fff%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M0%2C0v30l60-30v30zM60%2C0V30L0-30v30z%27%20clip-path%3D%27url(%23a)%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M30%2C0v30M0%2C15h60z%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M30%2C0v30M0%2C15h60z%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%276%27%2F%3E%3C%2Fsvg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.uect-lang__flag--es { background: linear-gradient(#AA151B 25%,#F1BF00 25% 75%,#AA151B 75%); }
.uect-lang__flag--nl { background: linear-gradient(#AE1C28 33.3%,#FFFFFF 33.3% 66.6%,#21468B 66.6%); }
.uect-lang__flag--pl { background: linear-gradient(#FFFFFF 50%,#DC143C 50%); }
.uect-lang__flag--pt { background: linear-gradient(90deg,#006600 40%,#FF0000 40%); }
.uect-lang__flag--uk { background: linear-gradient(#0057B7 50%,#FFD700 50%); }

.uect-dropdown--lang {
	left: auto; right: -1px;
	min-width: 190px;
	padding: 6px 0;
	font-family: var(--uect-font-sans);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
}
.uect-dropdown--lang li a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	color: var(--uect-ink);
	white-space: nowrap;
}
.uect-dropdown--lang li a:hover { background: var(--uect-cream); }
.uect-dropdown--lang li.is-active a { background: var(--uect-cream); font-weight: 700; }

/* Mobile toggle */
.uect-mainbar__toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--uect-line);
	padding: 8px 10px;
	color: var(--uect-ink);
}
.uect-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.uect-burger span { display: block; width: 20px; height: 2px; background: var(--uect-ink); }

/* ===========================================================
   Main / breadcrumb (pages intérieures)
   =========================================================== */
.uect-breadcrumb {
	background: var(--uect-cream);
	border-bottom: 1px solid var(--uect-line);
	padding: 14px 0;
	font-size: 14px;
	color: var(--uect-ink-3);
}

/* Hero bleu générique pour les vues sans layout custom (recherche, contact…) */
.uect-page-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--uect-blue);
	color: var(--uect-white);
	padding: 28px 0 30px;
	box-sizing: border-box;
}
.uect-page-hero__inner {
	max-width: var(--uect-container);
	margin: 0 auto;
	padding: 0 var(--uect-gutter-x);
	display: flex;
	flex-direction: column;
	gap: 22px;
	box-sizing: border-box;
}
.uect-page-hero__title {
	margin: 0;
	font-family: var(--uect-font-cond);
	font-weight: 700;
	font-size: clamp(48px, 8vw, 104px);
	line-height: .9;
	letter-spacing: -.005em;
	color: var(--uect-white);
	text-transform: uppercase;
}
@media (max-width: 720px) {
	.uect-page-hero { padding: 22px 0 24px; }
	.uect-page-hero__title { font-size: 52px; }
}

/* Fil d'Ariane (mod_breadcrumbs override) rendu à l'intérieur du bandeau
   bleu des vues détail. Design blanc/jaune. */
.uect-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 15px;
	color: rgba(255,255,255,.7);
	font-family: var(--uect-font-sans);
}
.uect-breadcrumbs__item {
	color: var(--uect-white);
	font-weight: 600;
	text-decoration: none;
}
a.uect-breadcrumbs__item:hover { text-decoration: underline; }
.uect-breadcrumbs__sep { color: rgba(255,255,255,.55); }
.uect-breadcrumbs__current {
	font-weight: 600;
	color: var(--uect-yellow);
}
.uect-main {
	padding: 40px var(--uect-gutter-x);
	display: block;
}
.uect-body.is-home .uect-main {
	padding: 0;
	max-width: none;
}
.uect-body.is-home #system-message-container:empty { display: none; }

/* ===========================================================
   Pagination Joomla (com_finder, com_content, tag, ...).
   Rendu global horizontal ; les icon-font Joomla ne sont pas
   chargées, on injecte des glyphes Unicode.
   =========================================================== */
.pagination__wrapper {
	margin: 32px 0 8px;
	display: flex;
	justify-content: center;
}
.pagination {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 6px;
	padding: 0;
	margin: 0;
}
.pagination .page-item { display: block; }
.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	background: var(--uect-white);
	color: var(--uect-ink);
	text-decoration: none;
	border: 1px solid var(--uect-line);
	font-family: var(--uect-font-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	box-sizing: border-box;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pagination .active .page-link,
.pagination a.page-link:hover {
	background: var(--uect-blue);
	color: var(--uect-white);
	border-color: var(--uect-blue);
}
.pagination .disabled .page-link {
	color: #B0B7C3;
	background: #F5F7FA;
	cursor: default;
}
.pagination .icon-angle-double-left,
.pagination .icon-angle-left,
.pagination .icon-angle-right,
.pagination .icon-angle-double-right {
	display: inline-block;
	font-family: var(--uect-font-sans);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}
.pagination .icon-angle-double-left::before  { content: "«"; }
.pagination .icon-angle-left::before         { content: "‹"; }
.pagination .icon-angle-right::before        { content: "›"; }
.pagination .icon-angle-double-right::before { content: "»"; }

/* ===========================================================
   Footer bleu foncé
   =========================================================== */
.uect-footer {
	background: var(--uect-blue-navy2);
	color: rgba(255,255,255,.78);
	padding: 64px 0 34px;
}
.uect-footer__inner {
	max-width: var(--uect-container);
	margin: 0 auto;
	padding: 0 var(--uect-gutter-x);
	display: flex;
	flex-direction: column;
	gap: 44px;
}
.uect-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
}
.uect-footer__brand {
	display: flex; flex-direction: column; gap: 14px;
}
.uect-footer__brand-logo {
	display: inline-flex;
	background: var(--uect-white);
	padding: 4px;
	align-self: flex-start;
}
.uect-footer__brand-logo img { height: 84px; width: auto; display: block; }
.uect-footer__brand-address { font-size: 16px; line-height: 1.7; }
.uect-footer__contact-link {
	align-self: flex-start;
	font-size: 16px;
	color: var(--uect-white);
	font-weight: 600;
	border-bottom: 1px solid rgba(255,255,255,.45);
}
.uect-footer__col-title {
	font-weight: 700;
	color: var(--uect-white);
	margin-bottom: 4px;
	font-size: 16px;
}
.uect-footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 16px; }
.uect-footer__col a { color: rgba(255,255,255,.78); }
.uect-footer__col a:hover { color: var(--uect-white); }
.uect-footer__col--lang { gap: 14px; }
.uect-footer__col-text { font-size: 15px; line-height: 1.6; }
.uect-footer__newsletter {
	display: flex; flex-direction: column; gap: 10px;
	margin-top: 4px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.18);
}
.uect-footer__newsletter-intro { font-size: 15px; line-height: 1.55; }
.uect-footer__newsletter-btn {
	align-self: flex-start;
	background: var(--uect-yellow);
	color: var(--uect-ink) !important;
	font-size: 15px; font-weight: 700;
	padding: 12px 18px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.uect-footer__newsletter-btn:hover { background: var(--uect-yellow-2); color: var(--uect-ink) !important; }
.uect-footer__newsletter-btn svg { display: block; flex: none; color: var(--uect-ink); }
@media (max-width: 640px) {
	.uect-footer__newsletter-btn { align-self: stretch; justify-content: center; padding: 14px 18px; }
}
.uect-footer__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.16);
	font-size: 15px;
}
.uect-footer__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.uect-footer__legal ul,
.uect-footer__legal ol {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.uect-footer__legal li { display: block; }
.uect-footer__legal a { color: inherit; }
.uect-footer__copyright { display: flex; align-items: center; gap: 18px; }

/* ===========================================================
   Erreur / Offline
   =========================================================== */
.uect-error, .uect-offline {
	min-height: 60vh;
	display: grid;
	place-items: center;
	padding: 64px var(--uect-gutter-x);
	background: var(--uect-cream);
	color: var(--uect-ink);
}
.uect-error__inner, .uect-offline__inner { max-width: 560px; text-align: center; }
.uect-error__code {
	font-family: var(--uect-font-cond);
	font-weight: 700;
	font-size: 96px;
	color: var(--uect-blue);
	line-height: 1;
}
.uect-error__title { font-size: 32px; margin: 16px 0 8px; }
.uect-error__intro { color: var(--uect-ink-3); margin-bottom: 24px; }
.uect-error__back {
	display: inline-block;
	padding: 12px 24px;
	background: var(--uect-blue);
	color: var(--uect-white);
	font-weight: 700;
}
.uect-error__back:hover { background: var(--uect-yellow); color: var(--uect-ink); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1200px) {
	.uect-mainmenu__list { gap: 12px; font-size: 15px; }
}
/* Drawer mobile — masqué par défaut (desktop) */
.uect-mobile-drawer { display: none; }
.uect-mobile-drawer__cta { padding: 16px 18px 20px; }
.uect-btn-member--full {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 15px 20px;
	font-size: 16px;
}
.uect-mainbar__toggle { display: none; }

@media (max-width: 1024px) {
	:root { --uect-gutter-x: 20px; }
	.uect-header__inner { height: 68px; padding: 0 14px; gap: 10px; }
	.uect-brand img { height: 56px; }

	/* Menu principal + Devenir membre : cachés (déplacés dans le drawer) */
	.uect-mainmenu, .uect-btn-member { display: none; }

	/* 3 boutons carrés à droite : recherche, langue, burger */
	.uect-header__actions { gap: 8px; }
	.uect-header__search {
		width: 42px; height: 42px; padding: 0;
		border: 1px solid var(--uect-line);
		display: grid; place-items: center;
	}
	.uect-header__search-toggle {
		width: 42px; height: 42px;
		padding: 0; border: 0;
		display: grid; place-items: center;
		gap: 0;
	}
	.uect-header__search-label { display: none; }
	.uect-header__search.is-open {
		position: absolute;
		top: 100%; left: 0; right: 0;
		width: auto; height: auto;
		background: var(--uect-light-1);
		border: 0;
		border-bottom: 1px solid var(--uect-line);
		padding: 14px 20px;
		z-index: 60;
	}
	.uect-header__search.is-open .uect-header__search-input {
		width: 100%;
		padding: 13px 14px 13px 40px;
		background: var(--uect-white);
	}
	.uect-header__search.is-open::before { left: 34px; }

	.uect-lang {
		height: 42px;
		padding: 0 10px;
		font-size: 14px;
	}
	.uect-lang__code-txt { display: none; }
	.uect-lang .uect-dropdown--lang {
		position: absolute;
		top: 100%; right: 0;
		width: 100%;
		border-radius: 0;
	}

	.uect-mainbar__toggle {
		display: grid; place-items: center;
		width: 46px; height: 46px;
		padding: 0;
		background: var(--uect-blue);
		border: 0;
	}
	.uect-mainbar__toggle .uect-burger span { background: var(--uect-white); width: 22px; height: 3px; }

	/* Drawer menu mobile : accordéon complet sous le header */
	.uect-mobile-drawer {
		display: block;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--uect-white);
		border-bottom: 1px solid var(--uect-line);
		z-index: 50;
		max-height: calc(100vh - 68px);
		overflow-y: auto;
	}
	.uect-mobile-drawer[hidden] { display: none; }
	.uect-mobile-menu__list {
		display: flex; flex-direction: column;
	}
	.uect-mobile-menu__item {
		border-bottom: 1px solid var(--uect-light-2);
	}
	.uect-mobile-menu__item.is-active > .uect-mobile-menu__row,
	.uect-mobile-menu__item.is-active > a {
		background: #F5F8FC;
		color: var(--uect-blue);
	}
	.uect-mobile-menu__row,
	.uect-mobile-menu__item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 17px 18px;
		font-size: 17px;
		font-weight: 600;
		color: var(--uect-ink);
		background: transparent;
		border: 0;
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	.uect-mobile-menu__row--sub {
		padding: 0;
	}
	.uect-mobile-menu__row--sub > a {
		flex: 1 1 auto;
		display: block;
		padding: 17px 18px;
		font: inherit;
		color: inherit;
	}
	.uect-mobile-menu__sub-toggle {
		flex: 0 0 auto;
		width: 54px;
		align-self: stretch;
		display: grid;
		place-items: center;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--uect-light-2);
		cursor: pointer;
		padding: 0;
	}
	.uect-mobile-menu__sub-toggle .uect-caret {
		font-size: 17px;
		color: var(--uect-blue);
		transition: transform .2s ease;
	}
	.uect-mobile-menu__sub-toggle[aria-expanded="true"] .uect-caret {
		transform: rotate(180deg);
	}
	.uect-mobile-menu__sub {
		background: var(--uect-cream);
		padding: 4px 0 10px;
	}
	.uect-mobile-menu__sub[hidden] { display: none; }

	/* Niveaux de profondeur — indentation croissante */
	.uect-mobile-menu__item--l1 > .uect-mobile-menu__row,
	.uect-mobile-menu__item--l1 > .uect-mobile-menu__row--sub > a {
		padding-left: 34px;
		font-size: 15px;
		font-weight: 500;
		color: var(--uect-ink-2);
	}
	.uect-mobile-menu__item--l2 > .uect-mobile-menu__row,
	.uect-mobile-menu__item--l2 > .uect-mobile-menu__row--sub > a {
		padding-left: 50px;
		font-size: 14px;
		font-weight: 500;
		color: var(--uect-ink-3);
	}
	.uect-mobile-menu__item--l1 .uect-mobile-menu__sub,
	.uect-mobile-menu__item--l2 .uect-mobile-menu__sub {
		background: rgba(0,0,0,0.02);
	}

	.uect-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* ===========================================================
   Connexion Joomla (com_users/login) — même habillage que l'étape
   connexion du tunnel d'inscription (classes uect-auth-*, chargées
   depuis la feuille com_uect.tunnel par l'override). Les champs restent
   rendus par le moteur de formulaire Joomla (renderFieldset) : on ne
   restyle donc pas des classes maison mais la structure control-group/
   control-label/controls + input.form-control qu'il génère lui-même.
   =========================================================== */
.uect-users-login .uect-auth-card { max-width: 480px; }

.uect-users-login .control-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.uect-users-login .control-label label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--uect-ink-2, #333D4F);
}
.uect-users-login .controls input.form-control {
	width: 100%;
	padding: .75rem .95rem;
	border: 1px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA);
	color: var(--uect-ink, #0E1E33);
	font: inherit;
	font-size: 1rem;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.uect-users-login .controls input.form-control:focus {
	border-color: var(--uect-blue, #2958A6);
	box-shadow: 0 0 0 3px rgba(41,88,166,.12);
	background: #fff;
}

.uect-users-login .uect-auth-remember {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .1rem 0 1.1rem;
	font-size: .9rem;
	color: var(--uect-ink-3, #4A5468);
	cursor: pointer;
}
.uect-users-login .uect-auth-remember input { width: 1.05rem; height: 1.05rem; accent-color: var(--uect-blue, #2958A6); }

.uect-users-login .uect-auth-description { margin: 0 0 1.25rem; font-size: .9rem; color: var(--uect-ink-3, #4A5468); line-height: 1.55; }
.uect-users-login .uect-auth-description img { max-width: 100%; height: auto; }

.uect-users-login .uect-auth-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: 1.35rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--uect-line, #D5DBE4);
}
.uect-users-login .uect-auth-link {
	font-size: .88rem;
	font-weight: 600;
	color: var(--uect-blue, #2958A6);
	text-decoration: none;
}
.uect-users-login .uect-auth-link:hover { text-decoration: underline; }

/* Connexion avec clé d'accès (plugin webauthn) : masquée, on ne propose que
   identifiant/mot de passe sur cette page. */
.uect-users-login [data-webauthn-form] { display: none; }

/* Bouton natif Joomla « afficher/masquer le mot de passe » (icon-eye du
   passwordview.js core) — même traitement visuel que .uect-auth-pass-toggle
   du tunnel d'inscription (icônes en masque SVG, positionnées dans le champ). */
.uect-users-login .password-group { margin: 0; }
.uect-users-login .input-group { position: relative; }
.uect-users-login .input-group input.form-control { padding-right: 2.9rem; }
.uect-users-login .input-password-toggle {
	position: absolute;
	top: 50%;
	right: .5rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--uect-ink-3, #4A5468);
}
.uect-users-login .input-password-toggle:hover { color: var(--uect-blue, #2958A6); }
.uect-users-login .input-password-toggle:focus-visible {
	outline: 2px solid var(--uect-blue, #2958A6);
	outline-offset: 2px;
	border-radius: 4px;
}
.uect-users-login .input-password-toggle .icon-eye,
.uect-users-login .input-password-toggle .icon-eye-slash {
	width: 18px;
	height: 18px;
	display: block;
	background: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}
.uect-users-login .input-password-toggle .icon-eye {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12' cy='12' r='3.2' fill='none' stroke='%23000' stroke-width='2'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12' cy='12' r='3.2' fill='none' stroke='%23000' stroke-width='2'/></svg>");
}
.uect-users-login .input-password-toggle .icon-eye-slash {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3l18 18M10.6 10.6a3 3 0 0 0 4.24 4.24M9.9 5.2A10.9 10.9 0 0 1 12 5c6.5 0 10.5 7 10.5 7a19.4 19.4 0 0 1-3.4 4.1M6.2 6.2A19.3 19.3 0 0 0 1.5 12S5.5 19 12 19a10.8 10.8 0 0 0 4.9-1.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3l18 18M10.6 10.6a3 3 0 0 0 4.24 4.24M9.9 5.2A10.9 10.9 0 0 1 12 5c6.5 0 10.5 7 10.5 7a19.4 19.4 0 0 1-3.4 4.1M6.2 6.2A19.3 19.3 0 0 0 1.5 12S5.5 19 12 19a10.8 10.8 0 0 0 4.9-1.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.uect-users-login .uect-auth-btn--ghost { width: 100%; justify-content: center; margin-bottom: .9rem; }

@media (max-width: 640px) {
	.uect-footer__grid { grid-template-columns: 1fr; }
	.uect-footer__meta { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Bulle d'aide (bootstrap.popover) : étape participant, « devenir licencié ».
   La feuille Bootstrap complète n'est pas chargée, d'où ces styles minimaux. */
.uect-info-licence {
	display: inline-flex;
	align-items: center;
	padding: 0;
	margin-top: .35rem;
	color: var(--uect-blue);
	background: none;
	border: 0;
	vertical-align: -2px;
	cursor: pointer;
}
.uect-info-licence:hover,
.uect-info-licence:focus-visible { color: var(--uect-blue-dark); }

.popover {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1070;
	display: block;
	max-width: 240px;
	font-family: var(--uect-font-sans);
	font-size: .8125rem;
	line-height: 1.4;
	text-align: center;
	color: var(--uect-white);
	background: var(--uect-blue-navy);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(14, 30, 51, .25);
}
.popover .popover-header:empty { display: none; }
.popover .popover-body { padding: .5rem .75rem; }
.popover .popover-body a { color: var(--uect-yellow-2); text-decoration: underline; }
.popover .popover-arrow {
	position: absolute;
	display: block;
	width: 12px;
	height: 6px;
}
.popover .popover-arrow::before {
	position: absolute;
	content: "";
	border: 6px solid transparent;
}
.bs-popover-top > .popover-arrow,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow { bottom: -6px; }
.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
	top: 0;
	border-bottom-width: 0;
	border-top-color: var(--uect-blue-navy);
}
.bs-popover-bottom > .popover-arrow,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow { top: -6px; }
.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
	bottom: 0;
	border-top-width: 0;
	border-bottom-color: var(--uect-blue-navy);
}
/* Flèche de la bulle « devenir licencié » recalée de 6px vers la gauche
   (sa position, calculée par Popper, est appliquée en transform inline). */
.uect-popover-licence .popover-arrow { margin-left: -6px; }