/*
Theme Name: Gutzilla
Theme URI: web-ia.com
Author: Boris Billy
Author URI: web-ia.com
Description: WEB IA starter theme
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Tested up to: 6.6
Requires PHP: 7.3
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gutzilla

Gutzilla WordPress Theme, (C) 2024 Boris Billy.
Gutzilla is distributed under the terms of the GNU GPL.
*/

/* CSS Reset
---------------------------------------------------------------------------- */

:root {
	--plyr-color-main: var(--wp--preset--color--primary);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
	padding: 0;
	margin: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

body#tinymce.wp-editor ol:where(:not([class*="wp-block"])),
body#tinymce.wp-editor ol:where(.wp-block-list),
body#tinymce.wp-editor ul:where(:not([class*="wp-block"])),
body#tinymce.wp-editor ul:where(.wp-block-list) {
	padding-left: 1em !important;
	padding-inline-start: 1.5em !important;
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

img,
figure {
	max-width: 100%;
	height: auto;
}

/* 
:root :where(.is-layout-constrained)>*,
:root :where(.editor-styles-wrapper) :where(.is-layout-constrained)>* {
	margin-block-start: 0;
} */

.acf-block-component {
	padding: 0 !important;
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

input:not([type="submit"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--main);
	border-radius: 5px;
	border: solid 1px var(--wp--preset--color--secondary);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
}

input:focus-visible,
textarea:focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.has-highlight-text,
.has-inline-color {
	color: var(--wp--preset--color--primary);
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

/* Helper styles that can't be done via theme.json
---------------------------------------------------------------------------- */

a.more-link {
	display: block;
}

/* Inline code */
*:not(.wp-block-code)>code {
	background-color: var(--wp--preset--color--secondary);
	font-weight: var(--wp--custom--font-weight--medium);
	;
	padding: 3px 5px;
	position: relative;
	border-radius: 3px;
}

/* Adjust terms at bottom of posts */
.single .wp-block-group .wp-block-post-terms,
.blog .wp-block-group .wp-block-post-terms {
	margin-bottom: -8px !important;
}

/* Remove margin on term description on archive pages */
.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Remove last separator on post list */
.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

/* Hide post meta div if no tags assigned */
.single .wp-block-group:has(> .post-meta:empty) {
	display: none;
}

.wp-block-group:empty:has(+ .comment-respond) {
	display: none;
}

.row-logos>figure {
	flex-shrink: 1 !important;
}

@media (max-width: 781px) {
	.gutzilla-hide-on-mobile {
		display: none;
	}
}

/* 1 - Header */
body {
	&.has-top-bar {
		position: relative;

		#header_bar,
		main.site-content {
			transition: all 300ms ease-in-out;
		}
	}
}

.js-close {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	margin: 0 auto;
	width: 100px;
	border: none;
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 0 0 6px 6px;
	color: #fff;
	transition: all 300ms ease-in-out;
	font-size: var(--wp--preset--font-size--small);

	&:hover {
		cursor: pointer;
		background-color: rgba(255, 255, 255, 0.35);
	}

	&.active {
		opacity: .4;

		&:hover {
			opacity: 1;
		}
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 5;

	#top_bar {
		.is-style-level3 {

			a {
				font-size: var(--wp--preset--font-size--x-small);
				color: inherit;
			}
		}
	}

	#header_bar .custom-logo {
		@media(width < 1400px) {
			max-height: 50px;
			width: auto;
		}
	}

	.header__navigation {
		.wp-block-navigation__container {
			margin: 0 auto;

			.current-menu-item {
				>a {
					color: var(--wp--preset--color--primary);
					text-decoration: none;
				}
			}
		}
	}
}

@media (width <=781px) {
	.site-header {
		.header__navigation {
			justify-content: flex-end;

			.wp-block-buttons {
				justify-content: flex-start;
			}
		}

		.header-buttons {
			display: none;
		}
	}
}

.wp-pagenavi {
	text-align: center;
	margin: 0 0 1em 0;

	.pages {
		display: none;
	}

	span,
	a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: .4em .8em;
		margin: .5em;
		font-size: var(--wp--preset--font-size--x-small);
		text-decoration: none;
		border: solid 1px var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--secondary);
		background: transparent;
		transition: all 300ms ease-in-out;
		border-radius: 50%;
		width: 40px;
		height: 40px;
	}

	.current {
		background: var(--wp--preset--color--main);
		border-color: var(--wp--preset--color--main);
		color: var(--wp--preset--color--white);
	}

	a:hover {
		background: var(--wp--preset--color--secondary);
		border-color: var(--wp--preset--color--secondary);
		color: #fff !important;
		text-decoration: none;
	}
}

