@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: cledharmonie
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: cledharmonie
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.

cledharmonie 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;
}

html, body {
    scroll-behavior: smooth !important;
}

body {
    background:#312c2b;
    color: #fcfcfc;
    font-family: 'Inter', sans-serif;
}

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

a {
    text-decoration: none;
    color:#fcfcfc;
    transition:all 0.3s ease;
}

a:hover {
    color:#a8a29f;
}

.top-bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 80%;
    height: auto;
    z-index: -1;
    opacity:1;
}

h1 {
    font-size:54px;
    line-height:54px;
}

h2 {
    font-size:32px;
    line-height:36px;
    margin-bottom:1rem!important;
}

/*Header*/

header.container {
    display:flex;
    align-items: center;
    z-index:1000;
    position:relative;
    justify-content: space-between;
    min-height: 3.25rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
	margin-top:0.5rem;
	padding-left:1rem;
	padding-right:1rem;
}

.branding img {
    width:75px;
	border-radius:0.75rem;
}

.navigation ul {
    display:flex;
    list-style:none;
    gap:30px;
}

.navigation a {
    color:#fcfcfc;
}

.navigation a:hover {
    color:#a8a29f;
}

.cta, #cle-rdv-form button {
    background: #fcfcfc;
    border: 1px solid #fcfcfc;
    color: #000;
    line-height: 1;
    font-size: .9rem;
    font-weight: 500;
    min-height: 44px;
    min-width: 110px;
    border-radius: .75rem;
    padding-left:10px;
    padding-right:10px;
    display:flex;
    align-items: center;
    justify-content: center;
    box-shadow:0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px hsl(0 0 0 / 20%);
	cursor:pointer;
}

.hero {
    padding-top:3rem;
    padding-bottom:3rem;
    min-height:100dvh;
}

.hero .image {
    width:fit-content;
        margin:0 auto;
}

.hero .image img {
    max-width:700px;
    border-radius: .75rem;
}

.hero h1, .hero p, section h2, section .description p {
    max-width:700px;
    text-align: center;
    margin:0 auto;
}

.hero .cta, section .cta {
    width:fit-content;
    display:flex;
    gap:20px;
    align-items: center;
    justify-content: center;
    margin:0 auto;
}

.description {
    color:#a8a29f;
    font-size:20px;
    line-height:25px;
    margin-bottom: 1.5rem;
}

.local {
    width:fit-content;
    margin:0 auto;
    margin-top:1.5rem!important;
}

.socialProof {
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top:0.4rem;
    margin-bottom:1.5rem!important;
}

.confiance img {
    width:50px;
}

.confiance p {
    font-weight:bold;
    color:#a8a29f;
    margin-top:1.5rem;
}

.imgWalker {
    display:flex;
    gap:10px;
    align-items: center;
    justify-content: center;
    margin-top:0.4rem;
}

.pill {
    border:2px solid #fcfcfc;
    color:#fcfcfc;
    width:fit-content;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: .5rem;
    font-weight:500;
    line-height:2.2;
    height:2.5rem;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
    margin:0 auto;
    margin-bottom:0.5rem !important;
}

.row {
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.card {
    flex:1 calc(33.33% - 30px);
    padding-top:1rem!important;
    padding-bottom:1rem!important;
    padding-left:1rem;
    padding-right:1rem;
    text-align: center;
}

.card i {
    font-size:32px;
    margin-bottom:0.5rem;
}

.card h3 {
    font-size:16px;
    margin-top:0.5rem!important;
}

.card p {
    color:#a8a29f;
    font-size:15px;
    margin-top:0.5rem!important;
}

section {
    padding-top:3rem;
    padding-bottom:3rem;
}

section .cta {
    width:fit-content;
    margin:0 auto;
    margin-top:1.5rem;
}

.height {
    width: 2px;
    height: 60px;
    margin:0 auto;
    background:hsl(12, 6%, calc(15% + 16%));
}

.avis .cardHead {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.avis .card {
    flex:1 calc(50% - 30px);
}

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

.row {
    margin-bottom:1.5rem;
}

details {
    border: 1px solid hsl(12, 6%, calc(15% + 16%));
    border-radius:0.75rem;
    padding:1rem 3rem;
    margin-bottom:1rem;
    cursor:pointer;
}

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

details p {
    margin-top:1.5rem;
    padding-left:1rem;
    color:#a8a29f;
}

.relance {
    border: 1px solid hsl(12, 6%, calc(15% + 16%));
    border-radius:0.75rem;
    padding:1rem 3rem;
    padding-top:5rem;
    padding-bottom:5rem;
    margin-bottom:4rem;
}

footer {
    display:flex;
    gap:30px;
    padding-top:10px;
    padding-bottom:28px;
    flex-wrap: wrap;
    margin-top:1.5rem;
}
footer img {
    max-width:75px;
	border-radius:0.75rem;
}

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

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;
    flex:1 calc(100%)
}

.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;
}

