/******************************************************
 * USER.CSS — POLYTECH MONTPELLIER
 * Template : Cassiopeia Extended (Joomla 6)
 * Version 2.0 — octobre 2026 : fichier nettoyé
 *   - doublons supprimés, blocs « à coller à la fin » intégrés
 *     dans leur section ;
 *   - chemins d'images relatifs (fonctionnent avec ou sans /joomla_v6) ;
 *   - footer aux couleurs du bandeau d'accueil.
 * Version 2.1 — octobre 2026 : adaptation à Joomla 6.2
 *   - sous-niveaux du menu burger (intitulés de groupe
 *     placés désormais dans le bouton .mod-menu__toggle-sub) ;
 *   - mega menu : structure inchangée, grâce à js/user.js v2.1.
 * Version 2.2 — novembre 2026 :
 *   - mega menu Formation : TOEIC placé sous Recherche (colonne droite) ;
 *   - sous-menu Engagement responsable : intitulés 3 et 4 sur deux
 *     lignes pour rester dans l'écran (iPad paysage).
 * Chemins des images : ce fichier est dans
 *   media/templates/site/cassiopeia_extended/css/
 *   donc « ../../../../../images/… » = dossier images/ du site.
 ******************************************************/

/******************************************************
 * TYPOGRAPHIE - POPPINS
 ******************************************************/
:root {
	--font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-headings: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--color-primary: #003366;
	--color-secondary: #007DB4;
	--color-dark: #001B4C;
	--color-midark: #CCCCCC;
	--container-max-width: 1320px;

	/* Variables Cassiopeia (déplacées depuis le style inline de index.php) */
	--hue: 214;
	--template-bg-light: #f0f4fb;
	--template-text-dark: #495057;
	--template-text-light: #ffffff;
	--template-link-color: var(--link-color);
	--template-special-color: #001B4C;
}

body {
	font-family: var(--font-family-base);
	font-weight: 400;
	line-height: 1.6;
	font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headings);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-dark);
}

/******************************************************
 * HEADER - CONTAINER 1320PX
 ******************************************************/
#site-header {
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #eee;
}

/******************************************************
 * FOOTER — bleu du bandeau d'accueil (dégradé léger).
 * Structure HTML (module Custom, position footer) :
 * .footer-grid > .footer-col-brand + 3 × nav.footer-col
 * puis .footer-bottom
 ******************************************************/
.container-footer,
footer.container-footer {
	position: relative;
	color: #fff;
	border-top: 4px solid var(--color-secondary);
	/* Bleu du bandeau d'accueil (#003366), centre légèrement plus clair.
	   background-image remplace le dégradé violet par défaut de Cassiopeia. */
	background-color: #003366;
	background-image: linear-gradient(to right, #003366 0%, #164a7a 50%, #003366 100%);
}

.container-footer p,
.container-footer span,
.container-footer li { color: rgba(255,255,255,0.82); }

/* ── Largeur alignée sur le reste du site ── */
.container-footer .grid-child {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 32px;
}

/* ── Largeur forcée à 100%
   (Cassiopeia contraint .mod-custom / .grid-child à une largeur
   "shrink-to-fit" ailleurs — on l'écrase explicitement ici pour
   que le footer suive toujours la largeur du site.) ── */
.container-footer .grid-child,
.container-footer .mod-custom {
	width: 100%;
	box-sizing: border-box;
}

/* ── Grille : marque (plus large) + 3 colonnes de liens ── */
.footer-grid {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 56px 0 44px;
}

/* ── Colonne marque ── */
.footer-col-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-marque {
	margin: 0;
	font-size: 1.25rem; font-weight: 700; letter-spacing: .3px;
	color: #fff !important;
}
.footer-baseline { margin: 0; font-size: .82rem; color: rgba(255,255,255,0.75) !important; }
.footer-adresse {
	margin: 12px 0 16px;
	font-style: normal; font-size: .8rem; line-height: 1.6;
	color: rgba(255,255,255,0.75);
	padding-left: 12px;
	border-left: 2px solid var(--color-secondary);
}

/* ── Titres de colonnes (même signature que les titres du site) ── */
.footer-titre {
	margin: 0 0 16px;
	font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 1px;
	color: #fff;
}
.footer-titre::after {
	content: ""; display: block;
	width: 32px; height: 2px;
	background: var(--color-secondary);
	margin-top: 8px; border-radius: 2px;
}

/* ── Liens ── */
.footer-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-liens a {
	font-size: .85rem;
	color: rgba(255,255,255,0.82);
	text-decoration: none;
	transition: color .2s;
}
.footer-liens a::before { content: '›'; margin-right: 6px; color: var(--color-secondary); font-weight: 700; }
.footer-liens a:hover,
.footer-liens a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-liens a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.footer-liens a[target="_blank"]::after { content: ' ↗'; font-size: .75em; opacity: .7; }

/* ── Bas de page (copyright) ── */
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	width: 100%; box-sizing: border-box;
	padding: 18px 0 24px;
	display: flex; align-items: center; justify-content: center;
}
.footer-copyright { font-size: .76rem; color: rgba(255,255,255,0.65) !important; margin: 0; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
	.container-footer .grid-child { padding: 0 24px; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
	.container-footer .grid-child { padding: 0 20px; }
}
@media (max-width: 576px) {
	.footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 32px; }
}
@media (max-width: 480px) {
	.container-footer .grid-child { padding: 0 16px; }
}

/******************************************************
 * TOPBAR DESKTOP
 ******************************************************/
.topbar {
	background: #fff;
	height: 95px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-container {
	max-width: var(--container-max-width);
	width: 100%;
	margin: 0 auto;
	padding: 0 32px;
	height: 100%;
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	position: relative;
}

.topbar-left {
	position: absolute;
	left: 0;
	display: flex;
	align-items: center;
}

.topbar-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
}

.topbar-right {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
}

.header-logo {
	max-height: 64px;
	height: 64px;
	width: auto;
	object-fit: contain;
}

/* Réseaux sociaux */
.social-icons {
	display: flex;
	gap: 16px;
}

.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-midark);
	transition: color 0.2s;
}

.social-icons a:hover {
	color: var(--color-secondary);
}

.social-icons svg {
	width: 20px;
	height: 20px;
}

/* Icônes des réseaux sociaux : dessinées en CSS à partir des fichiers
   images/structure_site/logos/reseaux_sociaux/*.png (réduits à 64 px et intégrés
   ici : aucune requête en plus). L'icône sert de pochoir (mask) :
   sa couleur se règle avec background-color. Le module ne contient que des
   liens vides avec un aria-label : rien que l'éditeur JCE puisse supprimer. */
