/*
Theme Name: Anouanzé 2026
Theme URI: https://www.anouanze.ca
Author: Association Anouanzé
Description: Thème par blocs pour l'association ivoirienne Anouanzé. Sans dépendance à un plugin ni à une ressource externe.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anouanze-2026
*/

/* ---------- Base (mobile d'abord) ---------- */
:root {
	--anz-radius: 6px;
	--anz-shadow: 0 2px 10px rgba(11, 31, 92, 0.1);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Pas d'espace blanc entre en-tête, contenu et pied de page */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

img {
	height: auto;
	max-width: 100%;
}

/* Focus clavier visible partout (AA) */
:where(a, button, .wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

.hero :focus-visible,
.site-footer :focus-visible,
.don-band :focus-visible,
.wp-block-navigation__responsive-container.is-menu-open :focus-visible {
	outline-color: #fff;
}

/* ---------- Bandeau jaune de coordonnées ---------- */
.topbar {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	padding: 0.5rem var(--wp--style--root--padding-right, 1rem);
}

.topbar p {
	margin: 0;
}

.topbar a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: underline;
}

.topbar__inner {
	gap: 0.25rem 1.5rem;
}

/* ---------- En-tête ---------- */
.site-header {
	background: #fff;
	border-bottom: 1px solid #e3e6f0;
}

.site-header__row {
	align-items: center;
	gap: 0.75rem 1.5rem;
	padding-block: 0.75rem;
}

.site-header .wp-block-image {
	margin: 0;
}

.site-header .wp-block-image img {
	display: block;
}

.main-nav {
	font-weight: 600;
}

.main-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	padding: 0.5rem 0.25rem;
	text-decoration: none;
}

.main-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.header-cta {
	margin: 0;
}

/* Bouton hamburger : zone cliquable de 44 px */
.main-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	color: var(--wp--preset--color--navy);
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.main-nav .wp-block-navigation__responsive-container-open svg {
	height: 28px;
	width: 28px;
}

/* Panneau du menu mobile : bleu marine, liens blancs alignés à gauche */
.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy);
	color: #fff;
	padding: 1rem 1.5rem 2rem;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1rem;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 1.25rem;
	min-height: 48px;
	padding: 0.5rem 0;
	text-align: left;
	width: 100%;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--yellow);
}