/* Hero frontpage */

.hero-frontpage {
	.wp-block-post-featured-image {
		position: absolute;
		z-index: 1;
        left: -408px;
        top: 0;

		@media(width < 1200px) {
			left: -460px;
		}

		@media(width < 782px) {
			position: relative;
			left: -45%;
		}
	}

	@media(width < 782px) {
		.wp-block-post-featured-image + div {
			margin-top: 0;
			gap: 10px;
		}
	}
}

	.hero-frontpage__wrapper {
		padding: 70px 35px 57px;
		margin-top: -15px !important;
		margin-bottom: 240px !important;

		@media(width < 782px) {
			margin-bottom: 90px !important;
			padding: 25px 35px 57px !important;
		}
	}

	.hero-frontpage__logo img {
		width: 300px;
		height: auto;

		@media(width < 782px) {
			width: 200px;
		}
	}

	.hero-frontpage__intro {
		position: relative;
		z-index: 2;
	}
}

/* Fil d'ariane */

.hero-breadcrumb,
.hero-light-breadcrumb {
  border-bottom: 1px solid #DEE2E6;
  background: #F8F9FA;
  padding: 17px 0;
  margin-block-start: 30px !important;
  margin-block-end: 30px !important;

  #breadcrumbs {
    font-size: 14px;
    color: #6c757d;

    a {
      text-decoration: none;
      color: #495057;
      font-size: 16px;
      font-weight: 400;
      line-height: 25.6px;
    }

    .breadcrumb_last {
      text-decoration: none;
      color: #495057;
      font-size: 16px;
      font-weight: 400;
      line-height: 25.6px;
    }
  }
}

.hero-light-breadcrumb {
	background: none;
	max-width: var(--wp--style--global--wide-size, 1312px);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page d'accueil */

body.home {
	.cta-image {
		background-size: 575px !important;
		background-position: right center !important;
		background-repeat: no-repeat;
	}
}

/* Card defaut */

.card-default {
	border: none;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;

	.card-header {
		text-align: center;
		padding: 0;

		img {
			max-height: 250px;
			width: 100%;
			object-fit: cover;
			aspect-ratio: 4/3;
			margin: 0 auto;
		}
	}

	.card-body {
		padding: 0;
		flex: 1 1 auto;
	}

	.card-footer {
		padding: 0;
	}
}

/* Card icon */

.card-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 16px;

	.card-icon__header {

		.card-icon__image {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 64px;
			height: 64px;
			background: rgba(255, 107, 53, 0.10);
			border-radius: 50%;
	
			img {
				width: 32px;
				height: auto;
			}
		}
	}

	.card-icon__body {
		.card-icon__titre {
			color: #212529;
			font-size: 20px;
			font-weight: var(--wp--custom--font-weight--semi-bold);
			margin-bottom: 8px;
			margin-top: 0;
		}

		.card-icon__texte {
			p {
				color: var(--wp--preset--color--secondary-accent);
			}
		}
	}
}

/* Card icons standard */