.social-icons a::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-color: var(--color-midark);   /* bleu cyan #007DB4 */
	-webkit-mask: var(--icone) center / contain no-repeat;
	mask: var(--icone) center / contain no-repeat;
	transition: background-color 0.2s;
}
.social-icons a:hover::before,
.social-icons a:focus-visible::before {
	background-color: var(--color-primary);     /* bleu foncé au survol */
}
.social-icons a[href*="facebook"] { --icone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAE0UlEQVR42s3Zy49cxRUH4K/qXo9BPMTYjS0UZSykgGHMAmFAihKEFDkL9kTZxXgB4pFlLGWZRawEI8wONvAHmAWJiJJFhAISD4nHiATF2AikCC+MxLQnCvjFdN9bWfTtdrdn8NzqaWOq1Oqr6tt1nnXqnN8J2oyg0G+e73Cve+yx4GbXm8OqM7pOOm7JB45LoFQ1T5scQQEKDzhsyTnpMvO8Dz3rQWXzn7BZ8gPiOx300YhIpa9Sq0crtbpZHa7822/dMrbDVCMK2OGQLxsyPdUY2fVmrdJr3un6o50I4jTkB0p8yilJ0huTrs2s9CTJF349tlum3fd4vSFeZxG/qI0BE2+4K88fBio74OtNEJ9k4msHRiZtQT7giCTpb4r4cA52OTLae0PH2+LoDGRfq4ejyo1YCKLSXySrMyM+nKuSV5WXM8TA9V6+IuSHLLx8OXcs8dwVIz9k4ci3HcoCj1xR8kMW9q8XHyN2O6s/levVY3OjN/vO2t1QnLB+9PYUB6/OjpF9yTvipCcUeEJqIlfuCU/OWWlmGwF6kifHzRAE2y2rppBl2dMetGCbeR3zfq63oSEqla7OxZhQ4FC2/JXkb35wiS9td0ba0BN6kj8MdRDQsdLCgS6V/m0ltihEQVAIfuhsCwZqtf+6WRCiAvvNqzKylyRY9Zi+sskRokLROvkIKjc5ICkISh+rs+zfl/x13Wyn43wLDSSV2idKoZTc7051VtaS8PeREwXJw+5zrcqia6QWuoxqt/uxN+GZbAfsSx5qNFDgd1MEr57aEUrRvkvjUgv++ap5rvFLlb5iLIdul3H+TFH6kTubs5A36pH6C6UiO/WMuMNtpfttzfKA1Hwm1wZTlii1re4r7V1nw8sfQKPPxYv8oupTaxYS9pYWs7gOKucRRqUa/M9XalFyXUYCHrBY2tWagSQ4bZ8vFJIuKlDZp5BElVv8Q6elFgJ2lTpZ6u/65zq/nB49rbiQZYZOdH2WCQqlsCaxDKO7YMGO1vsFXFeayzo8Q29Pa9xp8L3DXIb8zMXs01818lpHB+wcRYiWAkWrWV57gxuby2atZvq4O+tQsxp0bc9S2n+sIHrUkihJolcsqAXBoq1ZTn261LU9ywi3uhXc2ARignvXZEZtx3L0eabSarW+eiIQnW3W6qydEk5GxzIZiM1cby1mXWoJx6Klqe7C2cBfLEXv+0acDaCWGVGiC96PPnM80wiTwWd6Bjjhs6j2WmbwmM2o8Zo64s/ZKdksNBDxp0Fm9q4Twnesg1pwwnuDwqTvpUwGwqY1UAteHCSyQcguzWrJT4QG8Sl92tSKOXjCig5ClERdLwhNftN2fCM1cEY/23yV4HldxUCP+eV5JfmFeR3bzFtwqlU5Nl6eL9s2fqlPA1CsjkCJM9k1UfL4ZGU5gGjemhk2ulFZ99alEM00IFV7YKoFSDU0w/7vBKb71be1McoGpL5KQOWwsj169aDaIVj96tUCq4cxobxicP2WNh2DwSvPXq2GxfegZTP7ptXr9kzTxJxN2+6Up6Zp2002Ln8/ZePyS4eaWjlOnzgMW7e/8a+s1u1HDtq52dbtZPM6+qnDPtigeX3OksMeaGQu2hy6/Pb9Xnst2qXjBnOSnjOWnXTMkiUnRj7Uqn3/f9wo6oQj6n6xAAAAAElFTkSuQmCC"); }
.social-icons a[href*="instagram"] { --icone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAGkklEQVR42sXZ3Y9cZRkA8N85M7O7bU1MkXb7JY012FokEUUDiaUJcCMGKBITU1vEC7QiF/WGIvdSSKgx4p/QRPAGu4pJMQRiK+0FthgKW0ykaXG3QL8s3aXsnJnzejHvzM7MzszO7rb0vJlkcs77Ps/zPt8fiX6eREEl/tvgVt9wkxtc73MGUDbhrFNG/dMbRgVQVI3/FvgkChHgZs864rLQY1121B6bFUFBslD0NeQr7XKsgaSqoiqXN97k8vi2/uaYJ6xsgjCvJ5Vg2G5nIppMtQltp5WryuKes542jEQ6H/Q1Jj7mtCDImm7Xz6rKBMG4x5qgzVHuG70akedzQj7NjRoRr7lpbvpQY9nDPl4A8lYiLvlJQ6R9oE+wRxBUFoS8vmpQ9jRgz4q+5IUrcPeZfHhecTYSEqmSPwvKVwx5fZUFI4q9BJEo4o9XBX2dhBd6qWMxyr7cw8YrKiqyLqv2tbuvKAt+080oC3hIiKYzU5GyOd0266LAZcGPm/1j0vB6ufWOGOwgoyBIUTXmAxdNmmqAz6N5JRJFg5b4vBVWKyDvoHJBbsot/i2Vtzqe1MGOhlfzgAfssMFQX35kyAY7/L3pdLtR/kPaqgkFPNqR/RXBfz2onWO9LKn+POj9jlfKBI/WxZDE3xcct3QGy3KpY+7xvpIsgl9sQEkh7k0QopiqMmWfxCygJPNFf/U1eVswynHBBufiWQU83eH+VblxqzGIFXYa8bYx51w0YdKkT+KaNGnCReeMeds+O62Ip1Ybl88QRCbYXedBKrHchZb4Pi39+zGEbT6akxV8YHs8eX8HTcjlLlhWizpF7Opw/4rgdQxga8O0qjEV6b6C8zFr2hpPv95BEzLB4zWPkCh6twubHpFIDbso72gfleh+qk1C22W5r/qb4IJhqcQjXcT7rmJN5zZ1ZFKQuRH8siN/8rb9FRXB/qho60wKdoIbZRFiu4C/UxPAA8IMTQ0SY05KBHcLLdYRBAX8x1vGscrNvqygLDWOxcrOmLLI3X4rccqYtW0wam7qAQcp+FcHDlQEh2N8HG35XrvJPncabAAbdKd9guAjG8GvBMFo9KuHO2hBVfCmAht82iWJqLFzsbEmBuaCCduaktbppHObS4Lz9tofEYxZDPZ3ICAXfGo927s6zBfBUucaBOSqJmyK2s2QddZFBz2ATS41GVpwzlLwYlcnvz11a90ftekAU9GjlVo8408dMKRstd95x6hRo56zRtmQA36GsmrkTf3sVFcc3+TljhzIBHtjUTIROVARvBQ93G3GW/aPuy1+eSnurAmrVpzs7RhnqoKXU2u7hpjQlKTW48YzEhWrjFjZBDKz0ohVKhLPtMBLmiB1Cls3pK7vGtdCS3TLpd5zSKLqSctkSjEPSJRklnlSVeKQE41Yn/QkAJallszCgfrXHG/KBItsiZ6gOaAHWywSZI7G3TMhzeTAkjTq8+wcgHEEqwzPCNyJxLBVAk631Ri9ODCQusZPqjxLbtNM/Sokxn0otN2qFoLHJUTNr7/tnUeVU5M9ZTRNQoqvK0lc9ieJasveqsQ+lyVKbom7zZLIBUykzvbJgVRundsFBU85o9RUvGVKzvi1guB2X2qEttk5cDZ1chYOTDM7xNSlaNx9Tis1EvKS0+5zWlHwRAu8MAsHTqVGuxJQjMzNG6ZWdY+tpgw57Fuec0JZ2Qm/922HDZmy1XdVGyaaR0EVuxLwztyD0aQ7GsFosC0Y3WGyUZj1GYzq4Ti/IuF4om1nX+F4fgnJiLtaEpK7jDR9rd+vj4SkqOoVN89IyRKsMCCTe8/6Ji1JBMG97m1LydprwSB4Ty4xaGUHRcylXqnpyKaOWjD3pHRmQG9OSkPnpLS/tPx/fablrQResLxnWn68lpYX8fgVK0yqkawg+GE8fah3YdK7NNsyz9LsQz+KGdL3O1pAU2lWKxF3dy1O18y5OB2x03A8tcZp1V7Fab3Evs5x180IIrXy/HtOzaE8n4xnSzJr/aVLeX7eBuenfXABP7/iDYofGOvaoNjR2ke/Gi2aAz1aNAcl9RZNc5PqK45eqybVZ9emywQPdRtjfDaNyj3dpwe1Vu3z165VW4t9RfuuWrN6X+9mdT2TL/rDtWrXTxcTz16rgcXVGdl87OH+RzbTRrnRa1dkaPVqHFpdo7HdL+YztmsdXD41z8HlGbsXMrhsH92+NcfR7S4rFjq6bR1eF/ocXh+xx+bGmaT/4LnQ8f1Jx+czvv8/OC1FMMWkshQAAAAASUVORK5CYII="); }
.social-icons a[href*="linkedin"] { --icone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAFXUlEQVR42s2ZT2xURRzHPzPz2g2IWKEFNaZ4kZJWDGmrByMYE28e9GBivIiYcFB6IpJoDJxo1Bpq4gEvmuhNOCjB6KE2AZOiUVhBFFsMiaFGCLBtjbTQ7r6Z8fBm3+7b7nvdP6/UmWSzmffe/H7z+31/f+b3E9QyBArf/d9CP7300EkHa2gF8sySY5JxspxhHAuAh3b/mhwCBYBiO0NkuYVNmLc5yyGewnPfiGbJB8Q3so/zIRGNj8ZgwhWDcavFld94k/vLdmhoSASwgUGuOzIFdBnZatOgKbh3crzLRkAgGyEfCHEPV7BYCmWnq2VqClgsVxko261OvfdwwhE3dREvSSNg4iSP1IeHQGS7uNkE8SgTN9kVqrQG8gIYxmLxmyJenMEuw+HeSwKvhSMpnH2xHI7gLcWCQOLxFZZ8asSLM4/lOF6SIgLoHV0W8kUWjibB0QM+WDbyRRaG44xSAa8sK/kiCzur+UcJdDGHvwh6Rf/n1+mK4uDoM0eXoxjRvuRUFcMzFf4tHaP8HhlFggJewzrPFSU/zxA76Gc3v6fEQgHL6+VqEAjWcwNdsb1BM8fTIZtrq8qo/qnR5Ggv+QQFDFY5fwHLQSCDQtIKdJNPxT0VsLxTlIEA2pmOxPeSAnqRoagk8HMqMjAYZuhAIKQzv3vRi9yDAJf/lMa/pJNladrYhUWBwGMcUwVePpYXgFZ3fsVqri2yjEZxYLiIFxz6iRh0ayxZPEcc4EBqETLYfXsgkPerALD00jdsdjbwFmbJlKweIBqGA9GeTbBvjWWeMUb4uyZwBalpLWxqLOdQgs2cJ4ONiVCWAi3uWR4VWoReFEd0hYf3a0jCFtjm8TgZTGzeKhwECcFI1WRbo4B/mGSWVXTwIB4k7AtgyPCYRx/E3GAMknMMoTCARNPPXjQKn71MIbBINFvYj+IUH/Id1wBYzcM8zwDtiSxYoA9GYhHgYzkW+eQZB9d57ilb3Ybl7Yj3CMYmfkiMHhrLiKQz8lHlaMUjg+d+14br6/DCZ528xyDSWbV1qV0Ll3mWywhMrHqhE3KxrsXH8nWobwU8F0qg07lmAaxDIRGIinyvBXgpwXMYLFOSNYkSWGpYYNrZRLClKrMDwRf85TBUXQJ3yQi2G/XsEoNlPQ8gy2KKRbLASYhVArTKVEKLoZ9RLjLBr7yIDZEvgGyyBD3yZJoiL7E8xLe0AdDN5/zBWSTGKejPRBXnJbOxfqB2BgZoY8FlvfBqJOWcimXAAnOSXJMK0MAOrLt2KSxbQ61b4HaiBG5ILjclAYElw31hficQtEVg5ydKYFJyoUkVQIZMhEhLHSZ8QZJtyg/E2Xet72Ulp1lAplNQq9OFSeY5LbnEeNNKaNSHTnBJYhhN9FXLNQwwipHAscqr4h0ZEvgyKMn8yERC0Fyu8wsm+Cm4mPh8siIMfIyPCqLXp8yg7iAQLYoZPgO0xCLJ8RGiItMthdryWdJgtdXanoJGcJgcCiudOIbJuQgWHT6GAsb93g7X5zD47qIyWyE7E04fw62qyW6O4UDtnhPIFAc4jB/hVwBtbMVzOb9Pl1sV9HIViUFgWVPhfFfxaCgJTVcVBjz2M40qyTwo0YylePNLLtGMVZZokopU6c6YIlUx6915R8p0L8e1MTxXpF6hQmWxVHtk5Uq1xWL18ZUqVhdTKm/ZyvUttXQMglcOrVTD4n/Qskm/aXWCnkaamOm07a6wp5G2XbRxebDBxuV1BtnQeOMy2rp9g1/qat2eZx8bm23dRpvXkicZ4swSzetbZBliuzuzqsXo6m/f99FHN5to525asRSY5QaTXCBLlokQQzW17/8Dhg809AdmMqwAAAAASUVORK5CYII="); }
.social-icons a[href*="youtube"] { --icone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAFDUlEQVR42s2Zz28bRRTHPzO7dtKI0pakieCQkB6cNIEeCEUIiLjBvZxpmxtQTqRGiF4bhIIa/gQQt1StkILEAVUqh8KlMSkhUUt6gSAFYbvQkh91bO8Mh911bGd31j9jZi6rnd33Y96bN9/3nqCWIbAoes+jvMgLjDPIcZ4gDuTZIss6d0mxyF00ADaO99TkEFgAWEwyS4odtGE+ZokrvI7t/SOaZe8yHyDJcomJQxEHhSq9USjvrf9mhY94uoxCQ0MigH5mSHtsCjhlbIOmwqHgfZPlUwYAgWyEvbuJF9hAoymUaVfLdCig0fzJ+2XU6rT7ODc95qou5nu74QrxPc/V5w/ulk2x2QTzSiE2mSqZtAb2AphDoyk2xdyfLpW5Eu1Ix4sx3wLd9+/DPHaUCAKJzTdo8i1j7s88mgVskyFc17vaFva+CFdN7mgDn7eNvS/CXNihtIDzbWXvi3AuKD5KYIRtii10vWB3LLLNiMexwvqSH1p28KIO5Y/ISk+wgHfRXuRq9yygea/cDAJBLxmcOuN9o9PBIUufGxMkINF8QB+qsVurgVtW0cs0Gulqr+ljjaNgjFKu9JShHFGxWhnMRQQteESCrH/6pyPsrxrwDvN5KqD5ELAFAotfGHE3JHC4ptnlN9JkyPI3D9lkhxxFHMDCppseDnOEY/TRTz/P0l36M5im4D7jOACvog3u56BJk+REHR4iGWaavyLpTrqff2YwgINmheESYQu7YloBb3xBh1g2iFBAMecSXQr9TKHYZhSI77vFRMStGgcSbFWA12rV7mBBghw65KMimm9DEZ1VA6pcMEbXHKOSl+hCheijgeXANYnEQUb4hWC56ohWOmIXpyUThk8A1gJXBdd5G4XCNhhDsxYRDSYkYwZ7SmA9QECBQ4KvuM4IRXSIMTTwR/W9V+VFY5KhCAHSITv0GMUZFvmYLpxAlKO9v00CDEE21AUVml2GAkgI4KcSeFnijUCnlMCgwcUVmgeQMwRgzb9echUsgFMK0l/wTKCGx3kUKoBGk3PPa/hwKET4uY1CcZ4VksT2iVospfXBI97KC1jU8bbkJzZ5uozpecxMAAcb+JJLbASsxyLCVV6yZYwDXXQbtHAQ2NzhTabY2MdKAIfoNsaBbemCgtDNi3MkNI4pYmxxiZf5DgvhXq1V40niRjNkJL8bgyX0hxA4hORrTvMJu1iB9SDh/a0MO7AuWY0QYDBAAI3Ffc5yhnvYIbq7fw1GCLBqk4rw1ETgquYtHCQYj5lgJOLUpCS32UWG7IEATgWuKRwsVKh2vpinQtXTSHLcrgWQnGwYkJxk2whIlpASxY1QOwk0PVxjmDwKXQHJLAMk0yjyDHONHnSIqAq44fKNBqUZkgzXBUpPkCQdSfcVN4moDZbnPFie4Z8SLHcoAjaWB8uPcoxeBmqE5b/yPI6L3C5GJibFNiQm035iAr01p2Y6xA3rT80ekuDBHrqdObDk3Nf/8h6E6UR6nuGp8l06+ALFO5UQzi3R3DqwEs2t6hJNx4tUvhnOHUiZ7mxYWmd7ReoOFSr9Uu1850q1frF6oVPFaj8m2G0r18dq6Ri4n1zpVMPif9CyaX3T6ibjjTQxW9O22+BCI227ysbl5QYbl2lmvKyiiQzUb91e5Oe6WrfLJBlotnVb2byWvMYsixHN6x1SzDLp6WzVcujqb99PMMEYQ/RxmDiaAltkWGeVFCnulXyopvb9f921yu939D4KAAAAAElFTkSuQmCC"); }

/* Recherche trigger */
.search-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-dark);
	transition: color 0.2s;
}

.search-trigger:hover {
	color: var(--color-secondary);
}

.search-trigger svg {
	width: 22px;
	height: 22px;
}

/* Loupe dessinée en CSS (même principe que les réseaux sociaux) :
   le module ne contient qu'un lien vide avec un aria-label. */
.search-trigger::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;   /* suit la couleur du lien (bleu foncé, cyan au survol) */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center / contain no-repeat;
}

/******************************************************
 * TOPBAR MOBILE
 ******************************************************/
.topbar-mobile {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80px;
	padding: 0 16px;
}

.header-logo-mobile {
	max-height: 60px;
	height: auto;
	width: auto;
}

@media (max-width: 1150px) {
	.topbar {
		display: none;
	}
}

@media (min-width: 1150.02px) {
	.topbar-mobile {
		display: none;
	}
}

/******************************************************
 * MENU ROW
 ******************************************************/
.menu-row {
	border-top: 1px solid #eee;
	background: #fff;
	height: 80px;
}

.menu-row .header-container {
	height: 100%;
}

.menu-row-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
}

/******************************************************
 * BURGER MOBILE
 ******************************************************/
