/*
Theme Name: Chapatounes
Theme URI: https://www.chapatounes.fr
Description: Thème enfant de Twenty Twenty-Four pour l'association Chapatounes, protection des chats à Miélan (Gers). Reprend l'identité visuelle du site d'origine.
Author: Chapatounes
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chapatounes
*/

/* ==========================================================================
   Variables
   Reprises du site d'origine et alignées sur la palette de theme.json.
   ========================================================================== */

:root {
	--violet-chapatounes: #500095;
	--violet-fonce: #3d0070;
	--gris-fonce: #1F2937;
	--gris-clair: #F3F4F6;
	--blanc: #FFFFFF;
	--bordure: #E5E7EB;
	--largeur-contenu: 1100px;
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   Boutons d'appel à l'action
   ========================================================================== */

.cta-button {
	background-color: var(--violet-chapatounes);
	color: var(--blanc);
	border: 2px solid var(--violet-chapatounes);
	padding: 12px 32px;
	font-size: 1.1em;
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none;
	display: inline-block;
	transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.cta-button:hover {
	background-color: var(--violet-fonce);
	border-color: var(--violet-fonce);
	color: var(--blanc);
	transform: scale(1.05);
}

/* Variante contour, utilisée sous les grilles de la page d'accueil */
.cta-button--contour {
	background-color: transparent;
	color: var(--violet-chapatounes);
}

.cta-button--contour:hover {
	background-color: var(--violet-chapatounes);
	color: var(--blanc);
}

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */

/* L'en-tête est encapsulé par WordPress dans un conteneur de gabarit de
   même hauteur que lui. Un élément « sticky » ne pouvant pas dépasser
   les limites de son parent, c'est ce conteneur qui doit porter le
   collage, pas l'en-tête lui-même. */
.entete-collante {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Connecté, la barre d'administration recouvrirait l'en-tête collé.
   Elle n'est fixe qu'au-delà de 782 px ; en dessous elle défile. */
@media screen and (min-width: 783px) {
	.admin-bar .entete-collante {
		top: 32px;
	}
}

.site-header {
	background-color: var(--blanc);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Le sélecteur vise le seul conteneur extérieur : écrit « .site-header nav »,
   il s'appliquait aussi au bloc Navigation (lui-même un <nav>), qui héritait
   d'une marge automatique et d'un retrait décalant le menu vers la gauche. */
.site-header > nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--largeur-contenu);
	margin: 0 auto;
	padding: 0 20px;
	min-height: 70px;
}

.logo {
	display: flex;
	align-items: center;
	font-size: 1.5em;
	color: var(--gris-fonce);
	font-weight: 400;
	text-decoration: none;
}

.logo img {
	height: 40px;
	width: auto;
	margin-right: 10px;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 5px;
	margin: 0;
	padding: 0;
}

.nav-links a {
	color: var(--gris-fonce);
	text-decoration: none;
	font-weight: 600;
	padding: 15px;
	display: inline-block;
	transition: color 0.3s;
}

.nav-links a:hover {
	color: var(--violet-chapatounes);
}

.nav-links .cta-button {
	color: var(--blanc);
	border-radius: 50px;
	padding: 10px 20px;
	font-size: 1em;
}

/* ---- Bloc Navigation natif de WordPress ----
   L'association gère les entrées de menu depuis l'éditeur ; ces règles
   reprennent l'apparence du menu d'origine sur le balisage généré. */

.site-header .wp-block-navigation {
	font-weight: 600;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--gris-fonce);
	text-decoration: none;
	padding: 15px;
	transition: color 0.3s;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--violet-chapatounes);
}

/* Le dernier élément du menu sert de bouton « Faire un don » */
.site-header .wp-block-navigation .wp-block-navigation-item.menu-don .wp-block-navigation-item__content {
	background-color: var(--violet-chapatounes);
	color: var(--blanc);
	border-radius: 50px;
	padding: 10px 20px;
	transition: background-color 0.3s, transform 0.3s;
}

.site-header .wp-block-navigation .wp-block-navigation-item.menu-don .wp-block-navigation-item__content:hover {
	background-color: var(--violet-fonce);
	transform: scale(1.05);
}

/* Bouton d'ouverture du menu mobile */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--gris-fonce);
}

/* Panneau du menu mobile */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--blanc);
	padding: 2rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--gris-fonce);
	font-size: 1.2em;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .menu-don .wp-block-navigation-item__content {
	color: var(--blanc);
}

