/* ==========================================================================
   SUNNY HABITAT ENERGIE — reproduction pixel-perfect de la maquette
   Reference desktop : 1920px. Points de rupture : 1440 / 1200 / 1024 / 768 / 480.
   ========================================================================== */

/* ==========================================================================
   1. RESET & VARIABLES GLOBALES
   ========================================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --color-black:#000000;
  --color-orange:#EDA000;
  --color-green:#27A736;
  --color-green-dark:#1f8a2b;
  --color-mint:#CCEAD0;
  --color-gray-text:#D2D2D2;
  --color-white:#FFFFFF;
  --font-display:'Baloo 2', sans-serif;
  --font-body:'Open Sans', Arial, sans-serif;
  --container-width:1300px;
  --cards-width:1294px;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--color-black);
  font-family:var(--font-body);
  width:100%;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; }

/* La maquette est concue sur une reference desktop de 1920px, mais toute
   la mise en page ci-dessous est fluide (%, max-width, flex-shrink) afin de
   s'adapter nativement a 1920 / 1440 / 1200px sans rupture de grille. */
.site-wrapper{
  width:100%;
  max-width:1920px;
  margin:0 auto;
  background:var(--color-black);
  position:relative;
}

.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 20px;
}

.btn{
  display:inline-block;
  background:var(--color-green);
  color:var(--color-white);
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  text-decoration:none;
  padding:14px 28px;
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ background:var(--color-green-dark); }

/* ==========================================================================
   2. BARRE SUPERIEURE ORANGE
   ========================================================================== */
.top-bar{
  height:10px;
  width:100%;
  background:var(--color-orange);
}

/* ==========================================================================
   3. HEADER : téléphone / logo / bouton connexion
   ========================================================================== */
.header{
  background:var(--color-black);
  padding-top:14px;
  position:relative;
}

.header-inner{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:130px;
  flex-wrap:wrap;
  gap:16px;
}

/* --- bloc téléphone / facebook (gauche) --- */
.header-contact{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--color-white);
  font-size:16px;
  font-weight:600;
  flex:0 0 auto;
}
.header-contact .icon-phone{ width:16px; height:16px; }
.header-contact .divider{ color:#555; font-weight:400; }
.header-contact .icon-fb{ width:16px; height:16px; }

/* --- logo central --- */
.logo{
  display:flex;
  justify-content:center;
  flex:0 0 auto;
}
.logo-img{ height:100px; width:auto; }
.logo.logo-small .logo-img{ height:78px; }

/* --- bouton connexion clients (droite) --- */
.header-cta{ flex:0 0 auto; }

/* ==========================================================================
   4. NAVIGATION PRINCIPALE (+ bascule mobile 100% CSS, sans JavaScript)
   ========================================================================== */
.nav{
  background:var(--color-black);
  padding:14px 0 20px;
}
.nav ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 38px;
}
.nav a{
  color:var(--color-white);
  font-size:16px;
  font-weight:600;
  text-decoration:none;
}
.nav a:hover{ color:var(--color-orange); }

/* case a cocher + etiquette = interrupteur de menu mobile, sans JS */
.nav-toggle-checkbox{ display:none; }
.nav-toggle-label{
  display:none;
  position:absolute;
  top:26px;
  right:24px;
  width:32px;
  height:24px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  z-index:20;
}
.nav-toggle-label span{
  display:block;
  height:3px;
  width:100%;
  background:var(--color-white);
  border-radius:2px;
}

/* ==========================================================================
   5. SECTION HERO (image plein ecran : salon / poele a bois)
   ========================================================================== */
.hero{
  position:relative;
  height:708px;
  overflow:hidden;
}
.hero .section-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

/* Texte accessible uniquement (le texte visuel est deja present dans la photo) */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Zone cliquable invisible calee en % sur le bouton visible dans l'image source,
   afin de conserver un vrai lien fonctionnel sans dupliquer le bouton a l'ecran */
