/*
========================================================
  THEME : Digitale Expression (responsive optimisé)
========================================================
Theme Name: Digitale Expression
Theme URI: https://digitale.the-expression.ch
Author: The Expression
Author URI: https://digitale.the-expression.ch
Description: Votre agence digitale.
Version: 1.1
========================================================
*/

/* =====================================================
   1. IMPORTATION DES POLICES
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* =====================================================
   2. STYLES GENERAUX
===================================================== */

/* Reset de base */
*, html, border {
	border: none !important;

}
html {
		overflow-x: hidden !important;
}
body {
	font-family: 'Poppins', sans-serif;
	background: #F7F7F7;
	padding-top: 120px; /* espace en haut pour le header */
	overflow-x: hidden !important;
}

p {
	font-weight: 300;
	font-size: 14px;
	color:#302B2B;
	line-height: 1.6;
    letter-spacing: 0.7px;
}

main p a {
	color:#B11F25;
		position: relative;
	text-decoration: none;
	padding: 5px 0;
}

strong {
	font-weight: 600 !important;
}

/* Images & vidéos fluides */
img, video {
  max-width: 100%;
  height: auto;
}

/* Adaptation mobile/tablette */
@media (max-width: 992px) { 
	body {
		padding-top: 0px; /* header repositionné en mobile */
	}
}


/* =====================================================
   3. HEADER
===================================================== */

/* Structure principale */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	z-index: 999;
	transition: all 0.3s ease;
	border-bottom: 1px solid #eee;
	padding: 30px 85px;
}

/* Apparence quand on scroll */
.site-header.scrolled {
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid #eee;
}
.current-menu-item a{
	color:#B11F25 !important;
}

/* Conteneur */
.header-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.header-left,
.header-right {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Logo */
.site-logo img {
	max-height: 60px;
	width: auto;
	transition: all 0.3s ease;
}
.site-header.scrolled .site-logo img {
	max-height: 30px;
}

/* Menu principal */
.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.main-navigation ul li a {
	position: relative;
	text-decoration: none;
	color: #302B2B;
	font-weight: 400;
	padding: 5px 0;
	text-transform: uppercase;
}

/* Trait animé au hover */
.main-navigation ul li a::after,
main p a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: #B11F25;
	transition: width 0.3s ease;
}
.main-navigation ul li a:hover::after,
main p a:hover::after {
	width: 100%;
}
.main-navigation a:hover {
	color: #a81c1c;
}

/* Réseaux sociaux */
.header-socials {
	display: flex;
	gap: 15px;
	font-size: 18px;
	justify-content: flex-end;
}
.header-socials a:hover {
	color: #B11F25 !important;
}

/* Bouton burger (mobile) */
.menu-toggle {
	display: none !important;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 25px;
	cursor: pointer;
	z-index: 1000;
	flex-direction: column;
	justify-content: space-between;
}
.menu-toggle span {
	display: block;
	height: 3px;
	width: 100%;
	background: #222;
	border-radius: 2px;
	transition: all 0.4s ease;
}
/* Burger transformé en croix */
.menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Responsive Header - Tablette */
@media (max-width: 992px) {
	.header-container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0px;
	}
	.header-left,
	.header-right {
		flex-direction: column;
		align-items: center;
		gap: 0px;
		min-width: 250px;
	}
	.main-navigation ul {
		justify-content: center;
		gap: 0px;
	}
	.header-socials {
		display: none;
	}
}

/* Responsive Header - Mobile */
@media (max-width: 992px) {
	.site-header {
		padding: 15px 20px;
		position: relative;
	}
	.site-logo img {
		max-height: 45px;
	}
	/* Menu masqué par défaut */
	.main-navigation {
		top: 100%;
		left: 0;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease;
		text-align: center;
		background: transparent !important;
	}
	/* Menu ouvert */
	.main-navigation.active {
		max-height: 500px; 
	}
	.main-navigation ul {
		flex-direction: column;
		gap: 15px;
		padding: 15px 0;
	}
	/* Affichage burger */
	.menu-toggle {
		display: flex !important;
	}
}


/* =====================================================
   4. CONTENTS (Blocs / Covers)
===================================================== */
main {
  margin-top :100px;
}
.home main {
  margin-top :50px;
}
.main-inside{
	width:80%;
	max-width: 100%;
	margin :0 auto !important;
}

.headerTitle h1 {
	font-family: "georgia", sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	font-size: clamp(24px, 5vw, 50px);
}

.headerTitle p{
	color: #B11F25;
	text-transform: uppercase;
}

.block-home {
	border-radius: 15px;
}
.block-home .has-x-large-font-size,
.block-home .has-small-font-size {
	margin: 0;
}
.block-home .has-x-large-font-size,
main h2 {
	font-family: "georgia", sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	font-size: clamp(20px, 4vw, 35px);
}
.block-home .wp-block-cover__inner-container {
	position: relative;
	z-index: 0;
	margin: 0 0 30px 80px;
}
/* Cercle décoratif */
.block-home .wp-block-cover__inner-container:before{
	content:"";
	position: absolute;
	left:-50px;
	top:-18px;
	background: #AF1A29;
	height:100px;
	width: 100px;
	border-radius: 50%;
	z-index: -1;
}

