/*
Theme Name: Citizen Motion — V2
Theme URI: https://citizenmotion.be
Author: Citizen Motion
Description: Thème bloc sur mesure, porté depuis les maquettes V2 (dossier maquettes/V2). Fond sombre éditorial, biseaux à 45°, formes du diaphragme en décor. Les blocs sont paramétriques : la mise en page se règle dans l'éditeur, pas dans le CSS.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: citizenmotion2
*/

/* ==========================================================================
   SOMMAIRE
   1. Jetons — pont vers les variables générées par theme.json
   2. Fond de page et réglages globaux
   3. Couches : décors, contenu, étiquettes
   4. En-tête et pied de page
   5. Garde-fous
   ========================================================================== */


/* ==========================================================================
   1. JETONS
   --------------------------------------------------------------------------
   theme.json reste la SEULE source de vérité. Ce bloc ne fait que donner des
   noms courts aux variables qu'il génère, pour que le CSS des blocs reste
   lisible. Ne jamais écrire une couleur en dur ici.
   ========================================================================== */

:root {
	--cimo-dark:    var(--wp--preset--color--brand-dark);
	--cimo-surface: var(--wp--preset--color--brand-surface);
	--cimo-raised:  var(--wp--preset--color--brand-raised);
	--cimo-teal:    var(--wp--preset--color--brand-teal);
	--cimo-coral:   var(--wp--preset--color--brand-coral);
	--cimo-yellow:  var(--wp--preset--color--brand-yellow);
	--cimo-cream:   var(--wp--preset--color--brand-cream);

	/* Filets et voiles. Les maquettes les expriment en blanc translucide
	   plutôt qu'en gris opaque : le filet reste juste sur n'importe quel fond. */
	--cimo-rule:   rgba( 255, 255, 255, 0.1 );
	--cimo-rule-2: rgba( 255, 255, 255, 0.05 );

	/* Le grain de fond des maquettes V2 (radial-gradient 24 px). */
	--cimo-grain-color: rgba( 255, 255, 255, 0.04 );
	--cimo-grain-size: 24px;

	/* Largeur de lecture, reprise de max-w-7xl / 6xl / 5xl des maquettes. */
	--cimo-measure: 80rem;

	/*
	 * Le biseau à 45° : rapport entre l'épaisseur d'une bordure et le retrait
	 * que doit subir la découpe intérieure pour que la bordure garde la même
	 * épaisseur en diagonale. Vaut 2 − √2.
	 *
	 * Démonstration : la découpe extérieure suit x + y = d. La boîte intérieure
	 * est en retrait de w, sa découpe suit donc x + y = 2w + d′. La distance
	 * entre les deux droites vaut |2w + d′ − d| / √2 ; l'égaler à w donne
	 * d′ = d − w(2 − √2). Sans ce retrait, la bordure paraît plus fine dans
	 * l'angle que sur les côtés — c'est le cas des 18/20 px de la maquette.
	 */
	--cimo-bevel-k: 0.5857;
}


/* ==========================================================================
   2. FOND DE PAGE
   ========================================================================== */

/*
 * box-sizing. Sans ce reset, une largeur fixe s'ajoute au retrait : les deux
 * boutons du héros, réglés à 14rem, mesuraient 18rem à l'écran. Les maquettes
 * posent le même reset en tête de leur feuille.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background-color: var( --cimo-dark );
	background-image: radial-gradient( var( --cimo-grain-color ) 1px, transparent 1px );
	background-size: var( --cimo-grain-size ) var( --cimo-grain-size );
	/* Les décors débordent volontairement de leur section ; ils ne doivent
	   pas pour autant élargir la page. */
	overflow-x: hidden;
}

/* Une image ne déborde jamais de son cadre, quelle que soit sa taille
   d'origine. Les visuels des maquettes sont servis en pleine résolution. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Un SVG sans dimensions prendrait 300 × 150 px par défaut. Les décors, eux,
   fixent explicitement leur taille : ils échappent à ce bridage. */
:where( svg:not( [width], .cimo-decor, .cimo-icon svg ) ) {
	max-height: 50px;
}

a {
	color: inherit;
}

/*
 * Un mot coloré dans un titre est balisé <mark> par l'éditeur. Le navigateur
 * lui donne un fond jaune de surligneur — qui n'a rien à faire ici : seule la
 * couleur du texte nous intéresse. L'éditeur pose bien un fond transparent en
 * style en ligne, mais il ne survit pas au filtrage des attributs.
 */
mark {
	background-color: transparent;
	color: inherit;
}

::selection {
	background: var( --cimo-teal );
	color: var( --cimo-dark );
}

:where( a, button, .cimo-box ):focus-visible {
	outline: 2px solid var( --cimo-teal );
	outline-offset: 3px;
}


/* ==========================================================================
   3. COUCHES
   --------------------------------------------------------------------------
   Reprise du thème précédent, et pour la même raison : les décors sont en
   position absolue dans leur section, il faut que celle-ci soit un repère et
   que l'ordre d'empilement soit décidé une fois pour toutes.

   −1 sous le fond · 0 décors · 1 contenu · 2 au-dessus du contenu · 3 étiquettes
   ========================================================================== */

/* Toute section — et tout bloc qui accueille un décor — sert de repère. */
.cimo-section,
.cimo-grid,
.cimo-box,
:where( header, footer, main > section ):has( > .cimo-decor ) {
	position: relative;
}

/* Un conteneur qui accueille un décor rogne ce qui dépasse à l'horizontale :
   les décalages négatifs sont voulus, l'ascenseur horizontal ne l'est pas. */
:has( > .cimo-decor ) {
	overflow-x: clip;
}

