@charset "utf-8";

/* =========================
   RESET GLOBAL & FONDATIONS
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
    overflow-x: hidden !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

body {
	font-family: Calluna, Arial, sans-serif;
    font-display: swap;
	min-height: 1000px;
	color: #595959;
	margin-left: 5px;
	margin-right: 3px;
	padding-top: 10px;
}

@font-face {
  font-family: 'Calluna';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
  font-display: swap;
}

header {
	padding: 0px;
}

/* =========================
   STRUCTURE DE L'EN-TÊTE EN LIGNE (MOBILE & DESKTOP)
========================= */
.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    z-index: 100;
}

.header a {
    text-decoration: none;
}

#Logograinedevie {
    max-width: 70px;
    height: auto;
    border-radius: 0;
}

.header .slogan {
    display: none;
    font-family: 'Pacifico', cursive;
    font-size: 18px;
    color: #996666;
}

/* Style du bouton Prendre RDV Spécifique pour Mobile/Tablette */
.button-rdv-mobile {
    background-color: #F47F20;
    color: white !important;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    display: inline-block;
    transition: background-color 0.3s;
    text-decoration: none;
}

.button-rdv-mobile:hover {
    background-color: #996666;
}

/* Bouton Accordéon (Hamburger) Mobile - Vert dynamique */
.accordion {
  background-color: #9bc33d; 
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
}

.accordion:hover, .accordion.active {
  background-color: #996666;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hamburger span {
    width: 18px;
    height: 2px;
    background-color: white;
    border-radius: 2px;
}

.nav-rdv-desktop {
    display: none !important;
}

.accordion2 {
  background-color: #A4CE91; 
  color: white; /* Définit le texte en blanc */
  cursor: pointer;
  padding: 15px 20px; /* J'ai repris les marges de l'ancien pour le confort de lecture */
  border: none;
  font-size: 15px;
  font-weight: bold; /* Force le texte en vrai gras */
  border-radius: 10px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%; /* Permet au bouton de s'étirer sur toute la largeur de la carte */
  margin-top: 10px;
}

/* N'oubliez pas d'ajouter l'effet au survol et au clic pour ce nouveau bouton ! */
.accordion2:hover, .accordion2.active {
  background-color: #8B5152;
}
.panel {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background-color: white;
  border-radius: 0 0 10px 10px;
}

/* =========================
   NAVIGATION & MENUS
========================= */
.style-logo {
	display: block;
	font-family: 'Pacifico', cursive;
    font-display: swap;
    margin: 10px auto 0 auto;
}

.style-nav ul {
	list-style-type: none;
    padding: 10px 0;
    margin: 0;
    text-align: center;
}

.style-nav ul li {
    display: block;
    margin: 8px 0;
}

.style-nav ul li a {
	text-decoration: none;
	color: #696969;
	display: block;
	text-transform: uppercase;
	font-size: 0.95rem;
	padding: 8px;
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: 600;
    transition: color 0.3s;
}

.style-nav ul li a:hover {
	color: #00aab0;
}

.style-nav ul li a.button3 {
    background-color: #F47F20;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    display: inline-block;
}

.style-nav ul li a.button3:hover {
    background-color: #996666;
    color: white;
}

.style-nav1 {
	list-style-type: none;
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 0px;
}

/* Icônes de réseaux sociaux et contacts */
.social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 15px;
    margin: 20px 0;
}

.social-icons a {
    display: inline-block;
}

.social-icons img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    object-fit: contain;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none !important; 
    transform: none !important;  
}

.social-icons img:hover {
    transform: none;
    box-shadow: none;
}

/* =========================
   TYPOGRAPHIE & TITRES
========================= */
h1, h4 {
	font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 400;
	line-height: 1.4;
	text-align: center;
	color: #996666;
	padding: 3px;
}

h1 { font-size: 21px; }
h4 { font-size: 20px; font-family: 'Pacifico', cursive; }

