@charset "utf-8";
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::    STUDIO PUBLINOVES     :::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



/* ========================================================= */
/* ========================= BODY ========================== */
/* ========================================================= */

html, body {
	height: 100%;
	color: #000;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--theme-police);
color: var(--theme-noir);
background-color: var(--theme-blanc);
}

strong{
font-size: 20px;
font-weight: 700;
}

/* ========================================================= */
/* ================= VARIABLES GLOBALES ==================== */
/* ========================================================= */

:root {

--theme-police: 'Roboto', sans-serif;
--theme-noir: #111111;
--theme-blanc: #ffffff;
--theme-beige: #dbc5a7;
--theme-bleu: #4e96a5;	

}


main {margin-bottom: 50px;}

h1,
h2,
p {
margin-top: 0;
}


* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.padding-top-40px{
	display: block;
	width:100%;
	padding-top:40px; 
	position: relative;
}


/* ========================================================= */
/* ================= ELEMENTS GENERAUX ===================== */
/* ========================================================= */





/*  ------------------------------- MAIN - Titre-Principal  */


.titre-principal {
margin-top: 0;
margin-bottom: 20px;
font-size: inherit;
font-weight: inherit;
line-height: 1;
}


/*   ------------------------------- MAIN - Titre-Principal-Ligne-1  */

.titre-principal-ligne-1 {
display: block;
margin-bottom: 20px;
font-size: 21px;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
color: #5b9cad;
}

@media screen and (max-width: 1100px) {
.titre-principal-ligne-1 {
font-size: 20px;
}
}

@media screen and (max-width: 900px) {
.titre-principal-ligne-1 {
font-size: 19px;
}
}

@media screen and (max-width: 700px) {
.titre-principal-ligne-1 {
margin-bottom: 6px;
font-size: 17px;
}
}


.titre-principal-ligne-1-beige {
display: block;
margin-bottom: 20px;
font-size: 21px;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
color: #dbc5a7;
}

@media screen and (max-width: 1100px) {
.titre-principal-ligne-1-beige {
font-size: 20px;
}
}

@media screen and (max-width: 900px) {
.titre-principal-ligne-1-beige {
font-size: 19px;
}
}

@media screen and (max-width: 700px) {
.titre-principal-ligne-1-beige {
margin-bottom: 6px;
font-size: 17px;
}
}


/*  ------------------------------- MAIN - Sous-Titre-Principal  */

.sous-titre-principal {
display: block;
margin-bottom: 20px;
font-size: 38px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
color: var(--theme-noir);
}

@media screen and (max-width: 1100px) {
.sous-titre-principal {
font-size: 34px;
}
}

@media screen and (max-width: 900px) {
.sous-titre-principal {
font-size: 30px;
}
}

@media screen and (max-width: 700px) {
.sous-titre-principal {
margin-bottom: 17px;
font-size: 27px;
line-height: 1.1;
}
}

/*  ------------------------------- MAIN - Sous-Titre-2  */

.sous-titre-2 {
display: block;
margin-bottom: 20px;
font-size: 33px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
color: var(--theme-beige);
}

@media screen and (max-width: 1100px) {
.sous-titre-2 {
font-size: 30px;
}
}

@media screen and (max-width: 900px) {
.sous-titre-2 {
font-size: 26px;
}
}

@media screen and (max-width: 700px) {
.sous-titre-2 {
margin-bottom: 17px;
font-size: 23px;
line-height: 1.1;
}
}



/*  ------------------------------- MAIN - Paragraphe-Principal  */

.paragraphe-principal {
margin-bottom: 35px;
font-size: 17px;
font-weight: 400;
line-height: 1.4;
color: #666666;
}

@media screen and (max-width: 1100px) {
.paragraphe-principal {
font-size: 16px;
}
}

@media screen and (max-width: 700px) {
.paragraphe-principal {
margin-bottom: 28px;
font-size: 15px;
line-height: 1.6;
}
}


