/* ----------- RESET + STABILISATION EDGE ----------- */
html, body {
    margin: 0;
    padding: 0;
    width: auto;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    color: #0A0C0E;
    scroll-behavior: smooth;
    line-height: 1.4em;
	background-color: #FFFFFF;
}
body {
    overflow-x: hidden;
    }

a {
    color: #152840;
    font-weight: 400;
    text-decoration: none;
}
a:hover {
    color: #FF5C34;
    font-weight: 400;
    text-decoration: none;
}
/* TITRES */
h1, h2, h3, h4, h5, H6 {
    font-weight: 700;
    margin-top: 0;
 
    text-transform: uppercase;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.4em;
}

strong, b {
    font-weight: 600;
		
	}

	em, i {
		font-style: italic;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
    border-top: 1px solid #1D3159;
	}

	blockquote {
    border-left: 1px solid #FF5C34;
    padding: 1em 0 1em 2em;
    font-style: italic;
		color: #3C4954
	}

	ul, ol, dl, table {
		margin-bottom: 1.5em;
		text-decoration: none; 
	}

	br.clear {
		clear: both;
	}

	.features {
		margin-bottom: 1.5em;
	}
row { padding: 50px;
	
}
	.feature {
		text-align: center;
	}
.left{
    align-content: stretch;
    margin-left: 40px;
    float: none;
    clear: none;
}
/* ----------- COLORS ----------- */

.bg1 {background-color: rgba(255,244,234,1.00);}
.bg2 {background-color: rgba(255,92,52,1.00);}
.bg3 {background-color: rgba(58,78,140,1.00);}
.bg4 {background-color: rgba(29,49,89,1.00);}
.bg5 {background-color: #0A0C0E;}
.color1 { color: rgba(10,12,14,1.00);}
.color2 { color: rgba(29,49,89,1.00);}
.color3 { color:rgba(58,78,140,1.00);}
.color4 { color: rgba(255,92,52,1.00);}
.color5 { color: #FFF4EA;}

.logo {  display: flex;
	height: 80px;
	width: auto;
  background-size: cover; 

}

.align-bottom{
	align-content: flex-end;
}
/* 
.bleu1 { background: #3a4961;
color: rgba(242,226,206,1.00);}
.bleu2 { background: #52637e; }
.bleu3 { background: #70819d; }*/

/* ----------- BOUTONS ----------- */
.button {
    -moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255,92,52,1.00);
    color: #FF5C34;
    border-radius: 0.35em;
    padding: 0.8em 2em 0.8em 2em;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 14px;
    width: 150px;
    text-align: center;
	text-decoration: none;
}


.button:hover {
    background-color:  rgba(255,92,52,0.50);
    color: #152840;
    border-color: 1px solid rgba(255,92,52,1.00);
}
.button2 {
     -moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255,92,52,1.00);
    color: #FF5C34;
    border-radius: 0.35em;
    padding: 0.8em 2em 0.8em 2em;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 14px;
    width: 150px;
    text-align: center;
	text-decoration: none;
}


.button2:hover {
	background: #FF5C34;
    border: 1px solid rgba(255,244,234,1.00);
    color: #FFF4EA;

}


/* =====================================================
   =============  MENU LATERAL (100% CSS)  =============
   ===================================================== */

.sidebar {
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.89);
    max-width: 100%;
    padding: 5px 5%;
    display: flex;
    align-items: center;
    z-index: 1000;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}



/* ------ BURGER ------ */
.burger {
    width: 50px;
    height: 30px;
    cursor: pointer;
    position: relative;
    display: block;
    z-index: 1100;
    margin-left: 20px;
}

.burger span,
.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 70%;
    background: #FF5C34;
    left: 0;
    transition: 0.3s ease;
}

.burger span {
    top: 50%;
    transform: translateY(-50%);
}

.burger span::before { top: -8px; }
.burger span::after { top: 8px; }

/* Checkbox non visible */
#toggle-menu {
    display: none;
}

/* ------ CROIX quand ouvert ------ */
#toggle-menu:checked + .burger span {
    background: #FFF4EA;
}

#toggle-menu:checked + .burger span::before {
    transform: rotate(45deg);
    top: 0;
	background-color: #FF5C34;
}

#toggle-menu:checked + .burger span::after {
    transform: rotate(-45deg);
    top: 0;
	background-color: #FF5C34;
}

