/* Carousel Vice Président : .ccma-elus-query */

.ccma-elus-query > ul > li > div > figure {
  border-radius: 0 !important;
}

.ccma-elus-query .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--vert-600);
  line-height: 1.2em;
  font-size: var(--wp--preset--font-size--body-small);
}

.has-vert-background-color .ccma-elus-query .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--vert-200);
}

/* Image plus Texte Centered */

.image-plus-text-centered {
  gap: 5vw;
}

.image-plus-text-centered > .wp-block-media-text__content {
  margin: 0;
  padding: 0;
}

/*  CCMA PARALAX BANNER */

.ccma-parallax-cover {
  max-width: unset !important;
}


/***********  CCMA PARALLAX COVER ***********/

/* Vertical parallax cover */
.ccma-parallax-cover {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ccma-parallax-cover .wp-block-cover__image-background {
	position: absolute !important;
	inset: -140px 0 !important;
	width: 100% !important;
	height: calc(100% + 280px) !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	z-index: 0;
}

.ccma-parallax-cover .wp-block-cover__background {
	position: absolute;
	z-index: 1;
}

.ccma-parallax-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.ccma-parallax-cover .wp-block-cover__image-background {
		transform: none !important;
		will-change: auto;
	}
}

/**** CCMA ICONS LINKS GRID ***/

.ccma-icon-links-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, 150px), 180px)
	) !important;
	justify-content: center;
	justify-items: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	margin-inline: auto;
}

@media (max-width: 600px) {
	.ccma-icon-links-grid {
		grid-template-columns: repeat(2, minmax(0, 150px)) !important;
		gap: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--20) !important;
	}

	.ccma-icon-links-grid .ccma-svg-block {
    padding-top: 2em;
  }

	.ccma-icon-links-grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
	}
}