.card-icons-standard {
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    padding: 33px;
    height: 100%;
    position: relative;
	background-color: var(--wp--preset--color--base);

    .card-icons-standard__image {
		width: 55px;
		height: 55px;
        border-radius: 13px;
        background-color: var(--wp--preset--color--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        img {
            width: 25px;
            height: auto;
        }
    }

    .card-icons-standard__titre {
        font-size: 20px;
        font-weight: var(--wp--custom--font-weight--semi-bold);
        margin-bottom: 12px;
    }

    .card-icons-standard__texte {
        font-size: 16px;
        color: #495057;
        line-height: 27px;
    }
}

/* Card icons badge */

.card-icons-badge {
	display: flex;
	align-items: flex-start;
    border: 1px solid #DEE2E6;
    border-radius: 16px;
    padding: 24px;
    height: 100%;

    .card-icons-badge__header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
		margin-right: 16px;
    }

	h3 {
		font-size: 17px;
	}

    .card-icons-badge__image {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: rgba(255, 107, 53, 0.10);
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 25px;
            height: auto;
        }
    }

    .card-icons-badge__check {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #00C950;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00C950;
        flex-shrink: 0;

        svg {
            width: 10px;
            height: 10px;
        }
    }

    h3.card-icons-badge__titre {
        font-size: 20px;
        font-weight: var(--wp--custom--font-weight--semi-bold);
        margin-bottom: 8px;
		margin-top: 0;
		color: #212529;
		line-height: 28px;
    }

    .card-icons-badge__texte {
        font-size: var(--wp--preset--font-size--base);
        color: #495057;
        line-height: 23px;
        margin-bottom: 0;
    }
}

/* Card ressource */

.card-ressource {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	border: 1px solid #DEE2E6;
	padding: 25px;
	gap: 20px;
}

.card-ressource__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-ressource__badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 50px;
	background: var(--wp--preset--color--primary);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	color: var(--wp--preset--color--base);
	font-size: 12px;
	line-height: 18px;
}

.card-ressource__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ADB5BD;
}

.card-ressource__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.card-ressource__titre {
	color: var(--wp--preset--color--main);
	font-weight: var(--wp--custom--font-weight--semi-bold);
	margin: 0;
	font-size: 18px;
	line-height: 27px;
}

.card-ressource__excerpt {
	color: #495057;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 22.75px;
}

.card-ressource__meta {
	display: flex;
	align-items: center;
	gap: 0;
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--regular);
	color: #6C757D;
	line-height: 18px;
}

.card-ressource__meta span + span {
	display: flex;
	align-items: center;
}

.card-ressource__meta span + span::before {
	content: '•';
	margin: 0 4px;
	color: #6C757D;
}

.card-ressource__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 14px;
	background: #E95B21;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	text-decoration: none;
	transition: background 0.2s ease;
}

.card-ressource__btn:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #FF6B35) 85%, black);
	color: #fff;
}

/* Card réalisation */

.card-realisation {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #E6E6E5;
    background: var(--wp--preset--color--base);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
    width: 100%;
    height: 100%;

	.card-realisation__image {
		flex-shrink: 0;
		width: 205px;
		padding: 12px 0 12px 12px;
		overflow: hidden;
	}
	
	.card-realisation__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		border-radius: 16px;
	}

	.card-realisation__image--defaut {
		background: #F8F9FA;
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 4 / 3;
	}

	.card-realisation__image--defaut img {
		width: 70%;
		height: auto;
		object-fit: contain;
		opacity: 0.3;
		filter: grayscale(1);
	}
	
	.card-realisation__body {
		padding: 12px 12px 12px 24px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 24px;
		flex: 1;
		min-width: 0;

		.card-realisation__body-wrapper {
			display: flex;
			flex-direction: column;
			row-gap: 4px;

			.card-realisation__type {
				color: var(--wp--preset--color--main);
				font-size: 24px;
				font-weight: 600;
				line-height: 140%;
			}
		
			.card-realisation__ville {
				display: inline-block;
				font-size: 12px;
				color: var(--wp--preset--color--primary);
				padding: 4px 8px;
				width: fit-content;
				border-radius: 8px;
				background: var(--wp--preset--color--primary-light);
			}
	
			.card-realisation__texte {
				color: var(--wp--preset--color--secondary-accent);
				font-size: 16px;
				font-weight: 400;
				line-height: 140%;
				margin-top: 8px;
				margin-bottom: 0;
			}
		}

		.card-realisation__lien {
			margin-top: auto;
			padding: 0 40px 0 0;
		}
	}
}

