/*
Theme Name: ASGR
Theme URI: http://localhost:8818/
Author: ASGR Team
Description: Custom block-based (FSE) theme for ASGR. Gutenberg blocks generated from Figma.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: UNLICENSED
Text Domain: asgr
Tags: full-site-editing, block-templates, custom-blocks
*/

/* ===========================================================================
   Design System — typographie responsive (rupture à 768px).
   Les tailles DESKTOP des titres viennent de theme.json (styles.elements +
   presets de font-size). Ici on applique uniquement les tailles MOBILE du DS
   aux titres GÉNÉRIQUES (post-title + core/heading). Les blocs custom (asgr-*)
   gèrent leur propre responsive et ne sont pas touchés.
   Spécificité 0,1,1 (h1.classe) pour battre le `:root :where(h1)` de theme.json.
   =========================================================================== */
@media (max-width: 768px) {
	h1.wp-block-post-title,
	h1.wp-block-heading {
		font-size: 50px;
		line-height: 50px;
	}

	h2.wp-block-heading {
		font-size: 32px;
		line-height: 39px;
	}

	h3.wp-block-heading {
		font-size: 28px;
		line-height: 30px;
	}
	/* H4 et paragraphe : inchangés en mobile (cf. design system). */
}

/* Supprime le gap vertical (24px) que WordPress applique par défaut entre les
   blocs de 1er niveau du site (header → main → footer) via
   `:where(.wp-site-blocks) > * { margin-block-start: 24px }`. Chaque section a
   son propre fond, donc elles peuvent se toucher sans espace — sur mobile ET
   desktop. Spécificité (0,1,1) suffisante pour battre le `:where()` (0,0,0). */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Aucun surlignement (soulignement) des liens au survol, sur tout le site.
   La source normale est theme.json (elements.link :hover, désormais retiré) ;
   ce filet de sécurité couvre le cas où les styles globaux auraient été
   personnalisés dans l'éditeur de site (servis depuis la base). Spécificité
   (0,2,1) via :root pour battre la règle générée `:root :where(a…):hover`. */
:root a:hover {
	text-decoration: none;
}

/* Footer — liens "association" + "Nous contacter" : pas de puces, liens gris sans
   soulignement (les <a> héritaient sinon de la couleur de lien globale : bleu + souligné). */
.asgr-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs); /* 15px entre les éléments du menu */
	list-style: none;
	margin: 0;
	padding: 0;
}

.asgr-footer__links a,
.asgr-footer__contact a {
	color: var(--wp--preset--color--neutral-dark);
	text-decoration: none;
}

/* Footer mobile — tout centré dès que les colonnes core s'empilent (≤ 781px). */
@media (max-width: 781px) {
	/* Zone principale : chaque colonne devient une pile centrée. */
	footer .wp-block-column {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Logo centré. */
	footer .wp-block-site-logo {
		margin-inline: auto;
	}

	/* Bloc "Suivez-nous" : icônes + @handle regroupés et centrés. */
	footer .wp-block-column .wp-block-group,
	footer .wp-block-social-links {
		justify-content: center;
	}

	/* Barre du bas : copyright + liens légaux centrés et empilés. */
	footer .is-content-justification-space-between {
		justify-content: center;
	}

	footer .wp-block-navigation__container {
		justify-content: center;
	}
}

/* Formulaire de contact (CF7). */
.asgr-form {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md); /* 30px entre les rangées */
	width: 100%;
	max-width: 792px; /* largeur du formulaire dans la maquette */
	margin-inline: auto;
	padding: var(--wp--preset--spacing--sm); /* respiration autour du formulaire */
}

/* Garde-fou : neutralise les <p>/<br> que CF7 (wpautop) peut injecter et qui
   ajoutent des sauts de ligne parasites entre label et champ. */
.asgr-form p {
	margin: 0;
}

.asgr-form br {
	display: none;
}

/* Une rangée (un ou deux champs côte à côte). */
.asgr-form__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

/* Champ conditionnel masqué (géré par assets/js/contact-form.js).
   Nécessaire car .asgr-form__row / __group imposent display:flex, qui
   l'emporterait sinon sur l'attribut [hidden] natif. */
.asgr-form__row[hidden],
.asgr-form__group[hidden] {
	display: none;
}

.asgr-form__row--2col {
	flex-direction: row;
	flex-wrap: wrap;
}

