/*
Theme Name: MV Tech Formation
Theme URI: https://training.mvtechniciennejuridique.com
Author: MV Technicienne Juridique Virtuelle
Description: Thème bloc sur mesure pour la plateforme d'apprentissage MV Tech. Direction éditoriale juridique — marges généreuses, filets fins, sections numérotées comme des articles de code — réchauffée par le turquoise de la marque. Inclut la mise en forme des cours LearnDash.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mvtech-formation
Tags: full-site-editing, block-patterns, education, custom-colors, custom-menu
*/

/* =========================================================================
   1. Fondations
   ========================================================================= */

:root {
	--mv-encre: #0C1E20;
	--mv-turquoise: #40E0D0;
	--mv-profond: #0E7C74;
	--mv-voile: #E4F8F5;
	--mv-papier: #F7F5F0;
	--mv-filet: #E2DCD1;
	--mv-gris: #5E6B69;

	/* Courbe d'accélération commune — départ franc, arrivée douce */
	--mv-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--mv-transition: 480ms var(--mv-ease);
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Fraunces est une variable font : on exploite ses axes optiques.
   SOFT arrondit les terminaisons, WONK active les alternates penchées —
   c'est ce qui donne au titrage son caractère, plutôt qu'un serif neutre. */
h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
	font-variation-settings: "SOFT" 24, "WONK" 1, "opsz" 96;
}

::selection {
	background: var(--mv-turquoise);
	color: var(--mv-encre);
}

/* Les titres héritent de la couleur de leur section : c'est ce qui permet
   au même bloc de fonctionner sur fond papier comme sur fond encre.
   Ne jamais fixer de couleur globale sur les titres. */
.mv-sombre :is(h1, h2, h3, h4, h5),
.mv-sombre .wp-block-post-title,
.mv-sombre .wp-block-heading {
	color: var(--mv-papier);
}
.mv-sombre h6,
.mv-sombre .wp-block-heading.is-style-h6 {
	color: var(--mv-turquoise);
}
.mv-sombre p:not([class*="has-"]):not(.mv-numero):not(.mv-chiffre) {
	color: var(--mv-papier);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(textarea):focus-visible,
:where(select):focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--mv-profond);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Lien d'évitement clavier */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em 1.5em;
	background: var(--mv-encre);
	color: var(--mv-papier);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* =========================================================================
   2. Liens — soulignement qui se dessine
   ========================================================================= */

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button),
.mv-lien {
	background-image: linear-gradient(var(--mv-turquoise), var(--mv-turquoise));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 0.1em;
	transition: background-size var(--mv-transition), color 240ms var(--mv-ease);
}
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):hover,
.mv-lien:hover {
	background-size: 100% 0.42em;
	color: var(--mv-encre);
}

/* =========================================================================
   3. Boutons
   ========================================================================= */

.wp-block-button__link,
.wp-element-button {
	position: relative;
	overflow: hidden;
	transition: background-color 320ms var(--mv-ease), color 320ms var(--mv-ease),
		transform 320ms var(--mv-ease);
	isolation: isolate;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-2px);
}

/* Bouton fantôme — contour seul, pour les actions secondaires */
.wp-block-button.is-style-mv-contour .wp-block-button__link {
	background: transparent;
	color: var(--mv-encre);
	box-shadow: inset 0 0 0 1px var(--mv-encre);
}
.wp-block-button.is-style-mv-contour .wp-block-button__link:hover {
	background: var(--mv-encre);
	color: var(--mv-papier);
	box-shadow: inset 0 0 0 1px var(--mv-encre);
}
.mv-sombre .wp-block-button.is-style-mv-contour .wp-block-button__link {
	color: var(--mv-papier);
	box-shadow: inset 0 0 0 1px rgba(247, 245, 240, 0.35);
}
.mv-sombre .wp-block-button.is-style-mv-contour .wp-block-button__link:hover {
	background: var(--mv-turquoise);
	color: var(--mv-encre);
	box-shadow: inset 0 0 0 1px var(--mv-turquoise);
}

/* Lien-flèche : la flèche avance au survol */
.mv-fleche a,
a.mv-fleche {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mv-profond);
}
.mv-fleche a::after,
a.mv-fleche::after {
	content: "";
	width: 1.9em;
	height: 1px;
	background: currentColor;
	transition: width var(--mv-transition);
}
.mv-fleche a:hover::after,
a.mv-fleche:hover::after {
	width: 3.1em;
}