/* ========================================================= */
/* ====================     BOUTONS   ====================== */
/* ========================================================= */


/*  ------------------------------- MAIN - Bouton-Texte-Bleu  */

.bouton-texte-bleu {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #5b9cad;
transition: 0.3s ease;
}

.bouton-texte-bleu img {
width: 10px;
height: auto;
transition: 0.3s ease;
}

@media screen and (max-width: 700px) {
.bouton-texte-bleu img {
width: 8px;
}
}

.bouton-texte-bleu:hover {
opacity: 0.7;
}

.bouton-texte-bleu:hover img {
transform: translateX(4px);
}

@media screen and (max-width: 700px) {
.bouton-texte-bleu {
font-size: 18px;
gap: 10px;
}
}
/*  ------------------------------- MAIN - Bouton-Blanc-Arrondi  */

.bouton-blanc-arrondi {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 34px;
border-radius: 50px;
background: var(--theme-blanc);
color: var(--theme-noir);
font-size: 17px;
font-weight: 500;
text-decoration: none;
transition: 0.3s ease;
}

.bouton-blanc-arrondi:hover {
background: var(--theme-bleu);
color: var(--theme-blanc);
}

@media screen and (max-width: 700px) {
.bouton-blanc-arrondi {
padding: 11px 28px;
font-size: 16px;
}
}

/*  ------------------------------- MAIN - Bouton-Bleu-Arrondi */

.bouton-bleu-arrondi {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 34px;
border-radius: 50px;
background: var(--theme-bleu);
color: var(--theme-blanc);
font-size: 17px;
font-weight: 500;
text-decoration: none;
transition: 0.3s ease;
}

.bouton-bleu-arrondi:hover {
background: var(--theme-noir);
color: var(--theme-blanc);
}

@media screen and (max-width: 700px) {
.bouton-bleu-arrondi {
padding: 11px 28px;
font-size: 16px;
}
}


/* ========================================================= */
/* ====================== HAUT PAGE ======================== */
/* ========================================================= */

/* ------------------------------- MAIN - Haut-Page */

.haut-page {
display: grid;
grid-template-columns: 32% 68%;
width: 100%;
height: 650px;
min-height: 250px;
}

@media screen and (max-width: 1100px) {

.haut-page {
grid-template-columns: 36% 64%;
height: 460px;
}
} 

@media screen and (max-width: 900px) {
.haut-page {
grid-template-columns: 38% 62%;
height: 340px;
min-height: 240px;
}
}

@media screen and (max-width: 700px) {
.haut-page {
grid-template-columns: 1fr;
height: auto;
min-height: 0;
}
}

/* ------------------------------- MAIN - Haut-Page-Texte */

.haut-page-texte {
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--theme-noir);
color: var(--theme-blanc);
padding-top: 40px;
padding-right: 10%;
padding-bottom: 40px;
padding-left: 18%;
}

@media screen and (max-width: 900px) {

.haut-page-texte {
padding-top: 35px;
padding-right: 8%;
padding-bottom: 35px;
padding-left: 8%;
}

}

@media screen and (max-width: 700px) {

.haut-page-texte {
order: 2;
padding-top: 35px;
padding-right: 8%;
padding-bottom: 35px;
padding-left: 8%;
}

}

/* ------------------------------- MAIN - Haut-Page-Titre */

.haut-page-texte h1 {
margin-bottom: 22px;
font-size: 28px;
font-weight: 700;
line-height: 1.1;
}

@media screen and (max-width: 900px) {

.haut-page-texte h1 {
font-size: 24px;
}

}

@media screen and (max-width: 700px) {

.haut-page-texte h1 {
font-size: 23px;
}

}

/* ------------------------------- MAIN - Haut-Page-Paragraphe */

.haut-page-texte p {
max-width: 320px;
font-size: 16px;
font-weight: 400;
line-height: 1.35;
}

