/* ==========================================================================
   ClimaSud — 01. SOCLE
   Réinitialisation douce, garde-fous de mise en page, accessibilité,
   animations d'apparition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Alias courts des jetons de theme.json.
   theme.json reste la source de vérité ; ces alias évitent d'écrire
   var(--wp--preset--color--bleu-nuit) quarante fois par fichier.
   -------------------------------------------------------------------------- */
:root {
	--cs-blanc: var(--wp--preset--color--blanc);
	--cs-nuage: var(--wp--preset--color--nuage);
	--cs-encre: var(--wp--preset--color--encre);
	--cs-ardoise: var(--wp--preset--color--ardoise);
	--cs-brume: var(--wp--preset--color--brume);
	--cs-bleu: var(--wp--preset--color--bleu);
	--cs-bleu-nuit: var(--wp--preset--color--bleu-nuit);
	--cs-bleu-clair: var(--wp--preset--color--bleu-clair);
	--cs-bleu-marque: var(--wp--preset--color--bleu-marque);
	--cs-bleu-vif: var(--wp--preset--color--bleu-vif);
	--cs-action: var(--wp--preset--color--action);
	--cs-action-fonce: var(--wp--preset--color--action-fonce);
	--cs-filet: var(--wp--preset--color--filet);
	--cs-clair-doux: var(--wp--preset--color--clair-doux);

	/* Couleurs de service, hors palette de l'éditeur : elles ne doivent pas
	   être proposées au rédacteur, elles ne servent qu'aux états d'interface.
	   Toutes vérifiées à 3:1 minimum (bordures) ou 4,5:1 (texte). */
	--cs-bord-champ: #7C90A1;   /* 3,30:1 sur blanc — WCAG 1.4.11 */
	--cs-erreur: #C4262E;       /* 5,73:1 sur blanc */
	--cs-erreur-fond: #FDECEC;
	--cs-succes: #1B7A3E;       /* 5,38:1 sur blanc */
	--cs-succes-fond: #E9F6EE;
	--cs-alerte: #6B4A05;       /* encadrés « Information à fournir » */
	--cs-alerte-fond: #FDF6E3;
	--cs-alerte-bord: #E3C86A;

	/* Le nuit en composantes séparées. Les voiles posés sur photographie ont
	   besoin d'une opacité variable : rgba() n'accepte pas une couleur
	   hexadécimale en variable, il faut les trois nombres. Cette ligne et
	   --cs-bleu-nuit doivent rester d'accord — c'est la seule duplication
	   volontaire de la feuille. */
	--cs-nuit-rvb: 11, 26, 35;

	--cs-rayon-bouton: 4px;
	--cs-rayon-carte: 10px;
	--cs-transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Hauteur réelle de l'en-tête collante. Recalculée en JavaScript, mais une
	   valeur de départ est indispensable : sans elle, une ancre visée avant que
	   le script ne s'exécute atterrit sous l'en-tête. */
	--cs-hauteur-entete: 74px;

	/* Hauteur de la barre d'action fixe du bas, sur mobile uniquement.
	   Vaut 0 sur ordinateur : voir 04-responsive.css. */
	--cs-hauteur-barre-mobile: 0px;
}

/* --------------------------------------------------------------------------
   Réinitialisation douce
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Une ancre ne doit jamais atterrir cachée sous l'en-tête collante. */
	scroll-padding-top: calc(var(--cs-hauteur-entete) + 16px);
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	/* Sur mobile, la barre d'action fixe recouvrirait la fin du pied de page. */
	padding-bottom: var(--cs-hauteur-barre-mobile);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Les médias ne débordent jamais de leur colonne. Deux lignes qui évitent
   l'immense majorité des défauts d'affichage sur téléphone. */
img,
svg,
video,
iframe,
canvas {
	max-width: 100%;
	height: auto;
}

/* Garde-fou anti-défilement horizontal. « clip » et non « hidden » : hidden
   crée un conteneur de défilement qui casserait position: sticky. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Les tableaux longs défilent dans leur propre boîte, jamais la page entière. */
.wp-block-table {
	overflow-x: auto;
}

/* Un mot très long (adresse e-mail, référence de matériel) ne pousse pas la
   mise en page au-delà de l'écran. */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dt,