/* Card réalisation Verticale */

.card-realisation-verticale {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	border: 1px solid #DEE2E6;
	overflow: hidden;
	
	.card-realisation-verticale__image {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		max-height: 294px;
	}

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

	.card-realisation-verticale__body {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 24px;
	}

	.card-realisation-verticale__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}

	.card-realisation-verticale__titre {
		color: #212529;
		font-size: 20px;
		font-weight: var(--wp--custom--font-weight--semi-bold);
		line-height: 28px;
		margin: 0;
	}

	.card-realisation-verticale__icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		position: relative;
		z-index: 1;
	}

	.card-realisation-verticale__ville {
		font-size: var(--wp--preset--font-size--base);
		font-weight: var(--wp--custom--font-weight--regular);
		color: #495057;
		line-height: 25.6px;
	}

	.card-realisation-verticale__type {
		display: inline-block;
		padding: 4px 12px;
		border-radius: 20px;
		background: rgba(255, 107, 53, 0.10);
		color: #FF6B35;
		font-size: var(--wp--preset--font-size--base);
		font-weight: var(--wp--custom--font-weight--regular);
		align-self: flex-start;
	}

	.card-realisation-verticale__stretched-link {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
}

.card-realisation-verticale--archive {
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0.87px 2.609px 0 rgba(0, 0, 0, 0.10), 0 0.87px 1.739px -0.87px rgba(0, 0, 0, 0.10);

	.card-realisation-verticale__image--defaut {
		background: #F8F9FA;
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 4 / 3;
	}

	.card-realisation-verticale__image--defaut img {
		width: 50%;
		height: auto;
		object-fit: contain;
		opacity: 0.3;
		filter: grayscale(1);
	}
	
	.card-realisation-verticale__tag-annee {
		position: absolute;
		right: 13px;
		top: 13px;
		padding: 3px 10px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.90);
		box-shadow: 0 0.87px 2.609px 0 rgba(0, 0, 0, 0.10), 0 0.87px 1.739px -0.87px rgba(0, 0, 0, 0.10);
		color: var(--wp--preset--color--main);
		font-size: 10px;
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: 13.912px;
	}

	.card-realisation-verticale__type {
		display: inline-block;
		padding: 4px 7px;
		background: #FFF0EB;
		color: #FF6B35;
		font-size: 11px;
		font-weight: var(--wp--custom--font-weight--bold);
		align-self: flex-start;
		line-height: 13.912px;
		letter-spacing: 0.522px;
		text-transform: uppercase;
	}

	.card-realisation-verticale__ville-content {
		display: flex;
		align-items: center;
		gap: 4px;

		.card-realisation-verticale__ville {
			font-size: 11px;
			color: #99A1AF;
			line-height: 13.912px;
		}
	}

	.card-realisation-verticale__body {
		flex: 1
	}

	.card-realisation-verticale__titre {
		font-size: 18px;
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: 24px;
	}

	.card-realisation-verticale__lien {
		color: var(--wp--preset--color--primary);
		font-size: 12px;
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: 17px;
		text-decoration: none;
        display: flex;
        justify-content: flex-end;
        padding: 9px 0 0;
        border-top: 1px solid #F3F4F6;
        margin-top: auto;
	}
}

/* Card réalisation Featured */