/* =========================================================================
   4. Signature : la numérotation d'article
   Un rappel du Code civil — le repère qui structure toute la page.
   ========================================================================= */

.mv-article > .wp-block-group__inner-container > h2,
.mv-article > h2,
.mv-titre-article {
	position: relative;
}

/* Bloc de niveau plutôt qu'inline-flex : en inline, les marges auto de la
   mise en page WordPress tombent à zéro et le repère se décrochait de la
   colonne de texte (il se collait au bord de la page). */
.mv-numero.mv-numero {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.mv-numero {
	align-items: baseline;
	gap: 0.75em;
	margin-bottom: 1.25rem;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mv-profond);
}
.mv-numero::before {
	content: "";
	width: clamp(1.75rem, 5vw, 3.5rem);
	height: 1px;
	background: var(--mv-turquoise);
	transform: translateY(-0.3em);
}
.mv-sombre .mv-numero { color: var(--mv-turquoise); }

/* =========================================================================
   5. Texture — papier réglé
   Des lignes de portée à peine perceptibles, comme un papier de greffe.
   ========================================================================= */

.mv-regle {
	position: relative;
	isolation: isolate;
}
.mv-regle::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 2.35rem,
		rgba(12, 30, 32, 0.045) 2.35rem,
		rgba(12, 30, 32, 0.045) calc(2.35rem + 1px)
	);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	pointer-events: none;
}
.mv-sombre.mv-regle::before {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 2.35rem,
		rgba(247, 245, 240, 0.055) 2.35rem,
		rgba(247, 245, 240, 0.055) calc(2.35rem + 1px)
	);
}

/* Grain léger : casse le côté « aplat numérique » des grandes surfaces sombres */
.mv-sombre {
	position: relative;
}
.mv-sombre::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.mv-sombre > * { position: relative; z-index: 1; }

/* =========================================================================
   6. En-tête
   ========================================================================= */

.mv-entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 245, 240, 0.86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--mv-filet);
	transition: border-color 300ms var(--mv-ease);
}

.mv-entete .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.mv-entete .wp-block-navigation-item__content {
	position: relative;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mv-encre);
	padding-block: 0.35em;
}
.mv-entete .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--mv-profond);
	transition: width var(--mv-transition);
}
.mv-entete .wp-block-navigation-item__content:hover::after,
.mv-entete .current-menu-item > .wp-block-navigation-item__content::after {
	width: 100%;
}

.mv-logo img {
	height: clamp(2rem, 4vw, 2.6rem);
	width: auto;
	display: block;
}

/* Menu déroulant mobile */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--mv-encre) !important;
	color: var(--mv-papier);
	padding: clamp(2rem, 6vw, 4rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--mv-papier);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* =========================================================================
   7. Héros
   ========================================================================= */

.mv-heros {
	position: relative;
	overflow: hidden;
}

.mv-heros h1 {
	max-width: 16ch;
}

/* Le mot surligné — un trait de marqueur turquoise qui se déploie au chargement */
.mv-surligne {
	position: relative;
	white-space: nowrap;
}
.mv-surligne::before {
	content: "";
	position: absolute;
	left: -0.06em;
	right: -0.06em;
	bottom: 0.12em;
	height: 0.16em;
	background: var(--mv-turquoise);
	z-index: -1;
	transform-origin: left center;
	transform: scaleX(0);
	animation: mv-surligne-entre 900ms var(--mv-ease) 620ms forwards;
}
@keyframes mv-surligne-entre {
	to { transform: scaleX(1); }
}
/* Sur fond sombre le trait doit rester franc : c'est le seul accent
   de couleur du bandeau, l'atténuer le rendait boueux.
   Il passe sous les jambages — à 0.1em il barrait le « q » et les « pp ». */
.mv-sombre .mv-surligne::before {
	opacity: 1;
	bottom: -0.1em;
	height: 0.13em;
}