.cta-overlay{
  position:absolute;
  display:block;
  z-index:2;
}
.cta-hero{      left:46.46%; width:8.44%; top:52.68%; height:6.07%; }
.cta-radiator{  left:45.78%; width:8.44%; top:61.05%; height:9.05%; }
.cta-discover{  left:45.78%; width:8.44%; top:62.66%; height:9.23%; }

/* ==========================================================================
   6. SECTION "SPECIALISTE EN AMELIORATION DE L'HABITAT" (fond noir)
   ========================================================================== */
.specialiste{
  background:var(--color-black);
  padding:70px 0 80px;
  text-align:center;
}
.specialiste h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:38px;
  color:var(--color-white);
  margin-bottom:34px;
}
.specialiste p{
  max-width:1170px;
  margin:0 auto 38px;
  color:var(--color-gray-text);
  font-size:16px;
  line-height:1.85;
}

/* ==========================================================================
   7. SECTION RADIATEUR (image reelle, texte + bouton deja incrustes)
   ========================================================================== */
.radiator{
  position:relative;
  height:475px;
  overflow:hidden;
}
.radiator .section-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

/* ==========================================================================
   8. GRILLE DE CARTES (installations / systemes + réalisations)
   ========================================================================== */
.cards-section{
  background:var(--color-black);
  padding:40px 0 155px;
  text-align:center;
}
.cards-section > h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:32px;
  line-height:1.3;
  color:var(--color-white);
  margin-bottom:20px;
  padding:0 20px;
}

.cards-grid{
  width:100%;
  max-width:var(--cards-width); /* largeur exacte mesuree sur la maquette : 3 cartes x 395px + 2 x 53px */
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:94px 53px;
}

.card{
  flex:0 1 395px;
  max-width:395px;
  width:100%;
  border:1px solid var(--color-orange);
  position:relative;
  text-align:left;
}
.card img{
  width:100%;
  height:auto;
  aspect-ratio:393/399; /* conserve les proportions d'origine (photo reelle) a toute taille */
  object-fit:cover;
}
.card-label{
  background:var(--color-mint);
  color:var(--color-black);
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  line-height:1.3;
  padding:22px 24px;
}
.card-btn{
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  margin:0;
}

/* ==========================================================================
   9. SECTION "DECOUVREZ NOS PRODUITS" (image reelle, texte + bouton deja incrustes)
   ========================================================================== */
.discover{
  position:relative;
  height:466px;
  overflow:hidden;
}
.discover .section-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

/* ==========================================================================
   10. SECTION "NOS REALISATIONS"
   ========================================================================== */
