/*
Theme Name: GeneratePress pour clairhorizon1.fr (thème enfant)
Description: Thème enfant de GeneratePress pour clairhorizon1.fr
Author: Webnext
Author URI: https://webnext.fr
Template: generatepress
Version: 1.0
*/

/* cf plugins/webnext-plugin/assets/css/custom-webnext.css */

/* ==========================================================================
   Couleurs (extraites du logo wp-content/uploads/2025/08/LOGO.jpg)
   Contrastes WCAG calculés :
     --ch-texte sur --ch-fond        17,40:1   sur --ch-fond-doux 16,16:1
     --ch-texte sur --ch-jaune       11,53:1   (texte des boutons)
     --ch-vert-fonce sur --ch-fond    5,94:1   sur --ch-fond-doux  5,52:1
     --ch-vert-fonce sur --ch-jaune   3,94:1   (contour de focus, élément graphique ≥ 3:1)
   Interdits : --ch-jaune et --ch-vert comme couleur de texte (1,51:1 et 2,22:1 sur blanc) ;
   aucun fond sombre.
   ========================================================================== */
:root {
	--ch-jaune: #FECC39;      /* soleil du logo : fonds de boutons, texte noir dessus */
	--ch-vert: #3CC812;       /* barre du logo : décor uniquement (filets, soulignés de titres) */
	--ch-vert-fonce: #24730D; /* même teinte, assombrie : liens, icônes, focus */
	--ch-texte: #1A1A1A;
	--ch-texte-doux: #575760; /* textes secondaires : 7,15:1 sur blanc */
	--ch-fond: #FFFFFF;
	--ch-fond-doux: #F5F7F4;  /* gris très clair légèrement vert */
	--ch-bordure: #D9DED6;    /* décor, ne porte aucune information */
	--ch-bordure-forte: #848B81; /* contour de composant : 3,51:1 sur blanc (≥ 3:1) */

	/* Variables GeneratePress remappées : tout le thème suit la palette */
	--contrast: var(--ch-texte);
	--base: var(--ch-fond-doux);
	--base-2: var(--ch-fond-doux);
	--base-3: var(--ch-fond);
	--accent: var(--ch-vert-fonce);

	--ch-jaune-survol: #F5BD12; /* survol des boutons, texte noir dessus */
	--ch-largeur: 1280px;
	--ch-rayon: 12px;
	--ch-cible: 44px;           /* taille minimale des cibles tactiles */
}

/* ==========================================================================
   Règles reprises de plugins/webnext-plugin/assets/css/custom-webnext.css
   ========================================================================== */
/*.nav-float-right #site-navigation { margin-left: 0 !important; } /*pas de marge à gauche du menu du haut (par défaut: margin-left: auto)*/

.site-logo img { max-height:180px; height: auto; width: auto; } /*pour pas que le logo prenne trop de place*/
.site-header { padding-bottom:0; }

/* ==========================================================================
   Lisibilité globale — mobile d'abord
   ========================================================================== */

/* Texte : police système, 18 px minimum */
body, button, input, select, textarea {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
}
body { color: var(--ch-texte); }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1875rem; }

.entry-meta, .widget, .sidebar .widget, figcaption, small,
.wp-block-latest-posts__post-date { font-size: 1.125rem; }

/* Largeur : conteneur plus large, colonne de lecture limitée à ~70 caractères */
.grid-container { max-width: var(--ch-largeur); }
.entry-content > :is(p, ul, ol, blockquote, h2, h3, h4),
.entry-summary > p { max-width: 70ch; }

/* Retours à la ligne soignés (ignoré sans dommage par les navigateurs qui ne le gèrent pas) */
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Colonne de lecture centrée : sur les pages de texte, la carte blanche elle-même
   est réduite à la largeur du texte (70 caractères + marges intérieures de 40 px).
   Les pages à cartes (accueil, Infos pratiques) gardent toute la largeur. */
