/*
Theme Name:   Kadence LFW — La Formation WordPress
Theme URI:    https://www.la-formation-wordpress.fr/
Description:  Thème enfant Kadence pour La Formation WordPress (Dimitri Rougier). Contient les personnalisations graphiques, les polices auto-hébergées (conformité CNIL), les données structurées Schema.org et les optimisations de performance.
Author:       Dimitri Rougier
Author URI:   https://www.la-formation-wordpress.fr/formateur/
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-lfw
License:      GNU General Public License v2 or later
*/

/* --------------------------------------------------------------------------
   1. Variables de marque
   Reprend la charte du site d'origine : bleu nuit #0F2040 en couleur primaire.
   -------------------------------------------------------------------------- */
:root {
	--lfw-navy: #0F2040;
	--lfw-navy-light: #1B3766;
	--lfw-accent: #F4B740;
	--lfw-accent-dark: #D99A1E;
	--lfw-text: #1C2333;
	--lfw-muted: #5A6478;
	--lfw-bg-soft: #F5F7FB;
	--lfw-border: #E1E6EF;
	--lfw-success: #1E8E5A;
	--lfw-radius: 14px;
	--lfw-shadow: 0 4px 24px rgba(15, 32, 64, 0.08);
	--lfw-shadow-lg: 0 12px 40px rgba(15, 32, 64, 0.14);
}

/* --------------------------------------------------------------------------
   2. Typographie
   -------------------------------------------------------------------------- */
/*
 * Les deux familles sont déclarées explicitement ici plutôt que laissées aux
 * seuls réglages du thème parent : cette feuille est chargée après le CSS
 * dynamique de Kadence, ce qui garantit que la typographie s'applique même si
 * un réglage du personnalisateur est réinitialisé.
 */
:root {
	--lfw-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--lfw-font-heading: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--lfw-font-body);
}

body {
	color: var(--lfw-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lfw-font-heading);
	letter-spacing: -0.02em;
	color: var(--lfw-navy);
}

/* --------------------------------------------------------------------------
   3. Composants réutilisables
   -------------------------------------------------------------------------- */

/* Sur-titre de section (ex. « POURQUOI WORDPRESS ? ») */
.lfw-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lfw-accent-dark);
	margin-bottom: 0.75rem;
}

/* Badges (CPF éligible, OPCO, niveau…) */
.lfw-badge {
	display: inline-block;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	background: var(--lfw-bg-soft);
	color: var(--lfw-navy);
	border: 1px solid var(--lfw-border);
}
.lfw-badge--cpf     { background: #E6F4EC; color: #12613D; border-color: #BFE3D0; }
.lfw-badge--opco    { background: #E8EFFC; color: #1B3766; border-color: #C7D8F5; }
.lfw-badge--debutant     { background: #E6F4EC; color: #12613D; border-color: #BFE3D0; }
.lfw-badge--intermediaire{ background: #FFF4DF; color: #8A5A00; border-color: #F5DFAF; }
.lfw-badge--avance       { background: #FBE9E9; color: #96231F; border-color: #F2C7C5; }

/* Grille de cartes */
.lfw-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte générique */
.lfw-card {
	background: #fff;
	border: 1px solid var(--lfw-border);
	border-radius: var(--lfw-radius);
	padding: 1.75rem;
	box-shadow: var(--lfw-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lfw-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--lfw-shadow-lg);
}
.lfw-card h3 { margin-top: 0; }

/* Tableau des caractéristiques d'une formation (durée, niveau, format…) */
.lfw-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--lfw-border);
	border: 1px solid var(--lfw-border);
	border-radius: var(--lfw-radius);
	overflow: hidden;
	margin: 2rem 0;
}
.lfw-specs > div {
	background: #fff;
	padding: 1.1rem 1rem;
	text-align: center;
}
.lfw-specs dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lfw-muted);
	margin-bottom: 0.35rem;
}
.lfw-specs dd {
	margin: 0;
	font-weight: 600;
	color: var(--lfw-navy);
}

/* Bloc tarif */
.lfw-price {
	background: var(--lfw-navy);
	color: #fff;
	border-radius: var(--lfw-radius);
	padding: 1.75rem;
	text-align: center;
}
.lfw-price strong {
	display: block;
	font-family: 'Syne', sans-serif;
	font-size: 2.6rem;
	line-height: 1.1;
	color: #fff;
}
.lfw-price span {
	display: block;
	font-size: 0.9rem;
	opacity: 0.8;
	margin-top: 0.25rem;
}

/* Liste à puces « check » */
.lfw-checklist { list-style: none; padding-left: 0; }
.lfw-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}
.lfw-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--lfw-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E") center/0.85rem no-repeat;
}

