/* =========================================================
   GENERAL.CSS – gabarit commun Sunhome
   Couleurs du client : modifier uniquement les variables ci-dessous
   ========================================================= */
:root{
  --fond:#f2f0e8;          /* fond menu, blocs, contenu */
  --texte:#292424;         /* texte courant */
  --titres:#211f21;        /* h1 à h4 */
  --accent:#018bb9;        /* liens actifs, hr, bloc message */
  --accent-fonce:#016f94;  /* survol boutons */
  --alerte:#dc0000;        /* icônes pulsées, puces, liens contact */
  --ombre:4px 4px 6px rgba(0,0,0,0.3);
}

/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{width:100%;min-height:100vh;overflow-x:hidden;font-family:Lato,sans-serif;font-weight:300;letter-spacing:0.05em;line-height:1.6;color:var(--texte);background-color:transparent;}
img,video{max-width:100%;}
strong,b{font-weight:700;}

/* BACKGROUND PHOTO */
.bg-photo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background-color:#e8e6e0;}
.bg-photo::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.2);filter:blur(4px);animation:zoomBlurTogether 3s ease-out forwards;}
@keyframes zoomBlurTogether{0%{transform:scale(1.2);filter:blur(4px);}100%{transform:scale(1);filter:blur(0);}}

/* BACKGROUND VIDEO */
.background-container{position:fixed;inset:0;z-index:-1;overflow:hidden;background-color:#e8e6e0;}
.background-container video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.8;}

/* TYPOGRAPHIE */
h1,h2,h3,h4{color:var(--titres);}
h1{font-size:130%;text-transform:uppercase;width:100%;text-align:left;font-weight:normal;padding:1% 0;}
h2{font-size:110%;text-transform:uppercase;width:100%;font-weight:normal;padding:1% 0;}
h3{font-size:90%;width:100%;text-align:left;}
h4{font-size:90%;font-weight:300;}
p{padding-top:0.5em;}
hr{width:50%;height:1px;margin:0 0 1% 0;border:none;background-color:var(--accent);}
ul{list-style:none;}
li{position:relative;margin:0.5em 0;padding-left:1.5em;}
li::before{content:"\2752";position:absolute;left:0;top:0.2em;line-height:1;color:var(--alerte);}
.lien-sans-decoration{text-decoration:none;color:inherit;}
.mail-contact{color:var(--alerte);}
.avertissement{color:var(--alerte);font-weight:700;}
.img-contenu{display:block;width:100%;height:auto;margin:2% 0;}

/* MENU */
.menu{position:fixed;top:0;width:100%;padding:1% 5%;z-index:20;box-shadow:var(--ombre);background-color:var(--fond);color:var(--texte);display:flex;align-items:center;justify-content:space-between;min-height:56px;}
.menu-hamburger{display:none;cursor:pointer;background:none;border:none;font:inherit;letter-spacing:inherit;color:inherit;}
.menu-principal{display:flex;gap:2em;align-items:center;}
.menu-principal > li{margin:0;padding:0;}
.menu-principal > li::before{display:none;}
.menu-principal > li > a{display:block;padding:0.5em 0;text-decoration:none;color:var(--texte);text-transform:uppercase;font-size:90%;transition:color 0.3s;}
.menu-principal > li > a:hover,
.menu-principal > li.active > a{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:calc(0.5em - 2px);}
.menu-principal > li.active > a{font-weight:700;}
.menu-principal > li > a i{font-size:70%;margin-left:0.3em;transition:transform 0.3s;}
.menu-principal > li.open > a i{transform:rotate(180deg);}

/* SOUS-MENUS */
.sous-menu{position:absolute;top:100%;left:0;min-width:200px;background-color:var(--fond);box-shadow:var(--ombre);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s;z-index:21;}
.sous-menu li{margin:0;padding:0;}
.sous-menu li::before{display:none;}
.sous-menu li a{display:block;padding:0.8em 1.2em;text-decoration:none;color:var(--texte);font-size:85%;transition:background-color 0.3s;}
.sous-menu li a:hover{background-color:rgba(1,139,185,0.1);}
.has-submenu.open .sous-menu{opacity:1;visibility:visible;transform:translateY(0);}

