/* NALHA — Les lions de la construction
   Charte : jaune #F6BA04, noir, blanc. Police : Poppins. Angles vifs. */

:root {
  --jaune: #F6BA04;
  --noir: #000;
  --blanc: #fff;
  --encre: rgba(0, 0, 0, .66);
  --encre-claire: rgba(255, 255, 255, .7);
  --filet: rgba(0, 0, 0, .12);
  --filet-clair: rgba(255, 255, 255, .18);
  --largeur: 1440px;
  --gouttiere: clamp(20px, 4vw, 64px);
  --entete: 96px;
  --police: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ombre: 0 30px 70px rgba(0, 0, 0, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.7;
  color: var(--noir);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.ico {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.enveloppe {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.jaune { color: var(--jaune); }
.centre { display: flex; justify-content: center; }

/* Hachures de chantier (couverture Facebook du kit) */
.hachures { background: repeating-linear-gradient(135deg, var(--jaune) 0 16px, var(--noir) 16px 32px); }

/* ---------- Typographie commune ---------- */

.surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  letter-spacing: .26em; text-transform: uppercase;
}
.surtitre::before { content: ""; width: 10px; height: 10px; background: var(--jaune); flex: none; }
.surtitre-jaune { color: var(--jaune); }

.titre-section {
  font-size: clamp(30px, 3.3vw, 50px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance; hyphens: none;
}
.titre-filets { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 32px); }
.titre-filets::before, .titre-filets::after {
  content: ""; flex: 1 1 40px; max-width: 120px; height: 1px;
  background: currentColor; opacity: .28;
}
.titre-filets span { text-wrap: balance; }

.tete-section {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.chapeau { max-width: 660px; font-size: 17px; color: var(--encre); }

/* ---------- Boutons ---------- */

.boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 28px;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bouton .ico { width: 20px; height: 20px; transition: transform .2s; }
.bouton:hover .ico { transform: translateX(4px); }
.bouton-jaune { background: var(--jaune); color: var(--noir); border-color: var(--jaune); }
.bouton-jaune:hover { background: var(--noir); color: var(--jaune); }
.bouton-noir { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.bouton-noir:hover { background: var(--jaune); color: var(--noir); border-color: var(--jaune); }
.bouton-contour { border-color: rgba(255, 255, 255, .55); color: var(--blanc); }
.bouton-contour:hover { border-color: var(--jaune); color: var(--jaune); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
  padding-bottom: 6px; border-bottom: 2px solid var(--jaune);
}
.lien-fleche .ico { width: 20px; height: 20px; transition: transform .2s; }
.lien-fleche:hover .ico { transform: translateX(4px); }

/* ---------- En-tête ---------- */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--blanc);
  transition: background-color .3s, box-shadow .3s;
}
.entete-barre {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  height: var(--entete);
  transition: height .3s;
}
.entete.est-colle { background: var(--noir); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.entete.est-colle .entete-barre { height: 76px; }
.entete-logo { flex: none; }
.entete-logo img { height: 48px; width: auto; transition: height .3s; }
.entete.est-colle .entete-logo img { height: 40px; }
.entete-nav { display: flex; gap: clamp(18px, 2.2vw, 36px); margin-left: auto; }
.lien-nav {
  position: relative; padding-block: 8px;
  font-size: 15px; font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: color .2s;
}
.lien-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--jaune); transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.lien-nav:hover, .lien-nav.est-actif { color: var(--blanc); }
.lien-nav:hover::after, .lien-nav.est-actif::after { transform: scaleX(1); }
.entete-cta { padding: 12px 22px; }
.entete-espace {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border: 2px solid rgba(255, 255, 255, .45); color: var(--blanc);
  transition: border-color .2s, color .2s;
}
.entete-espace:hover { border-color: var(--jaune); color: var(--jaune); }
.entete-espace .ico { width: 20px; height: 20px; }
.entete-burger {
  display: none; width: 48px; height: 48px; margin-left: auto;
  place-items: center; background: none; border: 0; cursor: pointer; color: var(--blanc);
}
.entete-burger .ico { width: 28px; height: 28px; }
.entete-burger .ico + .ico { display: none; }

/* ---------- Héros ---------- */

.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(700px, 100svh, 940px);
  background: var(--noir); color: var(--blanc);
}
.hero-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 84%; height: 100%;
  object-fit: cover; object-position: 72% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%);
}
.hero-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.84) 30%, rgba(0,0,0,.4) 56%, rgba(0,0,0,.05) 78%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 22%);
}
.hero-hachures { position: absolute; top: 0; bottom: 0; right: 0; width: clamp(24px, 3vw, 48px); }
.hero-contenu { position: relative; z-index: 2; padding-top: calc(var(--entete) + 24px); padding-bottom: 150px; }
.hero-contenu > * { max-width: 760px; }
.hero-titre {
  margin: 24px 0 26px;
  font-size: clamp(46px, 6.6vw, 104px);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  text-wrap: balance; hyphens: none;
}
.hero-titre .jaune { display: block; }
.hero-texte { max-width: 560px; margin-bottom: 40px; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .8); }

