/* =====================================================================
   ANIMA — FONDATIONS
   Valeurs de la « fiche des valeurs » (Direction design de Marc, section 3).
   Les couleurs, polices et tailles nommées sont déclarées dans theme.json ;
   ce fichier leur donne les noms des maquettes (--couleur-action, --texte-h1…)
   et ajoute ce que theme.json ne sait pas faire : les tailles qui changent
   selon la largeur de l'écran.
   Règle : chaque taille prend la valeur « téléphone » par défaut, puis la valeur
   « tablette » (≥ 600 px) ou « ordinateur » (≥ 1024 px).
   ===================================================================== */

:root {
	/* Couleurs (source : theme.json) */
	--couleur-action: var(--wp--preset--color--action);
	--couleur-action-survol: var(--wp--preset--color--action-survol);
	--couleur-accent: var(--wp--preset--color--accent);
	--couleur-marine: var(--wp--preset--color--marine);
	--couleur-texte: var(--wp--preset--color--texte);
	--couleur-texte-secondaire: var(--wp--preset--color--texte-secondaire);
	--couleur-fond-pale: var(--wp--preset--color--fond-pale);
	--couleur-blanc: var(--wp--preset--color--blanc);
	--couleur-bordure: var(--wp--preset--color--bordure);
	--couleur-bordure-champ: var(--wp--preset--color--bordure-champ);
	--couleur-texte-sur-marine-2: var(--wp--preset--color--texte-sur-marine-2);
	--couleur-erreur: var(--wp--preset--color--erreur);
	--couleur-succes: var(--wp--preset--color--succes);
	--couleur-succes-fond: var(--wp--preset--color--succes-fond);
	--couleur-fond-gris: var(--wp--preset--color--fond-gris);
	--couleur-surlignage: var(--wp--preset--color--surlignage);
	--couleur-pastille-survol: var(--wp--preset--color--pastille-survol);

	/* Polices (source : theme.json) */
	--police-titres: var(--wp--preset--font-family--manrope);
	--police-texte: var(--wp--preset--font-family--inter);

	/* Tailles de texte — téléphone */
	--texte-h1: 30px; --texte-h2: 24px; --texte-h3: 20px; --texte-h4: 18px; --texte-h5: 17px;
	--texte-courant: 17px; --texte-petit: 14px; --texte-citation: 19px; --texte-bouton: 16px;
	--texte-menu: 18px; --texte-etiquette: 13px; --texte-chiffre: 36px;
	--interligne-h1: 1.2; --interligne-h2: 1.25; --interligne-h3: 1.3; --interligne-h4: 1.35; --interligne-h5: 1.4;
	--interligne-texte: 1.6; --interligne-petit: 1.5; --interligne-citation: 1.5; --interligne-bouton: 1.2; --interligne-chiffre: 1.1;

	/* Espacements */
	--espace-1: 4px; --espace-2: 8px; --espace-3: 16px; --espace-4: 24px;
	--espace-5: 32px; --espace-6: 48px; --espace-7: 64px; --espace-8: 80px;
	--espace-section: 48px; --marge-laterale: 20px; --espace-cartes: 16px;
	--largeur-texte: 700px; --largeur-large: 1240px;

	/* Formes, ombres, focus, durées */
	--arrondi-bouton: 6px; --arrondi-champ: 6px; --arrondi-carte: 10px;
	--ombre-survol: 0 6px 18px rgba(11, 37, 69, .14); --soulevement-survol: -3px;
	--ombre-menu: 0 8px 24px rgba(11, 37, 69, .14);
	--ombre-entete: 0 2px 8px rgba(11, 37, 69, .08);
	--focus: 3px solid var(--couleur-action); --focus-decalage: 3px;
	--duree-couleur: .15s; --duree-carte: .2s;
}

@media (min-width: 600px) { /* tablette */
	:root { --espace-section: 64px; --marge-laterale: 32px; --espace-cartes: 24px; }
}

@media (min-width: 1024px) { /* ordinateur */
	:root {
		--texte-h1: 44px; --texte-h2: 32px; --texte-h3: 24px; --texte-h4: 20px; --texte-h5: 18px;
		--texte-courant: 18px; --texte-petit: 15px; --texte-citation: 22px; --texte-bouton: 17px;
		--texte-menu: 16px; --texte-chiffre: 52px;
		--espace-section: 80px; --marge-laterale: 40px; --espace-cartes: 32px;
	}
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }
a { text-underline-offset: 2px; transition: color var(--duree-couleur); }

/* Les parties du site (en-tête, contenu, pied de page) se touchent : pas d'espace entre elles. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Contour de focus clavier : 3 px bleu, décalé de 3 px (blanc sur fond marine). */
:focus-visible { outline: var(--focus); outline-offset: var(--focus-decalage); }
/* 3.10 : aucun cadre sur un lien après un simple clic (Firefox en dessinait un sur :focus, vu
   un instant autour de « Vidéos » dans le menu, avant le chargement de la page). Le cadre
   du clavier (:focus-visible) reste. */
a:focus:not(:focus-visible) { outline: none; }
.sur-marine :focus-visible,
.has-marine-background-color :focus-visible { outline-color: var(--couleur-blanc); }

/* Texte réservé aux lecteurs d'écran. */
.visuellement-cache {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Lien « Aller au contenu » ajouté par WordPress : visible seulement au clavier. */
.skip-link.screen-reader-text:focus {
	background: var(--couleur-marine); color: var(--couleur-blanc);
	clip: auto !important; clip-path: none; height: auto; width: auto;
	left: 8px; top: 8px; padding: 8px 16px; border-radius: var(--arrondi-bouton);
	font-size: 16px; font-weight: 500; text-decoration: none; z-index: 100000;
	outline: 3px solid var(--couleur-blanc); outline-offset: 0;
}

/* Conteneurs : contenu centré dans 1240 px, textes longs dans 700 px. */
.conteneur { max-width: calc(var(--largeur-large) + 2 * var(--marge-laterale)); margin: 0 auto; padding: 0 var(--marge-laterale); }
.conteneur-texte { max-width: calc(var(--largeur-texte) + 2 * var(--marge-laterale)); margin: 0 auto; padding: 0 var(--marge-laterale); }

/* ===== Icônes en pastille (décisions 16 et 75) ===== */
.icone { width: 20px; height: 20px; flex: none; display: block; }
.pastille {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
	background: var(--couleur-fond-pale); color: var(--couleur-action);
	cursor: pointer; transition: background var(--duree-couleur);
}
.pastille:hover { background: var(--couleur-pastille-survol); }
span.pastille { cursor: default; }
span.pastille:hover { background: var(--couleur-fond-pale); }
.pastille-36 { width: 36px; height: 36px; }
.pastille-36 .icone { width: 18px; height: 18px; }
.sur-marine .pastille,
.sur-marine span.pastille:hover { background: rgba(255, 255, 255, .12); color: var(--couleur-blanc); }

/* Boutons, cartes et autres composants : voir composants.css (sous-étape 2.2). */

/* ===== « Réduire les animations » activé : aucun mouvement ===== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}