@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900&display=swap");

/* =========================================================================
   Site du KI — feuille de style unique
   Basé sur le thème Phantom (HTML5 UP, licence CCA 3.0), réécrit et simplifié.

   Sommaire
     1. Réglages       — toutes les couleurs / tailles réglables ici
     2. Réinitialisation
     3. Typographie
     4. Structure      — wrapper, inner, header, menu, main, footer
     5. Composants     — boutons, icônes, listes, images, tableaux, tuiles
     6. Pages          — accueil, formations, équipe
   ========================================================================= */


/* =========================================================================
   1. RÉGLAGES
   Pour changer l'apparence du site, il suffit en général de toucher ici.
   ========================================================================= */

:root {
	/* Couleurs */
	--bleu:            #1794c8;   /* accent : liens survolés, bordures actives */
	--bleu-fonce:      #0b5cab;
	--nuit:            #0f172a;   /* bleu très sombre : boutons, en-tête */
	--encre:           #2c2d2d;   /* texte courant */
	--gris:            #475569;   /* texte secondaire */
	--gris-clair:      #64748b;   /* légendes */
	--bord:            #c9c9c9;
	--bord-doux:       rgba(148, 163, 184, 0.18);
	--fond:            #ffffff;
	--fond-alt:        #f6f6f6;   /* blocs mis en retrait */
	--fond-pied:       #e4e4e4;   /* pied de page */
	--fond-page:       linear-gradient(180deg, #edf4fb 0%, #f8fbff 36%, #ffffff 100%);

	/* Arrondis */
	--rayon:           4px;
	--rayon-l:         18px;
	--rayon-xl:        24px;
	--rayon-pilule:    999px;

	/* Ombres */
	--ombre:           0 14px 30px rgba(15, 23, 42, 0.08);
	--ombre-forte:     0 24px 70px rgba(15, 23, 42, 0.12);

	/* Espacements et largeurs */
	--gouttiere:       2.5em;     /* écart entre les tuiles / colonnes */
	--largeur-inner:   68em;      /* largeur max du contenu */
	--largeur-page:    1420px;    /* largeur max de la « carte » du site */
	--marge-bloc:      2em;       /* marge basse des paragraphes, listes… */
	--espace-header:   4rem;      /* hauteur de respiration au-dessus du logo */
	--espace-footer:   4.25rem;   /* hauteur de respiration sous le pied de page */

	/* Menu latéral */
	--menu-largeur:    15.5em;

	/* Typographie */
	--interlettrage:   0.15em;    /* écart entre les lettres des titres h2…h6 */
	--mesure:          880px;     /* largeur de la colonne de lecture */

	/* Animations */
	--duree:           0.2s;
	--duree-menu:      0.45s;
}


/* =========================================================================
   2. RÉINITIALISATION
   ========================================================================= */

*, *::before, *::after {
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img, svg {
	max-width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

button, input {
	font: inherit;
	color: inherit;
}

/* Neutralise toutes les animations tant que la page n'est pas chargée
   (la classe est retirée par assets/js/site.js). */
body.is-preload *,
body.is-preload *::before,
body.is-preload *::after {
	animation: none !important;
	transition: none !important;
}


/* =========================================================================
   3. TYPOGRAPHIE
   ========================================================================= */

body {
	background: var(--fond-page);
	color: var(--encre);
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: 300;
	line-height: 1.75;
	-webkit-text-size-adjust: none;
}

@media screen and (max-width: 1680px) { body { font-size: 14pt; } }
@media screen and (max-width: 1280px) { body { font-size: 12pt; } }
@media screen and (max-width: 480px)  { html, body { min-width: 320px; } }

a {
	color: inherit;
	text-decoration: none;
	border-bottom: dotted 1px rgba(88, 88, 88, 0.5);
	transition: color var(--duree) ease, border-bottom-color var(--duree) ease;
}

a:hover {
	color: var(--bleu);
	border-bottom-color: transparent;
}

strong, b { font-weight: 900; }
em, i     { font-style: italic; }

p {
	margin: 0 0 var(--marge-bloc) 0;
}

h1 {
	font-size: 2.75em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.035em;
	margin: 0 0 1em 0;
}

h2, h3, h4, h5, h6 {
	font-weight: 900;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: var(--interlettrage);
	margin: 0 0 var(--marge-bloc) 0;
}

h2 { font-size: 1.1em; }
h3 { font-size: 1em; }
h4, h5, h6 { font-size: 0.8em; }

/* Le paragraphe d'accroche colle au titre qui le précède. */
header p {
	margin-top: -1em;
}

/* Soulignement des titres de page. Sur le site d'origine il venait d'un
   <a href=""> vide ; c'est maintenant un style à part entière. */
.souligne {
	border-bottom: dotted 1px rgba(88, 88, 88, 0.5);
}

hr {
	border: 0;
	border-bottom: solid 1px var(--bord);
	margin: var(--marge-bloc) 0;
}

@media screen and (max-width: 980px) {
	h1 br, h2 br, h3 br { display: none; }
}

@media screen and (max-width: 736px) {
	h1 { font-size: 2em; }
	h2 { font-size: 1em; }
	h3 { font-size: 0.8em; }
	header p { margin-top: 0; }
}

@media screen and (max-width: 360px) {
	h1 { font-size: 1.75em; }
}


/* =========================================================================
   4. STRUCTURE
   ========================================================================= */

/* --- La « carte » qui contient tout le site --- */

#wrapper {
	max-width: var(--largeur-page);
	margin: 24px auto;
	background: rgba(255, 255, 255, 0.96);
	border-radius: var(--rayon-xl);
	box-shadow: var(--ombre-forte);
	overflow: hidden;
	opacity: 1;
	transition: opacity var(--duree-menu) ease;
}

/* Colonne de contenu centrée, commune à l'en-tête, au corps et au pied. */
.inner {
	width: 100%;
	max-width: var(--largeur-inner);
	margin: 0 auto;
	padding: 0 var(--gouttiere);
}


/* --- En-tête --- */

#header {
	padding: var(--espace-header) 0 0.1em 0;
	background: linear-gradient(135deg, rgba(9, 18, 39, 0.88), rgba(11, 92, 171, 0.82));
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px rgba(15, 23, 42, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

#header .inner {
	min-height: 5.75rem;
	padding-left: 6rem;      /* laisse la place au bouton de menu */
	padding-right: 6rem;
	text-align: center;
}

#header .logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	max-width: 100%;
	margin: 0 auto;
	border-bottom: 0;
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.16));
}