.card-realisation-featured {
	margin-bottom: 41px;
 
	.card-realisation-featured__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		overflow: hidden;
		border-radius: 20px;
		border: 1px solid #E9ECEF;
		background: var(--wp--preset--color--base);
		box-shadow: 0 8.695px 13.043px -2.609px rgba(0, 0, 0, 0.10), 0 3.478px 5.217px -3.478px rgba(0, 0, 0, 0.10);
		
		@media (max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}
 
	.card-realisation-featured__image {
		position: relative;
		overflow: hidden;
 
		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}
 
	.card-realisation-featured__badge {
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 1;
		display: inline-block;
		padding: 7px 14px;
		border-radius: 20px;
		font-size: 13px;
		color: var(--wp--preset--color--base);
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: 17.39px;
		background: var(--wp--preset--color--primary);
		box-shadow: 0 3.478px 5.217px -0.87px rgba(0, 0, 0, 0.10), 0 1.739px 3.478px -1.739px rgba(0, 0, 0, 0.10);
	}
 
	.card-realisation-featured__content {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 30px 40px;
	}
 
	.card-realisation-featured__meta {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
	}
 
	.card-realisation-featured__type {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 20px;
		background: #FFF0EB;
		color: #FF6B35;
		line-height: 17.39px;
		font-size: 13px;
		font-weight: var(--wp--custom--font-weight--bold);
	}
 
	.card-realisation-featured__ville {
		display: inline-flex;
		gap: 2px;
		padding: 4px 10px;
		align-items: center;
		font-size: 13px;
		border-radius: 20px;
		color: #4A5565;
		font-weight: var(--wp--custom--font-weight--regular);
		line-height: 17.39px;
		background: #F3F4F6;
	}
 
	.card-realisation-featured__titre {
		font-weight: var(--wp--custom--font-weight--bold);
		margin: 0;
		color: #212529;
		font-size: 32px;
		line-height: 35px;
	}

	.card-realisation-featured__excerpt {
		color: #495057;
		font-size: 14px;
		font-weight: var(--wp--custom--font-weight--regular);
		line-height: 22.607px;
		margin: 0;
	}
 
	.card-realisation-featured__produit {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
 
	.card-realisation-featured__lien {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 12px 24px;
		border-radius: 10px;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
		color: #FFF;
		font-size: 13.912px;
		font-weight: var(--wp--custom--font-weight--bold);
		line-height: 20.868px;
		text-decoration: none;
		align-self: flex-start;
		transition: background 0.2s ease;
		margin-top: 5px;
		box-shadow: 0 3.478px 13.912px 0 rgba(233, 91, 33, 0.24);
 
		&:hover {
			background: color-mix(in srgb, var(--wp--preset--color--primary, #FF6B35) 85%, black);
			color: var(--wp--preset--color--base);
		}
	}
}

/* Card produit horizontal */

.card-produit-horizontal {
	display: flex;
	flex-direction: row;
	gap: 24px;
	padding: 20px;
	position: relative;
	transition: box-shadow 0.2s ease;
	border-radius: 16px;
	border: 1px solid #E6E6E5;
	background: var(--wp--preset--color--base);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);

	.card-produit-horizontal__image {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 0 0 200px;
		width: 200px;
		height: 200px;
		align-self: flex-start;
		border-radius: 20px;
		background-color: #F4F4F4;

		img {
			max-width: 180px;
            height: auto;
            max-height: 100%;
            display: block;
            border-radius: 20px;
		}

		@media (max-width: 575px) {
			flex: 0 0 100px;
			width: 100px;
		}
	}

	.card-produit-horizontal__body {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.card-produit-horizontal__titre {
		color: var(--wp--preset--color--main);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--medium);
		line-height: 140%;
		margin: 0 0 8px;
	}

	.card-produit-horizontal__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 8px;

		.badge {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4px 8px;
			border-radius: 8px;
			background: #FBEDE7;
			color: var(--wp--preset--color--primary);
			font-size: 12px;
			font-weight: var(--wp--custom--font-weight--light);
			line-height: 16px;
		}
	}

	.card-produit-horizontal__excerpt {
		color: #5A5A68;
		font-size: var(--wp--preset--font-size--base);
		font-weight: var(--wp--custom--font-weight--light);
		line-height: 140%;
		margin: 0 0 8px;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.card-produit-horizontal__lien {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--wp--preset--color--primary);
		text-decoration: none;
		margin-top: auto;
	}
}

/* Card produit vertical */

.card-produit-vertical {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	overflow: hidden;
	height: 100%;
	border-radius: 16px;
	border: 1px solid #E5E7EB;

	.card-produit-vertical__image {
		background: #F3F4F6;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px;

		img {
			width: 100%;
			height: 220px;
			object-fit: contain;
			display: block;
		}
	}

	.card-produit-vertical__body {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 24px;
	}

	.card-produit-vertical__titre {
		font-size: 1.1rem;
		font-weight: 700;
		margin: 0;
	}

	.card-produit-vertical__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 8px;

		.badge {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4px 8px;
			border-radius: 8px;
			background: #FBEDE7;
			color: var(--wp--preset--color--primary);
			font-size: 12px;
			font-weight: var(--wp--custom--font-weight--light);
			line-height: 16px;
		}
	}

	.card-produit-vertical__excerpt {
		font-size: 14px;
		color: #5A5A68;
		line-height: 20px;
		margin: 0 0 2px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.btn--primary {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 20px;
		border-radius: 12px;
		background: var(--wp--preset--color--primary);
		color: #fff;
		font-size: 1rem;
		font-weight: var(--wp--custom--font-weight--bold);
		text-decoration: none;
		margin-top: auto;
		line-height: 24px;
	}
}

/* Card témoignage */

.card-temoignage {
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
	padding: 32px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	background: var(--wp--preset--color--base);
	height: 100%;

	.card-temoignage__barre {
		width: 48px;
		height: 4px;
		background: var(--wp--preset--color--primary);
		margin-bottom: 22px;
	}

	.card-temoignage__contenu {
		margin-bottom: 26px;

		p {
			margin: 0;
		}
	}

	.card-footer {
		margin-top: auto;
		border-top: 1px solid #E5E7EB;
		padding-top: 17px;

		.card-temoignage__nom {
			font-size: 1rem;
			margin-bottom: 4px;
			margin-top: 0;
			color: #101828;
		}

		.card-temoignage__poste {
			font-size: 1rem;
			margin-bottom: 4px;
			margin-top: 0;
			color: rgba(74, 85, 101, 1);
		}

		.card-temoignage__entreprise {
			color: var(--wp--preset--color--primary);
			margin-top: 0;
			margin-bottom: 0;
		}
	}
}

/* Card actu */

.card-actu {
	border: solid 1px var(--wp--preset--color--secondary);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;

	.card-header {
		text-align: center;
		padding: 0;

		img {
			max-height: 250px;
			width: 100%;
			margin: 0 auto;
			text-align: center;
			object-fit: cover;
		}
	}

	.card-body {
		padding: 0 1.5em 1em;
		flex: 1 1 auto;

		.card-actu__texte {
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			overflow: hidden;
		}
	}

	.card-footer {
		background-color: var(--wp--preset--color--secondary);
		padding: 1em 1.5em;
	}
}

/* card maillage */

.card-maillage {
	position: relative;
	aspect-ratio: 1/1;
	width: 280px;
	height: 280px;
	background-color: var(--wp--preset--color--secondary);
	overflow: hidden;
	border: none;
	padding: 0;

	@media(width < 991px) {
		width: 100%;
		height: auto;
	}

	.card-body {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 172, 102, 0.6);

		a {
			color: #fff;
			align-items: center;
			font-family: var(--wp--preset--font-family--secondary);
			font-size: 1.3125rem;
			font-weight: 400;
			padding: 0;

			span {
				align-items: center;

				&:before {
					display: none;
				}
			}
		}
	}

	.card-bg {
		position: absolute;
		z-index: 0;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			height: 100%;
			object-fit: cover;
			transition: all 300ms ease-in-out;

			@media(width < 991px) {
				aspect-ratio: 1/1;
			}
		}
	}

	&:hover {
		.card-bg {
			img {
				scale: 1.05;
			}
		}

	}
}