.burger {
	display: none;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 8px 12px;
	color: var(--color-dark);
	cursor: pointer;
	transition: background-color 0.2s;
	border-radius: 4px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.burger:hover {
	background-color: #f0f4fb;
}

.burger-text {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
}

.burger-icon {
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 1150px) {
	.burger {
		display: flex;
	}
	.menu-row-inner {
		justify-content: center;
		position: relative;
	}
}

/* ============================================================
   PROFILS VISITEURS — HERO DESKTOP
============================================================ */
.hero-profils {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 50px;
}

.hero-profils-label {
	display: flex;
	align-items: center;
	align-self: stretch;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #003366;
	background: #ffffff;
	padding: 6px 12px;
	border-radius: 4px;
	margin-right: 4px;
	white-space: nowrap;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border: 1.5px solid rgba(255,255,255,0.45);
	border-radius: 4px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.07);
	text-decoration: none !important;
	white-space: nowrap;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.hero-btn:hover {
	background: #007DB4;
	border-color: #007DB4;
	color: #fff !important;
}

.hero-btn::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

.hero-btn:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/* Masquer hero-profils sur mobile */
@media (max-width: 991.98px) {
	.hero-profils {
		display: none;
	}
}

/* ============================================================
   PROFILS VISITEURS — OFFCANVAS MOBILE
============================================================ */
.mobile-profils {
	border-top: 1px solid #eee;
	padding: 20px 0 20px 0;
	margin-bottom: 16px;
}

/******************************************************
 * MENU DESKTOP SIMPLE - HORS FORMATION
 ******************************************************/
.mainmenu {
	flex: 1;
	display: flex;
	justify-content: center;
}

.mainmenu .mod-menu,
.mainmenu .mod-list {
	display: flex !important;
	flex-direction: row !important;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mainmenu .mod-menu > li,
.mainmenu .mod-list > li {
	position: relative;
}

.mainmenu .mod-menu a,
.mainmenu .mod-list a {
	text-decoration: none !important;
	font-weight: 600;
	color: var(--color-dark);
	font-size: 15px;
	padding: 4px 0;
	transition: color 0.2s;
}

.mainmenu .mod-menu a:hover,
.mainmenu .mod-list a:hover {
	color: var(--color-secondary);
}

.mainmenu .mod-menu .active a,
.mainmenu .mod-list .active a,
.mainmenu .mod-menu .current a,
.mainmenu .mod-list .current a {
	color: var(--color-secondary);
	font-weight: 600;
}

.mainmenu .mod-menu__toggle-sub {
	display: none !important;
}

@media (max-width: 1150px) {
	.mainmenu {
		display: none;
	}
}

/******************************************************
 * DROPDOWN SIMPLE (ECOLE, INTERNATIONAL, ENTREPRISES)
 ******************************************************/
.mainmenu > ul > li.parent {
	position: relative;
}

.mainmenu > ul > li.parent > ul.mod-menu__sub {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	min-width: 240px;
	background: #fff;
	padding: 8px 0;
	z-index: 200;
}

.mainmenu > ul > li.parent:hover > ul.mod-menu__sub {
	display: block;
}

.mainmenu > ul > li.parent > ul.mod-menu__sub > li > a {
	display: block;
	padding: 10px 20px;
	color: #003366;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

.mainmenu > ul > li.parent > ul.mod-menu__sub > li > a:hover {
	color: var(--color-secondary);
}

/* Dernier menu (Engagement responsable) : les intitulés 3 et 4, trop
   longs, passent sur deux lignes. Le sous-menu reste ainsi assez étroit
   pour ne pas sortir de l'écran (iPad paysage).
   NB : nth-child = position dans le menu ; si l'ordre change dans Joomla,
   remplacer par les classes li.item-XXX des deux pages concernées. */
.mainmenu > ul > li.parent:last-child > ul.mod-menu__sub > li:nth-child(3) > a,
.mainmenu > ul > li.parent:last-child > ul.mod-menu__sub > li:nth-child(4) > a {
	white-space: normal;
	line-height: 1.35;
}

/******************************************************
 * MEGA MENU FORMATIONS (item-161)
 * Compatible Chrome, Firefox, Safari (Mac + iPad)
 ******************************************************/

.mega-wrapper {
	position: relative;
	width: 100%;
}

.mainmenu > ul > li.item-161 {
	position: static;
}

/* Pont invisible pour maintenir le hover entre menu et dropdown */
.mega-wrapper .mainmenu > ul > li.item-161::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
	pointer-events: auto;
	z-index: 300;
	display: none;
}

.mega-wrapper .mainmenu > ul > li.item-161:hover::after {
	display: block;
}

/* Dropdown container */
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: min(1350px, calc(100vw - 40px));
	padding: 24px 32px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	display: none;
	z-index: 400;
}

/* Grille 2 colonnes — row-gap:0 essentiel pour Safari */
.mega-wrapper .mainmenu > ul > li.item-161:hover > ul.mod-menu__sub {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 0;
	column-gap: 24px;
	align-items: start;
	align-content: start;
}

/* Reset sous-listes */
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub ul {
	display: block !important;
	position: static !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}


/******************************************************
 * PLACEMENT DES COLONNES
 ******************************************************/
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-162 {
	grid-column: 1;
	grid-row: 1 / 9;   /* 8 lignes à droite (avec TOEIC) → 1 / 9 */
	align-self: start;
	width: 100%;
}

.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-169 { grid-column: 2; grid-row: 1; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-170 { grid-column: 2; grid-row: 2; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-173 { grid-column: 2; grid-row: 3; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-176 { grid-column: 2; grid-row: 4; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-195 { grid-column: 2; grid-row: 5; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-177 { grid-column: 2; grid-row: 6; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-247 { grid-column: 2; grid-row: 7; }
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-178 { grid-column: 2; grid-row: 8; } /* TOEIC */

/* Espacement colonne droite — padding-bottom contrôle l'espace entre blocs */
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-169,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-170,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-173,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-176,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-195,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-177,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-247,
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li.item-178 {
	margin: 0 !important;
	padding-top: 0;
	padding-bottom: 6px;
	align-self: start;
}

/******************************************************
 * TITRES NIVEAU 1 (liens directs ex: Cycle Prépa)
 ******************************************************/
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li > a {
	display: block;
	font-weight: 500;
	font-size: 15px;
	color: #007DB4;
	margin-bottom: 2px;
	padding: 0;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: color 0.2s;
}

.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub > li > a:hover {
	color: var(--color-secondary);
}

/******************************************************
 * SÉPARATEURS FISE / FISA
 ******************************************************/
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub ul > li.divider:not(.parent) > .mod-menu__separator {
	display: inline;
	font-weight: 500;
	font-size: 13px;
	color: #003366;
	background-color: #b0cfef;
	margin: 0 0 6px 0;
	padding: 0;
}

/******************************************************
 * GROUPES DE SPÉCIALITÉS
 * Depuis Joomla 6.2, l'intitulé est livré DANS le bouton
 * .mod-menu__toggle-sub ; js/user.js le ressort du bouton
 * avant de retirer celui-ci sur ordinateur, ce qui redonne
 * la structure li.divider.parent > span.mod-menu__separator.
 ******************************************************/
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub ul > li.divider.parent > .mod-menu__separator {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: #003366;
	text-transform: uppercase;
	margin: 0 0 3px 0;
	padding: 0;
	letter-spacing: 0.5px;
}

.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub ul > li.divider.parent > .mod-menu__separator::before {
	content: '▸';
	display: inline-block;
	margin-right: 6px;
	color: #007DB4;
	font-size: 16px;
}

/******************************************************
 * LIENS FINAUX
 ******************************************************/
.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub ul a {
	display: block;
	padding: 0 0 1px 12px;
	color: #003366;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s;
}

.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub ul a:hover {
	color: var(--color-secondary);
}

/******************************************************
 * RESPONSIVE
 ******************************************************/
@media (max-width: 1200px) {
	.mega-wrapper .mainmenu > ul > li.item-161 > ul.mod-menu__sub {
		width: 950px;
		padding: 20px 28px;
	}
}

@media (max-width: 1100px) {
	.mega-wrapper .mainmenu > ul > li.item-161:hover > ul.mod-menu__sub {
		grid-template-columns: 1fr;
	}
}

/******************************************************
 * BANDEAU HERO
 ******************************************************/
.page-banner {
	position: relative;
	width: 100%;
	height: 550px;
	min-height: 550px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 51, 102, 0.95) 0%,
		rgba(0, 51, 102, 0.40) 30%,
		rgba(0, 51, 102, 0.35) 50%,
		rgba(0, 51, 102, 0.40) 70%,
		rgba(0, 51, 102, 0.95) 100%
	);
	z-index: 1;
}

.page-banner-content {
	position: relative;
	z-index: 2;
	text-align: left;
	color: #fff;
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 32px;
}

.page-banner-content h1 {
	display: inline-block;
	background: #ffffff;
	color: var(--color-primary);
	padding: 2px 4px;
	border-radius: 4px;
	font-size: 4rem;
	font-weight: 500;
	margin: 0 0 4px 0;
	letter-spacing: normal;
	line-height: 1.1;
	white-space: nowrap;
}

.page-banner-content h2 {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0;
	color: #ffffff;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.page-banner.banner-accueil {
	background-image: url("../../../../../images/structure_site/photos/photo_accueil_nb.webp");
}

@media (max-width: 991.98px) {
	.page-banner-content h1 {
		font-size: 2.7rem;
		padding: 2px 4px;
		margin: 0 0 4px 0;
	}
	.page-banner-content h2 {
		font-size: 1rem;
	}
}

@media (max-width: 576px) {
	.page-banner {
		height: 30vh;
		min-height: 220px;
	}
	.page-banner-content h1 {
		font-size: 1.5rem;
		padding: 2px 4px;
		margin: 0 0 2px 0;
		white-space: nowrap;
	}
	.page-banner-content h2 {
		font-size: 0.7rem;
		margin-top: 4px;
		white-space: nowrap;
	}
}

/******************************************************
 * CONTENU PRINCIPAL
 ******************************************************/
.grid-child.container-component {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 32px;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Marges alignées sur celles de .banniere-filiere-inner (cadres
   bleu/blanc de la bannière) à chaque taille d'écran, pour que le
   contenu de l'article reste toujours dans l'axe de la bannière —
   et gagne de la largeur sur mobile au passage. */
@media (max-width: 991.98px) {
	.grid-child.container-component { padding: 0 24px; }
}
@media (max-width: 768px) {
	.grid-child.container-component { padding: 0 20px; }
}
@media (max-width: 480px) {
	.grid-child.container-component { padding: 0 16px; }
}

/* Verrou de sécurité : neutralise tout padding/marge que le CSS
   natif de Joomla/Cassiopeia (template.min.css, non modifiable ici)
   pourrait appliquer à ces wrappers intermédiaires entre
   .grid-child.container-component et l'article — structure réelle
   observée : container-component > main > .com-content-article.item-page
   > .com-content-article__body > article.article-page. Sans ce verrou,
   un padding natif y ajouterait un décalage invisible dans ce fichier. */
.grid-child.container-component > main {
	margin: 0 !important;
	padding: 0 !important;
}
.com-content-article.item-page,
.com-content-article__body {
	margin: 0;
	padding: 0;
}

.page-header h1 {
	font-family: var(--font-family-headings);
	font-size: 27px;
	font-weight: 500;
	color: var(--color-dark);
	margin-bottom: 40px;
	padding-bottom: 8px;
	text-transform: none;
	position: relative;
	display: inline-block;
}

.page-header h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 33%;
	height: 3px;
	background-color: var(--color-primary);
}

/******************************************************
 * OVERLAY RECHERCHE
 ******************************************************/
.search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#search-overlay:target {
	display: flex;
}

.overlay-content {
	background: #fff;
	padding: 32px;
	border-radius: 4px;
	width: 92%;
	max-width: 560px;
	position: relative;
}

.close-overlay {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 32px;
	color: #333;
	text-decoration: none;
	line-height: 1;
}

.search-overlay label {
	/* Auparavant "display: none", ce qui retire le label de l'arbre
	   d'accessibilité (lecteurs d'écran) en plus de la vue. Cette
	   technique le garde invisible visuellement mais toujours lisible
	   par les lecteurs d'écran — même principe que .sr-only. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/******************************************************
 * OFFCANVAS MOBILE
 ******************************************************/
.offcanvas {
	position: fixed;
	top: 0;
	left: -100%;
	width: 320px;
	height: 100%;
	background: #fff;
	z-index: 1050;
	transition: left 0.3s ease-in-out;
	overflow-y: auto;
}

.offcanvas.show {
	left: 0;
}

.offcanvas-header {
	padding: 20px 24px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.offcanvas-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0;
}

.btn-close {
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
	padding: 0;
}

.btn-close::before,
.btn-close::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 2px;
	background: var(--color-dark);
}

.btn-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.offcanvas-body {
	padding: 24px;
}

.offcanvas-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1040;
	opacity: 0;
	transition: opacity 0.3s;
}

.offcanvas-backdrop.show {
	opacity: 1;
}

/* Menu mobile */
.mobile-menu .mod-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu .mod-menu > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu .mod-menu > li.parent,
.mobile-menu .mod-menu > li:not(.parent) {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 16px;
	margin-bottom: 4px;
}

.mobile-menu .mod-menu > li > a {
	flex: 1;
	padding: 14px 0;
	color: var(--color-dark);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	text-transform: none !important;
}

.mobile-menu .mod-menu > li.active > a,
.mobile-menu .mod-menu > li.current > a {
	color: var(--color-secondary);
}

.mobile-menu .mod-menu__toggle-sub {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	color: var(--color-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-menu .mod-menu__sub {
	flex: 1 1 100%;
	padding: 0;
	margin: 8px 0 8px 16px;
	list-style: none;
	border-left: 3px solid #e0e0e0;
}

.mobile-menu .mod-menu__sub > li {
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
}

.mobile-menu .mod-menu__sub > li > a {
	display: block;
	padding: 10px 0;
	color: #555;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.mobile-menu .mod-menu__sub > li.active > a {
	color: var(--color-secondary);
}

.mobile-menu .mod-menu__sub .mod-menu__sub {
	margin-left: 12px;
	border-left: 2px solid #e0e0e0;
}

.mobile-menu .mod-menu__sub .mod-menu__sub > li {
	padding-left: 12px;
}

.mobile-menu .mod-menu__sub .mod-menu__sub > li > a {
	font-size: 14px;
	font-weight: 400;
	padding: 8px 0;
}

/******************************************************
 * MENU MOBILE — sous-niveaux (Joomla 6.2)
 * La 6.2 ajoute un bouton déroulant aux sous-niveaux
 * et place les intitulés de groupe dans ce bouton.
 ******************************************************/
/* Sous-niveau avec sous-menu : lien + chevron sur la même ligne */
.mobile-menu .mod-menu__sub > li.parent {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.mobile-menu .mod-menu__sub > li.parent > a {
	flex: 1;
}

/* Intitulés de groupe (Informatique, Génie de l'eau…) :
   le bouton contient le texte, il passe en pleine largeur */
.mobile-menu li.divider.parent > .mod-menu__toggle-sub {
	flex: 1 1 100%;
	width: 100%;
	height: auto;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	font: inherit;
	text-align: left;
}
.mobile-menu li.divider.parent .mod-menu__separator {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-dark);
}

.mobile-search label {
	/* Même correction que .search-overlay label ci-dessus : reste
	   lisible par les lecteurs d'écran plutôt que d'être retiré de
	   l'arbre d'accessibilité. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.mobile-social .social-icons {
	justify-content: flex-start;
	gap: 20px;
}

@media (max-width: 479.98px) {
	.offcanvas {
		width: 280px;
	}
}

/******************************************************
 * OPTIMISATIONS ÉCO-INDEX
 ******************************************************/
* {
	animation-duration: 0s !important;
	animation-delay: 0s !important;
}

.mainmenu a,
button {
	transition: color 0.2s, background-color 0.2s;
}

.mainmenu .mod-menu__sub {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/******************************************************
 * ACCESSIBILITÉ (barre placée dans le footer)
 ******************************************************/
.a11y-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 20px;
	padding: 4px;
}

.a11y-bar button {
	border: none;
	background: transparent;
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.a11y-bar button:hover {
	background: rgba(255,255,255,0.2);
}

.a11y-bar button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* État actif du bouton "Contraste élevé" */
.a11y-bar button[aria-pressed="true"] {
	background: var(--color-secondary);
}

.high-contrast {
	background: #000;
	color: #fff;
}

.high-contrast a {
	color: #0ff;
}

/******************************************************
 * ACTUALITES ET AGENDA
 ******************************************************/

.main-bottom.card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.main-bottom.card > .card-body {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.home-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 40px;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 32px 32px 40px 0;
}

.home-left,
.home-right {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (max-width: 1100px) {
	.home-grid {
		grid-template-columns: 1fr;
		padding: 24px 16px 32px 0;
		gap: 32px;
	}
}

@media (max-width: 768px) {
	.home-grid {
		padding: 16px 12px 24px 0;
		gap: 24px;
	}
}

/******************************************************
 * TITRES DE MODULE
 ******************************************************/
.home-left .moduletable h3,
.home-right .moduletable h3 {
	margin: 0 0 2rem 0;
	font-family: 'Poppins', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #003366;
	position: relative;
}

.home-left .moduletable h3::after,
.home-right .moduletable h3::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background: #003366;
	margin-top: 6px;
	border-radius: 2px;
}

/******************************************************
 * ACTUALITÉS — 2 cards côte à côte
 ******************************************************/
.home-left .mod-articlesnews {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.home-left .mod-articlesnews__item {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 16px;
}

.home-left .newsflash-image { order: 1; }

.home-left .newsflash-image img {
	width: 100%;
	height: auto;
	display: block;
}

.home-left .newsflash-title {
	order: 2;
	margin: 12px 16px 6px 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #003366;
}

.home-left .mod-articlesnews__item > p:not(.readmore) {
	order: 3;
	margin: 0 16px 12px 16px;
	color: #444;
	font-size: 15px;
	line-height: 1.6;
	flex: 1;
}

.home-left .readmore {
	order: 4;
	margin: 0 16px;
}

.home-left .readmore a,
.home-right .readmore a {
	padding: 2px 8px;
	color: #007DB4;
	border-color: #007DB4;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.5px;
}

.home-left .readmore a:hover,
.home-right .readmore a:hover {
	background: #007DB4;
	color: #fff;
}

.home-left .readmore a::after,
.home-right .readmore a::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007DB4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

.home-left .readmore a:hover::after,
.home-right .readmore a:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/******************************************************
 * AGENDA — GRID 2 COLONNES + SÉPARATEURS
 ******************************************************/
.home-right .mod-articlesnews__item {
	display: grid;
	grid-template-columns: 205px 1fr;
	grid-template-rows: auto auto auto;
	gap: 0 16px;
	padding: 16px 0;
	border: none;
	align-items: start;
	border-bottom: 1px solid #ddd;
}

.home-right .mod-articlesnews__item:first-child { padding-top: 0; }

.home-right .mod-articlesnews__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.home-right .mod-articlesnews__item:last-child::after {
	content: "";
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	height: 1px;
	background: #ddd;
	margin-top: 16px;
}

.home-right .newsflash-image {
	grid-column: 1;
	grid-row: 1 / 4;
	width: 100%;
	aspect-ratio: 205 / 115;
	overflow: hidden;
	border-radius: 4px;
}

.home-right .newsflash-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-right .mod-articlesnews__item > p {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

.home-right .mod-articlesnews__item > p strong {
	font-size: 0.95rem;
	font-weight: 600;
	color: #007DB4;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.home-right .newsflash-title {
	grid-column: 2;
	grid-row: 2;
	margin: 6px 0 !important;
	padding: 0 !important;
	font-size: 1.05rem;
	font-weight: 600;
	color: #003366;
	line-height: 1.2;
}

.home-right .mod-articlesnews__item > .readmore {
	grid-column: 2;
	grid-row: 3;
	margin: 8px 0 0 0 !important;
	padding: 0 !important;
}

@media (max-width: 768px) {
	.home-left .mod-articlesnews {
		grid-template-columns: 1fr;
	}
	.home-right .mod-articlesnews__item {
		grid-template-columns: 150px 1fr;
		gap: 0 12px;
	}
	.home-right .newsflash-image {
		aspect-ratio: 150 / 85;
	}
}

@media (max-width: 576px) {
	.home-right .mod-articlesnews__item {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 8px 0;
	}
	.home-right .newsflash-image { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
	.home-right .mod-articlesnews__item > p { grid-column: 1; grid-row: 2; }
	.home-right .newsflash-title { grid-column: 1; grid-row: 3; margin: 4px 0 !important; }
	.home-right .mod-articlesnews__item > .readmore { grid-column: 1; grid-row: 4; margin: 4px 0 0 0 !important; }
}

/* ==============================
   PAGE ACTUALITÉS — Liste par année
   ============================== */
.actualites-liste {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 40px 32px;
}

.actualites-titre {
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #003366;
	margin: 0 0 2rem;
	position: relative;
}

.actualites-titre::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: #003366;
	margin-top: 6px;
	border-radius: 2px;
}

.actualites-annees {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.actualites-annee-titre {
	font-size: 1rem;
	font-weight: 700;
	color: #003366;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid #007DB4;
	display: inline-block;
}

.actualites-annee-liste {
	list-style: none;
	padding: 0;
	margin: 0;
}

.actualites-annee-item {
	padding: 6px 0 6px 20px;
	position: relative;
	border-bottom: 1px solid #f0f0f0;
}

.actualites-annee-item::before {
	content: '›';
	position: absolute;
	left: 0;
	color: #007DB4;
	font-weight: 700;
	font-size: 1.1rem;
}

.actualites-annee-lien {
	color: #003366;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: color 0.2s;
}

.actualites-annee-lien:hover {
	color: #007DB4;
}

/* ==============================
   ARTICLES Actualités (108) & Événements (155)
   ============================== */

.itemid-155.view-article .item-image,
.itemid-108.view-article .item-image {
	width: 280px !important;
	margin: 0 32px 16px 0 !important;
}

.itemid-155.view-article .item-image img,
.itemid-108.view-article .item-image img {
	width: 280px !important;
	height: 180px !important;
	object-fit: cover;
	border-radius: 6px;
}

.itemid-155.view-article .com-content-article__body p:first-child,
.itemid-108.view-article .com-content-article__body p:first-child {
	color: #007DB4;
	font-weight: 600;
	font-size: 0.95rem;
}

.itemid-155.view-article .com-content-article__body p:not(:first-child),
.itemid-108.view-article .com-content-article__body p:not(:first-child) {
	color: #444;
	font-size: 0.95rem;
	line-height: 1.6;
}

.itemid-155.view-article .page-header,
.itemid-108.view-article .page-header {
	display: block !important;
}

.itemid-155.view-article .page-header h1,
.itemid-108.view-article .page-header h1 {
	font-size: 1.6rem;
	font-weight: 700;
	color: #003366;
	margin: 24px 0 20px;
	position: relative;
	display: inline-block;
}

.itemid-155.view-article .page-header h1::after,
.itemid-108.view-article .page-header h1::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: #003366;
	margin-top: 6px;
	border-radius: 2px;
}

.btn-retour-liste {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #eef2f8;
}

/* ============================================================
   BOUTONS — Style unique harmonisé
   Utilisé sur toute le site : actualités, agenda,
   syllabus, plaquette, lien discret, système d'articles
   (article-pill)...
   La flèche → s'affiche toujours après le texte.
   Au survol : fond #003366, texte et flèche blancs.
============================================================ */

.btn-polytech,
.btn-all-news a,
.btn-full-agenda a,
.article-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border: 1.5px solid #003366;
	border-radius: 4px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: #003366;
	background: transparent;
	text-decoration: none;
	letter-spacing: 0.5px;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
	margin: 0;
}

/* Flèche → après le texte */
.btn-polytech::after,
.btn-all-news a::after,
.btn-full-agenda a::after,
.article-pill::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transition: background-image 0.2s;
}

/* Survol */
.btn-polytech:hover,
.btn-all-news a:hover,
.btn-full-agenda a:hover,
.article-pill:hover,
.article-pill:focus-visible {
	background: #003366;
	color: #fff;
	outline: none;
}

.btn-polytech:hover::after,
.btn-all-news a:hover::after,
.btn-full-agenda a:hover::after,
.article-pill:hover::after,
.article-pill:focus-visible::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

.article-pill:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }

/* ============================
   BANDEAU CHIFFRES CLÉS
   ============================ */

/* Bandeau aligné sur le bloc Actualités / Agenda (même largeur que .home-grid,
   qui garde 32 px de marge à droite), et non plus sur toute la largeur de l'écran */
.chiffres-bandeau {
	margin: 0 32px 0 0;
	background: #003366;
	border-radius: 8px;
	padding: 48px 32px;
}
@media (max-width: 1100px) {
	.chiffres-bandeau { margin-right: 16px; }
}
@media (max-width: 768px) {
	.chiffres-bandeau { margin-right: 12px; padding: 40px 20px; }
}

.chiffres-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
	margin-top: 56px;
}

.chiffre-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
	flex: 1;
	min-width: 160px;
}

.chiffre-number {
	font-family: 'Poppins', sans-serif;
	font-size: 2.2rem;
	font-weight: 700;
	color: #007DB4;
	line-height: 1;
	margin-bottom: 8px;
	white-space: nowrap;
}

.chiffre-label {
	font-family: 'Poppins', sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.3;
	white-space: normal;
	max-width: 190px;
	margin: 0 auto;
}

.chiffre-sep {
	width: 1px;
	height: 56px;
	background: rgba(255,255,255,0.2);
	flex-shrink: 0;
}

/* Écran large : 6 éléments par ligne, jamais de retour à la ligne forcé */
@media (min-width: 1300px) {
	.chiffres-inner { flex-wrap: nowrap; }
}

/* Écran moyen : exactement 3 éléments par ligne */
@media (max-width: 1299.98px) and (min-width: 700px) {
	.chiffres-inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 32px;
		column-gap: 16px;
	}
	.chiffre-sep { display: none; }
	.chiffre-item { padding: 0 16px; }
}

/* Petit écran : exactement 2 éléments par ligne */
@media (max-width: 699.98px) {
	.chiffres-inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 24px;
		column-gap: 12px;
	}
	.chiffre-sep { display: none; }
	.chiffre-item { padding: 0 12px; min-width: 0; }
}

.chiffre-titre {
	margin: 0 0 2rem;
	padding: 0 0 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	position: relative;
}

.chiffre-titre::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: #ffffff;
	margin-top: 6px;
	border-radius: 2px;
}

/* =============================================
   BANNIÈRE FILIÈRE — Styles communs
============================================= */

.banniere-filiere {
	position: relative;
	width: 100%;
	min-height: 240px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.banniere-filiere::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 51, 102, 0.95) 0%,
		rgba(0, 51, 102, 0.40) 30%,
		rgba(0, 51, 102, 0.35) 50%,
		rgba(0, 51, 102, 0.40) 70%,
		rgba(0, 51, 102, 0.95) 100%
	);
	z-index: 1;
}