/* Encadré d'information */
.lfw-callout {
	border-left: 4px solid var(--lfw-accent);
	background: #FFFBF2;
	border-radius: 0 var(--lfw-radius) var(--lfw-radius) 0;
	padding: 1.25rem 1.5rem;
	margin: 2rem 0;
}
.lfw-callout--info { border-left-color: var(--lfw-navy-light); background: var(--lfw-bg-soft); }

/* Bloc « réponse directe » — cible les moteurs génératifs et les featured snippets */
.lfw-answer {
	background: var(--lfw-bg-soft);
	border: 1px solid var(--lfw-border);
	border-radius: var(--lfw-radius);
	padding: 1.4rem 1.6rem;
	margin: 1.5rem 0 2rem;
	font-size: 1.05rem;
	line-height: 1.65;
}
.lfw-answer p:last-child { margin-bottom: 0; }

/* Chiffres clés */
.lfw-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.5rem;
	text-align: center;
	margin: 2.5rem 0;
}
.lfw-stats strong {
	display: block;
	font-family: 'Syne', sans-serif;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--lfw-navy);
}
.lfw-stats span {
	display: block;
	font-size: 0.9rem;
	color: var(--lfw-muted);
	margin-top: 0.4rem;
}

/* Tableau responsive : évite tout débordement horizontal du body */
.lfw-table-wrap { overflow-x: auto; margin: 2rem 0; }
.lfw-table-wrap table { min-width: 560px; width: 100%; border-collapse: collapse; }
.lfw-table-wrap th, .lfw-table-wrap td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--lfw-border);
	text-align: left;
}
.lfw-table-wrap th { background: var(--lfw-bg-soft); font-weight: 700; color: var(--lfw-navy); }

/* FAQ dépliable — <details>/<summary>, sans JavaScript */
.lfw-faq { margin: 1.5rem 0 2.5rem; }
.lfw-faq__item {
	border: 1px solid var(--lfw-border);
	border-radius: var(--lfw-radius);
	margin-bottom: 0.75rem;
	background: #fff;
	overflow: hidden;
}
.lfw-faq__item summary {
	cursor: pointer;
	padding: 1.1rem 3rem 1.1rem 1.4rem;
	font-weight: 600;
	color: var(--lfw-navy);
	position: relative;
	list-style: none;
}
.lfw-faq__item summary::-webkit-details-marker { display: none; }
.lfw-faq__item summary::after {
	content: "";
	position: absolute;
	right: 1.3rem;
	top: 50%;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2px solid var(--lfw-muted);
	border-bottom: 2px solid var(--lfw-muted);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}
.lfw-faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lfw-faq__item summary:hover { background: var(--lfw-bg-soft); }
.lfw-faq__answer {
	padding: 0 1.4rem 1.3rem;
	color: var(--lfw-muted);
}

/* Étapes numérotées */
.lfw-steps {
	list-style: none;
	counter-reset: lfw-step;
	padding-left: 0;
	margin: 1.5rem 0 2.5rem;
}
.lfw-steps > li {
	counter-increment: lfw-step;
	position: relative;
	padding: 0 0 1.4rem 3.4rem;
	border-left: 2px solid var(--lfw-border);
	margin-left: 1.15rem;
}
.lfw-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.lfw-steps > li::before {
	content: counter(lfw-step);
	position: absolute;
	left: -1.17rem;
	top: -0.15rem;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--lfw-navy);
	color: #fff;
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	display: grid;
	place-items: center;
}

