/* Charte graphique ACE — validée par le client à partir des maquettes de référence
   (vert + or). Source unique des couleurs et polices du site.
   Toujours référencer ces variables, jamais les valeurs en dur dans les blocs. */

:root {
	/* Couleurs de la charte */
	--ace-vert: #0A5B3D;        /* Vert institutionnel — couleur principale */
	--ace-vert-fonce: #063D28;  /* Vert foncé — aplats, bannières, pied de page */
	--ace-or: #EB9C24;          /* Or — accent, boutons, couleur du logo */
	--ace-anthracite: #1E293B;  /* Anthracite — texte */
	--ace-gris-clair: #F5F7F9;  /* Gris clair — fonds */
	--ace-blanc: #FFFFFF;

	/* Déclinaisons dérivées (survols) — pas de nouvelles teintes */
	--ace-vert-survol: #084A31;
	--ace-or-survol: #CE861A;

	/* Couleur de texte à poser SUR l'or (l'or ne passe pas en texte
	   sur blanc — WCAG AA : ~2.4:1). Anthracite sur or ≈ 6,8:1. */
	--ace-texte-sur-or: var(--ace-anthracite);

	/* Voile appliqué sur les images de bandeau */
	--ace-voile-banniere: rgba(6, 61, 40, 0.80);

	/* Typographie */
	--ace-font-titres: "Playfair Display", Georgia, "Times New Roman", serif;
	--ace-font-corps: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Rythme des animations légères (voir assets/js/ace-site.js) */
	--ace-transition: 220ms ease;
}

/* Raccordement à la palette globale Kadence pour que l'éditeur
   et le thème parent utilisent la charte (Kadence écrase le theme.json enfant :
   voir les slugs theme-palette1..9 utilisés dans le balisage de blocs). */
:root {
	--global-palette1: var(--ace-vert);
	--global-palette2: var(--ace-vert-fonce);
	--global-palette3: var(--ace-or);
	--global-palette4: var(--ace-anthracite);
	--global-palette5: #334155;
	--global-palette6: #64748B;
	--global-palette7: var(--ace-gris-clair);
	--global-palette8: #E7ECEF;
	--global-palette9: var(--ace-blanc);
}

/* Garde-fou contraste : un bouton au fond or doit porter du texte foncé,
   jamais du blanc (blanc sur or ≈ 2,4:1, échec AA ; anthracite ≈ 6,8:1). */
.wp-block-button__link.has-theme-palette-3-background-color,
.ace-bouton--or .wp-block-button__link {
	color: var(--ace-texte-sur-or) !important;
}

/* Polices de la charte — imposées au-dessus des réglages Kadence
   (Kadence est laissé sur police système, les fichiers sont hébergés localement). */
:root {
	--global-body-font-family: var(--ace-font-corps);
	--global-heading-font-family: var(--ace-font-titres);
	--global-primary-nav-font-family: var(--ace-font-corps);
}

