/* ==========================================================================
   Landing portail Niort : feuille de style autonome
   Reprise à l'identique du rendu Divi de /devis-portail-niort.
   Aucune dépendance : ni Divi, ni framework, ni police distante.
   Trois paliers : >=981px, <=980px, <=767px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Police auto-hébergée
   Google ne sert plus Nunito Sans qu'en fichier variable : un seul woff2
   latin couvre tout l'axe de graisse, dont le 600 du corps et le 900 des
   titres. C'est exactement le fichier que chargeait la page en ligne.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Jetons et base
   -------------------------------------------------------------------------- */
:root {
  --hc-fond: #0F161F;
  --hc-carte: #242D38;
  --hc-bord: #323E4B;
  --hc-vert: #7ABD2F;        /* vert des titres et accents (repris de Divi) */
  --hc-vert-ui: #7DC242;     /* vert des blocs custom */
  --hc-vert-fonce: #346800;
  --hc-texte: #E4EAEF;
  --hc-discret: #AEBCC8;
  --hc-nuit: #0C1722;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--hc-fond);
  color: var(--hc-texte);
  font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }

p { margin: 0; padding-bottom: 1em; }

h1, h2, h3 {
  margin: 0;
  padding-bottom: 10px;
  line-height: 1em;
  font-weight: 900;
  color: #FFFFFF;
  font-family: inherit;
}

a { color: var(--hc-vert); }

ul { margin: 0; padding: 0; }