/* ---------- Barre de services (chevauche le héros) ---------- */

.services-zone { position: relative; z-index: 5; margin-top: -96px; }
.services-barre {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--blanc);
  border-top: 4px solid var(--jaune);
  box-shadow: var(--ombre);
}
.service {
  position: relative;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 34px clamp(20px, 2.2vw, 34px);
  transition: background-color .2s;
}
.service + .service::before {
  content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px;
  background: var(--filet);
}
.service:hover { background: var(--jaune); }
.service:hover::before, .service:hover + .service::before { opacity: 0; }
.service-ico {
  display: grid; place-items: center; flex: none;
  width: 58px; height: 58px;
  background: var(--noir); color: var(--jaune);
}
.service-ico .ico { width: 32px; height: 32px; stroke-width: 1.6; }
.service-titre { display: block; margin-bottom: 4px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.service-desc { display: block; font-size: 14px; line-height: 1.55; color: var(--encre); }
.service:hover .service-desc { color: rgba(0, 0, 0, .78); }

/* ---------- Nos métiers ---------- */

.metiers { padding: clamp(84px, 9vw, 140px) 0 clamp(96px, 10vw, 156px); }
.metiers-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 88px); }
.metier-photo { position: relative; aspect-ratio: 16 / 11; margin: 0 22px 22px 0; }
.metier-photo::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 3px solid var(--jaune);
}
.metier-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.metier-corps { padding-top: 40px; }
.metier-tete { display: flex; align-items: center; gap: 16px; }
.metier-num { padding: 7px 10px; background: var(--jaune); font-size: 15px; font-weight: 800; line-height: 1; }
.metier-titre { font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.metier-texte { max-width: 540px; margin-top: 16px; font-size: 17px; color: var(--encre); }
.liste-check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 28px 0 34px; }
.liste-check li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.5; }
.liste-check .ico { width: 21px; height: 21px; margin-top: 1px; padding: 3px; background: var(--jaune); stroke-width: 2.6; }

/* ---------- Bande jaune : chiffres ---------- */