@media (min-width: 769px) {
	.site-main > :not(.page-cartes) {
		max-width: calc(70ch + 80px);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Liens soulignés, épaisseur accrue au survol (pas seulement la couleur) */
a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* Focus clavier : contour vert foncé (5,94:1 sur blanc), décalé hors des boutons */
:focus-visible {
	outline: 3px solid var(--ch-vert-fonce);
	outline-offset: 3px;
}

/* Boutons : fond jaune, texte noir (11,53:1), cibles ≥ 44 px */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
.wp-block-button__link,
a.wp-block-button__link:not(.has-background) {
	min-height: var(--ch-cible);
	padding: 0.625em 1.25em;
	border: 2px solid var(--ch-texte);
	border-radius: var(--ch-rayon);
	background-color: var(--ch-jaune);
	color: var(--ch-texte);
	font-weight: 600;
	text-decoration: none;
}
button:hover, button:focus,
html input[type="button"]:hover, html input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
a.button:hover, a.button:focus,
.wp-block-button__link:hover, .wp-block-button__link:focus,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):active {
	background-color: var(--ch-jaune-survol);
	color: var(--ch-texte);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}

/* WPForms (balisage moderne) : mêmes boutons, champs et libellés à 18 px.
   WPForms déclare ses variables en ligne sur l'ID de chaque bloc (#wpforms-194…) :
   !important est le seul moyen de les surcharger sans toucher au plugin. */
.wpforms-container {
	--wpforms-button-background-color: var(--ch-jaune) !important;
	--wpforms-button-text-color: var(--ch-texte) !important;
	--wpforms-button-border-color: var(--ch-texte) !important;
	--wpforms-button-border-size: 2px !important;
	--wpforms-button-border-style: solid !important;
	--wpforms-button-border-radius: var(--ch-rayon) !important;
	--wpforms-button-size-font-size: 1.125rem !important;
	--wpforms-button-size-height: var(--ch-cible) !important;
	--wpforms-field-size-font-size: 1.125rem !important;
	--wpforms-field-size-line-height: 1.4 !important;
	--wpforms-field-size-input-height: var(--ch-cible) !important;
	--wpforms-field-border-color: var(--ch-bordure-forte) !important;
	--wpforms-label-size-font-size: 1.125rem !important;
	--wpforms-label-size-line-height: 1.4 !important;
	--wpforms-label-size-sublabel-font-size: 1.125rem !important;
	--wpforms-label-size-sublabel-line-height: 1.4 !important;
	--wpforms-label-color: var(--ch-texte) !important;
	--wpforms-label-sublabel-color: var(--ch-texte-doux) !important;
}

/* Champs de formulaire */
input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea {
	min-height: var(--ch-cible);
	border: 1px solid var(--ch-bordure-forte);
	border-radius: 8px;
}
input[type="checkbox"], input[type="radio"] { width: 1.25em; height: 1.25em; }
::placeholder,
.wpforms-container ::placeholder { color: #6B6B6B !important; opacity: 1; } /* 5,33:1 sur blanc */

/* Colonne latérale : liens en cibles de 44 px */
.sidebar .widget_nav_menu li a {
	display: flex;
	align-items: center;
	min-height: var(--ch-cible);
}

/* En-tête et menu principal — mobile (≤ 768 px, point de rupture de GeneratePress) */
@media (max-width: 768px) {
	.inside-header { padding-left: 16px; padding-right: 16px; }
	.separate-containers .inside-article,
	.separate-containers .page-header,
	.separate-containers .comments-area,
	.inside-page-header { padding: 20px 16px; }

	.site-logo img { max-height: 64px; }
	h1 { font-size: 1.75rem; }

	/* Pas de bouton « Menu » : les entrées restent visibles en boutons compacts sur 2 ou 3 lignes */
	#mobile-menu-control-wrapper,
	#site-navigation .menu-toggle { display: none; }
	#site-navigation { flex-basis: 100%; }
	#site-navigation .inside-navigation { padding: 0; }
	#site-navigation .main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 0 12px;
	}
	#site-navigation .main-nav > ul > li { float: none; width: auto; }
	#site-navigation .main-nav > ul > li > a {
		display: flex;
		align-items: center;
		min-height: var(--ch-cible);
		padding: 0 14px;
		line-height: 1.2;
		font-size: 1.125rem;
		border: 1px solid var(--ch-bordure-forte);
		border-radius: var(--ch-rayon);
		background-color: var(--ch-fond-doux);
	}
	/* Page courante : bordure épaisse + gras, pas seulement la couleur */
	#site-navigation .main-nav > ul > li[class*="current-menu-"] > a {
		border: 2px solid var(--ch-vert-fonce);
		font-weight: 700;
	}
}