.site-header .wp-block-site-title a {
	color: var(--gris-fonce);
	text-decoration: none;
	font-size: 1.5em;
	font-weight: 400;
}

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

/* ---- Bouton « Faire un don » de l'en-tête ----
   Tant que le menu est replié derrière le bouton à trois traits, son entrée
   « Faire un don » reste invisible avant ouverture du menu, alors que trois
   visites sur quatre se font sur téléphone. Ce bouton prend le relais à côté
   du menu replié, et disparaît quand le menu complet s'affiche. */

.entete-actions {
	gap: 12px;
}

.site-header .bouton-don-entete .wp-block-button__link {
	padding: 10px 14px;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* WordPress ne replie le menu que sous 600 px. Jusqu'à 1023 px, les cinq
   entrées ne tiennent pourtant pas à côté du logo : elles passaient sur deux
   lignes et « Faire un don » sortait de l'écran. Le menu reste donc replié
   jusqu'à 1023 px, avec le bouton ci-dessus. */
@media screen and (min-width: 600px) and (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.site-header .bouton-don-entete {
		display: none;
	}
}

/* Téléphones : logo, nom du site, bouton et menu doivent tenir sur une
   ligne dès 360 px. Le nom rétrécit, puis s'efface sous 360 px ; le logo,
   qui porte un texte alternatif, mène toujours à l'accueil. */
@media screen and (max-width: 479px) {
	.site-header > nav {
		padding: 0 16px;
		gap: 12px;
	}

	.site-header .logo {
		gap: 0;
	}

	.site-header .logo img {
		margin-right: 8px;
	}

	.site-header .wp-block-site-title a {
		font-size: clamp(1rem, 4.4vw, 1.35rem);
	}

	.entete-actions {
		gap: 8px;
	}
}

@media screen and (max-width: 359px) {
	.site-header .wp-block-site-title {
		display: none;
	}
}

/* Menu hamburger (gabarits n'utilisant pas le bloc Navigation) */
.burger {
	display: none;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 5px;
}

.burger span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: var(--gris-fonce);
	margin: 5px;
	transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
	.nav-links {
		position: fixed;
		right: 0;
		top: 0;
		height: 100vh;
		width: 60%;
		background-color: var(--blanc);
		z-index: 1000;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transform: translateX(100%);
		transition: transform 0.5s ease-in;
		padding: 0 0 5rem;
		margin: 0;
	}

	.nav-links li {
		opacity: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem 0;
	}

	.nav-links a {
		width: 100%;
		text-align: center;
	}

	.burger {
		display: block;
		z-index: 1001;
	}

	.nav-active {
		transform: translateX(0);
	}

	.burger.toggle span:nth-child(1) {
		transform: rotate(-45deg) translate(-5px, 6px);
	}

	.burger.toggle span:nth-child(2) {
		opacity: 0;
	}

	.burger.toggle span:nth-child(3) {
		transform: rotate(45deg) translate(-5px, -6px);
	}
}

@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ==========================================================================
   Bandeau d'accueil
   ========================================================================== */

.accueil {
	min-height: 92vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-image: url('assets/img/background-accueil.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	color: var(--blanc);
}

.accueil::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.accueil-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 20px;
}

.accueil-content h1,
.accueil-content p {
	color: var(--blanc);
}