/* ------ MENU ------ */
.menu-links {
    position: fixed;
    right: -80%;
    top: 0;
    width: 40%;
    height: 100vh;
    background: #FFF4EA;
    padding-top: 80px;
    list-style: none;
    margin: 0;
    transition: 0.3s ease;
    z-index: 1050;
}

.menu-links li {
 margin: 20px 30px;
cursor: pointer;
}

.menu-links a {
    text-decoration: none;
    color: #152840;
    font-size: 20px;
    transition: 0.2s ease;
}

.menu-links a:hover {
    color: #FF5C34; 
	padding : 5px;
	

}

/* ------ OUVERT ------ */
#toggle-menu:checked ~ .menu-links {
    right: 0;
}

/* ------ OVERLAY ------ */
.overlay {
    position: fixed;
    inset: 1;
    background: rgba(255,244,234,0.85);
	opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 1020;
  top: 0;
  left: 0;
  width: 100vw;          
  height: 100vh;          



}

#toggle-menu:checked ~ .overlay {
    opacity: 1;
    pointer-events: auto;
}


/* =====================================================
   ======================  HERO  ========================
   ===================================================== */
.image-wrapper {
  background-image: url(images/img-mo-1.jpg);
  background-size: cover; 
  background-repeat: no-repeat; 
  background-attachment: fixed;
  position: relative;
}
.text-hero {
    display : block;
    position: relative;
    text-align: left;
    padding: 8% 8%;
    max-width: 90%;
    border: solid 1px rgba(255, 255, 255, 0.25);
    border-radius: 0.5em;
    z-index: 1;
}
section{ padding-top: 2%;
	width: 100%;
	margin: 0 auto;

}
.col2{
    max-width: 80%;
margin: 0 auto;

}
/* Bouton contact aligné */
.overlay-button {
    position: absolute;
    bottom: 40px;
    left: calc(40% + 30px);  
}
.blur-layer {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.83); /* obligatoire : transparence */
	width: 100%;
	padding :2% 4%;
	
}
.hero-left-filter {
    padding: 20px 10px;
    background: rgba(255,92,52,0.4);
    width: 100%;
}
.left-filter {
	background: rgba(255,255,255,0.50);
    border: solid 1px rgba(255, 255, 255, 0.25);
    border-radius: 0.5em;
    padding: 1.75em 2.5em 1.75em 2.5em;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.text-hero2 {
    display : block;
    position: relative;
    text-align: left;
    width: 80%;
    border: solid 1px rgba(255, 255, 255, 0.25);
    border-radius: 0.5em;
    padding: 1.75em 2.5em 1.75em 2.5em;
 
}
/* Parallax sur desktop */
.parallax {
    will-change: transform;
}

@media (max-width: 900px) {
    .hero {
        background-attachment: scroll;
    }
	
}


/* =====================================================
   ====================  3 COLONNES  ====================
   ===================================================== */
.section-title{
	padding-top: 20px;
}
.center {
    text-align: center;
    display: block;
    padding-bottom: 5%;
    text-decoration: none;
}
.three-columns {
     display: flex;
    gap: 20px;
    padding: 20px 5%;
}

.three-columns .col {
    flex: 1;
   padding: 5%;
	border-radius: 4px;
}

/* =====================================================
   ====================  2 COLONNES  ====================
   ===================================================== */
.feature{
	    display: flex;
	padding:10%;
 
}
.two-columns {
    display: flex;
    gap: 20px;
    padding: 20px 5%;
}

.two-columns .col {
    flex: 1;
    padding: 20px;
    border-radius: 4px;
}


/* =====================================================
   ======================  PLAN  ========================
   ===================================================== */

.plan {
    width: 100%;
    height: 200px;
    background: #FF5C34;
    margin-top: 10px;
    border-radius: 4px;
}
footer{
    align-content: space-around;
    text-decoration: none;
    min-height: 30px;
    padding: 12px;
    text-align: center;
    background-color: #F2E2CE;
    font-size: 10pt;
}

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

@media(max-width: 700px) {
    .three-columns,
    .two-columns {
        flex-direction: column;
    }

    .overlay-button {
        left: 10px;
    }
	
	.text-hero {	 
	display : block;
	position: relative;
	text-align: left;
	margin-left: 5px;
	padding: 15px;
	max-width: 80%;
}
	section{ padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;}

}