figcaption {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Typographie de base
   -------------------------------------------------------------------------- */

/* Les titres évitent le mot orphelin sur la dernière ligne. */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* Le corps de texte évite une dernière ligne d'un seul mot. */
p {
	text-wrap: pretty;
}

::selection {
	background: var(--cs-bleu-clair);
	color: var(--cs-encre);
}

/* --------------------------------------------------------------------------
   COLONNE DE LECTURE

   Dans une page rédactionnelle, la ligne ne dépasse jamais ~72 caractères,
   quelle que soit la largeur de l'écran : au-delà, l'œil perd le début de la
   ligne suivante.

   La classe est posée sur le bloc « Contenu » lui-même, si bien que les
   paragraphes en sont les enfants directs. Le bloc reste aligné à gauche, sur
   la même verticale que le titre de la page et que le fil d'Ariane — c'est ce
   qui donne au gabarit son aplomb.

   La règle l'emporte sur celle de WordPress, qui centre les enfants d'une
   mise en page « contrainte », parce que WordPress l'écrit dans un :where()
   de spécificité nulle.
   -------------------------------------------------------------------------- */
.cs-prose > * {
	max-width: 72ch;
	margin-left: 0;
	margin-right: 0;
}

/* Les sections pleine largeur, les grilles et les blocs d'appel gardent leur
   emprise : ce ne sont pas des lignes de texte à lire. */
.cs-prose > .alignfull,
.cs-prose > .alignwide,
.cs-prose > .wp-block-columns,
.cs-prose > .cs-grille,
.cs-prose > .cs-urgence,
.cs-prose > .cs-encadre {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Liens
   -------------------------------------------------------------------------- */
a {
	transition: color var(--cs-transition);
}

/* Le soulignement respire : il ne traverse plus les jambages. */
.wp-site-blocks a:not(.wp-element-button):not(.cs-lien-nu) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Certains liens ne doivent pas être soulignés : le logo, les liens de carte
   entièrement cliquable, les icônes. On le déclare explicitement plutôt que
   d'annuler au cas par cas. */
.cs-lien-nu {
	text-decoration: none;
}

.cs-lien-nu:hover,
.cs-lien-nu:focus-visible {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */

/* Contour de focus visible partout, y compris sur fond sombre. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--cs-action);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sur fond bleu nuit, le rouge ne ressort pas assez : on passe au blanc. */
.cs-sur-sombre a:focus-visible,
.cs-sur-sombre button:focus-visible,
.cs-sur-sombre summary:focus-visible,
.cs-sur-sombre [tabindex]:focus-visible {
	outline-color: var(--cs-blanc);
}

/* Masqué à l'œil, lu par les lecteurs d'écran. */
.cs-lecteur-ecran {
	position: absolute !important; /* surcharge tout positionnement hérité */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement : premier élément tabulable de la page. */
.cs-evitement {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--cs-action);
	color: var(--cs-blanc);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform var(--cs-transition);
}

.cs-evitement:focus {
	transform: translateY(0);
}

/* Cibles tactiles : 44 px minimum, recommandation WCAG 2.5.8.
   Appliqué uniquement aux appareils sans survol, pour ne pas gonfler
   inutilement les liens de texte sur ordinateur. */
@media (hover: none) {
	.cs-cible-tactile,
	.wp-block-navigation a,
	.cs-pied a,
	.cs-social a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   Apparition au défilement

   Le voile de départ n'est posé QUE si <html> porte la classe « cs-js »,
   ajoutée par le filet de sécurité en tête de page (voir inc/assets.php).
   Sans JavaScript, rien n'est jamais masqué : une section ne peut pas
   rester invisible parce qu'un script n'est pas arrivé.
   -------------------------------------------------------------------------- */
.cs-js .cs-apparition {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms ease-out, transform 520ms ease-out;
	/* Prépare la composition sans forcer une couche permanente. */
	will-change: opacity, transform;
}

.cs-js .cs-apparition.cs-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.cs-js .cs-apparition {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */
@media print {
	.cs-entete,
	.cs-barre-mobile,
	.cs-evitement,
	.cs-pied-reseaux,
	.wp-block-navigation {
		display: none !important; /* éléments d'écran, sans objet sur papier */
	}

	body {
		padding-bottom: 0;
		color: #000;
		background: #fff;
	}

	.cs-apparition {
		opacity: 1 !important; /* le voile d'animation ne doit pas blanchir la page */
		transform: none !important;
	}

	/* L'adresse d'un lien est perdue à l'impression : on l'écrit. */
	.cs-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}