/* Apparition en cascade au chargement */
.mv-entre > * {
	opacity: 0;
	transform: translateY(1.4rem);
	animation: mv-entre-anim 780ms var(--mv-ease) forwards;
}
.mv-entre > *:nth-child(1) { animation-delay: 80ms; }
.mv-entre > *:nth-child(2) { animation-delay: 200ms; }
.mv-entre > *:nth-child(3) { animation-delay: 320ms; }
.mv-entre > *:nth-child(4) { animation-delay: 440ms; }
.mv-entre > *:nth-child(5) { animation-delay: 560ms; }
.mv-entre > *:nth-child(6) { animation-delay: 680ms; }

@keyframes mv-entre-anim {
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mv-entre > * { opacity: 1; transform: none; animation: none; }
	.mv-surligne::before { transform: scaleX(1); animation: none; }
}

/* Chiffres-clés du héros */
.mv-chiffre {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variation-settings: "SOFT" 20, "WONK" 1;
	color: var(--mv-encre);
}
.mv-sombre .mv-chiffre { color: var(--mv-turquoise); }
.mv-chiffre-note {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mv-gris);
}
.mv-sombre .mv-chiffre-note { color: rgba(247, 245, 240, 0.62); }

/* =========================================================================
   8. Cartes — cours, avantages, étapes
   ========================================================================= */

.mv-carte {
	position: relative;
	background: var(--mv-blanc, #fff);
	border: 1px solid var(--mv-filet);
	transition: transform var(--mv-transition), box-shadow var(--mv-transition),
		border-color var(--mv-transition);
}
/* Le filet turquoise se déploie sur l'arête supérieure au survol */
.mv-carte::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 2px;
	background: var(--mv-turquoise);
	transition: width var(--mv-transition);
}
.mv-carte:hover,
.mv-carte:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(12, 30, 32, 0.05), 0 26px 54px -22px rgba(12, 30, 32, 0.28);
	border-color: rgba(12, 30, 32, 0.14);
}
.mv-carte:hover::before,
.mv-carte:focus-within::before {
	width: calc(100% + 2px);
}