.chiffres { padding: clamp(76px, 8vw, 124px) 0; background: var(--jaune); }
.chiffres-tete {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end; gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(48px, 6vw, 84px);
}
.chiffres-titre {
  font-size: clamp(42px, 5.6vw, 84px);
  font-weight: 800; line-height: 1; letter-spacing: -.04em;
  text-wrap: balance; hyphens: none;
}
.chiffres-texte { max-width: 470px; font-size: 17px; font-weight: 500; line-height: 1.65; }
.chiffres-grille { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--noir); }
.chiffre { padding: 38px 24px 0 0; }
.chiffre + .chiffre { padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid rgba(0, 0, 0, .28); }
.chiffre .ico { width: 34px; height: 34px; stroke-width: 1.6; }
.chiffre-valeur { margin: 22px 0 10px; font-size: clamp(48px, 5vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.chiffre-label { max-width: 220px; font-size: 15px; font-weight: 500; line-height: 1.5; }

/* ---------- Projet à la une ---------- */

.vedette { display: grid; grid-template-columns: 1fr 1fr; min-height: 660px; }
.vedette-photo { position: relative; min-height: 360px; }
.vedette-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vedette-panneau {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px;
  padding: clamp(64px, 7vw, 120px) clamp(28px, 6vw, 112px);
}
.vedette-panneau > * { max-width: 560px; }
.vedette-badge {
  position: absolute; left: 0; top: clamp(48px, 6vw, 84px);
  width: clamp(110px, 10vw, 150px); height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .35));
}
.vedette-texte { font-size: 17px; color: var(--encre); }
.vedette-fiche {
  display: flex; width: 100%; margin: 6px 0 10px;
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
}
.vedette-fiche > div { flex: 1; padding: 16px 0; }
.vedette-fiche > div + div { padding-left: 24px; border-left: 1px solid var(--filet); }
.vedette-fiche dt { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--encre); }
.vedette-fiche dd { font-size: 21px; font-weight: 700; line-height: 1.4; }

/* ---------- Méthode (bande noire) ---------- */

.methode { position: relative; overflow: hidden; padding: clamp(90px, 10vw, 150px) 0; background: var(--noir); color: var(--blanc); }
/* Photo inversée : le ciel devient noir, les poteaux deviennent des traits clairs à peine visibles */
.methode-texture {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .09; filter: grayscale(1) invert(1) contrast(1.6);
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 85%);
  mask-image: linear-gradient(180deg, transparent 10%, #000 85%);
}
.methode .enveloppe { position: relative; }
.etapes { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 32px); }
.etapes::before {
  content: ""; position: absolute; top: 44px; left: calc(100% / 12); right: calc(100% / 12);
  border-top: 2px dashed rgba(246, 186, 4, .6);
}
.etape { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.etape-rond {
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--jaune); color: var(--noir);
  box-shadow: 0 0 0 10px var(--noir);
}
.etape-rond .ico { width: 36px; height: 36px; stroke-width: 1.6; }
.etape-num { margin-top: 26px; font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--jaune); }
.etape-titre { margin: 6px 0 10px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.etape p { font-size: 14px; line-height: 1.6; color: var(--encre-claire); }

/* ---------- Réalisations ---------- */

.realisations { padding: clamp(90px, 10vw, 150px) 0; }
.filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: -20px 0 48px; }
.filtre {
  padding: 10px 22px;
  font-size: 14px; font-weight: 600;
  background: none; border: 2px solid var(--noir); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.filtre:hover { background: var(--jaune); border-color: var(--jaune); }
.filtre.est-actif { background: var(--noir); border-color: var(--noir); color: var(--jaune); }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px); margin-bottom: 56px; }
.projet { background: var(--blanc); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }
.projet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.projet figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-bottom: 3px solid var(--jaune);
}
.projet strong { font-size: 17px; font-weight: 600; line-height: 1.4; }
.projet span { font-size: 13px; color: var(--encre); white-space: nowrap; }
.projet.est-cache { display: none; }

/* ---------- Contact (bande noire) ---------- */

.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 27%) minmax(0, 1fr) minmax(0, 520px);
  column-gap: clamp(32px, 4vw, 64px);
  padding-right: max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
  background: var(--noir); color: var(--blanc);
}
.contact-visuel { position: relative; min-height: 100%; }
.contact-visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 87% 50%;
  -webkit-mask-image: radial-gradient(ellipse 60% 30% at 50% 71%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 30% at 50% 71%, #000 60%, transparent 100%);
}
.contact-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: clamp(90px, 9vw, 140px); }
.contact-intro { max-width: 460px; font-size: 17px; color: var(--encre-claire); }
.contact-liste { display: grid; gap: 20px; margin-top: 12px; }
.contact-liste li { display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; }
.contact-liste small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--encre-claire); }
.contact-liste a:hover { color: var(--jaune); }
.contact-ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border: 2px solid var(--jaune); color: var(--jaune); }
.contact-ico .ico { width: 24px; height: 24px; }