.asgr-form__row--2col > .asgr-form__group {
	flex: 1 1 0;
	min-width: 0; /* Prénom + Nom (et les 2 selects) restent sur la même ligne */
}

.asgr-form__group {
	display: flex;
	flex-direction: column;
}

/* Label : texte au-dessus, champ en dessous (gap 10px). Le contrôle CF7 est
   un enfant direct du <label>, on s'appuie donc sur le flux flex-column. */
.asgr-form__label {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base); /* 16px */
	font-weight: 500; /* Cera Pro Medium */
	line-height: 1.3125; /* 21px */
}

/* Le span d'enrobage injecté par CF7 doit se comporter comme un bloc. */
.asgr-form__label .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Champs de saisie (input / select / textarea). */
.asgr-form__input {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); /* 15px 20px */
	border: 1px solid transparent;
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400; /* Cera Pro Regular */
	line-height: 1.3125;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder bleu, comme la valeur saisie dans la maquette. */
.asgr-form__input::placeholder {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

.asgr-form__input:focus,
.asgr-form__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.asgr-form__input--textarea {
	min-height: 138px; /* hauteur de la zone message dans la maquette */
	resize: vertical;
}

/* Select : seul champ avec bords arrondis dans la maquette. On supprime
   aussi l'apparence native pour dessiner le chevron bleu. */
.asgr-form__input--select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color: var(--wp--preset--color--neutral-dark); /* contenu du select en noir */
	border-radius: 15px;
	padding-right: calc(var(--wp--preset--spacing--sm) + 24px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230231A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--sm) center;
	cursor: pointer;
}

/* Rangée du bouton : aligné à droite comme dans la maquette.
   Le spinner CF7 réserve sa place même masqué (visibility:hidden) ; on le
   passe AVANT le bouton via `order` pour que le bouton reste collé au bord
   droit et que le spinner apparaisse à sa gauche pendant l'envoi. */
.asgr-form__row--submit {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.asgr-form__row--submit .asgr-form__submit {
	order: 2;
}

.asgr-form__row--submit .wpcf7-spinner {
	order: 1;
}

.asgr-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px var(--wp--preset--spacing--sm); /* 10px 20px */
	border: 1px solid transparent;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.3125;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.asgr-form__submit:hover,
.asgr-form__submit:focus-visible {
	opacity: 0.9;
}

.asgr-form__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Retours de validation CF7. */
.asgr-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.asgr-form__input.wpcf7-not-valid {
	border-color: var(--wp--preset--color--secondary);
}

.wpcf7-response-output {
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border-radius: 15px;
	font-size: var(--wp--preset--font-size--small);
}

/* Header mobile : filet de séparation en bas (Bleu Light). */
@media (max-width: 768px) {
	header.wp-block-group {
		border-bottom: 1px solid var(--wp--preset--color--primary-light);
	}
}

/* ===========================================================================
   Menu mobile — overlay du bloc core "navigation" (overlayMenu: mobile).
   Figma node 218:4815 : overlay blanc plein écran, logo en haut à gauche,
   croix bleue alignée avec le logo, liens bleus centrés (vertical + horizontal).
   Logo et croix partagent le même bord haut (padding sm) et la même hauteur
   (50px) → leurs centres sont alignés.
   =========================================================================== */

/* Hamburger (état fermé) en bleu. */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Overlay ouvert : fond blanc plein écran, padding aligné sur le header (sm). */
.wp-block-navigation__responsive-container.is-menu-open {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--sm);
}

/* La pile remplit l'écran pour permettre le centrage vertical des liens. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
}

/* Repère pour positionner la croix en absolu. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
}

/* Croix sortie du flux (ne décale pas le centrage) + alignée avec le logo :
   même bord haut (0 = padding sm) et même hauteur (50px). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 0;
	right: 0;
	height: 50px;
	margin: 0;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Zone des liens : flux normal (bloc) ancré en haut, PAS de centrage flex
   (qui distribuait les items → vides irréguliers). Le padding-top dégage la
   liste du logo/croix qui flottent au-dessus (z-index), sans excès. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	padding-top: 115px;
}

/* Liste principale : colonne pleine largeur, un trait au-dessus (sous le logo). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--primary-light);
}

/* Neutralise le `align-items: var(--navigation-layout-justification-setting)` du
   cœur (navigation/style.css) qui, en overlay mobile, rétrécissait les entrées à
   la largeur du texte. Spécificité (0,5,0) pour battre le core (0,4,0). */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
	align-items: stretch;
}