#header .logo img {
	width: 2.55em;
	height: 2.55em;
}

/* Le titre du logo garde le soulignement pointillé des liens. */
#header .logo .title {
	font-size: 1em;
	letter-spacing: 0.16em;
	white-space: nowrap;
	color: #ffffff;
	border-bottom: dotted 1px rgba(88, 88, 88, 0.5);
	transition: color var(--duree) ease, border-bottom-color var(--duree) ease;
}

#header .logo:hover .title {
	color: var(--bleu);
	border-bottom-color: transparent;
}


/* --- Bouton d'ouverture du menu (fixe en haut à gauche) --- */

.menu-bouton {
	position: fixed;
	left: 2em;
	top: 2em;
	z-index: 10000;
	display: block;
	width: 3rem;
	height: 3rem;
	/* Le bouton reste fixe au défilement : il passe donc de l'en-tête bleu au
	   contenu blanc. Son fond doit être sombre et opaque pour rester visible
	   dans les deux cas — un fond translucide clair disparaissait sur le blanc. */
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--rayon-pilule);
	background: rgba(15, 23, 42, 0.82);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	transition: background-color var(--duree) ease;
	-webkit-tap-highlight-color: transparent;
}

.menu-bouton:hover {
	background: var(--bleu-fonce);
}

.menu-bouton::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.1em;
	height: 1.1em;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	mask: var(--icone-menu) center / contain no-repeat;
	-webkit-mask: var(--icone-menu) center / contain no-repeat;
}

.menu-bouton:hover::before {
	background-color: #ffffff;
}


/* --- Menu latéral --- */

#menu {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--menu-largeur);
	max-width: 72%;
	height: 100%;
	z-index: 10002;
	background: linear-gradient(180deg, rgba(8, 15, 32, 0.98), rgba(14, 23, 44, 0.98));
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 24px 0 80px rgba(15, 23, 42, 0.35);
	color: #ffffff;
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform var(--duree-menu) ease, visibility var(--duree-menu);
}

#menu .inner {
	position: absolute;
	inset: 0;
	max-width: none;
	padding: 2.75em;
	overflow-y: auto;
	opacity: 0;
	transition: opacity var(--duree-menu) ease;
}

