/*
Theme Name: 2024 Block Child
Theme URI: https://wpsites.net/wordpress-themes/free-child-theme-for-twenty-twenty-four/
Author: Brad Dalton WP SITES
Author URI: https://wpsites.net/bradley-james-dalton-wordpress-developer/
Description: A child theme for the Twenty Twenty Four block theme
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: 2024-block-child
*/

:root{
	--site-text: 720px;
	--site-image: 1080px;
	--space-xl: clamp(70px, 10vw, 140px);
	--space-lg: clamp(40px, 6vw, 90px);
	--space-md: clamp(20px, 3vw, 36px);

	--portfolio-image-width: 70vw;
	--portfolio-text-width: 62ch;
	--portfolio-text-color: #363636;
	--portfolio-intro-color: #555555;
}

.wp-site-blocks,
.wp-block-group,
.wp-block-post-content {
	box-sizing: border-box;
}

/* =========================
   ACCUEIL
   ========================= */

html,
body{
	margin:0;
	padding:0;
}

.home{
	overflow:hidden;
}

.home .wp-site-blocks{
	padding:0 !important;
	margin:0 !important;
}

.home-shell{
	width:100%;
	height:100vh;
	min-height:100vh;
	display:grid;
	grid-template-rows:1fr 1fr;
	overflow:hidden;
	padding:0 !important;
	margin:0 !important;
}

@supports (height: 100dvh){
	.home-shell{
		height:100dvh;
		min-height:100dvh;
	}
}

.home-shell > .wp-block-group,
.home-menu-zone,
.home-image-zone{
	min-height:0;
	margin:0 !important;
	padding:0 !important;
	max-width:none !important;
	overflow:hidden;
}

.home-menu-zone{
	display:flex;
	align-items:center;
	justify-content:center;
}

.home-menu-zone > .wp-block-group{
	width:100%;
	max-width:420px;
	margin:0 auto !important;
	padding:0 !important;
}

.artist-name{
	margin:0 0 20px !important;
	text-align:center;
	line-height:1.2;
	font-size:clamp(22px,3vw,40px);
}

.home-artist-nav{
	text-align:center;
}

.home-artist-nav .wp-block-navigation__container{
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
	gap:clamp(10px,1.6vh,18px) !important;
}

.home-artist-nav .wp-block-navigation-item{
	width:100%;
	justify-content:center;
}

.home-artist-nav .wp-block-navigation-item__content{
	text-decoration:none;
}

.home-image-zone{
	width:100%;
	height:100%;
}

.home-image-zone .wp-block-cover{
	width:100% !important;
	height:100% !important;
	min-height:0 !important;
	margin:0 !important;
	padding:0 !important;
	max-width:none !important;
}

.home-image-zone .wp-block-cover__inner-container{
	display:none !important;
}

.home-image-zone .wp-block-cover__image-background,
.home-image-zone img.wp-block-cover__image-background{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
}

body.admin-bar .home-shell{
	height:calc(100vh - 32px);
	min-height:calc(100vh - 32px);
}

@supports (height: 100dvh){
	body.admin-bar .home-shell{
		height:calc(100dvh - 32px);
		min-height:calc(100dvh - 32px);
	}
}

@media (max-width:782px){
	body.admin-bar .home-shell{
		height:calc(100vh - 46px);
		min-height:calc(100vh - 46px);
	}

	.home-menu-zone > .wp-block-group{
		max-width:320px;
	}

	.artist-name{
		font-size:clamp(20px,5vw,28px);
		margin-bottom:16px !important;
	}

	.home-artist-nav .wp-block-navigation__container{
		gap:10px !important;
	}
}

@supports (height: 100dvh){
	@media (max-width:782px){
		body.admin-bar .home-shell{
			height:calc(100dvh - 46px);
			min-height:calc(100dvh - 46px);
		}
	}
}

/* =========================
   PORTFOLIO INTERIEUR FINAL
   ========================= */

.portfolio-shell{
	padding: 20px 24px 100px;
}

.header-inner-minimal{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 56px;
}

/* bloc oeuvre - DESKTOP */
.wp-block-group.portfolio-item{
	width: 65vw !important;
	max-width: 65vw !important;
	margin: 0 auto 180px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center !important;
}

.wp-block-group.portfolio-item.haut {
	width: 53vw !important;
	max-width: 53vw !important;
}