#cle-rdv-form input,#cle-rdv-form select,#cle-rdv-form textarea {
	border:1px solid hsl(12, 6%, calc(15% + 16%));
	background:none;
	color:#FCFCFC;
	padding:10px;
	border-radius:0.55rem;
	margin-top:0.5rem;
	margin-bottom:1.5rem;
}

#cle-rdv-form select {
	color:#000;
}

form h3 {
	margin-bottom:1rem;
}

@media (max-width:768px) {
    body {
        padding-left:5px;
        padding-right:5px;
    }
    .navigation {
        display:none;
    }

    .hero .image img {
        width:100%;
        border-radius: .75rem;
    }

    .card {
        flex:1 calc(100% - 30px);
    }

    .avis .card {
        flex:1 calc(100% - 30px);
    }
	
	h1 {
		font-size:48px;
	}
}

.post-thumbnail img, .wp-block-image img {
	width:100%;
	margin-top:1.5rem;
	border-radius:0.75rem;
}

.pageSolo {
	max-width:1000px!important;
	margin:0 auto;
	margin-bottom:3rem!important;
}

.pageSolo p {
	margin-top:1.5rem;
	font-size:18px;
}

blockquote {
	padding:1.5rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	border-left:5px solid hsl(12, 6%, calc(15% + 16%));
	font-style:italic;
	margin-top:1.5rem;
}

blockquote p {
	margin-top:0!important;
}

.page404 {
	display:flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	gap:10px;
}

.page404 img {
	max-width:250px;
}

.entry-content {
	margin-top:1.5rem;
}

@media (max-width:1920px) {
	body {
		padding-left:1rem;
		padding-right:1rem;
	}
}

hr {
	border-color:hsl(12, 6%, calc(15% + 16%))!important;
	margin-top:1.5rem;
	margin-bottom:1.5rem!important;
}

.wp-block-heading {
	margin-top:1.5rem!important;
}

.wp-block-list {
	margin-left:1.5rem;
	padding-left:0.5rem;
	margin-top:0.5rem;
}

.service-modal.hidden { 
    display: none; 
}

.service-modal {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 9999;
    overflow-y: auto;          /* permet le scroll sur l'ensemble de la modale */
    padding: 20px;             /* évite que la modale touche les bords sur mobile */
}

/* Contenu de la modale */
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;               /* FULL WIDTH sur mobile */
    animation: fadeIn .3s ease-in-out;
    color: #000 !important;
    max-height: 90vh;          /* empêche la modale de dépasser l’écran */
    overflow-y: auto;          /* scroll interne si contenu trop long */
}

/* Marges paragraphes */
.modal-content p {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Pour les petits écrans, modale 100% */
@media (max-width: 768px) {
    .modal-content {
        width: 100%;
        border-radius: 10px;
        padding: 20px;
    }
}

.close-modal { float:right; cursor:pointer; font-size: 26px; }

.service-card {
    cursor: pointer;
    transition: .3s;
}
.service-card:hover {
    transform: translateY(-5px);
}
.service-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    clip-path: polygon(
        50% 0%,   /* sommet haut */
        100% 50%, /* droite */
        50% 100%, /* bas */
        0% 50%    /* gauche */
    );
    margin: 0 auto 20px;
    display: block;
}


.service-thumb-wrapper {
    width: 90px;
    height: 90px;
    overflow: hidden;
    margin: 0 auto 15px;
    transform: rotate(-45deg);
    border-radius: 20px;
}

.single-service-page {
    padding: 40px 20px;
    color: #fff;
	max-width:800px;
	margin:0 auto;
}

.back-link {
    color: #fcfcfc;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
    font-size: 16px;
}

.service-thumb-single {
    width: 180px;
    height: 180px;
    object-fit: cover;
    clip-path: polygon(
        50% 0%, 
        100% 50%, 
        50% 100%, 
        0% 50%
    );
    display: block;
    margin: 0 auto 30px;
}

.single-service h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 15px;
}

.short-desc {
    text-align: center;
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.service-price-box {
    background: rgba(255,255,255,0.1);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 40px;
}

.service-price-box h2 {
    color: #FCFCFC;
    font-size: 24px;
    margin-bottom: 10px;
}

.service-price-box p {
    font-size: 20px;
    font-weight: 700;
}

.service-content {
    line-height: 1.7;
    font-size: 18px;
    margin-bottom: 50px;
}

.cta-single {
    background: #fcfcfc;
    border: 1px solid #fcfcfc;
    color: #000;
    line-height: 1;
    font-size: .9rem;
    font-weight: 500;
    min-height: 44px;
    min-width: 110px;
    border-radius: .75rem;
    padding-left:10px;
    padding-right:10px;
    display:flex;
    align-items: center;
    justify-content: center;
    box-shadow:0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px hsl(0 0 0 / 20%);
	width:fit-content;
	margin:0 auto;
}

.cta-single:hover {
    background: #000;
	color:#fcfcfc;
	border: 1px solid #000;
}

.modal-link-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 18px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.modal-link-btn:hover {
    background: grey;
	color:#fff;
}

.archive-services {
    padding: 80px 20px;
}

.archive-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 15px;
    color: #fff;
}

