/* ----------------------------------------------------------------- */
/* CSS - AVOSDEMARCHES */
/* ----------------------------------------------------------------- */
/* Colors */
:root {
    --beige: #e6dcc6;
    --beige-light: #fcf4e5;
    --beige-dark: #bdb29b;
    --marron: #43322c;
    --marron-dark: #2f221e;
    --white:#fff;
    --black:#222;
}

/* Fonts */
@font-face { font-family: 'The-Seasons'; src: url('../fonts/The-Seasons-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'The-Seasons'; src: url('../fonts/The-Seasons-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'The-Seasons'; src: url('../fonts/The-Seasons-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'The-Seasons'; src: url('../fonts/The-Seasons-Bold-Italic.ttf') format('truetype'); font-weight: bold; font-style: italic; }

/* Generic */
body{ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; min-height: 100vh; overflow-x: hidden; }
main { flex: auto; }
h1,h2,h3 { font-family: "The-Seasons", 'Trebuchet MS', Arial, serif; color:var(--marron) }
h1 { font-size:3.5rem; }
h2 { font-size:2rem; }
h3 { font-size: 1.75rem; }
p, a, li { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 1rem; }
p { color:var(--marron); }
p.big { font-size: 1.15rem; }
hr { border-top: 3px solid !important; width:75px; opacity: 0.8; }
hr.full-width { width:100%; }
label, input { font-family: 'DM Sans', sans-serif; font-weight: 500; }
label:hover { cursor:pointer; }
/* Nav */
header nav { font-size: .85em; background:var(--marron); }
header nav .nav-item { display: flex;}
header nav .nav-link { color:var(--beige); border-bottom: 1px solid transparent; transition: all 0.3s ease; }
header nav .nav-link:hover { color:var(--white); border-bottom: 1px solid #E6DCC6; }
header nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23e6dcc6' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230, 220, 198, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
header nav .navbar-toggler:focus { border:1px solid var(--beige); box-shadow:none; }
header .active { color:var(--white) !important; border-bottom: 1px solid #E6DCC6 !important; }
header .header-link { display: flex; flex-direction:row; }
header .header-link .block-coordonnes { margin:0 20px 0 0; }
header .header-link .block-coordonnes i { color:var(--beige); }
header .header-link .block-coordonnes a { color:var(--white); text-decoration:none; font-weight:500; padding:7px 0; transition: all 0.3s ease; }
header .header-link .block-coordonnes a:hover { color:var(--white); border-bottom: 1px solid #E6DCC6; }

/* ----------------------------------------------------------------- */
/* Page > Home */
/* ----------------------------------------------------------------- */
/* Accueil */
#accueil { background:var(--marron); overflow-x: hidden;}
#accueil img { width: 100%; max-height: 800px; min-width: 300px; }
#accueil p { color:var(--beige); text-transform: uppercase; letter-spacing: 0.246em; font-weight: 700; line-height: 1.25em; margin:0 0 10px; padding:0; }
#accueil p span { font-family: "The-Seasons", 'Trebuchet MS', Arial, serif; font-size: 1.15em; text-transform: initial; font-weight:normal; letter-spacing: 0.05em; }
#accueil p + hr { border-top: 1px solid var(--beige) !important; margin : 0 auto}
#accueil .bloc-content { padding-top:90px; }
#accueil h1 { color:var(--beige); }
#accueil img.img-logo { max-height: 400px; }
#accueil hr { margin:50px 0; border-top: 3px solid var(--beige) !important; }

/* Description */
#description { background:var(--beige); }
#description span { display:block; margin:20px 0 40px; }
#description img { max-height: 600px; }

/* Services */
#services { background:var(--marron); }
#services h2 { color:var(--beige); }
#services hr { border-top: 3px solid var(--beige) !important; margin:30px auto; }
#services .intro p { color:var(--beige); margin:0; }
#services .card { background:var(--beige); }
#services .card h3 { font-weight:600; color:var(--marron); }
#services .card img { height:200px; object-fit: cover }
#services .card hr { border-top: 3px solid var(--marron) !important; margin:10px auto 20px; }
#services .card p { font-size: 1em; margin:0 0 7px; }
#services .card ul li { font-size: 1em; margin:0; }
#services .card blockquote { border-left:3px solid var(--marron) !important; margin:0 0 20px 20px; padding:0 0 0 15px; }
#services .card blockquote p { font-size: 1em; text-align:left; margin:0; }
#services .card a {margin-top:20px; }
#services .card-mini h3 { font-size: 1.5em; }
#services .card-mini blockquote { border-left:3px solid var(--marron) !important; margin:0 0 20px; padding:0 0 0 15px; }
#services .block-link-dark p { color:var(--beige); font-size: 1.25em; }
#services .block-link-dark a { color:var(--white); font-size: 1em; }
#services .block-link-dark a:hover { text-decoration:none }

/* About */
#about { background:var(--beige); }
#about h2 { color:var(--marron) }
#about hr { border-top: 3px solid var(--marron) !important; margin:30px auto; }
#about .intro p { margin:0; }
#about .block-about-content h3, #about .block-about-content p { text-align: left; }
#about .block-about-content hr { width:100%; margin:5px 0 15px; border-top: 1px solid var(--marron) !important; }
#about .block-about-text { margin:0 0 30px; }
#about .block-cta { background:var(--marron); border-radius: 20px; margin:20px 5px; padding:20px;  }
#about .block-cta h3 { color:var(--beige); font-size: 1.5em; text-align:center; }
#about .block-cta hr { border-top: 3px solid var(--beige) !important; width:50px; }
#about .block-cta p { color:var(--beige); margin:0 0 10px; font-size: 1em; }
#about .block-cta a { color:var(--white); font-size: 1em; }
#about .block-cta a:hover { text-decoration:none }

/* Pourquoi */
#why { background:var(--marron); }
#why h2 { color:var(--beige); }
#why hr { border-top: 3px solid var(--beige) !important; margin:30px auto; }
#why .card { background:var(--marron); border:none; }
#why .card img { max-height:200px; margin:0 0 35px; }
#why .card h3 { font-weight:600; color:var(--marron); font-size: 1.25em; min-height:50px; }
#why .card hr { border-top: 3px solid var(--marron) !important; margin:20px auto; }
#why .card p { font-size: 1em; margin:0 0 7px; }
#why .card-body { background:var(--beige); border-radius:20px; padding:20px; }

/* Footer */
#me-contacter { background:var(--beige); }
#me-contacter a { color:var(--marron); font-size: 1em; transition: all 0.3s ease; }
#me-contacter a:hover { text-decoration:none; transition: all 0.3s ease; }
#me-contacter .block-coordonnes { font-size: 1.25em; }
#me-contacter .block-coordonnes a, a:hover { color:var(--marron); transition: all 0.3s ease; }
#me-contacter .block-coordonnes i { color:var(--marron); }
#me-contacter .block-reseaux { font-size: 1.75em; }
#me-contacter .block-reseaux i { color:var(--marron); }
#me-contacter img { max-width: 500px !important;}

footer { background:var(--beige); }
footer .nav-link { color:var(--marron); border: 1px solid var(--beige); border-bottom:none; transition: all 0.3s ease; font-size: 1em; padding:10px 20px; }
footer .nav-link:hover { color:var(--marron); border: 1px solid #43322C; border-bottom:none; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.active-footer { color:var(--beige) !important; border-bottom:none !important; background:var(--marron); border-top-left-radius: 20px; border-top-right-radius: 20px; }
.active-footer:hover { color:var(--white) !important; border: 1px solid var(--marron); }
#footer-copy { background:var(--marron); padding:20px; }
#footer-copy p { color:var(--beige); font-size:1em; margin:0;  }
#footer-copy p.copy { color:var(--beige); font-size:.85em; margin:0; }
#footer-copy p.copy a { color:var(--beige); transition: all 0.3s ease; }
#footer-copy p.copy a:hover { text-decoration:none; transition: all 0.3s ease; }
/* Go Top */
.gotop { all: unset; position: fixed; bottom: -5px; right: -5px; width: 120px; height: 120px; cursor: pointer; z-index: 9999; }
.gotop .textcircle { display: block; overflow: visible; transform-origin: center; }
.gotop .textcircle text { font-size: 32px; letter-spacing: 15px; fill: var(--white); text-transform: uppercase; }
.gotop:hover .textcircle { animation: rotation 10s linear infinite; }
.gotop .arrow { position: absolute; width: 40px; height: 40px; top: calc(50% - 20px); left: calc(50% - 20px); fill: var(--white); }
@keyframes rotation { 100% { transform: rotate(-360deg); } }

/* Boutons */
.btn { min-width:250px; }
.btn-theme { font-family: 'DM Sans', sans-serif; font-size: 1.15em; font-weight:600; padding:10px 20px; border-radius:25px; background: var(--beige); color:var(--marron) !important; transition: all 0.3s ease; }
.btn-theme:hover { background: var(--beige-dark); color:var(--marron); transition: all 0.3s ease; }
.btn-theme-dark { font-family: 'DM Sans', sans-serif; font-size: 1.15em; font-weight:600; padding:10px 20px; border-radius:25px; background: var(--marron); color:var(--beige) !important; transition: all 0.3s ease; }
.btn-theme-dark:hover { background: var(--marron-dark); color:var(--beige); transition: all 0.3s ease; }

/* ----------------------------------------------------------------- */
/* Page > Contact */
/* ----------------------------------------------------------------- */
#contact { min-height:calc(100% - 50px); padding:100px 0; background:var(--beige); display:flex; align-items:center; }
#contact hr { border-top: 3px solid var(--marron) !important; margin:30px auto; }
#contact .label-form { margin-left: 15px; }
#contact .form-floating > .form-control, #contact .form-select { padding-left: 1.25rem; }
#contact .form-control:focus { border-color: #43322C; box-shadow: 0 0 0 0.25rem #43322c80 ; }
#contact textarea { height:150px; }
#contact .button-form { text-align: right; }
#contact .required { color: red; }
#contactForm p.alert { font-size: 1em; }
#contact .has-error { border:1px solid red; }
#contact .form-check-input:checked { background-color: var(--marron); border-color: var(--marron); }

/* ----------------------------------------------------------------- */
/* Page > Mentions légales / CGU / Politique de Confidentialité */
/* ----------------------------------------------------------------- */
#mentions-legales, #cgu, #confidentialite { padding:100px 0; background:var(--beige); display:flex; align-items:center; }
#mentions-legales h2, #cgu h2, #confidentialite h2 { margin:40px 0 0 0; }
#mentions-legales h3 { margin:20px 0 20px 0; font-size:1.5em; }
#mentions-legales p, #cgu p, #confidentialite p { color:var(--marron); font-size:1em; margin:0;  }
#mentions-legales ul, #cgu ul, #confidentialite ul { margin:20px 0; }
#mentions-legales ul li, #cgu ul li, #confidentialite ul li { color:var(--marron); font-size:1em; }
#mentions-legales a, #cgu a, #confidentialite a { color:var(--marron); font-size:1em; }
#mentions-legales a:hover, #cgu a:hover, #confidentialite a:hover { text-decoration:none; }
#confidentialite h1 + p a { text-transform: uppercase; letter-spacing: 0.246em; font-weight: 700; line-height: 1.25em; margin:0 0 10px; padding:0; }

/* ----------------------------------------------------------------- */
/* Page > Prestations */
/* ----------------------------------------------------------------- */
#prestations { padding:100px 0; background:var(--beige); }
#prestations .container { max-width: 1450px !important;}
#prestations img { max-height: 600px; max-width:600px;}
#prestations img.picto-prestation { max-height: 80px; width: 100%; max-width: 80px; }
#prestations .bg-marron-dark { background:var(--marron); color:var(--beige); }
#prestations .bg-marron-dark h2, #prestations .bg-marron-dark p, #prestations .bg-marron-dark ul li { color:var(--beige); }
#prestations .intro hr { margin:30px auto; }
#prestations .prestations-cards { padding:50px 0; }
#prestations .card { background:rgba(255,255,255,.5); border:none; border-radius:20px; padding:15px; height: 100%;}
#prestations .card img { height:100px; margin:0 auto 20px; }
#prestations .card h2 { font-size: 1.5rem; text-align:center; }
#prestations .card hr { border-top: 3px solid var(--marron) !important; margin:10px auto 0; }
#prestations .card p { margin:20px 0; }
#prestations .card a { display: block; margin:auto 30px 0 ; min-width: 125px !important; }
#prestations ul li { color:var(--marron); }

/* ----------------------------------------------------------------- /
/ Page > CTA /
/ ----------------------------------------------------------------- */
.cta { background:var(--marron); padding:50px 0; }
.cta h2, .cta h3 { color:var(--beige); text-align:center; }
.cta h2 { font-size:2.5rem; }
.cta hr { border-top: 3px solid var(--beige) !important; margin:30px auto; }

/* ----------------------------------------------------------------- */
/* Page > Tarifs */
/* ----------------------------------------------------------------- */
#tarifs { padding:100px 0; background:var(--beige); }
#tarifs .tab-tarifs { margin:50px auto; }
#tarifs .card { background:none; border:none; padding:0; display: flex; justify-content: stretch; height:100%; }
#tarifs .card h2 { display: flex; flex-direction: row; align-items: center; justify-content: center; margin:0 0 30px; }
#tarifs .card h2 img { height:60px; width: 80px; margin:0 30px 0 0; }
#tarifs .card-body { display: flex; flex-direction: column; justify-content: space-between; flex:1; background:rgba(255,255,255,.5); border:none; border-radius:20px; padding:20px; }
#tarifs .card-body ul li { display:flex; flex-direction:row; align-items: center; justify-content: space-between; color:var(--marron); padding:7px 0; }
#tarifs .card-body ul li span br { display: none; }
#tarifs .card-body ul li span.tarif-separator { flex-grow: 1; border-bottom-style: dotted; border-bottom-width: 3px; border-bottom-color: var(--beige); margin:0 10px; }
#tarifs .card-body ul li.note { margin-top:-10px; }
#tarifs .card-body a { margin:auto; }
#tarifs .detail-tarif p { font-size:1rem; margin:0; }

/* ----------------------------------------------------------------- */
/* Page > Error */
/* ----------------------------------------------------------------- */
#error { padding:100px 0; background:var(--beige); }
#error section > div { height:50vh; display:flex; flex-direction: column; align-items:center; justify-content:center; }
#error hr { border-top: 3px solid var(--marron) !important; margin:30px auto; }

/* ----------------------------------------------------------------- */
/* Animations */
/* ----------------------------------------------------------------- */
.invisible { opacity: 0; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: scale(0.8) translateY(100px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: scale(0.8) translateX(100px); } to { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: scale(0.8) translateX(-100px); } to { opacity: 1; transform: scale(1) translateX(0); } }
@keyframes fadeInRotate { 
    from { opacity: 0; transform: scale(0.7) translateY(20px) rotateZ(10deg); } 
    to { opacity: 1; transform: scale(1) translateY(0) rotateZ(0); } }
.fade.animate { animation: fade 0.8s ease forwards; }
.fade-up.animate { animation: fadeInUp 0.7s ease forwards; }
.fade-left.animate { animation: fadeInLeft 0.7s ease forwards; }
.fade-right.animate { animation: fadeInRight 0.7s ease forwards; }
.fade-rotate.animate { animation: fadeInRotate 0.7s ease forwards; }

/* ----------------------------------------------------------------- */
/* Responsive */
/* ----------------------------------------------------------------- */
@media (max-width: 1200px) {
    h1 { font-size:3rem; }
    h3 { font-size: 1.4rem; }
    p, a, li { font-size: 1rem; }
    p.big { font-size: 1.15rem; }
    #accueil img.img-logo { width: 100%; }
    #contact .button-form { text-align: center; }
    #prestations #me-contacter .container { max-width: 1140px;}
}
@media (max-width: 992px) {
    h1 { font-size:2.5rem; }
    h2 { font-size:2rem; }
    h3 { font-size: 1.8rem; }
    p, a, li { font-size: 1rem; }
    p.big { font-size: 1.15rem; }
    header .nav-link { font-size: 1rem; }
    #accueil .bloc-content { padding-top:50px; }
    #why .card img { margin:0; }
    #why .card-body { margin-bottom: 30px; padding:18px;}
    #contact { padding:30px 0; }
    #mentions-legales, #cgu, #confidentialite { padding:30px 0;}
    #mentions-legales ul, #cgu ul, #confidentialite ul { padding: 0 0 0 15px;}
    #prestations .prestations-cards { padding:40px 0; }
    #prestations #me-contacter .container { max-width: 960px;}
}
@media (max-width: 768px) {
    h1 { font-size:2.3rem; }
    h2 { font-size:1.7rem; }
    h3 { font-size: 1.5rem; }
    p, a, li { font-size: 0.9rem; }
    p.big { font-size: 1.1rem; }
    #accueil .bloc-content { padding-top:30px; }
    #why .card-body h3 { min-height: auto; }
    #prestations .prestations-cards { padding:30px 0; }
    #prestations #me-contacter .container { max-width: 720px;}
}
@media (max-width: 576px) {
    h1 { font-size:2rem; }
    h2 { font-size:1.4rem; }
    h3 { font-size: 1.3rem; }
    p, a, li { font-size: 0.9rem; }
    p.big { font-size: 1rem; }
    #description .btn { display: block; margin: auto; width: 250px;}
    #services .card blockquote { margin:0 0 20px 10px; padding:0 0 0 10px; }
    #services .card ul { padding: 0 0 0 22px; }
    #services .block-link-dark p { font-size: 1em; }
    #about .block-cta { margin: 0; padding:20px; }
    #about .block-about-text:last-child { margin:0; }
    #why .card-body { margin-bottom: 25px; padding:15px;}
    #prestations ul { padding: 0 0 0 16px; }
    #prestations #me-contacter .container { max-width: 540px;}
    #prestations .cta br { display:none; }
    #tarifs .card h2 img { height:50px; width: 68px; margin:0 10px 0 0; }
    #tarifs .card-body ul li { display:block; }
    #tarifs .card-body ul li span:nth-child(1) { display:block; }
    #tarifs .card-body ul li span.tarif-separator {display:none; }
}