/* ==========================================================================
   Mode sombre (2.2.0, fond uniforme en 2.2.2)
   - Par défaut, le site suit le réglage de l'appareil (prefers-color-scheme) ;
   - le bouton soleil / lune de l'en-tête force le mode clair ou sombre
     (choix gardé dans le navigateur du visiteur, localStorage « an-theme »).
   Le petit script placé dans <head> pose data-theme="dark" ou "light" sur <html>
   avant l'affichage : aucun flash de couleur au chargement.
   Ce fichier n'est chargé que sur le site (pas dans l'éditeur de blocs).
   Les tailles de texte, la justification et les effets de survol ne changent pas.
   ========================================================================== */

/* ---------- Bouton soleil / lune (affiché dans les deux modes) ---------- */
.header-actions { display: flex; align-items: center; gap: 6px; order: 2; }
.site-nav { order: 1; margin-left: auto; }
.brand { order: 0; }
.theme-toggle {
	display: none; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; margin: 0;
	border-radius: 50%; border: 1px solid var(--chip-border); background: #fff; color: var(--night);
	box-shadow: var(--chip-glow); cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.js .theme-toggle { display: inline-grid; }
.theme-toggle:hover { border-color: var(--chip-border-hover); box-shadow: var(--chip-glow-hover); color: var(--accent); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--chip-ring); outline-offset: 3px; border-radius: 50%; }
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .25s var(--ease), transform .4s var(--ease); }
/* Mode clair : on montre la lune (« passer en sombre ») ; mode sombre : le soleil. */
.theme-toggle__sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
.theme-toggle__moon { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(60deg) scale(.6); }
@media (max-width: 900px) {
	.header-actions { margin-left: auto; gap: 2px; }
	.theme-toggle { width: 44px; height: 44px; }
	.theme-toggle svg { width: 20px; height: 20px; }
	.nav-toggle { margin-right: -10px; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle:hover { transform: none; } }

/* ==========================================================================
   Palette sombre : bleu nuit très profond pour la page, surfaces bleu nuit,
   texte clair. Les sections bleu nuit restent plus claires et lumineuses
   que la page pour rester bien distinctes.
   ========================================================================== */
html[data-theme="dark"] {
	color-scheme: dark;
	--page: #050b17;
	--grey: #0d1729;          /* surfaces (ancien gris clair) */
	--surface-2: #132139;     /* cartes posées sur une surface, survols */
	--text: #f1f4f9;
	--muted: #a4afc0;
	--accent: #8fb0ff;        /* liens, surtitres, coches */
	--accent-hover: #b4caff;
	--border: rgba(255, 255, 255, 0.09);
	--border-light: rgba(143, 176, 255, 0.14);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
	--night-section: radial-gradient(1200px 520px at 85% 0%, rgba(46, 98, 240, 0.42), transparent 62%), linear-gradient(180deg, #0d2549 0%, #0a1c39 100%);

	/* Boutons bleu nuit : version « fond sombre » partout (liseré et halo plus lumineux). */
	--btn-bg: var(--night);
	--btn-bg-hover: var(--night-2);
	--btn-border: rgba(143, 176, 255, 0.7);
	--btn-border-hover: #8fb0ff;
	--btn-glow: 0 0 0 1px rgba(143, 176, 255, 0.18), 0 0 20px rgba(143, 176, 255, 0.3), 0 0 34px rgba(30, 79, 216, 0.45);
	--btn-glow-hover: 0 0 0 1px rgba(143, 176, 255, 0.4), 0 0 26px rgba(143, 176, 255, 0.5), 0 0 48px rgba(30, 79, 216, 0.6);
	--btn-ring: #8fb0ff;

	/* Pastilles de liens : verre bleu nuit translucide, liseré bleu clair, halo doux. */
	--chip-bg: rgba(19, 36, 66, 0.72);
	--chip-bg-hover: rgba(26, 48, 88, 0.85);
	--chip-text: #e3eaff;
	--chip-border: rgba(143, 176, 255, 0.34);
	--chip-border-hover: rgba(143, 176, 255, 0.8);
	--chip-glow: 0 0 0 1px rgba(143, 176, 255, 0.06), 0 4px 18px rgba(30, 79, 216, 0.22);
	--chip-glow-hover: 0 0 0 1px rgba(143, 176, 255, 0.3), 0 8px 28px rgba(30, 79, 216, 0.4), 0 0 24px rgba(143, 176, 255, 0.28);
	--chip-ring: #8fb0ff;
}
html[data-theme="dark"] :is(.section--night, .final-cta, .page-hero--night, .site-footer) {
	--btn-bg: var(--night-deep);
	--btn-bg-hover: #0d2347;
	--chip-bg: rgba(7, 20, 40, 0.55);
	--chip-border: rgba(143, 176, 255, 0.5);
}

html[data-theme="dark"] body { background: var(--page); color: var(--text); }
html[data-theme="dark"] ::selection { background: rgba(143, 176, 255, 0.3); }
html[data-theme="dark"] .skip-link:focus { background: var(--surface-2); color: var(--text); }

/* Dégradé du mot mis en avant dans le titre d'accueil : bleu clair lumineux. */
html[data-theme="dark"] :is(.text-accent, .display-hero strong) { color: #8fb0ff; background: linear-gradient(100deg, #7ea2ff 0%, #c5d5ff 100%); -webkit-background-clip: text; background-clip: text; }

/* ---------- En-tête ---------- */
html[data-theme="dark"] .site-header { background: rgba(5, 11, 23, 0.72); }
html[data-theme="dark"] .site-header.is-scrolled { border-bottom-color: rgba(143, 176, 255, 0.12); }
html[data-theme="dark"] .nav__list a { color: var(--text); }
html[data-theme="dark"] :is(.nav__list a:is(:hover, :focus-visible), .nav__list .current-menu-item > a, .nav__list a[aria-current="page"], .nav__list .current-page-ancestor > a, .nav__list .current-menu-ancestor > a) {
	background: var(--chip-bg); color: #fff; border-color: var(--chip-border);
}
html[data-theme="dark"] .nav__list a:is(:hover, :focus-visible) { border-color: var(--chip-border-hover); }
html[data-theme="dark"] .theme-toggle { background: var(--chip-bg); color: #ffd98a; border-color: var(--chip-border); }
html[data-theme="dark"] .theme-toggle:hover { background: var(--chip-bg-hover); color: #ffe4a8; border-color: var(--chip-border-hover); }
@media (max-width: 900px) {
	html[data-theme="dark"] .site-nav { background: rgba(5, 11, 23, 0.97); border-bottom-color: rgba(143, 176, 255, 0.12); }
}

/* ---------- Pastilles de liens (Lien fléché, liens de cartes, en-tête, contact…) ---------- */
html[data-theme="dark"] :is(.is-style-an-link a, a.link-arrow, .post-nav a, .tags a, .site-header .btn.nav-cta) {
	background: var(--chip-bg); border-color: var(--chip-border); box-shadow: var(--chip-glow);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="dark"] :is(.is-style-an-link a, a.link-arrow, .post-nav a, .tags a, .site-header .btn.nav-cta):is(:hover, :focus-visible) {
	background: var(--chip-bg-hover); border-color: var(--chip-border-hover); box-shadow: var(--chip-glow-hover);
}
/* Couleur du texte : priorité faible, une couleur de lien choisie dans l'éditeur reste prioritaire. */
html[data-theme="dark"] :where(.is-style-an-link) a, html[data-theme="dark"] :is(a.link-arrow, .post-nav a, .tags a, .site-header .btn.nav-cta) { color: var(--chip-text); }
html[data-theme="dark"] :where(.is-style-an-link) a:is(:hover, :focus-visible), html[data-theme="dark"] :is(a.link-arrow, .post-nav a, .tags a, .site-header .btn.nav-cta):is(:hover, :focus-visible) { color: #fff; }
html[data-theme="dark"] .is-style-an-link:not(.has-link-color):not([class*="wp-elements-"]) a::after { background: #8fb0ff; }

/* Liens dans le texte : surlignage bleu nuit lumineux au survol (au lieu du blanc). */
html[data-theme="dark"] :where(main p:not(.is-style-an-link):not(.contact-card__value), main li, main td, main figcaption) a:not(.wp-block-button__link):is(:hover, :focus-visible) {
	background: rgba(143, 176, 255, 0.16); color: #fff; text-decoration-color: rgba(143, 176, 255, 0.7);
	box-shadow: 0 0 0 3px rgba(143, 176, 255, 0.16), 0 0 0 4px rgba(143, 176, 255, 0.22), 0 4px 16px rgba(30, 79, 216, 0.35);
}

/* ---------- Boutons ---------- */
html[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(143, 176, 255, 0.45); }
html[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible) { color: #fff; background-color: rgba(143, 176, 255, 0.1); border-color: #8fb0ff; box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.2), 0 0 18px rgba(143, 176, 255, 0.28); }
html[data-theme="dark"] :is(.btn.is-disabled, .wp-block-button.is-disabled .wp-block-button__link) { background-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
/* Pastilles numérotées : fond bleu vif (le texte blanc reste lisible). */
html[data-theme="dark"] .steps__n, html[data-theme="dark"] .step::before, html[data-theme="dark"] .is-numbered > .card::before { background: #1e4fd8; color: #fff; box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.35), 0 0 14px rgba(30, 79, 216, 0.45); }

/* ---------- Formulaires ---------- */
html[data-theme="dark"] :is(input[type="email"], input[type="text"], input[type="url"], input[type="search"], textarea):not(.wp-block-search__input-hidden),
html[data-theme="dark"] .an-nl-form .an-nl-form__input {
	background: rgba(143, 176, 255, 0.07); border-color: rgba(143, 176, 255, 0.24); color: #fff;
}
html[data-theme="dark"] :is(input[type="email"], input[type="text"], input[type="url"], input[type="search"], textarea)::placeholder { color: rgba(255, 255, 255, 0.5); }
html[data-theme="dark"] :is(input[type="email"], input[type="text"], input[type="url"], input[type="search"], textarea):focus { border-color: #8fb0ff; box-shadow: 0 0 0 3px rgba(143, 176, 255, 0.22); }
html[data-theme="dark"] .an-nl-form .an-nl-form__note { color: var(--muted); }

/* ---------- Sections ---------- */
/* 2.2.2 : un seul fond bleu nuit profond pour toute la page. Les sections grises, la bande d'outils,
   les sections bleu nuit (« Votre projet », « En formation… », en-têtes bleu nuit) et le pied de page
   prennent le même fond que la page ; seules les cartes restent un peu plus claires, avec leur liseré. */
html[data-theme="dark"] :is(.section--grey, .section--night, .final-cta, .page-hero--night, .page-hero, .hero, .section--tools) {
	background: var(--page); box-shadow: none;
}
html[data-theme="dark"] .modules { box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.14); }
html[data-theme="dark"] .modules li { background: var(--grey); }
html[data-theme="dark"] .site-footer { background: var(--page); border-top-color: rgba(143, 176, 255, 0.12); }
html[data-theme="dark"] .site-footer__top { border-bottom-color: rgba(143, 176, 255, 0.12); }

/* ---------- Cartes et surfaces ---------- */
html[data-theme="dark"] .card { background: var(--grey); box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.1); }
html[data-theme="dark"] .section:not(.section--grey) .card { background: var(--grey); box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.1); }
html[data-theme="dark"] :is(.section--night, .final-cta) .card { background: var(--grey); }
html[data-theme="dark"] .pill { background: rgba(143, 176, 255, 0.14); color: #b4caff; }
html[data-theme="dark"] .pill--quiet, html[data-theme="dark"] .card p.pill--quiet { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
html[data-theme="dark"] .card p.pill:not(.pill--quiet) { color: #b4caff; }
html[data-theme="dark"] .marketing__item { background: var(--grey); box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.1); }
html[data-theme="dark"] .step { background: var(--grey); }
html[data-theme="dark"] .section--grey .step { background: var(--grey); }
html[data-theme="dark"] .pillars, html[data-theme="dark"] .pillar + .pillar { border-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .timeline__item { border-top-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .bio__text .lead { color: var(--text); }
html[data-theme="dark"] .hero__line { background: #8fb0ff; opacity: 0.55; }
html[data-theme="dark"] .hero__badge { background: rgba(13, 23, 41, 0.78); color: var(--text); box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.2), 0 12px 30px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .chip__body { background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(143, 176, 255, 0.25), 0 10px 28px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .chip__tip { background: #1e4fd8; }
html[data-theme="dark"] .tool-badge { background: var(--grey); }
html[data-theme="dark"] .tool-badge:hover, html[data-theme="dark"] .tool-badge--link:is(:hover, :focus-within) { background: var(--surface-2); }
html[data-theme="dark"] .section--grey .tool-badge { background: var(--grey); }
html[data-theme="dark"] :is(.tool-badge__logo, .tool-card__logo) { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .section:not(.section--grey) .tool-card--link:is(:hover, :focus-within) { background: var(--surface-2); }
html[data-theme="dark"] .tool-card--link:is(:hover, :focus-within) .pill--quiet { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .tool-card .tool-card__use { color: var(--text); }
html[data-theme="dark"] .post-card__link { background: var(--grey); color: var(--text); }
html[data-theme="dark"] .page-numbers { background: var(--grey); color: var(--text); }
html[data-theme="dark"] .page-numbers.current { background: #1e4fd8; }
html[data-theme="dark"] .newsletter-card {
	background: radial-gradient(700px 300px at 90% 0%, rgba(46, 98, 240, 0.32), transparent 65%), linear-gradient(135deg, #10244a 0%, #0c1a33 70%);
	box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.16);
}
html[data-theme="dark"] .newsletter-card .an-nl-form .an-nl-form__input { background: rgba(5, 11, 23, 0.45); }
html[data-theme="dark"] .an-thought__frame { border-color: rgba(143, 176, 255, 0.28); box-shadow: 0 30px 80px -20px rgba(30, 79, 216, 0.45), 0 0 0 1px rgba(143, 176, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* Contact */
html[data-theme="dark"] .contact-card { background: var(--chip-bg); border-color: var(--chip-border); }
html[data-theme="dark"] .contact-card:is(:hover, :focus-within) { background: var(--chip-bg-hover); border-color: var(--chip-border-hover); }
html[data-theme="dark"] .contact-card__icon { background: #1e4fd8; }
html[data-theme="dark"] .contact-card__value a { color: var(--text); }
html[data-theme="dark"] :is(.offer__icon, .tool-badge__mark) { background: #16326a; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.25); }

/* Fiches outils */
html[data-theme="dark"] .tool-box .tool-box__title::before { background: rgba(143, 176, 255, 0.14); }
html[data-theme="dark"] .tool-box--cons .tool-box__title::before { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .tool-box--cons .tool-box__title::after { background: #d3dbe8; }
html[data-theme="dark"] .tool-box .tool-box__list li { color: var(--text); border-top-color: rgba(255, 255, 255, 0.08); }

/* Textes longs, articles */
html[data-theme="dark"] .prose pre { background: #020610; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.14); }
html[data-theme="dark"] .prose code { background: var(--surface-2); }
html[data-theme="dark"] .author-box, html[data-theme="dark"] .empty-state { background: var(--grey); }
html[data-theme="dark"] .logged-in .a-verifier { background: #4a3a00; color: #ffe08a; }

/* Ordinateur portable : socle un peu moins éclatant. */
html[data-theme="dark"] .wp-block-image.laptop { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .wp-block-image.laptop::after { background: linear-gradient(#c9c9cf 0%, #a8a8ae 55%, #86868c 100%); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.7); }

/* ---------- Couleurs choisies dans l'éditeur (palette du thème) ----------
   Les couleurs sombres de la palette, illisibles sur fond sombre, sont éclaircies ;
   les fonds clairs deviennent des surfaces bleu nuit. Une couleur personnalisée
   (code hexadécimal saisi à la main) n'est pas modifiée. */
html[data-theme="dark"] :is(.has-texte-color, .has-black-color, .has-very-dark-gray-color) { color: var(--text) !important; }
html[data-theme="dark"] .has-bleu-nuit-color { color: #c9d7ff !important; }
html[data-theme="dark"] .has-bleu-color { color: #8fb0ff !important; }
html[data-theme="dark"] .has-gris-texte-color { color: var(--muted) !important; }
html[data-theme="dark"] :is(.has-blanc-background-color, .has-white-background-color) { background-color: var(--surface-2) !important; }
html[data-theme="dark"] :is(.has-gris-background-color, .has-very-light-gray-background-color) { background-color: var(--grey) !important; }
html[data-theme="dark"] .has-bleu-clair-background-color:not(.has-text-color) { color: #0b1f3a; }