body,
.content-bg,
.entry-content,
p, li, a, button, input, select, textarea {
	font-family: var(--ace-font-corps) !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-hero h1,
.wp-block-heading {
	font-family: var(--ace-font-titres) !important;
}

body {
	color: var(--ace-anthracite);
}

/* Pages ACE : sections pleine largeur qui s'enchaînent sans gouttière,
   contenu posé sur fond blanc. */
.entry-content > .wp-block-group.alignfull {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.content-bg.single-entry,
.entry-content-wrap,
body.page {
	background: var(--ace-blanc);
}

/* =========================================================================
   Emplacements visuels — image en fond, sans placeholder vide.
   Le fichier est attendu à /visuels-ace/<nom>.jpg ; tant qu'il n'existe pas,
   le fond de repli (couleur) s'affiche seul : jamais de zone blanche/vide.
   aria-label porte le texte alternatif (l'image est posée en fond CSS). ========================================================================= */
.ace-visual {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.ace-visual--fonce  { background-color: var(--ace-vert-fonce); }
.ace-visual--clair  { background-color: var(--ace-gris-clair); }

/* -------------------------------------------------------------------------
   Bandeaux (bannière d'accueil + bandeaux de page)
   ------------------------------------------------------------------------- */
.ace-banniere {
	position: relative;
	color: var(--ace-blanc);
	padding: 4rem 1.5rem;
	overflow: hidden;
}
.ace-banniere--hero { padding: 6rem 1.5rem; }
.ace-banniere::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ace-voile-banniere);
	z-index: 0;
}
.ace-banniere--uni::before { background: var(--ace-vert-fonce); }
.ace-banniere > * { position: relative; z-index: 1; }
.ace-banniere__contenu {
	max-width: 840px;
	margin: 0 auto;
}
.ace-surtitre {
	display: inline-block;
	color: var(--ace-or);
	font-family: var(--ace-font-corps);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.ace-banniere h1 {
	margin: 0 0 0.75rem;
	color: var(--ace-blanc);
}
.ace-banniere__soustitre {
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: 640px;
}
.ace-fil-ariane {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
}
.ace-fil-ariane a {
	color: var(--ace-blanc);
	opacity: 0.85;
	text-decoration: none;
}
.ace-fil-ariane a:hover { opacity: 1; text-decoration: underline; }
.ace-fil-ariane .sep { margin: 0 0.4em; color: var(--ace-or); }
.ace-fil-ariane .courant { color: var(--ace-or); }

/* -------------------------------------------------------------------------
   Icônes en trait fin (sprite locale assets/icons/ace-icons.svg)
   ------------------------------------------------------------------------- */
.ace-icone {
	width: 1.5rem;
	height: 1.5rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ace-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--ace-gris-clair);
	color: var(--ace-vert);
	margin-bottom: 1rem;
	flex-shrink: 0;
}
.ace-pastille--or { background: #FBEBCB; color: #8A5A0F; }
.ace-pastille .ace-icone { width: 1.5rem; height: 1.5rem; }

/* -------------------------------------------------------------------------
   Cartes de domaines — icône, titre, description, flèche
   ------------------------------------------------------------------------- */
@media (min-width: 560px) {
	.ace-carte-row.wp-block-columns {
		flex-wrap: wrap;
		gap: 1.25rem;
	}
	.ace-carte-row.wp-block-columns > .wp-block-column {
		flex-basis: calc(33.333% - 0.834rem);
		flex-grow: 0;
	}
}
@media (min-width: 560px) and (max-width: 900px) {
	.ace-carte-row.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 0.625rem);
	}
}

.ace-carte {
	position: relative;
	height: 100%;
	border: 1px solid #E7ECEF;
	border-radius: 10px;
	padding: 1.75rem 1.5rem 2.5rem;
	background: var(--ace-blanc);
	box-shadow: 0 1px 3px rgba(6, 61, 40, 0.06);
	transition: transform var(--ace-transition), box-shadow var(--ace-transition);
}
.ace-carte h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1rem; }
.ace-carte h3 a { color: var(--ace-vert); text-decoration: none; }
.ace-carte h3 a::after { content: ""; position: absolute; inset: 0; } /* toute la carte cliquable */
.ace-carte h3 a:hover { text-decoration: underline; }
.ace-carte p { margin: 0; font-size: 0.95rem; }
.ace-carte__fleche {
	position: absolute;
	right: 1.4rem;
	bottom: 1.3rem;
	width: 1.15rem;
	height: 1.15rem;
	stroke: var(--ace-vert);
	fill: none;
	stroke-width: 1.6;
	transition: transform var(--ace-transition);
}
.ace-carte:hover,
.ace-carte:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(6, 61, 40, 0.12);
}
.ace-carte:hover .ace-carte__fleche { transform: translateX(3px); }
.ace-carte--muette {
	background: var(--ace-gris-clair);
	border-style: dashed;
	box-shadow: none;
}
.ace-carte--muette:hover { transform: none; box-shadow: none; }
.ace-carte--muette h3 { color: var(--ace-anthracite); }
.ace-carte--muette .ace-pastille { background: #E7ECEF; color: #64748B; }

/* Carte avec vignette photo : image en tête (bord à bord), pastille en médaillon superposé */
.ace-carte--photo { padding-top: 0; }
.ace-carte-vignette {
	margin: 0 -1.5rem 0.75rem;
	height: 140px;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
}
.ace-carte-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ace-carte--photo .ace-pastille {
	margin-top: -1.75rem;
	position: relative;
	z-index: 1;
	border: 3px solid var(--ace-blanc);
}

/* -------------------------------------------------------------------------
   Mission / Vision / Valeurs — 3 colonnes avec icône
   ------------------------------------------------------------------------- */
.ace-mvv .wp-block-column {
	text-align: left;
}
.ace-mvv h3 {
	margin: 0 0 0.5rem;
	color: var(--ace-vert);
}

/* Mot du fondateur — trame à valider */
.ace-mot-fondateur {
	border-left: 4px solid var(--ace-or);
}

/* -------------------------------------------------------------------------
   Portrait / visuel encadré (À propos, etc.)
   ------------------------------------------------------------------------- */
.ace-portrait {
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	max-width: 320px;
	margin: 0 auto;
	box-shadow: 0 8px 24px rgba(6, 61, 40, 0.15);
}
/* Portrait avec photo réelle : conserve le format d'origine de l'image
   (buste large) plutôt que de forcer un cadrage 4:5 qui la recadrerait mal. */
.ace-portrait.ace-portrait--photo {
	aspect-ratio: auto;
	max-width: 420px;
	overflow: hidden;
}
.ace-portrait--photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}
.ace-carte-plan {
	aspect-ratio: 16 / 8;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(6, 61, 40, 0.10);
}

