/* ==========================================================================
   Espace formation « Selling with AI · Le Système »
   Charte Nuit & Or : primaire #0B1226, or #E6C879, ardoise #1C2236,
   neutre #F2F4FB. Règle ferme : l'or ne porte jamais de texte sur fond
   clair ; il sert de filet, de pastille et d'accent.
   ========================================================================== */

@font-face {
	font-family: "Zn Alerio";
	src: url("../fonts/ZnAlerioVariable-VF.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/generalsans-300.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/generalsans-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/generalsans-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/generalsans-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

:root {
	--fo-navy: #0B1226;
	--fo-or: #E6C879;
	--fo-ardoise: #1C2236;
	--fo-neutre: #F2F4FB;
	--fo-blanc: #FFFFFF;
	--fo-texte: #1C2236;
	--fo-texte-doux: #4A5170;
	--fo-filet: #DDE2F0;
	--fo-radius: 14px;
	--fo-max: 760px;
}

.formation-body {
	margin: 0;
	background: var(--fo-neutre);
	color: var(--fo-texte);
	font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.05rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.formation-body h1,
.formation-body h2,
.formation-body h3 {
	font-family: "Zn Alerio", Georgia, serif;
	color: var(--fo-navy);
	line-height: 1.15;
	margin: 0 0 0.6em;
}

/* ---- Bandeau supérieur (ardoise, filet or) ------------------------------ */
.formation-header {
	background: var(--fo-navy);
	border-bottom: 3px solid var(--fo-or);
	color: var(--fo-blanc);
}
.formation-header-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0.9rem 1.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.formation-brand {
	font-family: "Zn Alerio", Georgia, serif;
	font-size: 1.15rem;
	color: var(--fo-blanc);
	text-decoration: none;
	letter-spacing: 0.01em;
}
.formation-brand span { color: var(--fo-or); }
.formation-header-nav {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	font-size: 0.92rem;
}
.formation-header-nav a {
	color: var(--fo-neutre);
	text-decoration: none;
	opacity: 0.85;
}
.formation-header-nav a:hover { opacity: 1; }

/* ---- Corps de leçon ----------------------------------------------------- */
.formation-main {
	max-width: var(--fo-max);
	margin: 0 auto;
	padding: 2.5rem 1.4rem 4rem;
}
.formation-fil {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--fo-texte-doux);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1rem;
}
.formation-fil::before {
	content: "";
	width: 26px;
	height: 3px;
	background: var(--fo-or);
	border-radius: 2px;
}
.formation-titre { font-size: clamp(1.8rem, 4vw, 2.6rem); }

.formation-contenu { margin-top: 1.8rem; }
.formation-contenu img {
	max-width: 100%;
	border-radius: var(--fo-radius);
}
.formation-contenu a { color: var(--fo-navy); }
.formation-contenu figure { margin: 2rem 0; }
.formation-contenu hr {
	border: none;
	border-top: 1px solid var(--fo-filet);
	margin: 2.5rem 0;
}
.formation-contenu blockquote {
	margin: 2rem 0;
	padding: 1rem 1.4rem;
	background: var(--fo-blanc);
	border-left: 4px solid var(--fo-or);
	border-radius: 0 var(--fo-radius) var(--fo-radius) 0;
}

/* Trames à recopier (blocs préformatés des exercices) : carte blanche,
   filet or à gauche, chasse fixe pour préserver l'alignement en colonnes */
.formation-contenu pre {
	margin: 2rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--fo-blanc);
	border: 1.5px solid var(--fo-filet);
	border-left: 4px solid var(--fo-or);
	border-radius: 0 var(--fo-radius) var(--fo-radius) 0;
	overflow-x: auto;
	font-size: 0.8em;
	line-height: 1.6;
}
.formation-contenu pre code {
	display: block;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	background: none;
	color: var(--fo-texte);
	white-space: pre;
}

/* Tableaux des fiches et exercices : bordures fines, en-tête souligné or */
.formation-contenu table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	background: var(--fo-blanc);
	border: 1.5px solid var(--fo-filet);
	border-radius: var(--fo-radius);
	font-size: 0.95em;
}
.formation-contenu th,
.formation-contenu td {
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--fo-filet);
	text-align: left;
	vertical-align: top;
}
.formation-contenu th {
	color: var(--fo-navy);
	border-bottom: 2px solid var(--fo-or);
	background: var(--fo-neutre);
}
@media (max-width: 640px) {
	.formation-contenu table {
		display: block;
		overflow-x: auto;
	}
}

