/*
Theme Name: Marcelle
Theme URI: https://espace-marcelle.be/
Author: Visualguru
Description: Thème bloc sur mesure pour MARCELLE — espace d'écoute et de soutien. Reprend fidèlement le design du site d'origine, sans constructeur de pages, entièrement éditable dans Gutenberg.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 2.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marcelle
*/

/* Les réglages globaux (couleurs, tailles, polices) sont dans theme.json.
   Ce fichier contient uniquement ce que theme.json ne sait pas exprimer. */

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

:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wp--preset--color--marine); outline-offset: 3px; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
strong, b { font-weight: 700; }

/* ------------------------------------------------------------------ En-tête
   Superposé au bandeau de chaque page, comme sur le site d'origine. */

.marcelle-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
}
.admin-bar .marcelle-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .marcelle-header { top: 46px; } }

.marcelle-header .marcelle-logo img { width: 242px; height: auto; display: block; }

.marcelle-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 5px 18px;
	border: 2px solid transparent;
	border-radius: 30px;
	line-height: 26px;
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
	transition: border-color .3s ease-in-out, background-color .3s ease-in-out, color .3s ease-in-out;
}
.marcelle-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.marcelle-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--blanc);
}
.marcelle-header .wp-block-navigation__container { gap: 30px; }

/* Bouton « Prendre rendez-vous » à icône calendrier (en-tête et bandeau d'accueil) */
.wp-block-button.is-style-rdv > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 20px;
	border: 0;
	border-radius: 24px;
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--noir);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 15px;
	transition: background-color .3s, color .3s;
}
.wp-block-button.is-style-rdv > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url(assets/images/icone-calendrier.svg) center / contain no-repeat;
	mask: url(assets/images/icone-calendrier.svg) center / contain no-repeat;
}
.wp-block-button.is-style-rdv > .wp-block-button__link:hover { background: var(--wp--preset--color--blanc); color: var(--wp--preset--color--noir); }
.wp-block-button.is-style-rdv.is-arrondi > .wp-block-button__link { border-radius: 40px; color: var(--wp--preset--color--texte); }

/* Bouton contour blanc (sur image) */
.wp-block-button.is-style-contour-blanc > .wp-block-button__link { color: var(--wp--preset--color--blanc); border-color: var(--wp--preset--color--blanc); }
.wp-block-button.is-style-contour-blanc > .wp-block-button__link:hover { background: var(--wp--preset--color--blanc); color: var(--wp--preset--color--noir); }

/* Mobile : logo centré, menu en rond cerclé de blanc dessous, bouton d'en-tête masqué */
@media (max-width: 767px) {
	.marcelle-header > .wp-block-group { flex-direction: column; gap: 20px; }
	.marcelle-header .marcelle-header-cta { display: none; }
	.marcelle-header .wp-block-navigation__responsive-container-open {
		width: 49px; height: 49px;
		border: 2px solid var(--wp--preset--color--blanc);
		border-radius: 50%;
		color: var(--wp--preset--color--blanc);
		display: flex; align-items: center; justify-content: center;
	}
}
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 30px 20px;
	background-color: var(--wp--preset--color--noir) !important;
	color: var(--wp--preset--color--blanc) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: center; padding-top: 60px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center; gap: 16px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 20px; }

/* ------------------------------------------------------------------ Bandeaux */

.marcelle-hero { color: var(--wp--preset--color--blanc); }
.marcelle-hero :where(h1, h2, h3, p) { color: var(--wp--preset--color--blanc); }
.marcelle-hero .marcelle-chapo { letter-spacing: -1px; line-height: 1.2; }

/* ------------------------------------------------------------------ Encart « Nouveau » */

