@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;600&display=swap');

@font-face {
    font-family: 'Galins';
	src: url('galins/galins.woff') format('woff');
	src: url("galins/galins.woff2") format("woff2"),
}

/* Header qui prend toute la hauteur de l'écran */
.header-video {
  position: relative;
  width: 100%;
  height: 100vh; /* 100% de la hauteur de l'écran */
  overflow: hidden;
}

/* Vidéo en fond qui couvre tout le header */
.header-video__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplissage complet sans déformation */
  transform: translate(-50%, -50%);
  z-index: -1; /* derrière le contenu */
}


/* par default */
/* roseraie */
.default header, .default #projet, .default #podcast, .default #interlude, .default #etape4, .default #etape7, .default footer {
	background-image:url(../images/bandeau/theme-roseraie-ordi.jpg)!important;
	background-position: center center;
}

/* bordeaux */
body.default, .default #menu_top, .default .g-recaptcha, .default .voirtout, .default input, .default textarea {
	background-color:#460618!important;
	}	

.default .realisation figcaption {
	background:  rgba(70,6,24,0.8)
}

/* vert */
.default #choice, .default #prestations, .default #etape1, .default #etape3, .default #etape6, .default #presse, .default #confiance, .default form input[type=submit] {
	background-color: #102B0C;
	}

@media handheld, only screen and (max-width: 990px), only screen and (max-device-width: 990px) {
	.default header, .default #projet, .default #podcast, .default #interlude, .default #etape4, .default #etape7, .default footer {
		background-image:url(../images/bandeau/theme-roseraie-mobile.jpg);
	}
}

html {
	height: 100%;
}

body {
	margin:0;
	padding:0;
	height: 100%;
	font-family: 'Comfortaa', sans-serif;
	font-weight: 300;
	color:#FFF;
	font-size:15px;	
	line-height:1.6em;
	letter-spacing:1.5px;	
	}

ul {
	margin:auto auto;
}

a {
	color:#FFF;
	text-decoration:none;
	}

.clear {
	clear:both;
	}

img {
	max-width:100%
	}

#projet, #podcast, #interlude, #etape4, #etape7, footer {
	background-size:cover;
	background-attachment: fixed;
}

#home header {
	background-size:cover;
	background-attachment: fixed;
	height:100%;
	display:flex;
	align-items: center;
    justify-content: center;
	}

#change {
	display: block;
	right:20px;
	top:20px;
	position: fixed;
	z-index: 100;
}

header .logo {
	display: none
	}
	
#home .logo, footer .logo { 
	display:flex;
	width: 40%;
	max-width:1400px;
	margin: 0 auto
}
	
.logo a:hover { 
	text-decoration: none;
}

#burger, .close {
	display: block;
	}

#bande {
	left: 0px;
    top: 0;
    height: 100%;
	padding: 20px 15px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: column;
	position: fixed;
	z-index: 999;
	width: 60px;
}

#burger {
}

#burger svg {
}

header #burger span {
	display: none;
}

#home #burger .menu {
	display: block;
	writing-mode: vertical-rl;
	text-orientation:upright;
}

#menu_top a, #burger .menu {
	font:normal 45px 'Galins', Serif;
	letter-spacing:0px;
}

.reseaux {
	margin-top: 40px;
	text-align: center
	}

#menu_top .reseaux svg {
	display: inline-block;
	padding: 5px
	}

#menu_top a:hover {
   text-decoration: underline;
	}

#menu_top .reseaux a:hover {
   text-decoration: none;
	}

.close {
	position: absolute;
	top: 15px;
	right: 15px;
	font: normal 45px 'Galins', Serif;
	font-size:30px!important;
}

.close:hover {
	text-decoration: none!important;
}

#cookie {
	height:80px
}

#choix {
	position:fixed;
    top:10px;
	right:10px;
	z-index: 1000;
}

#choice {
	width:200px;
	padding: 15px;
	height: 100%;
	position:fixed;
    top:0;
	right:0;
	text-align: center;
	z-index: 200;
	display: none;
	-webkit-animation: choice 0.5s 1; 
	animation: choice 0.5s 1;
	z-index: 1001;
	}

#choice h4 {
	margin-top: 40px
}

#choice figure {
	margin: 20px;
}

@-webkit-keyframes choice {
	0%   {right: -200px;}
	100% {right: 0px;}
}
@keyframes choice {
	0%   {right: -200px;}
	100% {right: 0px;}
}

#menu_top {
	width:100%;
	height: 100%;
	position:fixed;
    top:0;
	left:0;
	text-align: center;
	z-index: 200;
	display: none;
	-webkit-animation: menu 0.5s 1; 
	animation: menu 0.5s 1;
	}

@-webkit-keyframes menu {
	0%   {left: -100%;}
	100% {left: 0px;}
}
@keyframes menu {
	0%   {left: -100%;}
	100% {left: 0px;}
}
	
#menu_top ul {
	text-align: center;
	margin: 0 auto;
	width:80%;
	height: 80%;
	padding:10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
	}
	
#menu_top ul li {
	list-style-type: none;
	display: block;
	width: 100%;
	text-align: center;
	padding:20px 0;
	margin: 0;
	}

section, article, aside {
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	padding:100px 10%;
	padding-left: calc( 10% + 70px );
	}

.icone {
	text-align:center;
	display:block;
	font-size:30px;
	line-height:35px;
	width:30px;
	height:30px;
	padding:30px;
	margin:0 auto 20px auto;
	border-radius:80px;
	border:1px solid #000;
}

.icone svg {
  fill: currentColor;
  width: 30px;
  height: 30px;
  vertical-align: -0.05em;
}