/* Vidéo Tella : plein cadre 16/9, avant tout habillage */
.formation-contenu .kg-embed-card,
.formation-video {
	position: relative;
	margin: 2rem 0;
	border-radius: var(--fo-radius);
	overflow: hidden;
	background: var(--fo-navy);
	box-shadow: 0 10px 30px rgba(11, 18, 38, 0.18);
}
.formation-contenu .kg-embed-card iframe,
.formation-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ---- Progression -------------------------------------------------------- */
.formation-terminer {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2.4rem;
	padding: 0.75rem 1.4rem;
	border: 1.5px solid var(--fo-navy);
	border-radius: 999px;
	background: var(--fo-blanc);
	color: var(--fo-navy);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.formation-terminer[aria-pressed="true"] {
	background: var(--fo-navy);
	color: var(--fo-blanc);
	border-color: var(--fo-navy);
}
.formation-terminer[aria-pressed="true"]::before {
	content: "✓";
	color: var(--fo-or);
	font-weight: 600;
}

/* ---- Navigation précédent / suivant ------------------------------------- */
.formation-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2.6rem;
	padding-top: 2rem;
	border-top: 1px solid var(--fo-filet);
}
.formation-nav a {
	display: block;
	padding: 1.1rem 1.3rem;
	background: var(--fo-blanc);
	border: 1px solid var(--fo-filet);
	border-radius: var(--fo-radius);
	text-decoration: none;
	color: var(--fo-texte);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.formation-nav a:hover {
	border-color: var(--fo-or);
	transform: translateY(-2px);
}
.formation-nav a.is-next { text-align: right; }
.formation-nav .formation-nav-role {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fo-texte-doux);
	margin-bottom: 0.3rem;
}
.formation-nav .formation-nav-titre {
	font-family: "Zn Alerio", Georgia, serif;
	color: var(--fo-navy);
	font-size: 1.02rem;
}
.formation-nav .is-vide { visibility: hidden; }

/* ---- Sommaire ----------------------------------------------------------- */
.formation-sommaire-tete { margin-bottom: 2.2rem; }
.formation-progression {
	margin: 1.6rem 0 0;
	background: var(--fo-blanc);
	border: 1px solid var(--fo-filet);
	border-radius: var(--fo-radius);
	padding: 1.1rem 1.4rem;
}
.formation-progression-libelle {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--fo-texte-doux);
	margin-bottom: 0.55rem;
}
.formation-progression-barre {
	height: 8px;
	background: var(--fo-neutre);
	border-radius: 999px;
	overflow: hidden;
}
.formation-progression-barre > span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--fo-or), #d4b25c);
	border-radius: 999px;
	transition: width 0.4s ease;
}

.formation-module { margin-bottom: 2.2rem; }
.formation-module-titre {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-size: 1.25rem;
	margin-bottom: 0.9rem;
}
.formation-module-titre .formation-module-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--fo-or);
	color: var(--fo-navy);
	font-family: "General Sans", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
}
.formation-lecons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}
.formation-lecons a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.15rem;
	background: var(--fo-blanc);
	border: 1px solid var(--fo-filet);
	border-radius: var(--fo-radius);
	color: var(--fo-texte);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.formation-lecons a:hover { border-color: var(--fo-or); }
.formation-lecons .formation-lecon-etat {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	border: 1.5px solid var(--fo-filet);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	color: transparent;
}
.formation-lecons li.is-terminee .formation-lecon-etat {
	background: var(--fo-navy);
	border-color: var(--fo-navy);
	color: var(--fo-or);
}
.formation-lecons li.is-terminee .formation-lecon-etat::before { content: "✓"; }
.formation-lecons .formation-lecon-duree {
	margin-left: auto;
	font-size: 0.85rem;
	color: var(--fo-texte-doux);
	white-space: nowrap;
}

/* ---- Accès refusé (visiteur sans le tier Formation) --------------------- */
.formation-cta {
	max-width: 560px;
	margin: 3rem auto 0;
	background: var(--fo-blanc);
	border: 1px solid var(--fo-filet);
	border-top: 4px solid var(--fo-or);
	border-radius: var(--fo-radius);
	padding: 2.2rem 2rem;
	text-align: center;
}
.formation-cta h2 { font-size: 1.45rem; }
.formation-cta p { color: var(--fo-texte-doux); }
.formation-cta .formation-cta-bouton {
	display: inline-block;
	margin-top: 0.8rem;
	padding: 0.8rem 1.7rem;
	background: var(--fo-navy);
	color: var(--fo-blanc);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 500;
}
.formation-cta .formation-cta-secondaire {
	display: block;
	margin-top: 1.1rem;
	font-size: 0.9rem;
}
.formation-cta .formation-cta-secondaire a { color: var(--fo-navy); }

/* ---- Pied de page ------------------------------------------------------- */
.formation-footer {
	border-top: 1px solid var(--fo-filet);
	padding: 1.6rem 1.4rem 2.2rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--fo-texte-doux);
}
.formation-footer a { color: var(--fo-texte-doux); }

@media (max-width: 640px) {
	.formation-nav { grid-template-columns: 1fr; }
	.formation-nav a.is-next { text-align: left; }
}