/* ÉLÉMENTS HERO */
.logo{position:absolute;top:15%;left:5%;width:250px;z-index:10;}
.logo img{display:block;width:100%;height:auto;}
.logo-devis{display:block;max-width:200px;height:auto;}
.slogan{color:#fff;text-align:center;text-shadow:1px 1px 4px rgba(0,0,0,0.7);padding-top:0.5em;letter-spacing:0.08em;line-height:1.3;}
.telephone,.message{position:fixed;left:70%;width:25%;padding:1% 2%;box-shadow:var(--ombre);}
.telephone{top:16%;z-index:11;text-decoration:none;background-color:var(--fond);color:var(--texte);}
.message{top:28%;z-index:10;background-color:var(--accent);color:#fff;}
.message .pulse-effect{color:#fff;}

/* CONTENU */
.contenu{position:absolute;top:70%;left:0;width:100%;padding:2% 5% 4%;z-index:9;background-color:var(--fond);}

/* GALERIE / CONTACT / COPYRIGHT */
.contact,.copyright{text-align:center;padding:2%;}
.galerie{text-align:center;}
.galerie img{display:block;width:90%;height:auto;padding:1% 0;margin:0 auto;}
.contact img{width:250px;height:auto;filter:drop-shadow(4px 4px 6px rgba(0,0,0,0.5));}

/* BOUTON "VOIR NOS RÉALISATIONS" + GALERIE VIGNETTES + VISIONNEUSE */
.btn-realisations{display:inline-block;margin:0.8em 0 0.4em;padding:0.6em 1.4em;background:var(--accent);color:#2f3133;font-weight:700;text-decoration:none;border-radius:4px;text-transform:uppercase;font-size:90%;box-shadow:var(--ombre);transition:background-color 0.3s;}
.btn-realisations:hover{background:var(--accent-fonce);color:#fff;}
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:1em;}
.vignettes a{display:block;overflow:hidden;border-radius:4px;box-shadow:var(--ombre);}
.vignettes img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 0.4s;}
.vignettes a:hover img{transform:scale(1.06);}
.visionneuse{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.88);}
.visionneuse.ouverte{display:flex;}
.visionneuse img{max-width:min(800px,92vw);max-height:85vh;width:auto;height:auto;box-shadow:0 0 20px rgba(0,0,0,0.6);}
.visionneuse button{position:absolute;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:0.5em;}
.visionneuse .fermer{top:0.3em;right:0.5em;}
.visionneuse .prec{left:0.3em;top:50%;transform:translateY(-50%);}
.visionneuse .suiv{right:0.3em;top:50%;transform:translateY(-50%);}
.visionneuse .compteur{position:absolute;bottom:1em;left:0;right:0;text-align:center;color:#fff;font-size:90%;}

/* ANIMATIONS */
@keyframes fadeZoomIn{0%{opacity:0;transform:scale(0.8);}100%{opacity:1;transform:scale(1);}}
.apparition-droite{opacity:0;animation:fadeZoomIn 1s ease forwards;}
@keyframes slideInRight{from{transform:translateX(10%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.slide-in-right{opacity:0;}
.slide-in-right.visible{animation:slideInRight 1s ease forwards;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.5);}}
.pulse-effect{display:inline-block;color:var(--alerte);animation:pulse 2s ease-in-out infinite;animation-delay:2.4s;}

/* Accessibilité : animations coupées si l'utilisateur les a désactivées sur son appareil */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .apparition-droite,.slide-in-right{opacity:1;}
  html{scroll-behavior:auto;}
}

/* =========================================================
   PAGE DEVIS (body class="page-devis")
   ========================================================= */
.page-devis .contenu{top:15%;}
.devis-form{background:rgba(255,255,255,0.9);border-radius:6px;padding:3% 4%;margin-top:2%;}
.devis-form label{display:block;margin-top:1.2em;font-size:90%;color:var(--texte);}
.devis-form input,.devis-form select,.devis-form textarea{width:100%;padding:0.6em 0.8em;margin-top:0.3em;border:1px solid #ccc;border-radius:4px;font:inherit;font-size:95%;background:#fafaf8;}
.devis-form input:focus,.devis-form select:focus,.devis-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.devis-form textarea{resize:vertical;min-height:80px;}
.ligne-commande{display:flex;gap:1%;align-items:flex-end;margin-top:0.8em;flex-wrap:wrap;}
.ligne-commande select{flex:2;min-width:160px;}
.ligne-commande input[type="text"]{flex:2;min-width:140px;}
.ligne-commande input[type="number"]{flex:1;min-width:70px;}
.ligne-commande .suppr{background:none;border:none;color:#cc3333;cursor:pointer;font-size:110%;padding:0.4em;}
.btn-ajouter,.btn-envoyer{background:var(--accent);color:#fff;border:none;border-radius:4px;cursor:pointer;font:inherit;transition:background-color 0.3s;}
.btn-ajouter{display:inline-block;margin-top:1em;padding:0.5em 1.2em;font-size:90%;}
.btn-envoyer{display:block;width:100%;margin-top:2em;padding:0.9em;font-size:105%;text-transform:uppercase;}
.btn-ajouter:hover,.btn-envoyer:hover{background:var(--accent-fonce);}
.mention{font-size:80%;color:#666;margin-top:1em;}

/* =========================================================
   TABLETTE
   ========================================================= */
@media (min-width:769px) and (max-width:1024px){
  .logo{top:12%;left:3%;width:clamp(140px,22vw,260px);}
  .telephone,.message{left:58%;width:38%;padding:1.2% 2%;}
  .telephone{top:15%;}
  .message{top:27%;}
  .menu-principal{gap:1em;}
  .menu-principal > li > a{font-size:82%;}
  .contenu{top:80%;padding:3% 4%;}
  .page-devis .contenu{top:15%;}
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:768px){
  .menu{flex-wrap:wrap;padding:3% 5%;}
  .menu-hamburger{display:block;}
  .menu-nav{display:none;width:100%;margin-top:1em;}
  .menu-nav.open{display:block;}
  .menu-principal{flex-direction:column;gap:0;align-items:flex-start;width:100%;}
  .menu-principal > li{width:100%;border-top:1px solid rgba(0,0,0,0.1);}
  .menu-principal > li > a{padding:1em 0;}
  .menu-principal > li > a:hover,.menu-principal > li.active > a{border-bottom:none;padding-bottom:1em;}
  .sous-menu{position:static;box-shadow:none;background-color:rgba(0,0,0,0.05);max-height:0;overflow:hidden;opacity:1;visibility:visible;transform:none;transition:max-height 0.3s ease;}
  .has-submenu.open .sous-menu{max-height:500px;}
  .sous-menu li a{padding:0.8em 1.5em;}
  .logo{top:15%;left:0;right:0;margin:0 auto;width:60%;padding:3% 4%;text-align:center;transition:top 0.4s ease;}
  .slogan{display:none;}
  .telephone,.message{left:5%;width:90%;padding:3% 4%;transition:top 0.4s ease;}
  .telephone{top:45%;}
  .message{top:55%;}
  .contenu{position:relative;top:auto;margin-top:80vh;padding:5% 5% 8%;}
  .page-devis .contenu{top:auto;margin-top:70px;}
  .ligne-commande{flex-direction:column;gap:0.5em;}
  .ligne-commande select,.ligne-commande input[type="text"],.ligne-commande input[type="number"]{width:100%;min-width:0;}
  .vignettes{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;}
  html{scroll-padding-top:190px;} /* le bouton "Voir nos réalisations" ne cache pas le titre de la galerie sous téléphone + message */
}