#menu h2 {
	margin: 0 0 2rem 0;
	letter-spacing: 0.18em;
	text-align: center;
}

#menu ul {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 0.8rem;
}

#menu a {
	position: relative;
	display: block;
	padding: 0.95rem 1rem 0.95rem 2.85rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

/* Chaque entrée porte son icône via l'attribut data-icone (voir § icônes). */
#menu a::before {
	content: '';
	position: absolute;
	left: 1rem;
	top: 50%;
	width: 1em;
	height: 1em;
	transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.9);
	mask: var(--icone) center / contain no-repeat;
	-webkit-mask: var(--icone) center / contain no-repeat;
}

#menu a:hover {
	background: rgba(23, 148, 200, 0.18);
	border-color: rgba(23, 148, 200, 0.4);
	color: #ffffff;
}

#menu .menu-logo {
	display: block;
	max-width: 120px;
	margin: 1.5rem auto 0 auto;
}

/* Bouton de fermeture, à droite du panneau. */
#menu .close {
	position: absolute;
	top: 2em;
	left: var(--menu-largeur);
	width: 3em;
	height: 3em;
	border: 0;
	background: transparent;
	opacity: 0;
	transform: scale(0.25) rotate(180deg);
	transition: opacity var(--duree-menu) ease, transform var(--duree-menu) ease;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#menu .close::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--encre);
	mask: var(--icone-croix) center / 2em 2em no-repeat;
	-webkit-mask: var(--icone-croix) center / 2em 2em no-repeat;
	transition: background-color var(--duree) ease;
}

#menu .close:hover::before {
	background-color: var(--bleu);
}

/* État ouvert : piloté par la classe posée sur <body> par site.js. */
body.is-menu-visible #wrapper {
	opacity: 0.25;
	pointer-events: none;
}

body.is-menu-visible #menu {
	transform: translateX(0);
	visibility: visible;
}

body.is-menu-visible #menu .inner {
	opacity: 1;
}

body.is-menu-visible #menu .close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}


/* --- Corps --- */

#main {
	padding: 0 0 6em 0;
}

/* Toute la page tient dans une seule colonne de lecture, centrée : titres,
   texte, images, tuiles et bandeaux partagent donc le même bord gauche et
   le même bord droit, et l'espace restant se répartit des deux côtés au
   lieu de s'accumuler à droite. */
#main .inner,
#footer .inner {
	max-width: calc(var(--mesure) + 2 * var(--gouttiere));
}

#main .inner {
	margin-top: 3em;
}

#main .inner > p,
.intro {
	color: var(--gris);
}

/* Pages de contenu : moins d'air entre le texte et le pied de page. */
#main .inner.serre {
	margin-bottom: -4.4rem;
}


/* --- Pied de page --- */

#footer {
	padding: 5em 0 var(--espace-footer) 0;
	background-color: var(--fond-pied);
}

#footer .inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0 5em;
}

#footer .inner > * > :last-child {
	margin-bottom: 0;
}


/* --- Réglages de structure sur petits écrans --- */

@media screen and (max-width: 1280px) {
	:root { --espace-footer: 0.75rem; }
	#footer .inner { gap: 0 2.5em; }
}

@media screen and (max-width: 980px) {
	:root {
		--espace-header: 5rem;
		--espace-footer: 1.5rem;
	}

	#wrapper {
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}

	#main .inner {
		padding-left: 1.25em;
		padding-right: 1.25em;
	}
}

@media screen and (max-width: 736px) {
	:root {
		--espace-header: 2.125rem;
		--espace-footer: 0;
	}

	.inner { padding: 0 1.25em; }

	#header .inner {
		min-height: 5.25rem;
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}

	#header .logo {
		font-size: 1rem;
		gap: 0.65rem;
	}

	#header .logo img { display: none; }
	#header .logo .title { font-size: 1.1em; }

	.menu-bouton {
		left: 0.5em;
		top: 0.5em;
		width: 2.75rem;
		height: 2.75rem;
	}

	#menu {
		--menu-largeur: 13em;
		width: var(--menu-largeur);
		max-width: 78%;
	}

	#menu .inner { padding: 2.4em 1.15em 2.2em 1.15em; }
	#menu a { padding: 0.95rem 0.85rem 0.95rem 2.65rem; font-size: 0.76rem; }
	#menu h2 { font-size: 0.95em; margin-bottom: 1.25rem; }
	#menu ul { margin-top: 0.6rem; }
	#menu .menu-logo { margin-top: 2.75rem; }
	#menu .close { top: 0.5em; }

	#main   { padding-bottom: 4em; }
	#footer { padding-top: 3em; }

	#footer .inner {
		grid-template-columns: 1fr;
		gap: 3em 0;
	}

	/* Le bloc « Contactez-nous » passe en premier. */
	#footer .inner section:nth-child(2) { order: -1; }
}