.realisations{
  background:var(--color-black);
  padding:40px 0 20px;
  text-align:center;
}
.realisations > h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:32px;
  color:var(--color-white);
  margin-bottom:85px;
  padding:0 20px;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.footer{
  background:var(--color-black);
  padding:100px 0 40px;
  text-align:center;
}
.footer .logo{ margin:0 auto 30px; }
.footer-contact{
  color:var(--color-white);
  font-size:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:30px;
  padding:0 20px;
}
.footer-contact .divider{ color:#555; font-weight:400; }
.footer-contact .icon-fb{ width:16px; height:16px; }

.footer-badges{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:44px;
}
.badges-img{ height:88px; width:auto; }

.footer-links{
  color:var(--color-white);
  font-size:14px;
  margin-bottom:10px;
  padding:0 20px;
}
.footer-links span{ margin:0 8px; opacity:.5; }
.footer-legal{
  color:#8a8a8a;
  font-size:13px;
  padding:0 20px;
}
.footer-legal span{ margin:0 6px; }


/* ==========================================================================
   12. RESPONSIVE — DESKTOP INTERMEDIAIRE (1440px / 1200px)
   La grille et les conteneurs etant fluides (max-width + flex-shrink), la
   mise en page desktop se re-proportionne nativement sur ces largeurs.
   On resserre seulement les marges laterales pour eviter tout contact bord-a-bord.
   ========================================================================== */
@media (max-width:1440px){
  .header-inner{ padding:0 24px; }
}

@media (max-width:1200px){
  .hero{ height:600px; }
  .radiator{ height:420px; }
  .discover{ height:400px; }
}

/* ==========================================================================
   13. RESPONSIVE — TABLETTE (768px a 1024px)
   Reorganisation en grille 2 colonnes pour les cartes, conservation du
   design (couleurs, styles, bordures identiques).
   ========================================================================== */
@media (max-width:1024px){
  .header-inner{ min-height:auto; padding:0 20px 16px; justify-content:center; }
  .logo-img{ height:82px; }

  .hero{ height:480px; }
  .radiator{ height:360px; }
  .discover{ height:340px; }
  .specialiste h2,
  .cards-section > h2,
  .realisations > h2{ font-size:28px; }
  .specialiste p{ max-width:600px; }

  /* grille de cartes : 2 colonnes */
  .card{ flex-basis:calc(50% - 27px); max-width:calc(50% - 27px); }
  .cards-grid{ row-gap:110px; }

  .cards-section{ padding-bottom:120px; }
  .realisations > h2{ margin-bottom:60px; }
}

/* ==========================================================================
   14. RESPONSIVE — MOBILE (320px a 767px)
   Empilement du header, menu en accordeon (case a cocher CSS pure, sans JS),
   grille de cartes en 1 colonne, textes et espacements reduits.
   ========================================================================== */
@media (max-width:767px){

  /* --- header empile --- */
  .header-inner{
    flex-direction:column;
    justify-content:center;
    padding:0 20px 16px;
    min-height:auto;
    gap:14px;
  }
  .header-contact{ order:2; font-size:14px; }
  .logo{ order:1; }
  .logo-img{ height:64px; }
  .header-cta{ order:3; }
  .header-cta .btn{ font-size:13px; padding:12px 20px; }

  /* --- menu mobile en accordeon (checkbox hack, sans JS) --- */
  .nav-toggle-label{ display:flex; }
  .nav{ padding:0; }
  .nav ul{
    flex-direction:column;
    align-items:center;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .nav ul li{ width:100%; text-align:center; }
  .nav ul li a{
    display:block;
    padding:14px 0;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav-toggle-checkbox:checked ~ .nav ul{
    max-height:500px;
  }

  /* --- sections image plein ecran (le bouton reste cliquable via .cta-overlay en %) --- */
  .hero{ height:300px; }
  .radiator{ height:230px; }
  .discover{ height:220px; }

  /* --- specialiste --- */
  .specialiste{ padding:50px 0 55px; }
  .specialiste h2{ font-size:24px; margin-bottom:22px; padding:0 16px; }
  .specialiste p{ max-width:100%; font-size:15px; line-height:1.75; padding:0 20px; }

  /* --- titres de sections --- */
  .cards-section > h2,
  .realisations > h2{ font-size:22px; margin-bottom:30px; }

  /* --- grille de cartes : 1 colonne --- */
  .cards-section{ padding:30px 0 90px; }
  .cards-grid{ row-gap:70px; }
  .card{ flex-basis:100%; max-width:420px; }
  .card-label{ font-size:18px; padding:18px 20px; }

  .realisations{ padding:30px 0 20px; }
  .realisations > h2{ margin-bottom:55px; }

  /* --- footer --- */
  .footer{ padding:60px 0 30px; }
  .footer .logo-img{ height:60px; }
  .footer-contact{ font-size:14px; flex-direction:column; gap:8px; }
  .footer-contact .divider{ display:none; }
  .badges-img{ height:66px; }
  .footer-links,
  .footer-legal{ font-size:12px; }
  .footer-legal{ line-height:1.8; }
}

@media (max-width:480px){
  .header-contact span{ font-size:13px; }
  .btn{ font-size:13px; padding:12px 22px; }
  .card-btn{ font-size:12px; padding:11px 20px; }
}