h2{
	font-size: 21px;
	font-family: 'Pacifico', cursive;
    font-display: swap;
    font-weight: 150;
	line-height: 1.2;
	vertical-align: top;
	text-align: center;
	color: #996666;
	padding: 3px;
}

h3{
	font-size: 18px;
	font-family: 'Montserrat Alternates', sans-serif;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
	line-height: 1.4;
	vertical-align: top;
	text-align: center;
	color: #996666;
	padding: 3px;
}

h5 {
	font-size: 15px; 
	font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: gray;
	padding-bottom: 10px;
	padding-top: 10px;
}

h6 {
	font-size: 15px;
	text-align: left;
	color: grey;
	padding: 10px;
}

p, .content, .hero ul {
    font-size: 1rem;
    font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: gray;
    line-height: 1.6;
}

.slogan {
	font-size: 20px;
	font-family:'Pacifico', cursive;
    font-display: swap;
    font-weight: 400;
	line-height: 1;
	vertical-align: top;
	text-align: center;
	color: #996666;
	padding: 1px;
 }

/* =========================
   LIENS GENERAUX ET CONTACTS
========================= */
.link {
	text-decoration: none !important;
	color: gray !important;
}

/* =========================
   IMAGES & BLOCS DE CONTENU
========================= */
img {
	display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
	height: auto;
	border-radius: 10px;
}

#columns {
	column-width: 320px;
	column-gap: 15px;
    width: 90%;
	max-width: 1100px;
	margin: 50px auto;
}

div#columns figure {
	background: #FFFFFF;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	transition: opacity .4s ease-in-out;
    display: inline-block;
    column-break-inside: avoid;
}

div#columns figure img {
	width: auto; height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

div#columns figure figcaption {
    font-size: .9rem;
	color: #444;
    line-height: 1.5;
}

div#columns small { 
    font-size: 1rem;
    float: right; 
    text-transform: uppercase;
    color: #aaa;
} 

div#columns small a { 
    color: #666; 
    text-decoration: none; 
    transition: .4s color;
}

div#columns:hover figure:not(:hover) {
	opacity: 0.4;
}