/* card big card */
.card-secondaire {
	border: none;
	padding: 0;
	min-width: none;
	max-width: none;
	min-height: 483px;
	height: 100%;
	background-color: var(--wp--preset--color--secondary);
	background-position: center;
	background-repeat: no-repeat;
	transition: all 300ms ease-in-out;
	position: relative;
	overflow: hidden;

	@media(width < 767px) {
		min-height: 242px;
		background-size: cover;
	}

	.card-secondaire__wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background: linear-gradient(360deg, #1E2034 0%, rgba(30, 32, 52, 0) 54.66%);
		padding: 50px 50px 46px;
		height: 100%;
		position: relative;
		z-index: 1;

		@media(width < 767px) {
			padding: 20px 20px 30px;
			background: linear-gradient(360deg, #1E2034 0%, rgba(30, 32, 52, 0) 68%);
		}

		.card-body {
			color: #fff;
			text-align: center;
			flex: auto 0 0;
		}
	}

	.card-secondaire__titre {
		color: #fff;
		font-size: 1.6875rem;
		margin: 0;
		font-weight: var(--wp--custom--font-weight--light);

		a {
			color: #fff;
			text-decoration: none;

			&:hover {
				text-decoration: none;
			}
		}
	}

	.card-secondaire__texte {
		margin: 0;
		line-height: var(--wp--custom--line-height--snug);

		@media(width < 767px) {
			display: none;
		}
	}

	.card-footer {
		padding: 14px 0 0;
		z-index: 1;
	}

	.card-secondaire__image {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			transition: all 300ms ease-in-out;

		}
	}

	&:hover {
		.card-secondaire__image {
			img {
				transform: scale(1.05);
			}
		}
	}
}

