/* ============================================================= */
/* NOVALP FLUIDES - feuille de style partagée (site multi-pages) */
/* Créée le 28.07.2026 pour la maquette multi-pages.             */
/* Les couleurs de la marque sont dans :root, tout part d'ici.   */
/* ============================================================= */
:root{
  --marine:#15243E;     /* bleu marine principal */
  --bleu:#145290;       /* bleu profond (accents, boutons, fond clair) */
  --gris-clair:#EEF1F5; /* fonds clairs */
  --ardoise:#38445A;    /* texte courant */
  --blanc:#FFFFFF;
  --rayon:8px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--ardoise);
  line-height:1.7;
  background:var(--blanc);
}
h1,h2,h3{color:var(--marine);font-weight:700;line-height:1.25;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.contenu{max-width:1080px;margin:0 auto;padding:0 24px;}
section{padding:72px 0;scroll-margin-top:100px;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;padding:13px 24px;border-radius:var(--rayon);
  font-weight:600;font-size:15px;cursor:pointer;border:2px solid transparent;
  transition:transform .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-plein{background:var(--bleu);color:var(--blanc);}
.btn-plein:hover{background:#0f4274;}
.btn-clair{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.35);}
.btn-clair:hover{background:rgba(255,255,255,.08);}
.btn-marine{background:var(--marine);color:var(--blanc);}

/* ============================================================= */
/* EN-TETE (barre du haut, reste collée en défilant)             */
/* ============================================================= */
header{
  position:sticky;top:0;z-index:50;background:var(--blanc);
  border-bottom:1px solid var(--gris-clair);
}
.barre{display:flex;align-items:center;justify-content:space-between;height:90px;}
.logo-svg{height:62px;width:auto;}
nav ul{list-style:none;display:flex;align-items:center;gap:22px;}
nav a{font-size:14px;font-weight:500;color:var(--ardoise);}
nav a:hover{color:var(--bleu);}
nav a.actif{color:var(--bleu);font-weight:600;}
.nav-tel{display:inline-flex;align-items:center;gap:7px;color:var(--blanc);
  background:var(--bleu);padding:9px 16px;border-radius:var(--rayon);font-weight:600;font-size:14px;}
.nav-tel:hover{color:var(--blanc);}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;}
.burger span{width:26px;height:2px;background:var(--marine);display:block;}

/* ============================================================= */
/* HERO (grande bannière d'accueil) + hero de page intérieure    */
/* ============================================================= */
.hero{
  background:linear-gradient(rgba(21,36,62,0.60),rgba(21,36,62,0.76)),url('hero.jpg') center/cover no-repeat;
  color:var(--blanc);text-align:center;padding:96px 0;
}
.hero .sur-titre{color:#9fb6d4;letter-spacing:3px;font-size:13px;font-weight:600;margin-bottom:18px;}
/* Titres à échelle fluide : grands sur desktop, ils rétrécissent seuls sur mobile */
.hero h1{color:var(--blanc);font-size:clamp(2.2rem,5.5vw,4rem);max-width:880px;margin:0 auto;}
.hero p{color:#c5d2e3;font-size:18px;margin:18px auto 0;max-width:560px;}
.hero .actions{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
/* Hero réduit des pages intérieures : même style, moins haut.
   Le fond se règle page par page via style="--hero-img:url('...')". */
.hero-page{
  background:linear-gradient(rgba(21,36,62,0.42),rgba(21,36,62,0.60)),var(--hero-img,url('hero.jpg')) center/cover no-repeat;
  color:var(--blanc);text-align:center;
  /* hauteur identique sur les 5 pages : min-height fixe + contenu centré (29.07.2026) */
  min-height:430px;padding:48px 0;display:flex;align-items:center;justify-content:center;
}
.hero-page .contenu{width:100%;}
.hero-page h1,.hero-page p{text-shadow:0 1px 12px rgba(10,18,34,.55);}
.hero-page h1{color:var(--blanc);font-size:clamp(2rem,4.2vw,3.1rem);max-width:860px;margin:0 auto;}
.hero-page p{color:#c5d2e3;font-size:17px;margin:14px auto 0;max-width:640px;}

/* ============================================================= */
/* BANDE DE CREDIBILITE (sous le hero)                           */
/* ============================================================= */
.bande{background:var(--gris-clair);border-bottom:1px solid #e3e8ef;}
.bande .contenu{display:grid;grid-template-columns:repeat(3,1fr);padding-left:0;padding-right:0;}
.bande .item{text-align:center;padding:24px 18px;display:flex;flex-direction:column;justify-content:center;}
.bande .item + .item{border-left:1px solid #dde3ec;}
.bande .fort{display:block;color:var(--marine);font-weight:700;font-size:19px;}
.bande .leg{display:block;color:var(--ardoise);font-size:13px;margin-top:3px;}

/* ============================================================= */
/* CARTES (prestations et autres)                                */
/* ============================================================= */
.titre-section{text-align:center;font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:8px;}
.sous-section{text-align:center;color:var(--ardoise);margin-bottom:44px;}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;}
/* Variante : dernière rangée incomplète CENTRÉE (ex. les 5 cartes de l'accueil).
   Sous 980 px, retour à la grille standard (1-2 colonnes, le centrage n'a plus de sens). */
.grille.centree{display:flex;flex-wrap:wrap;justify-content:center;}
.grille.centree > *{flex:0 1 calc((100% - 44px)/3);min-width:290px;}
@media (max-width: 980px){
  .grille.centree{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
  .grille.centree > *{min-width:0;}
}
/* Cartes modernisées (29.07.2026) : coins arrondis généreux + ombre douce
   à deux couches, le liseré bleu du haut est abandonné. */
.carte{
  border:1px solid #eef1f5;
  border-radius:16px;padding:26px 22px;background:var(--blanc);
  box-shadow:0 1px 3px rgba(21,36,62,.06),0 8px 24px rgba(21,36,62,.05);
  transition:transform .2s ease,box-shadow .2s ease;
}
.carte:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(21,36,62,.08),0 16px 36px rgba(21,36,62,.14);}
.carte .ic{font-size:30px;margin-bottom:12px;}
/* Illustration en tête de carte (ex. cartes PMR) : fond assorti au visuel */
.carte .illu{margin-bottom:14px;border-radius:10px;overflow:hidden;background:#F1F3F7;}
.carte .illu img{width:100%;height:170px;object-fit:contain;display:block;}
.carte h3{font-size:18px;margin-bottom:8px;}
.carte p{font-size:14px;}
/* Carte avec photo en FOND : voile marine + texte blanc */
.carte-fond{position:relative;border-radius:16px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 1px 3px rgba(21,36,62,.08),0 8px 24px rgba(21,36,62,.08);transition:transform .2s ease,box-shadow .2s ease;}
.carte-fond .voile{position:absolute;inset:0;background:linear-gradient(rgba(21,36,62,0.30) 0%,rgba(21,36,62,0.62) 45%,rgba(21,36,62,0.92) 100%);}
.carte-fond .texte{position:relative;padding:26px 22px;color:var(--blanc);}
.carte-fond h3{color:var(--blanc);font-size:18px;margin-bottom:8px;}
.carte-fond p{color:#dbe6f2;font-size:14px;}
.carte-fond:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(21,36,62,.12),0 18px 40px rgba(21,36,62,.24);}
/* ============================================================= */
/* STANDARD « CARTE ILLUSTRÉE » (fixé le 30.07.2026)             */
/* Base commune pour toutes les rubriques à cartes dessinées.     */
/* Carte 280 px, illustration en PLEIN FOND (cover, remplit toute */
/* la carte) ; voile transparent jusqu'à 30 % de la hauteur,      */
/* 55 % d'opacité à mi-carte, marine plein en bas.                */
/* IMPORTANT : le dessin est DÉZOOMÉ À 75 % DU CADRE dans le JPG  */
/* (marge remplie avec la couleur de fond de l'image) ; c'est là  */
/* que se règle la taille du dessin, pas dans le CSS.             */
/* (valeurs choisies par Fabio le 30.07.2026).                    */
/* Image : dessin plat style Novalp, fond gris clair uniforme,    */
/* original dans Sources\genere-ia-illu-*.png, export 800x800     */
/* JPG q85 net (jamais estompé), nommé carte-*.jpg.               */
/* Essai « fond gris chaud #F5F2EE » du 31.07.2026 : appliqué     */
/* puis ANNULÉ le jour même (Fabio préfère le fond froid).        */
/* Le standard reste #F1F3F7 ; ne pas retenter sans redemander.   */
/* EXCEPTION (décision Fabio 30.07.2026) : l'ACCUEIL garde ses    */
/* cartes PHOTOS (liens vers les pages). Le standard illustré     */
/* s'applique aux pages de prestations uniquement.                */
/* ============================================================= */
.carte-fond.illustree{min-height:280px;background-size:cover;background-color:#F1F3F7;}
.carte-fond.illustree .voile{background:linear-gradient(rgba(21,36,62,0) 30%,rgba(21,36,62,0.55) 53%,rgba(21,36,62,0.96) 100%);}
.carte-fond.illustree .texte{padding:18px 20px;}
/* Sur l'accueil multi-pages, la carte entière est un lien vers sa page */
a.carte-fond{cursor:pointer;}
.carte-fond .lire{display:inline-block;margin-top:10px;color:#9fb6d4;font-weight:600;font-size:13px;}

/* ============================================================= */
/* ENGAGEMENT (fond gris clair)                                  */
/* ============================================================= */
.engagement{background:var(--gris-clair);}
.engagement .deux{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.engagement h2{font-size:28px;margin-bottom:16px;}
.liste-eng{list-style:none;display:flex;flex-direction:column;gap:14px;}
.liste-eng li{display:flex;align-items:flex-start;gap:12px;font-weight:500;color:var(--marine);}
.liste-eng .puce{color:var(--bleu);font-weight:700;font-size:22px;line-height:1.1;flex:0 0 auto;}

/* ============================================================= */
/* COMMENT CA SE PASSE (process en 3 étapes)                     */
/* ============================================================= */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px;}

/* Frise verticale (page Rénovation) : étapes reliées par un trait */
.frise{max-width:720px;margin:8px auto 0;position:relative;}
.frise::before{content:"";position:absolute;left:23px;top:10px;bottom:26px;width:2px;background:#c9d6e6;}
.frise-etape{position:relative;padding:0 0 34px 76px;}
.frise-etape:last-child{padding-bottom:0;}
.frise-etape .num{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--bleu);color:var(--blanc);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;}
.frise-etape h3{font-size:18px;margin-bottom:6px;padding-top:9px;}
.frise-etape p{font-size:14.5px;}
.etape{text-align:center;padding:0 10px;}
/* Étape présentée en CARTE HORIZONTALE (Rénovation « Comment ça se passe ») :
   cartes empilées pleine largeur, pastille + texte dans .corps, et vignette
   illustrée en PLEINE HAUTEUR collée au bord droit (disposition choisie le 30.07) */
.etape-carte{display:flex;align-items:center;text-align:left;background:#F3F6FA;border:1px solid #E3E9F1;box-shadow:none;padding:0;overflow:hidden;}
.etape-carte .corps{display:flex;gap:22px;align-items:flex-start;padding:22px 24px;flex:1;min-width:0;}
.etape-carte .num{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--bleu);color:var(--blanc);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;}
.etape-carte h3{margin-top:10px;}
.etape-carte .vignette{flex:0 0 170px;align-self:stretch;}
.etape-carte .vignette img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width: 700px){
  .etape-carte .vignette{flex-basis:100px;}
}
.etape .num{width:48px;height:48px;border-radius:50%;background:var(--bleu);color:var(--blanc);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.etape h3{font-size:18px;margin-bottom:8px;}
.etape p{font-size:14px;}

/* ---- Étapes en lignes horizontales (photo + texte) ---- */
.sdb-lignes{display:flex;flex-direction:column;gap:22px;max-width:920px;margin:0 auto;}
.sdb-ligne{display:flex;align-items:stretch;background:var(--blanc);border:1px solid var(--gris-clair);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(21,36,62,.06),0 8px 24px rgba(21,36,62,.05);}
.sdb-ligne .photo{flex:0 0 280px;background-position:center;background-size:cover;background-repeat:no-repeat;min-height:170px;}
.sdb-ligne .corps{padding:20px 24px;display:flex;flex-direction:column;justify-content:center;}
.sdb-ligne h3{font-size:17px;margin-bottom:6px;}
.sdb-ligne p{font-size:14.5px;color:var(--ardoise);}

/* ============================================================= */
/* QUI EST DERRIERE NOVALP (le visage du patron)                 */
/* ============================================================= */
.qui-inner{max-width:820px;margin:0 auto;display:flex;gap:44px;align-items:center;}
.qui-photo{flex:0 0 260px;}
.qui-photo img{width:100%;border-radius:var(--rayon);box-shadow:0 12px 28px rgba(21,36,62,.18);}
.qui-texte h2{font-size:28px;margin-bottom:16px;}
.qui-texte p{margin-bottom:14px;}
.qui-credits{margin-top:20px;padding:14px 18px;background:var(--gris-clair);border-left:3px solid var(--bleu);border-radius:0 var(--rayon) var(--rayon) 0;font-weight:600;color:var(--marine);font-size:15px;}

/* ============================================================= */
/* ZONE D'INTERVENTION                                           */
/* ============================================================= */
.zone{text-align:center;}
.zone .villes{max-width:720px;margin:14px auto 0;font-weight:500;color:var(--marine);font-size:16px;line-height:2;}
.zone .region{display:block;margin-top:10px;}
.zone .region strong{color:var(--bleu);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;display:block;line-height:1.4;}

/* ============================================================= */
/* FILIGRANE MONTAGNE ton sur ton (31.07.2026)                   */
/* La montagne du logo en grand, débordant du coin bas droit     */
/* d'UNE section par page (même principe que le filigrane de la  */
/* carte de visite). Les couleurs vivent dans le SVG de chaque   */
/* page : bleu pâle sur les pages bleues, vert pâle sur la page  */
/* Solutions d'avenir (thème vert). La section hôte porte la     */
/* classe .porte-filigrane.                                      */
/* ============================================================= */
.porte-filigrane{position:relative;overflow:hidden;}
.porte-filigrane .contenu{position:relative;z-index:1;}
.filigrane-montagne{position:absolute;right:-46px;bottom:-34px;width:360px;height:auto;pointer-events:none;}

/* ============================================================= */
/* ENCADRE MIS EN AVANT (ex. bandeau concession eau & gaz)       */
/* ============================================================= */
.encadre{
  background:var(--gris-clair);border:1px solid #e3e8ef;border-left:4px solid var(--bleu);
  border-radius:0 16px 16px 0;padding:28px 34px;max-width:820px;margin:0 auto;
}
.encadre h2{font-size:20px;margin-bottom:8px;}
.encadre p{font-size:15px;}

/* ============================================================= */
/* BUREAU D'ETUDE (bloc différenciateur)                         */
/* ============================================================= */
.be-lead{max-width:720px;margin:0 auto 40px;text-align:center;color:var(--ardoise);font-size:17px;}

/* ============================================================= */
/* FAQ (accordéon, sans JavaScript)                              */
/* ============================================================= */
.faq{max-width:760px;margin:0 auto;}
.faq details{border:1px solid #e3e8ef;border-radius:14px;margin-bottom:12px;background:var(--blanc);overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;color:var(--marine);display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--bleu);font-weight:400;flex:0 0 auto;}
.faq details[open] summary::after{content:"\2013";}
.faq details[open] summary{border-bottom:1px solid #e3e8ef;}
.faq .rep{padding:16px 20px 20px;color:var(--ardoise);font-size:15px;}

/* ============================================================= */
/* BANDE DENTS DU MIDI + RAPPEL + CONTACT + PIED DE PAGE         */
/* ============================================================= */
.massif-band{position:relative;min-height:400px;padding:0;display:flex;align-items:flex-end;justify-content:center;text-align:center;
  background:linear-gradient(rgba(15,20,30,0.12) 35%,rgba(21,36,62,0.55)),url('dents-du-midi.jpg') center/cover no-repeat;}
.massif-band .accroche{color:#fff;font-weight:700;font-size:27px;line-height:1.3;max-width:700px;padding:0 24px 40px;text-shadow:0 2px 16px rgba(0,0,0,.7);}

/* Le bandeau reprend la photo du hero de SA page (variable --rappel-img posée
   dans le HTML de chaque page) sous un voile marine appuyé : la page s'ouvre
   et se ferme sur la même image. Décision Fabio du 29.07.2026. */
/* Voile allégé le 31.07.2026 (était 0.72/0.86) : laisse voir les couleurs
   de la photo, décision Fabio (validée d'abord sur la page Avenir). */
.rappel{background:linear-gradient(rgba(21,36,62,0.55),rgba(21,36,62,0.72)),var(--rappel-img,url('hero.jpg')) center/cover no-repeat;color:var(--blanc);text-align:center;}
.rappel h2{color:var(--blanc);font-size:24px;margin-bottom:8px;}
.rappel p{color:#dbe6f2;margin-bottom:24px;}
.rappel-form{flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:center;max-width:640px;margin:0 auto;}
.rappel-form input{flex:1 1 190px;width:auto;background:var(--blanc);border:1px solid transparent;color:var(--marine);}
.rappel-form input::placeholder{color:#8a97ad;}
.rappel-form button{flex:0 0 auto;align-self:auto;}

.contact{background:var(--marine);color:var(--blanc);}
.contact h2{color:var(--blanc);font-size:28px;text-align:center;}
.contact .intro{text-align:center;color:#c5d2e3;margin:10px 0 40px;}
.contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
.coord p{margin-bottom:16px;display:flex;align-items:center;gap:12px;font-size:16px;}
.coord .et{color:#9fb6d4;font-size:20px;width:24px;text-align:center;}
.coord a:hover{color:#9fb6d4;}
form{display:flex;flex-direction:column;gap:14px;}
form input,form textarea{
  width:100%;padding:13px 15px;border:1px solid #34425e;border-radius:var(--rayon);
  background:#1c2c49;color:var(--blanc);font-family:inherit;font-size:15px;
}
form input::placeholder,form textarea::placeholder{color:#8a97ad;}
form button{align-self:flex-start;}

footer{background:#0f1a2e;color:#8a97ad;text-align:center;padding:30px 0;font-size:13px;}
footer .logo-pied{height:66px;margin:0 auto 14px;}
footer .liens-pied{margin-bottom:10px;}
footer .liens-pied a{color:#9fb6d4;margin:0 8px;}

/* ============================================================= */
/* APPARITION DOUCE AU DEFILEMENT (29.07.2026)                   */
/* Les blocs marqués .reveal (posés par le script de la page)    */
/* apparaissent en fondu-remontée. Sans JavaScript, la classe    */
/* .js n'existe pas et tout reste visible : aucun risque.        */
/* ============================================================= */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease;}
.js .reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
}

/* ============================================================= */
/* BOUTON D'APPEL FLOTTANT (visible sur mobile uniquement)       */
/* ============================================================= */
.appel-flottant{display:none;}

/* ============================================================= */
/* VERSION MOBILE                                                */
/* ============================================================= */
@media(max-width:760px){
  section{padding:54px 0;}
  .hero{padding:66px 0;}
  .hero p{font-size:16px;}
  .hero-page{min-height:300px;padding:36px 0;}
  nav ul{display:none;position:absolute;top:90px;left:0;right:0;background:var(--blanc);
    flex-direction:column;gap:0;border-bottom:1px solid var(--gris-clair);}
  nav ul.ouvert{display:flex;}
  nav ul li{width:100%;text-align:center;padding:14px 0;border-top:1px solid var(--gris-clair);}
  .nav-tel{display:none;}
  .burger{display:flex;}
  .engagement .deux,.contact-grille{grid-template-columns:1fr;gap:28px;}
  .etapes{grid-template-columns:1fr;gap:28px;}
  .frise-etape{padding-left:64px;}
  .frise-etape .num{width:42px;height:42px;font-size:18px;}
  .frise::before{left:20px;}
  .sdb-ligne{flex-direction:column;}
  .sdb-ligne .photo{flex:0 0 auto;min-height:150px;}
  .qui-inner{flex-direction:column;gap:28px;}
  .qui-photo{flex:0 0 auto;width:min(260px,70%);}
  .bande .contenu{grid-template-columns:1fr;}
  .bande .item{padding:18px 16px;}
  .bande .item + .item{border-left:none;border-top:1px solid #dde3ec;}
  .massif-band{min-height:260px;}
  .massif-band .accroche{font-size:20px;}
  .appel-flottant{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    box-shadow:0 -4px 16px rgba(21,36,62,.28);
  }
  .appel-flottant .af-btn{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 10px;color:var(--blanc);font-weight:600;font-size:15px;white-space:nowrap;
  }
  .af-appel{background:var(--bleu);}
  .af-rappel{background:var(--marine);}
  body{padding-bottom:56px;}
}