/*****************************************************************************
 * Thème 2026 — polices, couleurs et composants
 * Chargé après mise_en_page_2026.css. Tout le thème passe par les variables
 * ci-dessous : changer une couleur ici la change partout.
 *****************************************************************************/

/* ---------- polices hébergées sur le site (pas d'appel à Google Fonts) ---------- */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('polices/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('polices/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('polices/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-weight: 500; font-style: normal; font-display: swap; src: url('polices/exo-2-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Exo 2'; font-weight: 700; font-style: normal; font-display: swap; src: url('polices/exo-2-latin-700-normal.woff2') format('woff2'); }

:root {
	--police-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--police-titres: 'Exo 2', 'Inter', system-ui, sans-serif;

	--nuit: #0f172a;			/* barre de menu, pied de page */
	--nuit-2: #1e293b;			/* survols sur fond nuit */
	--accent: #06b6d4;			/* cyan électrique */
	--accent-fonce: #0e7490;	/* liens sur fond clair (contraste AA) */
	--accent-clair: #ecfeff;
	--fond: #f1f5f9;			/* fond de page */
	--carte: #ffffff;			/* blocs */
	--bordure: #e2e8f0;
	--bordure-forte: #cbd5e1;
	--texte: #334155;
	--texte-doux: #64748b;
	--titre: #0f172a;
	--texte-inverse: #ffffff;	/* texte sur fond sombre */

	/* couleurs utilisées dans les pages (attributs style="…") */
	--succes: #15803d;			/* validé, présent, OK (ex-green) */
	--succes-fond: #dcfce7;
	--erreur: #b91c1c;			/* erreur, absent, refusé (ex-red, #c00, #a20000, #950000) */
	--erreur-fond: #fee2e2;
	--avertissement: #c2410c;	/* ex-orange */
	--info: #1d4ed8;			/* ex-blue */
	--surface: #f8fafc;			/* panneaux clairs (ex-#eee, #f5f5f5, #f0f0f0) */
	--surface-forte: #e2e8f0;	/* panneaux marqués, lignes d'en-tête (ex-#ddd, #ccc) */
	--surface-titre: #cbd5e1;	/* en-têtes de tableaux référentiels (ex-#bbb) */
	--neutre-fonce: #475569;	/* cases sombres (ex-#555) */
	--surligne: #fef9c3;		/* surlignage (ex-jaune) */

	--rayon: 10px;
	--ombre: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.06);
	--ombre-forte: 0 10px 30px rgba(15, 23, 42, 0.18);

	--hauteur-menu: 64px;
}

/* ---------- base ---------- */
html {
	scroll-padding-top: calc(var(--hauteur-menu) + 8px);	/* ancres non cachées par la barre */
}
body {
	font-family: var(--police-texte);
	font-size: 15px;
	line-height: 1.5;
	color: var(--texte);
	background: var(--fond);
}
@media screen and (max-width: 1300px) {
	body {
		font-size: 15px;
	}
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--police-titres);
	font-weight: 700;
	color: var(--titre);
	letter-spacing: 0.01em;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
a {
	color: var(--accent-fonce);
	transition: color 0.15s, background-color 0.15s;
}
a:hover {
	color: var(--accent);
	background-color: transparent;
}
p:first-letter {
	font-weight: inherit;
}
::selection {
	background: var(--accent);
	color: #fff;
}

/* ---------- barre de menu : plus haute, sombre, collée en haut au défilement ---------- */
nav {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--hauteur-menu);
	background: var(--nuit);
	border-bottom: 2px solid var(--accent);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
}
/* menu ☰ ouvert sur mobile : la barre redevient normale pour pouvoir faire défiler la liste */
nav:has(#ul_menu_principal.responsive) {
	position: relative;
}
#nav_etab img {
	height: 48px;
	border-radius: 6px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
#div_menu_principal ul#ul_menu_principal li,
#div_menu_principal ul#ul_menu_principal li:first-of-type {
	border: none;
}
#div_menu_principal ul#ul_menu_principal li a:link,
#div_menu_principal ul#ul_menu_principal li a:visited,
#div_menu_principal ul#ul_menu_principal li a.a_simple,
#div_menu_principal ul#ul_menu_principal li a.a_hover,
#div_menu_principal ul#ul_menu_principal li a.a_active {
	font-family: var(--police-titres);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: var(--hauteur-menu);
	padding: 0 18px;
	color: #e2e8f0;
	text-shadow: none !important;
	background-image: none;
	box-shadow: inset 0 -3px 0 transparent;
	transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