/* Menu à plat : aucun sous-menu ni flèche, même si un enfant est ajouté par erreur dans l'admin */
.main-navigation ul ul,
.main-navigation .dropdown-menu-toggle { display: none !important; }
.main-navigation .main-nav ul li.menu-item-has-children > a { padding-right: 16px; }

/* Écrans moyens et grands */
@media (min-width: 769px) {
	h1 { font-size: 2.5rem; }
	h2 { font-size: 1.875rem; }
	h3 { font-size: 1.5rem; }

	.main-navigation .main-nav ul li a {
		font-size: 1.1875rem;
		padding-left: 16px;
		padding-right: 16px;
	}
	/* Page courante : soulignement épais + gras */
	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
		font-weight: 700;
		text-decoration: underline;
		text-decoration-thickness: 3px;
		text-underline-offset: 0.35em;
	}
	.main-navigation .main-nav > ul > li > a:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}
}

/* Animations seulement si l'utilisateur ne les a pas réduites */
@media (prefers-reduced-motion: no-preference) {
	button, input[type="submit"], a.button, .wp-block-button__link {
		transition: background-color 0.15s, box-shadow 0.15s;
	}
}

/* ==========================================================================
   Cartes d'action (accueil, page Infos pratiques)
   Toute la carte est cliquable ; l'icône est décorative (aria-hidden).
   ========================================================================== */
.page-cartes .entry-header { margin-bottom: 1.25rem; }
.page-cartes .entry-content + .page-cartes__cartes { margin-top: 1.5rem; }
/* Titre et texte centrés au-dessus et sous les cartes (textes courts : accueil, introduction) */
.page-cartes .entry-header,
.page-cartes .entry-content { text-align: center; }
.page-cartes .entry-content > * { margin-left: auto; margin-right: auto; }

.cartes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonnes dès le mobile : les 4 cartes tiennent dans le premier écran */
	gap: 12px;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.cartes li { margin: 0; }

.carte {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 100%;
	min-height: 112px;
	padding: 0.75rem;
	border: 1px solid var(--ch-bordure);
	border-top: 4px solid var(--ch-vert); /* filet décoratif */
	border-radius: 16px;
	background-color: var(--ch-fond);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.06);
	color: var(--ch-texte);
	text-align: center;
	text-decoration: none;
}
.carte__icone { width: 40px; height: 40px; color: var(--ch-vert-fonce); flex-shrink: 0; }
.carte__libelle { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.carte__description { font-size: 1.125rem; color: var(--ch-texte-doux); line-height: 1.4; }

/* Survol et focus : ombre plus marquée + libellé souligné (pas seulement la couleur) */
.carte:hover, .carte:focus-visible {
	color: var(--ch-texte);
	border-color: var(--ch-bordure-forte);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.12), 0 8px 24px rgb(0 0 0 / 0.10);
}
.carte:hover .carte__libelle, .carte:focus-visible .carte__libelle {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

@media (max-width: 339px) {
	.cartes { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
	.cartes { gap: 20px; }
	.carte { min-height: 168px; padding: 1.5rem 1rem; }
	.carte__icone { width: 48px; height: 48px; }
	.carte__libelle { font-size: 1.25rem; }
}
@media (min-width: 1025px) {
	/* Colonnes d’au moins 220 px, colonnes vides supprimées : 3 ou 4 cartes occupent toute la largeur */
	.cartes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
	.carte { transition: box-shadow 0.15s, transform 0.15s; }
	.carte:hover { transform: translateY(-2px); }
}