.wp-block-cover.block-home, 
.wp-block-cover-image.block-home {
	align-items: flex-end !important;
	min-height: 400px !important;
}

.rangee-home {
	gap: 30px !important;
}

/* Lien cover */
a.cover-link-wrapper {
	color: #fff;
	text-decoration: none;
	display: contents !important;
}
.wp-block-cover.block-home {
	position: relative;
	color: inherit;
	text-decoration: none;
}
/* Overlay hover */
.wp-block-cover.block-home::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	transition: background 0.3s ease;
}
.wp-block-cover.block-home:hover::after {
	background: rgba(0,0,0,0.3); /* 30% noir */
}


body:not(.home) .has-large-font-size{
	font-size:25px !important;
	font-weight: 500;
}

body:not(.home) .has-medium-font-size {
	font-size:16px !important;
	font-weight: 400;
	color:#B11F25;
}

body:not(.home) .has-small-font-size {
	font-size:16px !important;
	font-weight: 300;
	color:#302B2B;
}

/* Elements */
blockquote {
	position: relative;
}
blockquote::before {
	content: "";
	position: absolute;
	top: 80px;
	left: calc(50% - 30px);
	width:60px;
	height: 1px;
	background: #000000;
}
blockquote p {
	font-size: clamp(18px, 4vw, 30px);
	font-family: "georgia", sans-serif;
	color:#302B2B;
	margin:0;
}
cite {
	color:#B11F25;
}

/* Vidéo avec ombre et fond décalé */
.video-wrapper {
  position: relative;
  z-index: 1;
  padding:80px 0;
}
.video-wrapper::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0px;
  bottom: -20px;
  background: url('img/bg-video-artdelaurore.png') no-repeat center/cover;
  filter: blur(8px);
  z-index: -1;
}
.video-wrapper iframe {
	width:100%;
	max-width:500px;
	height:auto;
	  	aspect-ratio: 16 / 9; 
}

:root :where(.wp-block-button .wp-block-button__link.is-style-outline), 
:root :where(.wp-block-button.is-style-outline>.wp-block-button__link) {
	border: 1px solid !important;
}

:root :where(.wp-block-button .wp-block-button__link.is-style-outline):hover, 
:root :where(.wp-block-button.is-style-outline>.wp-block-button__link):hover {
	color:#302B2B !important;
}

.videoinside video{
	margin-top:-100px;
	width: 100%;
  	aspect-ratio: 16 / 9; 
  	height: auto;
 	margin-bottom:80px;
}



 .field-group-type-textarea,
  .field-group-type-text,
  .field-group-type-email  {
 	margin-bottom:20px;
 }

 form.contactform{
 	margin:50px 0;
 }


/* Responsive Contents - Mobile */
@media (max-width: 992px) {

	.headerTitle {
		padding:0 20px;
	}

	.wp-block-cover.block-home, 
.wp-block-cover-image.block-home {
	align-items: flex-end !important;
	min-height: 300px !important;
}

.block-home .wp-block-cover__inner-container {
	position: relative;
	z-index: 0;
	margin: 0 0 30px 50px;
}
.main-inside {
	width:100%;
}
.wp-block-cover, .wp-block-cover-image {
	align-items: flex-end !important;
	min-height: 200px !important;
	}

	main {
	    margin-top: 50px;
	}


 .gutena-forms-contact-form .wp-block-gutena-field-group {
	     --wp--style--block-gap: 20px !important;
	}

	form.contactform{
	 	margin:0px 0;
	 }

}
/* =====================================================
   5. FOOTER
===================================================== */

.footer-red {
	background: #a81c1c;
	padding-top: 80px;
	position: relative;
	margin: 50px 20px 0 20px;
}