/* Bouton de fermeture bien visible (44 px, blanc sur marine) */
.wp-block-navigation.main-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	color: #fff;
	display: flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.main-nav .wp-block-navigation__responsive-container-close svg {
	height: 30px;
	width: 30px;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open :focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------- Hero : fondu enchaîné en CSS pur ---------- */
.hero {
	background: var(--wp--preset--color--navy);
	color: #fff;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.hero__slides {
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* Voile bleu marine : garde le texte blanc lisible (contraste AA) */
.hero__slides::after {
	background: rgba(11, 31, 92, 0.82);
	content: "";
	inset: 0;
	position: absolute;
}

.hero__slide {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.hero__slide--2 {
	animation: anz-crossfade 16s ease-in-out infinite;
	opacity: 0;
}

@keyframes anz-crossfade {
	0%,
	38% {
		opacity: 0;
	}
	50%,
	88% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Pause au survol et au focus clavier */
.hero:hover .hero__slide--2,
.hero:focus-within .hero__slide--2 {
	animation-play-state: paused;
}

/* Animation figée sur la première image */
@media (prefers-reduced-motion: reduce) {
	.hero__slide--2 {
		animation: none;
		opacity: 0;
	}
}

.hero__content {
	padding-block: 4rem;
}

/* Contenu du hero et du bandeau de page aligné sur la colonne de contenu (la mise en page "constrained" centre sinon) */
.hero__content > *,
.page-banner > * {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

.hero__eyebrow {
	color: var(--wp--preset--color--yellow);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
}

.hero h1 {
	color: #fff;
	margin: 0 0 1.5rem;
	max-width: 22ch;
}

.hero .wp-block-buttons {
	gap: 0.75rem;
}

.hero .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
}

.hero .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--navy);
}

/* ---------- Bandeau des pages intérieures ---------- */
.page-banner {
	background: var(--wp--preset--color--navy);
	color: #fff;
	padding-block: 2.5rem 3rem;
}

.page-banner h1 {
	color: #fff;
	margin: 0 0 0.75rem;
}

.page-banner__subtitle {
	color: var(--wp--preset--color--yellow);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

/* ---------- Galeries et détails ---------- */
/* Aucune photo n'est affichée au-delà de sa largeur native. */
.photo-feature {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
}

.photo-feature figure {
	margin: 0;
}

.photo-feature img {
	aspect-ratio: 4 / 3;
	border-radius: var(--anz-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Vignettes de 300 px : taille native maximale, centrées */
.photo-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.photo-feature + .photo-row {
	margin-top: 0.75rem;
}

.photo-row figure {
	flex: 0 1 calc(50% - 0.375rem);
	margin: 0;
	max-width: 300px;
}

.photo-row img {
	border-radius: var(--anz-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.photo-row--four img {
	aspect-ratio: 4 / 3;
}

.photo-row--three img {
	aspect-ratio: 3 / 2;
}

/* Photo du fondateur (397 px natifs) */
.founder-photo img {
	margin-inline: auto;
	max-width: 397px;
}

.wp-block-details {
	background: #fff;
	border: 1px solid #d9dcea;
	border-radius: var(--anz-radius);
	margin-bottom: 0.75rem;
	padding: 0 1.25rem;
}

.wp-block-details summary {
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	font-weight: 700;
	min-height: 44px;
	padding: 0.75rem 0;
}

.wp-block-details[open] {
	padding-bottom: 0.75rem;
}

.archive-photo img {
	border-radius: var(--anz-radius);
	display: block;
	height: auto;
	max-width: 300px;
	width: 100%;
}

/* ---------- Équipe, contact, don ---------- */
/* Grille des fiches : 1 colonne (téléphone), 2 (tablette), 4 (ordinateur) */
.team-grid {
	display: grid;
	gap: 2rem 1.5rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}

.team-grid > * {
	margin: 0 !important;
}

.team-card {
	text-align: center;
}

.team-card .wp-block-image {
	margin: 0;
}

/* Photos carrées de 400 px : jamais agrandies au-delà de leur taille native */
.team-card img {
	aspect-ratio: 1 / 1;
	border-radius: var(--anz-radius);
	box-shadow: var(--anz-shadow);
	display: block;
	height: auto;
	margin-inline: auto;
	max-width: 400px;
	object-fit: cover;
	width: 100%;
}

.team-card h3 {
	font-size: 1.25rem;
	margin: 1rem 0 0.25rem;
	overflow-wrap: anywhere;
}

.team-card__role {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	margin: 0;
}

.contact-card a {
	overflow-wrap: anywhere;
}

/* ---------- Formulaire de contact ---------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.contact-form {
	margin-top: 1.5rem;
	max-width: 720px;
}

.contact-form form {
	display: grid;
	gap: 1.25rem;
	position: relative;
}

.anz-hint {
	margin: 0;
}

.anz-field label {
	color: var(--wp--preset--color--navy);
	display: block;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.anz-field input[type="text"],
.anz-field input[type="email"],
.anz-field textarea {
	background: #fff;
	border: 2px solid #5a6078;
	border-radius: var(--anz-radius);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font: inherit;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	width: 100%;
}

.anz-field textarea {
	min-height: 10rem;
	resize: vertical;
}

.anz-field input:focus-visible,
.anz-field textarea:focus-visible {
	border-color: var(--wp--preset--color--navy);
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.anz-field--error input[type="text"],
.anz-field--error input[type="email"],
.anz-field--error textarea {
	border-color: #b81f07;
}

.anz-error {
	color: #b81f07;
	font-weight: 600;
	margin: 0.4rem 0 0;
}

.anz-field--check {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
}

.anz-field--check input {
	accent-color: var(--wp--preset--color--navy);
	flex: 0 0 auto;
	height: 1.5rem;
	margin: 0.15rem 0 0;
	width: 1.5rem;
}

.anz-field--check label {
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	margin: 0;
}

.anz-hp {
	height: 1px;
	left: -10000px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.anz-submit {
	border: 0;
	cursor: pointer;
	min-height: 48px;
}

.form-notice {
	border-left: 6px solid;
	border-radius: var(--anz-radius);
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
}

.form-notice p {
	margin: 0;
}

.form-notice ul {
	margin: 0.5rem 0 0 1.25rem;
	padding: 0;
}

.form-notice a {
	color: inherit;
	text-decoration: underline;
}

.form-notice:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.form-notice--error {
	background: #fdecea;
	border-color: #b81f07;
	color: #5c0f03;
}

.form-notice--success {
	background: #e6f4ea;
	border-color: #1e7b34;
	color: #0b3d1a;
}

.form-notice--success p + p {
	margin-top: 0.5rem;
}

.contact-alt {
	margin-top: 2rem;
}

/* ---------- Sections ---------- */
.section {
	padding-block: 3rem;
}

.section--light {
	background: var(--wp--preset--color--light);
}

.section h2 {
	margin-top: 0;
}

.president__photo img,
.mission__photo img {
	border-radius: var(--anz-radius);
	box-shadow: var(--anz-shadow);
	display: block;
	width: 100%;
}

.president__name {
	color: var(--wp--preset--color--red);
	font-weight: 700;
	margin-bottom: 0;
	text-transform: uppercase;
}

.activities {
	margin-top: 3rem;
}

.activities__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.activities__list li {
	background: var(--wp--preset--color--light);
	border-left: 4px solid var(--wp--preset--color--yellow);
	border-radius: 0 var(--anz-radius) var(--anz-radius) 0;
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
}

.card {
	background: #fff;
	border-radius: var(--anz-radius);
	border-top: 4px solid var(--wp--preset--color--yellow);
	box-shadow: var(--anz-shadow);
	height: 100%;
	padding: 1.5rem;
}

.card h3 {
	color: var(--wp--preset--color--navy);
	margin-top: 0;
}

.card p:last-child {
	margin-bottom: 0;
}

/* ---------- Bande rouge de dons ---------- */
.don-band {
	background: var(--wp--preset--color--red);
	color: #fff;
	padding-block: 2.5rem;
}

.don-band__inner {
	align-items: center;
	gap: 1.25rem 2rem;
}

.don-band h2 {
	color: #fff;
	margin: 0;
}

.don-band .wp-block-button__link {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
}

.don-band .wp-block-button__link:hover {
	background: #fff;
}

/* ---------- Pied de page ---------- */
.site-footer {
	background: var(--wp--preset--color--navy);
	color: #fff;
	padding-block: 3rem 2rem;
}

.site-footer a {
	color: #fff;
	text-underline-offset: 3px;
}

.site-footer a:hover {
	color: var(--wp--preset--color--yellow);
}

.footer__title {
	color: var(--wp--preset--color--yellow);
	font-size: 1.125rem;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin-bottom: 0.4rem;
}

.copyright-bar {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	text-align: center;
}

.copyright-bar p {
	margin: 0;
}

/* ---------- Écrans larges ---------- */
@media (min-width: 782px) {
	.section {
		padding-block: 4.5rem;
	}

	.page-banner {
		padding-block: 4rem 4.5rem;
	}

	.photo-feature {
		grid-template-columns: repeat(2, 1fr);
	}

	.photo-row--four figure {
		flex-basis: calc(25% - 0.5625rem);
	}

	.photo-row--three figure {
		flex-basis: 300px;
	}

	.hero__content {
		padding-block: 7rem;
	}

	.site-header__row {
		flex-wrap: nowrap;
	}
}

/* Grille des fiches de l'équipe : tablette puis ordinateur */
@media (min-width: 600px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.team-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}