.mv-carte-etiquette {
	display: inline-block;
	padding: 0.45em 0.9em;
	background: var(--mv-voile);
	color: var(--mv-profond);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Liste d'étapes numérotées — le compteur en chiffre serif surdimensionné */
.mv-etapes {
	counter-reset: mv-etape;
	list-style: none;
	padding-left: 0;
}
.mv-etapes > li {
	counter-increment: mv-etape;
	position: relative;
	padding-left: clamp(3.25rem, 7vw, 5rem);
	padding-bottom: 2.25rem;
	border-left: 1px solid var(--mv-filet);
	margin-left: 1.15rem;
}
.mv-etapes > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.mv-etapes > li::before {
	content: counter(mv-etape, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.28em;
	transform: translateX(-50%);
	width: 2.3em;
	height: 2.3em;
	display: grid;
	place-items: center;
	background: var(--mv-papier);
	border: 1px solid var(--mv-turquoise);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	color: var(--mv-profond);
	font-variation-settings: "SOFT" 20, "WONK" 1;
}

/* =========================================================================
   9. Sections
   ========================================================================= */

/* La mise en page « constrained » de WordPress centre tout enfant ayant une
   largeur max, avec `margin-left:auto !important` dans les styles générés.
   Le !important ci-dessous n'est pas un raccourci : c'est le seul niveau qui
   permet de répondre à cette règle. Les titres doivent rester accrochés à la
   même marge que le numéro d'article qui les précède. */
.mv-section-titre.mv-section-titre {
	max-width: 22ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.mv-intro.mv-intro {
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.62;
	color: var(--mv-gris);
	max-width: 58ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.mv-sombre .mv-intro { color: rgba(247, 245, 240, 0.76); }

/* Filet de séparation fin, décalé — évite la ligne pleine largeur banale */
.mv-filet-court {
	width: clamp(3rem, 8vw, 6rem);
	height: 1px;
	background: var(--mv-turquoise);
	border: 0;
	margin: 0;
}

/* =========================================================================
   9 bis. Accordéons (questions fréquentes)
   ========================================================================= */

.wp-block-details {
	border-bottom: 0;
}
.wp-block-details summary {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color 260ms var(--mv-ease);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { content: ""; }
.wp-block-details summary::before {
	content: "+";
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	display: grid;
	place-items: center;
	border: 1px solid var(--mv-turquoise);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 0.85rem;
	color: var(--mv-profond);
	transition: transform 320ms var(--mv-ease), background-color 260ms var(--mv-ease);
}
.wp-block-details summary:hover { color: var(--mv-profond); }
.wp-block-details summary:hover::before { background: var(--mv-voile); }
.wp-block-details[open] summary::before {
	content: "−";
	transform: rotate(180deg);
	background: var(--mv-turquoise);
	color: var(--mv-encre);
}
.wp-block-details[open] > *:not(summary) {
	animation: mv-details-ouvre 420ms var(--mv-ease);
	padding-left: 2.5rem;
	max-width: 58ch;
}
@keyframes mv-details-ouvre {
	from { opacity: 0; transform: translateY(-0.4rem); }
	to { opacity: 1; transform: none; }
}

/* =========================================================================
   10. Citation / témoignage
   ========================================================================= */

.mv-citation {
	position: relative;
	padding-left: clamp(2rem, 5vw, 3.5rem);
}
.mv-citation::before {
	content: "«";
	position: absolute;
	left: 0;
	top: -0.42em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 7vw, 5.5rem);
	line-height: 1;
	color: var(--mv-turquoise);
	opacity: 0.55;
}

/* =========================================================================
   11. Pied de page
   ========================================================================= */

.mv-pied a {
	color: rgba(247, 245, 240, 0.72);
	transition: color 260ms var(--mv-ease);
}
.mv-pied a:hover { color: var(--mv-turquoise); }

.mv-pied .wp-block-navigation__container { gap: 0.9rem 2rem; }

/* =========================================================================
   12. Contenu éditorial (articles, pages)
   ========================================================================= */

.wp-block-post-content > * + * { margin-top: 1.6rem; }

.wp-block-post-content h2 { margin-top: 3.25rem; }
.wp-block-post-content h3 { margin-top: 2.5rem; }

.wp-block-post-content blockquote {
	border-left: 2px solid var(--mv-turquoise);
	padding-left: clamp(1.25rem, 3vw, 2rem);
	font-style: normal;
}

.wp-block-post-content figure img { display: block; }

/* Lettrine sur le premier paragraphe des articles — clin d'œil au document imprimé */
.mv-lettrine > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.6em;
	line-height: 0.82;
	padding: 0.06em 0.14em 0 0;
	color: var(--mv-profond);
	font-variation-settings: "SOFT" 30, "WONK" 1;
}

/* =========================================================================
   13. LearnDash — accord au thème
   Le plugin arrive avec son propre habillage; on le ramène à la charte
   plutôt que de le laisser jurer avec le reste du site.
   ========================================================================= */

.learndash-wrapper {
	font-family: var(--wp--preset--font-family--corps) !important;
	color: var(--mv-encre);
}

.learndash-wrapper h1,
.learndash-wrapper h2,
.learndash-wrapper h3,
.learndash-wrapper .ld-course-status-content .ld-course-status-label {
	font-family: var(--wp--preset--font-family--display) !important;
	letter-spacing: -0.015em;
}

/* Boutons LearnDash : mêmes règles que les boutons du thème */
.learndash-wrapper .ld-button,
.learndash-wrapper input[type="submit"],
.learndash-wrapper .ld-course-step .ld-button {
	background-color: var(--mv-encre) !important;
	color: var(--mv-papier) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--corps) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 1.15em 2em !important;
	transition: background-color 320ms var(--mv-ease), color 320ms var(--mv-ease),
		transform 320ms var(--mv-ease) !important;
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper input[type="submit"]:hover {
	background-color: var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
	transform: translateY(-2px);
}

/* Barre de progression */
.learndash-wrapper .ld-progress-bar {
	background-color: var(--mv-filet) !important;
	border-radius: 0 !important;
	height: 6px !important;
	overflow: hidden;
}
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	background-color: var(--mv-turquoise) !important;
	border-radius: 0 !important;
	transition: width 700ms var(--mv-ease);
}
.learndash-wrapper .ld-progress-heading .ld-progress-percentage {
	color: var(--mv-profond) !important;
	font-weight: 700;
}

/* Liste des leçons : reprend l'esprit « carte » du thème */
.learndash-wrapper .ld-item-list .ld-item-list-item {
	border: 1px solid var(--mv-filet) !important;
	border-radius: 0 !important;
	background: #fff !important;
	margin-bottom: 0.75rem !important;
	transition: border-color var(--mv-transition), transform var(--mv-transition),
		box-shadow var(--mv-transition);
}
.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
	border-color: rgba(12, 30, 32, 0.16) !important;
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -22px rgba(12, 30, 32, 0.3);
}
.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-current-lesson,
.learndash-wrapper .ld-table-list .ld-table-list-item.ld-is-current-lesson {
	border-left: 3px solid var(--mv-turquoise) !important;
}

/* États de complétion */
.learndash-wrapper .ld-status-complete,
.learndash-wrapper .ld-status.ld-status-complete {
	background-color: var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
	border-radius: 0 !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.6875rem !important;
}
.learndash-wrapper .ld-status-icon.ld-status-complete,
.learndash-wrapper .ld-icon-checkmark {
	background-color: var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
}
.learndash-wrapper .ld-status-waiting,
.learndash-wrapper .ld-status-unlocked {
	background-color: var(--mv-voile) !important;
	color: var(--mv-profond) !important;
	border-radius: 0 !important;
	font-size: 0.6875rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* En-tête de cours */
.learndash-wrapper .ld-course-status {
	border: 1px solid var(--mv-filet) !important;
	border-radius: 0 !important;
	background: var(--mv-voile) !important;
}

/* Le bouton « Tout déplier » porte sa couleur depuis la feuille de LearnDash
   (bleu #235AF3) sans classe utilitaire ni style inline : il faut le viser
   directement, sinon il reste bleu au milieu d'une page turquoise. */
.learndash-wrapper button.ld-expand-button,
.learndash-wrapper .ld-expand-button {
	background-color: var(--mv-encre) !important;
	color: var(--mv-papier) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--corps) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	transition: background-color 280ms var(--mv-ease), color 280ms var(--mv-ease) !important;
}
.learndash-wrapper button.ld-expand-button:hover,
.learndash-wrapper .ld-expand-button:hover {
	background-color: var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
}
.learndash-wrapper .ld-expand-button .ld-icon,
.learndash-wrapper .ld-expand-button .ld-text { color: inherit !important; }

/* LearnDash colore d'autres éléments avec sa couleur primaire par défaut
   via ces classes utilitaires — on les ramène à la charte. */
.learndash-wrapper .ld-primary-background,
.learndash-wrapper .ld-expand-button.ld-primary-background,
.learndash-wrapper .ld-table-list-header.ld-primary-background {
	background-color: var(--mv-encre) !important;
	color: var(--mv-papier) !important;
	border-radius: 0 !important;
}
.learndash-wrapper .ld-expand-button.ld-primary-background:hover {
	background-color: var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
}
.learndash-wrapper .ld-primary-color,
.learndash-wrapper .ld-primary-color-hover:hover,
.learndash-wrapper a.ld-primary-color {
	color: var(--mv-profond) !important;
}
.learndash-wrapper .ld-secondary-background {
	background-color: var(--mv-voile) !important;
	color: var(--mv-encre) !important;
}

/* Profil : chiffres du tableau de bord au bon gabarit typographique */
.learndash-wrapper .ld-profile-stats .ld-profile-stat-item .ld-profile-stat-value {
	font-family: var(--wp--preset--font-family--display) !important;
	color: var(--mv-encre) !important;
}
.learndash-wrapper .ld-profile-summary .ld-profile-avatar img {
	border-radius: 50%;
}

/* Onglets et accordéons */
.learndash-wrapper .ld-expand-button,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--corps) !important;
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
	border-bottom: 2px solid var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
}