/* Largeur : 528 px, donnée par le groupe parent (comme sur le site d'origine). */
.marcelle-encart {
	padding: 24px 28px;
	background: var(--wp--preset--color--blanc);
	border: 2px solid var(--wp--preset--color--miel);
	border-radius: 16px;
	text-align: center;
}
.marcelle-encart > * { margin-block: 0; }
.marcelle-encart .marcelle-pastille {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--miel);
	color: var(--wp--preset--color--marine);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 26px;
	text-transform: uppercase;
}
.marcelle-encart .marcelle-encart-titre { margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--marine); }
.marcelle-encart .marcelle-encart-texte { font-size: 17px; line-height: 1.55; color: var(--wp--preset--color--texte); }

/* ------------------------------------------------------------------ FAQ (bloc Détails natif) */

.marcelle-faq { display: flex; flex-direction: column; gap: 20px; }
.marcelle-faq > .wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}
.marcelle-faq .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 20px;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--question);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--noir);
}
.marcelle-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.marcelle-faq .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 39px;
	height: 39px;
	border-radius: 30px;
	background: var(--wp--preset--color--miel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%231C1C1B' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
	transition: background-color .3s ease-in-out, transform .3s ease-in-out;
}
.marcelle-faq .wp-block-details > summary:hover::after,
.marcelle-faq .wp-block-details[open] > summary::after {
	background-color: var(--wp--preset--color--rose);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23FFFFFF' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
}
.marcelle-faq .wp-block-details > :not(summary) { margin-block: 0 27px; }
.marcelle-faq .wp-block-details > :last-child { margin-bottom: 30px; }
.marcelle-faq .wp-block-details :where(h3, h4) {
	margin-block: 0 13.5px;
	font-size: var(--wp--preset--font-size--question);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--noir);
}
.marcelle-faq .wp-block-details ul { margin: 36px 0 36px 36px; padding: 0; }
.marcelle-faq .wp-block-details li + li { margin-top: 6px; }

/* ------------------------------------------------------------------ Cartes d'équipe */

.marcelle-membre { background: var(--wp--preset--color--blanc); padding: 25px; }
.marcelle-membre .wp-block-image img { width: 100%; aspect-ratio: 564 / 382; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ Coordonnées (page Contact) */

.marcelle-label { font-family: var(--wp--preset--font-family--chivo-mono); font-weight: 500; font-size: 14px; line-height: 1.55; letter-spacing: 2px; text-transform: uppercase; }
.marcelle-coordonnees a { color: inherit; text-decoration: none; }
.marcelle-coordonnees a:hover { text-decoration: underline; }
.marcelle-carte iframe { display: block; width: 100%; height: 424px; border: 0; }

/* ------------------------------------------------------------------ Pied de page */

.marcelle-footer {
	background: var(--wp--preset--color--blanc) url(assets/images/texture-papier.webp) repeat;
}
.marcelle-footer .marcelle-footer-logo img { width: 218px; height: auto; }
.marcelle-footer .marcelle-footer-partenaire img { width: 227px; height: auto; mix-blend-mode: multiply; }
.marcelle-footer .marcelle-footer-pab img { width: 168px; }
.marcelle-footer a { color: inherit; text-decoration: none; }
.marcelle-footer a:hover { text-decoration: underline; }

/* Bouton « retour en haut » */
.marcelle-haut {
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 30;
	width: 49px;
	height: 49px;
	border-radius: 50px;
	background: var(--wp--preset--color--miel);
	color: var(--wp--preset--color--noir);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s, visibility .3s, transform .3s, background-color .3s;
}
.marcelle-haut.is-visible { opacity: 1; visibility: visible; transform: none; }
.marcelle-haut:hover { background: var(--wp--preset--color--rose); }
.marcelle-haut svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 767px) { .marcelle-haut { right: 20px; bottom: 20px; } }

/* ------------------------------------------------------------------ Calendly */

.marcelle-calendly { min-width: 320px; height: 700px; }
@media (max-width: 767px) { .marcelle-calendly { height: 1000px; } }