#div_menu_principal ul#ul_menu_principal li a.a_hover {
	color: #fff;
	background-color: var(--nuit-2);
}
#div_menu_principal ul#ul_menu_principal li a.a_active {
	color: var(--accent) !important;
	background-color: var(--nuit-2);
	box-shadow: inset 0 -3px 0 var(--accent);
}
/* logo OSEC à gauche de « Accueil » (dans le même lien) */
.logo_menu_osec {
	height: 40px;
	width: auto;
	margin-right: 10px;
	vertical-align: middle;
}
#img_cadenas_connexion {
	height: 44px;
	width: 44px;
	transition: transform 0.15s;
}
#img_cadenas_connexion:hover {
	transform: scale(1.08);
}

/* panneau des sous-menus */
#cadre_menu {
	background: var(--carte);
	background-image: none;
	border: 1px solid var(--bordure);
	border-top: none;
	border-radius: 0 0 var(--rayon) var(--rayon);
	box-shadow: var(--ombre-forte);
	padding: 16px;
}
#cadre_menu h1, #cadre_menu h2 {
	color: var(--titre);
	text-shadow: none;
}
#cadre_menu a {
	color: var(--accent-fonce);
}
#cadre_menu a:hover {
	color: var(--accent);
}
.sous_menu {
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	padding: 10px 14px;
	background: var(--carte);
	color: var(--texte);
}
/* contenu des sous-menus (smenu_*) centré dans le panneau déroulant */
#cadre_menu {
	text-align: center;
}
#cadre_menu .sous_menu {
	float: none;
	display: inline-block;
	vertical-align: top;
	margin: 0 6px 10px;
	text-align: left;
}

/* panneau de connexion */
#cadre_connexion,
.carte_connexion {
	border-color: var(--bordure);
	border-radius: var(--rayon);
	box-shadow: var(--ombre-forte);
}
.form_connexion input:focus {
	outline-color: var(--accent);
	border-color: var(--accent);
}
#cadre_connexion button,
#cadre_connexion input[type="submit"],
.carte_connexion button {
	background: var(--accent);
}
#cadre_connexion button:hover,
#cadre_connexion input[type="submit"]:hover,
.carte_connexion button:hover {
	background: var(--accent-fonce);
}

/* ---------- contenu ---------- */
section {
	background-color: transparent;
	padding-top: 20px;
}

/* blocs historiques (fond gris, bordure) : cartes blanches */
#left_1, #left_2, #left_3, #centre_1, #centre_3, #revisions, #meiigle, #expertsmei, #challenge_revisions,
#liste_tp, #reseaux_soc, #yt_video, #linux_3d, #mac_3d, #windows_3d,
#art_accueil_prof {
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
}
/* hauteurs figées de l'ancienne feuille : les blocs suivent leur contenu */
#left_1, #left_2, #centre_1, #challenge_revisions {
	height: auto;
	min-height: 0;
}
/* tuiles de l'accueil professeur */
#accueil_tp_cours, #accueil_evaluation, #accueil_progression, #accueil_ccf, #accueil_eleves, #accueil_gmao,
#accueil_administration, #accueil_etablissements, #accueil_ressources, #accueil_aide {
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-left: 4px solid var(--accent);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	transition: transform 0.15s, box-shadow 0.15s;
}
#accueil_tp_cours:hover, #accueil_evaluation:hover, #accueil_progression:hover, #accueil_ccf:hover, #accueil_eleves:hover, #accueil_gmao:hover,
#accueil_administration:hover, #accueil_etablissements:hover, #accueil_ressources:hover, #accueil_aide:hover {
	background: var(--accent-clair);
	border-color: var(--bordure);
	border-left-color: var(--accent);
	transform: translateX(3px);
}

/* bandeau de titre (fiche TP / cours) */
.bandeau_titre {
	margin: 4px 0 12px;
	padding: 12px 18px;
	background: var(--nuit);
	border-left: 5px solid var(--accent);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	color: #fff;
	font-family: var(--police-titres);
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}
/* cadre « Dernière mise à jour de l'appli » (accueil) */
.maj_appli {
	width: min(400px, 100%);
	margin: 10px auto 0;
	padding: 10px;
	background: var(--succes-fond);
	border: 1px solid var(--succes);
	border-radius: var(--rayon);
	text-align: center;
}
.maj_appli p {
	margin: 0;
	text-indent: 0;
	text-align: center;
	color: var(--succes);
	font-weight: 700;
}