/* Bloc Instagram */
.footer-instagram {
	background: #fff;
	text-align: center;
	padding: 40px 20px;
	border-radius: 20px;
	width: 100%;
	max-width: 800px;
	margin: -160px auto 40px auto;
	box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.footer-instagram h2 {
	font-weight: bold;
	margin-bottom: 5px;
}

.footer-instagram p {
	color: #302B2B;
	margin-bottom: 20px;
}
.footer-instagram p a {
	color: #a81c1c;
	text-decoration: none;
}
.footer-instagram p a:hover {
	text-decoration: underline;
}
.instagram-feed {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.instagram-feed img {
	border-radius: 5px;
	max-width: 120px;
}


/* Widgets */
.footer-widgets {
	color: white;
	padding: 40px 20px;
	width: 100%;
	max-width: 1000px;
	margin: -30px auto -10px;
}
.footer-widgets p {
	color:#fff;	
}
.footer-widgets .container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	align-items: center;
}
.footer-widgets .footer-column {
	min-width: 0;
}
.footer-widgets a {
	color: white;
	text-decoration: none;
}
.footer-widgets a:hover {
	text-decoration: underline;
}
.footer-logo img {
	width: 100%;
	height: auto;
}

/* Bas de page */
.footer-bottom {
	text-align: center;
	padding: 15px;
	font-size: 14px;
}
.footer-bottom a {
	color: #a81c1c;
	text-decoration: none;
}
.footer-bottom a:hover {
	text-decoration: underline;
}

.footer-block img {
	width:90%;
	text-align: center;
}


/* =====================================================
   6. RESPONSIVE FOOTER
===================================================== */

/* Tablette */
@media (max-width: 1024px) {
	.footer-red {
		margin: 50px 0px 0 0px;
	}
	.footer-instagram,
	.footer-widgets {
		width: 90%;
	}
	.footer-widgets .container {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	.footer-instagram .wp-block-column:nth-child(n+2) {
		display: none;
	}
	.footer-widgets .container {
		grid-template-columns: 1fr;
		text-align: center;
		gap:0;
	}

	.footer-logo img {
		width: 70%;
		height: auto;
	}
	.footer-instagram {
		margin: 0px auto 30px auto;
		width: 75%;
		padding: 30px 15px;
	}

}
/* Mobile */
@media (max-width: 600px) {
	

	.instagram-feed img {
		max-width: 80px;
	}
	.footer-widgets {
		width: 95%;
		padding: 30px 15px;
	}

	.footer-logo img {
		margin: 0 auto;
	}
}


/* =====================================================
   7. OUTILS (classes utilitaires)
===================================================== */

.has-x-large-font-size {
	font-size: clamp(20px, 4vw, 30px) !important;
}
.mlr-50 { margin-left: 50px; margin-right: 50px; }
.mlr-80 { margin-left: 80px; margin-right: 80px; }
.mlr-100 { margin-left: 100px; margin-right: 100px; }
.mlr-150 { margin-left: 150px; margin-right: 150px; }
.mlr-200 { margin-left: 200px; margin-right: 200px; }
.mb-30 { margin-bottom:30px; }
.mb-50 { margin-bottom:50px; }
.mt-50 { margin-top:50px; }
.mr-50 { margin-right:50px !important; }

.mt-100 { margin-top:100px; }
.mb-100 { margin-bottom:100px; }

.pt-50 { padding-top: 50px }
.pb-50 { padding-bottom: 50px }

.pt-80 { padding-top: 80px }
.pb-80 { padding-bottom: 80px }

.pt-100 { padding-top: 100px }
.pb-100 { padding-bottom: 100px }

.pb-200 { padding-bottom: 200px }

.p-50 { padding:50px}
.plr-100 { padding-left: 100px; padding-right: 100px; }
.pl-100 { padding-left: 100px;}

.plr-160{ padding-left: 160px; padding-right: 160px; }

/* Marges utilitaires responsives */
@media (max-width: 1400px) {
  .mlr-50, .mlr-80, .mlr-100, .mlr-150, .mlr-200,
  .plr-100, .pl-100,.plr-160 {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mt-100 {
  	margin-top:50px;
  }

  .mb-100 { margin-bottom:50px; }
}


.linebeforewhite,
.linebeforeblack,
.linebeforeblackwithouttext{
	position: relative;
}

.linebeforewhite::before {
	content:"";
	position: absolute;
	width:100px;
	top:-50px;
	left:-150px;
	background: #fff;
	width:300px;
	height:1px;
}

.linebeforeblack::before {
	content:"";
	position: absolute;
	width:100px;
	top:-50px;
	right:-0px;
	background: #302B2B;
	width:250px;
	height:1px;
	z-index: 9;
}
.linebeforeblack::after{
	content:"A NOTRE PROPOS";
	font-family: 'Poppins', sans-serif;
	color:#B11F25;
	font-size:12px;
	text-align: center;
	position: absolute;
	top:-70px;
	right:-0px;
	z-index: 9;
}

.linebeforeblackwithouttext {
	margin-top:50px !important;
	margin-bottom:50px !important;
}

.linebeforeblackwithouttext::after {
	content:"";
	position: absolute;
	width:100px;
	bottom:-20px;
	left:-150px;
	background: #302B2B;
	width:250px;
	height:1px;
	z-index: 9;
}

.wp-block-list li {
	position: relative;
	margin:50px 0;
	list-style: none;
}

.wp-block-list li::before {
	content:"";
	position: absolute;
	top:-5px;
	left:-40px;
	width: 30px;
	height: 30px;
	background: #B11F25;
	border-radius: 50%;
}




.wp-block-list li strong {
	font-family: "georgia", sans-serif;
	font-weight: 800;
	font-size:20px;
}

/* Mobile */
@media (max-width: 1300px) {
	.linebeforewhite::after,
	.linebeforeblack::after,
	.linebeforewhite::before,
	.linebeforeblack::before,
	.linebeforeblackwithouttext::after {
		display: none;
	}
}


@media (max-width: 900px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 901px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
}