@media screen and (max-width: 900px) {

.haut-page-texte p {
font-size: 15px;
}

}

@media screen and (max-width: 700px) {

.haut-page-texte p {
max-width: 100%;
font-size: 14px;
}

}


/* ------------------------------- MAIN - Haut-Page-Image */

.haut-page-image {
position: relative;
overflow: hidden;
}

@media screen and (max-width: 700px) {

.haut-page-image {
order: 1;
height: 220px;
}
}


/* ------------------------------- MAIN - Haut-Page-Image-Img */

.haut-page-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;	
}
	
@media screen and (max-width: 1100px) {
.haut-page-image img {
height: 460px;
object-fit: cover;
}
}

@media screen and (max-width: 900px) {
.haut-page-image img {
height: 340px;
object-fit: cover;
}
}

/* ------------------------------- MAIN - Haut-Page-Beige */

.haut-page-beige .haut-page-texte {
background-color: var(--theme-beige);
color: var(--theme-noir);
}

.haut-page-beige .haut-page-texte h1,
.haut-page-beige .haut-page-texte p {
color: var(--theme-noir);
}


/* ========================================================= */
/* ==================== BLOC TEXTE 85 ====================== */
/* ========================================================= */

/*  MAIN - Bloc-Texte-85  */

.bloc-texte-85 {
width: 100%;
padding-top: 90px;
padding-bottom: 20px;
}

@media screen and (max-width: 1100px) {
.bloc-texte-85 {
padding-top: 70px;

}
}

@media screen and (max-width: 700px) {
.bloc-texte-85 {
padding-top: 45px;

}
}


/*  -------------------------------  MAIN - Bloc-Texte-85-Contenu  */

.bloc-texte-85-contenu {
width: 85%;
margin: 0 auto;
}

@media screen and (max-width: 900px) {
.bloc-texte-85-contenu {
width: 90%;
}
}



/* ========================================================= */
/* ================= BLOC 2 COLONNES ======================= */
/* ========================================================= */



/*  ------------------------------- MAIN - Bloc-2-Colonnes  */

.bloc-2-colonnes {
display: grid;
grid-template-columns: 46% 46%;
justify-content: center;
align-items: center;
gap: 8%;
width: 90%;
margin: 0 auto;
padding-top: 90px;
padding-bottom: 90px;
}

@media screen and (max-width: 1100px) {
.bloc-2-colonnes {
grid-template-columns: 47% 47%;
gap: 6%;
width: 92%;
padding-top: 70px;
padding-bottom: 70px;
}
}

@media screen and (max-width: 900px) {
.bloc-2-colonnes {
grid-template-columns: 1fr;
gap: 45px;
width: 90%;
padding-top: 60px;
padding-bottom: 60px;
}
}

@media screen and (max-width: 700px) {
.bloc-2-colonnes {
gap: 35px;
width: 90%;
padding-top: 45px;
padding-bottom: 45px;
}
}


/*  ------------------------------- MAIN - Bloc-2-Colonnes-Image-G  */

.bloc-2-colonnes-image-G {
width: 88%;
position: relative;
padding-top: 30px;
padding-left: 30px;
}

.bloc-2-colonnes-image-fond {
position: absolute;
top: 0;
left: 0;
width: 85%;
height: 85%;
background: #5b9cad;
z-index: 1;
}

.bloc-2-colonnes-image-G picture {
display: block;
position: relative;
z-index: 2;
}

.bloc-2-colonnes-image-G img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}

@media screen and (max-width: 900px) {
.bloc-2-colonnes-image-G {
width: 92%;
padding-top: 24px;
padding-left: 24px;
}
}

@media screen and (max-width: 700px) {
.bloc-2-colonnes-image-G {
width: 100%;
padding-top: 18px;
padding-left: 18px;
}
}


/*  ------------------------------- MAIN - Bloc-2-Colonnes-Texte-D  */

.bloc-2-colonnes-texte-D {
max-width: 520px;
}