/* Gap du menu mobile : 11px fixe, au lieu du `gap: inherit` (= block-gap 40px)
   imposé par le cœur (navigation/style.css, spécificité 0,4,0). On passe à
   (0,5,0) via le préfixe .wp-block-navigation pour gagner sans !important. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	gap: 11px;
}

/* Chaque entrée de 1er niveau : rangée pleine largeur, centrée, séparée par un
   fin trait (parent + son sous-menu partagent le même bloc bordé). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--primary-light);
}

/* Lien de 1er niveau : compact, CENTRÉ. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item .wp-block-navigation-submenu__toggle {
	justify-content: center;
	text-align: center;
	padding-block: 14px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500; /* Cera Pro Medium */
	font-size: var(--wp--preset--font-size--base); /* 16px */
}

/* --- Sous-menu dans l'overlay mobile ---------------------------------------
   Centré comme le reste, items plus petits et gris, resserrés contre le parent
   (aucun séparateur interne ; le bloc parent les regroupe déjà). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 0 0 8px;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	justify-content: center;
	text-align: center;
	padding-block: 6px;
	font-size: var(--wp--preset--font-size--small); /* 14px, plus petit que le niveau 1 */
	font-weight: 400;
	color: var(--wp--preset--color--neutral-dark);
}

/* Logo SVG embarqué (assets/logo.svg injecté via le filtre get_custom_logo).
   On cible `img.custom-logo` (spécificité 0,2,2) pour battre la règle du bloc
   core `.wp-block-site-logo.is-default-size img { width:120px }` (0,2,1), qui
   sinon l'emporte sur un simple `.wp-block-site-logo img` (0,1,2). */
footer .wp-block-site-logo img.custom-logo {
	width: 120px;
	height: auto;
}

@media (min-width: 782px) {
	header .wp-block-site-logo img.custom-logo {
		width: auto;
		height: 72px; /* desktop : logo carré 72×66 → nettement plus grand que le mobile (50px) */
	}
}

/* Logo : hauteur fixée à 50px en mobile pour aligner son centre sur la croix. */
@media (max-width: 781px) {
	header .wp-block-site-logo {
		width: auto;
		height: 50px;
	}

	header .wp-block-site-logo img.custom-logo {
		width: auto;
		height: 50px;
	}
}

/* Logo conservé en haut à gauche, par-dessus l'overlay quand le menu est ouvert
   (l'overlay core ne l'inclut pas). z-index core de l'overlay = 100000. */
header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-site-logo {
	position: relative;
	z-index: 100001;
}

/* ===========================================================================
   Sous-menu du menu principal (desktop) — carte arrondie, ombre douce, items
   espacés avec un état de survol clair. Scopé desktop (≥ 782px) pour ne pas
   perturber le menu mobile en overlay (où le sous-menu s'empile en ligne).
   =========================================================================== */
@media (min-width: 782px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: 250px;
		padding: 8px;
		margin-top: 12px; /* léger décalage sous l'entrée parente */
		border: 1px solid rgba(2, 49, 168, 0.08);
		border-radius: 0; /* angles droits (pas d'arrondi) */
		background-color: var(--wp--preset--color--background);
		box-shadow: 0 14px 34px rgba(2, 49, 168, 0.14);
	}

	/* « Pont » invisible qui comble le décalage de 12px : sans lui, la souris
	   quitte la zone survolée en traversant l'espace parent → sous-menu, ce qui
	   referme le menu avant de l'atteindre. */
	.wp-block-navigation .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
	}

	/* Chaque lien du sous-menu : pilule au survol, aligné sur la charte. */
	.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		display: block;
		padding: 10px 14px;
		border-radius: 0;
		color: var(--wp--preset--color--primary);
		text-decoration: none;
		line-height: 1.3;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:hover,
	.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--primary-light);
		color: var(--wp--preset--color--primary);
		text-decoration: none;
	}

	/* Petit espace entre deux entrées du sous-menu. */
	.wp-block-navigation
		.wp-block-navigation__submenu-container
		.wp-block-navigation-item
		+ .wp-block-navigation-item {
		margin-top: 2px;
	}
}