.accueil-content h1 {
	font-size: clamp(2.5em, 5vw, 3.5em);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.accueil-content p {
	font-size: 1.2em;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.accueil-content .cta-button {
	text-shadow: none;
	margin-top: 20px;
}

/* Bouton blanc (« Faire un don » du bandeau) : la couleur choisie dans
   l'éditeur l'emporte sur le survol de theme.json, qui ne s'y verrait pas. */
.wp-block-button__link.has-blanc-background-color:hover {
	background-color: var(--gris-clair) !important;
}

/* ==========================================================================
   Sections et grilles de cartes
   ========================================================================== */

.section {
	padding: 60px 20px;
}

.section--gris {
	background-color: var(--gris-clair);
}

.section > .container,
.container {
	max-width: var(--largeur-contenu);
	margin: 0 auto;
}

.section h2 {
	text-align: center;
	margin-bottom: 1em;
}

.grille-cartes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 2em;
}

.grille-cartes--deux {
	grid-template-columns: repeat(2, 1fr);
}

/* WordPress espace les blocs frères avec margin-block-start ; dans une
   grille, cette marge décale verticalement les cartes 2 et 3. */
.grille-cartes > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.carte {
	background-color: var(--blanc);
	border: 1px solid var(--bordure);
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	padding: 30px;
	text-align: center;
	transition: transform 0.3s, box-shadow 0.3s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.carte:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.carte svg {
	width: 48px;
	height: 48px;
	color: var(--violet-chapatounes);
	margin-bottom: 15px;
	align-self: center;
}

.carte h3 {
	font-size: 1.5em;
	margin-bottom: 10px;
}

.carte p {
	flex-grow: 1;
}

.carte .cta-button {
	margin-top: 20px;
	padding: 10px 28px;
	font-size: 1em;
	font-weight: 600;
	align-self: center;
}

.section-cta {
	text-align: center;
	margin-top: 40px;
}

@media screen and (max-width: 992px) {
	.grille-cartes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 768px) {
	.grille-cartes,
	.grille-cartes--deux {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Sections en alternance (À propos, Nos actions)
   ========================================================================== */

.section-alternee {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 60px 20px;
	max-width: var(--largeur-contenu);
	margin: 0 auto;
}

.section-alternee > * {
	flex: 1;
	min-width: 0;
}

.section-alternee--inverse {
	flex-direction: row-reverse;
}

.section-alternee img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.section-alternee h2 {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 2.2em;
	margin-bottom: 20px;
	text-align: left;
}

.section-alternee h2 svg {
	width: 32px;
	height: 32px;
	color: var(--violet-chapatounes);
	flex-shrink: 0;
}

.section-alternee p {
	font-size: 1.1em;
	margin-bottom: 20px;
	line-height: 1.7;
}

.section-alternee ul {
	list-style: none;
	padding-left: 0;
}

.section-alternee ul li {
	margin-bottom: 10px;
	padding-left: 25px;
	position: relative;
}

.section-alternee ul li::before {
	content: '✔';
	color: var(--violet-chapatounes);
	position: absolute;
	left: 0;
	top: 0;
}

.credit-image {
	font-size: 0.8em;
	color: #6c757d;
	margin-top: 8px;
	font-style: italic;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.section-alternee,
	.section-alternee--inverse {
		flex-direction: column;
		gap: 30px;
		padding: 40px 20px;
	}

	.section-alternee h2 {
		font-size: 1.8em;
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Page Actualités
   ========================================================================== */

.actualites-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-top: 2em;
}

.actualites-card {
	background-color: var(--blanc);
	border: 1px solid var(--bordure);
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	display: flex;
	align-items: stretch;
}

.actualites-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.actualites-card-content {
	flex: 2;
	padding: 30px;
	display: flex;
	flex-direction: column;
}

.actualites-card-content h3 {
	font-size: 1.5em;
	margin-top: 0;
}

.actualites-card-content p {
	flex-grow: 1;
	overflow-wrap: anywhere;
}

.actualites-card-image {
	flex: 1;
	min-width: 250px;
}

.actualites-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Publication texte seul : pas d'image, contenu pleine largeur */
.actualites-card--status .actualites-card-image {
	display: none;
}

.actualites-card--status .actualites-card-content {
	flex: 1;
	max-width: 100%;
}

/* Publication vidéo : pastille de lecture en surimpression */
.video-overlay-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.play-button-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, background-color 0.2s;
	pointer-events: none;
}

.video-overlay-container:hover .play-button-overlay {
	transform: translate(-50%, -50%) scale(1.1);
	background-color: rgba(255, 255, 255, 1);
}

.actualites-vide {
	text-align: center;
	padding: 40px 20px;
	color: var(--gris-fonce);
}

@media screen and (max-width: 992px) {
	.actualites-card {
		flex-direction: column;
	}

	.actualites-card-image img {
		height: 250px;
	}
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer {
	background-color: var(--gris-fonce);
	color: var(--gris-clair);
	padding: 40px 20px;
}

.footer-content {
	max-width: var(--largeur-contenu);
	margin: 0 auto 30px;
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.footer-social,
.footer-sitemap,
.footer-contact {
	flex: 1;
	min-width: 200px;
}

.site-footer h2,
.site-footer h4 {
	color: var(--blanc);
	font-size: 1.2em;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--violet-chapatounes);
	padding-bottom: 10px;
	text-align: left;
}

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

.site-footer li {
	margin-bottom: 10px;
}

.site-footer a {
	color: var(--gris-clair);
	text-decoration: none;
	transition: color 0.3s;
}

.site-footer a:hover {
	color: var(--blanc);
	text-decoration: underline;
}

/* Lien dans une phrase (colonne « Nous contacter ») : de la couleur du texte,
   il ne se distinguerait pas sans soulignement. */
.footer-contact p a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.social-icons {
	display: flex;
	gap: 20px;
	margin-top: 10px;
}

.social-icons a {
	display: inline-flex;
	text-decoration: none;
}

.social-icon {
	height: 24px;
	width: 24px;
	color: var(--blanc);
	fill: currentColor;
	transition: color 0.3s;
}

.social-icons a:hover .social-icon {
	color: var(--violet-chapatounes);
}

.footer-legal {
	text-align: center;
	border-top: 1px solid #4B5563;
	padding-top: 20px;
	font-size: 0.9em;
	max-width: var(--largeur-contenu);
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.footer-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.site-footer h2,
	.site-footer h4 {
		text-align: center;
	}

	.social-icons {
		justify-content: center;
	}
}

/* ==========================================================================
   Page 404
   ========================================================================== */

.error-page-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 70vh;
	padding: 40px 20px;
}

.error-cat-icon {
	color: var(--violet-chapatounes);
	margin-bottom: 20px;
}

.error-page-container h1 {
	font-size: 3.5em;
	margin: 0.2em 0;
}

.error-page-container h2 {
	font-size: 1.5em;
	margin-bottom: 1em;
	color: var(--gris-fonce);
}

.error-page-container p {
	max-width: 500px;
	margin-bottom: 2em;
}

/* ==========================================================================
   Titre de page
   ========================================================================== */

.page-title-section {
	text-align: center;
	padding: 60px 20px 0;
}

.page-title-section h1 {
	font-size: 3em;
	margin: 0;
}

@media screen and (max-width: 768px) {
	.page-title-section h1 {
		font-size: 2.5em;
	}
}

/* ==========================================================================
   Formulaire de contact (Contact Form 7)
   ========================================================================== */

.wpcf7 form {
	max-width: 700px;
	margin: 0 auto;
}

.wpcf7 label {
	display: block;
	margin-bottom: 20px;
	font-weight: 600;
	color: var(--gris-fonce);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 12px;
	margin-top: 8px;
	border: 1px solid var(--bordure);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--violet-chapatounes);
	outline-offset: 1px;
	border-color: var(--violet-chapatounes);
}

.wpcf7 input[type="submit"] {
	background-color: var(--violet-chapatounes);
	color: var(--blanc);
	border: 2px solid var(--violet-chapatounes);
	padding: 12px 32px;
	font-size: 1.1em;
	font-weight: 700;
	border-radius: 50px;
	cursor: pointer;
	transition: transform 0.2s, background-color 0.2s;
}

.wpcf7 input[type="submit"]:hover {
	background-color: var(--violet-fonce);
	border-color: var(--violet-fonce);
	transform: scale(1.05);
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--violet-chapatounes);
	color: var(--blanc);
	padding: 12px 24px;
	z-index: 1002;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--violet-chapatounes);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Bandeau et panneau de consentement (tarteaucitron)
   Reprend l'habillage du site d'origine : sans ces règles, le bandeau
   s'affiche avec les couleurs par défaut de la bibliothèque, étrangères
   à la charte de l'association.
   ========================================================================== */

#tarteaucitronAlertBig,
#tarteaucitron,
#tarteaucitron .tarteaucitronBorder {
	background-color: var(--gris-clair) !important;
	color: var(--gris-fonce) !important;
}

#tarteaucitron .tarteaucitronH1,
#tarteaucitron .tarteaucitronH3 {
	color: var(--violet-chapatounes) !important;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
	color: var(--gris-fonce) !important;
}