/* =========================
   BOUTONS ET STRATÉGIE CTA
========================= */
.button, .button2, .cta, .button-outline, .buttonlivrebroche, .buttonebook, .buttonlivreaudio, .buttonlivrepdf {
	display: inline-block;
	border-radius: 30px;
	text-decoration: none;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button { color: #996666; }

.button2, .cta {
	padding: 10px 15px;
	color: white;
	background: #996666;
    border: 2px solid white;
}

.cta {
  padding: 12px 24px;
  border: 2px solid #996666;
}

.cta:hover {
  background-color: #F47F20;
  border-color: #F47F20;
  color: #fff;
}

.buttonlivrebroche { border: 2px solid white; padding: 7px 15px; background: #33cc33; color: white; }
.buttonebook { border: 2px solid white; padding: 7px 15px; background: #F4B311; color: white; }
.buttonlivreaudio { border: 2px solid white; padding: 7px 15px; background: gray; color: white; }
.buttonlivrepdf { border: 2px solid white; padding: 7px 15px; background: red; color: white; }

/* =========================
   ALIGNEMENT ET CENTRAGE
========================= */
.center {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center;    /* Centre les éléments horizontalement */
    gap: 15px;              /* Crée un espace aéré et régulier entre chaque élément */
    margin-top: 20px;
}

.center p {
    margin: 10px 0; /* Donne un peu d'air autour du texte intermédiaire */
    text-align: center;
}

/* =========================
   IMAGES D'INTRODUCTION (HERO) - MODE MOBILE PAR DÉFAUT
========================= */
.img-hero-principale {
    width: 95%; /* Prend presque toute la largeur sur téléphone */
    max-width: 500px; /* Limite de sécurité pour les tablettes */
    margin: 20px auto 0 auto;
    display: block;
}

.img-hero-secondaire {
    width: 85%; /* Légèrement plus petite pour hiérarchiser */
    max-width: 400px;
    margin: 15px auto;
    display: block;
}

/* =========================
   ENCADRÉS ET CARTES DU BAS DE PAGE
========================= */
.container {
  width: 95%; /* Sur mobile, on prend quasiment toute la largeur */
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 5px; /* Très peu de marge sur les bords pour le mobile */
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Descend jusqu'à 280px pour les très petits écrans */
  gap: 20px; /* Espace réduit entre les cartes sur mobile */
  margin-top: 30px;
  width: 100%;
}

.card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(34, 25, 25, 0.1);
  padding: 15px; /* Marge interne de la carte réduite pour le mobile */
  box-sizing: border-box !important;
  text-align: left;
  font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.card h2 {
    text-align: center !important;
    margin-bottom: 20px; /* Crée un bel espace sous le grand titre de la carte */
}

.card h3 {
  text-align: center !important;
  margin-top: 25px;
  margin-bottom: 12px;
}

.card p {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.card p:last-of-type {
    margin-bottom: 0;    /* Évite un espace inutile tout au fond de la carte */
}

/* PUCES PERSONNALISÉES : Flèches vertes alignées à gauche */
.card ul, .testimonials ul {
    list-style-type: none; 
    padding-left: 0;        
    margin-bottom: 15px;
}

.card ul li, .testimonials ul li {
    position: relative;
    padding-left: 22px;    
    margin-bottom: 10px;   
    font-size: 0.95rem;
    line-height: 1.6;
    color: gray;
    font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    text-align: left !important;
}

.card ul li::before, .testimonials ul li::before {
    content: "→";
    color: #9bc33d; 
    font-weight: bold;
    font-size: 1.1rem;      
    position: absolute;
    left: 0;                
    top: -2px;              
}

.grid .card .cta, .grid .card a.cta {
    display: table !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    width: auto !important;
}

/* =========================
   ALIGNEMENT DES BOUTONS DANS LES CARTES
========================= */
.grid .card .cta, 
.grid .card a.cta, 
.grid .card .button2 { /* Ajout de votre bouton ici */
    display: table !important;
    margin: 20px auto 0 auto !important;
    text-align: center !important;
    width: auto !important;
    align-self: center; /* Double sécurité Flexbox pour le centrage horizontal */
}

/* =========================
   CLASSES CONSERVÉES
========================= */
.fondvert { background-color: #A4CE57; border-radius: 10px; padding: 5px 15px; color: white; text-align: left; font-style: bold; display: block; }
.fondbleu { background-color: #006699; border-radius: 10px; padding: 5px 15px; color: white; text-align: left; font-style: bold; display: block; }
.fondturquoise { background-color: #00AAB0; border-radius: 10px; padding: 5px 15px; color: white; text-align: left; font-style: bold; display: block; }
.fondrose { background-color: #FF9999; border-radius: 10px; padding: 10px 25px; color: white; text-align: left; font-style: bold; display: block; }

/* Protection absolue des textes blancs sur fonds colorés */
.fondvert p, .fondvert b, .fondvert strong,
.fondbleu p, .fondbleu b, .fondbleu strong,
.fondturquoise p, .fondturquoise b, .fondturquoise strong,
.fondrose p, .fondrose b, .fondrose strong {
    color: #ffffff !important;
}

.bandeau1 { height: 20px; background: #FF9999; text-align: center; color: #FFFFFF; font-size: 20px; padding: 2px; }
.bandeau2 { height: 20px; background: #00AAB0; text-align: center; color: #FFFFFF; font-size: 20px; padding: 2px; }
.bandeau3 { height: 20px; background: #F47F20; text-align: center; color: #FFFFFF; font-size: 20px; padding: 2px; }
.bandeau4 { height: 20px; background: #A4CE91; text-align: center; color: #FFFFFF; font-size: 20px; padding: 2px; }
.bandeau5 { height: 20px; background: #A4CE91; text-align: center; color: #006699; font-size: 20px; padding: 2px; }

.soinsfond1 { background-color: #847455; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.soinsfond2 { background-color: #8B5152; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.soinsfond3 { background-color: #5C4444; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.soinsfond4 { background-color: #006699; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.pagesoins { background-color: #BAF359; border-radius: 10px; padding: 10px 25px; color: dimgray; text-align: justify; display: block; text-decoration: none; }

.nettoyage { background-image: url(img/Nettoyage-maison_forWeb2.jpg); background-repeat: no-repeat; border-radius: 10px; padding: 10px 25px; color: white; text-align: center; display: block; }
.nettoyage:hover { background-image: none; background-color: #F4B311; color: white; }
.nettoyagefond1 { background-color: #F4B311; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.nettoyagefond2 { background-color: #FA9E42; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.nettoyagefond3 { background-color: #847455; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.nettoyagefond4 { background-color: #f39879; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }

.gardiennage { background-image: url(img/GardiennagePlantes_forWeb.jpg); background-repeat: no-repeat; border-radius: 10px; padding: 10px 25px; color: white; text-align: center; display: block; }
.gardiennage:hover { background-image: none; background-color: #388D04; color: white; }
.gardiennagefond1 { background-color: #388D04; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.gardiennagefond2 { background-color: #A6DC2D; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }
.gardiennagefond3 { background-color: #447347; border-radius: 10px; padding: 10px 25px; color: white; display: block; text-decoration: none; }

.contact { background-color: #C4D0A4; border-radius: 10px; padding: 10px 25px; color: dimgray; text-align: center; display: block; text-decoration: none; }
.avis { background-color: #CC6666; border-radius: 10px; padding: 10px 25px; color: dimgray; text-align: center; display: block; text-decoration: none; }

#background { background-image: url("img/Photo-fleurs-cerisier.jpg"); background-repeat: no-repeat; background-position: bottom right; }
.background2 { background-image: url("img/photo-cabinet.jpg"); background-repeat: no-repeat; background-position: bottom right; }
.arriereplan { background-image: url(img/etoiles-jaunes-fond.png); background-size: 65%; background-repeat: no-repeat; background-position: right bottom; }
.arriereplanbamboo { background-image: url("img/bamboo.png"); background-size: 65%; background-repeat: no-repeat; background-position: left; }

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, #fff, #F8F6F4);
  border-radius: 15px;
  padding: 40px 20px;
  box-shadow: 0 2px 6px rgba(153, 102, 102, 0.15);
}
.hero-left, .hero-right { flex: 1 1 45%; padding: 20px; }
.pro { background-color: #A4CE91; color: #fff; padding: 30px; border-radius: 15px; text-align: center; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(164, 206, 145, 0.4); }
.benefits { background-color: #F8F6F4; border-left: 5px solid #00AAB0; padding: 20px 25px; border-radius: 10px; margin: 20px 0; }
.benefits ul { list-style: none; padding-left: 0; }
.benefits li::before { content: "🌿 "; color: #00AAB0; }
.note { background-color: #FFF8F7; border-left: 5px solid #996666; padding: 15px 20px; border-radius: 10px; font-style: italic; color: #666; margin-top: 15px; }

/* =========================
   PIED DE PAGE (FOOTER MODERN)
========================= */
footer {
	text-align: center;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	color: #595959;
	font-size: 85%;
}

.footer-modern {
  background: #F8F6F4;
  padding: 50px 0 20px 0;
  margin-top: 50px;
  width: 100%;
}

.legal-footer {
  text-align: center;
  margin-top: 60px;
  padding: 25px 15px;
  font-size: 0.9rem;
  color: #777;
  border-top: 1px solid #eee;
}

.legal-footer a { 
	color: #996666; 
	text-decoration: none !important; 
	transition: 0.3s; 
}
.legal-footer a:hover { color: #F47F20; }

/* =========================
   RESPONSIVE / MEDIA QUERIES ACTUELS
========================= */
@media screen and (max-width: 750px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}

/* LA MAGIE DU RESPONSIVE POUR ORDINATEUR : On redonne de l'air ! */
@media (min-width: 1024px) {
    /* Le conteneur se recentre avec de plus belles marges */
    .container {
        width: 90%;
        padding: 20px;
    }

    /* La grille s'aère */
    .grid {
        gap: 40px; 
    }

    /* Les cartes retrouvent leur rembourrage douillet */
    .card {
        padding: 30px;
    }

    /* Le reste de vos éléments d'en-tête */
    .header {
        flex-wrap: nowrap;
        padding: 10px 40px;
    }

    .button-rdv-mobile {
        display: none !important;
    }

    .header .slogan {
        display: block;
        margin-left: 15px;
        flex-grow: 1;
        text-align: left;
    }

    /* LA MAGIE DU RESPONSIVE POUR ORDINATEUR : On redonne de l'air ! */
@media (min-width: 1024px) {
    /* Le conteneur se recentre avec de plus belles marges */
    .container {
        width: 90%;
        padding: 20px;
    }

    /* La grille s'aère */
    .grid {
        gap: 40px; 
    }

    /* Les cartes retrouvent leur rembourrage douillet */
    .card {
        padding: 30px;
    }

    /* Le reste de vos éléments d'en-tête */
    .header {
        flex-wrap: nowrap;
        padding: 10px 40px;
    }

    .button-rdv-mobile {
        display: none !important;
    }

    .header .slogan {
        display: block;
        margin-left: 15px;
        flex-grow: 1;
        text-align: left;
    }

 .header .accordion {
        display: none !important;
    }

    .header .panel {
        display: block !important;
        max-height: none !important;
        overflow: visible;
        width: auto;
        padding: 0;
        background: transparent;
    }

    .style-nav ul {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 0;
    }

    .style-nav ul li {
        display: inline-block;
        margin: 0;
    }

    .nav-rdv-desktop {
        display: inline-block !important;
    }

    .style-nav ul li a {
        padding: 5px 10px;
        font-size: 0.85rem;
    }

/* (Ce code est à glisser À L'INTÉRIEUR de votre @media (min-width: 1024px) existant) */
    
    .img-hero-principale {
        width: 60%; /* Réduction automatique sur ordinateur */
    }
    
    .img-hero-secondaire {
        width: 45%; /* Réduction automatique sur ordinateur */
    }
}

    .style-nav ul {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 0;
    }

    .style-nav ul li {
        display: inline-block;
        margin: 0;
    }

    .nav-rdv-desktop {
        display: inline-block !important;
    }

    .style-nav ul li a {
        padding: 5px 10px;
        font-size: 0.85rem;
    }

/* (Ce code est à glisser À L'INTÉRIEUR de votre @media (min-width: 1024px) existant) */
    
    .img-hero-principale {
        width: 60%; /* Réduction automatique sur ordinateur */
    }
    
    .img-hero-secondaire {
        width: 45%; /* Réduction automatique sur ordinateur */
    }
}

/* =========================
   AJOUT : STYLE ICÔNE ACCUEIL
========================= */
.nav-home a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espace entre le texte et l'icône sur mobile */
}

.icon-home {
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.nav-home a:hover .icon-home {
    color: #00aab0;
    transform: scale(1.1); /* Léger effet dynamique au survol */
}

/* Optimisation pour les écrans d'ordinateurs */
@media (min-width: 1024px) {
    .nav-home a {
        padding: 5px 10px !important;
    }
    /* UX/SEO : Masque le mot "Accueil" sur grand écran pour épurer le menu, 
       l'icône seule suffit car le logo est juste à côté */
    .text-home {
        display: none;
    }
}