.formulaire {
  align-self: start;
  display: grid; gap: 18px;
  margin-block: clamp(70px, 7vw, 110px);
  padding: clamp(28px, 3vw, 44px);
  background: var(--blanc); color: var(--noir);
  border-top: 4px solid var(--jaune);
}
.formulaire-titre { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 4px; }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: grid; gap: 7px; }
.champ > span { font-size: 13px; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--noir);
  background: var(--blanc); border: 1px solid rgba(0, 0, 0, .22); border-radius: 0;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(0, 0, 0, .4); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--noir); box-shadow: 0 0 0 3px var(--jaune);
}
.formulaire .bouton { width: 100%; margin-top: 4px; }

/* ---------- Pied de page ---------- */

.pied { background: var(--noir); color: var(--blanc); }
.pied-hachures { height: 16px; }
.pied-grille {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(48px, 5vw, 72px);
}
.pied-marque { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.pied-marque img { height: 52px; width: auto; }
.pied-marque p { max-width: 360px; font-size: 15px; color: var(--encre-claire); }
.pied-reseaux { display: flex; gap: 10px; }
.pied-reseaux a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--filet-clair); color: var(--blanc);
  transition: background-color .2s, color .2s, border-color .2s;
}
.pied-reseaux a:hover { background: var(--jaune); border-color: var(--jaune); color: var(--noir); }
.pied-reseaux .ico { width: 20px; height: 20px; }
.pied-titre { margin-bottom: 20px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--jaune); }
.pied-col ul { display: grid; gap: 12px; }
.pied-col li { font-size: 15px; color: var(--encre-claire); }
.pied-col a:hover { color: var(--jaune); }
.pied-contact li { display: flex; align-items: center; gap: 12px; }
.pied-contact .ico { width: 20px; height: 20px; color: var(--jaune); }
.pied-cta { margin-top: 26px; padding: 12px 20px; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; padding-bottom: 28px;
  border-top: 1px solid var(--filet-clair);
  font-size: 13px; color: rgba(255, 255, 255, .55);
}
.pied-bas a:hover { color: var(--jaune); }

/* ---------- Service MRE : lien du menu et encadré du héros ---------- */

.lien-nav-mre, .lien-nav-mre:hover, .lien-nav-mre.est-actif { color: var(--jaune); }

.hero-mre {
  display: flex; align-items: center; gap: 18px;
  max-width: 600px; margin-top: 36px; padding: 14px 20px 14px 14px;
  border: 2px solid var(--jaune);
  background: rgba(0, 0, 0, .55);
  transition: background-color .2s, color .2s;
}
.hero-mre-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; background: var(--jaune); color: var(--noir); }
.hero-mre-ico .ico { width: 28px; height: 28px; }
.hero-mre-texte { flex: 1; font-size: 15px; line-height: 1.45; }
.hero-mre-texte small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--jaune); }
.hero-mre-texte strong { font-weight: 600; }
.hero-mre > .ico { width: 22px; height: 22px; color: var(--jaune); transition: transform .2s; }
.hero-mre:hover { background: var(--jaune); color: var(--noir); }
.hero-mre:hover .hero-mre-ico { background: var(--noir); color: var(--jaune); }
.hero-mre:hover .hero-mre-texte small, .hero-mre:hover > .ico { color: var(--noir); }
.hero-mre:hover > .ico { transform: translateX(4px); }

/* Bande MRE de l'accueil */
.mre-bande { padding: clamp(90px, 9vw, 140px) 0; background: var(--noir); color: var(--blanc); }
.mre-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(40px, 5vw, 90px); }
.mre-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.mre-intro { max-width: 520px; font-size: 17px; color: var(--encre-claire); }
.mre-points { display: grid; gap: 14px; margin: 4px 0 16px; }
.mre-points li { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--encre-claire); }
.mre-points strong { font-weight: 600; color: var(--blanc); }
.mre-points .ico { width: 46px; height: 46px; padding: 10px; border: 2px solid var(--jaune); color: var(--jaune); }
/* L'aperçu du portail déborde au-dessus de la bande noire, sur la section blanche précédente */
.mre-visuel { margin-top: calc(-1 * clamp(150px, 15vw, 230px)); }