/* Bouton principal : « Tout accepter » */
#tarteaucitronPersonalize2,
#tarteaucitronSaveButton {
	background-color: var(--violet-chapatounes) !important;
	color: var(--blanc) !important;
	border: 2px solid var(--violet-chapatounes) !important;
	padding: 10px 26px !important;
	font-weight: 700 !important;
	border-radius: 50px !important;
	transition: transform 0.2s, background-color 0.2s !important;
}

#tarteaucitronPersonalize2:hover,
#tarteaucitronSaveButton:hover {
	background-color: var(--violet-fonce) !important;
	border-color: var(--violet-fonce) !important;
	transform: scale(1.05);
}

/* Boutons secondaires : « Tout refuser », « Personnaliser » */
#tarteaucitronAllDenied2,
#tarteaucitronCloseAlert {
	background-color: transparent !important;
	color: var(--violet-chapatounes) !important;
	border: 2px solid var(--violet-chapatounes) !important;
	padding: 10px 26px !important;
	font-weight: 700 !important;
	border-radius: 50px !important;
	transition: transform 0.2s, background-color 0.2s, color 0.2s !important;
}

#tarteaucitronAllDenied2:hover,
#tarteaucitronCloseAlert:hover {
	background-color: var(--violet-chapatounes) !important;
	color: var(--blanc) !important;
	transform: scale(1.05);
}