.archive-intro {
    max-width: 750px;
    margin: 0 auto 50px;
    text-align: center;
    font-size: 18px;
    line-height: 1.7;
    color: #ddd;
}

/* GRID */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

/* SERVICE CARD */
.service-card-archive {
    background: rgba(255,255,255,0.07);
    padding: 30px;
    border-radius: 14px;
    text-align: center;
    backdrop-filter: blur(2px);
    transition: 0.3s;
    color: #fff;
}

.service-card-archive:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-5px);
}

/* IMAGE LOSANGE */
.service-thumb-archive {
    width: 140px;
    height: 140px;
    object-fit: cover;
    clip-path: polygon(
        50% 0%, 
        100% 50%, 
        50% 100%, 
        0% 50%
    );
    margin: 0 auto 20px;
    display: block;
}

/* TITRE */
.service-title-archive a {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}

/* SHORT DESC */
.service-short-desc {
    opacity: 0.9;
    margin: 15px 0;
}

/* PRIX */
.service-price-line {
    margin: 20px 0;
    font-size: 20px;
    font-weight: 600;
}

.price-label {
    color: #008573;
}

.price-value {
    color: #fff;
}

/* CTA */
.service-more-link {
    display: inline-block;
    margin-top: 10px;
    color: #00a789;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.service-more-link:hover {
    text-decoration: underline;
}

/* MOBILE */
@media(max-width: 600px) {
    .archive-title {
        font-size: 28px;
    }
    .service-thumb-archive {
        width: 120px;
        height: 120px;
    }
}

/* ============= MEGA MENU MASSAGES ============= */

.mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: #fcfcfc;
    padding: 0px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
	border-bottom-left-radius:0.75rem;
	border-bottom-right-radius:0.75rem;
}

.mega-menu.active {
    opacity: 1;
    visibility: visible;
	padding: 40px 0;
}

.mega-inner {
    width: 1200px;
    margin: 0 auto;
}

.mega-grid {
    display:flex;
	flex-wrap:wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-grid li {
    text-align: center;
}

.mega-menu.active a {
	opacity:1;
	visibility:visible;
}

.mega-grid li a {
    text-decoration: none;
	text-align:center;
    color: #000;
    display: flex;
	flex-direction:column;
    padding: 10px;
    transition: 0.2s ease;
	width:fit-content;
	opacity:0;
	visibility:hidden;
}

.mega-grid li a span {
	text-align:center;
}

.mega-grid li a:hover {
    transform: translateY(-4px);
}

.mega-grid img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    clip-path: polygon(
        50% 0%, 
        100% 50%, 
        50% 100%, 
        0% 50%
    );
    margin-bottom: 10px;
}

#headTop::after {
	position: absolute;
	  content: '';
	  height: 0%;
	  width: 100%;
	  bottom:0;
	  left: 50%;
	transform:translatex(-50%);
	  background: white;
	  z-index: -1;
	  border-top-left-radius: 0.75rem;
	  border-top-right-radius: 0.75rem;
	transition: all 0.2s ease-in-out;
}

#headTop.active::after {
	height:100%;
}

#headTop.active .navigation a {
	color:#000!important;
}

#headTop.active .cta {
	border: 1px solid #000;
	background:#000;
	color:#fcfcfc!important;
}

/* Animation bounce au chargement */
.hero {
    animation: bounceIn 1s ease-out forwards;
}

@keyframes bounceIn {
    0% {
        transform: translateY(-80px);
        opacity: 0;
    }
    50% {
        transform: translateY(20px);
        opacity: 1;
    }
    70% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Conteneur des flocons */
body.oolee-christmas {
    position: relative;
    overflow-x: hidden;
}

/* Flocons de neige */
.snowflake {
    position: fixed;
    top: -10px;
    color: white;
    font-size: 1em;
    user-select: none;
    pointer-events: none;
    z-index: 99999;
    animation: snowfall linear infinite;
    opacity: 0.9;
}

/* Animation de chute */
@keyframes snowfall {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0.3;
    }
}

#cle-rdv-form {
	max-width:800px;
	margin:0 auto;
	display:flex;
	flex-direction:column;
}

input, select, textarea {
    font-size: 16px !important;
}

.test {
	margin:0 auto;
	background:transparent;
}

@media (max-width:768px) {
	.mega-menu {
		display:none;
	}
}