/* ---------- classe inversée (classe_inversee.php) ---------- */
.ci_page {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
}
#classeinversee_menu {
	flex: 0 0 320px;
	min-height: 400px;
	padding: 10px;
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
}
#classeinversee_content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 400px;
	padding: 10px 20px;
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
}
#classeinversee_menu .mmenu,
#classeinversee_menu .mmenu ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
#classeinversee_menu .mmenu li.li_mmenu {
	border-top: 1px solid var(--bordure);
	background-color: var(--surface);
	padding: 10px;
	font-weight: bold;
}
#classeinversee_menu .mmenu li.li_mmenu:hover {
	background-color: var(--surface-forte);
	cursor: pointer;
}
#classeinversee_menu .smenu {
	display: none;
	margin: 10px -10px -10px -10px;
}
#classeinversee_menu .smenu li.li_smenu {
	background-color: var(--carte);
	border-top: 1px solid var(--bordure);
	font-weight: normal;
}
#classeinversee_menu .smenu li.li_smenu:hover {
	background-color: var(--accent-clair);
}
#classeinversee_menu li a {
	display: block;
	padding: 6px;
}
.lien_a:hover {
	text-decoration: underline;
}
.vues {
	font-size: 20px;
	color: var(--succes);
}
.vues:first-letter {
	font-weight: normal;
}
/* vidéo : occupe la largeur disponible, au format 16/9 */
.ci_video {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.ci_video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--rayon);
}
/* « Les plus vues » et « Les dernières » côte à côte */
.ci_listes {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 10px;
}
.ci_liste {
	flex: 1 1 360px;
	min-width: 0;
	padding: 0 14px 10px;
	background: var(--carte);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	font-size: 14px;
}
.ci_liste ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
.ci_liste li {
	padding: 3px 0;
	border-bottom: 1px solid var(--surface);
}
.ci_nb_vues {
	display: inline-block;
	min-width: 90px;
	text-align: right;
	white-space: nowrap;
}
@media screen and (max-width: 899px) {
	.ci_page {
		flex-direction: column;
		align-items: stretch;
	}
	#classeinversee_menu {
		flex-basis: auto;
		min-height: 0;
	}
}

/* ---------- formulaires ---------- */
fieldset {
	border: 1px solid var(--bordure-forte);
	border-radius: var(--rayon);
	background: var(--carte);
}
legend {
	font-family: var(--police-titres);
	font-weight: 500;
	font-style: normal;
	color: var(--titre);
	padding: 0 6px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"],
select, textarea {
	font-family: var(--police-texte);
	border: 1px solid var(--bordure-forte);
	border-radius: 6px;
	box-shadow: none;
	background-color: #fff;
	color: var(--texte);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="date"]:focus, select:focus, textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 0;
	border-color: var(--accent);
}
input[type="submit"], input[type="reset"], button {
	font-family: var(--police-texte);
	font-weight: 500;
	background: var(--accent-fonce);
	background-image: none;
	color: #fff;
	border: 1px solid var(--accent-fonce);
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
	padding: 0 14px;
	transition: background-color 0.15s;
}
input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
	background: var(--accent);
	background-image: none;
	border-color: var(--accent);
	box-shadow: none;
	color: #fff;
}

/* ---------- tableaux ---------- */
td, th {
	border-color: var(--bordure-forte);
}
th {
	background: #f8fafc;
	color: var(--titre);
}

/* ---------- pied de page ---------- */
footer {
	background: var(--nuit);
	background-image: none;
	color: #94a3b8;
	padding: 20px var(--marge);
	border-top: 2px solid var(--accent);
}
footer a {
	color: #e2e8f0;
}
footer a:hover {
	color: var(--accent);
}
/* logo OSEC en fin de pied de page */
.logo_footer_osec {
	height: 24px;
	width: auto;
	vertical-align: middle;
	opacity: 0.85;
	transition: opacity 0.15s;
}
footer a:hover .logo_footer_osec {
	opacity: 1;
}

/* ---------- écrans étroits ---------- */
@media screen and (max-width: 999px) {
	nav {
		height: auto;
		min-height: var(--hauteur-menu);
	}
	#nav_etab img {
		height: 40px;
	}
	#nav_etab,
	#zone_connexion {
		margin-top: 8px;
	}
	ul#ul_menu_principal.responsive {
		background: var(--nuit);
	}
	#as_accueil_prof > div {
		box-sizing: border-box;
		width: auto;
	}
}