:root{
    --forest:#12372A; --pine:#1B4332; --sage:#52796F; --moss:#84A98C;
    --cream:#F4F1E9; --paper:#FBFAF6; --gold:#C9A24B; --ink:#1A231E; --line:#E2E0D5;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',-apple-system,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px}
  h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.1;letter-spacing:-.01em}

	.hero{
		position:relative;
		background:linear-gradient(155deg,#12372A 0%,#1B4332 55%,#245041 100%);
		color:#fff;
		overflow:hidden
		}
		
	.hero::after{
		content:"";
		position:absolute;
		right:-80px;
		bottom:-80px;
		width:420px;
		height:420px;
		background:radial-gradient(circle,rgba(132,169,140,.35),transparent 70%);
		pointer-events:none
		}
		
  .leaf{position:absolute;top:-40px;right:-30px;width:260px;height:260px;opacity:.13;transform:rotate(18deg)}
  
  .nav{
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  padding:22px 0;
	  position:relative;
	  z-index:10;
	  }
	  
  .brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces';font-size:22px;font-weight:700;letter-spacing:.3px}
  .brand .dot{width:30px;height:30px;border-radius:50%;background:var(--moss);display:grid;place-items:center;font-size:16px}
  .nav .cta-min{font-family:'Inter';font-size:13px;font-weight:600;color:#12372A;background:#fff;padding:9px 16px;border-radius:30px;text-decoration:none}
  
	.hero-in{
		position: relative;
		z-index: 2;
		padding: 34px 0 20px;
		max-width: 640px;

    /* 🟢 AJOUT : centre le bloc */
		margin-left: auto;
		margin-right: auto;
			}
			
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);background:rgba(132,169,140,.12);border:1px solid rgba(132,169,140,.3);padding:7px 14px;border-radius:30px;margin-bottom:22px}
  .hero h1{font-size:44px;font-weight:600;margin-bottom:18px}
  .hero h1 em{font-style:italic;color:var(--moss)}
  .hero p.lead{font-size:17px;color:#D8E3DC;max-width:520px;margin-bottom:28px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
  .btn{font-family:'Inter';font-size:15px;font-weight:600;padding:15px 26px;border-radius:30px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s;display:inline-flex;align-items:center;gap:9px}
  .btn-gold{background:var(--gold);color:#241d05;box-shadow:0 8px 22px rgba(201,162,75,.32)}
  .btn-gold:active{transform:translateY(1px)}
  .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.trust {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* 🟢 Les 3 éléments restent sur une ligne */
    gap: 80px;
    flex-wrap: nowrap;

    /* 🟢 Étend UNIQUEMENT le trust sur la largeur de l'écran */
    width: 100vw;
    margin-left: calc(50% - 50vw);

    margin-top: 80px;
    padding-top: 24px;

    border-top: 1px solid rgba(255,255,255,.14);
}
	.trust div {
		font-size: 13px;
		color: #C7D6CD;
	}
	.trust b {
		display: block;
		font-family: 'Fraunces';
		font-size: 24px;
		color: #fff;
		font-weight: 600;
	}
		
  section{padding:64px 0}
  .sec-head{max-width:600px;margin-bottom:40px}
	.sec-head .eyebrow2{
		font-size:25px;
		font-weight:700;
		letter-spacing:.1em;
		text-transform:uppercase;
		color:var(--sage);
		margin-bottom:25px;
		display:block;
		}
  .sec-head h2{font-size:33px;color:var(--forest);margin-bottom:12px}
  .sec-head p{font-size:16px;color:#5B6660}
  .services{background:var(--cream)}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .svc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .15s,box-shadow .15s}
  .svc:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,55,42,.08)}
  .svc .ic{font-size:26px;margin-bottom:12px}
  .svc h3{font-size:18px;color:var(--forest);margin-bottom:6px}
  .svc p{font-size:14px;color:#5B6660}
  .method{background:var(--forest);color:#fff}
  .method .sec-head h2{color:#fff}.method .sec-head .eyebrow2{color:var(--moss)}.method .sec-head p{color:#C7D6CD}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
  .step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px}
  .step .n{font-family:'Fraunces';font-size:15px;font-weight:700;color:var(--gold);margin-bottom:10px}
  .step h3{font-size:17px;color:#fff;margin-bottom:6px}
  .step p{font-size:14px;color:#C7D6CD}
  .eco{background:var(--paper)}
  .eco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
  .eco-card{border-left:3px solid var(--moss);padding:6px 0 6px 18px}
  .eco-card h3{font-size:16px;color:var(--forest);margin-bottom:5px;font-family:'Inter';font-weight:700}
  .eco-card p{font-size:14px;color:#5B6660}
  .showcase{background:var(--cream)}
  .ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
  .ba{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .ba-media{aspect-ratio:4/3;background:linear-gradient(135deg,#E8EDE8,#D5DFD6);display:grid;place-items:center;color:var(--sage)}
  .ba-media .ph{text-align:center;padding:20px}
  .ba-media .ph .pic{font-size:34px;margin-bottom:8px}
  .ba-media .ph small{font-size:12px;display:block;color:#8A968E;margin-top:4px}
  .ba-body{padding:16px 18px}
  .ba-body h3{font-size:16px;font-family:'Inter';font-weight:700;color:var(--forest);margin-bottom:3px}
  .ba-body p{font-size:13px;color:#5B6660}
  .note{margin-top:18px;font-size:13px;color:#6d7d72;background:rgba(132,169,140,.1);border:1px dashed var(--moss);border-radius:12px;padding:14px 16px}
  .avis{background:var(--paper)}
  .avis-empty{background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px 26px;text-align:center}
  .avis-empty .q{font-size:40px;color:var(--moss);font-family:'Fraunces';line-height:1}
  .avis-empty h3{font-size:20px;color:var(--forest);margin:10px 0 8px}
  .avis-empty p{font-size:15px;color:#5B6660;max-width:440px;margin:0 auto}
  .devis{background:var(--forest);color:#fff}
  .devis .sec-head{margin-bottom:28px}.devis .sec-head h2{color:#fff}.devis .sec-head .eyebrow2{color:var(--moss)}.devis .sec-head p{color:#C7D6CD}
  .form-card{background:var(--paper);border-radius:22px;padding:26px 22px;color:var(--ink)}
  .form-card label{font-size:13px;font-weight:600;color:var(--forest);display:block;margin:16px 0 6px}
  .form-card label.first{margin-top:0}
  .req{color:#B23A48}
  .form-card input,.form-card select,.form-card textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:border-color .15s}
  .form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--sage)}
  .form-card textarea{resize:vertical;min-height:74px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .chips button{font-size:13px;font-weight:600;padding:10px 14px;border:1.5px solid var(--line);background:#fff;color:#41504A;border-radius:30px;cursor:pointer;transition:all .12s}
  .chips button.on{background:var(--forest);color:#fff;border-color:var(--forest)}
  .send{width:100%;margin-top:22px;padding:16px;background:var(--gold);color:#241d05;border:none;border-radius:13px;font-size:16px;font-weight:700;cursor:pointer}
  .send:active{transform:translateY(1px)}
  .altline{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .altline a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:600}
  .altline .call{background:var(--forest);color:#fff}
  .altline .wa{background:#25D366;color:#fff}
  .errbox{background:#FDE8E8;color:#B23A48;font-size:14px;font-weight:600;padding:11px 14px;border-radius:11px;margin-top:14px;display:none}
  .okbox{background:#E7F5EC;color:#1B6B3A;font-size:14px;font-weight:600;padding:14px;border-radius:11px;margin-top:14px;display:none;text-align:center}
  footer{background:#0E2A20;color:#B9CABF;padding:44px 0 30px}
  footer .fgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
  footer .fbrand{color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:9px;font-family:'Fraunces';font-size:20px;font-weight:700}
  footer p{font-size:14px;line-height:1.8}
  footer a{color:var(--moss);text-decoration:none}
  footer .legal{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#7C9186}
  @media(max-width:640px){.hero h1{font-size:33px}.sec-head h2{font-size:26px}.row2{grid-template-columns:1fr}section{padding:48px 0}}
  
  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: white;
}

.maison {
    width: 40px;
    height: auto;
    margin-right: 10px;

    /* 🟢 L'image passe au-dessus du halo */
    position: relative;
    z-index: 3;
}

/* ==========================
   BLOC DEVIS + CALENDLY
   ========================== */

.devis-grid {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:35px;
    align-items: stretch;
}

.form-card,
.calendly-card {
    width: 100%;
    box-sizing: border-box;
    height: auto;
}


.calendly-card {
    background:var(--paper);
    border-radius:22px;
    padding:26px 22px;
    color:var(--ink);
}


.calendly-card h3 {
    font-size:22px;
    color:var(--forest);
    margin-bottom:8px;
}


.calendly-card p {
    color:#5B6660;
    margin-bottom:18px;
}


.calendly-inline-widget {
    width:100%;
}




/* Passage en colonne sur tablette/mobile */

@media(max-width:900px){

    .devis-grid {
        grid-template-columns:1fr;
    }

}

/* ========================================= */
/* MENU DÉCLENCHÉ PAR maison.jpg */
/* ========================================= */

.menu-maison {
    position: relative;
    display: inline-flex;

    width: 56px;
    height: 56px;

    align-items: center;
    justify-content: center;
}
/* L'image maison.jpg */

.menu-maison .maison {
    cursor: pointer;
}

/* Les onglets sont cachés */

.menu-maison .onglets {
    position: absolute;

    /* 🟢 JUSTE SOUS maison.jpg */
    top: 100%;
    left: 0;

    display: flex;

    width: max-content;

    background: rgba(255, 255, 255, 0.7);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;

    /* 🟢 Petite animation */
    transform: translateY(-10px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}


/* 🟢 MODIFIÉ */


.menu-maison:hover .onglets {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

/* Apparition lorsque la souris passe sur maison.jpg */

.menu-maison:hover .onglets {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Les liens */

.menu-maison .onglets a {
    display: block;

    padding: 12px 18px;

    color: #12372A;

    text-decoration: none;

    font-family: 'Inter', sans-serif;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}

/* Effet au survol d'un onglet */

.menu-maison .onglets a:hover {
    background: rgba(255, 255, 255, 0.5);
}


/* ================================================= */
/* 🟢 RAYONS DU SOLEIL */
/* ================================================= */

.menu-maison::after {
    content: "";

    position: absolute;

    width: 68px;
    height: 68px;

    border-radius: 50%;

    z-index: 0;

    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,255,255,0.9) 0deg 5deg,
        transparent 5deg 15deg
    );

    animation: rayonsMaison 0.8s ease-in-out infinite;
}


/* ================================================= */
/* 🟢 ANIMATION DU CERCLE */
/* ================================================= */

@keyframes haloMaison {

    0%, 100% {
        opacity: 0.65;
        transform: scale(0.95);
        box-shadow: 0 0 5px rgba(255,255,255,0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow: 0 0 18px rgba(255,255,255,0.9);
    }

}


/* ================================================= */
/* 🟢 ANIMATION DES RAYONS */
/* ================================================= */

@keyframes rayonsMaison {

    0%, 100% {
        opacity: 0.15;
        transform: scale(0.9) rotate(0deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1) rotate(8deg);
    }

}

/* ================================================= */
/* BOUTON "DEMANDER UN DEVIS GRATUIT" */
/* ================================================= */

.btn-devis {
    /* 🟢 Position fixe en haut à droite de l'écran */
    position: fixed;
    top: 20px;
    right: 25px;

    /* 🟢 Passe au-dessus des autres éléments */
    z-index: 9999;

    /* 🟡 Couleur jaune or */
    background: #D4A72C;

    /* Couleur du texte */
    color: #12372A;

    /* 🟢 Forme "piste d'athlétisme" */
    border-radius: 999px;

    /* Taille du bouton */
    padding: 14px 24px;

    /* Texte */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;

    /* Pas de soulignement */
    text-decoration: none;

    /* Petite ombre */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Animation */
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* ================================================= */
/* EFFET AU SURVOL */
/* ================================================= */

.btn-devis:hover {
    background: #E5B93F;

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(212, 167, 44, 0.35);
}

/* ========================================= */
/* 🟢 RÉSEAUX SOCIAUX - FLANC GAUCHE FOOTER */
/* ========================================= */

footer .wrap {
    position: relative;
}

.socials {
    position: absolute;

    /* 🟢 Décalage supplémentaire vers la gauche */
    left: -180px;

    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 22px;
}

.socials a {
    color: #fff;

    font-size: 28px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.socials a:hover {
    transform: translateY(-3px);
    opacity: 0.7;
}

/* 📱 Position du bouton devis sur mobile */
/* 📱 Bouton devis — mobile uniquement */
@media (max-width: 768px) {
    .btn-devis {
        top: 170px;
        right: 12px;
        padding: 8px 15px;
        font-size: 12px;
    }
}

/* ========================================= */
/* 📱 MENU MOBILE : reste dans l'écran */
/* ========================================= */

@media (max-width: 768px) {

    .menu-maison .onglets {
        width: calc(100vw - 82px);
        max-width: calc(100vw - 82px);
        box-sizing: border-box;

        flex-wrap: wrap;
        overflow: hidden;
    }

    .menu-maison .onglets a {
        white-space: nowrap;
        padding: 12px 14px;
        font-size: 14px;
    }

}

.ba-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.resultats-images{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin-top:90px;
  flex-wrap:wrap;
}

.resultats-images img{
  width:360px;
  height:270px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  border:1px solid var(--line);
}

/* Tablette */
@media(max-width:900px){
  .resultats-images{
    gap:18px;
  }

  .resultats-images img{
    width:130px;
    height:98px;
  }
}

/* Téléphone */
@media(max-width:640px){
  .resultats-images{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding:0 15px;
  }

  .resultats-images img{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
  }
}

.resultats-titre{
  margin-top:30px;
  text-align:center;
}

.resultats-titre .eyebrow2{
  font-family:'Inter',-apple-system,sans-serif;
  font-size:25px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:25px;
  display:block;
}

/* ========================================= */
/* 📱 CORRECTION MOBILE DU BAS DU SITE */
/* ========================================= */

@media (max-width: 768px) {

    /* 100% / Rapide / IDF */
    .trust {
        width: 100%;
        margin-left: 0;
        gap: 10px;
        padding: 24px 10px 0;
        box-sizing: border-box;
        flex-wrap: nowrap;
    }

    .trust > div {
        flex: 1;
        min-width: 0;
        text-align: center;
        font-size: 13px;
        line-height: 1.5;
    }

    .trust b {
        font-size: 24px;
    }

    /* Réseaux sociaux */
    .socials {
        position: static;
        transform: none;
        justify-content: center;
        margin: 0 auto 30px;
        gap: 25px;
    }

    .socials a {
        font-size: 28px;
    }

    /* Footer */
    footer .fgrid {
        flex-direction: column;
        gap: 25px;
    }
}

/* =========================================
   📱 ADAPTATION TABLETTE
   ========================================= */

@media (min-width: 769px) and (max-width: 1024px) {

    /* Bloc 100% / Rapide / IDF */
    .trust {
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
        gap: 20px;
        padding: 30px 20px;
    }

    .trust > div {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* Réseaux sociaux du footer */
    .socials {
        position: static;
        transform: none;
        justify-content: center;
        margin: 0 auto 30px;
        gap: 25px;
    }

    .socials a {
        font-size: 28px;
    }

    /* Footer */
    footer .fgrid {
        flex-wrap: wrap;
        gap: 30px;
    }
}

/* =========================================
   PRÉSENTATION ECO-ZEN
   ========================================= */

.ecozen-presentation {
    padding: 80px 0;
    background: #f7f5ef;
}

.ecozen-presentation h2 {
    margin-bottom: 30px;
    color: #123f32;
}

.ecozen-presentation p {
    max-width: 900px;
    margin-bottom: 20px;
}

.ecozen-points {
    display: grid;
    
    gap: 25px;
    margin-top: 40px;
    margin-bottom: 35px;
}

.ecozen-point {
    display: flex;
    
    gap: 12px;
}

.ecozen-point span {
    font-size: 30px;
}

.ecozen-point strong {
    color: #123f32;
}

.ecozen-signature {
    margin-top: 35px;
    color: #123f32;
}


/* =========================================
   TABLETTE
   ========================================= */

@media (min-width: 769px) and (max-width: 1024px) {

    .ecozen-points {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .ecozen-presentation {
        padding: 55px 20px;
    }

    .ecozen-points {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}