@media (max-width: 360px) {
	.ccma-icon-links-grid {
		grid-template-columns: minmax(0, 180px) !important;
	}

	.ccma-icon-links-grid > :last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/*** CCMA Territory Section ***/

@media (max-width: 1080px) {
  .ccma-territory-section {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  .ccma-territory-section .ccma-territory-section__content p {
    width: 100%;
    text-align: center;
  }
  .ccma-territory-section .ccma-territory-section__content .wp-block-ccma-stat-pill, 
  .ccma-territory-section .ccma-territory-section__content.ccma-stat-pill {
    flex-direction: column;
    align-items: flex-start;
  }

  .ccma-territory-section .ccma-territory-section__visual .wp-block-image.size-full.ardeche_map.ccma-blob-section {
    width: 72vw;
  }

  .ccma-territory-section .ccma-territory-section__visual .wp-block-image.size-full.ardeche_map.ccma-blob-section::after {
    height: 110%;
    right: -50%;
    bottom: 0vw;
  }

  .ccma-territory-section .ccma-territory-section__visual .wp-block-image.size-full.ardeche_map img {
    width: 100%;
  }
}

/****/

@media (max-width: 600px) {
  .carousel-section .ccma-carousel-header {
    flex-direction: column;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(6, 1fr);
  }
}

/****/
@media (max-width: 1080px) {
  .ccma-parallax-cover-inner {
    flex-direction: column;
  }
  .ccma-parallax-cover-text-wrapper {
    align-items: center;
  }
  .ccma-parallax-cover-text-wrapper * {
    text-align: center;
  }
}

/****foooter***/
.ccma-footer__bottom {
  max-width: 84vw;
  margin: auto;
}


/*** paralax banner ***/

.ccma-parallax-cover .ccma-parallax-cover-inner {
  gap: 2em;
}

.ccma-parallax-cover .ccma-parallax-cover-inner .ccma-parallax-cover-text-wrapper {
  gap: 1em;
}


.ccma-parallax-cover .ccma-simple-svg-block {
	--ccma-parallax-icon-size: clamp(110px, 14vw, 205px);

	flex: 0 0 var(--ccma-parallax-icon-size);
	width: var(--ccma-parallax-icon-size);
	height: var(--ccma-parallax-icon-size);

	line-height: 0 !important;
}

.ccma-parallax-cover .ccma-simple-svg-block svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

@media (max-width: 781px) {
	.ccma-parallax-cover .ccma-simple-svg-block {
		--ccma-parallax-icon-size: clamp(90px, 24vw, 130px);
	}
}

@media (max-width: 640px) {
	.ccma-parallax-cover-inner {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
	}

	.ccma-parallax-cover .ccma-simple-svg-block {
		--ccma-parallax-icon-size: clamp(100px, 32vw, 140px);
	}

	.ccma-parallax-cover-text-wrapper {
		width: 100%;
		text-align: center;
	}
}

.ccma-parallax-cover .ccma-simple-svg-block {
	flex: 0 0 var(--ccma-parallax-icon-size);
	width: var(--ccma-parallax-icon-size);
	height: var(--ccma-parallax-icon-size);
}

.ccma-parallax-cover .ccma-simple-svg-block svg {
	width: 100%;
	height: 100%;
}


/*** ****/

@media (max-width: 781px) {
  .header-last-spacer {
    height: 24vh !important;
  }
  .header-first-spacer {
    height: 10vh !important;
  }

  main > .is-layout-constrained  {
    max-width: 90vw !important;
  }

  .ccma-territory-section__content .ccma-stat-pill {  
    flex-direction: column;
    align-items: start;
  }
  .composition-compteurs .compteurs-stats-row {
    gap: 0;
  }

  .mc4wp-form .mc4wp-form-fields input[type="email"] {
    width: 85vw;
    height: 45px;
  }
  .mc4wp-form .mc4wp-form-fields {
    gap: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .mc4wp-form .mc4wp-form-fields > p:last-child {
    margin: 0;
  }

  .composition-grille-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/**
 * Composition Image superposée + Panneau
 */

.ccma-composition-image-over-panel {
	--ccma-image-over-panel-radius: 15px;

	--ccma-image-over-panel-padding-block:
		clamp(
			var(--wp--preset--spacing--50),
			5vw,
			var(--wp--preset--spacing--80)
		);

	--ccma-image-over-panel-content-padding-block:
		clamp(2.5rem, 5vw, 5rem);

	--ccma-image-over-panel-content-padding-inline:
		clamp(1.5rem, 3vw, 3.5rem);

	padding-block:
		var(--ccma-image-over-panel-padding-block);

	overflow: clip;
}

/**
 * Grille principale.
 *
 * La classe is-style-ccma-width-large gère uniquement
 * la largeur globale de la composition.
 */
.ccma-image-over-panel__layout {
	display: grid !important;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	align-items: center;

	width: 100%;
	min-width: 0;

	margin-block: 0 !important;
	padding: 0 !important;

	isolation: isolate;
}

/**
 * Image.
 */
.ccma-image-over-panel__media {
	position: relative;
	z-index: 2;

	align-self: center;

	width: 100%;
	min-width: 0;
	max-width: none;

	margin: 0 !important;

	overflow: hidden;
	border-radius: var(--ccma-image-over-panel-radius);
}

.ccma-image-over-panel__media img {
	display: block;

	width: 100%;
	height: 100%;
	max-width: none;

	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

/**
 * Panneau de fond.
 */
.ccma-image-over-panel__panel {
	position: relative;
	z-index: 1;

	display: grid !important;
	grid-template-columns: repeat(10, minmax(0, 1fr));

	width: 100%;
	min-width: 0;

	border-radius: var(--ccma-image-over-panel-radius);
	overflow: hidden;
padding-top: clamp(2em, 15%, 8em) !important;
  padding-bottom: clamp(2em, 15%, 8em) !important;
}

/**
 * Contenu éditorial.
 */
.ccma-image-over-panel__content {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	min-width: 0;

	gap: var(--wp--preset--spacing--40);
/*
	padding-block:
		var(--ccma-image-over-panel-content-padding-block);

	padding-inline:
		var(--ccma-image-over-panel-content-padding-inline);*/
}

.ccma-image-over-panel__content > * {
	width: 100%;
	margin-block: 0;
}

.ccma-image-over-panel__content
.wp-block-heading {
	line-height: 1;
}

.ccma-image-over-panel__content p {
	line-height: 1.5;
}

/**
 * Lien final.
 */
.ccma-image-over-panel__link {
	margin-top: var(--wp--preset--spacing--20) !important;
}

.ccma-image-over-panel__link a {
	text-underline-offset: 0.2em;
}

/* ==========================================================
   VARIANTE IMAGE À GAUCHE
   ========================================================== */

.ccma-composition-image-over-panel--left
.ccma-image-over-panel__media {
	grid-column: 1 / 5;
	grid-row: 1;
}

.ccma-composition-image-over-panel--left
.ccma-image-over-panel__panel {
  margin-top: 0;
	grid-column: 3 / 11;
	grid-row: 1;
}

/*
 * Les trois premières colonnes internes du panneau
 * se trouvent sous l’image.
 */
.ccma-composition-image-over-panel--left
.ccma-image-over-panel__content {
	grid-column: 4 / 10;
}

/* ==========================================================
   VARIANTE IMAGE À DROITE
   ========================================================== */

.ccma-composition-image-over-panel--right
.ccma-image-over-panel__panel {
  margin-top: 0;
  grid-column: 1 / 9;
	grid-row: 1;
}

/*
 * Le contenu utilise les six premières colonnes internes.
 * Les trois dernières se trouvent sous l’image.
 */
.ccma-composition-image-over-panel--right
.ccma-image-over-panel__content {
	grid-column: 2 / 7;
}

.ccma-composition-image-over-panel--right
.ccma-image-over-panel__media {
	grid-column: 7 / 13;
	grid-row: 1;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 781px) {
	.ccma-composition-image-over-panel {
		--ccma-image-over-panel-content-padding-block:
			clamp(2rem, 7vw, 3rem);

		--ccma-image-over-panel-content-padding-inline:
			clamp(1.25rem, 6vw, 2rem);
	}

	.ccma-image-over-panel__layout {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.ccma-image-over-panel__media,
	.ccma-image-over-panel__panel {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	.ccma-image-over-panel__panel {
		grid-template-columns: minmax(0, 1fr);
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
	}

	.ccma-image-over-panel__content {
		grid-column: 1 !important;
	}

	/*
	 * L’image reste légèrement moins large que le panneau
	 * pour conserver l’effet de composition superposée.
	 */
	.ccma-image-over-panel__media {
		width: calc(100% - 2rem);
		justify-self: center;
	}

	/*
	 * Variante gauche :
	 * image au-dessus, panneau en dessous.
	 */
  .ccma-composition-image-over-panel--left .ccma-image-over-panel__media {
    order: 1;
    margin-bottom: -3.5rem !important;
  }

	.ccma-composition-image-over-panel--left
	.ccma-image-over-panel__panel {
		order: 2;
	}

	/*
	 * L’espace supérieur du panneau compense
	 * le léger chevauchement de l’image.
	 */
	.ccma-composition-image-over-panel--left
	.ccma-image-over-panel__content {
		padding-top:
			calc(
				var(--ccma-image-over-panel-content-padding-block)
				+ 1.5rem
			);
	}

	/*
	 * Variante droite :
	 * panneau au-dessus, image en dessous.
	 */
	.ccma-composition-image-over-panel--right
	.ccma-image-over-panel__panel {
		order: 1;
	}

	.ccma-composition-image-over-panel--right
	.ccma-image-over-panel__media {
		order: 2;
		margin-top: -3.5rem !important;
	}

	.ccma-composition-image-over-panel--right
	.ccma-image-over-panel__content {
		padding-bottom:
			calc(
				var(--ccma-image-over-panel-content-padding-block)
				+ 1.5rem
			);
	}
}

/**
 * Très petits écrans.
 */
@media (max-width: 480px) {
	.ccma-image-over-panel__media {
		width: 80%;
	}

	.ccma-image-over-panel__media img {
		aspect-ratio: 4 / 3;
	}

	.ccma-image-over-panel__content {
		gap: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 600px) {
  .ccma-appui-operationnel ul {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.composition-contact > div {
    display: grid;
    grid-template-columns: repeat(8,1fr);
}

.composition-contact > div > figure {
  grid-column: 1/3;
}

.composition-contact > div > div {
  grid-column: 3/8;
}


@media (max-width: 900px) {
  .composition-contact > div > figure {
    grid-column: 1/4;
  }

  .composition-contact > div > div {
    grid-column: 4/8;
  }
}

@media (max-width: 500px) {
  .composition-contact > div {
    display: flex;
    flex-direction: column;
  }

  .composition-contact > div > figure {
    width: 45vw;
  }
}