/*
Theme Name: Multiservices Toiture
Theme URI: https://multiservices-toiture.fr
Author: Cedric
Description: Thème WordPress moderne et design pour Multiservices Toiture
Version: 5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: multiservices-toiture
*/
@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600&display=swap');

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
  background: url('assets/images/bg-site.jpg') no-repeat center center fixed;
  background-size: cover;
}
/* === PALETTE === */
:root{
  --bg-dark:#0d0d0d;
  --bg-mid:#1f1f1f;
  --bg-light:#f8f8f8;
  --gold:#d4af37;
  --gold-soft:#fff9e6;
  --text:#111;
  --white:#fff;
}

/* Sections génériques */
.section{max-width:1280px;margin:0 auto;padding:56px 24px;}
#accueil .hero{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;}
#accueil .hero .hero-bg{width:100%;height:58vh;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05);}
#accueil .hero .hero-inner{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  max-width:1280px;margin:0 auto;padding:24px;gap:16px;
}
#accueil .hero h1{font-size:clamp(32px,5vw,64px);color:var(--white);margin:0;}
#accueil .hero p{font-size:clamp(16px,2.2vw,20px);color:#f1f1f1;margin:8px 0 16px;}

/* Carrousel */
.carousel-wrap{background:var(--bg-dark);padding-top:36px;padding-bottom:36px;}
.carousel{position:relative;overflow:hidden}
.carousel .track{display:flex;will-change:transform;transition:transform .5s ease}
.carousel .slide{flex:0 0 auto;width:100%;padding:0 10px;box-sizing:border-box}
.carousel .slide img{width:100%;height:300px;object-fit:cover;border-radius:12px}
.carousel .nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;
  width:44px;height:44px;font-size:28px;cursor:pointer
}
.carousel .nav.prev{left:10px}
.carousel .nav.next{right:10px}

/* Présentation + formulaire (fond clair) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;background:var(--bg-light);border-radius:16px}
.split .about h2{font-size:32px;color:#222;margin:0 0 12px}
.split .about h2 span{color:var(--gold)}
.split .about p{color:#333;line-height:1.6}
.split .badges{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.split .badges li{background:#fff;border:1px solid #eee;padding:8px 12px;border-radius:999px;color:#333}

.form-card{background:#fff;border-radius:16px;box-shadow:0 6px 30px rgba(0,0,0,.06);padding:22px}
.form-card h3{margin:0 0 14px;color:#222}
.devis-form .row{display:flex;gap:10px}
.devis-form input,.devis-form select,.devis-form textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid #e5e5e5;background:#fafafa;color:#111;
}
.devis-form textarea{resize:vertical}
.devis-form button{
  margin-top:8px;width:100%;padding:14px;border-radius:999px;border:2px solid var(--gold);
  background:var(--gold);color:#fff;font-weight:700;cursor:pointer;transition:.25s
}
.devis-form button:hover{background:transparent;color:var(--gold)}
.form-ok,.form-ko{margin-top:10px;padding:10px;border-radius:8px;font-weight:600}
.form-ok{background:#eaf9ef;color:#126e2f}
.form-ko{background:#ffecec;color:#b30000}

/* Témoignages (fond doré très léger) */
.testimonials{background:var(--gold-soft);border-radius:16px}
.testimonials h2{margin:0 0 22px;color:#1a1a1a}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.avis{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;text-align:left}
.avis .stars{color:var(--gold);margin-bottom:8px;font-size:18px}
.avis strong{color:#222}

/* Responsive */
@media (max-width: 1024px){
  .split{grid-template-columns:1fr}
  .carousel .slide img{height:240px}
}
@media (max-width: 640px){
  .carousel .nav{display:none} /* en mobile : swipe au doigt */
  .avis-grid{grid-template-columns:1fr}
}