@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Dots&display=swap');

/*!
Theme Name: ooleexyz-final
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ooleexyz-final
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ooleexyz-final is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

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

body {
    background:lab(2.75381% 0 0);
    color: #F5F5F5;
    font-family: 'Inter', sans-serif;
}

.container {
    max-width:1280px;
    margin:0 auto;
}

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

/** HEADER **/

header.container {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:0.5rem 1rem;
    margin-top:1rem;
    align-items: center;
    background:#2F2F2F30;
    border-radius:15px;
}

header.container .branding {
    display: flex;
}

header.container .branding img {
    max-width:150px;
}

header.container .navigation ul {
    display:flex;
    gap:30px;
    list-style:none;
    font-weight:600;
}

header.container .navigation li a {
    position:relative;
}

header.container .navigation li a::after {
    position:absolute;
    bottom:-5px;
    content:'';
    height:2px;
    width:0;
    background:#D6DADB;
    left:50%;
    transform: translateX(-50%);
    transition:all 0.3s ease;
}

header.container .navigation li a:hover::after {
    width:100%;
}

.cta2 {
    width:190px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#2F2F2F30;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:12px;
    font-weight:600;
    transition:all 0.3s ease;
    gap:10px;
}

.cta2:hover {
    box-shadow: 0 0 10px #2F2F2F30;
}

.cta {
    width:190px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#D6DADB;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:12px;
    color:#000;
    font-weight:600;
    transition:all 0.3s ease;
    gap:10px;
}

.cta:hover {
    box-shadow: 0 0 10px rgba(255,255,255,0.35);
}

/* Hero */

.hero {
    padding-top:64px;
    padding-bottom:64px;
    display:flex;
    flex-direction: column;
    gap:32px;
    align-items: center;
}

.hero img {
    width:150px;
}

h1 {
    font-size:64px;
    font-weight:600;
    text-align:center;
    line-height:105%;
    letter-spacing: -3%;
}

h2 {
    font-size:48px;
    font-weight:600;
    line-height: 110%;
    letter-spacing: -3.5%;
    text-align: center;
}

h3 {
    font-size:17.16px;
    line-height:150%;
    font-weight:600;
    margin-bottom:24px;
}

.hero .description p {
    font-size:16px;
    line-height:28px;
    text-align:center;
    color:#ffffff80;
}

.hero .cta, .hero .cta2, .solution .cta, .benefices .cta, .processus .cta, .relance .cta, .avis .cta, button.cta {
    padding:10px;
    font-size:18px;
    width:fit-content;
    min-height:48px;
}

button.cta {
	margin:0 auto;
}

.ctaCase {
    display:flex;
    gap:20px;
}

.image {
    border-radius:46px;
    border:1px solid #ffffff25;
    padding:10px;
    width:100%;
}

.overlay {
    border:1px solid #ffffff25;
    border-radius:40px;
    display:flex;
}

.overlay img {
    width:100%;
    border:10px solid #ffffff15;
    border-radius:40px;
    opacity:0.50;
}

.confiance {
    color:#ffffff80;
    font-size:16px;
    line-height:28px;
    font-weight:400;
    display:flex;
    flex-direction: column;
    gap:24px;
}

.imgWalker {
    display:flex;
    gap:30px;
    align-items: center;
    justify-content: center;
}

.imgWalker img {
    width:50px;
    filter: grayscale(100%);
}

/* Pill */

.pill {
    padding-top:6px;padding-bottom:6px;
    padding-left:17px;padding-right:17px;
    border-radius:200px;
    border:1px solid #ffffff15;
    background:#2F2F2F30;
    width:fit-content;
    margin:0 auto;
    font-size:14px;
    font-weight:400;
    line-height:20px;
    letter-spacing: -0.5%;
}

/* Solution */

.solution, .benefices, .processus, .devis, .faq, .relance, .avis {
    gap:32px;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding-bottom:64px;
}

.solution .description p, .benefices .description p, .processus .description p, .devis .description p, .faq .description p, .avis .description p {
    font-size:16px;
    line-height:28px;
    text-align:center;
    color:#ffffff80;
    max-width:1000px;
    margin:0 auto;
}

.row {
    display:flex;
    gap:32px;
    flex-wrap:wrap;
    width:100%;
}

