/* =========================================================================
   VocalLead — thème clair / sombre.
   Le site suit le réglage de l'appareil du visiteur ; le bouton de l'en-tête
   permet de changer, et le choix est mémorisé (vocallead.js, attribut data-theme).
   En mode clair, les jetons ci-dessous valent exactement les couleurs d'origine :
   rien ne change pour les visiteurs en thème clair.
   ========================================================================= */

:root {
	--vl-encre: #0B1A3A;           /* surfaces toujours sombres (pied de page, sections « encre », cadres d'appareils) */
	--vl-surface: #FFFFFF;         /* cartes et panneaux */
	--vl-bleu-texte: #2550E8;      /* bleu du texte et des liens */
}

/* Bouton thème clair / sombre (en-tête) -------------------------------- */
.vl-entete__outils { display: flex; align-items: center; gap: var(--vl-esp-3); margin-left: auto; }
.vl-theme {
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
	border: 1px solid var(--vl-bordure); border-radius: var(--vl-rayon-rond); background: var(--vl-surface); color: var(--vl-nuit);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.vl-theme:hover { border-color: var(--vl-bleu); transform: rotate(-12deg); }
.vl-theme:focus-visible { outline: var(--vl-focus); outline-offset: 2px; }
.vl-theme .vl-icone { width: 20px; height: 20px; }
.vl-theme__soleil { display: none; }
@media (min-width: 64rem) { .vl-entete__outils { margin-left: 0; } }

/* Logos : clair par défaut, version blanche en thème sombre */
.vl-logo__sombre { display: none; }

/* ---------------------------------------------------------------------- */
html[data-theme="dark"] {
	color-scheme: dark;
	--vl-encre: #0D1D44;
	--vl-fond: #070E1F;
	--vl-fond-alt: #0B1530;
	--vl-surface: #0F1A38;
	--vl-nuit: #EDF2FF;
	--vl-gris: #A9B4CE;
	--vl-bordure: #223263;
	--vl-neutre: #6B7799;
	--vl-bleu-texte: #86A6FF;
	--vl-bleu-voile: rgba(134, 166, 255, 0.14);
	--vl-bleu-voile-fort: rgba(134, 166, 255, 0.24);
	--vl-cyan-voile: rgba(31, 182, 240, 0.18);
	--vl-nuit-voile: rgba(255, 255, 255, 0.05);
	--vl-ombre-survol: 0 8px 30px rgba(0, 0, 0, 0.45);
	--vl-ombre-maquette: 0 24px 60px rgba(0, 0, 0, 0.55);
	--vl-focus: 3px solid var(--vl-cyan);
}
html[data-theme="dark"] .vl-theme__lune { display: none; }
html[data-theme="dark"] .vl-theme__soleil { display: block; }
html[data-theme="dark"] .vl-logo__clair { display: none; }
html[data-theme="dark"] .vl-logo__sombre { display: block; }

/* Les appareils et les maquettes gardent leurs vraies couleurs (écrans de l'appli, posts, article) */
html[data-theme="dark"] [class*="vl-mq-"],
html[data-theme="dark"] .vl-flux__cadre,
html[data-theme="dark"] .vl-apercu-defilant__cadre {
	--vl-nuit: #0B1A3A;
	--vl-gris: #5B6478;
	--vl-bordure: #E3E8F2;
	--vl-neutre: #9AA3B5;
	--vl-fond: #F6F8FC;
	--vl-fond-alt: #EAF1FE;
	--vl-surface: #FFFFFF;
	--vl-bleu-texte: #2550E8;
	--vl-bleu-voile: rgba(37, 80, 232, 0.09);
	--vl-bleu-voile-fort: rgba(37, 80, 232, 0.16);
	--vl-cyan-voile: rgba(31, 182, 240, 0.16);
	--vl-nuit-voile: rgba(11, 26, 58, 0.05);
	--vl-encre: #0B1A3A;
}
/* Couleur du texte par défaut des maquettes, sans jamais passer devant leurs propres couleurs (spécificité nulle) */
:where(html[data-theme="dark"]) :where(.vl-mq-navigateur, .vl-mq-post, .vl-mq-article, .vl-mq-dictee, .vl-mq-insta, .vl-mq-tablette) { color: #0B1A3A; }

/* En-tête et menu */
html[data-theme="dark"] .vl-entete { background: rgba(7, 14, 31, 0.86); }
html[data-theme="dark"] .vl-menu-mobile summary { background: var(--vl-surface); }

/* Boutons */
html[data-theme="dark"] .vl-bouton--principal:hover { background: #1C44D4; box-shadow: var(--vl-ombre-bouton); }
html[data-theme="dark"] .vl-bouton--blanc,
html[data-theme="dark"] .vl-bouton--contour-blanc:hover,
html[data-theme="dark"] .vl-pied__reseaux a:hover { background: #FFFFFF; color: #0B1A3A; }
html[data-theme="dark"] .vl-faq__item[open] summary::after { background: var(--vl-bleu); color: #FFFFFF; }

/* Formulaires */
html[data-theme="dark"] .vl-non .vl-icone,
html[data-theme="dark"] .vl-vs__ligne--ko .vl-icone,
html[data-theme="dark"] .vl-champ .vl-obligatoire { color: #FF8F8F; }
html[data-theme="dark"] .vl-champ input:user-invalid,
html[data-theme="dark"] .vl-champ select:user-invalid,
html[data-theme="dark"] .vl-champ textarea:user-invalid { border-color: #FF8F8F; }
html[data-theme="dark"] .vl-champ input, html[data-theme="dark"] .vl-champ select, html[data-theme="dark"] .vl-champ textarea { border-color: #4A5A85; }
html[data-theme="dark"] .vl-champ input::placeholder, html[data-theme="dark"] .vl-champ textarea::placeholder { color: #8F9BBA; }
html[data-theme="dark"] .vl-champ input:focus, html[data-theme="dark"] .vl-champ select:focus, html[data-theme="dark"] .vl-champ textarea:focus { border-color: var(--vl-cyan); box-shadow: 0 0 0 3px rgba(31, 182, 240, 0.3); }

/* Pages légales : repères « à compléter » */
html[data-theme="dark"] .vl-a-completer { color: #FFD08A; background: rgba(208, 138, 46, 0.14); border-color: rgba(208, 138, 46, 0.6); }
html[data-theme="dark"] .vl-legal__avis { color: #FFD9A0; background: rgba(208, 138, 46, 0.12); border-color: rgba(208, 138, 46, 0.45); }

/* Vidéo : la barre de lecture et le fond restent sombres */
html[data-theme="dark"] .vl-video__lecture:hover { background: #1C44D4; }

/* Images claires (illustrations du blog) : un peu moins éblouissantes */
html[data-theme="dark"] .vl-billet__image { filter: brightness(0.88) contrast(1.02); }

/* Petite transition quand on change de thème (jamais pour ceux qui réduisent les animations) */
/* Grands chiffres 01, 02, 03 de l'accueil : le contour bleu foncé disparaît sur fond sombre,
   ils sont remplis avec le dégradé du logo, éclairci */
html[data-theme="dark"] .vl-etape__numero {
	-webkit-text-stroke: 0; color: transparent;
	background: linear-gradient(90deg, #1FB6F0, #86A6FF); -webkit-background-clip: text; background-clip: text;
}

@media (prefers-reduced-motion: no-preference) {
	html.vl-bascule, html.vl-bascule *, html.vl-bascule *::before, html.vl-bascule *::after {
		transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
	}
}