.lien {
	display:inline-block;
	clear:both;
	margin:50px auto 20px auto;
	font-weight: bold;
	cursor: pointer;
	}

.lien {
	margin:20px auto 20px auto;
	}

.lien:hover {
	text-decoration: underline
}

h1, h2 {
	font:normal 60px 'Galins', Serif;
	letter-spacing:0px;
    padding:0;
    margin:0 0 50px 0;
	z-index: 100;
	position:relative
}
	
h3 {
	font-weight: bold;
	text-transform: uppercase;
	margin:10px 0;
	padding:10px 0;
	}

figure {
	margin:0;
	padding: 0;
	display: block;
}
	
.realisation {
	width: 31.33%;
    padding: 1%;
	float:left;	
	text-align:center;
	position:relative;
	display: flex;
    align-items: stretch;
	}
	
.realisation img {
	width:100%;
	height:100%;
	}
	
.realisation figcaption {
	margin-left: -100%;
	padding:10%;
	width: 100%;
    justify-content: center;
    flex-direction: column;
	display: none;
}
	
.realisation:hover figcaption {
	display: flex;
}

.responsive {
	width: 80%
	}

#apropos .introvideo ul {
	padding:0;
	margin: 0;
	list-style-type: none
}

#apropos .introvideo ul li {
	margin-bottom: 10px;
	
}

#prestations ul {
	list-style-type:none;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	padding: 0;
	}	

#prestations ul li {
	width: 27.33%;
    padding: 3%;
	text-align: center;
	}

#prestations ul li p {
	text-align: center;
	}

.photo {
	width: 65%;
	margin-right: -15%;
	margin-top:-250px;
}

.video {
	width: 45%;
	margin-top:-300px;
	line-height: 0;
}

#contact .video {
	width: 45%;
	margin-top:-250px;
	line-height: 0;
}

.photo, .video {
	float: right;
	text-align: right;
	z-index:1;;
	max-height:100vh;
}

.introphoto {
	width: 45%;
	float: left;
	text-align: left
}

.introvideo {
	width: 50%;
	float: left;
	text-align: left
}

.full {
	width:100%;
}

#etapes .legende {
	position: absolute;
	width: 280px;
	padding: 50px;
	font-size:12px;
	text-align: right;
	margin:-400px 0 0 -380px;
}

#etapes, #apropos, #creation, #etape2, #etape5, #contact {
	padding-bottom:0;
}

#etape1, #etape3, #etape6 {
	z-index: 1;
	position: relative
}

#interlude {
	padding: 250px 10%;
}
	
#presse {
	padding-bottom: 0;
	}

#compo .left {
	float: left;
	width: 80%;
	margin:5% 5% -10px -30%;	
}

#compo .right {
	width: 40%;
	float: left;
	text-align: center;
	padding-top: 10%;
}

#compo .right .sb, #compo2 .left .sb {
	width: 80px;
	margin-top:-80px;
}

.picto {
	width: 80px;
	margin-bottom: 20px
	}

#compo2 .left {
	float: left;
	width: 40%;
	text-align: center;
	padding: 10% 5% 0 15%;
}

#compo2 .right {
	float: right;
	width: 55%;
	margin-right: -15%;
	padding-top: 5%
}

#etape3 .logos {
	padding: 20px 0 0 0;
}

#etape3 .logos img {
	width: 48%;
    margin: 1%;
	float:left;	
}

#etape4, #etape7 {
	padding-top: 170px;
	padding-bottom: 200px;
}

#podcast {
	padding-top: 200px;
	padding-bottom: 200px;
}

#podcast .hajime {
	background-color: #222;
	padding:5%;
	display: flex;
	text-align: left;
    align-items: center;
}

#podcast .hajime .couv {
	max-width: 40%;
	padding-right: 5%;
}

form {
	max-width:600px;
	margin:20px 0;
	}

input, textarea {
	display:block;
	font-family: 'Comfortaa', sans-serif;
	font-size:15px;
	width:93%;
	padding:3%;
	margin:1% 0;
	border:1px solid #FFF!important;
	color:#FFF;
	letter-spacing: 2px;
	}

input::placeholder, textarea::placeholder {
	color:#FFF;
}

form input[type=submit] {
	font-family: 'Comfortaa', sans-serif;
	font-size:15px;
	width:100%;
	padding:3%;
	color:#FFF;
	letter-spacing: 2px;
	text-transform: uppercase;
	border:none!important;
	cursor: pointer;
	}

#contact form textarea {
	height: 150px;
}

.g-recaptcha {
	display:block;
	margin:1%;
	}

.erreur {
	color:#C00;
	border:1px solid #C00;
	width:94%;
	padding:3%;
	margin:1%;
	}

#avis article {
	margin-bottom: 30px;
	max-width:700px
	}

aside article, aside ul {
	padding:0;
	}

#confiance ul {
	list-style-type:none;
	max-width: 1000px;
	}

#confiance ul li {
	display:inline-block;
	width:22%;	
	margin:1%;
	}

#confiance ul li img {
	max-width:100%;
	}
	
footer {
	padding:10%;
	clear:both;
	position:relative;
	text-align:center;
	line-height: 2
	}

footer .reseaux {
	margin:0px;
	}

footer .reseaux a {
	display: inline-block;
	font-size: 25px;
	padding: 5px;
	}

footer #mentions {
	padding-top:20px;
	}

.g-recaptcha {
	color:#FFF!important;
}

.es-review-content-text {
	text-align: left;
	line-height: 1.8;
}

.eapps-widget-toolbar {
	display: none!important;
}

.voirtout {
	margin-left: -10%;
	width: 120%;
	position: relative;
	z-index: 100;
}