/* Aperçu du portail client (illustration) */
.portail-scene { position: relative; padding: 0 0 56px 56px; }
.portail {
  font-size: 13px; line-height: 1.5;
  background: var(--blanc); color: var(--noir);
  border-top: 4px solid var(--jaune);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
}
.portail-barre { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--filet); }
.portail-barre > span:not(.portail-cadenas) { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .16); }
.portail-barre p { flex: 1; font-size: 12px; font-weight: 600; text-align: center; color: var(--encre); }
.portail-cadenas .ico { width: 16px; height: 16px; color: var(--encre); }
.portail-corps { display: grid; grid-template-columns: 186px minmax(0, 1fr); }
.portail-menu { padding: 20px 12px; background: var(--noir); color: var(--blanc); }
.portail-menu img { width: auto; height: 26px; margin: 0 0 22px 10px; }
.portail-menu ul { display: grid; gap: 4px; }
.portail-menu li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 12.5px; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.portail-menu li .ico { width: 17px; height: 17px; }
.portail-menu li.est-actif { background: var(--jaune); color: var(--noir); font-weight: 600; }
.portail-contenu { display: grid; gap: 18px; padding: 22px 24px 24px; }
.portail-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.portail-tete small, .portail-cr small, .portail-notif small {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre);
}
.portail-titre { font-size: 19px; font-weight: 700; line-height: 1.3; }
.portail-etat { padding: 4px 10px; font-size: 11px; font-weight: 600; background: var(--noir); color: var(--jaune); white-space: nowrap; }
.portail-progression-ligne { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; font-size: 12.5px; }
.portail-progression-ligne strong { font-size: 22px; font-weight: 800; line-height: 1; }
.portail-jauge { height: 10px; background: rgba(0, 0, 0, .08); }
.portail-jauge span { display: block; width: 64%; height: 100%; background: var(--jaune); }
.portail-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.portail-phases li { padding-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--encre); border-top: 3px solid rgba(0, 0, 0, .12); }
.portail-phases li.est-fait { color: var(--noir); border-color: var(--noir); }
.portail-phases li.est-encours { color: var(--noir); border-color: var(--jaune); }
.portail-medias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.portail-medias img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.portail-video { position: relative; display: block; }
.portail-video .ico {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 9px 8px 9px 10px;
  border-radius: 50%; background: var(--jaune); color: var(--noir); fill: var(--noir);
}
.portail-cr { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--filet); border-left: 4px solid var(--jaune); }
.portail-cr-ico .ico { width: 26px; height: 26px; }
.portail-cr > div { flex: 1; }
.portail-cr p { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.portail-cr > .ico { width: 18px; height: 18px; }
.portail-notif {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  width: min(330px, 82%); padding: 14px 16px;
  background: var(--jaune); color: var(--noir);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.portail-notif small { color: rgba(0, 0, 0, .7); }
.portail-notif p { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.portail-notif-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--noir); color: var(--jaune); }
.portail-notif-ico .ico { width: 22px; height: 22px; }

/* ---------- Pages intérieures : héros ---------- */

.page-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(580px, 80svh, 780px);
  background: var(--noir); color: var(--blanc);
}
.page-hero-contenu { position: relative; z-index: 2; padding-top: calc(var(--entete) + 64px); padding-bottom: clamp(72px, 8vw, 120px); }
.page-hero-contenu > * { max-width: 880px; }
.page-hero-titre {
  margin: 22px 0 24px;
  font-size: clamp(40px, 5.4vw, 82px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  text-wrap: balance; hyphens: none;
}
.page-hero-titre .jaune { display: block; }
.page-hero .hero-texte { max-width: 620px; }
.page-hero .bouton-contour .ico { width: 18px; height: 18px; }
.page-hero .bouton-contour:hover .ico { transform: none; }

/* ---------- Page MRE ---------- */

.atouts { padding: clamp(90px, 10vw, 150px) 0; }
.atouts-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.atout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--filet); border-top: 4px solid var(--jaune);
}
.atout-titre { font-size: 22px; font-weight: 700; line-height: 1.3; }
.atout p { font-size: 16px; color: var(--encre); }