/* Cartes du catalogue */
.lfw-card--formation { display: flex; flex-direction: column; }
.lfw-card__badges { margin: 0 0 0.9rem; line-height: 2.1; }
.lfw-card--formation h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.lfw-card--formation h3 a { text-decoration: none; color: inherit; }
.lfw-card--formation h3 a:hover { color: var(--lfw-accent-dark); }
.lfw-card__accroche { color: var(--lfw-muted); flex-grow: 1; }
.lfw-card__meta {
	font-size: 0.92rem;
	color: var(--lfw-muted);
	padding-top: 0.9rem;
	border-top: 1px solid var(--lfw-border);
}
.lfw-card__cta { margin-bottom: 0; }

/* Tableau des informations pratiques */
.lfw-infos th[scope="row"] {
	width: 30%;
	vertical-align: top;
	background: var(--lfw-bg-soft);
}

/* Fil d'Ariane Yoast */
.lfw-breadcrumb {
	font-size: 0.88rem;
	color: var(--lfw-muted);
	padding: 1rem 0;
}
.lfw-breadcrumb a { color: var(--lfw-muted); text-decoration: underline; }
.lfw-breadcrumb a:hover { color: var(--lfw-navy); }

/* --------------------------------------------------------------------------
   3 bis. Sections de la page d'accueil (Elementor)
   -------------------------------------------------------------------------- */

.lfw-section > .e-con-inner,
.lfw-section {
	--lfw-section-pad: clamp(3.5rem, 7vw, 6rem);
}
.lfw-section {
	padding-top: var(--lfw-section-pad);
	padding-bottom: var(--lfw-section-pad);
}
.lfw-section--soft { background: var(--lfw-bg-soft); }

/* Bandeau d'accroche */
.lfw-section--hero {
	background: linear-gradient(160deg, var(--lfw-navy) 0%, var(--lfw-navy-light) 100%);
	color: #fff;
}
.lfw-section--hero h1,
.lfw-section--cta h2 { color: #fff; }
.lfw-hero__title { max-width: 20ch; }
.lfw-hero__lead {
	max-width: 62ch;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: rgba(255, 255, 255, 0.86);
}
.lfw-eyebrow--light { color: var(--lfw-accent); }

/* Bandeau de réassurance sous l'accroche */
.lfw-trust {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	font-size: 0.93rem;
	color: rgba(255, 255, 255, 0.8);
}
.lfw-trust li { position: relative; padding-left: 1.35rem; }
.lfw-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--lfw-accent);
}

/* Boutons */
.lfw-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 1.75rem 0 0;
}
.lfw-btn {
	display: inline-block;
	padding: 0.85em 1.7em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.3;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.lfw-btn--primary {
	background: var(--lfw-accent);
	color: var(--lfw-navy);
	box-shadow: 0 4px 16px rgba(244, 183, 64, 0.3);
}
.lfw-btn--primary:hover {
	background: var(--lfw-accent-dark);
	color: var(--lfw-navy);
	transform: translateY(-2px);
}
.lfw-btn--ghost {
	background: transparent;
	color: currentColor;
	border: 2px solid currentColor;
}
.lfw-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.lfw-section--soft .lfw-btn--ghost,
.lfw-section:not(.lfw-section--hero):not(.lfw-section--cta) .lfw-btn--ghost { color: var(--lfw-navy); }

/* Section d'appel à l'action final */
.lfw-section--cta {
	background: var(--lfw-navy);
	color: rgba(255, 255, 255, 0.86);
	text-align: center;
}
.lfw-section--cta .lfw-cta-row { justify-content: center; }
.lfw-cta__lead { max-width: 60ch; margin-inline: auto; }

/* Variantes de grille */
.lfw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.lfw-card--tall { display: flex; flex-direction: column; }
.lfw-card--tall .lfw-checklist { flex-grow: 1; }
.lfw-card--tall .lfw-card__cta { margin-top: 1rem; margin-bottom: 0; }

/* Cartes d'articles */
.lfw-card--article h3 { font-size: 1.15rem; }
.lfw-card--article h3 a { text-decoration: none; color: inherit; }
.lfw-card--article h3 a:hover { color: var(--lfw-accent-dark); }

/* Encadré à compléter, visible tant que l'information manque */
.lfw-todo {
	background: #FFF4DF;
	border: 1px dashed var(--lfw-accent-dark);
	border-radius: var(--lfw-radius);
	padding: 1rem 1.25rem;
	color: #8A5A00;
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   4. Accessibilité
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--lfw-accent-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}