/**
 * Le Cri — styles responsive (mobile & tablette uniquement)
 *
 * Desktop (≥ 1024px) : voir custom.css
 */

/* -------------------------------------------------------------------------
   Mobile (≤ 767px)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--lecri-gutter: 1rem;
	}
	.margin-mobile {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
	/* Utilitaires d'espacement mobile */
    .margin-mobile-bottom,
    .margin-mobile-bottom-0 {
        margin-bottom: 0px !important;
    }

    .margin-mobile-top {
        margin-top: 0px !important;
    }

    .margin-mobile-start {
        margin-left: 0px !important;
    }

    .margin-mobile-end {
        margin-right: 0px !important;
    }

    .margin-mobile-top-24 {
        margin-top: 24px !important;
    }

    .margin-mobile-top-18 {
        margin-top: 18px !important;
    }

    .margin-mobile-top-12 {
        margin-top: 12px !important;
    }

    .margin-mobile-bottom-24 {
        margin-bottom: 24px !important;
    }

    .margin-mobile-bottom-18 {
        margin-bottom: 18px !important;
    }

    .margin-mobile-bottom-12 {
        margin-bottom: 12px !important;
    }

    .margin-mobile-bottom-6 {
        margin-bottom: 6px !important;
    }

    .padding-mobile-top-0 {
        padding-top: 0px !important;
    }

    .padding-mobile-top-24 {
        padding-top: 24px !important;
    }

    .padding-mobile-top-12 {
        padding-top: 12px !important;
    }

    .padding-mobile-top-20 {
        padding-top: 20px !important;
    }

    .padding-mobile-bottom-0 {
        padding-bottom: 0px !important;
    }

    .padding-mobile-bottom-24 {
        padding-bottom: 24px !important;
    }

    .padding-mobile-bottom-12 {
        padding-bottom: 12px !important;
    }

    .padding-mobile-bottom-20 {
        padding-bottom: 20px !important;
    }

    .padding-mobile-left-0 {
        padding-left: 0px !important;
    }

    .padding-mobile-left-24 {
        padding-left: 24px !important;
    }

    .padding-mobile-left-12 {
        padding-left: 12px !important;
    }

    .padding-mobile-left-20 {
        padding-left: 20px !important;
    }

    .padding-mobile-right-20 {
        padding-right: 20px !important;
    }

    .padding-mobile-right-12 {
        padding-right: 12px !important;
    }

    .padding-mobile-right-0 {
        padding-right: 0px !important;
    }

	.bg-blanc-mobile {
		background-color: #fff !important;
	}

	.flex-column-mobile {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Colonnes — inverser l’ordre sur mobile (ex. image au-dessus du texte) */
	.wp-block-columns.colonnes-inverse-mobile {
		flex-direction: column-reverse !important;
	}

	.wp-block-columns.colonnes-inverse-mobile > .wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	/* Bloc recherche — champ au-dessus du bouton */
	.wp-block-search__inside-wrapper {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.wp-block-search__inside-wrapper .wp-block-search__input,
	.wp-block-search__inside-wrapper .wp-block-search__button {
		width: 100% !important;
		flex: none !important;
	}

	.wp-block-search__inside-wrapper .wp-block-search__button {
		margin-left: 0 !important;
	}

	/* Newsletter Brevo — colonne sur mobile */
	p.sib-email-container,
	.sib-email-container {
		flex-direction: column !important;
	}

	.sib-email-container .sib-email-area,
	.sib-email-container .sib-default-btn,
	.sib-email-container input {
		width: 100% !important;
	}

	.bloc-nl input.sib-email-area,
	.bloc-nl .sib-email-container .sib-email-area,
	#nl-footer input.sib-email-area,
	#nl-footer .sib-email-container .sib-email-area,
	form#sib_signup_form_1 input.sib-email-area,
	form#sib_signup_form_1 .sib-email-container .sib-email-area,
	input.sib-email-area,
	input.sib-email-area[type="email"],
	.sib-email-container .sib-email-area {
		display: block !important;
		height: 57px !important;
		min-height: 57px !important;
		max-height: 57px !important;
		padding: 5px 15px !important;
		align-self: stretch;
		box-sizing: border-box !important;
		font-family: "amplitude-wide", sans-serif !important;
		border-radius: var(--Trs-petit, 6px) !important;
		border: 1px solid var(--Noir, #000);
		line-height: 1.3 !important;
	}

	/* Typo mobile — H1 / H2 section (titres de cartes inchangés à 24px) */
	h1,
	.lecri-h1,
	.wp-block-heading h1,
	h1.wp-block-post-title {
		font-size: 36px !important;
		font-weight: 860 !important;
		line-height: 1.1 !important;
	}

	h2:not(.wp-block-post-title),
	.lecri-h2,
	.wp-block-heading h2 {
		font-size: 28px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
	}
}

/* -------------------------------------------------------------------------
   Tablette (768px – 1023px)
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		--lecri-gutter: 1.5rem;
	}

	/* Typo tablette — H1 / H2 section */
	h1,
	.lecri-h1,
	.wp-block-heading h1,
	h1.wp-block-post-title {
		font-size: 36px !important;
		font-weight: 860 !important;
		line-height: 1.1 !important;
	}

	h2:not(.wp-block-post-title),
	.lecri-h2,
	.wp-block-heading h2 {
		font-size: 28px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
	}

	/* Boucles articles — grille 2 colonnes */
	ul.wp-block-post-template.is-layout-grid,
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}
}

/* -------------------------------------------------------------------------
   Ligne date cartes — .date-custom
   ------------------------------------------------------------------------- */

.wp-block-group.date-custom p,
.wp-block-group.date-custom p.wp-block-paragraph,
.wp-block-group.date-custom .wp-block-post-date,
.wp-block-group.date-custom .wp-block-post-date time {
	color: #6e6e6e !important;
	font-family: "amplitude-wide", sans-serif !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 350 !important;
	line-height: 1.4 !important;
}

/* -------------------------------------------------------------------------
   Visibilité responsive
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hide-on-tablet {
		display: none !important;
	}

	.flex-column-tablet {
		display: flex !important;
		flex-direction: column !important;
	}
}

@media (min-width: 1024px) {
	.hide-on-desktop {
		display: none !important;
	}
}

@media (max-width: 767px) {
.img-boucle-article {
    width: 92px;
}
.btn-mobile {
    width: 100% !important;
}
}
/* Desktop + tablette */
@media (min-width: 768px) {
	.bloc-qui-sommes-nous {
		align-items: stretch !important; /* les 2 colonnes même hauteur */
	}

	.bloc-qui-sommes-nous > .wp-block-column:last-child {
		display: flex;
		padding: 0 !important;
	}

	.bloc-qui-sommes-nous > .wp-block-column:last-child .wp-block-image,
	.bloc-qui-sommes-nous > .wp-block-column:last-child figure {
		margin: 0;
		width: 100%;
		height: 100%;
	}

	.bloc-qui-sommes-nous > .wp-block-column:last-child img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;          /* remplit sans déformer */
		object-position: center;    /* ajuste le cadrage */
	}
}

/* Mobile: comportement normal */
@media (max-width: 767px) {
	.bloc-qui-sommes-nous > .wp-block-column:last-child img {
		height: auto;
	}
}