.cimo-decor {
	position: absolute;
	pointer-events: none;
	/* La profondeur est posée en style en ligne par render.php : elle doit
	   pouvoir ordonner plusieurs décors entre eux. */
}

/* Le contenu direct d'une section passe au-dessus des décors. */
/*
 * .cimo-layer est l'échappatoire, et elle est nécessaire : un enfant qui se
 * positionne LUI-MÊME en absolu — un fond de héros, par exemple — se voyait
 * imposer position: relative par cette règle, retombait dans le flux et
 * s'écrasait à zéro, emportant ses images avec lui. Rien ne le signalait.
 */
.cimo-section > :not( .cimo-decor, .cimo-cut__fill, .cimo-layer ) {
	position: relative;
	z-index: 1;
}

/*
 * Dans une boîte, on NOMME ce qui doit passer au-dessus du fond, au lieu de
 * viser tous les enfants : les équerres d'angle et le calque de clic sont en
 * position absolue, et une règle générale les ramenait dans le flux — les
 * équerres s'affichaient alors en bas de la carte, au milieu du texte.
 */
.cimo-box > .cimo-box__head,
.cimo-box > .cimo-box__body,
.cimo-box > .cimo-box__note {
	position: relative;
	z-index: 1;
}

/*
 * Même chose à l'intérieur du corps : un décor posé dans une carte est un
 * élément positionné, et un élément positionné se peint AU-DESSUS du texte en
 * flux. Sans cette règle, l'éclair de fond recouvrait le titre.
 */
.cimo-box__body > :not( .cimo-decor ) {
	position: relative;
	z-index: 1;
}


/* ==========================================================================
   4. EN-TÊTE ET PIED DE PAGE
   ========================================================================== */

.cimo-header {
	position: relative;
	z-index: 30;
	width: 100%;
	max-width: var( --cimo-measure );
	margin-inline: auto;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* Le logo des maquettes est noir : sur fond sombre, on l'inverse. */
.cimo-header .wp-block-site-logo img,
.cimo-footer .wp-block-site-logo img {
	filter: invert( 1 );
}

.cimo-header .wp-block-navigation {
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --wp--preset--color--gray-300 );
}

/*
 * Le pied de page est porté du thème V1 : trois colonnes — marque et
 * coordonnées, liens rapides, réseaux sociaux. Les maquettes V2 n'en
 * dessinaient qu'un filet et une ligne de mention ; c'est le pied du V1 qui
 * fait foi pour le contenu, et le vocabulaire V2 pour l'apparence — fond
 * sombre hérité de la page, filet en blanc translucide, sur-titres au rôle
 * « eyebrow ».
 *
 * Les colonnes sont des blocs Empilement : la grille, elle, est ici. Règle
 * du projet — le CSS gouverne la mise en page, les blocs le contenu.
 */
.cimo-footer {
	position: relative;
	z-index: 30;
	width: 100%;
	max-width: var( --cimo-measure );
	margin-inline: auto;
	margin-top: 3rem;
	padding: 3rem 1.5rem 2rem;
	border-top: 1px solid var( --cimo-rule );
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 2rem;
	font-size: var( --wp--preset--font-size--xs );
	color: var( --wp--preset--color--gray-400 );
}

/*
 * Les douze colonnes du V1, et ses empans 5 / 4 / 3. Au-dessous de 768 px
 * les trois colonnes s'empilent — c'est le 1fr ci-dessus.
 */
@media ( min-width: 768px ) {

	.cimo-footer {
		grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	}

	.cimo-footer__brand {
		grid-column: span 5;
	}

	.cimo-footer__links {
		grid-column: span 4;
	}

	.cimo-footer__social {
		grid-column: span 3;
	}
}

/* La phrase de marque garde la mesure courte du V1. */
.cimo-footer__desc {
	max-width: 20rem;
}

.cimo-footer a {
	transition: color 0.2s ease;
}

.cimo-footer a:hover {
	color: var( --wp--preset--color--white );
}

/* --- Coordonnées -----------------------------------------------------------
 * Chaque ligne est un Empilement en rangée : l'icône, puis le texte. Le V1
 * avait un bloc « élément de coordonnée » dédié ; ici deux blocs atomiques
 * suffisent, et la rédaction peut changer l'icône ou le texte sans toucher
 * au code.
 * -------------------------------------------------------------------------- */

/*
 * L'icône est centrée sur sa propre ligne de 1 em, le texte sur la sienne,
 * plus haute : sans ce décalage l'icône paraît collée en haut de la ligne.
 */
.cimo-footer__contact .cimo-icon {
	margin-top: 0.2em;
}

.cimo-footer__contact strong {
	color: var( --wp--preset--color--gray-300 );
	font-weight: 700;
}

/* --- Liens rapides -------------------------------------------------------- */

/*
 * La navigation du cœur est en rangée par défaut, même déclarée verticale :
 * la disposition se joue sur le conteneur interne, pas sur le bloc.
 */
.cimo-footer__nav.wp-block-navigation .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.cimo-footer__nav .wp-block-navigation-item__content {
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var( --wp--preset--color--gray-400 );
}


/* ==========================================================================
   5. GARDE-FOUS
   --------------------------------------------------------------------------
   Un bloc de groupe en disposition « flux » porte la classe is-layout-flow,
   et le cœur applique alors margin-block-start: 24px à CHACUN de ses enfants
   — y compris à ceux en position absolue, qui se retrouvent décalés sans
   raison. Piège rencontré sur le thème précédent, neutralisé ici d'emblée.
   ========================================================================== */

.cimo-footer > *,
.cimo-section > *,
.cimo-layer > *,
.cimo-grid > *,
.cimo-box > *,
.cimo-box__body > * {
	margin-block-start: 0;
}