/* Focus clavier visible partout */
:focus-visible {
  outline: 3px solid var(--hc-vert-ui);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Alignements repris des réglages Divi module par module */
.hc-al-left { text-align: left; }
.hc-al-center { text-align: center; }
.hc-al-left-tabcenter { text-align: left; }
.hc-al-center-phoneleft { text-align: center; }
.hc-blanc { color: #FFFFFF; }
.hc-vert { color: var(--hc-vert); }

/* --------------------------------------------------------------------------
   3. Sections, lignes, colonnes
   Valeurs Divi : section 4% (50px sous 980px, 60px au-delà de 1500px),
   ligne 2% (30px sous 980px), largeur 80% plafonnée à 1200px (90% sous 980px).
   -------------------------------------------------------------------------- */
.hc-sec {
  position: relative;
  background-color: var(--hc-fond);
}

.hc-row {
  position: relative;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.hc-col { position: relative; min-height: 1px; }

/* Marges basses des modules, reprises des gouttières Divi */
.hc-col > * { margin-bottom: 2.75%; }
.hc-col > *:last-child { margin-bottom: 0; }
.hc-col-1-2 > * { margin-bottom: 5.82%; }
.hc-col-3-5 > * { margin-bottom: 4.758%; }
.hc-col-2-5 > * { margin-bottom: 7.493%; }
.hc-col-1-3 > * { margin-bottom: 9.27%; }
.hc-col-1-4 > * { margin-bottom: 6.593%; }

.hc-txt > :last-child { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */
.hc-sec-head { padding: 0; }
.hc-row-head { width: 100%; max-width: none; padding: 10px 40px; }

.hc-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;font-family:inherit}
.hc-header p{margin:0;padding:0}
.hc-header-logo img{height:70px;width:auto;display:block}
.hc-header-logo{flex:1 1 0;min-width:0}
.hc-nav{flex:0 0 auto}
.hc-header-right{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}

.hc-nav{display:flex;align-items:center;gap:26px;margin:0;padding:0}
.hc-nav a{position:relative;display:inline-flex;align-items:center;font-size:14.5px;line-height:1;color:var(--hc-discret);text-decoration:none;padding:6px 0;margin:0;transition:color .15s;white-space:nowrap}
.hc-nav a:hover,
.hc-nav a[aria-current="true"]{color:#FFFFFF}
.hc-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--hc-vert-ui);transition:right .2s}
.hc-nav a:hover::after,
.hc-nav a[aria-current="true"]::after{right:0}

.hc-addr{display:flex;align-items:center;gap:9px;line-height:1.4;text-align:left}
.hc-addr svg{flex:none}
.hc-addr-line{display:block;font-size:13px;color:#ffffff}
.hc-header-tel{display:inline-flex;align-items:center;gap:9px;background:var(--hc-vert-ui);color:var(--hc-nuit);text-decoration:none;font-size:15px;font-weight:700;line-height:1;padding:15px 18px;border-radius:100px;white-space:nowrap;transition:background .15s}
.hc-header-tel:hover{background:#8ad13a;color:var(--hc-nuit)}
.hc-header-tel svg{width:16px;height:16px;fill:var(--hc-nuit);flex:none}

.hc-burger{display:none;background:none;border:none;cursor:pointer;padding:10px;margin:-10px -6px -10px 0}
.hc-burger span{display:block;width:24px;height:2.5px;background:#FFFFFF;border-radius:2px;transition:transform .25s,opacity .2s}
.hc-burger span+span{margin-top:6px}
.hc-burger.on span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.hc-burger.on span:nth-child(2){opacity:0}
.hc-burger.on span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

.hc-mnav{position:fixed;inset:0;z-index:99998;background:rgba(6,12,18,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.hc-mnav.on{opacity:1;pointer-events:auto}
.hc-mnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--hc-nuit);border-left:1px solid rgba(255,255,255,.1);padding:24px 26px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.hc-mnav.on .hc-mnav-panel{transform:translateX(0)}
.hc-mnav-close{align-self:flex-end;background:none;border:1px solid rgba(255,255,255,.18);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-family:inherit}
.hc-mnav-links{display:flex;flex-direction:column;gap:4px;margin-top:18px}
.hc-mnav-links a{font-size:19px;font-weight:600;color:#FFFFFF;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between}
.hc-mnav-links a::after{content:"\203A";color:var(--hc-vert-ui);font-size:20px}
.hc-mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.hc-mnav-devis{display:block;background:var(--hc-vert-ui);color:var(--hc-nuit);font-size:15px;font-weight:700;padding:14px;border-radius:100px;text-align:center;text-decoration:none}
.hc-mnav-tel{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--hc-carte);border:1px solid rgba(255,255,255,.18);color:#FFFFFF;font-size:15px;font-weight:600;padding:13px;border-radius:100px;text-decoration:none}
.hc-mnav-tel svg{width:16px;height:16px;fill:var(--hc-vert-ui)}

#realisations, #apercu, #pose, #avis, #faq, #devis { scroll-margin-top: 24px; }
/* La photo de Yohann deborde d'une centaine de pixels au-dessus de la carte :
   sans ce decalage, l'ancre l'amene derriere la barre collante. */
#equipe { scroll-margin-top: 130px; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hc-cols { display: flex; }
.hc-row-hero { padding-top: 0; padding-bottom: 0; }
.hc-cols-hero { align-items: flex-start; gap: 5.5%; }
.hc-cols-hero > .hc-col { width: 47.25%; }

.hc-mod-h1 { margin-bottom: 10px; }
.hc-h1 {
  font-size: 70px;
  line-height: 0.9em;
  padding-bottom: 10px;
}
.hc-h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: pre-wrap;
}
.hc-h1-avant { color: #FFFFFF; }
.hc-h1-milieu { display: block; color: var(--hc-vert); }
.hc-h1-apres { font-size: 20px; color: var(--hc-vert); line-height: 1.2em; }

.hc-hero-photo-wrap { display: none; text-align: left; margin-left: 0; }
.hc-hero-photo-wrap img {
  display: block;
  border-radius: 30px;
  border: 1px solid var(--hc-bord);
}

.hc-hero-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-family:inherit}
.hc-hero-row-mobile{display:none}
.hc-gnote{display:inline-flex;align-items:center;gap:8px;background:var(--hc-carte);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:5px 12px 5px 9px}
.hc-gnote > svg{width:16px;height:16px;flex:none}
.hc-gnote-stars{display:flex;align-items:center;gap:1px}
.hc-gnote-stars svg{width:11px;height:11px}
.hc-gnote-txt{display:flex;align-items:baseline;gap:6px;line-height:1}
.hc-gnote-note{font-size:12.5px;font-weight:600;color:#FFFFFF}
.hc-gnote-sep{width:1px;height:10px;background:rgba(255,255,255,.15);align-self:center}
.hc-gnote-avis{font-size:11px;color:var(--hc-discret)}
.hc-see{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--hc-discret);text-decoration:none;transition:color .15s}
.hc-see:hover{color:#FFFFFF}
.hc-see svg{width:16px;height:16px;stroke:var(--hc-vert-ui);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.hc-points{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 50px}
/* Respiration au-dessus de la note Google : ne concerne que le hero en desktop. */
.hc-hero-row-desk { margin-top: 55px; }
.hc-points li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--hc-texte);margin:0;padding:0;text-align:left}
.hc-points svg{flex:none;width:20px;height:20px;margin-top:2px}

.hc-col-devis {
  background-color: var(--hc-carte);
  border-radius: 30px;
  border: 1px solid var(--hc-bord);
  padding: 4% 3%;
}
.hc-devis-txt { color: var(--hc-vert); }

/* --------------------------------------------------------------------------
   6. Surtitre souligné
   -------------------------------------------------------------------------- */
.hc-surtitre p {
  margin: 0;
  padding-bottom: 1em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--hc-vert);
}
.hc-hl{overflow:visible;position:relative;display:inline-block;vertical-align:middle;padding:0 5px;z-index:1}
.hc-hl-txt{position:relative;z-index:1}
.hc-hl svg{position:absolute;top:50%;left:50%;width:calc(100% + 20px);height:calc(100% + 20px);transform:translate(-50%,-50%);overflow:visible;stroke-linecap:round;z-index:-1}
.hc-hl svg path{fill:none;stroke-width:9px;stroke:var(--hc-vert);transition:stroke-dashoffset .8s ease-in-out}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hc-hl svg path { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Titres de section
   -------------------------------------------------------------------------- */
.hc-titre h2 { font-size: 40px; }
.hc-row-titre { padding-bottom: 0; }
.hc-br-phone { display: none; }
.hc-br-tablet-off { display: inline; }

.hc-titre-apercu, .hc-titre-vert, .hc-faq { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   8. Galerie et lightbox
   -------------------------------------------------------------------------- */
.hc-galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hc-galerie figure{margin:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;background:var(--hc-carte);cursor:pointer;transition:transform .15s}
.hc-galerie figure:hover{transform:translateY(-3px)}
.hc-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hc-galerie figcaption{padding:10px 12px;font-size:13px;line-height:1.4;color:var(--hc-texte)}
/* Les deux dernières photos occupent une demi-largeur */
.hc-galerie figure:nth-last-child(-n+2){grid-column:span 2}

.hc-lb{position:fixed;inset:0;z-index:99999;background:rgba(6,12,18,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.hc-lb.on{display:flex}
.hc-lb img{max-width:92vw;max-height:80vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.hc-lb .hc-lb-cap{margin-top:14px;color:var(--hc-texte);font-size:14px;text-align:center}
.hc-lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;border-radius:50%;width:44px;height:44px;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit}
.hc-lb button:hover{background:rgba(255,255,255,.22)}
.hc-lb .hc-lb-close{top:16px;right:16px}
.hc-lb .hc-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.hc-lb .hc-lb-next{right:12px;top:50%;transform:translateY(-50%)}

/* --------------------------------------------------------------------------
   9. Triptyque avant / aperçu / après
   -------------------------------------------------------------------------- */
.hc-preuve-grid{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:stretch;font-family:inherit}
.hc-preuve-grid figure{margin:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;background:var(--hc-carte);cursor:pointer;display:flex;flex-direction:column}
.hc-preuve-grid figure.hc-apercu{border:1.5px solid var(--hc-vert-ui)}
.hc-preuve-grid .hc-preuve-ph{position:relative}
.hc-preuve-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.hc-preuve-grid figcaption{padding:10px 12px;font-size:12.5px;color:var(--hc-texte);line-height:1.35}
.hc-preuve-badge{position:absolute;right:8px;top:8px;background:var(--hc-vert-ui);color:var(--hc-nuit);font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px}
.hc-preuve-arrow{display:flex;align-items:center;justify-content:center}
.hc-preuve-arrow svg{width:18px;height:18px;stroke:var(--hc-vert-ui)}

/* --------------------------------------------------------------------------
   10. Carte équipe
   -------------------------------------------------------------------------- */
.hc-carte-equipe {
  background-color: var(--hc-carte);
  border-radius: 50px;
  border: 1px solid var(--hc-bord);
  box-shadow: 0 2px 18px 0 rgba(0,0,0,.3);
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: stretch;
  gap: 5.5%;
}
.hc-carte-equipe > .hc-col-2-5 { width: 36.7%; border-radius: 30px; position: relative; }
.hc-carte-equipe > .hc-col-3-5 { width: 57.8%; margin: 0; padding: 55px 0; }

/* La photo est ancree au bas de la carte et deborde vers le haut. Hors du flux,
   elle ne gonfle jamais la hauteur : c'est le texte qui la fixe, et le bas de la
   photo tombe toujours pile sur le bord de la carte. */
.hc-photo-yohann { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.hc-photo-yohann img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Photo entiere, jamais recoupee. 360px de large donnent 576px de haut :
     la hauteur de la carte etant fixee par le texte, la tete depasse d'autant. */
  width: 360px;
  max-width: 100%;
  height: auto;
}
.hc-texte-equipe { color: rgba(255,255,255,0.8); }

/* --------------------------------------------------------------------------
   Places reservees
   Deux zones se remplissent apres coup : le formulaire, monte par son script,
   et le widget d'avis, charge depuis Trustindex. Sans hauteur reservee, le
   contenu qui suit remonte puis redescend au moment ou elles arrivent.
   -------------------------------------------------------------------------- */
#hc-ads-portail { min-height: 430px; }
.hc-trustindex { min-height: 320px; }
@media only screen and (max-width: 980px) {
  #hc-ads-portail { min-height: 380px; }
  .hc-trustindex { min-height: 420px; }
}

/* --------------------------------------------------------------------------
   11. Quatre étapes
   -------------------------------------------------------------------------- */
.hc-cols-etapes { gap: 3%; align-items: stretch; }
.hc-cols-etapes > .hc-col { width: 22.75%; }
.hc-etape {
  background-color: var(--hc-carte);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--hc-bord);
  padding: 4% 2%;
}
.hc-etape-num { color: var(--hc-vert); margin-bottom: 30px; }
.hc-etape h3 { font-size: 22px; }

/* --------------------------------------------------------------------------
   12. FAQ : accordéon natif details / summary
   -------------------------------------------------------------------------- */
.hc-faq details {
  border-bottom: 1px solid rgba(255,255,255,0.21);
  background-color: transparent;
}
.hc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  padding: 20px 50px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.hc-faq summary::-webkit-details-marker { display: none; }
.hc-faq summary h3 {
  padding: 0;
  margin: 0;
  color: #FFFFFF;
  line-height: 1.4em;
  flex: 1;
}
.hc-faq-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: var(--hc-vert);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}
.hc-faq details[open] .hc-faq-chevron { transform: rotate(180deg); }
.hc-faq-contenu { color: rgba(255,255,255,0.7); padding-bottom: 20px; }
.hc-faq-contenu > :last-child { padding-bottom: 0; }
.hc-faq-contenu a { font-weight: 700; text-decoration: underline; color: var(--hc-vert); }

/* --------------------------------------------------------------------------
   13. Bloc vert
   -------------------------------------------------------------------------- */
.hc-bloc-vert {
  background-image: linear-gradient(180deg, #7abd2f 0%, #407902 99%);
  border-radius: 30px;
  overflow: hidden;
  padding: 8% 0;
}
.hc-boutons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  border-radius: 30px;
  transition: all 300ms ease 0ms;
}
/* Amélioration 1 : bouton blanc sur fond vert, ancré sur le formulaire */
.hc-btn-blanc {
  background-color: #FFFFFF;
  color: var(--hc-vert-fonce);
  font-size: 18px;
  padding: 15px 32px;
  border: 1px solid #FFFFFF;
}
.hc-btn-blanc:hover { background-color: #F1F6EA; border-color: #F1F6EA; }
.hc-btn-tel {
  background-color: transparent;
  color: #FFFFFF;
  font-size: 16px;
  padding: 10px 20px;
  margin-top: 10px;
  border: 0;
}
.hc-btn-tel svg { width: 16px; height: 16px; fill: #FFFFFF; flex: none; }
.hc-btn-tel:hover { color: #EAF5DC; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.hc-sec-pied { padding-bottom: 0; }
.hc-cols-pied { gap: 5.5%; }
.hc-cols-pied > .hc-col { width: 29.6667%; }
.hc-pied-txt { color: rgba(255,255,255,0.7); }
.hc-pied-liens { font-size: 14px; }
.hc-pied-liens a { color: rgba(255,255,255,0.7); }
.hc-mentions { font-size: 14px; color: rgba(255,255,255,0.7); }
.hc-row-pied-bas { padding-bottom: 0; }
.hc-pied-logo { text-align: center; }
.hc-pied-logo img { width: 80px; display: block; margin: 0 auto; }

/* --------------------------------------------------------------------------
   15. Bouton flottant
   -------------------------------------------------------------------------- */
/* Bouton flottant, desormais sur tous les ecrans. Il ne prend aucune place
   dans la mise en page et n'apparait que lorsque le formulaire du hero a
   quitte l'ecran. Un seul vert, le telephone reste en retrait. */
/* --------------------------------------------------------------------------
   Barre de rappel
   Elle n'existe pas a l'arrivee : l'en-tete complet est encore a l'ecran.
   Elle descend au moment precis ou le bouton flottant apparait, c'est a dire
   quand le formulaire du hero a quitte l'ecran.
   -------------------------------------------------------------------------- */
.hc-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(15, 22, 31, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
.hc-bar.hc-show { transform: none; visibility: visible; }
.hc-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 40px;
}
/* Logo et bloc de droite prennent une part egale : le menu tombe donc au
   centre exact, a la meme place que dans l'en-tete complet. */
.hc-bar-logo { flex: 1 1 0; min-width: 0; }
.hc-bar-logo a { display: inline-block; }
.hc-bar-logo img { height: 44px; width: auto; display: block; }
.hc-bar-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 26px; }
/* Meme groupement qu'en en-tete : l'adresse reste visible pendant tout le
   defilement, elle se masque sous 1200px pour laisser la place au menu. */
.hc-bar-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.hc-bar-nav a {
  position: relative;
  font-size: 14.5px;
  line-height: 1;
  color: var(--hc-discret);
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .15s;
}
.hc-bar-nav a:hover,
.hc-bar-nav a[aria-current="true"] { color: #FFFFFF; }
.hc-bar-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--hc-vert-ui);
  transition: right .2s;
}
.hc-bar-nav a:hover::after,
.hc-bar-nav a[aria-current="true"]::after { right: 0; }
.hc-bar-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--hc-vert-ui);
  color: var(--hc-nuit);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 13px 18px;
  border-radius: 100px;
  white-space: nowrap;
  transition: background .15s;
}
.hc-bar-tel:hover { background: #8ad13a; color: var(--hc-nuit); }
.hc-bar-tel svg { width: 16px; height: 16px; fill: var(--hc-nuit); flex: none; }
@media (max-width: 1200px) { .hc-bar-inner { padding: 9px 24px; } }

.hc-float{display:flex;position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:9999;gap:12px;align-items:center;transition:transform .25s,opacity .25s}
.hc-float a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:inherit;box-shadow:0 6px 20px rgba(0,0,0,.35)}
/* La silhouette sort du bouton par le haut, comme elle sort de la carte
   equipe. Le bouton lui reserve sa place a gauche par le padding. */
.hc-float-devis{position:relative;background:var(--hc-vert-ui);color:var(--hc-nuit);font-size:15px;font-weight:700;padding:0 78px 0 26px;height:56px;border-radius:100px;white-space:nowrap;overflow:visible}
/* Meme fichier que la carte equipe, donc deja en cache : la silhouette entiere
   est posee a droite, sur le bord bas du bouton, et depasse par le haut. */
.hc-float-buste{position:absolute;right:12px;bottom:0;width:54px;height:auto;pointer-events:none}
.hc-float.hide{transform:translateY(120%);opacity:0;pointer-events:none}

/* ==========================================================================
   16. Palier >= 981px
   ========================================================================== */
@media only screen and (min-width: 981px) {
  .hc-sec { padding: 4% 0; }
  /* L'en-tete reste dans le flux et defile normalement : il ne vole aucune
     hauteur. C'est la barre de rappel ci-dessous qui prend le relais. */
  .hc-bar { display: block; }

  /* Les ancres tiennent compte de la barre de rappel. */
  #realisations, #apercu, #pose, #avis, #faq, #devis { scroll-margin-top: 84px; }
  #equipe { scroll-margin-top: 190px; }
  .hc-sec-pied { padding-bottom: 0; }
  .hc-row { padding: 2% 0; }
  .hc-row-head { padding: 10px 40px; }
  .hc-row-hero { padding-top: 0; padding-bottom: 0; }
  .hc-row-titre { padding-bottom: 0; }
  .hc-row-pied-bas { padding-bottom: 0; }
  .hc-carte-equipe { padding-top: 0; padding-bottom: 0; }
  .hc-bloc-vert { padding-top: 8%; padding-bottom: 8%; }

  .hc-titre-realisations, .hc-faq { width: 70%; }
  .hc-titre-apercu, .hc-titre-vert { width: 50%; }
  .hc-texte-equipe { width: 80%; }
}

@media only screen and (min-width: 1500px) {
  .hc-sec { padding: 60px 0; }
  .hc-sec-head { padding: 0; }
  .hc-sec-pied { padding-bottom: 0; }
  .hc-row { padding: 30px 0; }
  .hc-row-head { padding: 10px 48px; }
  .hc-row-hero { padding-top: 0; padding-bottom: 0; }
  .hc-row-titre { padding-bottom: 0; }
  .hc-row-pied-bas { padding-bottom: 0; }
  .hc-carte-equipe { padding-top: 0; padding-bottom: 0; }
  .hc-bloc-vert { padding-top: 8%; padding-bottom: 8%; }
}

/* ==========================================================================
   17. Palier <= 1200px : l'adresse de l'en-tête passe à la trappe
   ========================================================================== */
@media (max-width: 1200px) {
  .hc-addr { display: none; }
}

/* ==========================================================================
   18. Palier <= 980px
   ========================================================================== */
@media only screen and (max-width: 980px) {
  .hc-sec { padding: 50px 0; }
  .hc-sec-head { padding: 0; }
  .hc-sec-pied { padding-bottom: 0; }
  .hc-row { width: 90%; padding: 30px 0; }
  /* Meme gabarit que les sections : 90% centre, aucune marge interieure.
     Le logo et le burger tombent ainsi sur les memes rails que le contenu. */
  .hc-row-head { width: 90%; max-width: none; padding: 8px 0; margin-left: auto; margin-right: auto; }
  .hc-row-hero { padding-top: 0; padding-bottom: 0; }
  .hc-row-titre { padding-bottom: 0; }
  .hc-row-pied-bas { padding-bottom: 0; }

  /* Colonnes empilées */
  .hc-cols { display: block; }
  .hc-cols > .hc-col { width: 100%; margin-bottom: 30px; }
  .hc-cols > .hc-col:last-child { margin-bottom: 0; }

  /* En-tête */
  .hc-nav, .hc-header-tel { display: none; }
  .hc-header { padding: 8px 0; gap: 16px; }
  .hc-header-logo img { height: 44px; }
  .hc-addr { display: flex; gap: 7px; }
  .hc-addr svg { width: 15px; height: 15px; }
  .hc-addr-line { font-size: 11.5px; }

  /* Burger allege : traits plus fins et plus courts. La marge negative annule
     sa zone de confort au toucher pour que les traits soient alignes sur le
     bord du contenu, sans reduire la surface cliquable. */
  .hc-burger { display: block; padding: 10px; margin: -10px -10px -10px 0; }
  .hc-burger span { width: 22px; height: 2px; }
  .hc-burger span + span { margin-top: 5px; }
  .hc-burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hc-burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hero */
  .hc-h1 { font-size: 75px; }
  .hc-hero-photo-wrap { display: block; }
  .hc-hero-row-mobile { display: flex; }
  .hc-hero-row-desk { display: none; }
  .hc-hero-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hc-see { display: none; }
  .hc-points { grid-template-columns: 1fr; gap: 16px; }
  .hc-col-devis { padding: 4%; }

  /* Titres */
  .hc-titre h2 { font-size: 40px; }
  .hc-titre-realisations, .hc-titre-apercu, .hc-texte-equipe, .hc-faq { width: 100%; }
  .hc-titre-vert { width: 80%; }

  /* Galerie */
  .hc-galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hc-galerie figure:nth-last-child(-n+2) { grid-column: auto; }
  .hc-galerie figcaption { font-size: 12px; padding: 8px 10px; }

  /* Triptyque */
  .hc-preuve-grid { grid-template-columns: 1fr; }
  .hc-preuve-grid img { aspect-ratio: 16/10; }
  .hc-preuve-arrow { padding: 6px 0; }
  .hc-preuve-arrow svg { transform: rotate(90deg); }

  /* Carte équipe : le texte passe au-dessus de la photo */
  .hc-carte-equipe {
    display: flex;
    flex-direction: column-reverse;
    padding: 8% 8% 0 8%;
  }
  .hc-carte-equipe > .hc-col { width: 100%; margin-bottom: 30px; }
  .hc-carte-equipe > .hc-col-2-5 { margin-bottom: 0; }
  .hc-photo-yohann { position: static; margin-top: 30px; margin-bottom: -30px; margin-left: 0; }
  .hc-photo-yohann img { width: 300px; }

  /* Bloc vert */
  .hc-bloc-vert { padding-top: 10%; padding-bottom: 10%; }

  /* Bouton flottant */
  .hc-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  .hc-float-devis { font-size: 14px; padding: 0 68px 0 20px; height: 50px; }
  .hc-float-buste { right: 10px; width: 47px; }
  body { padding-bottom: 80px; }
}

/* Entre 768 et 980px : quelques réglages propres à la tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .hc-al-left-tabcenter { text-align: center; }
  .hc-br-tablet-off { display: none; }
}

/* ==========================================================================
   19. Palier <= 767px
   ========================================================================== */
@media only screen and (max-width: 767px) {
  .hc-row-head { padding: 4px 0; }
  .hc-h1 { font-size: 45px; }

  .hc-hero-row-mobile, .hc-hero-photo-wrap { margin-bottom: 50px; }
  .hc-points-mod, .hc-texte-equipe { margin-bottom: 30px; }

  .hc-titre h2 { font-size: 30px; }
  .hc-titre-faq h2 { font-size: 36px; }
  .hc-br-phone { display: inline; }
  .hc-al-center-phoneleft { text-align: left; }

  .hc-sec-equipe { padding-bottom: 0; }
  .hc-carte-equipe { padding: 14% 10% 0 10%; }
  .hc-photo-yohann { margin-top: 0; margin-bottom: -30px; }

  .hc-bloc-vert { padding-top: 14%; padding-bottom: 14%; }
  .hc-col-devis { padding: 10% 8%; }
  .hc-etape { padding: 10%; }
}