/* card trombinoscope */
.card-trombinoscope {
	border-radius: 5px;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--wp--preset--color--primary);

	.card-header {
		text-align: center;
		padding: 1.25rem 1.25rem 0;

		img {
			height: 300px;
			aspect-ratio: 1/1;
			width: auto;
			margin: 0 auto;
			text-align: center;
			border-radius: 3px;
			object-fit: cover;
		}
	}

	.card-body {
		display: flex;
		flex-direction: row;
		padding: 1.5625rem 1.25rem 1.25rem;

		.card-trombinoscope__infos {
			flex: 1 1 auto;
		}

		.card-trombinoscope__links {
			flex: 0 0 auto;
			display: flex;
			align-items: center;

			a {
				font-size: 1.5rem;
				transition: all 300ms ease-in-out;

				&:hover {
					color: var(--wp--preset--color--primary);
				}
			}
		}

		.card-trombinoscope__nom {
			font-size: 1.25rem;
			margin: 0;
		}

		.card-trombinoscope__poste {
			font-weight: var(--wp--custom--font-weight--light);
			font-size: 1.125rem;
		}
	}

	.card-footer {
		display: flex;
		flex: 1 1 auto;
		padding: 0;
	}
}

/* Menu liste */
.menu__list {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		margin: 5px 0;

		a {
			text-decoration: none;

			&:hover {
				color: var(--wp--preset--color--primary);
			}
		}
	}
}

/* Utilities */

.btn-link {
	font-weight: bold;
	text-decoration: underline;
}

.wp-block-button__link {
	width: auto;
}

.stretched-link {
	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		top: 0;
	}

}

.text-center {
	text-align: center;
}

.buttons {
	display: flex;
	gap: 30px;
}

.more-content {
	position: relative;

	p:empty {
		display: none;
	}

	/* &:not(.open) {
		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100px;
			background: rgb(255, 255, 255);
			background: linear-gradient(0deg,
					rgba(255, 255, 255, 1) 0%,
					rgba(255, 255, 255, 0) 100%);
		}
	} */
}

.link.open {
	display: none;
}

.read-more-content {
	overflow: hidden;
	height: 0;
	transition: height 200ms ease-in-out;



	&.open {
		height: 100%;
		transition: height 200ms ease-in-out;
	}
}

/**************/

.modal {
	.close {
		position: absolute;
		top: 15px;
		right: 15px;
	}

	.modal-header {
		padding: 40px 50px 0 50px;
		border: none;

		@media(width < 765px) {
			padding: 15px;
		}

		.modal-title {
			position: relative;
			font-weight: 800;
			font-size: var(--wp--preset--font-size--large);
			font-family: var(--wp--preset--font-family--primary);
			color: var(--wp--preset--color--primary);
		}
	}

	.modal-body {
		padding: 15px 50px 40px 50px;

		@media(width < 765px) {
			padding: 15px;
		}
	}
}