/* Lignes de services dans le panneau de personnalisation */
#tarteaucitron #tarteaucitronServices .tarteaucitronLine {
	background-color: var(--blanc) !important;
	border-left-color: var(--bordure) !important;
	margin-bottom: 5px !important;
	border-radius: 8px;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed {
	border-left-color: var(--violet-chapatounes) !important;
}

#tarteaucitron .tarteaucitronAllow,
#tarteaucitron .tarteaucitronDeny {
	background-color: transparent !important;
	color: var(--violet-chapatounes) !important;
	border: 2px solid var(--violet-chapatounes) !important;
	border-radius: 50px !important;
	padding: 6px 14px !important;
	font-weight: 600 !important;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow,
#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronDeny {
	background-color: var(--violet-chapatounes) !important;
	color: var(--blanc) !important;
}

#tarteaucitron #tarteaucitronClosePanel {
	background: var(--gris-fonce) !important;
	color: var(--blanc) !important;
}

/* ==========================================================================
   Page de dons
   ========================================================================== */

/* Bouton direct vers HelloAsso. Simple lien, il ne dépend d'aucun
   consentement, à la différence du formulaire intégré : sans lui, un
   visiteur qui n'a pas accepté les cookies ne voyait d'abord que le message
   « HelloAsso est désactivé » de tarteaucitron. */
.don-direct {
	margin-top: 2em;
}

.bouton-don-principal .wp-block-button__link {
	font-size: 1.2rem;
	padding: 16px 40px;
}

@media screen and (max-width: 480px) {
	.bouton-don-principal .wp-block-button__link {
		font-size: 1.05rem;
		padding: 14px 24px;
	}
}

.don-direct-precision,
.don-widget-precision {
	color: #4B5563;
}

.don-direct-precision {
	margin-top: 0.75em;
}

/* Cartes « réduction d'impôt » et « don mensuel ». Leurs paragraphes sont
   plus longs que ceux des cartes de l'accueil : centrés, ils se liraient mal. */
.don-avantages {
	margin-top: 3em;
	margin-bottom: 3em;
}

.don-avantages .carte,
.section .don-avantages h2 {
	text-align: left;
}

.section .don-avantages h2 {
	margin-top: 0;
	margin-bottom: 0.5em;
}

.don-widget {
	margin: 2em 0 1em;
	min-height: 200px;
}

.don-widget iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 8px;
}

/* Recours si le formulaire ne s'affiche pas — consentement refusé ou
   service indisponible : sans ce lien, le don serait simplement perdu. */
.don-repli {
	text-align: center;
	font-size: 0.95em;
	color: var(--gris-fonce);
	margin-top: 1em;
}

/* ==========================================================================
   Encart « Soutenez nos sauvetages »
   Composition synchronisée « Appel au don », placée en bas de « Nos
   actualités », « Nos actions » et « À propos » : ces pages renvoyaient
   leurs lecteurs vers Facebook sans jamais proposer de don. L'association
   modifie la composition une fois, et le changement vaut pour les trois.
   ========================================================================== */

.encart-don {
	background-color: var(--gris-clair);
	border-radius: 8px;
	padding: 40px 30px;
	max-width: 800px;
	text-align: center;
}

/* WordPress annule la marge basse du dernier bloc d'une page
   (« :root :where(.is-layout-constrained) > :last-child ») : le préfixe
   :root égale sa spécificité, et la feuille du thème, chargée après les
   styles globaux, l'emporte. Sans cela, l'encart touche le pied de page. */
:root .encart-don {
	margin-bottom: 60px;
}

.encart-don h2 {
	margin-top: 0;
}

@media screen and (max-width: 768px) {
	.encart-don {
		padding: 30px 20px;
	}
}