/*
Theme Name: Virginie Jaussan
Theme URI: https://virginie-jaussan-psychopeda.fr
Author: Paul Faguet
Author URI: https://virginie-jaussan-psychopeda.fr
Description: Thème one-page sur mesure pour Virginie Jaussan, psychopédagogue à Lyon. Sobre, rapide, sans page builder : le contenu s'édite entièrement avec les blocs Gutenberg natifs.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: virginie-jaussan
Tags: one-page, block-styles, custom-colors, accessibility-ready, translation-ready
*/

/* ==========================================================================
   1. Tokens
   Les couleurs et tailles viennent de theme.json (var(--wp--preset--*)).
   On ne redéclare ici que ce qui lui est propre au thème.
   ========================================================================== */

:root {
	--vj-teal: var(--wp--preset--color--teal, #57A1A6);
	--vj-blue: var(--wp--preset--color--blue, #4D7CC2);
	--vj-rose: var(--wp--preset--color--rose, #E6A2A2);
	--vj-sand: var(--wp--preset--color--sand, #F4F0E9);
	--vj-sand-deep: var(--wp--preset--color--sand-deep, #E8E1D4);
	--vj-ink: var(--wp--preset--color--ink, #2B3338);
	--vj-muted: var(--wp--preset--color--muted, #5F6C72);

	/* Déclinaisons « texte » des couleurs de marque.
	   Les teintes claires (surtout le rose) sont faites pour les aplats, pas
	   pour l'écriture : posées en texte elles tombent sous le ratio WCAG AA.
	   Ces trois variantes gardent la teinte tout en restant lisibles (≥ 4.5:1). */
	--vj-teal-ink: #35696D;
	--vj-blue-ink: #3A62A0;
	--vj-rose-ink: #9B5457;

	--vj-content: 760px;
	--vj-wide: 1140px;
	--vj-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--vj-section-y: clamp(3.5rem, 8vw, 6.5rem);

	--vj-radius: 6px;
	--vj-radius-lg: 14px;
	--vj-shadow: 0 1px 2px rgba(43, 51, 56, .05), 0 8px 28px -12px rgba(43, 51, 56, .16);
	--vj-ring: 0 0 0 3px rgba(87, 161, 166, .35);
	--vj-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Compense le header collant lors des ancres du menu one-page. */
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	color: var(--vj-ink);
	background: #fff;
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	line-height: 1.18;
	letter-spacing: -.01em;
	text-wrap: balance;
	margin: 0 0 .6em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--vj-teal); text-underline-offset: .18em; }
a:hover { text-decoration: none; }

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--vj-teal);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Lien d'évitement clavier. */
.vj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--vj-ink);
	color: #fff;
	text-decoration: none;
	border-radius: 0 0 var(--vj-radius) 0;
}
.vj-skip:focus { left: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

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

/* ==========================================================================
   3. Largeurs de contenu (alignements Gutenberg natifs)
   ========================================================================== */

.vj-main > .alignfull { width: 100%; }

.vj-main :where(.wp-block-group, .wp-block-columns) { margin-inline: auto; }

.vj-flow > * { margin-inline: auto; max-width: var(--vj-content); }
.vj-flow > .alignwide { max-width: var(--vj-wide); }
.vj-flow > .alignfull { max-width: none; }