/* Écrans peu hauts : le menu doit tenir sans défilement. */
@media screen and (max-height: 760px) {
	#menu .inner { padding-top: 2rem; padding-bottom: 1.8rem; }
	#menu h2 { margin-bottom: 1.45rem; }
	#menu ul { gap: 0.6rem; margin-top: 0.35rem; }
	#menu a { padding-top: 0.85rem; padding-bottom: 0.85rem; }
	#menu .menu-logo { margin-top: 3rem; }
}


/* =========================================================================
   5. COMPOSANTS
   ========================================================================= */

/* --- Icônes -------------------------------------------------------------
   Une icône = un dessin SVG rangé dans la variable --icone, affiché comme
   un masque coloré par la couleur du texte. Pour ajouter une icône :
   ajouter une ligne [data-icone="…"] ci-dessous, et poser l'attribut
   data-icone correspondant dans le HTML.
   ----------------------------------------------------------------------- */

[data-icone="accueil"]    { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6.5h-5V21H5a1 1 0 0 1-1-1v-9.5z'/%3E%3C/svg%3E"); }
[data-icone="upont"]      { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v12H4zM6 8v8h12V8H6zm1 11h10v1H7z'/%3E%3C/svg%3E"); }
[data-icone="kiro"]       { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l1 3h4v4h-1l-1 8H6L5 9H4V5h4l1-3zm1.5 7h3v7h-3V9zm0-4h3v2h-3V5z'/%3E%3C/svg%3E"); }
[data-icone="formations"] { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v10H4zM7 16h10v2H7zM10 18h4v1h-4z'/%3E%3C/svg%3E"); }
[data-icone="jeux"]       { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4h4v2h6v12H4V6h6V4zm2 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); }
[data-icone="projets"]    { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h12l2 4-2 2v10H6V10L4 8l2-4zm2 2 1 2h6l1-2H8zm1 6v6h2v-6H9zm4 0v6h2v-6h-2z'/%3E%3C/svg%3E"); }
[data-icone="aide"]       { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 6h2v2h-2V6zm0 4h2v8h-2v-8zm1-8a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/%3E%3C/svg%3E"); }
[data-icone="equipe"]     { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C8 3 5 6 5 10c0 4 3 8 7 11 4-3 7-7 7-11 0-4-3-7-7-7zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E"); }
[data-icone="contact"]    { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v12H4zM5.5 7.5v9h13v-9h-13zm1 1h11l-5.5 4-5.5-4z'/%3E%3C/svg%3E"); }
[data-icone="facebook"]   { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h2V5h-2c-2.2 0-4 1.8-4 4v2H8v3h2v7h3v-7h2.5l.5-3H13V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E"); }
[data-icone="github"]     { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-3.16 19.48c.5.09.68-.22.68-.48v-1.67c-2.77.61-3.35-1.18-3.35-1.18-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.61.07-.61 1 .07 1.52 1.03 1.52 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.64-1.33-2.21-.25-4.54-1.1-4.54-4.89 0-1.08.38-1.96 1.02-2.65-.1-.25-.44-1.27.1-2.64 0 0 .84-.27 2.75 1.01A9.57 9.57 0 0 1 12 7.2c.85 0 1.7.12 2.5.34 1.91-1.28 2.75-1.01 2.75-1.01.54 1.37.2 2.39.1 2.64.64.69 1.02 1.57 1.02 2.65 0 3.8-2.33 4.63-4.55 4.88.36.31.69.92.69 1.86v2.75c0 .26.18.58.69.48A10 10 0 0 0 12 2z'/%3E%3C/svg%3E"); }
[data-icone="email"]      { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2zm0 3.2V17h16V8.2l-8 5.2-8-5.2zM20 7H4l8 5.2L20 7z'/%3E%3C/svg%3E"); }
[data-icone="linkedin"]   { --icone: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 6.5a1.94 1.94 0 1 1 0-3.88 1.94 1.94 0 0 1 0 3.88zM5.5 20h2.88V8.75H5.5V20zM10.38 8.75H13.1v1.54h.04c.38-.71 1.33-1.46 2.74-1.46 2.93 0 3.47 1.93 3.47 4.44V20h-2.87v-5.58c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.15 1.45-2.15 2.95V20h-2.88V8.75z'/%3E%3C/svg%3E"); }

/* Icônes d'interface (menu hamburger, croix de fermeture). */
:root {
	--icone-menu:  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg stroke='black' stroke-width='8'%3E%3Cline x1='0' y1='25' x2='100' y2='25'/%3E%3Cline x1='0' y1='50' x2='100' y2='50'/%3E%3Cline x1='0' y1='75' x2='100' y2='75'/%3E%3C/g%3E%3C/svg%3E");
	--icone-croix: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg stroke='black' stroke-width='8'%3E%3Cline x1='15' y1='15' x2='85' y2='85'/%3E%3Cline x1='85' y1='15' x2='15' y2='85'/%3E%3C/g%3E%3C/svg%3E");
}

/* Pastille carrée entourant une icône (réseaux sociaux du pied de page). */
.icone-pastille {
	display: inline-block;
	width: 2.65em;
	height: 2.65em;
	border: solid 1px var(--bord);
	border-radius: var(--rayon);
	line-height: 2.65em;
	text-align: center;
	transition: color var(--duree) ease-in-out, border-color var(--duree) ease-in-out;
}

.icone-pastille::before {
	content: '';
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	vertical-align: middle;
	background-color: currentColor;
	mask: var(--icone) center / contain no-repeat;
	-webkit-mask: var(--icone) center / contain no-repeat;
}

.icone-pastille:hover {
	color: var(--bleu);
	border-color: var(--bleu);
}

/* Le libellé reste dans le HTML pour les lecteurs d'écran, sans s'afficher. */
.label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* --- Listes ------------------------------------------------------------ */

/* Les listes de texte (sans classe) gardent leurs puces ; les listes
   qui portent une classe (actions, icones…) sont mises en forme plus bas. */
#main ul:not([class]),
#main ol:not([class]) {
	margin: 0 0 var(--marge-bloc) 0;
	padding-left: 1.25em;
}

#main ul:not([class]) { list-style: disc; }
#main ol:not([class]) { list-style: decimal; }

/* Liste horizontale de boutons. */
ul.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 0.5rem;     /* respiration entre le texte et les boutons */
	margin: 0 0 var(--marge-bloc) 0;
}

/* Liste horizontale d'icônes. */
ul.icones {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0 0 var(--marge-bloc) 0;
}

@media screen and (max-width: 480px) {
	ul.actions {
		flex-direction: column;
		gap: 1em;
	}

	ul.actions > li > * { width: 100%; }
}


/* --- Boutons ----------------------------------------------------------- */

button,
input[type="button"],
input[type="submit"],
.button {
	display: inline-block;
	height: 3.5em;
	padding: 0 1.6em;
	border: 0;
	border-radius: var(--rayon-pilule);
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--encre), 0 10px 24px rgba(15, 23, 42, 0.10);
	color: var(--encre);
	font-size: 0.8em;
	font-weight: 900;
	line-height: 3.45em;
	letter-spacing: 0.35em;
	text-align: center;
	text-transform: uppercase;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition: transform var(--duree) ease, box-shadow var(--duree) ease,
	            background-color var(--duree) ease, color var(--duree) ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 2px var(--bleu), 0 14px 28px rgba(15, 23, 42, 0.14);
	color: var(--bleu);
}

button.primary,
input[type="button"].primary,
input[type="submit"].primary,
.button.primary {
	background: linear-gradient(135deg, var(--nuit), var(--bleu-fonce));
	box-shadow: 0 14px 30px rgba(11, 92, 171, 0.24);
	color: #ffffff;
}

button.primary:hover,
input[type="button"].primary:hover,
input[type="submit"].primary:hover,
.button.primary:hover {
	background: linear-gradient(135deg, var(--bleu-fonce), var(--bleu));
	box-shadow: 0 14px 30px rgba(11, 92, 171, 0.32);
	color: #ffffff;
}

button:disabled,
.button.disabled {
	opacity: 0.25;
	pointer-events: none;
}


/* --- Images ------------------------------------------------------------
   <span class="image"><img …></span> occupe toute la colonne de lecture,
   donc les mêmes bords que les titres et le texte.
   ----------------------------------------------------------------------- */

.image {
	display: block;
	width: 100%;
	margin: 0 0 var(--marge-bloc) 0;
	border-radius: var(--rayon);
}

.image img {
	display: block;
	width: 100%;
	border-radius: inherit;
}

/* Partenaires : une tuile par logo, toutes de même taille. Les logos ont
   des formes très différentes (Air France est 11 fois plus large que haut,
   les autres sont carrés) ; leur donner chacun son cadre suffit à ce que
   l'écart cesse de se voir. */
.partenaires {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	gap: 1.25em;
	margin: 0 0 var(--marge-bloc) 0;
	padding-left: 0;
}

.partenaires li {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bord-doux);
	border-radius: var(--rayon-l);
	background: var(--fond);
	box-shadow: var(--ombre);
	overflow: hidden;
}

.partenaires img {
	width: 100%;
	height: 6em;
	padding: 1.25em;
	object-fit: contain;
}

.partenaires .legende {
	border-top: 1px solid var(--bord-doux);
	padding: 0.9em 1em;
	text-align: center;
	font-size: 0.95em;
	line-height: 1.4;
}

.partenaires .annee {
	display: block;
	color: var(--gris-clair);
	font-size: 0.9em;
}

/* Le logotype LaTeX, dont chaque lettre est décalée. */
.latex {
	font-family: serif;
	margin-right: -0.7em;
}

.latex span { position: relative; }
.latex span:nth-of-type(1) { font-size: 0.9em; top: -0.1em; left: -0.4em; }  /* A */
.latex span:nth-of-type(2) { left: -0.5em; }                                 /* T */
.latex span:nth-of-type(3) { top: 0.2em; left: -0.6em; }                     /* E */
.latex span:nth-of-type(4) { left: -0.7em; }                                 /* X */


/* --- Tableaux ---------------------------------------------------------- */

table {
	width: 100%;
	margin: 0 0 var(--marge-bloc) 0;
}

table td {
	padding: 0.75em;
}

table th {
	padding: 0 0.75em 0.75em 0.75em;
	font-size: 0.9em;
	font-weight: 900;
	text-align: left;
}

table tbody tr {
	border-top: solid 1px var(--bord);
	border-bottom: solid 1px var(--bord);
}

table tbody tr:nth-child(odd) {
	background-color: rgba(144, 144, 144, 0.075);
}


/* --- Tuiles (grille de la page d'accueil) ------------------------------ */

.tiles {
	--gap: var(--gouttiere);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: calc(4em + var(--gap));   /* écart avec le texte d'intro */
}

.tiles article {
	position: relative;
	transition: transform 0.5s ease, opacity 0.5s ease;
}

.tiles .image {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	transition: transform 0.5s ease;
}

/* Voile sombre au-dessus de l'image, qui s'assombrit au survol. */
.tiles .image::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(64, 64, 64, 0.5);
	pointer-events: none;
	transition: background-color 0.5s ease;
}

.tiles article > a {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1em;
	border: 0;
	border-radius: var(--rayon);
	color: #ffffff;
	text-align: center;
}

.tiles article > a:hover { color: #ffffff; }
.tiles article h2 { margin: 0; }

.tiles .content {
	width: 100%;
	margin-top: 0.35em;
	line-height: 1.5;
}

.tiles .content > :last-child { margin-bottom: 0; }

/* Sur les appareils qui ont un vrai survol, le texte n'apparaît qu'au survol. */
@media (hover: hover) {
	.tiles .content {
		max-height: 0;
		opacity: 0;
		transition: max-height 0.5s ease, opacity 0.5s ease;
	}

	.tiles article:hover > .image { transform: scale(1.1); }
	.tiles article:hover > .image::after { background-color: rgba(17, 17, 17, 0.8); }

	.tiles article:hover .content {
		max-height: 15em;
		opacity: 1;
	}
}

/* Apparition des tuiles au chargement de la page. */
body.is-preload .tiles article {
	transform: scale(0.9);
	opacity: 0;
}

@media screen and (max-width: 1280px) { .tiles { --gap: 1.25em; } }

@media screen and (max-width: 980px) {
	.tiles {
		--gap: var(--gouttiere);
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 736px) {
	.tiles { --gap: 1.25em; }
	.tiles article:hover > .image { transform: none; }
}

@media screen and (max-width: 480px) {
	.tiles { grid-template-columns: 1fr; }
}


/* =========================================================================
   6. PAGES
   ========================================================================= */

/* --- Bandeau à deux colonnes (pages Formations et Projets) -------------
   <div class="bandeau">          image à gauche (25 %), texte à droite
   <div class="bandeau inverse">  texte à gauche (75 %), image à droite
   ----------------------------------------------------------------------- */

.bandeau {
	margin: 2em 0;
	padding: 2em 3em 1.5em 0;
	background-color: var(--fond-alt);
}

.bandeau > .colonnes {
	display: grid;
	grid-template-columns: calc(25% - 5em) 75%;
	gap: 0 5em;
	align-items: start;
	margin-left: 3em;
}

.bandeau.inverse > .colonnes {
	grid-template-columns: 75% calc(25% - 5em);
}

.bandeau > .colonnes > * > :last-child {
	margin-bottom: 0;
}

.bandeau img {
	width: 100%;
}

@media screen and (max-width: 1280px) {
	.bandeau { padding-right: 0; }

	.bandeau > .colonnes          { grid-template-columns: calc(25% - 6em) 75%; gap: 0 4em; }
	.bandeau.inverse > .colonnes  { grid-template-columns: 75% calc(25% - 6em); }
}

@media screen and (max-width: 980px) {
	.bandeau > .colonnes          { grid-template-columns: 33% calc(66% - 2.5em); gap: 0 2.5em; }
	.bandeau.inverse > .colonnes  { grid-template-columns: calc(66% - 2.5em) 33%; }
}

@media screen and (max-width: 736px) {
	.bandeau { padding: 3em 3em 3em 0; }

	.bandeau > .colonnes,
	.bandeau.inverse > .colonnes {
		grid-template-columns: 1fr;
		gap: 1.5em;
	}

	/* En colonne unique, le texte passe toujours avant l'image. */
	.bandeau > .colonnes > section:nth-child(2) { order: -1; }
	.bandeau.inverse > .colonnes > section:nth-child(2) { order: 0; }
}


/* --- Page Équipe ------------------------------------------------------- */

.team-hero {
	margin: 0 0 2rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: var(--rayon-xl);
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(23, 148, 200, 0.08));
}

.team-highlights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2.5rem 0;
}

.team-highlight-card {
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: 20px;
	background: var(--fond);
	box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

.team-highlight-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.team-highlight-card figcaption {
	padding: 1rem 1rem 1.15rem 1rem;
}

.team-highlight-card strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--nuit);
	font-size: 1.05rem;
}

.team-highlight-card span {
	color: var(--gris-clair);
	font-size: 0.95rem;
}

/* La liste des promotions garde sa police d'origine (Arial) ;
   supprimer cette règle pour l'aligner sur le reste du site. */
.promos {
	font-family: Arial, Helvetica, sans-serif;
}

/* Promotions dépliables : balises <details>/<summary> natives, sans JS. */
.promo {
	margin: 0 0 1.25rem 0;
}

.promo > summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

.promo > summary::-webkit-details-marker { display: none; }

/* Le bouton d'une promotion est plus compact que les boutons courants.
   On centre en flex : le line-height du bouton standard ne convient pas
   dès qu'on ajoute du padding vertical. */
.promo > summary .button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 3.5em;
	padding: 0.85rem 1.15rem;
	line-height: 1.2;
	letter-spacing: 0.06em;
}

.promo > .promo-corps {
	margin-top: 0.85rem;
	padding: 1rem;
	border: 1px solid var(--bord-doux);
	border-radius: var(--rayon-l);
	background: var(--fond);
	box-shadow: var(--ombre);
}

.promo-photo {
	display: block;
	width: 100%;
	max-width: 760px;
	margin: 0 auto 1rem auto;
	border-radius: 16px;
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

.promo table {
	display: block;
	overflow-x: auto;
	margin: 0;
}

.promo th,
.promo td {
	padding: 0.8rem 0.9rem;
	border-bottom: 1px solid #e2e8f0;
}

.promo th {
	color: var(--gris-clair);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media screen and (max-width: 980px) {
	.team-highlights { grid-template-columns: 1fr; }
}

@media screen and (max-width: 736px) {
	.team-hero { padding: 1rem; }
	.team-highlight-card figcaption { padding: 0.9rem; }
	.promo > summary,
	.promo > summary > .button { width: 100%; }
}


/* --- Page 404 ---------------------------------------------------------- */

.erreur {
	margin-top: 2%;
	text-align: center;
}