/* -------------------------------------------------------------------------
   En-tête compact au défilement (voir assets/js/ace-site.js)
   ------------------------------------------------------------------------- */
#masthead { transition: padding var(--ace-transition), box-shadow var(--ace-transition); }
#masthead.ace-compact { box-shadow: 0 2px 10px rgba(6, 61, 40, 0.10); }
#masthead.ace-compact .site-header-row,
#masthead.ace-compact .site-header-inner-wrap {
	padding-top: 0.4rem !important;
	padding-bottom: 0.4rem !important;
}
#masthead.ace-compact .custom-logo { max-height: 42px !important; width: auto; }

/* -------------------------------------------------------------------------
   Apparition en fondu au défilement
   ------------------------------------------------------------------------- */
.ace-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 560ms ease, transform 560ms ease;
}
.ace-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
   Boutons — micro-interaction au survol
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: transform var(--ace-transition), box-shadow var(--ace-transition), filter var(--ace-transition);
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
}

/* -------------------------------------------------------------------------
   Menu mobile — panneau latéral animé natif de Kadence (#mobile-drawer),
   repris aux couleurs de la charte.
   ------------------------------------------------------------------------- */
.popup-drawer.popup-drawer-layout-sidepanel,
.popup-drawer.popup-drawer-layout-sidepanel .drawer-inner {
	background: var(--ace-vert-fonce) !important;
}
.popup-drawer.popup-drawer-layout-sidepanel .drawer-nav-drop-wrap a,
.popup-drawer.popup-drawer-layout-sidepanel .menu-close-container button {
	color: var(--ace-blanc) !important;
}
.popup-drawer.popup-drawer-layout-sidepanel a:hover { color: var(--ace-or) !important; }

/* -------------------------------------------------------------------------
   Pied de page — 4 colonnes sur fond vert foncé
   ------------------------------------------------------------------------- */
.site-footer,
.footer-widget-area,
.footer-navigation,
.footer-top {
	background-color: var(--ace-vert-fonce) !important;
	color: var(--ace-blanc);
}
.site-footer a { color: var(--ace-blanc); }
.site-footer .widget-title {
	font-family: var(--ace-font-titres);
	color: var(--ace-or);
	font-size: 1.05rem;
	margin-bottom: 0.75rem;
}
.site-footer .widget { font-size: 0.92rem; line-height: 1.6; }

/* -------------------------------------------------------------------------
   Accessibilité — respecter la préférence de réduction de mouvement
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ace-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ace-carte, .ace-carte__fleche, .wp-block-button__link, #masthead {
		transition: none !important;
	}
	.ace-carte:hover, .wp-block-button__link:hover { transform: none !important; }
}