.banniere-filiere::after {
	display: none;
}

.banniere-filiere-inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	padding: 36px 40px;
}

.banniere-filiere-texte {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.banniere-filiere-tag {
	display: inline-block;
	background: var(--banniere-accent, #007DB4);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: 0;

	}

.banniere-filiere-titre {
	font-family: 'Poppins', sans-serif;
	display: inline-block !important;
	background: #ffffff !important;
	color: var(--banniere-accent, #007DB4) !important;
	padding: 4px 10px !important;
	border-radius: 3px !important;
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: normal !important;
}

.banniere-filiere-sous-titre {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	letter-spacing: 0.3px;
}

.banniere-filiere-logo {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.10);
	border: 2px solid rgba(255, 255, 255, 0.30);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.banniere-filiere-logo-img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	border-radius: 50%;
	display: block;
}

/* ============================================================
   COULEURS ET PHOTOS DES BANNIÈRES
   Chaque bannière définit sa photo et --banniere-accent
   (tag, titre et trait prennent automatiquement cette couleur).
============================================================ */
.banniere-mi { /* MI — Mécanique et Interactions — Orange */
	background-image: url('../../../../../images/structure_site/bannieres/mi_nb.webp');
	--banniere-accent: #B8491E;
}
.banniere-mea { /* MEA — Microélectronique et Automatique — Violet */
	background-image: url('../../../../../images/structure_site/bannieres/mea_nb.webp');
	--banniere-accent: #7D659F;
}
.banniere-mat { /* MAT — Matériaux — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/mat_nb.webp');
	--banniere-accent: #33b199;
}
.banniere-ste { /* STE — Sciences et Technologies de l'Eau — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/ste_nb.webp');
	--banniere-accent: #0f70b5;
}
.banniere-gba { /* GBA — Génie Biologique et Agroalimentaire — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/gba_nb.webp');
	--banniere-accent: #96a01b;
}
.banniere-gi { /* GI — Génie Industriel — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/gi_nb.webp');
	--banniere-accent: #e30613;
}
.banniere-dams { /* DAMS — Data science — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/dams_nb.webp');
	--banniere-accent: #e2017b;
}
.banniere-do { /* DO — Développement Informatique — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/do_nb.webp');
	--banniere-accent: #821980;
}
.banniere-egc { /* EGC — Eau et Génie Civil — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/egc_nb.webp');
	--banniere-accent: #ef7f01;
}
.banniere-msi { /* MSI — Mécanique, Structures Industrielles — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/msi_nb.webp');
	--banniere-accent: #7591a6;
}
.banniere-se { /* SE — Systèmes Embarqués — à personnaliser */
	background-image: url('../../../../../images/structure_site/bannieres/se_nb.webp');
	--banniere-accent: #388597;
}
.banniere-ecole { /* Ecole */
	background-image: url('../../../../../images/structure_site/bannieres/ecole_nb.webp');
	--banniere-accent: #003366;
}
.banniere-presse { /* Presse */
	background-image: url('../../../../../images/structure_site/bannieres/presse_nb.webp');
	--banniere-accent: #003366;
}
.banniere-documentation { /* Documentation */
	background-image: url('../../../../../images/structure_site/bannieres/documentation_nb.webp');
	--banniere-accent: #003366;
}
.banniere-acces { /* Acces */
	background-image: url('../../../../../images/structure_site/bannieres/acces_nb.webp');
	--banniere-accent: #003366;
}
.banniere-contacts { /* Contacts */
	background-image: url('../../../../../images/structure_site/bannieres/contacts_nb.webp');
	--banniere-accent: #003366;
}
.banniere-mentions_legales { /* Mentions légales */
	background-image: url('../../../../../images/structure_site/bannieres/mentions_legales_nb.webp');
	--banniere-accent: #003366;
}
.banniere-cookies { /* Cookies */
	background-image: url('../../../../../images/structure_site/bannieres/cookies_nb.webp');
	--banniere-accent: #003366;
}
.banniere-plan_site { /* Plan site */
	background-image: url('../../../../../images/structure_site/bannieres/plan_site_nb.webp');
	--banniere-accent: #003366;
}
.banniere-vous-etes-etudiant { /* Vous êtes étudiant */
	background-image: url('../../../../../images/structure_site/bannieres/etudiant_nb.webp');
	--banniere-accent: #003366;
}
.banniere-vous-etes-etudiant-international { /* Vous êtes étudiant international */
	background-image: url('../../../../../images/structure_site/bannieres/etudiant_international_nb.webp');
	--banniere-accent: #003366;
}
.banniere-vous-etes-lyceen { /* Vous êtes lyceen */
	background-image: url('../../../../../images/structure_site/bannieres/lyceen_nb.webp');
	--banniere-accent: #003366;
}
.banniere-vous-etes-entreprise { /* Vous êtes entreprise */
	background-image: url('../../../../../images/structure_site/bannieres/entreprises_nb.webp');
	--banniere-accent: #003366;
}
.banniere-vous-etes-alumni { /* Vous êtes alumni */
	background-image: url('../../../../../images/structure_site/bannieres/alumni_nb.webp');
	--banniere-accent: #003366;
}
.banniere-peip { /* PEIP */
	background-image: url('../../../../../images/structure_site/bannieres/peip_nb.webp');
	--banniere-accent: #003366;
}
.banniere-international { /* International */
	background-image: url('../../../../../images/structure_site/bannieres/international_nb.webp');
	--banniere-accent: #003366;
}
.banniere-stages { /* Stages */
	background-image: url('../../../../../images/structure_site/bannieres/stages_nb.webp');
	--banniere-accent: #003366;
}
.banniere-scolarite-amenagee { /* Scolarité amenangée */
	background-image: url('../../../../../images/structure_site/bannieres/scolarite_amenagee_nb.webp');
	--banniere-accent: #003366;
}
.banniere-recherche { /* Recherche */
	background-image: url('../../../../../images/structure_site/bannieres/recherche_nb.webp');
	--banniere-accent: #003366;
}
.banniere-entreprises { /* Entreprises */
	background-image: url('../../../../../images/structure_site/bannieres/entreprises_nb.webp');
	--banniere-accent: #003366;
}
.banniere-formation-continue { /* Formation continue */
	background-image: url('../../../../../images/structure_site/bannieres/formation_continue_nb.webp');
	--banniere-accent: #003366;
}
.banniere-du-sts { /* DU STS */
	background-image: url('../../../../../images/structure_site/bannieres/du_sts_nb.webp');
	--banniere-accent: #003366;
}
.banniere-du-secnum { /* DU SECNUM */
	background-image: url('../../../../../images/structure_site/bannieres/du_secnum_nb.webp');
	--banniere-accent: #003366;
}
.banniere-du-dss { /* DU DSS */
	background-image: url('../../../../../images/structure_site/bannieres/du_dss_nb.webp');
	--banniere-accent: #003366;
}
.banniere-flow { /* FLOW */
	background-image: url('../../../../../images/structure_site/bannieres/flow_nb.webp');
	--banniere-accent: #003366;
}
.banniere-admission { /* Admission */
	background-image: url('../../../../../images/structure_site/bannieres/admission_nb.webp');
	--banniere-accent: #003366;
}
.banniere-creation-entreprises {
  background-image: url('../../../../../images/structure_site/bannieres/creation_entreprises_nb.webp');
  --banniere-accent: #003366;
}
.banniere-chaires-scientifiques {
  background-image: url('../../../../../images/structure_site/bannieres/chaires_scientifiques_nb.webp');
  --banniere-accent: #003366;
}
.banniere-halles-technologiques {
  background-image: url('../../../../../images/structure_site/bannieres/halles_technologiques_nb.webp');
  --banniere-accent: #003366;
}

.banniere-engagementresponsable {
  background-image: url('../../../../../images/structure_site/bannieres/ecoindex_nb.webp');
  --banniere-accent: #003366;
}

.banniere-ddrs {
  background-image: url('../../../../../images/structure_site/bannieres/ddrs_nb.webp');
  --banniere-accent: #003366;
}

.banniere-ingeresp {
  background-image: url('../../../../../images/structure_site/bannieres/inge_resp_nb.webp');
  --banniere-accent: #003366;
}

.banniere-egalite {
  background-image: url('../../../../../images/structure_site/bannieres/egalite_nb.webp');
  --banniere-accent: #003366;
}

.banniere-docddrs {
  background-image: url('../../../../../images/structure_site/bannieres/docsddrs_nb.webp');
  --banniere-accent: #003366;
}

.banniere-toeic {
  background-image: url('../../../../../images/structure_site/bannieres/toeic_nb.webp');
  --banniere-accent: #003366;
}


/* ============================================================
		MASQUER LE TITRE JOOMLA sur les pages avec bannière filière
 ============================================================ */
.view-article .page-header:has(+ .com-content-article__body .banniere-filiere),
.com-content-article .page-header:first-of-type {
	display: none;
}

/* ============================================================
		RESPONSIVE
 ============================================================ */
@media (max-width: 991px) {
	.banniere-filiere {
		min-height: 200px;
		background-position: 30% center;
	}
	.banniere-filiere-inner {
		padding: 28px 24px;
	}
	.banniere-filiere-titre {
		font-size: 1.4rem !important;
	}
}

@media (max-width: 768px) {
	.banniere-filiere {
		min-height: 180px;
		background-position: 20% center;
	}
	.banniere-filiere-inner {
		padding: 24px 20px;
		gap: 20px;
	}
	.banniere-filiere-titre {
		font-size: 1.2rem !important;
	}
	.banniere-filiere-logo {
		width: 76px;
		height: 76px;
	}
	.banniere-filiere-logo-img {
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 480px) {
	.banniere-filiere {
		min-height: 150px;
		background-position: 15% center;
	}
	.banniere-filiere-inner {
		padding: 20px 16px;
		gap: 14px;
	}
	.banniere-filiere-titre {
		font-size: 1rem !important;
	}
	.banniere-filiere-tag {
		font-size: 0.62rem;
		letter-spacing: 1.2px;
	}
	.banniere-filiere-sous-titre {
		font-size: 0.75rem;
	}
	.banniere-filiere-logo {
		width: 60px;
		height: 60px;
	}
	.banniere-filiere-logo-img {
		width: 46px;
		height: 46px;
	}
}

/* ============================================================
   SYSTÈME D'ARTICLE UNIFIÉ (.article-*)
   ------------------------------------------------------------
   Remplace définitivement les anciens systèmes .ft-* (fiches
   formation) et .pc-* (page Nos Diplômés). À utiliser pour
   TOUS les articles du site : présentation générale, nos
   diplômés, fiches formation, futures pages.

   LARGEUR / ALIGNEMENT :
   Contrairement à l'ancien .ft-article, .article-page ne
   redéfinit PAS de max-width ni de margin. Il hérite donc
   simplement de la largeur du conteneur Joomla parent
   (.grid-child.container-component : 1320px, padding 32px),
   exactement comme .page-banner-content et .banniere-filiere-inner.
   C'est ce qui garantit que le corps de l'article est toujours
   aligné avec les cadres bleu/blanc de la bannière — comme sur
   la page "Nos diplômés", qui servait de référence.

   COULEURS :
   Chaque fiche filière définit --accent via une classe
   .article-[sigle] posée sur la même balise <article> que
   .article-page (ex : class="article-page article-mi").
   Sans ce modificateur, --accent vaut var(--color-secondary)
   (le bleu du site) — c'est le cas des pages "génériques"
   (présentation générale, nos diplômés...).
   Toutes les couleurs "neutres" (titres, bordures, tableaux,
   contact...) utilisent var(--color-primary) / var(--color-secondary),
   les variables globales déjà définies en haut du fichier —
   plus besoin de variables --ft-navy / --pc-navy dupliquées.
============================================================ */

/* Texte visuellement masqué mais lisible par les lecteurs d'écran */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Conteneur racine ── */
.article-page {
	--accent: var(--color-secondary);
	color: #333;
}

/* ── Couleur accent par filière (fiches formation uniquement) ── */
.article-mi   { --accent: #B8491E; }
.article-mea  { --accent: #7D659F; }
.article-mat  { --accent: #33b199; }
.article-ste  { --accent: #0f70b5; }
.article-gba  { --accent: #96a01b; }
.article-gi   { --accent: #e30613; }
.article-dams { --accent: #e2017b; }
.article-do   { --accent: #821980; }
.article-egc  { --accent: #ef7f01; }
.article-msi  { --accent: #7591a6; }
.article-se   { --accent: #388597; }

/* ═══════════════════════════════════
   SECTIONS
   ═══════════════════════════════════ */
.article-section { padding: 48px 0; }
/* Séparateur entre deux sections (remplace <hr class="article-divider">) */
.article-page > .article-section + .article-section { border-top: 1px solid #e0eaf5; }
.article-divider { border: none; border-top: 1px solid #e0eaf5; margin: 0; }

/* ═══════════════════════════════════
   IMAGES
   ═══════════════════════════════════ */
.article-img {
	width: 80%; height: auto;
	border-radius: 6px;
	margin: 0 auto 24px;
	display: block;
}

@media (max-width: 640px) { .article-img { width: 100%; } }

.article-img--petit { max-width: 520px; }
.article-img--uniforme { max-width: 480px; }

/* Lien « Agrandir le graphique » — ordinateur uniquement */
.article-zoom {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: 8px;
	font-size: .78rem; font-weight: 600;
	color: var(--color-secondary);
	text-decoration: none;
}
.article-zoom::before { content: '🔍'; font-size: .85em; }
.article-zoom:hover,
.article-zoom:focus-visible { color: var(--color-primary); text-decoration: underline; }
.article-zoom:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 991.98px) {
	.article-zoom { display: none; }
}



/* ═══════════════════════════════════
   GRANDS TITRES DE SECTION (h2)
   ═══════════════════════════════════ */
.article-titre {
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--color-primary);
	margin: 0 0 2rem;
	padding: 16px 20px 14px;
	background: #eef4fb;
	border-radius: 4px;
}
.article-titre::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	background: var(--accent);
	margin-top: 8px;
	border-radius: 2px;
}

/* ═══════════════════════════════════
   SOUS-SECTIONS
   ═══════════════════════════════════ */
.article-ss { margin-bottom: 40px; padding-left: 20px; }
.article-ss:last-child { margin-bottom: 0; }
.article-ss + .article-ss { padding-top: 32px; border-top: 1px dashed #eef2f8; }

.article-sous-titre {
	display: flex; align-items: center; gap: 10px;
	font-size: .92rem; font-weight: 700;
	color: var(--accent);
	margin: 0 0 16px;
	padding: 0 0 8px 0;
	border-bottom: 1px solid #eef2f8;
}
.article-lettre {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	background: var(--color-primary); color: #fff;
	font-size: .65rem; font-weight: 700;
	border-radius: 3px; flex-shrink: 0;
	text-transform: uppercase;
}

/* Intertitres de 3e niveau dans un article (ex. « Vos droits » des mentions légales)
   Plus petits que .article-sous-titre (.92rem), en bleu foncé */
.article-page h4.article-ml-titre {
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-primary);
	margin: 20px 0 6px;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* ═══════════════════════════════════
   TYPOGRAPHIE CORPS
   ═══════════════════════════════════ */
.article-texte { font-size: .9rem; color: #444; line-height: 1.75; margin: 0 0 14px; }
.article-texte:last-child { margin: 0; }
.article-note { font-size: .8rem; color: #888; font-style: italic; margin: 6px 0; }

.article-lien {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: .8rem; font-weight: 600; color: var(--color-secondary);
	text-decoration: none;
}
.article-lien::after { content: ' →'; }
.article-lien:hover { color: var(--color-primary); }

/* ═══════════════════════════════════
   MATIÈRES — TAGS
   ═══════════════════════════════════ */
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.article-tag {
	display: inline-block;
	border: 1.5px solid var(--color-primary); color: var(--color-primary);
	background: color-mix(in srgb, var(--accent) 15%, transparent);
	font-size: .8rem; font-weight: 600;
	padding: 4px 12px; border-radius: 3px; line-height: 1.3;
}

/* ═══════════════════════════════════
   PROGRAMME — ENCADRÉS
   ═══════════════════════════════════ */
.article-encadre {
	background: #f8f9fb;
	border-left: 3px solid var(--color-secondary);
	border-radius: 0 4px 4px 0;
	padding: 16px 20px;
	margin: 0 0 24px;
}
.article-encadre p { font-size: .87rem; color: #444; margin: 0 0 4px; }
.article-encadre p:last-child { margin: 0; }
.article-encadre strong { color: var(--color-primary); }

.article-encadre-accent {
	background: #f0f8ff;
	border-left: 3px solid var(--color-primary);
	border-radius: 0 6px 6px 0;
	padding: 18px 22px;
	margin: 20px 0 0;
}
.article-encadre-accent-titre { font-size: .88rem; font-weight: 700; color: var(--color-primary); margin: 0 0 12px; }
.article-encadre-accent p { font-size: .85rem; color: #444; margin: 4px 0; }
.article-encadre-accent strong { color: var(--color-primary); }
.article-encadre-accent ul { list-style: none; padding: 0; margin: 4px 0 10px; }

/* Carte année (3A, 4A, 5A) */
.article-annees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.article-annee { border: 1px solid #e0eaf5; border-radius: 6px; overflow: hidden; }
.article-annee-header { background: var(--color-primary); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.article-annee-badge { background: var(--color-secondary); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; letter-spacing: .5px; }
.article-annee-titre { font-size: .85rem; font-weight: 600; color: #fff; margin: 0; }
.article-annee-corps { padding: 16px; }
.article-annee-corps p { font-size: .83rem; color: #555; line-height: 1.65; margin: 0 0 8px; }
.article-annee-corps p:last-child { margin: 0; }
.article-semestre { font-weight: 700; } /* titres de semestre dans les cartes année */

/* ═══════════════════════════════════
   STAGES — TABLEAU
   ═══════════════════════════════════ */
.article-tableau {
	width: 100%; border-collapse: collapse;
	margin: 0 0 20px; border: 1px solid #e0eaf5;
	border-radius: 6px; overflow: hidden;
}
.article-tableau thead tr { background: var(--color-primary); }
.article-tableau thead th {
	padding: 10px 16px; text-align: left;
	font-size: .7rem; font-weight: 700; color: #fff;
	letter-spacing: 1px; text-transform: uppercase;
}
.article-tableau tbody tr { border-bottom: 1px solid #e0eaf5; }
.article-tableau tbody tr:nth-child(odd)  { background: #fafbfd; }
.article-tableau tbody tr:nth-child(even) { background: #fff; }
.article-tableau tbody td { padding: 12px 16px; font-size: .85rem; color: #444; vertical-align: top; }
.article-badge-annee {
	display: inline-block; background: var(--color-secondary); color: #fff;
	font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 2px;
}
.article-duree { color: var(--color-secondary); font-weight: 600; }

/* Badge porté par l'attribut data-badge (heures, UE, dates…) : même look que .article-badge-annee */
.article-page [data-badge]::after {
	content: attr(data-badge);
	display: inline-block;
	margin-left: .3em;
	background: var(--color-secondary);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 2px;
}
.article-page td[data-badge]::after { margin-left: 0; }

/* Tableaux de classement : colonnes de largeur fixe pour qu'ils soient alignés entre eux */
.article-tableau--rang { table-layout: fixed; }
.article-tableau--rang th:last-child,
.article-tableau--rang td:last-child { width: 30%; }

/* ═══════════════════════════════════
   DÉBOUCHÉS / COMPÉTENCES — Listes à puces
   ═══════════════════════════════════ */
.article-liste-check { list-style: none; padding: 0; margin: 0 0 28px; }
.article-liste-check li {
	font-size: .88rem; color: #444;
	padding: 8px 10px 8px 30px; position: relative;
	background: #fafbfd; border-left: 3px solid var(--color-primary);
	margin-bottom: 6px; border-radius: 0 3px 3px 0;
}
.article-liste-check li::before {
	content: '✓'; position: absolute; left: 8px;
	color: var(--color-primary); font-weight: 700; font-size: .78rem;
}

/* ═══════════════════════════════════
   LISTE SIMPLE (sous-listes secondaires : classements,
   "en bref", listes imbriquées dans un article-atout...)
   Plus légère que .article-liste-check : pas de fond ni
   de bordure, juste une puce chevron.
   ═══════════════════════════════════ */
.article-liste-simple { list-style: none; padding: 0; margin: 0 0 14px; }
.article-liste-simple:last-child { margin: 0; }
/* Même look partout que les blocs en lignes (<pre class="article-lignes">) :
   « › » de la couleur du texte, même taille, même interligne. */
.article-liste-simple li,
.article-encadre-accent li { position: static; font-size: .88rem; color: #444; line-height: 1.7; padding: 0; }
.article-liste-simple li::before,
.article-encadre-accent li::before { content: '\203A\00A0'; position: static; color: inherit; font-weight: inherit; }
.article-encadre-accent li { font-size: .85rem; }

/* Même taille que le texte autour, selon l'endroit */
.article-annee-corps .article-liste-simple { margin: 0 0 8px; }
.article-annee-corps .article-liste-simple li { font-size: .83rem; color: #555; line-height: 1.65; }
.article-atout-corps .article-liste-simple { margin: 0 0 6px; }
.article-atout-corps .article-liste-simple li { font-size: .84rem; color: #555; line-height: 1.65; }
.article-annee-corps .article-liste-simple:last-child,
.article-atout-corps .article-liste-simple:last-child { margin: 0; }

/* ═══════════════════════════════════
   BLOCS EN LIGNES (sans <br> ni <li>)
   L'éditeur JCE conserve les retours à la ligne dans un <pre>.
   ═══════════════════════════════════ */
.article-lignes { white-space: pre-line; }
pre.article-lignes {
	font-family: inherit;
	font-size: .88rem;
	color: #444;
	line-height: 1.7;
	white-space: pre-line;
	overflow-wrap: break-word;
	overflow: visible;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 14px;
}
pre.article-lignes:last-child { margin: 0; }
pre.article-lignes.article-texte { font-size: .9rem; line-height: 1.75; }
.article-annee-corps pre.article-lignes { font-size: .83rem; color: #555; line-height: 1.65; margin: 0 0 8px; }
.article-atout-corps pre.article-lignes { font-size: .84rem; color: #555; line-height: 1.65; margin: 0 0 6px; }
.article-encadre-accent pre.article-lignes { font-size: .85rem; color: #444; }
.article-annee-corps pre.article-lignes:last-child,
.article-atout-corps pre.article-lignes:last-child { margin: 0; }
/* Listes « titre en gras + description » : le titre passe seul sur sa ligne */
.article-liste-check li.article-lignes > strong:first-child { display: block; }

/* ═══════════════════════════════════
   FRISE CHRONOLOGIQUE (histoire, dates clés)
   ═══════════════════════════════════ */
.article-timeline { display: flex; flex-direction: column; }
.article-timeline-item {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 20px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px dashed #eef2f8;
}
.article-timeline-item:first-child { padding-top: 0; }
.article-timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
.article-timeline-item .article-badge-annee {
	font-size: .78rem;
	padding: 3px 10px;
	white-space: nowrap;
}
.article-timeline-item p { margin: 0; font-size: .88rem; color: #444; line-height: 1.7; }

/* ═══════════════════════════════════
   CHIFFRES CLÉS / STATISTIQUES
   Un seul composant pour toutes les cartes chiffres
   (insertion pro, réseau alumni, etc.) — s'adapte
   automatiquement de 3 à 4 chiffres.
   ═══════════════════════════════════ */
.article-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}
.article-stat {
	padding: 20px 16px; text-align: center;
	border: 1px solid var(--color-primary);
	border-top: 3px solid var(--color-primary);
	border-radius: 0 0 6px 6px;
	background: #fff;
}
.article-stat p { margin: 0; }
.article-stat-chiffre {
	font-size: 1.8rem; font-weight: 700; color: var(--color-primary);
	line-height: 1; margin: 0 0 6px;
}
.article-stat-label {
	font-size: .7rem; color: #888;
	text-transform: uppercase; letter-spacing: .5px; line-height: 1.3;
	margin: 0;
}

/* ═══════════════════════════════════
   ALUMNI / TÉMOIGNAGES
   ═══════════════════════════════════ */
.article-alumni { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.article-alumni-card {
	background: #fafbfd; border: 1px solid #e0eaf5; border-radius: 6px; padding: 22px;
}
.article-alumni-citation {
	font-size: .88rem; color: #444; font-style: italic;
	line-height: 1.7; margin: 0 0 16px; padding-left: 22px; position: relative;
}
.article-alumni-citation::before {
	content: '"'; position: absolute; left: 0; top: -6px;
	font-size: 2.4rem; color: var(--color-primary); line-height: 1; font-style: normal;
}
.article-alumni-auteur { display: flex; align-items: center; gap: 12px; }
.article-alumni-initiales {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--color-primary); color: #fff;
	font-size: .68rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.article-alumni-auteur strong { display: block; font-size: .83rem; color: var(--color-primary); }
.article-alumni-auteur span  { font-size: .76rem; color: #888; }

/* ═══════════════════════════════════
   ÉQUIPE / BUREAU (associations, contacts collectifs)
   ═══════════════════════════════════ */
.article-equipe { display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; }
.article-membre {
	display: flex; align-items: center; gap: 16px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e0eaf5;
	border-left: 4px solid var(--color-secondary);
	border-radius: 4px;
}
/* Avatar : icône icon_user.png utilisée comme pochoir (mask), en bleu du site */
.article-membre-avatar {
	flex-shrink: 0;
	width: 44px; height: 44px;
	background: var(--color-primary); color: transparent;
	display: flex; align-items: center; justify-content: center;
	font-size: 0; font-weight: 700; letter-spacing: .5px;
	-webkit-mask: url("../../../../../images/structure_site/logos/icon_user.png") center / contain no-repeat;
	mask: url("../../../../../images/structure_site/logos/icon_user.png") center / contain no-repeat;
}
.article-membre-info { display: flex; flex-direction: column; gap: 2px; }
.article-membre-role {
	font-size: .7rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .6px; color: var(--color-secondary);
}
.article-membre-nom { font-size: .9rem; font-weight: 700; color: var(--color-primary); }
.article-membre-detail { font-size: .78rem; color: #666; }

/* ═══════════════════════════════════
   LES PLUS / POINTS FORTS
   ═══════════════════════════════════ */
.article-atouts { display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; margin: 0; }
.article-atout {
	display: flex; align-items: flex-start; gap: 20px;
	background: #fafbfd; border: 1px solid #e0eaf5;
	border-left: 4px solid var(--color-primary); border-radius: 0 6px 6px 0;
	padding: 20px 24px;
}
.article-atout[data-icone]::before { content: attr(data-icone); font-size: 1.6rem; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.article-atout-icone { font-size: 1.6rem; flex-shrink: 0; line-height: 1; padding-top: 2px; } /* ancien balisage */
.article-atout-titre { font-size: .9rem; font-weight: 700; color: var(--color-primary); margin: 0 0 8px; }
.article-atout-corps p { font-size: .84rem; color: #555; line-height: 1.65; margin: 0 0 6px; }
.article-atout-corps p:last-child { margin: 0; }

/* Espace entre une liste de cartes atouts et l'image qui la suit */
.article-atouts + figure { margin-top: 32px; }


/* ═══════════════════════════════════
   CONTACT
   ═══════════════════════════════════ */
.article-contact { background: var(--color-primary); border-radius: 8px; padding: 28px 32px; margin-bottom: 28px; }
.article-contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.article-contact-bloc {
	display: flex; gap: 12px; align-items: flex-start;
	padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.article-contact-bloc:last-child { border-bottom: none; padding-bottom: 0; }
.article-contact-icone { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.article-contact-bloc strong { display: block; font-size: .8rem; font-weight: 700; color: #fff; margin: 0 0 2px; }
.article-contact-bloc span,
.article-contact-bloc a { display: block; font-size: .76rem; color: rgba(255,255,255,.65); text-decoration: none; line-height: 1.5; }
.article-contact-bloc a:hover { color: #fff; }

/* Contacts compacts : l'icône et la mise en colonne sont faites en CSS */
.article-contact-grille--compact .article-contact-bloc {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	align-items: start;
}
.article-contact-grille--compact .article-contact-bloc::before {
	content: '📧';
	grid-column: 1;
	grid-row: 1 / span 4;
	font-size: 1rem;
	margin-top: 2px;
}
/* autre icône (📍 adresse…) : data-icone sur le bloc */
.article-contact-grille--compact .article-contact-bloc[data-icone]::before { content: attr(data-icone); }
.article-contact-grille--compact .article-contact-bloc > * { grid-column: 2; }

/* ═══════════════════════════════════
   LIENS RESSOURCES (syllabus, plaquette, adhésion, réseau...)
   Le style visuel du bouton lui-même (.article-pill) est
   défini une seule fois plus haut, dans le bloc "BOUTONS —
   Style unique harmonisé", fusionné avec .btn-polytech.
   ═══════════════════════════════════ */
.article-ressources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.article-ressources--center { justify-content: center; }

/* ═══════════════════════════════════
   CARTE MÉDIA (playlist YouTube, podcast, vidéo…)
   ═══════════════════════════════════ */
.article-media-card {
	display: flex; align-items: center; gap: 16px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #e0eaf5;
	border-left: 4px solid #ff0000;
	border-radius: 6px;
	text-decoration: none;
	transition: box-shadow .2s, border-color .2s;
	margin-top: 20px;
}
.article-media-card:hover, .article-media-card:focus-visible {
	box-shadow: 0 4px 16px rgba(0,0,0,.1);
	border-left-color: #cc0000;
	outline: none;
}
.article-media-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.article-media-icone {
	flex-shrink: 0;
	width: 40px; height: 40px;
	color: #ff0000; display: flex; align-items: center;
}
.article-media-icone svg { width: 40px; height: 40px; }
.article-media-texte { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.article-media-label {
	font-size: .7rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .6px; color: #ff0000;
}
.article-media-titre { font-size: .9rem; font-weight: 600; color: var(--color-primary); }
.article-media-fleche { font-size: 1.2rem; color: var(--color-primary); flex-shrink: 0; }

/* Bloc CTA final — Candidater / Rejoindre */
.article-cta {
	padding: 40px 0;
	text-align: center;
	border-top: 3px solid var(--color-primary);
	background: #f5f7fb;
}
.article-cta-titre {
	font-size: 1rem; font-weight: 700; color: var(--accent);
	margin: 0 0 16px; text-transform: uppercase; letter-spacing: .5px;
}

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 991px) {
	.article-section { padding: 36px 0; }
	.article-cta { padding: 32px 0; }
	.article-annees { grid-template-columns: 1fr; }
	.article-alumni { grid-template-columns: 1fr; }
	.article-contact-grille { grid-template-columns: 1fr; }
	.article-ss { padding-left: 12px; }
}

@media (max-width: 640px) {
	.article-section { padding: 28px 0; }
	.article-cta { padding: 28px 0; }
	.article-ss { padding-left: 8px; }
	.article-ressources { flex-direction: column; }
	.article-ressources--center { flex-direction: column; align-items: center; }
	.article-tableau thead { display: none; }
	.article-tableau tbody tr { display: block; padding: 12px; }
	.article-tableau tbody td { display: block; padding: 3px 0; border: none; }
	.article-tableau tbody td::before {
		content: attr(data-label) ' : ';
		font-weight: 600; color: var(--color-primary); font-size: .78rem;
	}
	.article-stats { gap: 10px; }
	.article-stat { padding: 16px 12px; }
	.article-stat-chiffre { font-size: 1.6rem; }
	.article-media-card { flex-wrap: wrap; gap: 12px; }
	.article-media-fleche { display: none; }
	.article-timeline-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   TÉMOIGNAGES VIDÉO — grille 2 colonnes + légende
   Vignette cliquable (lien YouTube à renseigner sur le <a>)
   + légende éditable en dessous de chaque vignette.
   Vignettes en taille fixe 350x200 (recadrées via object-fit).
   ============================================================ */
.article-video-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.article-video-item {
	width: 350px;
	max-width: 100%;
}

.article-video-thumb {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	transition: box-shadow 0.2s;
}

.article-video-item a:hover .article-video-thumb,
.article-video-item a:focus-visible .article-video-thumb {
	box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

.article-video-legende {
	margin-top: 10px;
	font-size: .82rem;
	color: #666;
	text-align: center;
	line-height: 1.5;
}
/* ============================================================
   CORRECTIF — vidéos tronquées/dépassantes en mobile dans "Les plus"
   ------------------------------------------------------------
   Cause : .article-atout est en display:flex (icône + corps), et
   .article-video-grid l'est aussi (vignettes). Un item flex dont le
   contenu est une image a par défaut un min-width automatique basé
   sur la taille de l'image plutôt que 0, donc il refuse de rétrécir
   sous cette taille — ce qui pousse toute la carte, et parfois toute
   la page, à déborder sur mobile.
   Correctif standard : forcer min-width:0 à chaque niveau flex
   imbriqué contenant l'image.
   ============================================================ */
.article-atout-corps {
	flex: 1;      /* toute la largeur, même avec une seule vidéo (page SE) */
	min-width: 0;
}
.article-video-item {
	min-width: 0;
}

/* ============================================================
   CARTES LOGO — une formation par ligne : logo à gauche,
   "CODE | Nom complet" à droite (page Admission FISA,
   réutilisable ailleurs).
   ============================================================ */
.article-logo-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0;
}

.article-logo-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e0eaf5;
	border-radius: 8px;
	text-decoration: none;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.article-logo-link:hover,
.article-logo-link:focus-visible {
	box-shadow: 0 4px 14px rgba(0,0,0,0.1);
	border-color: var(--color-secondary);
	outline: none;
}

.article-logo-link img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
	min-width: 0;
}

.article-logo-link span {
	font-size: .88rem;
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.35;
}

/* Carte formation + lien syllabus côte à côte */
.article-logo-item { display: flex; align-items: stretch; gap: 8px; }
.article-logo-item .article-logo-link { flex: 1; min-width: 0; }
.article-syllabus {
	display: inline-flex; align-items: center; gap: 6px;
	flex-shrink: 0;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #e0eaf5; border-radius: 8px;
	font-size: .78rem; font-weight: 600; color: var(--color-secondary);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, color .2s;
}
.article-syllabus::before { content: '📘'; font-size: .95rem; }
.article-syllabus:hover,
.article-syllabus:focus-visible {
	border-color: var(--color-secondary);
	color: var(--color-primary);
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.article-syllabus:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 480px) {
	.article-syllabus { padding: 0 10px; }
}

/* ============================================================
   MUR DE LOGOS PARTENAIRES — grille de logos en couleur, avec
   le nom de l'entité sous chaque logo.
   ============================================================ */
.article-partners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
	margin: 12px 0 28px;
}

.article-partner-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	min-height: 100px;
	padding: 18px;
	background: #fff;
	border: 1px solid #e0eaf5;
	border-radius: 8px;
	transition: box-shadow 0.2s, border-color 0.2s;
}

.article-partner-logo:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	border-color: var(--color-secondary);
}

.article-partner-logo img {
	max-width: 100%;
	max-height: 68px;
	width: auto;
	height: auto;
	object-fit: contain;
	min-width: 0;
}

.article-partner-logo span {
	font-size: .78rem;
	font-weight: 600;
	color: var(--color-primary);
	text-align: center;
	line-height: 1.3;
}

@media (max-width: 480px) {
	.article-partners-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   CARTES DOCUMENT — liens vers PDF/ressources, groupés en grille,
   icône + titre + léger effet au survol (page Engagement responsable).
   ============================================================ */
.article-doc-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	margin: 12px 0 24px;
}

.article-doc-link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e0eaf5;
	border-left: 4px solid var(--color-primary);
	border-radius: 0 6px 6px 0;
	text-decoration: none;
	transition: box-shadow 0.2s;
}

.article-doc-link:hover,
.article-doc-link:focus-visible {
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
	outline: none;
}

.article-doc-link[data-icone]::before,
.article-doc-link-icone { /* .article-doc-link-icone : ancien balisage */
	font-size: 1.3rem;
	flex-shrink: 0;
}
.article-doc-link[data-icone]::before { content: attr(data-icone); }

.article-doc-link-titre {
	font-size: .85rem;
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.3;
}

/* ═══════════════════════════════════
   CARTES TÉMOIGNAGES SHN AHN (photo + nom + titre, lien PDF)
   ═══════════════════════════════════ */
.article-temoignages {
	   list-style: none; padding: 0; margin: 0;
	   display: grid;
	   grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
	   gap: 16px;
   }
.article-temoignage {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid #e0eaf5; border-radius: 8px;
	overflow: hidden; text-decoration: none;
	transition: box-shadow .2s, border-color .2s;
}
.article-temoignage:hover,
.article-temoignage:focus-visible {
	box-shadow: 0 4px 14px rgba(0,0,0,.1);
	border-color: var(--color-secondary);
}
.article-temoignage:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.article-temoignage-photo {
	display: block; width: 100%; height: auto;
	aspect-ratio: 1 / 1; object-fit: cover;
}
.article-temoignage-sport {
	margin: 12px 14px 0;
	font-size: .66rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .6px; color: var(--color-secondary);
}
.article-temoignage-nom { margin: 2px 14px 0; font-size: .9rem; font-weight: 700; color: var(--color-primary); }
.article-temoignage-titre { flex: 1; margin: 6px 14px 0; font-size: .8rem; color: #555; line-height: 1.45; }
.article-temoignage-lien { margin: 12px 14px 14px; font-size: .78rem; font-weight: 600; color: var(--color-secondary); }
.article-temoignage-lien::after { content: ' →'; }
.article-temoignage:hover .article-temoignage-lien { color: var(--color-primary); }

@media (max-width: 480px) {
	.article-temoignages { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═══════════════════════════════════
   RÉSEAUX SOCIAUX (dans un article) — logos seuls, sur une ligne
   ═══════════════════════════════════ */
.article-reseaux {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.article-reseaux li { margin: 0; padding: 0; }
.article-reseaux li::before { content: none; }
.article-reseau {
	display: block;
	border-radius: 50%;
	transition: transform .2s;
}
.article-reseau img { display: block; width: 36px; height: 36px; object-fit: contain; }
.article-reseau:hover { transform: translateY(-2px); }
.article-reseau:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Espace entre les boutons d'adhésion et « Suivez l'association » */
.article-ressources + .article-sous-titre { margin-top: 36px; }

.article-alumni-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.article-alumni-auteur .article-alumni-initiales { width: 56px; height: 56px; font-size: .8rem; }

/******************************************************
 * ICÔNES SANS FONTAWESOME
 * Joomla utilise encore quelques icônes "icon-*" :
 * chevron des "Lire la suite", chevrons des sous-menus du burger,
 * flèche "retour en haut". On les redessine en SVG via un masque CSS :
 * elles prennent la couleur du texte (currentColor), comme avant.
 ******************************************************/
.icon-chevron-right,
.icon-chevron-down,
.icon-chevron-up,
.icon-arrow-up,
.icon-search,
.icon-search-plus {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.icon-chevron-right {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E");
}
.icon-chevron-down {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
}
.icon-chevron-up {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 15 12 8 19 15'/%3E%3C/svg%3E");
}
.icon-arrow-up {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'/%3E%3Cpolyline points='5 12 12 5 19 12'/%3E%3C/svg%3E");
}
.icon-search {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
}
.icon-search-plus {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
}

/******************************************************
 * MENU "VOUS ÊTES" DANS LE BURGER
 * Le module du bandeau (.hero-profils) est déplacé dans
 * .mobile-profils à l'ouverture du burger (js/user.js),
 * juste avant les réseaux sociaux. On lui redonne ici
 * l'apparence de liste verticale du menu mobile.
 ******************************************************/

/* TEMPORAIRE : menu « Vous êtes » masqué dans le burger */
 .mobile-profils {
	 display: none !important;
 }
 
.mobile-profils:empty {
	display: none;
}

.mobile-profils .hero-profils {
	display: flex;           /* annule le display:none mobile du bandeau */
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
}

.mobile-profils .hero-profils-label {
	display: block;
	align-self: auto;
	background: none;
	color: #888;
	padding: 0 0 0 2px;
	margin: 0 0 12px;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: normal;
}

.mobile-profils .hero-btn {
	display: flex;
	align-items: center;
	padding: 10px 0 10px 16px;
	border: 0;
	border-left: 3px solid #007DB4;
	border-radius: 0;
	background: none;
	color: var(--color-dark);
	font-size: 15px;
	font-weight: 500;
	white-space: normal;
}

.mobile-profils .hero-btn:hover,
.mobile-profils .hero-btn:focus-visible {
	background: #f0f8ff;
	border-color: #007DB4;
	color: #007DB4 !important;
}

.mobile-profils .hero-btn::after {
	display: none;
}

/******************************************************
 * IMPRESSION (bonne pratique EcoIndex)
 ******************************************************/
@media print {
	#site-header,
	.topbar,
	.topbar-mobile,
	.menu-row,
	.search-overlay,
	#mobileMenu,
	.offcanvas-backdrop,
	.container-banner,
	.hero-profils,
	.container-sidebar-left,
	.container-sidebar-right,
	.container-footer,
	#back-top,
	.mod-breadcrumbs,
	video,
	iframe {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 12pt;
	}

	.site-grid {
		display: block !important;
	}

	.banniere-filiere,
	.page-banner {
		background-image: none !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.banniere-filiere::before,
	.page-banner::before {
		display: none !important;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	main a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}

/* ================================================================
   BANDEAU COOKIES
   ================================================================ */

.cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 10000;
	max-width: 480px;
	padding: 20px 24px;
	background: #fff;
	color: #333;
	border-top: 4px solid var(--color-secondary);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (min-width: 640px) {
	.cookie-banner {
		left: 24px;
		right: auto;
		bottom: 24px;
	}
}

.cookie-banner-titre {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary);
}

.cookie-banner-texte {
	margin: 0 0 16px;
	font-size: .85rem;
	line-height: 1.6;
	color: #444;
}

.cookie-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

/* Voile léger derrière le bandeau : bloque la navigation tant qu'aucun choix n'est fait */
.cookie-banner::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(0, 27, 76, 0.15);
}

html.cookie-lock,
html.cookie-lock body {
	overflow: hidden;
}

/* Les deux boutons ont exactement le même style (exigence CNIL) */
.cookie-btn {
	flex: 1 1 0;
	min-width: 130px;
	padding: 8px 14px;
	border: 1.5px solid var(--color-primary);
	border-radius: 4px;
	background: var(--color-primary);
	color: #fff;
	font-family: inherit;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .3px;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}

.cookie-btn:hover {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
}

.cookie-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.cookie-banner-lien {
	font-size: .8rem;
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Contenus tiers en attente de consentement (vidéos…) */
iframe[data-consent-src] {
	display: none;
}

.consent-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 200px;
	padding: 24px;
	background: #eef4fb;
	border: 1px dashed var(--color-secondary);
	border-radius: 6px;
	text-align: center;
}

.consent-placeholder p {
	margin: 0;
	font-size: .85rem;
	color: var(--color-primary);
	max-width: 420px;
}

.consent-placeholder .cookie-btn {
	flex: 0 0 auto;
}

@media print {
	.cookie-banner,
	.consent-placeholder {
		display: none !important;
	}
}

/******************************************************
 * PAGE D'ERREUR (404…) — templates/cassiopeia_extended/error.php
 ******************************************************/
.erreur-recherche {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 560px;
	margin: 8px 0 28px;
}
.erreur-recherche input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 8px 12px;
	border: 1.5px solid #c9d6e6;
	border-radius: 4px;
	font: inherit;
	font-size: .9rem;
	color: #333;
}
.erreur-recherche input:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 1px;
	border-color: var(--color-secondary);
}

/* =========================================================
   PLAN DU SITE — à ajouter à user.css
   ========================================================= */

/* Rubriques empilées les unes sous les autres */
.article-plan-section {
  margin-bottom: 2rem;
}

.article-plan-section:last-child {
  margin-bottom: 0;
}

.article-plan-section h2 {
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent, #0b5394);
  font-size: 1.05rem;
}

.article-plan-liste,
.article-plan-liste ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-plan-liste li {
  margin: 0.35rem 0;
  line-height: 1.4;
}

/* Sous-niveaux : retrait + filet vertical */
.article-plan-liste ul {
  margin: 0.35rem 0 0.6rem 0.4rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
}

/* Libellés de regroupement (entrées sans page propre) */
.article-plan-groupe {
  display: inline-block;
  font-weight: 700;
  margin-top: 0.4rem;
}

.article-plan-liste a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article-plan-liste a:hover,
.article-plan-liste a:focus-visible {
  text-decoration-thickness: 2px;
}

.article-plan-liste a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

.article-plan-externe {
  font-size: 0.875em;
  opacity: 0.8;
}

/* ============================================================
   CALENDRIER D'ALTERNANCE (.article-cal-*)
   Grille de 52 semaines de largeur identique.
   Chaque bloc = une période continue ; le chiffre = nombre de semaines.
   Entreprise = ambre hachuré, Centre = cyan uni (distinction pas seulement
   par la couleur, RGAA 3.1). Texte détaillé en .sr-only pour les lecteurs d'écran.
   Mobile (< 640px) : bascule à la verticale (mois en lignes, années en colonnes).
   ============================================================ */
.article-cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 12px;
  padding: 16px 20px 20px;
  border: 1px solid #dfe5ea;
  border-radius: 12px;
  background: #fff;
}
.article-cal-titre {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.article-cal-ligne {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
}
.article-cal-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Piste : 52 colonnes égales */
.article-cal-piste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(52, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-cal-span-1  { grid-column: span 1; }
.article-cal-span-2  { grid-column: span 2; }
.article-cal-span-3  { grid-column: span 3; }
.article-cal-span-4  { grid-column: span 4; }
.article-cal-span-5  { grid-column: span 5; }
.article-cal-span-6  { grid-column: span 6; }
.article-cal-span-8  { grid-column: span 8; }
.article-cal-span-9  { grid-column: span 9; }
.article-cal-span-10 { grid-column: span 10; }
.article-cal-span-12 { grid-column: span 12; }
.article-cal-span-18 { grid-column: span 18; }
.article-cal-span-26 { grid-column: span 26; }

/* Séparation semestre impair / pair (milieu exact de la grille) */
ol.article-cal-piste::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: calc(50% - 1px);
  border-left: 2px solid #9fb0bd;
  pointer-events: none;
}

/* En-tête semestres */
.article-cal-semestres > span {
  padding: 6px 0;
  border-radius: 6px;
  background: #f3f6f8;
  color: #3d4852;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}
/* En-tête mois */
.article-cal-mois > span {
  overflow: hidden;
  padding: 2px 0 4px;
  border-left: 1px solid #dfe5ea;
  color: #3d4852;
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
}
.article-cal-mois-court { display: none; }

/* Périodes */
.article-cal-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 30px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.article-cal-c {
  background: #d9f1f9;
  color: #005a78;
}
.article-cal-e {
  background: repeating-linear-gradient(135deg, #ffd98a 0 6px, #ffcd66 6px 12px);
  color: #5c3b00;
}

/* Légende */
.article-cal-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.article-cal-legende li {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Pastilles dessinées en CSS (TinyMCE supprime les <span> vides) */
.article-cal-legende-c::before,
.article-cal-legende-e::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 18px;
  border-radius: 4px;
}
.article-cal-legende-c::before {
  background: #d9f1f9;
  box-shadow: inset 0 0 0 1px #b5e2f1;
}
.article-cal-legende-e::before {
  background: repeating-linear-gradient(135deg, #ffd98a 0 6px, #ffcd66 6px 12px);
}
.article-cal-legende-note {
  color: #5a6570;
  font-style: italic;
}

/* Écrans moyens : mois abrégés */
@media (max-width: 1100px) {
  .article-cal-mois-long  { display: none; }
  .article-cal-mois-court { display: inline; }
}

/* Mobile : calendrier vertical */
@media (max-width: 640px) {
  .article-cal {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 14px 12px 16px;
  }
  .article-cal-titre { flex: 0 0 100%; }
  .article-cal-ligne {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	min-width: 0;
  }
  .article-cal-entete { flex: 0 0 auto; }
  .article-cal-label {
	display: block;
	height: 2.6em;
	font-size: 0.8125rem;
	line-height: 2.6em;
	text-align: center;
	white-space: nowrap;
  }
  .article-cal-piste {
	grid-template-columns: 1fr;
	grid-template-rows: repeat(52, 13px);
	gap: 2px;
  }
  .article-cal-piste > * { grid-column: auto; }
  .article-cal-span-1  { grid-row: span 1; }
  .article-cal-span-2  { grid-row: span 2; }
  .article-cal-span-3  { grid-row: span 3; }
  .article-cal-span-4  { grid-row: span 4; }
  .article-cal-span-5  { grid-row: span 5; }
  .article-cal-span-6  { grid-row: span 6; }
  .article-cal-span-8  { grid-row: span 8; }
  .article-cal-span-9  { grid-row: span 9; }
  .article-cal-span-10 { grid-row: span 10; }
  .article-cal-span-12 { grid-row: span 12; }
  .article-cal-span-18 { grid-row: span 18; }
  .article-cal-span-26 { grid-row: span 26; }

  ol.article-cal-piste::after {
	top: calc(50% - 1px);
	right: -4px;
	bottom: auto;
	left: -4px;
	border-top: 2px solid #9fb0bd;
	border-left: 0;
  }
  .article-cal-semestres { width: 22px; }
  .article-cal-semestres > span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 0.625rem;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
  }
  .article-cal-mois { width: 40px; }
  .article-cal-mois > span {
	padding: 1px 4px 0 0;
	border-top: 1px solid #dfe5ea;
	border-left: 0;
	font-size: 0.6875rem;
	text-align: left;
  }
  .article-cal-seg {
	height: auto;
	border-radius: 4px;
	font-size: 0.625rem;
  }
}

/* ============================================================
   PARCOURS PAR ANNÉE (frise verticale) — .article-parcours
   Utilisé : Engagement responsable > Former des ingénieurs responsables
   Remplacer #0095c8 par la variable/couleur cyan Polytech du site si besoin
   ============================================================ */
.article-parcours {
  --parcours-couleur: var(--accent, #0095c8);
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0 0 0 1.75rem;
  border-left: 3px solid var(--parcours-couleur);
}
.article-parcours-etape {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 0;
}
.article-parcours-etape:last-child {
  margin-bottom: 0;
}
/* pastille sur la ligne */
.article-parcours-etape::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 9px);
  top: .3em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--parcours-couleur);
  box-sizing: border-box;
}
.article-parcours-annee {
  margin: 0 0 .25rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--parcours-couleur);
}
.article-parcours-texte {
  margin: 0;
}

/* ============================================================
   CARTE DOCUMENT PAS ENCORE DISPONIBLE — .article-doc-link--indisponible
   (div non cliquable, même look que .article-doc-link)
   ============================================================ */
.article-doc-link--indisponible {
  background: #f6f6f6;
  border-left-color: #8a8a8a;
  cursor: default;
}
.article-doc-link--indisponible:hover {
  transform: none;
  box-shadow: none;
}
.article-doc-link-statut {
  display: block;
  margin-top: .2rem;
  font-size: .85rem;
  font-weight: 400;
  font-style: italic;
  color: #555; /* contraste ≈ 6,9:1 sur #f6f6f6 */
}

/* ============================================================
   BOUTON PAS ENCORE DISPONIBLE — .article-pill--indisponible
   (span non cliquable, même forme que .article-pill)
   ============================================================ */
.article-pill.article-pill--indisponible,
.article-pill.article-pill--indisponible:hover,
.article-pill.article-pill--indisponible:focus {
  background: #e9e9e9;
  border-color: #bdbdbd;
  color: #555; /* contraste ≈ 6:1 sur #e9e9e9 */
  cursor: default;
  transform: none;
  box-shadow: none;
  text-decoration: none;
}
.article-pill-statut {
  font-weight: 400;
  font-style: italic;
}
/* ============================================================
   Pour le TOEIC
   ============================================================ */
.article-timeline-corps { flex: 1; min-width: 0; }
.article-timeline-corps > p { margin: 0 0 .5rem; }


/* Petit logo de spécialité dans un bouton (page Admission FISA…) */
.article-pill > img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}