.card {
    flex:1 calc(33.33% - 32px);
    min-width:33.33%;
    border-radius:16px;
    background:#2F2F2F30;
    padding-top:32px;
    padding-bottom:32px;
    padding-left:24px;
    padding-right:24px;
    border:1px solid #ffffff15;
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.avis .card {
    text-align: start;
    align-items: start;
}

.cardHead {
    display:flex;
    gap:10px;
    align-items: center;
    font-weight:700;
    margin-bottom:14px;
}

.cardHead img {
    width:32px;
    height:32px;
}

.card p {
    font-size:14px;
    line-height:150%;
    color:#ffffff80;
}

.card i {
    font-size:80px;
    margin-top:24px;
    display: block;
    opacity:0.5;
}

.solution .cta, .benefices .cta, .avis .cta {
    margin-top:48px;
    margin-bottom:48px;
}

button.cta {
	border:0;
	cursor:pointer;
}

.processus .card {
    min-width:inherit;
}

.faqList {
    width:100%;
}

details, .relance {
    border-radius:16px;
    background:#2F2F2F30;
    padding-top:32px;
    padding-bottom:32px;
    padding-left:24px;
    padding-right:24px;
    border:1px solid #ffffff15;
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
    margin-top:14px;
}

details summary {
    font-weight:bold;
    font-size:20px;
}

details p {
    margin-top:24px;
    padding-left:20px;
    font-size: 14px;
    line-height: 150%;
    color: #ffffff80;
}

.relance {
    margin-top:64px;
    margin-bottom:64px;
    padding-top:100px;
    padding-bottom:100px;
    display:flex;
    gap:42px;
}

.relance h2 {
        text-align: center;
        font-size:64px;
}

.local {
    font-weight:600;
}

.local i {
    color:crimson;
}

.avis .row {
    max-width: 950px;
}

.avis .cta {
    margin-top:33px;
}

footer {
    display:flex;
    gap:30px;
    padding-top:10px;
    padding-bottom:28px;
    flex-wrap: wrap;
}
footer img {
    max-width:150px;
}

footer .socialLink {
    font-size:22px;
    margin-top:20px;
    display:flex;
    gap:20px;
}

.socialLink a {
	display:flex;
	align-items:center;
	flex-direction:column;
	font-size:12px;
}

.socialLink a i {
	font-size:18px;
}

footer .col {
    flex:1 calc(25% - 30px);
}

footer .cinquante {
    flex:1 calc(50% - 30px);
}

footer ul {
    list-style:none;
    padding-left:30px;
}

footer ul a:hover {
    color:lightblue;
}

.cent {
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #2F2F2F30;
    color:#ffffff80;
    flex:1 calc(100%)
}

.cent a {
    color:#ffffff80;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-grid a {
    color: inherit;
    text-decoration: none;
}

.footer-grid a:hover {
    text-decoration: underline;
}


@media (max-width:768px) {
    body {
        padding:5px;
    }

    .cta, .cta2 {
        font-size:15px!important;
    }

    .socialProof {
        flex-direction: column;
    }

    h2 {
        font-size:40px;
    }
    .description p {
        font-size:14px!important;
        line-height: 20px!important;
    }
    .card {
        flex:1 calc(100% - 32px);
    }

    h1 {
        font-size:48px;
    }
    .navigation {
        display:none;
    }

    .relance h2 {
        text-align: center;
        font-size: 48px;
    }

    footer .col {
        flex:1 calc(100%);
    }
	
	.footer-grid a {
		padding-top:1rem;
		padding-bottom:1rem;
		display:block;
	}
}

.oolee-column, #oolee-calendar-zone {
	border-radius: 16px;
	  background: #2F2F2F30;
	  padding-top: 32px;
	  padding-bottom: 32px;
	  padding-left: 24px;
	  padding-right: 24px;
	  border: 1px solid #ffffff15;
	  box-shadow: 0 0 10px rgba(255,255,255,0.05);
}

#oolee-calendar-zone {
	width:100%;
	border:0;
	padding:0;
}

input, select, textarea {
	background: #FFFFFF15;
	  border: 1px solid transparent;
	  color: grey;
}

input:focus, textarea:focus {
	outline:none;
	border-color:#FFFFFF80!important;
	background: #2d3647;
}

.oolee-btn, .oolee-btn-final {
	background: #D6DADB!important;
	color:#000!important;
}

select:focus {
    outline: none;
    background: #2d3647;
    border-color: #FFFFFF80;
}

#oolee-result {
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  display: none;
  width: 100%!important;
	background: #111!important;
  color: white!important;
	text-align:center;
}

#oolee-result div {
	background:transparent!important;
	color: white!important;
}

#oolee-client-form {
	margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  width: 100%!important;
	background: #111!important;
  color: white!important;
	text-align:center;
}

#oolee-repairs-list label {
	flex-direction:row;
}

.breadcrumb {
	text-align:center;
	margin-bottom:24px;
}

.price {
	font-size:38px!important;
	font-weight:bold;
	margin-bottom:10px;
}