/* ------------------------------------------------------------------ Animations d'apparition
   Reprises du thème d'origine : fondu montant (60 px), fondu, zoom (75 %), 1 s.
   Ajoutées par la classe CSS du bloc : anim-fade-up, anim-fade, anim-pop (+ delai-100 à delai-450).
   Actives seulement si JavaScript tourne et si le visiteur n'a pas demandé moins d'animations. */

@keyframes marcelle-fade-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes marcelle-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes marcelle-pop { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
	.marcelle-anim :is(.anim-fade-up, .anim-fade, .anim-pop):not(.is-anime) { opacity: 0; }
	.marcelle-anim .anim-fade-up.is-anime { animation: marcelle-fade-up 1s both; }
	.marcelle-anim .anim-fade.is-anime { animation: marcelle-fade 1s both; }
	.marcelle-anim .anim-pop.is-anime { animation: marcelle-pop 1s both; }
	.marcelle-anim .delai-100 { animation-delay: .1s !important; }
	.marcelle-anim .delai-200 { animation-delay: .2s !important; }
	.marcelle-anim .delai-300 { animation-delay: .3s !important; }
	.marcelle-anim .delai-400 { animation-delay: .4s !important; }
	.marcelle-anim .delai-450 { animation-delay: .45s !important; }
}
/* Dans l'éditeur, tout reste visible. */
.editor-styles-wrapper :is(.anim-fade-up, .anim-fade, .anim-pop) { opacity: 1 !important; }

/* ------------------------------------------------------------------ Mobile (reprend la mise en page mobile d'origine) */

.wp-block-button__link { white-space: nowrap; }

@media (max-width: 767px) {
	.wp-block-post-content > .alignfull { padding-left: 20px !important; padding-right: 20px !important; }
	.home .wp-block-post-content > .wp-block-cover:first-child { padding-left: 54px !important; padding-right: 54px !important; }
	.wp-block-post-content .wp-block-column { padding-right: 0 !important; }
	.marcelle-hero-court-mobile { min-height: 600px !important; }
	h2.titre-mobile-l { font-size: 30px !important; }

	.marcelle-centre-mobile,
	.marcelle-centre-mobile :where(h1, h2, p) { text-align: center; }
	.marcelle-centre-mobile .marcelle-coordonnees { flex-direction: column; justify-content: center; gap: 30px; }
	.marcelle-centre-mobile .marcelle-coordonnees > .wp-block-group { align-items: center; }
	.marcelle-centre-mobile .wp-block-buttons { justify-content: center; }

	.marcelle-footer { text-align: center; padding-top: 80px !important; padding-bottom: 60px !important; }
	.marcelle-footer .wp-block-columns { gap: 40px !important; }
	.marcelle-footer .wp-block-image { display: flex; justify-content: center; }
	.marcelle-footer .marcelle-footer-logo img { width: 220px; }
	.marcelle-footer .marcelle-footer-partenaire img { width: 305px; max-width: 100%; }
	.marcelle-footer .marcelle-footer-pab img { width: 215px; }
}

/* ------------------------------------------------------------------ Retouches mobiles (v2.1) */

/* Titres : lignes équilibrées (évite un mot isolé en fin de titre). */
:where(h1, h2, h3) { text-wrap: balance; }

@media (max-width: 767px) {
	/* Menu ouvert : pastille plus aérée autour du libellé. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content { padding: 8px 28px !important; }

	/* Bandeaux : le contenu commence sous le logo et le bouton menu (en-tête plus haut sur mobile). */
	.marcelle-hero { padding-top: 240px !important; }

	/* Contact : tout centré. */
	.marcelle-centre-mobile .wp-block-cover__inner-container { width: 100% !important; margin-inline: auto !important; text-align: center !important; }
	.marcelle-centre-mobile :is(h1, h2, p) { text-align: center !important; }
	.marcelle-centre-mobile .marcelle-coordonnees,
	.marcelle-centre-mobile .marcelle-coordonnees > .wp-block-group { align-items: center !important; justify-content: center !important; }
	.marcelle-centre-mobile .wp-block-buttons { justify-content: center !important; width: 100%; }
}