/* wrappers Gutenberg internes */
.wp-block-group.portfolio-item .wp-block-image,
.wp-block-group.portfolio-item figure{
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.wp-block-group.portfolio-item img{
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

/* bloc légende */
.wp-block-group.portfolio-caption{
	width: 100% !important;
	max-width: 62ch !important;
	margin: 16px auto 0 auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center !important;
}

/* titre - DESKTOP */
p.portfolio-title{
	margin: 0 0 6px !important;
	font-size: 0.91rem !important;
	line-height: 1.35 !important;
	color: #474747 !important;
	text-align: center !important;
	letter-spacing: .3px;
}

/* technique - DESKTOP */
p.portfolio-meta{
	margin: 0 !important;
	font-size: 0.75rem !important;
	line-height: 1.45 !important;
	color: #999 !important;
	text-align: center !important;
}

/* intro - DESKTOP */
p.portfolio-intro{
	max-width: 75ch !important;
	margin: 40px auto 0 auto !important;
	font-size: 0.78rem !important;
	line-height: 2.2 !important;
	color: #838181 !important;
	text-align: left !important;
}

/* on neutralise seulement le padding du thème, pas la largeur de caption */
.wp-block-group.portfolio-item.has-global-padding.is-layout-constrained{
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none !important;
}

.wp-block-group.portfolio-caption.has-global-padding.is-layout-constrained{
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 15px;
}

/* tablette */
@media (min-width: 768px) and (max-width: 1024px){
	.wp-block-group.portfolio-item{
		width: 82vw !important;
		max-width: 82vw !important;
		margin-bottom: 130px !important;
	}

	.wp-block-group.portfolio-item.haut{
		width: 68vw !important;
		max-width: 68vw !important;
	}

	p.portfolio-title{
		font-size: 0.91rem !important;
		line-height: 1.4 !important;
		color: #474747 !important;
		letter-spacing: .3px;
	}

	p.portfolio-meta{
		font-size: 0.70rem !important;
		line-height: 1.5 !important;
		color: #999 !important;
	}

	p.portfolio-intro{
		font-size: 0.78rem !important;
		line-height: 2 !important;
		color: #838181 !important;
		margin-top: 32px !important;
	}
}

/* mobile */
@media (max-width: 767px){
	.portfolio-shell{
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 64px;
	}

	.header-inner-minimal{
		margin-bottom: 32px;
	}

	.wp-block-group.portfolio-item{
		width: 94vw !important;
		max-width: 94vw !important;
		margin-bottom: 90px !important;
	}

	/* sur mobile, .haut prend la même largeur que les autres */
	.wp-block-group.portfolio-item.haut{
		width: 94vw !important;
		max-width: 94vw !important;
	}

	.wp-block-group.portfolio-caption{
		margin-top: 14px !important;
	}

	p.portfolio-title{
		font-size: 0.91rem !important;
		line-height: 1.4 !important;
		color: #474747 !important;
		margin-bottom: 5px !important;
		letter-spacing: .3px;
	}

	p.portfolio-meta{
		font-size: 0.70rem !important;
		line-height: 1.5 !important;
		color: #999 !important;
	}

	p.portfolio-intro{
		font-size: 0.78rem !important;
		line-height: 1.95 !important;
		color: #838181 !important;
		margin-top: 24px !important;
	}
}

/* =========================
   MENU ACCUEIL
   ========================= */

/* Liens standards */
.home-artist-nav .wp-block-navigation-item__content{
	font-size: 0.92rem !important;
	color: #777777 !important;
	text-decoration: none !important;
}

/* Premier item = nom artiste, un peu plus grand */
.home-artist-nav .wp-block-navigation-item:first-child .wp-block-navigation-item__content{
	font-size: 1.02rem !important;
	color: #363636 !important;
}

/* Page active : si WordPress ajoute une classe active plus tard */
.home-artist-nav .current-menu-item > .wp-block-navigation-item__content,
.home-artist-nav .current_page_item > .wp-block-navigation-item__content,
.home-artist-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.home-artist-nav .current_page_ancestor > .wp-block-navigation-item__content{
	color: #363636 !important;
}

/* Hover */
.home-artist-nav .wp-block-navigation-item__content:hover{
	color: #363636 !important;
}

/* Mobile */
@media (max-width: 767px){
	.home-artist-nav .wp-block-navigation-item__content{
		font-size: 0.88rem !important;
	}

	.home-artist-nav .wp-block-navigation-item:first-child .wp-block-navigation-item__content{
		font-size: 1.15rem !important;
	}
}

/* =========================
   MENU INTERIEUR OVERLAY
   ========================= */

/* Liens du menu overlay */
.header-inner-minimal .portfolio-nav .wp-block-navigation-item__content,
.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
	font-size: 0.92rem !important;
	color: #777777 !important;
	text-decoration: none !important;
}

/* 1er item = Michel Favre-Félix */
.header-inner-minimal .portfolio-nav .wp-block-navigation-item:first-child .wp-block-navigation-item__content,
.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item:first-child .wp-block-navigation-item__content{
	font-size: 1.05rem !important;
	color: #363636 !important;
}

/* Hover */
.header-inner-minimal .portfolio-nav .wp-block-navigation-item__content:hover,
.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover{
	color: #363636 !important;
}

/* =========================
   ETAT ACTIF PAR PAGE
   ========================= */

/* Scènes d'objets */
body.page-slug-scenes-dobjets .portfolio-nav a[href="/scenes-dobjets/"],
body.page-slug-scenes-dobjets .wp-block-navigation__responsive-container-content a[href="/scenes-dobjets/"]{
	color: #363636 !important;
}

/* Tauromachie */
body.page-slug-tauromachie .portfolio-nav a[href="/tauromachie/"],
body.page-slug-tauromachie .wp-block-navigation__responsive-container-content a[href="/tauromachie/"]{
	color: #363636 !important;
}

/* À propos */
body.page-slug-a-propos .portfolio-nav a[href="/a-propos/"],
body.page-slug-a-propos .wp-block-navigation__responsive-container-content a[href="/a-propos/"]{
	color: #363636 !important;
}

/* Contact */
body.page-slug-contact .portfolio-nav a[href="/contact/"],
body.page-slug-contact .wp-block-navigation__responsive-container-content a[href="/contact/"]{
	color: #363636 !important;
}

/* Mobile */
@media (max-width: 767px){
	.header-inner-minimal .portfolio-nav .wp-block-navigation-item__content,
	.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
		font-size: 0.88rem !important;
	}

	.header-inner-minimal .portfolio-nav .wp-block-navigation-item:first-child .wp-block-navigation-item__content,
	.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item:first-child .wp-block-navigation-item__content{
		font-size: 1.15rem !important;
	}
}