@media screen and (max-width: 900px) {
.bloc-2-colonnes-texte-D {
max-width: 100%;
}
}


/*  ------------------------------- MAIN - Bloc-2-Colonnes-Paragraphe  */

.bloc-2-colonnes-texte-D p {
margin-bottom: 35px;
}

@media screen and (max-width: 700px) {
.bloc-2-colonnes-texte-D p {
margin-bottom: 28px;
}
}

/* ========================================================= */
/* ================= BLOC QUATRES ARTICLES ================= */
/* ========================================================= */

/*  -------------------------------   MAIN - Bloc-Quatres-Articles  */

.bloc-quatres-articles {
width: 100%;
padding-bottom: 70px;
}

@media screen and (max-width: 1100px) {
.bloc-quatres-articles {
padding-bottom: 50px;
}
}

@media screen and (max-width: 700px) {
.bloc-quatres-articles {
padding-bottom: 40px;
}
}


/*  -------------------------------   MAIN - Bloc-Quatres-Articles-Conteneur  */

.bloc-quatres-articles-conteneur {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
width: 85%;
margin: 0 auto;
}

@media screen and (max-width: 1100px) {
.bloc-quatres-articles-conteneur {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 90%;
}
}

@media screen and (max-width: 700px) {
.bloc-quatres-articles-conteneur {
grid-template-columns: 1fr;
gap: 18px;
}
}


/*  -------------------------------   MAIN - Bloc-Quatres-Articles-Element  */

.bloc-quatres-articles-element {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 230px;
padding: 10%;
border: 1px solid #cfcfcf;
background: #ffffff;
text-decoration: none;
transition: 0.3s ease;
cursor: pointer;
}

.bloc-quatres-articles-element:hover {
box-shadow: 0 0 18px rgba(0,0,0,0.18);
transform: translateY(-2px);
}


/*  -------------------------------   MAIN - Bloc-Quatres-Articles-Titre  */

.bloc-quatres-articles-element h3 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 500;
line-height: 1.15;
text-transform: uppercase;
color: var(--theme-noir);
}

@media screen and (max-width: 700px) {
.bloc-quatres-articles-element h3 {
margin-bottom: 20px;
font-size: 18px;
}
}


/*  -------------------------------   MAIN - Bloc-Quatres-Articles-Paragraphe  */

.bloc-quatres-articles-element p {
margin-bottom: 35px;
font-size: 15px;
line-height: 1.4;
color: #666666;
}

@media screen and (max-width: 700px) {
.bloc-quatres-articles-element p {
margin-bottom: 28px;
font-size: 14px;
}
}

/* ========================================================= */
/* ================= PHOTO 100 ET TEXTE ==================== */
/* ========================================================= */

/* ========================================================= */
/* ================= PHOTO 100 ET TEXTE ==================== */
/* ========================================================= */

/*  ------------------------------- MAIN - Photo-100-Et-Texte  */

.photo-100-et-texte {
position: relative;
width: 100%;
height: 650px;
overflow: hidden;
display: flex;
align-items: center;
}

@media screen and (max-width: 900px) {
.photo-100-et-texte {
height: 580px;
}
}

@media screen and (max-width: 700px) {
.photo-100-et-texte {
height: 620px;
}
}


/*  ------------------------------- MAIN - Photo-100-Et-Texte-Image  */

.photo-100-et-texte-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.photo-100-et-texte-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
}


/*  ------------------------------- MAIN - Photo-100-Et-Texte-Conteneur  */

.photo-100-et-texte-conteneur {
position: relative;
z-index: 2;
width: 50%;
max-width: 620px;
margin-left: 8%;
margin-right: 0;
padding-top: 80px;
padding-bottom: 80px;
}

@media screen and (max-width: 900px) {
.photo-100-et-texte-conteneur {
width: 70%;
max-width: 620px;
margin-left: 5%;
padding-top: 65px;
padding-bottom: 65px;
}
}