/* Quiz */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_content input[type="button"] {
	background-color: var(--mv-encre) !important;
	color: var(--mv-papier) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8125rem !important;
	font-weight: 700;
	border: 0 !important;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:hover {
	background-color: var(--mv-turquoise) !important;
	color: var(--mv-encre) !important;
}
.learndash-wrapper .wpProQuiz_questionListItem {
	border: 1px solid var(--mv-filet) !important;
	border-radius: 0 !important;
	background: #fff !important;
}
.learndash-wrapper .wpProQuiz_questionListItem:hover {
	border-color: var(--mv-turquoise) !important;
}

/* Grille de cours (shortcode ld_course_list) */
.learndash-wrapper .ld-course-list-items .ld_course_grid .thumbnail.course {
	border: 1px solid var(--mv-filet) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.learndash-wrapper .ld-course-list-items .ld_course_grid .thumbnail.course:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 54px -22px rgba(12, 30, 32, 0.28) !important;
}

/* Focus visible conservé dans LearnDash */
.learndash-wrapper a:focus-visible,
.learndash-wrapper button:focus-visible,
.learndash-wrapper input:focus-visible {
	outline: 2px solid var(--mv-profond) !important;
	outline-offset: 3px;
}

/* =========================================================================
   14. Formulaires (Contact Form 7 et natifs)
   ========================================================================= */

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], textarea, select {
	width: 100%;
	padding: 0.95em 1.1em;
	background: #fff;
	border: 1px solid var(--mv-filet);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 1rem;
	color: var(--mv-encre);
	transition: border-color 260ms var(--mv-ease), box-shadow 260ms var(--mv-ease);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--mv-turquoise);
	box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.22);
	outline: none;
}
::placeholder { color: #9aa5a3; opacity: 1; }

.wpcf7 label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mv-gris);
}
.wpcf7-form > p { margin-bottom: 1.35rem; }

