/*
Theme Name: Nouveau Départ Habitat 83
Theme URI: https://nouveaudeparthabitat83.fr
Author: Nouveau Départ Habitat 83
Description: Thème sur mesure pour Nouveau Départ Habitat 83 — nettoyage extrême, débarras, rénovation et réaménagement de l'habitat dans le Var (83). "Redonner vie à votre habitat."
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nouveau-depart-habitat-83
*/

:root{
    --navy-deep:#141f33;
    --navy:#1c2b47;
    --navy-soft:#2b3e5f;
    --gold:#b7864f;
    --gold-light:#d9ab74;
    --glow:#f6d9a0;
    --cream:#faf6ef;
    --cream-deep:#f2ead9;
    --sage:#5c6b4f;
    --ink:#22293a;
    --line: rgba(20,31,51,0.12);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
  figure{margin:0;}
  body{
    margin:0;
    overflow-x:hidden;
    max-width:100vw;
    background:var(--cream);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    line-height:1.6;
  }
  h1,h2,h3,.serif{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:0.01em;
    color:var(--navy-deep);
  }
  .eyebrow{
    font-family:'Work Sans', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:0.72rem;
    color:var(--gold);
    font-weight:600;
  }
  a{color:inherit;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  /* ---- Header ---- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,239,0.92);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 32px; max-width:1180px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:14px;}
  .brand img{height:76px; width:76px; object-fit:contain;}
  .brand-text{line-height:1.15;}
  .brand-text .name{font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; color:var(--navy-deep);}
  .brand-text .sub{font-size:0.68rem; letter-spacing:0.15em; color:var(--gold); text-transform:uppercase;}

  nav.links{font-size:0.92rem; font-weight:500;}
  nav.links ul{list-style:none; margin:0; padding:0;}
  nav.links > ul{display:flex; gap:30px; align-items:center;}
  nav.links > ul > li{position:relative;}
  nav.links a{text-decoration:none; color:var(--navy); position:relative; padding:4px 0; display:inline-block;}
  nav.links a:hover{color:var(--gold);}
  nav.links .menu-item-has-children > a::after{content:"▾"; font-size:0.6rem; margin-left:6px; color:var(--gold); display:inline-block;}

  nav.links .sub-menu{
    display:none; position:absolute; top:100%; left:0; margin-top:14px;
    background:#fff; border:1px solid var(--line); min-width:250px;
    padding:8px 0; box-shadow:0 18px 40px rgba(20,31,51,0.14); z-index:60;
  }
  nav.links li:hover > .sub-menu,
  nav.links li:focus-within > .sub-menu{display:block;}
  nav.links .sub-menu li{position:static;}
  nav.links .sub-menu a{
    display:block; padding:10px 20px; font-size:0.86rem; color:var(--navy);
    white-space:nowrap;
  }
  nav.links .sub-menu a:hover{background:var(--cream-deep); color:var(--gold);}
  .cta-btn{
    background:var(--navy-deep); color:var(--cream); border:none;
    padding:12px 24px; border-radius:2px; font-family:'Work Sans';
    font-size:0.88rem; font-weight:600; letter-spacing:0.03em;
    cursor:pointer; text-decoration:none; display:inline-block;
    transition:background 0.25s ease;
  }
  .cta-btn:hover{background:var(--gold);}
  .cta-btn.ghost{
    background:transparent; border:1px solid var(--navy-deep); color:var(--navy-deep);
  }
  .cta-btn.ghost:hover{background:var(--navy-deep); color:var(--cream);}

  /* ---- Hero ---- */
  .hero{
    position:relative; overflow:hidden;
    background: radial-gradient(120% 100% at 15% 0%, #1e2c46 0%, var(--navy-deep) 55%, #0f1826 100%);
    color:var(--cream);
    padding:96px 0 70px;
  }
  .hero .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
  .hero h1{
    color:#fff; font-size:3.1rem; line-height:1.08; margin:18px 0 22px;
    font-weight:500;
  }
  .hero h1 em{font-style:italic; color:var(--glow);}
  .hero p.lead{
    font-size:1.12rem; color:#d9dfec; max-width:480px; margin:0 0 34px;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-ctas .cta-btn.ghost{border-color:rgba(255,255,255,0.5); color:#fff;}
  .hero-ctas .cta-btn.ghost:hover{background:#fff; color:var(--navy-deep);}

  .door-scene{position:relative; width:100%; aspect-ratio:1/1.05; max-width:420px; margin:0 auto;}
  .door-scene svg{width:100%; height:100%; display:block;}
  .glow-anim{animation:pulse 4s ease-in-out infinite;}
  @keyframes pulse{
    0%,100%{opacity:0.75;}
    50%{opacity:1;}
  }

  .trust-strip{
    border-top:1px solid rgba(255,255,255,0.12);
    margin-top:64px; padding-top:28px;
    display:flex; gap:40px; flex-wrap:wrap;
    font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
    color:#aab4c8;
  }
  .trust-strip span{color:var(--gold-light); margin-right:6px;}

  /* ---- Section generic ---- */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
  .section-head h2{font-size:2.2rem; margin:14px 0 16px;}
  .section-head p{color:#4b5468; font-size:1.02rem;}
  .divider-arc{
    width:64px; height:32px; margin:0 auto;
    border-top:2px solid var(--gold); border-radius:50%;
  }

  /* ---- Services ---- */
  .services{background:var(--cream-deep);}
  .service-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  }
  .service-card{
    background:var(--cream); border:1px solid var(--line);
    padding:34px 26px; text-align:left; position:relative;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    display:block; text-decoration:none; color:inherit;
  }
  .service-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,31,51,0.12);}
  .service-icon{width:46px; height:46px; margin-bottom:20px;}
  .service-card h3{font-size:1.18rem; margin:0 0 10px;}
  .service-card p{font-size:0.92rem; color:#54607a; margin:0 0 14px;}
  .service-card .card-link{font-size:0.85rem; font-weight:600; color:var(--gold);}
  .service-card .num{
    position:absolute; top:26px; right:26px;
    font-family:'Fraunces',serif; font-size:0.78rem; color:var(--gold);
  }

  /* ---- Approche / valeurs ---- */
  .approach{
    background:var(--navy-deep); color:var(--cream);
  }
  .approach .wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
  .approach h2{color:#fff;}
  .approach p.lead{color:#c9d1e2; font-size:1.02rem;}
  .values-list{display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; margin-top:32px;}
  .value-item{border-top:1px solid rgba(255,255,255,0.18); padding-top:16px;}
  .value-item .serif{font-size:1.05rem; color:var(--glow); display:block; margin-bottom:6px;}
  .value-item span.desc{font-size:0.88rem; color:#aab4c8;}

  .approach-visual{
    background:var(--navy-soft); border:1px solid rgba(255,255,255,0.12);
    padding:40px; position:relative;
  }
  .approach-visual .quote{font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; line-height:1.5; color:#fff;}
  .approach-visual .quote-mark{font-size:3rem; color:var(--gold); line-height:0; display:block; margin-bottom:10px;}

  /* ---- Réalisations avant/après ---- */
  .realisations .wrap{max-width:1180px;}
  .before-after{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  .ba-card{background:#fff; border:1px solid var(--line); overflow:hidden;}
  .ba-images{display:grid; grid-template-columns:1fr 1fr; height:180px;}
  .ba-images div{position:relative; overflow:hidden;}
  .ba-before{background:linear-gradient(135deg,#9aa0ab,#6d727c);}
  .ba-after{background:linear-gradient(135deg,#e8d4a8,#c9a568);}
  .ba-images span.tag{
    position:absolute; bottom:8px; left:8px; font-size:0.65rem; letter-spacing:0.1em;
    text-transform:uppercase; background:rgba(20,31,51,0.7); color:#fff; padding:3px 8px;
  }
  .ba-card .info{padding:20px 22px;}
  .ba-card h4{font-family:'Fraunces',serif; font-size:1.02rem; margin:0 0 6px; color:var(--navy-deep);}
  .ba-card p{font-size:0.86rem; color:#5a6478; margin:0;}

  /* ---- Zone d'intervention ---- */
  .zone{background:var(--cream-deep);}
  .zone .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
  .city-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .city-tags span, .city-tags a{ text-decoration:none; }
  .city-tags span, .city-tags a{
    border:1px solid var(--gold); color:var(--navy-deep); font-size:0.85rem;
    padding:8px 16px; border-radius:20px; background:#fff;
  }

  /* ---- Contact ---- */
  .contact{
    background: radial-gradient(120% 100% at 85% 100%, #1e2c46 0%, var(--navy-deep) 60%);
    color:var(--cream); text-align:center;
  }
  .contact h2{color:#fff;}
  .contact p.lead{color:#c9d1e2; max-width:520px; margin:0 auto 34px;}
  .contact-ctas{display:flex; justify-content:center; gap:16px; flex-wrap:wrap;}
  .contact-ctas .cta-btn.ghost{
    background:var(--gold); border-color:var(--gold); color:var(--navy-deep);
  }
  .contact-ctas .cta-btn.ghost:hover{background:var(--gold-light); border-color:var(--gold-light); color:var(--navy-deep);}

  footer{background:var(--navy-deep); color:#aab4c8; padding:50px 0 26px; font-size:0.86rem;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,0.12);}
  .footer-grid h4{color:#fff; font-family:'Fraunces',serif; font-weight:500; font-size:1rem; margin:0 0 14px;}
  .footer-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
  .footer-grid a{text-decoration:none; color:#aab4c8;}
  .footer-grid a:hover{color:var(--gold-light);}
  .footer-bottom{padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  @media(max-width:920px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero{padding-top:120px;}
    .door-scene{order:-1; max-width:280px;}
    .service-grid{grid-template-columns:1fr 1fr;}
    .approach .wrap{grid-template-columns:1fr;}
    .values-list{grid-template-columns:1fr;}
    .before-after{grid-template-columns:1fr;}
    .zone .wrap{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    nav.links{display:none;}
    .hero h1{font-size:2.3rem;}
  }
/* ---- Pages internes : sous-hero ---- */
.subhero{
  background: radial-gradient(120% 100% at 15% 0%, #1e2c46 0%, var(--navy-deep) 55%, #0f1826 100%);
  color:#fff; padding:64px 0 56px;
}
.breadcrumb{font-size:0.82rem; color:#aab4c8; margin-bottom:18px;}
.breadcrumb a{color:#d9ab74; text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.subhero h1{color:#fff; font-size:2.5rem; margin:0 0 16px; line-height:1.15;}
.subhero p.lead{color:#d9dfec; font-size:1.05rem; max-width:600px; margin:0;}

/* ---- Contenu deux colonnes (texte + aside) ---- */
.content-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start;}
.content-main h2{font-size:1.6rem; margin:0 0 16px;}
.content-main p{color:#3f485c; margin:0 0 22px;}
.included-list{list-style:none; padding:0; margin:0 0 30px; display:grid; gap:12px;}
.included-list li{
  display:flex; gap:12px; align-items:flex-start; font-size:0.96rem; color:#2c3448;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.included-list li .check{color:var(--gold); font-family:'Fraunces',serif; flex-shrink:0;}

.process-steps{display:grid; gap:22px; margin:26px 0 30px;}
.process-step{display:grid; grid-template-columns:44px 1fr; gap:16px;}
.process-step .step-num{
  width:44px; height:44px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; color:var(--gold); font-size:1rem;
}
.process-step h4{margin:0 0 6px; font-family:'Fraunces',serif; font-size:1.05rem; color:var(--navy-deep);}
.process-step p{margin:0; font-size:0.9rem; color:#54607a;}

.aside-card{
  background:var(--cream-deep); border:1px solid var(--line); padding:30px 26px;
  position:sticky; top:100px;
}
.aside-card h4{font-family:'Fraunces',serif; font-size:1.1rem; margin:0 0 14px; color:var(--navy-deep);}
.aside-card p{font-size:0.9rem; color:#4b5468; margin:0 0 22px;}
.aside-card .cta-btn{width:100%; text-align:center;}
.aside-card ul{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:8px; font-size:0.86rem; color:#4b5468;}

.related-services{background:var(--cream-deep); padding:70px 0;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.related-card{
  background:var(--cream); border:1px solid var(--line); padding:26px; text-decoration:none;
  color:inherit; display:block; transition:transform 0.2s ease;
}
.related-card:hover{transform:translateY(-4px);}
.related-card h4{font-family:'Fraunces',serif; font-size:1.02rem; margin:0 0 8px; color:var(--navy-deep);}
.related-card p{font-size:0.85rem; color:#54607a; margin:0;}

@media(max-width:920px){
  .content-grid{grid-template-columns:1fr;}
  .aside-card{position:static;}
  .related-grid{grid-template-columns:1fr;}
  .subhero h1{font-size:2rem;}
}

/* ---- Photos réelles : responsive + habillage ---- */
img{max-width:100%; height:auto; display:block;}
.img-frame{overflow:hidden; border:1px solid var(--line); background:#fff;}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---- Réalisations home (vraies photos) ---- */
.realisations-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.realisations-grid .img-frame{aspect-ratio:4/3;}
.realisations-grid .wide{grid-column:1 / -1;}
.realisations-grid .wide .img-frame{aspect-ratio:16/9;}
.realisations-cta{text-align:center; margin-top:40px;}

/* ---- Bloc flotte / matériel ---- */
.fleet{background:var(--navy-deep); color:var(--cream); padding:80px 0;}
.fleet h2{color:#fff;}
.fleet .section-head p{color:#c9d1e2;}
.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px;}
.fleet-grid .img-frame{aspect-ratio:4/3; border-color:rgba(255,255,255,0.15);}
.fleet-grid figcaption{font-size:0.85rem; color:#aab4c8; margin-top:10px; text-align:center;}

/* ---- Étude de cas (avant/après avec texte) ---- */
.case-study .wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}
.case-study .img-frame{aspect-ratio:3/4;}
.case-study figcaption{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--gold); margin-top:10px; text-align:center; font-weight:600;
}

/* ---- Galerie simple (pages services) ---- */
.simple-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 40px;}
.simple-gallery .img-frame{aspect-ratio:4/3;}
.simple-gallery figcaption{font-size:0.8rem; color:#54607a; margin-top:8px; text-align:center;}

@media(max-width:920px){
  .realisations-grid{grid-template-columns:1fr;}
  .fleet-grid{grid-template-columns:1fr;}
  .case-study .wrap{grid-template-columns:1fr;}
  .simple-gallery{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .simple-gallery{grid-template-columns:1fr;}
}

/* ---- Villes desservies (footer, référencement local) ---- */
.footer-villes{
  border-top:1px solid rgba(255,255,255,0.12);
  padding:26px 0 22px;
}
.footer-villes h4{
  color:#fff; font-family:'Fraunces',serif; font-weight:500; font-size:0.95rem;
  margin:0 0 14px;
}
.footer-villes-list{
  display:flex; flex-wrap:wrap; gap:6px 4px;
  font-size:0.8rem;
}
.footer-villes-list a{
  color:#aab4c8; text-decoration:none; padding:2px 0;
  white-space:nowrap;
}
.footer-villes-list a:not(:last-child)::after{
  content:"·"; color:#465577; margin-left:8px;
}
.footer-villes-list a:hover{color:var(--gold-light);}

@media(max-width:920px){
  .footer-villes-list{font-size:0.76rem;}
}

/* ---- Menu mobile : hamburger + logo centré ---- */
.menu-toggle-checkbox{ display:none; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:26px; height:22px; cursor:pointer; background:none; border:none; padding:0;
}
.hamburger span{
  display:block; height:2px; width:100%; background:var(--navy-deep);
  border-radius:2px; transition:transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle-checkbox:checked ~ .nav .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle-checkbox:checked ~ .nav .hamburger span:nth-child(2){ opacity:0; }
.menu-toggle-checkbox:checked ~ .nav .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; flex-direction:column;
  max-height:0; overflow:hidden;
  background:var(--cream); border-bottom:1px solid var(--line);
  padding:0 24px; transition:max-height 0.3s ease, padding 0.3s ease;
}
.menu-toggle-checkbox:checked ~ .mobile-menu{
  display:flex; max-height:760px; padding:14px 24px 26px; overflow-y:auto;
}
.mobile-menu-list{ display:flex; flex-direction:column; }
.mobile-menu-list ul{list-style:none; margin:0; padding:0;}
.mobile-menu-list > ul{display:flex; flex-direction:column;}
.mobile-menu-list a{
  text-decoration:none; color:var(--navy); font-size:1rem; font-weight:500;
  padding:14px 0; border-bottom:1px solid var(--line); display:block;
}
.mobile-menu-list .menu-item-has-children > a::after{content:" ▾"; font-size:0.7rem; color:var(--gold);}
.mobile-menu-list .sub-menu{padding:0 0 6px 16px;}
.mobile-menu-list .sub-menu a{
  font-size:0.88rem; font-weight:400; color:#54607a; padding:10px 0; border-bottom:none;
}
.mobile-menu .cta-btn{ margin-top:18px; text-align:center; }

@media(max-width:920px){
  .nav{
    display:grid; grid-template-columns:50px 1fr 50px;
    align-items:center; padding:10px 20px;
  }
  .hamburger{ display:flex; grid-column:1; justify-self:start; }
  .brand{ grid-column:2; justify-self:center; }
  .brand a{ flex-direction:column; gap:6px !important; text-align:center; }
  .brand img{ height:96px; width:96px; }
  .brand-text .name{ font-size:0.92rem; }
  .brand-text .sub{ font-size:0.6rem; }
  .header-cta{ grid-column:3; display:none; }
}