/* ---- Blocs des pages de leçons (étape 8) --------------------------------
   Corrigés repliables (fermés par défaut), fiche commune d'installation,
   téléchargements et renvois entre leçons. Le HTML des pages est produit
   par outils/pages-formation.py (dépôt Formation-en-ligne-IA-commerciaux). */
.formation-contenu details.formation-corrige,
.formation-contenu details.formation-repli {
	margin: 2rem 0;
	border: 1.5px solid var(--fo-filet);
	border-radius: var(--fo-radius);
	background: var(--fo-blanc);
	overflow: hidden;
}
.formation-contenu details.formation-corrige > summary,
.formation-contenu details.formation-repli > summary {
	cursor: pointer;
	padding: 1rem 1.4rem;
	font-weight: 600;
	color: var(--fo-navy);
	list-style: none;
	user-select: none;
}
.formation-contenu details.formation-corrige > summary::-webkit-details-marker,
.formation-contenu details.formation-repli > summary::-webkit-details-marker { display: none; }
.formation-contenu details.formation-corrige > summary::before,
.formation-contenu details.formation-repli > summary::before {
	content: "▸";
	display: inline-block;
	margin-right: 0.6rem;
	color: var(--fo-navy);
	transition: transform 0.15s ease;
}
.formation-contenu details.formation-corrige[open] > summary::before,
.formation-contenu details.formation-repli[open] > summary::before { transform: rotate(90deg); }
.formation-contenu details.formation-corrige > .formation-corrige-corps,
.formation-contenu details.formation-repli > .formation-repli-corps {
	padding: 0 1.4rem 1.2rem;
	border-top: 1px solid var(--fo-filet);
}
.formation-contenu .formation-telechargements {
	margin: 2rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--fo-blanc);
	border: 1.5px solid var(--fo-navy);
	border-radius: var(--fo-radius);
}
.formation-contenu .formation-telechargements > p:first-child {
	margin: 0 0 0.6rem;
	font-weight: 600;
	color: var(--fo-navy);
}
.formation-contenu .formation-telechargements ul { margin: 0; }
.formation-contenu .formation-telechargements a { font-weight: 600; }
.formation-contenu .formation-renvoi {
	margin: 2rem 0;
	padding: 0.9rem 1.4rem;
	background: var(--fo-blanc);
	border-left: 4px solid var(--fo-navy);
	border-radius: 0 var(--fo-radius) var(--fo-radius) 0;
	color: var(--fo-texte-doux);
}
.formation-contenu h2.formation-doc-titre {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--fo-filet);
}

/* ---- Impression ---------------------------------------------------------
   Le document, c'est la page : une fiche ou un exercice s'imprime depuis
   le navigateur (Fichier → Imprimer). Contenu seul, encre noire, corrigés
   repliables dépliés, vidéos et navigation retirés. */
@page { margin: 18mm; }
@media print {
	.formation-header,
	.formation-footer,
	.formation-terminer,
	.formation-nav,
	.formation-cta,
	.formation-contenu .kg-embed-card,
	.formation-video { display: none !important; }

	body.formation-body { background: #fff; color: #000; }
	.formation-main { max-width: none; margin: 0; padding: 0; }
	.formation-titre, .formation-fil, .formation-contenu { color: #000; }
	.formation-contenu a { color: #000; text-decoration: underline; }
	/* L'adresse des liens externes, utile sur papier */
	.formation-contenu a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
	/* Corrigés en bloc repliable : tout se déplie à l'impression.
	   L'ouverture des <details> est faite par formation.js (beforeprint),
	   un details fermé ne pouvant pas être déplié par le seul CSS. */
	.formation-contenu .kg-toggle-card .kg-toggle-content {
		height: auto !important;
		overflow: visible !important;
		display: block !important;
	}
	.formation-contenu details.formation-corrige,
	.formation-contenu details.formation-repli {
		border: 1px solid #000;
		border-radius: 0;
	}
	.formation-contenu details.formation-corrige > summary::before,
	.formation-contenu details.formation-repli > summary::before { content: ""; }
	.formation-contenu .formation-renvoi,
	.formation-contenu .formation-telechargements {
		border-color: #000;
		background: none;
	}
	.formation-contenu table,
	.formation-contenu th,
	.formation-contenu td {
		border-color: #000;
		background: none;
	}
	.formation-contenu blockquote {
		background: none;
		border-left: 3px solid #000;
		border-radius: 0;
	}
	.formation-contenu pre {
		background: none;
		border-color: #000;
		border-left: 3px solid #000;
		border-radius: 0;
	}
	.formation-contenu figure,
	.formation-contenu table,
	.formation-contenu pre,
	.formation-contenu blockquote { break-inside: avoid; }
	.formation-contenu h2,
	.formation-contenu h3 { break-after: avoid; }
	.formation-contenu img { max-width: 100%; }
}