/* =========================
   MENU OVERLAY PLEIN ECRAN
   ========================= */

.header-inner-minimal .wp-block-navigation__responsive-container.is-menu-open{
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #f3f3f3 !important;
}

@supports (height: 100dvh){
	.header-inner-minimal .wp-block-navigation__responsive-container.is-menu-open{
		height: 100dvh !important;
		max-height: 100dvh !important;
	}
}

/* wrapper interne plein écran aussi */
.header-inner-minimal .wp-block-navigation__responsive-close,
.header-inner-minimal .wp-block-navigation__responsive-dialog,
.header-inner-minimal .wp-block-navigation__responsive-container-content{
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* centre le menu dans la fenêtre */
.header-inner-minimal .wp-block-navigation__responsive-container-content{
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding-top: 110px !important;
	text-align: center !important;
}

.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation__container{
	width: auto !important;
	margin: 0 auto !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: center !important;
	gap: 18px !important;
}

.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item{
	width: auto !important;
	text-align: center !important;
}

.header-inner-minimal .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
	display: inline-block !important;
	text-align: center !important;
}

/* croix alignée au viewport, pas au popup */
.header-inner-minimal .wp-block-navigation__responsive-container-close{
	position: fixed !important;
	top: 26px !important;
	right: 32px !important;
	z-index: 100000 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	line-height: 1 !important;
}

/* harmonise avec le burger */
.header-inner-minimal .wp-block-navigation__responsive-container-open svg,
.header-inner-minimal .wp-block-navigation__responsive-container-close svg{
	width: 24px !important;
	height: 24px !important;
}

/* mobile */
@media (max-width: 767px){
	.header-inner-minimal .wp-block-navigation__responsive-container-content{
		padding-top: 90px !important;
	}

	.header-inner-minimal .wp-block-navigation__responsive-container-close{
		top: 22px !important;
		right: 20px !important;
	}
}

/* =========================
   LIGHTBOX IMAGE SANS PLUGIN
   ========================= */

.mff-lightbox {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    /* Transition plus longue et courbe "moelleuse" */
    transition: opacity 0.5s cubic-bezier(0.2, 0, 0.2, 1), 
                visibility 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.mff-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.mff-lightbox__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* L'image part d'un peu plus petit (97%) */
    transform: scale(0.97); 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quand la lightbox est ouverte, l'image reprend sa taille normale (100%) */
.mff-lightbox.is-open .mff-lightbox__inner {
    transform: scale(1);
}

.mff-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Un léger flou au départ peut accentuer le côté doux */
    filter: blur(0); 
    transition: filter 0.4s ease;
}

/* Animation de la croix de fermeture */
.mff-lightbox__close {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 1000000;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    color: #363636;
    font-size: 36px;
    font-weight: 300;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease 0.2s; /* Apparaît avec un léger retard */
}

.mff-lightbox.is-open .mff-lightbox__close {
    opacity: 1;
    transform: translateY(0);
}

.mff-lightbox__close:hover{
	color: #000;
}

/* Curseur loupe (+) sur les images du portfolio */
.portfolio-item .wp-block-image a {
    cursor: zoom-in !important;
}

/* Curseur loupe (-) sur toute la surface de la lightbox */
.mff-lightbox.is-open {
    cursor: zoom-out !important;
}

/* On s'assure que le bouton "Fermer" garde son curseur pointeur standard */
.mff-lightbox__close {
    cursor: pointer !important;
}

