/*
Theme Name: Humoe
Theme URI: https://wordpress.humoe.fr/
Author:
Author URI:
Description: Thème WordPress bloc (FSE), léger et personnalisable, inspiré du site wordpress.humoe.fr. Architecture pensée sur le modèle d'Astra : rapide, minimal, entièrement personnalisable via le Site Editor.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: humoe
*/

/* Les sections pleine largeur sont imbriquées dans deux conteneurs "contraints"
   (le gabarit de page puis le contenu de la page), ce qui neutralise le mécanisme
   natif de WordPress censé les faire dépasser jusqu'aux bords de l'écran.
   On force le débordement réel, quel que soit le niveau d'imbrication. */
.wp-block-post-content .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Sur l'accueil, le Hero doit toucher directement l'en-tête, sans l'écart
   automatique que WordPress met entre les blocs. Le titre de page est présent
   mais invisible (accessibilité) : il compte comme premier enfant et récupère
   la marge nulle, décalant l'espacement normal sur le contenu réel qui suit. */
body.home main,
body.home .wp-block-post-content {
	margin-top: 0;
}

/* Même écart entre l'en-tête et le bandeau vert sur les pages de service. */
body.page-template-page-service .wp-site-blocks > header + .alignfull {
	margin-top: 0;
}

/* En-tête fixé en haut de l'écran pendant le défilement, sur toutes les pages. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* WordPress core donne par défaut une forme ronde aux icônes de réseaux sociaux : on l'annule */
.wp-block-social-links .wp-social-link,
.wp-block-social-links .wp-social-link a {
	border-radius: 0;
}

.screen-reader-text,
.wp-block-post-title.is-style-visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #213b2c;
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Styles de bouton additionnels, sélectionnables depuis le panneau "Styles" du bloc Bouton */

/* "Contour" : style natif is-style-outline, recoloré à la charte */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* "Discret" : texte souligné, sans fond ni bordure — pour un appel à l'action secondaire */
.wp-block-button.is-style-humoe-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
}
.wp-block-button.is-style-humoe-ghost .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary);
}

/* "Clair" : bouton blanc à utiliser sur les fonds colorés (hero, bandeaux, pied de page) */
.wp-block-button.is-style-humoe-light .wp-block-button__link {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-humoe-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

/* Vignettes carrées (galerie photo) et portrait rond — taille et recadrage fixes */
.humoe-thumb-square img,
.humoe-thumb-portrait img {
	display: block;
	width: 260px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
}
.humoe-thumb-portrait {
	margin-left: auto;
	margin-right: auto;
}

/* Typographie : optique des titres + retour à la ligne équilibré */
h1, h2, h3, h4, h5, h6 {
	font-optical-sizing: auto;
	text-wrap: balance;
}

/* Micro-interaction : léger soulèvement au survol sur tous les boutons */
.wp-block-button__link {
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 24px -14px rgba(33, 59, 44, 0.45);
}
.wp-block-button__link:focus-visible,
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

/* Cartes interactives : élévation au survol au lieu d'un bloc figé */
.humoe-card {
	border: 1px solid var(--wp--preset--color--background-secondary);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.humoe-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 38px -22px rgba(33, 59, 44, 0.45);
	border-color: var(--wp--preset--color--primary);
}
.humoe-card-icon {
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.25rem;
}

/* Plaque partenaire : bordure fine et statique, sans interaction */
.humoe-chip {
	border: 1px solid var(--wp--preset--color--background-secondary);
	padding: 1rem 1.25rem;
}

/* Barre de statistiques : séparateurs verticaux entre les chiffres */
.humoe-stat {
	padding-left: 1rem;
	padding-right: 1rem;
}
.humoe-stat + .humoe-stat {
	border-left: 1px solid var(--wp--preset--color--background-secondary);
}
@media (max-width: 781px) {
	.humoe-stat {
		padding-left: 0;
		padding-right: 0;
	}
	.humoe-stat + .humoe-stat {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--background-secondary);
		padding-top: 1.5rem;
		margin-top: 1.5rem;
	}
}

/* Palier tablette : 2 colonnes au lieu de tout empiler d'un coup */
@media (min-width: 600px) and (max-width: 781px) {
	.humoe-cards-grid {
		flex-wrap: wrap;
	}
	.wp-block-columns.humoe-cards-grid > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
		box-sizing: border-box;
	}
}

/* Lien de carte : trait qui se dessine au survol plutôt qu'un simple changement de couleur */
.humoe-card-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	text-decoration: none !important;
}
.humoe-card-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--secondary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.humoe-card-link:hover::after {
	transform: scaleX(1);
}
.humoe-card-link .arrow {
	transition: transform 0.25s ease;
}
.humoe-card-link:hover .arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.humoe-card,
	.humoe-card-link::after,
	.humoe-card-link .arrow {
		transition: none;
	}
}