.portail-section { padding: clamp(90px, 10vw, 150px) 0; background: var(--noir); color: var(--blanc); }
.chapeau-clair { color: var(--encre-claire); }
.portail-section-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(40px, 5vw, 88px); }
.fonction { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--filet-clair); }
.fonction:first-child { padding-top: 0; }
.fonction:last-child { border-bottom: 0; padding-bottom: 0; }
.fonction-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; background: var(--jaune); color: var(--noir); }
.fonction h3 { margin-bottom: 2px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.fonction p { font-size: 14.5px; line-height: 1.6; color: var(--encre-claire); }

.hebdo { overflow: hidden; padding: clamp(80px, 9vw, 130px) 0; background: var(--jaune); }
.hebdo-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.hebdo-chiffre { display: flex; align-items: flex-end; gap: 22px; }
.hebdo-num { font-size: clamp(190px, 23vw, 360px); font-weight: 800; line-height: .74; letter-spacing: -.06em; }
.hebdo-chiffre p { padding-bottom: 4px; font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.2; }
.hebdo-texte { display: flex; flex-direction: column; gap: 22px; }
.hebdo-titre { font-size: clamp(34px, 3.8vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.hebdo-texte > p { max-width: 620px; font-size: 17px; font-weight: 500; }
.hebdo-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; padding-top: 24px; border-top: 2px solid var(--noir); }
.hebdo-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.hebdo-liste .ico { width: 22px; height: 22px; margin-top: 1px; padding: 3px; background: var(--noir); color: var(--jaune); stroke-width: 2.6; }

.methode-claire { background: var(--blanc); color: var(--noir); }
.methode-claire .etapes::before { border-top-color: rgba(0, 0, 0, .3); }
.methode-claire .etape-rond { box-shadow: 0 0 0 10px var(--blanc); }
.methode-claire .etape-num { color: var(--noir); }
.methode-claire .etape p { color: var(--encre); }

.faq { padding: 0 0 clamp(90px, 10vw, 150px); }
.faq-grille {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: clamp(32px, 5vw, 96px);
  padding-top: clamp(64px, 7vw, 100px); border-top: 1px solid var(--filet);
}
.faq-tete { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.faq-liste { border-top: 2px solid var(--noir); }
.faq-item { border-bottom: 1px solid var(--filet); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: 18px; font-weight: 600; line-height: 1.4;
  list-style: none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  font-size: 22px; font-weight: 500; line-height: 1; background: var(--jaune);
}
.faq-item[open] summary::after { content: "\2212"; background: var(--noir); color: var(--jaune); }
.faq-item p { padding: 0 60px 26px 0; font-size: 16px; color: var(--encre); }

/* ---------- Pages intérieures ---------- */

.page-hero-court { min-height: clamp(480px, 64svh, 620px); }
.page-hero-piscines .hero-photo { object-position: 50% 62%; }

/* Offres en alternance (construction) */
.offres { padding: clamp(90px, 10vw, 150px) 0; }
.offre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 110px); scroll-margin-top: 100px; }
.offre + .offre { margin-top: clamp(80px, 9vw, 140px); }
.offre:nth-of-type(even) .metier-photo { order: 2; margin: 0 0 22px 22px; }
.offre:nth-of-type(even) .metier-photo::before { inset: 22px 22px -22px -22px; }
.offre .metier-texte { margin-top: 18px; }

/* Bande jaune : prestations, équipements */
.prestations { padding: clamp(80px, 9vw, 130px) 0; background: var(--jaune); }
.prestations .surtitre::before { background: var(--noir); }
.prestations-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--noir); }
.prestation { display: flex; align-items: flex-start; gap: 18px; padding: 32px 28px 32px 0; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.prestation:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid rgba(0, 0, 0, .25); }
.prestation h3 { margin-bottom: 6px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.prestation p { font-size: 15px; line-height: 1.6; }

/* Cartes à photo (types de piscines) */
.types { padding: clamp(90px, 10vw, 150px) 0; }
.cartes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.carte-type { display: flex; flex-direction: column; background: var(--blanc); border-bottom: 4px solid var(--jaune); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }
.carte-type img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte-type-corps { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 28px 32px; }
.carte-type h3 { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.carte-type p { font-size: 15.5px; color: var(--encre); }
.carte-type .lien-fleche { margin-top: auto; }

/* Engagements sur 4 colonnes */
.atouts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Réalisations : page complète */
.realisations-page .filtres { margin: 0 0 48px; }
.realisations-page .galerie { margin-bottom: 0; }

/* Contact rapide */
.contact-rapide { padding: clamp(70px, 8vw, 120px) 0; }
.rapide-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.rapide {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 30px 28px; border: 1px solid var(--filet); border-top: 4px solid var(--jaune);
  transition: background-color .2s, border-color .2s;
}
.rapide .service-ico { margin-bottom: 8px; }
.rapide small { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--encre); }
.rapide strong { font-size: 20px; font-weight: 700; line-height: 1.3; }
.rapide-action { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; border-bottom: 2px solid var(--jaune); }
.rapide-action .ico { width: 18px; height: 18px; transition: transform .2s; }
.rapide:hover { background: var(--jaune); border-color: var(--jaune); }
.rapide:hover small { color: rgba(0, 0, 0, .7); }
.rapide:hover .rapide-action { border-color: var(--noir); }
.rapide:hover .rapide-action .ico { transform: translateX(4px); }

/* ---------- Menu replié (le menu a 7 entrées) ---------- */

@media (max-width: 1320px) {
  .entete-nav, .entete-cta { display: none; }
  .entete-burger { display: grid; margin-left: 0; }
  .entete-espace { margin-left: auto; width: 44px; height: 44px; }
  body.menu-ouvert { overflow: hidden; }
  body.menu-ouvert .entete { background: var(--noir); }
  body.menu-ouvert .entete-nav {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 76px 0 0; z-index: 49;
    padding: 24px var(--gouttiere) 120px;
    background: var(--noir); overflow-y: auto;
  }
  body.menu-ouvert .lien-nav { padding: 16px 0; font-size: 22px; font-weight: 600; border-bottom: 1px solid var(--filet-clair); }
  body.menu-ouvert .lien-nav::after { display: none; }
  body.menu-ouvert .lien-nav.est-actif { color: var(--jaune); }
  body.menu-ouvert .entete-cta { display: inline-flex; position: fixed; left: var(--gouttiere); right: var(--gouttiere); bottom: 28px; z-index: 50; }
  body.menu-ouvert .entete-burger .ico { display: none; }
  body.menu-ouvert .entete-burger .ico + .ico { display: block; }
  body.menu-ouvert .entete-barre { height: 76px; }
}

/* ---------- Tablette ---------- */

@media (max-width: 1180px) {
  .mre-grille, .portail-section-grille { grid-template-columns: 1fr; }
  .mre-visuel { margin-top: 0; max-width: 760px; }
  .portail-section-visuel { max-width: 760px; }
  .prestations-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prestation:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .prestation:nth-child(even) { padding-left: 28px; border-left: 1px solid rgba(0, 0, 0, .25); }
  .cartes-3 { grid-template-columns: 1fr 1fr; }
  .atouts-4, .rapide-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-barre { grid-template-columns: repeat(2, 1fr); }
  .service:nth-child(3)::before { display: none; }
  .service:nth-child(n + 3) { border-top: 1px solid var(--filet); }
  .etapes { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
  .etapes::before { display: none; }
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); padding-left: var(--gouttiere); }
  .contact-visuel { display: none; }
  .pied-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  :root { --entete: 76px; }
  .entete-logo img { height: 40px; }
  .hero { min-height: 0; }
  .hero-contenu { padding-top: calc(var(--entete) + 64px); padding-bottom: 140px; }
  .hero-photo { width: 100%; object-position: 62% 30%; -webkit-mask-image: none; mask-image: none; }
  .hero-voile {
    background:
      linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 60%, rgba(0,0,0,.35) 100%),
      linear-gradient(180deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 30%);
  }
  .hero-texte { font-size: 16px; }
  .hero .bouton { flex: 1 1 100%; }
  .services-zone { margin-top: -84px; }
  .services-barre { grid-template-columns: 1fr; }
  .service { padding: 24px 22px; }
  .service::before { display: none; }
  .service + .service { border-top: 1px solid var(--filet); }
  .metiers-grille { grid-template-columns: 1fr; row-gap: 72px; }
  .liste-check { grid-template-columns: 1fr; }
  .titre-filets::before, .titre-filets::after { display: none; }
  .chiffres-tete { grid-template-columns: 1fr; }
  .chiffres-grille { grid-template-columns: 1fr 1fr; }
  .chiffre { padding: 30px 16px 30px 0; }
  .chiffre + .chiffre { padding-left: 0; border-left: 0; }
  .chiffre:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(0, 0, 0, .28); }
  .chiffre:nth-child(n + 3) { border-top: 1px solid rgba(0, 0, 0, .28); }
  .vedette { grid-template-columns: 1fr; min-height: 0; }
  .vedette-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .vedette-badge { left: auto; right: var(--gouttiere); top: 0; transform: translateY(-50%); }
  .vedette-panneau { padding-top: 72px; }
  .vedette-fiche > div + div { padding-left: 14px; }
  .vedette-fiche dd { font-size: 18px; }
  .etapes { grid-template-columns: 1fr; row-gap: 0; }
  .etapes::before { display: block; top: 0; bottom: 0; left: 43px; right: auto; border-top: 0; border-left: 2px dashed rgba(246, 186, 4, .6); }
  .etape { display: grid; grid-template-columns: 88px 1fr; column-gap: 22px; align-items: start; text-align: left; padding-bottom: 36px; }
  .etape-rond { grid-row: 1 / span 3; }
  .etape-num { margin-top: 8px; }
  .galerie { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; padding-inline: var(--gouttiere); }
  .contact-texte { padding-bottom: 40px; }
  .formulaire { margin-top: 0; margin-bottom: 72px; }
  .champs-duo { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-col:last-child { grid-column: 1 / -1; }

  .hero-mre { margin-top: 28px; padding: 12px 14px 12px 12px; gap: 14px; }
  .hero-mre-ico { width: 44px; height: 44px; }
  .hero-mre-texte { font-size: 14px; }
  .portail-scene { padding: 0 0 64px 0; }
  .portail-corps { grid-template-columns: 1fr; }
  .portail-menu { display: none; }
  .portail-contenu { padding: 18px 16px 20px; }
  .portail-phases li { font-size: 10.5px; }
  .portail-notif { left: 12px; width: calc(100% - 24px); }
  .atouts-grille { grid-template-columns: 1fr; }
  .hebdo-grille { grid-template-columns: 1fr; }
  .hebdo-num { font-size: 180px; }
  .hebdo-liste { grid-template-columns: 1fr; }
  .faq-grille { grid-template-columns: 1fr; }
  .faq-tete { position: static; }
  .faq-item summary { font-size: 16px; }
  .faq-item p { padding-right: 0; }

  .offre { grid-template-columns: 1fr; row-gap: 40px; }
  .offre:nth-of-type(even) .metier-photo { order: 0; margin: 0 22px 22px 0; }
  .offre:nth-of-type(even) .metier-photo::before { inset: 22px -22px -22px 22px; }
  .prestations-grille, .cartes-3, .atouts-4, .rapide-grille { grid-template-columns: 1fr; }
  .prestation, .prestation:nth-child(even) { padding: 24px 0; border-left: 0; }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}