/* CTA global */

.global-cta {
  background-color: var(--wp--preset--color--primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 20px;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 29, 32, 0.64) 0%, rgba(52, 58, 64, 0.64) 100%);
  }

  .global-cta__wrapper {
    position: relative;
    z-index: 1;
    padding: var(--wp--preset--spacing--x-large);
    margin: 0 auto 0 0;
    max-width: 70%;
    padding: 150px 0;

    @media(width < 768px) {
      max-width: inherit;
      padding: var(--wp--preset--spacing--medium);
    }
  }

  .global-cta__titre {
    color: var(--wp--preset--color--base);
    margin: 0 0 20px 0;
    font-weight: 700;
    line-height: 57.6px;
    letter-spacing: -0.96px;

	@media(width < 768px) {
      line-height: 36px;
    }
  }

  .global-cta__texte {
    margin: 2em 0;
    color: var(--wp--preset--color--base);
  }

  .global-cta__liens {
    justify-content: center;
  }

  &.alignfull {
    border-radius: 0;

    .global-cta__wrapper {
      max-width: 60%;
      margin: 0 auto;
      text-align: center;

      @media(width < 768px) {
        max-width: inherit;
        padding: var(--wp--preset--spacing--medium);
      }
    }
  }


  &:not(.alignfull):not(.alignwide) {
    .global-cta__wrapper {
      max-width: inherit;
      padding: var(--wp--preset--spacing--medium);
    }
  }

  &.is-style-centre {
    text-align: center;

    .global-cta__wrapper {
      margin: 0 auto;
    }
  }

  &.has-background {
    &::after {
      display: none;
    }

  }

  &.has-text-color {
    .is-style-outline {
      border-color: inherit;
      color: inherit;

      &:hover {
        border-color: var(--wp--preset--color--main);
        color: var(--wp--preset--color--main);
      }
    }
  }
}

/* Ressources Double CTA */

.is-double-cta {
	.wp-block-button a {
		box-shadow: 0 4px 16px 0 rgba(233, 91, 33, 0.24);
	}

	.wp-block-button.is-style-brown {
		margin-top: 0;
	}

	.wp-block-button.is-style-brown a {
		font-weight: var(--wp--custom--font-weight--semi-bold);
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
		background-color: var(--wp--preset--color--base);
	}
}

/* Contact */

.item-coordonnee {
	width: 100%;
	border-radius: 12px;
	border: 1px solid rgba(75, 38, 45, 0.10);
	background: var(--wp--preset--color--base);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
	padding: 25px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Page mot de passe */

.post-password-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 60px 0;
}

.post-password-form-wrapper .post-password-form label {
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary-accent);
    margin-bottom: 4px; /* était trop grand */
}

.post-password-form-wrapper .pw-left p {
    color: var(--wp--preset--color--secondary-accent);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.7;
}

.post-password-form-wrapper .post-password-form p:first-child {
    display: none;
}

.post-password-form-wrapper .post-password-form label {
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--secondary-accent);
    margin-bottom: 8px;
}

.post-password-form-wrapper .post-password-form input[type="password"] {
    width: 100%;
    margin-bottom: 16px;
    max-width: 420px; /* limite la largeur */
}

.post-password-form-wrapper .post-password-form input[type="submit"] {
    width: 100%;
    max-width: 420px; /* idem */
    padding: 13px 20px;
    border-radius: 10px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border: none;
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--font-weight--semi-bold);
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 4px 16px 0 rgba(233, 91, 33, 0.24);
}

.post-password-form-wrapper .post-password-form input[type="submit"]:hover {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 85%, black);
}

.post-password-form br {
    display: none;
}

.post-password-form-wrapper p:empty {
    display: none;
}

@media (max-width: 781px) {
    .post-password-form-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0;
    }
}