/* ============================================================
   commun.css — identique sur toutes les pages : haut de page,
   sous-navigation des pages métier, bas de page, bandeau cookies.
   Chargé APRÈS le style propre à chaque page : il a le dernier mot.
   ============================================================ */
:root{--bleu-logo:#1F95F8;--bleu-logo-fonce:#0356C0;--encre-c:#0B2C58;--ligne-c:#D3E6F7;--pale-c:#E8F4FE}

/* ---------- HAUT DE PAGE COMMUN ---------- */
.tete-commune{position:relative;top:auto;z-index:50;background:#fff;border-bottom:1px solid var(--ligne-c);height:auto;padding:0;backdrop-filter:none}
.tete-commune-in{max-width:1180px;margin:0 auto;padding:.55rem clamp(1.25rem,5vw,4rem);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem}
.tete-commune .marque{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.tete-commune .marque img{height:88px;width:auto;display:block}
.tete-metiers{display:flex;justify-content:center;align-items:center;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap}
.lien-metier{font-family:'Pacifico',cursive!important;font-weight:400!important;color:var(--bleu-logo)!important;font-size:1.25rem!important;letter-spacing:0;text-decoration:none!important;white-space:nowrap;line-height:1.3}
.lien-metier:hover{color:var(--bleu-logo-fonce)!important}
.tel-tete{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;line-height:1.15;white-space:nowrap;margin:0}
.tel-tete .tel-num{font-family:'Pacifico',cursive;font-weight:400;font-size:1.45rem;color:var(--bleu-logo);letter-spacing:.01em}
.tel-tete .tel-sous{display:block!important;font-family:"Public Sans",system-ui,sans-serif;font-size:.7rem;font-weight:600;color:var(--bleu-logo);margin-top:.15rem}
.tel-tete:hover .tel-num{color:var(--bleu-logo-fonce)}
@media(max-width:760px){
  .tete-commune-in{grid-template-columns:1fr 1fr;justify-items:center;gap:.35rem 1rem;padding-block:.5rem .6rem}
  .tete-commune .marque{order:1;justify-self:center;padding-left:4%}.tel-tete{order:2;justify-self:center}
  .tete-commune .marque img{height:68px}
  .tete-metiers{order:3;grid-column:1/-1;gap:1.4rem;justify-content:center}
  .lien-metier{font-size:1.05rem!important}
  .tel-tete .tel-num{font-size:1.2rem}.tel-tete .tel-sous{font-size:.62rem}
}
@media(max-width:360px){.tete-commune .marque img{height:60px}.lien-metier{font-size:.95rem!important}}

/* ---------- SOUS-NAVIGATION DES PAGES MÉTIER (vitrages, photovoltaïque) ---------- */
.sous-tete{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne-c)}
.sous-tete .nav{border-top:0}
.sous-tete-in{max-width:1180px;margin:0 auto;padding-inline:clamp(1.25rem,5vw,4rem);display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none}
.sous-tete-in::-webkit-scrollbar{display:none}
.sous-tete a{font-family:'Pacifico',cursive;font-weight:400;font-size:.98rem;color:var(--bleu-logo);text-decoration:none;white-space:nowrap;padding:.7rem .7rem;border-bottom:3px solid transparent;display:block;letter-spacing:0}
.sous-tete a:hover{color:var(--bleu-logo-fonce)}
.sous-tete a.actif{color:var(--bleu-logo-fonce);border-bottom-color:var(--bleu-logo)}
.sous-tete .nav .promo,.sous-tete .nav .promo.actif{color:var(--bleu-logo)}
.sous-tete .nav .promo.actif{color:var(--bleu-logo-fonce);border-bottom-color:var(--bleu-logo)}

/* ---------- TITRES DES DEUX MÉTIERS (portes de l'accueil) ---------- */
.titre-metier{font-family:'Pacifico',cursive;font-weight:400;color:var(--bleu-logo);letter-spacing:0;line-height:1.2}

/* ---------- BAS DE PAGE COMMUN, CENTRÉ ---------- */
.pied{background:var(--pale-c);color:#55677D;padding:0;border-top:1px solid var(--ligne-c);font-family:"Public Sans",system-ui,sans-serif;line-height:1.55;font-size:.92rem}
.pied .pied-in{max-width:1180px;margin:0 auto;padding:1.5rem clamp(1.25rem,5vw,4rem) 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem}
.pied .pied-logo{height:126px;width:auto;display:block;margin-bottom:.4rem}
.pied p{margin:0;font-family:'Pacifico',cursive;font-size:1.02rem;color:var(--bleu-logo)}
.pied .pied-contact a{font-family:'Pacifico',cursive;color:var(--bleu-logo);text-decoration:none;font-size:1.02rem}
.pied .pied-contact a:hover{color:var(--bleu-logo-fonce)}
.pied .pied-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.3rem;margin-top:.6rem}
.pied .pied-nav a,.pied .lien-cookies{font-family:'Pacifico',cursive;font-size:1rem;color:var(--bleu-logo);text-decoration:none;background:none;border:0;padding:0;margin:0;cursor:pointer;font-weight:400}
.pied .pied-nav a:hover,.pied .lien-cookies:hover{color:var(--bleu-logo-fonce)}
@media(max-width:700px){.pied .pied-logo{height:104px}}

/* ---------- BANDEAU COOKIES ---------- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.9rem;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);border-top:1px solid var(--ligne-c);box-shadow:0 -8px 28px rgba(11,44,88,.14);animation:ck-monte .45s cubic-bezier(.34,1.4,.64,1) both}
@keyframes ck-monte{from{transform:translateY(105%)}to{transform:none}}
.cookies[hidden]{display:none}
.cookies-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cookies-txt{margin:0;flex:1 1 22rem;font-size:.9rem;color:#55677D;line-height:1.55}.cookies-txt b{color:var(--encre-c);font-size:.98rem}.cookies-txt a{color:var(--bleu-logo-fonce)}
.cookies-btn{display:flex;gap:.6rem;flex:0 0 auto}
.cookies-btn .btn-ok,.cookies-btn .ck-btn,.cookies-btn .btn{background:#0A88EE;color:#fff;border:0;border-radius:100px;padding:.72rem 1.25rem;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer}
.cookies-btn .btn-ok:hover,.cookies-btn .ck-btn:hover,.cookies-btn .btn:hover{background:var(--bleu-logo-fonce)}
.cookies-btn .btn-refus{background:#fff;border:1.5px solid var(--ligne-c);color:var(--encre-c);border-radius:100px;padding:.72rem 1.25rem;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer}
.cookies-btn .btn-refus:hover{border-color:#0A88EE;background:var(--pale-c)}
@media(max-width:620px){.cookies-btn{width:100%}.cookies-btn .btn-ok,.cookies-btn .ck-btn,.cookies-btn .btn,.cookies-btn .btn-refus{flex:1;text-align:center}}

/* ---------- BULLE « DEVIS RAPIDE », en bas à gauche (pendant de « Me rappeler ») ---------- */
.devis-rapide{position:fixed;left:1.1rem;bottom:1.1rem;z-index:80;display:inline-flex;align-items:center;gap:.55rem;
  background:#0A88EE;color:#fff;font-family:"Public Sans",system-ui,sans-serif;font-weight:700;font-size:.98rem;
  padding:.85rem 1.25rem;border-radius:99px;box-shadow:0 10px 26px rgba(36,112,196,.42);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.devis-rapide:hover{background:#0356C0;transform:translateY(-2px);box-shadow:0 14px 30px rgba(36,112,196,.5);color:#fff}
.devis-rapide svg{width:20px;height:20px;flex-shrink:0;animation:devis-bouge 3.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes devis-bouge{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-3px) rotate(-6deg)}86%{transform:translateY(0) rotate(5deg)}93%{transform:rotate(0)}}
@media(max-width:560px){.devis-rapide{left:.8rem;bottom:.8rem;padding:.8rem 1.05rem;font-size:.92rem}}

/* ---------- BULLE « ME RAPPELER », en bas à droite, sur toutes les pages ---------- */
.rappel,.rappel *{box-sizing:border-box}
.rappel{font-family:"Public Sans",system-ui,sans-serif;line-height:1.5}
.rappel .champ{margin-bottom:.7rem}.rappel .champ label{display:block;font-weight:600;font-size:.91rem;margin-bottom:.35rem;color:#0B2C58}
.rappel .champ input,.rappel .champ select{width:100%;font-family:inherit;font-size:1rem;padding:.7rem .8rem;border:1.5px solid #D3E6F7;border-radius:6px;background:#fff;color:#0B2C58}
.rappel .champ input:focus,.rappel .champ select:focus{border-color:#0A88EE;outline:none;box-shadow:0 0 0 3px rgba(10,136,238,.16)}
.rappel .btn{display:block;width:100%;padding:.9rem;border:0;border-radius:10px;background:#0A88EE;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.rappel .btn:hover{background:#0356C0}.rappel .rgpd{font-size:.8rem;color:#55677D;margin:.8rem 0 0}.rappel .rgpd a{color:#0356C0}
.rappel .aide{font-size:.84rem;color:#55677D}.rappel .pot{position:absolute;left:-9999px}
.rappel{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;display:flex;flex-direction:column;
  align-items:flex-end;gap:.7rem;transition:bottom .3s ease}
.rappel.remonte{bottom:9.5rem}
.rappel-bulle{display:inline-flex;align-items:center;gap:.55rem;border:0;cursor:pointer;
  background:#0A88EE;color:#fff;font:inherit;font-weight:700;font-size:.98rem;
  padding:.85rem 1.25rem;border-radius:99px;box-shadow:0 10px 26px rgba(36,112,196,.42);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.rappel-bulle:hover{background:#0356C0;transform:translateY(-2px);box-shadow:0 14px 30px rgba(36,112,196,.5)}
.rappel-bulle svg{width:20px;height:20px;flex-shrink:0}
@media(prefers-reduced-motion:no-preference){
  .rappel-bulle svg{animation:tel-sonne 3.4s ease-in-out infinite;transform-origin:50% 70%}
}
@keyframes tel-sonne{
  0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(-14deg)}80%{transform:rotate(12deg)}
  84%{transform:rotate(-9deg)}88%{transform:rotate(6deg)}92%{transform:rotate(0)}}
.rappel-boite{width:min(21rem,calc(100vw - 2.2rem));background:#fff;border:1px solid #D3E6F7;
  border-radius:14px;box-shadow:0 18px 44px rgba(11,44,88,.24);padding:1.1rem 1.15rem;order:-1}
@media(prefers-reduced-motion:no-preference){
  .rappel-boite{animation:rappel-ouvre .28s cubic-bezier(.34,1.4,.64,1) both}}
@keyframes rappel-ouvre{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.rappel-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin-bottom:.15rem}
.rappel-boite h3{margin:0;font-size:1.05rem}
.rappel-boite .aide{margin:0 0 .85rem}
.rappel-fermer{background:none;border:0;font-size:1.35rem;line-height:1;color:#55677D;cursor:pointer;padding:0 .15rem}
.rappel-fermer:hover{color:#0B2C58}
.rappel-boite .champ{margin-bottom:.7rem}
.rappel-boite .btn{width:100%;margin-top:.2rem}
.rappel-msg{margin:.7rem 0 0;font-size:.88rem;color:#C0392B}
.rappel-ok{text-align:center;padding:.6rem 0 .3rem}
.rappel-ok .rond{width:52px;height:52px;margin:0 auto .7rem;border-radius:50%;background:#E8F4FE;
  color:#1E8E4E;display:grid;place-items:center;font-size:1.6rem}
.rappel-ok p{margin:0;color:#55677D;font-size:.93rem}
.rappel-ok b{color:#0B2C58;display:block;margin-bottom:.25rem;font-size:1rem}
@media(max-width:560px){
  .rappel{right:.8rem;bottom:.8rem}
  .rappel.remonte{bottom:11.5rem}
  .rappel-bulle{padding:.8rem 1.05rem;font-size:.92rem}
}
/* champs de la boîte, autonomes (les pages sans formulaire n'ont pas ces styles) */
.rappel-boite,.rappel-boite *{box-sizing:border-box}
.rappel-boite{font-family:"Public Sans",system-ui,sans-serif;color:#0B2C58;line-height:1.5;text-align:left}
.rappel-boite h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;font-weight:800;letter-spacing:-.01em}
.rappel-boite .aide{font-size:.84rem;color:#55677D}
.rappel-boite .champ{margin-bottom:.7rem;position:relative}
.rappel-boite .champ label{display:block;font-weight:600;font-size:.91rem;margin-bottom:.35rem}
.rappel-boite .champ input,.rappel-boite .champ select{width:100%;font-family:inherit;font-size:1rem;padding:.7rem .8rem;border:1.5px solid #D3E6F7;border-radius:6px;background:#fff;color:#0B2C58}
.rappel-boite .champ input:focus,.rappel-boite .champ select:focus{border-color:#0A88EE;outline:none;box-shadow:0 0 0 3px rgba(10,136,238,.16)}
.rappel-boite .btn{display:block;width:100%;margin-top:.2rem;padding:.95rem 1rem;border:0;border-radius:10px;background:#0A88EE;color:#fff;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-align:center}
.rappel-boite .btn:hover{background:#0356C0}
.rappel-boite .rgpd{font-size:.81rem;color:#55677D;margin:.9rem 0 0}
.rappel-boite .pot{position:absolute;left:-9999px}
.rappel-bulle{font-family:"Public Sans",system-ui,sans-serif}

/* ---------- bulles effacées devant le pied de page ---------- */
.rappel,.devis-rapide{transition:opacity .3s ease,transform .3s ease,bottom .3s ease}
.bulles-cachees .rappel,.bulles-cachees .devis-rapide,
.bulles-effacees .rappel,.bulles-effacees .devis-rapide{opacity:0;transform:translateY(18px);pointer-events:none}