@media screen and (max-width: 700px) {
.photo-100-et-texte-conteneur {
width: 88%;
max-width: 88%;
margin-left: 6%;
padding-top: 50px;
padding-bottom: 50px;
}
}

/*  ------------------------------- MAIN - Photo-100-Et-Texte-Titres  */

.photo-100-et-texte .titre-principal-ligne-1 {
color: var(--theme-blanc);
}


.photo-100-et-texte .titre-principal-ligne-1-beige {
color: var(--theme-beige);
}

.photo-100-et-texte .sous-titre-principal {
color: var(--theme-bleu);
}


/*  ------------------------------- MAIN - Photo-100-Et-Texte-Paragraphe  */

.photo-100-et-texte .paragraphe-principal {
max-width: 850px;
color: var(--theme-blanc);
}


/* ========================================================= */
/* ==================== SLIDER PHOTOS ====================== */
/* ========================================================= */

/*  ------------------------------- MAIN - Slider-Photos  */

.slider-photos {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
width: 100%;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
}

@media screen and (max-width: 1100px) {
.slider-photos {
gap: 20px;
padding-top: 50px;
padding-bottom: 50px;
}
}

@media screen and (max-width: 700px) {
.slider-photos {
gap: 12px;
padding-top: 35px;
padding-bottom: 35px;
}
}


/*  ------------------------------- MAIN - Slider-Photos-Conteneur  */

.slider-photos-conteneur {
width: 80%;
overflow: hidden;
}

@media screen and (max-width: 900px) {
.slider-photos-conteneur {
width: 84%;
}
}

@media screen and (max-width: 700px) {
.slider-photos-conteneur {
width: 78%;
}
}


/*  ------------------------------- MAIN - Slider-Photos-Piste  */

.slider-photos-piste {
display: flex;
transition: 0.4s ease;
}


/*  ------------------------------- MAIN - Slider-Photos-Image  */

.slider-photos-image {
flex: 0 0 100%;
display: block;
}

.slider-photos-image img {
display: block;
width: 100%;
height: auto;
}

/*  ------------------------------- MAIN - Slider-Photos-Piste  */

.slider-photos-piste {
display: flex;
transition: transform 0.45s ease;
}

/*  ------------------------------- MAIN - Slider-Photos-Fleche  */

.slider-photos-fleche {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: none;
background: #000000;
cursor: pointer;
transition: 0.3s ease;
}

.slider-photos-fleche img {
width: 18px;
height: auto;
}

.slider-photos-fleche:hover {
background: var(--theme-bleu);
}

@media screen and (max-width: 700px) {
.slider-photos-fleche {
width: 42px;
height: 42px;
}

.slider-photos-fleche img {
width: 14px;
}
}

/* ========================================================= */
/* ==================== Prestations-Liste ================== */
/* ========================================================= */

.prestations-liste {
display: flex;
flex-direction: column;
gap: 42px;
margin-top: 55px;
}

@media screen and (max-width: 700px) {
.prestations-liste {
gap: 32px;
margin-top: 40px;
}
}

/* ------------------------------- Prestations-Liste-Bloc */

.prestations-liste-bloc h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
line-height: 1.2em;
color: var(--theme-noir);
}

@media screen and (max-width: 700px) {
.prestations-liste-bloc h3 {
font-size: 19px;
}
}

.prestations-liste-bloc p {
font-size: 18px;
line-height: 1.35em;
color: #6d6d6d;
}

@media screen and (max-width: 700px) {
.prestations-liste-bloc p {
font-size: 16px;
}
}

/* ========================================================= */
/* ================= Mentions-Legales ====================== */
/* ========================================================= */

.bloc-texte-85 a {
color: var(--theme-noir);
text-decoration: underline;
text-decoration-color: var(--theme-beige);
text-underline-offset: 3px;
transition: color 0.25s ease;
}

.bloc-texte-85 a:hover {
color: var(--theme-bleu);
}