/* =========================================================================
   14 bis. Connexion en façade (page « Mes formations »)
   ========================================================================= */

.mv-connexion {
	max-width: 26rem;
	margin-top: 2.25rem;
	margin-left: 0 !important;
	margin-right: auto !important;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--mv-filet);
	box-shadow: 0 1px 2px rgba(12, 30, 32, 0.04), 0 18px 44px -24px rgba(12, 30, 32, 0.2);
}
.mv-connexion p { margin: 0 0 1.15rem; }
.mv-connexion label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mv-gris);
}
.mv-connexion .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--mv-encre);
}
.mv-connexion .login-remember input { width: auto; }
.mv-connexion .login-submit input {
	width: 100%;
	padding: 1.1em 2em;
	background: var(--mv-encre);
	color: var(--mv-papier);
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--corps);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 300ms var(--mv-ease), color 300ms var(--mv-ease);
}
.mv-connexion .login-submit input:hover {
	background: var(--mv-turquoise);
	color: var(--mv-encre);
}
.mv-oubli {
	margin-top: 1rem !important;
	font-size: 0.875rem;
}
.mv-oubli a { color: var(--mv-profond); }
.mv-oubli a:hover { text-decoration: underline; }

/* Bouton « Connexion » de l'en-tête (rendu hors du système de blocs) */
.mv-bouton-entete {
	display: inline-block;
	padding: 0.95em 1.6em;
	background: var(--mv-encre);
	color: var(--mv-papier);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 300ms var(--mv-ease), color 300ms var(--mv-ease),
		transform 300ms var(--mv-ease);
}
.mv-bouton-entete:hover {
	background: var(--mv-turquoise);
	color: var(--mv-encre);
	transform: translateY(-2px);
}

.mv-entete .wp-block-group > p:has(.mv-bouton-entete),
.mv-entete .wp-block-group > p:has(.mv-compte) {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.mv-compte-sortie a { color: var(--mv-gris); }

/* Lien de compte dans l'en-tête */
.mv-compte a {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mv-encre);
	white-space: nowrap;
}
.mv-compte a:hover { color: var(--mv-profond); }

/* =========================================================================
   15. Grilles
   ========================================================================= */

@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
	.mv-heros h1 { max-width: none; }
}

/* Sur petit écran, le logo suffit à identifier le site : le titre en toutes
   lettres passait sur deux lignes et écrasait le bouton d'action. */
@media (max-width: 640px) {
	.mv-entete .wp-block-site-title { display: none; }
	.mv-entete .wp-block-buttons .wp-block-button__link {
		padding: 0.85em 1.1em;
		font-size: 0.7rem;
		letter-spacing: 0.08em;
	}
	.mv-entete .mv-logo img { height: 1.9rem; }
	.mv-etapes > li { padding-left: 2.75rem; margin-left: 0.9rem; }
	.wp-block-details[open] > *:not(summary) { padding-left: 0; }
}

/* Les tableaux larges défilent au lieu de casser la page */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 32rem; }

/* =========================================================================
   16. Impression
   ========================================================================= */

@media print {
	.mv-entete, .mv-pied, .wp-block-navigation { display: none !important; }
	body { background: #fff; color: #000; }
	.mv-sombre::after, .mv-regle::before { display: none; }
}