body.mff-lightbox-open{
	overflow: hidden;
}

@media (max-width: 767px){
	.mff-lightbox{
		padding: 16px;
	}

	.mff-lightbox__close{
		top: 18px;
		right: 18px;
		font-size: 32px;
	}
}

/* =========================
   PAGE A PROPOS
   ========================= */

.about-page{
	padding: 20px 24px 100px;
}

.about-title{
	margin: 0 0 40px;
	text-align: center;
	font-size: 1rem !important;
	font-weight: 400;
	line-height: 1.3;
	color: #363636;
}

.about-text{
	max-width: 75ch !important;
	margin: 0 auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.about-text p{
	margin: 0 0 1.6em;
	font-size: 0.85rem;
	line-height: 1.9;
	color: #6c6c6c;
}

/* tablette */
@media (min-width: 768px) and (max-width: 1024px){
	.about-title{
		font-size: 0.98rem !important;
		margin-bottom: 34px;
	}

	.about-text p{
		font-size: 0.82rem;
		line-height: 1.85;
	}
}

/* mobile */
@media (max-width: 767px){
	.about-page{
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 64px;
	}

	.about-title{
		margin-bottom: 28px;
		font-size: 0.95rem !important;
	}

	.about-text p{
		font-size: 0.85rem;
		line-height: 1.8;
	}
}

/* =========================
   PAGE CONTACT OPTIMISÉE
   ========================= */

.wp-block-group.contact-page {
	padding: 80px 24px 120px !important;
	background: #ffffff !important;
}

/* Titre - Plus de prestance, moins de marge basse */
.wp-block-group.contact-page > h1.contact-title {
	font-family: serif;
	font-size: 1.2rem !important;
	letter-spacing: 1px;
	margin-bottom: 40px !important;
}

/* Intro - Texte plus léger et aéré */
.wp-block-group.contact-page > .wp-block-group.contact-intro {
	margin-bottom: 60px !important;
}

.wp-block-group.contact-page > .wp-block-group.contact-intro p {
	font-size: 0.85rem !important;
	font-weight: 300;
	letter-spacing: 0.2px;
	opacity: 0.8;
}

/* Formulaire - Structure plus fine */
.wp-block-group.contact-page .wpforms-container {
	max-width: 500px !important;
}

.wp-block-group.contact-page .wpforms-field {
	margin-bottom: 30px !important;
}

/* Labels - Plus petits et discrets */
.wp-block-group.contact-page .wpforms-field-label {
	font-size: 0.75rem !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #888 !important;
	margin-bottom: 10px !important;
}

/* Inputs - Lignes ultra-fines */
.wp-block-group.contact-page .wpforms-field input,
.wp-block-group.contact-page .wpforms-field textarea {
	border: 0 !important;
	border-bottom: 1px solid #e0e0e0 !important;
	background: transparent !important;
	padding: 10px 0 !important;
	font-size: 0.95rem !important;
	transition: border-color 0.4s ease !important;
}

.wp-block-group.contact-page .wpforms-field input:focus,
.wp-block-group.contact-page .wpforms-field textarea:focus {
	border-bottom-color: #363636 !important;
}

/* Turnstile - On essaie de l'intégrer avec douceur */
.wp-block-group.contact-page .cf-turnstile {
	filter: grayscale(1);
	opacity: 0.6;
	margin: 20px 0 !important;
	transform: scale(0.9);
	transform-origin: left;
}

/* Bouton - Centré et minimaliste */
.wp-block-group.contact-page .wpforms-submit-container {
	text-align: center;
	padding-top: 20px !important;
}

.wp-block-group.contact-page button.wpforms-submit {
	border: 1px solid #363636 !important;
	padding: 12px 40px !important;
	font-size: 0.8rem !important;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #fff !important;
	color: #363636 !important;
}

.wp-block-group.contact-page button.wpforms-submit:hover {
	background: #363636 !important;
	color: #fff !important;
}

/* Ajustements Mobile */
@media (max-width: 767px) {
	.wp-block-group.contact-page {
		padding-top: 50px !important;
	}

	.wp-block-group.contact-page .cf-turnstile {
		transform: scale(0.85);
	}
}

/* =========================
   FOND GLOBAL DU SITE
   ========================= */

/* fond blanc partout */
html,
body,
.wp-site-blocks{
	background: #ffffff !important;
}

/* garde la page contact en fond clair */
body.page-id-141,
body.page-id-141 .wp-site-blocks{
	background: #f3f3f3 !important;
}

/* Force le centrage du bloc de légende même avec les contraintes WP */
.wp-block-group.portfolio-caption.wp-block-group-is-layout-constrained {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* S'assurer que le contenu à l'intérieur est aussi centré */
.wp-block-group.portfolio-caption > * {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}